/* ============================================================================
   standard — die Auffangvorlage: „Über uns" (/sehen-hoeren-leben/),
   „Wissenswertes", „Unsere Filialen", „Karriere" und jede weitere Seite
   ohne eigene Vorlage.

   Eigene Datei statt eines Blocks am Ende von seiten.css: vier Sitzungen
   arbeiten gleichzeitig am Theme, und am 03.10.2026 gingen beim Anhängen an
   dieselbe Datei zwei Blöcke verloren. functions.php bindet jede
   assets/css/teil-*.css automatisch nach seiten.css ein.

   Was hier NICHT noch einmal steht, weil es schon liegt und trägt:
     seiten.css  .std, .std-text (Typografie, Tabelle, Zitat), .std-kachel,
                 .std-gruppe-titel, .std-ort, .std-zeiten, .std-signet,
                 .std-titelreihe, .std-titelzeichen (Grundform + Ring)
     bau.css     .kopfzeile, .leitsatz, .krume, .einblenden, .signet
     grund.css   .bahn, .karte, .kacheln, .filiale, .filialen

   Heller Grund durchgehend, Blau und Gold nur als Akzent. Nur Token aus
   :root, kein !important, keine neue Schrift, keine CDN-Einbindung.
   ========================================================================= */

/* ── Die Felder: ein Feld je h2 ──────────────────────────────────────────
   grund.css gibt JEDEM <section> 7,4 vw Innenabstand — bei 1427 px sind das
   105,6 px oben und unten. Für eine Folge von Feldern ist das zu viel; der
   Takt wird hier selbst gesetzt. Die Felder wechseln sich im Hintergrund ab
   (weiß / --creme), damit eine lange Seite Gliederung bekommt. */
.std .std-feld{
  padding-block:clamp(2.4rem,5vw,4.2rem);
  border-bottom:1px solid rgba(203,176,130,.22);
}
.std .std-feld-weiss{ background:var(--weiss) }
.std .std-feld-creme{ background:var(--creme) }
/* Der Vorspann steht direkt unter der Kopfzeile und braucht oben weniger Luft. */
.std .std-feld-vorspann{ padding-top:clamp(1.6rem,3.4vw,2.6rem) }

/* ── Gitter: Nummer in der linken Spalte, Text in der rechten ───────────── */
.std-gitter{ display:grid; gap:clamp(.5rem,1.4vw,.9rem) }
.std-gitter > *{ min-width:0 }

@media (min-width:1000px){
  .std-gitter{
    grid-template-columns:clamp(5rem,7vw,7.5rem) minmax(0,1fr);
    gap:clamp(1.4rem,3vw,2.8rem);
    align-items:start;
  }
  /* Auch ein Feld ohne Nummer (der Vorspann) beginnt an derselben Kante —
     sonst springt die Textspalte zwischen den Feldern hin und her. */
  .std-gitter > .std-inhalt{ grid-column:2 }
}

/* ── Die laufende Nummer, in Gold ─────────────────────────────────────────
   `.std .einblenden` in seiten.css setzt display:block, width:auto und
   gap:normal — das ist die Rücknahme des Laufbands aus der Startseite und
   wiegt (0,2,0) schwerer als ein `.std-marke` allein (0,1,0). Gemessen am
   03.10.2026 in der Probe: die Marke stand unter 1000 px als block da,
   obwohl hier flex steht. Darum trägt jede Regel an einem Kasten, der
   zugleich `.einblenden` ist, das `.std` davor. */
.std .std-marke{ display:flex; align-items:baseline; gap:.6rem }
.std .std-nr{
  font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:850; line-height:1;
  letter-spacing:-.03em; color:var(--gold-tief);
  font-variant-numeric:tabular-nums;
}
@media (min-width:1000px){
  .std .std-marke{ display:block; padding-top:.42rem }
  .std .std-nr{ display:block }
  /* Ein auslaufender Goldstrich unter der Zahl — Akzent, keine Fläche. */
  .std .std-nr::after{
    content:""; display:block; width:2.4rem; height:2px; margin-top:.6rem;
    background:linear-gradient(90deg,var(--gold),rgba(203,176,130,0));
  }
}

