/* ===== Fonts (aus fonts/fonts.css, url-Pfade auf fonts/ angepasst) ===== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/Archivo-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== Landing (aus css/main.css) ===== */
/* ================================================================
   NEUDECK · Cinematic One-Pager
   Anthrazit-Bühne, Cremeweiß, ein Ziegelrot. Archivo + IBM Plex Mono.
   ================================================================ */

:root{
  --bg:        #0e0f11;
  --bg-deep:   #0a0b0c;
  --bg-raised: #16181b;
  --ink:       #ece7dd;
  --ink-dim:   #a39b8f;
  --clay:      #c4552f;
  --clay-hot:  #e0693a;
  --moss:      #8fae74;
  --sand:      #d9a441;
  --steel:     #8ba3bd;
  --red-soft:  #d98a70;
  --hairline:  rgba(236,231,221,.14);
  --hairline-soft: rgba(236,231,221,.08);
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --display: 'Archivo', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--display);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--clay); color:var(--ink); }

img, video{ display:block; max-width:100%; }
a{ color:inherit; }

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.clay{ color:var(--clay-hot); }

/* --- Buttons ---------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--bg-deep);
  background:var(--ink);
  padding:1em 2.1em;
  border:1px solid var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--clay-hot); border-color:var(--clay-hot); color:var(--bg-deep); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:transparent; color:var(--clay-hot); border-color:var(--clay-hot); }
.btn--small{ padding:.7em 1.5em; font-size:.68rem; }
.btn--big{ padding:1.25em 3em; font-size:.9rem; }

/* --- Navigation -------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:2.5rem;
  padding:1.1rem var(--pad);
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav--solid{
  background:rgba(10,11,12,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline-soft);
  padding-block:.8rem;
}
.nav__brand{
  font-weight:800;
  font-stretch:118%;
  font-size:1.15rem;
  letter-spacing:.04em;
  text-decoration:none;
}
.nav__brand::after{ content:"."; color:var(--clay-hot); }
.nav__links{ display:flex; gap:1.8rem; margin-left:auto; }
.nav__links a{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  opacity:.75; transition:opacity .2s, color .2s;
}
.nav__links a:hover{ opacity:1; color:var(--clay-hot); }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
.nav__links + .nav__cta{ margin-left:0; }
.lang-switch{
  display:inline-flex; gap:.15rem;
  padding:.2rem;
  background:rgba(236,231,221,.07);
  border:1px solid var(--hairline);
  border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.lang-btn{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); opacity:.55;
  padding:.28rem .6rem; border-radius:999px;
  transition:opacity .2s, color .2s, background .2s;
}
.lang-btn:hover{ opacity:1; }
.lang-btn.is-active{
  opacity:1; color:var(--bg-deep);
  background:var(--clay-hot);
}
.nav__account{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); opacity:.75;
  white-space:nowrap; transition:opacity .2s, color .2s;
}
.nav__account:hover{ opacity:1; color:var(--clay-hot); }
@media (max-width:820px){ .nav__links{ display:none; } .nav{ justify-content:space-between; } }

/* ================================================================
   HERO · Scrollstrecke + klebende Video-Bühne
   ================================================================ */
.hero{ height:420vh; position:relative; }
.hero__stage{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:var(--bg-deep);
}
.hero__poster, .hero__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero__poster{ object-fit:cover; object-position:center; }
.no-scrub .hero__canvas{ display:none; }
/* dezente Abdunklung, damit Copy trägt */
.hero__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,11,12,.72) 0%, rgba(10,11,12,.18) 34%, rgba(10,11,12,0) 55%),
    linear-gradient(to bottom, rgba(10,11,12,.5) 0%, rgba(10,11,12,0) 18%),
    radial-gradient(120% 90% at 50% 50%, rgba(10,11,12,0) 60%, rgba(10,11,12,.45) 100%);
}

