/* =========================================================================
   PILEOT — Website v4
   Eigenständiges Stylesheet für die öffentliche Startseite.

   WARUM EIGENE DATEI, NICHT design.css:
   `design.css` wird von portal.html, 404.html und website/dashboard/ genutzt.
   Eine Änderung dort würde diese Seiten mitverändern, ohne dass sie geprüft
   wurden. Diese Datei betrifft ausschließlich index.html.

   AUFBAU: Tokens → Basis → Layout → Komponenten → Sektionen → Motion →
   Responsive. Alle Farben, Abstände und Radien laufen über Tokens.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* Flächen */
  --bg:            #EFEFF1;   /* Seitengrund, auf dem die Container liegen */
  --surface:       #FFFFFF;   /* Container */
  --surface-soft:  #F6F6F7;   /* eingelassene Karten */

  /* Pastelltöne der Modulkarten */
  --tint-mint:   #E9F2E7;
  --tint-lilac:  #ECEAF7;
  --tint-rose:   #F8EDF2;
  --tint-sky:    #E7EFF7;

  /* Text */
  --ink:      #0E0E11;
  --ink-2:    #5C5C66;
  --ink-3:    #8E8E99;

  /* Linien */
  --line:      rgba(14,14,17,.10);
  --line-soft: rgba(14,14,17,.06);

  /* Aktion */
  --solid:      #111114;
  --solid-ink:  #FFFFFF;

  /* Irisierende Signaturfarben (aus dem Logo abgeleitet) */
  --iris-1: #9FE7DF;
  --iris-2: #A8C3F5;
  --iris-3: #C9B4F0;
  --iris-4: #F1B9DC;

  /* Radien */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* Rhythmus */
  --gap:   clamp(16px, 2.2vw, 28px);
  --pad-y: clamp(64px, 8vw, 128px);
  --shell: 1200px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- BASIS */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0;
}
h1{ font-size:clamp(38px, 5.4vw, 66px); }
h2{ font-size:clamp(30px, 3.9vw, 48px); }
h3{ font-size:clamp(19px, 1.6vw, 22px); letter-spacing:-.01em; line-height:1.25; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Sichtbarer Fokus — nie entfernen, nur gestalten. */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

/* Für Screenreader, optisch versteckt */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Sprungmarke für Tastaturnutzer */
.skip{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--solid); color:var(--solid-ink);
  padding:11px 18px; border-radius:var(--r-pill);
  font-size:13px; transition:top .2s var(--ease);
}
.skip:focus{ top:16px; }

/* ---------------------------------------------------------------- LAYOUT */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 40px);
}

/* Weißer Block mit großen Radien, der auf dem grauen Grund liegt. */
.slab{
  background:var(--surface);
  border-radius:var(--r-xl);
  margin:10px clamp(8px, 1.2vw, 16px);
  padding-block:var(--pad-y);
  position:relative;
  overflow:hidden;
}
.slab.tight{ padding-block:clamp(30px, 3.4vw, 46px); }

/* Kleines Label über jeder Überschrift: Mono, Großbuchstaben, mit Icon. */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:18px;
}
.eyebrow svg{ width:14px; height:14px; flex:none; }

.lead{
  font-size:16px; color:var(--ink-2); max-width:52ch; margin-top:20px;
}

/* Zweispaltiger Sektionskopf: links Text, rechts Beiwerk. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

/* ------------------------------------------------------------ KOMPONENTEN */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn .arw{ transition:transform .22s var(--ease); }
.btn:hover .arw{ transform:translate(2px,-2px); }

.btn-solid{ background:var(--solid); color:var(--solid-ink); }
.btn-solid:hover{ background:#26262C; }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-soft); border-color:rgba(14,14,17,.2); }

.btn-sm{ padding:10px 18px; font-size:11px; }

/* ------------------------------------------------------------- NAVIGATION */
.topbar{
  position:sticky; top:0; z-index:100;
  padding:14px clamp(8px, 1.2vw, 16px) 0;
}
.topbar-inner{
  max-width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(12px, 2vw, 20px);
}

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:19px; letter-spacing:-.02em; color:var(--ink);
  flex:none;
}
.brand img{ width:28px; height:28px; object-fit:contain; }

