/* ==========================================================================
   SCL Blocks — Tokens und Blockgestaltung
   Kein globaler Reset. Alle Regeln sind auf .scl- Klassen begrenzt.

   SPEZIFITÄTSKONVENTION — bitte für neue Blöcke einhalten:

   Astra greift die Blockinhalte über den Inhaltsbereich an, unter anderem mit
     .entry-content ul, .entry-content ol   { padding: revert; margin: revert }   (0,1,1)
     .entry-content p                       { margin-bottom: … }                  (0,1,1)
     .ast-single-post .entry-content a      { text-decoration: underline }        (0,2,1)
   Ein einfacher Klassenselektor wie ".scl-karte__titel" (0,1,0) verliert dagegen.
   Deshalb gilt:

     Wurzel des Blocks   ->  .scl-block.scl-<name>              (0,2,0)
     Teile im Block      ->  .scl-block .scl-<name>__<teil>     (0,2,0)
     Elemente im Block   ->  .scl-block .scl-<name> li          (0,2,1)
     Links im Block      ->  .scl-block.scl-<name> … a          (0,3,1)

   Links brauchen den doppelten Wurzelpräfix, weil Astras Link-Regel selbst
   schon bei (0,2,1) liegt und Gleichstand von der Ladereihenfolge abhinge.
   ========================================================================== */

/*
 * Rahmen und Innenabstand zählen zur Breite — begrenzt auf die eigenen Blöcke,
 * kein globaler Reset.
 *
 * Nötig für den Editor: Astra setzt border-box im Frontend über
 * `html { box-sizing: border-box }` und `*, ::after, ::before { inherit }`.
 * Dieses Stylesheet wird dort nicht geladen, im iframe des Editors gilt
 * deshalb content-box. Eine Karte mit 1,75rem Innenabstand und 1px Rahmen
 * wurde damit 58px breiter als die Spalte, in der sie steht, und ragte im
 * Spectra-Container sichtbar über den Rand. Im Frontend ändert die Regel
 * nichts, dort gilt border-box ohnehin.
 */
.scl-block,
.scl-block *,
.scl-block *::before,
.scl-block *::after {
  box-sizing: border-box;
}

:root {
  --scl-orange:      #E8521A;
  --scl-orange-dark: #c4431a;
  --scl-orange-soft: rgba(232, 82, 26, 0.08);
  /* Weicherer Ton für den kursiven Teil großer Überschriften. Nicht das
     Marken-Orange: dort trägt die Kursive die Auszeichnung schon, das kräftige
     #E8521A wirkt daneben zu laut. Der Wert ist der gewünschte helle Ton, um
     fünf Prozent abgedunkelt — so hält er 3,26:1 auf Weiß und 3,13:1 auf dem
     cremefarbenen Abschnittsgrund und bleibt damit über den 3:1, die für große
     Schrift gefordert sind. Der ursprüngliche Wunschton #ea7351 lag bei 2,97:1
     bzw. 2,85:1. Auf Navy erreicht dieser Ton 4,15:1. */
  --scl-orange-hell: #df6d4d;
  --scl-navy:        #14304a;
  --scl-blue:        #1C5077;
  --scl-ink:         #1a1a1a;
  --scl-text:        #3a3a3a;
  --scl-muted:       #6f6a62;
  --scl-sand:        #f0ece8;
  --scl-cream:       #fafafa;
  --scl-white:       #ffffff;
  --scl-line:        #e3ded7;
  --scl-line-strong: #cfc8bf;

  --scl-serif: 'Cormorant Garamond', Georgia, serif;
  --scl-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --scl-mono:  'DM Mono', ui-monospace, monospace;
}

/* Nur für Screenreader. Kein display:none — das würde den Text auch dort entfernen. */
.scl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset( 50% );
  white-space: nowrap;
  border: 0;
}

/* Eyebrow — in mehreren Blöcken verwendet */
.scl-block .scl-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--scl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--scl-orange);
  margin: 0 0 1rem;
}
.scl-block .scl-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--scl-orange);
  flex: none;
}

