/* Depotsteuer – Gestaltungswerte.
   Leitidee: Das Formular ist die Oberfläche. Papier, Tinte, Vordruck-Grün.
   Nur helles Thema. Alle Textfarben sind auf ihren Flächen nach WCAG AA geprüft
   (Tinte 3 auf Papier 5,2:1; Rot 6,0:1; Ocker 6,4:1; Weiß auf Handlung 6,6:1). */

@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fira-sans-condensed-latin-500-normal.woff2") format("woff2");
}

:root {
  /* ---- Farbe ------------------------------------------------------- */
  --papier: #F3F6F5;        /* Seitengrund: hell, leicht kühl */
  --papier-tief: #E8EDEB;   /* Tabellenkopf, ruhige Flächen */
  --blatt: #FFFFFF;         /* Eingabefelder: hier tippt der Nutzer */
  --tinte: #15222B;         /* Text */
  --tinte-2: #44525C;       /* Nebentext */
  --tinte-3: #5C6972;       /* Beschriftungen, Einheiten */
  --linie: #C7D0CF;         /* Haarlinien */
  --linie-stark: #75858C;   /* Ränder von Eingabefeldern (3:1) */

  --feld: #DCEBDB;          /* Vordruck-Grün: alles, was in die Erklärung einzutragen ist */
  --feld-blass: #EAF3E9;    /* leeres Vordruckfeld */
  --feld-rand: #8FB596;

  --handlung: #176B3A;      /* Knöpfe, Verweise */
  --handlung-tief: #0F5129;

  --rot: #B3261E;           /* nur Verluste und Sperren */
  --rot-tief: #8C1D18;
  --rot-hell: #FBEAE8;
  --rot-rand: #DDA29D;

  --ocker: #7A5200;         /* nur Vorläufiges */
  --ocker-hell: #FAF0D2;
  --ocker-rand: #B98A1B;

  --hinweis: #2F4A5C;       /* sachlicher Hinweis ohne Dringlichkeit */
  --hinweis-hell: #E4ECF0;
  --hinweis-rand: #9FB3BF;

  /* ---- Schrift ----------------------------------------------------- */
  --schrift: "Fira Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --schrift-eng: "Fira Sans Condensed", "Fira Sans", "Arial Narrow", Arial, sans-serif;

  /* Typoskala (16 px Grundschrift): 13 / 14 / 16 / 19 / 24 / 32 */
  --t-fein: 0.8125rem;
  --t-klein: 0.875rem;
  --t-text: 1rem;
  --t-gross: 1.1875rem;
  --t-titel: 1.5rem;
  --t-seite: 2rem;

  --zh-text: 1.5;           /* Zeilenhöhe Fließtext */
  --zh-eng: 1.3;            /* Zeilenhöhe Beschriftungen, Tabellen */
  --zh-titel: 1.15;

  /* ---- Raster ------------------------------------------------------ */
  /* Abstände auf einem 4-px-Raster */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;
  --a7: 3rem;
  --a8: 4rem;

  --rand: 1.5rem;           /* Seitenrand links/rechts */
  --steg: 3.5rem;           /* Randsteg: hier stehen die Zeilennummern des Vordrucks */
  --lesespalte: 46rem;      /* Textbreite; Tabellen dürfen mit .breit ausbrechen */
  --seitenbreite: 74rem;    /* Blatt: Kopf, Inhalt und Fuß teilen diese eine rechte Kante.
                               Fließtext, Vordruck und Eckwerte bleiben in der Lesespalte;
                               nur breite Tabellen (.breit) reichen bis an die Kante. */

  --radius: 2px;            /* Vordruckfelder sind eckig */
  --radius-knopf: 3px;
  --fokus: 2px solid var(--tinte);
  --dauer: 140ms;
}

@media (max-width: 47.99rem) {
  :root {
    --rand: 1rem;
    --steg: 0rem;           /* schmal: die Zeilennummer rückt in die Zeile */
    --t-titel: 1.3125rem;
    --t-seite: 1.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0ms; }
}