/* ============================================================================
   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 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) }
}