/* =========================================================================
   MagicDB — Gestaltung

   Die Farben kommen aus dem Druck von Spielkarten: Tiefschwarz, das Rot der
   Herz- und Karo-Farben, das Blau der Rider-Back-Rückseite. Die Neutraltöne
   sind leicht ins Blaue verschoben, damit sie gewählt und nicht geerbt
   wirken.

   Bodoni — die Schrift alter Zauberliteratur — traegt nur die grossen
   Ueberschriften. Alles, was gelesen oder bedient wird, steht in IBM Plex
   Sans, alle Kennzahlen und Etiketten in IBM Plex Mono. Detailseiten sind
   zum Lesen gebaut, Listenseiten zum Arbeiten.
   ========================================================================= */

@import url("schriften.83d89bbaea9c.css");

/* --- Farben und Maße ---------------------------------------------------- */

:root {
  --ground:      #EBEDF1;
  --surface:     #F9FAFB;
  --surface-alt: #E3E6EC;
  --ink:         #14181F;
  --ink-soft:    #3D4551;
  --muted:       #667083;
  --rule:        #CDD2DB;
  --rule-soft:   #DEE2E8;

  --accent:      #96202F;
  --accent-weich:#B8434F;
  --accent-grund:#F6E9EA;
  --blau:        #2E4878;
  --blau-grund:  #E7ECF5;

  --gut:         #2C6047;
  --gut-grund:   #E4EFE9;
  --warn:        #8A5B12;
  --warn-grund:  #F6EDDD;

  --schatten: 0 1px 2px rgba(20, 24, 31, .06);
  --radius: 3px;
  --rail: 15rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #101319;
    --surface:     #171B23;
    --surface-alt: #1E232C;
    --ink:         #E3E7ED;
    --ink-soft:    #C2C8D2;
    --muted:       #8B94A4;
    --rule:        #2A303B;
    --rule-soft:   #21262F;

    --accent:      #E2707E;
    --accent-weich:#C15464;
    --accent-grund:#2C1B20;
    --blau:        #8AA8DC;
    --blau-grund:  #1A2233;

    --gut:         #6FB593;
    --gut-grund:   #16261F;
    --warn:        #D2A24E;
    --warn-grund:  #2A2115;

    --schatten: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --ground:      #101319;
  --surface:     #171B23;
  --surface-alt: #1E232C;
  --ink:         #E3E7ED;
  --ink-soft:    #C2C8D2;
  --muted:       #8B94A4;
  --rule:        #2A303B;
  --rule-soft:   #21262F;

  --accent:      #E2707E;
  --accent-weich:#C15464;
  --accent-grund:#2C1B20;
  --blau:        #8AA8DC;
  --blau-grund:  #1A2233;

  --gut:         #6FB593;
  --gut-grund:   #16261F;
  --warn:        #D2A24E;
  --warn-grund:  #2A2115;

  --schatten: 0 1px 2px rgba(0, 0, 0, .35);
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-weich); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Typografische Rollen ----------------------------------------------- */

.display, h1, h2 {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-size: 1.35rem; }

h3 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  margin: 0;
}

.etikett {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Abschnitts- und Kartenüberschriften dürfen deutlicher sein als die
   kleinen Etiketten an Kennzahlen. */
.abschnitt > .etikett, .karte > .etikett {
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
  font-weight: 500;
}

.mono, code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
}

