/* ============================================================================
   teil-leistung.css — Leistungs- und Sammelseiten (/augenoptik/, /hoerakustik/
   und die Einzelseiten dahinter).

   Wird von functions.php automatisch NACH seiten.css eingebunden (glob auf
   teil-*.css). Alles hier haengt an .leistung bzw. body.bv-typ-leistung, damit
   keine andere Vorlage etwas davon abbekommt. Nur Token aus dem Vertrag, keine
   neue Farbe, keine Vorrang-Regel, keine neue Schrift: "Instrument Serif" und
   "Nunito" laedt header.php ohnehin.
   ========================================================================= */


/* ── Voraussetzung fuer die klebende Sprungleiste ─────────────────────────
   position:sticky klebt am naechsten SCROLLENDEN Vorfahren. .seitenblatt
   traegt in bau.css overflow:hidden und ist damit selbst ein Scrollbehaelter —
   einer, der nie scrollt, weil er genau so hoch ist wie sein Inhalt. Eine
   Leiste darin klebt deshalb nie. overflow:clip schneidet genauso an der
   Rundung ab, erzeugt aber KEINEN Scrollbehaelter.
   Nur fuer diesen Seitentyp; bau.css bleibt unberuehrt. Kennt ein Browser
   "clip" nicht, faellt die Zeile weg, es bleibt bei overflow:hidden und die
   Leiste laeuft einfach mit — kaputt ist dann nichts. */
body.bv-typ-leistung .seitenblatt{ overflow:clip }


/* ── Masse, die das Inline-Skript nachmisst ───────────────────────────────
   Die Kopfleiste steht fest bei top clamp(8px,1.6vw,22px) und ist rund 64 px
   hoch (gemessen, siehe bau.css) — Unterkante also etwa 86 px. Das Skript am
   Ende von vorlagen/leistung.php setzt den wirklich gemessenen Wert; diese
   Zahlen sind der Stand ohne JavaScript. */
.leistung{
  --kopf-unten:86px;
  --sprung-hoehe:58px;
}
body.admin-bar .leistung{ --kopf-unten:118px }   /* Adminleiste 32 px */


/* ── Buehne ───────────────────────────────────────────────────────────────
   Grund, Verlauf und Versatz stehen in seiten.css. Hier nur, was die lange
   Sammelseite braucht: etwas mehr Ruhe unter dem Titel und ein Leitsatz, der
   die Seite traegt. */
.leistung-sammel .leistung-buehne{
  padding-bottom:clamp(2.6rem,6vh,4.2rem);
}
.leistung-sammel .leistung-leitsatz{
  font-size:clamp(1.08rem,1.7vw,1.42rem);
  line-height:1.55;
  max-width:54ch;
}


/* ── Einstieg: der eigene Text der Sammelseite ────────────────────────────
   Ohne Glas-Kachel und ohne Nummer — die laufende Nummer gehoert den Themen
   weiter unten, zweimal gezaehlt verwirrt sie nur. */
.leistung-einstieg{ margin-top:clamp(1.4rem,3.2vw,2.2rem) }
.leistung-einstieg + .leistung-einstieg{ margin-top:clamp(1.8rem,4vw,2.8rem) }
.leistung-einstieg-titel{
  max-width:var(--mass); margin:0 auto .75rem;
  font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.16;
  letter-spacing:-.02em; color:var(--blau);
  text-wrap:balance; overflow-wrap:break-word;
}


/* ── Sprungleiste: klebt unter der Kopfleiste ─────────────────────────────
   Volle Breite des Seitenblatts, damit sie beim Kleben wie eine Leiste wirkt
   und nicht wie eine schwebende Zeile. Heller Glasgrund, eine Haarlinie
   darunter — keine dunkle Flaeche. */
.leistung-sprung{
  position:sticky; top:var(--kopf-unten); z-index:20;
  margin-top:clamp(1.8rem,4.5vw,3rem);
  padding-block:.5rem;
  background:color-mix(in oklab, var(--weiss) 82%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
          backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--linie);
  box-shadow:0 10px 26px color-mix(in oklab, var(--blau) 6%, transparent);
}

.leistung .sammel-wege{
  display:flex; align-items:center; flex-wrap:wrap; gap:.45rem;
  padding-block:0;
}
.leistung .sammel-wege .chip{
  text-decoration:none; white-space:nowrap;
  background:color-mix(in oklab, var(--weiss) 88%, transparent);
}
/* Schweben und „hier bin ich" muessen sich unterscheiden — sonst sieht die
   Maus aus wie der Standort. Darum zart beim Schweben, voll beim Standort. */
.leistung .sammel-wege .chip:hover{
  background:var(--blau-zart); color:var(--blau);
  border-color:var(--gold); transform:none;
}
.leistung .sammel-wege .chip[aria-current="true"]{
  background:var(--blau); border-color:var(--blau); color:var(--weiss);
  box-shadow:0 6px 16px color-mix(in oklab, var(--blau) 26%, transparent);
}
.leistung .sammel-wege .chip:focus-visible{
  outline:2px solid var(--blau); outline-offset:2px;
}


