/* /assets/css/styles.css — VOLLSTÄNDIG */

/* ==========
   Design-Variablen
   ========== */
:root{
  --brand:#004080;
  --brand-600:#0056b3;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#f5f7fb;
  --border:#e5e7eb;
  --radius:10px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ==========
   Basis
   ========== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Fluid Typography */
h1{font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); line-height:1.2; margin:0 0 .5rem}
h2{font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem); line-height:1.25; margin:1.25rem 0 .5rem}
h3{font-size: clamp(1.05rem, .95rem + .6vw, 1.25rem); margin:1rem 0 .35rem}
p{margin:.5rem 0}
.lead{font-size: clamp(1rem, .95rem + .6vw, 1.15rem); color:#111;}

/* ==========
   Layout-Container
   ========== */
.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ==========
   Header
   ========== */
header{
  background:var(--brand);
  color:#fff;
  position:relative;
  z-index:10;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Desktop-Anordnung: Nav links, Logo-Block rechts */
@media (min-width: 641px){
  header .nav-menu{ order:1; margin-left:0; flex:1; display:flex; justify-content:flex-start; }
  header .logo{ order:2; }
}

/* ==========
   Navigation – Root-Leiste
   ========== */
header .nav-menu > ul.nav-root{
  list-style:none; display:flex; flex-wrap:wrap; gap:18px; margin:0; padding:0;
  flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none;
  overflow-x: auto;            /* nur horizontal scrollen bei Platzmangel */
}
header .nav-menu > ul.nav-root::-webkit-scrollbar{ display:none; }

/* WICHTIG: auf Desktop Dropdowns nicht abschneiden */
@media (min-width: 641px){
  header .nav-menu > ul.nav-root{ overflow: visible; } /* verhindert Abschneiden der Overlays */
}

header .nav-menu > ul.nav-root > li > a,
summary.nav-summary{
  color:#fff; text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:8px; transition:.2s background-color;
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
}
header .nav-menu > ul.nav-root > li > a:hover,
summary.nav-summary:hover{ background:rgba(255,255,255,.14) }
summary.nav-summary::-webkit-details-marker{ display:none; }

/* ==========
   Logo-Block
   ========== */
header .logo{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
header .logo img{
  height:56px !important;     /* Hard-Limit gegen „Riesenlogo“ */
  width:auto !important;
  max-width:100%;
  display:block;
}
header .logo .brand-name{font-weight:600; margin-top:6px}
header .logo .brand-tagline{font-size:14px; margin-top:2px}
@media (max-width: 900px){
  header .logo img{ height:50px !important; }
}
@media (max-width: 380px){
  header .logo img{ height:42px !important; }
}

/* ==========
   Submenüs (Desktop = Overlay ohne Layout-Shift)
   ========== */
@media (min-width: 641px){
  li.nav-group{ position:relative; }

  .nav-sub{
    position:absolute; left:0; top:calc(100% + 10px);
    width:min(420px, 92vw);
    max-height:min(70vh, 580px); overflow:auto;

    margin:0; padding:10px; list-style:none;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); box-shadow:var(--shadow);

    white-space:normal;  /* nicht die Root-UL-Eigenschaften erben */

    display:none;        /* Standard aus */
    z-index:1000;
  }
  /* sichtbar wenn <details> geöffnet ist */
  li.nav-group > details[open] .nav-sub{ display:block; }

  .nav-sub li{ margin:0; }
  .nav-sub a{
    display:block; color:var(--text); background:var(--bg);
    border:1px solid var(--border); border-radius:8px;
    text-decoration:none; font-weight:600; padding:10px 12px;
    transition: background .2s ease, box-shadow .2s ease;
  }
  .nav-sub a:hover{ background:var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.04); }
}

/* ==========
   Footer
   ========== */
footer{
  background:#f7f8fb; color:#111; border-top:1px solid var(--border);
  margin-top:40px;
}
footer .container{padding:18px 20px; gap:16px; flex-wrap:wrap}
footer p{margin:0; font-size:.95rem}
footer .footer-menu{
  list-style:none; display:flex; gap:18px; margin:0; padding:0; flex-wrap:wrap
}
footer .footer-menu a{
  color:var(--brand); font-weight:600; text-decoration:none; transition:color .2s;
}
footer .footer-menu a:hover{ color:var(--brand-600) }

/* ==========
   Content Card
   ========== */
.text-container{
  max-width: 980px;
  margin: 28px auto;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align:left;
}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.features{padding-left:18px; margin:.5rem 0}
.features li{margin:.25rem 0}

/* ==========
   Grids & Cards
   ========== */
.grid{
  display: grid;
  gap: 20px;
  align-items: start;
}
.grid.two{ grid-template-columns: repeat(2, 1fr); }
.grid.three{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){
  .grid.two{ grid-template-columns: 1fr; }
  .grid.three{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px){
  .grid.three{ grid-template-columns: 1fr; }
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow: var(--shadow);
}

/* ==========
   Buttons
   ========== */
.btn{
  display:inline-block; border:1px solid var(--border); background:#fff;
  padding:.6rem .9rem; border-radius:10px; text-decoration:none; cursor:pointer;
  font-weight:600; transition: transform .05s ease, box-shadow .2s ease, background .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.btn:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)}
.btn:active{transform:translateY(1px)}
.btn.primary{ background:var(--brand); color:#fff; border-color:transparent }
.btn.primary:hover{ background:var(--brand-600) }
.cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px }
.cta p{margin:0}

/* ==========
   Medien/Abbildungen
   ========== */
.figure{margin:0}
.figure .muted{font-size:.9rem}
.feature-image,
.text-container img{
  max-width:100%; height:auto; display:block; margin:12px 0;
  border-radius:8px; border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.feature-image{ width:100%; max-height:540px; object-fit:contain }

/* ==========
   Lightbox
   ========== */
.zoomable{cursor:zoom-in}
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
.lightbox.is-active{display:flex}
.lightbox__img{max-width:92vw; max-height:92vh; box-shadow:0 10px 30px rgba(0,0,0,.35); border-radius:6px}
.lightbox__close{
  position:absolute; top:14px; right:16px; color:#fff; background:transparent;
  border:0; font-size:28px; line-height:1; cursor:pointer;
}

/* ==========
   Responsive Helfer
   ========== */
@media (max-width: 900px){
  .container{padding:0 16px}
  header .nav-menu > ul.nav-root{gap:12px}
}

/* Hamburger default ausblenden (Desktop) */
.nav-toggle{ display:none; }

/* Mobil (≤640px): Logo oben, Hamburger, Menü einklappbar */
@media (max-width: 640px){
  .container{flex-wrap:wrap; gap:10px}

  header .logo{order:1; width:100%}
  header .nav-toggle{order:2; display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:38px; margin-left:auto; border:1px solid var(--border);
    background:#fff; border-radius:10px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.04);
  }
  header .nav-toggle span{display:block; width:22px; height:2px; background:#111; margin:3px 0}

  header .nav-menu{order:3; width:100%; margin:0}
  header .nav-menu > ul.nav-root{
    display:none; margin:6px 0 10px; padding:8px; border-radius:10px;
    background:rgba(255,255,255,.06); backdrop-filter:saturate(140%) blur(4px);
    flex-direction:column; gap:8px;
  }
  body.nav-open header .nav-menu > ul.nav-root{ display:flex; }

  header .nav-menu > ul.nav-root > li > a{
    display:block; padding:12px 10px; background:rgba(255,255,255,.08); border-radius:8px
  }

  /* --- Submenüs (mobil): Links weiß --- */
  header .nav-menu .nav-sub{
    position: static;
    margin: 4px 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    list-style: none;
  }

  header .nav-menu .nav-sub a,
  header .nav-menu .nav-sub a:visited{
    display: block;
    color: #fff !important;               /* Weiß, auch für :visited */
    text-decoration: none;
    padding: 10px 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
  }
  header .nav-menu .nav-sub a:hover{
    background: rgba(255,255,255,.16);
  }

  /* optional: geöffnete Kategorie leicht highlighten */
  header .nav-menu details[open] > summary.nav-summary{
    background: rgba(255,255,255,.12);
    border-radius: 8px;
  }



  /* Content & Footer mobil */
  .text-container{ margin:18px 12px; padding:18px; border-radius:12px }
  .text-container p, .text-container li{ font-size:1rem; line-height:1.65 }
  .grid.two, .grid.three{ grid-template-columns:1fr !important }
  .feature-image, .text-container img{ margin:10px 0 14px }
  .cta{ flex-direction:column; align-items:stretch; gap:10px }
  .cta .btn{ width:100%; text-align:center; padding:.8rem 1rem }
  footer .container{ gap:10px }
  footer .footer-menu{ flex-direction:column; gap:8px }
}

/* Sehr kleine Screens */
@media (max-width: 380px){
  header .logo img{ height:42px !important; }
  .text-container{ margin:14px 10px; padding:16px; }
}

/* ==========
   Cookie-Banner
   ========== */
.cookie-banner{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 0;
  width: auto;
  max-width: calc(100vw - 24px);
}
.cookie-banner__inner{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.cookie-banner__text{ margin: 0; color: var(--text); }
.cookie-banner__actions{ display: flex; gap: 10px; }
@media (max-width: 480px){
  .cookie-banner{ left: 0; right: 0; transform: none; bottom: 12px; padding: 0 12px; }
  .cookie-banner__inner{ max-width: none; align-items: stretch; }
  .cookie-banner__actions{ width: 100%; }
  .cookie-banner__actions .btn{ flex: 1; text-align: center; }
}