@import url("/fonts/schriften.css");

/* ==========================================================================
   michel.to — Design-System "Ivory"  (08.08.2026)

   Manus Auftrag: "design 1:1 wie anthropic".

   Die Werte hier sind NICHT geschaetzt. Sie sind am 08.08.2026 von
   anthropic.com aus den gerechneten Stilen und den CSS-Variablen der Seite
   gelesen worden (Playwright, getComputedStyle + Regelwerk der Stylesheets).
   Die Namen in den Kommentaren sind Anthropics eigene Token-Namen, damit
   ein spaeterer Abgleich moeglich bleibt.

   Die zwei Dinge, die den Look ausmachen und die man leicht falsch macht:
     1. SERIF IST DER FLIESSTEXT, SANS IST DIE UEBERSCHRIFT. Genau andersherum
        als bei der Vorgaengerfassung und andersherum als bei fast jeder
        anderen Seite. Body 20px Serif, Zeilenhoehe 1.4.
     2. Sektionsueberschriften sind KLEIN (Sans 600, ~24px). Gross und in
        Serif wird nur das eine Statement im dunklen Block. Wer alle H2 gross
        setzt, trifft den Ton nicht.

   Schriften: "Anthropic Sans/Serif/Mono" sind lizenzierte Hausschriften und
   duerfen hier nicht liegen. Ersatz, gegen das Original gerendert und
   ausgewaehlt: Hanken Grotesk fuer die Sans (Styrene-Anmutung, hohe
   x-Hoehe, geschlossene Apertur), Newsreader fuer die Serif, JetBrains Mono
   fuer die Mono. JetBrains Mono benutzt Anthropic selbst.
   Alle drei liegen unter /fonts/, kein fremder Host.
   ========================================================================== */

:root {
  /* --- Anthropics Swatches, unveraendert uebernommen --------------------- */
  --ivory-light:  #faf9f5;   /* swatch--ivory-light   Grundflaeche          */
  --ivory-medium: #f0eee6;   /* swatch--ivory-medium  abgesetzte Sektion    */
  --ivory-dark:   #e8e6dc;   /* swatch--ivory-dark    Hover auf abgesetzt   */
  --oat:          #e3dacc;   /* swatch--oat           Karten                */
  --slate-dark:   #141413;   /* swatch--slate-dark    Text, Knopf, Fuss     */
  --slate-medium: #3d3d3a;   /* swatch--slate-medium  Knopf im Hover        */
  --slate-light:  #5e5d59;   /* swatch--slate-light   weicher Text          */
  --clay:         #d97757;   /* swatch--clay          der eine Akzent       */
  --clay-tief:    #c6613f;   /* swatch--accent        Akzent auf Hell       */

  /* Anthropic setzt leise Labels auf cloud-dark #87867f. Das sind auf Ivory
     nur 3,6:1 und faellt unter die Lesbarkeitsschwelle fuer kleine Schrift.
     Einzige bewusste Abweichung: 5,2:1 statt 3,6:1. */
  --cloud-dark:   #6b6a63;

  /* --- Flaechen ------------------------------------------------------------
     Nachgesehen, weil der erste Entwurf danebenlag: anthropic.com setzt zwar
     den Body auf ivory-light, legt darueber aber <main class="u-bg-ivory-medium">.
     Die Flaeche, die man tatsaechlich sieht, ist also ivory-medium. Der
     abgesetzte Abschnitt geht deshalb nach HELL, nicht nach dunkel. */
  --paper:        var(--ivory-medium);
  --paper-sunk:   var(--ivory-light);
  --paper-raised: #ffffff;      /* color-theme--card = swatch--white        */
  --karte:        var(--oat);
  --karte-hover:  #ddd3c2;
  --flaeche-hover: var(--ivory-dark);
  --night:        var(--slate-dark);

  /* --- Tinte ------------------------------------------------------------- */
  --ink:          var(--slate-dark);
  --ink-soft:     var(--slate-light);
  --ink-faint:    var(--cloud-dark);

  /* --- Linien (slate-faded-10 / -20) ------------------------------------- */
  --rule:         rgba(20, 20, 19, 0.10);
  --rule-strong:  rgba(20, 20, 19, 0.20);

  /* --- Akzent. Genau einer, wie bei Anthropic. --------------------------- */
  --tinte:        var(--clay-tief);
  --tinte-lift:   var(--clay);
  --tinte-wash:   rgba(217, 119, 87, 0.08);
  --on-tinte:     var(--ivory-light);
  --on-tinte-soft: rgba(250, 249, 245, 0.72);

  /* --- Knopf (color-theme--button-primary / -secondary) ------------------ */
  --knopf-grund:  var(--slate-dark);
  --knopf-text:   var(--ivory-light);
  --knopf-hover:  var(--slate-medium);

  /* --- Schrift ----------------------------------------------------------- */
  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Mass. Anthropics Raster. ----------------------------------------- */
  --wrap:        89.5rem;                                       /* site--width      */
  --wrap-mittel: 68rem;
  --wrap-narrow: 44rem;
  --gutter:      clamp(2rem, 1.08rem + 3.92vw, 5rem);           /* site--margin     */
  --section:     clamp(5.5rem, 4.12rem + 5.88vw, 10rem);        /* section-space--main   */
  --section-klein: clamp(3.5rem, 2.73rem + 3.27vw, 6rem);       /* section-space--medium */

  /* --- Radien (radius--small / --main / --large) ------------------------- */
  --r-klein: 0.25rem;
  --r-haupt: 0.5rem;
  --r-gross: 1rem;

  --ease: cubic-bezier(0.32, 0.72, 0.26, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);          /* Anthropic: Fliesstext ist Serif */
  font-size: 1.25rem;                 /* font-size--paragraph-m = 20px   */
  line-height: 1.4;                   /* line-height--1-4               */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--clay); color: var(--ivory-light); }

