/* ============================================================================
   Seiten — je Seitentyp ein Block.
   Diese Datei wird aus den Ergebnissen des Vorlagenbaus zusammengesetzt, nicht
   von Hand gepflegt: sieben Sitzungen haben gleichzeitig angehaengt und sich
   dabei gegenseitig ueberschrieben (03.10.2026, zwei Bloecke gingen verloren).
   Wer einen Block aendert, aendert ihn hier.
   ========================================================================= */


/* === filiale === */
/* Filialseite (9 Stück). Bausteine aus grund.css/bau.css werden benutzt —
   .glas .karte .filiale .filialen .warm .knopf .einblenden —, hier steht nur, was
   dieser Seitentyp zusätzlich braucht. Keine neuen Farbwerte, nur Token. */

/* ── Bühne: Ort, Begrüßung, Bild ────────────────────────────── */
.fil-buehne{ min-height:auto; padding-bottom:clamp(2.2rem,5vw,4rem) }
.fil-buehne-raster{ display:grid; align-items:center;
  gap:clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
.fil-buehne-raster.allein{ grid-template-columns:minmax(0,1fr); max-width:62ch }
@media (max-width:940px){ .fil-buehne-raster{ grid-template-columns:minmax(0,1fr) } }

.fil-buehne h1{ margin-bottom:1rem; overflow-wrap:break-word }
.fil-gruss{ max-width:52ch; color:var(--text-leise);
  font-size:clamp(1rem,1.15vw,1.16rem) }
.fil-gruss p{ margin:0 0 .85em }
.fil-gruss p:last-child{ margin-bottom:0 }
.fil-gruss a{ color:var(--blau-hell); text-underline-offset:.22em }
.fil-buehne .knopfreihe{ margin-top:1.7rem }

.fil-foto{ position:relative; overflow:hidden; aspect-ratio:4/3.4;
  border-radius:var(--r-xl); background:var(--sand);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 24px 56px rgba(19,55,109,.15) }
.fil-foto img{ display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); transition:transform 1.2s var(--weich) }
.fil-foto:hover img{ transform:scale(1.07) }

/* ── Die drei Glas-Kacheln ──────────────────────────────────── */
.fil-reihe-feld{ padding-top:0 }
.fil-reihe{ display:grid; gap:clamp(.9rem,1.7vw,1.3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr)) }
.fil-kachel{ display:flex; flex-direction:column; gap:.85rem;
  padding:clamp(1.15rem,2vw,1.6rem); background:var(--glas) }
.fil-kachel h2{ font-size:clamp(1.04rem,1.35vw,1.26rem); font-weight:800;
  letter-spacing:-.012em; color:var(--blau) }

/* Öffnungszeiten — Tabelle, heutiger Tag hervorgehoben (wirkung.js setzt .heute) */
.fil-zeiten{ width:100%; border-collapse:collapse; font-size:.95rem }
.fil-zeiten th,.fil-zeiten td{ padding:.46em .25em; vertical-align:top;
  border-bottom:1px solid var(--linie) }
.fil-zeiten tr:last-child th,.fil-zeiten tr:last-child td{ border-bottom:0 }
.fil-zeiten th{ text-align:left; font-weight:700; color:var(--text) }
.fil-zeiten td{ text-align:right; white-space:nowrap; color:var(--text-leise) }
.fil-zeiten td.hinweis{ text-align:left; white-space:normal }
.fil-zeiten tr.heute th,.fil-zeiten tr.heute td{ background:var(--gold-zart) }
.fil-zeiten tr.heute th{ color:var(--blau); padding-left:.6em;
  box-shadow:inset 2px 0 0 var(--gold) }
.fil-zeiten tr.heute td{ color:var(--text); font-weight:700 }

/* Anschrift */
.fil-anschrift{ margin:0; font-style:normal; font-size:.95rem; line-height:1.62;
  color:var(--text-leise) }
.fil-anschrift span{ display:block }
.fil-kontakt{ display:flex; flex-direction:column; gap:.42rem; margin-top:auto; padding-top:.3rem }
.fil-kontakt a{ display:inline-flex; align-items:center; gap:.55em;
  font-size:.96rem; font-weight:700; color:var(--blau); text-decoration:none;
  overflow-wrap:anywhere; transition:color .25s }
.fil-kontakt a::before{ content:""; flex:none; width:7px; height:7px;
  border-radius:50%; background:var(--gold) }
.fil-kontakt a:hover{ color:var(--blau-hell); text-decoration:underline;
  text-underline-offset:.2em }

/* Terminbuchung */
.fil-termin{ background:linear-gradient(150deg,var(--weiss),var(--creme) 52%,var(--gold-zart));
  border-color:rgba(203,176,130,.34) }
.fil-termin .knopf{ align-self:flex-start; margin-top:auto }
.fil-wirt{ font-size:.76rem; letter-spacing:.02em; overflow-wrap:anywhere }

/* ── Das Team — ohne Porträtfotos, dafür ein Monogramm in Gold ── */
.fil-ueberschrift{ font-size:clamp(1.5rem,2.8vw,2.4rem);
  margin-bottom:clamp(1.2rem,2.4vw,1.9rem) }
.fil-team-feld,.fil-rest-feld{ padding-top:clamp(2.4rem,5vw,4.4rem) }
.fil-team{ display:grid; gap:clamp(.8rem,1.5vw,1.1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr)) }
.fil-kopf{ display:flex; align-items:center; gap:.95rem; padding:1.05rem 1.15rem }
.fil-mono{ flex:none; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  font-size:.92rem; font-weight:850; color:var(--gold-tief);
  background:var(--gold-zart); border:1px solid rgba(203,176,130,.42) }
.fil-kopf .wer{ min-width:0 }
.fil-kopf .name{ display:block; font-size:1.04rem; font-weight:800;
  letter-spacing:-.015em; line-height:1.25; color:var(--text) }
.fil-kopf .rolle{ display:block; margin-top:.2rem; font-size:.84rem;
  line-height:1.4; color:var(--text-leise) }
/* bau.css staffelt .einblenden nur bis zum fünften Kind — große Teams brauchen mehr */
.fil-team .einblenden:nth-child(n+6){ transition-delay:.3s }

/* ── Was die Seite sonst noch trägt ─────────────────────────── */
.fil-text{ max-width:68ch }
.fil-text h2{ font-size:clamp(1.4rem,2.2vw,1.95rem); line-height:1.18; margin:2.1em 0 .5em }
.fil-text h2:first-child{ margin-top:0 }
.fil-text h3{ font-size:clamp(1.06rem,1.4vw,1.28rem); color:var(--blau); margin:1.7em 0 .4em }
.fil-text p{ line-height:1.75; margin:0 0 1.15em }
.fil-text ul,.fil-text ol{ line-height:1.75; padding-left:1.3em; margin:0 0 1.3em }
.fil-text li{ margin:.3em 0 }
.fil-text a{ color:var(--blau-hell); text-underline-offset:.22em }
.fil-text img{ max-width:100%; height:auto; border-radius:var(--r-m) }
.fil-text iframe{ max-width:100%; border:0; border-radius:var(--r-m) }

/* ── Wegweiser zu den anderen Filialen ──────────────────────── */
.fil-weitere{ padding:clamp(1.6rem,3.4vw,2.8rem) }
.fil-weitere h2{ font-size:clamp(1.35rem,2.3vw,2rem) }
.fil-weitere .filialen{ margin-top:clamp(1.1rem,2.2vw,1.7rem) }
.fil-weitere .filiale{ padding:1.05rem 1.2rem }
.fil-weitere .filiale h3{ margin:0; font-size:1.06rem }
.fil-weitere .filiale .pfeil{ margin-top:.55rem; font-size:.84rem }

