/* ============================================================================
   kartai.css — die Oberfläche des Kundenkontos

   Von Hand geschrieben, kein Rahmenwerk. Die Oberfläche hat vier Seiten und
   wenig Text; ein CSS-Rahmenwerk brächte hier mehr Regeln mit, als die ganze
   Anwendung braucht, und jede davon wäre eine, die niemand entschieden hat.

   Aufbau:
     1. Palette          — Farbwerte als Variablen, hell und dunkel
     2. Grundlagen       — Schrift, Grundfläche, Fokus, Bewegung
     3. Gerüst           — Kopf, Navigation, Inhalt, Fuß
     4. Karten und Text  — Typenskala
     5. Geräteplätze     — das Erkennungsmerkmal
     6. Laufzeitband     — Fläche ohne Schrift
     7. Formulare        — Felder, Schaltflächen, Hinweise
     8. Lizenzkarte      — die eine laute Fläche
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Palette

   Verbindliche Quelle ist Palette.swift im App-Projekt: klares Türkis auf
   tiefem Navy. Jede Variable trägt hier den Namen ihrer Rolle dort, damit man
   den Wert nicht zweimal entscheidet.

   Die warme Hälfte ist fort. Bis hierher stand Creme gegen Schieferblau, und
   dieser Gegensatz trug die Gestaltung; die neue Richtung will das Gegenteil —
   frisch, technisch, hoher Kontrast. Die Rolle des Cremes (große ruhige Fläche
   gegen Weiß) trägt jetzt die hellste Stufe der Staffel: --kartai-base.

   Zwei Regeln stecken schon in den Namen:

   --kartai-accent-fill  ist für Flächen OHNE Schrift. Weiße Schrift erreicht
                         darauf nur 2,4:1; verlangt sind 4,5:1. Der Abstand ist
                         größer als beim früheren Schieferblau (4,2:1) — ein
                         gesättigtes Cyan ist bei gleicher Helligkeit deutlich
                         heller als ein Blau.
   --kartai-accent-text  ist derselbe Ton für Schrift abgestimmt, 5,1:1 auf
                         Weiß und 4,6:1 auf --kartai-base.

   --kartai-base und --kartai-tinted sind im hellen Modus derselbe Wert, und
   das mit Absicht: In Palette.swift fallen `surface` und `accentWash` dort
   zusammen, weil eine zweite, um zwei Punkte abweichende Helligkeit daneben
   kein Unterschied wäre, sondern ein Fehler, den niemand als solchen erkennt.
   Was die beiden trennt, ist die Rolle — hier eine Fläche, dort eine
   Hinterlegung —, und die steht im Namen. Im dunklen Modus laufen sie
   auseinander.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --kartai-base: #E6F7F6; /* surface */
  --kartai-card: #FFFFFF; /* white */
  --kartai-tinted: #E6F7F6; /* accentWash */
  --kartai-accent-surface: #CDEDEE; /* accentSurface */
  --kartai-accent-border: #ACE1E4; /* accentBorder */
  --kartai-line: #DCE4E7; /* hairline */
  --kartai-accent-fill: #14B8C4; /* accent */
  --kartai-accent-text: #13798D; /* accentText */
  --kartai-brand-deep: #0A2540; /* accentDeep */

  /* Schriftfarben. Der Grundton der Schrift ist das Navy der Marke: Im hellen
     Modus trägt es die Schrift, im dunklen die Fläche. Der gedämpfte Ton bleibt
     dagegen ein neutrales Blaugrau — käme er aus der Staffel, wäre er vom
     Linkton (--kartai-accent-text) kaum zu unterscheiden, und Nebentext sähe
     aus wie ein Verweis. */
  --kartai-ink: #0A2540;
  --kartai-ink-muted: #4A5A6B;
  --kartai-on-brand: #FFFFFF;

  /* Schrift auf dem tiefsten Markenton — die Lizenzkarte (Abschnitt 8).

     Diese drei Werte stehen in beiden Modi gleich, und das ist kein Versehen:
     Ihre Fläche ist in beiden Modi dunkel. --kartai-ink-muted mitzubenutzen
     ginge nicht, er ist im Hellen ein dunkles Blaugrau und verschwände.

     Warum es --kartai-on-brand-accent überhaupt gibt: Auf Navy trägt
     --kartai-accent-text im hellen Modus nur 3,0:1. Der Griff zu
     --kartai-accent-fill läge nahe und ist verboten — er ist der Ton für
     Flächen ohne Schrift. Genommen ist deshalb der helle Akzentton, den der
     dunkle Modus ohnehin führt.

       --kartai-on-brand-muted   8,3:1 auf #0A2540
       --kartai-on-brand-accent  9,1:1 auf #0A2540

     Auf #07132F (dunkler Modus) liegt beides höher. */
  --kartai-on-brand-muted: #9FC4D8;
  --kartai-on-brand-accent: #89D4DA;
  --kartai-on-brand-line: #20455F;
  /* 7,7:1 auf #0A2540. --kartai-warning ist im hellen Modus ein tiefes Braun
     und läge auf Navy bei 1,5:1 — auf der Lizenzkarte gilt deshalb der Ton,
     den der dunkle Modus ohnehin führt. */
  --kartai-warning-on-brand: #F0A868;

  /* Im hellen Modus trägt sich das Navy selbst, im dunklen liegt es tiefer als
     der Grund ringsum und bräuchte sonst geraten zu werden. */
  --kartai-license-edge: transparent;

  /* Warnhinweise in Orange als Systemfarbe, nicht als Markenton — sonst hieße
     dieselbe Farbe einmal „Kartai" und einmal „Achtung". Der Ton ist so tief
     angesetzt, dass er auf seiner eigenen Fläche 5,8:1 erreicht. */
  --kartai-warning: #9A4708;
  --kartai-warning-surface: #FDF3E7;

  --kartai-radius: 0.625rem;
  --kartai-radius-small: 0.375rem;
  --kartai-gap: 1.25rem;
  --kartai-measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --kartai-base: #0A2540; /* surface */
    --kartai-card: #0D3751; /* surfaceDeep */
    --kartai-tinted: #07132F; /* accentWash */
    /* accentSurface läge im Dunklen auf #0D3751 — genau dem Kartengrund. Das
       Absetzmittel geht deshalb eine Stufe weiter (teal800), sonst wären
       Praxiskarte und Karte dieselbe Fläche. */
    --kartai-accent-surface: #104B63;
    --kartai-accent-border: #126177; /* accentBorder */
    --kartai-line: #2A3746; /* hairline */
    --kartai-accent-fill: #5AC5CE; /* accent */
    --kartai-accent-text: #89D4DA; /* accentText */
    --kartai-brand-deep: #07132F; /* accentDeep */

    --kartai-ink: #E6F7F6;
    --kartai-ink-muted: #A9BACA;
    --kartai-on-brand: #FFFFFF;

    --kartai-warning: #F0A868;
    --kartai-warning-surface: #2A2118;

    --kartai-license-edge: var(--kartai-accent-border);
  }
}

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

   Schrift aus dem System, keine geladene Schriftart. Nicht aus Bequemlichkeit:
   Eine Schrift von einem fremden Server überträgt die Adresse jeder Besucherin
   dorthin. Vor diesem Bildschirm sitzen Psychotherapeutinnen, und der Dienst
   wirbt mit dem Gegenteil.
