/* deploy. Gestaltungssystem
   Layout: blaue Bühne oben und unten, dazwischen helle Flächen (Rosé, Weiß, Stein), Übergänge mit dem Wellenband,
   Inhalte linksbündig auf 1200 px. Fünf Schriftgrößen, eine Bewegungskurve, ein Kartenstil. */
:root {
  --blue: #1A3CB8;
  --blue-deep: #15319A;
  --blush: #FADBE5;
  --ink: #262320;
  --stone: #E7E7E2;
  --paper: #F4F3EF;
  --white: #FFFFFF;

  --f-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* Fünf Größen */
  --t-title: clamp(2.5rem, 1.35rem + 4.6vw, 4.125rem);   /* 66 */
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3rem);              /* 48 */
  --t-h3: 1.5rem;                                          /* 24 */
  --t-body: 1.125rem;                                      /* 18 */
  --t-small: 0.875rem;                                     /* 14 */
  --t-ui: 1rem;                                            /* Buttons, Navigation */

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --sec: clamp(72px, 9vw, 120px);
  --head-gap: clamp(36px, 5vw, 56px);
  --r-sm: 10px;
  --r: 20px;
  --r-lg: 32px;

  /* Eine Kurve, drei Dauern */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.2s;
  --base: 0.5s;
  --slow: 0.9s;

  --wave-h: 80px;
  --wave-w: 84px;
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--blue); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--blue); color: var(--ink); font: 400 var(--t-body)/1.55 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.page { overflow-x: clip; hyphens: auto; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--white); color: var(--blue); padding: 10px 16px; border-radius: var(--r-sm); }
.skip:focus { left: 16px; }

/* ---------- Schrift ---------- */
.t-title { font-size: var(--t-title); line-height: 1.04; letter-spacing: -0.055em; overflow-wrap: break-word; }
.t-h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.045em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.03em; }
.t-small { font-size: var(--t-small); line-height: 1.5; }

/* ---------- Flächen: je Fläche eine Textfarbe, eine Überschriftenfarbe, ein Akzent ---------- */
.s-blue  { --bg: var(--blue);  --fg: var(--white); --hd: var(--blush); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.22); --accent: var(--blush); --on-accent: var(--blue); }
.s-blush { --bg: var(--blush); --fg: var(--blue);  --hd: var(--blue);  --muted: rgba(26,60,184,.72);  --line: rgba(26,60,184,.22);  --accent: var(--blue);  --on-accent: var(--white); }
.s-white { --bg: var(--white); --fg: var(--ink);   --hd: var(--ink);   --muted: rgba(38,35,32,.6);    --line: rgba(38,35,32,.12);  --accent: var(--blue);  --on-accent: var(--white); --card: var(--paper); }
.s-stone { --bg: var(--stone); --fg: var(--ink);   --hd: var(--ink);   --muted: rgba(38,35,32,.6);    --line: rgba(38,35,32,.12);  --accent: var(--blue);  --on-accent: var(--white); }
.s-blue, .s-blush, .s-white, .s-stone { background: var(--bg); color: var(--fg); }
.s-blue h1, .s-blue h2, .s-blush h2, .s-white h2, .s-stone h2 { color: var(--hd); }
.section { padding-block: var(--sec); }

/* Karte: eine Form für alles */
.card { background: var(--card, var(--white)); color: var(--ink); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); --muted: rgba(38,35,32,.6); --line: rgba(38,35,32,.12); --accent: var(--blue); --on-accent: var(--white); }
.card h2, .card h3 { color: var(--ink); }

/* Abschnittskopf */
.label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; font: 500 0.8125rem/1 var(--f-body); color: var(--accent); }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: var(--head-gap); }
.sec-head > div { display: grid; gap: 20px; justify-items: start; max-width: 760px; }
.sec-head p { max-width: 600px; }

/* ---------- Buttons ---------- */
.btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-sm); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font: 500 var(--t-ui)/1 var(--f-body); background: var(--accent); color: var(--on-accent); translate: var(--mx) var(--my); transition: translate var(--base) var(--ease), background-color var(--fast) ease, color var(--fast) ease, box-shadow var(--base) var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--base) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:hover { box-shadow: 0 10px 28px -10px rgba(16, 30, 90, .45); }
.s-blush .btn:hover, .card .btn:hover, .s-white .btn:hover, .s-stone .btn:hover { background: var(--blue-deep); }
.s-blue .btn:hover, .nav-cta .btn:hover, .menu-panel .btn:hover { background: var(--white); }
.btn.is-magnet { transition: translate .15s linear, background-color var(--fast) ease, color var(--fast) ease, box-shadow var(--base) var(--ease); }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 500 var(--t-ui)/1.2 var(--f-body); text-decoration: none; }
.link svg { width: 18px; height: 18px; transition: transform var(--base) var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ---------- Kopfzeile ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--blush); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; color: var(--white); view-transition-name: site-head; transition: transform var(--base) var(--ease), background-color var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.site-head.is-stuck { background: rgba(26, 60, 184, .84); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.site-head.is-hidden { transform: translateY(-105%); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; transition: padding var(--base) var(--ease); }
.is-stuck .nav { padding-block: 12px; }
.logo { width: 134px; flex: none; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { position: relative; text-decoration: none; font: 500 var(--t-ui)/1 var(--f-body); padding-block: 8px; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--blush); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--base) var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { display: flex; align-items: center; gap: 12px; --accent: var(--blush); --on-accent: var(--blue); }
.nav-cta .btn { min-height: 44px; padding: 0 20px; }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.18); color: var(--white); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform var(--base) var(--ease), background-color var(--fast); }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { padding: 8px var(--gutter) 28px; --accent: var(--blush); --on-accent: var(--blue); }
.menu-panel li a { display: block; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.2); text-decoration: none; font: 500 1.5rem/1.2 var(--f-display); letter-spacing: -0.03em; }
.menu-panel .btn { margin-top: 24px; width: 100%; }
.menu-panel:not([hidden]) li { animation: rise var(--base) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }

