/* 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); }

/* 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;
  gap: .4rem;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
.chip-reihe::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  font-size: .82rem;
  color: var(--schrift);
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: 1rem;
  padding: .35rem .8rem;
  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: 2rem;
  height: 2rem;
  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: .2rem;
  min-width: 11rem;
  padding: .35rem;
  background: var(--erhoben);
  border: 1px solid var(--linie);
  border-radius: .8rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  z-index: 30;
}
.chip-menu {
  text-align: left;
  white-space: nowrap;
  background: none;
  border: 0;
  color: var(--schrift);
  padding: .55rem .6rem;
  border-radius: .55rem;
  font-family: var(--sans);
  font-size: .9rem;
}
.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;
  border: 1px solid var(--linie);
  background: none;
  color: var(--schrift-schwach);
  font-family: var(--sans);
  font-size: .72rem;
  padding: .3rem .5rem;
  border-radius: .5rem;
  cursor: pointer;
}
.befehl-leiste.an { color: var(--akzent); border-color: var(--akzent); }

.befehl-weg {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  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: 1.9rem;
  height: 1.9rem;
  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; }

/* 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; }

.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); }

/* --- 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; }
.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; }

/* Die Vorlese-Leiste — eine schwebende Abspiel-Pille über der Eingabe, wie in
   einer Musik-App. Sie erscheint nur während des Vorlesens (das `hidden`-Attribut
   nimmt die JS weg). Mittig, mit etwas Luft nach unten, damit sie klar über den
   Schnellbefehlen sitzt. */
.vorlese-leiste {
  display: flex;
  align-items: center;
  gap: .3rem;
  align-self: center;
  margin: .2rem auto .5rem;
  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; }

.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); }

/* 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; }

.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); }

.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;
  -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; }

.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. */
.foto {
  align-self: flex-end;
  max-width: 75%;
  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;
}
.bildunterschrift {
  font-size: .82rem;
  color: var(--schrift-leise);
  text-align: right;
  padding-right: .2rem;
}

/* "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; }

.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;
}

.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); }

/* --- 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); }

.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);
  }
}