/* ==========================================================================
   enmedi – Designvorgaben (Quelle: Design-neu/enmedi-Styleguide-Kurzfassung.pdf,
   Corporate Design 2.0, Entwurf zur Freigabe). Regeln stehen in CLAUDE.md.
   Werte hier nur über die Variablen verwenden.
   ========================================================================== */

/* Schriften (selbst gehostet, Open Source OFL, Latin-Zeichensatz, variable Gewichte) */
@font-face{font-family:"Urbanist";font-weight:100 900;font-style:normal;font-display:swap;src:url("fonts/Urbanist.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-weight:100 1000;font-style:normal;font-display:swap;src:url("fonts/DMSans.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;

  /* Farben. Verhältnis: 55 % Sand/Milk, 25 % Glow, 12 % Charcoal, 8 % Peach/Blush */
  --sand:#EEE6D8;      /* Seitenhintergrund */
  --milk:#FBF8F3;      /* Karten, Flächen */
  --charcoal:#1E1D1C;  /* Text, Pills, dunkle Karten */
  --ember:#FF3D14;     /* Tiefe im Verlauf */
  --glow:#FF6A1A;      /* Kernfarbe – nie für Text */
  --amber:#FFA43A;     /* Licht im Verlauf */
  --peach:#F6C7AE;     /* sanfte Flächen */
  --blush:#EACBC0;     /* Verlauf-Hintergründe */
  --stone:#6E6058;     /* Nebentext (4,9 : 1 auf Sand) */
  --dunst:#8C8279;     /* zweite Headline-Zeile, nur ab 40 px auf Sand oder Milk */

  /* Verläufe */
  --sunrise:linear-gradient(135deg,var(--ember) 0%,var(--glow) 55%,var(--amber) 100%);
  --orb:radial-gradient(circle closest-side,var(--glow) 0%,transparent 72%);
  --orb-mask:radial-gradient(circle closest-side,#000 35%,transparent 72%);  /* hält das Korn innerhalb des Orbs */
  --pearl:radial-gradient(circle at 32% 28%,var(--amber) 0%,var(--glow) 48%,var(--ember) 100%);

  /* Rollen (wechseln in .on-dark) */
  --bg:var(--sand);
  --fg:var(--charcoal);
  --muted:var(--stone);
  --dim:var(--dunst);
  --line:color-mix(in srgb,var(--charcoal) 12%,transparent);
  --surface:var(--milk);
  --hair:color-mix(in srgb,var(--peach) 60%,transparent);

  /* Milchglas: Weiß 55 %, Blur 26 px, 1 px weißer Rand. Ohne backdrop-filter deckender Fallback */
  --glass:color-mix(in srgb,var(--milk) 92%,transparent);
  --glass-line:color-mix(in srgb,#fff 80%,transparent);
  --blur:26px;

  /* Schriften */
  --font-head:"Urbanist","DM Sans",system-ui,sans-serif;               /* Headlines: 300 Display, 400–500 kleiner, Laufweite -4 % */
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;   /* Text und Labels: 400 und 500, Zeilenhöhe 1,6 */
  --fw-display:300;
  --fw-head:500;
  --track-head:-.04em;
  --lh-body:1.6;

  /* Schriftskala (auf dem Handy verkleinert) */
  --fs-display:96px;
  --fs-h1:64px;
  --fs-h2:40px;
  --fs-h3:26px;
  --fs-lead:20px;
  --fs-text:17px;
  --fs-label:13px;

  /* Abstände – 8-px-System, sehr großzügiger Weißraum */
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --s-4:32px;
  --s-6:48px;
  --s-8:64px;
  --s-12:96px;
  --section-y:var(--s-12);

  /* Raster – 12 Spalten */
  --cols:12;
  --gutter:var(--s-3);
  --container:1200px;

  /* Breakpoints (var() geht in @media nicht, die Werte dort stehen als Literal) */
  --bp-sm:640px;   /* Handy */
  --bp-md:900px;   /* Tablet */

  /* Radien – eckige Formen gibt es nicht */
  --r-sm:12px;     /* kleine Elemente */
  --r-lg:28px;     /* Karten und Panels */
  --r-dark:26px;   /* dunkle Karte */
  --r-pill:999px;  /* Buttons, Felder, Tags */

  /* Schatten – nur sparsam */
  --shadow:0 28px 64px -32px color-mix(in srgb,var(--charcoal) 40%,transparent);

  /* Bewegung – alles gleitet: 500 bis 700 ms, weiches Ease-out. Orbs schweben in 9 bis 12 s */
  --dur:600ms;
  --dur-ui:500ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --drift:11s;

  /* Pfeil im Button-Chip (Farbe steckt in der Grafik: Milk / Charcoal) */
  --arrow-milk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --arrow-charcoal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1D1C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");

  /* Filmkorn – nur auf großen Glow-Flächen, nie über Text */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-dark{
  --bg:var(--charcoal);
  --fg:var(--milk);
  --muted:color-mix(in srgb,var(--milk) 72%,var(--charcoal));
  --dim:var(--dunst);
  --line:color-mix(in srgb,var(--milk) 20%,transparent);
  --surface:color-mix(in srgb,var(--milk) 8%,var(--charcoal));
  background:var(--bg);color:var(--fg);
}
@media (max-width:640px){
  :root{--fs-display:56px;--fs-h1:44px;--fs-h2:36px;--fs-h3:22px;--fs-lead:18px;--section-y:var(--s-8)}
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  :root{--glass:color-mix(in srgb,#fff 55%,transparent)}
}

/* Grundlagen */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-text);font-weight:400;line-height:var(--lh-body);background:var(--bg);color:var(--fg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{width:min(var(--container),100% - 2 * var(--s-3));margin-inline:auto}
svg.i{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

h1,h2,h3{font-family:var(--font-head);font-weight:var(--fw-display);letter-spacing:var(--track-head);line-height:1.08;margin:0}
h1{font-size:var(--fs-h1);line-height:1.04}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-head);line-height:1.25;letter-spacing:-.02em}
/* Headlines: Satzschreibweise, immer mit Punkt am Ende, der Punkt ist Glow. Den Punkt nicht in den Text schreiben. */
main h1::after,main h2::after,main h3::after{content:".";color:var(--glow)}
/* Zweifarbige Headline: Zeile eins Charcoal, Zeile zwei Dunst, Punkt am Ende der zweiten Zeile */
h1.two::after,h2.two::after{content:none}
.two .dim{display:block;color:var(--dim)}
.two .dim::after{content:".";color:var(--glow)}

.label{font-family:var(--font-body);font-size:var(--fs-label);font-weight:400;line-height:1.5;color:var(--muted)}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.num{font-weight:inherit;letter-spacing:inherit}

/* Raster */
.g12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-3)}
.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-12{grid-column:1/-1}
@media (max-width:900px){.g12>*{grid-column:1/-1}}

/* Karten und Panels: Milk, feine Peach-Linie, Radius 28 px (Klasse heißt aus Altgründen .frame) */
.frame{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg)}

/* Orbs: weiche Verlaufskugeln, schweben in 9 bis 12 s, Filmkorn nur auf der großen Fläche */
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(20px,-26px,0)}}

