/* ==========================================================================
   MediaHelper – Redesign 2026
   Farbwelt direkt aus dem Logo extrahiert:
   Squircle-Gradient  #4DB3F8 (Sky)  ->  #7581FE (Indigo)
   Sparkle-Gold       #F5CE7D
   Wortmarke-Ink      #404040 / Zauberstab #34343F
   ========================================================================== */

:root{
  /* Brand */
  --sky:        #4DB3F8;
  --sky-deep:   #34A0F2;
  --blue:       #5BA7F9;
  --indigo:     #7581FE;
  --indigo-deep:#5C63F0;
  --gold:       #F5CE7D;
  --gold-deep:  #E0AF4F;

  --grad:        linear-gradient(135deg, var(--sky) 0%, var(--indigo) 100%);
  --grad-soft:   linear-gradient(135deg, #E8F5FE 0%, #EDEEFE 100%);
  --grad-text:   linear-gradient(100deg, var(--sky-deep) 0%, var(--indigo) 70%);

  /* Ink & Flächen */
  --ink:      #23232C;
  --ink-2:    #404040;
  --ink-3:    #6A6A78;
  --ink-4:    #9A9AA8;
  --line:     #E7E8F0;
  --line-2:   #F1F2F8;
  --bg:       #FFFFFF;
  --bg-tint:  #F7F9FC;
  --dark:     #1B1B24;
  --dark-2:   #262632;

  /* Form */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow-s: 0 2px 8px rgba(35,35,44,.05);
  --shadow-m: 0 12px 32px -8px rgba(35,35,44,.12), 0 2px 8px rgba(35,35,44,.04);
  --shadow-l: 0 40px 80px -32px rgba(92,99,240,.35), 0 8px 24px -8px rgba(35,35,44,.10);

  --shell: 1180px;
  --pad:   clamp(20px, 5vw, 40px);
  --sec-y: clamp(72px, 10vw, 132px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px; }
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ color:var(--ink); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; border-radius:6px; }

/* ---------- Icons ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:24px; height:24px; flex:none; }
.ico-play{ width:13px; height:13px; color:var(--indigo); }
.ico-tick{ width:16px; height:16px; flex:none; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-y:13px; --btn-x:24px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-y) var(--btn-x);
  border:0; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.btn-sm{ --btn-y:10px; --btn-x:18px; font-size:14px; }
.btn-lg{ --btn-y:16px; --btn-x:32px; font-size:16px; }
.btn-block{ width:100%; }

.btn-primary{
  color:#fff;
  background:var(--grad);
  background-size:160% 160%;
  box-shadow:0 10px 24px -10px rgba(92,99,240,.65), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background-position:100% 0;
  box-shadow:0 18px 34px -12px rgba(92,99,240,.7), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-ghost{
  color:var(--ink);
  background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line), var(--shadow-s);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px #D6D9E8, var(--shadow-m); }
.btn-ghost .ico-play{ color:var(--indigo); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.site-header.stuck{ border-bottom-color:var(--line); box-shadow:0 4px 20px -12px rgba(35,35,44,.18); }
.header-inner{ display:flex; align-items:center; gap:24px; min-height:76px; }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand-mark{ width:42px; height:42px; border-radius:12px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.brand-text small{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav{ display:flex; align-items:center; gap:6px; }
.nav > a:not(.btn){
  padding:9px 14px; border-radius:999px;
  font-size:15px; font-weight:600; color:var(--ink-3);
  transition:color .2s, background-color .2s;
}
.nav > a:not(.btn):hover{ color:var(--ink); background:var(--line-2); }
.nav-cta{ margin-left:10px; }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; margin:3.5px auto; border-radius:2px; background:var(--ink); transition:transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:1100px){
  .burger{ display:block; }
  .nav{
    position:absolute; left:var(--pad); right:var(--pad); top:calc(100% + 10px);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px; border-radius:var(--r-lg);
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-m);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s, transform .22s, visibility .22s;
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav > a:not(.btn){ padding:13px 16px; font-size:16px; }
  .nav-cta{ margin:8px 0 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(48px,7vw,88px) clamp(72px,9vw,120px); overflow:hidden; }

.mesh{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; }
.blob-a{ width:52vw; height:52vw; max-width:640px; max-height:640px; top:-18%; right:-12%;
         background:radial-gradient(circle at 30% 30%, #9DD8FD, transparent 68%); }
.blob-b{ width:46vw; height:46vw; max-width:560px; max-height:560px; top:22%; left:-16%;
         background:radial-gradient(circle at 60% 40%, #B9BEFF, transparent 68%); }
.blob-c{ width:26vw; height:26vw; max-width:320px; max-height:320px; bottom:-6%; right:26%;
         background:radial-gradient(circle at 50% 50%, #FBE6BE, transparent 65%); opacity:.5; }

.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero-copy{ min-width:0; }
.hero-copy > *{ max-width:100%; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 12px; margin-bottom:26px;
  border-radius:999px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-s);
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-2);
  text-transform:uppercase;
}
.eyebrow .dot{
  width:8px; height:8px; border-radius:50%; background:var(--grad);
  box-shadow:0 0 0 4px rgba(117,129,254,.18);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(117,129,254,.16); } 50%{ box-shadow:0 0 0 7px rgba(117,129,254,.05); } }

h1{ font-size:clamp(2.15rem, 6.4vw, 4.4rem); letter-spacing:-.035em; }
.grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

.lede{ max-width:31em; margin-top:24px; font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--ink-3); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px);
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-3);
}
.hero-facts b{
  display:block; font-size:1.5rem; font-weight:800; letter-spacing:-.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Hero-Visual: Squircle-Bühne im Logo-Gradient */
.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual .glow{
  position:absolute; inset:6% 8% 4%;
  border-radius:56px;
  background:var(--grad);
  box-shadow:var(--shadow-l);
  transform:rotate(-3deg);
}
.hero-visual .glow::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.4), transparent 55%);
}
/* Das GIF bringt sein eigenes Handy mit – kein zweiter Rahmen.
   Der Container schneidet nur den dunkelroten Rand des Screencasts weg
   (je 28 von 432 px) und rundet exakt auf den Radius des Geräts im GIF. */
