/* Design-Variante „D-Mode“ (Vorschau v5): Gestaltung wie dmode.one-rep.de – dunkel („Nacht“), Elfenbein-Schrift,
   Cormorant Garamond mit kursiven Akzenten im D-Mode-Verlauf Türkis → Grün, Gold für Hover und Details.
   Mit Klick-Welle wie v4. Wird nach styles.css geladen (siehe werkzeuge/variante.sh). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant.woff2") format("woff2");
  font-style: normal; font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-italic.woff2") format("woff2");
  font-style: italic; font-weight: 300 700; font-display: swap;
}

:root {
  --head-solid: rgba(14, 13, 12, .96);   /* Kopfzeile ohne Weichzeichner, solange sich die Kugel bewegt */
  --ivory: #f4efe7;
  --ink-0: #0e0d0c;
  --ink-2: #171513;
  --ink-3: #221f1c;
  --line-light: rgba(244, 239, 231, .16);
  --muted-light: #a39b90;
  --gold: #c9a36b;
  --dj-a: #1fc2c0;
  --dj-b: #7ad35a;
  --dj-grad: linear-gradient(90deg, var(--dj-a), var(--dj-b));
  --serif: "Cormorant Garamond", "Times New Roman", serif;

  --navy: #f4efe7;          /* Überschriften und Hauptfarbe: Elfenbein */
  --navy-2: #ffffff;
  --teal: #1fc2c0;
  --teal-soft: rgba(31, 194, 192, .12);
  --ink: #f4efe7;
  --muted: #a39b90;
  --line: rgba(244, 239, 231, .16);
  --bg: #0e0d0c;
  --card: #171513;
  --radius: 24px;

  --net-wave: an;
  --pt-style: leuchten;   /* Datenpunkte leuchten wie die Glühwürmchen der Variante NaturGut (v3) */
  --net-1: #1fc2c0; --net-2: #4cca8d; --net-3: #7ad35a; --net-back: #4a4540; --net-hot: #c9a36b;
  --net-lw: 0.9; --net-node: 0.9;
  --pt-a: #d4ad6a; --pt-b: #f0d9ab; --pt-hot: #fff6e3;   /* Leuchtpunkte in Gold (Schein + Spur, Kern, Mitte) */
  --net-bg:
    radial-gradient(circle at 50% 50%, rgba(31,194,192,.16) 0, rgba(122,211,90,.06) calc(var(--sr) * 1.1), rgba(122,211,90,0) calc(var(--sr) * 2.1)),
    linear-gradient(180deg, #0e0d0c 0%, #161411 100%);
}

body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--ink-0); }
a { color: var(--ivory); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: .98; color: var(--ivory); }
h1 { font-size: clamp(2.8rem, 6.4vw, 5.8rem); }
h2 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
h3 { color: var(--ivory); }
.accent {
  font-style: italic;
  background: var(--dj-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Logo hell auf dunkel, Pixel im D-Mode-Verlauf */
#mark rect, #mark circle { fill: #f4efe7; }
#mark path { stroke: #f4efe7; }
#mark .mark-px rect { fill: #1fc2c0; }
#mark .mark-px rect:nth-child(2n), #mark > circle { fill: #7ad35a; }

/* Kopfzeile wie die D-Mode-Navigation: dunkel, unscharf hinterlegt */
.site-header { background: rgba(14, 13, 12, .7); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(244, 239, 231, .1); }
.brand { color: var(--ivory); }
.brand-text b { letter-spacing: .22em; font-size: 1rem; }
.brand-text small { color: var(--muted-light); }
.tabs a { color: var(--ivory); font-size: .9rem; }
.tabs a:hover { background: rgba(244, 239, 231, .08); }
.tabs a[aria-current="page"] { background: var(--ivory); color: var(--ink-0); }
.net-btn { background: transparent; border-color: var(--line-light); color: var(--ivory); }
.net-btn:hover, .is-overview .net-btn:not(.theme-btn) { border-color: var(--gold); color: var(--gold); }

/* Abschnitte: dunkle Karte, oben der D-Mode-Verlauf */
.js .panel, html:not(.js) .panel { background: var(--ink-2); border: 1px solid var(--line-light); }
.js .panel { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.js .panel::before { height: 3px; background: var(--dj-grad); }
.eyebrow { color: var(--muted-light); font-size: 12px; letter-spacing: .18em; }
.lead { color: #cfc7bb; }
p { color: #ddd6cb; }

.btn { background: transparent; border-color: var(--line-light); color: var(--ivory); min-height: 52px; padding: 0 26px; }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-0); box-shadow: none; transform: none; }
.btn.primary { background: var(--ivory); border-color: var(--ivory); color: var(--ink-0); }
.btn.primary:hover { background: var(--gold); border-color: var(--gold); }

.facts li { background: var(--ink-3); border-color: var(--line-light); }
.facts b { color: var(--ivory); }
.facts span { color: var(--muted-light); }
.card { background: var(--ink-3); border-color: var(--line-light); }
.card:hover { border-color: rgba(201, 163, 107, .5); transform: translateY(-4px); }
.card p { color: var(--muted-light); }
.card a { color: var(--gold); }
.card .dot { width: 22px; height: 4px; border-radius: 2px; background: var(--dj-grad); box-shadow: none; }
.tag { color: var(--gold); }
.ticks li::before { width: 12px; height: 1.5px; border-radius: 0; top: .75em; background: var(--gold); box-shadow: none; }
.note, .legal-links, .form-note { color: var(--muted-light); }

.form { background: var(--ink-3); border-color: var(--line-light); }
.form input, .form textarea, .form select { background: var(--ink-0); border-color: var(--line-light); color: var(--ivory); }
.form input:focus, .form textarea:focus { outline-color: var(--dj-a); }

/* Etiketten auf der Kugel: dunkle Pillen, aktive Seite im D-Mode-Verlauf */
.hit .lab { background: rgba(23, 21, 19, .92); color: var(--ivory); border: 1px solid var(--line-light); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.hit .lab::after { border-color: var(--dj-a); }
.hit.is-current .lab { background: var(--dj-grad); color: var(--ink-0); border-color: transparent; }

.js .port { background: var(--ink-2); border-color: var(--line-light); color: var(--ivory); }
.js .port:hover { border-color: var(--gold); color: var(--gold); box-shadow: none; }
.port b { color: var(--dj-a); }

.js .hint { background: rgba(23, 21, 19, .85); border-color: var(--line-light); color: var(--muted-light); }
kbd { background: var(--ink-3); border-color: var(--line-light); color: var(--ivory); }
.is-overview .stage { cursor: pointer; }