/* ===== A11y Utility ===== */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Tokens ===== */
:root{
  --space-0: 0;
  --space-1: clamp(.4rem, .3rem + .3vw, .6rem);
  --space-2: clamp(.6rem, .4rem + .5vw, .9rem);
  --space-3: clamp(1rem, .8rem + .8vw, 1.4rem);
  --space-4: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  --space-5: clamp(2.4rem, 1.8rem + 1.6vw, 3.2rem);

  --radius-card: 16px;
  --focus-ring-color: color-mix(in oklab, var(--primary, #6b7cff) 90%, #000 10%);
}

/* ===== Container & Section ===== */
.container{ max-width: 1600px; margin-inline:auto; }
.aurora-sheet{
  background:#fff; color:#111; text-align:center;
  padding: clamp(3rem, 4vw, 6rem) clamp(1rem, 3vw, 2rem);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
@supports (padding:max(0px)){
  .aurora-sheet{
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ===== Headline & Subline ===== */
.aurora-title{
  font-size: clamp(2rem, 1.6rem + 2.2vw, 3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  margin: .2rem 0 .6rem !important;
  color: #0b0c10 !important;
  text-wrap: balance !important;
}
.aurora-subtitle{
  position: relative !important;
  color:#0f1729 !important;
  max-width: 62rem !important;
  margin: 0 auto var(--space-5) !important;
  line-height: 1.78 !important;
  font-size: clamp(1.06rem, 1rem + .6vw, 1.22rem) !important;
  letter-spacing: .004em !important;
  text-wrap: pretty !important;
  padding: 1.1rem 1.2rem 1.1rem !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05) !important;
}
/* Basis: Tablet-/Desktop zeigen Full; Mobile zeigt Snippet – Tablet-Regel überschreibt unten */
.aurora-subtitle .subtitle-snippet{ display:none; }
.aurora-subtitle .subtitle-t{ display:none; }
.aurora-subtitle .subtitle-full{ display:inline; }

/* ===== Grid (ohne Overflow) ===== */
.quasar-grid{
  display:grid;
  grid-template-columns: 1fr; /* mobile */
  gap: clamp(1rem, 2vw, 1.6rem);
  justify-content:center;
  padding:0;
  list-style:none;
  margin-inline: auto;
  width:100%;
  max-width: min(1600px, 100% - 2rem);
}
@media (min-width: 700px) and (max-width: 1024px){
  .quasar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quasar-grid > li:nth-child(3){ grid-column: 1 / -1; }
}
@media (min-width: 1025px){
  .quasar-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: min(1600px, 100% - 4rem);
  }
}

/* ===== Card ===== */
.aether-card{
  position:relative;
  overflow:hidden;
  border:1px solid #eee;
  border-radius: var(--radius-card);
  padding: clamp(1.2rem, 1rem + 1vw, 2rem);
  text-align:left;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 20%, #9e9e9e80 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  color:#fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  transition: transform .35s ease, box-shadow .35s ease, background-position .6s ease;
  transform-style: preserve-3d;
  content-visibility: auto;
  contain-intrinsic-size: 420px 1px;
  scroll-margin-top: 96px;

  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Farbvarianten */
.quasar-grid > li:nth-child(1) .aether-card{
  --g1:#ff5100; --g2:#ff7b00;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g1));
  background-size: 300% 300%;
}
.quasar-grid > li:nth-child(2) .aether-card{
  --g1:#0d0d0d; --g2:#1c1f2f;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g1));
  background-size: 300% 300%;
}
.quasar-grid > li:nth-child(3) .aether-card{
  --g1:#4b00ff; --g2:#3000a3;
  background: linear-gradient(135deg, var(--g1), var(--g2), var(--g1));
  background-size: 300% 300%;
}

/* Glow & Overlay */
.aether-card::before{
  content:"";
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 70%);
  transform: scale(.5);
  opacity:0; transition: all .6s ease;
  z-index:1; pointer-events:none;
}
.aether-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.14));
}
.aether-card > *{ position:relative; z-index:2; }

/* Hover (nur bei Maus) */
@media (hover:hover){
  .aether-card:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 26px 64px rgba(0,0,0,.22);
    background-position: 100% 50%;
  }
  .aether-card:hover::before{ transform: scale(1); opacity:.25; }
}

/* ===== Headings in Cards ===== */
.aether-card h3{
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem) !important;
  font-weight: 800 !important;
  margin: .1rem 0 .5rem !important;
  color: #fff !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
  text-wrap: balance !important;
}