/* ── Handy: ab 375px ohne Querscrollen ──────────────────────── */
@media (max-width:430px){
  .fil-zeiten{ font-size:.9rem }
  .fil-zeiten tr{ display:block; padding:.42em 0; border-bottom:1px solid var(--linie) }
  .fil-zeiten tr:last-child{ border-bottom:0 }
  .fil-zeiten th,.fil-zeiten td{ display:block; text-align:left;
    border-bottom:0; padding:.1em .25em; white-space:normal }
  .fil-zeiten tr.heute th{ padding-left:.5em }
  .fil-foto{ aspect-ratio:4/3 }
  .fil-mono{ width:42px; height:42px; font-size:.86rem }
}

@media (prefers-reduced-motion:reduce){
  .fil-foto img{ transition:none }
  .fil-foto:hover img{ transform:scale(1.03) }
  .fil-kachel:hover,.fil-kopf:hover,.fil-weitere .filiale:hover{ transform:none }
}
/* === ende filiale === */

/* === stelle === */
/* Stellenanzeige (Slug stellenangebot-…). Schmale Bühne mit Berufsbezeichnung
   und Chips, darunter ab 900px Text links und eine mitlaufende Glaskarte
   rechts. Nur Token aus dem Vertrag, keine Vorrang-Regel, keine neue Schrift. */

/* position:sticky weiter unten trägt nur, wenn kein Vorfahr ein Scrollbehälter
   ist — overflow-x:hidden am Körper macht genau das. clip schneidet gleich ab,
   erzeugt aber keinen Behälter. Bewusst nur für diesen Seitentyp. */
.bv-typ-stelle{ overflow-x:clip }

.stelle .bahn{ max-width:1180px }

/* grund.css vergibt .einblenden ein zweites Mal — als Laufband der Startseite
   (display:flex, width:max-content, endlose Animation „ziehen"). bau.css
   ueberschreibt davon nur Deckkraft und Verschiebung, der Rest bleibt stehen.
   Ohne diese Zeile wuerde jeder eingeblendete Abschnitt zur Laufschrift.
   Hier nur fuer diesen Seitentyp zurechtgerueckt — gehoert eigentlich in
   grund.css auf „.laufband .einblenden" verengt. */
.stelle .einblenden{ display:block; width:auto; animation:none }

/* ── Bühne ──────────────────────────────────────────────────── */
.stelle-buehne{
  padding:clamp(6.2rem,12vh,9rem) 0 clamp(1.4rem,3vw,2.4rem);
  background:linear-gradient(180deg,var(--weiss),var(--grund) 68%,var(--creme));
  border-bottom:1px solid var(--linie);
}
.stelle-titel{
  font-size:clamp(1.95rem,5.6vw,4rem);
  max-width:18ch;
  overflow-wrap:break-word;
  hyphens:auto;
}
.stelle-chips{ margin-top:clamp(1rem,2vw,1.5rem) }
/* Die Chips sagen nur, was im Text steht — sie sind keine Schalter. */
.stelle-chips .chip{ cursor:default; border-color:var(--linie) }
.stelle-chips .chip:hover{ transform:none; border-color:var(--linie) }

/* ── Zwei Spalten ab 900px ──────────────────────────────────── */
.stelle-raster{
  display:grid;
  gap:clamp(1.1rem,2.6vw,2.4rem);
  padding-block:clamp(1.6rem,4vw,3.2rem);
  /* stretch, nicht start: die Karte laeuft nur mit, solange ihre Spalte so
     hoch ist wie der Text. Bei align-items:start waere die Spalte nur so hoch
     wie die Karte selbst — dann klebt nichts. */
  align-items:stretch;
}
@media (min-width:900px){
  .stelle-raster{ grid-template-columns:minmax(0,1fr) minmax(0,340px) }
  .stelle-raster.einspaltig{ grid-template-columns:minmax(0,1fr) }
}

/* ── Textspalte ─────────────────────────────────────────────── */
/* bau.css deckelt .blatt auf 68ch — das ist das Mass der Zeile, nicht das
   des Blattes. Das Blatt fuellt die Spalte, der Text behaelt sein Mass. */
.stelle-text{ padding:clamp(1.3rem,3.4vw,2.8rem); min-width:0; max-width:none; overflow-wrap:break-word }
.stelle-abschnitt{ max-width:64ch }
/* Sicherheitsnetz: hier ist .blatt die Textspalte, nicht der Seitenvorhang der
   Startseite — deren Eröffnung darf sie nicht blass und unscharf stehen lassen. */
.stelle .stelle-text{ transform:none; filter:none; opacity:1 }

.stelle-abschnitt + .stelle-abschnitt{ margin-top:clamp(1.6rem,3vw,2.4rem) }
.stelle-abschnitt h2{
  font-size:clamp(1.18rem,2.2vw,1.6rem);
  color:var(--blau);
  margin-bottom:.7rem;
  overflow-wrap:break-word;
}
.stelle-abschnitt h3{ margin:1.3rem 0 .5rem; color:var(--blau) }
.stelle-abschnitt p{ margin:0 0 .9em }
.stelle-abschnitt ol{ margin:0 0 1em; padding-left:1.25em }
.stelle-abschnitt li{ margin-bottom:.4em }
.stelle-abschnitt ul{ list-style:none; margin:0 0 1em; padding-left:0 }
.stelle-abschnitt ul li{ position:relative; padding-left:1.4em }
.stelle-abschnitt ul li::before{
  content:"◆"; position:absolute; left:0; top:.1em;
  font-size:.62em; color:var(--gold-tief);
}
.stelle-abschnitt a{ color:var(--blau); text-underline-offset:.18em; overflow-wrap:anywhere }
.stelle-abschnitt img{ max-width:100%; height:auto; border-radius:var(--r-m) }
/* Eine breite Tabelle im Text darf die Seite nicht seitlich aufziehen. */
.stelle-abschnitt table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse }

/* ── Mitlaufende Karte ──────────────────────────────────────── */
.stelle-seite{ min-width:0 }
.stelle-karte{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.75rem;
  padding:clamp(1.2rem,2.4vw,1.7rem);
}
@media (min-width:900px){
  .stelle-karte{ position:sticky; top:clamp(80px,8vw,104px) }
}
.stelle-karte-kopf{
  margin:0; font-size:.68rem; font-weight:850; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-tief);
}
.stelle-karte-ort{
  margin:0; font-size:1.22rem; font-weight:800; letter-spacing:-.02em;
  color:var(--blau); overflow-wrap:break-word;
}
.stelle-anschrift{
  font-style:normal; font-size:.92rem; line-height:1.6; color:var(--text-leise);
  display:flex; flex-direction:column;
}
.stelle-knopf{ align-self:stretch; margin-top:.35rem }
.stelle-mail{
  font-size:.88rem; font-weight:700; color:var(--blau);
  text-decoration:none; overflow-wrap:anywhere;
}
.stelle-mail:hover{ text-decoration:underline }
.stelle-tel{ margin:0; font-size:.9rem }
.stelle-filiallink{
  align-self:stretch; margin-top:.3rem; padding-top:.75rem;
  border-top:1px solid var(--linie);
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.88rem; font-weight:800; color:var(--blau); text-decoration:none;
}
.stelle-filiallink span{ transition:transform .3s var(--weich) }
.stelle-filiallink:hover span{ transform:translateX(5px) }

/* ── Weitere Stellen derselben Filiale ──────────────────────── */
.stelle-weitere{ padding:clamp(2.2rem,5vw,4rem) 0 }
.stelle-weitere .kopfzeile{ margin-bottom:clamp(1.2rem,2.4vw,1.8rem) }
.stelle-weitere h2{ font-size:clamp(1.35rem,2.8vw,2.1rem) }
.stelle-andere{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.7rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
}
.stelle-andere a{
  display:flex; flex-direction:column; gap:.3rem; height:100%;
  padding:1.1rem 1.25rem; text-decoration:none; color:inherit;
}
.stelle-andere strong{ font-size:1.02rem; font-weight:800; color:var(--blau); overflow-wrap:break-word }
.stelle-andere .leise{ font-size:.85rem }