/* ---------- Seitenkopf ---------- */
.hero { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; min-height: min(680px, 78vh); padding-block: clamp(40px, 6vw, 72px) 0; }
.hero-copy { display: grid; gap: 28px; justify-items: start; padding-bottom: clamp(48px, 7vw, 96px); min-width: 0; }
.hero-copy h1 { color: var(--blush); }
.hero-copy p { max-width: 540px; }
.hero--compact .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); }
.hero--compact .hero-copy { padding-bottom: 0; }
.hero--compact .hero-copy p { max-width: 640px; }
.hero-art { position: relative; align-self: end; justify-self: end; width: min(100%, 560px); z-index: 2; }
.hero-art--hand { width: min(100%, 540px); margin-bottom: 0; }
/* Bild läuft hinter das Wellenband: Band liegt darüber, durchsichtige Stellen zeigen den Arm */
.hero:has(+ .seam + .wave--clear) .hero-art { margin-bottom: calc(-1 * var(--wave-h)); }
/* Hand läuft unter der ersten Wellenreihe hindurch, die zweite Reihe verdeckt das Armende */
.hero:has(+ .seam + .wave--under) .hero-art--hand { margin-bottom: calc(-1 * var(--wave-h)); }
.wave.wave--under { z-index: 3; }
.wave--under + * { position: relative; z-index: 3; }
.wave.wave--clear { z-index: 3; margin-top: 0; }
.hero + .seam + .wave { z-index: 3; }
.wave--clear + * { position: relative; z-index: 3; }
.tilt { perspective: 1100px; }
.tilt-el { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), 0); will-change: transform; }
.phone { position: relative; --px: 0; --py: 0; --bob: 0px; }
.phone-glow { display: none; }
.phone-hand { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
/* Display: ohne Skript als gedrehtes Rechteck, mit Skript exakt per Perspektive auf die Displayecken gelegt */
.phone-screen { position: absolute; z-index: 0; left: calc(var(--fl) * 100%); top: calc(var(--ft) * 100%); width: calc(var(--fw) * 100%); height: calc(var(--fh) * 100%); transform-origin: 0 0; transform: matrix(1, var(--fb), var(--fc), 1, 0, 0); overflow: hidden; border-radius: 13% / 6%; background: #fff; container-type: size; }
.phone-screen.is-mapped { left: 0; top: 0; transform-origin: 0 0; border-radius: 44px; }
.phone-app { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: #0f0d0c; }
/* Echte Handy-Ansicht: Statusleiste, Dynamic Island, darunter die Website */
.ps-status { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.4cqw 7.5cqw 0 10cqw; background: #fff; color: #0b0b0b; font: 600 3.95cqw/1 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; letter-spacing: -.01em; }
.ps-icons { display: flex; align-items: center; gap: 1.5cqw; }
.ps-icons svg { height: 3cqw; width: auto; fill: currentColor; }
.ps-icons svg:last-child { height: 3.3cqw; }
.ps-island { position: absolute; z-index: 2; top: 2.9cqw; left: 50%; width: 31cqw; height: 9.2cqw; margin-left: -15.5cqw; border-radius: 999px; background: #000; }
.ps-view { position: absolute; left: 0; right: 0; top: 13cqw; bottom: 0; overflow: hidden; background: #fff; }
.phone-scroll { width: 100%; }
.phone-scroll img { width: 100%; height: auto; }
.phone-glare { position: absolute; inset: -25%; z-index: 2; pointer-events: none; transform: translate3d(calc(var(--px) * -7%), calc(var(--py) * -5%), 0); background: linear-gradient(118deg, transparent 20%, rgba(255,255,255,.2) 31%, rgba(255,255,255,.05) 41%, transparent 50%), linear-gradient(0deg, rgba(0,0,0,.16), transparent 34%); }
/* Glas: Inhalt liegt sichtbar unter der Scheibe */
.phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 14px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: no-preference) {
  .phone-scroll { animation: phone-scroll 20s cubic-bezier(.65, 0, .35, 1) 1.6s infinite; }
  .phone.is-paused .phone-scroll { animation-play-state: paused; }
  @keyframes phone-scroll {
    0%, 12% { transform: translateY(0); }
    27%, 42% { transform: translateY(-26.8%); }
    58%, 72% { transform: translateY(-72%); }
    88%, 100% { transform: translateY(0); }
  }
}

/* Wörter steigen einzeln auf */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
.is-split .w > span { animation: word var(--slow) var(--ease) both; animation-delay: calc(var(--i) * 55ms + 60ms); }
@keyframes word { from { transform: translateY(105%); } }

/* Wellenband */
.wave { height: var(--wave-h); background-repeat: repeat-x; background-size: var(--wave-w) var(--wave-h); background-position: var(--wx, 0px) 0; position: relative; z-index: 1; }

/* ---------- Startseite ---------- */
.morph { display: grid; gap: 28px; justify-items: center; }
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--white); box-shadow: 0 8px 24px -8px rgba(26, 60, 184, .3); }
.switch button { position: relative; z-index: 1; min-width: 128px; min-height: 46px; padding: 0 22px; border: 0; background: none; border-radius: 999px; font: 500 var(--t-ui)/1 var(--f-body); color: rgba(38,35,32,.6); cursor: pointer; transition: color var(--base) var(--ease); }
.switch button[aria-selected="true"] { color: var(--white); }
.switch-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: transform var(--slow) var(--ease), background-color var(--slow) var(--ease); }
[data-state="new"] .switch-pill { transform: translateX(100%); background: var(--blue); }
.morph-card { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease); }
[data-state="new"] .morph-card { background: var(--blue); color: var(--white); }
[data-state="new"] .morph-card h3 { color: var(--blush); }
.morph-text { display: grid; }
.morph-panel { grid-area: 1 / 1; display: grid; gap: 24px; align-content: center; transition: opacity var(--base) var(--ease), transform var(--slow) var(--ease), visibility 0s var(--base); }
[data-state="old"] [data-panel="new"], [data-state="new"] [data-panel="old"] { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; }
[data-state="old"] [data-panel="old"], [data-state="new"] [data-panel="new"] { transition-delay: .12s, .12s, 0s; }
.ticks { display: grid; gap: 20px; }
.ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
.ticks li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.ticks b { display: block; font-weight: 500; margin-bottom: 2px; }
.ticks--x li::before { background-color: #F2DADA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6' stroke='%23B8423C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-state="new"] [data-panel="new"] .ticks li::before { background-color: var(--blush); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%231A3CB8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Mini-Website im Umschalter */
.mock { border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 24px 60px -20px rgba(16, 30, 90, .35), 0 0 0 1px rgba(38,35,32,.08); }
.mock-bar { display: flex; gap: 5px; align-items: center; padding: 10px 12px; background: var(--paper); }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(38,35,32,.18); }
.mock-bar span { margin-left: 10px; height: 14px; flex: 1; max-width: 46%; border-radius: 4px; background: var(--white); }
.mock-view { position: relative; aspect-ratio: 16 / 11; background: #F2F2EF; transition: background-color var(--slow) var(--ease); }
[data-state="new"] .mock-view { background: var(--white); }
.m { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: var(--r0, 2px); background: var(--c, #C9C9C2); opacity: var(--o, 1); transition: left var(--slow) var(--ease), top var(--slow) var(--ease), width var(--slow) var(--ease), height var(--slow) var(--ease), border-radius var(--slow) var(--ease), background-color var(--slow) var(--ease), opacity var(--base) var(--ease); transition-delay: var(--d, 0s); }
[data-state="old"] .m-logo { --x: 3%; --y: 4%; --w: 14%; --h: 7%; --c: #A9A9A1; }
[data-state="old"] .m-n1 { --x: 22%; --y: 6%; --w: 9%; --h: 3%; }
[data-state="old"] .m-n2 { --x: 33%; --y: 6%; --w: 9%; --h: 3%; }
[data-state="old"] .m-n3 { --x: 44%; --y: 6%; --w: 9%; --h: 3%; }
[data-state="old"] .m-n4 { --x: 55%; --y: 6%; --w: 9%; --h: 3%; }
[data-state="old"] .m-n5 { --x: 66%; --y: 6%; --w: 9%; --h: 3%; }
[data-state="old"] .m-cta { --x: 78%; --y: 6%; --w: 9%; --h: 3%; --c: #B9B9B1; }
[data-state="old"] .m-h1 { --x: 3%; --y: 17%; --w: 44%; --h: 4%; --c: #9E9E96; }
[data-state="old"] .m-h2 { --x: 3%; --y: 23%; --w: 30%; --h: 4%; --c: #9E9E96; }
[data-state="old"] .m-t1 { --x: 3%; --y: 31%; --w: 62%; --h: 2.2%; }
[data-state="old"] .m-t2 { --x: 3%; --y: 36%; --w: 62%; --h: 2.2%; }
[data-state="old"] .m-t3 { --x: 3%; --y: 41%; --w: 62%; --h: 2.2%; }
[data-state="old"] .m-t4 { --x: 3%; --y: 46%; --w: 62%; --h: 2.2%; }
[data-state="old"] .m-t5 { --x: 3%; --y: 51%; --w: 48%; --h: 2.2%; }
[data-state="old"] .m-btn { --x: 3%; --y: 88%; --w: 9%; --h: 4%; --c: #B4B4AC; }
[data-state="old"] .m-img { --x: 70%; --y: 17%; --w: 27%; --h: 36%; --c: #D4D4CD; }
[data-state="old"] .m-c1 { --x: 3%; --y: 60%; --w: 30%; --h: 22%; --c: #DDDDD6; }
[data-state="old"] .m-c2 { --x: 35%; --y: 60%; --w: 30%; --h: 22%; --c: #DDDDD6; }
[data-state="old"] .m-c3 { --x: 67%; --y: 60%; --w: 30%; --h: 22%; --c: #DDDDD6; }
[data-state="old"] .m-tel { --x: 86%; --y: 93%; --w: 11%; --h: 2%; --c: #D8D8D1; }
[data-state="new"] .m { --d: calc(var(--k, 0) * 45ms); }
[data-state="new"] .m-logo { --x: 5%; --y: 6%; --w: 12%; --h: 5%; --c: var(--ink); --r0: 3px; --k: 0; }
[data-state="new"] .m-n1 { --x: 46%; --y: 7.5%; --w: 7%; --h: 2%; --c: rgba(38,35,32,.35); --k: 1; }
[data-state="new"] .m-n2 { --x: 56%; --y: 7.5%; --w: 7%; --h: 2%; --c: rgba(38,35,32,.35); --k: 1; }
[data-state="new"] .m-n3 { --x: 66%; --y: 7.5%; --w: 7%; --h: 2%; --c: rgba(38,35,32,.35); --k: 1; }
[data-state="new"] .m-n4, [data-state="new"] .m-n5 { --x: 66%; --y: 7.5%; --w: 0%; --h: 2%; --o: 0; }
[data-state="new"] .m-cta { --x: 78%; --y: 5%; --w: 17%; --h: 7%; --c: var(--blue); --r0: 6px; --k: 2; }
[data-state="new"] .m-h1 { --x: 5%; --y: 22%; --w: 46%; --h: 9%; --c: var(--ink); --r0: 4px; --k: 3; }
[data-state="new"] .m-h2 { --x: 5%; --y: 34%; --w: 36%; --h: 9%; --c: var(--ink); --r0: 4px; --k: 4; }
[data-state="new"] .m-t1 { --x: 5%; --y: 48%; --w: 40%; --h: 2.4%; --c: rgba(38,35,32,.25); --k: 5; }
[data-state="new"] .m-t2 { --x: 5%; --y: 53%; --w: 32%; --h: 2.4%; --c: rgba(38,35,32,.25); --k: 5; }
[data-state="new"] .m-t3, [data-state="new"] .m-t4, [data-state="new"] .m-t5 { --x: 5%; --y: 53%; --w: 0%; --h: 2.4%; --o: 0; }
[data-state="new"] .m-btn { --x: 5%; --y: 62%; --w: 22%; --h: 8%; --c: var(--blue); --r0: 8px; --k: 6; }
[data-state="new"] .m-img { --x: 56%; --y: 20%; --w: 39%; --h: 52%; --c: var(--blush); --r0: 12px; --k: 4; }
[data-state="new"] .m-c1 { --x: 5%; --y: 80%; --w: 28%; --h: 14%; --c: #F1F1EE; --r0: 8px; --k: 7; }
[data-state="new"] .m-c2 { --x: 36%; --y: 80%; --w: 28%; --h: 14%; --c: #F1F1EE; --r0: 8px; --k: 8; }
[data-state="new"] .m-c3 { --x: 67%; --y: 80%; --w: 28%; --h: 14%; --c: #F1F1EE; --r0: 8px; --k: 9; }
[data-state="new"] .m-tel { --x: 29%; --y: 62%; --w: 18%; --h: 8%; --c: var(--blush); --r0: 8px; --k: 7; }
.center { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 52px); }

/* Entwürfe: Scroll-Vorschau beim Überfahren */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shot-card { display: grid; gap: 18px; text-decoration: none; color: var(--fg); min-width: 0; }
.shot-card h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-inline: 4px; }
.shot-card h3 svg { width: 22px; height: 22px; color: var(--accent); transition: transform var(--base) var(--ease); }
.shot-card:hover h3 svg { transform: translateX(5px); }
.scrollshot { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r); background: var(--paper); }
.scrollshot img { width: 100%; transform: translateY(0); transition: transform var(--slow) var(--ease); }
a:hover .scrollshot img, a:focus-visible .scrollshot img { transform: translateY(var(--shift, 0px)); transition: transform var(--dur, 6s) cubic-bezier(.45, .05, .35, 1); }
.note { margin-top: 24px; font-size: var(--t-small); color: var(--muted); }

.offer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 48px; }
.offer > div { display: grid; gap: 14px; max-width: 640px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Projekte ---------- */
.fan { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 0.86; justify-self: end; align-self: center; margin-bottom: clamp(32px, 5vw, 72px); }
.fan-win { position: absolute; width: 74%; border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 30px 60px -24px rgba(10, 25, 90, .5); transition: transform var(--slow) var(--ease); }
.fan-win .bar { display: flex; gap: 5px; padding: 9px 11px; background: var(--paper); }
.fan-win .bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(38,35,32,.2); }
.fan-win .view { aspect-ratio: 16 / 10; overflow: hidden; }
.fan-win img { width: 100%; }
.fan-win:nth-child(1) { left: 0; top: 4%; transform: rotate(-7deg); }
.fan-win:nth-child(2) { left: 13%; top: 20%; transform: rotate(-1deg); z-index: 1; }
.fan-win:nth-child(3) { left: 26%; top: 38%; transform: rotate(5deg); z-index: 2; }
.fan:hover .fan-win:nth-child(1) { transform: rotate(-11deg) translate(-16px, -10px); }
.fan:hover .fan-win:nth-child(3) { transform: rotate(9deg) translate(16px, 10px); }

.stack { display: grid; gap: 24px; }
.stack-item { position: sticky; top: calc(96px + var(--i) * 20px); }
.stack-item > .card { position: relative; transform-origin: 50% 0; will-change: transform; }
.stack-dim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--ink); opacity: 0; pointer-events: none; will-change: opacity; }
.work { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; box-shadow: 0 -12px 40px -24px rgba(38, 35, 32, .35); }
.work-shot { display: block; border-radius: var(--r-sm); overflow: hidden; text-decoration: none; background: var(--paper); }
.work-shot .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper); }
.work-shot .bar span { display: flex; gap: 5px; }
.work-shot .bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(38,35,32,.2); }
.work-shot .bar em { font: 500 12px/1 var(--f-mono); font-style: normal; color: rgba(38,35,32,.6); background: var(--white); border-radius: 6px; padding: 6px 10px; }
.work-shot .scrollshot { border-radius: 0; }
/* feiner Rand, damit helle Entwürfe sich vom weißen Grund abheben */
.shot-card .scrollshot, .work-shot { box-shadow: 0 0 0 1px rgba(38, 35, 32, .1); }
.work-shot .scrollshot { box-shadow: none; }
.work-body { display: grid; gap: 20px; justify-items: start; min-width: 0; }

/* ---------- Leistungen ---------- */
.mini-prices { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 0.8; justify-self: end; align-self: center; margin-bottom: clamp(32px, 5vw, 72px); }
.mini-price { position: absolute; width: 56%; padding: 26px 28px; border-radius: var(--r); background: var(--white); color: var(--ink); display: grid; gap: 6px; box-shadow: 0 30px 60px -24px rgba(10, 25, 90, .5); transition: transform var(--slow) var(--ease); }
.mini-price > span { font: 500 1.125rem/1.2 var(--f-display); letter-spacing: -0.02em; }
.mini-price b { font: 500 3rem/1 var(--f-display); letter-spacing: -0.06em; }
.mini-price:nth-child(1) { left: 0; top: 0; transform: rotate(-6deg); }
.mini-price:nth-child(2) { left: 21%; top: 22%; transform: rotate(-1deg); background: var(--blush); color: var(--blue); z-index: 1; }
.mini-price:nth-child(3) { left: 42%; top: 44%; transform: rotate(4deg); z-index: 2; }
.mini-prices:hover .mini-price:nth-child(1) { transform: rotate(-9deg) translate(-12px, -8px); }
.mini-prices:hover .mini-price:nth-child(3) { transform: rotate(7deg) translate(12px, 8px); }

.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.price { position: relative; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 22px; isolation: isolate; }
.price::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(26, 60, 184, .1), transparent 60%); opacity: 0; transition: opacity var(--base) var(--ease); }
.price:hover::before { opacity: 1; }
.price-name { font: 500 var(--t-h3)/1.2 var(--f-display); letter-spacing: -0.03em; }
.price-num { font: 500 var(--t-title)/1 var(--f-display); letter-spacing: -0.06em; }
.price > p { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.price .ticks { gap: 14px; }
.price .ticks li { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
.price .ticks li::before { width: 20px; height: 20px; background-size: 11px; }
.price .btn { width: 100%; }
/* Mittleres Paket hervorgehoben */
.price--hot { background: var(--blue); color: var(--white); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.22); --accent: var(--blush); --on-accent: var(--blue); box-shadow: 0 34px 70px -34px rgba(16, 30, 90, .55); }
.price--hot .price-name { color: var(--white); }
.price--hot .price-num { color: var(--blush); }
.price--hot::before { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(255, 255, 255, .14), transparent 60%); }
.price--hot .ticks li::before { background-color: var(--blush); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%231A3CB8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price--hot .btn:hover { background: var(--white); }
@media (min-width: 961px) { .prices { padding-top: 16px; } .price--hot { translate: 0 -16px; } }
/* Preis zählt herunter */
.num.is-counting { opacity: .55; }
.num { display: inline-block; transition: opacity .3s ease; }
.num.is-set { animation: settle .5s var(--ease); }
@keyframes settle { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.fineprint { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; margin-top: 32px; font-size: var(--t-small); color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.step { display: grid; gap: 14px; align-content: start; transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease); }
.step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 1.125rem/1 var(--f-display); background: var(--white); color: var(--blue); transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease), transform var(--base) var(--ease); }
.step.is-on { background: var(--blue); color: var(--white); }
.step.is-on h3 { color: var(--blush); }
.step.is-on .step-num { background: var(--blush); color: var(--blue); transform: scale(1.06); }
.track { position: relative; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.track i { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); border-radius: 4px; }

/* ---------- Über uns ---------- */
.portrait { position: relative; width: min(100%, 440px); justify-self: end; align-self: end; }
.blob { position: absolute; inset: 8% -6% 0 -2%; background: var(--blush); border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%; }
.portrait img { position: relative; width: 84%; margin: 0 auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 0 0; }
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.about > div { display: grid; gap: 20px; justify-items: start; }

.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 6vw, 80px); align-items: start; }
.faq-side { display: grid; gap: 20px; justify-items: start; position: sticky; top: 110px; }
.search { position: relative; width: 100%; max-width: 360px; }
.search input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--white); color: var(--ink); font-size: var(--t-ui); transition: border-color var(--fast), box-shadow var(--base) var(--ease); }
.search input::placeholder { color: rgba(38,35,32,.5); }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26, 60, 184, .15); }
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--blue); pointer-events: none; }
.faqs { display: grid; gap: 10px; }
.faq { border-radius: var(--r-sm); background: var(--white); color: var(--ink); transition: box-shadow var(--base) var(--ease); }
.faq:hover { box-shadow: 0 8px 24px -14px rgba(26, 60, 184, .5); }
.faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 20px 22px; cursor: pointer; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 24px; height: 24px; border-radius: 50%; background: var(--blush); position: relative; transition: background-color var(--base) var(--ease), transform var(--base) var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; background: var(--blue); border-radius: 2px; transition: transform var(--base) var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq[open] summary i { background: var(--blue); transform: rotate(180deg); }
.faq[open] summary i::before, .faq[open] summary i::after { background: var(--white); }
.faq[open] summary i::after { transform: rotate(0deg); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 22px 22px; max-width: 640px; }
.faq-empty { padding: 20px 22px; border-radius: var(--r-sm); border: 1.5px dashed var(--line); }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.person { display: flex; align-items: center; gap: 16px; }
.person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; }
.person b { display: block; font: 500 var(--t-body)/1.3 var(--f-display); }
.person span { font-size: var(--t-small); color: var(--muted); }
.contact-side { display: grid; gap: 24px; }
.c-links { display: grid; gap: 12px; }
.c-link { display: flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 500; }
.c-link span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); color: var(--blue); flex: none; transition: transform var(--base) var(--ease), background-color var(--base) var(--ease), color var(--base) var(--ease); }
.c-link svg { width: 20px; height: 20px; }
.c-link:hover span { transform: scale(1.08); background: var(--blue); color: var(--white); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; position: relative; min-width: 0; }
.full { grid-column: 1 / -1; }
.field > label { font-size: var(--t-small); font-weight: 500; padding: 0; }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--paper); font-size: var(--t-ui); line-height: 1.5; transition: border-color var(--fast), box-shadow var(--base) var(--ease), background-color var(--fast); }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(38,35,32,.45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(26, 60, 184, .12); }
.field.is-done::after { content: ""; position: absolute; right: 14px; top: 43px; width: 20px; height: 20px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; animation: pop var(--base) var(--ease); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-small); line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); flex: none; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.meter { display: flex; align-items: center; gap: 12px; font-size: var(--t-small); color: rgba(38,35,32,.6); }
.meter-bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(38,35,32,.12); overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--m, 0)); transition: transform var(--base) var(--ease); }
.status { font-size: var(--t-small); padding: 14px 16px; border-radius: var(--r-sm); background: var(--paper); }
.status.ok { display: flex; gap: 12px; align-items: center; background: var(--blush); color: var(--blue); }
.status.ok::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; animation: pop var(--base) var(--ease); }
#f-submit.is-loading svg { animation: spin .8s linear infinite; }
.hp { position: absolute; left: -9999px; }

