/*
 * Lumen Layout - Reset & Basis
 * Minimaler Reset, Basis-Typografie, Links, Fokus. Bewusst ohne Bootstrap.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  /* Umbruchvorgabe wie im klassischen Layout (style.css, body): Silbentrennung als
     Normalfall - sie liefert bei deutschen Woertern das bessere Ergebnis und laesst
     einen Bindestrich stehen -, overflow-wrap als Netz fuer alles, was sie nicht
     zerlegen kann: Kauderwelsch, Dateinamen, Bezeichner, fremdsprachige Woerter.

     Warum als Vorgabe und nicht je Baustein: Ein fehlendes Netz faellt erst auf,
     wenn ein Kunde ein langes Wort eintraegt, ein unerwuenschter Umbruch dagegen
     sofort beim Bauen. Vorher trugen nur einzelne Bausteine eine Regel - in
     details.css der Wert, die Beschriftung daneben nichts; eine lange einwortige
     Beschriftung lief deshalb in die Wertspalte. Da auch wss-Beschriftungen vom
     Kunden kommen, laesst sich nicht aufzaehlen, welche Texte sicher sind.

     Beide Eigenschaften vererben sich: Eine Ausnahme kostet eine Zeile auf dem
     betroffenen Container und wirkt fuer dessen ganzen Teilbaum. Bekannte Ausnahme
     ist .ui-tooltip (components/jquery-ui.css), dazu .nowrap aus utilities.css.
     Elemente mit white-space: nowrap sind ohnehin nicht betroffen - ohne
     Umbruchgelegenheit greift keine der beiden Eigenschaften.

     hyphens: auto braucht ein lang-Attribut; es steht in basis/rahmen.sgt. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

a {
  color: var(--teal-d);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--teal-d);
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* iOS: kein graues System-Tap-Highlight ueber den gestalteten
   Hover-/Active-Zustaenden */
a,
button,
label,
.navlink {
  -webkit-tap-highlight-color: transparent;
}

/* Verhindert den Doppeltipp-Zoom bei schnell hintereinander getippten
   Bedienelementen (z. B. Status-Buttons der Anwesenheitseingabe) */
button,
.btn,
.navlink,
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/* Reduzierte Bewegung respektieren. Ausnahme .loader_spinner: der Ladespinner
   bringt in components/page.css einen eigenen Reduced-Motion-Fallback mit
   (Pulsieren statt Rotieren), der sonst hier mit abgeschaltet wuerde. */
@media (prefers-reduced-motion: reduce) {
  *:not(.loader_spinner) {
    transition: none !important;
    animation: none !important;
  }
}