/* Die Navigationslinks sitzen wie in der Referenz in einer eigenen Pille. */
.navpill{
  display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  padding:5px;
}
.navpill a{
  padding:9px 15px; border-radius:var(--r-pill);
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.navpill a:hover{ background:var(--surface-soft); color:var(--ink); }

.nav-right{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-login{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); padding:9px 6px;
}
.nav-login:hover{ color:var(--ink); }

/* Mobile: Button + Schublade */
.burger{
  display:none;
  width:42px; height:42px; flex:none;
  align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); cursor:pointer;
}
.burger span{
  display:block; width:16px; height:1.5px; background:var(--ink);
  position:relative; transition:background .2s var(--ease);
}
.burger span::before, .burger span::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px;
  background:var(--ink); transition:transform .24s var(--ease);
}
.burger span::before{ top:-5px; }
.burger span::after{ top:5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:150;
  background:rgba(239,239,241,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  padding:20px clamp(20px,5vw,32px) 32px;
  opacity:0; visibility:hidden;
  transition:opacity .26s var(--ease), visibility .26s var(--ease);
}
.drawer[data-open="true"]{ opacity:1; visibility:visible; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; }
.drawer-close{
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); cursor:pointer; color:var(--ink);
}
.drawer nav{ display:flex; flex-direction:column; gap:2px; margin-top:36px; }
.drawer nav a{
  font-family:'Space Grotesk',sans-serif;
  font-size:26px; font-weight:500; letter-spacing:-.02em;
  color:var(--ink); padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.drawer-foot .btn{ justify-content:center; }

/* -------------------------------------------------------------------- HERO */
.hero{
  position:relative;
  background:
    radial-gradient(70% 60% at 12% 8%,  rgba(159,231,223,.20), transparent 62%),
    radial-gradient(65% 70% at 92% 42%, rgba(201,180,240,.26), transparent 66%),
    radial-gradient(55% 55% at 70% 96%, rgba(241,185,220,.20), transparent 64%),
    var(--surface);
  border-radius:var(--r-xl);
  margin:10px clamp(8px, 1.2vw, 16px) 0;
  padding-block:clamp(56px, 8vw, 104px) clamp(56px, 8vw, 96px);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
}
.hero h1{ margin-bottom:22px; }
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--iris-2), var(--iris-3) 46%, var(--iris-4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:16.5px; max-width:46ch; color:var(--ink-2); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* Das Glas-P. Schwebt langsam, kippt leicht mit dem Zeiger. */
.hero-art{ position:relative; display:grid; place-items:center; }
.hero-art img{
  width:min(100%, 460px);
  filter:drop-shadow(0 40px 70px rgba(120,100,190,.22));
  animation:float 9s ease-in-out infinite;
  will-change:transform;
}
@keyframes float{
  0%,100%{ transform:translateY(-10px) rotate(-1.2deg); }
  50%    { transform:translateY(10px)  rotate(1.2deg); }
}
/* Weicher Lichtschein hinter dem Objekt */
.hero-art::before{
  content:''; position:absolute; width:74%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(168,195,245,.5), transparent 66%);
  filter:blur(46px);
}

/* Zeile mit den drei Eingangskanälen unter dem Hero */
.channels{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px, 3.6vw, 52px);
  justify-content:center;
}
.channels .ch-label{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); max-width:190px; line-height:1.5;
}
.channels .ch-label b{ color:var(--ink); font-weight:500; }
.ch{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-size:16px;
  color:var(--ink); font-weight:500;
}
.ch svg{ width:19px; height:19px; color:var(--ink-3); flex:none; }

/* ------------------------------------------------------------ HIGHLIGHT */
.metrics{ display:flex; gap:clamp(32px,5vw,60px); margin-top:48px; flex-wrap:wrap; }
.metric b{
  display:block;
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:clamp(30px,3.4vw,40px); letter-spacing:-.03em; color:var(--ink);
  line-height:1;
}
.metric span{
  display:block; margin-top:10px; font-size:13.5px; color:var(--ink-3);
  max-width:20ch; line-height:1.5;
}