/* ── Signet ─────────────────────────────────────────────────── */
.stelle-signet{ padding-bottom:clamp(2rem,4vw,3rem) }

/* ── Unter „weniger Bewegung" steht alles still ─────────────── */
@media (prefers-reduced-motion:reduce){
  .stelle .karte:hover,
  .stelle .knopf:hover,
  .stelle .chip:hover,
  .stelle-filiallink:hover span{ transform:none }
}
/* === ende stelle === */

/* === termin === */
/* Terminkalender (Slug terminkalender-… und tk-auswahl). Zwei Gesichter:
   die Auswahl aus Glas-Kacheln und der Kalender selbst. Der Kalender ist der
   iframe eines fremden Anbieters — er bekommt feste Höhen, weil eine fremde
   Seite ihre Höhe nicht melden kann, und nirgends eine Einblendung: ein
   Element, das erst durch JavaScript sichtbar wird, ist ohne JavaScript weg,
   und das ist hier die Seite, über die gebucht wird. */

.termin-seite{ padding:clamp(6.2rem,12vh,9rem) 0 clamp(3rem,6vw,5.5rem) }
.termin-seite .bahn{ max-width:1180px }

/* ── Kopfzeile ──────────────────────────────────────────────── */
/* Der Kopf traegt eine Flaeche (aus .kopfzeile) und muss deshalb so breit sein
   wie das Kachelraster darunter — sonst steht ein blasser Kasten von 592 px
   neben einem Raster von 1068 px und wirkt verrutscht (gemessen 03.10.2026).
   Schmal bleibt nur der Text darin, der Lesbarkeit wegen. */
.termin-kopf{ max-width:none; margin-bottom:clamp(1.4rem,2.6vw,2.2rem) }
.termin-kopf h1, .termin-kopf p, .termin-kopf .marke{ max-width:58ch }
.termin-kopf h1{ font-size:clamp(1.85rem,3.1vw,2.7rem); color:var(--text) }
.termin-kopf p{ margin:.8rem 0 0; font-size:clamp(.97rem,1vw,1.05rem) }

/* ── Der Kalender ───────────────────────────────────────────── */
/* isolation:isolate, damit Safari den iframe wirklich an der Rundung abschneidet. */
.termin-rahmen{
  border-radius:var(--r-l); overflow:hidden; isolation:isolate;
  background:var(--weiss); border:1px solid var(--linie);
  box-shadow:0 14px 42px rgba(19,55,109,.08);
}
.termin-fenster{ display:block; width:100%; height:1100px; border:0; background:var(--weiss) }
@media (max-width:899.98px){ .termin-fenster{ height:1500px } }

/* ── Hinweis für alle, bei denen der Kalender nicht lädt ────── */
.termin-hilfe{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1.1rem 0 0; padding:.9rem 1.15rem; border-radius:var(--r-m);
  background:var(--gold-zart); border:1px solid rgba(203,176,130,.35);
  font-size:.92rem; color:var(--text-leise);
}
.termin-hilfe strong{ color:var(--text); font-weight:750 }
.termin-hilfe a{ color:var(--blau); font-weight:800; text-decoration:none;
  border-bottom:1.5px solid rgba(19,55,109,.25) }
.termin-hilfe a:hover,.termin-hilfe a:focus-visible{ border-bottom-color:var(--blau) }

