/* helmreich.gmbh - Gestaltung "Tinte auf Papier"
   Hell und dunkel ueber dieselben Token: Systemeinstellung
   (prefers-color-scheme) oder manuelle Wahl per data-thema. Keine externen
   Ressourcen.
   Aufbau: Schriften, Tokens, Basis, Hilfsklassen, Netz, Thema-Schalter,
   Rechtliches, Fusszeile, Fehlerseite, schmale Fenster, reduzierte Bewegung. */

/* ---------- Schriften (selbst gehostet, variable woff2) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/source-sans-3.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --papier: #F5F1E8;
  --tinte: #2B2F36;
  --messing: #B08D57;
  --text-2: #5C616B;
  --linie: rgba(43, 47, 54, 0.38);
  --f-antiqua: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --w-spalte: 68ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

/* Dunkelmodus: die Tokennamen bleiben gleich, nur ihre Werte wechseln, damit
   alle vorhandenen Regeln (Netz, Halo, Fusszeile, Fokusringe) unveraendert
   mitgehen. Erst die Systemeinstellung (nur wirksam ohne manuelle Wahl
   "hell"), danach die manuelle Wahl per data-thema (js/thema.js), die die
   Systemeinstellung in beide Richtungen uebersteuert. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --papier: #1B1E23;
    --tinte: #ECE6D9;
    --messing: #C4A06A;
    --text-2: #A9AEB6;
    --linie: rgba(236, 230, 217, 0.30);
  }
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #1B1E23;
  --tinte: #ECE6D9;
  --messing: #C4A06A;
  --text-2: #A9AEB6;
  --linie: rgba(236, 230, 217, 0.30);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

img, svg { display: block; max-width: 100%; }

/* Fliesstext-Links bleiben Tinte (Kontrast ueber 10:1); der Messing-Akzent
   sitzt in der Unterstreichung, nicht in der Schriftfarbe. */
a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--ease);
}
a:hover { text-decoration-color: var(--messing); text-decoration-thickness: 2px; }

/* Sichtbarer Fokusring in Tinte: hoher Kontrast auf Papier, klassischer Strich.
   Die Knoten im Netz haben weiter unten ihren eigenen Ring. */
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--f-antiqua);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; margin-top: 2rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

/* Erstes fokussierbares Element: liegt ausserhalb des Sichtfelds und
   springt bei Tastaturfokus nach oben links. */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 10;
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid var(--messing);
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* ---------- Netz ---------- */
.netz {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem 4.5rem;
  position: relative;
}
.netz__svg { width: 100%; max-width: 880px; height: auto; display: block; }
.netz__kanten line { stroke: var(--linie); stroke-width: 1.2; fill: none; }
.netz__impulse circle { fill: var(--messing); }

.knoten { cursor: pointer; text-decoration: none; }
.knoten__treffer { fill: transparent; }
.knoten__kreis {
  stroke: var(--tinte);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--ease), stroke 0.25s, stroke-width 0.25s;
}
.knoten--ring .knoten__kreis { fill: var(--papier); }
.knoten--kern .knoten__kreis { fill: var(--tinte); }
.knoten__text {
  font-family: var(--f-antiqua);
  font-weight: 500;
  fill: var(--tinte);
  /* Halo in Papierfarbe: Beschriftungen liegen stellenweise ueber Kanten
     (am deutlichsten "alc.gmbh" unter dem Kern). paint-order zeichnet die
     Kontur vor der Fuellung, sie liegt also hinter der Schrift und schneidet
     die Kante sauber weg. Die Fuellfarbe (Hover/Fokus: Messing) bleibt frei. */
  paint-order: stroke;
  stroke: var(--papier);
  stroke-width: 4;
  stroke-linejoin: round;
  transition: fill 0.25s;
}
.knoten:hover .knoten__kreis,
.knoten:focus-visible .knoten__kreis { transform: scale(1.15); }
.knoten:hover .knoten__text,
.knoten:focus-visible .knoten__text { fill: var(--messing); }

/* Tastaturfokus: Messingring am Knoten (Spec 6.1) und zusaetzlich ein duenner
   Tintenkreis auf dem Trefferfeld. Messing allein erreicht auf Papier nur
   2,7:1, erst mit dem Tintenkreis ist der Fokus zweifelsfrei sichtbar. */
.knoten:focus-visible { outline: none; }
.knoten:focus-visible .knoten__kreis { stroke: var(--messing); stroke-width: 2; }
.knoten:focus-visible .knoten__treffer { stroke: var(--tinte); stroke-width: 1; }