/* ── Die Themen: Rhythmus durch Wechsel ───────────────────────────────────
   Abwechselnd weiss und creme. Die Trennlinie aus seiten.css faellt damit
   weg — zwei Gliederungsmittel uebereinander sind eines zu viel. */
.leistung .sammel-teil{
  padding-block:clamp(2.8rem,6.2vw,5rem);
  background:var(--weiss);
  scroll-margin-top:calc(var(--kopf-unten) + var(--sprung-hoehe) + 12px);
}
.leistung .sammel-teil:nth-of-type(even){ background:var(--creme) }
.leistung .sammel-teil + .sammel-teil{ border-top:0 }

/* Kopfzeile: laufende Nummer in Gold, darunter eine goldene Haarlinie. */
.leistung .sammel-kopf{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:start; gap:clamp(.9rem,2.4vw,1.5rem);
  margin:0 0 clamp(1.5rem,3.2vw,2.3rem);
  padding-bottom:clamp(.9rem,2vw,1.3rem);
  border-bottom:1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}
.leistung .sammel-zahl{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic;
  font-size:clamp(2rem,4.6vw,3.1rem); line-height:.95;
  color:var(--gold-tief); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.leistung .sammel-kopf-text{ min-width:0 }
.leistung .sammel-kopf .marke{ color:var(--text-leise); margin-bottom:.35rem }
.leistung .sammel-kopf h2{
  font-size:clamp(1.65rem,3.2vw,2.7rem); line-height:1.08;
  letter-spacing:-.022em; color:var(--blau);
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
}

/* Glaskachel: hebt den Vorspann des Themas heraus. Der Satz ist VERSCHOBEN,
   nicht verdoppelt — die Vorlage nimmt ihn aus dem Fliesstext heraus. */
.leistung .sammel-leitsatz{
  position:relative; max-width:68ch;
  margin:0 0 clamp(1.6rem,3.4vw,2.4rem);
  padding:clamp(1.1rem,2.8vw,1.6rem) clamp(1.2rem,3vw,1.9rem)
          clamp(1.1rem,2.8vw,1.6rem) clamp(1.5rem,3.6vw,2.3rem);
  border-radius:var(--r-l);
  font-size:clamp(1.04rem,1.45vw,1.24rem); line-height:1.62;
  color:var(--text); text-wrap:pretty;
}
/* Goldener Faden am linken Rand — .glas bringt position:relative schon mit,
   und sein eigener Schimmer liegt auf ::after, hier ist ::before frei. */
.leistung .sammel-leitsatz::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px;
  border-radius:0 var(--r-rund) var(--r-rund) 0;
  background:linear-gradient(180deg,var(--gold),var(--gold-tief));
}

/* Zwischenueberschriften im Thema */
.leistung .sammel-band + .sammel-band{ margin-top:clamp(1.6rem,3.2vw,2.6rem) }
.leistung .sammel-untertitel{
  max-width:68ch; margin:0 0 .6rem; font-weight:800;
  font-size:clamp(1.1rem,1.6vw,1.36rem); line-height:1.25; color:var(--text);
  text-wrap:balance; overflow-wrap:break-word;
}
.leistung .sammel-untertitel::before{
  content:""; display:inline-block; width:.62em; height:2px;
  vertical-align:.3em; margin-right:.55em;
  background:var(--gold); border-radius:var(--r-rund);
}


/* ── Textspalte, hoechstens 68 Zeichen ────────────────────────────────────
   .blatt heisst in grund.css noch etwas anderes: die Blattflaeche der
   Entwurfs-Startseite mit Grund, Rundung und Schatten. Auf der Textspalte
   ergaebe das einen beigen Kasten mitten im Abschnitt. Darum hier
   zurueckgesetzt — genau wie seiten.css es fuer .leistung-text tut. */