.device{
  position:relative; margin:0; width:min(300px, 74%);
  border-radius:16% / 7.8%;
  overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(20,20,30,.55);
}
.device img{ width:114.9%; max-width:none; margin-left:-7.45%; }

/* Hero-Foto mit welliger, „ausgeschnittener“ Blob-Kante (kein Rechteck, keine Border) */
.hero-photo{
  position:relative; margin:0;
  width:100%; max-width:680px;
  aspect-ratio:1448 / 1086;
  filter:drop-shadow(0 30px 52px rgba(20,20,30,.30));
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  clip-path:url(#heroBlob);
}

.float-card{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:11px;
  padding:12px 16px; border-radius:var(--r);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-m), inset 0 0 0 1px rgba(255,255,255,.7);
  animation:bob 5s ease-in-out infinite;
}
.float-card b{ display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.3; }
.float-card small{ font-size:12px; color:var(--ink-4); }
.fc-icon{ display:grid; place-items:center; color:var(--indigo-deep); }
.fc-icon .ico{ width:22px; height:22px; }
.fc-gold{ color:var(--gold-deep); }
.float-card-1{ left:-4%; top:16%; }
.float-card-2{ right:-2%; bottom:20%; animation-delay:-2.5s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .lede{ margin-inline:auto; }
  .hero-actions,.hero-facts{ justify-content:center; }
  .hero-facts{ width:100%; }
  .hero-visual{ margin-top:16px; }
  .float-card-1{ left:0; }
  .float-card-2{ right:0; }
}
@media (max-width:560px){
  .device{ width:min(268px, 82%); }
  .float-card{ padding:9px 12px; gap:9px; }
  .float-card b{ font-size:13px; }
  .float-card small{ font-size:11px; }
  .float-card .fc-icon .ico{ width:18px; height:18px; }
  .float-card-1{ left:0; top:8%; }
  .float-card-2{ right:0; bottom:12%; }
}

