/* Grundlagen: Schriften, Farben der Agentur, Formulare, Knöpfe.
   Die Farben kommen aus dem Büro: dunkle Wand, Holzboden, weiße Hemden, Bordeaux der Website. */
@font-face { font-family: Vollkorn; font-weight: 500; font-display: swap; src: url(/schriften/vollkorn-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Vollkorn; font-weight: 500; font-style: italic; font-display: swap; src: url(/schriften/vollkorn-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: Vollkorn; font-weight: 600; font-display: swap; src: url(/schriften/vollkorn-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(/schriften/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url(/schriften/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(/schriften/source-sans-3-latin-700-normal.woff2) format("woff2"); }

:root {
  --wand: #18211d;
  --wand-2: #232f2a;
  --wand-3: #3a4a43;
  --auf-wand: #f6f1ec;
  --auf-wand-leise: #bcc7c0;
  --eiche: #b47c41;
  --eiche-hell: #dcb07a;
  --eiche-tief: #6f4419;
  --bordeaux: #1f5a43; /* Name bleibt wegen der Module: Hauptfarbe ist das Herrmann-Grün */
  --bordeaux-tief: #154434;
  --beere: #b3261e; /* Warnung, Lücke */
  --fokus: #1d4f91;
  --rose: #f5f5f5;
  --rose-2: #e8eeea;
  --hemd: #fff;
  --tinte: #1c2421;
  --leise: #55605a;
  --linie: #dde2df;
  --rand: #78837d;
  --gelb: #ffd84a;
  --gelb-hell: #fff3bf;
  --gelb-tief: #5a4500;
  --gruen: #2f7a5c;
  --blau: #2c5c94;
  --schrift: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --titel: Vollkorn, Georgia, serif;
  --ziel: 2.875rem;   /* Mindesthöhe für alles, was man antippt: 46 px */
  --leiste: 4rem;     /* Höhe der unteren Leiste auf dem Handy */
  --dielen: repeating-linear-gradient(90deg, rgb(70 38 12 / .28) 0 1px, transparent 1px 93px, rgb(70 38 12 / .16) 93px 94px, transparent 94px 211px),
    linear-gradient(180deg, #8d5a2a 0, #b47c41 18%, #a97238 60%, #bd8850 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--rose); color: var(--tinte);
  font: 400 1.0625rem/1.5 var(--schrift);
  overflow-wrap: break-word;
}

h1, h2, h3 { font-family: var(--titel); font-weight: 500; color: var(--tinte); text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.15; margin: 0 0 .75rem; }
h2 { font-size: 1.4375rem; line-height: 1.25; margin: 2.25rem 0 .75rem; }
h3 { font-size: 1.125rem; line-height: 1.3; margin: 1.5rem 0 .5rem; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--bordeaux); text-underline-offset: 3px; }
small { color: var(--leise); font-size: .9375rem; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

mark { background: var(--gelb); color: var(--tinte); padding: .05em .3em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }
.kopf :focus-visible, .leiste :focus-visible, .fuss :focus-visible, .tafel :focus-visible, .anmeldung-wand :focus-visible { outline-color: var(--gelb); }
.platte :focus-visible { outline-color: var(--fokus); }
main:focus { outline: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

input, select, textarea {
  width: 100%; min-height: var(--ziel); padding: .5rem .75rem;
  background: var(--hemd); border: 1px solid var(--rand); border-radius: 3px;
}
input[type="checkbox"] { width: 1.5rem; min-height: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--bordeaux); flex: none; }
label { display: block; font-weight: 600; }
label input, label select, label textarea { margin-top: .25rem; font-weight: 400; }
.haken { display: flex; gap: .625rem; align-items: center; min-height: var(--ziel); font-weight: 400; }
.haken input { margin-top: 0; }

.einleitung { color: var(--leise); max-width: 42rem; }
.abstand-unten { margin-bottom: .75rem; }
.kopfzeile { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.kopfzeile h1 { margin-bottom: .25rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--ziel); padding: .375rem 1rem;
  background: var(--hemd); color: var(--bordeaux-tief);
  border: 1px solid var(--bordeaux); border-radius: 3px;
  font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
}
.knopf:hover { background: var(--rose-2); }
.knopf-voll { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.knopf-voll:hover { background: var(--bordeaux-tief); }
.knopf-breit { width: 100%; margin-top: 1rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.textknopf { min-height: var(--ziel); padding: 0 .25rem; background: none; border: 0; color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Datei wählen sieht aus wie ein Knopf, bleibt aber ein echtes Eingabefeld. */
.dateiwahl { position: relative; cursor: pointer; }
.dateiwahl input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.dateiwahl:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Simulation ist immer sichtbar markiert: gestrichelt wie eine Skizze, nie wie etwas Echtes. */
.simulation {
  display: inline-block; padding: 0 .4375rem;
  border: 1px dashed currentColor; border-radius: 2px;
  color: var(--eiche-tief); background: #fbf0e0;
  font-size: .875rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/* Hinweise */
.hinweis { padding: .75rem 1rem; background: var(--hemd); border-left: 4px solid var(--eiche); max-width: 46rem; }
.hinweis-gelb { padding: .5rem .75rem; background: var(--gelb-hell); border-left: 4px solid #e0b400; color: var(--tinte); font-size: .9688rem; line-height: 1.35; font-weight: 400; }

/* Leere Listen und fehlender Zugriff: sagen, was zu tun ist */
.leer { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1rem; color: var(--tinte); }
.leer small { display: block; }
.leer strong { font-family: var(--titel); font-weight: 500; font-size: 1.1875rem; display: block; }
.hund { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}