/* ───────────────────────────────────────────────────────────────────────────
   cedi.ch — dieselbe Gestaltungsstruktur wie baier.ai, eigene Farbwelt.
   Eine Datei, keine externen Requests, keine Schriftdatei von fremden Hosts.

   HERKUNFT: Kopie von ../../baier.ai/static/css/main.css (Stand 2026-10-17).
   Entscheid Cédric 2026-10-17: «in der gleichen designstruktur wie baier
   agents, aber mit "Cédric Baier" als logo-text und mit einer anderen
   farbkombination, nämlich blau/stahl/grau/weiss/schwarz» — Stahl ist am
   Abend desselben Tages wieder gegangen, festgelegt ist Nachtblau/Blaugrau/
   Blau/Grau/Papier/Tinte. Geaendert sind
   nur die drei Farbbloecke unten, die Wortmarke (Text statt Bild), ein
   Block fuer Einleitung/Schluss, und der Angebots-Teil ist weg. Wer die
   Struktur aendert, aendert sie auf baier.ai und zieht sie hier nach.

   FARBEN: Palette «Nacht & Blaugrau», ../../marke/FARBEN.md, Abschnitt cedi.ch.
   Nachtblau traegt den Titel, Blaugrau die Interviewfragen und die Links im
   Text, Blau (hell im dunklen, tief im hellen Baum) die Wortmarke und den
   Knopfrand, Grau das Nebensaechliche.

   DREI REGELN, DIE NICHT GESCHMACK SIND:
   1. Helle Flaeche traegt dunkle Schrift, tiefe Flaeche helle Schrift. Nie
      umgekehrt. Hier: Papier auf Nachtblau (h1), Tinte auf Blaugrau (h2).
   2. Die zwei Titelflaechen trennen sich durch Helligkeit (6.0:1), nicht
      nur durch den Buntton.
   3. Farbe codiert nie allein eine Information.
   ─────────────────────────────────────────────────────────────────────────── */

/* Die Farbwelt selbst, modusunabhaengig. */
:root {
  --blau-hell:  #79b6f4;   /* oklch(76% 0.12 250) — Wortmarke dunkel.            8.83:1 auf Tinte */
  --blau-tief:  #235193;   /* oklch(44% 0.12 260) — Wortmarke hell.              7.21:1 auf Papier */
  --blau-nacht: #123780;   /* oklch(36% 0.13 262) — Titelflaeche h1 (beide Modi), Papier drauf 10.22:1 */
  --blaugrau:   #98aebf;   /* oklch(74% 0.035 240) — Titelflaeche h2 und Linkflaeche (beide Modi), Tinte drauf 8.23:1 */
  /* Stahl (#7ebadd / #1b5978) ist am 2026-10-17 spaet gestrichen. Cédric:
     «du kannst stahl arbeitslos machen, wir legen uns fest.» Die Palette ist
     damit: Nachtblau, Blaugrau, Blau (Wortmarke, Knopfrand), Tinte, Papier,
     Grau fuer Nebensaechliches. Sechs Werte, keine Reserve. */
  --tinte:      #0e1116;   /* Fast-Schwarz, nie #000, mit einem Hauch Blau */
  --papier:     #f4f5f7;   /* Fast-Weiss,   nie #fff, kuehl statt warm */
}

/* ZWEI TITELFLAECHEN, DIE MAN AUSEINANDERHAELT. Cédric 2026-10-17, zweite
   Runde: «tausche die farben, mache "Über mich" dunkelblau hinterlegt, aber
   noch dunkler als bisher. nimm für die zweite hierarchie eher ein grau, ein
   blaugrau, als ein hellblau.» Also: h1 auf Nachtblau mit Papier drauf, h2
   auf Blaugrau mit Tinte drauf, IN BEIDEN MODI gleich. Die erste Fassung vom
   selben Nachmittag (h1 Hellblau, h2 Nachtblau #2a4a88) liegt im Git.
   Sichtbarkeit der Flaechen gegen den Grund: Nachtblau auf Tinte 1.70:1
   (leiser Balken, laute Schrift), auf Papier 10.22:1; Blaugrau auf
   Papier 2.11:1, auf Tinte 8.23:1. Die beiden Flaechen trennen sich
   um 4.9:1 — Helligkeit, nicht Buntton. */
:root {
  --band-1:     var(--blau-nacht);   /* Flaeche hinter h1 */
  --auf-band-1: var(--papier);
  --band-2:     var(--blaugrau);     /* Flaeche hinter h2 und hinter Links im Text */
  --auf-band-2: var(--tinte);
}

