/* ═══════════════════════════════════════════════════════════════════════════ TRECKERPARTY IM BÜSCH — DAS FUNDAMENT ─────────────────────────────────────────────────────────────────────────── Die EINE Grundschicht des öffentlichen Frontends. Alles, was mehr als eine Seite betrifft, steht hier — und NUR hier. Seiten-/Sektions-Regeln gehören in tp-neuaufbau/sektionen/.css und bauen auf den Token unten auf. REGELN FÜR ALLE, DIE HIER AUFSETZEN 1. Nie einen rohen Farbwert, keine rohe Schriftgröße, keinen rohen Abstand schreiben. Immer ein Token. Fehlt eins → hier ergänzen, nicht dort erfinden. 2. Klassennamen sind unantastbar (JS-, Editor- und Reveal-Bindungen). Umgestaltet wird die REGEL, nie der NAME. 3. Kein `display:none` auf bestehende Klassen. Kein !important ohne Notiz. 4. Sektionskopf: eine Achse. Der Kopf ist zentriert — Kicker, Linie, Headline, Lead stehen auf derselben Mitte. Kein Kicker links + Headline rechts. LADEREIHENFOLGE IM tp-brand-tokens (design.php) → tp-hardening (100) → DIESE DATEI (101) → sektionen/*.css → tp-header-styles / tp-footer-styles (im ) ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · TOKEN — Farbe, Ton, Typo, Raster, Rhythmus ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 1.1 TONWERTE HELL ───────────────────────────────────────────────── Drei Papierstufen. Mehr gibt es nicht. */ --tp-paper : #F3EFE8; /* Grundfläche, Standard-Kapitel */ --tp-paper-deep : #E8E2D6; /* eine Stufe tiefer, „Sand"-Kapitel */ --tp-surface : #FCFAF6; /* Karte auf Papier */ /* ── 1.2 TONWERTE DUNKEL ─────────────────────────────────────────────── Nie reines Schwarz — Maschinen-Blauschwarz, damit Fotos nicht absaufen. */ --tp-d0 : #0F1115; /* tiefste Fläche, Hero-Grund */ --tp-d1 : #171A20; /* dunkles Kapitel */ --tp-d2 : #21252C; /* Karte auf Dunkel */ --tp-d3 : #2B3038; /* gehobene Karte / Hover */ --tp-d4 : #3A404A; /* NUR Linien & Trenner, NIE Textgrund */ /* ── 1.3 SCHRIFTFARBEN — alle gemessen ≥ 4.5:1 ───────────────────────── Hell-Ast gemessen gegen die dunkelste Papierstufe (#E8E2D6), Dunkel-Ast gegen die hellste Dunkelstufe (#3A404A). */ --tp-ink : #16181C; /* Fließtext hell · 13.5:1 */ --tp-ink-2 : #545A64; /* Sekundär hell · 5.4:1 */ --tp-ink-3 : #5A6069; /* Mono-Etikett · 4.9:1 */ --tp-ondark : #F3EFE8; /* Fließtext dunkel· 13.4:1 (auf d2) */ --tp-ondark-2: #BAC0C9; /* Sekundär dunkel · 5.7:1 */ --tp-ondark-3: #A9B0BB; /* Mono-Etikett · 4.8:1 */ /* ── 1.4 SIGNAL ROT ──────────────────────────────────────────────────── --tp-red ist FLÄCHE (Weiß darauf = 4.9:1), nie Fließtext auf Papier. Für rote SCHRIFT gibt es zwei eigene Werte. */ --tp-red : #E30613; /* Fläche, Linie, Punkt, Button */ --tp-red-dark : #B7040F; /* Button-Hover */ --tp-red-ink : #C8050F; /* rote SCHRIFT auf hell · 4.7:1 */ --tp-red-lift : #FF6E76; /* rote SCHRIFT auf dunkel · 4.9:1 (auf d3) */ /* ── 1.5 HAARLINIEN — genau zwei ───────────────────────────────────── */ --tp-hair-l : rgba(22,24,28,.14); --tp-hair-d : rgba(243,239,232,.17); --tp-hair-l-w : rgba(22,24,28,.055); /* Rasterlinien hell */ --tp-hair-d-w : rgba(243,239,232,.05); /* Rasterlinien dunkel */ /* ── 1.6 TYPO-SKALA — 7 Stufen, Faktor 1,4. Zwischenwerte gibt es nicht. 94 · 67 · 48 · 34 · 24 · 17 · 12 */ --tp-fs-hero : clamp(52px, 7.30vw, 94px); /* nur Hero-H1 */ --tp-fs-d1 : clamp(40px, 5.21vw, 67px); /* Riesenzahl, Zäsur */ --tp-fs-d2 : clamp(31px, 3.72vw, 48px); /* Sektionskopf-H2 */ --tp-fs-d3 : clamp(24px, 2.66vw, 34px); /* Gruppen-/Kartentitel H3 */ --tp-fs-lead : clamp(19px, 1.90vw, 24px); /* Lead / Intro */ --tp-fs-body : 17px; /* Fließtext — nie kleiner */ --tp-fs-mono : 12px; /* Mono-Etikett, Tag, Zeit */ --tp-lh-display : 1.02; --tp-lh-lead : 1.55; --tp-lh-body : 1.65; --tp-ls-display : .006em; --tp-ls-mono : .24em; --tp-font-display : 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif; --tp-font-text : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --tp-font-mono : 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Zeilenlänge — 60–75 Zeichen. Diese drei Breiten, keine anderen. */ --tp-measure : 68ch; /* Fließtext */ --tp-measure-lead : 34em; /* Lead (größere Schrift → weniger em) */ --tp-measure-head : 16em; /* Headline, damit sie 2–3 Zeilen bricht */ /* ── 1.7 RASTER ──────────────────────────────────────────────────────── Ein Satzspiegel, 12 Spalten, ein Steg. Alles Weitere leitet sich ab. */ --tp-shell : 1320px; /* EIN Satzspiegel — Leiste wie Inhalt. 1320 statt 1200: die Kopfleiste braucht gemessene 1241 px (Marke 306 + Nav 554 + zwei Handlungen 327 + Stege). Bei 1200 lief die Nav in den Marken-Block. 1320/12 = 110 px Spalte — das Raster bleibt glatt. */ --tp-shell-wide : var(--tp-shell); /* Alias: es gibt nur EINE Kante */ --tp-shell-n : 680px; /* schmaler Satzspiegel für Fließtextseiten. 800px ergab bei 17px/Zeile gemessene 89 Zeichen — über der 60–75-Vorgabe. 680px landet bei ~76 und trifft damit auch die Breite der Impressum-Spalte (668px). */ --tp-bleed : 22px; /* Seitenrand mobil */ --tp-cols : 12; --tp-gap : 24px; /* Steg */ --tp-gap-lg : 32px; /* ── 1.8 ABSTANDS-RHYTHMUS — Vielfache von 8, sonst nichts ───────────── */ --tp-s1 : 8px; --tp-s2 : 16px; --tp-s3 : 24px; --tp-s4 : 32px; --tp-s5 : 48px; --tp-s6 : 64px; --tp-s7 : 96px; --tp-sec : clamp(72px, 9vw, 128px); /* Sektions-Innenabstand */ --tp-sec-tight : clamp(48px, 6vw, 80px); /* kurze Zwischenkapitel */ --tp-head-gap : var(--tp-s6); /* Kopf → Inhalt */ /* ── 1.9 FORM ──────────────────────────────────────────────────────────*/ --tp-r-ui : 6px; /* Button, Pill, Eingabe */ --tp-r-fl : 12px; /* Karte, Fläche, Bild */ --tp-ease : cubic-bezier(.2,.8,.2,1); --tp-dur : .2s; --tp-tap : 44px; /* Touch-Target (aus Audit, bleibt) */ /* ── 1.10 MATERIAL — Flächen, die nicht flach sind ────────────────────*/ --tp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --tp-mat-dark : radial-gradient(120% 78% at 50% -12%, var(--tp-d3) 0%, rgba(43,48,56,0) 62%), linear-gradient(180deg, var(--tp-d1) 0%, var(--tp-d0) 100%); --tp-mat-ink : radial-gradient(90% 70% at 50% 0%, #191D24 0%, rgba(15,17,21,0) 70%), linear-gradient(180deg, var(--tp-d0) 0%, #0B0D10 100%); --tp-mat-sand : linear-gradient(180deg, #EDE7DC 0%, var(--tp-paper-deep) 100%); --tp-veil : linear-gradient(180deg, rgba(15,17,21,.86) 0%, rgba(15,17,21,.42) 38%, rgba(15,17,21,.62) 72%, rgba(15,17,21,.95) 100%); --tp-shadow-card : 0 18px 44px -22px rgba(22,24,28,.45); /* ── 1.11 HEADER — eine Höhe, überall gleich, für scroll-margin ───────*/ --tp-hd-h : 100px; /* ═══════════════════════════════════════════════════════════════════════ 1.12 ALIASSE --nb-* · NICHT ENTFERNEN Die acht Sektions-Stylesheets und 00-start.css sind auf --nb-* gebaut. Sie zeigen jetzt auf die Token oben, damit es genau EINE Wahrheit gibt. Neuer Code benutzt --tp-*. ═══════════════════════════════════════════════════════════════════════ */ --nb-paper: var(--tp-paper); --nb-paper-deep: var(--tp-paper-deep); --nb-surface: var(--tp-surface); --nb-ink: var(--tp-ink); --nb-ink-2: var(--tp-ink-2); --nb-ink-3: var(--tp-ink-3); --nb-d0: var(--tp-d0); --nb-d1: var(--tp-d1); --nb-d2: var(--tp-d2); --nb-d3: var(--tp-d3); --nb-d4: var(--tp-d4); --nb-ondark: var(--tp-ondark); --nb-ondark-2: var(--tp-ondark-2); --nb-ondark-3: var(--tp-ondark-3); --nb-red: var(--tp-red); --nb-red-dark: var(--tp-red-dark); --nb-red-lift: var(--tp-red-lift); --nb-hair-l: var(--tp-hair-l); --nb-hair-d: var(--tp-hair-d); --nb-r-ui: var(--tp-r-ui); --nb-r-fl: var(--tp-r-fl); --nb-shell: var(--tp-shell); --nb-gap: var(--tp-gap); --nb-sec: var(--tp-sec); --nb-fs-xl: var(--tp-fs-hero); --nb-fs-l: var(--tp-fs-d2); --nb-fs-m: var(--tp-fs-d3); --nb-fs-s: var(--tp-fs-lead); --nb-fs-lead: var(--tp-fs-lead); --nb-fs-body: var(--tp-fs-body); --nb-fs-mono: var(--tp-fs-mono); --nb-font-display: var(--tp-font-display); --nb-font-text: var(--tp-font-text); --nb-font-mono: var(--tp-font-mono); --nb-ease: var(--tp-ease); --nb-bg-dark: var(--tp-mat-dark); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · BASIS ═══════════════════════════════════════════════════════════════════════════ */ html body{ background: var(--tp-paper); color: var(--tp-ink); font-family: var(--tp-font-text); font-size: var(--tp-fs-body); line-height: var(--tp-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Sprungziele bleiben unter dem klebenden Header sichtbar */ :target, section[id], figure[id], [id^="kapitel"]{ scroll-margin-top: calc(var(--tp-hd-h) + var(--tp-s3)); } /* Satzspiegel */ .tp-c { width: min(100% - (var(--tp-bleed) * 2), var(--tp-shell)); margin-inline: auto; } .tp-c-n{ width: min(100% - (var(--tp-bleed) * 2), var(--tp-shell-n)); margin-inline: auto; } /* Links erben die Kapitelfarbe — nie Theme-Blau. :not([class]) ist wichtig: sonst schlägt diese Regel (0,1,1) jede Komponentenklasse (0,1,0) und färbt z. B. weiße Button-Beschriftung auf Rot in Tintenschwarz um (gemessen 3.6:1). */ main a:not([class]), .tp-sec a:not([class]), .tp-phero a:not([class]), .tp-legal a:not([class]){ color: inherit; } /* Fokus sichtbar, in Markenrot */ :where(a, button, input, select, textarea, [tabindex]):focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 2px; border-radius: 2px; } /* Bilder verhalten sich */ main img, .tp-sec img, .tp-phero img{ max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · TYPOGRAFIE — die sieben Stufen und sonst nichts ═══════════════════════════════════════════════════════════════════════════ */ /* 3.1 Display (Anton) — nur für Headlines und Zahlen, NIE für Fließtext */ .tp-display, .tp-sec-head__h, .tp-fh__title, .tp-phero__title, .tp-pl-block__head h2, .tp-bands__h, .tp-anr-options__h, .tp-spall__group-h, .tp-tpush__h, .tp-404__h{ font-family: var(--tp-font-display); font-weight: 400; text-transform: uppercase; font-variant-ligatures: none; margin: 0; text-wrap: balance; } .tp-display--xxl{ font-size: var(--tp-fs-hero); line-height: .94; letter-spacing: var(--tp-ls-display); } .tp-display--xl { font-size: var(--tp-fs-d1); line-height: 1.00; letter-spacing: var(--tp-ls-display); } .tp-display--lg { font-size: var(--tp-fs-d2); line-height: var(--tp-lh-display); letter-spacing: var(--tp-ls-display); } .tp-display--md { font-size: var(--tp-fs-d3); line-height: 1.08; letter-spacing: .01em; } /* 3.2 Lead — eine Stufe über dem Fließtext, immer gekappte Zeilenlänge */ .tp-lead{ font-size: var(--tp-fs-lead); line-height: var(--tp-lh-lead); color: var(--tp-ink-2); max-width: var(--tp-measure-lead); margin: 0 0 var(--tp-s5); text-wrap: pretty; } /* 3.3 Fließtext — Floor 17px, Zeilenlänge 60–75 Zeichen */ .tp-sec p, .tp-phero p, .tp-legal p, .tp-legal li{ font-size: var(--tp-fs-body); line-height: var(--tp-lh-body); max-width: var(--tp-measure); } /* 3.3a Der Lead ist ein

