/* ========= Design-Variablen (Light) ========= */
:root{
  /* Brandfarben */
  --brand-blue: #0076CD;
  --brand-red:  #CE5A65;

  /* Safe-Area (Mobil-Ränder) */
  --edge-bottom-light: #FFFFFF; /* (nur noch als Fallback-Var, unten nicht mehr sichtbar) */
  --edge-bottom-dark:  #000000;

  /* Oberflächen & Text (LIGHT) */
  --bg-1: #f6f7fb;
  --bg-2: #ffffff;
  --text-strong: #0f172a;
  --text: #1f2937;
  --text-soft: #6b7280;
  --line: rgba(2, 6, 23, .14);

  /* Schatten & Glows */
  --shadow-strong: 0 12px 30px rgba(0, 118, 205, .28);
  --shadow-soft:   0 8px 20px rgba(0, 118, 205, .22);
  --card-shadow:   0 12px 30px rgba(2, 6, 23, .16);
  --chip-shadow:   0 8px 20px rgba(0, 118, 205, .20);

  --radius: 14px;
  --radius-lg: 26px;

  /* Hintergrund (Light) */
  --bg-grad-1: #f6d6dd;
  --bg-grad-2: #dfe1f2;
  --bg-grad-3: #cfe4f5;

  /* Spacing-Scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 32px;

  /* Hero-Endgröße */
  --hero-size: min(360px, 70vw);
}

/* ========= Dark-Theme ========= */
:root[data-theme="dark"]{
  --bg-1: #1f2630;
  --bg-2: #243042;
  --text-strong: #e7ebef;
  --text: #d2d9e1;
  --text-soft: #a7b0bb;
  --line: rgba(255, 255, 255, .14);

  --card-shadow: 0 20px 40px rgba(0,0,0,.45);
  --chip-shadow: 0 12px 28px rgba(0,0,0,.35);

  /* seriöser dunkler Verlauf (nicht schwarz) */
  --bg-grad-1: #1f2630;
  --bg-grad-2: #232e3b;
  --bg-grad-3: #283645;
}

/* ========= Reset / Basics ========= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2) 50%, var(--bg-grad-3));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease, background .25s ease;

  /* >>> Fix: sichere Unterkante ohne sichtbaren Balken */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, input{ font:inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ========= Utilities ========= */
.section-space{ margin: 18px 0; }

/* ===== Seite ===== */
.page{
  flex: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-5) 18px 56px;
  text-align: center;
}
.page__title{
  margin: 28px 0 8px;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--brand-red);
}
.trust-note{
  font-size:15px; font-weight:600; color:var(--text-soft);
  text-align:center; margin:12px 0 8px;
}
.trust-note strong{ color:var(--brand-blue); }

/* ========= Navbar ========= */
.nav{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--brand-blue); color:#fff;
  overflow: visible; /* wichtig fürs Dropdown */
}
.nav__burger{
  background:transparent; border:0; font-size:22px; color:#fff; cursor:pointer;
  width: 38px; height: 38px; border-radius: 10px;
}
.nav__burger:focus-visible{ outline: 3px solid rgba(255,255,255,.85); outline-offset: 2px; }
.nav__brand{ font-weight:700; letter-spacing:.2px; }
.nav__actions{ display:flex; gap:10px; justify-self:end; align-items:center; }
.theme-toggle{
  border:0; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  backdrop-filter:saturate(140%) blur(4px);
}
:root[data-theme="dark"] .theme-toggle{ background:rgba(0,0,0,.25); }

/* Navi-Links ohne Unterstreichung */
.nav a,
.nav a:visited,
.nav a:hover,
.nav .btn,
.nav .nav__btn { text-decoration: none !important; }
.nav .nav__btn { text-decoration: none !important; }

