/* ============================================================================
   teil-filiale.css — Filialseite (9 Stück).
   Hier steht, was Christopher am 03.10.2026 an /unsere-filialen/wiesbaden/
   bemängelt hat: „der restliche Verlauf der Seite schaut auch nicht gut aus …
   Einfach unten der Text hingeklatscht, links nichts fertig." Und zur
   Termin-Kachel: „Die schaut sehr traurig und sehr leer aus."

   Also: alles UNTER den drei Kacheln, die Termin-Kachel, das Bühnenbild und
   die Liste „Weitere Filialen".

   Diese Datei wird von functions.php automatisch eingebunden (assets/css/
   teil-*.css, nach seiten.css). Sie ergänzt den dortigen Block „filiale" —
   über Reihenfolge und Spezifität, nicht über Vorrangmarken.

   Nur die Token aus :root (grund.css). Keine neue Farbe, keine neue Schrift,
   keine CDN-Einbindung. Die Schattenwerte sind dieselben Blautöne, die
   grund.css und seiten.css schon benutzen.
   ========================================================================= */


/* ── Bühnenbild ──────────────────────────────────────────────────────────
   Gemessen 03.10.2026: in Wiesbaden hing …-1024x221.jpg, 221 px hoch und
   sichtbar unscharf. Die Vorlage liefert jetzt die volle Fassung mit srcset.
   Der Ausschnitt rutscht nach unten — oben steht bei einer Ladenzeile der
   Himmel, unten der Laden.
   ---------------------------------------------------------------------- */
/* Hochformat/Normalformat: der Ausschnitt rutscht nach unten. */
.fil-foto img{ object-position:50% 58% }

/* Panorama (ab 2,4:1, in der Vorlage am Bild gemessen): volles Band statt
   Seitenspalte. Bei object-fit:cover bestimmt die Höhe den Maßstab, sobald das
   Bild breiter ist als sein Rahmen — object-position schneidet dann oben nichts
   weg. Ein 4,63:1-Bild wie in Wiesbaden zeigt im hochformatigen Rahmen also
   halb Himmel oder nur sein mittleres Drittel. Im Band steht es in seinem
   eigenen Verhältnis: ganzer Laden, kein Beschnitt. */
.fil-buehne-raster.band{ grid-template-columns:minmax(0,1fr) }
.fil-buehne-raster.band .fil-buehne-text{ max-width:64ch }
.fil-buehne-raster.band .fil-foto{ aspect-ratio:auto; border-radius:var(--r-l) }
.fil-buehne-raster.band .fil-foto img{ height:auto; transform:none }
.fil-buehne-raster.band .fil-foto:hover img{ transform:scale(1.02) }

/* Die Bahn der Buehne fuellt ihre Breite. .buehne ist ein Raster (grund.css
   174), und .bahn traegt margin-inline:auto (grund.css 63) — in einem Raster
   macht das die Bahn so breit wie ihr Inhalt. Solange das Buehnenfoto laedt,
   ist das nur die Breite des Textes; kommt das Bild, springt das Band auf volle
   Breite und schiebt alles darunter nach unten. Gemessen 24.10.2026 an allen
   fuenf Filialseiten, Bild 1,2 s verzoegert: 1280 px vorher 559 px breit,
   danach 1147 px, CLS 0,13 bis 0,18 — trotz width/height am Bild. */
.fil-buehne > .bahn{ width:100% }
/* Ohne Buehnenbild („allein", max-width 62ch) stand der Text bisher mittig und so
   breit wie sein Inhalt, weil die schmale Bahn das vorgab. In der vollen Bahn
   haelt ihn das hier genau so (Gegenpruefung 24.10.2026: sonst 1280 px links
   360 → 65 px). */
.fil-buehne-raster.allein{ width:fit-content; margin-inline:auto }


/* ── Die Termin-Kachel ───────────────────────────────────────────────────
   Ein Satz, der Knopf auf den Kalender der Filiale, darunter das Telefon als
   zweiter Weg. Ohne Kalender bleibt der Knopf weg — kein Knopf ins Leere.
   ---------------------------------------------------------------------- */
.fil-termin-text{ margin:0; font-size:.95rem; line-height:1.68; color:var(--text-leise) }

.fil-termin-wahl{ display:flex; flex-direction:column; align-items:stretch;
  gap:.55rem; margin-top:auto; padding-top:.25rem }

/* seiten.css setzt .fil-termin .knopf auf align-self:flex-start und
   margin-top:auto. In der Knopfspalte gilt beides nicht mehr. */
.fil-termin .fil-termin-wahl .knopf{ align-self:stretch; margin-top:0 }