/* Sichtbarer Fokus für Tastaturbedienung */
.scl-block :focus-visible {
  outline: 3px solid var(--scl-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scl-block *,
  .scl-block *::before,
  .scl-block *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Abschnittskopf ---------- */
.scl-block.scl-abschnittskopf { max-width: 46rem; margin-bottom: 3rem; }
.scl-block .scl-abschnittskopf__titel {
  font-family: var(--scl-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  color: var(--scl-ink);
  margin: 0;
}
/* Kein font-weight: Die Kursive setzt den Teilsatz bereits ab, zusammen mit dem
   halbfetten Schnitt wurde es zu laut. Cormorant Garamond ist fein geschnitten
   — deshalb der abgedunkelte Ton statt des hellen Wunschwerts, siehe Token. */
.scl-block .scl-abschnittskopf__titel em {
  font-style: italic;
  color: var(--scl-orange-hell);
}
.scl-block .scl-abschnittskopf__lead {
  font-family: var(--scl-sans);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--scl-text);
  margin: 1rem 0 0;
}

/* Ebene 1 — der Seitentitel. Überschrieben werden nur die Schriftgrößen und die
   Kursive des Leads; Familie, Gewicht, Zeilenhöhe, Farbe und Abstände erbt
   Ebene 1 unverändert von den Regeln darüber. */
.scl-block.scl-abschnittskopf--ebene-1 .scl-abschnittskopf__titel {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
}
.scl-block.scl-abschnittskopf--ebene-1 .scl-abschnittskopf__lead {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-style: italic;
}

/* Fassung fuer dunklen Grund.
   Anders als die Kontaktkarte bringt der Abschnittskopf KEINEN eigenen Grund mit:
   er ist auf 46rem begrenzt und stuende sonst als Kasten in der dunklen Sektion.
   Gefaerbt wird der Grund vom umgebenden Spectra-Container, hier kippen nur die
   Schriftfarben. */
.scl-block.scl-abschnittskopf--dunkel .scl-abschnittskopf__titel { color: #fff; }

/* Der kursive Teilsatz braucht hier KEINE eigene Regel mehr: Seit die helle
   Fassung --scl-orange-hell setzt, gilt derselbe Ton auf dunklem Grund, und das
   ist die bessere Wahl — auf Navy erreicht er 4,15:1 gegenueber 3,64:1 des
   Marken-Orange, das hier vorher stand. Beide Fassungen zeichnen den Teilsatz
   damit gleich aus. Fuer den kleinen Eyebrow reicht keiner der beiden Toene,
   der wird deshalb unten eigens aufgehellt. */

/* Nicht reinweiss: Fliesstext in vollem Weiss auf dunklem Grund flimmert.
   Die Kontaktkarte haelt ihre Werte aus demselben Grund bei 0.95. */
.scl-block.scl-abschnittskopf--dunkel .scl-abschnittskopf__lead { color: rgba(255, 255, 255, 0.92); }

/* Eyebrow in kleiner Versalschrift: das Marken-Orange kaeme auf Navy nur auf
   3,2:1 und faellt damit unter die 4,5:1 fuer kleinen Text. Derselbe helle
   Orangeton wie in der dunklen Kontaktkarte. */
.scl-block.scl-abschnittskopf--dunkel .scl-eyebrow { color: #f3a183; }
.scl-block.scl-abschnittskopf--dunkel .scl-eyebrow::before { background: #f3a183; }

/* Nur im Editor: steht der Block dort noch nicht in einem eingefaerbten
   Container, schriebe er weiss auf weissen Canvas. Die Klasse setzt allein
   edit.js — render.php gibt sie nie aus.
   BEWUSST nur der Grund, kein Padding: im Regelfall liegt der Block in einer
   dunklen Gruppe, und ein Innenabstand nur im Editor wuerde die Vorschau
   gegenueber dem Frontend verschieben. */
.scl-block.scl-abschnittskopf--dunkel-vorschau { background: var(--scl-navy); }

/* ---------- Karte ---------- */
/* Bewusst OHNE height. Eine feste height uebernaehme die Hoehe des Containers,
   worauf laengerer Inhalt herauslaeuft und den naechsten Block verdeckt. Die
   gleiche Hoehe nebeneinanderstehender Karten regelt stattdessen der Flexfluss,
   siehe „Karten einer Reihe" weiter unten. */
.scl-block.scl-karte {
  border: 1px solid var(--scl-line);
  padding: 2rem 1.75rem;
  font-family: var(--scl-sans);
}
.scl-block.scl-karte--grund-weiss { background: var(--scl-white); }
.scl-block.scl-karte--grund-creme { background: var(--scl-cream); }
.scl-block.scl-karte--akzent-oben { border-top: 3px solid var(--scl-orange); }
.scl-block.scl-karte--akzent-gestrichelt {
  border-style: dashed;
  border-color: var(--scl-line-strong);
  background: transparent;
}
.scl-block .scl-karte__kennzahl {
  font-family: var(--scl-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  color: var(--scl-orange);
  margin: 0 0 0.55rem;
}
.scl-block .scl-karte__kennzahl-zusatz {
  display: block;
  font-family: var(--scl-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--scl-muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}
.scl-block .scl-karte__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--scl-orange);
  margin: 0 0 1rem;
}
.scl-block .scl-karte__titel {
  font-family: var(--scl-serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--scl-ink);
  margin: 0 0 0.6rem;
}
.scl-block .scl-karte__text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--scl-text);
  margin: 0;
}
.scl-block .scl-karte__punkte { list-style: none; margin: 1rem 0 0; padding: 0; }
.scl-block .scl-karte__punkte li {
  padding: 0.68rem 0 0.68rem 1.4rem;
  border-bottom: 1px solid var(--scl-line);
  position: relative;
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}
.scl-block .scl-karte__punkte li:last-child { border-bottom: none; }
.scl-block .scl-karte__punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.22rem;
  width: 7px;
  height: 1px;
  background: var(--scl-orange);
}
.scl-block .scl-karte__punkt-zusatz {
  display: block;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.scl-block .scl-karte__link { margin: 1rem 0 0; }
.scl-block.scl-karte .scl-karte__link a {
  color: var(--scl-orange-dark);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--scl-line-strong);
}
.scl-block.scl-karte .scl-karte__link a:hover { border-color: var(--scl-orange); }

/* ---------- Karten einer Reihe: gleiche Hoehe ----------
   Ein Kartenraster wird in Spectra zweistufig gebaut: ein aeusserer Container
   in Zeilenrichtung, darin je Spalte ein eigener Container, darin die Karte.
   Damit alle Karten gleich hoch enden, muessen beide Stufen mitspielen — und
   genau daran scheitert es in der Oberflaeche:

   1. Der aeussere Container steht oft auf align-items: flex-start. Dann sind
      schon die Spalten verschieden hoch. (In der Oberflaeche: Layout ->
      Elemente ausrichten -> Dehnen.)
   2. Die Spalte selbst steht meist auf align-items: center und
      justify-content: center. Dann sitzt die Karte mittig in ihrer Spalte,
      statt sie zu fuellen — dafuer gibt es in der Oberflaeche gar keinen
      Schalter, das geht nur ueber CSS.

   Beide Regeln greifen bewusst nur, wenn die Spalte GENAU EINE Karte traegt.
   Stehen mehrere Karten untereinander in derselben Spalte, bleibt es beim
   Inhaltsfluss — sonst zoege der freie Platz sie auseinander. */
.wp-block-uagb-container:has( > .wp-block-uagb-container > .scl-karte:only-child ),
.wp-block-uagb-container:has( > .wp-block-uagb-container > .scl-kontaktkarte:only-child ) {
  align-items: stretch;
}
.wp-block-uagb-container > .scl-karte:only-child,
.wp-block-uagb-container > .scl-kontaktkarte:only-child {
  align-self: stretch;
  flex: 1 1 auto;
}

/* ---------- Strichliste ---------- */
/*
 * Kennzeichen am Listenpunkt — das kurze Kaestchen hinter dem Text, etwa „LK"
 * am Leistungskurs. Gleiche Fassung in Strichliste und Karte, damit dieselbe
 * Auszeichnung in beiden Bloecken gleich aussieht.
 */
.scl-block .scl-liste__kennzeichen,
.scl-block .scl-karte__punkt-kennzeichen {
  font-family: var(--scl-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--scl-orange-dark);
  border: 1px solid var(--scl-orange);
  border-radius: 3px;
  padding: 0.08rem 0.32rem;
  margin-left: 0.45rem;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/*
 * Ueberschrift ueber einer Liste. Gemeinsame Regel fuer Strichliste und
 * Dateiliste, damit dieselbe Zeile in beiden Bloecken gleich aussieht.
 */
.scl-block .scl-liste__label,
.scl-block .scl-dateiliste__label {
  font-family: var(--scl-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--scl-ink);
  margin: 0 0 1rem;
}
.scl-block.scl-liste ul { list-style: none; margin: 0; padding: 0; }
.scl-block.scl-liste--spalten-2 ul { columns: 2; column-gap: 3rem; }
@media (max-width: 780px) {
  .scl-block.scl-liste--spalten-2 ul { columns: 1; }
}
.scl-block.scl-liste li {
  padding: 0.68rem 0 0.68rem 1.4rem;
  border-bottom: 1px solid var(--scl-line);
  position: relative;
  font-family: var(--scl-sans);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--scl-text);
  break-inside: avoid;
  margin: 0;
}
.scl-block.scl-liste li:last-child { border-bottom: none; }
.scl-block.scl-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.22rem;
  width: 7px;
  height: 1px;
  background: var(--scl-orange);
}
.scl-block .scl-liste__zusatz {
  display: block;
  color: var(--scl-muted);
  font-size: 0.84rem;
  margin-top: 0.2rem;
}

/* ---------- Pillenliste ---------- */
.scl-block .scl-pillen__liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}
.scl-block .scl-pillen__eintrag {
  font-family: var(--scl-sans);
  font-size: 0.88rem;
  color: var(--scl-text);
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--scl-line-strong);
  border-radius: 100px;
  background: var(--scl-white);
  margin: 0;
}
.scl-block .scl-pillen__eintrag--betont {
  border-color: var(--scl-orange);
  color: var(--scl-orange-dark);
  font-weight: 500;
}
.scl-block.scl-pillen--stil-auszeichnung .scl-pillen__liste { gap: 0.5rem 0.6rem; }
.scl-block.scl-pillen--stil-auszeichnung .scl-pillen__eintrag {
  font-family: var(--scl-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  font-weight: 400;
}
.scl-block.scl-pillen--stil-auszeichnung .scl-pillen__eintrag--betont {
  border-color: var(--scl-orange);
  color: var(--scl-orange-dark);
}

/* ---------- Dateiliste ---------- */
.scl-block .scl-dateiliste__liste { list-style: none; margin: 0; padding: 0; }
.scl-block .scl-dateiliste__liste > li {
  border-bottom: 1px solid var(--scl-line);
  margin: 0;
}
.scl-block .scl-dateiliste__liste > li:last-child { border-bottom: none; }

/*
 * Mehrspaltiger Satz. Spaltenweise von oben nach unten, wie bei der
 * Strichliste — bei alphabetisch sortierten Dateien liest sich das natürlicher
 * als zeilenweise. break-inside haelt Kennzeichnung und Titel eines Eintrags
 * zusammen; ohne das risse der Spaltenumbruch mitten durch eine Zeile.
 */
.scl-block.scl-dateiliste--spalten-2 .scl-dateiliste__liste { columns: 2; column-gap: 3rem; }
.scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste { columns: 3; column-gap: 2.5rem; }
.scl-block.scl-dateiliste--spalten-2 .scl-dateiliste__liste > li,
.scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste > li {
  break-inside: avoid;
}
/*
 * Im mehrspaltigen Satz behaelt auch der letzte Eintrag seine Linie: Welcher
 * Eintrag am Fuss einer Spalte steht, weiss CSS nicht. Ohne diese Regel
 * schloesse eine Spalte mit Linie ab und die andere ohne.
 */
.scl-block.scl-dateiliste--spalten-2 .scl-dateiliste__liste > li:last-child,
.scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste > li:last-child {
  border-bottom: 1px solid var(--scl-line);
}
@media (max-width: 980px) {
  .scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste { columns: 2; column-gap: 3rem; }
}
@media (max-width: 780px) {
  .scl-block.scl-dateiliste--spalten-2 .scl-dateiliste__liste,
  .scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste { columns: 1; }
  .scl-block.scl-dateiliste--spalten-2 .scl-dateiliste__liste > li:last-child,
  .scl-block.scl-dateiliste--spalten-3 .scl-dateiliste__liste > li:last-child {
    border-bottom: none;
  }
}
.scl-block .scl-dateiliste__liste a,
.scl-block .scl-dateiliste__zeile {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.9rem 0;
  font-family: var(--scl-sans);
  color: var(--scl-text);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: color 0.18s ease;
}
.scl-block.scl-dateiliste .scl-dateiliste__liste a { text-decoration: none; }
.scl-block.scl-dateiliste .scl-dateiliste__liste a:hover { color: var(--scl-orange-dark); }
.scl-block .scl-dateiliste__art {
  font-family: var(--scl-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scl-muted);
  border: 1px solid var(--scl-line-strong);
  padding: 0.16rem 0.42rem;
  flex: none;
  position: relative;
  top: -0.1em;
}
.scl-block.scl-dateiliste .scl-dateiliste__liste a:hover .scl-dateiliste__art {
  border-color: var(--scl-orange);
  color: var(--scl-orange-dark);
}
.scl-block .scl-dateiliste__pfeil {
  margin-left: auto;
  color: var(--scl-orange);
  flex: none;
}

/* ---------- Kontaktkarte ---------- */
/* Ohne height, aus demselben Grund wie bei .scl-karte weiter oben. */
.scl-block.scl-kontaktkarte {
  border: 1px solid var(--scl-line);
  padding: 2rem 1.75rem;
  font-family: var(--scl-sans);
  background: var(--scl-white);
}
/* Zwei Zeilen sind fest reserviert, damit die Namen nebeneinanderstehender
   Karten auf einer Linie liegen. "Zweite stellvertretende Schulleiterin"
   braucht in einer 260px-Karte zwei Zeilen, "Primarstufenleiterin" eine —
   ohne die Reserve sitzt jeder zweite Name ein Stück tiefer als sein Nachbar.
   min-height, nicht height: eine dritte Zeile darf weiterhin umbrechen. */
.scl-block .scl-kontaktkarte__rolle {
  font-family: var(--scl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--scl-orange);
  line-height: 1.6;
  min-height: 3.2em;
  margin: 0 0 0.7rem;
}
.scl-block .scl-kontaktkarte__name {
  font-family: var(--scl-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--scl-ink);
  margin: 0 0 1rem;
  line-height: 1.2;
}
/* Jede Zeile bringt ihr eigenes Raster mit, statt dass ein Raster über der
   ganzen Liste liegt. Vorher teilte sich die Liste in auto | 1fr, und die
   auto-Spalte richtete sich nach der LÄNGSTEN Bezeichnung der Karte. Gemessen
   am 10. August 2026 auf neu.schulcampus-lehnin.de, vier Karten nebeneinander
   (Karte 260px breit): die Bezeichnung "Tel.: Erzieherzimmer" nahm 166px, für
   den Wert blieben 23px — die Rufnummern brachen auf sechs bis sieben Zeilen
   um, die Karte wurde 615px hoch statt der 253px ihrer Nachbarinnen. */
.scl-block .scl-kontaktkarte__zeilen {
  display: grid;
  gap: 0.7rem;
  font-size: 0.93rem;
  margin: 0;
}
.scl-block .scl-kontaktkarte__zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: baseline;
}
/* Mit sichtbarer Bezeichnung steht das Etikett ÜBER dem Wert. Nebeneinander
   trägt nur, solange die Bezeichnung kurz bleibt — und das ist eine Annahme
   über Inhalte, die beim Schreiben der Vorlage niemand kennt. Gestapelt bekommt
   der Wert immer die volle Kartenbreite, egal wie die Zeile beschriftet ist. */
