/* ==========================================================================
   Unmatched Media · Design System v3
   Hell und warm. Kachel-Raster als Markenzeichen, Gold als Leitfarbe,
   schwarze Buttons, UI-Illustrationen statt Stockfotos.
   ========================================================================== */

:root{
  --ink:#171717;
  --ink-2:#2b2e33;
  --muted:#6b6f75;
  --muted-2:#9a9ea4;
  --line:#ebe9e4;
  --line-soft:#f3f1ec;
  --bg:#ffffff;
  --cream:#fafaf8;
  --cream-2:#f1f0ec;
  --bg-3:#f4f3ef;

  --gold:#b8891a;
  --gold-2:#d9ad3c;
  --gold-600:#94700f;
  --gold-soft:#fbf1d6;
  --gold-line:#efdcaa;
  --gold-bright:#e9cf7a;
  --gold-grad:#f0d27f;   /* Gold-Fläche, bewusst ohne Verlauf */
  --gold-text:#c9971f;   /* Gold als Schrift auf Weiß */

  --green:#0e7c5a;
  --green-soft:#e4f4ec;
  --red:#b4402f;
  --red-soft:#fdeeeb;

  --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  --sh-sm:0 1px 2px rgba(23,23,23,.04);
  --sh-md:0 2px 10px rgba(23,23,23,.05);
  --sh-lg:0 22px 50px -26px rgba(23,23,23,.22);
  --sh-xl:0 44px 90px -40px rgba(23,23,23,.32);
  --sh-cta:0 12px 30px -16px rgba(23,23,23,.55);

  --tile-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' rx='8' fill='%23f7f6f2' stroke='%23eeece6'/%3E%3C/svg%3E");
  --tile-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' rx='8' fill='%23f5f5f2' stroke='%23ecebe7'/%3E%3C/svg%3E");
  --tile-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' rx='8' fill='%231c1c1c' stroke='%23252525'/%3E%3C/svg%3E");
  /* Dunkelgrün für Ergebnisse, Ablauf, Abschluss & Footer */
  --green-bg:#03170a;
  --tile-green:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' rx='8' fill='%23061f0f' stroke='%230b2915'/%3E%3C/svg%3E");

  --wrap:1180px;
  --bar-h:40px;
  --nav-inner:78px;
  --nav-h:calc(var(--nav-inner) + var(--bar-h));
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* -------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; font-family:var(--font-body); font-size:17px; line-height:1.65;
  color:var(--ink-2); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.08; margin:0 0 .5em; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold-soft); color:var(--ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }

/* -------------------------------------------------- Layout */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; position:relative; z-index:1; }
.section{ position:relative; padding:88px 0; overflow:hidden; }
.section-cream{ background:linear-gradient(180deg,#fff 0,var(--cream) 88px,var(--cream) calc(100% - 88px),#fff 100%); }
.center{ text-align:center; }
@media (max-width:760px){ .section{ padding:64px 0; }}

/* -------------------------------------------------- Kachel-Raster (Markenzeichen) */
.tiles{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-image:var(--tile-light); background-size:40px 40px; background-position:0 0;
}
.section-cream .tiles:not(.tiles--dark){ background-image:var(--tile-cream); }
.tiles--hero{
  -webkit-mask-image:radial-gradient(ellipse 85% 72% at 50% 0%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 85% 72% at 50% 0%, #000 25%, transparent 78%);
}
.tiles--edges{
  /* nur an den Seitenrändern sichtbar und oben/unten weich ausgeblendet,
     damit die Sektionen ohne harte Kante ineinander übergehen */
  opacity:.7;
  -webkit-mask-image:
    linear-gradient(90deg,#000 0,#000 5%,transparent 22%,transparent 78%,#000 95%,#000 100%),
    linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,#000 0,#000 5%,transparent 22%,transparent 78%,#000 95%,#000 100%),
    linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-composite:intersect;
}
.tiles--dark{
  background-image:var(--tile-dark);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 50% 0%, #000 20%, transparent 80%);
  mask-image:radial-gradient(ellipse 80% 90% at 50% 0%, #000 20%, transparent 80%);
}
.acc{
  position:absolute; width:36px; height:36px; border-radius:8px; opacity:0;
  animation:acc 8s ease-in-out infinite; animation-delay:var(--dl,0s);
  display:grid; place-items:center;
}
.acc svg{ width:16px; height:16px; }
.acc--soft{ background:#ebeae5; border:1px solid #e2e0da; }
.acc--gold{ background:#e4e2dc; border:1px solid #dad8d1; }
.acc--icon{ background:#fff; border:1px solid #e9e7e2; color:#a3a39d; box-shadow:0 6px 14px -8px rgba(23,23,23,.25); }
.tiles--dark .acc--soft{ background:#202020; border-color:#2a2a2a; }
.tiles--dark .acc--gold{ background:#262626; border-color:#303030; }
.tiles--dark .acc--icon{ background:#1f1f1f; border-color:#2e2e2e; color:#77776f; box-shadow:none; }
@keyframes acc{ 0%,100%{ opacity:0; transform:scale(.8); } 18%,72%{ opacity:1; transform:none; } }

/* -------------------------------------------------- Typo */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.h1{ font-size:clamp(2.55rem,6vw,4.4rem); letter-spacing:-.035em; line-height:1.04; }
.h2{ font-size:clamp(1.95rem,3.6vw,2.85rem); letter-spacing:-.03em; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--muted); max-width:62ch; }
.center .lead{ margin-inline:auto; }
.gold{ color:var(--gold-text); }
.head{ margin-bottom:56px; position:relative; z-index:1; }
.head .lead{ margin-bottom:0; }
@media (max-width:760px){ .head{ margin-bottom:40px; }}

/* -------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1.15;
  padding:16px 26px; border-radius:12px; border:1px solid transparent; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:17px; height:17px; flex:none; transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-dark{ background:#0f0a0a; color:#fff; box-shadow:var(--sh-cta); }
.btn-dark svg{ color:var(--gold-bright); }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-gold{ background:var(--gold-grad); color:#1d1402; box-shadow:0 12px 30px -14px rgba(168,120,15,.6); }
.btn-lg{ padding:18px 30px; font-size:17px; }
.btn-sm{ padding:11px 18px; font-size:14.5px; border-radius:10px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.center .btn-row{ justify-content:center; }
@media (max-width:560px){ .btn-row .btn{ width:100%; white-space:normal; text-align:center; }}

/* -------------------------------------------------- Kleinteile */
.badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink-2);
  padding:7px 14px 7px 8px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--gold-line); box-shadow:0 6px 16px -10px rgba(184,137,26,.45);
}
.badge__ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--gold-grad); color:#3a2a05; }
.badge__ic svg{ width:12px; height:12px; }
.badge b{ color:var(--ink); font-weight:700; }
.badge--plain{ display:inline-block; padding:0; background:none; border:0; box-shadow:none; font-size:14.5px; font-weight:500; color:var(--muted); }
.badge--plain b{ color:var(--gold-text); font-weight:700; }
.final .badge--plain b{ color:var(--gold-bright); }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--ink-2); padding:6px 12px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); }
.tag--gold{ background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold-600); }
.check{ display:flex; gap:11px; align-items:flex-start; }
.check svg{ flex:none; width:20px; height:20px; margin-top:2px; padding:4px; border-radius:50%; background:var(--gold-grad); color:#3a2a05; }
.ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--gold-grad); color:#3a2a05; box-shadow:0 10px 22px -12px rgba(168,120,15,.55);
}
.ic svg{ width:20px; height:20px; }
.stars{ color:var(--gold-2); letter-spacing:1.5px; font-size:13px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); }
.search{ display:flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; font-size:13px; color:var(--ink-2); }
.search svg{ width:13px; height:13px; color:var(--muted-2); }

/* -------------------------------------------------- Navigation */
.nav{ position:fixed; inset:var(--bar-h) 0 auto; z-index:100; height:var(--nav-inner); display:flex; align-items:center; border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.nav.is-scrolled, .nav.is-open{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--line); }
.nav .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; max-width:1320px; }
.logo{ display:flex; align-items:center; gap:10px; justify-self:start; }
.logo img{ height:34px; width:auto; filter:saturate(1.35) brightness(.86); }
.logo span{ font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.nav-links{ display:flex; align-items:center; gap:2px; justify-self:center; }
.nav-links a{ font-size:15px; font-weight:550; color:var(--muted); white-space:nowrap; padding:9px 14px; border-radius:var(--r-pill); transition:color .16s, background .16s; }
.nav-links a:hover{ color:var(--ink); background:var(--gold-soft); }
.nav-cta{ justify-self:end; display:flex; align-items:center; gap:10px; }
.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; flex-direction:column; align-items:center; justify-content:center; }
.burger span{ display:block; width:18px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.burger span + span{ margin-top:5px; }
.nav.is-open .burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2){ opacity:0; }
.nav.is-open .burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
.mnav{ position:fixed; inset:var(--nav-h) 0 auto; z-index:99; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-lg); padding:10px 24px 24px; display:none; }
.nav.is-open + .mnav{ display:block; }
.mnav a:not(.btn){ display:block; padding:14px 2px; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); border-bottom:1px solid var(--line-soft); }
.mnav .btn{ width:100%; margin-top:18px; }
@media (max-width:960px){ .nav-links, .nav-cta .btn{ display:none; } .nav .wrap{ grid-template-columns:1fr auto; } .burger{ display:flex; }}
@media (max-width:560px){ .logo img{ height:30px; } .logo span{ font-size:16.5px; }}

/* -------------------------------------------------- Hero */
.hero{ position:relative; overflow-x:clip; overflow-y:visible; padding:calc(var(--nav-h) + 84px) 0 40px; }
.hero::after{ content:""; position:absolute; left:50%; top:-160px; width:900px; height:520px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(233,207,122,.08), transparent 72%); pointer-events:none; }
.hero-inner{ text-align:center; max-width:980px; margin:0 auto; position:relative; z-index:1; }
.hero-title{ margin:22px 0 22px; }
.hero-sub{ font-size:clamp(1.06rem,1.55vw,1.22rem); color:var(--muted); max-width:640px; margin:0 auto 34px; }
.rotator{ display:inline-grid; vertical-align:bottom; overflow:hidden; clip-path:inset(0 -6px); padding-bottom:.1em; margin-bottom:-.1em; transition:width .5s var(--ease); }
.rotator > span{ grid-area:1/1; justify-self:start; white-space:nowrap; transform:translateY(110%); opacity:0; transition:transform .7s var(--ease), opacity .5s;
  color:var(--gold-text); }
.rotator > span.is-on{ transform:none; opacity:1; }
.rotator > span.is-out{ transform:translateY(-110%); opacity:0; }
/* Buchstaben einzeln: steigen von unten auf, alte fliegen nach oben raus */
.rotator.is-split > span, .rotator.is-split > span.is-out{ transform:none; opacity:1; transition:none; }
.rotator .ch{ display:inline-block; transform:translateY(105%) rotate(8deg); opacity:0; filter:blur(6px); transition:none; }
.rotator > span.is-on .ch{ transform:none; opacity:1; filter:blur(0);
  transition:transform .6s cubic-bezier(.2,1.3,.35,1), opacity .35s ease, filter .45s ease; transition-delay:calc(var(--c) * 32ms + 170ms); }
.rotator > span.is-out .ch{ transform:translateY(-105%) rotate(-6deg); opacity:0; filter:blur(6px);
  transition:transform .4s cubic-bezier(.5,0,.75,0), opacity .3s ease .08s, filter .3s ease; transition-delay:calc(var(--c) * 20ms); }
.proof{ display:inline-flex; align-items:center; gap:12px; margin-top:28px; }
.faces{ display:flex; flex:none; }
.faces img{ width:34px; height:34px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(23,23,23,.15); object-fit:cover; }
.faces img + img{ margin-left:-10px; }
.proof__tx{ text-align:left; line-height:1.3; font-size:14px; color:var(--muted); }
.proof__tx b{ color:var(--ink); font-weight:600; }
@media (max-width:760px){ .hero{ padding-top:calc(var(--nav-h) + 48px); }}
@media (max-width:560px){ .proof{ flex-direction:column; gap:8px; } .proof__tx{ text-align:center; } .badge__more{ display:none; }}

