/*
 * Oberflaeche nach dem Optimizely Axiom Design System.
 *
 * Jeder Wert unter :root steht so im Token-Satz (`docs/axiom-tokens.json`) --
 * `axiom.test.ts` prueft das. Ein Kommentar, der einen Token behauptet, faellt
 * sonst nie auf: bei praeferenz stand ein #7A8074 mit dem Kommentar
 * `fg.disabled`, und dieser Token ist #A1AC8D.
 *
 * Der Token-Satz hat KEINE Abstands-Skala. Die Polsterung ist deshalb aus
 * `size` und `fontSize` konstruiert und hier als solche benannt.
 */
:root {
  /* colors */
  --fg-default: #202320;
  --fg-secondary: #484E46;
  --fg-tertiary: #616755;
  --fg-disabled: #A1AC8D;
  --fg-error: #8F4764;
  --fg-success: #3AB533;
  --fg-accent-strong: #226B1E;
  --fg-inverse: #FFFFFF;
  --bg-page: #F9FCF8;
  --bg-default: #FFFFFF;
  --bg-secondary: #EFF5EB;
  --bg-hovered: #5F931F14;
  --bg-pressed: #5E8B2729;
  --bg-accent: #ABFF44;
  --bg-accent-subtle: #EEFFD9;
  --bg-error-subtle: #FFDFE8;
  --bg-warning-subtle: #FEF1C6;
  --bg-inverse: #252825;
  --border-default: #D8E4CB;
  --border-control: #A1AC8D;
  --border-focus: #197A94;
  --border-error: #A95A77;

  /* borderRadius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* fontFamily */
  --font-sans: "Die Grotesk B", "DI Grotesk B", "Roboto Variable", system-ui, sans-serif;
  --font-mono: "Roboto Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* fontSize */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --leading-sm: 16px;
  --leading-md: 20px;
  --leading-lg: 24px;
  --leading-xl: 28px;
  --leading-2xl: 32px;

  /* size -- dient hier zugleich als Abstands-Skala, die der Token-Satz nicht hat */
  --size-2xs: 16px;
  --size-xs: 20px;
  --size-sm: 24px;
  --size-md: 32px;
  --size-lg: 40px;
  --size-xl: 48px;

  /* duration */
  --dauer-sm: 150ms;
  --dauer-md: 250ms;

  /* boxShadow */
  --schatten-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --schatten-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-md);
}

a { color: var(--fg-accent-strong); }

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

/* ------------------------------------------------------------ Grundgeruest */

.huelle {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/*
 * Ein Haltepunkt, keine drei: das Axiom-System kennt zwei Groessen.
 *
 * Auf dem Telefon wird aus der Leiste ein waagerechter Streifen. Sie
 * untereinander zu stapeln waere die naheliegende Loesung -- bei zehn
 * Eintraegen muesste man dann aber an der ganzen Navigation vorbeiscrollen,
 * bevor der erste Eintrag zu sehen ist.
 */
@media (max-width: 900px) {
  .huelle { grid-template-columns: 1fr; }

  .navigation {
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border-default);
    /* Der Streifen soll wischbar sein, ohne die Seite mitzuziehen. */
    overscroll-behavior-x: contain;
  }

  .navigation__kopf,
  .navigation__gruppe { display: none; }

  .navigation__punkt {
    width: auto;
    flex: 0 0 auto;
    /* Mindestens 44px hoch -- darunter trifft ein Daumen nicht zuverlaessig. */
    min-height: 44px;
    white-space: nowrap;
  }

  .navigation__fuss {
    margin-block-start: 0;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 0 0 0 8px;
    border-block-start: 0;
    border-inline-start: 1px solid var(--border-default);
  }

  /* Name und Adresse haben im Streifen keinen Platz -- sie stehen unter
     "Mein Konto". */
  .navigation__fuss > div { display: none; }
  .navigation__fuss button { min-height: 44px; white-space: nowrap; margin-block-start: 0; }

  .inhalt { padding: var(--size-2xs); }

  /* Auf schmalen Geraeten ist eine Spalte lesbarer als zwei enge. */
  .codeliste { grid-template-columns: 1fr; }

  /*
   * **Jedes Ziel mindestens 44px**, nicht nur die in der Leiste. Der
   * Anmeldeknopf lag bei 38px -- gemessen, nicht geschaetzt. Eine Zusage ueber
   * Trefferflaechen, die fuer die Haelfte der Knoepfe nicht gilt, ist keine.
   */
  button,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  select {
    min-height: 44px;
  }

  /* Die kleinen Knoepfe in einer Tabellenzeile duerfen flacher bleiben --
     sie stehen nebeneinander und wuerden sonst die Zeile sprengen. */
  .aktionen button { min-height: 40px; }
}