/* Sucher-Ecken */
.hero__frame{ position:absolute; inset:clamp(14px,2.4vw,30px); pointer-events:none; z-index:3; opacity:.85; }
.hero__frame .c{ position:absolute; width:26px; height:26px; border:0 solid var(--ink); opacity:.65; }
.c--tl{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.c--tr{ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.c--bl{ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.c--br{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }

/* Headline „in your face“ in der Ecke */
.hero__copy{
  position:absolute; left:var(--pad); bottom:clamp(28px,6vh,64px);
  z-index:4; max-width:min(88vw, 1040px);
  will-change:transform, opacity;
  text-shadow:0 2px 24px rgba(10,11,12,.55), 0 1px 4px rgba(10,11,12,.4);
}
.hero__kicker{
  display:inline-block;
  color:var(--ink);
  background:rgba(10,11,12,.72);
  border:1px solid var(--hairline);
  padding:.7em 1.2em;
  margin-bottom:1.4rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hero__title{
  font-weight:800;
  font-stretch:114%;
  font-size:clamp(2.2rem, 5.6vw, 5.4rem);
  line-height:.98;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.hero__title em{
  font-style:normal;
  color:var(--clay-hot);
}
.hero__cta{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

/* Scroll-Hinweis */
.hero__hint{
  position:absolute; right:clamp(24px,3.4vw,42px); bottom:clamp(24px,4vh,42px);
  z-index:4; opacity:.7; display:flex; align-items:center; gap:.8em;
}
.hint__arrow{ display:inline-block; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(5px); } }

/* ================================================================
   SEKTIONEN
   ================================================================ */
.sect{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(90px,14vh,170px) var(--pad);
  position:relative;
}
.sect--dark{
  max-width:none;
  background:var(--bg-deep);
  border-block:1px solid var(--hairline-soft);
}
/* Inhalte exakt auf die Content-Breite der übrigen Sektionen ausrichten
   (maxw minus beidseitiges Padding), sonst ragt die Sektion seitlich heraus */
.sect--dark > *{ max-width:calc(var(--maxw) - 2 * var(--pad)); margin-left:auto; margin-right:auto; }

.huge{
  font-weight:800; font-stretch:112%;
  font-size:clamp(2rem, 5vw, 4.4rem);
  line-height:1.04; letter-spacing:-.01em;
  max-width:20ch;
}
.big{
  font-weight:800; font-stretch:112%;
  font-size:clamp(1.8rem, 4.2vw, 3.6rem);
  line-height:1.05; letter-spacing:-.01em;
}

/* Problem */
.sect--problem{ padding-top:clamp(110px,18vh,220px); padding-bottom:clamp(60px,8vh,100px); }
.problem__body{
  margin-top:3rem; margin-left:auto;
  max-width:520px;
  color:var(--ink); font-size:1.15rem;
  display:grid; gap:1.2rem;
  border-left:1px solid var(--clay);
  padding-left:1.8rem;
}
/* Überleitung zum Beweis */
.bridge{
  margin-top:clamp(4rem,9vh,7rem);
  font-weight:800; font-stretch:112%;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.25;
  max-width:30ch;
}
.bridge::after{
  content:"↓";
  display:block;
  margin-top:1.2rem;
  color:var(--clay-hot);
  font-weight:400;
  animation:bob 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .bridge::after{ animation:none; } }
/* „So funktioniert's" folgt dicht auf die Überleitung */
#ablauf{ padding-top:clamp(40px,6vh,80px); }

.sect__sub{
  margin-top:1.2rem;
  font-size:1.1rem;
  opacity:.7;
  max-width:48ch;
}

/* ================================================================
   Vorher/Nachher-Slider (.ba) — Modul aus virtue-landing, dunkel & quer
   ================================================================ */
.proof{ margin-top:4rem; }
.proof figcaption{
  margin-top:1rem; opacity:.6; letter-spacing:.12em;
}
.ba{
  position:relative;
  aspect-ratio:2528/1696;
  border:1px solid var(--hairline);
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y;
  cursor:ew-resize;
  overflow:hidden;
  background:var(--bg-raised);
}
.ba__layer{ position:absolute; inset:0; }
.ba__layer img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ba__before{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:1px; background:var(--ink);
  box-shadow:0 0 0 .5px rgba(10,11,12,.5);
  pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--bg-deep);
  border:1px solid var(--ink);
  display:flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
.ba__grip::before, .ba__grip::after{
  content:""; width:6px; height:6px;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink);
}
.ba__grip::before{ transform:rotate(-45deg); }
.ba__grip::after{ transform:rotate(135deg); }
.ba:focus-visible{ outline:2px solid var(--clay-hot); outline-offset:3px; }
.ba__tag{
  position:absolute; bottom:16px; z-index:5;
  padding:.6em 1.2em;
  background:rgba(10,11,12,.78);
  border:1px solid var(--hairline);
  color:var(--ink);
  pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ba__tag--before{
  left:16px;
  color:var(--red-soft);
  border-color:rgba(217,138,112,.45);
}
.ba__tag--after{
  right:16px;
  color:var(--moss);
  border-color:rgba(143,174,116,.45);
}

/* Galerie: 6 kleinere Slider-Kacheln, gleiche Mechanik wie der grosse */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,2.5vw,2.4rem) clamp(1rem,2vw,1.8rem);
  margin-top:4rem;
}
@media (max-width:820px){ .gallery{ grid-template-columns:1fr; } }
.gcard .ba{ aspect-ratio:2528/1696; }
.gcard figcaption{
  margin-top:.8rem; opacity:.6; letter-spacing:.12em;
}
/* Griff und Tags in den Kacheln etwas dezenter, damit 6 Slider ruhig wirken */
.gcard .ba__grip{ width:36px; height:36px; }
.gcard .ba__tag{ bottom:10px; padding:.5em .9em; font-size:.58rem; }
.gcard .ba__tag--before{ left:10px; }
.gcard .ba__tag--after{ right:10px; }

.proof__note{
  margin-top:3.2rem;
  font-size:1.05rem;
  opacity:.75;
  max-width:46ch;
}

/* ================================================================
   Ablauf · 3 Schritte
   ================================================================ */
.steps{
  list-style:none;
  margin-top:4.5rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 2.5vw, 2.4rem);
}
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }
.step{ border-top:1px solid var(--hairline); padding-top:1.4rem; position:relative; }
.step__no{
  color:var(--clay-hot);
  font-size:.85rem;
  display:block; margin-bottom:1.2rem;
}
.step__media{
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid var(--hairline-soft);
  background:var(--bg-raised);
  margin-bottom:1.4rem;
}
.step__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.step:hover .step__media img{ transform:scale(1.04); }
.step h3{
  font-weight:800; font-stretch:112%;
  font-size:1.35rem; text-transform:uppercase; letter-spacing:.01em;
  margin-bottom:.5rem;
}
.step p{ opacity:.8; font-size:1rem; max-width:34ch; }

/* Schritt 2: abstrahierter Konfigurator statt Fake-Screenshot */
.step__media--config{
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem;
  padding:clamp(1.2rem, 2vw, 2rem);
}
.chips{ display:flex; gap:.9rem; }
.chip{
  width:44px; height:44px; border-radius:50%;
  background:var(--sw);
  border:1px solid var(--hairline);
  position:relative;
}
.chip--on{ outline:1px solid var(--ink); outline-offset:4px; }
.gloss{ display:flex; gap:1.2em; font-size:.62rem; opacity:.85; flex-wrap:wrap; }
.gloss--on{ color:var(--clay-hot); }
.conf__bar{ height:1px; background:var(--hairline); position:relative; }
.conf__bar i{
  position:absolute; left:0; top:-1px; height:3px; width:38%;
  background:var(--clay-hot); display:block;
}

/* ================================================================
   Wirkung
   ================================================================ */
.fx__intro{
  margin-top:2rem;
  max-width:560px;
  font-size:1.15rem;
  opacity:.85;
}
.fx__intro em{ font-style:normal; color:var(--clay-hot); }
.fx{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  margin-top:4rem;
}
@media (max-width:900px){ .fx{ grid-template-columns:1fr; } }
.fx__item{ --acc:var(--clay-hot); }
.fx__item{
  position:relative;
  border-top:1px solid var(--hairline);
  padding-top:1.8rem;
}
.fx__item::before{
  content:"";
  position:absolute; top:-1px; left:0;
  width:64px; height:3px;
  background:var(--acc);
}
.fx__no{
  display:block;
  color:var(--acc);
  margin-bottom:1.1rem;
  font-size:.8rem;
}
.fx__head{
  font-weight:800; font-stretch:112%;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  text-transform:uppercase; line-height:1.05;
  margin-bottom:.8rem;
}
.fx__head em{ font-style:normal; color:var(--acc); }
.fx__item p{ opacity:.8; max-width:40ch; }

/* ================================================================
   Preise
   ================================================================ */
.plans{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(.9rem, 1.6vw, 1.5rem);
  margin-top:4.5rem;
  align-items:stretch;
}
@media (max-width:1100px){ .plans{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .plans{ grid-template-columns:1fr; max-width:460px; } }
.plan{
  border:1px solid var(--hairline);
  background:var(--bg);
  padding:2.2rem 1.9rem;
  display:flex; flex-direction:column;
  position:relative;
  transition:border-color .25s ease, transform .25s ease;
}
.plan:hover{ border-color:rgba(236,231,221,.35); }
.plan--hot{
  border-color:var(--clay);
  background:var(--bg-raised);
  transform:translateY(-10px);
}
.plan--hot:hover{ border-color:var(--clay-hot); }
@media (max-width:900px){ .plan--hot{ transform:none; } }
.plan__tag{
  position:absolute; top:-1px; right:-1px;
  background:var(--clay);
  color:var(--ink);
  padding:.5em 1.1em;
  font-size:.62rem;
}
.plan__name{ color:var(--ink); opacity:.7; margin-bottom:1.6rem; }
.plan__price{
  font-weight:800; font-stretch:114%;
  font-size:clamp(2.6rem, 3.6vw, 3.4rem);
  line-height:1;
}
.plan__price span{
  font-size:1rem; font-weight:400; font-stretch:100%;
  opacity:.6; margin-left:.3em;
}
.plan__vol{ margin-top:1.2rem; font-size:1.1rem; }
.plan__vol strong{ font-weight:800; color:var(--clay-hot); }
.plan__per{ opacity:.55; margin-top:.3rem; font-size:.66rem; }
.plan ul{
  list-style:none; margin:1.8rem 0 2.2rem;
  display:grid; gap:.55rem;
  font-size:.95rem; opacity:.85;
}
.plan ul li::before{ content:"— "; color:var(--clay-hot); }
.plan .btn{ margin-top:auto; text-align:center; }
/* Enterprise: breite Karte unter der Vierer-Reihe */
.enterprise{
  margin-top:clamp(1rem, 2vw, 1.8rem);
  border:1px solid var(--hairline);
  background:var(--bg-raised);
  padding:2.2rem 1.9rem;
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
@media (max-width:900px){
  .enterprise{ grid-template-columns:1fr; max-width:460px; }
}
.enterprise__lead{ margin-top:1.4rem; opacity:.85; max-width:44ch; }
.enterprise__price{
  margin-top:1rem;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay-hot);
}
.enterprise__list{
  list-style:none;
  display:grid; gap:.55rem;
  font-size:.95rem; opacity:.85;
}
.enterprise__list li::before{ content:"— "; color:var(--clay-hot); }
.enterprise .btn{ justify-self:start; }
@media (min-width:901px){ .enterprise .btn{ justify-self:end; } }

.plans__note{ margin-top:2rem; opacity:.5; }

/* ================================================================
   FAQ
   ================================================================ */
.faq{ margin-top:3.5rem; max-width:820px; }
.faq details{ border-top:1px solid var(--hairline); }
.faq details:last-child{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.5rem 3rem 1.5rem 0;
  font-weight:600;
  font-size:1.15rem;
  position:relative;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  position:absolute; right:.2rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:1.3rem;
  color:var(--clay-hot);
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--clay-hot); }
.faq details p{
  padding:0 0 1.6rem;
  opacity:.8;
  max-width:62ch;
}

/* ================================================================
   Outro + Footer
   ================================================================ */
.outro{
  padding:clamp(110px,18vh,200px) var(--pad);
  text-align:center;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(196,85,47,.16) 0%, rgba(196,85,47,0) 70%),
    var(--bg-deep);
  border-top:1px solid var(--hairline-soft);
}
.outro .huge{ margin:0 auto 1.6rem; }
.outro__sub{
  max-width:52ch;
  margin:0 auto 3rem;
  opacity:.75;
  font-size:1.1rem;
}
.outro__inner{ max-width:900px; margin:0 auto; }

