/* ==========================================================================
   Rhön Harmonika · Startseite
   Bühne, Holz und Aufkleber: Fotos von Adrian freigestellt, große Schrift,
   Bewegung beim Scrollen. Baut auf site.css und bausteine.css auf.
   ========================================================================== */

:root {
  --orange: #D9773A;
  --orange-tief: #B85F27;
  --petrol: #2F5B5B;
  --petrol-tief: #234646;
}

/* Papier mit leichter Körnung, damit Flächen nach Druck aussehen statt nach Bildschirm */
.s-kosmos, .s-laeden, .s-online, .s-news { position: relative; isolation: isolate; }
.s-kosmos::after, .s-laeden::after, .s-online::after, .s-news::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--koerner); opacity: .16; pointer-events: none; }

/* ============ Kopf ============ */
.s-held { position: relative; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); min-height: max(640px, 100svh); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); isolation: isolate; overflow: clip; }
@media (min-width: 900px) { .s-held { background-image: url("../img/holz-bahn.webp"); } }
.s-held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 20% 30%, rgba(23,17,13,.35), rgba(15,10,7,.82)); }
.s-held-text { grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 2; padding: calc(var(--kopf-h) + 32px) 0 72px max(var(--rand), calc((100vw - var(--breite)) / 2)); max-width: 700px; transform: translateY(calc(var(--p, 0) * -90px)); }
.s-held-claim { width: min(100%, 620px); margin: 0 0 30px -14px; filter: drop-shadow(0 26px 30px rgba(0,0,0,.35)); }
.js .s-held-claim { opacity: 0; transform: scale(.82) rotate(-6deg); transition: opacity .5s var(--ease), transform 1.1s var(--ease-feder); transition-delay: .15s; }
.ist-bereit .s-held-claim { opacity: 1; transform: none; }
.s-held-unter { font-size: clamp(19px, 1.45vw, 23px); line-height: 1.45; color: var(--hell-2); max-width: 32ch; margin: 0 0 30px; }
.s-held-fakten { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 40px 0 0; padding: 0; list-style: none; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); }
.s-held-fakten li { display: flex; align-items: baseline; gap: 8px; padding-right: 22px; margin-right: 22px; border-right: 1px solid rgba(246,239,226,.18); }
.s-held-fakten li:last-child { border: 0; margin: 0; }
.s-held-fakten b { font-size: 32px; font-weight: 900; color: var(--weiss); letter-spacing: 0; }
.s-held-film { grid-column: 2; grid-row: 1; position: relative; margin: 0; height: 100%; min-height: inherit; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.s-held-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(calc(1.02 + var(--p, 0) * .1)); transform-origin: 50% 30%; }
.s-held-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,10,7,.55) 0%, transparent 22%, transparent 70%, rgba(15,10,7,.6) 100%); pointer-events: none; }
.s-held-film figcaption { position: absolute; z-index: 2; right: var(--rand); bottom: 28px; max-width: 30ch; text-align: right; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.72); }
.s-held-pause { position: absolute; z-index: 2; left: 22%; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: rgba(15,10,7,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--weiss); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--ease); }
.s-held-pause:hover { background: rgba(15,10,7,.8); }
.s-held-pause svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 900px) {
  .s-held { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .s-held-film { grid-column: 1; grid-row: 1; height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 74svh; width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .s-held-film figcaption { left: 16px; right: auto; bottom: 18%; text-align: left; font-size: 11.5px; max-width: 24ch; }
  .s-held-pause { left: auto; right: 16px; bottom: 18%; }
  .s-held-text { grid-row: 2; padding: 0 var(--rand) 56px; margin-top: -14px; transform: none; }
  .s-held-claim { width: min(100%, 520px); margin-left: -8px; }
  .s-held-fakten { font-size: 13px; letter-spacing: .08em; flex-wrap: nowrap; }
  .s-held-fakten b { font-size: 22px; }
  .s-held-fakten li { padding-right: 10px; margin-right: 10px; gap: 5px; }
}

/* ============ Kosmos ============ */
.s-kosmos { padding-block: var(--abschnitt) clamp(120px, 13vw, 200px); background: var(--papier); overflow: clip; }
.s-kosmos-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.s-kosmos-text h2 { font-size: clamp(40px, 4.6vw, 76px); line-height: .97; margin-bottom: 28px; }
.s-kosmos-text p { max-width: 46ch; color: var(--tinte-2); }
.s-kosmos-text .einleitung { color: var(--tinte); }
.s-kosmos-buehne { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 700px; justify-self: center; }
.s-kosmos-buehne::before { content: ""; position: absolute; left: 50%; top: 52%; width: 62%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(.6 + var(--k, 0) * .4)); background: radial-gradient(circle, var(--gruen-hauch) 0 58%, transparent 59%), repeating-radial-gradient(circle, transparent 0 18px, rgba(123,160,45,.16) 18px 19px); transition: transform 1.4s var(--ease); }
.s-kosmos-buehne.ist-da::before { --k: 1; }
.s-kosmos-faeden { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s-kosmos-faeden line { stroke: var(--gruen-tief); stroke-width: 1.4; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * 90ms + 500ms); }
.s-kosmos-buehne.ist-da .s-kosmos-faeden line { opacity: .55; }
.s-kosmos-mitte { position: absolute; left: 50%; bottom: 6%; width: 52%; transform: translateX(-50%); z-index: 1; }
.s-kosmos-mitte img { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(30,23,18,.28)); }
.js .s-kosmos-mitte img { opacity: 0; transform: translateY(40px) scale(.94); transition: opacity .8s var(--ease), transform 1.2s var(--ease-feder); }
.s-kosmos-buehne.ist-da .s-kosmos-mitte img { opacity: 1; transform: none; }
.s-kosmos-planeten { list-style: none; margin: 0; padding: 0; }
.planet { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: clamp(132px, 13vw, 176px); transform: translate(-50%, -50%) rotate(var(--dreh)); }
.js .planet { opacity: 0; transform: translate(calc(-50% + (50 - var(--x)) * 4px), calc(-50% + (55 - var(--y)) * 4px)) scale(.4) rotate(0deg); transition: opacity .5s var(--ease), transform 1.1s var(--ease-feder); transition-delay: calc(var(--i) * 90ms + 300ms); }
.s-kosmos-buehne.ist-da .planet { opacity: 1; transform: translate(-50%, -50%) rotate(var(--dreh)); }
.planet a { display: grid; justify-items: center; gap: 4px; padding: 14px 12px 13px; border-radius: 16px; background: var(--weiss); color: var(--tinte); text-align: center; text-decoration: none; box-shadow: 0 1px 0 rgba(30,23,18,.06), 0 18px 34px -18px rgba(30,23,18,.55); transition: transform .35s var(--ease-feder), box-shadow .35s var(--ease); }
.planet a:hover, .planet a:focus-visible { transform: translateY(-6px) rotate(calc(var(--dreh) * -1)) scale(1.05); box-shadow: 0 0 0 2px var(--gruen), 0 26px 40px -18px rgba(30,23,18,.6); }
.planet img { width: auto; height: 62px; object-fit: contain; }
.planet img.breit { height: auto; width: 100%; max-width: 132px; margin-block: 10px 6px; }
.planet img.klein { height: 46px; border-radius: 11px; }
.planet span { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.planet small { font-size: 13px; line-height: 1.3; color: var(--tinte-2); }
.planet-wort { color: var(--gruen-dunkel); font-size: 24px !important; font-weight: 900 !important; line-height: .9 !important; padding-block: 4px; }
.planet-zeichen { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #1DB954; color: var(--weiss); }
.planet-zeichen svg { width: 28px; height: 28px; fill: currentColor; }
.planet--zahl a { background: var(--gruen); color: var(--weiss); box-shadow: 0 0 0 2px var(--gruen-tief), 0 18px 34px -18px rgba(30,23,18,.6); }
.planet--zahl b { --z-luft: .15em; font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .8; }
.planet--zahl small { color: rgba(255,255,255,.86); }
.planet--hell a { background: var(--holz); box-shadow: 0 0 0 2px var(--holz-tief), 0 18px 34px -18px rgba(30,23,18,.6); }
@media (max-width: 1000px) {
  .s-kosmos-raster { grid-template-columns: minmax(0, 1fr); }
  .s-kosmos-buehne { aspect-ratio: auto; max-width: none; display: grid; justify-items: center; }
  .s-kosmos-buehne::before { top: 120px; width: min(300px, 70vw); }
  .s-kosmos-faeden { display: none; }
  .s-kosmos-mitte { position: relative; left: auto; bottom: auto; transform: none; width: min(300px, 64vw); margin-bottom: -30px; }
  .s-kosmos-planeten { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 560px; }
  .planet, .js .planet { position: relative; left: auto; top: auto; width: auto; transform: rotate(var(--dreh)); }
  .js .planet { transform: translateY(30px) scale(.9); }
  .s-kosmos-buehne.ist-da .planet { transform: rotate(var(--dreh)); }
  .planet a { height: 100%; align-content: center; }
}

/* ============ Dein Weg (quer scrollen) ============ */
.s-weg { position: relative; background: var(--nacht); color: var(--hell); }
.s-weg-klebe { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.s-weg-spur { display: flex; align-items: stretch; gap: clamp(20px, 2.4vw, 36px); padding: calc(var(--kopf-h) + 40px) 0 72px max(var(--rand), calc((100vw - var(--breite)) / 2)); width: max-content; transform: translate3d(calc(var(--q, 0) * var(--weite, 0px) * -1), 0, 0); will-change: transform; }
.s-weg-intro { flex: none; width: min(560px, 82vw); align-self: center; padding-right: clamp(20px, 4vw, 64px); }
.s-weg-intro h2 { font-size: clamp(52px, 6.4vw, 108px); line-height: .95; margin-bottom: 28px; }
.s-weg-intro p { color: var(--hell-2); font-size: clamp(18px, 1.35vw, 21px); max-width: 40ch; }
.s-weg-tipp { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-licht) !important; }
.s-weg-tipp .pfeil { width: 20px; height: 20px; animation: schubs 1.6s var(--ease) 4; }
@keyframes schubs { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.s-weg-karte { --hg: var(--papier); --fg: var(--tinte); --leise: var(--tinte-2); container-type: inline-size; position: relative; flex: none; width: min(860px, 84vw); min-height: min(600px, 68svh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; border-radius: 28px; background: var(--hg); color: var(--fg); overflow: visible; isolation: isolate; box-shadow: 0 40px 80px -50px rgba(0,0,0,.9); }
.s-weg-karte::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--koerner); opacity: .14; }
.s-weg-karte--2 { --hg: var(--gruen); --fg: var(--weiss); --leise: rgba(255,255,255,.88); }
.s-weg-karte--3 { --hg: var(--creme); }
.s-weg-karte--4 { --hg: var(--holz); --fg: var(--hell); --leise: var(--hell-2); background: var(--holz) url("../img/holz-klein.webp") center / cover; }
.s-weg-karte--4::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(160deg, rgba(23,17,13,.55), rgba(23,17,13,.8)); }
.s-weg-inhalt { position: relative; z-index: 2; align-self: center; padding: clamp(28px, 3.4vw, 52px); }
.s-weg-nr { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(80px, 17cqi, 160px); line-height: .8; color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .32; margin-bottom: 10px; }
.s-weg-karte .s-weg-nr { color: transparent; -webkit-text-stroke-color: var(--fg); }
.s-weg-preis { display: inline-block; margin: 0 0 14px; padding: .4em .75em .34em; border-radius: 5px; background: var(--tinte); color: var(--weiss); font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); }
.s-weg-karte--2 .s-weg-preis { background: var(--weiss); color: var(--gruen-dunkel); }
.s-weg-karte--4 .s-weg-preis { background: var(--gruen); }
.s-weg-karte h3 { font-size: clamp(38px, 7.2cqi, 80px); line-height: .95; margin-bottom: 18px; overflow-wrap: normal; hyphens: manual; }
@media (max-width: 999px) { .s-weg-karte h3 { font-size: clamp(38px, 12cqi, 72px); } }
.s-weg-karte p:not(.s-weg-preis) { color: var(--leise); max-width: 36ch; }
.s-weg-karte .knopf { margin-top: 10px; }
.s-weg-karte--2 .knopf--hell { --hg: var(--weiss); --fg: var(--gruen-dunkel); }
.s-weg-bild { position: relative; z-index: 1; align-self: end; justify-self: center; width: auto; height: auto; max-height: calc(100% + 70px); max-width: 118%; margin-top: -70px; filter: drop-shadow(0 26px 24px rgba(0,0,0,.28)); transform: translateY(calc((1 - var(--sicht, 1)) * 40px)); }
/* Vier Stationen statt Fortschrittsbalken: Die aktuelle Karte leuchtet, erledigte Stationen sind gefüllt, ein Klick springt hin */
.s-weg-leiste { position: absolute; left: max(var(--rand), calc((100vw - var(--breite)) / 2)); right: max(var(--rand), calc((100vw - var(--breite)) / 2)); bottom: 26px; display: flex; justify-content: space-between; }
.s-weg-leiste::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 1px; background: rgba(246,239,226,.18); }
.s-weg-leiste button { --d: max(var(--q, 0) * 3 - var(--s), var(--s) - var(--q, 0) * 3); --an: clamp(0, (.5 - var(--d)) * 24, 1); --vorbei: clamp(0, (var(--q, 0) * 3 - var(--s) + .5) * 24, 1);
  position: relative; display: grid; justify-items: start; gap: 9px; padding: 0 0 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hell) calc(42% + var(--an) * 58%), transparent); transition: color .2s var(--ease); }
