/* ===========================================================================
   NOVERA OS — Designsystem

   Grundlage ist die Markenwelt der oeffentlichen Novera-Seite: tiefes
   Schwarz, Chrom, Instrument Serif und Inter. Dazu kommt, was eine
   Anwendung braucht und eine Webseite nicht: Zustandsfarben, dichtere
   Abstaende, Tabellen, Formulare.

   Der sichtbare Unterschied zur oeffentlichen Seite ist das Ambient
   Lighting in Violett und Elektrisch-Blau. Es traegt hier eine Aufgabe,
   die es dort nicht haette: Es unterscheidet auf den ersten Blick, ob man
   im internen System oder auf der Kundenseite ist.

   Aufbau
     1  Tokens
     2  Grundlagen
     3  Atmosphaere
     4  Geruest
     5  Seitenleiste
     6  Kopfleiste
     7  Karten und Kacheln
     8  Tabellen
     9  Formulare
    10  Knoepfe
    11  Marken und Zustaende
    12  Meldungen
    13  Anmeldung
    14  Bewegung
   =========================================================================== */

/* ------------------------------------------------------------- 1 Tokens -- */

:root {
  /* Flaechen, von tief nach hoch. Nicht neutralgrau, sondern mit einem
     Stich ins Violette — damit der Akzent nicht wie aufgeklebt wirkt. */
  --tief:      #08070D;
  --grund:     #0B0A12;
  --flaeche:   #12111C;
  --hoch:      #1A1826;
  --hoeher:    #232032;

  --text:      #ECEAF4;
  --leise:     #9E98B4;
  --sehrleise: #6B6683;

  --linie:      rgba(155, 135, 255, .12);
  --linie-hell: rgba(155, 135, 255, .24);
  --linie-glanz:rgba(155, 135, 255, .45);

  /* Akzent: Violett als Leitfarbe, Elektrisch-Blau als Partner. */
  --violett:    #9B87FF;
  --violett-satt:#7C5CFF;
  --elektrisch: #56AEFF;
  --magenta:    #E87BD8;

  /* Zustaende — bewusst getrennt vom Akzent, damit "gut" und "aktiv"
     nie verwechselt werden. */
  --gut:      #5FE0A0;
  --warnung:  #FFBE6B;
  --kritisch: #FF7E90;
  --neutral:  #8B93A7;

  --chrom: linear-gradient(112deg, #FFFFFF 0%, #D6DCE4 22%, #8C949F 44%,
                           #FFFFFF 62%, #B4BCC6 82%, #E8ECF1 100%);
  --aura:  linear-gradient(135deg, var(--violett-satt), var(--elektrisch));

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-klein: 6px;
  --r:       10px;
  --r-gross: 16px;

  --schatten:      0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.35);
  --schatten-hoch: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --schein-violett: 0 0 0 1px var(--linie-hell), 0 8px 32px rgba(124,92,255,.18);

  --leiste: 264px;
  --kopf:   68px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------------- 2 Grundlagen -- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--elektrisch); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

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

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Zahlenspalten. tabular-nums stellt die Ziffern auf gleiche Breite, damit
   Betraege untereinander buendig stehen. nowrap verhindert, dass ein Betrag
   zwischen Zahl und Waehrungszeichen umbricht — "1.190,00" und "€" auf zwei
   Zeilen sieht nach Fehler aus, gerade auf einem Angebot. */
.zahlen {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Die Beschreibung darunter darf sehr wohl umbrechen. */
.zahlen .feld__hinweis { white-space: normal; }
.einheit { font-family: var(--mono); font-size: .88em; }

/* ------------------------------------------------------ 3 Atmosphaere --- */

/* Zwei sehr langsam wandernde Lichtwolken und ein feines Raster. Fest
   positioniert, damit sie beim Scrollen stehen bleiben — bewegter
   Hintergrund unter bewegtem Inhalt wird schnell unruhig. */
.atmo {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}

.atmo__raster {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 30% 0%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 30% 0%, #000 5%, transparent 70%);
}

.atmo__licht {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  will-change: transform;
}
.atmo__licht--1 {
  top: -22vh; left: 8vw;
  width: min(760px, 70vw); height: 52vh;
  background: radial-gradient(ellipse at center, rgba(124,92,255,.34), transparent 68%);
  animation: wolkeA 41s var(--ease) infinite alternate;
}
.atmo__licht--2 {
  top: 34vh; right: -12vw;
  width: min(620px, 60vw); height: 46vh;
  background: radial-gradient(ellipse at center, rgba(86,174,255,.24), transparent 70%);
  animation: wolkeB 59s var(--ease) infinite alternate;
}
.atmo__licht--3 {
  bottom: -26vh; left: 26vw;
  width: min(680px, 66vw); height: 48vh;
  background: radial-gradient(ellipse at center, rgba(232,123,216,.14), transparent 72%);
  animation: wolkeC 73s var(--ease) infinite alternate;
}

/* Krumme, teilerfremde Laufzeiten — sonst treffen sich die Wolken
   regelmaessig in derselben Stellung und das Auge erkennt die Schleife. */
@keyframes wolkeA { to { transform: translate(6vw, 5vh) scale(1.16); } }
@keyframes wolkeB { to { transform: translate(-8vw, -6vh) scale(1.22); } }
@keyframes wolkeC { to { transform: translate(9vw, -4vh) scale(1.1); } }

/* --------------------------------------------------------- 4 Geruest ---- */

.rahmen {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  min-height: 100vh;
}
@media (max-width: 60rem) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
}