/* Nachgebaute Lead-Karte als Produktbeweis (Struktur echt, Werte Beispiel) */
.preview{
  background:var(--surface-soft);
  border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,30px);
}
.preview-note{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px; display:block;
}
.lead-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-md); padding:16px 18px; margin-bottom:10px;
  display:flex; align-items:center; gap:14px;
}
.lead-card:last-child{ margin-bottom:0; }
.lead-ic{
  width:34px; height:34px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; background:var(--surface-soft); color:var(--ink-2);
}
.lead-ic svg{ width:16px; height:16px; }
.lead-main{ min-width:0; flex:1; }
.lead-main b{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:14.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lead-main span{ font-size:12.5px; color:var(--ink-3); }
.tag{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-pill); flex:none;
}
.tag-hoch{ background:#FBE9EC; color:#A6203A; }
.tag-normal{ background:#E9EEFB; color:#2A4C9B; }
.tag-pruefen{ background:#FBF1E3; color:#8A5A16; }

/* ------------------------------------------------------------- MODULKARTEN */
.modules{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }
.module{
  border-radius:var(--r-xl);
  padding:clamp(28px,3.6vw,52px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);
  align-items:center;
}
.module.mint { background:var(--tint-mint); }
.module.lilac{ background:var(--tint-lilac); }
.module.rose { background:var(--tint-rose); }
.module.sky  { background:var(--tint-sky); }
.module p{ margin-top:14px; max-width:44ch; font-size:15px; }
.module-art{
  background:rgba(255,255,255,.66);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px);
  min-height:210px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
}

/* Kleine Zeilen im Karten-Beiwerk */
.row{
  background:var(--surface); border-radius:var(--r-sm);
  padding:11px 14px; display:flex; align-items:center; gap:11px;
  font-size:13.5px; color:var(--ink-2);
}
.row svg{ width:15px; height:15px; color:var(--ink-3); flex:none; }
.row b{ color:var(--ink); font-weight:500; }
.row .mono{
  margin-left:auto;
  font-family:'DM Mono',ui-monospace,monospace; font-size:11px; color:var(--ink-3);
  flex:none;
}
/* Balken für die Analyse-Karte */
.bars{ display:flex; align-items:flex-end; gap:9px; height:104px; padding:0 4px; }
.bars i{
  flex:1; border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, var(--iris-2), var(--iris-3));
  opacity:.85;
}

/* ------------------------------------------------------------------ SETUP */
.steps{ display:flex; flex-direction:column; gap:10px; position:relative; }
.step{
  width:100%; text-align:left; cursor:pointer;
  background:var(--surface-soft); border:1px solid transparent;
  border-radius:var(--r-lg); padding:18px 20px;
  display:flex; align-items:flex-start; gap:15px;
  transition:background .22s var(--ease), border-color .22s var(--ease),
             transform .22s var(--ease);
  font:inherit; color:inherit;
}
.step:hover{ transform:translateX(3px); }
.step[aria-selected="true"]{
  background:var(--surface); border-color:var(--line);
  box-shadow:0 12px 34px -22px rgba(20,16,50,.35);
}
.step-no{
  font-family:'DM Mono',ui-monospace,monospace; font-size:11px;
  color:var(--ink-3); flex:none; padding-top:3px; min-width:22px;
}
.step[aria-selected="true"] .step-no{ color:var(--ink); }
.step-body b{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:16px; color:var(--ink); margin-bottom:5px;
}
.step-body span{ font-size:13.5px; color:var(--ink-2); }

/* --------------------------------------------------------------- KANÄLE */
.orbit{
  position:relative; display:grid; place-items:center;
  padding:clamp(30px,5vw,60px) 0;
}
/* 640 statt 440: Bei 440 px brach "Da anfangen, wo die Anfragen ankommen."
   in vier ungleiche Zeilen um, weil die Überschrift per clamp bis 48 px
   wächst. Die Breite muss zur größten Schriftgröße passen, nicht zur
   kleinsten. */
.orbit-mid{ text-align:center; max-width:640px; position:relative; z-index:2; }
.orbit-nodes{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(10px,1.6vw,16px); margin-top:34px;
}
.node{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-pill); padding:10px 17px;
  font-size:13.5px; color:var(--ink);
}
.node svg{ width:16px; height:16px; color:var(--ink-2); flex:none; }
.node.planned{ background:transparent; border-style:dashed; color:var(--ink-3); }
.node.planned svg{ color:var(--ink-3); }
.node em{
  font-style:normal;
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:2px 7px;
}

/* -------------------------------------------------------------- GRENZEN */
.limits{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.limit{
  background:var(--surface-soft); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);
}
.limit h3{ margin-bottom:10px; }
.limit p{ font-size:14.5px; }