.leistung .sammel-text{
  max-width:68ch;
  /* Eigener Formatierungskontext: haelt ein .alignleft/.alignright-Bild in
     SEINER Spalte. Vorher besorgten das zwei Nebenwirkungen — overflow-x:hidden
     aus .blatt (die Klasse traegt die Spalte jetzt nicht mehr) und
     overflow:hidden auf .seitenblatt (oben auf clip gesetzt, damit die
     Sprungleiste kleben kann). Beide sind weg, also hier ausdruecklich. */
  display:flow-root;
  background:none; box-shadow:none; border-radius:0;
  transform:none; filter:none; opacity:1;
  overflow-wrap:break-word; text-wrap:pretty;
}
.leistung .sammel-text > :first-child{ margin-top:0 }
.leistung .sammel-text > :last-child{ margin-bottom:0 }
.leistung .sammel-text p{ line-height:1.85; margin:0 0 1.2em }
.leistung .sammel-text ul,
.leistung .sammel-text ol{ line-height:1.85; margin:0 0 1.3em; padding-left:1.3em }
.leistung .sammel-text li{ margin:.42em 0 }
.leistung .sammel-text li::marker{ color:var(--gold-tief) }
.leistung .sammel-text strong,
.leistung .sammel-text b{ font-weight:800; color:var(--text) }
.leistung .sammel-text a{
  color:var(--blau); text-underline-offset:.22em; text-decoration-thickness:1.5px;
  text-decoration-color:color-mix(in oklab, var(--blau) 38%, transparent);
  transition:text-decoration-color .25s;
}
.leistung .sammel-text a:hover{ text-decoration-color:var(--gold) }
/* Sollte doch einmal eine Ueberschrift im Fliesstext stehen (bv_abschnitte()
   zieht h1–h6 eigentlich heraus), darf sie die Seite nicht sprengen. */
.leistung .sammel-text h2,
.leistung .sammel-text h3,
.leistung .sammel-text h4{
  margin:1.7em 0 .5em; color:var(--blau); line-height:1.22;
  font-size:clamp(1.1rem,1.6vw,1.36rem);
}

/* Bilder im Text: runde Ecken, weicher Schatten. */
.leistung .sammel-text img{
  border-radius:var(--r-m); height:auto; max-width:100%;
  box-shadow:0 14px 38px color-mix(in oklab, var(--blau) 12%, transparent);
}
.leistung .sammel-text p > img,
.leistung .sammel-text figure{ margin-block:clamp(1.2rem,3vw,1.9rem) }
.leistung .sammel-text figure{ margin-inline:0 }
.leistung .sammel-text figcaption{
  margin-top:.6rem; font-size:.86rem; line-height:1.5; color:var(--text-leise);
}
.leistung .sammel-text .alignleft,
.leistung .sammel-text .alignright{ max-width:min(46%,320px) }
.leistung .sammel-text .alignleft{ float:left; margin:.3rem 1.5rem 1.1rem 0 }
.leistung .sammel-text .alignright{ float:right; margin:.3rem 0 1.1rem 1.5rem }
.leistung .sammel-text .aligncenter{ display:block; margin-inline:auto }


/* Die Textspalten tragen bewusst NICHT .blatt: unter diesem Namen liegt in
   grund.css die Blattflaeche der Entwurfs-Startseite (Grund, Rundung, Schatten,
   Weichzeichner). Damit faellt auch bau.css' Abstandssatz fuer .blatt h2/h3
   weg — hier steht er wieder. bv_abschnitte() zieht Ueberschriften eigentlich
   heraus, dies ist das Netz darunter. */
.leistung .leistung-text{
  max-width:var(--mass); margin-inline:auto;
  display:flow-root;   /* siehe .sammel-text: haelt gefloatete Bilder in der Spalte */
  overflow-wrap:break-word; text-wrap:pretty;
}
.leistung .leistung-text h2,
.leistung .leistung-text h3,
.leistung .leistung-text h4{
  margin:1.7em 0 .5em; color:var(--blau); line-height:1.22;
  font-size:clamp(1.1rem,1.6vw,1.36rem);
}


/* ── Handlungsaufforderung am Fuss ────────────────────────────────────────
   Das Erkennungszeichen steht in der Fusszeile (footer.php ruft bv_blume()).
   Hier nur ein ruhiger goldener Faden, rein aus CSS. */
.leistung-faden{
  display:block; width:72px; height:2px; border-radius:var(--r-rund);
  margin:0 auto clamp(.9rem,2.2vw,1.3rem);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}


/* ── Schmale Fenster: ab 375 px kein Querscrollen ─────────────────────────
   Die Chips laufen dann in EINER Zeile und scrollen in sich selbst — eine
   umgebrochene Leiste waere drei Zeilen hoch und naehme das halbe Telefon. */
@media (max-width:860px){
  .leistung .sammel-wege{
    flex-wrap:nowrap; overflow-x:auto;
    overscroll-behavior-x:contain; scrollbar-width:none;
  }
  .leistung .sammel-wege::-webkit-scrollbar{ display:none }
}
@media (max-width:760px){
  .leistung .sammel-text .alignleft,
  .leistung .sammel-text .alignright{
    float:none; max-width:100%; margin:clamp(1.2rem,3vw,1.8rem) 0;
  }
}
@media (max-width:520px){
  .leistung .sammel-kopf{ grid-template-columns:1fr; gap:.3rem }
  .leistung .sammel-zahl{ font-size:1.8rem }
}


/* ── Ruhe, wenn er sie eingestellt hat ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .leistung .sammel-wege{ scroll-behavior:auto }
  .leistung .sammel-wege .chip{ transition:none }
}