@import "fonts.css";

/* ===================================================================
   Kopfzeile und Fusszeile — die EINE Quelle.
   ===================================================================
   Kopf und Fuss sind auf jeder Seite dasselbe Markup (erzeugt in
   shell.py). Ihre Regeln standen trotzdem verteilt in fz.css,
   fz-extra.css und dem eingebetteten Stil der uebernommenen Seiten,
   und jede Seite lud davon nur einen Teil.

   Das ging auseinander: /erste-hilfe laedt kein fz.css, und dort fehlte
   `display:flex` auf `.navlinks` — die Regel stand nur in fz.css. Die
   Navigationspunkte flossen als Text und brachen auf zwei Zeilen um,
   waehrend dieselbe Leiste auf der Startseite einzeilig blieb.

   Darum: diese Datei laedt JEDE Seite, und zwar als letzte. Neue
   Rahmen-Regeln gehoeren ausschliesslich hierher. Farbwerte werden hier
   nur benutzt, nicht definiert — die kommen aus der Hauptvorlage der
   jeweiligen Seite.
   =================================================================== */

/* header */
  header.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
  .logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:1.4rem;font-weight:700}
  .logo img{width:38px;height:38px;border-radius:9px}
  .navlinks{display:flex;gap:16px;font-size:.92rem;color:var(--ink-soft);font-weight:600}
  .navlinks a:hover{color:var(--red-text)}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .tel{font-size:.9rem;color:var(--green-deep);font-weight:700;white-space:nowrap}

  footer.ft{background:var(--surface);border-top:1px solid var(--line);padding:52px 0 30px}
  .ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
  .ft-grid h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:700;margin-bottom:14px}
  .ft-grid a{display:block;color:var(--ink-soft);font-size:.92rem;margin-bottom:9px}
  .ft-grid a:hover{color:var(--red-text)}
  .ft-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.82rem;color:var(--ink-faint);align-items:center}
  .ft-legal a{color:var(--ink-soft)}
  .ft-legal .a11y{color:var(--green-deep);font-weight:700}
  @media(max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   FrohZeit — Ergänzungen zum Basis-CSS
   1) Skip-Link + Mobilmenü (waren vorher nicht vorhanden)
   2) Prose-Layout für Rechts- und Textseiten
   3) Seiten-Header für Unterseiten
   ============================================================ */

/* --- 1a) Skip-Link (WCAG 2.4.1 Bypass Blocks) --- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:700}
.skip:focus{left:0}

/* --- 1b) Mobilmenü --- */
.navtoggle{display:none;background:transparent;border:1.5px solid var(--line);border-radius:11px;
  width:44px;height:44px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center;padding:0}
.navtoggle:hover{border-color:var(--ink-soft)}
.navtoggle svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.navtoggle .x{display:none}
.navtoggle[aria-expanded="true"] .x{display:block}
.navtoggle[aria-expanded="true"] .bars{display:none}
.mobilemenu{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobilemenu.open{display:block}
.mobilemenu nav{display:flex;flex-direction:column;padding:10px 0 18px}
.mobilemenu nav a{padding:13px 0;border-bottom:1px solid var(--line-soft);font-weight:600;font-size:1.02rem}
.mobilemenu nav a:last-of-type{border-bottom:0}
.mobilemenu .mm-cta{display:flex;flex-direction:column;gap:10px;padding:14px 0 6px}
.mobilemenu .mm-cta .btn{justify-content:center}

/* ============================================================
   KOPFZEILE — Neubau 01.10.2026
   Vorher drei Probleme: der Kopf war halbtransparent und nahm damit
   die Farbe des Abschnitts an, der gerade darunter lag; der
   Beratung-Knopf sprang beim Druecken einen Pixel nach oben; und man
   sah nicht, auf welcher Seite man gerade ist.
   ============================================================ */

header.nav{
  position:sticky; top:0; z-index:40;
  background:var(--surface);          /* voll deckend, nichts schimmert durch */
  backdrop-filter:none;
  border-bottom:1px solid var(--line);
  transition:box-shadow .18s ease, border-color .18s ease;
}
/* Beim Scrollen setzt sich der Kopf sichtbar ab (Klasse kommt aus fz.js) */
header.nav.scrolled{
  box-shadow:0 1px 0 var(--line), 0 6px 20px -8px rgba(50,35,20,.16);
  border-bottom-color:transparent;
}
:root[data-theme="dark"] header.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -8px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) header.nav.scrolled{
  box-shadow:0 1px 0 var(--line),0 8px 24px -8px rgba(0,0,0,.6)}}

.nav-in{height:72px; gap:20px}

/* Logo: eigener Druckpunkt, aber ohne Versatz */
.logo{border-radius:10px; padding:4px 6px; margin-left:-6px; transition:background .14s ease}
.logo:hover{background:var(--surface-2)}
.logo img{border-radius:8px}

/* --- Hauptmenue ---------------------------------------------------------
   Der Unterstrich liegt als Pseudo-Element unter dem Text und wird nur
   ein- und ausgeblendet. So bleibt die Breite jedes Eintrags konstant —
   nichts verrutscht beim Zeigen, Druecken oder Wechseln der Seite. */
.navlinks{gap:4px; align-items:center}
.navlinks a{
  position:relative; padding:9px 12px; border-radius:9px;
  color:var(--ink-soft); font-weight:600; white-space:nowrap;
  transition:color .14s ease, background .14s ease;
}
.navlinks a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  border-radius:2px; background:currentColor;
  transform:scaleX(0); transform-origin:center; transition:transform .16s ease;
}
.navlinks a:hover{color:var(--ink); background:var(--surface-2)}
.navlinks a:hover::after{transform:scaleX(.7)}
.navlinks a:active{background:var(--surface-3)}

