/* =========================================================== Daily Marketing — Fundament aller Blöcke Design System: High-Impact Minimalist Übernommen aus drafts/homepage/styles.css: 00 · Tokens 01 · Reset & Grundlagen (auf .dm-section gescoped, siehe unten) 02 · Geteilte Bausteine (.container, .eyebrow, .button, .btn) 15 · Motion (auf .dm-section gescoped) Neu dazugekommen ist der Utility-Layer am Ende: Abstand, Fläche und Inhaltsbreite lassen sich damit pro Blockinstanz im Editor umstellen. ⚠️ Warum der Reset gescoped ist: Dieses Stylesheet läuft in einer bestehenden WordPress-Installation mit GeneratePress. Ein globales `body { font-family: … }` würde das ganze Theme umschreiben. Die Grundtypografie hängt deshalb an .dm-section und vererbt von dort nach innen — jeder Abschnitts-Block trägt diese Klasse. =========================================================== */ /* =========================================================== 00 · Tokens =========================================================== */ :root { /* Colors */ --ink-black: #000001; --canvas-white: #ffffff; --surface: #f8f9fa; --surface-container-low: #f3f4f5; --surface-container: #edeeef; --surface-container-high: #e7e8e9; --on-surface: #191c1d; --on-surface-variant: #47464b; --inverse-surface: #2e3132; --inverse-on-surface: #f0f1f2; --outline: #78767b; --outline-variant: #c8c5cb; --accent-pink: #e71d68; /* Marken-Akzent: Marker, Play, Hover */ --accent-pink-ink: #b7004e; /* dunklere Stufe für Text auf Weiß */ --accent-blue: #5ba1f5; /* nur Fokus — 3 % */ --error: #ba1a1a; /* Flache Tönungen für die Hero-Flächen */ --tint-pink: #fadce7; --tint-blue: #e2edfd; /* Dunkle FAQ-Fläche: Text in reinem Weiß auf ink-black — Kontrast 21:1. Deckkraftstufen ausschließlich für Trennlinien. */ --faq-bg: var(--ink-black); --faq-text: var(--canvas-white); --faq-text-dim: var(--outline-variant); /* 12,3:1 auf Schwarz */ --faq-line: rgba(255, 255, 255, 0.16); --faq-line-strong: rgba(255, 255, 255, 0.34); /* Typography */ --font-display: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* =========================================================== Typoskala — VIER Inhaltsgrößen, mehr gibt es nicht. Diese vier Token sind die einzige Stelle, an der eine Textgröße für Überschriften und Fließtext festgelegt wird. Kein Block definiert `font-size` für Inhalt noch einmal selbst — er greift hier ab. Wer eine fünfte Stufe braucht, braucht in Wahrheit eine andere Hierarchie, nicht eine weitere Zahl. --fs-h1 Der Aufmacher einer Seite. Genau einmal pro Seite: die Hero-Headline. --fs-h2 Die Überschrift eines Abschnitts — und nur sie. Pro Abschnitt genau eine. --fs-h3 Alles darunter: Karten-, Kachel-, Zeilen-, Frage- und Zwischentitel. Auch die Leitkachel eines Rasters, obwohl sie größer wirken „müsste": auf H2 gesetzt stand sie im Test genauso groß da wie die Abschnittsüberschrift über ihr und hat sie überschrien. Ihren Vorrang holt sie sich aus Fläche, Ziffer und Position, nicht aus dem Grad. --fs-body Jeder Fließtext: Leads, Absätze, Listen, Tabellen- zellen, Beschreibungen. Die Arbeitsgröße. h4 hat KEINE eigene Größe — h4 ist --fs-body in 700. Dafür gibt es die Klasse .dm-h4 weiter unten. Hierarchie entsteht ab hier über Schnitt, Farbe, Laufweite und Weißraum — nicht über weitere Stufen. =========================================================== */ --fs-h1: clamp(44px, 6vw, 92px); --lh-h1: 1.04; --fs-h2: clamp(36px, 4.4vw, 64px); --lh-h2: 1.08; --fs-h3: 26px; --lh-h3: 32px; --fs-body: 18px; --lh-body: 28px; /* =========================================================== Funktionale Typografie — kein Fließtext, keine Überschrift. Diese Größen tragen keine Aussage, sie tragen eine Funktion: ein Etikett, eine Schaltfläche, eine Ziffer als Grafik. Sie stehen bewusst außerhalb der vier Inhaltsgrößen — ein Eyebrow in 18px wäre kein Eyebrow mehr. Trotzdem gilt auch hier: hier definiert, sonst nirgends. =========================================================== */ --fs-mono: 12px; --lh-mono: 16px; /* Eyebrow, Zähler, Meta, Chips (mono) */ --fs-label: 14px; --lh-label: 20px; /* Schaltflächen, CTA-Zeilen, Etiketten */ --fs-nav: 16px; --lh-nav: 24px; /* Seiten-Chrome: Menü, Formularfelder */ --fs-arrow: 20px; /* frei stehende Pfeil-Glyphe → */ /* Die großen Ziffern 01/02/03 und Monogramme. Zwei Stufen, weil eine Leitkachel ihre Ziffer bewusst größer trägt als die Kacheln daneben — dasselbe Element, zwei Ränge. Mehr Stufen gibt es nicht. */ --fs-numeral: clamp(44px, 4.6vw, 72px); --fs-numeral-lg: clamp(56px, 6.5vw, 104px); /* ---- Altnamen --------------------------------------------- Die frühere Hero-Skala (--fs-*) und die Artikel-Skala (--dm-*) laufen als Aliasse weiter, damit nichts außerhalb dieses Plugins bricht (Theme-CSS, Patterns, eingefügtes Markup). In neuem Code nicht mehr benutzen — sie zeigen nur noch auf die vier Größen oben. */ --fs-display: var(--fs-h1); --fs-mid: var(--fs-h3); --fs-small: var(--fs-label); --fs-index: var(--fs-mono); /* Spacing — 8px Raster */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --space-16: 128px; /* =========================================================== Abstandsrhythmus — DREI Fugen im Textfluss. --space-* ist das Raster (8px-Schritte, roh). Diese drei Token sagen, WELCHER Schritt für WELCHE Beziehung gilt. Ohne sie greift jeder Block einen Schritt nach Gefühl ab: dieselbe Beziehung „Überschrift → Text darunter" stand im Blocksatz gemessen auf 8px, 16px, 24px und 32px, je nachdem, in welchem Block man gerade war. --flow-tight Innerhalb EINER Einheit — Ziffer → Etikett, Begriff → Erklärung, Zeilen einer Anschrift. --flow Der Normalfall: Überschrift → Text, Absatz → Absatz, Text → Liste. Wer nichts Besonderes will, will das. --flow-loose Zwischen zwei Gruppen — Textblock → Kachelraster, Kopf → Inhalt. Grösser als --flow-loose ist keine Fuge mehr, sondern Abschnitts- polster: dafür gibt es die dm-pt-/dm-pb-Utilities weiter unten. =========================================================== */ --flow-tight: var(--space-1); /* 8px */ --flow: var(--space-3); /* 24px */ --flow-loose: var(--space-5); /* 40px */ /* Shape — scharf, keine Radien */ --radius: 0; --radius-full: 9999px; /* nur für die FAQ-Avatare */ /* Layout */ --container-max: 1400px; --container-narrow: 1100px; --margin-desktop: 64px; --margin-mobile: 30px; /* Seitenrand des .container unter 768px */ --gutter: 24px; --col-gap: 64px; /* FAQ-Spaltenabstand */ --cell-padding: 32px; /* Branchen-Raster */ } /* Erlaubt das Animieren von height:auto im FAQ (Chromium 129+) */ :root { interpolate-size: allow-keywords; } /* =========================================================== 01 · Grundlagen — gescoped auf die Blöcke =========================================================== */ .dm-section, .dm-section *, .dm-section *::before, .dm-section *::after { box-sizing: border-box; } .dm-section { color: var(--on-surface); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dm-section img { display: block; max-width: 100%; } .dm-section :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; } /* Der Editor hängt jeden Block in einen Wrapper. Damit vollbreite Abschnitte auch dort Kante an Kante stehen. */ .dm-section > .container { position: relative; } /* =========================================================== 02 · Geteilte Bausteine =========================================================== */ .dm-section .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); } /* ---- Eyebrow — Mono-Label mit pinkem Strich ---------------- */ .dm-section .eyebrow { position: relative; display: block; margin: 0 0 var(--space-3); padding-left: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; line-height: var(--lh-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); } .dm-section .eyebrow::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 3px; background: var(--accent-pink); } /* ---- Button (Hero, Leistungen) ---------------------------- */ .dm-section .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 56px; padding: 0 var(--space-4); border: 2px solid var(--ink-black); border-radius: 0; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-label); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } /* Die Farbe wird auf allen Zuständen festgenagelt. Grund: GeneratePress stylt a:hover mit der Spezifität (0,1,1) und schlägt damit eine einzelne Klasse. Gilt für jede Button-Familie und jeden Blocklink. */ .dm-section .button-primary, .dm-section .button-primary:visited { background: var(--ink-black); color: var(--canvas-white); } .dm-section .button-primary:hover, .dm-section .button-primary:focus, .dm-section .button-primary:active { background: var(--accent-pink-ink); border-color: var(--accent-pink-ink); color: var(--canvas-white); } .dm-section .button-secondary, .dm-section .button-secondary:visited { background: var(--canvas-white); color: var(--ink-black); } .dm-section .button-secondary:hover, .dm-section .button-secondary:focus, .dm-section .button-secondary:active { border-color: var(--accent-pink-ink); color: var(--accent-pink-ink); } /* ---- Pfeil im CTA-Label ------------------------------------ */ .dm-section .btn-arrow { transition: transform 0.18s ease; } .dm-section .button:hover .btn-arrow, .dm-section .btn:hover .btn-arrow, .dm-section .btn-primary:hover .btn-arrow { transform: translateX(4px); } /* ---- Btn (Zwischen-CTA, Kontaktformular) ------------------- */ .dm-section .btn, .dm-section .btn:visited { display: inline-flex; align-items: center; gap: var(--space-1); padding: 18px var(--space-4); background: var(--ink-black); border: 2px solid var(--ink-black); border-radius: 0; color: var(--canvas-white); font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-label); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .dm-section .btn:hover, .dm-section .btn:focus, .dm-section .btn:active { background: var(--accent-pink); border-color: var(--accent-pink); color: var(--canvas-white); } .dm-section .btn:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; } /* ---- Outbound-Pfeil als SVG ------------------------------- */ .dm-section .button-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.18s ease; } .dm-section .button:hover .button-arrow { transform: translateX(4px); } .dm-section .button:hover .button-arrow--out { transform: translate(3px, -3px); } /* ---- Sterne (Kundenstimmen, Proof) ------------------------ */ .dm-section .stars { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: 0.12em; color: var(--ink-black); } /* =========================================================== 89 · .dm-flow — der Container besitzt den Abstand, nicht das Kind Das Grundprinzip dieses Blocksatzes ist „Leer heisst weg": jedes Feld ist optional, jedes Element kann fehlen. Abstände, die als margin am KIND stehen, halten das nicht aus: - fällt das letzte Kind weg, bleibt sein Aussenabstand stehen; - fällt ein Kind in der Mitte weg, hängt die Fuge davon ab, welche zwei Nachbarn sich zufällig treffen; - schreibt irgendeine spätere Regel `margin: 0` (etwa um die Browser-Vorgabe einer