--------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--kartai-base);
  color: var(--kartai-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  /* Zahlen sollen auch im Fließtext in Spalten stehen — Laufzeiten und Daten
     kommen an vielen Stellen unmittelbar untereinander vor. */
  font-variant-numeric: tabular-nums;
}

/* Die Klasse steht trotzdem, damit einzelne Stellen sie ausdrücklich tragen und
   der Grund im Markup sichtbar bleibt. */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Sichtbarer Fokus, überall. Nirgends `outline: none` — wer mit der Tastatur
   arbeitet, verlöre sonst die Orientierung, und niemand merkt es, weil es mit
   der Maus nicht auffällt. */
:focus-visible {
  outline: 3px solid var(--kartai-accent-text);
  outline-offset: 2px;
  border-radius: var(--kartai-radius-small);
}

a {
  color: var(--kartai-accent-text);
  text-underline-offset: 0.15em;
}

/* Wer Bewegung abgestellt hat, bekommt keine. Der Wechsel selbst bleibt, nur
   ohne Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   3. Gerüst
--------------------------------------------------------------------------- */

/* Im dunklen Modus ist der tiefste Markenton derselbe Wert wie die getönte
   Fläche darunter (in Palette.swift fallen `accentDeep` und `accentWash` dort
   zusammen) — die Sprungmarke hebt sich also nicht durch ihre Fläche ab. Sie
   ist ohnehin nur sichtbar, während sie den Tastaturfokus hat, und trägt dann
   den 3 px starken Fokusring in --kartai-accent-text mit 9,8:1. */