/* ===== UX-Typo ===== */
.microtag{
  font-size: 1rem;
  color:#eef;
  opacity:.95;
  font-weight:650;
  margin: .2rem 0 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.delta-list{
  list-style:none; padding:0; margin: var(--space-2) 0 var(--space-2);
  display:grid; gap:.7rem;
  max-width: 70ch;
}
.delta-list li{
  display:grid;
  grid-template-columns: 1fr;
  gap:.28rem;
  align-items:start;
  padding:.6rem 0 .8rem;
  border-top:1px solid rgba(255,255,255,.2);
}
.delta-list li:first-child{ border-top:none; }
.delta-list .lead{
  display:block;
  color:#fff;
  font-weight:950;
  letter-spacing:-.01em;
  font-size: clamp(1.06rem, 1rem + .5vw, 1.22rem);
  line-height:1.28;
  text-wrap:balance;
}
.delta-list .copy{
  display:block;
  margin-top:.2rem;
  padding:0;
  background:none; border:none;
  color: rgba(255,255,255,.96);
  font-weight:690;
  letter-spacing:-.002em;
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
  line-height:1.7;
  text-wrap:pretty;
  hyphens:auto;
  max-width: 62ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Abschließende Benefit-Zeile (optional nutzbar) */
.benefit-line{
  margin-top: auto;
  font-size: clamp(1.06rem, 1rem + .5vw, 1.24rem);
  line-height: 1.32;
  color:#fff;
  font-weight:950;
  letter-spacing:-.01em;
  text-wrap:balance;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  max-width: 62ch;
}

/* ===== Layout Tweaks ===== */
@media (min-width:1200px){
  .aurora-sheet{ padding: clamp(4rem, 5vw, 8rem) clamp(1.25rem, 3vw, 3rem); }
}
@media (max-width:768px){
  .delta-list{ max-width: 100%; }
}

/* ===== Fokus & Interaktion ===== */
:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible,
.aether-card:focus-within{
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 4px;
}
.aether-card { scroll-margin-top: 96px; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .aether-card,
  .quasar-grid{ transition: none !important; animation: none !important; }
}

/* ===== High Contrast / Forced Colors ===== */
@media (forced-colors: active){
  .aether-card,
  .aether-card h3,
  .delta-list .lead,
  .delta-list .copy{
    text-shadow: none !important;
    box-shadow: none !important;
    background: Canvas !important;
    color: CanvasText !important;
    border-color: ButtonText !important;
  }
  .aether-card:focus-within{ outline-color: Highlight !important; }
}

/* ===== Dark Mode via data-theme (explizit) ===== */
:root[data-theme="dark"] #aurora-sheet.aurora-sheet{
  background:#000; color:#fff;
}
:root[data-theme="dark"] .aurora-title{
  color:#ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] .aurora-subtitle{
  color:#fff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* ===== Sichtbarkeits-/Höhen-Fallbacks ===== */
#aurora-sheet .aether-card{
  height: 100%;
  contain-intrinsic-size: 0 460px;
}
@supports (content-visibility:auto){
  @media (min-width: 1025px){
    #aurora-sheet .quasar-grid > li:nth-child(-n+3) .aether-card{
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }
  }
  @media (min-width: 700px) and (max-width: 1024px){
    #aurora-sheet .quasar-grid > li:nth-child(-n+2) .aether-card{
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }
  }
  @media (max-width: 699px){
    #aurora-sheet .quasar-grid > li:nth-child(1) .aether-card{
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }
  }
}

/* Gemeinsamer Gutter */
:root { --aurora-gutter: 1rem; }
.aurora-sheet {
  padding-left: max(var(--aurora-gutter), env(safe-area-inset-left));
  padding-right: max(var(--aurora-gutter), env(safe-area-inset-right));
}
@media (max-width: 600px){
  .aurora-subtitle{
    display:block;
    width:100%;
    max-width:none;
    margin: 0 0 var(--space-5) 0;
  }
  .quasar-grid{
    grid-template-columns: 1fr;
    width:100%;
    max-width:none;
    margin: 0;
    padding-inline: 0;
  }
  .quasar-grid > li, .aether-card{ min-width: 0; }
}

/* ===== Auto-Dark nur wenn ROOT kein data-theme hat ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #aurora-sheet{
    background:#0a0c12; color:#f6f8ff;
  }
  :root:not([data-theme]) .aurora-title{
    color:#ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  :root:not([data-theme]) .aurora-subtitle{
    color:#e8eeff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.45) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
}

/* ===== Force-Light für diese Section (optional) ===== */
#aurora-sheet{
  background:#fff;
  color:#0b0c10;
  color-scheme: light; /* Safari/iOS: Form-Controls etc. nicht auto-dunkeln */
}
#aurora-sheet[data-force-light]{
  background:#fff !important;
  color:#0b0c10 !important;
}