.foot{
  padding:4rem var(--pad) 2.5rem;
  border-top:1px solid var(--hairline-soft);
  overflow:hidden;
}
.foot__mark{
  font-weight:800; font-stretch:120%;
  font-size:clamp(4rem, 16vw, 15rem);
  line-height:.85;
  text-transform:uppercase;
  letter-spacing:-.01em;
  color:transparent;
  -webkit-text-stroke:1px rgba(236,231,221,.22);
  user-select:none;
  margin-bottom:3rem;
  white-space:nowrap;
}
.foot__cta{ display:flex; gap:1.4rem; align-items:center; margin-bottom:2.5rem; }
.foot__reg{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; opacity:.7; transition:opacity .2s, color .2s;
}
.foot__reg:hover{ opacity:1; color:var(--clay-hot); }
.foot__row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:2rem; flex-wrap:wrap;
  padding-top:2rem;
  border-top:1px solid var(--hairline-soft);
}
.foot__tag{ font-weight:800; font-stretch:112%; text-transform:uppercase; }
.foot__links{ display:flex; gap:2rem; }
.foot__links a{ text-decoration:none; opacity:.7; transition:opacity .2s, color .2s; }
.foot__links a:hover{ opacity:1; color:var(--clay-hot); }
.foot__legal{ margin-top:2.5rem; opacity:.35; font-size:.62rem; }

