/* ============================================================
   Double H Media · Stylesheet
   CI unverändert: Montserrat (Display) + Inter (Text),
   Schwarz #0A0A0A, Creme #F6F4F0, Grün #0D6E63.
   Abschnitte definieren ihre Tokens selbst (.s-light, .s-brand,
   .force-dark), Komponenten nutzen nur Tokens.
   ============================================================ */

@font-face{font-family:'Inter';src:url('../schriften/inter-var.woff2?v=1') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../schriften/montserrat-var.woff2?v=1') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  /* Markenwerte */
  --ink:#0A0A0A;
  --ink-2:#141414;
  --ink-3:#1A1A1A;
  --cream:#F6F4F0;
  --green:#0D6E63;
  --green-deep:#0A4F47;
  --green-lift:#17A08D;   /* Grün als Schrift auf Dunkel: 6,1:1 auf Schwarz, 5,1:1 auf Karten */
  --green-glow:rgba(13,110,99,.55);

  --display:'Montserrat',sans-serif;
  --body:'Inter',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:48px;
  --spur:1280px;

  /* Abschnitts-Tokens, Standard = dunkel */
  --bg:var(--ink);
  --bg-2:var(--ink-2);
  --text:var(--cream);
  --text-soft:rgba(246,244,240,.68);
  --text-faint:rgba(246,244,240,.52);
  --line:rgba(246,244,240,.12);
  --accent:var(--green);
  --accent-text:var(--green-lift);
  --btn-bg:var(--green);
  --btn-text:var(--cream);
  --btn-hover-bg:var(--cream);
  --btn-hover-text:var(--ink);
  --card:var(--ink-2);
  --card-line:rgba(246,244,240,.10);
}

/* Heller Abschnitt */
.s-light{
  --bg:var(--cream);
  --bg-2:#ECE8E1;
  --text:var(--ink);
  --text-soft:rgba(10,10,10,.70);
  --text-faint:rgba(10,10,10,.58);
  --line:rgba(10,10,10,.13);
  --accent:var(--green);
  --accent-text:var(--green);      /* 5,6:1 auf Creme */
  --btn-bg:var(--green);
  --btn-text:var(--cream);
  --btn-hover-bg:var(--ink);
  --btn-hover-text:var(--cream);
  --card:#FFFFFF;
  --card-line:rgba(10,10,10,.08);
}
/* Markenfläche vollflächig */
.s-brand{
  --bg:var(--green);
  --bg-2:var(--green-deep);
  --text:var(--cream);
  --text-soft:#F0F5F3;             /* fest, keine Transparenz auf Grün */
  --text-faint:#E2EEEA;
  --line:rgba(246,244,240,.24);
  --accent:var(--cream);
  --accent-text:var(--cream);
  --btn-bg:var(--cream);
  --btn-text:var(--ink);
  --btn-hover-bg:var(--ink);
  --btn-hover-text:var(--cream);
  --card:rgba(10,10,10,.18);
  --card-line:rgba(246,244,240,.22);
}
/* Dunkle Box in hellem/grünem Abschnitt */
.force-dark{
  --bg:var(--ink);
  --bg-2:var(--ink-2);
  --text:var(--cream);
  --text-soft:rgba(246,244,240,.68);
  --text-faint:rgba(246,244,240,.52);
  --line:rgba(246,244,240,.12);
  --accent:var(--green);
  --accent-text:var(--green-lift);
  --btn-bg:var(--green);
  --btn-text:var(--cream);
  --btn-hover-bg:var(--cream);
  --btn-hover-text:var(--ink);
  --card:var(--ink-2);
  --card-line:rgba(246,244,240,.10);
  color:var(--text);
}

/* Helle Box in dunklem/grünem Abschnitt */
.force-light{
  --bg:#FFFFFF;
  --text:var(--ink);
  --text-soft:rgba(10,10,10,.70);
  --text-faint:rgba(10,10,10,.60);
  --line:rgba(10,10,10,.13);
  --accent:var(--green);
  --accent-text:var(--green);
  --btn-bg:var(--green);
  --btn-text:var(--cream);
  --btn-hover-bg:var(--ink);
  --btn-hover-text:var(--cream);
  --feld-linie:rgba(10,10,10,.24);
  --platzhalter:rgba(10,10,10,.45);
  color:var(--text);
}

html{overflow-x:clip;}
body{background:var(--ink);color:var(--cream);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;}
::selection{background:var(--green);color:var(--cream);}
:focus-visible{outline:2px solid var(--green-lift);outline-offset:3px;border-radius:6px;}

h1,h2,h3,.hut,.zahl b,legend,summary{hyphens:manual;overflow-wrap:break-word;}

html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-stopped{overflow:hidden;}

.skip{position:absolute;left:16px;top:-60px;z-index:1000;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;}
.skip:focus{top:16px;}

/* Filmkorn, statisch */
.grain{position:fixed;inset:0;pointer-events:none;z-index:600;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

#progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;z-index:500;}

/* ── Grundgerüst Abschnitte ── */
.sec{position:relative;isolation:isolate;background:var(--bg);color:var(--text);padding:136px 0;overflow-x:clip;}
.wrap{max-width:var(--spur);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2;}

.hut{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);}
.title{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.9vw,54px);line-height:1.08;letter-spacing:-.022em;color:var(--text);margin-top:18px;}
.title .accent,.accent{color:var(--accent-text);}
.lead{font-size:clamp(16px,1.35vw,18px);line-height:1.7;color:var(--text-soft);margin-top:24px;max-width:620px;}
.kopf{margin-bottom:72px;max-width:1040px;}
.kopf--mitte{text-align:center;margin-left:auto;margin-right:auto;}
.kopf--mitte .lead{margin-left:auto;margin-right:auto;}
.kopf--zeile{max-width:none;display:grid;grid-template-columns:1.4fr .6fr;gap:56px;align-items:end;}
.kopf--zeile .lead{margin-top:0;}

/* ── Knöpfe ── */
.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;color:var(--btn-text);background:var(--btn-bg);border:0;padding:18px 34px;border-radius:999px;cursor:pointer;overflow:hidden;isolation:isolate;box-shadow:0 8px 30px -10px var(--green-glow);transition:color .35s var(--ease),box-shadow .45s var(--ease),transform .35s var(--ease);}
.knopf::before{content:'';position:absolute;inset:0;background:var(--btn-hover-bg);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;}
.knopf:hover{color:var(--btn-hover-text);box-shadow:0 14px 44px -8px rgba(13,110,99,.8),0 0 30px rgba(13,110,99,.45);}
.knopf:hover::before{transform:translateY(0);}
.knopf .pfeil{transition:transform .35s var(--ease);}
.knopf:hover .pfeil{transform:translateX(5px);}
.knopf--linie{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}
.knopf--linie::before{background:var(--btn-bg);}
.knopf--linie:hover{color:var(--btn-text);}