.fil-termin .fil-wirt{ display:block; color:var(--text-leise) }

.fil-termin-zweit{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .45em;
  margin:.15rem 0 0; font-size:.92rem }
.fil-termin-zweit a{ font-weight:800; color:var(--blau); text-decoration:none;
  overflow-wrap:anywhere; transition:color .25s }
.fil-termin-zweit a:hover{ color:var(--blau-hell); text-decoration:underline;
  text-underline-offset:.2em }


/* ── Alles unter den drei Kacheln ────────────────────────────────────────
   Abwechselnd ruhige Fläche und Glaskachel. Links die Überschrift, rechts
   eine Textspalte von höchstens 68 Zeichen. Das Paar steht mittig, damit
   rechts keine leere Hälfte stehen bleibt.
   ---------------------------------------------------------------------- */
.fil-folge-feld{ padding:clamp(2.6rem,5.5vw,5rem) 0 0 }
.fil-folge{ display:flex; flex-direction:column;
  gap:clamp(1.8rem,4vw,3.6rem);
  max-width:min(100%,1000px); margin-inline:auto }

/* grund.css Zeile 238 gibt JEDEM <section> padding:clamp(3.6rem,7.4vw,6.6rem) 0
   — gemessen 105,6 px oben und unten bei 1500 px Fensterbreite. Die Gruppen
   sind verschachtelte <section>; ihr Abstand kommt aus dem gap von .fil-folge,
   nicht aus geerbter Polsterung. Ohne diese Zeile stand zwischen zwei kurzen
   Abschnitten eine leere Fläche von 269 px (gemessen am Prüfmuster). */
.fil-gruppe{ padding:0 }

.fil-g-innen{ display:grid; justify-content:center;
  gap:clamp(.55rem,2.4vw,2.8rem);
  /* Christopher, 03.10.2026: „Links, Kompetenz, Qualitaet, das muss oben drueber
     stehen. So ist der Text zu lang, das ist nicht schoen." Die Ueberschrift stand
     in einer 20-Zeichen-Spalte und brach auf sieben Zeilen um. Jetzt steht sie
     ueber dem Text, ueber die volle Breite. */
  grid-template-columns:minmax(0,1fr) }

.fil-g-glas{ padding:clamp(1.4rem,3.2vw,2.8rem) }

/* Eine Gruppe mit Einbettung (360°-Rundgang) steht für sich, über die volle
   Breite der Spalte — ein 16:9-Fenster in einem 68-Zeichen-Kästchen wäre
   nicht zu gebrauchen. */
.fil-g-medien .fil-g-innen{ grid-template-columns:minmax(0,1fr) }
.fil-g-medien .fil-g-text{ max-width:none }
.fil-g-medien .fil-flies p,
.fil-g-medien .fil-flies li{ max-width:68ch }

.fil-g-kopf{ min-width:0 }
.fil-g-kopf::before{ content:""; display:block; width:38px; height:2px;
  border-radius:var(--r-rund); background:var(--gold); margin-bottom:.9rem }
.fil-g-titel{ margin:0; color:var(--blau); line-height:1.14; letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.1vw,1.9rem); overflow-wrap:break-word }

.fil-g-text{ min-width:0; max-width:68ch }
.fil-g-unter{ margin:2.2em 0 .45em; color:var(--blau); line-height:1.26;
  font-size:clamp(1.04rem,1.35vw,1.24rem); font-weight:800 }
.fil-g-text > :first-child{ margin-top:0 }


/* ── Fließtext ───────────────────────────────────────────────────────────
   Großzügige Zeilenhöhe, Bilder mit runden Ecken und weichem Schatten.
   ---------------------------------------------------------------------- */
.fil-flies{ font-size:clamp(1rem,1.05vw,1.08rem) }
.fil-flies p{ margin:0 0 1.15em; line-height:1.8 }
.fil-flies p:last-child{ margin-bottom:0 }
.fil-flies ul,.fil-flies ol{ margin:0 0 1.25em; padding-left:1.3em; line-height:1.8 }
.fil-flies li{ margin:.35em 0 }
.fil-flies li::marker{ color:var(--gold-tief) }
.fil-flies a{ color:var(--blau-hell); text-underline-offset:.22em }
.fil-flies strong,.fil-flies b{ color:var(--text) }
.fil-flies em,.fil-flies i{ color:inherit }
.fil-flies hr{ border:0; height:1px; background:var(--linie); margin:2rem 0 }

.fil-flies img{ display:block; max-width:100%; height:auto; margin:1.2rem 0;
  border-radius:var(--r-m); box-shadow:0 18px 40px rgba(19,55,109,.12) }