/* Aktuelle Seite: dauerhaft markiert, in der Markenfarbe */
.navlinks a[aria-current="page"]{color:var(--red-text)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1)}

.tel{padding:6px 2px; white-space:nowrap}
.tel:hover{text-decoration:underline; text-underline-offset:3px}

/* --- Knoepfe im Kopf ----------------------------------------------------
   Hier ausdruecklich KEIN translateY: im sticky Kopf wirkte das wie ein
   Wackeln der ganzen Leiste. Rueckmeldung stattdessen ueber die Farbe. */
.nav-cta{gap:12px}
.nav-cta .btn{transition:background .14s ease}
.nav-cta .btn:hover{transform:none}
.nav-cta .btn-red:active{background:var(--red-deep)}

/* Fokusring bleibt innerhalb der Leiste, statt oben herauszuragen */
header.nav :focus-visible{outline:2.5px solid var(--green-deep); outline-offset:2px}

/* --- Mobilmenue ---------------------------------------------------------
   Legt sich UEBER die Seite statt sie nach unten zu schieben. Vorher
   wuchs die Leiste beim Oeffnen und der Inhalt sprang. */
.navtoggle{border-radius:10px; width:46px; height:46px; transition:background .14s ease, border-color .14s ease}
.navtoggle:hover{background:var(--surface-2)}
.navtoggle[aria-expanded="true"]{background:var(--surface-3); border-color:var(--ink-faint)}

.mobilemenu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--surface); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 30px -12px rgba(50,35,20,.22);
  max-height:calc(100vh - 72px); overflow-y:auto;
}
:root[data-theme="dark"] .mobilemenu{box-shadow:0 14px 30px -12px rgba(0,0,0,.65)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mobilemenu{
  box-shadow:0 14px 30px -12px rgba(0,0,0,.65)}}
.mobilemenu nav a{
  padding:14px 12px; border-radius:9px; border-bottom:1px solid var(--line-soft);
}
.mobilemenu nav a:hover{background:var(--surface-2)}
.mobilemenu nav a[aria-current="page"]{color:var(--red-text)}
.mobilemenu nav a[aria-current="page"]::before{content:"› "; font-weight:700}

/* Ab hier passt das Menue nicht mehr in eine Zeile */
@media(max-width:420px){
  .nav-in{height:64px; gap:10px}
  .logo{font-size:1.2rem}
  .logo img{width:32px;height:32px}
  .nav-cta .btn-red{padding:11px 16px; font-size:.94rem}
  .mobilemenu{max-height:calc(100vh - 64px)}}

/* --- Fussmenue: vier Spalten, seit die Angebote nach Zielgruppe getrennt
   sind (Familien / Dienste / Unternehmen) --- */
/* --- Fussmenue: fuenf Spalten (Familien / Dienste / Unternehmen / Orte).
   Diese Regel gehoert in fz.css und NICHT in fz-extra.css: die Fusszeile
   steht auf jeder Seite, fz-extra.css wird aber nur von der Haelfte
   geladen. Sie stand vorher in beiden Dateien — das laeuft auseinander. */
.ft-grid{grid-template-columns:1.5fr 1fr 1.1fr 1fr .8fr}
.ft-orte a{white-space:nowrap}
@media(max-width:1100px){.ft-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .ft-orte{grid-column:span 4;border-top:1px solid var(--line);padding-top:18px}
  .ft-orte h4{margin-bottom:10px}
  .ft-orte a{display:inline-block;margin-right:18px}}
@media(max-width:980px){.ft-grid{grid-template-columns:1fr 1fr}
  .ft-orte{grid-column:span 2}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}
  .ft-orte{grid-column:span 1}}

/* --- Anmelde-Zugang in der Kopfzeile --------------------------------
   Dezenter als der Beratungs-Knopf: wer sich anmeldet, sucht den Weg
   gezielt und braucht keinen Blickfang. Aber auffindbar, ohne erst eine
   Unterseite zu oeffnen. */
.anmelden{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border-radius:10px;font-size:.92rem;font-weight:700;color:var(--ink-soft);
  border:1.5px solid var(--line);white-space:nowrap;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.anmelden::before{content:"\1F512";font-size:.9em;opacity:.7}
.anmelden:hover{color:var(--ink);border-color:var(--ink-faint);background:var(--surface-2)}
.anmelden[aria-current="page"]{color:var(--red-text);border-color:var(--red-text)}

/* --- Wann die Leiste umschaltet --------------------------------------
   Gerechnet, nicht geschaetzt: Logo (160) + sieben Menuepunkte (676) +
   Telefonnummer (137) + Anmelden (112) + Beratungsknopf (111) + Raender
   (88) brauchen zusammen rund 1310 px.

   Umgeschaltet wurde aber erst bei 1140 px — und dazwischen klebte das
   Logo am ersten Menuepunkt, weil Flexbox die Luecken aufzehrt statt
   umzubrechen. Hier lagen ausserdem zwei widerspruechliche Saetze
   uebereinander (1040 und 1140 px), ein Rest aus der Zeit, als diese
   Regeln noch in zwei Dateien standen.

   Jetzt in zwei Stufen. Zuerst weicht die Telefonnummer: sie steht auch
   im Klappmenue und in der Fusszeile, der Beratungsknopf bleibt. Erst
   darunter weicht die ganze Leiste ins Klappmenue. */
@media(max-width:1340px){ .tel{display:none} }
@media(max-width:1200px){
  .navlinks,.tel,.anmelden{display:none}
  .navtoggle{display:inline-flex}
}
@media(min-width:1201px){ .mobilemenu{display:none!important} }