/* ── Navigation ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;height:104px;display:flex;align-items:center;transition:height .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease);border-bottom:1px solid transparent;}
.nav.klein{height:72px;background:rgba(10,10,10,.66);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:rgba(246,244,240,.10);}
.nav-in{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cream);}
.logo img{height:58px;width:auto;transition:height .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease);}
.nav.klein .logo img{height:38px;}
.logo-wort{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.16em;background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 40%,var(--green-lift) 50%,var(--cream) 60%,var(--cream) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s var(--ease),font-size .45s var(--ease);}
.nav.klein .logo-wort{font-size:15px;}
.logo:hover img{filter:drop-shadow(0 0 14px rgba(18,137,123,.85)) drop-shadow(0 0 4px rgba(18,137,123,.7));transform:scale(1.06);}
.logo:hover .logo-wort{background-position:0 0;}
.nav-rechts{display:flex;align-items:center;gap:34px;}
.nav-links{display:flex;gap:30px;}
.nav-links a:not(.knopf){font-size:14px;font-weight:500;letter-spacing:.02em;color:rgba(246,244,240,.72);text-decoration:none;transition:color .25s;}
.nav-links a:not(.knopf):hover{color:var(--cream);}
.nav-cta{padding:14px 40px;font-size:14px;}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(246,244,240,.28);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.burger span{width:18px;height:1.5px;background:var(--cream);transition:transform .3s var(--ease),opacity .3s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.menue{position:fixed;inset:0;z-index:250;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:22px;padding:0 32px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;}
.menue.offen{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease);}
.menue a:not(.knopf){font-family:var(--display);font-weight:600;font-size:28px;color:var(--cream);text-decoration:none;}
.menue .knopf{align-self:flex-start;margin-top:14px;}
body.gesperrt{overflow:hidden;}

/* ── Einblenden ── */
.rein{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rein.da{opacity:1;transform:none;}
.v1{transition-delay:.08s}.v2{transition-delay:.16s}.v3{transition-delay:.24s}.v4{transition-delay:.32s}
.zeile{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
.zeile>span{display:block;transform:translateY(122%);transition:transform 1.05s var(--ease);}
.zeile.da>span{transform:none;}
.zeile.v1>span{transition-delay:.08s}.zeile.v2>span{transition-delay:.16s}

/* ── Bewegte Lichtflecken ── */
.licht{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);}
.licht i{position:absolute;border-radius:50%;background:radial-gradient(circle at center,rgba(13,110,99,.42) 0%,rgba(13,110,99,.16) 38%,transparent 68%);will-change:transform;}
.licht i:nth-child(1){width:900px;height:900px;left:38%;top:-260px;animation:wandern1 19s ease-in-out infinite alternate;}
.licht i:nth-child(2){width:640px;height:640px;left:-180px;top:34%;animation:wandern2 22s ease-in-out infinite alternate;background:radial-gradient(circle at center,rgba(18,137,123,.26) 0%,rgba(13,110,99,.10) 40%,transparent 68%);}
@keyframes wandern1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14%,10%,0)}}
@keyframes wandern2{from{transform:translate3d(0,0,0)}to{transform:translate3d(22%,-12%,0)}}

/* ============================================================
   1 · BÜHNE
   ============================================================ */
.buehne{min-height:100svh;padding:150px 0 90px;display:flex;align-items:center;}
.buehne .wrap{width:100%;max-width:1440px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.buehne-text{display:flex;flex-direction:column;align-items:flex-start;gap:30px;}
.buehne h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,4.2vw,64px);line-height:1.03;letter-spacing:-.026em;color:var(--cream);}
.buehne .lead{margin-top:0;max-width:520px;}
.buehne-fakten{display:flex;gap:34px;flex-wrap:wrap;padding-top:8px;}
.buehne-fakten span{font-size:13px;color:var(--text-faint);}
.buehne-fakten b{display:block;font-family:var(--display);font-size:22px;font-weight:700;color:var(--cream);}

/* Laufende Kachelspalten */
.kacheln{position:relative;height:min(820px,86svh);display:grid;grid-template-columns:repeat(3,1fr);gap:16px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);}
.spalte{position:relative;overflow:hidden;will-change:transform;}
.spur{display:flex;flex-direction:column;gap:16px;animation:hoch 46s linear infinite;}
.spalte:nth-child(2) .spur{animation-name:runter;animation-duration:54s;}
.spalte:nth-child(3) .spur{animation-duration:50s;}
@keyframes hoch{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 8px),0)}}
@keyframes runter{from{transform:translate3d(0,calc(-50% - 8px),0)}to{transform:translate3d(0,0,0)}}
.kacheln:hover .spur{animation-play-state:paused;}
.kachel{position:relative;border-radius:18px;overflow:hidden;background:var(--ink-2);border:1px solid rgba(246,244,240,.10);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);}
.kachel:hover{border-color:rgba(18,137,123,.75);box-shadow:0 0 0 1px rgba(18,137,123,.4),0 18px 50px -14px rgba(13,110,99,.7);transform:scale(1.02);}
.k-bild{aspect-ratio:9/14;}
.k-bild img{width:100%;height:100%;object-fit:cover;}
.k-bild::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.82),transparent 48%);}
.k-bild figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-family:var(--display);font-weight:600;font-size:13px;line-height:1.25;color:#FFFFFF;}
.k-bild figcaption small{display:block;font-family:var(--body);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:3px;}
.k-zahl{padding:22px 18px;}
.k-zahl b{display:block;font-family:var(--display);font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--green-lift);}
.k-zahl span{display:block;font-size:13px;line-height:1.4;color:var(--text-soft);margin-top:8px;}
.k-zitat{padding:20px 18px;}
.k-zitat p{font-size:14px;line-height:1.5;color:var(--cream);}
.k-zitat p::before{content:'„';font-family:var(--display);font-weight:700;color:var(--green-lift);}
.k-zitat cite{display:block;font-style:normal;font-size:11.5px;letter-spacing:.06em;color:var(--text-faint);margin-top:12px;}
.k-name{padding:26px 18px;text-align:center;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,244,240,.82);}
.k-satz{padding:24px 18px;background:var(--green);border-color:rgba(246,244,240,.18);}
.k-satz p{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.18;color:var(--cream);}