/* Scroll-Fortschritt */
.progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:30;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--sunrise);pointer-events:none}

/* Header: schwebende Milchglas-Pill */
header{position:sticky;top:0;z-index:20;padding-top:var(--s-2);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);height:68px;padding:0 var(--s-1) 0 var(--s-3);border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));transition:height var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
header.scrolled .nav{height:60px;box-shadow:var(--shadow)}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.logo svg{height:26px;width:auto;display:block;overflow:visible}
.logo span{font-family:var(--font-head);font-weight:var(--fw-head);font-size:28px;letter-spacing:var(--track-head);line-height:1;padding-bottom:3px}
nav ul{display:flex;gap:var(--s-1);list-style:none;margin:0;padding:0}
nav a{position:relative;text-decoration:none;color:var(--muted);font-weight:500;white-space:nowrap}
header nav a:not(.btn){display:block;padding:8px 16px;border-radius:var(--r-pill);transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)}
header nav a:not(.btn):hover{color:var(--fg);background:color-mix(in srgb,var(--charcoal) 6%,transparent)}
header nav a.active{color:var(--fg);background:color-mix(in srgb,var(--charcoal) 8%,transparent)}
.nav-cta{display:none}

/* Buttons: Charcoal-Pill mit rundem Pfeil-Chip. Hover: Chip gleitet nach rechts und leuchtet auf */
.btn{white-space:nowrap;--chip:color-mix(in srgb,var(--milk) 16%,var(--charcoal));--arrow:var(--arrow-milk);display:inline-flex;align-items:center;gap:var(--s-3);padding:6px 6px 6px var(--s-3);border-radius:var(--r-pill);font-family:var(--font-body);font-weight:500;font-size:16px;line-height:1.2;text-decoration:none;background:var(--charcoal);color:var(--milk);transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease)}
.btn::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:var(--arrow) center/16px no-repeat,var(--chip);translate:-4px 0;transition:translate var(--dur-ui) var(--ease),background-color var(--dur-ui) var(--ease)}
.btn:hover{--chip:var(--glow);--arrow:var(--arrow-charcoal);text-decoration:none}
.btn:hover::after{translate:0 0}
/* Auf Glow- und dunklen Flächen: Glow-Pill mit dunklem Chip (Charcoal auf Glow 5,9 : 1) */
.on-dark .btn{--chip:var(--charcoal);--arrow:var(--arrow-milk);background:var(--sunrise);color:var(--charcoal)}
.on-dark .btn:hover{--chip:var(--milk);--arrow:var(--arrow-charcoal)}
/* Zweitbutton: Milchglas-Pill ohne Chip */
.btn.ghost{padding:14px var(--s-3);background:var(--glass);border:1px solid var(--glass-line);color:var(--charcoal);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.btn.ghost::after{display:none}
.btn.ghost:hover{background:var(--milk)}
.on-dark .btn.ghost{background:color-mix(in srgb,var(--milk) 10%,transparent);border-color:var(--line);color:var(--milk)}
.on-dark .btn.ghost:hover{background:color-mix(in srgb,var(--milk) 18%,transparent)}
header .btn{padding-block:6px}

/* Burger */
.burger{display:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--charcoal);color:var(--milk);cursor:pointer;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* Gleiten beim Scrollen (nur mit JS) */
.js [data-reveal]{opacity:0;translate:0 var(--s-3);transition:opacity var(--dur) var(--ease) calc(var(--d,0s) * .6),translate var(--dur) var(--ease) calc(var(--d,0s) * .6),border-color var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease)}
.js [data-reveal="left"]{translate:calc(-1 * var(--s-3)) 0}
.js [data-reveal="right"]{translate:var(--s-3) 0}
.js [data-reveal].in{opacity:1;translate:0 0}