und stand damit unter „.tp-sec p" (0,1,1) — .tp-lead (0,1,0) verlor und JEDER Lead der Seite lief auf 17 px statt auf den dokumentierten 24 px. Darum hier dieselbe Stufe mit zwei Klassen. Gemessen auf / : 4 Leads betroffen; gilt genauso für alle Unterseiten. */ .tp-sec .tp-lead, .tp-phero .tp-lead, .tp-sec p.tp-lead{ font-size: var(--tp-fs-lead); line-height: var(--tp-lh-lead); max-width: var(--tp-measure-lead); } .tp-sec p:last-child{ margin-bottom: 0; } /* 3.4 Mono-Etikett — das universelle kleine Label des Systems. Nur Versalien, nur kurze Zeilen. Nie mehr als eine Zeile Fließtext. */ .tp-eye, .tp-sec-head__num, .tp-sec-head__eye, .tp-pl-block__head span, .tp-bands__count, .tp-anr-options__sub, .tp-spall__group-count, .nb-idx{ font-family: var(--tp-font-mono); font-size: var(--tp-fs-mono); line-height: 1.4; letter-spacing: var(--tp-ls-mono); text-transform: uppercase; font-weight: 400; color: var(--tp-ink-3); } .tp-eye{ display: inline-block; margin: 0 0 var(--tp-s2); } .nb-idx{ color: var(--tp-red-ink); margin: 0 0 var(--tp-s3); } /* 3.5 Überschriften erben die Kapitelfarbe und bringen keine Theme-Abstände mit (Kadence setzt .entry-content h2 { margin-top: ~95px }) */ section[class*="tp-"] :is(h1,h2,h3,h4,h5,h6){ color: inherit; margin: 0; } /* 3.6 Rote Schrift: auf hell -ink, auf dunkel -lift. Nie --tp-red als Text. */ .tp-sec strong, .tp-phero strong{ color: inherit; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════════ 4 · KOPFGRUPPE — der Symmetrie-Anker ─────────────────────────────────────────────────────────────────────────── Vorhandenes Markup: .tp-sec-head > .tp-sec-head__num + .tp-sec-head__txt > (__eye + __h) Ergebnis, IMMER auf einer Mittelachse: Zeile 1 KAPITEL 01 — REICHWEITE & BEWEIS (Mono, eine Zeile) Zeile 2 ──── rote Linie, 56 px ──── Zeile 3 DIE HEADLINE (Anton) Zeile 4 Lead, mittig, gekappt ═══════════════════════════════════════════════════════════════════════════ */ .tp-sec-head{ display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .55em; text-align: center; max-width: 760px; margin: 0 auto var(--tp-head-gap); padding: 0; border: 0; } .tp-sec-head__txt{ display: contents; } .tp-sec-head__num::before{ content: "Kapitel "; } /* Trenner ohne führendes Leerzeichen — der Abstand kommt aus column-gap. Sonst sitzt die Etikettenzeile ein paar Pixel neben der Mittelachse. */ .tp-sec-head__num::after { content: "—"; margin-left: .55em; } .tp-sec-head__eye::before{ content: none; } .tp-sec-head__h{ flex: 0 0 100%; font-size: var(--tp-fs-d2); line-height: var(--tp-lh-display); letter-spacing: var(--tp-ls-display); color: var(--tp-ink); max-width: var(--tp-measure-head); margin-inline: auto; } /* Die rote Linie ist Teil des Kopfes, nicht Dekoration daneben */ .tp-sec-head__h::before{ content: ""; display: block; width: 56px; height: 2px; background: var(--tp-red); margin: var(--tp-s3) auto var(--tp-s4); } /* Lead direkt am Kopf: gleiche Achse, an den Kopf herangezogen */ .tp-sec-head + .tp-lead, .tp-sec-head ~ .tp-lead{ text-align: center; margin-inline: auto; margin-top: calc(var(--tp-head-gap) * -0.5); margin-bottom: var(--tp-head-gap); } /* 4.1 Gruppenkopf — mehrere pro Seite, eine Stufe kleiner, gleiche Achse */ .tp-pl-block__head, .tp-bands__head, .tp-anr-options__head, .tp-spall__group-head{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 760px; margin: 0 auto var(--tp-s5); padding: 0; border: 0; } .tp-pl-block__head h2, .tp-bands__h, .tp-anr-options__h, .tp-spall__group-h{ font-size: var(--tp-fs-d3); line-height: 1.08; letter-spacing: .01em; color: inherit; order: 2; } .tp-pl-block__head h2::before, .tp-bands__h::before, .tp-anr-options__h::before, .tp-spall__group-h::before{ content: ""; display: block; width: 56px; height: 2px; background: var(--tp-red); margin: var(--tp-s3) auto var(--tp-s3); } .tp-pl-block__head span, .tp-bands__count, .tp-anr-options__sub, .tp-spall__group-count{ order: 1; white-space: normal; } /* ═══════════════════════════════════════════════════════════════════════════ 5 · MATERIAL — der Wechsel, der die Kapitel trennt ─────────────────────────────────────────────────────────────────────────── Fünf Materialien. Ein Kapitel trägt genau eines. Zwei gleiche Materialien dürfen NICHT aufeinander folgen; nach spätestens drei Kapiteln kommt ein Foto (--photo oder .nb-zaesur) als Zäsur. .tp-sec--light Papier, 12 Rasterlinien sichtbar (Standard) .tp-sec--sand tieferes Papier, ohne Raster (= --grau) .tp-sec--dark Maschinenblau, Licht von oben, Korn .tp-sec--ink fast schwarz, flächig, ruhig .tp-sec--photo randabfallendes Foto + Veil (--tp-photo: url(...)) ═══════════════════════════════════════════════════════════════════════════ */ .tp-sec{ position: relative; padding-block: var(--tp-sec); overflow: hidden; isolation: isolate; } .tp-sec--tight{ padding-block: var(--tp-sec-tight); } .tp-sec > *{ position: relative; z-index: 1; } /* 5.1 HELL — Standard */ .tp-sec, .tp-sec--light{ background: var(--tp-paper); color: var(--tp-ink); } /* 5.2 SAND — eine Stufe tiefer, mit oberer + unterer Haarlinie als Kante */ .tp-sec--sand, .tp-sec--grau{ background-color: var(--tp-paper-deep); background-image: var(--tp-mat-sand); color: var(--tp-ink); border-block: 1px solid var(--tp-hair-l); } /* 5.3 DUNKEL — Licht von oben, Korn, Rasterlinien */ .tp-sec--dark{ background-color: var(--tp-d1); background-image: var(--tp-mat-dark); color: var(--tp-ondark); } /* 5.4 INK — flächig, ohne Raster: für kurze, laute Kapitel */ .tp-sec--ink{ background-color: var(--tp-d0); background-image: var(--tp-mat-ink); color: var(--tp-ondark); } /* 5.5 FOTO — randabfallend, mit Veil. Seiten-Agent setzt --tp-photo. */ .tp-sec--photo{ background-color: var(--tp-d0); background-image: var(--tp-veil), var(--tp-photo, none); background-size: auto, cover; background-position: center, center 42%; color: var(--tp-ondark); } /* 5.6 Textfarben je Material — einmal definiert, gilt für alle Sektionen. Auch .nb-card und .tp-fh stehen hier drin: eine dunkle Karte in einem hellen Kapitel muss ihre Schrift ebenso umschalten, sonst kippt der Kontrast (rote Schrift auf #21252C wäre 2.6:1). */ :is(.tp-sec--dark, .tp-sec--ink, .tp-sec--photo, .tp-phero, .tp-fh, .nb-card, .tp-tpush, .tp-mini-win, .tp-egg-takeover){ --tp-ink : var(--tp-ondark); --tp-ink-2 : var(--tp-ondark-2); --tp-ink-3 : var(--tp-ondark-3); --tp-red-ink: var(--tp-red-lift); --nb-ink : var(--tp-ondark); --nb-ink-2 : var(--tp-ondark-2); --nb-ink-3 : var(--tp-ondark-3); --tp-surface: var(--tp-d2); --tp-hair-l : var(--tp-hair-d); --nb-surface: var(--tp-d2); --nb-hair-l : var(--tp-hair-d); } /* 5.7 Korn auf den dunklen Materialien */ :is(.tp-sec--dark, .tp-sec--ink, .tp-sec--photo)::before{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: var(--tp-grain); background-size: 180px 180px; } /* 5.8 Zwölf Rasterlinien — machen den Satzspiegel als Material sichtbar */ .tp-sec--dark::after, .tp-sec--light::before, .tp-sec:not([class*="--"])::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; width: min(100% - (var(--tp-bleed) * 2), var(--tp-shell)); transform: translateX(-50%); pointer-events: none; background-image: repeating-linear-gradient(90deg, var(--tp-rule, var(--tp-hair-l-w)) 0 1px, transparent 1px calc(min(100vw - (var(--tp-bleed) * 2), var(--tp-shell)) / var(--tp-cols))); } .tp-sec--dark::after{ --tp-rule: var(--tp-hair-d-w); } @media (max-width: 700px){ .tp-sec--dark::after, .tp-sec--light::before, .tp-sec:not([class*="--"])::before{ display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 6 · ZÄSUR — randabfallendes Foto mit Riesenzahl ═══════════════════════════════════════════════════════════════════════════ */ .nb-zaesur{ position: relative; margin: 0; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .nb-zaesur__photo{ position: absolute; inset: 0; background-image: var(--nb-zaesur-bg, var(--tp-photo, none)); background-size: cover; background-position: center 40%; filter: saturate(.85) contrast(1.03); } .nb-zaesur__veil{ position: absolute; inset: 0; background: var(--tp-veil); } .nb-zaesur__cap{ position: relative; width: 100%; padding: 0 var(--tp-bleed) var(--tp-s6); text-align: center; } .nb-zaesur__num{ font-family: var(--tp-font-display); font-size: var(--tp-fs-d1); line-height: .9; letter-spacing: .01em; color: var(--tp-ondark); margin: 0 0 var(--tp-s1); text-shadow: 0 4px 40px rgba(0,0,0,.55); } .nb-zaesur__num::after{ content: "+"; font-size: .5em; color: var(--tp-red-lift); vertical-align: .75em; margin-left: .04em; } .nb-zaesur__txt{ margin: 0 auto; max-width: var(--tp-measure-lead); font-size: var(--tp-fs-lead); line-height: var(--tp-lh-lead); color: var(--tp-ondark-2); } @media (max-width: 700px){ .nb-zaesur{ min-height: 380px; } } /* Ornament: Linie – Raute – Linie */ .nb-divider{ display: flex; align-items: center; justify-content: center; gap: var(--tp-s2); margin: var(--tp-s4) 0 var(--tp-s3); } .nb-divider i{ display: block; width: 96px; height: 1px; background: var(--tp-hair-d); } .nb-divider b{ display: block; width: 9px; height: 9px; background: var(--tp-red); transform: rotate(45deg); } /* ═══════════════════════════════════════════════════════════════════════════ 7 · KARTE — zwei Ausführungen, ein Verhalten ═══════════════════════════════════════════════════════════════════════════ */ .nb-card, .nb-day{ position: relative; border-radius: var(--tp-r-fl); padding: var(--tp-s5) var(--tp-s4) var(--tp-s4); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--tp-dur) ease, border-color var(--tp-dur) ease, box-shadow var(--tp-dur) ease; } .nb-card::before, .nb-day::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; } /* 7.1 Karte auf Dunkel */ .nb-card{ background-color: var(--tp-d2); background-image: linear-gradient(180deg, var(--tp-d2) 0%, #1C2028 100%); border: 1px solid var(--tp-hair-d); color: var(--tp-ondark); } .nb-card::before{ background: var(--tp-red); transform: scaleX(0); transform-origin: left; transition: transform .24s ease; } .nb-card:hover{ transform: translateY(-4px); border-color: rgba(243,239,232,.3); } .nb-card:hover::before{ transform: scaleX(1); } /* 7.2 Karte auf Hell */ .nb-day{ background: var(--tp-surface); border: 1px solid var(--tp-hair-l); box-shadow: 0 1px 0 rgba(22,24,28,.03); } .nb-day::before{ height: 3px; background: var(--tp-hair-l); } .nb-day:hover{ transform: translateY(-4px); box-shadow: var(--tp-shadow-card); } .nb-day--accent{ background: #fff; border-color: rgba(22,24,28,.22); } .nb-day--accent::before{ background: var(--tp-red); } /* ═══════════════════════════════════════════════════════════════════════════ 8 · BUTTON — eine Form, drei Rollen ═══════════════════════════════════════════════════════════════════════════ */ .tp-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: var(--tp-tap); font-family: var(--tp-font-text); font-size: var(--tp-fs-body); font-weight: 600; letter-spacing: .012em; line-height: 1; text-transform: none; padding: 19px 34px; border: 1px solid transparent; border-radius: var(--tp-r-ui); cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .tp-btn--lg, .tp-btn--xl{ padding: 23px 44px; font-size: var(--tp-fs-body); } .tp-btn--primary{ background: var(--tp-red); color: #fff; } .tp-btn--primary:hover{ background: var(--tp-red-dark); color: #fff; transform: translateY(-2px); } .tp-btn--ghost-light{ background: transparent; color: var(--tp-ondark); border-color: rgba(243,239,232,.32); } .tp-btn--ghost-light:hover{ background: rgba(243,239,232,.07); color: var(--tp-ondark); border-color: var(--tp-ondark); transform: translateY(-2px); } .tp-btn--ghost-dark{ background: transparent; color: var(--tp-ink); border-color: rgba(22,24,28,.28); } .tp-btn--ghost-dark:hover{ background: rgba(22,24,28,.05); color: var(--tp-ink); border-color: var(--tp-ink); transform: translateY(-2px); } .tp-btn:active{ transform: translateY(-1px); } .tp-btn svg, .tp-btn .tp-btn-arrow, .tp-btn__arrow{ transition: transform .18s var(--tp-ease); } .tp-btn:hover svg, .tp-btn:hover .tp-btn-arrow, .tp-btn:hover .tp-btn__arrow{ transform: translateX(4px); } /* 8.1 Wiederkehrende Sektions-CTAs (Pulling/Team/Mitpullen) — gleiche Form. !important nötig: Kadence stylt /