/* NF-R105 - Abschnittsnavigation (Logik: js/abschnitte.js).
   Leiste links: beschriftete Abschnitte statt unbeschrifteter Punkte, nur bei ausreichend Rand
   (Klasse ab-breit, vom Skript gemessen). Referenz Oryzo: beschriftete Ziele, der aktive mit Strich.
   Pille unten: kompakter Schnellzugriff fuer schmale Fenster. Beide teilen die Variablen; die Seiten
   setzen nur Akzent und Flaechen. */
:root{--ab-grund:rgba(11,14,21,.94);--ab-rand:rgba(255,255,255,.12);--ab-text:#eef0f4;--ab-leise:#8a95a8;
  --ab-akz:#c49a56;--ab-akz-text:#1a1307;--ab-b-grund:#0f141e}

/* ── Leiste links ────────────────────────────────────────────────────────────────────────── */
.ab{display:none}   /* im Markup zusaetzlich hidden: bis dieses Stylesheet (nicht rendersperrend) da ist, blitzt nichts auf */
/* Eigene, dezente Flaeche: die Seiten wechseln zwischen hellen und dunklen Abschnitten - ohne Flaeche
   war die Beschriftung auf hellem Grund nicht lesbar (gemessen auf Dienstleister, 1600 px). */
.ab-js.ab-breit .ab,.ab-messen .ab{display:flex;position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:60;
  flex-direction:column;padding:8px 8px 8px 6px;border-radius:14px;background:var(--ab-grund);border:1px solid var(--ab-rand);
  box-shadow:0 12px 30px -16px rgba(0,0,0,.5);transition:opacity .3s ease}
.ab-messen .ab{visibility:hidden;transition:none}
.ab.ist-weg{opacity:0;pointer-events:none}
.ab-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ab-liste a{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 4px;border-radius:8px;font-size:12.5px;font-weight:500;line-height:1.25;
  color:var(--ab-leise);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.ab-liste a::before{content:'';flex:0 0 auto;width:12px;height:2px;border-radius:1px;background:currentColor;opacity:.5;transition:width .25s ease,background-color .2s ease,opacity .2s ease}
.ab-liste a:hover{color:var(--ab-text)}
.ab-liste a[aria-current="true"]{color:var(--ab-text)}
.ab-liste a[aria-current="true"]::before{width:22px;background:var(--ab-akz);opacity:1}
.ab-liste a:focus-visible{outline:2px solid var(--ab-akz);outline-offset:1px}
.ab-preisliste{display:none}
.ab-liste .ab-extern{margin-top:6px;padding-top:6px;border-top:1px solid var(--ab-rand)}
.ab-liste .ab-extern a::before{display:none}
.ab-liste .ab-extern a{gap:6px;padding-left:4px}
.ab-liste .ab-pfeil{width:12px;height:12px}

/* ── Pille unten ─────────────────────────────────────────────────────────────────────────── */
.ab-pille{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:950;display:flex;align-items:stretch;gap:3px;
  max-width:calc(100vw - 24px);padding:4px;border-radius:999px;background:var(--ab-grund);border:1px solid var(--ab-rand);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55);font-family:inherit;
  transform:translate(-50%,calc(100% + 28px));opacity:0;visibility:hidden;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear .34s}
.ab-pille.ist-da{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.ab-pille>a,.ab-pille>button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 15px;border:0;border-radius:999px;
  background:transparent;color:var(--ab-text);font:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.ab-pille svg{flex:0 0 auto;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ab-pille .ab-pfeil{width:13px;height:13px;opacity:.75}
.ab-p-abschnitt{min-width:0}
.ab-p-name{display:block;max-width:8.5em;overflow:hidden;text-overflow:ellipsis}
.ab-p-anfrage{background:var(--ab-akz)!important;color:var(--ab-akz-text)!important}
.ab-pille>a:focus-visible,.ab-pille>button:focus-visible{outline:2px solid var(--ab-akz);outline-offset:2px}
@media (hover:hover){.ab-p-abschnitt:hover,.ab-p-preise:hover{background:rgba(255,255,255,.07)}}
@media (max-width:359px){.ab-pille>a,.ab-pille>button{padding:0 11px;font-size:13.5px}.ab-p-name{max-width:6.5em}}
/* NF-R108: feste Aufteilung statt Breite nach Inhalt. Bisher richtete sich die Pille nach dem Namen des aktuellen
   Abschnitts - jeder Abschnittswechsel aenderte ihre Aussenbreite, und "Preise" und "Anfragen" rueckten waagerecht.
   Jetzt hat die Pille bei gleicher Fensterbreite immer dieselbe Breite (Fensterbreite - 24 px, hoechstens 440 px);
   Preise und Anfragen behalten ihre Breite, das Namensfeld nimmt den Rest und kuerzt bei Bedarf mit Auslassung.
   Der volle Name steht weiter im zugaenglichen Namen des Knopfes und im Blatt "Auf dieser Seite". */
/* NF-R109: wieder eine kompakte, frei schwebende Pille - 88 % der Fensterbreite, hoechstens 372 px (deutlicher Abstand
   zu beiden Raendern, etwas mehr Platz als die fruehere inhaltsbreite Pille mit 290-330 px). Die Breite haengt nur am
   Fenster, nie am Abschnittsnamen. */
.ab-pille{width:min(88vw,372px);box-sizing:border-box}
@media (max-width:359px){.ab-pille{width:90vw}}
.ab-pille>.ab-p-abschnitt{flex:1 1 auto;min-width:0;justify-content:flex-start}
.ab-pille>.ab-p-preise,.ab-pille>.ab-p-anfrage{flex:0 0 auto}
.ab-p-name{flex:1 1 auto;min-width:0;max-width:none;text-align:left}
html.hm-offen .ab-pille{visibility:hidden}
/* NF-R107: Wo die Pille erscheinen kann, haelt der Browser beim Ansteuern (Tab, Fokus, Ankersprung
   nach unten) die gemessene Reserve frei - ein fokussiertes Feld landet nicht hinter ihr. Wert und
   Klasse setzt js/abschnitte.js (reserveMessen). */
html.ab-pille-gilt{scroll-padding-bottom:var(--ab-reserve,0px)}

/* ── NF-R108: Schiene links (Schreibtisch ab 1181 px, wenn die beschriftete Leiste nicht passt) ─────────────────
   Gestaltet wie die Fortschrittsanzeige der Startseite: eine feine Spur, je Abschnitt ein Punkt, der aktuelle golden
   und gestreckt. Sichtbar belegt sie nur die linken 24 px (Punkte bei x 9-15, Knoepfe 2-22); die Beschriftung
   erscheint rechts daneben bei Zeiger oder Tastaturfokus - also nur, wenn man sie aufruft. Darunter Preise und
   Anfrage als kleine Knoepfe. Erscheint nach dem Hero, weicht dem Seitenfuss, dem Hauptmenue und dem Blatt. */
.ab-schiene{display:none}
.ab-js.ab-schiene-gilt .ab-schiene{display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:fixed;left:0;top:50%;
  transform:translateY(-50%);z-index:60;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.ab-js.ab-schiene-gilt .ab-schiene.ist-da{opacity:1;visibility:visible;transition-delay:0s}
.ab-s-liste{list-style:none;margin:0;padding:6px 0;position:relative;display:flex;flex-direction:column}
.ab-s-liste::before{content:'';position:absolute;left:11px;top:10px;bottom:10px;width:2px;border-radius:1px;background:rgba(138,149,168,.32)}
.ab-s-marke{position:relative;display:flex;align-items:center;justify-content:center;width:24px;height:clamp(22px,3.4vh,30px);text-decoration:none}
.ab-s-punkt{position:relative;width:6px;height:6px;border-radius:3px;background:#8a95a8;box-shadow:0 0 0 1.5px rgba(8,11,17,.55);
  transition:height .25s ease,background-color .2s ease}
.ab-s-marke:hover .ab-s-punkt{background:#eef0f4}
.ab-s-marke[aria-current="true"] .ab-s-punkt{height:16px;background:var(--ab-akz)}
.ab-s-name{position:absolute;left:30px;top:50%;transform:translate(-4px,-50%);white-space:nowrap;padding:6px 10px;border-radius:7px;
  background:var(--ab-grund);border:1px solid var(--ab-rand);color:var(--ab-text);font-size:12.5px;font-weight:500;line-height:1.1;
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.ab-s-marke:hover .ab-s-name,.ab-s-marke:focus-visible .ab-s-name,.ab-s-knopf:hover .ab-s-name,.ab-s-knopf:focus-visible .ab-s-name{opacity:1;transform:translate(0,-50%)}
.ab-s-marke:focus-visible,.ab-s-knopf:focus-visible{outline:2px solid var(--ab-akz);outline-offset:1px;border-radius:6px}
.ab-s-aktionen{display:flex;flex-direction:column;gap:6px;padding-left:2px}
.ab-s-knopf{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:50%;
  border:1px solid var(--ab-rand);background:var(--ab-grund);color:var(--ab-leise);cursor:pointer;font:inherit;text-decoration:none}
.ab-s-knopf svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-s-knopf:hover{color:var(--ab-text)}
.ab-s-anfrage{background:var(--ab-akz);border-color:var(--ab-akz);color:var(--ab-akz-text)}
.ab-s-anfrage:hover{color:var(--ab-akz-text);filter:brightness(1.08)}
.ab-s-knopf .ab-s-name{left:28px}
/* Startseite: nur Preise und Anfrage, unter der Spur der Fortschrittsanzeige (gleiche Achse). */
.ab-schiene--start{left:calc(28 * var(--u, 1px) - 9px);top:calc(50% + 20vh + 16px);transform:none}
.ab-liste .ab-anfrage-eintrag a{color:var(--ab-akz)}
@media (prefers-reduced-motion:reduce){.ab-schiene,.ab-s-name,.ab-s-punkt{transition:none!important}}
@media print{.ab-schiene{display:none!important}}

/* ── Blatt "Auf dieser Seite" ────────────────────────────────────────────────────────────── */
.ab-blatt{width:min(420px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;margin:auto;padding:0;
  border:1px solid var(--ab-rand);border-radius:18px;background:var(--ab-b-grund);color:var(--ab-text);font-family:inherit;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.ab-blatt::backdrop{background:rgba(4,6,10,.5)}
.ab-blatt[open]{animation:abRein .26s cubic-bezier(.2,.8,.2,1)}
.ab-b-innen{padding:18px 18px 20px}
.ab-b-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ab-b-kopf h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ab-leise);font-family:inherit}
.ab-b-zu{display:grid;place-items:center;width:40px;height:40px;margin:-6px -8px 0 0;border:0;border-radius:50%;background:transparent;color:var(--ab-leise);cursor:pointer}
.ab-b-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ab-b-liste,.ab-b-preisliste{list-style:none;margin:0;padding:0}
.ab-b-liste a,.ab-b-preisliste a,.ab-b-preislink{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:10px;
  color:var(--ab-text);font-size:16px;font-weight:500;text-decoration:none}
.ab-b-liste a::before{content:'';width:14px;height:2px;border-radius:1px;background:currentColor;opacity:.35;flex:0 0 auto}
.ab-b-liste a[aria-current="true"]{background:rgba(255,255,255,.06)}
.ab-b-liste a[aria-current="true"]::before{width:22px;background:var(--ab-akz);opacity:1}
.ab-b-liste a:hover,.ab-b-preisliste a:hover,.ab-b-preislink:hover{background:rgba(255,255,255,.05)}
.ab-b-preise{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--ab-rand)}
.ab-b-preise:empty{display:none}
.ab-b-zwischen{margin:4px 12px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ab-leise)}
.ab-b-preisliste small{margin-left:auto;font-size:13px;color:var(--ab-leise);font-weight:400}
.ab-pfeil{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.ab-b-preislink .ab-pfeil{margin-left:auto}
.ab-b-anfrage{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:14px;border-radius:999px;background:var(--ab-akz);color:var(--ab-akz-text);
  font-size:15.5px;font-weight:600;text-decoration:none}
.ab-blatt a:focus-visible,.ab-blatt button:focus-visible{outline:2px solid var(--ab-akz);outline-offset:2px}
@keyframes abRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .ab-blatt{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;border-bottom:0}
  .ab-b-innen{padding:12px 14px calc(18px + env(safe-area-inset-bottom))}
  .ab-b-innen::before{content:'';display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:2px;background:var(--ab-rand)}
  .ab-blatt[open]{animation:abHoch .3s cubic-bezier(.2,.8,.2,1)}
}
@keyframes abHoch{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.ab-blatt.ab-b-ruhig[open]{animation:none}
@media (prefers-reduced-motion:reduce){.ab-pille{transition:opacity .2s ease,visibility 0s linear .2s;transform:translate(-50%,0)}.ab-pille.ist-da{transition-delay:0s}
  .ab-blatt[open]{animation:none}.ab-liste a::before{transition:none}}
@media print{.ab,.ab-pille{display:none!important}}