:root{
  --bg:#0b1220;
  --card:#101a30;
  --text:#0f172a;
  --muted:#475569;
  --accent:#3a4ab8;
  --accent2:#2dd4bf;
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(15,23,42,.28);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;

  --nav-active-grad:linear-gradient(135deg, rgba(58,74,184,1), rgba(58,74,184,.75));
  --nav-active-border:rgba(58,74,184,.65);

  --field-bg:#ffffff;
  --field-bg-2:#f8fbff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#dfe8eb;
  color:var(--text);
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 16px;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   HEADER / NAV
========================= */
header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(11,18,32,.72);
  border-bottom:1px solid var(--border);
}

.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#fff;
}

.brand-badge{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent), rgba(45,212,191,.65));
  box-shadow:var(--shadow);
  overflow:hidden;
  line-height:0;
}

.brand-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:4px;
}

.main-nav{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}

.main-nav > ul{
  list-style:none;
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.nav-cta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0;
}

nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
  border-radius:12px;
  color:#fff;
  background:transparent;
  border:1px solid transparent;
}

nav a:hover,
nav a.active{
  color:#fff;
  background:var(--nav-active-grad);
  border:1px solid var(--nav-active-border);
}

nav a.active{
  background:linear-gradient(135deg, rgba(58,74,184,1), rgba(35,55,150,1));
  border-color:rgba(58,74,184,.70);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  font-weight:800;
}

.active:hover{
  filter:brightness(1.05);
}

.nav-item{
  position:relative;
}

.has-sub{
  position:relative;
}

/* unsichtbare Hover-Brücke zwischen Hauptpunkt und Dropdown */
.has-sub::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px;
}

.subnav{
  list-style:none;
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:240px;
  padding:10px;
  margin:0;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(11,18,32,.96);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  z-index:300;
}

.subnav li{
  display:block;
}

.subnav li + li{
  margin-top:6px;
}

.subnav a{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  color:#fff;
  white-space:nowrap;
  text-align:left;
}

.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav{
  display:block;
}
.burger{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:10px 12px;
  color:#fff;
}

@media (max-width:640px){
  .burger{display:inline-flex;}

  .main-nav{
    position:relative;
    justify-content:flex-start;
  }

  .main-nav > ul{
    display:none;
  }

  .main-nav > ul.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    padding:10px;
    margin:0;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(11,18,32,.92);
    backdrop-filter:blur(10px);
    z-index:200;
  }

  .main-nav > ul.open > li > a{
    display:block;
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    text-align:left;
  }

  .subnav{
    display:block;
    position:static;
    min-width:0;
    padding:6px 0 0 14px;
    margin:0;
    border:0;
    background:transparent;
    backdrop-filter:none;
    box-shadow:none;
  }

  .subnav a{
    white-space:normal;
    padding:10px 12px;
  }
}

/* =========================
   BUTTONS / FORM
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:650;
}

.btn.primary{
  border-color:rgba(58,74,184,.55);
  background:linear-gradient(135deg, rgba(58,74,184,.95), rgba(45,212,191,.55));
}

header .nav-cta .btn{
  background:var(--nav-active-grad);
  border-color:var(--nav-active-border);
  color:#fff;
}

header .nav-cta .btn:hover{
  filter:brightness(1.05);
}

input.btn,
textarea.btn,
select.btn{
  background:var(--field-bg);
  border:2px solid var(--border-strong);
  color:var(--text);
}

input.btn:focus,
textarea.btn:focus,
select.btn:focus{
  outline:none;
  border-color:rgba(58,74,184,.65);
  box-shadow:0 0 0 4px rgba(58,74,184,.18);
  background:var(--field-bg-2);
}

/* =========================
   LAYOUT / CARDS
========================= */
.hero{
  padding:40px 0 22px;
}

.hero-card{
  overflow:hidden;
  border:2px solid var(--border-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
}

.card,
.listbox{
  border:2px solid var(--border-strong);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card{
  padding:18px;
}

.kicker{
  display:none;
}

h1{
  margin:10px 0 10px;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.12;
}

.section{
  padding:18px 0 10px;
}

.section-title{
  margin:0 0 12px;
  font-size:1.3rem;
}

.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.cards-3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.card-top{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:6px;
}

.badge{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-weight:750;
  color:var(--text);
}

.card h3{
  margin:0;
  font-size:1.15rem;
}

.list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}

.card-actions,
.cta-row,
.quicklinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.card-actions,
.cta-row{
  margin-top:14px;
}

.contactbar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:650;
}

.pill:hover{
  background:rgba(255,255,255,.10);
}

.muted{
  color:var(--muted);
}

.small{
  font-size:.92rem;
}

details{
  border:2px solid var(--border-strong);
  border-radius:14px;
}

@media (max-width:900px){
  .cards,
  .cards-3{
    grid-template-columns:1fr;
  }
}

/* =========================
   CONTENT TYPOGRAPHY
========================= */
.lead,
.ql-editor{
  color:var(--text);
  font-size:1.05rem;
  line-height:1.65;
}

.lead{
  max-width:70ch;
}

.lead p,
.ql-editor p{
  margin:0 0 1rem;
}

.lead ul,
.ql-editor ul,
.lead ol,
.ql-editor ol{
  margin:10px 0 1rem;
  padding-left:18px;
}

.lead strong,
.ql-editor strong{
  color:var(--text);
}

.lead a,
.ql-editor a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

.lead h2,
.ql-editor h2{
  margin:1.2rem 0 .7rem;
  font-size:clamp(1.4rem, 2vw, 1.8rem);
  line-height:1.2;
}