.buehne { min-width: 0; display: flex; flex-direction: column; }

.inhalt {
  flex: 1;
  padding: clamp(1.1rem, 2.4vw, 2rem);
  max-width: 1500px;
  width: 100%;
}

.seitenkopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.seitenkopf h1 { font-size: 1.5rem; }
.seitenkopf__unter { color: var(--leise); font-size: .92rem; margin-top: .25rem; }

/* --------------------------------------------------- 5 Seitenleiste ---- */

.leiste {
  background: var(--tief);
  border-right: 1px solid var(--linie);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
@media (max-width: 60rem) {
  .leiste {
    position: fixed; inset: 0 auto 0 0;
    width: var(--leiste); z-index: 60;
    transform: translateX(-100%);
    /* visibility gehoert zwingend dazu. Ein Element, das nur ueber
       translateX aus dem Bild geschoben wird, zaehlt weiter zum
       Scrollbereich — die Seite laesst sich dann seitlich schieben,
       obwohl nichts zu sehen ist. Gemessen waren es 264 Pixel Ueberlauf.
       visibility nimmt es aus dem Fluss, ohne die Animation zu verlieren:
       Der Wechsel wird bis zum Ende der Bewegung verzoegert. */
    visibility: hidden;
    transition: transform .3s var(--ease-out), visibility 0s linear .3s;
    box-shadow: var(--schatten-hoch);
  }
  .leiste[data-offen="ja"] {
    transform: none;
    visibility: visible;
    transition: transform .3s var(--ease-out), visibility 0s;
  }

  /* Zusaetzlicher Riegel: Auch ein anderes Element darf die Seite nicht
     seitlich schiebbar machen. clip statt hidden, damit position: sticky
     in der Kopfleiste weiter funktioniert — bei overflow: hidden verliert
     sie ihre Haftung. */
  body { overflow-x: clip; }
}

.leiste__marke {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--linie);
}
.leiste__zeichen { width: 30px; height: 30px; flex: none; }
.leiste__name {
  font-size: .95rem; font-weight: 700; letter-spacing: .08em;
  background: var(--chrom); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.leiste__zusatz {
  display: block; font-size: .56rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--sehrleise); margin-top: 1px;
}

.leiste__gruppe { padding: 1rem .7rem .2rem; }
.leiste__gruppe-titel {
  font-size: .6rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sehrleise);
  padding: 0 .5rem .5rem;
}

.leiste__punkt {
  display: flex; align-items: center; gap: .7rem;
  padding: .56rem .6rem; margin-bottom: 1px;
  border-radius: var(--r-klein);
  color: var(--leise); font-size: .88rem; font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.leiste__punkt:hover { color: var(--text); background: var(--flaeche); text-decoration: none; }
.leiste__punkt svg { width: 17px; height: 17px; flex: none; opacity: .8; }

/* Der aktive Punkt bekommt eine Aura statt einer Fuellfarbe — dieselbe
   Geste wie das Ambient Lighting, nur enger gefasst. */
.leiste__punkt[aria-current="page"] {
  color: var(--text);
  background: linear-gradient(90deg, rgba(124,92,255,.16), rgba(124,92,255,.04));
  box-shadow: inset 0 0 0 1px var(--linie-hell);
}
.leiste__punkt[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 18px; margin-top: -9px;
  background: var(--aura); border-radius: 0 2px 2px 0;
}
.leiste__punkt[aria-current="page"] svg { opacity: 1; color: var(--violett); }

.leiste__zaehler {
  margin-left: auto; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--sehrleise); background: var(--hoch);
  padding: .1rem .38rem; border-radius: 4px;
}

.leiste__fuss {
  margin-top: auto; padding: .8rem;
  border-top: 1px solid var(--linie);
}