/* ==========================================================================
   Section-Köpfe
   ========================================================================== */
.sec-head{ max-width:44rem; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  margin-bottom:14px;
  font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head h2{ font-size:clamp(1.9rem,3.9vw,2.85rem); }
.sec-head .muted{ color:var(--ink-4); }
.period{ color:var(--indigo); }
.sec-lede{ margin-top:20px; font-size:clamp(1rem,1.5vw,1.13rem); color:var(--ink-3); }
.br-m{ display:none; }
@media (min-width:700px){ .br-m{ display:inline; } }

/* ==========================================================================
   Problem
   ========================================================================== */
.problem{ background:var(--bg-tint); border-block:1px solid var(--line-2); }

.pain-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;
  margin-top:clamp(40px,5vw,60px);
}
.pain{
  padding:34px 30px 32px; border-radius:var(--r-lg);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line), var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pain:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px transparent, var(--shadow-m); }
.pain-icon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px;
  border-radius:16px; color:var(--indigo-deep);
  background:var(--grad-soft);
}
.pain h3{ font-size:1.22rem; margin-bottom:10px; }
.pain p{ font-size:15.5px; color:var(--ink-3); }

.solve{
  margin-top:clamp(40px,5vw,56px); text-align:center;
  font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:600; color:var(--ink-3);
}
.solve b{
  font-weight:800;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps-layout{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,80px);
  align-items:start; margin-top:clamp(44px,6vw,72px);
}

.steps-list{ display:flex; flex-direction:column; gap:4px; }
.step{ position:relative; display:flex; gap:22px; padding:20px 0 26px; }
.step:not(:last-child)::before{
  content:""; position:absolute; left:22px; top:62px; bottom:-4px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--line), transparent);
}
.step-num{
  position:relative; z-index:1; flex:0 0 46px;
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:15px; background:var(--grad); color:#fff;
  font-size:16px; font-weight:800;
  box-shadow:0 8px 18px -8px rgba(92,99,240,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.step h3{ font-size:1.2rem; margin-bottom:8px; }
.step p{ font-size:15.5px; color:var(--ink-3); max-width:34em; }
.opt{
  display:inline-block; margin-left:8px; padding:3px 9px; vertical-align:2px;
  border-radius:999px; background:#FDF3DF; color:#8A6A22;
  font-size:11px; font-weight:700; font-style:normal; letter-spacing:.04em; text-transform:uppercase;
}

.steps-media{ position:sticky; top:104px; text-align:center; }
.media-frame{
  position:relative; display:inline-flex; justify-content:center; padding:34px;
  border-radius:var(--r-xl);
  background:transparent;
}
/* Weicher, blurriger Glow statt der blauen Farbfläche */
.media-frame::before{
  content:""; position:absolute; inset:8%; z-index:0;
  background:radial-gradient(58% 58% at 50% 42%, rgba(124,134,251,.28), transparent 70%);
  filter:blur(42px);
  pointer-events:none;
}
/* Screen-Recording bekommt einen dünnen schwarzen Handy-Rahmen */
.media-frame .device-sm{
  position:relative; z-index:1;
  width:240px; max-width:100%; flex:none;
  background:#0b0b0f;
  padding:6px;
  border-radius:18% / 8.6%;
  box-shadow:0 22px 44px -18px rgba(20,20,30,.55);
}
.device-sm .step-video{
  display:block; width:100%;
  border-radius:14% / 6.6%;
}
.media-cap{ margin-top:18px; font-size:14px; color:var(--ink-4); }
.media-cap b{ color:var(--ink-2); }

@media (max-width:900px){
  .steps-layout{ grid-template-columns:1fr; }
  .steps-media{ position:static; order:-1; }
}

/* ==========================================================================
   Features
   ========================================================================== */
.features{ background:var(--bg-tint); border-block:1px solid var(--line-2); }
.feat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:clamp(40px,5vw,60px);
}
.feat{
  padding:30px 28px; border-radius:var(--r-lg);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line), var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease;
}
.feat:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px transparent, var(--shadow-m); }
.feat h3{ font-size:1.12rem; margin-bottom:10px; }
.feat p{ font-size:15px; color:var(--ink-3); }
.feat-icon{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px;
  border-radius:14px; color:var(--indigo-deep); background:var(--grad-soft);
}
.feat-icon .ico{ width:22px; height:22px; }
.feat-wide{
  grid-column:span 2; grid-row:span 2;
  display:flex; flex-direction:column;
  padding:38px 34px;
  color:#fff; background:var(--grad);
  box-shadow:var(--shadow-l);
}
.feat-wide h3{ color:#fff; font-size:1.5rem; }
.feat-wide p{ color:rgba(255,255,255,.9); font-size:16px; }
.feat-wide:hover{ transform:translateY(-5px); box-shadow:var(--shadow-l); }
.ticks{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:11px; }
.ticks li{
  display:flex; align-items:center; gap:11px;
  font-size:15px; font-weight:600; color:#fff;
}
.ticks li::before{
  content:"✓"; flex:0 0 22px;
  display:grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:rgba(255,255,255,.22);
  font-size:11px; font-weight:800;
}

@media (max-width:1040px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-wide{ grid-column:span 2; grid-row:auto; }
}
@media (max-width:600px){
  .feat-grid{ grid-template-columns:1fr; }
  .feat-wide{ grid-column:auto; }
}

/* ==========================================================================
   Channels
   ========================================================================== */
.channels-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:center;
}
.channels h2{ font-size:clamp(1.9rem,3.9vw,2.85rem); }
.channels .btn{ margin-top:32px; }

