@font-face{font-family:'Figtree';src:url(/lp-dienstleister/fonts/figtree.woff2) format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(/lp-dienstleister/fonts/plus-jakarta-sans.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
/* ADs-Landingpage Dennis Hermann · Schwarz/Weiß wie die Referenz, Gold als Akzent */
@property --umlauf{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{
  --grau:#f4f4f5;--linie:#e3e3e6;
  --text:#0c0c0e;--text-2:#55575e;--text-3:#8b8d94;
  --gold-mat:linear-gradient(180deg,#e8c12d 0%,#dfb923 20%,#d3ad17 50%,#c8a20c 80%,#c19a06 100%);
  --gold-dunkel:linear-gradient(180deg,#f6d862 0%,#e8c12d 45%,#c99f0a 100%);
  --gold-hell:linear-gradient(180deg,#d4a812 0%,#a88100 100%);
  --tp:#00b67a;
  --font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px;
}
@media (min-width:700px){:root{--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5{margin:0;text-wrap:balance}
p{text-wrap:pretty}
.w{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
@media (min-width:700px){.w{padding:0 32px}}
.nur-mobil{}
@media (min-width:700px){.nur-mobil{display:none!important}}
@media (max-width:699px){.nur-gross{display:none!important}}

/* Abschnitte */
.schwarz{background:#000;color:#fff}
.weiss{background:#fff;color:var(--text)}
.abschnitt{position:relative;isolation:isolate;overflow:hidden;padding:80px 0}
@media (min-width:960px){.abschnitt{padding:124px 0}}
.zentriert{text-align:center}
.ueber{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.schwarz .ueber{color:rgba(255,255,255,.86)}
h2{font-size:clamp(28px,7.2vw,46px);line-height:1.12;letter-spacing:-.026em;font-weight:800}
.gold{background:var(--gold-hell);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.schwarz .gold,.hero .gold{background-image:var(--gold-dunkel);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Goldener Knopf: weißer Text, eine Zeile, kein Leuchten */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:460px;min-height:56px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:800;font-size:min(16.5px,calc((100vw - 76px) / 19.4));line-height:1;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 2px rgba(70,45,0,.55);
  background:var(--gold-mat);
  box-shadow:inset 1.5px 0 3px rgba(255,255,255,.27),inset -1.5px 0 3px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn span{white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn::before{content:"";position:absolute;z-index:2;inset:0;padding:1.5px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--umlauf),rgba(239,191,4,.35) 0deg,rgba(239,191,4,.35) 270deg,#fffbd4 305deg,rgba(239,191,4,.35) 340deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:umlauf 3s linear infinite}
@keyframes umlauf{to{--umlauf:360deg}}
@media (min-width:700px){.btn{width:auto;max-width:none;min-height:60px;padding:0 38px;font-size:17px}}
.knopf{display:flex;justify-content:center;margin-top:40px}

/* Kopf */
.kopf{position:absolute;z-index:10;top:0;left:0;right:0;padding:22px 0}
.kopf .w{display:flex;align-items:center;justify-content:space-between}
.logo{height:21px;width:auto}
.kopf .btn{display:none}
@media (min-width:700px){.kopf{padding:28px 0}.logo{height:25px}.kopf .btn{display:inline-flex;min-height:48px;padding:0 26px;font-size:15px}}

/* Hintergrund aus allen Webseiten */
.bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.raster{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;align-content:start}
.raster img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;opacity:.55}
.wand{display:none}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.92) 320px,rgba(0,0,0,.96) 100%)}
.abschnitt .bg::after{background:rgba(0,0,0,.94)}
@keyframes lauf-l{to{transform:translateX(-50%)}}
@keyframes lauf-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (min-width:700px){
  .raster{display:none}
  .wand{display:flex;flex-direction:column;gap:18px;position:absolute;left:50%;top:420px;transform:translate(-50%,-50%) perspective(1200px) rotateX(30deg) rotateZ(-12deg) scale(1.15)}
  .reihe{display:flex;width:max-content;animation:lauf-l 120s linear infinite;will-change:transform}
  .reihe:nth-child(even){animation-name:lauf-r;animation-duration:140s}
  .reihe img{width:320px;margin-right:18px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;opacity:.55}
  .bg::after{background:linear-gradient(180deg,rgba(0,0,0,.84) 0,rgba(0,0,0,.9) 420px,rgba(0,0,0,.96) 820px,#000 100%)}
  .abschnitt .bg::after{background:rgba(0,0,0,.94)}
}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#000;color:#fff;padding:92px 0 0}
@media (min-width:700px){.hero{padding:132px 0 0}}
.hero-kopf{max-width:1000px;margin:0 auto;text-align:center}
.hero .ueber{color:#fff}
.hero h1{font-size:clamp(30px,8.2vw,64px);line-height:1.1;font-weight:500;letter-spacing:-.025em}
.hero h1 b{font-weight:800}
@media (min-width:700px){.hero h1{font-weight:700;line-height:1.04;letter-spacing:-.035em}}
.sub{margin:18px auto 0;max-width:720px;font-size:17px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.76)}
.sub b{color:#fff;font-weight:800}
@media (min-width:700px){.sub{font-size:19px}}
.hero-grid{display:grid;gap:22px;margin-top:30px}
@media (min-width:700px){.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:52px;align-items:center;margin-top:52px}}
.video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.9)}
.video img{width:100%;height:100%;object-fit:cover;object-position:20% 50%}
@media (min-width:700px){.video{aspect-ratio:4/5;border-radius:24px}.video img{object-position:12% 50%}}
.v-badge{position:absolute;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:#fff;color:#111;font-size:10.5px;font-weight:600;line-height:1.2;box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.v-badge b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em}
.v-badge>svg{width:18px;height:18px;flex:none}
.v-badge.vb-oben{top:10px;left:10px}
.v-badge.vb-unten{bottom:10px;right:10px}
@media (min-width:700px){.v-badge{padding:10px 14px;gap:10px;font-size:12px;border-radius:14px}.v-badge b{font-size:17px}.v-badge>svg{width:22px;height:22px}.v-badge.vb-oben{top:16px;left:16px}.v-badge.vb-unten{bottom:16px;right:16px}}
.tp-sterne{display:inline-flex;gap:2px}
.tp-sterne i{width:16px;height:16px;display:grid;place-items:center;background:var(--tp)}
.tp-sterne svg{width:11px;height:11px;fill:#fff}
.v-badge .tp-sterne i{width:13px;height:13px}.v-badge .tp-sterne svg{width:9px;height:9px}
@media (min-width:700px){.v-badge .tp-sterne i{width:16px;height:16px}.v-badge .tp-sterne svg{width:11px;height:11px}}
.hero-links{display:flex;flex-direction:column;align-items:center;gap:16px}
.sterne-zeile{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35;color:rgba(255,255,255,.8)}
.sterne-zeile b{color:#fff}
.sterne-zeile .tp-sterne i{width:20px;height:20px}.sterne-zeile .tp-sterne svg{width:14px;height:14px}
.hero-rechts{display:flex;flex-direction:column;align-items:center;gap:28px}
@media (min-width:700px){.hero-rechts{align-items:flex-start}}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:18px;width:100%}
.haken li{position:relative;padding-left:36px;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.haken li b{color:#fff;font-weight:800}
.haken li svg{position:absolute;left:0;top:2px;width:22px;height:22px;color:#e8c12d;stroke-width:2.6}
@media (min-width:960px){.haken li{font-size:17.5px}}

/* Vertrauenszeile: Siegel + Bewertungsband */
.vertrauen{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:40px}
.siegel{display:flex;gap:10px;justify-content:center}
.siegel img{height:70px;width:auto;border-radius:8px}
@media (min-width:700px){.vertrauen{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px;margin-top:56px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}.siegel{justify-content:flex-start}}
.band{position:relative;overflow:hidden;min-width:0}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.band::before{left:0;background:linear-gradient(90deg,var(--band,#000),transparent)}
.band::after{right:0;background:linear-gradient(-90deg,var(--band,#000),transparent)}
.spur{display:flex;width:max-content;animation:lauf-l var(--dauer,60s) linear infinite;will-change:transform}
.band.rechts .spur{animation-name:lauf-r}
.spur>*{flex:none;margin-right:14px}
.bewertung{display:flex;flex-direction:column;gap:9px;width:282px;min-height:132px;padding:15px 17px 14px;border-radius:12px;background:#fff;color:#1a1a1d}
.bewertung p{margin:0;font-size:13.5px;line-height:1.45;color:#2a2b30;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bewertung .bew-fuss{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;font-size:12.5px}
.bewertung .bew-fuss span{color:#7b7e86;font-size:12px}
.arbeiten{padding:52px 0 60px}
.arbeiten .ueber{text-align:center;color:rgba(255,255,255,.6)}
.arbeiten .spur img{width:270px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
@media (min-width:700px){.arbeiten .spur img{width:340px}}

/* Problem */
.problem-grid{display:grid;gap:40px}
@media (min-width:960px){.problem-grid{grid-template-columns:1.2fr .9fr;gap:80px;align-items:center}.problem-grid .portrait{order:2}}
.portrait{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#ddd;box-shadow:0 40px 70px -40px rgba(0,0,0,.5)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:90px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.86));color:rgba(255,255,255,.86);font-size:14px;line-height:1.45}
.portrait figcaption b{display:block;margin-bottom:2px;color:#fff;font-size:21px;letter-spacing:-.01em}
.kreuze{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px}
.kreuze li{position:relative;padding-left:34px;font-size:16.5px;line-height:1.55;color:var(--text-2)}
.kreuze li b{color:var(--text)}
.kreuze svg{position:absolute;left:0;top:3px;width:19px;height:19px;color:var(--text);stroke-width:2.8}
.konsequenz{margin:26px 0 0;font-size:16.5px;line-height:1.6;color:var(--text-2)}
.konsequenz b{color:var(--text)}
.hinweis{display:flex;gap:14px;align-items:flex-start;margin-top:26px;padding:20px 22px;border-radius:16px;background:var(--grau);font-size:16px;line-height:1.55;color:var(--text-2)}
.hinweis b{color:var(--text)}
.hinweis svg{flex:none;width:24px;height:24px;color:#c99f0a}
.problem .btn{margin-top:30px}

/* Ergebnisse: weiße Karten auf Schwarz */
.karten{display:grid;gap:18px;margin-top:44px;text-align:left}
@media (min-width:960px){.karten{grid-template-columns:repeat(3,1fr);gap:22px}}
.karte{border-radius:var(--r);overflow:hidden;background:#fff;color:var(--text)}
.karte-bild{display:grid;place-items:center;aspect-ratio:16/11;padding:22px 20px 8px;background:radial-gradient(130% 100% at 50% 0%,#fff 0%,#f2f2f3 75%)}
.karte-bild img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 22px rgba(0,0,0,.2))}
.karte-text{padding:24px 24px 30px}
.karte h3{font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.012em}
.karte h3 span{display:block;font-weight:500}
.karte p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-2)}

/* System */
.schritte{display:grid;gap:20px;margin-top:48px}
.schritt{display:grid;border-radius:28px;overflow:hidden;background:var(--grau)}
.schritt-bild{position:relative;display:grid;place-items:center;aspect-ratio:16/11;padding:26px 22px}
.schritt-bild img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(0,0,0,.2))}
.schritt-bild.foto{padding:0}
.schritt-bild.foto img{object-fit:cover;filter:none}
.schritt-text{padding:28px 24px 34px}
.schritt-nr{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.schritt h3{margin:10px 0 12px;font-size:26px;line-height:1.18;font-weight:800;letter-spacing:-.022em}
.schritt p{margin:0;font-size:16px;line-height:1.65;color:var(--text-2)}
@media (min-width:960px){
  .schritt{grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:420px}
  .schritt:nth-child(even) .schritt-bild{order:2}
  .schritt-bild{aspect-ratio:auto;padding:40px}
  .schritt-text{display:flex;flex-direction:column;justify-content:center;padding:56px 60px}
  .schritt h3{font-size:32px}
}

/* Projekte-Band */
.projekte{padding:0 0 96px;--band:#fff}
.projekte .spur img{width:300px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.18))}
@media (min-width:700px){.projekte .spur img{width:400px}}
.projekte .band{padding:10px 0 26px}
.projekte h2{margin-bottom:34px}

/* Fallstudie */
.fall{padding-top:0}
.fall-karte{margin-top:44px;padding:30px 20px 36px;border-radius:32px;background:var(--grau)}
@media (min-width:960px){.fall-karte{padding:64px}}
.fall-oben{display:grid;gap:30px}
@media (min-width:960px){.fall-oben{grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}}
.marken{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.marken i{font-style:normal;font-weight:500;color:var(--text-3)}
.marken-zeile{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--text-3)}
.fall-karte h3{margin:20px 0 14px;font-size:clamp(25px,6vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.026em}
.fall-text>p{margin:0;font-size:16.5px;line-height:1.62;color:var(--text-2)}
.gebucht-titel{margin:24px 0 12px!important;font-size:14.5px!important;font-weight:800;color:var(--text)!important}
.gebucht{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.gebucht li{position:relative;padding-left:26px;font-size:15px;line-height:1.35;font-weight:600}
.gebucht svg{position:absolute;left:0;top:0;width:18px;height:18px;stroke-width:2.6;color:#b8900a}
.buehne img{width:100%;filter:drop-shadow(0 30px 34px rgba(0,0,0,.22))}
.zitat{margin:56px 0 0;text-align:center}
.g-sterne{display:inline-flex;gap:2px;color:#fbbc05}
.g-sterne svg{width:20px;height:20px;fill:currentColor}
.zitat q{display:block;max-width:780px;margin:14px auto 0;font-size:clamp(23px,5.8vw,36px);line-height:1.22;font-weight:800;letter-spacing:-.022em;quotes:"„" "“"}
.zitat cite{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-style:normal;font-size:14px;font-weight:600;color:var(--text-2)}
.zitat cite svg{width:17px;height:17px}
.zahlen{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;margin-top:48px;border-top:1px solid var(--linie)}
@media (min-width:700px){.zahlen{grid-template-columns:repeat(4,1fr);column-gap:32px}}
.zahl{padding:22px 0;border-bottom:1px solid var(--linie)}
.zahl b{display:block;font-size:36px;line-height:1;font-weight:900;letter-spacing:-.035em;background:var(--gold-hell);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.zahl span{display:block;margin-top:9px;font-size:13.5px;line-height:1.42;color:var(--text-2)}
.teil-titel{margin:64px 0 0;font-size:clamp(22px,5.6vw,30px);line-height:1.2;font-weight:800;letter-spacing:-.02em}
.teil-titel+p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--text-2)}
.hebel-reihe{display:flex;gap:14px;margin:24px -20px 0;padding:0 20px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hebel-reihe::-webkit-scrollbar{display:none}
.hebel{flex:0 0 84%;scroll-snap-align:center;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff}
.hebel-bild{display:grid;place-items:center;aspect-ratio:16/10;padding:16px 14px 4px;background:radial-gradient(130% 100% at 50% 0%,#fff 0%,#f2f2f3 75%)}
.hebel-bild img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.18))}
.hebel-text{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.hebel-nr{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a88100}
.hebel h4{margin:7px 0 0;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.012em}
.hebel .denkt{margin:10px 0 0;font-size:14.5px;line-height:1.45;font-style:italic;color:var(--text)}
.hebel .denkt span{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:2px}
.hebel p.text{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.hebel .wirkung{margin:auto 0 0;padding-top:14px;font-size:14px;line-height:1.45;font-weight:700;color:var(--text);border-top:1px solid #ececee;margin-top:14px}
.wisch{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--text-3)}
@media (min-width:960px){.hebel-reihe{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0 0;padding:0;overflow:visible}.wisch{display:none}}
@media (min-width:700px) and (max-width:959px){.hebel{flex-basis:46%}}
.unten{display:grid;gap:48px;margin-top:64px}
@media (min-width:960px){.unten{grid-template-columns:1fr 1fr;gap:56px}}
.unten .teil-titel{margin-top:0}
.kette{list-style:none;margin:22px 0 0;padding:0;counter-reset:k}
.kette li{position:relative;padding:0 0 20px 46px;font-size:15.5px;line-height:1.45;color:var(--text-2)}
.kette li b{display:block;font-size:16.5px;color:var(--text)}
.kette li::before{counter-increment:k;content:counter(k);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0c0c0e;color:#fff;font-size:13px;font-weight:800}
.kette li::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;background:var(--linie)}
.kette li:last-child::after{display:none}
.kette-fazit{margin:4px 0 0;padding:16px 18px;border-radius:14px;background:#0c0c0e;color:#fff;font-size:15.5px;line-height:1.45;font-weight:700}
.vn{display:grid;gap:12px;margin-top:22px}
@media (min-width:700px){.vn{grid-template-columns:1fr 1fr}}
.vn>div{padding:20px;border-radius:18px;background:#fff}
.vn .nachher{background:#0c0c0e;color:#fff}
.vn h5{margin:0 0 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.vn .nachher h5{color:rgba(255,255,255,.55)}
.vn ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vn li{position:relative;padding-left:28px;font-size:15px;line-height:1.45}
.vn li svg{position:absolute;left:0;top:1px;width:18px;height:18px;stroke-width:2.6}
.vn .vorher svg{color:var(--text)}
.vn .nachher svg{color:#e8c12d}
.fussnote{margin:40px 0 0;font-size:13px;line-height:1.5;color:var(--text-3);text-align:center}

/* Nächster Schritt */
.naechster-grid{display:grid;gap:44px}
@media (min-width:960px){.naechster-grid{grid-template-columns:1fr 1fr;gap:80px;align-items:center}}
.naechster h2{font-size:clamp(29px,7.2vw,46px)}
.naechster .text>p{margin:18px 0 0;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.76)}
.naechster .text>p b{color:#fff}
.naechster .haken{margin-top:20px}
.anruf{position:relative;margin:0 0 -48px;z-index:1}
.anruf .foto{border-radius:22px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.anruf .foto img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.anruf .handy{position:absolute;right:-8px;bottom:6px;width:27%;filter:drop-shadow(0 24px 26px rgba(0,0,0,.6))}
.formular{position:relative;z-index:2;margin-right:12%;padding:26px 22px 22px;border-radius:22px;background:#fff;color:var(--text);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
@media (max-width:699px){.formular{margin-right:0}}
.formular h3{font-size:21px;letter-spacing:-.015em}
.formular .zeile{margin:6px 0 18px;font-size:14px;color:var(--text-2)}
.feld{margin-bottom:12px}
.feld label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:#3c3f46}
.feld input{width:100%;height:54px;padding:0 16px;border:1.5px solid #e1e1e4;border-radius:12px;background:#fafafa;font:500 16px var(--font);color:var(--text);transition:border-color .15s,box-shadow .15s,background .15s}
.feld input:focus{outline:none;border-color:#c8a20c;box-shadow:0 0 0 4px rgba(232,193,45,.25);background:#fff}
.formular .btn{width:100%;max-width:none;margin-top:6px}
@media (min-width:700px){.formular .btn{font-size:16px;padding:0 20px}}
.formular small{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:12.5px;line-height:1.5;color:#6b6e75}
.formular small svg{flex:none;width:16px;height:16px;margin-top:1px}
.formular small a{color:inherit}
.danke{display:none;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#f2fbf5;color:#14532d;font-size:14px;font-weight:600}
.danke.an{display:block}

/* Fuß */
.fuss{padding:48px 0 64px;background:#000;color:rgba(255,255,255,.6);font-size:14px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1)}
.fuss .logo{height:20px;margin-bottom:16px}
.fuss p{margin:0 0 10px;max-width:540px}
.fuss nav{display:flex;gap:20px;margin-top:16px}
.fuss a{color:rgba(255,255,255,.85);text-decoration:none}

@media (prefers-reduced-motion:reduce){.spur,.reihe,.btn::before{animation:none!important}}

/* Rasterspalten dürfen schrumpfen, lange Wörter trennen */
.hero-grid,.problem-grid,.schritte,.schritt,.naechster-grid,.fall-oben,.unten,.karten{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.hero-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}}
@media (min-width:960px){.problem-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}.karten{grid-template-columns:repeat(3,minmax(0,1fr))}.schritt{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.fall-oben{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.unten,.naechster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
h1,h2,h3,h4{hyphens:manual;overflow-wrap:break-word}
.v-badge .tp-sterne{flex:none}

.anruf .handy{width:17%;right:14px;bottom:-22px}
@media (min-width:960px){.anruf .handy{width:18%;right:-18px;bottom:-30px}}
@media (max-width:699px){.formular .btn{font-size:min(16px,calc((100vw - 120px) / 19.4));padding:0 14px}}

/* Geräte stehen frei auf der Karte, kein Kasten dahinter */
.karte-bild,.hebel-bild{background:none}
.karte-bild{padding:26px 22px 0}

.anruf{margin-bottom:-56px}
.formular{margin:0 18px}
@media (max-width:699px){.formular{margin:0 10px}}

/* Fotoszenen (Higgsfield) randlos in Karten */
.karte-bild.foto,.hebel-bild.foto{padding:0;aspect-ratio:3/2}
.karte-bild.foto img,.hebel-bild.foto img,.schritt-bild.foto img{width:100%;height:100%;object-fit:cover;filter:none}
.buehne.foto img{border-radius:24px;filter:none;box-shadow:0 40px 70px -40px rgba(0,0,0,.45)}
@media (min-width:960px){.schritt-bild.foto{min-height:420px}}

/* Unterseite Formular */
.unterseite{min-height:100vh;padding-top:120px}
.u-titel{font-size:clamp(30px,7.6vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.u-siegel{justify-content:flex-start;margin-top:30px}
.u-formular{margin:0}
@media (min-width:960px){.unterseite{padding-top:170px}}

/* Projekte-Band: reine Screenshots */
.projekte .spur img{width:300px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;filter:none;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 34px -18px rgba(0,0,0,.35)}
@media (min-width:700px){.projekte .spur img{width:420px}}
.projekte .band{padding:12px 0 34px}

/* Fallstudie unten: Dunkelgrün von dennis-hermann.de statt Schwarz */
.kette li::before{background:#195044}
.kette-fazit{background:#195044}
.vn .nachher{background:#195044}

/* Ausgewählte Arbeiten: eigene weiße Sektion */
.hero{padding-bottom:64px}
@media (min-width:700px){.hero{padding-bottom:88px}}
.arbeiten{padding:56px 0 8px;--band:#fff}
.arbeiten .ueber{text-align:center;color:var(--text-3)}
.arbeiten .band{margin-top:6px;padding:8px 0 26px}
.arbeiten .spur img{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 34px -18px rgba(0,0,0,.35)}
@media (min-width:960px){.arbeiten{padding-top:80px}}

/* Hero passt komplett in den ersten Bildschirm */
@media (min-width:700px){
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(84px,11vh,112px) 0 clamp(18px,3vh,32px)}
  .hero .ueber{margin-bottom:clamp(8px,1.4vh,14px)}
  .hero h1{font-size:clamp(30px,min(3.7vw,6.2vh),58px)}
  .sub{margin-top:clamp(8px,1.4vh,16px);font-size:clamp(15px,min(1.35vw,2.1vh),19px)}
  .hero-grid{grid-template-columns:auto minmax(0,520px);justify-content:center;gap:clamp(28px,3.4vw,56px);margin-top:clamp(18px,3.4vh,40px)}
  .video{aspect-ratio:16/9;width:min(600px,46vw,calc((100svh - 450px) * 1.6));border-radius:18px}
  .video img{object-position:20% 50%}
  .haken{gap:clamp(8px,1.6vh,18px)}
  .haken li{font-size:clamp(14.5px,min(1.2vw,2vh),17.5px)}
  .hero-rechts{gap:clamp(14px,2.6vh,28px)}
  .hero-rechts .btn{min-height:clamp(48px,6.4vh,60px)}
  .vertrauen{margin-top:clamp(16px,3vh,40px);padding-top:clamp(14px,2.4vh,28px)}
  .siegel img{height:clamp(50px,7.4vh,70px)}
  .bewertung{min-height:0;width:270px}
}
@media (min-width:700px) and (max-width:959px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .video{width:100%}
  .hero-rechts{align-items:center}
}

@media (min-width:700px){
  .hero-grid{grid-template-columns:auto minmax(0,560px)}
  .video{width:min(580px,44vw,calc((100svh - 470px) * 1.55))}
  .haken{gap:clamp(6px,1.3vh,16px)}
  .haken li{font-size:clamp(14px,min(1.12vw,1.95vh),17px);line-height:1.45}
  .hero .bewertung{gap:6px;padding:12px 15px 11px;width:300px}
  .hero .bewertung p{-webkit-line-clamp:2;font-size:13px}
  .siegel img{height:clamp(48px,6.6vh,66px)}
}

/* Sektionen passen am Desktop jeweils in einen Bildschirm */
@media (min-width:960px){
  .abschnitt{padding:clamp(60px,8.5vh,104px) 0}
  .problem h2,.ergebnisse h2,.system h2,.fall h2,.naechster h2{font-size:clamp(28px,min(3vw,4.8vh),46px)}
  .problem-grid{align-items:center}
  .problem-grid .portrait{max-height:calc(100svh - 2 * clamp(60px,8.5vh,104px))}
  .kreuze{margin-top:clamp(14px,2.4vh,30px);gap:clamp(8px,1.7vh,20px)}
  .kreuze li,.konsequenz{font-size:clamp(14.5px,1.9vh,16.5px)}
  .konsequenz{margin-top:clamp(12px,2.2vh,26px)}
  .hinweis{margin-top:clamp(12px,2.2vh,26px);padding:clamp(12px,1.8vh,20px) 20px;font-size:clamp(14.5px,1.85vh,16px)}
  .problem .btn{margin-top:clamp(14px,2.4vh,30px)}
  .karten{margin-top:clamp(22px,3.4vh,44px)}
  .karte-bild.foto{aspect-ratio:16/10}
  .karte-text{padding:clamp(16px,2.2vh,24px) 22px clamp(18px,2.6vh,30px)}
  .karte h3{font-size:clamp(17px,2.1vh,20px)}
  .karte p{font-size:clamp(14px,1.75vh,15.5px);margin-top:8px}
  .knopf{margin-top:clamp(22px,3.4vh,40px)}
}

/* Bewertungsband: Karten blenden zum Rand echt aus statt schwarzer Schatten */
.vertrauen .band::before,.vertrauen .band::after{display:none}
.vertrauen .band{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
@media (max-width:699px){.vertrauen .band{margin:0 -20px}}

/* Keine Nähte zwischen Sektionen (Bruchteil-Pixel) */
body{background:#fff}
main > section + section{margin-top:-1px}
.fuss{position:relative;margin-top:-1px}

/* Knöpfe: feste Innenabstände, Schriftgröße passt das Skript an */
.btn{padding-left:22px;padding-right:22px}
@media (max-width:699px){.btn{font-size:16px}}

/* Dunkle Textsektionen: keine Kacheln hinter Fließtext */
@media (max-width:699px){.abschnitt .bg{display:none}}
.abschnitt .bg::after{background:rgba(0,0,0,.97)!important}
.naechster .text>p{line-height:1.55}
.naechster .haken{gap:14px}
.haken li{line-height:1.45}

/* Leistung: Endlos-Animationen laufen nur im sichtbaren Bereich, Wand als eine gedimmte Ebene */
.spur,.reihe,.btn::before{animation-play-state:paused}
.band.lauf .spur,.wand.lauf .reihe,.btn.lauf::before{animation-play-state:running}
@media (min-width:700px){.reihe img{opacity:1}.wand{opacity:.55}}
.btn{will-change:transform}

/* Einwilligung */
.einwilligung{position:relative;display:flex;gap:12px;align-items:flex-start;margin:6px 0 16px;font-size:13px;line-height:1.55;color:#4b4e56;cursor:pointer}
.einwilligung input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.einwilligung .kasten{flex:none;width:24px;height:24px;margin-top:1px;border:1.5px solid #cfd0d4;border-radius:7px;background:#fafafa;display:grid;place-items:center;transition:background .15s,border-color .15s}
.einwilligung .kasten svg{width:15px;height:15px;color:#fff;stroke-width:3;opacity:0;transition:opacity .15s}
.einwilligung input:checked+.kasten{background:#c8a20c;border-color:#c8a20c}
.einwilligung input:checked+.kasten svg{opacity:1}
.einwilligung input:focus-visible+.kasten{box-shadow:0 0 0 4px rgba(232,193,45,.3)}
.einwilligung.fehlt .kasten{border-color:#d1453b;box-shadow:0 0 0 3px rgba(209,69,59,.15)}
.einwilligung a{color:inherit;text-decoration:underline}

/* Wand: ein vorgerenderter Streifen pro Reihe */
@media (min-width:700px){.reihe img.streifen{width:2366px;height:200px;aspect-ratio:auto;margin:0;border-radius:0;object-fit:fill;opacity:1;flex:none}}
@media (min-width:700px){.wand{opacity:1}}

/* Formularseite: am Handy Überschrift, Formular, dann Rest */
.unterseite .naechster-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "form" "rest";gap:26px}
.u-kopf{grid-area:kopf}.u-form{grid-area:form}.u-rest{grid-area:rest}
.u-rest>p:first-child{margin-top:0}
@media (max-width:699px){.unterseite{padding-top:88px}.u-titel{font-size:clamp(27px,7.4vw,34px)}}
@media (min-width:960px){
  .unterseite .naechster-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"kopf form" "rest form";column-gap:80px;row-gap:18px;align-items:start}
  .u-form{align-self:center}
}
.u-kopf .u-siegel{margin-top:18px}
@media (max-width:699px){.u-kopf .u-siegel{justify-content:flex-start}.u-kopf .u-siegel img{height:56px}}

/* Formularseite Desktop: Abstand zur Kopfzeile, vertikal mittig, Formular oben bündig mit Überschrift */
@media (min-width:960px){
  .abschnitt.unterseite{min-height:100svh;display:flex;align-items:center;padding:clamp(120px,16vh,160px) 0 clamp(60px,8vh,96px)}
  .unterseite > .w{width:100%}
  .u-form{align-self:start}
}

/* Fußzeile wie auf dennis-hermann.de */
footer.fuss{position:relative;margin-top:-1px;border-top:1px solid rgba(243,245,246,.06);background:#0b0b0d;color:#f3f5f6;padding:clamp(38px,4vw,58px) 0;font-size:inherit;line-height:normal}
.fuss-in{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4.6vw,67px);display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(29px,3.4vw,51px)}
footer.fuss .marke{display:inline-block;margin-bottom:13px}
footer.fuss .logo{height:28px;width:auto;margin:0}
.fuss-satz{margin:0!important;max-width:34ch!important;font-size:13.5px;font-weight:300;line-height:1.58;color:#6b6f74}
footer.fuss h4{margin:0 0 16px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6b6f74}
footer.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.fuss a:not(.marke){font-size:14px;font-weight:300;color:#a1a5a9;text-decoration:none;transition:color .2s ease}
footer.fuss a:not(.marke):hover,footer.fuss a:not(.marke):focus-visible{color:#f3f5f6}
.fuss-unten{max-width:1440px;margin:clamp(32px,3.4vw,48px) auto 0;padding:0 clamp(20px,4.6vw,67px)}
.fuss-unten div{border-top:1px solid rgba(243,245,246,.06);padding-top:23px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:12.5px;font-weight:300;color:#6b6f74}
@media (max-width:760px){.fuss-in{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1 / -1}}

/* Logo oben links größer */
.kopf .logo{height:28px}
@media (min-width:700px){.kopf .logo{height:34px}}

/* Ergebnisse: Webseiten-Wand wie im Hero, auch am Handy */
.ergebnisse .bg{display:block!important}
.ergebnisse .wand{display:flex;flex-direction:column;gap:18px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) perspective(1200px) rotateX(30deg) rotateZ(-12deg) scale(1.15);opacity:1}
.ergebnisse .reihe{display:flex;width:max-content;animation:lauf-l 120s linear infinite;will-change:transform}
.ergebnisse .reihe:nth-child(even){animation-name:lauf-r;animation-duration:140s}
.ergebnisse .reihe img.streifen{width:2366px;height:200px;margin:0;border-radius:0;flex:none;opacity:1}
.ergebnisse .bg::after{background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.86) 100%)!important}
@media (max-width:699px){.ergebnisse .wand{transform:translate(-50%,-50%) perspective(900px) rotateX(28deg) rotateZ(-12deg) scale(.8)}}
.ergebnisse .wand{transform:translate(-50%,-50%) perspective(1200px) rotateX(30deg) rotateZ(-12deg) scale(1.45)}
@media (max-width:699px){.ergebnisse .wand{transform:translate(-50%,-50%) perspective(900px) rotateX(28deg) rotateZ(-12deg) scale(1)}}
@media (max-width:699px){.ergebnisse .reihe{animation:none!important}.ergebnisse .reihe:nth-child(odd){transform:translateX(-18%)}.ergebnisse .wand{transform:translate(-50%,-50%) perspective(900px) rotateX(24deg) rotateZ(-12deg) scale(1.1)}}
@media (min-width:700px){.hero h1{font-size:clamp(28px,min(3.3vw,5.2vh),52px)}}

/* Hero-Überschrift: feste Zeilen, "regionalen Marktführer" nie getrennt */
.hero h1 .hz{display:block}
.hero h1 b.gold{white-space:nowrap}
@media (max-width:699px){.hero h1{font-size:min(8.2vw,calc((100vw - 40px) / 11.6))}}
.hero h1 .hz{white-space:nowrap}
@media (max-width:699px){.hero h1{font-size:calc((100vw - 40px) / 12.6);line-height:1.12}}

/* Bewerbungsformular in Schritten */
.bewerbung .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.fortschritt{display:flex;align-items:center;gap:14px;margin:0 0 20px;font-size:12.5px;font-weight:700;color:var(--text-3);white-space:nowrap}
.f-balken{flex:1;height:6px;border-radius:99px;background:#eeeef0;overflow:hidden}
.f-balken i{display:block;width:0;height:100%;border-radius:inherit;background:var(--gold-mat);transition:width .35s ease}
.schritt-f{min-width:0;margin:0;padding:0;border:0}
.schritt-f legend{padding:0;margin:0 0 16px;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.f-unter{margin:-8px 0 16px;font-size:14px;line-height:1.5;color:var(--text-2)}
.feld select,.feld textarea{width:100%;padding:0 16px;border:1.5px solid #e1e1e4;border-radius:12px;background:#fafafa;font:500 16px var(--font);color:var(--text);transition:border-color .15s,box-shadow .15s,background .15s}
.feld select{height:54px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b8d94' stroke-width='2'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.feld select:invalid{color:#8b8d94}
.feld textarea{min-height:140px;padding:14px 16px;line-height:1.5;resize:vertical}
.feld select:focus,.feld textarea:focus{outline:none;border-color:#c8a20c;box-shadow:0 0 0 4px rgba(232,193,45,.25);background-color:#fff}
.feld select.fehlt,.feld textarea.fehlt,.feld input.fehlt{border-color:#d1453b;box-shadow:0 0 0 3px rgba(209,69,59,.12)}
.wahl{display:grid;gap:10px;margin-bottom:12px}
.wahl label{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border:1.5px solid #e1e1e4;border-radius:12px;background:#fafafa;font-size:15.5px;line-height:1.3;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.wahl label::before{content:"";flex:none;width:20px;height:20px;box-sizing:border-box;border:1.5px solid #cfd0d4;border-radius:50%;background:#fff;transition:border .15s}
.wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
@media (hover:hover){.wahl label:hover{border-color:#c8c9ce;background:#fff}}
.wahl label.an{border-color:#c8a20c;background:#fffbea}
.wahl label.an::before{border:6px solid #c8a20c}
.wahl label:focus-within{box-shadow:0 0 0 4px rgba(232,193,45,.25)}
.wahl.fehlt label{border-color:#e9a29d}
.f-hinweis{min-height:0;margin:0;font-size:13.5px;font-weight:600;color:#b42318}
.f-hinweis:not(:empty){margin:4px 0 10px}
.f-knoepfe{display:flex;align-items:center;gap:16px;margin-top:8px}
.f-knoepfe .btn{flex:1;min-width:0;margin-top:0}
.f-zurueck{flex:none;height:54px;padding:0 4px;border:0;background:none;font:700 15px var(--font);color:var(--text-2);cursor:pointer}
.f-zurueck:hover{color:var(--text)}
.f-zurueck[hidden]{display:none}
.bewerbung.gesendet .schritt-f,.bewerbung.gesendet .fortschritt,.bewerbung.gesendet .f-knoepfe,.bewerbung.gesendet .f-hinweis{display:none}
/* Hero-Video: läuft stumm automatisch, Klick ins Video schaltet den Ton ein */
[data-video]{cursor:pointer}
.video video{display:block;width:100%;height:100%;object-fit:cover}
.v-ton{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:99px;background:rgba(0,0,0,.62);color:#fff;font:700 12px var(--font);white-space:nowrap;cursor:pointer;transition:opacity .3s ease}
.v-ton svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:700px){.v-ton{top:16px;right:16px;padding:8px 13px;font-size:13px}}
[data-video].mit-ton .v-ton{opacity:0;pointer-events:none}

/* Video vor den Fragen und nach dem Absenden */
.bewerbung.vor-start .fortschritt,.bewerbung.vor-start .schritt-f,.bewerbung.vor-start .f-knoepfe,.bewerbung.vor-start .f-hinweis{display:none}
.bewerbung:not(.vor-start) .f-intro{display:none}
.f-intro-titel{margin:0 0 16px;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.f-film{position:relative;margin:0 0 18px;border-radius:14px;overflow:hidden;background:#0b0b0d}
.f-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0b0d}
/* Handy: Video über die ganze Kartenbreite */
@media (max-width:699px){.u-formular .f-film{margin-left:-22px;margin-right:-22px;border-radius:0}}
/* Desktop: solange ein Video zu sehen ist, bekommt die Formularspalte mehr Platz */
@media (min-width:960px){
  .unterseite > .w{max-width:1360px}
  .unterseite .naechster-grid:has(.bewerbung.vor-start),.unterseite .naechster-grid:has(.bewerbung.gesendet){grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);column-gap:56px}
}
.f-intro .btn{width:100%;margin-top:0}
.f-dauer{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-3);text-align:center}
.f-fertig .f-dauer{text-align:left}
.f-ablauf+.f-dauer{margin-top:16px}
.f-ablauf{margin:8px 0 0;padding-left:22px;display:grid;gap:8px;font-size:15.5px;line-height:1.5;color:var(--text-2)}
.f-ablauf li::marker{font-weight:800;color:#c8a20c}
.f-fertig p+p{margin-top:12px}
.f-fertig h3{margin:4px 0 10px;font-size:22px;line-height:1.25;letter-spacing:-.015em}
.f-fertig p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Schritte sind unterschiedlich hoch: oben bündig, damit beim Weiterklicken nichts springt */
@media (min-width:960px){.abschnitt.unterseite{align-items:flex-start}}

/* Kopfzeile mit Navigation (Startseite, Über mich, Fallstudien) */
.kopf-marke{display:flex}
.kopf-nav{display:flex;align-items:center;gap:18px}
.kopf-nav a:not(.btn){font-size:14px;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap;transition:color .15s}
.kopf-nav a:not(.btn):hover,.kopf-nav a[aria-current]{color:#fff}
.kopf-nav a[aria-current]{text-decoration:underline;text-decoration-color:#e8c12d;text-decoration-thickness:2px;text-underline-offset:6px}
@media (min-width:700px){.kopf-nav{gap:30px}.kopf-nav a:not(.btn){font-size:15px}}
@media (max-width:374px){.kopf .logo{height:24px}.kopf-nav{gap:14px}.kopf-nav a:not(.btn){font-size:13px}}

/* Unterseiten: schwarzer Seitenkopf */
.seitenkopf{padding:124px 0 60px}
@media (min-width:960px){.seitenkopf{padding:180px 0 96px}}
.seitenkopf .u-titel{margin:0;color:#fff}
.seitenkopf .lead{max-width:680px;margin:20px 0 0;font-size:17px;line-height:1.6;color:rgba(255,255,255,.76)}
@media (min-width:700px){.seitenkopf .lead{font-size:19px}}
/* Fallstudien-Seite: Abstand zwischen schwarzem Kopf und Fallstudie */
.seitenkopf + .fall{padding-top:64px}
@media (min-width:960px){.seitenkopf + .fall{padding-top:88px}}

/* Cookie-Einwilligung (Texte und Verhalten wie auf den übrigen Seiten) */
.cookie-ui{color:var(--text);font-size:16px;line-height:1.55}
.cookie-ui [hidden]{display:none!important}
.cookie-banner,.cookie-dialog{background:#fff;color:var(--text);border:1px solid var(--linie);border-radius:22px;padding:26px;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.cookie-banner{position:fixed;z-index:90;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:440px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;animation:cookie-ankommen .3s ease-out both}
.cookie-kennung{display:flex;align-items:center;gap:12px}
.cookie-label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.cookie-zeichen{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fffbea;border:1px solid #ecd27a;color:#a88100}
.cookie-zeichen svg{width:21px;height:21px}
.cookie-banner h2,.cookie-dialog h2{margin:16px 0 10px;font-size:27px;line-height:1.12;letter-spacing:-.03em;font-weight:800}
.cookie-banner h2 span{color:var(--text-3);font-weight:600}
.cookie-text{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--text-2)}
.cookie-aktionen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cookie-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border:1.5px solid #dcdce0;border-radius:999px;background:#fff;color:var(--text);font:700 14px var(--font);cursor:pointer;transition:border-color .15s,background .15s}
.cookie-btn:hover{border-color:#b9bac0;background:#fafafa}
.cookie-btn.haupt{border-color:transparent;background:var(--gold-mat);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.cookie-btn.haupt:hover{filter:brightness(1.05)}
.cookie-banner-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.cookie-recht-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.cookie-recht-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);font-size:12.5px;text-decoration:underline;text-underline-offset:4px}
.cookie-recht-links a:hover{color:var(--text)}
.cookie-dialog>.cookie-recht-links{margin-top:-10px}
.cookie-text-btn{min-height:44px;padding:8px 0;border:0;background:none;color:var(--text-2);font:600 13px var(--font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cookie-text-btn:hover{color:var(--text)}
.cookie-oeffner{position:fixed;z-index:90;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;place-items:center;width:50px;height:50px;padding:0;border:1px solid var(--linie);border-radius:50%;background:#fff;color:#a88100;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);cursor:pointer}
.cookie-oeffner>svg{width:24px;height:24px}
.cookie-tooltip{position:absolute;right:calc(100% + 10px);padding:6px 10px;border-radius:8px;background:var(--text);color:#fff;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
.cookie-oeffner:hover .cookie-tooltip,.cookie-oeffner:focus-visible .cookie-tooltip{opacity:1;visibility:visible}
.cookie-dialog{width:540px;max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:auto;overflow-y:auto;overscroll-behavior:contain;font:inherit;font-size:16px}
.cookie-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}
.cookie-dialog[open]{animation:cookie-ankommen .2s ease-out both}
.cookie-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cookie-schliessen{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:10px;border:1px solid var(--linie);border-radius:50%;background:#fff;color:var(--text-2);cursor:pointer}
.cookie-schliessen svg{width:22px;height:22px}
.cookie-schliessen:hover{color:var(--text);background:#fafafa}
.cookie-dialog h2{max-width:15ch}
.cookie-dialog h2:focus{outline:none}
.cookie-kategorien{margin:22px 0;border-top:1px solid var(--linie)}
.cookie-kategorie{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--linie)}
.cookie-kategorie h3{margin:0 0 4px;font-size:15px;line-height:1.4;font-weight:800}
.cookie-kategorie p{margin:0;font-size:13px;line-height:1.55;color:var(--text-2)}
.cookie-immer{flex:none;font-size:12px;font-weight:700;white-space:nowrap;color:#a88100}
.cookie-switch{position:relative;display:flex;align-items:center;flex:none;width:48px;height:44px;padding:0 4px;border:0;background:none;cursor:pointer}
.cookie-switch::before{content:"";position:absolute;inset:10px 0;border-radius:999px;background:#e4e4e7;transition:background .2s}
.cookie-switch>span{position:relative;display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.cookie-switch[aria-checked="true"]::before{background:#c8a20c}
.cookie-switch[aria-checked="true"]>span{transform:translateX(22px)}
.cookie-speichern{width:100%}
.cookie-dialog-alternativen{margin-top:10px}
.cookie-ui button:focus-visible,.cookie-ui a:focus-visible{outline:2px solid #c8a20c;outline-offset:3px}
@keyframes cookie-ankommen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:540px){
  .cookie-banner{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:20px}
  .cookie-banner h2,.cookie-dialog h2{font-size:24px}
  .cookie-dialog{padding:20px}
  .cookie-oeffner{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  .cookie-kategorie{gap:12px}
  .cookie-btn{font-size:13px;padding-inline:10px}
}
@media (max-width:350px){.cookie-aktionen{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cookie-ui *{animation:none!important;transition:none!important}}

/* Rechtstexte (Impressum, Datenschutz) */
.recht-titel{overflow-wrap:anywhere;hyphens:manual}
.abschnitt.recht{padding-top:56px}
.recht-in{display:grid;gap:40px}
@media (min-width:960px){.abschnitt.recht{padding-top:80px}.recht-in{grid-template-columns:250px minmax(0,760px);gap:72px}.recht-seitenleiste{position:sticky;top:32px;align-self:start}}
.recht-label{display:block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.recht-nav ol{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--linie)}
.recht-nav li{border-bottom:1px solid var(--linie)}
.recht-nav a{display:block;padding:12px 0;color:var(--text-2);font-size:14px;line-height:1.5;text-decoration:none;overflow-wrap:anywhere;transition:color .15s}
.recht-nav a:hover{color:var(--text)}
.recht-cookie{display:flex;align-items:center;justify-content:center;width:100%;max-width:280px;min-height:48px;padding:10px 18px;border:1.5px solid #dcdce0;border-radius:999px;background:#fff;color:var(--text);font:700 14px var(--font);cursor:pointer;transition:border-color .15s,background .15s}
.recht-cookie:hover{border-color:#c8a20c;background:#fffbea}
.recht-querverweis{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--text-2);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.recht-querverweis:hover{color:var(--text)}
.recht-text{min-width:0;color:var(--text-2);font-size:16px;line-height:1.75;overflow-wrap:anywhere;hyphens:auto}
.recht-text h2,.recht-text h3,.recht-text h4,.recht-text h5{color:var(--text);font-weight:800;letter-spacing:-.015em;line-height:1.3;text-wrap:pretty}
.recht-text h2{margin:48px 0 18px;padding-top:32px;border-top:1px solid var(--linie);font-size:clamp(22px,2.4vw,28px)}
.recht-text>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.recht-text h3{margin:30px 0 12px;font-size:19px}
.recht-text h4{margin:24px 0 10px;font-size:17px}
.recht-text h5{margin:20px 0 8px;font-size:16px}
.recht-text p{margin:0 0 16px}
.recht-text ul{margin:14px 0 22px;padding-left:22px}
.recht-text li{margin-bottom:10px;padding-left:4px}
.recht-text li::marker{color:#c8a20c}
.recht-text a{color:var(--text);text-decoration:underline;text-decoration-color:#c8a20c;text-underline-offset:4px}
.recht-text a:hover{color:#a88100}
.recht a:focus-visible,.recht-cookie:focus-visible{outline:2px solid #c8a20c;outline-offset:3px}

/* Menü-Knopf am Handy (Über mich, Fallstudien, Ressourcen) */
.kopf-menue{display:none}
@media (max-width:699px){
  .kopf .w{position:relative}
  .kopf-menue{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 13px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font:700 14px var(--font);cursor:pointer}
  .kopf-menue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .kopf-nav{display:none}
  .kopf.offen .kopf-nav{position:absolute;top:calc(100% + 12px);left:16px;right:16px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:#0c0c0e;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .kopf.offen .kopf-nav a:not(.btn){padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;text-decoration:none}
  .kopf.offen .kopf-nav a[aria-current]{color:#e8c12d}
  .kopf.offen .kopf-nav .btn{display:inline-flex;margin-top:18px;min-height:52px}
}

/* Ressourcen: Übersicht wie bei Baulig (ein großer Artikel, darunter alle weiteren) */
.seitenkopf .ueber a{color:inherit;text-decoration:none}
.seitenkopf .ueber a:hover{color:#fff}
.abschnitt.ressourcen{padding-top:64px}
.r-gross{display:grid;gap:26px;align-items:center;color:inherit;text-decoration:none}
@media (max-width:959px){.r-gross .r-bild{order:-1}}
@media (min-width:960px){.abschnitt.ressourcen{padding-top:88px}.r-gross{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px}}
.r-gross h2{margin:10px 0 14px;font-size:clamp(26px,3.2vw,38px);line-height:1.15;font-weight:800;letter-spacing:-.025em}
.r-gross p{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--text-2)}
.r-bild{display:block;overflow:hidden;border-radius:18px;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.r-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
@media (hover:hover){a:hover .r-bild img{transform:scale(1.03)}}
.r-nr{display:block;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a88100}
.r-raster{display:grid;gap:40px;margin-top:64px;padding-top:56px;border-top:1px solid var(--linie)}
@media (min-width:700px){.r-raster{grid-template-columns:1fr 1fr;gap:48px 32px}}
.r-karte{display:block;color:inherit;text-decoration:none}
.r-karte .r-nr{margin-top:18px}
.r-karte h3{margin:8px 0;font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.015em}
.r-karte p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-2)}
.artikel-link{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-color:#c8a20c;text-decoration-thickness:2px;text-underline-offset:5px}
.artikel-link::after{content:" →"}

/* Ressourcen: Artikel im Aufbau eines Werbebriefs */
.artikel-kopf .w{max-width:980px;text-align:center}
.artikel-titel{margin:0;font-size:clamp(28px,4.4vw,50px);line-height:1.13;font-weight:800;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.artikel-kopf .lead{margin:22px auto 0;max-width:760px}
.abschnitt.artikel{padding-top:48px}
.artikel-w{max-width:780px}
.botschaft{display:flex;align-items:center;gap:18px;margin-bottom:34px;padding-bottom:28px;border-bottom:1px solid var(--linie)}
.botschaft img{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.botschaft b{display:block;font-size:19px;color:var(--text)}
.botschaft span{font-size:15px;color:var(--text-2)}
.artikel-text{font-size:18px;line-height:1.75;color:#33353b}
.artikel-text p{margin:0 0 20px}
.artikel-text .anrede{font-weight:800;color:var(--text)}
.artikel-text .kreuze{margin:6px 0 24px}
.artikel-text .kreuze li{font-size:17.5px}
.artikel-text .konsequenz{margin:0 0 20px;font-size:18px;font-weight:700;color:var(--text)}
.artikel-text h2{margin:52px 0 18px;font-size:clamp(24px,3vw,32px);line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.artikel-nr{display:block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a88100}
.artikel-loesung{margin:52px 0;padding:30px 28px 10px;border-radius:22px;background:var(--grau)}
.artikel-loesung h2{margin-top:0}
.artikel-zahlen{grid-template-columns:1fr 1fr!important;margin:8px 0 22px}
.artikel-cta{margin:56px 0 36px;padding:38px 28px;border-radius:24px;background:#000;color:#fff;text-align:center}
.artikel-cta h2{margin:0 0 14px;color:#fff;font-size:clamp(22px,2.6vw,28px)}
.artikel-cta p{margin:0 auto 24px;max-width:560px;color:rgba(255,255,255,.78);font-size:17px}
.gruss{color:var(--text-2)}
.gruss b{color:var(--text)}
@media (max-width:699px){.artikel-text{font-size:17px}.artikel-loesung{padding:24px 20px 6px}.artikel-cta{padding:30px 20px}}

/* Hero-Untertitel: zweite Zeile ab Desktop in einem Stück */
@media (min-width:960px){.hero .sub{max-width:none}.sub-zeile{white-space:nowrap}}

/* Hero am Desktop größer und lesbarer (Vergleich mit Jasmin Huber, 28.10.2026): Größen nach Breite statt nach Bildschirmhöhe, Hero und Kopfzeile breiter */
@media (min-width:960px){
  .kopf .w,.hero .w{max-width:1360px}
  .hero{padding:clamp(110px,12vh,140px) 0 48px}
  .hero h1{font-size:clamp(40px,3.9vw,66px)}
  .hero .sub{margin-top:18px;font-size:clamp(17px,1.4vw,22px)}
  .hero-grid{grid-template-columns:auto minmax(0,600px);gap:clamp(40px,4vw,72px);margin-top:clamp(32px,3vw,52px)}
  .video{width:min(720px,46vw)}
  .haken{gap:18px}
  .haken li{font-size:clamp(16px,1.25vw,20px);line-height:1.5}
  .hero-rechts{gap:30px}
  .hero-rechts .btn{min-height:60px}
  .vertrauen{margin-top:48px;padding-top:28px}
}

/* Hero-Überschrift als These (28.10.2026): langer Satz, darf umbrechen, Zeilen gleichmäßig */
.hero h1.h1-these{text-wrap:balance;font-size:clamp(23px,6.6vw,30px);line-height:1.15}
.hero h1.h1-these b.gold{white-space:normal}
@media (min-width:700px){.hero h1.h1-these{font-size:clamp(30px,4.2vw,44px);line-height:1.1}}
@media (min-width:960px){.hero .hero-kopf{max-width:1240px}.hero h1.h1-these{font-size:clamp(36px,3.4vw,56px)}}

/* Video-Fenster vor dem Formular: öffnet sich beim Klick auf „Erstgespräch sichern“, Video läuft mit Ton */
.vf{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.vf[hidden]{display:none}
.vf-karte{position:relative;width:min(960px,100%);max-height:100%;overflow:auto;padding:24px 20px 20px;border-radius:22px;background:#fff;color:var(--text)}
.vf-titel{margin:0 48px 16px 0;font-size:21px;line-height:1.25;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.vf-video{display:block;width:100%;aspect-ratio:16/9;margin:0 0 18px;border-radius:14px;background:#0b0b0d;object-fit:cover}
.vf .vf-los{width:100%;max-width:none;margin-top:0}
.vf-dauer{margin:12px 0 0;font-size:13.5px;line-height:1.5;text-align:center;color:var(--text-3)}
.vf-zu{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#f1f1f3;font:400 26px/1 var(--font);color:var(--text);cursor:pointer}
html.vf-offen{overflow:hidden}
@media (min-width:700px){.vf-karte{padding:30px 30px 26px}.vf-titel{font-size:24px}}

/* Formular: Pflichtfelder und Versand */
.feld input.fehlt{border-color:#d1453b;box-shadow:0 0 0 3px rgba(209,69,59,.12)}
.danke.fehler{background:#fdf2f2;color:#991b1b}
.formular.gesendet .feld,.formular.gesendet .einwilligung,.formular.gesendet .btn,.formular.gesendet .zeile{display:none}
.formular.gesendet .danke{margin-top:6px;font-size:16px;padding:16px 18px}
.btn[disabled]{opacity:.7;cursor:wait}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}