/* Deko-Karten als Baustein (A843, Vorschlag, nicht live): dieselben schwebenden Beispielkarten wie auf /preise/ (A816),
   fuer jeden Abschnitt wiederverwendbar.
   Aufbau:  <section class="deko [deko--schmal]"> <div class="deko-card is-left" aria-hidden="true"><img …></div>
            <div class="deko-card is-right" aria-hidden="true"><img …></div> <div class="deko-fan" aria-hidden="true">3× <img></div> … Inhalt …
   Regeln (Louis 23.10.: „immer hinter dem Inhalt“; Boss 26.10.: ab 1541 px, Mobil ohne Ueberlappung):
   - Seitenkarten ab 1541 px links/rechts, schraeg, hinter dem Inhalt (z-index 0, Inhalt z-index 1).
   - .deko--schmal: Abschnitt mit schmaler, mittiger Textspalte, Seitenkarten schon ab 1181 px (Rand bleibt frei, gemessen).
   - .deko--rechts: Abschnitt mit linksbündigem Text (z. B. Kopfbereich): ab 1181 px beide Karten als Faecher rechts in der
     freien Flaeche, ab 1541 px links/rechts wie gewohnt.
   - .deko--tablet (A858, Louis 26.10. fuer /schulleitung/): schon ab 768 px links und rechts im Hintergrund, kleiner und
     am Rand angeschnitten; darunter (Handy) der Faecher.
   - Darunter statt der Seitenkarten ein kleiner Faecher im Fluss ueber dem Inhalt: kann nie ueber Text liegen.
   A858: Bilder im echten Seitenverhaeltnis 886:1200 (vorher 2:3 mit weissem Hintergrund = weisser Rand unten, Louis 26.10.).
   Nur Beispielkarten mit erfundenen Lehrkraeften (KI-Musterpersonen). */
.deko { position: relative; overflow: hidden; }
.deko > :not(.deko-card) { position: relative; z-index: 1; }
.deko-card { position: absolute; top: var(--deko-top, clamp(48px, 6vw, 96px)); width: clamp(96px, 8.5vw, 130px);
  z-index: 0; pointer-events: none; display: none; }
.deko-card img { display: block; width: 100%; height: auto; aspect-ratio: 886 / 1200; object-fit: cover; border-radius: 10px;
  box-shadow: var(--shadow-lg); }
.deko-card.is-left { left: 2.5%; transform: rotate(-8deg); }
.deko-card.is-right { right: 2.5%; transform: rotate(8deg); }
.deko-card.is-unten { top: auto; bottom: var(--deko-unten, clamp(48px, 6vw, 96px)); }

.deko-fan { display: flex; justify-content: center; align-items: flex-end; margin: 0 auto 22px; padding-top: 10px; }
.deko-fan img { width: clamp(58px, 16vw, 78px); height: auto; aspect-ratio: 886 / 1200; object-fit: cover; border-radius: 8px;
  box-shadow: var(--shadow-lg); }
.deko-fan img:nth-child(1) { transform: rotate(-11deg) translateY(6px); }
.deko-fan img:nth-child(2) { transform: translateY(-8px); margin: 0 -14px; position: relative; z-index: 2; }
.deko-fan img:nth-child(3) { transform: rotate(11deg) translateY(6px); }

@media (min-width: 1541px) {
  .deko-card { display: block; }
  .deko-fan { display: none; }
}
@media (min-width: 1181px) {
  .deko--schmal .deko-card { display: block; }
  .deko--schmal .deko-fan { display: none; }
}
@media (min-width: 1181px) and (max-width: 1540px) {
  .deko--rechts .deko-card { display: block; }
  .deko--rechts .deko-fan { display: none; }
  .deko--rechts .deko-card.is-left { left: auto; right: calc(2.5% + 7.5vw); top: calc(var(--deko-top, clamp(48px, 6vw, 96px)) + 18px); }
}
@media (min-width: 768px) and (max-width: 1180px) {
  /* Auf dem Tablet laeuft der Text fast ueber die ganze Breite: links und rechts daneben ist kein Platz. Deshalb stehen die
     Karten links und rechts OBEN im Kopf, und der Inhalt rueckt um ihre Hoehe nach unten (gemessen: keine Karte ueber Text). */
  .deko--tablet .deko-card { display: block; width: 84px; top: 14px; }
  .deko--tablet .deko-card.is-left { left: 4%; right: auto; transform: rotate(-9deg); }
  .deko--tablet .deko-card.is-right { right: 4%; left: auto; transform: rotate(9deg); }
  .deko--tablet .deko-fan { display: none; }
  .deko--tablet > .container { margin-top: 96px; }
}
/* .deko--nah (A858, Louis 26.10. 13:22: „Karten teilweise auch etwas hinter dem Text, solange man den noch lesen kann“):
   die Seitenkarten ruecken an den Inhalt heran und stecken ein Stueck hinter Kaesten mit eigenem Hintergrund (Fragen-Zeilen).
   Freier Text liegt nie direkt auf einer Karte (Messung abschnitt_bild.js … lesbar). 1181–1540 px bleibt der Faecher darueber. */
@media (min-width: 1181px) {
  .deko--nah .deko-card { display: block; top: var(--deko-top-nah, 150px); }
  .deko--nah .deko-card.is-left { left: max(1%, calc(50% - 655px)); }
  .deko--nah .deko-card.is-right { right: max(1%, calc(50% - 655px)); }
}
@media (min-width: 1181px) and (max-width: 1540px) {
  .deko--nah .deko-fan { display: flex; }
  .deko--nah .deko-card { top: var(--deko-top-nah-faecher, 330px); }
}
/* .deko--sl-nah (A858, Louis 26.10. 13:22): Kopf der Schulleitungs-Seite, Karten naeher am Text, teils dahinter.
   Massstab: Kontrast je Textzeile ueber einer Karte >= 4,5:1 (abschnitt_bild.js … lesbar). */
@media (min-width: 768px) and (max-width: 1180px) {
  .deko--sl-nah > .container { margin-top: 64px; }
  .deko--sl-nah .deko-card { top: 18px; }
}
@media (min-width: 1181px) and (max-width: 1540px) {
  .deko--sl-nah .deko-card.is-right { right: calc(2.5% + 40px); }
  .deko--sl-nah .deko-card.is-left { right: calc(2.5% + 7.5vw + 40px); }
}
@media (min-width: 1541px) {
  .deko--sl-nah .deko-card.is-left { left: max(1%, calc(50% - 650px)); }
  .deko--sl-nah .deko-card.is-right { right: max(1%, calc(50% - 650px)); }
}
@media (prefers-reduced-motion: no-preference) {
  .deko-card { transition: transform .4s ease; }
}