/*
  Richtung "Stickrahmen" (gewählt 28.09.2026, Vorlage entwuerfe2/b)
  Ein Nähtisch in tiefem Graublau #22313D, darauf Leinen #E4DDCF im runden Holzreifen.
  Die Fäden sind Stickgarne: Senf #D99A0F, Pflaume #6A2D91, Petrol #0B6F86, Rost #C8551B.
  Wortarten als Garne: Hauptwort Magenta #B0105F, Zeitwort Smaragd #066640,
  Eigenschaftswort Kobalt #2244B0, Umlaut Goldgarn #765505, übrige Wörter Leinengrau.
  Ziele in Kreuzstich-Rot #A61E2D, Vorzeichen-Raster in Pausblau #4F79BC.
  Schriften: Bricolage Grotesque (Titel, Namen, gestickte Wörter), Schibsted Grotesk (Bedienung),
  DM Mono nur für Zahlen. Dateien: style.css (Grundlagen), stil-brett.css (Brett),
  stil-spiel.css (Aufbau Spiel), stil-karte.css (Karten rechts, Protokoll), stil-start.css (Start, Befund).
*/

:root {
  --tisch: #22313D;
  --tisch-tief: #18232C;
  --tisch-hell: #2D3F4D;
  --tisch-linie: #3C5263;
  --auf-tisch: #EDE7DA;
  --auf-tisch-leise: #AEBAC4;

  --leinen: #E4DDCF;
  --leinen-hell: #EDE8DD;
  --leinen-weiss: #F7F4EC;
  --leinen-dunkel: #D3CAB7;
  --leinen-schatten: #B9AD95;
  --tinte: #2B2622;
  --tinte-2: #5E564B;
  --tinte-3: #7A7266;
  --papier: #F4F1E6;
  --druck: #4F79BC;

  --spieler-0: #D99A0F; --spieler-0-dunkel: #97680A; --spieler-0-hell: #FFD978; --spieler-0-text: #7A5200;
  --spieler-1: #6A2D91; --spieler-1-dunkel: #43195E; --spieler-1-hell: #C9A0EA; --spieler-1-text: #5C2580;
  --spieler-2: #0B6F86; --spieler-2-dunkel: #064B5B; --spieler-2-hell: #7FD3E6; --spieler-2-text: #075366;
  --spieler-3: #C8551B; --spieler-3-dunkel: #8A3510; --spieler-3-hell: #FFB083; --spieler-3-text: #93390E;

  --wa-haupt: #B0105F; --wa-haupt-hell: #F27BBB;
  --wa-zeit: #066640; --wa-zeit-hell: #6FD8A5;
  --wa-eigen: #2244B0; --wa-eigen-hell: #93ACF6;
  --wa-flug: #765505; --wa-flug-hell: #E9CB6E;
  --wa-ohne: #6F685C;
  --kreuz-rot: #A61E2D;
  --kreuz-dunkel: #7C1320;
  --mech-garn: #3E3630;
  --rot: #B3261E;
  --blau: var(--wa-eigen);

  --f-titel: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  --f-text: 'Schibsted Grotesk', 'Helvetica Neue', sans-serif;
  --f-zahl: 'DM Mono', ui-monospace, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --webung:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.28) 0 1.3px, transparent 1.3px 3.4px),
    repeating-linear-gradient(90deg, rgba(160, 145, 115, 0.16) 0 1.2px, transparent 1.2px 3.4px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: contain; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--tisch);
  /* the sewing table: a faint cutting mat under a lamp */
  background-image:
    radial-gradient(ellipse 70% 60% at 45% 40%, rgba(255, 244, 220, 0.06), transparent 70%),
    linear-gradient(rgba(96, 124, 146, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 124, 146, 0.14) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
  color: var(--auf-tisch);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b, strong { font-weight: 650; }
.mono, .zahl { font-family: var(--f-zahl); font-variant-numeric: tabular-nums; }
.zahl { font-weight: 500; }
.klein { font-size: 13px; }
:focus-visible { outline: 3px solid var(--spieler-0-hell); outline-offset: 3px; }
.nur-vorleser {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }
::selection { background: rgba(217, 154, 15, 0.35); }

/* surfaces made of linen: dark ink on light cloth */
.leinen, .karte, .notiz-karte, .bogen, .etikett, .feldkarte, .verordnung, .dialog, .demo-karte,
.weg-hinweis, .schlussbefund, .vermerk, .voraus-liste li, .voraus li {
  color: var(--tinte);
}

/* ---- the title label with the cross stitched name ------------------------------------------------ */
.etikett-titel, .kopf-titel {
  position: relative;
  display: inline-block;
  background: var(--leinen);
  background-image: var(--webung);
  padding: 9px 13px;
  border-radius: 2px;
  box-shadow: 0 2px 0 var(--leinen-schatten), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.etikett-titel::after, .kopf-titel::after {
  content: '';
  position: absolute; inset: 4px;
  border: 1.5px dashed rgba(166, 30, 45, 0.55);
  pointer-events: none;
}
.titel-kreuz { display: block; height: 22px; width: auto; }
.kopf-titel .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kreuz path { fill: none; stroke-linecap: round; }
.kreuz .kreuz-unten { stroke: var(--kreuz-dunkel); stroke-width: 1.35; }
.kreuz .kreuz-oben { stroke: var(--kreuz-rot); stroke-width: 1.35; }
.kreuz.titel path { stroke-width: 1.8; }
.motiv { display: inline-block; vertical-align: middle; flex: none; }

/* ---- buttons --------------------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;
  font-family: var(--f-text); font-weight: 700; font-size: 16px;
  color: #fff;
  background: var(--knopf-farbe, var(--kreuz-rot));
  border: 0;
  padding: 10px 22px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  outline: 1.5px dashed rgba(255, 255, 255, 0.55);
  outline-offset: -6px;
}
.knopf:hover { filter: brightness(1.1); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.knopf:focus-visible { outline: 3px solid var(--spieler-0-hell); outline-offset: 3px; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.knopf-zweit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  font-weight: 650; font-size: 15px;
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
}
.knopf-zweit:hover { background: rgba(127, 127, 127, 0.14); }
.knopf-zweit:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf-link {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: inherit; font-weight: 600; font-size: 14px;
  text-decoration: underline dashed; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.knopf-link:hover { text-decoration-style: solid; }
.leise {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--auf-tisch-leise); font-size: 13.5px; font-weight: 600;
  text-decoration: underline dashed; text-underline-offset: 4px;
}
.leise:hover, .leise[aria-pressed="true"] { color: var(--auf-tisch); text-decoration-style: solid; }
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* ---- forms --------------------------------------------------------------------------------------------- */
.feld-linie {
  width: 100%;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-bottom: 2px dashed var(--tinte-3);
  padding: 8px 10px;
  color: var(--tinte);
  border-radius: 2px 2px 0 0;
}
.feld-linie:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--tinte); background: rgba(255, 255, 255, 0.75); }
.feld-linie::placeholder { color: var(--tinte-3); }
textarea.feld-linie { resize: none; line-height: 1.5; field-sizing: content; min-height: 44px; overflow: hidden; }
.feld-linie.statisch { display: flex; align-items: center; background: transparent; border-bottom-style: dotted; }
.fehler { color: var(--rot); font-weight: 600; font-size: 14px; min-height: 1em; }
.hinweis, .hilfe { font-size: 13.5px; color: var(--auf-tisch-leise); }
.leinen .hinweis, .karte .hilfe, .bogen .hinweis, .notiz-karte .hilfe { color: var(--tinte-2); }