.scl-block .scl-kontaktkarte__zeile--benannt {
  display: block;
}
.scl-block .scl-kontaktkarte__zeile--benannt > dt {
  margin-bottom: 0.15rem;
}
/* Damit die Werte aller Zeilen einer Karte an derselben Kante beginnen: in der
   Symbolzeile schiebt das Symbol den Wert nach rechts, in der gestapelten Zeile
   steht es über ihm. Der Einzug holt das nach — Symbolbreite plus sein Abstand. */
.scl-block .scl-kontaktkarte__zeile--benannt.scl-kontaktkarte__zeile--symbol > dd {
  padding-left: calc(1.15rem + 0.4em);
}
.scl-block .scl-kontaktkarte__zeilen dt {
  font-family: var(--scl-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--scl-muted);
  margin: 0;
}
/* anywhere statt des alten break-word: bricht erst, wenn eine Angabe allein
   nicht in die Zeile passt, und erlaubt der Wertspalte, schmaler zu werden,
   ohne dass sie den Rest der Karte auseinanderdrückt. */
.scl-block .scl-kontaktkarte__zeilen dd {
  color: var(--scl-text);
  overflow-wrap: anywhere;
  margin: 0;
}
.scl-block.scl-kontaktkarte .scl-kontaktkarte__zeilen a {
  color: var(--scl-orange-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--scl-line-strong);
}
.scl-block.scl-kontaktkarte .scl-kontaktkarte__zeilen a:hover { border-color: var(--scl-orange); }