:focus-visible {
  outline: 2px solid var(--ink);      /* focus--width .125rem  */
  outline-offset: 4px;                /* focus--offset-outer   */
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--slate-dark); color: var(--ivory-light);
  font-family: var(--sans); font-size: 0.9375rem;
  padding: 12px 18px; border-radius: var(--r-klein);
}
.skip:focus { left: 12px; top: 12px; }

/* --- Sanftes Erscheinen (nur mit JS, sonst immer sichtbar) ----------------- */
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.da {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* --- Mass und Raster ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }
.wrap-mittel { max-width: calc(var(--wrap-mittel) + var(--gutter) * 2); }

.section { padding-block: var(--section-klein); }
.section-sunk { background: var(--paper-sunk); }
.section-ruled { border-top: 1px solid var(--rule); }
.section-tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* --- Typografie ----------------------------------------------------------- */
/* Ueberschriften sind Sans und zurueckhaltend gross. Das ist der Kern. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;                      /* font--display-sans-semibold */
  letter-spacing: -0.02em;               /* letter-spacing--0-02em      */
  line-height: 1.1;
}
h1 {
  font-weight: 700;                      /* font--display-sans-bold     */
  font-size: clamp(2.5rem, 2.04rem + 1.96vw, 4rem);   /* display-xl     */
  line-height: 1.05;
}
h2 { font-size: clamp(1.75rem, 1.67rem + 0.33vw, 2rem); line-height: 1.1; }  /* display-m */
h3 { font-size: clamp(1.25rem, 1.17rem + 0.33vw, 1.5rem); line-height: 1.3; } /* display-s */
h4 { font-size: 1rem; line-height: 1.4; }
em, i { font-style: italic; }

/* Das eine grosse Statement: Serif, Gewicht 400, gross. Sparsam einsetzen. */
.gross {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.69rem + 1.31vw, 3rem);   /* display-l */
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Anthropic setzt seine Labels grau, nicht farbig. Clay taucht auf der
   ganzen Startseite nur in Flaechen und im Hover auf. Wer die Labels
   einfaerbt, hat sofort eine andere Marke. */
.label {
  display: block;
  font-family: var(--sans);
  font-weight: 500;                       /* font--detail-medium */
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.label-still { color: var(--ink-faint); }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.34rem + 0.16vw, 1.5rem);   /* paragraph-l */
  line-height: 1.4;
  color: var(--ink);
  max-width: 42ch;
}

p + p { margin-top: 0.9em; }

.kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* --- Verweise ------------------------------------------------------------- */
/* Anthropics Textlink: Sans, klein, ohne Linie, mit Pfeil. */
.pfeil {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none; color: var(--ink);
  transition: color .2s var(--ease);
}
.pfeil::after { content: "\2192"; transition: transform .25s var(--ease); }
.pfeil:hover { color: var(--clay-tief); }
.pfeil:hover::after { transform: translateX(4px); }

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--knopf-grund); color: var(--knopf-text);
  text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: 0.9375rem; line-height: 1;
  padding: 14px 20px; border-radius: var(--r-klein);
  border: 1px solid var(--knopf-grund);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }

/* button-secondary: leer mit Kante, im Hover gefuellt */
.knopf-still {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.knopf-still:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Auf dunklem Grund dreht sich das Verhaeltnis um */
.knopf-hell {
  background: var(--ivory-light); color: var(--slate-dark); border-color: var(--ivory-light);
}
.knopf-hell:hover { background: var(--ivory-dark); border-color: var(--ivory-dark); color: var(--slate-dark); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Kopf ----------------------------------------------------------------- */
.haus-kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(240, 238, 230, 0.86);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.haus-kopf.gescrollt { border-bottom-color: var(--rule); }
.haus-kopf .wrap { display: flex; align-items: center; gap: 20px; height: 4.25rem; }  /* nav--height */

.marke {
  font-family: var(--sans); font-weight: 700; font-size: 1.25rem;
  text-decoration: none; letter-spacing: -0.02em; white-space: nowrap;
}
.marke i { font-style: normal; color: var(--ink-soft); }

/* Anthropics Navigationslinks sind Serif, nicht Sans. */
.haus-nav { margin-left: auto; }
.haus-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.haus-nav a {
  display: block; text-decoration: none;
  font-family: var(--serif); font-size: 1.0625rem; color: var(--ink);
  padding: 8px 12px; border-radius: var(--r-klein);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.haus-nav a:hover { background: var(--flaeche-hover); }
/* Die geoeffnete Seite wird unterstrichen, nicht eingefaerbt: Clay traegt auf
   Ivory nur 3,85:1 und Anthropic faerbt seine Navigation ohnehin nicht. */
.haus-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.nav-schalter {
  display: none; margin-left: auto; background: none; border: 0;
  font-family: var(--sans); font-weight: 500; font-size: 0.875rem;
  color: var(--ink); cursor: pointer; padding: 10px 2px;
}

@media (max-width: 860px) {
  .nav-schalter { display: block; }
  .haus-nav {
    position: fixed; inset: 4.25rem 0 auto 0; background: var(--paper);
    border-bottom: 1px solid var(--rule); margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s var(--ease);
  }
  .haus-nav.offen { max-height: 360px; }
  .haus-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; }
  .haus-nav a { padding: 13px 0; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--rule); }
  .haus-nav a:hover { background: none; }
}

/* --- Hero ----------------------------------------------------------------- */
/* Anthropic: Ueberschrift links gross in Sans Bold, daneben rechts ein
   kurzer Serif-Absatz. Kein Vorspann-Label ueber der Ueberschrift. */
.hero { padding-block: clamp(3.5rem, 2.7rem + 3.3vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.hero-satz {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}
.hero h1 { max-width: 16ch; }
.hero .hero-neben { padding-top: 0.5rem; }
.hero .lead { max-width: 40ch; }
.hero .knopfreihe { margin-top: 2rem; }
@media (max-width: 900px) {
  .hero-satz { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero .hero-neben { padding-top: 0; }
}

/* --- Portfolio-Reihen ----------------------------------------------------- */
/* Entspricht Anthropics gesetzter Liste: Titel links in Sans 600,
   Einordnung rechts klein und grau. Haarlinie darunter. */
.reihen { border-top: 1px solid var(--rule); }
.reihe {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) 150px;
  gap: 28px; align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .2s var(--ease), padding-inline .2s var(--ease);
}
a.reihe:hover { background: var(--flaeche-hover); padding-inline: 14px; }
.reihe .name {
  font-family: var(--sans); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -0.02em;
}
.reihe .was { font-size: 1.0625rem; color: var(--ink-soft); }
.reihe .stand {
  font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); text-align: right;
}
.reihe-leise .name { color: var(--ink-faint); }
.reihe-leise .stand { color: var(--ink-faint); }

@media (max-width: 720px) {
  .reihe { grid-template-columns: 1fr auto; gap: 6px 18px; padding-block: 20px; }
  .reihe .name { grid-column: 1; }
  .reihe .stand { grid-column: 2; grid-row: 1; }
  .reihe .was { grid-column: 1 / -1; }
}

/* --- Saeulen (Leistungen) ------------------------------------------------- */
.saeulen { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.saeule {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 32px; align-items: start;
  padding-block: 28px; border-bottom: 1px solid var(--rule);
}
.saeule h3 { padding-top: 2px; }
.saeule p { color: var(--ink-soft); font-size: 1.0625rem; max-width: 58ch; }
.saeule .pfeil { white-space: nowrap; }
@media (max-width: 820px) {
  .saeule { grid-template-columns: 1fr; gap: 14px; }
}

.saeulen-eng .saeule { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; padding-block: 24px; }
.saeulen-eng .saeule h3 { grid-row: 1; padding-top: 0; }
.saeulen-eng .saeule .pfeil { grid-row: 1; grid-column: 2; align-self: center; }
.saeulen-eng .saeule p { grid-row: 2; grid-column: 1 / -1; }

/* --- Zweispalter ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split-even { grid-template-columns: 1fr 1fr; align-items: center; }
.split-breit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
@media (max-width: 900px) { .split, .split-even { grid-template-columns: 1fr; gap: 2rem; } }

/* --- Betriebsprotokoll ---------------------------------------------------- */
.protokoll { list-style: none; border-top: 1px solid var(--rule); }
.protokoll li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px; padding-block: 14px; border-bottom: 1px solid var(--rule);
  font-size: 1.0625rem;
}
.protokoll time {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0;
  color: var(--ink-faint); padding-top: 4px;
}
.protokoll .was { color: var(--ink-soft); }
.protokoll b { font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--ink); }

/* --- Zahlen --------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 34px; border-top: 1px solid var(--rule); }
.zahlen-paar { grid-template-columns: 1fr 1fr; }
.zahl { padding-block: 22px; border-bottom: 1px solid var(--rule); }
.zahl b {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 2.25rem; line-height: 1; letter-spacing: -0.02em;
}
.zahl span {
  display: block; margin-top: 10px; font-family: var(--sans); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

/* --- Dunkler Block -------------------------------------------------------- */
/* Anthropics Signature: eine tiefdunkle Flaeche mit grossem Radius, die im
   Ivory schwimmt. Nicht randlos ueber die volle Breite. */
/* Die Flaeche muss schmaler sein als der Textrahmen, sonst laeuft sie an den
   Bildschirmrand und der Radius ist nicht mehr zu sehen. Deshalb zieht der
   Innenrahmen die volle Wrap-Breite minus zweimal Aussenrand zusammen. */
.tinte { background: transparent; padding-block: var(--section-klein); }
.tinte > .wrap {
  max-width: calc(var(--wrap) - var(--gutter) * 2);
  background: var(--slate-dark); color: var(--ivory-light);
  border-radius: var(--r-gross);
  padding: clamp(2.5rem, 4vw, 4.5rem) clamp(1.75rem, 4vw, 4rem);
}
.tinte h2, .tinte h3 { color: var(--ivory-light); }
.tinte .lead, .tinte p { color: var(--on-tinte-soft); }
.tinte .label { color: rgba(250, 249, 245, 0.6); }
.tinte .liste li { border-color: rgba(250, 249, 245, 0.16); }
.tinte .liste li::before { background: rgba(250, 249, 245, 0.5); }
.tinte .shot { border-color: rgba(250, 249, 245, 0.18); }
.tinte .bildunter { color: var(--on-tinte-soft); }
.tinte .pfeil { color: var(--ivory-light); }
.tinte .pfeil:hover { color: var(--clay); }

/* --- Grosser Zuruf (Anthropics big-cta) ----------------------------------- */
/* Dunkle Flaeche, mittig, EIN Satz in grosser Serif. Das ist die Stelle,
   an der die Seite laut wird, und die einzige. */
.grossruf { padding-block: var(--section-klein); }
.grossruf > .wrap {
  max-width: calc(var(--wrap) - var(--gutter) * 2);
  background: var(--slate-dark); color: var(--ivory-light);
  border-radius: var(--r-gross);
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.75rem, 5vw, 5rem);
  text-align: center;
}
.grossruf .pfeil { color: var(--ivory-light); }
.grossruf .pfeil:hover { color: var(--clay); }
.grossruf h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.69rem + 1.31vw, 3rem);
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ivory-light);
  max-width: 20ch; margin-inline: auto;
}
.grossruf p {
  font-family: var(--sans); font-size: 1.25rem; line-height: 1.4;
  color: var(--on-tinte-soft);
  max-width: 52ch; margin: 1.5rem auto 0;
}
.grossruf .knopfreihe { margin-top: 2.25rem; justify-content: center; }