/* Der Orb: Aufzählung, Live-Punkt, Hover */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pearl);flex:none}
.dot.live{box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 22%,transparent)}
.dots{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);list-style:none;margin:0;padding:0}
.dots li{display:flex;align-items:center;gap:var(--s-1)}
.dots li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pearl);flex:none}

/* Hero */
.hero{position:relative;overflow:clip;padding-block:var(--s-8) var(--section-y)}
.hero-grid{align-items:center;row-gap:var(--s-8)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-1);margin-bottom:var(--s-3);padding:6px 16px 6px 12px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-line)}
.typed-line{margin:var(--s-3) 0 0;font-size:var(--fs-h3);font-weight:500;line-height:1.3;min-height:calc(2 * 1.3em)}
.typed-line .t{font-family:var(--font-head);font-weight:var(--fw-head);letter-spacing:-.02em}
.hero p.sub{max-width:52ch;margin:var(--s-3) 0 var(--s-4);color:var(--muted)}
.cta{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.hero .dots{margin-top:var(--s-6)}
.hero .dots li{font-size:var(--fs-label);color:var(--muted)}

/* Browser-Mockup auf Milchglas, davor ein Orb als Lichtquelle */
.mock-wrap{position:relative;isolation:isolate}
.mock-wrap::before{content:"";position:absolute;z-index:-1;width:150%;aspect-ratio:1;left:50%;top:50%;margin:-75% 0 0 -75%;background:var(--grain),var(--orb);background-blend-mode:soft-light,normal;-webkit-mask-image:var(--orb-mask);mask-image:var(--orb-mask);pointer-events:none;animation:drift var(--drift) ease-in-out infinite alternate}
.mock-wrap::after{content:"";position:absolute;z-index:2;width:64px;aspect-ratio:1;left:-52px;top:38%;border-radius:50%;background:var(--pearl);pointer-events:none;animation:drift calc(var(--drift) - 2s) ease-in-out infinite alternate-reverse}
.mock{overflow:hidden;background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--shadow)}
.mock-bar{display:flex;align-items:center;gap:var(--s-1);padding:14px var(--s-3);border-bottom:1px solid var(--hair)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--peach)}
.mock-url{margin-left:var(--s-1);flex:1;font-size:var(--fs-label);line-height:1.8;color:var(--muted);background:var(--milk);border-radius:var(--r-pill);padding:0 var(--s-2)}
.mock-live{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--charcoal);transition:opacity var(--dur) var(--ease)}
.mock-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pearl)}
.js .mock-live{opacity:0}
.js .mock.done .mock-live{opacity:1}
.mock-body{padding:var(--s-3);display:grid;gap:var(--s-3);align-content:start;min-height:320px}
.b{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .b{opacity:0;transform:translateY(12px)}
.js .b.on{opacity:1;transform:none}
.m-nav{display:flex;justify-content:space-between;align-items:center}
.m-logo{width:56px;height:10px;border-radius:var(--r-pill);background:var(--charcoal)}
.m-links{display:flex;gap:var(--s-1)}
.m-links i{width:24px;height:6px;border-radius:var(--r-pill);background:var(--blush)}
.m-hero{display:grid;gap:var(--s-1);padding-block:var(--s-2)}
.m-hero .l1{height:16px;width:78%;border-radius:var(--r-pill);background:var(--charcoal)}
.m-hero .l1.s{width:52%}
.m-hero .l2{height:6px;width:64%;border-radius:var(--r-pill);background:var(--blush)}
.m-hero .row{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-1)}
.m-btn{height:24px;width:80px;border-radius:var(--r-pill);background:var(--sunrise)}
.m-num{font-family:var(--font-head);font-weight:var(--fw-display);font-size:26px;line-height:1;letter-spacing:var(--track-head);color:var(--charcoal)}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.m-cards .b{position:relative;height:72px;background:var(--milk);border:1px solid var(--hair);border-radius:var(--r-sm)}
.m-cards .b::before{content:"";position:absolute;left:var(--s-1);top:var(--s-1);width:14px;height:14px;border-radius:50%;background:var(--pearl)}
.m-cards .b::after{content:"";position:absolute;left:var(--s-1);right:var(--s-1);bottom:var(--s-1);height:6px;border-radius:var(--r-pill);background:var(--blush)}
.m-foot{height:16px;border-radius:var(--r-sm);background:var(--blush)}
.timer{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.timer .label{white-space:nowrap;min-width:9ch}
.timer .track{position:relative;flex:1;height:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--charcoal) 12%,transparent)}
.timer .fill{position:absolute;left:0;top:0;height:6px;border-radius:var(--r-pill);width:calc(var(--hp,1) * 100%);background:var(--sunrise)}
.timer .fill::after{content:"";position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--pearl)}

