/* tpc-theme.css — Pack-Theme The Putt Club (css_mode components)
Quelle: source/assets/css (Kit-Build relaunch/3-layoutdraft, eingefroren laut source/FREEZE.md)
= core.46fd74d0.css + reihenfolgetreue Vereinigung von 16 Seiten-CSS (pack/bin/build-theme-css.py).
Font- und Masken-URLs pack-relativ (../fonts/, ../form/). Nicht von Hand bearbeiten — bei neuem Kit-Build neu erzeugen. */
/* ===========================================================================
Schicht 1 — Tokens · The Putt Club
Drei Ebenen: Primitive (Rohwerte aus 2-designsystem/tokens.json, unverändert)
→ Semantic (Kit-Namen, Zuordnung siehe MAPPING.md) → Kontext je Fläche.
Komponenten- und Block-CSS lesen AUSSCHLIESSLICH die Semantic-Ebene.
Welt-Schicht: [data-welt] am tauscht die Weltfarben (Jungle, später
Neon und Sun); Semantic und Flächen lesen sie, keine Komponente ändert sich.
=========================================================================== */
/* --- Ebene 1: Primitive (tokens.json, Stand 2026-10-13) -------------------- */
:root {
/* Basis — weltenübergreifend */
--tpc-void-black: #0B0D12;
--tpc-ink-surface: #1D212B;
--tpc-club-paper: #EDEFE9;
--tpc-signal-lime: #C8FF4D;
--tpc-ink-soft-on-dark: #A4AAB2;
--tpc-ink-soft-on-light: #4A4F57;
/* Welt — Standard Jungle (Startwelt) */
--tpc-welt-grund: #173521;
--tpc-welt-flaeche: #2F6B3A;
--tpc-welt-licht: #E8A33D;
--tpc-welt-hitze: #C1442B;
--tpc-duo-dark: #0E1F14;
--tpc-duo-light: #E8A33D;
--tpc-grain-opacity: .05;
/* Abstände — 8-px-Basis, Stufen aus tokens.json (4 … 160 px) */
--space-0: 0;
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
--space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
--space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
--space-10: 8rem; --space-11: 10rem;
/* Form */
--radius-sm: 10px;
--radius-md: 10px;
--radius-lg: 20px;
--radius-pill: 999px;
--linie: 2px;
/* Bewegung (motion-spec.md § 2) */
--ease: cubic-bezier(.33, 1, .68, 1);
--ease-in-out: cubic-bezier(.45, 0, .55, 1);
--dur-hover: 120ms;
--dur-press: 150ms;
--dur-toggle: 240ms;
--dur-modal: 320ms;
--dur-sheet: 400ms;
--dur-settle: 560ms;
--dur-fast: var(--dur-hover);
--dur-base: var(--dur-toggle);
/* Maße */
--container-max: 1440px;
--container-max-weit: 1760px;
--gutter: clamp(20px, 5vw, 80px);
--container-pad: var(--gutter);
--bleed: calc((100vw - min(100vw, var(--container-max))) / 2 + var(--gutter));
--raster-gap: 24px;
--content-measure: 62ch;
--tap-min: 44px;
--section-pad: clamp(5.5rem, 12vh, 9rem);
/* Kopfhöhe für Heros mit Bildschirmhöhe (gemessen, header.css): ab 900 px 88 px
(min-height), darunter 78 px (46-px-Menüknopf + 2 × 16 px Polster; Logo 36 px).
Die Hinweisleiste (seit 19.10.2026 zurück, Marc Nr. 63) setzt ihr Maß ab 900 px selbst
(sticky-leiste.css); hier steht der Grundwert 0.
Gescrollt schrumpft die Kopfzeile auf --kopf-h-gescrollt (header.css gleicht die Differenz
mit Außenabstand aus); Heros und Ankerabstand rechnen weiter mit --kopf-h. */
--kopf-h: 88px;
--kopf-h-gescrollt: 70px; /* Kopfzeile ab 50 px Scroll (Logo 34 px; 46-px-Pillen + 2 × 12 px), seit 14.10.2026 */
--hinweisleiste-h: 0px;
--header-h: calc(var(--kopf-h) + var(--hinweisleiste-h));
}
@media (max-width: 899px) {
:root { --kopf-h: 78px; --kopf-h-gescrollt: 62px; } /* mobil: Logo 36 → 28 px */
}
/* Welt-Schicht. Neon und Sun sind vorbereitet, noch nicht im Einsatz. */
[data-welt="jungle"] {
--tpc-welt-grund: #173521;
--tpc-welt-flaeche: #2F6B3A;
--tpc-welt-licht: #E8A33D;
--tpc-welt-hitze: #C1442B;
--tpc-duo-dark: #0E1F14;
--tpc-duo-light: #E8A33D;
}
[data-welt="neon"] {
--tpc-welt-grund: #0A0714;
--tpc-welt-flaeche: #7A2BFF;
--tpc-welt-licht: #3DFDFF;
--tpc-welt-hitze: #FF3DAE;
--tpc-duo-dark: #0A0714;
--tpc-duo-light: #FF3DAE;
}
[data-welt="sun"] {
--tpc-welt-grund: #1E3B3A;
--tpc-welt-flaeche: #4C9A5B;
--tpc-welt-licht: #F2E4C4;
--tpc-welt-hitze: #4FA8D8;
--tpc-duo-dark: #1E3B3A;
--tpc-duo-light: #F2E4C4;
}
/* --- Ebene 2: Semantic — Kit-Namen, Seitenfläche Paper ---------------------- */
:root {
/* Text */
--text-strong: var(--tpc-void-black);
--text-body: var(--tpc-void-black);
--text-muted: var(--tpc-ink-soft-on-light);
--text-on-brand: var(--tpc-club-paper);
--text-link: var(--tpc-void-black);
--text-link-hover: var(--tpc-void-black);
--text-preis: var(--tpc-void-black); /* Lime als Text nie auf Paper */
/* Flächen */
--surface-page: var(--tpc-club-paper);
--surface-card: var(--tpc-club-paper); /* Kit-Farbe; Weiß-Entscheid R4 zurückgenommen (Chris 14.10.2026) */
--surface-papier: var(--tpc-club-paper); /* Paper-Ring am Ballkreis */
--surface-muted: color-mix(in srgb, var(--tpc-void-black) 6%, transparent);
--surface-hover: color-mix(in srgb, var(--tpc-void-black) 8%, transparent);
--surface-brand: var(--tpc-welt-grund);
--surface-system: var(--tpc-void-black); /* Sticky-Leiste */
/* Linien */
--border-default: color-mix(in srgb, var(--tpc-void-black) 12%, transparent);
--border-strong: var(--tpc-void-black);
--border-interactive: var(--tpc-void-black);
/* Interaktion: Lime ist die einzige Aktionsfarbe */
--interactive: var(--tpc-signal-lime);
--interactive-hover: var(--tpc-signal-lime);
--interactive-press: var(--tpc-signal-lime);
--interactive-fg: var(--tpc-void-black);
--interactive-kante: var(--tpc-void-black); /* Rand und Unterkante der Pille */
--disabled-bg: transparent;
--disabled-fg: var(--tpc-void-black);
/* Fokus */
--focus-ring: var(--tpc-void-black);
--focus-ring-width: 3px;
--focus-ring-offset: 4px;
/* Status */
--status-danger: var(--tpc-welt-hitze);
--status-success: var(--tpc-welt-flaeche);
/* Signatur und Flächenwerte (Zusatz zum Kit, siehe MAPPING.md) */
--accent: var(--tpc-signal-lime); /* Satzpunkt-Ball, Listenmarke */
--accent-kante: var(--tpc-void-black);
--link-deko: var(--tpc-welt-flaeche);
--trail: var(--tpc-void-black);
--btn-dx: 0px;
--btn-dy: 4px;
--btn-lx: 0px;
--schatten-karte: 0 6px 0 var(--tpc-void-black);
--schatten-dialog: 8px 8px 0 var(--tpc-void-black);
--schatten-ball: 0 30px 60px -30px color-mix(in srgb, var(--tpc-welt-grund) 45%, transparent);
--hauch-a: color-mix(in srgb, var(--tpc-welt-licht) 14%, transparent);
--hauch-b: color-mix(in srgb, var(--tpc-welt-flaeche) 12%, transparent);
--deko-blatt: var(--tpc-welt-flaeche);
--deko-blatt-2: var(--tpc-welt-grund);
--abdunklung: color-mix(in srgb, var(--tpc-void-black) 50%, transparent);
}
/* --- Ebene 3: Kontext je Fläche --------------------------------------------
Die Weltfläche belegt die komplette Familie um, die ihre Kinder lesen: Text,
Flächen, Linien, Interaktion, Fokus, Hover, Versatzschatten, Trail, Hauch.
Immer Endtokens, nie Zwischentokens (Bauplan § e). Keine Kombinationsregeln.
-------------------------------------------------------------------------- */
.tpc-section--brand {
/* Flächen */
--surface-page: var(--tpc-welt-grund);
--surface-card: var(--tpc-club-paper);
--surface-muted: color-mix(in srgb, var(--tpc-club-paper) 8%, transparent);
--surface-hover: color-mix(in srgb, var(--tpc-club-paper) 10%, transparent);
/* Text */
--text-strong: var(--tpc-club-paper);
--text-body: var(--tpc-club-paper);
--text-muted: color-mix(in srgb, var(--tpc-club-paper) 78%, transparent);
--text-link: var(--tpc-club-paper);
--text-link-hover: var(--tpc-club-paper);
--text-preis: var(--tpc-signal-lime);
/* Linien */
--border-default: color-mix(in srgb, var(--tpc-club-paper) 18%, transparent);
--border-strong: var(--tpc-club-paper);
--border-interactive: var(--tpc-club-paper);
/* Interaktion */
--interactive: var(--tpc-signal-lime);
--interactive-hover: var(--tpc-signal-lime);
--interactive-press: var(--tpc-signal-lime);
--interactive-fg: var(--tpc-void-black);
--interactive-kante: var(--tpc-void-black);
--disabled-fg: var(--tpc-club-paper);
/* Fokus */
--focus-ring: var(--tpc-signal-lime);
/* Signatur und Flächenwerte */
--link-deko: var(--tpc-signal-lime);
--trail: var(--tpc-signal-lime);
--btn-dx: 4px;
--btn-dy: 4px;
--btn-lx: -1px;
--schatten-karte: 8px 8px 0 var(--tpc-void-black);
--hauch-a: color-mix(in srgb, var(--tpc-welt-flaeche) 14%, transparent);
--hauch-b: color-mix(in srgb, var(--tpc-welt-licht) 8%, transparent);
--deko-blatt: var(--tpc-welt-flaeche);
--deko-blatt-2: var(--tpc-duo-dark);
}
/* Void — dunkle Systemfläche (Hauptmenü der Kopfzeile, seit 13.10.2026). Dieselbe
Familie wie die Weltfläche, auf Void Black: Paper-Text, Lime für Fokus und Linkdeko,
Hover- und Aktivfläche Ink Surface (--surface-muted), Kante der Lime-Pille in Paper. */
.tpc-section--dark {
/* Flächen */
--surface-page: var(--tpc-void-black);
--surface-card: var(--tpc-club-paper);
--surface-muted: var(--tpc-ink-surface);
--surface-hover: color-mix(in srgb, var(--tpc-club-paper) 12%, transparent);
/* Text */
--text-strong: var(--tpc-club-paper);
--text-body: var(--tpc-club-paper);
--text-muted: var(--tpc-ink-soft-on-dark);
--text-link: var(--tpc-club-paper);
--text-link-hover: var(--tpc-club-paper);
--text-preis: var(--tpc-signal-lime);
/* Linien */
--border-default: color-mix(in srgb, var(--tpc-club-paper) 18%, transparent);
--border-strong: var(--tpc-club-paper);
--border-interactive: var(--tpc-club-paper);
/* Interaktion */
--interactive: var(--tpc-signal-lime);
--interactive-hover: var(--tpc-signal-lime);
--interactive-press: var(--tpc-signal-lime);
--interactive-fg: var(--tpc-void-black);
--interactive-kante: var(--tpc-club-paper);
--disabled-fg: var(--tpc-club-paper);
/* Fokus */
--focus-ring: var(--tpc-signal-lime);
/* Signatur und Flächenwerte */
--accent: var(--tpc-signal-lime);
--accent-kante: var(--tpc-void-black);
--link-deko: var(--tpc-signal-lime);
--trail: var(--tpc-signal-lime);
--btn-dx: 0px;
--btn-dy: 3px;
--btn-lx: 0px;
--schatten-karte: 0 6px 0 var(--tpc-club-paper);
--hauch-a: color-mix(in srgb, var(--tpc-welt-flaeche) 10%, transparent);
--hauch-b: color-mix(in srgb, var(--tpc-welt-licht) 6%, transparent);
--deko-blatt: var(--tpc-welt-flaeche);
--deko-blatt-2: var(--tpc-ink-surface);
}
/* ===========================================================================
Schicht 2 — Schriften · The Putt Club
Self-hosted woff2 (SIL Open Font License 1.1, Hinweis: /assets/fonts/OFL.txt),
nur lateinisches Subset. Unbounded und Inter als variable Schnitte.
=========================================================================== */
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url(../fonts/unbounded-latin.woff2) format('woff2');
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: 'Inter';
font-style: normal;
font-weight: 400 500;
font-display: swap;
src: url(../fonts/inter-latin.woff2) format('woff2');
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: 'Space Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/space-mono-400-latin.woff2) format('woff2');
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: 'Space Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/space-mono-700-latin.woff2) format('woff2');
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;
}
:root {
--font-display: 'Unbounded', 'Arial Black', sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'Space Mono', ui-monospace, monospace;
/* Typo-Skala (design-brief.md Block 5, colors_and_type.css) */
--display-size: clamp(4.5rem, 10vw, 9rem); --display-lh: .86; --display-weight: 800; --display-tracking: -.04em;
--h1-size: clamp(2.5rem, 4.6vw, 4.5rem); --h1-lh: .95; --h1-weight: 800; --h1-tracking: -.025em;
--h2-size: clamp(2.25rem, 4vw, 3.5rem); --h2-lh: 1; --h2-weight: 700; --h2-tracking: -.02em;
--h3-size: clamp(1.25rem, 1.6vw, 1.5rem); --h3-lh: 1.1; --h3-weight: 600; --h3-tracking: -.01em;
--h4-size: 1.125rem; --h4-lh: 1.25; --h4-weight: 600; --h4-tracking: -.01em;
--h5-size: 1rem; --h5-lh: 1.3; --h5-weight: 600; --h5-tracking: -.005em;
--h6-size: .9375rem; --h6-lh: 1.3; --h6-weight: 600; --h6-tracking: 0;
--lead-size: 1.1875rem; --lead-lh: 1.5;
--body-size: 1.0625rem; --body-lh: 1.55; --body-weight: 400;
--caption-size: .9375rem; --caption-lh: 1.5; --caption-weight: 400; --caption-tracking: 0;
--btn-size: .9375rem; --btn-size-sm: .875rem;
--mono-size: .8125rem; --mono-tracking: .02em;
}
@media (max-width: 899px) {
:root {
--h1-size: clamp(2rem, 8.6vw, 3rem);
--lead-size: 1.0625rem;
}
}
/* ===========================================================================
Schicht 3 — Basis · The Putt Club
Element-Defaults, Typo-Skala als Klassen, Fokus, Container, Sektion mit
Mesh-Hauch, Phasen-Schalter. Liest nur Tokens.
=========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--body-size);
line-height: var(--body-lh);
font-weight: var(--body-weight);
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
::selection { background: var(--accent); color: var(--interactive-fg); }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
/* --- Phasen-Schalter -------------------------------------------------------
bis zur Eröffnung, danach "geoeffnet".
Elemente, die nur in einer Phase gelten, tragen data-tpc-nur. Nach der
Eröffnung ändert sich ausschließlich das Attribut im Template.
-------------------------------------------------------------------------- */
[data-phase="vor-eroeffnung"] [data-tpc-nur="geoeffnet"],
[data-phase="geoeffnet"] [data-tpc-nur="vor-eroeffnung"] { display: none !important; }
/* --- Typo-Skala als Klassen ------------------------------------------------
Die HTML-Ebene folgt der Bedeutung, die Klasse der Größe.
-------------------------------------------------------------------------- */
.tpc-h1, .tpc-h2, .tpc-h3, .tpc-h4, .tpc-h5, .tpc-h6, .tpc-display {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
text-wrap: balance;
}
.tpc-display { font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: var(--display-tracking); font-weight: var(--display-weight); }
.tpc-h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); font-weight: var(--h1-weight); }
.tpc-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); font-weight: var(--h2-weight); }
.tpc-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight); }
.tpc-h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-tracking); font-weight: var(--h4-weight); }
.tpc-h5 { font-size: var(--h5-size); line-height: var(--h5-lh); letter-spacing: var(--h5-tracking); font-weight: var(--h5-weight); }
.tpc-h6 { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-tracking); font-weight: var(--h6-weight); }
/* Silbentrennung in Überschriften (19.10.2026). Unbounded läuft sehr breit, einzelne Komposita
sind breiter als ihre Fläche und wurden abgeschnitten (gemessen bei 390 px: „Überraschungen.“
534 px, „Geschäftsbedingungen“ 493 px, „unvergesslicher“ 392 px auf 350 px Fläche; Treffer bis
768 px; H3 in schmalen Karten bis 1000 px, „Bewegung ohne Leistungsdruck:“ 199 > 188 px bei 900).
Deshalb trennt der Browser nach dem deutschen Wörterbuch (), nur Wörter ab
10 Zeichen, mit mindestens 4 Zeichen vor und 3 nach der Trennstelle — kurze Wörter bleiben ganz.
overflow-wrap: break-word ist das Netz für Wörter ohne Trennstelle im Wörterbuch.
Geltung: h1/h2 unter 900 px, h3–h6 unter 1200 px (Karten-Spalten bleiben bis dahin schmal).
Darüber steht jedes Wort ganz, hyphens: none hebt auch weiche Trennstellen () auf. h1/h2
trennen ab 900 px bewusst nicht: Dort passt jedes Wort, die Trennung hätte nur passende Zeilen
umgebrochen („Klassen-ausflug“) und für schmale Breiten aktiviert. Der Hero-Claim trennt
in jeder Breite über seine eigene Regel (cb01-hero.css). */
@media (max-width: 899px) {
:where(h1, h2) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 3; overflow-wrap: break-word; }
}
@media (max-width: 1199px) {
:where(h3, h4, h5, h6) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 3; overflow-wrap: break-word; }
}
@media (min-width: 900px) {
:where(h1, h2) { hyphens: none; }
}
@media (min-width: 1200px) {
:where(h3, h4, h5, h6) { hyphens: none; }
}
/* Schlusswort mit Satzpunkt-Ball (.tpc-nobr um Wort und .tpc-stop): Das Wort selbst darf
umbrechen und trennen. Die Grenze zwischen letztem Buchstaben und Ball bleibt geschlossen,
weil dort white-space der gemeinsamen Elternspanne (.tpc-nobr, nowrap) entscheidet. */
:where(h1, h2, h3, h4, h5, h6) .tpc-nobr:has(> .tpc-stop) > :first-child { white-space: normal; }
.tpc-lead { font-size: var(--lead-size); line-height: var(--lead-lh); color: var(--text-body); max-width: 42ch; }
.tpc-body { font-size: var(--body-size); line-height: var(--body-lh); font-weight: var(--body-weight); }
.tpc-caption { font-size: var(--caption-size); line-height: var(--caption-lh); letter-spacing: var(--caption-tracking); color: var(--text-muted); }
.tpc-daten { font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: var(--mono-tracking); }
.tpc-measure { max-width: var(--content-measure); }
.tpc-nobr { white-space: nowrap; }
/* --- Fließtext-Rhythmus ----------------------------------------------------
Reihenfolge ist tragend: erst nullen, dann den Abstand zwischen Geschwistern.
-------------------------------------------------------------------------- */
p { margin-block: 0; }
.tpc-flow > * { margin-block: 0; }
.tpc-flow > * + * { margin-block-start: var(--space-4); }
/* --- Rechtstext (AGB, Datenschutz, Impressum, Barrierefreiheit) ------------
Abschnittstitel sind lange nummerierte Sätze („13. Foto-/Videoaufnahmen und
Persönlichkeitsrechte“), keine Bühnenzeilen: Sie bleiben h2 für die Gliederung, stehen
aber in der H3-Stufe. Greift auch für h2 ohne Klasse aus dem Editor-Richtext. */
.tpc-rechtstext h2 {
font-family: var(--font-display);
color: var(--text-strong);
font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); font-weight: var(--h3-weight);
}
.tpc-rechtstext > h2 { margin-block-start: var(--space-6); }
.tpc-rechtstext > h2 + * { margin-block-start: var(--space-3); }
/* --- Textlink im Fließtext ------------------------------------------------- */
.tpc-link {
color: var(--text-link);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: var(--linie);
text-underline-offset: .32em;
text-decoration-color: var(--link-deko);
border-radius: 2px;
transition: text-decoration-color var(--dur-hover) var(--ease);
}
.tpc-link:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
/* --- Globaler Tastatur-Fokus ----------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* --- Layout ---------------------------------------------------------------- */
.tpc-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.tpc-raster {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--raster-gap);
}
/* Die Sektion löst Grund und Farbe selbst auf (Bauplan § e). Harter Cut: keine
Kante, kein Schatten. Der Mesh-Hauch liegt innen; seine Lage wechselt von
Sektion zu Sektion, der Mittelpunkt bleibt mindestens 25 % von jeder Kante. */
.tpc-section {
--hx: 84%; --hy: 34%; --bx: 12%; --by: 66%;
position: relative;
padding-block: var(--section-pad);
color: var(--text-body);
background:
radial-gradient(44% 46% at var(--hx) var(--hy), var(--hauch-a), transparent 70%),
radial-gradient(38% 42% at var(--bx) var(--by), var(--hauch-b), transparent 70%),
var(--surface-page);
overflow: clip;
}
main > .tpc-section:nth-of-type(4n + 2) { --hx: 14%; --hy: 66%; --bx: 82%; --by: 30%; }
main > .tpc-section:nth-of-type(4n + 3) { --hx: 16%; --hy: 32%; --bx: 86%; --by: 70%; }
main > .tpc-section:nth-of-type(4n + 4) { --hx: 86%; --hy: 68%; --bx: 10%; --by: 34%; }
/* --- Icon-Sprite ----------------------------------------------------------- */
.tpc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* --- Nur für Screenreader -------------------------------------------------- */
.tpc-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* --- Bewegungsreduktion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ===========================================================================
Schicht 4 — Basis-Komponenten · The Putt Club
Jede Komponente liefert Struktur, Größen und Zustände. Flächen brauchen keine
Komponentenvariante: Paper und Welt belegen die Tokens um, die Komponente
liest sie. Kein Farbwert, Schatten oder Radius als Literal.
=========================================================================== */
/* --- Knopf -----------------------------------------------------------------
Genau die Zeus-Varianten primary · secondary · ghost · link.
primary = drückbare Lime-Pille mit Void-Rand und Unterkante (einziger CTA-Stil)
secondary = dieselbe Pille auf Kartenpapier (Reserve, auf der Startseite ungenutzt)
ghost = Zweitaktion, Rand in Textfarbe
link = Textlink-Aktion (Trefferfläche = Zeile)
-------------------------------------------------------------------------- */
.tpc-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
min-height: 54px;
padding: 0 26px;
border: var(--linie) solid var(--interactive-kante);
border-radius: var(--radius-pill);
background: var(--interactive);
color: var(--interactive-fg);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--btn-size);
line-height: 1.15;
letter-spacing: -.005em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
touch-action: manipulation;
box-shadow: var(--btn-dx) var(--btn-dy) 0 var(--interactive-kante);
transform: translate(0, 0);
transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.tpc-btn--sm { min-height: 46px; padding: 0 20px; font-size: var(--btn-size-sm); }
.tpc-btn--full { width: 100%; }
.tpc-btn--primary:hover {
background: var(--interactive-hover);
transform: translate(var(--btn-lx), -2px);
box-shadow: calc(var(--btn-dx) - var(--btn-lx)) calc(var(--btn-dy) + 2px) 0 var(--interactive-kante);
}
.tpc-btn--primary:active {
background: var(--interactive-press);
transform: translate(var(--btn-dx), var(--btn-dy));
box-shadow: 0 0 0 var(--interactive-kante);
transition-duration: var(--dur-press);
}
.tpc-btn--secondary { background: var(--surface-card); color: var(--interactive-fg); }
.tpc-btn--secondary:hover {
transform: translate(var(--btn-lx), -2px);
box-shadow: calc(var(--btn-dx) - var(--btn-lx)) calc(var(--btn-dy) + 2px) 0 var(--interactive-kante);
}
.tpc-btn--secondary:active {
transform: translate(var(--btn-dx), var(--btn-dy));
box-shadow: 0 0 0 var(--interactive-kante);
transition-duration: var(--dur-press);
}
.tpc-btn--ghost {
background: transparent;
color: var(--text-strong);
border-color: var(--border-strong);
box-shadow: none;
}
.tpc-btn--ghost:hover { background: var(--surface-hover); }
.tpc-btn--ghost:active { transform: translateY(1px); transition-duration: var(--dur-press); }
.tpc-btn--link {
min-height: auto;
padding: 0;
border: 0;
border-radius: 2px;
background: transparent;
box-shadow: none;
color: var(--text-link);
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
text-decoration: underline;
text-decoration-thickness: var(--linie);
text-underline-offset: .38em;
text-decoration-color: var(--link-deko);
transition: text-decoration-color var(--dur-hover) var(--ease);
}
.tpc-btn--link:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.tpc-btn--link:active { transform: translateY(1px); }
.tpc-btn:disabled, .tpc-btn[aria-disabled="true"] {
background: var(--disabled-bg);
color: var(--disabled-fg);
border-color: currentColor;
border-style: dashed;
box-shadow: none;
transform: none;
cursor: default;
pointer-events: none;
}
.tpc-btn[aria-busy="true"] { cursor: progress; }
/* Knopf nimmt den Ball an (Hero-Sequenz, einmal) */
@keyframes tpc-knock { 0% { transform: translateY(0); } 40% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
.tpc-btn.is-knock { animation: tpc-knock 360ms var(--ease); }
}
/* --- Status-Pille „Ab Eröffnung buchbar“ ------------------------------------
Kein Knopf und kein fünfter Knopf-Typ: gestrichelte, nicht fokussierbare
Pille an der Stelle der Buchen-Aktion, solange Togo2 keine Startzeiten hat.
-------------------------------------------------------------------------- */
.tpc-status {
display: inline-flex; align-items: center; justify-content: center;
min-height: 54px;
padding: 0 24px;
border: var(--linie) dashed var(--border-strong);
border-radius: var(--radius-pill);
color: var(--text-strong);
font-family: var(--font-display);
font-weight: 700;
font-size: var(--btn-size);
line-height: 1.15;
white-space: nowrap;
cursor: default;
}
.tpc-status--sm { min-height: 46px; padding: 0 18px; font-size: var(--btn-size-sm); }
/* --- Aktionsgruppe und Vertrauenszeile ------------------------------------- */
.tpc-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 18px; }
/* Sehr schmale Telefone: lange Knopftexte („Kindergeburtstag anfragen“) brechen um, statt
über den Bildschirmrand zu laufen. */
@media (max-width: 379px) { .tpc-btn { max-width: 100%; white-space: normal; } }
/* Unter 900 px stapeln Aktionsgruppen mit Knöpfen: jede Aktion volle Breite, Text mittig
(Hero, Abschluss, Angebot, Tabellenfuß, Dialog). Die Sticky-Leiste hat ihre eigene Klasse. */
@media (max-width: 899px) {
.tpc-aktionen:has(> .tpc-btn, > .tpc-status) { flex-direction: column; align-items: stretch; }
.tpc-aktionen > .tpc-btn, .tpc-aktionen > .tpc-status { width: 100%; white-space: normal; text-align: center; }
}
.tpc-vertrauen {
list-style: none;
display: flex; flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
font-size: var(--caption-size);
line-height: var(--caption-lh);
color: var(--text-muted);
}
.tpc-vertrauen li { display: inline-flex; align-items: baseline; gap: 10px; }
.tpc-vertrauen li::before {
content: "";
flex: none;
width: .55em; height: .55em;
border-radius: 50%;
background: var(--accent);
box-shadow: inset 0 0 0 1.5px var(--accent-kante);
transform: translateY(-.05em);
}
/* --- Icon-Knopf (Menü, Schließen) ------------------------------------------ */
.tpc-iconbtn {
display: inline-flex; align-items: center; justify-content: center;
width: var(--tap-min); height: var(--tap-min); flex: none;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-strong);
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease);
}
.tpc-iconbtn svg { width: 22px; height: 22px; }
.tpc-iconbtn:hover { background: var(--surface-hover); }
.tpc-iconbtn:active { transform: translateY(1px); }
.tpc-iconbtn:disabled, .tpc-iconbtn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
/* --- Satzpunkt-Ball ---------------------------------------------------------
Lime-Kreis mit Void-Rand in 0,3 em, ersetzt den letzten Punkt einer Headline.
Screenreader lesen den echten Punkt aus .tpc-sr davor.
-------------------------------------------------------------------------- */
.tpc-stop {
position: relative;
display: inline-block;
width: .3em; height: .3em;
margin-left: .06em;
border-radius: 50%;
background: var(--accent);
box-shadow: inset 0 0 0 .045em var(--accent-kante);
vertical-align: baseline;
}
.tpc-stop::after {
content: "";
position: absolute; inset: -.32em;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 75%, transparent), transparent);
opacity: 0;
z-index: -1;
pointer-events: none;
}
/* --- Putt-Trail -------------------------------------------------------------
Gepunktete Bahn, Punkt Ø 6 px, 15 px Mittenabstand, Farbe aus der Fläche.
Immer mit Start (Ball) und Ziel (Satzpunkt oder Aktion); nie über einen Cut.
-------------------------------------------------------------------------- */
.tpc-trail {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible;
pointer-events: none;
z-index: 2;
}
.tpc-trail__punkt { fill: var(--trail); }
.tpc-trail.is-ruhig .tpc-trail__punkt { animation: none !important; opacity: 1 !important; transform: none !important; }
.tpc-ball {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent);
box-shadow: inset 0 0 0 var(--linie) var(--accent-kante);
}
/* --- Bildmasken und Deko-Blätter --------------------------------------------
Blatt hoch 38 : 50, Blatt quer 50 : 38, Ballkreis 1 : 1 mit Paper-Ring.
Die Masken liegen als SVG unter /assets/form/. Alle Blätter sind Monstera-Blätter:
Die Fotomasken (blatt-hoch/-quer) haben nur kurze Randschlitze, damit das Foto
lesbar bleibt; das Deko-Blatt (blatt-deko-hoch) hat tiefe Schlitze und eine
ausgesparte Mittelrippe.
-------------------------------------------------------------------------- */
.tpc-maske { position: relative; margin: 0; }
.tpc-maske img { width: 100%; height: 100%; object-fit: cover; }
.tpc-maske--blatt-hoch { aspect-ratio: 38 / 50; }
.tpc-maske--blatt-quer { aspect-ratio: 50 / 38; }
.tpc-maske--blatt-hoch img {
-webkit-mask: url(../form/blatt-hoch.svg) center / 100% 100% no-repeat;
mask: url(../form/blatt-hoch.svg) center / 100% 100% no-repeat;
}
.tpc-maske--blatt-quer img {
-webkit-mask: url(../form/blatt-quer.svg) center / 100% 100% no-repeat;
mask: url(../form/blatt-quer.svg) center / 100% 100% no-repeat;
}
.tpc-maske--ball {
aspect-ratio: 1;
padding: 8px;
border-radius: 50%;
background: var(--surface-papier);
}
.tpc-maske--ball img { border-radius: 50%; }
.tpc-blatt {
display: block;
aspect-ratio: 38 / 50;
background: var(--deko-blatt);
-webkit-mask: url(../form/blatt-deko-hoch.svg) center / 100% 100% no-repeat;
mask: url(../form/blatt-deko-hoch.svg) center / 100% 100% no-repeat;
pointer-events: none;
}
.tpc-blatt--tief { background: var(--deko-blatt-2); }
/* --- Kundenlieferung -------------------------------------------------------
Platzhalter für Inhalte, die der Kunde noch liefert ([KUNDE-LIEFERT]):
überall derselbe gestrichelte Rahmen, damit die Lücke als Lücke lesbar bleibt.
-------------------------------------------------------------------------- */
.tpc-luecke {
padding: var(--space-5) var(--space-6);
border: var(--linie) dashed var(--border-strong);
border-radius: var(--radius-lg);
color: var(--text-muted);
}
/* --- Karte (Kartengrund Weiß seit 13.10.2026) --------------------------------
Weißer Kartengrund in jeder Fläche: die Karte belegt ihre Text-Tokens selbst um,
den Versatzschatten liest sie aus der Fläche (Paper senkrecht, Welt diagonal).
-------------------------------------------------------------------------- */
.tpc-card {
--text-strong: var(--tpc-void-black);
--text-body: var(--tpc-void-black);
--text-muted: var(--tpc-ink-soft-on-light);
--text-link: var(--tpc-void-black);
--text-link-hover: var(--tpc-void-black);
--link-deko: var(--tpc-welt-flaeche);
--border-default: color-mix(in srgb, var(--tpc-void-black) 12%, transparent);
--border-strong: var(--tpc-void-black);
--focus-ring: var(--tpc-void-black);
position: relative;
display: flex; flex-direction: column;
background: var(--surface-card);
color: var(--text-body);
border: var(--linie) solid var(--interactive-kante);
border-radius: var(--radius-lg);
box-shadow: var(--schatten-karte);
overflow: hidden;
}
.tpc-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5) 22px; }
.tpc-card__title { color: var(--text-strong); }
.tpc-card__text { color: var(--text-muted); }
.tpc-card--link { text-decoration: none; transition: transform var(--dur-hover) var(--ease); }
.tpc-card--link .tpc-card__title {
text-decoration: underline;
text-decoration-thickness: var(--linie);
text-underline-offset: .2em;
text-decoration-color: transparent;
transition: text-decoration-color var(--dur-hover) var(--ease);
}
.tpc-card--link:hover .tpc-card__title { text-decoration-color: var(--link-deko); }
.tpc-card--link:active { transform: translateY(2px); }
.tpc-card--link:focus-visible { outline-color: var(--focus-ring); }
/* --- Formularfeld ------------------------------------------------------------ */
.tpc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tpc-field__label { font-weight: 500; font-size: var(--caption-size); color: var(--text-strong); }
.tpc-field__hint { font-size: .875rem; line-height: 1.45; color: var(--text-muted); }
.tpc-field__error {
display: flex; gap: var(--space-2); align-items: baseline;
font-size: .875rem; line-height: 1.45; color: var(--text-strong);
}
.tpc-field__error::before {
content: ""; flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--status-danger);
transform: translateY(-1px);
}
.tpc-field__error[hidden] { display: none; }
.tpc-input, .tpc-textarea, .tpc-select {
width: 100%;
min-height: 52px;
padding: 0 var(--space-4);
border: var(--linie) solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-muted);
color: var(--text-body);
font: inherit;
caret-color: var(--status-success);
transition: box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
.tpc-textarea { min-height: 8rem; padding-block: var(--space-3); resize: vertical; }
.tpc-input::placeholder, .tpc-textarea::placeholder { color: var(--text-muted); }
.tpc-input:hover, .tpc-textarea:hover, .tpc-select:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.tpc-input:focus-visible, .tpc-textarea:focus-visible, .tpc-select:focus-visible { outline-offset: 2px; }
.tpc-input[aria-invalid="true"], .tpc-textarea[aria-invalid="true"], .tpc-select[aria-invalid="true"] {
border-color: var(--status-danger);
box-shadow: inset 0 0 0 1px var(--status-danger);
}
.tpc-input:disabled, .tpc-textarea:disabled, .tpc-select:disabled { opacity: .5; cursor: default; }
/* --- Auswahl-Kachel (Einzelauswahl als Radio-Pille) --------------------------
Echtes Radio bleibt im DOM und fokussierbar; sichtbar ist die Pille.
-------------------------------------------------------------------------- */
.tpc-chip { position: relative; display: inline-flex; cursor: pointer; touch-action: manipulation; }
.tpc-chip__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tpc-chip__text {
display: inline-flex; align-items: center;
min-height: var(--tap-min);
padding: 0 var(--space-4);
border: var(--linie) solid var(--border-strong);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-strong);
font-weight: 500;
font-size: var(--caption-size);
line-height: 1;
transition: background-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease);
}
.tpc-chip:hover .tpc-chip__text { background: var(--surface-hover); }
.tpc-chip:active .tpc-chip__text { transform: scale(.97); }
.tpc-chip__input:checked + .tpc-chip__text { background: var(--interactive); color: var(--interactive-fg); border-color: var(--interactive-kante); }
.tpc-chip__input:focus-visible + .tpc-chip__text { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.tpc-chip__input:disabled + .tpc-chip__text { opacity: .4; cursor: default; }
.tpc-chip__input[aria-invalid="true"] + .tpc-chip__text { border-color: var(--status-danger); }
/* --- Inhalts-Icon (Iconset The Putt Club) -----------------------------------
Farbig als ![]()
auf Paper (Dateien aus /assets/icons/puttclub/color/), einfarbig als