/* Hetzner-App — Handy zuerst.
   Farben und Schrift wie im Entwurf: warmes Tiefschwarz als Grund, ein
   einziger Akzent, dazu drei Statusfarben. Monospace für alles, was vom
   Server kommt, Groteske für alles, was man drücken kann. */

:root {
  /* Angelehnt an die Claude-App: warmes Anthrazit statt Schwarz, ein einziger
     Akzent im Terracotta, und ruhige Neutraltöne dazwischen. */
  --grund: #1F1E1D;
  --erhoben: #262624;
  --erhoben-2: #30302E;
  --linie: #3E3E3B;
  --schrift: #F5F4EF;
  --schrift-leise: #A6A29A;
  --schrift-schwach: #7A766E;
  --akzent: #D97757;
  --akzent-weich: #3A2820;
  --laeuft: #6BB899;
  --wartet: #D9A441;
  --ruht: #7A766E;
  /* Wegwerfen — gedämpftes Rot, damit es sich vom orangen Akzent absetzt. */
  --verwerfen: #C96A5E;
  --verwerfen-weich: #3A2220;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  /* Für gelesenen Fließtext — genau wie in der Claude-App. Eine Serifenschrift
     liest sich in längeren Absätzen ruhiger als eine Groteske. */
  --serif: ui-serif, Georgia, "Times New Roman", serif;

  /* Sicherheitsabstand zu Notch und Gestenleiste. */
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);

  /* Wie breit die App am Rechner höchstens wird, und die Fläche, die daneben
     liegen bleibt. Am Handy spielt beides keine Rolle (siehe ganz unten). */
  --spalte: 1000px;
  --neben: #171716;
}

/* Alle Icons sind gezeichnete Linien, keine Emoji: Sie nehmen die Farbe ihres
   Knopfes an, sind auf jedem Gerät gleich und sehen nicht nach Provisorium aus. */
svg {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
  color: inherit;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Versteckt heißt versteckt.
 *
 * Ohne das gewinnt jede Regel mit "display: flex" gegen das hidden-Merkmal —
 * und die Sondertasten-Leiste stand mitten in der Lese-Ansicht herum, obwohl
 * die App sie längst weggeschickt hatte. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;              /* die Ansichten scrollen, nicht die Seite */
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;     /* kein Gummiband beim Scrollen */
}

.mono { font-family: var(--mono); }

.ansicht {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--oben);
  padding-bottom: var(--unten);
}
.ansicht[hidden] { display: none; }

/* --- Kopfzeile --- */
.kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem .8rem;
  border-bottom: 1px solid var(--linie);
  flex: none;
}
/* Die Speicher-Ampel über der Sitzungsliste — eine stille Zeile, die nur
   dann laut wird, wenn sie rot ist. */
.speicher-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 1rem;
  font-size: .72rem;
  font-family: var(--mono);
  color: var(--schrift-schwach);
  border-bottom: 1px solid var(--linie);
  flex: none;
}
.speicher-punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ruht);
}
.speicher-zeile.gruen .speicher-punkt { background: var(--laeuft); }
.speicher-zeile.gelb  .speicher-punkt { background: var(--wartet); }
.speicher-zeile.rot   .speicher-punkt { background: #D9534F; }
.speicher-zeile.rot { color: #D9534F; }

.sitzung-info {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .8rem;
  font-size: .78rem;
  color: var(--schrift-leise);
  border-bottom: 1px solid var(--linie);
  background: var(--erhoben);
  flex: none;
}
.modus-pille {
  flex: none;
  background: var(--erhoben-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-family: var(--sans);
  font-size: .75rem;
  white-space: nowrap;
  color: var(--schrift-leise);
}
/* Ein Rahmen im Akzentton, sobald der Modus bekannt ist — sonst geht der
   Knopf in der stillen Info-Zeile unter. Genau das ist Roli passiert: den
   Knopf gab's längst, gesehen hat er ihn nie. */
.modus-pille.gesetzt { color: var(--schrift); border-color: var(--akzent); }
.modus-pille:active { filter: brightness(1.25); }

/* Der Kontext-Balken unter der Info-Zeile: eine breite, ruhige Schiene mit
   Füllung und einem Wort daneben. Immer sichtbar, sobald der Füllstand
   bekannt ist — anders als die kleine Prozentzahl, die man leicht übersieht. */
.kontext-balken {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .3rem .8rem .4rem;
  background: var(--erhoben);
  border: 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--sans);
  cursor: pointer;
  flex: none;
}
.kontext-balken:active { filter: brightness(1.2); }
.kontext-schiene {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--erhoben-2);
  overflow: hidden;
}
.kontext-fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--laeuft);
  transition: width .4s ease, background-color .4s ease;
}
/* Es wird eng: die Füllung wechselt die Farbe, damit man ohne Zahlen sieht,
   dass Claude das Gespräch bald zusammenstauchen muss. */
.kontext-fuellung.knapp { background: var(--wartet); }
.kontext-fuellung.voll { background: var(--verwerfen); }
.kontext-text {
  flex: none;
  font-size: .72rem;
  color: var(--schrift-leise);
  white-space: nowrap;
}

/* Während geglättet wird, funkelt der Knopf im Akzent und lässt sich nicht
   nochmal drücken. */
.knopf-diktat.laedt {
  color: var(--akzent);
  animation: pochen 1.2s ease-in-out infinite;
}
.knopf-diktat:disabled { opacity: .55; }

/* Die Leiste selbst scrollt NICHT — sonst würde das aufklappende Menü an ihrer
   Kante abgeschnitten. Gescrollt wird nur die Chip-Reihe darin. */
