/* * 00-tokens.css — Dentalbloom * --------------------------------------------------------------------------- * Erzeugt aus export 3/01-tokens.json. Namensschema --db-. * Ab hier wird kein Literalwert mehr geschrieben: jede Farbe, Groesse, Zeit * und Kurve kommt aus dieser Datei. * * Wo unten "ERGAENZT" steht, kam der Wert im Entwurf messbar vor, fehlte aber * in 01-tokens.json. Wo "KORRIGIERT" steht, widersprachen sich Token und * Entwurf — nach Christians Entscheidung vom 26.08.2026 gewinnt der Entwurf. * --------------------------------------------------------------------------- */ :root { /* === Farbe ============================================================= */ --db-gruen: #1E4034; /* Marke, Vollflaechenblock, Fussbereich, Buttonfuellung */ --db-gruen-hover: #2B5A4A; /* Hover gefuellte Schaltflaeche, zweite Dockschaltflaeche */ --db-tinte: #1A1C19; /* H1/H2/H3, starke Auszeichnung, Burgerstriche */ --db-text-menue: #3A3F39; /* Menuelink Ruhezustand, Sprachangabe Topbar */ --db-text: #4E534C; /* Fliesstext, FAQ-Antwort, mobile Untermenuelinks */ --db-text-leise: #5A605A; /* Eyebrow, Labels, Meta, Topbarlinks, Bildunterschrift */ --db-creme: #F8F5EF; /* Text auf gruen, Kachel im Sandblock, helle Karte */ /* Die SEITENFLAECHE ist eine eigene Rolle, nicht dasselbe wie Creme. Im Entwurf trug der Body Creme; seit dem 27.08.2026 ist er weiss — der weisse Rahmen um die Kopfbereiche stiess sonst direkt an Creme, und genau diese Kante war sichtbar. Creme bleibt Creme, wo es Karten- oder Textfarbe ist. */ --db-seitenflaeche: #FFFFFF; --db-weiss: #FFFFFF; /* Topbar, Kopfzeile, Flyout, mobiles Menue, Hero-Flaeche Start */ --db-sand-hell: #F4F1EA; /* Hero-Panel Startseite, Flyout-Hover, Kostenkasten */ --db-sand: #EDE7DC; /* Sandblock, Zitat, Personenkarte, aktiver Untermenuepunkt */ --db-sand-tief: #E3DBCC; /* Bildplatzhalterflaeche, Galerieflaeche */ --db-creme-warm: #F3EFE7; /* Text auf gruen, stark */ --db-salbei-hell: #CFDBD3; /* Text auf gruen, normal */ --db-salbei: #9FB3A7; /* Text auf gruen, leise */ --db-salbei-mittel: #B7C7BC; /* Kartenlabel auf gruen */ /* Linien und Lasuren auf heller Flaeche Schreibweise durchgehend zweistellig (.08, .10, .22) — der Entwurf mischt .1 und .10; ein Textvergleich meldet dort sonst Falschtreffer. */ --db-linie-hell-08: rgba(26, 28, 25, .08); /* Unterkante Topbar */ --db-linie-hell-10: rgba(26, 28, 25, .10); /* Rahmen Flyout, Oberkante Mitgliedschaften */ --db-linie-hell-12: rgba(26, 28, 25, .12); /* Oberkante Hero-Leiste, Trennlinien */ --db-linie-hell-14: rgba(26, 28, 25, .14); /* Linke Kante mobiles Untermenue */ --db-linie-hell-16: rgba(26, 28, 25, .16); /* Rahmen Burgerschaltflaeche */ --db-linie-hell-18: rgba(26, 28, 25, .18); /* Rahmen Schliessen, Trennstriche Sprachangabe */ --db-linie-hell-20: rgba(26, 28, 25, .20); /* Rahmen FAQ-Plus, mobiler Aufklapper */ --db-linie-hell-22: rgba(26, 28, 25, .22); /* Rahmen Umriss-Schaltflaeche auf hell */ --db-linie-hell-30: rgba(26, 28, 25, .30); /* Strich vor der Zitatzuschreibung */ --db-gruen-lasur-05: rgba(30, 64, 52, .05); /* Hover Umriss-Schaltflaeche auf hell */ /* Linien und Lasuren auf gruener Flaeche */ --db-linie-dunkel-07: rgba(248, 245, 239, .07); /* Kartenflaeche auf gruen */ --db-linie-dunkel-10: rgba(248, 245, 239, .10); /* Hover Umriss-Schaltflaeche auf gruen */ --db-linie-dunkel-12: rgba(248, 245, 239, .12); /* Trennlinien Sprechzeiten auf gruen */ --db-linie-dunkel-14: rgba(248, 245, 239, .14); /* Kartenrahmen auf gruen */ --db-linie-dunkel-15: rgba(248, 245, 239, .15); /* Trennlinie ueber der Fusszeile */ --db-linie-dunkel-20: rgba(248, 245, 239, .20); /* Oberkante mobiles Dock */ --db-linie-dunkel-30: rgba(248, 245, 239, .30); /* Rahmen Schliessen im Buchungsfenster */ --db-linie-dunkel-35: rgba(248, 245, 239, .35); /* Rahmen Umriss + Icon-Quadrat auf gruen */ --db-creme-deckend-95: rgba(248, 245, 239, .95); /* Hinweisleiste im Buchungsfenster */ /* ERGAENZT — im Entwurf gemessen, in 01-tokens.json ohne Rolle */ --db-unterstreichung: rgba(30, 64, 52, .40); /* border-bottom der zwei Links in der Hero-Leiste */ --db-schraffur: rgba(30, 64, 52, .07); /* Streifenmuster auf der Platzhalterflaeche #praxis */ --db-hero-verlauf: linear-gradient(to top, rgba(23, 51, 40, .32), transparent 46%); /* === Schrift =========================================================== */ --db-schrift: "Geist", "Helvetica Neue", Helvetica, sans-serif; --db-schrift-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Ueberschriften. lh/ls folgen dem Entwurf, nicht der Tokendatei (Entscheidung 26.08.2026). "normal" heisst: der Entwurf setzt dort keine Zeilenhoehe. */ --db-h1-start-size: clamp(34px, 5.4vw, 60px); --db-h1-start-lh: 1.06; --db-h1-start-ls: -.035em; /* ERGAENZT — der Angst-Hero traegt eigene Werte (5.6vw/1.05), die der Token faelschlich mit h1-start zusammenfasst. Unterschied nur zwischen 630px und 1071px sichtbar, deshalb von 07-abnahme.txt nicht gefunden. */ --db-h1-angst-size: clamp(34px, 5.6vw, 60px); --db-h1-angst-lh: 1.05; --db-h1-angst-ls: -.035em; --db-h1-unterseite-size: clamp(30px, 4.6vw, 52px); --db-h1-unterseite-lh: 1.08; --db-h1-unterseite-ls: -.035em; --db-h1-rechtstext-size: clamp(30px, 4.4vw, 48px); --db-h1-rechtstext-lh: 1.08; /* KORRIGIERT, Token sagte 1.12 */ --db-h1-rechtstext-ls: -.035em; /* KORRIGIERT, Token sagte -.03em */ --db-h2-gross-size: clamp(30px, 4.2vw, 46px); --db-h2-gross-lh: 1.1; /* KORRIGIERT, Token sagte 1.12 */ --db-h2-gross-ls: -.03em; --db-h2-dunkel-size: clamp(28px, 3.8vw, 42px); --db-h2-dunkel-lh: normal; /* KORRIGIERT, Entwurf setzt keine */ --db-h2-dunkel-ls: -.03em; --db-h2-abschnitt-size: clamp(26px, 3.6vw, 38px); --db-h2-abschnitt-lh: 1.12; --db-h2-abschnitt-ls: -.03em; --db-h2-abschnitt-breit-size: clamp(26px, 3.6vw, 40px); --db-h2-abschnitt-breit-lh: 1.12; --db-h2-abschnitt-breit-ls: -.03em; --db-h2-faq-size: clamp(26px, 3.4vw, 36px); --db-h2-faq-lh: normal; /* KORRIGIERT, Token sagte 1.12 */ --db-h2-faq-ls: -.03em; --db-h2-bewertungen-size: clamp(24px, 3vw, 34px); --db-h2-bewertungen-lh: normal; /* KORRIGIERT, Token sagte 1.2 */ --db-h2-bewertungen-ls: -.025em; /* KORRIGIERT, Token sagte -.03em */ --db-h2-karriere-size: clamp(22px, 2.6vw, 30px); --db-h2-karriere-lh: normal; /* KORRIGIERT, Token sagte 1.2 */ --db-h2-karriere-ls: -.025em; /* KORRIGIERT, Token sagte -.03em */ --db-zitat-size: clamp(24px, 3.4vw, 38px); --db-zitat-lh: 1.32; --db-zitat-ls: -.025em; /* ERGAENZT — Aussage im Abschluss-Block. In 02 in Prosa beschrieben, ohne Tokenrolle. Achtung: bei 1440px deckungsgleich mit h2-bewertungen (34px), bei 375px 22px statt 24px. */ --db-abschluss-size: clamp(22px, 3vw, 34px); --db-menue-mobil-size: clamp(26px, 7.2vw, 38px); --db-menue-mobil-lh: 1.3; --db-menue-mobil-ls: -.03em; --db-h3-kachel-size: 21px; /* Titel Leistungskachel Startseite */ --db-h3-person-size: 22px; /* Name auf der Personenkarte */ /* ERGAENZT — haeufigste H3-Rolle ueberhaupt (87 Fundstellen in 16 Dateien): die Kacheln im Sandblock, Abschnitt 3 des Unterseiten-Schemas. */ --db-h3-kachel-klein-size: 19px; /* ERGAENZT — Initialen der Platzhalter-Personenkarten. Einziger Einsatz von Schnitt 300 im ganzen Projekt; ohne diesen Fund laedt man Geist 300 nicht. */ --db-initialen-size: clamp(28px, 3.4vw, 40px); --db-vorspann-size: 18px; --db-vorspann-lh: 1.62; --db-vorspann-lh-unterseite: 1.65; --db-frage-size: 18px; --db-lauftext-size: 16.5px; --db-lauftext-lh: 1.7; /* KORRIGIERT, Entwurf hatte sechs Werte (1.55-1.7) */ --db-lauftext-klein-size: 16px; --db-lauftext-kachel-lh: 1.68; /* ERGAENZT — Textzeile der Sandkacheln, 93 Fundstellen */ --db-lauftext-leistung-lh: 1.62; /* Textzeile der Leistungskachel, in 02 dokumentiert */ --db-eyebrow-size: 15.5px; --db-menue-size: 15.5px; --db-ui-size: 15px; --db-ui-klein-size: 14.5px; --db-label-size: 14px; --db-meta-size: 13.5px; --db-meta-lh: 1.55; /* ERGAENZT — drei Groessen ohne Tokenrolle */ --db-plus-size: 17px; /* +/- im 30px-Kreis der mobilen Untermenues */ --db-buchung-titel-size: 17px; /* "Termin buchen" im Buchungsfenster */ --db-hero-leiste-size: 17px; /* Fliesstext der Leiste unter dem Kopfbild */ --db-telefon-mobil-size: 20px; /* Telefonlink im mobilen Menuepanel */ --db-wortmarke-fuss-size: 24px; /* "dentalbloom" im Fussbereich, auf jeder Seite */ --db-sterne-size: 15px; /* Sternzeile der Bewertungskarte, ls .18em */ --db-buchung-hinweis-size: 12.5px; /* "Laedt die Buchung nicht?" */ --db-mikro-mono-size: 10px; --db-mikro-mono-ls: .16em; /* kicker-mono aus 01-tokens.json ist ersatzlos entfallen: die Rolle kommt in keiner der 19 Entwurfsdateien vor. Die vermeintlichen Treffer waren die Sternzeile (15px) und die Buchungs-Hinweisleiste (12.5px), beide ohne Mono-Familie und ohne uppercase. */ --db-w-leicht: 300; --db-w-normal: 400; --db-w-mittel: 500; --db-w-halbfett: 600; --db-w-fett: 700; /* === Radius ============================================================ */ --db-r-pille: 999px; --db-r-kachel: 14px; --db-r-panel: 16px; --db-r-karte: 18px; --db-r-feature: 22px; --db-r-rail: 999px 0 0 999px; --db-r-kantig: 0; /* Bogenform des Kopfbilds. ABWEICHUNG VOM ENTWURF, entschieden von Christian am 26.08.2026: Im Entwurf tragen nur Startseite und Angstpatienten einen Bogen, die 17 Unterseiten-Kopfbilder sind Rechtecke mit --db-r-karte. Kuenftig bekommen ALLE 19 Kopfbilder diesen Bogen. Damit entfaellt zugleich die dritte, undokumentierte Bogenform des Angst-Kopfbilds (gemessen 240px 240px 18px 18px) — sie ist hier aufgegangen. */ /* Echter Halbkreis ueber der oberen Haelfte, unten der Hausradius. Seit dem 27.08.2026 sind alle Kopfbilder quadratisch — bei einem Quadrat ergibt 50% genau die Kuppel, die Christian auf zahnboutique.ch gefallen hat (dort gemessen: 590x606, border-radius 50% 50% 0 0). Davor: 300px 300px 18px 18px auf einem 3/4-Hochformat. Einen eigenen Wert fuers Telefon braucht es nicht mehr — der frueher noetige Sonderweg (50%/37,5%) glich nur das Hochformat aus. */ --db-r-bogen: 50% 50% 18px 18px; /* === Raster ============================================================ */ --db-container: 1340px; --db-container-start: 1300px; --db-container-faq: 860px; --db-container-rechtstext: 56ch; --db-seitenrand: 28px; --db-seitenrand-links: clamp(20px, 4vw, 56px); --db-seitenrand-rechts: clamp(20px, 4vw, 76px); /* Spaltenmindestbreiten */ --db-spalte-kachel: 280px; --db-spalte-person: 340px; --db-spalte-zweispalt: 400px; --db-spalte-text: 420px; --db-spalte-gruen: 300px; --db-spalte-fuss: 280px; --db-gap-kachel: 20px; --db-gap-gruen: 22px; --db-gap-fuss: 48px; --db-gap-zweispalt: clamp(36px, 5vw, 64px); --db-gap-galerie: 18px; /* ERGAENZT — Deckelungen ohne Tokenrolle */ --db-breite-640: 640px; --db-breite-600: 600px; --db-breite-480: 480px; /* === Abstand =========================================================== */ --db-abschnitt-oben: 104px; --db-abschnitt-oben-start: 108px; --db-abschnitt-oben-weit: 118px; --db-abschnitt-oben-hero: 56px; --db-abschnitt-sand: 88px; --db-abschnitt-gruen: 94px; --db-abschnitt-gruen-oben: 108px; --db-fuss-oben: 80px; --db-fuss-unten: 32px; --db-fuss-innen-unten: 100px; /* ERGAENZT — inneres padding-bottom, effektiv 132px */ --db-fuss-abstand: 118px; --db-kopfzeile-hoehe: 104px; --db-topbar-hoehe: 44px; --db-dock-hoehe: 60px; --db-h-zu-raster: 52px; --db-h-zu-text: 22px; --db-absatz: 18px; /* === Schaltflaechen ==================================================== */ --db-btn-gross-hoehe: 56px; --db-btn-gross-polster: 0 30px; --db-btn-gross-size: 15.5px; --db-btn-standard-hoehe: 54px; --db-btn-standard-polster: 0 28px; --db-btn-standard-size: 15px; --db-btn-kompakt-hoehe: 50px; --db-btn-kompakt-polster: 0 26px; --db-btn-kompakt-size: 15px; --db-btn-fuss-polster: 0 24px; --db-btn-fuss-size: 14.5px; /* === Haltepunkte ======================================================= */ /* Nur diese zwei. Als Zahl fuer Berechnungen; Media Queries schreiben sie literal, weil @media keine custom properties liest. */ --db-hp-nav: 1200px; --db-hp-layout: 900px; /* === z-Ebenen ========================================================== */ --db-z-kopfzeile: 60; --db-z-dock: 70; --db-z-seitenleiste:70; --db-z-menue: 90; --db-z-buchung: 100; --db-z-sprunglink: 200; /* === Schatten ========================================================== */ --db-schatten-flyout: 0 24px 60px -34px rgba(26, 28, 25, .4); --db-schatten-kopfbild:0 40px 90px -56px rgba(30, 64, 52, .55); /* Der Entwurf traegt am Angst-Kopfbild eine zweite Fassung (-50px / .5). Vereinheitlicht auf den Token — der Unterschied ist bei keiner Fenstergroesse sichtbar. */ /* === Zeit und Kurve ==================================================== */ --db-t-schnell: 160ms; /* Flyout-Untermenue, Aktivstauchung */ --db-t-menuelink: 180ms; --db-t-ui: 200ms; /* Buttonflaeche, Flyout */ --db-t-pfeil: 300ms; /* Schaltflaechenpfeil Breite */ --db-t-pfeil-op: 240ms; /* Schaltflaechenpfeil Deckkraft */ --db-t-pfeil-kachel: 340ms; /* Kachelpfeil Breite, auch Rail-Breite */ --db-t-pfeil-kachel-op: 260ms; --db-t-karte: 420ms; /* Leistungskachel translateY */ --db-t-einblenden: 760ms; --db-t-overlay: 360ms; /* Buchungsfenster */ --db-t-menue: 400ms; /* mobiles Menuepanel */ --db-t-menue-punkt: 460ms; /* Menuepunkte, Staffelung 55ms x Index */ --db-t-faq: 760ms; /* FAQ max-height */ --db-t-faq-op: 620ms; /* FAQ Deckkraft, 90ms Verzoegerung */ --db-t-faq-tr: 700ms; /* FAQ transform, 90ms Verzoegerung */ --db-t-faq-verz: 90ms; --db-t-unter: 620ms; /* mobiles Untermenue max-height */ --db-t-unter-op: 520ms; /* dessen Deckkraft, 80ms Verzoegerung */ --db-t-unter-verz: 80ms; /* ERGAENZT — im Entwurf gemessen, in "zeit" nicht gefuehrt */ --db-t-bild: 900ms; /* Zoom Galerie- und Personenbilder */ --db-t-filter: 700ms; /* deren Saettigungswechsel */ --db-t-motiv: 1600ms; /* Motivwechsel Kopfbild */ --db-t-kenburns: 7000ms; /* Ken Burns */ --db-t-strich: 500ms; /* Strichfarbe der Slide-Schaltflaechen */ --db-kurve-weich: cubic-bezier(.16, 1, .3, 1); --db-kurve-aufklappen: cubic-bezier(.33, 1, .68, 1); --db-kurve-bild: cubic-bezier(.4, 0, .2, 1); /* Einblenden: Startwerte des Reveal-Effekts */ --db-reveal-versatz: 26px; --db-reveal-blur: 3px; /* Parallaxe: Grundamplitude, unter 900px mal 1.5 */ --db-parallax-basis: 120; /* Galerie: Ruhezustand der Bilder ist entsaettigt — gestalterisch gewollt, im Entwurf gemessen, in 03 und 04 nicht beschrieben. */ --db-bild-ruhe: saturate(.86) brightness(.97); --db-bild-hover: saturate(1.04) brightness(1); }