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

/* ==========================================================================
   michel.to — Design-System "Haus"  (07.08.2026)
   Ein Haus, mehrere Werkzeuge. Ivory und Tinte, Serif traegt die Stimme,
   Mono die Fakten. Haarlinien statt Karten. Genau ein Akzent: Tintenblau.
   ========================================================================== */

:root {
  /* Flaechen */
  --paper:        #faf9f5;
  --paper-sunk:   #f3f1ea;
  --paper-raised: #ffffff;
  --night:        #191917;

  /* Tinte */
  --ink:          #141413;
  --ink-soft:     #55524b;
  --ink-faint:    #756f65;

  /* Linien */
  --rule:         rgba(20, 20, 19, 0.13);
  --rule-strong:  rgba(20, 20, 19, 0.30);

  /* Akzent — Tintenblau. Einer. */
  --tinte:        #22406b;
  --tinte-lift:   #2f5891;
  --tinte-wash:   rgba(34, 64, 107, 0.06);
  --on-tinte:     #f2f5fa;
  --on-tinte-soft: rgba(242, 245, 250, 0.68);

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

  /* Mass */
  --wrap:        1120px;
  --wrap-narrow: 700px;
  --gutter:      clamp(20px, 5vw, 44px);
  --section:     clamp(64px, 8vw, 112px);

  --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(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; font-size: 0.9rem;
}
.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: var(--wrap-narrow); }

.section { padding-block: var(--section); }
.section-sunk { background: var(--paper-sunk); }
.section-ruled { border-top: 1px solid var(--rule); }
.section-tight { padding-block: clamp(44px, 5vw, 68px); }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 3.85rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); line-height: 1.14; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.24; }
em, i { font-style: italic; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.695rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tinte);
}
.label-still { color: var(--ink-faint); }

.lead {
  font-size: clamp(1.09rem, 1.6vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 56ch;
}

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

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

/* --- Verweise ------------------------------------------------------------- */
.pfeil {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95rem; text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.pfeil::after { content: "\2192"; transition: transform .25s var(--ease); }
.pfeil:hover { color: var(--tinte); border-color: var(--tinte); }
.pfeil:hover::after { transform: translateX(3px); }

.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tinte); color: var(--on-tinte);
  text-decoration: none; font-size: 0.96rem;
  padding: 13px 26px; border-radius: 2px;
  border: 1px solid var(--tinte);
  transition: background .25s var(--ease);
}
.knopf:hover { background: var(--tinte-lift); }
.knopf-still {
  background: transparent; color: var(--ink);
  border-color: var(--rule-strong);
}
.knopf-still:hover { background: var(--tinte-wash); border-color: var(--tinte); }
.knopf-hell {
  background: var(--on-tinte); color: var(--tinte); border-color: var(--on-tinte);
}
.knopf-hell:hover { background: #fff; }

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

/* --- Kopf ----------------------------------------------------------------- */
.haus-kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 249, 245, 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: 68px; }

.marke {
  font-family: var(--serif); font-size: 1.28rem;
  text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.marke i { font-style: italic; color: var(--ink-soft); }

.haus-nav { margin-left: auto; }
.haus-nav ul { list-style: none; display: flex; align-items: center; gap: 30px; }
.haus-nav a {
  text-decoration: none; font-size: 0.925rem; color: var(--ink-soft);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.haus-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.haus-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tinte); }

.nav-schalter {
  display: none; margin-left: auto; background: none; border: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); cursor: pointer; padding: 10px 2px;
}

@media (max-width: 800px) {
  .nav-schalter { display: block; }
  .haus-nav {
    position: fixed; inset: 68px 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: 340px; }
  .haus-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; }
  .haus-nav a { display: block; padding: 13px 0; font-size: 1.02rem; border-bottom: 1px solid var(--rule); }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(58px, 8vw, 104px) clamp(40px, 5vw, 62px); }
.hero .label { margin-bottom: 26px; }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-top: 26px; }
.hero .knopfreihe { margin-top: 34px; }

/* --- Portfolio-Reihen (die Signature dieser Seite) ------------------------ */
.reihen { border-top: 1px solid var(--rule); }
.reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 132px;
  gap: 28px; align-items: baseline;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