.schnellbefehle {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem 0;
  flex: none;
}
.chip-reihe {
  display: flex;
  /* Am Handy muss man diese Knöpfe im Gehen treffen. Bis V161 waren sie
     24 px hoch mit 6 px Abstand — Roli traf regelmäßig den Nachbarn
     (Fund 08.09.). Jetzt die übliche Mindestgröße für Fingerziele. */
  gap: .55rem;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.chip-reihe::-webkit-scrollbar { display: none; }
/* Die Chips liegen in einem Hüll-Element, das die App füllt. Ohne dieses
   `contents` wäre die Hülle das einzige flex-Kind: Der Abstand der Reihe
   griffe zwischen ihr und dem Nachbarn, aber nicht zwischen den Chips
   darin — sie klebten aneinander. Dasselbe im Menü darunter. */
#chip-reihe-eigene,
#eigene-befehle { display: contents; }
.chip {
  flex: none;
  display: inline-flex;         /* inline, sonst bricht jeder Chip in eine eigene Zeile */
  align-items: center;
  min-height: 2.75rem;          /* 44 px — Fingerbreite, nicht Zeigerbreite */
  font-size: .86rem;
  color: var(--schrift);
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: 1.4rem;
  padding: .35rem .95rem;
  white-space: nowrap;
}
.chip:active { background: var(--erhoben-2); }

/* Der Zauberstab und sein Menü. Das Menü klappt nach OBEN auf. */
.befehle-wand-wrap { position: relative; flex: none; }
.chip-wand {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
}
.chip-wand svg { width: 1.15rem; height: 1.15rem; }
.chip-wand:active { background: var(--erhoben-2); }
.befehle-wand-wrap.offen .chip-wand {
  color: var(--akzent);
  background: var(--erhoben-2);
}

.befehle-mehr {
  position: absolute;
  bottom: calc(100% + .4rem);   /* über dem Zauberstab */
  right: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 12rem;
  padding: .4rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: .8rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  z-index: 30;
  /* Mit größeren Einträgen und vielen eigenen Befehlen wächst das Menü über
     den Bildschirm hinaus — dann scrollt es lieber in sich. */
  max-height: 60vh;
  overflow-y: auto;
}
.chip-menu {
  display: flex;
  align-items: center;
  min-height: 3rem;             /* 48 px, wie die Zeilen einer Auswahlliste */
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  color: var(--schrift);
  padding: .55rem .7rem;
  border-radius: .55rem;
  font-family: var(--sans);
  font-size: .92rem;
}
.chip-menu:active { background: var(--erhoben-2); }

/* Trennt den "Eigene Befehle"-Knopf von den Sätzen darüber. */
.chip-menu-aktion {
  margin-top: .15rem;
  border-top: 1px solid var(--linie);
  border-radius: 0 0 .55rem .55rem;
  color: var(--schrift-schwach);
}

/* Die Liste der eigenen Befehle im Verwalten-Blatt. */
.befehle-liste {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .3rem;
}
.befehl-zeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: .6rem;
}
.befehl-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  min-width: 0;                 /* damit das Kürzen der langen Zeile greift */
  flex: 1;
  /* Ist ein Knopf (tippen = bearbeiten) — das Knopf-Aussehen abstreifen. */
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.befehl-zeile.wird-bearbeitet { border-color: var(--schrift-schwach); }
.befehl-text strong { font-size: .92rem; }
.befehl-text span {
  font-size: .8rem;
  color: var(--schrift-schwach);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Umschalter „in der Leiste zeigen" — hervorgehoben, wenn an. */
.befehl-leiste {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  border: 1px solid var(--linie);
  background: none;
  color: var(--schrift-schwach);
  font-family: var(--sans);
  font-size: .78rem;
  padding: .3rem .65rem;
  border-radius: .5rem;
  cursor: pointer;
}
.befehl-leiste.an { color: var(--akzent); border-color: var(--akzent); }

.befehl-weg {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--erhoben-2);
  color: var(--schrift-schwach);
  cursor: pointer;
}
.befehl-weg:active { background: var(--linie); }

/* Der Stift-Knopf zum Ändern — gleiche runde Form wie das Löschen, aber im
   Akzent, damit „hier kann man bearbeiten" sofort ins Auge fällt. */
.befehl-stift {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--erhoben-2);
  color: var(--akzent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.befehl-stift svg { width: 18px; height: 18px; }
.befehl-stift:active { background: var(--linie); }

/* Die Symbol-Legende in den Einstellungen: Icon links, Erklärung rechts. */
.symbol-gruppe {
  margin: .7rem 0 .1rem;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--schrift-schwach);
}
.symbol-liste { display: flex; flex-direction: column; }
.symbol-zeile {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .1rem;
}
.symbol-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--schrift);
}
.symbol-zeile span { font-size: .88rem; line-height: 1.35; }
/* Mini-Darstellungen für Elemente, die kein Icon sind: die Modus-Pille und
   der Kontext-Balken. So erklärt die Legende auch sie, statt sie auszulassen. */
.symbol-pille {
  flex: none;
  min-width: 22px;
  padding: .12rem .45rem;
  border: 1px solid var(--akzent);
  border-radius: 999px;
  font-size: .68rem;
  color: var(--schrift);
  text-align: center;
  white-space: nowrap;
}
.symbol-balken {
  flex: none;
  width: 40px;
  height: 8px;
  border-radius: 999px;
  background: var(--erhoben-2);
  overflow: hidden;
}
.symbol-balken > i {
  display: block;
  width: 60%;
  height: 100%;
  background: var(--laeuft);
  border-radius: 999px;
}

/* Ein mehrzeiliger Code-Kasten in Claudes Antwort — mit Kopierknopf oben rechts. */
.codekasten {
  position: relative;
  margin: .5rem 0;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: .6rem;
}
.codekasten pre {
  margin: 0;
  padding: .7rem 2.8rem .7rem .8rem;
  overflow-x: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--schrift);
  white-space: pre;
}
.code-kopieren {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: .45rem;
  color: var(--schrift-leise);
}
.code-kopieren svg { width: 1rem; height: 1rem; }
.code-kopieren.getan { color: var(--akzent); }
.code-kopieren:active { background: var(--erhoben-2); }

/* "Claude denkt nach …" — sanft pochend, solange gearbeitet wird. */
.denkt {
  flex: none;
  padding: .35rem .9rem;
  font-size: .8rem;
  color: var(--schrift-leise);
  animation: pochen 1.5s ease-in-out infinite;
}
.kopf h1 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf-sitzung h1 { font-size: .95rem; }
/* Sieben Knöpfe neben dem Namen: enger gesetzt, damit auf einem schmalen
   Handy vom Kartennamen mehr als ein Buchstabe übrig bleibt. */
.kopf-sitzung { gap: .1rem; padding-left: .5rem; padding-right: .5rem; }
.kopf-sitzung .knopf-blank { padding: .4rem .3rem; }
.kopf-sitzung h1 { margin-right: .3rem; }
/* Der Zurück-Knopf ist das meistgetippte Ziel der Zeile — als sichtbare
   Fläche und mit mehr Luft, damit der Daumen nicht auf dem Namen daneben
   landet (der öffnet das Umbenennen). */
.kopf-sitzung #knopf-zurueck {
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  padding: .45rem .55rem;
  margin-right: .3rem;
  color: var(--schrift);
}

.verbindung {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--laeuft);
  flex: none;
}
.verbindung.weg { color: var(--wartet); }
.punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- Claude fragt um Erlaubnis --- */
.frage {
  flex: none;
  padding: .8rem 1rem;
  border-top: 1px solid var(--linie);
  background: var(--erhoben);
}
.frage[hidden] { display: none; }
.frage-text {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--schrift);
  margin-bottom: .7rem;
}
.frage-knoepfe {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
/* Untereinander, in voller Breite: Im Auto trifft man keine schmalen Knöpfe. */
.frage-knopf {
  width: 100%;
  text-align: left;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 11px;
  padding: .75rem .9rem;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--schrift);
}
.frage-knopf.ja {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
}
.frage-knopf:active { filter: brightness(.9); }

/* Das Code-Feld der Claude-Anmeldung: Feld und Knopf untereinander, wie die
   Frage-Knöpfe — im Auto und am Handy trifft man nichts Schmales. */
