/* ============================================================
   WOLBACH NAVIGATION, eine Quelle fuer alle Seiten
   Eingebunden auf: / (proof-hero.html) · /start/ · /check/ (sichtbarkeits-check.html) ·
   /gruender/ · /referenzen/pott-podologie/ · /referenzen/static-physiotherapie/

   Wird hier etwas geaendert, muss in allen sechs Seiten die Versionsnummer im
   Dateiverweis hochgezaehlt werden (?v=...). Die .htaccess laesst CSS eine Woche
   im Browser-Cache liegen, ohne neue Nummer sieht niemand die Aenderung.

   Die Leiste bringt EIGENE Farb- und Schrift-Tokens mit (--n-*) und erbt
   bewusst nichts von der Seite. Grund: /start/ fuehrt --accent als #FF6600,
   die Startseite als #ee5c0e. Wer erbt, bekommt auf jeder Seite eine andere
   Navigation. Sie muss aber ueberall dieselbe sein, sonst ist sie keine.
   Wird die Marke umgefaerbt, wird sie HIER umgefaerbt.
   ============================================================ */

.nav {
  --n-ink: #16202a;
  --n-ink-soft: #445260;
  --n-muted: #5d6874;
  --n-line: rgba(22,32,42,0.10);
  --n-line-soft: rgba(22,32,42,0.06);
  --n-glass: rgba(255,255,255,0.66);
  --n-edge: rgba(255,255,255,0.9);
  --n-accent: #ee5c0e;
  --n-accent-2: #ff7a2e;
  --n-accent-ink: #a43f0a;
  --n-accent-gross: #c14a0b;
  --n-accent-tint: rgba(238,92,14,0.10);
  --n-shadow: 0 22px 60px rgba(22,32,42,0.10), 0 3px 10px rgba(22,32,42,0.05);
  --n-shadow-lg: 0 34px 90px rgba(22,32,42,0.16), 0 6px 18px rgba(22,32,42,0.07);
  --n-display: 'Urbanist', system-ui, -apple-system, sans-serif;
  --n-body: 'Kumbh Sans', system-ui, -apple-system, sans-serif;

  position: sticky; top: 12px; z-index: 60;
  max-width: 1220px; margin: 12px auto clamp(20px, 3vh, 34px);
  width: calc(100% - 2 * clamp(20px, 4vw, 56px));
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px 11px 24px; border-radius: 100px;
  background: var(--n-glass); border: 1px solid var(--n-edge);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: var(--n-shadow);
  transition: box-shadow .25s ease, background-color .25s ease;
}

/* Die Referenzseiten fuehren ein eigenes .brand in Versalien. Die Leiste soll ueberall
   gleich aussehen, also setzt sie die geerbten Eigenschaften ausdruecklich zurueck. */
.nav .brand {
  font-family: var(--n-display); font-weight: 700; font-size: 19px; line-height: 1.2;
  letter-spacing: -0.01em; text-transform: none; font-style: normal;
  color: var(--n-ink); text-decoration: none; white-space: nowrap;
}
.nav .brand em, .nav .brand span { font-style: normal; font-weight: 400; letter-spacing: -0.01em; color: var(--n-accent-ink); }

.nav-menu { display: flex; align-items: center; gap: 21px; }
.nav-menu a { font-family: var(--n-body); font-size: 14px; font-weight: 500; color: var(--n-ink-soft); text-decoration: none; transition: color .2s; white-space: nowrap; }
.nav-menu a:hover { color: var(--n-ink); }
/* Sprungmarke oder eigene Seite sind zwei verschiedene Versprechen. Die Haarlinie
   trennt sie, die Unterseiten stehen eine Gewichtsstufe fester. */
.nav-menu a.is-page { font-weight: 600; color: var(--n-ink); }
.nav-menu a.is-page:hover { color: var(--n-accent-ink); }
.nav-menu a[aria-current="page"] { color: var(--n-accent-ink); }
.nav-sep { flex: none; width: 1px; height: 15px; background: var(--n-line); }

.nav-tel { display: inline-flex; align-items: center; gap: 7px; font-family: var(--n-body); font-weight: 600; font-size: 14px; color: var(--n-ink); text-decoration: none; white-space: nowrap; }
.nav-tel svg { width: 15px; height: 15px; stroke: var(--n-accent); fill: none; stroke-width: 2; flex: none; }