a.reihe:hover { background: var(--tinte-wash); padding-inline: 14px; }
.reihe .name { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.012em; }
.reihe .was { font-size: 0.965rem; color: var(--ink-soft); }
.reihe .stand {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinte); text-align: right;
}
.reihe-leise .name { color: var(--ink-faint); font-style: italic; }
.reihe-leise .stand { color: var(--ink-faint); }

@media (max-width: 720px) {
  .reihe { grid-template-columns: 1fr auto; gap: 6px 18px; padding-block: 22px; }
  .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: 190px minmax(0, 1fr) auto;
  gap: 32px; align-items: start;
  padding-block: 34px; border-bottom: 1px solid var(--rule);
}
.saeule h3 { padding-top: 2px; }
.saeule p { color: var(--ink-soft); font-size: 0.99rem; max-width: 58ch; }
.saeule .pfeil { white-space: nowrap; }
@media (max-width: 820px) {
  .saeule { grid-template-columns: 1fr; gap: 14px; }
}

/* Enge Fassung fuer die halbe Spalte auf der Startseite */
.saeulen-eng .saeule { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; padding-block: 28px; }
.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(32px, 6vw, 84px); 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: 34px; } }

/* --- Betriebsprotokoll ---------------------------------------------------- */
.protokoll { list-style: none; border-top: 1px solid var(--rule); }
.protokoll li {
  display: grid; grid-template-columns: 78px minmax(0, 1fr);
  gap: 20px; padding-block: 15px; border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.protokoll time {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-faint); padding-top: 3px;
}
.protokoll .was { color: var(--ink-soft); }
.protokoll b { font-weight: 500; 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: 24px; border-bottom: 1px solid var(--rule); }
.zahl b { display: block; font-family: var(--serif); font-size: 2.35rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
.zahl span { display: block; margin-top: 9px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Tintenblock (dunkle Sektion) ---------------------------------------- */
.tinte {
  background: var(--tinte); color: var(--on-tinte);
}
.tinte h2, .tinte h3 { color: var(--on-tinte); }
.tinte .lead, .tinte p { color: var(--on-tinte-soft); }
.tinte .label { color: var(--on-tinte-soft); }
.tinte .liste li { border-color: rgba(242, 245, 250, 0.18); }
.tinte .liste li::before { background: var(--on-tinte-soft); }
.tinte .shot { border-color: rgba(242, 245, 250, 0.22); }

/* --- Listen --------------------------------------------------------------- */
.liste { list-style: none; }
.liste li {
  position: relative; padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--rule); font-size: 0.99rem;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 7px; height: 1px; background: var(--ink-faint);
}
.liste li:last-child { border-bottom: 0; }

/* --- Screenshots ---------------------------------------------------------- */
.shot { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--paper-raised); }
.shot img { width: 100%; }
.bildunter { margin-top: 11px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Journal-Anrisse ------------------------------------------------------ */
.anrisse { border-top: 1px solid var(--rule); }
.anriss {
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  gap: 28px; padding-block: 26px; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: background .25s var(--ease), padding-inline .25s var(--ease);
}
.anriss:hover { background: var(--tinte-wash); padding-inline: 14px; }
.anriss .datum { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em; color: var(--ink-faint); padding-top: 6px; }
.anriss h3 { font-size: clamp(1.15rem, 1.9vw, 1.38rem); }
.anriss p { margin-top: 8px; color: var(--ink-soft); font-size: 0.95rem; max-width: 62ch; }
@media (max-width: 640px) { .anriss { grid-template-columns: 1fr; gap: 8px; } }

/* --- Seitenkopf (Unterseiten) -------------------------------------------- */
.pagehead { padding-block: clamp(52px, 6vw, 84px) clamp(30px, 4vw, 48px); }
.pagehead .label { margin-bottom: 22px; }
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { margin-top: 24px; }

/* --- Fliesstext (Rechtstexte, Blog) -------------------------------------- */
.article { max-width: 68ch; }
.article h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.75rem);
  margin-top: 2.6em; margin-bottom: 0.7em;
  padding-top: 1.5em; 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(--mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte);
  margin-bottom: 12px; letter-spacing: 0.16em;
}
.article h3 { margin-top: 1.9em; 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; }
.article a { color: var(--tinte); text-underline-offset: 3px; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.94rem; 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(--mono); font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.article blockquote { border-left: 2px solid var(--tinte); padding-left: 20px; margin: 1.6em 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; }
.article code { font-family: var(--mono); font-size: 0.88em; background: var(--paper-sunk); padding: 2px 5px; border-radius: 2px; }
.article pre { background: var(--night); color: #e6e4de; padding: 20px; border-radius: 3px; overflow-x: auto; margin-bottom: 1.4em; font-size: 0.85rem; }
.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: 1px solid var(--rule); border-radius: 3px; margin: 1.6em 0; }

.stand { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; 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(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 400; }
.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: 0.93rem; padding-left: 2.4em; text-indent: -2.4em; }
.toc li::before { content: counter(toc, decimal-leading-zero) "  "; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--tinte); border-bottom-color: var(--tinte); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* --- Formular ------------------------------------------------------------- */
.feld { margin-bottom: 22px; }
.feld label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.13em; 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);
  border-radius: 2px; 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(--tinte); 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: 0.86rem; color: var(--ink-faint); margin-top: 16px; max-width: 52ch; }
