/* convalo.de — Seitenstile. Kein Build-Schritt, keine externen Ressourcen.
 *
 * Farben/Abstaende/Schrift kommen aus tokens.css (Kopie aus brand/).
 * Akzent-Regel aus tokens.css gilt hier ebenso — mit einer Praezisierung fuer das
 * dunkle Thema, siehe "Abgeleitete Akzent-Tokens" weiter unten:
 *   --c-akzent      = Flaechen, Linien, grosse Ueberschriften
 *   --c-akzent-text = Akzent im Fliesstext (Links, kleine Titel), je Thema gesetzt
 */

/* ---------------------------------------------------------------- Schriften
 * Lokal ausgeliefert, NIE von Google Fonts o. ae. — ein Hotlink wuerde die
 * IP-Adresse des Besuchers an einen Dritten uebertragen. Fuer einen Anbieter,
 * der Datenhoheit verkauft, waere das ein Eigentor.
 * Umfang: IBM Plex "Latin1" — deckt Umlaute, ss, Gedankenstriche und deutsche
 * Anfuehrungszeichen ab. Lizenz: fonts/LICENSE.txt (SIL OFL 1.1).
 */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
    U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* ------------------------------------------------- Abgeleitete Akzent-Tokens
 *
 * KEIN neuer Farbwert — nur eine Zuordnung, welcher der beiden vorhandenen
 * Kupfertoene je Thema als TEXT taugt. Gemessen (WCAG 2.1, 4.5:1 noetig):
 *
 *                              hell            dunkel
 *   --c-akzent            4,16:1  FAIL     6,27:1  OK
 *   --c-akzent-gedrueckt  5,54:1  OK       4,32:1  FAIL   (auf --c-flaeche-erhoben)
 *
 * Die Polaritaet kippt: hell braucht das DUNKLERE Kupfer, dunkel das HELLERE.
 * Die Akzent-Regel aus AP4 ("Akzent-Fliesstext nutzt --c-akzent-gedrueckt") wurde
 * am hellen Thema hergeleitet und stimmt fuer das dunkle nicht.
 *
 * TODO(André): Wenn die Zuordnung passt, gehoert sie nach brand/tokens.css
 * hochgezogen — sie gilt fuer die Oberflaeche genauso. Bewusst noch nicht dort
 * eingetragen: die Marke wird nicht nebenbei geaendert.
 */
:root {
  --c-akzent-text: var(--c-akzent-gedrueckt);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-akzent-text: var(--c-akzent);
  }
}
[data-theme="dark"] {
  --c-akzent-text: var(--c-akzent);
}
[data-theme="light"] {
  --c-akzent-text: var(--c-akzent-gedrueckt);
}

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

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--c-flaeche);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--t-text);
  line-height: var(--z-text);
  -webkit-text-size-adjust: 100%;
}

/* Sichtbarer Fokusrahmen — nie wegnehmen, nur gestalten. */
:focus-visible {
  outline: 2px solid var(--c-akzent);
  outline-offset: 2px;
  border-radius: var(--r-feld);
}

img,
svg {
  max-width: 100%;
}
code {
  font-family: var(--f-mono);
  font-size: 0.9em;
}

/* Links sind Fliesstext -> --c-akzent-text (je Thema der lesbare Kupferton). */
a {
  color: var(--c-akzent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-flaeche-erhoben);
  color: var(--c-text);
  border: var(--rahmen);
  border-radius: var(--r-feld);
  padding: var(--a-1) var(--a-3);
  z-index: 10;
}
.sprunglink:focus {
  left: var(--a-3);
  top: var(--a-1);
}

.huelle {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--a-3);
}

/* ------------------------------------------------------------------ Kopfzeile */
.kopf {
  border-bottom: var(--rahmen);
  background: var(--c-flaeche);
}
.kopf .huelle {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  min-height: 72px;
}
.kopf .marke {
  display: flex;
  align-items: center;
  margin-right: auto;
  color: var(--c-akzent);
}

/* Wortmarke als MASKE, nicht als <img>.
 *
 * Grund: convalo-wordmark.svg ist einfarbig ueber currentColor gebaut. Als <img>
 * eingebunden erbt die Datei aber KEINE CSS-Farbe — sie waere immer schwarz und im
 * Dunkelmodus schwarz auf dunklem Grund, also praktisch unsichtbar. Als Maske faerbt
 * background-color die Flaeche, currentColor greift wieder, und die Datei bleibt
 * extern (einmal geladen, von beiden Seitenbereichen genutzt).
 */
.wortmarke {
  display: block;
  height: 32px;
  aspect-ratio: 199 / 64;
  background-color: currentColor;
  -webkit-mask: url("../img/convalo-wordmark.svg") no-repeat center / contain;
  mask: url("../img/convalo-wordmark.svg") no-repeat center / contain;
}
.kopf nav {
  display: flex;
  align-items: center;
  gap: var(--a-3);
}
.kopf nav a {
  font-size: var(--t-meta);
}

.schalter {
  font: inherit;
  font-size: var(--t-meta);
  line-height: 1;
  padding: var(--a-1) var(--a-2);
  border: var(--rahmen);
  border-radius: var(--r-feld);
  background: var(--c-flaeche-erhoben);
  color: var(--c-text);
  cursor: pointer;
}
.schalter:hover {
  border-color: var(--c-akzent);
  background: var(--c-akzent-flaeche);
}
/* Ohne JS bleibt der Schalter verborgen (theme.js blendet ihn ein) — ein Knopf,
   der nichts tut, ist schlechter als keiner. */
