/* FEED-AI — Stile für js/ki-abzeichen.js (17.09.2026, SPEC v2.1: 10.2, 10.5, 12.5, 9.12; Dashboard nach Auftrag Dashboard v2). Nur Themen-Variablen.
   Metall-Tokens (--metal-*) in css/themes.css. Steht hinter css/buttons.css. Schrift-Stapel als Variablen (--abz-fi, --abz-fj). */
:root { --abz-fi: 'Inter', system-ui, sans-serif; --abz-fj: 'Plus Jakarta Sans', system-ui, sans-serif; }
/* ═══ 10.2 Urkunde ═══ */
.abz-urkunde {position:relative;background:var(--card);border:1px solid color-mix(in srgb,var(--border) 90%,var(--text));border-radius:4px;padding:22px 16px 26px;margin:0 0 18px}
.abz-urkunde::after {content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--border) 45%,transparent);border-radius:2px;pointer-events:none}
.abz-ecke {position:absolute;width:14px;height:14px;pointer-events:none;--abz-el:1px solid color-mix(in srgb,var(--accent) 65%,transparent)}
.abz-e1 {top:14px;left:14px;border-top:var(--abz-el);border-left:var(--abz-el)}
.abz-e2 {top:14px;right:14px;border-top:var(--abz-el);border-right:var(--abz-el)}
.abz-e3 {bottom:14px;left:14px;border-bottom:var(--abz-el);border-left:var(--abz-el)}
.abz-e4 {bottom:14px;right:14px;border-bottom:var(--abz-el);border-right:var(--abz-el)}
.abz-kopf {text-align:center}
.abz-oben {font:700 10px/1.6 var(--abz-fi);letter-spacing:.34em;text-transform:uppercase;color:var(--muted);text-align:center}
.abz-titel {font:800 20px/1.25 var(--abz-fj);color:var(--text);text-align:center;margin:8px 0 6px}
.abz-sub {font-size:13px;line-height:1.55;color:var(--muted);max-width:56ch;margin:0 auto}
.abz-linie {width:74px;height:1px;margin:16px auto;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 80%,transparent),transparent)}
.abz-stand {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.abz-zaehler {width:132px;height:132px;flex:none}
.abz-zaehler svg {width:100%;height:100%;display:block}
.abz-stufen {list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left}
.abz-stufe {display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--abz-fi);color:var(--text)}
.abz-stufe.is-null {opacity:.55}
/* Gefüllt heißt erreicht (Wunsch Markus 17.09.2026): dünne Ringe waren kaum zu sehen. */
.abz-plakette {width:16px;height:16px;border-radius:50%;flex:none;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--abz-m,var(--accent)) 70%,var(--text));background:linear-gradient(145deg,var(--abz-m-hi,var(--abz-m,var(--accent))),var(--abz-m,var(--accent)) 55%,var(--abz-m-lo,var(--abz-m,var(--accent))))}
/* Zweiter Befund Markus 17.09.2026: Ein leerer Ring sagt nicht, welches Metall die Stufe hat.
   Eine noch offene Stufe behaelt deshalb ihre Metallfuellung, der gestrichelte Rand in derselben
   Farbe sagt "noch nicht erreicht". Nur die Legendenzeile "x noch offen" zaehlt Auszeichnungen
   ohne Metall und bleibt ein neutraler, leerer Ring. */
