/*
  Baukasten — Gestaltung
  ══════════════════════

  🔴 DIE WERTE STEHEN AN EINER STELLE.

  Das ist keine Ordnungsliebe, sondern die Lehre aus dem eigenen Gestaltungsreiter
  (10.08.2026): „Wer eine durchgehende Optik ändern soll, sucht zuerst die eine Stelle,
  an der sie definiert ist. Wer stattdessen an einzelnen Bauteilen arbeitet, hat nach
  einem Tag einen Flickenteppich und findet den Rest nie."

  Die Farbwerte sind aus `petreechor-site-current/src/index.css` übernommen, nicht
  nachempfunden — dort heißt das Grundsystem „Zen Linen".

  ⏳ Die Schriften stehen noch als Stapel mit Systemrückfall. Die Angleichung an
  petreechor.com (eigene Schriftdateien, lokal ausgeliefert) läuft im Gestaltungsdurchgang;
  siehe Vault „Baukasten - Design-Angleichung".
*/

:root {
  /* ── Zen Linen, wörtlich aus der Website ──────────────────────────────────────── */
  --grund: #141414;          /* --bg     */
  --feld: #1d1c19;           /* --panel  */
  --karte: #2b2a27;          /* --card   */
  --schrift: #e8e3da;        /* --ink     Kontrast auf --grund 13,7 : 1 */
  --schrift-sanft: #d1cfc0;  /* --soft    11,4 : 1 */
  --schrift-leise: #8e8a83;  /* --softer   5,1 : 1 */
  --linie: color-mix(in srgb, var(--schrift) 16%, transparent);
  --linie-stark: color-mix(in srgb, var(--schrift) 32%, transparent);
  --akzent: #d1cfc0;         /* --wasser  */
  --knopf-schrift: #373633;  /* --btn-text */
  --warnung: #f4978e;        /* --danger  */

  --rundung: 0.75rem;        /* --radius  */
  --haarlinie: 1px;          /* --outline-w — Haarlinie statt Kontur (10.08.2026) */
  --finger: 44px;            /* --ziel-finger */

  --serif: 'Instrument Serif', Georgia, serif;
  --fest: 'Fragment Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --anzeige: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Helle Umgebung. Die Website ist dunkelgeboren; hier wird gespiegelt, nicht erfunden. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dunkel"]) {
    --grund: #f2f0ea;
    --feld: #e9e6dd;
    --karte: #ded9cd;
    --schrift: #1f1e1b;
    --schrift-sanft: #3a3833;
    --schrift-leise: #5e5a52;
    --linie: color-mix(in srgb, var(--schrift) 14%, transparent);
    --linie-stark: color-mix(in srgb, var(--schrift) 30%, transparent);
    --akzent: #5c5546;
    --knopf-schrift: #f2f0ea;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Kopf ─────────────────────────────────────────────────────────────────────────── */

.kopf {
  border-bottom: var(--haarlinie) solid var(--linie);
  padding: 14px 20px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: start;
}

.marke { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; }
.wortmarke { font-family: var(--anzeige); font-weight: 600; letter-spacing: -0.01em; }
.werkzeugname {
  font-family: var(--fest); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--schrift-leise);
}

.leiste { display: flex; gap: 2px; flex-wrap: wrap; }
.leiste button {
  font-family: var(--fest); font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 13px; min-height: var(--finger);
  color: var(--schrift-leise); cursor: pointer; white-space: nowrap;
}
.leiste button:hover { color: var(--schrift); }
.leiste button[aria-current="page"] {
  color: var(--schrift); border-bottom-color: var(--akzent); font-weight: 700;
}
.leiste button:focus-visible,
.flaeche :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.person { padding-bottom: 10px; text-align: right; }
.person label {
  display: block; font-family: var(--fest); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--schrift-leise);
}
.person select {
  min-height: var(--finger); background: var(--feld); color: var(--schrift);
  border: var(--haarlinie) solid var(--linie-stark); border-radius: var(--rundung);
  padding: 0 10px; font-family: var(--text); font-size: 13px;
}
.mini { margin: 3px 0 0; font-size: 11px; color: var(--schrift-leise); }

/* ── Fläche ───────────────────────────────────────────────────────────────────────── */

.flaeche { max-width: 900px; margin: 0 auto; padding: 24px 20px 90px; }
.flaeche:focus { outline: none; }
.laedt { color: var(--schrift-leise); font-family: var(--fest); font-size: 12px; }

h1 {
  font-family: var(--anzeige); font-weight: 600;
  font-size: clamp(21px, 3vw, 28px); line-height: 1.15;
  margin: 0 0 8px; letter-spacing: -0.015em;
}
h2 { font-family: var(--anzeige); font-size: 18px; margin: 0 0 6px; }
h3 { font-family: var(--anzeige); font-size: 15px; margin: 0 0 4px; }
.vorspann { max-width: 66ch; color: var(--schrift-sanft); font-size: 14.5px; margin: 0 0 24px; }
.kicker {
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 4px;
}

/* Abstand zwischen Gruppen deutlich größer als innerhalb — dann braucht es kaum Linien.
   (Eigener Gestaltungsreiter: „Weißraum ist die Gliederung".) */