.skip-link {
  position: absolute;
  z-index: 10;
  inset-inline-start: 0.75rem;
  inset-block-start: -4rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--kartai-radius-small);
  background-color: var(--kartai-brand-deep);
  color: var(--kartai-on-brand);
  text-decoration: none;
  transition: inset-block-start 120ms ease-out;
}

.skip-link:focus {
  inset-block-start: 0.75rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.875rem clamp(0.875rem, 4vw, 2rem);
  border-block-end: 1px solid var(--kartai-line);
  background-color: var(--kartai-tinted);
  color: var(--kartai-ink);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  margin-inline-end: auto;
  color: var(--kartai-accent-text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/*
 * Der Bereich neben dem Wortzeichen — heute nur „Verwaltung". Wer Kundenprofil
 * und Verwaltung nebeneinander offen hat, muss auf einen Blick sehen, in
 * welchem er gerade etwas ändert. Die Aussage steht in der Schrift, nicht in
 * der Farbe.
 */
.wordmark__area {
  margin-inline-start: 0.5rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--kartai-line);
  border-radius: 999px;
  color: var(--kartai-ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: 0.1em;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--kartai-radius-small);
  color: var(--kartai-accent-text);
  font-size: 0.9375rem;
  text-decoration: none;
}

.site-nav__link:hover {
  text-decoration: underline;
}

/* Die laufende Seite hat zusätzlich aria-current — die Fläche allein trüge die
   Aussage nicht. */
.site-nav__link--current {
  background-color: var(--kartai-accent-surface);
  /* Nicht --kartai-accent-text: Auf der getönten Fläche erreichte er nur
     4,1:1. Das Türkis ist heller als das frühere Schieferblau und hat auf
     eingefärbtem Grund keine Reserve mehr. */
  color: var(--kartai-ink);
  font-weight: 600;
}

.site-main {
  max-width: var(--kartai-measure);
  margin: 0 auto;
  padding: clamp(1.25rem, 5vw, 2.5rem) clamp(0.875rem, 4vw, 2rem) 3rem;
}

.site-footer {
  max-width: var(--kartai-measure);
  margin: 0 auto;
  padding: 0 clamp(0.875rem, 4vw, 2rem) 2.5rem;
  background-color: var(--kartai-base);
  color: var(--kartai-ink-muted);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   4. Karten und Typenskala

   Vier Stufen, zwei Gewichte. Mehr braucht eine Oberfläche mit vier Seiten
   nicht, und jede weitere Stufe macht sie unruhiger statt genauer.
--------------------------------------------------------------------------- */

.page-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lead {
  margin: 0 0 1.75rem;
  color: var(--kartai-ink-muted);
  font-size: 1.0625rem;
}

.card {
  margin-block-end: var(--kartai-gap);
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--kartai-line);
  border-radius: var(--kartai-radius);
  background-color: var(--kartai-card);
  color: var(--kartai-ink);
}

/* Die Praxisangaben als eigener Bereich.

   Ohne Creme gibt es keinen fremden Ton mehr, der sie absetzt — und es soll
   auch keinen geben. Sie liegen auf --kartai-accent-surface, dem Ton für
   „Karten und Pillen, die sich vom Untergrund abheben sollen, ohne eine
   Aussage zu treffen", und tragen dazu die getönte Linie. Damit sind sie eine
   Markenfläche und nicht bloß eine Karte in anderer Farbe. */
.card--practice {
  border-color: var(--kartai-accent-border);
  background-color: var(--kartai-accent-surface);
  color: var(--kartai-ink);
}

.card__title {
  margin: 0 0 0.75rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.card__subtitle {
  margin: 1.5rem 0 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kartai-ink-muted);
}

.note {
  margin: 0.75rem 0 0;
  color: var(--kartai-ink-muted);
  font-size: 0.9375rem;
}

/* Begriff und Wert.

   Die Begriffsspalte war `minmax(7rem, auto)` und wuchs damit auf den längsten
   Begriff — „Lesen und Exportieren". Der schob die Werte aller anderen Zeilen
   weit nach rechts, und zwischen „Art" und „Vollversion" stand ein Feld
   Leerraum, das nichts bedeutete. Die Spalte ist jetzt gedeckelt: Der lange
   Begriff bricht lieber um, als sechs Zeilen auseinanderzuziehen.

   Die Zeilen trennt eine Haarlinie statt eines Abstands. Ein Abstand allein
   trägt bei umbrechenden Werten nicht mehr — man sieht dann nicht, welche
   zweite Zeile noch zum Wert darüber gehört. */
.facts {
  display: grid;
  grid-template-columns: minmax(5rem, 11rem) 1fr;
  gap: 0;
  margin: 0;
}

.facts dt,
.facts dd {
  padding-block: 0.5rem;
  border-block-start: 1px solid var(--kartai-line);
}

.facts dt {
  padding-inline-end: 1.25rem;
  color: var(--kartai-ink-muted);
  font-size: 0.9375rem;
}

.facts dd {
  margin: 0;
}

/* Die erste Zeile steht schon unter der Überschrift; eine Linie darüber wäre
   die zweite Kante an derselben Stelle. */
.facts dt:first-of-type,
.facts dd:first-of-type {
  border-block-start: none;
  padding-block-start: 0;
}

/* Auf der Praxiskarte liegt die neutrale Haarlinie heller als ihr eigener
   Grund und verschwindet. Dort trägt die getönte Linie. */
.card--practice .facts dt,
.card--practice .facts dd {
  border-block-start-color: var(--kartai-accent-border);
}

/* Listen der Verwaltung: je Eintrag ein Titel und ein bis zwei Beizeilen.
   Bewusst keine Tabelle — auf 360 px Breite wäre eine Tabelle mit fünf Spalten
   nicht mehr lesbar, und die Verwaltung wird auch am Telefon aufgeschlagen. Die
   Trennlinie ersetzt den Rahmen: Zehn gerahmte Karten untereinander sind keine
   Liste mehr, sondern ein Stapel. */
.record-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.record {
  padding: 0.75rem 0;
  border-top: 1px solid var(--kartai-line);
}

.record:first-child {
  border-top: none;
}

.record__title {
  margin: 0;
  font-weight: 600;
}

.record__line {
  margin: 0.25rem 0 0;
  color: var(--kartai-ink-muted);
  font-size: 0.9375rem;
}

code {
  padding: 0.05em 0.3em;
  border-radius: var(--kartai-radius-small);
  background-color: var(--kartai-tinted);
  color: var(--kartai-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* ---------------------------------------------------------------------------
   5. Geräteplätze — das Erkennungsmerkmal

   Zwei Fächer: eines für das iPad, eines für den Mac. Seit Kontrakt Fassung 2
   trägt eine Lizenz genau ein aktives Gerät je Plattform. Ein belegtes Fach ist
   gefüllt und durchgezogen umrandet, ein freies getönt und gestrichelt. Damit
   erklärt sich das Kontingent ohne einen Satz Text — und weil Farbe eine
   Aussage nie allein trägt, steht in jedem Fach zusätzlich „Belegt" oder
   „Frei".

   Ab 360 px stehen die Fächer untereinander: minmax(13rem, 1fr) reicht bei
   dieser Breite für genau eine Spalte.
--------------------------------------------------------------------------- */

.device-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ein Fach ist zwei Zeilen hoch, nicht vier.

   Bis hierher stand das Symbol über dem Text, und jedes Fach war so hoch wie
   die Lizenzkarte darüber breit. Bei einem frischen Konto — dem häufigsten
   Fall — war damit die größte Fläche der Seite die mit der geringsten Aussage:
   zwei leere Kästen. Das Symbol steht jetzt links, Plattform und Zustand
   stehen in einer Zeile, der Rest darunter. Das Fach ist damit halb so hoch
   und sagt dasselbe.

   Die Spalte des Symbols ist fest, die des Zustands `max-content`: So steht
   der Zustand unmittelbar hinter dem Plattformnamen und nicht am rechten Rand,
   wo ihn bei zwei nebeneinander liegenden Fächern niemand mehr zuordnet. */
.device-slot {
  display: grid;
  grid-template-columns: 1.625rem max-content 1fr;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  align-content: start;
  padding: 0.875rem 1rem;
  border-radius: var(--kartai-radius);
  background-color: var(--kartai-card);
  color: var(--kartai-ink);
}

/* Alles, was keine eigene Spalte hat, steht unter dem Text — nicht unter dem
   Symbol. */
.device-slot > * {
  grid-column: 2 / -1;
}

.device-slot--occupied {
  border: 1.5px solid var(--kartai-accent-border);
  background-color: var(--kartai-accent-surface);
  color: var(--kartai-ink);
}

.device-slot--free {
  border: 1.5px dashed var(--kartai-line);
  background-color: var(--kartai-tinted);
  color: var(--kartai-ink-muted);
}

.device-slot__symbol {
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 1.625rem;
  height: 1.625rem;
  margin-block-start: 0.15rem;
  color: var(--kartai-accent-text);
}

.device-slot--free .device-slot__symbol {
  color: var(--kartai-ink-muted);
}

.device-slot__symbol svg {
  display: block;
  width: 100%;
  height: 100%;
}

.device-slot__platform {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Der Zustand steht in derselben Zeile, aber nicht auf derselben Linie: Er
   sitzt auf der Grundlinie des Plattformnamens und ist kleiner und gesperrt.
   Farbe trägt die Aussage nicht allein — das Wort steht da. */
.device-slot__state {
  grid-column: 3;
  grid-row: 1;
  align-self: baseline;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Auch hier nicht der Akzentton: 4,1:1 auf der getönten Fläche. Die Marke
   bleibt im Fach trotzdem sichtbar — das Symbol darüber trägt sie, und für ein
   Sinnbild genügen 3:1. */
.device-slot--occupied .device-slot__state {
  color: var(--kartai-ink);
}

.device-slot--free .device-slot__state {
  color: var(--kartai-ink-muted);
}

.device-slot__name {
  margin: 0.15rem 0 0;
}

.device-slot__sync,
.device-slot__hint {
  margin: 0.15rem 0 0;
  color: var(--kartai-ink-muted);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
   6. Laufzeitband

   Eine Fläche in --kartai-accent-fill, auf der nie Schrift steht. Das
   Ablaufdatum steht im Klartext darüber. Genau dafür ist dieser Ton in der CI
   vorgesehen: Weiß erreicht darauf nur 2,4:1.

   Als <progress> gebaut und nicht als <div> mit Breitenangabe: Die CSP lässt
   keine Inline-Stile zu, und der Anteil gehört ohnehin in ein Element, das ihn
   als Wert führt statt als Gestaltung.
--------------------------------------------------------------------------- */

.term__reading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
}

.term__remaining {
  font-size: 1.1875rem;
  font-weight: 600;
}

.term__separator {
  color: var(--kartai-line);
}

.term__until {
  color: var(--kartai-ink-muted);
  font-size: 0.9375rem;
}

.term--expired .term__until {
  color: var(--kartai-warning);
  font-weight: 600;
}

.term-band {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 0.75rem;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--kartai-tinted);
}

.term-band::-webkit-progress-bar {
  border-radius: 999px;
  background-color: var(--kartai-tinted);
}

.term-band::-webkit-progress-value {
  border-radius: 999px;
  background-color: var(--kartai-accent-fill);
}

.term-band::-moz-progress-bar {
  border-radius: 999px;
  background-color: var(--kartai-accent-fill);
}

/* Ein leeres Band wäre sonst nicht von einem fehlenden zu unterscheiden. */
.term--expired .term-band {
  border: 1px dashed var(--kartai-line);
}

/* ---------------------------------------------------------------------------
   7. Formulare, Schaltflächen, Hinweise

   Jedes Feld hat eine Beschriftung, jedes Formular eine eigene Absendetaste.
   htmx verbessert, es trägt nicht: Ohne aktives JavaScript geht jedes Formular
   ganz gewöhnlich an seine action.
--------------------------------------------------------------------------- */

.field {
  margin-block-end: 1rem;
}

/* Der Honigtopf des Registrierungsformulars.

   Ein Feld, das kein Mensch sieht und das ein Skript ausfüllt. Aus dem Fluss
   genommen und nicht `display: none`: Genau darauf prüfen die Skripte, um die
   es geht, und überspringen das Feld dann. `clip-path` statt einer negativen
   Position weit links, damit ein Rechts-nach-links-Layout es nicht doch auf die
   Seite zöge; die Breite bleibt bei 1 px, weil ein Feld ohne Ausdehnung von
   manchen Browsern gar nicht erst gerendert wird.

   Aus dem Baum genommen wird es zusätzlich mit `aria-hidden` und `tabindex`
   in der Vorlage — CSS allein erreicht keine Sprachausgabe, und diese Regel
   soll nicht die einzige Absicherung sein. Farben stehen hier bewusst keine:
   Wo nichts zu sehen ist, gibt es auch keinen Kontrast zu wahren. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field__label {
  display: block;
  margin-block-end: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.field__input {
  display: block;
  width: 100%;
  max-width: 26rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--kartai-line);
  border-radius: var(--kartai-radius-small);
  background-color: var(--kartai-card);
  color: var(--kartai-ink);
  font: inherit;
}

.field__hint {
  margin: 0.3rem 0 0;
  color: var(--kartai-ink-muted);
  font-size: 0.875rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Nur dort, wo Aktionen unmittelbar auf einen Inhaltsblock folgen. Ein
   allgemeiner Abstand nach oben stünde in den Formularen zusätzlich zum
   Feldabstand und ergäbe dort das Doppelte. */
.facts + .actions,
.device-slots + .actions,
.notice + .actions {
  margin-block-start: 1.25rem;
}

.button {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--kartai-radius-small);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}

/* Der tiefste Markenton trägt helle Schrift mit 15,5:1. Der Akzentton täte das
   nicht — deshalb steht er hier nicht. */
.button--primary {
  background-color: var(--kartai-brand-deep);
  color: var(--kartai-on-brand);
}

.button--quiet {
  border-color: var(--kartai-line);
  background-color: var(--kartai-card);
  color: var(--kartai-accent-text);
}

.signout {
  margin: 0;
}

/* Hinweise tragen ein Wort, nicht nur eine Farbe. Der Streifen an der Seite ist
   die Zugabe, nicht die Aussage. */
.notice {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--kartai-radius-small);
  border-inline-start: 4px solid currentColor;
  font-size: 0.9375rem;
}

.notice--warning {
  background-color: var(--kartai-warning-surface);
  color: var(--kartai-warning);
}

.notice__label {
  font-weight: 600;
}

.notice__label::after {
  content: ': ';
}

/* Das Zeichen nimmt über `fill: currentColor` die Farbe der Wortmarke an und
   wechselt damit von selbst mit hellem und dunklem Modus. Die Höhe hängt an der
   Schriftgröße, damit es beim Vergrößern der Schrift mitwächst. */
.wordmark__mark {
  flex: none;
  width: auto;
  height: 1.4em;
}

.site-footer {
  text-align: center;
  color: var(--kartai-ink-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.site-footer p,
.site-footer address {
  margin: 0.5rem 0 0;
  font-style: normal;
}

.site-footer__heart {
  margin-top: 1.25rem;
}

.site-footer__legal {
  color: var(--kartai-ink-muted);
}

/* ---------------------------------------------------------------------------
   8. Die Lizenzkarte — die eine laute Fläche

   Drei weiße Karten untereinander, jede gleich schwer: So sah die Übersicht
   aus, und die einzige Angabe, für die jemand diese Seite aufschlägt — wie
   lange die Lizenz noch läuft —, hatte kein größeres Gewicht als die
   Anschrift der Praxis. Die farbigste Fläche gehörte sogar den Praxisangaben.

   Deshalb genau eine laute Stelle: die Lizenz auf dem tiefsten Markenton, mit
   der Restlaufzeit im größten Schriftgrad der ganzen Oberfläche. Alles andere
   bleibt, wie es war. Die Praxiskarte behält ihre getönte Fläche und ist damit
   nicht mehr die lauteste, sondern der leise Abschluss.

   Das Laufzeitband liegt nicht mehr als Balken im Kasten, sondern bildet die
   untere Kante der Karte. Es ist derselbe `<progress>`, an derselben Stelle im
   Markup — nur die Vorschau (`vorschau.hbs`) zeigt es weiterhin als Balken,
   weil sie die Karte nicht trägt.
--------------------------------------------------------------------------- */

.card--license {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  padding-block-end: clamp(1.5rem, 4vw, 2rem);
  border-color: var(--kartai-license-edge);
  background-color: var(--kartai-brand-deep);
  color: var(--kartai-on-brand);
}

/* Auf Navy erreicht --kartai-accent-text 3,0:1 — für einen Fokusring die
   nackte Untergrenze und weniger, als der Rest der Oberfläche hält. */
.card--license :focus-visible {
  outline-color: var(--kartai-on-brand-accent);
}

/* Die Überschrift als Vorzeile.

   Sie trägt hier nicht mehr die Hauptaussage — das tut die Zahl darunter. Die
   Klasse setzt die Vorlage nur, wenn eine Laufzeit vorliegt: Ohne sie
   („Noch keine Lizenz") stünde sonst eine winzige Versalzeile allein auf einer
   großen dunklen Fläche. */
.card--license .card__title--eyebrow {
  margin: 0 0 0.625rem;
  color: var(--kartai-on-brand-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Restlaufzeit und Ablaufdatum stehen untereinander statt nebeneinander: In
   einer Zeile machte der Schriftgrad der Zahl den Zusatz zur Fußnote hinter
   einem Trennpunkt. */
.card--license .term__reading {
  display: block;
  margin: 0;
}

.card--license .term__remaining {
  display: block;
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.card--license .term__separator {
  display: none;
}

.card--license .term__until {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--kartai-on-brand-muted);
  font-size: 0.9375rem;
}

.card--license .term--expired .term__until {
  color: var(--kartai-warning-on-brand);
}

.card--license .facts {
  margin-block-start: 1.5rem;
}

.card--license .facts dt {
  color: var(--kartai-on-brand-muted);
}

.card--license .facts dt,
.card--license .facts dd {
  border-block-start-color: var(--kartai-on-brand-line);
}

/* Der tiefste Markenton auf sich selbst wäre keine Schaltfläche. Umgekehrt
   trägt Navy auf Weiß dieselben 15,3:1. */
.card--license .button--primary {
  background-color: var(--kartai-on-brand);
  color: var(--kartai-brand-deep);
}

/* Das Band als Kante der Karte.

   Absolut gesetzt und randlos: Es sitzt in der Kartenkontur, nicht im Inhalt.
   Die Spur ist eine aufgehellte Stufe des Kartengrunds — --kartai-tinted wäre
   im hellen Modus fast weiß und machte aus der Kante einen zweiten Balken.
   Schrift steht darauf so wenig wie vorher. */
.card--license .term-band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0.375rem;
  border-radius: 0;
  background-color: var(--kartai-on-brand-line);
}

.card--license .term-band::-webkit-progress-bar {
  border-radius: 0;
  background-color: var(--kartai-on-brand-line);
}

.card--license .term-band::-webkit-progress-value {
  border-radius: 0;
}

.card--license .term-band::-moz-progress-bar {
  border-radius: 0;
}

/* Abgelaufen heißt: die Kante ist ganz aufgebraucht. Der gestrichelte Rahmen
   der Balkenfassung entfällt hier — eine gestrichelte Linie über die volle
   Kartenbreite läse sich als Schnittkante, nicht als Warnung. */
.card--license .term--expired .term-band {
  border: none;
  background-color: var(--kartai-warning-on-brand);
}

.card--license .term--expired .term-band::-webkit-progress-bar {
  background-color: var(--kartai-warning-on-brand);
}