.schalter[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ Abschnitte */
main {
  display: block;
}
section {
  padding: var(--a-6) 0;
  border-bottom: var(--rahmen);
}
section:last-of-type {
  border-bottom: 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-titel);
  font-weight: 600;
  margin: 0 0 var(--a-3);
  max-width: 20ch;
}
h2 {
  font-size: var(--t-abschnitt);
  font-weight: 600;
  margin: 0 0 var(--a-3);
}
h3 {
  font-size: var(--t-text);
  font-weight: 600;
  margin: 0 0 var(--a-1);
  color: var(--c-akzent-text);
}
p {
  margin: 0 0 var(--a-3);
  max-width: var(--b-text);
}
.gross {
  font-size: 18px;
}
.leise {
  color: var(--c-text-sekundaer);
}

/* Aufmacher */
.aufmacher {
  padding-top: var(--a-6);
}
.aufmacher h1 {
  font-size: clamp(30px, 6vw, 44px);
  max-width: 22ch;
}

/* Umriss statt Fuellung: Rand und Text in Kupfer, Flaeche transparent; beim Zeigen
 * kippt es in die gefuellte Form.
 *
 * Verwendet --c-akzent-text, nicht --c-akzent. Gemessen (16px/500 braucht 4,5:1):
 *   --c-akzent      hell 4,16:1 FAIL  |  dunkel 6,27:1 OK
 *   --c-akzent-text hell 5,54:1 OK    |  dunkel 6,27:1 OK
 * Im DUNKLEN Thema ist --c-akzent-text identisch mit --c-akzent — dort ist es also
 * exakt der gewuenschte Ton; nur hell greift der dunklere Kupferton, sonst waere der
 * wichtigste Knopf der Seite unter AA.
 */
.knopf {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  padding: var(--a-2) var(--a-4);
  border-radius: var(--r-feld);
  background: transparent;
  color: var(--c-akzent-text);
  border: 1px solid var(--c-akzent-text);
}
.knopf:hover {
  background: var(--c-akzent-text);
  color: var(--c-flaeche);
  border-color: var(--c-akzent-text);
}

/* Drei Bloecke */
.raster {
  display: grid;
  gap: var(--a-4);
  grid-template-columns: 1fr;
}
.raster > div {
  background: var(--c-flaeche-erhoben);
  border: var(--rahmen);
  border-radius: var(--r-karte);
  padding: var(--a-4);
}
.raster p:last-child {
  margin-bottom: 0;
}

/* "Was Convalo nicht tut" — schlichte Liste, bewusst ohne Farbe. */
.liste-klar {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--b-text);
}
.liste-klar li {
  padding: var(--a-2) 0;
  border-bottom: var(--rahmen);
}
.liste-klar li:last-child {
  border-bottom: 0;
}

.kasten {
  background: var(--c-flaeche-erhoben);
  border: var(--rahmen);
  border-radius: var(--r-karte);
  padding: var(--a-4);
  max-width: var(--b-text);
}
.kasten p:last-child {
  margin-bottom: 0;
}

/* Fragen — reines <details>, kein JS. */
details {
  border-bottom: var(--rahmen);
  max-width: var(--b-text);
}
details summary {
  cursor: pointer;
  padding: var(--a-2) 0;
  font-weight: 500;
  list-style-position: outside;
}
details summary::marker {
  color: var(--c-akzent);
}
details p {
  margin: 0 0 var(--a-3);
  color: var(--c-text-sekundaer);
}

/* ------------------------------------------------------------------ Fusszeile */
.fuss {
  border-top: var(--rahmen);
  padding: var(--a-5) 0;
  font-size: var(--t-meta);
  color: var(--c-text-sekundaer);
}
.fuss .wortmarke {
  height: 24px;
  margin-bottom: var(--a-3);
}
.fuss ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a-3);
  margin: 0 0 var(--a-2);
  padding: 0;
}
.fuss p {
  margin: 0;
}

/* ------------------------------------------------------------------ Rechtstexte */
.rechtstext h2 {
  margin-top: var(--a-5);
}
.rechtstext dl {
  max-width: var(--b-text);
}
.rechtstext dt {
  font-weight: 600;
  margin-top: var(--a-2);
}
.rechtstext dd {
  margin: 0;
}
/* Platzhalter, die André noch fuellt — sichtbar markiert, damit nichts */
/* versehentlich unausgefuellt online geht. */
.platzhalter {
  font-family: var(--f-mono);
  font-size: 0.9em;
  background: var(--c-akzent-flaeche);
  border: 1px dashed var(--c-akzent);
  border-radius: var(--r-feld);
  padding: 1px 6px;
  color: var(--c-akzent-text);
}

/* ------------------------------------------------------------------ Umbruch */
@media (min-width: 720px) {
  .huelle {
    padding: 0 var(--a-4);
  }
  .raster {
    grid-template-columns: repeat(3, 1fr);
  }
  section {
    padding: 64px 0;
  }
}

/* ------------------------------------------------------------------ Druck */
@media print {
  body {
    background: #ffffff;
  }
  .kopf nav,
  .sprunglink {
    display: none;
  }
  a {
    text-decoration: underline;
  }
}