/* ── Auswahl: eine große Glas-Kachel je Filiale ─────────────── */
.termin-wahl{
  display:grid; gap:clamp(.9rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.termin-kachel{
  display:flex; flex-direction:column; gap:.5rem; min-height:11.5rem;
  padding:clamp(1.25rem,2.2vw,1.7rem);
  color:inherit; text-decoration:none;
  transition:transform .45s var(--weich), box-shadow .45s var(--weich), border-color .45s;
}
/* .glas legt einen Lichtschleier als ::after darüber — der Inhalt muss darüber bleiben. */
.termin-kachel > *{ position:relative; z-index:1 }
.termin-kachel:hover,.termin-kachel:focus-visible{
  transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 22px 48px rgba(19,55,109,.13);
}
.termin-kachel .ort{ font-size:clamp(1.28rem,2vw,1.6rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.12; color:var(--blau) }
.termin-kachel .zeiten{ font-size:.87rem; line-height:1.5; color:var(--text-leise) }
.termin-kachel .pfeil{ margin-top:auto; padding-top:.8rem;
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.9rem; font-weight:800; color:var(--blau) }
.termin-kachel .pfeil i{ font-style:normal; transition:transform .3s var(--weich) }
.termin-kachel:hover .pfeil i,.termin-kachel:focus-visible .pfeil i{ transform:translateX(5px) }

/* ── Text, den die Seite sonst noch trägt ───────────────────── */
.termin-text{ max-width:72ch; margin-top:clamp(1.8rem,3.4vw,2.6rem) }
.termin-text h2{ font-size:clamp(1.25rem,1.9vw,1.6rem); color:var(--blau); margin-bottom:.5rem }

.termin-signet{ margin-top:clamp(2.4rem,5vw,3.6rem) }

@media (max-width:420px){
  .termin-kachel{ min-height:0 }
  .termin-hilfe{ padding:.8rem .95rem }
}

@media (prefers-reduced-motion:reduce){
  .termin-kachel,.termin-kachel .pfeil i{ transition:none }
  .termin-kachel:hover,.termin-kachel:focus-visible{ transform:none }
  .termin-kachel:hover .pfeil i,.termin-kachel:focus-visible .pfeil i{ transform:none }
}
/* === ende termin === */

/* === leistung === */
/* Leistungsseiten: Augenoptik, Hörakustik, Kontaktlinsen, Brillenarten,
   Bauformen & Zubehör, Gehörschutz, Lupen und Lesegeräte, bachmaier HEAROS.
   Kurze Seiten (700–2000 Zeichen) — darum viel Luft, eine schmale Textspalte
   und je vorhandener Überschrift eine Glas-Kachel. Heller Grund, Blau und Gold
   nur als Akzent. Alles hängt an .leistung, damit keine andere Vorlage etwas
   davon abbekommt. Nur Token aus dem Vertrag, keine Vorrang-Regel. */

/* Eine Spalte für die ganze Seite. --mass steht in ch und misst sich damit an
   der Schriftgröße des Elements, das sie anwendet — darum wird sie nur auf
   Elemente in Fließtextgröße gelegt (Bühnen-Hülle, Kachel, Aufruf, Textspalte).
   Die Überschrift bekommt ihre Breite von der Hülle, nicht selbst: bei 4,6rem
   wären 68ch über 2500px breit. So steht alles auf derselben linken Kante,
   und der Fließtext bleibt bei 68 Zeichen je Zeile. */
.leistung{ --mass:68ch }
.leistung-buehne-text,
.leistung-vorteil,
.leistung-aufruf-innen,
.leistung .leistung-text{ max-width:var(--mass); margin-inline:auto }

/* ── Bühne: sehr weiche Verlaufsfläche aus Creme und Zartblau ─── */
.leistung-buehne{
  position:relative; isolation:isolate; overflow:clip;
  padding:clamp(6.5rem,13vh,9.5rem) 0 clamp(2.2rem,5vh,3.6rem);
}
.leistung-grund{
  position:absolute; inset:-24% 0; z-index:-1; pointer-events:none;
  /* Zartblau oben, Creme unten — und nicht umgekehrt: unten läuft die Fläche
     über die Maske in den cremefarbenen Seitengrund aus, und Creme auf Creme
     geht ohne sichtbare Naht ineinander über. Die Fläche ragt oben und unten
     um 24% heraus; die Marken sind darauf gerechnet, nicht auf die Bühne. */
  background:
    radial-gradient(56% 46% at 80% 10%, color-mix(in oklab, var(--weiss) 88%, transparent), transparent 66%),
    linear-gradient(168deg, var(--blau-zart) 0%, var(--blau-zart) 26%, var(--creme) 78%, var(--creme) 100%);
  /* Läuft nach unten aus, damit die Bühne ohne Kante in die Seite übergeht —
     unabhängig davon, welchen Grund die Seite darunter trägt. */
  -webkit-mask-image:linear-gradient(180deg,#000 0 56%,transparent 84%);
          mask-image:linear-gradient(180deg,#000 0 56%,transparent 84%);
}

/* Der eine Effekt: ein ruhiger Versatz des Bühnengrunds beim Scrollen.
   Reine CSS-Zeitachse, kein Skript — fällt ohne Unterstützung einfach weg,
   und unter prefers-reduced-motion entsteht er gar nicht erst.
   Der Grund ragt oben und unten um 24% heraus; der Versatz bleibt mit 4,5%
   weit darunter, es kann also keine Kante auftauchen. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .leistung-grund{
      animation:leistung-versatz linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100vh;
    }
    @keyframes leistung-versatz{
      from{ transform:translate3d(0,-2.5%,0) }
      to{ transform:translate3d(0,4.5%,0) }
    }
  }
}

.leistung-titel{
  font-size:clamp(2.3rem,5.6vw,4.6rem); line-height:1.03;
  letter-spacing:-.024em; color:var(--text);
  text-wrap:balance; overflow-wrap:break-word; hyphens:auto;
}
.leistung-leitsatz{
  margin:1.15rem 0 0;
  font-size:clamp(1.04rem,1.5vw,1.3rem); line-height:1.58;
  color:var(--text-leise); text-wrap:pretty;
}

/* ── Lauf: je Abschnitt seine Kachel, darunter sein Fließtext ─── */
.leistung-lauf{ padding-block:clamp(1.8rem,4.5vw,3.2rem) 0 }
.leistung-band + .leistung-band{ margin-top:clamp(2.4rem,5.5vw,4.2rem) }

.leistung-vorteil{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:clamp(.85rem,2.4vw,1.4rem);
  margin:0 auto clamp(1rem,2.4vw,1.6rem);
  padding:clamp(1rem,2.8vw,1.5rem) clamp(1.1rem,3vw,1.8rem);
  border-radius:var(--r-l);
}
/* Goldener Faden am linken Rand — .glas bringt position:relative schon mit. */
.leistung-vorteil::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));
}
.leistung-nr{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1;
  color:var(--gold-tief); font-variant-numeric:tabular-nums;
  width:2.4ch; text-align:center;
}
.leistung-vorteil-titel{
  margin:0; font-size:clamp(1.18rem,2.2vw,1.7rem); line-height:1.2;
  letter-spacing:-.018em; color:var(--blau);
  text-wrap:balance; overflow-wrap:break-word;
}

/* ── Textspalte, höchstens 68 Zeichen je Zeile ─────────────────
   .blatt ist laut Vertrag die Textspalte. grund.css trägt unter demselben
   Namen noch die Blattfläche der Entwurfs-Startseite: Fläche, Schatten und
   eine Unschärfe, die erst body.offen löst — auf einer Unterseite also nie.
   Darum hier ausdrücklich zurückgesetzt, nur für diesen Seitentyp.
   Gehört eigentlich in grund.css auf „.rahmen > .blatt" verengt. */
.leistung .leistung-text{
  background:none; box-shadow:none; border-radius:0;
  transform:none; filter:none; opacity:1;
  overflow-wrap:break-word; text-wrap:pretty;
}
.leistung .leistung-text > :first-child{ margin-top:0 }
.leistung .leistung-text > :last-child{ margin-bottom:0 }
.leistung .leistung-text p{ line-height:1.85; margin:0 0 1.2em }
.leistung .leistung-text ul,
.leistung .leistung-text ol{ line-height:1.85; margin:0 0 1.3em; padding-left:1.3em }
.leistung .leistung-text li{ margin:.42em 0 }
.leistung .leistung-text li::marker{ color:var(--gold-tief) }
.leistung .leistung-text strong,
.leistung .leistung-text b{ font-weight:800; color:var(--text) }
.leistung .leistung-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 .leistung-text a:hover{ text-decoration-color:var(--gold) }

/* Bilder im Fließtext — manche Leistungsseiten tragen welche. */
.leistung .leistung-text img{
  border-radius:var(--r-m);
  box-shadow:0 12px 34px color-mix(in oklab, var(--blau) 10%, transparent);
}
.leistung .leistung-text p > img,
.leistung .leistung-text figure{ margin-block:clamp(1.2rem,3vw,1.8rem) }
.leistung .leistung-text figure{ margin-inline:0 }
.leistung .leistung-text figcaption{
  margin-top:.6rem; font-size:.86rem; line-height:1.5; color:var(--text-leise);
}
.leistung .leistung-text .alignleft,
.leistung .leistung-text .alignright{ max-width:min(46%,320px) }
.leistung .leistung-text .alignleft{ float:left; margin:.3rem 1.5rem 1.1rem 0 }
.leistung .leistung-text .alignright{ float:right; margin:.3rem 0 1.1rem 1.5rem }
.leistung .leistung-text .aligncenter{ display:block; margin-inline:auto }

/* ── Handlungsaufforderung am Fuß ──────────────────────────────── */
.leistung-aufruf{ padding-block:clamp(2.6rem,6vw,4.6rem) }
.leistung-aufruf-innen{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.6rem,2vw,1rem); text-align:center;
  margin-inline:auto;
  padding:clamp(1.8rem,5vw,3rem) clamp(1.2rem,4vw,2.4rem);
  border-radius:clamp(22px,3vw,38px);
  background:linear-gradient(148deg,var(--weiss),var(--creme) 52%,var(--gold-zart));
  border:1px solid color-mix(in oklab, var(--gold) 34%, transparent);
  box-shadow:0 18px 52px color-mix(in oklab, var(--blau) 8%, transparent);
}
.leistung-knopfreihe{ justify-content:center }
.leistung-signet{ margin-inline:auto }

/* Ab 375px muss alles ohne Querscrollen lesbar bleiben. */
@media (max-width:760px){
  .leistung .leistung-text .alignleft,
  .leistung .leistung-text .alignright{
    float:none; max-width:100%; margin:clamp(1.2rem,3vw,1.8rem) 0;
  }
}
@media (max-width:420px){
  .leistung-knopfreihe{ width:100%; flex-direction:column; align-items:stretch }
  .leistung-knopfreihe .knopf{ width:100% }
}
/* === ende leistung === */

/* === recht === */
/* Rechtstexte: Impressum, Datenschutz, AGB, Widerruf, Versand, Zahlung,
   Echtheit von Bewertungen. Lesbarkeit geht hier vor allem anderen — eine
   Spalte mit hoechstens 70 Zeichen, viel Luft ueber jeder Ueberschrift, ab
   1100px links ein klebendes Verzeichnis. Nur Token aus dem Vertrag. */

.recht{ padding-bottom:clamp(3rem,7vw,6rem) }

/* Kopfzeile — schmal, hell, eine goldene Haarlinie als Abschluss */
.recht-kopf{
  padding:clamp(5.5rem,10vw,7.5rem) 0 clamp(1.2rem,2.4vw,2rem);
  background:
    radial-gradient(60% 120% at 12% -20%, var(--blau-zart) 0%, transparent 60%),
    radial-gradient(50% 100% at 95% -10%, var(--gold-zart) 0%, transparent 58%),
    var(--grund);
}
.recht-kopf .bahn::after{
  content:""; display:block; height:1px; width:min(100%,70ch);
  margin-top:clamp(1rem,2vw,1.6rem);
  background:linear-gradient(90deg, rgba(203,176,130,.85), rgba(203,176,130,0));
}
.recht-titel{
  font-size:clamp(1.85rem,3.4vw,2.9rem); line-height:1.1; letter-spacing:-.02em;
  max-width:26ch; overflow-wrap:break-word; hyphens:auto;
}
.recht-stand{ margin:.9rem 0 0; font-size:.86rem }
.recht-stand time{ font-weight:700; color:var(--text) }

/* Zwei Spalten erst, wenn eine zweite Spalte auch Platz hat */
.recht-raster{
  display:grid; gap:clamp(1.6rem,3vw,3.4rem); align-items:start;
  padding-top:clamp(1.8rem,3.4vw,3rem);
}
@media (min-width:1100px){
  .recht-raster{ grid-template-columns:minmax(210px,264px) minmax(0,1fr) }
  .recht-raster.einspaltig{ grid-template-columns:minmax(0,1fr) }
}

/* Inhaltsverzeichnis */
.recht-vz{
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-m);
  padding:.85rem 1rem 1rem; box-shadow:0 6px 22px rgba(19,55,109,.05);
}
.recht-vz > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.15rem 0;
  font-size:.7rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blau);
}
.recht-vz > summary::-webkit-details-marker{ display:none }
.recht-vz > summary::after{ content:"▾"; color:var(--gold-tief); font-size:.8rem; letter-spacing:0 }
.recht-vz[open] > summary::after{ content:"▴" }
.recht-vz nav{ margin-top:.7rem }
.recht-vz ul{ list-style:none; margin:0; padding:0 }
.recht-vz li{ margin:0 }
.recht-vz a{
  display:block; padding:.4em .7em; border-left:2px solid transparent;
  border-radius:var(--r-s); color:var(--text-leise); text-decoration:none;
  font-size:.88rem; line-height:1.45; overflow-wrap:break-word;
  transition:color .25s var(--weich), background .25s var(--weich), border-color .25s var(--weich);
}
.recht-vz a:hover{ color:var(--blau); background:var(--blau-zart) }
.recht-vz a:focus-visible{ outline:2px solid var(--blau-hell); outline-offset:2px }
.recht-vz a.hier{ color:var(--blau); font-weight:750; background:var(--blau-zart); border-left-color:var(--gold) }
.recht-vz li.tief a{ padding-left:1.5em; font-size:.82rem }
@media (min-width:1100px){
  .recht-vz{
    position:sticky; top:clamp(94px,11vh,124px);
    max-height:calc(100vh - clamp(130px,16vh,180px));
    overflow-y:auto; overscroll-behavior:contain;
  }
  .recht-vz > summary{ display:none }
  .recht-vz nav{ margin-top:0 }
}
@media (max-width:1099px){
  .recht-vz ul{ max-height:min(44vh,330px); overflow-y:auto; overscroll-behavior:contain }
}

