/* ============================ FONTS (LOKAL GEHOSTET) ============================
DSGVO: keine Google-Server, keine IP-Übertragung (LG München I, 3 O 17493/20).
Dateien: assets/fonts/ · Lizenz: SIL OFL 1.1 · Subset: latin (inkl. Umlaute) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
/* ============================ THEME / TOKENS ============================
FÜR DIE PROJEKT-UMWANDLUNG — alles Zentrale liegt hier:
- Fonts: --font-display / --font-body / --font-mono unten ändern
(und den Google-Fonts- im anpassen bzw. lokal hosten).
- Farben: die Variablen darunter (durchgehend helles Schema).
- Bilder: hero-visual.webp (Hero), fenster-1/2/3.webp (Bild-Fenster),
mein-foto.png (Über mich + Kontakt) — Suchbegriff "TAUSCHEN".
=============================================================
Farblogik "Trusted Intelligence":
Deep Navy = Schutz & Kompetenz (Header, Hero, Footer, Mockups)
Cyan = Automatisierung, aktives System, primäre CTAs
Amber = die menschliche Entscheidung / "Ihr Part"
Success = erledigt, läuft · Danger = Frist, Fehler, Eskalation
Sektions-Rhythmus: streng abwechselnd A (--paper) / B (--band);
dunkle Bühnen (Header/Hero/Footer) liegen am Ende der Datei. */
:root{
/* ======================== PROZURA · LACE → MIDNIGHT ===================
Hauptfarbe ist Navy. Sie trägt Titel, Buttons, Links, Icon-Striche
und Häkchen — die Palette gibt keinen zweiten Ton her, der beides
kann (Text tragen UND sich von Navy abheben).
Kernpunkte in Headlines sind deshalb KEINE Farbwechsel, sondern
Navy-Text auf einem Camel-Marker (4.79:1). Camel als Text müsste
zu Braun abgedunkelt werden und wäre auf Cream durchgefallen —
als Fläche ist es die einzige wirklich sichtbare Farbe der Palette.
Hinweis: Die Vorlage nennt für MIDNIGHT denselben Hexwert wie für
NAVY. Der tatsächliche Wert ist aus dem Bild gelesen: #222824.
================================================================== */
/* --- Palette -------------------------------------------------------- */
--lace:#F6F5F2; /* Kältestich raus, sonst bleibt die Naht */
--cream:#E9E6E0; /* aufgehellt: 1.14 statt 1.29 zur Naht */
--camel:#BEB2A2; /* nur auf dunklem Grund: dort 7.21:1 */
--camel-mark:#A2937C; /* Marker auf hellem Grund, 2.41–2.92:1 */
--ocean:#2E7EA4; /* Paletten-Ocean auf 56 % Sättigung gezogen */
--navy:#34454D;
--midnight:#222824;
/* --- Warm-Akzent (Feierabend-Terrakotta, aus Camel/Ocker abgeleitet) --
Rollenlogik: Ocean = Interaktion (CTA, Links, Fokus) ·
Ember = Emotion & Struktur (Hero-Underline, Kicker, Icon-Rhythmus).
Nichts Klickbares wird Ember, nichts Dekoratives mehr Ocean. */
--ember:#C4703F; /* Fläche / Underline / Marker (dekorativ) */
--ember-ink:#935226; /* als Text: 5.54 auf Lace, 4.85 auf Cream */
--ember-soft:rgb(196 112 63 / .12);
--ember-line:rgb(196 112 63 / .34);
--hl-deep:#86BDD9; /* Kernpunkte auf Navy-Bühne 4.89:1 */
/* --- Die Rollen ----------------------------------------------------- */
--title:#222824; /* Titel = Midnight min 10.65:1 */
--hl:#2E7EA4; /* Kernpunkte 3.32 gegen Titel */
--eyebrow:#935226; /* Übertitel — warm (Ember-Ink), min 4.85:1 */
--muted:#565B60; /* Fließtext min 4.86:1 */
--ink:#2C3238; /* betonter Text */
--primary:#2A7396; /* CTA-Füllung, Lace-Text 4.83:1 */
--primary-hover:#20688C;
/* --- Flächen -------------------------------------------------------- */
--card:#FCFCFB;
--paper:#F6F5F2; /* Sektion A — Lace */
--band:#E9E6E0; /* Sektion B — Cream */
--wash:#DDE7ED; /* Zäsur, aus Ocean aufgehellt */
--deep:#34454D; /* Empfehlungskarte — Navy */
--deepest:#222824; /* Footer — Midnight */
/* --- Produkt-UI ----------------------------------------------------- */
--active:#2C6A85; /* System läuft */
--human:#8F6420; /* Ihr Part — Ocker, satt, 5.10:1 */
--done:#6E7377; /* erledigt, gedämpft */
--danger:#9A4B3F; /* Frist / Fehler — abgeleitet */
--success:#237A61; /* erledigt — Grün, Lace-Haken 4.78:1 */
--ink-task:#2C3238;
--ink-done:#6E7377;
/* --- Auf dunklem Grund ---------------------------------------------- */
--on-deep:#F6F5F2;
--on-deep-muted:#BFC8CC;
--on-deep-dim:#A8B3B8;
--spark:#BEB2A2; /* Camel als Fläche auf Navy / Midnight */
/* --- Auf bestehende Tokennamen gemappt ------------------------------ */
--surface-a:#F6F5F2;
--surface-b:#E9E6E0;
--sand:#E9E6E0;
--panel:#FCFCFB;
--panel-2:rgb(34 40 36 / .05);
--line:rgb(34 40 36 / .13);
--accent:#256580; /* Textlinks, Fokus, Ghost-Hover 5.18:1 */
--accent-strong:#2A7396;
--accent-deep:#20688C;
--accent-soft:rgb(42 115 150 / .26);
--accent-faint:rgb(42 115 150 / .07);
--ok:#237A61;
--ok-soft:rgb(35 122 97 / .12);
/* Navy trägt Striche und Häkchen, Camel die Flächen darunter */
--fam:#34454D;
--fam-soft:rgb(46 126 164 / .13);
--fam-line:rgb(46 126 164 / .3);
--r-lg:16px; --r:12px; --r-sm:8px;
--font-display:'Space Grotesk',system-ui,sans-serif;
--font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:106.25%} /* 17px Basis — globale Lesbarkeit */
/* overflow-wrap wird vererbt und greift nur, wenn ein Wort sonst aus
seiner Box liefe — am Textbild ändert sich sonst nichts. Nötig für
die langen deutschen Komposita ("Verschwiegenheitsverpflichtung",
"Auftragsverarbeitungsvereinbarung"), die in Karten bei 320–375px
breiter sind als ihre Spalte. */
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.65;overflow-x:hidden;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
::selection{background:var(--primary);color:var(--card)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;font-weight:700;color:var(--title);letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{scroll-margin-top:90px}
/* A/B-Rhythmus: nur noch zwei Flächen — Canvas und Weiß. Der Wechsel
ist bewusst kaum sichtbar; getrennt werden die Sektionen durch den
Karten-Kontrast, nicht durch den Hintergrund. Damit Karten in beiden
Fällen ablesbar bleiben, drehen sich die Füllungen um:
Canvas-Sektion → weiße Karten, weiße Sektion → Canvas-Karten. */
/* Fließende Übergänge: Lace ist das Bindegewebe. Jede getönte Sektion
blendet oben und unten weich in Lace über, deshalb gibt es nirgends
eine harte Kante — auch nicht zwischen Cream und dem Ocean-Wash. */
.sec-a{background:var(--paper);padding:110px 0}
.sec-b{background:linear-gradient(180deg,var(--paper) 0%,var(--band) 12%,var(--band) 88%,var(--paper) 100%);padding:110px 0}
/* Zwei aufeinanderfolgende B-Sektionen verschmelzen ohne Lace-Naht */
.sec-b.flat-bottom{background:linear-gradient(180deg,var(--paper) 0%,var(--band) 12%,var(--band) 100%)}
.sec-b.flat-top{background:linear-gradient(180deg,var(--band) 0%,var(--band) 88%,var(--paper) 100%)}
.sec-b.flat-top.flat-bottom{background:var(--band)}
/* ============================ HEADER ============================ */
header{
position:fixed;inset:0 0 auto 0;z-index:60;
background:rgb(245 245 245 / .86);backdrop-filter:blur(10px);
border-bottom:1px solid transparent;transition:border-color .2s;
}
header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--hl);display:grid;place-items:center;flex:none}
.nav ul{display:flex;gap:28px;list-style:none}
.nav ul a{text-decoration:none;color:var(--muted);font-size:.95rem;transition:color .15s}
.nav ul a:hover{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);width:42px;height:42px;font-size:1.1rem;cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:15px 24px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-menu a:hover{color:var(--accent)}
/* ============================ BUTTONS ============================ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
border-radius:var(--r);padding:14px 24px;font-family:var(--font-body);
font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;
transition:transform .15s,box-shadow .2s,border-color .2s,background .2s;
border:1px solid transparent;
}
/* Primär-CTA laut Konzept: Cyan-Fläche, Navy-Text (Kontrast 10.7:1) */
.btn-primary{background:var(--primary);color:var(--card)}
.btn-primary:hover{background:var(--primary-hover);color:var(--card);transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-soft)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--panel)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:10px 18px;font-size:.9rem}
/* ============================ ETIKETTEN & KOEPFE ============================ */
.kicker{font-family:var(--font-mono);font-weight:500;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow)}
/* Der frühere Kicker-Strich (::before) ist auf Wunsch raus. */
/* Warmer Marker vor jedem Übertitel — 18× über die Seite verteilt und die
einzige Stelle, an der die Palette auf hellem Grund warm werden kann.
Als inline-block läuft er bei zentrierten Sektionsköpfen automatisch mit. */
.tag{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:var(--panel)}
.sec-head{max-width:46rem;margin-bottom:44px}
/* Subline unter CTAs: die drei Fakten, die Hemmschwellen abbauen */
.cta-sub{margin-top:12px;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted)}
/* Mini-Porträt neben dem Kontakt-CTA — erscheint erst, wenn mein-foto.png da ist */
.contact-person{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.contact-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-soft)}
.contact-person span{font-size:.9rem;color:var(--muted)}
.contact-person b{color:var(--ink)}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:10px 0 14px}
.sec-head p{color:var(--muted)}
/* ============================ REVEAL (nur vorwärts) ============================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
/* ============================ HERO ============================
Einheitliche helle Bühne. Hintergrund: entweder das eigene Bild
(hero-visual.webp — Ken-Burns-Drift) oder, wenn keins da ist, die
eingebaute Automatisierungs-Animation: links laufen Aufgaben chaotisch
ein, durch den Prozura-Knoten verlassen sie die Bühne als geordnete,
parallele Bahnen. Chaos → Ordnung — das Produkt, als Animation. */
/* Höhe gedeckelt: nie höher als 880px — der tote Raum auf großen
Monitoren verschwindet, die nächste Sektion bleibt spürbar. */
.hero{position:relative;min-height:clamp(560px,86vh,880px);display:flex;align-items:center;padding:130px 0 110px;overflow:hidden;background:var(--paper)}
.hero .wrap{position:relative;z-index:2}
/* Der Verlauf liegt auf .hero-bg (deckt jede Monitorbreite ab).
Das Netz-SVG ist ein FESTER 1440×810-Canvas, zentriert wie der
.wrap — SVG-Koordinaten und Kartenposition stehen damit auf jeder
Monitorbreite im selben Verhältnis: die Kanten treffen die Karte. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--surface-b) 0%,var(--surface-a) 52%,var(--wash) 100%)}
.hero-bg img{
width:100%;height:100%;object-fit:cover;object-position:74% 42%;
animation:heroDrift 32s ease-in-out infinite alternate;
transform-origin:70% 45%;will-change:transform;
}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.4%,1%)}}
.hero-anim{position:absolute;left:50%;top:50%;width:1440px;height:810px;transform:translate(-50%,-50%)}
/* Neuronales Netz: Kanten laufen von links durch die Schichten und
münden rechts in der To-do-Karte — das Netz "produziert" sichtbar
die erledigte Liste. Impulse wandern per SMIL entlang der Kanten. */
.hero-anim .edge{stroke:var(--primary);stroke-width:1.3;fill:none;opacity:.24}
.hero-anim .edge.hot{opacity:.42}
.hero-anim .edge.out{stroke:var(--success);stroke-width:1.5;opacity:.5}
.hero-anim .node{fill:none;stroke:var(--primary);stroke-width:1.4;opacity:.5}
.hero-anim .node.core{fill:rgb(52 69 77 / .16)}
.hero-anim .pulse{fill:var(--primary);opacity:.85}
.hero-anim .pulse.ok{fill:var(--success)}
.hero-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgb(245 245 245 / .92) 0%,rgb(245 245 245 / .72) 34%,rgb(245 245 245 / .22) 62%,rgb(245 245 245 / .05) 100%),
linear-gradient(180deg,rgb(245 245 245 / .55) 0%,rgb(245 245 245 / 0) 26%,rgb(245 245 245 / 0) 70%,rgb(245 245 245 / .6) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.85rem;color:var(--muted);background:rgb(255 255 255 / .65);backdrop-filter:blur(8px)}
/* Ruhiger Petrol-Punkt ("System läuft") — kein Puls: das bewegteste
Element im Erstkontakt soll nicht das unwichtigste Label sein. */
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
/* Schriftgröße so gedeckelt, dass "Ihr Büro arbeitet weiter." IMMER
auf eine Zeile passt (nowrap + an die Spaltenbreite gekoppeltes
clamp) — kein zufälliger Umbruch, kein einsames "weiter." mehr. */
.hero h1{font-size:clamp(2rem,3.8vw,2.7rem);margin:22px 0 18px}
.hero h1 .l1{white-space:nowrap}
@media (max-width:560px){.hero h1 .l1{white-space:normal}}
.hero h1 .accent{color:var(--accent);position:relative;white-space:nowrap}
.hero h1 .accent svg{position:absolute;left:0;bottom:-8px;width:100%;height:12px}
.hero .sub{color:var(--muted);font-size:1.12rem;max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* Trust als eine ruhige Mono-Zeile statt dreier Chips — die Beweise
liefert die Vertraulichkeits-Sektion, hier reicht das Signal. */
/* Vier eigenständige Boxen; kompakt genug, dass zwei Reihen à zwei
Chips entstehen statt einer ausgefransten Einzelwaise. */
.trust-line{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.trust-line span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgb(255 255 255 / .7);backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.trust-line svg{flex:none;stroke:var(--ok)}
/* Hero: die frühere Pill oben ist zu drei Chips unter der CTA-Zeile geworden */
.hero-trust{justify-content:center;margin-top:22px}
/* Untereinander gestapelt braucht der längste Chip ("Kein Training mit
Ihren Daten") 278px — unter ~360px darf er deshalb umbrechen. */
@media (max-width:600px){.hero-trust{flex-direction:column;align-items:center}}
@media (max-width:360px){.trust-line span{white-space:normal;text-align:center}}
/* Halo hinter der To-do-Karte: verankert sie auf der Bühne */
.todo-slot{position:relative}
.todo-slot::before{content:"";position:absolute;inset:-80px;background:radial-gradient(50% 50% at 46% 50%,rgb(52 69 77 / .16),transparent 68%);filter:blur(22px);pointer-events:none}
.todo-slot .todo{position:relative}
/* Scroll-Hinweis */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--muted);background:rgb(255 255 255 / .6);backdrop-filter:blur(6px);text-decoration:none;animation:cue 2.4s ease-in-out infinite}
.scroll-cue:hover{color:var(--accent);border-color:var(--accent)}
@keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
.trustbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:9px 15px;font-size:.85rem;color:var(--muted)}
.hero .chip{background:rgb(255 255 255 / .65);backdrop-filter:blur(8px)}
.chip svg{flex:none;stroke:var(--fam)}
/* To-do-Karte (Signatur, im Hero) — heller Stil:
weiße Karte, blaue Checkboxen, Zeilen durch feine
Linien getrennt, Chips als reiner Text. Footer: EINE große Zahl. */
.todo{background:var(--card);border:1px solid rgb(34 40 36 / .13);border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgb(34 40 36 / .38);overflow:hidden;color:var(--ink)}
.todo-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid rgb(34 40 36 / .1)}
.todo-bar .title{font-family:var(--font-display);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:9px;color:var(--ink)}
.todo-bar .title::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--active)}
.todo-bar time{font-family:var(--font-mono);font-size:.74rem;color:var(--muted)}
.todo ul{list-style:none;padding:4px 22px}
.todo li{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid rgb(34 40 36 / .07);font-size:.94rem;font-weight:500}
.todo li:last-child{border-bottom:none}
.todo .box{width:20px;height:20px;flex:none;border:2px solid rgb(34 40 36 / .25);border-radius:6px;display:grid;place-items:center;font-size:.72rem;color:var(--card);transition:all .3s ease}
.todo .task{position:relative;color:var(--ink-task);transition:color .3s ease,opacity .3s ease}
.todo .task::after{content:"";position:absolute;left:0;top:54%;height:2px;width:0;background:var(--success);border-radius:2px;transition:width .45s ease}
.todo .tchip{margin-left:auto;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.02em;white-space:nowrap;color:var(--primary);opacity:0;transform:translateX(6px);transition:all .35s ease}
.todo li.done .box{background:var(--success);border-color:var(--success)}
.todo li.done .box::before{content:"✓"}
.todo li.done .task{color:var(--ink-done)}
.todo li.done .task::after{width:100%}
.todo li.done .tchip{opacity:1;transform:none}
.todo li.you .task{color:var(--ink)}
.todo li.you .tchip{color:var(--human);opacity:1;transform:none}
.todo-foot{padding:16px 22px;border-top:1px solid rgb(34 40 36 / .1);display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:.88rem}
.todo-foot .big{font-family:var(--font-display);font-weight:700;font-size:2.1rem;line-height:1;color:var(--ink)}
/* ============================ KARTEN ============================ */
/* minmax(0,1fr) statt 1fr: eine 1fr-Spur darf nicht unter die
min-content-Breite ihres Inhalts — ein langes Kompositum wie
"Verschwiegenheitsverpflichtung" hat die Spalte auf 345px aufgebläht
und die Karte damit über den 375px-Viewport geschoben. Mit 0 als
Minimum bleibt die Spur in der Breite des Containers, und der lange
Titel bricht (siehe overflow-wrap an h1–h3). */
.cards{display:grid;gap:22px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--fam);box-shadow:0 12px 30px rgb(34 40 36 / .12)}
.icon{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;background:var(--fam-soft);border:1px solid var(--fam-line);margin-bottom:18px}
.icon svg{stroke:var(--fam)}
.card h3{font-size:1.15rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.stat{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.03em;background:var(--fam-soft);color:var(--fam);padding:5px 12px;border-radius:999px}
.card.special{border-style:dashed;border-color:var(--accent-soft)}
.pain-quote{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:10px}
.pain-fix{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);color:var(--fam);font-size:.9rem}
/* Karten als Flex-Spalten: die "Was stattdessen geht"-Zeile und die
Stat-Chips rutschen an die Unterkante — alle Karten schließen auf
derselben Höhe ab, egal wie lang der Text darüber ist. */
#probleme .card{display:flex;flex-direction:column}
#probleme .card p{margin-bottom:14px}
#probleme .card p.pain-fix{margin-bottom:0}
#leistungen .card{display:flex;flex-direction:column;align-items:flex-start}
#leistungen .card p{margin-bottom:16px}
#leistungen .stat{margin-top:auto}
.benefit-big{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:8px}
.checklist{list-style:none;margin-top:22px;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:.98rem}
.checklist svg{flex:none;margin-top:3px;stroke:var(--fam)}
.checklist small{display:block;color:var(--muted)}
/* ============================ BILD-FENSTER (halbe Höhe) ============================
Fixed-Background-Reveal via clip-path (funktioniert — anders als
background-attachment:fixed — auch auf iOS): das Motiv steht fest,
die Sektionen schieben sich darüber. Bewusst nur ~50vh hoch — eine
Zäsur, kein zweiter Hero.
BILD TAUSCHEN: in der jeweiligen .iw-media das
style="background-image:url('fenster-X.webp')" ändern. Ohne Bild
zeigt jedes Fenster seine eigene SVG-Szene. */
/* Bewusst klein — eine Überschrift mit stehendem Bild, kein zweiter Hero. */
.img-window{position:relative;height:34vh;min-height:250px;clip-path:inset(0)}
.iw-media{position:fixed;inset:0;z-index:0;background-color:var(--band);background-size:cover;background-position:center}
.iw-media svg{position:absolute;inset:0;width:100%;height:100%}
.iw-shade{position:fixed;inset:0;z-index:1;background:radial-gradient(80% 90% at 50% 55%,rgb(245 245 245 / .18) 0%,rgb(245 245 245 / .62) 100%),linear-gradient(180deg,rgb(245 245 245 / .5),rgb(245 245 245 / .28) 40%,rgb(245 245 245 / .55))}
.iw-caption{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px}
.iw-caption .kicker{margin-bottom:12px;font-size:.82rem;letter-spacing:.24em;color:var(--success)}
.iw-claim{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:clamp(1.4rem,3.2vw,2.3rem);line-height:1.15;max-width:26ch;letter-spacing:-.01em;text-wrap:balance}
.iw-claim b{color:var(--primary);font-weight:700}
.iw-caption .btn{margin-top:26px}
@media (max-width:767px){.img-window{height:30vh;min-height:210px}}
/* ============================ ABLAUF: KACHEL-ZEITSTRAHL ============================
Gerade Linie in der Mitte, Inhalte strikt in den Spalten links und
rechts — die Linie kann Text nicht mehr kreuzen. Badges schalten
sich an, sobald die Füllung sie erreicht. Auf Mobil wandert die
Linie nach links, alles in eine Spalte. */
/* Die Linie ist ein SVG-Pfad, der sich in sanften S-Kurven durch den
freien Mittelkorridor schlängelt und die Etappen-Badges verbindet.
Sie füllt sich mit dem Scroll-Fortschritt (stroke-dashoffset).
Inhalte liegen strikt in den Außenspalten — die Kurve bleibt im
Korridor und kann keinen Text kreuzen. */
.timeline{position:relative;max-width:1060px;margin:0 auto;padding:10px 0}
.tl-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tl-svg .base{stroke:var(--line);stroke-width:3;fill:none;stroke-linecap:round}
.tl-svg .fillp{stroke:url(#tlGrad);stroke-width:3;fill:none;stroke-linecap:round}
.tl-row{display:grid;grid-template-columns:1fr 130px 1fr;align-items:center;margin-bottom:72px;position:relative;z-index:1}
/* Fly-in: Text und Vignette kommen beim Scrollen von außen herein */
[data-anim]{opacity:0;transition:opacity .65s cubic-bezier(.22,.9,.3,1),transform .65s cubic-bezier(.22,.9,.3,1);will-change:opacity,transform}
[data-anim="left"]{transform:translateX(-72px)}
[data-anim="right"]{transform:translateX(72px)}
[data-anim].in{opacity:1;transform:none}
.tl-row:last-child{margin-bottom:0}
.tl-badge{grid-column:2;grid-row:1;justify-self:center;align-self:start;z-index:2;width:52px;height:52px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-mono);font-weight:500;font-size:1rem;color:var(--muted);transition:all .45s ease}
.tl-row.lit .tl-badge{background:var(--primary);border-color:transparent;color:var(--card);transform:scale(1.06);box-shadow:0 10px 24px -10px var(--accent-soft)}
.tl-text{grid-column:1;grid-row:1}
.tl-visual{grid-column:3;grid-row:1;display:flex;justify-content:center}
.tl-row.flip .tl-text{grid-column:3}
.tl-row.flip .tl-visual{grid-column:1}
.tl-text .kicker{display:block;margin-bottom:6px}
.tl-text h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:10px}
.tl-text p{color:var(--muted)}
.outcomes{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 26px}
.how-line{margin-top:20px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--fam-soft);color:var(--muted);font-size:.92rem;line-height:1.7}
.how-line b{font-family:var(--font-mono);font-weight:500;color:var(--fam);font-size:.88rem}
/* Vignetten: UI-Ausschnitte als Produktbeweis */
.vignette{
--v-ink:var(--ink);--v-muted:var(--muted);--v-line:rgb(34 40 36 / .13);
--v-panel:rgb(34 40 36 / .06);--v-acc:var(--primary);--v-ok:var(--success);--v-you:var(--human);
width:100%;max-width:420px;background:var(--card);border:1px solid var(--v-line);
border-radius:var(--r-lg);padding:22px;box-shadow:0 18px 44px rgb(34 40 36 / .14);
font-family:var(--font-mono);font-size:.8rem;color:var(--v-muted);
}
.v-head{display:flex;align-items:center;gap:9px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:13px;border-bottom:1px solid var(--v-line)}
.v-dot{width:8px;height:8px;border-radius:50%;background:var(--v-acc);flex:none}
.v-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--v-panel)}
.v-row:last-of-type{border-bottom:none}
.v-name{flex:1;min-width:0;color:var(--v-ink)}
.v-meter{flex:none;width:86px;height:6px;border-radius:99px;background:var(--v-panel);overflow:hidden}
.v-meter i{display:block;height:100%;width:0;background:var(--v-acc);border-radius:99px;transition:width .9s ease .25s}
.reveal.in .v-meter i{width:var(--w,0%)}
.v-row b{flex:none;font-weight:500;font-size:.7rem;color:var(--v-acc)}
.v-row b.neg{color:var(--human)}
.v-row b.ok{color:var(--v-ok)}
.v-row b.you{color:var(--v-you)}
.v-status{width:8px;height:8px;border-radius:50%;background:var(--v-ok);flex:none}
.v-status.live{animation:vpulse 2.2s infinite}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgb(52 69 77 / .35)}70%{box-shadow:0 0 0 8px rgb(52 69 77 / 0)}100%{box-shadow:0 0 0 0 rgb(52 69 77 / 0)}}
.v-note{margin-top:14px;padding:10px 12px;border-radius:var(--r-sm);background:rgb(52 69 77 / .07);border:1px solid rgb(52 69 77 / .5);color:var(--human);font-size:.72rem;line-height:1.5}
.v-btnrow{display:flex;gap:8px;margin-top:6px}
.v-btn{flex:none;font-size:.66rem;letter-spacing:.05em;padding:5px 12px;border-radius:7px;border:1px solid var(--v-line);color:var(--v-muted)}
.v-btn.ok{background:rgb(52 69 77 / .1);border-color:rgb(52 69 77 / .35);color:var(--v-ok)}
/* ============================ PREISE ============================ */
.price{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--fam);margin:6px 0 16px}
.price small{font-size:.85rem;color:var(--muted);font-weight:400;font-family:var(--font-body)}
.price-note{margin:-10px 0 16px;font-size:.78rem;color:var(--muted)}
.plan-list{list-style:none;display:grid;gap:11px}
.plan-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.92rem}
.plan-list li::before{content:"✓";flex:none;color:var(--fam);font-weight:600}
.plan-list li.no{opacity:.55}
.plan-list li.no::before{content:"✕";color:var(--muted)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--card);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
/* Empfehlungskarte ohne Umkehrung: heller Grund wie die Nachbarn, aber
2px-Rahmen, Ocean-Tönung und tieferer Schatten. Die frühere dunkle
Karte war der einzige Grund, dort Camel einzusetzen — und in ihr
hätte ein heller CTA nur 1.9 Kontrast zum Kartengrund gehabt. */
.card.featured{
background:linear-gradient(180deg,rgb(42 115 150 / .09) 0%,rgb(42 115 150 / .03) 100%);
border:2px solid var(--primary);
box-shadow:0 18px 44px -18px rgb(42 115 150 / .34);
}
.card.featured:hover{border-color:var(--primary-hover);box-shadow:0 22px 52px -18px rgb(42 115 150 / .42)}
.cards.three .card{display:flex;flex-direction:column}
.cards.three .plan-list{flex:1}
.plan-cta{margin-top:22px;width:100%}
.table-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;background:var(--panel)}
.price-table{width:100%;border-collapse:collapse;min-width:680px}
.price-table th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:500}
.price-table td{padding:15px 20px;border-bottom:1px solid var(--panel-2);font-size:.92rem;color:var(--ink)}
.price-table tr:last-child td{border-bottom:none}
.price-table td.once{font-family:var(--font-mono);color:var(--fam);white-space:nowrap}
.price-table td.monthly{font-family:var(--font-mono);color:var(--ok);white-space:nowrap}
.price-table td.roi{color:var(--muted);white-space:nowrap}
/* ============================ INTEGRATIONEN (v13-Stil) ============================
Marken-Logos = Interoperabilitätshinweis ("läuft mit ..."), keine
Partnerschafts-Behauptung. Markenrichtlinien vor Livegang prüfen. */
.int-one{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.int-logos{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.int-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:18px 6px;border-radius:var(--r-sm);color:var(--muted);transition:color .2s,background .2s}
.int-logo:hover{color:var(--ink);background:var(--panel-2)}
.int-logo svg{width:28px;height:28px;fill:currentColor}
.int-logo span{font-size:.7rem;font-family:var(--font-mono);letter-spacing:.03em;text-align:center;white-space:nowrap}
.int-more{border:1px dashed var(--fam);color:var(--fam)}
.int-more b{font-family:var(--font-display);font-size:1.3rem;font-weight:700;line-height:1}
.int-more:hover{color:var(--fam);background:var(--fam-soft)}
.int-note{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
/* ============================ VERTRAULICHKEIT ============================ */
/* Vertraulichkeit läuft im normalen Farbschema der Seite —
Petrol als Akzent markiert die "sicher/läuft"-Ebene. */
.trust-note{margin-top:28px;padding:16px 20px;border-left:3px solid var(--fam);background:var(--fam-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--muted);font-size:.9rem}
/* ============================ ÜBER MICH / FAQ / KONTAKT / FOOTER ============================ */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.about-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;max-width:340px;background:radial-gradient(120% 120% at 30% 20%,var(--accent-soft),transparent 60%),var(--panel-2);display:grid;place-items:center}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faq{max-width:780px;margin:0 auto;display:grid;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;color:var(--ink);font-family:var(--font-body);font-size:1rem;font-weight:600;text-align:left;padding:18px 22px;cursor:pointer}
.faq-q .plus{color:var(--fam);font-size:1.3rem;font-weight:400;transition:transform .25s;flex:none}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden;min-height:0}
.faq-a p{padding:0 22px 20px;color:var(--midnight);font-size:.95rem}
/* Ein Formular, mittig — keine Zweiteilung mehr. */
.contact-card{max-width:620px;margin:0 auto}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;font-size:.86rem;color:var(--muted);cursor:pointer}
.consent input{width:17px;height:17px;margin-top:2px;flex:none;accent-color:var(--accent);cursor:pointer}
.consent a{color:var(--accent)}
.form-alt{margin-top:16px;text-align:center;font-size:.88rem;color:var(--muted)}
.form-alt a{color:var(--accent)}
.field{margin-bottom:18px}
.field label{display:block;margin-bottom:8px;font-size:.9rem;color:var(--muted)}
.field input,.field textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);font-family:var(--font-body);font-size:.98rem;padding:13px 15px;transition:border-color .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:130px}
.hp{position:absolute;left:-9999px;top:auto}
.form-hint{margin-top:14px;font-size:.78rem;color:var(--muted);line-height:1.6}
.form-hint a{color:var(--accent)}
.form-note{margin-top:16px;font-size:.9rem;color:var(--accent)}
.form-note.error{color:var(--danger)}
footer.site{border-top:1px solid var(--line);background:var(--band)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:56px 0 40px}
.foot h4{color:var(--ink);font-size:.95rem;margin-bottom:16px;font-family:var(--font-display)}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a{color:var(--muted);text-decoration:none;font-size:.92rem}
.foot a:hover{color:var(--accent)}
.foot .desc{color:var(--muted);font-size:.92rem;max-width:22rem;margin-top:10px}
.legal{border-top:1px solid var(--line);padding:22px 0;display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
.hero-grid{grid-template-columns:1fr;gap:44px}
.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
.int-logos{grid-template-columns:repeat(4,1fr)}
.about{grid-template-columns:1fr;gap:32px}
.foot{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
/* Zeitstrahl: Linie nach links, eine Spalte, Fly-in von unten */
.tl-row,.tl-row.flip{grid-template-columns:52px 1fr;row-gap:20px;margin-bottom:44px}
[data-anim="left"],[data-anim="right"]{transform:translateY(36px)}
.tl-badge{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:11px}
.tl-row .tl-text,.tl-row.flip .tl-text{grid-column:2;grid-row:1}
.tl-row .tl-visual,.tl-row.flip .tl-visual{grid-column:2;grid-row:2}
}
@media (max-width:767px){
.nav ul,.nav .btn-sm{display:none}
.burger{display:block}
.hero{padding-top:110px;min-height:auto}
.cards.two,.cards.three{grid-template-columns:minmax(0,1fr)}
.int-logos{grid-template-columns:repeat(4,1fr);gap:4px}
.int-logo span{white-space:normal}
.sec-a,.sec-b{padding:76px 0}
.foot{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.reveal{opacity:1;transform:none}
[data-anim]{opacity:1!important;transform:none!important}
.reveal.in .v-meter i{width:var(--w,0%)}
.tl-svg .fillp{stroke-dashoffset:0!important}
}
/* ============================ UNTERSEITEN (helles Schema) ============================ */
.page-hero{position:relative;padding:150px 0 80px;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.page-hero h1{font-size:clamp(2rem,4vw,2.9rem);margin:20px 0 18px}
.page-hero .sub{color:var(--muted);font-size:1.1rem}
.page-hero .grid-lines{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(circle,rgb(52 69 77 / .12) 1px,transparent 1px);background-size:28px 28px}
.breadcrumb{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.usecase{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0;border-bottom:1px dashed var(--line)}
.usecase:last-of-type{border-bottom:none}
.usecase h3{font-size:clamp(1.25rem,2.2vw,1.55rem);margin-bottom:12px}
.usecase p{color:var(--muted)}
.usecase .vignette{justify-self:center}
.usecase.flip .vignette{order:-1}
@media (max-width:860px){.usecase{grid-template-columns:1fr;gap:28px}.usecase.flip .vignette{order:0}}
.branch-card{display:flex;flex-direction:column;text-decoration:none}
.branch-card .go{margin-top:auto;padding-top:16px;color:var(--fam);font-weight:600;font-size:.92rem}
/* CTA-Band: helle, getönte Bühne im Seitenschema */
.cta-band{background:linear-gradient(135deg,var(--card) 0%,var(--paper) 44%,var(--wash) 100%);border:1px solid var(--line);border-radius:var(--r-lg);padding:56px 40px;text-align:center}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.cta-band p{color:var(--muted);max-width:38rem;margin:0 auto 26px}
.cta-band .cta-sub{color:var(--muted)}
@media (max-width:767px){.page-hero{padding:120px 0 60px}.cta-band{padding:40px 22px}}
/* ============================ NAV-DROPDOWN "FÜR SIE" (hell) ============================ */
.has-sub{position:relative}
.has-sub>a{display:inline-flex;align-items:center;gap:6px}
.has-sub .caret{font-size:.7em;transition:transform .2s}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.sub-menu-inner{min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:0 20px 48px rgb(34 40 36 / .18)}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{opacity:1;visibility:visible}
.sub-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:.92rem;white-space:nowrap}
.sub-menu a:hover{background:var(--accent-faint);color:var(--ink)}
.sub-menu a small{display:block;font-size:.74rem;color:rgb(86 91 96 / .75)}
.mobile-menu .sub-link{padding-left:42px;font-size:.94rem}
/* "Für Sie" sitzt rechts im Header, direkt vor dem CTA — das Panel
klappt rechtsbündig auf, damit es nie aus dem Viewport läuft. */
.nav-cta .has-sub>a.nav-link{color:var(--muted);text-decoration:none;font-size:.95rem;transition:color .15s;padding:8px 2px}
.nav-cta .has-sub>a.nav-link:hover{color:var(--accent)}
.nav-cta .sub-menu{left:auto;right:-8px;transform:none}
@media (max-width:767px){.nav-cta .has-sub{display:none}}
/* ============================ SEKTIONS-RHYTHMUS (CANVAS / WEISS) ============================
Das frühere Graublau stammte aus dem Indigo-Schema und hatte mit
Navy/Cyan farblich nichts zu tun — es ist ersatzlos raus. .tone-mid
färbt jetzt nur noch die Container innerhalb weißer Sektionen um,
damit Karten nicht mit dem Hintergrund verschmelzen. */
.tone-mid{
--panel-2:rgb(34 40 36 / .05);
--line:rgb(34 40 36 / .14);
}
/* Auf der helleren B-Fläche trägt der Schatten die Trennung, nicht der Ton */
.tone-mid .card,.tone-mid .table-wrap,.tone-mid .faq-item,.tone-mid .int-one{
box-shadow:0 2px 10px -4px rgb(34 40 36 / .1);
}
.tone-mid .field input,.tone-mid .field textarea{background:var(--surface-a)}
/* CTA-Band: einziger Ton mit Teal-Hauch — hebt sich ab, ohne zu kippen */
.cta-band.tone-mid{background:linear-gradient(135deg,var(--card) 0%,var(--paper) 44%,var(--wash) 100%);border-color:rgb(52 69 77 / .26)}
.cta-band.tone-mid p,.cta-band.tone-mid .cta-sub{color:var(--muted)}
.img-window.tone-mid .iw-caption .kicker{color:var(--accent)}
.img-window.tone-mid .iw-claim b{color:var(--accent)}
/* ============================ HERO ZENTRIERT + BROWSER-MOCKUP ============================ */
.hero-center{display:block;min-height:0;padding:150px 0 90px;text-align:center}
.hero-center .wrap{max-width:900px}
.hero-center h1{font-size:clamp(2.2rem,4.6vw,3.3rem);margin:0 auto 18px}
.hero-center .sub{margin:0 auto;max-width:40rem}
.hero-center .hero-actions{justify-content:center}
.browser{max-width:820px;margin:52px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 34px 80px -34px rgb(34 40 36 / .35);overflow:hidden;text-align:left}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--sand);border-bottom:1px solid var(--line)}
.bdot{width:11px;height:11px;border-radius:50%;flex:none}
.bdot.r{background:var(--danger)}.bdot.y{background:var(--human)}.bdot.g{background:var(--success)}
.burl{margin-left:10px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px;padding:4px 14px}
.browser .todo{border:0;box-shadow:none;border-radius:0}
@media (max-width:767px){.hero-center{padding:120px 0 64px}.browser{margin-top:38px}}
/* ============================ ALLTAGS-SEKTION (Referenz-Stil) ============================ */
.alert-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px;margin:0 auto}
/* Gleicher Stil wie alle anderen Karten — nur das Icon trägt das
Warn-Coral statt des System-Indigos. */
.alert-cards .card{text-align:left}
.alert-cards .card h3{font-size:1.15rem}
.alert-cards .card p{font-size:.98rem}
.alltag-close{text-align:center;margin-top:40px;color:var(--muted);max-width:44rem;margin-left:auto;margin-right:auto}
.alltag-close b{color:var(--ink)}
@media (max-width:600px){.alert-cards{grid-template-columns:minmax(0,1fr)}}
/* Die früheren .flat-top/.flat-bottom-Varianten regelten Verlaufskanten
zwischen den Bändern. Bei flachen Flächen sind sie gegenstandslos —
die Klassen bleiben im Markup wirkungslos stehen. */
/* ============================================================================
TRUSTED INTELLIGENCE · FLÄCHEN-LOGIK
Die Seite läuft hell: Canvas und Weiß im Wechsel, Header und Hero
hell, Footer als einziger großflächiger Deep-Navy-Anker.
Navy Surface bleibt dem Produkt vorbehalten — Mockup, To-do-Karte,
Ablauf-Vignetten: dort, wo das System selbst gezeigt wird.
Cyan = aktive Automatisierung · Amber = Ihr Part · Grün = erledigt.
========================================================================= */
/* ---------------------------- HEADER (hell) --------------------------- */
header{background:rgb(245 245 245 / .9);backdrop-filter:blur(12px)}
header.scrolled{border-color:var(--line);background:rgb(245 245 245 / .97)}
.mobile-menu{background:var(--surface-a)}
/* Dropdown "Für Sie" in Kartenweiß — ein dunkles Panel an einem hellen
Header sieht aus wie ein Fehler. */
.sub-menu-inner{background:var(--card);border-color:var(--line);box-shadow:0 20px 48px rgb(34 40 36 / .14)}
.sub-menu a:hover{background:var(--accent-faint);color:var(--ink)}
/* ---------------------------- HERO (hell) ----------------------------- */
/* Warmes Weiß oben, Papier in der Mitte, Teal-Wash im Fuß — und dann
zurück auf Papier, damit die Bühne fugenlos in .sec-a übergeht. */
.hero{
background:
radial-gradient(120% 80% at 50% 0%,var(--card) 0%,rgb(252 252 251 / 0) 62%),
linear-gradient(180deg,var(--card) 0%,var(--paper) 42%,var(--wash) 80%,var(--paper) 100%);
}
.hero h1{color:var(--ink)}
.hero h1 .accent{color:var(--hl)}
.hero .sub,.hero .cta-sub{color:var(--muted)}
.hero .eyebrow{background:rgb(252 252 251 / .82);border-color:var(--camel-mark);color:var(--muted)}
.hero .eyebrow i{background:var(--success)}
/* Halo hinter dem Mockup in Petrol */
.todo-slot::before{background:radial-gradient(50% 50% at 46% 50%,rgb(52 69 77 / .2),transparent 68%)}
/* -------------------- MOCKUP / TO-DO-KARTE (hell) --------------------- */
/* Warmweiße Karte. Farbe tragen nur die Statuszeichen:
helles Teal = aktiv · Grün = erledigt · Terrakotta = Ihr Part. */
.browser{background:var(--card);border-color:var(--line);box-shadow:0 30px 70px -34px rgb(34 40 36 / .3)}
.browser-bar{background:rgb(46 126 164 / .1);border-bottom-color:var(--line)}
.burl{background:var(--card);border-color:var(--line);color:var(--muted)}
.todo{background:var(--card);border-color:var(--line);color:var(--ink);box-shadow:none}
.todo-bar{border-bottom-color:var(--line)}
.todo-bar .title{color:var(--ink)}
.todo-bar .title::before{background:var(--active)}
.todo-bar time{color:var(--muted)}
.todo li{border-bottom-color:rgb(34 40 36 / .08)}
.todo .box{border-color:rgb(34 40 36 / .22);color:var(--card)}
.todo .task{color:var(--ink-task)}
.todo .task::after{background:var(--success)}
.todo .tchip{color:var(--active)}
.todo li.done .box{background:var(--success);border-color:var(--success)}
.todo li.done .task{color:var(--ink-done)}
.todo li.done .tchip{color:var(--success)} /* erledigt — grün, wie Haken und Strich */
.todo li.you .task{color:var(--ink)}
.todo li.you .tchip{color:var(--human)} /* Freigabe / Ihr Part */
.todo-foot{border-top-color:var(--line);color:var(--muted)}
.todo-foot .big{color:var(--ink)}
/* ------------------- ABLAUF-VIGNETTEN (hell) -------------------------- */
.vignette{
--v-ink:var(--ink);--v-muted:var(--muted);--v-line:rgb(34 40 36 / .12);
--v-panel:rgb(34 40 36 / .06);
--v-acc:var(--active);--v-ok:var(--success);--v-you:var(--human);
background:var(--card);border-color:var(--line);
box-shadow:0 18px 44px -20px rgb(34 40 36 / .26);
}
.v-dot{background:var(--active)} /* Fläche: System aktiv */
.v-meter i{background:var(--active)}
.v-row b.neg{color:var(--human)}
.v-note{background:rgb(52 69 77 / .14);border-color:rgb(52 69 77 / .5);color:var(--human)}
.v-btn{border-color:var(--v-line);color:var(--muted)}
.v-btn.ok{background:rgb(52 69 77 / .12);border-color:rgb(52 69 77 / .42);color:var(--success)}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgb(52 69 77 / .35)}70%{box-shadow:0 0 0 8px rgb(52 69 77 / 0)}100%{box-shadow:0 0 0 0 rgb(52 69 77 / 0)}}
/* ------------------ VERTRAULICHKEIT: BLAU-WASH ------------------------
Hervorgehoben, aber im hellen System: derselbe Wash wie im Hero-Fuss
und im CTA-Band. Icons und Karten bleiben Standard. */
.sec-a.trust-section,.sec-b.trust-section,.sec-b.flat-bottom.trust-section{
background:linear-gradient(180deg,var(--paper) 0%,var(--wash) 12%,var(--wash) 88%,var(--paper) 100%);
}
.trust-section{--line:rgb(34 40 36 / .16)}
.trust-section .card{box-shadow:0 2px 10px -4px rgb(34 40 36 / .12)}
/* --------- PREISE: empfohlenes Paket als tiefe Petrol-Karte ----------- */
/* ------------------------ FOOTER (tiefes Petrol) ---------------------- */
footer.site,footer.site.tone-mid{background:var(--deepest);border-top:none}
footer.site .brand{color:var(--on-deep)}
.foot h4{color:var(--on-deep)}
.foot a,.foot .desc{color:var(--on-deep-muted)}
.foot a:hover{color:var(--primary)}
.legal{border-top-color:rgb(255 255 255 / .1);color:var(--on-deep-dim)}
.legal a{color:var(--on-deep-dim)}
.legal a:hover{color:var(--primary)}
/* --------------------- UNTERSEITEN-HERO (hell) ------------------------ */
.page-hero{
background:
radial-gradient(120% 80% at 50% 0%,var(--card) 0%,rgb(252 252 251 / 0) 60%),
linear-gradient(180deg,var(--card) 0%,var(--paper) 40%,var(--wash) 74%,var(--paper) 100%);
}
.page-hero .grid-lines{opacity:.5;background-image:radial-gradient(circle,rgb(52 69 77 / .3) 1px,transparent 1px)}
.page-hero .eyebrow{background:rgb(252 252 251 / .82);border-color:var(--camel-mark);color:var(--muted)}
.page-hero .eyebrow i{background:var(--success)}
/* ============================================================================
MOBIL — überarbeitet
Der Zeitstrahl ist eine Desktop-Angelegenheit: auf dem Handy steht die
Linie in einer 44px-Spalte und bringt keine Information mehr. Sie wird
ausgeblendet, die Badges leuchten weiter (siehe main.js).
========================================================================= */
@media (max-width:860px){
/* Linie aus — nur noch auf dem Computer sichtbar */
.tl-svg{display:none}
.tl-row,.tl-row.flip{margin-bottom:40px}
.timeline{padding:0}
.vignette{max-width:100%}
}
@media (max-width:767px){
.nav{height:62px}
section{scroll-margin-top:74px}
.hero-center{padding:104px 0 56px}
.hero-center .wrap{max-width:none}
/* Hero-Headline: "Sie machen Feierabend." steht in .accent mit
white-space:nowrap, damit die SVG-Unterstreichung als eine Linie
unter einer Zeile sitzt. Die clamp()-Untergrenze von 2.2rem war
dafür zu groß — die Zeile misst 11,12em und lief bei 375px um
89px über den Viewport hinaus (body{overflow-x:hidden} hat den
Überlauf nur versteckt, nicht verhindert).
Statt nowrap zu opfern wird die Schriftgröße an die verfügbare
Textbreite gekoppelt: 11,35em Nenner = 11,12em Zeile + Reserve.
Damit passt die Zeile ab ~300px Viewport garantiert, und die
Unterstreichung bleibt, wie gestaltet, eine durchgehende Linie. */
.hero-center h1{font-size:min(2.2rem,calc((100vw - 52px) / 11.35))}
/* Eyebrow ist ein langer Satz — als Pille bricht er hässlich um */
.eyebrow{border-radius:var(--r);padding:9px 14px;font-size:.8rem;line-height:1.5;text-align:left;align-items:flex-start}
.eyebrow i{margin-top:7px}
/* Mockup: kompaktere Innenmaße, URL-Zeile darf kürzen */
.browser{margin-top:32px;border-radius:12px}
.browser-bar{padding:10px 13px;gap:6px}
.burl{margin-left:6px;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 10px}
.todo-bar,.todo-foot{padding:13px 16px}
.todo ul{padding:2px 16px}
.todo li{gap:10px;padding:12px 0;font-size:.9rem}
.todo .box{width:18px;height:18px}
.todo .tchip{font-size:.64rem}
.todo-foot .big{font-size:1.8rem}
/* Formularfelder: 16px verhindert den Auto-Zoom in iOS Safari */
.field input,.field textarea{font-size:16px}
/* ---- Preistabelle: gestapelte Karten statt Querscroll --------------
Entscheidung gegen horizontales Scrollen: von den vier Spalten ist
nur eine lang (der Anwendungsfall), die drei anderen sind kurze
Zahlenwerte. Im Querscroll füllt Spalte 1 bei 375px schon die halbe
Breite — sichtbar waren Spalte 1 und eine angeschnittene Spalte 2,
und beim Scrollen nach rechts verliert man genau die Bezeichnung,
zu der die Zahlen gehören. Die Tabelle wird nicht spaltenweise
verglichen, sondern zeilenweise nachgeschlagen ("was kostet mein
Fall?") — dafür ist die Karte die richtige Form: alle vier Werte
einer Zeile stehen ohne Interaktion gleichzeitig da. Bei nur sechs
Zeilen bleibt die Gesamtlänge vertretbar.
Das
bleibt semantisch erhalten; die Spaltenköpfe kommen
über data-label an den Zellen zurück (Screenreader lesen weiterhin
die echten
vor). */
.table-wrap{border:0;background:none;border-radius:0;overflow:visible;box-shadow:none}
.price-table{min-width:0;display:block}
.price-table thead{display:none}
.price-table tbody{display:grid;gap:12px}
.price-table tr{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:0 2px 10px -4px rgb(34 40 36 / .1)}
.price-table tr td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px solid var(--panel-2);font-size:.92rem}
.price-table tr td::before{content:attr(data-label);flex:none;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price-table tr td:last-child{border-bottom:none;padding-bottom:0}
/* Erste Zelle ist der Kartentitel — kein Label, volle Breite */
.price-table tr td:first-child{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.25;color:var(--title);padding:0 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.price-table tr td:first-child::before{content:none}
/* ---- Vignetten: Zeilen umbrechen statt über die Kante zu laufen ----
.v-name (flex:1) kann nicht unter seine min-content-Breite, der
86px-Meter und der Status-Wert sind flex:none — zusammen 30px mehr
als die Karte innen breit ist. Auf Mobil bekommt der Name deshalb
eine eigene Zeile, Meter und Status rücken darunter. */
.v-row{flex-wrap:wrap;gap:6px 10px}
.v-name{flex:1 1 100%}
.v-meter{flex:1 1 60px;width:auto}
.v-row b{margin-left:auto}
.v-btnrow{flex-wrap:wrap;gap:8px}
.v-btn{flex:0 1 auto}
/* ---- Touch-Targets auf mind. 44px ---------------------------------- */
.burger{width:44px;height:44px}
.nav .brand{min-height:44px}
.foot ul{gap:0}
.foot ul a{display:inline-block;padding:12px 0}
.foot .brand{display:inline-flex;align-items:center;min-height:44px}
.legal a{display:inline-block;padding:11px 0}
.breadcrumb a{display:inline-block;padding:12px 0}
.form-alt a{display:inline-block;padding:11px 0}
.consent{padding:6px 0}
.consent input{width:20px;height:20px;margin-top:1px}
.legal{flex-direction:column;align-items:flex-start;gap:8px}
.about-photo{max-width:100%}
.card{padding:22px}
.cta-band{padding:34px 20px}
.btn{padding:13px 20px}
.hero-actions .btn,.page-hero .hero-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:480px){
/* Acht Logos: bei drei Spalten bleibt eine angebrochene Zeile mit zwei
Kacheln stehen, und "Microsoft 365" / "Google Drive" brechen um.
Zwei Spalten ergeben ein glattes 4×2-Raster mit einzeiligen Labels. */
.int-logos{grid-template-columns:repeat(2,1fr);gap:6px}
.sec-a,.sec-b{padding:64px 0}
.todo li{font-size:.86rem}
/* Die Aufgabenzeile kippt in zwei Zeilen, damit der Status-Chip Platz hat */
.todo li{flex-wrap:wrap;gap:10px}
/* .task muss unter seine min-content-Breite dürfen, sonst schiebt die
längste Aufgabe die Zeile 6px über die Kartenkante */
.todo .task{min-width:0;overflow-wrap:break-word}
/* Einrückung als padding statt margin: width:100% + margin-left ergab
eine 6px zu breite Zeile, weil die Marge außerhalb der Breite liegt */
.todo .tchip{flex:1 1 100%;width:auto;margin-left:0;padding-left:28px;text-align:left}
.tl-badge{width:38px;height:38px;border-radius:10px;font-size:.85rem}
.tl-row,.tl-row.flip{grid-template-columns:38px 1fr;column-gap:14px}
.vignette{padding:18px}
.v-name{font-size:.76rem}
}
/* ============================================================================
GETÖNTE SEKTIONEN — Rhythmus über Farbe statt über Dunkelheit
Ein Wash, sparsam gesetzt:
.tone-accent → das System bei der Arbeit (Ablauf, Lösungen)
Der frühere Terrakotta-Wash ist raus: gegen ein pastellorangenes Sand
war er entweder unsichtbar oder zu dunkel für lesbaren Text. Die
"Mensch"-Sektionen markiert stattdessen die Familienfarbe.
========================================================================= */
.sec-a.tone-accent,.sec-b.tone-accent{background:linear-gradient(180deg,var(--paper) 0%,var(--wash) 12%,var(--wash) 88%,var(--paper) 100%)}
.tone-accent{--line:rgb(34 40 36 / .16);--panel-2:rgb(34 40 36 / .06)}
/* Karten brauchen auf den Washes dieselbe Kante wie auf Sand */
.tone-accent .card,.tone-accent .faq-item,.tone-accent .int-one,.tone-accent .table-wrap{
box-shadow:0 2px 10px -4px rgb(34 40 36 / .12);
}
.tone-accent .card.featured{box-shadow:0 18px 44px -18px rgb(42 115 150 / .34)}
/* ============================================================================
KORREKTUREN: Petrol auf Petrol
Primary und --deep liegen in derselben Farbfamilie. Überall, wo ein
Primary-Element auf einer tiefen Petrol-Fläche sitzt, würde es
verschwinden — dort trägt das helle Teal (--spark).
========================================================================= */
footer.site .brand .mark{background:var(--camel)}
footer.site .brand .mark svg{stroke:var(--deepest)}
footer.site .foot a:hover,footer.site .legal a:hover{color:var(--camel)}
/* ============================================================================
FUNKTIONSFAMILIEN
Jede Sektion bekommt eine Rolle, und die Rolle bekommt eine Farbe.
Getragen wird sie von Kicker, Icon-Kachel, Hervorhebungswort in der
Headline, Stat-Chips und Hover-Kanten — nie vom Fließtext.
Ausdrücklich NICHT familiengebunden: Buttons und Links. Die bleiben
überall Petrol, sonst verliert die Seite ihre Handlungssprache.
========================================================================= */
/* Ein hervorgehobenes Wort pro Headline — der stärkste Hebel gegen
Gleichförmigkeit, ohne einen einzigen Fließtext zu verfärben. */
/* Kernpunkte tragen Ocean. Gegen den Midnight-Titel sind das 3.11 —
sichtbar als Farbwechsel, ohne Hintergrundfläche. Als Großtext auf
allen Sektionsflächen mindestens 3.42:1. */
h1 .hl,h2 .hl,h3 .hl,.cta-band h2 .hl{color:var(--hl);font-weight:inherit}
/* Camel lebt ab hier NUR auf dunklen Flächen — auf Lace und Cream war
es als Kachel-, Chip- und Blockfüllung schlicht zu viel Braun. */
.stat{background:var(--ember-soft);color:var(--ember-ink)}
.how-line{background:rgb(46 126 164 / .09)}
.trust-note{background:rgb(46 126 164 / .09);border-left-color:var(--ocean)}
.browser-bar{background:rgb(46 126 164 / .1)}
.cta-band,.cta-band.tone-mid{border-color:rgb(46 126 164 / .28)}
/* --- Footer: hier trägt das reine Camel, 7.21:1 auf Midnight ---------- */
.foot h4::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--camel);margin-bottom:12px}
footer.site .legal{border-top-color:rgb(190 178 162 / .3)}