/* ---- top bar (start screen, waiting room) -------------------------------------------------------- */
.reiter { border-bottom: 1px solid var(--tisch-linie); background: rgba(24, 35, 44, 0.6); }
.reiter-innen { max-width: 1240px; margin: 0 auto; padding: 0 var(--s5); display: flex; align-items: center; gap: var(--s5); min-height: 48px; }
.reiter-tab { font-weight: 650; font-size: 14.5px; color: var(--auf-tisch-leise); text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; }
.reiter-tab.ist-aktiv, .reiter-tab:hover { color: var(--auf-tisch); border-bottom: 2px dashed var(--spieler-0); }
.reiter-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s4); font-size: 13.5px; color: var(--auf-tisch-leise); }
.akte-nr .mono { color: var(--auf-tisch); }

/* ---- footer ---------------------------------------------------------------------------------------- */
.fuss {
  max-width: 1240px; margin: var(--s7) auto 0; padding: var(--s6) var(--s5) var(--s7);
  border-top: 1px solid var(--tisch-linie);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s6);
  color: var(--auf-tisch-leise); font-size: 14px;
}
.fuss-titel { font-family: var(--f-titel); font-weight: 700; font-size: 16px; color: var(--auf-tisch); margin-bottom: var(--s2); }
.fuss-person p + p { margin-top: var(--s2); }
.fuss-person b { color: var(--auf-tisch); }
.fuss-links, .fuss-recht { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; }
.fuss-recht { align-self: end; justify-content: flex-end; }
.fuss a { text-decoration: underline dashed; text-underline-offset: 4px; }
.fuss a:hover { color: var(--auf-tisch); text-decoration-style: solid; }

/* ---- dialog (safety net) ------------------------------------------------------------------------------ */
.dialog {
  max-width: 520px; width: calc(100% - 32px);
  border: 0; padding: var(--s6);
  background: var(--leinen-weiss);
  background-image: var(--webung);
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.dialog::backdrop { background: rgba(16, 24, 31, 0.7); }
.dialog h2 { font-family: var(--f-titel); font-size: 26px; font-weight: 750; margin-bottom: var(--s3); }
.dialog p + p { margin-top: var(--s3); }
.dialog .nummer { font-family: var(--f-titel); font-size: 22px; font-weight: 700; }
.dialog .nummer a, .dialog a { color: var(--kreuz-rot); }

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .fuss { grid-template-columns: 1fr; padding: var(--s5) var(--s4) var(--s6); }
  .fuss-recht { justify-content: flex-start; }
  .reiter-innen { padding: 0 var(--s4); gap: var(--s4); }
}