/* Dunkel ist der Standard (Gestaltungsgesetz 6). Die Systemeinstellung des
   Besuchers wird absichtlich NICHT ausgewertet: sonst waere nach einem Klick
   auf den Umschalter nicht vorhersagbar, was er sieht. */
:root {
  --blau:     var(--blau-hell);      /* Unterstrich der Wortmarke */
  --aktion:   var(--blau);           /* Knopfrand, Unterstreichung beim Zeigen — dieselbe Farbe wie die Wortmarke, seit Stahl weg ist */
  --grund:    var(--tinte);
  --schrift:  var(--papier);         /* 17.34:1 → AAA */
  --leise:    #97a0a7;               /*  7.12:1 → AAA, nur fuer Nebensaechliches */

  /* VIER Schriftgroessen im ganzen Auftritt, nicht vier pro Seite; dieselbe
     Treppe wie baier.ai (Entscheid Cedi 2026-10-17: «weite einfach auf 4
     stufen aus»). --s-titel ist der h2 auf dem Band, zwischen h3 und h1. */
  --s-gross:  clamp(1.9rem, 1.2rem + 3.2vw, 3.2rem);
  --s-titel:  clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
  --s-mittel: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --s-klein:  1.0625rem;

  /* Breiter als baier.ai (88ch / 68ch). Cédric 2026-10-17: «darfst du die
     seite etwas breiter gestalten für lesende am laptop?» Rahmen 100ch,
     Prosa 80ch. 80 Zeichen pro Zeile sind das obere Ende dessen, was das
     Auge ohne Zeilenverlust zurueckfindet; darueber beginnt das Suchen am
     Zeilenanfang. Auf dem Telefon greift die Deckelung nie — dort ist die
     Breite «Bildschirm minus Rand», siehe @media unten. */
  --breite:   min(100ch, 100% - 3rem);
  --prosa:    80ch;
  --takt:     1.6;
}

:root[data-farbmodus="hell"] {
  --blau:     var(--blau-tief);      /* 7.21:1 → AAA */
  --aktion:   var(--blau);           /* 7.21:1 → AAA */
  --grund:    var(--papier);
  --schrift:  var(--tinte);
  --leise:    #5a656e;               /*  5.47:1 → AA */
}

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

html { color-scheme: dark; }
:root[data-farbmodus="hell"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: var(--s-klein)/var(--takt) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-wrap: pretty;
}

/* Keine sichtbaren Trennlinien zwischen den Zonen (Gestaltungsgesetz 1).
   Getrennt wird durch Abstand und durch Flaeche, sonst nichts. */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--aktion); }
/* Links auf grauem Grund (Vorspann/Schluss, Fuss, Sprachen, leise Signatur):
   beim Ueberfahren nicht nur die Unterlinie farbig, sondern die Schrift hell
   bzw. dunkel wie der Lauftext (Cedi 2026-10-17: «post@baier.ai on mouseover
   nicht nur grün in der unterlinie, sondern auch weiss / hell»). */
.stand a:hover, .fuss a:hover, .sprachen a:hover, .schluss .zeichen ~ p a:hover { color: var(--schrift); }
/* Fokusring zweifarbig. Begruendung: keine einzelne Markenfarbe erreicht
   3:1 gegen den Seitengrund UND gegen die helle Titelflaeche. Papier aussen,
   Tinte als Ring darunter — damit ist der Fokus auf beidem sichtbar. */
:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tinte);
  border-radius: 2px;
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
/* MITTIG, NICHT AUF DER GRUNDLINIE. Entscheid Cedi 2026-10-09: die Links
   sollen auf halber Hoehe des Schriftzugs stehen, nicht «an der Decke
   kleben». Mit `baseline` taten sie genau das: die Wortmarke war per
   `align-self` aus der Grundlinienreihe genommen, uebrig blieben Menue und
   Schalter — und die richteten sich untereinander aus, oben in der Zeile.
   `center` ist hier zufaellig auch das Richtige fuer das Bild: der Schriftzug
   liegt im Logo auf rund 51 % der Hoehe, Bildmitte ist also Schriftmitte. Ein
   Versatz braucht es nicht; sollte die Marke je neu gesetzt werden, ist das
   die Stelle, an der man es merkt. */