.s-weg-leiste button:nth-child(n+2):not(:last-child) { justify-items: center; }
.s-weg-leiste button:last-child { justify-items: end; }
.s-weg-leiste button::before { content: ""; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--gruen) calc(var(--vorbei) * 100%), rgba(246,239,226,.35)); background: color-mix(in srgb, var(--gruen) calc(var(--vorbei) * 100%), var(--nacht)); scale: calc(1 + var(--an) * .35); transition: scale .3s var(--ease); }
.s-weg-leiste button:hover { color: var(--hell); }
/* Ohne Querscrollen (Handy, Tablet hochkant, weniger Bewegung): Karten untereinander */
@media (max-width: 999px) {
  .s-weg { height: auto !important; padding-block: var(--abschnitt); }
  .s-weg-klebe { position: static; height: auto; overflow: visible; }
  .s-weg-spur { flex-direction: column; width: auto; transform: none !important; padding: 0 var(--rand); gap: 84px; }
  .s-weg-intro { width: auto; padding: 0; }
  .s-weg-tipp, .s-weg-leiste { display: none; }
  .s-weg-karte { width: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .s-weg-bild { grid-row: 1; max-height: 340px; max-width: 86%; margin-top: -64px; }
  .s-weg-inhalt { padding-top: 8px; }
  .s-weg-nr { position: absolute; top: -40px; right: 24px; font-size: 96px; }
}
.ohne-quer .s-weg { height: auto !important; padding-block: var(--abschnitt); }
.ohne-quer .s-weg-klebe { position: static; height: auto; overflow: visible; }
.ohne-quer .s-weg-spur { flex-wrap: wrap; width: auto; transform: none !important; padding: 0 var(--rand); row-gap: 96px; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; }
.ohne-quer .s-weg-intro { width: 100%; padding: 0; }
.ohne-quer .s-weg-tipp, .ohne-quer .s-weg-leiste { display: none; }
@media (min-width: 1000px) { .ohne-quer .s-weg-karte { width: calc(50% - 18px); min-height: 520px; } .ohne-quer .s-weg-karte .s-weg-bild { max-width: 100%; } }

/* ============ Läden ============ */
.s-laeden { padding-block: var(--abschnitt); background: var(--creme); }
/* ============ Hersteller ============ */
.s-hersteller { padding-block: var(--abschnitt); background: var(--nacht); color: var(--hell); }
.s-hersteller .s-kopf > p { color: var(--hell-2); }
.s-mehr { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
.s-hersteller .knopf--linie { --fuell: var(--hell); --fuell-text: var(--tinte); }

/* ============ Festival ============ */
.s-fest { position: relative; padding-block: clamp(110px, 13vw, 200px); color: var(--hell); background: #0E0A07; isolation: isolate; overflow: clip; }
.s-fest-film { position: absolute; inset: 0; z-index: -2; }
.s-fest-film video { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--p, 0) * .1)); }
.s-fest::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,10,7,.86) 0%, rgba(14,10,7,.55) 40%, rgba(14,10,7,.9) 100%), radial-gradient(80% 60% at 20% 30%, rgba(14,10,7,.2), rgba(14,10,7,.6)); }
.s-fest-innen { display: grid; gap: clamp(48px, 6vw, 88px); }
.s-fest-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: center; }
.s-fest-logo { width: clamp(150px, 17vw, 250px); height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.js .s-fest-logo[data-zeigen] { transform: scale(.7) rotate(-14deg); }
.js .s-fest-logo[data-zeigen].ist-da { transform: rotate(-4deg); transition-timing-function: var(--ease-feder); }
.s-fest h2 { font-size: clamp(44px, 6.2vw, 104px); line-height: .95; margin-bottom: 22px; max-width: 14ch; }
.s-fest .einleitung { color: var(--hell-2); max-width: 46ch; margin-bottom: 26px; }
.s-fest-hinweis { font-size: 14px; color: var(--hell-2); margin-top: 12px; }
.s-fest-hinweis a { color: var(--gruen-licht); }
.s-fest .knopf--linie { --fuell: var(--hell); --fuell-text: var(--tinte); }
@media (max-width: 760px) { .s-fest-kopf { grid-template-columns: minmax(0, 1fr); } .s-fest-logo { width: 150px; } }
.s-rekord { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); align-items: center; padding: clamp(26px, 3.4vw, 48px); border-radius: 26px; background: rgba(246,239,226,.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(246,239,226,.14); }
.s-rekord-logo { width: clamp(130px, 14vw, 210px); height: auto; transform: rotate(5deg); }
.s-rekord h3 { font-size: clamp(34px, 3.6vw, 58px); line-height: .9; margin-bottom: 14px; }
.s-rekord p { color: var(--hell-2); max-width: 54ch; }
.s-rekord-balken { position: relative; height: 54px; margin: 22px 0 6px; border-radius: 10px; background: rgba(246,239,226,.1); overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.s-rekord-balken span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap; }
.s-rekord-balken b { font-size: 26px; font-weight: 900; letter-spacing: 0; }
.s-rekord-balken .alt { left: 0; width: var(--w); background: rgba(246,239,226,.22); color: var(--weiss); transform-origin: left; }
.s-rekord-balken .neu { right: 0; color: var(--gruen-licht); }
.s-rekord-balken::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent var(--w, 31.7%), rgba(123,160,45,.0) var(--w, 31.7%), rgba(123,160,45,.55) 100%); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease) .4s; z-index: -1; }
.s-rekord.ist-da .s-rekord-balken::after { transform: scaleX(1); }
.s-rekord .countdown { margin: 20px 0 26px; }
@media (max-width: 760px) { .s-rekord { grid-template-columns: minmax(0, 1fr); } .s-rekord-logo { width: 130px; } .s-rekord-balken .alt span, .s-rekord-balken { font-size: 13px; } }
.s-quelle { position: absolute; right: var(--rand); bottom: 18px; margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }
.s-fest-trailer { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--rand); background: rgba(10,6,4,.92); }
.s-fest-trailer[hidden] { display: none; }
.s-fest-rahmen { width: min(1200px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.s-fest-rahmen iframe { width: 100%; height: 100%; border: 0; }
.s-fest-zu { position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--hell); color: var(--tinte); font-size: 30px; line-height: 1; cursor: pointer; }

/* ============ Community ============ */
.s-gemeinschaft { position: relative; padding-block: var(--abschnitt); background: var(--papier); overflow: clip; }
.s-gemeinschaft-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.s-gemeinschaft-karte { position: relative; z-index: 1; padding: clamp(32px, 4.6vw, 72px); padding-right: clamp(32px, 26vw, 420px); border-radius: 30px; background: var(--petrol); color: #F4EDE2; box-shadow: 0 40px 80px -50px rgba(35,70,70,.9); grid-column: 1 / -1; grid-row: 1; }
.s-gemeinschaft-karte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--koerner); opacity: .16; pointer-events: none; }
.s-gemeinschaft-logo { width: clamp(180px, 20vw, 260px); height: auto; margin: 0 0 24px -6px; }
.s-gemeinschaft h2 { font-size: clamp(42px, 5vw, 84px); line-height: .9; max-width: 13ch; margin-bottom: 22px; }
.s-gemeinschaft .einleitung { color: rgba(244,237,226,.86); max-width: 44ch; }
.s-gemeinschaft-liste { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 760px; }
.s-gemeinschaft-liste li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.4; color: rgba(244,237,226,.86); }
.s-gemeinschaft-liste li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.s-gemeinschaft-liste b { display: block; color: var(--weiss); }
.s-gemeinschaft .knopf--linie { --fuell: #F4EDE2; --fuell-text: var(--petrol-tief); }
.s-gemeinschaft-preis { margin: 18px 0 0; font-size: 14.5px; color: rgba(244,237,226,.72); }
.s-gemeinschaft-bild { position: relative; z-index: 2; grid-column: 2; grid-row: 1; width: clamp(240px, 26vw, 400px); height: auto; margin-right: clamp(16px, 3vw, 56px); margin-top: -120px; filter: drop-shadow(0 30px 30px rgba(0,0,0,.35)); pointer-events: none; }
@media (max-width: 900px) {
  .s-gemeinschaft-raster { grid-template-columns: minmax(0, 1fr); }
  .s-gemeinschaft-karte { padding-right: clamp(24px, 5vw, 40px); grid-row: 2; }
  .s-gemeinschaft-bild { grid-column: 1; grid-row: 1; justify-self: center; width: min(260px, 62vw); margin: 0 0 -70px; }
  .s-gemeinschaft-karte { padding-top: 90px; }
  .s-gemeinschaft-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Stimmen ============ */
.s-stimmen { position: relative; isolation: isolate; padding-block: var(--abschnitt); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); overflow: clip; }
@media (min-width: 900px) { .s-stimmen { background-image: url("../img/holz-bahn.webp"); } }
.s-stimmen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 40%, rgba(23,17,13,.25), rgba(15,10,7,.8)); }
.s-stimmen-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: clamp(40px, 5vw, 72px); }
.s-stimmen h2 { font-size: clamp(44px, 6vw, 100px); line-height: .9; color: var(--weiss); }
.s-google { display: inline-flex; align-items: center; gap: 18px; padding: 16px 22px 16px 18px; border-radius: 18px; background: var(--papier); color: var(--tinte); text-decoration: none; box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); transform: rotate(1.5deg); transition: transform .35s var(--ease-feder); }
.s-google:hover, .js .s-google[data-zeigen].ist-da:hover { transform: rotate(0) translateY(-3px); }
.s-google-zahl { display: grid; justify-items: center; gap: 2px; }
.s-google-zahl > b { --z-luft: .1em; font-family: var(--display); font-weight: 900; font-size: 54px; line-height: .9; color: var(--tinte); }
.s-google-sterne { position: relative; display: block; font-size: 18px; letter-spacing: 2px; color: rgba(30,23,18,.15); }
.s-google-sterne::before { content: "★★★★★"; }
.s-google-sterne i { position: absolute; inset: 0; overflow: hidden; font-style: normal; color: #F2B01E; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease) .5s; }
.s-google.ist-da .s-google-sterne i, .ohne-quer .s-google-sterne i { clip-path: inset(0 0 0 0); }
.s-google > span:last-child { display: grid; gap: 2px; font-size: 14.5px; color: var(--tinte-2); line-height: 1.35; }
.s-google > span:last-child b { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: .02em; color: var(--tinte); }
.s-stimmen-hinweis { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 13.5px; color: var(--hell-2); }

/* Pinnwand */
.pinnwand-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.pinnwand-filter button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(246,239,226,.1); color: var(--hell); font: 800 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.pinnwand-filter button:hover { background: rgba(246,239,226,.2); }
.pinnwand-filter button[aria-pressed="true"] { background: var(--gruen); color: var(--weiss); }
.pinnwand-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3vw, 44px); align-items: start; }
.pinnwand-spalte { display: grid; gap: clamp(30px, 3.4vw, 48px); --tempo: 0; transform: translate3d(0, calc((var(--p, .5) - .5) * var(--tempo) * 1px), 0); }
.pinnwand-spalte--1 { --tempo: -70; padding-top: 30px; }
.pinnwand-spalte--2 { --tempo: 50; }
.pinnwand-spalte--3 { --tempo: -35; padding-top: 70px; }
.notiz { position: relative; margin: 0; padding: 34px 28px 24px; border-radius: 4px 4px 14px 4px; background: linear-gradient(180deg, #FFFDF7, #F6EEDD); color: var(--tinte); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 3px rgba(0,0,0,.25), 0 26px 40px -24px rgba(0,0,0,.85); transform-origin: 50% 8px; }
.notiz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--koerner); opacity: .22; pointer-events: none; }
.js .notiz[data-zeigen] { opacity: 0; transform: translateY(-46px) rotate(calc(var(--dreh) + 9deg)) scale(.96); transition: opacity .6s var(--ease), transform .9s var(--ease-feder), box-shadow .35s var(--ease); transition-delay: var(--verzug, 0ms); }
.js .notiz[data-zeigen].ist-da { opacity: 1; transform: rotate(var(--dreh)); }
.js .notiz[data-zeigen].ist-da:hover, .notiz:hover { transform: rotate(0) translateY(-6px) scale(1.02); transition-delay: 0ms; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 8px rgba(0,0,0,.25), 0 40px 60px -26px rgba(0,0,0,.9); z-index: 2; }
.notiz-pin { position: absolute; left: 50%; top: -10px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D6EBA8 0 12%, var(--gruen-licht) 22%, var(--gruen) 55%, var(--gruen-dunkel) 100%); box-shadow: 0 6px 8px -2px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.4) inset; transform: scale(0); transition: transform .5s var(--ease-feder); transition-delay: calc(var(--verzug, 0ms) + .45s); }
.notiz-pin::after { content: ""; position: absolute; left: 50%; top: 60%; width: 2px; height: 10px; margin-left: -1px; background: linear-gradient(#9A9A9A, #5C5C5C); transform: rotate(18deg); transform-origin: top; opacity: .7; }
.notiz.ist-da .notiz-pin, .ohne-quer .notiz-pin { transform: scale(1); }
.notiz:hover .notiz-pin { transform: scale(1.12) rotate(-8deg); transition-delay: 0ms; }
.notiz-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.notiz-sterne { color: #E9A815; font-size: 19px; letter-spacing: 2px; }
.notiz-g { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.12); font: 900 15px/1 var(--text); color: #4285F4; }
.notiz blockquote { margin: 0; }
.notiz blockquote p { margin: 0; font-size: 17.5px; line-height: 1.55; color: var(--tinte); }
.notiz.ist-lang:not(.ist-offen) blockquote p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.notiz-mehr { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--gruen-dunkel); font: 800 14px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.notiz-mehr:hover { color: var(--tinte); }
.notiz figcaption { display: grid; gap: 2px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(30,23,18,.2); }
.notiz figcaption b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.notiz figcaption span { font-size: 13.5px; color: var(--tinte-2); }
.notiz[hidden] { display: none; }
.pinnwand:not(.ist-offen) .notiz--spaeter { display: none; }
.pinnwand-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: clamp(40px, 5vw, 64px); }
.pinnwand-fuss p { margin: 0; font-size: 15px; color: var(--hell-2); }
.pinnwand-fuss a { color: var(--hell); font-weight: 700; }
.pinnwand-fuss .knopf small { font-size: .8em; opacity: .75; }
.pinnwand.ist-offen [data-pinnwand-mehr] { display: none; }
@media (max-width: 900px) {
  .pinnwand-spalten { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px var(--rand) 34px; margin-inline: calc(var(--rand) * -1); scrollbar-width: none; }
  .pinnwand-spalten::-webkit-scrollbar { display: none; }
  .pinnwand-spalte { display: contents; }
  .notiz { flex: none; width: min(82vw, 340px); scroll-snap-align: center; }
}

/* ============ Online lernen ============ */
.s-online { padding-block: var(--abschnitt); background: var(--papier); }
.s-online-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(36px, 5vw, 88px); align-items: center; }
/* Quetschn-Bild: Logo als Sonne im Hintergrund, das Lehrer-Team tanzt davor */
.qa-bild { margin: 0; display: grid; gap: 14px; }
.qa-buehne { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 28px; background: radial-gradient(48% 40% at 50% 31%, rgba(246,224,120,.35), transparent 70%), radial-gradient(70% 62% at 50% 34%, #93BA42 0%, #6E9226 38%, #4E6A17 72%, #3B5211 100%); box-shadow: 0 2px 4px rgba(30,23,18,.1), 0 50px 90px -50px rgba(30,23,18,.85); }
.qa-buehne::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: var(--koerner); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
/* Quetschn: Erst steht das Logo allein auf Grün. Beim Scrollen öffnet sich aus ihm ein Kreis zum Lehrerfoto,
   das Logo wandert dabei als Plakette nach oben. --p kommt aus start.js ([data-szene]), ohne Script gilt der Endzustand. */
.qa-buehne { --e1: clamp(0, (var(--p, 1) - .3) / .24, 1); --e2: calc(var(--e1) * var(--e1) * (3 - 2 * var(--e1))); }
.ohne-quer .qa-buehne { --e1: 1; }
.qa-ringe i { position: absolute; z-index: -1; left: 50%; top: 46%; width: calc(48% + var(--n) * 15%); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(246,239,226,calc(.22 - var(--n) * .05)); translate: -50% -50%; scale: calc(1 + .5 * var(--e2)); opacity: calc(1 - var(--e2)); }
.qa-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(calc(3% + var(--e2) * 78%) at 50% 46%); scale: calc(1.14 - .14 * var(--e2)); }
.qa-glanz { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 8%, rgba(255,255,255,.18), transparent 70%), linear-gradient(180deg, transparent 70%, rgba(20,25,10,.35)); opacity: var(--e2); }
.qa-logo { position: absolute; z-index: 1; left: 50%; top: 46%; width: 44%; height: auto; translate: -50% calc(-50% - 74% * var(--e2)); scale: calc(1 - .48 * var(--e2)); rotate: calc(-8deg * var(--e2)); filter: drop-shadow(0 calc(10px + 14px * var(--e2)) calc(20px + 10px * var(--e2)) rgba(10,15,5,.5)); }
.s-online h2 { font-size: clamp(44px, 5.4vw, 92px); line-height: .9; margin-bottom: 22px; }
.s-online-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.s-online-liste li { padding: 12px 16px; border-radius: 12px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.06); font-size: 16.5px; color: var(--tinte-2); }
.s-online-liste b { color: var(--tinte); margin-right: 6px; }
@media (max-width: 900px) { .s-online-raster { grid-template-columns: minmax(0, 1fr); } }