.anmelde-code-zeile {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .45rem;
}
.anmelde-code-zeile[hidden] { display: none; }
#anmelde-code {
  width: 100%;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 11px;
  padding: .75rem .9rem;
  font-family: var(--mono, monospace);
  font-size: .88rem;
  color: var(--schrift);
}

/* --- Welches Modell gerade denkt --- */
/* Die Pille sitzt in der Eingabezeile, neben dem Mikrofon — dort, wo sie in
   der offiziellen App auch sitzt. Antippen öffnet die Auswahl. */
.modell-knopf {
  flex: none;
  background: var(--erhoben-2);
  border: 0;
  border-radius: 999px;
  padding: .4rem .7rem;
  font-family: var(--sans);
  font-size: .75rem;
  white-space: nowrap;
  color: var(--schrift-leise);
}
.modell-knopf.gesetzt { color: var(--schrift); }
.modell-knopf:active { filter: brightness(1.25); }

/* Das Auswahlblatt, das von unten hereinfährt. */
.blatt {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.blatt[hidden] { display: none; }
.blatt-schatten {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.blatt-inhalt {
  position: relative;
  background: var(--erhoben);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--linie);
  padding: .5rem 1rem calc(1.2rem + var(--unten));
  max-height: 75vh;
  overflow-y: auto;
  animation: blatt-auf .22s ease-out;
}
@keyframes blatt-auf {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.blatt-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 0 1rem;
}
.blatt-kopf h2 {
  flex: 1;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  /* Der Titel steht mittig — der Schließen-Knopf links darf ihn nicht kippen. */
  margin-right: 2.2rem;
}

/* Die drei Kacheln im Anhängen-Blatt: Kamera, Fotos, Dateien nebeneinander.
   Große Ziele für den Daumen — dafür ist das Blatt da. */
.kachel-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  background: var(--erhoben-2);
  border: 0;
  border-radius: 14px;
  padding: 1.1rem .5rem;
  color: var(--schrift);
  font-family: var(--sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kachel:active,
.blatt-zeile:active { filter: brightness(1.2); }
.kachel-kreis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  background: var(--erhoben);
  border-radius: 50%;
}
.kachel-kreis svg { width: 21px; height: 21px; }
.kachel-name { font-size: .85rem; }

/* Zeilen unter den Kacheln — bislang nur die Skill-Bibliothek. */
.blatt-liste {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .6rem;
}
.blatt-zeile {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  text-align: left;
  background: var(--erhoben-2);
  border: 0;
  border-radius: 14px;
  padding: .75rem 1rem;
  color: var(--schrift);
  font-family: var(--sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.blatt-zeile-text { display: flex; flex-direction: column; gap: .15rem; }
.blatt-zeile-titel { font-size: .95rem; font-weight: 600; }
.blatt-zeile-art { font-size: .8rem; color: var(--schrift-leise); }

.modell-liste {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.modell-zeile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  width: 100%;
  text-align: left;
  background: var(--erhoben-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .85rem 2.5rem .85rem 1rem;
  font-family: var(--sans);
}
.modell-zeile.gewaehlt {
  border-color: var(--akzent);
  background: var(--akzent-weich);
}
.modell-zeile:active { filter: brightness(1.2); }
.modell-titel { font-size: .95rem; font-weight: 600; color: var(--schrift); }
.modell-art { font-size: .8rem; color: var(--schrift-leise); line-height: 1.35; }
/* Zwischenüberschrift über der Gruppe der älteren Modelle. */
.modell-gruppe {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--schrift-leise);
  margin: .4rem 0 -.1rem .2rem;
}
.modell-haken {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--akzent);
  font-size: 1.1rem;
}

/* --- Knöpfe --- */
.knopf-voll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  background: var(--akzent);
  color: #fff;
  border: 0;
  border-radius: 11px;
  padding: .85rem;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.knopf-voll:active { filter: brightness(.9); }
.knopf-voll:disabled { opacity: .5; }

.knopf-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--schrift-leise);
  padding: .45rem;
  cursor: pointer;
  border-radius: 9px;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.knopf-blank:active { background: var(--erhoben-2); }
.knopf-blank.an { color: var(--akzent); }
.knopf-blank.spricht { color: var(--laeuft); }
.knopf-blank.laeuft { color: var(--akzent); animation: pochen 1.2s ease-in-out infinite; }
/* Der Brain-Knopf im Akzent — er soll auffallen, er ist der Einstieg. */
.knopf-brain { color: var(--akzent); }
/* Der große Brain-Knopf im leeren Zustand — mittig, mit Luft nach oben. */
.knopf-brain-gross { margin: 1rem auto 0; max-width: 16rem; }

/* Die Vorlese-Leiste — eine schwebende Abspiel-Pille, wie in einer Musik-App.
   Sie erscheint nur während des Vorlesens (das `hidden`-Attribut nimmt die JS
   weg). Fest am unteren Rand verankert statt im Fluss der Sitzungs-Ansicht:
   So bleibt sie auch sichtbar, wenn man während des Vortrags in die Liste
   oder einen anderen Chat wechselt — der Ton läuft weiter, und Pause/Beenden
   sind immer in Reichweite. Hoch genug, dass sie in der Sitzungs-Ansicht
   über Schnellbefehlen und Eingabe schwebt. */
.vorlese-leiste {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .5rem;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.vl-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--schrift);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vl-knopf svg { width: 22px; height: 22px; }
.vl-knopf:active { background: var(--erhoben); }
/* Die verstrichene Zeit — Ziffern gleicher Breite, damit sie beim Mitlaufen
   nicht zappelt. Etwas Platz links und rechts von den Knöpfen. */
.vl-zeit {
  min-width: 3.1rem;
  padding: 0 .3rem;
  text-align: center;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leise);
}

/* Eine kurze Rückmeldung, die von selbst wieder geht. Besser als ein
   Hinweisfenster, das man erst wegtippen muss. */
.zettel {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + var(--unten));
  transform: translate(-50%, 1rem);
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  color: var(--schrift);
  font-size: .85rem;
  padding: .6rem 1rem;
  border-radius: 20px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  max-width: 88vw;
  text-align: center;
}
.zettel.da { opacity: 1; transform: translate(-50%, 0); }

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

/* --- Sitzungsübersicht --- */
.liste {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .6rem .7rem 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.gruppe {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--schrift-schwach);
  padding: .7rem .3rem .25rem;
}
.gruppe .anzahl { margin-left: auto; font-variant-numeric: tabular-nums; }