/* === MOBILE: Wrapper hart zentrieren & margin:32 links killen (falls benötigt) === */
@media (max-width: 699.98px){
  #zen-faq{
    margin: 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: translateX(0) !important;

    width: 100% !important;
    max-width: 100% !important;
    padding-left:  clamp(12px, 4vw, 20px) !important;
    padding-right: clamp(12px, 4vw, 20px) !important;
  }

  .zen-vault,
  .zen-vaq{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === MOBILE: Fade links/rechts komplett aus (falls vorhanden) === */
@media (max-width: 699.98px){
  #zen-faq .zen-viewport{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  #zen-faq .zen-viewport::before,
  #zen-faq .zen-viewport::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }
  #zen-faq .zen-viewport{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html, body{ overflow-x: hidden; }
}

/* === MOBILE-KARTE: nur Headline + kurzer Satz === */
@media (max-width: 699.98px){
  /* Karte kompakt */
  #aurora-sheet .aether-card{
    padding: 14px 16px !important;
    min-height: auto !important;
    contain-intrinsic-size: auto 120px !important; /* deutlich flacher */
    box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
  }

  /* Headline enger setzen */
  #aurora-sheet .aether-card h3{
    margin: 0 0 .25rem !important;
  }

  /* nur kurzer Satz sichtbar */
  #aurora-sheet .aether-card .snippet{
    display:block !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    font-weight: 680 !important;
    color: rgba(255,255,255,.98) !important;
    text-wrap: pretty;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }

  /* alles andere ausblenden */
  #aurora-sheet .aether-card .delta-list,
  #aurora-sheet .aether-card .benefit-line,
  #aurora-sheet .aether-card .t-snippet{
    display:none !important;
  }

  /* microtag: aus */
  #aurora-sheet .aether-card .microtag{ display:none !important; }

  /* Grid-Abstände leicht straffen */
  #aurora-sheet .quasar-grid{
    gap: .8rem !important;
  }

  /* Subtitle: Mobile zeigt nur Kurzsatz */
  #aurora-sheet .aurora-subtitle{
    padding: 12px 14px !important;
    margin-bottom: var(--space-4) !important;
  }
  #aurora-sheet .aurora-subtitle .subtitle-snippet{ display:block !important; }
  #aurora-sheet .aurora-subtitle .subtitle-t,
  #aurora-sheet .aurora-subtitle .subtitle-full{ display:none !important; }
}

/* === TABLET / SCHMALER DESKTOP: 700–1240 px
       Zeige die neuen t-snippets, blende Liste aus, behalte Microtag bei === */
@media (min-width:700px) and (max-width:1240px){
  /* Subtitle: Tablet-Variante aktiv */
  #aurora-sheet .aurora-subtitle .subtitle-snippet{ display:none !important; }
  #aurora-sheet .aurora-subtitle .subtitle-t{ display:inline !important; }
  #aurora-sheet .aurora-subtitle .subtitle-full{ display:none !important; }

  /* Cards: t-snippet aktiv, Liste aus; Microtag bleibt */
  #aurora-sheet .aether-card .t-snippet{
    display:block !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.96) !important;
    margin: .1rem 0 0 !important;
  }
  #aurora-sheet .aether-card .snippet{ display:none !important; }
  #aurora-sheet .aether-card .delta-list{ display:none !important; }
}

/* Ab Tablet/Desktop (≥1240px): Volltext & Liste zeigen, t/snippet ausblenden */
@media (min-width:1240px){
  #aurora-sheet .aurora-subtitle .subtitle-snippet,
  #aurora-sheet .aurora-subtitle .subtitle-t{ display:none !important; }
  #aurora-sheet .aurora-subtitle .subtitle-full{ display:inline !important; }

  #aurora-sheet .aether-card .t-snippet,
  #aurora-sheet .aether-card .snippet{ display:none !important; }
  #aurora-sheet .aether-card .delta-list{ display:grid !important; }
}

/* Aurora-Subtitle: zwischen 600–1200px mit mehr Rand und etwas kompakterer Optik */
@media (min-width: 600px) and (max-width: 1200px){
  #aurora-sheet .aurora-subtitle{
    /* responsive, aber nicht bis ganz an den Rand */
    width: min(90%, 58rem) !important;  /* 90% der Breite, aber max 58rem */
    margin-inline: auto !important;     /* zentriert */
    
    /* leicht kompakterer Look */
    padding: 1rem 2.4rem !important;    /* mehr Innenabstand links/rechts */
    line-height: 1.7 !important;
    border-radius: 14px !important;
  }
}

/* ===========================
   🔠 Systemfont Typografie (Add-On)
   =========================== */