/* Fachbegriffe-Leiste: Milchglas-Pills */
.strip{padding-block:0}
.strip .dots{justify-content:center;gap:var(--s-1)}
.strip .dots li{padding:8px 18px 8px 14px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-line);font-size:var(--fs-label);font-weight:500}

/* Sektionen */
section{padding-block:var(--section-y);scroll-margin-top:var(--s-8)}
.kicker{display:block;margin-bottom:var(--s-2)}
.head{margin-bottom:var(--s-8)}
.lead{font-size:var(--fs-lead);color:var(--muted);max-width:56ch;margin:var(--s-2) 0 0}
.stats-sec{padding-block:0 var(--section-y)}

/* Zahlen als Helden: groß, leicht, Charcoal (Glow ist nie Schriftfarbe) */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{padding:var(--s-6) var(--s-4)}
.stat+.stat{border-left:1px solid var(--hair)}
.stat b{display:block;font-family:var(--font-head);font-weight:var(--fw-display);font-size:var(--fs-display);line-height:1.05;letter-spacing:var(--track-head);color:var(--charcoal)}
.stat b small{font-size:.5em;margin-left:.15em;color:var(--dim)}
.stat .label{display:block;margin-top:var(--s-1)}
@media (max-width:900px){
  .stat{padding:var(--s-4) var(--s-3)}
  .stat b{font-size:var(--fs-h1)}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid var(--hair)}
  .stat b small{color:inherit}
}