/* ========= Buttons ========= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 12px;
  padding: 14px 18px; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: transform .03s ease, box-shadow .2s ease, opacity .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:disabled{ opacity: .65; cursor: default; }
.btn--primary{
  background: var(--brand-blue) !important;
  color: #fff !important;
  box-shadow: var(--shadow-strong);
}
.btn--primary:hover{ filter: brightness(1.02); }
.btn--primary:active{ transform: translateY(1px); }
.btn:focus-visible{
  outline: 3px solid rgba(0,118,205,.45);
  outline-offset: 2px;
}
.nav__btn{ padding: 10px 14px; font-size: 14px; box-shadow: var(--shadow-soft); }
.form .btn--primary{ background: var(--brand-blue) !important; color:#fff !important; }

/* ========= Dropdown-Menü LINKS unter dem Burger ========= */
.navmenu{
  position: absolute;
  left: 16px;
  top: calc(100% + 10px);
  min-width: 200px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
/* Wichtig: hidden nicht blockieren, damit Close-Animation möglich ist */
.navmenu[hidden]{ display: block; }
[aria-expanded="true"] ~ .navmenu,
.navmenu[data-open="true"]{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* kleiner Pfeil */
.navmenu::before{
  content:"";
  position:absolute;
  left: 14px;
  top: -6px;
  width: 10px; height: 10px;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.navmenu__link{
  display:block;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text-strong);
  font-weight: 700;
  border-radius: 8px;
  margin: 0 8px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.navmenu__link:hover{
  background: var(--bg-1);
  color: var(--brand-blue);
  box-shadow: var(--chip-shadow);
}
.navmenu__link:focus-visible{
  outline: 3px solid rgba(0,118,205,.35);
  outline-offset: 2px;
}
/* Dark-Mode */
:root[data-theme="dark"] .navmenu{ background: var(--bg-1); }
:root[data-theme="dark"] .navmenu::before{ background: var(--bg-1); }

/* ========= Fragen – Anordnung & Spacing ========= */
.chooser{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.chooser__col{ text-align: left; }
.chooser__headline{
  margin: 0 0 var(--space-2);
  font-size: 16px; color: var(--text-soft); font-weight: 600;
}
.iconchoices{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px,1fr));
  gap: var(--space-2);
}

/* ========= Icon-Cards & States ========= */
.iconbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 8px;
  width: 100%;
  padding: 16px 14px;
  background: linear-gradient(180deg, #f6d6dd, #dfe1f2 55%, #cfe4f5);
  color:#0f172a;
  border: 2px solid rgba(0,0,0,.14);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform .03s ease, box-shadow .2s ease,
             border-color .2s ease, background .2s ease, outline-color .2s ease;
  text-align: center;
}
.iconbtn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.iconbtn:focus-visible{
  outline: 3px solid rgba(0,118,205,.35);
  outline-offset: 2px;
}
.iconbtn.is-on{
  border-color: rgba(0,118,205,.95);
  outline: 8px solid rgba(0,118,205,.22);
  outline-offset: 0;
  background: linear-gradient(180deg, #f0c4cd, #cfd7ee 55%, #bdd8ef);
}
/* Gruppe ohne Auswahl: 8px Rot */
.iconchoices.invalid .iconbtn{
  border-color: #e11d48;
  outline: 8px solid rgba(225,29,72,.22);
  outline-offset: 0;
}
/* Icon schwarz, Beschriftung dunkel */
.iconbtn img{
  width: 64px; height: 64px; object-fit: contain; display:block;
  filter: grayscale(1) brightness(0) contrast(120%);
}
.iconbtn span{
  font-weight: 800; font-size: 15px; line-height: 1.1; color: #0b0b0c !important;
}

/* ========= CTA ========= */
.cta{
  margin: var(--space-4) 0 var(--space-3);
  display: flex; justify-content: center;
}
.cta .btn{ min-width: 240px; }

/* ========= Email/DSGVO Block ========= */
.email-block{
  margin-top: var(--space-4);
  padding: 12px;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transform-origin: top;
  will-change: opacity, transform, max-height, filter;
  transition:
    opacity   .45s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1),
    filter    .45s cubic-bezier(.22,.61,.36,1),
    max-height .60s cubic-bezier(.22,.61,.36,1);
  max-height: 1000px;
}
.email-block.is-hidden{
  opacity: 0;
  transform: translateY(12px) scale(.985);
  filter: blur(1.5px);
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  box-shadow: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .email-block{ transition: none; }
  .email-block.is-hidden{ transform:none; filter:none; }
}

/* Inneres Formular */
.form{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0;
  text-align: left;
  color: var(--text);
}

/* ========= Form-Felder ========= */
html { -webkit-text-size-adjust: 100%; } /* Safari-Zoom stabil */
.form-group{ display:block; margin-bottom: var(--space-2); }
.form-label{ display:block; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--text-soft); }

.form-control{
  width: 100%;
  min-height: 48px;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35)) padding-box,
    var(--bg-1);
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.25;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-clip: padding-box;
}
.form-control::placeholder{ color: var(--text-soft); }
.form-control:hover{
  border-color: rgba(0,118,205,.35);
  box-shadow: 0 1px 0 rgba(2,6,23,.03) inset, var(--chip-shadow);
}
.form-control:focus{
  border-color: rgba(0,118,205,.6);
  box-shadow: 0 0 0 4px rgba(0,118,205,.15), 0 1px 0 rgba(2,6,23,.03) inset, var(--chip-shadow);
}
textarea.form-control{ resize: vertical; min-height: 120px; }