/* Fassung für den Navy-Kontaktbereich.
   Die Vorlage lässt die Karte transparent auf einer Navy-Sektion stehen. Hier bringt
   sie den Grund selbst mit: liegt sie in einem Navy-Spectra-Container, ist der
   Unterschied nicht sichtbar — vergisst jemand den Container einzufärben, stünde sonst
   weiße Schrift auf weißem Grund. */
.scl-block.scl-kontaktkarte--dunkel {
  background: var(--scl-navy);
  border-color: rgba(255, 255, 255, 0.2);
}
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__rolle { color: #f3a183; }
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__name { color: #fff; }
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__zeilen dt { color: rgba(255, 255, 255, 0.55); }
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__zeilen dd { color: rgba(255, 255, 255, 0.95); }
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__zeilen a {
  color: #fff;
  border-bottom-color: rgba(243, 161, 131, 0.5);
}
.scl-block.scl-kontaktkarte--dunkel .scl-kontaktkarte__zeilen a:hover { color: #f3a183; }

/* ---------- Sprungband ---------- */
.scl-block.scl-sprungband {
  background: var(--scl-orange);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.scl-block.scl-sprungband--haftend { position: sticky; top: 0; z-index: 100; }
.scl-block .scl-sprungband__inhalt {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.scl-block .scl-sprungband__beschriftung {
  font-family: var(--scl-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  flex: none;
  padding: 0.85rem 0;
  opacity: 0.9;
}
.scl-block.scl-sprungband nav { overflow-x: auto; scrollbar-width: none; }
.scl-block.scl-sprungband nav::-webkit-scrollbar { display: none; }
.scl-block.scl-sprungband ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.scl-block.scl-sprungband li { flex: none; margin: 0; }
.scl-block.scl-sprungband li + li { border-left: 1px solid rgba(255, 255, 255, 0.28); }
.scl-block.scl-sprungband a,
.scl-block.scl-sprungband li span {
  display: block;
  padding: 0.85rem 1.05rem;
  text-decoration: none;
  font-family: var(--scl-sans);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.86rem;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}
.scl-block.scl-sprungband a:hover { background: rgba(0, 0, 0, 0.14); color: #fff; }
.scl-block.scl-sprungband :focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (max-width: 780px) {
  .scl-block .scl-sprungband__inhalt { padding: 0 1.5rem; }
}
@media (max-width: 700px) {
  .scl-block .scl-sprungband__beschriftung { display: none; }
}

/* ---------- Strichgrafik ---------- */
.scl-block.scl-abbildung { margin: 0; }
.scl-block.scl-abbildung img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}
.scl-block.scl-abbildung--breite-inhalt {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}
.scl-block.scl-abbildung--breite-voll { width: 100%; }
@media (min-width: 981px) {
  .scl-block.scl-abbildung--sticky { position: sticky; top: 5rem; }

  /*
   * Steht die Grafik in einer Spectra-Spalte, braucht das Mitlaufen zwei
   * Nachhilfen. Beide sind nur dort nötig und ändern nichts an Grafiken
   * außerhalb von Spectra.
   *
   * Erstens die Positionierung selbst: Spectra legt jedem direkten Kind eines
   * Containers `position: relative` auf, über einen Selektor aus 27 Klassen.
   * Dagegen käme nur ein ebenso absurder Selektor an — deshalb hier
   * ausnahmsweise !important.
   */
  .wp-block-uagb-container > .scl-block.scl-abbildung--sticky {
    position: sticky !important;
  }

  /*
   * Zweitens der Weg: Die Spalte ist von Haus aus nur so hoch wie ihr Inhalt
   * und zentriert ihn senkrecht. Ohne `stretch` reicht sie nicht bis zum Ende
   * der Nachbarspalte, ohne `flex-start` verschenkt die Zentrierung die halbe
   * Strecke — in beiden Fällen haftet die Grafik zwar, hat aber nichts, woran
   * sie entlanglaufen könnte. Der doppelte Klassenname hebt die Spezifität
   * über die Spalteneinstellung von Spectra, ohne !important zu brauchen.
   */
  .wp-block-uagb-container.wp-block-uagb-container:has(> .scl-abbildung--sticky) {
    align-self: stretch;
    justify-content: flex-start;
  }
}
.scl-block.scl-abbildung figcaption {
  font-family: var(--scl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--scl-muted);
  margin-top: 0.85rem;
  padding-left: 2.4rem;
  position: relative;
  line-height: 1.6;
}
.scl-block.scl-abbildung figcaption::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 1.8rem;
  height: 1px;
  background: var(--scl-orange);
}

/* ---------- Ablauf ---------- */
.scl-block .scl-ablauf__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--scl-sans);
}
.scl-block .scl-ablauf__was {
  font-weight: 700;
  color: var(--scl-ink);
  margin: 0 0 0.3rem;
}
.scl-block .scl-ablauf__text {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--scl-text);
  margin: 0;
}
.scl-block .scl-ablauf__punkte {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.93rem;
}
.scl-block .scl-ablauf__punkte li {
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.6;
  color: var(--scl-text);
  margin: 0;
}
.scl-block .scl-ablauf__punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 6px;
  height: 1px;
  background: var(--scl-orange);
}

/* Nummerierte Schrittfolge */
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__schritte {
  counter-reset: scl-schritt;
  position: relative;
  padding-left: 3.2rem;
}
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__schritte::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--scl-line-strong);
}
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__schritte > li {
  position: relative;
  padding-bottom: 2rem;
  counter-increment: scl-schritt;
  margin: 0;
}
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__schritte > li:last-child { padding-bottom: 0; }
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__schritte > li::before {
  content: counter(scl-schritt);
  position: absolute;
  left: -3.2rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--scl-white);
  border: 1px solid var(--scl-orange);
  color: var(--scl-orange-dark);
  font-family: var(--scl-mono);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scl-block .scl-ablauf__wann {
  font-family: var(--scl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scl-orange);
  display: block;
  margin-bottom: 0.3rem;
}
.scl-block.scl-ablauf--art-nummeriert .scl-ablauf__was { font-size: 1.02rem; }