/* Showreel-Video im Hero */
.showreel{ position:relative; max-width:980px; margin:64px auto 0; z-index:1; }
.showreel__glow{ position:absolute; inset:10% 2% -8%; background:radial-gradient(closest-side, rgba(227,190,90,.28), transparent 72%); filter:blur(40px); }
.showreel__frame{
  position:relative; padding:10px; border-radius:28px;
  background:rgba(255,255,255,.75); border:1px solid var(--gold-line);
  box-shadow:0 60px 110px -50px rgba(23,23,23,.45), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.showreel .video{ border-radius:20px; }
.showreel__cap{ display:flex; justify-content:center; align-items:center; gap:10px; margin:22px 0 0; font-size:14.5px; color:var(--muted); }
.showreel__cap b{ color:var(--ink); font-weight:600; }
@media (max-width:560px){ .showreel{ margin-top:44px; } .showreel__frame{ padding:6px; border-radius:18px; } .showreel .video{ border-radius:13px; }}

/* -------------------------------------------------- Video */
.video{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#111; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; filter:brightness(.55); }
.video__play{ position:absolute; inset:0; display:grid; place-items:center; }
.video__play span{ display:grid; place-items:center; width:78px; height:78px; border-radius:50%; background:var(--gold-grad); color:#1d1402; box-shadow:0 0 0 10px rgba(233,207,122,.22), 0 20px 40px -12px rgba(0,0,0,.6); transition:transform .25s var(--ease), box-shadow .25s; }
.video__play span svg{ width:26px; height:26px; margin-left:4px; }
.video__play:hover span{ transform:scale(1.07); box-shadow:0 0 0 16px rgba(233,207,122,.18), 0 20px 40px -12px rgba(0,0,0,.6); }
.video__label{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.95); font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--ink); pointer-events:none; }
.video__sound{ position:absolute; left:16px; top:16px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px 0 12px; border-radius:var(--r-pill); background:rgba(15,10,10,.72); color:#fff; font-family:var(--font-display); font-size:13.5px; font-weight:700; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s; }
.video__sound:hover{ background:rgba(15,10,10,.9); }
.video__sound svg{ width:16px; height:16px; color:var(--gold-bright); }

/* -------------------------------------------------- Logos */
.logos{ padding:40px 0 72px; position:relative; }
.logos__label{ text-align:center; font-size:14px; color:var(--muted); margin-bottom:28px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee__group{ display:flex; align-items:center; gap:64px; padding-right:64px; }
.marquee__group img{ height:30px; width:auto; opacity:.45; }
.marquee__group img.tall{ height:42px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* -------------------------------------------------- Browser-Rahmen */
.browser{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-xl); }
.browser__bar{ display:flex; align-items:center; gap:14px; height:42px; padding:0 16px; border-bottom:1px solid var(--line); background:#fff; }
.browser__dots{ display:flex; gap:6px; }
.browser__dots i{ width:10px; height:10px; border-radius:50%; background:#e7e5e0; }
.browser__dots i:nth-child(1){ background:#f2b8ae; } .browser__dots i:nth-child(2){ background:#f3dca0; } .browser__dots i:nth-child(3){ background:#b9dfc8; }
.browser__url{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 12px; border-radius:var(--r-pill); background:var(--bg-3); font-size:12.5px; color:var(--muted); min-width:0; }
.browser__url svg{ width:11px; height:11px; }

/* -------------------------------------------------- Der Unterschied (Vergleich) */
.versus{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.08fr; gap:28px; align-items:center; max-width:1040px; margin:0 auto; }
.vcard{ position:relative; overflow:hidden; border-radius:24px; padding:34px 34px 0; display:flex; flex-direction:column; }
.vcard > :not(.tiles){ position:relative; z-index:1; }
.vcard__label{ display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:99px; margin-bottom:14px; }
.vcard h3{ font-size:1.5rem; margin:0 0 22px; letter-spacing:-.02em; }
.vcard__list{ display:grid; }
.vcard__list li{ display:flex; gap:14px; align-items:flex-start; padding:15px 0; font-size:15.5px; line-height:1.45; }
.vcard__foot{ display:flex; align-items:center; gap:10px; margin:10px -34px 0; padding:18px 34px; font-family:var(--font-display); font-weight:700; font-size:15px; }
.vcard__foot svg{ width:18px; height:18px; }

.vcard--old{ background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.vcard--old .vcard__label{ background:var(--bg-3); color:var(--muted); }
.vcard--old h3{ color:#55585d; }
.vcard--old .vcard__list li{ color:var(--muted); }
.vcard--old .vcard__list li + li{ border-top:1px solid var(--line-soft); }
.vcard--old .vcard__foot{ background:#f7f6f3; border-top:1px solid var(--line); color:var(--muted); }
.x{ position:relative; flex:none; width:22px; height:22px; border-radius:50%; background:var(--red-soft); margin-top:1px; }
.x::before, .x::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:1.8px; border-radius:2px; background:var(--red); transform:translate(-50%,-50%) rotate(45deg); }
.x::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.vcard--new .tiles--dark{ opacity:.8; }
.vcard--new{ background:#141414; color:#d8d8d3; padding-top:40px; box-shadow:0 50px 100px -40px rgba(23,23,23,.55); }
.vcard--new::before{ content:""; position:absolute; right:-30%; top:-40%; width:90%; height:90%; background:radial-gradient(closest-side, rgba(227,197,103,.16), transparent); pointer-events:none; }
.vcard--new .vcard__label{ background:rgba(233,207,122,.12); color:var(--gold-bright); border:1px solid rgba(233,207,122,.25); }
.vcard--new h3{ color:#fff; font-size:1.7rem; }
.vcard--new .vcard__list li{ color:#e6e6e1; }
.vcard--new .vcard__list li + li{ border-top:1px solid rgba(255,255,255,.08); }
.ok{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--gold-grad); color:#1d1402; margin-top:1px; }
.ok svg{ width:12px; height:12px; }
.vcard--new .vcard__foot{ background:rgba(240,210,127,.1); border-top:1px solid rgba(233,207,122,.2); color:var(--gold-bright); padding-bottom:22px; }

.versus__vs{ position:absolute; left:calc(48% - 2px); top:50%; z-index:2; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lg); font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); }

@media (max-width:860px){
  .versus{ grid-template-columns:1fr; gap:40px; }
  .versus__vs{ position:relative; left:auto; top:auto; transform:none; justify-self:center; margin:-54px 0; }
  .vcard{ padding:28px 22px 0; }
  .vcard__foot{ margin:10px -22px 0; padding:16px 22px; }
  .vcard--new{ padding-top:30px; }}

/* -------------------------------------------------- Leistungen */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; position:relative; z-index:1; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; }}
.svc{ display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:0; overflow:hidden; box-shadow:var(--sh-lg); }
.svc__visual{ align-self:stretch; }
.svc__visual > .build, .svc__visual > .serp{ flex:1; }
.build{ display:flex; flex-direction:column; }
.build__win{ flex:1; }
.svc__body{ padding:32px 32px 28px; }
.svc__body .ic{ margin-bottom:20px; }
.svc h3{ font-size:1.55rem; margin-bottom:10px; }
.svc p{ color:var(--muted); font-size:15.5px; }
.svc__visual{ position:relative; margin-top:0; display:flex; flex-direction:column; justify-content:flex-start; padding:34px 32px 0; overflow:hidden; background:var(--cream); border-top:1px solid var(--line); }
.svc__visual::before{ content:""; position:absolute; inset:0; background-image:var(--tile-cream); background-size:40px 40px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%); }
.svc__visual > *{ position:relative; }

/* Webdesign: gestaltete Beispielseite + Handy */
.site{ padding:12px 16px; }
.site__nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.site__logo{ display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:11.5px; color:var(--ink); white-space:nowrap; }
.site__logo i{ width:14px; height:14px; border-radius:4px; background:var(--gold-grad); }
.site__links{ display:flex; gap:8px; }
.site__links i{ width:26px; height:5px; border-radius:3px; background:#e8e6e1; }
.site__btn{ padding:5px 9px; border-radius:6px; background:#0f0a0a; color:#fff; font-family:var(--font-display); font-size:9.5px; font-weight:700; white-space:nowrap; }
.site__btn--gold{ background:var(--gold-grad); color:#1d1402; padding:7px 11px; font-size:10px; }
.site__hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:center; }
.site__eyebrow{ display:inline-block; font-family:var(--font-display); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); background:var(--gold-soft); padding:3px 7px; border-radius:99px; margin-bottom:8px; }
.site__h{ font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-bottom:8px; }
.site__h em{ font-style:normal; color:var(--gold); }
.site__p i{ display:block; height:5px; border-radius:3px; background:#ecebe7; margin-bottom:5px; }
.site__p i:last-child{ width:70%; }
.site__cta{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.site__cta .stars{ font-size:9.5px; letter-spacing:.5px; }
.site__img{ position:relative; aspect-ratio:1/1.05; border-radius:10px; background:var(--gold-grad); overflow:hidden; }
.site__img::before{ content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; right:-18%; top:-14%; background:rgba(255,255,255,.28); }
.site__img::after{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:46%; border-radius:12px 12px 0 0; background:rgba(255,255,255,.35); }
.site__badge{ position:absolute; z-index:1; left:8px; top:10px; display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; background:#fff; font-family:var(--font-display); font-size:9px; font-weight:700; color:var(--ink); box-shadow:0 8px 16px -8px rgba(0,0,0,.35); white-space:nowrap; }
.site__badge svg{ width:10px; height:10px; color:var(--green); }
.site__feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.site__feats div{ border:1px solid var(--line); border-radius:8px; padding:8px; }
.site__feats b{ display:block; width:14px; height:14px; border-radius:4px; background:var(--gold-soft); border:1px solid var(--gold-line); margin-bottom:6px; }
.site__feats i{ display:block; height:4px; border-radius:2px; background:#ecebe7; margin-bottom:4px; }

/* Webdesign: Maus baut eine Webseite zusammen */
.build{ position:relative; }
.build__win{ border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; background:#fff; overflow:hidden; box-shadow:0 -14px 44px -26px rgba(23,23,23,.3); }
.build__win .browser__bar{ height:36px; gap:10px; }
.build__win .browser__dots i{ width:9px; height:9px; }
.build__win .browser__url{ height:22px; font-size:11px; }
.build__canvas{ position:relative; display:grid; gap:12px; padding:14px 16px 18px; }
.build__hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:12px; }
.build__copy{ display:grid; gap:10px; align-content:start; }
.bp{ position:relative; border:1.5px dashed #e3e0d8; border-radius:9px; min-height:26px; transition:border-color .3s; }
.bp__in{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:100%; opacity:0; transform:scale(.92); transition:opacity .35s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
.bp.is-on{ border-color:transparent; }
.bp.is-on .bp__in{ opacity:1; transform:none; }
.bp--nav{ height:34px; padding:0 10px; }
.bp--nav .site__logo{ font-size:12px; }
.bp--h{ min-height:48px; padding:4px 6px; }
.bp--h .bp__in{ display:block; font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.bp--h em{ font-style:normal; color:var(--gold-text); }
.bp--p{ height:40px; padding:5px 6px; }
.bp--p .bp__in{ display:grid; grid-template-columns:1fr; justify-content:stretch; gap:6px; align-content:center; }
.bp--p i{ display:block; height:7px; border-radius:4px; background:#e2e0d9; }
.bp--p i:nth-child(2){ width:88%; } .bp--p i:nth-child(3){ width:62%; }
.bp--btn{ height:38px; width:150px; padding:3px; }
.build__btn{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:7px; background:var(--gold-grad); color:#1d1402; font-family:var(--font-display); font-weight:700; font-size:11.5px; transition:transform .15s; }
.build.is-press .build__btn{ transform:scale(.94); }
.bp--img{ padding:3px; }
.bp--img .bp__in{ height:100%; }
.build__photo{ display:block; width:100%; height:100%; min-height:140px; border-radius:8px; background:var(--gold-grad); position:relative; overflow:hidden; }
.build__photo::before{ content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%; right:-14%; top:-16%; background:rgba(255,255,255,.35); }
.build__photo::after{ content:""; position:absolute; left:14%; right:14%; bottom:0; height:44%; border-radius:12px 12px 0 0; background:rgba(255,255,255,.45); }
.build__toast{ position:absolute; right:16px; bottom:14px; display:flex; align-items:center; gap:9px; padding:9px 13px 9px 10px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:0 16px 34px -14px rgba(23,23,23,.35); font-size:11.5px; color:var(--muted); line-height:1.25; opacity:0; transform:translateY(10px); transition:opacity .4s, transform .4s var(--ease); }
.build__toast svg{ width:20px; height:20px; color:var(--green); flex:none; }
.build__toast b{ display:block; font-family:var(--font-display); font-size:12.5px; color:var(--ink); }
.build.is-done .build__toast{ opacity:1; transform:none; }
.build__cursor{ position:absolute; left:0; top:0; z-index:5; width:22px; height:22px; color:#171717; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));
  transition:transform .75s cubic-bezier(.65,0,.35,1); transform:translate(var(--cx,110%),var(--cy,120%)); }
.build.is-press .build__cursor{ scale:.85; }
@media (max-width:560px){ .build__toast{ right:10px; bottom:auto; top:48px; } .bp--h .bp__in{ font-size:15px; } .build__photo{ min-height:120px; } .bp--btn{ width:124px; } .build__btn{ font-size:10.5px; }}

/* Blogs: Artikel klettert bei Google */
.serp{ border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; background:#fff; padding:16px 16px 12px; box-shadow:0 -14px 44px -26px rgba(23,23,23,.3); }
.serp .search{ margin-bottom:10px; }
.serp__list{ position:relative; height:176px; }
.serp__item{ position:absolute; left:0; right:0; height:40px; display:flex; align-items:center; gap:10px; padding:0 10px; border-radius:10px; font-size:13px; color:var(--muted); transition:top .9s var(--ease), background .4s, border-color .4s; border:1px solid transparent; }
.serp__item i{ font-style:normal; width:16px; font-family:var(--font-display); font-weight:700; color:var(--muted-2); }
.serp__item span{ flex:1; height:7px; border-radius:4px; background:var(--bg-3); }
.serp__item--you{ color:var(--ink); font-weight:600; background:#fff; }
.serp__item--you em{ margin-left:auto; font-style:normal; font-size:11px; font-weight:700; color:var(--gold-600); }
.serp__item--you.is-top{ background:var(--gold-soft); border-color:var(--gold-line); }
.serp__item--you.is-top i{ color:var(--gold); }
.serp__ai{ display:flex; align-items:center; gap:8px; margin-top:6px; padding:9px 12px; border-radius:10px; background:#171717; color:#e8e8e4; font-size:12px; }
.serp__ai b{ color:var(--gold-bright); font-weight:700; }
.serp__ai svg{ width:14px; height:14px; color:var(--gold-bright); flex:none; }

/* -------------------------------------------------- Bausteine (Bento) */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; position:relative; z-index:1; }
.tile{ position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:330px; transition:transform .3s var(--ease), box-shadow .3s; }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.tile__tx{ padding:24px 26px 0; position:relative; z-index:1; }
.tile__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tile__num{ font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); padding:3px 9px; border-radius:99px; }
.tile__tx h3{ font-size:1.18rem; margin-bottom:6px; letter-spacing:-.015em; }
.tile__tx p{ font-size:14.5px; color:var(--muted); margin:0; max-width:46ch; }
.tile--3{ grid-column:span 3; } .tile--2{ grid-column:span 2; }
@media (max-width:960px){ .bento{ grid-template-columns:1fr 1fr; } .tile--3{ grid-column:span 2; } .tile--2{ grid-column:span 1; }}
@media (max-width:640px){ .bento{ grid-template-columns:1fr; } .tile--3, .tile--2{ grid-column:auto; } .tile{ min-height:0; }}

.tree{ padding-bottom:26px; text-align:center; }
.node{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:10px; background:#fff; border:1px solid var(--line); font-family:var(--font-display); font-size:12.5px; font-weight:600; color:var(--ink); box-shadow:var(--sh-sm); white-space:nowrap; }
.node--root{ background:#0f0a0a; color:#fff; border-color:#0f0a0a; }
.node--cta{ background:var(--gold-grad); border-color:transparent; color:#1d1402; box-shadow:0 8px 18px -10px rgba(168,120,15,.8); }
.tree__lines{ display:block; width:100%; height:32px; }
.tree__lines path{ fill:none; stroke:#dcd6c8; stroke-width:1.5; stroke-dasharray:4 4; }
.tree__kids{ display:flex; justify-content:space-between; gap:8px; }

/* -------------------------------------------------- Bausteine: animierte Bühnen */
.bento:not(.is-play) .stg, .bento:not(.is-play) .stg *, .bento:not(.is-play) .stg *::before, .bento:not(.is-play) .stg *::after{ animation-play-state:paused !important; }
.tile .stg{ margin-top:auto; }
.stg{ position:relative; height:230px; margin:22px 20px 20px; border-radius:16px; background:#f8f7f4; border:1px solid var(--line-soft); overflow:hidden; }
.stg::before{ content:""; position:absolute; inset:0; background-image:var(--tile-light); background-size:32px 32px; opacity:.7;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%); mask-image:radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, #000 100%); }
.stg > *{ position:absolute; }
.cur{ width:22px; height:22px; color:#171717; z-index:6; filter:drop-shadow(0 3px 4px rgba(0,0,0,.28)); pointer-events:none; }
.gold-pill{ display:inline-flex; }

/* 01 Seitenstruktur: Knoten erscheinen, Besucher läuft zur Anfrage */
.s1__lines{ inset:0; width:100%; height:100%; }
.s1__lines path{ fill:none; stroke:#d8d3c6; stroke-width:1.6; stroke-dasharray:100; stroke-dashoffset:100; vector-effect:non-scaling-stroke; animation:s1line 8s infinite .35s; }
@keyframes s1line{ 0%{ stroke-dashoffset:100; opacity:1; } 12%,88%{ stroke-dashoffset:0; opacity:1; } 95%,100%{ stroke-dashoffset:0; opacity:0; } }
.nd{ left:50%; top:72%; padding:8px 14px; border-radius:10px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 18px -12px rgba(23,23,23,.35);
  font-family:var(--font-display); font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap;
  opacity:0; transform:translate(-50%,-50%) scale(.6); animation:s1pop 8s infinite var(--t); }
.nd--root{ top:27.8%; background:#0f0a0a; color:#fff; border-color:#0f0a0a; }
.nd--cta{ background:var(--gold-grad); border-color:transparent; color:#1d1402; animation:s1pop 8s infinite var(--t), s1glow 8s infinite; }
@keyframes s1pop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); } 6%,86%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 94%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.9); } }
@keyframes s1glow{ 0%,70%{ box-shadow:0 8px 18px -12px rgba(23,23,23,.35); } 74%,84%{ box-shadow:0 0 0 7px rgba(240,210,127,.35), 0 10px 22px -10px rgba(168,120,15,.6); } 92%,100%{ box-shadow:0 8px 18px -12px rgba(23,23,23,.35); } }

/* Cursor fährt über die Farbfelder (Mitte Panel = 82,5 %, Felder je 25px auseinander) */

/* 03 Texte: Überschrift wird getippt, Kernaussage markiert */
.s3__card{ left:7%; right:7%; top:13%; bottom:13%; padding:14px 16px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -20px rgba(23,23,23,.35); }
.s3__chip{ display:inline-block; font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--bg-3); padding:3px 8px; border-radius:99px; }
.s3__h{ margin:10px 0 10px; min-height:58px; font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.s3__mark{ color:inherit; background-color:transparent; background-image:linear-gradient(rgba(240,210,127,.6),rgba(240,210,127,.6)); background-repeat:no-repeat; background-position:0 90%; background-size:0% 55%; transition:background-size .8s var(--ease); }
.s3.is-mark .s3__mark{ background-size:100% 55%; }
.s3__caret{ display:inline-block; width:2px; height:1.05em; margin-left:1px; vertical-align:-2px; background:var(--gold-text); animation:caret 1s steps(1) infinite; }
.s3.is-mark .s3__caret{ opacity:0; }
@keyframes caret{ 50%{ opacity:0; } }

.s3__ok{ position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:99px; background:var(--green-soft); color:var(--green);
  font-family:var(--font-display); font-size:11px; font-weight:700; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s var(--ease); }
.s3__ok svg{ width:14px; height:14px; padding:3px; border-radius:50%; background:var(--green); color:#fff; }
.s3.is-ok .s3__ok{ opacity:1; transform:none; }

 

/* 05 Lokal: Pin fällt auf die Karte, Eintrag schiebt sich hoch */
.stg.s5{ background:#f1efe8; }
.s5::before{ display:none; }
.s5__map{ inset:0; width:100%; height:100%; }
.s5__map path{ fill:none; stroke:#fff; stroke-width:12; stroke-linecap:round; }
.s5__map path.thin{ stroke-width:6; }
.s5__map path.park{ fill:#e1eadb; stroke:none; }
.s5__pin{ z-index:3; left:50%; top:22%; width:38px; height:38px; margin-left:-19px; display:grid; place-items:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#0f0a0a;
  box-shadow:0 10px 20px -8px rgba(0,0,0,.5); animation:s5pin 8s infinite; }
.s5__pin svg{ width:18px; height:18px; color:var(--gold-grad); transform:rotate(45deg); }
@keyframes s5pin{ 0%{ opacity:0; transform:translateY(-70px) rotate(-45deg); } 8%{ opacity:1; } 14%{ transform:translateY(0) rotate(-45deg); } 18%{ transform:translateY(-9px) rotate(-45deg); } 22%,90%{ opacity:1; transform:translateY(0) rotate(-45deg); } 96%,100%{ opacity:0; transform:translateY(0) rotate(-45deg); } }
.s5__ring{ z-index:2; left:50%; top:calc(22% + 38px); width:60px; height:22px; margin:-11px 0 0 -30px; border-radius:50%; border:2px solid rgba(201,151,31,.55); opacity:0; animation:s5ring 8s infinite; }
.s5__ring--2{ animation-delay:.9s; }
@keyframes s5ring{ 0%,20%{ opacity:0; transform:scale(.3); } 22%{ opacity:.9; transform:scale(.3); } 38%{ opacity:0; transform:scale(1.9); } 50%{ opacity:0; transform:scale(.3); } 52%{ opacity:.9; transform:scale(.3); } 68%,100%{ opacity:0; transform:scale(1.9); } }
.s5__card{ z-index:4; left:8%; right:8%; bottom:12px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:0 16px 34px -16px rgba(23,23,23,.45); transform:translateY(140%); animation:s5card 8s infinite; }
@keyframes s5card{ 0%,24%{ transform:translateY(140%); } 32%,90%{ transform:none; } 97%,100%{ transform:translateY(140%); } }
.s5__logo{ flex:none; width:34px; height:34px; border-radius:9px; background:var(--gold-grad); }
.s5__tx{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.s5__tx b{ font-family:var(--font-display); font-size:13px; color:var(--ink); }
.s5__tx .stars{ font-size:10.5px; letter-spacing:.5px; }
.s5__tx small{ font-size:10.5px; color:var(--green); font-weight:600; white-space:nowrap; }
.s5__route{ margin-left:auto; flex:none; padding:7px 12px; border-radius:99px; background:#0f0a0a; color:#fff; font-family:var(--font-display); font-size:11px; font-weight:700; }

/* 06 Handy: Seite scrollt, Daumen tippt auf den Button, Anfrage geht raus */
.s6__phone{ left:50%; top:18px; width:156px; height:300px; margin-left:-78px; border-radius:28px; border:7px solid #141414; background:#fff; overflow:hidden; box-shadow:0 24px 44px -20px rgba(23,23,23,.5); }
.s6__notch{ position:absolute; z-index:3; left:50%; top:6px; width:44px; height:12px; margin-left:-22px; border-radius:99px; background:#141414; }
.s6__scr{ position:absolute; left:0; right:0; top:0; padding:30px 12px 12px; display:flex; flex-direction:column; gap:7px; animation:s6scroll 9s infinite; }
@keyframes s6scroll{ 0%,10%{ transform:translateY(0); } 30%,40%{ transform:translateY(-120px); } 55%,100%{ transform:translateY(0); } }
.s6__logo{ display:flex; align-items:center; gap:5px; font-family:var(--font-display); font-size:10px; font-weight:700; color:var(--ink); }
.s6__logo i{ width:10px; height:10px; border-radius:3px; background:var(--gold-grad); }
.s6__h{ margin-top:4px; font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.s6__h em{ font-style:normal; color:var(--gold-text); }
.s6__ln{ display:block; height:5px; border-radius:3px; background:#ecebe7; }
.s6__ln--s{ width:70%; }
.s6__btn{ margin-top:3px; padding:8px 0; text-align:center; border-radius:8px; background:var(--gold-grad); color:#1d1402; font-family:var(--font-display); font-size:10.5px; font-weight:700; animation:s6press 9s infinite; }
@keyframes s6press{ 0%,62%{ transform:none; } 64%{ transform:scale(.94); } 67%,100%{ transform:none; } }
.s6__img{ display:block; height:70px; border-radius:9px; background:var(--gold-grad); opacity:.85; }
.s6__img--2{ background:#efeee9; }
.s6__rev{ display:grid; gap:4px; padding:8px; border-radius:9px; border:1px solid var(--line); }
.s6__rev .stars{ font-size:9.5px; }
.s6__rev i{ display:block; height:4px; border-radius:2px; background:#ecebe7; }
.s6__rev i.s{ width:60%; }
.s6__tap{ z-index:4; left:50%; top:128px; width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%; background:rgba(23,23,23,.25); opacity:0; animation:s6tap 9s infinite; }
@keyframes s6tap{ 0%,61%{ opacity:0; transform:scale(.3); } 63%{ opacity:1; transform:scale(.5); } 72%,100%{ opacity:0; transform:scale(1.8); } }

/* 07 Betreuung: Frage, Tipp-Indikator, Antwort */
.s7__card{ left:50%; top:7%; bottom:7%; width:min(360px,86%); transform:translateX(-50%); padding:12px 14px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -20px rgba(23,23,23,.35); display:flex; flex-direction:column; }
.s7__head{ display:flex; align-items:center; gap:9px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.s7__head img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.s7__head b{ display:block; font-family:var(--font-display); font-size:12.5px; color:var(--ink); line-height:1.2; }
.s7__head small{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--green); font-weight:600; }
.s7__head small::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.s7__msgs{ position:relative; flex:1; margin-top:10px; }
.s7__b{ position:absolute; max-width:72%; padding:8px 11px; border-radius:12px; font-size:12px; line-height:1.35; opacity:0; }
.s7__b--out{ right:0; top:0; background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--ink); border-bottom-right-radius:4px; animation:s7out 8s infinite; }
.s7__b--in{ left:0; bottom:0; white-space:nowrap; display:flex; align-items:center; gap:6px; background:#0f0a0a; color:#fff; border-bottom-left-radius:4px; animation:s7in 8s infinite; }
.s7__b--in svg{ width:14px; height:14px; color:#6fd29b; }
.s7__typing{ position:absolute; left:0; bottom:0; display:flex; gap:4px; padding:9px 11px; border-radius:12px; background:var(--bg-3); opacity:0; animation:s7typ 8s infinite; }
.s7__typing i{ width:6px; height:6px; border-radius:50%; background:#a3a39d; animation:dot 1s infinite; }
.s7__typing i:nth-child(2){ animation-delay:.15s; } .s7__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }
@keyframes s7out{ 0%,4%{ opacity:0; transform:translateY(8px); } 9%,90%{ opacity:1; transform:none; } 96%,100%{ opacity:0; } }
@keyframes s7typ{ 0%,18%{ opacity:0; } 22%,42%{ opacity:1; } 45%,100%{ opacity:0; } }
@keyframes s7in{ 0%,44%{ opacity:0; transform:translateY(8px); } 49%,90%{ opacity:1; transform:none; } 96%,100%{ opacity:0; } }

@media (max-width:640px){
  .nd{ padding:6px 9px; font-size:11px; }
  .s7__b{ max-width:84%; font-size:11.5px; padding:7px 10px; }}
@media (prefers-reduced-motion:reduce){
  .stg *{ animation:none !important; }
  .nd, .s5__pin, .s7__b{ opacity:1 !important; }
  .nd{ transform:translate(-50%,-50%) !important; }
  .s1__lines path{ stroke-dashoffset:0; }
  
  .s5__card{ transform:none; }}

/* 02 Design (aufgeräumt): eine Markenkarte, Farbe wechselt, Button übernimmt sie */
.s2__kit{ left:50%; top:50%; width:min(300px,84%); transform:translate(-50%,-50%); padding:16px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -20px rgba(23,23,23,.35); display:grid; gap:14px; }
.s2__row{ display:flex; align-items:center; gap:12px; }
.s2__aa{ flex:none; width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--bg-3); font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); }
.s2__font b{ display:block; font-family:var(--font-display); font-size:13px; color:var(--ink); }
.s2__font small{ font-size:11.5px; color:var(--muted); }
.s2__sw{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.s2__sw i{ height:26px; border-radius:8px; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; }
.s2__sw .c1{ background:#f0d27f; animation:s2sel1 9s infinite; }
.s2__sw .c2{ background:#0e7c5a; animation:s2sel2 9s infinite; }
.s2__sw .c3{ background:#2f5bd3; animation:s2sel3 9s infinite; }
.s2__sw .c4{ background:#171717; }
.s2__btn{ padding:10px 0; text-align:center; border-radius:9px; font-family:var(--font-display); font-size:12.5px; font-weight:700; animation:s2btn 9s infinite; }
@keyframes s2btn{ 0%,31%{ background:#f0d27f; color:#1d1402; } 35%,64%{ background:#0e7c5a; color:#fff; } 68%,96%{ background:#2f5bd3; color:#fff; } 100%{ background:#f0d27f; color:#1d1402; } }
@keyframes s2sel1{ 0%,31%,98%,100%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #171717; } 33%,96%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; } }
@keyframes s2sel2{ 0%,32%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; } 34%,64%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #171717; } 66%,100%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; } }
@keyframes s2sel3{ 0%,65%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; } 67%,96%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #171717; } 98%,100%{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px transparent; } }

/* 03 Texte (aufgeräumt): Karte mittig, Häkchen unter der Überschrift */
.s3__card{ left:50%; right:auto; top:50%; bottom:auto; width:min(340px,86%); transform:translate(-50%,-50%); }
.s3__h{ min-height:62px; margin:12px 0; }
.s3__ok{ position:static; display:inline-flex; }

/* 04 Speedtest: drei Ringe zählen auf 100 */
.s4__rings{ left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; margin-top:-10px; }
.ring{ position:relative; display:grid; place-items:center; }
.ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.ring__bg{ fill:#fff; stroke:#ebe9e3; stroke-width:7; }
.ring__val{ fill:none; stroke:#0e9f6e; stroke-width:7; stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray 1.6s var(--ease); }
.s4.is-run .ring__val{ stroke-dasharray:100 100; }
.ring b{ position:relative; font-family:var(--font-display); font-weight:700; color:#0b7a55; line-height:1; font-variant-numeric:tabular-nums; }
.ring small{ position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; }
.ring--lg{ width:108px; height:108px; }
.ring--lg b{ font-size:30px; }
.ring--sm{ width:62px; height:62px; }
.ring--sm b{ font-size:17px; }
.ring--sm .ring__val{ transition-delay:.25s; }
@media (max-width:640px){ .ring--lg{ width:104px; height:104px; } .ring--lg b{ font-size:28px; } .ring--sm{ width:62px; height:62px; } .ring--sm b{ font-size:17px; }}

/* 06 Handy: Button wird nach dem Tippen grün */
.s6__btn{ position:relative; overflow:hidden; }
.s6__b1, .s6__b2{ display:block; }
.s6__b2{ position:absolute; inset:0; display:grid; place-items:center; background:#0e7c5a; color:#fff; opacity:0; animation:s6done 9s infinite; }
@keyframes s6done{ 0%,65%{ opacity:0; } 68%,92%{ opacity:1; } 96%,100%{ opacity:0; } }
/* -------------------------------------------------- Dunkler Ergebnis-Block */
.impact{ position:relative; overflow:hidden; background:#141414; border-radius:50px; margin:0 24px; padding:112px 24px; color:#b9b9b4; }
.impact__in{ position:relative; z-index:1; max-width:calc(var(--wrap) - 48px); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.impact__in > *{ position:relative; }
.impact::before{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:120%; background:radial-gradient(closest-side, rgba(227,197,103,.09), transparent); pointer-events:none; }
.impact > :not(.tiles){ position:relative; z-index:1; }
/* Grüne Flächen: Hintergrund, Kacheln und Akzente im selben Farbton */
.is-green{ background:var(--green-bg); }
.is-green .tiles--dark, .final .tiles--dark, .footer .tiles--dark{ background-image:var(--tile-green); }
.is-green .tiles--dark .acc--soft, .final .tiles--dark .acc--soft, .footer .tiles--dark .acc--soft{ background:#0a2614; border-color:#10311c; }
.is-green .tiles--dark .acc--gold, .final .tiles--dark .acc--gold, .footer .tiles--dark .acc--gold{ background:#0d2c18; border-color:#143822; }
/* Footer: Raster nur oben, blendet nach unten weich aus, Inhalt liegt darüber */
.footer .tiles--dark{ -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 75%); mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 15%, transparent 75%); }
.footer > :not(.tiles){ position:relative; z-index:1; }
.impact.is-green .chart__x span, .impact.is-green .impact__stats > div > span{ color:#8a968d; }
.vcard--new.is-green{ box-shadow:0 26px 50px -30px rgba(3,23,10,.45); }

/* Grünes Panel für normale Sektionen, gleiche Form wie die Ergebnisse */
.panel{ position:relative; overflow:hidden; border-radius:50px; margin:0 24px; padding:112px 0; }
.panel::before{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:120%; background:radial-gradient(closest-side, rgba(227,197,103,.09), transparent); pointer-events:none; }
.panel > :not(.tiles){ position:relative; z-index:1; }
.panel .eyebrow{ color:var(--gold-bright); }
.panel h2{ color:#fff; }
.panel h2 .gold{ color:var(--gold-grad); }
.panel .lead{ color:#a3a39e; }
.panel .fund__list{ color:#c9cfca; }
.panel .fund__list b{ color:#fff; }
@media (max-width:960px){ .panel{ padding:72px 0; }}
@media (max-width:760px){ .panel{ margin:0 12px; padding:56px 0; border-radius:32px; }}

/* Förderrechner ohne weiße Fläche: gläsern auf Grün */
.calc.calc--glass{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.calc--glass .calc__head b, .calc--glass .range label b, .calc--glass .calc__row b{ color:#fff; }
.calc--glass .pill-gold{ background:rgba(240,210,127,.1); border-color:rgba(240,210,127,.3); color:var(--gold-bright); }
.calc--glass .seg{ background:rgba(255,255,255,.06); }
.calc--glass .seg button{ color:#a3aba5; }
.calc--glass .seg button[aria-pressed="true"]{ background:var(--gold-grad); color:#1d1402; box-shadow:0 8px 20px -12px rgba(168,120,15,.6); }
.calc--glass .range label, .calc--glass .calc__row{ color:#a3aba5; }
.calc--glass .range input{ background:linear-gradient(90deg, #f0d27f var(--p,40%), rgba(255,255,255,.12) var(--p,40%)); }
.calc--glass .range input::-webkit-slider-thumb{ background:#03170a; border-color:#f0d27f; box-shadow:0 0 0 4px rgba(240,210,127,.15); }
.calc--glass .range input::-moz-range-thumb{ background:#03170a; border-color:#f0d27f; }
.calc--glass .range__ends{ color:#7d877f; }
.calc--glass .calc__row{ border-top-color:rgba(255,255,255,.08); }
.calc--glass .calc__row--minus b{ color:#6fd29b; }
.calc--glass .calc__total{ background:rgba(240,210,127,.08); border-color:rgba(240,210,127,.28); }
.calc--glass .calc__total span{ color:#e6e6e1; }
.calc--glass .calc__total b{ color:var(--gold-grad); }
.impact .eyebrow{ color:var(--gold-bright); }
.impact h2{ color:#fff; }
.impact p{ color:#a3a39e; }
.impact__stats{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:34px; border-top:1px solid rgba(255,255,255,.1); }
.impact__stats > div{ padding:22px 12px 0 0; }
.impact__stats b{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.03em; line-height:1.05; white-space:nowrap; color:var(--gold-grad); }
.impact__stats > div > span{ display:block; margin-top:6px; font-size:13px; color:#8f8f8a; }
.chart{ background:none; border:0; padding:0; }
.chart__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.chart__head b{ font-family:var(--font-display); color:#fff; font-size:15px; }
.chart__head small{ font-size:12px; color:#8f8f8a; }
.chart__bars{ --g:12px; margin-top:28px; position:relative; display:flex; align-items:flex-end; gap:var(--g); height:230px; }
.col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:8px; }
.col b{ font-family:var(--font-display); font-size:13px; font-weight:600; color:#fff; opacity:0; transition:opacity .4s .9s; }
.col i{ width:100%; height:var(--h); border-radius:8px 8px 3px 3px; background:rgba(255,255,255,.12); transform-origin:bottom; transform:scaleY(0); transition:transform 1s var(--ease); }
.col.after i{ background:var(--gold-grad); }
.is-in .col i{ transform:scaleY(1); }
.is-in .col b{ opacity:1; }
.col:nth-child(2) i{ transition-delay:.07s } .col:nth-child(3) i{ transition-delay:.14s } .col:nth-child(4) i{ transition-delay:.21s } .col:nth-child(5) i{ transition-delay:.28s } .col:nth-child(6) i{ transition-delay:.35s } .col:nth-child(7) i{ transition-delay:.42s }
.chart__launch{ position:absolute; top:-8px; bottom:0; width:0; border-left:1.5px dashed rgba(227,197,103,.6); }
.chart__launch span{ position:absolute; top:-10px; left:8px; font-family:var(--font-display); font-size:11.5px; font-weight:700; color:var(--gold-bright); white-space:nowrap; }
.chart__x{ display:flex; gap:12px; margin-top:10px; }
.chart__x span{ flex:1; text-align:center; font-size:11.5px; color:#77776f; }
.chart__note{ margin:14px 0 0; font-size:11.5px; color:#6f6f6a !important; }
@media (max-width:960px){ .impact{ padding:72px 24px; } .impact__in{ grid-template-columns:1fr; gap:40px; }}
@media (max-width:560px){
  .impact{ margin:0 12px; padding:56px 20px; border-radius:32px; }
  .impact__stats{ grid-template-columns:1fr; }
  .impact__stats > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .impact__stats > div > span{ margin:0; text-align:right; }
  .chart__bars{ --g:7px; height:180px; } .chart__x{ gap:7px; } .chart__x span{ font-size:10.5px; }  .col b{ font-size:11.5px; }}

/* -------------------------------------------------- Referenzen: eine ruhige Zeile pro Kunde */
.stories{ position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.story{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:64px; align-items:center; padding:48px 0; }
.story + .story{ border-top:1px solid var(--line); }
/* Breite Variante: Testimonials bekommen mehr Fläche */
.wrap--wide{ max-width:1320px; }
.stories--wide{ max-width:none; }
@media (min-width:1101px){ .stories--wide .story{ gap:80px; padding:56px 0; } .stories--wide .story:first-child{ padding-top:0; } .stories--wide .story:last-child{ padding-bottom:0; }}
.story__points{ display:grid; gap:10px; margin:0 0 26px; font-size:15px; line-height:1.5; color:#3d3d3a; }
.story__points b{ font-weight:600; color:var(--ink); }
/* Text neben dem Video: oben und unten bündig mit dem Video */
@media (min-width:961px){
  .stories--wide .story{ align-items:stretch; }
  .stories--wide .story__video{ align-self:center; }
  .stories--wide .story__body{ display:flex; flex-direction:column; justify-content:space-between; }
  .stories--wide .story__body > *{ margin-top:0; margin-bottom:0; }
  .stories--wide .story__co{ line-height:1; }
}
.story--rev{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.story--rev .story__video{ order:2; }
.story:first-child{ padding-top:0; }
.story:last-child{ padding-bottom:0; }
.story__video{ position:relative; padding:6px; border-radius:22px; background:#fff; border:1px solid var(--gold-line); box-shadow:0 30px 60px -40px rgba(23,23,23,.35); }
.story__video::before{ content:""; display:block; aspect-ratio:16/9; }
.story__video iframe{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); border:0; border-radius:16px; background:#111; }
/* Vorschaubild statt Wistia-Iframe, bis jemand auf Play klickt */
.vlazy{ position:absolute; inset:6px; border-radius:16px; overflow:hidden; background:#111; }
.vlazy .video__poster{ object-position:center; filter:none; }
.vlazy__loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; pointer-events:none; }
.vlazy__loop.is-on{ opacity:1; }
.vlazy .video__play{ z-index:1; }
@media (max-width:760px){ .vlazy{ inset:5px; border-radius:13px; }}
.story__co{ margin:0 0 16px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.story__quote{ margin:0 0 18px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.25; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.story__lead{ margin:0 0 26px; font-size:15.5px; line-height:1.65; color:var(--muted); }
.story__who{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--muted); }
.story__who b{ font-weight:600; color:var(--ink); }
.story__who .stars{ color:#e3b341; letter-spacing:2px; font-size:14px; }
.story__more{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--gold-text); }
.story__more svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.story__more:hover{ color:var(--ink); }
.story__more:hover svg{ transform:translateX(3px); }
.stories__more{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:64px; position:relative; z-index:1; }
.stories__more small{ font-size:14px; color:var(--muted); text-align:center; }
@media (max-width:900px){
  .story{ grid-template-columns:1fr; gap:26px; padding:40px 0; }
  .story--rev{ grid-template-columns:1fr; }
  .story--rev .story__video{ order:0; }
  .story__video{ padding:5px; border-radius:18px; }
  .story__video iframe{ inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:13px; }
  .story__who{ flex-wrap:wrap; gap:6px 12px; }}
/* -------------------------------------------------- Ablauf */
.journey{ position:relative; z-index:1; }
.journey__line{ position:absolute; left:12.5%; right:12.5%; top:21px; height:3px; border-radius:3px; background:#e6e4df; overflow:hidden; }
.journey__line i{ display:block; height:100%; width:0; background:var(--gold-grad); transition:width 2s var(--ease); }
.journey.is-in .journey__line i{ width:100%; }
.journey__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.jstep{ display:flex; flex-direction:column; align-items:center; }
.jstep__dot{ position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:24px; background:#fff; border:2px solid #e6e4df; font-family:var(--font-display); font-weight:700; color:var(--gold); transition:background .5s, color .5s, border-color .5s, box-shadow .5s; }
.journey.is-in .jstep__dot{ background:var(--gold-grad); color:#3a2a05; border-color:transparent; box-shadow:0 0 0 7px rgba(233,207,122,.28); }
.jstep:nth-child(2) .jstep__dot{ transition-delay:.5s } .jstep:nth-child(3) .jstep__dot{ transition-delay:1s } .jstep:nth-child(4) .jstep__dot{ transition-delay:1.5s }
.jstep__card{ width:100%; flex:1; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sh-lg); transition:transform .3s var(--ease); }
.jstep__card:hover{ transform:translateY(-4px); }
.jstep__vis{ position:relative; height:176px; display:grid; place-items:center; background:#f8f7f4; border-bottom:1px solid var(--line); overflow:hidden; }
.jstep__tx{ padding:20px 20px 24px; }
.chip{ display:inline-block; font-family:var(--font-display); font-size:11.5px; font-weight:700; color:var(--gold-600); background:var(--gold-soft); border:1px solid var(--gold-line); padding:4px 10px; border-radius:99px; margin-bottom:12px; }
.jstep .chip{ background:none; border:0; padding:0; margin-bottom:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text); }
.jstep h3{ font-size:1.14rem; margin-bottom:6px; }
.jstep p{ font-size:14.5px; color:var(--muted); margin:0; }

/* Ablauf-Motive: je ein ruhiges, animiertes Element */
.journey:not(.is-play) .jstep__vis *{ animation-play-state:paused !important; }

/* 1 Erstgespräch: eingehender Anruf */
.jcall{ width:196px; padding:12px 12px 12px 14px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 30px -22px rgba(23,23,23,.4); }
.jcall__av{ flex:none; width:32px; height:32px; border-radius:50%; background:#efede8; }
.jcall__tx{ flex:1; display:grid; gap:6px; }
.jcall__tx i{ display:block; height:7px; width:80%; border-radius:4px; background:#e3e0d8; }
.jcall__tx i + i{ width:52%; background:#efede8; }
.jcall__btn{ position:relative; flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#0e9f6e; color:#fff; }
.jcall__btn svg{ position:relative; z-index:1; width:17px; height:17px; animation:jvShake 2.4s ease-in-out infinite; }
.jcall__btn em{ position:absolute; inset:0; border-radius:50%; background:#0e9f6e; opacity:0; animation:jvWave 2.4s ease-out infinite; }
.jcall__btn em + em{ animation-delay:.5s; }
@keyframes jvShake{ 0%,50%,100%{ transform:rotate(0); } 5%,15%,25%,35%{ transform:rotate(-16deg); } 10%,20%,30%,40%{ transform:rotate(16deg); } 45%{ transform:rotate(0); } }
@keyframes jvWave{ 0%{ transform:scale(1); opacity:.35; } 60%,100%{ transform:scale(2); opacity:0; } }

/* 2 + 3 Seite: erst Struktur, dann Design */
.jwf{ width:176px; padding:12px; display:grid; gap:8px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 30px -22px rgba(23,23,23,.4); }
.jwf__nav{ display:flex; gap:4px; }
.jwf__nav i{ width:6px; height:6px; border-radius:50%; background:#e6e3dc; }
.jwf__h{ display:block; height:10px; width:86%; border-radius:4px; background:#e8e5de; }
.jwf__p{ display:block; height:6px; width:62%; border-radius:3px; background:#efede8; }
.jwf__row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.jwf__row b{ display:block; height:32px; border-radius:6px; background:#f1efea; }
.jwf__btn{ display:block; height:16px; width:58px; border-radius:5px; background:#e8e5de; }
.jmap{ width:176px; display:grid; justify-items:center; }
.jmap__root{ width:64px; height:26px; border-radius:7px; background:#171717; box-shadow:0 10px 20px -12px rgba(23,23,23,.6); animation:jvRoot 6s var(--ease) infinite both; }
.jmap__lines{ display:block; width:152px; height:30px; overflow:visible; }
.jmap__lines path{ fill:none; stroke:#d9d3c4; stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0; vector-effect:non-scaling-stroke; animation:jvDraw 6s ease infinite both; }
.jmap__kids{ width:176px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.jmap__kids span{ height:36px; border-radius:8px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 20px -16px rgba(23,23,23,.4); animation:jvKid1 6s var(--ease) infinite both; }
.jmap__kids span:nth-child(2){ animation-name:jvKid2; }
.jmap__kids span.is-cta{ background:#f0d27f; border-color:transparent; animation-name:jvKid3; }
@keyframes jvRoot{ 0%,4%{ opacity:0; transform:scale(.6); } 12%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:none; } }
@keyframes jvDraw{ 0%,12%{ stroke-dashoffset:1; opacity:1; } 26%,84%{ stroke-dashoffset:0; opacity:1; } 94%,100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes jvKid1{ 0%,24%{ opacity:0; transform:scale(.6); } 32%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:none; } }
@keyframes jvKid2{ 0%,28%{ opacity:0; transform:scale(.6); } 36%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:none; } }
@keyframes jvKid3{ 0%,32%{ opacity:0; transform:scale(.6); } 40%,84%{ opacity:1; transform:none; } 94%,100%{ opacity:0; transform:none; } }
.jwf--paint .jwf__h{ background:#171717; animation:jvInk 6s ease infinite both; }
.jwf--paint .jwf__row b:first-child{ background:#f7ecd0; animation:jvSoft 6s ease infinite both; }
.jwf--paint .jwf__btn{ background:#f0d27f; animation:jvGold 6s ease infinite both; }
@keyframes jvInk{ 0%,10%{ background:#e8e5de; } 20%,84%{ background:#171717; } 94%,100%{ background:#e8e5de; } }
@keyframes jvSoft{ 0%,22%{ background:#f1efea; } 32%,84%{ background:#f7ecd0; } 94%,100%{ background:#f1efea; } }
@keyframes jvGold{ 0%,34%{ background:#e8e5de; } 44%,84%{ background:#f0d27f; } 94%,100%{ background:#e8e5de; } }

/* 4 Launch: Ladebalken, dann online */
.jgo{ position:relative; width:188px; padding:14px; display:grid; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 30px -22px rgba(23,23,23,.4); }
.jgo__url{ display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:99px; background:#f6f5f1; }
.jgo__url svg{ flex:none; width:12px; height:12px; color:#0e9f6e; }
.jgo__url i{ display:block; height:7px; width:62%; border-radius:4px; background:#e3e0d8; }
.jgo__bar{ height:6px; border-radius:6px; background:#efede8; overflow:hidden; }
.jgo__bar i{ display:block; height:100%; width:100%; border-radius:6px; background:#0e9f6e; animation:jvFill 6s ease-in-out infinite both; }
@keyframes jvFill{ 0%{ width:0; background:#f0d27f; opacity:1; } 45%{ width:100%; background:#f0d27f; } 52%,90%{ width:100%; background:#0e9f6e; opacity:1; } 98%,100%{ width:100%; background:#0e9f6e; opacity:0; } }
.jgo__ok{ position:absolute; right:-12px; top:-12px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#0e9f6e; color:#fff; box-shadow:0 0 0 4px #f8f7f4, 0 10px 20px -10px rgba(14,124,90,.8); animation:jvOk 6s var(--ease) infinite both; }
.jgo__ok svg{ width:15px; height:15px; }
@keyframes jvOk{ 0%,48%{ opacity:0; transform:scale(.4); } 56%,90%{ opacity:1; transform:none; } 98%,100%{ opacity:0; transform:none; } }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,124,90,.5) } 50%{ box-shadow:0 0 0 5px rgba(14,124,90,0) } }
@media (prefers-reduced-motion:reduce){ .jstep__vis *{ animation:none !important; }}
.journey__cta{ display:flex; justify-content:center; margin-top:56px; position:relative; z-index:1; }
@media (max-width:1060px){ .journey__steps{ grid-template-columns:repeat(2,1fr); gap:28px 18px; } .journey__line{ display:none; }}
@media (max-width:600px){ .journey__steps{ grid-template-columns:1fr; } .jstep{ align-items:flex-start; } .jstep__dot{ margin-bottom:14px; }}

/* -------------------------------------------------- Förderung */
.fund{ display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center; }
.fund__list{ display:grid; gap:14px; margin:28px 0 34px; font-size:15.5px; }
.fund__list b{ color:var(--ink); font-weight:600; }
.calc{ position:relative; padding:26px; box-shadow:var(--sh-xl); overflow:hidden; border-color:#efe8d8; }
.calc::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--gold-grad); }
.calc__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.calc__head b{ font-family:var(--font-display); font-size:16px; color:var(--ink); }
.pill-gold{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold-600); background:var(--gold-soft); border:1px solid var(--gold-line); padding:4px 10px; border-radius:var(--r-pill); }
.seg{ display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:12px; background:var(--bg-3); margin-bottom:22px; }
.seg button{ padding:10px; white-space:nowrap; border-radius:9px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--muted); transition:background .2s, color .2s, box-shadow .2s; }
/* Die Beschriftung darf nie umbrechen - "80 % Foerderung" auf zwei Zeilen
   laesst die beiden Schalter unterschiedlich hoch wirken. Wird es eng,
   ruecken sie untereinander statt den Text zu brechen. */
@media (max-width:480px){ .seg button{ font-size:13.5px; padding:10px 6px; }}
@media (max-width:389px){ .seg{ grid-template-columns:1fr; }}
.seg button[aria-pressed="true"]{ background:#0f0a0a; color:#fff; box-shadow:var(--sh-cta); }
.range label{ display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--muted); margin-bottom:12px; }
.range label b{ font-family:var(--font-display); font-size:17px; color:var(--ink); }
.range input{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg, #f0d27f var(--p,40%), var(--bg-3) var(--p,40%)); outline:none; }
.range input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid #b8891a; box-shadow:var(--sh-md); cursor:pointer; }
.range input::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #b8891a; cursor:pointer; }
.range__ends{ display:flex; justify-content:space-between; font-size:12px; color:var(--muted-2); margin-top:8px; }
.calc__rows{ margin-top:18px; }
.calc__row{ display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line-soft); font-size:15px; color:var(--muted); }
.calc__row b{ font-family:var(--font-display); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.calc__row--minus b{ color:var(--green); }
.calc__total{ display:flex; justify-content:space-between; align-items:end; margin-top:6px; padding:16px; border-radius:14px; background:var(--gold-soft); border:1px solid var(--gold-line); }
.calc__total span{ font-size:15px; color:var(--ink); font-weight:600; }
.calc__total b{ font-family:var(--font-display); font-size:clamp(1.7rem,7vw,2.2rem); white-space:nowrap; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--gold-text); }
.calc__total{ gap:12px; }
.calc__total span{ min-width:0; }
.calc__note{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--muted-2); }
@media (max-width:960px){ .fund{ grid-template-columns:1fr; gap:44px; } .calc{ max-width:520px; }}

/* -------------------------------------------------- Über uns */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; }
.about__photo{ position:relative; border-radius:var(--r-2xl); overflow:hidden; aspect-ratio:5/4; border:1px solid var(--line); box-shadow:var(--sh-xl); }
.about__photo img{ width:100%; height:100%; object-fit:cover; }
.about__loc{ position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:var(--sh-lg); }
.about__loc .ic{ width:36px; height:36px; }
.about__loc b{ display:block; font-family:var(--font-display); font-size:14px; color:var(--ink); line-height:1.25; }
.about__loc small{ font-size:12.5px; color:var(--muted); }
.about p{ color:var(--muted); }
.people{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 30px; }
.person{ display:flex; align-items:center; gap:12px; padding:10px; }
.person img{ width:52px; height:52px; border-radius:12px; object-fit:cover; object-position:50% 25%; }
.person b{ display:block; font-family:var(--font-display); font-size:15px; color:var(--ink); line-height:1.25; }
.person small{ font-size:13px; color:var(--gold-600); font-weight:600; }
/* Freigestellte Person ragt oben aus dem Kreis heraus */
.person--pop{ overflow:visible; }
.person__av{ position:relative; flex:none; width:56px; height:56px; clip-path:inset(-60% 0 0 0 round 0 0 28px 28px); }
.person__av::before{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(160deg,#f6e7bd,#e2c375); }
.person .person__av img{ position:absolute; left:50%; bottom:0; width:108%; max-width:none; height:auto; transform:translateX(-50%); border-radius:0; object-fit:contain; }
.person--rev{ flex-direction:row-reverse; justify-content:space-between; }
/* Textblock schließt oben und unten bündig mit dem Bild ab */
@media (min-width:961px){
  .about--fit{ align-items:stretch; }
  .about--fit .about__photo{ align-self:stretch; }
  .about--fit .about__photo img{ position:absolute; inset:0; }
  .about--fit > div:last-child{ display:flex; flex-direction:column; justify-content:space-between; }
  .about--fit > div:last-child > *{ margin-top:0; }
  .about--fit .eyebrow{ align-self:flex-start; line-height:1; }
  .about--fit .people{ margin:0; }
}
@media (max-width:960px){ .about{ grid-template-columns:1fr; gap:40px; }}
@media (max-width:420px){ .people{ grid-template-columns:1fr; }}

/* -------------------------------------------------- FAQ */
.faq{ max-width:820px; margin:0 auto; position:relative; z-index:1; background:#fff; border:1px solid var(--line); border-radius:24px; padding:8px 32px; box-shadow:0 30px 60px -44px rgba(23,23,23,.3); }
.faq__item + .faq__item{ border-top:1px solid var(--line); }
.faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; background:none; border:0; cursor:pointer; text-align:left; font:inherit; font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--ink); transition:color .25s; }
.faq__q:hover{ color:var(--gold-text); }
.faq__q:focus{ outline:none; }
.faq__q:focus-visible{ outline:2px solid var(--gold-line); outline-offset:4px; border-radius:8px; }
.faq__ic{ position:relative; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; transition:transform .45s var(--ease), background .3s, border-color .3s; }
.faq__ic::before, .faq__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.8px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); }
.faq__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__ic{ transform:rotate(135deg); background:#f0d27f; border-color:#f0d27f; }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__in{ overflow:hidden; }
.faq__in p{ margin:0; padding:0 56px 26px 0; color:var(--muted); font-size:15.5px; line-height:1.7; opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .45s var(--ease); }
.faq__item.is-open .faq__in p{ opacity:1; transform:none; transition-delay:.08s; }
@media (max-width:560px){ .faq{ padding:4px 20px; border-radius:18px; } .faq__q{ padding:20px 0; font-size:1rem; } .faq__in p{ padding-right:0; }}

/* -------------------------------------------------- Abschluss-CTA */
.final{ position:relative; overflow:hidden; text-align:center; background:var(--green-bg); border-radius:var(--r-2xl); padding:92px 32px; color:#c9c9c4; }
.final::before{ content:""; position:absolute; left:50%; top:-40%; width:760px; height:520px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(227,197,103,.14), transparent); pointer-events:none; }
.final > :not(.tiles){ position:relative; z-index:1; }
.final h2{ color:#fff; margin:22px auto 16px; max-width:760px; }
.final h2 .gold{ color:var(--gold-grad); }
.final p{ max-width:560px; margin:0 auto 32px; font-size:1.08rem; color:#a9a9a4; }
.final__note{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:22px; font-size:14px; color:#9a9a95; }
/* Punkte stehen über dem Button */
.final__note{ margin:-8px 0 30px; font-size:14.5px; color:#b3b8b4; }
/* Button mit Profilbild */
.btn-person{ gap:14px; padding:8px 26px 8px 8px; }
.btn-person img{ width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; border:2px solid rgba(29,20,2,.18); }
/* Am Handy wird der Knopf breit. Die Beschriftung bekommt den Platz zwischen
   Bild und Pfeil und steht darin mittig - vorher sass sie sichtbar aus der
   Mitte, weil das Bild links deutlich mehr Platz braucht als der Pfeil rechts.
   Die Schrift schrumpft leicht mit, damit der Text auf den gaengigen Geraeten
   in eine Zeile passt; auf sehr schmalen bricht er sauber um, statt aus dem
   Knopf zu laufen. */
@media (max-width:560px){
  .btn-row .btn-person{ font-size:clamp(12.5px, 3.2vw, 15px);
    padding:6px 14px 6px 6px; gap:8px; }
  .btn-row .btn-person img{ width:34px; height:34px; }
  .btn-row .btn-person span{ flex:1 1 auto; min-width:0; }
}
.final__note span{ display:inline-flex; align-items:center; gap:7px; }
.final__note svg{ width:15px; height:15px; color:var(--gold-bright); }
.contact-chip{ display:inline-flex; align-items:center; gap:12px; margin-top:30px; padding:8px 18px 8px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); text-align:left; }
.contact-chip img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.contact-chip b{ display:block; font-family:var(--font-display); font-size:14px; color:#fff; line-height:1.2; }
.contact-chip small{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#6fd29b; }
.contact-chip small::before{ content:""; width:7px; height:7px; border-radius:50%; background:#35c47a; box-shadow:0 0 0 3px rgba(53,196,122,.2); }
@media (max-width:560px){ .final{ padding:60px 20px; border-radius:22px; }}

/* -------------------------------------------------- Footer */
.footer{ position:relative; overflow:hidden; margin:88px 12px 0; padding:112px 0 0; border-radius:48px 48px 0 0; background:linear-gradient(180deg,#072312 0,var(--green-bg) 280px); border:1px solid rgba(255,255,255,.08); border-bottom:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); color:rgba(255,255,255,.64); }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.25fr); gap:56px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer .logo span{ color:#fff; font-size:1.35rem; }
.footer p{ max-width:36ch; margin:20px 0 0; font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.6); }
.footer h3, .footer h4{ margin:0 0 22px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.footer__col{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; font-size:15px; }
.footer__col a[href^="mailto"]{ white-space:nowrap; }
.footer__col a{ color:rgba(255,255,255,.66); transition:color .2s, transform .2s var(--ease); }
.footer__col a:hover{ color:#fff; transform:translateX(3px); }
/* Instagram und LinkedIn: Symbole nebeneinander statt ausgeschriebener Namen */
.footer__social{ display:flex; gap:10px; margin-top:14px; }
.footer__col .footer__social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); transition:color .2s, background .2s, border-color .2s; }
.footer__col .footer__social a:hover{ color:#1d1402; background:var(--gold-grad); border-color:var(--gold-grad); transform:none; }
.footer__social svg{ width:19px; height:19px; }
.footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 26px; padding-top:30px; font-size:14px; color:rgba(255,255,255,.4); }
.footer__bottom nav{ display:flex; gap:24px; }
.footer__bottom a{ transition:color .2s; }
.footer__bottom a:hover{ color:#fff; }
.footer__word{ display:block; margin:56px 0 -.18em; text-align:center; white-space:nowrap; user-select:none; pointer-events:none; font-family:var(--font-display); font-weight:800; font-size:min(10.5vw,12.5rem); letter-spacing:-.055em; line-height:.8; background:linear-gradient(180deg,rgba(255,255,255,.07) 10%,transparent 96%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
@media (max-width:1000px){ .footer__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; } .footer__brand{ grid-column:1/-1; }}
@media (max-width:760px){ .footer{ margin:88px 8px 0; padding-top:72px; border-radius:28px 28px 0 0; } .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; padding-bottom:48px; } .footer__word{ margin-top:40px; }}
@media (max-width:480px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ flex-direction:column; align-items:flex-start; }}

/* -------------------------------------------------- Reveal */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s); }
.rv.is-in{ opacity:1; transform:none; }
.no-js .rv{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv, .acc{ opacity:1; transform:none; }}

/* Wortwechsel als sauberer Überblender (Text mit Verlauf lässt sich beim Verschieben nicht zuverlässig abschneiden) */
.rotator > span, .rotator > span.is-out{ transform:none; transition:opacity .45s ease; }

/* -------------------------------------------------- Monstera links & rechts am Video */
.showreel__frame{ z-index:3; }
.leaf{ position:absolute; z-index:1; width:520px; height:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 34px 38px rgba(20,45,20,.22));
  transform-origin:38% 100%; transform:scaleX(var(--sx,1)) rotate(var(--r)); }
/* Stiel sitzt hinter dem Video, die Blätter fächern schräg nach außen */
.leaf--l{ left:-200px; bottom:60px; --r:-30deg; transform-origin:45% 100%; }
.leaf--r{ right:-115px; bottom:70px; --r:-30deg; --sx:-1; transform-origin:55% 100%; }
@media (max-width:1200px){ .leaf{ width:420px; } .leaf--l{ left:-160px; } .leaf--r{ right:-160px; }}
@media (max-width:760px){ .leaf{ width:230px; bottom:30px; } .leaf--l{ left:-95px; } .leaf--r{ right:-95px; }}

/* -------------------------------------------------- Webseiten-Laufband links & rechts, laufen zum Video hin */
.strip{ position:absolute; z-index:2; top:50%; width:50vw; height:230px; margin-top:-115px; overflow:hidden; pointer-events:none; }
.strip--l{ right:50%; }
.strip--r{ left:50%; }
.strip__track{ display:flex; width:max-content; height:100%; align-items:center; }
.strip--l .strip__track{ animation:stripRight 64s linear infinite; }
.strip--r .strip__track{ margin-left:auto; animation:stripLeft 64s linear infinite; }
.strip__group{ display:flex; gap:0; padding-right:0; }
.strip__group img{ width:340px; height:212px; object-fit:cover; object-position:top; border-radius:0; border:6px solid #fff; background:#fff; }
@keyframes stripRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes stripLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.strip--r .strip__track{ position:absolute; left:0; }
@media (max-width:760px){ .strip{ display:none; }}

@media (prefers-reduced-motion:reduce){ .strip__track{ animation:none; }}

/* -------------------------------------------------- Monstera-Akzente: ab und zu vom Rand ins Bild */
.deco-leaf{ position:absolute; z-index:0; width:380px; height:auto; pointer-events:none; user-select:none; filter:drop-shadow(0 30px 34px rgba(20,45,20,.18)); }
.deco-leaf--r{ right:-215px; transform:rotate(-72deg); }
.deco-leaf--l{ left:-250px; transform:scaleX(-1) rotate(-72deg); }
.final-zone{ position:relative; overflow:hidden; padding-bottom:60px; margin-bottom:-60px; }
#kontakt .final{ z-index:1; }
.deco-leaf--cl, .deco-leaf--cr{ width:360px; top:50%; margin-top:-230px; }
/* Stiele zeigen schräg nach innen und verschwinden hinter der dunklen Box */
.deco-leaf--cl{ left:calc(50% - var(--wrap) / 2 - 150px); transform:scaleX(-1) rotate(62deg); }
.deco-leaf--cr{ right:calc(50% - var(--wrap) / 2 - 150px); transform:rotate(62deg); }
@media (max-width:1600px){ .deco-leaf--r{ right:-285px; } .deco-leaf--l{ left:-320px; }}
/* Unter 1240 px ist der Seitenrand zu schmal: seitliche Blaetter wuerden Text verdecken */
@media (max-width:1240px){ .deco-leaf--r, .deco-leaf--l{ display:none; } }
@media (max-width:900px){ .deco-leaf{ display:none; }}

/* -------------------------------------------------- Aufgeräumt: keine Pillen/Kästen um kleine Hinweise */
.vcard__label, .vcard--old .vcard__label, .vcard--new .vcard__label{ padding:0; border:0; border-radius:0; background:none; margin-bottom:10px; }
.vcard--new .vcard__label{ color:var(--gold-bright); }
.tags{ gap:6px 18px; }
.tag, .tag--gold{ padding:0; border:0; border-radius:0; background:none; font-size:13.5px; color:var(--muted); }
.tag--gold{ color:var(--gold-text); }
.contact-chip{ padding:0; border:0; border-radius:0; background:none; }

/* Der Unterschied: zwei ruhige Listen, nur Haken auf der guten Seite */
.vcard{ padding:36px 36px 30px; }
.vcard--new{ padding-top:36px; }
.vcard__list li{ padding:9px 0; }
.vcard--old .vcard__list li + li, .vcard--new .vcard__list li + li{ border-top:0; }
.vcard--new .ok{ width:auto; height:auto; background:none; color:var(--gold-bright); margin-top:3px; }
.vcard--new .ok svg{ width:16px; height:16px; }
@media (max-width:760px){ .vcard{ padding:28px 24px 22px; }}

/* -------------------------------------------------- Hero: Überschrift baut sich Wort für Wort auf */
.hero-title .w{ display:inline-block; opacity:0; transform:translateY(.35em); filter:blur(10px); animation:heroWord .6s var(--ease) forwards; animation-delay:calc(var(--i) * 45ms + .05s); }
/* Hero: Rest kommt zügig hinterher */
.hero .rv{ transition-duration:.5s; }
@keyframes heroWord{ to{ opacity:1; transform:none; filter:blur(0); } }
@media (prefers-reduced-motion:reduce){ .hero-title .w{ animation:none; opacity:1; transform:none; filter:none; }}

/* -------------------------------------------------- Unterseiten */
.hero--sub{ padding-bottom:8px; }
.section--tight{ padding-top:72px; }
.nav-links a[aria-current="page"]{ color:var(--ink); }

/* Projekt-Galerie */
.works{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; }
.work{ margin:0; }
.work__frame{ overflow:hidden; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(23,23,23,.4); }
.work__bar{ display:flex; gap:5px; align-items:center; height:28px; padding:0 12px; border-bottom:1px solid var(--line); }
.work__bar i{ width:7px; height:7px; border-radius:50%; background:#e6e3dc; }
.work img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.work figcaption{ margin-top:14px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
@media (max-width:960px){ .works{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:560px){ .works{ grid-template-columns:1fr; gap:28px; }}

/* Leistungs-Bausteine */
.feats{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feat{ padding:30px 30px 32px; }
.feat__n{ display:block; margin-bottom:18px; font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--gold-text); }
.feat h3{ font-size:1.22rem; margin:0 0 8px; }
.feat p{ margin:0; font-size:15px; color:var(--muted); }
.feats__note{ position:relative; z-index:1; margin:36px 0 0; text-align:center; font-size:15.5px; color:var(--muted); }
.feats__note a{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; font-weight:600; color:var(--ink); }
.feats__note a svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.feats__note a:hover svg{ transform:translateX(3px); }
@media (max-width:960px){ .feats{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:560px){ .feats{ grid-template-columns:1fr; }}

/* Referenzen: Projekt-Karten */
.cases{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 32px; }
.case__body{ padding:22px 4px 0; }
.case__co{ display:block; margin-bottom:10px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }
.case h3{ margin:0 0 14px; font-size:1.35rem; font-weight:500; line-height:1.3; letter-spacing:-.02em; color:var(--muted); text-wrap:balance; }
.case h3 b{ font-weight:600; color:var(--ink); }
.case__quote{ margin:0; font-size:15px; line-height:1.65; color:var(--muted); }
.case__quote--fazit span{ display:block; margin-bottom:4px; font-size:12.5px; font-weight:600; color:var(--ink); }
.case__who{ display:flex; align-items:center; gap:10px; margin:12px 0 0; font-size:14px; font-weight:600; color:var(--ink); }
.case .work img{ aspect-ratio:16/10; }
.case .work__frame img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
@media (max-width:860px){ .cases{ grid-template-columns:1fr; gap:44px; }}

/* BAFA: Schritte */
.bsteps{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; counter-reset:none; }
.bstep{ display:flex; flex-direction:column; gap:18px; padding:28px; border-radius:var(--r-xl); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.bstep__n{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#f0d27f; font-family:var(--font-display); font-weight:700; color:#3a2a05; }
.bstep h3{ margin:0 0 6px; font-size:1.14rem; }
.bstep p{ margin:0; font-size:14.5px; color:var(--muted); }
@media (max-width:1000px){ .bsteps{ grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media (max-width:560px){ .bsteps{ grid-template-columns:1fr; }}

/* -------------------------------------------------- Buchung: Klick-Funnel */
.booking{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + 72px) 0 96px; }
.booking .wrap{ position:relative; z-index:1; }
.booking__head{ text-align:center; max-width:760px; margin:0 auto 40px; }
.booking__title{ margin:18px 0 18px; font-size:clamp(2.3rem,5vw,3.6rem); }
.booking .deco-leaf{ z-index:0; }
.fn{ position:relative; max-width:640px; margin:0 auto; padding:28px 32px 32px; box-shadow:0 40px 80px -50px rgba(23,23,23,.4); }
.fn__top{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.fn__person{ display:flex; align-items:center; gap:12px; }
.fn__person img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.fn__person b{ display:block; font-family:var(--font-display); font-size:14.5px; color:var(--ink); line-height:1.2; }
.fn__person small{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--green); }
.fn__person small::before{ content:""; width:7px; height:7px; border-radius:50%; background:#35c47a; }
.fn__count{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.fn__bar{ height:4px; margin:20px 0 28px; border-radius:4px; background:var(--bg-3); overflow:hidden; }
.fn__bar i{ display:block; width:25%; height:100%; border-radius:4px; background:#f0d27f; transition:width .5s var(--ease); }
.fn__step{ display:none; }
.fn__step.is-active{ display:block; animation:fnIn .45s var(--ease); }
@keyframes fnIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.fn__step h2{ margin:0 0 20px; font-size:1.5rem; letter-spacing:-.02em; }
.fn__choices{ display:grid; gap:10px; }
.fn__choice{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:17px 20px; border-radius:14px; background:#fff; border:1px solid var(--line); text-align:left; font:inherit; font-size:16px; font-weight:500; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s; }
.fn__choice svg{ flex:none; width:18px; height:18px; color:var(--muted-2); transition:transform .2s var(--ease), color .2s; }
.fn__choice:hover{ border-color:#e3c77a; background:#fffcf3; }
.fn__choice:hover svg{ color:var(--gold-text); transform:translateX(3px); }
.fn__back{ margin-top:18px; padding:0; background:none; border:0; font:inherit; font-size:14px; color:var(--muted); cursor:pointer; }
.fn__back:hover{ color:var(--ink); }
.fn__form{ display:grid; gap:14px; }
.fn__form label{ display:grid; gap:7px; font-size:14px; font-weight:600; color:var(--ink); }
.fn__form label small{ font-weight:400; color:var(--muted-2); }
.fn__form input{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; font:inherit; font-size:16px; font-weight:400; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.fn__form input:focus{ outline:none; border-color:#e3c77a; box-shadow:0 0 0 4px rgba(240,210,127,.3); }
.fn__submit{ width:100%; justify-content:center; margin-top:6px; }
.fn__submit:disabled{ opacity:.6; cursor:wait; }
.fn__err{ margin:0; font-size:14px; color:#b42318; }
.fn__err a, .fn__legal a{ text-decoration:underline; }
.fn__legal{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted-2); }
.fn__done{ text-align:center; padding:8px 0; }
.fn__done p{ margin:0 auto 24px; max-width:44ch; color:var(--muted); }
.fn__done small{ display:block; margin-top:14px; font-size:13px; color:var(--muted-2); }
.fn__ok{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:#0e9f6e; color:#fff; }
.fn__ok svg{ width:24px; height:24px; }
.booking__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:28px 0 0; padding:0; list-style:none; font-size:14px; color:var(--muted); }
.booking__trust li{ display:flex; align-items:center; gap:7px; }
.booking__trust svg{ width:15px; height:15px; color:var(--gold-text); }
@media (max-width:560px){ .fn{ padding:22px 18px 24px; } .fn__count{ display:none; } .booking{ padding-bottom:72px; }}

/* -------------------------------------------------- Ratgeber-Artikel */
.hero--article{ padding-bottom:0; }
.hero--article .hero-title{ font-size:clamp(2.4rem,5.4vw,4rem); }
.crumbs{ display:flex; justify-content:center; gap:8px; margin:0; font-size:14px; font-weight:600; color:var(--gold-text); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ color:var(--muted-2); }
.art-meta{ margin:-14px 0 28px; font-size:13.5px; color:var(--muted-2); }
.article__grid{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:72px; align-items:start; }
.article__side{ align-self:stretch; }
.article__sticky{ position:sticky; top:calc(var(--nav-h) + 24px); display:grid; gap:18px; }
.toc{ display:grid; gap:2px; padding-left:14px; border-left:1px solid var(--line); }
.toc__label{ margin-bottom:10px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.toc a{ padding:5px 0; font-size:14px; color:var(--muted); transition:color .2s; }
.toc a:hover{ color:var(--ink); }
.side-cta{ padding:22px; border-radius:18px; background:#141414; color:rgba(255,255,255,.65); }
.side-cta b{ display:block; margin-bottom:6px; font-family:var(--font-display); font-size:16px; color:#fff; }
.side-cta p{ margin:0 0 16px; font-size:14px; line-height:1.55; }
.side-cta .btn{ width:100%; justify-content:center; background:#f0d27f; color:#1d1402; }

.prose{ max-width:760px; font-size:17px; line-height:1.75; color:#3d3d3a; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 20px; }
.prose__lead{ font-size:1.22rem; line-height:1.7; color:var(--ink); }
.prose h2{ margin:64px 0 18px; scroll-margin-top:calc(var(--nav-h) + 24px); font-size:clamp(1.55rem,2.6vw,2rem); line-height:1.2; letter-spacing:-.025em; color:var(--ink); }
.prose h2 .n{ color:var(--gold-text); margin-right:4px; }
.prose h3{ margin:0 0 8px; font-size:1.14rem; color:var(--ink); }
.prose strong, .prose b{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:#e3c77a; text-decoration-thickness:2px; text-underline-offset:3px; }
.prose a:hover{ text-decoration-color:var(--ink); }
.prose ul, .prose ol{ margin:0 0 22px; padding:0; list-style:none; display:grid; gap:10px; }
.prose ul li{ position:relative; padding-left:26px; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:50%; background:#e3c77a; }
.prose ol{ counter-reset:li; }
.prose ol li{ position:relative; padding-left:34px; counter-increment:li; }
.prose ol li::before{ content:counter(li); position:absolute; left:0; top:.2em; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#f0d27f; font-size:12px; font-weight:700; color:#3a2a05; }
.tbl-wrap{ margin:8px 0 24px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; }
.tbl{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
.tbl th{ padding:14px 18px; text-align:left; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); background:#faf9f6; border-bottom:1px solid var(--line); }
.tbl td{ padding:14px 18px; vertical-align:top; border-bottom:1px solid var(--line-soft); }
.tbl tr:last-child td{ border-bottom:0; }
.tbl td.price{ white-space:nowrap; font-weight:600; color:var(--ink); }
.price-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 24px; }
.price-card{ position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 20px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.price-card--hot{ border-color:#e3c77a; box-shadow:0 20px 40px -30px rgba(168,120,15,.5); }
.price-badge{ align-self:flex-start; margin-bottom:4px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text); }
.price-card__tag{ font-size:14px; font-weight:600; color:var(--muted); }
.price-card__price{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.price-card__desc{ font-size:14.5px; line-height:1.55; color:var(--muted); }
.fac-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:8px 0 24px; }
.fac{ padding:22px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.fac p{ margin:0; font-size:15px; line-height:1.6; color:var(--muted); }
.callout{ margin:8px 0 24px; padding:24px; border-radius:16px; background:#faf6ea; border:1px solid var(--gold-line); }
.callout p{ margin:0; font-size:15.5px; }
.inline-cta{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin:36px 0; padding:26px 28px; border-radius:18px; background:#141414; }
.inline-cta__tx b{ display:block; margin-bottom:4px; font-family:var(--font-display); font-size:1.15rem; color:#fff; }
.inline-cta__tx span{ font-size:15px; color:rgba(255,255,255,.62); }
.inline-cta .btn{ text-decoration:none; background:#f0d27f; color:#1d1402; }
.stat-band{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:8px 0 24px; }
.stat-band__item{ padding:22px 16px; border-radius:16px; background:#fff; border:1px solid var(--line); text-align:center; }
.stat-band__num{ font-family:var(--font-display); font-size:2rem; font-weight:600; line-height:1; letter-spacing:-.03em; color:var(--gold-text); }
.stat-band__cap{ margin-top:8px; font-size:14px; line-height:1.45; color:var(--muted); }
.p-calc{ margin:8px 0 24px; padding:24px 26px; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -48px rgba(23,23,23,.4); }
.p-calc__label{ display:block; margin-bottom:10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text); }
.p-calc__row{ display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line-soft); font-size:15.5px; }
.p-calc__row b{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.p-calc__row b.minus{ color:var(--green); }
.p-calc__row--total b{ font-size:1.5rem; color:var(--gold-text); }
.p-calc p{ margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--muted-2); }
.pull{ margin:36px 0; padding:28px 30px; border-left:3px solid #f0d27f; background:#faf9f6; border-radius:0 18px 18px 0; }
.pull__q{ margin:10px 0 12px !important; font-family:var(--font-display); font-size:1.3rem; line-height:1.4; letter-spacing:-.015em; color:var(--ink); }
.pull__who{ margin:0 !important; font-size:14.5px; color:var(--muted); }

.rels{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rel{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:22px 24px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); transition:border-color .2s, transform .25s var(--ease); }
.rel svg{ flex:none; width:18px; height:18px; color:var(--gold-text); transition:transform .2s var(--ease); }
.rel:hover{ border-color:#e3c77a; }
.rel:hover svg{ transform:translateX(3px); }

@media (max-width:1060px){ .article__grid{ grid-template-columns:minmax(0,1fr); gap:40px; } .article__side{ display:none; } .prose{ max-width:none; }}
@media (max-width:760px){ .price-grid, .fac-grid, .stat-band, .rels{ grid-template-columns:1fr; } .prose{ font-size:16px; } .prose h2{ margin-top:48px; } .tbl{ font-size:14px; min-width:520px; }}

/* -------------------------------------------------- Blog-Übersicht */
.posts{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.post{ display:flex; flex-direction:column; padding:30px; transition:border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.post:hover{ border-color:#e3c77a; transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(23,23,23,.35); }
.post__meta{ display:flex; justify-content:space-between; gap:12px; margin-bottom:18px; font-size:13px; color:var(--muted-2); }
.post__meta b{ font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--gold-text); }
.post h2, .post h3{ margin:0 0 12px; font-size:1.3rem; line-height:1.3; letter-spacing:-.02em; color:var(--ink); }
.post p{ flex:1; margin:0 0 22px; font-size:15px; line-height:1.6; color:var(--muted); }
.post__more{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; color:var(--ink); }
.post__more svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.post:hover .post__more svg{ transform:translateX(3px); }
@media (max-width:960px){ .posts{ grid-template-columns:1fr; }}

/* Vergleichstabelle (Blogs) */
.cmp-wrap{ position:relative; z-index:1; max-width:920px; margin:0 auto; overflow-x:auto; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(23,23,23,.3); }
.cmp{ width:100%; min-width:620px; border-collapse:collapse; font-size:15px; }
.cmp th, .cmp td{ padding:17px 18px; text-align:center; border-bottom:1px solid var(--line-soft); }
.cmp thead th{ font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--muted); }
.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink); }
.cmp tr:last-child th, .cmp tr:last-child td{ border-bottom:0; }
.cmp .us{ background:#fbf6e6; }
.cmp thead .us{ color:var(--ink); font-weight:700; }
.cmp .yes svg{ width:18px; height:18px; color:var(--green); }
.cmp .us.yes svg{ color:var(--gold-text); }
.cmp .no{ color:#c9c6bf; font-size:18px; }
.s3{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.s3 .feat ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.s3 .feat li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.s3 .feat li svg{ flex:none; width:15px; height:15px; margin-top:4px; color:var(--gold-text); }
.s3 .feat__n{ font-size:15px; }
@media (max-width:960px){ .s3{ grid-template-columns:1fr; }}

/* -------------------------------------------------- Rechtliches */
.legal{ padding:calc(var(--nav-h) + 72px) 0 96px; }
.legal .prose{ margin:0 auto; }
.legal h1{ margin:0 0 32px; font-size:clamp(2.2rem,4.6vw,3.2rem); letter-spacing:-.035em; }
.legal .prose h2{ margin-top:44px; font-size:1.4rem; }
.legal .prose h3{ margin:28px 0 8px; }
.section.article{ overflow:visible; overflow-x:clip; }
.prose blockquote{ margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid #f0d27f; font-family:var(--font-display); font-size:1.2rem; line-height:1.5; letter-spacing:-.01em; color:var(--ink); }
.prose blockquote p{ margin:0; }
.toc a{ padding:3px 0; font-size:13.5px; }
.article__sticky{ max-height:calc(100vh - var(--nav-h) - 40px); }
@media (max-height:860px){ .side-cta{ display:none; }}

/* -------------------------------------------------- Referenzen: Projekte mit laufenden Screenshots, ohne Karte */
.refs{ display:flex; flex-direction:column; margin-top:clamp(40px,5vw,64px); }
.refc{ position:relative; padding:clamp(48px,5vw,72px) 0; }
.refc:first-child{ padding-top:0; }
.refc:last-child{ padding-bottom:0; }
.refc + .refc{ border-top:1px solid var(--line); }
.refc__body{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,80px); min-height:460px; }

.refc__main{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
/* abwechselnd: jedes zweite Projekt mit Screenshots links */
@media (min-width:961px){ .refc:nth-child(even) .refc__show{ order:-1; } }
.refc__top{ display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.refc__logo{ width:auto; height:auto; max-width:170px; max-height:48px; }
.refc__co{ padding-left:18px; border-left:1px solid var(--line); font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); line-height:1.3; }
.refc__lead{ margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem,2.9vw,2.6rem); line-height:1.12; letter-spacing:-.035em; color:var(--ink); text-wrap:balance; }
.refc__lead .gold{ color:var(--brand, var(--gold-text)); }
.refc__video{ position:relative; width:100%; margin-top:30px; padding:6px; border-radius:22px; background:#fff; border:1px solid var(--gold-line); box-shadow:0 30px 60px -40px rgba(23,23,23,.35); }
.refc__video::before{ content:""; display:block; aspect-ratio:16/9; }
.refc__video iframe{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); border:0; border-radius:16px; background:#111; }
/* Kundenstimme bzw. kurzer Satz: schlicht, ohne Kasten */
.refc__say{ margin:28px 0 0; }
.refc__say blockquote{ margin:0; font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.5; letter-spacing:-.01em; color:#3d3d3a; max-width:46ch; }
.refc__say figcaption{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:16px; font-size:14.5px; }
.refc__say figcaption .stars{ color:#e3b341; font-size:14px; letter-spacing:2px; }
.refc__say figcaption b{ font-family:var(--font-display); font-weight:600; color:var(--ink); }
.refc__text{ margin:24px 0 0; max-width:46ch; font-size:clamp(1.02rem,1.25vw,1.12rem); line-height:1.65; color:var(--muted); }
/* Case-Study-Angaben */
.refc__facts{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px 44px; width:100%; margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.refc__facts dt{ margin-bottom:4px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.refc__facts dd{ margin:0; font-size:14.5px; font-weight:500; color:var(--ink); }
/* "Umgesetzt": am Schreibtisch bleibt es die gewohnte Aufzaehlung. Die
   Trennpunkte kommen aus der Formatvorlage, damit jede Leistung im Quelltext
   ein eigener Eintrag ist - am Handy werden daraus Plaketten. */
.refc__facts dd.refc__svcs span:not(:last-child)::after{ content:" · "; color:var(--muted-2); }

/* Screenshots rechts: gerade, volle Breite sichtbar, laufen langsam in zwei Spalten */
.refc__show{ position:relative; z-index:1; overflow:hidden; }
/* Browserleiste: macht klar, dass hier die fertige Kundenseite zu sehen ist */
.refc__plane{ position:absolute; inset:0; display:flex; gap:16px; align-items:flex-start;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.refc__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px; will-change:transform; }
.refc__col img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.refc__col--up{ animation:refUp 40s linear infinite; }
.refc__col--down{ animation:refDown 48s linear infinite; }
.refc:not(.is-play) .refc__col{ animation-play-state:paused; }
@keyframes refUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes refDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .refc__col{ animation:none !important; }}

@media (max-width:960px){
  .refc__body{ grid-template-columns:1fr; gap:32px; min-height:0; }
  .refc__show{ height:360px; }}
@media (max-width:560px){
  .refc__show{ height:280px; }
  .refc__plane, .refc__col{ gap:10px; }
  /* Untereinander statt nebeneinander: nebeneinander bleibt fuer "Umgesetzt"
     nur eine schmale Spalte uebrig, in der schon zwei Eintraege umbrechen.
     Aus der Aufzaehlung werden Plaketten in der Farbe des Kunden - mit
     Trennpunkten zerfiele die Zeile, der Punkt landet am Zeilenanfang. */
  .refc__facts{ grid-template-columns:1fr; gap:16px; }
  .refc__facts dd.refc__svcs{ display:flex; flex-wrap:wrap; gap:6px; }
  .refc__facts dd.refc__svcs span{ padding:3px 10px; border-radius:99px; font-size:12.5px;
    font-weight:600; line-height:1.5; white-space:nowrap;
    background:color-mix(in srgb, var(--brand, var(--ink)) 9%, #fff);
    border:1px solid color-mix(in srgb, var(--brand, var(--ink)) 28%, #fff);
    color:color-mix(in srgb, var(--brand, var(--ink)) 72%, #23201a); }
  .refc__facts dd.refc__svcs span:not(:last-child)::after{ content:none; }
  .refc__top{ flex-wrap:wrap; gap:10px 14px; }}

/* -------------------------------------------------- Referenzen: Hero mit Projekt-Fenstern, Pflanzen & Trust */
.hero--refs{ padding-bottom:24px; }
.hero--refs .hero-inner{ z-index:2; }
.refhero__stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 0; margin:34px auto 0; }
.refhero__stats li{ display:flex; flex-direction:column; align-items:center; padding:0 30px; }
.refhero__stats li + li{ border-left:1px solid var(--line); }
.refhero__stats b{ font-family:var(--font-display); font-weight:700; font-size:1.55rem; letter-spacing:-.03em; line-height:1.1; color:var(--ink); }
.refhero__stats b i{ font-style:normal; font-size:.8em; color:#e3b341; }
.refhero__stats span{ margin-top:4px; font-size:13.5px; color:var(--muted); }

.refhero__stage{ position:relative; max-width:1060px; aspect-ratio:1/.4; margin:64px auto 0; z-index:1; }
.refhero__stage .leaf{ bottom:14%; width:480px; }
.refhero__stage .leaf--l{ left:-90px; }
.refhero__stage .leaf--r{ right:-40px; }
.refhero__glow{ position:absolute; inset:14% 8% -6%; background:radial-gradient(closest-side, rgba(227,190,90,.26), transparent 72%); filter:blur(40px); }
.refhero__win{ position:absolute; margin:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 40px 80px -40px rgba(23,23,23,.4); }
.refhero__win img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.refhero__win--c{ z-index:4; left:50%; top:0; width:64%; transform:translateX(-50%); box-shadow:0 60px 110px -50px rgba(23,23,23,.5); }
.refhero__win--l{ z-index:3; left:2%; top:17%; width:46%; transform:rotate(-5deg); }
.refhero__win--r{ z-index:3; right:2%; top:17%; width:46%; transform:rotate(5deg); }

.refhero__trust{ position:relative; z-index:2; margin:36px auto 0; text-align:center; }
.refhero__trust p{ margin:0 0 22px; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.refhero__badges{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:22px clamp(28px,4vw,56px); }
.refhero__badges img{ width:auto; height:56px; }

@media (max-width:1100px){ .refhero__stage .leaf{ width:400px; } .refhero__stage .leaf--l{ left:-80px; } .refhero__stage .leaf--r{ right:-40px; }}
@media (max-width:760px){
  .refhero__stats{ display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
  .refhero__stats li{ padding:0 6px; }
  .refhero__stats b{ font-size:1.2rem; }
  .refhero__stats span{ font-size:11.5px; line-height:1.35; text-align:center; }
  .refhero__stage{ aspect-ratio:1/.56; margin-top:40px; }
  .refhero__win--c{ width:86%; }
  .refhero__win--l, .refhero__win--r{ width:62%; top:22%; }
  .refhero__win--l{ left:-4%; } .refhero__win--r{ right:-4%; }
  .refhero__stage .leaf{ width:170px; bottom:10%; } .refhero__stage .leaf--l{ left:-36px; } .refhero__stage .leaf--r{ right:-28px; }
  .refhero__trust{ margin-top:28px; }
  /* Fluss statt Raster: bei fuenf Abzeichen sitzt die zweite Zeile sonst
     linksbuendig unter der ersten statt mittig darunter. */
  .refhero__badges{ gap:20px 30px; }
  .refhero__badges img{ height:40px; }}
/* Am Handy drei je Zeile, die restlichen zwei mittig darunter. Ohne die feste
   Drittelung passen je nach Breite vier in die erste Zeile - dann steht das
   fuenfte allein darunter und die Reihe wirkt abgebrochen. */
@media (max-width:480px){
  .refhero__badges{ gap:18px 12px; }
  .refhero__badges img{ flex:0 0 calc(33.333% - 8px); height:36px; object-fit:contain; }
}

.refc__main{ position:relative; z-index:1; }

/* Referenzen: Video-Rahmen und Sterne in der Markenfarbe des Kunden */
.refc[style*="--brand"] .refc__video{ border-color:color-mix(in srgb, var(--brand) 40%, #fff); }
.refc[style*="--brand"] .refc__say figcaption .stars{ color:var(--brand); }

/* -------------------------------------------------- Referenzen: eigene Funnels-Sektion (grünes Panel, laufende Screenshot-Reihen) */
.funnels .head{ margin-bottom:0; }
.funnels__wall{ position:relative; z-index:1; display:grid; gap:18px; width:calc(100% - 48px); max-width:1272px; margin:56px auto 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.funnels__row{ overflow:hidden; }
.funnels__track{ display:flex; width:max-content; }
.funnels__group{ display:flex; gap:18px; padding-right:18px; }
.funnels__group img{ display:block; width:clamp(240px,24vw,340px); aspect-ratio:16/9; height:auto; object-fit:cover; object-position:top; border-radius:12px;
  border:1px solid var(--line); box-shadow:0 24px 48px -30px rgba(23,23,23,.45); }
.funnels__row--l .funnels__track{ animation:funL 70s linear infinite; }
.funnels__row--r .funnels__track{ animation:funR 80s linear infinite; }
@keyframes funL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes funR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .funnels__track{ animation:none !important; }}
.funnels__cta{ position:relative; z-index:1; display:flex; justify-content:center; margin-top:48px; }
@media (max-width:760px){ .funnels__wall{ margin-top:40px; gap:12px; width:calc(100% - 32px); } .funnels__group{ gap:12px; padding-right:12px; } .funnels__group img{ width:220px; border-radius:9px; }}

/* -------------------------------------------------- Erstgespräch buchen v2: zweispaltig, Funnel als Premium-Karte */
.booking{ padding:calc(var(--nav-h) + 64px) 0 56px; }
.booking__grid{ display:grid; grid-template-columns:minmax(0,1fr) 560px; grid-template-areas:"head card" "info card"; gap:0 72px; align-items:start; max-width:1240px; }
.booking__head{ grid-area:head; text-align:left; max-width:none; margin:0; padding-top:18px; }
.booking__head .hero-sub{ margin:0; max-width:520px; }
.booking__title{ margin:18px 0 18px; font-size:clamp(2.4rem,4.6vw,3.7rem); }
.booking__info{ grid-area:info; margin-top:40px; }
.booking .fn{ grid-area:card; }

/* Karte */
.fn{ max-width:none; margin:0; padding:30px 32px 32px; border-radius:28px; border-color:#ece6d6; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 50px 100px -50px rgba(23,23,23,.45), 0 0 0 8px rgba(240,210,127,.12); }
.fn::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:#f0d27f; }
.fn__av{ position:relative; display:block; width:44px; height:44px; flex:none; }
.fn__av img{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 4px 12px -4px rgba(23,23,23,.3); }
.fn__av::after{ content:""; position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%; background:#35c47a; border:2px solid #fff; }
.fn__person img{ width:44px; height:44px; }
.fn__person small::before{ content:none; }
.fn__count{ padding:6px 12px; border-radius:99px; background:#f6f4ee; font-size:12.5px; font-weight:600; color:var(--muted); }
.fn__bar{ height:6px; margin:22px 0 30px; background:#f1efe9; }
.fn__bar i{ background:linear-gradient(90deg,#f0d27f,#e3b341); }
.fn__step h2{ margin:0 0 22px; font-size:clamp(1.45rem,2vw,1.7rem); }

/* Auswahl-Kacheln mit Icon */
.fn__choices{ gap:12px; }
.fn__choice{ gap:16px; padding:14px 18px 14px 14px; border-radius:16px; border:1px solid var(--line); background:#fff; text-align:left;
  transition:border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.fn__choice:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(23,23,23,.35); }
.fn__choice:active{ transform:scale(.99); }
.fn__ic{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#f6f4ee; color:#8a6d1c; transition:background .2s, color .2s; }
.fn__ic svg{ width:20px; height:20px; }
.fn__choice:hover .fn__ic{ background:#f0d27f; color:#1d1402; }
.fn__lbl{ flex:1; display:flex; flex-direction:column; gap:2px; font-family:var(--font-display); font-size:15.5px; font-weight:600; color:var(--ink); }
.fn__choice .fn__go{ width:18px; height:18px; }

/* Formular */
.fn__form input{ padding:15px 16px; border-radius:14px; background:#fbfaf7; }
.fn__form input:focus{ background:#fff; }
.fn__safe{ display:flex; align-items:center; gap:8px; margin:2px 0 0; font-size:13px; color:var(--muted); }
.fn__safe svg{ width:14px; height:14px; color:#22a06b; }

/* linke Spalte: Ablauf, Zitat, Proof */

.bproof{ margin-top:36px; }

/* Siegel */

@media (max-width:1080px){
  .booking__grid{ grid-template-columns:1fr; grid-template-areas:"head" "card" "info"; gap:0; max-width:640px; }
  .booking__head{ text-align:center; padding-top:0; margin-bottom:32px; }
  .booking__head .hero-sub{ margin:0 auto; }
  .booking__info{ margin-top:48px; }
  }
@media (max-width:560px){
  .booking{ padding-top:calc(var(--nav-h) + 36px); }
  .fn{ padding:22px 16px 22px; border-radius:22px; box-shadow:0 40px 80px -50px rgba(23,23,23,.45), 0 0 0 5px rgba(240,210,127,.12); }
  .fn__choice{ padding:12px 14px 12px 12px; gap:12px; }
  .fn__ic{ width:40px; height:40px; }
  .fn__lbl{ font-size:15px; }}

/* Erstgespräch: Überschrift und direkt darunter der Funnel */
.booking__stack{ max-width:680px; }
.booking__stack .booking__head{ text-align:center; padding-top:0; margin:0 0 36px; }
.booking__stack .booking__title{ margin:0; }
.booking__stack .booking__head .hero-sub{ margin:0 auto; }
.booking__stack .booking__info{ margin-top:32px; display:flex; justify-content:center; }
.booking__stack .bproof{ margin-top:0; }

/* Erstgespräch: breiterer Funnel, Antworten als Kacheln nebeneinander */
.booking__stack{ max-width:1000px; }
.booking__stack .fn{ padding:30px 36px 34px; }
.booking__stack .fn__choices{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.booking__stack .fn__choice{ position:relative; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:18px; min-height:132px; padding:18px 18px 20px; }
.booking__stack .fn__choice .fn__go{ position:absolute; top:20px; right:18px; }
.booking__stack .fn__lbl{ font-size:15.5px; line-height:1.35; }
.booking__stack .fn__step h2{ margin-bottom:20px; }
.booking__stack .fn__form{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.booking__stack .fn__form > :not(label){ grid-column:1 / -1; }
@media (max-width:760px){
  .booking__stack .fn__form{ grid-template-columns:1fr; }}
@media (max-width:560px){
  .booking__stack .fn{ padding:22px 16px 22px; }
  .booking__stack .fn__choices{ grid-template-columns:1fr 1fr; gap:10px; }
  .booking__stack .fn__choice{ min-height:118px; gap:14px; padding:14px 12px 16px; }
  .booking__stack .fn__choice .fn__go{ top:16px; right:12px; width:16px; height:16px; }
  .booking__stack .fn__lbl{ font-size:14px; }}
/* Erstgespräch: Funnel ohne eigene Box, sitzt direkt auf dem Seitenhintergrund */
.booking__stack .fn{ background:none; border:0; border-radius:0; box-shadow:none; padding:0; overflow:visible; }
.booking__stack .fn::before{ content:none; }
.booking__stack .fn__choice, .booking__stack .fn__form input{ background:#fff; }
@media (max-width:560px){ .booking__stack .fn{ padding:0; box-shadow:none; }}
/* Erstgespräch: ruhiger Kopf, Frage im Fokus */
.booking__stack .booking__head{ margin-bottom:48px; }
.booking__stack .fn__top{ justify-content:center; }
.booking__stack .fn__count{ padding:0; background:none; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.booking__stack .fn__bar{ width:180px; height:4px; margin:12px auto 30px; }
.booking__stack .fn__step h2{ margin:0; text-align:center; font-size:clamp(1.6rem,2.6vw,2.1rem); }
.booking__stack .fn__hint{ margin:8px 0 26px; text-align:center; font-size:15px; color:var(--muted); }
.booking__stack .fn__step[data-step="4"] h2{ margin-bottom:26px; }
.booking__stack .fn__back{ display:block; margin:22px auto 0; }
.booking__stack .booking__info{ margin-top:80px; }
@media (max-width:560px){
  .booking__stack .booking__head{ margin-bottom:36px; }
  .booking__stack .fn__count{ display:block; }
  .booking__stack .fn__hint{ margin-bottom:20px; font-size:14px; }
  .booking__stack .booking__info{ margin-top:56px; }}
/* Erstgespräch: nur noch eine sichtbare Überschrift, die Frage selbst */
.booking__stack .booking__head{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.booking__stack .fn{ padding-top:24px; }
.booking__stack .fn__step h2{ font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-.035em; line-height:1.1; }
.booking__stack .fn__hint{ margin:12px 0 34px; font-size:16px; }
@media (max-width:560px){ .booking__stack .fn{ padding-top:8px; } .booking__stack .fn__hint{ margin-bottom:24px; }}
/* Erstgespräch: Antwort-Kacheln deutlich als klickbar erkennbar */
.booking__stack .fn__choice{ border:1.5px solid #e6dcc2; background:#fff; box-shadow:0 18px 36px -22px rgba(23,23,23,.32), 0 2px 6px -2px rgba(23,23,23,.06); }
.booking__stack .fn__ic{ background:#fbf1d4; color:#8a6d1c; }
.booking__stack .fn__lbl{ font-size:16.5px; font-weight:700; }
.booking__stack .fn__choice .fn__go{ box-sizing:content-box; width:16px; height:16px; padding:7px; border-radius:50%; background:#f6f4ee; color:var(--ink); transition:background .2s, color .2s, transform .2s var(--ease); }
.booking__stack .fn__choice:hover{ border-color:#e3b341; background:#fffcf3; transform:translateY(-4px); box-shadow:0 26px 44px -22px rgba(168,120,15,.45); }
.booking__stack .fn__choice:hover .fn__ic{ background:#f0d27f; color:#1d1402; }
.booking__stack .fn__choice:hover .fn__go{ background:#f0d27f; color:#1d1402; transform:translateX(2px); }
.booking__stack .fn__choice:focus-visible{ outline:3px solid rgba(227,179,65,.55); outline-offset:3px; }
@media (max-width:560px){
  .booking__stack .fn__lbl{ font-size:14.5px; }
  .booking__stack .fn__choice .fn__go{ top:12px; right:10px; width:14px; height:14px; padding:6px; }}
/* Erstgespräch: Kacheln ohne Schatten und ohne Bewegung beim Hovern */
.booking__stack .fn__choice, .booking__stack .fn__choice:hover, .booking__stack .fn__choice:active{ box-shadow:none; transform:none; }
.booking__stack .fn__choice .fn__go, .booking__stack .fn__choice:hover .fn__go{ transform:none; }
.booking__stack .fn__choice svg, .booking__stack .fn__choice:hover svg{ transform:none !important; transition:color .2s; }
/* Erstgespräch: Funnel füllt den ersten Bildschirm, Footer erst nach dem Scrollen */
.booking{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.booking > .wrap{ width:100%; }

/* -------------------------------------------------- Blog-Übersicht: Leitartikel + Karten mit Projekt-Cover */
.hero--blog{ padding-bottom:12px; }
.blog-list{ padding-top:40px; }
.bmeta{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted-2); }
.bmeta b{ font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }
.bmeta i{ width:4px; height:4px; border-radius:50%; background:#d6d3cb; }
.bmore{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); }
.bmore svg{ width:17px; height:17px; transition:transform .2s var(--ease); }
a:hover .bmore svg{ transform:translateX(3px); }

/* Cover: helle Kachelfläche mit echtem Projekt im Browserfenster */
.bcover{ position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:22px; background:var(--cream); border:1px solid var(--line); }
.bcover::before{ content:""; position:absolute; inset:0; background-image:var(--tile-cream); background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 85%); mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 85%); }
.bcover::after{ content:""; position:absolute; left:10%; right:10%; bottom:-30%; height:60%; background:radial-gradient(closest-side, rgba(240,210,127,.35), transparent); pointer-events:none; }
.bcover__win{ position:absolute; z-index:1; left:9%; right:9%; top:13%; overflow:hidden; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -34px rgba(23,23,23,.45); transition:transform .5s var(--ease); }
.bcover__win::before{ content:""; display:block; height:22px; border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 12px 11px,#e6e4de 3.5px,transparent 4px),radial-gradient(circle at 24px 11px,#e6e4de 3.5px,transparent 4px),radial-gradient(circle at 36px 11px,#e6e4de 3.5px,transparent 4px),#fff; }
.bcover__win img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; }
a:hover .bcover__win{ transform:translateY(-6px); }
.bchip{ position:absolute; z-index:2; left:6%; bottom:9%; display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 10px; border-radius:99px;
  background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -18px rgba(23,23,23,.4); font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--ink); }
.bchip svg{ width:16px; height:16px; padding:6px; box-sizing:content-box; border-radius:50%; background:#fbf1d4; color:#8a6d1c; }
.bchip--price{ padding:10px 18px 10px 10px; border-radius:16px; }
.bchip--price svg{ background:#e8f6ee; color:#15885a; }
.bchip--price b{ display:block; font-size:16px; line-height:1.1; }
.bchip--price small{ display:block; font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--muted); }

/* Leitartikel */
.bfeat{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.bfeat .bcover--lg{ aspect-ratio:16/11; }
.bfeat h2{ margin:16px 0 16px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.12; letter-spacing:-.035em; color:var(--ink); text-wrap:balance; }
.bfeat p{ margin:0 0 26px; max-width:46ch; font-size:17px; line-height:1.65; color:var(--muted); }

/* weitere Artikel */
.bgrid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,48px); margin-top:clamp(64px,7vw,96px); padding-top:clamp(48px,5vw,72px); border-top:1px solid var(--line); }
.bcard{ display:flex; flex-direction:column; }
.bcard__body{ display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:24px 4px 0; }
.bcard h3{ margin:12px 0 10px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.22; letter-spacing:-.025em; color:var(--ink); }
.bcard p{ flex:1; margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--muted); }
.bfeat:hover h2, .bcard:hover h3{ text-decoration:underline; text-decoration-color:#f0d27f; text-decoration-thickness:2px; text-underline-offset:5px; }

@media (max-width:900px){
  .bfeat{ grid-template-columns:1fr; gap:26px; }
  .bgrid{ grid-template-columns:1fr; gap:48px; }}
@media (max-width:560px){
  .bcover{ border-radius:16px; }
  .bcover__win{ left:7%; right:7%; top:11%; border-radius:8px; }
  .bcover__win::before{ height:16px; background-size:auto; }
  .bchip{ font-size:12.5px; padding:7px 12px 7px 8px; }
  .bchip svg{ width:13px; height:13px; padding:5px; }
  .bchip--price b{ font-size:14px; }
  .bfeat p{ font-size:16px; }}

/* Blog: Titelbilder als Icon-Design in Markenfarben statt Screenshots */
/* Blog-Cover: weiße Fläche, goldenes Kachelraster oben und unten, Icon in der Mitte */
.bcover--icon{ display:grid; place-items:center; aspect-ratio:16/9; background:#fff; border:1px solid #f0e6cc; transition:border-color .35s, box-shadow .35s; }
.bcover--icon::before{ content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='2' y='2' width='36' height='36' rx='8' fill='%23fcf6e4' stroke='%23f2e3b8'/%3E%3C/svg%3E");
  background-size:40px 40px; background-position:center;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 26%,transparent 46%,transparent 54%,rgba(0,0,0,.55) 74%,#000 100%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 26%,transparent 46%,transparent 54%,rgba(0,0,0,.55) 74%,#000 100%); }
.bcover--icon::after{ content:""; position:absolute; inset:0; left:auto; right:auto; bottom:auto; height:auto; width:100%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%) center/60% 70% no-repeat; }
a:hover .bcover--icon{ border-color:#e8d49a; box-shadow:0 24px 50px -34px rgba(138,109,28,.45); }
.bfeat .bcover--icon.bcover--lg{ aspect-ratio:16/10.5; }
.bcover__ic{ position:relative; z-index:1; display:grid; place-items:center; width:76px; height:76px; border-radius:22px; background:#fff; color:#8a6d1c;
  box-shadow:0 18px 40px -22px rgba(138,109,28,.45); transition:transform .4s var(--ease); }
.bcover__ic svg{ width:30px; height:30px; }
.bcover--lg .bcover__ic{ width:104px; height:104px; border-radius:28px; }
.bcover--lg .bcover__ic svg{ width:40px; height:40px; }
a:hover .bcover__ic{ transform:translateY(-4px); }
@media (max-width:560px){ .bcover__ic{ width:64px; height:64px; border-radius:18px; } .bcover__ic svg{ width:26px; height:26px; } .bcover--lg .bcover__ic{ width:80px; height:80px; border-radius:22px; } .bcover--lg .bcover__ic svg{ width:32px; height:32px; }}

/* ================================================== Blog-Artikel v2: Kacheln, Pflanzen, Design-Elemente, Animationen */
.read-bar{ position:fixed; z-index:200; top:0; left:0; right:0; height:3px; pointer-events:none; }
.read-bar i{ display:block; width:100%; height:100%; background:linear-gradient(90deg,#f0d27f,#e3b341); transform-origin:0 50%; transform:scaleX(0); }

/* Hero */
.hero--article{ padding-bottom:24px; }
.hero--article .crumbs{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px; background:#fff; border:1px solid var(--line); font-size:13.5px; }
.art-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 30px; }
.art-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:99px; background:rgba(255,255,255,.9); border:1px solid var(--line); font-size:13.5px; font-weight:500; color:var(--muted); }
.art-chip svg{ width:15px; height:15px; color:var(--gold-text); }
.art-chip--author{ color:var(--ink); font-weight:600; }
.art-chip--author img{ width:auto; height:18px; }

/* Artikel-Fläche */
.article{ overflow:hidden; }
.article .wrap{ position:relative; z-index:1; }
.article .deco-leaf{ z-index:0; }
.article__grid{ gap:80px; }

/* Einleitung */
.prose .prose__lead{ position:relative; margin-bottom:8px; padding:26px 28px 26px 32px; border-radius:20px; background:#fff; border:1px solid var(--line); font-size:1.18rem; line-height:1.7; }
.prose .prose__lead::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:3px; border-radius:0 3px 3px 0; background:#f0d27f; }

/* Kapitel-Überschriften mit Nummern-Kachel */
.prose h2{ position:relative; display:flex; align-items:flex-start; gap:16px; margin:88px 0 20px; padding-top:30px; }
.prose h2::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg, var(--line), transparent 80%); }
.prose h2 .n{ flex:none; display:grid; place-items:center; width:46px; height:46px; margin:-4px 0 0; border-radius:14px; background:#fbf1d4; border:1px solid #f0e2b6;
  font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0; color:#8a6d1c; transition:background .4s, color .4s, transform .5s cubic-bezier(.3,1.5,.5,1); transform:scale(.7); }
.prose h2.is-in .n{ transform:none; background:#f0d27f; color:#1d1402; border-color:#f0d27f; }

/* Listen mit Haken */
.prose ul{ gap:12px; }
.prose ul li{ padding-left:34px; }
.prose ul li::before{ left:0; top:.28em; width:22px; height:22px; border-radius:50%; background:#fbf1d4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6 9 17l-5-5' stroke='%238a6d1c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Tabellen */
.tbl-wrap{ border-radius:20px; border-color:#ece6d6; box-shadow:0 1px 0 #fff inset; }
.tbl th{ background:#faf6ea; color:#8a6d1c; border-bottom:1px solid #efe4c6; }
.tbl td:first-child{ font-weight:600; color:var(--ink); }
.tbl tbody tr{ transition:background .2s; }
.tbl tbody tr:hover{ background:#fffcf3; }
.tbl td.price, .tbl td strong{ color:var(--ink); }
.tbl td.price{ font-family:var(--font-display); }
.tbl-wrap.is-in tbody tr{ animation:rowIn .5s var(--ease) both; animation-delay:calc(var(--r,0) * 45ms + 120ms); }
@keyframes rowIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

/* Preis-Karten */
.price-grid{ gap:14px; }
.price-card{ padding:24px 22px; border-radius:20px; transition:border-color .25s, transform .3s var(--ease); }
.price-card:hover{ border-color:#e3c77a; transform:translateY(-4px); }
.price-card__price{ font-size:1.55rem; }
.price-card--hot{ background:linear-gradient(180deg,#fffaf0,#fff 60%); border-color:#e3c77a; box-shadow:none; }
.price-card--hot .price-badge{ padding:4px 10px; border-radius:99px; background:#f0d27f; color:#1d1402; }

/* Faktoren-Kacheln mit Nummer */
.fac-grid{ counter-reset:fac; gap:14px; }
.fac{ position:relative; padding:24px 22px 22px 70px; border-radius:20px; counter-increment:fac; transition:border-color .25s, transform .3s var(--ease); }
.fac::before{ content:counter(fac, decimal-leading-zero); position:absolute; left:20px; top:22px; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#fbf1d4; font-family:var(--font-display); font-size:12.5px; font-weight:700; color:#8a6d1c; }
.fac:hover{ border-color:#e3c77a; transform:translateY(-3px); }
.fac h3{ margin-bottom:6px; }

/* Hinweis-Box */
.callout{ position:relative; padding:24px 26px 24px 72px; border-radius:20px; }
.callout::before{ content:"!"; position:absolute; left:22px; top:22px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#f0d27f; font-family:var(--font-display); font-weight:800; font-size:16px; color:#1d1402; }

/* Kennzahlen */
.stat-band{ gap:14px; }
.stat-band__item{ position:relative; overflow:hidden; padding:30px 18px 24px; border-radius:20px; background:#faf6ea; border-color:#efe4c6; }
.stat-band__item::before{ content:""; position:absolute; inset:0; background-image:var(--tile-cream); background-size:32px 32px; opacity:.55; -webkit-mask-image:linear-gradient(#000,transparent 75%); mask-image:linear-gradient(#000,transparent 75%); }
.stat-band__item > *{ position:relative; }
.stat-band__num{ font-size:2.4rem; color:#8a6d1c; }

/* Förder-Rechnung */
.p-calc{ position:relative; overflow:hidden; padding:28px 30px; border-radius:22px; border-color:#ece6d6; box-shadow:none; }
.p-calc::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:#f0d27f; }
.p-calc__bar{ height:12px; margin:6px 0 10px; border-radius:99px; background:#f3efe4; overflow:hidden; }
.p-calc__bar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#1f9d62,#35c47a); transition:width 1.1s cubic-bezier(.2,.8,.2,1) .2s; }
.p-calc.is-in .p-calc__bar i{ width:var(--w); }
.p-calc__legend{ display:flex; gap:18px; margin-bottom:14px; font-size:13px; color:var(--muted); }
.p-calc__legend span{ display:inline-flex; align-items:center; gap:7px; }
.p-calc__legend i{ width:9px; height:9px; border-radius:50%; background:#e6e0d0; }
.p-calc__legend i.g{ background:#35c47a; }

/* Kundenzitat */
.pull{ position:relative; overflow:hidden; padding:34px 36px 30px; border-left:0; border-radius:22px; background:#faf6ea; border:1px solid #efe4c6; }
.pull::before{ content:"“"; position:absolute; right:22px; top:-26px; font-family:Georgia,serif; font-size:160px; line-height:1; color:#f0d27f; opacity:.5; }
.pull .stars{ color:#e3b341; font-size:14px; letter-spacing:2px; }
.pull__q{ position:relative; font-size:1.4rem !important; }
.prose blockquote{ position:relative; margin:36px 0; padding:26px 30px 26px 64px; border-left:0; border-radius:20px; background:#fff; border:1px solid var(--line); }
.prose blockquote::before{ content:"“"; position:absolute; left:20px; top:10px; font-family:Georgia,serif; font-size:64px; line-height:1; color:#f0d27f; }

/* grüne CTA-Boxen */
.inline-cta{ position:relative; overflow:hidden; padding:30px 32px; border-radius:22px; }
.inline-cta > :not(.tiles){ position:relative; z-index:1; }
.inline-cta.is-green .tiles--dark, .side-cta.is-green .tiles--dark{ -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%); mask-image:linear-gradient(90deg,#000,transparent 70%); }
.inline-cta .btn{ background:#f0d27f; color:#1d1402; }
.side-cta{ position:relative; overflow:hidden; padding:24px; border-radius:20px; }
.side-cta > :not(.tiles){ position:relative; z-index:1; }

/* Inhaltsverzeichnis mit aktivem Kapitel */
.toc{ position:relative; border-left:2px solid var(--line); padding-left:16px; }
.toc a{ position:relative; transition:color .2s, transform .25s var(--ease); }
.toc a::before{ content:""; position:absolute; left:-18px; top:50%; width:2px; height:0; background:#e3b341; transform:translateY(-50%); transition:height .3s var(--ease); }
.toc a.is-active{ color:var(--ink); font-weight:600; transform:translateX(3px); }
.toc a.is-active::before{ height:100%; }

/* Fazit */
.fazit{ position:relative; margin-top:88px; padding:30px 32px 28px 32px; border-radius:22px; background:#fff; border:1px solid #ece6d6; }
.fazit::before{ content:""; position:absolute; inset:0 0 auto; height:4px; border-radius:22px 22px 0 0; background:#f0d27f; }
.fazit__ic{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:14px; border-radius:12px; background:#e8f6ee; color:#15885a; }
.fazit__ic svg{ width:18px; height:18px; }
.fazit h2{ display:block; margin:0 0 12px; padding:0; }
.fazit h2::before{ content:none; }
.fazit p{ margin:0; }

/* Weiterlesen */
.rel{ transition:border-color .25s, transform .3s var(--ease); }
.rel:hover{ border-color:#e3c77a; transform:translateY(-3px); }

@media (max-width:760px){
  .prose h2{ gap:12px; margin-top:64px; padding-top:24px; }
  .prose h2 .n{ width:38px; height:38px; border-radius:11px; font-size:13px; }
  .prose .prose__lead{ padding:20px 20px 20px 24px; font-size:1.08rem; }
  .fac{ padding:20px 18px 20px 62px; }
  .fac::before{ left:16px; top:18px; }
  .callout{ padding:20px 20px 20px 62px; }
  .callout::before{ left:16px; top:18px; }
  .pull{ padding:28px 22px 24px; }
  .fazit{ margin-top:64px; padding:24px 22px; }}
@media (prefers-reduced-motion:reduce){ .tbl-wrap.is-in tbody tr{ animation:none; } .p-calc__bar i{ transition:none; }}
.inline-cta.is-green, .side-cta.is-green{ background:var(--green-bg); }
/* Artikel beginnen direkt mit Kapitel 01, ohne Einleitungs-Box */
.prose > h2:first-child{ margin-top:0; padding-top:0; }
.prose > h2:first-child::before{ content:none; }
/* Preis-Karten: Preis immer in einer Zeile, Badge über der Karte, Inhalte auf gleicher Höhe */
.price-grid{ margin-top:22px; }
.price-card__price{ white-space:nowrap; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.2; }
.price-card--hot .price-badge{ position:absolute; top:-12px; left:20px; margin:0; }
/* Gold-Buttons in den grünen Boxen: Inhalt mittig, Pfeil sichtbar */
.inline-cta .btn, .side-cta .btn{ justify-content:center; text-align:center; gap:10px; }
.inline-cta .btn svg, .side-cta .btn svg{ color:#1d1402; }
.price-card--hot .price-badge{ left:50%; transform:translateX(-50%); white-space:nowrap; }

/* Handy: Tabellen als Karten statt seitlich scrollen */
@media (max-width:760px){
  .tbl-wrap{ overflow:visible; border:0; background:none; border-radius:0; box-shadow:none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }
  .tbl thead{ display:none; }
  .tbl tbody{ display:grid; gap:10px; }
  .tbl tbody tr{ padding:16px 18px; border-radius:16px; background:#fff; border:1px solid #ece6d6; }
  .tbl tbody tr:hover{ background:#fff; }
  .tbl td{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; text-align:right; }
  .tbl td::before{ content:attr(data-label); flex:none; max-width:45%; text-align:left; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
  .tbl td:first-child{ display:block; padding:0 0 10px; margin-bottom:4px; border-bottom:1px solid #efe4c6; text-align:left; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink); }
  .tbl td:first-child::before{ content:none; }
  .tbl td:last-child{ border-bottom:0; padding-bottom:0; }
  .tbl td.price{ white-space:normal; color:#8a6d1c; }
  .tbl td[data-label=""]::before{ content:none; }
}

/* Handy: Erstgespräch-Button unten immer dabei */
.mcta{ display:none; }
@media (max-width:760px){
  .mcta{ position:fixed; z-index:150; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; justify-content:center; align-items:center; gap:10px;
    padding:16px 20px; border-radius:16px; background:#0f0a0a; color:#fff; font-family:var(--font-display); font-size:16px; font-weight:700;
    box-shadow:0 18px 40px -14px rgba(15,10,10,.55); transform:translateY(140%); transition:transform .35s var(--ease); }
  .mcta svg{ width:17px; height:17px; color:var(--gold-bright); }
  .mcta.is-on{ transform:none; }
  body:has(.mcta) .footer{ padding-bottom:90px; }}
@media (max-width:760px){
  .tbl, .tbl tbody, .tbl tr, .tbl td{ box-sizing:border-box; min-width:0; }
  .tbl{ table-layout:auto; }
  .tbl td{ overflow-wrap:anywhere; }
  .tbl td::before{ max-width:42%; }
  .tbl-wrap.is-in tbody tr{ animation:none; }}

/* -------------------------------------------------- Ablauf: automatischer Durchlauf Schritt 1 → 4 (Loop), Hover springt zum Schritt */
.journey.is-cycling .journey__line i{ width:var(--jp, 0%); transition:width .8s var(--ease); }
.journey.is-cycling .jstep__dot{ transition-delay:0s; background:#fff; color:#b9b6ad; border-color:#e6e4df; box-shadow:none; transition:background .45s, color .45s, border-color .45s, box-shadow .45s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.journey.is-cycling .jstep.is-done .jstep__dot{ background:#fbf1d4; color:#8a6d1c; border-color:#f0e2b6; }
.journey.is-cycling .jstep.is-active .jstep__dot{ background:var(--gold-grad); color:#3a2a05; border-color:transparent; transform:scale(1.14); box-shadow:0 0 0 8px rgba(233,207,122,.3); animation:jDotPulse 2s ease-out infinite; }
@keyframes jDotPulse{ 0%{ box-shadow:0 0 0 0 rgba(233,207,122,.55); } 70%,100%{ box-shadow:0 0 0 14px rgba(233,207,122,0); } }

.journey.is-cycling .jstep__card{ position:relative; cursor:pointer; opacity:.58; filter:grayscale(1); box-shadow:none; transition:opacity .45s, filter .45s, transform .45s var(--ease), box-shadow .45s, border-color .45s; }
.journey.is-cycling .jstep__card:hover{ transform:none; }
.journey.is-cycling .jstep.is-active .jstep__card{ opacity:1; filter:none; transform:translateY(-8px); border-color:#e3c77a; box-shadow:0 34px 60px -34px rgba(168,120,15,.45); }
/* Zeitbalken im aktiven Schritt */
.journey.is-cycling .jstep__card::after{ content:""; position:absolute; z-index:3; left:0; top:0; height:3px; width:0; background:var(--gold-grad); }
.journey.is-cycling .jstep.is-active .jstep__card::after{ animation:jTimer var(--jdur, 3.6s) linear forwards; }
/* Auf schmalen Geraeten entscheidet die Scrollposition ueber den aktiven
   Schritt, nicht die Zeit. Der Balken markiert ihn dann, statt abzulaufen. */
@media (max-width:1060px){
  .journey.is-cycling .jstep.is-active .jstep__card::after{ animation:none; width:100%; }
}
.journey.is-hold .jstep.is-active .jstep__card::after{ animation:none; width:100%; }
@keyframes jTimer{ from{ width:0; } to{ width:100%; } }
/* Motive nur im aktiven Schritt animieren */
/* nicht aktive Schritte zeigen das fertige Motiv (nie leer) */
.journey.is-cycling .jstep:not(.is-active) .jstep__vis *{ animation:none !important; }
@media (max-width:1060px){ .journey.is-cycling .jstep.is-active .jstep__card{ transform:none; }}

/* Schritt 2 (Struktur): Elemente immer sichtbar, Animation hebt nur hervor statt ein- und auszublenden */
.jmap__root{ animation:jvRoot2 6s var(--ease) infinite both; }
.jmap__lines path{ stroke-dasharray:none; animation:jvLine2 6s ease infinite both; }
.jmap__kids span{ animation:jvKid2a 6s var(--ease) infinite both; }
.jmap__kids span:nth-child(2){ animation-name:jvKid2b; }
.jmap__kids span.is-cta{ animation-name:jvKid2c; }
@keyframes jvRoot2{ 0%,100%{ transform:none; } 8%{ transform:scale(1.1); } 16%{ transform:none; } }
@keyframes jvLine2{ 0%,12%{ stroke:#d9d3c4; } 22%,72%{ stroke:#e3b341; } 86%,100%{ stroke:#d9d3c4; } }
@keyframes jvKid2a{ 0%,20%{ transform:none; border-color:var(--line); } 27%{ transform:translateY(-6px) scale(1.06); border-color:#e3c77a; } 36%,100%{ transform:none; border-color:var(--line); } }
@keyframes jvKid2b{ 0%,28%{ transform:none; border-color:var(--line); } 35%{ transform:translateY(-6px) scale(1.06); border-color:#e3c77a; } 44%,100%{ transform:none; border-color:var(--line); } }
@keyframes jvKid2c{ 0%,36%{ transform:none; box-shadow:0 10px 20px -16px rgba(23,23,23,.4); } 43%{ transform:translateY(-6px) scale(1.08); box-shadow:0 0 0 6px rgba(240,210,127,.35); } 56%,100%{ transform:none; box-shadow:0 10px 20px -16px rgba(23,23,23,.4); } }

/* -------------------------------------------------- Primär-Button: tiefes Grün-Schwarz, goldener Pfeil-Kreis, Lichtschweif */
.btn-dark, .mcta{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:linear-gradient(180deg,#1d3226 0%,#0e1f15 55%,#09160e 100%);
  border:1px solid rgba(255,255,255,.07); border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(3,23,10,.25), 0 14px 26px -14px rgba(3,23,10,.6);
  transition:transform .25s var(--ease), box-shadow .3s, background .3s;
}
/* goldener Lichtschweif: läuft ab und zu von selbst, beim Hovern sofort */
.btn-dark::before, .mcta::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; width:60%; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(240,210,127,0) 30%, rgba(240,210,127,.28) 50%, rgba(240,210,127,0) 70%, transparent 100%);
  transform:translateX(-120%); animation:btnShine 6.5s ease-in-out 2s infinite;
}
@keyframes btnShine{ 0%,82%{ transform:translateX(-120%); } 100%{ transform:translateX(260%); } }
.btn-dark:hover{ transform:translateY(-2px); background:linear-gradient(180deg,#223a2c 0%,#11251a 55%,#0a1810 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(3,23,10,.2), 0 20px 34px -14px rgba(3,23,10,.6), 0 0 0 4px rgba(240,210,127,.16); }
.btn-dark:hover::before{ animation:btnShineHover .85s ease-out; }
@keyframes btnShineHover{ from{ transform:translateX(-120%); } to{ transform:translateX(260%); } }
.btn-dark:active, .mcta:active{ transform:translateY(0) scale(.97); }
.btn-dark:focus-visible{ outline:3px solid rgba(240,210,127,.6); outline-offset:3px; }

/* Pfeil sitzt in einem goldenen Kreis rechts */
.btn-dark:has(> svg), .mcta{ gap:24px; padding-right:20px; }
.btn-lg.btn-dark:has(> svg){ padding-right:22px; }
.btn-dark:has(> svg)::after, .mcta::after{
  content:""; position:absolute; z-index:-1; right:8px; top:50%; width:36px; height:36px; margin-top:-18px; border-radius:50%;
  background-color:#f0d27f; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px -4px rgba(240,210,127,.6);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.btn-lg.btn-dark:has(> svg)::after{ right:9px; width:40px; height:40px; margin-top:-20px; }
.btn-dark > svg, .mcta > svg{ color:#1d1402; filter:none; }
/* Hover: Pfeil raus nach rechts, neuer Pfeil kommt von links in den Kreis */
.btn-dark:hover::after, .btn-dark:focus-visible::after{ transform:scale(1.12); }
.btn-dark:hover > svg, .btn-dark:focus-visible > svg{ animation:btnArrow .55s var(--ease) both; }
@keyframes btnArrow{ 0%{ transform:none; opacity:1; } 45%{ transform:translateX(16px); opacity:0; } 46%{ transform:translateX(-16px); opacity:0; } 100%{ transform:none; opacity:1; } }

/* in den grünen Boxen bleibt der Button gold, der Kreis wird dunkel */
.inline-cta .btn-dark, .side-cta .btn-dark{ background:#f0d27f; color:#1d1402; border-color:transparent; box-shadow:none; }
.inline-cta .btn-dark::before, .side-cta .btn-dark::before{ background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); }
.inline-cta .btn-dark::after, .side-cta .btn-dark::after{ background-color:#0e1f15; box-shadow:none; }
.inline-cta .btn-dark > svg, .side-cta .btn-dark > svg{ color:#f0d27f; }
@media (prefers-reduced-motion:reduce){
  .btn-dark::before, .mcta::before{ animation:none; }
  .btn-dark:has(> svg)::after, .mcta::after, .btn-dark > svg, .mcta > svg{ transition:none; }
  .btn-dark:hover > svg, .btn-dark:focus-visible > svg{ animation:none; }}
.inline-cta .btn-dark:has(> svg), .side-cta .btn-dark:has(> svg){ padding-left:26px; padding-right:66px; }
.inline-cta .btn-dark{ font-weight:700; }
.mcta:has(> svg){ justify-content:space-between; padding-left:22px; }
/* Pfeil immer exakt im Kreis, auch bei voller Breite (Handy) */
.btn-dark:has(> svg), .mcta{ padding-right:66px; }
.btn-lg.btn-dark:has(> svg){ padding-right:72px; }
.btn-dark > svg, .mcta > svg{ position:absolute; z-index:1; right:17.5px; top:50%; margin-top:-8.5px; }
.btn-lg.btn-dark > svg{ right:20.5px; }
.mcta:has(> svg){ justify-content:center; padding-left:66px; }
.btn-row .btn-dark:has(> svg){ padding-left:30px; }
@media (max-width:560px){ .btn-row .btn-dark:has(> svg){ padding-left:24px; }}
@media (max-width:760px){ .mcta{ position:fixed; border-radius:16px; }}

/* Erstgespräch Schritt 4: Calendly breit eingebettet */
.booking__stack:has(.fn.is-cal){ max-width:1120px; }
.fn__cal{ position:relative; width:100%; min-height:780px; margin-top:6px; border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.fn__cal .calendly-inline-widget, .fn__cal iframe{ width:100% !important; min-width:320px; height:780px !important; border:0; }
.fn__cal-load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-size:15px; color:var(--muted); }
.fn__cal-load span{ width:34px; height:34px; border-radius:50%; border:3px solid #f1ead4; border-top-color:#e3b341; animation:calSpin .8s linear infinite; }
@keyframes calSpin{ to{ transform:rotate(360deg); } }
@media (max-width:760px){ .fn__cal{ min-height:1000px; border-radius:16px; } .fn__cal .calendly-inline-widget, .fn__cal iframe{ height:1000px !important; }}
/* verhindert, dass das eingebettete Calendly die Buchungs-Sektion seitlich verschiebt */
.booking{ overflow:clip; }

/* Startseite: zusätzliche Anfrage-Buttons unter den Sektionen */
.sec-cta{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:52px; text-align:center; }
.sec-cta--after-panel{ margin-top:36px; }
@media (max-width:560px){ .sec-cta{ margin-top:40px; } .sec-cta .btn{ width:100%; }}

/* Erstgespräch: Maximilian stellt die Fragen im Chat-Stil */
.fn__sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fn__chat{ display:flex; align-items:flex-end; justify-content:center; gap:16px; max-width:820px; margin:6px auto 30px; }
.fn__chat-av{ position:relative; flex:none; width:72px; height:72px; }
.fn__chat-av img{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 12px 28px -12px rgba(23,23,23,.4), 0 0 0 1px #efe4c6; }
.fn__chat-av::after{ content:""; position:absolute; right:3px; bottom:4px; width:15px; height:15px; border-radius:50%; background:#35c47a; border:3px solid #fff; animation:fnOnline 2.4s ease-out infinite; }
@keyframes fnOnline{ 0%{ box-shadow:0 0 0 0 rgba(53,196,122,.5); } 70%,100%{ box-shadow:0 0 0 8px rgba(53,196,122,0); } }
.fn__bubble{ position:relative; min-width:220px; min-height:92px; padding:18px 28px 22px; border-radius:26px 26px 26px 8px; background:#fff; border:1px solid #ece4cf; box-shadow:0 30px 60px -40px rgba(23,23,23,.35); text-align:left; }
.fn__bubble::before{ content:""; position:absolute; left:-9px; bottom:14px; width:18px; height:18px; background:#fff; border-left:1px solid #ece4cf; border-bottom:1px solid #ece4cf; transform:rotate(45deg); border-radius:0 0 0 4px; }
.fn__bname{ display:block; margin-bottom:6px; font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink); }
.fn__bname em{ font-style:normal; font-weight:500; color:var(--muted-2); }
.fn__q{ margin:0; min-height:1.15em; font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
.fn:not(.is-ready):not(.is-typing) .fn__q::after{ content:""; display:inline-block; width:3px; height:.9em; margin-left:4px; vertical-align:-.08em; border-radius:2px; background:#e3b341; animation:caret .8s steps(1) infinite; }
.fn__typing{ display:none; gap:6px; padding:10px 0 4px; }
.fn__typing i{ width:9px; height:9px; border-radius:50%; background:#d7c690; animation:fnDot 1s ease-in-out infinite; }
.fn__typing i:nth-child(2){ animation-delay:.15s; } .fn__typing i:nth-child(3){ animation-delay:.3s; }
@keyframes fnDot{ 0%,60%,100%{ transform:none; opacity:.45; } 30%{ transform:translateY(-5px); opacity:1; } }
.fn.is-typing .fn__typing{ display:flex; }
.fn.is-typing .fn__q{ display:none; }
/* Antworten erst nach der Frage */
.fn .fn__step.is-active > :not(h2){ transition:opacity .45s ease, transform .45s var(--ease); }
.fn:not(.is-ready) .fn__step.is-active > :not(h2){ opacity:0; transform:translateY(10px); pointer-events:none; }
.booking__stack .fn__hint{ margin-top:0; }
@media (max-width:560px){
  .fn__chat{ gap:10px; margin-bottom:22px; }
  .fn__chat-av, .fn__chat-av img{ width:52px; height:52px; }
  .fn__chat-av::after{ width:12px; height:12px; right:1px; bottom:2px; border-width:2px; }
  .fn__bubble{ min-width:0; flex:1; padding:14px 18px 16px; border-radius:20px 20px 20px 6px; }
  .fn__q{ font-size:1.45rem; }}
@media (prefers-reduced-motion:reduce){ .fn .fn__step.is-active > :not(h2){ transition:none; }}

/* Calendly ohne graue Fläche und ohne Rahmen */
.fn__cal{ background:transparent; border:0; border-radius:0; }
.fn.is-typing .fn__q{ display:block; height:0; min-height:0 !important; overflow:hidden; }
.fn.is-typing .fn__bubble{ min-width:var(--bw, 220px); }
/* Chat-Blase dezenter: wie eine echte Nachricht statt großer Überschrift */
.fn__chat{ gap:12px; margin:4px auto 26px; }
.fn__chat-av, .fn__chat-av img{ width:52px; height:52px; }
.fn__chat-av img{ border-width:2px; box-shadow:0 8px 18px -10px rgba(23,23,23,.35), 0 0 0 1px #efe4c6; }
.fn__chat-av::after{ width:12px; height:12px; right:0; bottom:2px; border-width:2px; }
.fn__bubble{ min-width:0; min-height:0; padding:12px 18px 14px; border-radius:20px 20px 20px 6px; border-color:#ece6d6; box-shadow:0 10px 24px -18px rgba(23,23,23,.3); }
.fn__bubble::before{ left:-6px; bottom:12px; width:12px; height:12px; border-radius:0 0 0 3px; border-color:#ece6d6; }
.fn__bname{ margin-bottom:3px; font-size:12px; }
.fn__q{ font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.3; letter-spacing:-.015em; }
.fn__typing{ padding:6px 0 2px; }
.fn__typing i{ width:7px; height:7px; }
.fn.is-typing .fn__bubble{ min-width:var(--bw, 180px); }
@media (max-width:560px){
  .fn__chat-av, .fn__chat-av img{ width:44px; height:44px; }
  .fn__bubble{ padding:10px 14px 12px; }
  .fn__q{ font-size:1.15rem; }}
.video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#111; }

/* Link auf der Referenzen-Übersicht */
/* Etwas praesenter als ein reiner Textlink, aber kein grosser Knopf:
   Umriss in der Markenfarbe des Projekts, der beim Zeigen ausgefuellt wird. */
.refc__more{ display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:11px 20px; border-radius:var(--r-pill);
  border:1.5px solid color-mix(in srgb, var(--brand, var(--ink)) 45%, transparent);
  background:color-mix(in srgb, var(--brand, var(--ink)) 7%, #fff);
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--brand, var(--ink));
  transition:background .25s, border-color .25s, color .25s, transform .2s var(--ease); }
.refc__more svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.refc__more:hover{ background:var(--brand, var(--ink)); border-color:var(--brand, var(--ink)); color:#fff; transform:translateY(-1px); }
.refc__more:hover svg{ transform:translateX(3px); }

/* -------------------------------------------------- Referenzkarten mit mehr Leben */
.refc{ --brand:var(--gold-text); }
.refc + .refc{ border-top:0; }

/* Zitat: großes Anführungszeichen, Gesicht, Name */
.refc__say{ position:relative; padding-left:22px; border-left:3px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.refc__say blockquote{ color:var(--ink); }
.refc__say figcaption{ gap:12px; }
.refc__av{ flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--brand) 45%, transparent); }
.refc__av img{ width:100%; height:100%; object-fit:cover; }
.refc__av--ini{ display:grid; place-items:center; font-family:var(--font-display); font-size:15px; font-weight:700; color:#fff; background:var(--brand); }
.refc__who{ display:flex; flex-direction:column; line-height:1.25; }
.refc__say figcaption .stars{ order:3; margin-left:auto; }

/* Inhalte fliegen gestaffelt ein, sobald die Karte ins Bild kommt */
html:not(.no-js) .refc__main > *{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html:not(.no-js) .refc.is-seen .refc__main > *{ opacity:1; transform:none; }
html:not(.no-js) .refc.is-seen .refc__main > :nth-child(2){ transition-delay:.08s; }
html:not(.no-js) .refc.is-seen .refc__main > :nth-child(3){ transition-delay:.16s; }
html:not(.no-js) .refc.is-seen .refc__main > :nth-child(4){ transition-delay:.24s; }
html:not(.no-js) .refc.is-seen .refc__main > :nth-child(5){ transition-delay:.32s; }
html:not(.no-js) .refc.is-seen .refc__main > :nth-child(6){ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){
  html:not(.no-js) .refc__main > *{ opacity:1; transform:none; transition:none; }
}
@media (max-width:560px){ .refc__say{ padding-left:16px; }}

/* -------------------------------------------------- Referenz-Unterseiten (referenz-*.html) */
.case{ --brand:var(--gold-text); }
.case .gold{ color:var(--brand); }
.case .eyebrow{ color:var(--brand); }
.case-head{ position:relative; z-index:1; max-width:680px; margin:0 auto 52px; }
.case-head .h2{ margin-top:10px; }
.case-head p{ margin:14px 0 0; color:var(--muted); }

/* Hero: Text links, laufende Webseite rechts */
.case-hero.refc{ padding:calc(var(--nav-h) + 48px) 0 110px; }
.case-hero .acc--gold{ background:color-mix(in srgb, var(--brand) 16%, #fff); border-color:color-mix(in srgb, var(--brand) 26%, #fff); }
.case-hero .acc--soft{ background:color-mix(in srgb, var(--brand) 7%, #f4f3ef); border-color:color-mix(in srgb, var(--brand) 12%, #e6e4de); }
.case-hero .btn-dark{ background:var(--brand); border-color:transparent; box-shadow:0 18px 34px -16px var(--brand); }
.case-hero .btn-dark:hover{ background:color-mix(in srgb, var(--brand) 88%, #000); box-shadow:0 22px 40px -16px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.case-hero .btn-dark::before{ background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); }
.case-hero .btn-dark:has(> svg)::after{ background-color:#fff; box-shadow:none; }
.case-hero .btn-dark > svg{ color:var(--brand); }
.case-hero .btn-ghost{ border-color:color-mix(in srgb, var(--brand) 30%, var(--line)); }
.case-hero .btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.case-hero .case-back{ color:var(--brand); }
.case-hero__leaf{ top:auto; bottom:40px; left:-300px; width:380px; z-index:0; }
.case-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(36px,4vw,64px); align-items:center; }
.case-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:34px; font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s; }
.case-back:hover{ color:var(--ink); }
.case-back svg{ width:15px; height:15px; transform:rotate(180deg); transition:transform .2s var(--ease); }
.case-back:hover svg{ transform:rotate(180deg) translateX(3px); }
.case-hero__top{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.case-hero__logo{ width:auto; height:auto; max-height:54px; max-width:230px; }
.case-hero__title.refc__lead{ font-size:clamp(2.1rem,3.4vw,3rem); line-height:1.08; letter-spacing:-.035em; text-wrap:pretty; }
.case-hero__text{ margin:24px 0 0; max-width:48ch; font-size:18px; line-height:1.65; color:var(--muted); }
.case-hero__text--quote{ font-family:var(--font-display); font-weight:500; color:var(--ink); }
.case-hero__text--quote span{ display:block; margin-top:8px; font-size:14.5px; font-weight:600; color:var(--brand); }
.case-hero__cta{ margin-top:34px; }
.case-hero__cta .btn-lg{ padding:16px 24px; font-size:16px; }
.case-hero__cta .btn-dark.btn-lg{ padding-right:62px; }
.case-hero__reel.refc__show{ height:min(620px,72vh); min-height:480px; }

/* Leiste "Auf einen Blick" schwebt über der Kante zum nächsten Abschnitt */
.case-glance-sec{ position:relative; z-index:3; margin-top:-64px; }
.case-glance{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 70px -40px rgba(23,23,23,.35); overflow:hidden; }
.case-glance > div{ position:relative; padding:24px 28px; }
.case-glance > div + div{ border-left:1px solid var(--line); }
.case-glance > div:first-child::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
.case-glance dt{ margin-bottom:6px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.case-glance dd{ margin:0; font-family:var(--font-display); font-size:16.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.case-glance .stars{ color:var(--brand); letter-spacing:2px; }

/* Startseite im Browser mit schwebenden Merkmalen */
.case-stage{ padding-top:120px; padding-bottom:150px; }
.case-stage__wrap{ position:relative; z-index:1; max-width:1000px; margin:0 auto; }
.case-browser{ position:relative; display:block; overflow:hidden; border-radius:18px; background:#fff; border:1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); box-shadow:0 40px 80px -50px rgba(23,23,23,.45); }
.case-browser__bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); background:#faf9f6; }
.case-browser__bar i{ width:11px; height:11px; border-radius:50%; background:#e4e0d6; }
.case-browser__bar i:first-child{ background:color-mix(in srgb, var(--brand) 55%, #fff); }
.case-browser img{ display:block; width:100%; height:auto; }
.case-float{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:10px; padding:11px 16px 11px 12px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 22px 44px -22px rgba(23,23,23,.4); font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; animation:caseFloat 6s ease-in-out infinite; }
.case-float svg{ width:28px; height:28px; padding:6px; border-radius:9px; color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, #fff); }
.case-float--1{ left:-54px; top:18%; }
.case-float--2{ right:-48px; top:10%; animation-delay:-1.5s; }
.case-float--3{ left:-30px; bottom:12%; animation-delay:-3s; }
.case-float--4{ right:-40px; bottom:20%; animation-delay:-4.5s; }
@keyframes caseFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* Kundenstimme */
.case-voice{ position:relative; z-index:1; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.case-voice--solo{ display:block; max-width:820px; margin:0 auto; }
.case-voice__video{ margin-top:0; border-color:color-mix(in srgb, var(--brand) 40%, #fff); }
.case-quote{ position:relative; margin:0; padding:40px 36px 32px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 70px -45px rgba(23,23,23,.4); }
.case-quote__mark{ position:absolute; top:-18px; left:32px; width:52px; height:40px; padding:9px 11px; border-radius:12px; color:#fff; background:var(--brand); box-shadow:0 12px 24px -12px var(--brand); }
.case-quote blockquote{ margin:0 0 26px; font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.35; letter-spacing:-.02em; color:var(--ink); text-wrap:pretty; }
.case-quote figcaption{ display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid var(--line); }
.case-quote figcaption .refc__av{ width:52px; height:52px; }
.case-quote__who{ display:flex; flex-direction:column; line-height:1.3; }
.case-quote__who b{ font-family:var(--font-display); color:var(--ink); }
.case-quote__who span{ font-size:14px; color:var(--muted); }
.case-quote figcaption .stars{ margin-left:auto; color:var(--brand); letter-spacing:2px; }
.case-voice--solo .case-quote{ text-align:center; padding:52px 48px 36px; }
.case-voice--solo .case-quote__mark{ left:50%; margin-left:-26px; }
.case-voice--solo figcaption{ justify-content:center; text-align:left; }
.case-voice--solo figcaption .stars{ margin-left:18px; }

/* Leistungen */
/* Flex statt Raster: bleibt eine Zeile unvollstaendig, steht sie mittig. */
.case-svcs{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:1040px; margin:0 auto; }
.case-svcs > *{ flex:0 1 100%; }
.case-svcs--1 > *{ max-width:560px; }
.case-svcs--2 > *{ flex-basis:calc(50% - 9px); }
.case-svcs--3 > *{ flex-basis:calc(33.333% - 12px); }
.case-svc{ position:relative; overflow:hidden; padding:30px 28px; border-radius:22px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.case-svc::after{ content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:var(--brand); opacity:.07; transition:opacity .35s, transform .5s var(--ease); }
.case-svc:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--brand) 35%, #fff); box-shadow:var(--sh-lg); }
.case-svc:hover::after{ opacity:.13; transform:scale(1.2); }
.case-svc__ic{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px; border-radius:15px; color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, #fff); border:1px solid color-mix(in srgb, var(--brand) 22%, #fff); }
.case-svc__ic svg{ width:24px; height:24px; }
.case-svc h3{ margin:0 0 8px; font-size:1.2rem; color:var(--ink); }
.case-svc p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--muted); }

/* Ablauf in vier Schritten */
.case-steps{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.case-steps::before{ content:""; position:absolute; left:12%; right:12%; top:27px; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 50%, transparent), color-mix(in srgb, var(--brand) 15%, transparent)); }
.case-steps li{ position:relative; padding:0 8px; text-align:center; }
.case-step__n{ position:relative; display:grid; place-items:center; width:56px; height:56px; margin:0 auto 20px; border-radius:50%; font-family:var(--font-display); font-size:19px; font-weight:700; color:#fff; background:var(--brand); box-shadow:0 0 0 7px var(--cream), 0 0 0 8px color-mix(in srgb, var(--brand) 25%, transparent), 0 16px 30px -12px var(--brand); }
.case-steps small{ display:block; margin-bottom:6px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.case-steps b{ display:block; margin-bottom:8px; font-family:var(--font-display); font-size:17.5px; color:var(--ink); }
.case-steps p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }

/* Galerie */
.case-gallery{ position:relative; z-index:1; columns:3; column-gap:20px; }
.case-shot{ display:block; break-inside:avoid; margin:0 0 20px; overflow:hidden; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 24px 50px -36px rgba(23,23,23,.45); }
.case-shot img{ display:block; width:100%; height:auto; }

/* Weitere Projekte */
.case-next-sec{ padding-top:24px; padding-bottom:40px; }
.case-next{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.case-next__card{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:30px; border:1px solid var(--line); border-radius:22px; background:#fff; transition:border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.case-next__card::after{ content:""; position:absolute; right:-60px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:var(--brand); opacity:.08; transition:opacity .3s; }
.case-next__card--r{ align-items:flex-end; text-align:right; }
.case-next__card--r::after{ right:auto; left:-60px; }
.case-next__card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, #fff); box-shadow:var(--sh-lg); }
.case-next__card:hover::after{ opacity:.15; }
.case-next__label{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.case-next__card img{ height:38px; width:auto; max-width:180px; object-fit:contain; }
.case-next__lead{ position:relative; z-index:1; font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.3; color:var(--ink); }
.case-next__go{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-weight:700; color:var(--brand); }
.case-next__go svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.case-next__card:hover .case-next__go svg{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){ .case-float{ animation:none; }}
@media (max-width:1100px){
  .case-float--1, .case-float--3{ left:-14px; } .case-float--2, .case-float--4{ right:-14px; }}
@media (max-width:960px){
  .case-hero.refc{ padding-bottom:96px; }
  .case-hero__grid{ grid-template-columns:1fr; }
  .case-hero__reel.refc__show{ height:420px; min-height:0; }
  .case-glance{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case-glance > div:nth-child(3){ border-left:0; }
  .case-glance > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .case-voice{ grid-template-columns:1fr; gap:44px; }
  .case-svcs--3 > *{ flex-basis:calc(50% - 9px); }
  .case-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 18px; }
  .case-steps::before{ display:none; }
  .case-gallery{ columns:2; }}
@media (max-width:760px){
  .case-hero.refc{ padding-top:calc(var(--nav-h) + 28px); }
  .case-hero__leaf{ display:none; }
  .case-back{ margin-bottom:26px; }
  .case-hero__logo{ max-height:42px; }
  .case-hero__text{ font-size:16.5px; }
  .case-hero__cta .btn{ width:100%; justify-content:center; }
  .case-hero__reel.refc__show{ height:340px; }
  .case-glance dd{ font-size:15px; }
  .case-glance > div{ padding:18px; }
  .case-stage{ padding-top:96px; padding-bottom:100px; }
  .case-float{ position:static; animation:none; margin:10px 6px 0 0; font-size:13px; padding:8px 12px 8px 9px; }
  .case-float svg{ width:24px; height:24px; padding:5px; }
  .case-stage__wrap{ text-align:center; }
  .case-browser{ text-align:left; }
  .case-quote{ padding:36px 22px 24px; }
  .case-quote figcaption{ flex-wrap:wrap; }
  .case-svcs--2 > *, .case-svcs--3 > *{ flex-basis:100%; }
  .case-steps{ grid-template-columns:1fr; gap:28px; }
  .case-gallery{ columns:1; }
  .case-next{ grid-template-columns:1fr; }
  .case-next__card--r{ align-items:flex-start; text-align:left; }}
.case-glance--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .case-glance--3{ grid-template-columns:1fr; } .case-glance--3 > div + div{ border-left:0; border-top:1px solid var(--line); }}

/* -------------------------------------------------- Startseite: Play-Button im Hero-Video */
.hplay{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:flex-start; gap:18px; width:100%; padding-left:13%; cursor:pointer;
  background:linear-gradient(90deg, rgba(10,8,4,.34) 0%, rgba(10,8,4,.12) 45%, transparent 70%); transition:background .4s; }
.hplay:hover{ background:linear-gradient(90deg, rgba(10,8,4,.46) 0%, rgba(10,8,4,.18) 50%, transparent 75%); }
.hplay__btn{ position:relative; display:grid; place-items:center; width:92px; height:92px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,#f7e3a4 0%,#e3bf62 55%,#c99b35 100%); color:#1d1402;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(120,80,10,.35), 0 20px 44px -12px rgba(0,0,0,.55), 0 0 0 10px rgba(255,255,255,.18);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1), box-shadow .4s; }
.hplay__btn svg{ position:relative; z-index:1; width:30px; height:30px; margin-left:5px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.hplay__ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.75); animation:hplayRing 2.6s cubic-bezier(.2,.6,.4,1) infinite; pointer-events:none; }
.hplay__ring--2{ animation-delay:1.3s; }
@keyframes hplayRing{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }
.hplay:hover .hplay__btn{ transform:scale(1.08); box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(120,80,10,.35), 0 26px 54px -12px rgba(0,0,0,.6), 0 0 0 14px rgba(255,255,255,.22); }
.hplay__label{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 18px; border-radius:16px; text-align:left;
  background:rgba(14,11,6,.62); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.5); transition:transform .4s var(--ease), background .3s; }
.hplay__label b{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.01em; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.hplay__label small{ font-size:13px; font-weight:500; color:#f0d27f; }
.hplay:hover .hplay__label{ transform:translateX(4px); background:rgba(14,11,6,.72); }
.hplay:focus-visible{ outline:none; }
.hplay:focus-visible .hplay__btn{ box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--gold-bright); }
@media (prefers-reduced-motion:reduce){ .hplay__ring{ animation:none; opacity:0; }}
@media (max-width:560px){
  .hplay{ padding-left:9%; }
  .hplay__label{ display:none !important; }
  .hplay__btn{ width:64px; height:64px; box-shadow:inset 0 2px 0 rgba(255,255,255,.55), 0 14px 30px -10px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.18); }
  .hplay__btn svg{ width:22px; height:22px; margin-left:4px; }
  .hplay__label{ padding:9px 13px; border-radius:13px; }
  .hplay__label b{ font-size:14.5px; }
  .hplay__label small{ font-size:11.5px; }}

/* -------------------------------------------------- Ratgeber auf der Startseite, Einleitung im Blog */
#ratgeber .head .lead{ max-width:600px; margin:16px auto 0; color:var(--muted); }
.bgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; padding-top:0; border-top:0; }
@media (max-width:960px){ .bgrid--3{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }}
.blog-intro{ position:relative; z-index:1; max-width:760px; margin:clamp(64px,7vw,96px) auto 0; padding-top:clamp(48px,5vw,72px); border-top:1px solid var(--line); }
.blog-intro h2{ margin:0 0 18px; font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-.025em; color:var(--ink); }
.blog-intro p{ margin:0 0 16px; font-size:17px; line-height:1.75; color:var(--muted); }
.blog-intro a{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px; }
.blog-intro a:hover{ text-decoration-color:var(--gold-text); }

/* -------------------------------------------------- Lade-Anzeige, bis der Wistia-Player bereit ist */
iframe.vframe{ opacity:0; transition:opacity .3s ease; }
.vload.is-out{ opacity:0; transition:opacity .2s ease; }
iframe.vframe.is-ready{ opacity:1; }
.vload{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(10,8,4,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); color:#fff; animation:vloadIn .25s ease both; }
.vload__ring{ width:54px; height:54px; border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:#f0d27f; animation:vloadSpin .8s linear infinite; }
.vload__tx{ font-family:var(--font-display); font-size:14.5px; font-weight:600; letter-spacing:.01em; text-shadow:0 1px 3px rgba(0,0,0,.4); }
@keyframes vloadSpin{ to{ transform:rotate(360deg); } }
@keyframes vloadIn{ from{ opacity:0; } }
.is-loading > .video__play, .hplay.is-loading{ opacity:0; pointer-events:none; transition:opacity .2s; }
@media (prefers-reduced-motion:reduce){ .vload__ring{ animation-duration:2.4s; }}

/* Lange deutsche Wörter (Datenschutzerklärung, Barrierefreiheitsstärkungsgesetz) am Handy sauber trennen */
h1, h2, h3, h4{ overflow-wrap:break-word; }
@media (max-width:560px){ h1, h2, h3, h4{ -webkit-hyphens:auto; hyphens:auto; }}

/* -------------------------------------------------- Goldene Leiste oben + Webseiten-Check in der Navigation */
.topbar{ position:fixed; inset:0 0 auto; z-index:101; height:var(--bar-h); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,#c99b35 0%,#e3bf62 35%,#f0d27f 55%,#e3bf62 75%,#c99b35 100%); box-shadow:inset 0 -1px 0 rgba(29,20,2,.12); }
.topbar a{ display:flex; align-items:center; gap:14px; padding:0 16px; max-width:100%; font-size:14px; font-weight:500; color:#2b1e03; white-space:nowrap; }
.topbar b{ font-weight:700; }
.topbar__more{ opacity:.85; overflow:hidden; text-overflow:ellipsis; }
.topbar em{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:var(--r-pill); background:#fff; color:#1d1402; font-style:normal; font-weight:700; font-size:13px; box-shadow:0 4px 12px -6px rgba(29,20,2,.4); transition:transform .2s var(--ease); }
.topbar em svg{ width:13px; height:13px; transition:transform .2s var(--ease); }
.topbar a:hover em{ transform:translateY(-1px); }
.topbar a:hover em svg{ transform:translateX(2px); }
.nav-links .nav-tool{ display:inline-flex; align-items:center; gap:7px; margin-left:6px; padding:8px 12px 8px 12px; color:#6b4f0c; background:linear-gradient(180deg,#fbf1d6,#f5e3b0); box-shadow:inset 0 0 0 1px rgba(201,155,53,.35); font-weight:650; }
.nav-links .nav-tool:hover{ color:#3d2c05; background:linear-gradient(180deg,#f8e7b8,#f0d27f); }
.nav-tool svg{ width:15px; height:15px; }
.nav-tool span{ padding:2px 7px; border-radius:var(--r-pill); background:#1d1402; color:#f0d27f; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.mnav .nav-tool{ display:flex !important; align-items:center; gap:10px; color:#6b4f0c !important; }
.mnav .nav-tool svg{ width:18px; height:18px; }
@media (max-width:1180px){ .nav-links a{ padding:9px 10px; font-size:14.5px; } .nav-links .nav-tool span{ display:none; }}
@media (max-width:760px){ :root{ --bar-h:36px; } .topbar__more{ display:none; } .topbar a{ gap:10px; font-size:13px; } .topbar em{ padding:4px 11px; font-size:12px; }}
@media (max-width:380px){ .topbar b{ font-size:12px; }}

/* -------------------------------------------------- Webseiten-Check (webseiten-check.html) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.chk [hidden]{ display:none !important; }
.chk{ --good:#16875a; --good-bg:#e8f6ee; --warn:#b7791f; --warn-bg:#fdf3dd; --bad:#d4462c; --bad-bg:#fdeae5; }
.chk-hero .hero-inner{ max-width:820px; }

/* Eingabe */
.chk-form{ position:relative; display:flex; align-items:center; gap:8px; max-width:680px; margin:38px auto 0; padding:8px 8px 8px 20px; border-radius:20px; background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 70px -36px rgba(23,23,23,.35), 0 0 0 6px rgba(240,210,127,.14); transition:box-shadow .25s, border-color .25s; }
.chk-form:focus-within{ border-color:#e3c77a; box-shadow:0 30px 70px -36px rgba(23,23,23,.35), 0 0 0 6px rgba(240,210,127,.34); }
.chk-form__ic{ flex:none; display:grid; place-items:center; color:var(--muted-2); }
.chk-form__ic svg{ width:20px; height:20px; }
.chk-form input{ flex:1; min-width:0; height:54px; border:0; outline:0; background:transparent; font:500 18px/1 var(--font-body, inherit); color:var(--ink); }
.chk-form input::placeholder{ color:#b3b1aa; }
.chk-form .btn{ flex:none; }
.chk-form__err{ max-width:680px; margin:14px auto 0; padding:10px 16px; border-radius:12px; background:var(--bad-bg); color:var(--bad); font-weight:600; font-size:15px; text-align:center; }
.chk-promise{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; margin:22px 0 0; padding:0; list-style:none; font-size:14.5px; font-weight:600; color:var(--muted); }
.chk-promise li{ display:inline-flex; align-items:center; gap:7px; }
.chk-promise svg{ width:15px; height:15px; color:var(--gold-text); }

/* Bereiche */
.chk-areas{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.chk-area{ flex:0 1 calc(25% - 12px); padding:24px 22px; border-radius:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.chk-area__ic{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:13px; background:var(--gold-soft); color:var(--gold-text); }
.chk-area__ic svg{ width:21px; height:21px; }
.chk-area b{ display:block; margin-bottom:6px; font-family:var(--font-display); font-size:17px; color:var(--ink); }
.chk-area p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* Ladeanzeige */
.chk-run{ padding-top:calc(var(--nav-h) + 60px); min-height:100vh; }
.chk-run__grid{ position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(40px,6vw,90px); align-items:center; max-width:1000px; margin:0 auto; }
.chk-run__sub{ margin:12px 0 30px; color:var(--muted); }
.chk-steps{ margin:0; padding:0; list-style:none; display:grid; gap:4px; }
.chk-steps li{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px; font-weight:600; color:var(--muted-2); transition:background .3s, color .3s; }
.chk-steps__dot{ position:relative; flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #e3e1da; }
.chk-steps__note{ margin-left:auto; font-size:13px; font-weight:600; color:var(--muted); }
.chk-steps li.is-run{ background:#fff; color:var(--ink); box-shadow:var(--sh-sm); }
.chk-steps li.is-run .chk-steps__dot{ border-color:#f0e2b8; border-top-color:var(--gold-text); animation:vloadSpin .8s linear infinite; }
.chk-steps li.is-done{ color:var(--ink); }
.chk-steps li.is-done .chk-steps__dot{ border-color:var(--good); background:var(--good); }
.chk-steps li.is-done .chk-steps__dot::after{ content:""; position:absolute; left:6px; top:3px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.chk-steps li.is-skip{ opacity:.55; }
.chk-steps li.is-skip .chk-steps__dot{ border-style:dashed; }

.chk-phone{ position:relative; width:250px; aspect-ratio:9/18.5; padding:10px; border-radius:40px; background:#101010; box-shadow:0 50px 90px -40px rgba(23,23,23,.6), inset 0 0 0 2px #2a2a2a; }
.chk-phone::before{ content:""; position:absolute; z-index:2; top:18px; left:50%; width:76px; height:20px; margin-left:-38px; border-radius:12px; background:#101010; }
.chk-phone__screen{ position:relative; height:100%; overflow:hidden; border-radius:31px; background:#fff; }
.chk-phone__screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.chk-phone__screen img[data-tall]{ height:auto; object-fit:initial; will-change:transform; }
.chk-phone__screen.is-scroll img[data-tall]{ animation:chkShotScroll var(--t,20s) cubic-bezier(.45,0,.55,1) 1.2s infinite alternate; }
.chk-phone__screen.is-scroll:hover img[data-tall]{ animation-play-state:paused; }
@keyframes chkShotScroll{ 0%,6%{ transform:translateY(0); } 94%,100%{ transform:translateY(calc(-1 * var(--d,0px))); } }
.chk-phone__screen.has-shot .chk-skel{ display:none; }
.chk-skel{ display:grid; gap:12px; padding:52px 18px 18px; }
.chk-skel i{ display:block; height:14px; border-radius:7px; background:linear-gradient(90deg,#f1efe9 0%,#faf8f3 50%,#f1efe9 100%); background-size:200% 100%; animation:chkShim 1.4s linear infinite; }
.chk-skel i:nth-child(1){ height:120px; border-radius:14px; }
.chk-skel i:nth-child(2){ width:80%; }
.chk-skel i:nth-child(4){ width:60%; }
.chk-skel i:nth-child(5){ height:44px; width:55%; border-radius:12px; background:linear-gradient(90deg,#f5e6bb 0%,#fbf1d6 50%,#f5e6bb 100%); background-size:200% 100%; }
@keyframes chkShim{ to{ background-position:-200% 0; } }
.chk-scan__beam{ position:absolute; left:0; right:0; top:0; height:80px; background:linear-gradient(180deg, transparent, rgba(240,210,127,.35), transparent); animation:chkBeam 2.2s ease-in-out infinite; pointer-events:none; }
@keyframes chkBeam{ 0%{ transform:translateY(-80px); } 100%{ transform:translateY(520px); } }

.chk-pill{ display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:700; vertical-align:2px; }
.chk-pill.is-good{ background:var(--good-bg); color:var(--good); } .chk-pill.is-warn{ background:var(--warn-bg); color:var(--warn); } .chk-pill.is-bad{ background:var(--bad-bg); color:var(--bad); }
.chk-sec__chev{ width:10px; height:10px; border:solid var(--muted-2); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .25s; margin-left:6px; }
@media (max-width:960px){ .chk-area{ flex-basis:calc(50% - 8px); } .chk-run__grid{ grid-template-columns:1fr; } .chk-scan{ display:none; }}
@media (max-width:640px){
  .chk-form{ flex-wrap:wrap; padding:8px; }
  .chk-form__ic{ display:none; }
  .chk-form input{ width:100%; flex:1 1 100%; padding:0 12px; height:50px; }
  .chk-form .btn{ width:100%; justify-content:center; }
  .chk-area{ flex-basis:100%; }}
@keyframes chkDot{ 0%,100%{ opacity:.25; } 40%{ opacity:1; } }
.chk-steps li.is-gone{ opacity:0; transform:translateX(-8px); transition:opacity .3s, transform .3s; }

/* Was gemessen wird – und was nicht */
.chk-scope{ position:relative; z-index:1; display:flex; gap:16px; align-items:flex-start; max-width:900px; margin:clamp(36px,5vw,56px) auto 0; padding:22px 26px; border-radius:20px; background:#fbf4e1; border:1px solid rgba(201,155,53,.28); color:#5a4614; }
.chk-scope b{ display:block; margin-bottom:4px; color:#3d2c05; font-size:16px; }
.chk-scope p{ margin:0; font-size:15px; line-height:1.6; }
.chk-scope strong{ color:#3d2c05; }
.chk-scope__ic{ flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#fff; color:var(--gold-text); box-shadow:0 6px 16px -10px rgba(107,79,12,.5); }
.chk-scope__ic svg{ width:18px; height:18px; }
.chk-geo{ display:grid; gap:16px; max-width:900px; margin:0 auto; position:relative; z-index:1; }
.chk-geo__verdict{ position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:center; padding:32px 34px; border-radius:26px; background:var(--green-bg); color:#fff; isolation:isolate; }
.chk-geo__verdict::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:var(--tile-green); background-size:40px 40px; opacity:.55; }
.chk-geo__eyebrow{ display:block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-grad); }
.chk-geo__word{ display:block; margin:8px 0 12px; font-family:var(--font-display); font-size:clamp(34px,4.4vw,48px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.chk-geo__meter{ display:flex; gap:6px; margin-bottom:16px; }
.chk-geo__meter i{ width:40px; height:7px; border-radius:4px; background:rgba(240,210,127,.16); }
.chk-geo__meter i.is-on{ background:var(--gold-grad); }
.chk-geo__vmain p{ margin:0; max-width:520px; color:rgba(255,255,255,.76); font-size:15.5px; line-height:1.6; }
.chk-geo__stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.chk-geo__stats div{ padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(240,210,127,.14); }
.chk-geo__stats b{ display:block; font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--gold-grad); line-height:1.1; }
.chk-geo__stats span{ display:block; margin-top:4px; font-size:13px; line-height:1.35; color:rgba(255,255,255,.7); }
.chk-geo__access{ border-radius:22px; background:#fff; border:1px solid var(--line); overflow:hidden; }
.chk-geo__access summary{ display:flex; align-items:center; gap:12px; padding:18px 24px; cursor:pointer; list-style:none; font-size:15px; }
.chk-geo__access summary::-webkit-details-marker{ display:none; }
.chk-geo__access summary > span:nth-child(2){ flex:1; }
.chk-geo__access[open] .chk-sec__chev{ transform:rotate(180deg); }
.chk-geo__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:0 24px 22px; }
.chk-geo__cols h4{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.chk-bots{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.chk-bot{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#faf8f3; font-size:14.5px; }
.chk-bot b{ font-weight:650; }
.chk-bot small{ font-size:12.5px; font-weight:600; color:var(--muted); }
.chk-bot__dot{ width:9px; height:9px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px var(--good-bg); }
.chk-bot.is-bad{ background:var(--bad-bg); } .chk-bot.is-bad .chk-bot__dot{ background:var(--bad); box-shadow:0 0 0 4px #fbd5cc; } .chk-bot.is-bad small{ color:var(--bad); }
.chk-bot.is-off .chk-bot__dot{ background:#b9b4aa; box-shadow:0 0 0 4px #ecebe6; }
@media (max-width:860px){ .chk-geo__verdict{ grid-template-columns:1fr; padding:26px 22px; } .chk-geo__cols{ grid-template-columns:1fr; }}
@media (max-width:760px){ .chk-scope{ padding:18px; gap:12px; } .chk-geo__access summary{ padding:16px 18px; } .chk-geo__cols{ padding:0 18px 18px; } .chk-geo__meter i{ width:32px; }}
@media (prefers-reduced-motion:reduce){ .chk-scan__beam, .chk-skel i, .chk-phone__screen img[data-tall]{ animation:none !important; }}
@media print{
  .nav, .topbar, .mnav, .chk-hero, .chk-intro, .chk-run, #faq, .final-zone, footer, .tiles, .deco-leaf{ display:none !important; }}

/* ==================================================================
   Webseiten-Check · Auswertung
   Gleiche Bildsprache wie die uebrige Seite: Kachelrand, zentrierte
   Abschnittskoepfe, weisse Karten, Gold als Leitfarbe, gruener Abschluss.
   ================================================================== */
#chkRes *{ min-width:0; }
/* Die Abschnitte stehen enger als auf den Inhaltsseiten: der Bericht ist
   eine Strecke, kein Sammelsurium einzelner Kapitel. */
#chkRes .section{ padding:clamp(32px,3.8vw,48px) 0; scroll-margin-top:var(--nav-h); }
#chkRes .rb-first{ padding-top:clamp(30px,3.6vw,48px); }
#chkRes .head{ margin-bottom:clamp(24px,3vw,34px); }
#chkRes .head .lead{ margin-inline:auto; }

/* ── Kopf: kleine Hero-Flaeche, keine Karte ─────────────────────── */
.rb-hero{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(28px,5vw,64px); align-items:center; }
.rb-host{ margin:10px 0 10px; font-family:var(--font-display); font-size:clamp(34px,5.4vw,62px); font-weight:700; letter-spacing:-.035em; line-height:1.02; color:var(--ink); overflow-wrap:anywhere; }
.rb-meta{ margin:0; color:var(--muted); font-size:15.5px; }
.rb-score{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); margin-top:clamp(24px,3vw,34px); }
.rx-ring{ position:relative; flex:none; width:clamp(134px,14vw,172px); aspect-ratio:1; }
.rx-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.rx-ring circle{ fill:none; stroke-width:12; }
.rx-ring__bg{ stroke:#f3efe4; }
.rx-ring__fg{ stroke:var(--gold-2); stroke-linecap:round; stroke-dasharray:540.35; stroke-dashoffset:calc(540.35 * (1 - var(--p,0) / 100)); transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1); }
.rx-ring.is-good .rx-ring__fg{ stroke:var(--good); }
.rx-ring.is-bad .rx-ring__fg{ stroke:var(--bad); }
.rx-ring__val{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.rx-ring__val b{ font-family:var(--font-display); font-size:clamp(42px,4.8vw,56px); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.rx-ring__val small{ margin-top:4px; font-size:13px; color:var(--muted); }
.rx-grade{ display:inline-block; padding:6px 14px; border-radius:var(--r-pill); font-family:var(--font-display); font-size:13px; font-weight:700; }
.rx-grade.is-good{ background:var(--good-bg); color:var(--good); }
.rx-grade.is-warn{ background:var(--warn-bg); color:var(--warn); }
.rx-grade.is-bad{ background:var(--bad-bg); color:var(--bad); }
.rb-verdict{ margin:12px 0 18px; font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.025em; line-height:1.2; color:var(--ink); text-wrap:balance; }
.rb-counts{ display:flex; flex-wrap:wrap; gap:10px 0; margin:0; padding:0; list-style:none; }
.rb-counts li{ padding:0 18px; border-left:1px solid var(--line); }
.rb-counts li:first-child{ padding-left:0; border-left:0; }
.rb-counts b{ display:block; font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1.1; }
.rb-counts span{ display:block; margin-top:2px; font-size:13.5px; color:var(--muted); }
.rb-counts .is-bad b{ color:var(--bad); } .rb-counts .is-warn b{ color:var(--warn); } .rb-counts .is-good b{ color:var(--good); }

.rb-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:clamp(26px,3vw,34px); }
/* PDF: eigene Karte statt Standardknopf — Symbol, Titel, Zeile darunter. */
.rb-pdf{ display:inline-flex; align-items:center; gap:13px; padding:11px 20px 11px 12px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); text-align:left; transition:border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.rb-pdf:hover{ border-color:var(--gold-line); transform:translateY(-2px); box-shadow:0 18px 34px -24px rgba(23,23,23,.45); }
.rb-pdf__ic{ display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; background:var(--gold-soft); color:var(--gold-text); }
.rb-pdf__ic svg{ width:21px; height:21px; }
.rb-pdf__tx b{ display:block; font-family:var(--font-display); font-size:15.5px; font-weight:650; color:var(--ink); }
.rb-pdf__tx small{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.rb-pdf.is-busy{ opacity:.55; pointer-events:none; }
.rb-pdf.is-busy .rb-pdf__ic svg{ animation:chkDot 1s infinite; }
.rb-hero__phone{ display:flex; justify-content:center; }
.rb-hero__phone .chk-phone{ width:100%; max-width:250px; }

/* ── Bereiche ───────────────────────────────────────────────────── */
/* Flex statt Raster: die letzte, kuerzere Zeile steht mittig. */
.rb-cats{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.rb-cat{
  flex:0 1 calc(25% - 12px); padding:22px; border-radius:20px; background:#fff; border:1px solid var(--line);
  box-shadow:var(--sh-sm); color:var(--ink); text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.rb-cat:hover{ transform:translateY(-3px); border-color:var(--gold-line); box-shadow:0 26px 50px -34px rgba(23,23,23,.4); }
.rb-cat__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.rb-cat__ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--gold-soft); color:var(--gold-text); }
.rb-cat__ic svg{ width:20px; height:20px; }
.rb-cat__val{ font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.rb-cat__name{ display:block; font-family:var(--font-display); font-size:16px; font-weight:650; line-height:1.25; }
.rb-cat__bar{ display:block; height:6px; margin:12px 0 8px; border-radius:3px; background:#efece4; overflow:hidden; }
.rb-cat__bar i{ display:block; height:100%; border-radius:3px; background:var(--gold-2); }
.rb-cat.is-good .rb-cat__bar i{ background:var(--good); }
.rb-cat.is-bad .rb-cat__bar i{ background:var(--bad); }
.rb-cat small{ font-size:13px; color:var(--muted); }
.rb-cat.is-bad small{ color:var(--bad); font-weight:600; }
.rb-note{ position:relative; z-index:1; max-width:640px; margin:24px auto 0; text-align:center; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ── Damit fangen Sie an ────────────────────────────────────────── */
/* Warum die Note gedeckelt ist – schlichte Zeile, kein Kasten. */
.rb-caps{ max-width:680px; margin:18px auto 0; padding-top:16px; border-top:1px solid var(--line); text-align:left; }
.rb-caps > b{ display:block; margin-bottom:8px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.rb-caps p{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.rb-caps p + p{ margin-top:6px; }
.rb-caps span{ font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--bad); white-space:nowrap; }

.rb-top{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 clamp(20px,3vw,34px); list-style:none; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -46px rgba(23,23,23,.3); }
.rb-issue{ display:grid; grid-template-columns:46px minmax(0,1fr); gap:clamp(16px,2.4vw,26px); padding:clamp(22px,2.6vw,30px) 0; }
.rb-issue + .rb-issue{ border-top:1px solid var(--line); }
.rb-issue__n{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--cream); border:1px solid var(--line); color:var(--muted); font-family:var(--font-display); font-weight:700; font-size:17px; }
.rb-issue.is-bad .rb-issue__n{ background:var(--green-bg); border-color:var(--green-bg); color:var(--gold-grad); }
.rb-issue__title{ display:block; font-family:var(--font-display); font-size:clamp(19px,2vw,22px); font-weight:650; letter-spacing:-.018em; line-height:1.25; color:var(--ink); }
.rb-tag{ display:inline-block; margin-top:9px; padding:4px 11px; border-radius:var(--r-pill); font-family:var(--font-display); font-size:11.5px; font-weight:700; letter-spacing:.04em; background:var(--warn-bg); color:var(--warn); }
.rb-tag.is-bad{ background:var(--bad-bg); color:var(--bad); }
.rb-tag.is-legal{ background:#7a1d0f; color:#fff; }
.rb-issue p{ margin:10px 0 0; color:var(--ink-2); font-size:15.5px; line-height:1.6; }
.rb-issue p.rb-fix{ margin-top:12px; padding:13px 16px; border-radius:14px; background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--ink); font-size:14.5px; }
.rb-fix strong{ color:var(--gold-text); }

/* ── Ladezeit ───────────────────────────────────────────────────── */
.rb-speedwrap{ position:relative; z-index:1; max-width:900px; margin:0 auto; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -48px rgba(23,23,23,.35); overflow:hidden; }
.rb-speed{ width:100%; border-collapse:collapse; font-size:15px; }
.rb-speed th, .rb-speed td{ padding:17px 24px; text-align:left; border-bottom:1px solid #f1efe9; }
.rb-speed tbody tr:last-child th, .rb-speed tbody tr:last-child td{ border-bottom:0; }
.rb-speed thead th{ background:var(--cream); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.rb-speed thead th span{ margin-left:7px; font-family:var(--font-display); font-size:15px; letter-spacing:0; }
.rb-speed tbody th{ font-weight:600; color:var(--ink); }
.rb-speed td{ font-family:var(--font-display); font-weight:700; font-size:16.5px; }
.rb-speed .is-good{ color:var(--good); } .rb-speed .is-warn{ color:var(--warn); } .rb-speed .is-bad{ color:var(--bad); } .rb-speed .is-na{ color:var(--muted-2); }
.rb-speed__goal{ font-family:var(--font-body) !important; font-weight:400 !important; font-size:13.5px !important; color:var(--muted); }

/* ── Alle Pruefpunkte (Aufklapper im FAQ-Stil) ──────────────────── */
.rb-report{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:6px 32px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(23,23,23,.3); }
.rb-acc{ scroll-margin-top:calc(var(--nav-h) + 16px); }
.rb-acc + .rb-acc{ border-top:1px solid var(--line); }
.rb-acc summary{ display:grid; grid-template-columns:minmax(0,1fr) auto 46px 32px; gap:18px; align-items:center; padding:22px 0; cursor:pointer; list-style:none; }
.rb-acc summary::-webkit-details-marker{ display:none; }
.rb-acc__name{ font-family:var(--font-display); font-size:1.06rem; font-weight:600; color:var(--ink); transition:color .25s; }
.rb-acc summary:hover .rb-acc__name{ color:var(--gold-text); }
.rb-acc__meta em{ font-style:normal; font-size:13px; font-weight:700; }
.rb-acc__meta .is-bad{ color:var(--bad); } .rb-acc__meta .is-warn{ color:var(--warn); } .rb-acc__meta .is-good{ color:var(--good); }
.rb-acc__val{ font-family:var(--font-display); font-size:18px; font-weight:700; text-align:right; }
.rb-acc__val.is-good{ color:var(--good); } .rb-acc__val.is-warn{ color:var(--warn); } .rb-acc__val.is-bad{ color:var(--bad); }
.rb-acc__ic{ position:relative; justify-self:end; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff; transition:transform .45s var(--ease), background .3s, border-color .3s; }
.rb-acc__ic::before, .rb-acc__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.8px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); }
.rb-acc__ic::after{ transform:translate(-50%,-50%) rotate(90deg); }
.rb-acc[open] .rb-acc__ic{ transform:rotate(135deg); background:#f0d27f; border-color:#f0d27f; }
.rb-acc ul{ margin:0; padding:0 0 14px; list-style:none; }
.rb-acc li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:16px 0; border-top:1px solid var(--line-soft); }
.rb-acc li b{ display:block; font-size:15.5px; color:var(--ink); }
.rb-acc li p{ margin:4px 0 0; color:var(--muted); font-size:14.5px; line-height:1.6; }
.rb-dot{ width:10px; height:10px; margin-top:7px; border-radius:50%; background:var(--muted-2); box-shadow:0 0 0 4px #f1efe9; }
.rb-acc li.is-bad .rb-dot{ background:var(--bad); box-shadow:0 0 0 4px var(--bad-bg); }
.rb-acc li.is-warn .rb-dot{ background:var(--warn); box-shadow:0 0 0 4px var(--warn-bg); }
.rb-acc li.is-good .rb-dot{ background:var(--good); box-shadow:0 0 0 4px var(--good-bg); }
.rb-acc li p.rb-fixline{ padding:10px 13px; margin-top:8px; border-radius:11px; background:var(--gold-soft); border:1px solid var(--gold-line); color:var(--ink); }
.rb-acc li p.rb-fixline strong{ color:var(--gold-text); }
.chk-scope--res{ max-width:900px; margin-top:26px; }

/* ── Abschluss ──────────────────────────────────────────────────── */
#chkNext{ margin-top:clamp(20px,3vw,36px); }
#chkNext .final{ padding:clamp(56px,6vw,78px) 32px; }
.rb-faces{ display:inline-flex; margin-bottom:6px; }
.rb-faces img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:top; background:var(--cream-2); border:3px solid rgba(240,210,127,.45); }
.rb-faces img + img{ margin-left:-18px; }
.rb-tel{ display:inline-block; margin-top:18px; color:#9aa79d; font-size:15px; font-weight:600; }
.rb-tel:hover{ color:var(--gold-bright); }

/* ── Schmalere Bildschirme ──────────────────────────────────────── */
@media (max-width:1060px){
  .rb-cat{ flex-basis:calc(33.333% - 11px); }
}
@media (max-width:860px){
  .rb-hero{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
  .rb-hero__main{ display:contents; }
  .rb-hero .eyebrow{ order:1; }
  .rb-host{ order:2; }
  .rb-meta{ order:3; }
  .rb-hero__phone{ order:4; margin:26px 0 4px; }
  .rb-score{ order:5; text-align:left; }
  .rb-actions{ order:6; justify-content:center; }
  .rb-hero__phone .chk-phone{ max-width:200px; }
  .rb-cat{ flex-basis:calc(50% - 8px); }
  .rb-report{ padding:4px 22px; }
  .rb-top{ padding:0 22px; }
}
@media (max-width:620px){
  .rb-score{ flex-direction:column; align-items:center; gap:16px; text-align:center; }
  .rb-verdict{ margin:10px 0 14px; }
  .rb-counts{ justify-content:center; }
  .rb-counts li{ padding:0 14px; }
  .rx-ring{ width:132px; }
  .rb-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .rb-actions .btn{ justify-content:center; }
  .rb-pdf{ justify-content:center; }
  .rb-cats{ gap:12px; }
  .rb-cat{ flex-basis:calc(50% - 6px); padding:16px; }
  .rb-cat__head{ margin-bottom:12px; }
  .rb-cat__ic{ width:36px; height:36px; border-radius:11px; }
  .rb-cat__ic svg{ width:17px; height:17px; }
  .rb-cat__val{ font-size:26px; }
  .rb-cat__name{ font-size:15px; }
  .rb-issue{ grid-template-columns:36px minmax(0,1fr); gap:14px; }
  .rb-issue__n{ width:36px; height:36px; font-size:15px; }
  .rb-speed th, .rb-speed td{ padding:13px 14px; }
  .rb-speed__goal, .rb-speed thead th:last-child{ display:none; }
  .rb-acc summary{ grid-template-columns:minmax(0,1fr) 42px 32px; gap:12px; }
  .rb-acc__meta{ grid-column:1; grid-row:2; margin-top:-8px; }
}
@media print{
  .nav, .topbar, .mnav, .chk-hero, .chk-intro, .chk-run, #faq, .final-zone, footer, .tiles, .deco-leaf, .rb-actions{ display:none !important; }
  .rb-top, .rb-report, .rb-speedwrap, .rb-cat{ box-shadow:none; }
  .rb-acc ul{ display:block !important; }
}