.kopf {
  display: flex;
  align-items: center;
  gap: 1.1rem 1.6rem;
  flex-wrap: wrap;
  width: var(--breite);
  margin: 0 auto;
  padding-block: 1.9rem 3.4rem;
}
.marke { text-decoration: none; font-weight: 700; font-size: var(--s-mittel); letter-spacing: -.01em; }
/* Die Wortmarke ist Text, kein Bild (Entscheid Cédric 2026-10-17: «"Cédric
   Baier" als logo-text»). Mittlere Groesse wie das `.marke`-Glied schon
   vorgibt, Unterstrich in der Leitfarbe — dasselbe Mittel wie die Titelflaeche,
   nur als Linie, damit der Name nicht mit dem h1 konkurriert. `inline-block`,
   damit der Strich nicht mit der Textunterstreichung des Links kollidiert. */
.marke-text { display: inline-block; padding-bottom: .1em; border-bottom: 3px solid var(--blau); }

.menu { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.menu a[aria-current="page"] { text-decoration-color: var(--aktion); }
/* DER FARBSCHALTER IST EIN KNOPF. Entscheid Cedi 2026-10-09: wie die Knoepfe
   auf der Angebotsseite, aber gruen statt violett — und woertlich «nur der
   Rand gruen, der bg bleibt wie der bg schon ist». Deshalb kein `background`
   hier: die Flaeche bleibt der Seitengrund, hell oder dunkel, je Farbbaum.
   Gruen ist nicht beliebig gewaehlt: es ist die Farbe der Titelhinterlegung
   und der Linkunterstreichung, violett gehoert den Wahlknoepfen. Zwei
   Bedeutungen, zwei Farben, keine Verwechslung.
   Geometrie identisch zu `.fragen label` — 2 px Rand, 0.35rem Radius,
   2.75rem Mindesthoehe (44 px) —, damit es derselbe Knopf ist und nicht
   bloss einer, der aehnlich aussieht.
   Die Rueckmeldung beim Zeigen ist die Unterstreichung, nicht ein Farb- oder
   Flaechenwechsel: ein gefuellter Grund waere genau das, was er nicht will. */
.modus {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .9rem;
  border: 2px solid var(--aktion);
  border-radius: .35rem;
  background: transparent;
  color: var(--schrift);
  text-decoration: none;
}
.modus:hover { text-decoration: underline; text-decoration-color: var(--aktion); }
.sprachen { display: flex; gap: .6rem; color: var(--leise); }

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.inhalt { width: var(--breite); margin: 0 auto; }
.inhalt > * + * { margin-top: 1.15em; }
.inhalt p, .inhalt li { max-width: var(--prosa); }
/* Links im Text als FLAECHE statt Unterstrich. Cédric 2026-10-17: «der link zu
   baier agents muss hinterlegt sein wie eine zweite hierarchie, nicht
   unterstrichen. hier will ich ein wenig spielen und experimentieren, der
   unterstrich ist seit 1990 hyperlink-standard...» Dieselbe Flaeche wie h2,
   per Zeile geklont wie das Band. Das ist ein bewusster Bruch mit
   Gestaltungsgesetz 3 (Farbe codiert nie allein) — hier codiert nicht die
   Farbe, sondern die Flaeche, und die ist auch ohne Farbsehen da. Beim
   Zeigen und per Tastatur wechselt die Flaeche auf die h1-Flaeche, damit
   der Link als bedienbar erkennbar bleibt. Gilt nur fuer cedi.ch. */
.inhalt p a {
  color: var(--auf-band-2);
  background: var(--band-2);
  text-decoration: none;
  padding: .04em .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.inhalt p a:hover, .inhalt p a:focus-visible {
  color: var(--auf-band-1);
  background: var(--band-1);
  text-decoration: none;
}

/* Das einzige Stilelement: vollflaechige, unifarbene Hinterlegung hinter dem
   Titel. Vorbild calyxos.org. Keine Verlaeufe, keine Transparenz, kein Muster.
   DIE FLAECHE SITZT AUF EINEM INNEREN SPAN (`.band`, gesetzt vom Render-Hook
   _markup/render-heading.html und in home.html), NICHT AUF DER UEBERSCHRIFT.
   Cédric 2026-10-17: bei zweizeiligen Fragen spannte das inline-block bis an
   den Seitenrand und machte «ein grosses rechteck auf», bei kurzen nur bis
   zum Textende. Inline mit box-decoration-break: clone hinterlegt jede Zeile
   genau so weit wie ihre Buchstaben, mit Polster an beiden Enden — wie ein
   Leuchtstift. Die Zeilen ueberlappen sich um das Polster, in derselben
   Farbe sieht man davon nichts. */
.inhalt h1, .inhalt h2 {
  margin-block: 2.2rem .2rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  max-width: var(--prosa);
}
.inhalt h1 .band, .inhalt h2 .band {
  display: inline;
  padding: .14em .42em;
  background: var(--band-1);
  color: var(--auf-band-1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.inhalt h1 { font-size: var(--s-gross); }
.inhalt h2 { font-size: var(--s-titel); }
.inhalt h2 .band { background: var(--band-2); color: var(--auf-band-2); }
.inhalt h3 { font-size: var(--s-mittel); font-weight: 700; }

/* Stand-Angabe direkt unter dem Titel, anstelle eines Datums. Keine neue Farbe
   und keine vierte Schriftgroesse: --leise auf der kleinen Groesse. Der engere
   Abstand ueberschreibt bewusst `.inhalt > * + *`, damit die Zeile zum Titel
   gehoert und nicht als eigener Absatz liest. */
.inhalt > .stand { margin-top: .55rem; color: var(--leise); }

.inhalt code, .inhalt pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.inhalt pre { overflow-x: auto; padding: 1rem; background: color-mix(in oklab, var(--schrift) 7%, var(--grund)); }

/* ── Kein Fuss ──────────────────────────────────────────────────────────── */
/* Entscheid Cédric 2026-10-17: cedi.ch weicht hier bewusst von baier.ai ab —
   «super-minimal, nur wie im vault». Es gibt keinen Fuss, keine Unterseiten,
   keine Datenschutzerklaerung (keine Interaktion, keine Cookies). Was der
   Fuss auf baier.ai traegt, steht hier in seinem eigenen Schlusstext:
   Gruss, Signaturzeile mit X, LinkedIn und Mail, Ort und Datum. */

/* Liniierte Zeichen fuer die Signaturzeile (Entscheid Cedi 2026-10-09: «ganz
   dezenten, linierten stil»; 2026-10-17: «mit den icons für X und Linkedin»).
   Dezent heisst hier: die Zeichen stehen in --leise wie Ort und Datum darunter
   und werden erst beim Zeigen so hell wie die Schrift. Keine
   Flaeche, eine einzige Strichstaerke, Hoehe wie eine Zeile — ein viertes
   Schriftmass entsteht nicht, weil das SVG kein Text ist (Gestaltungsgesetz 3).
   Der Unterstrich fiele unter dem Zeichen als Strich ohne Sinn aus, darum weg;
   die Sichtbarkeit beim Tabben traegt die globale `:focus-visible`-Regel. */
.zeichen { display: flex; align-items: center; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.zeichen a { display: block; color: var(--leise); text-decoration: none; }
.zeichen a:hover { color: var(--schrift); }
.ikon {
  display: block;
  width:  1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Schmal ──────────────────────────────────────────────────────────────── */
/* Eine Datei, zwei Layouts. Keine serverseitige Geraeteerkennung
   (Gestaltungsgesetz 7). */
@media (max-width: 34rem) {
  :root { --breite: calc(100% - 2rem); --takt: 1.55; }
  .kopf { padding-block: 1.3rem 2.4rem; gap: .7rem 1.1rem; }
  .modus { margin-left: 0; }
}

/* ── Einleitung und Schluss ──────────────────────────────────────────────── */
/* «hebe den einleitungstext etwas vom interview ab» (Cédric 2026-10-17).
   Erster Wurf war die mittlere Schriftgroesse; Cédric am selben Tag: «die
   schrift der einleitung ist zu gross - vielleicht gleich klein wie auf
   baier.ai aber dafür fett». Also: dieselbe kleine Groesse wie alles, fett.
   Das Interview darunter steht normal, die Fragen tragen die Begleitfarbe
   als Flaeche (h2) — damit lesen sich die beiden Teile als zwei, ohne
   Trennstrich. */
.einleitung p { font-weight: 700; }
.einleitung { margin-bottom: 3.2rem; }
/* Der Schluss: Gruss, Signatur, Ort und Datum. Leise wie der Fuss, aber in
   der Inhaltsspalte, weil es sein Text ist und nicht Navigation. */
.schluss { margin-top: 3.2rem; padding-bottom: 3rem; }
.schluss p + p, .schluss p + ul, .schluss ul + p { margin-top: .4em; }
/* Ab der Signaturzeile leise: Zeichen, Mail, Ort und Datum. */
.schluss .zeichen, .schluss .zeichen ~ p { color: var(--leise); }
.schluss .zeichen a { color: inherit; }
.schluss .zeichen a:hover { color: var(--schrift); }
.schluss .zeichen li:last-child { margin-left: .2rem; }