/* Karten */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.card{padding:var(--s-4);transition:border-color var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),translate var(--dur-ui) var(--ease)}
.card::before{content:"";position:absolute;top:var(--s-4);right:var(--s-4);width:12px;height:12px;border-radius:50%;background:var(--pearl);transform:scale(0);transition:transform var(--dur-ui) var(--ease)}
.card:hover{border-color:var(--peach);box-shadow:var(--shadow)}
.card:hover::before{transform:scale(1)}
.icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--peach) 45%,var(--milk));color:var(--charcoal);margin-bottom:var(--s-3);transition:background var(--dur-ui) var(--ease)}
.card:hover .icon{background:var(--sunrise)}
.card h3{margin-bottom:var(--s-1)}
.card p{margin:0;color:var(--muted)}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gutter)}
.services .card{grid-column:span 4}
.services .feat{--muted:var(--charcoal);grid-column:span 8;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:var(--s-6);overflow:hidden;background:linear-gradient(135deg,var(--peach) 0%,var(--blush) 100%);border-color:transparent}
.feat h3{font-size:var(--fs-h2);font-weight:var(--fw-display)}
.feat>*{position:relative}
.feat::before{display:none}
.feat:hover .icon{background:var(--milk)}
.feat .wm{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.feat .wm span{position:absolute;right:var(--s-3);bottom:-.16em;font-family:var(--font-head);font-weight:200;font-size:clamp(180px,26vw,320px);line-height:1;letter-spacing:var(--track-head);color:color-mix(in srgb,var(--milk) 55%,transparent);user-select:none}
.feat .icon{background:var(--milk)}
.feat p{max-width:48ch}
.feat .dots{margin:var(--s-4) 0}
.feat .dots li{font-weight:500}
.tag{display:inline-flex;align-items:center;gap:var(--s-1);align-self:flex-start;margin-bottom:var(--s-3);padding:6px 16px 6px 12px;border-radius:var(--r-pill);background:var(--milk);border:1px solid var(--hair);font-size:var(--fs-label);font-weight:500;color:var(--charcoal)}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pearl)}

/* Ablauf: Milk-Panel */
.process{padding:var(--s-8);background:var(--milk);border:1px solid var(--hair);border-radius:var(--r-lg)}
.process aside{position:sticky;top:var(--s-12);align-self:start}
.tl-count{display:flex;align-items:baseline;gap:var(--s-1);margin-top:var(--s-6)}
.tl-count b{font-family:var(--font-head);font-weight:var(--fw-display);font-size:var(--fs-display);line-height:1;letter-spacing:var(--track-head);color:var(--charcoal)}
.timeline{position:relative;list-style:none;margin:0;padding:0}
.tl-line{position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:var(--r-pill);background:var(--line)}
.tl-line i{position:relative;display:block;width:2px;height:calc(var(--tp,0) * 100%);border-radius:var(--r-pill);background:var(--sunrise)}
.tl-line i::after{content:"";position:absolute;left:-7px;bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--pearl)}
.step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--s-3);padding-bottom:var(--s-6)}
.step:last-child{padding-bottom:0}
.step .n{position:relative;z-index:1;width:40px;height:40px;display:grid;place-items:center;background:var(--milk);border:1px solid var(--hair);border-radius:50%;font-size:14px;font-weight:500;color:var(--muted);transition:background var(--dur-ui) var(--ease),color var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease)}
.step.active .n{background:var(--sunrise);border-color:transparent;color:var(--charcoal)}
.step h3{margin:6px 0 var(--s-1);transition:color var(--dur-ui) var(--ease)}
.step:not(.active) h3{color:var(--muted)}
.step p{margin:0;color:var(--muted)}
.step .tag{margin:var(--s-2) 0 0;background:color-mix(in srgb,var(--peach) 40%,var(--milk))}

/* Referenzen */
.quote{display:flex;flex-direction:column;gap:var(--s-3);min-height:240px}
.quote>svg{width:32px;height:32px;fill:var(--peach);stroke:none}
.quote p{margin:0;color:var(--fg)}
.who{display:flex;align-items:center;gap:var(--s-2);margin-top:auto}
.avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:var(--fs-label);font-weight:500;background:var(--peach);color:var(--charcoal)}
.who strong{font-weight:500;display:block;line-height:1.3}
.who .label{display:block}
.ph{font-size:.9em;color:var(--muted);background:color-mix(in srgb,var(--peach) 35%,transparent);padding:1px 10px;border-radius:var(--r-pill)}