/* --- Listen --------------------------------------------------------------- */
.liste { list-style: none; }
.liste li {
  position: relative; padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--rule); font-size: 1.0625rem;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 8px; height: 2px; border-radius: 1px; background: var(--clay-tief);
}
.liste li:last-child { border-bottom: 0; }

/* --- Screenshots ---------------------------------------------------------- */
.shot { border: 1px solid var(--rule); border-radius: var(--r-haupt); overflow: hidden; background: var(--paper-raised); }
.shot img { width: 100%; }
.bildunter {
  margin-top: 12px; font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

/* --- Journal-Anrisse als Karten ------------------------------------------- */
/* Anthropics "Latest releases": Kacheln in Oat, weicher Radius, kein Rahmen,
   kein Schatten. Datum klein oben, Titel in Sans 600, Text in Serif. */
.anrisse {
  border-top: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.anriss {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--karte); border: 0; border-radius: 0.75rem;
  padding: 1.75rem; text-decoration: none;
  transition: background .2s var(--ease);
}
.anriss:hover { background: var(--karte-hover); padding-inline: 1.75rem; }
/* Auf der Oat-Flaeche traegt der leise Ton nicht mehr (3,9:1). Auf Karten
   deshalb eine Stufe dunkler, nachgerechnet: 4,8:1. */
.anriss .datum {
  font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-light); padding-top: 0;
}
.anriss h3 { font-size: 1.25rem; }
.anriss p { margin-top: 0; color: var(--ink-soft); font-size: 1.0625rem; max-width: none; }
@media (max-width: 900px) { .anrisse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .anrisse { grid-template-columns: 1fr; } }