.gruppe.klappbar {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gruppe.klappbar:active { color: var(--schrift-leise); }
.gruppe .pfeil { font-size: .7rem; line-height: 1; }

.fach {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  background: var(--erhoben-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .7rem .75rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte:active { background: var(--erhoben); }
.karte.angeheftet { border-color: var(--linie); }

.karte .streifen {
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
}
.karte .streifen.running { background: var(--laeuft); }
.karte .streifen.waiting { background: var(--wartet); }
.karte .streifen.idle    { background: transparent; }
.karte .streifen.sleeping { background: #9AA8C7; }
.karte .streifen.crashed  { background: #C4622E; }
/* Eine fertige Antwort, die noch niemand angesehen hat. Bekommt den vollen
   Akzent — sie steht ganz oben in „Wartet auf dich" und soll auch beim
   Überfliegen auffallen (Rolis Wunsch 08.09.: „dann sehe ich, dass das da
   fertig ist"). Der Streifen ist breiter als bei den übrigen Zuständen. */
.karte .streifen.frisch { background: var(--akzent); width: 3px; }

.karte .zeile-oben { display: flex; align-items: center; gap: .45rem; }
.karte .name {
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.karte .nadel {
  margin-left: auto;
  flex: none;
  background: none;
  border: 0;
  padding: .2rem;
  color: var(--schrift-schwach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte .nadel svg { width: 16px; height: 16px; }
.karte.angeheftet .nadel { color: var(--akzent); }

/* Zurück auf ungelesen — stilles Grau wie Nadel und Mond, in derselben
   Reihe rechts. */
.karte .ungelesen-knopf {
  flex: none;
  background: none;
  border: 0;
  padding: .2rem;
  color: var(--schrift-schwach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte .ungelesen-knopf svg { width: 16px; height: 16px; }
.karte .ungelesen-knopf[hidden] { display: none; }

/* Der Mond legt die Sitzung schlafen — gleiches stilles Grau wie die Nadel,
   rechts außen. */
.karte .mond {
  flex: none;
  background: none;
  border: 0;
  padding: .2rem;
  color: var(--schrift-schwach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte .mond svg { width: 16px; height: 16px; }

/* Archiv-Kiste und Mülleimer — gleiche stille Reihe wie Nadel und Mond.
   Der Mülleimer erscheint nur im Archiv (siehe app.js) und färbt sich beim
   Zeigen warnend, damit klar ist: Das hier ist endgültig. */
.karte .archiv,
.karte .muell {
  flex: none;
  background: none;
  border: 0;
  padding: .2rem;
  color: var(--schrift-schwach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte .archiv svg,
.karte .muell svg { width: 16px; height: 16px; }
.karte .muell:hover { color: var(--warn, #d66); }

.karte .vorschau {
  font-size: .78rem;
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.karte .angaben {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .67rem;
  color: var(--schrift-schwach);
  font-variant-numeric: tabular-nums;
}

/* Steht rechts außen und nur dann da, wenn im Projekt mehr als ein Terminal
   läuft. Eine Fußnote, kein Etikett — sie soll die Karte nicht beschweren. */
.karte .terminals {
  margin-left: auto;
  opacity: .6;
}

.etikett {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 500;
  padding: .12rem .42rem;
  border-radius: 5px;
}
.etikett.running { color: var(--laeuft); background: color-mix(in srgb, var(--laeuft) 14%, transparent); }
.etikett.waiting { color: var(--wartet); background: color-mix(in srgb, var(--wartet) 16%, transparent); }
.etikett.idle    { color: var(--ruht);   background: color-mix(in srgb, var(--ruht) 16%, transparent); }
/* Schläft: ein kühles Nachtblau — klar von „ruht" zu unterscheiden. */
.etikett.sleeping { color: #9AA8C7; background: color-mix(in srgb, #9AA8C7 16%, transparent); }
/* Abgestürzt: warmes Terrakotta — sichtbar anders als das sanfte Schlafblau. */
.etikett.crashed { color: #C4622E; background: color-mix(in srgb, #C4622E 16%, transparent); }
.etikett.frisch  { color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, transparent); }

/* Der Punkt vor dem Namen — dasselbe Zeichen, das jeder von ungelesenen
   Nachrichten kennt. Er sitzt in der oberen Zeile vor dem Namen. */
.karte.ungelesen .name::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--akzent);
  vertical-align: middle;
}
.karte.ungelesen .name { font-weight: 600; }

.leer {
  text-align: center;
  color: var(--schrift-schwach);
  font-size: .88rem;
  padding: 3rem 1.5rem;
}

.fuss {
  flex: none;
  padding: .7rem .8rem calc(.7rem + var(--unten));
  border-top: 1px solid var(--linie);
  background: var(--grund);
}

/* --- Die Unterhaltung zum Lesen ---
   Kein Terminal, kein Gewusel. Nur was gesagt wurde. */

.verlauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Nie seitlich: overflow-y allein machte die Querrichtung auch scrollbar,
     und ein einziger übriger langer Pfad ließ den ganzen Verlauf wackeln. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 1rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* Wo der Sprecher wechselt, wird die Luft größer.
   Ein neuer Gedanke von dir soll sich vom vorigen Absatz abheben — sonst
   verschwimmt die Unterhaltung zu einer einzigen Textwand. */
.gesagt,
.foto {
  margin-top: 1.1rem;
}
.verlauf > :first-child { margin-top: 0; }
.verlauf > [hidden] + * { margin-top: 0; }

/* Zeit und Tag: leise, damit sie das Gespräch nicht übertönen. Die Uhrzeit
   steht klein in der Knopfleiste, das Datum als Trenner, wo ein neuer Tag
   beginnt. Ganz oben: „Älteres wird geholt" bzw. „Anfang des Gesprächs". */
.zeitmarke,
.tagestrenner,
.verlauf-rand {
  font-size: .72rem;
  color: var(--schrift-schwach);
  font-variant-numeric: tabular-nums;
}
.zeitmarke { align-self: center; padding: 0 .4rem; }
.tagestrenner { text-align: center; margin-top: .6rem; }
.verlauf-rand { text-align: center; }
.verlauf-rand[hidden] { display: none; }

.blase {
  white-space: pre-wrap;      /* Absätze bleiben Absätze */
  overflow-wrap: anywhere;    /* lange Pfade sprengen nicht das Layout */
}

/* Was du gesagt hast: die Blase rechts, darunter der Nochmal-Knopf. Beides
   zusammen rutscht nach rechts, damit die Blase bleibt, wo man sie erwartet. */
.gesagt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Was du gesagt hast — rechts, in einer Blase, wie man es erwartet.
   Der Akzentrand macht auf einen Blick klar, dass hier du sprichst. */
.blase.du {
  max-width: 85%;
  background: var(--erhoben-2);
  color: var(--schrift);
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  border-right: 2px solid var(--akzent);
  padding: .65rem .85rem;
  font-size: .92rem;
  line-height: 1.55;
}

/* Was Claude geantwortet hat — keine Blase, sondern Text. Volle Breite,
   Serifenschrift, luftig gesetzt: gebaut zum Lesen, nicht zum Überfliegen.
   Genau so macht es die Claude-App, und aus gutem Grund. */
.antwort {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.blase.claude {
  background: none;
  color: var(--schrift);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.68;
  padding: .1rem .1rem .2rem;
}
.blase.claude strong { font-weight: 650; }
.blase.claude em { font-style: italic; }

/* Befehle und Pfade in Claudes Text: Monospace, damit man sie als solche
   erkennt und nicht mit Fließtext verwechselt. */
.blase.claude code {
  font-family: var(--mono);
  font-size: .84em;
  background: var(--erhoben-2);
  border-radius: 5px;
  padding: .1em .35em;
  overflow-wrap: anywhere;
}

/* Unter jeder Antwort: vorlesen und kopieren.
   Vorlesen, weil man am Steuer nicht lesen kann. Kopieren, weil Markieren mit
   dem Finger die Hölle ist und Claude ständig Befehle und Pfade nennt. */
.antwort-leiste {
  display: flex;
  gap: .15rem;
  margin-top: -.15rem;
}

/* Der Nochmal-Knopf unter deiner Blase. Halb durchscheinend, bis man ihn
   braucht — er soll die eigene Nachricht nicht überstrahlen. */
.gesagt-leiste {
  display: flex;
  margin-top: -.1rem;
  opacity: .55;
}
.gesagt-leiste:hover { opacity: 1; }

.klein-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  /* Sichtbar auch im Auto bei Sonne: heller Umriss statt durchsichtig, kräftige
     Icon-Farbe statt der blassesten. Und etwas größer, damit man ihn trifft. */
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 9px;
  color: var(--schrift);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.klein-knopf svg { width: 19px; height: 19px; }
.klein-knopf:active { background: var(--erhoben); }
.klein-knopf svg { width: 16px; height: 16px; }
.klein-knopf:active { background: var(--erhoben-2); }
.klein-knopf.spricht { color: var(--laeuft); }
.klein-knopf.getan  { color: var(--laeuft); }

/* Ein geschicktes Foto — als Bild, nicht als Pfad.
   Auf dem Handy drei Viertel der Breite; am Rechner wären das fast ein Meter
   Bildschirm für einen Screenshot, deshalb zusätzlich eine feste Grenze.
   Antippen öffnet es ohnehin in voller Größe. */
.foto {
  align-self: flex-end;
  max-width: min(75%, 420px);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.foto img {
  width: 100%;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  border: 1px solid var(--linie);
  cursor: pointer;
}
/* Die gesammelten Links: eine Zeile je Link, antippen öffnet, das Kreuz
   wirft ihn raus. */
.links-liste { display: flex; flex-direction: column; overflow-y: auto; }

/* Der Zusatz in einer Gruppen-Kopfzeile („hält 1,3 GB frei"). */
.gruppe-zusatz {
  margin-left: auto;
  font-size: .72rem;
  color: var(--schrift-leise);
  white-space: nowrap;
}
.gruppe .gruppe-zusatz + .anzahl { margin-left: .5rem; }
.link-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .1rem;
  border-bottom: 1px solid var(--linie);
}
.link-zeile:last-child { border-bottom: 0; }
.link-zeile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-decoration: none;
}
.link-titel {
  color: var(--akzent);
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.link-adresse {
  color: var(--schrift-leise);
  font-family: var(--mono);
  font-size: .72rem;
  overflow-wrap: anywhere;
}

.bildunterschrift {
  font-size: .82rem;
  color: var(--schrift-leise);
  text-align: right;
  padding-right: .2rem;
  overflow-wrap: anywhere;    /* lange Pfade umbrechen statt überstehen */
}

/* "Claude anhalten" — erscheint nur, während er wirklich arbeitet.
   Kein "neu erzeugen": Claude tut hier Dinge, die man nicht doppelt will. */
.abbrechen-leiste {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: 0 .7rem .3rem;
  padding: .55rem;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 11px;
  color: var(--schrift-leise);
  font-family: var(--sans);
  font-size: .85rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.abbrechen-leiste:active {
  background: var(--akzent-weich);
  color: var(--akzent);
}
.abbrechen-leiste svg { width: 16px; height: 16px; }

/* Werkzeuge und Code: da, aber leise. Sie sollen den Text nicht überstimmen. */
.notiz {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--schrift-schwach);
  padding: .35rem .6rem;
  border-left: 2px solid var(--linie);
  align-self: stretch;
}
.notiz.werkzeug::before {
  content: "⏺ ";
  color: var(--laeuft);
}

.notiz.code {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.notiz.code .kopfzeile { display: block; }
.notiz.code pre {
  margin-top: .45rem;
  padding: .6rem;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow-x: auto;
  font-size: .68rem;
  line-height: 1.5;
  color: var(--schrift-leise);
}

/* --- Terminal --- */
.terminal {
  flex: 1;
  min-height: 0;
  padding: .4rem .3rem .2rem .5rem;
  background: var(--grund);
  overflow: hidden;
}
.xterm .xterm-viewport { overflow-y: auto !important; }

/* Die Tastenleiste, die es auf dem Handy sonst nicht gibt. */
.sondertasten {
  flex: none;
  display: flex;
  gap: .35rem;
  padding: .45rem .55rem;
  border-top: 1px solid var(--linie);
  overflow-x: auto;
  scrollbar-width: none;
}
.sondertasten::-webkit-scrollbar { display: none; }

.taste {
  font-family: var(--mono);
  font-size: .72rem;
  background: var(--erhoben-2);
  color: var(--schrift-leise);
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: .4rem .6rem;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.taste:active { background: var(--akzent-weich); }
.taste.warm {
  color: var(--akzent);
  border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
}

/* Die Eingabezeile: ein Feld, in dem die Knöpfe sitzen — nicht drei Dinge
   nebeneinander. So macht es die Claude-App, und es beruhigt den unteren Rand. */
/* Der Text steht oben über die volle Breite, die Knöpfe darunter.
   Alles in einer Reihe zu drängen ging schief: Mit Bild, Mikrofon, Kreuz und
   Modellwähler blieb dem Textfeld ein Streifen von wenigen Zeichen. */
.eingabezeile {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .55rem .7rem calc(.7rem + var(--unten));
  padding: .5rem .6rem .45rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: 20px;
}
.eingabezeile:focus-within { border-color: var(--schrift-schwach); }

/* Der Vorschau-Streifen über dem Feld: die angehängten Fotos als kleine
   Fenster, Dokumente als Kachel mit Namen. Rollt zur Seite, wenn es viele
   werden, statt in die Höhe zu wachsen. */
.anhang-streifen {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .15rem .1rem .35rem;
}
.anhang-chip {
  position: relative;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--grund);
}
.anhang-chip img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
/* Dokumente haben kein Bild — eine Kachel mit Symbol und dem Dateinamen. */
.anhang-chip.datei {
  display: flex;
  align-items: center;
  gap: .35rem;
  height: 56px;
  max-width: 160px;
  padding: 0 .55rem 0 .45rem;
  color: var(--schrift-schwach);
}
.anhang-chip.datei svg { width: 20px; height: 20px; flex: none; }
.anhang-chip.datei span {
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Das Kreuz zum Wegnehmen — oben rechts in der Ecke des Fensters. */
.anhang-weg {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  cursor: pointer;
}
.anhang-weg svg { width: 12px; height: 12px; }
/* Bei der Dokument-Kachel sitzt das Kreuz nicht überm Bild, sondern rechts
   in der Reihe — sonst verdeckt es den Namen. */
.anhang-chip.datei .anhang-weg {
  position: static;
  background: none;
  color: var(--schrift-schwach);
}

.eingabe-knoepfe {
  display: flex;
  align-items: center;
  gap: .4rem;
}
/* Schiebt den Senden-Knopf ans rechte Ende. */
.fueller { flex: 1; }

.eingabezeile .eingabe {
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: .35rem .2rem;
  /* Wächst beim Diktieren mit, bis es selbst zu rollen beginnt. */
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.45;
}
.eingabezeile .eingabe:focus { border: 0; outline: none; }

/* Das Kreuz rechts oben im Feld: leert alles mit einem Tipp. Sitzt IM Feld
   (nicht in der Knopfreihe), damit klar ist, worauf es sich bezieht — und
   verschwindet, sobald nichts mehr drinsteht. Das Feld lässt rechts Platz,
   sonst liefe der Text darunter durch. */
.feld-rahmen { position: relative; }
.feld-rahmen .eingabe { padding-right: 2.1rem; }
.knopf-leeren {
  position: absolute;
  top: .25rem; right: .1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--erhoben-2);
  color: var(--schrift-schwach);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf-leeren[hidden] { display: none; }
.knopf-leeren:active { background: var(--verwerfen); color: #fff; }
.knopf-leeren svg { width: 14px; height: 14px; }

.knopf-senden {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  background: var(--akzent);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* Gesperrt, solange Claude arbeitet: das Stoppschild statt des Pfeils, gedämpft.
   Zum Unterbrechen gibt es den Anhalten-Knopf. */
.knopf-senden.blockiert {
  background: var(--erhoben-2);
  color: var(--schrift-schwach);
}
.knopf-senden:active { filter: brightness(.9); }
.knopf-senden svg { width: 17px; height: 17px; }

/* Das Mikrofon. Im Auto der wichtigste Knopf der App.
   Gleiche kräftige Icon-Farbe wie die Knöpfe unter den Antworten
   (Lautsprecher/Kopieren/Teilen) — die leise Fassung war Roli zu dunkel. */
.knopf-diktat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  background: none;
  color: var(--schrift);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf-diktat:active { background: var(--erhoben-2); }
.knopf-diktat svg { width: 18px; height: 18px; }

/* Das Kreuz neben dem laufenden Mikrofon: wirft das Diktat weg.
   Das Mikrofon leuchtet währenddessen orange — das Kreuz braucht deshalb einen
   eigenen Ton, sonst verschwimmen die beiden zu einem Knubbel. Ein warnendes
   Rot, umrandet: erkennbar auf einen Blick, ohne zu schreien. */
.knopf-diktat.verwerfen {
  background: var(--verwerfen-weich);
  border: 1px solid var(--verwerfen);
  color: var(--verwerfen);
}
.knopf-diktat.verwerfen[hidden] { display: none; }
.knopf-diktat.verwerfen:active { background: var(--verwerfen); color: #fff; }
.knopf-diktat.verwerfen svg { width: 16px; height: 16px; }

/* Während das Bild hochgeht, blinkt der Knopf leise. */
.knopf-diktat.laedt {
  color: var(--akzent);
  animation: pochen 1.2s ease-in-out infinite;
}

/* Während es zuhört, pulsiert es — sonst weiß man nicht, ob es lauscht. */
.knopf-diktat.hoert {
  background: var(--akzent);
  color: #fff;
  animation: pochen 1.4s ease-in-out infinite;
}
@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 55%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--akzent) 0%, transparent); }
}

/* --- Eingabefelder --- */
.eingabe {
  width: 100%;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .65rem .75rem;
  color: var(--schrift);
  font-family: var(--sans);
  font-size: 16px;      /* unter 16px zoomt Android beim Antippen hinein */
  resize: none;
}
.eingabe::placeholder { color: var(--schrift-schwach); }
.eingabe:focus { border-color: var(--akzent); outline: none; }

/* --- Formulare --- */
.formular {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem .9rem calc(1.5rem + var(--unten));
}
.feld { display: flex; flex-direction: column; gap: .4rem; }
.marke {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--schrift-schwach);
}

.ordnerwahl { display: flex; flex-direction: column; gap: .35rem; }
.ordner {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .6rem .7rem;
  font-family: var(--mono);
  font-size: .78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ordner.gewaehlt {
  border-color: var(--akzent);
  background: var(--akzent-weich);
}
.ordner .punkt-wahl {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid var(--schrift-schwach);
}
/* Die Stimmenauswahl benutzt dieselben Zeilen wie die Ordnerwahl. */
.ordner .stimme-name { font-family: var(--sans); font-size: .92rem; }
.ordner .sub {
  margin-left: auto;
  font-size: .72rem;
  color: var(--schrift-schwach);
  font-family: var(--sans);
}
.ordner .klein-knopf { margin-left: .5rem; }

/* Die Geräteliste benutzt dieselben Zeilen; der Name links, der Aussperr-Knopf
   rechts. Keine Zeilen-Auswahl wie bei Stimmen — nur der Knopf ist aktiv. */
.ordner .geraet-name {
  font-family: var(--sans);
  font-size: .92rem;
  margin-right: auto;
}
#geraete-liste .ordner { cursor: default; }
#knopf-abmelden { margin-top: .7rem; width: 100%; }

.ordner.gewaehlt .punkt-wahl {
  border-color: var(--akzent);
  border-width: 4px;
}

.schalterzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  color: var(--schrift-leise);
  cursor: pointer;
}
.schalterzeile input { display: none; }
.schalter {
  margin-left: auto;
  width: 38px; height: 21px;
  border-radius: 11px;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  position: relative;
  flex: none;
  transition: background .15s;
}
.schalter::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--schrift-schwach);
  transition: transform .15s, background .15s;
}
.schalterzeile input:checked + .schalter {
  background: var(--akzent);
  border-color: var(--akzent);
}
.schalterzeile input:checked + .schalter::after {
  transform: translateX(17px);
  background: #fff;
}

/* --- Anmeldung --- */
.anmeldung {
  margin: auto;
  width: 100%;
  max-width: 340px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-align: center;
}
.anmeldung h1 {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--akzent);
  letter-spacing: -.02em;
}
.anmeldung p { color: var(--schrift-leise); font-size: .9rem; }
#anmelde-formular { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }

.fehler {
  color: var(--akzent);
  font-size: .85rem;
}
.hinweis {
  color: var(--schrift-schwach);
  font-size: .78rem;
  line-height: 1.5;
}
/* Der Link im Fuß der Einstellungen zur Marken-Seite. Im Akzent, klar als Link
   erkennbar, mit genug Höhe zum bequemen Antippen. */
.fuss-link {
  display: inline-block;
  padding: .25rem 0;
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Der öffentliche Schlüssel. Lang, hässlich, harmlos. */
.schluessel {
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--schrift-leise);
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: .7rem;
  word-break: break-all;
  text-align: left;
  user-select: all;          /* ein Fingertipp markiert alles */
  max-height: 30vh;
  overflow-y: auto;
}

/* Kopplungscode-Eingabe auf der Freischalt-Ansicht. */
.koppel-formular { display: flex; flex-direction: column; gap: .5rem; }
.koppel-code {
  text-align: center;
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Der Notweg über den Schlüssel — zusammengeklappt, damit er den Hauptweg
   (Code eintippen) nicht überlagert. */
.notweg { margin-top: 1.2rem; text-align: left; }
.notweg summary {
  cursor: pointer;
  color: var(--schrift-leise);
  font-size: .85rem;
  padding: .3rem 0;
}
.notweg p { margin: .5rem 0; }

/* Der erzeugte Code für ein weiteres Gerät (in den Einstellungen). */
.koppel-anzeige { margin-top: .4rem; }
.koppel-code-gross {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: .1em;
  text-align: center;
  color: var(--schrift);
  background: var(--erhoben-2);
  border: 1px solid var(--akzent);
  border-radius: 10px;
  padding: .7rem;
  user-select: all;
}

.knopf-rand {
  width: 100%;
  background: none;
  color: var(--schrift-leise);
  border: 1px solid var(--linie);
  border-radius: 11px;
  padding: .7rem;
  font-family: var(--sans);
  font-size: .87rem;
  cursor: pointer;
}
.knopf-rand:active { background: var(--erhoben-2); }

/* --- Routinen ---
   Eine Karte je Zeitplan: Name, wofür es gut ist, wann es dran ist, und die
   drei Handgriffe. Ruhig wie die Bibliothek — hier schaut man nach, man
   hetzt nicht. */
.routinen-hinweis { padding: .5rem .9rem 0; }
.routine-karte { cursor: pointer; }
.routine-projekt {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .03em;
  color: var(--akzent);
}
.routine-text {
  font-size: .82rem;
  color: var(--schrift-leise);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.routine-zeit {
  font-size: .78rem;
  color: var(--schrift-schwach);
  line-height: 1.5;
}
.routine-zeit b { font-weight: 600; color: var(--schrift-leise); }
.routine-karte.pausiert .routine-zeit b { color: var(--schrift-schwach); }
.routine-karte.laeuft .routine-zeit b { color: var(--laeuft); }
.routine-knoepfe { display: flex; gap: .4rem; margin-top: .2rem; flex-wrap: wrap; }
.routine-knopf {
  background: var(--erhoben);
  color: var(--schrift-leise);
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: .4rem .7rem;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.routine-knopf svg { width: 15px; height: 15px; }
.routine-knopf:active { background: var(--erhoben-2); }
.routine-knopf:disabled { opacity: .45; }
.routine-leer { color: var(--schrift-schwach); text-align: center; padding: 2rem 1rem; }
.protokoll-text {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--schrift-leise);
  background: var(--erhoben-2);
  border-radius: 10px;
  padding: .7rem;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: .4rem 0 calc(.5rem + var(--unten));
}

/* --- Bibliothek ---
   Die Reiter oben zum Filtern, darunter die Skill-Karten. Ruhiger als die
   Sitzungsliste — hier stöbert man, statt auf einen Blick etwas zu erfassen. */
/* Die Lupe: Suchfeld über den Kategorie-Reitern. */
.bib-suche {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: .6rem .7rem .2rem;
}
.bib-suche-lupe {
  position: absolute;
  left: 1.15rem;
  width: 18px;
  height: 18px;
  color: var(--schrift-schwach);
  pointer-events: none;
}
.bib-suchfeld {
  width: 100%;
  padding: .55rem .7rem .55rem 2.3rem;   /* Platz links für die Lupe */
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: .7rem;
  color: var(--schrift);
  font-family: var(--sans);
  font-size: .92rem;
}
.bib-suchfeld:focus { outline: none; border-color: var(--schrift-schwach); }

/* Die Lupe im Verlauf: dasselbe Feld wie in der Bibliothek, daneben der
   Zähler („3/12") und die Pfeile zum Springen. */
.verlauf-suche { gap: .2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linie); }
.verlauf-suche .bib-suchfeld { flex: 1; min-width: 0; }
.verlauf-suche .knopf-blank { padding: .35rem; font-size: .8rem; }
.verlauf-suche .knopf-blank svg { width: 18px; height: 18px; }
.verlauf-suche-stand {
  flex: none;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--schrift-schwach);
  padding: 0 .2rem;
  white-space: nowrap;
}
mark.treffer {
  background: color-mix(in srgb, var(--akzent) 28%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
mark.treffer.aktuell { background: var(--akzent); color: #fff; }

.bib-reiter {
  flex: none;
  display: flex;
  gap: .4rem;
  padding: .6rem .7rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linie);
}
.bib-reiter::-webkit-scrollbar { display: none; }

.reiter {
  flex: none;
  background: var(--erhoben-2);
  color: var(--schrift-leise);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .38rem .85rem;
  font-family: var(--sans);
  font-size: .8rem;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reiter.an {
  background: var(--akzent-weich);
  border-color: var(--akzent);
  color: var(--akzent);
}
.reiter:active { filter: brightness(1.15); }

.bib-liste {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .6rem .7rem calc(1rem + var(--unten));
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.bib-karte {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--erhoben-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .75rem .8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bib-karte:active { background: var(--erhoben); }

.bib-kopf { display: flex; align-items: center; gap: .5rem; }
.bib-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--schrift);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Der Favoriten-Stern rechts in der Kopfzeile. */
.bib-stern {
  margin-left: auto;      /* schiebt sich (und ein evtl. Fach davor) nach rechts */
  flex: none;
  border: 0;
  background: none;
  padding: .1rem .25rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--schrift-schwach);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bib-stern.an { color: var(--akzent); }
/* Steht ein Fach-Schild daneben, braucht der Stern die auto-Marge nicht mehr —
   dann schiebt schon das Fach die beiden nach rechts. */
.bib-fach + .bib-stern { margin-left: .1rem; }

/* Das Fach — ein kleines Schild rechts, in der Akzentfarbe. */
.bib-fach {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .03em;
  color: var(--akzent);
  background: var(--akzent-weich);
  border-radius: 5px;
  padding: .12rem .45rem;
  white-space: nowrap;
}

/* Die Beschreibung: höchstens zwei Zeilen, danach wird abgeschnitten — die
   Original-Beschreibungen der Skills sind teils absatzlang. */
.bib-desc {
  font-size: .82rem;
  color: var(--schrift-leise);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bib-fuss {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-top: .05rem;
}
.bib-herkunft {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--schrift-schwach);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Das Benennen-Blatt benutzt dasselbe Blatt von unten wie der Modellwähler;
   nur die Felder darin brauchen eigenen Abstand. */
.skill-formular {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-bottom: .5rem;
}
.skill-formular .hinweis {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Am großen Bildschirm ---------------------------------------------------
 *
 * Die App ist fürs Handy gebaut: eine schmale Spalte, ein Daumen, alles
 * untereinander. Am Rechner zieht sich genau dieselbe Spalte über die volle
 * Fensterbreite — Textzeilen werden so lang, dass das Auge beim Umbrechen den
 * Anfang nicht wiederfindet, und die Knöpfe der Kopfzeile stehen einen halben
 * Meter auseinander.
 *
 * Die Antwort ist keine zweite Oberfläche, sondern eine Grenze: Ab etwa
 * Tablet-Breite bleibt der Inhalt in der Mitte stehen und wird nicht breiter
 * als eine bequeme Lesespalte. Daneben liegt eine ruhige, etwas dunklere
 * Fläche, damit man sieht, wo die App aufhört, statt im Nichts zu stehen.
 *
 * Es bleibt EIN Bausatz für Handy und Rechner. Alles, was hier steht, ist eine
 * Begrenzung des Vorhandenen — keine eigene Fassung, die man doppelt pflegen
 * müsste.
 */
@media (min-width: 900px) {
  /* Auch das html-Element, nicht nur body: Wo der Körper nicht hinreicht — der
     Streifen unter der Eingabezeile — schaut sonst der alte Grund durch und die
     Seite bekommt eine helle Kante, die nirgendwo hingehört. */
  html, body { background: var(--neben); }

  /* Die Ansicht füllt weiter das Fenster; zentriert wird, was in ihr steht. */
  .ansicht {
    align-items: center;
    background: var(--neben);
  }
  /* Ohne feste Breite schrumpfen die Kinder beim Zentrieren auf ihren Inhalt
     zusammen — deshalb beides: volle Breite bis zur Grenze.
     Die Blätter sind ausgenommen: Sie liegen zwar im selben Kasten, hängen aber
     fest am Fenster und decken absichtlich alles zu (siehe weiter unten). */
  .ansicht > *:not(.blatt) {
    width: 100%;
    max-width: var(--spalte);
    background: var(--grund);
    /* Eine Kante links und rechts, damit die Spalte als Fläche zusammenhält. */
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
  }

  /* Am Rechner tippt man mit zehn Fingern; das Feld darf mehr zeigen, bevor es
     selbst zu rollen beginnt. */
  .eingabezeile .eingabe { max-height: 260px; }

  /* Die Blätter von unten fahren sonst über die ganze Fensterbreite herein —
     ein zwei Meter breiter Streifen mit drei Knöpfen darin. Sie halten sich an
     dieselbe Spalte wie der Rest und bekommen unten runde Ecken, weil sie am
     Rechner nicht mehr am Bildschirmrand kleben. */
  .blatt { align-items: center; }
  .blatt-inhalt {
    width: 100%;
    max-width: var(--spalte);
    border-radius: 20px 20px 0 0;
    border-left: 1px solid var(--linie);
    border-right: 1px solid var(--linie);
  }
}

/* --- Verbrauch: Balken für Kontextfenster und Plan-Limits -------------------- */

/* Die Info-Zeile ist antippbar — sie öffnet das Verbrauchs-Blatt. */
#sitzung-info-text { cursor: pointer; }

.verbrauch-liste {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: .25rem .25rem .75rem;
  color: var(--schrift-leise);
}

.verbrauch-zeile { display: flex; flex-direction: column; gap: .45rem; }

.verbrauch-kopf {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9rem;
  color: var(--schrift);
}

.verbrauch-wert {
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.verbrauch-balken {
  height: 6px;
  border-radius: 3px;
  background: var(--erhoben-2);
  overflow: hidden;
}

/* Grün, ab 70 % gelb, ab 90 % rot — die Farben, die die App ohnehin spricht. */
.verbrauch-fuellung { height: 100%; border-radius: 3px; background: var(--laeuft); }
.verbrauch-fuellung.gelb { background: var(--wartet); }
.verbrauch-fuellung.rot { background: var(--verwerfen); }

/* Die ganze Info-Zeile ist antippbar; der Pfeil verrät, dass dahinter das
   Verbrauchs-Blatt wartet. */
.sitzung-info { cursor: pointer; }
#sitzung-info-text::after { content: " ›"; color: var(--schrift-schwach); }

/* Links im Verlauf: antippbar, in Akzentfarbe, brechen notfalls um statt die
   Blase zu sprengen. Lange Adressen zeigt die App gekürzt (siehe app.js). */
.verlauf-link {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* Ersetzt zwei frühere Inline-Stile — nötig für eine strenge CSP
   (style-src ohne unsafe-inline). */
.icon-defs { position: absolute; }
.zentriert { text-align: center; }

/* --- Wisch-Aktualisieren -----------------------------------------------------
   Von oben nach unten ziehen lädt die Seite neu — man muss die App nicht mehr
   schließen und neu öffnen. Der Kreis hängt unsichtbar über dem oberen Rand
   und wandert mit dem Finger herunter; sobald genug gezogen ist, färbt er
   sich in den Akzent ("bereit"). Geschoben wird er von app.js per transform,
   hier steht nur, wie er aussieht. */
.zieh-hinweis {
  position: fixed;
  top: calc(var(--oben) + 6px);
  left: 50%;
  z-index: 60;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transform: translate(-50%, -60px);   /* Ruhelage: komplett hinter dem Rand */
  will-change: transform;
}
.zieh-hinweis.bereit { color: var(--akzent); }
.zieh-hinweis.laedt svg { animation: zieh-drehen .8s linear infinite; }
@keyframes zieh-drehen { to { transform: rotate(360deg); } }

/* --- Spotlight-Tour ----------------------------------------------------------
   Die geführte Einführung: Ein "Loch" liegt über dem gerade erklärten Element —
   der riesige Schatten drumherum dunkelt den Rest der Seite ab. Daneben das
   Erklär-Fenster. Position setzt app.js per JS (CSP erlaubt keine
   style-Attribute im Markup), hier steht nur das Aussehen. */
#tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}
#tour-loch {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62);
  /* Das Loch selbst fängt keine Tipps — aber es liegt über dem Element,
     bedienen kann man es während der Tour also nicht. Absicht: erst zuhören. */
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
#tour-fenster {
  position: fixed;
  width: min(92vw, 340px);
  background: var(--erhoben-2);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.tour-zu {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--schrift-schwach);
}
.tour-kapitel {
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 4px;
}
.tour-titel {
  font: 600 17px/1.3 var(--sans);
  margin-bottom: 6px;
  padding-right: 24px;   /* Platz für das Schließen-Kreuz */
}
.tour-text {
  font: 400 14.5px/1.5 var(--sans);
  color: var(--schrift-leise);
}
.tour-text b { color: var(--schrift); }
.tour-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.tour-zaehler {
  font: 500 12px/1 var(--sans);
  color: var(--schrift-schwach);
}
.tour-weiter { width: auto; padding: 10px 22px; }