/* ============ Termine als Tickets ============ */
.s-termine { padding-block: var(--abschnitt); background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; color: var(--hell); position: relative; isolation: isolate; }
@media (min-width: 900px) { .s-termine { background-image: url("../img/holz-bahn.webp"); } }
.s-termine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,17,13,.7), rgba(23,17,13,.86)); }
.s-termine .s-kopf > p { color: var(--hell-2); }
.s-termine .textlink { color: var(--gruen-licht); }
/* ============ Neuigkeiten ============ */
.s-news { padding-block: var(--abschnitt); background: var(--papier); }

/* ============ Weniger Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
  .planet a { animation: none; }
  .s-held-text, .s-held-film video, .s-fest-film video { transform: none !important; }
  .js .planet, .js .s-kosmos-mitte img, .js .landkarte .lk-pin-innen, .js .landkarte .lk-ort, .js .landkarte .lk-schilder g { opacity: 1; transform: none; }
  .js .landkarte .lk-maske-kreis { transform: none; }
}

/* ============ Spiel mal: Steirische G-C-F-B ============ */
.s-spiel { position: relative; isolation: isolate; padding-block: var(--abschnitt); background: var(--papier); }
.s-spiel::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--koerner); opacity: .16; pointer-events: none; }
.s-spiel-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 56px clamp(40px, 5vw, 96px); align-items: center; }
.s-spiel-text h2 { font-size: clamp(46px, 5.4vw, 92px); line-height: .9; margin-bottom: 28px; }
.s-spiel-text p:not(.etikett) { max-width: 44ch; color: var(--tinte-2); }
.s-spiel-text .einleitung { color: var(--tinte); margin-bottom: 18px; }
.st-legende { display: grid; gap: 12px; margin: 30px 0 36px; padding: 0; list-style: none; font-size: 16.5px; line-height: 1.4; color: var(--tinte-2); }
.st-legende li { display: flex; align-items: center; gap: 14px; }
.st-l { flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.5) 0 7%, rgba(255,255,255,0) 30%), url("../img/steirische/perle.webp") 50% 50% / 100% 100%, #ECE6DC; box-shadow: inset 0 -1.5px 2px rgba(70,48,28,.38), 0 1.5px 1.5px rgba(12,5,1,.55), 0 0 0 2px rgba(20,8,2,.85); }
.st-l--gleich { box-shadow: inset 0 0 0 2.5px var(--gruen), inset 0 -1.5px 2px rgba(70,48,28,.38), 0 1.5px 1.5px rgba(12,5,1,.55), 0 0 0 2px rgba(20,8,2,.85); }
.st-l--halb { background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.22) 0 7%, rgba(255,255,255,0) 30%), url("../img/steirische/perle-schwarz.webp") 50% 50% / 100% 100%, #15110E; }

