/* Die gemeinsame Gestaltung aller Seiten von DJ Collector Pool. * * Hier steht **nur**, was auf jeder Seite gleich ist: die bewegten * Lichtflächen im Hintergrund, das Korn darüber, der Seitenübergang. * Layout, Schriftgrade, Formulare und Farben bleiben in der jeweiligen * Seite - die unterscheiden sich, und sie zusammenzulegen wäre ein * Risiko ohne Gewinn. * * Angelegt am 11. August 2026. Anlass: Jede Änderung an diesen paar * Regeln musste vorher durch 23 Dateien geschoben werden, per Skript * und mit Prüfungen, die zweimal zu Recht angeschlagen haben. * * Zwei Dinge, die hier gelernt wurden und nicht wieder verlorengehen * sollen: * * 1. Flächen, die den Hintergrund füllen, werden in **vw/vh** * bemessen, nicht in rem. 30rem sind immer 480 Pixel - auf einem * 2000 Pixel breiten Bildschirm ist das ein Fleck am Rand. * 2. Bewegt wird **transform** und **opacity**, sonst nichts. Nur * diese beiden erledigt die Grafikkarte allein; Verläufe zu * animieren rechnet die CPU in jedem Bild neu. * * Die Zeiten 7, 11 und 8 Sekunden sind teilerfremd. Dadurch fällt das * Zusammenspiel der drei Ebenen erst nach über neun Minuten wieder * zusammen und wirkt nie wie eine Schleife. */ @view-transition{navigation:auto} /* --- Grundebene --------------------------------------------------- * Die Verläufe selbst stehen in der Seite, weil sie sich je nach Seite * leicht unterscheiden. Hier steht nur, wie sie sich verhalten. * `inset:-8%` gibt der Bewegung Rand, damit an keiner Kante eine Lücke * aufblitzt. */ body::before{ content:"";position:fixed;inset:-8%;z-index:0;pointer-events:none; will-change:transform,opacity; animation:breathe 10s ease-in-out infinite alternate; animation-delay:var(--phase,0s); } @keyframes breathe{ from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02);opacity:.82} to {transform:translate3d(2.5%,2%,0) scale(1.12);opacity:1} } /* --- Zweite Ebene, Schwerpunkt rechts und unten ------------------- */ /* **Die Laufzeiten sind am 03.09.2026 um rund 40 Prozent gestreckt** worden, auf Christians Wunsch: 7 auf 10, 11 auf 16, 8 auf 11 und der Logoschein 6,5 auf 9 Sekunden. Die drei Ebenen behalten dabei ihr Verhaeltnis zueinander - sie sind bewusst nicht gleich lang, damit ihre Ueberlagerung sich nicht in kurzem Abstand wiederholt. Bei gleichen Laufzeiten faellt der Takt auf und die Bewegung wirkt mechanisch. **16 und nicht 15.** Mit 10, 15 und 11 haetten zwei Ebenen den Faktor 5 geteilt und die Ueberlagerung sich alle 5,5 Minuten wiederholt - frueher als die 10,3 Minuten vorher, obwohl jede Ebene langsamer laeuft. Mit 10, 16 und 11 sind es 14,7 Minuten. Bei ineinander laufenden Schleifen entscheidet nicht die einzelne Dauer, sondern ihr kleinstes gemeinsames Vielfaches. */ .licht{ position:fixed;inset:-12%;z-index:0;pointer-events:none; background: radial-gradient(54vw 48vh at 16% 20%, rgba(150,60,255,.17), transparent 70%), radial-gradient(46vw 42vh at 84% 64%, rgba(232,60,215,.14), transparent 72%), radial-gradient(40vw 36vh at 62% 104%, rgba(120,80,255,.12), transparent 70%); animation:licht 16s ease-in-out infinite alternate; animation-delay:var(--phase,0s); will-change:transform,opacity; } @keyframes licht{ from{transform:translate3d(3%,-2%,0) scale(1.04) rotate(-1.5deg);opacity:.65} to {transform:translate3d(-3%,3%,0) scale(1.16) rotate(1.5deg);opacity:1} } /* --- Dritte Ebene, linker Rand, größter Ausschlag ----------------- */ .licht.links{ background: radial-gradient(50vw 58vh at 0% 34%, rgba(190,70,255,.21), transparent 70%), radial-gradient(38vw 44vh at 4% 82%, rgba(232,60,215,.16), transparent 72%); animation:lichtLinks 11s ease-in-out infinite alternate; animation-delay:var(--phase,0s); } @keyframes lichtLinks{ from{transform:translate3d(-7%,5%,0) scale(1.02);opacity:.6} to {transform:translate3d(7%,-6%,0) scale(1.16);opacity:1} } /* --- Korn --------------------------------------------------------- * Nimmt dem Schwarz die Flächigkeit. Als data:-URL von rund 300 Byte, * damit keine Bilddatei auf zwei Servern gepflegt werden muss. * * **.10 statt .05.** Am 03.09.2026 im Vergleich angesehen: Bei .05 war * das Korn nicht wahrnehmbar - es stand im Stilblatt, ohne etwas zu * tun. Bei .13 liest es sich als Filmkorn, kippt auf einem hellen * OLED-Bildschirm aber Richtung Bildrauschen. .10 ist die Mitte: auf * den grossen schwarzen Flaechen sichtbar, auf den Karten nicht. * * Der Suchdienst des Gestaltungs-Skills nennt Filmkorn ueber * SVG-Filter ausdruecklich fuer Musik- und Vinyl-Marken. */ body::after{ content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.10; background-image:url("data:image/svg+xml;utf8,"); } /* --- Vignette ------------------------------------------------------ * * Dunkelt die Raender ab und laesst die Mitte frei. Sie fuegt nichts * hinzu - sie **nimmt Licht dort weg, wo gelesen wird**. * * Gemessen am 03.09.2026: `--muted` in einem Kasten erreicht ueber * Schwarz 5,42:1, unter einer Lichtebene 4,14:1 und unter zwei * ueberlagerten 3,34:1. Die Lichtflaechen sind schoen und sie kosten * Lesbarkeit, und zwar genau in der Spalte, in der der Text steht. Die * Vignette schiebt ihren hellsten Teil an den Rand, wo nichts steht. * * `z-index:1` - ueber den Lichtebenen (0), unter dem Korn (2) und unter * dem Inhalt. Kein `mix-blend-mode`: Auf fast schwarzem Grund kostet * Abdunkeln fast nichts an Rechenzeit und braucht keine eigene Ebene. */ body::before, body::after{ pointer-events:none; } .vignette{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(78% 66% at 50% 42%, transparent 38%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.62) 100%); } /* --- Logo: Schein und ein Lichtstreifen ----------------------------- * * **Das Logo selbst bleibt unangetastet.** Beides liegt daneben und * darueber, nichts faerbt oder verformt es. Christian am 10.08.2026: * „das mit dem logo soll schon identisch aussehen. das ist die marke." * * **Der Schein ist eine eigene Ebene, kein animierter `filter`.** * `drop-shadow` zu animieren hiesse, den Weichzeichner ueber ein * 420 px breites Bild in jedem Einzelbild neu zu rechnen. Ein * radialer Verlauf dahinter, dessen `opacity` und `transform` sich * aendern, erledigt der Compositor allein. Der vorhandene statische * `drop-shadow` am Logo bleibt, wie er ist. * * **Der Streifen laeuft genau einmal**, kurz nach dem Laden. Was * endlos laeuft, sieht man beim dritten Besuch nicht mehr und kostet * trotzdem Rechenzeit. Er bleibt in der Silhouette des Logos, weil * das PNG einen Alphakanal hat und sich als eigene Maske benutzen * laesst - dieselbe Datei, keine zweite Anfrage. * * Die Staerke ist gemessen und nicht gewaehlt: Bei 0,9 Weiss wird das * Magenta des C kurz blass, die Marke also veraendert. Bei 0,38 * bleiben die Farben stehen und es liest sich als Licht auf einer * glaenzenden Flaeche. * * `passwort.html` und `passwort-neu.html` laden diese Datei nicht und * bekommen den Auftritt daher nicht. Das ist hingenommen: Es sind * Hilfsseiten vor der Anmeldung, auf denen ein Auftritt am wenigsten * zaehlt - und eine dritte Kopie derselben Regeln waere teurer als der * Verzicht. */ .logofeld{position:relative;display:block;line-height:0} .logofeld::before{ content:"";position:absolute;inset:-16%;z-index:-1;pointer-events:none; border-radius:50%; /* **Halbiert am 03.09.2026** - Christian: „ist zu stark". Vorher .30 und .13 bei einer Spitzendeckkraft von .85; das legte einen sichtbaren Hof um das Logo, der mit dem Logo selbst zu konkurrieren begann. Jetzt traegt der vorhandene statische `drop-shadow` am Logo weiterhin den Hauptteil, und diese Ebene setzt nur eine Bewegung darauf. */ background:radial-gradient(50% 50% at 50% 50%, rgba(232,60,215,.20), rgba(194,56,240,.08) 46%, transparent 72%); animation:logoAtem 9s ease-in-out infinite alternate; } @keyframes logoAtem{ from{opacity:.32;transform:scale(.95)} to {opacity:.65;transform:scale(1.05)} } .logofeld::after{ content:"";position:absolute;inset:0;pointer-events:none; -webkit-mask-image:url("/logo.png?v=20260911-153542");mask-image:url("/logo.png?v=20260911-153542"); -webkit-mask-size:contain;mask-size:contain; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; /* **Heller und langsamer**, Christian am 03.09.2026. Von .38 auf .55 in der Spitze und von 2,6 auf 4,2 Sekunden. Die Obergrenze ist gemessen und nicht gefuehlt: Bei .9 wird das Magenta des C blass, die Marke also veraendert. .55 bleibt darunter. Der Balken ist zugleich breiter geworden - 36 bis 64 Prozent statt 40 bis 60. Ein schmaler Balken, der langsam laeuft, wirkt wie ein Fehler im Bild; ein breiter wie eine Lichtquelle, die vorbeizieht. */ background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.30) 46%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.30) 54%, transparent 64%); background-size:260% 100%;background-position:130% 0; animation:logoStreif 4.2s cubic-bezier(.35,.1,.25,1) .45s 1 both; } @keyframes logoStreif{ from{background-position:130% 0} to {background-position:-45% 0} } /* Wer Bewegung abgestellt hat, bekommt keine. Menschen stellen das * ein, weil ihnen von bewegten Flächen schlecht wird. * * **`animation:none` haelt nichts an - es entfernt.** Danach gilt der * statische Wert der Regel, und weil weder `body::before` noch `.licht` * ausserhalb ihrer Keyframes eine `opacity` deklarieren, ist das der * Vorgabewert 1: der HELLSTE Zustand, dauerhaft. Wer weniger Bewegung * anfordert, bekam bisher die lauteste Fassung. * * Deshalb hier die ruhige Seite der Keyframes von Hand: die Werte aus * `from`, nicht aus `to`. */ @media (prefers-reduced-motion:reduce){ body::before,.licht,.licht.links{animation:none} body::before{opacity:.82;transform:translate3d(-2.5%,-1.5%,0) scale(1.02)} .licht{opacity:.65;transform:translate3d(3%,-2%,0) scale(1.04) rotate(-1.5deg)} .licht.links{opacity:.6;transform:translate3d(-7%,5%,0) scale(1.02)} /* Der Schein bleibt, er hoert nur auf zu atmen - auf dem ruhigen Wert, nicht auf dem hellen. Der Streifen entfaellt ganz: Ein einmaliger Lauf ist genau die Art Bewegung, die gemeint ist. */ .logofeld::before{animation:none;opacity:.32;transform:scale(.95)} .logofeld::after{animation:none;background-position:130% 0} } /* --- Auszeichnungsschrift ------------------------------------------ * * **Teko, Stärke 400 und 600.** Christians Wahl vom 21.08.2026, nach * einem Vergleich von Teko, Anton, Montserrat und Oswald direkt unter * dem Logo. Teko trifft dessen Schriftzug am besten: quadratische * Formen mit geraden Seiten, das O ein abgerundetes Rechteck statt * eines Kreises. * * **Warum zwei Stärken.** Mit einer einzigen sähe ein `font-weight:700` * genauso aus wie normaler Text - in Listen ginge damit jede * Hervorhebung verloren. Die 600 kostet 11 kB und trägt sie wieder. * * 400 statt 700 als Grundstärke: Der Schriftzug im Logo ist fetter, * aber er besteht aus fünfzehn Großbuchstaben und wirkt als Bild. Eine * Überschrift aus ganzen Sätzen verträgt weniger. * * **Auf diesem Server, nicht über Googles CDN** - siehe das Urteil des * LG München von 2022 zur Übertragung der Besucher-IP. * * **Teko deckt kein Kyrillisch ab.** Für Russisch und Ukrainisch fällt * die Schrift auf die Systemschrift zurück; bewusst in Kauf genommen, * damit Logo und Seite in den übrigen zwölf Sprachen zusammenpassen. */ @font-face { font-family:"Teko"; font-style:normal; font-weight:400; font-display:swap; src:url("/schriften/teko-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:"Teko"; font-style:normal; font-weight:400; font-display:swap; src:url("/schriften/teko-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:"Teko"; font-style:normal; font-weight:600; font-display:swap; src:url("/schriften/teko600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family:"Teko"; font-style:normal; font-weight:600; font-display:swap; src:url("/schriften/teko600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --schrift-display:"Teko","Avenir Next Condensed","Arial Narrow", "Hiragino Sans","Noto Sans CJK SC","Microsoft YaHei",sans-serif; } /* Überschriften **und die Listen**: Monatsnamen, Wochen, Preise. Das * ist der Gedanke hinter der Schriftwahl - der Mitgliederbereich soll * sich lesen wie ein Auslieferungsschein, nicht wie eine Webseite. * Fließtext bleibt Systemschrift; er wird gelesen, nicht überflogen. * * Nur die Familie wird hier gesetzt - Grade und Abstände bleiben in * der jeweiligen Seite, sonst kämpfen zwei Regeln gegeneinander. */ h1, h2, .jahrtitel, .neu .mo, .neu .w, .monat .nm, .paket .wo, .plan .nm, .plan .pr, .summe .zahl{ font-family:var(--schrift-display); } /* **Listeneinträge in Großbuchstaben.** Christians Vorgabe vom * 21.08.2026. Teko ist dafür gezeichnet - schmale Versalien stehen * dicht und lesen sich als Block, was einer Liste entgegenkommt. * Fließtext bleibt davon unberührt; ein Absatz in Versalien wäre * unlesbar. */ .neu .mo, .neu .w, .monat .nm, .paket .wo, .plan .nm{ text-transform:uppercase; letter-spacing:var(--sperr-leicht,.04em); } /* Teko gibt es hier in 400 und 600. Stünde irgendwo 700 oder 800, * würde der Browser sie künstlich fetter rechnen - das sieht nach * Fehldruck aus. Ohne Synthese wählt er stattdessen die 600. */ h1, h2, .jahrtitel, .neu .mo, .neu .w, .monat .nm, .paket .wo, .plan .nm, .plan .pr, .summe .zahl{ font-synthesis-weight:none; } /* --- Sprachumschalter als Auswahlfeld ------------------------------- * * Greift nur, wenn gestaltung.js den Aufbau umgehaengt hat (Klasse * `alsfeld`). Ohne Skript bleibt die alte Flaggenreihe stehen - sie * funktioniert weiterhin, sie braucht nur mehr Platz. */ .lang.alsfeld{ display:block;width:auto;max-width:none; } .lang.alsfeld .langknopf{ appearance:none;cursor:pointer;font:inherit; display:flex;align-items:center;gap:.5rem; padding:.34rem .6rem .34rem .45rem;border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);color:var(--text,#f5f5f7); font-size:var(--grad-1,.80rem);font-weight:600;letter-spacing:var(--sperr-leicht,.04em); transition:border-color .15s ease,background .15s ease; /* **Die Daempfung der alten Flaggenreihe zuruecknehmen**, 05.09.2026. In achtzehn Seiten steht im eigenen Stilblock `.lang button{opacity:.45;filter:saturate(.7)}`. Das galt vierzehn bunten Flaggen nebeneinander, die sonst vom Inhalt ablenken. Der Knopf hier ist aber ebenfalls ein `button` innerhalb von `.lang` und erbt die Daempfung, obwohl er das Gegenteil ist: ein einzelnes Bedienelement, das gefunden werden soll. Gemessen kostete das seine Beschriftung (4,00:1 statt ueber 15:1) und vor allem seinen Fokusrahmen: 2,33:1, also unter den 3:1 aus WCAG 1.4.11 - auf fuenfzehn Seiten das einzige sichtbare Sprachbedienelement, mit der Tastatur praktisch unauffindbar. Die Listeneintraege darunter machen es seit jeher richtig (Zeile 376: `opacity:1;filter:none`); nur der Knopf war vergessen. */ opacity:1;filter:none; } .lang.alsfeld .langknopf:hover{border-color:var(--accent,#c238f0);background:rgba(194,56,240,.14)} .lang.alsfeld .langknopf svg{display:block;width:22px;height:auto;border-radius:3px} /* Der Pfeil dreht sich beim Aufklappen - die einzige Bewegung hier. */ .lang.alsfeld .langpfeil{ width:.4rem;height:.4rem;margin-left:.05rem; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .18s ease; } .lang.alsfeld.offen .langpfeil{transform:rotate(-135deg) translate(-1px,-1px)} .lang.alsfeld .langliste{ display:none;position:absolute;top:calc(100% + .4rem);left:0;z-index:5; min-width:11rem;padding:.35rem;border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(18,18,22,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 22px 48px -22px rgba(0,0,0,.95); /* Vierzehn Eintraege brauchen rund 355 px. Bei 60vh fehlten auf einem niedrigen Fenster die letzten zwei und die Liste musste gescrollt werden - fuer eine Sprachwahl ein schlechter Tausch. */ max-height:min(78vh,26rem);overflow-y:auto; } .lang.alsfeld.offen .langliste{display:block} .lang.alsfeld .langliste button{ appearance:none;border:0;cursor:pointer; display:flex;align-items:center;gap:.6rem;width:100%; padding:.38rem .5rem;border-radius:9px; background:transparent;color:var(--text,#f5f5f7); font:inherit;font-size:var(--grad-1,.80rem);font-weight:500;line-height:var(--zeile-3,1.3); opacity:1;filter:none;text-align:left; } .lang.alsfeld .langliste button svg{display:block;width:22px;height:auto;border-radius:3px;flex:none} .lang.alsfeld .langliste button:hover{background:rgba(255,255,255,.07)} /* **Der Ring ersetzt das entfernte `outline:0`.** Ohne ihn wanderte die Tastatur unsichtbar durch vierzehn Sprachen: kein Rahmen, keine Faerbung, nichts. Versatz nach innen (`-2px`), damit der Ring in der scrollenden Liste nicht am Rand abgeschnitten wird. */ .lang.alsfeld .langliste button:focus-visible{ outline:2px solid var(--accent-soft,#d97ff5);outline-offset:-2px; background:rgba(255,255,255,.07); } .lang.alsfeld .langliste button[aria-current="true"]{ background:rgba(194,56,240,.18);font-weight:700; } /* --- Bedienelemente des Browsers dunkel ----------------------------- * * Kalenderblätter, Bildlaufleisten, Auswahllisten und Autofill-Kästen * malt der Browser selbst, nach seinem eigenen Hell/Dunkel-Schalter - * nicht nach den Farben der Seite. Ohne diese Zeile stehen weiße * Kästen mit schwarzer Schrift mitten in einer schwarzen Seite. * * Eine Zeile für alle Seiten, weil hier keine Seite hell ist. */ :root{ color-scheme:dark; } /* --- Sieben Schriftgrade -------------------------------------------- * * Gemessen am 03.09.2026 ueber alle siebzehn Seiten: **26 verschiedene * Schriftgrade**, viele davon Hundertstel auseinander - 13,12 gegen * 13,44 gegen 13,60 gegen 13,76. Im Quelltext vier Entscheidungen, im * Auge eine. Dazu 31 Stellen unter 12 px, die kleinste bei 10,56. * * Das war keine Skala, sondern eine Ansammlung: Jede Regel entstand zu * ihrer Zeit und waehlte ihren Wert allein. * * **Die Zuordnung rundet auf, nie ab.** Kein Text wird kleiner als er * war; 177 Deklarationen bleiben unveraendert, die uebrigen steigen um * 0,16 bis 0,64 px - unsichtbar. Nur die 34 zu kleinen springen * deutlich, und genau das war der Zweck. * * **Warum Rueckfallwerte in jedem `var()`:** `passwort.html` und * `passwort-neu.html` laden diese Datei nicht - sie stehen vor der * Anmeldung und tragen ihre Gestaltung selbst. Ohne zweites Argument * waere ihre Schrift dort auf die Voreinstellung des Browsers gefallen. */ :root{ --grad-1:.80rem; /* 12,8px Marken, Fussnoten, Statuswoerter */ --grad-2:.85rem; /* 13,6px Hilfstexte, Beschriftungen */ --grad-3:.90rem; /* 14,4px Fliesstext */ --grad-4:.95rem; /* 15,2px betonter Fliesstext */ --grad-5:1rem; /* 16px Hervorhebung, Preise */ --grad-6:1.15rem; /* 18,4px Zwischenueberschrift */ --grad-7:1.35rem; /* 21,6px Kachelziffer, kleine Ueberschrift */ } /* --- Zeilenhoehen und Sperrsatz -------------------------------------- * * Gemessen am 03.09.2026: **14 Zeilenhoehen und 12 Sperrsatzwerte** ueber * siebzehn Seiten. Anders als bei den Schriftgraden waren die Werte hier * nicht zufaellig verteilt - sie hatten Rollen, nur mehrere Werte je * Rolle: 1,55 (41-mal) und 1,60 (39-mal) sind derselbe Fliesstext, * 0,11em (36-mal) und 0,12em (3-mal) dieselbe Versalienbeschriftung. * * Zusammengefasst wird deshalb je Rolle, nicht nach Zahlennaehe. * * **Der weite Sperrsatz bleibt.** Die 0,11em der Beschriftungen und die * 0,14em der Auszeichnungsueberschriften sind Teil des Schriftbilds - * sie zu vereinheitlichen haette die Marke eingeebnet, nicht geordnet. * Eingeebnet werden nur die Werte, die daneben lagen. * * `line-height:0` ist keine Zeilenhoehe in diesem Sinn, sondern ein * Griff fuer Elemente ohne Text (Flaggen, Augensymbol). Sie bleibt. */ :root{ --zeile-1:1; /* einzeilig: Knoepfe, Kacheln, Navigation */ --zeile-2:1.08; /* Auszeichnungsueberschriften */ --zeile-3:1.3; /* kurze Angaben, Statuswoerter */ --zeile-4:1.5; /* kompakter Text, Fehlermeldungen */ --zeile-5:1.6; /* Fliesstext */ --zeile-6:1.75; /* lange Prosa, Rechtstexte */ --sperr-eng:-.01em; /* grosse Ueberschriften, optischer Ausgleich */ --sperr-leicht:.04em; /* kleine Beschriftungen, Kachelziffern */ --sperr-knopf:.08em; /* Knoepfe und Aufrufe */ --sperr-marke:.11em; /* Versalien-Beschriftungen */ --sperr-weit:.14em; /* Auszeichnungsueberschriften */ } /* --- Zwei Stufen: erhaben und Mulde -------------------------------- * * **Warum nicht weiter aufhellen.** Jeder Kasten der Seiten sitzt in * einer durchscheinenden Karte ueber drei bewegten Lichtflaechen (siehe * `.licht` weiter oben, bis rgba(190,70,255,.21)). Gemessen am * 03.09.2026: `--muted` erreicht in `.fenster` ueber Schwarz 5,42:1, * ueber einer Lichtebene 4,14:1 und ueber zwei ueberlagerten 3,34:1. * Die Kaesten mit 2 bis 5,5 % Weiss aufzuhellen schiebt die Flaeche in * dieselbe Richtung wie das Licht - der Text verliert dabei. * * Ein eingesenkter Grund dreht das um: Er drueckt die Flaeche vom * Betrachter weg und hebt den Text an derselben Stelle auf 4,59:1, * mit dem helleren `--muted` auf 5,62:1. * * **Die beiden Verlaeufe laufen gegenlaeufig.** Erhaben ist oben hell * und am Fuss dunkel, die Mulde dunkel unter der Lippe und am Boden * aufgehellt - so, wie Licht von oben faellt. Daran liest man ohne * Nachdenken ab, was aufliegt und was eingesenkt ist. * * Regel fuer den Gebrauch: **Was man anfasst, tritt hervor; was man * liest, liegt eingesenkt.** */ :root{ --erhaben-grund:linear-gradient(180deg,rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 38%, rgba(0,0,0,.16) 100%); --erhaben-rand:rgba(255,255,255,.15); --erhaben-relief:inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px -10px rgba(0,0,0,.85); --mulde-grund:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,.26)); --mulde-rand:rgba(255,255,255,.055); --mulde-relief:inset 0 2px 3px -1px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.045); } /* Damit eine neue Seite die Stufen ohne eigene Regel abgreifen kann - so wie sie heute den Fokusrahmen abgreift. Die bestehenden Seiten setzen die Marken direkt in ihren eigenen Regeln ein, weil sie ihre Radien und Polster behalten. */ .erhaben{ background:var(--erhaben-grund); border:1px solid var(--erhaben-rand); box-shadow:var(--erhaben-relief); } .mulde{ background:var(--mulde-grund); border:1px solid var(--mulde-rand); box-shadow:var(--mulde-relief); } /* --- Tastaturbedienung: sichtbarer Fokus ---------------------------- * * Bis zum 03.09.2026 hatte **kein einziger Knopf** auf keiner Seite * einen Fokuszustand, und vierzehn Dateien entfernten den Ring von * ihren Eingabefeldern (`outline:none`) und ersetzten ihn nur durch * eine 1 px duenne Randfarbe. Wer die Seite mit der Tastatur bedient, * sah nicht, wo er stand. * * Ausgerechnet `index.html` hatte fuenf richtige `:focus-visible`-Regeln * - die Loesung stand also im eigenen Quelltext und war nie * weitergetragen worden. Diese Datei ist der Ort, an dem sie fuer alle * gilt. * * `:focus-visible` und nicht `:focus`: Der Ring erscheint bei Tastatur * und Bildschirmleser, nicht beim Mausklick. Das war der Grund, aus dem * die Rahmen ueberhaupt entfernt wurden - mit `:focus-visible` gibt es * diesen Grund nicht mehr. * * **Die Farbe ist gemessen, nicht gewaehlt:** `--accent-soft` (#d97ff5) * hat 8,3:1 gegen den schwarzen Grund, `--accent` (#c238f0) nur 5,1:1. * Der Ring muss auch direkt neben einem magentafarbenen Rand noch * erkennbar bleiben, und dafuer braucht er die hellere Marke. * * Die Seiten mit eigenen Regeln fuer `.field input` ueberschreiben das * hier - sie laden `gestaltung.css` vor ihren eigenen Stilangaben. * Deshalb steht dort dieselbe Regel noch einmal. Wer eine neue Seite * anlegt und keine eigene Fokusregel schreibt, ist ueber diese Datei * versorgt. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent-soft,#d97ff5); outline-offset:3px; } /* **Kein `border-radius` in dieser Regel.** * * Hier stand `border-radius:4px`, dazu eine Ausnahmeliste, die fuenf * Klassen wieder auf 999px zurueckholte. Beides war falsch: Ein * `outline` folgt in jedem heutigen Browser von selbst der Rundung des * Elements. Der Wert hat den Ring also nicht geformt, sondern **das * Element** - 84 runde Knoepfe waeren beim Tastaturfokus fuer die Dauer * des Fokus eckig geworden, und die Ausnahmeliste deckte nur fuenf * davon. * * Eine Fokusregel darf die Form dessen, worauf sie liegt, nicht * veraendern. Sie legt sich darum, mehr nicht. */