.navigation {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-default);
  border-inline-end: 1px solid var(--border-default);
  padding: var(--size-sm) var(--size-2xs);
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs);
}

.navigation__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px var(--size-2xs);
  border-block-end: 1px solid var(--border-default);
}

.navigation__marke {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: 600;
}

.navigation__gruppe {
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  padding: var(--size-2xs) 8px 4px;
}

.navigation__punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .navigation__punkt:hover { background: var(--bg-hovered); }
}

/* Der ausgewaehlte Eintrag traegt bg.default.pressed -- nicht die Akzentfarbe.
   So macht es das Komponenten-CSS von Axiom. */
.navigation__punkt[aria-current="page"] {
  background: var(--bg-pressed);
  color: var(--fg-default);
  font-weight: 600;
}

.navigation__fuss {
  margin-block-start: auto;
  padding: var(--size-2xs) 8px 0;
  border-block-start: 1px solid var(--border-default);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-tertiary);
}

.inhalt {
  padding: var(--size-md);
  max-width: 1100px;
}

/* --------------------------------------------------------------- Bausteine */

h1 { font-size: var(--text-2xl); line-height: var(--leading-2xl); margin: 0 0 8px; }
h2 { font-size: var(--text-xl); line-height: var(--leading-xl); margin: var(--size-md) 0 8px; }
p.hinweis { color: var(--fg-secondary); margin: 0 0 var(--size-2xs); max-width: 68ch; }

.karte {
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--size-sm);
  margin-block-end: var(--size-2xs);
}

.feld { display: block; margin-block-end: var(--size-2xs); }
.feld > span {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-secondary);
  margin-block-end: 4px;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--bg-default);
  color: var(--fg-default);
  font: inherit;
}

input:invalid { border-color: var(--border-error); }

button {
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-control);
  background: var(--bg-default);
  color: var(--fg-default);
  font: inherit;
  cursor: pointer;
  transition: background var(--dauer-sm) ease;
}

@media (hover: hover) {
  button:hover:not(:disabled) { background: var(--bg-hovered); }
}

button:disabled { color: var(--fg-disabled); cursor: not-allowed; }

button.haupt {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--fg-default);
  font-weight: 600;
}

button.still { border-color: transparent; background: transparent; color: var(--fg-secondary); }

.meldung {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  margin-block-end: var(--size-2xs);
  font-size: var(--text-md);
}
.meldung--fehler { background: var(--bg-error-subtle); color: var(--fg-error); }
.meldung--erfolg { background: var(--bg-accent-subtle); color: var(--fg-accent-strong); }
.meldung--hinweis { background: var(--bg-warning-subtle); color: var(--fg-default); }

/* Tabellen: der Kopf traegt KEINE Flaeche. Auch das steht so im Axiom-CSS --
   eine Flaeche in bg.secondary waere ein gueltiger Token an falscher Stelle. */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: start;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-secondary);
  font-weight: 600;
  padding: 8px var(--size-2xs) 8px 0;
  border-block-end: 1px solid var(--border-default);
}
td {
  padding: 10px var(--size-2xs) 10px 0;
  border-block-end: 1px solid var(--border-default);
  vertical-align: top;
}

.marke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.einfarbig { font-family: var(--font-mono); font-size: var(--text-sm); }
.leise { color: var(--fg-tertiary); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ------------------------------------------------------------- Anmeldeseite */

.mitte {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--size-sm);
}

.mitte__karte {
  width: min(440px, 100%);
  background: var(--bg-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-md);
  padding: var(--size-md);
}

.fortschritt {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  overflow: hidden;
  margin-block: var(--size-2xs);
}
.fortschritt__balken {
  height: 100%;
  width: 40%;
  background: var(--bg-accent);
  animation: schieben 1.2s ease-in-out infinite;
}

@keyframes schieben {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt__balken { animation: none; width: 100%; }
  * { transition: none !important; }
}

/* ------------------------------------------------ Wiederherstellungs-Kit */

.kit {
  border: 2px solid var(--fg-default);
  border-radius: var(--radius-lg);
  padding: var(--size-sm);
  margin-block: var(--size-2xs);
  background: var(--bg-default);
}