/* ============================================================
   2 · AUSSAGE (hell, Wort für Wort)
   ============================================================ */
.aussage{padding:150px 0;}
.aussage .hut{margin-bottom:30px;}
.satz{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.9vw,56px);line-height:1.14;letter-spacing:-.02em;color:var(--text);max-width:1120px;}
.satz + .hut,.aussage .lead + .hut{margin-top:110px;}
.satz.scrub .w{color:rgba(10,10,10,.16);transition:color .35s linear;}
.satz.scrub .w.an{color:var(--text);}
.satz.scrub .w.an.accent,.satz.scrub .accent .w.an{color:var(--accent-text);}
.aussage .lead{max-width:640px;margin-top:34px;}

/* ============================================================
   3 · WARUM (Kartenstapel)
   ============================================================ */
.gruende{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:80px;align-items:start;}
.gruende-kopf{position:sticky;top:150px;}
.gruende-kopf .title{margin-top:18px;}
.zaehler{display:flex;align-items:baseline;gap:10px;margin-top:56px;font-family:var(--display);}
.zaehler b{font-size:72px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;}
.zaehler span{font-size:18px;font-weight:600;color:var(--text-faint);}
.zaehler i{position:relative;align-self:center;flex:1;max-width:220px;height:2px;margin-left:18px;background:var(--line);overflow:hidden;border-radius:2px;}
.zaehler em{position:absolute;inset:0;background:var(--green-lift);transform-origin:left;transform:scaleX(var(--p,.143));transition:transform .5s var(--ease);}
.stapel{display:flex;flex-direction:column;gap:30px;padding-bottom:8vh;}
.grund{position:sticky;top:150px;min-height:340px;padding:44px 48px;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(150deg,#1D1D1D 0%,#141414 50%,#0D1513 100%);
  border:1px solid rgba(246,244,240,.10);
  box-shadow:0 -24px 60px -24px rgba(0,0,0,.85);
  transform-origin:50% 0;transform:scale(var(--s,1));}
.grund:nth-child(2){top:164px;}.grund:nth-child(3){top:178px;}.grund:nth-child(4){top:192px;}.grund:nth-child(5){top:206px;}.grund:nth-child(6){top:220px;}.grund:nth-child(7){top:234px;}
.grund::before{content:'';position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(13,110,99,.34),transparent 66%);pointer-events:none;}
.grund::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--d,0);pointer-events:none;}
.grund-nr{position:absolute;top:22px;right:40px;font-family:var(--display);font-weight:800;font-size:clamp(90px,9vw,140px);line-height:1;letter-spacing:-.05em;color:transparent;background:linear-gradient(180deg,rgba(23,160,141,.42),rgba(23,160,141,.06));-webkit-background-clip:text;background-clip:text;}
.grund-tag{position:relative;align-self:flex-start;margin-bottom:auto;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-lift);border:1px solid rgba(23,160,141,.45);border-radius:999px;padding:7px 14px;}
.grund h3{position:relative;margin-top:60px;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.8vw,42px);line-height:1.08;letter-spacing:-.02em;color:var(--cream);}
.grund > p:last-child{position:relative;margin-top:14px;max-width:540px;font-size:17px;line-height:1.65;color:rgba(246,244,240,.72);}
.grund--marke{background:linear-gradient(150deg,#0F7A6E 0%,#0D6E63 45%,#0A4F47 100%);border-color:rgba(246,244,240,.2);}
.grund--marke::before{background:radial-gradient(circle,rgba(246,244,240,.18),transparent 66%);}
.grund--marke .grund-nr{background-image:linear-gradient(180deg,rgba(246,244,240,.45),rgba(246,244,240,.06));}
.grund--marke .grund-tag{color:var(--cream);border-color:rgba(246,244,240,.5);}
.grund--marke > p:last-child{color:#F0F5F3;}

/* ============================================================
   4 · FÜR WEN (Branchenliste mit Schwebebild)
   ============================================================ */
.laufband{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:96px;position:relative;z-index:2;}
.laufband-in{display:flex;width:max-content;animation:lauf 34s linear infinite;}
.laufband span{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,32px);letter-spacing:.03em;text-transform:uppercase;color:var(--text);padding:0 28px;display:inline-flex;align-items:center;gap:56px;white-space:nowrap;}
.laufband span::after{content:'';width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--text);opacity:.55;}
@keyframes lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.branchen{list-style:none;border-top:1px solid var(--line);}
.branche{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding:24px 18px;border-bottom:1px solid var(--line);transition:background-color .45s var(--ease);}
.branche h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--text);transition:transform .55s var(--ease);}
.branche p{font-size:15px;color:var(--text-soft);transition:transform .55s var(--ease);}
.schwebebild{position:absolute;left:0;top:0;z-index:3;width:170px;aspect-ratio:9/14;border-radius:16px;overflow:hidden;pointer-events:none;opacity:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(246,244,240,.25);transition:opacity .35s var(--ease);will-change:transform;}
.schwebebild img{width:100%;height:100%;object-fit:cover;}
.schwebebild.an{opacity:1;}
@media (hover:hover) and (pointer:fine){
  .branche:hover{background:rgba(10,10,10,.14);}
  .branche:hover h3{transform:translateX(10px);}
}
@media (max-width:860px){
  .branche{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 4px;}
}
@media (hover:none),(max-width:1024px){.schwebebild{display:none;}}

/* ============================================================
   5 · LEISTUNGEN (Paketvergleich)
   ============================================================ */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;padding-top:16px;}