/* --- Seitenkopf (Unterseiten) -------------------------------------------- */
.pagehead { padding-block: clamp(3rem, 2.4rem + 2.6vw, 5rem) clamp(1.75rem, 1.5rem + 1.3vw, 3rem); }
.pagehead .label { margin-bottom: 20px; }
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { margin-top: 22px; }

/* --- Fliesstext (Rechtstexte, Journal) ----------------------------------- */
.article { max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; }
.article h2 {
  font-size: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
  margin-top: 2.4em; margin-bottom: 0.6em;
  padding-top: 1.4em; border-top: 1px solid var(--rule);
}
.article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article h2 .nr {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 12px;
}
.article h3 { margin-top: 1.8em; margin-bottom: 0.5em; }
.article p, .article ul, .article ol, .article table { margin-bottom: 1.1em; }
.article ul, .article ol { padding-left: 1.25em; }
.article li { margin-bottom: 0.45em; }
/* Anthropic faerbt Links im Fliesstext nicht ein, es unterstreicht sie.
   Das ist im Hero sogar das Gestaltungsmittel. Clay traegt auf Ivory nur
   3,85:1 und waere fuer Fliesstext ohnehin zu schwach. */
.article a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { color: var(--clay-tief); text-decoration-color: var(--clay-tief); }
.article table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.article th, .article td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article th {
  font-family: var(--sans); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.article blockquote {
  border-left: 2px solid var(--clay); padding-left: 22px; margin: 1.6em 0;
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.4;
}
.article code { font-family: var(--mono); font-size: 0.85em; background: var(--flaeche-hover); padding: 2px 6px; border-radius: var(--r-klein); }
.article pre { background: var(--night); color: #e6e4de; padding: 22px; border-radius: var(--r-haupt); overflow-x: auto; margin-bottom: 1.4em; font-size: 0.9375rem; }
.article pre code { background: none; padding: 0; color: inherit; }
.article hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.article img { border: 0; border-radius: var(--r-haupt); margin: 1.6em 0; }

.stand {
  margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}

/* --- Inhaltsverzeichnis --------------------------------------------------- */
.toc { margin-top: 40px; padding: 26px 0 4px; border-top: 1px solid var(--rule); }
.toc h2 {
  font-family: var(--sans); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 16px; margin-top: 0; padding-top: 0; border-top: 0;
}
.toc ol { list-style: none; counter-reset: toc; columns: 2; column-gap: 40px; }
.toc li { counter-increment: toc; margin-bottom: 9px; break-inside: avoid; font-size: 1rem; padding-left: 2.4em; text-indent: -2.4em; }
.toc li::before { content: counter(toc, decimal-leading-zero) "  "; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-faint); }
.toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--clay-tief); border-bottom-color: var(--clay-tief); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* --- Formular ------------------------------------------------------------- */
.feld { margin-bottom: 22px; }
.feld label {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px;
}
.feld input, .feld select, .feld textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: var(--r-klein); padding: 13px 15px;
  transition: border-color .2s var(--ease);
}
.feld textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--ink); outline: none; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .feld-paar { grid-template-columns: 1fr; gap: 0; } }
.formhinweis { font-size: 1rem; color: var(--ink-faint); margin-top: 16px; max-width: 52ch; }
.formhinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.danke { padding: 30px 0; border-top: 1px solid var(--rule); }
.danke h3 { margin-bottom: 10px; }
.danke p { color: var(--ink-soft); }