/* ── Die Abschnittsüberschrift ──────────────────────────────────────────
   grund.css gibt h2 Bühnengröße (bis 3,6 rem) — das ist eine Schlagzeile,
   kein Abschnittskopf. */
.std .std-titel{
  font-size:clamp(1.45rem,2.7vw,2.2rem); line-height:1.16; letter-spacing:-.02em;
  color:var(--blau); margin:0 0 clamp(.85rem,1.8vw,1.25rem); max-width:30ch;
  overflow-wrap:break-word; hyphens:auto;
  scroll-margin-top:clamp(96px,12vh,134px);
}

/* ── Die Textspalte ─────────────────────────────────────────────────────
   seiten.css deckelt .std-text auf 70ch. Hier trägt derselbe Kasten beides:
   der Fließtext bleibt bei 68 Zeichen, ein Kachelraster, eine Bildreihe oder
   ein Rundgang dürfen breiter werden. Darum der Deckel am KIND, nicht am
   Kasten. */
.std .std-feld .std-koerper{ max-width:none }
.std .std-koerper > *{ max-width:68ch }
.std .std-koerper{ font-size:clamp(1rem,.3vw + .95rem,1.07rem) }
.std .std-koerper p{ line-height:1.78; margin:0 0 1.15em }
.std .std-koerper :is(ul,ol){ line-height:1.78; margin:0 0 1.3em }
.std .std-koerper li{ margin:.35em 0 }
.std .std-koerper > :first-child{ margin-top:0 }
.std .std-koerper > :last-child{ margin-bottom:0 }
.std .std-koerper a{ color:var(--blau-hell); text-underline-offset:.22em }

/* Zwischenüberschriften (h3 und tiefer) bleiben im Feld ihrer h2. */
.std .std-koerper .std-unter{
  margin:2.1em 0 .5em; line-height:1.3; color:var(--blau);
  font-size:clamp(1.08rem,1.6vw,1.3rem); letter-spacing:-.01em;
}
.std .std-koerper .std-unter:first-child{ margin-top:0 }

/* ── Bilder im Text: runde Ecken, weicher Schatten ──────────────────────── */
.std .std-koerper img{
  display:block; height:auto;
  border-radius:var(--r-m);
  box-shadow:0 14px 38px rgba(19,55,109,.12);
}
.std .std-koerper figure{ margin:1.9rem 0 }
.std .std-koerper figure a{ display:block; border-radius:var(--r-m) }
.std .std-koerper figcaption{
  font-size:.84rem; line-height:1.55; color:var(--text-leise); margin-top:.6rem;
}

/* ── Bildreihe ──────────────────────────────────────────────────────────
   Gemessen am 03.10.2026 auf der laufenden Seite /sehen-hoeren-leben/: der
   Vorspann trägt acht <figure class="gallery-item"> unmittelbar hintereinander,
   ohne umschließenden Kasten. Untereinander gestapelt sind das acht
   Bildschirmhöhen vor dem ersten Satz. Die Vorlage fasst eine solche Folge in
   .std-galerie; hier wird sie zur Reihe.
   Die Vorschaubilder sind im Original 150 x 150 px — die Zellen bleiben
   deshalb klein, ein größeres Raster würde sie nur weichzeichnen. */
.std .std-koerper .std-galerie{
  max-width:min(100%,900px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
  gap:clamp(.6rem,1.3vw,1rem);
  margin:1.9rem 0;
}
.std .std-galerie figure{ margin:0; display:flex; flex-direction:column; gap:.5rem; min-width:0 }
.std .std-galerie a{ display:block; border-radius:var(--r-s); overflow:hidden; line-height:0 }
.std .std-galerie img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-s);
  box-shadow:0 6px 18px rgba(19,55,109,.10);
  transition:transform .45s var(--weich);
}
.std .std-galerie a:hover img{ transform:scale(1.06) }
.std .std-galerie figcaption{ font-size:.76rem; line-height:1.45; margin-top:0 }