.abz-plakette--offen {border:2px dashed color-mix(in srgb,var(--abz-m,var(--border)) 60%,var(--text))}
.abz-plakette--neutral {border:2px dashed var(--border);background:var(--card)}
.abz-notiz {font-size:12px;line-height:1.55;color:var(--muted);max-width:60ch;margin:14px auto 0}
.abz-klein {font:800 11px/1.4 var(--abz-fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 12px}
p.abz-klein {font:400 12px/1.55 var(--abz-fi);letter-spacing:0;text-transform:none}
.abz-ehren {border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);margin-top:22px;padding-top:22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.abz-ehren .abz-halter {width:160px;max-width:160px;margin:0;flex:none}
.abz-ehren-marke {font:700 10px/1.4 var(--abz-fi);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.abz-ehren-titel {font:800 18px/1.3 var(--abz-fj);color:var(--text);margin:4px 0}
.abz-ehren-text {font-size:13px;line-height:1.55;color:var(--muted);max-width:52ch}
.abz-gitter {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px;list-style:none;padding:0;margin:0}
.abz-stueck {text-align:center}
.abz-stueck.is-widerrufen {opacity:.6}
.abz-knopf {all:unset;box-sizing:border-box;display:block;width:100%;min-height:44px;cursor:pointer;border-radius:8px;padding:4px}
.abz-knopf:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-halter {position:relative;display:block;width:100%;max-width:150px;aspect-ratio:1 / 1;margin:0 auto 10px}
.abz-halter--gross {width:150px;max-width:150px}
.abz-halter--mini {width:28px;height:28px;margin:0;flex:none}
.abz-halter--treue {width:120px;max-width:120px;margin:0}
.abz-halter svg {position:relative;width:100%;height:100%;display:block}
.abz-halter.is-erreicht.abz-schein::before {content:'';position:absolute;inset:-8%;border-radius:50%;filter:blur(9px);background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--abz-m,var(--accent)) 18%,transparent) 0%,color-mix(in srgb,var(--abz-m,var(--accent)) 6%,transparent) 44%,transparent 70%)}
.abz-halter.abz-m-akzent.is-erreicht.abz-schein::before {background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--accent) 30%,transparent) 0%,color-mix(in srgb,var(--accent) 9%,transparent) 44%,transparent 70%)}
.abz-halter--mini::before {display:none}
.is-offen .abz-siegel {opacity:.5}
.abz-knopf:hover .is-offen .abz-siegel,.abz-knopf:focus-visible .is-offen .abz-siegel {opacity:.74}
.abz-s-titel {display:block;font:800 13px/1.35 var(--abz-fj);color:var(--text)}
.abz-s-zeile {display:block;font:600 11px/1.4 var(--abz-fi);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:4px}
.abz-s-neu {display:inline-block;margin-top:6px;padding:2px 6px;font:700 10px/1.4 var(--abz-fi);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--accent);color:var(--text);border-radius:2px}
.abz-s-offen {display:inline-block;margin-top:6px;padding:2px 6px;font:700 10px/1.4 var(--abz-fi);letter-spacing:.14em;text-transform:uppercase;border:1px dashed var(--border);color:var(--muted);border-radius:2px}
.abz-alle {margin-top:22px}
.abz-gruppe {margin-top:26px}
.abz-gkopf {display:flex;align-items:center;gap:10px;margin-bottom:6px}
.abz-gkopf h4 {font:800 12px/1.3 var(--abz-fi);letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin:0}
.abz-gkopf span {font-size:12px;color:var(--muted)}
.abz-fuell {flex:1;height:1px;background:color-mix(in srgb,var(--border) 60%,transparent)}
.abz-gsub {font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:64ch}
.abz-filter {display:flex;flex-wrap:wrap;gap:8px}
/* Berührungsfläche: .btn ergibt rund 39 px, .btn-sm rund 26 px. Alles andere kommt aus css/buttons.css. */
.abz-filter button,.abz-mehr,.abz-d-zu,.abz-erneut {min-height:44px}
/* Gedrückter Filter: der zweite Selektor ist gleich spezifisch wie .btn-secondary:hover, steht aber später im Stapel. Sonst verlöre der gedrückte Filter beim Zeigen seine Tönung. */
.abz-filter button[aria-pressed="true"],.abz-filter .btn[aria-pressed="true"]:hover {border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
/* .btn bringt keinen Fokusrahmen mit, deshalb bleibt er hier. */
.abz-filter button:focus-visible,.abz-mehr:focus-visible,.abz-d-zu:focus-visible,.abz-erneut:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
/* Mittig unter der Urkunde: .btn ist inline-flex, margin:auto zentriert erst als Block mit fit-content. Umbruch erlaubt (.btn setzt nowrap),
   damit lange Fassungen bei 320 px nicht überlaufen (dort bleiben 212 px, der Text braucht 271 px). */
.abz-mehr {display:flex;width:fit-content;max-width:100%;margin:22px auto 0;white-space:normal}
.abz-gesperrt {border:1px dashed var(--border);border-radius:6px;padding:14px;font-size:13px;line-height:1.55;color:var(--muted)}
.abz-link {color:var(--accent);min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.abz-leer {font-size:13px;color:var(--muted);text-align:center;margin:12px 0}
.abz-leer--filter {margin-top:16px}
.abz-versteckt,.abz-gefragt {margin:14px 0 0}
.abz-rechtlich {font-size:12px;line-height:1.7;color:var(--muted);background:var(--card2);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:4px;padding:14px 16px;margin:26px 0 0}
.abz-rechtlich b {color:var(--text)}
.abz-laedt {min-height:180px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.abz-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:561px) {
  .abz-stand {flex-direction:row;gap:28px}
  .abz-zaehler {width:176px;height:176px}
  .abz-gitter {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 14px}
}
/* responsive.css gibt bis 900px jedem section ein Padding mit !important */
section.abz-gruppe {padding:0!important}
section.abz-urkunde {padding:22px 16px 26px!important}
@media (min-width:720px) {
  section.abz-urkunde {padding:34px 36px 38px!important}
  .abz-titel {font-size:24px}
  .abz-gitter--neueste {grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:840px) {
  .abz-ehren {flex-direction:row;text-align:left;gap:34px;justify-content:center}
}

/* ═══ 10.2 Dialog ═══ */
/* margin:auto ausdrücklich: Die Seiten setzen *{margin:0}, ohne die Angabe klebt der Dialog oben links statt mittig zu stehen. */
.abz-dialog {margin:auto;width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:22px}
.abz-dialog #abz-d-titel:focus {outline:none}
.abz-dialog::backdrop {background:color-mix(in srgb,var(--bg) 72%,transparent)}
.abz-d-kopf {display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:12px}
.abz-d-kopf h3 {font:800 18px/1.3 var(--abz-fj);margin:0}
.abz-dialog h4 {font:800 11px/1.4 var(--abz-fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.abz-dialog p {font-size:14px;line-height:1.6;margin:0}
.abz-d-stufen {list-style:none;padding:0;margin:0;display:grid;gap:8px}
.abz-d-stufe {display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;padding:2px 0}
.abz-d-stufe.is-offen {color:var(--muted)}
.abz-d-st-label {min-width:0;overflow-wrap:anywhere}
.abz-d-st-datum {color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.abz-d-fortschritt {font-size:13px;color:var(--muted);margin-top:8px}
/* Schließen steht rechts: als Block füllte der Knopf die ganze Breite und margin-left:auto bliebe wirkungslos, deshalb fit-content. */
.abz-d-zu {display:flex;width:fit-content;margin:20px 0 0 auto}
.abz-d-fuss {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:20px}
.abz-d-fuss .abz-d-zu {margin:0}
/* Hauptaktion des Dialogs: .btn .btn-primary, hier nur die Berührungsfläche. */
.abz-d-alle {min-height:44px}
.abz-d-alle:focus-visible {outline:2px solid var(--accent);outline-offset:3px}

/* ═══ 10.2 Dashboard ═══ */
/* Kapsel "Letzte Auszeichnung" (D2): Knopf mit Mini-Siegel, kleiner Überschrift und Titel. "Online seit" steht in der Meta-Zeile des Eintrags (D1). */
.abz-dash-knopf {all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;margin-top:6px;padding:5px 14px 5px 6px;border:1px solid var(--border);border-radius:999px;background:var(--card);cursor:pointer;vertical-align:top}
.abz-dash-knopf:hover {border-color:var(--accent)}
.abz-dash-knopf:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-dash-knopf.is-laedt {opacity:.6;cursor:progress}
.abz-dash-siegel {position:relative;flex:none;display:block;border-radius:50%}
.abz-dash-siegel,.abz-dash-siegel .abz-halter--mini {width:32px;height:32px}
.abz-dash-text {display:flex;flex-direction:column;gap:2px;min-width:0}
.abz-dash-lab {font:600 10px/1.3 var(--abz-fi);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow-wrap:break-word}
/* Höchstens zwei Zeilen, dann Auslassung. Umbruchfähig, damit der Titel nur mit einem Wort zur Mindestbreite der Tabelle zählt (nowrap zählte mit voller Länge und schob schon bei 1280 px Symbole ins Überlaufmenü). */
.abz-dash-titel {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font:600 12px/1.35 var(--abz-fi);color:var(--text)}
/* Die Marke sitzt auf der oberen Kante der Kapsel: Sie fällt auf und kostet keine Breite (bei 1280 px bliebe sonst kein Platz für den Titel). */
.abz-dash-neu {position:absolute;top:-9px;right:12px;padding:4px 7px;border-radius:999px;background:var(--accent);color:var(--btn-text);font:700 10px/1 var(--abz-fi);letter-spacing:.1em;text-transform:uppercase}
.abz-dash-hinweis {display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:8px 0}

/* ═══ 10.2 Animation ═══ */
@keyframes abzSetzen {from {transform:scale(.94);opacity:0} to {transform:scale(1);opacity:1} }
.abz-setzt {animation:abzSetzen 420ms cubic-bezier(.34,1.4,.64,1) both}
@media (prefers-reduced-motion:reduce) {
  .abz-urkunde *,.abz-dash-knopf,.abz-dash-knopf *,.abz-treue-chip,.abz-treue-chip *,.abz-treue-karte * {animation:none !important;transition:none !important}
}
[data-theme="hc"] .abz-z-glanz,[data-theme="hc"] .abz-halter::before {display:none}

/* ═══ 10.2 Metall- und Siegelklassen (SVG):kein var() und kein color-mix() in Attributen,nur hier ═══ */
/* .abz-m-<key> und .abz-z--<key> setzen nur Variablen. Unbekannte Klasse:Rückfall var(--abz-m,var(--accent)). */
.abz-m-bronze,.abz-z--bronze {--abz-m:var(--metal-bronze);--abz-m-hi:var(--metal-bronze-hi);--abz-m-lo:var(--metal-bronze-lo);--abz-glanz:var(--metal-bronze-hi)}
.abz-m-silber,.abz-z--silber {--abz-m:var(--metal-silber);--abz-m-hi:var(--metal-silber-hi);--abz-m-lo:var(--metal-silber-lo);--abz-glanz:var(--metal-silber-hi)}
.abz-m-gold,.abz-z--gold {--abz-m:var(--metal-gold);--abz-m-hi:var(--metal-gold-hi);--abz-m-lo:var(--metal-gold-lo);--abz-glanz:var(--metal-gold-hi)}
.abz-m-platin,.abz-z--platin {--abz-m:var(--metal-platin);--abz-m-hi:var(--metal-platin-hi);--abz-m-lo:var(--metal-platin-lo);--abz-glanz:var(--metal-platin-hi)}
.abz-m-akzent,.abz-z--akzent {--abz-m:var(--accent);--abz-m-hi:var(--accent);--abz-m-lo:var(--accent);--abz-glanz:var(--accent)}
.abz-stop-lo {stop-color:var(--abz-m-lo,var(--accent))}
.abz-stop-hi {stop-color:var(--abz-m-hi,var(--accent))}
.abz-stop-basis {stop-color:var(--abz-m,var(--accent))}
.abz-s-grund {fill:var(--card2);stroke-width:1}
.abz-m-akzent .abz-s-grund,.abz-m-akzent .abz-s-ring2,.abz-m-akzent .abz-s-ring3,.abz-m-akzent .abz-s-innen {stroke:color-mix(in srgb,var(--accent) 60%,var(--border))}
.abz-z--offen {--abz-m:color-mix(in srgb,var(--muted) 35%,transparent)}
.abz-s-ring3 {fill:none;stroke:var(--abz-m,var(--accent))}
.abz-s-licht {fill:none;stroke:color-mix(in srgb,var(--text) 16%,transparent)}
.abz-s-schatten {fill:none;stroke:color-mix(in srgb,var(--bg) 60%,transparent)}
.abz-s-oben {fill:var(--text);font:700 9.4px var(--abz-fi);letter-spacing:1.9px}
.abz-s-unten {fill:var(--muted);font:600 8.6px var(--abz-fi);letter-spacing:1.5px}
.abz-s-trenner,.abz-s-symbol {stroke:var(--abz-m,var(--accent))}
.abz-s-trenner {fill:var(--abz-m,var(--accent))}
.abz-s-teilung {stroke:color-mix(in srgb,var(--abz-m,var(--accent)) 55%,transparent)}
.abz-s-innen {fill:var(--card);stroke:color-mix(in srgb,var(--abz-m,var(--accent)) 60%,var(--border))}
.abz-s-fein {fill:none;stroke:color-mix(in srgb,var(--border) 40%,transparent)}
.abz-s-innenring {fill:none;stroke:var(--abz-m,var(--accent))}
.is-offen .abz-s-oben,.is-offen .abz-s-unten {fill:var(--muted)}
.is-offen .abz-s-symbol,.is-offen .abz-s-trenner {stroke:var(--muted)}
.is-offen .abz-s-trenner {fill:var(--muted)}
.is-offen .abz-s-grund,.is-offen .abz-s-ring2,.is-offen .abz-s-ring3,.is-offen .abz-s-innen,.is-offen .abz-s-innenring {stroke:color-mix(in srgb,var(--border) 85%,transparent)}
.is-offen .abz-s-teilung {stroke:color-mix(in srgb,var(--muted) 45%,transparent)}
.abz-z-grund {fill:var(--card2);stroke:color-mix(in srgb,var(--border) 70%,transparent)}
.abz-z-fein {fill:none;stroke:color-mix(in srgb,var(--border) 50%,transparent)}
.abz-z-innen {fill:var(--card)}
.abz-z-oben,.abz-z-von {fill:var(--muted)}
.abz-z-oben {font:700 8.6px var(--abz-fi);letter-spacing:2.2px}
.abz-z-unten {fill:var(--muted);font:600 8.2px var(--abz-fi);letter-spacing:1.6px}
.abz-z-zahl {fill:var(--text);font:800 40px var(--abz-fj);font-variant-numeric:tabular-nums}
.abz-z-von {font:700 9px var(--abz-fi);letter-spacing:1.8px}
.abz-z-glanz {fill:none;stroke:var(--abz-glanz,var(--accent));opacity:0}
.abz-z-bogen {fill:none;stroke-width:5;stroke-linecap:butt;stroke:var(--abz-m,var(--accent))}

/* ═══ 10.5 Treue-Chip und Treue-Karte ═══ */
.abz-treue-chip {display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border:1px solid color-mix(in srgb,var(--abz-m,var(--accent)) 45%,var(--border));border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;font:600 12px/1.2 var(--abz-fi);max-width:100%;min-width:0}
.abz-treue-chip:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-treue-chip:hover {border-color:var(--abz-m,var(--accent))}
.abz-treue-chip-text {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.abz-treue-zeile .abz-treue-dank {font-size:12px;color:var(--muted)}
.abz-treue-karte {display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin:14px 0}
.abz-treue-text {min-width:0}
.abz-treue-seit {font:800 16px/1.3 var(--abz-fj);color:var(--text);margin:0 0 4px}
.abz-treue-stufe {font-size:13px;line-height:1.55;color:var(--muted);margin:0}
.abz-treue-stufe b {color:var(--text)}
.abz-treue-karte .abz-treue-dank {font-size:13px;line-height:1.55;color:var(--text);margin:6px 0 0}
.abz-treue-stufen {list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.abz-treue-plakette {display:grid;grid-template-columns:14px auto minmax(0,1fr);grid-template-areas:'p m d' 'p l d';column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:8px;background:var(--card2);min-height:44px;box-sizing:border-box;min-width:0}
.abz-treue-plakette .abz-plakette {grid-area:p}
.abz-treue-metall {grid-area:m;font:700 13px/1.3 var(--abz-fi);color:var(--text)}
.abz-treue-label {grid-area:l;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.abz-treue-datum {grid-area:d;justify-self:end;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.abz-treue-plakette.is-offen {border-style:dashed;opacity:.8}
.abz-treue-hinweis {font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 0}
.abz-treue-fehler {font-size:13px;line-height:1.55;color:var(--text);margin:8px 0}
@media (max-width:480px) {
  .abz-treue-zeile .abz-treue-dank {flex-basis:100%}
}
@media (min-width:640px) {
  .abz-treue-karte {display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;text-align:left;gap:20px}
  .abz-treue-stufen {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══ 12.5 Dashboard: Slot, Ladebalken, Stempel mit Wellen, Pokal, Blatt (Auftrag Dashboard v2; die Zeilen-Hervorhebung entfällt) ═══ */
.abz-dash-slot {min-width:0;max-width:100%}
.abz-dash-laedt {display:block;width:120px;max-width:100%;height:10px;margin-top:8px;border-radius:4px;background:var(--card2)}
/* D3, nur bei neu: Das Siegel schlägt einmal ein (is-spielt setzt das Modul bei 50 % Sichtbarkeit), der Text gleitet nach, die Marke ploppt.
   Danach laufen zwei Wellenringe, bis die Auszeichnung gesehen ist. Die Wellen ragen über die Kapsel, nie über die Tabelle (Transform, kein Layout). */
.abz-dash-knopf.is-neu {margin-top:12px;padding-top:12px;border-color:var(--accent)}
.abz-dash-knopf.is-neu .abz-dash-lab {color:var(--accent)}
.abz-dash-knopf.is-neu .abz-dash-siegel::before,.abz-dash-knopf.is-neu .abz-dash-siegel::after {content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none;animation:abzWelle 2.4s ease-out .8s infinite}
.abz-dash-knopf.is-neu .abz-dash-siegel::after {animation-delay:1.6s}
.abz-dash-knopf.is-spielt .abz-halter--mini {animation:abzStempel .75s cubic-bezier(.2,1.5,.4,1) both}
.abz-dash-knopf.is-spielt .abz-dash-text {animation:abzRein .5s .4s both}
.abz-dash-knopf.is-spielt .abz-dash-neu {animation:abzPlopp .45s .85s both}
/* Vor dem Einschlag (is-wartet setzt das Modul, solange die Kapsel noch nicht zu 50 % im Bild war) bleiben Siegel, Text und Marke verborgen,
   sonst stünde die fertige Kapsel kurz da und ihr Inhalt verschwände wieder. Ohne Skript oder ohne Beobachter gibt es is-wartet nie. */
@media (prefers-reduced-motion:no-preference) {
  .abz-dash-knopf.is-neu.is-wartet:not(.is-spielt) .abz-halter--mini,.abz-dash-knopf.is-neu.is-wartet:not(.is-spielt) .abz-dash-text,.abz-dash-knopf.is-neu.is-wartet:not(.is-spielt) .abz-dash-neu {opacity:0}
}
@keyframes abzStempel {0% {transform:scale(2.6) rotate(-20deg);opacity:0} 55% {transform:scale(.9) rotate(4deg);opacity:1} 100% {transform:scale(1) rotate(0)} }
@keyframes abzWelle {0% {transform:scale(1);opacity:.6} 100% {transform:scale(2.4);opacity:0} }
@keyframes abzRein {from {opacity:0;transform:translateX(-8px)} to {opacity:1;transform:none} }
@keyframes abzPlopp {0% {transform:scale(0)} 70% {transform:scale(1.25)} 100% {transform:scale(1)} }
@media (prefers-reduced-motion:reduce) {
  .abz-dash-knopf.is-neu .abz-dash-siegel::before,.abz-dash-knopf.is-neu .abz-dash-siegel::after {display:none;animation:none !important}
  .abz-dash-knopf.is-neu {border:2px solid var(--accent)}
}
/* D5: Pokal in der Aktionsspalte. Ring = Anteil erreichter Auszeichnungen (--abz-p in Prozent), daneben die Zahl. Sichtbar 30 px hoch wie die
   übrigen Symbole, die Berührungsfläche reicht über ::after auf 44 px (inset zählt ab der Innenkante: 8 px minus 1 px Rand = je 7 px).
   Die Regel .iact steht in dashboard.html und käme sonst später, deshalb die doppelte Klasse. */
.iact.abz-pokal {position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:30px;padding:0;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));font:700 11px/1 var(--abz-fi)}
.iact.abz-pokal.is-gezaehlt {padding:0 8px 0 2px}
.iact.abz-pokal::after {content:'';position:absolute;inset:-8px -1px}
.iact.abz-pokal:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-pokal-ring {position:relative;flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--abz-p,0)*3.6deg),var(--border) 0)}
.abz-pokal-ring::before {content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--card)}
.iact.abz-pokal .abz-pokal-ring svg,.abz-kopf-pokal .abz-pokal-ring svg {position:relative;width:13px;height:13px}
.abz-kopf-pokal .abz-pokal-ring svg {width:19px;height:19px}
.abz-kopf-pokal .abz-pokal-ring {color:var(--accent)}
.abz-pokal-zahl {min-width:4.4ch;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text)}
/* Kopf der Eintrags-Ansicht und Meilenstein-Band (18.09.2026) */
.abz-kopf-stempel,.abz-kopf-pokal,.abz-meilen-knopf {display:flex;align-items:center;gap:9px;min-height:44px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;text-align:left;cursor:pointer;text-decoration:none}
/* Karte "Letzte Auszeichnung" wie eine Urkunde (18.09.2026): großes Siegel, Text, Vertragsstempel.
   Raster statt Flex, damit der Stempel am Telefon unter den Titel rutschen kann. Die Tinte ist eine
   Rauschmaske (data:-SVG, img-src erlaubt data:), damit der Stempel gestempelt statt gedruckt wirkt. */
.abz-kopf-stempel {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:16px;flex:1 1 380px;min-height:104px;padding:14px 22px 14px 14px;border-color:color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:14px}
.abz-halter--kopf {width:76px;height:76px;margin:0}
.abz-kopf-stempel .abz-kopf-text {gap:3px}
.abz-kopf-stempel .abz-kopf-marke {font:800 10.5px/1.3 var(--abz-fj);letter-spacing:.14em}
.abz-kopf-stempel .abz-kopf-titel {font:800 17px/1.25 var(--abz-fj);white-space:normal}
.abz-kopf-zeile {font:600 12.5px/1.3 var(--abz-fi);color:var(--muted)}
.abz-kopf-tinte {--abz-tinte:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.5'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 12px 6px;border:3px double var(--accent);border-radius:6px;color:var(--accent);transform:rotate(-9deg);white-space:nowrap;-webkit-mask:var(--abz-tinte) 0 0/120px 120px;mask:var(--abz-tinte) 0 0/120px 120px}
.abz-kopf-tinte b {font:800 16px/1 var(--abz-fj);letter-spacing:.2em;text-transform:uppercase}
.abz-kopf-tinte small {font:700 11px/1 var(--abz-fi);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.abz-kopf-pokal {flex-direction:column;justify-content:center;gap:6px;min-width:104px;padding:10px 14px;border-radius:14px;font-weight:800}
.abz-kopf-pokal .abz-pokal-ring {width:40px;height:40px}
.abz-kopf-pokal .abz-pokal-ring::before {inset:3.5px}
.abz-kopf-pokal .abz-pokal-zahl {font-size:17px}
.abz-kopf-pokal-text {font:700 10px/1.2 var(--abz-fj);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.abz-kopf-text,.abz-meilen-text {display:flex;flex-direction:column;min-width:0;line-height:1.25}
.abz-kopf-marke {font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.abz-kopf-titel,.abz-meilen-k {font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.abz-meilen-kopf {display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.abz-meilen-titel {font-size:13.5px;font-weight:800}
.abz-meilen-sub,.abz-meilen-d {font-size:11.5px;color:var(--muted)}
.abz-meilen-zahl {margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.abz-meilen-liste {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.abz-meilen-liste>li {display:flex}
.abz-meilen-knopf {flex:1;width:100%;padding:6px 10px 6px 6px;background:color-mix(in srgb,var(--accent) 6%,var(--card));border-color:color-mix(in srgb,var(--accent) 28%,var(--border))}
.abz-kopf-stempel:focus-visible,.abz-kopf-pokal:focus-visible,.abz-meilen-knopf:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:480px){.abz-meilen-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .abz-kopf-stempel{flex:1 1 100%;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px;min-height:92px;padding:12px 14px 14px 12px}
  .abz-halter--kopf{width:62px;height:62px;grid-row:span 2}
  .abz-kopf-stempel .abz-kopf-titel{font-size:15px}
  .abz-kopf-tinte{grid-column:2;justify-self:start;gap:2px;margin:10px 0 0 4px;padding:5px 9px 4px;transform:rotate(-6deg)}
  .abz-kopf-tinte b{font-size:13px}
  .abz-kopf-tinte small{font-size:10px}
  .abz-kopf-pokal{flex:1 1 100%;flex-direction:row;justify-content:flex-start;min-width:0;min-height:60px}}
/* D5: Blatt mit der ganzen Urkunde, bis 88vh hoch und scrollbar, auf dem Telefon bildschirmfüllend */
.abz-blatt {box-sizing:border-box;margin:auto;width:min(760px,calc(100% - 32px));max-width:none;max-height:88vh;overflow:auto;padding:0 14px 6px;border:1px solid var(--border);border-radius:14px;background:var(--card2);color:var(--text)}
.abz-blatt::backdrop {background:color-mix(in srgb,var(--bg) 72%,transparent)}
.abz-blatt-kopf {position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:8px 0;background:var(--card2)}
/* Hausknopf aus css/buttons.css (Wunsch Markus 17.09.2026); hier bleibt nur, was die
   Hausklasse nicht liefert: Beruehrungsflaeche 44 px und die Groesse des Symbols. */
.abz-blatt-zu {min-height:44px}
.abz-blatt-zu svg {width:18px;height:18px;flex:none}
.abz-blatt-zu:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-blatt .abz-block {margin:0}
.abz-blatt .abz-urkunde {margin-bottom:8px}
/* Blatt (offenDetails): je Gruppe unter den erreichten Siegeln die Liste "Noch offen". Zeile = Knopf ab 44 px mit kleinem offenen Siegel,
   Titel, So-Text und bei gestuften Fortschrittstext und Balken. Erreichte gestufte zeigen im Gitter den Weg zur nächsten Stufe. */
.abz-of {margin-top:22px}
.abz-of-kopf {font:800 11px/1.4 var(--abz-fi);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.abz-of-liste {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.abz-of-knopf {all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start;width:100%;min-height:44px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;cursor:pointer;text-align:left;color:var(--text)}
.abz-of-knopf:hover {border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.abz-of-knopf:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.abz-of-knopf .abz-halter--mini {margin-top:1px}
.abz-of-knopf .is-offen .abz-siegel {opacity:.85}
.abz-of-knopf .abz-s-grund {stroke-width:6;stroke-dasharray:16 12}
.abz-of-text {display:flex;flex-direction:column;gap:3px;min-width:0}
.abz-of-titel {font:700 13.5px/1.35 var(--abz-fj);color:var(--text);overflow-wrap:anywhere}
.abz-of-so {font:400 13px/1.5 var(--abz-fi);color:var(--muted);overflow-wrap:anywhere}
.abz-of-so b {display:block;font:600 10px/1.6 var(--abz-fi);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.abz-of-fort {margin-top:4px;font:600 12px/1.4 var(--abz-fi);color:var(--text);overflow-wrap:anywhere}
.abz-s-fort {display:block;margin-top:6px;font:600 11px/1.4 var(--abz-fi);color:var(--muted);overflow-wrap:anywhere}
.abz-balken {display:block;width:100%;max-width:220px;height:5px;margin-top:4px;border-radius:3px;background:color-mix(in srgb,var(--border) 80%,transparent);overflow:hidden}
.abz-balken i {display:block;height:100%;max-width:100%;border-radius:3px;background:var(--accent)}
.abz-stueck .abz-balken {max-width:110px;margin:6px auto 0}
/* Telefon: Die Kapsel verliert Rand und Seitenabstand, damit dem Titel dieselbe Breite bleibt wie der Medaillen-Zeile von 2.92.0
   (Siegel 28 px + 8 px Abstand; mit Rand fehlten 14 px, bei 320 und 414 px mit KI-Ring fiele der Titel unter 96 px). Neu zeigt sich dort
   als Umriss (kostet keine Breite) mit Marke und Stempel. Das Datum steht nur im Dialog und im aria-label. Das Blatt füllt den Bildschirm. */
@media (max-width:600px) {
  .abz-dash-knopf {gap:8px;padding:2px 0;border:0;border-radius:10px;background:none}
  .abz-dash-knopf.is-neu {margin-top:16px;padding:8px 0 2px;border:0;outline:1px solid var(--accent);outline-offset:4px}
  .abz-dash-siegel,.abz-dash-siegel .abz-halter--mini {width:28px;height:28px}
  .abz-dash-titel {-webkit-line-clamp:3}
  .abz-dash-lab {letter-spacing:.08em}
  .abz-dash-datum {display:none}
  .abz-dash-knopf.is-neu:focus-visible {outline-width:3px}
  .abz-dash-neu {top:-14px;right:0}
  .abz-blatt {width:100%;height:100%;max-height:none;margin:0;padding:0 8px 6px;border:0;border-radius:0}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce) {
  .abz-dash-knopf.is-neu {outline-width:2px}
}

/* Ergänzungen 9.12 */
/* Container in ki-tracking.html (11.2) und im Eintragsdetail von admin.html (14.1) */
.abz-block { margin: 4px 0 14px; }
.admabz { margin-bottom: 14px; }
/* Ladezustand */
.abz-laedt-punkte { font-size: 22px; letter-spacing: .3em; line-height: 1; }
/* Fehlerblock der Urkunde: Container mit Text und Knopf. Ersetzt die Zeile .abz-fehler aus v1
   (dort ein ganzflächiger Knopf); 10.2 führt .abz-fehler nicht mehr. */
.abz-ladefehler { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; min-height: 120px;
  padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 13px; }
.abz-fehler-text { margin: 0; line-height: 1.55; }
/* Wiederholen-Knopf: .btn .btn-secondary .btn-sm bringt Form, Schrift, Ausrichtung und den Abstand zum Symbol mit;
   die Berührungsfläche steht in 10.2. Hier bleibt nur, dass das Symbol nicht schrumpft. */
.abz-erneut svg { flex: none; }
/* Hinweis unter den Gruppen */
.abz-ausfall { margin-top: 6px; }
/* Ehrenplatz: Text und Knopf (Marke, Titel und Halter in 10.2) */
.abz-ehren-bedeutung { margin: 6px 0 10px; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* Ehrenplatz: .btn .btn-secondary .btn-sm, hier nur die Berührungsfläche. */
.abz-ehren-mehr { min-height: 44px; }
.abz-ehren-mehr:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Dialog ohne showModal und Ziel-Stufe aus dem Tiefenlink */
.abz-dialog-ersatz { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 72%, transparent); z-index: 9000; }
.abz-d-stufen li.is-ziel { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Siegel: Rosette (Treue) */
.abz-s-rosette { stroke-linejoin: round; }
/* Dashboard-Kopf: Zeile für Treue-Chip, Dank und Ladefehler-Hinweis (12.2) */
.abz-treue-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 2px; max-width: 100%; min-width: 0; }
.abz-treue-zeile:empty { display: none; }
/* Profil: Mail-Schalter (gleiche Zeile wie "KI-Systeme für deine Messung", profil.html _kiPlattRender) */
.abz-mail-zeile { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card2); cursor: pointer; color: var(--text); font-size: 14px; }
.abz-mail-zeile input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); cursor: pointer; }
.abz-mail-zeile input:disabled { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .abz-ehren, .abz-treue-karte, .abz-dialog { animation: none !important; transition: none !important; }
}