/* ERZEUGT, NICHT VON HAND ÄNDERN. Quelle: kDrive/DanielSchlager.AI/04_umsetzung/marketing/website-redesign-2026/system/dsai.css Erzeugt mit scripts/scope_dsai_css.py aus demselben Projekt. Jede Regel hängt unter .dsai, damit Tailwind auf allen anderen Seiten unberührt bleibt. Änderungen gehören in die Quelle, danach das Script erneut laufen lassen. */ /* ============================================================================= danielschlager.ai · Designsystem Stand 2026-08-13 · Grundlage: Entwurf H „Gespräch" Zutaten aus F „Zettelkasten" (Stempel, Karteikarte, Handschrift) und G „Anzeigetafel" (Fallblatt, Statusband, Tafelzeilen, Zustandslampen). Diese Datei ist die einzige Quelle für Farbe, Schrift, Abstand und Bewegung. Kein Bauteil bringt eigene Werte mit. Wer einen neuen Wert braucht, legt ihn hier als Token an, nicht im Bauteil. Regeln zur Verwendung: REGELN.md Bauteil-Katalog zum Ansehen: styleguide.html ============================================================================= */ /* ----------------------------------------------------------------------------- 0 · SCHRIFTEN, lokal Beide Familien liegen bereits im Website-Repo unter public/fonts und sind dort in src/fonts.css registriert. Kein CDN, kein Fremdhost. Fraunces ist eine variable Serif mit echter Kursiven, Inter trägt die Bedienung. Die Unicode-Bereiche sind aus dem Repo übernommen, damit die latin-ext-Datei nur nachgeladen wird, wenn sie wirklich gebraucht wird. -------------------------------------------------------------------------- */ @font-face{ font-family:'Fraunces';src:url('../../fonts/Fraunces-Variable.woff2') format('woff2'); font-weight:400 700;font-style:normal;font-display:swap; 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:'Fraunces';src:url('../../fonts/Fraunces-Variable-latin-ext.woff2') format('woff2'); font-weight:400 700;font-style:normal;font-display:swap; 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:'Fraunces';src:url('../../fonts/Fraunces-Variable-Italic.woff2') format('woff2'); font-weight:400 700;font-style:italic;font-display:swap; 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:'Fraunces';src:url('../../fonts/Fraunces-Variable-Italic-latin-ext.woff2') format('woff2'); font-weight:400 700;font-style:italic;font-display:swap; 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:'Inter';src:url('../../fonts/InterVariable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; } /* ----------------------------------------------------------------------------- 1 · TOKENS Alle Kontraste am 13.08.2026 gerechnet, Werte stehen in Klammern. Ziel: Text 4.5:1, Trennlinien sichtbar ab etwa 1.5:1. -------------------------------------------------------------------------- */ .dsai{ /* --- Grund, hell --- */ --grund: #faf8f4; /* Kalk, die Grundfläche der Marke */ --grund-2: #f1efea; /* abgesetzte Fläche, Karten, Einschübe */ --grund-3: #e2dfd8; /* Reiter, Klebestreifen, tiefste helle Stufe */ /* --- Grund, dunkel. Aus G weichgezogen, warm statt neutral --- */ --dunkel: #292928; --dunkel-2: #363634; /* --- Schrift --- */ --ink: #292928; /* 17.24:1 auf Kalk */ --ink-leise: #6b6a66; /* 5.48:1 auf Kalk */ --ink-hell: #efece4; /* 15.19:1 auf Dunkel */ --ink-hell-leise: #b8b6b0; /* 6.12:1 auf Dunkel */ /* --- Linien --- */ --linie: #e2dfd8; /* 1.49:1, Haarlinie zwischen Absätzen */ --linie-stark: #b8b6b0; /* 2.36:1, Abschnittsgrenze */ --linie-dunkel: #444442; /* 1.45:1 auf Dunkel */ /* --- Akzent. Genau einer. Petrol. --- Entscheidung Daniel am 2026-08-25 nach der Farbprüfung. Vorgeschichte in zwei Schritten: 1. Beere #9b2a4d lag 0.008 in OKLab neben der Logo-Farbe von enliteAI aus Wien und war davon nicht zu unterscheiden. 2. Eine Messung von 18 Anbietern im Umfeld hat gezeigt, dass der Blaubereich nur zwischen 243° und 266° besetzt ist. Petrol bei 215° hält 0.111 Abstand und damit mehr als jede Beere-Fassung davor. ⚠️ Der belegte Vertrauensvorsprung von Blau hängt am besetzten Pulk und gilt für diesen Ton nicht. Das war bekannt und ist bewusst in Kauf genommen. Verfahren, Zahlen und Quellen: 02_brands/danielschlager-ai/ci/farben/farbpruefung-2026-08-25.md */ --akzent: #a85a00; /* 8.44:1 auf Kalk */ --akzent-tief: #8a4a00; /* Hover, gedrückter Zustand, 11.23:1 */ --akzent-hell: #ff9600; /* 4.92:1, nur auf dunklem Grund */ --akzent-hauch: #fff1dc; /* Fläche hinter Akzenttext */ /* --- Graufamilie als Kontrast zum Akzent. Sechs Stufen, leicht zum Akzent hin gekippt, damit sie zur Farbe gehören statt danebenzustehen. Die Buntheit bleibt so klein, dass sie als Grau gelesen werden. Sie ersetzen die warmen Neutralen NICHT: Schrift und Haarlinien bleiben warm, das ist der Papier-Charakter der Marke. Grau besetzt Flächen, Abstufungen und technische Tabellen. --- */ --grau-1: #f1f6f8; /* hellste Fläche */ --grau-2: #e4ebed; --grau-3: #d0d9dc; --grau-4: #b6c0c2; /* kühle Linie */ --grau-5: #899598; /* 2.90:1, nur Flächen und Linien */ --grau-6: #5b6568; /* 5.65:1 auf Kalk, kühler Nebentext */ /* --- Zustandsfarben. Sind KEIN Akzent und ersetzen ihn nie. Jede hat einen hellen Zwilling für dunklen Grund. Die dunklen Werte fallen auf Dunkel durch (frei 3.48:1, stopp 2.87:1), deshalb dreht `.dunkel` sie mit. --- */ --frei: #3f7953; /* 4.86:1 auf Kalk, verfügbar, inbegriffen */ --frei-hell: #74b189; /* 7.17:1 auf Dunkel */ --achtung: #9c610d; /* 4.79:1 auf Kalk, Frist, Bedingung */ --achtung-hell: #ffb000; /* 9.79:1 auf Dunkel. Bernstein aus G */ --stopp: #b3301f; /* 5.89:1 auf Kalk, passt nicht, abgelaufen */ --stopp-hell: #e57d6b; /* 6.39:1 auf Dunkel */ /* --- Schriftfamilien --- Serif trägt Inhalt und Schlagzeilen. Sans trägt Bedienung und Etiketten. Mono trägt Belegcharakter: Aktenzeichen, Zeiten, Statuszeilen. */ /* Fraunces trägt Inhalt und Schlagzeilen. Variable Achse: bei großen Graden wirkt sie über `font-optical-sizing` automatisch schmaler und schärfer. */ --serif: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --sans: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --mono: 'DejaVu Sans Mono',ui-monospace,'SF Mono',Menlo,monospace; /* --- Schriftgrößen. Eine Leiter, keine Zwischenwerte. --- */ --t-display: clamp(32px, 4.6vw, 54px); /* Seitenanfang, ein Mal je Seite */ --t-kopf: clamp(26px, 3.4vw, 40px); /* Abschnittsanfang */ --t-frage: clamp(21px, 2.5vw, 27px); /* Wortmeldung des Betriebs */ --t-gross: 23px; /* Beleg, Kartenüberschrift */ --t-text: 19px; /* Fließtext */ --t-klein: 16px; /* Nebentext, Listen in Karten */ --t-meta: 12.5px; /* Randnotiz, Fußzeile */ --t-etikett: 11px; /* Versalien-Etikett */ --t-mono: 12px; --zeile-eng: 1.14; /* Schlagzeilen */ --zeile-mit: 1.4; /* Fragen, Belege */ --zeile-weit: 1.62; /* Fließtext */ /* --- Abstände. Vierer-Raster. --- */ --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:22px; --a6:32px; --a7:44px; --a8:62px; --a9:88px; --a10:120px; /* --- Maße --- */ --spalte: 720px; /* Lesespalte. Fließtext bleibt darunter. */ --breite: 1120px; /* Satzspiegel inklusive Randnotizen */ --rand: 32px; /* seitlicher Rand */ /* --- Radien. Das System ist flach, Papier hat keine Pillen. --- */ --r-klein: 2px; --r-mittel: 3px; /* --- Bewegung. Drei Dauern, eine Kurve. --- */ --z-zustand: 180ms; /* Hover, Fokus, Umschalten */ --z-objekt: 320ms; /* Karte hebt sich, Fläche wechselt */ --z-auftritt:560ms; /* Element tritt beim Lesen herein */ --kurve: cubic-bezier(.2,.7,.2,1); --schatten-karte: 0 1px 2px rgba(22,21,15,.14), 0 12px 28px rgba(22,21,15,.12); --schatten-hoch: 0 2px 4px rgba(22,21,15,.18), 0 24px 46px rgba(22,21,15,.18); } /* ----------------------------------------------------------------------------- 2 · GRUNDLAGEN -------------------------------------------------------------------------- */ .dsai, .dsai *{margin:0;padding:0;box-sizing:border-box} .dsai{ font-optical-sizing:auto; background:var(--grund); color:var(--ink); font-family:var(--serif); font-size:var(--t-text); line-height:var(--zeile-weit); -webkit-font-smoothing:antialiased; } .dsai .raum{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)} .dsai .lese{max-width:var(--spalte)} .dsai h1,.dsai h2,.dsai h3,.dsai h4{text-wrap:balance;font-weight:500;letter-spacing:-.015em} .dsai h1{font-size:var(--t-display);line-height:var(--zeile-eng)} .dsai h2{font-size:var(--t-kopf);line-height:1.1} .dsai h3{font-size:var(--t-gross);line-height:1.2} .dsai p{max-width:60ch} .dsai em{font-style:italic} .dsai a{color:var(--akzent)} .dsai :focus-visible{outline:2px solid var(--akzent);outline-offset:3px} /* Etikett. Versalien, Sans, immer klein. Benennt eine Rolle, nie einen Inhalt. */ .dsai .etikett{ font-family:var(--sans);font-size:var(--t-etikett);font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--ink-leise); } .dsai .etikett.akzent{color:var(--akzent)} .dsai .mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.03em} .dsai .zahl{font-variant-numeric:tabular-nums} /* Textauszeichnung. Der Akzent liegt als Fläche unter dem Wort, nicht darauf, damit der Text seinen vollen Kontrast behält. */ .dsai .betont{background:linear-gradient(transparent 62%,var(--akzent-hauch) 62%);padding:0 2px} .dsai .akzentwort{color:var(--akzent)} /* Dunkler Abschnitt. Kehrt die Tokens um, statt eigene Farben zu setzen. */ .dsai .dunkel{ background:var(--dunkel);color:var(--ink-hell); --ink:var(--ink-hell); --ink-leise:var(--ink-hell-leise); --linie:var(--linie-dunkel); --linie-stark:#4a4a47; --akzent:var(--akzent-hell); --grund:var(--dunkel); --grund-2:var(--dunkel-2); --frei:var(--frei-hell); --achtung:var(--achtung-hell); --stopp:var(--stopp-hell); } /* ----------------------------------------------------------------------------- 3 · BEDIENELEMENTE -------------------------------------------------------------------------- */ .dsai .knopf{ display:inline-block;font-family:var(--sans);font-size:13px;font-weight:600; text-decoration:none;padding:10px 19px;border-radius:var(--r-klein); background:var(--akzent);color:#fff;border:1.5px solid var(--akzent); cursor:pointer;transition:background var(--z-zustand) var(--kurve), border-color var(--z-zustand) var(--kurve); } .dsai .knopf:hover{background:var(--akzent-tief);border-color:var(--akzent-tief)} .dsai .knopf.leer{background:transparent;color:var(--ink);border-color:var(--ink)} .dsai .knopf.leer:hover{background:var(--ink);color:var(--grund)} .dsai .knopf.klein{padding:7px 14px;font-size:12px} .dsai .tat{display:flex;gap:var(--a3);flex-wrap:wrap;margin-top:var(--a6)} /* Zustandslampe. Zutat aus G. Zeigt einen echten Zustand, nie eine Eigenschaft. „Termine ab September" ist ein Zustand, „Festpreis" ist eine Eigenschaft und gehört in ein Etikett. */ .dsai .lampe{ display:inline-flex;align-items:center;gap:7px;font-family:var(--sans); font-size:var(--t-etikett);font-weight:700;letter-spacing:.1em; text-transform:uppercase;white-space:nowrap; } .dsai .lampe::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor} .dsai .lampe.frei{color:var(--frei)} .dsai .lampe.achtung{color:var(--achtung)} .dsai .lampe.stopp{color:var(--stopp)} /* ----------------------------------------------------------------------------- 4 · KOPF UND LESEFORTSCHRITT -------------------------------------------------------------------------- */ .dsai .kopfleiste{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--grund) 93%,transparent); backdrop-filter:blur(7px);border-bottom:1px solid var(--linie); } .dsai .kopfleiste .raum{display:flex;align-items:center;gap:var(--a5);height:62px} .dsai .marke{font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:-.02em; color:var(--ink);text-decoration:none} .dsai .marke span{color:var(--akzent)} .dsai .fortschritt{margin-left:auto;display:flex;align-items:center;gap:10px; font-family:var(--sans);font-size:var(--t-meta);color:var(--ink-leise)} .dsai .fortschritt .schiene{width:88px;height:3px;background:var(--linie); border-radius:2px;overflow:hidden} .dsai .fortschritt .schiene i{display:block;height:100%;width:0;background:var(--akzent)} /* ----------------------------------------------------------------------------- 5 · WORTMELDUNG · das tragende Bauteil aus H Ein Gespräch aus Frage und Antwort. Der Faden links zeigt, wo man steht. -------------------------------------------------------------------------- */ .dsai .faden{position:relative;padding-top:var(--a8)} .dsai .faden::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px; background:var(--linie)} .dsai .faden .puls{position:absolute;left:11px;top:0;width:2px;height:0; background:var(--akzent);transition:height .16s linear} .dsai .wort{position:relative;padding:0 0 var(--a8) 62px; max-width:calc(var(--spalte) + 62px)} .dsai .wort::before{content:'';position:absolute;left:4px;top:9px;width:16px;height:16px; border-radius:50%;background:var(--grund);border:2px solid var(--linie);z-index:2; transition:background var(--z-zustand) var(--kurve), border-color var(--z-zustand) var(--kurve)} .dsai .wort.aktiv::before{border-color:var(--akzent);background:var(--akzent)} .dsai .wort .sprecher{font-family:var(--sans);font-size:var(--t-etikett);font-weight:700; letter-spacing:.15em;text-transform:uppercase;color:var(--ink-leise); margin-bottom:var(--a3)} .dsai .wort.ich .sprecher{color:var(--akzent)} .dsai .wort.frage p{font-size:var(--t-frage);line-height:var(--zeile-mit); font-style:italic;max-width:38ch} .dsai .wort.antwort p+p{margin-top:var(--a3)} /* Randnotiz. Steht neben der Antwort, nie darin. Trägt Belegangaben und Nebeninformation, die den Lesefluss sonst unterbricht. */ .dsai .randnotiz{ position:absolute;left:calc(var(--spalte) + 92px);top:6px;width:230px; font-family:var(--sans);font-size:var(--t-meta);line-height:1.6; color:var(--ink-leise);border-top:2px solid var(--akzent);padding-top:var(--a3); } .dsai .randnotiz b{display:block;margin-bottom:var(--a1);color:var(--ink); font-size:var(--t-etikett);font-weight:700;letter-spacing:.1em;text-transform:uppercase} @media(max-width:1180px){ .dsai .randnotiz{position:static;width:auto;max-width:56ch;margin-top:var(--a5)} } /* ----------------------------------------------------------------------------- 6 · BELEG Eine geprüfte Aussage mit Urheber. Ohne Urheber ist es kein Beleg und darf dieses Bauteil nicht benutzen. -------------------------------------------------------------------------- */ .dsai .beleg{ border-left:3px solid var(--akzent);background:var(--grund-2); padding:var(--a4) var(--a5);margin:var(--a5) 0;max-width:56ch; } .dsai .beleg .satz{font-size:20px;line-height:var(--zeile-mit)} .dsai .beleg .wer{font-family:var(--sans);font-size:var(--t-etikett);font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--ink-leise); margin-top:var(--a3)} /* ----------------------------------------------------------------------------- 7 · AUFZÄHLUNG UND LISTE -------------------------------------------------------------------------- */ .dsai .punkte{list-style:none;margin:var(--a5) 0;max-width:58ch} .dsai .punkte li{padding:var(--a3) 0 var(--a3) 28px;position:relative; border-top:1px solid var(--linie)} .dsai .punkte li:last-child{border-bottom:1px solid var(--linie)} .dsai .punkte li::before{content:'';position:absolute;left:0;top:22px;width:14px;height:2px; background:var(--akzent)} .dsai .punkte b{font-weight:600} /* Zweispaltige Liste für Leistungen. Name links, Beschreibung rechts. */ .dsai .liste{width:100%;border-collapse:collapse;margin:var(--a5) 0;max-width:62ch} .dsai .liste td{padding:var(--a4) 0;border-top:1px solid var(--linie);vertical-align:top} .dsai .liste tr:last-child td{border-bottom:1px solid var(--linie)} .dsai .liste .n{font-family:var(--sans);font-weight:600;font-size:16px;width:184px; padding-right:var(--a5);letter-spacing:-.01em} .dsai .liste .b{color:var(--ink-leise);font-size:17.5px} /* ----------------------------------------------------------------------------- 8 · STUFEN DES ANGEBOTS Immer zwei. Die zweite ist hervorgehoben, weil sie das Ziel ist. -------------------------------------------------------------------------- */ .dsai .stufen{display:grid;grid-template-columns:1fr 1fr;gap:var(--a5);margin:var(--a5) 0; max-width:calc(var(--spalte) + 40px)} .dsai .stufe{border:1.5px solid var(--linie-stark);background:var(--grund-2); padding:var(--a5);display:flex;flex-direction:column} .dsai .stufe.ziel{border-color:var(--akzent);background:var(--akzent-hauch)} .dsai .stufe .rolle{font-family:var(--sans);font-size:10.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--akzent)} .dsai .stufe h3{margin:var(--a2) 0 var(--a2);font-size:24px} .dsai .stufe p{color:var(--ink-leise);font-size:17px} .dsai .stufe .preis{font-family:var(--sans);font-size:23px;font-weight:700; letter-spacing:-.02em;margin:var(--a3) 0 3px} .dsai .stufe .preis small{font-size:13px;font-weight:500;color:var(--ink-leise)} /* Konditionen stehen immer am Fuß der Stufe, nie im Fließtext daneben. */ .dsai .stufe .kondition{margin-top:auto;padding-top:var(--a4); border-top:1px solid var(--linie);font-family:var(--sans);font-size:11.5px; line-height:1.6;color:var(--ink-leise)} @media(max-width:760px){.dsai .stufen{grid-template-columns:1fr}} /* ----------------------------------------------------------------------------- 9 · PHASENMARKEN Die sechs Phasen der Methode. Erledigte tragen den Akzent, offene nicht. -------------------------------------------------------------------------- */ .dsai .phasen{display:flex;flex-wrap:wrap;gap:9px;margin:var(--a5) 0;max-width:62ch} .dsai .phase{font-family:var(--sans);font-size:12.5px;padding:7px 13px; border-radius:var(--r-klein);border:1px solid var(--linie-stark); color:var(--ink-leise);background:var(--grund-2)} .dsai .phase.erreicht{border-color:var(--akzent);color:var(--akzent); background:var(--akzent-hauch);font-weight:600} /* ----------------------------------------------------------------------------- 10 · ZUTAT AUS F · STEMPEL, KARTEIKARTE, HANDSCHRIFT Sparsam. Regeln in REGELN.md, Abschnitt Zutaten. -------------------------------------------------------------------------- */ /* Stempel. Nur für eine Freigabe oder einen Nachweis, nie als Schmuck. */ .dsai .stempel{ display:inline-block;transform:rotate(-4deg); border:3px double var(--akzent);color:var(--akzent);background:var(--grund); padding:6px 12px;border-radius:var(--r-mittel); font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;line-height:1.3;text-align:center;opacity:.86; } .dsai .stempel small{display:block;font-size:9px;letter-spacing:.08em;opacity:.9} /* Karteikarte. Für ein Ding, das man mitnimmt: der Use-Case-Katalog, ein Lead-Magnet, eine Vorlage. Nicht für Fließtext. */ .dsai .karteikarte{ background:var(--grund);padding:var(--a5) var(--a5) var(--a4);position:relative; border-radius:var(--r-klein);box-shadow:var(--schatten-karte); transition:transform var(--z-objekt) var(--kurve), box-shadow var(--z-objekt) var(--kurve); } .dsai .karteikarte::after{content:'';position:absolute;inset:0;pointer-events:none; border-radius:var(--r-klein);box-shadow:inset 0 0 0 1px rgba(22,21,15,.08)} .dsai .karteikarte .reiter{ position:absolute;top:-1px;left:24px;transform:translateY(-100%); background:var(--grund-3);padding:5px 12px 6px;border-radius:3px 3px 0 0; font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-leise); } .dsai .karteikarte .fuss{margin-top:var(--a4);padding-top:var(--a3); border-top:1px dashed var(--linie-stark);font-family:var(--sans); font-size:11.5px;color:var(--ink-leise)} .dsai a.karteikarte:hover,.dsai .karteikarte.hebt:hover{ transform:translateY(-5px);box-shadow:var(--schatten-hoch)} /* Handschrift. Höchstens eine Stelle je Seite, und nur für etwas, das Daniel wirklich am Rand notiert hätte. */ .dsai .handschrift{ font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive; color:var(--akzent);font-size:19px;line-height:1.35; transform:rotate(-2deg);display:inline-block; } /* ----------------------------------------------------------------------------- 11 · ZUTAT AUS G · TAFEL, STATUSBAND, FALLBLATT Für Kampagnenseiten und überall dort, wo Zeit oder Reihenfolge zählt. -------------------------------------------------------------------------- */ /* Tafelzeilen. Ablauf, Preisstaffel, Termine. Immer mit Kopfzeile. */ .dsai .tafel{width:100%;border-collapse:collapse;font-family:var(--sans)} .dsai .tafel th{ text-align:left;font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-leise);padding:var(--a3) var(--a4); border-bottom:2px solid var(--linie-stark);background:var(--grund-2); } .dsai .tafel td{padding:var(--a4);border-bottom:1px solid var(--linie); vertical-align:middle;font-size:15px} .dsai .tafel tr:last-child td{border-bottom:0} .dsai .tafel .nr{font-family:var(--mono);font-size:18px;font-weight:700; color:var(--akzent);width:76px;text-align:center;font-variant-numeric:tabular-nums} .dsai .tafel .ziel{font-weight:600;font-size:17px;white-space:nowrap} .dsai .tafel .was{color:var(--ink-leise);max-width:54ch} /* Statusband. Genau eines je Seite, direkt unter dem Seitenanfang. Trägt Tatsachen, keine Werbesätze. */ .dsai .statusband{ background:var(--akzent);color:#fff;overflow:hidden;white-space:nowrap; padding:9px 0; } .dsai .statusband .zug{display:inline-block;font-family:var(--sans);font-size:11.5px; font-weight:700;letter-spacing:.14em;text-transform:uppercase} .dsai .statusband span{padding:0 24px} @media(prefers-reduced-motion:no-preference){ .dsai .statusband .zug{animation:band 32s linear infinite} @keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}} } /* Fallblatt. Höchstens eine Schlagzeile je Seite, und nur auf Kampagnenseiten. */ .dsai .fallblatt{font-family:var(--mono);font-weight:700; font-size:clamp(24px,4.6vw,58px);line-height:1.16;letter-spacing:-.01em; display:flex;flex-wrap:wrap;gap:3px} .dsai .fallblatt .wort-block{display:flex;gap:3px;margin-right:.42em} .dsai .fallblatt .zeichen{ display:inline-grid;place-items:center;width:.72em;height:1.06em; background:var(--grund-2);color:var(--ink);position:relative; border-top:1px solid var(--grund-3);border-bottom:1px solid var(--linie-stark); } .dsai .fallblatt .zeichen::after{content:'';position:absolute;left:0;right:0;top:50%; height:1px;background:rgba(22,21,15,.14)} .dsai .fallblatt .zeichen.akz{color:var(--akzent)} .dsai .dunkel .fallblatt .zeichen{background:var(--dunkel-2);border-top-color:#2a2721; border-bottom-color:#0e0d0b} .dsai .dunkel .fallblatt .zeichen::after{background:rgba(0,0,0,.5)} @media(prefers-reduced-motion:no-preference){ .dsai .fallblatt .zeichen.faellt{animation:klapp .34s var(--kurve)} @keyframes klapp{ 0%{transform:rotateX(-88deg);filter:brightness(.4)} 60%{transform:rotateX(9deg);filter:brightness(1.08)} 100%{transform:none;filter:none} } } /* ----------------------------------------------------------------------------- 12 · ABSCHLUSS UND FUSSZEILE -------------------------------------------------------------------------- */ .dsai .abschluss{margin-top:var(--a5);padding-top:var(--a7); border-top:2px solid var(--ink);max-width:var(--spalte)} .dsai .abschluss h2{max-width:19ch} .dsai .abschluss p{color:var(--ink-leise);margin-top:var(--a4)} .dsai .fusszeile{margin-top:var(--a9);border-top:1px solid var(--linie); padding:var(--a5) 0 var(--a8);font-family:var(--sans);font-size:var(--t-meta); color:var(--ink-leise);display:flex;justify-content:space-between; gap:var(--a4);flex-wrap:wrap} .dsai .fusszeile a{color:var(--ink-leise);text-decoration:none} .dsai .fusszeile a:hover{color:var(--akzent)} /* ----------------------------------------------------------------------------- 13 · BEWEGUNG Grundregel: Sichtbarkeit ist die Grundstellung, Bewegung die Zugabe. Ein Element darf nie darauf angewiesen sein, dass eine Animation läuft. Der Schalter ?ruhig=1 und die Systemeinstellung schalten alles ab. -------------------------------------------------------------------------- */ @media(prefers-reduced-motion:no-preference){ .dsai .tritt-ein{opacity:0;transform:translateY(16px)} .dsai .tritt-ein.da{opacity:1;transform:none; transition:opacity var(--z-auftritt) ease, transform var(--z-auftritt) var(--kurve)} } .dsai.ruhig *,.dsai.ruhig *::before,.dsai.ruhig *::after{ animation:none!important;transition:none!important} .dsai.ruhig .tritt-ein{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .dsai, .dsai *,.dsai *::before,.dsai *::after{animation:none!important;transition:none!important} }