/* Design-Variante „D-Mode hell“ (Vorschau v6): Gegenstück zu v5 wie der helle „Tag“-Teil von dmode.one-rep.de –
   Elfenbein und Papier, Schrift fast schwarz, Cormorant Garamond mit kursiven Akzenten im (etwas dunkleren)
   D-Mode-Verlauf Türkis → Grün, Gold für Hover. Mit Klick-Welle. Wird nach styles.css geladen. */
@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(244, 239, 231, .97);   /* Kopfzeile ohne Weichzeichner, solange sich die Kugel bewegt */
  --ivory: #f4efe7;
  --paper: #ebe4d8;
  --ink-0: #0e0d0c;
  --line-dark: rgba(14, 13, 12, .14);
  --muted-dark: #6f6860;
  --gold: #c9a36b;
  --dj-a: #17a3a1;          /* D-Mode-Verlauf, auf hellem Grund etwas dunkler für den Kontrast */
  --dj-b: #5fb544;
  --dj-grad: linear-gradient(90deg, var(--dj-a), var(--dj-b));
  --serif: "Cormorant Garamond", "Times New Roman", serif;

  --navy: #0e0d0c;
  --navy-2: #000;
  --teal: #17a3a1;
  --teal-soft: rgba(23, 163, 161, .1);
  --ink: #0e0d0c;
  --muted: #6f6860;
  --line: rgba(14, 13, 12, .14);
  --bg: #f4efe7;
  --card: #fbf8f3;
  --radius: 24px;

  --net-wave: an;
  --pt-style: leuchten;   /* Datenpunkte leuchten wie die Glühwürmchen der Variante NaturGut (v3) */
  --net-1: #17a3a1; --net-2: #33ab78; --net-3: #5fb544; --net-back: #d6cdbf; --net-hot: #b88a4a;
  --net-lw: 0.9; --net-node: 0.9;
  --pt-a: #c9962f; --pt-b: #9a6b1f; --pt-hot: #fff4d6;   /* Leuchtpunkte in Gold, auf hellem Grund etwas kräftiger (Schein + Spur, Kern, Mitte) */
  --net-bg:
    radial-gradient(circle at 50% 50%, rgba(23,163,161,.12) 0, rgba(95,181,68,.06) calc(var(--sr) * 1.1), rgba(95,181,68,0) calc(var(--sr) * 2.1)),
    linear-gradient(180deg, #f6f2eb 0%, #ebe4d8 100%);
}

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

/* Logo in Tinte, Pixel im D-Mode-Verlauf */
#mark rect, #mark circle { fill: #0e0d0c; }
#mark path { stroke: #0e0d0c; }
#mark .mark-px rect { fill: #17a3a1; }
#mark .mark-px rect:nth-child(2n), #mark > circle { fill: #5fb544; }

/* Kopfzeile: hell, unscharf hinterlegt; aktiver Reiter als dunkle Pille */
.site-header { background: rgba(244, 239, 231, .78); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-dark); }
.brand { color: var(--ink-0); }
.brand-text b { letter-spacing: .22em; font-size: 1rem; }
.brand-text small { color: var(--muted-dark); }
.tabs a { color: var(--ink-0); font-size: .9rem; }
.tabs a:hover { background: rgba(14, 13, 12, .06); }
.tabs a[aria-current="page"] { background: var(--ink-0); color: var(--ivory); }
.net-btn { background: transparent; border-color: var(--line-dark); color: var(--ink-0); }
.net-btn:hover, .is-overview .net-btn:not(.theme-btn) { border-color: var(--gold); color: #8a6a3a; }

/* Abschnitte: Papierkarte, oben der D-Mode-Verlauf */
.js .panel, html:not(.js) .panel { background: var(--card); border: 1px solid var(--line-dark); }
.js .panel { box-shadow: 0 30px 80px -30px rgba(14, 13, 12, .25); }
.js .panel::before { height: 3px; background: var(--dj-grad); }
.eyebrow { color: var(--muted-dark); font-size: 12px; letter-spacing: .18em; }
.lead { color: #3a3631; }

.btn { background: transparent; border-color: var(--line-dark); color: var(--ink-0); 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(--ink-0); border-color: var(--ink-0); color: var(--ivory); }
.btn.primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-0); }

.facts li { background: var(--paper); border-color: var(--line-dark); }
.facts b { color: var(--ink-0); }
.facts span { color: var(--muted-dark); }
.card { background: #fff; border-color: var(--line-dark); }
.card:hover { border-color: rgba(201, 163, 107, .7); transform: translateY(-4px); }
.card p { color: var(--muted-dark); }
.card a { color: #8a6a3a; }
.card .dot { width: 22px; height: 4px; border-radius: 2px; background: var(--dj-grad); box-shadow: none; }
.tag { color: #8a6a3a; }
.ticks li::before { width: 12px; height: 1.5px; border-radius: 0; top: .75em; background: var(--gold); box-shadow: none; }

.form { background: var(--paper); border-color: var(--line-dark); }
.form input, .form textarea, .form select { background: #fff; border-color: var(--line-dark); }
.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: var(--ink-0); color: var(--ivory); box-shadow: 0 10px 30px -10px rgba(14, 13, 12, .5); }
.hit .lab::after { border-color: var(--dj-a); }
.hit.is-current .lab { background: var(--dj-grad); color: var(--ink-0); }

.js .port { background: var(--card); border-color: var(--line-dark); color: var(--ink-0); }
.js .port:hover { border-color: var(--gold); color: #8a6a3a; box-shadow: none; }
.port b { color: var(--dj-a); }

.js .hint { background: rgba(251, 248, 243, .88); border-color: var(--line-dark); color: var(--muted-dark); }
kbd { background: #fff; border-color: var(--line-dark); }
.is-overview .stage { cursor: pointer; }