.formhinweis a { color: var(--tinte); }
.danke { padding: 30px 0; border-top: 1px solid var(--rule); }
.danke h3 { margin-bottom: 10px; }
.danke p { color: var(--ink-soft); }

/* --- Fuss ----------------------------------------------------------------- */
.haus-fuss { background: var(--night); color: rgba(250, 249, 245, 0.72); padding-block: clamp(52px, 6vw, 76px) 34px; margin-top: var(--section); }
.haus-fuss a { color: rgba(250, 249, 245, 0.72); text-decoration: none; transition: color .2s var(--ease); }
.haus-fuss a:hover { color: #faf9f5; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-marke { font-family: var(--serif); font-size: 1.28rem; color: #faf9f5; }
.fuss-marke i { font-style: italic; opacity: .7; }
.fuss-satz { margin-top: 14px; font-size: 0.9rem; max-width: 34ch; line-height: 1.6; }
.fuss-spalte h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(250, 249, 245, 0.42); font-weight: 400; margin-bottom: 15px; }
.fuss-spalte ul { list-style: none; }
.fuss-spalte li { margin-bottom: 10px; font-size: 0.92rem; }
.fuss-unten { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline; margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 1px solid rgba(250, 249, 245, 0.14); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(250, 249, 245, 0.42); }
.fuss-unten a { color: rgba(250, 249, 245, 0.55); }
.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: 3px; background: var(--paper-raised); overflow: hidden; font-size: 0.82rem; }
.mock-kopf { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--rule); background: var(--paper-sunk); }
.mock-kopf span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-faint); }
.mock-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--tinte); opacity: .55; }
.mock-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--rule); }
.mock-zeile:last-child { border-bottom: 0; }
.mock-zeile b { font-weight: 500; }
.mock-zeile em { display: block; font-style: normal; color: var(--ink-faint); font-size: 0.78rem; margin-top: 3px; }
.mock-marke { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte); background: var(--tinte-wash); padding: 4px 9px; border-radius: 2px; white-space: nowrap; }
.mock-marke-still { color: var(--ink-faint); background: var(--paper-sunk); }

