/* Designvorschlag „Kristall“ (26.10.2026): Textdarstellung wie in der Referenz (AI Projekt/vorlagen/referenz/next-horizon) –
   schwarze, ruhige Flächen, kristallweiße Schrift in Inter, weiße Knöpfe. Weltall, Erde, Lichtstrom und Porträt bleiben.
   Wird auf allen öffentlichen Seiten als Überlagerung nach den Seitenstilen (index.html bzw. nh.css) geladen.
   Zurück zum vorherigen Look: den <link> auf kristall.css entfernen. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-wght-normal.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-ext-wght-normal.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; }

:root {
  --void: #050506;                          /* tiefes Schwarz statt Nachtblau */
  --deep: #0b0c0f;
  --ice: #ffffff;                           /* Überschriften: kristallweiß */
  --text: #c6cbd3;                          /* Fließtext: neutrales Hellgrau */
  --mist: #8d939d;                          /* sekundär */
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .18);
  --glass: rgba(12, 13, 16, .86);           /* Karten: fast schwarz, kaum durchscheinend */
  --surface: rgba(12, 13, 16, .86);         /* dasselbe für die Unterseiten (nh.css) */
  --surface-solid: #0c0d10;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
body { font-size: 16px; letter-spacing: -.003em; }

/* Überschriften: kräftig, reinweiß, leicht gesperrt (wie Referenz) */
h1, h2, h3 { color: #fff; font-weight: 700; }
h2 { font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: 0; }
/* Hervorhebungen in Überschriften: statt Blauverlauf ein kristalliner Weiß-Silber-Verlauf */
h2 em, em.hl, .hl, blockquote span {
  background-image: linear-gradient(180deg, #ffffff 25%, #d7dde6 70%, #aeb6c2) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; text-shadow: none !important; }
blockquote { font-weight: 600 !important; letter-spacing: .01em; color: #fff; }
.wordmark { font-weight: 700; letter-spacing: .01em; }
.tagline { color: #e9ecf1; letter-spacing: .42em; }
.claim { font-weight: 600 !important; }
.lead, p { color: var(--text); }

/* Kleine Überschriften (Eyebrows): neutralgrau, ohne Blau */
.eyebrow { color: var(--mist); font-weight: 600; letter-spacing: .22em; }
.eyebrow::before { background: rgba(255, 255, 255, .35); }

/* Knöpfe: weiß gefüllt mit schwarzer Schrift, zweiter Knopf weiß umrandet */
.btn { background: #fff; color: #0a0a0b; border-color: #fff; box-shadow: none; font-weight: 600; }
.btn:hover { background: #e9ecf0; box-shadow: 0 0 28px rgba(255, 255, 255, .22); }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }

/* Karten: ruhige dunkle Flächen, feine graue Ränder, kein Blauschimmer */
.card { background: var(--glass); border-color: var(--line); }
.card::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent) !important; opacity: .35; }
a.card:hover, .card.hover:hover { border-color: rgba(255, 255, 255, .28); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9); }
.chips li { color: #d6dae1; border-color: var(--line-strong); }

/* Kopfzeile, Navigation, Abschnittsanzeige */
header.scrolled, header.menu-open { background: rgba(5, 5, 6, .86); }
header nav a { color: #b9bec7; }
header nav a:hover { color: #fff; }
.rail a.on { color: #fff; }
.rail a::after { background: #fff; }

/* Zitat: tiefschwarzer, weicher Grund hinter dem Text – das Weiß wirkt dadurch kristalliner */
.quote::before { inset: -18% -22% !important; background: radial-gradient(closest-side, rgba(0, 0, 0, .92), rgba(0, 0, 0, .7) 55%, transparent) !important; }

/* Porträt: eher schwarz schattiert – weniger Blau, tiefere Schatten, Halo neutral statt blau */
/* heller als im ersten Versuch (26.10.: „zu dunkel“): Gesicht klar, nur das Blau zurückgenommen, Umgebung bleibt schwarz */
.portrait img { filter: grayscale(.5) brightness(1.22) contrast(1.08) drop-shadow(0 0 22px rgba(0, 0, 0, .6)) !important; }
.portrait::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06) 50%, transparent) !important; }
/* Porträt läuft nach unten früher und weicher in Schwarz aus (Maske am Bild – keine sichtbaren Kanten) */
.portrait img { -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .6) 78%, transparent 96%) !important;
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .6) 78%, transparent 96%) !important; }
/* Planetenbogen hinter dem Porträt dunkler, kein blauer Kantenschein */
.vision-horizon::before { background: radial-gradient(closest-side, #050608 92%, transparent 100%) !important; box-shadow: 0 -2px 0 rgba(255, 255, 255, .22), 0 -18px 60px rgba(255, 255, 255, .06) !important; }

/* ---------- Unterseiten-Kopf (Praxisbeispiele, Impressum, Datenschutz) ---------- */
/* Erde tiefer und dunkler, Text liegt links auf Schwarz statt auf dem hellen Sonnenaufgang */
.sub-hero::before { background: linear-gradient(90deg, rgba(5, 5, 6, .9) 0%, rgba(5, 5, 6, .55) 55%, rgba(5, 5, 6, .25) 100%),
  linear-gradient(180deg, rgba(5, 5, 6, .95) 0%, rgba(5, 5, 6, .55) 55%, rgba(5, 5, 6, .35) 78%, var(--void) 100%), url(earth-hero.jpg) center 92% / cover no-repeat !important; }
@media (max-width: 700px) { .sub-hero::before { background: linear-gradient(180deg, rgba(5, 5, 6, .95) 0%, rgba(5, 5, 6, .7) 60%, rgba(5, 5, 6, .45) 82%, var(--void) 100%), url(earth-hero-mobile.jpg) center 95% / cover no-repeat !important; } }
.sub-hero .note { border-left-color: rgba(255, 255, 255, .45); }
.crumb a { color: #fff; }

/* ---------- Praxisbeispiele: Blau- und Goldtöne durch Schwarz/Kristallweiß ersetzen (Videos unverändert) ---------- */
.tabs { background: rgba(10, 11, 14, .94); border-color: var(--line); }
.tab b { color: var(--mist); font-family: var(--font-body); font-weight: 600; letter-spacing: .12em; }
.tab span { font-family: var(--font-body); font-weight: 600; }
.tab:hover { background: rgba(255, 255, 255, .05); }
.tab[aria-selected="true"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 255, 255, .06); }
.tab[aria-selected="true"] b { color: #fff; }
.tag { color: #d6dae1; border-color: var(--line-strong); font-family: var(--font-body); font-weight: 600; }
.figures dd { font-family: var(--font-body); font-weight: 700; }
.figures s { text-decoration-color: rgba(255, 255, 255, .55); }
.block > h3 { font-weight: 700; }
.flow::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
.flow strong { font-family: var(--font-body); font-weight: 600; }
.flow li::before { color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 0 5px rgba(255, 255, 255, .04), 0 0 14px rgba(255, 255, 255, .12); font-family: var(--font-body); font-weight: 600; }
/* Aufzählungspunkte als kleine Funkelsterne wie auf der Startseite */
.checks li::before { width: 1rem; height: 1rem; margin-top: .32rem; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0-10.5C.7-3.2 3.2-.7 10.5 0 3.2.7.7 3.2 0 10.5-.7 3.2-3.2.7-10.5 0-3.2-.7-.7-3.2 0-10.5Z' fill='%23050506' stroke='%23f4f7fb' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
th { background: rgba(255, 255, 255, .03); font-family: var(--font-body); font-weight: 600; }
td.after { color: #fff; }
.cta { background: linear-gradient(120deg, rgba(255, 255, 255, .05), rgba(10, 11, 14, .92) 55%), #0b0c0f; border-color: var(--line-strong); }
.cta::after { box-shadow: 0 -2px 0 rgba(255, 255, 255, .3), 0 -18px 50px rgba(255, 255, 255, .06); }
.cta strong { font-family: var(--font-body); font-weight: 700; }
.case-nav a { color: #fff; }
.case-nav a:hover { color: #d6dae1; }

/* Formular */
input, select, textarea { background: #0b0c0f !important; border-color: var(--line-strong) !important; color: #fff !important; }
label { color: #e6e8ec; }