/* ==========================================================================
Tannwerk · Mockup auf Arpeggio-Niveau · Fundament
Gestaltungssystem: Farben, Typografie, Raster, Kapitel, Platzhalter,
globale Bedienelemente (Header, Menü, schwebender CTA).
Referenzmasse: 1920 px Breite. Alle Grössen skalieren fliessend.
========================================================================== */
/* Grundschrift Inter Tight (SIL Open Font License, ../fonts/inter-tight/OFL.txt), lokal eingebunden seit 23.09.2026:
variable Schrift (Gewicht 100–900), aufrecht und kursiv, je Latin und Latin-Ext. Keine Anfragen an Google Fonts. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-tight/inter-tight-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 Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-tight/inter-tight-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-tight/inter-tight-italic-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 Tight"; font-style: italic; font-weight: 100 900; font-display: swap;
src: url("../fonts/inter-tight/inter-tight-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Akzentschrift Fraunces (SIL Open Font License, ../fonts/fraunces/OFL.txt), lokal eingebunden seit 23.09.2026.
size-adjust gleicht die grösseren Buchstaben an die schmale Instrument Serif an, die hier vorher stand:
Die Akzentzeilen behalten ihre Länge und ihren Umbruch.
Seit 0.48.17 zugeschnitten (tools/build-akzentschrift.py): feste Lage Stärke 360 und Weichheit 50 wie --serif-axes,
nur noch die Achse opsz. 33 statt 117 KB (aufrecht), 41 statt 145 KB (kursiv). Neue Dateinamen, damit kein Browser
die alte Fassung aus dem Zwischenspeicher mischt. Andere Stärken gibt es in dieser Schrift nicht mehr. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 84%;
src: url("../fonts/fraunces/fraunces-akzent-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: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 84%;
src: url("../fonts/fraunces/fraunces-akzent-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 84%;
src: url("../fonts/fraunces/fraunces-akzent-italic-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: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 84%;
src: url("../fonts/fraunces/fraunces-akzent-italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
/* Farben — Marke wie im Zeichen: Tannengrün als Hauptfarbe («t»), Violett als Punkt/Akzent.
Tinte ist ein tiefes Tannenschwarz, Papier leicht grünstichig, dazu Salbei als helles Grün. */
--c-ink: var(--tw-ink,#08120e); /* Tannenschwarz */
--c-ink-2: #0e1a15;
--c-ink-3: #16261f;
--c-paper: var(--tw-paper,#f2f4ee);
--c-paper-2: #e3e9df; /* Salbei hell */
--c-paper-3: #d3dccf;
--c-sage: #dde6d8; /* helles Kapitelgrün */
--c-stone: #a9ada5;
--c-signal: #7b5cff; /* violetter Punkt: Akzent, sparsam */
--c-signal-bright: #9c87ff; /* Signal auf sehr dunklem Grund, Hover */
--c-signal-deep: var(--tw-accent,#5a3fe0);
--c-forest: var(--tw-forest,#1e4636); /* Tannengrün aus dem Markenzeichen: Hauptfarbe */
--c-forest-2: #143226;
--c-forest-3: #0c1f18;
--c-moss: #2f6b52; /* helleres Tannengrün für Flächen, Fortschritt, Auswahl */
--c-mint: #8fd8aa; /* Grün auf dunklem Grund: Häkchen, Zustände, Hervorhebungen */
/* Schriften */
--font-sans: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--serif-axes: "SOFT" 50, "wght" 360; /* weich und etwas leichter als Regular: warm, handwerklich */
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
/* Typografie-Skala (in Klammern die Werte bei 1920 px vor 0.63.0; seither gilt ab 1600 px der Wert bei 1600 px) */
--fs-display: clamp(52px, calc(6.771 * var(--u)), 130px); /* 130 */
--fs-h2: clamp(38px, calc(4.375 * var(--u)), 84px); /* 84 */
--fs-h3: clamp(28px, calc(2.5 * var(--u)), 48px); /* 48 */
--fs-h4: clamp(22px, calc(1.667 * var(--u)), 32px); /* 32 */
--fs-lead: clamp(19px, calc(1.458 * var(--u)), 28px); /* 28 */
--fs-serif: clamp(34px, calc(3.333 * var(--u)), 64px); /* 64 */
--fs-body: clamp(16px, calc(0.9375 * var(--u)), 18px); /* 18 */
--fs-small: clamp(14px, calc(0.781 * var(--u)), 15px); /* 15 – seit 0.46.30 mindestens 14 px (vorher 13–14) */
--fs-label: 12px;
--track-display: -0.04em;
--track-h2: -0.035em;
--track-tight: -0.02em;
/* Raster und Abstände */
/* Eine Inhaltsbreite (seit 0.63.0, Entwurf «Scrollfluss» vom 11.10.2026): Die Seite wächst bis 1600 px Fensterbreite mit,
darüber steht sie mittig und bleibt, wie sie bei 1600 px ist. --u ersetzt dafür in allen Stilen die Einheit vw
(bis 1600 px gleich wie 1vw, darüber fest 16 px); der Seitenrand wächst ab 1600 px mit dem Fenster. Flächen und Filme,
die mit 100vw oder Prozent rechnen, reichen weiter von Rand zu Rand. Neue Masse deshalb mit var(--u) schreiben, nicht mit vw.
Hat ein Element mit dem Seitenrand als Innenabstand (.wrap) zusätzlich eine eigene Höchstbreite, gehört 2 × --rand-aussen dazu. */
--u: min(1vw, 16px);
--rand-innen: clamp(16px, calc(3.125 * var(--u)), 60px); /* Seitenrand der Seite selbst: 50 px bei 1600 */
--rand-aussen: max(0px, calc((100vw - 1600px) / 2)); /* was ein Fenster über 1600 px links und rechts dazubekommt */
--margin: calc(var(--rand-innen) + var(--rand-aussen)); /* Abstand des Inhalts vom Fensterrand */
--gap: clamp(12px, calc(1.25 * var(--u)), 24px); /* 24 */
--section-pad: clamp(96px, calc(10.417 * var(--u)), 200px); /* 200 */
--content: calc(100vw - 2 * var(--margin)); /* 1800 bei 1920 */
--radius: 6px;
--radius-lg: 14px;
/* Bewegung */
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-arp: cubic-bezier(.09, .76, .56, 1); /* Arpeggio-Zoom-Kurve */
--ease-inout: cubic-bezier(.65, 0, .35, 1);
--header-h: 72px;
--cta-reserve: 0px; /* Platz, den der schwebende CTA unten beansprucht (Mobile > 0) */
color-scheme: dark;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
background: var(--c-ink);
color: var(--c-paper);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.5;
letter-spacing: -0.005em;
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--c-signal); color: #fff; }
:focus-visible { outline: 2px solid var(--c-signal-bright); outline-offset: 3px; border-radius: 2px; }
[data-theme="light"] :focus-visible, [data-theme="sage"] :focus-visible { outline-color: var(--c-signal-deep); } /* ≥ 3:1 auf Papier */
[tabindex="-1"]:focus { outline: none; } /* Sprungziele (Überschriften) */
html { scroll-padding-top: calc(var(--header-h) + 12px); scroll-padding-bottom: calc(var(--cta-reserve) + 12px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 14px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius); transform: translateY(-160%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: none; }
/* ---------- Kapitel: dunkel / hell / Tannengrün ---------- */
[data-theme="dark"] { --bg: var(--c-ink); --bg-2: var(--c-ink-2); --bg-3: var(--c-ink-3); --fg: var(--c-paper); --muted: rgba(242,244,238,.6); --faint: rgba(242,244,238,.36); --line: rgba(242,244,238,.14); --card: #11201a; --accent: var(--c-mint); }
[data-theme="sage"] { --bg: var(--c-sage); --bg-2: var(--c-paper-2); --bg-3: var(--c-paper-3); --fg: var(--c-ink); --muted: rgba(8,18,14,.64); --faint: rgba(8,18,14,.36); --line: rgba(8,18,14,.13); --card: #f7f9f4; --accent: var(--c-forest); color-scheme: light; }
[data-theme="light"] { --bg: var(--c-paper); --bg-2: var(--c-paper-2); --bg-3: var(--c-paper-3); --fg: var(--c-ink); --muted: rgba(8,18,14,.62); --faint: rgba(8,18,14,.34); --line: rgba(8,18,14,.12); --card: #ffffff; --accent: var(--c-forest); }
[data-theme="forest"] { --bg: var(--c-forest-3); --bg-2: var(--c-forest-2); --bg-3: var(--c-forest); --fg: var(--c-paper); --muted: rgba(242,244,238,.64); --faint: rgba(242,244,238,.38); --line: rgba(242,244,238,.16); --card: #12291f; --accent: var(--c-mint); }
.chapter { position: relative; background: var(--bg); color: var(--fg); }
[data-theme="light"] { color-scheme: light; }
/* ---------- Layout ---------- */
.wrap { width: 100%; padding-inline: var(--margin); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section-pad { padding-block: var(--section-pad); }
/* ---------- Typografie ---------- */
.t-display { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-display); line-height: 1; letter-spacing: var(--track-display); }
.t-h2 { font-weight: 600; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: var(--track-h2); }
.t-h3 { font-weight: 600; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--track-tight); }
.t-h4 { font-weight: 500; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: var(--track-tight); }
.t-lead { font-weight: 500; font-size: var(--fs-lead); line-height: 1.22; letter-spacing: -0.02em; }
.t-serif { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-serif); line-height: .98; letter-spacing: -0.01em; }
.t-serif em, em.t-serif { font-style: italic; }
/* Achsen der Akzentschrift an allen Stellen, die sie verwenden (optische Grösse wählt der Browser selbst) */
.t-serif, .hero-serif, .work-stat__pre, .care-plan__claim, .planer-titel__serif, .planer .abo-claim, .end-title__serif { font-variation-settings: var(--serif-axes); }
.t-body { font-size: var(--fs-body); line-height: 1.5; }
.t-small { font-size: var(--fs-small); line-height: 1.45; }
.t-label { font-size: var(--fs-label); font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.t-muted { color: var(--muted); }
.t-signal { color: var(--c-signal); }
[data-theme="dark"] .t-signal, [data-theme="forest"] .t-signal { color: var(--c-signal-bright); }
.tabular { font-variant-numeric: tabular-nums; }
/* Maskierte Zeilen für Zeilen-Einblendungen:
Text */
.mask { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: .04em; margin-bottom: -.04em; }
.mask > * { display: block; }
/* Eyebrow wie «● Our Achievements | metrics & milestones» */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(18px, calc(1.25 * var(--u)), 24px); font-weight: 500; letter-spacing: -0.02em; }
.eyebrow__dot { width: .5em; height: .5em; border-radius: 50%; background: var(--c-signal); flex: none; transform: translateY(-.35em); box-shadow: 0 0 0 .18em color-mix(in srgb, var(--c-signal) 22%, transparent); }
.eyebrow__sep { width: 1px; height: 1.1em; background: var(--line); }
.eyebrow__meta { font-size: 13px; color: var(--muted); letter-spacing: 0; }
/* Links mit Unterstreichung in Signalfarbe (Arpeggio «view our work») */
.link-u { position: relative; display: inline-flex; align-items: baseline; gap: .35em; font-weight: 500; padding-bottom: .18em; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-signal); transform-origin: right; transition: transform .6s var(--ease-out); }
.link-u:hover::after { transform: scaleX(0); transform-origin: right; animation: tw-underline .6s .25s var(--ease-out) forwards; }
@keyframes tw-underline { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
/* Buttons */
.btn { --btn-bg: var(--c-forest); --btn-fg: var(--c-paper); display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 22px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-out); }
.btn__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-signal); color: #fff; transition: transform .5s var(--ease-out); }
.btn__icon svg { width: 14px; height: 14px; }
.btn:hover .btn__icon { transform: rotate(-45deg); }
.btn--light { --btn-bg: var(--c-paper); --btn-fg: var(--c-ink); }
.btn--signal { --btn-bg: var(--c-signal-deep); --btn-fg: #fff; } /* Weiss auf #5a3fe0 ≈ 6,5:1 */
.btn--signal .btn__icon { background: #fff; color: var(--c-signal-deep); }
[data-theme="dark"] .btn:not(.btn--signal):not(.btn--dark), [data-theme="forest"] .btn:not(.btn--signal):not(.btn--dark) { --btn-bg: var(--c-paper); --btn-fg: var(--c-ink); }
/* Plus-Marken (Bauplan-Raster): am 22.09.2026 auf Wunsch des Gründers von der ganzen Website entfernt.
Einzelne Kapitel schalten ihre Marken per display wieder ein, deshalb hier mit !important. */
.plus { display: none !important; }
/* ==========================================================================
Higgsfield-Platzhalter
…
========================================================================== */
.ph {
--ph-a: #1e4636; --ph-b: #0b1411; --ph-c: #7b5cff; --ph-d: #c9d3c8;
position: relative; overflow: hidden; isolation: isolate; background: var(--ph-b); margin: 0;
}
.ph[data-tone="forest"] { --ph-a: #2a5a45; --ph-b: #07120e; --ph-c: #3f8a66; --ph-d: #b7c9bb; }
.ph[data-tone="moss"] { --ph-a: #2f6b52; --ph-b: #0a1812; --ph-c: #8fd8aa; --ph-d: #d6ecd9; }
.ph[data-tone="sage"] { --ph-a: #c9d6c4; --ph-b: #e6ede2; --ph-c: #2f6b52; --ph-d: #ffffff; }
.ph[data-tone="fog"] { --ph-a: #8e9790; --ph-b: #1a1f1c; --ph-c: #dfe4dc; --ph-d: #f4f5f0; }
.ph[data-tone="dusk"] { --ph-a: #3b2c7a; --ph-b: #0c0b14; --ph-c: #9c87ff; --ph-d: #e3dcff; }
.ph[data-tone="stone"] { --ph-a: #6f685d; --ph-b: #1c1a17; --ph-c: #c8b99e; --ph-d: #efe6d6; }
.ph[data-tone="paper"] { --ph-a: #dcdfd6; --ph-b: #eef0ea; --ph-c: #6fa487; --ph-d: #ffffff; }
.ph[data-tone="wood"] { --ph-a: #7a5236; --ph-b: #150e09; --ph-c: #d8a878; --ph-d: #f3dcc0; }
/* Nur transform und opacity werden animiert (Compositor): kein Neumalen der Fläche pro Bild */
.ph__media {
position: absolute; inset: -14%;
background:
radial-gradient(55% 60% at 78% 70%, color-mix(in srgb, var(--ph-c) 45%, transparent) 0%, transparent 62%),
radial-gradient(90% 90% at 50% 110%, var(--ph-a) 0%, transparent 70%),
linear-gradient(160deg, var(--ph-a) 0%, var(--ph-b) 72%);
transform: translate3d(0,0,0) scale(1.02);
}
/* Wanderndes Licht als eigene Ebene – bewegt per transform, pulsiert per opacity */
.ph__media::after {
content: ""; position: absolute; left: 0; top: 0; width: 70%; height: 70%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--ph-d) 58%, transparent) 0%, transparent 100%);
transform: translate3d(8%, 12%, 0); opacity: .9;
}
.ph--video .ph__media { animation: ph-drift 16s var(--ease-inout) infinite alternate; }
.ph--video .ph__media::after { animation: ph-light 9s ease-in-out infinite alternate; }
.ph--image .ph__media { animation: ph-drift 28s var(--ease-inout) infinite alternate; }
@keyframes ph-drift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.04); } 100% { transform: translate3d(3%, 2.5%, 0) scale(1.12); } }
@keyframes ph-light { 0% { transform: translate3d(0%, 6%, 0); opacity: .78; } 100% { transform: translate3d(48%, 26%, 0); opacity: 1; } }
/* Ausserhalb des Sichtbereichs pausieren (Klasse setzt engine.js) */
.ph.ph-off .ph__media, .ph.ph-off .ph__media::after, .ph.ph-off::after { animation-play-state: paused; }
/* Filmkorn und Lichtkante für Tiefe (ohne Mischmodus, damit nichts neu gemalt werden muss) */
.ph::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .09;
background-image: url("data:image/svg+xml;utf8,");
}
.ph--video::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.07) 48%, transparent 60%);
transform: translateX(-100%); animation: ph-sweep 7s var(--ease-inout) infinite;
}
@keyframes ph-sweep { 0%, 15% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
.ph__label {
position: absolute; z-index: 3; left: 14px; bottom: 14px; max-width: min(440px, calc(100% - 28px));
display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 8px;
background: rgba(8, 18, 14, .86); /* deckend statt backdrop-filter: über animierten Flächen deutlich günstiger */
border: 1px solid rgba(242, 244, 238, .14); color: #f4f5f0;
font: 500 11px/1.4 var(--font-mono); letter-spacing: 0; text-align: left;
transition: opacity .35s ease, transform .35s var(--ease-out);
}
.ph__label[data-pos="tr"] { left: auto; right: 14px; bottom: auto; top: 14px; }
.ph__label[data-pos="tl"] { bottom: auto; top: 14px; }
.ph__label[data-pos="br"] { left: auto; right: 14px; }
.ph__head { display: flex; align-items: center; gap: 8px; }
.ph__id { color: #b6a6ff; font-weight: 700; }
.ph__kind { color: rgba(242, 244, 238,.86); }
.ph--video .ph__kind::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 6px; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; vertical-align: 0; }
.ph__spec { color: rgba(242, 244, 238,.66); }
.ph__motif { color: rgba(242, 244, 238,.86); }
html.ph-hide .ph__label { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* Echtes Bild/Video innerhalb eines Platzhalters (später Higgsfield) */
.ph > img, .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Eingebautes Higgsfield-Standbild (seit 23.09.2026): ersetzt Verlauf, Korn und Info-Karte.
Die Tonfarbe der Figur bleibt als Hintergrund, bis das Bild geladen ist. */
.ph--real::before, .ph--real::after { content: none; }
/* H20/H21/H23: real posters remain visible if autoplay, codecs or data-saving prevent video. */
.scene-poster, .scene-poster img, .scene-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-video { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.scene-video.is-playing { opacity: 1; }
.scene-video--mobile { display: none; }
.care__ph.ph--real { opacity: .6; }
.end-bg__ph.ph--real .end-bg__move { opacity: .92; }
@media (max-width: 800px) {
.scene-video--desktop { display: none; }
.scene-video--mobile { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.scene-video { display: none; transition: none; }
}
.ph__img { position: absolute; inset: 0; z-index: 0; display: block; }
.ph__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bild mit echtem Tannwerk-Material */
.media-cover { position: relative; overflow: hidden; }
.media-cover > img, .media-cover > video { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
Kopfzeile (fix), Aufklapp-Menüs, schwebender CTA, Platzhalter-Schalter
Seit 0.63.1 (Entwurf «Scrollfluss» vom 11.10.2026): eine Leiste mit Wortmarke links, vier Auslösern, «Anmelden» und
«Projekt planen». Die Leiste trägt immer eine eigene Fläche; ihr Ton folgt dem Kapitel darunter
(engine.js setzt html[data-header-auto]): dunkel = Tannenschwarz mit heller Schrift, hell = Papier mit dunkler Schrift.
========================================================================== */
.site-header {
--kopf-fg: var(--c-paper); --kopf-bg: rgba(8, 18, 14, .62); --kopf-linie: rgba(242, 244, 238, .15); --kopf-marke: #72d08f; --kopf-tld: #b98aff;
position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--header-h);
display: flex; align-items: center; gap: clamp(14px, calc(2.2 * var(--u)), 40px); padding-inline: var(--margin);
color: var(--kopf-fg); background-color: var(--kopf-bg); border-bottom: 1px solid var(--kopf-linie);
-webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
transition: color .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
html[data-header-auto="light"] .site-header, html[data-header-tone="ink"] .site-header { --kopf-fg: var(--c-ink); --kopf-bg: rgba(242, 244, 238, .8); --kopf-linie: rgba(8, 18, 14, .13); --kopf-marke: var(--c-forest); --kopf-tld: #6b55be; }
html[data-header-tone="paper"] .site-header { --kopf-fg: var(--c-paper); --kopf-bg: rgba(8, 18, 14, .62); --kopf-linie: rgba(242, 244, 238, .15); --kopf-marke: #72d08f; --kopf-tld: #b98aff; }
/* Kapitel mit data-header-glass (Planer, Themenseiten) geben der Leiste ihre eigene Farbe */
html.header-glass .site-header { --kopf-bg: color-mix(in srgb, var(--header-glass, var(--c-paper)) 88%, transparent); }
/* Statusband (seit 0.66.1, engine.js → statusBand): Safari auf dem iPhone färbt die Fläche hinter Uhrzeit und Akku nach dem
fest stehenden Element am oberen Rand – und merkt sich diese Farbe je Element. Wich die Kopfzeile aus oder wechselte sie
nur ihren Ton, blieb der Streifen deshalb stehen (hell über einer dunklen Karte). Darum liegt ganz oben ein 6 px hohes
Band im Ton der Kopfzeile: zwei Elemente, die sich bei jedem Farbwechsel ablösen – erst ein neues Element misst Safari
neu. Gemessen im Simulator (iPhone 17, iOS 27): Niedriger als 6 px, durchsichtig, maskiert oder hinter dem Inhalt wirkt
das Band nicht. Andere Browser bekommen es nicht (dort wäre es nur ein Strich am oberen Rand). */
.statusband { position: fixed; inset: 0 0 auto 0; z-index: 92; height: 6px; pointer-events: none; }
/* Ankündigungsleiste (seit 0.80.1, header-arpeggio.php): nur ganz oben auf der Seite. --leiste-y ist der Teil, der gerade
sichtbar ist; die Kopfzeile und das Menü stehen darunter. Ab 8 px Scrollweg setzt engine.js html.leiste-weg: Die Leiste
gleitet nach oben weg, die Kopfzeile rückt an den Rand – alle klebenden Flächen rechnen weiter mit var(--header-h).
Seit 27.10.2026 violett mit einer Botschaft auf einmal (Wahl des Gründers): Die Botschaften liegen im selben Rasterfeld
übereinander, die mit .ist-an ist sichtbar (Wechsel in engine.js). Weiss auf #5a3fe0 ≈ 6,5:1. */
:root { --leiste-h: 0px; --leiste-y: 0px; }
html.mit-leiste { --leiste-h: 36px; --leiste-y: 36px; }
html.mit-leiste.leiste-weg { --leiste-y: 0px; }
html.mit-leiste body { padding-top: var(--leiste-h); }
.leiste {
position: fixed; inset: 0 0 auto 0; z-index: 91; height: var(--leiste-h); overflow: hidden;
display: flex; align-items: center; justify-content: center; padding-inline: var(--margin);
background: var(--c-signal-deep); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: -0.005em;
transform: translateY(calc(var(--leiste-y) - var(--leiste-h))); transition: transform .35s var(--ease-out);
}
html:not(.mit-leiste) .leiste { display: none; }
.leiste__zeile { display: grid; margin: 0; white-space: nowrap; }
.leiste__botschaft {
grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
opacity: 0; transform: translateY(70%); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.leiste__botschaft.ist-an { opacity: 1; transform: none; }
.leiste__botschaft.ist-weg { transform: translateY(-70%); }
.leiste__botschaft svg { flex: none; overflow: visible; }
.leiste__berg-hell { fill: #fff; }
.leiste__berg-schatten { fill: #b9a8ff; }
.leiste__berg-linie { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.leiste__berg-punkt { fill: var(--c-mint); }
.leiste__punkte { position: absolute; right: var(--margin); top: 50%; display: flex; gap: 4px; align-items: center; transform: translateY(-50%); }
.leiste__punkte i { display: block; width: 5px; height: 3px; border-radius: 2px; background: currentColor; opacity: .35; transition: width .45s var(--ease-out), opacity .45s var(--ease-out); }
.leiste__punkte i.ist-an { width: 14px; opacity: .9; }
html.mit-leiste .site-header { top: var(--leiste-y); transition: top .35s var(--ease-out), color .35s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out); }
@media (max-width: 800px) {
html.mit-leiste { --leiste-h: 32px; }
html.mit-leiste.leiste-weg { --leiste-y: 0px; }
html.mit-leiste:not(.leiste-weg) { --leiste-y: 32px; }
.leiste { font-size: 12.5px; }
.leiste__botschaft { gap: 8px; }
.leiste__berg { width: 30px; height: 14px; }
.leiste__punkte { display: none; }
}
@media (max-width: 359px) { .leiste { font-size: 11.5px; } .leiste__berg { width: 26px; height: 12px; } }
@media (prefers-reduced-motion: reduce) { .leiste, .leiste__botschaft, .leiste__punkte i, html.mit-leiste .site-header { transition: none; } .leiste__botschaft, .leiste__botschaft.ist-weg { transform: none; } }
@media print { .leiste { display: none; } html.mit-leiste body { padding-top: 0; } }
.site-header__logo { flex: none; font-size: clamp(20px, calc(1.44 * var(--u)), 23px); line-height: 1; color: var(--kopf-marke); white-space: nowrap; transition: color .35s var(--ease-out); }
.site-header__logo span { font-weight: 600; letter-spacing: -0.03em; color: var(--kopf-tld); transition: color .35s var(--ease-out); }
.site-header__nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.site-header__punkt { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; font-size: 15px; font-weight: 450; letter-spacing: -0.01em; white-space: nowrap; transition: background-color .2s; }
.site-header__punkt svg { width: 10px; height: 10px; opacity: .55; transition: transform .3s var(--ease-out); }
.site-header__punkt:hover, .site-header__punkt[aria-expanded="true"] { background: rgba(127, 140, 130, .18); }
.site-header__punkt[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-header__punkt.ist-hier { font-weight: 600; }
/* Die vier Auslöser als Gruppe: nur sie und die Tafel halten die Tafel offen (engine.js) */
.site-header__tafeln { display: flex; align-items: center; gap: 2px; padding-block: calc((var(--header-h) - 40px) / 2); margin-block: calc((40px - var(--header-h)) / 2); }
.site-header__gratis { padding: 2px 7px; border-radius: 999px; background: var(--c-mint); color: var(--c-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
/* Gratis Schnell-Check (seit 0.77.0 rechts, grün und nur einmal; Wunsch des Gründers vom 17.10.2026) */
.site-header__check { --kopf-check: #8fd8aa; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; color: var(--kopf-check); font-size: 14.5px; font-weight: 450; letter-spacing: -0.01em; white-space: nowrap; transition: background-color .2s, color .35s var(--ease-out); }
.site-header__check:hover { background: color-mix(in srgb, var(--kopf-check) 14%, transparent); }
.site-header__check svg { flex: none; width: 17px; height: 17px; }
.site-header__check .site-header__gratis { padding: 2px 8px; background: color-mix(in srgb, var(--kopf-check) 18%, transparent); color: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.site-header__check.ist-hier { font-weight: 600; }
html[data-header-auto="light"] .site-header__check, html[data-header-tone="ink"] .site-header__check, html.header-glass .site-header__check { --kopf-check: var(--c-forest); }
html[data-header-tone="paper"] .site-header__check { --kopf-check: #8fd8aa; }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
/* Anmelden fürs Kundencenter (seit 0.69.0 präsenter, Wunsch des Gründers vom 14.10.2026): umrandete Pille mit Zeichen,
in schmalen Fenstern ein umrandeter Kreis */
.site-header__login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1.5px solid rgba(127, 140, 130, .55); border-color: color-mix(in srgb, currentColor 42%, transparent); border-radius: 999px; font-size: 14px; font-weight: 550; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.site-header__login:hover { background: rgba(127, 140, 130, .16); border-color: currentColor; }
.site-header__login svg { width: 17px; height: 17px; }
/* Strich unter dem Auslöser des offenen Felds: gleitet von Feld zu Feld (engine.js setzt Lage und Breite) */
.site-header__zeiger { position: absolute; left: 0; bottom: -1px; width: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--c-mint), var(--c-signal-bright)); opacity: 0; pointer-events: none; transition: left .45s var(--ease-out), width .45s var(--ease-out), opacity .25s; }
html.menu-open .site-header__zeiger.ist-an { opacity: 1; }
.site-header__plan { height: 40px; padding: 0 5px 0 16px; gap: 10px; font-size: 14px; font-weight: 500; }
.site-header__plan .btn__icon { width: 30px; height: 30px; }
.site-header__plan .btn__icon svg { width: 13px; height: 13px; }
.site-header__menu { display: none; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 14px; font-weight: 500; }
.burger { position: relative; width: 16px; height: 8px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.burger::before { top: 0; }
.burger::after { top: 6px; }
html.menu-open .burger::before { top: 3px; transform: rotate(45deg); }
html.menu-open .burger::after { top: 3px; transform: rotate(-45deg); }
/* Schmale Fenster: zuerst enger, dann Anmelden nur als Zeichen, dann ohne «gratis», dann Schnell-Check nur als Zeichen */
@media (max-width: 1360px) and (min-width: 901px) { .site-header__punkt { padding-inline: 11px; gap: 6px; } .site-header__check { padding-inline: 9px; } }
@media (max-width: 1240px) and (min-width: 901px) { .site-header__login span { display: none; } .site-header__login { width: 40px; padding: 0; } }
@media (max-width: 1140px) and (min-width: 901px) { .site-header__check .site-header__gratis { display: none; } .site-header__punkt { padding-inline: 9px; font-size: 14.5px; } }
@media (max-width: 1040px) and (min-width: 901px) {
/* Schnell-Check als grüner Kreis mit Zeichen (der Name bleibt für Screenreader und als Hinweis beim Darüberfahren) */
.site-header__check-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-header__check { width: 40px; padding: 0; justify-content: center; background: color-mix(in srgb, var(--kopf-check) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kopf-check) 40%, transparent); }
.site-header { gap: 12px; }
}
/* --------------------------------------------------------------------------
Menü (seit 0.77.0 nach dem Mockup «Menü neu» vom 17.10.2026, zweite Fassung, vom Gründer freigegeben; ersetzt die Tafel
von 0.69.0/0.71.0 mit der Leiste «Direkt loslegen» und die Ebenen am Handy). Markup: header-arpeggio.php, Verhalten:
engine.js → menu().
Desktop: helle, schwebende Tafel unter der Kopfzeile, oben rechts ein Kreuz (.menu__zu). Oben das Feld des gewählten
Auslösers (.menu__feld.ist-da), so hoch wie sein Inhalt (--menu-h, gleitet beim Wechsel). Leistungen: Liste in drei Gruppen
und die dunkle Filmbühne (.menu__buehne) mit Satz und nächstem Schritt. Preise: Planer-Karte mit zwei Wegen (H25 dahinter),
Pakete, Betreuung, Google Ads als eigene Karte. Projekte: drei Filme. So arbeiten wir: vier Schritte mit Film, darunter die
Betreuung. Ein Eintrag heisst .mm (Zeichen, Titel, Zeile, Preis, Pfeil); der violette Punkt markiert den gewählten.
Bis 900 px: ein Blatt über der ganzen Seite mit einer einzigen Ebene (.menu__blatt): die vier Leistungen mit laufendem
Film (.mz), Preise, Projekte, So arbeiten wir, Kontakt, der Schnell-Check als grüne Karte; oben Anmelden und das Kreuz,
unten «Projekt planen», der Weg im Gespräch und das Rechtliche.
-------------------------------------------------------------------------- */
.menu {
--m-bg: #f7f8f3; --m-fg: var(--c-ink); --m-leise: #55615a; --m-linie: rgba(8, 18, 14, .1);
position: fixed; left: 0; right: 0; top: calc(var(--header-h) + var(--leiste-y)); z-index: 89; padding: 10px calc(var(--margin) - 10px) 0;
color: var(--m-fg); color-scheme: light; opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-8px);
transition: opacity .26s ease, transform .5s var(--ease-out), visibility 0s .5s;
}
html.menu-open .menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .26s ease, transform .5s var(--ease-out), visibility 0s; }
.menu__innen { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - var(--leiste-y) - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(8, 18, 14, .2) transparent; border-radius: 24px; background: linear-gradient(180deg, #fbfcf8, #f2f4ee); box-shadow: 0 0 0 1px rgba(8, 18, 14, .07), inset 0 1px 0 #fff, 0 60px 120px -50px rgba(4, 10, 7, .8), 0 24px 48px -24px rgba(4, 10, 7, .35); }
/* Nur am Handy */
.menu__kopf, .menu__blatt { display: none; }
.menu :focus-visible { outline-color: var(--c-signal-deep); }
/* Kreuz oben rechts (Wunsch des Gründers, 17.10.2026) */
.menu__zu { position: absolute; top: 18px; right: 18px; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--m-fg); box-shadow: inset 0 0 0 1px rgba(8, 18, 14, .14); transition: background-color .2s, transform .35s var(--ease-out); }
.menu__zu:hover { background: #fff; transform: rotate(90deg); }
.menu__zu svg { width: 16px; height: 16px; }
.menu__felder { position: relative; flex: none; height: var(--menu-h, 420px); overflow: hidden; overflow: clip; transition: height .55s var(--ease-out); }
.menu__feld { position: absolute; left: 0; right: 0; top: 0; padding: 24px 74px 26px 30px; opacity: 0; visibility: hidden; transform: translateX(var(--menu-dx, 0px)) translateY(4px); transition: opacity .22s, transform .55s var(--ease-out), visibility 0s .22s; }
.menu__feld.ist-da { opacity: 1; visibility: visible; transform: none; transition: opacity .38s .05s, transform .55s var(--ease-out), visibility 0s; }
.menu__gruppe { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--m-leise); }
.menu__gruppe::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--c-signal); }
.menu__gruppe-zusatz { padding: 2px 9px; border-radius: 999px; background: rgba(30, 70, 54, .08); color: var(--c-forest); font-size: 12px; font-weight: 450; letter-spacing: 0; text-transform: none; }
.menu__kopfz { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 2px 0 14px; }
.menu__kopfz .menu__gruppe { margin: 0; }
.menu__mehr { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1.5px solid var(--c-signal); font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; transition: gap .25s var(--ease-out); }
.menu__mehr:hover { gap: 12px; }
.menu__mehr svg { width: 13px; height: 13px; }
/* Ein Eintrag: Zeichen, Titel, Zeile, Preis darunter, Pfeil; der gewählte trägt eine weisse Fläche und den violetten Punkt */
.mm { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; column-gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; transition: background-color .25s, box-shadow .25s; }
.mm:hover, .mm:focus-visible, .mm.ist-vorn { background: #fff; box-shadow: 0 0 0 1px rgba(8, 18, 14, .06), 0 16px 32px -22px rgba(8, 18, 14, .5); }
.mm__zeichen { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(8, 18, 14, .08); color: var(--c-forest); }
.mm__zeichen svg { width: 20px; height: 20px; }
.mm__zeichen--logo svg { width: 21px; height: 21px; }
.mm__text { display: grid; gap: 1px; min-width: 0; }
.mm__titel { display: block; font-size: 17px; font-weight: 450; line-height: 1.25; letter-spacing: -0.015em; }
.mm__meta { display: block; font-size: 13.5px; line-height: 1.38; color: var(--m-leise); }
.mm__preis { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--c-forest); font-variant-numeric: tabular-nums; }
.mm__pf { color: var(--c-signal-deep); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--ease-out); }
.mm__pf svg { width: 14px; height: 14px; }
.mm:hover .mm__pf, .mm.ist-vorn .mm__pf { opacity: 1; transform: none; }
.mm.ist-vorn .mm__titel::after { content: ""; position: absolute; width: 6px; height: 6px; margin: .5em 0 0 8px; border-radius: 50%; background: var(--c-signal); }
/* Film im Menü: Standbild und Film laden erst, wenn das Feld offen ist (engine.js) */
.mm-clip { position: relative; display: block; overflow: hidden; background: #0c1712; isolation: isolate; transform: translateZ(0); }
.mm-clip__bild, .mm-clip__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mm-clip__bild:not([src]) { visibility: hidden; }
.mm-clip__film { opacity: 0; transition: opacity .5s, transform 1.1s var(--ease-out); }
.mm-clip__film.is-playing { opacity: 1; }
/* Laufende Filme malt WebKit über Nachbarn ohne eigene Ebene: Beschriftungen auf Filmen bekommen eine eigene (translateZ) */
.mm-live { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; background: rgba(8, 18, 14, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-paper); font-size: 12px; font-weight: 500; letter-spacing: -.005em; transform: translateZ(0); }
.mm-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-mint); animation: mm-puls 2.2s ease-out infinite; }
/* Website noch nicht online (ARP_PROJEKTE_BALD): ruhiger goldener Punkt statt grünem Puls */
.mm-live--bald i { background: #d9b66e; animation: none; }
@keyframes mm-puls { 0% { box-shadow: 0 0 0 0 rgba(143, 216, 170, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(143, 216, 170, 0); } }
/* Leistungen: Liste links, rechts die dunkle Filmbühne. Ihre Breite ist durch die Fensterhöhe begrenzt, damit die Tafel auch
auf niedrigen Bildschirmen ganz sichtbar bleibt. */
.menu__feld--leistungen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(58%, 760px, calc((100vh - 330px) * 1.5))); column-gap: 28px; align-items: stretch; }
.menu__liste { display: grid; align-content: start; gap: 2px; padding-top: 4px; }
.menu__liste .menu__gruppe { margin: 16px 0 4px 16px; }
.menu__liste .menu__gruppe:first-child { margin-top: 6px; }
.menu__buehne { display: grid; gap: 16px; align-content: start; padding: 12px 12px 18px; border-radius: 22px; background: radial-gradient(120% 90% at 100% 0%, #1e4031, #0d1d16 58%, #08120e); color: var(--c-paper); box-shadow: inset 0 0 0 1px rgba(242, 244, 238, .07), 0 20px 40px -26px rgba(4, 10, 7, .7); }
.menu__orte { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; isolation: isolate; transform: translateZ(0); background: #0c1712; }
/* Nur überblenden, nicht zoomen: ein Zoom liess den Film beim Öffnen kurz wackeln (Rückmeldung 15.10.2026) */
.menu__orte .tw-ort { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; opacity: 0; transition: opacity .55s ease; }
.menu__orte .tw-ort.ist-an, .menu__orte .tw-ort.ist-vorn { opacity: 1; }
.menu__aktion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: 0 10px; }
.menu__aktion[hidden] { display: none; }
.menu__satz { grid-column: 1 / -1; margin: 0; font-size: 15.5px; line-height: 1.4; letter-spacing: -.005em; color: #d9e1da; }
.menu__mehr--hell { justify-self: start; color: var(--c-paper); border-color: var(--c-signal-bright); }
.menu__knopf { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 7px 0 20px; border-radius: 999px; background: var(--c-paper); color: var(--c-ink); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background-color .2s, transform .3s var(--ease-out); }
.menu__knopf .mm__titel { font-size: inherit; font-weight: inherit; letter-spacing: -.01em; }
.menu__knopf:hover { background: #fff; transform: translateY(-1px); }
.menu__knopf-pfeil { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-ink); color: var(--c-paper); }
.menu__knopf-pfeil svg { width: 13px; height: 13px; }
.menu__buehne :focus-visible { outline-color: var(--c-mint); }
/* Preise: Planer-Karte mit zwei Wegen, Pakete, Betreuung, Google Ads als eigene Leistung */
.menu__feld--preise { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 3.8fr) minmax(0, 3.8fr); column-gap: 32px; align-items: stretch; }
.menu__planer { position: relative; overflow: hidden; min-height: 360px; border-radius: 22px; background: #0c1f18; color: var(--c-paper); isolation: isolate; box-shadow: 0 20px 40px -26px rgba(4, 10, 7, .7); }
.menu__planer-film { position: absolute; inset: 0; z-index: 0; }
.menu__planer-film .mm-clip__bild { opacity: .8; }
.menu__planer-film .mm-clip__film.is-playing { opacity: .8; }
.menu__planer::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 18, 14, .9) 30%, rgba(8, 18, 14, .62) 62%, rgba(8, 18, 14, .25)); pointer-events: none; }
.menu__planer-innen { position: relative; z-index: 2; display: grid; gap: 14px; align-content: start; padding: 24px; }
.menu__planer-ueber { margin: 0; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #c9d3cc; }
.menu__planer-titel { margin: -6px 0 0; }
.menu__planer-titel .mm__titel { display: inline; font-size: 29px; font-weight: 450; line-height: 1.1; letter-spacing: -.035em; }
.menu__wege { display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: rgba(242, 244, 238, .1); box-shadow: inset 0 0 0 1px rgba(242, 244, 238, .14); }
.menu__wege button { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 450; color: #d9e1da; transition: background-color .2s, color .2s; }
.menu__wege button[aria-selected="true"] { background: var(--c-paper); color: var(--c-ink); }
.menu__weg[hidden] { display: none; }
.menu__zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.menu__wahl { display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px; background: rgba(242, 244, 238, .1); box-shadow: inset 0 0 0 1px rgba(242, 244, 238, .2); transition: background-color .2s, transform .3s var(--ease-out); }
.menu__wahl .mm__titel { font-size: 16px; }
.menu__wahl small { font-size: 13px; color: #c9d3cc; font-variant-numeric: tabular-nums; }
.menu__wahl:hover { background: rgba(242, 244, 238, .18); transform: translateY(-2px); }
.menu__planer-fuss { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: #c9d3cc; }
.menu__ai-feld { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 6px 0 16px; border-radius: 16px; background: rgba(242, 244, 238, .96); box-shadow: 0 0 0 1px rgba(156, 135, 255, .45); transition: box-shadow .2s; }
.menu__ai-feld:focus-within { box-shadow: 0 0 0 2px var(--c-signal); }
.menu__ai-feld input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--c-ink); }
.menu__ai-feld input::placeholder { color: #7d877f; opacity: 1; }
.menu__ai-feld button { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-signal-deep); color: #fff; }
.menu__ai-feld button svg { width: 16px; height: 16px; }
.menu__ai-name { font-weight: 600; color: var(--c-mint); }
.menu__ai-name i { font-style: normal; color: var(--c-signal-bright); }
.menu__planer :focus-visible { outline-color: var(--c-mint); }
.menu__spalte { display: grid; gap: 2px; align-content: start; min-width: 0; padding-top: 4px; }
.menu__plattform { display: flex; align-items: center; gap: 9px; margin: 12px 0 2px; font-size: 14px; font-weight: 500; }
.menu__gruppe + .menu__plattform { margin-top: 4px; }
.menu__plattform .tw-logo { flex: none; width: 18px; height: 18px; }
.np { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin-inline: -10px; padding: 9px 10px; border-radius: 11px; transition: background-color .2s; }
.np:hover, .np:focus-visible { background: #fff; }
.np .mm__titel { font-size: 15.5px; }
.np small { grid-column: 1; font-size: 13px; color: var(--m-leise); }
.np b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.menu__hinweis { margin: 8px 0 0; font-size: 13px; color: var(--m-leise); }
.menu__spalte > .menu__mehr { justify-self: start; margin-top: 14px; }
.menu__ads { position: relative; display: grid; gap: 8px; margin-top: 18px; padding: 20px 18px 16px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 18, 14, .07), 0 16px 32px -24px rgba(8, 18, 14, .45); }
.menu__ads-vier { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%); }
.menu__ads-kopf { display: flex; align-items: center; gap: 10px; margin: 0; }
.menu__ads-kopf .tw-logo { flex: none; width: 22px; height: 22px; }
.menu__ads-kopf .mm__titel { font-size: 16.5px; font-weight: 500; }
.menu__ads-marke { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: rgba(66, 133, 244, .1); color: #1a5fd0; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.menu__ads-text { margin: 0; font-size: 14px; line-height: 1.45; }
.menu__ads-preis { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--m-leise); }
.menu__ads-preis b { font-weight: 500; color: var(--m-fg); }
.menu__ads .menu__mehr { justify-self: start; margin-top: 4px; }
/* Projekte: vier Projekte (seit 24.10.2026 mit Gasthaus Mühle; ohne Film als Rollbild, siehe unten) */
.menu__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mm-ref__film .tw-roll { --roll-oben: 22%; } /* Platz für die Plakette «live» oben links */
.mm-ref { display: grid; gap: 3px; align-content: start; }
/* Höhe über padding-bottom statt aspect-ratio: Safari rechnet aspect-ratio in Grid-Zeilen mit zweizeiligem Text darunter zu hoch */
.mm-ref__film { height: 0; margin-bottom: 9px; padding-bottom: 62.5%; border-radius: 16px; box-shadow: 0 16px 30px -24px rgba(8, 18, 14, .6), 0 0 0 1px rgba(8, 18, 14, .06); transition: transform .45s var(--ease-out), box-shadow .45s; }
.mm-ref:hover .mm-ref__film, .mm-ref:focus-visible .mm-ref__film { transform: translateY(-4px); box-shadow: 0 26px 40px -26px rgba(8, 18, 14, .7); }
.mm-ref .mm__titel { font-size: 17px; font-weight: 500; }
.menu__zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--m-linie); font-size: 14px; color: var(--m-leise); }
.menu__zeile .menu__mehr { color: var(--m-fg); }
/* So arbeiten wir: vier Schritte mit Film (der, der dran ist, leuchtet auf und füllt seinen Strich), darunter die Betreuung */
.menu__schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mm-schritt { position: relative; display: grid; gap: 9px; align-content: start; }
.mm-schritt__film { height: 0; padding-bottom: min(102%, calc((100vh - 470px) * .9)); border-radius: 16px; filter: saturate(.7) brightness(.86); transition: filter .6s, transform .45s var(--ease-out); }
.mm-schritt.ist-dran .mm-schritt__film, .mm-schritt:hover .mm-schritt__film, .mm-schritt:focus-visible .mm-schritt__film { filter: none; }
.mm-schritt:hover .mm-schritt__film { transform: translateY(-3px); }
.mm-schritt__nr { position: absolute; left: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(8, 18, 14, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(242, 244, 238, .25); color: var(--c-paper); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transform: translateZ(0); transition: background-color .3s; }
.mm-schritt.ist-dran .mm-schritt__nr { background: var(--c-signal); box-shadow: none; }
.mm-schritt__lauf { position: relative; display: block; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(8, 18, 14, .1); }
.mm-schritt__lauf b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-mint), var(--c-signal)); transform: scaleX(0); transform-origin: 0 50%; }
.mm-schritt.ist-fertig .mm-schritt__lauf b { transform: none; }
.mm-schritt.ist-dran .mm-schritt__lauf b { animation: mm-fuellen 3.6s linear forwards; }
@keyframes mm-fuellen { to { transform: none; } }
.mm-schritt .mm__titel { font-size: 16.5px; font-weight: 500; }
.mm-schritt .mm__meta { margin-top: -5px; line-height: 1.42; }
.menu__betreuung { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 14px 22px; margin-top: 20px; padding: 16px 20px 16px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 18, 14, .07), 0 16px 32px -26px rgba(8, 18, 14, .45); }
.menu__betreuung-zeichen { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(143, 216, 170, .3); color: var(--c-forest); }
.menu__betreuung-zeichen svg { width: 22px; height: 22px; }
.menu__betreuung-text { display: grid; gap: 1px; min-width: 0; }
.menu__betreuung-text .mm__titel { justify-self: start; font-size: 16px; font-weight: 500; }
.menu__betreuung-preis { padding: 6px 12px; border-radius: 999px; background: rgba(30, 70, 54, .07); color: var(--c-forest); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu__betreuung-wege { display: flex; gap: 20px; }
.menu-schleier { position: fixed; inset: 0; z-index: 88; background: rgba(4, 10, 7, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
html.menu-open .menu-schleier { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
/* Schmale Tafel (901 bis 1240 px): Preise in zwei Spalten (die Planer-Karte oben über die ganze Breite), Betreuung umbrochen */
@media (max-width: 1240px) and (min-width: 901px) {
.menu__feld { padding: 22px 66px 22px 22px; }
.menu__feld--preise { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 22px; column-gap: 26px; }
.menu__planer { grid-column: 1 / -1; min-height: 0; }
.menu__planer-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 26px; align-items: end; }
.menu__planer-ueber, .menu__planer-titel, .menu__wege { grid-column: 1; }
.menu__weg { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
.menu__betreuung { grid-template-columns: 46px minmax(0, 1fr) auto; }
.menu__betreuung-wege { grid-column: 2 / -1; }
.menu__satz { font-size: 14.5px; }
}
/* Bis 900 px: Auslöser weg, Knopf «Menü»; die Tafel als Blatt über der ganzen Seite mit einer Ebene */
@media (max-width: 900px) {
.site-header__nav, .site-header__login, .site-header__plan, .site-header__check { display: none; }
.site-header__menu { display: inline-flex; }
.menu { top: 0; bottom: 0; z-index: 95; padding: 0; transform: translateY(-14px); }
html.menu-open .menu { transform: none; }
.menu__innen { position: absolute; inset: 0; max-height: none; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); border-radius: 0; background: linear-gradient(180deg, #f7f8f3, #eff2eb); box-shadow: none; }
.menu__zu, .menu__felder { display: none; }
/* Kopf: Wortmarke, rechts Anmelden (gut zu finden, Wunsch des Gründers) und das Kreuz */
.menu__kopf { position: relative; z-index: 3; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--header-h); padding-inline: var(--margin); background: var(--m-bg); border-bottom: 1px solid rgba(8, 18, 14, .07); }
.menu__marke { font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.055em; color: var(--c-forest); white-space: nowrap; }
.menu__marke b { font-weight: 800; }
.menu__marke span { font-weight: 600; letter-spacing: -.03em; color: #6b55be; }
.menu__kopf-rechts { display: flex; align-items: center; gap: 8px; }
.menu__anmelden { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 18, 14, .22); font-size: 15px; font-weight: 500; white-space: nowrap; }
.menu__anmelden svg { flex: none; width: 17px; height: 17px; }
.menu__kopf-rechts > * { flex: none; }
.menu__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-ink); color: var(--c-paper); }
.menu__x svg { width: 15px; height: 15px; }
/* Das Blatt: oben die Einträge (scrollt nur, wenn der Bildschirm sehr niedrig ist), unten fest «Projekt planen» */
.menu__blatt { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.menu__blatt-inhalt { flex: 1; min-height: 0; display: grid; align-content: start; gap: 10px; padding: 12px var(--margin) 14px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu__blatt-inhalt::-webkit-scrollbar { display: none; }
.menu__blatt-gruppe { display: flex; align-items: center; gap: 8px; margin: 2px 6px -3px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--m-leise); }
.menu__blatt-gruppe::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-signal); }
.menu__karte { display: grid; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 18, 14, .07), 0 12px 26px -22px rgba(8, 18, 14, .45); }
.mz { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 56px; padding: 6px 14px 6px 7px; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.mz:active { background: rgba(8, 18, 14, .04); }
.menu__karte .mz + .mz { border-top: 1px solid rgba(8, 18, 14, .07); }
.mz__film { position: relative; display: block; width: 66px; height: 46px; overflow: hidden; border-radius: 10px; background: #0c1712; }
.mz__film .tw-ort { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.mz__film .tw-lw { display: none; }
.mz__text { display: grid; min-width: 0; }
.mz .mm__titel { font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.mz__zeile { margin-top: 2px; overflow: hidden; font-size: 13px; color: var(--m-leise); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.mz__zeile--zusatz { margin-top: 0; color: var(--c-forest); }
.mz__pf { color: #9aa49d; }
.mz__pf svg { width: 14px; height: 14px; }
.mz--kurz { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 48px; padding: 5px 14px 5px 16px; }
.mz__runde { display: flex; }
.mz__runde img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #0c1712; box-shadow: 0 0 0 2px #fff; }
.mz__runde img:not([src]) { visibility: hidden; }
.mz__runde img + img { margin-left: -8px; }
.mz__schritte { display: flex; gap: 4px; }
.mz__schritte i { width: 6px; height: 6px; border-radius: 50%; background: rgba(30, 70, 54, .25); }
.mz__schritte i:first-child { background: var(--c-signal); }
/* Schnell-Check als grüne Karte (Wunsch des Gründers, 17.10.2026) */
.mz--check { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 8px 14px 8px 8px; border-radius: 18px; background: linear-gradient(135deg, rgba(143, 216, 170, .55), rgba(143, 216, 170, .22)); box-shadow: inset 0 0 0 1px rgba(47, 107, 82, .22); }
.mz__zeichen { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--c-forest); color: var(--c-mint); }
.mz__zeichen svg { width: 22px; height: 22px; }
.mz--check .mm__titel { color: #0c1f18; }
.mz--check .mz__zeile { color: #2c5443; white-space: normal; }
.mz--check .site-header__gratis { margin-left: 4px; vertical-align: 2px; background: var(--c-forest); color: var(--c-mint); }
.mz--check .mz__pf { color: var(--c-forest); }
/* Unten fest: «Projekt planen», der Weg im Gespräch, das Rechtliche */
.menu__blatt-unten { flex: none; display: grid; gap: 9px; justify-items: center; padding: 10px var(--margin) calc(14px + env(safe-area-inset-bottom, 0px)); }
.menu__blatt-plan { width: 100%; justify-content: space-between; height: 56px; padding: 0 7px 0 24px; font-size: 17px; font-weight: 500; box-shadow: 0 14px 30px -14px rgba(90, 63, 224, .7); }
.menu__blatt-plan .btn__icon { width: 42px; height: 42px; }
.menu__blatt-ai { font-size: 14px; color: var(--m-leise); }
.menu__blatt-ai b { font-weight: 600; color: var(--c-forest); }
.menu__blatt-ai b i { font-style: normal; color: #6b55be; }
.menu__recht { display: flex; justify-content: center; gap: 18px; width: 100%; margin: 3px 0 0; padding-top: 10px; border-top: 1px solid rgba(8, 18, 14, .08); font-size: 12.5px; color: var(--m-leise); }
.menu__recht a { padding-block: 2px; }
}
/* Safari am iPhone zeigt unten die Adressleiste: Das Blatt hat dann rund 710 statt 790 px. Damit trotzdem alles – auch der
Schnell-Check – ohne Scrollen sichtbar ist, rücken die Zeilen etwas zusammen (gemessen im iPhone-17-Simulator, 17.10.2026). */
@media (max-width: 900px) and (max-height: 800px) {
.menu__blatt-inhalt { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.menu__blatt-gruppe { margin-top: 0; margin-bottom: -4px; }
.mz { min-height: 50px; padding-block: 4px; }
.mz .mm__titel { line-height: 1.15; }
.mz__zeile { margin-top: 1px; }
.mz__film { width: 62px; height: 42px; }
.mz { grid-template-columns: 62px minmax(0, 1fr) auto; }
.mz--kurz { grid-template-columns: minmax(0, 1fr) auto auto; min-height: 42px; padding-block: 3px; }
.mz--check { grid-template-columns: 42px minmax(0, 1fr) auto; padding-block: 6px; }
.mz__zeichen { width: 42px; height: 42px; }
.menu__blatt-unten { gap: 6px; padding-top: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.menu__blatt-plan { height: 52px; }
.menu__blatt-plan .btn__icon { width: 40px; height: 40px; }
.menu__recht { margin-top: 0; padding-top: 7px; }
}
@media (max-width: 900px) and (max-height: 640px) {
.menu__blatt-plan { height: 48px; }
.menu__blatt-plan .btn__icon { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
.menu__marke { font-size: 19px; }
.menu__anmelden { padding: 0 12px 0 10px; font-size: 14px; }
}
/* --------------------------------------------------------------------------
Kompakte Kapitel (seit 0.65.0, Entwurf «Scrollfluss» vom 11.10.2026): kleinere Titel, weniger Luft. Für Referenzen, Ablauf,
«Live ist erst der Anfang», FAQ und Abschluss der Startseite – der Gründer fand die Kapiteltitel überall zu gross und die
Seite zu lang. .kap-k = Abstände des Kapitels, .kk = Kapitelkopf (Vorzeile mit violettem Punkt, Titel mit kursiver zweiter
Zeile, Satz dazu), .tw-wahl = Umschalter mit zwei Möglichkeiten (Website oder Onlineshop).
-------------------------------------------------------------------------- */
.kap-k { padding-block: clamp(64px, calc(8 * var(--u)), 120px); }
.kk { display: grid; gap: 18px; margin-bottom: clamp(28px, calc(3.4 * var(--u)), 52px); }
.kk--geteilt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; column-gap: 48px; }
.kk--geteilt .kk__vor { grid-column: 1 / -1; }
.kk__vor { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -.005em; }
.kk__vor::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-signal); box-shadow: 0 0 0 4px rgba(123, 92, 255, .18); }
.kk__vor small { padding-left: 10px; border-left: 1px solid currentColor; font-size: 12px; font-weight: 400; opacity: .6; }
.kk__titel { margin: 0; font-size: clamp(32px, calc(3.5 * var(--u)), 56px); font-weight: 650; line-height: 1.02; letter-spacing: -.034em; text-wrap: balance; }
.kk__titel em { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-variation-settings: var(--serif-axes); letter-spacing: -.02em; color: var(--c-forest); }
[data-theme="dark"] .kk__titel em, [data-theme="forest"] .kk__titel em { color: var(--c-mint); }
.kk__lead { max-width: 34em; margin: 0; font-size: clamp(17px, calc(1.35 * var(--u)), 21px); line-height: 1.4; letter-spacing: -.012em; color: var(--muted); }
.tw-wahl { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 18, 14, .04); }
.tw-wahl button { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; transition: background-color .25s, color .25s; }
.tw-wahl button[aria-pressed="true"], .tw-wahl button[aria-checked="true"] { background: var(--c-forest); color: var(--c-paper); }
[data-theme="dark"] .tw-wahl, [data-theme="forest"] .tw-wahl, .tw-wahl--dunkel { border-color: rgba(242, 244, 238, .15); background: rgba(242, 244, 238, .055); }
[data-theme="dark"] .tw-wahl button, [data-theme="forest"] .tw-wahl button, .tw-wahl--dunkel button { color: rgba(242, 244, 238, .66); }
[data-theme="dark"] .tw-wahl button[aria-pressed="true"], [data-theme="forest"] .tw-wahl button[aria-pressed="true"], .tw-wahl--dunkel button[aria-pressed="true"],
[data-theme="dark"] .tw-wahl button[aria-checked="true"], [data-theme="forest"] .tw-wahl button[aria-checked="true"], .tw-wahl--dunkel button[aria-checked="true"] { background: var(--c-mint); color: var(--c-ink); }
@media (max-width: 800px) {
.kap-k { padding-block: 56px; }
.kk { gap: 14px; margin-bottom: 28px; }
.kk--geteilt { grid-template-columns: minmax(0, 1fr); }
.kk__titel { font-size: clamp(30px, 8.6vw, 40px); }
.tw-wahl button { padding: 8px 13px; font-size: 13.5px; }
}
/* --------------------------------------------------------------------------
Ort mit Leinwand (seit 0.63.1): Filmbox der vier Leistungen (Vorschau im Menü, Kapitel Leistungen). Markup aus
\twstrata\arp_ort(). Die Box ist ihr eigener Massstab (cqw): Die Leinwand hängt an der freien Wand des Films (--l, --o,
--b, --h in Prozent des Bildes) und skaliert mit. Der Film liegt über dem Standbild, sobald er läuft (engine.js, TW.ort).
-------------------------------------------------------------------------- */
.tw-ort { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #0c1712; container-type: inline-size; }
.tw-ort__bild, .tw-ort__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tw-ort__bild:not([src]) { visibility: hidden; }
.tw-ort__film { opacity: 0; transition: opacity .5s; }
.tw-ort__film.is-playing { opacity: 1; }
.tw-lw { position: absolute; left: var(--l); top: var(--o); width: var(--b); height: var(--h); display: flex; flex-direction: column; justify-content: center; gap: .5cqw; padding: 2.4cqw 3cqw 3cqw; overflow: hidden; background: linear-gradient(160deg, #163325, #0b1a14); color: var(--c-paper); text-align: left; box-shadow: 0 0 0 .12cqw rgba(242, 244, 238, .16), 0 1.8cqw 4.5cqw rgba(0, 0, 0, .6), 0 0 7cqw rgba(143, 216, 170, .1); }
.tw-lw > b { display: block; font-size: 5.1cqw; font-weight: 720; line-height: 1; letter-spacing: -0.048em; white-space: nowrap; }
.tw-lw__gruen { color: var(--c-mint); }
.tw-lw__marke { position: absolute; right: 2.4cqw; bottom: 1.7cqw; font-size: 1.5cqw; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #72d08f; }
.tw-lw__marke i { font-style: normal; font-weight: 600; color: #b98aff; }
.tw-lw__lauf { position: absolute; left: 0; bottom: 0; width: 100%; height: .36cqw; min-height: 1px; background: linear-gradient(90deg, var(--c-mint), var(--c-signal-bright)); transform: scaleX(0); transform-origin: 0 50%; }
.tw-ort.ist-an .tw-lw__lauf { animation: tw-lw-lauf 9s linear infinite; }
@keyframes tw-lw-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tw-lw__vier { position: absolute; left: 0; right: 0; top: 0; height: .5cqw; min-height: 2px; background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%); }
.tw-lw__such { display: flex; align-items: center; gap: 1cqw; min-height: 4.6cqw; padding: .8cqw 1.7cqw; border: .13cqw solid rgba(242, 244, 238, .36); border-radius: 99cqw; font-size: 2.05cqw; line-height: 1.2; white-space: nowrap; }
.tw-lw__such svg { flex: none; width: 2cqw; height: 2cqw; opacity: .7; }
.tw-lw__such i { width: .17cqw; min-width: 1px; height: 2.3cqw; background: var(--c-paper); opacity: 0; }
.tw-ort.ist-an .tw-lw__such i { animation: tw-lw-blink 1s steps(1) infinite; }
@keyframes tw-lw-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
.tw-lw__treffer { display: grid; gap: .4cqw; margin-top: .7cqw; padding: 1.2cqw 1.7cqw; border-radius: 1.2cqw; background: rgba(242, 244, 238, .08); opacity: .12; transition: opacity .5s; }
.tw-lw__treffer.ist-da { opacity: 1; }
.tw-lw__treffer small { font-size: 1.35cqw; line-height: 1.3; color: #b9c4bb; white-space: nowrap; }
.tw-lw__treffer small b { margin-right: .8cqw; font-weight: 600; color: var(--c-paper); }
.tw-lw__treffer strong { font-size: 2.1cqw; font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; color: #8ab4f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-lw__liste { display: flex; flex-wrap: wrap; gap: .7cqw 1.7cqw; margin-top: 1.1cqw; font-size: 1.75cqw; line-height: 1.3; color: #d9e1da; }
.tw-lw__liste span { display: inline-flex; align-items: center; gap: .7cqw; }
.tw-lw__liste span::before { content: ""; width: 1.5cqw; height: 1.5cqw; border: .15cqw solid var(--c-mint); border-radius: 50%; background: var(--c-mint); }
.tw-ort.ist-an .tw-lw__liste span::before { animation: tw-lw-haken 9s linear infinite; animation-delay: calc(var(--n, 0) * 1.1s); }
.tw-lw__liste span:nth-child(2) { --n: 1; } .tw-lw__liste span:nth-child(3) { --n: 2; } .tw-lw__liste span:nth-child(4) { --n: 3; } .tw-lw__liste span:nth-child(5) { --n: 4; }
@keyframes tw-lw-haken { 0%, 7% { background: transparent; border-color: rgba(242, 244, 238, .5); } 11%, 100% { background: var(--c-mint); border-color: var(--c-mint); } }
.float-cta { position: fixed; right: var(--margin); bottom: clamp(16px, calc(1.6 * var(--u)), 30px); z-index: 70; display: flex; gap: 10px; align-items: center; }
/* Desktop: im Hero ausgeblendet, damit die Wortmarke frei steht (wie Arpeggio) */
@media (min-width: 801px) {
.float-cta { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s; }
html:not(.is-past-hero) .float-cta { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s; }
/* Verdeckt der Knopf gerade Text, Bilder oder Karten, tritt er zurück (engine.js: floatCtaOverlap) */
html.float-cta-verdeckt .float-cta { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
}
/* Handy: Der Knopf weicht wie die Kopfzeile beim Runterscrollen aus und kommt beim Hochscrollen zurück
(engine.js headerAutoHide, html.kopf-weg) – so verdeckt er beim Lesen keine Überschriften und Karten. */
@media (max-width: 800px) {
.float-cta { transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s; }
html.kopf-weg:not(.menu-open) .float-cta,
/* Seit 0.65.1: In Abschnitten mit data-float-cta="off" (Leistungen – jede Seite hat ihren eigenen Knopf) bleibt er auch
beim Hochscrollen weg (engine.js: floatCtaOverlap prüft am Handy nur diese Abschnitte). */
html.float-cta-verdeckt:not(.menu-open) .float-cta { opacity: 0; visibility: hidden; transform: translateY(calc(100% + 16px)); pointer-events: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s; }
}
.float-cta .btn { height: 48px; background: rgba(8, 18, 14, .82); color: var(--c-paper); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(242, 244, 238,.12); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.ph-toggle { height: 48px; padding: 0 16px; border-radius: 999px; background: rgba(8,18,14,.82); color: rgba(242, 244, 238,.86); border: 1px solid rgba(242, 244, 238,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 12px/1 var(--font-mono); }
.ph-toggle[aria-pressed="false"] { color: rgba(242, 244, 238,.5); }
/* Handy (seit 0.46.24): schwebender Knopf deckend statt Milchglas (siehe Kopf-Pillen) */
@media (max-width: 800px) { .float-cta .btn { background: rgba(8, 18, 14, .94); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Rollende Ziffern */
.odo { display: inline-flex; align-items: flex-start; line-height: 1; }
.odo__col { display: inline-block; height: 1em; overflow: hidden; }
.odo__reel { display: flex; flex-direction: column; transform: translateY(0); }
.odo__reel > span { display: block; height: 1em; line-height: 1; }
.odo__sep { display: inline-block; }
/* Laufband */
.marquee { display: flex; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex: none; align-items: center; gap: var(--marquee-gap, 64px); padding-right: var(--marquee-gap, 64px); animation: tw-marquee var(--marquee-dur, 30s) linear infinite; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track, .marquee:focus-visible .marquee__track { animation-play-state: paused; }
.marquee[tabindex] { cursor: pointer; }
@keyframes tw-marquee { to { transform: translateX(-100%); } }
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* Gestoppt (Menü, Dialog): Scrollbalken nicht entfernen, sonst springt das Layout um seine Breite */
html.lenis.lenis-stopped:not(.lenis-autoToggle) { overflow: visible; overflow-x: clip; }
/* Kapitelköpfe wie Arpeggio: Eyebrow-Zeile mit Haarlinie über die Kopfbreite */
.work-eyebrow, .flow-eyebrow, .why__eyebrow, .care__eyebrow, .portal__intro > .eyebrow {
display: flex; width: 100%; padding-bottom: clamp(14px, calc(1.2 * var(--u)), 22px); border-bottom: 1px solid var(--line);
margin-bottom: clamp(26px, calc(2.2 * var(--u)), 42px); font-size: clamp(20px, calc(1.6 * var(--u)), 30px);
}
/* Mobile */
@media (max-width: 800px) {
:root { --header-h: 60px; --cta-reserve: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* Handy: Die Leiste ist deckend statt Milchglas (seit 0.46.24 für alle fest stehenden Flächen): Ein Weichzeichner muss
bei jedem Bild neu berechnet werden, auch über laufenden Videos – auf dem iPhone Arbeit für fast keinen sichtbaren Effekt.
Seit dem Mobile-Audit vom 17.10.2026 (F11) ganz deckend: Mit 94 bzw. 96 % schienen helle Schrift und helle Knöpfe
darunter sichtbar über Wortmarke und «Menü» durch (z. B. auf /google-ads/, nach dem Sprung zu /#ablauf). */
.site-header { --kopf-bg: #08120e; gap: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-header-auto="light"] .site-header, html[data-header-tone="ink"] .site-header { --kopf-bg: #f2f4ee; }
html[data-header-tone="paper"] .site-header { --kopf-bg: #08120e; }
html.header-glass .site-header { --kopf-bg: var(--header-glass, var(--c-paper)); }
.site-header__logo { font-size: 20px; }
.site-header__menu { height: 38px; }
/* Beim Runterscrollen weicht die Kopfzeile nach oben aus, beim Hochscrollen kommt sie zurück (engine.js) */
.site-header { transition: color .35s var(--ease-out), background-color .25s, border-color .35s var(--ease-out), transform .35s var(--ease-out); }
html.kopf-weg:not(.menu-open) .site-header { transform: translateY(calc(-100% - 2px)); }
/* Platzhalter-Infos kompakt: nur Kennung und Art; antippen zeigt Details */
.ph__label { gap: 2px; cursor: pointer; }
.ph__label .ph__spec, .ph__label .ph__motif { display: none; }
.ph__label.is-open .ph__spec, .ph__label.is-open .ph__motif { display: block; }
.ph__label:not(.is-open) .ph__head::after { content: " ⓘ"; color: rgba(242, 244, 238,.6); }
.float-cta { left: var(--margin); right: var(--margin); justify-content: space-between; }
.float-cta .btn { flex: 1; justify-content: space-between; }
.ph__label { font-size: 10px; padding: 8px 10px; left: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ==========================================================================
Wortmarke in der Kopfzeile (seit 0.55.0; seit 0.63.1 links in der Leiste und immer sichtbar)
«tannwerk» steht in der Schrift der grossen Wortmarke des Hero (800, −0,055 em) in einer eigenen Zeile von 1 em.
Auf der Startseite fliegt die Wortmarke des Hero beim ersten Scrollen hierher und landet genau darauf (01-hero.js).
html.hat-flug: Der Flug ist aktiv – solange die grosse Wortmarke im Hero steht, bleibt der Platz in der Leiste leer.
html.marke-flug: unterwegs (Wort und «.studio» verborgen). html.marke-oben: gelandet.
Ohne Flug (Unterseiten, «Bewegung reduzieren», ohne Skript) steht die Wortmarke von Anfang an in der Leiste.
========================================================================== */
.site-header__wort { display: inline-block; font-weight: 800; line-height: 1; letter-spacing: -0.055em; }
.site-header__wort + span { margin-left: .02em; }
/* Zurück im Hero verschwindet das Logo sofort (kein Übergang): Sonst stünde es kurz neben der grossen Wortmarke. */
html.hat-flug .site-header__logo { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
html.hat-flug.marke-flug .site-header__logo,
html.hat-flug.marke-oben .site-header__logo { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out) .12s, visibility 0s; }
html.hat-flug.marke-oben .site-header__logo { pointer-events: auto; }
html.marke-flug .site-header__wort { visibility: hidden; }
html.marke-flug .site-header__logo span { opacity: 0; }
html.marke-oben .site-header__logo span { transition: opacity .45s var(--ease-out) .05s, color .35s var(--ease-out); }
/* Kundenstimme als Baustein für /preise/ und die Themenseiten (seit 0.61.3, kundenstimme_html() in includes/unterseiten.php).
Gleiche Anmutung wie im Preise-Kapitel der Startseite (.price-stimme): linksbündig, Person links, Zitat daneben, normale Schrift. */
.tw-stimme { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin: 0; text-align: left; }
.tw-stimme__wer { grid-column: 1 / span 4; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; justify-content: start; margin-top: 2px; font-size: var(--fs-small, 14px); line-height: 1.4; color: var(--muted); }
.tw-stimme__wer strong { display: block; color: var(--fg); font-weight: 600; }
.tw-stimme__bild { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.tw-stimme__wer .link-u { grid-column: 2; justify-self: start; color: var(--fg); }
.tw-stimme__text { grid-column: 5 / span 7; grid-row: 1; margin: 0; }
.tw-stimme__text p { margin: 0; font-size: clamp(17px, calc(1.3 * var(--u)), 21px); line-height: 1.5; font-weight: 400; letter-spacing: -0.01em; text-wrap: pretty; }
.tw-stimme--thema { margin-bottom: clamp(56px, calc(6 * var(--u)), 110px); padding-bottom: clamp(40px, calc(4.5 * var(--u)), 80px); border-bottom: 1px solid var(--line, rgba(8, 18, 14, .12)); }
.tw-stimme--preise { margin-top: clamp(56px, calc(6 * var(--u)), 110px); }
@media (max-width: 800px) {
.tw-stimme { display: block; }
.tw-stimme__wer { margin-top: 20px; }
.tw-stimme__text p { font-size: 17px; }
}
/* Rollbild (seit 24.10.2026, arp_rollbild() in includes/arpeggio.php): Platzhalter für ein Projekt ohne Film. Die echte
Aufnahme der ganzen Seite fährt im Browserfenster (quer) oder auf dem Handy (hoch) langsam nach unten, blendet aus und
beginnt oben neu – nie hin und zurück. Füllt das positionierte Elternelement; Farbwelt über --roll-a/-b/-c (Standard:
Wein und Gold von Gasthaus Mühle). Nur transform und opacity; «Bewegung reduzieren» zeigt den ersten Bildschirm. */
@keyframes tw-roll {
0%, 6% { transform: translateY(0); opacity: 1; }
86%, 91% { transform: translateY(calc(-100% + 100cqh)); opacity: 1; }
95% { transform: translateY(calc(-100% + 100cqh)); opacity: 0; }
96% { transform: translateY(0); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.tw-roll { --roll-a: #7d2f25; --roll-b: #150908; --roll-c: #d9b66e; position: absolute; inset: 0; display: block; overflow: hidden; container: tw-roll / size;
background: radial-gradient(70% 55% at 50% 108%, color-mix(in srgb, var(--roll-c) 26%, transparent), transparent 72%), radial-gradient(85% 75% at 12% -6%, color-mix(in srgb, var(--roll-a) 80%, transparent), transparent 70%), var(--roll-b); }
.tw-roll__geraet { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: #fbf8f2; }
.tw-roll__schirm { position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; background: #fbf8f2; }
.tw-roll .tw-roll__seite { position: static; display: block; width: 100%; height: auto; max-width: none; object-fit: fill; visibility: visible; will-change: transform;
animation: tw-roll var(--roll-dauer, 34s) cubic-bezier(.45, 0, .55, 1) infinite; }
/* Browser: Fenster steigt von unten ins Bild (unten angeschnitten), Leiste mit drei Punkten und Adresse */
.tw-roll--browser .tw-roll__geraet { left: 8.5%; right: 8.5%; top: var(--roll-oben, 10%); bottom: -1px; border-radius: max(6px, 1.4cqw) max(6px, 1.4cqw) 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 4cqh 9cqh -3cqh rgba(0, 0, 0, .75); }
.tw-roll__leiste { flex: none; display: flex; align-items: center; gap: 2cqw; height: max(9px, 6.4cqh); padding: 0 2.6cqw; background: #ebe6dc; border-bottom: 1px solid rgba(16, 41, 28, .08); }
.tw-roll__punkte { display: flex; gap: .8cqw; }
.tw-roll__punkte i { width: max(4px, 1.15cqw); aspect-ratio: 1; border-radius: 50%; background: rgba(16, 41, 28, .2); }
.tw-roll__adresse { flex: 0 1 44%; margin-inline: auto; transform: translateX(-3cqw); padding: .5cqh 2cqw; border-radius: 999px; background: rgba(16, 41, 28, .06); font-size: clamp(7px, 2.5cqh, 12px); line-height: 1.4; color: rgba(16, 41, 28, .62); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container tw-roll (max-height: 230px) { .tw-roll__adresse { visibility: hidden; } }
/* Handy: mittig, so hoch wie Platz ist (--roll-handy-b: grösste Breite als Anteil der Bühne) */
.tw-roll--handy .tw-roll__geraet { left: 50%; top: 50%; height: min(84cqh, calc(var(--roll-handy-b, .62) * 100cqw * 844 / 390)); aspect-ratio: 390 / 844; padding: 2.6%; border-radius: 15% / 7%; background: #0b0d0c; transform: translate(-50%, -50%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 3cqh 8cqh -2cqh rgba(0, 0, 0, .8), 0 0 10cqh -4cqh color-mix(in srgb, var(--roll-c) 40%, transparent); }
.tw-roll--handy .tw-roll__schirm { border-radius: 12% / 5.6%; }
@media (prefers-reduced-motion: reduce) { .tw-roll .tw-roll__seite { animation: none; } }