.paket{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:42px 34px 36px;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#171717 0%,#111111 100%);border:1px solid rgba(246,244,240,.10);transition:transform .55s var(--ease),border-color .45s,box-shadow .55s var(--ease);}
.paket::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx,50%) var(--my,-10%),rgba(23,160,141,.20),transparent 45%);opacity:0;transition:opacity .45s;}
.paket:hover::before{opacity:1;}
.paket:hover{transform:translateY(-6px);border-color:rgba(23,160,141,.45);}
.paket--top{background:linear-gradient(180deg,#0F2723 0%,#111A18 38%,#101010 100%);border-color:rgba(23,160,141,.6);box-shadow:0 0 0 1px rgba(23,160,141,.22),0 50px 100px -50px rgba(13,110,99,.9);transform:translateY(-16px);}
.paket--top:hover{transform:translateY(-22px);}
.paket-badge{position:absolute;top:22px;right:22px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:var(--green);padding:7px 12px;border-radius:999px;}
.paket-stufe{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-lift);}
.paket h3{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.18;color:var(--text);margin:14px 0 12px;max-width:90%;}
.paket-text{font-size:14.5px;line-height:1.6;color:var(--text-soft);min-height:4.8em;padding-bottom:26px;margin-bottom:6px;border-bottom:1px solid rgba(246,244,240,.10);}
.metriken{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 12px;}
.metrik{background:rgba(246,244,240,.04);border:1px solid rgba(246,244,240,.09);border-radius:18px;padding:18px 16px 16px;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;}
.metrik small{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;}
.metrik b{font-family:var(--display);font-weight:800;font-size:clamp(42px,3.8vw,60px);line-height:1;letter-spacing:-.035em;color:var(--cream);}
.paket--top .metrik{background:rgba(23,160,141,.12);border-color:rgba(23,160,141,.32);}
.metrik span{font-size:13px;line-height:1.3;color:var(--text-soft);margin-top:8px;}
.paket-jahr{font-size:13.5px;font-weight:600;color:var(--green-lift);margin-bottom:22px;}
.paket-liste{list-style:none;flex:1;margin-bottom:30px;}
.paket-liste li{position:relative;padding:10px 0 10px 32px;font-size:14.5px;line-height:1.45;color:var(--text);border-bottom:1px solid rgba(246,244,240,.07);}
.paket-liste li.gruppe{padding:24px 0 8px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);border-bottom:0;}
.paket-liste li.gruppe:first-child{padding-top:4px;}
.paket-liste li.ja::before,.paket-liste li.zu::before,.paket-liste li.nein::before{position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;}
.paket-liste li.ja::before{content:'✓';background:var(--green);color:#FFFFFF;}
.paket-liste li.zu::before{content:'+';color:var(--green-lift);box-shadow:inset 0 0 0 1px var(--green-lift);font-size:14px;}
.paket-liste li.zu em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-lift);margin-left:6px;}
.paket-liste li.nein{color:rgba(246,244,240,.52);text-decoration:line-through;text-decoration-color:rgba(246,244,240,.3);}
.paket-liste li.nein::before{content:'×';color:rgba(246,244,240,.52);box-shadow:inset 0 0 0 1px rgba(246,244,240,.2);font-size:13px;}
.paket .knopf{align-self:stretch;}
.pakete-notiz{margin-top:48px;text-align:center;font-size:14px;color:var(--text-faint);}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================================================
   6 · PROZESS (Linie)
   ============================================================ */
.linie{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-top:44px;}
.linie::before,.linie::after{content:'';position:absolute;top:14px;height:2px;}
.linie::before{left:0;right:0;background:var(--line);}
.linie::after{left:0;right:0;background:linear-gradient(90deg,rgba(13,110,99,.35) 0%,rgba(13,110,99,.6) 79%,var(--green) 80%,var(--green) 100%);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease);}
.linie.da::after{transform:scaleX(1);}
.schritt{position:relative;}
.schritt::before{content:'';position:absolute;top:-38px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid rgba(13,110,99,.6);transition:background-color .4s,border-color .4s,box-shadow .4s;}
.linie.da .schritt::before{border-color:var(--green);}
.schritt--ziel::before{width:22px;height:22px;top:-41px;background:var(--green);border-color:var(--green);box-shadow:0 0 0 6px rgba(13,110,99,.16),0 0 22px var(--green-glow);}
.schritt small{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px;}
.schritt h3{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;color:var(--text);margin-bottom:10px;}
.schritt p{font-size:14.5px;line-height:1.65;color:var(--text-soft);}

/* ============================================================
   7 · REFERENZEN
   ============================================================ */
.ref-oben{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;margin-bottom:110px;}
.faecher{position:relative;height:560px;display:flex;justify-content:center;align-items:center;}
.handy{position:absolute;width:236px;aspect-ratio:9/16;border-radius:34px;padding:9px;background:linear-gradient(160deg,#2B2B2B,#0E0E0E);box-shadow:0 40px 70px -26px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .7s var(--ease);cursor:pointer;border:0;text-align:left;}
.handy-schirm{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--ink-3);}
.handy-schirm img{width:100%;height:100%;object-fit:cover;}
.handy-schirm::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.55),transparent 26%,transparent 52%,rgba(10,10,10,.88));}
.handy--l{transform:translateX(-70%) rotate(-9deg);z-index:1;}
.handy--r{transform:translateX(70%) rotate(8deg);z-index:1;}
.handy--m{width:268px;z-index:2;animation:schweben 6s ease-in-out infinite;}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.faecher:hover .handy--l{transform:translateX(-90%) rotate(-14deg);}
.faecher:hover .handy--r{transform:translateX(90%) rotate(13deg);}
.format{position:absolute;top:22px;left:16px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.3);padding:5px 10px;border-radius:999px;}
.reel-text{position:absolute;left:16px;right:16px;bottom:66px;z-index:2;font-family:var(--display);font-weight:800;font-size:17px;line-height:1.18;color:#FFFFFF;}
.reel-text mark{background:var(--green);color:#FFFFFF;padding:0 5px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.sticker{position:absolute;left:16px;bottom:22px;z-index:2;font-size:12px;font-weight:700;color:var(--ink);background:var(--cream);padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.handy .yt-rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.handy.laeuft{cursor:default;}
.handy.laeuft .format,.handy.laeuft .reel-text,.handy.laeuft .sticker{display:none;}
.ref-text .lead{margin-bottom:34px;}
.ref-text .knopf + .knopf{margin-left:10px;}

.showreels{display:grid;grid-template-columns:minmax(0,1.778fr) minmax(0,.5625fr);gap:20px;margin-bottom:110px;}
.showreel{position:relative;border-radius:24px;overflow:hidden;cursor:pointer;background:var(--ink-3);border:1px solid var(--card-line);display:flex;align-items:center;justify-content:center;}
.showreel--quer{aspect-ratio:16/9;}
.showreel--hoch{aspect-ratio:9/16;}
.mosaik{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.mosaik--hoch{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.mosaik img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.55);transform:scale(1.02);transition:transform 1.4s var(--ease),filter .6s;}
.showreel:hover .mosaik img{transform:scale(1.08);filter:saturate(.95) brightness(.62);}
.showreel::after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(10,10,10,.18),rgba(10,10,10,.72));pointer-events:none;}
.showreel.laeuft::after{display:none;}
.play{position:relative;z-index:2;width:118px;height:118px;border-radius:50%;background:rgba(246,244,240,.08);border:1.5px solid rgba(246,244,240,.55);display:flex;align-items:center;justify-content:center;gap:2px;flex-direction:column;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);transition:transform .5s var(--ease),background-color .4s,border-color .4s,box-shadow .5s var(--ease);}
.play svg{margin-left:4px;margin-bottom:4px;}
.showreel:hover .play{transform:scale(1.22);background:var(--green);border-color:var(--green);box-shadow:0 0 50px var(--green-glow);}
.showreel-label{position:absolute;left:26px;bottom:24px;z-index:2;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,244,240,.82);}
.showreel .yt-rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.showreel.laeuft{cursor:default;}