/* Die Textspalte. Die Rueckstellungen schuetzen sie vor dem .blatt aus
   grund.css — dort meint .blatt die ganze Seitenflaeche der Startseite
   und traegt deren Eroeffnung (blur, opacity) mit sich. */
.recht .recht-text{
  max-width:70ch; background:none; box-shadow:none; border-radius:0;
  transform:none; filter:none; opacity:1; overflow-wrap:break-word;
}
.recht-text :is(h2,h3,h4,h5,h6){
  scroll-margin-top:clamp(96px,12vh,134px); overflow-wrap:break-word; hyphens:auto;
}
.recht-text h2{
  font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.25; letter-spacing:-.015em;
  color:var(--blau); margin:clamp(2.8rem,5vw,3.8rem) 0 .6em;
}
.recht-text h3{
  font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.35; color:var(--text);
  margin:clamp(2rem,3.4vw,2.6rem) 0 .45em;
}
.recht-text h4,.recht-text h5,.recht-text h6{
  font-size:1rem; line-height:1.4; color:var(--text); margin:1.7rem 0 .4em;
}
.recht-text > :first-child{ margin-top:0 }
.recht-text p{ line-height:1.75; margin:0 0 1.15em }
.recht-text ul,.recht-text ol{ line-height:1.75; margin:0 0 1.3em; padding-left:1.35em }
.recht-text li{ margin:.35em 0 }
.recht-text a{ color:var(--blau-hell); text-underline-offset:.22em; overflow-wrap:anywhere }
.recht-text a:hover{ color:var(--blau) }
.recht-text strong,.recht-text b{ font-weight:800; color:var(--text) }
.recht-text hr{ border:0; border-top:1px solid var(--linie); margin:2.4rem 0 }
.recht-text blockquote{
  margin:1.4em 0; padding:.1em 0 .1em 1.1em;
  border-left:2px solid var(--gold); color:var(--text-leise);
}
/* Eine breite Tabelle rollt in sich — die Seite rollt nie zur Seite */
.recht-text table{
  display:block; width:100%; overflow-x:auto; border-collapse:collapse;
  margin:0 0 1.4em; font-size:.93rem;
}
.recht-text th,.recht-text td{
  border:1px solid var(--linie); padding:.6em .75em; text-align:left; vertical-align:top;
}
.recht-text th{ background:var(--creme); color:var(--blau); font-weight:800 }

/* Seite ohne hinterlegten Text — ruhig und ehrlich, statt leer */
.recht-leer{ max-width:60ch; padding:clamp(1.4rem,3vw,2rem) }
.recht-leer h2{
  margin:0 0 .6em; font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.3; color:var(--blau);
}
.recht-leer p{ margin:0 0 1em; line-height:1.75; color:var(--text-leise) }
.recht-leer p:last-of-type{ margin-bottom:0 }
.recht-wege{ margin-top:1.5rem }

.recht-signet{ display:flex; align-items:center; justify-content:center; margin:clamp(2.6rem,6vw,4rem) auto 0 }

@media (prefers-reduced-motion:reduce){
  .recht-vz a{ transition:none }
}

@media print{
  .recht-kopf{ padding-top:0; background:none }
  .recht-kopf .bahn::after{ background:none; border-top:1px solid var(--linie) }
  .recht-vz,.recht-signet{ display:none }
  .recht-raster{ display:block; padding-top:1rem }
  .recht .recht-text{ max-width:none }
}
/* === ende recht === */

/* === angebote === */
/* Angebotsseite (Slug aktuelle-angebote…). Helle Bühne mit Titel und — nur wenn
   im Text wirklich einer steht — dem Gültigkeitszeitraum. Darunter je Angebot
   eine große Kachel, ab 900px zweispaltig, zum Schluss ein ruhiger Streifen zu
   den Filialen. Der Kachel-Effekt läuft über transform und box-shadow; kein
   filter, damit der Text beim Zeigen scharf bleibt. */

.angebote .bahn{ max-width:1280px }

/* grund.css trägt .einblenden noch aus dem Laufband der Startseite (Zeile 230:
   display:flex, gap:3.4rem, width:max-content, animation:ziehen; dazu .einblenden span
   in Blau mit opacity .34). bau.css nimmt davon nur Deckkraft und Verschiebung
   zurück. Für diese Seite wird der Rest hier zurückgenommen — sonst wandern die
   Kacheln und der Pfeil im Knopf wird blass. Gemessen am 03.10.2026. */
.angebote-einleitung{ display:block; width:auto; animation:none }
.angebote-streifen{ width:auto; animation:none }
.angebot{ animation:none }
.angebote-signet .signet{ animation:none }
.angebote-einleitung span,
.angebot-text span,
.angebot .pfeil{ font-size:inherit; font-weight:inherit; color:inherit; opacity:1 }

