/* Exposio. Aussehen wie die Entwürfe in entwurf/. Nichts Inline: Die Content-Security-Policy lässt nur diese Datei zu. */

:root {
  --gruen: #004f3c;
  --gruen-2: #005e4e;
  --salbei: #74a79e;
  --nebel: #dbe5e2;
  --hauch: #eef3f1;
  --papier: #f5f6f4;
  --weiss: #ffffff;
  --text: #1c2925;
  --leise: #5d6a65;
  --linie: #d5ddd9;
  --ansehen: #9a6200;
  --ansehen-flaeche: #fdf3dc;
  --fehlt: #a8321f;
  --fehlt-flaeche: #fbe9e5;
  --radius: 10px;
  --schrift: "Circe", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
  --weich: cubic-bezier(.2, .7, .2, 1);
  /* Für alles, was erscheint oder auf einen Klick antwortet: sofort los, weich auslaufen */
  --raus: cubic-bezier(.23, 1, .32, 1);
  /* Farben der Bürovorlage, in der Verwaltung einstellbar */
  --v-haupt: #004f3c;
  --v-linie: #74a79e;
  --v-flaeche: #dbe5e2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); color: var(--text); font-family: var(--schrift); font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h1 { font-size: 30px; letter-spacing: -.01em; }
h2 { font-size: 20px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--gruen); }
/* Ein Textfeld, dessen Inhalt wie bei einem Passwort verdeckt ist, ohne dass ein Passwort-Manager es dafür hält. */
input.verdeckt { -webkit-text-security: disc; text-security: disc; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; }
.kopf .logo { height: 26px; max-width: 220px; object-fit: contain; display: block; }
.produkt { font-weight: 700; color: var(--gruen); padding-left: 20px; border-left: 1px solid var(--linie); letter-spacing: .01em; }
.kopf .rechts { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: 14px; color: var(--leise); }
.gespeichert { opacity: 0; transition: opacity .4s; }
.gespeichert.an { opacity: 1; }
.reiter { display: flex; gap: 4px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.reiter a { padding: 10px 14px 12px; color: var(--leise); border-bottom: 2px solid transparent; font-size: 15px; text-decoration: none; transition: color .15s; }
.reiter a:hover { color: var(--text); }
.reiter a.an { color: var(--gruen); border-bottom-color: var(--gruen); font-weight: 600; }
.unterreiter { display: flex; gap: 6px; max-width: 1240px; width: 100%; margin: 20px auto 0; padding: 0 24px; }
.unterreiter button { border: 1px solid transparent; background: none; padding: 7px 14px; border-radius: 20px; cursor: pointer; color: var(--leise); font-size: 15px; transition: color .15s, border-color .15s, background-color .15s, transform .14s var(--raus); }
.unterreiter button:active { transform: scale(.97); }
.unterreiter button:hover { color: var(--text); border-color: var(--linie); }
.unterreiter button.an { background: var(--weiss); border-color: var(--linie); color: var(--gruen); font-weight: 600; }
button.link { border: 0; background: none; padding: 0; color: var(--gruen); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
button.link.klein { font-size: 13px; justify-self: start; }

/* Flächen */
main.inhalt { max-width: 1240px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; flex: 1; }
main.mitte { flex: 1; display: grid; place-items: center; padding: 32px 24px; }
main > section > h1, main.inhalt > h1 { margin-bottom: 6px; }
p.unter { color: var(--leise); margin-bottom: 22px; font-size: 17px; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; }
.karte + .karte { margin-top: 20px; }
.karte > h2 { margin-bottom: 4px; }
.karte > p.unter { font-size: 14px; margin-bottom: 18px; }
.karte.schmal { width: min(420px, 100%); display: grid; gap: 16px; }
.karte.schmal p.unter { margin: -8px 0 0; font-size: 15px; }
.karte.leer { display: grid; gap: 12px; justify-items: start; max-width: 720px; }
.karte.leer p { color: var(--leise); }
.marke-wort { font-weight: 700; color: var(--gruen); letter-spacing: .01em; }
/* Kleine Marke neben dem Namen, solange Exposio eine Beta ist */
.beta { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--salbei); border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; color: var(--gruen); vertical-align: 2px; }
.punkte { margin: 0; padding-left: 20px; color: var(--text); }
.punkte li { margin: 4px 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; }
.klein { font-size: 13px; color: var(--leise); }
.fuss { max-width: 1240px; width: 100%; margin: 0 auto; padding: 16px 24px 24px; font-size: 13px; color: var(--leise); }
body.allein .fuss { text-align: center; }
.fuss a { color: inherit; text-decoration: none; margin-left: 6px; transition: color .15s; }
.fuss a::before { content: "·"; margin-right: 6px; }
.fuss a:hover { color: var(--gruen); text-decoration: underline; text-underline-offset: 2px; }
/* Seiten, die die ganze Breite brauchen (Editor): Kopf und Fuß fluchten mit dem Inhalt. */
body.weit .kopf-innen, body.weit .reiter, body.weit .fuss { max-width: 1480px; }

/* Knöpfe und Felder */
.knopf { display: inline-block; border: 1px solid var(--linie); background: var(--weiss); border-radius: 8px; padding: 9px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .14s var(--raus); white-space: nowrap; text-decoration: none; color: var(--text); }
.knopf:active { transform: scale(.97); }
.knopf:hover { border-color: var(--gruen); }
.knopf.haupt { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 600; }
.knopf.haupt:hover { box-shadow: 0 4px 14px rgba(0, 79, 60, .25); }
.knopf.klein { padding: 6px 12px; font-size: 14px; }
.knopf.breit { width: 100%; padding: 12px 16px; }
.knopf.gefahr { background: var(--fehlt); border-color: var(--fehlt); color: #fff; font-weight: 600; }
.knopf.gefahr:hover { border-color: var(--fehlt); box-shadow: 0 4px 14px rgba(168, 50, 31, .28); }
/* Knopf, der nur ein Zeichen trägt (drei Punkte): so hoch wie ein kleiner Knopf, quadratisch */
.knopf.nur-zeichen { width: 35px; height: 35px; padding: 0; display: inline-grid; place-items: center; }
.knopf.nur-zeichen svg { display: block; fill: var(--leise); transition: fill .15s; }
.knopf.nur-zeichen:hover svg, .knopf.nur-zeichen[aria-expanded="true"] svg { fill: var(--gruen); }
.knopf.nur-zeichen[aria-expanded="true"] { border-color: var(--gruen); }
/* Solange ein Knopf arbeitet: Die Schrift weicht einem Kreisel, der Knopf behält seine Größe. */
.knopf.laedt { pointer-events: none; position: relative; color: transparent; }
.knopf.laedt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -9px 0 0 -9px; border: 2px solid var(--gruen); border-top-color: transparent; border-radius: 50%; animation: dreh .6s linear infinite; }
.knopf.haupt.laedt::after, .knopf.gefahr.laedt::after { border-color: #fff; border-top-color: transparent; }
.knopf.nur-zeichen.laedt svg { visibility: hidden; }
@keyframes dreh { to { transform: rotate(360deg); } }
.knopf:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--salbei); outline-offset: 2px; }
.feld { display: grid; gap: 6px; align-content: start; }
.feld label { font-size: 14px; font-weight: 600; }
.feld small { color: var(--leise); font-size: 13px; }
.feld.abstand { margin-bottom: 18px; }
.feld.abstand-oben { margin-top: 18px; }
input[type=text], input[type=email], input[type=password], textarea, select { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; background: var(--weiss); width: 100%; transition: border-color .15s; }
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover, select:hover { border-color: var(--salbei); }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235d6a65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px no-repeat; }
input.falsch { border-color: var(--fehlt); }
textarea { min-height: 140px; resize: vertical; font-size: 14px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.drei { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; padding: 12px 0 4px; }
.marke { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; background: var(--hauch); color: var(--gruen); }
.marke.gelb { background: var(--ansehen-flaeche); color: var(--ansehen); }

/* Meldungen als Streifen. Sie schweben über der Seite und schieben nichts. */
.streifen-platz { position: fixed; left: 0; right: 0; top: 104px; z-index: 30; display: grid; justify-items: center; pointer-events: none; }
body.allein .streifen-platz { top: 20px; }
.streifen { pointer-events: auto; max-width: min(720px, calc(100vw - 48px)); padding: 10px 16px; border-radius: 8px; font-size: 15px; background: var(--hauch); color: var(--gruen); border: 1px solid var(--nebel); box-shadow: 0 6px 24px rgba(0, 40, 30, .10); animation: streifen .35s var(--weich); }
.streifen.warnung { background: var(--fehlt-flaeche); color: var(--fehlt); border-color: #f1cfc8; }
.streifen.geht { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease-out, transform .2s ease-out; }
.karte .streifen { max-width: none; box-shadow: none; animation: none; }
@keyframes streifen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Zugänge */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th { text-align: left; font-size: 13px; font-weight: 600; color: var(--leise); padding: 0 12px 8px 0; }
table.liste td { padding: 10px 12px 10px 0; border-top: 1px solid var(--linie); vertical-align: middle; }
table.liste td.taten { text-align: right; padding-right: 0; white-space: nowrap; }
table.liste select { width: auto; padding: 6px 32px 6px 10px; }
table.liste tr.gesperrt td:not(.taten) { opacity: .45; }
table.liste tr { transition: opacity .18s ease-out; }
table.liste tr.geht { opacity: 0; }
.neu { display: grid; grid-template-columns: 1fr 1fr 180px auto; gap: 12px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linie); }
/* Der Knopf neben den Feldern ist so hoch wie sie. */
.neu .knopf { padding-top: 10px; padding-bottom: 10px; }
.linkfeld { margin-top: 16px; padding: 14px 16px; background: var(--hauch); border-radius: 8px; display: grid; gap: 8px; }
.linkzeile { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.linkzeile input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.rollen div { background: var(--hauch); border-radius: 8px; padding: 14px; font-size: 14px; color: var(--leise); }
.rollen b { display: block; color: var(--text); margin-bottom: 4px; }

/* Büro und Vorlage */
.vorlage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.farben { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.farbe { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.farbe input[type=color] { width: 36px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; }
.farbe span { font-size: 14px; }
.farbe small { display: block; color: var(--leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.logo-feld { display: flex; align-items: center; gap: 16px; border: 1px dashed var(--salbei); border-radius: 8px; padding: 14px; background: var(--hauch); }
.logo-feld img { height: 34px; max-width: 240px; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: 6px; box-sizing: content-box; }
.logo-feld small { color: var(--leise); }
.baustein { border-top: 1px solid var(--linie); }
.baustein > button { width: 100%; text-align: left; border: 0; background: none; padding: 12px 0; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.baustein > button span { flex: 1; font-weight: 600; }
.baustein > button small { color: var(--leise); }
.klapp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--weich); }
.klapp.auf { grid-template-rows: 1fr; }
.klapp > div { overflow: hidden; }
.klapp textarea { margin: 2px 0 14px; }
.vorschau-blatt { position: sticky; top: 124px; }
.vorschau-blatt h3 { margin-bottom: 10px; }
.blatt { container-type: inline-size; position: relative; aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 1px 2px rgba(0, 40, 30, .08), 0 14px 40px rgba(0, 40, 30, .10); overflow: hidden; color: var(--v-haupt); }
.blatt * { margin: 0; }
.blatt .flaeche { position: absolute; inset: 0 0 auto 0; height: 44cqw; background: var(--v-haupt); }
.blatt .ueber { position: absolute; left: 11.8cqw; right: 12cqw; top: 30.2cqw; color: #fff; font-size: 1.7cqw; line-height: 1.75; }
.blatt .ueber b { display: block; font-size: 2.5cqw; margin-bottom: 2.6cqw; }
.blatt .strich { position: absolute; left: 10.3cqw; top: 30cqw; width: .2cqw; height: 69.5cqw; background: var(--v-linie); }
.blatt .bild { position: absolute; left: 11.8cqw; top: 50.3cqw; width: 73.7cqw; }
.blatt .tab { position: absolute; left: 11.8cqw; top: 104cqw; font-size: 1.5cqw; border-collapse: collapse; width: 82.2cqw; }
.blatt .tab th { width: 26%; background: var(--v-flaeche); font-weight: 400; text-align: left; padding: .8cqw 1cqw; border-bottom: .3cqw solid #fff; color: #1c2925; }
.blatt .tab td { padding: .8cqw 1cqw; border-bottom: .14cqw solid var(--v-flaeche); }
.blatt .blattfuss { position: absolute; left: 11.8cqw; right: 6cqw; bottom: 5.4cqw; border-top: .2cqw solid var(--v-linie); padding-top: 2.4cqw; font-size: 1.2cqw; font-weight: 700; white-space: nowrap; overflow: hidden; }

/* KI-Anbindung, Karten */
.zeile { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linie); }
.karte > p.unter + .zeile { border-top: 0; }
.zeile b { display: block; }
.zeile small { color: var(--leise); font-size: 13px; }
.zeile .still { color: var(--leise); font-size: 14px; }
.ergebnis { font-size: 13px; color: var(--leise); }
.zeile .ergebnis { grid-column: 2 / -1; }
.ergebnis.gut { color: var(--gruen); }
.ergebnis.schlecht { color: var(--fehlt); }
.erweitert { margin: -4px 0 6px 246px; font-size: 14px; }
.erweitert summary { cursor: pointer; color: var(--leise); width: max-content; }
.erweitert summary:hover { color: var(--gruen); }

/* Vorschau im Rahmen */
body.rahmen { height: 100vh; overflow: hidden; }
.vorschau-streifen { display: flex; align-items: center; gap: 16px; padding: 8px 20px; background: var(--gruen); color: #fff; font-size: 14px; }
.vorschau-streifen .rechts { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.vorschau-streifen a, .vorschau-streifen button.link { color: #fff; }
.vorschau-fenster { flex: 1; width: 100%; border: 0; background: var(--papier); }

@media (max-width: 1000px) {
  .vorlage, .zwei, .drei, .rollen, .farben, .neu, .zeile { grid-template-columns: 1fr; }
  .vorschau-blatt { position: static; }
  .zeile .ergebnis { grid-column: 1; }
  .erweitert { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .knopf.laedt::after { animation: none; opacity: .7; }
}

/* Übersicht der Exposés */
.oben { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.oben .knopf { margin-left: auto; }
.werkzeug { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.umschalter { display: inline-flex; background: var(--nebel); border-radius: 9px; padding: 3px; }
.umschalter button { border: 0; background: none; padding: 7px 16px; border-radius: 7px; cursor: pointer; color: var(--leise); transition: background-color .18s, color .18s, box-shadow .18s; }
.umschalter button:hover { color: var(--text); }
.umschalter button.an, .umschalter button.an:hover { background: var(--weiss); color: var(--gruen); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 40, 30, .12); }
.suche { margin-left: auto; display: grid; gap: 4px; width: 320px; }
.suche label { font-size: 13px; font-weight: 600; }
.suche input { padding: 9px 12px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.objekt { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); display: grid; grid-template-rows: auto 1fr auto; transition: border-color .15s, box-shadow .2s, opacity .18s ease-out, transform .18s ease-out; animation: karte-rein .32s var(--raus) backwards; }
.objekt:nth-child(2) { animation-delay: 40ms; } .objekt:nth-child(3) { animation-delay: 80ms; } .objekt:nth-child(4) { animation-delay: 120ms; }
.objekt:nth-child(5) { animation-delay: 160ms; } .objekt:nth-child(n+6) { animation-delay: 200ms; }
@keyframes karte-rein { from { opacity: 0; transform: translateY(8px); } }
/* Eine Karte, die ins Archiv geht, zurückkommt oder gelöscht wird, tritt kurz zurück, bevor sie verschwindet. */
.objekt.geht { opacity: 0; transform: scale(.98); pointer-events: none; }
.objekt:hover { border-color: var(--salbei); box-shadow: 0 8px 28px rgba(0, 40, 30, .08); }
.objekt .bild { display: block; aspect-ratio: 16 / 9; background: var(--nebel); position: relative; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.objekt .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--raus); }
@media (hover: hover) and (pointer: fine) { .objekt:hover .bild img { transform: scale(1.03); } }
.objekt .ohne-bild { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--leise); font-size: 13px; }
.objekt .ohne-bild::before { content: ""; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374a79e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat; }
.objekt .stand { position: absolute; z-index: 1; left: 12px; top: 12px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: rgba(255, 255, 255, .94); color: var(--gruen); }
.objekt .stand.offen { color: var(--ansehen); }
.objekt .stand.fehlt { color: var(--fehlt); }
.objekt .mitte { padding: 16px 18px 6px; }
.objekt h2 { font-size: 18px; }
.objekt .nr { color: var(--leise); font-size: 14px; margin-top: 2px; }
.objekt .zuletzt { color: var(--leise); font-size: 13px; margin-top: 10px; }
.objekt .fassungen { font-size: 13px; color: var(--leise); margin-top: 2px; }
.objekt .unten { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; }
.mehr { position: relative; display: inline-block; vertical-align: middle; }
.objekt .mehr { margin-left: auto; }
/* Das Menü wächst aus dem Knopf, der es öffnet: unten rechts. */
.menue { position: absolute; right: 0; bottom: calc(100% + 6px); background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 40, 30, .14); padding: 6px; display: grid; min-width: 200px; z-index: 5; transform-origin: bottom right; transition: opacity .16s var(--raus), transform .16s var(--raus); }
/* In Listen klappt es nach unten auf. */
.menue.runter { bottom: auto; top: calc(100% + 6px); transform-origin: top right; }
@starting-style { .menue { opacity: 0; transform: scale(.96) translateY(4px); } .menue.runter { transform: scale(.96) translateY(-4px); } }
.menue button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color .12s; }
.menue button:hover, .menue button:focus-visible { background: var(--hauch); }
.menue button.gefahr { color: var(--fehlt); margin-top: 9px; position: relative; }
.menue button.gefahr::before { content: ""; position: absolute; left: 4px; right: 4px; top: -5px; border-top: 1px solid var(--linie); }
.menue button.gefahr:hover, .menue button.gefahr:focus-visible { background: var(--fehlt-flaeche); }

/* Bogen: Rückfrage oder Ablauf über der Seite. Der Grund blendet ein, die Karte kommt aus der Mitte. */
.bogen { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(238, 243, 241, .86); backdrop-filter: blur(3px); animation: bogen-auf .2s ease-out; }
.bogen .karte { width: min(540px, calc(100vw - 48px)); box-shadow: 0 20px 60px rgba(0, 40, 30, .18); display: grid; gap: 12px; animation: bogen-karte .24s var(--raus); }
.bogen h2 { font-size: 22px; }
.bogen p { color: var(--leise); }
.bogen p b { color: var(--text); font-weight: 600; }
.bogen .reihe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.bogen.frage .karte { width: min(480px, calc(100vw - 48px)); }
@keyframes bogen-auf { from { opacity: 0; } }
@keyframes bogen-karte { from { opacity: 0; transform: scale(.96); } }
.keine-treffer { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--leise); border: 1px dashed var(--salbei); border-radius: var(--radius); }