.s-spiel-buehne { position: relative; padding: 14px clamp(12px, 2.2vw, 28px) 30px; border-radius: 28px; background: radial-gradient(120% 70% at 50% 46%, #FFFCF6 0, var(--creme) 78%); box-shadow: inset 0 0 0 1px var(--linie), var(--schatten); }
.st-steuer { position: sticky; top: calc(var(--kopf-h) + 10px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px; border-radius: 999px; background: rgba(30,23,18,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--hell); box-shadow: 0 18px 30px -18px rgba(23,17,13,.7); }
.st-balg-wahl { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; border-radius: 999px; background: rgba(246,239,226,.08); }
.st-balg-wahl::before { content: ""; position: absolute; inset: 0 50% 0 0; border-radius: 999px; background: var(--gruen); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(123,160,45,.8); transition: transform .35s var(--ease); }
.s-spiel[data-balg="zug"] .st-balg-wahl::before { transform: translateX(100%); }
.st-balg-wahl button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--hell-2); font: 800 17px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .25s var(--ease); }
.st-balg-wahl button[aria-pressed="true"], .st-balg-wahl button:hover { color: var(--weiss); }
.st-balg-wahl button:focus-visible { outline: 2px solid var(--gruen-licht); outline-offset: 2px; }
.st-balg-wahl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-anzeige { flex: 1; min-width: 0; display: grid; justify-items: end; gap: 3px; padding-right: 16px; text-align: right; }
.st-a-wo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--hell-2); }
.st-a-ton { white-space: nowrap; font: 900 26px/1 var(--display); letter-spacing: .02em; color: var(--weiss); }
.st-a-ton small { margin-left: 7px; font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--gruen-licht); }

.st-vor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 16px; }
.st-vor-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: var(--gruen-tief); color: var(--weiss); font: 800 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
.st-vor-knopf:hover { background: var(--gruen-dunkel); }
.st-vor-knopf:active { transform: scale(.97); }
.st-vor-knopf:focus-visible { outline: 3px solid var(--gruen-licht); outline-offset: 2px; }
.st-vor-knopf svg { width: 18px; height: 18px; fill: currentColor; }
.st-vor-knopf--linie { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.st-vor-knopf--linie:hover { background: var(--tinte); color: var(--papier); }
.st-vor-knopf[aria-pressed="true"] svg { display: none; }
.st-vor-knopf[aria-pressed="true"]::before { content: ""; width: 12px; height: 12px; margin: 0 3px; border-radius: 2px; background: currentColor; }
.st-zeile { display: grid; min-height: 30px; margin: 12px 0 0; text-align: center; }
.st-tipp, .st-lied { grid-area: 1 / 1; align-self: center; }
.st-tipp { font-size: 14px; color: var(--tinte-2); }
.st-tipp-finger { display: none; }
@media (hover: none), (pointer: coarse) { .st-tipp-maus { display: none; } .st-tipp-finger { display: inline; } }
.ist-vorspiel .st-tipp { visibility: hidden; }
.st-lied { font: 700 clamp(19px, 1.6vw, 23px)/1.3 var(--display); letter-spacing: .02em; color: rgba(87,74,63,.5); }
.st-lied span { transition: color .12s; }
.st-lied span.ist-jetzt { color: var(--gruen-tief); }
.st-lied--weit span { margin: 0 .3em; }

/* Das Instrument: eine vierreihige Steirische von vorne, in Spielhaltung.
   Links das Griffbrett mit Perlmuttknöpfen, dann Verdeckleiste, Diskantkorpus und Balgrahmen,
   in der Mitte der Balg, rechts Balgrahmen, Basskorpus mit Trichterbässen, Bassriemen.
   Holz, Stahl, Perlmutt und Bassringe kommen aus Herstellerfotos (werkzeuge/steirische_teile.py).
   Alles rechnet in --u: 1px, solange die Harmonika in die Bühne passt, sonst entsprechend kleiner.
   Die Griffbrett-Zahlen (--p, --sp, --d, Brettbild) müssen zum Werkzeug passen. */
.s-spiel-buehne { container-type: inline-size; }
.st-instrument {
  --u: 1px;
  --p: calc(42 * var(--u)); --sp: calc(37 * var(--u)); --d: calc(33 * var(--u));
  --pb: calc(60 * var(--u)); --sb: calc(50 * var(--u)); --dg: calc(46 * var(--u)); --da: calc(36 * var(--u));
  --h: calc(675 * var(--u)); --feld-x: calc(22 * var(--u)); --feld-y: calc(69 * var(--u)); --reihe-y: calc(-74 * var(--u));
  --brett: url("../img/steirische/griffbrett-gross.webp");
  --brett-x: calc(-36 * var(--u)); --brett-y: calc(-63 * var(--u)); --brett-b: calc(220 * var(--u)); --brett-h: calc(663 * var(--u));
  --vx: calc(188 * var(--u)); --vb: calc(32 * var(--u)); --kb: calc(34 * var(--u)); --rb: calc(16 * var(--u)); --dw: calc(270 * var(--u));
  --bw: calc(130 * var(--u)); --falten: 12; --auf: .5;
  --bass-w: calc(164 * var(--u)); --bp: calc(136 * var(--u)); --eb: calc(12 * var(--u));
  --bfeld-x: calc(36 * var(--u)); --bfeld-y: calc(74.5 * var(--u));
  --holz: url("../img/steirische/holz.webp"); --holz-b: calc(287 * var(--u));
  --perle: url("../img/steirische/perle.webp");
  position: relative; isolation: isolate; display: flex; justify-content: center; align-items: flex-start;
  width: max-content; max-width: 100%; margin: 44px auto 74px;
}
@supports (width: 1cqw) { .st-instrument { --u: min(1px, calc(100cqw / 584)); } }
.s-spiel[data-balg="zug"] .st-instrument { --auf: 1; }
.st-instrument::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: calc(-16 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, rgba(46,30,16,.4), rgba(46,30,16,0)); pointer-events: none; }

.st-diskant, .st-bass { position: relative; z-index: 2; height: var(--h); transition: transform .45s var(--ease); }
.st-diskant { width: var(--dw); transform: translateX(calc((1 - var(--auf)) * var(--bw) / 2)); }
.st-bass { width: var(--bass-w); transform: translateX(calc((1 - var(--auf)) * var(--bw) / -2)); }

/* Gehäuseteile: Verdeckleiste (Stahl mit Gitter), Korpus (Nussfurnier), Balgrahmen (Stahl mit Nieten) */
.st-verdeck, .st-korpus, .st-rahmen, .st-basskorpus, .st-bassende { position: absolute; top: 0; height: 100%; pointer-events: none; }
.st-verdeck { left: var(--vx); width: var(--vb); border-radius: calc(12 * var(--u)) 0 0 calc(12 * var(--u));
  background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.04) 18%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32)),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,0) 8%, rgba(0,0,0,0) 92%, rgba(0,0,0,.3)),
    url("../img/steirische/band-verdeck.webp") 50% 0 / 100% auto repeat-y, #8B8E93;
  box-shadow: inset 0 0 0 1px rgba(28,28,30,.45), 0 calc(24 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(34,20,8,.6); }