.chan-list{ display:flex; flex-direction:column; gap:12px; }
.chan-list li{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-radius:var(--r);
  background:#fff; box-shadow:inset 0 0 0 1px var(--line), var(--shadow-s);
  font-size:16px; font-weight:600; color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease;
}
.chan-list li:hover{ transform:translateX(5px); box-shadow:inset 0 0 0 1px #D6D9E8, var(--shadow-m); }
.chan-ico{
  display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:11px; color:#fff;
}
.chan-ico .ico{ width:20px; height:20px; }
.chan-ico.ig{ background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7); }
.chan-ico.fb{ background:#1877F2; }
.chan-ico.web{ background:var(--ink-2); }
.chan-ico.all{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.chk{ width:18px; height:18px; margin-left:auto; color:#12A150; flex:none; }
.chan-all{ background:var(--grad-soft) !important; box-shadow:inset 0 0 0 1px #DDE3FB !important; }

@media (max-width:820px){ .channels-inner{ grid-template-columns:1fr; } }

/* ==========================================================================
   CTA + Formular
   ========================================================================== */
.cta{
  position:relative; overflow:hidden;
  padding-block:var(--sec-y);
  background:var(--dark);
  color:rgba(255,255,255,.78);
}
.cta::before{
  content:""; position:absolute; width:70vw; height:70vw; max-width:820px; max-height:820px;
  top:-30%; left:-14%; border-radius:50%; filter:blur(100px); opacity:.42;
  background:radial-gradient(circle at 40% 40%, var(--indigo), transparent 66%);
}
.cta::after{
  content:""; position:absolute; width:44vw; height:44vw; max-width:520px; max-height:520px;
  bottom:-28%; right:-8%; border-radius:50%; filter:blur(100px); opacity:.30;
  background:radial-gradient(circle at 50% 50%, var(--sky), transparent 66%);
}
.cta-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:center;
}
.cta h2{ color:#fff; font-size:clamp(1.95rem,4vw,2.9rem); }
.cta-copy p{ margin-top:22px; font-size:clamp(1rem,1.5vw,1.13rem); max-width:30em; }
.cta-facts{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:32px; font-size:15px; font-weight:600; color:#fff; }
.cta-facts li{ display:flex; align-items:center; gap:9px; opacity:.92; }
.cta-facts .ico-tick{ color:var(--gold); }

.cta-form{
  padding:clamp(28px,4vw,40px); border-radius:var(--r-xl);
  background:#fff; color:var(--ink-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.cta-form h3{ font-size:1.4rem; margin-bottom:24px; }
.cta-form label{ display:block; margin-bottom:16px; }
.cta-form label span{
  display:block; margin-bottom:7px;
  font-size:13px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}
.cta-form input{
  width:100%; padding:14px 17px;
  font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--bg-tint); border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.cta-form input::placeholder{ color:var(--ink-4); }
.cta-form input:focus{
  outline:none; background:#fff; border-color:var(--indigo);
  box-shadow:0 0 0 4px rgba(117,129,254,.14);
}
.cta-form .btn{ margin-top:10px; }
.form-note{ margin-top:16px; font-size:12.5px; color:var(--ink-4); text-align:center; }
.form-note a{ color:var(--indigo-deep); text-decoration:underline; text-underline-offset:2px; }

@media (max-width:860px){ .cta-inner{ grid-template-columns:1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ padding-top:clamp(56px,7vw,84px); background:var(--dark-2); color:rgba(255,255,255,.62); font-size:15px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr 1fr; gap:34px;
  padding-bottom:clamp(40px,5vw,60px);
}
.footer-brand img{
  width:230px; height:auto; margin-bottom:20px;
  padding:14px 18px; border-radius:var(--r); background:#fff;
}
.footer-brand p{ max-width:24em; }
.footer-col h4{ margin-bottom:16px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.footer-col a{ display:block; padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-col p{ margin-bottom:14px; }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between; align-items:center;
  padding-block:26px; border-top:1px solid rgba(255,255,255,.10);
  font-size:13.5px; color:rgba(255,255,255,.45);
}
.footer-tag{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ justify-content:flex-start; }
}

/* ============ FAQ ============ */
.faq-list{ max-width:760px; margin:30px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:0 20px; box-shadow:var(--shadow-s); }
.faq-item summary{ list-style:none; cursor:pointer; padding:18px 0; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:24px; line-height:1; color:var(--indigo); transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:-2px 0 20px; color:var(--ink-3); line-height:1.65; }

/* ==========================================================================
   SEO-Unterseiten (Pillar + Cluster-Artikel)
   ========================================================================== */
.subhero{ padding-block:clamp(52px,8vw,104px) clamp(24px,4vw,48px); background:var(--grad-soft); text-align:center; }
.subhero h1{ max-width:22ch; margin:12px auto 0; font-size:clamp(30px,5vw,50px); }
.subhero .lede{ max-width:60ch; margin:18px auto 0; font-size:clamp(17px,2.2vw,20px); color:var(--ink-3); }
.subhero .subhero-cta{ margin-top:30px; }

.article{ padding-block:clamp(40px,6vw,72px); }
.prose{ max-width:760px; margin-inline:auto; font-size:17px; color:var(--ink-2); }
.prose > h2{ margin-top:1.8em; margin-bottom:.35em; font-size:clamp(22px,3vw,30px); color:var(--ink); }
.prose > h3{ margin-top:1.3em; margin-bottom:.3em; font-size:19px; color:var(--ink); }
.prose p{ margin:.7em 0; line-height:1.72; }
.prose ul{ margin:.7em 0; display:flex; flex-direction:column; gap:9px; }
.prose ul li{ position:relative; padding-left:28px; }
.prose ul li::before{ content:"✓"; position:absolute; left:2px; top:0; color:var(--indigo); font-weight:800; }
.prose ol{ margin:.7em 0; padding-left:22px; list-style:decimal; }
.prose ol li{ margin:7px 0; padding-left:4px; }
.prose a{ color:var(--indigo-deep); text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--ink); }

.related{ max-width:760px; margin:46px auto 0; padding:24px 26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-tint); }
.related h2{ font-size:18px; margin:0 0 12px; }
.related ul{ display:flex; flex-direction:column; gap:9px; }
.related a{ color:var(--indigo-deep); text-decoration:none; font-weight:600; }
.related a:hover{ text-decoration:underline; }

/* ==========================================================================
   Ratgeber-Dropdown (Navigation) + Zurück-Button (Unterseiten)
   ========================================================================== */
.nav-dd{ position:relative; }
.nav-dd > summary{ list-style:none; cursor:pointer; padding:9px 14px; border-radius:999px;
  font-size:15px; font-weight:600; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px;
  transition:color .2s, background-color .2s; }
.nav-dd > summary::-webkit-details-marker{ display:none; }
.nav-dd > summary::after{ content:""; width:8px; height:8px; margin-left:1px; position:relative; top:-2px;
  border-right:2.2px solid currentColor; border-bottom:2.2px solid currentColor; border-radius:1px;
  transform:rotate(45deg); opacity:.65; transition:transform .2s ease, top .2s ease; }
.nav-dd > summary:hover{ color:var(--ink); background:var(--line-2); }
.nav-dd[open] > summary{ color:var(--ink); }
.nav-dd[open] > summary::after{ transform:rotate(-135deg); top:1px; opacity:.85; }
.nav-dd-menu{ display:flex; flex-direction:column; }
.nav-dd-menu a{ color:var(--ink-3); }
@media (min-width:1101px){
  .nav-dd-menu{ position:absolute; top:calc(100% + 10px); left:0; min-width:258px;
    background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-m);
    padding:8px; z-index:120; }
  .nav-dd-menu a{ padding:9px 12px; border-radius:9px; font-size:14.5px; white-space:nowrap; }
  .nav-dd-menu a:hover{ background:var(--line-2); color:var(--ink); }
}
@media (max-width:1100px){
  .nav-dd{ width:100%; }
  .nav-dd > summary{ padding:13px 16px; font-size:16px; }
  .nav-dd-menu{ padding:2px 0 6px 12px; }
  .nav-dd-menu a{ padding:10px 16px; font-size:15px; }
  .nav-dd-menu a:hover{ color:var(--ink); }
}

.subhero-back{ text-align:left; margin-bottom:18px; }
.back-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--ink-3); background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line), var(--shadow-s);
  transition:transform .2s ease, color .2s, box-shadow .25s; }
.back-btn:hover{ color:var(--ink); transform:translateX(-2px); box-shadow:inset 0 0 0 1.5px #D6D9E8, var(--shadow-m); }

/* Logo-Lockup im Header (ersetzt Icon + getippten Schriftzug) */
.brand-logo{ height:60px; width:auto; display:block; }
@media (max-width:560px){ .brand-logo{ height:48px; } }

/* Kontaktformular: Honeypot (unsichtbar) + Statusmeldung */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; }
.form-status{ margin-top:12px; font-size:14px; min-height:1.1em; font-weight:600; }

/* Telefon: Länder-Vorwahl (Flagge + Code) + Nummer */
.tel-row{ display:flex; gap:8px; align-items:stretch; }
.tel-cc{
  flex:0 0 auto; width:auto; padding:14px 12px;
  font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--bg-tint); border:1.5px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.tel-cc:focus{ outline:none; background:#fff; border-color:var(--indigo); box-shadow:0 0 0 4px rgba(117,129,254,.14); }
.tel-row input{ flex:1 1 auto; min-width:0; }