/* 1) Grundschrift als Variable + global anwenden */
:root{
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html, body{
  font-family: var(--font-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-weight: 400;
}

/* 2) Headline (.aurora-title) – wie besprochen */
.aurora-title{
  font-family: var(--font-base) !important;
  font-size: clamp(2rem, 1.6rem + 2.2vw, 3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  text-wrap: balance !important;
}

/* 3) Subheadline (.aurora-subtitle) – wie besprochen */
.aurora-subtitle{
  font-family: var(--font-base) !important;
  font-size: clamp(1.06rem, 1rem + .6vw, 1.22rem) !important;
  line-height: 1.78 !important;
  font-weight: 500 !important;
  letter-spacing: .004em !important;
  text-wrap: pretty !important;
}

/* 4) Karten-Typo */
/* Überschriften auf Karten */
.aether-card h3{
  font-family: var(--font-base) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}

/* Listen (Lead/Copy) */
.delta-list .lead{
  font-family: var(--font-base) !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
  hyphens: auto !important;
}
.delta-list .copy{
  font-family: var(--font-base) !important;
  font-weight: 690 !important;
  letter-spacing: -0.002em !important;
  text-wrap: pretty !important;
  hyphens: auto !important;
}

/* Microtag/Label */
.microtag{
  font-family: var(--font-base) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

/* 5) Dark-Mode Lesbarkeit für Headline/Subheadline */
@media (prefers-color-scheme: dark){
  .aurora-title{ text-shadow: 0 1px 3px rgba(0,0,0,.4) !important; }
  .aurora-subtitle{
    color:#fff !important;
    background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.4) !important;
  }
}
@media (max-width: 700px) {
  .aurora-subtitle {
    background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05) !important;
    color: #0f1729 !important;
  }
  :root[data-theme="dark"] .aurora-subtitle {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.6), 0 2px 8px rgba(255,255,255,.05) !important;
    color: #fff !important;
  }
}
/* Aurora title split-typography */
.aurora-title .word{ display:inline-block; overflow:hidden; padding-inline:0.02em; }
.aurora-title .chars{ display:inline-block; }
.aurora-title .char{ display:inline-block; transform-origin:50% 80%; will-change: transform, opacity; }
/* Split-typography für Card-Titel */
.aether-card h3 .word{ display:inline-block; overflow:hidden; padding-inline:0.02em; }
.aether-card h3 .chars{ display:inline-block; }
.aether-card h3 .char{ display:inline-block; transform-origin:50% 80%; will-change: transform, opacity; }

/* ===========================
   AURORA → COSMOS PARITY PATCH
   Fokus: Headline (.aurora-title) & Subline (.aurora-subtitle)
   =========================== */

/* 1) Gutter/Stage wie Cosmos (mehr Außenluft) */
:root{
  --aurora-gutter: 2rem; /* Cosmos nutzt ~2rem Gutter */ /* aligns spacing to cosmos */
}

/* 2) Headline identisch zu Cosmos */
.aurora-title{
  /* Cosmos nutzt identische Typoparameter; wir fixieren die Abstände/Farbe wie dort */
  font-size: clamp(2rem, 1.6rem + 2.2vw, 3rem) !important; /* Cosmos h2 */
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  margin: .2rem 0 .8rem !important;   /* Cosmos: etwas mehr Abstand nach unten */
  color: #0b0c10 !important;          /* wie Cosmos-Headline im Light Mode */
  text-wrap: balance !important;
  text-align: center !important;
}

/* 3) Subline: exakt wie Cosmos (Glas-Look, kompakteres Margin) */
.aurora-subtitle{
  font-size: clamp(1.06rem, 1rem + .6vw, 1.22rem) !important; /* Cosmos subline */
  line-height: 1.78 !important;
  letter-spacing: .004em !important;
  text-wrap: pretty !important;

  /* Box-Style (Glas) + kompakteres Spacing wie in Cosmos */
  padding: 1.1rem 1.2rem !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05) !important;
  color:#0f1729 !important;

  max-width: 62rem !important;
  margin: 0 auto 2.6rem !important; /* Cosmos ist kompakter als Aurora */
  text-align:center !important;
}

/* 4) Mobile-Verhalten: KEIN Snippet/T-Switch – immer der volle Subline-Text */
.aurora-subtitle .subtitle-snippet,
.aurora-subtitle .subtitle-t{ display:none !important; }
.aurora-subtitle .subtitle-full{ display:inline !important; }

/* überschreibt Aurora's Mobile/T-Queries vollständig */
@media (max-width: 9999px){
  #aurora-sheet .aurora-subtitle .subtitle-snippet{ display:none !important; }
  #aurora-sheet .aurora-subtitle .subtitle-t{ display:none !important; }
  #aurora-sheet .aurora-subtitle .subtitle-full{ display:inline !important; }
}

/* 5) Dark Mode: wie Cosmos (weiße Headline + heller Glas-Look) */
:root[data-theme="dark"] #aurora-sheet .aurora-title{
  color:#fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
:root[data-theme="dark"] #aurora-sheet .aurora-subtitle{
  color:#e8eeff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 8px rgba(0,0,0,.45) !important;
}

/* Optional: Falls du System-Dark statt data-theme nutzt */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) #aurora-sheet .aurora-title{
    color:#fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
  }
  :root:not([data-theme]) #aurora-sheet .aurora-subtitle{
    color:#e8eeff !important;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 2px 8px rgba(0,0,0,.45) !important;
  }
}
/* HARTE PARITÄT – optionale Extras */
#aurora-sheet .aurora-title,
#aurora-sheet .aurora-subtitle{
  overflow-wrap: anywhere;           /* Fallback, falls text-wrap anders rendert */
  -webkit-text-size-adjust: 100%;    /* iOS Zoom/Text-Scaling stabilisieren */
}