.lead h3,
.ql-editor h3{
  margin:1rem 0 .6rem;
  font-size:clamp(1.15rem, 1.6vw, 1.35rem);
  line-height:1.25;
}

/* =========================
   BANNER
========================= */
.banner-wrap{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(58,74,184,1), rgba(58,74,184,.75));
  margin-bottom:14px;
}

.hero-banner{
  width:100%;
  height:clamp(110px, 18vw, 230px);
  object-fit:contain;
  display:block;
}

/* =========================
   IMAGES: FRONTEND + EDITOR
========================= */
.lead img,
.ql-editor img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid var(--border);
}

.lead::after,
.ql-editor::after{
  content:"";
  display:block;
  clear:both;
}

.lead img.img-100,
.ql-editor img.img-100{ width:100%; }

.lead img.img-75,
.ql-editor img.img-75{ width:75%; }

.lead img.img-50,
.ql-editor img.img-50{ width:50%; }

.lead img.img-33,
.ql-editor img.img-33{ width:33.333%; }

.lead img.img-25,
.ql-editor img.img-25{ width:25%; }

.lead img.pos-left,
.ql-editor img.pos-left{
  float:left;
  margin:0 14px 10px 0;
}

.lead img.pos-right,
.ql-editor img.pos-right{
  float:right;
  margin:0 0 10px 14px;
}

.lead img.pos-center,
.ql-editor img.pos-center{
  float:none;
  margin:10px auto;
}

@media (max-width:700px){
  .lead img.pos-left,
  .lead img.pos-right,
  .ql-editor img.pos-left,
  .ql-editor img.pos-right{
    float:none;
    margin:10px auto;
    width:100% !important;
  }
}

/* =========================
   ADMIN EDITOR
========================= */
#editor{
  margin-top:8px;
}

#editor .ql-toolbar.ql-snow{
  border:2px solid var(--border-strong);
  border-radius:16px;
}

#editor .ql-container.ql-snow{
  border:2px solid var(--border-strong);
  border-radius:16px;
  min-height:340px;
  background:#fff;
}

#editor .ql-editor{
  min-height:340px;
  padding:22px;
  background:#fff;
  color:var(--text);
}

.imgtool{
  position:sticky;
  bottom:12px;
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  display:none;
}

.imgtool.show{
  display:block;
}

.imgtool .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.imgtool .row + .row{
  margin-top:10px;
}

.imgtool .mini{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:650;
  cursor:pointer;
}

.imgtool .mini.primary{
  background:rgba(58,74,184,.55);
  border-color:rgba(58,74,184,.75);
}

.imgtool input[type="range"]{
  width:min(420px, 100%);
}

/* =========================
   TABLES
========================= */
.table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
}

.table th,
.table td{
  text-align:left;
  padding:12px 10px;
  border-bottom:2px solid var(--border);
  vertical-align:top;
}

.table thead th{
  color:var(--text);
  font-weight:900;
  background:rgba(255,255,255,.03);
  border-bottom:2px solid var(--border-strong);
}

/* =========================
   FOOTER
========================= */
footer{
  margin-top:30px;
  border-top:1px solid var(--border);
  padding:22px 0;
  color:var(--muted);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}

.footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   COOKIE HINWEIS
========================= */
.cb{
  position:fixed;
  left:0;
  right:0;
  bottom:16px;
  z-index:9999;
  padding:0 16px;
}

.cb-card{
  max-width:var(--max);
  margin:0 auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(10px);
  border-radius:20px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  padding:14px 16px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

.cb-title{
  font-weight:900;
  letter-spacing:.2px;
}

.cb-desc{
  color:var(--muted);
  margin-top:4px;
  font-size:.95rem;
  line-height:1.35;
}

.cb-desc a{
  text-decoration:underline;
  text-underline-offset:3px;
}

.cb-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.cb[hidden]{
  display:none;
}

.cb:not([hidden]) .cb-card{
  animation:cbIn .18s ease-out;
}

@keyframes cbIn{
  from{
    transform:translateY(10px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

@media (max-width:640px){
  .cb{
    bottom:10px;
    padding:0 12px;
  }

  .cb-card{
    flex-direction:column;
    align-items:stretch;
  }

  .cb-actions .btn{
    width:100%;
  }
}

/* =========================
   QUILL INDENT
========================= */
.ql-indent-1{ margin-left:1.5rem; }
.ql-indent-2{ margin-left:3rem; }
.ql-indent-3{ margin-left:4.5rem; }
.ql-indent-4{ margin-left:6rem; }
.ql-indent-5{ margin-left:7.5rem; }
.ql-indent-6{ margin-left:9rem; }
.ql-indent-7{ margin-left:10.5rem; }
.ql-indent-8{ margin-left:12rem; }

/* =========================
   SONSTIGES
========================= */
.file-link{
  color:#3a4ab8;
  font-weight:700;
  text-decoration:none;
}

.file-link:hover{
  text-decoration:underline;
  filter:brightness(1.05);
}

.lieth-map{
  position:relative;
  margin:14px 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.lieth-img{
  width:100%;
  height:auto;
  display:block;
}

.lieth-dot{
  position:absolute;
  transform:translate(-50%,-50%);
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.9);
  background:rgba(0,180,255,.9);
  box-shadow:0 0 0 6px rgba(0,180,255,.18);
  cursor:pointer;
}

.lieth-pop{
  position:absolute;
  width:min(360px,80vw);
  background:rgba(11,18,32,.95);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  z-index:20;
}