/* =========================================================================== immut — das Stylesheet aller Seiten. WARUM AUSGELAGERT Bis zum 20.08.2026 trug jede Seite ihre eigene Kopie: Startseite, Impressum, Datenschutz, 404, Anmelden. Bei fünf Kopien ist die sechste Änderung die, die man vergisst - und genau das ist passiert: Der Anmelde-Knopf bekam auf der Startseite seine kleine Fassung, auf dem Impressum blieb er in voller Größe stehen. 50 Pixel statt 34, in einer 68 Pixel hohen Leiste. Eine Datei, ein Ort. Der Browser lädt sie einmal und hat sie danach für jede weitere Seite im Speicher. Dafür musste die Richtlinie erweitert werden: style-src stand auf 'unsafe-inline' und erlaubte damit nur eingebettete Stile. Jetzt zusätzlich 'self' - eine Datei von derselben Herkunft. =========================================================================== */ /* =========================================================================== immut — Landingpage Formensprache: das Register. Haarlinien, Reiter, Sprossen. Kein Farbverlauf, kein Schatten, keine abgerundete Kachelwand. Der Akzent ist das Orange der Wortmarke, und er ist der EINZIGE. Warnen kann er deshalb nicht mehr - dafuer ist allein Rot da. =========================================================================== */ :root { --tinte:#14171c; --papier:#fbfbfc; --flaeche:#fff; --leise:#5c6470; --still:#98a0ac; --linie:#dcdfe4; --fein:#eceef1; --orange:#e75d2d; --orange-hell:#fdf0e9; --rot:#b3261e; --sand:#f6f1ec; /* Dieselbe Schrift wie in der Software. Hier stand system-ui - also auf jedem Rechner eine andere: Segoe UI unter Windows, San Francisco auf dem Mac, Roboto unter Android. Ausgerechnet auf der Seite, auf der die Marke zuerst gesehen wird. Corbel und Consolas wurden zusammen entworfen: eine humanistische Grotesk, deren Formen aus der Handschrift kommen. Sie liegt auf jedem Windows-Rechner, und die Kette dahinter fängt die anderen Systeme ab - Candara ist die nächste Verwandte, Optima und Gill Sans treffen den Charakter. */ --sans:Corbel,Candara,Optima,"Gill Sans","Segoe UI",system-ui,sans-serif; --mono:Consolas,"SF Mono",Menlo,"DejaVu Sans Mono",ui-monospace,monospace; } /* KEIN DUNKLES SCHAUFENSTER Hier stand eine Umschaltung auf prefers-color-scheme:dark. Sie war gut gemeint und an dieser Stelle falsch: Wer die Seite zum ersten Mal sieht, sieht die Marke zum ersten Mal - und die soll bei jedem gleich aussehen. Ein Besucher mit dunkel eingestelltem System bekam eine andere Seite als der daneben, mit anderem Orange (#f5804f statt #e75d2d) und anderem Grund. Zwei Fassungen einer Marke sind keine Marke. In der Software ist das anders - dort sitzt man acht Stunden, und dort bleibt das dunkle Thema. Ein Schaufenster ist kein Arbeitsplatz. */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; padding:0; } html { scroll-behavior:smooth; } body { background:var(--papier); color:var(--tinte); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; /* Corbel setzt von Haus aus Minuskelziffern - 3, 4, 7 und 9 tauchen unter die Grundlinie. In einem Brief schön, in "17 Bereiche, 94 Aufgaben" unruhig. */ font-variant-numeric:lining-nums; } .mitte { max-width:70rem; margin:0 auto; padding:0 1.5rem; } p { max-width:62ch; } /* ------------------------------------------------------------------ Kopf */ header.oben { border-bottom:1px solid var(--linie); position:sticky; top:0; background:color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter:blur(8px); z-index:10; } .oben .mitte { display:flex; align-items:center; gap:2rem; height:4.2rem; } /* Die Wortmarke, seit dem 20.08.2026 als Vektor. INLINE UND NICHT ALS : Gemessen bleibt eine eingebundene SVG schwarz, egal welche Textfarbe drumherum steht - sie ist ein eigenes Dokument und kennt die Farbe der Seite nicht. Inline greift currentColor, und damit reicht eine Datei fuer jede Farbe. Hoehe statt font-size: Ein Vektor wird ueber seine Hoehe bemessen, die Breite folgt dem Seitenverhaeltnis 4:1. */ .marke { height:1.7rem; width:auto; display:block; color:var(--orange); user-select:none; } .marke-fuss { height:1.35rem; } nav.oben-nav { margin-left:auto; display:flex; gap:1.6rem; font-size:.92rem; } nav.oben-nav { align-items:center; } nav.oben-nav a { color:var(--leise); text-decoration:none; } nav.oben-nav a:hover { color:var(--tinte); } /* Der Knopf ist kein Textlink - die Regel darueber darf ihn nicht grau faerben. */ nav.oben-nav a.knopf { color:#fff; } nav.oben-nav a.knopf:hover { color:var(--papier); } /* ------------------------------------------------------ Das Klappmenue OHNE EIN EINZIGES SKRIPT Die CSP dieser Seite lautet default-src 'none' - kein Skript, von nirgendwo. Das ist kein Hindernis, sondern der Grund, warum die Seite in jedem Browser und in jedem Reader funktioniert. Ein verstecktes Kontrollkaestchen traegt den Zustand, das Label davor ist der Knopf. :checked ~ nav klappt auf. Das Kaestchen ist nicht display:none, sondern nur unsichtbar - sonst nimmt es die Tastatur nicht mehr an, und das Menue waere mit Tab nicht erreichbar. Vorher stand hier eine Zeile: nav { display:none }. Auf dem Telefon war damit jeder Punkt der Seite unerreichbar ausser dem, den man gerade sah - Preis, Datenschutz, Impressum und der Anmeldeknopf. */ .burger-schalter { display:none; position:absolute; right:1.5rem; top:calc(50% - 1.4rem); width:2.8rem; height:2.8rem; margin:0; opacity:0; cursor:pointer; z-index:2; } .burger { display:none; margin-left:auto; position:relative; width:2.8rem; height:2.8rem; align-items:center; justify-content:center; color:var(--tinte); } /* Drei Striche, gezeichnet statt getippt: Ein Zeichen aus der Schrift (\2630) sieht in jeder Schriftfamilie anders aus. */ .burger span, .burger span::before, .burger span::after { content:""; position:absolute; left:.7rem; width:1.4rem; height:2px; background:currentColor; border-radius:1px; } .burger span { top:calc(50% - 1px); } .burger span::before { top:-.42rem; left:0; } .burger span::after { top:.42rem; left:0; } .burger-schalter:focus-visible + .burger { outline:2px solid var(--orange); outline-offset:2px; border-radius:.25rem; } @media (max-width:720px) { .burger { display:flex; } /* Erst hier sichtbar - sonst liegt auf dem grossen Bildschirm ein unsichtbares Kaestchen ueber der Kopfleiste und faengt Klicks ab, die dem Anmeldeknopf gegolten haben. */ .burger-schalter { display:block; } nav.oben-nav { position:absolute; top:4.2rem; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--flaeche); border-bottom:1px solid var(--linie); box-shadow:0 1rem 2rem rgba(20,23,28,.12); margin-left:0; padding:.4rem 0; /* Zugeklappt heisst wirklich zu: Ohne visibility bliebe jeder Link mit Tab erreichbar, und der Fokus spaziert durch ein Menue, das niemand sieht. */ display:none; visibility:hidden; } .burger-schalter:checked ~ nav.oben-nav { display:flex; visibility:visible; } nav.oben-nav a { padding:.85rem 1.5rem; } nav.oben-nav a.knopf { margin:.5rem 1.5rem .3rem; text-align:center; } } /* ------------------------------------------------------------------ Kanzel */ .kanzel { padding:5.5rem 0 4rem; border-bottom:1px solid var(--tinte); } .kanzel h1 { font-size:clamp(2.4rem,6vw,4.2rem); font-weight:700; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; max-width:16ch; } .kanzel .unter { font-size:clamp(1.05rem,2.2vw,1.35rem); color:var(--leise); margin-top:1.4rem; max-width:44ch; } .kanzel .fuer { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:1.4rem; } .knoepfe { display:flex; gap:.8rem; margin-top:2.4rem; flex-wrap:wrap; } .knopf { display:inline-block; padding:.75rem 1.5rem; font-size:.95rem; font-weight:600; text-decoration:none; border:1.5px solid var(--tinte); color:var(--tinte); } .knopf.voll { background:var(--orange); border-color:var(--orange); color:#fff; } /* Der Knopf in der Kopfzeile. Dieselbe Form, nur kleiner: Der normale Knopf ist mit .75rem Polsterung fuer eine 4,2rem hohe Leiste zu hoch - er wuerde sie auseinanderdruecken. Warum ueberhaupt ein Knopf und kein Link: "Anmelden" ist das einzige in dieser Reihe, das jemand TUT. Alles andere fuehrt weiter unten auf dieselbe Seite. */ .knopf-klein { padding:.42rem 1rem; font-size:.88rem; line-height:1.35; } .knopf:hover { background:var(--tinte); color:var(--papier); } .knopf.voll:hover { background:var(--tinte); border-color:var(--tinte); } /* ---------------------------------------------------------------- Abschnitt */ section { padding:4.5rem 0; border-bottom:1px solid var(--linie); } .marke-zeile { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--still); margin-bottom:.9rem; } h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:700; letter-spacing:-.025em; line-height:1.15; text-wrap:balance; max-width:20ch; } section > .mitte > p { margin-top:1rem; color:var(--leise); } /* --------------------------------------------------------------- Die Karten */ .register { display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); margin-top:2.5rem; } @media (min-width:840px) { .register { grid-template-columns:repeat(2,1fr); } } .karte { background:var(--flaeche); padding:1.6rem 1.7rem 1.8rem; } .karte h3 { font-size:1.12rem; font-weight:650; letter-spacing:-.01em; } .karte .wie { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); margin-bottom:.5rem; } .karte p { font-size:.95rem; color:var(--leise); margin-top:.5rem; } .karte .beleg { margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--fein); font-family:var(--mono); font-size:.8rem; color:var(--tinte); } /* --------------------------------------------------------------- Die Module Zwei Spalten auf hoechstens 1200 Pixel: Erklaerung und Bild nebeneinander, das Bild etwas breiter. Bei 1200 sind das rund 400 fuer den Text und 720 fuer das Bild - und die Aufnahmen sind 878 bis 900 breit, werden also auf gut 80 Prozent gezeigt. Lesbar, ohne dass die Seite auseinanderfaellt. Bild mal links, mal rechts. Ich hatte dagegen argumentiert - abwechselnd sieht nach Vorlage aus. Bei vier gleichen Bloecken hintereinander ist das aber das kleinere Uebel: Den vierten liest sonst niemand mehr. */ .modul { padding:3.5rem 0; } .modul + .modul { border-top:1px solid var(--linie); } .modul .mitte { max-width:75rem; /* 1200 px */ display:grid; gap:2rem 3rem; align-items:center; } @media (min-width:960px) { /* Die BREITE Spalte gehoert immer dem Bild. Erster Versuch tauschte nur die Reihenfolge per order - und dann stand das Bild zwar links, aber in der SCHMALEN Spalte: gemessen 469 Pixel statt 635, und der Text bekam den Platz, den er nicht braucht. Ein Gitter vergibt seine Spaltenbreiten nach Position, nicht nach Inhalt. Also beides drehen: Reihenfolge und Breiten. */ .modul .mitte { grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); } .bild-links .mitte { grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); } /* Im Quelltext steht weiter Text-dann-Bild. Das ist die Reihenfolge, in der es vorgelesen wird und auf dem Handy erscheint; getauscht wird nur, was man sieht. */ .bild-links .modul-text { order:2; } .bild-links .bild { order:1; } } .modul-kopf { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; } .modul-kopf .marke-zeile { margin-bottom:0; } .modul-kopf .stand { font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; padding:.1rem .4rem; border:1px solid currentColor; color:var(--still); } .modul-kopf .stand.steht { color:var(--orange); } .modul-kopf .stand.teilweise { color:var(--tinte); } .modul-text h2 { font-size:clamp(1.35rem,2.6vw,1.85rem); margin-bottom:.7rem; max-width:18ch; } .modul-text p { color:var(--leise); font-size:.95rem; } .modul-beleg { margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--fein); font-size:.86rem; color:var(--tinte); } .modul-beleg em { font-style:normal; font-weight:600; } /* Das Bild: Rahmen statt Schatten, weil die Formensprache das Register ist und ein Register Kanten hat. */ .bild { margin:0; min-width:0; } .bild img { display:block; width:100%; height:auto; border:1px solid var(--linie); background:var(--flaeche); } /* ------------------------------------------------- Was dazwischen steht Ein Band mit der Kernaussage und ein Aufruf. Beide unterbrechen die Reihe der Module - nicht als Zierde, sondern damit der Blick einmal etwas anderes zu tun bekommt. */ .band { background:var(--sand); padding:3rem 0; border-top:1px solid var(--linie); } .band-satz { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; letter-spacing:-.025em; color:var(--tinte); max-width:none; } .band-dazu { margin-top:.8rem; color:var(--leise); max-width:60ch; } .band-dazu strong { color:var(--tinte); } .ruf { padding:2.6rem 0; border-top:1px solid var(--linie); } .ruf .mitte { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; } .ruf-satz { font-size:1.25rem; font-weight:650; color:var(--tinte); letter-spacing:-.015em; } .ruf-dazu { margin-top:.3rem; font-size:.92rem; color:var(--leise); max-width:52ch; } .ruf .knopf { margin-left:auto; flex:none; } @media (max-width:700px) { .ruf .knopf { margin-left:0; } } /* --------------------------------------------------------------- Der Aufbau */ .aufbau { display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); margin-top:2.5rem; } @media (min-width:700px) { .aufbau { grid-template-columns:repeat(2,1fr); } } @media (min-width:1100px) { .aufbau { grid-template-columns:repeat(3,1fr); } } .feld { background:var(--flaeche); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.55rem; } .feld-kopf { display:flex; align-items:baseline; gap:.6rem; } .feld-kopf b { font-size:.98rem; font-weight:650; } .feld-kopf .stand { margin-left:auto; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.08rem .4rem; border:1px solid currentColor; color:var(--still); } .feld-kopf .stand.steht { color:var(--orange); } .feld-kopf .stand.teilweise { color:var(--tinte); } .feld small { font-size:.84rem; color:var(--leise); line-height:1.45; } /* Sprossen statt Balken: eine je Aufgabe. Ein Balken sagt "72 Prozent" und verschweigt, woraus die bestehen. */ .sprossen { display:flex; gap:3px; align-items:flex-end; height:13px; } .sprossen i { flex:1; max-width:20px; height:5px; background:var(--fein); } .sprossen i.steht { background:var(--orange); height:13px; } .sprossen i.halb { background:var(--orange); opacity:.42; height:9px; } /* ----------------------------------------------------------------- Preise */ .preise { display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie); margin-top:2.5rem; } @media (min-width:840px) { .preise { grid-template-columns:1fr 1fr; } } .preis { background:var(--flaeche); padding:2rem 1.8rem; } .preis.hebt { background:var(--sand); } .preis .titel { font-size:1.3rem; font-weight:700; letter-spacing:-.02em; } .preis .satz { font-family:var(--mono); font-size:.8rem; color:var(--orange); margin-top:.3rem; letter-spacing:.06em; } .preis ul { list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.6rem; } .preis li { font-size:.94rem; display:flex; gap:.7rem; align-items:baseline; } .preis li::before { content:""; width:.55rem; height:.55rem; flex:none; border:1.5px solid var(--orange); background:var(--orange); } .preis.grau li::before { background:none; border-color:var(--still); } /* -------------------------------------------------------------- Grundsätze */ .saetze { display:grid; gap:2.2rem; margin-top:2.5rem; } /* Vier Zusagen, nicht drei. Bei drei Spalten stuende die vierte allein in einer zweiten Zeile - zwei mal zwei ist ruhiger. */ @media (min-width:640px) { .saetze { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .saetze { grid-template-columns:repeat(4,1fr); } } .satz b { display:block; font-size:1.05rem; font-weight:650; margin-bottom:.4rem; } .satz p { font-size:.94rem; color:var(--leise); } /* ------------------------------------------------------------------- Fuss */ footer { padding:3.5rem 0 3rem; font-size:.88rem; color:var(--leise); border-top:1px solid var(--tinte); } footer a { color:var(--leise); text-decoration:none; } footer a:hover { color:var(--tinte); } .fuss-spalten { display:grid; gap:2.5rem 2rem; } @media (min-width:620px) { .fuss-spalten { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .fuss-spalten { grid-template-columns:1.6fr 1fr 1fr 1fr; } } .fuss-spalte { display:flex; flex-direction:column; gap:.45rem; align-items:flex-start; } .fuss-spalte.weit { gap:.7rem; } .fuss-kopf { font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--still); margin-bottom:.25rem; } .fuss-satz { font-size:.95rem; color:var(--tinte); max-width:34ch; } .fuss-klein { font-size:.82rem; max-width:38ch; line-height:1.5; } /* Was es noch nicht gibt, sieht auch nicht aus wie ein Verweis. Ein toter Link auf ein fehlendes Impressum ist schlimmer als ein ehrlicher Hinweis. */ .fuss-offen { color:var(--still); } .fuss-offen em { font-style:normal; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid currentColor; padding:.02rem .3rem; margin-left:.35rem; } .fuss-linie { display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2.8rem; padding-top:1.2rem; border-top:1px solid var(--linie); font-family:var(--mono); font-size:.72rem; color:var(--still); } footer .rechts { margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--still); } :focus-visible { outline:2px solid var(--orange); outline-offset:3px; } /* ═══════════════════════════════════════════════════════════ Bewegung ALLES IN CSS, WEIL DIE SEITE KEIN SKRIPT AUSFUEHRT Die Auslieferung laeuft unter einer strengen Richtlinie: default-src 'none', erlaubt ist allein style-src. Kein Javascript, auch keins von hier. Das ist Absicht - eine Landingpage braucht keins, und was nicht laeuft, kann nicht ausgenutzt werden. Scroll-gesteuerte Animationen gehen inzwischen ohne: mit animation-timeline: view() bindet der Browser den Ablauf an die Lage des Elements im Bild. Kein Beobachter, kein Zuhoerer, keine Bibliothek. ┌──────────────────────────────────────────────────────────────┐ │ DIE FALLE, UND SIE IST TOEDLICH │ │ │ │ Wer fuer den Einblendeffekt opacity:0 setzt und der Browser │ │ kennt animation-timeline nicht, hat eine LEERE SEITE. Kein │ │ Fehler, keine Meldung - nur nichts zu sehen. Firefox liefert │ │ das bis heute nur hinter einem Schalter aus. │ │ │ │ Deshalb steht JEDE Regel, die etwas versteckt, in einem │ │ @supports-Block. Wo die Technik fehlt, ist alles schlicht │ │ sichtbar - die Seite ist dann ruhiger, aber vollstaendig. │ └──────────────────────────────────────────────────────────────┘ Und: Wer weniger Bewegung eingestellt hat, bekommt keine. Das ist keine Hoeflichkeit - fuer manche Menschen ist wandernde Bewegung am Bildschirm ein koerperliches Problem. */ /* ------------------------------------------------- Beim Laden: die Kanzel Gestaffelt, von oben nach unten, in der Reihenfolge, in der man ohnehin liest. Kurz gehalten: 0,5 Sekunden je Zeile, versetzt um 0,08 - wer die Seite kennt, soll nicht warten muessen. translateY statt eines Verschiebens ueber margin: Ein Layout, das sich beim Laden bewegt, laesst die ganze Seite zappeln. */ @keyframes auf-tauchen { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:no-preference) { .kanzel .fuer, .kanzel h1, .kanzel .unter, .kanzel .knoepfe { animation:auf-tauchen .55s cubic-bezier(.2,.7,.3,1) backwards; } /* Hier ist animation-delay richtig: Diese Animationen laufen ueber die Zeit, nicht ueber den Scrollweg. Nur bei animation-timeline: view() gibt es keine Zeit zu verzoegern. */ .kanzel .fuer { animation-delay:.02s; } .kanzel h1 { animation-delay:.10s; } .kanzel .unter { animation-delay:.18s; } .kanzel .knoepfe { animation-delay:.26s; } } /* --------------------------------------------- Beim Scrollen: die Bloecke view() misst, wie weit ein Element im Sichtfeld steht. Der Ablauf beginnt, wenn es unten hereinkommt, und ist fertig, wenn es ein gutes Stueck drin ist - "cover 5%" bis "cover 38%". Der Text kommt vor dem Bild, weil man ihn zuerst liest. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion:no-preference) { /* WAS EINEN STAND ANZEIGT, BLENDET NICHT EIN * * .feld und .preis standen hier - und es war derselbe Fehler * wie bei den Sprossen, nur eine Ebene hoeher. Wer mitten im * Abschnitt anhaelt, sieht halbdurchsichtige Kacheln und * liest das als Aussage: "Mieterportal ist ausgegraut, also * gesperrt". Dabei ist es nur die Animation, die dort stehen * geblieben ist, wo er stehen geblieben ist. * * Geblieben sind Textbloecke und Karten ohne Zustandsangabe. * Bei denen ist Deckkraft Zierde und keine Auskunft. */ .modul-text, .band .mitte, .ruf .mitte, .karte, .saetze .satz { animation:auf-tauchen linear both; animation-timeline:view(); animation-range:cover 4% cover 34%; } /* Das Bild kommt eine Spur spaeter und aus der Seite, zu der es gehoert - links liegende von links, rechts von rechts. Das laesst die zwei Spalten zusammengehoeren, statt zwei unabhaengige Dinge zu sein. */ .bild-rechts .bild { animation:ein-rechts linear both; } .bild-links .bild { animation:ein-links linear both; } .bild { animation-timeline:view(); animation-range:cover 6% cover 40%; } /* Die Karten einer Reihe versetzt, damit sie als Reihe gelesen werden und nicht als vier Einzelteile. */ .karte:nth-child(2n) { animation-delay:0s; } .register .karte { animation-range:cover 2% cover 30%; } } } @keyframes ein-rechts { from { opacity:0; transform:translateX(26px) scale(.985); } to { opacity:1; transform:none; } } @keyframes ein-links { from { opacity:0; transform:translateX(-26px) scale(.985); } to { opacity:1; transform:none; } } /* ┌──────────────────────────────────────────────────────────────┐ │ DIE SPROSSEN WERDEN NICHT ANIMIERT — UND ZWAR MIT ABSICHT │ │ │ │ Sie sahen gut aus, wenn man durchscrollte. Sie waren aber │ │ falsch, sobald jemand stehenblieb. │ │ │ │ Gemessen mitten im Abschnitt: Sprossenhöhen von 0, 1, 2, 3, │ │ 4, 5, 8, 9 und 13 Pixeln — 18 von 81 auf null. Wer dort │ │ anhält, sieht ein halb gefülltes Raster und liest es als │ │ Aussage: "Vermarktung ist zu einem Drittel fertig". │ │ │ │ Das ist der Denkfehler. Eine scroll-gesteuerte Animation │ │ bindet den Fortschritt an die LESEPOSITION. Bei Zierde ist │ │ das harmlos. Bei einer Fortschrittsanzeige ist es eine │ │ Falschaussage: Man kann nicht mehr unterscheiden, ob ein │ │ Bereich zu 30 % gebaut oder die Animation zu 30 % gelaufen │ │ ist. │ │ │ │ Die Sprossen tragen Information. Information darf nicht von │ │ der Scrollposition abhängen. Sie stehen deshalb sofort und │ │ vollständig da. │ │ │ │ Bewegung hat der Abschnitt trotzdem: Die Felder selbst │ │ blenden ein. Das ist Zierde und darf es sein. │ └──────────────────────────────────────────────────────────────┘ */ /* ------------------------------------------------------- Beim Zeigen Kleine Wege, kurze Zeiten. Eine Schaltflaeche, die sich einen halben Zentimeter bewegt, wirkt kaputt; zwei Pixel wirken wie ein Knopf, der nachgibt. */ .knopf { transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; } .knopf:active { transform:translateY(1px); } .bild img { transition:border-color .25s ease, transform .35s cubic-bezier(.2,.7,.3,1); } .bild:hover img { border-color:var(--still); transform:scale(1.012); } .karte, .feld { transition:background .2s ease; } .karte:hover, .feld:hover { background:var(--sand); } nav.oben-nav a { transition:color .15s ease; } /* Die Marke atmet beim Zeigen - eine Spur nur, und nur beim Hinzeigen. Ein dauerhaft pulsierendes Logo ist eine Zumutung. */ /* Die Marke führt auf die Startseite. Sie war es bisher nicht - und diese Hover-Regel lief deshalb ins Leere: Sie setzt einen Link voraus, den es an der Stelle nicht gab. Eine Regel, die nichts trifft, beschwert sich nicht. Ein Logo, das man anklicken kann und das nichts tut, ist auf jeder Seite eine kleine Enttäuschung; eins, das gar nicht anklickbar ist, sucht man beim Zurückwollen vergeblich. Es ist die erste Stelle, an der jeder klickt. */ .marke-link { display:block; text-decoration:none; color:inherit; } .marke-link:focus-visible { outline:2px solid var(--orange); outline-offset:4px; } header.oben .marke { transition:transform .3s cubic-bezier(.2,.7,.3,1); } header.oben .marke-link:hover .marke { transform:scale(1.03); } footer .marke-link:hover .marke { opacity:.8; } /* --------------------------------------------------- Der Fortschrittsbalken Oben am Rand, so breit wie man gelesen hat. Ohne Skript: scroll() bindet die Animation an den Fortschritt des Dokuments. Zwei Pixel hoch und in der Hausfarbe - er soll auffallen, wenn man ihn sucht, und sonst nicht. */ @supports (animation-timeline: scroll()) { body::before { content:""; position:fixed; inset:0 auto auto 0; height:2px; width:100%; background:var(--orange); transform-origin:left; transform:scaleX(0); z-index:20; animation:balken linear both; animation-timeline:scroll(); } @keyframes balken { to { transform:scaleX(1); } } @media (prefers-reduced-motion:reduce) { body::before { display:none; } } } /* ======================================================== Die Rechtsseiten Impressum, Datenschutz, 404, Anmelden. Ein Dokument, keine Werbefläche: eine Spalte, Fließtext, nichts, was ablenkt. Die Zeilenlänge bleibt bei 62 Zeichen — längere liest niemand freiwillig, und diese Seiten liest ohnehin niemand freiwillig. ACHTUNG, DIESE REGELN WÄREN FAST VERLORENGEGANGEN: Beim Auslagern des Stylesheets hatte jede Rechtsseite ZWEI