/* ── Bühne ──────────────────────────────────────────────────── */
.angebote-buehne{
  position:relative; overflow:hidden;
  padding:clamp(6.2rem,12vh,9rem) 0 clamp(1.2rem,2.6vw,2rem);
}
.angebote-buehne::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 58% at 80% 6%, rgba(203,176,130,.34), transparent 64%),
    radial-gradient(48% 56% at 6% 0%, rgba(46,99,168,.14), transparent 62%),
    linear-gradient(180deg,#FFFDFA,var(--grund) 72%);
}
.angebote-buehne > .bahn{ position:relative }
.angebote-buehne h1{
  font-size:clamp(1.95rem,5.2vw,4rem);
  max-width:20ch;
  overflow-wrap:break-word;
  hyphens:auto;
}
/* Steht im Seitentext kein Zeitraum, gibt die Vorlage diesen Hinweis gar nicht
   erst aus — hier wird nichts ergänzt, was dort nicht steht. */
.angebote-frist{
  display:inline-flex; align-items:center; gap:.55em; max-width:100%;
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  padding:.5em 1.1em;
  border-radius:var(--r-rund);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(203,176,130,.35);
  box-shadow:0 6px 20px rgba(19,55,109,.06);
  font-size:.86rem; font-weight:750; color:var(--blau);
}
.angebote-frist::before{ content:"◆"; font-size:.6em; color:var(--gold-tief) }

/* ── Einleitung vor der ersten Überschrift ──────────────────── */
.angebote-vorspann{ padding:clamp(1.4rem,3vw,2.2rem) 0 0 }
.angebote-einleitung{
  max-width:66ch;
  font-size:clamp(1rem,1.1vw,1.1rem);
  color:var(--text-leise);
  overflow-wrap:break-word;
}
.angebote-einleitung > :last-child{ margin-bottom:0 }
.angebote-einleitung strong{ color:var(--text) }
.angebote-einleitung a{ color:var(--blau); text-underline-offset:.18em; overflow-wrap:anywhere }
.angebote-einleitung img{ max-width:100%; height:auto; display:block; border-radius:var(--r-m); margin:1.2rem 0 }

/* ── Ein Angebot, eine Kachel ───────────────────────────────── */
.angebote-liste{ padding:clamp(1.8rem,4vw,3.2rem) 0 }
.angebote-raster{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  align-items:stretch;
}
@media (min-width:900px){
  .angebote-raster{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* Bleibt eine Kachel allein in der letzten Reihe, nimmt sie die ganze Breite. */
  .angebote-raster > .angebot:last-child:nth-child(odd){ grid-column:1 / -1 }
}

.angebot{
  display:flex; flex-direction:column; width:100%; min-width:0;
  gap:clamp(.7rem,1.3vw,1rem);
  padding:clamp(1.25rem,2.6vw,2.1rem);
  border-radius:var(--r-l);
  transition:transform .5s var(--weich), box-shadow .5s var(--weich), border-color .5s var(--weich);
}
/* Anheben und ein wärmerer Glasschimmer — beides über transform und
   box-shadow, nie über filter: sonst wird der Text beim Zeigen unruhig. */
.angebot:hover,
.angebot:focus-within{
  transform:translateY(-6px);
  border-color:rgba(203,176,130,.5);
  box-shadow:
    0 26px 54px rgba(19,55,109,.12),
    0 4px 14px rgba(19,55,109,.06),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 70px rgba(203,176,130,.22);
}
.angebot-titel{
  font-size:clamp(1.3rem,2.2vw,1.72rem);
  line-height:1.16;
  color:var(--blau);
  overflow-wrap:break-word;
  hyphens:auto;
}
.angebot-text{ min-width:0; overflow-wrap:break-word; hyphens:auto }
.angebot-text > :last-child{ margin-bottom:0 }
.angebot-text p{ margin:0 0 .9em }
.angebot-text h3{ margin:1.2rem 0 .4rem; font-size:1.02rem; color:var(--gold-tief) }
.angebot-text h3:first-child{ margin-top:0 }
.angebot-text ul{ list-style:none; margin:0 0 1em; padding-left:0 }
.angebot-text ul li{ position:relative; padding-left:1.4em; margin-bottom:.35em }
.angebot-text ul li::before{
  content:"◆"; position:absolute; left:0; top:.1em;
  font-size:.62em; color:var(--gold-tief);
}
.angebot-text ol{ margin:0 0 1em; padding-left:1.25em }
.angebot-text ol li{ margin-bottom:.35em }
.angebot-text a{ color:var(--blau); text-underline-offset:.18em; overflow-wrap:anywhere }
.angebot-text strong{ color:var(--blau) }
.angebot-text img{
  max-width:100%; height:auto; display:block;
  border-radius:var(--r-m); margin:1.1rem 0;
  box-shadow:0 10px 30px rgba(19,55,109,.08);
}
/* Eine breite Tabelle im Text darf die Seite nicht seitlich aufziehen. */
.angebot-text table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse }

.angebot-knopfreihe{ margin:auto 0 0; padding-top:.4rem }
.angebot .knopf .pfeil{ transition:transform .3s var(--weich) }
.angebot:hover .knopf .pfeil,
.angebot:focus-within .knopf .pfeil{ transform:translateX(4px) }