.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:110px;}
.zahl{background:var(--card);border:1px solid var(--card-line);border-radius:22px;padding:44px 24px;text-align:center;transition:border-color .4s,box-shadow .45s var(--ease);}
.zahl:hover{border-color:rgba(18,137,123,.5);box-shadow:0 0 40px -10px var(--green-glow);}
.zahl b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(46px,5.4vw,74px);line-height:1;letter-spacing:-.03em;color:var(--text);}
.zahl b em{font-style:normal;color:var(--accent-text);}
.zahl > span{display:block;margin-top:14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}

.faelle-h{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;}
.faelle{border-top:1px solid var(--line);}
.fall{border-bottom:1px solid var(--line);}
.fall-zeile{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:32px 16px;background:none;border:0;text-align:left;cursor:pointer;position:relative;overflow:hidden;border-radius:12px;transition:padding .45s var(--ease);}
.fall-zeile::before{content:'';position:absolute;inset:0;background:var(--green);transform:translateX(-101%);transition:transform .5s var(--ease);z-index:0;}
.fall-zeile:hover::before{transform:none;}
.fall-zeile:hover{padding-left:36px;padding-right:36px;}
.fall-zeile>*{position:relative;z-index:1;}
.fall-name{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,40px);line-height:1.1;color:var(--text);}
.fall-rechts{display:flex;align-items:center;gap:24px;}
.fall-art{font-size:14px;color:var(--text-faint);text-align:right;transition:color .3s;}
.fall-zeile:hover .fall-art{color:var(--cream);}
.plus{width:26px;height:26px;position:relative;flex:none;}
.plus::before,.plus::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:2px;background:var(--accent-text);transform:translate(-50%,-50%);transition:transform .35s var(--ease),background-color .3s;}
.plus::after{transform:translate(-50%,-50%) rotate(90deg);}
.fall-zeile:hover .plus::before,.fall-zeile:hover .plus::after{background:var(--cream);}
.fall.offen .plus::after{transform:translate(-50%,-50%) rotate(0);}
.fall-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);}
.fall.offen .fall-panel{grid-template-rows:1fr;}
.fall-panel>div{overflow:hidden;}
.fall-inhalt{display:flex;flex-wrap:wrap;gap:30px;padding:8px 16px 40px;}
.fall-inhalt>p{flex:1 1 320px;font-size:16px;line-height:1.75;color:var(--text-soft);}
.fall-videos{display:grid;grid-template-columns:repeat(3,180px);gap:14px;}
.fall-video{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid var(--card-line);cursor:pointer;background:var(--ink-3);transition:transform .4s var(--ease),border-color .3s;}
.fall-video:hover{transform:translateY(-4px);border-color:rgba(18,137,123,.6);}
.fall-video img{width:100%;height:100%;object-fit:cover;}
.fall-video::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.32);transition:background-color .3s;}
.fall-video:hover::after{background:rgba(10,10,10,.08);}
.fall-video .mini-play{position:absolute;z-index:2;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);}
.fall-video .mini-play::before{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:14px solid #FFFFFF;border-top:8px solid transparent;border-bottom:8px solid transparent;}
.fall-video .yt-rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.fall-seite{flex:0 1 560px;display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.fall-leistungen{display:flex;flex-wrap:wrap;gap:10px;}
.fall-leistungen span{font-size:13.5px;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:9px 16px;}
.fall-leistungen span:last-child{color:var(--accent-text);border-color:rgba(23,160,141,.45);}
.fall-folgt{flex:1 1 280px;font-size:14px;line-height:1.6;color:var(--text-faint);border:1px dashed var(--line);border-radius:14px;padding:18px 20px;font-style:italic;}

/* ============================================================
   8 · CHAT-VERGLEICH (hell)
   ============================================================ */
.chat-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;}
.schalter{display:inline-flex;padding:5px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);margin-top:34px;position:relative;}
.schalter button{position:relative;z-index:1;border:0;background:none;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;color:var(--text-soft);cursor:pointer;transition:color .4s var(--ease);}
.schalter button[aria-pressed="true"]{color:var(--cream);}
.schalter::before{content:'';position:absolute;top:5px;bottom:5px;left:5px;width:var(--sw,50%);border-radius:999px;background:var(--ink);transform:translateX(var(--sx,0));transition:transform .55s var(--ease),width .55s var(--ease),background-color .4s;}
.schalter.dhm::before{background:var(--green);}
.chat{width:100%;max-width:440px;justify-self:center;background:#FFFFFF;border-radius:28px;box-shadow:0 40px 90px -40px rgba(10,10,10,.35),0 0 0 1px rgba(10,10,10,.06);overflow:hidden;}
.chat-kopf{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(10,10,10,.08);}
.chat-kopf .avatar{width:42px;height:42px;border-radius:50%;flex:none;position:relative;}
.chat-kopf .wer{display:grid;flex:1;min-width:0;}
.wer > div{grid-area:1/1;transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);}
.wer b{display:block;font-family:var(--display);font-size:15px;color:var(--ink);}
.wer small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(10,10,10,.62);}
.wer small::before{content:'';width:7px;height:7px;border-radius:50%;background:#9A9A9A;}
.wer .dhm small::before{background:#16A34A;}
.avatar > span{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease);}
.avatar .a-andere{background:#D9D9D9;color:#5A5A5A;font-weight:700;font-size:15px;}
.avatar .a-dhm{background:var(--green);}
.avatar .a-dhm img{width:22px;height:auto;}
.chat-verlauf{padding:26px 22px 30px;display:flex;flex-direction:column;gap:16px;background:#F4F3F0;min-height:470px;}
.frage{align-self:flex-end;max-width:78%;background:#FFFFFF;color:var(--ink);font-size:14.5px;line-height:1.45;padding:12px 16px;border-radius:18px 18px 4px 18px;box-shadow:0 1px 2px rgba(10,10,10,.08);}
.antwort{display:grid;max-width:84%;}
.antwort p{grid-area:1/1;font-size:14.5px;line-height:1.5;padding:12px 16px;border-radius:18px 18px 18px 4px;transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease);align-self:start;}
.antwort .andere{background:#E4E4E2;color:#3A3A3A;}
.antwort .dhm{background:var(--green);color:#FFFFFF;}
.antwort p small{display:block;margin-top:6px;font-size:11px;opacity:.85;}
/* Zustände */
.chat .dhm{opacity:0;filter:blur(6px);transform:translateY(8px);visibility:hidden;}
.chat .andere{opacity:1;}
.chat.ist-dhm .dhm{opacity:1;filter:none;transform:none;visibility:visible;}
.chat.ist-dhm .andere{opacity:0;filter:blur(6px);transform:translateY(-8px);visibility:hidden;}
.chat .a-dhm{opacity:0;}
.chat.ist-dhm .a-dhm{opacity:1;}
.chat.ist-dhm .a-andere{opacity:0;}
.chat .andere,.chat .dhm{transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s;}
.chat.ist-dhm .dhm,.chat:not(.ist-dhm) .andere{transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease),visibility 0s;}
.chat-verlauf .antwort:nth-of-type(2) p{transition-delay:.12s;}
.chat-verlauf .antwort:nth-of-type(3) p{transition-delay:.24s;}
.chat-verlauf .antwort:nth-of-type(4) p{transition-delay:.36s;}

/* ============================================================
   9 · STIMMEN
   ============================================================ */
.bewertung{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:56px;flex-wrap:wrap;}
.sterne{color:#15A08F;font-size:30px;letter-spacing:5px;text-shadow:0 0 22px rgba(13,110,99,.75);}
.bewertung p{font-size:16px;color:var(--text-soft);}
.bewertung b{font-family:var(--display);color:var(--text);}
.wand{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;height:780px;overflow:hidden;margin-bottom:96px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);}
.wand-spalte{position:relative;overflow:hidden;}
.wand .spur{animation:hoch 62s linear infinite;}
.wand-spalte:nth-child(2) .spur{animation-name:runter;animation-duration:74s;}
.wand-spalte:nth-child(3) .spur{animation-duration:68s;}
.wand:hover .spur{animation-play-state:paused;}
.stimme-sterne{display:block;color:#17A08D;font-size:14px;letter-spacing:3px;margin-bottom:14px;}
.stimme{background:var(--card);border:1px solid var(--card-line);border-radius:22px;padding:30px 28px;transition:border-color .4s,box-shadow .45s var(--ease);}
.stimme:hover{border-color:rgba(23,160,141,.55);box-shadow:0 0 36px -10px var(--green-glow);}
.stimme blockquote{font-size:17px;line-height:1.6;color:var(--text);}
.stimme blockquote::before{display:none;content:'„';display:block;font-family:var(--display);font-weight:800;font-size:54px;line-height:.7;color:var(--accent-text);margin-bottom:14px;}
.stimme footer{display:block;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.stimme footer b{display:block;font-family:var(--display);font-size:16px;color:var(--text);}
.stimme footer span{font-size:13px;color:var(--text-faint);}
.kunden-h{text-align:center;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);margin-bottom:28px;}
.kunden{display:flex;flex-direction:column;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.kunden-reihe{overflow:hidden;}
.kunden-reihe > div{display:flex;width:max-content;gap:14px;animation:lauf 40s linear infinite;}
.kunden-reihe--zurueck > div{animation-direction:reverse;animation-duration:46s;}
.kunden:hover .kunden-reihe > div{animation-play-state:paused;}
.kunden span{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.7vw,21px);color:rgba(246,244,240,.52);padding:16px 28px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;transition:color .35s,border-color .35s,background-color .35s;}
.kunden span:hover{color:var(--cream);border-color:rgba(18,137,123,.6);background:rgba(13,110,99,.16);}

/* ============================================================
   10 · WEBSEITEN (hell, Karten dunkel)
   ============================================================ */
.seiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.webseiten .kopf{max-width:640px;}
.partikel{position:absolute;top:-20px;right:0;width:52%;height:640px;z-index:0;pointer-events:none;}
.seite{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid rgba(246,244,240,.08);border-radius:22px;overflow:hidden;text-decoration:none;box-shadow:0 30px 60px -34px rgba(0,0,0,.9);transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.seite:hover{transform:translateY(-8px);box-shadow:0 40px 70px -30px rgba(10,10,10,.6),0 0 0 1px var(--brand);}
.seite-rahmen{padding:14px 14px 0;background:linear-gradient(180deg,rgba(246,244,240,.05),transparent);}
.seite-leiste{display:flex;align-items:center;gap:6px;padding:0 4px 10px;}
.seite-leiste i{width:8px;height:8px;border-radius:50%;background:rgba(246,244,240,.2);}
.seite-leiste em{margin-left:8px;font-style:normal;font-size:11.5px;color:rgba(246,244,240,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seite-bild{aspect-ratio:16/10;border-radius:12px 12px 0 0;position:relative;overflow:hidden;background:var(--brand-2);}
.seite-bild picture{display:block;height:100%;}
.seite-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.2s var(--ease);}
.seite:hover .seite-bild img{transform:scale(1.04);}


.seite-meta{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.seite-meta h3{font-family:var(--display);font-weight:700;font-size:19px;color:var(--cream);}
.seite-tag{font-size:12.5px;color:var(--brand);margin-top:5px;}
.seite-meta p{font-size:14px;line-height:1.6;color:rgba(246,244,240,.68);margin-top:14px;flex:1;}
.seite-link{margin-top:18px;font-family:var(--display);font-weight:600;font-size:13px;color:var(--cream);display:inline-flex;align-items:center;gap:8px;}
.seite-link::after{content:'→';color:var(--brand);transition:transform .35s var(--ease);}
.seite:hover .seite-link::after{transform:translateX(6px);}
.sc-hhiw{--brand:#5B95CC;--brand-2:#102B46;--ci-text:#F6F4F0;}
.sc-cd{--brand:#D2B47A;--brand-2:#1C1810;--ci-text:#F1E7D4;}
.sc-chiaia{--brand:#D9B375;--brand-2:#1A130B;--ci-text:#F4E7D2;}
.sc-seelen{--brand:#A3A888;--brand-2:#15170F;--ci-text:#EDEFE2;}
.sc-rc{--brand:#AEB6BF;--brand-2:#141719;--ci-text:#FFFFFF;}
.sc-innung{--brand:#FFD800;--brand-2:#1A1400;--ci-text:#FFF3B8;}
.seiten-notiz{margin-top:40px;text-align:center;font-size:14px;color:var(--text-faint);}

/* ============================================================
   11 · ÜBER UNS + TEAM
   ============================================================ */
.ueber{margin-bottom:96px;}
.ueber-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px;}
.ueber .title{margin-top:18px;}
.ueber-text p{font-size:16.5px;line-height:1.8;color:var(--text-soft);}
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 28px;}
.team .person{flex:0 0 calc((100% - 84px) / 4);min-width:0;}
.person-bild{position:relative;margin-bottom:18px;}
.person-bild::before{content:'';position:absolute;inset:12% -2% -4%;z-index:0;border-radius:28px;background:radial-gradient(circle at 50% 50%,rgba(13,110,99,.55),rgba(13,110,99,.18) 55%,transparent 75%);filter:blur(22px);opacity:.55;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.person:hover .person-bild::before{opacity:1;transform:scale(1.18);}
.person-bild img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 22px 30px rgba(10,10,10,.18));transition:transform .6s var(--ease);}
.person:hover .person-bild img{transform:translateY(-6px);}
.person h3{font-family:var(--display);font-weight:700;font-size:18px;color:var(--text);}
.person p{font-size:14px;color:var(--text-faint);margin-top:2px;}

/* ============================================================
   12 · FAQ (hell)
   ============================================================ */
.fragen{max-width:940px;margin:0 auto;border-top:1px solid var(--line);}
.frage-item{border-bottom:1px solid var(--line);}
.frage-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 6px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,23px);line-height:1.3;color:var(--text);transition:color .3s;}
.frage-item summary::-webkit-details-marker{display:none;}
.frage-item summary:hover{color:var(--accent-text);}
.frage-item[open] .plus::after{transform:translate(-50%,-50%) rotate(0);}
.frage-item .antw{padding:0 6px 30px;font-size:16px;line-height:1.75;color:var(--text-soft);max-width:780px;}

/* ============================================================
   13 · KONTAKT (Markenfläche, Schimmer)
   ============================================================ */
.kontakt{background:linear-gradient(120deg,#0A4F47 0%,#0D6E63 30%,#0F7A6E 50%,#0D6E63 70%,#0A4F47 100%);background-size:280% 280%;animation:schimmer 18s ease-in-out infinite alternate;}
@keyframes schimmer{from{background-position:0% 40%}to{background-position:100% 60%}}
.kontakt-raster{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.kontakt .kopf{margin-bottom:56px;}
.kontakt .lead{margin-top:0;}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;max-width:460px;}
.tags span{font-size:13.5px;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:9px 16px;}
.tags-h{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-top:42px;}
.direkt{display:flex;flex-direction:column;gap:12px;margin-top:40px;}
.direkt a{font-family:var(--display);font-weight:600;font-size:19px;color:var(--text);text-decoration:none;width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s;}
.direkt a:hover{border-color:var(--text);}
.formular{background:#FFFFFF;color:var(--ink);border-radius:28px;padding:44px 40px;box-shadow:0 50px 100px -40px rgba(0,0,0,.55);}
.formular form{display:flex;flex-direction:column;gap:24px;}
.formular .intro{font-size:15px;line-height:1.6;color:var(--text-soft);}
.feld label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
.feld label .pflicht{color:var(--accent-text);}
.feld input,.feld textarea,.feld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--feld-linie,rgba(246,244,240,.24));padding:12px 0;font-family:var(--body);font-size:16px;color:var(--text);outline:none;border-radius:0;transition:border-color .3s;}
.feld select option{background:var(--ink-3);color:var(--cream);}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--accent-text);}
.feld input::placeholder,.feld textarea::placeholder{color:var(--platzhalter,rgba(246,244,240,.42));}
.feld textarea{min-height:96px;resize:vertical;}
.feld[hidden]{display:none;}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.honig{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.hinweis{font-size:12.5px;line-height:1.55;color:var(--text-faint);}
.hinweis a{color:var(--text-soft);}
.formular .knopf{align-self:flex-start;}
.meldung{font-size:14.5px;font-weight:600;color:var(--accent-text);min-height:1.4em;}
.meldung.fehler{color:#B42318;}

/* ── Fußzeile ── */
.fuss{background:var(--ink);color:var(--cream);padding:96px 0 40px;border-top:1px solid rgba(246,244,240,.08);}
.fuss-oben{display:flex;flex-direction:column;align-items:flex-start;gap:36px;padding-bottom:72px;margin-bottom:64px;border-bottom:1px solid rgba(246,244,240,.10);}
.fuss .fuss-claim{font-family:var(--display);font-weight:700;color:var(--cream);font-size:clamp(26px,2.85vw,41px);line-height:1.18;letter-spacing:-.02em;}
.fuss-oben .knopf{flex:none;padding:20px 44px;}
.fuss-claim .accent{color:var(--green-lift);}
.fuss-spalten{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(246,244,240,.10);}
.fuss-logo{display:flex;gap:26px;align-items:flex-start;}
.fuss-logo img{height:104px;width:auto;flex:none;}
.fuss-logo p{max-width:300px;}
.fuss h4{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8A8A8A;margin-bottom:18px;}
.fuss p,.fuss-spalten a{display:block;font-size:14.5px;line-height:1.8;color:rgba(246,244,240,.68);text-decoration:none;}
.fuss-spalten a{margin-bottom:6px;transition:color .3s;}
.fuss-spalten a:hover{color:var(--cream);}
.fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:13px;color:rgba(246,244,240,.55);}
.fuss-unten nav{display:flex;gap:24px;}
.fuss-unten a{color:rgba(246,244,240,.62);text-decoration:none;transition:color .3s;}
.fuss-unten a:hover{color:var(--cream);}

/* ── Rechtsseiten ── */
.recht{padding:180px 0 110px;}
.recht .wrap{max-width:860px;}
.recht h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.02em;margin:16px 0 44px;}
.recht h2{font-family:var(--display);font-weight:700;font-size:21px;line-height:1.3;margin:44px 0 12px;color:var(--text);}
.recht h3{font-family:var(--display);font-weight:600;font-size:17px;margin:26px 0 8px;color:var(--text);}
.recht p,.recht li{font-size:15.5px;line-height:1.75;color:var(--text-soft);margin-bottom:12px;}
.recht ul{padding-left:20px;margin-bottom:12px;}
.recht a{color:var(--accent-text);text-underline-offset:3px;}
.recht strong{color:var(--text);}
.fehlerseite{min-height:100svh;display:flex;align-items:center;text-align:center;}
.fehlerseite .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;}
.fehlerseite b{font-family:var(--display);font-weight:800;font-size:clamp(90px,16vw,200px);line-height:.9;color:var(--green-lift);letter-spacing:-.04em;}

/* ── Responsiv ── */
br.opt{display:inline;}
@media (min-width:1025px){.buehne h1 .zeile{white-space:nowrap;}}
@media (max-width:1180px){
  .nav-links{gap:22px;}
  .nav-links a:not(.knopf){font-size:13.5px;}
}
@media (max-width:1024px){
  :root{--pad:32px;}
  .sec{padding:110px 0;}
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-cta{display:none;}
  .buehne .wrap{grid-template-columns:1fr;gap:48px;}
  .kacheln{height:520px;}
  .kopf--zeile{grid-template-columns:1fr;gap:20px;}
  .pakete{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;gap:28px;}
  .paket--top,.paket--top:hover{transform:none;}
  .gruende{grid-template-columns:minmax(0,1fr);gap:48px;}
  .gruende-kopf{position:static;}
  .zaehler{display:none;}
  .showreels{grid-template-columns:minmax(0,1fr);}
  .showreel--hoch{max-width:340px;width:100%;justify-self:center;}
  .partikel{display:none;}
  .fuss-oben{flex-direction:column;align-items:flex-start;gap:32px;}
  .fuss-logo{flex-direction:column;}
  .ref-oben{grid-template-columns:1fr;gap:40px;}
  .chat-wrap{grid-template-columns:1fr;gap:44px;}
  .seiten{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ueber-text{grid-template-columns:1fr;gap:18px;margin-top:32px;}
  .team{gap:36px 20px;}
  .team .person{flex-basis:calc((100% - 60px) / 4);}
  .kontakt-raster{grid-template-columns:1fr;gap:56px;}
  .fuss-spalten{grid-template-columns:repeat(3,minmax(0,1fr));}
  .fuss-logo{grid-column:1/-1;flex-direction:row;}
  .fall-videos{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
  .linie{grid-template-columns:minmax(0,1fr);gap:34px;padding:0 0 0 44px;}
  .linie::before,.linie::after{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto;}
  .linie::after{background:linear-gradient(180deg,rgba(13,110,99,.35) 0%,rgba(13,110,99,.6) 79%,var(--green) 80%);transform-origin:top;transform:scaleY(0);}
  .linie.da::after{transform:scaleY(1);}
  .schritt::before{top:3px;left:-44px;}
  .schritt--ziel::before{top:0;left:-47px;}
}
@media (max-width:768px){
  :root{--pad:22px;}
  .sec{padding:88px 0;}
  .nav{height:84px;}
  .nav.klein{height:64px;}
  .logo img{height:46px;}
  .nav.klein .logo img{height:34px;}
  .logo-wort{display:none;}
  .buehne{padding-top:120px;}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));height:460px;gap:12px;}
  .kacheln .spalte:nth-child(3){display:none;}
  .spur{gap:12px;}
  @keyframes hoch{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 6px),0)}}
  @keyframes runter{from{transform:translate3d(0,calc(-50% - 6px),0)}to{transform:translate3d(0,0,0)}}
  .aussage{padding:100px 0;}
  .satz + .hut,.aussage .lead + .hut{margin-top:72px;}
  .kopf{margin-bottom:48px;}
  .grund{top:96px;min-height:300px;padding:30px 26px;border-radius:24px;}
  .grund:nth-child(2){top:106px;}.grund:nth-child(3){top:116px;}.grund:nth-child(4){top:126px;}.grund:nth-child(5){top:136px;}.grund:nth-child(6){top:146px;}.grund:nth-child(7){top:156px;}
  .grund-nr{right:22px;top:18px;}
  .grund h3{margin-top:40px;}
  .grund > p:last-child{font-size:15.5px;}
  .paket{padding:34px 24px 30px;border-radius:24px;}
  .laufband{margin-bottom:64px;}
  .faecher{height:470px;}
  .handy{width:184px;border-radius:28px;}
  .handy--m{width:206px;}
  .handy-schirm{border-radius:21px;}
  .handy--l{transform:translateX(-50%) rotate(-9deg);}
  .handy--r{transform:translateX(50%) rotate(8deg);}
  .faecher:hover .handy--l{transform:translateX(-58%) rotate(-12deg);}
  .faecher:hover .handy--r{transform:translateX(58%) rotate(11deg);}
  .reel-text{font-size:14px;bottom:58px;}
  .ref-text .knopf + .knopf{margin:12px 0 0;}
  .showreel{border-radius:16px;}
  .showreels{margin-bottom:72px;}
  .play{width:84px;height:84px;}
  .zahlen{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:72px;}
  .zahl{padding:34px 20px;}
  .fall-art{display:none;}
  .fall-zeile{padding:26px 8px;}
  .fall-zeile:hover{padding-left:18px;padding-right:18px;}
  .fall-videos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .fall-inhalt{padding:4px 8px 32px;}
  .chat-verlauf{min-height:0;padding:20px 14px 24px;}
  .frage{max-width:88%;}
  .antwort{max-width:92%;}
  .schalter button{padding:11px 14px;font-size:13px;}
  .wand{grid-template-columns:minmax(0,1fr);height:620px;gap:12px;}
  .wand-spalte:nth-child(n+2){display:none;}
  .wand .spur{gap:12px;animation-duration:110s;}
  .stimme{padding:24px 22px;}
  .stimme blockquote{font-size:15.5px;}
  .seiten{grid-template-columns:minmax(0,1fr);}
  .team{gap:30px 16px;}
  .team .person{flex-basis:calc((100% - 16px) / 2);}
  .formular{padding:32px 22px;border-radius:22px;}
  .zwei{grid-template-columns:1fr;}
  .fuss-spalten{grid-template-columns:minmax(0,1fr);}
  .fuss-logo{flex-direction:column;}
  .fuss-logo img{height:84px;}
  .fuss-unten{flex-direction:column;}
  br.opt{display:none;}
}
@media (max-width:420px){
  .buehne h1{font-size:clamp(30px,8.6vw,40px);}
  .title{font-size:28px;}
  .handy{width:150px;}
  .handy--m{width:172px;}
  .format{font-size:9.5px;top:16px;left:12px;}
  .reel-text{font-size:12.5px;left:12px;right:12px;bottom:52px;}
  .sticker{left:12px;bottom:16px;font-size:11px;}
}

/* ── Bewegung reduzieren ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0s!important;}
  .rein{opacity:1;transform:none;}
  .zeile>span{transform:none;}
  .linie::after{transform:none;}
  .satz.scrub .w{color:inherit;}
  .wand{height:auto;-webkit-mask-image:none;mask-image:none;}
  .wand-spalte:nth-child(3){display:block;}
  html{scroll-behavior:auto;}
}