/* Aufzaehlung — gleichrangige Punkte mit Ziffer.
   Bewusst OHNE die verbindende Linie und ohne Kreise der Schrittfolge: Die
   Kette liest sich als Reihenfolge, und Grundsaetze eines Leitbilds gelten
   nebeneinander. Die Ziffer bleibt trotzdem, weil „fuenf Grundsaetze" eine
   Menge ankuendigt, die der Lesende nachzaehlen koennen soll.
   Drei Spalten ab 861 px: Ziffer, Name, Erlaeuterung. Feste Namensspalte,
   damit die Erlaeuterungen aller Zeilen an derselben Kante beginnen. */
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__schritte {
  counter-reset: scl-punkt;
  border-top: 1px solid var(--scl-line-strong);
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__schritte > li {
  counter-increment: scl-punkt;
  display: grid;
  grid-template-columns: 3.5rem 15rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--scl-line-strong);
  margin: 0;
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__schritte > li::before {
  content: counter( scl-punkt, decimal-leading-zero );
  font-family: var(--scl-mono);
  font-size: 0.9rem;
  color: var(--scl-orange);
  font-variant-numeric: tabular-nums;
}
/* Die Kennzeichnung sitzt ueber dem Namen in derselben Spalte, nicht in einer
   eigenen — sonst braeuchte die Zeile eine vierte Spalte, die meist leer waere. */
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__wann {
  grid-column: 2;
  margin-bottom: 0.25rem;
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__inhalt {
  display: contents;
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__was {
  grid-column: 2;
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 0;
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__text,
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__punkte {
  grid-column: 3;
}
.scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__text { font-size: 0.98rem; }

/* Nur im Editor: dort liegen zusaetzliche Bedienelemente im selben Container
   wie Name und Text. Mit display: contents wuerden sie zu Rasterzellen und
   rutschten unter die Ziffer. Die Bearbeitungsansicht stapelt deshalb schlicht
   untereinander — bedienbar zu sein wiegt hier schwerer als die exakte
   Vorschau. Die Klasse setzt allein edit.js. */
.scl-block.scl-ablauf--art-aufzaehlung.scl-ablauf--bearbeitung .scl-ablauf__schritte > li {
  display: block;
  position: relative;
  padding-left: 3.2rem;
}
.scl-block.scl-ablauf--art-aufzaehlung.scl-ablauf--bearbeitung .scl-ablauf__schritte > li::before {
  position: absolute;
  left: 0;
  top: 1.5rem;
}
.scl-block.scl-ablauf--art-aufzaehlung.scl-ablauf--bearbeitung .scl-ablauf__inhalt { display: block; }

/* Unter 861 px ruecken Name und Erlaeuterung untereinander, die Ziffer behaelt
   ihre Spalte. Unter 621 px faellt auch sie in den Textfluss. */
@media (max-width: 860px) {
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__schritte > li {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.3rem 1.5rem;
  }
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__wann,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__was,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__text,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__punkte { grid-column: 2; }
}
@media (max-width: 620px) {
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__schritte > li { grid-template-columns: 1fr; }
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__wann,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__was,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__text,
  .scl-block.scl-ablauf--art-aufzaehlung .scl-ablauf__punkte { grid-column: 1; }
}

/* Tagesleiste */
.scl-block.scl-ablauf--art-zeit .scl-ablauf__schritte {
  border-top: 1px solid var(--scl-line-strong);
}
.scl-block.scl-ablauf--art-zeit .scl-ablauf__schritte > li {
  display: grid;
  grid-template-columns: 9.5rem 1fr 15rem;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--scl-line-strong);
  margin: 0;
}
.scl-block .scl-ablauf__marke {
  font-family: var(--scl-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--scl-orange-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scl-block.scl-ablauf--art-zeit .scl-ablauf__was { font-size: 1.05rem; }
.scl-block .scl-ablauf__traeger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--scl-line-strong);
  border-radius: 100px;
  background: var(--scl-white);
  line-height: 1.35;
  margin: 0;
}
.scl-block .scl-ablauf__traeger::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.scl-block .scl-ablauf__traeger--itbl { border-color: var(--scl-blue); color: var(--scl-blue); }
.scl-block .scl-ablauf__traeger--itbl::before { background: var(--scl-blue); }
.scl-block .scl-ablauf__traeger--schule { border-color: var(--scl-orange); color: var(--scl-orange-dark); }
.scl-block .scl-ablauf__traeger--schule::before { background: var(--scl-orange); }
.scl-block .scl-ablauf__traeger--team { border-color: var(--scl-ink); color: var(--scl-ink); }
.scl-block .scl-ablauf__traeger--team::before {
  background: linear-gradient(90deg, var(--scl-orange) 50%, var(--scl-blue) 50%);
}
/* Die Regel fuer .scl-ablauf__legende ist mit 1.2.2 entfallen — render.php gibt
   die Legende nicht mehr aus, weil sie die Beschriftungen der Marker nur
   wiederholte. Waechst der Block einmal um farbcodierte Marker ohne Text,
   gehoert sie zurueck. */
@media (max-width: 860px) {
  .scl-block.scl-ablauf--art-zeit .scl-ablauf__schritte > li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .scl-block .scl-ablauf__marke { font-size: 1rem; }
}

/* ==========================================================================
   Werkzeuge und Felder, die nur in der Editor-Ansicht vorkommen.
   Kein render.php gibt diese Klassen aus.
   ========================================================================== */

.scl-editor-werkzeuge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.4rem;
  opacity: 0.65;
}
.scl-editor-werkzeuge .components-button {
  height: 20px;
  min-width: 0;
  padding: 0 0.35rem;
  font-size: 0.68rem;
}
.scl-editor-felder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0 0 0.9rem;
}
.scl-editor-felder .components-base-control { margin-bottom: 0; }
/*
 * Feld, das im Editor unter dem Eintrag steht, im Frontend aber an anderer
 * Stelle erscheint — etwa das Kennzeichen, das dort hinter dem Punkttext sitzt.
 * Bewusst schmucklos: es zeigt die Eingabe, nicht die spaetere Wirkung.
 */
.scl-editor-nebenfeld {
  display: block;
  font-size: 0.78rem;
  color: var(--scl-muted);
  margin-top: 0.15rem;
}
.scl-editor-hinweis {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--scl-muted);
  margin: 0 0 0.8rem;
}
.scl-editor-gruppe {
  border-left: 2px solid var(--scl-line);
  padding-left: 0.7rem;
  margin-bottom: 0.9rem;
}

