/* ========================================================================== DUDU Berlin – Design-Tokens Alle Werte stammen aus der Analyse der Originalseite: - style-custom.css (Theme-Customizer-Ausgabe, die eigentlichen Marken-Werte) - main.min.css (Bateaux-Theme 1.1.60) - Inline-Styles in index/dudu31 Quelle jeweils im Kommentar. Nichts erfunden. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Schriften – lokal eingebunden, keine Google Fonts (Datenschutz) Original lud vier TTF per @font-face unverschluesselt nach – hier lokal und https-fest. TODO Prompt 10: TTF (je ~165 KB) nach WOFF2 konvertieren und auf den benutzten Zeichensatz subsetten. Auf diesem Rechner ist noch kein woff2/fontTools installiert. -------------------------------------------------------------------------- */ @font-face { font-family: "DUDU Condensed"; src: url("assets/fonts/RobotoCondensed-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "DUDU Condensed"; src: url("assets/fonts/RobotoCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "DUDU Condensed"; src: url("assets/fonts/RobotoCondensed-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } /* Nur fuer den weissen Neon-Schriftzug im Hero: Roehrenbuchstaben mit gleichmaessiger Strichstaerke und runden Ecken, wie am Restaurant. Teilmenge mit nur den Zeichen D U 3 1 – 1,1 KB statt 197 KB. */ @font-face { font-family: "DUDU Neon"; src: url("assets/fonts/Comfortaa-Neon.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0044, U+0055, U+0031, U+0033, U+0020; } /* Jost (OFL) bleibt als zweite Wahl in der Kette. Lokal, variabel (Gewicht 100–900), Teilmenge Latin – 17 KB. Kein externer Aufruf. Lizenz: assets/fonts/OFL-Jost.txt */ @font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Cormorant Garamond (OFL) traegt jetzt alle Ueberschriften (Medium 500) und weiterhin das Zitat (Light 300 und Light Italic). Drei Dateien, Teilmenge Latin, lokal eingebunden – kein Aufruf bei Google. Lizenz: assets/fonts/OFL-CormorantGaramond.txt */ @font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/CormorantGaramond-Medium-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/CormorantGaramond-Light-latin.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/CormorantGaramond-LightItalic-latin.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "DUDU Sans"; src: url("assets/fonts/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------------------ 2. Farben Häufigkeit in style-custom.css: #f8b5c6 (85x), #222222 (77+40x), #ffffff (63+19x), #f9d9dd (34x), #dfdfdf (25x), #f5f5f5 (20x), #898989 (17x), #363636 (16x), #1d1d1d (15x), #a4a4a4 (10x) Zusätzlich inline im HTML, nicht im Stylesheet: #fd8350 (9x), #3c303f (4x) ------------------------------------------------------------------------ */ /* Marke: zwei Akzente. Rosé steht in style-custom.css, Orange inline im HTML. */ --c-accent: #f8b5c6; /* Rosé – Links, Buttons, Catering-Headline, ::selection */ --c-accent-soft: #f9d9dd; /* a:hover, a:focus */ --c-accent-warm: #fd8350; /* Orange – Scroll-Pfeil und Buttons auf Aubergine (9x inline) */ --c-aubergine: #3c303f; /* Abschnittsfläche und 10%-Schleier über Fotos (4x inline) */ /* Neutrale Achse */ --c-ink: #222222; /* Überschriften, Buttontext auf Rosé */ --c-ink-strong: #1d1d1d; /* dunkelste Flächen */ --c-ink-mid: #363636; /* Sekundärflächen dunkel */ --c-text: #898989; /* Fließtext (body-color im Original) */ --c-text-lesbar: #6f6f6f; /* dasselbe Grau, auf WCAG-AA-Kontrast abgedunkelt (4.9:1) */ --c-text-muted: #a4a4a4; /* Hinweise und Captions – NUR auf dunklem Grund. Auf Weiss erreicht dieser Ton 2,49:1 und ist damit unlesbar. Dafuer gibt es --c-text-leise. */ --c-text-leise: #767676; /* Hinweise und Captions auf hellem Grund, 4,54:1 */ --c-line: #dfdfdf; /* Trennlinien, Rahmen */ --c-surface-alt: #f5f5f5; /* leicht abgesetzte Flächen */ --c-surface: #ffffff; /* Grundfläche (body-background im Original) */ /* Overlays – exakt die rgba-Werte des Originals */ --c-overlay-dark: rgba(34, 34, 34, 0.9); --c-overlay-dark-soft: rgba(34, 34, 34, 0.7); --c-overlay-light: rgba(255, 255, 255, 0.9); --c-overlay-light-soft:rgba(255, 255, 255, 0.7); /* Schatten – aus den rgba(0,0,0,x)-Werten des Themes */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3); /* Farben, die es im Original nicht gab, weil es die Funktion nicht gab. Sie stehen trotzdem hier und nicht im Stylesheet, damit beim Umzug in ein WordPress-Theme wirklich nur diese eine Datei mitwandern muss. */ /* Formularfehler. Das Original hatte kein funktionierendes Formular. */ --c-fehler: #b3261e; /* 5.9:1 auf Weiss */ --c-fehler-hell: #ffb4ab; /* 7.5:1 auf --c-ink-mid, fuer dunkle Panels */ /* Berliner Verkehrslinien. Offizielle Farben der BVG und der S-Bahn Berlin, damit die Linienkennzeichen erkennbar sind statt nur dekorativ. */ --c-linie-s: #007a33; --c-linie-u: #0b3c8c; --c-linie-bus: #7a2382; /* Verlauf ueber dem Hero-Foto. Basis ist --c-ink (#222222), wie das Original-Overlay, nur als Verlauf statt als Flaeche. */ /* Die Stufen sind nicht geschaetzt, sondern gemessen: der Titel sitzt auf der hellen Bauchseite des Fisches, der Scroll-Hinweis auf dem Eis. Mit dem flachen 0.35-Overlay des Originals faellt beides unter 3:1. */ --hero-verlauf: linear-gradient(180deg, rgba(34, 34, 34, 0.45) 0%, rgba(34, 34, 34, 0.52) 45%, rgba(34, 34, 34, 0.88) 100%); /* Die Leiste: im Hero durchsichtig, ab 100 px Scrollweg dieser Grund mit Blur (Vorgabe), Uebergang 300 ms. */ --kopf-grund: rgba(23, 18, 26, 0.85); --kopf-blur: 12px; --dur-kopf: 300ms; /* Hintergrund hinter der Lightbox */ --c-backdrop: rgba(0, 0, 0, 0.85); /* Schlagschatten fuer freigestellte Objekte (Buch, Cover). Kein Karten-Schatten – nur dort, wo ein Gegenstand im Raum steht. */ --schatten-objekt: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22)); --schatten-objekt-klein: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)); /* Browserflaechen, die man nicht selbst zeichnet und die sonst Standardwerte behalten: Fokusring, Schreibmarke, Scrollbalken. */ /* Der Fokusring muss auf dem dunklen Grund der Seite sichtbar sein – #222222 war dort praktisch unsichtbar. */ --c-fokus: var(--akzent-rose); --fokus-dicke: 2px; --fokus-luft: 3px; /* ------------------------------------------------------------------------ weissen Neon-Schriftzug im Hero. Kuehlweiss, leicht ins Blaeuliche. Drei Lagen Schein: enger heller Kern, weicherer Schein, sehr weiter schwacher Lichthof. ------------------------------------------------------------------------ */ --neon-roehre: #FFFFFF; /* die Roehre selbst – Vorgabe */ /* Sieben Lagen, exakt nach Vorgabe der Korrekturrunde */ --neon-schein-text: 0 0 4px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 0.95), 0 0 16px rgba(220, 235, 255, 0.85), 0 0 32px rgba(200, 225, 255, 0.6), 0 0 64px rgba(180, 215, 255, 0.4), 0 0 110px rgba(160, 205, 255, 0.25), 0 0 180px rgba(140, 195, 255, 0.15); /* Der Lichthof hinter dem Schriftzug auf der Wand */ --neon-wand: radial-gradient(ellipse 140% 200% at 50% 50%, rgba(190, 220, 255, 0.28) 0%, rgba(190, 220, 255, 0.12) 35%, transparent 70%); --neon-font: "DUDU Neon", "Comfortaa", "Varela Round", "Arial Rounded MT Bold", sans-serif; --neon-tracking: 0.06em; --neon-schein-klein: var(--neon-schein-text); /* dieselbe Staffelung, keine Verkleinerung */ /* Handy: dieselben sieben Lagen, Radien auf 55 % */ --neon-schein-handy: 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, 0.95), 0 0 9px rgba(220, 235, 255, 0.85), 0 0 18px rgba(200, 225, 255, 0.6), 0 0 35px rgba(180, 215, 255, 0.4), 0 0 60px rgba(160, 205, 255, 0.25), 0 0 99px rgba(140, 195, 255, 0.15); --fs-neon-klein: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); /* 24 → 36 px */ /* ------------------------------------------------------------------------ Der Abend – die Palette der Korrekturrunde. Vorgegebene Werte, keine eigenen. Reines Schwarz und reines Weiss kommen nicht mehr vor; die einzige Ausnahme ist die Neonroehre, deren Weiss ebenfalls vorgegeben ist. ------------------------------------------------------------------------ */ --bg-tief: #17121A; /* fast schwarz, violettstichig: Hero, Uebergang, Galerie */ --bg-dunkel: #241C29; /* dunkles Aubergine: Story, Speisekarte, Buch, Info */ --bg-mittel: #332838; /* helleres Aubergine: Geschwister, Reservierung */ --akzent-orange: #D97A45; /* Hervorhebungen, Links, aktive Zustaende */ --akzent-rose: #E8C4CC; /* Buttons und Bedienelemente */ --text-hell: #F2EDE8; /* Ueberschriften, warmes Weiss */ --text-gedaempft: #A89CA8; /* Fliesstext auf dunklem Grund */ --linie-rose: rgba(232, 196, 204, 0.15); /* Trennlinien auf dunklem Grund */ /* Aeltere Namen aus dem ersten Abend laufen auf die Palette zu, damit nirgendwo ein zweiter Schwarzton entsteht. */ --c-nacht: var(--bg-tief); --c-schwarz: var(--bg-tief); /* Abdunklungsschichten ueber Fotos, in Tief statt Schwarz */ --text-schatten-nacht: 0 1px 12px rgba(23, 18, 26, 0.6); --schatten-unten: linear-gradient(180deg, rgba(23, 18, 26, 0) 28%, rgba(23, 18, 26, 0.55) 58%, rgba(23, 18, 26, 0.82) 100%); --c-text-nacht: var(--text-gedaempft); --c-text-nacht-leise: var(--text-gedaempft); --c-linie-nacht: var(--linie-rose); /* Der Hero: das Foto steht auf brightness(0.52) saturate(1.1) (Vorgabe). Beim Aussetzer des Neons legt sich zusaetzlich eine Schicht in Tief darueber: bei voll ausgefallener Roehre 0,42 – das Bild faellt dann von 0,52 auf etwa 0,30, ein Viertel des Ausschlags der Roehre. */ --hero-filter: brightness(0.52) saturate(1.1) sepia(0.06); --hero-dunkel-grund: 0; --hero-dunkel-hub: 0.48; /* Zeilenweise Texte: jede Zeile steigt hinter einer Kante hervor. Dauer je Zeile und Versatz von Zeile zu Zeile. */ /* Jeder Text faehrt von links ein (Vorgabe): 900 ms, 110 ms Versatz je Zeile, einmalig. Stationen: 150 ms nach dem ersten Bild. */ /* Hin- und Rueckweg: Ausblenden mit 55 % der Einblendzeit */ --dauer-zeichen-ein: 1000ms; --dauer-zeichen-aus: 550ms; --ease-weich: cubic-bezier(0.22, 1, 0.36, 1); /* Das einmalige Einblenden der Bilder (Vorgabe) */ --reihe-radius: var(--radius-klein); /* Fotos: eine Spur waermer (Vorgabe) */ --foto-waerme: saturate(1.08) sepia(0.06); /* Warme Lichtflecken an den Raendern, hoechstens 0,08 */ --lichtfleck: radial-gradient(closest-side, var(--akzent-orange) 0%, transparent 100%); --lichtfleck-deckung: 0.08; --vignette: radial-gradient(ellipse at center, transparent 30%, rgba(23, 18, 26, 0.75) 100%); /* Das Hero-Foto als Band auf dem Handy: eine Maske, die die untere Kante in die Nacht aufloest statt hart abzuschliessen. */ --band-maske: linear-gradient(180deg, rgb(23, 18, 26) 45%, rgba(23, 18, 26, 0.55) 75%, transparent 100%); /* Ein weicher dunkler Hof hinter Text auf hellen Bildstellen – Licht ohne Form, kein Kasten. */ --text-hof: radial-gradient(closest-side, rgba(23, 18, 26, 0.8) 0%, rgba(23, 18, 26, 0.38) 55%, rgba(23, 18, 26, 0) 100%); /* Derselbe Hof im Hero, unten links, wo die beiden Zeilen stehen: das Foto bleibt auf 0,52, nur hinter dem Text wird es Nacht. */ --hero-hof: radial-gradient(ellipse 75% 65% at 20% 80%, rgba(23, 18, 26, 0.9) 0%, rgba(23, 18, 26, 0.6) 40%, rgba(23, 18, 26, 0) 100%); /* Licht ohne Form: die Farben der Lampen und Kerzen im Gastraumfoto, nur als weiche Helligkeit. */ --licht-amber: rgba(255, 186, 102, 0.85); --licht-warm: rgba(255, 224, 178, 0.85); --licht-rose: rgba(240, 160, 165, 0.75); --licht-kuehl: rgba(214, 200, 255, 0.7); --licht-staub: rgba(255, 226, 190, 0.8); /* Auswahl-Markierung wie im Original */ --c-selection-bg: var(--c-accent); --c-selection-text: var(--c-ink); /* ------------------------------------------------------------------------ 3. Schrift-Rollen Original: Überschriften = Roboto Condensed Light, Fließtext = Roboto Medium, Buttons = Roboto Medium, uppercase ------------------------------------------------------------------------ */ /* Ueberschriften: Cormorant Garamond Medium, gemischte Schreibung, fast ohne Sperrung. Die kleinen Beschriftungen bleiben serifenlos in Versalien mit weiter Sperrung – der Gegensatz traegt die Seite. */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --fw-display-leicht: 500; /* Cormorant Garamond Medium */ --ls-display-gross: 0.01em; /* grosse Woerter und Abschnittsueberschriften */ --font-serif: "Cormorant Garamond", Georgia, serif; --font-condensed: "DUDU Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; --font-body: "DUDU Sans", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui: var(--font-body); --fw-display: 500; /* Cormorant Garamond Medium */ --fw-body: 500; /* Roboto Medium war der Original-Fließtext */ --fw-bold: 700; /* ------------------------------------------------------------------------ 4. Schriftgrößen Originalwerte (Desktop) aus style-custom.css: body 15px · h1 260px · h2 100px · h3 60px · h4 40px · h5 26px · h6 14px Inline zusätzlich gesehen: 360px, 200px, 120px, 20px, 16px, 12px --fs-*-raw = der Originalwert, unverändert dokumentiert --fs-* = mobile-first fluid, unten am Handy lesbar, oben auf dem Originalwert ausgelaufen. Das ist die einzige bewusste Abweichung: 260px Headline ist auf 390px Viewport nicht darstellbar. ------------------------------------------------------------------------ */ --fs-h1-raw: 260px; --fs-h2-raw: 100px; --fs-h3-raw: 60px; --fs-h4-raw: 40px; --fs-h5-raw: 26px; --fs-h6-raw: 14px; --fs-body-raw: 15px; /* Die ausgelieferte Skala. Durchgehend clamp, damit sie zwischen Handy und Desktop stufenlos mitwaechst. Angegeben ist jeweils der Wert bei 375 px und bei 1440 px Fensterbreite. Der Fliesstext liegt bewusst ueber dem Original: 15 px waren auf einer Seite, die so viel Weissraum stehen laesst, zu zaghaft. Untergrenze 18 px am Handy, 20 px am Desktop. Der Sprung von Fliesstext zu Abschnittsueberschrift betraegt Faktor 2,4 am Handy und Faktor 4 am Desktop. */ --fs-hero: clamp(4.5rem, 22vw, 16.25rem); /* 72 → 260 px, alte Fassung */ --fs-hero-titel: clamp(2.4rem, 6vw, 5.6rem); /* die Hauptzeile in Cormorant */ /* Vorgabe war clamp(1.4rem, 7vw, 2.2rem) – damit lief "JAPANESE CRAFTSMANSHIP" bei 375 px auf 425 px und wurde abgeschnitten (335 px Platz). 5.4vw ist das groesste Mass, bei dem beide Zeilen bei 320 und 375 px stehen; Deutsch ("JAPANISCHE HANDWERKSKUNST") braucht 4.6vw. */ /* Cormorant laeuft schmaler als die frueher gesetzte Josefin und traegt keine Sperrung mehr: die Zeile darf deutlich groesser werden. */ --fs-hero-titel-handy: clamp(1.6rem, 8.4vw, 3rem); --fs-hero-titel-handy-de: clamp(1.45rem, 7.4vw, 3rem); --ls-hero: 0.01em; --ls-hero-handy: 0.01em; --ws-hero: normal; --lh-hero: 1.18; --hero-text-unten: 26vh; /* Lage des Textblocks, Vorgabe */ --hero-text-unten-handy: 30vh; /* Unterkante der Hauptzeile auf dem Handy: ueber dem Catch-Streifen (120 px hoch) plus 20 px Luft. Wird in styles.css per max() verrechnet. */ --titel-unten-mindestens: calc(16px + 48px + 12px + 2 * 44px + 10px + 16px + 120px + 20px); --fs-h1: clamp(3.25rem, 1.9rem + 5.8vw, 6.25rem); /* 52 → 100 px */ --fs-h2: clamp(2.2rem, 5vw, 4.5rem); /* Abschnittsueberschriften, Vorgabe */ --fs-h3: clamp(2rem, 1.3rem + 3vw, 3.25rem); /* 32 → 52 px */ --fs-h4: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); /* 24 → 32 px */ --fs-h5: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); /* 20 → 24 px */ --fs-h6: clamp(1rem, 0.94rem + 0.25vw, 1.0625rem); /* 16 → 17 px */ --fs-lead: clamp(1.375rem, 1.1rem + 1.15vw, 1.75rem); /* 22 → 28 px */ --fs-base: clamp(1.05rem, 1.5vw, 1.35rem); /* Fliesstext, Vorgabe */ --fs-small: clamp(1rem, 0.94rem + 0.25vw, 1.0625rem); /* 16 → 17 px */ --fs-micro: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13 → 14 px */ /* ------------------------------------------------------------------------ 5. Zeilenhöhen – die im Theme tatsächlich verwendeten Werte ------------------------------------------------------------------------ */ --lh-tight: 1; /* große Display-Headlines */ --lh-heading: 1.08; /* je größer die Schrift, desto enger der Satz */ --lh-snug: 1.3; --lh-normal: 1.45; --lh-body: 1.75; /* Vorgabe High-End-Ruhe */ --lh-body-raw: 1.78571; /* der Wert des Themes, dokumentiert */ /* ------------------------------------------------------------------------ 6. Laufweite – aus main.min.css ------------------------------------------------------------------------ */ --ls-display: -0.01em; /* große Headlines laufen leicht enger */ --ls-normal: 0; --ls-wide: 0.075em; /* häufigster Wert – Navigation, Kleintext */ --ls-wider: 0.1em; /* Buttons, Labels in Versalien */ /* ------------------------------------------------------------------------ 7. Abstände Beobachtete Werte: 6, 10, 20, 30, 60, 100 px ------------------------------------------------------------------------ */ --sp-3: 6px; --sp-5: 10px; --sp-10: 20px; --sp-15: 30px; --sp-30: 60px; --sp-50: 100px; /* Vertikaler Abschnitts-Rhythmus, mobile first */ /* Mit der groesseren Schrift braucht auch die Flaeche mehr Luft, sonst wirkt der Text gedraengt statt selbstbewusst. */ /* Grosszuegigkeit (Vorgabe "High-End-Ruhe"): weite Abschnitte, viel Luft */ --section-py: clamp(6rem, 12vh, 10rem); /* Handy */ --section-py-gross: clamp(10rem, 18vh, 18rem); /* ab 768 px */ --section-py-lg: var(--section-py); --abstand-titel: 3.5rem; /* Ueberschrift -> Fliesstext */ --abstand-bild: 5rem; /* Fliesstext -> Bild */ --abstand-block: 4rem; /* zwei Textbloecke */ --rand-seite: clamp(2rem, 8vw, 10rem); /* Helle Flaeche (Kapitel 02) – Vorgabe */ --bg-hell: #F5F1EC; --text-auf-hell: #1A1418; /* Die Tafel am rechten Rand des Heros. Dasselbe Papierweiss wie die Karte auf der Catch-of-the-Day-Seite. Beide Textfarben darauf ueber 4,5:1. */ --papier-karte: #F4EEE4; --tafel-label: #9A5A38; --tafel-fuss: #4A4048; --text-hell-gedaempft: #4A4048; --linie-auf-hell: rgba(26, 20, 24, 0.12); --akzent-orange-auf-hell: #9E4B1E; /* das Orange, auf #F5F1EC abgedunkelt: 5,3:1 (#D97A45 laege bei 2,7:1) */ --strang-dunkel: rgba(232, 196, 204, 0.18); --strang-hell: rgba(26, 20, 24, 0.15); /* Der Vorhang: Kurve und Dauern der Vorgabe */ --ease-vorhang: cubic-bezier(0.65, 0, 0.35, 1); /* Die Geschichte: Kapitel */ --kap-abstand: clamp(6rem, 12vh, 10rem); --kap-abstand-gross: clamp(10rem, 20vh, 18rem); --fs-kap-titel: clamp(2.2rem, 5.5vw, 5rem); --fs-kap-text: clamp(1.25rem, 2vw, 1.7rem); /* ------------------------------------------------------------------------ 8. Raster – aus dem Inline-Style des Original-Containers: width:90%; max-width:1140px; Spalten-Gutter 30px ------------------------------------------------------------------------ */ --container-width: 90%; --container-max: 1140px; --gutter: var(--sp-15); /* 30px */ --measure: 42ch; /* Lesebreite, Vorgabe */ /* ------------------------------------------------------------------------ 9. Buttons – Originalwerte aus style-custom.css padding 12.5px 24px · border-radius 35px · border-width 1px Versalien, Roboto Medium ------------------------------------------------------------------------ */ --btn-py: 12.5px; --btn-px: 24px; --btn-radius: 35px; --btn-border: 1px; --btn-font: var(--font-ui); --btn-transform: uppercase; --btn-tracking: var(--ls-wider); /* Mindest-Touchfläche – Originalbutton misst nur 45px hoch */ --tap-min: 44px; /* Der feste Reservieren-Knopf. Beide Werte stehen hier, weil sich auch die Zeilen unten im Hero danach richten (Scroll-Pfeil, "since 2008", Uhrzeit): sie ruecken ueber den Knopf. */ --cta-unten: calc(16px + env(safe-area-inset-bottom, 0px)); --cta-hoehe: 48px; /* ------------------------------------------------------------------------ 10. Navigation – aus style-custom.css ------------------------------------------------------------------------ */ --navbar-height: 90px; /* .btx-navbar--custom */ --navbar-offset: 70px; /* .btx-content-wrapper padding-top */ /* ------------------------------------------------------------------------ 11. Form Eine einzige Regel, damit nichts nach zusammengewuerfeltem Baukasten aussieht: Bedienelemente sind Pillen, Flaechen sind scharfkantig. Die Pille stammt aus dem Original (border-radius 35px auf jedem Button), die scharfe Kante ebenfalls: das Original kennt keine einzige Karte, keinen Rahmen und keinen Schatten um einen Inhaltsblock. ------------------------------------------------------------------------ */ /* Die Eckenradien der Seite – drei Stufen, mehr gibt es nicht */ --radius-klein: 4px; /* Bilder, Kacheln, kleine Flaechen */ --radius-mittel: 14px; /* Karten und Nachrichten */ --radius-pille: 999px; /* Knoepfe, Eingaben, Marken */ --radius-interaktiv: var(--radius-pille); /* alter Name, bleibt gueltig */ --radius-flaeche: 0; /* vierte Stufe der Skala: bewusst scharf */ --hairline: 1px; /* die einzige erlaubte Linie */ /* ------------------------------------------------------------------------ 12. Bewegung Kurven nach Emil Kowalski. Die eingebauten CSS-Easings sind zu schwach; diese drei sind die belegten Werte, nicht selbst gebastelt. UI bleibt unter 300 ms. Nur der eine erzaehlende Moment darf laenger. ------------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Ein- und Austritt */ --ease-inout: cubic-bezier(0.77, 0, 0.175, 1); /* Bewegung auf dem Schirm */ --ease-panel: cubic-bezier(0.32, 0.72, 0, 1); /* Schubladen, Panels */ --dur-druck: 120ms; /* Tastendruck */ --dur-fast: 180ms; /* Hover, Farbwechsel */ --dur-ui: 240ms; /* Panel, Overlay, Lightbox */ --dur-erzaehl: 700ms; /* laengere, erzaehlende Bewegung */ /* Die Wortdrehung im Umschalter. Laenger als die 300-ms-Grenze fuer Bedienung, weil sie kein Bedienschritt ist, sondern den Zustandswechsel erzaehlt – und weil sie selten vorkommt. */ --reveal-shift: 16px; /* Der Zeiger ueber Klickbarem: zwei gekreuzte Staebchen, eigenes SVG, 32 x 32, Klickpunkt in der Mitte, dunkle Kontur fuer helle Flaechen. Immer mit Fallback "pointer" – ohne ihn verschwaende der Zeiger, wenn die Grafik nicht laedt. Nur bei Maus (hover + feiner Zeiger). */ --zeiger-staebchen: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cg stroke-linecap=%22round%22 fill=%22none%22%3E%3Cg stroke=%22rgba(23,18,26,0.5)%22 stroke-width=%224%22%3E%3Cpath d=%22M6 26L26 6%22 transform=%22rotate(-18 16 16)%22/%3E%3Cpath d=%22M6 6L26 26%22 transform=%22rotate(18 16 16)%22/%3E%3C/g%3E%3Cg stroke=%22#D97A45%22 stroke-width=%222.5%22%3E%3Cpath d=%22M6 26L26 6%22 transform=%22rotate(-18 16 16)%22/%3E%3Cpath d=%22M6 6L26 26%22 transform=%22rotate(18 16 16)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 16 16, pointer; /* Das Staebchen-Menue: zwei Striche, exakt nach Vorgabe */ --staebchen-laenge: 34px; --staebchen-dicke: 2px; --staebchen-abstand: 9px; --dur-staebchen: 380ms; --ease-staebchen: cubic-bezier(0.22, 1, 0.36, 1); /* Die Kurve des einen Auftritts (Vorgabe) */ --ease-auftritt: cubic-bezier(0.22, 1, 0.36, 1); /* Die Dauern der Bedienung – drei Stufen, mehr braucht die Seite nicht. Die erzaehlenden Dauern (Einblenden 700 ms, Karte 900 ms, Nachricht 650 ms) sind bewusst laenger und stehen an ihrer Stelle. */ --dur-druck: 120ms; /* Druck, Rueckmeldung unter dem Finger */ --dur-ui: 250ms; /* Farbe, Rand, kleine Verschiebungen */ --dur-weich: 400ms; /* Ein- und Ausblenden von Flaechen */ /* ------------------------------------------------------------------------ 13. Ebenen ------------------------------------------------------------------------ */ --z-base: 0; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-cookie: 500; --z-kopf: 1000; /* die Leiste mit den Staebchen, ueber allem */ } /* -------------------------------------------------------------------------- 14. Breakpoints Das Theme arbeitet mit 480 / 767–768 / 960–961 / 1024–1025 / 1200. Custom Properties funktionieren nicht in @media – darum als Referenz: --bp-sm: 480px --bp-md: 768px --bp-lg: 961px --bp-xl: 1025px --bp-2xl:1200px -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 15. Pflicht aus Kapitel 5: Bewegung abschaltbar -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-druck: 1ms; --dur-fast: 1ms; --dur-ui: 1ms; --dur-erzaehl: 1ms; --reveal-shift: 0px; } }