.zahl { font-variant-numeric: tabular-nums; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  height: 3.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.marke {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.marke em { font-style: italic; font-weight: 400; color: var(--accent); }

.topbar nav { display: flex; gap: .1rem; flex: 1; min-width: 0; overflow-x: auto; }

.topbar nav a {
  padding: .3rem .5rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .88rem;
  white-space: nowrap;
}
.topbar nav a:hover { background: var(--surface-alt); color: var(--ink); }
.topbar nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

.topbar form { margin: 0; display: flex; align-items: center; }

/* Umschalter Hell / Dunkel / System. Das Zeichen setzt thema.js. */
.thema {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}
.thema:hover { border-color: var(--muted); color: var(--ink); }

/* --- Navigation: nebeneinander oder im Menü ------------------------------ *
 *
 * Der Grundzustand ist das MENÜ, nicht die Leiste. kopf.js misst, ob die
 * Bereiche ohne Scrollbalken nebeneinander passen, und setzt dann .breit.
 *
 * Andersherum wäre es falsch: bei elf Bereichen und einer Schrift, die erst
 * nachlädt, ist jede feste Umschaltbreite irgendwo daneben — und bis das
 * Skript greift, stünde ein Scrollbalken da.
 */

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

/* Der eingeklappte Zustand: ein Dropdown unter dem Menüknopf. */
.topbar:not(.breit) .kopfmenue {
  display: none;
  position: absolute;
  top: calc(100% + .35rem);
  right: .9rem;
  min-width: 13rem;
  max-width: calc(100vw - 1.8rem);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}
.topbar:not(.breit).offen .kopfmenue { display: block; }

.topbar:not(.breit) nav {
  flex-direction: column;
  gap: 0;
  overflow: visible;
}
.topbar:not(.breit) nav a {
  padding: .5rem .6rem;
  font-size: .92rem;
  border-radius: var(--radius);
}
/* Quer säße der Balken unter dem Wort in der Zeile darunter; als Strich
   links markiert er den Eintrag, ohne die Höhe zu verändern. */
.topbar:not(.breit) nav a[aria-current="page"] {
  background: var(--surface-alt);
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: var(--radius);
}

.topbar:not(.breit) .kopf-konto {
  gap: .4rem;
  margin-top: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--rule-soft);
}
.topbar:not(.breit) .kopf-konto .knopf { flex: 1; justify-content: center; }
.topbar:not(.breit) .kopf-konto form { flex: 1; display: flex; }
.topbar:not(.breit) .kopf-konto form .knopf { width: 100%; }

/* Breit: der Menürahmen verschwindet, Navigation und Konto werden wieder
   Kinder der Leiste. Die Reihenfolge stellt order her — im Quelltext
   stehen sie zusammen, damit das Menü sie am Stück aufnehmen kann. */
.topbar.breit .kopfmenue { display: contents; }
.topbar.breit .burger { display: none; }
.topbar.breit nav { order: 1; }
.topbar.breit .kopf-suche { order: 2; }
.topbar.breit .thema { order: 3; }
.topbar.breit .kopf-konto { order: 4; }

/* --- Gerüst ------------------------------------------------------------- */

.seite { max-width: 78rem; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }
.seite--schmal { max-width: 60rem; }

.kopfzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.kopfzeile .anzahl { color: var(--muted); font-size: .85rem; }

/* --- Listenseite: Filterleiste plus Ergebnisse -------------------------- */

.arbeitsflaeche {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.filter {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-size: .875rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding-right: .25rem;
}

.filter-gruppe { display: flex; flex-direction: column; gap: .3rem; }
.filter-gruppe > .etikett { margin-bottom: .1rem; }

.filter-wahl {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .18rem .35rem;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1.35;
}
.filter-wahl:hover { background: var(--surface-alt); color: var(--ink); }
.filter-wahl input { margin: 0; accent-color: var(--accent); flex: none; }
.filter-wahl .n {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filter-wahl:has(input:checked) { color: var(--ink); font-weight: 500; }

.filter-leeren {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Suchfeld ----------------------------------------------------------- */

.suche { position: relative; display: flex; }

/* Lupe als SVG im Hintergrund statt als Schriftzeichen ⌕: das Zeichen ist
   je nach Schrift winzig oder fehlt ganz, und es sass zu weit rechts, sodass
   der Platzhaltertext darueberlief. Die Grafik hat eine feste Groesse und
   der Innenabstand links ist darauf abgestimmt. */
.suche input {
  width: 100%;
  padding: .5rem .75rem .5rem 2.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667083' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.5 12.5 L17 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .6rem center;
  background-size: 1.05rem 1.05rem;
}
.suche input::placeholder { color: var(--muted); }

.topbar .suche { width: min(19rem, 30vw); }
.kopf-suche { flex: none; }
.kopf-suche input {
  font-size: .85rem;
  padding: .35rem .6rem .35rem 2.1rem;
  background-position: .55rem center;
  background-size: .95rem .95rem;
}

.nachladen {
  display: block;
  width: 100%;
  padding: .7rem 1rem;
  border: none;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: .87rem;
  cursor: pointer;
}
.nachladen:hover { background: var(--surface-alt); }

.bereichswahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.bereichswahl .chip { padding: .3rem .7rem; font-size: .82rem; }
.bereichswahl .zahl { opacity: .65; margin-left: .2rem; }

/* Textausschnitt im Suchtreffer: normale Schrift statt Mono, weil hier
   Fließtext steht und keine Kennzahlen. */
.zeile .auszug {
  font-family: inherit;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* --- Trefferliste ------------------------------------------------------- */

.treffer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .2rem 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: inherit;
}
.zeile:last-child { border-bottom: none; }
.zeile:hover { background: var(--surface-alt); }

/* Bewusst NICHT in Bodoni: die Didone hat haarfeine Striche, die bei
   Listengroesse ausfransen und auf dunklem Grund fast verschwinden. Bodoni
   bleibt den grossen Ueberschriften vorbehalten, wo sie traegt. */
.zeile .titel {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.zeile:hover .titel { color: var(--accent); }

.zeile .unterzeile {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .7rem;
  font-size: .8rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.zeile .unterzeile b { font-weight: 400; color: var(--ink-soft); }

.zeile .rechts {
  grid-row: span 2;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Zustandsmarken ----------------------------------------------------- */

.marke-status, .chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 2px;
  font-size: .72rem;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}

.marke-status {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .04em;
}
.marke-status::before { content: "●"; font-size: .6em; }

.status-reif     { background: var(--gut-grund);    color: var(--gut);    border-color: var(--gut); }
.status-lerne    { background: var(--warn-grund);   color: var(--warn);   border-color: var(--warn); }
.status-idee     { background: var(--surface-alt);  color: var(--muted);  border-color: var(--rule); }
.status-abgelegt { background: transparent;         color: var(--muted);  border-color: var(--rule); }

.chip {
  background: var(--surface-alt);
  color: var(--ink-soft);
  border-color: var(--rule-soft);
  text-decoration: none;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--effekt { background: var(--blau-grund); color: var(--blau); border-color: transparent; }
.chip--form   { background: var(--accent-grund); color: var(--accent); border-color: transparent; }

.sterne { color: var(--accent); letter-spacing: .06em; font-size: .8rem; white-space: nowrap; }
.sterne .rest { color: var(--rule); }

/* --- Detailseite -------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.5rem;
  align-items: start;
}

.detail-kopf { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.75rem; }

.detail-kopf .zurueck {
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.detail-kopf .marken { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.kennzahlen {
  display: grid;
  /* Feste Spaltenzahl statt auto-fit: nur so steht jede Kachel auf jeder
     Trickseite an derselben Stelle. Mit auto-fit haengt der Umbruch an der
     Anzahl der Kacheln, und die schwankt von Trick zu Trick. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(3.9rem, auto);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin: 1.5rem 0;
  overflow: hidden;
}

.kennzahlen div {
  background: var(--surface);
  padding: .6rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.kennzahlen dt { font-family: "IBM Plex Mono", monospace; font-size: .64rem;
                 letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kennzahlen dd { margin: 0; font-size: .92rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.kennzahlen .fehlt { color: var(--muted); font-weight: 400; }

.abschnitt { margin-bottom: 2rem; display: flex; flex-direction: column; gap: .6rem; }
.abschnitt > .etikett { border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }

.fliesstext { max-width: 64ch; color: var(--ink-soft); }
.fliesstext p { margin: 0 0 .8rem; }
.fliesstext p:last-child { margin-bottom: 0; }

/* Die Methode ist das Geheimnis — sie bekommt eine eigene Anmutung, damit
   beim Überfliegen klar ist, was der Zuschauer sehen darf und was nicht. */
.methode {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
}

/* --- Anleitung: Text, Bilder, Video ------------------------------------- */

.anleitung > :first-child { margin-top: 0; }
.anleitung h2, .anleitung h3, .anleitung h4 {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.4rem 0 .4rem;
  letter-spacing: 0;
}
.anleitung ul, .anleitung ol { margin: 0 0 .9rem; padding-left: 1.3rem; }
.anleitung li { margin-bottom: .3rem; }
.anleitung li::marker { color: var(--accent); }
.anleitung blockquote {
  margin: 0 0 .9rem;
  padding-left: .9rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
}
.anleitung pre {
  background: var(--surface-alt);
  padding: .7rem .9rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
.anleitung img { border-radius: var(--radius); border: 1px solid var(--rule); }

.medium { margin: 1rem 0 0; }
.medium img, .medium video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface-alt);
}
.medium figcaption {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--muted);
}

.bildstrecke {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.bildstrecke .medium { margin: 0; }

.videolink {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  max-width: 64ch;
}
.videolink:hover { border-color: var(--accent); }
.videolink .play {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: .9rem;
}
.videolink span span { display: block; }
.videolink .rolle { font-size: .78rem; color: var(--muted); }

/* --- Seitenspalte der Detailseite --------------------------------------- */

.rail { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 4.5rem; }

.karte {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.karte > .etikett { display: block; padding: .6rem .9rem; border-bottom: 1px solid var(--rule); }
.karte ul { list-style: none; margin: 0; padding: 0; }
.karte li { padding: .55rem .9rem; border-bottom: 1px solid var(--rule-soft); font-size: .87rem; }
.karte li:last-child { border-bottom: none; }
.karte .leerhinweis { padding: .8rem .9rem; color: var(--muted); font-size: .84rem; }

.fundstelle { display: flex; flex-direction: column; gap: .15rem; }
.fundstelle .wo { display: flex; gap: .5rem; align-items: baseline; }
.fundstelle .stelle {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  color: var(--accent);
  white-space: nowrap;
}
.fundstelle .rolle { font-size: .72rem; color: var(--muted); }

/* Beherrschungsgrad eines Griffs — Form trägt die Information mit, nicht
   nur die Farbe. */
.griff { display: flex; align-items: center; gap: .5rem; }
.griff .stand { flex: none; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid var(--muted); }
.griff .stand--sitzt  { background: var(--gut);  border-color: var(--gut); }
.griff .stand--uebung { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); border-color: var(--warn); }
.griff .stand--offen  { background: transparent; }
.griff .name { flex: 1; min-width: 0; }

/* --- Balken für Größenvergleiche ---------------------------------------- */

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

.balken-zeile {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: .75rem;
  font-size: .87rem;
}

.balken-name { color: var(--ink-soft); overflow-wrap: anywhere; }

.balken-spur {
  height: .8rem;
  background: var(--surface-alt);
  border-radius: 2px;
  overflow: hidden;
}

/* Eine Farbe für alle Größenbalken. Das ist ein Groessenvergleich, kein
   Nebeneinander verschiedener Reihen — verschiedene Farben wuerden eine
   Unterscheidung behaupten, die es nicht gibt. */
.balken-strich {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--blau);
  border-radius: 2px;
}

/* Statusbalken tragen die Zustandsfarben. Beschriftung und Wert stehen
   daneben im Klartext — die Farbe ist Beiwerk, nicht der Traeger der
   Bedeutung. So bleibt es lesbar bei Farbenblindheit und im Ausdruck. */
.balken-strich--0 { background: var(--muted); }
.balken-strich--1 { background: var(--warn); }
.balken-strich--2 { background: var(--gut); }
.balken-strich--3 { background: var(--rule); }

.balken-wert {
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Programmnummer im Routinenablauf ----------------------------------- */

.programmnummer {
  display: inline-grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  margin-right: .4rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--ground);
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  color: var(--muted);
  vertical-align: .05em;
}

/* --- Chat --------------------------------------------------------------- */

.nachricht {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: .75rem;
}

/* Die eigene Frage abgesetzt, damit man den Gesprächsverlauf beim
   Überfliegen wiederfindet. */
.nachricht--ich {
  background: var(--surface-alt);
  border-color: var(--rule-soft);
}
.nachricht--ich .fliesstext { color: var(--ink); }

.nachricht .fliesstext { max-width: none; }
.nachricht .fliesstext > :first-child { margin-top: 0; }
.nachricht .fliesstext > :last-child { margin-bottom: 0; }

.werkzeugspur { margin-top: .4rem; }
.werkzeugspur summary {
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.werkzeugspur summary::-webkit-details-marker { display: none; }
.werkzeugspur summary::before { content: "▸ "; }
.werkzeugspur[open] summary::before { content: "▾ "; }
.werkzeugspur ul {
  list-style: none;
  margin: .4rem 0 0;
  padding: .5rem .7rem;
  background: var(--ground);
  border-radius: var(--radius);
  font-size: .78rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.werkzeugspur .rolle { color: var(--muted); font-size: .74rem; }

.chat-eingabe { display: flex; gap: .5rem; margin-top: 1rem; }
.chat-eingabe input { flex: 1; }
.chat-eingabe button { flex: none; }

/* htmx sperrt Feld und Knopf, solange die Antwort läuft. */
.chat-eingabe button:disabled { opacity: .55; cursor: wait; }
.chat-eingabe input:disabled { opacity: .7; }

/* --- Leerzustand ----------------------------------------------------- */

.leerzustand {
  background: var(--surface);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted);
}
.leerzustand p { margin: 0 0 1rem; }

/* --- Schaltflächen ------------------------------------------------------ */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: .87rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.knopf:hover { filter: brightness(1.08); color: #fff; }

.knopf--stumm {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
}
.knopf--stumm:hover { color: var(--ink); border-color: var(--muted); filter: none; }

/* --- Ladeanzeige -------------------------------------------------------- */

.htmx-request .treffer { opacity: .55; transition: opacity .12s; }

/* --- Formulare der Anwendung -------------------------------------------- */

.formular { display: flex; flex-direction: column; gap: 1.75rem; }

/* Einklappbare Bereiche. <details> statt eigener Klapplogik: das kann der
   Browser, es ist mit der Tastatur bedienbar, und es funktioniert auch ohne
   JavaScript. */
.feldgruppe {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.feldgruppe > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.feldgruppe > summary::-webkit-details-marker { display: none; }

/* Eigener Pfeil, damit er in beiden Themen sitzt und sich mitdreht. */
.feldgruppe > summary::before {
  content: "";
  flex: none;
  width: .42rem; height: .42rem;
  border-right: 1.75px solid var(--accent);
  border-bottom: 1.75px solid var(--accent);
  transform: rotate(-45deg);
  margin-left: .12rem;
  transition: transform .14s ease;
}
.feldgruppe[open] > summary::before { transform: rotate(45deg); margin-top: -.2rem; }

.feldgruppe > summary:hover { background: var(--surface-alt); }
.feldgruppe[open] > summary { border-bottom: 1px solid var(--rule); }

.feldgruppe-inhalt {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.15rem 1.35rem 1.35rem;
}

/* Muss abgeschickt werden, soll aber niemand sehen: das Löschkästchen der
   Fundstellen wird über das × der Zeile bedient. */
.nur-fuer-formular {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld > label { font-size: .82rem; color: var(--muted); }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--accent); }

.feld-haken { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .9rem; }
.feld-haken input { accent-color: var(--accent); margin: 0; }

.hilfe { font-size: .78rem; color: var(--muted); line-height: 1.45; }

input[type="file"] {
  font-size: .85rem;
  color: var(--ink-soft);
  padding: .45rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--ground);
  width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: .7rem;
  padding: .3rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
}

/* --- Tag-Auswahl -------------------------------------------------------- */

.taggruppe { gap: .45rem; }

.tagwahl { display: flex; flex-wrap: wrap; gap: .4rem; }

.tagmarke {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--ground);
  font-size: .82rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.tagmarke:hover { border-color: var(--muted); }
.tagmarke input { margin: 0; accent-color: var(--accent); }
.tagmarke:has(input:checked) {
  background: var(--accent-grund);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* --- Markdown-Editor ---------------------------------------------------- */

.editor {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.editor-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  padding: .3rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
}

.editor-knopf {
  padding: .22rem .5rem;
  min-width: 1.9rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  line-height: 1.4;
  cursor: pointer;
}
.editor-knopf:hover { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.editor-vorschau { margin-left: auto; font-family: inherit; }

.editor textarea {
  border: none;
  border-radius: 0;
  background: var(--surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: .84rem;
  line-height: 1.6;
  resize: vertical;
}
.editor textarea:focus-visible { outline-offset: -2px; }

.editor-ausgabe { padding: .9rem 1rem; min-height: 6rem; }

/* --- Bildauswahl im Editor ---------------------------------------------- */

.editor-leiste { position: relative; }

.bildwahl {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: min(24rem, 90vw);
  max-height: 20rem;
  overflow-y: auto;
  margin-top: .3rem;
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.bildwahl .hilfe { padding: .5rem; margin: 0; }

.bildwahl-eintrag {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .35rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
}
.bildwahl-eintrag:hover { background: var(--surface-alt); border-color: var(--rule); }
.bildwahl-eintrag img {
  flex: none;
  width: 3.2rem; height: 2.2rem;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--rule);
}

.dateivorschau {
  flex: none;
  width: 2.4rem; height: 1.7rem;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--rule);
}

.einfuegeknopf {
  flex: none;
  padding: .2rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: .74rem;
  cursor: pointer;
}
.einfuegeknopf:hover { border-color: var(--accent); color: var(--accent); }

/* --- Suchfeld für Auswahllisten ----------------------------------------- */

.suchwahl { position: relative; min-width: 0; }

.suchwahl-verborgen {
  /* Bleibt im Dokument, damit das Formular unveraendert den echten Wert
     schickt — nur unsichtbar und nicht anspringbar. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.suchwahl-feld { width: 100%; font-size: .84rem; padding: .35rem .5rem; }

.suchwahl-liste {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 25;
  max-height: 14rem;
  overflow-y: auto;
  margin: .2rem 0 0;
  padding: .2rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.suchwahl-liste li {
  padding: .3rem .45rem;
  border-radius: 2px;
  font-size: .84rem;
  cursor: pointer;
}
.suchwahl-liste li:hover, .suchwahl-liste li.an { background: var(--accent-grund); color: var(--accent); }
.suchwahl-liste .suchwahl-leer { color: var(--muted); cursor: default; }
.suchwahl-liste .suchwahl-leer:hover { background: transparent; color: var(--muted); }

/* --- Fundstellen-Zeilen ------------------------------------------------- */

.zeilenblock {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.zeilenblock:last-of-type { border-bottom: none; }

.zeile-felder {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr);
  gap: .4rem;
  flex: 1;
  min-width: 0;
}
.zeile-felder select, .zeile-felder input { font-size: .84rem; padding: .35rem .5rem; }

.zeile-weg { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--muted); }
.zeile-weg input { accent-color: var(--accent); }

/* Zum Löschen vorgemerkt — bleibt sichtbar, damit klar ist, was beim
   Speichern verschwindet. */
.zeile-gestrichen { opacity: .45; }
.zeile-gestrichen .zeile-felder { text-decoration: line-through; }

/* --- Dateiliste --------------------------------------------------------- */

.dateiliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.dateiliste li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  background: var(--ground);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  font-size: .86rem;
}
.dateiliste .rolle { margin-left: auto; font-size: .74rem; color: var(--muted); }

.loeschknopf {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.loeschknopf svg { display: block; }
.loeschknopf:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-grund); }

/* --- Fuss des Formulars ------------------------------------------------- */

.formular-fuss {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}

/* Löschen steht bewusst abgesetzt und farblos, damit es nicht versehentlich
   neben „Speichern“ getroffen wird. */
.formular-fuss .loeschen {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: .85rem;
  padding: .42rem .85rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.formular-fuss .loeschen:hover { border-color: var(--accent); color: var(--accent); }

/* --- Formulare (Login und Passkey) -------------------------------------- */

form p { display: flex; flex-direction: column; gap: .3rem; }
label { font-size: .82rem; color: var(--muted); }

/* Bewusst als Ausschluss statt als Aufzaehlung der Typen: sonst faellt jedes
   Feld durch, dessen Typ man beim Schreiben nicht auf dem Zettel hatte —
   number und url sahen genau deshalb im Dunkelmodus weiss aus. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea {
  padding: .5rem .7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  width: 100%;
}

/* Grundgestalt für Knöpfe ohne eigene Klasse — vor allem die, die allauth
   auf den Anmeldeseiten selbst erzeugt.

   :where() bewusst gewählt: es zählt bei der Spezifität als null. Damit
   gewinnt jede Komponentenklasse ohne Ausnahmeliste. Vorher stand hier
   button:not(.knopf):not(.filter-leeren) — das war spezifischer als
   .loeschknopf und hat dessen Innenabstand überschrieben, bis vom Kreuz
   darin nichts mehr zu sehen war. Wer hier eine Ausnahme ergänzen will,
   vergibt dem nächsten Knopf denselben Fehler: dann lieber eine Klasse. */
:where(button) {
  padding: .5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
button.passkey { width: 100%; padding: .7rem 1rem; font-size: 1rem; }
button.sekundaer { background: transparent; color: var(--ink); border-color: var(--rule); }

.trenner {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted); font-size: .8rem; margin: 1.5rem 0 1rem;
}
.trenner::before, .trenner::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.fehler { color: var(--accent); font-size: .84rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.messages li {
  padding: .6rem .9rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: .5rem;
}

/* --- Regal: Quellen als Umschläge -------------------------------------- */

.ansichtwahl {
  display: inline-flex;
  gap: 0;
  margin: 0 0 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.ansichtwahl label { display: inline-flex; margin: 0; cursor: pointer; }
/* Der Knopf ist das Label; das Radio bleibt bedienbar, nur unsichtbar —
   sonst ginge die Tastaturbedienung verloren. */
.ansichtwahl input { position: absolute; opacity: 0; pointer-events: none; }
.ansichtwahl span {
  padding: .32rem .8rem;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--surface);
}
.ansichtwahl label + label span { border-left: 1px solid var(--rule); }
.ansichtwahl input:checked + span {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
}
.ansichtwahl input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: -2px; }

.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.5rem 1.25rem;
  align-items: start;
}

.regalstueck { display: block; text-decoration: none; color: inherit; }

.regalstueck img,
.regalstueck .ruecken {
  width: 100%;
  /* Buchformat statt Quadrat — ein Umschlag ist höher als breit. */
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--schatten);
}
.regalstueck img { display: block; }

/* Ohne Bild: ein gesetzter Rücken statt eines leeren Kastens.
   Die Anzeigeart steht hier und NICHT in der Regel darüber: dort stünde
   sie mit derselben Genauigkeit wie „display: block“ fürs Bild, und der
   Rücken bliebe ein Block — Titel und Art klebten dann aneinander. */
.regalstueck .ruecken {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
  padding: .9rem .8rem;
  background: linear-gradient(160deg, var(--surface-alt), var(--surface));
}
.ruecken-titel {
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ink);
  overflow: hidden;
}
.ruecken-typ {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.regal-titel {
  display: block;
  margin-top: .5rem;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.regalstueck:hover .regal-titel { color: var(--accent); }
.regal-zeile { display: block; font-size: .78rem; color: var(--muted); }

/* Der Nachladeknopf sitzt im Raster und soll über die ganze Breite gehen. */
.nachladen--regal { grid-column: 1 / -1; border-top: 0; border: 1px solid var(--rule-soft); border-radius: var(--radius); }

.suchwahl-anlegen { color: var(--accent); font-weight: 600; }

.kopf-knoepfe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* --- Warten auf etwas, das dauert --------------------------------------- */

/* Ein abgeschalteter Knopf muss auch abgeschaltet aussehen — sonst klickt
   man weiter darauf und haelt die Anwendung für kaputt. */
.knopf:disabled, button.knopf[disabled] {
  opacity: .5;
  cursor: wait;
  pointer-events: none;
}

.warten { margin-top: 1rem; max-width: 26rem; }

.warten-balken {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-alt);
  overflow: hidden;
  position: relative;
}
/* Unbestimmt, weil die Dauer unbekannt ist: ein Streifen wandert, statt
   einen Fortschritt zu behaupten, den niemand kennt. */
.warten-balken::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: 2px;
  background: var(--accent);
  animation: warten-lauf 1.4s ease-in-out infinite;
}
@keyframes warten-lauf {
  0%   { left: -35%; }
  100% { left: 100%; }
}

.warten-text {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Wer Bewegung abgestellt hat, bekommt einen ruhigen Balken — die Auskunft
   steckt ohnehin im Text daneben, nicht in der Animation. */
@media (prefers-reduced-motion: reduce) {
  .warten-balken::after { animation: none; left: 0; width: 100%; opacity: .5; }
}

/* --- Vorschlag des Assistenten ------------------------------------------ */

.vorschlagkasten {
  margin: 0 0 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blau);
  border-radius: var(--radius);
  background: var(--blau-grund);
}
.vorschlag-kopf { margin: 0 0 .75rem; font-size: .92rem; }
.vorschlag-block { margin: .75rem 0 0; font-size: .88rem; }
.vorschlag-block ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.vorschlag-block li { margin: .15rem 0; }
.vorschlag-block summary { cursor: pointer; color: var(--ink-soft); font-size: .85rem; }
.vorschlagkasten .hilfe { margin: .75rem 0 0; }

/* Die Trefferzahl steht zweimal im Dokument: einmal in der Kopfzeile und
   einmal im Ergebnisblock, von wo htmx sie per hx-swap-oob in die Kopfzeile
   hebt. Beim gewöhnlichen Seitenaufruf findet dieser Tausch nicht statt —
   dann stünde sie sichtbar doppelt da. Die Kopie im Block bleibt deshalb
   verborgen; nach dem Tausch sitzt sie in der Kopfzeile und ist sichtbar. */
#treffer > .anzahl { display: none; }

/* Sicherungswarnung. Traegt Farbe UND Text — wer die Farbe nicht sieht,
   liest trotzdem, was los ist. */
.sicherungswarnung {
  padding: .7rem 1rem;
  margin: 0 0 1.5rem;
  border: 1px solid var(--warn);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-grund);
  color: var(--warn);
  font-size: .9rem;
}
.sicherungswarnung code { font-size: .85em; }

.fussnote {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: .82rem;
}

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 62rem) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .rail { position: static; }
}

@media (max-width: 52rem) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arbeitsflaeche { grid-template-columns: minmax(0, 1fr); }
  .filter {
    position: static;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }
  .seite { padding: 1.25rem .9rem 4rem; }
}

/* Eingeklappt teilen sich die Leiste nur noch Marke, Suche und die beiden
   Knöpfe. Die Suche bleibt sichtbar — sie ist der meistbenutzte Weg und soll
   nicht hinter einem Knopf verschwinden — aber gedeckelt: über eine gewisse
   Breite hinaus sieht ein Suchfeld nur noch gezerrt aus. Der Rest des Platzes
   geht als Abstand nach rechts, damit die Knöpfe am Rand sitzen. */
.topbar:not(.breit) .suche {
  width: auto;
  flex: 1 1 6rem;
  max-width: 26rem;
  min-width: 0;
  margin-right: auto;
}
.topbar:not(.breit) .burger { margin-left: 0; }

@media (max-width: 52rem) {
  .topbar { gap: .6rem; padding: 0 .9rem; }
}

/* Sehr schmal: die Wortmarke kleiner, sonst bleibt für die Suche nichts. */
@media (max-width: 26rem) {
  .marke { font-size: 1.05rem; }
  .topbar { gap: .45rem; padding: 0 .6rem; }
}