/* Safe-Area neutraler machen (nur wenn dich iOS-Ränder stören) */
#aurora-sheet{
  padding-left:  var(--aurora-gutter);
  padding-right: var(--aurora-gutter);
}

/* Falls du keine doppelte Dark-Logik willst: genau EINE Quelle nutzen */
:root:not([data-theme]) #aurora-sheet{ /* oder umgekehrt ausschließlich data-theme nutzen */ }

/* =======================================
   AETHER-CARD – TYPO & SPACING REFINEMENT
   ======================================= */

/* Basis: gilt für alle Viewports (wird unten noch feinjustiert) */
#aurora-sheet .aether-card{
  padding: 1.4rem 1.5rem 1.6rem !important;
  gap: 0.55rem;                      /* „natürlicher“ Karten-Flow */
}

/* Titel in Karten: etwas ruhiger, sauberer Abstand */
#aurora-sheet .aether-card h3{
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem) !important;
  font-weight: 820 !important;
  margin: 0 0 0.4rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* Microtag: kleiner, klarer Label-Look, mehr Luft nach unten */
#aurora-sheet .aether-card .microtag{
  font-size: 0.78rem !important;
  font-weight: 640 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.75rem !important;
  opacity: 0.9 !important;
}

/* Kurze Snippet-Zeilen (Mobile & Übergang) – harmonisierte Typo */
#aurora-sheet .aether-card .snippet{
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
  margin: 0.05rem 0 0.1rem !important;
}

/* Tablet-Textsnippet (wenn aktiv) – gut lesbare Bodygröße */
#aurora-sheet .aether-card .t-snippet{
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  margin: 0.15rem 0 0.35rem !important;
}

/* Delta-List – mehr Luft & klarere Hierarchie zwischen Lead/Copy */
#aurora-sheet .aether-card .delta-list{
  margin: 0.6rem 0 0.4rem !important;
  gap: 0.55rem !important;
}

#aurora-sheet .aether-card .delta-list li{
  padding: 0.7rem 0 0.85rem !important;
}

#aurora-sheet .aether-card .delta-list .lead{
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.18rem) !important;
  font-weight: 780 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.28 !important;
}

#aurora-sheet .aether-card .delta-list .copy{
  font-size: clamp(0.97rem, 0.95rem + 0.3vw, 1.05rem) !important;
  line-height: 1.65 !important;
  font-weight: 520 !important;
  margin-top: 0.15rem !important;
}

/* Benefit-Line (falls genutzt): leicht über Body, aber unter Headline */
#aurora-sheet .aether-card .benefit-line{
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.22rem) !important;
  line-height: 1.4 !important;
  font-weight: 780 !important;
  margin-top: 1.1rem !important;
}

/* =========
   MOBILE ≤ 699px
   Kompakter, aber lesbar – Fokus auf Headline + 2-Zeilen-Snippet
   ========= */
@media (max-width: 699.98px){
  #aurora-sheet .aether-card{
    padding: 1.05rem 1.1rem 1.2rem !important;
    gap: 0.4rem !important;
  }

  #aurora-sheet .aether-card h3{
    font-size: 1.05rem !important;
    margin: 0 0 0.25rem !important;
  }

  #aurora-sheet .aether-card .snippet{
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
    font-weight: 640 !important;
  }
}

/* =========
   TABLET 700–1239px
   Etwas großzügiger, Fokus auf t-snippet (Story-Ebene)
   ========= */
@media (min-width: 700px) and (max-width: 1239.98px){
  #aurora-sheet .aether-card{
    padding: 1.5rem 1.7rem 1.7rem !important;
    gap: 0.55rem !important;
  }

  #aurora-sheet .aether-card h3{
    font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem) !important;
  }

  #aurora-sheet .aether-card .t-snippet{
    font-size: 1.04rem !important;
    line-height: 1.7 !important;
    margin-top: 0.2rem !important;
  }
}

/* =========
   DESKTOP ≥ 1240px
   Mehr Bühne für Liste & Benefit, leichte Typo-Anhebung
   ========= */
@media (min-width: 1240px){
  #aurora-sheet .aether-card{
    padding: 1.7rem 1.9rem 1.9rem !important;
    gap: 0.65rem !important;
  }

  #aurora-sheet .aether-card h3{
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.8rem) !important;
  }

  #aurora-sheet .aether-card .delta-list{
    margin-top: 0.75rem !important;
  }

  #aurora-sheet .aether-card .delta-list li{
    padding: 0.75rem 0 0.95rem !important;
  }

  #aurora-sheet .aether-card .benefit-line{
    font-size: clamp(1.06rem, 1.01rem + 0.45vw, 1.26rem) !important;
  }
}
/* =======================================
   AETHER-CARD – SPACING FINETUNE
   ======================================= */

#aurora-sheet .aether-card{
  padding: 1.5rem 1.6rem 1.7rem !important;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem !important; /* Grundrhythmus innerhalb der Card */
}

/* ==== Grundaufbau (alle Viewports) ==== */
#aurora-sheet .aether-card h3{
  margin: 0 0 0.3rem !important;
}

