/* ═══════════════════════════════════════════════════════════════════════ VERANSTALTER-STRECKE — gemeinsames Stylesheet (12.09.2026) Vier Seiten teilen sich diese Datei: /veranstalter/ Einstieg und Kaufmaennisches /veranstalter/werbung/ alles vor dem Abend /veranstalter/ablauf/ der Veranstaltungstag selbst /veranstalter/technik/ Buehne, Ton, Licht WARUM VIER SEITEN STATT EINER LANGEN. Nepo, 12.09.2026: „Ab der technischen Sache wird's schon sehr, sehr lange. Da hat man dann keinen Bock mehr richtig weiterzulesen. … Denn so wie es aussieht, gibt es ja drei grosse Bereiche: das ist einmal die Werbung vorher, dann der organisatorische Teil am Tag und dann die Technik." Dazu sein Bild fuer die Fuehrung: „ähnlich wie bei IKEA, wo man auch durchgeführt wird durchs Menü und wenn man will, findet man aber trotzdem schnell alle Punkte." Daraus: eine kurze Einstiegsseite mit drei grossen Tueren, jede Tuer eine eigene Seite mit eigener Sprungnavigation, und auf jeder Seite oben die Streckennavigation, damit man nie zurueckmuss. WARUM EINE GEMEINSAME CSS-DATEI. Vier Seiten mit je 400 Zeilen kopiertem CSS laufen garantiert auseinander — die drei harten Regeln aus dem Skill microsite-bauen sagen: eine Quelle fuer das Aussehen. Die Datei liegt im Plugin, wird also vom eigenen Server geliefert; kein fremder Abruf, keine Borlabs-Frage. TONLAGE: alles positiv formuliert. Nepo: „Versuchen, alle Negativforderungen in Positive umzuwandeln." Also nicht „keine Tiefgarage", sondern „ebenerdig in Buehnennaehe". ═══════════════════════════════════════════════════════════════════════ */ :root{ --papier:#F5F1E7; --papier2:#FFFFFF; --grau:#ECE9E1; --papier-rgb:245,241,231; --linie:#D9D2C8; --linie2:#C4BAAB; --tinte:#14100E; --tinte2:#3D352F; --leise:#6E655D; --rot:#8C201B; --rot2:#681D1A; --rot-hell:#A93028; --rot-marke:#C24336; --rot-rgb:140,32,27; --ocker:#8A6320; --gold:#E4B86B; --gruen:#4C7A20; --schwarz:#10130F; --schwarz-rgb:16,19,15; --creme:#E1CEA2; --creme-rgb:225,206,162; --fw:'GomaBlock',Impact,'Arial Black',sans-serif; --fd:'BuiltTitling',Impact,'Arial Narrow',sans-serif; --fb:'Rajdhani',system-ui,-apple-system,sans-serif; --fk:'Caveat','Bradley Hand',cursive; --sp2:16px; --sp3:26px; --sp4:44px; --sp5:68px; --kopfhoehe:118px; } @font-face{font-family:'GomaBlock';src:url(fonts/GomaBlock.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'BuiltTitling';src:url(fonts/BuiltTitling-Bold.woff2) format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'BuiltTitling';src:url(fonts/BuiltTitling-Semi.woff2) format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'BuiltTitling';src:url(fonts/BuiltTitling-Regular.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Rajdhani';src:url(fonts/Rajdhani-400.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Caveat';src:url(fonts/Caveat-Bold.woff2) format('woff2');font-weight:700;font-display:swap} *,*::before,*::after{box-sizing:border-box} html{font-size:16px!important;-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* ── Schriftgroessen ─────────────────────────────────────────────────── Nepo, 12.09.2026: „die Größenverhältnisse von den Schriften … Versuch, dich an unserem ursprünglichen Konzept auszurichten und trotzdem auf die Lesbarkeit zu achten." Das Problem der Vorfassung war nicht die Groesse selbst, sondern der zu kleine SPRUNG: Ueberschrift, Vorspann und Fliesstext lagen so dicht beieinander, dass alles wie ein Block wirkte. Jetzt vier klar getrennte Ebenen — Ueberschrift gross, Vorspann deutlich darueber, Fliesstext ruhig, Kleintext klein. */ /* ⛔ GEMESSEN 12.09.2026 auf der Livefassung: Dieses Stylesheet steht im an Stelle 0, das Theme-CSS (theratio/style.css) an Stelle 3 — das Theme wird also DANACH geladen und gewinnt jede Regel gleicher Spezifitaet. Ausserdem steht dort ein Inline-`body{background-color:#ffffff}`. Folge am Handy: Die Baender waren hintergrundlos, der dunkle Theme-Grund schlug durch, und die dunkle Schrift stand auf Schwarz — von Nepo per Screenshot gemeldet. Gegenmittel: `html body` statt `body` (zwei Elemente schlagen eines), und JEDE tragende Flaeche bekommt ihren eigenen Hintergrund, statt sich auf den Body zu verlassen. Wer hier eine Flaeche ergaenzt, gibt ihr einen Hintergrund mit. */ html body{background:var(--papier);color:var(--tinte2)} body{margin:0;background:var(--papier);color:var(--tinte2);font-family:var(--fb); font-size:clamp(1.06rem,.5vw + .95rem,1.2rem);line-height:1.66;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent} a{color:var(--rot);text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:700;text-transform:uppercase; line-height:.96;letter-spacing:.005em;text-wrap:balance;color:var(--tinte)} strong{color:var(--tinte);font-weight:600} p{margin:0 0 1em} ul{margin:0 0 1em;padding-left:1.15em} li{margin-bottom:.35em} .eyebrow{font-family:var(--fd);font-weight:700;font-size:clamp(11px,1.1vw,13.5px); letter-spacing:.30em;color:var(--rot);margin:0 0 10px} .h2{font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:18px} .h3{font-size:clamp(1.24rem,1.9vw,1.62rem);letter-spacing:.03em;margin:var(--sp4) 0 14px; padding-bottom:9px;border-bottom:2px solid var(--linie)} .h4{font-size:1.06rem;letter-spacing:.06em;color:var(--rot2);margin:var(--sp3) 0 8px} .lead{font-size:clamp(1.2rem,.85vw + 1rem,1.52rem);line-height:1.48;max-width:56ch; color:var(--tinte);margin-bottom:1.1em} .klein{font-size:.9rem;color:var(--leise)} a.inline{border-bottom:1px solid rgba(var(--rot-rgb),.45)} a.inline:hover,a.inline:focus-visible{border-bottom-color:var(--rot);color:var(--rot-hell)} /* ── Kopf: Streckennavigation ────────────────────────────────────────── Auf jeder der vier Seiten dieselbe Leiste. Die aktuelle Station ist markiert — man sieht immer, wo man ist und was es sonst noch gibt. Darunter, nur auf den Unterseiten, die Sprungmarken der Seite. */ /* R-STICKY-14.09.2026 · Nepo: "man soll das dahinter Gescrollte ganz leicht sehen, aber deutlich drüber muss das Menü erkennbar sein, das andere verschwommen, unscharf und abgedunkelt dahinter." War vorher fast blickdicht (.97) -- jetzt durchlaessiger, mit mehr Weichzeichnung, damit der Kontrast trotzdem traegt. */ /* ⛔⛔ Nachtrag 14.09.2026, R-STICKY-2: `position:sticky` griff auf dieser Route nicht — das WordPress-Theme "theratio" liefert global `body{overflow:hidden}` mit (`wp-content/themes/theratio/style.css`), und das bricht jedes `position:sticky` in einem Nachfahren, ohne Fehlermeldung. Die Fleischwolf- Seite (template.html) war davon nie betroffen, weil ihr Kopf von Anfang an `position:fixed` ist. Gleicher Mechanismus jetzt auch hier — `fixed` fragt nie nach dem Overflow eines Vorfahren. Der Content-Versatz kommt ueber `--kopfhoehe` (von veranstalter.js live nachgemessen, s. dort). */ .kopf{position:fixed;top:0;left:0;right:0;width:100%;z-index:40;background:rgba(var(--papier-rgb),.80); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:2px solid var(--rot)} /* Nepo, 14.09.2026: "Oben beim Header ein bisschen Platz nach unten lassen, damit der Abstand von diesem 3-Streifen-Viereck unten genauso viel ist wie nach oben." */ .kopf__innen{max-width:1180px;margin:0 auto;padding:10px clamp(14px,3vw,26px) 10px} .kopf__zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .marke{font-family:var(--fw);font-size:23px;line-height:1;color:var(--tinte);flex:0 0 auto} .marke b{font-weight:400;color:var(--tinte)} .marke i{font-style:normal;color:var(--rot)} /* Nepo, 14.09.2026: „deutlich und rot immer oben sichtbar, dass man immer weiß, dass man zur anderen Seite zurückkehren könnte." Vorher ein leiser Kleintext-Link — jetzt ein klarer roter Pfeil, auf jeder Breite. */ .kopf__rueck{display:inline-flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:700; font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--rot)} .kopf__rueck:hover,.kopf__rueck:focus-visible{color:var(--rot-hell);text-decoration:underline} /* ── Menueknopf (Handy) — R-STICKY-14.09.2026 ──────────────────────────── Nepo: "eine schoenere Navigation, am besten auch mit drei Strichen, wie bei der Hauptseite." 1:1 dasselbe Muster wie `.kopf__menue` in template.html (drei , wird zum Kreuz), nur in den Farben dieser helleren Seite. Klappt darunter `.kopf__nav` auf: Strecke, Fortschritt und — sobald vorhanden — die Sprungmarken des aktuellen Bereichs sitzen dann gemeinsam im aufgeklappten Sticky-Bereich, wie von Nepo verlangt. */ .kopf__menue{display:none;width:40px;height:40px;flex-shrink:0;padding:0;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px; border:2px solid var(--linie2);background:transparent;color:var(--tinte);opacity:.76} .kopf__menue:hover,.kopf__menue:focus-visible{opacity:1} .kopf__menue span{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s,opacity .2s} .kopf__menue:hover,.kopf__menue:focus-visible{border-color:var(--rot)} .kopf.offen .kopf__menue span:nth-child(1){transform:translateY(7px) rotate(45deg)} .kopf.offen .kopf__menue span:nth-child(2){opacity:0} .kopf.offen .kopf__menue span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Nepo, 12.09.2026: „achten, dass irgendwie auch das Menü mittig ist, vielleicht sogar ein bisschen größer, denn es ist wieder linksbündig, zumindest im Desktop-Bereich." Beide Leisten bleiben waagrecht rollbar (am Handy unverzichtbar), sind aber zentriert, sobald der Inhalt schmaler ist als der Platz. */ .strecke,.sprung{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;justify-content:flex-start} @media(min-width:900px){ .strecke,.sprung{justify-content:center} } /* Seit der fuenften Station (12.09.2026) braucht die Leiste am Handy 729 px bei 362 px Platz — gemessen. Statt drei umbrechenden Zeilen dauerhaft im Sticky-Kopf (R-STICKY-14.09.2026, Nepo: „eine schoenere Navigation") klappt die Strecke jetzt hinter den Menueknopf. */ @media(max-width:699px){ .kopf__menue{display:inline-flex} .kopf__nav{display:none;padding-bottom:12px} .kopf.offen .kopf__nav{display:block} /* R-STICKY-2, 14.09.2026: Marke und Menueknopf bleiben auf einer Zeile, der rote Rueckweg-Link bekommt seine eigene volle Zeile darunter -- vorher fiel er der Marke/dem Knopf ins Wort und wirkte "gequetscht". */ .kopf__zeile{row-gap:8px} .marke{order:1} .kopf__menue{order:2} .kopf__rueck{order:3;flex-basis:100%;justify-content:center;padding-top:2px} .strecke{flex-wrap:wrap;gap:0 16px;overflow-x:visible;margin-top:10px} .strecke a{padding-bottom:4px;font-size:11.5px;letter-spacing:.05em} /* Die Ziffern tragen am Handy nichts bei, kosten aber die Zeile, die den Umbruch von zwei auf drei Reihen treibt. Am Rechner bleiben sie. */ .strecke a i{display:none} .sprung{gap:5px;flex-wrap:wrap;overflow-x:visible} } .strecke::-webkit-scrollbar,.sprung::-webkit-scrollbar{display:none} .strecke{margin-top:12px} .strecke a{display:flex;align-items:baseline;gap:8px;font-family:var(--fd);font-weight:700; font-size:clamp(13px,1.05vw,15.5px); letter-spacing:.09em;text-transform:uppercase;color:var(--tinte2);padding:10px 15px 9px; white-space:nowrap;border-bottom:3px solid transparent} .strecke a i{font-style:normal;font-size:11.5px;color:var(--linie2);letter-spacing:.14em} .strecke a:hover,.strecke a:focus-visible{color:var(--rot)} .strecke a[aria-current="page"]{color:var(--rot);border-bottom-color:var(--rot)} .strecke a[aria-current="page"] i{color:var(--rot-hell)} /* ── Wie weit bin ich? ──────────────────────────────────────────────── Nepo, 13.09.2026: „Sie soll informativ sein, aber durch Grafik und Gamification-Effekte, dezente, soll das auch Spaß machen." Der dezenteste nuetzliche Effekt ist der, der zugleich fuehrt: Jeder gelesene Bereich bekommt ein Haekchen, darunter laeuft eine feine Leiste mit. Alles nur im Browser des Lesers (localStorage) — nichts verlaesst die Seite, nichts wird gemessen, nichts gemeldet. ⛔ Rein additiv: Ohne JS und ohne Speicher sieht die Strecke aus wie vorher. */ .strecke a[data-gelesen="1"]::after{content:'✓';margin-left:7px;color:var(--gruen,#6DAC31); font-size:11px;vertical-align:.08em} .strecke a[data-gelesen="1"][aria-current="page"]::after{color:var(--rot)} .fortschritt{height:3px;background:var(--linie);margin:8px auto 0;max-width:860px; border-radius:2px;overflow:hidden} .fortschritt__b{display:block;height:100%;width:0;background:var(--rot); transition:width .6s cubic-bezier(.2,.7,.2,1)} .fortschritt__wort{display:block;margin-top:5px;text-align:center;font-family:var(--fd); font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)} @media(prefers-reduced-motion:reduce){ .fortschritt__b{transition:none} } @media print{ .fortschritt{display:none} } /* Ein Satz vor der Liste — er sagt in Alltagssprache, was danach in Anforderungsform steht. Die Liste selbst bleibt unveraendert: Wer sie an die Haustechnik weitergibt, braucht sie genau so. */ .gewerk__ein{margin:0 0 12px;font-size:1rem;line-height:1.55;color:var(--tinte); padding-left:12px;border-left:2px solid var(--rot-hell,#A93028)} .sprung{border-top:1px solid var(--linie);padding:7px 0} .sprung:empty{display:none} .sprung a{font-family:var(--fb);font-size:14px;color:var(--leise);padding:4px 13px; white-space:nowrap;border:1px solid var(--linie);border-radius:3px;background:var(--papier2)} .sprung a:hover,.sprung a:focus-visible,.sprung a[aria-current="true"]{color:var(--rot);border-color:var(--rot)} /* ── Hero ────────────────────────────────────────────────────────────── KOPFBILD IST SEIT 12.09.2026 DIE AUFGEBAUTE BUEHNE (Rosenheim, IMG_7189 in der farbkorrigierten Fassung), nicht mehr das Portraet. Nepo: „Wir nehmen als Überschriftenbild für den Banner ein anderes Bild." ⛔ DIE HOEHE BLEIBT IN vw GERECHNET. Grund steht weiter unten und gilt unabhaengig vom Motiv: `cover` skaliert auf EINE Achse — hier auf die Breite. Der Ueberhang liegt deshalb ausschliesslich senkrecht und haengt direkt an der Kastenhoehe. Eine in `svh` gerechnete Hoehe haengt dagegen am Fenster; das Verhaeltnis von Kasten zu Bild aendert sich dann mit jeder Fensterhoehe, und genau daran ist am 12.09.2026 der Kopf im Portraet angeschnitten worden (nachgemessen bei 1920 px: 552 px Ueberhang, davon 177 px oben weg = 16,5 % der Bildhoehe; der Haaransatz lag bei 15,7 %). Mit `vw` bleibt der Ausschnitt auf jeder Breite derselbe. Beim Buehnenfoto ist die Bildmitte das Motiv (Rollups und Instrument), deshalb steht object-position mittig. Das Handy bekommt eine eigene, hochkant geschnittene Datei — im Querformat bliebe bei 375 px Breite und 360 px Kastenhoehe nur ein schmaler Streifen uebrig (gerechnet: cover skaliert dann auf die HOEHE, 300 px Ueberhang waagrecht). */ /* Nepo, 12.09.2026: „Die Positionierung der Schrift kann man noch ein bisschen weiter oben machen, vielleicht sogar noch ein bisschen größer, minimal, und das Ganze hinten nicht ganz so dunkel." Deshalb sitzt der Textblock nicht mehr am unteren Rand, sondern knapp unterhalb der Mitte — weit genug oben, dass darunter noch Buehne zu sehen ist, und weit genug unten, dass er nicht im hellen Plakat landet. */ /* R-STICKY-2, 14.09.2026: Der Kopf ist jetzt `position:fixed` (s. o.), liegt also nicht mehr im normalen Fluss -- ohne diesen Versatz würde er das Hero- Bild überdecken. `--kopfhoehe` wird von veranstalter.js laufend nachgemessen (Menü auf/zu, Fensterbreite), der Fallback greift nur vor dem ersten JS-Lauf. */ .hero{position:relative;background:var(--rot2);overflow:hidden;margin-top:var(--kopfhoehe,118px); min-height:clamp(360px,46vw,860px);display:flex;flex-direction:column; justify-content:flex-end} .hero__bild{position:absolute;inset:0;z-index:0;overflow:hidden} .hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:contrast(1.04)} @media(max-width:739px){ .hero__bild img{object-position:50% 50%} } /* ⛔ DER SCHLEIER IST AUF DAS BUEHNENFOTO NEU EINGESTELLT (12.09.2026). Das fruehere Portraet war links und unten von sich aus dunkel; das Buehnenfoto ist es nicht — dort sitzt genau unter dem Titel das hell beleuchtete Plakat. In der ersten Fassung mit dem neuen Bild war „Ernte" und die Unterzeile darueber kaum zu lesen, am Handy gar nicht. Deshalb: die untere Haelfte deutlich frueher und staerker abgedunkelt, und die seitliche Schicht auf breiten Schirmen kraeftiger. Wer das Bild wechselt, muss diese Werte wieder pruefen — ein Schleier gilt fuer genau ein Foto. */ .hero__schleier{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(var(--schwarz-rgb),.42) 0%,rgba(var(--schwarz-rgb),.08) 20%,rgba(var(--schwarz-rgb),.5) 58%,rgba(var(--schwarz-rgb),.74) 84%,rgba(var(--schwarz-rgb),.88) 100%)} @media(min-width:740px){ .hero__schleier::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--schwarz-rgb),.8) 0%,rgba(var(--schwarz-rgb),.58) 34%,rgba(var(--schwarz-rgb),.2) 56%,rgba(var(--schwarz-rgb),0) 78%)} } /* Am Handy steht der Text ueber der vollen Bildbreite — dort hilft keine seitliche Schicht, nur eine gleichmaessige. */ @media(max-width:739px){ .hero__schleier::after{content:"";position:absolute;inset:0; background:rgba(var(--schwarz-rgb),.3)} } /* ⛔ Der Hero-Text steht in einer Box, nicht frei aufs Bild geklebt. Nepo, 13.09.2026: „sieht der Text, der links so in das Bild hingeklebt ist, ohne alles, nicht so besonders gut aus. Vielleicht muss das auch noch in eine Box. Auf jeden Fall ist es seltsam, dass da oben links und rechts nichts ist." Der Kasten fasst die Spalte, setzt sie vom Bild ab und gibt ihr eine Kante — das Bild bleibt sichtbar, der Text bekommt einen Grund. */ .hero__innen{position:relative;z-index:2;width:100%;max-width:1180px; margin-inline:auto;padding:clamp(30px,5vw,50px) clamp(18px,4vw,44px) clamp(52px,9vw,150px)} /* Breit genug, dass das schraeg gesetzte „Ernte" (left:78 %) noch im Kasten steht — bei 660 px ragte es rechts heraus. */ .hero__kasten{max-width:min(780px,100%);padding-right:clamp(28px,5vw,64px); background:linear-gradient(100deg,rgba(12,10,9,.82),rgba(12,10,9,.58)); backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px); border-left:4px solid var(--rot); box-shadow:0 14px 44px rgba(0,0,0,.5); padding:clamp(18px,2.6vw,30px) clamp(18px,3vw,34px) clamp(20px,3vw,32px);padding-right:clamp(30px,5.5vw,70px)} @media(max-width:739px){ .hero__kasten{max-width:100%;backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(12,10,9,.78)} } @media print{ .hero__kasten{background:none;border-left:0;padding:0;box-shadow:none} } .hero__kicker{font-family:var(--fd);font-weight:700;font-size:clamp(11px,1.2vw,15px);letter-spacing:.34em; color:var(--gold);margin:0 0 clamp(12px,1.8vw,20px);text-shadow:0 2px 10px rgba(0,0,0,.9); padding-left:14px;border-left:4px solid var(--rot-hell);line-height:1.5} /* ⛔ BENANNTE AUSNAHME von der Mittigkeits-Grundregel: Der Hero-Titel steht in einem Kasten mit roter Kante links — mittig gesetzt liefe der Text von dieser Kante weg und der Kasten saehe aus wie ein Versehen. Gilt nur hier, nirgends sonst (Skill microsite-bauen, „Mittigkeit gehoert in die Grundregel"). */ .hero__titel{font-family:var(--fd);font-weight:700;text-transform:uppercase;line-height:.86; font-size:clamp(2.7rem,9.2vw,7rem);letter-spacing:-.005em;color:var(--creme); text-shadow:0 4px 26px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7);margin:0} .hero__wort{position:relative;display:inline-block} .hero__ernte{position:absolute;left:78%;top:60%;white-space:nowrap; font-family:var(--fk);font-weight:700;text-transform:none; color:var(--rot-hell);font-size:.58em;line-height:1;letter-spacing:.02em; transform:rotate(-4deg);transform-origin:left top; text-shadow:0 0 4px rgba(0,0,0,.95), 0 2px 12px rgba(0,0,0,.85), 0 0 26px rgba(0,0,0,.6)} .hero__unter{font-family:var(--fd);font-weight:700;text-transform:uppercase; font-size:clamp(1.08rem,3.2vw,2.3rem);letter-spacing:.06em;color:#D2564A; margin:clamp(10px,1.4vw,16px) 0 0;text-shadow:0 2px 14px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.8)} .hero__satz{max-width:50ch;margin:clamp(14px,2vw,22px) 0 0;color:#EFE6D3; font-size:clamp(1.04rem,.7vw + .9rem,1.28rem);line-height:1.55; text-shadow:0 2px 12px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.8)} /* Schmaler Kopf auf den Unterseiten — dort zaehlt der Inhalt, nicht das Bild */ .hero--schmal{min-height:clamp(200px,19vw,320px)} .hero--schmal .hero__titel{font-size:clamp(1.9rem,5vw,3.4rem)} /* ── Baender und Raster ────────────────────────────────────────────── */ .band{padding:var(--sp5) 0;border-top:1px solid var(--linie);background:var(--papier)} .band--grau{background:var(--grau)} .band--erste{border-top:0} .innen{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,32px)} .bahn{max-width:74ch} section[id],[id^="x-"]{scroll-margin-top:calc(var(--kopfhoehe) + 10px)} .band__nummer{display:inline-block;font-family:var(--fd);font-weight:700;font-size:11px; letter-spacing:.2em;color:#fff;background:var(--rot);padding:3px 9px;border-radius:2px; margin-bottom:12px} /* ── Die drei Tueren auf der Einstiegsseite ────────────────────────── */ .tueren{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--sp3) 0 0} @media(max-width:860px){.tueren{grid-template-columns:1fr}} .tuer{display:flex;flex-direction:column;background:var(--papier2);border:1px solid var(--linie); border-top:5px solid var(--rot);padding:22px;color:var(--tinte2)} .tuer:hover,.tuer:focus-visible{border-color:var(--linie2);border-top-color:var(--rot-hell); background:#fff;transform:translateY(-2px)} .tuer{transition:transform .16s,border-color .16s} .tuer__nr{font-family:var(--fd);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--rot); margin-bottom:10px} .tuer b{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.04em;font-size:clamp(1.15rem,1.6vw,1.42rem);color:var(--tinte);line-height:1.05; margin-bottom:9px} .tuer span{display:block;font-size:.96rem;line-height:1.5} .tuer ul{margin:14px 0 0;padding-left:1.05em;font-size:.9rem;color:var(--leise)} .tuer ul li{margin-bottom:.2em} .tuer em{display:block;margin-top:auto;padding-top:16px;font-family:var(--fd);font-weight:700; font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rot);font-style:normal} /* ── Mini-Vorschau in der Tuer ───────────────────────────────────────── Nepo, 12.09.2026: „Du könntest einen kleinen Screenshot des Bereichs machen oder eine Mini-HTML-Version des Bereichs, wo man hinkommt, damit man weiß, wo man zu dem Bereich hinkommt. Denn jetzt klickt man auf den Bereich und dann ist man auf einer völlig anderen Seite." Ein echter Screenshot waere eine Datei, die bei jeder Textaenderung veraltet. Deshalb eine Miniatur aus demselben Markup: Kopfleiste, Titel, Abschnittsbalken — sie sieht immer so aus wie die Seite dahinter. */ .tuer__vorschau{margin:14px 0 0;border:1px solid var(--linie);background:#FBFAF6; padding:8px;overflow:hidden} .tuer__leiste{display:flex;gap:3px;margin-bottom:6px} .tuer__leiste span{height:4px;flex:1;background:var(--linie);border-radius:1px} .tuer__leiste span.an{background:var(--rot)} .tuer__kopf{height:30px;border-radius:1px;background:linear-gradient(100deg,#241b17,#3b2b22); display:flex;align-items:center;padding:0 7px;margin-bottom:6px} .tuer__kopf b{display:block;height:6px;width:52%;background:#E1CEA2;border-radius:1px} .tuer__zeilen{display:flex;flex-direction:column;gap:4px} .tuer__zeilen i{display:block;height:4px;background:var(--linie);border-radius:1px} .tuer__zeilen i:nth-child(1){width:86%} .tuer__zeilen i:nth-child(2){width:96%} .tuer__zeilen i:nth-child(3){width:64%} .tuer__kacheln{display:flex;gap:4px;margin-top:6px} .tuer__kacheln u{display:block;flex:1;height:16px;border:1px solid var(--linie); border-top:2px solid var(--rot);background:#fff;text-decoration:none} /* ── Kopieren-Knopf am Textbaustein ───────────────────────────────────── */ .kopf-leiste{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px} .kopierknopf{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700; text-transform:uppercase;letter-spacing:.09em;font-size:13px;padding:10px 16px; background:var(--rot);color:#fff;border:2px solid var(--rot);cursor:pointer;border-radius:2px} .kopierknopf:hover,.kopierknopf:focus-visible{background:var(--rot2);border-color:var(--rot2)} .kopierknopf svg{width:15px;height:15px;fill:currentColor} .kopierknopf[data-fertig="1"]{background:var(--gruen);border-color:var(--gruen)} .kopierknopf--leer{background:transparent;color:var(--rot)} .kopierknopf--leer:hover,.kopierknopf--leer:focus-visible{background:var(--rot);color:#fff} /* ── Kaesten, Fakten, Tabellen ─────────────────────────────────────── */ .kasten{background:var(--papier2);border:1px solid var(--linie);border-left:5px solid var(--rot); padding:var(--sp3);margin:var(--sp3) 0} .band--grau .kasten{background:#F7F5F0} .kasten p:last-child{margin-bottom:0} .kasten--ocker{border-left-color:var(--ocker);background:#FBF6EA} .kasten--gruen{border-left-color:var(--gruen);background:#F5F8EF} .kasten h4{margin-top:0} .fakt{display:grid;grid-template-columns:200px 1fr;gap:4px 20px;padding:11px 0; max-width:72ch;margin-inline:auto; border-top:1px solid var(--linie)} .fakt:last-of-type{border-bottom:1px solid var(--linie)} .fakt b{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.07em; font-size:13px;color:var(--rot2);padding-top:3px} @media(max-width:640px){.fakt{grid-template-columns:1fr;gap:2px}} table{width:100%;border-collapse:collapse;margin:var(--sp2) 0 var(--sp3);font-size:.96rem} th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linie);vertical-align:top} th{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.08em; font-size:12px;color:#fff;background:var(--rot2)} tbody tr:nth-child(even){background:var(--papier2)} .band--grau tbody tr:nth-child(even){background:#F7F5F0} .wer{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em; font-size:12px;white-space:nowrap} .wer--haus{color:var(--rot)} .wer--nepo{color:var(--gruen)} /* ── Eckdaten-Kacheln statt Faktenliste ──────────────────────────────── Nepo, 12.09.2026 zum bisherigen Block Besetzung/Laufzeit/Beginn/…: „Den kann man grafisch schöner gestalten, eventuell mit entsprechenden Grafiken und Blöcken und so weiter, damit man es lieber liest. Denn aktuell ist es ein unangenehmer Textblock, auf den man keine Lust hat, gleich zu Beginn." Deshalb: Kacheln mit Symbol, kurzer Kopfzeile und einem Satz. Die Langfassung steht im Aufklapper darunter — wer nur scannt, hat nach zehn Sekunden alles Wesentliche. */ .karten{display:grid;grid-template-columns:1fr;gap:14px;margin:var(--sp3) 0;align-items:start} @media(min-width:620px){.karten{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.karten{grid-template-columns:repeat(3,1fr)}} /* ⛔⛔ R20-5/17/23/24, 14.09.2026 — Nepo: "Immer wenn du bei einer Desktop- Seite drei Sachen nebeneinander hast, kommen drei nebeneinander. Wenn du nur zwei hast, kommen zwei in die erste Zeile, zwei in die naechste, damit man nie drei in einer Reihe hat und dann einzeln in der naechsten." Bei GENAU VIER Kacheln wrappt die Standardregel (3 Spalten ab 980px) immer 3+1 — zwei Varianten je nachdem, was Nepo fuer die konkrete Stelle wollte: .karten--vier : vier nebeneinander, Kastenbreite ~ Videobreite (Veranstaltungstag-Uebersicht, Nepo: "...sondern vier und dafuer die Kaesten so breit, dass sie ungefaehr der Breite des Videos entsprechen"). .karten--paar : bleibt bei zwei Spalten, dafuer breitere/querere Karten (Technik: "Lieber breitere Kaesten quer und dann dafuer jeweils zwei und zwei" — Kameras-Kachel UND Aufbau/Maße). */ @media(min-width:980px){.karten--vier{grid-template-columns:repeat(4,1fr)}} @media(min-width:980px){.karten--paar{grid-template-columns:repeat(2,1fr)}} .karte-eck{background:var(--papier2);border:1px solid var(--linie);border-top:4px solid var(--rot); padding:20px;display:flex;flex-direction:column} /* Nepo, 14.09.2026 (Runde 20): "diese aufklappbaren Sachen, wo immer Warum steht, nicht ganz unten erscheinen, sobald eines der Warums in einem anderen Fenster aufgeklappt ist, sondern bei den anderen auch oben bleiben, sondern das muss immer direkt unter dem Text Warum sein." Ursache: margin-top:auto schob den Aufklapper an den unteren Kachelrand; das Grid streckte alle Kacheln einer Zeile auf die Hoehe der offenen Kachel (align-items:stretch ist Standard), und geschlossene Nachbarn rutschten dadurch weit nach unten. align-items:start nimmt dem Grid das Strecken, der Aufklapper bleibt direkt hinter der Beschreibung. */ .band--grau .karte-eck{background:#F7F5F0} .karte-eck svg{width:26px;height:26px;fill:none;stroke:var(--rot);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:12px} .karte-eck b{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.08em;font-size:12.5px;color:var(--rot2);margin-bottom:7px} .karte-eck strong{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.01em;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1;color:var(--tinte); margin-bottom:9px} .karte-eck span{display:block;font-size:.96rem;line-height:1.55;color:var(--tinte2)} /* ── „Warum?" direkt in der Kachel ──────────────────────────────────── Nepo, 12.09.2026: „man kann das eigentlich bei all diesen sechs Punkten machen, dass das gleich mal aufklappt und eine kleine nette Formulierung kriegt, wieder mit diesem roten Link mit Pfeil und dann steht kurz Warum dahinter die Erklärung … Dass man das nicht erst später liest, sondern gleich am Anfang." Deshalb steckt die Begruendung jetzt IN der Kachel und nicht mehr in einem Sammel-Aufklapper weiter unten. Der Pfeil dreht sich beim Oeffnen. */ .warum{margin-top:12px;border-top:1px solid var(--linie);padding-top:10px} .warum summary{list-style:none;cursor:pointer;padding:0;font-family:var(--fd);font-weight:700; text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--rot); display:inline-flex;align-items:center;gap:7px} .warum summary::-webkit-details-marker{display:none} .warum summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);transform:rotate(45deg) translate(-1px,-1px); transition:transform .18s} .warum[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .warum summary:hover{color:var(--rot-hell)} .warum p{margin:10px 0 0;font-size:.92rem;line-height:1.55;color:var(--tinte2)} .warum p:last-child{margin-bottom:0} /* In der Kachel darf der Aufklapper nicht wie ein eigener Kasten wirken */ .karte-eck .warum{background:none;border-left:0;border-right:0;border-bottom:0} /* ⛔ `.karte-eck strong` ist die grosse Kennzahl der Kachel („60 MINUTEN"). Ein im Aufklapptext ODER im Beschreibungs- derselben Kachel erbt diesen Stil und wird zur Ueberschrift — gefunden am 12.09.2026 im Aufklapper „Was bereitliegt" und in der Kachel „Anmoderation". Hier zurueckgesetzt auf normale Hervorhebung im Fliesstext. */ .karte-eck .warum strong,.karte-eck .warum b,.karte-eck span strong,.karte-eck span b{display:inline;font-family:var(--fb); font-weight:700;text-transform:none;letter-spacing:0;font-size:inherit; line-height:inherit;color:var(--tinte)} /* Ein „Warum" im Fliesstext statt in einer Kachel — eigene Zeilenbreite, damit es neben dem schwebenden Bild nicht ueber die Bahn hinauslaeuft. */ .warum--breit{max-width:62ch;margin-top:var(--sp3)} .warum--breit p{font-size:.95rem} /* Verweis auf das Menue statt auf einen Link. Nepo, 12.09.2026: „du laesst sie von dort aus gleich gar nicht verlinken, sondern sagst: oben im Menue finden Sie Weiteres unter …" — damit niemand aus dem Ueberblick herausfaellt, ohne den Weg zurueck zu kennen. */ .hinweis-menue{margin-top:10px;padding:9px 12px;border-left:3px solid var(--rot); background:var(--papier2);font-size:.9rem;line-height:1.5;color:var(--tinte2)} .band--grau .hinweis-menue{background:#F7F5F0} .hinweis-menue b{font-family:var(--fd);letter-spacing:.03em;color:var(--tinte)} /* ── Bildband quer durch die Seite ──────────────────────────────────── Grafische Atempause zwischen zwei Textstrecken. Nepo: „die ganzen Seiten noch durchtränkt werden durch Grafiken". Immer mit Unterschrift, damit erkennbar bleibt, was zu sehen ist. */ .bildband{margin:var(--sp4) 0 0} .bildband button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .bildband img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover} /* ⛔ Eine Bildzeile, die ueber die ganze Bandbreite laeuft, klebt an der linken Seitenkante — Nepo, 13.09.2026: „das sieht leider niemals gut aus." Sie gehoert unter die Mitte des Bildes. */ .bildband figcaption{margin-top:9px;font-size:.84rem;color:var(--leise);line-height:1.5; text-align:center;max-width:72ch;margin-inline:auto} /* Ein Bildschirmfoto als Beleg braucht nicht die volle Bandbreite. */ .bildband--beleg{width:min(760px,100%);margin-inline:auto} /* ⛔ Hochformat im Bildband — 13.09.2026. `.bildband img` schneidet mit `max-height:420px; object-fit:cover` jedes Bild auf ein Querband zu. Bei einem Hochformat bleibt davon ein Streifen aus der Mitte uebrig: Koepfe und Buehnen verschwinden oben. Nepo hat genau das schon zweimal beanstandet. Ein Hochformat bekommt deshalb seine eigene Bauform — mittig, schmaler, ungeschnitten. */ .bildband--hoch button{max-width:min(100%,460px);margin-inline:auto} .bildband--hoch img{max-height:none;object-fit:contain} .bildband--hoch figcaption{max-width:min(100%,460px);margin-inline:auto;text-align:center} /* ⛔ Im Bildpaar muessen beide Bilder GLEICH hoch sein. Nepo, 13.09.2026: „Da hast du ein Bild größer als das andere gemacht." `max-height` allein reicht dafuer nicht — ein Hochformat und ein Querformat laufen darunter auf verschiedene Hoehen hinaus. Eine feste Hoehe fuer beide erzwingt die gleiche Kante; geschnitten wird vom oberen Drittel aus, damit Gesichter im Bild bleiben. */ .bildpaar .bildband img{height:clamp(240px,30vw,400px);max-height:none; object-fit:cover;object-position:center 30%} .bildpaar .bildband figcaption{min-height:2.8em} /* ⛔⛔ DAS PRINZIP, das durchgehend gilt — Nepo, 13.09.2026: „Sie dürfen zwar linksbündig sein, müssen aber mittig sein. Das ist ein Prinzip, das du durchgehend falsch machst." Gemeint ist der BLOCK, nicht die Zeile: Eine Überschrift oder ein Absatz mit Breitenbegrenzung sitzt mittig auf der Seite, der Text darin bleibt linksbündig. Ohne `margin-inline:auto` klebt jeder begrenzte Block links, und ab etwa 1100 px faellt das auf. Diese Sammelregel greift fuer alles, was eine eigene Satzbreite hat. */ .bahn,.h2,.eyebrow,.gewerk,.weiter,.karten,.bildband,.bildpaar,.formatreihe, .stationen,.kasten,.hinweis{margin-inline:auto} section > .innen > h2,section > .innen > p,section > .innen > .bahn{margin-inline:auto} .bahn{max-width:72ch} /* ⛔ R20-16, 14.09.2026 — Nepo: "Du musst nicht immer alles so auf einen schmalen Raum generell draengen, die Schrift, wenn wir eine groessere Website haben. Hauptsache es funktioniert responsiv." Auf sehr breiten Schirmen darf der Lesetext etwas mehr vom vorhandenen Platz nutzen — bleibt aber eine Lesespalte, kein Vollausschlag. */ @media(min-width:1300px){ .bahn{max-width:86ch} } .h2{max-width:26ch} /* Ueberschrift und Augenbraue stehen ueber ihrem Block, nicht am Rand. */ .eyebrow{max-width:72ch} /* ── Kleine Bilder in den Aufklappern ───────────────────────────────── Nepo, 13.09.2026: „Es könnten noch ein paar Bilder mehr sein. Sie müssen nicht so groß sein, sondern sie können zum Beispiel bei den Aufklapp- sektionen dabei sein." Sie schwimmen rechts im Text und nehmen nur ein Drittel — am Handy stehen sie darueber, volle Breite. */ /* ⛔ Kleiner als vorher — Nepo, 13.09.2026: „diese Bilder in den aufklappbaren Sachen können ein bisschen kleiner sein. Die sind ein bisschen dominierend." 320 → 260 px, Anteil 42 → 34 %. */ /* ⛔⛔ 13.09.2026 — Nepos Grundgesetz fuer diese Strecke, woertlich: „Das musst du dir wirklich grundsaetzlich mal merken, dass es eine Seite ist, die mittig aufgebaut ist." Ein umflossenes Bild haengt IMMER an einer Kante. Zusammen mit linksbuendigem Text wirkt der ganze Block dann links angeschlagen — genau das hat Nepo an sechs Stellen nacheinander beanstandet (Buehnenbild, Lichtsteuerung, Technikdetails, Merchandising, Zeitungsinterview, Stationstexte). Deshalb gibt es auf dieser Strecke KEIN `float` mehr. Bilder stehen als eigener, mittiger Block im Textfluss — so, wie es am Handy laengst funktioniert: „bei der mobilen Seite funktioniert das mit den Fotos insgesamt recht gut." Der Abstand ober- und unterhalb ist Absicht (Nepo, Runde 12: „dass zwischen Fotos und Text ein bisschen Abstand ist, damit es nicht so aneinandergeklebt ist"). */ .kleinbild{float:none;width:min(420px,100%);margin:var(--sp3) auto} .kleinbild img{display:block;width:100%;height:auto;border:1px solid var(--linie)} .kleinbild figcaption{margin-top:8px;font-size:.8rem;line-height:1.45;color:var(--leise); text-align:center} /* Hochformate duerfen nicht die halbe Seite fuellen — Nepo zur Garderobe: „ein riesiges Bild drunter zu kleben hat wenig Sinn in der Groesse." */ .kleinbild--hoch{width:min(300px,100%)} /* Eine Karte darf breiter sein als ein Foto — sonst verschwinden die Grenzen. */ .kleinbild--karte{width:min(460px,100%)} .kleinbild button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .kleinbild button:focus-visible{outline:2px solid var(--rot);outline-offset:2px} /* ── Fotoreihe: mehrere kleine Bilder nebeneinander ────────────────── Nepos Vorschlag vom 13.09.2026: „Eventuell mehrere kleine Fotos nebeneinander." Loest zugleich die Groessenfrage, an der das Bildpaar zweimal gescheitert ist: Vier gleiche Zellen koennen gar nicht ungleich hoch werden. */ .fotoreihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:var(--sp4) auto 0; max-width:1116px} /* Ein Bild in einer Reihe muss sich vergroessern lassen — Nepo, 13.09.2026: „wenn man draufklickt wieder groesser, wie immer." */ .fotoreihe figure{margin:0} .fotoreihe button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .fotoreihe button:focus-visible{outline:2px solid var(--rot);outline-offset:2px} /* ── Zwei Hochformate nebeneinander ergeben ein Breitbild ──────────── Nepo, 13.09.2026 zum Merchandising-Paar: „Die sind ja beide hochkant, insofern ist es so wie ein Breitbild, aber eben nicht links, wie du es gemacht hast, sondern mittig und vor allem nebeneinander." ⛔ NICHT `.fotoreihe` benutzen: die schneidet auf eine feste Hoehe zu und macht aus zwei Hochformaten zwei breite Streifen. Hier bleibt das natuerliche Seitenverhaeltnis stehen. */ .bildduo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.6vw,18px); width:min(560px,100%);margin:var(--sp3) auto} /* Zwei Querformate nebeneinander brauchen mehr Platz als zwei Hochformate. */ .bildduo--quer{width:min(1000px,100%)} @media(max-width:640px){ .bildduo--quer{grid-template-columns:minmax(0,1fr);width:min(520px,100%)} } .bildduo figure{margin:0} .bildduo button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .bildduo img{display:block;width:100%;height:auto;border:1px solid var(--linie)} .bildduo figcaption{margin-top:8px;font-size:.8rem;line-height:1.45;color:var(--leise); text-align:center} /* ── Anzeigenformate nebeneinander, in ihrem echten Format ─────────── Zeigt, was „Feed, Stories, Reels" tatsaechlich heisst. Unten buendig, damit die drei unterschiedlichen Hoehen eine Linie bekommen. */ .anzeigenreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end; gap:clamp(10px,2vw,22px);width:min(720px,100%);margin:var(--sp3) auto 0} .anzeigenreihe figure{margin:0} .anzeigenreihe button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .anzeigenreihe img{display:block;width:100%;height:auto;border:1px solid var(--linie)} .anzeigenreihe figcaption{margin-top:8px;font-size:.78rem;line-height:1.4;color:var(--leise); text-align:center} @media(max-width:520px){ .anzeigenreihe{grid-template-columns:minmax(0,1fr);width:min(320px,100%)} } /* ⛔ Kleine Notizen standen bisher ueber die volle Bandbreite und klebten damit an der linken Seitenkante — Nepo, 13.09.2026: „den hast du auch wieder linksbuendig, also links an die Seite hingeklebt. Das sieht leider niemals gut aus." */ .klein{max-width:72ch;margin-inline:auto} /* ── Schrittliste in den Aufklappern ───────────────────────────────── ⛔ Nepo, 13.09.2026 zu „Ist geregelt / Liegt bereit / Laeuft direkt": „ist grafisch, sobald man oeffnet, leicht unuebersichtlich von der Aufbereitung der Texte, wann sie wo kommen." Gemeint ist die Reihenfolge: Aus drei Fliesstext-Absaetzen liest niemand heraus, was wann passiert. Jeder Schritt bekommt deshalb seine eigene Zeitmarke links und steht als eigener Block. Kein neuer Ton, nur die vorhandene Zeitmarken-Optik der Stationen. */ .schritte{margin:0;padding:0;list-style:none} .schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px; padding:10px 0;border-top:1px solid var(--linie)} .schritte li:first-child{border-top:0;padding-top:0} .schritte b{grid-column:1;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.1em;font-size:10.5px;color:var(--rot);line-height:1.6;white-space:nowrap} .schritte span{grid-column:2;font-size:.94rem;line-height:1.55} @media(max-width:520px){ .schritte li{grid-template-columns:minmax(0,1fr)} .schritte b,.schritte span{grid-column:1} } .fotoreihe img{display:block;width:100%;height:clamp(120px,13vw,190px);object-fit:cover; object-position:center 38%;border:1px solid var(--linie)} .fotoreihe figcaption{margin-top:6px;font-size:.78rem;line-height:1.4;color:var(--leise)} @media(max-width:820px){ .fotoreihe{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:420px){ .fotoreihe{grid-template-columns:minmax(0,1fr)} } .warum > p:last-of-type::after{content:'';display:block;clear:both} .bildband--platzhalter figcaption::before{content:"Platzhalter · ";color:var(--ocker);font-weight:600} /* Zwei Bilder nebeneinander */ .bildpaar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:var(--sp4) 0 0} @media(max-width:700px){.bildpaar{grid-template-columns:minmax(0,1fr)}} .bildpaar .bildband{margin:0} /* ── Aufklapper ────────────────────────────────────────────────────── */ details:not(.warum):not(.station):not(.gewerk){background:var(--papier2);border:1px solid var(--linie);margin:8px 0} .band--grau details:not(.warum):not(.station):not(.gewerk){background:#F7F5F0} details.warum{background:none;border:0} details:not(.warum):not(.station):not(.gewerk) > summary{list-style:none;cursor:pointer;padding:13px 46px 13px 16px;position:relative; font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em; font-size:14px;color:var(--tinte)} details:not(.warum):not(.station):not(.gewerk) > summary::-webkit-details-marker{display:none} details:not(.warum):not(.station):not(.gewerk) > summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px; border-right:2px solid var(--rot);border-bottom:2px solid var(--rot); transform:translateY(-70%) rotate(45deg);transition:transform .18s} details:not(.warum):not(.station):not(.gewerk)[open] > summary::after{transform:translateY(-30%) rotate(225deg)} details:not(.warum):not(.station):not(.gewerk) > summary:hover{color:var(--rot)} summary .zusatz{display:block;font-family:var(--fb);font-weight:400;text-transform:none; letter-spacing:0;font-size:13.5px;color:var(--leise);margin-top:3px} .auf__inhalt{padding:2px 16px 16px;border-top:1px solid var(--linie)} .auf__inhalt > :first-child{margin-top:14px} .auf__inhalt > :last-child{margin-bottom:0} /* ── Erklaerfilm direkt im Text ──────────────────────────────────────── Nepo, 12.09.2026: „das Erklärvideo nicht immer extra irgendwo machen, sondern gleich in den Text schön einbinden, dass es drunter ist, und zwar so, dass es gut aussieht sowohl in der mobilen Version als auch in der großen Version." Deshalb kein eigener Aufklapper mehr, sondern ein Streifen: links das Standbild, rechts der Satz dazu. Unter 560 px stapelt er sich. */ /* ⛔ Neufassung 12.09.2026. Nepo: „Die Videos alle übrigens nicht quer, sondern so wie wir sie haben, mittig und größer mit dem Text drunter." Bis dahin war die Kachel zweispaltig (kleines Standbild links, Text rechts) — das Video war damit das kleinste Element im Abschnitt, obwohl es zuerst angesehen werden soll. Jetzt: Standbild oben in voller Breite des Kastens, Text darunter, der Kasten mittig und hoechstens 640 px breit. In einer .filmreihe wird die Breitenbegrenzung wieder aufgehoben. */ .film{display:block;background:var(--papier2);border:1px solid var(--linie); border-top:4px solid var(--rot);padding:0 0 14px;margin:var(--sp2) auto; width:100%;max-width:640px;text-align:left;cursor:pointer; font-family:var(--fb);color:var(--tinte2);font-size:.95rem;line-height:1.5} .film > span:last-child{display:block;padding:12px 16px 0} .filmbuehne .film{max-width:100%} .band--grau .film{background:#F7F5F0} .film:hover,.film:focus-visible{border-color:var(--linie2);border-left-color:var(--rot-hell);background:#fff} .film:focus-visible{outline:2px solid var(--ocker);outline-offset:2px} /* ⛔ `display:block` ist Pflicht, nicht Kosmetik. `.film__bild` ist ein . Solange `.film` ein Grid war, wurde er als Grid-Item automatisch blockifiziert; seit der Umstellung auf `display:block` (12.09.2026, Video oben statt links) blieb er inline — `aspect-ratio` und das `inset:0` des Abspielknopfs greifen dann ins Leere, und der rote Knopf sass links oben in der Ecke statt in der Bildmitte. Von Nepo per Screenshot gemeldet. */ .film__bild{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#14100E} .film__bild img{width:100%;height:100%;object-fit:cover;display:block} .film__play{position:absolute;inset:0;display:grid;place-items:center} .film__play span{width:40px;aspect-ratio:1;background:rgba(var(--rot-rgb),.94);display:grid; place-items:center;border:2px solid #F7F1E4} .film__play span::after{content:"";border-left:13px solid #F7F1E4;border-top:8px solid transparent; border-bottom:8px solid transparent;margin-left:4px} .film__t{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.05em;font-size:14px;color:var(--tinte);margin-bottom:5px} .film__u{display:block;color:var(--leise);font-size:.9rem} .film__avatar{display:block;margin-top:7px;font-size:.82rem;color:var(--leise);font-style:italic} @media(max-width:560px){ .film{grid-template-columns:1fr;gap:11px} .film__bild{max-width:none} } /* ── Bilderstreifen ────────────────────────────────────────────────── */ /* ⛔ IN DER VORSCHAU WIRD NICHTS ABGESCHNITTEN. Nepo, 12.09.2026: „versuchen, dass in der kleinen Variante hier auch der Kopf nicht abgeschnitten ist. Wenn ein Foto hochkant ist, ist es hochkant." Vorher stand hier `object-fit:cover` in einem 4:3-Kasten — das schnitt bei jedem Hochformat oben und unten weg, also genau den Kopf. Jetzt `contain` auf ruhigem Grund: Querformat fuellt die Breite, Hochformat bleibt hochkant, beides vollstaendig sichtbar. Die Reihe steht mittig, solange sie die Breite nicht ausfuellt. */ .bilder{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:var(--sp2) 0 0} .bild{background:var(--papier2);border:1px solid var(--linie);display:flex;flex-direction:column; flex:0 1 190px} .band--grau .bild{background:#F7F5F0} .bild__flaeche{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden; background:#E6E1D6;border:0;padding:0;cursor:zoom-in} .bild__flaeche img{width:100%;height:100%;object-fit:contain;display:block} .bild__fuss{padding:9px 11px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .bild__fuss span{font-size:11.5px;color:var(--leise);line-height:1.35} .bild__lade{flex:0 0 auto;display:inline-grid;place-items:center;width:28px;height:28px; border:1px solid var(--linie2);border-radius:3px;color:var(--rot)} .bild__lade:hover,.bild__lade:focus-visible{background:var(--rot);color:#fff;border-color:var(--rot)} .bild__lade svg{width:14px;height:14px;fill:currentColor} /* ── Buehnenbild-Galerie (Schiene mit Pfeilen) ─────────────────────── */ .schiene-wrap{position:relative;margin:var(--sp2) 0 0} .schiene{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory; padding:4px 0 10px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .schiene::-webkit-scrollbar{display:none;height:0;width:0} .szene{flex:0 0 clamp(260px,42vw,460px);scroll-snap-align:start;background:var(--papier2); border:1px solid var(--linie);padding:0;cursor:zoom-in;text-align:left;color:inherit;font:inherit} .szene:hover,.szene:focus-visible{border-color:var(--rot)} .szene img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover} .szene span{display:block;padding:10px 13px 12px;font-size:.88rem;color:var(--leise);line-height:1.45} .pfeil{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:3; width:clamp(40px,4.4vw,50px);height:clamp(40px,4.4vw,50px);border-radius:50%;cursor:pointer; background:var(--rot);border:2px solid var(--rot-hell);color:#F7F1E4; display:grid;place-items:center;padding:0; box-shadow:0 4px 16px rgba(20,16,14,.3);transition:background .18s,transform .18s} .pfeil svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:3.4; stroke-linecap:square;stroke-linejoin:miter} .pfeil:hover,.pfeil:focus-visible{background:var(--rot-hell);transform:translateY(-50%) scale(1.08)} .pfeil--l{left:calc(-1 * clamp(8px,1.4vw,20px))} .pfeil--r{right:calc(-1 * clamp(8px,1.4vw,20px))} @media(max-width:700px){.pfeil--l{left:2px}.pfeil--r{right:2px}} /* ── Bild im Fliesstext ──────────────────────────────────────────────── Nepo, 12.09.2026: „Das Bühnenbild, das in den Text unten eingebunden ist, muss nicht so groß sein. Das kannst du besser in den Text einbinden … Bei der mobilen Version ist es bereits korrekt." Deshalb: am Handy unveraendert volle Breite unter dem Absatz, ab 780 px schwimmt es rechts neben dem Text und nimmt nur noch gut ein Drittel ein. */ .grossbild{margin:0 0 var(--sp3);border:1px solid var(--linie);background:var(--papier2);padding:0} .band--grau .grossbild{background:#F7F5F0} .grossbild button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .grossbild img{display:block;width:100%;height:auto} .grossbild figcaption{padding:9px 12px;font-size:.83rem;line-height:1.45;color:var(--leise); border-top:1px solid var(--linie)} /* Siehe die Begruendung bei `.kleinbild`: kein Umfliessen mehr. Das grosse Bild steht mittig zwischen den Absaetzen, in Satzbreite statt am Rand. */ .grossbild{width:min(640px,100%);margin:var(--sp3) auto} .grossbild figcaption{text-align:center} /* ── Formatreihe: mehrere Fassungen desselben Motivs nebeneinander ─── Gebaut fuer die drei Plakatgroessen A1/A2/A3. Bewusst OHNE Download-Knopf — die Reihe zeigt Groessenverhaeltnisse, sie verteilt keine Druckdaten. Am Handy zwei Spalten, ab 620 px drei. */ .formatreihe{display:grid;grid-template-columns:1fr .707fr .5fr;align-items:end; gap:clamp(10px,2.4vw,26px);margin:0 0 14px;max-width:760px} .formatreihe figure{margin:0;border:1px solid var(--linie);background:var(--papier2)} .band--grau .formatreihe figure{background:#F7F5F0} .formatreihe button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .formatreihe img{display:block;width:100%;height:auto} .formatreihe figcaption{padding:7px 9px;font-size:.78rem;line-height:1.35;color:var(--leise); border-top:1px solid var(--linie)} .formatreihe figcaption b{display:block;color:#3D352F;font-family:var(--fd);letter-spacing:.04em} /* Unter 560 px hat die A3-Spalte keine Breite mehr fuer die Millimeter. */ @media(max-width:559px){.formatreihe figcaption span{display:none} .formatreihe figcaption{padding:6px 7px;font-size:.72rem}} /* ── Leuchtkasten ──────────────────────────────────────────────────── */ .lb{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center; background:rgba(10,8,7,.93);padding:20px} .lb[data-offen]{display:flex} .lb__rahmen{position:relative;width:min(1000px,100%);aspect-ratio:16/9;background:#000} .lb[data-offen="bild"] .lb__rahmen{aspect-ratio:auto;background:transparent;max-height:86vh} .lb[data-offen="bild"] .lb__video{display:none} .lb[data-offen="video"] .lb__bild{display:none} /* ⛔ Der Video-Kasten muss seine Hoehe selbst weitergeben. Bis 12.09.2026 stand hier nur eine Regel fuer das iframe — der Zwischencontainer .lb__video hatte keine Hoehe, ein `height:100%` darin griff ins Leere und das iframe fiel auf seine Standardhoehe von 150 px zurueck: der Player sass als kleines Rechteck mitten in einer grossen schwarzen Flaeche (von Nepo per Screenshot gemeldet). Borlabs schiebt im Livebetrieb ausserdem seine eigene Karte an diese Stelle — deshalb wird jedes direkte Kind gefuellt, nicht nur das iframe. */ .lb__video{width:100%;height:100%} .lb__video > *{width:100%;height:100%} .lb__rahmen iframe{width:100%;height:100%;border:0;display:block} /* Der Rahmen darf nie hoeher werden als das Fenster — sonst rutscht der Schliessen-Knopf ueber die Oberkante hinaus. */ .lb__rahmen{max-height:82vh} .lb[data-offen="video"] .lb__rahmen{width:min(1180px,100%)} .lb__bild{display:block;max-width:100%;max-height:86vh;margin:0 auto;object-fit:contain} .lb__zu{position:absolute;top:-44px;right:0;background:transparent;border:0;color:#F7F1E4; font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase; cursor:pointer;padding:6px 2px} .lb__zu:hover{color:var(--gold)} /* ── Der Tag als Zeitleiste zum Aufklappen ───────────────────────────── Nepo, 12.09.2026: „dieses kleine Feld, wo es dann gleich direkt aufklappt und nicht auf der Seite nach unten springt." Deshalb ist die Zeitleiste nicht mehr ein Sprungmenue ueber einer langen Seite, sondern IST die Seite: jede Station oeffnet ihren Inhalt an Ort und Stelle. Wer nur den Ablauf wissen will, liest neun Zeilen; wer eine Station braucht, klappt sie auf. Die Zeitspalte bleibt links stehen wie auf einem Tagesplan. */ .tag{margin:var(--sp3) 0 0;border-top:2px solid var(--rot)} .station{border-bottom:1px solid var(--linie2);background:var(--papier2);margin:0} .band--grau .station{background:#F7F5F0} .station[open]{background:#fff;box-shadow:0 2px 14px rgba(20,16,14,.07)} .band--grau .station[open]{background:#fff} .station > summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:150px 1fr 34px;gap:6px 20px;align-items:baseline; padding:16px 8px 16px 16px} .station > summary::-webkit-details-marker{display:none} .station > summary:hover{background:rgba(var(--rot-rgb),.04)} .station__zeit{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.09em; font-size:12.5px;color:var(--rot)} .station__titel{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.1;color:var(--tinte)} .station__kurz{display:block;font-family:var(--fb);font-weight:400;text-transform:none; letter-spacing:0;font-size:.95rem;line-height:1.5;color:var(--leise);margin-top:5px} .station__pfeil{justify-self:end;align-self:center;width:30px;height:30px;border-radius:50%; border:1.5px solid var(--linie2);display:grid;place-items:center;transition:background .16s} .station__pfeil::after{content:"";width:8px;height:8px;border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);transform:translateY(-2px) rotate(45deg);transition:transform .18s} .station[open] .station__pfeil{background:var(--rot);border-color:var(--rot)} .station[open] .station__pfeil::after{border-color:#fff;transform:translateY(1px) rotate(225deg)} .station__inhalt{padding:0 16px 22px;border-top:1px solid var(--linie)} /* ── Gewerke ────────────────────────────────────────────────────────── Nepo, 12.09.2026: „Eckdaten sofort sichtbar → Details direkt an derselben Stelle aufklappbar." Bauform wie die Stationen der Ablaufseite, nur mit der Zustaendigkeit statt der Uhrzeit in der ersten Spalte. Unter 620 px rutscht die Marke ueber den Titel, damit der Titel nicht auf zwei Zeichen zusammenschrumpft. */ .gewerke{margin:var(--sp3) 0 0;border-top:2px solid var(--rot)} .gewerk{border-bottom:1px solid var(--linie2);background:var(--papier2);margin:0} .band--grau .gewerk{background:#F7F5F0} .gewerk[open]{background:#fff;box-shadow:0 2px 14px rgba(20,16,14,.07)} .gewerk > summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:148px 1fr auto;gap:14px;align-items:start;padding:15px 16px; -webkit-tap-highlight-color:transparent} .gewerk > summary::-webkit-details-marker{display:none} .gewerk > summary:hover{background:rgba(var(--rot-rgb),.04)} .gewerk__wer{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.08em; font-size:11.5px;padding-top:3px;line-height:1.35} .gewerk__wer--haus{color:var(--rot)} .gewerk__wer--nepo{color:var(--gruen)} .gewerk__t{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.02em; font-size:clamp(1rem,1.5vw,1.14rem);color:var(--tinte);line-height:1.25} .gewerk__kurz{display:block;font-family:var(--fb);font-weight:400;text-transform:none; letter-spacing:0;font-size:.9rem;color:var(--leise);margin-top:4px;line-height:1.45} .gewerk__pfeil{justify-self:end;align-self:center;width:30px;height:30px;border-radius:50%; border:1px solid var(--linie2);display:grid;place-items:center;transition:background .16s,border-color .16s} .gewerk__pfeil::after{content:"";width:8px;height:8px;border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);transform:translateY(-2px) rotate(45deg);transition:transform .18s} .gewerk[open] .gewerk__pfeil{background:var(--rot);border-color:var(--rot)} .gewerk[open] .gewerk__pfeil::after{border-color:#fff;transform:translateY(1px) rotate(225deg)} .gewerk__inhalt{padding:2px 16px 20px;border-top:1px solid var(--linie)} .gewerk__inhalt > :first-child{margin-top:14px} .gewerk__inhalt > :last-child{margin-bottom:0} .gewerk__inhalt ul{margin:10px 0 14px;padding-left:20px;line-height:1.6} .gewerk__inhalt li{margin-bottom:7px} .gewerk__inhalt .h4{margin-top:var(--sp2)} @media(max-width:619px){ .gewerk > summary{grid-template-columns:1fr auto;gap:4px 12px;padding:13px 13px} .gewerk__wer{grid-column:1;padding-top:0;font-size:10.5px} .gewerk__t{grid-column:1} .gewerk__pfeil{grid-column:2;grid-row:1 / span 2} } .station__inhalt > :first-child{margin-top:18px} .station__inhalt > :last-child{margin-bottom:0} .station__inhalt .bahn{max-width:72ch} @media(max-width:700px){ .station > summary{grid-template-columns:1fr 30px;gap:4px 12px;padding:14px 8px 14px 14px} .station__zeit{grid-column:1/-1} .station__pfeil{grid-row:2;grid-column:2} .station__inhalt{padding:0 14px 18px} } .baustein{background:var(--papier2);border:1px solid var(--linie);padding:18px;margin:12px 0} .band--grau .baustein{background:#F7F5F0} .baustein p{font-size:.97rem} .baustein p:last-child{margin-bottom:0} /* ── Pressetext mit Kopf ─────────────────────────────────────────────── Nepo, 12.09.2026: „Da fehlt ja jetzt zum Beispiel der Titel und Untertitel oben und auch was es ist … Solo-Kabarett." Kopfzeilen liegen INNERHALB des Kopier-Containers, damit sie mit in der Zwischenablage landen. */ .baustein--presse{padding:0} .baustein--presse > p{padding:0 20px} .baustein--presse .pt__gattung{margin:0;padding-top:18px!important;font-family:var(--fd);font-weight:700; font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rot)} .baustein--presse .pt__titel{margin:6px 0 0;font-family:var(--fd);font-weight:700;line-height:1.02; font-size:clamp(1.6rem,4.2vw,2.5rem);letter-spacing:.02em;color:var(--tinte)} .baustein--presse .pt__unter{margin:2px 0 0;font-family:var(--fd);font-weight:600; font-size:clamp(1rem,2vw,1.22rem);letter-spacing:.04em;color:var(--tinte2)} .baustein--presse .pt__unter{padding-bottom:14px;border-bottom:1px solid var(--linie)} .baustein--presse .pt__unter + p{margin-top:16px} .baustein--presse > p:last-child{padding-bottom:18px} .baustein--presse .pt__zitat{font-style:italic} .baustein--presse .pt__zitat strong{font-style:normal} /* ── Zwei Erklaerfilme nebeneinander ────────────────────────────────── Nepo, 12.09.2026: „als Blöcke nebeneinander … in der Querformatform". Die Film-Kachel kippt dafuer von zweispaltig (Bild links) auf einspaltig (Bild oben, Text darunter). Unter 700 px stapeln sich die Bloecke. */ .filmreihe{display:grid;grid-template-columns:1fr;gap:16px;margin:var(--sp2) 0} @media(min-width:700px){.filmreihe{grid-template-columns:repeat(2,1fr)}} .filmreihe .film{grid-template-columns:1fr;align-items:start;gap:12px;margin:0;height:100%} .filmreihe .film__bild{width:100%} /* Aufzaehlung im Aufklapptext */ .liste{margin:10px 0 0;padding-left:20px;font-size:.95rem;line-height:1.6;color:var(--tinte2)} .liste li{margin-bottom:7px} .liste li:last-child{margin-bottom:0} /* ── Reiter ──────────────────────────────────────────────────────────── Nepo, 12.09.2026: „Pressetext und Pressefotos auch klickbar machen, dass das nicht als langer Wurm ist." Die Knopfleiste ist bewusst dieselbe Bauform wie der Technik-Umschalter, nur kleiner: rote Umrandung fuer die aktive Wahl, nichts blinkt, nichts springt. */ .reiter{margin:var(--sp3) 0} .reiter__knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp2); padding-bottom:var(--sp2);border-bottom:1px solid var(--linie)} .rschalt{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.07em; font-size:.78rem;padding:9px 15px;border:1px solid var(--linie);background:var(--papier2); color:var(--tinte2);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:border-color .15s,color .15s,background .15s} .band--grau .rschalt{background:#F7F5F0} .rschalt:hover{border-color:var(--rot);color:var(--rot)} .rschalt:active{background:#FFF} .rschalt[aria-pressed="true"]{border-color:var(--rot);color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot);background:#FFF} .reiter--fein{margin:var(--sp2) 0 0} .reiter--fein .reiter__knoepfe{border-bottom:0;padding-bottom:0;margin-bottom:14px} .reiter--fein .rschalt{font-size:.73rem;padding:7px 12px} /* Ein einzelnes Video als Buehne: mittig, gross, Text darunter. */ .filmbuehne{margin:var(--sp2) 0} /* Drei Trailer nebeneinander bleiben schmal — hier zaehlt der Vergleich, nicht die Groesse. */ .filmreihe--drei{grid-template-columns:1fr} @media(min-width:760px){.filmreihe--drei{grid-template-columns:repeat(3,1fr)}} .filmreihe .film{max-width:none;margin:0} /* Ein Grossbild, das nicht im Text schwimmt, sondern mittig steht. */ .grossbild--mitte{width:min(460px,100%);margin:var(--sp3) auto} /* ── Knoepfe und Downloads ─────────────────────────────────────────── */ .knopfzeile{display:flex;gap:11px;flex-wrap:wrap;margin:var(--sp3) 0 0} .knopf{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-weight:700; text-transform:uppercase;letter-spacing:.09em;font-size:13.5px;padding:12px 20px; background:var(--rot);color:#fff;border:2px solid var(--rot);cursor:pointer;border-radius:2px} .knopf:hover,.knopf:focus-visible{background:var(--rot2);border-color:var(--rot2)} .knopf--leer{background:transparent;color:var(--rot)} .knopf--leer:hover,.knopf--leer:focus-visible{background:var(--rot);color:#fff} .knopf svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto} .lade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:var(--sp3) 0} .lade a{display:block;background:var(--papier2);border:1px solid var(--linie); border-top:4px solid var(--rot);padding:16px;color:var(--tinte2)} .band--grau .lade a{background:#F7F5F0} .lade a:hover,.lade a:focus-visible{border-color:var(--linie2);border-top-color:var(--rot-hell);background:#fff} .lade b{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.05em;font-size:15px;color:var(--tinte);margin-bottom:5px} .lade span{display:block;font-size:.9rem;color:var(--leise);line-height:1.45} .lade em{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:600;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--rot);margin-top:9px;font-style:normal} .lade em::before{content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%; border:1.3px solid currentColor;background:center/9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8241E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='M6.5 11.5 12 17l5.5-5.5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")} /* ── Weiter-Leiste am Seitenende: die Fuehrung durch die Strecke ─────── */ /* ⛔ EIN Balken, nicht zwei Kaesten. Nepo, 13.09.2026: „Das kann in demselben Button sein, nicht auf zwei getrennt. Das sieht komisch aus, also innerhalb derselben Linie." Zurueck links, Weiter rechts, eine gemeinsame Kante dazwischen. Am Handy klappt der Balken untereinander. */ .weiter{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:var(--sp4) auto 0; border:1px solid var(--linie);background:var(--papier2);max-width:100%} .band--grau .weiter{background:#F7F5F0} /* R20 · Nepo: "Diese Zeilen zu Zurueck und Vorwaerts koennen in derselben Zeile stehen und muessen nicht untereinander stehen in der mobilen Version." Beide Spalten bleiben deshalb auch am Handy nebeneinander; nur Innenabstand und Schrift werden enger. */ @media(max-width:480px){.weiter a{padding:12px 10px}.weiter b{font-size:.86rem}.weiter i{font-size:9.5px}} .weiter a{display:block;background:none;border:0;border-right:1px solid var(--linie);padding:16px 18px; color:var(--tinte2)} .weiter a:last-child{border-right:0} .weiter a:hover,.weiter a:focus-visible{background:#fff;outline:none} .weiter a:hover b,.weiter a:focus-visible b{color:var(--rot)} .weiter i{display:block;font-style:normal;font-family:var(--fd);font-weight:600;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin-bottom:5px} .weiter b{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.04em;font-size:1.05rem;color:var(--tinte)} .weiter--vor{text-align:right} .weiter--vor i{color:var(--rot)} /* ── Der „gleich alles"-Weg sieht anders aus als der Weg der Reihe nach ── Nepo, 13.09.2026: „Den Button ‚Gleich alles mitnehmen' würde ich unterscheiden von dem der Reihe nach … damit klar ist: Das ist so ein Button, wo man gleich alles bekommt. Somit bleibt die Führung besser." Der Abkuerzungs-Weg bekommt den roten Grund, der Reihen-Weg bleibt ruhig. */ .weiter--einzeln{grid-template-columns:1fr} /* Die Abkuerzung ist bewusst leiser als der Hauptweg: schmaler, ohne Rahmen, eine Zeile darunter. Wer der Reihe nach geht, klickt oben; wer alles auf einmal will, findet es trotzdem. */ .abkuerzung{display:block;max-width:860px;margin:10px auto 0;padding:11px 18px; text-align:center;border:1px dashed var(--linie);background:none; text-decoration:none;transition:border-color .2s,background .2s} .abkuerzung:hover,.abkuerzung:focus-visible{border-color:var(--rot);background:var(--papier2);outline:none} .abkuerzung i{display:block;font-style:normal;font-family:var(--fd);font-weight:600; font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--leise)} .abkuerzung b{display:block;margin-top:3px;font-family:var(--fd);font-weight:700; font-size:.94rem;letter-spacing:.02em;color:var(--tinte)} .abkuerzung:hover b{color:var(--rot)} .weiter--alles{background:rgba(var(--rot-rgb),.07)} .weiter--alles i{color:var(--rot)} .weiter--alles b::after{content:' ⤓';font-weight:400} .weiter--alles:hover,.weiter--alles:focus-visible{background:rgba(var(--rot-rgb),.13)} /* ── Das Ende der Strecke fuehrt sichtbar zurueck an den Anfang ──────── Nepo, 13.09.2026: „Wenn du ganz am Ende bist, von vorne überblicken … irgendwie anders gestalten, sodass man weiß: Man kommt zurück zur Startseite." Deshalb steht der Balken dort ueber die volle Breite, roter Grund, und sagt ausdruecklich, dass die Strecke hier zu Ende ist. */ .weiter--schluss{grid-column:1 / -1;text-align:center;background:var(--rot); border-right:0} .weiter--schluss i,.weiter--schluss b{color:var(--papier)} .weiter--schluss i{color:rgba(255,255,255,.78)} .weiter--schluss:hover,.weiter--schluss:focus-visible{background:var(--rot2, #8C201B)} .weiter--schluss:hover b,.weiter--schluss:focus-visible b{color:var(--papier)} /* ── Abschluss und Fuss ────────────────────────────────────────────── */ .abschluss{text-align:center} .abschluss .innen > *{margin-left:auto;margin-right:auto} .abschluss .knopfzeile{justify-content:center} /* R20-8, 14.09.2026 - Nepo: "Beim Footer steht Nepofitz-Logo auf einmal rechts. Es soll aber links stehen und aehnlich aussehen wie der Header, nur eben in Dunkel." Und weiter (Runde 20): "Dass das Nepo-Fitz-Logo im Fuss genauso gross ist und die gleiche Position hat wie im Header. Nur der Pfeil mit Hauptseite, und dann Impressum/Datenschutz. Damit es sich oben und unten nur farblich umkehrt. Die Jahreszahl sollte in der Mitte stehen, danach Impressum/Datenschutz." Zeile 1 spiegelt .kopf__zeile (Logo links, Rueckweg rechts, gleiche Schriftgroesse). Zeile 2 spiegelt die zentrierte Kopf-Navigation: Copyright, dann die beiden Rechtslinks, alles mittig. */ .fuss{background:#14100E;color:#BDB3A2;padding:var(--sp4) clamp(18px,4vw,32px)} .fuss__innen{max-width:1180px;margin:0 auto} .fuss__zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .fuss .marke b{color:#F7F1E4} .fuss .marke i{color:var(--rot-marke)} .fuss__rueck{display:inline-flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:700; font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)} .fuss__rueck:hover,.fuss__rueck:focus-visible{color:#fff} /* ⛔ Ohne eigene Regel erbt die Wortmarke im Fuss die allgemeine `.fuss a{font-size:12.5px}` (hoehere Spezifitaet als das blosse `.marke`) und schrumpft auf Fusszeilen-Groesse. Nepo: "genauso gross ... wie im Header" — 23px wie oben, keine eigene Sondergroesse mehr. */ .fuss .marke{font-size:23px} .fuss__nav{display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap; margin-top:14px} .fuss__c{margin:0;font-size:12.5px;color:#8A8075} .fuss a{color:#BDB3A2;font-family:var(--fd);font-weight:600;text-transform:uppercase; letter-spacing:.09em;font-size:12.5px} .fuss a:hover,.fuss a:focus-visible{color:var(--gold)} /* ═══ RUNDE 13 · 13.09.2026 — vier Saetze, die fuer die ganze Strecke gelten ══ Nepo, woertlich: · „die Bilderuntertitelungen auch in der Handy-Version bitte mittig" · „immer ein bisschen mit Abstand zum Foto" · „wenn eine neue Ueberschrift kommt … auch wieder ein bisschen Leerzeichen" · „generell immer ein bisschen Abstaende zu den Bildern, das sieht schoener aus" EINE Stelle statt zwanzig Einzelregeln, bewusst am Ende der Datei, damit sie jede aeltere Einzelregel ueberschreibt. */ figcaption{text-align:center} .szene span{text-align:center} /* Abstand zwischen Foto und Zeile — nur dort, wo die Zeile FREI unter dem Bild steht. `.grossbild`/`.formatreihe` tragen sie im Rahmen mit eigenem Polster; dort wuerde ein margin die Rahmenlinie aufreissen. */ .kleinbild figcaption,.bildband figcaption,.bildduo figcaption, .fotoreihe figcaption,.anzeigenreihe figcaption{margin-top:12px} /* Luft unter jedem Bildbaustein … */ .kleinbild,.bildband,.bildduo,.fotoreihe,.anzeigenreihe,.grossbild, .formatreihe,.bildpaar,.schiene-wrap{margin-bottom:var(--sp3)} /* … und eine echte Leerzeile, bevor eine neue Ueberschrift kommt. */ .kleinbild + h2,.kleinbild + h3,.kleinbild + h4, .bildband + h2,.bildband + h3,.bildband + h4, .bildduo + h2,.bildduo + h3,.bildduo + h4, .fotoreihe + h2,.fotoreihe + h3,.fotoreihe + h4, .anzeigenreihe + h2,.anzeigenreihe + h3,.anzeigenreihe + h4, .grossbild + h2,.grossbild + h3,.grossbild + h4, .bildpaar + h2,.bildpaar + h3,.bildpaar + h4, .schiene-wrap + h2,.schiene-wrap + h3,.schiene-wrap + h4{margin-top:var(--sp4)} .kleinbild + p,.bildband + p,.bildduo + p,.fotoreihe + p, .anzeigenreihe + p,.grossbild + p,.bildpaar + p,.schiene-wrap + p{margin-top:var(--sp3)} /* ⛔ Runde 13, Punkt 29 — Nepo: „diese Bilder, die hast du untereinander, aber die wollte ich ja auch nebeneinander in der Reihe haben und am besten auch wieder als Karussell, mit jeweils groesser klickbar." Am Handy fiel die `.fotoreihe` bisher auf EINE Spalte zurueck — damit standen die vier Soundcheck-Fotos gestapelt. Statt zu stapeln wird die Reihe jetzt zur Schiene: nebeneinander, mit dem Finger schiebbar, jedes Bild weiter anklickbar. Ueber 820 px bleibt alles, wie es war. */ @media(max-width:820px){ .fotoreihe{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none} .fotoreihe::-webkit-scrollbar{display:none;height:0} .fotoreihe figure{flex:0 0 min(64vw,260px);scroll-snap-align:center} .fotoreihe img{height:clamp(150px,40vw,190px)} } /* Die grosse Zeile unter der fertigen Buehne — Nepo: „unten dann in gross: so sieht's aus, wenn die Buehne steht. Das kann dann extra drunter sein." */ .bildband__gross{font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.06em;font-size:clamp(.95rem,2.1vw,1.22rem);color:var(--tinte); margin-top:16px} /* ═══ RUNDE 14 · 14.09.2026 ══════════════════════════════════════════════ */ /* 42 · Dieselbe Lupe wie auf der Programmseite — Nepo: „bei den Bildern auch wieder diesen kleinen Kreis mit der Lupe, wie schon besprochen." Auf dieser Strecke gibt es keinen `.lupe`-Span; die Knoepfe tragen `data-bild`. */ button[data-bild]{position:relative} button[data-bild]::after{content:"";position:absolute;right:9px;bottom:9px;width:30px;height:30px; border:2px solid rgba(255,255,255,.9);border-radius:50%; box-shadow:0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.45); background:rgba(20,16,14,.62) center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.3'/%3E%3Cpath d='M15.2 15.2 20.5 20.5'/%3E%3Cpath d='M10.5 7.9v5.2M7.9 10.5h5.2'/%3E%3C/svg%3E"); opacity:.9;transition:opacity .2s,transform .2s;pointer-events:none} button[data-bild]:hover::after,button[data-bild]:focus-visible::after{opacity:1;transform:scale(1.08)} /* In der Formatreihe wuerde die Lupe die kleinen A3-Kacheln zudecken. */ .formatreihe button[data-bild]::after{width:22px;height:22px;background-size:12px 12px;right:6px;bottom:6px} /* 59 · Die Unterzeilen der Erklaerfilme stehen mittig — Nepo: „auch immer wichtig, dass die Bildunterschriften von den Videos hier mittig sind in der Mobil- beziehungsweise Tablet-Version." Gilt gleich fuer alle Breiten. */ .film > span:last-child{text-align:center} .film__t,.film__u,.film__avatar{text-align:center} /* 64 · Die Soundcheck-Reihe ist jetzt eine Schiene mit Pfeilen. */ .schiene--fotos figure{flex:0 0 clamp(210px,46vw,280px);scroll-snap-align:center;margin:0} .schiene--fotos button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .schiene--fotos img{display:block;width:100%;height:clamp(140px,20vw,190px);object-fit:cover; object-position:center 38%;border:1px solid var(--linie)} .schiene--fotos figcaption{margin-top:10px;font-size:.8rem;line-height:1.45;color:var(--leise); text-align:center} /* 84 · Nepo, 14.09.2026: „sind die drei Buttons wieder links gerichtet, obwohl sie in der Mitte sein sollten, also für die Presse, für die Technik, für die Organisation." Gilt fuer jede Reiterleiste auf der Strecke. */ .reiter__knoepfe{justify-content:center} /* 48 · Die Formatbeispiele stehen eingeklappt, die Masse in der Bildzeile. */ .formate{margin:var(--sp3) auto 0;max-width:820px} .anzeigenreihe figcaption span{display:block;font-size:.72rem;letter-spacing:.04em; color:var(--leise);margin-top:2px} /* 50 · Zwei schlichte Plattform-Marken, damit die Kachel nicht so trocken ist. */ .logos{display:inline-flex;gap:5px;margin-left:7px;vertical-align:-1px} .logo{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:3px; font-style:normal;font-family:var(--fd);font-weight:700;font-size:11px;line-height:1;color:#fff} .logo--fb{background:#1877F2} .logo--ig{background:linear-gradient(45deg,#F9CE34,#EE2A7B 55%,#6228D7)} /* 81 · ⛔ Nepo, 14.09.2026, zum dritten Mal an derselben Sache: „Dann die nächste Überschrift: mindestens vier Meter breit, drei Meter tief. Die hast du wieder vergessen mittig zu machen." Die Sammelregel weiter oben macht den KASTEN mittig (`margin-inline:auto` auf `max-width:26ch`). Eine Überschrift, die kürzer ist als diese 26 Zeichen, steht darin trotzdem linksbündig — und sieht damit auf der Seite nach links gerückt aus. Gemessen am 14.09.2026: auf jeder Seite der Strecke zwei bis drei Stück. Überschriften sind kurz; sie werden zentriert gesetzt. Fließtext bleibt linksbündig. */ .h2,h2,.h3,h3,.h4,h4,.eyebrow{text-align:center} /* Aufklapper-Titel sind Bedienelemente in einer Zeile, keine Überschriften. */ /* ⛔ 14.09.2026 eingeengt: `details .h4` traf JEDE Zwischenueberschrift im aufgeklappten Inhalt — die sollen mittig stehen. Links bleiben nur die Bedienelemente, also die Beschriftungen der Aufklapper selbst. */ .gewerk__t,.station__titel,summary .h4,details > summary .h4{text-align:left} /* Drei Piktogramme an den Aufklappern „Was dabei noch zu wissen ist". Quelle: Wikimedia Commons, CC0 1.0 bzw. Public Domain — keine Namensnennung noetig, kommerziell nutzbar, veraendert (nur eingefaerbt). · Split paths divergent arrow (CC0) · Target Pinhead icon (CC0) · Calculator Pinhead icon (CC0) Sie stehen als Inline-SVG im Markup und erben ueber `currentColor` die Schriftfarbe der Zeile — damit brauchen sie keine eigene Palette. */ summary > .ikon{width:1.15em;height:1.15em;flex:0 0 auto;margin-right:.55em; vertical-align:-.16em;color:var(--rot)} details[open] > summary > .ikon{color:var(--rot2)} /* Kampagnen-Vergleich: fuenf Abende nebeneinander. Am Handy darf die Tabelle waagrecht rollen — sie in Kacheln aufzubrechen zerstoert den Vergleich, und genau der ist hier der Inhalt. */ .tabellenrahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp2) auto var(--sp3); max-width:820px} .kampagnen{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem} .kampagnen th{background:var(--rot2);color:#fff;font-family:var(--fd);font-weight:700; text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;padding:8px 10px;text-align:left} .kampagnen th:not(:first-child),.kampagnen td:not(:first-child){text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .kampagnen td{padding:9px 10px;border-bottom:1px solid var(--linie);vertical-align:top} .kampagnen tbody tr:last-child td{border-bottom:0} .kampagnen td span{display:block;font-size:.76rem;color:var(--leise);margin-top:1px} /* ═══ RUNDE 15 · 14.09.2026 ══════════════════════════════════════════════ */ /* ⛔ 1 · Nepo: „Die Buttons waren beim ersten Mal riesig groß. Erst als ich die Seite geladen habe, waren es kleine Grafiken." Ursache: Ein Inline-`` OHNE `width`/`height`-Attribut ist per Norm 300 × 150 px groß. Bis das Stylesheet greift, malt der Browser also genau diese Fläche — ein kurzer Riesen-Moment, der beim zweiten Laden aus dem Cache nicht mehr auftritt. Deshalb stehen die Maße jetzt als ATTRIBUT im Markup, nicht nur in der CSS-Regel: Ohne Stylesheet ist das Zeichen dann 18 px klein statt 300 px groß. ⚠️ Dieselbe Falle gilt für jedes weitere Inline-SVG auf diesen Seiten. */ svg:not([width]):not([height]){max-width:100%;max-height:2.4em} /* 3 + 8 · Der Vergleich steht in einem eigenen Kasten, der sich vom Seitengrund abhebt — Nepo: „sonst erkennt man es nicht." */ .vergleich{background:var(--papier2);border:1px solid var(--linie); border-top:3px solid var(--rot);padding:clamp(16px,2.4vw,26px); margin:var(--sp3) auto;max-width:100%;box-shadow:0 2px 14px rgba(20,16,14,.06)} .band--grau .vergleich{background:#fff} .vergleich .tabellenrahmen{margin-top:0} .vergleich__fuss{margin:var(--sp2) 0 0;padding:9px 12px;background:var(--grau); border-left:3px solid var(--linie2);font-size:.82rem;line-height:1.5;color:var(--leise); text-align:center} /* 7 · Die Kennzahlen-Karten stehen mittig nebeneinander. Eine Schiene braucht es nur dort, wo drei Karten nicht nebeneinanderpassen — Nepo: „ein Karussell, das man vermutlich nur im Mobilbereich braucht. Außerdem muss es da auch mittig sein." */ .kartenreihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.6vw,18px);margin-top:var(--sp3);justify-items:center} .kartenreihe figure{margin:0;width:100%} .kartenreihe button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .kartenreihe img{display:block;width:100%;height:auto;border:1px solid var(--linie)} .kartenreihe figcaption{margin-top:9px;font-size:.78rem;line-height:1.4;color:var(--leise); text-align:center} @media(max-width:760px){ .kartenreihe{display:flex;grid-template-columns:none;overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scroll-padding-inline:50%;padding-bottom:8px; scrollbar-width:none;-ms-overflow-style:none} .kartenreihe::-webkit-scrollbar{display:none;height:0} .kartenreihe figure{flex:0 0 min(78vw,320px);scroll-snap-align:center} } /* 5 + 6 · Das Detailbeispiel ist eingeklappt und innen kompakter als vorher. */ .beispiel{max-width:900px;margin-inline:auto} .kennzahlen{list-style:none;margin:var(--sp2) 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px} .kennzahlen li{background:var(--grau);border-left:3px solid var(--rot);padding:10px 13px} .kennzahlen b{display:block;font-family:var(--fd);font-weight:700;font-size:1.42rem; color:var(--rot);line-height:1.1;font-variant-numeric:tabular-nums} .kennzahlen span{display:block;margin-top:4px;font-size:.82rem;line-height:1.45;color:var(--leise)} /* ⛔ 9 · Nepo: „Insgesamt hast du den Seitenhintergrund ein bisschen problematisch gemacht … Das ist besser bei der Veranstaltungstag-Seite, weil da ist der Hintergrund von den Ausklapp-Sachen in weiß." `.station` und `.gewerk` bekamen im offenen Zustand längst `#fff` — die übrigen Aufklapper nicht. Jetzt alle gleich. */ details:not(.warum)[open]{background:#fff!important;box-shadow:0 2px 14px rgba(20,16,14,.07)} details:not(.warum)[open] > .auf__inhalt{background:#fff} /* ⛔ 10 + 12 + 14 · Nepo, 14.09.2026: „Das Bild mit dem Stand hast du in der Desktop-Seite rechts irgendwie danebengeklebt … außerdem ist es zu groß … Auch beim Abbau ist das Bild wieder zu groß … Die Bilder sind jetzt einfach so reingepappt in den Text." EINE Größe für alle Bilder, die in einem Aufklapper oder in einer Kachel stehen — nicht jede Stelle eine eigene. Sie sitzen mittig, haben einen gleichmäßigen Zuschnitt und dürfen den Text nicht dominieren; groß ansehen kann man jedes per Klick. */ .station__inhalt .kleinbild,.gewerk__inhalt .kleinbild, .karte-eck .kleinbild,.auf__inhalt .kleinbild{width:min(320px,100%);margin:var(--sp3) auto} /* ⛔ R20-25, 14.09.2026 — Nepo: "Bei diesem Wer stellt was sind die Fotos und der Text auch nicht besonders schoen eingebunden." Bilder, die neben technischen Aufzaehlungen stehen, bekommen einen leichten Rahmen, statt einfach im Text zu haengen. */ .gewerk__inhalt .kleinbild,.gewerk__inhalt .bildduo{background:var(--papier2); border:1px solid var(--linie);padding:12px 12px 10px} .band--grau .gewerk__inhalt .kleinbild,.band--grau .gewerk__inhalt .bildduo{background:#F7F5F0} .gewerk__inhalt .kleinbild img,.gewerk__inhalt .bildduo img{border:0} .station__inhalt .kleinbild img,.gewerk__inhalt .kleinbild img, .karte-eck .kleinbild img,.auf__inhalt .kleinbild img{aspect-ratio:4/3;object-fit:cover; object-position:center 42%} /* In einer Kachel ist noch weniger Platz — dort reicht ein Quadrat. */ .karte-eck .kleinbild{width:min(240px,100%);margin:14px auto 2px} .karte-eck .kleinbild img{aspect-ratio:1/1} .karte-eck .kleinbild figcaption{font-size:.74rem;margin-top:7px} /* 13 · Zwei gleich große Kacheln nebeneinander: Erklärung und Beleg. */ .bildduo .paar{margin:0} .bildduo .paar button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .bildduo .paar img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover; border:1px solid var(--linie)} .bildduo .paar figcaption{margin-top:9px;font-size:.78rem;line-height:1.4;color:var(--leise); text-align:center} /* 11 · Die Unterzeile eines Erklärfilms war je nach Länge unruhig gesetzt — Nepo: „Auch beim Untertitel von Die Show ist die Schrift nicht so schön gesetzt." Feste Zeilenhöhe, ruhigere Laufweite, mittig wie alles andere. */ .film__u{line-height:1.55;letter-spacing:.005em;max-width:46ch;margin-inline:auto} .film__t{line-height:1.3;margin-bottom:3px} /* ⛔ Ein Bildband lief auf sehr breiten Schirmen ueber die ganze Fensterbreite und wurde dort aus einer 1200-px-Datei hochskaliert — bei 1920 px gemessen: 1115 px Datei auf 1920 px gemalt, sichtbar weich. Das Band bleibt jetzt im Satzspiegel, so wie `sizes` es ohnehin annimmt. Nebenwirkung, die Nepo ausdruecklich wollte: die grossen Bilder wirken nicht mehr „reingepappt". */ .bildband{max-width:1116px;margin-inline:auto} /* ═══ RUNDE 17 · 14.09.2026 ══════════════════════════════════════════════ Steht am Ende, damit es aeltere Einzelregeln schlaegt. */ /* R17-4/7 · Collagen: vier kleine Bilder als EIN Block, nicht anklickbar. Nepo: „Die muss man nicht vergrößern können, das ist nur so eine Collage aus den vieren … Alles immer Querformat übrigens, diese Collagen." ⛔ Deshalb stehen hier nur Bilder ohne Knopf — und ausschliesslich Motive, die von Haus aus quer sind. Ein Plakat mit eingebrannter Schrift gehoert NIE in einen `cover`-Rahmen. */ .collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; max-width:min(560px,100%);margin:var(--sp3) auto 0} /* ⛔ `height:auto` ist hier KEIN Zierrat: Ohne es gewinnt der Praesentationshinweis aus dem `height`-Attribut des `` (z.B. height="533"), und sobald die Hoehe nicht `auto` ist, wird `aspect-ratio` schlicht ignoriert. Gemessen am 14.09.2026: 156x533 statt 156x104 — die Collage stand hochkant, obwohl 3/2 dastand. */ .collage img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; object-position:center;border:1px solid rgba(0,0,0,.14);border-radius:2px;background:#0e0c0b} .collage__zeile{margin:10px auto 0;max-width:min(48ch,100%);text-align:center; font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.1em; font-size:11px;color:var(--leise)} @media(max-width:560px){ .collage{grid-template-columns:minmax(0,1fr)} } /* R17-5 · Hochkant-Film im Leuchtkasten. Ohne das steht ein 9:16-Reel in einem 16:9-Fenster zwischen zwei schwarzen Balken. ⛔ Der Schliessknopf wandert dabei IN den Rahmen: bei einem hohen Video reicht der Kasten auf flachen Fenstern bis an die Oberkante, und ein Knopf auf `top:-44px` liegt dann ausserhalb des Bildschirms (Skill microsite-bauen, Fehler vom 02.09.2026). */ .lb[data-offen="video"][data-hoch] .lb__rahmen{aspect-ratio:9/16;width:min(400px,88vw); max-height:calc(100svh - 96px)} .lb[data-hoch] .lb__zu{top:8px;right:8px;z-index:3;width:40px;height:40px;border-radius:50%; background:rgba(0,0,0,.62);display:grid;place-items:center} /* R17-36 · Die Wortmarke im Fuss stand mit 12,5px da — `.fuss a` (Klasse+Typ) schlaegt `.marke` (nur Klasse). Derselbe Fehler war auf der Programmseite schon einmal behoben; hier fehlte die Gegenregel. Nepo: „Jetzt müsste das gleiche sein wie oben, nur mit dem Unterschied, dass Nepo hell sein muss, weil es ja vor einem schwarzen Hintergrund ist. und bisschen grösser." Oben sind es 23px — hier deshalb 30px. */ .fuss a.marke:hover b,.fuss a.marke:focus-visible b{color:#fff} /* R17-21 · Die Bildunterschrift im Leuchtkasten — mittig, mit Fotonachweis. */ .lb__u{margin:14px auto 0;max-width:min(60ch,100%);text-align:center; font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.1em; font-size:12.5px;line-height:1.55;color:#D8CEBE} .lb[data-offen="video"] .lb__u{display:none} .lb__foto{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;color:#9A9084} /* R17-15/25 · Knopfleisten stehen mittig. Nepo: „Die Buttons ‚Dasselbe als PDF' und ‚An die Technik weiterleiten' sind auch nicht mittig … Wenn alle drei nicht in eine Reihe passen, muss es immer so sein, dass die dritte auf der Höhe unter der ersten ist, trotzdem der gesamte Buttonblock mittig." Unter 640px stapeln sie deshalb gleich ganz — dann steht die dritte zwangslaeufig unter der ersten und der Block bleibt mittig. Darueber passen sie in eine Zeile. */ .kopf-leiste{justify-content:center} @media(max-width:640px){ .kopf-leiste{flex-direction:column;align-items:center;gap:9px} .kopf-leiste > *{width:min(320px,100%);justify-content:center;text-align:center} } /* R17-37 · Die Beschriftungen der Eckdaten-Karten standen auf JEDER Breite links. Nepo: „Gleich jetzt ist mir zum Beispiel aufgefallen, dass die Eckdaten-Überschrift nicht mittig sind." ⛔ Nur Rubrik und Kernaussage werden mittig — der Erklaertext darunter bleibt linksbuendig. Ein zentrierter Mehrzeiler liest sich zaeh, und genau dafuer steht dieser Text da. Dieselbe Trennung gilt seit Runde 13 fuer die ganze Strecke. */ .karte-eck > b,.karte-eck > strong,.karte-eck > summary,.h4,.kasten > .h4{text-align:center} .karte-eck > b,.karte-eck > strong{display:block;width:100%} /* R17-13/31 · Kaesten stehen mittig auf der Seite. Nepo: „Ein Beispiel im Detail Garching 2023 musst du mittig setzen, diesen Kasten. Dieser Abschnitt ist nicht mittig … Prüf noch mal, ob alle deine Kästen und Texte mittig sind. Generell." */ .kasten,.baustein,.vergleich,.beispiel,.auf,.faktenkasten{margin-inline:auto} /* R17-26 · Die Fotoreihe am Veranstaltungstag war am Handy 210x140 px in einer 354 px breiten Schiene — Nepo: „gequetscht. Minimal groß, man sieht sie nicht." Gemessen und auf Handybreite neu gesetzt. */ @media(max-width:640px){ .schiene--fotos figure{flex:0 0 min(80vw,320px)} .schiene--fotos img{height:clamp(200px,56vw,240px)} } /* R17-32 · Der Schluss-Weg steht rechts, nicht ueber die ganze Breite — und sieht aus wie sein Nachbar. Nepo: „links steht Bühne und Technik, rechts zurück zum Überblick. Und bitte in der gleichen Farbe, nicht in so einem Hellen, das man erst sieht, wenn man drüber hovert, sondern genauso schwarz und dann rot." */ .weiter--schluss{grid-column:auto;text-align:right;background:none;border-right:0} .weiter--schluss i{color:var(--leise)} .weiter--schluss b{color:var(--tinte)} .weiter--schluss:hover,.weiter--schluss:focus-visible{background:#fff} .weiter--schluss:hover b,.weiter--schluss:focus-visible b{color:var(--rot)} /* R17-12 · Die Unterzeile unter einer h3 — leiser als die Ueberschrift, mittig. */ .h3__unter{margin:6px auto var(--sp3);max-width:min(52ch,100%);text-align:center; font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.1em; font-size:11.5px;color:var(--leise)} /* R17-14 · „Für ganz Neugierige" — der ganze Anzeigen-Abschnitt in EINEM Aufklapper. Bewusst wie die anderen Aufklapper der Strecke, nur breiter: Wer ihn oeffnet, bekommt einen ganzen Abschnitt, keinen Absatz. */ .neugier{margin:var(--sp3) auto var(--sp3);max-width:100%} .neugier > summary{cursor:pointer;list-style:none} .neugier > summary::-webkit-details-marker{display:none} /* R17-13 · Der Garching-Kasten steht mittig, nicht an der linken Kante. */ .beispiel{margin-inline:auto;max-width:100%} /* R17-16 · Der Beispielablauf. Nepo: „Der muss natürlich schön aussehen, der Ablauf." Zeitspalte links, Vorgang rechts, dazwischen eine durchgehende Linie mit Punkten — eine Zeitleiste, keine Aufzaehlung. Die letzte Zeile (Beginn) ist hervorgehoben, weil darauf der ganze Tag zulaeuft. */ .ablauf__kopf{margin:var(--sp3) 0 10px;font-family:var(--fd);font-weight:600; text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--leise); text-align:center} .ablauf{list-style:none;margin:0 auto;padding:0;max-width:min(420px,100%); border-top:1px solid var(--linie)} .ablauf li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px; align-items:baseline;padding:9px 10px;border-bottom:1px solid var(--linie); position:relative} .ablauf li:nth-child(odd){background:rgba(0,0,0,.025)} .ablauf b{font-family:var(--fd);font-weight:700;font-size:.86rem;letter-spacing:.02em; color:var(--rot2);font-variant-numeric:tabular-nums;white-space:nowrap} .ablauf span{font-size:.9rem;line-height:1.4;color:var(--tinte2)} .ablauf .ablauf--letzt{background:rgba(var(--rot-rgb),.08)} .ablauf--letzt b{color:var(--rot)} .ablauf--letzt span{font-weight:600;color:var(--tinte)} /* R17-21/30 · Der Fotonachweis in einer Bildzeile. Nepo: „Die ganzen Fotos aus Lauingen und Allianz sind von Holger Enghardt. Fotonennung ist immer wichtig. Grundsätzlich merken." Leiser als die Bildzeile, eigene Zeile, mittig. */ /* ⛔ GEMESSEN: `.foto` allein (Spezifitaet 0-1-0) verliert gegen `.karte-eck span` (0-1-1) — die Zeile stand mit 15,36px statt 9,5px da und war lauter als die Bildzeile darueber. Eine Hilfsklasse braucht in diesem Stylesheet den Kontext mit dazu, sonst gewinnt jede Kontextregel mit Element-Selektor. */ .foto,.karte-eck .foto,figcaption .foto,.lb__u .foto{display:block;margin-top:5px; font-family:var(--fd);font-weight:600;text-transform:uppercase;letter-spacing:.1em; font-size:9.5px;opacity:.72;color:var(--leise)} /* R17-22 · Das Foto ueber den neun Stationen war ein nacktes Bild im Fluss. Nepo: „Das Foto kannst du ein bisschen schöner einrahmen, das ist nicht ganz so hübsch." Passepartout in Papierfarbe, feine Linie, ruhiger Schatten — dieselbe Bauform wie die Kaesten der Strecke, damit es nicht wie ein Fremdkoerper wirkt. */ /* ⛔⛔ R20-18, 14.09.2026 — Nepo: "Bei dem Bild die neun Stationen, kurz vor der Ruhe, das koenntest du als Polaroid-Vorschau machen. Dann sieht es ein bisschen besser aus, also wie so hingeklebt irgendwo an eine Wand." Aus dem gleichmaessigen Passepartout wird ein echtes Polaroid: schmaler Rand oben/ seitlich, breiter Steg unten fuer die Handschrift-Unterzeile, leichte Drehung, als sei es angeklebt. */ .kleinbild--rahmen{max-width:min(360px,100%);margin-inline:auto; padding:14px 14px 8px;background:#FCFAF4;border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 30px rgba(0,0,0,.16);transform:rotate(-1.6deg)} .kleinbild--rahmen img{display:block;width:100%;height:auto;filter:saturate(1.02)} .kleinbild--rahmen figcaption{padding:14px 4px 4px;text-align:center; font-family:var(--fk,var(--fd));font-size:.92rem;color:var(--tinte2); transform:rotate(.6deg)} .kleinbild--rahmen figcaption .foto{display:block;margin-top:4px} /* R17-38 · Bilder brauchen Luft. Nepo: „dass es Abstand zwischen den Bildern und der Technik gibt. Meistens ist da noch eine Textzeile oben und unten frei … Auch die Bildunterschrift braucht irgendwie eine halbe Texthöhe dazwischen, sonst ist es gequetscht." */ .kleinbild{margin-block:var(--sp3)} .kleinbild figcaption,.bildband figcaption,.schiene figcaption{margin-top:.75em} /* R-PDF-14.09.2026 · Dieser Block ist ein Rest der Bühnenanweisung (die inzwischen ihr eigenes, unabhängiges @media print in buehnenanweisung.html hat und diese Datei gar nicht laedt). Auf den fuenf Besucher-Seiten hier gab es nie einen Druckknopf -- der Block griff nur, weil Nepos iPhone/iPad "Ganze Seite" -> PDF-Export technisch die Print-Pipeline nutzt, und loeschte dabei genau die Hintergrundbilder, die er im Export sehen will (Hero-Bild auf #fff-Weiss, .band/.band--grau auf #fff statt der dunklen Seitenfarben). Deshalb bleibt hier nur, was den Export aufraeumt, ohne das Aussehen zu veraendern -- nichts, was Bilder oder Farben entfernt. */ @media print{ .kopf,.lb,.weiter,.abschluss .knopfzeile,.pfeil{display:none!important} details{border:0} .auf__inhalt{display:block!important;border:0} details summary::after{display:none} .schiene{display:block;overflow:visible} .szene{break-inside:avoid} table,.kasten,.tuer{break-inside:avoid;page-break-inside:avoid} } /* ═══ RUNDE 18 · 14.09.2026 ══════════════════════════════════════════════ Steht am Ende, damit es aeltere Einzelregeln schlaegt. */ /* R18-25 · Auf Tablet-Breiten zeigte die Buehnenbild-Galerie zwei volle Karten und ein angeschnittenes Stueck einer dritten (756px Schiene / 344px Karte = 2,2). Nepo: „darauf achten, dass in der Tablet-Vorschau zwei Bilder zu sehen sind und nicht schon ein Stückchen weit ein drittes." In diesem Fenster zeigt die Karte deshalb genau die Haelfte der Schiene minus halber Luecke. */ @media(min-width:680px) and (max-width:1023px){ .szene{flex:0 0 calc(50% - 6.5px)} } /* R18-28 · Die Kacheln „Presse/Technik/Organisation" auf der letzten Seite standen linksbuendig, obwohl die beiden Kacheln ganz unten („Kontakt fürs Telefon", „Diese Seiten") schon zentriert waren — derselbe Baustein, zwei Zustaende. Jetzt einheitlich mittig, wie der Rest der Strecke. */ .lade a{text-align:center} /* R18-8 · Foto-/Textbreite: eine Bildvorschau darf nie breiter sein als der Fliesstext, den sie begleitet — sonst ragt sie ueber die Spalte hinaus. Nepo: „achte auch darauf, dass der Text beziehungsweise das Foto hier genauso breit ist wie der Text, der drunter steht, nicht weniger breit. Bestenfalls also die Fotovorschau ist ein bisschen kleiner." */ .station__inhalt .kleinbild{max-width:72ch;margin-inline:auto} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} /* ═══ RUNDE 19 · 14.09.2026 — Mobilfassung der Veranstalterstrecke ═══════════ Diktat im Wortlaut: Websites & WordPress/Fleischwolf Ernte - Alles muss raus/ _BRAINDUMPS.md, Abschnitt „Diktat 14.09.2026, 19:07 — Runde 19". ═════════════════════════════════════════════════════════════════════════ */ /* R19-1 ⛔ DER GROESSTE FEHLER DIESER RUNDE. Nepo: „Das Groesste und Wichtigste ist, dass die Fotos in der Vergroesserung nun falsch sind, da rechts daneben die Beschreibung auftaucht." Ursache, nicht Symptom: `.lb` ist ein Flex-Kasten OHNE `flex-direction`, also in Zeilenrichtung. `.lb__u` (die Bildunterschrift) ist ein direktes Kind von `.lb`, kein Kind von `.lb__rahmen` — sie stand deshalb NEBEN dem Bild und hat ihm die halbe Breite weggenommen. Genau deshalb wurde „antippen fuer gross" nicht eingeloest: das vergroesserte Bild war kleiner als in der Seite. Spaltenrichtung loest beides in einer Zeile. */ .lb{flex-direction:column;gap:0;overflow-y:auto; padding:52px clamp(12px,4vw,20px) calc(18px + env(safe-area-inset-bottom))} /* R19-2 ⛔ Hochkant bleibt hochkant. Nepo (zur Programmseite, gilt hier genauso): „Die hochkanten Bilder werden … auch in einer Queransicht gezeigt." Der Rahmen traegt im Grundzustand `aspect-ratio:16/9` und `width:min(1000px,…)` fuer den Videoplayer. Bei einem BILD darf er keine eigene Form haben — er schrumpft auf das Bild, und das Bild bestimmt seine Form selbst. */ .lb[data-offen="bild"] .lb__rahmen{width:auto;max-width:100%;max-height:none;aspect-ratio:auto} /* ⛔ Die Breitengrenze darf NICHT in Prozent stehen: der Rahmen schrumpft auf das Bild, das Bild richtet sich nach dem Rahmen — ein Zirkelschluss, den Browser unterschiedlich aufloesen. Deshalb gegen das Fenster gerechnet. */ .lb[data-offen="bild"] .lb__bild{width:auto;height:auto;object-fit:contain; max-width:min(1100px, calc(100vw - 2 * clamp(12px,4vw,20px))); max-height:calc(100svh - 215px)} .lb__u{flex:0 0 auto} /* R19-3 · Der „Nach oben"-Knopf gehoert dem WordPress-Theme (`#back-to-top`, Klasse `show`), nicht dieser Seite — gemessen 14.09.2026 an der Livefassung. Er stand mittig rechts und lag damit auf 23 von 27 Handy-Aufnahmen ueber Fliesstext, Aufklapp-Pfeilen, der Bild-Lupe und der Wortmarke im Fuss. Er bleibt erreichbar, raeumt aber die Textspalte. */ /* R20 · Nepo: "Der Nach-oben-Pfeil sollte nicht in denselben Teilen sein, sondern etwas ueber allem." Er bekommt den hoechsten Rang unter allen fixen Elementen dieser Seite (Kopf 40, mitlaufender Technik-Schalter 33) — nur der Leuchtkasten (90) darf noch darueber liegen. */ #back-to-top{position:fixed!important;left:auto!important;top:auto!important; right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important; width:38px!important;height:38px!important;opacity:.42;z-index:45!important; transition:opacity .2s} #back-to-top:hover,#back-to-top:focus-visible{opacity:1} /* R19-4 ⛔ „Die ganzen Sachen zum Ausklappen mit der roten Schrift, mit der roten Ueberschrift, sollten mittig sein. Du hast sie immer links gemacht. Das gilt fuer alle Unterseiten von der Veranstalterseite." Damit faellt die Ausnahme von Runde 18 („Aufklapper-Titel sind Bedienelemente") — sie war genau die Regel, die das hier linksbuendig gehalten hat. Der Pfeil wandert dafuer aus dem Textfluss an den Rand. */ .warum > summary{display:flex;justify-content:center;text-align:center; width:100%;position:relative;padding-right:0} .warum > summary::after{position:static;margin-left:2px} details:not(.warum):not(.station):not(.gewerk) > summary{padding-left:46px;text-align:center} summary .h4,details > summary .h4,summary .zusatz{text-align:center} .gewerk__t,.station__titel{text-align:center} /* ⛔ Stationen und Gewerke stehen auf JEDER Breite mittig — nicht nur am Handy. GEMESSEN 14.09.2026, kopfloser Browser: Bei 1440 px standen die Titel von sechs Gewerken und vier Stationen 59 px links der Mitte, weil die alte Tagesplan-Spalte (150 px Zeit / 148 px Zustaendigkeit) nur unter 700 bzw. 619 px aufgeloest wurde. Genau daraus ist die Beanstandung dreimal zurueckgekommen — die Mittigkeit gehoert in die Grundregel, nicht in eine Media Query (Skill microsite-bauen, Grundgesetz vom 14.09.2026). Zeit bzw. Zustaendigkeit stehen jetzt als Zeile UEBER dem Titel, der Aufklapp-Pfeil sitzt als Bedienelement am rechten Rand. */ .station > summary{grid-template-columns:minmax(0,1fr);position:relative; padding:16px 52px;justify-items:center;gap:4px} .station__zeit,.station__titel,.station__kurz{grid-column:1;text-align:center} .station__pfeil{position:absolute;right:13px;top:50%;transform:translateY(-50%); grid-row:auto;grid-column:auto;justify-self:auto;align-self:auto} .gewerk > summary{grid-template-columns:minmax(0,1fr);position:relative; padding:15px 52px;justify-items:center;gap:4px} .gewerk__wer,.gewerk__t,.gewerk__kurz{grid-column:1;text-align:center;padding-top:0} .gewerk__pfeil{position:absolute;right:13px;top:50%;transform:translateY(-50%); grid-row:auto;grid-column:auto;justify-self:auto;align-self:auto} @media(max-width:700px){ .station > summary{padding:14px 48px} .station__pfeil{right:11px} } @media(max-width:619px){ .gewerk > summary{padding:13px 48px} .gewerk__pfeil{right:11px} } /* R19-5 ⛔ „Manche Fotos sind viereckig, obwohl sie eigentlich quer sein koennten. Dadurch werden manche Sachen unnoetig abgeschnitten … die Bilder sollen in ihrer Querheit komplett vorhanden sein." GEMESSEN 14.09.2026: von 17 Bildern in Aufklappern und Kacheln sind 16 Querformate (3:2, 4:3 oder 16:9) — sie wurden von Runde 14 auf 4:3 bzw. in der Kachel auf 1:1 zugeschnitten. Der Zuschnitt faellt weg; die Datei bestimmt die Form. Die Groessenbegrenzung aus Runde 14 bleibt. */ .station__inhalt .kleinbild img,.gewerk__inhalt .kleinbild img, .karte-eck .kleinbild img,.auf__inhalt .kleinbild img{aspect-ratio:auto; height:auto;object-fit:contain;object-position:center} .karte-eck .kleinbild img{aspect-ratio:auto} /* Ein Querbild darf in Kachel und Aufklapper breiter stehen als ein Hochformat — sonst wirkt es wie eine Briefmarke neben dem Text. */ .station__inhalt .kleinbild,.gewerk__inhalt .kleinbild,.auf__inhalt .kleinbild{width:min(420px,100%)} .karte-eck .kleinbild{width:min(340px,100%)} .station__inhalt .kleinbild--hoch,.gewerk__inhalt .kleinbild--hoch, .auf__inhalt .kleinbild--hoch{width:min(260px,100%)} /* R19-6 · Karussell: EIN Bild in der Mitte. Nepo: „Bei der Karussellreihe muss ein Bild mittig sein, nicht schon das andere halb angefangen." Das halb sichtbare Nachbarbild war zugleich die Ursache fuer „bei Garching im Oktober 2023 ist nicht alles drauf" — angeschnitten war nie das Bild selbst, sondern der Nachbar daneben. */ @media(max-width:760px){ .kartenreihe{scroll-padding-inline:50%;padding-inline:4vw;gap:4vw} .kartenreihe figure{flex:0 0 min(88vw,420px)} } @media(max-width:820px){ .fotoreihe{scroll-padding-inline:50%;padding-inline:4vw;gap:4vw} .fotoreihe figure{flex:0 0 min(84vw,340px)} .fotoreihe img{height:auto;aspect-ratio:3/2} } @media(max-width:700px){ .schiene{scroll-padding-inline:50%;padding-inline:4vw} .schiene--fotos figure{flex:0 0 min(86vw,380px)} .szene{flex:0 0 min(86vw,420px);scroll-snap-align:center} .schiene--fotos img{height:auto;aspect-ratio:3/2} } /* R19-7 ⛔ „Der Pfeil zurueck zur Hauptseite sollte auf der gleichen Hoehe wie Nepofitz im Header sein." Runde 18 hatte ihn bewusst in eine eigene Zeile gesetzt (`flex-basis:100%`) — das wird hiermit zurueckgenommen. Damit die drei Elemente bei 360 px nebeneinanderpassen, wird der Text am Handy auf „Hauptseite" gekuerzt (der Pfeil sagt den Rest). */ @media(max-width:699px){ .kopf__zeile{flex-wrap:nowrap;gap:8px} .kopf__rueck{order:2;flex-basis:auto;justify-content:flex-end;padding-top:0; font-size:11px;letter-spacing:.05em;white-space:nowrap;min-width:0} .kopf__menue{order:3} .kopf__rueck .lang{display:none} } /* R19-8 ⛔ „Beim Footer steht Nepofitz-Logo auf einmal rechts. Es soll aber links stehen und aehnlich aussehen wie der Header, nur eben in Dunkel." Und: „Im Footer gehoeren nur die Sachen rein, die wirklich reingehoeren, und das ist ausschliesslich Impressum, Datenschutz und Zurueck zur Hauptseite." Die Wortmarke steht deshalb allein in der ersten Zeile links, darunter die drei Links — dieselbe Ordnung wie oben, nur auf dunklem Grund. */ @media(max-width:520px){ .fuss__zeile{justify-content:flex-start;gap:10px 16px} .fuss__nav{justify-content:flex-start} } /* R19-9 ⛔ „Die Videovorschau … es muss klarer sein, dass es ein Video ist. Ausserdem muss der Play-Button immer in der Mitte und groesser sein … das Video ist auch nicht so eingerahmt, dass es klar als Video erkennbar ist. Das sollte man generell so machen, dass es nicht ein einziger Block ist mit dem Text drunter, sondern innen nochmal gerahmt." Drei Dinge zusammen: eigener Rahmen um die Bildflaeche, dunkle Abdunklung, groesserer Knopf — und der Knopf sitzt sicher mittig, auch wenn das Bild einmal nicht als Block gerendert wird. */ .film__bild{display:block!important;margin:10px 12px 0;border:2px solid var(--linie2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .film__bild::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,0) 38%,rgba(0,0,0,.42))} .film__play{position:absolute!important;inset:0!important;display:flex!important; align-items:center;justify-content:center;z-index:2} .film__play span{display:grid!important;place-items:center; width:clamp(58px,15vw,74px);height:clamp(58px,15vw,74px); border-radius:50%;border:3px solid #F7F1E4;box-shadow:0 4px 18px rgba(0,0,0,.45)} .film__play span::after{border-left-width:20px;border-top-width:13px;border-bottom-width:13px; margin-left:6px} /* Eine Zeile, die ohne Zweifel sagt, dass hier ein Film liegt. */ .film__bild::before{content:"VIDEO ▸";position:absolute;left:10px;top:9px;z-index:3; font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.18em; color:#F7F1E4;background:rgba(var(--rot-rgb),.92);padding:4px 8px;border-radius:2px} .film > span:last-child{padding-top:14px} /* R19-10 ⛔ „Bei drei Abende im Vergleich wird die Tabelle abgeschnitten." Eine Tabelle mit fuenf Spalten und 520 px Mindestbreite passt auf kein Handy. Statt sie rollen zu lassen (den Rollbalken sieht niemand) wird aus jeder Zeile eine Karte — jede Zahl mit ihrer Beschriftung daneben. */ @media(max-width:640px){ .kampagnen{min-width:0;display:block} .kampagnen thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .kampagnen tbody,.kampagnen tr,.kampagnen td{display:block;width:100%} .kampagnen tr{border:1px solid var(--linie);background:var(--papier2); margin-bottom:12px;padding:4px 0} .kampagnen tr:last-child{margin-bottom:0} .kampagnen td{border-bottom:1px solid var(--linie);padding:8px 13px; display:flex;justify-content:space-between;align-items:baseline;gap:14px; text-align:right!important} .kampagnen td:first-child{font-family:var(--fd);font-weight:700;text-transform:uppercase; letter-spacing:.05em;color:var(--rot);justify-content:center;text-align:center!important; background:rgba(var(--rot-rgb),.05)} .kampagnen td:first-child span{display:inline;margin-left:6px;color:var(--leise)} .kampagnen tr td:last-child{border-bottom:0} .kampagnen td[data-spalte]::before{content:attr(data-spalte);font-family:var(--fd); font-weight:600;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase; color:var(--leise);text-align:left;flex:0 1 auto} } /* R19-11 · Der feste Kopf verdeckte beim Sprung die oberste Zeile des Ziels (auf vier Handy-Aufnahmen belegt). Jeder Sprungpunkt haelt jetzt Abstand. */ [id]{scroll-margin-top:calc(var(--kopfhoehe,118px) + 14px)} /* R19-12 · Verweise im Fliesstext standen in Browserblau statt im Seitenrot. */ .bahn a,.auf__inhalt a,.station__inhalt a,.gewerk__inhalt a,.warum a, .kasten a,.hinweis-menue a,.baustein a,.vergleich a,.klein a{ color:var(--rot);text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px;text-decoration-color:rgba(var(--rot-rgb),.45)} .station__inhalt a.knopf,.gewerk__inhalt a.knopf,.auf__inhalt a.knopf, .station__inhalt a.pdfzeile,.gewerk__inhalt a.pdfzeile,.auf__inhalt a.pdfzeile{ text-decoration:none} .bahn a:hover,.auf__inhalt a:hover,.station__inhalt a:hover,.gewerk__inhalt a:hover{ text-decoration-color:var(--rot)} /* R19-13 · Auch der letzte grosse Block der Strecke ist mittig — Nepo hat die Abschnittsnummer („02.2") als einziges linksbuendiges Element gemeldet. */ /* ⛔ `display:block` wuerde das rote Schild ueber die ganze Breite ziehen — `display:table` schrumpft es auf seinen Inhalt und `margin-inline:auto` stellt es in die Mitte. */ .band__nummer{display:table;margin-inline:auto;text-align:center} /* Die roten Rubrikzeilen in den Faktenzeilen (MITSCHNITT, HINWEISSCHILD, GEMA, PRESSE …) standen am Handy linksbuendig — Nepo, 14.09.2026: „Die ganzen Sachen … mit der roten Ueberschrift sollten mittig sein." Unter 640 px stapelt `.fakt` ohnehin; dort steht die Zeile ueber ihrem Text, also mittig. */ @media(max-width:640px){ .fakt > b{text-align:center} } /* R19-14 · Ein Download im Fliesstext bekommt dieselbe Marke wie die Bilder: eigene Zeile, Pfeilsymbol dahinter. Nepo: „muss das Filmhinweis als PDF in einer neuen Zeile sein und gleich mit diesem Download-Symbol, das dahinter ist, so wie schon bei den Fotos." */ .pdfzeile{display:flex;align-items:center;justify-content:center;gap:9px; margin:12px auto 0;padding:10px 16px;max-width:min(420px,100%); border:1px solid var(--linie);background:var(--papier2); font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.07em; font-size:12.5px;color:var(--rot);text-decoration:none} .band--grau .pdfzeile{background:#F7F5F0} .pdfzeile:hover,.pdfzeile:focus-visible{border-color:var(--rot);background:#fff} .pdfzeile::after{content:"";width:22px;height:22px;flex:0 0 auto;border-radius:50%; border:1.5px solid var(--rot);background:center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8241E' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='M6.5 11.5 12 17l5.5-5.5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E")} /* R19-15 ⛔ Der Umschalter „Welche Technik hat Ihr Veranstaltungsort?" bleibt beim Rollen sichtbar. Nepo, 14.09.2026: „sollte darunter, wo die ganze Aufzählung kommt, auch immer ein Switch sein, wo man umschalten kann, damit er nicht verschwunden ist, sobald man runterscrollt." ⛔ KEIN `position:sticky` — das WordPress-Theme liefert global `body{overflow:hidden}` mit, und das bricht jedes sticky in einem Nachfahren ohne Fehlermeldung (derselbe Grund, aus dem der Kopf `fixed` ist, s. o.). Die Leiste haengt deshalb `fixed` unter dem Kopf und wird von einem IntersectionObserver ein- und ausgeblendet. */ .techsticky{position:fixed;left:0;right:0;top:var(--kopfhoehe,118px);z-index:33; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px; padding:7px clamp(10px,3vw,20px); background:rgba(var(--papier-rgb),.95);backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linie); box-shadow:0 6px 18px rgba(20,16,14,.08); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .18s,transform .18s,visibility .18s} .techsticky.an{opacity:1;visibility:visible;transform:none} .techsticky__t{font-family:var(--fd);font-weight:600;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--leise)} .tschalt--mini{padding:5px 11px!important;border-width:1.5px!important;font-size:11.5px!important; text-align:center!important;line-height:1.1!important} .tschalt--mini b{font-size:11.5px!important;margin:0!important} @media(prefers-reduced-motion:reduce){ .techsticky{transition:none} } @media print{ .techsticky{display:none} } /* R19-16 · Ein Aufklapper im Aufklapper (Tagesablauf → die neun Stationen). Nepo: „Da koennte man aber intern auch nochmal aufklappen nach unten und darin dann die ganzen einzelnen neun Schritte." */ .unteraufklapper{margin:var(--sp2) auto 0;max-width:min(560px,100%); border:1px solid var(--linie);background:var(--papier2)} .unteraufklapper > summary{list-style:none;cursor:pointer;position:relative; padding:12px 42px 12px 42px;text-align:center; font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.07em; font-size:12.5px;color:var(--rot)} .unteraufklapper > summary::-webkit-details-marker{display:none} .unteraufklapper > summary::after{content:"";position:absolute;right:16px;top:50%; width:8px;height:8px;border-right:2px solid var(--rot);border-bottom:2px solid var(--rot); transform:translateY(-70%) rotate(45deg);transition:transform .18s} .unteraufklapper[open] > summary::after{transform:translateY(-30%) rotate(225deg)} .unteraufklapper__inhalt{padding:2px 14px 16px;border-top:1px solid var(--linie);text-align:left} /* R19-17 · „Speichern Sie sich den Link" — dazu gehoert ein Knopf, der den Link wirklich in die Zwischenablage legt, statt ihn zu oeffnen. */ .merkzeile{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:12px auto 0} /* R19-11 · Vier Fragen, je eine Zeile, nummeriert. */ .fragen{counter-reset:f;list-style:none;margin:10px 0 0;padding:0} .fragen li{counter-increment:f;display:grid;grid-template-columns:auto minmax(0,1fr); gap:2px 12px;padding:9px 0;border-top:1px solid var(--linie)} .fragen li:first-child{border-top:0;padding-top:2px} .fragen li::before{content:counter(f);grid-row:1 / span 2;align-self:start; font-family:var(--fd);font-weight:700;font-size:13px;color:var(--rot); width:22px;height:22px;display:grid;place-items:center;border:1.5px solid var(--rot); border-radius:50%;margin-top:1px} .fragen b{grid-column:2;font-family:var(--fd);font-weight:700;font-size:.96rem; line-height:1.3;color:var(--tinte)} .fragen span{grid-column:2;font-size:.9rem;line-height:1.5;color:var(--leise);margin-top:2px} /* Die Kachel-Regel `.karte-eck .warum b` (0,3,0) setzt jedes auf Fliesstext zurueck — die Fragenliste braucht deshalb eine staerkere Hand. */ .karte-eck .warum .fragen b,.karte-eck .fragen b{display:block;font-family:var(--fd); font-weight:700;font-size:.96rem;line-height:1.3;color:var(--tinte); text-transform:none;letter-spacing:0} .karte-eck .fragen span{display:block;font-size:.9rem;line-height:1.5;color:var(--leise)} /* R19-33 · „Es sollen auch nicht mehrere Bilder untereinander sein pro Unterfall." Das Paar Grundriss + Foto beim Mischerplatz gehoert zusammen (Plan und Wirklichkeit) — es bleibt deshalb nebeneinander stehen, statt am Handy zu stapeln. Angetippt wird jedes einzeln gross. */ @media(max-width:640px){ .bildduo--quer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;gap:10px} .bildduo--quer figcaption{font-size:.72rem} } /* R20 · Immer sichtbare Kurz-Breadcrumb am Handy (Nepo-Update). Am Rechner steht die volle .strecke ohnehin schon dauerhaft da — dort bleibt die Kurzleiste unsichtbar. */ .kurzweg{display:none} @media(max-width:699px){ .kurzweg{display:flex;flex-wrap:nowrap;align-items:center;gap:3px; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; margin-top:7px;padding-bottom:1px; font-family:var(--fd);font-weight:600;font-size:10px;letter-spacing:.03em; text-transform:uppercase;color:var(--leise)} .kurzweg::-webkit-scrollbar{display:none} .kurzweg a{color:var(--leise);white-space:nowrap;padding:2px 1px} .kurzweg a[aria-current="page"]{color:var(--rot);font-weight:700} .kurzweg em{font-style:normal;color:var(--linie2);flex:0 0 auto;padding:0 1px} } /* R20-15 · Am Desktop wirken die drei Kampagnen-Vorschauen nicht mehr klickbar — kein Zoom-Cursor, keine Lupe. Am Handy bleibt beides. */ @media(min-width:900px){ .kartenreihe button[data-bild]{cursor:default} .kartenreihe button[data-bild]::after{display:none} } /* R20-8 · Trailer-Karussell: vier gleich grosse Vorschauen statt einer riesigen. Die Karten bleiben klein genug, dass "vier nebeneinander" auch auf 1180px Innenbreite nicht gequetscht wirkt. */ .filmreihe--vier{grid-template-columns:1fr} @media(min-width:560px){.filmreihe--vier{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.filmreihe--vier{grid-template-columns:repeat(4,1fr)}} .filmreihe--vier > div{display:flex;flex-direction:column;gap:8px} .filmreihe--vier .film{margin:0} .kopierknopf--einbett{width:100%;justify-content:center;font-size:11.5px;padding:9px 10px}