/* --- Fuss ----------------------------------------------------------------- */
/* Anthropics Fuss: tiefdunkel, Spaltenueberschriften in Sans 600 ohne
   Versalien, Links klein in Sans. */
.haus-fuss {
  background: var(--night); color: rgba(250, 249, 245, 0.72);
  padding-block: clamp(3.5rem, 3rem + 2vw, 5rem) 2rem;
  margin-top: 0;   /* die Sektionen bringen ihren Abstand selbst mit */
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5;
}
.haus-fuss a { color: rgba(250, 249, 245, 0.72); text-decoration: none; transition: color .2s var(--ease); }
.haus-fuss a:hover { color: var(--ivory-light); }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-marke { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ivory-light); }
.fuss-marke i { font-style: normal; opacity: .7; }
.fuss-satz { margin-top: 14px; font-size: 0.9375rem; max-width: 34ch; }
.fuss-spalte h4 {
  font-family: var(--sans); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0; text-transform: none; color: var(--ivory-light); margin-bottom: 14px;
}
.fuss-spalte ul { list-style: none; }
.fuss-spalte li { margin-bottom: 9px; font-size: 0.9375rem; }
.fuss-unten {
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 22px;
  border-top: 1px solid rgba(250, 249, 245, 0.14);
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0;
  text-transform: none; color: rgba(250, 249, 245, 0.5);
}
.fuss-unten a { color: rgba(250, 249, 245, 0.5); }
.fuss-unten .rechts { margin-left: auto; }
@media (max-width: 860px) { .fuss-raster { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .fuss-raster { grid-template-columns: 1fr; } .fuss-unten .rechts { margin-left: 0; } }

/* --- Mockups (gezeichnete Beispielansichten) ------------------------------ */
.mock { border: 1px solid var(--rule); border-radius: var(--r-haupt); background: var(--paper-raised); overflow: hidden; font-size: 0.9375rem; font-family: var(--sans); }
.mock-kopf { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--flaeche-hover); }
.mock-kopf span { font-family: var(--sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.mock-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--clay); opacity: 1; }
.mock-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.mock-zeile:last-child { border-bottom: 0; }
.mock-zeile b { font-weight: 600; }
.mock-zeile em { display: block; font-style: normal; color: var(--ink-faint); font-size: 0.875rem; margin-top: 3px; }
.mock-marke {
  font-family: var(--sans); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: var(--karte); padding: 5px 10px; border-radius: var(--r-klein); white-space: nowrap;
}
.mock-marke-still { color: var(--ink-faint); background: var(--flaeche-hover); }