/* ------------------------------------------------------------------- FAQ */
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; gap:16px;
  background:none; border:0; cursor:pointer;
  padding:22px 0; text-align:left;
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:17px; color:var(--ink); letter-spacing:-.01em;
}
.faq-ic{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-2);
  transition:background .22s var(--ease), color .22s var(--ease),
             transform .22s var(--ease), border-color .22s var(--ease);
}
.faq-ic svg{ width:13px; height:13px; }
.faq-q[aria-expanded="true"] .faq-ic{
  background:var(--solid); border-color:var(--solid); color:var(--solid-ink);
  transform:rotate(90deg);
}
.faq-a{
  overflow:hidden; height:0; opacity:0;
  transition:height .3s var(--ease), opacity .24s var(--ease);
}
.faq-a > div{ padding:0 0 24px 44px; font-size:15px; max-width:62ch; }

/* -------------------------------------------------------------- ABSCHLUSS */
.closer{
  border-radius:var(--r-xl);
  margin:10px clamp(8px,1.2vw,16px);
  padding:clamp(64px,8vw,110px) 0;
  text-align:center;
  background:
    radial-gradient(60% 70% at 20% 12%, rgba(159,231,223,.30), transparent 62%),
    radial-gradient(60% 80% at 82% 30%, rgba(201,180,240,.34), transparent 66%),
    radial-gradient(50% 60% at 55% 100%, rgba(241,185,220,.26), transparent 64%),
    var(--surface);
}
.closer h2{ max-width:15ch; margin-inline:auto; }
.closer .lead{ margin-inline:auto; text-align:center; }
.closer-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* -------------------------------------------------------------- KONTAKT */
.contact-card{
  background:var(--surface-soft); border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,44px);
}
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{
  font-family:'DM Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.field input, .field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:13px 15px; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(14,14,17,.07);
}
.field textarea{ resize:vertical; min-height:104px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field .err{ font-size:12.5px; color:#A6203A; min-height:0; }

.form-msg{
  margin-top:14px; padding:13px 16px; border-radius:var(--r-md);
  font-size:14px; display:none;
}
.form-msg[data-kind="ok"]{ display:block; background:#E7F4EC; color:#1C6B3F; }
.form-msg[data-kind="err"]{ display:block; background:#FBE9EC; color:#A6203A; }
.btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }

/* ---------------------------------------------------------------- FOOTER */
footer{
  background:var(--solid); color:rgba(255,255,255,.62);
  border-radius:var(--r-xl);
  margin:10px clamp(8px,1.2vw,16px);
  padding:clamp(48px,6vw,72px) 0 clamp(26px,3vw,34px);
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(26px,4vw,48px);
}
footer .brand{ color:#fff; }
footer p{ font-size:14px; margin-top:16px; max-width:34ch; }
.foot-col h4{
  color:#fff; font-size:12px; font-family:'DM Mono',ui-monospace,monospace;
  font-weight:400; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;
}
/* min-height 44px: verlässliches Touch-Ziel auf dem Telefon. */
.foot-col a{
  display:flex; align-items:center; min-height:44px;
  font-size:14.5px; transition:color .18s var(--ease);
}
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  margin-top:clamp(34px,4.4vw,54px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px;
}

/* ---------------------------------------------------------------- MOTION */
/* Einmaliges Einblenden beim Eintritt in den sichtbaren Bereich. */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
[data-reveal].shown{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-art img{ animation:none; }
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1000px){
  .navpill{ display:none; }
  .nav-right .nav-login, .nav-right .btn{ display:none; }
  .burger{ display:inline-flex; }

  /* Auf schmalen Geräten zuerst die Aussage, dann das Bild. Ein bildschirm-
     füllendes Logo würde die Überschrift unter die Falz drücken. */
  .hero-grid{ grid-template-columns:1fr; gap:clamp(24px, 4vw, 40px); }
  .hero-art{ order:2; }
  /* Gestapelt ist das Logo Begleitung, nicht Hauptdarsteller. Ohne Deckel
     nimmt es auf dem Tablet einen halben Bildschirm ein. */
  .hero-art img{ width:clamp(180px, 30vw, 280px); }
  .hero-art::before{ width:56%; }

  .split{ grid-template-columns:1fr; }
  .module{ grid-template-columns:1fr; }
  .limits{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px){
  .slab, .hero, .closer, footer{ border-radius:var(--r-lg); margin-inline:8px; }
  .field-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .metrics{ gap:26px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta .btn, .closer-cta .btn{ width:100%; }
  .faq-a > div{ padding-left:0; }
  .channels{ justify-content:flex-start; }
}