/* ============================================================
   BASE.CSS — Light theme · Aqua accent
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #f5f4f0;
  --bg1:    #eeedea;
  --bg2:    #e4e3df;
  --bg3:    #d8d7d3;
  --line:   rgba(17,17,16,0.08);
  --line2:  rgba(17,17,16,0.15);
  /* Aqua in drei Abstufungen. Grund: #00bfb3 auf dem hellen Hintergrund
     erreicht nur 2,1:1 Kontrast — als Text ist das nicht lesbar (WCAG AA
     verlangt 4,5:1). Deshalb bleibt --a rein dekorativ, --a2 traegt grosse
     Schaupunkte und --a-text alles, was gelesen werden muss. */
  --a:      #00bfb3;   /* Dekoration: Punkte, Linien, Flaechentoene   2,1:1 */
  --a2:     #009e94;   /* Grosse Schrift ab 24px, Wortmarke           3,0:1 */
  --a-text: #00746c;   /* Text, Labels, gefuellte Buttons             4,8:1 */
  --a-text2:#00615b;   /* Hover auf gefuellten Buttons                7,3:1 */
  --txt:    #111110;
  --muted:  #4a4a45;
  --muted2: #63635d;   /* war #6e6e68 — auf --bg1 nur 4,4:1, jetzt 5,2:1 */

  /* Dunkle Abschnitte (About, Vorhang, Leitthemen). Nur hier definiert:
     stuenden die Werte in jeder Datei einzeln, reicht eine Abweichung,
     und am Vorhang entsteht eine sichtbare Kante. */
  --dk-bg:    #111110;   /* gleich --txt: die Tinte wird zur Flaeche */
  --dk-panel: #191918;
  --dk-txt:   #f5f4f0;   /* 18,9:1 */
  --dk-muted: #9d9d96;   /*  6,9:1 */
  --dk-ac:    #00bfb3;   /*  8,2:1 */
  --dk-line:  rgba(245, 244, 240, 0.12);
  --dk-line2: rgba(245, 244, 240, 0.22);
  --serif:  'DM Serif Display', 'Instrument Serif', Georgia, serif;
  --sans:   'Space Grotesk', 'Geist', sans-serif;
}

/* scroll-padding: Die Navigation ist fest und 75 px hoch. Ohne diesen
   Rand landet ein Sprungziel unter ihr, die Abschnittsmarke verschwindet. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a    { text-decoration: none; color: inherit; }
button { font-family: var(--sans); background: none; border: none; color: inherit; }
img, svg { display: block; }

/* Systemcursor nur dort ausblenden, wo cursor.js das Fadenkreuz
   tatsächlich aktiviert hat (Maus vorhanden, Skript geladen). */
.custom-cursor body,
.custom-cursor a,
.custom-cursor button,
.custom-cursor .pc { cursor: none; }

/* Nur für Screenreader und Suchmaschinen — optisch nicht vorhanden,
   aber im Gegensatz zu display:none weiterhin vorlesbar. */
/* ── Logo: vorerst nur der Name ──
   Steht hier statt in nav.css, weil auch Impressum und Datenschutz
   ihn in der Kopfzeile zeigen und nav.css dort nicht geladen wird. */
.logo {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--txt); font-family: var(--serif); font-size: 1.2rem; line-height: 1;
  letter-spacing: -.005em; transition: color .3s;
}

/* Sprunglink fuer Tastatur: erst sichtbar, wenn er Fokus bekommt */
.skip {
  position: fixed; top: .75rem; left: .75rem; z-index: 10000;
  padding: .6rem 1rem; border-radius: 3px;
  background: var(--txt); color: var(--bg); font-size: .85rem;
  transform: translateY(-150%); transition: transform .2s;
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible { outline: 2px solid var(--a-text); outline-offset: 3px; }

section { padding: 4rem 3rem; }

.s-tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-text);
  margin-bottom: 0.8rem;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--txt);
}
h2 i { font-style: italic; color: var(--muted2); }

.div { height: 1px; background: var(--line); margin: 0 3rem; }

.btn-solid {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.8rem;
  background: var(--a-text); color: #fff;
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  border-radius: 3px; cursor: none;
  transition: background .2s, transform .2s;
}
.btn-solid:hover { background: var(--a-text2); transform: translateY(-2px); }

.btn-line {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.8rem;
  border: 1px solid var(--line2); color: var(--muted);
  font-family: var(--sans); font-size: .85rem;
  border-radius: 3px; cursor: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-line:hover { border-color: var(--a-text); color: var(--a-text); transform: translateY(-2px); }

.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s; }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }

@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideUp  { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:none; } }
@keyframes blink    { 0%,100% { opacity:1; } 50% { opacity:.2; } }