/* ------------------------------------------------------ 6 Kopfleiste --- */

.kopfleiste {
  height: var(--kopf); flex: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1.1rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--linie);
  background: rgba(11,10,18,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 40;
}

.suche { position: relative; flex: 1; max-width: 440px; }
.suche svg {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--sehrleise); pointer-events: none;
}
.suche input {
  width: 100%; padding: .5rem .8rem .5rem 2.1rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein); color: var(--text); font-size: .88rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.suche input::placeholder { color: var(--sehrleise); }
.suche input:focus {
  outline: none; border-color: var(--linie-glanz);
  box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.systemlage {
  display: flex; align-items: center; gap: .42rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sehrleise);
  padding: .3rem .6rem; border: 1px solid var(--linie);
  border-radius: 999px;
}
.systemlage__punkt {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gut); box-shadow: 0 0 8px var(--gut);
}
@media (max-width: 46rem) { .systemlage { display: none; } }

.burger {
  display: none; width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-klein); cursor: pointer;
}
@media (max-width: 60rem) { .burger { display: inline-flex; } }

/* --------------------------------------------- 7 Karten und Kacheln ---- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
}
.karte__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .9rem;
}
.karte__titel {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sehrleise);
}

.raster { display: grid; gap: .9rem; }
.raster--kennzahlen { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Kennzahlkachel: Wert gross, Bezeichnung klein darueber. Die Reihenfolge
   ist Absicht — beim Ueberfliegen sucht das Auge die Zahl, nicht das Wort. */
.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  position: relative; overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease-out);
}
.kennzahl:hover { border-color: var(--linie-hell); transform: translateY(-2px); }
.kennzahl::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 100% at 100% 0%, rgba(124,92,255,.09), transparent 62%);
  pointer-events: none;
}
.kennzahl__name {
  font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sehrleise); margin-bottom: .5rem;
}
.kennzahl__wert {
  font-size: 1.85rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kennzahl__zusatz { font-size: .78rem; color: var(--leise); margin-top: .35rem; }

/* --------------------------------------------------------- 8 Tabellen -- */

.tabellenrahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--flaeche);
}
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
  text-align: left; padding: .65rem .9rem;
  font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sehrleise);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap; background: var(--hoch);
  position: sticky; top: 0;
}
tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .15s var(--ease); }
tbody tr:hover { background: rgba(255,255,255,.02); }
td .haupt { font-weight: 500; color: var(--text); }
td .neben { font-size: .8rem; color: var(--sehrleise); }

.leerzustand {
  padding: 3rem 1.5rem; text-align: center; color: var(--sehrleise);
}
.leerzustand svg { width: 34px; height: 34px; margin: 0 auto .8rem; opacity: .4; }
.leerzustand p { max-width: 34ch; margin-inline: auto; font-size: .9rem; }

/* -------------------------------------------------------- 9 Formulare -- */

.feld { margin-bottom: 1rem; }
.feld > label {
  display: block; margin-bottom: .35rem;
  font-size: .78rem; font-weight: 500; color: var(--leise);
}
.feld__pflicht { color: var(--violett); }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; padding: .58rem .75rem;
  background: var(--tief);
  border: 1px solid var(--linie);
  border-radius: var(--r-klein);
  color: var(--text); font-size: .9rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%239E98B4' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
  padding-right: 2rem;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--linie-glanz);
  box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}
input::placeholder, textarea::placeholder { color: var(--sehrleise); }

.feld__hinweis { font-size: .76rem; color: var(--sehrleise); margin-top: .3rem; }
.feld__fehler { font-size: .78rem; color: var(--kritisch); margin-top: .3rem; }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--kritisch); }

.feldpaar { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .feldpaar { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- 10 Knoepfe -- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; min-height: 38px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--r-klein);
  background: var(--hoch); color: var(--text);
  font-size: .86rem; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              transform .12s var(--ease-out);
}
.knopf:hover { background: var(--hoeher); border-color: var(--linie-glanz); text-decoration: none; }
.knopf:active { transform: translateY(1px); }
.knopf svg { width: 15px; height: 15px; }

.knopf--wichtig {
  background: var(--aura); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 4px 16px rgba(124,92,255,.28);
}
.knopf--wichtig:hover { filter: brightness(1.1); box-shadow: 0 6px 22px rgba(124,92,255,.36); }

.knopf--still { background: transparent; border-color: var(--linie); color: var(--leise); }
.knopf--still:hover { color: var(--text); background: var(--flaeche); }

.knopf--gefahr { border-color: rgba(255,126,144,.3); color: var(--kritisch); background: transparent; }
.knopf--gefahr:hover { background: rgba(255,126,144,.08); border-color: var(--kritisch); }