/* Hinweis im Editor, wenn eine Terminliste eine noch leere Gruppe enthaelt.
   Erscheint nur im Editor — der Block ist dynamisch (save: () => null),
   aus dem Editor wird nichts ins Frontend serialisiert. */
.scl-editor-platzhalter {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px dashed color-mix( in srgb, currentColor 30%, transparent );
  border-radius: 3px;
  opacity: 0.7;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------
   scl/termine — bewusst THEMENEUTRAL.
   Keine font-family, kein --scl-Farbtoken, kein eigener Grund.
   Schrift, Textfarbe und Hintergrund kommen vom Theme; Linien und
   Punkte leiten sich per color-mix aus der geerbten Textfarbe ab.
   Wer hier ein SCL-Token einsetzt, bricht die Vorgabe.
   --------------------------------------------------------------- */

.scl-block.scl-termine { margin: 0; }

.scl-block .scl-termine__titel { margin: 0 0 1.2rem; }

.scl-block .scl-termine__gruppe + .scl-termine__gruppe { margin-top: 2rem; }

.scl-block .scl-termine__gruppe-titel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.6rem;
}

.scl-block .scl-termine__gruppe-titel::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: color-mix( in srgb, currentColor 22%, transparent );
}

.scl-block .scl-termine__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scl-block .scl-termine__termin {
  display: flex;
  flex-wrap: wrap;
  /* center statt baseline: die Strecke ist ein leerer 1px-Span ohne eigene
     Grundlinie, mit baseline saesse sie zu tief (siehe Grid-Zweig unten). */
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix( in srgb, currentColor 12%, transparent );
}

