/* Header und Footer des neuen Designs — als eigene Datei, damit die
   Bestandsseiten (Ratgeber, Bundesländer, Rechtliches, Tailwind-Layout) das
   gleiche Kleid tragen können, ohne die komplette site.css zu laden. Die
   volle site.css würde deren Seitenkörper umstylen (body-Font, Links usw.);
   hier ist alles auf header.site und footer.gross begrenzt.

   Quelle der Regeln: site.css — wer dort Header/Footer ändert, ändert hier mit. */

@font-face{font-family:Urbanist;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/v2/urbanist-latin-var.woff2) format("woff2")}

:root{
  --c-primary:#005F73;
  --c-primary-dark:#00434F;
  --c-ink:#0B0F11;
  --c-ink-soft:#5B6368;
  --c-ink-subtle:#8A9296;
  --c-line:#EBEDEE;
  --c-surface:#F7F8F9;
}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);box-shadow:0 1px 0 var(--c-line)}
header.site .inner{max-width:1120px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:32px}
header.site .logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
header.site .logo img{height:26px;width:auto}
header.site nav.main{display:flex;gap:30px;align-items:center;font-size:.88rem;font-weight:600;margin-left:auto}
header.site .nav-cta{display:flex;gap:10px;align-items:center}
header.site nav.main{position:static}
header.site nav.main a{color:var(--c-ink-soft);text-decoration:none}
header.site nav.main a:hover{color:var(--c-primary)}
header.site nav.main a.active{color:var(--c-primary)}
header.site .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;border:1.5px solid transparent;text-decoration:none;font-family:inherit}
header.site .btn.primary{background:var(--c-primary);color:#fff}
header.site .btn.primary:hover{background:var(--c-primary-dark)}
header.site .btn.ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
header.site .btn.ghost:hover{border-color:var(--c-ink-subtle);background:var(--c-surface)}
header.site .dev-link{color:#C2410C;font-size:.85rem;font-weight:700;text-decoration:none}
header.site .dev-link:hover{text-decoration:underline}
/* Mobil wie im Original-Design: die Navigationslinks verschwinden, Logo und
   CTA bleiben — die Footer-Links uebernehmen die Navigation. Unter 420px
   faellt auch der Login-Knopf weg. */

/* Einzige Regel hier, die ueber Header/Footer hinausgeht — bewusst: Die
   Bestandsseiten (Tailwind) haben keine Umbruchregel, und deutsche Komposita
   wie "Patientendokumentation" sprengen sonst auf dem Handy die Seite. */
h1,h2,h3{overflow-wrap:break-word;hyphens:manual}

/* ---------- Footer ---------- */
footer.gross{background:var(--c-primary-dark);color:rgba(255,255,255,.75);padding:56px 0 32px;margin-top:20px;font-size:16px;line-height:1.6}
footer.gross .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
footer.gross .fuss-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
@media(max-width:900px){footer.gross .fuss-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.gross .fuss-grid{grid-template-columns:1fr}}
footer.gross .marke b{color:#fff;font-family:Urbanist,sans-serif;font-size:1.15rem}
footer.gross .marke p{font-size:.85rem;line-height:1.6;margin-top:10px;max-width:36ch}
footer.gross h4{color:#fff;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;margin-top:0}
footer.gross ul{list-style:none;margin:0;padding:0}
footer.gross li{margin-bottom:9px}
footer.gross a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.88rem}
footer.gross a:hover{color:#fff;text-decoration:underline}
footer.gross .fuss-leiste{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem}
footer.gross .fuss-trust{display:flex;gap:18px;flex-wrap:wrap}
footer.gross .fuss-trust span{display:inline-flex;align-items:center;gap:6px}
footer.gross .fuss-trust svg{width:14px;height:14px;stroke:#7BD8C2;fill:none;stroke-width:2}

/* ---------- Hamburger-Menü (bis 860px) ---------- */
header.site .nav-burger{display:none;width:42px;height:42px;border:1.5px solid var(--c-line);border-radius:8px;background:transparent;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;flex-shrink:0}
header.site .nav-burger span{display:block;width:18px;height:2px;background:var(--c-ink);border-radius:2px;transition:transform .2s,opacity .2s}
header.site .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.site .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
header.site .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header.site nav.main a.nur-mobil{display:none}
@media(max-width:860px){
  header.site .nav-burger{display:inline-flex}
  /* Peters Vorgabe: Login bleibt, der CTA weicht dem Menüknopf — er steht
     stattdessen als erster Punkt im aufgeklappten Menü. */
  header.site .nav-cta .btn.primary{display:none}
  header.site .nav-cta{margin-left:auto}
  header.site nav.main{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-top:1px solid var(--c-line);box-shadow:0 18px 40px -20px rgba(11,15,17,.35);padding:8px 0 14px}
  header.site.nav-offen nav.main{display:flex}
  header.site nav.main a{padding:14px 24px;font-size:1rem;border-bottom:1px solid var(--c-line)}
  header.site nav.main a:last-child{border-bottom:none}
  header.site nav.main a.nur-mobil{display:block;margin:10px 24px 4px;padding:13px 18px;text-align:center;background:var(--c-primary);color:#fff;border-radius:8px;font-weight:700}
  header.site nav.main a.dev-link{color:#C2410C}
}