#aurora-sheet .aether-card .snippet{
  margin: 0.1rem 0 0.1rem !important;
}

#aurora-sheet .aether-card .t-snippet{
  margin: 0.15rem 0 0.25rem !important;
}

/* Microtag als klarer Trenner vor dem „Body-Content“ */
#aurora-sheet .aether-card .microtag{
  margin: 0.4rem 0 0.5rem !important;
}

/* Liste näher an das Microtag, aber mit Luft zwischen Items */
#aurora-sheet .aether-card .delta-list{
  margin: 0.35rem 0 0.1rem !important;
  row-gap: 0.55rem !important;
}

#aurora-sheet .aether-card .delta-list li{
  padding: 0.6rem 0 0.8rem !important;
}

/* Benefit-Line wieder „am Boden“ mit komfortabler Top-Luft */
#aurora-sheet .aether-card .benefit-line{
  margin-top: auto !important;         /* sitzt am Kartenende */
  padding-top: 0.9rem !important;      /* Abstand zur Liste/Text */
}

/* =======================================
   VIEWPORT-SPEZIFISCHE FINETUNES
   ======================================= */

/* === MOBILE ≤ 699px
   Stack: h3 + snippet
   Eng, aber nicht gequetscht
======================================== */
@media (max-width: 699.98px){
  #aurora-sheet .aether-card{
    padding: 1.1rem 1.1rem 1.25rem !important;
    row-gap: 0.35rem !important;
  }

  #aurora-sheet .aether-card h3{
    margin: 0 0 0.2rem !important;
  }

  #aurora-sheet .aether-card .snippet{
    margin: 0.05rem 0 0 !important;
  }
}

/* === TABLET 700–1239px
   Stack: h3 → t-snippet → microtag
   Etwas luftiger, Story-Fokus auf t-snippet
======================================== */
@media (min-width: 700px) and (max-width: 1239.98px){
  #aurora-sheet .aether-card{
    padding: 1.6rem 1.8rem 1.8rem !important;
    row-gap: 0.55rem !important;
  }

  #aurora-sheet .aether-card h3{
    margin: 0 0 0.3rem !important;
  }

  #aurora-sheet .aether-card .t-snippet{
    margin: 0.2rem 0 0.35rem !important;
  }

  #aurora-sheet .aether-card .microtag{
    margin: 0.4rem 0 0.55rem !important;
  }
}

/* === DESKTOP ≥ 1240px
   Stack: h3 → microtag → delta-list → benefit-line
   Mehr Bühne für Liste, klares Ende nach unten
======================================== */
@media (min-width: 1240px){
  #aurora-sheet .aether-card{
    padding: 1.8rem 1.9rem 1.9rem !important;
    row-gap: 0.6rem !important;
  }

  #aurora-sheet .aether-card h3{
    margin: 0 0 0.35rem !important;
  }

  #aurora-sheet .aether-card .microtag{
    margin: 0.45rem 0 0.45rem !important;
  }

  #aurora-sheet .aether-card .delta-list{
    margin: 0.45rem 0 0.15rem !important;
  }

  #aurora-sheet .aether-card .delta-list li{
    padding: 0.7rem 0 0.9rem !important;
  }

  #aurora-sheet .aether-card .benefit-line{
    padding-top: 1rem !important;
  }
}
/* =======================================
   MICROTAG – corrected spacing (tight top)
   ======================================= */

#aurora-sheet .aether-card .microtag{
  margin-top: 0.1rem !important;  /* Sehr eng an H3 */
  margin-bottom: 0.35rem !important; /* leichte Luft vor Text */
}

/* Mobile noch knapper */
@media (max-width: 699.98px){
  #aurora-sheet .aether-card .microtag{
    margin-top: 0.06rem !important;
    margin-bottom: 0.28rem !important;
  }
}

/* Tablet – minimal strukturgebend */
@media (min-width: 700px) and (max-width: 1239.98px){
  #aurora-sheet .aether-card .microtag{
    margin-top: 0.08rem !important;
    margin-bottom: 0.32rem !important;
  }
}

/* Desktop – Label bewusst subtil, aber sichtbar */
@media (min-width: 1240px){
  #aurora-sheet .aether-card .microtag{
    margin-top: 0.1rem !important;
    margin-bottom: 0.38rem !important;
  }
}
/* MICROTAG – ultra tight top alignment */
#aurora-sheet .aether-card .microtag{
  margin-top: 0 !important;        /* sitzt direkt unterm H3 */
  margin-bottom: 0.32rem !important; /* kleine Luft vorm Text */
  line-height: 1.25 !important;    /* verhindert clipping an H3 */
}

/* Mobile: noch präziser am Headline-Rhythmus */
@media (max-width: 699.98px){
  #aurora-sheet .aether-card .microtag{
    margin-top: -0.02rem !important; /* optisch bündig */
    margin-bottom: 0.25rem !important;
  }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 1239.98px){
  #aurora-sheet .aether-card .microtag{
    margin-top: 0 !important;
    margin-bottom: 0.28rem !important;
  }
}