/* Fallback, falls .form-control mal fehlt */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="search"],
.form input[type="number"],
.form input[type="date"],
.form input[type="time"],
.form select,
.form textarea{
  width: 100%;
  min-height: 48px;
  padding: 14px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35)) padding-box,
    var(--bg-1);
  color: var(--text-strong);
  font-size: 16px;
  line-height: 1.25;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-clip: padding-box;
}
.form input[type="text"]:hover,
.form input[type="email"]:hover,
.form input[type="password"]:hover,
.form input[type="tel"]:hover,
.form input[type="url"]:hover,
.form input[type="search"]:hover,
.form input[type="number"]:hover,
.form input[type="date"]:hover,
.form input[type="time"]:hover,
.form select:hover,
.form textarea:hover{
  border-color: rgba(0,118,205,.35);
  box-shadow: 0 1px 0 rgba(2,6,23,.03) inset, var(--chip-shadow);
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="password"]:focus,
.form input[type="tel"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="number"]:focus,
.form input[type="date"]:focus,
.form input[type="time"]:focus,
.form select:focus,
.form textarea:focus{
  border-color: rgba(0,118,205,.6);
  box-shadow: 0 0 0 4px rgba(0,118,205,.15), 0 1px 0 rgba(2,6,23,.03) inset, var(--chip-shadow);
}

/* Select – Pfeil */
.select{ position: relative; display:block; }
.select .form-control,
.select .form select{ padding-right: 42px; }
.select::after{
  content: "";
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  background: no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9' fill='none' stroke='%238a94a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Autofill neutralisieren */
input.form-control:-webkit-autofill,
.form input:-webkit-autofill,
textarea.form-control:-webkit-autofill,
.form textarea:-webkit-autofill,
select.form-control:-webkit-autofill,
.form select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset;
  box-shadow: 0 0 0 1000px var(--bg-1) inset;
  -webkit-text-fill-color: var(--text-strong);
  transition: background-color 9999s ease-out 0s;
}