/* ---------- Karriere, Rechtliches ---------- */
.empty { display: grid; gap: 14px; justify-items: start; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 110px; display: grid; gap: 4px; font-size: var(--t-small); }
.toc b { font-weight: 500; margin-bottom: 8px; }
.toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--line); text-decoration: none; color: var(--muted); transition: color var(--fast), border-color var(--base) var(--ease); }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--blue); border-color: var(--blue); }
.legal-body { display: grid; gap: 16px; max-width: 720px; }
.legal-body h2 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.03em; margin-top: 32px; scroll-margin-top: 110px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: var(--t-body); font-weight: 500; font-family: var(--f-body); margin-top: 8px; }
.legal-body ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.legal-body a { color: var(--blue); overflow-wrap: anywhere; }

/* ---------- Footer: eine Fläche bis unten ---------- */
.foot { text-align: center; padding-block: clamp(56px, 8vw, 104px) 32px; }
.foot-cta { display: grid; gap: 22px; justify-items: center; padding-bottom: clamp(56px, 7vw, 88px); }
.foot-cta p { max-width: 540px; }
.foot-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: var(--muted); }
.foot-lines a { color: var(--white); text-decoration: none; }
.foot-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom { display: grid; gap: 28px; justify-items: center; padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line); }
.foot-cta + .foot-bottom { }
.foot--plain .foot-bottom { border-top: 0; padding-top: 0; }
.foot-logo { width: 150px; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; }
.foot-nav a { text-decoration: none; font-weight: 500; transition: color var(--fast); }
.foot-nav a:hover { color: var(--blush); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: var(--t-small); color: var(--muted); }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--white); }