/* --- 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: 22px; }
.beitrag-zeile time { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.schild { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tinte); background: var(--tinte-wash); padding: 4px 9px; border-radius: 2px; }
.schilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.beitrag-fuss { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--rule); }

/* ==========================================================================
   Dunkelmodus (07.08.2026) — warmes Kohle.
   Der Grundton bleibt warm, damit die Marke in beiden Modi dieselbe ist.
   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 {
  /* Flaechen, die frueher fest verdrahtet waren */
  --kopf-schleier: rgba(250, 249, 245, 0.86);
  --fuss-grund:    #191917;
  --fuss-text:     rgba(250, 249, 245, 0.72);
  --fuss-hell:     #faf9f5;
  --fuss-leise:    rgba(250, 249, 245, 0.42);
  --fuss-linie:    rgba(250, 249, 245, 0.14);
  --code-grund:    #191917;
  --code-text:     #e6e4de;
  /* Der SilentCRM-Block: im Hellen eine blaue Flaeche */
  --block-grund:   var(--tinte);
  --block-text:    var(--on-tinte);
  --block-leise:   var(--on-tinte-soft);
  --block-linie:   rgba(242, 245, 250, 0.18);
  --block-kante:   transparent;
  --block-kante-breite: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #1a1917;
    --paper-sunk:   #211f1c;
    --paper-raised: #252320;
    --night:        #111010;

    --ink:          #ece8e0;
    --ink-soft:     #a8a298;
    --ink-faint:    #918a7e;

    --rule:         rgba(236, 232, 224, 0.14);
    --rule-strong:  rgba(236, 232, 224, 0.30);

    --tinte:        #8fb0dd;
    --tinte-lift:   #a8c3e8;
    --tinte-wash:   rgba(143, 176, 221, 0.09);
    --on-tinte:     #12171f;
    --on-tinte-soft: rgba(18, 23, 31, 0.72);

    --kopf-schleier: rgba(26, 25, 23, 0.86);
    --fuss-grund:   #111010;
    --fuss-text:    rgba(236, 232, 224, 0.66);
    --fuss-hell:    #ece8e0;
    --fuss-leise:   rgba(236, 232, 224, 0.40);
    --fuss-linie:   rgba(236, 232, 224, 0.13);
    --code-grund:   #111010;
    --code-text:    #e6e4de;

    /* Blau als Flaeche verschwindet im Dunkeln. Der Block wird deshalb zur
       abgesetzten Flaeche mit tintenblauer Oberkante. */
    --block-grund:  #1d2530;
    --block-text:   var(--ink);
    --block-leise:  var(--ink-soft);
    --block-linie:  var(--rule);
    --block-kante:  var(--tinte);
    --block-kante-breite: 2px;
  }
}

:root[data-theme="dark"] {
  --paper:        #1a1917;
  --paper-sunk:   #211f1c;
  --paper-raised: #252320;
  --night:        #111010;

  --ink:          #ece8e0;
  --ink-soft:     #a8a298;
  --ink-faint:    #918a7e;

  --rule:         rgba(236, 232, 224, 0.14);
  --rule-strong:  rgba(236, 232, 224, 0.30);

  --tinte:        #8fb0dd;
  --tinte-lift:   #a8c3e8;
  --tinte-wash:   rgba(143, 176, 221, 0.09);
  --on-tinte:     #12171f;
  --on-tinte-soft: rgba(18, 23, 31, 0.72);

  --kopf-schleier: rgba(26, 25, 23, 0.86);
  --fuss-grund:   #111010;
  --fuss-text:    rgba(236, 232, 224, 0.66);
  --fuss-hell:    #ece8e0;
  --fuss-leise:   rgba(236, 232, 224, 0.40);
  --fuss-linie:   rgba(236, 232, 224, 0.13);
  --code-grund:   #111010;
  --code-text:    #e6e4de;

  --block-grund:  #1d2530;
  --block-text:   var(--ink);
  --block-leise:  var(--ink-soft);
  --block-linie:  var(--rule);
  --block-kante:  var(--tinte);
  --block-kante-breite: 2px;
}

/* --- Stellen, die vorher feste Farben hatten ------------------------------ */
.haus-kopf { background: var(--kopf-schleier); }

.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-leise); }
.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); }
.knopf-hell:hover { background: var(--paper-raised); }

/* Der SilentCRM-Block, in beiden Modi ueber dieselben Variablen */
.tinte {
  background: var(--block-grund); color: var(--block-text);
  border-top: var(--block-kante-breite) solid var(--block-kante);
}
.tinte h2, .tinte h3 { color: var(--block-text); }
.tinte .lead, .tinte p { color: var(--block-leise); }
.tinte .label { color: var(--block-leise); }
.tinte .liste li { border-color: var(--block-linie); }
.tinte .liste li::before { background: var(--block-leise); }
.tinte .shot { border-color: var(--block-linie); }
.tinte .bildunter { color: var(--block-leise); }
.tinte .pfeil { color: var(--block-text); border-color: var(--block-linie); }
.tinte .pfeil:hover { color: var(--block-text); border-color: var(--block-text); }
/* Im Dunkeln ist der helle Knopf der Akzent selbst */
:root[data-theme="dark"] .tinte .knopf-hell,
:root[data-theme="dark"] .knopf-hell { background: var(--tinte); color: var(--on-tinte); border-color: var(--tinte); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf-hell { background: var(--tinte); color: var(--on-tinte); border-color: var(--tinte); }
}

/* 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(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 0 8px 26px; margin-left: 26px;
  border-left: 1px solid var(--rule);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.modus:hover { color: var(--ink); }
@media (max-width: 800px) {
  /* 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; }
}