/* ============================================================ VI by Vigenio – Website-Stil (Apple-Anmutung) Stand 18.09.2026 · erzeugt aus bauen.py, hier gepflegt Grundsatz: viel Weißraum, ruhige Flächen, große Typografie, Tiefe nur durch Licht – keine Effekte um der Effekte willen. ============================================================ */ :root{ --weiss:#ffffff; --grau:#f5f5f7; /* Apple-Sektionsgrau */ --tinte:#1d1d1f; /* Haupttext */ --leise:#6e6e73; /* Sekundärtext */ --linie:#d2d2d7; /* EINE FAMILIE MIT DEM NOTENFALL (Aydin 28.09.2026: „kannst du den blauen farbwert vom notenfall auch für die webseite verwenden, damit das einheitlich ist"). --vi-blau ist der eingetragene Wert aus der Signatur-Optik (D6, DPMA 40 2026 202 294.2): die rechte Hand im Notenfall. Alle drei Werte unten haben denselben Farbton (191°) und dieselbe Sättigung (52 %) – nur die Helligkeit unterscheidet sie. Damit ist es sichtbar EINE Farbe. WARUM NICHT #3da9c1 ÜBERALL: gemessen 2,75:1 auf Weiß. Für Text braucht es 4,5:1, für weiße Schrift DARAUF ebenfalls. Der Wert leuchtet, weil er auf SCHWARZ sitzt – im Notenfall stimmt er deshalb, als Linkfarbe wäre er unlesbar. Also derselbe Ton, abgedunkelt bis er trägt. */ /* ENTSCHEIDUNG AYDIN 28.09.2026: „notenfall blau auf alles auf der webseite". Ein Wert, überall – die Website trägt genau den eingetragenen Ton der Signatur-Optik, ohne Abwandlung. */ --vi-blau:#3da9c1; --akz:#3da9c1; --akz-hell:#3da9c1; /* WAS AUF DEM BLAU STEHT – Aydin 28.09.2026: „lass die schrift weiß in dem blau". Zur Akte, damit es später niemand für ein Versehen hält: Weiß auf #3da9c1 ergibt gemessen 2,75:1. Die WCAG-Schwelle für Fließtext liegt bei 4,5:1, für große Schrift ab 18,5 px fett bzw. 24 px bei 3:1. Getragen wird das Blau hier nur von kurzen, fetten Labels auf Knöpfen und Abzeichen – kein Fließtext. Entschieden ist es bewusst und zugunsten des einheitlichen Auftritts. */ --auf-akz:#ffffff; --schwarz:#000000; --radius:18px; --breit:980px; --schmal:720px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--weiss); color:var(--tinte); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text", "Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif; font-size:17px; line-height:1.5; letter-spacing:-.01em; -webkit-font-smoothing:antialiased; } img{ max-width:100%; height:auto; display:block; } a{ color:var(--akz); text-decoration:none; } a:hover{ text-decoration:underline; } /* ---------- Navigation ---------- */ .nav{ position:sticky; top:0; z-index:100; height:48px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08); } .nav-innen{ max-width:var(--breit); margin:0 auto; height:100%; display:flex; align-items:center; gap:26px; padding:0 22px; } .nav-logo{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--tinte); text-decoration:none; white-space:nowrap; } .nav-logo span{ color:var(--akz); } .nav-links{ display:flex; gap:24px; margin-left:auto; align-items:center; } .nav-links a{ font-size:12px; color:var(--tinte); opacity:.85; text-decoration:none; white-space:nowrap; } .nav-links a:hover{ opacity:1; text-decoration:none; } .nav-links a.jetzt{ color:var(--akz); font-weight:500; opacity:1; } /* Die Warteliste ist das Ziel der Seite, kein Menüpunkt (28.09.2026). Sie trug vorher dieselbe Klasse „jetzt" wie die aktive Seite – zwei Bedeutungen auf einer Klasse, und beide falsch dargestellt. */ .nav-links a.nav-knopf{ background:var(--akz); color:var(--auf-akz); opacity:1; font-weight:500; padding:7px 15px; border-radius:980px; margin-left:4px; } .nav-links a.nav-knopf:hover{ background:var(--tinte); color:#fff; } /* BEFUND 28.09.2026 – hier stand `a:not(.jetzt){ display:none }`. Weil „jetzt" auch an der Warteliste hing, blieb auf jedem Telefon GENAU EIN Link stehen: die Warteliste. Kein Lernpfad, keine Module, kein Katalog, keine Preise. Die Seite hatte auf Mobilgeräten keine Navigation, und niemandem fiel es auf, weil am Schreibtisch alles stimmte. Jetzt bleiben alle Punkte da und die Reihe lässt sich schieben – Mobilgeräte machen das von sich aus richtig. */ @media(max-width:820px){ .nav-links{ gap:16px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .nav-links::-webkit-scrollbar{ display:none; } .nav-innen{ gap:14px; } .nav-links a.nav-knopf{ padding:6px 12px; } } /* BEFUND 13.10.2026 – vierter Menüpunkt, und die Leiste passt nicht mehr. Mit „Spielvarianten" (Aydin, 12.10.) wurde aus drei Punkten vier. Gerechnet bei 12 px Schrift und 16 px Abstand, einschließlich Logo, Rand und Warteliste-Knopf: 3 Punkte, wie bisher 341 px passt auf 375 px 4 Punkte, unverändert 444 px passt NICHT 4 Punkte, enger 389 px passt auf 390 px, nicht auf 375 px Die Reihe schiebt sich seit dem 28.09. waagerecht, und der Scrollbalken ist ausgeblendet – das war für drei Punkte richtig, weil nie etwas außerhalb lag. Jetzt lagen „Preise" und „Warteliste" außerhalb, OHNE JEDES ANZEICHEN DAFÜR. Eine unsichtbare Navigation ist derselbe Fehler wie am 28.09., nur eine Stufe später. ZWEI MASSNAHMEN, weil eine nicht reicht: 1. Enger setzen – damit es auf allen Geräten ab 390 px von selbst passt. 2. Weiche Kante rechts – wo es doch nicht passt, ist zu sehen, dass die Reihe weitergeht. Statisch, ohne JavaScript; der letzte Punkt ist am Ende leicht abgeblendet, und das ist der Preis dafür, dass man überhaupt merkt, dass dort etwas ist. */ @media(max-width:480px){ .nav-logo span{ display:none; } .nav-innen{ padding:0 16px; gap:10px; } .nav-links{ gap:12px; } .nav-links a{ font-size:11px; } .nav-links a.nav-knopf{ padding:6px 10px; } /* Die Kante nur dort, wo wirklich geschoben werden kann: ein Verlauf über die letzten 22 px. -webkit- zuerst für älteres Safari, das `mask-image` ohne Vorsatz nicht kennt. */ .nav-links{ -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); } } /* ---------- Grundbausteine ---------- */ .abschnitt{ padding:88px 22px; } /* ---------- Abstand zwischen gleichfarbigen Abschnitten ---------- BEFUND AYDIN 14.10.2026: „da ist immer recht viel abstand dazwischen". Gemessen: 88 px unten plus 88 px oben = 176 px zwischen je zwei Abschnitten. Wo die Hintergrundfarbe wechselt, ist das richtig – die Fläche braucht Luft, damit der Wechsel als Gliederung wirkt. Wo ZWEI GLEICHE aufeinanderfolgen, sieht man dagegen keine Kante, sondern nur ein Loch. Auf genius-stufe stehen drei graue hintereinander, auf faltbare-handys vier weiße. Deshalb: Folgt ein Abschnitt auf einen gleichfarbigen, entfällt sein oberer Abstand. Der Zwischenraum ist dann die 88 px des oberen – eine Lücke statt zwei. Wechselt die Farbe, bleibt alles wie bisher. AUSGENOMMEN SIND DIE BÄNDER (Aydin: Startseite und Spielvarianten sollen unberührt bleiben). Sie tragen ihre Maße selbst – min-height, eigenes padding, Hintergrundbild – und stehen auf der Spielvarianten-Seite absichtlich direkt aneinander. Ein Band ohne oberen Abstand wäre kein engerer Abstand, sondern ein kaputtes Band. Dasselbe gilt für den Teaser mit dem Notenfall. */ /* BÄNDER UND TEASER SIND IM SELEKTOR AUSGESCHLOSSEN, nicht in einer zweiten Regel darunter. Erster Versuch am 14.10.2026 war genau das – und wäre schiefgegangen: „.abschnitt.dunkel + .abschnitt.dunkel" hat vier Klassen, „.abschnitt.variante-band" nur zwei. Die Ausnahme hätte verloren, und die vier Bänder auf der Spielvarianten-Seite wären ihren oberen Abstand losgewesen. Spezifität schlägt Reihenfolge – deshalb steht die Ausnahme jetzt dort, wo sie nicht überstimmt werden kann. */ /* DIE AUSNAHME STEHT IM SELEKTOR, NICHT DANEBEN – zweiter Anlauf am 14.10.2026. Eine eigene Regel „.seite-index .abschnitt + .abschnitt" hätte wieder verloren: drei Klassen gegen zwölf. Spezifität schlägt Reihenfolge, und zwar jedes Mal. Deshalb hängt die Einschränkung jetzt vorn am Selektor: Die Regel greift von vornherein nicht auf Startseite und Spielvarianten, statt dort nachträglich zurückgenommen zu werden. */ body:not(.seite-index):not(.seite-spielvarianten) .abschnitt:not(.grau):not(.dunkel):not(.teaser) + .abschnitt:not(.grau):not(.dunkel):not(.teaser), body:not(.seite-index):not(.seite-spielvarianten) .abschnitt.grau:not(.module-band):not(.stufen-band) + .abschnitt.grau:not(.module-band):not(.stufen-band), body:not(.seite-index):not(.seite-spielvarianten) .abschnitt.dunkel:not(.variante-band):not(.stufen-band):not(.module-band):not(.teaser) + .abschnitt.dunkel:not(.variante-band):not(.stufen-band):not(.module-band):not(.teaser) { padding-top: 0; } .abschnitt.grau{ background:var(--grau); } .abschnitt.dunkel{ background:var(--schwarz); color:#f5f5f7; } .abschnitt.dunkel .leise{ color:#a1a1a6; } .abschnitt.dunkel a{ color:var(--akz-hell); } .innen{ max-width:var(--breit); margin:0 auto; } .innen.schmal{ max-width:var(--schmal); } .mitte{ text-align:center; } h1,h2,h3{ letter-spacing:-.025em; font-weight:600; margin:0; } h1{ font-size:clamp(40px,6.4vw,76px); line-height:1.06; } h2{ font-size:clamp(30px,4.2vw,46px); line-height:1.12; } h3{ font-size:22px; line-height:1.25; } .ueber{ font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--akz); text-transform:none; margin:0 0 12px; } .lead{ font-size:clamp(18px,2.1vw,22px); line-height:1.42; color:var(--leise); margin:20px 0 0; max-width:640px; } .mitte .lead{ margin-left:auto; margin-right:auto; } p{ margin:16px 0 0; } .leise{ color:var(--leise); } .klein{ font-size:14px; } /* ---------- Knöpfe ---------- */ .knopf{ display:inline-block; padding:12px 24px; border-radius:980px; background:var(--akz); color:var(--auf-akz); font-size:16px; font-weight:400; text-decoration:none; border:1px solid var(--akz); cursor:pointer; transition:opacity .2s; } .knopf:hover{ opacity:.86; text-decoration:none; } .knopf.rand{ background:transparent; color:var(--akz); } .abschnitt.dunkel .knopf{ background:var(--akz-hell); color:var(--auf-akz); border-color:var(--akz-hell); } .knopfreihe{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; } .mitte .knopfreihe{ justify-content:center; } .weiter{ font-size:16px; } .weiter::after{ content:" ›"; } /* ---------- Hero ---------- */ /* Der Abstand nach unten fehlte: .bild-banner folgt unmittelbar, die Knopfreihe stieß dadurch hart an den schwarzen Block und sah abgeschnitten aus. Gesehen am 30.09.2026 in der Vorschau. */ .hero{ padding:84px 22px 56px; text-align:center; } .hero .lead{ margin:22px auto 0; } /* KNÖPFE MITTIG WIE DER REST DES KOPFES (Aydin 14.10.2026). Der Hero ist text-align:center – Vorspann, Überschrift und Lead stehen mittig. Die Knopfreihe ist aber ein Flex-Element und richtet sich ohne eigene Angabe nach links aus. Dadurch sprang unter jeder zentrierten Überschrift ein linksbündiger Knopf heraus, und bei zwei Knöpfen – „Auf die Warteliste" plus etwa „Was Pro kostet" – fiel es doppelt auf. text-align wirkt auf Flex-Kinder nicht; dafür ist justify-content zuständig. Deshalb hier und nicht im .hero-Block darüber. */ .hero .knopfreihe{ justify-content:center; } /* ---------- Kopf mit Hintergrundbild ---------- Für Seiten, deren Thema sich zeigen lässt (Aydin 14.10.2026, Taschen-Klavier). Aufbau wie bei den Bändern: Bild über --hero-bild aus der Seite, Verlauf hier. DER VERLAUF IST STÄRKER ALS BEI DEN BÄNDERN, und das hat einen Grund: Dort steht eine Schlagzeile und ein Link, hier stehen Vorspann, Überschrift, Fließtext UND Knöpfe übereinander. Je mehr Zeilen, desto ruhiger muss der Untergrund sein – sonst läuft irgendein Wort über eine helle Stelle und bricht weg. */ .hero.mit-bild{ position:relative; color:#f5f5f7; background-color:var(--schwarz); /* Die Deckkraft kommt aus der Seite (--hero-deck), je Bild gemessen – siehe deckkraft() in bauen.py. Oben und unten etwas mehr, damit Navigation und Kante ruhig bleiben; in der Mitte der gerechnete Wert, denn dort steht die Schrift. */ background-image: linear-gradient(180deg, rgba(10,12,15,calc(var(--hero-deck, .62) + .14)) 0%, rgba(10,12,15,var(--hero-deck, .62)) 45%, rgba(10,12,15,calc(var(--hero-deck, .62) + .12)) 100%), var(--hero-bild, none); background-size:cover, cover; background-position:center center, center center; background-repeat:no-repeat, no-repeat; padding-top:110px; padding-bottom:92px; } .hero.mit-bild .ueber{ color:#d7d7db; } .hero.mit-bild .lead{ color:#e6e6ea; } .hero.mit-bild .knopf.rand{ color:#f5f5f7; border-color:#f5f5f7; } /* Der folgende Abschnitt soll nicht auf das Bild stoßen, sondern darunter anfangen – sonst wirkt der Kopf wie abgeschnitten. */ .hero.mit-bild + .abschnitt{ padding-top:88px; } .hero-bild{ max-width:var(--breit); margin:54px auto 0; border-radius:var(--radius); overflow:hidden; position:relative; background:#000; box-shadow:0 24px 70px rgba(0,0,0,.18); } .hero-bild canvas{ display:block; width:100%; height:auto; } /* ---------- Karten ---------- */ .karten{ display:grid; gap:20px; margin-top:44px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); } .karte{ background:var(--weiss); border-radius:var(--radius); padding:30px 28px; border:1px solid var(--linie); } .abschnitt.grau .karte{ border-color:transparent; } .abschnitt.dunkel .karte{ background:#1c1c1e; border-color:#2c2c2e; } .karte h3{ margin-bottom:10px; } .karte p{ color:var(--leise); font-size:16px; margin-top:0; } .karte.link{ display:block; color:inherit; text-decoration:none; transition:transform .2s; } .karte.link:hover{ transform:translateY(-3px); text-decoration:none; } /* Status-Fähnchen */ .stand{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; padding:4px 10px; border-radius:980px; margin-bottom:14px; } /* PUNKT STATT FÄHNCHEN auf den Modulkarten (13.10.2026, Aydin: „lass bitte nur die farbe"). Dieselben Farbklassen wie das Fähnchen, nur ohne Text – deshalb feste Maße und kein Innenabstand. Der Rand hebt ihn vom Kartenweiß ab, sonst verschwindet das helle Grün. .stand ohne .punkt bleibt, wie es war: Außerhalb der Modulkarten (z. B. im Arbeitsstand) steht das Wort weiter da, wo Platz ist. */ .stand.punkt{ width:12px; height:12px; padding:0; border-radius:50%; vertical-align:middle; } /* DER ALTE FARBTON (Aydin 13.10.2026: „kannst du das in dem alten farbton machen?"). Der Punkt behält also die Füllung des Fähnchens – dieselben Pastelltöne, die seit jeher für läuft / in Arbeit / geplant stehen. Das Problem, das die kräftige Zwischenfassung lösen sollte, bleibt aber bestehen: #e3f5ea auf Weiß sind elf Pixel, die man nicht sieht. Gelöst wird es jetzt nicht über die Füllung, sondern über einen Ring in der zugehörigen Schriftfarbe. Der Ton bleibt der alte, der Punkt ist trotzdem da – und weil Füllung und Ring aus demselben Fähnchen stammen, passt er weiter zu allem anderen. Erbt die Füllung aus .stand.laeuft/.bau/.plan/.lab weiter unten; hier steht nur der Ring. */ .stand.punkt{ box-shadow:inset 0 0 0 2px currentColor; } .stand.laeuft{ background:#e3f5ea; color:#146c3a; } .stand.bau{ background:#fdf1dc; color:#8a5a08; } .stand.plan{ background:#e8f1fb; color:#1b4f7d; } .stand.lab{ background:#f1e9fa; color:#5b2d87; } .abschnitt.dunkel .stand.laeuft{ background:#123a24; color:#8fe0b0; } .abschnitt.dunkel .stand.bau{ background:#3d2f10; color:#f0c674; } .abschnitt.dunkel .stand.plan{ background:#12314d; color:#9ccbf5; } .abschnitt.dunkel .stand.lab{ background:#2e1c45; color:#cfa8f0; } /* ---------- Stufen-Leiter ---------- */ .leiter{ display:grid; gap:2px; margin-top:44px; border-radius:var(--radius); overflow:hidden; } .sprosse{ background:var(--grau); padding:26px 28px; display:flex; gap:22px; align-items:baseline; flex-wrap:wrap; } .abschnitt.grau .sprosse{ background:var(--weiss); } .sprosse .zahl{ font-size:13px; font-weight:600; color:var(--akz); min-width:74px; } .sprosse b{ font-size:19px; font-weight:600; min-width:210px; } .sprosse small{ color:var(--leise); font-size:15px; flex:1; min-width:240px; } /* ---------- FAQ ---------- */ .faq{ margin-top:40px; border-top:1px solid var(--linie); } .faq details{ border-bottom:1px solid var(--linie); } .faq summary{ cursor:pointer; padding:22px 34px 22px 0; font-size:19px; font-weight:500; list-style:none; position:relative; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; position:absolute; right:4px; top:19px; font-size:24px; font-weight:300; color:var(--akz); transition:transform .2s; } .faq details[open] summary::after{ transform:rotate(45deg); } .faq details p{ margin:0 0 24px; color:var(--leise); max-width:var(--schmal); } /* ---------- Preise ---------- */ .preise{ display:grid; gap:20px; margin-top:44px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .preis{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:30px 26px; } .preis.hebt{ border-color:var(--vi-blau); border-width:2px; } .preis b{ font-size:19px; } .preis .zahl{ font-size:38px; font-weight:600; letter-spacing:-.03em; margin:14px 0 4px; } .preis .zahl small{ font-size:15px; font-weight:400; color:var(--leise); letter-spacing:0; } .preis ul{ margin:18px 0 0; padding-left:20px; color:var(--leise); font-size:15px; } .preis li{ margin-bottom:7px; } /* JAHR ZUERST (22.09.2026). Vorher stand der Monatspreis groß und das Jahr als Fußnote darunter – genau andersherum, als wir das Produkt inzwischen denken. Das Jahresabo ist die Hauptsache: Geld im Haus, eine Buchung statt zwölf, und wer einmal verlängert hat, bleibt. Also steht jetzt der Jahrespreis groß, die Umrechnung auf den Monat direkt darunter (sonst wirkt die Zahl teuer), und der Monatstarif als ruhige Alternative am Fuß der Karte. */ .preis{ position:relative; } .preis .spar{ position:absolute; top:-12px; right:18px; background:var(--akz); color:var(--auf-akz); font-size:12px; font-weight:600; padding:5px 12px; border-radius:980px; white-space:nowrap; } .preis .je-monat{ font-size:15px; color:var(--leise); margin:0; } .preis .je-monat b{ font-size:15px; color:var(--tinte); font-weight:600; } .preis .alt{ margin-top:18px; padding-top:14px; border-top:1px solid var(--linie); font-size:14px; color:var(--leise); } .preis .alt b{ font-size:14px; font-weight:600; color:var(--tinte); } /* ---------- Stufen-Teaser ---------- Vier Knöpfe DIREKT unter dem Notenfall (Aydin 28.09.2026), damit der Zusammenhang ohne Erklärung sichtbar ist: drücken, und die Noten darüber ändern sich. Deshalb kein Abstand dazwischen und dieselbe Breite wie die Leinwand. */ .abschnitt.teaser{ padding-top:64px; padding-bottom:64px; } .abschnitt.teaser .hero-bild{ margin:0; } .stufen-schalter{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; } .stufe-knopf{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding:13px 16px; border-radius:14px; cursor:pointer; background:#1c1c1e; border:1px solid #2c2c2e; color:#f5f5f7; font:inherit; font-size:16px; text-align:left; transition:background .18s, border-color .18s; } .stufe-knopf:hover{ background:#26262a; } .stufe-knopf .nr{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#8e8e93; } .stufe-knopf.jetzt{ background:var(--vi-blau); border-color:var(--vi-blau); color:var(--auf-akz); } .stufe-knopf.jetzt .nr{ color:var(--auf-akz); opacity:.85; } .stufe-knopf:focus-visible{ outline:2px solid var(--akz-hell); outline-offset:2px; } .teaser-fuss{ margin:18px 0 0; font-size:13px; line-height:1.6; color:#8e8e93; max-width:74ch; } @media(max-width:640px){ .stufen-schalter{ grid-template-columns:repeat(2,1fr); } } /* ---------- Abwägung: dafür / dagegen ---------- Aus AUSBAUSTUFEN-NUTZUNG.md, Konsequenz 4: „Ehrlichkeit über Ermüdung ist Vertrauens-Marketing und Abgrenzung zu VR-Hype-Anbietern." Deshalb stehen die Nachteile NICHT kleiner, nicht blasser und nicht eingeklappt – gleiche Schriftgröße, gleiche Spaltenbreite. Wer nur die linke Spalte gestaltet, hat die Seite nicht verstanden. */ .abwaegung{ display:grid; gap:20px; margin-top:38px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .abwaegung > div{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:26px 24px; } .abschnitt.grau .abwaegung > div{ border-color:transparent; } /* Ohne + und − (Aydin 14.10.2026). Damit entfällt auch das , das die Zeichen trug – flex und gap brauchen wir ohne zweites Element nicht mehr. Die Farbe bleibt der Unterschied: Grün links, Bernstein rechts, wie überall sonst auf der Seite. */ .abwaegung h3{ font-size:17px; margin:0 0 14px; } .abwaegung .dafuer h3{ color:#146c3a; } .abwaegung .dagegen h3{ color:#8a5a08; } .abwaegung ul{ margin:0; padding-left:20px; color:var(--leise); font-size:15px; } .abwaegung li{ margin-bottom:9px; } .abwaegung li:last-child{ margin-bottom:0; } .abwaegung li b{ color:var(--tinte); } /* ---------- Der Konzertsaal-Abschnitt ---------- Aydin 12.10.2026, in drei Schritten hierher: „nimm kategorie klassik, mach den bereich aber höher damit das zur geltung kommt" „mach die bilder raus, lass nur den text stehen, den machst du oben im bild. das hintergrundbild sagt schon alles." Davor standen an dieser Stelle nacheinander vier Textkacheln, ein Balkendiagramm, Glassäulen und vier Stimmungsbilder. Alle vier Anläufe wollten die Steigerung ERKLÄREN. Der Saal zeigt stattdessen das Ziel – Flügel im Spot, leere Ränge – und das genügt. DER VERLAUF IST OBEN DICHT und wird nach unten offen: Die Überschrift steht oben und braucht Grund, Bühne und Flügel liegen unten und sollen frei bleiben. In der Fassung mit den vier Karten war es umgekehrt, weil die Karten unten Halt brauchten; ohne sie kehrt sich die Logik um. `background-attachment: fixed` bleibt draußen: ruckelt auf iOS und kostet beim Scrollen mehr, als der Effekt wert ist. */ .abschnitt.stufen-band { position: relative; min-height: 88vh; display: flex; align-items: flex-start; /* Text oben */ padding-top: 92px; padding-bottom: 92px; background-image: linear-gradient(to bottom, rgba(10,12,15,.92) 0%, rgba(10,12,15,.80) 22%, rgba(10,12,15,.42) 46%, rgba(10,12,15,.18) 72%, rgba(10,12,15,.30) 100%), url("bilder/stufen-hintergrund.jpg"); background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat; } .abschnitt.stufen-band .innen { width: 100%; } /* Die Zeile bricht früh um – über die ganze Saalbreite verliert sie den Halt, und rechts soll der Blick ohnehin ins Bild gehen. */ .abschnitt.stufen-band .lead { max-width: 48ch; } @media (max-width: 860px) { /* 88 vh wären am Handy sehr viel Leerlauf vor dem nächsten Inhalt. */ .abschnitt.stufen-band { min-height: 62vh; padding-top: 56px; padding-bottom: 56px; } } /* ---------- Der Modul-Abschnitt ---------- Aydin 12.10.2026: „nehmen wir den internet hits hintergrund und schreiben ein produkt alle module, dann den link zu den modulen." Dieselbe Bauweise wie der Konzertsaal darüber: hohes Bildband, Text oben, Verlauf nach unten offen. Zwei Abschnitte mit gleicher Mechanik und verschiedenen Bildern lesen sich als Reihe – drei verschiedene Lösungen hätten nach Flickwerk ausgesehen. Das Bild (Lichtspuren über einer Klaviatur) ist flacher als der Saal: Die Streifen sitzen im oberen Drittel, darunter ist das Original fast schwarz. Deshalb etwas weniger Höhe und ein Verlauf, der unten früher dicht wird – sonst endet der Abschnitt in einer leeren schwarzen Fläche. */ .abschnitt.module-band { position: relative; min-height: 72vh; display: flex; align-items: flex-start; padding-top: 92px; padding-bottom: 92px; background-image: linear-gradient(to bottom, rgba(10,12,15,.93) 0%, rgba(10,12,15,.78) 24%, rgba(10,12,15,.40) 52%, rgba(10,12,15,.72) 84%, rgba(10,12,15,.92) 100%), url("bilder/module-hintergrund.jpg"); background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat; } .abschnitt.module-band .innen { width: 100%; } .abschnitt.module-band .lead { max-width: 48ch; } /* ---------- Variantenbänder ---------- Fünf Bänder auf spielvarianten.html, Auftrag Aydin 13.10.2026: „je spielvariante ein aussagekräftiges bild, mit einer schlagzeile und einem link zur erklärung." EINE KLASSE FÜR ALLE FÜNF. Die zwei Bänder der Startseite tragen ihr Bild hier in der CSS (.stufen-band, .module-band) – bei zwei Stück vertretbar. Bei fünf wären das fünf fast gleiche Blöcke, und beim nächsten Bild der sechste. Das Bild kommt deshalb als --band-bild aus der Seite, der Verlauf bleibt hier. Siehe band() in bauen.py. DER VERLAUF IST ANDERS ALS OBEN, und zwar mit Grund: Die Startseitenbänder stehen einzeln zwischen hellen Abschnitten und dürfen unten aufhellen. Hier stehen fünf direkt aufeinander – wenn jedes unten aufhellt und das nächste oben dunkel beginnt, entsteht bei jedem Übergang eine Kante. Also oben UND unten dunkel, in der Mitte offen: fünf Bänder lesen sich dann als eine Reihe. FEHLT DAS BILD, trägt --band-bild nichts und es bleibt der Verlauf auf Schwarz – ein dunkles Band ohne Foto, nicht ein kaputtes. Die fünf Bilder entstehen auf Aydins Mac (design/variantenbilder.py, fal.ai). */ .abschnitt.variante-band { position: relative; min-height: 76vh; display: flex; /* TEXT MITTIG – der Standardwert, und er bleibt es für alle Bänder. Am 13.10.2026 habe ich auf Aydins „kannst du den text etwas höher schieben?" hier flex-start + padding-top eingetragen. Das war der Fehler: gemeint war nur EIN Band (VR-Brille), geändert habe ich alle vier. Pro-Band-Wünsche gehören in .variante-band.tief darunter, nicht in diese Regel. */ align-items: center; background-color: var(--schwarz); /* GEMESSEN 13.10.2026, nach dem ersten Lauf von variantenbilder.py. Mittlere Helligkeit der fünf Bilder (0 = schwarz, 255 = weiß): schwebende-leinwand 6,5 magisches-fenster 8,3 gerenderte-buehne 10,4 notenfall-pur 10,9 taschen-klavier 17,0 Der erste Verlauf hier war von den Startseitenbändern abgeschrieben (.94 oben, .74 unten) – gebaut für die hellen pianostax-Bilder. Auf ein Bild mit Mittelwert 8 gelegt, bleibt davon nichts übrig: ein schwarzer Kasten, in dem einmal ein Foto war. Deshalb hier viel schwächer. Lesbar ist der Text trotzdem, weil die Bilder von sich aus fast schwarz sind – der Verlauf muss nur die hellen Stellen bändigen, nicht das Bild. */ background-image: linear-gradient(to bottom, rgba(10,12,15,.70) 0%, rgba(10,12,15,.34) 30%, rgba(10,12,15,.14) 55%, rgba(10,12,15,.42) 82%, rgba(10,12,15,.78) 100%), var(--band-bild, none); background-size: cover, cover; background-position: center center, center center; background-repeat: no-repeat, no-repeat; } .abschnitt.variante-band .innen { width: 100%; } .abschnitt.variante-band .lead { max-width: 46ch; } /* Der Vorspann trägt hier drei Angaben hintereinander (Kategorie, Tarif, benötigte Hardware) und ist damit länger als sonst – er darf sich nicht als Überschrift aufspielen. */ .abschnitt.variante-band .ueber { letter-spacing: .08em; opacity: .72; } /* EIN BAND TIEFER (13.10.2026, Aydin, nur für das VR-Band). Beim Bild der Schwebenden Leinwand liegt das Headset in der oberen Bildhälfte; mittig gesetzter Text läuft genau darüber. Statt das Bild zu beschneiden, rutscht hier der Text nach unten. Die eine Zahl zum Drehen ist padding-top: größer = tiefer. Gilt nur für Bänder mit class="... tief", gesetzt in bauen.py über band(…, tief=True). Unter 860 px greift die Mobilregel darüber, dort steht der Text ohnehin dicht. */ .abschnitt.variante-band.tief { align-items: flex-start; padding-top: 20vh; /* 26 → 22 → 20 (Aydin 13.10.2026, zweimal nach oben) */ padding-bottom: 92px; } @media (max-width: 860px) { .abschnitt.variante-band.tief { padding-top: 56px; } } /* EIN BAND HÖHER (13.10.2026, Aydin, Taschen-Klavier: „3 schritte nach oben"). Gegenstück zu .tief, und absichtlich anders gebaut: .tief setzt die Ausrichtung auf flex-start und steuert über padding. Hier bleibt die mittige Ausrichtung – es geht nur um eine Verschiebung gegen die Mitte, und die gehört nicht in den Textfluss. Deshalb transform: verschiebt optisch, verändert die Bandhöhe nicht, und die Kante zum nächsten Band bleibt, wo sie ist. Ein Schritt = 2vh, wie bei .tief. Minus = nach oben. Unter 860 px aus: dort ist das Band 62vh hoch und der Text sitzt ohnehin dicht – eine Verschiebung würde ihn aus dem Bild schieben. */ .abschnitt.variante-band.hoch .innen { transform: translateY(-15vh); } @media (max-width: 860px) { .abschnitt.variante-band.hoch .innen { transform: none; } } @media (max-width: 860px) { .abschnitt.variante-band { min-height: 62vh; padding-top: 56px; padding-bottom: 56px; } } @media (max-width: 860px) { .abschnitt.module-band { min-height: 54vh; padding-top: 56px; padding-bottom: 56px; } } /* ---------- Messtafel ---------- Eine gemessene Zahl neben ihrem Vorher-Wert. Eingeführt 11.10.2026 für die Handspannen-Seite: „passt sich der Hand an" ist eine Behauptung, 1.598 -> 959 Risse ist eine Messung. Deshalb bekommt sie eine eigene Darstellung und steht nicht im Fließtext. Rechtsbündige Zahlenspalten, damit man sie untereinander vergleichen kann; auf schmalen Geräten schiebbar statt umbrechend. */ .messtafel{ margin:24px 0 6px; overflow-x:auto; } .messtafel table{ border-collapse:collapse; width:100%; min-width:340px; background:var(--weiss); border-radius:var(--radius); overflow:hidden; } .messtafel th, .messtafel td{ padding:13px 18px; text-align:right; font-size:16px; border-bottom:1px solid var(--linie); } .messtafel th{ font-size:14px; font-weight:600; color:var(--leise); text-transform:uppercase; letter-spacing:.04em; } .messtafel th:first-child, .messtafel td:first-child{ text-align:left; font-weight:400; } .messtafel tr:last-child td{ border-bottom:none; } .messtafel td:last-child{ color:var(--vi-blau); } .abschnitt.grau .messtafel table{ background:#fff; } /* ---------- Rolle im Tagesmix ---------- */ .rolle{ margin-top:34px; padding:22px 26px; border-radius:var(--radius); border-left:3px solid var(--vi-blau); background:var(--weiss); } .rolle b{ display:block; margin-bottom:6px; } .rolle p{ margin:0; color:var(--leise); font-size:16px; } .abschnitt.grau .rolle{ background:#fff; } /* ---------- Hinweiskasten ---------- */ .hinweis{ margin-top:36px; padding:20px 24px; border-radius:14px; background:var(--grau); color:var(--leise); font-size:15px; } .abschnitt.dunkel .hinweis{ background:#1c1c1e; } /* ---------- Zitat ---------- */ blockquote{ margin:38px 0 0; padding:0 0 0 24px; border-left:3px solid var(--vi-blau); } blockquote p{ font-size:22px; line-height:1.4; margin:0; } blockquote footer{ margin-top:12px; font-size:14px; color:var(--leise); } /* ---------- Warteliste ---------- */ .warte-feld{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:30px; } .warte-feld input{ padding:13px 18px; border-radius:980px; border:1px solid var(--linie); font-size:16px; font-family:inherit; min-width:270px; background:var(--weiss); color:var(--tinte); } .warte-feld input:focus{ outline:2px solid var(--akz); outline-offset:1px; } .warte-feld button[disabled]{ opacity:.55; cursor:default; } /* HONIGTOPF (14.10.2026). Ein Feld, das Automaten ausfüllen und Menschen nie zu sehen bekommen. Bewusst NICHT display:none und nicht hidden – beides erkennen bessere Automaten und lassen das Feld dann leer. Stattdessen aus dem Bild geschoben, dazu aria-hidden und tabindex="-1" im HTML, damit auch ein Vorleseprogramm und die Tabulatortaste daran vorbeigehen. */ .honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Rückmeldung unter dem Formular. Sie steht immer an derselben Stelle, auch wenn sie leer ist – sonst springt die Seite beim ersten Klick. */ .warte-meldung{ min-height:1.4em; margin:16px 0 0; font-size:15px; color:var(--leise); } .warte-meldung.gut{ color:#146c3a; } .warte-meldung.fehler{ color:#8a5a08; } /* Häkchen und Preiszeile unter dem Wartelisten-Feld (14.10.2026). Beides gehört zum Formular, nicht zum Fließtext darunter – deshalb enger gesetzt und mittig wie das Feld selbst. */ .warte-haken{ display:inline-flex; align-items:flex-start; gap:10px; margin-top:18px; text-align:left; font-size:15px; cursor:pointer; max-width:420px; } .warte-haken input{ margin-top:3px; width:18px; height:18px; flex:none; cursor:pointer; } .warte-preis{ margin:14px 0 0; font-size:14px; color:var(--leise); } /* ---------- Fuß ---------- */ .fuss{ background:var(--grau); padding:40px 22px; font-size:12px; color:var(--leise); } .fuss-innen{ max-width:var(--breit); margin:0 auto; } .fuss-links{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:14px; } .fuss-links a{ color:var(--leise); } .fuss hr{ border:0; border-top:1px solid var(--linie); margin:16px 0; } /* ---------- Bewegung nur, wenn erwünscht ---------- */ @media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------- Spielvarianten: Name · Tarif · Hardware ---------- */ .varianten{ margin-top:44px; border-radius:var(--radius); overflow:hidden; } .variante{ background:var(--weiss); padding:26px 28px; margin-bottom:2px; display:grid; grid-template-columns:1fr auto; gap:6px 20px; align-items:start; } .abschnitt.grau .variante{ background:var(--weiss); } .variante .wann{ grid-column:1/-1; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--akz); margin-bottom:2px; } .variante h3{ font-size:20px; margin:0; } .variante .tarif{ font-size:12px; font-weight:600; letter-spacing:.03em; padding:5px 12px; border-radius:980px; white-space:nowrap; background:#e8f1fb; color:#1b4f7d; align-self:center; } .variante .tarif.frei{ background:#e3f5ea; color:#146c3a; } .variante p{ grid-column:1/-1; margin:8px 0 0; color:var(--leise); font-size:16px; } .variante .brauchst{ grid-column:1/-1; margin-top:16px; padding-top:14px; border-top:1px solid var(--linie); font-size:14px; color:var(--leise); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; } .variante .brauchst b{ color:var(--tinte); font-weight:600; } .variante .kaufen{ color:var(--akz); font-weight:600; } @media(max-width:560px){ .variante{ grid-template-columns:1fr; } .variante .tarif{ justify-self:start; } } /* ---------------------------------------------------------------- Bilder Plätze für die Modulbilder. Stand 20.09.2026 stecken dort FLUX-Muster mit bekannten Fehlern; die Form steht, der Inhalt wird einzeln getauscht. Feste Seitenverhältnisse, damit beim Austausch nichts springt und die Seite nicht beim Laden ruckelt. */ .bild { margin: 0; position: relative; overflow: hidden; } .bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .bild.voll { max-width: 1120px; margin: 0 auto 8px; padding: 0 24px; } .bild.voll img { aspect-ratio: 16/9; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.14); } /* SCHWARZES BAND HINTER DEM KLAVIERBILD (Aydin 20.09.2026). Das Hero-Bild ist im Studio fotografiert: schwarzer Hintergrund, nur die Klaviatur im Licht. Auf weißem Grund steht es als dunkles Rechteck in der Seite und wirkt wie ein Fremdkörper. Liegt hinter ihm ein schwarzes Band über die volle Breite, läuft das Bild an den Rändern in die Seite aus statt gegen eine Kante zu stoßen. Deshalb hier auch KEIN Radius und KEIN Schlagschatten: Beides würde die Kante wieder sichtbar machen, die das Band gerade aufhebt. Der Schatten bleibt für Bilder auf hellem Grund. */ /* ÜBER DIE GANZE SEITENBREITE (Aydin 29.09.2026: „so das es in der seitenbreite hängt nicht innerhalb der seite, also wenn ich die seite vollbild mache dann soll es sich auch so vergrößern"). Vorher waren es 1320 px – das Klavier stand als Kachel in der Seite und wuchs beim Vollbild nicht mit. Jetzt nimmt es die volle Breite. DER HÖHENDECKEL ist kein Schönheitswunsch, sondern nötig: Das Foto hat 2752 × 1536, also 1,79 : 1. Ohne Deckel wäre es an einem 2560 px breiten Bildschirm 1430 px hoch – der Besucher sähe beim Laden nur Klavier und müsste scrollen, bevor er erfährt, worum es geht. Bei 84 vh bleibt die Überschrift im Blick. Greift der Deckel, stellt `contain` das Foto mittig und schmaler in den Kasten. Der Notenfall rechnet das seit dem 29.09. mit (rahmen() in notenfall.js) – vorher wäre er neben die Tasten gefallen. */ .bild-banner { background: #000; padding: 0; } .bild-banner .bild.voll { max-width: none; width: 100%; margin: 0; padding: 0; max-height: 84vh; } .bild-banner .bild.voll img { border-radius: 0; box-shadow: none; /* CONTAIN statt COVER, und das geht nur hier: Sonst schneidet das feste Seitenverhältnis bei schmalen Fenstern links und rechts das Instrument an – am Handy stünde vom Klavier nur noch die Mitte da. Mit „contain" bleibt es immer ganz im Bild; was übrig bleibt, ist schwarz auf Schwarz und damit unsichtbar. */ object-fit: contain; } .bild.in-variante { margin: -26px -26px 22px; } .bild.in-variante img { aspect-ratio: 16/10; border-radius: 16px 16px 0 0; } /* Nur in der lokalen Vorschau sichtbar (LOKAL=True). Erinnert daran, welches Bild noch ein Platzhalter ist – der Besucher sieht das nie. */ .muster-ecke { position: absolute; top: 12px; left: 36px; background: rgba(20,20,22,.82); color: #fff; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; padding: 5px 10px; border-radius: 6px; pointer-events: none; } .bild.in-variante .muster-ecke { left: 12px; } @media (max-width: 640px) { .bild.voll { padding: 0 16px; } .bild.voll img { aspect-ratio: 4/3; border-radius: 14px; } /* Das Bannerbild behält 16/9 – ein Klavier ist breit, 4/3 würde es stauchen oder beschneiden. */ .bild-banner .bild.voll { padding: 0; } .bild-banner .bild.voll img { aspect-ratio: 16/9; border-radius: 0; } } /* ------------------------------------------------- Notenfall auf dem Foto Aydin 20.09.2026: „meinst du wir können einen notenfall auf die klaviertasten hinbekommen?" Die Zeichenfläche liegt deckungsgleich über dem Bild. Sie zeichnet NUR die fallenden Balken und das Aufleuchten der getroffenen Taste – die Klaviatur selbst ist das Foto darunter. Wo die Tasten liegen, steht in assets/tastatur-lage.json (python3 website/tastatur_vermessen.py). pointer-events: none ist wichtig: Die Fläche liegt über dem ganzen Bild und dürfte sonst Klicks und Textauswahl abfangen. */ .bild.tastenfall { position: relative; } .bild.tastenfall canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* Das Bild übernimmt das Seitenverhältnis, das bauen.py an die figure schreibt – sein eigenes, nicht das genormte 16:9 des Bildplatzes. Hoch gewichtet (vier Klassen), weil sonst die Handy-Regel weiter oben gewinnen würde: Deren 16:9 ergäbe schmale schwarze Ränder, und um genau die läge die Klaviatur tiefer, als der Notenfall denkt. */ .bild-banner .bild.voll.tastenfall img { aspect-ratio: inherit; object-fit: contain; } /* ------------------------------------------------- Die vier Stufen Auftrag Aydin 20.09.2026: „zwei kacheln je zeile, das heißt das ganze wird größer und du kannst mehr text verwenden." Zwei Spalten statt vier: Jede Kachel bekommt dadurch etwa die doppelte Breite, und der Notenfall darin ist groß genug, dass man einzelne Tasten erkennt. Bei vier nebeneinander wäre die Klaviatur ein Strich gewesen. */ .stufen { display: grid; gap: 20px; margin-top: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .stufe { background: var(--weiss); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .abschnitt.grau .stufe { border: none; } /* Der dunkle Streifen mit dem Notenfall. Schwarz wie der Hero und wie der Player – dieselbe Optik an allen drei Stellen. */ .stufe-bild { background: #0d1116; } /* HOCH GENUG FÜR SCHLANKE KAPSELN. Aydin 20.09.2026: „die müssen höher sein, sonst sieht der notenfall wie seifenblasen aus." Bei 170 Pixeln war eine Achtelnote kürzer als die Taste breit – daraus wird optisch eine Blase statt eines Balkens. 380 statt 300 (21.09.2026): Der Ausschnitt zeigt jetzt vier Oktaven und der Vorlauf 3,2 Sekunden – beides macht die Kapseln schmaler und zahlreicher. Die zusätzliche Höhe hält sie trotzdem schlank und gibt dem Fall Platz, den man braucht, um die Dichte zu sehen. */ .stufe-bild canvas { display: block; width: 100%; height: 380px; } .stufe-text { padding: 24px 28px 28px; } .stufe-text .zahl { font-size: 13px; font-weight: 600; color: var(--akz); margin: 0 0 6px; letter-spacing: .02em; } .stufe-text h3 { margin: 0 0 12px; } .stufe-text .vorspann { font-size: 17px; color: var(--tinte); margin: 0 0 14px; line-height: 1.45; } .stufe-text p { font-size: 15px; color: var(--leise); margin: 0 0 10px; line-height: 1.55; } .stufe-text p:last-child { margin-bottom: 0; } @media (max-width: 760px) { .stufen { grid-template-columns: 1fr; } .stufe-bild canvas { height: 320px; } .stufe-text { padding: 20px 22px 24px; } } /* Der Messwert. Steht in jeder Kachel an derselben Stelle – nur so lassen sich die vier mit einem Blick vergleichen, und genau das ist der Zweck der Zahlen (Aydin 20.09.2026: „belege es mit zahlen an einem stück"). */ .stufe-text .messwert { margin: 0 0 14px; display: flex; align-items: baseline; gap: 8px; } .stufe-text .messwert b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--tinte); } .stufe-text .messwert span { font-size: 14px; color: var(--leise); } .stufen-quelle { margin-top: 26px; font-size: 14px; color: var(--leise); max-width: 620px; line-height: 1.5; } /* Zwei Messwerte nebeneinander: Tonzahl und Tempo. Erst zusammen ergeben sie das Bild – 763 Töne bei halbem Tempo sind etwas anderes als 763 Töne bei vollem (Aydin 21.09.2026). */ .stufe-text .messwerte { display: flex; gap: 32px; margin: 0 0 16px; } .stufe-text .messwert { margin: 0; display: flex; flex-direction: column; gap: 2px; } .stufe-text .messwert b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--tinte); line-height: 1.05; } .stufe-text .messwert span { font-size: 13px; color: var(--leise); } /* ------------------------------------------------- Lautsprecher im Hero Aydin 21.09.2026: „kannst du da noch einen lautsprecher einbauen, das man den ton ein und ausschalten kann?" Er sitzt IM Bild, unten rechts, und hält sich zurück: Auf dem schwarzen Studiofoto darf nichts mit dem Instrument konkurrieren. Sichtbar wird er erst durch das Skript – kann der Browser keinen Ton erzeugen, bleibt er weg. BEFUND 29.09.2026 – hier stand „.bild.tastenfall .ton-knopf". Damit galten die Regeln NUR im Foto-Container der Startseite. Im Stufen-Teaser auf lernpfad.html sitzt der Knopf aber in .hero-bild: Dort war er unformatiert, stand mangels `position:absolute` im normalen Fluss UNTER der Leinwand – und .hero-bild hat `overflow:hidden`. Der Knopf war also da, klickbar war er nie, weil er außerhalb des sichtbaren Bereichs lag. Ein Knopf gehört nicht an einen Container gebunden, sondern an sich selbst. Die Positionierung braucht nur einen Bezugsrahmen – den stellen jetzt beide Container. */ .bild.tastenfall, .hero-bild{ position: relative; } .ton-knopf { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 980px; background: rgba(20,22,26,.62); color: #f2f4f6; border: 1px solid rgba(255,255,255,.16); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, border-color .2s, color .2s; pointer-events: auto; /* die Leinwand daneben lässt Klicks durch */ } .ton-knopf:hover { background: rgba(30,34,40,.82); border-color: rgba(255,255,255,.3); } .ton-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ton-knopf .trichter { fill: currentColor; stroke: none; } /* Aus: Kreuz sichtbar, Wellen weg. An: umgekehrt. */ .ton-knopf .wellen { display: none; } .ton-knopf.an .wellen { display: inline; } .ton-knopf.an .kreuz { display: none; } .ton-knopf.an { color: var(--akz-hell); border-color: rgba(79,195,220,.5); } /* ---------- Scroll-Bühne für den Vorspann ---------- Aydin 12.10.2026: „die gesamte animation bis zum elise play soll über das scrollen laufen damit der user zeit hat sich alles durchzulesen." Ein hoher Kasten, in dem das Bild oben haftet. Solange man durch den Kasten scrollt, steht das Bild still und die Animation rückt vor; am Ende löst es sich und die Seite läuft weiter. DIE HÖHE IST DIE LESEZEIT – das ist die Zahl, an der man dreht. 380 vh minus 100 vh stehendes Bild = 280 vh für sechs Sätze und das laufende Stück, also gut eine halbe Bildschirmhöhe je Satz. Zu zäh? Zahl runter. Zu hastig? Zahl rauf. */ /* SCHWARZ, NICHT WEISS (12.10.2026). Aydin: „zwischen notenfallnavigation und saal ist ein weißer balken." Ursache war nicht der Abstand, sondern ein Rest: Die haftende Fläche ist 100 vh hoch, das Foto darin aber auf 86 vh begrenzt (sonst läge die Klaviatur unter dem Fensterrand). Die Differenz zeigte den weißen Seitengrund – ein heller Streifen zwischen zwei schwarzen Abschnitten. Die Bühne bekommt deshalb den Grund, den sie ohnehin haben müsste. Das schließt die Lücke an BEIDEN Enden: oben zum Hero, unten zum Konzertsaal. Ein fester Balken in Schwarz hätte nur das untere Ende geflickt und die Ursache stehen lassen. */ .scroll-buehne { height: 380vh; position: relative; background: var(--schwarz); } .scroll-buehne .haftet { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } .scroll-buehne .haftet .bild-banner { width: 100%; margin: 0; } /* HÖHE BEGRENZEN, SONST RAGT DAS BILD AUS DER HAFTENDEN FLÄCHE. Das Foto ist 1,79:1 – bei 1600 px Fensterbreite also rund 894 px hoch, mehr als eine flache Bildschirmhöhe. Ohne Deckel stünde die Klaviatur unterhalb des Fensterrands, und ausgerechnet der Einschlag wäre nicht zu sehen. Die Klaviatur bleibt trotzdem genau getroffen: Das Bild liegt mit `object-fit: contain` in der Figur, und fotoRahmen() in notenfall.js rechnet genau dieses Verfahren nach. Es misst also nicht die Figur, sondern das Foto darin – deshalb darf die Figur jede Form haben. `aspect-ratio: auto` muss sein, weil das Bild das Verhältnis sonst von der Figur erbt und wieder überragt. */ .scroll-buehne .haftet .bild.voll.tastenfall { height: 86vh; max-height: 86vh; } .scroll-buehne .haftet .bild.voll.tastenfall img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; } /* Am Handy ist dieselbe Strecke deutlich mehr Wischen – und das Bild ist niedriger, also bleibt unter dem haftenden Bild viel Leere. Deshalb kürzer und nur so hoch wie nötig. */ @media (max-width: 760px) { .scroll-buehne { height: 300vh; } .scroll-buehne .haftet { height: 78vh; } } /* Wer keine Bewegung will, bekommt auch keine Scroll-Bühne: das Bild steht da, wo es hingehört, und notenfall-erklaert.js übergibt sofort an das Stück. Ohne diese Regel bliebe ein 380-vh-Loch. */ @media (prefers-reduced-motion: reduce) { .scroll-buehne { height: auto; } .scroll-buehne .haftet { position: static; height: auto; display: block; } } @media (max-width: 640px) { .ton-knopf { right: 12px; bottom: 12px; padding: 8px 12px 8px 10px; font-size: 12px; } .ton-knopf span { display: none; } } /* Ladeanzeige am Lautsprecher. Ein paar Megabyte Klavier brauchen ein paar Sekunden; ein Knopf, der so lange nichts sagt, gilt als kaputt. Der Ring füllt sich mit --fortschritt, das JavaScript setzt den Wert. */ .ton-knopf.kaputt { opacity: .55; cursor: help; } .ton-knopf.kaputt .kreuz { stroke: #ff8a80; } .ton-knopf.laedt { pointer-events: none; } .ton-knopf.laedt::after { content: ""; position: absolute; inset: -1px; border-radius: 980px; background: conic-gradient(rgba(79,195,220,.55) var(--fortschritt, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); pointer-events: none; } /* ---------- Gerenderte Bildschirmbilder ---------- Aydin 30.09.2026: „mach da erstmal nur bilder rein" – und kurz darauf „das muss gestochen scharf sein." Beides steckt hier drin. Die Dateien liegen in DOPPELTER Anzeigegröße vor und werden auf der Hälfte gezeigt; auf Bildschirmen mit doppelter Punktdichte bleibt dadurch jede Kante scharf. Erzeugt werden sie mit python3 design/taschenklavier_bilder.py, dort dreifach überabgetastet und heruntergerechnet – Pillow kennt keine Kantenglättung. WER DIE BREITEN HIER ÄNDERT, ändert die Ausgabegrößen im Skript mit. Wird das Bild breiter gezeigt als die halbe Dateibreite, ist der Gewinn weg. */ .schirme{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; margin-top:34px; justify-content:center; } .schirme .schirm{ margin:0; } .schirme img{ display:block; width:100%; height:auto; border-radius:16px; box-shadow:0 18px 44px rgba(0,0,0,.20); } .schirme figcaption{ margin-top:13px; font-size:14px; line-height:1.45; color:var(--leise); text-align:center; } /* Anzeigebreiten = halbe Dateibreite */ .schirm-hoch { width:254px; } /* Datei 508 */ .schirm-quer { width:562px; } /* Datei 1124 */ /* Zwei Querbilder nebeneinander: 475 + 30 + 475 = 980 = Spaltenbreite. */ .schirm-quer-paar { width:475px; } .schirm-duett { width:818px; max-width:100%; } /* Datei 1636 */ /* Zweite Reihe rückt näher an die erste – es ist eine Bildgruppe. */ .schirme + .schirme{ margin-top:26px; } @media(max-width:900px){ .schirme{ gap:36px; } .schirm-hoch, .schirm-quer, .schirm-quer-paar, .schirm-duett{ width:100%; } }