/* ── Ruhiger Streifen zu den Filialen ───────────────────────── */
.angebote-hinweis{ padding:0 0 clamp(2rem,4vw,3.2rem) }
.angebote-streifen{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(.8rem,1.8vw,1.5rem);
  padding:clamp(1.1rem,2.4vw,1.8rem) clamp(1.1rem,2.6vw,2rem);
  border-radius:var(--r-l);
  background:linear-gradient(145deg,#FFFDFA,var(--creme) 52%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.3);
  box-shadow:0 10px 34px rgba(19,55,109,.06);
}
.angebote-streifen-wort{ flex:1 1 15rem; min-width:0 }
.angebote-streifen-wort .marke{ margin-bottom:.3rem }
.angebote-streifen-wort p{ margin:0; font-size:.93rem }
.angebote-streifen .chips{ flex:1 1 100% }
/* Die Chips sind Wege zu den Filialseiten, keine Schalter. */
.angebote-streifen .chip{ text-decoration:none; color:var(--text) }
.angebote-streifen .chip:hover{ border-color:var(--gold); background:var(--weiss) }
.angebote-streifen > .knopf{ flex:none }

/* ── Signet ─────────────────────────────────────────────────── */
.angebote-signet{ padding-bottom:clamp(1.8rem,4vw,3rem) }
.angebote-signet .signet{ margin-inline:auto }
/* .einblenden.auf setzt die Deckkraft auf 1 und hebt damit die .55 aus bau.css auf —
   hier zurückgeholt, damit das Zeichen dezent bleibt. */
.angebote-signet .signet.auf{ opacity:.55 }

/* ── Schmale Geräte ab 375px ────────────────────────────────── */
@media (max-width:420px){
  .angebote-buehne{ padding-top:clamp(5.4rem,21vw,6.8rem) }
  .angebote-frist{ font-size:.8rem; padding:.45em .95em }
  .angebot{ padding:1.15rem }
  .angebot .knopf{ width:100% }
}

/* ── Unter „weniger Bewegung" steht alles still ─────────────── */
@media (prefers-reduced-motion:reduce){
  .angebot:hover,
  .angebot:focus-within{ transform:none }
  .angebot .knopf:hover,
  .angebote-streifen .chip:hover,
  .angebote-streifen .knopf:hover{ transform:none }
  .angebot .knopf .pfeil,
  .angebot:hover .knopf .pfeil,
  .angebot:focus-within .knopf .pfeil{ transform:none }
}
/* === ende angebote === */

/* === standard === */
/* Die Auffangvorlage: Kopfzeile, Textspalte, Stellen- und Filialkacheln.
   Heller Grund durchgehend, Blau und Gold nur als Akzent.

   Drei Ruecknahmen stehen am Anfang. Sie sind noetig, weil grund.css die
   Klassen .einblenden und .blatt aus der Startseite mitbringt und dort etwas
   anderes meint als bau.css. Beide Dateien gelten gleichzeitig, bau.css
   ueberschreibt nur die Eigenschaften, die es selbst nennt — der Rest bleibt
   stehen. Zurueckgenommen wird ausschliesslich innerhalb von .std. */

/* 1. .einblenden ist hier die Einblendung aus bau.css (wirkung.js setzt .auf),
      nicht das Laufband der Startseite. Dessen Flaechen-Eigenschaften
      wuerden jeden eingeblendeten Block in eine endlos wandernde Zeile
      verwandeln. */
.std .einblenden{ display:block; width:auto; gap:normal; animation:none }

/* 2. .blatt ist hier die Textspalte, nicht der Seitenvorhang der Startseite.
      Dessen blur/opacity loest sich nur ueber body.offen — das setzt
      eroeffnung.js, und das laeuft nur auf der Startseite.
      Gemessen am 03.10.2026: opacity und transform regelt bereits .einblenden aus
      bau.css, das nach grund.css greift. Sie hier noch einmal festzunageln
      haette die Einblendung ausgeschaltet — darum nur fuer den Fall, dass
      die Spalte einmal ohne .einblenden steht. */
.std .std-text{
  max-width:70ch; background:none; box-shadow:none; border-radius:0;
  filter:none; overflow-wrap:break-word;
}
.std .std-text:not(.einblenden){ opacity:1; transform:none }

/* 3. .kopfzeile ist hier die ganze Kopfflaeche der Seite, nicht der 62ch
      breite Abschnittskopf der Startseite. */
.std .kopfzeile{
  max-width:none; margin-bottom:0;
  border-bottom:1px solid rgba(203,176,130,.3);
}

/* ── Grundflaeche ───────────────────────────────────────────── */
.std{ background:var(--grund) }
.std .krume a{ text-decoration:none; border-bottom:1px solid rgba(19,55,109,.25) }
.std .krume a:hover{ color:var(--blau) }

/* ── Textspalte ─────────────────────────────────────────────── */
.std-rumpf{ padding-block:clamp(2.2rem,4.5vw,3.4rem) clamp(2.6rem,5.5vw,4.4rem) }
.std .std-text > :first-child{ margin-top:0 }
.std .std-text :is(h2,h3,h4,h5,h6){
  overflow-wrap:break-word; hyphens:auto;
  scroll-margin-top:clamp(96px,12vh,134px);
}
/* grund.css gibt h2 Buehnengroesse — im Fliesstext waere das eine Schlagzeile. */
.std .std-text h2{
  font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.22;
  letter-spacing:-.015em; color:var(--blau);
}
.std .std-text h3{
  font-size:clamp(1.06rem,1.5vw,1.26rem); line-height:1.35; color:var(--text);
}
.std .std-text :is(h4,h5,h6){
  font-size:1rem; line-height:1.4; color:var(--text-leise);
  margin:1.6em 0 .35em; letter-spacing:0;
}
.std .std-text :is(img,iframe,video){ max-width:100%; height:auto }
.std .std-text figure{ margin:1.7rem 0 }
.std .std-text figcaption{
  font-size:.84rem; color:var(--text-leise); margin-top:.5rem; line-height:1.5;
}
.std .std-text blockquote{
  margin:1.7rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--gold); color:var(--text-leise);
}
/* Eine breite Tabelle darf die Seite nicht schieben — sie scrollt fuer sich. */
.std .std-text table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto }
.std .std-text :is(th,td){ padding:.5em .7em; border-bottom:1px solid var(--linie); text-align:left }

/* ── Stellenangebote, nach Filiale ──────────────────────────── */
.std-gruppe + .std-gruppe{ margin-top:clamp(2.2rem,5vw,3.4rem) }
.std .std-gruppe-titel{
  font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.25; letter-spacing:-.015em;
  color:var(--blau); margin:0 0 1.1rem; padding-bottom:.55rem;
  border-bottom:1px solid rgba(203,176,130,.45);
}

/* ── Kachel als Verweis (Stellen und Fusswege) ──────────────── */
/* Gemessen am 03.10.2026: .bahn traegt aus grund.css und bau.css zwei
   Innenabstaende uebereinander. Bei 727 px Fensterbreite bleiben darum nur
   654 px Inhalt — zwei Kacheln zu je 330 px passen um sechs Pixel nicht mehr
   nebeneinander, und die Liste faellt auf eine Spalte zurueck. 300 px loesen
   das, ohne auf dem Telefon etwas zu aendern. */
.std .kacheln{ grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)) }
.std .std-kachel{
  display:flex; flex-direction:column; gap:.5rem; height:100%;
  text-decoration:none; color:inherit;
}
.std .std-kachel h3{ line-height:1.25; overflow-wrap:break-word }
.std .std-rolle{
  font-size:.88rem; font-weight:750; color:var(--gold-tief); margin:0;
}
.std .std-pfeil{
  margin-top:auto; padding-top:.5rem; display:flex; align-items:center; gap:.4em;
  font-size:.89rem; font-weight:800; color:var(--blau);
}
.std .std-pfeil i{ font-style:normal; transition:transform .3s var(--weich) }
.std .std-kachel:hover .std-pfeil i{ transform:translateX(5px) }

/* ── Filialkacheln ──────────────────────────────────────────── */
/* Die Anschrift kommt als Zeilenliste ohne <br> — der Umbruch steht im Text. */
.std .std-ort .ort{ white-space:pre-line; display:block }
.std .std-zeiten{
  display:block; margin-top:.85rem; font-size:.82rem; line-height:1.5;
  color:var(--text-leise);
}
.std .std-zeiten b{
  display:block; margin-bottom:.25rem; font-size:.64rem; font-weight:850;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-tief);
}
.std .std-zeiten i{ display:block; font-style:normal }
/* grund.css bewegt den Pfeil ueber ein <span>; hier traegt ihn ein <i>. */
.std .std-ort .pfeil i{ font-style:normal; transition:transform .3s var(--weich) }
.std .std-ort:hover .pfeil i{ transform:translateX(5px) }

/* ── Drei Verweise am Fuss ──────────────────────────────────── */
.std .std-wege{ padding-top:0 }
.std .std-wege > .bahn{
  padding-top:clamp(2.4rem,5vw,3.6rem);
  border-top:1px solid rgba(203,176,130,.45);
}

/* ── Erkennungszeichen ──────────────────────────────────────── */
.std-signet{ padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2.4rem,5vw,3.6rem); text-align:center }
.std-signet .signet{ margin-inline:auto }

/* ── Schmale Geraete: ab 375 px ohne Querscrollen lesbar ────── */
@media (max-width:560px){
  .std .std-text{ max-width:none }
  .std .std-text h2{ font-size:1.3rem }
  .std .std-gruppe-titel{ font-size:1.18rem }
  .std .std-text :is(pre,code){ white-space:pre-wrap; overflow-wrap:anywhere }
  .std .std-text a{ overflow-wrap:anywhere }
}

@media (prefers-reduced-motion:reduce){
  .std .std-pfeil i,
  .std .std-ort .pfeil i{ transition:none; transform:none }
  .std .std-kachel:hover .std-pfeil i,
  .std .std-ort:hover .pfeil i{ transform:none }
}
/* === ende standard === */

/* === termin-kacheln === */
/* Die Auswahl benutzt dasselbe Kacheldesign wie die Filialübersicht der
   Startseite (.filiale aus grund.css): runde Ecken, Glasfläche, Anheben beim
   Zeigen, wandernder Pfeil. Hier kommen nur das runde Vorschaubild, das
   Kalenderzeichen und das gestaffelte Einblenden dazu. */

.termin-wahl.filialen{ grid-template-columns:repeat(auto-fill,minmax(min(100%,312px),1fr)) }

.termin-kachel{ display:flex; flex-direction:column; padding:clamp(1.15rem,1.9vw,1.6rem) }

.termin-kopfreihe{ display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin-bottom:1rem }