.netz__untertitel {
  min-height: 1.7em;
  margin: 0.5rem 0 1.5rem;
  font-family: var(--f-text);
  font-size: 1rem;
  color: var(--text-2);
  text-align: center;
}

.wortmarke {
  margin: 0;
  font-family: var(--f-antiqua);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
}
.wortmarke__linie {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--messing);
  margin: 0.9rem auto 0;
}

.scroll-hinweis {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem;
  color: var(--tinte);
  opacity: 0.4;
  text-decoration: none;
  animation: wippen 2.4s ease-in-out infinite;
}
.scroll-hinweis:hover, .scroll-hinweis:focus-visible { opacity: 0.9; }
@keyframes wippen {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ---------- Thema-Schalter (hell/dunkel) ---------- */
/* Klein, ohne Rahmen und Hintergrund: die Kopfzone bleibt sonst leer (Spec
   5.1). Ohne JavaScript bleibt der Schalter hidden (Markup), die Seite folgt
   dann allein prefers-color-scheme. Die eigene [hidden]-Regel ist noetig:
   ohne sie wuerde unser display: inline-flex weiter unten die eingebaute
   Browser-Regel [hidden] { display: none } ueberschreiben (Autor-CSS schlaegt
   UA-CSS unabhaengig von der Spezifitaet), der Schalter bliebe also auch ohne
   JavaScript sichtbar und bedienbar, obwohl er dann nichts tut. */
.thema-schalter[hidden] { display: none; }
.thema-schalter {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinte);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s var(--ease);
}
.thema-schalter:hover, .thema-schalter:focus-visible { opacity: 1; }
/* Symbolwahl ueber data-aktiv statt zweier Buttons: bei "hell" nur der Mond
   sichtbar (naechste Aktion: einschalten), bei "dunkel" nur die Sonne. */
.thema-schalter[data-aktiv="hell"] .thema-schalter__sonne { display: none; }
.thema-schalter[data-aktiv="dunkel"] .thema-schalter__mond { display: none; }

/* ---------- Rechtliches (Impressum, Datenschutz) ---------- */
.spalte {
  max-width: var(--w-spalte);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.rechtliches { padding: 4rem 0; scroll-margin-top: 1.5rem; }
.rechtliches--datenschutz { padding-top: 0; }

.rechtliches h2 { margin-bottom: 1.5rem; }
.rechtliches h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--messing);
  margin-top: 0.7rem;
}

.firma { font-size: 1.1rem; }

.daten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.5rem;
  margin: 1.5rem 0;
}
.daten dt { font-weight: 700; }
.daten dd { margin: 0; }

/* ---------- Fusszeile ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 2.5rem 0 3rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.fuss a { color: var(--text-2); }
.fuss__titel {
  font-family: var(--f-antiqua);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--tinte);
  margin: 0 0 0.9rem;
}
.fuss__links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}
.fuss__zeile { margin: 0 0 0.5rem; }
.fuss__rechtliches { margin: 0; }

/* ---------- Fehlerseite (404.html) ---------- */
.fehler {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fehler .spalte { width: 100%; }
.wortmarke--klein { font-size: 1.5rem; }
.fehler .wortmarke__linie { margin-bottom: 2rem; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 639px) {
  /* Das Netz nutzt die volle Fensterbreite. Nur so gilt die Skalierung
     360/520 aus Spec 6.3: Beschriftungen bleiben bei 360 px Fensterbreite
     mindestens 11 CSS-Pixel gross und Trefferflaechen 44 CSS-Pixel breit.
     Mit seitlichem Innenabstand am Abschnitt waeren es 10,3 bzw. 41,4 px.
     Text behaelt seinen Abstand ueber eigene Innenabstaende. */
  .netz { padding: 2rem 0 4rem; }
  .netz__untertitel, .wortmarke { padding: 0 0.75rem; }
  .netz__untertitel { font-size: 0.95rem; }
  .rechtliches { padding: 3rem 0; }
  .spalte { padding: 0 1rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

@media (max-width: 519px) {
  body { font-size: 1rem; }
  .daten { grid-template-columns: 1fr; gap: 0.15rem; }
  .daten dt { margin-top: 0.8rem; }
  .daten dt:first-of-type { margin-top: 0; }
  .fuss__links { gap: 0.35rem 1.1rem; }
  .wortmarke { letter-spacing: 0.03em; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hinweis { animation: none; }
  a, .knoten__kreis, .knoten__text, .thema-schalter { transition: none; }
  body { transition: none; }
}