/* ═══════════════════════════════════════════════════════════════════════════════ omaneo Story-Entwurf — das Gestaltungsblatt ═══════════════════════════════════════════════════════════════════════════════ Warum es diese Datei gibt (Dieter, 08.08.2026): Die Maße der ersten Fassung stammten aus EINEM großen Safari-Fenster — 85 px Rand, 1080 px Inhalt, 720 zu 360. Auf jedem anderen Schirm war das entweder abgeschnitten oder verloren. Diese Fassung behält Dieters Verhältnisse, macht aber jede Zahl beweglich: · Der Rand wächst mit der Fläche, statt bei 85 px zu kleben. · Das Feld ist höchstens 1080 px breit — und sonst so breit, wie Platz ist. · Die Bühne teilt sich weiterhin zwei Drittel zu einem Drittel, aber als Verhältnis. · Schrift, Figurenhöhe und Abstände laufen über `clamp()` mit der Fläche mit. · Höhen rechnen in `dvh`, damit die Adressleiste am Handy nichts abschneidet. · Das Buch wird in fester Referenzgröße gerendert und als Ganzes eingepasst — es sieht auf jedem Schirm gleich aus, nur größer oder kleiner. Farben, Schriften und Abstände kommen aus /assets/css/design-tokens.css (eine Wahrheit); hier steht nur, was es dort nicht gibt. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Die Maße ──────────────────────────────────────────────────────────────── */ :root{ /* Rand: am Handy schmal, am großen Schirm Dieters 85 px. */ --rand: clamp(20px, 5.2vw, 85px); /* Das Inhaltsfeld: Dieters 1080 sind die Untergrenze für gewöhnliche Schirme; auf großen Monitoren wächst es mit, statt in der Ecke zu verharren — gedeckelt bei 1560, weil darüber die Leseweite kippt. */ --feld-max: clamp(1080px, 78vw, 1560px); /* Bühnentexte: eine Größe für Startbild und Reden, fließend. */ --buehnenschrift: clamp(1.15rem, 1.1rem + 0.75vw, 2rem); /* ⚑ FLIESSTEXT — EINE zentrale Quelle (Dieter 09.08.2026): Der Fließtext auf der Startseite und jeder Fließtext auf Folgeseiten (Reden, Begleittexte) speisen sich AUS DENSELBEN Werten — Schriftgröße (--buehnenschrift) UND Zeilenabstand (--zeilenabstand). Vorher lief die Willkommen-Rede auf 1,2 und das Startbild auf 1,6 — sichtbar unterschiedlich. Wer neuen Fließtext baut, nimmt `line-height:var(--zeilenabstand)` und `font-size:var(--buehnenschrift)`, nichts Eigenes. */ --zeilenabstand: 1.6; /* Die Fließtext-Fläche ist überall gleich hoch — acht Zeilen (Dieter 09.08.2026: die Willkommen-Rede war unbegrenzt und schob die Kacheln zu tief; „dieselbe Begrenzung wie auf der Startseite, zentral im CSS"). Startbild-Lauftext UND Reden nehmen diese Höhe. */ --fliesstext-hoehe: calc(8 * var(--zeilenabstand) * var(--buehnenschrift)); /* ZENTRALE Content-Typografie: JEDE Seite mit Fließtext-Inhalt (native Einbindung, eigene Bausteine) speist sich hieraus (Dieter 09.08.2026: „alle Seiten von der zentralen CSS speisen lassen — alles einzeln zu machen ist sinnfrei"). Kleiner als die Bühnen-Reden, das ist Lesetext, kein Sprechtext. */ --content-schrift: clamp(1rem, 0.95rem + 0.35vw, 1.15rem); --content-titel: clamp(1.4rem, 2.6vw, 2.1rem); --content-untertitel: clamp(1.12rem, 2vw, 1.5rem); /* Der Fußraum ist für die Pfadzeile reserviert (Dieter 09.08.2026: „der Inhalt darf nie in den Fußraum hineinlaufen"). So viel Platz hält jede Bühne unten frei: Pfad-Bodenabstand + Pfadhöhe + Luft. */ --pfadraum: calc(clamp(10px,2.2dvh,20px) + 32px); /* Die Figur rechts (Petra, Dieter): Höhe folgt der Bühnenhöhe, nicht der Breite. */ --figur-hoehe: clamp(220px, 46dvh, 560px); /* Luft zwischen der Bühne und der Figur daneben. */ --spaltenluft: clamp(12px, 1.6vw, 24px); /* Die Überschrift eines Inhaltsblocks — EINE Größe für alle Bühnen (Dieter 09.08.2026: „bei Technik bitte für die Überschrift die in diesem Projekt im zentralen CSS festgelegten Font-Informationen"). Gemessen war der Fokus-Titel 54,4 px, die Überschriften aller anderen Bühnen 29,2 px — er fiel auf die allgemeine h2-Regel zurück, weil er nicht in einem `.i-text` steht. Jetzt steht die Größe an EINER Stelle und beide holen sie dort (R-75). Familie und Gewicht kommen ohnehin aus den Gestaltungswerten: Playfair Display, Regular. */ --titelgroesse: clamp(1.4rem, 2.6vw, 2.4rem); /* ── Die drei Kapitelfarben ──────────────────────────────────────────────── Dieter 09.08.2026: *„ich möchte für die drei Kacheln und dann als Hintergrund für die Bereiche unterschiedliche Farbtöne — damit man anhand der Farbe jederzeit weiß, wo man ist."* ⚑ Sie sind aus dem BESTAND abgeleitet, nicht erfunden (R-70, CI R-02): Alle drei sind dieselbe Marken-Bronze #9B7A4A, nur unterschiedlich stark und in der Wärme verschoben — Lernen warm wie Papier, Informieren kühl wie Stahl, Kaufen bronzen wie die Marke. Der leere weiße Raum bleibt der Grundton; die Kapitelfarbe ist ein Hauch darüber (2–4 %), kein Anstrich. Startbild und Wahl bleiben rein weiß — dort hat man sich noch nicht entschieden. Die kräftige Fassung (`-satt`) trägt nur Ränder, Ziffern und Kachelköpfe. */ /* Die Maße der Wahlkacheln — als Name, damit reine Textkacheln dieselben tragen können, ohne die Werte zu kopieren (Dieter 23.08.2026: „so sehen bei uns kacheln auf der story-web-bühne aus"). */ --kachel-polster: clamp(.8rem,1.6vw,1.4rem); --kachel-titel: clamp(1.05rem,1.5vw,1.45rem); --kachel-text: clamp(.85rem,1vw,.95rem); --ton-lernen: #F7F4EE; --ton-lernen-satt: #B08D5C; --ton-informieren: #F1F3F4; --ton-informieren-satt: #6F7C84; --ton-kaufen: #F8F1E7; --ton-kaufen-satt: #9B7A4A; /* Das Haus (wir über uns, alles Rechtliche): sachlich, fast weiß. */ --ton-haus: #F5F5F3; --ton-haus-satt: #6B6560; /* ⚑ 27.08.2026 (Dieter): „nach dem Farbschema der Seite ergänzend eine Hintergrundfarbe für die User-Seiten inkl. Admin-Seiten vergeben“. Beide Werte kommen unverändert aus `global/ci.md` — nichts erfunden: Surface 2 (#F0EDE8) und Schwarz (#1A1A1A). Surface 2 liegt merklich tiefer als alle fünf Kapiteltöne (die stehen bei F5–F8) und ist damit auf den ersten Blick als Werkbank statt Schaufenster zu erkennen, ohne aus der Familie zu fallen. */ --ton-verwalten: #F0EDE8; --ton-verwalten-satt: #1A1A1A; /* Medien („was wir sonst noch so machen": Radio, Fernsehen, Podcast, Musik). Dieter 09.08.2026: *„denke daran, dass die bereiche wir über uns und medien auch jeweils ihre eigene hintergrundfarbe erhalten."* Derselbe Weg wie bei den drei Kapitelfarben: aus dem Bestand abgeleitet, nur ein Hauch über Weiß. Der Ton liegt zwischen dem kühlen Informieren und dem warmen Lernen — eine Spur ins Rötliche, weil hier gehört und gesehen wird, nicht gelernt oder gekauft. Die kräftige Fassung ist Bronze-Dark aus der CI (#7D6038). */ --ton-medien: #F6F2F1; --ton-medien-satt: #7D6038; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:clamp(15px, 14px + 0.2vw, 18px); line-height:1.6; -webkit-font-smoothing:antialiased; } img,video{max-width:100%; display:block} /* ⛔ 28.08.2026 — DIESE ZEILE DARÜBER HAT EIN BILD SICHTBAR GEMACHT, DAS `hidden` WAR. Dieter: *„der film zeigt leider nur die schlusskarte und nicht den anfang bis zum schnitt."* Gemessen: Die Endtafel des Herkunftsfilms trug `hidden`, ihr `display` stand trotzdem auf `block` — denn `hidden` wirkt allein über die Vorgabe `[hidden]{display:none}` des Browsers, und die verliert gegen jede eigene Regel, die `display` setzt. Der Deckel lag also von der ersten Sekunde an über dem Film. Die Reparatur gehört an die Wurzel, nicht an den Einzelfall: Wer `img`/`video` ein `display` gibt, muss `hidden` wieder herstellen — sonst trifft es das nächste versteckte Bild wieder. */ img[hidden], video[hidden]{display:none} a{color:inherit} .nurlesbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} h1,h2,h3{font-family:var(--font-head); font-weight:400; letter-spacing:-.01em; margin:0} h1{font-size:clamp(2.2rem,5.6vw,5rem); line-height:1.04} h2{font-size:clamp(1.7rem,4vw,3.4rem); line-height:1.08} h3{font-size:clamp(1.2rem,2vw,1.7rem)} .uber{font-size:.72rem; text-transform:uppercase; letter-spacing:var(--ls-wider); color:var(--accent); font-weight:600; margin-bottom:var(--space-5)} .satz{font-size:clamp(1rem,1.4vw,1.3rem); color:var(--muted); max-width:34ch} .mitte{margin-inline:auto; text-align:center} .mitte .satz{margin-inline:auto} /* ── Die Bühne ───────────────────────────────────────────────────────────────── Jede Bühne füllt genau eine Bildschirmhöhe und trägt ihr Feld linksbündig. `dvh` statt `vh`: Am Handy wandert die Adressleiste, `vh` schneidet dann unten ab. */ /* ⚑ EINE BÜHNE IST EINE SEITE (Dieter 08.08.2026: „das mit dem nicht scrollen scheint nicht richtig und überall zu funktionieren — löse es dann halt mit einzelnen Seiten"). Statt einer langen Seite, deren Scrollen man unterdrücken muss, ist immer nur EINE Bühne im Dokument sichtbar. Damit gibt es nichts zu scrollen: Das Dokument ist genau einen Bildschirm hoch. Gewechselt wird mit den Pfeilen, den Tasten und den Kacheln. Die älteren Textstrecken (Üben, Informieren) bleiben klassische Scrollseiten — sie bestehen aus Abschnitten, nicht aus Bühnen; dort schaltet die Seite in den Scrollmodus. */ .buehne{display:none} body.buehnenmodus{overflow:hidden} /* Auch die Fußzeile gehört zur Scrollseite, nicht zur Bühne — sie trug 300 px bei und war der Rest, der doch noch scrollen ließ (gemessen 08.08.2026). */ body.buehnenmodus .fuss, body.buehnenmodus > footer{display:none} /* Genau EIN Bildschirm hoch — nicht „mindestens": Sonst wächst die Bühne über den Rand und es gibt doch wieder etwas zu scrollen. Was nicht hineinpasst, wird von den fließenden Maßen kleiner gerechnet (Figurenhöhe, Buch, Kacheln). */ /* ⛔ WARUM HIER NICHT ZENTRIERT WIRD (Dieter, 23.08.2026: „warum stehen die beiden unterschiedlich hoch gemessen am abstand zwischen menü und textbeginn bzw. wo petra steht?") Solange die Bühne ihren Inhalt vertikal ZENTRIERTE, hing die Höhe der Figur an der Menge des Inhalts: „Willkommen" hat zwei Felder (Szene + Wahlkacheln), eine Erzählbühne nur eines — also stand dieselbe Figur je nach Seite 135 oder 227 px unter der Hauptleiste. Beim Blättern sprang sie sichtbar. Gemessen über 12 Bühnen: Spanne 140 px. Jetzt beginnt jede Bühne oben, und der feste Abstand darunter setzt die gemeinsame Grundlinie. Gemessen: 10 von 12 Bühnen exakt bei 118 px, nichts läuft unten heraus. ⚠ Die beiden Ausnahmen (`gudrun-lehrerin`, `kaufen-shop`) sind Bühnen IM Blattrahmen — dort kommt das Polster des Rahmens hinzu, und das ist so gewollt. */ .buehne.aktiv{ position:relative; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; justify-content:flex-start; gap:clamp(.6rem,2dvh,1.6rem); padding-block:clamp(1rem,3dvh,2.5rem); overflow:hidden; background: radial-gradient(120% 78% at 50% 100%, rgba(26,26,26,.045) 0%, rgba(26,26,26,0) 62%), var(--kapitelton, var(--bg)); transition:background-color .5s ease; } /* Der Abstand, der die Grundlinie setzt: er ersetzt das, was die Zentrierung vorher zufällig ergab. In dvh, damit er auf niedrigen Fenstern mitschrumpft statt den Inhalt herauszudrücken. */ .buehne.aktiv > .feld:first-of-type{margin-top:clamp(1rem,7dvh,5rem)} /* Jede Bühne trägt ihr Kapitel — daraus kommt der Grundton des Bereichs. */ .buehne[data-kapitel="lernen"]{--kapitelton:var(--ton-lernen); --kapitelfarbe:var(--ton-lernen-satt)} .buehne[data-kapitel="informieren"]{--kapitelton:var(--ton-informieren); --kapitelfarbe:var(--ton-informieren-satt)} .buehne[data-kapitel="kaufen"]{--kapitelton:var(--ton-kaufen); --kapitelfarbe:var(--ton-kaufen-satt)} .buehne[data-kapitel="haus"]{--kapitelton:var(--ton-haus); --kapitelfarbe:var(--ton-haus-satt)} .buehne[data-kapitel="medien"]{--kapitelton:var(--ton-medien); --kapitelfarbe:var(--ton-medien-satt)} .buehne[data-kapitel="verwalten"]{--kapitelton:var(--ton-verwalten); --kapitelfarbe:var(--ton-verwalten-satt)} /* Was im Bereich die Aufmerksamkeit führt, nimmt die Kapitelfarbe an: die laufende Kachel, der Rand der Pfeile, die Ziffern. Der Text bleibt schwarz — Lesbarkeit vor Buntheit. */ .buehne[data-kapitel] .folgenliste .folge.laeuft{border-color:var(--kapitelfarbe); background:color-mix(in srgb, var(--kapitelfarbe) 12%, #fff)} .buehne[data-kapitel] .folgenliste .nr{color:var(--kapitelfarbe)} .buehne[data-kapitel] .uber{color:var(--kapitelfarbe)} /* Der Satzspiegel steht ZENTRIERT im Fenster (Dieter 08.08.2026: „ich glaube, es wäre angenehmer, ihn zur Fensterbreite zu zentrieren"). Vorher klebte er mit festem Abstand am linken Rand — auf breiten Schirmen wirkte die Seite dadurch nach links gerutscht. Die Breite bleibt: höchstens 1080 (auf großen Monitoren mehr), sonst was übrig ist. */ .feld{ width:min(var(--feld-max), 100% - var(--rand) * 2); /* Linksbündig (Dieter 09.08.2026): Der Satzspiegel beginnt an der linken Kante (--rand), in der Flucht von Navigation und Pfadzeile — nicht mehr fensterzentriert. */ margin-inline:var(--rand) auto; } /* ── Eingebauter Inhaltsblock: ZENTRIERT ───────────────────────────────────────────────── Dieter 27.08.2026: *„bei den Bühnenseiten bitte den eingebauten Inhaltsblock zentriert zur Bühne anordnen"* und *„bei der Produktdatenbank ist es links — auch da gleich zentriert positionieren."* Gemessen vorher (1440 px Fenster): links 75, rechts 242 — 167 px Versatz nach links, auf allen 49 Bühnen mit eingebautem Block. Ursache war kein Fehler, sondern die Linksbündigkeit von oben: `margin-inline: var(--rand) auto` setzt links einen festen Rand und schiebt allen Rest nach rechts. ⚠ Die Regel von oben BLEIBT für die Erzählbühnen. Dort ist der Fließtext gemeint, und der soll in der Flucht von Navigation und Pfadzeile beginnen (Dieters Anordnung vom 09.08.2026). Zentriert wird nur, was ein eingebauter KASTEN ist — Laden, Datenbank, Rechtstexte, Videothek, Verwaltung. Der Anker ist deshalb `.fuellt`, also die SACHE (ein Block, der die Fläche einnimmt), nicht die Seitenart: Genau daran ist es am 26.08.2026 viermal an einem Tag gescheitert, und niemand merkte es, weil nichts abstürzte. */ .buehne.aktiv > .feld.fuellt{ margin-inline:auto } /* Zwei Zonen: Bühne (zwei Drittel) und Figur (ein Drittel). Ab 900 px nebeneinander, darunter untereinander — dort steht die Figur oben, weil sie die Szene erklärt. */ .szene{ display:grid; gap:var(--spaltenluft); grid-template-columns:1fr; align-items:center; min-height:0; } .szene > *{min-height:0} @media (min-width:900px){ .szene{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} /* Auf der zweiten Bühne steht die Figur links und spricht nach rechts — dieselbe Szene, nur gespiegelt. */ .szene.gedreht{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} /* ⚑ ANKERREGEL (Dieter 08.08.2026): „die Avatare sollen als Anker dienen und jeweils links wie rechts an einer festgelegten Stelle unverrückt über alle Seiten stehen bleiben — und keinesfalls sich in einer einzigen Szene von links nach rechts bewegen." Deshalb: **Dieter steht immer links, Petra immer rechts.** Was die Seite wechselt, ist nie die Figur, sondern der Inhalt daneben — bei den geraden Folgen rückt der Film nach rechts, weil dort Dieter ansagt. Der Wechsel ist ein Austausch, keine Bewegung: Es gibt bewusst keinen Übergang auf der Position. */ .szene.gedreht > .zone-figur{order:-1} .zone-figur, .zone-buehne{transition:none} } .szene > .zone-buehne{min-width:0} .szene > .zone-figur{min-width:0; display:grid; justify-items:center; gap:var(--space-3)} /* Die Figur steht OBEN in ihrer Spalte, nicht mittig darin: Wird die Textspalte daneben höher (viele Kacheln, langer Absatz), rutschte die Figur sonst mit nach unten — dieselbe Figur stand dann auf jeder Bühne woanders. Gemessen: „kaufen-preis" von 164 auf 118 px. ⚠ Bewusst nur zwei Klassen tief, damit die beiden gewollten Ausnahmen weiter gewinnen: `.stage-l2 .zone-figur` (steht unten) und das lange Blatt (klebt beim Scrollen). */ .szene > .zone-figur{align-self:start} @media (max-width:899px){ .szene > .zone-figur{order:-1} } /* ── Figuren ───────────────────────────────────────────────────────────────── */ .figur{position:relative; justify-self:center} /* `max-height:100%` ist hier kein Schmuck, sondern der Riegel: Die Bühne ist genau einen Bildschirm hoch und staucht ihre Teile; ein Bild mit fester Höhe folgt dem nicht und legt sich über den Text darunter. Gemessen am Handy (390×844) am 09.08.2026 — auf den neuen wie auf den bestehenden Bühnen. */ .figur img{height:var(--figur-hoehe); max-height:100%; width:auto; object-fit:contain} .figur::after{ /* Kontaktschatten — das Einzige, was den leeren Raum verrät */ content:""; position:absolute; left:6%; right:6%; bottom:-14px; height:26px; background:radial-gradient(50% 50% at 50% 50%, rgba(26,26,26,.20), rgba(26,26,26,0) 70%); } .figur.kommt{animation:betreten 1.15s cubic-bezier(.22,.9,.24,1) both} @keyframes betreten{ from{opacity:0; transform:translateX(-9vw) scale(.985); filter:blur(7px)} to {opacity:1; transform:none; filter:blur(0)} } /* Sprechen wird ANGEDEUTET, nicht behauptet: ein Atemzug im Takt der Stimme. */ .figur.spricht{animation:atmen 1.9s ease-in-out infinite} @keyframes atmen{0%,100%{transform:none} 50%{transform:translateY(-3px) scale(1.006)}} .figur video{height:var(--figur-hoehe); width:auto; display:none} .figur.laeuft video{display:block} .figur.laeuft picture{display:none} /* Lippensynchrones Sprech-Video (Dieter 10.08.2026): liegt DECKUNGSGLEICH über dem Standbild und wird nur beim Sprechen eingeblendet. Der weiße Videogrund ist im weißen Willkommens-/Wahlraum unsichtbar; auf farbigen Bühnen braucht der Rollout Transparenz. */ .figur video.lip{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:var(--figur-hoehe); max-height:100%; width:auto; object-fit:contain; display:block; opacity:0; pointer-events:none; transition:opacity .12s ease; /* Kein eigener Grund und keine Bedienelemente — beides erzeugte auf dem Fernseher und in der App sichtbare Artefakte beim Umschalten (Dieter 16.08.2026). */ background:transparent; } .figur video.lip::-webkit-media-controls, .figur video.lip::-webkit-media-controls-start-playback-button, .figur video.lip::-webkit-media-controls-overlay-play-button{ display:none !important } .figur.lippt video.lip{opacity:1} /* ── Rede ──────────────────────────────────────────────────────────────────── */ /* ═══ DAS SPRECHFELD — das eine, wiederverwendbare Muster (Dieter 09.08.2026) ══════════ Feste Höhe (acht Zeilen). Der Text tippt OBEN verankert ruhig an Ort und Stelle durch — solange er hineinpasst, bewegt sich NICHTS (kein Hüpfen). Läuft er über, fährt der innere Laufteil per translateY weich nach oben aus dem Bild (kein Abschneiden), oben durch eine Maske ausgeblendet. Dasselbe Prinzip trägt der Startbild-Lauftext. `buehne.js` verpackt die Absätze in `.rede-lauf` und schiebt sie nach. NEUE Bühnen mit Fließrede benutzen genau das. */ .rede{ align-self:center; height:var(--fliesstext-hoehe); overflow:hidden; } .rede.scrollt{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 100%); } .rede-lauf{ transition:transform .45s cubic-bezier(.22,.9,.24,1) } /* Die STILLE Rede (Folgen-Ansage: nur gesprochen, unsichtbar) ist KEIN Sprechfeld — sie darf nicht acht Zeilen Höhe reservieren, sonst schiebt sie das Video nach oben (Dieter 09.08.2026). */ .rede.still{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none } /* Die VOLL gezeigte Rede (Dieter 26.08.2026): Wer zurückkommt, die Bühne in diesem Besuch schon gehört hat oder auf einer `data-sofort`-Bühne steht, bekommt den Text am Stück — und zwar VON OBEN. Das feste Acht-Zeilen-Fenster gilt dann nicht mehr; das Feld wächst mit dem Text und wird erst jenseits von 46 % der Fensterhöhe in sich scrollbar, damit eine lange Rede die Kacheln darunter nicht aus dem Bild schiebt. Die Maske entfällt — sie blendet oben aus, und oben steht hier der erste Satz. */ .rede.voll{ height:auto; max-height:74vh; overflow-y:auto; overscroll-behavior:contain; -webkit-mask-image:none; mask-image:none } .rede.voll .rede-lauf{ transform:none } /* Reicht das Fenster auch dann nicht, blendet der Text UNTEN aus statt oben — dort steht das, was noch kommt. Gesetzt wird die Marke vom Bühnenskript, das den Überlauf misst; ohne sie bliebe ein Verlauf stehen, wo gar nichts abgeschnitten ist. */ .rede.voll.voll-mehr{ -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 88%, transparent 100%) } .rede p{ font-family:var(--font-head); font-size:var(--buehnenschrift); line-height:var(--zeilenabstand); margin:0 0 .35em; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; white-space:pre-line; } .rede p.da{opacity:1; transform:none} .rede p:last-of-type{color:var(--text)} .rede p.frage{margin-top:.5em} /* Die Antwort auf die Wahl steht als eigener Absatz (Dieter 08.08.2026). */ .rede p.antwort{margin-top:1em} .rede p.anspruch{ font-family:var(--font-head); font-size:var(--buehnenschrift); line-height:var(--zeilenabstand); opacity:0; transform:translateY(12px); transition:opacity 1.4s ease, transform 1.4s ease} .rede p.anspruch.da{opacity:1; transform:none} /* ── Marke fliegt ein ──────────────────────────────────────────────────────── */ .marke{opacity:0; transform:scale(.18); transform-origin:left center} .marke img{width:min(52vw,440px); height:auto; display:block} .marke .unterzeile{ font-family:var(--font-head); font-size:var(--buehnenschrift); line-height:1.2; margin:.55em 0 0; opacity:0; transition:opacity 1.1s ease .5s; color:var(--text)} .marke.ein{animation:marke-ein 2.6s cubic-bezier(.2,.8,.2,1) both} .marke.ein .unterzeile{opacity:1} .marke.weg{animation:marke-weg 1.1s ease both} @keyframes marke-ein{from{opacity:0; transform:scale(.18)} to{opacity:1; transform:scale(1)}} @keyframes marke-weg{from{opacity:1; transform:none} to{opacity:0; transform:translateY(-14px)}} /* ── Die Pfeile ──────────────────────────────────────────────────────────────── EINE Gestalt, vier Richtungen — die Handschrift stammt von den Blätterpfeilen des Begleitbuchs. Sie hängen am Sichtfenster, nicht an der Bühne: Eine Bühne kann höher sein als der Schirm, dann läge ein Pfeil an ihrem Fuß unsichtbar unter der Kante. */ .pfeil{ --grosse:clamp(44px, 4.2vw, 56px); display:grid; place-items:center; width:var(--grosse); height:var(--grosse); border-radius:50%; border:2px solid var(--accent); color:var(--accent); background:rgba(155,122,74,.08); text-decoration:none; cursor:pointer; transition:background .22s ease, color .22s ease, transform .12s ease, opacity .6s ease; } .pfeil .ar{ font-family:var(--font-head); font-size:calc(var(--grosse) * .58); line-height:0; display:block; } .pfeil:hover{background:var(--accent); color:#fff} .pfeil:active{transform:scale(.94)} .pfeil-runter, .pfeil-links, .pfeil-rechts, .pfeil-hoch, .pfeil-tradition{position:fixed; z-index:40; opacity:0; pointer-events:none} /* Der Weg zur gewohnten Webseite steht OBEN RECHTS (Dieter 09.08.2026: *„alle seiten erhalten bitte einen button im bestehenden stil oben rechts"*). Gegenüber der Wortmarke oben links, in derselben Höhe wie sie — und damit weit weg vom Kapitelrücksprung in der Mitte. Unten rechts führt jetzt zu den Medien. */ .pfeil-tradition{right:clamp(14px,2.4vw,40px); top:clamp(14px,3dvh,28px)} .pfeil-tradition.da{opacity:1; pointer-events:auto} /* Sein Hinweis steht links vom Knopf wie beim Pfeil nach rechts. Er ist kurz gehalten (Dieter 09.08.2026: *„wenn zu lang, dann eigenständig den Text kürzen"*) und bleibt deshalb einzeilig; der vollständige Satz steht im Vorlesetext des Knopfes. */ .pfeil-tradition .pfeil-hinweis{right:calc(100% + 10px); top:50%; white-space:nowrap} /* Am Touchgerät gibt es kein Überfahren — ein Knopf, dessen Bedeutung nur beim Hovern erscheint, ist dort ein Pfeil ohne Aussage. Bis 820 px steht der Hinweis deshalb dauerhaft (gemessen: er beginnt bei 142 px, die Wortmarke endet bei 136 px — es passt). */ @media (max-width:820px){ .pfeil-tradition .pfeil-hinweis{opacity:1} } /* Der Rücksprung an den Kapitelanfang steht oben in der Mitte — genau gegenüber dem Pfeil nach unten (Dieter 09.08.2026). Damit ist die Pfeilsprache rund: unten weiter, oben an den Kapitelanfang, links einen Schritt zurück, rechts hinaus. */ .pfeil-hoch{left:50%; top:clamp(14px,3dvh,28px); transform:translateX(-50%)} .pfeil-hoch .ar{transform:rotate(-90deg) translateX(.02em)} .pfeil-hoch.da{opacity:1; pointer-events:auto} .pfeil-hoch .pfeil-hinweis{right:auto; left:50%; top:calc(100% + 12px); bottom:auto; transform:translateX(-50%)} .pfeil-runter{left:50%; bottom:clamp(14px,3dvh,28px); transform:translateX(-50%)} .pfeil-runter .ar{transform:rotate(90deg) translateX(-.02em)} .pfeil-runter.da{opacity:1; pointer-events:auto; animation:wippen 2.4s ease-in-out infinite} @keyframes wippen{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)}} .pfeil-links{left:clamp(14px,2.4vw,40px); bottom:clamp(14px,3dvh,28px)} .pfeil-rechts{right:clamp(14px,2.4vw,40px); bottom:clamp(14px,3dvh,28px)} .pfeil-links.da, .pfeil-rechts.da{opacity:1; pointer-events:auto} /* Der Hinweis steht beim Knopf, nicht in der Statusleiste des Browsers — und zwar rechts unten, wo der Knopf ist (Dieter 08.08.2026). */ .pfeil-rechts{position:fixed} .pfeil-hinweis{ position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--font); font-size:.8rem; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:.35em .7em; opacity:0; pointer-events:none; transition:opacity .2s ease; } /* Jeder Pfeil trägt seinen eigenen Hinweis — der linke rechts von sich, der untere darüber (Dieter 09.08.2026: „man kann es genauso schön wie rechts gestalten"). */ .pfeil:hover .pfeil-hinweis, .pfeil:focus-visible .pfeil-hinweis{opacity:1} .pfeil-links .pfeil-hinweis{right:auto; left:calc(100% + 10px)} .pfeil-runter .pfeil-hinweis{right:auto; left:50%; top:auto; bottom:calc(100% + 12px); transform:translateX(-50%)} /* ── Startbild ───────────────────────────────────────────────────────────────── Links die Wortmarke und der laufende Text, rechts der Sender im Hochformat. Beide Höhen leiten sich von der BILDSCHIRMHÖHE ab, nicht von einer Zeilenzahl — so bleibt das Verhältnis auf jedem Schirm gleich. */ .wortmarke{ position:absolute; top:clamp(14px,2.2dvh,25px); left:clamp(16px,2vw,25px); width:clamp(120px,17vw,210px); height:auto; display:block; margin:0; z-index:5; } .lesespalte{min-width:0} /* Das Motto auf dem Startbild (Dieter 09.08.2026, in zwei Schritten: erst „als Zeile unter dem Logo", dann *„setze bitte seitenzentriert oben zwischen dem Logo und dem Rechts-Button"*). Es sitzt jetzt oben in der FENSTERmitte, auf der Höhe der Wortmarke — links die Marke, rechts der Knopf, dazwischen der Satz. Schrift und Farbe kommen aus der CI: Playfair Display Italic in Bronze ist dort der Kursiv-Akzent (ci.md), also kein neuer Wert (R-70/R-75). */ /* ⚑ Dritte und geltende Fassung (Dieter 09.08.2026): *„Kaffee ist unsere Leidenschaft sieht da nicht gut aus — versuche es in der ganz großen Font der omaneo.de-Landingpage in schwarz, positioniert linksbündig mit etwas Abstand unter dem Logo."* Die Bronze-Kursive oben in der Mitte ist damit abgelöst. Die Schrift ist NICHT geschätzt, sondern an der Landingpage GEMESSEN (R-88, 09.08.2026): deren H1 steht in Playfair Display, Gewicht 400, 48 px, Farbe #1A1A1A, Zeilenhöhe 1,18 — 3rem trifft die 48 px bei großem Fenster genau. Linke Kante und Abstand kommen aus der gemessenen Wortmarke (Unterkante 106 px bei 1440, linke Kante 25 px). */ /* ⚑ Vierte Fassung (Dieter 09.08.2026): *„steht nicht linksbündig unter dem Logo, sondern zu weit links — versuche es in Bronze und setze es etwas höher, damit es deutlicher ans Logo angebunden ist."* Er hat genau hingesehen: Die Bilddatei der Wortmarke trägt einen TRANSPARENTEN RAND. Gemessen an der Datei selbst (09.08.2026): links 7,25 %, unten 17,67 % des Bildes sind leer — die sichtbare Schrift „omaneo" beginnt also 7,25 % der angezeigten Logobreite weiter rechts als die Bildkante, und sie endet 17,67 % weiter oben. Beide Werte stehen hier als Rechnung, nicht als geschätzter Abstand (R-88): linke Kante = Logo-Kante + 7,25 % der Logobreite obere Kante = Logo-Oberkante + sichtbare Logohöhe + 6 px Luft Logobreite ist `clamp(120px,17vw,210px)`, das Seitenverhältnis 8182 : 3362 (= 0,411). */ .motto{ position:absolute; top:calc(clamp(14px,2.2dvh,25px) + clamp(120px,17vw,210px) * 0.411 * 0.8233 + 6px); left:calc(clamp(16px,2vw,25px) + clamp(120px,17vw,210px) * 0.0725); margin:0; z-index:5; max-width:min(90vw,720px); font-family:var(--font-head); font-style:normal; font-weight:400; color:var(--accent); font-size:clamp(1.45rem,2.9vw,2.5rem); line-height:1.18; letter-spacing:-.01em; /* Kursiv, vierte und geltende Fassung (Dieter 09.08.2026: „versuchen wir es bei Kaffee ist … in kursiv") — Playfair Display Italic in Bronze ist der Kursiv-Akzent der CI (ci.md), passt also zur Marke und nicht nur zum Geschmack. */ font-style:italic; } /* Am Handy ist oben zwischen Marke und Knopf kein Platz (gemessen bei 390 px: Marke 120 px, Knopf 48 px, dazwischen bleiben keine 200 px für den Satz). Dort steht das Motto deshalb UNTER der Wortmarke, weiter links ausgerichtet an ihr. */ @media (max-width:820px){ /* Am Handy steht der Satz im Fluss statt absolut — dort ist die Bühne ohnehin senkrecht gestapelt, und ein absolut gesetzter Satz würde in das Videobild ragen. Der Abstand nach oben ist die gemessene Höhe der Wortmarke (120 px Breite × 3362/8182 ≈ 49 px) plus ihr Abstand von oben plus Luft. */ .motto{position:static; max-width:none; margin:0 0 clamp(.4rem,1.4dvh,1rem); /* Dieselbe Rechnung wie oben, nur als Innenabstand: der linke Versatz bindet den Satz an die sichtbare Schrift der Wortmarke, der obere an ihre sichtbare Unterkante. */ padding:calc(clamp(14px,2.2dvh,25px) + clamp(120px,17vw,210px) * 0.411 * 0.8233 + 4px) 0 0 calc(clamp(16px,2vw,25px) + clamp(120px,17vw,210px) * 0.0725)} } .schreibfeld{ /* --zeilenabstand kommt zentral aus :root (Fließtext-Quelle) — hier nicht mehr eigen. */ height:calc(6 * var(--zeilenabstand) * var(--buehnenschrift)); font-size:var(--buehnenschrift); font-family:var(--font-head); line-height:var(--zeilenabstand); overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%); } .schreibfeld .rollen{transition:transform .6s cubic-bezier(.22,.9,.24,1)} .schreibfeld .zeile{margin:0 0 calc(.6em * var(--zeilenabstand))} .schreibfeld .zeile:last-child{margin-bottom:0} /* Der bronzene Balken ist der Schreibkursor — Dieter hat ihn ausdrücklich behalten. */ .schreibfeld .zeile:last-child::after{content:"▍"; color:var(--accent); animation:blinken 1s steps(1) infinite} @keyframes blinken{50%{opacity:0}} /* Auf der Startseite (Vorhalle) zeigt der Lauftext zwei Zeilen mehr (Dieter 09.08.2026): acht statt sechs Zeilen. Nur dort — die Reden auf den übrigen Bühnen bleiben bei sechs. */ .startbild-feld .schreibfeld{ height:var(--fliesstext-hoehe) } /* Die Überschrift jedes Wissensstücks (vor dem Doppelpunkt) steht bronzefarben auf einer eigenen Zeile, durch die Zeilenschaltung vom Fließtext abgesetzt (Dieter 09.08.2026). */ .schreibfeld .zeile.ueberschrift{ color:var(--accent); font-weight:400; margin-top:calc(.4em * var(--zeilenabstand)); margin-bottom:calc(.15em * var(--zeilenabstand)); } .schreibfeld .zeile.ueberschrift:first-child{ margin-top:0 } /* Der Nachsatz des Kurshinweises (Dieter 25.08.2026: „in bronze eventuell italic") — leiser als eine Überschrift, aber in derselben Marken-Bronze. Er steht als eigener Absatz unter dem Kurstext und bekommt danach zehn Sekunden Stille. */ .schreibfeld .zeile.nachsatz{ color:var(--accent); font-style:italic; font-weight:400; margin-top:calc(.5em * var(--zeilenabstand)); /* Rechtsbündig (Dieter 25.08.2026) — der Nachsatz setzt sich damit sichtbar vom linksbündigen Fließtext darüber ab, wie eine Unterschrift unter dem Absatz. ⚠ Der bronzene Schreibkursor hängt an `.zeile:last-child::after` und wandert dadurch mit ans rechte Ende — genau dorthin, wo der Text endet. */ text-align:right; } .senderfeld{position:relative; justify-self:center; width:100%} .senderfeld video{ width:100%; height:auto; aspect-ratio:9/16; max-height:min(62dvh, 620px); object-fit:cover; border-radius:14px; background:#111; margin-inline:auto; } .tv-ton{ position:absolute; right:12px; bottom:12px; z-index:6; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#fff; background:rgba(155,122,74,.85); backdrop-filter:blur(3px); transition:background .2s, transform .12s; } .tv-ton:hover{background:var(--accent)} .tv-ton:active{transform:scale(.94)} /* Der Grundzustand gehört hierher, nicht als Attribut ins Zeichen: Ein `style` am Element schlägt jede Regel aus dem Blatt, und genau daran hing der Knopf — er schaltete den Ton ein, ohne es zu zeigen (09.08.2026). Zwei Zustände, eine Wahrheit. */ .tv-ton .an{display:none} .tv-ton[aria-pressed="true"] .aus{display:none} .tv-ton[aria-pressed="true"] .an{display:block} /* ── Die Wahl (drei Kacheln) ─────────────────────────────────────────────────── `auto-fit` mit `min()` als Untergrenze: Am Handy steht eine Kachel je Zeile, ohne dass das Raster die Bühne aufbläst — genau daran hing die abgeschnittene Kachelreihe. */ .wahl{ margin-top:clamp(1rem,3dvh,2.5rem); display:grid; gap:var(--space-4); /* Es sind genau drei Wege — also drei Spalten, sobald Platz ist. `auto-fit` legte bei breiten Feldern eine vierte, leere Spur an und machte die Kacheln schmaler. */ grid-template-columns:1fr; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .7s ease .1s, transform .7s ease .1s; } .wahl.da{opacity:1; transform:none; pointer-events:auto} @media (min-width:760px){ .wahl{grid-template-columns:repeat(3,minmax(0,1fr))} } /* Drei Medien-Kacheln mit je drei Links (Dieter 09.08.2026), nach dem Muster der Wahl. */ .medienwahl{ margin-top:clamp(1rem,3dvh,2.5rem); display:grid; gap:var(--space-4); grid-template-columns:1fr; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .7s ease .1s, transform .7s ease .1s; } .medienwahl.da{ opacity:1; transform:none; pointer-events:auto } @media (min-width:620px){ .medienwahl{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (min-width:1000px){ .medienwahl{ grid-template-columns:repeat(4,minmax(0,1fr)) } } .medienkachel{ display:flex; flex-direction:column; padding:clamp(.7rem,2.2vw,1.2rem) clamp(.9rem,2.4vw,1.4rem); background:var(--kapitelton,#fff); border:1px solid var(--border); border-radius:14px; } .medienkachel a{ text-decoration:none; color:var(--text); font-family:var(--font-head); font-size:clamp(1rem,1.6vw,1.3rem); padding:.35em 0; border-bottom:1px solid var(--border); transition:color .16s ease; } .medienkachel a:last-child{ border-bottom:0 } .medienkachel a:hover{ color:var(--kapitelfarbe,var(--accent)) } .weg-knopf{ appearance:none; text-align:left; cursor:pointer; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--kachel-polster); font-family:var(--font); transition:border-color .25s, transform .25s, box-shadow .25s; } .weg-knopf:hover,.weg-knopf:focus-visible{ border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-lg); outline:none} /* Keine Unterstreichung in den Kacheln (Dieter 09.08.2026: „bitte nicht benutzen"). Die Kachel IST der Knopf — sie braucht keine Linie, die sie als Verweis ausweist. Die Kinder ausdrücklich mit, sonst erbt der Text die Linie vom Gerüst. */ .weg-knopf, .weg-knopf *{text-decoration:none} /* Die drei Wahlkacheln tragen den Ton ihres Kapitels — dieselbe Farbe, die einen danach im Bereich empfängt (Dieter 09.08.2026). Die Verbindung ist der Zweck: Wer auf die warme Kachel drückt, landet im warmen Bereich. */ .weg-knopf[data-kapitel="lernen"]{background:var(--ton-lernen); --kapitelfarbe:var(--ton-lernen-satt)} .weg-knopf[data-kapitel="informieren"]{background:var(--ton-informieren); --kapitelfarbe:var(--ton-informieren-satt)} .weg-knopf[data-kapitel="kaufen"]{background:var(--ton-kaufen); --kapitelfarbe:var(--ton-kaufen-satt)} /* Das Haus („Wir über uns") gehört zum Bereich Sonstiges und trägt dessen Ton — damit die Kacheln dort genauso aussehen wie die Wahl auf der Willkommens-Bühne (Dieter 17.08.2026). */ .weg-knopf[data-kapitel="medien"]{background:var(--ton-medien); --kapitelfarbe:var(--ton-medien-satt)} .weg-knopf[data-kapitel]:hover, .weg-knopf[data-kapitel]:focus-visible{ border-color:var(--kapitelfarbe)} .weg-knopf[data-kapitel] i{color:var(--kapitelfarbe)} .weg-knopf[data-kapitel]:hover .pfeil{background:var(--kapitelfarbe); color:#fff} .weg-knopf b{display:block; font-family:var(--font-head); font-weight:400; font-size:var(--kachel-titel); margin-bottom:.35em} .weg-knopf span{color:var(--muted); font-size:var(--kachel-text)} .weg-knopf i{display:block; margin-top:var(--space-3); font-style:normal; font-size:.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--accent)} .weg-knopf .pfeil{--grosse:38px; margin-top:var(--space-3); pointer-events:none} /* Die drei Wege INNERHALB einer Haus-Kachel (17.08.2026). Sie tragen die Versalzeile des Vorbilds, sind aber einzeln anklickbar — die Kachel selbst ist dort kein Verweis. */ .weg-knopf .kachel-wege{display:block; white-space:nowrap} /* Ein sichtbarer Trenner statt bloßem Abstand: „AGB · WIDERRUF · DATENSCHUTZ" liest sich als Reihe, drei Wörter ohne Zeichen dazwischen als Versehen (Dieter 17.08.2026). Er gehört ins Stilblatt und nicht in den Text, damit die letzte Stelle keinen bekommt. */ .weg-knopf .kachel-wege a + a::before{content:"·"; padding:0 .5em; opacity:.5; color:var(--muted); font-style:normal} .weg-knopf .kachel-wege a{color:var(--kapitelfarbe,var(--accent)); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .16s ease} .weg-knopf .kachel-wege a:hover, .weg-knopf .kachel-wege a:focus-visible{ border-bottom-color:currentColor; outline:none} /* Ein Rahmen ohne eigenes Ziel hebt sich nicht an — sonst verspricht er einen Klick, den es nicht gibt. */ .wahl.haus-kacheln .weg-knopf:hover{transform:none; box-shadow:none; border-color:var(--border)} .weg-knopf:hover .pfeil{background:var(--accent); color:#fff} /* ── stage-L1: das Begleitbuch ───────────────────────────────────────────────── Das Buch ist eine geschlossene Anwendung mit fester Schriftgröße. Ein zu kleiner Rahmen schneidet seinen Text ab, ein zu großer lässt ihn verloren wirken. Deshalb wird es in einer REFERENZGRÖSSE gerendert (1000 × 820) und als Ganzes in den Rahmen eingepasst — auf jedem Schirm dasselbe Bild, nur größer oder kleiner. Den Maßstab rechnet das Skript (`buchMassstab`), weil er beide Achsen kennen muss. */ .l1-rede.weg{opacity:0; transform:translateY(-10px); transition:opacity .5s ease, transform .5s ease} .l1-buch{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease} .l1-buch.da{opacity:1; transform:none} /* Der Rahmen trägt das VERHÄLTNIS der Referenzgröße (1000 × 820). Nur so füllt das eingepasste Buch ihn vollständig — vorher blieben links und rechts dunkle Streifen stehen, weil Rahmen und Buch verschiedene Verhältnisse hatten (Dieter 08.08.2026). */ /* ⚠ Nicht die Höhe deckeln, sondern die BREITE aus der erlaubten Höhe rechnen: Ein `max-height` verändert das Verhältnis des Rahmens, und schon stimmen Rahmen und Buch nicht mehr überein — genau daher kamen die dunklen Streifen. */ .buchrahmen{ --buch-maxh:min(66dvh, 820px); position:relative; aspect-ratio:1000/820; width:min(100%, calc(var(--buch-maxh) * 1000 / 820)); border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--surface,#F8F6F3); box-shadow:0 18px 60px rgba(26,26,26,.18); } .buchrahmen iframe{ position:absolute; top:0; left:0; border:0; display:block; width:var(--buch-breite,1000px); height:var(--buch-hoehe,820px); transform:scale(var(--buch-massstab,1)); transform-origin:top left; } /* Was die Figur sagt, steht klein unter ihr — gesprochen wird es ohnehin. */ .blase-klein{ margin:0; max-width:30ch; text-align:center; font-size:clamp(.85rem,1vw,1rem); line-height:1.5; color:var(--muted); opacity:0; transition:opacity .5s ease; } .blase-klein.da{opacity:1} /* ── stage-L2: die Folge im Querformat ───────────────────────────────────────── Umgestellt am 08.08.2026 (Dieter: „der raum ist zu groß für hochkant — tausche doch auf 16:9"). Ein Hochkantfilm braucht in einer zwei Drittel breiten Zone entweder sehr viel Höhe oder er wird winzig; quer füllt er die Zone und lässt der Figur ihren Platz. Quelle sind die Querfassungen unter /assets/barista-kurs/videos/. */ /* Der Film sitzt etwas höher als die Bildmitte (Dieter 08.08.2026) — die Figur daneben steht ohnehin auf dem Boden, ein mittig schwebender Film wirkt daneben tief. */ .stage-l2 .szene{align-items:start} .stage-l2 .zone-figur{align-self:end} .l2-film-rahmen{width:100%; margin-top:clamp(0px,2dvh,24px)} .l2-film-rahmen video{ width:100%; aspect-ratio:16/9; max-height:clamp(220px,52dvh,560px); border-radius:14px; background:#000; display:block; box-shadow:0 18px 60px rgba(26,26,26,.18); } /* ── Der Fußraum: die Folgenliste ────────────────────────────────────────────── Schlanke Kacheln, eine Zeile je Folge, so viele Spalten wie hineinpassen. */ /* Elf Folgen in ZWEI Reihen (Dieter 08.08.2026) — dafür braucht es sechs Spalten. Die Titel sind dafür gekürzt worden; steht weniger Platz zur Verfügung, fällt die Reihe stufenweise auf vier, zwei und schließlich eine Spalte. */ .folgenliste{ margin-top:clamp(.6rem,2dvh,1.4rem); display:grid; gap:clamp(6px,.8vw,12px); grid-template-columns:1fr; } @media (min-width:520px){ .folgenliste{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Ab der Tischbreite gilt: HÖCHSTENS ZWEI ZEILEN (Dieter 09.08.2026). Die Spaltenzahl kommt aus der Anzahl der Kacheln und steht als `--spalten` an der Reihe selbst — feste Spalten ergaben bei zehn Kacheln drei Zeilen. Der Rückfallwert 4 gilt nur für Reihen ohne diese Angabe. */ @media (min-width:760px){ .folgenliste{grid-template-columns:repeat(var(--spalten,4),1fr)} } .folgenliste .folge{ cursor:pointer; appearance:none; background:var(--bg); font-family:var(--font); display:flex; align-items:baseline; gap:.55em; text-align:left; padding:clamp(.3rem,.6vw,.5rem) clamp(.55rem,.9vw,.8rem); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color .2s, background .2s, transform .2s; } .folgenliste .folge:hover,.folgenliste .folge:focus-visible{ border-color:var(--accent); transform:translateY(-2px); outline:none} .folgenliste .nr{font-family:var(--font-head); font-style:italic; color:var(--accent); font-size:clamp(.8rem,.95vw,.95rem); min-width:1.1em} .folgenliste .ti{font-family:var(--font-head); font-size:clamp(.82rem,1vw,1rem); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .folgenliste .folge.laeuft{border-color:var(--accent); background:var(--surface,#F8F6F3)} .folgenliste .zurueck .ti{color:var(--muted)} /* ── Spuren und Abschnitte (die älteren Strecken) ──────────────────────────── */ .spur{display:none} .spur.offen{display:block} .abschnitt, .bild-abschnitt{ padding:clamp(3rem,9dvh,6rem) 0; opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease} .abschnitt.sichtbar, .bild-abschnitt.sichtbar{opacity:1; transform:none} .abschnitt.warm{background:var(--surface,#F8F6F3)} .innen{width:min(var(--feld-max), 100% - var(--rand)*2); margin-inline-start:var(--rand)} .innen.eng{max-width:66ch} .folgen{display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))} .folge{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; text-decoration:none; background:var(--bg)} .folge img{width:100%; aspect-ratio:16/9; object-fit:cover} .folge p{margin:0; padding:var(--space-4)} .folge b{display:block; font-size:.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--accent); margin-bottom:.3em} .zahlen{display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); margin-top:var(--space-6)} .zahl b{display:block; font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.8rem)} .zahl span{color:var(--muted); font-size:.9rem} .tatreihe{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-6)} /* ⛔ 26.08.2026 (Dieter, dritte Fassung an einem Abend — und die ist die richtige): „ich habe immer noch zwei braun, 1 transparent, der mouseover wird braun, die braunen werden beim mouse over dunkelbraun — mache alle transparent und wenn man darüber fährt braun.“ Die Geschichte dieser paar Zeilen ist lehrreich: 1. Ursprünglich: zwei Knöpfe voll bronze, einer als Umriss — und **keiner** antwortete beim Überfahren (gemessen: Grund, Schrift und Rand blieben gleich). 2. Mein erster Versuch machte jeden „brauner": der volle dunkler, der Umriss gefüllt. Das behob das Schweigen, ließ aber ZWEI Farbsprachen nebeneinander stehen. 3. Jetzt gilt eine: **ruhig ist jeder ein Umriss, überfahren wird jeder bronze.** Ein Knopf zeigt damit nur noch EINE Sache an — dass er ein Knopf ist. Welcher der wichtigere Weg ist, sagt seine Stellung in der Reihe, nicht seine Füllung. */ .tat{ display:inline-block; padding:.8em 1.5em; border-radius:var(--r-md); background:transparent; color:var(--accent); border:1px solid var(--accent); text-decoration:none; cursor:pointer; font-family:var(--font); font-size:1rem; transition:background-color .16s ease, color .16s ease, border-color .16s ease; } /* ⚠ Die Klasse `.leise` gibt es weiterhin an einigen Knöpfen im Bestand — sie bedeutet jetzt dasselbe wie kein Zusatz. Sie wird nicht entfernt: Ein Klassenname, der irgendwo im Bestand noch steht, soll nichts kaputt machen. */ .tat.leise{ background:transparent; color:var(--accent); border:1px solid var(--accent) } /* ⚑ In `.i-text` färbt eine `a`-Regel Links bronze. Beim Überfahren muss die Schrift weiß werden, und dafür braucht die Regel mehr Gewicht als jene — daher die zwei Klassen. */ .tat:hover, .tat:focus-visible, .tat.leise:hover, .tat.leise:focus-visible{ background:var(--accent); color:#fff; border-color:var(--accent); } .bruecke{text-align:center; padding:clamp(3rem,9dvh,6rem) var(--rand); background:var(--bg)} .film video{width:100%; border-radius:14px; background:#000} /* ── Die schwebende Moderation (nur in den älteren Strecken) ──────────────── */ .moderator{ position:fixed; right:clamp(12px,2vw,28px); bottom:clamp(12px,2dvh,28px); z-index:30; display:flex; align-items:flex-end; gap:var(--space-3); pointer-events:none; opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease} .moderator.da{opacity:1; transform:none} .moderator img{height:clamp(96px,15dvh,175px); width:auto; filter:drop-shadow(0 12px 18px rgba(26,26,26,.13))} .blase{background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--space-4) var(--space-5); max-width:34ch; box-shadow:var(--shadow-lg); font-size:.92rem; transition:opacity .25s ease} .blase.weg{opacity:0} /* ── Fußzeile ─────────────────────────────────────────────────────────────── */ .fuss{padding:clamp(3rem,8dvh,5rem) var(--rand); background:var(--surface,#F8F6F3); text-align:center} .fuss .stempel{color:var(--muted); font-size:.78rem; margin-top:var(--space-5)} /* ── Ruhe-Modus ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .abschnitt,.bild-abschnitt,.rede p,.wahl{opacity:1; transform:none} html{scroll-behavior:auto} } /* ── Spur „Informieren": die GUDRUN-Seiten ───────────────────────────────────── Gleiche Ansicht wie bei „Lernen" — Inhalt links, Figur rechts (bzw. gespiegelt), Kachelreihe im Fußraum. Die Inhalte stammen aus gudrun.php und gudrun-lehrerin.php. */ /* ⚠ Die schwarzen Ränder kamen NICHT aus dem Material — die Dateien sind sauber 16:9 (nachgemessen 08.08.2026 an mehreren Stellen der Folge). Sie entstanden im Rahmen: Eine Höhenbegrenzung bei voller Breite macht das Element flacher als 16:9, und ein Video passt sich dann mit Balken ein. Richtig ist, die BREITE aus der erlaubten Höhe zu rechnen — dann trifft der Rahmen das Format exakt. */ /* Das Seitenverhältnis ist NICHT fest 16:9 (Dieter 14.08.2026, am Film der Rösterei): Der Partnerfilm ist Kinoformat 2,37:1 — in einem 16:9-Rahmen legt der Browser oben und unten Balken an. `buehne.js` trägt beim Laden der Metadaten das ECHTE Format des Films in `--film-arw/--film-arh` ein; dann trifft der Rahmen jeden Film exakt und es gibt gar keine Balken. Die Vorgabe bleibt 16:9 für alles, was seine Maße nicht meldet. Und falls doch einmal Balken entstehen (Bild schmaler als der Rahmen), stehen sie in der Creme der Bühne statt in Schwarz — Dieter: *„damit man es nicht sieht."* */ .i-film{--film-arw:16; --film-arh:9; --film-grund:#F8F1E7; --film-maxh:clamp(200px,48dvh,520px); width:min(100%, calc(var(--film-maxh) * var(--film-arw) / var(--film-arh)))} .i-film video{width:100%; aspect-ratio:var(--film-arw) / var(--film-arh); max-height:none; object-fit:contain; border-radius:14px; background:var(--film-grund); display:block; box-shadow:0 18px 60px rgba(26,26,26,.18)} .i-text h2{font-size:var(--titelgroesse); margin:.15em 0 .5em} /* Einzeilige Überschrift (Dieter 10.08.2026, kaufen-preis): nie umbrechen; auf schmalen Schirmen skaliert sie mit, damit sie in einer Zeile bleibt statt zu überlaufen. */ .i-text h2.einzeilig{white-space:nowrap; font-size:clamp(.95rem, 3.3vw, var(--titelgroesse))} .i-text .satz{max-width:46ch} .i-liste{list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:var(--space-4)} .i-liste li{font-size:clamp(.9rem,1.1vw,1.05rem); color:var(--muted); line-height:1.5} .i-liste b{display:block; color:var(--text); font-family:var(--font-head); font-weight:400} .i-raster{display:grid; gap:clamp(8px,1vw,16px); margin-top:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .i-raster > div{border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(.5rem,.9vw,.8rem) clamp(.7rem,1vw,1rem)} /* Die Kacheln eines Rasters steigen an (Dieter 12.08.2026, wie auf den GUDRUN-Seiten): eine einzige Marken-Bronze, vier Sättigungen, Rand mitwachsend. Der Zyklus wiederholt sich alle vier Kacheln (`4n+…`), damit auch Raster mit fünf oder mehr Feldern nicht plötzlich farblos weiterlaufen. Betrifft drei Seiten: kaufen-preis, medien-podcast, inhalt-medien-podcast. Die Werte sind gemessen, nicht gegriffen: Der Beschreibungstext (--muted, unter 0,9 rem) bleibt auf jeder Stufe über der Norm von 4,5:1. Wer nachschärft, misst nach. */ .i-raster > div:nth-child(4n+1){background:color-mix(in srgb, var(--accent) 3%, transparent); border-color:color-mix(in srgb, var(--accent) 22%, var(--border))} .i-raster > div:nth-child(4n+2){background:color-mix(in srgb, var(--accent) 6%, transparent); border-color:color-mix(in srgb, var(--accent) 34%, var(--border))} .i-raster > div:nth-child(4n+3){background:color-mix(in srgb, var(--accent) 9%, transparent); border-color:color-mix(in srgb, var(--accent) 46%, var(--border))} .i-raster > div:nth-child(4n+4){background:color-mix(in srgb, var(--accent) 10%, transparent); border-color:color-mix(in srgb, var(--accent) 58%, var(--border))} .i-raster b{display:block; font-family:var(--font-head); font-weight:400; font-size:clamp(.95rem,1.1vw,1.1rem); margin-bottom:.2em} .i-raster span{color:var(--muted); font-size:clamp(.78rem,.9vw,.9rem); line-height:1.4} /* ── Warenkarten ────────────────────────────────────────────────────────────── Für die Rösterei und das Starterset (Dieter 09.08.2026): Bild, Name, Preis, ein Satz. Dieselbe Gestalt wie das Datenraster daneben, nur mit Bild — kein neuer Farbwert, alles aus den Gestaltungswerten (R-70/R-75). Der Grund ist WEISS: Ware wird auf Weiß gezeigt, nicht auf einem aus dem Bild gerechneten Ton (R-60). Die Bildhöhe kommt aus der Bildschirmhöhe, damit die Karte in jeder Bühne passt. */ .warenraster{display:grid; gap:clamp(8px,1vw,16px); margin-top:var(--space-5); grid-template-columns:repeat(var(--spalten,4),1fr)} .ware{border:1px solid var(--border); border-radius:var(--r-md); background:#fff; padding:clamp(.5rem,.9vw,.8rem); display:flex; flex-direction:column; gap:.3em; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .12s ease} a.ware:hover, a.ware:focus-visible{border-color:var(--accent); transform:translateY(-2px)} .ware img{width:100%; height:clamp(64px,11dvh,128px); max-height:100%; object-fit:contain; margin-bottom:.2em} .ware b{font-family:var(--font-head); font-weight:400; font-size:clamp(.9rem,1.05vw,1.05rem); line-height:1.2} /* ⚑ Dieter 13.08.2026: „die preise kann man nirgends gut lesen — hell auf hell funktioniert nicht gut." Bronze auf dem hellen Buehnengrund kommt nur auf rund 3,7:1 und reisst damit die Lesbarkeitsschwelle (4,5:1). Der PREIS ist eine Angabe, kein Zierrat: er steht jetzt in der Textfarbe, halbfett und eine Spur groesser. Bronze bleibt der Akzent der Marke — nur nicht dort, wo eine Zahl gelesen werden muss. */ /* ⚑ Dieter 26.08.2026: „auf der kaufen-shop seite steht der preis noch linksbuendig — auch dort gehoert er rechtsbuendig hin." Damit steht die Zahl auf der Buehne so wie in der Datenbank und in der Ladenkachel: rechts am Rand, wo das Auge sie sucht. `display:block` ist noetig, weil `text-align` an einem inline-Element nichts bewirkt — das war der Grund, warum ein blosses `text-align:right` hier nichts geaendert haette. */ .ware em{font-style:normal; color:var(--text); font-weight:600; font-size:clamp(.9rem,1.05vw,1.05rem); letter-spacing:.01em; display:block; text-align:right} .ware span{color:var(--muted); font-size:clamp(.72rem,.85vw,.85rem); line-height:1.35} /* Transparente Kacheln (Dieter 10.08.2026, Rösterei): kein weißer Kasten, nur Verpackung, Name und Menge auf dem Bühnengrund. Etwas größeres Bild, weil der Rahmen wegfällt. */ /* Kachelanmutung (Dieter 12.08.2026): kein weißer Kasten, aber eine feine Andeutung — zarte Linie, minimal aufgehellter Grund. */ .warenraster.klar .ware{background:rgba(255,255,255,.05); border:1px solid rgba(0,0,0,.10); border-radius:var(--r-md); box-shadow:none; padding:clamp(.45rem,.8vw,.7rem)} /* ⚑ `multiply` ist RAUS (12.08.2026): Es war der Behelf, solange die Produktfotos ihr Weiß eingebrannt trugen. Seit sie freigestellt sind, hätte es dunkle Motive nur verfälscht. Das Bild wird mittig gesetzt und sitzt damit über der Mitte des Textblocks — die Motive selbst sind im PNG bereits auf ihre Fläche zentriert. */ .warenraster.klar .ware img{height:clamp(120px,22dvh,220px); display:block; margin-inline:auto; object-fit:contain; mix-blend-mode:normal} a.warenraster.klar .ware:hover{border-color:transparent} /* ── Reine Textkacheln sehen aus wie die Wahlkacheln der Bühne ───────────────────── ⚑ Dieter, 23.08.2026: *„so sehen bei uns kacheln auf der story-web-bühne aus, nicht so wie auf der barista-markt seite."* Er hat die drei Wahlkacheln der Willkommens- Bühne (Lernen · Informieren · Kaufen) danebengehalten. ⛔ Der Grund war derselbe wie bei den Steinkunde-Kacheln am selben Tag: **Die Klasse `ware-text` wurde ausgegeben und hatte keine einzige Regel.** Es griff nur `.ware`, also die Maße einer BILDkachel — kleines Halbfett, kleiner Fließtext, enger Rand. Eine Kachel ohne Bild braucht andere Maße als eine mit. Deshalb erben Überschrift und Fließtext oben unmittelbar von `.weg-knopf` (die zwei Selektoren dort sind erweitert, nicht kopiert); hier stehen nur Fläche, Rahmen und Innenabstand, die von der Bildkachel abweichen. */ .warenraster.klar .ware.ware-text, .warenraster.klar .ware.ware-text:nth-child(n){ background:var(--ton-lernen); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--kachel-polster); gap:0} /* ── Jede Textkachel ihr eigener Ton ─────────────────────────────────────────────── ⚑ Dieter, 23.08.2026: *„die kacheln hat eine andere session versehentlich schon in der formatierung bearbeitet — es muss aber noch die unterschiedlichen farben hinterlegt werden."* Die Form kam von dort, die Farbe fehlte: Alle drei Kacheln standen im selben Ton, weil die Regel oben `--ton-lernen` fest einsetzt. Die Wahlkacheln der Willkommens-Bühne machen es anders — sie tragen `data-kapitel` und holen sich daraus ihren Ton (`.weg-knopf[data-kapitel=…]`, weiter oben). Genau dieses Muster gilt jetzt auch hier: **die Kachel sagt, wozu sie gehört, und die Farbe folgt.** ⚠ Es sind dieselben fünf Haustöne, keine neuen Farben — das Haus hat seine Palette (`design-tokens.css`), und eine vierte Sonderfarbe für drei Kacheln wäre der Anfang vom Ende einer Palette. */ .warenraster.klar .ware.ware-text[data-kapitel="lernen"]{ background:var(--ton-lernen); --kapitelfarbe:var(--ton-lernen-satt)} .warenraster.klar .ware.ware-text[data-kapitel="informieren"]{ background:var(--ton-informieren); --kapitelfarbe:var(--ton-informieren-satt)} .warenraster.klar .ware.ware-text[data-kapitel="kaufen"]{ background:var(--ton-kaufen); --kapitelfarbe:var(--ton-kaufen-satt)} .warenraster.klar .ware.ware-text[data-kapitel="medien"]{ background:var(--ton-medien); --kapitelfarbe:var(--ton-medien-satt)} .warenraster.klar .ware.ware-text[data-kapitel="haus"]{ background:var(--ton-haus); --kapitelfarbe:var(--ton-haus-satt)} .warenraster .ware.ware-text b{font-size:var(--kachel-titel); margin-bottom:.35em} .warenraster .ware.ware-text span{font-size:var(--kachel-text); line-height:1.5} /* Die Versalzeile des Vorbilds — falls eine Textkachel eine bekommt. */ .ware-text i{display:block; margin-top:var(--space-3); font-style:normal; font-size:.72rem; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--accent)} /* Eine Textkachel ohne eigenes Ziel hebt sich nicht an — sonst verspricht sie einen Klick, den es nicht gibt (dieselbe Regel wie bei den Haus-Kacheln). */ .warenraster.klar .ware.ware-text:hover{transform:none; border-color:var(--border)} /* ── Verpackungs-Kacheln mit Überblendung (Rösterei, Dieter 10.08.2026) ────────── Zwei PNGs übereinander; die Rückseite blendet sanft über die Vorderseite und wieder zurück. `multiply` nimmt den weißen Bildgrund weg, sodass der Beutel direkt auf dem Cremegrund steht. Kein Kasten, kein Weiß — nur die Verpackung. */ .paketraster{display:grid; grid-template-columns:repeat(var(--spalten),1fr); gap:clamp(10px,1.4vw,22px); margin-top:var(--space-5)} @media(max-width:820px){ .paketraster{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:480px){ .paketraster{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Die Kachel ist ein Knopf, der das Detail-Popup öffnet. */ .paket{display:flex; flex-direction:column; gap:.15em; align-items:flex-start; background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; transition:transform .12s ease} .paket:hover, .paket:focus-visible{transform:translateY(-3px)} .pk-bild{display:block; width:100%; aspect-ratio:302 / 455} .pk-bild img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply} .paket b{font-family:var(--font-head); font-weight:400; font-size:clamp(.9rem,1.05vw,1.05rem); line-height:1.2; margin-top:.3em; color:var(--text)} .paket em{font-style:normal; color:var(--accent); font-size:clamp(.75rem,.9vw,.9rem)} /* Detail-Popup einer Röstung (natives ). */ .sorte{border:0; border-radius:var(--r-lg, 18px); padding:0; max-width:min(860px,92vw); width:100%; background:var(--surface,#fff); color:var(--text); box-shadow:0 30px 90px rgba(26,26,26,.35)} .sorte::backdrop{background:rgba(26,26,26,.5)} .sorte-zu{position:absolute; top:10px; right:14px; z-index:2; width:38px; height:38px; border:0; border-radius:50%; background:rgba(26,26,26,.08); color:var(--text); font-size:1.4rem; line-height:1; cursor:pointer} .sorte-zu:hover{background:rgba(26,26,26,.16)} .sorte-bilder{display:flex; gap:8px; justify-content:center; align-items:center; padding:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem) 0; flex-wrap:wrap} .sorte-bilder img{height:clamp(150px,30vh,240px); width:auto; object-fit:contain} .sorte-text{padding:clamp(1rem,3vw,1.6rem) clamp(1.3rem,4vw,2.4rem) clamp(1.6rem,4vw,2.4rem)} .sorte-eyebrow{font-family:var(--font); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--accent); margin:0 0 .2em} .sorte-text h2{font-family:var(--font-head); font-weight:400; font-size:clamp(1.3rem,3vw,1.9rem); margin:0 0 .3em} .sorte-herkunft{color:var(--muted); font-size:.85rem; margin:0 0 .8em} .sorte-beschreibung{line-height:1.6; color:var(--text); margin:0} @media(max-width:560px){ .sorte-bilder img{height:120px} } @media (max-width:820px){ /* Am Handy höchstens zwei Spalten — fünf wären Briefmarken. */ .warenraster{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:430px){ .warenraster{grid-template-columns:1fr} } .i-tabelle{width:100%; border-collapse:collapse; margin-top:var(--space-5); font-size:clamp(.78rem,.95vw,.95rem)} .i-tabelle th, .i-tabelle td{padding:.45em .6em; text-align:left; border-bottom:1px solid var(--border)} .i-tabelle thead th{font-family:var(--font-head); font-weight:400; color:var(--accent); font-size:clamp(.72rem,.85vw,.85rem)} .i-tabelle tbody td:nth-child(2){color:var(--text); font-weight:600} .i-tabelle td:first-child{color:var(--muted)} .i-fussnote{margin-top:var(--space-4); font-size:.72rem; color:var(--muted)} /* Die Kachelreihe der Spur — dieselbe Gestalt wie die Folgenliste. */ .i-wahl{margin-top:clamp(.6rem,2dvh,1.4rem); display:grid; gap:clamp(6px,.8vw,12px); grid-template-columns:1fr} @media (min-width:640px){ .i-wahl{grid-template-columns:repeat(4,minmax(0,1fr))} } .i-wahl .folge{cursor:pointer; appearance:none; background:var(--bg); font-family:var(--font); display:flex; align-items:baseline; gap:.55em; text-align:left; padding:clamp(.3rem,.6vw,.5rem) clamp(.55rem,.9vw,.8rem); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color .2s, background .2s, transform .2s} .i-wahl .folge:hover{border-color:var(--accent); transform:translateY(-2px)} .i-wahl .folge.laeuft{border-color:var(--accent); background:var(--surface,#F8F6F3)} .i-wahl .nr{font-family:var(--font-head); font-style:italic; color:var(--accent); font-size:clamp(.8rem,.95vw,.95rem)} .i-wahl .ti{font-family:var(--font-head); font-size:clamp(.82rem,1vw,1rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} /* ── Einzelseiten: Ergänzungen ───────────────────────────────────────────────── */ .rede.still{margin:0} .rede.still .gruss{display:none} .k-form{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-5)} .k-form input{flex:1 1 240px; padding:.7em 1em; border:1px solid var(--border); border-radius:var(--r-md); font-family:var(--font); font-size:1rem; background:var(--bg)} .k-form input:focus{outline:none; border-color:var(--accent)} .folgenliste a.folge{text-decoration:none} /* Die Folgen des Barista-Kurses sitzen 40 px höher (Dieter 08.08.2026). */ /* ⚑ JEDER 16:9-Film sitzt 40 px über der Bildmitte — nicht nur die, an die jemand denkt (Dieter 09.08.2026: „muss ich dich bei jedem einzelnen 16:9-Video, das du benutzt, erneut bitten, es etwas höher zu setzen?"). Die Antwort ist nein: Die Anhebung gehört dem Filmblock selbst, nicht einer Zusatzklasse, die man vergessen kann (F-06 — eine Regel im Werkzeug wird gehalten, eine im Merksatz nicht). Grund: Die Figur daneben steht auf ihrer Grundlinie; ein exakt mittig gesetzter Film wirkt darunter tief. `hoeher` bleibt als Name bestehen, wirkt aber wie der Grundwert. */ .i-film, .i-film.hoeher{margin-top:-40px} /* Auf der Gudrun-Spot-Seite steht der Film etwas höher als in den Folgen (Dieter 08.08.2026). */ .i-film.hoeher-50{margin-top:-50px} /* ── Großes Bild ────────────────────────────────────────────────────────────── Wie bei YouTube das Kinoformat (Dieter 08.08.2026): Ein Druck, und der Film nimmt die ganze Satzspiegelbreite ein — er legt sich dabei über die Figur, das ist gewollt. Beide Zonen liegen dann in DERSELBEN Rasterzelle; der Film liegt oben. */ .i-film{position:relative} .film-breit{ position:absolute; right:10px; top:10px; z-index:3; width:36px; height:36px; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:#fff; background:rgba(26,26,26,.5); backdrop-filter:blur(3px); opacity:.55; transition:opacity .2s, background .2s; } /* ⚑ Der Knopf war bis 14.08.2026 unsichtbar, bis die Maus über dem Film stand — Dieter: *„hat auch nicht oben rechts im player das symbol, mit dem man das händisch auslösen könnte."* Ein Bedienelement, das man erst findet, wenn man es zufällig überfährt, gibt es für den Besucher nicht. Jetzt steht er dezent da und wird beim Überfahren kräftig. */ .i-film:hover .film-breit, .buchrahmen:hover .film-breit, .film-breit:focus-visible{opacity:1} .film-breit:hover{background:rgba(155,122,74,.9)} /* Abspiel-Knopf mittig über dem Standbild — solange er da ist, zeigt das Video nur seine creme Titelkarte ohne graue Steuerleiste (Dieter 10.08.2026). */ .film-los{ position:absolute; right:12px; bottom:12px; z-index:3; width:40px; height:40px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; opacity:.85; transition:transform .15s, opacity .15s; } .film-los:hover, .film-los:focus-visible{transform:scale(1.08); opacity:1} .film-los[hidden]{display:none} /* ── Die dunklen Medien-Bereiche (Radio, Fernsehen, Videothek) ─────────────────── Dieter 10.08.2026: „nehmen wir die Originale — den dunklen Bereich." Nativ nachgebaut in der Story, nicht mehr per iframe/blende. Dunkles Panel im hellen Medien-Raum. */ .medien-dunkel{background:#171310; color:#f4efe9; border-radius:16px; padding:clamp(1.4rem,4vw,2.8rem)} .medien-dunkel h2{font-family:var(--font-head); font-weight:400; color:#fff; font-size:clamp(1.6rem,4vw,2.6rem); margin:.1em 0 .35em} .medien-dunkel .lead{color:#c9bfb4; max-width:52ch; line-height:1.6; margin:0 0 1.4rem} .live-pill{display:inline-flex; align-items:center; gap:.5em; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:#f4efe9; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.3em .8em; margin-bottom:1rem} .live-pill .dot{width:.55em; height:.55em; border-radius:50%; background:#e5482f; box-shadow:0 0 0 0 rgba(229,72,47,.6); animation:livepuls 2s infinite} @keyframes livepuls{70%{box-shadow:0 0 0 .5em rgba(229,72,47,0)}100%{box-shadow:0 0 0 0 rgba(229,72,47,0)}} /* Dunkler Hero mit dem Kaffeebild (wie das Original radio./tv.omaneo.de, Dieter 10.08.2026). */ .medien-hero{position:relative; overflow:hidden; background:#0d0c0b url('https://omaneo.de/assets/kaffee-tv/poster.jpg') center/cover no-repeat} .medien-hero::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(13,12,11,.72),rgba(13,12,11,.9))} .medien-hero > *{position:relative; z-index:1} /* Radio-Kanäle wie im Original: bronzener Play-Knopf, „Jetzt läuft", echte MP3-Streams. */ .radiokanaele{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:1.6rem} @media(max-width:820px){ .radiokanaele{grid-template-columns:1fr} } .rk{display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:1rem 1.1rem} .rk-play{flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#fff; background:var(--accent); transition:transform .12s, filter .12s} .rk-play:hover{transform:scale(1.06); filter:brightness(1.08)} .rk-info{min-width:0} .rk-kanal{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#e9dcc9} .rk-lab{font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:.15em 0} .rk-now{font-family:var(--font-head); font-weight:400; color:#fff; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .rk.spielt .rk-play{box-shadow:0 0 0 4px rgba(155,122,74,.3)} /* Zwischen Klick und erstem Ton liegen bei einem Live-Strom mehrere Sekunden. Ohne Zeichen sieht die Kachel in dieser Zeit aus wie eine, die den Klick verschluckt hat (Dieter 15.08.2026: „braucht sehr lange, bevor sich etwas tut"). Der Knopf pulst, bis Ton kommt — ein Zeichen ohne Wort, damit keine Sprachfassung nachgezogen werden muss. */ .rk.laedt .rk-play{animation:rk-puls 1.1s ease-in-out infinite} @keyframes rk-puls{ 0%,100%{box-shadow:0 0 0 0 rgba(155,122,74,.55)} 50% {box-shadow:0 0 0 9px rgba(155,122,74,0)} } @media (prefers-reduced-motion:reduce){ .rk.laedt .rk-play{animation:none; box-shadow:0 0 0 4px rgba(155,122,74,.35)} } /* Icon-Wechsel über die Klasse, NICHT über die SVG-Eigenschaft `hidden` (die wirkt bei SVG nicht — Dieter 10.08.2026: „Player scheinen ohne Funktion", weil das Icon nie wechselte). */ .rk .ic-pause{display:none} .rk.spielt .ic-play{display:none} .rk.spielt .ic-pause{display:block} /* Fernsehen-Kanäle wie im Original: Knopf mit Symbol, Titel und Unterzeile. */ .tvkanaele{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:1.6rem; max-width:720px} @media(max-width:620px){ .tvkanaele{grid-template-columns:1fr} } .tvbtn{display:flex; align-items:center; gap:14px; text-decoration:none; background:var(--accent); color:#fff; border-radius:14px; padding:.95rem 1.2rem; transition:transform .12s, filter .12s} .tvbtn:hover{transform:translateY(-2px); filter:brightness(1.07)} .tvbtn svg{flex:0 0 auto} .tvbtn b{display:block; font-family:var(--font-head); font-weight:400; font-size:1.05rem} .tvbtn em{font-style:normal; font-size:.8rem; opacity:.85} .tvbtn-hell{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2)} /* Videothek-Kacheln (dunkel). */ .vgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px)} @media(max-width:900px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .vgrid{grid-template-columns:1fr} } .vk{display:flex; flex-direction:column; gap:.25em; text-decoration:none; color:#f4efe9; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:1rem 1.1rem 1.15rem; transition:border-color .2s, transform .12s} .vk:hover{border-color:var(--accent); transform:translateY(-2px)} .vk-badge{align-self:flex-start; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:#d8b892; background:rgba(155,122,74,.22); border-radius:6px; padding:.25em .6em; margin-bottom:.5em} .vk b{font-family:var(--font-head); font-weight:400; font-size:clamp(1rem,1.3vw,1.2rem); color:#fff} .vk span:last-child{color:#c1b7ac; font-size:.85rem; line-height:1.4} /* Eine fertige Folie (Bild) als Bühneninhalt — passt sich ganz in die Bühnenhöhe ein. */ .i-folie{display:grid; place-items:center; width:100%} .i-folie img{max-width:100%; max-height:70dvh; height:auto; width:auto; border-radius:14px; box-shadow:0 18px 60px rgba(26,26,26,.18)} /* Das Buch bekommt denselben Knopf wie der Film (Dieter 09.08.2026). Es steckt im Rahmen, der alles abschneidet — der Knopf muss also INNEN liegen und über dem eingebetteten Blatt stehen. */ .buchrahmen{position:relative} .buchrahmen .film-breit{z-index:4} @media (min-width:900px){ .szene.breitbild{grid-template-columns:1fr} .szene.breitbild > .zone-buehne{grid-area:1 / 1; z-index:2} /* Im großen Bild tritt die Figur ganz ab, statt hinter dem Film durchzuscheinen: Bei 25 % Deckkraft schaute ihre Hand am rechten Filmrand hervor und sah aus wie ein Bildfehler (Dieter 08.08.2026, mit Anschauung). Überdecken ja — durchschimmern nein. */ .szene.breitbild > .zone-figur{grid-area:1 / 1; z-index:1; justify-self:end; opacity:0; visibility:hidden; pointer-events:none} .szene.breitbild .i-film.hoeher, .szene.breitbild .i-film.hoeher-50{margin-top:0} /* Im großen Bild steht der Film mittig im Satzspiegel (Dieter 08.08.2026) — links bündig wirkte er neben der leeren Fläche verrutscht. */ .szene.breitbild .i-film{--film-maxh:min(72dvh, 900px); margin-inline:auto} /* Dasselbe für das Begleitbuch: im großen Bild darf es die volle Satzspiegelbreite nehmen und höher werden. Die Breite bleibt aus der erlaubten HÖHE gerechnet, damit Rahmen und Buch dasselbe Verhältnis behalten (sonst kommen die dunklen Streifen zurück, s. o.). Der Maßstab wird nach dem Umschalten neu bestimmt (buehne.js). */ .szene.breitbild .buchrahmen{--buch-maxh:min(78dvh, 1000px); margin-inline:auto} } /* ── Die GUDRUN-Strecke: Bilder statt Aufzählungen ──────────────────────────────── Warum es diesen Abschnitt gibt (Dieter, 09.08.2026): *„viele aspekte hast du bei der gudrun als lehrerin nicht verarbeitet oder gar grafisch aufbereitet."* Die Quellseite `/gudrun-lehrerin.php` erzählt acht Gedanken; jeder bekommt hier eine eigene Form — Gegenüberstellung, Lehrmittelkarten, Treppe, Kurve, Kreislauf, Brücken, Klartext. Farben, Abstände und Radien kommen aus den Tokens (R-70/R-75); hier steht nur die Form. Gemeinsame Randbedingung: Eine Bühne ist EIN Bildschirm — alle Höhen rechnen in `dvh`, Textmengen sind gedeckelt statt gescrollt. */ /* Schlusssatz eines Abschnitts — trägt Gewicht, ohne Überschrift zu sein. */ .i-schluss{margin:var(--space-5) 0 0; font-family:var(--font-head); font-size:clamp(.95rem,1.5vw,1.25rem); line-height:1.4; color:var(--text)} .i-schluss b{font-weight:400; color:var(--accent)} /* ── Gegenüberstellung: billige Maschine ↔ Lehrerin ──────────────────────────── */ .gegen{display:grid; gap:clamp(8px,1.2vw,18px); margin-top:var(--space-5); grid-template-columns:1fr auto 1fr; align-items:stretch} .gegen > div{border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(10px,1.4vw,18px)} /* Gleiche Spezifität wie `.gegen > div`, aber später — sonst erbt der Strich dessen Innenabstand und wird zum grauen Balken (gemessen 09.08., BAUPLAN §9.3). */ .gegen > .gegen-strich{border:0; padding:0; width:1px; background:var(--border); justify-self:center; align-self:stretch} .gegen b{display:block; font-family:var(--font-head); font-weight:400; font-size:clamp(.95rem,1.3vw,1.15rem); margin-bottom:.3em} .gegen span{color:var(--muted); font-size:clamp(.8rem,.95vw,.95rem); line-height:1.45} .gegen-b{border-color:var(--accent); background:var(--accent-dim)} .gegen-b b{color:var(--accent)} @media (max-width:640px){ .gegen{grid-template-columns:1fr} .gegen-strich{width:auto; height:1px} } /* ── Die drei Lehrmittel ─────────────────────────────────────────────────────── */ .mittel{display:grid; gap:clamp(8px,1.1vw,16px); margin-top:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} .mittel-k{position:relative; border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(12px,1.5vw,20px)} /* Die drei Kacheln STEIGEN (Dieter 12.08.2026): *„die ersten beiden kacheln unterscheiden sich in der farbe — das ist gut … weiter unten sind 3 kacheln, die sehen alle gleich aus — weniger gut."* Sie sind kein Nebeneinander, sondern eine Folge: zeigen → stillhalten → wiederholbar machen. Das darf man sehen. Dieselbe Sprache wie beim Gegensatzpaar darüber (dort trägt die zweite Kachel `--accent-dim`): eine Marken-Bronze, drei Sättigungen, dazu die Ziffer und der Rand mitsteigend. Keine neue Farbe — nur mehr davon. ⚠ Die Sättigungen sind GEMESSEN, nicht geschätzt: Bei 4/9/15 % fiel der kleine Beschreibungstext (--muted, unter 0,9 rem) auf der dritten Kachel auf 4,4:1 — knapp unter die Norm von 4,5:1. Mit 3/7/11 % bleibt die Steigerung sichtbar und jede Kachel über der Grenze. Wer hier nachschärft, misst nach. */ .mittel-k:nth-of-type(1){background:color-mix(in srgb, var(--accent) 3%, transparent); border-color:color-mix(in srgb, var(--accent) 22%, var(--border))} .mittel-k:nth-of-type(2){background:color-mix(in srgb, var(--accent) 7%, transparent); border-color:color-mix(in srgb, var(--accent) 38%, var(--border))} .mittel-k:nth-of-type(3){background:color-mix(in srgb, var(--accent) 11%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, var(--border))} .mittel-k:nth-of-type(1) .mittel-nr{opacity:.22} .mittel-k:nth-of-type(2) .mittel-nr{opacity:.34} .mittel-k:nth-of-type(3) .mittel-nr{opacity:.46} .mittel-nr{position:absolute; top:clamp(6px,.9vw,12px); right:clamp(10px,1.2vw,16px); font-family:var(--font-head); font-style:italic; font-size:clamp(1.4rem,2.4vw,2.2rem); line-height:1; color:var(--accent); opacity:.28} .mittel-bild{width:clamp(30px,3.4vw,42px); height:auto; display:block; margin-bottom:var(--space-3); color:var(--accent); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .mittel-bild .voll{fill:currentColor; stroke:none} .mittel-bild .strich{stroke-dasharray:3 4; opacity:.45} .mittel-k b{display:block; font-family:var(--font-head); font-weight:400; font-size:clamp(.92rem,1.2vw,1.1rem); line-height:1.25; margin-bottom:.35em} .mittel-k > span{display:block; color:var(--muted); font-size:clamp(.78rem,.92vw,.9rem); line-height:1.45} .mittel-k i{display:block; margin-top:var(--space-3); font-style:normal; font-size:clamp(.72rem,.85vw,.84rem); color:var(--accent)} /* ── Der Lehrplan als Treppe ────────────────────────────────────────────────────── Sechs Stufen, die wirklich steigen: Jede Stufe ist so hoch wie ihre Nummer. Die Treppe ist zugleich das Bedienelement — ein Klick öffnet die Lektion darunter. */ .treppe{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(3px,.4vw,6px); align-items:end; margin-top:var(--space-5); height:clamp(96px,17dvh,168px)} .stufe{appearance:none; cursor:pointer; font-family:var(--font); text-align:left; border:1px solid var(--border); border-bottom:0; border-radius:var(--r-md) var(--r-md) 0 0; background:var(--surface); padding:clamp(5px,.7vw,10px) clamp(5px,.7vw,10px) clamp(4px,.6vw,8px); display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-width:0; overflow:hidden; /* Grundhöhe so, dass auch zweizeilige Titel auf der ersten Stufe Platz haben — gemessen am ausgelieferten Auftritt, nicht geschätzt (09.08.2026). */ height:calc(46% + (var(--hoch) - 1) * 10.8%); transition:background .18s ease, border-color .18s ease} .stufe:hover{border-color:var(--accent); background:var(--surface-2)} .stufe.gewaehlt{background:var(--accent-dim); border-color:var(--accent)} .st-nr{font-family:var(--font-head); font-style:italic; line-height:1; font-size:clamp(.9rem,1.4vw,1.4rem); color:var(--accent)} .st-ti{font-family:var(--font-head); line-height:1.12; font-size:clamp(.62rem,.76vw,.82rem); color:var(--text); hyphens:auto; overflow-wrap:anywhere} .stufenblaetter{border-top:2px solid var(--accent)} .stufenblatt{padding:clamp(10px,1.4vw,18px) 0 0} .st-text{margin:0; color:var(--muted); font-size:clamp(.84rem,1.05vw,1rem); line-height:1.5; max-width:62ch} .st-ziel{margin:var(--space-3) 0 0; font-family:var(--font-head); font-size:clamp(.84rem,1.05vw,1rem); color:var(--accent)} .st-ziel span{font-family:var(--font); font-size:.68rem; text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--muted); margin-right:.6em} @media (max-width:640px){ .treppe{height:clamp(80px,13dvh,120px)} .st-ti{display:none} } /* ── Die Graduierungskurve ──────────────────────────────────────────────────────── */ .kurve{margin:var(--space-5) 0 0; padding:0} .kurve svg{width:100%; height:auto; max-height:clamp(120px,22dvh,200px); display:block; fill:none; stroke-linecap:round} .kurve .achse{stroke:var(--border); stroke-width:1.5} .kurve .grenze{stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 5; opacity:.7} .kurve .koennen{stroke:var(--accent); stroke-width:3} .kurve .punkt{fill:var(--bg); stroke:var(--accent); stroke-width:3} .kurve text{stroke:none; font-family:var(--font)} .kurve .beschr{fill:var(--muted); font-size:11px} /* NICHT `.marke` nennen: der Name gehört seit dem 07.08. der einfliegenden Wortmarke und trägt dort `opacity:0` — die Beschriftung blieb dadurch unsichtbar, obwohl sie im Dokument stand (gemessen 09.08., Deckkraft 0). */ .kurve .schnitt{fill:var(--accent); font-family:var(--font-head); font-size:13px} .kurve .achstext{fill:var(--subtle); font-size:10px; letter-spacing:var(--ls-tight)} /* ── Der Kreislauf der Weitergabe ──────────────────────────────────────────────── */ .runde{display:grid; gap:clamp(4px,.6vw,10px); margin-top:var(--space-5); grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch} /* Die drei Stationen steigen wie die drei Lehrmittel — sie sind eine Folge (erste Küche → Graduierung → zweite Küche), kein Nebeneinander. Gleiche Vorschrift, gleiche Farbe. */ /* ⚠ `:nth-child`, nicht `:nth-of-type`: Zwischen den Stationen stehen die Pfeile (`.runde-pf`) als gleichrangige Geschwister — die Reihe ist also Station, Pfeil, Station, Pfeil, Station. `nth-of-type` zählt den ELEMENTTYP (div) und traf damit die dritte Station gar nicht; gemessen blieb sie ungefärbt. */ .runde-st:nth-child(1){background:color-mix(in srgb, var(--accent) 3%, transparent); border-color:color-mix(in srgb, var(--accent) 22%, var(--border))} .runde-st:nth-child(3){background:color-mix(in srgb, var(--accent) 7%, transparent); border-color:color-mix(in srgb, var(--accent) 38%, var(--border))} .runde-st:nth-child(5){background:color-mix(in srgb, var(--accent) 11%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, var(--border))} .runde-st{border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(10px,1.3vw,18px)} .runde-nr{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-circle); background:var(--accent); color:#fff; font-family:var(--font-head); font-size:.85rem; line-height:1; margin-bottom:var(--space-3)} .runde-st b{display:block; font-family:var(--font-head); font-weight:400; font-size:clamp(.9rem,1.2vw,1.1rem); margin-bottom:.3em} .runde-st span:not(.runde-nr){display:block; color:var(--muted); font-size:clamp(.78rem,.92vw,.9rem); line-height:1.45} .runde-pf{display:grid; place-items:center; color:var(--accent)} .runde-pf .ar{font-size:clamp(1.2rem,2vw,1.8rem); line-height:1} .runde-zurueck{grid-column:1 / -1; margin-top:2px; display:grid; justify-items:center} .runde-zurueck svg{width:100%; height:clamp(16px,2.6dvh,28px); display:block; fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.55; stroke-linecap:round; stroke-linejoin:round} .runde-zurueck > span{margin-top:2px; font-size:.7rem; color:var(--accent); letter-spacing:var(--ls-tight)} @media (max-width:760px){ .runde{grid-template-columns:1fr} .runde-pf{transform:rotate(90deg)} .runde-zurueck svg{display:none} } /* ── Die drei Brücken ──────────────────────────────────────────────────────────── */ .bruecken{display:grid; gap:clamp(8px,1.1vw,16px); margin-top:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} .bruecke-k{border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(12px,1.5vw,20px)} .bruecke-bild{width:100%; max-width:126px; height:auto; display:block; margin-bottom:var(--space-3); color:var(--accent); fill:none; stroke:currentColor; stroke-linecap:round} .bruecke-bild .ufer{stroke:var(--subtle); stroke-width:2.5; opacity:.6} .bruecke-bild .bogen{stroke-width:2.4} .bruecke-bild .pfosten{stroke-width:1.6; opacity:.5} .bruecke-k .stand{display:inline-block; margin-bottom:var(--space-3); padding:.22em .7em; border-radius:var(--r-pill); background:var(--accent-dim); color:var(--accent); font-size:.66rem; text-transform:uppercase; letter-spacing:var(--ls-wide)} .bruecke-k b{display:block; font-family:var(--font-head); font-weight:400; font-size:clamp(.92rem,1.2vw,1.1rem); margin-bottom:.35em} .bruecke-k .txt{display:block; color:var(--muted); font-size:clamp(.78rem,.92vw,.9rem); line-height:1.45} .bruecke-k i{display:block; margin-top:var(--space-3); font-style:italic; font-family:var(--font-head); font-size:clamp(.78rem,.9vw,.9rem); color:var(--accent)} /* ── Klartext: was sie NICHT ist ───────────────────────────────────────────────── */ .nichtliste{list-style:none; margin:var(--space-5) 0 0; padding:0; display:grid; gap:clamp(6px,.9vw,12px); grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))} /* Die vier Absagen bekommen vier Abstufungen (Dieter 12.08.2026: „kacheln bitte unterschiedlich einfärben"). Dieselbe Sprache wie auf der Lehrerin-Seite: eine einzige Marken-Bronze, nur unterschiedlich viel davon — hier von fast weiß bis zur vierten Stufe. Gemessen, damit der kleine Text (--muted, unter 0,95 rem) über 4,5:1 bleibt. */ .nichtliste li:nth-of-type(1){background:color-mix(in srgb, var(--accent) 3%, var(--surface))} .nichtliste li:nth-of-type(2){background:color-mix(in srgb, var(--accent) 6%, var(--surface))} .nichtliste li:nth-of-type(3){background:color-mix(in srgb, var(--accent) 9%, var(--surface))} .nichtliste li:nth-of-type(4){background:color-mix(in srgb, var(--accent) 12%, var(--surface))} .nichtliste li{position:relative; background:var(--surface); border-radius:var(--r-md); padding:clamp(10px,1.3vw,16px) clamp(12px,1.5vw,18px) clamp(10px,1.3vw,16px) clamp(38px,3.4vw,48px); color:var(--muted); font-size:clamp(.8rem,.95vw,.94rem); line-height:1.45} /* Das Nicht-Zeichen: ein durchgestrichener Kreis, gezeichnet statt getippt. */ .nichtliste li::before{content:""; position:absolute; left:clamp(12px,1.4vw,18px); top:clamp(13px,1.6vw,20px); width:16px; height:16px; border-radius:var(--r-circle); border:1.5px solid var(--accent); opacity:.75} .nichtliste li::after{content:""; position:absolute; left:clamp(15px,1.75vw,21px); top:clamp(20px,2.4vw,27px); width:11px; height:1.5px; background:var(--accent); transform:rotate(-45deg); transform-origin:left center; opacity:.75} .nichtliste b{display:block; font-family:var(--font-head); font-weight:400; color:var(--text); font-size:clamp(.9rem,1.15vw,1.05rem); margin-bottom:.2em} /* ── Der Fußraum bleibt unter dem Pfeil frei ──────────────────────────────────── Der Pfeil nach unten hängt am Sichtfenster; die Kachelreihe wächst mit dem Inhalt. Auf den Bühnen der GUDRUN-Strecke stieß beides am 09.08.2026 zusammen — gemessen: Kachelreihe endete bei 843 px, der Pfeil begann bei 824. Auf den Kursseiten fiel es nie auf, weil dort Luft war (737 gegen 820). Deshalb hält jede Bühne MIT Kachelreihe unten so viel frei, wie der Pfeil hoch ist — Ursache statt Einzelfall. */ /* Der Freiraum wird nicht geschätzt, sondern aus dem Pfeil gerechnet: sein Abstand zum Fensterboden + seine Höhe (48 px) + ein Fingerbreit Luft. Mit geschätzten 8 dvh blieben am 09.08. vier Pixel Überlappung stehen — gemessen, nicht vermutet. */ .buehne.aktiv:has(.folgenliste){ padding-bottom:calc(clamp(14px,3dvh,28px) + 48px + 14px)} /* ── Handy: was bei 390 px sonst nicht mehr hineinpasst ────────────────────────── Die GUDRUN-Strecke hat seit dem 09.08. zehn Kacheln statt vier. Einspaltig sind das zehn Zeilen — mehr, als eine Bühne trägt. Zwei Spalten ab 340 px, und die Figur tritt einen Schritt zurück, damit Text und Bild nebeneinander bestehen können. */ @media (max-width:519px){ .folgenliste{grid-template-columns:repeat(2,minmax(0,1fr))} .folgenliste .folge{padding:.42em .5em} .folgenliste .ti{font-size:clamp(.72rem,3vw,.86rem)} } @media (max-width:899px){ :root{--figur-hoehe:clamp(120px, 24dvh, 260px)} /* Der gesprochene Satz unter der Figur darf am Handy nicht die halbe Bühne fressen. */ .blase-klein{font-size:clamp(.76rem,3.2vw,.9rem)} } /* ── Handy: die Bühne darf atmen ───────────────────────────────────────────────── Der BAUPLAN nimmt die Handy-Fassung ausdrücklich aus („bis 820 px eigene Regeln"). Umgesetzt war das nicht: Auch bei 390 px galt die starre Bildschirmhöhe mit `overflow:hidden`. Was nicht hineinpasste, verschwand nicht etwa — es legte sich ÜBEREINANDER, weil gestauchte Kästen ihre Kinder nicht mitstauchen. Gemessen am 09.08.2026: Auf drei Bühnen ragte der Text bis zu 125 px über die Bühne hinaus, die Figur lag über der Schrift. Sichtbar wurde es nur am Bildschirmfoto (sb F-33), nicht an Statuscode, Dokumenthöhe oder Konsole. Am schmalen Schirm gilt deshalb: natürliche Höhe, senkrecht scrollbar. Am großen Schirm bleibt alles wie gehabt — eine Bühne, ein Bildschirm, kein Scrollen. */ @media (max-width:820px){ .buehne.aktiv{height:auto; min-height:100dvh; max-height:none; overflow:visible; justify-content:flex-start; padding-block:clamp(1rem,4dvh,2rem)} body.buehnenmodus{overflow:auto} /* Der Abstand, der am großen Schirm die gemeinsame Grundlinie setzt, wird hier zurückgenommen: Am schmalen Schirm war die Figur schon immer einheitlich (gemessen 23.08.2026: überall 145 px), weil hier ohnehin oben ausgerichtet wird. Er würde also nichts geradeziehen, sondern nur 65 px mehr Scrollweg kosten. */ .buehne.aktiv > .feld:first-of-type{margin-top:0} /* Die Pfeile bleiben am Sichtfenster — sie dürfen den Fußraum nicht überdecken, wenn er mitscrollt. */ .buehne.aktiv:has(.folgenliste){padding-bottom:calc(clamp(14px,3dvh,28px) + 48px + 20px)} } /* ── Eingebettete Fremdseiten (Impressum, AGB, Datenschutz, Kontakt) ─────────── Dieter 09.08.2026: *„so kann diese Webseite sogar alternativ eigenständig und vollständig dahersommen."* Die Rechtstexte werden deshalb NICHT kopiert, sondern von omaneo.de eingebettet — eine Kopie altert, und bei einer Pflichtangabe ist ein veralteter Stand eine falsche Erklärung (R-47/R-53). Der Rahmen darf als einziger Baustein scrollen: Ein Impressum passt auf keinen Bildschirm, und die Bühne selbst bleibt unverändert einen Bildschirm hoch. */ .rechtsrahmen{ position:relative; width:100%; height:min(62dvh, 620px); border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 14px 44px rgba(26,26,26,.10); } .rechtsrahmen iframe{width:100%; height:100%; border:0; display:block} /* ── Lange Inhalte: EIN RAHMEN zwischen Kopf und Fuß ────────────────────────── Dieter 09.08.2026: *„die Idee mit dem Teilbereich, der scrollbar wird, gehst du falsch an — der Einfachheit halber mit einem iframe zwischen Kopf und Fuß."* Die selbstgebaute Scrollspalte (Maskenkanten, eigene Rollleiste, Höhenrechnerei) ist damit ersetzt: Das eingebettete Dokument scrollt von selbst, weil der Browser das kann. Dieselbe Bauart, die das Begleitbuch und die Rechtstexte längst benutzen. */ .inhaltsrahmen{ /* Ohne sichtbaren Rahmen (Dieter 09.08.2026: „der Rahmen ums iFrame soll weg") — das Blatt soll wie ein Teil der Bühne wirken, nicht wie ein Fenster darin. */ width:100%; height:100%; border:0; border-radius:0; background:var(--kapitelton,#fff); box-shadow:none; /* Am Handy steht die Figur ÜBER dem Rahmen, nicht daneben — dann müssen Figur, Rahmen und Kachelreihe zusammen auf einen Bildschirm passen. Mit 66dvh taten sie das nicht: gemessen bei 390×844 ragte die Seite 253 px über den Rand hinaus, und die Bühne war nicht mehr genau einen Bildschirm hoch. */ overflow:hidden; } /* Ein NATIVES Blatt (kein iframe): derselbe Kasten, aber er scrollt selbst — der Inhalt liegt direkt im Dokument (Dieter 10.08.2026, Umstellung der Platzhalter). ⚠ Es darf KEINE Flex-Spalte sein (die `.feld.fuellt .inhaltsrahmen`-Regel macht iframes zur Flex-Spalte, in der die mehreren `.feld` auf 0 schrumpfen und überlappen — gemessen 10.08.). Deshalb hier ausdrücklich ein normaler Block, der seinen Überlauf selbst scrollt. */ .feld.fuellt .inhaltsrahmen.nativblatt{display:block; overflow:auto; -webkit-overflow-scrolling:touch} /* Nativ eingezogene Fremd-Karten bringen ihre eigene CSS nicht mit (der Lader entkernt sie) — ohne Zügel wachsen Logo-SVGs und Icons riesig. Diese Leitplanken halten sie klein und geben dem Text Grundlesbarkeit (Dieter 10.08.2026). */ .flexinhalt{color:var(--text); line-height:1.6} .flexinhalt svg{width:1.3em; height:1.3em; vertical-align:middle} .flexinhalt img{max-width:52px; height:auto; vertical-align:middle} .flexinhalt h1,.flexinhalt h2,.flexinhalt h3{font-family:var(--font-head); font-weight:400; line-height:1.2} .flexinhalt a{color:var(--accent)} /* Partner-/Kanal-Einträge (view.php `a.bkitem` mit Logo + Name): Logo und Link IMMER in EINE Zeile (Dieter 10.08.2026). Der Story-Reset macht `img` sonst zu `display:block` → Logo über dem Text. Hier: Zeile aus Logo + Text, kein Umbruch. */ .flexinhalt .bkitem{display:inline-flex; align-items:center; gap:.45em; white-space:nowrap; vertical-align:top} .flexinhalt .bkitem img{display:inline-block; margin:0; flex:0 0 auto; width:22px; height:22px} .flexinhalt .platrow{display:flex; flex-wrap:wrap; gap:.4em 1.4em; margin:.2em 0 .8em} /* ⚑ 27.08.2026 (Dieter, mit Bild): „was macht der weiße Streifen da? — der ist auf vielen Bühnenseiten dieser Art bei jedem Reload erst einmal zu sehen." Ursache: `background:transparent` am iframe hilft NICHT gegen den Ladezustand. Solange das eingebettete Dokument nicht da ist, malt der Browser die Fläche in seiner Vorgabefarbe — weiß. Durchsichtig ist das iframe-ELEMENT, nicht sein noch leerer Inhalt. Deshalb traegt der Rahmen jetzt den KAPITELTON. Vor dem Laden, in jeder Lücke und an jeder Kante steht damit der Ton der Bühne statt eines weißen Blitzes. */ .inhaltsrahmen iframe{width:100%; height:100%; border:0; display:block; background:var(--kapitelton,#fff)} /* Das eingebettete Blatt ist KEINE Bühne: kein voller Bildschirm, kein Zentrieren — nur Text mit Luft ringsum. */ /* Das eingebettete Blatt trägt seine Szene selbst — samt Figur (Dieter 09.08.2026). Es ist KEINE Bühne: kein voller Bildschirm, kein Zentrieren, nur Inhalt mit Luft. */ .inhaltsblatt{background:transparent; margin:0; padding:clamp(1.1rem,2.6vw,2.2rem) 0 clamp(1.6rem,3vw,2.6rem)} /* ⚑ 04.09.2026 (Dieter, kaufen-shop): *„Überschrift und subtext bitte so weit nach oben verschieben, wie möglich."* Gemessen lagen zwischen Menüende (54 px) und Überschrift (195 px) drei Posten: die Kopfluft der Bühne, die Blattpolsterung oben (35,2 px) und der Vorabstand der h2 (33,6 px). Die beiden letzten nimmt diese Klasse zurück — OPT-IN, damit die anderen 90 Seiten unberührt bleiben (eine Musterverschärfung wird sonst am ganzen Bestand gemessen). Die Kopfluft bleibt: sie hält das feste Menü vom Inhalt frei. */ .inhaltsblatt.dicht-oben{padding-top:0} .inhaltsblatt.dicht-oben .i-text > h2:first-child, .inhaltsblatt.dicht-oben .feld:first-child .i-text h2:first-of-type{margin-top:0} .inhaltsblatt .feld + .feld{ margin-top:clamp(1.8rem,4vw,3rem); padding-top:clamp(1.5rem,3vw,2.4rem); border-top:1px solid var(--border)} /* Im Blatt darf die Szene ihre natürliche Höhe nehmen — sie wird nicht gestaucht. Die Figur steht SENKRECHT ZENTRIERT neben ihrem Inhalt (Dieter 10.08.2026: „Avatar steht zu hoch — sollte senkrecht zentriert stehen"). */ .inhaltsblatt .szene{align-items:center} /* ⚑ LANGE BLÄTTER (Dieter 12.08.2026, Starterset): „der avatar soll mittig neben den ersten beiden produktreihen stehen — er steht viel zu tief". Bei einem Blatt mit vielen Reihen führt die senkrechte Mitte des GESAMTEN Blattes die Figur weit nach unten; sie gehört neben den Anfang. Deshalb steht sie oben und bleibt beim Rollen stehen (sticky), statt aus dem Bild zu wandern. */ .inhaltsblatt.langesblatt .szene{align-items:start} .inhaltsblatt.langesblatt .zone-figur{position:sticky; top:clamp(1rem,4vh,3rem); align-self:start} /* ⚑ GLEICHHEITSPRINZIP (Dieter 09.08.2026): *„nicht aber Größe und Position des Avatars — bitte immer das Gleichheitsprinzip beachten. Und das Neue gleicht sich dem Bestehenden an, nicht umgekehrt."* Gemessen war die Figur im eingebetteten Blatt **273 px** hoch statt **414 px**: `46dvh` bezieht sich im Rahmen auf die RAHMENhöhe (594), nicht auf das Fenster (900). Die Höhe wird deshalb von der Bühne HEREINGEREICHT (buehne.js) — gemessen, nicht geraten. Der Wert hier ist nur der Rückfall, falls kein Skript läuft. */ /* Das Blatt füllt seinen Rahmen: Der Satzspiegel steht schon außen: sonst wird er zweimal eingerückt und die Figur sitzt 7 px daneben (gemessen). */ .inhaltsblatt .feld{width:100%; max-width:none; margin-inline:0} .inhaltsblatt .i-text + .i-text{ margin-top:clamp(1.8rem,4vw,3rem); padding-top:clamp(1.5rem,3vw,2.4rem); border-top:1px solid var(--border); } /* ── „heute im fokus" auf der Technik-Bühne ──────────────────────────────────── Dieselbe Bauart wie auf der Startseite von omaneo.de: Ankündigung mit Artikelnummer, Titelzeile, großes Standbild mit Abspielknopf (der Film lädt erst auf Klick — er wiegt viel), darunter die Verweise und die Suche über alle 397 Folgen. Ohne Avatar, über die ganze Breite (Dieter 09.08.2026). */ .szene.ohne-figur{grid-template-columns:1fr !important} .fokus{display:block} .fokus .uber{display:flex; align-items:center; gap:.7em} .fokus-nr{font-family:var(--font); letter-spacing:.12em; color:var(--muted); font-weight:600} .fokus h2{font-size:var(--titelgroesse); margin:.15em 0 clamp(.8rem,2dvh,1.3rem)} .fokus-buehne{ /* Die Höhe aus dem BILDSCHIRM rechnen, nicht die Breite füllen: Sonst schiebt der Film die Titelzeile über den oberen Rand — gemessen am 09.08.2026 bei 1440×900, da war „omaneo.GUDRUN in schwarz" halb abgeschnitten. Titel, Film und Fußzeile müssen zusammen auf eine Bühne passen. */ --fokus-maxh:min(52dvh, 560px); position:relative; width:min(100%, calc(var(--fokus-maxh) * 16 / 9)); margin-inline:auto; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#000; cursor:pointer; box-shadow:0 18px 60px rgba(26,26,26,.18); } .fokus-buehne img.fokus-bild{width:100%; height:100%; object-fit:cover; display:block} .fokus-buehne video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; z-index:5; display:block} .fokus-schild{ position:absolute; left:14px; top:14px; z-index:3; font-size:.7rem; letter-spacing:var(--ls-wider); text-transform:uppercase; color:#fff; background:rgba(26,26,26,.55); backdrop-filter:blur(3px); padding:.35em .8em; border-radius:999px; } .fokus-los{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; border:0; background:transparent; cursor:pointer; color:#fff; transition:transform .2s ease, opacity .2s ease; } .fokus-buehne:hover .fokus-los{transform:scale(1.06)} .fokus-fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(.7rem,1.6vw,1.5rem); margin-top:clamp(.7rem,1.8dvh,1.1rem); font-size:.92rem; } .fokus-fuss a, .fokus-andere{ color:var(--accent); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; } .fokus-fuss a:hover, .fokus-andere:hover{text-decoration:underline} .fokus-suche{position:relative; margin-left:auto; min-width:min(280px,100%)} .fokus-suche input{ width:100%; font:inherit; padding:.5em .9em; color:var(--text); border:1px solid var(--border); border-radius:999px; background:var(--bg); } .fokus-suche input:focus{outline:none; border-color:var(--accent)} .fokus-treffer{ position:absolute; left:0; right:0; bottom:calc(100% + 8px); z-index:20; margin:0; padding:.3rem; list-style:none; max-height:46dvh; overflow:auto; background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 50px rgba(26,26,26,.16); } .fokus-treffer li{padding:0} .fokus-treffer button{ display:block; width:100%; text-align:left; font:inherit; cursor:pointer; background:none; border:0; border-radius:8px; padding:.5em .7em; color:var(--text); } .fokus-treffer button:hover, .fokus-treffer button:focus-visible{ background:var(--surface,#F8F6F3); outline:none} .fokus-treffer .tnr{color:var(--muted); font-size:.82em; letter-spacing:.1em; margin-right:.6em} /* ══ HANDY: die Höhe ist das knappe Gut ═══════════════════════════════════════ Gemessen am 09.08.2026 mit `tools/masse_messen.mjs` bei 390 × 844 — vier Bühnen ragten über den Rand (bis 178 px), und die Kachelreihen brauchten bis zu SECHS Zeilen statt zwei. Erst gemessen, dann gerechnet, dann geändert; die Werte unten stammen aus dem Budget, nicht aus dem Gefühl. */ @media (max-width:820px){ /* 1 · Die Kachelreihe wird ein STREIFEN: eine Zeile, seitlich zu schieben. Elf Kacheln untereinander sind auf einem Telefon keine Leiste, sondern eine zweite Seite. */ .folgenliste{ grid-template-columns:none !important; display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; } .folgenliste::-webkit-scrollbar{display:none} .folgenliste .folge{flex:0 0 auto; scroll-snap-align:start} /* 2 · Die Wahlkacheln tragen auf dem Telefon nur das Nötige: Titel und Satz. Die Fußzeile und der Pfeilkreis kosteten je Kachel rund 55 px — bei drei Kacheln genau der Überstand, den die Messung zeigte. */ .weg-knopf i, .weg-knopf .pfeil{display:none} .weg-knopf{padding:clamp(.7rem,2.4vw,1rem)} /* 3 · Eingebettete Blätter und Rechtstexte bekommen ihre Höhe aus dem, was nach Figur und Leiste übrig bleibt. */ .rechtsrahmen{height:min(42dvh, 380px)} /* 4 · Das Benachrichtigungsfeld auf der Verfügbarkeitsseite stand zweizeilig. */ .k-form{flex-wrap:wrap; gap:.5rem} } /* ── Der Rahmen nimmt die übrige HÖHE — ohne geschätzte Prozentzahl ──────────── Dieter 09.08.2026: *„die iframes sind in der Breite auf dem Handy richtig, aber sie nutzen die Höhe nicht aus — vielleicht kannst du bei den iframes mit %-Angaben arbeiten?"* Noch besser als Prozent: gar keine Zahl. Die Bühne ist eine Spalte aus Rahmen und Kachelleiste; der Rahmen bekommt, was die Leiste übrig lässt. Damit stimmt es auf jedem Schirm von selbst — die vorherigen 66dvh/34dvh waren geschätzt und ließen am Telefon Platz liegen. */ /* Die Kette muss durchgehend SPALTE sein, sonst bleibt der Rahmen auf der Eigenhöhe eines iframes stehen — gemessen: 150 px auf jedem Schirm (09.08.2026). */ .buehne.aktiv > .feld.fuellt{flex:1 1 auto; min-height:0; display:flex; flex-direction:column} .feld.fuellt > .zone-buehne{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; width:100%} /* ⚠ Ein iframe mit `height:100%` in einem Kasten OHNE feste Höhe fällt auf seine Eigenhöhe von 150 px zurück — sein Innenfenster blieb dadurch 150 hoch, obwohl der Kasten 646 maß (gemessen 09.08.2026 bei 390 × 844). Deshalb ist der Rahmen selbst eine Spalte und das iframe ihr wachsendes Glied: dann folgt das Innenfenster der tatsächlichen Höhe. */ .feld.fuellt .inhaltsrahmen{flex:1 1 auto; min-height:0; height:auto; width:100%; display:flex; flex-direction:column} .feld.fuellt .inhaltsrahmen iframe{flex:1 1 auto; min-height:0; height:auto} /* ── Der Kopf bleibt frei ────────────────────────────────────────────────────── Dieter 09.08.2026: *„bei den iframes Lehrerin und Klartext fängt der Frame ja ganz oben am Seitenbeginn an. Er soll die Zeile mit den Buttons im Kopf unberührt stehen lassen — das sieht nicht gut aus, wenn dort der Text durchscrollt."* Und kurz darauf: *„der iframe-Fehler hat sich jetzt bereits zu Radio, Fernsehen etc. vererbt."* Der Freiraum wird GERECHNET, nicht geschätzt — genauso wie der Fußraum unter dem Pfeil (BAUPLAN §4a): Abstand des Pfeils vom Fensterrand + seine Höhe (48 px) + Luft. */ .feld.fuellt{--kopfluft:calc(clamp(14px,3dvh,28px) + 48px + 14px)} .buehne.aktiv > .feld.fuellt{padding-top:var(--kopfluft)} /* Am Handy stapelt die Bühne senkrecht und darf scrollen; dort genügt der halbe Freiraum, sonst schiebt er den Inhalt unnötig nach unten. */ @media (max-width:820px){ .buehne.aktiv > .feld.fuellt{padding-top:calc(clamp(14px,3dvh,28px) + 48px)} } /* Ein Rahmen, der ERST NACH der Rede aufgeht (die Genussreise), steckt nicht in einer `fuellt`-Bühne, sondern in der Spalte neben der Figur. Ohne durchgehende Spalte fällt er wieder auf die 150 px Eigenhöhe zurück — genau das war beim ersten Bau gemessen. */ .zone-buehne > [data-nach-rede].rahmenfeld{display:flex; flex-direction:column; flex:1 1 auto; min-height:0} .rahmenfeld .inhaltsrahmen{flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column; min-block-size:min(46dvh,420px)} .rahmenfeld .inhaltsrahmen iframe{flex:1 1 auto; min-height:0; height:auto} /* ── Das Abspielfeld unter der Rede ─────────────────────────────────────────── Auf der Genussreise läuft der Kanal unter dem Text (Dieter 09.08.2026: „bei Der Reise kannst du unter den Text den Player anzeigen"). Kein Rahmen, keine Kopie — nur der Strom der eigenen Station. Ohne `autoplay`: Ton gibt es erst auf Bedienung (BAUPLAN §6a). */ .hoerfeld{margin-top:clamp(.8rem,2.4dvh,1.6rem); max-width:min(100%,520px)} .hoerfeld .uber{margin-bottom:.35em} .hoerfeld audio{width:100%; height:40px; display:block} /* ── Drei Player nebeneinander ──────────────────────────────────────────────── Genuss-Radio zeigt drei eigene Player (Dieter 09.08.2026): die Reise, dieselbe Reise in Solfeggio-Stimmung und das Doppelalbum Day & Night. Am Handy stehen sie untereinander. */ .playerreihe{display:grid; gap:clamp(8px,1vw,16px); grid-template-columns:repeat(3,minmax(0,1fr)); flex:1 1 auto; min-height:0; width:100%} .playerreihe .inhaltsrahmen{min-height:0; height:auto} @media (max-width:900px){ .playerreihe{grid-template-columns:1fr; overflow:auto} } .playerreihe .spieler{display:flex; flex-direction:column; min-height:0} .playerreihe .spieler .uber{margin-bottom:.15em} .playerreihe .spieler-unter{margin:0 0 .5em; color:var(--muted); font-size:clamp(.72rem,.85vw,.85rem)} /* ── Auswahl über einem Rahmen ──────────────────────────────────────────────── Genuss-Radio zeigt EINEN Player; darüber wählt man die Fassung (Dieter 09.08.2026: „nur einen Player zu haben und darüber eine Auswahl war sehr viel angenehmer"). Die Knöpfe tragen dieselbe Gestalt wie die Kacheln im Fußraum — eine Sprache, nicht zwei. */ .rahmenwahl{display:flex; flex-wrap:wrap; gap:clamp(6px,.8vw,12px); margin-bottom:.4em} .rahmenknopf{ font-family:var(--font-head); font-weight:400; font-size:clamp(.85rem,1vw,1rem); padding:.5em 1em; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; color:var(--text); cursor:pointer; transition:border-color .2s ease, background .2s ease; } .rahmenknopf:hover{border-color:var(--accent)} .rahmenknopf.laeuft{border-color:var(--kapitelfarbe,var(--accent)); background:color-mix(in srgb, var(--kapitelfarbe,var(--accent)) 12%, #fff)} .rahmenwahl-unter{margin:0 0 .5em; color:var(--muted); font-size:clamp(.75rem,.9vw,.9rem)} /* ── Die Wortmarke auf JEDER Bühne ──────────────────────────────────────────── Dieter 09.08.2026: *„die Wortmarke omaneo espresso hätte ich gerne — wenn auch nicht so groß wie auf der Startseite — auf jeder Seite oben links eingebaut."* Sie führt zurück zum Anfang. Die Breite ist die halbe Startbild-Größe; ihre linke Kante liegt dort, wo auch die große steht (die Bilddatei trägt 7,25 % transparenten Rand, siehe `.motto`). */ .marke-klein{ /* In der Achse der Knöpfe (Dieter 09.08.2026, mit Bild): Der Pfeil oben Mitte hat seine Mitte bei „Abstand + 24 px"; das Logo wird darauf ausgerichtet, also rund 20 px tiefer als zuvor. Gerechnet, nicht geschätzt: Abstand des Pfeils + halbe Pfeilhöhe − halbe Logohöhe (Logo-Breite × 0,411 × 0,823 sichtbar). */ position:absolute; top:calc(clamp(14px,3dvh,28px) + 24px - clamp(74px,9vw,116px) * 0.411 * 0.5); /* Das Logo wandert auf JEDER Bühne nach rechts (Dieter 09.08.2026): Damit ist die linke obere Ecke frei für die linksbündige Navigation. Es steht RECHTSBÜNDIG ZUM SATZSPIEGEL, nicht am Fensterrand (Dieter 09.08.2026): seine rechte Kante fällt mit der rechten Kante des Inhalts zusammen. Gerechnet: linke Feldkante (--rand) + Feldbreite − Logobreite. */ right:auto; left:calc(var(--rand) + min(var(--feld-max), 100vw - var(--rand) * 2) - clamp(74px,9vw,116px)); width:clamp(74px,9vw,116px); z-index:6; display:block; line-height:0; opacity:.9; transition:opacity .2s ease; } .marke-klein:hover{opacity:1} .marke-klein img{width:100%; height:auto; display:block} /* Der Rücksprung-Pfeil steht oben MITTE, die Marke links — sie stoßen nicht zusammen. Am Handy wird die Marke kleiner, damit der Hinweis des rechten Knopfes daneben passt. */ @media (max-width:820px){ .marke-klein{width:clamp(64px,17vw,86px); /* Am Handy ist das Feld ohnehin fensterbreit (100% − 2·Rand) — da genügt der Rand als rechter Abstand, die rechte Feldkante liegt an derselben Stelle. */ left:auto; right:var(--rand)} } /* ── Das kleine Motto unter dem Fernsehbild ─────────────────────────────────── Fünfte und geltende Fassung (Dieter 09.08.2026): *„stattdessen probieren wir es mit einem kleinen ‚Kaffee ist unsere Leidenschaft' unter dem Video."* Es steht damit dort, wo der Blick nach dem Bild hinfällt — bronzefarben kursiv wie der Kursiv-Akzent der CI, aber klein: eine Beischrift, keine Überschrift. */ .motto-klein{ margin:.6em 0 0; text-align:center; font-family:var(--font-head); font-style:italic; font-weight:400; color:var(--accent); font-size:clamp(.95rem,1.2vw,1.15rem); line-height:1.3; } /* ── Die durchgehende Navigation (Dieter 09.08.2026) ────────────────────────── „| Lernen | Informieren | Kaufen | Sonstige | Wir über uns | — und diese Zeile schleppen wir dann auch durch alle Unterverzeichnisse durch: Hauptkategorie > Unterkategorie > Subkategorie, und immer 3 Kacheln hervorgehoben, damit man sieht, wo man gerade ist und man von überall nach überall springen kann." Dazu: „das Konzept der Farbkodierung der Hauptkategorie behalten wir dabei bei" und „die Größe der Buttons bitte vereinheitlichen". */ .folgenliste.haupt .folge[data-kapitel="lernen"] { --kachelton:var(--ton-lernen); --kachelsatt:var(--ton-lernen-satt) } .folgenliste.haupt .folge[data-kapitel="informieren"] { --kachelton:var(--ton-informieren); --kachelsatt:var(--ton-informieren-satt) } .folgenliste.haupt .folge[data-kapitel="kaufen"] { --kachelton:var(--ton-kaufen); --kachelsatt:var(--ton-kaufen-satt) } .folgenliste.haupt .folge[data-kapitel="medien"] { --kachelton:var(--ton-medien); --kachelsatt:var(--ton-medien-satt) } .folgenliste.haupt .folge[data-kapitel="haus"] { --kachelton:var(--ton-haus); --kachelsatt:var(--ton-haus-satt) } .folgenliste.haupt .folge{ background:var(--kachelton,#fff) } .folgenliste.haupt .folge.laeuft{ border-color:var(--kachelsatt); font-weight:600 } /* Einheitliche Höhe in allen drei Zeilen — eine Zeile Text, mittig, nichts springt. */ .folgenliste .folge{ min-height:2.6em; display:flex; align-items:center; gap:.5em } .folgenliste .folge .ti{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* Längere Erklärungen erscheinen beim Überfahren — nicht in der Kachel (Dieter 09.08.2026). */ .folge{ position:relative } .kachel-hinweis{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; font-family:var(--font); font-size:.78rem; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:var(--r-md); padding:.35em .7em; opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:45; } .folge:hover .kachel-hinweis, .folge:focus-visible .kachel-hinweis{ opacity:1 } /* ── Gleich große Kacheln in allen drei Zeilen (Dieter 09.08.2026) ───────────── *„gleichgroße Buttons sind hier noch nicht zu erkennen"* — richtig: Jede Zeile rechnete ihre Spalten aus der eigenen Anzahl, also war „Lernen" schmal und „Genussreise" breit. Jetzt gilt EINE Spaltenbreite für alle Zeilen: 6 Spalten auf dem großen Schirm, gefüllt von links. Damit sind alle Kacheln gleich groß, egal wie viele in einer Zeile stehen. ── Und das Farbkonzept, wie Dieter es meint ──────────────────────────────── *„eine Hauptkategorie: ALLE Buttons der Hauptkategorie die Hauptkategorie-Farbe — sämtliche Hintergründe der Beiträge dieser Hauptkategorie dieselbe Farbe. Das ist ein Farbkonzept."* Also nicht nur die eine Kachel: Die Zeilen 2 und 3 nehmen den Ton der aktiven Hauptkategorie an, und die Bühne trägt ihn ohnehin (`data-kapitel`). */ .folgenliste{ grid-template-columns:repeat(6,minmax(0,1fr)) !important } .buehne[data-kapitel] .folgenliste .folge{ background:var(--kapitelton,#fff) } .buehne[data-kapitel] .folgenliste .folge.laeuft{ border-color:var(--kapitelfarbe); font-weight:600; background:color-mix(in srgb, var(--kapitelfarbe) 16%, #fff); } /* In der Hauptzeile behält jede Kachel ihre eigene Kategoriefarbe — dort ist sie die Legende des Konzepts. */ .folgenliste.haupt .folge{ background:var(--kachelton,#fff) !important } .folgenliste.haupt .folge.laeuft{ background:color-mix(in srgb, var(--kachelsatt) 18%, #fff) !important; border-color:var(--kachelsatt) !important; } @media (max-width:1100px){ .folgenliste{ grid-template-columns:repeat(4,minmax(0,1fr)) !important } } @media (max-width:820px){ .folgenliste{ grid-template-columns:repeat(3,minmax(0,1fr)) !important } } @media (max-width:520px){ .folgenliste{ grid-template-columns:repeat(2,minmax(0,1fr)) !important } } /* ── Die Leiste im Fuß wird schlank (Dieter 09.08.2026) ─────────────────────── *„der Fuß mit seiner Navigation muss um Größenordnungen schlanker werden."* Sie ist ein Wegweiser, keine Bühne: kleine Schrift, eine Zeile Höhe, wenig Luft. Gemessen vorher 44 px je Kachel und drei Zeilen — das war ein zweites Hauptmenü. */ .folgenliste{ gap:4px !important; margin-top:clamp(.3rem,.8dvh,.6rem) !important } .folgenliste .folge{ min-height:0 !important; padding:.28em .6em !important; border-radius:6px !important; font-size:.78rem !important; line-height:1.25 !important; gap:.35em !important; } .folgenliste .folge .nr{ font-size:.66rem !important; min-width:1em } .folgenliste .folge .ti{ font-size:inherit !important } .folgenliste.haupt .folge{ font-size:.82rem !important; padding:.34em .7em !important } .folgenliste.haupt .folge.laeuft{ font-weight:600 } /* Zwischen den drei Zeilen genügt ein Hauch. */ .folgenliste + .folgenliste{ margin-top:3px !important } /* ── Die Fußleiste, radikal schlank (Dieter 09.08.2026) ─────────────────────── *„die Navigation im Fußbereich muss um Größenordnungen schlanker werden! selbst die popeligen 5 Hauptkategorien legst du nicht einmal in eine Zeile"* — er hatte recht: Bei seiner Fensterbreite griffen vier Spalten, also brach schon die Hauptzeile um, und die Unterzeilen brauchten drei Reihen. Gemessen 250 bis 330 px Höhe; sein Ziel war die Hälfte. *„also mehr Begriffe horizontal — mindestens 6, eine kleinere (auch wenn sie nicht dem CI entsprechen sollte) gut lesbare Schrift, Kürzung wo nötig."* Deshalb: die Leiste rechnet ihre Spalten aus der VERFÜGBAREN Breite (mindestens sechs passen immer), und sie trägt die Textschrift Inter statt Playfair — bei 12 px ist eine Serifenschrift schlechter lesbar, und dieser Wegweiser ist Bedienung, nicht Gestaltung. */ .folgenliste{ grid-template-columns:repeat(auto-fit,minmax(102px,1fr)) !important; gap:3px !important; margin-top:clamp(.2rem,.6dvh,.45rem) !important; } .folgenliste .folge{ font-family:var(--font) !important; /* Inter — bewusst nicht Playfair */ font-size:.72rem !important; line-height:1.2 !important; padding:.22em .5em !important; min-height:0 !important; border-radius:5px !important; gap:.3em !important; letter-spacing:0 !important; } .folgenliste.haupt .folge{ font-size:.76rem !important; padding:.26em .55em !important } .folgenliste .folge .nr{ font-size:.62rem !important } .folgenliste + .folgenliste{ margin-top:2px !important } @media (max-width:820px){ .folgenliste{ grid-template-columns:repeat(auto-fit,minmax(88px,1fr)) !important } .folgenliste .folge{ font-size:.68rem !important } } /* ── Enger an Kopf und Fuß, feste Fußzone (Dieter 09.08.2026) ───────────────── *„vielleicht müssen wir die Buttons noch weiter verkleinern — den Frame nah an Kopf und Fuß heranbringen, um möglichst viel Platz für den Inhalt zu bekommen; der Fuß sollte eine feste [Höhe haben]."* Drei Maße, alle gerechnet und nicht geschätzt: · Die Pfeile schrumpfen von 48 auf 40 px — damit sinkt der nötige Kopfraum entsprechend. · Der Kopfraum ist Pfeilabstand + Pfeilhöhe + 6 px Luft (vorher 14 px Luft). · Der Fuß hat eine FESTE Zone. Der schlimmste Fall sind fünf Zeilen Kacheln (Hauptzeile + zweizeilige Unterzeile + zweizeilige Subzeile) — bei 20 px Zeilenhöhe und 2 px Abstand sind das 108 px; die Zone trägt 112 px. Dadurch springt der Rahmen nicht, wenn eine Bühne eine Zeile mehr oder weniger hat. */ :root{ --fusszone:112px } .pfeil{ --grosse:40px } .feld.fuellt{ --kopfluft:calc(clamp(12px,2.4dvh,24px) + 40px + 6px) } .buehne.aktiv > .feld.fuellt{ padding-top:var(--kopfluft); padding-bottom:0 } /* Die Leiste sitzt in einer Zone gleicher Höhe, unten ausgerichtet. */ .buehne.aktiv > .folgenliste:first-of-type{ margin-top:auto } .buehne.aktiv{ --fussraum:var(--fusszone) } .folgenliste .folge{ font-size:.68rem !important; padding:.18em .45em !important; border-radius:4px !important; } .folgenliste.haupt .folge{ font-size:.72rem !important; padding:.2em .5em !important } @media (max-width:820px){ :root{ --fusszone:auto } } /* Die Fußzone: feste Höhe, Reihen darin unten. Damit hat der Rahmen auf JEDER Bühne denselben Platz — er springt nicht mehr, wenn eine Kachelzeile umbricht. */ .buehne.aktiv{ display:flex; flex-direction:column } .buehne.aktiv > .feld.fuellt{ flex:1 1 auto; min-height:0 } .fusszone{ /* Feste Höhe, nicht nur Mindesthöhe — sonst blieben zehn Pixel Unterschied je nachdem, wie viele Zeilen die letzte Reihe hat (gemessen 576 gegen 586 px Rahmenhöhe). */ height:var(--fusszone); display:flex; flex-direction:column; justify-content:flex-end; width:min(var(--inhaltsbreite,1080px), calc(100vw - 2 * var(--buehnenrand,85px))); margin-inline:auto; padding-bottom:clamp(6px,1.2dvh,12px); } @media (max-width:820px){ .fusszone{ min-height:0; width:auto; margin-inline:0 } } /* ── Die Kachelgröße nach Dieters Rechenweg (09.08.2026) ────────────────────── *„zähle, wie viele Untermenüs die mit den meisten Untermenüs enthält, teile die Zahl durch 2 — weil maximal zweizeilig toleriert wird. Wähle dann die Größe so, dass zweizeilig gerade noch möglich ist, und passe alle anderen auf diese Größe an."* Gezählt (im Baum, nicht geschätzt): „Sonstiges" hat **14** Untermenüs, das ist das Maximum; 14 geteilt durch 2 ergibt **7 Spalten**. Damit bleibt jede Reihe höchstens zweizeilig — die Videothek mit ihren neun Reihen ebenso wie die elf Kursfolgen. Diese sieben Spalten gelten für ALLE Zeilen, damit alle Kacheln gleich groß sind. ── Und die Ebenen unterscheiden sich durch FARBE, nicht durch einen Absatz ── Dieter: *„die Untermenüs sind schlecht von anderen Menüpunkten zu unterscheiden — sie regeln das zur Zeit durch einen Absatz … wenn Informationen den Farbton blau haben, können schon mal alle Untermenüs [ihn tragen]."* Also: Alle drei Zeilen tragen den Ton ihrer Hauptkategorie, die Ebene zeigt sich in seiner Stärke — Hauptzeile satt, Unterzeile mittel, Subzeile hell. */ :root{ --navspalten:7 } .folgenliste{ grid-template-columns:repeat(var(--navspalten),1fr) !important } .buehne[data-kapitel] .folgenliste.haupt .folge{ background:color-mix(in srgb, var(--kapitelfarbe) 22%, #fff) !important; } .buehne[data-kapitel] .folgenliste:not(.haupt) .folge{ background:color-mix(in srgb, var(--kapitelfarbe) 12%, #fff) !important; border-color:color-mix(in srgb, var(--kapitelfarbe) 35%, var(--border)) !important; } .buehne[data-kapitel] .folgenliste:not(.haupt) + .folgenliste:not(.haupt) .folge{ background:color-mix(in srgb, var(--kapitelfarbe) 5%, #fff) !important; } /* Die laufende Kachel bleibt in jeder Ebene die kräftigste. */ .buehne[data-kapitel] .folgenliste .folge.laeuft{ background:color-mix(in srgb, var(--kapitelfarbe) 34%, #fff) !important; border-color:var(--kapitelfarbe) !important; font-weight:600; } /* Der Absatz zwischen den Reihen entfällt — die Farbe trennt jetzt. */ .folgenliste + .folgenliste{ margin-top:2px !important } @media (max-width:1000px){ :root{ --navspalten:5 } } @media (max-width:760px){ :root{ --navspalten:4 } } @media (max-width:520px){ :root{ --navspalten:3 } } /* ── Ein Kasten um die Untermenüs (Dieter 09.08.2026) ───────────────────────── *„ich würde einen kompletten Rahmen um die Untermenüpunkte mit blauem Hintergrund und die Buttons transparent bis auf den aktiven bevorzugen."* Also trägt die FLÄCHE die Farbe der Hauptkategorie — bei Informieren das kühle Stahlgrau, bei Lernen das warme Papier — und die Kacheln darin sind transparent. Nur die laufende ist gefüllt. Damit sind die Ebenen ohne Absatz auseinanderzuhalten. */ .untermenue{ background:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 16%, #fff); border:1px solid color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 42%, var(--border)); border-radius:8px; padding:4px; margin-top:3px; } .untermenue .folgenliste{ margin-top:0 !important } .untermenue .folgenliste + .folgenliste{ margin-top:3px !important } /* Die Kacheln im Kasten: transparent, ohne eigenen Rand — nur Text. */ .buehne[data-kapitel] .untermenue .folge, .untermenue .folge{ background:transparent !important; border-color:transparent !important; } .untermenue .folge:hover{ background:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 10%, #fff) !important; } /* Der aktive Punkt ist der einzige gefüllte — und zwar in einer VARIATION des Kategorietons, nicht in Weiß (Dieter 09.08.2026: *„der aktive bekommt dann eine Variation von dem Blau, so dass man das ins Submenü übertragen kann"*). Damit wandert die Farbe nach unten: Der Kasten trägt den Ton schwach, der aktive Punkt kräftig, und das Submenü darunter nimmt genau diese kräftige Stufe als Fläche auf — die Herkunft ist sichtbar. */ .buehne[data-kapitel] .untermenue .folge.laeuft, .untermenue .folge.laeuft{ background:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 34%, #fff) !important; border-color:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 62%, #fff) !important; font-weight:600; } /* Das Submenü setzt genau dort an, wo der aktive Punkt aufhört: dieselbe Stufe als Fläche. */ .untermenue .folgenliste + .folgenliste{ background:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 26%, #fff); border-radius:6px; padding:3px; } .untermenue .folgenliste + .folgenliste .folge.laeuft{ background:color-mix(in srgb, var(--kapitelfarbe,#9B7A4A) 52%, #fff) !important; } /* Vertikal näher zusammen (Dieter 09.08.2026: *„so können die Menüs auch vertikal näher aneinander rücken"*) — die Farbe trennt jetzt, nicht der Abstand. */ .untermenue{ padding:3px !important; margin-top:2px !important } .untermenue .folgenliste + .folgenliste{ margin-top:2px !important } .folgenliste{ gap:2px !important } .folgenliste .folge{ padding:.16em .45em !important } :root{ --fusszone:98px } /* ═══ Das Klappmenü im Fuß (Dieter 09.08.2026) ═══════════════════════════════ *„stop … also gehen wir einen generell anderen Weg. Mach mir einfach ein schönes Drop-down-Menü unter den Hauptkategorien — dort mit Verzweigungen in eine zweite Ebene."* Damit ist die dreizeilige Dauerleiste abgelöst: EINE Zeile im Fuß, alles andere klappt auf Berührung auf. Die Klappen öffnen NACH OBEN, weil unter der Leiste kein Platz ist. Kein Skript nötig — `:hover` und `:focus-within` genügen, und jede Kategorie bleibt ein Verweis auf ihren Einstieg. Die Farbkodierung bleibt: jede Klappe im Ton ihrer Kategorie. */ .hauptleiste{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:min(var(--inhaltsbreite,1080px), calc(100vw - 2 * var(--buehnenrand,85px))); margin:0 auto; padding-bottom:clamp(8px,1.6dvh,16px); } .hauptpunkt{ position:relative } .hauptpunkt[data-kapitel="lernen"] { --ht:var(--ton-lernen); --hs:var(--ton-lernen-satt) } .hauptpunkt[data-kapitel="informieren"] { --ht:var(--ton-informieren); --hs:var(--ton-informieren-satt) } .hauptpunkt[data-kapitel="kaufen"] { --ht:var(--ton-kaufen); --hs:var(--ton-kaufen-satt) } .hauptpunkt[data-kapitel="haus"] { --ht:var(--ton-haus); --hs:var(--ton-haus-satt) } .hauptpunkt[data-kapitel="medien"] { --ht:var(--ton-medien); --hs:var(--ton-medien-satt) } .hauptpunkt > .hp{ display:block; text-align:center; text-decoration:none; color:var(--text); font-family:var(--font); font-size:.8rem; line-height:1.2; padding:.45em .6em; background:var(--ht); border:1px solid color-mix(in srgb, var(--hs) 30%, var(--border)); border-radius:7px; transition:background .18s ease, border-color .18s ease; } .hauptpunkt > .hp:hover, .hauptpunkt:focus-within > .hp{ background:color-mix(in srgb, var(--hs) 22%, #fff); border-color:color-mix(in srgb, var(--hs) 55%, #fff); } .hauptpunkt.laeuft > .hp{ background:color-mix(in srgb, var(--hs) 30%, #fff); border-color:var(--hs); font-weight:600; } /* Die Klappe: sitzt über der Leiste, in der Farbe ihrer Kategorie. */ .klappe{ position:absolute; left:0; bottom:calc(100% + 5px); min-width:100%; width:max-content; max-width:min(360px, 46vw); z-index:60; background:color-mix(in srgb, var(--hs) 12%, #fff); border:1px solid color-mix(in srgb, var(--hs) 45%, var(--border)); border-radius:8px; padding:4px; box-shadow:0 8px 22px rgba(26,26,26,.10); opacity:0; visibility:hidden; transform:translateY(4px); /* ⚑ 11.08.2026 (Dieter, am Telefon gefunden): „bei medien-radio kann man den Startknopf nicht betätigen, weil ein Klick auf diese Stelle das Dropdown-Menü Sonstiges öffnet." Genau so war es: Die geschlossene Klappe ist zwar unsichtbar (`visibility:hidden`), ihre KINDER setzen die Sichtbarkeit aber zurück und fangen damit jeden Klick ab. Die Klappe „Sonstiges" ist 912 px hoch — auf einem 844-px-Schirm liegt sie über der ganzen Bühne. `pointer-events:none` beschränkt die Trefferfläche des Menüs auf den Kopfbereich; sobald die Klappe wirklich offen ist, nimmt sie wieder Klicks (R-93 bleibt gewahrt). */ /* ⚑ BERICHTIGT 12.08.2026. Der erste Anlauf setzte hier `pointer-events:none` — das schloss zwar die Falle am Telefon, öffnete aber einen Zirkel: Die Klappe wurde nur trefferbar, WENN der Zeiger auf dem Punkt stand; verließ er den Auslöser Richtung Klappe, verlor sie im selben Moment ihre Trefferbarkeit, das Überfahren erlosch und sie schloss (gemessen: Zeiger nachweislich AUF der Klappe, und sie ging trotzdem zu). Die Ursache lag woanders: Eine unsichtbare Klappe ist von Haus aus nicht trefferbar — ihre KINDER hatten die Sichtbarkeit nur zurückgesetzt. Also erben sie sie jetzt. */ /* (kein pointer-events hier — siehe `.klappe *` unten) */ transition:opacity .16s ease, transform .16s ease, visibility .16s; } .hauptpunkt:hover > .klappe, .hauptpunkt:focus-within > .klappe{ opacity:1; visibility:visible; transform:translateY(0); } .klappe-punkt{ position:relative } .klappe .mp{ display:block; text-decoration:none; color:var(--text); font-family:var(--font); font-size:.78rem; line-height:1.25; padding:.34em .6em; border-radius:5px; white-space:nowrap; } .klappe .mp:hover{ background:color-mix(in srgb, var(--hs) 18%, #fff) } .klappe .mp.laeuft{ background:color-mix(in srgb, var(--hs) 34%, #fff); font-weight:600; } /* Ein Punkt mit Zweigen zeigt es an und öffnet die zweite Ebene daneben. */ .klappe-punkt.hat-zweig > .mp::after{ content:"›"; float:right; opacity:.6; margin-left:.6em } .klappe-zweig{ position:absolute; left:calc(100% + 4px); top:-4px; min-width:150px; width:max-content; background:color-mix(in srgb, var(--hs) 26%, #fff); border:1px solid color-mix(in srgb, var(--hs) 50%, var(--border)); border-radius:8px; padding:4px; box-shadow:0 8px 22px rgba(26,26,26,.12); opacity:0; visibility:hidden; transition:opacity .14s ease, visibility .14s; } /* ⚑ 12.08.2026: Das reine Überfahren öffnet die zweite Ebene NICHT mehr — sonst reißt der schräge Weg zu einem Zweigpunkt die Nachbarzweige auf. Geführt wird über `.offen` (buehne.js); `:focus-within` bleibt für die Tastatur. */ .klappe-punkt:focus-within > .klappe-zweig{ opacity:1; visibility:visible; } .klappe-zweig .mp.laeuft{ background:color-mix(in srgb, var(--hs) 52%, #fff) } /* Läuft die zweite Ebene rechts aus dem Bild, klappt sie nach links. */ .hauptpunkt:nth-child(n+4) .klappe-zweig{ left:auto; right:calc(100% + 4px) } .hauptpunkt:nth-child(n+4) .klappe{ left:auto; right:0 } @media (max-width:820px){ .hauptleiste{ width:auto; grid-template-columns:repeat(3,1fr) } .klappe{ max-width:80vw } .klappe-zweig{ position:static; opacity:1; visibility:visible; box-shadow:none; margin:2px 0 2px .8em } } /* Klick zum Öffnen — die Klasse setzt `buehne.js` (Recherche: kein „nur Hover", WCAG 3.2.1/3.2.2). */ .hauptpunkt.offen > .klappe{ opacity:1; visibility:visible; transform:translateY(0) } .klappe-punkt.offen > .klappe-zweig{ opacity:1; visibility:visible } /* Ein Punkt mit zweiter Ebene zeigt es an — sichtbares Zeichen, wie es die Regel verlangt. */ .klappe-punkt.hat-zweig > .mp{ padding-right:1.4em } /* ── Die Leiste sitzt UNTER der Kopfzeile, die Klappen öffnen nach unten ────── Dieter 09.08.2026: *„wobei ein Drop-down klassischerweise in den Kopf einer Seite gehört."* Genau dort ist sie jetzt — aber eine Zeile TIEFER als Logo und Pfeile, sonst liegt der Rücksprung-Pfeil (oben Mitte, BAUPLAN §5) mitten in den Kategorien. Gemessen: Der Kopf endet bei 71 px, die Leiste beginnt darunter. */ .buehne.aktiv{ padding-top:calc(clamp(12px,2.4dvh,24px) + 40px + 8px) } .hauptleiste{ margin-top:0; padding-bottom:clamp(6px,1.2dvh,12px) } /* Klassisch nach unten aufklappen. */ .klappe{ top:calc(100% + 5px); bottom:auto; transform:translateY(-4px) } .hauptpunkt:hover > .klappe, .hauptpunkt:focus-within > .klappe, .hauptpunkt.offen > .klappe{ transform:translateY(0) } /* Der Kopfabstand über dem Rahmen entfällt — die Leiste hält den Abstand jetzt. */ .buehne.aktiv > .feld.fuellt{ padding-top:0 } /* ═══ Die Dock-Anmutung (Muster auf der Wahl, Dieter 09.08.2026) ══════════════ *„zeige mir am Beispiel der Willkommen-Seite die Dock-Anmutung der vorhandenen Drop-downs — insgesamt kann die Bedienung aber deutlich nach oben wandern."* Es ist DIESELBE Leiste mit denselben Klappen; nur liegt sie als schwebende Zeile da und wächst unter dem Zeiger, wie die Symbole im Dock. ⚑ Sie bleibt dabei **sichtbar** — die Recherche (NAVIGATION-MOEGLICHKEITEN.md) verbietet das Wegblenden: Verstecken halbiert die Auffindbarkeit (NN/G, 179 Nutzer). Das Dock ist hier also eine Anmutung, kein Versteck. */ .hauptleiste.dock{ display:flex; justify-content:center; gap:8px; width:max-content; max-width:96vw; margin:0 auto; padding:6px 10px; background:color-mix(in srgb, var(--surface,#F8F6F3) 82%, #fff); border:1px solid var(--border); border-radius:16px; box-shadow:0 6px 22px rgba(26,26,26,.10), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter:blur(6px); } .hauptleiste.dock .hauptpunkt{ transition:transform .18s cubic-bezier(.2,.7,.3,1) } .hauptleiste.dock .hauptpunkt > .hp{ border-radius:11px; padding:.5em .95em; font-size:.84rem; border-width:1px; box-shadow:0 1px 2px rgba(26,26,26,.05); } /* ⚑ 16.08.2026 — EINE HÖHE FÜR ALLE (Dieter: *„einheitlichkeit - gleichheit wo möglich ist eine meiner grundregeln"*). Gemessen standen zehn Knöpfe in sechs Höhen nebeneinander: 22 (Weg hinaus), 23 (Zufall), 24 (die vier Bereiche), 25 (Haus, Ton), 27 (Bot, Sprache) — je nachdem, ob ein Zeichen, ein Wort oder beides darin steckt. Eine gemeinsame Mindesthöhe samt mittiger Ausrichtung räumt das aus, ohne eine Breite zu verändern (nachgemessen: alle Breiten und die Leiste selbst unverändert, alle Höhen 26). */ .hauptleiste.dock .hauptpunkt > .hp, .hauptleiste.dock .hauptpunkt > .hp-fort{ min-height:26px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center } /* ⚑ 16.08.2026, BERICHTIGT (Dieter: *„ist teil bronze, soll teil schwarz — jetzt hast du beide teile in bronze gemacht"*). Gemeint war „das Wort in Bronze" nur für die IST-Hälfte; ich hatte die ganze Beschriftung eingefärbt. Die Logik ist bei beiden Schaltern dieselbe: links steht fett und in Bronze, was gerade IST — rechts schwarz und mager, wohin ein Klick führt. Das Zeichen bleibt schwarz. */ #tonSchalter .ton-wort, .sprachwahl .sprach-kuerzel{ color:var(--text) } #tonSchalter .ton-wort::before, .sprachwahl .sprach-kuerzel .ist{ color:var(--accent) } /* Das Wachsen unter dem Zeiger. ⛔ 16.08.2026 (Dieter: *„kannst du das Durchverschieben der Menüpunkte heilen?"*): Der Nachbar rückt NICHT mehr mit. Die Dock-Anmutung war hübsch und hat sich teuer bezahlt — gemessen wanderten beim Überfahren bis zu **drei Punkte gleichzeitig** um 1 bis 6,6 px zur Seite, weil jeder Nachbar seinerseits auf 1,04 wuchs. Wer auf einen Punkt zielt, zielt damit auf ein bewegliches Ziel; und wer die Leiste entlangfährt, sieht sie durchgehend zappeln. Jetzt wächst allein der Punkt unter dem Zeiger, und zwar **um seine eigene Mitte** (`transform-origin:center`) — sein Rand darf über die Nachbarn ragen, ihre Position ändert das nicht (eine Transformation ändert das Layout nie). Die Leiste steht still. Rückweg: die zwei gelöschten Zeilen wieder einsetzen (Nachbar-Skalierung 1.04). */ .hauptleiste.dock .hauptpunkt{ transform-origin:center center } .hauptleiste.dock .hauptpunkt:hover, .hauptleiste.dock .hauptpunkt:focus-within{ transform:translateY(-4px) scale(1.10); } .hauptleiste.dock .hauptpunkt.laeuft > .hp{ box-shadow:0 2px 8px rgba(26,26,26,.12) } /* Die Klappe hängt am Dock und trägt seine Rundung. */ .hauptleiste.dock .klappe{ border-radius:12px; box-shadow:0 10px 26px rgba(26,26,26,.14) } /* ── Die Bedienung wandert nach oben ───────────────────────────────────────── Logo, Pfeile und Leiste rücken zusammen an den oberen Rand; der Inhalt gewinnt die Höhe. Gerechnet wie bisher: Pfeilabstand + Pfeilhöhe + Luft. */ .pfeil-hoch, .pfeil-tradition{ top:clamp(6px,1.2dvh,12px) } .marke-klein{ top:calc(clamp(6px,1.2dvh,12px) + 20px - clamp(74px,9vw,116px) * 0.411 * 0.5) } .buehne.aktiv{ padding-top:calc(clamp(6px,1.2dvh,12px) + 40px + 6px) } /* ── Der Fußraum unter dem Rahmen (Dieter 09.08.2026) ───────────────────────── *„Am Beispiel Lehrerin: Wie geht das? Der iFrame geht jetzt bis ganz nach unten und lässt keinen Raum mehr für die unteren Buttons."* Richtig — beim Umzug der Navigation in den Kopf ist der gerechnete Fußraum mitgegangen, den vorher die Kachelreihe hielt (BAUPLAN §4a). Gemessen: Der Rahmen endete bei 873 px, die Pfeile beginnen bei 833 — er lag also unter ihnen. Der Raum wird wieder GERECHNET: Abstand des Pfeils vom Fensterboden + seine Höhe (40 px) + Luft. */ .buehne.aktiv > .feld.fuellt{ /* Den Fußraum hält jetzt die Bühne selbst frei (--pfadraum) — der Rahmen füllt bis dorthin. */ padding-bottom:0; } /* ── Das Dock steht oben in der Mitte (Dieter 09.08.2026) ───────────────────── *„Verzichte auf den Button oben in der Mitte zum Kapitelanfang und setze da das Menü hin, wie es jetzt auf der Willkommensseite in der Mitte steht."* Damit ist die Kopfzeile: Wortmarke links · Dock mittig · Weg zur gewohnten Webseite rechts. Der Kapitelanfang ist über die Kategorie im Dock erreichbar — der Pfeil dafür ist entfallen. */ .hauptleiste.dock{ /* Linksbündig statt mittig (Dieter 09.08.2026): Die Navigation beginnt an der linken Kante des Satzspiegels (--rand), das Logo ist dafür nach rechts gewandert. Damit fluchten Dock, Pfadzeile und Inhalt an derselben Kante. */ position:absolute; top:clamp(6px,1.2dvh,12px); left:var(--rand); transform:none; /* 70 statt 55 (Dieter 16.08.2026): Der Videothek-Zweig ist neun Punkte hoch und reichte damit tief in die Bühne — ab der sechsten Zeile lag die Rede der Figur darüber. Ein Menü, das der Inhalt überdeckt, ist keines. */ z-index:70; margin:0; } /* Das Wachsen darf die Mittigkeit nicht verschieben. */ .hauptleiste.dock .hauptpunkt:hover, .hauptleiste.dock .hauptpunkt:focus-within{ transform:translateY(-3px) scale(1.08); } /* Der Kopf ist genau so hoch wie das Dock, damit der Pfad UNMITTELBAR ans Menü anschließt (Dieter 09.08.2026: „der Pfad ist immer noch nicht an das Menü angebunden"). Das Dock ist nach dem Verschlanken nur noch 33 px hoch (Knopf 25 + Polster 2×4, gemessen) — die alten 48 px reservierten zu viel und rissen eine Lücke von ~25 px auf. Jetzt: Abstand + 33 + 8. */ .buehne.aktiv{ padding-top:calc(clamp(6px,1.2dvh,12px) + 33px + 8px) } /* Am Handy bleibt das Dock im Fluss — mittig übereinander wäre dort zu eng. */ @media (max-width:820px){ .hauptleiste.dock{ position:static; transform:none; width:auto; max-width:100%; flex-wrap:wrap; justify-content:flex-start } .buehne.aktiv{ padding-top:clamp(6px,1.2dvh,12px) } } /* Das Dock schlanker: kleinere Schrift, weniger Polster (Dieter 09.08.2026: *„mach die Schriftart des Drop-down kleiner und damit das Monster schlanker"*). */ .hauptleiste.dock{ gap:5px; padding:4px 7px; border-radius:13px } .hauptleiste.dock .hauptpunkt > .hp{ font-size:.72rem; padding:.34em .7em; border-radius:9px } .hauptleiste.dock .klappe{ padding:3px; border-radius:10px } .hauptleiste.dock .klappe .mp{ font-size:.7rem; padding:.26em .5em } .hauptleiste.dock .klappe-zweig{ padding:3px } .hauptleiste.dock .klappe-zweig .mp{ font-size:.68rem } /* Der Kopf wird entsprechend flacher. */ .buehne.aktiv{ padding-top:calc(clamp(6px,1.2dvh,12px) + 36px + 8px) } /* Das Haus im Dock — links neben „Lernen", zurück zum Startbild (Dieter 09.08.2026). Ein Zeichen statt eines Wortes: schmaler als die Kategorien, sonst gleiche Anmutung. */ .hauptpunkt.heim > .hp{ display:grid; place-items:center; padding:.34em .6em; color:var(--accent); background:#fff; border-color:var(--border); } .hauptpunkt.heim > .hp:hover{ background:color-mix(in srgb, var(--accent) 12%, #fff); border-color:var(--accent) } .hauptpunkt.heim{ margin-right:2px } /* ── Der Pfad im Kopf des Inhalts (Dieter 09.08.2026) ───────────────────────── *„vor jedem Inhalt bitte im Kopf des dargestellten Inhalts in Bronze den Pfad, wo wir uns gerade befinden, mit entsprechenden Verlinkungen anzeigen."* Er ersetzt zugleich den Nutzen der abgeschalteten Pfeile: Man sieht, wo man steht, und kommt eine Ebene höher. */ /* ⚑ Die Pfadzeile trägt die Anmutung des Sublabels „ESPRESSO" unter der Wortmarke (Dieter 09.08.2026: *„die Pfadeinbindung kann eine Schrift haben wie das ESPRESSO unter dem omaneo-Logo, und es kann linksbündig zum omaneo-Logo stehen"*): gesperrte Großbuchstaben in Bronze. Die linke Kante liegt auf der SICHTBAREN Kante der Wortmarke — die Bilddatei trägt 7,25 % transparenten Rand (gemessen, siehe `.motto`), deshalb dieselbe Rechnung. */ /* Platzhalter, solange die iframe-Bühnen auf native Flexbox umgestellt werden (Dieter 09.08.2026). Schlicht, mittig, in der Kapitelfarbe. */ .flex-platzhalter{ display:flex; flex-direction:column; gap:.6em; align-items:flex-start; justify-content:center; padding:clamp(1.2rem,4dvh,3rem); border:1px dashed var(--border); border-radius:14px; background:color-mix(in srgb, var(--kapitelton,#fff) 70%, #fff); } .flex-platzhalter .ph-titel{ font-family:var(--font-head); font-size:clamp(1.4rem,3vw,2.2rem); color:var(--kapitelfarbe,var(--accent)); margin:0 } .flex-platzhalter .ph-text{ font-family:var(--font); color:var(--muted); margin:0 } /* ── ZENTRALE Content-Typografie (Dieter 09.08.2026) ────────────────────────────── Nativ eingebundener Inhalt (.flexinhalt, ohne iframe) UND eigene Bausteine (.i-text) nehmen DIESELBEN Werte — Schrift, Zeilenabstand, Titelgrößen. Kein Blatt macht mehr seine eigene Schriftlogik. */ .flexinhalt{ overflow:auto; height:100%; width:100%; min-height:0; padding:clamp(.5rem,2dvh,1.5rem) clamp(.5rem,2vw,1.5rem); } .flexinhalt, .i-text{ font-family:var(--font); color:var(--text); font-size:var(--content-schrift); line-height:var(--zeilenabstand); } .flexinhalt h1, .flexinhalt h2, .i-text h1, .i-text h2{ font-family:var(--font-head); font-weight:400; color:var(--kapitelfarbe,var(--accent)); line-height:1.2; font-size:var(--content-titel); margin:0 0 .4em; } .flexinhalt h2, .i-text h2{ margin-top:1em } .flexinhalt h3, .i-text h3{ font-family:var(--font-head); font-weight:400; color:var(--kapitelfarbe,var(--accent)); font-size:var(--content-untertitel); line-height:1.25; margin:.9em 0 .3em; } .flexinhalt p, .flexinhalt li, .i-text p, .i-text .satz{ font-size:var(--content-schrift); line-height:var(--zeilenabstand); } .flexinhalt a, .i-text a{ color:var(--accent) } .flexinhalt img{ max-width:100%; height:auto } .flexinhalt table{ border-collapse:collapse; width:100% } .flexinhalt th, .flexinhalt td{ border:1px solid var(--border); padding:.4em .6em; text-align:left } .pfadzeile{ margin:0 0 clamp(4px,.8dvh,10px); padding-left:calc(clamp(16px,2vw,25px) + clamp(74px,9vw,116px) * 0.0725); font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); } .pfadzeile a{ color:var(--accent); text-decoration:none } /* Das Häuschen am Anfang jeder Pfadzeile (Dieter 09.08.2026): mittig zur Zeile, bronze über currentColor, kein Unterstrich. */ .pfadzeile .pf-zurueck{ appearance:none; -webkit-appearance:none; background:transparent; border:0; cursor:pointer; padding:0; margin-right:.7em; /* Bronze, Großbuchstaben, gesperrt — wie die Pfadzeile selbst (Dieter 09.08.2026). */ font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--accent) } .pfadzeile .pf-zurueck:hover{ text-decoration:underline } /* Der Fußraum bleibt für die Pfadzeile frei — der Inhalt hält unten Abstand (Dieter 09.08.2026). */ .buehne.aktiv{ padding-bottom:var(--pfadraum) } /* Unten RECHTS: Vorschlag für die nächste Seite, im Schriftstil des Pfades (Dieter 09.08.2026). */ .buehne.aktiv > .naechste-vorschlag{ position:fixed; right:var(--rand); bottom:clamp(10px,2.2dvh,20px); z-index:45; font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); text-decoration:none; max-width:42vw; white-space:nowrap; /* Gleiche Grundlinie wie die Pfadzeile: gleiche feste Boxhöhe, Inhalt mittig — so fluchtet der Text exakt, obwohl links ein Häuschen-SVG steht (Dieter 09.08.2026). */ display:flex; align-items:center; justify-content:flex-end; line-height:1; height:1.5em; } .buehne.aktiv > .naechste-vorschlag:hover{ text-decoration:underline } .naechste-vorschlag .nv-label{ opacity:.6; font-weight:400 } .pfadzeile .pf-haus{ display:inline-flex; align-items:center; vertical-align:-2px } .pfadzeile .pf-haus:hover{ text-decoration:none; opacity:.7 } .pfadzeile a:hover{ text-decoration:underline } .pfadzeile .pf-trenn{ opacity:.55; margin:0 .45em } .pfadzeile [aria-current="page"]{ color:var(--accent-h,#7D6038); font-weight:600 } /* Zufall und Weg hinaus im Dock. */ /* ⚑ 16.08.2026: Der Tonschalter steht NICHT mehr in dieser Reihe (Dieter: *„nimm beim ton toggle die hintergrundfarbe weg"* — und gemessen war der Sprachschalter daneben schon immer flächenlos). Zwei Schalter mit derselben Grammatik tragen dieselbe Gestalt. */ /* ⚑ 16.08.2026, BERICHTIGT (Dieter: *„du korrigierst eine sache und machst zwei richtige falsch — warum fehlen jetzt die hintergründe bei bot und sprache"*). Weg sollte allein die FARBIGE Fläche des Tonschalters (Bronze bzw. Schwarz); die weiße Pille gehört zu JEDEM Zeichen-Knopf im Dock. Sprachschalter und Bot hatten sie nie — das fiel erst auf, seit die Leiste ohne Rahmen steht. Also tragen jetzt alle dieselbe: Zufall, Weg hinaus, Ton, Sprache, Bot — und seit dem 29.08.2026 der Kontakt-Umschlag (Dieter: „der Briefumschlag steht nackt da“). Gleichheit, wo sie möglich ist. */ .hauptpunkt.zufall > .hp, .hauptpunkt.hinaus > .hp, .hauptpunkt.tonschalter > .hp, .hauptpunkt.sprachwahl > .hp, .hauptpunkt.assistent > .hp, .hauptpunkt.kontakt > .hp{ background:#fff; border-color:var(--border) } .hauptpunkt.zufall > .hp, .hauptpunkt.tonschalter > .hp, .hauptpunkt.kontakt > .hp{ display:grid; place-items:center; padding:.34em .6em; cursor:pointer } /* ⚑ Mindestbreiten, damit die Leiste in jeder Sprache gleich steht (Dieter 17.08.2026). Gemessen war der Weg hinaus deutsch 162,7 px und englisch 143,9 px, der Tonschalter 84,3 gegen 83 — und weil im Dock alles nebeneinander liegt, verschob schon der erste Unterschied ALLE folgenden Punkte (S3 „verschiedener Anfang"). Die Maße sind in `em` gesetzt: sie skalieren mit der eigenen Schriftgröße und gelten damit auf jedem Gerät. */ .hauptpunkt.hinaus > .hp{ color:var(--accent); white-space:nowrap; font-size:.7rem; min-width:16.5em; max-width:100%; display:inline-flex; align-items:center; justify-content:center } .hauptpunkt.tonschalter > .hp{ min-width:7.6em } .hauptpunkt.zufall > .hp:hover, .hauptpunkt.hinaus > .hp:hover, .hauptpunkt.tonschalter > .hp:hover, .hauptpunkt.sprachwahl > .hp:hover, .hauptpunkt.assistent > .hp:hover, .hauptpunkt.kontakt > .hp:hover{ background:color-mix(in srgb, var(--accent) 12%, #fff); border-color:var(--accent) } .hauptpunkt.zufall{ margin-left:2px } /* Ton-Schalter: Grundzustand AUS (durchgestrichenes Symbol), eingeschaltet die Wellen. */ #tonSchalter .ton-an{ display:none } #tonSchalter[aria-pressed="true"] .ton-aus{ display:none } #tonSchalter[aria-pressed="true"] .ton-an{ display:block } #tonSchalter[aria-pressed="true"]{ color:var(--accent) } /* „Mit dieser Seite fortfahren" auf der Startseite — Bronze wie der Weg hinaus, aber ein interner Sprung in die Begrüßung (gibt zugleich den Ton frei). */ /* Mindestbreite aus demselben Grund wie beim Einstieg (Dieter 17.08.2026): deutsch 13,9 em, englisch 12,7 em — die Leiste rückte bei jedem Sprachwechsel. 15 em fasst beide. */ .hauptpunkt.fortfahren > .hp-fort{ background:#fff; border:1px solid var(--border); color:var(--accent); white-space:nowrap; font-size:.72rem; padding:.34em .7em; /* ⚑ 21.08.2026 (Dieter, zum zweiten Mal gemeldet): Die feste Mindestbreite von 15 em war mit der EIGENEN Schrift gerade so ausreichend — gemessen blieben zwischen Text und Rand zwei Pixel. Sobald der Browser eine andere Schrift oder eine größere Grundgröße nimmt, steht die Schrift auf dem Rand oder läuft hinaus. `width:max-content` macht den Knopf IMMER so breit wie sein Text; die 15 em bleiben nur noch Untergrenze, damit die Leiste beim Sprachwechsel nicht springt. */ min-width:15em; width:max-content; max-width:100%; border-radius:9px; cursor:pointer; font-family:var(--font) } .hauptpunkt.fortfahren > .hp-fort:hover{ background:color-mix(in srgb, var(--accent) 12%, #fff); border-color:var(--accent) } /* Die Klappe am Haus trägt den Marken-Bronze (es gehört keiner Kategorie). */ .hauptpunkt.heim{ --hs:var(--accent); --ht:#fff } .hauptpunkt.heim > .klappe{ left:0; right:auto } /* Die Pfadzeile sitzt auf JEDER Bühne an derselben Stelle (Dieter 09.08.2026: *„außerdem steht der Pfad jetzt an einer Stelle, wo der bei keiner anderen Karte steht"*) — und zwar UNMITTELBAR VOR DEM INHALT, nicht in der Kopfzone (*„Pfadangabe gehört vor den Inhalt und nicht in den Kopf"*, Stichprobe haus-werkzeuge). Sie liegt jetzt IM Feld, also folgt sie dem Inhalt, wohin er auch rutscht. ⚠ Im Feld herrscht mal Grid, mal Flex: Ohne `grid-column:1/-1` belegte die Zeile eine einzelne Spalte und stünde neben der Figur statt über dem Inhalt; ohne `width:100%` würde sie in der Flex-Reihe zusammenschnurren. Beides gemessen, nicht geraten. */ /* Die Pfadzeile steht FEST LINKS UNTEN IM FUSSRAUM (Dieter 09.08.2026) — entkoppelt vom Dock, weil der Bühneninhalt vertikal zentriert ist und der Pfad im Inhalt deshalb nie „ans Menü angebunden" sein kann (gemessen bei 1440: Dock endet bei 46 px, Inhalt beginnt erst bei ~205 px). Fest positioniert, linke Kante am Satzspiegel (--rand), auf jeder Bühne gleich. Die frühere Einbettung ins Feld (grid-column, order) ist damit hinfällig. */ .buehne.aktiv > .pfadzeile{ /* Unten ZENTRIERT (Dieter 09.08.2026): Die native Browser-Statusleiste zeigt das Link-Ziel immer unten LINKS und lässt sich technisch nicht verschieben — also weicht der Pfad in die Mitte, dann beißen sich beide nicht. */ position:fixed; left:50%; transform:translateX(-50%); bottom:clamp(10px,2.2dvh,20px); margin:0; padding-left:0; width:auto; max-width:calc(100vw - 2 * var(--rand)); z-index:45; /* Gleiche feste Boxhöhe wie der Vorschlag rechts, Inhalt mittig — sonst sitzt der Text wegen des Häuschen-SVG minimal höher (Dieter 09.08.2026: „stehen dennoch nicht auf einer Linie"). */ display:flex; align-items:center; justify-content:center; line-height:1; height:1.5em; } /* ═══ Der Einstieg auf dem Startbild ═════════════════════════════════════════════ Wiederhergestellt am 09.08.2026: Mit den vier Navigationspfeilen war auch der Pfeil des Startbilds verschwunden — und damit der einzige sichtbare Weg in die Geschichte UND die eine echte Berührung, an der in Safari die Tonfreigabe für den ganzen Besuch hängt. Er ist bewusst KEIN Pfeilsymbol, sondern ein sprechender Knopf: Dieter hat für den Weg nach draußen dieselbe Bauart gewählt („Zur klassischen Webseite ›"), und ein Wort ist auffindbar, ein Zeichen muss geraten werden. */ /* ⚑ Dieter 17.08.2026: *„auf der deutschen Startseite soll die Breite der Buttons identisch sein mit der Breite der Buttons auf der englischen Seite."* Gemessen war sie es nicht — der Einstieg stand deutsch auf 284,6 px und englisch auf 224,7 px, der Fortfahren-Knopf auf 159,7 gegen 146,5. Beide waren so breit wie ihr Text; jede Sprache verschob die Kachel. Die Breite hängt jetzt an einer MINDESTBREITE in `em` — sie skaliert mit der Schriftgröße des Knopfes (die selbst vom Sichtfeld abhängt) und ist damit in jeder Sprache und auf jedem Gerät dieselbe. Bemessen am längsten Text (deutsch, 18,2 em) plus Reserve; die englische Beschriftung wird mittig gesetzt statt gedehnt. `max-width` hält den Knopf am Telefon im Rahmen. */ .einstieg{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; cursor:pointer; min-width:19em; max-width:100%; /* Eine Zeile tiefer (Dieter 09.08.2026): der Grundabstand plus eine Textzeile Luft. */ margin-top:calc(clamp(14px,2.4dvh,30px) + var(--buehnenschrift)); font-family:var(--font); font-size:clamp(.86rem,.8rem + .2vw,1rem); color:var(--text); background:#fff; border:1px solid var(--border); border-radius:10px; padding:.62em 1.15em; text-decoration:none; transition:background .18s ease, border-color .18s ease, transform .18s ease; } .einstieg .ar{ color:var(--accent); font-size:1.15em; line-height:1 } .einstieg:hover, .einstieg:focus-visible{ background:color-mix(in srgb, var(--accent) 10%, #fff); border-color:color-mix(in srgb, var(--accent) 45%, #fff); transform:translateY(-1px); } @media (max-width:820px){ .einstieg{ margin-top:14px } } /* ═══ Der Vorschlag des Gastgebers und seine Uhr ═════════════════════════════════ Dieter 09.08.2026: Der dritte Absatz der Begrüßung nennt eine zufällig gewählte Bühne, und nach „Los geht's." zählt eine sichtbare Uhr zehn Sekunden. Sie ist bewusst klein und zurückhaltend — sie kündigt an, sie drängt nicht. */ .rede p.vorschlag em{ font-style:normal; color:var(--accent); font-weight:500 } .vorschlag-uhr{ margin-top:.7em; font-family:var(--font); font-size:clamp(.78rem,.74rem + .15vw,.9rem); color:var(--muted); display:flex; align-items:center; gap:.5em; flex-wrap:wrap; } .vorschlag-uhr .zaehler{ display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; border-radius:50%; background:color-mix(in srgb, var(--accent) 14%, #fff); border:1px solid color-mix(in srgb, var(--accent) 35%, #fff); color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600; } .vorschlag-uhr a{ color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor } .vorschlag-uhr .bleiben{ background:none; border:0; padding:0; cursor:pointer; color:var(--muted); font:inherit; text-decoration:underline; text-underline-offset:2px; } .vorschlag-uhr .bleiben:hover{ color:var(--text) } /* ═══ Die Ton-Einladung ══════════════════════════════════════════════════════════ Erscheint NUR, wenn der Browser einen Satz wirklich abgewiesen hat (Dieter 09.08.2026: *„liefere ein JavaScript mit aus, das die nötige Aktion für das Einschalten des Tones ausführt"* — ausführen kann sie kein Skript, einsammeln schon). Eine Berührung genügt, danach spricht der ganze Besuch. Sie sitzt unten links, weit weg vom Dock und vom Inhalt. */ .ton-einladung{ /* Die Ecke unten LINKS gehört jetzt der Pfadzeile (Dieter 09.08.2026: „den Ton einschalten weg — der Platz unten links ist für die Pfadangabe reserviert"). Der Knopf sitzt deshalb unten RECHTS. */ position:fixed; left:clamp(14px,2vw,28px); right:auto; bottom:clamp(14px,2.4dvh,28px); z-index:40; display:inline-flex; align-items:center; gap:.5em; cursor:pointer; font-family:var(--font); font-size:.82rem; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:999px; padding:.5em .95em; box-shadow:0 4px 14px rgba(26,26,26,.1); animation:ton-auf .5s cubic-bezier(.2,.7,.3,1) both; } .ton-einladung svg{ color:var(--accent) } .ton-einladung:hover{ background:color-mix(in srgb, var(--accent) 9%, #fff); border-color:color-mix(in srgb, var(--accent) 40%, #fff) } @keyframes ton-auf{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} } @media (prefers-reduced-motion:reduce){ .ton-einladung{ animation:none } } /* ── Newsletter als Lauftext (Dieter 10.08.2026) ────────────────────────────── Der Inhalt der letzten Ausgabe läuft wie ein Abspann von unten nach oben durch; sonst nichts auf der Bühne. Weiche Kanten oben/unten, endlose Schleife. */ /* Die Überschrift über dem Lauftext (17.08.2026). Sie darf die Bahn nicht schrumpfen — deshalb steht sie außerhalb des laufenden Kastens und nimmt nur ihre eigene Höhe. */ .blatt-titel{ font-family:var(--font-head); font-weight:400; margin:0 0 clamp(1.1rem,2.4vw,1.9rem); font-size:clamp(1.6rem,3vw,2.4rem); flex:0 0 auto; align-self:flex-start } .newsletter-lauf{ position:relative; flex:1 1 auto; align-self:stretch; width:100%; min-height:0; height:100%; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%); } .newsletter-bahn{ position:absolute; left:0; right:0; top:0; padding:0 4px; animation:nl-lauf 62s linear infinite; will-change:transform; } /* Erzählton wie jede Figur+Text-Bühne — aus den zentralen Variablen, nichts Eigenes. */ .newsletter-bahn p{ margin:0 0 .8em 0; font-family:var(--font-head); font-size:var(--buehnenschrift); line-height:var(--zeilenabstand); color:var(--text); } .newsletter-bahn p:first-child{ color:var(--kapitelfarbe, var(--accent)); } /* ⛔ Der Lauf beginnt OBEN, nicht unterhalb der Kante (16.08.2026). Vorher startete er bei `translateY(100%)` — der erste Absatz war damit erst nach gut vierzig Sekunden im Bild, und wer die Bühne betrat, sah eine leere Fläche. Genau das meldete Dieter als „Newsletter zeigt nicht an": Der Text war da, er stand nur außerhalb. Jetzt steht die erste Zeile sofort und rollt nach oben aus; die Runde ist entsprechend kürzer (62 statt 82 Sekunden für den halben Weg). Ein Inhalt, der sich erst nach einer Minute zeigt, ist für den Betrachter nicht da. */ @keyframes nl-lauf{ from{ transform:translateY(0) } to{ transform:translateY(-100%) } } .newsletter-lauf:hover .newsletter-bahn{ animation-play-state:paused } @media (prefers-reduced-motion:reduce){ .newsletter-lauf{ overflow:auto; mask-image:none; -webkit-mask-image:none } .newsletter-bahn{ position:static; animation:none } } /* ── Genuss-Radio: nativer Player, zwei Spalten (Dieter 10.08.2026: „löse das fremde iframe auf und gestalte es von Grund auf neu"). Links Cover + Steuerung + Titelliste, rechts der Liedtext im Erzählton, song-synchron mitlaufend (Karaoke, Timing aus tools/reise-lrc). */ .reise-native{ display:flex; flex-direction:column; width:100%; height:100%; min-height:0 } /* Die Fassungs-Wahl sitzt in der linken Spalte über dem Cover: drei kleine Knöpfe in EINER Reihe (Dieter 10.08.2026), nicht mehr am Kopf. Klein genug für die schmale Spalte. */ .rp-wahl{ display:flex; flex-wrap:nowrap; gap:5px; width:100%; justify-content:center } .rp-knopf{ flex:0 1 auto; min-width:0; font:600 clamp(8.5px,.62vw,10px)/1.05 var(--font); letter-spacing:.02em; text-transform:uppercase; padding:.45em .5em; border:1px solid color-mix(in srgb,var(--kapitelfarbe) 40%,transparent); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; white-space:nowrap; text-align:center } .rp-knopf:hover{ border-color:var(--kapitelfarbe) } .rp-knopf.laeuft{ border-color:var(--kapitelfarbe); color:var(--kapitelfarbe); background:color-mix(in srgb,var(--kapitelfarbe) 10%,#fff) } .rp-unter{ margin:.1em 0 .5em; text-align:center; color:var(--muted); font-size:clamp(.7rem,.85vw,.82rem) } /* Linke Spalte schmaler zugunsten des Textes (Dieter 10.08.2026). */ .rp-buehne{ display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr); gap:clamp(1.2rem,3vw,3rem); align-items:center; flex:1 1 auto; min-height:0 } .rp-links{ min-width:0; max-width:300px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.7rem } .rp-cover-w{ width:min(70%,210px); aspect-ratio:1; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12) } .rp-cover-w img{ width:100%; height:100%; object-fit:cover } .rp-now{ text-align:center; line-height:1.3 } .rp-now b{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--text); display:block } .rp-gen{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--kapitelfarbe) } .rp-bar{ width:100%; max-width:340px; height:6px; border-radius:999px; background:color-mix(in srgb,var(--kapitelfarbe) 18%,transparent); cursor:pointer } .rp-fill{ height:100%; width:0; border-radius:999px; background:var(--kapitelfarbe); transition:width .15s linear } .rp-zeit{ width:100%; max-width:340px; display:flex; justify-content:space-between; font:600 11px/1 var(--font); color:var(--muted) } .rp-ctr{ display:flex; align-items:center; gap:.9rem } .rp-ctr button{ border:0; background:transparent; color:var(--text); cursor:pointer; font-size:1.1rem; padding:.3em; line-height:1 } .rp-ctr #rp-play{ width:2.6em; height:2.6em; border-radius:50%; background:var(--kapitelfarbe); color:#fff; font-size:1rem; display:flex; align-items:center; justify-content:center } .sp-liste{ width:100%; max-width:340px; border-top:1px solid color-mix(in srgb,var(--kapitelfarbe) 26%,transparent) } .sp-liste > summary{ cursor:pointer; list-style:none; padding:.55rem .1rem; font:600 12px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--kapitelfarbe); display:flex; justify-content:space-between; align-items:center } .sp-liste > summary::-webkit-details-marker{ display:none } .sp-liste > summary::after{ content:'▾'; transition:transform .2s } .sp-liste[open] > summary::after{ transform:rotate(180deg) } .sp-liste ol{ list-style:none; margin:0 0 .4rem; padding:0; max-height:34dvh; overflow:auto } .sp-liste li{ padding:.4em .3em; font-size:.9rem; color:var(--text); cursor:pointer; border-radius:6px } .sp-liste li:hover{ background:color-mix(in srgb,var(--kapitelfarbe) 10%,transparent) } .sp-liste li.rp-akt{ color:var(--kapitelfarbe); font-weight:600 } /* Rechts: der Liedtext wie die Avatar-Texte (Sprechfeld-Prinzip, BAUPLAN §10) — Playfair, im Takt des Liedes GETIPPT, das Feld SCROLLT mit, die aktive Zeile leuchtet und trägt den Cursor. Schrift für diese Seite kleiner, damit eine Strophenzeile in der Regel in die Breite passt (Dieter 10.08.2026: gemessen ~24 px bei 594 px Feld); ein hängender Einzug fängt die seltene überlange Zeile ab, statt sie wie eine neue Zeile aussehen zu lassen. */ /* Den Liedtext etwas höher setzen (Dieter 10.08.2026: erst 100 px hoch, dann „zwei Zeilen wieder runter" — also rund −35 px statt −100 px). */ .rp-rechts{ min-width:0; transform:translateY(-35px) } /* Etwa acht Zeilen als Fenster (Dieter 10.08.2026: „weniger Zeilen anzeigen, 8 sollten reichen"). `8lh` misst die Zeilenhöhe DIESES Feldes — deshalb bekommt es dieselbe Schrift/Zeilenhöhe wie die Liedzeilen, sonst zählt es die kleinere Grundzeilenhöhe und es passen nur ~6 hinein. */ .rp-text{ position:relative; font-size:clamp(1.02rem,.86rem + .62vw,1.5rem); line-height:1.5; height:clamp(230px,8lh,340px); overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%) } .rp-zeile{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.02rem,.86rem + .62vw,1.5rem); line-height:1.5; margin:.12em 0; padding-left:1.1em; text-indent:-1.1em; hyphens:none; color:var(--text); opacity:.5; transition:opacity .35s ease, color .35s ease } .rp-zeile.rp-fertig{ opacity:.5 } .rp-zeile.rp-kommt{ opacity:.34 } .rp-zeile.rp-jetzt{ opacity:1; color:var(--kapitelfarbe) } @media (max-width:820px){ .rp-buehne{ grid-template-columns:1fr; gap:1rem } .rp-links{ max-width:none } .rp-text{ height:36dvh } } /* ═══════════════════════════════════════════════════════════════════════════════ Die Umschlagreihe unter einem view-Ausschnitt ═══════════════════════════════════════════════════════════════════════════════ Dieter 11.08.2026: unter der Bezugsquellen-Kachel sollen die Werke auch zu SEHEN sein. Die Reihe steht als zweites Kind der füllenden Bühne — der Ausschnitt darüber nimmt die verbleibende Höhe (`.feld.fuellt .inhaltsrahmen{flex:1}`), die Reihe ihre eigene. Auf schmalen Schirmen wird sie waagerecht schiebbar, statt die Bilder auf Briefmarkengröße zu drücken — und sie schiebt nie die Seite mit (`overflow-x` liegt auf der Reihe, nicht auf dem Dokument). */ /* ⚑ 11.08.2026 (Dieter): KEINE Schiebeleiste mehr — was nicht in eine Zeile passt, bricht um. Und die Beschriftung, die vorher links neben den Umschlägen stand, ist jetzt die Überschrift darüber. Passt trotzdem nicht alles in die Bühne, scrollt die Reihe senkrecht in sich (nie die Seite). */ .buchwand{flex:0 1 auto; min-height:0; max-height:min(66dvh, 560px); display:flex; flex-wrap:wrap; align-items:flex-end; align-content:flex-start; justify-content:center; gap:clamp(10px,1.4vw,20px); width:100%; margin:clamp(10px,1.8dvh,22px) 0 clamp(10px,1.6dvh,18px); padding:0 0 4px; overflow-x:visible; overflow-y:auto; scrollbar-width:thin} .buchwand .bw-titel{flex:0 0 100%; align-self:auto; margin:0 0 2px; max-width:none; text-align:center; /* Dieter 11.08.2026: die Bucheinblendungen stehen zentriert */ /* Keine eigene Schrift: `--font-head` kommt aus /assets/css/design-tokens.css und ist die Hausschrift für Überschriften (Dieter 11.08.2026: „bitte keine neue Font für Überschriften einführen — ein zentrales CSS gibt Auskunft"). */ font-family:var(--font-head); font-weight:400; font-size:clamp(14px,1.35vw,19px); line-height:1.25; color:var(--ton-schrift,#1A1A1A); opacity:.85} /* ⚑ 12.08.2026 (Dieter: „warum sind die neu dazugekommenen Bilder kleiner als der Rest?"): Weil unsere Bücher zwei Formate haben — die Romane 12,5 × 19 (Verhältnis 0,657), das Sachbuch A5 (0,705). Bei gleicher BREITE fällt das flachere Buch 17 px niedriger aus und wirkt geschrumpft. Maß ist deshalb die HÖHE: Dann stehen alle Umschläge auf einer Linie, und die Breite folgt dem jeweiligen Format. */ .bw-stueck{flex:0 0 auto; margin:0; text-align:center; width:auto} /* ⚑ 12.08.2026 (Dieter): „die Bilder aller Buchseiten sollen größer dargestellt werden. 6 Darstellungen sollen die Breite einer Zeile füllen." — und, nach zwei Fehlversuchen: „kannst du nicht einmal ein paar Bilder in dasselbe Format bringen?" Genau das ist jetzt geschehen: `tools/buchbilder_angleichen.py` legt jeden Umschlag mittig auf eine Leinwand von 300 × 440 mit durchsichtigem Rand. Damit sind ALLE Bilder formatgleich, und hier steht eine einzige Regel statt Sonderfällen je Zuschnitt. Sechs je Zeile: Die Wand misst 78vw (1123 px bei 1440), die Lücke 20 px — je Stück also (78vw − 100px)/6 = 13vw − 16,7px Breite, Höhe = Breite ÷ 0,682. */ .bw-stueck img{height:min(250px, calc(19.06vw - 25px)); width:auto; display:block; margin:0 auto} /* Die Hörbuch-Umschläge sind quadratisch (440 × 440) — dort ist die Höhe gleich der Breite, sonst passen nur vier statt sechs in die Zeile. Unterschieden wird am FORMAT, nicht an der Anzahl: `data-art` sagt, welche Reihe hier steht. */ .buchwand[data-art="ton"] .bw-stueck img{height:min(170px, calc(13vw - 17px))} /* Die Bildunterschrift darf die Kachel NICHT breiter machen als den Umschlag: „The Coffee Journey" ist breiter als sein Buchrücken und schob das zehnte Werk in eine zweite Reihe (gemessen: neun oben, eins darunter). Sie hängt deshalb unter der Kachel statt in ihr. */ .bw-stueck{position:relative; padding-bottom:42px} .bw-stueck figcaption{position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:max-content; max-width:145%; text-align:center; line-height:1.25} .bw-stueck img{border-radius:3px; box-shadow:0 3px 10px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.10); background:#fff} .bw-stueck figcaption{margin-top:6px; font-size:clamp(11px,.9vw,14px); line-height:1.25; color:var(--ton-schrift,#1A1A1A); opacity:.72; display:flex; flex-direction:column; align-items:center; gap:1px} .bw-sprache{font-size:.85em; letter-spacing:.7px; opacity:.6} @media (max-width:640px){ .bw-stueck img{height:190px} } /* Steht eine Umschlagreihe in der Bühne, darf der Ausschnitt darüber nicht mehr „so hoch wie sein Inhalt" werden: Mit `flex-basis:auto` wuchs er über den Schirm hinaus und schob die Reihe unter die Kante (gemessen 11.08.2026 bei 390 px: 1041 statt 900). `flex-basis:0` gibt ihm genau den verbleibenden Platz; was nicht hineinpasst, scrollt IM Ausschnitt. */ /* ⚑ 11.08.2026 (Dieter): „die view-Einblendung soll ohne Scrollbalken komplett sichtbar sein." Also kehrt sich die Rangfolge um — nicht mehr die Umschläge zuerst, sondern der Ausschnitt: Er bekommt genau die Höhe, die sein Inhalt braucht (`flex:0 0 auto`, `height:auto`, kein eigenes Scrollen). Was danach übrig bleibt, gehört der Umschlagreihe; passt die nicht hinein, scrollt SIE. ⓘ Es ist übrigens kein iframe — der Ausschnitt wird zur Laufzeit aus view.php geholt und nativ ins Dokument gesetzt (Shadow DOM). Ein iframe wäre hier tatsächlich das falsche Werkzeug: Er könnte seine Inhaltshöhe gar nicht nach außen melden. */ .feld.fuellt > .zone-buehne:has(.buchwand) .inhaltsrahmen{flex:0 0 auto; height:auto; min-height:0; max-height:none; overflow:visible} .feld.fuellt > .zone-buehne:has(.buchwand) .buchwand{flex:0 0 auto; max-height:none; height:auto; overflow:visible} /* ⚑ 12.08.2026: Seit dem Tausch (Kaufkachel oben, Umschläge unten) und der neuen Größe — sechs Umschläge füllen die Zeile — passen zehn Werke nicht mehr auf einen Bildschirm: zwei Reihen brauchen 653 px, die Bühne gibt 364. Statt in der Wand zu rollen (zwei Rollbereiche übereinander, der innere kaum zu treffen) rollt jetzt der ganze Bereich zwischen Kopf und Fuß — eine einzige Bewegung, wie am Telefon längst. */ .feld.fuellt > .zone-buehne:has(.buchwand){overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-behavior:smooth; /* Polster, damit die letzte Bildunterschrift nicht unter der Fußzeile endet. */ padding-bottom:24px} /* Auf schmalen Schirmen passen ein vollständiger view-Ausschnitt UND acht Umschläge nicht zusammen auf einen Bildschirm — gemessen 11.08.2026 bei 390 px: 1903 px Dokumenthöhe. Und die Story-Bühnen scrollen nicht (das ist ihr Prinzip), der letzte Umschlag war damit schlicht NICHT ERREICHBAR. Deshalb scrollt hier ausnahmsweise der Bühnenkörper selbst — nur auf dieser Bühnenart, nur schmal. Beides bleibt vollständig, man wischt einmal. */ @media (max-width:700px){ /* Damit das Scrollen im Bühnenkörper überhaupt greifen KANN, muss die Kette darüber begrenzt sein: `section.buehne` trägt sonst `min-height:900px` und wächst mit ihrem Inhalt einfach weiter (gemessen: 1903 px, und die Seite selbst blättert statt zu scrollen — der letzte Umschlag war unerreichbar). */ .buehne.aktiv:has(.buchwand){max-height:100dvh; overflow:hidden} .buehne.aktiv:has(.buchwand) > .feld.fuellt{min-height:0} .feld.fuellt > .zone-buehne:has(.buchwand){overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0} .feld.fuellt > .zone-buehne:has(.buchwand) .buchwand{flex:0 0 auto; max-height:none; overflow-y:visible} } /* Ein nativer view-Ausschnitt kann höher sein als der Schirm — auf dem Telefon regelmäßig (gemessen 11.08.2026: die Social-Kachel braucht dort 3300 px). Die Story-Bühnen scrollen nicht, sie blättern; ohne diese Regel war der untere Teil schlicht NICHT ERREICHBAR — derselbe Fehler wie bei den Umschlagreihen. Also darf der Bühnenkörper einer füllenden Rahmenbühne scrollen, wenn ihr Inhalt überläuft. Die Kette darüber muss dafür begrenzt sein, sonst wächst sie einfach weiter und das Scrollen greift nie. */ @media (max-width:820px){ .buehne.aktiv:has(.feld.fuellt .flexinhalt){max-height:100dvh; overflow:hidden} .buehne.aktiv:has(.feld.fuellt .flexinhalt) > .feld.fuellt{min-height:0} .feld.fuellt > .zone-buehne:has(.flexinhalt){overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0} } /* ═══════════════════════════════════════════════════════════════════════════════ Videothek hell (Dieter 11.08.2026: „ebenfalls Farbanpassung bitte — Hintergrund hell, Schrift dunkel") ═══════════════════════════════════════════════════════════════════════════════ Der dunkle Block stammt aus der Zeit, als die Medien-Bühnen die Originale von tv./radio.omaneo.de nachbauten („nehmen wir den dunklen Bereich", 10.08.). Für die Videothek gilt jetzt der helle Raum der Erzählung. Radio und Fernsehen behalten ihren dunklen Hero — dort ist er das Original und von Dieter so gewollt; deshalb hängt die Umfärbung an der Bühne, nicht an der Klasse. */ /* ⛔ Hier standen acht ELTERNSELEKTOREN (`.buehne:has(.vgrid) …`). Sie machten den gewünschten hellen Zustand von einer Bedingung abhängig — greift `:has()` nicht (alte Browser, Dieters Fernseher; am 16.08.2026 auch einmal in einer WebKit-Aufnahme des Sichtlaufs), fiel der Block auf den DUNKLEN Grundzustand zurück: schwarzes Panel, helle Schrift, eine völlig andere Bühne. Was so aussehen SOLL, hängt jetzt an einer Klasse (`medien-hell`, gesetzt in `seiten_bauen.py`), nicht an einer Frage ans Elternteil. */ .medien-hell{background:#FFFFFF; color:#1A1A1A; border:1px solid var(--linie,#E4DBCC)} .medien-hell h2{color:#1A1A1A} .medien-hell .lead{color:#6B6560} .medien-hell .live-pill{color:#6B6560; background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12)} .medien-hell .vk{color:#1A1A1A; background:#F8F6F3; border-color:#E4DBCC} .medien-hell .vk b{color:#1A1A1A} .medien-hell .vk span:last-child{color:#6B6560} .medien-hell .vk-badge{color:#9B7A4A; background:rgba(155,122,74,.10); border-color:rgba(155,122,74,.28)} /* Das Podcast-Feld auf der Podcast-Bühne (Dieter 11.08.2026): ein schlichter Spieler zwischen den drei Kacheln und den Knöpfen. Die Folge kommt zur Laufzeit aus `podcast.json` — deshalb steht hier nur die Form, kein Titel. */ .podfeld{margin:clamp(12px,2dvh,20px) 0 clamp(10px,1.6dvh,16px)} .podfeld .pod-titel{font-family:var(--font-head); font-weight:400; margin:0 0 .5em; font-size:clamp(15px,1.25vw,19px); color:var(--ton-schrift,#1A1A1A); opacity:.88} .podfeld audio{width:100%; max-width:640px; display:block} /* ═══════════════════════════════════════════════════════════════════════════════ Das Buchblatt — die Schaufensterseite eines Werks in einem Fenster ═══════════════════════════════════════════════════════════════════════════════ Dieter 11.08.2026: Klick auf einen Umschlag öffnet die epubli-Seite des Buches. Der Ausschnitt liegt bei uns (tools/buchseiten_ernten.mjs) und wird hier in der Schrift der Erzählung gesetzt — nicht in der des Anbieters. */ .bw-knopf{display:block; padding:0; border:0; background:none; cursor:pointer; width:100%; border-radius:3px; transition:transform .18s, box-shadow .18s} .bw-knopf:hover,.bw-knopf:focus-visible{transform:translateY(-3px)} .bw-knopf:focus-visible{outline:2px solid var(--accent,#9B7A4A); outline-offset:3px} .buchblatt{border:0; padding:0; border-radius:14px; max-width:min(720px,92vw); width:min(720px,92vw); max-height:86dvh; background:#FFFFFF; color:#1A1A1A; box-shadow:0 24px 70px rgba(0,0,0,.28); overflow:hidden} .buchblatt::backdrop{background:rgba(26,26,26,.55)} .buchblatt .bb-zu{position:absolute; top:10px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid #E4DBCC; background:#FFFFFF; color:#1A1A1A; font-size:19px; line-height:1; cursor:pointer} .buchblatt .bb-zu:hover{background:#7D6038; color:#FFFFFF; border-color:#7D6038} .bb-inhalt{padding:clamp(22px,3.2vw,38px); overflow:auto; max-height:86dvh} .bb-inhalt h2{font-family:var(--font-head); font-weight:400; font-size:clamp(21px,2.4vw,30px); margin:0 0 .25em; color:#1A1A1A} .bb-inhalt h3{font-family:var(--font-head); font-weight:400; font-size:clamp(15px,1.5vw,18px); margin:1.3em 0 .3em; color:#7D6038} .bb-inhalt p{margin:0 0 .7em; line-height:1.62; color:#3A342E; font-size:clamp(14px,1.05vw,16px)} .bb-inhalt .bb-laedt{color:#6B6560; font-style:italic} /* Der Radiobereich ist dunkel — dort braucht die Marke die HELLE Ausprägung, sonst steht sie mit 4,3 unter dem Lesbarkeitsmaß (gemessen 12.08.2026 mit tools/farbpruefer.mjs). Umgekehrt zur hellen Fassung der Reise-Seiten: dort musste dasselbe Bronze dunkler. */ .medien-dunkel .rk-lab{color:#C9A46A} .medien-dunkel .rk-kanal{color:#EDE4D5} /* ═══════════════════════════════════════════════════════════════════════════════ Die Brücke zwischen Auslöser und Klappe (Dieter 12.08.2026) ═══════════════════════════════════════════════════════════════════════════════ *„Ich fahre mit der Maus über einen Haupttitel, da klappt das Untermenü auf. Ich versuche mit der Maus nach unten zu fahren — dann klappt das Menü wieder zu."* Die Klappe hängt fünf Pixel unter der Leiste. Dieser Streifen gehörte niemandem: Sobald der Zeiger ihn berührte, war er weder auf dem Auslöser noch in der Klappe, das Überfahren erlosch und die Klappe schloss. Das ist genau der Fall, den R-93 „lückenlose Trefferfläche" nennt. ⚑ Bis heute Nacht war der Mangel verdeckt: Die geschlossenen Klappen nahmen selbst dann Zeigerereignisse an, wenn sie unsichtbar waren — sie hielten das Menü offen und legten sich zugleich über die halbe Bühne (daran scheiterte der Radio-Startknopf am Telefon). Das eine zu beheben hat das andere sichtbar gemacht; beides gehört zusammen. Die Brücke ist unsichtbar, liegt genau in der Lücke und nimmt den Zeiger nur an, solange die Klappe wirklich offen ist. Dazu eine kurze Nachlaufzeit beim Schließen — eine Hand ist nicht so schnell wie ein Zeigerereignis. */ .hauptpunkt > .klappe::before{ /* Die Brücke greift bewusst ÜBER die Klappenbreite hinaus nach links und rechts: Der Auslöser ist bei den Zeichen-Punkten (Haus, Zufall, Ton) nur gut dreißig Pixel breit, die Klappe darunter fast dreimal so breit — wer schräg nach unten fährt, verlässt den Auslöser seitlich, bevor die Klappe beginnt (gemessen: Auslöser 83…116, Klappe 83…169). Ein großzügiger Streifen fängt genau diesen Weg. */ content:""; position:absolute; left:-24px; right:-24px; top:-14px; height:16px; } .hauptleiste.dock .hauptpunkt > .klappe::before{ top:-14px; bottom:auto } /* Nachlauf: Die Klappe bleibt einen Moment stehen, wenn der Zeiger sie verlässt. Beim Aufklappen greift sie sofort — Warten beim Öffnen wäre lästig, Warten beim Schließen hilft. */ /* Der Nachlauf braucht eine Übergangsliste, die `visibility` einschließt — sonst springt die Sichtbarkeit ohne Verzögerung um und die Klappe ist weg, ehe die Hand ankommt. */ .klappe{ transition-property:opacity, visibility, transform; transition-duration:.16s; transition-delay:.28s } .hauptpunkt:hover > .klappe, .hauptpunkt:focus-within > .klappe, .hauptpunkt.offen > .klappe{ transition-delay:0s } /* ═══ Der Riegel gegen die unsichtbare Falle (12.08.2026) ══════════════════════ Eine Klappe mit `visibility:hidden` ist nicht trefferbar — ihre Kinder aber schon, sobald sie die Sichtbarkeit selbst setzen. Genau das legte die 912 px hohe Klappe „Sonstiges" über die halbe Bühne und machte den Radio-Startknopf unerreichbar (Dieter 11.08.2026). Erben die Kinder die Sichtbarkeit, verschwindet die Falle — ohne den Zirkel, den ein `pointer-events:none` auf der Klappe erzeugt hätte. */ .klappe *, .klappe-zweig * { visibility:inherit } .hauptpunkt:hover > .klappe *, .hauptpunkt:focus-within > .klappe *, .hauptpunkt.offen > .klappe *, .klappe-punkt.offen > .klappe-zweig * { visibility:visible } /* ⚑ DIE eigentliche Ursache (16.08.2026, gemessen). Die Zeile darüber macht ALLE Kinder einer offenen Klappe sichtbar — und dazu gehören auch die **geschlossenen Zweige** der anderen Punkte. Sie liegen unsichtbar an derselben Stelle wie der offene Zweig, fangen aber jeden Klick ab: Über dem Videothek-Zweig lagen ab Zeile drei die Punkte von „Über uns" (》Werkzeuge《, 》Publikationen《 …), obwohl niemand sie geöffnet hatte. Genau das meinte Dieters *„kommt sich ins Gehege"*. Ein Zweig ist deshalb erst dann sichtbar und trefferbar, wenn SEIN Punkt offen ist. */ .klappe-punkt:not(.offen) > .klappe-zweig, .klappe-punkt:not(.offen) > .klappe-zweig *{ visibility:hidden; opacity:0; pointer-events:none; } /* ── Zweite Ebene offen: die Nachbarn der obersten Reihe halten still ──────────────────── Dieter 16.08.2026: *„Sonstiges › Videothek geht nur zwei Zeilen tief und kommt sich dann ins Gehege mit ‚Wir über uns'."* Genau so war es, und zwar ab der DRITTEN Zeile: Der Videothek-Zweig ist neun Punkte hoch; über seinen Zeilen 3 bis 9 lagen die Punkte der Nachbarklappe (》Wer wir sind《, 》Newsletter《, 》Werkzeuge《 …) und fingen jeden Klick ab. Gemessen mit `elementFromPoint` über jede Zeile des Zweigs. ⚠ Warum die naheliegende Regel NICHT reichte: Den Nachbar-Container auf `visibility:hidden` zu setzen, macht ihn unsichtbar — seine KINDER holen sich die Sichtbarkeit aber eine Zeile weiter oben zurück (`.hauptpunkt:hover > .klappe *`), und ein sichtbares Kind fängt Klicks. Deshalb steht diese Regel HINTER jener, nennt die Kinder ausdrücklich und nimmt ihnen zusätzlich die Trefferbarkeit. `.haelt` trägt der Punkt, an dem der offene Zweig hängt — er behält seine Klappe, sonst zöge er sich den Boden unter den Füßen weg. */ /* Die Auswahl steht in EINER Bedingung, ohne Takt und ohne Klasse: Ist irgendwo in der Leiste ein Zweig offen (`:has(.klappe-punkt.offen)`), dann schweigen die Klappen ALLER Hauptpunkte, die diesen Zweig nicht selbst tragen. Der erste Anlauf setzte die Marken per Zeitgeber (alle 120 ms) — und traf damit Fenster, in denen die tragende Klappe schon versteckt, aber noch nicht als tragend erkannt war: Der Zweig verschwand komplett hinter der Bühne. Eine Bedingung, die der Browser selbst auswertet, kennt diese Lücke nicht. */ .hauptleiste:has(.klappe-punkt.offen) .hauptpunkt:not(:has(.klappe-punkt.offen)) > .klappe, .hauptleiste:has(.klappe-punkt.offen) .hauptpunkt:not(:has(.klappe-punkt.offen)):hover > .klappe, .hauptleiste:has(.klappe-punkt.offen) .hauptpunkt:not(:has(.klappe-punkt.offen)):focus-within > .klappe, .hauptleiste:has(.klappe-punkt.offen) .hauptpunkt:not(:has(.klappe-punkt.offen)) > .klappe *, .hauptleiste:has(.klappe-punkt.offen) .hauptpunkt:not(:has(.klappe-punkt.offen)):hover > .klappe *{ visibility:hidden; opacity:0; pointer-events:none; } /* ⚑ BERICHTIGT 12.08.2026 (Dieter: „Mausfahrt Sonstiges → Musik → über ‚Die Reise' zu ‚Alben' öffnet Über uns → Wer wir sind"). Die Regel darüber machte ALLE Nachkommen einer offenen Klappe sichtbar — also auch die ZWEIGE der zweiten Ebene, die zugeklappt bleiben sollten. Gemessen: Beim bloßen Überfahren von „Sonstiges" standen vier Zweige gleichzeitig offen (Videothek, Musik, Über uns, Bücher); sie lagen übereinander, und der Zeiger landete im falschen. Ein Zweig richtet sich deshalb wieder allein nach SEINEM Punkt. */ .hauptpunkt:hover > .klappe .klappe-zweig, .hauptpunkt:focus-within > .klappe .klappe-zweig, .hauptpunkt.offen > .klappe .klappe-zweig { visibility:hidden } /* ⚠ Die Regel darüber schließt ALLE Zweige einer offenen Klappe — sie muss also für den EINEN Zweig, über dem der Zeiger gerade steht, wieder aufgehoben werden. Dafür braucht sie dasselbe Gewicht: der volle Weg vom Hauptpunkt herunter. Mit der kürzeren Schreibweise blieb der Zweig zu, und der Klick landete auf dem, was sichtbar darunter lag — bei Dieters Weg „Musik → Die Alben" war das „Über uns → Wer wir sind" (gemessen 12.08.2026). */ .hauptpunkt:hover > .klappe .klappe-punkt:focus-within > .klappe-zweig, .hauptpunkt:hover > .klappe .klappe-punkt.offen > .klappe-zweig, .hauptpunkt:focus-within > .klappe .klappe-punkt.offen > .klappe-zweig, .hauptpunkt.offen > .klappe .klappe-punkt:focus-within > .klappe-zweig, .hauptpunkt.offen > .klappe .klappe-punkt.offen > .klappe-zweig, .klappe-punkt:focus-within > .klappe-zweig, .klappe-punkt.offen > .klappe-zweig { visibility:visible } .klappe-punkt:focus-within > .klappe-zweig *, .klappe-punkt.offen > .klappe-zweig * { visibility:visible } /* ═══ Zweite Ebene: Öffnen mit Bedacht, Schließen mit Nachlauf (12.08.2026) ═══════ Dieters Weg „Sonstiges → Musik → Die Alben" führt schräg über die Punkte darunter. Öffnete jeder Zweig sofort beim Berühren, riss der bloße DURCHZUG einen fremden auf — gemessen: Auf halbem Weg stand „Über uns" offen, und der Klick landete dort. Also: Ein Zweig öffnet erst, wenn der Zeiger einen Augenblick auf seinem Punkt bleibt (Durchstreifen genügt nicht), und er schließt mit Nachlauf, damit die Hand ihn erreicht. Beim Klapp-Zustand (`.offen`, Touch) gilt keine Verzögerung — dort ist die Absicht klar. */ .klappe-zweig{ transition-property:opacity, visibility, transform; transition-duration:.14s; transition-delay:.34s } .klappe-punkt:focus-within > .klappe-zweig{ transition-delay:.26s } .klappe-punkt.offen > .klappe-zweig{ transition-delay:0s } /* ═══ Die zweite Ebene wechselt die Seite (Dieter 12.08.2026) ══════════════════════ *„Wenn du das nicht anders in den Griff bekommst, musst du die Untermenüs eben abwechselnd links und rechts setzen, um den Konflikt zu vermeiden."* Sein Vorschlag trifft den Kern, und die Messung hat es bestätigt: ALLE Zweige einer Klappe öffneten an derselben Stelle und lagen damit übereinander. Am Punkt (274|157) lag deshalb „Wer wir sind" aus dem Über-uns-Zweig — mitten im geöffneten Musik-Zweig. Kein Zeitfenster und kein sicheres Dreieck kann das heilen: Wer den einen Zweig ansteuert, fährt zwangsläufig über den anderen. Jeder zweite Zweig geht deshalb nach der anderen Seite. Zwei benachbarte Punkte können sich damit nicht mehr überlagern, und der Weg zu einem Eintrag führt über freie Fläche. Das sichere Dreieck bleibt daneben bestehen — es fängt den schrägen Weg ab. */ .hauptpunkt > .klappe > .klappe-punkt.hat-zweig:nth-of-type(odd) > .klappe-zweig{ left:auto; right:calc(100% + 4px); } .hauptpunkt > .klappe > .klappe-punkt.hat-zweig:nth-of-type(even) > .klappe-zweig{ left:calc(100% + 4px); right:auto; } /* Läuft eine der beiden Seiten aus dem Bild, klappt sie zurück — gemessen am Fenster. */ @media (max-width:900px){ .hauptpunkt > .klappe > .klappe-punkt.hat-zweig > .klappe-zweig{ left:auto; right:calc(100% + 4px); } } /* Die kleinen Wegweiser folgen der Seite, auf der es weitergeht (Dieter 12.08.2026). Seit die Zweige abwechselnd links und rechts öffnen, zeigte jeder Pfeil weiter nach rechts — auch dort, wo das Untermenü links aufgeht. Ein Wegweiser, der in die falsche Richtung deutet, ist schlimmer als keiner. */ .hauptpunkt > .klappe > .klappe-punkt.hat-zweig:nth-of-type(odd) > .mp::after{ content:"‹"; float:left; margin-left:0; margin-right:.6em; } .hauptpunkt > .klappe > .klappe-punkt.hat-zweig:nth-of-type(odd) > .mp{ padding-right:.7em; padding-left:1.4em; } .hauptpunkt > .klappe > .klappe-punkt.hat-zweig:nth-of-type(even) > .mp::after{ content:"›"; float:right; margin-left:.6em; margin-right:0; } @media (max-width:900px){ /* Schmal öffnen alle nach links — dann zeigen auch alle Pfeile dorthin. */ .hauptpunkt > .klappe > .klappe-punkt.hat-zweig > .mp::after{ content:"‹"; float:left; margin-left:0; margin-right:.6em; } .hauptpunkt > .klappe > .klappe-punkt.hat-zweig > .mp{ padding-right:.7em; padding-left:1.4em } } /* ── In der Handy-App läuft dieselbe Seite, aber ohne Rückweg (Dieter 12.08.2026) ────────── *„die inhalte der neuen webseite — OHNE MÖGLICHKEIT ZUM WECHSEL AUF DIE ALTE — unter web mit einbauen."* Die App ruft die Seite mit `?app=1`; `buehne.js` setzt daraufhin das Merkmal `data-app` an das Dokument. Hier wird nur ausgeblendet, was in der App keinen Sinn ergibt: der Verweis auf die klassische Webseite. Alles andere bleibt, wie es ist — eine Seite, zwei Orte, kein zweiter Bauweg (Prinzip 2). */ html[data-app] .hauptpunkt.hinaus{display:none} /* Angebotspreis: der reguläre Preis steht durchgestrichen und zurückgenommen davor — dieselbe Sprache wie im Laden, damit die Ersparnis ohne Erklärung sichtbar ist (13.08.2026). */ /* Der durchgestrichene Regulaerpreis darf blasser sein als der gueltige, aber nicht unleserlich: gedaempfte Textfarbe statt halber Deckkraft (4,7:1 statt rund 2:1). */ .ware em s.vorher{ color:var(--muted); opacity:1; font-weight:400; font-size:.85em; margin-right:.4em; text-decoration-thickness:1px } /* ── Partnerfilm auf der Rösterei-Bühne (13.08.2026) ────────────────────────── Der Film gehört dem Partner und läuft auf YouTube. Eingebettet wird er NICHT: ein iframe nähme beim Laden Kontakt zu Google auf, ohne dass jemand geklickt hat. Gezeigt wird ein Standbild aus dem eigenen Haus, der Klick führt hinaus. */ .partnerfilm{position:relative; display:block; margin:var(--space-4) auto var(--space-3); padding:0; border:0; font:inherit; cursor:pointer; width:100%; max-width:min(46ch,100%); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.08); text-decoration:none; color:inherit; background:var(--surface)} .partnerfilm img{display:block; width:100%; height:auto} .partnerfilm .pf-los{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none} .partnerfilm .pf-zeile{display:block; padding:.5rem .7rem; font-size:.8rem; color:var(--muted); background:var(--bg)} .partnerfilm:hover{box-shadow:0 4px 16px rgba(0,0,0,.14)} .partnerfilm:hover .pf-zeile{color:var(--text)} .partnerfilm:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* Nach dem Klick steht der Player an derselben Stelle — gleiche Kachel, gleiches Seitenmaß, damit die Bühne beim Abspielen nicht springt. */ /* ⚠ Der Film ist im KINOFORMAT 2,37:1 (gemessen 1280 × 540), nicht 16:9. Ein 16:9-Rahmen legt schwarze Balken an — genau das war Dieters Befund am 13.08.2026. */ .partnerfilm.laeuft{cursor:default; aspect-ratio:64/27; background:#000} .partnerfilm.eigen{margin:var(--space-4) auto var(--space-3); max-width:min(46ch,100%); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.08); background:var(--surface)} .partnerfilm.eigen .pf-video{display:block; width:100%; aspect-ratio:64/27; background:#000} /* ⚠ 13.08.2026 (Dieter: „das inline abspielende Video hat das falsche Format"): Eine prozentuale HÖHE greift nicht, wenn die Höhe des Elternteils selbst erst aus `aspect-ratio` entsteht — gemessen kam der Player auf 528 × 150 statt 528 × 297, also 3,5:1 statt 16:9. Deshalb füllt das Fenster den Rahmen ABSOLUT aus. */ /* ⚠ Und die zweite Hälfte desselben Fehlers: `height:100%` LÄSST ein iframe auf seine Eigenhöhe von 150 px zurückfallen, selbst absolut positioniert — dieselbe Falle, die weiter unten für die Inhaltsrahmen schon beschrieben ist (gemessen 09.08.2026). Der erprobte Weg im Haus ist Flex: der Rahmen ist die Spalte, das Fenster ihr wachsendes Glied mit `height:auto`. */ .partnerfilm.laeuft{display:flex; flex-direction:column} .partnerfilm.laeuft iframe{flex:1 1 auto; min-height:0; height:auto; width:100%; display:block; border:0} /* Ein Ziel innerhalb einer Kachel (Dieter 14.08.2026): „Shop" und „Fanartikel" in der Kaufen-Kachel führen direkt in die Läden. Sie sind keine echten Verweise (verschachtelte Verweise sind ungültig), sollen aber wie welche aussehen und sich anfassen lassen. */ .weg-knopf [data-extern]{text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px; cursor:pointer; color:var(--accent, #9B7A4A)} .weg-knopf [data-extern]:hover, .weg-knopf [data-extern]:focus-visible{ text-decoration-thickness:2px; outline:none} /* Der eingebettete Fernseh-Bereich behält die Höhe seines Inhalts (Dieter 14.08.2026). Ohne diesen Deckel zieht `feld.fuellt` den Rahmen auf die volle Bühnenhöhe, und unter dem Hero der eingebetteten Seite steht ein schwarzer Streifen — gemessen 243 px. */ /* Höhe = die des eingebetteten Inhalts, gemessen statt geraten: Der Hero der TV-Seite ist 404 px hoch (min-height 400 + Rand). Ein größerer Kasten erzeugt unten wieder einen schwarzen Streifen, ein kleinerer schneidet den Hinweistext ab. */ /* ⚑ Gleichheit im Medienbereich (Dieter 14.08.2026): *„entweder Radio auch in die Mitte runter oder Fernsehen nach oben — den Gleichheitsgedanken vorantreiben."* Radio und Videothek beginnen oben unter der Kopfzeile (Radio-Block gemessen: y=55, Höhe 403). Also steht auch der Fernsehkasten oben — nicht mittig; damit sitzen alle drei Medien-Bühnen auf derselben Kante. */ /* 410 px wiederhergestellt (Dieter am Telefon 14.08.: „der obere dunkle Fernsehblock ist kastriert worden, das muss rückgängig gemacht werden"). Platz für die Zeichnung kommt jetzt aus dem flacheren Blatt, nicht aus der Kachel. */ /* 410 → 385 px: die letzten 25 px, damit die Zeichnung samt Signatur ins Bild passt. (Nicht mehr — der dunkle Block soll wuchtig bleiben, Dieter 14.08.) */ .feld.fuellt .inhaltsrahmen.tv-rahmen{flex:0 0 auto; height:385px; max-height:100%} .inhaltsrahmen.tv-rahmen iframe{height:100%} /* ── Zeichnung unter den Radio-Playern ──────────────────────────────────────── Dieter 14.08.2026: eine Bleistiftzeichnung als Breitbild unter der Kachel mit den Playern. Sie soll die Seite ergänzen, nicht sprengen: Höhe gedeckelt, damit die Bühne EIN Bildschirm bleibt (BAUPLAN), Breite am Satzspiegel, Ecken wie bei den übrigen Karten. */ .radio-zeichnung{ /* Volle Spaltenbreite wie die Kachel darüber (Dieter am Telefon, 14.08.2026). Weil das Blatt seitlich verbreitert wurde, bleibt es dabei flach genug — und die Signatur sitzt am rechten BILDrand, der jetzt zugleich der Spaltenrand ist. */ margin:clamp(.6rem,1.6dvh,1.2rem) 0 0; width:100%; } /* ⚑ Vierte und geltende Fassung (Dieter 14.08.2026): *„die Menschen sind geköpft — sowas finde ich nicht schön."* Der Grund war der Beschnitt: Das Bild lief formatfüllend über die volle Breite und wurde dafür oben und unten abgeschnitten — genau dort sind Köpfe und Füße. Jetzt liegen die Zeichnungen bereits als BAND vor (rund 2 : 1, Figuren vollständig), und die Seite zeigt sie **ungeschnitten** über die volle Breite. Die Signatur steht darunter am rechten Rand (Dieter, gleicher Abend) — sie ist kein Bildbestandteil und kann so nicht verlorengehen. */ .radio-zeichnung > picture img{ /* Deckel für kleinere Schirme: Bei 1280 × 800 lief die Signatur sonst unter die Kante (gemessen). Verhältnistreu, also ohne jeden Beschnitt. */ /* Dieter 14.08.2026: „um 20 % vergrößern und rechts wie links etwas abschneiden, um auf die Breite der darüberliegenden Kachel zu kommen, und das Höhenwachstum beibehalten." Genau so liegt das Bild jetzt vor (Verhältnis 3,35 : 1, Inhalt 20 % näher) — die Seite zeigt es über die VOLLE Breite; der Deckel greift nur auf flachen Schirmen. */ /* Volle Kachelbreite UND nichts beschnitten: Das Bild bringt sein Verhältnis mit (3 : 1), die Seite gibt ihm die Breite und lässt die Höhe wachsen. Nur auf flachen Schirmen greift ein Deckel — dort wird verkleinert, nicht beschnitten (Dieter 14.08.2026: „du hast auch die Höhe beschnitten — warum?"). */ display:block; width:100%; max-width:100%; height:auto; border-radius:14px; border:1px solid var(--border); } @media (max-height:880px){ .radio-zeichnung > picture img{ max-height:30dvh; object-fit:contain; } } .zeichnung-signatur{ display:flex; justify-content:flex-end; width:100%; align-self:stretch; margin:.35rem 0 0; padding-right:.2rem; } .zeichnung-signatur img{ width:clamp(96px,11vw,150px); height:auto; opacity:.9; display:block; margin:0; } /* Der Weg zur klassischen Webseite rückt ganz nach rechts (Dieter 14.08.2026: „schiebe zur klassischen Webseite weiter nach rechts") — er ist der Ausgang, nicht ein Punkt unter vielen. */ /* `margin-left:auto` allein wirkt hier NICHT: Das Dock ist so breit wie sein Inhalt, es gibt also keinen freien Platz zu verteilen. Ein echter Abstand schiebt sichtbar. */ .hauptleiste.dock .hauptpunkt.hinaus{ margin-left:clamp(12px,3vw,44px) } /* ── Der Assistent als eigene Klappe unter der Menüleiste (Dieter 14.08.2026) ───────────── Er beginnt an der Leiste und klappt nach unten auf — wie die Bereichsmenüs, nur breiter und mit Verlauf und Eingabezeile. Der runde Knopf des alten Widgets kommt hier NICHT vor. */ .hauptpunkt.assistent{ position:relative } .klappe-bot{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:min(420px, 92vw); max-height:min(60dvh, 520px); display:none; flex-direction:column; gap:8px; padding:12px; background:var(--bg,#fff); border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px rgba(26,26,26,.18); z-index:70; text-align:left; } .klappe-bot[data-offen="1"]{ display:flex } /* ⚑ BERICHTIGT 15.08.2026 (Dieter): *„die schrift des bots ist auf den ersten blick erkennbar größer als die der buttons"*. Er hatte recht, und die Zahlen sagen, wie deutlich: Der Knopf der Menüleiste steht bei 11,52 px, der Bot-Satz stand bei 14 px (+22 %), der Kopf bei 15,2 px (+32 %). Gemeint ist die Leiste, an der die Klappe hängt — also gilt jetzt durchgehend `--dock-schrift` = .72rem, dieselbe Größe wie `.hauptleiste.dock … .hp`. Der frühere Kommentar nannte 16,88 px als Bezug; das war der Fließtext IN den Kacheln, nicht der Knopf — und getroffen wurde ohnehin keiner von beiden. */ .klappe-bot{ --dock-schrift:.72rem } /* Kopf der Assistenten-Klappe: Beschriftung links, „neu anfangen" rechts. Der Knopf ist zurückhaltend — er soll auffindbar sein, aber nicht mit dem Absenden konkurrieren. */ .bot-kopf{ font-family:var(--font); font-size:var(--dock-schrift); font-weight:600; line-height:1.4; color:var(--text); display:flex; align-items:center; gap:8px; justify-content:space-between } .bot-neu{ flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(26,26,26,.16); border-radius:50%; background:transparent; color:var(--muted,#6B6560); cursor:pointer; padding:0; transition:color .12s, border-color .12s, transform .12s } .bot-neu:hover{ color:var(--accent); border-color:var(--accent); transform:rotate(-40deg) } .bot-neu:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } /* Sichtbare Wirkung des Klicks — auch dann, wenn es gar nichts zu löschen gab. */ .bot-neu.gedreht{ animation:bot-neu-dreh .5s ease } @keyframes bot-neu-dreh{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } } .bot-verlauf.frisch{ animation:bot-frisch .45s ease } @keyframes bot-frisch{ from{ opacity:.15 } to{ opacity:1 } } @media (prefers-reduced-motion:reduce){ .bot-neu.gedreht{ animation:none } .bot-verlauf.frisch{ animation:none } } @media (prefers-reduced-motion:reduce){ .bot-neu:hover{ transform:none } } .bot-verlauf{ overflow:auto; display:flex; flex-direction:column; gap:6px; min-height:60px; max-height:44dvh } .bot-satz{ font-family:var(--font); font-size:var(--dock-schrift); line-height:1.55; padding:8px 10px; border-radius:10px; white-space:pre-wrap } .bot-ich{ align-self:flex-end; background:var(--accent); color:#fff; max-width:85% } .bot-bot{ align-self:flex-start; background:var(--surface-2,#F0EDE8); color:var(--text); max-width:92% } .bot-zeile{ display:flex; gap:6px } .bot-feld{ flex:1; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:10px; font-family:var(--font); font-size:var(--dock-schrift); line-height:1.55; background:#fff; color:var(--text) } .bot-senden{ width:36px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:1rem; line-height:1; cursor:pointer } @media (max-width:820px){ .klappe-bot{ left:auto; right:0; transform:none } } /* (Der Vorlese-Knopf am Bot-Satz ist am 15.08.2026 entfallen — es gilt allein der Ton-Schalter: an heißt vorlesen, aus heißt schweigen. Die Blase bleibt zweispaltig gebaut, damit lange Antworten weiter sauber umbrechen.) */ .bot-bot{ display:flex; align-items:flex-start; gap:8px } /* Der Knopf, den der Assistent anbietet (statt der rohen Steuerzeile im Text) */ .bot-tat{ display:inline-block; margin:6px 0 0; padding:7px 12px; border-radius:9px; background:var(--accent); color:#fff; text-decoration:none; align-self:flex-start; font-family:var(--font); font-size:var(--dock-schrift) } .bot-tat:hover{ background:var(--accent-h,#7D6038) } .bot-verweis{ color:var(--accent); text-decoration:underline; word-break:break-word } /* ══ Kachelstaffelung: ansteigende Bronze-Nuancen in JEDER Kachelgruppe ══════════════════ ANLASS (Dieter 15.08.2026): *„die kacheln der videothek haben alle dieselbe farbe — du hattest gesagt, dass du alle kachelseiten bereits mit ansteigenden farbnuancen bearbeitet hättest — diese offensichtlich nicht. ändern und die anderen seiten auch erneut überprüfen."* Nachgemessen (`tools/kachelfarben_pruefen.mjs`, über alle ausgelieferten Seiten): Von 18 Kachelgruppen waren **15 einfarbig**. Gestaffelt hatten nur zwei Sonderfälle. Die frühere Zusage „alle Kachelseiten bearbeitet" war eine Erinnerung, keine Messung (wb R-49). ACHT Stufen, nicht vier: Die Videothek zeigt acht Kacheln — ein Vierer-Zyklus springt dort nach der Hälfte zurück auf hell, und genau das sieht nicht nach Anstieg aus, sondern nach Bruch. Ab der neunten Kachel beginnt die Leiter von vorn. ⚑ FESTE Farbwerte, kein `color-mix()`. Dieters Fernseher-Browser kennt es nicht, und der freigegebene Altbrowser-Umbau geht in genau diese Richtung: Was sich vorab ausrechnen lässt, wird ausgerechnet. Grundton ist Bronze #9B7A4A (155·122·74). Die laufende Kachel bleibt ausgenommen — ihre Hervorhebung muss stärker bleiben als jede Nuance. */ /* Stufe 1 */ .vgrid .vk:nth-child(8n+1), .medienwahl .medienkachel:nth-child(8n+1), .folgenliste .folge:not(.laeuft):nth-child(8n+1){ background:#FDFCFB } .warenraster:not(.klar) .ware:nth-child(8n+1), .buchwand .bw-stueck:nth-child(8n+1), .i-raster > div:nth-child(8n+1){ background:rgba(155,122,74,.02) } .warenraster.klar .ware:nth-child(8n+1){ background:rgba(255,255,255,.03) } /* Stufe 2 */ .vgrid .vk:nth-child(8n+2), .medienwahl .medienkachel:nth-child(8n+2), .folgenliste .folge:not(.laeuft):nth-child(8n+2){ background:#FBFAF8 } .warenraster:not(.klar) .ware:nth-child(8n+2), .buchwand .bw-stueck:nth-child(8n+2), .i-raster > div:nth-child(8n+2){ background:rgba(155,122,74,.04) } .warenraster.klar .ware:nth-child(8n+2){ background:rgba(255,255,255,.05) } /* Stufe 3 */ .vgrid .vk:nth-child(8n+3), .medienwahl .medienkachel:nth-child(8n+3), .folgenliste .folge:not(.laeuft):nth-child(8n+3){ background:#F9F7F4 } .warenraster:not(.klar) .ware:nth-child(8n+3), .buchwand .bw-stueck:nth-child(8n+3), .i-raster > div:nth-child(8n+3){ background:rgba(155,122,74,.06) } .warenraster.klar .ware:nth-child(8n+3){ background:rgba(255,255,255,.07) } /* Stufe 4 */ .vgrid .vk:nth-child(8n+4), .medienwahl .medienkachel:nth-child(8n+4), .folgenliste .folge:not(.laeuft):nth-child(8n+4){ background:#F7F4F0 } .warenraster:not(.klar) .ware:nth-child(8n+4), .buchwand .bw-stueck:nth-child(8n+4), .i-raster > div:nth-child(8n+4){ background:rgba(155,122,74,.08) } .warenraster.klar .ware:nth-child(8n+4){ background:rgba(255,255,255,.09) } /* Stufe 5 */ .vgrid .vk:nth-child(8n+5), .medienwahl .medienkachel:nth-child(8n+5), .folgenliste .folge:not(.laeuft):nth-child(8n+5){ background:#F5F2ED } .warenraster:not(.klar) .ware:nth-child(8n+5), .buchwand .bw-stueck:nth-child(8n+5), .i-raster > div:nth-child(8n+5){ background:rgba(155,122,74,.10) } .warenraster.klar .ware:nth-child(8n+5){ background:rgba(255,255,255,.11) } /* Stufe 6 */ .vgrid .vk:nth-child(8n+6), .medienwahl .medienkachel:nth-child(8n+6), .folgenliste .folge:not(.laeuft):nth-child(8n+6){ background:#F3EFE9 } .warenraster:not(.klar) .ware:nth-child(8n+6), .buchwand .bw-stueck:nth-child(8n+6), .i-raster > div:nth-child(8n+6){ background:rgba(155,122,74,.12) } .warenraster.klar .ware:nth-child(8n+6){ background:rgba(255,255,255,.13) } /* Stufe 7 */ .vgrid .vk:nth-child(8n+7), .medienwahl .medienkachel:nth-child(8n+7), .folgenliste .folge:not(.laeuft):nth-child(8n+7){ background:#F1ECE6 } .warenraster:not(.klar) .ware:nth-child(8n+7), .buchwand .bw-stueck:nth-child(8n+7), .i-raster > div:nth-child(8n+7){ background:rgba(155,122,74,.14) } .warenraster.klar .ware:nth-child(8n+7){ background:rgba(255,255,255,.15) } /* Stufe 8 */ .vgrid .vk:nth-child(8n+8), .medienwahl .medienkachel:nth-child(8n+8), .folgenliste .folge:not(.laeuft):nth-child(8n+8){ background:#EFEAE2 } .warenraster:not(.klar) .ware:nth-child(8n+8), .buchwand .bw-stueck:nth-child(8n+8), .i-raster > div:nth-child(8n+8){ background:rgba(155,122,74,.16) } .warenraster.klar .ware:nth-child(8n+8){ background:rgba(255,255,255,.17) } /* Der Rundgang: zwischen den Stationen stehen Pfeile, deshalb ungerade Positionen. */ .runde .runde-st:nth-child(1){ background:rgba(155,122,74,.04) } .runde .runde-st:nth-child(3){ background:rgba(155,122,74,.09) } .runde .runde-st:nth-child(5){ background:rgba(155,122,74,.14) } .runde .runde-st:nth-child(7){ background:rgba(155,122,74,.19) } /* ── Ausgeschalteter Ton muss man SEHEN (15.08.2026) ──────────────────────────────────── ANLASS (Dieter): *„willkommensschrift läuft, Avatar schweigt"* — und kurz darauf *„zeigt auch kein Lipsync."* Gemessen war das kein Fehler, sondern der Ton-Schalter: Steht er auf aus, entfällt die Ansage komplett, und mit ihr das Sprech-Video (`spricht()` kehrt sofort zurück). Die Schrift läuft weiter — deshalb sieht es aus wie ein halb kaputter Auftritt. Belegt an der Livesseite: Ton an → 4 Tonabrufe, 4 Lipsync-Abrufe, Figur „spricht lippt"; Ton aus → 0, 0, Figur ohne Klasse. Beide Male lief der Text. Der frühere „Ton einschalten"-Knopf im Fuß bleibt abgeschafft (Dieter 10.08.: „weg damit"). Stattdessen zeigt der vorhandene Schalter seinen Aus-Zustand jetzt deutlich — ein stummer Auftritt soll seinen Grund selbst nennen, statt nach einem Defekt auszusehen. */ #tonSchalter{ display:inline-flex; align-items:center; gap:5px } /* ⚑ NACHGESCHÄRFT 15.08.2026 (Dieter): *„was ist mit dem Tonknopf im Menü und seiner deutlichen Hinterlegung wenn an? Die beiden Zustände sind optisch kaum voneinander zu unterscheiden."* Richtig — die erste Fassung hinterlegte nur den AUS-Zustand; ein weißer Knopf neben einem bronzenen liest sich als „Knopf" und „hervorgehobener Knopf", nicht als zwei Zustände. Jetzt trägt JEDER Zustand seine eigene Fläche und sein eigenes Wort: Ton an = Bronze (die Markenfarbe, ci.md), Ton aus = gedecktes Grau. Zwei Farben, zwei Wörter, zwei Zeichen — auf einen Blick auseinanderzuhalten, auch auf einem Fernseher. */ /* ⛔ 16.08.2026 — DIE FARBIGEN FLÄCHEN SIND WEG (Dieter: *„nimm beim ton toggle die hintergrundfarbe weg"*). Die weiße Pille bleibt, sie tragen alle Zeichen-Knöpfe. Hier standen zwei gefüllte Zustände: Ton an = Bronze #9B7A4A, Ton aus = CI-Schwarz #1A1A1A, beide mit weißer Schrift. Sie waren die Antwort auf seine Meldung vom 15.08. („die beiden Zustände sind optisch kaum voneinander zu unterscheiden") — inzwischen trägt der Knopf aber das Wortpaar (aus›an / an›aus, Ist fett) UND zwei verschiedene Zeichen, und seit der Navigationsleiste ohne Rahmen fiel eine schwarze Pille darin auf wie ein Fremdkörper. Der Knopf sitzt jetzt auf derselben weißen Pille wie Zufall und Weg hinaus (Zeile ~2079); unterschieden wird über Wort, Zeichen und Schriftschnitt. Rückweg: die vier gelöschten Regeln wieder einsetzen. Sicherung: /root/backups/stil.css.bak-20260816-tontoggle */ /* Das Wort steht in BEIDEN Zuständen — eine Beschriftung, die nur im Fehlerfall erscheint, lässt den Normalfall unbenannt und den Knopf beim Umschalten springen. */ /* ⚑ 16.08.2026 (Dieter): *„ton toggle analog zum sprachtoggel würde für mich jetzt auch Großbuchstaben statt kleiner bedeuten"* — dasselbe Schriftbild wie DE›EN, also auch dieselbe Sperrung (.06em); Versalien ohne Sperrung stehen sonst zu eng. */ #tonSchalter .ton-wort{ display:inline; font-size:.66rem; letter-spacing:.06em; line-height:1; white-space:nowrap; font-weight:600 } /* ⚑ 16.08.2026: Hier stand „Ton an" bzw. „Ton aus" — eine reine Ist-Angabe, während der Sprachschalter nur das Ziel nannte. Dieter: *„einfach nur neben dem Symbol die Worte aus›an, an›aus"* — und, nach dem ersten zu breiten Versuch: *„in der Breite könntest du ja bereits einen ganzen Lautstärkeregler unterbringen."* Jetzt steht dort GENAU das Wortpaar, in derselben Schreibweise wie DE›EN: links fett und in Bronze, was IST, rechts mager, wohin ein Klick führt. Die Sprache kommt aus dem lang-Attribut des Dokuments. */ /* ⚠ Der Pfeil steht als CSS-Fluchtzeichen und MUSS mit einem Leerzeichen enden: „\203aaus" verschluckt das a und ergibt ein einziges, fremdes Zeichen (gemessen 16.08.2026: 𠎪us). */ /* Ohne Bronze (Dieter 16.08.2026: „nimm beim Ton-Toggle jetzt bitte auch die Farbe raus"). Der Ist-Zustand bleibt am Fettdruck erkennbar; die Farbe trägt hier ohnehin das Zeichen. */ #tonSchalter .ton-wort::before{ font-weight:800 } #tonSchalter[aria-pressed="true"] .ton-wort::before{ content:"AN" } #tonSchalter[aria-pressed="true"] .ton-wort::after { content:"\203a AUS" } #tonSchalter[aria-pressed="false"] .ton-wort::before{ content:"AUS" } #tonSchalter[aria-pressed="false"] .ton-wort::after { content:"\203a AN" } html[lang="en"] #tonSchalter[aria-pressed="true"] .ton-wort::before{ content:"ON" } html[lang="en"] #tonSchalter[aria-pressed="true"] .ton-wort::after { content:"\203a OFF" } html[lang="en"] #tonSchalter[aria-pressed="false"] .ton-wort::before{ content:"OFF" } html[lang="en"] #tonSchalter[aria-pressed="false"] .ton-wort::after { content:"\203a ON" } #tonSchalter[aria-pressed="false"] .ton-aus path{ stroke-width:2.6 } /* ⚑ 16.08.2026 (Dieter): *„kann das ton icon ein wenig größer und in schwarz daherkommen — so analog zum weltball des sprachtoggels?"* Der Weltball ist genauso 15 Pixel breit, füllt sein Quadrat aber fast ganz aus; der Lautsprecher sitzt mit seinen Wellen darin und wirkt deshalb kleiner. Also zwei Pixel mehr — und die Textfarbe des Hauses statt Bronze, damit beide Zeichen nebeneinander gleich schwer wiegen. Den Zustand trägt weiterhin das Wort (fett = was IST) und das Zeichen selbst (durchgestrichen / mit Wellen). */ #tonSchalter svg{ width:17px; height:17px } .hauptpunkt.tonschalter > .hp, #tonSchalter[aria-pressed="true"]{ color:var(--text) } /* Sprachwahl im Dock (Dieter 15.08.2026: „im menü die sprachwahl unterbringen"). Sie sieht aus wie der Tonschalter — Zeichen plus kurzes Wort —, nur steht hier das Kürzel der LAUFENDEN Sprache am Knopf, damit man ohne Aufklappen sieht, worin man liest. Die Klappe ist dieselbe wie bei den Bereichen; sie braucht kein Skript. */ .sprachwahl .sprach-kuerzel{ display:inline; font-size:.66rem; letter-spacing:.06em; line-height:1; white-space:nowrap; font-weight:600 } .sprachwahl .klappe{ min-width:8.5rem } .sprachwahl .klappe .mp{ text-align:left } /* Der Fokus-Fuß in einer Fremdsprache (Dieter 15.08.2026): An die Stelle von Suchfeld und Zufallsknopf treten drei benannte Verweise — die Suche fände 398 deutsche Folgen. */ .fokus-fuss .fokus-hinweis{ opacity:.72; margin-right:.15rem } /* Sie sehen aus wie die übrigen Fußzeilen-Verweise, sind aber Knöpfe: Sie tauschen den Film im Fenster, statt die Bühne zu verlassen (Dieter 15.08.2026). Deshalb erben sie das Aussehen des Nachbarn `fokus-andere` — gleiche Zeile, gleicher Ton, kein Kasten. */ .fokus-fuss .fokus-produkt{ white-space:nowrap; font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px } .fokus-fuss .fokus-produkt:hover{ color:var(--accent) } .fokus-fuss .fokus-produkt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } /* ── Die vier Bereichsknöpfe: eine feste Breite, in beiden Sprachen dieselbe ────────── Dieter, 16.08.2026: *„gib den Buttons der Navigation dieselbe feste Breite, über Deutsch und Englisch hinweg identisch"* — bezogen auf die Knöpfe eins bis vier. Warum das nötig war, gemessen bei 1440 px: Die Knöpfe richteten sich nach ihrer Beschriftung und waren deshalb in jeder Sprache anders breit — deutsch Lernen 56 · Informieren 81 · Kaufen 58 · Sonstiges 72 englisch Learn 49 · Discover 66 · Buy 40 · More 46 Beim Sprachwechsel sprang damit die halbe Leiste, und schon innerhalb einer Sprache stand nichts untereinander. Der Sprachwechsel mit einem Klick (vom selben Tag) macht das besonders sichtbar: Man bleibt auf derselben Seite, und die Navigation ordnet sich um. `--navbreite` ist mit 92 px so gewählt, dass das längste Wort („Informieren", 81 px inkl. Polsterung) mit Luft hineinpasst — auch wenn der Punkt unter dem Zeiger auf 1,10 wächst. Getroffen werden ausschließlich die vier Bereiche: Sie und nur sie tragen `data-kapitel`. Haus, Ton, Assistent, Sprache und der Weg zur klassischen Seite behalten ihre Eigenbreite — ein Zeichenknopf, der auf Wortbreite gezogen wird, sieht aus wie ein Fehler. */ .hauptleiste{ --navbreite:92px } .hauptleiste .hauptpunkt[data-kapitel] > .hp{ width:var(--navbreite); padding-left:0; padding-right:0; /* die Breite kommt jetzt von width, nicht vom Text */ } /* Im schmalen Fenster greift die kleinere Dock-Schrift — dann darf auch der Knopf schmaler werden, sonst sprengt die Leiste die Zeile. */ @media (max-width:900px){ .hauptleiste{ --navbreite:78px } } @media (max-width:620px){ .hauptleiste{ --navbreite:66px } } /* ── Eine Szene, deren Inhaltsspalte die volle Höhe nimmt ───────────────────────────── Anlass (Dieter, 16.08.2026): *„Newsletter zeigt nicht an, wo doch der letzte Newsletter inhaltlich dargestellt werden soll."* Gemessen im stillen WebKit: Der Kasten war vorhanden, 733 px breit, dreizehn Absätze darin — und **null Pixel hoch**. In beiden Sprachen. Es war also kein Übersetzungsfehler, sondern ein Layoutfehler, der auf Deutsch genauso zuschlug und nur niemandem auffiel. Die Ursache: Der Lauftext rollt mit `position:absolute` und erzeugt darum keine eigene Höhe; `.newsletter-lauf` verlangt `height:100%` von seiner Spalte. Die Szene stellt ihre Kinder aber auf `align-items:center` — und ein zentriertes Rasterkind ist genau so hoch wie sein Inhalt, hier also null. Prozent von null bleibt null. `hoch-fuellend` dreht für diese eine Szene das Ausrichten auf `stretch`: Die Spalte bekommt die Zeilenhöhe, und der Lauf hat, worauf er sich beziehen kann. Die Figur daneben bleibt unberührt, das zweispaltige Raster ebenfalls — anders als bei `.feld.fuellt`, das die ganze Bühne zu einer Spalte macht und für eine Szene MIT Figur deshalb falsch wäre. */ .feld.szene.hoch-fuellend{ align-items:stretch } .feld.szene.hoch-fuellend > .zone-buehne{ display:flex; flex-direction:column; min-height:0; height:100%; } /* ── Ist › Ziel: Sprach- und Tonschalter sprechen dieselbe Sprache (Dieter 16.08.2026) ────── *„Mach das beim Ton auch so wie bei der Sprache: Symbol aus›an — an›aus, wie DE›EN, EN›DE. Und schreibe die Ist-Seite fett und bronze. Beim Ton ändert sich dazu das Icon in Ist."* Vorher war der eine ein Ziel-Schalter (er zeigte nur, wohin) und der andere ein Ist-Schalter (er zeigte nur, was gerade ist) — zwei Bedienelemente nebeneinander, zwei Lesarten. */ /* ⚑ 16.08.2026 — GLEICHHEIT, WO SIE MÖGLICH IST (Dieter: *„einheitlichkeit - gleichheit wo möglich ist eine meiner grundregeln"*). Der Ist-Teil stand hier in Bronze; beim Tonschalter hat Dieter die Farbe am selben Tag ausdrücklich entfernen lassen. Zwei Schalter mit derselben Grammatik dürfen nicht zwei Schriftbilder haben — also trägt auch hier den Zustand allein der Fettdruck. */ .sprachwahl .sprach-kuerzel .ist{ font-weight:800 } .hauptpunkt.tonschalter > .hp{ display:inline-flex; align-items:center; gap:.34em } /* Das vom Skript gezeichnete zweite Kürzel ist entfallen — der Knopf trug damit ZWEI Beschriftungen und wurde fast doppelt so breit wie der Sprachschalter. */ .tonschalter .ton-kuerzel{ display:none!important } /* ── PROBE 16.08.2026: Navigationsleiste ohne den hellen Rahmen ───────────────────────────── Dieter: *„lasse probeweise einmal den hellen Hintergrund-Rahmen um die Navigation weg — ich möchte sehen, ob das vielleicht besser aussieht."* Weggenommen sind Fläche, Linie und Schatten der Leiste; die Knöpfe behalten ihre eigene weiße Pille, damit sie lesbar bleiben und nichts springt. Abstände bleiben, damit die Anordnung dieselbe ist wie vorher — verglichen wird die Wirkung, nicht das Maß. ⏳ Zurücknehmen heißt: diesen Block löschen. Sicherung: /root/backups/stil.css.bak-20260816-toggle */ nav.hauptleiste.dock{ background:transparent; border-color:transparent; box-shadow:none } /* ── Die Probe vom 16.08.2026 ist ZURÜCKGENOMMEN ──────────────────────────────────────────── Hier standen die Bedienelemente der Pfadzeile („‹ Zurück", Häuschen, Pfadstufen, Vorschlag) in derselben weißen Pille wie das Dock — auf Dieters Wunsch probeweise. Sein Urteil nach dem Ansehen: *„fussraum ist mit weißer pille nicht schön - bitte zurücknehmen."* Der Fußraum bleibt also flächenlos; die Probe ist ersatzlos entfernt, nicht auskommentiert (ein auskommentierter Block wird beim nächsten Mal versehentlich wiederbelebt). */ /* ── Der Webshop in der Story (Bühne `kaufen-webshop`) ────────────────────────────────────── Dieter 16.08.2026: *„ohne viel Drumherum, verlinkt unter Kaufen mit Stichwort Webshop."* Die Reiter schalten nur die Adresse des Rahmens um — kein Seitenwechsel, damit Ton-Zustand und Bühne stehen bleiben. Ihre Gestalt ist die des Docks: weiße Pille, feine Linie, dieselbe Rundung; der laufende Reiter trägt die Markenfarbe. */ .shop-reiter-reihe{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 .9rem } .shop-reiter{ font-family:var(--font); font-size:.72rem; letter-spacing:.02em; padding:.34em .8em; min-height:26px; box-sizing:border-box; cursor:pointer; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:9px; box-shadow:0 1px 2px rgba(26,26,26,.05); transition:background .18s ease, border-color .18s ease, color .18s ease } .shop-reiter:hover{ background:color-mix(in srgb, var(--accent) 12%, #fff); border-color:var(--accent) } .shop-reiter.laeuft{ background:var(--accent); border-color:var(--accent-h,#7D6038); color:#fff; font-weight:600 } /* Der Rahmen füllt die verbleibende Höhe der Bühne — die Kachelhöhe bestimmt der Laden selbst (die Regeln dafür stehen in `blende.php`, nicht hier: eine Wahrheit je Sache). */ .shop-blatt{ display:flex; flex-direction:column; min-height:0; height:100% } .shop-rahmen{ flex:1 1 auto; min-height:360px } .shop-rahmen iframe{ width:100%; height:100%; border:0; display:block; background:var(--kapitelton,#fff) } /* ── HANDY: der Laden bekam 150 von 664 px ──────────────────────────────────── Dieter 17.08.2026: *„die shopdarstellung [bildet] nur eine unzureichend sehr kleine höhe ab, also alles wesentliche abschneidet — da hilft auch kein scrollen."* Gemessen (iPhone 13, Safari, `shop-omaneo/tools/handy_shop_messen.mjs`): Rahmen **150 px** hoch bei 664 px Fenster (22,6 %), während der Laden innen **5.264 px** baut — Faktor 35. Ursache: Ab 820 px gilt `.buehne.aktiv{height:auto}` (die Bühne darf am Telefon atmen). Damit hat die Flex-Kette kein Höhenbudget mehr, und ein iframe ohne Budget fällt auf seine **Eigenhöhe von 150 px** zurück — dieselbe Falle, die weiter oben schon einmal beschrieben ist, nur diesmal von der Handy-Regel ausgelöst. Am Telefon ist die richtige Antwort NICHT ein kleines Fenster mit eigenem Rollbalken (Rollen im Rollen ist auf iOS unzuverlässig — der Radversuch kam nachweislich nicht an), sondern: der Rahmen wächst mit seinem Inhalt, und gerollt wird die Seite. Die genaue Höhe setzt `buehne.js` (gleiche Herkunft, also messbar); hier steht das Netz für den Fall, dass das Skript nicht greift. */ @media (max-width:820px){ .shop-blatt{ height:auto; min-height:calc(100dvh - 120px) } .shop-rahmen{ min-height:calc(100dvh - 120px) } .shop-rahmen iframe{ height:auto; min-height:calc(100dvh - 120px) } } /* Verweis auf die Mitschrift einer Kursfolge (19.08.2026) — unten links im Fußraum, in der Schrift der Pfadzeile. Die Bühne selbst bleibt unberührt; der Verweis liegt wie die Pfadzeile fest im Fußraum und nimmt dem Inhalt keinen Platz. */ .buehne.aktiv > .mitschrift{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; font-size:.72rem; letter-spacing:.02em; color:var(--bronze,#9B7A4A); text-decoration:none; opacity:.72; z-index:5; } .buehne.aktiv > .mitschrift:hover{ opacity:1; text-decoration:underline } /* ── Der Blätterknopf unten links (Dieter 19.08.2026) ───────────────────────────────────── *„dieser browser kann nicht in dem mittleren fenster scrollen — ich bräuchte … unten links eine dezente bis unsichtbare schaltfläche die bei klick eine seitenhöhe tiefer scrollt. wenn diese schaltfläche im fuss — also ausserhalb des iframes sein kann, fände ich das gut."* Nachgeschärft am selben Tag: *„wenn der button tiefer — in einer flucht mit dem pfad stehen könnte …"* Also dieselbe Grundlinie wie Pfadzeile (Mitte) und Seitenvorschlag (rechts): gleicher Abstand vom Boden, gleiche feste Zeilenhöhe, Inhalt mittig. Die drei Elemente des Fußraums stehen damit auf EINER Linie. DEZENT, aber treffbar: Das Zeichen steht auf gut einem Fünftel Deckkraft und wird beim Überfahren, beim Antippen und im Tastaturfokus voll sichtbar. Die Trefferfläche darf dabei nicht auf Zeilenhöhe schrumpfen — auf einem Fernseher zielt man mit einem Zeiger, den die Fernbedienung schiebt. Sie wird deshalb über ein unsichtbares Feld (`::before`) auf rund 52 px gebracht, OHNE die Flucht zu stören: Der Knopf selbst bleibt in der Zeile. */ .buehne.aktiv > .blaettern-tiefer{ position:fixed; left:var(--rand); bottom:clamp(10px,2.2dvh,20px); z-index:46; height:1.5em; padding:0; border:0; background:transparent; line-height:1; display:flex; align-items:center; justify-content:flex-start; font-family:var(--font); font-size:.62rem; color:var(--accent); opacity:.22; cursor:pointer; transition:opacity .18s; -webkit-appearance:none; appearance:none; } /* Das unsichtbare Zielfeld — rund 52 px hoch und breit, mittig um das Zeichen. */ .buehne.aktiv > .blaettern-tiefer::before{ content:''; position:absolute; left:-16px; right:-16px; top:-19px; bottom:-19px; } .buehne.aktiv > .blaettern-tiefer .bt-pfeil{ font-size:1.5rem; line-height:1; font-weight:600; /* Der Winkel „⌄" sitzt in vielen Schriften hoch — er wird auf die Mitte gerückt. */ transform:translateY(-.16em); } .buehne.aktiv > .blaettern-tiefer:hover, .buehne.aktiv > .blaettern-tiefer:focus-visible{ opacity:1 } .buehne.aktiv > .blaettern-tiefer:focus-visible{ outline:2px solid var(--accent); outline-offset:4px } /* Am Ende angekommen führt derselbe Knopf zurück an den Anfang — dann zeigt er nach oben. Sonst wäre er unten tot, und wer nur klicken kann, käme nicht mehr zurück. */ .buehne.aktiv > .blaettern-tiefer.am-ende .bt-pfeil{ transform:translateY(.1em) rotate(180deg) } /* Am Telefon rollt die Seite selbst (BAUPLAN §4) — dort stört der Knopf mehr, als er hilft. */ @media (max-width:820px){ .buehne.aktiv > .blaettern-tiefer{ display:none } } /* ⚑ 21.08.2026 (Dieter): Die ENDKARTE der Kaufen-Bühne — nach dem Film treten die neun Kategoriekacheln an seine Stelle, dieselben, mit denen jede Görlitzer-Folge schließt. Das Bild liegt als Ganzes vor; die neun Felder sind unsichtbare Verweise darüber, in Prozent gesetzt, damit sie in jeder Größe sitzen. */ .i-film.zeigt-endkarte video{visibility:hidden} .film-endkarte{position:absolute; inset:0; z-index:3; background:url(bilder/endkarte-kaufen.jpg) center/contain no-repeat, var(--film-grund, #1a1a1a); border-radius:inherit; overflow:hidden} .film-endkarte[hidden]{display:none} .film-endkarte .ek-hinweis{position:absolute; left:0; right:0; top:2.4%; margin:0; text-align:center; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:#EBD9BC; text-shadow:0 1px 3px rgba(0,0,0,.55)} .film-endkarte .ek-feld{position:absolute; display:block; border-radius:8px; text-indent:-9999px; overflow:hidden; outline-offset:2px} .film-endkarte .ek-feld:hover, .film-endkarte .ek-feld:focus-visible{ background:rgba(181,142,84,.22); box-shadow:inset 0 0 0 2px rgba(181,142,84,.75)} .film-endkarte .ek-nochmal{position:absolute; left:50%; bottom:3%; transform:translateX(-50%); border:1px solid rgba(235,217,188,.45); background:rgba(26,26,26,.55); color:#EBD9BC; border-radius:999px; padding:7px 16px; font:inherit; font-size:13px; cursor:pointer} .film-endkarte .ek-nochmal:hover{background:rgba(26,26,26,.75)} /* ⚑ 21.08.2026 (Dieter): „der linke Button 'Mit dieser Seite fortfahren' gerät beim Mouseover rechts in Konflikt mit dem Ton-Toggle — Ton-Toggle und folgende müssen ein paar Punkte nach rechts." Der Fortfahren-Knopf bekommt beim Überfahren einen Rahmen in Akzentfarbe; sein Rand und der weiße Rand des Ton-Schalters standen dabei fast auf Stoß. Zehn Pixel Luft davor schieben Ton-Schalter, Sprachwahl und den Weg zur klassischen Seite gemeinsam nach rechts, ohne eine Breite zu verändern. */ .hauptleiste .hauptpunkt.tonschalter{ margin-left:10px } /* ═══ ABZEICHEN AN DER WARENKACHEL (Dieter 26.08.2026) ═════════════════════════ *„die saskia … soll ein badge erhalten ‚Günstiger Einstieg' … die gudrun bekommt auch nur auf der seite starterset ein badge mit ‚Unsere Empfehlung'."* Es sitzt AN der Kachel, nicht im Bild (R-38) — übersetzbar, vorlesbar, abnehmbar. Die Kachel bekommt dafür `position:relative`; ohne das hinge das Abzeichen an der Seite. */ .warenraster .ware{ position:relative } .ware-abzeichen{ position:absolute; top:.55em; left:.55em; z-index:2; font-style:normal; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1; padding:.42em .7em; border-radius:999px; background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(26,26,26,.18); } /* Die Empfehlung ist die ruhigere von beiden — sie wirbt nicht mit dem Preis. */ .ware-abzeichen.leise{ background:var(--surface-2); color:var(--text) } /* ═══ DIE ZWEI KNÖPFE DER VORHALLE ═════════════════════════════════════════════ Dieter 26.08.2026: *„statt dessen einen zweiten gleich breiten button."* Gleich breit heißt hier: dieselbe Mindestbreite, nicht dieselbe Textlänge — der längere Satz gibt das Maß vor, der kürzere zieht nach. Auf schmalen Fenstern fällt die Mindestbreite weg, sonst bräche die Leiste um. */ /* ⛔ 26.08.2026 (Dieter): *„die beiden anderen buttons brauchen etwas abstand zwischen sich, wenn mouseover sie highlightet überschneiden sie sich leicht."* Die Ursache war nicht der Abstand, sondern das Raster: Die Leiste ist ein Gitter aus FÜNF gleichen Spalten (je rund 216 px bei 1080 px Breite). Zwei Knöpfe mit 19,5 rem Mindestbreite sind aber 312 px breit — sie ragen aus ihren Zellen heraus, und zwischen ihnen blieben gemessene 5 px. Beim Überfahren zieht der Knopf einen Rand in Akzentfarbe; die beiden Ränder standen damit fast auf Stoß. Die Vorhalle trägt nur fünf Elemente und braucht kein Gitter: Sie reiht sie, mit echtem Zwischenraum. Alle anderen Bühnen behalten ihr Gitter. */ /* ⚠ 26.08.2026, nachgebessert (Dieter): „sie brauchten nur 1-2 punkte mehr platz als zu beginn … und du hast gleich 20 daraus gemacht.“ Er hat recht — 22 px waren die Antwort auf das falsche Problem. Das Auffressen kam vom Wachsen (8 %), und das ist seit derselben Runde auf 2 % gedämpft: Bei 190 px breiten Knöpfen sind das noch 1,9 px je Seite. Der Zwischenraum darf deshalb wieder klein sein — 6 px statt der 4 px des Gitters. */ .hauptleiste.nav-index{ display:flex; align-items:center; gap:6px; justify-content:flex-start } /* ⛔ Der eigentliche Grund, warum sich die beiden berührten: Das Dock vergrößert den Punkt unter dem Zeiger um **8 %** (`scale(1.08)`). Bei einem 60-px-Zeichen sind das 5 px, bei einem 312 px breiten Knopf **25 px** — 12,5 auf jeder Seite. Von 14 px Zwischenraum blieben gemessene 2. Für die beiden breiten Knöpfe der Vorhalle genügt eine viel ruhigere Geste; sie sind ohnehin nicht zu übersehen. */ .hauptleiste.nav-index .hauptpunkt.fortfahren:hover, .hauptleiste.nav-index .hauptpunkt.fortfahren:focus-within{ transform:translateY(-2px) scale(1.02); } .hauptleiste.nav-index .hauptpunkt{ flex:0 0 auto } /* Keine feste Mindestbreite mehr — `buehne.js` misst beide und setzt sie auf die größere (Dieter 26.08.2026: gleich breit, aber zur Textbreite passend). Die 19,5 rem von vorher waren 312 px bei 190 px Text. */ .hauptleiste.nav-index .hp-fort{ min-width:0; justify-content:center } @media(max-width:900px){ .hauptleiste.nav-index{ flex-wrap:wrap; gap:6px } .hauptleiste.nav-index .hp-fort{ min-width:0 } } /* ═══ DAS SUCHFELD IN DER HAUPTLEISTE ══════════════════════════════════════════ Dieter 25.08.2026 (Lupe + Volltextsuche), 26.08.2026 (*„das suchfeld popup ersetzen durch ein eingabefeld in der menüzeile hinter dem assistenten-symbol"*). Das Feld steht jetzt OFFEN in der Leiste, mit der Lupe als Zeichen darin. Nur die Vorschlagsliste klappt noch auf — und erst, wenn es etwas zu zeigen gibt. */ .hauptpunkt.suche{ position:relative; display:flex; align-items:center } .hauptpunkt.suche .suchfeld{ display:flex; align-items:center; gap:.4em; padding:.26em .62em; border-radius:999px; border:1px solid var(--border); background:#fff; transition:border-color .18s ease, box-shadow .18s ease, width .22s ease; } .hauptpunkt.suche .such-lupe{ flex:0 0 auto; color:var(--muted); opacity:.85 } .hauptpunkt.suche .such-eingabe{ /* Ruhig schmal, damit die Leiste nicht springt; beim Schreiben wächst es. */ width:8.4rem; max-width:34vw; border:0; outline:0; background:none; padding:0; font:inherit; font-size:.82rem; color:var(--text); transition:width .22s ease; } .hauptpunkt.suche .such-eingabe::placeholder{ color:var(--muted); opacity:.9 } .hauptpunkt.suche .such-eingabe::-webkit-search-cancel-button{ cursor:pointer } .hauptpunkt.suche:focus-within .suchfeld{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(155,122,74,.16); } .hauptpunkt.suche:focus-within .such-eingabe{ width:12.5rem } .hauptpunkt.suche:focus-within .such-lupe{ color:var(--accent); opacity:1 } /* Die Vorschläge hängen unter dem Feld — absolut, damit die Leiste ihre Höhe behält. */ .hauptpunkt.suche .such-treffer{ position:absolute; top:calc(100% + .45rem); right:0; z-index:1000; width:min(22rem, 78vw); list-style:none; margin:0; padding:.3rem; max-height:min(60vh, 26rem); overflow-y:auto; background:#fff; border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.2); } .hauptpunkt.suche .such-treffer[hidden]{ display:none } .hauptpunkt.suche .such-treffer a{ display:flex; gap:.55rem; align-items:baseline; padding:.45rem .55rem; border-radius:7px; text-decoration:none; color:var(--text); font-size:.88rem; } .hauptpunkt.suche .such-treffer a:hover{ background:var(--surface-2) } /* Woher der Treffer kommt, steht davor — Laden und Film führen an ganz verschiedene Orte. */ .hauptpunkt.suche .such-art{ flex:0 0 auto; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); min-width:3.1em; } .hauptpunkt.suche .such-art.art-video{ color:var(--muted) } .hauptpunkt.suche .such-titel{ flex:1 1 auto } /* Verkauft — bei Einzelstücken der Regelfall nach dem Verkauf (Dieter 26.08.2026). Der Treffer bleibt lesbar, aber gedämpft; das Wort steht rechts, damit die Zeile nicht springt. */ .such-treffer li.ist-weg .such-titel{ opacity:.62 } .such-weg{ margin-left:auto; flex:0 0 auto; align-self:center; font-size:.74em; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#6B6560); border:1px solid currentColor; border-radius:999px; padding:.06em .5em; white-space:nowrap } .hauptpunkt.suche .such-leer{ padding:.5rem .6rem; color:var(--muted); font-size:.85rem; font-style:italic; } /* Am Telefon ist die Leiste eng: das Feld schrumpft, die Liste hängt sich links aus. */ @media(max-width:760px){ .hauptpunkt.suche .such-eingabe{ width:5.2rem } .hauptpunkt.suche:focus-within .such-eingabe{ width:9rem } } @media(max-width:640px){ .hauptpunkt.suche .such-treffer{ right:auto; left:0 } } /* ── Das Kontozeichen in der Kopfleiste ───────────────────────────────────────────── ⚑ 26.08.2026 (Dieter): *„da die klassische webseite wegfällt, möchte ich das auth-männchen mit seiner kompletten funktionalität auf der neuen seite, also in bühnen-darstellung, unterbringen. im kopfmenü rechts neben sprachwechsel positioniert."* Es sitzt als LETZTER Punkt der Leiste. Deshalb darf seine Klappe nicht wie alle anderen nach rechts aufgehen — dort ist der Bildschirm zu Ende. Sie wird am rechten Rand des Punktes ausgerichtet. Alles Übrige erbt es von `.hauptpunkt` und `.klappe`: dieselbe Fläche, derselbe Rahmen, dasselbe Aufgehen ohne Skript. */ /* ⛔ 26.08.2026 (Dieter, sofort nach dem Einbau): *„das admin-dropdown unterscheidet sich von den anderen — es ist transparent und dadurch schlecht zu lesen."* Er hatte recht, und die Ursache ist eine, die man nicht sieht, sondern nur nachrechnet: `.klappe` malt ihren Grund als `color-mix(in srgb, var(--hs) 12%, #fff)`. `--hs` setzen aber NUR die Kapitel-Punkte (`[data-kapitel]`) und das Häuschen. Das Kontozeichen ist keines von beiden — also war `--hs` leer, das `color-mix` damit ungültig, und eine ungültige Angabe wirft die GANZE Zeile weg: kein Grund, kein Rahmen-Ton, durchsichtige Klappe über der Bühne. Es fehlte kein Grund, es fehlte eine Variable. Das Häuschen löst dasselbe seit jeher mit `--hs:var(--accent)` — genau das gilt jetzt hier. */ .hauptpunkt.konto{ --hs:var(--accent); --ht:#fff } .hauptpunkt.konto > .klappe{ left:auto; right:0 } /* Der Vorname erscheint nur, wenn wirklich jemand angemeldet ist — sonst stünde neben dem Männchen ein leerer Zwischenraum. */ .konto-name{ display:none } .hauptpunkt.konto.angemeldet .konto-name{ display:inline; margin-left:.4em; font-size:.86em; letter-spacing:.01em; } /* Angemeldet ist ein Zustand, kein Angebot: das Zeichen bekommt einen ruhigen Punkt, damit man auf einen Blick sieht, dass man drin ist — ohne dass die Leiste lauter wird. */ .hauptpunkt.konto.angemeldet > .hp::before{ content:""; position:absolute; top:5px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--accent); } /* Die Ränge des Menüs sind dieselben wie im Kopf der klassischen Seite: gewöhnliche Punkte in Textfarbe, Arbeitsbereiche im Akzent und halbfett, der Ausgang in der Warnfarbe. */ .konto-eintrag.stark{ color:var(--accent); font-weight:600 } .konto-eintrag.weg{ color:var(--danger, #a3342a) } /* ── Ton, Sprache und Konto standen zu hoch ───────────────────────────────────────── ⛔ 26.08.2026 (Dieter): *„die ton- und sprachwechsler stehen 2-3 punkte zu hoch."* Nachgemessen: **2,9 px**. Er hat es auf den Punkt gesehen. DIE URSACHE ist nicht die Höhe der Knöpfe — die ist überall gleich (26 px), Innenabstand und Schriftgröße auch. Sie liegt in der ART ihres Inhalts: Ein `.hp` mit TEXT sitzt in einer Zeilenbox und bringt den Unterlängenraum der Schrift mit; ein `.hp`, das nur ein SVG trägt, sitzt mit dem Zeichen auf der Grundlinie — und rutscht damit um genau diesen Unterlängenraum nach oben. Deshalb standen Haus, Assistent, Ton, Sprache und Konto höher als Lernen · Informieren · Kaufen · … und mehr, obwohl an ihnen nichts anders eingestellt war. Eine Zahl zu ändern hätte den Fehler nur verschoben (und beim nächsten Schriftgrad wieder falsch gemacht). DIE ABHILFE nimmt die Zeilenbox aus dem Spiel: Jeder Leistenpunkt richtet sein Kind selbst mittig aus. Damit hängt die Lage nicht mehr an der Grundlinie einer Schrift, sondern an der Mitte der Leiste — für Text und Zeichen gleichermaßen. ⚠ Die Klappen bleiben davon unberührt: Sie sind `position:absolute`, ein Flex-Elternteil ändert daran nichts. */ .hauptleiste > .hauptpunkt{ display:flex; align-items:center } /* ═══ Die sozialen Kanäle neben dem Einstieg (Startbild) ═══════════════════════════ Dieter 28.08.2026: *„kannst du auf der startseite omaneo.de rechts neben dem button unter dem text ‚Loslegen — …' die social media icons in klein aufreihen — alle verlinkt mit unserer seite dort."* Sie stehen NEBEN dem Knopf, nicht darunter: Der Knopf ist der Weg in die Geschichte, die Zeichen sind das Angebot daneben. Auf schmalen Schirmen bricht die Reihe um — dann liegen sie unter dem Knopf, statt ihn zu quetschen. */ .einstieg-reihe{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.6vw,22px); /* Derselbe Abstand nach oben, den vorher der Knopf allein trug (eine Zeile Luft). */ margin-top:calc(clamp(14px,2.4dvh,30px) + var(--buehnenschrift)); } .einstieg-reihe .einstieg{ margin-top:0 } @media (max-width:820px){ .einstieg-reihe{ margin-top:14px } } .sozialleiste{ display:flex; align-items:center; gap:clamp(6px,.8vw,11px) } .sozialleiste a{ display:inline-flex; line-height:0; border-radius:7px; opacity:.85; transition:opacity .18s ease, transform .18s ease; } .sozialleiste a:hover, .sozialleiste a:focus-visible{ opacity:1; transform:translateY(-1px) } .sozialleiste svg{ display:block; width:clamp(18px,1.5vw,22px); height:auto } /* ═══ Die Signatur des Hauses unter jeder Bühne ════════════════════════════════════ Dieter 28.08.2026: *„nach den inhalten auf den bühnen … auf allen seiten rechtsbündig die omaneo signatur als unterschrift/gütesiegel."* Sie fluchtet mit dem Satzspiegel (`--rand`, dieselbe Breite wie `.feld`) und sitzt an dessen rechter Kante — eine Unterschrift steht rechts unter dem Geschriebenen. Zurückhaltend in der Deckkraft: ein Siegel bestätigt, es ruft nicht. */ .haussignatur{ width:min(var(--feld-max), 100% - var(--rand) * 2); margin-inline:var(--rand) auto; display:flex; justify-content:flex-end; flex:0 0 auto; } .haussignatur img{ width:clamp(70px,6.5vw,104px); height:auto; display:block; opacity:.6; } /* Wo die Bühne wenig Höhe hat, tritt sie weiter zurück, statt Inhalt zu verdrängen. */ @media (max-height:720px){ .haussignatur img{ width:clamp(58px,5vw,80px) } } /* Am Telefon ist jede Zeile teuer (das Startbild reicht dort ohnehin über den Schirm hinaus): Dort bleibt sie ein kleines Siegel und kostet kaum Höhe. */ @media (max-width:520px){ .haussignatur img{ width:62px } } /* ═══ Menüpunkte, die aus dem Haus hinausführen ════════════════════════════════════ Der Zweigkopf „Externe Links" hat keine eigene Bühne — er ist ein Knopf, kein Verweis, sieht aber aus wie jeder andere Menüpunkt (und bleibt fokussierbar, sonst öffnete sich der Zweig für die Tastatur nie). */ .klappe .mp-kopf{ appearance:none; -webkit-appearance:none; background:transparent; border:0; width:100%; text-align:left; cursor:pointer; color:var(--text); } /* Das kleine ↗ sagt: hier endet die Geschichte und ein anderes Haus beginnt. */ .klappe .mp-aus{ margin-left:.45em; opacity:.55; font-size:.85em } /* ⚑ 28.08.2026 — GESCHLOSSENE KLAPPEN KOSTEN AM TELEFON KEINEN PLATZ MEHR. Gemessen beim Einbau des Zweigs „Externe Links": Bei 390 px war das Dokument 359 px höher als der Schirm, obwohl die Bühne exakt einen Bildschirm misst (BAUPLAN §4) — man konnte also in leeren Raum scrollen. Die Ursache lag NICHT an der Bühne: Unter 820 px stehen die Zweige der zweiten Ebene fest ausgeklappt im Fluss (`position:static`, s. o.), und eine verborgene Klappe (`visibility:hidden`) belegt trotzdem ihren Platz. Die Klappe „… und mehr" war dadurch 1.117 px hoch und schob das Dokument auf. Der Fehler bestand vorher schon (live gemessen: 154 px Überschuss); der neue Zweig hätte ihn auf 359 px vergrößert. Also wird er behoben, statt vergrößert: Was zu ist, verschwindet am Telefon ganz aus dem Fluss — geöffnet (`.offen`, gesetzt von `buehne.js` beim Tippen) ist es unverändert da. Nachgemessen: Überschuss 0 statt 359, Menü öffnet weiterhin. ⚠ Nur unter 820 px. Am Zeigergerät bleibt alles, wie es ist — dort öffnet das Überfahren, und ein Wechsel auf `display` würde den weichen Übergang zerschlagen. */ @media (max-width:820px){ .hauptleiste .hauptpunkt:not(.offen):not(:focus-within) > .klappe{ display:none } } /* Zwei Gruppen in der Kanalreihe (Dieter 28.08.2026): oben die sozialen Netze, darunter, wo unsere Musik, Sendungen und Bücher liegen. ⚑ ZWEI ZEILEN, nicht eine: Mit sechzehn Zeichen wurde die Reihe 492 px breit und rutschte neben dem 298 px breiten Knopf aus der Textspalte (733 px) — sie stand dann UNTER ihm, und Dieter wollte sie ausdrücklich DANEBEN. Als zwei Zeilen misst der Block 254 px und steht wieder da, wo er hingehört. Gemessen bei 1440, nicht geschätzt. */ .sozialleiste{ flex-direction:column; align-items:flex-start; gap:clamp(4px,.6vh,8px) } .kanalgruppe{ display:flex; align-items:center; gap:clamp(5px,.65vw,9px); flex-wrap:wrap } /* Die Bildzeichen des Hauses (Spotify, Apple Music, TuneIn, Audible, Kindle, epubli …) sind Marken-Dateien in verschiedenen Formaten — die gemeinsame Rundung und die feste Kantenlänge machen aus ihnen eine Reihe. `contain`, damit kein Logo beschnitten wird (wb: Beschnitt am falschen Ende, sb F-126). */ .sozialleiste .kz-bild{ width:clamp(18px,1.5vw,22px); height:clamp(18px,1.5vw,22px); object-fit:contain; border-radius:5px; background:#fff; display:block; } /* ⚑ 28.08.2026: Der Zweig „Externe Links" trägt 19 Einträge und ist 374 px hoch. Gemessen bei 1280 × 720: Er hängt oben an seinem Punkt (y = 367) und endete bei 741 — die letzten Einträge („Alte Webseite") lagen unter dem Fensterrand und waren nicht erreichbar. Zwei Regeln dagegen, beide nachgemessen: · Ein Zweig blättert notfalls selbst, statt aus dem Bild zu laufen (`overscroll-behavior` hält das Blättern in ihm, damit nicht die Seite darunter wandert). · Die Zweige der UNTEREN Punkte hängen an ihrer Unterkante und wachsen nach oben. Genau dort steht der Platz zur Verfügung — die Klappe öffnet ja selbst schon nach unten. Vier Punkte weit gefasst, damit auch „Bücher" darunterfällt; die oberen bleiben, wie sie sind. */ .klappe-zweig{ max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain } .klappe > .klappe-punkt:nth-last-child(-n+4) > .klappe-zweig{ top:auto; bottom:-4px } /* ═══ Das Osterei — der Herkunftsfilm hinter der Wortmarke (28.08.2026) ════════════ Eine Bühne ohne Figur und ohne Menüpfad: nur der Film, und danach die Endtafel. Die Tafel liegt ÜBER dem Spieler, statt sich auf das letzte Videobild zu verlassen — was ein Browser nach `ended` zeigt, ist von Browser zu Browser verschieden. */ .osterei{ position:relative; width:100%; } .osterei .i-film{ width:100%; } .osterei-tafel{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#f5f1ea; /* der Papierton des Films — kein Aufblitzen */ border-radius:inherit; z-index:2; } /* ⛔ GEMESSENER FEHLER (Dieter, 28.08.2026: „der film zeigt leider nur die schlusskarte und nicht den anfang bis zum schnitt"). Die Tafel trug `hidden` — und war trotzdem da: Das Attribut `hidden` wirkt nur über die Vorgaberegel `[hidden]{display:none}` des Browsers, und die verliert gegen JEDE eigene Regel, die für dieses Element `display` setzt (hier eine Bildregel des Stilblatts, gemessen: `display:block` bei `hidden === true`). Ein Deckel, der von der ersten Sekunde an über dem Film lag. Die Lehre gilt über diesen Fall hinaus: Wo ein Element per `hidden` gesteuert wird, muss der Bauplan das auch sagen — sonst entscheidet die Reihenfolge der Stilregeln. */ .osterei-rueckweg[hidden]{ display:none } /* Der angekündigte Rückweg: so zurückhaltend wie die Pfadzeile, damit er die Tafel nicht stört — aber sichtbar genug, dass der Sprung niemanden überrascht. */ .osterei-rueckweg{ position:absolute; right:.9em; bottom:.7em; z-index:3; margin:0; font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); background:color-mix(in srgb, #f5f1ea 82%, transparent); padding:.35em .6em; border-radius:6px; } /* Der Tonhinweis erscheint nur, wenn der Film stumm anlaufen musste — dort, wo der Blick ohnehin ist: über dem Bild, in der Schrift des Rückwegs. */ .osterei-tonhinweis{ position:absolute; left:50%; transform:translateX(-50%); bottom:.7em; z-index:3; margin:0; font-family:var(--font); font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); background:color-mix(in srgb, #f5f1ea 82%, transparent); padding:.35em .7em; border-radius:6px; pointer-events:none; } .osterei-tonhinweis[hidden]{ display:none } /* ⚑ 29.08.2026 (Dieter: „unter dem film links einen link setzen … und hier gibt es die ganze Geschichte"). Der Verweis auf das Buch steht UNTER dem Film und linksbündig — er gehört nicht ins Bild, sondern darunter: Der Film ist der Anreißer, das Buch die ganze Geschichte. Deshalb auch keine Versalien wie beim Rückweg: Das hier will gelesen und geklickt werden. */ .osterei-buch{ /* ⚑ 29.08.2026, Dieter: „den link … bitte 10 pixel nach rechts verschieben." Zehn Pixel, nicht ein Em: Die Bitte war in Pixeln, und in Pixeln bleibt sie auch im kleinen Fenster zehn Pixel — ein Em wüchse und schrumpfte mit der Schrift. */ margin:.85em 0 0 10px; text-align:left; font-family:var(--font); font-size:.95rem; line-height:1.5; } .osterei-buch a{ color:var(--accent); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; } .osterei-buch a:hover, .osterei-buch a:focus-visible{ text-decoration-thickness:2px } /* Der Vorhang vor einem eingebetteten Rahmen (28.08.2026) — er verdeckt, was der Browser in den ersten Augenblicken eines fremden Dokuments zeigt: mal nichts, mal Weiß, mal den ausgegrauten Rest der vorherigen Seite. `buehne.js` hängt ihn ein und nimmt ihn beim `load` des Rahmens wieder fort (spätestens nach drei Sekunden). */ .inhaltsrahmen{ position:relative } .rahmen-vorhang{ position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--kapitelton, var(--bg)); opacity:1; transition:opacity .35s ease; } .rahmen-vorhang.fort{ opacity:0 }