/* ================================================================
   Filmkorn + Reveals
   ================================================================ */
.grain{
  position:fixed; inset:-100px; z-index:90;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-38px,22px); }
  50%{ transform:translate(24px,-30px); }
  75%{ transform:translate(-14px,-18px); }
}

.rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.rv.rv--in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .hint__arrow{ animation:none; }
  .rv{ opacity:1; transform:none; transition:none; }
  .hero{ height:100vh; }
  .step__media img{ transition:none; }
}

/* ===== Rechtsseiten (aus css/legal.css) ===== */
/* NEUDECK · Rechtsseiten (Impressum, Datenschutz, AGB) */
.legal{ max-width:760px; margin:0 auto; padding:150px var(--pad) 100px; }
.legal h1{
  font-weight:800; font-stretch:112%;
  font-size:clamp(2rem,4vw,3rem);
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.legal .updated{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; margin-bottom:2.8rem;
}
.legal h2{ font-weight:800; font-size:1.2rem; margin:2.6rem 0 .8rem; }
.legal h3{ font-weight:700; font-size:1.02rem; margin:1.8rem 0 .5rem; }
.legal p, .legal address{ opacity:.85; margin-bottom:1rem; font-style:normal; line-height:1.7; }
.legal ul{ margin:0 0 1rem 1.2rem; opacity:.85; display:grid; gap:.4rem; }
.legal a{ color:var(--clay-hot); }
.legal .placeholder{
  color:var(--clay-hot);
  font-family:var(--mono);
  font-size:.8em; letter-spacing:.06em;
}

/* ===== Auth-Seiten (Registrierung) ============================== */
.auth-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
}
.auth-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:150px var(--pad) 90px;
}
.auth-card{
  width:100%;
  max-width:480px;
  background:var(--bg-raised);
  border:1px solid var(--hairline);
  padding:clamp(28px, 5vw, 48px);
}
.auth-header{ margin-bottom:2rem; }
.auth-header .eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay-hot);
  margin-bottom:1rem;
}
.auth-header h1{
  font-weight:800; font-stretch:112%;
  font-size:clamp(1.7rem, 3.4vw, 2.2rem);
  text-transform:uppercase;
  line-height:1.08;
  margin-bottom:.7rem;
}
.auth-header p{ opacity:.75; line-height:1.6; }