/* Letzte Zeile der letzten GEFUELLTEN Gruppe: keine Trennlinie. Nicht per
   :last-child an der letzten Gruppe der Liste, weil eine abschliessende
   Gruppe mit Titel ohne Termine (Spec Abschnitt 6) dann ins Leere zielt. */
.scl-block .scl-termine__gruppe:has( .scl-termine__termin ):not(:has( ~ .scl-termine__gruppe .scl-termine__termin ))
  .scl-termine__termin:last-child {
  border-bottom: 0;
}

.scl-block .scl-termine__label { flex: 1 1 12rem; }

.scl-block .scl-termine__von,
.scl-block .scl-termine__bis,
.scl-block .scl-termine__einzeln {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Strecke zwischen zwei Zeitpunkten, mit Punkt an jedem Ende. */
.scl-block .scl-termine__strecke {
  position: relative;
  width: clamp( 1.75rem, 5vw, 4rem );
  height: 1px;
  background: color-mix( in srgb, currentColor 35%, transparent );
}

.scl-block .scl-termine__strecke::before,
.scl-block .scl-termine__strecke::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY( -50% );
}

.scl-block .scl-termine__strecke::before { left: -1px; }
.scl-block .scl-termine__strecke::after { right: -1px; }

/* Einzelangabe: ein Punkt statt einer Strecke. */
.scl-block .scl-termine__einzeln {
  position: relative;
  padding-left: 1rem;
}

.scl-block .scl-termine__einzeln::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY( -50% );
}

/* Ab 601 px fluchten die Datumsspalten über ein gemeinsames Raster. */
@media ( min-width: 601px ) {
  @supports ( grid-template-columns: subgrid ) {
    .scl-block .scl-termine__liste {
      display: grid;
      grid-template-columns: minmax( 8rem, 1fr ) auto auto auto;
    }

    .scl-block .scl-termine__termin {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: center;
    }

    .scl-block .scl-termine__von { text-align: right; }

    .scl-block .scl-termine__einzeln {
      grid-column: 2 / -1;
    }

    .scl-block .scl-termine__von,
    .scl-block .scl-termine__bis,
    .scl-block .scl-termine__einzeln {
      white-space: normal;
    }
  }
}