.st-korpus, .st-basskorpus {
  background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,0) 14%, rgba(255,232,200,.1) 52%, rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(255,236,206,.2), rgba(255,236,206,0) 10%, rgba(0,0,0,0) 84%, rgba(0,0,0,.34)),
    var(--holz) calc(-40 * var(--u)) 0 / var(--holz-b) auto, #5A3420;
  box-shadow: inset 0 1.5px 0 rgba(255,236,206,.4), inset 0 -2px 0 rgba(0,0,0,.4), 0 calc(24 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(34,20,8,.6); }
.st-korpus { left: calc(var(--vx) + var(--vb)); width: var(--kb); }
.st-rahmen { width: var(--rb); background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.4)), url("../img/steirische/band-rahmen.webp") 50% 0 / 100% auto repeat-y, #55585C;
  box-shadow: inset 0 0 0 1px rgba(20,20,22,.5), 0 calc(24 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(34,20,8,.6); }
.st-diskant .st-rahmen { left: calc(var(--vx) + var(--vb) + var(--kb)); }
.st-bass .st-rahmen { left: 0; }
.st-basskorpus { left: var(--rb); width: var(--bp); background-position: 0 0, 0 0, calc(-150 * var(--u)) calc(-260 * var(--u)), 0 0; }
.st-bassende { left: calc(var(--rb) + var(--bp)); width: var(--eb); border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,226,186,.14) 35%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.55)), var(--holz) calc(-200 * var(--u)) 0 / var(--holz-b) auto, #4A2A18;
  box-shadow: inset 0 1.5px 0 rgba(255,236,206,.3), 0 calc(24 * var(--u)) calc(30 * var(--u)) calc(-20 * var(--u)) rgba(34,20,8,.6); }

/* Griffbrett: fertiges Bild aus dem Werkzeug, die Knöpfe sitzen genau in den Bohrungen */
.st-griff { position: absolute; z-index: 3; isolation: isolate; left: var(--feld-x); top: var(--feld-y); width: calc(3 * var(--sp) + var(--d)); height: calc(12 * var(--p) + var(--d)); }
.st-griff::before { content: ""; position: absolute; z-index: -1; left: var(--brett-x); top: var(--brett-y); width: var(--brett-b); height: var(--brett-h); background: var(--brett) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.st-bassfeld { position: absolute; z-index: 3; left: var(--bfeld-x); top: var(--bfeld-y); width: calc(var(--sb) + var(--dg)); height: calc(8 * var(--pb) + var(--dg)); }
.st-reihe { position: absolute; left: calc(var(--r) * var(--sp)); top: var(--reihe-y); width: var(--d); text-align: center; font: 800 13px/1 var(--display); letter-spacing: .1em; color: var(--tinte-2); pointer-events: none; }
.st-titel { position: absolute; top: calc(100% + 18px); transform: translateX(-50%); text-align: center; white-space: nowrap; font: 600 14px/1.2 var(--text); color: var(--tinte-2); }
.st-titel b { display: block; font: 800 15px/1.1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); }
.st-diskant .st-titel { left: calc(var(--feld-x) + (3 * var(--sp) + var(--d)) / 2); }
.st-bass .st-titel { left: calc(var(--rb) + var(--bp) / 2); }

/* Balg: Falten aus grünem Balgstoff mit schwarzem Balgband, Balgpapier und Balgecken an jeder Falte */
.st-balg { position: relative; z-index: 1; width: var(--bw); height: var(--h); }
.st-balg i { position: absolute; top: calc(3 * var(--u)); bottom: calc(3 * var(--u)); left: 50%; width: calc(var(--bw) * var(--auf)); translate: -50% 0; transition: width .45s var(--ease);
  background: url("../img/steirische/balg.webp") 0 0 / calc(100% / var(--falten)) 100% repeat-x, #1A2A14;
  box-shadow: inset calc(9 * var(--u)) 0 calc(8 * var(--u)) calc(-5 * var(--u)) rgba(0,0,0,.7), inset calc(-9 * var(--u)) 0 calc(8 * var(--u)) calc(-5 * var(--u)) rgba(0,0,0,.7), 0 calc(24 * var(--u)) calc(30 * var(--u)) calc(-22 * var(--u)) rgba(0,0,0,.6); }