.nav-cta {
  font-family: var(--n-display); font-weight: 600; font-size: 14px; color: #16202a; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, var(--n-accent-2), var(--n-accent)); padding: 11px 22px; border-radius: 100px;
  box-shadow: 0 8px 20px rgba(238,92,14,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(238,92,14,0.38), inset 0 1px 0 rgba(255,255,255,0.4); }

/* ---- MENUE-KNOPF ---- */
.nav-burger {
  display: none; align-items: center; gap: 9px; min-height: 44px; padding: 8px 15px 8px 12px;
  border-radius: 100px; border: 1px solid var(--n-line); background: rgba(255,255,255,0.55);
  font-family: var(--n-display); font-weight: 600; font-size: 14px; color: var(--n-ink);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .2s, background-color .2s;
}
.nav-burger:hover { border-color: var(--n-accent-2); background: rgba(255,255,255,0.8); }
.burger-glyph { display: block; position: relative; width: 17px; height: 12px; flex: none; }
.burger-glyph i { position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px; background: var(--n-ink); transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .16s ease; }
.burger-glyph i:nth-child(1) { top: 0; }
.burger-glyph i:nth-child(2) { top: 5.1px; }
.burger-glyph i:nth-child(3) { top: 10.2px; }
.nav-burger[aria-expanded="true"] .burger-glyph i:nth-child(1) { transform: translateY(5.1px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-glyph i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-glyph i:nth-child(3) { transform: translateY(-5.1px) rotate(-45deg); }

/* ---- MENUE-TAFEL ---- */
.nav-panel {
  /* Haengt am Knopf, nicht an der Seite: auf breiten Fenstern eine Tafel, auf dem
     Handy fuellt sie die Leistenbreite von selbst aus.
     0.96 statt 0.9, sonst liest die Headline dahinter mit. */
  position: absolute; top: calc(100% + 10px); right: 0; left: auto;
  width: min(400px, calc(100vw - 2 * clamp(20px, 4vw, 56px))); z-index: 61; padding: 14px;
  border-radius: 24px; background: rgba(255,255,255,0.96); border: 1px solid var(--n-edge);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: var(--n-shadow-lg);
  max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.nav-panel.on { opacity: 1; transform: none; }
.panel-cta {
  display: block; text-align: center; font-family: var(--n-display); font-weight: 600; font-size: 16px;
  color: #16202a; text-decoration: none; padding: 15px 20px; border-radius: 100px;
  background: linear-gradient(180deg, var(--n-accent-2), var(--n-accent));
  box-shadow: 0 10px 24px rgba(238,92,14,0.26), inset 0 1px 0 rgba(255,255,255,0.45);
}
.panel-label { margin: 20px 8px 6px; font-family: var(--n-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--n-muted); }
.panel-links { display: grid; }
.panel-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px;
  padding: 11px 14px; border-radius: 13px; text-decoration: none; color: var(--n-ink);
  font-family: var(--n-display); font-weight: 600; font-size: 16.5px;
  transition: background-color .18s, color .18s;
}
.panel-links a:hover { background: var(--n-accent-tint); color: var(--n-accent-ink); }
.panel-links a[aria-current="page"] { color: var(--n-accent-ink); background: var(--n-accent-tint); }
.panel-links small { display: block; margin-top: 3px; font-family: var(--n-body); font-weight: 400; font-size: 12.5px; line-height: 1.45; color: var(--n-muted); }
.panel-links .arw { flex: none; width: 15px; height: 15px; stroke: var(--n-accent); fill: none; stroke-width: 2; }
.panel-tel {
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--n-line-soft);
  font-family: var(--n-display); font-weight: 700; font-size: 19px; color: var(--n-accent-gross); text-decoration: none;
}
.panel-tel svg { width: 16px; height: 16px; stroke: var(--n-accent); fill: none; stroke-width: 2; flex: none; }

/* Jede Seite bringt ein eigenes :focus-visible in ihrer eigenen Akzentfarbe mit.
   Die Leiste setzt ihren eigenen Ring, damit die Tastaturbedienung ueberall gleich aussieht. */
.nav a:focus-visible, .nav button:focus-visible, .nav-panel a:focus-visible {
  outline: 2px solid var(--n-accent-ink, #a43f0a); outline-offset: 3px; border-radius: 6px;
}

.nav-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(22,32,42,0.34); opacity: 0; transition: opacity .24s ease; }
.nav-scrim.on { opacity: 1; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* Gemessen: Marke, sieben Ziele, Nummer und Termin brauchen 1073px. Die Leiste ist
   Viewport minus 8vw, gedeckelt bei 1220. Unter 1220px Fenster wird es eng, ab da
   uebernimmt der Menue-Knopf, statt die Schrift zu quetschen. */
@media (max-width: 1219px) {
  .nav-menu, .nav-sep { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 940px) {
  .nav { padding: 9px 10px 9px 16px; gap: 10px; }
  .nav .brand { font-size: 16px; }
  .nav-cta { padding: 9px 15px; font-size: 13.5px; }
}
@media (max-width: 620px) {
  /* Termin wandert in die Tafel, damit Nummer und Menue nebeneinander Platz behalten. */
  .nav-cta { display: none; }
}
@media (max-width: 430px) {
  .nav { padding: 8px 8px 8px 12px; gap: 8px; }
  /* display:none nimmt das Wort auch aus dem Namen des Links: der Screenreader las
     nur noch "Wolbach". Optisch verschwindet es weiterhin, vorgelesen wird der
     vollstaendige Markenname. 10.09.2026 */
  .nav .brand em { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .nav .brand { font-size: 15px; }
  .nav-tel { font-size: 13.5px; }
  .nav-burger { padding: 8px 13px 8px 10px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-scrim, .burger-glyph i, .nav-cta, .panel-links a { transition: none !important; }
}

/* ============================================================
   DURCHGEHENDER WHATSAPP-KNOPF
   Gehoert zu assets/nav.js, das ihn baut. Liegt bewusst hier und nicht
   in einer eigenen Datei: eine Datei weniger, die beim Hochladen vergessen
   werden kann, und nur EINE Versionsnummer zum Hochzaehlen.

   Eigene --w-* Tokens, aus demselben Grund wie bei der Leiste: /start/ und
   die Startseite fuehren unterschiedliche Akzentfarben. Der Knopf muss
   ueberall gleich aussehen.

   Die Glyphe ist WhatsApp-Gruen, wie schon in den Kontaktkarten der
   Startseite. Der Knopf selbst bleibt in der Markenfarbe, damit die Seite
   nicht zwei Akzente bekommt.
   ============================================================ */

.wa-fix {
  --w-accent: #ee5c0e;
  --w-accent-ink: #a43f0a;
  --w-glass: rgba(255,255,255,0.82);
  --w-edge: rgba(255,255,255,0.92);
  --w-ink: #16202a;
  --w-gruen: #128C7E;
  --w-shadow: 0 18px 44px rgba(22,32,42,0.16), 0 3px 10px rgba(22,32,42,0.07);

  position: fixed; z-index: 55;
  right: clamp(14px, 3.4vw, 28px);
  bottom: calc(clamp(14px, 3vh, 26px) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px 11px 13px; border-radius: 100px;
  background: var(--w-glass);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border: 1px solid var(--w-edge);
  box-shadow: var(--w-shadow);
  color: var(--w-ink); text-decoration: none;
  font-family: var(--n-body, 'Kumbh Sans', system-ui, sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1;
  min-height: 48px;
  transition: box-shadow .22s cubic-bezier(.16,1,.3,1), border-color .22s ease;
}
.wa-fix:hover { border-color: rgba(238,92,14,0.34); box-shadow: 0 22px 54px rgba(22,32,42,0.2), 0 4px 12px rgba(22,32,42,0.08); }
.wa-fix:focus-visible { outline: 2px solid var(--w-accent-ink); outline-offset: 3px; }

/* Der Consent-Knopf unten links kommt von CCM19 und bringt keinen Fokusring mit.
   Er ist die erste Station im Tabulator-Lauf, also braucht er einen. 10.09.2026 */
/* !important ist hier noetig: CCM19 laedt sein Stylesheet nach diesem und setzt am
   Knopf outline: none. Ohne Ring ist die erste Tabulator-Station der Seite unsichtbar. */
button[class*="ccm-settings-summoner"]:focus-visible {
  outline: 2px solid #a43f0a !important; outline-offset: 3px !important; border-radius: 8px; }

/* Der Consent-Knopf von CCM19 steht fest bei bottom:40px links und lag damit auf dem
   Haupt-CTA im Hero: gemessen am 10.09.2026 bei 390px 24 Prozent der Flaeche von
   "Jetzt anrufen". Der Klick ging noch durch, das Bild war aber kaputt. Er rueckt auf
   kleinen Schirmen in die Ecke und wird kleiner. Er bleibt sichtbar, weil er der einzige
   Weg ist, die Einwilligung zu widerrufen. !important, weil CCM19 spaeter laedt. */
@media (max-width: 940px) {
  div[class*="ccm-settings-summoner"] { bottom: 6px !important; left: 6px !important; }
  button[class*="ccm-settings-summoner"] { width: 34px !important; height: 34px !important; }
}
.wa-fix .wa-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(18,140,126,0.13);
}
.wa-fix .wa-ic svg { width: 18px; height: 18px; fill: var(--w-gruen); stroke: none; display: block; }
.wa-fix .wa-txt { display: block; }
.wa-fix .wa-txt small { display: block; font-weight: 500; font-size: 11px; color: #5d6874; margin-top: 3px; letter-spacing: .01em; }

/* Waehrend die Menuetafel offen ist, tritt der Knopf zurueck: er wuerde sonst darueber liegen. */
body.menu-offen .wa-fix,
body.consent-offen .wa-fix { opacity: 0; visibility: hidden; }

/* Solange der Kontaktabschnitt im Blick ist, tritt der Knopf zurueck: dort stehen
   Telefon, WhatsApp und E-Mail bereits als drei gleichwertige Zeilen, der Schweber
   waere doppelt und verdeckt nur das Formular. */
body.kontakt-im-blick .wa-fix { opacity: 0; visibility: hidden; }

/* Der Knopf ist 238x54 gross und liegt dauerhaft ueber dem Inhalt. Gemessen am
   10.09.2026: zwischen 1024 und 1200px deckt er die Merkmalszeilen der Preistabelle
   ab und nimmt dort den Klick an. Unter 1200px bleibt deshalb nur das Symbol,
   48x48, damit die verdeckte Flaeche klein und das Ziel gross genug bleibt. */
@media (max-width: 1200px) {
  .wa-fix { gap: 0; padding: 0; width: 48px; height: 48px; justify-content: center; }
  .wa-fix .wa-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fix { transition: none; }
}