.abschnitt { margin-top: 34px; }
.abschnitt > * + * { margin-top: 10px; }

/* ── Kacheln und Zeilen ───────────────────────────────────────────────────────────── */

.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 620px) { .raster { grid-template-columns: 1fr; } }

.kachel {
  text-align: left; width: 100%;
  border: var(--haarlinie) solid var(--linie-stark);
  border-radius: var(--rundung);
  background: var(--feld); color: inherit;
  padding: 17px 18px; cursor: pointer; min-height: var(--finger);
  font: inherit;
}
.kachel:hover { border-color: var(--akzent); }
.kachel .nummer {
  font-family: var(--fest); font-size: 11px; color: var(--schrift-leise);
}
.kachel p { margin: 4px 0 10px; font-size: 13px; color: var(--schrift-sanft); }

/*
  Die Breite setzt app.js über das CSSOM, nicht über ein `style`-Attribut im Markup —
  das blockiert die Sicherheitsrichtlinie dieser Seite (siehe balkenSetzen()).
  `width: 0` hier ist deshalb der ehrliche Ausgangswert und keine Vergesslichkeit.
*/
.balken { height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.balken i { display: block; height: 100%; width: 0; background: var(--akzent); }

/* Kleine Hilfsklassen — bewusst wenige, damit sie nicht zum zweiten Stilsystem werden. */
.abstand-oben { margin-top: 18px; }
.feld.breit { flex: 1 1 100%; }
.chip { margin: 0 6px 6px 0; }
.zaehler {
  display: block; margin-top: 6px;
  font-family: var(--fest); font-size: 10.5px; color: var(--schrift-leise);
}

.liste { display: flex; flex-direction: column; gap: 1px; }
.zeile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--feld); border: none;
  border-bottom: var(--haarlinie) solid var(--linie);
  padding: 14px 16px; min-height: var(--finger); cursor: pointer;
}
.zeile:hover { background: var(--karte); }

.marke-zustand {
  font-family: var(--fest); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  border: var(--haarlinie) solid var(--linie-stark); color: var(--schrift-leise);
  white-space: nowrap;
}
.marke-zustand.ablauf { color: var(--akzent); border-color: var(--akzent); }

/* ── Felder ───────────────────────────────────────────────────────────────────────── */

.tafel {
  border: var(--haarlinie) solid var(--linie);
  border-radius: var(--rundung); background: var(--feld);
  padding: 16px 18px; margin-bottom: 14px;
}
.tafel > .titel {
  font-family: var(--fest); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--schrift-leise);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

.feldgruppe + .feldgruppe { margin-top: 18px; }
.feldgruppe > .gruppentitel {
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 8px;
}
.feldreihe { display: flex; flex-wrap: wrap; gap: 10px; }

.feld { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.feld > span { font-size: 12px; color: var(--schrift-sanft); }
.feld input, .feld textarea {
  font-family: var(--text); font-size: 13px; padding: 10px;
  min-height: var(--finger);
  background: var(--grund); color: var(--schrift);
  border: var(--haarlinie) solid var(--linie-stark); border-radius: var(--rundung);
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); }

/*
  Pflichtfelder: vorne markiert, beim VERLASSEN bemängelt, nie erst am Knopf.
  (Dauerregel vom 21.08.2026, Volltext in Firma/CLAUDE.md.)
  `:user-invalid` schlägt erst an, wenn jemand das Feld verlassen hat — nicht beim
  dritten Zeichen eines zehnstelligen Namens.
*/
.feld .pflicht { color: var(--akzent); font-family: var(--fest); font-size: 10px; }
.feld .freiwillig { color: var(--schrift-leise); font-family: var(--fest); font-size: 10px; }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--warnung); }
.feld .mangel { display: none; color: var(--warnung); font-size: 11.5px; }
.feld input:user-invalid ~ .mangel, .feld textarea:user-invalid ~ .mangel { display: block; }

.herkunft-vorschlag {
  border-left: 3px solid var(--akzent); padding-left: 8px;
}
.herkunft-vorschlag .quelle {
  font-family: var(--fest); font-size: 10px; color: var(--akzent);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Schritte ─────────────────────────────────────────────────────────────────────── */

.phase {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 12px;
}
.phase .zeichen {
  font-family: var(--fest); font-weight: 700; font-size: 11px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: var(--haarlinie) solid var(--akzent); border-radius: 999px; color: var(--akzent);
}
.phase .name {
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.phase .strich { flex: 1; height: var(--haarlinie); background: var(--linie); }

.schritt {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: var(--haarlinie) solid var(--linie);
}
.schritt.erledigt > .rumpf > h3 { color: var(--schrift-leise); text-decoration: line-through; }
.schritt input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--akzent); }
.schritt .kaestchen { min-width: var(--finger); min-height: var(--finger); display: grid; place-items: center; cursor: pointer; }
.schritt .rumpf { flex: 1; min-width: 0; }
.schritt .werkzeug {
  font-family: var(--fest); font-size: 10.5px; color: var(--schrift-leise);
  letter-spacing: 0.04em;
}
.schritt p { margin: 6px 0 0; font-size: 13.5px; color: var(--schrift-sanft); }
.schritt .wer {
  font-family: var(--fest); font-size: 10.5px; color: var(--akzent);
}