/* --- Formular ---------------------------------------------------- */
.form-group{ margin-bottom:1.35rem; }
.form-label{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:.55rem;
}
.form-input{
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  padding:.85em 1em;
  background:var(--bg-deep);
  border:1px solid var(--hairline);
  border-radius:0;
  color:var(--ink);
  font-family:var(--display);
  font-size:1rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder{ color:var(--ink-dim); opacity:.55; }
.form-input:focus{
  border-color:var(--clay-hot);
  box-shadow:0 0 0 2px rgba(224,105,58,.18);
}
.form-input.is-error{
  border-color:var(--red-soft);
  box-shadow:0 0 0 2px rgba(217,138,112,.15);
}
.form-field-error{
  display:none;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--red-soft);
  margin-top:.45rem;
}
.form-field-error.visible{ display:block; }
.form-check{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  cursor:pointer;
  font-size:.9rem;
  line-height:1.55;
  opacity:.85;
  padding:.3rem 0;
}
.form-check input[type="checkbox"]{
  flex-shrink:0;
  width:18px; height:18px;
  margin-top:2px;
  cursor:pointer;
  accent-color:var(--clay);
}
.form-check a{ color:var(--clay-hot); }

/* --- Alerts ------------------------------------------------------ */
.auth-alert{
  display:none;
  padding:.9rem 1.1rem;
  margin-bottom:1.4rem;
  font-size:.9rem;
  line-height:1.55;
  border:1px solid transparent;
}
.auth-alert.visible{ display:block; }
.auth-alert-error{
  background:rgba(217,138,112,.08);
  border-color:rgba(217,138,112,.35);
  color:var(--red-soft);
}
.auth-alert-success{
  background:rgba(143,174,116,.08);
  border-color:rgba(143,174,116,.35);
  color:var(--moss);
}
.auth-alert a{ color:inherit; text-decoration:underline; }