/* Beschläge: Tragriemen-Ösen, Luftknopf, Bassriemen, Füße */
.st-oese { position: absolute; z-index: 4; top: calc(-11 * var(--u)); width: calc(18 * var(--u)); height: calc(14 * var(--u)); border: calc(3 * var(--u)) solid #C9C4BA; border-bottom: 0; border-radius: calc(9 * var(--u)) calc(9 * var(--u)) 0 0; box-shadow: inset 0 1px 0 rgba(0,0,0,.25), 0 -1px 0 rgba(255,255,255,.6); pointer-events: none; }
.st-oese::after { content: ""; position: absolute; left: calc(-7 * var(--u)); right: calc(-7 * var(--u)); bottom: calc(-6 * var(--u)); height: calc(7 * var(--u)); border-radius: 2px; background: linear-gradient(180deg, #ECE8E0, #A8A39A 60%, #6F6A62); box-shadow: 0 1px 2px rgba(0,0,0,.45); }
.st-diskant .st-oese { left: calc(var(--vx) + var(--vb) + var(--kb) / 2 - 9 * var(--u)); }
.st-bass .st-oese { left: calc(var(--rb) + 22 * var(--u)); }
.st-luft { position: absolute; z-index: 4; top: calc(22 * var(--u)); left: calc(var(--rb) + var(--bp) / 2); width: calc(24 * var(--u)); height: calc(24 * var(--u)); translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #FFFFFF 0 8%, #E4E0D8 22%, #A9A49B 58%, #6B665E); box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 calc(3 * var(--u)) #2A1609, 0 0 0 calc(4.5 * var(--u)) rgba(200,196,188,.6), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.45); pointer-events: none; }
.st-bassriemen { position: absolute; z-index: 4; top: 9%; bottom: 9%; right: calc(-9 * var(--u)); width: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); background: radial-gradient(circle at 50% calc(9 * var(--u)), #F4F1EA 0 1.5px, #9A958C 2.6px, rgba(0,0,0,.4) 3.4px, transparent 4px), radial-gradient(circle at 50% calc(100% - 9 * var(--u)), #F4F1EA 0 1.5px, #9A958C 2.6px, rgba(0,0,0,.4) 3.4px, transparent 4px), linear-gradient(90deg, #3E2512, #6E4527 30%, #7E5130 55%, #4A2C16); box-shadow: inset 0 0 0 1px rgba(20,10,4,.4), calc(-3 * var(--u)) 0 calc(6 * var(--u)) rgba(0,0,0,.35), 2px calc(8 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.3); pointer-events: none; }
.st-bassriemen::before { content: ""; position: absolute; inset: calc(6 * var(--u)) calc(3 * var(--u)); border-left: 1px dashed rgba(240,210,160,.5); border-right: 1px dashed rgba(240,210,160,.5); }
.st-bassriemen::after { content: ""; position: absolute; left: calc(-3 * var(--u)); right: calc(-3 * var(--u)); top: 18%; height: calc(18 * var(--u)); border: calc(3 * var(--u)) solid #D3CEC4; border-radius: calc(4 * var(--u)); background: linear-gradient(90deg, transparent 44%, #D3CEC4 44% 56%, transparent 56%); box-shadow: 0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(0,0,0,.2); }
.st-fuesse { position: absolute; bottom: calc(-6 * var(--u)); height: calc(7 * var(--u)); pointer-events: none; background: radial-gradient(closest-side, #1A0F08 96%, transparent) 0 0 / calc(20 * var(--u)) calc(14 * var(--u)) no-repeat, radial-gradient(closest-side, #1A0F08 96%, transparent) 100% 0 / calc(20 * var(--u)) calc(14 * var(--u)) no-repeat; }
.st-diskant .st-fuesse { left: calc(var(--vx) + 4 * var(--u)); right: calc(2 * var(--u)); }
.st-bass .st-fuesse { left: calc(2 * var(--u)); right: calc(4 * var(--u)); }

/* Knöpfe: Perlmuttkappen aus dem Herstellerfoto, jede ein Stück gedreht, damit kein Knopf dem anderen gleicht */
.st-k, .st-b { position: absolute; isolation: isolate; display: grid; place-content: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #2F251C; background: none;
  box-shadow: 0 calc(1.5 * var(--u)) calc(1.5 * var(--u)) rgba(12,5,1,.6), 0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(12,5,1,.32);
  transition: translate .07s ease, box-shadow .07s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.st-k::before, .st-b::before { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: 50%; background: var(--perle) 50% 50% / 100% 100% no-repeat, #ECE6DC; rotate: var(--dreh, 0deg); }
.st-k::after, .st-b::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.5) 0 7%, rgba(255,255,255,0) 30%), radial-gradient(closest-side, rgba(0,0,0,0) 70%, rgba(70,48,28,.3));
  box-shadow: inset 0 calc(-1.5 * var(--u)) calc(2 * var(--u)) rgba(70,48,28,.38), inset 0 1px 1px rgba(255,255,255,.85); }
.st-k { left: calc(var(--r) * var(--sp)); top: calc((var(--k) + var(--r) * .5) * var(--p)); width: var(--d); height: var(--d); }
.st-b { --g: var(--da); width: var(--g); height: var(--g); left: calc((1 - var(--c)) * var(--sb) + (var(--dg) - var(--g)) / 2); top: calc((var(--k) + var(--c) * .5) * var(--pb) + (var(--dg) - var(--g)) / 2); }
.st-b--grund { --g: var(--dg); background: url("../img/steirische/bassring.webp") 50% 50% / 100% 100% no-repeat; box-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(12,5,1,.55), 0 calc(5 * var(--u)) calc(9 * var(--u)) rgba(12,5,1,.32); }
.st-b--grund::before, .st-b--grund::after { inset: 20%; }
.st-k span, .st-b b { position: relative; display: block; font: 800 calc(var(--d) * .42)/1 var(--display); letter-spacing: .01em; pointer-events: none; }
.st-b small { position: relative; display: block; margin-top: 1px; font: 700 calc(8.5 * var(--u))/1 var(--display); letter-spacing: .06em; text-transform: uppercase; opacity: .75; pointer-events: none; }
.st-b--grund b { font-size: calc(var(--d) * .38); }
.st-k--halb { color: #F4EEE4; }
.st-k--halb::before { background-image: url("../img/steirische/perle-schwarz.webp"); background-color: #15110E; }
.st-k--halb::after { background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.22) 0 7%, rgba(255,255,255,0) 30%); box-shadow: inset 0 1px 1px rgba(255,255,255,.28); }
.st-k--gleich::after { box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--gruen), inset 0 calc(-1.5 * var(--u)) calc(2 * var(--u)) rgba(70,48,28,.38), inset 0 1px 1px rgba(255,255,255,.85); }
.st-k:focus-visible, .st-b:focus-visible { outline: 3px solid var(--gruen-licht); outline-offset: 3px; }
.st-k:hover::after, .st-b:hover::after { background-color: rgba(255,255,255,.1); }
.st-k.ist-an, .st-b.ist-an, .st-k.ist-zeig, .st-b.ist-zeig { translate: 0 calc(1.5 * var(--u)); color: var(--tinte); box-shadow: 0 0 0 calc(2 * var(--u)) rgba(123,160,45,.95), 0 0 calc(20 * var(--u)) calc(4 * var(--u)) rgba(169,199,112,.7); }
.st-k.ist-an::after, .st-b.ist-an::after, .st-k.ist-zeig::after, .st-b.ist-zeig::after { background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.55) 0 8%, rgba(255,255,255,0) 34%), rgba(150,190,80,.72); box-shadow: inset 0 calc(-1.5 * var(--u)) calc(2 * var(--u)) rgba(40,60,10,.4); }
.st-instrument:not(.ist-da) .st-k, .st-instrument:not(.ist-da) .st-b { opacity: 0; }
.st-instrument.ist-da .st-k, .st-instrument.ist-da .st-b { animation: st-auf .6s var(--ease-feder) backwards; animation-delay: calc(var(--i) * 11ms); }
@keyframes st-auf { from { opacity: 0; scale: .35; } }
.st-kipp .st-k span, .st-kipp .st-b b, .st-kipp .st-b small { animation: st-kipp .3s var(--ease); }
@keyframes st-kipp { from { opacity: 0; transform: translateY(-45%) rotateX(80deg); } }
.st-unter { max-width: 52ch; margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.5; color: var(--tinte-2); }
@media (prefers-reduced-motion: reduce) {
  .st-instrument.ist-da .st-k, .st-instrument.ist-da .st-b, .st-kipp .st-k span, .st-kipp .st-b b, .st-kipp .st-b small { animation: none; }
  .st-bass, .st-diskant, .st-balg i, .st-balg-wahl::before { transition: none; }
}
@media (max-width: 1180px) {
  .s-spiel-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .s-spiel-buehne { padding-inline: 14px; }
}
@media (max-width: 980px) {
  .s-spiel-raster { grid-template-columns: minmax(0, 1fr); }
  .s-spiel-buehne { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 560px) {
  /* Am Handy die schmale Fassung: kleineres Griffbrett-Bild, schmalere Leisten und Balg, Knöpfe so groß wie möglich */
  .st-instrument {
    --p: calc(36 * var(--u)); --sp: calc(31 * var(--u)); --d: calc(28 * var(--u));
    --pb: calc(52 * var(--u)); --sb: calc(40 * var(--u)); --dg: calc(38 * var(--u)); --da: calc(30 * var(--u));
    --h: calc(556 * var(--u)); --feld-x: calc(15 * var(--u)); --feld-y: calc(48 * var(--u)); --reihe-y: calc(-52 * var(--u));
    --brett: url("../img/steirische/griffbrett-klein.webp");
    --brett-x: calc(-29 * var(--u)); --brett-y: calc(-48 * var(--u)); --brett-b: calc(182 * var(--u)); --brett-h: calc(556 * var(--u));
    --vx: calc(152 * var(--u)); --vb: calc(14 * var(--u)); --kb: calc(10 * var(--u)); --rb: calc(6 * var(--u)); --dw: calc(182 * var(--u));
    --bw: calc(56 * var(--u)); --falten: 8;
    --bass-w: calc(106 * var(--u)); --bp: calc(94 * var(--u)); --eb: calc(6 * var(--u));
    --bfeld-x: calc(14 * var(--u)); --bfeld-y: calc(51 * var(--u));
    margin-top: 34px; }
  @supports (width: 1cqw) { .st-instrument { --u: min(1px, calc(100cqw / 354)); } }
  .st-reihe { font-size: 12px; }
  .st-luft { top: calc(16 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .st-bassriemen { right: calc(-5 * var(--u)); width: calc(11 * var(--u)); }
  .st-bassriemen::after { height: calc(11 * var(--u)); border-width: 2px; }
  .st-bass .st-oese { left: calc(var(--rb) + 12 * var(--u)); }
  .st-b small { font-size: calc(7.5 * var(--u)); }
  .s-spiel-buehne { padding-inline: 10px; border-radius: 22px; }
  .st-steuer { gap: 8px; padding: 6px; }
  .st-balg-wahl button { gap: 6px; min-height: 44px; padding: 0 12px; font-size: 15px; }
  .st-balg-wahl svg { width: 16px; height: 16px; }
  .st-anzeige { padding-right: 10px; }
  .st-a-wo { font-size: 11px; letter-spacing: .08em; }
  .st-a-ton { font-size: 22px; }
  .st-a-ton small { font-size: 15px; }
  .st-titel { font-size: 13px; }
  .st-titel b { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .st-balg-wahl button { padding: 0 10px; font-size: 14px; }
  .st-balg-wahl svg { display: none; }
}
.s-held-fakten { --z-verzug: 700ms; }

/* Dunkle Startseiten-Flächen: dunkles Holz statt Schwarz */
.s-weg, .s-hersteller { isolation: isolate; background: var(--nacht) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto repeat-y; }
.s-hersteller { position: relative; }
.s-weg::before, .s-hersteller::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(18,13,10,.86), rgba(18,13,10,.8) 50%, rgba(18,13,10,.88)); }

/* Läden auf der Startseite: Reiter statt Kartenstapel */
.laden-reiter { display: flex; gap: 6px; padding: 6px; margin-bottom: 14px; border-radius: 999px; background: var(--weiss); box-shadow: 0 0 0 1px rgba(30,23,18,.08); }
.laden-reiter button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.laden-reiter button span { font-size: 14px; color: var(--gruen-dunkel); }
.laden-reiter button[aria-selected="true"] { background: var(--gruen-tief); color: var(--weiss); }
.laden-reiter button[aria-selected="true"] span { color: var(--gruen-licht); }
.laden-reiter button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.ist-reiter .s-laeden-liste .ladenkarte { position: relative !important; top: auto !important; margin-bottom: 0 !important; transform: none !important; }
.ist-reiter .s-laeden-liste .ladenkarte::after { display: none; }
.ist-reiter .ladenkarte:not(.ist-aktiv) { display: none; }
.ist-reiter .ladenkarte.ist-aktiv { box-shadow: 0 0 0 1px rgba(30,23,18,.06), 0 24px 50px -36px rgba(30,23,18,.55); animation: karte-rein .45s var(--ease); }
@keyframes karte-rein { from { opacity: 0; transform: translateY(10px); } }
.js .ist-reiter .ladenkarte[data-zeigen] { opacity: 1; }
.laden-reiter { display: none; }
.ist-reiter .laden-reiter { display: flex; }
@media (max-width: 480px) { .laden-reiter button { font-size: 15px; padding: 0 8px; gap: 4px; } .laden-reiter button span { display: none; } }

/* Stimmen: ein großes Leitzitat vor der Pinnwand */
.leitzitat { margin: clamp(10px, 2vw, 24px) auto clamp(40px, 6vw, 72px); max-width: 980px; text-align: center; }
.leitzitat blockquote { margin: 0; }
.leitzitat p { position: relative; margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 6.4vw, 92px); line-height: .92; letter-spacing: -.005em; color: var(--hell); text-wrap: balance; }
.leitzitat-z { position: absolute; left: -.08em; top: -.55em; font-size: 2.2em; line-height: 1; color: var(--gruen); opacity: .9; }
.leitzitat figcaption { margin-top: 18px; font-size: 17px; color: var(--hell-2); }
.leitzitat figcaption b { color: var(--hell); }
@media (max-width: 700px) { .leitzitat-z { position: static; display: block; height: .45em; } }

/* Community sitzt jetzt im Block „Online lernen“, auf dunklem Holz statt Petrol */
.s-online .s-gemeinschaft { padding: 0; margin-top: clamp(80px, 10vw, 150px); background: none; overflow: visible; }
.s-online .s-gemeinschaft-karte { background: var(--holz-tief) url("../img/holz-bahn-klein.webp") center top / max(100%, 1100px) auto; isolation: isolate; }
.s-online .s-gemeinschaft-karte::before { background: linear-gradient(160deg, rgba(23,17,13,.62), rgba(23,17,13,.86)); opacity: 1; z-index: -1; }
.s-gemeinschaft-titel { font-size: clamp(38px, 4.4vw, 72px); line-height: .9; max-width: 13ch; margin: 0 0 22px; color: var(--weiss); }
.s-online .s-gemeinschaft-liste li::before { background-color: var(--gruen); }
.s-online .s-gemeinschaft .knopf--linie { --fuell: var(--hell); --fuell-text: var(--tinte); }
.s-online .s-gemeinschaft-bild { filter: drop-shadow(0 30px 40px rgba(10,6,4,.45)); }
.s-weg .zeile, .s-hersteller .zeile, .s-stimmen .zeile, .s-fest .zeile { color: var(--gruen-licht); }

/* Kosmos am Handy: die Welt um mich als Aufkleber-Band zum Wischen statt Kachelraster */
@media (max-width: 700px) {
  .s-kosmos-planeten { display: flex; gap: 14px; width: calc(100% + 2 * var(--rand)); max-width: none; margin-inline: calc(-1 * var(--rand)); padding: 22px var(--rand) 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .s-kosmos-planeten::-webkit-scrollbar { display: none; }
  .planet, .js .planet { flex: 0 0 min(46%, 190px); scroll-snap-align: start; }
  .planet a { min-height: 168px; }
  .s-kosmos-buehne::after { content: "Wisch für mehr →"; justify-self: end; margin-top: -18px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-dunkel); }
}
/* Knöpfe in den Weg-Karten: einzeilig, notfalls etwas kleiner */
@media (max-width: 1280px) { .s-weg .knopf { font-size: 15.5px; padding-inline: 1.05em; gap: .45em; } }
@media (min-width: 901px) and (max-width: 1120px) { .s-weg .knopf .pfeil { display: none; } }
@media (min-width: 1001px) { .s-online .s-gemeinschaft-bild { width: clamp(300px, 33vw, 520px); margin-right: clamp(8px, 2vw, 40px); } }
/* Prüferfunde Startseite */
.s-weg-karte--2 { --hg: var(--gruen-tief); }
.planet--zahl a { background: var(--gruen-tief); }
.pinnwand-filter button[aria-pressed="true"] { background: var(--gruen-tief); }
.s-termine .zeile { color: var(--gruen-licht); }
/* Leitzitat: Anfangszeichen sitzt sauber links vor der ersten Zeile */
.leitzitat p { padding-left: .5em; }
.leitzitat-z { left: -.12em; top: -.42em; font-size: 1.9em; }
@media (max-width: 700px) { .leitzitat p { padding-left: 0; } .leitzitat-z { position: static; display: block; height: .5em; font-size: 1.8em; line-height: .9; margin-bottom: .05em; } }
@media (max-width: 600px) { .s-held-film { aspect-ratio: 1 / 1; max-height: 50svh; } }
/* Hersteller am Handy: ein Band zum Wischen statt sechs Karten untereinander */
@media (max-width: 700px) {
  .s-hersteller .s-hersteller-raster { display: flex; gap: 14px; width: calc(100% + 2 * var(--rand)); margin-inline: calc(-1 * var(--rand)); padding: 6px var(--rand) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .s-hersteller .s-hersteller-raster::-webkit-scrollbar { display: none; }
  .s-hersteller .s-hersteller-raster > li { flex: 0 0 78%; scroll-snap-align: start; }
}
/* Startseite am Handy kürzer: Aufzählungen, die nur wiederholen, was Text und Knöpfe schon sagen */
@media (max-width: 600px) {
  .s-online-liste, .s-online .s-gemeinschaft-liste, .s-laeden .ladenkarte-umgebung { display: none; }
  .s-online .s-gemeinschaft { margin-top: 64px; }
}
/* Community-Freisteller am Handy: der untere Bildrand läuft weich in die Karte */
/* Handy und Tablet: kein Ausblenden mehr (der halbdurchsichtige Bauch über dem dunklen Holz wirkte wie ein Geist).
   Das Bild endet sauber an der Oberkante der Karte, ich stehe sozusagen hinter ihr. */
@media (max-width: 900px) {
  .s-online .s-gemeinschaft-bild { clip-path: inset(-80px -120px 70px -120px); }
  .s-online .s-gemeinschaft-karte { padding-top: 48px; }
}
/* Leitzitat am Handy: das Anführungszeichen steht als eigene Zeile über dem Zitat */
@media (max-width: 700px) { .leitzitat-z { position: static; display: block; height: auto; font-size: 1.7em; line-height: .55; margin: 0 0 .25em; padding-top: .1em; overflow: visible; } }
/* Weg-Karten ohne Querscrollen bei 1000 bis 1300 px: Text über die ganze Kartenbreite, Bild darunter */
.s-weg-karte p { -webkit-hyphens: auto; hyphens: auto; }
@media (min-width: 1000px) and (max-width: 1300px) {
  .ohne-quer .s-weg-karte { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ohne-quer .s-weg-karte .s-weg-bild { grid-row: 2; max-height: 300px; max-width: 70%; margin-top: 0; justify-self: end; }
  .ohne-quer .s-weg-inhalt { padding-bottom: 0; }
}
/* Laden-Reiter: bei mittleren Breiten ohne Nummern, damit „Creuzburg“ ganz reinpasst */
.laden-reiter button { min-width: 0; }
@media (min-width: 481px) and (max-width: 1240px) { .laden-reiter button { font-size: 16px; padding: 0 8px; gap: 5px; } .laden-reiter button span { display: none; } }
/* Community-Teaser: Textspalte endet vor dem Freisteller */
@media (min-width: 1001px) { .s-online .s-gemeinschaft-karte { padding-right: calc(clamp(300px, 33vw, 520px) + clamp(16px, 3vw, 48px)); } }

/* Perlknopf-Ziffern auch bei „Dein Weg“ (statt der großen Konturziffern) */
.s-weg-nr, .s-weg-karte .s-weg-nr { display: grid; place-items: center; width: clamp(64px, 9cqi, 88px); height: auto; aspect-ratio: 1; margin-bottom: 22px; border-radius: 50%; box-sizing: border-box; border: 4px solid transparent;
  background: var(--perl-flaeche); box-shadow: var(--perl-schatten); color: #3A2A1E; -webkit-text-stroke: 0; opacity: 1;
  font-size: clamp(26px, 3.6cqi, 36px); line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
@media (max-width: 999px) { .s-weg-nr, .s-weg-karte .s-weg-nr { position: absolute; top: -30px; right: 24px; width: 72px; font-size: 28px; } }
/* „Ausprobieren“ und die Texte der halben Karten ohne Trennung mitten im Wort */
@media (min-width: 1000px) { .ohne-quer .s-weg-inhalt { padding-right: 10px; } .ohne-quer .s-weg-karte h3 { font-size: clamp(32px, 6.8cqi, 68px); } .ohne-quer .s-weg-karte p { -webkit-hyphens: manual; hyphens: manual; } }

/* Runde 30: Wegkarten im Wechsel. 02 und 04 zeigen das Bild links. Bei 02 läuft der Arm im Originalfoto aus dem Bild,
   deshalb sitzt das Bild bündig am linken und unteren Kartenrand: der Arm geht über die Kartenkante statt mitten im Grün abzubrechen. */
@media (min-width: 1000px) {
  .s-weg-karte--2, :root:not(.ohne-quer) .s-weg-karte--4 { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .s-weg-karte--2 .s-weg-bild, :root:not(.ohne-quer) .s-weg-karte--4 .s-weg-bild { grid-column: 1; grid-row: 1; justify-self: start; max-width: 104%; clip-path: inset(-140px -140px 0 0 round 0 0 0 28px); }
  .s-weg-karte--2 .s-weg-inhalt, :root:not(.ohne-quer) .s-weg-karte--4 .s-weg-inhalt { grid-column: 2; grid-row: 1; padding-left: clamp(24px, 3vw, 40px); }
  .ohne-quer .s-weg-karte--2 .s-weg-inhalt { padding-right: clamp(28px, 3.4vw, 52px); }
}
/* 02 unter 1000 px: Bild unter dem Text, bündig links unten in der Kartenecke, damit der Arm über die Kartenkante läuft */
@media (max-width: 999px) {
  .s-weg-karte--2 .s-weg-inhalt { grid-row: 1; padding-top: 30px; padding-bottom: 0; }
  .s-weg-karte--2 .s-weg-bild, .ohne-quer .s-weg-karte--2 .s-weg-bild { grid-row: 2; justify-self: start; max-height: 380px; max-width: 92%; margin-top: 26px; clip-path: inset(-140px -140px 0 0 round 0 0 0 28px); }
}
.s-weg-karte p, .s-weg-karte p:not(.s-weg-preis) { -webkit-hyphens: manual; hyphens: manual; }

/* Runde 30: Hoodie-Bild in drei Schichten. Außen läuft das Auftauchen, in der Mitte liegt der Schatten, innen die Ausblend-Maske.
   Safari zeichnet Schatten und Maske auf demselben Bild als grauen Kasten. */
.s-gemeinschaft-bild { display: block; }
.s-gemeinschaft-bild, .s-online .s-gemeinschaft-bild { filter: none; }
.s-gemeinschaft-schatten { display: block; filter: drop-shadow(0 30px 40px rgba(10,6,4,.45)); }
.s-gemeinschaft-bild img { display: block; width: 100%; height: auto; }

/* Runde 31: Safari malt den CSS-Schatten unter einem Zuschnitt (clip-path) über die Grafikkarte als Kasten,
   und den Hoodie-Schatten auf der inneren Ebene schneidet es an der Bildkante ab. Deshalb kommen Bilder mit
   fest eingerechnetem Schatten (werkzeuge/schattenbilder.py), ohne CSS-Filter:
   Mieten-Bild (Karte 02) bis 999 px, Hoodie überall (bis 1000 px die Handy-Fassung, darüber die Rechner-Fassung).
   Die Prozentwerte druckt schattenbilder.py: sie halten die Person genau so groß und so platziert wie vorher. */
.s-weg-karte picture, .s-gemeinschaft-schatten picture { display: contents; }
/* Runde 33: <source> wird sonst durch display: contents selbst zum Rasterteil und legt eine zweite Zeile an. Dann endet das Bild 60 px über der Kartenkante. */
.s-weg-karte picture > source, .s-gemeinschaft-schatten picture > source { display: none; }
@media (max-width: 999px) {
  .s-weg-karte--2 .s-weg-bild, .ohne-quer .s-weg-karte--2 .s-weg-bild { filter: none; max-width: calc(92% * 1.1498); pointer-events: none; }
}
.s-gemeinschaft-schatten { filter: none; }
.s-gemeinschaft-schatten img { width: 125.27%; max-width: none; margin: -6.26% 0 0 -12.63%; }
@media (max-width: 1000px) {
  .s-gemeinschaft-schatten img { width: 146.07%; margin: -11.57% 0 0 -23.04%; }
}

/* Runde 33: „Von mir für dich“. Meine eigenen Sachen zuerst: Community, dann Griffbereit, dann die Quetschn Academy als Partner. */
.s-online .s-online-kopf h2 { font-size: clamp(48px, 6vw, 104px); margin-bottom: 0; }
.s-online-kopf > p { max-width: 38ch; color: var(--tinte-2); font-size: clamp(17px, 1.3vw, 19px); }
.s-online .s-gemeinschaft, .s-online .s-gemeinschaft:first-child { margin-top: 0; }
.s-online-qa { margin-top: clamp(80px, 10vw, 150px); }
.s-online .s-online-qa h2 { font-size: clamp(38px, 4.4vw, 72px); }
.s-griff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 48px clamp(36px, 5vw, 88px); align-items: center; margin-top: clamp(80px, 10vw, 150px); }
.s-griff-marke { display: flex; align-items: center; gap: 14px; margin: 0 0 30px; }
.s-griff-marke img { width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 8px 14px -10px rgba(43,75,168,.7); }
.s-griff-marke span { display: grid; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: .95; text-transform: uppercase; color: #2B4BA8; }
.s-griff-marke small { font-weight: 700; font-size: 14px; letter-spacing: .14em; color: var(--tinte-2); }
.s-griff-titel { margin: 0 0 22px; font-size: clamp(38px, 4.4vw, 72px); line-height: .9; max-width: 14ch; }
.s-griff .einleitung { max-width: 44ch; }
.s-griff-liste { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 10px; max-width: 50ch; }
.s-griff-liste li { position: relative; padding-left: 30px; color: var(--tinte-2); }
.s-griff-liste li::before { content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.s-griff-liste b { color: var(--tinte); }
.s-griff-preis { margin: 16px 0 0; max-width: 52ch; font-size: 15px; color: var(--tinte-2); }
.s-griff-handys { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 10px 0 40px; }
.gb-handy { margin: 0; flex: 0 0 auto; width: min(270px, 46%); padding: 9px; border-radius: 36px; background: #17120E; box-shadow: 0 46px 60px -34px rgba(23,17,13,.6), 0 0 0 1px rgba(23,17,13,.08); }
.gb-handy img { display: block; width: 100%; height: auto; border-radius: 28px; }
.gb-handy--hinten { rotate: -5deg; margin-top: 10px; }
.gb-handy--vorne { position: relative; z-index: 2; rotate: 4deg; margin: 56px 0 0 -9%; }
@media (max-width: 900px) {
  .s-griff { grid-template-columns: minmax(0, 1fr); }
  .s-griff-handys { order: -1; padding-bottom: 10px; }
}
@media (max-width: 600px) {
  .s-online .s-gemeinschaft { margin-top: 0; }
  .s-griff, .s-online-qa { margin-top: 72px; }
  .s-griff-liste { display: none; }
  .gb-handy { padding: 6px; border-radius: 26px; }
  .gb-handy img { border-radius: 21px; }
}

/* Runde 35: Die vier Schritte im selben Takt wie die Bilder (rechts, links, rechts, links): hell, grün, hell, grün.
   Die Kaufen-Karte lag vorher als Holz auf dem Holz des Abschnitts und hob sich kaum ab. */
.s-weg-karte--3 { --hg: var(--papier); }
.s-weg-karte--4 { --hg: var(--gruen-tief); --fg: var(--weiss); --leise: rgba(255,255,255,.88); background: var(--hg); }
.s-weg-karte--4::after { content: none; }
.s-weg-karte--4 .s-weg-preis { background: var(--weiss); color: var(--gruen-dunkel); }
.s-weg-karte--4 .knopf--hell { --hg: var(--weiss); --fg: var(--gruen-dunkel); }

/* Runde 36: Die vier Karten passen immer zwischen Kopfleiste und Zeitleiste. Ihre Höhe richtet sich nach dem Fenster
   (Fenster minus Kopf minus 186 px, höchstens 740 px), das Foto ragt 70 px darüber hinaus. Die Karten sitzen mittig
   neben dem Einleitungstext, statt sich auf dessen Höhe zu strecken. So liegt die Zeitleiste immer frei darunter.
   Bei niedrigen Fenstern rücken Einleitung und Kartentext enger zusammen. */
@media (min-width: 1000px) {
  :root:not(.ohne-quer) .s-weg-karte { height: min(740px, calc(100svh - var(--kopf-h) - 186px)); min-height: 0; align-self: center; }
  :root:not(.ohne-quer) .s-weg-bild { max-height: min(810px, calc(100svh - var(--kopf-h) - 116px)); }
}
@media (min-width: 1000px) and (max-height: 920px) {
  :root:not(.ohne-quer) .s-weg-intro h2 { font-size: clamp(48px, min(6.4vw, 10.5svh), 108px); margin-bottom: 20px; }
  :root:not(.ohne-quer) .s-weg-intro p { font-size: 18px; line-height: 1.55; }
  :root:not(.ohne-quer) .s-weg-tipp { margin-top: 16px; }
  :root:not(.ohne-quer) .s-weg-karte { width: min(940px, 84vw); }
  :root:not(.ohne-quer) .s-weg-inhalt { padding-block: 28px; }
  :root:not(.ohne-quer) .s-weg-nr { width: 60px; margin-bottom: 14px; font-size: 24px; border-width: 3px; }
  :root:not(.ohne-quer) .s-weg-preis { margin-bottom: 10px; font-size: 15px; }
  :root:not(.ohne-quer) .s-weg-karte h3 { font-size: clamp(36px, 6.2cqi, 58px); margin-bottom: 12px; }
  :root:not(.ohne-quer) .s-weg-karte p:not(.s-weg-preis) { font-size: 17px; line-height: 1.55; }
  :root:not(.ohne-quer) .s-weg-karte .knopf { margin-top: 4px; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  :root:not(.ohne-quer) .s-weg-intro h2 { font-size: clamp(44px, 9.5svh, 108px); }
  :root:not(.ohne-quer) .s-weg-intro p { font-size: 16px; line-height: 1.5; }
  :root:not(.ohne-quer) .s-weg-inhalt { padding-block: 20px; }
  :root:not(.ohne-quer) .s-weg-nr { width: 50px; margin-bottom: 10px; font-size: 20px; }
  :root:not(.ohne-quer) .s-weg-karte h3 { font-size: clamp(34px, 5.2cqi, 48px); margin-bottom: 10px; }
  :root:not(.ohne-quer) .s-weg-karte p:not(.s-weg-preis) { font-size: 16px; line-height: 1.45; }
}

/* ---------- 24-Stunden-Weltrekord mit Martin Tschernko (Runde 37) ----------
   Heller Abschnitt zwischen Festival (dunkel) und Stimmen (Holz). Links die Geschichte in zwei Kapiteln:
   2022 als hohle Jahreszahl (der Versuch zählte am Ende nicht), 2023 grün und voll. Rechts die grüne Bühne
   wie bei den Gästekarten, der Freisteller ragt oben drüber. Darunter Backstage-Film, die drei Aufnahmen und die Presse. */
.s-24h { padding-block: var(--abschnitt); background: var(--papier); overflow: clip; }
.s-24h-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "kopf bild" "kapitel bild"; gap: 0 clamp(40px, 6vw, 110px); align-items: start; }
.s-24h-kopf { grid-area: kopf; }
.s-24h-kapitel { grid-area: kapitel; }
.s-24h-bild { grid-area: bild; align-self: center; }
.s-24h h2 { font-size: clamp(40px, 4.6vw, 80px); line-height: .92; margin-bottom: 24px; }
.s-24h-einleitung { font-size: clamp(18px, 1.3vw, 21px); color: var(--tinte-2); max-width: 46ch; margin-bottom: clamp(30px, 3.4vw, 46px); }
.s-24h-kapitel { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.s-24h-kapitel li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 22px; align-items: start; font-size: clamp(44px, 4vw, 64px); }
.s-24h-kapitel li > div { font-size: clamp(17px, .5vw + 15px, 20px); }
.s-24h-jahr { font-family: var(--display); font-weight: 900; font-size: 1em; line-height: .8; white-space: nowrap; letter-spacing: -.01em; color: var(--gruen-dunkel); }
.s-24h-kapitel li:first-child .s-24h-jahr { color: transparent; -webkit-text-stroke: 1.5px var(--tinte-2); }
.s-24h-kapitel h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1; margin: 2px 0 8px; }
.s-24h-kapitel p { margin: 0; color: var(--tinte-2); font-size: 17.5px; line-height: 1.55; max-width: 52ch; }
.s-24h-bild { margin: 0; padding-top: clamp(70px, 8vw, 120px); }
.s-24h-buehne { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 24px; background: radial-gradient(70% 90% at 60% 100%, rgba(255,255,255,.22), transparent 60%), var(--gruen); }
.s-24h-buehne img { position: absolute; left: 50%; bottom: 0; width: 92%; height: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 12px 14px rgba(15,10,7,.3)); }
.s-24h-bild figcaption { margin-top: 14px; font-size: 15px; color: var(--tinte-2); }
.s-24h-unten { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px clamp(40px, 6vw, 110px); margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--linie); align-items: start; }
.s-24h-film figcaption { display: grid; gap: 6px; color: var(--tinte); }
.s-24h-film figcaption small { font-family: var(--text); font-weight: 400; font-size: 15px; line-height: 1.45; text-transform: none; color: var(--tinte-2); }
.s-24h-film figcaption a { color: inherit; text-underline-offset: 3px; }
.s-24h-belege h3 { font-size: clamp(30px, 2.8vw, 44px); line-height: .95; margin-bottom: 12px; }
.s-24h-belege > p:not(.zeile) { margin-bottom: 18px; color: var(--tinte-2); font-size: 17.5px; }
.s-24h-leiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.s-24h-leiste a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; height: 100%; padding: 14px 16px 13px; border-radius: 14px; background: var(--gruen); color: var(--weiss); text-decoration: none; box-shadow: 0 14px 24px -18px rgba(30,23,18,.9); transition: background-color .2s var(--ease), transform .25s var(--ease); }
.s-24h-leiste .symbol { width: 22px; height: 22px; }
.s-24h-leiste b { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.s-24h-leiste small { grid-column: 1 / -1; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,.86); }
.s-24h-leiste a:hover { background: var(--gruen-tief); transform: translateY(-2px); }
.s-24h-leiste a:focus-visible, .s-24h-presse a:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; }
.s-24h-presse-titel { margin: clamp(34px, 4vw, 48px) 0 6px; }
.s-24h-presse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.s-24h-presse li { border-top: 1px solid var(--linie); }
.s-24h-presse a { display: grid; gap: 3px; padding: 12px 0 14px; text-decoration: none; color: var(--tinte); }
.s-24h-presse b { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; transition: color .2s var(--ease); }
.s-24h-presse small { font-size: 14px; color: var(--tinte-2); }
.s-24h-presse a:hover b { color: var(--gruen-dunkel); }
@media (max-width: 999px) {
  .s-24h-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "kapitel"; }
  .s-24h-bild { max-width: 560px; padding-top: 70px; margin-bottom: 44px; }
  .s-24h-unten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .s-24h-kapitel li { grid-template-columns: minmax(0, 1fr); font-size: 44px; }
  .s-24h-jahr { margin-bottom: 10px; }
  .s-24h-leiste { grid-template-columns: minmax(0, 1fr); }
  .s-24h-leiste a { grid-template-columns: auto auto minmax(0, 1fr); }
  .s-24h-leiste small { grid-column: auto; text-align: right; }
  .s-24h-presse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .s-24h-leiste a:hover { transform: none; } }