.knopf--klein { padding: .34rem .65rem; min-height: 30px; font-size: .8rem; }
.knopf--breit { width: 100%; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ------------------------------------------ 11 Marken und Zustaende ---- */

.marke {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 4px;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid currentColor; white-space: nowrap;
}
.marke--gut      { color: var(--gut); }
.marke--warnung  { color: var(--warnung); }
.marke--kritisch { color: var(--kritisch); }
.marke--neutral  { color: var(--neutral); }
.marke--akzent   { color: var(--violett); }

/* Zustandspunkt fuer Listen: schneller zu erfassen als Text allein. */
.punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.punkt--gut { background: var(--gut); }
.punkt--warnung { background: var(--warnung); }
.punkt--kritisch { background: var(--kritisch); }
.punkt--neutral { background: var(--neutral); }

/* ------------------------------------------------------- 12 Meldungen -- */

.meldung {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .9rem; margin-bottom: .8rem;
  border-radius: var(--r-klein);
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: .88rem;
}
.meldung svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.meldung--gut      { border-left: 2px solid var(--gut); }
.meldung--gut svg  { color: var(--gut); }
.meldung--fehler     { border-left: 2px solid var(--kritisch); }
.meldung--fehler svg { color: var(--kritisch); }
.meldung--hinweis     { border-left: 2px solid var(--elektrisch); }
.meldung--hinweis svg { color: var(--elektrisch); }
.meldung--warnung     { border-left: 2px solid var(--warnung); }
.meldung--warnung svg { color: var(--warnung); }

/* ------------------------------------------------------ 13 Anmeldung --- */

.anmeldung {
  min-height: 100vh; display: grid; place-items: center;
  padding: 1.5rem; position: relative; z-index: 1;
}
.anmeldung__karte {
  width: 100%; max-width: 380px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  padding: 2rem 1.8rem;
  box-shadow: var(--schatten-hoch), var(--schein-violett);
}
.anmeldung__marke { text-align: center; margin-bottom: 1.6rem; }
.anmeldung__marke img { width: 44px; height: 44px; margin: 0 auto .8rem; }
.anmeldung__name {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .1em;
  background: var(--chrom); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.anmeldung__zusatz {
  font-size: .58rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--sehrleise); margin-top: 3px;
}
.anmeldung__hinweis {
  margin-top: 1.2rem; text-align: center;
  font-size: .76rem; color: var(--sehrleise);
}

/* Einmalcode: grosse, weit gesperrte Ziffern. */
.code-feld {
  text-align: center; font-family: var(--mono);
  font-size: 1.5rem; letter-spacing: .45em;
  padding-left: .45em;  /* gleicht die Sperrung des letzten Zeichens aus */
}

/* -------------------------------------------------------- 14 Bewegung -- */

@keyframes hereinFallen {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.faellt-ein { animation: hereinFallen .4s var(--ease-out) both; }
.faellt-ein:nth-child(2) { animation-delay: .05s; }
.faellt-ein:nth-child(3) { animation-delay: .1s; }
.faellt-ein:nth-child(4) { animation-delay: .15s; }

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

/* --------------------------------------------------------- 15 Schriften --
   Lokal eingebunden, nicht ueber ein fremdes CDN. Derselbe Grund wie auf
   der oeffentlichen Seite: Ein CDN uebertraegt die Adresse jedes Aufrufs an
   Dritte. Bei einem internen Werkzeug faellt das zwar weniger ins Gewicht,
   aber die Dateien liegen ohnehin schon vor. */

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020-20AB;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/instrument-serif-latin.woff2') format('woff2');
}

/* ------------------------------------------------ 16 Beruehrflaechen ---
   Kleine Textlinks in Kartenkoepfen ("Alle anzeigen") waren nur 20 Pixel
   hoch. Auf dem Bildschirm trifft man sie mit der Maus, mit dem Daumen
   nicht. Da Novera OS spaeter selbst prueft, ob Kundenwebsites 44 Pixel
   einhalten, gilt derselbe Massstab hier. */

.karte__kopf a {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: .2rem .45rem; margin: -.2rem -.45rem;
  border-radius: var(--r-klein);
  color: var(--leise); text-decoration: none;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.karte__kopf a:hover { color: var(--text); background: var(--hoch); text-decoration: none; }

@media (pointer: coarse) {
  /* Auf Geraeten, die mit dem Finger bedient werden, die volle Flaeche. */
  .karte__kopf a { min-height: 44px; padding-inline: .6rem; }
  .leiste__punkt { min-height: 44px; }
  .knopf { min-height: 44px; }
  .knopf--klein { min-height: 38px; }
}