/* --- Journal-Beitrag ------------------------------------------------------ */
.pfeil-zurueck::after { content: none; }
.pfeil-zurueck::before { content: "\2190"; margin-right: 8px; }
.beitrag-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.beitrag-zeile time { font-family: var(--sans); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.schild {
  font-family: var(--sans); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: var(--karte); padding: 5px 10px; border-radius: var(--r-klein);
}
.schilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.beitrag-fuss { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }

/* ==========================================================================
   Dunkelmodus.

   Anthropic selbst hat keinen; die Seite ist immer Ivory und benutzt Dunkel
   nur als Flaeche. Manu hat den Umschalter aber ausdruecklich gewollt
   (07.08.2026), deshalb bleibt er: dieselbe Palette, nur umgedreht.
   Grund ist Anthropics slate-dark, Text Anthropics ivory-light, Akzent
   bleibt Clay. Keine neue Farbfamilie.

   Drei Wege muessen dasselbe ergeben:
     1. :root                                  hell (Grundfall)
     2. @media (prefers-color-scheme: dark)    Systemwunsch, ausser der Besucher
                                               hat ausdruecklich hell gewaehlt
     3. :root[data-theme="dark"]               ausdrueckliche Wahl gewinnt immer
   Keine Farbe darf ihre EINZIGE Definition in einem dieser Bloecke haben.
   ========================================================================== */

:root {
  --kopf-schleier: rgba(240, 238, 230, 0.86);
  --fuss-grund:    var(--slate-dark);
  --fuss-text:     rgba(250, 249, 245, 0.72);
  --fuss-hell:     var(--ivory-light);
  --fuss-leise:    rgba(250, 249, 245, 0.5);
  --fuss-linie:    rgba(250, 249, 245, 0.14);
  --code-grund:    var(--slate-dark);
  --code-text:     #e6e4de;
  /* Der dunkle Block: im Hellen die tiefe Flaeche auf Ivory */
  --block-grund:   var(--slate-dark);
  --block-text:    var(--ivory-light);
  --block-leise:   rgba(250, 249, 245, 0.72);
  --block-linie:   rgba(250, 249, 245, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #141413;
    --paper-sunk:   #1f1f1d;
    --paper-raised: #26251f;
    --karte:        #26251f;
    --karte-hover:  #302f28;
    --flaeche-hover: #2b2a24;
    --night:        #0d0d0c;

    --ink:          #faf9f5;
    --ink-soft:     #b0aea5;
    --ink-faint:    #918a7e;

    --rule:         rgba(250, 249, 245, 0.12);
    --rule-strong:  rgba(250, 249, 245, 0.26);

    /* Clay traegt auf Dunkel besser als der tiefere Ton */
    --tinte:        var(--clay);
    --tinte-lift:   #e08d70;
    --tinte-wash:   rgba(217, 119, 87, 0.14);
    --on-tinte:     #141413;
    --on-tinte-soft: rgba(250, 249, 245, 0.72);
    --clay-tief:    #e08d70;

    --knopf-grund:  var(--ivory-light);
    --knopf-text:   #141413;
    --knopf-hover:  var(--ivory-dark);

    --kopf-schleier: rgba(20, 20, 19, 0.86);
    --fuss-grund:   #0d0d0c;
    --fuss-text:    rgba(250, 249, 245, 0.66);
    --fuss-hell:    var(--ivory-light);
    --fuss-leise:   rgba(250, 249, 245, 0.44);
    --fuss-linie:   rgba(250, 249, 245, 0.13);
    --code-grund:   #0d0d0c;
    --code-text:    #e6e4de;

    /* Eine schwarze Flaeche auf schwarzem Grund verschwindet. Der Block wird
       deshalb zur abgesetzten Flaeche. */
    --block-grund:  #1f1f1d;
    --block-text:   var(--ivory-light);
    --block-leise:  rgba(250, 249, 245, 0.72);
    --block-linie:  rgba(250, 249, 245, 0.14);
  }
}

:root[data-theme="dark"] {
  --paper:        #141413;
  --paper-sunk:   #1f1f1d;
  --paper-raised: #26251f;
  --karte:        #26251f;
  --karte-hover:  #302f28;
  --flaeche-hover: #2b2a24;
  --night:        #0d0d0c;

  --ink:          #faf9f5;
  --ink-soft:     #b0aea5;
  --ink-faint:    #918a7e;

  --rule:         rgba(250, 249, 245, 0.12);
  --rule-strong:  rgba(250, 249, 245, 0.26);

  --tinte:        var(--clay);
  --tinte-lift:   #e08d70;
  --tinte-wash:   rgba(217, 119, 87, 0.14);
  --on-tinte:     #141413;
  --on-tinte-soft: rgba(250, 249, 245, 0.72);
  --clay-tief:    #e08d70;

  --knopf-grund:  var(--ivory-light);
  --knopf-text:   #141413;
  --knopf-hover:  var(--ivory-dark);

  --kopf-schleier: rgba(20, 20, 19, 0.86);
  --fuss-grund:   #0d0d0c;
  --fuss-text:    rgba(250, 249, 245, 0.66);
  --fuss-hell:    var(--ivory-light);
  --fuss-leise:   rgba(250, 249, 245, 0.44);
  --fuss-linie:   rgba(250, 249, 245, 0.13);
  --code-grund:   #0d0d0c;
  --code-text:    #e6e4de;

  --block-grund:  #1f1f1d;
  --block-text:   var(--ivory-light);
  --block-leise:  rgba(250, 249, 245, 0.72);
  --block-linie:  rgba(250, 249, 245, 0.14);
}

/* --- Stellen, die sonst feste Farben haetten ------------------------------ */
.haus-kopf { background: var(--kopf-schleier); }
.haus-nav a:hover { background: var(--flaeche-hover); }

.haus-fuss { background: var(--fuss-grund); color: var(--fuss-text); }
.haus-fuss a { color: var(--fuss-text); }
.haus-fuss a:hover { color: var(--fuss-hell); }
.fuss-marke { color: var(--fuss-hell); }
.fuss-spalte h4 { color: var(--fuss-hell); }
.fuss-unten { border-top-color: var(--fuss-linie); color: var(--fuss-leise); }
.fuss-unten a { color: var(--fuss-leise); }
.fuss-unten a:hover { color: var(--fuss-hell); }

.article pre { background: var(--code-grund); color: var(--code-text); }

/* Die dunklen Bloecke laufen in beiden Modi ueber dieselben Variablen */
.tinte > .wrap, .grossruf > .wrap { background: var(--block-grund); color: var(--block-text); }
.tinte h2, .tinte h3, .grossruf h2 { color: var(--block-text); }
.tinte .lead, .tinte p, .grossruf p { color: var(--block-leise); }
.tinte .liste li { border-color: var(--block-linie); }
.tinte .shot { border-color: var(--block-linie); }
.tinte .bildunter { color: var(--block-leise); }
.tinte .pfeil { color: var(--block-text); }

/* Der helle Knopf ist auf dunklem Grund immer Ivory, in beiden Modi */
.knopf-hell { background: var(--ivory-light); color: #141413; border-color: var(--ivory-light); }
.knopf-hell:hover { background: var(--ivory-dark); border-color: var(--ivory-dark); color: #141413; }

/* Im Dunkeln sind die hellen Produktbilder sonst grell */
:root[data-theme="dark"] .shot img { filter: brightness(0.92) contrast(1.02); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot img { filter: brightness(0.92) contrast(1.02); }
}

/* --- Umschalter ----------------------------------------------------------- */
.modus {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 0.875rem;
  letter-spacing: 0; text-transform: none; color: var(--ink-faint);
  padding: 8px 0 8px 20px; margin-left: 20px;
  border-left: 1px solid var(--rule);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.modus:hover { color: var(--ink); }
@media (max-width: 860px) {
  /* Zwei auto-Margins wuerden sich den Platz teilen und den Menue-Knopf in die
     Mitte schieben. Deshalb schiebt nur der Modus, und die Reihenfolge wird
     ueber order gedreht: Marke ... Modus, Menue. */
  .modus { margin-left: auto; margin-right: 20px; padding-left: 0; border-left: 0; order: 2; }
  .nav-schalter { margin-left: 0; order: 3; }
  .haus-nav { order: 4; }
}