.fil-flies figure{ margin:1.7rem 0 }
.fil-flies figure img{ margin:0 }
.fil-flies figcaption{ margin-top:.6rem; font-size:.86rem; line-height:1.55;
  color:var(--text-leise) }

.fil-flies iframe,.fil-flies video{ display:block; width:100%; height:auto;
  aspect-ratio:16/9; border:0; border-radius:var(--r-l);
  box-shadow:0 18px 40px rgba(19,55,109,.12) }

.fil-flies blockquote{ margin:1.6rem 0; padding:.1rem 0 .1rem 1.2rem;
  border-left:2px solid var(--gold); color:var(--text-leise) }

.fil-flies table{ width:100%; border-collapse:collapse; font-size:.94rem }
.fil-flies th,.fil-flies td{ padding:.55em .6em; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--linie) }
.fil-flies th{ font-weight:800; color:var(--text) }


/* ── Weitere Filialen ────────────────────────────────────────────────────
   In seiner Reihenfolge (BV_UEBERSICHT), geschlossene zuletzt und ohne
   Termin-Hinweis. Die Karten tragen Ort und Telefon, damit die Liste etwas
   sagt und nicht nur verlinkt.
   ---------------------------------------------------------------------- */
.fil-weitere-feld{ padding-block:clamp(2.6rem,5.5vw,5rem) }
.fil-weitere .filialen{ grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) }
.fil-weitere .filiale{ display:flex; flex-direction:column; padding:1.15rem 1.25rem 1.2rem }
.fil-weitere .filiale h3{ margin:0; font-size:1.08rem }
.fil-weitere .filiale .ort{ display:block; margin-top:.3rem }
.fil-weitere .filiale .tel{ margin-top:.3rem }
.fil-weitere .filiale .pfeil{ margin-top:auto; padding-top:.95rem; font-size:.85rem }

.fil-rund{ width:62px; height:62px; flex:none; margin-bottom:.85rem;
  border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:var(--sand); 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) }
.fil-rund img{ width:100%; height:100%; object-fit:cover; display:block }
.fil-initial{ font-size:1.35rem; font-weight:900; line-height:1; color:var(--gold-tief) }
.fil-weitere .filiale:hover .fil-rund{ transform:scale(1.06);
  box-shadow:0 14px 30px rgba(19,55,109,.2) }

.fil-marke{ align-self:flex-start; margin-top:.8rem;
  padding:.32em .8em; border-radius:var(--r-rund);
  font-size:.68rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-tief); background:var(--gold-zart);
  border:1px solid rgba(203,176,130,.42) }

/* Geschlossene Filiale: ruhig, ohne Bild, ohne Termin. Die Seite bleibt
   erreichbar, die Kachel sagt ehrlich, woran man ist. */
.fil-marke.fil-zu{ color:var(--text-leise); background:var(--creme-2);
  border-color:var(--linie) }
.fil-karte-zu{ background:rgba(255,255,255,.5) }
.fil-karte-zu h3{ color:var(--text-leise) }


/* ── Breite ──────────────────────────────────────────────────────────── */
@media (min-width:901px){
  /* Die Überschrift bleibt stehen, solange ihr Abschnitt läuft. In der
     Glaskachel nicht: .glas trägt overflow:hidden, dort wirkt sticky nicht. */
  .fil-g-ruhig .fil-g-kopf{ position:sticky; top:clamp(100px,13vh,140px); align-self:start }
}

@media (max-width:700px){
  /* Auf dem Telefon wäre ein 4,6:1-Band ein 74 px hoher Streifen. Dort also
     doch ein Rahmen — beschnitten wird dann seitlich, der Laden bleibt mittig. */
  .fil-buehne-raster.band .fil-foto{ aspect-ratio:16/9 }
  .fil-buehne-raster.band .fil-foto img{ height:100%; object-fit:cover }
}

@media (max-width:900px){
  .fil-g-innen{ grid-template-columns:minmax(0,1fr); gap:.55rem }
  .fil-g-kopf::before{ margin-bottom:.7rem }
  .fil-g-text{ max-width:68ch }
}

@media (max-width:430px){
  .fil-folge{ gap:1.8rem }
  .fil-g-glas{ padding:1.15rem }
  .fil-termin .fil-termin-wahl .knopf{ font-size:.9rem; padding:.9em 1.05em }
  .fil-flies img{ margin:.9rem 0 }
  .fil-rund{ width:54px; height:54px }
  .fil-initial{ font-size:1.2rem }
}


/* ── Ruhe, wenn er sie eingestellt hat ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fil-rund{ transition:none }
  .fil-weitere .filiale:hover .fil-rund{ transform:none; box-shadow:0 8px 22px rgba(19,55,109,.14) }
}