/* Kontakt: die dunkle Karte (einmal pro Seite), Orb als Lichtquelle */
.contact-sec{padding-block:0 var(--section-y)}
.contact-sec .wrap{position:relative;isolation:isolate;overflow:hidden;padding:var(--s-8);border-radius:var(--r-dark);align-items:center}
.contact-sec .wrap::before{content:"";position:absolute;z-index:-1;width:min(780px,110%);aspect-ratio:1;right:-24%;bottom:-66%;background:var(--orb);pointer-events:none;animation:drift var(--drift) ease-in-out infinite alternate}
.contact-sec .wrap::after{content:"";position:absolute;z-index:-1;width:72px;aspect-ratio:1;right:14%;top:44px;border-radius:50%;background:var(--pearl);pointer-events:none;animation:drift calc(var(--drift) - 2s) ease-in-out infinite alternate-reverse}
.contact-sec h2{font-size:var(--fs-h1)}
.contact-sec .cta{margin-top:var(--s-4)}
.contact{display:grid;gap:var(--s-2)}
.contact a,.contact div{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);border-radius:var(--r-lg);background:color-mix(in srgb,var(--charcoal) 74%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));text-decoration:none;transition:background var(--dur-ui) var(--ease)}
.contact a:hover{background:color-mix(in srgb,var(--charcoal) 58%,transparent)}
.contact svg{width:48px;height:48px;padding:12px;border-radius:50%;background:color-mix(in srgb,var(--milk) 12%,transparent);color:var(--milk)}
.contact .label{display:block;color:var(--muted)}
.contact strong{font-weight:500;overflow-wrap:anywhere}

/* Rechtliche Seiten */
.legal{padding-block:var(--s-8) var(--s-12)}
.legal .wrap{max-width:800px;padding:var(--s-8);background:var(--milk);border:1px solid var(--hair);border-radius:var(--r-lg)}
.legal h1{margin-bottom:var(--s-4)}
.legal h2{font-size:var(--fs-h3);font-weight:var(--fw-head);margin:var(--s-6) 0 var(--s-1)}
.legal p{color:var(--muted);margin:0 0 var(--s-2)}
.legal h3{font-size:var(--fs-lead);margin:var(--s-4) 0 var(--s-1)}
.legal ul{list-style:none;margin:0 0 var(--s-2);padding:0;color:var(--muted)}
.legal li{position:relative;padding-left:var(--s-3);margin-bottom:6px}
.legal li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--pearl)}
.legal a{overflow-wrap:anywhere}
.legal a{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:4px}

/* Footer */
footer{padding-block:var(--s-6)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.foot .logo svg{height:22px}
.foot .logo span{font-size:24px}
.foot .label{color:var(--muted)}
.foot nav ul{gap:var(--s-3)}
.foot nav a{font-size:14px;font-weight:500;color:var(--muted);text-underline-offset:5px}
.foot nav a:hover{color:var(--fg);text-decoration:underline}

@media (max-width:900px){
  .services{grid-template-columns:1fr}
  .services .card,.services .feat{grid-column:auto;grid-row:auto}
  .cards{grid-template-columns:1fr}
  .process{padding:var(--s-6) var(--s-4)}
  .process aside{position:static;margin-bottom:var(--s-4)}
  .mock-wrap{max-width:560px}
  .mock-wrap::after{left:-20px;width:56px}
  .contact-sec .wrap::after{display:none}
  .contact-sec .wrap{padding:var(--s-6) var(--s-4)}
  .legal .wrap{padding:var(--s-6) var(--s-4)}
}
@media (max-width:900px){
  .burger{display:grid}
  .nav>.btn{display:none}
  .nav{height:64px;padding-left:var(--s-3)}
  .nav-cta{display:block}
  header nav{position:absolute;top:calc(100% + 8px);left:0;right:0;background:color-mix(in srgb,var(--milk) 97%,transparent);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--shadow);pointer-events:auto;display:none}
  header nav.open{display:block}
  header nav ul{flex-direction:column;gap:0;padding:var(--s-1)}
  header nav a:not(.btn){padding:14px var(--s-2)}
  header nav .nav-cta a{display:inline-flex;margin:var(--s-1) 0 var(--s-1) var(--s-1)}
}
@media (max-width:640px){
  .nav{padding-left:var(--s-2)}
  .hero{padding-top:var(--s-6)}
  .services .feat{padding:var(--s-4)}
  .process{padding:var(--s-4) var(--s-3)}
  .contact-sec .wrap{padding:var(--s-4) var(--s-3)}
  .legal .wrap{padding:var(--s-4) var(--s-3)}
  .foot{flex-direction:column;align-items:flex-start}
  .mock-wrap::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js [data-reveal]{opacity:1;translate:0 0}
  .js .b{opacity:1;transform:none}
  .js .mock-live{opacity:1}
}