/* Desktop */
@media (min-width: 1240px){
  #aurora-sheet .aether-card .microtag{
    margin-top: 0 !important;
    margin-bottom: 0.36rem !important;
  }
}









/*Überschrift*/
/* =======================================
   AURORA – Headline & Subline Refinement
   ======================================= */

/* Section-Headline */
#aurora-sheet .aurora-title{
  font-family: var(--font-base) !important;
  font-size: clamp(1.9rem, 1.55rem + 1.9vw, 2.7rem) !important;
  font-weight: 850 !important;           /* etwas ruhiger als 900 */
  letter-spacing: -0.018em !important;
  line-height: 1.08 !important;
  margin: 0 0 0.5rem !important;         /* weniger Luft nach unten */
  text-wrap: balance !important;
  text-align: center !important;
  color: #0b0c10 !important;
}

/* Section-Subline / Copy-Block */
#aurora-sheet .aurora-subtitle{
  font-family: var(--font-base) !important;
  font-size: clamp(1rem, 0.96rem + 0.55vw, 1.16rem) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  letter-spacing: .004em !important;
  text-wrap: pretty !important;

  max-width: 48rem !important;           /* kürzere Zeilen, besser lesbar */
  margin: 0 auto 2.2rem !important;      /* etwas kompakter unter der Headline */

  padding: 0.9rem 1.6rem !important;     /* minimal weniger vertikale Luft */
  border-radius: 14px !important;

  background: linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.05) !important;
  color:#0f1729 !important;
  text-align: center !important;
}

/* Mobile: Headline etwas kleiner, Box kompakter */
@media (max-width: 599.98px){
  #aurora-sheet .aurora-title{
    font-size: 1.8rem !important;
    margin-bottom: 0.4rem !important;
  }

  #aurora-sheet .aurora-subtitle{
    max-width: 100% !important;
    margin-bottom: 1.9rem !important;
    padding: 0.8rem 1.1rem !important;
  }
}

/* Große Screens: etwas mehr Bühne, ohne auszufransen */
@media (min-width: 1200px){
  #aurora-sheet .aurora-title{
    font-size: clamp(2.2rem, 1.9rem + 1.6vw, 2.9rem) !important;
  }

  #aurora-sheet .aurora-subtitle{
    max-width: 50rem !important;
    margin-bottom: 2.4rem !important;
  }
}

/* Dark-Mode: nur Farben/Glas-Look angleichen, Spacing bleibt gleich */
:root[data-theme="dark"] #aurora-sheet .aurora-title{
  color:#fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

:root[data-theme="dark"] #aurora-sheet .aurora-subtitle{
  color:#e8eeff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 2px 8px rgba(0,0,0,.45) !important;
}


/* =======================================
   Subtitle-Varianten nach Viewport
   Handy / Tablet / Desktop
   ======================================= */

/* Basis: alles aus, wir schalten dann gezielt pro Breakpoint an */
#aurora-sheet .aurora-subtitle .subtitle-snippet,
#aurora-sheet .aurora-subtitle .subtitle-t,
#aurora-sheet .aurora-subtitle .subtitle-full{
  display: none !important;
}

/* Handy: bis 699px → kurze Version */
@media (max-width: 699.98px){
  #aurora-sheet .aurora-subtitle .subtitle-snippet{
    display: inline !important;
  }
}

/* Tablet: 700–1199px → mittlere Version */
@media (min-width: 700px) and (max-width: 1199.98px){
  #aurora-sheet .aurora-subtitle .subtitle-t{
    display: inline !important;
  }
}

/* Desktop: ab 1200px → volle Version */
@media (min-width: 1200px){
  #aurora-sheet .aurora-subtitle .subtitle-full{
    display: inline !important;
  }
}
/* =======================================
   FIX: Microtag immer direkt unter der Überschrift
   ======================================= */

#aurora-sheet .aether-card{
  display: flex;
  flex-direction: column;
}

/* Reihenfolge in der Karte definieren */
#aurora-sheet .aether-card h3{
  order: 0;
}

#aurora-sheet .aether-card .microtag{
  order: 1;
  margin-top: 0 !important;
  margin-bottom: 0.32rem !important;
  align-self: flex-start; /* nicht nach unten ziehen */
}

#aurora-sheet .aether-card .snippet,
#aurora-sheet .aether-card .t-snippet{
  order: 2;
}

#aurora-sheet .aether-card .delta-list{
  order: 3;
}

#aurora-sheet .aether-card .benefit-line{
  order: 4;
  margin-top: auto; /* bleibt schön am Kartenende */
}

/* =======================================
   AURORA – CTA-Button & Typo Alignment
   zur neuen CTA-Section (wrf-Styles)
   ======================================= */

/* 1) CTA-/Action-Buttons in Aurora: größere, knackige Schrift
   – orientiert an .charm-cta / .wrf-btn--primary */