/* Dark-Mode */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form input[type],
:root[data-theme="dark"] .form select,
:root[data-theme="dark"] .form textarea{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) padding-box,
    var(--bg-2);
  border-color: rgba(255,255,255,.08);
  color: var(--text);
}
:root[data-theme="dark"] .form-control:hover,
:root[data-theme="dark"] .form input[type]:hover,
:root[data-theme="dark"] .form select:hover,
:root[data-theme="dark"] .form textarea:hover{
  border-color: rgba(255,255,255,.18);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form input[type]:focus,
:root[data-theme="dark"] .form select:focus,
:root[data-theme="dark"] .form textarea:focus{
  border-color: rgba(0,118,205,.7);
  box-shadow:
    0 0 0 4px rgba(0,118,205,.22),
    0 1px 0 rgba(0,0,0,.35) inset,
    var(--chip-shadow);
}

/* Validierung */
.is-invalid{ border-color:#e11d48 !important; box-shadow:0 0 0 4px rgba(225,29,72,.18) !important; }
.is-valid{   border-color:#06c167 !important; box-shadow:0 0 0 4px rgba(6,193,103,.18) !important; }

/* Checkbox-Zeile & Hinweis */
.check{
  display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start;
  margin:12px 0 var(--space-2); font-size:14px; color:var(--text);
}
.check a{ color: var(--brand-blue); }
.form__hint{ margin:6px 2px 0; font-size:14px; color:#06c167; }

/* iOS Tap-Highlight */
.form-control, .form input, .form select, .form textarea, .check input{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ========= Sektionen ========= */
.howitworks, .safety, .big-image, .faq, .stories, .bottom-cta{
  max-width: 900px; margin: 42px auto; padding: 0 18px;
}
.howitworks h2, .safety h2, .faq h2{ margin:0 0 12px; font-size:22px; text-align:center; color:var(--text-strong); }

/* Grids */
.hiw-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 22px;
}
.hiw-grid article{
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--card-shadow);
  text-align:center;
}
.hiw-grid .svg-frame{
  width: 180px; height: 180px; margin: 0 auto 8px;
  border-radius: var(--radius); overflow: hidden;
}
.hiw-grid .svg-frame > img{
  width: 100%; height: 100%; object-fit: contain;
  filter: none !important;
}

/* Sicherheit & Vielfalt */
.safety-list{ list-style:none; padding:0; margin:0 auto 18px; max-width:720px; color:var(--text); }
.safety-list li{ padding:10px 0; border-top:1px dashed var(--line); }
.safety-list li:first-child{ border-top:0; }

.diversity-strip{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap; opacity:.98;
}
.diversity-strip .svg-frame{ width: 140px; height: 140px; border-radius: var(--radius); overflow: hidden; }
.diversity-strip .svg-frame > img{
  width: 100%; height: 100%; object-fit: cover;
  filter: none !important;
}

/* Desktop-Bilder größer */
@media (min-width: 1024px){
  .hiw-grid picture img{ width: 180px; height: 180px; }
}

/* Großes Bild */
.big-image .img-frame{
  height: 320px;
  background: linear-gradient(135deg, #f6d6dd, #cfe4f5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-soft); font-weight:700;
  overflow:hidden;
}
.big-image .img-frame img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius-lg); display:block; }

/* ========= FAQ ========= */
.faq details{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 8px 0;
  box-shadow: var(--card-shadow);
}
.faq summary{ cursor:pointer; font-weight:700; outline: none; }
.faq p{ margin: 8px 0 0; color: var(--text); }
.faq details[open] summary{ opacity:.95; }

/* ========= Stories ========= */
.stories h2{ margin:0 0 14px; font-size:22px; text-align:center; color:var(--text-strong); }
.story{
  display:grid; grid-template-columns: 240px 1fr; gap:18px; align-items:center;
  background: var(--bg-2); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--card-shadow); padding:16px; margin-bottom:16px;
}
.story--alt{ grid-template-columns: 1fr 240px; }
.story--alt .story__media{ order:2; }
.story--alt .story__body{ order:1; }
.story__media img{
  width:100%; height:180px; object-fit:cover;
  border-radius: var(--radius); display:block;
}
.story__body h3{ margin:6px 0 6px; font-size:18px; color: var(--text-strong); }
.story__body p{ margin:0 0 6px; color: var(--text); }
.story__meta{ font-size:13px; color: var(--text-soft); }
.stories__cta{ text-align:center; margin-top:14px; }
.stories__cta .btn{ min-width:240px; }

/* ========= Reveal-on-scroll ========= */
.reveal{ opacity:0; transform: translateY(14px) scale(.985); filter: blur(1px); }
.reveal.is-visible{
  opacity:1; transform: none; filter:none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1),
              filter .55s cubic-bezier(.22,.61,.36,1);
}

/* ========= Generisches Stagger-System ========= */
.stagger .stagger-item{
  opacity: 0;
  transform: translateY(10px) scale(.985);
  filter: blur(1px);
  transition:
    opacity .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.stagger.is-on .stagger-item{
  opacity: 1; transform: none; filter: none;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .stagger .stagger-item{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ========= Footer ========= */
.site-footer{
  margin-top: auto;
  padding: calc(18px + env(safe-area-inset-bottom)) 16px 18px;
  text-align: center;
  background: #f7f7f9;
  color: #1f2937;
}
html[data-theme="dark"] .site-footer{ background:#000; color:#e5e7eb; }
.site-footer a{ color:inherit; text-decoration:underline; }

/* ========= Mobil ========= */
@media (max-width: 900px){
  .hiw-grid .svg-frame{ width:160px; height:160px; }
}
@media (max-width: 720px){
  .hiw-grid{ grid-template-columns: 1fr; }
  .hiw-grid .svg-frame{ width:128px; height:128px; }
  .story, .story--alt{ grid-template-columns: 1fr; }
  .story--alt .story__media{ order:0; }
  .story--alt .story__body{ order:0; }
  .story__media img{ height:200px; }
}
@media (max-width: 520px){
  .page{ max-width: 540px; }
  .nav__brand{ font-size: 14px; }
  .iconchoices{ grid-template-columns: repeat(2, minmax(140px,1fr)); }
}

/* ========= Hero-Grafik ========= */
.hero-art{
  display:flex;
  justify-content:center;
  margin: 8px 0 18px;
}
.hero-art img{
  width: var(--hero-size);
  max-width: 100%;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
  transform-origin: 50% 55%;
  opacity: 0;
  animation: hero-grow-in 1400ms cubic-bezier(.22,.61,.36,1) forwards,
             hero-pulse 7.5s ease-in-out 1600ms infinite;
}
@keyframes hero-grow-in{
  0%{ transform: scale(.2); opacity: 0; }
  60%{ transform: scale(1.06); opacity: 1; }
  100%{ transform: scale(1); opacity: 1; }
}
@keyframes hero-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.03); }
}
:root[data-theme="dark"] .hero-art img{
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.45));
}
@media (prefers-reduced-motion: reduce){
  .hero-art img{ animation:none; opacity:1; transform:none; }
}