.warnkasten {
  margin-top: 10px; padding: 10px 12px;
  border: var(--haarlinie) solid var(--warnung); border-radius: var(--rundung);
  font-size: 12.5px; color: var(--schrift-sanft);
}
.warnkasten b { display: block; color: var(--warnung); font-family: var(--fest); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }

.wirkung {
  margin-top: 10px; padding: 10px 12px; background: var(--karte);
  border-radius: var(--rundung); font-size: 12.5px; color: var(--schrift-sanft);
}
.wirkung b { display: block; font-family: var(--fest); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--schrift-leise); margin-bottom: 4px; }

/* ── Prompt ───────────────────────────────────────────────────────────────────────── */

.prompt { margin-top: 12px; border: var(--haarlinie) solid var(--linie-stark); border-radius: var(--rundung); overflow: hidden; }
/*
  🔴 --schrift-sanft, nicht --schrift-leise. Gemessen am 27.08.2026 auf der laufenden
  Seite: leise auf --karte ergibt **4,18 : 1** — unter den 4,5 : 1, die Kleintext braucht.
  Es ist die einzige Stelle im ganzen Werkzeug, die durchgefallen ist, und sie faellt beim
  Ansehen nicht auf: Der Text ist lesbar, nur eben nicht lesbar genug. Deshalb gerechnet
  statt geschaut.
*/
.prompt .kopfzeile {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--karte);
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--schrift-sanft);
}
.prompt pre {
  margin: 0; padding: 14px; overflow-x: auto;
  font-family: var(--fest); font-size: 12px; line-height: 1.6;
  color: var(--schrift); white-space: pre-wrap; word-break: break-word;
}
.prompt .fehlt {
  padding: 8px 14px; border-top: var(--haarlinie) solid var(--linie);
  font-size: 11.5px; color: var(--schrift-leise);
}

button.tat {
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 32px; padding: 0 12px; cursor: pointer;
  background: var(--akzent); color: var(--knopf-schrift);
  border: none; border-radius: var(--rundung);
}
button.tat.leise { background: none; color: var(--schrift-leise); border: var(--haarlinie) solid var(--linie-stark); }
button.tat.leise:hover { color: var(--schrift); border-color: var(--schrift); }
button.tat:hover { filter: brightness(1.08); }
button.tat.fertig { background: transparent; color: var(--akzent); border: var(--haarlinie) solid var(--akzent); }

/* ── Tabellen ─────────────────────────────────────────────────────────────────────── */

.rollbar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: var(--haarlinie) solid var(--linie); vertical-align: top; }
th { font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--schrift-leise); }

.hinweis {
  margin-top: 16px; padding: 12px 14px; background: var(--karte);
  border-radius: var(--rundung); font-size: 12.5px; color: var(--schrift-sanft);
}

.fuss {
  border-top: var(--haarlinie) solid var(--linie);
  padding: 12px 20px; font-family: var(--fest); font-size: 10.5px;
  color: var(--schrift-leise);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Die Trainingsschleife: Bewertung und Fassungen ──────────────────────────────── */

.nachlauf:empty { display: none; }
.bewertung, .fassungen {
  padding: 12px 14px;
  border-top: var(--haarlinie) solid var(--linie);
  background: var(--karte);
}
.bewertung > * + *, .fassungen > * + * { margin-top: 10px; }
.frage {
  font-family: var(--fest); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--schrift-leise);
}
.noten { display: flex; gap: 6px; }
.noten .note { min-width: var(--finger); min-height: 32px; }
.quittung { font-size: 11.5px; color: var(--schrift-leise); min-height: 1em; }
.fassungen table { font-size: 12px; }

/* ── KI-Label ────────────────────────────────────────────────────────────────────── */

.lblkarte {
  border: var(--haarlinie) solid var(--linie-stark);
  border-radius: var(--rundung);
  margin-bottom: 12px;
  overflow: hidden;
}
.lblkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--karte);
}
.lblkopf b { font-family: var(--anzeige); font-size: 13px; }
.lblmass { font-family: var(--fest); font-size: 10.5px; color: var(--schrift-leise); margin-right: auto; }

/*
  Zwei Proben nebeneinander: hell und dunkel. Ein Label, das nur auf einem von beiden
  lesbar ist, faellt sonst erst am fertigen Kundenbild auf — und dann ist es gedruckt.
*/
.lblproben { display: grid; grid-template-columns: 1fr 1fr; }
.lblprobe { display: grid; place-items: center; padding: 18px; overflow-x: auto; }
.lblprobe canvas { max-width: 100%; height: auto; }
.lblHell { background: #f2f0ea; }
.lblDunkel { background: #141414; }
@media (max-width: 620px) { .lblproben { grid-template-columns: 1fr; } }

.lblalt {
  padding: 8px 12px; border-top: var(--haarlinie) solid var(--linie);
  font-size: 11.5px; color: var(--schrift-leise);
}