.kit h3 {
  margin: 0 0 var(--size-2xs);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.kit__zeile { margin: 0 0 4px; font-size: var(--text-sm); line-height: var(--leading-sm); }

.kit__schluessel {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: var(--leading-xl);
  /* Der Schluessel wird abgetippt -- er darf umbrechen, aber nicht knapp
     stehen. Wortumbruch statt Zeichenumbruch, damit Gruppen zusammenbleiben. */
  word-spacing: 0.3em;
  overflow-wrap: break-word;
  margin-block: var(--size-2xs);
  padding: var(--size-2xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

/* Eine eigenstaendige Seite ohne die Anwendung -- bisher nur /erweiterung.
   Nicht `.mitte`: das zentriert senkrecht und ist 440px breit, gedacht fuer
   ein Anmeldeformular. Eine Seite zum Lesen faengt oben an. */
.seite {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: var(--size-md) var(--size-sm) var(--size-xl);
}

/* Der Download ist die Handlung -- er darf nicht wie Fliesstext aussehen. Ein
   Link, kein Knopf: er holt wirklich etwas, und ein Vorleseprogramm soll das
   auch so ansagen. Gebraucht an zwei Stellen -- auf der eigenstaendigen Seite
   /erweiterung und in der Ansicht innerhalb der Anwendung -- deshalb nicht an
   `.seite` gebunden. */
.laden {
  display: inline-block;
  /* 44px Trefferflaeche, wie ueberall sonst -- gerechnet, nicht geschaetzt:
     2 x 11px Innenabstand plus die Zeilenhoehe. */
  padding: 11px var(--size-2xs);
  min-height: 44px;
  margin-block: var(--size-2xs) 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-accent);
  background: var(--bg-accent);
  color: var(--fg-default);
  font-weight: 600;
  text-decoration: none;
}

@media (hover: hover) {
  .laden:hover { background: var(--bg-hovered); }
}

.seite ol {
  margin: 0 0 var(--size-2xs);
  padding-inline-start: var(--size-sm);
}

.seite li { margin-block: 4px; }

.seite code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  /* Pfade wie chrome://extensions muessen umbrechen duerfen, sonst schiebt
     eine einzige Zeile die Seite auf dem Telefon seitlich auf. */
  overflow-wrap: break-word;
}

/* Der QR-Code bringt seinen eigenen weissen Grund mit -- er muss dunkel auf
   hell bleiben, auch wenn die Seite dunkel ist. Der Rahmen darum ist nur
   dafuer da, dass er auf dunklem Grund nicht wie ein Loch aussieht. */
.qr {
  display: inline-block;
  margin-block: var(--size-2xs);
  padding: var(--size-2xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #ffffff;
  line-height: 0;
}

.qr svg { max-width: 100%; height: auto; }

.kit__hinweis {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-md);
  color: var(--fg-secondary);
}

/* Beim Drucken bleibt genau das Blatt uebrig. Ein Ausdruck mit Navigation und
   Formular drumherum waere kein Dokument, das man ablegt. */
@media print {
  body { background: var(--bg-default); }
  .navigation, .nicht-drucken, button, form > label, .meldung, .fortschritt { display: none !important; }
  .huelle { display: block; }
  .inhalt { padding: 0; max-width: none; }
  .karte { border: 0; padding: 0; }
  .kit { border-color: #000; page-break-inside: avoid; }
}

/* ------------------------------------------------------------- Verzeichnis */

.kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--size-2xs);
  flex-wrap: wrap;
  margin-block-end: var(--size-2xs);
}

.kopfzeile h1 { margin: 0; }

/* Eine Zeile auf dem Rechner, untereinander auf dem Telefon. */
.werkzeug {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--size-2xs);
  align-items: end;
}
.werkzeug .feld { margin-block-end: 0; }

@media (max-width: 900px) {
  .werkzeug { grid-template-columns: 1fr; }
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.aktionen button { padding: 4px 8px; font-size: var(--text-sm); line-height: var(--leading-sm); }

.stern { padding: 2px 6px; font-size: var(--text-lg); line-height: var(--leading-lg); }

.verweis {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-accent-strong);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.passwortzeile {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.passwortzeile input { flex: 1 1 16rem; }

/* Tabellen dürfen auf dem Telefon scrollen statt die Seite zu sprengen. */
.karte table { display: block; overflow-x: auto; }

/* --------------------------------------------------------- Zweiter Faktor */

.abschnitt {
  padding-block-start: var(--size-2xs);
  margin-block-start: var(--size-2xs);
  border-block-start: 1px solid var(--border-default);
}
.abschnitt:first-of-type { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; }

.abschnitt h3 {
  margin: 0 0 4px;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}

.codeliste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-block: var(--size-2xs);
}

.codeliste__code {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  text-align: center;
}