/* Grundlagen: Reset, Typografie, Formularvorgaben.
   Alles was hier steht gilt fuer die gesamte Anwendung. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne diese Zeile
   bleibt zum Beispiel ein ausgeblendeter Zaehler mit display:grid sichtbar
   und zeigt einen leeren farbigen Punkt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--schriftfamilie);
  font-size: var(--grad-3);
  line-height: var(--zeile-normal);
  color: var(--schrift-normal);
  background: var(--flaeche-grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  line-height: var(--zeile-eng);
  letter-spacing: -0.011em;
}

/* Gewichte aus dem Erscheinungsbild: Seitentitel schwer, Abschnitte fett. */
h1 { font-size: var(--grad-6); font-weight: var(--gewicht-titel); }
h2 { font-size: var(--grad-5); font-weight: var(--gewicht-abschnitt); }
h3 { font-size: var(--grad-4); }
h4 { font-size: var(--grad-3); }

p { margin: 0 0 var(--raum-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--schrift-akzent);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

/* Ein einzelnes Antippen fuehrt aus; Zoomen mit zwei Fingern bleibt moeglich. */
button, a, summary, input, select, textarea, label { touch-action: manipulation; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

img, svg { display: block; max-width: 100%; }
svg { fill: none; }

hr {
  border: none;
  border-top: 1px solid var(--linie);
  margin: var(--raum-6) 0;
}

code, kbd, samp, pre {
  font-family: var(--schriftfamilie-fest);
  font-size: 0.92em;
}

/* Sichtbarer Tastaturfokus. Nie entfernen. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--rund-1);
}
:focus:not(:focus-visible) { outline: none; }

/* Nur fuer Hilfsmittel sichtbar.

   `left: 0` ist kein Schoenheitsstrich, sondern der Grund, warum die Seite
   nicht seitwaerts rutscht. Ohne die Angabe steht das Element an seiner
   statischen Stelle - in einer waagerecht scrollenden Tabelle also weit
   rechts, gemessen bis x=991 bei 900px Fensterbreite. Sein umschliessender
   Block ist mangels positioniertem Vorfahren die Seite selbst, deshalb
   greift auch `overflow: hidden` der Karte nicht, und das Dokument wurde
   um bis zu 277px breiter als das Fenster. Mit `left: 0` haengt es am
   linken Rand, bleibt 1x1 gross und beschnitten. */
.nur-vorlesen {
  position: absolute;
  left: 0;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke zum Inhalt */
.sprungmarke {
  position: absolute;
  left: var(--raum-3);
  top: -100px;
  z-index: 100;
  padding: var(--raum-2) var(--raum-4);
  background: var(--akzent);
  color: var(--akzent-schrift);
  border-radius: var(--rund-2);
  font-weight: var(--fett-halb);
}
.sprungmarke:focus { top: var(--raum-3); }

/* Zahlen tabellarisch ausrichten */
.zahl,
td.zahl,
.kennzahl-wert {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::selection {
  background: var(--akzentton-300);
  color: var(--ton-950);
}

/* Bildlaufleisten dezent */
* { scrollbar-width: thin; scrollbar-color: var(--ton-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--ton-300);
  border-radius: var(--rund-voll);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--ton-400); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .navigation, .kopfzeile, .nicht-drucken { display: none !important; }
  .inhalt { padding: 0; max-width: none; }
  .karte {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
    /* Am Bildschirm schneidet die Karte ab, auf Papier darf sie das nicht. */
    overflow: visible;
  }

  /* Gemessen am Fahrtenbuch bei 794px Seitenbreite: die Tabelle ist 1189px
     breit, das Blatt traegt 792px. Am Bildschirm rollt die Huelle waagerecht,
     auf Papier gibt es keine Rolle - 397px fehlten stillschweigend, und zwar
     die rechten Spalten. Feste Spaltenverteilung mit Umbruch bringt die
     Tabelle auf genau 782px, also vollstaendig aufs Blatt. */
  .tabelle-huelle { overflow: visible; }
  .tabelle { width: 100%; table-layout: fixed; }
  .tabelle td,
  .tabelle th {
    white-space: normal;
    word-break: break-word;
    padding: 2px 4px;
  }
  /* `.eng` traegt am Bildschirm `width: 1%`, den Kniff fuer eine Spalte, die
     nur so breit wird wie ihr Inhalt. Bei fester Verteilung nimmt der Browser
     das 1% woertlich: gemessen 8px statt 113px, und der nicht umbrechbare
     Inhalt lief aus der Spalte heraus ueber den Blattrand. Deshalb hier
     zurueckgenommen. */
  .tabelle .eng { width: auto; white-space: normal; }

  /* Lange Tabellen (Monatsbericht) laufen ueber mehrere Blaetter. Mit
     `break-inside: avoid` der Karte wuerde der Browser eine Tabelle, die
     nicht mehr auf den Rest des Blatts passt, ganz auf das naechste schieben
     und eine halbe Seite leer lassen. Zeilen bleiben zusammen, der Kopf
     wiederholt sich auf jedem Blatt. */
  .karte-mehrseitig { break-inside: auto; }
  .tabelle thead { display: table-header-group; }
  .tabelle tr { break-inside: avoid; }
}