/* =========================================================
   Aktueller Waitlist-Look (Stand 5.11.2026, aus Numa-Waitlist/web/css/home.min.css und sub.css):
   tiefes Blau #0D2238 mit wandernden Lichtern (brand.css .bg) und Korn,
   weisse Schrift, helles Blau #8FD3FF als Akzent, Liquid Glass,
   weisse Pill-Knoepfe mit schwarzem Kreis. Liegt ueber info.css.
   ========================================================= */

:root {
  --soft: rgba(255, 255, 255, .78);
  --quiet: rgba(255, 255, 255, .62);
  --hair: rgba(255, 255, 255, .14);
  --sky-ink: #8FD3FF;
  --mint: #8AE3D8;
  --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .08)); /* taste-skill-ignore: Glas-Koerper wie Waitlist */
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .16), inset 0 0 0 .5px rgba(255, 255, 255, .28), inset 10px 12px 22px -14px rgba(255, 255, 255, .5), inset -10px -12px 22px -14px rgba(255, 255, 255, .26), 0 1px 2px rgba(0, 6, 24, .25), 0 26px 52px -12px rgba(0, 6, 24, .55); /* taste-skill-ignore: Glasdicke wie Waitlist */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22); /* taste-skill-ignore: Glaskante */
}
html { background: none; } /* Body-Farbe geht auf die Leinwand, damit der bewegte Verlauf (.bg, z-index -2) sichtbar bleibt */
body { background: #0D2238; color: #FFFFFF; color-scheme: dark; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  opacity: .42; mix-blend-mode: overlay;
}
::selection { background: var(--sky-ink); color: var(--ink); }
:focus-visible { outline-color: #FFFFFF; }

/* ---------- Glas ---------- */

.card, .tile, .study, .chest, .chart, .pool, .note, .note--strong, .faq details, .facts, .stats li, .compare-wrap, .ticket, .formula span:not(.op) {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(125%) brightness(1.05);
  backdrop-filter: blur(8px) saturate(125%) brightness(1.05);
  box-shadow: var(--glass-shadow);
  color: #FFFFFF;
}
.menu-btn, .lang, .phead__jump a, .help a, .card__icon, .tag, .sources li::before {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
  box-shadow: var(--glass-edge);
  color: #FFFFFF;
}
.card, .tile, .study, .chest, .chart, .pool, .facts, .stats li, .ticket, .note { position: relative; }
.card::before, .tile::before, .study::before, .chest::before, .chart::before, .pool::before, .facts::before, .stats li::before, .ticket::before, .note::before {
  content: ""; position: absolute; inset: 0; z-index: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, #FFFFFF, rgba(255, 255, 255, .3) 18%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .35) 84%, rgba(255, 255, 255, .9)); /* taste-skill-ignore: Lichtkante wie Waitlist */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card > *, .study > *, .chest > *, .chart > *, .pool > *, .ticket > *, .note > * { position: relative; z-index: 1; }
.tile > :not(.tile__go) { position: relative; z-index: 1; }
.tile__go { z-index: 2; }
.facts > li { position: relative; z-index: 1; }

/* ---------- Knoepfe: weiss mit Tinte, sekundaer als Glas ---------- */

.btn { background: #FFFFFF; color: var(--ink); }
.btn__icon { background: var(--ink); color: #FFFFFF; }
@media (hover: hover) { .btn:hover { background: #E8EEF6; } }
.btn--light, .btn--ghost {
  background: var(--glass-bg); color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px) saturate(125%); backdrop-filter: blur(8px) saturate(125%);
  box-shadow: var(--glass-edge);
}
.btn--light .btn__icon, .btn--ghost .btn__icon { background: #FFFFFF; color: var(--ink); }
@media (hover: hover) { .btn--light:hover, .btn--ghost:hover { background: rgba(255, 255, 255, .16); } }
.link { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .4); }

/* ---------- Kopf ---------- */

.brand, .menu-btn { color: #FFFFFF; }
.lang a { color: #FFFFFF; }
.lang a[aria-current="true"] { background: #FFFFFF; color: var(--ink); }
@media (max-width: 1099px) {
  .top.is-open, .nav.is-open { background: #0B1B30; }
  .nav__list a { border-bottom-color: var(--hair); color: #FFFFFF; }
  .nav__list a[aria-current="page"] { color: var(--sky-ink); }
}
@media (min-width: 1100px) {
  .nav__list a { color: #FFFFFF; }
  .nav__list a:hover { background: rgba(255, 255, 255, .12); }
  .nav__list a[aria-current="page"] { background: #FFFFFF; color: var(--ink); }
}

/* ---------- Erster Screen und Seitenkoepfe: keine Flaeche ---------- */

.field { background: none; color: #FFFFFF; }
.field__cols i { border-right-color: rgba(255, 255, 255, .07); }
.hero__lead, .phead__lead { color: rgba(255, 255, 255, .74); }
.hero__price { color: var(--soft); }
.hero__price b { color: #FFFFFF; }
.hero__h1, .phead h1, .h2, .tile__title, .band__big, .foot__big { font-weight: 700; }
.phead__eyebrow { color: var(--soft); }
.phead__eyebrow::before, .phead__eyebrow::after { color: var(--sky-ink); }
.phead h1 em, .h2 em, .sec--night .h2 em { color: var(--sky-ink); font-weight: 300; }
.phead__jump a:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Abschnitte ohne eigene Flaeche ---------- */

.sec, .sec--alt, .sec--sky, .sec--night { background: none; color: #FFFFFF; }
.eyebrow, .sec--night .eyebrow { color: var(--quiet); }
.eyebrow::before, .eyebrow::after, .sec--night .eyebrow::before, .sec--night .eyebrow::after { color: var(--sky-ink); }
.lead, .sec--night .lead { color: var(--soft); }
.mute, .sec--night .mute { color: var(--quiet); }

.ticks li::before { background-color: var(--sky-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E"); }

.card p, .sec--night .card p, .tile__text, .tile--blue .tile__text, .tile--night .tile__text { color: var(--quiet); }
.card__num, .sec--night .card__num, .tile__num, .tile--blue .tile__num, .tile--night .tile__num { color: var(--sky-ink); }
.tile, .tile--blue, .tile--night { color: #FFFFFF; }
.tile--blue { background: linear-gradient(155deg, rgba(143, 211, 255, .3), rgba(143, 211, 255, .08) 50%, rgba(255, 255, 255, .06)); } /* taste-skill-ignore: Glas mit Blaustich */
.tile__go, .tile--night .tile__go { border-radius: 14px 0 var(--r) 0; background: #FFFFFF; color: var(--ink); }
@media (hover: hover) { .tile:hover .tile__go { background: var(--sky-ink); } }

.stats li { padding: 16px 16px 14px; border-radius: 20px; }
.stats b::before, .stats b::after, .sec--night .stats b::before, .sec--night .stats b::after { color: var(--sky-ink); }
.stats span, .sec--night .stats span { color: rgba(255, 255, 255, .68); }

.ticket__label, .ticket__was { color: var(--quiet); }
.facts li { border-bottom-color: var(--hair); }
.facts .k { color: var(--quiet); }
.facts .v { color: #FFFFFF; }

.timeline li::before { background: rgba(255, 255, 255, .2); }
.timeline li::after { background: #FFFFFF; color: var(--ink); }
.timeline span { color: var(--soft); }

.faq summary { color: #FFFFFF; }
.faq summary::after { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { background-color: var(--sky-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq__a { color: var(--soft); }

.photo { background: #0A1A2E; }
.photo figcaption { background: rgba(11, 27, 48, .8); color: #FFFFFF; }
.credit, .credit a { color: var(--quiet); }
.mock-cap, .sec--night .mock-cap { color: var(--quiet); }

.chest dl { border-top-color: var(--hair); }
.chest dt, .chest__rule small { color: var(--quiet); }
.chest--common .chest__tag { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.chest--epic .chest__tag { background: rgba(196, 160, 255, .22); color: #E3D2FF; }
.chest--legend .chest__tag { background: rgba(247, 205, 90, .2); color: #FBE3A0; }

.chart text { fill: rgba(255, 255, 255, .7); }
.chart .lbl-strong { fill: #FFFFFF; }
.chart line { stroke: rgba(255, 255, 255, .14); }
.chart path[stroke="#22648C"] { stroke: var(--sky-ink); }
.chart path[stroke="#9C9DA2"] { stroke: rgba(255, 255, 255, .45); }
.chart circle { fill: var(--sky-ink); }
.chart figcaption { color: var(--quiet); }

.pool__bar { background: rgba(255, 255, 255, .1); }
.pool__bar span:last-child { color: #FFFFFF !important; }
.pool__legend { color: var(--quiet); }

.formula span.is-key, .sec--night .formula span.is-key { background: #FFFFFF; color: var(--ink); box-shadow: none; }
.formula span.op { color: var(--quiet); }

.note a, .note--strong a { color: #FFFFFF; }
.help a span { color: var(--soft); }
.help a:hover { background: rgba(255, 255, 255, .16); }

.study__src { border-top-color: var(--hair); color: var(--quiet); }
.study__src a { color: #FFFFFF; }
.tag--corr { color: #FBE3A0; }
.tag--cause { color: #A8F0C6; }

.compare th, .compare td { border-bottom-color: var(--hair); }
.compare thead th, .compare tbody th, .compare thead th:first-child { background: #12305A; color: #FFFFFF; }
.compare tbody th { color: var(--soft); }
.compare thead th.is-numa { background: var(--sky-ink); color: var(--ink); }
.compare td.is-numa { background: rgba(143, 211, 255, .12); }
.compare .na { color: rgba(255, 255, 255, .5); }
.compare sup a { color: var(--sky-ink); }
.scroll-hint { color: var(--quiet); }
.sources { color: var(--quiet); }
.sources a { color: #FFFFFF; }

.legal p, .legal ul { color: var(--soft); }

/* ---------- Fuss wie Waitlist: keine Flaeche ---------- */

.foot { background: none; color: var(--quiet); }
.foot__big { color: #FFFFFF; }
.foot__big span:last-child { color: var(--sky-ink); font-weight: 300; }
.foot__handle, .foot__h, .foot__mail a { color: #FFFFFF; }
@media (hover: hover) { .foot__handle:hover { color: var(--sky-ink); } }
.foot ul a { color: var(--quiet); }
.foot ul a:hover { color: #FFFFFF; }
.foot__meta { border-top-color: var(--hair); }

.skip { background: #FFFFFF; color: var(--ink); }

/* Alte Flaechenfarben je Abschnitt aus info.css aufheben */
.sec--alt .card, .sec--sky .card, .sec--night .card { background: var(--glass-bg); color: #FFFFFF; }
.screen--dark { background: #0A1626; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } /* taste-skill-ignore: Bildschirmkante */

/* Titel in Karten weiss (".card p" hat sonst Vorrang) */
.card p.card__title, .sec--night .card p.card__title { color: #FFFFFF; }

/* Dritte Farbe im Pool-Diagramm hebt sich vom Blau ab */
.pool__bar span:nth-child(3) { background: var(--sky-ink) !important; color: var(--ink); }
.pool__legend span:nth-child(3) i { background: var(--sky-ink) !important; }