/* --- Buttons / Footer -------------------------------------------- */
.btn--primary{
  background:var(--clay);
  border-color:var(--clay);
  color:var(--ink);
}
.btn--primary:hover{ background:var(--clay-hot); border-color:var(--clay-hot); color:var(--bg-deep); }
.auth-submit{
  display:block;
  width:100%;
  margin-top:.6rem;
  cursor:pointer;
  text-align:center;
}
.auth-submit:disabled{ opacity:.55; cursor:not-allowed; }
.auth-footer-link{
  margin-top:1.6rem;
  text-align:center;
  font-size:.9rem;
  opacity:.7;
}
.auth-footer-link a{ color:var(--clay-hot); }

/* --- Passwort-Toggle --------------------------------------------- */
.auth-password-wrap{ position:relative; }
.auth-password-wrap .form-input{ padding-right:3rem; }
.auth-toggle-pw{
  position:absolute;
  right:1rem; top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center;
  padding:0;
  background:none; border:none;
  color:var(--ink-dim);
  cursor:pointer;
  transition:color .2s ease;
}
.auth-toggle-pw:hover{ color:var(--clay-hot); }

@media (max-width:600px){
  .auth-main{ padding:120px var(--pad) 60px; }
  .auth-card{ border-left:none; border-right:none; padding:32px var(--pad); }
}
.auth-plan-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.1rem;
  padding:.5rem 1rem;
  background:rgba(196,85,47,.12);
  border:1px solid rgba(224,105,58,.4);
  color:var(--clay-hot);
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}