/* ── Aufzählung als Kachelraster ────────────────────────────────────────
   Drei oder mehr kurze Punkte werden zu Kacheln; alles andere bleibt eine
   Liste (die Entscheidung trifft bv_std_kacheln() in der Vorlage). */
.std .std-koerper .std-punkte{
  max-width:min(100%,1040px);
  list-style:none; margin:1.8rem 0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  gap:clamp(.7rem,1.4vw,1rem);
}
.std .std-punkt{
  margin:0; min-width:0;
  display:flex; align-items:flex-start; gap:.75rem;
  padding:clamp(.95rem,1.8vw,1.25rem);
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--r-m);
  box-shadow:var(--glas-schatten);
  line-height:1.6;
  transition:transform .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich);
}
/* Auf weißem Feld hebt sich Weiß nicht ab — dort trägt die Kachel den Grundton. */
.std .std-feld-weiss .std-punkt{ background:var(--grund) }
.std .std-punkt:hover{
  transform:translateY(-3px); border-color:var(--gold);
  box-shadow:0 16px 36px rgba(19,55,109,.10);
}
/* Trägt jeder Punkt ein Stichwort (auf „Über uns" die Jahreszahl), steht es
   als Kopf über dem Satz statt einer Marke davor. */
.std .std-punkte-kopf .std-punkt{ flex-direction:column; gap:.4rem }
.std .std-punkt-kopf{
  font-size:.98rem; font-weight:850; letter-spacing:.01em; color:var(--gold-tief);
  font-variant-numeric:tabular-nums;
}
.std .std-punkt-marke{
  width:.6rem; height:.6rem; flex:none; margin-top:.52rem;
  background:var(--gold); border-radius:2px; transform:rotate(45deg);
}
.std .std-punkt-text{ min-width:0; overflow-wrap:break-word }

/* ── Rundgang und andere eingebettete Flächen ───────────────────────────
   wp_kses_post() würde ein <iframe> ersatzlos löschen; die Vorlage erlaubt es
   über bv_std_sicher() gezielt. Hier bekommt es eine Höhe, die auch ohne
   height-Attribut trägt. */
.std .std-koerper iframe{
  display:block; width:100%; max-width:min(100%,1040px);
  min-height:min(70vh,540px); border:0;
  border-radius:var(--r-m);
  box-shadow:0 16px 44px rgba(19,55,109,.12);
  background:var(--creme-2);
  margin:1.9rem 0;
}

/* ── Das Symbol neben dem Seitentitel ───────────────────────────────────
   Grundform, Größe und der laufende Goldring stehen in seiten.css
   (.std-titelzeichen). Hier kommen nur die Teile dazu, die die neuen Motive
   brauchen: Auge, Buch, Stufen, Raute. */
.std-titelzeichen .zeichen-flaeche{
  fill:var(--blau-zart); stroke:var(--blau); stroke-width:2.2;
  stroke-linejoin:round; stroke-linecap:round;
}
.std-titelzeichen .zeichen-kern{ fill:var(--gold) }
.std-titelzeichen .zeichen-zug{
  fill:none; stroke:var(--gold-tief); stroke-width:2.2; stroke-linecap:round;
}

/* ── Schmale Geräte: ab 375 px lesbar, ohne Querscrollen ────────────────── */
@media (max-width:620px){
  .std .std-koerper > *{ max-width:none }
  .std .std-titel{ font-size:1.42rem; max-width:none }
  .std .std-koerper .std-galerie{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,118px),1fr));
  }
  .std .std-koerper iframe{ min-height:min(58vh,380px) }
  .std .std-koerper a{ overflow-wrap:anywhere }
}

@media (prefers-reduced-motion:reduce){
  .std .std-punkt,
  .std .std-galerie img{ transition:none }
  .std .std-punkt:hover{ transform:none }
  .std .std-galerie a:hover img{ transform:none }
}