#aurora-sheet button,
#aurora-sheet .wrf-btn,
#aurora-sheet .wrf-btn--primary{
  font-family: var(--font-base) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.18rem) !important;
  line-height: 1.28 !important;
  padding: .68rem 1.25rem !important;   /* etwas mehr Bühne für die Typo */
  min-height: 46px !important;          /* gut klickbares Target */
}

/* 2) Section-Headline minimal kräftiger & etwas mehr Luft nach unten */
#aurora-sheet .aurora-title{
  font-size: clamp(2.05rem, 1.7rem + 2.1vw, 2.85rem) !important;
  font-weight: 880 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  margin: 0 0 0.65rem !important;
}

/* 3) Subheadline / Copy-Block: ruhiger, besser lesbare Zeilenlänge */
#aurora-sheet .aurora-subtitle{
  font-size: clamp(1.02rem, 0.98rem + 0.5vw, 1.18rem) !important;
  line-height: 1.7 !important;
  max-width: 46rem !important;            /* etwas schmaler, besser scannbar */
  margin: 0 auto 2.3rem !important;
  padding: 0.95rem 1.8rem !important;
}

/* 4) Card-Headline: leicht größer, klarer Abstand nach unten */
#aurora-sheet .aether-card h3{
  font-size: clamp(1.3rem, 1.1rem + 0.75vw, 1.75rem) !important;
  font-weight: 840 !important;
  line-height: 1.22 !important;
  margin: 0 0 0.45rem !important;
}

/* 5) Microtag: dezentes, aber klar lesbares Label */
#aurora-sheet .aether-card .microtag{
  font-size: .8rem !important;
  font-weight: 680 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: .35rem !important;
  line-height: 2 !important; /* <-- größerer Zeilenabstand */
}

/* 6) Delta-List: etwas engere, aber klare Typo-Hierarchie */
#aurora-sheet .delta-list .lead{
  font-size: clamp(1.04rem, 1rem + 0.35vw, 1.2rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#aurora-sheet .delta-list .copy{
  font-size: clamp(.98rem, .95rem + 0.3vw, 1.06rem) !important;
  line-height: 1.65 !important;
  font-weight: 540 !important;
  margin-top: .18rem !important;
}

/* 7) Benefit-Line: leicht angehoben, wirkt wie „Mini-CTA“ am Kartenende */
#aurora-sheet .aether-card .benefit-line{
  font-size: clamp(1.04rem, 1rem + 0.4vw, 1.24rem) !important;
  font-weight: 800 !important;
  line-height: 1.34 !important;
  margin-top: 1.05rem !important;
}

/* 8) Mobile-Finetune: etwas kompakter, ohne die Hierarchie zu verlieren */
@media (max-width: 599.98px){
  #aurora-sheet .aurora-title{
    font-size: 1.9rem !important;
    margin-bottom: 0.45rem !important;
  }
  #aurora-sheet .aurora-subtitle{
    max-width: 100% !important;
    padding: 0.85rem 1.2rem !important;
    margin-bottom: 2rem !important;
  }
  #aurora-sheet button,
  #aurora-sheet .wrf-btn,
  #aurora-sheet .wrf-btn--primary{
    font-size: 1.02rem !important;
    padding: .62rem 1.1rem !important;
    min-height: 44px !important;
  }
}
/* === FIX: keine abgeschnittenen Unterlängen in der Headline === */
#aurora-sheet .aurora-title .word{
  overflow: visible !important;          /* statt hidden */
  padding-inline: 0.03em !important;     /* mini-Luft links/rechts */
}

#aurora-sheet .aurora-title{
  line-height: 1.14 !important;          /* etwas mehr vertikale Luft */
  padding-bottom: 0.08em !important;     /* Sicherheitsabstand nach unten */
}
/* =========================================
   AURORA TYPO = WRF TYPO
   (ganz unten in aurora.css einfügen)
   ========================================= */

/* 1) Gleiche Grundschrift wie in wrf */
#aurora-sheet,
#aurora-sheet *{
  font-family: var(--wrf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 4) Card-Headline (.aether-card h3) → kleine wrf-Headline */
#aurora-sheet .aether-card h3{
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
  line-height: var(--wrf-lh-tight, 1.15) !important;
  text-wrap: balance !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}



/* 6) Listen-Typo in Karten → an wrf-Body angelehnt */
#aurora-sheet .delta-list .lead{
  font-size: clamp(1.06rem, 1rem + .5vw, 1.18rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.002em !important;
  line-height: 1.28 !important;
}

#aurora-sheet .delta-list .copy{
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem) !important;
  font-weight: 600 !important;
  letter-spacing: .002em !important;
  line-height: var(--wrf-lh-relaxed, 1.75) !important;
}

/* 7) Buttons in Aurora → wie .wrf-btn / .wrf-btn--primary */
#aurora-sheet button,
#aurora-sheet .wrf-btn,
#aurora-sheet .wrf-btn--primary{
  font-weight: 950 !important;
  font-size: 1.12rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}