/* ---------- Bewegung ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }
.hero-copy > :not(h1) { animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 1) * 90ms + 250ms); }
.hero-art { animation: rise 1.1s var(--ease) .2s both; }
@media (prefers-reduced-motion: no-preference) {
  .blob { animation: blob 16s ease-in-out infinite alternate; }
  @keyframes blob { 50% { border-radius: 58% 42% 50% 50% / 44% 56% 44% 56%; } 100% { border-radius: 40% 60% 56% 44% / 58% 44% 56% 42%; } }
}

/* Seitenwechsel */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* Cursor-Blase */
.bubble { position: fixed; left: 0; top: 0; z-index: 70; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--blush); color: var(--blue); display: grid; place-items: center; font: 500 var(--t-small)/1 var(--f-body); pointer-events: none; translate: var(--cx, -200px) var(--cy, -200px); transform: scale(0); transition: transform var(--base) var(--ease); box-shadow: 0 14px 34px -10px rgba(16, 30, 90, .45); }
.bubble.is-on { transform: scale(1); }
@media (hover: none), (pointer: coarse) { .bubble { display: none; } }

/* ---------- Responsiv ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 22px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav-links, .nav-cta .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding-bottom: 8px; }
  .hero-art { justify-self: center; width: min(88%, 440px); }
  .fan, .mini-prices { width: min(100%, 440px); justify-self: center; margin-top: 12px; }
  .portrait { justify-self: center; width: min(80%, 380px); }
  .morph-card, .work, .about, .faq-wrap, .contact, .legal { grid-template-columns: 1fr; }
  .shots, .prices { grid-template-columns: 1fr; max-width: 560px; }
  .stack-item { position: relative; top: 0; }
  .faq-side { position: static; }
  .toc { display: none; }
  .fineprint { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  :root { --wave-h: 60px; --wave-w: 63px; }
  .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .switch button { min-width: 0; }
  .mini-price { padding: 18px 20px; }
  .mini-price b { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .js .rv { opacity: 1; transform: none; }
}

/* Ergänzungen: Blätter auf Flächen, Hervorhebung im Titel, Bildpositionen */
.sheet-host { padding-inline: 8px; }
.sheet { border-radius: var(--r-lg); }
.hero-copy h1 .ac { color: var(--white); }
.hero-art--mid { align-self: center; padding-bottom: clamp(32px, 5vw, 72px); }
.hero-art--mid .fan, .hero-art--mid .mini-prices { width: 100%; margin: 0; animation: none; }
.s-white .faq, .s-white .search input { background: var(--paper); }
.s-white .faq:hover { box-shadow: 0 8px 24px -16px rgba(38, 35, 32, .45); }
.card .step-num { background: var(--blush); }
.foot h2 { color: var(--blush); }
@media (max-width: 960px) {
  .hero-art--mid { width: min(100%, 440px); padding-bottom: 32px; }
  .hero-art--hand { justify-self: end; width: min(100%, 400px); margin: 8px calc(-1 * var(--gutter) + 8px) 0 0; }
}