/* Vorschaubild rund, wie er es wollte — kein Viereck. */
.termin-rund{ width:72px; height:72px; flex:none; border-radius:50%; overflow:hidden;
  background:var(--sand); display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 8px 22px rgba(19,55,109,.14);
  transition:transform .5s var(--weich), box-shadow .5s var(--weich) }
.termin-rund img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--weich) }
.termin-kachel:hover .termin-rund{ transform:scale(1.06); box-shadow:0 14px 30px rgba(19,55,109,.2) }
.termin-kachel:hover .termin-rund img{ transform:scale(1.1) }
.termin-initial{ font-size:1.7rem; font-weight:900; color:var(--gold-tief); line-height:1 }

/* Kalenderzeichen, gezeichnet statt geladen */
.termin-symbol{ width:30px; height:30px; flex:none; color:var(--gold);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  opacity:.75; transition:color .4s, opacity .4s, transform .5s var(--weich) }
.termin-symbol .voll{ fill:currentColor; stroke:none }
.termin-kachel:hover .termin-symbol{ color:var(--blau); opacity:1; transform:rotate(-6deg) scale(1.08) }

.termin-kachel h3{ font-size:1.22rem; margin:0 0 .3rem; color:var(--blau) }
.termin-kachel .ort{ font-size:.86rem; color:var(--text-leise); line-height:1.55 }

.termin-zeiten{ display:flex; flex-direction:column; gap:.14rem; margin-top:.75rem;
  font-size:.83rem; color:var(--text-leise) }
.termin-zeiten span{ display:block }

.termin-kachel .pfeil{ margin-top:auto; padding-top:1rem }

/* Gestaffeltes Einblenden: jede Kachel kommt ein Stück später. */
.termin-kachel.einblenden{ transition-delay:var(--verzug,0ms) }
@media (prefers-reduced-motion:reduce){
  .termin-kachel.einblenden{ transition-delay:0ms }
  .termin-rund, .termin-rund img, .termin-symbol{ transition:none }
}
/* === ende termin-kacheln === */

/* Öffnungszeiten in der Kachel dürfen nicht abgeschnitten werden. */
.termin-zeiten span{ overflow-wrap:anywhere; hyphens:auto }
.termin-zeiten{ font-size:.8rem; line-height:1.45 }
.termin-kachel .ort{ overflow-wrap:anywhere }

/* === sammelseite === */
/* Augenoptik und Hörakustik laufen als eine lange Seite durch: die zugehörigen
   Themen hängen untereinander, jedes mit eigener Sprungmarke. Oben eine Reihe
   Chips, damit man springen kann, ohne zu scrollen. */

.sammel-wege{ display:flex; flex-wrap:wrap; gap:.5rem;
  padding-block:clamp(1.4rem,3vw,2.4rem) }
.sammel-wege .chip{ text-decoration:none; cursor:pointer;
  transition:background .3s, color .3s, transform .3s var(--weich), border-color .3s }
.sammel-wege .chip:hover{ background:var(--blau); color:#fff;
  border-color:var(--blau); transform:translateY(-2px) }

.sammel-teil{ padding-block:clamp(2.4rem,5vw,4.2rem); position:relative }
.sammel-teil + .sammel-teil{ border-top:1px solid var(--linie) }
.sammel-teil:nth-of-type(even){ background:
  linear-gradient(180deg, transparent, var(--creme) 22%, var(--creme) 78%, transparent) }
/* Sprungmarke nicht unter die feste Kopfleiste laufen lassen */
.sammel-teil{ scroll-margin-top:96px }

.sammel-kopf{ margin-bottom:clamp(1.2rem,2.4vw,2rem) }
.sammel-kopf .marke{ display:inline-block; font-size:.7rem; font-weight:850;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-tief); margin-bottom:.5rem }
.sammel-kopf h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); color:var(--blau); line-height:1.08 }

.sammel-band + .sammel-band{ margin-top:clamp(1.4rem,2.6vw,2.2rem) }
.sammel-untertitel{ font-size:clamp(1.08rem,1.5vw,1.3rem); color:var(--text);
  margin:0 0 .5rem; font-weight:800 }
.sammel-text{ max-width:68ch }
.sammel-text img{ border-radius:var(--r-m); max-width:100%; height:auto;
  box-shadow:0 10px 30px rgba(19,55,109,.08) }
/* === ende sammelseite === */

/* === filialuebersicht === */
/* Christopher, 03.10.2026: Symbol rechts neben der großen Überschrift, und die
   Filialen „brauchen auch diese Kreise mit dem Bild". Die Kreise sind dieselben
   wie auf der Terminseite (.termin-rund) — ein Baustein, zwei Orte. */

.std-titelreihe{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap }
.std-titelreihe h1{ flex:1 1 14ch; min-width:0 }

.std-titelzeichen{ flex:none; width:clamp(74px,8vw,118px); height:clamp(74px,8vw,118px);
  display:grid; place-items:center }
.std-titelzeichen svg{ width:100%; height:100%; overflow:visible }
.std-titelzeichen .ring{ fill:none; stroke:var(--gold); stroke-width:1.1; opacity:.45;
  stroke-dasharray:4 7; transform-origin:50% 50%; animation:bv-ring 44s linear infinite }
.std-titelzeichen .marke-pfad{ fill:var(--blau-zart); stroke:var(--blau); stroke-width:2.2;
  stroke-linejoin:round }
.std-titelzeichen .loch{ fill:var(--gold) }
@keyframes bv-ring{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .std-titelzeichen .ring{ animation:none } }

/* Runde Vorschaubilder in den Kacheln der Übersicht */
.std-ort{ display:flex; flex-direction:column }
.std-rund{ margin-bottom:.9rem }
.std-ort .pfeil{ margin-top:auto; padding-top:1rem }
/* === ende filialuebersicht === */

/* === optical === */
.optical-kopf .leitsatz{ max-width:62ch }
.optical-raster{ grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(1rem,2vw,1.6rem) }
.optical-karte{ display:flex; flex-direction:column; gap:.7rem;
  padding:clamp(1.3rem,2.2vw,2rem); transition-delay:var(--verzug,0ms) }
.optical-kopfreihe{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.optical-nr{ font-size:1.5rem; font-weight:900; color:var(--gold); opacity:.4; line-height:1 }
.optical-karte h2{ font-size:clamp(1.25rem,1.8vw,1.55rem); color:var(--blau); margin:0 }
.optical-adresse{ font-style:normal; color:var(--text-leise); font-size:.92rem; line-height:1.6 }
.optical-zeiten{ display:flex; flex-direction:column; gap:.1rem; font-size:.88rem;
  color:var(--text-leise) }
.optical-zeiten b{ color:var(--text); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:.25rem }
.optical-kontakt{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto; padding-top:1rem }
/* === ende optical === */

/* === filialseite-feinschliff === */
/* Christopher, 03.10.2026: „Diese Überschrift muss ein bisschen kleiner sein."
   Gemessen waren 86,4 px auf der Filialseite — das ist Startseiten-Maß. */
.bv-typ-filiale .fil-buehne h1,
.bv-typ-geschlossen h1{ font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.06 }

/* „Dann muss der Abstand Text zum Rand haben." Gilt für die Abschiedsseite,
   deren Text sonst bis an die Kante der Kachel lief. */
.zu-blatt{ overflow:hidden; border-radius:var(--r-l) }
.zu-bild{ margin:0; line-height:0 }
.zu-bild img{ width:100%; height:auto; display:block;
  aspect-ratio:16/7; object-fit:cover }
.zu-text{ padding:clamp(1.6rem,4vw,3.4rem) }
.zu-text .marke{ display:inline-block; font-size:.7rem; font-weight:850;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-tief); margin-bottom:.8rem }
.zu-text h1{ margin:0 0 1rem; max-width:22ch }
.zu-text p{ max-width:66ch; line-height:1.75 }
.zu-signet{ margin-top:1.6rem }
/* === ende filialseite-feinschliff === */