/* Unter 601 px: Label auf eigene Zeile, damit Anfangsdatum, Strecke und
   Enddatum zusammenbleiben statt das Enddatum als eigene Zeile abzureissen. */
@media ( max-width: 600px ) {
  .scl-block .scl-termine__label { flex: 1 1 100%; }
}

/* Symbole der Kontaktzeilen. Strichsymbole in currentColor, damit sie in der
   dunklen Fassung der Kontaktkarte automatisch mitkippen. Größe hängt an rem,
   nicht an em: das umgebende dt hat font-size 0.66rem (aus der Zeit, in der
   dort ein Kürzel in Versalien stand) — 1.05em davon ergab ein 10px-Symbol.
   Das Symbol soll das Etikett ersetzen, also an den Fließtext angekoppelt
   bleiben statt am winzigen dt zu hängen. */
.scl-block .scl-kontaktkarte__symbol {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

/* Abstand nur, wenn dem Symbol sichtbarer Text folgt. Die Entscheidung fällt
   in render.php und edit.js (Klasse --allein), nicht hier per :only-child —
   das zählt nur Element-Geschwister, keine Textknoten, und griff deshalb
   bislang verkehrt herum. */
.scl-block .scl-kontaktkarte__symbol { margin-right: 0.4em; }
.scl-block .scl-kontaktkarte__symbol--allein { margin-right: 0; }

/* ---------------------------------------------------------------
   Pressespiegel — Beitragschronik nach Schuljahren

   Textbasiert und ohne Bilder: die Chronik traegt bei rund hundert
   Beitraegen, weil jede Zeile nur Datum, Titel und Anriss kostet.
   Die Datumsspalte steht ab 601 px links neben dem Titel und rutscht
   darunter nicht in eine eigene Zeile, sondern ueber ihn.
   --------------------------------------------------------------- */
.scl-block.scl-pressespiegel { margin: 0; }

/* Sprungleiste der Schuljahre. Ruhiger als das orange Sprungband der
   Seitenebene — sie gliedert nur innerhalb eines Abschnitts. */
.scl-block .scl-pressespiegel__leiste {
  border-bottom: 1px solid var(--scl-line);
  margin-bottom: 2.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.scl-block .scl-pressespiegel__leiste::-webkit-scrollbar { display: none; }
.scl-block .scl-pressespiegel__leiste ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0.7rem;
}
.scl-block .scl-pressespiegel__leiste li { flex: none; margin: 0; }
.scl-block.scl-pressespiegel .scl-pressespiegel__leiste a {
  display: block;
  font-family: var(--scl-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--scl-muted);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.scl-block.scl-pressespiegel .scl-pressespiegel__leiste a:hover {
  color: var(--scl-orange);
  border-bottom-color: var(--scl-orange);
}

/* Gruppe eines Schuljahres */
.scl-block .scl-pressespiegel__gruppe { margin: 0 0 3rem; scroll-margin-top: 5rem; }
.scl-block .scl-pressespiegel__gruppe:last-child { margin-bottom: 0; }

.scl-block .scl-pressespiegel__gruppe-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--scl-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--scl-navy);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--scl-line-strong);
}
.scl-block .scl-pressespiegel__anzahl {
  flex: none;
  font-family: var(--scl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--scl-muted);
}

/* Die Liste selbst */
.scl-block .scl-pressespiegel__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.scl-block .scl-pressespiegel__eintrag {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--scl-line);
  margin: 0;
}
.scl-block .scl-pressespiegel__eintrag:last-child { border-bottom: none; }

.scl-block .scl-pressespiegel__datum {
  display: block;
  font-family: var(--scl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--scl-orange);
  margin-bottom: 0.3rem;
}

.scl-block .scl-pressespiegel__titel {
  font-family: var(--scl-sans);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--scl-ink);
  margin: 0;
}
/* Doppelter Wurzelpraefix: Astras Link-Regel im Inhaltsbereich liegt selbst
   schon bei (0,2,1) und unterstriche den Titel sonst. */
.scl-block.scl-pressespiegel .scl-pressespiegel__titel a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--scl-orange), var(--scl-orange));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.22s ease, color 0.18s ease;
}
.scl-block.scl-pressespiegel .scl-pressespiegel__titel a:hover {
  color: var(--scl-orange);
  background-size: 100% 1px;
}

.scl-block .scl-pressespiegel__anriss {
  font-family: var(--scl-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--scl-text);
  margin: 0.35rem 0 0;
  max-width: 62ch;
}

/* Ab 601 px steht das Datum in einer eigenen Spalte links. Feste Breite statt
   Prozent, damit der laengste deutsche Monatsname („September") ohne Umbruch
   passt und alle Zeilen an derselben Kante beginnen. */
@media ( min-width: 601px ) {
  .scl-block .scl-pressespiegel__eintrag {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    column-gap: 1.6rem;
  }
  .scl-block .scl-pressespiegel__datum {
    margin-bottom: 0;
    padding-top: 0.2rem;
  }
  .scl-block .scl-pressespiegel__titel,
  .scl-block .scl-pressespiegel__anriss { grid-column: 2; }
}