/* Ladezustand: bis das Skript bereit ist, bleiben animierte Titel und Zähler unsichtbar (spätestens nach 2,5 s sichtbar) */
@media (prefers-reduced-motion: no-preference) {
  .pre [data-split]:not(.is-split), .pre .num[data-count] { opacity: 0; animation: pre-show 0s linear 2.5s forwards; }
}
@keyframes pre-show { to { opacity: 1; } }

/* ---------- Entwurfsvorschau: Desktop, Mobil, neuer Tab ---------- */
html.viewer-open, html.viewer-open body { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.viewer[hidden] { display: none; }
.viewer-backdrop { position: absolute; inset: 0; background: rgba(10, 18, 56, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: v-fade .3s ease both; }
.viewer-panel { position: relative; width: 100%; max-width: 1320px; height: 100%; max-height: 940px; display: flex; flex-direction: column; background: var(--white); color: var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .55); animation: v-in .45s var(--ease) both; }
.viewer-head { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 24px; border-bottom: 1px solid rgba(38, 35, 32, .1); flex-shrink: 0; }
.viewer-title { flex: 1; min-width: 0; display: grid; gap: 3px; }
.viewer-title b { font: 500 1.125rem/1.2 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title span { font-size: var(--t-small); color: rgba(38, 35, 32, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper); flex-shrink: 0; }
.viewer-toggle button { border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 500 .9375rem/1 var(--f-body); color: rgba(38, 35, 32, .6); transition: background-color var(--fast) ease, color var(--fast) ease; }
.viewer-toggle button svg { width: 17px; height: 17px; }
.viewer-toggle button:hover { color: var(--ink); }
.viewer-toggle button.is-active { background: var(--ink); color: var(--white); }
.viewer-newtab { flex-shrink: 0; min-height: 48px; --accent: var(--blue); --on-accent: var(--white); }
.viewer-newtab svg { width: 18px; height: 18px; }
.viewer-newtab:hover svg { transform: translate(2px, -2px); }
.viewer-newtab .short { display: none; }
.viewer-close { flex-shrink: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color var(--fast) ease; }
.viewer-close:hover { background: var(--stone); }
.viewer-close svg { width: 18px; height: 18px; }
.viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--stone); overflow: hidden; }
.viewer-frame { position: relative; display: flex; flex-direction: column; background: var(--white); overflow: hidden; }
.viewer-frame.is-desktop { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 0 0 1px rgba(38, 35, 32, .1), 0 24px 60px -34px rgba(0, 0, 0, .4); }
.viewer-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; background: var(--paper); border-bottom: 1px solid rgba(38, 35, 32, .08); flex-shrink: 0; }
.viewer-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(38, 35, 32, .2); }
.viewer-url { margin-left: 10px; font: 500 12px/1 var(--f-mono); color: rgba(38, 35, 32, .6); background: var(--white); border-radius: 6px; padding: 6px 10px; }
.viewer-body { position: relative; flex: 1; min-height: 0; }
.viewer-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--white); }
.viewer-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; background: var(--white); color: rgba(38, 35, 32, .6); font-size: var(--t-small); }
.viewer-frame.is-loaded .viewer-loading { display: none; }
/* Mobil: echter Telefonrahmen mit 390 × 844 Punkt Innenfläche, als Ganzes verkleinert, wenn er nicht passt */
.viewer-frame.is-mobil { flex: 0 0 auto; width: 408px; height: 896px; border: 9px solid #121214; border-radius: 52px; background: #121214; box-shadow: 0 0 0 1.5px #44444a, 0 34px 80px -30px rgba(0, 0, 0, .6); transform: scale(var(--s, 1)); transform-origin: center; }
.viewer-frame.is-mobil .viewer-bar { display: none; }
.viewer-frame.is-mobil .viewer-body { border-radius: 43px; overflow: hidden; padding-top: 34px; background: var(--white); }
.viewer-frame.is-mobil .viewer-body::before { content: ""; position: absolute; top: 6px; left: 50%; z-index: 2; width: 110px; height: 30px; margin-left: -55px; border-radius: 20px; background: #000; pointer-events: none; }
@keyframes v-fade { from { opacity: 0; } }
@keyframes v-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@media (max-width: 760px) {
  .viewer { padding: 0; }
  .viewer-panel { max-height: none; border-radius: 0; }
  .viewer-head { gap: 10px; padding: 10px 10px 10px 16px; }
  .viewer-title span, .viewer-toggle { display: none; }
  .viewer-newtab { min-height: 44px; padding: 0 16px; }
  .viewer-newtab .long { display: none; }
  .viewer-newtab .short { display: inline; }
  .viewer-close { width: 44px; height: 44px; }
  .viewer-stage { padding: 0; }
  .viewer-frame.is-desktop, .viewer-frame.is-mobil { width: 100%; height: 100%; transform: none; border: 0; border-radius: 0; box-shadow: none; }
  .viewer-frame .viewer-bar { display: none; }
  .viewer-frame.is-mobil .viewer-body { border-radius: 0; padding-top: 0; }
  .viewer-frame.is-mobil .viewer-body::before { display: none; }
}
.work-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.link--tab { color: var(--ink); }
.link--tab svg { width: 17px; height: 17px; transition: transform var(--base) var(--ease); }
.link--tab:hover svg { transform: translate(2px, -2px); }

/* =====================================================================
   Farbkonzept „Nacht“
   Tiefschwarz als Bühne, Graphit für Zwischenflächen, Karten eine Stufe heller.
   Ein Hellblau als einziger Akzent auf Dunkel, ein Nachtblau für hervorgehobene Flächen.
   ===================================================================== */
:root {
  --night: #0A0B0D;   /* Bühne: Kopf, Hero, Footer */
  --coal: #121418;    /* Zwischenflächen */
  --panel: #181B20;   /* Blätter */
  --tile: #1F2228;    /* Karten */
  --tile-2: #282C33;  /* Karten-Elemente, Hover */
  --text: #ECEDEF;
  --head: #F7F8F9;
  --mute: #8D939C;
  --hair: rgba(255, 255, 255, .09);
  --sky: #7FA8FF;     /* Hellblau: Akzent auf Dunkel */
  --sky-h: #A9C4FF;
  --navy: #142858;    /* Nachtblau: Hervorhebungen */
}

/* @pro-start: alles bis @pro-end gilt nur im Stil „Professionell“ (build.py setzt den Gültigkeitsbereich) */
html:where(:not(.bunt)) { color-scheme: dark; }
html:where(:not(.bunt)), :where(html:not(.bunt)) body { background: var(--night); }

/* Übergänge: gewölbte Kante statt Wellenband */
:where(html:not(.bunt)) .wave { display: none; }
:where(html:not(.bunt)) .hero:has(+ .seam + .wave--clear) .hero-art, :where(html:not(.bunt)) .hero:has(+ .seam + .wave--under) .hero-art--hand { margin-bottom: 0; }
:where(html:not(.bunt)) body { color: var(--text); }
:where(html:not(.bunt)) ::selection { background: var(--sky); color: var(--night); }

/* Flächen */
:where(html:not(.bunt)) .s-blue { --bg: var(--night); --fg: var(--text); --hd: var(--head); --muted: var(--mute); --line: var(--hair); --accent: var(--sky); --on-accent: var(--night); }
:where(html:not(.bunt)) .s-blush, :where(html:not(.bunt)) .s-stone { --bg: var(--coal); --fg: var(--text); --hd: var(--head); --muted: var(--mute); --line: var(--hair); --accent: var(--sky); --on-accent: var(--night); }
:where(html:not(.bunt)) .s-white { --bg: var(--panel); --fg: var(--text); --hd: var(--head); --muted: var(--mute); --line: var(--hair); --accent: var(--sky); --on-accent: var(--night); --card: var(--tile); }
:where(html:not(.bunt)) .sheet { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
:where(html:not(.bunt)) .card { background: var(--card, var(--tile)); color: var(--text); --muted: var(--mute); --line: var(--hair); --accent: var(--sky); --on-accent: var(--night); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
:where(html:not(.bunt)) .card h2, :where(html:not(.bunt)) .card h3 { color: var(--head); }

/* Buttons und Links */
:where(html:not(.bunt)) .btn:hover, :where(html:not(.bunt)) .s-blush .btn:hover, :where(html:not(.bunt)) .card .btn:hover, :where(html:not(.bunt)) .s-white .btn:hover, :where(html:not(.bunt)) .s-stone .btn:hover, :where(html:not(.bunt)) .s-blue .btn:hover, :where(html:not(.bunt)) .nav-cta .btn:hover, :where(html:not(.bunt)) .menu-panel .btn:hover { background: var(--sky-h); box-shadow: 0 10px 30px -10px rgba(127, 168, 255, .45); }
:where(html:not(.bunt)) .link--tab { color: var(--text); }
:where(html:not(.bunt)) :focus-visible { outline-color: var(--sky); }

/* Kopfzeile */
:where(html:not(.bunt)) .progress { background: var(--sky); }
:where(html:not(.bunt)) .site-head.is-stuck { background: rgba(10, 11, 13, .78); box-shadow: 0 1px 0 var(--hair); }
:where(html:not(.bunt)) .nav-links a::after { background: var(--sky); }
:where(html:not(.bunt)) .nav-cta, :where(html:not(.bunt)) .menu-panel { --accent: var(--sky); --on-accent: var(--night); }
:where(html:not(.bunt)) .menu-btn { background: rgba(255, 255, 255, .1); }
:where(html:not(.bunt)) .menu-panel li a { border-bottom-color: var(--hair); }

/* Hero */
:where(html:not(.bunt)) .hero-copy h1 { color: var(--head); }
:where(html:not(.bunt)) .hero-copy h1 .ac { color: var(--sky); }
:where(html:not(.bunt)) .hero-art--hand .phone { z-index: 1; }
/* Dezentes Gegenlicht: ein weicher, hellblauer Schein entlang der Silhouette von Hand und Handy gibt etwas Tiefe */
:where(html:not(.bunt)) .phone-glow { display: block; position: absolute; z-index: -1; left: -15%; right: -15%; top: -10.67%; bottom: -10.67%; background: center / 100% 100% no-repeat; pointer-events: none; }

/* Vorher / Nachher */
:where(html:not(.bunt)) .switch { background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
:where(html:not(.bunt)) .switch button { color: var(--mute); }
:where(html:not(.bunt)) .switch-pill { background: var(--tile-2); }
:where(html:not(.bunt)) [data-state="new"] .switch-pill { background: var(--sky); }
:where(html:not(.bunt)) [data-state="new"] .switch button[aria-selected="true"] { color: var(--night); }
:where(html:not(.bunt)) [data-state="new"] .morph-card { background: var(--navy); color: var(--text); }
:where(html:not(.bunt)) [data-state="new"] .morph-card h3 { color: var(--sky-h); }
:where(html:not(.bunt)) .ticks li::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%230A0B0D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:where(html:not(.bunt)) .ticks--x li::before { background-color: rgba(255, 110, 110, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6' stroke='%23FF8F8F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
:where(html:not(.bunt)) [data-state="new"] [data-panel="new"] .ticks li::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%23142858' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Die Mini-Website bleibt hell, sie zeigt ja eine Website. Ihr Akzent wird zum Blau des Konzepts. */
:where(html:not(.bunt)) .mock { --blue: #2F5BFF; --blush: #DCE6FF; box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); }

/* Entwürfe */
:where(html:not(.bunt)) .scrollshot { background: var(--tile); }
:where(html:not(.bunt)) .shot-card .scrollshot, :where(html:not(.bunt)) .work-shot { box-shadow: 0 0 0 1px var(--hair); }
:where(html:not(.bunt)) .fan-win { background: var(--tile); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px var(--hair); }
:where(html:not(.bunt)) .fan-win .bar, :where(html:not(.bunt)) .work-shot .bar { background: var(--tile-2); }
:where(html:not(.bunt)) .fan-win .bar i, :where(html:not(.bunt)) .work-shot .bar i { background: rgba(255, 255, 255, .22); }
:where(html:not(.bunt)) .work-shot { background: var(--tile-2); }
:where(html:not(.bunt)) .work-shot .bar em { background: var(--tile); color: var(--mute); }
:where(html:not(.bunt)) .work { box-shadow: 0 -12px 40px -24px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .04); }
:where(html:not(.bunt)) .stack-dim { background: #000; }

/* Leistungen */
:where(html:not(.bunt)) .mini-price { background: var(--tile); color: var(--text); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px var(--hair); }
:where(html:not(.bunt)) .mini-price:nth-child(2) { background: var(--sky); color: var(--night); }
:where(html:not(.bunt)) .price::before { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 0%), rgba(127, 168, 255, .12), transparent 60%); }
:where(html:not(.bunt)) .price--hot { background: var(--navy); color: var(--text); --muted: rgba(236, 237, 239, .72); --line: rgba(255, 255, 255, .14); --accent: var(--sky); --on-accent: var(--night); box-shadow: 0 34px 70px -34px rgba(20, 40, 120, .9), inset 0 0 0 1px rgba(127, 168, 255, .35); }
:where(html:not(.bunt)) .price--hot .price-name { color: var(--head); }
:where(html:not(.bunt)) .price--hot .price-num { color: var(--sky-h); }
:where(html:not(.bunt)) .price--hot .ticks li::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%23142858' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:where(html:not(.bunt)) .price--hot .btn:hover { background: var(--sky-h); }
:where(html:not(.bunt)) .step-num, :where(html:not(.bunt)) .card .step-num { background: var(--tile-2); color: var(--sky); }
:where(html:not(.bunt)) .step.is-on { background: var(--navy); color: var(--text); }
:where(html:not(.bunt)) .step.is-on h3 { color: var(--sky-h); }
:where(html:not(.bunt)) .step.is-on .step-num { background: var(--sky); color: var(--night); }
:where(html:not(.bunt)) .track i { background: var(--sky); }

/* Über uns */
:where(html:not(.bunt)) .blob { background: radial-gradient(120% 120% at 30% 20%, #2A4FB8 0%, var(--navy) 55%, #0C1733 100%); }

/* FAQ */
:where(html:not(.bunt)) .faq, :where(html:not(.bunt)) .s-white .faq { background: var(--tile); color: var(--text); }
:where(html:not(.bunt)) .faq:hover, :where(html:not(.bunt)) .s-white .faq:hover { box-shadow: 0 0 0 1px rgba(127, 168, 255, .3); }
:where(html:not(.bunt)) .faq summary i { background: var(--tile-2); }
:where(html:not(.bunt)) .faq summary i::before, :where(html:not(.bunt)) .faq summary i::after { background: var(--sky); }
:where(html:not(.bunt)) .faq[open] summary i { background: var(--sky); }
:where(html:not(.bunt)) .faq[open] summary i::before, :where(html:not(.bunt)) .faq[open] summary i::after { background: var(--night); }
:where(html:not(.bunt)) .search input, :where(html:not(.bunt)) .s-white .search input { background: var(--tile); color: var(--text); }
:where(html:not(.bunt)) .search input::placeholder { color: var(--mute); }
:where(html:not(.bunt)) .search input:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(127, 168, 255, .16); }
:where(html:not(.bunt)) .search svg { color: var(--sky); }

/* Kontakt */
:where(html:not(.bunt)) .c-link span { background: var(--tile-2); color: var(--sky); }
:where(html:not(.bunt)) .c-link:hover span { background: var(--sky); color: var(--night); }
:where(html:not(.bunt)) .field input, :where(html:not(.bunt)) .field textarea { background: #14161A; color: var(--text); border-color: var(--hair); }
:where(html:not(.bunt)) .field input::placeholder, :where(html:not(.bunt)) .field textarea::placeholder { color: rgba(141, 147, 156, .8); }
:where(html:not(.bunt)) .field input:focus, :where(html:not(.bunt)) .field textarea:focus { background: #0F1114; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(127, 168, 255, .14); }
:where(html:not(.bunt)) .field.is-done::after { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%230A0B0D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:where(html:not(.bunt)) .consent input { accent-color: var(--sky); }
:where(html:not(.bunt)) .meter { color: var(--mute); }
:where(html:not(.bunt)) .meter-bar { background: var(--hair); }
:where(html:not(.bunt)) .meter-bar i { background: var(--sky); }
:where(html:not(.bunt)) .status { background: #14161A; }
:where(html:not(.bunt)) .status.ok { background: var(--navy); color: var(--text); }
:where(html:not(.bunt)) .status.ok::before { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2L9.4 3.8' fill='none' stroke='%23142858' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Rechtliches */
:where(html:not(.bunt)) .toc a:hover { color: var(--text); }
:where(html:not(.bunt)) .toc a.is-active { color: var(--sky); border-color: var(--sky); }
:where(html:not(.bunt)) .legal-body a { color: var(--sky); }

/* Footer */
:where(html:not(.bunt)) .foot h2 { color: var(--head); }
:where(html:not(.bunt)) .foot-lines a { color: var(--text); }
:where(html:not(.bunt)) .foot-nav a:hover, :where(html:not(.bunt)) .foot-legal a:hover { color: var(--sky); }

/* Cursor-Blase */
:where(html:not(.bunt)) .bubble { background: var(--sky); color: var(--night); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6); }

/* Vorschaufenster */
:where(html:not(.bunt)) .viewer-backdrop { background: rgba(0, 0, 0, .72); }
:where(html:not(.bunt)) .viewer-panel { background: #111317; color: var(--text); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--hair); }
:where(html:not(.bunt)) .viewer-head { border-bottom-color: var(--hair); }
:where(html:not(.bunt)) .viewer-title span { color: var(--mute); }
:where(html:not(.bunt)) .viewer-toggle { background: var(--tile); }
:where(html:not(.bunt)) .viewer-toggle button { color: var(--mute); }
:where(html:not(.bunt)) .viewer-toggle button:hover { color: var(--text); }
:where(html:not(.bunt)) .viewer-toggle button.is-active { background: var(--text); color: var(--night); }
:where(html:not(.bunt)) .viewer-newtab { --accent: var(--sky); --on-accent: var(--night); }
:where(html:not(.bunt)) .viewer-close { background: var(--tile); color: var(--text); }
:where(html:not(.bunt)) .viewer-close:hover { background: var(--tile-2); }
:where(html:not(.bunt)) .viewer-stage { background: var(--night); }
:where(html:not(.bunt)) .viewer-frame.is-desktop { box-shadow: 0 0 0 1px var(--hair), 0 24px 60px -34px rgba(0, 0, 0, .9); }
:where(html:not(.bunt)) .viewer-bar { background: var(--tile); border-bottom-color: var(--hair); }
:where(html:not(.bunt)) .viewer-bar i { background: rgba(255, 255, 255, .2); }
:where(html:not(.bunt)) .viewer-url { background: #111317; color: var(--mute); }
:where(html:not(.bunt)) .viewer-loading { background: #111317; color: var(--mute); }
:where(html:not(.bunt)) .viewer-frame.is-mobil { box-shadow: 0 0 0 1.5px #3A3D44, 0 34px 80px -30px rgba(0, 0, 0, .9); }

/* @pro-end */

/* ---------- Für beide Stile: Übergänge, Cursor, Intro, Stil-Schalter ---------- */
/* Akzent je Stil: Professionell Hellblau auf Schwarz, Ausgefallen Rosa auf Kobalt */
:root { --dot: var(--sky); --fill: var(--sky); --stage: var(--night); --grid-dot: rgba(127, 168, 255, .55); }
html.bunt { --dot: var(--blush); --fill: var(--blush); --stage: var(--blue); --grid-dot: rgba(250, 219, 229, .55); }

/* Lichtkante (nur Professionell): Die Flächen gehen weich ineinander über, an der Grenze zieht sich
   beim Hineinscrollen eine feine blaue Lichtlinie von der Mitte nach außen auf. */
:root { --seam-h: clamp(48px, 7vw, 96px); }
.seam { position: relative; z-index: 4; height: 0; pointer-events: none; }
.seam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--seam-h); background: linear-gradient(to bottom, color-mix(in srgb, var(--to) 0%, transparent), var(--to)); }
.seam::after { content: ""; position: absolute; left: 50%; bottom: -.5px; width: min(76%, 980px); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgba(127, 168, 255, .75) 50%, transparent); box-shadow: 0 0 18px 1px rgba(127, 168, 255, .28); transform: scaleX(calc(1 - var(--k, 0) * .9)); opacity: calc(1 - var(--k, 0) * .6); will-change: transform; }
html.bunt .seam { display: none; }
/* Unter dem Hero mit der Hand nur die Lichtlinie, ohne Abdunkeln: Der Arm endet sauber an der Kante */
.hero:has(.hero-art--hand) + .seam::before { display: none; }
@media (prefers-reduced-motion: reduce) { .seam { --k: 0; } }

/* Logo: Der Punkt ist ein eigenes Element in der Akzentfarbe und hüpft, wenn man über das Logo fährt */
.logo, .foot-logo { position: relative; display: block; }
.logo img, .foot-logo img { width: 100%; }
.logo-dot { position: absolute; left: 97.63%; top: 54.85%; width: 4.31%; aspect-ratio: 1; border-radius: 50%; background: var(--dot); translate: -50% -50%; transition: background-color .4s ease; }
.logo:hover .logo-dot, .foot-logo:hover .logo-dot { animation: dot-hop .8s var(--ease); }
@keyframes dot-hop {
  0% { transform: none; }
  28% { transform: translateY(-260%) scale(.9, 1.12); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  50% { transform: translateY(0) scale(1.3, .72); }
  68% { transform: translateY(-70%) scale(.96, 1.05); }
  84% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: none; }
}

/* Cursor: Punkt in der Akzentfarbe, wird über Klickbarem zum Ring */
.cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sky); pointer-events: none; opacity: 0; translate: var(--cx, -100px) var(--cy, -100px); transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s ease, background-color .3s ease; }
html.bunt .cursor { background: var(--blue); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: .28; }
.cursor.is-off { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Intro beim ersten Aufruf und bei jedem Stilwechsel: Die Fläche zieht sich zum Punkt im Logo zusammen,
   das Logo erscheint, dann zoomt die Seite aus der Nähe an ihren Platz. */
.splash { display: none; }
html.intro .splash { display: block; position: fixed; inset: 0; z-index: 400; background: var(--stage); pointer-events: none; animation: intro-out .75s cubic-bezier(.7, 0, .2, 1) 2.05s forwards; }
.splash { --lw: min(340px, 64vw); --px: calc(50% + var(--lw) * .4763); --py: calc(50% + var(--lw) * .0152); --pr: calc(var(--lw) * .02156); }
.splash-dot { position: absolute; inset: 0; background: var(--fill); clip-path: circle(var(--pr) at var(--px) var(--py)); animation: intro-dot 1s cubic-bezier(.76, 0, .24, 1) both, intro-beat .5s var(--ease) 1.45s; }
@keyframes intro-beat { 50% { clip-path: circle(calc(var(--pr) * 1.45) at var(--px) var(--py)); } }
/* Schriftzug: Eine Abdeckung in Bühnenfarbe zieht sich vom Punkt nach links zurück (nur transform, ohne clip-path und Filter).
   Ohne laufende Animation ist der Schriftzug sichtbar, er kann also nie verloren gehen. */
.splash-word { position: absolute; left: 50%; top: 50%; width: var(--lw); translate: -50% -50%; }
.splash-logo { display: block; width: 100%; height: auto; animation: intro-glide .85s cubic-bezier(.16, 1, .3, 1) .62s both; }
.splash-cover { position: absolute; top: -25%; bottom: -25%; left: -4%; right: -3%; background: var(--stage); transform-origin: 0 50%; transform: scaleX(0); animation: intro-cover .85s cubic-bezier(.16, 1, .3, 1) .62s both; }
@keyframes intro-dot { 0% { clip-path: circle(150vmax at var(--px) var(--py)); } 78% { clip-path: circle(calc(var(--pr) * .7) at var(--px) var(--py)); } 100% { clip-path: circle(var(--pr) at var(--px) var(--py)); } }
@keyframes intro-glide { from { transform: translateX(9%); } to { transform: none; } }
@keyframes intro-cover { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; scale: 1.18; } }
html.intro .page { animation: page-in 1.2s var(--ease) 2.1s both; transform-origin: 50% calc(var(--scroll-y, 0px) + 50vh); }
@keyframes page-in { from { opacity: 0; transform: scale(1.06); } }
html.intro .is-split .w > span { animation-delay: calc(var(--i) * 55ms + 2.3s); }
html.intro .hero-copy > :not(h1) { animation-delay: calc(var(--i, 1) * 90ms + 2.45s); }
html.intro .hero-art { animation-delay: 2.35s; }
@media (prefers-reduced-motion: reduce) { html.intro .splash { display: none; } html.intro .page { animation: none; } }

/* Stilwechsel: Ein Kreis in der Farbe des neuen Stils wächst vom Schalter aus über die Seite,
   darunter wird umgestellt, dann folgt das Intro im neuen Stil. */
.wipe { display: none; position: fixed; inset: 0; z-index: 401; pointer-events: none; background: var(--wipe, var(--sky)); }
.wipe.to-pro { --wipe: #7FA8FF; }
.wipe.to-bunt { --wipe: #FADBE5; }
.wipe.is-go { display: block; animation: wipe-in .56s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes wipe-in { from { clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); } to { clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 50%)); } }

/* Stil-Schalter */
.look { --look-bg: rgba(255, 255, 255, .07); --look-ring: rgba(255, 255, 255, .12); --look-off: rgba(255, 255, 255, .6); --look-on: #fff; --look-pill: rgba(255, 255, 255, .14);
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--look-bg); box-shadow: inset 0 0 0 1px var(--look-ring); isolation: isolate; flex: none; }
html.bunt .look { --look-bg: rgba(255, 255, 255, .12); --look-ring: rgba(255, 255, 255, .2); --look-off: rgba(255, 255, 255, .78); --look-on: var(--blue); --look-pill: var(--blush); }
.look button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--look-off); font: 500 .8125rem/1 var(--f-body); letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: color .35s ease; }
.look button:hover { color: var(--look-on); }
html.bunt .look button:hover { color: #fff; }
.look button[aria-checked="true"], html.bunt .look button[aria-checked="true"] { color: var(--look-on); }
.look i { width: 10px; height: 10px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4); transition: transform .4s var(--ease); }
.look button:hover i { transform: rotate(180deg) scale(1.15); }
.look [data-look="pro"] i { background: linear-gradient(135deg, #7FA8FF 50%, #0A0B0D 50%); }
.look [data-look="bunt"] i { background: linear-gradient(135deg, #FADBE5 50%, #1A3CB8 50%); }
.look-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--look-pill); transition: transform .55s var(--ease), background-color .35s ease; }
html.bunt .look-pill, .look[data-on="bunt"] .look-pill { transform: translateX(100%); }
.look[data-on="pro"] .look-pill { transform: none; }
.look:focus-within { box-shadow: inset 0 0 0 1px var(--look-ring), 0 0 0 3px rgba(127, 168, 255, .35); }
.look button:focus-visible { outline: none; }
/* Groß auf der Startseite */
.look--lg { --look-bg: var(--night); --look-ring: var(--hair); --look-off: var(--mute); --look-on: var(--night); --look-pill: var(--sky); padding: 6px; }
html.bunt .look--lg { --look-bg: var(--blue); --look-ring: transparent; --look-off: rgba(255, 255, 255, .8); --look-on: var(--blue); --look-pill: var(--blush); }
.look--lg button { height: 52px; padding: 0 26px; gap: 10px; font-size: 1rem; }
.look--lg i { width: 14px; height: 14px; }
.look--lg .look-pill { top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); }
.look-card { margin-bottom: 20px; }
@media (max-width: 680px) {
  .look-card .look--lg { flex: 1 1 100%; display: grid; width: 100%; max-width: 420px; }
  .look--lg button { height: 48px; padding: 0 10px; gap: 8px; font-size: .9375rem; min-width: 0; }
  .look--lg i { width: 12px; height: 12px; }
}
.look-card .label { justify-self: start; }
/* Im Menü auf dem Handy */
.menu-look-label { margin: 28px 0 10px; font-size: var(--t-small); color: rgba(255, 255, 255, .6); }
.menu-panel .look { display: grid; width: 100%; }
.menu-panel .look button { height: 44px; font-size: .9375rem; }
/* Schmale Kopfzeile: nur die Farbpunkte */
@media (max-width: 1100px) {
  .nav-cta .look button { width: 34px; padding: 0; }
  .nav-cta .look span { display: none; }
}

/* Hero: verborgenes Punktraster, das der Mauszeiger wie eine Taschenlampe sichtbar macht.
   Die Lichtscheibe wandert per transform, das Raster darin läuft gegenläufig mit und bleibt so ortsfest. */
.hero-light { position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s ease; will-change: transform;
  -webkit-mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, .35) 60%, transparent); mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, .35) 60%, transparent);
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); }
.hero-light i { position: absolute; left: 260px; top: 260px; width: var(--hw, 100vw); height: var(--hh, 100vh); background-image: radial-gradient(circle, var(--grid-dot) 1.1px, transparent 1.7px); background-size: 28px 28px; background-position: 50% 0; transform: translate3d(calc(-1 * var(--hx, 0px)), calc(-1 * var(--hy, 0px)), 0); }
.hero.is-lit .hero-light { opacity: 1; }
.hero-copy { position: relative; }

/* Footer: Ortszeit und gemessene Ladezeit dieser Seite */
.foot-meta { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); line-height: 1; font-variant-numeric: tabular-nums; color: var(--muted); }
.foot-pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.foot-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dot); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.foot-load::before { content: "·"; margin-right: 10px; }