/* Seite auf großen Screens breiter erlauben */
@media (min-width: 1024px){
  .page{ max-width: 980px; }
}
@media (min-width: 1280px){
  .page{ max-width: 1100px; }
}

/* Reveal-Items (wird von JS gesetzt) */
.reveal-item{
  opacity: 0;
  transform: translateY(10px) scale(.985);
  filter: blur(1px);
  transition:
    opacity .55s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--stagger, 0ms);
}
.reveal-item.in{
  opacity: 1;
  transform: none;
  filter: none;
}

/* ========= Auth-Seiten ========= */
body.auth .page{
  width: clamp(320px, 75vw, 760px);
  max-width: 760px;
  margin-left:auto; margin-right:auto;
}
body.auth .page__title{ font-size: clamp(28px, 7vw, 40px); }
body.auth .form-control{ min-height:52px; font-size:17px; padding:16px 14px; }
body.auth .btn{ font-size:17px; padding:16px 20px; border-radius:14px; }

/* Kleine Phones */
@media (max-width: 480px){
  html{ font-size:17px; }
  body.auth .page{ width: clamp(320px, 85vw, 760px); padding-left:14px; padding-right:14px; }
  body.auth .form-control{ min-height:56px; font-size:18px; padding:16px 16px; }
  body.auth .btn{ font-size:18px; padding:18px 22px; }
  body.auth .form-label, body.auth p, body.auth .chooser__headline{ font-size:16px; }
}

/* Größere Phones/Tablets Hochformat */
@media (min-width:481px) and (max-width:900px){
  body.auth .page{ width: clamp(340px, 75vw, 760px); }
}

/* Auth-Links unter dem Formular */
body.auth .form + p{
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  color: var(--text);
}
body.auth .form + p a{
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 700;
  outline: none;
  transition: color .15s ease, text-decoration-color .15s ease, filter .15s ease;
}
body.auth .form + p a:visited{ color: var(--brand-blue); }
body.auth .form + p a:hover{
  filter: brightness(1.05);
  text-decoration-thickness: 3px;
}
body.auth .form + p a:focus-visible{
  outline: 3px solid rgba(0,118,205,.45);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Dark-Mode für diese Links */
:root[data-theme="dark"] body.auth .form + p a,
:root[data-theme="dark"] body.auth .form + p a:visited{
  color: #cfe7ff;
  text-decoration-color: #cfe7ff;
}
:root[data-theme="dark"] body.auth .form + p a:hover{
  color: #e6f3ff;
  text-decoration-color: #e6f3ff;
}

/* Allgemeine Links in Auth */
body.auth a{
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color .15s ease, text-decoration-color .15s ease, filter .15s ease;
}
body.auth a:visited{ color: var(--brand-blue); }
body.auth a:hover{
  filter: brightness(1.05);
  text-decoration-thickness: 3px;
}
body.auth a:focus-visible{
  outline: 3px solid rgba(0,118,205,.45);
  outline-offset: 2px;
  border-radius: 6px;
}
:root[data-theme="dark"] body.auth a,
:root[data-theme="dark"] body.auth a:visited{
  color: #cfe7ff;
  text-decoration-color: #cfe7ff;
}
:root[data-theme="dark"] body.auth a:hover{
  color: #e6f3ff;
  text-decoration-color: #e6f3ff;
}

/* ========= Mobile Safe-Area ========= */
/* Oben farbiger Streifen bleibt */
.safe-edge{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none;
}
.safe-edge.top{
  top: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--brand-blue);
}
/* Unten ENTFERNT: kein sichtbarer Balken mehr */
/* Falls irgendwo noch .safe-edge.bottom im DOM wäre, verstecken: */
.safe-edge.bottom{ display:none !important; }

/* Nur auf schmalen Screens anzeigen (verhindert Desktop-Artefakte) */
@media (min-width: 901px){
  .safe-edge{ display:none; }
}