/* =====================================================================
   Karten-App · Stil „Klarer Tag“ – hell, ruhig, Blau-Akzent
   ===================================================================== */
@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(fonts/manrope.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #f5f4f0;
  --flaeche: #ffffff;
  --flaeche-2: #f8f7f3;
  --leiste: #fbfaf7;
  --linie: #e6e3dc;
  --linie-2: #f0eee8;
  --text: #16181d;
  --text-2: #3d4048;
  --text-3: #5c5f66;
  --text-4: #6f727a;
  --akzent: #2346d1;
  --akzent-dunkel: #16309c;
  --akzent-hell: #e8ecfb;
  --akzent-text: #1a34a8;
  --gut: #1a7f4b;
  --gut-hell: #e3f3ea;
  --schlecht: #c0392b;
  --schlecht-hell: #fbe9e6;
  --gelb-hell: #fff2cc;
  --gelb-text: #7a5600;
  --orange: #a46a00;
  --schatten: 0 1px 2px rgba(20, 24, 40, .04);
  --schatten-karte: 0 4px 12px rgba(20, 24, 40, .14);
  --radius: 16px;
  --radius-gross: 20px;
  --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel: "Archivo", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --nav-hoehe: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 var(--schrift); font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { font-family: var(--titel); font-weight: 800; margin: 0; letter-spacing: -.005em; }
h1 { font-stretch: 125%; font-size: 30px; line-height: 1.1; }
h2 { font-stretch: 112%; font-size: 20px; }
h3 { font-stretch: 105%; font-size: 16px; }
body.laedt > * { visibility: hidden; }
:focus-visible { outline: 2.5px solid var(--akzent); outline-offset: 2px; }

/* ---------- Rahmen: Seitenleiste + Inhalt ---------- */
body.angemeldet { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.seitenleiste {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 26px;
  padding: 26px 16px 18px; background: var(--leiste); border-right: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 0 6px; }
.marke span:last-child { font-family: var(--titel); font-stretch: 125%; font-weight: 800; font-size: 19px; }
.marke:hover { color: var(--text); }
.marke-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--akzent); display: grid; place-items: center; color: #fff; flex: none; }
.marke-icon svg { width: 18px; height: 18px; stroke-width: 2.4; }
.marke-icon.gross { width: 52px; height: 52px; border-radius: 15px; }
.marke-icon.gross svg { width: 26px; height: 26px; }
.hauptnav { display: flex; flex-direction: column; gap: 3px; }
.hauptnav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--text-2); text-decoration: none; font-weight: 650;
}
.hauptnav a:hover { background: var(--linie-2); color: var(--text); }
.hauptnav a.aktiv { background: var(--akzent-hell); color: var(--akzent-text); font-weight: 750; }
.leiste-unten { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.ich {
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border: none; border-top: 1px solid var(--linie);
  background: none; cursor: pointer; text-align: left; position: relative; border-radius: 0;
}
.ich:hover .ich-text b { color: var(--akzent); }
.ich-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ich-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ich-text span { color: var(--text-4); font-size: 13px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: var(--text); flex: none;
}
.menue-punkt { position: absolute; top: 10px; left: 34px; width: 11px; height: 11px; border-radius: 50%; background: #2fa35f; border: 2px solid var(--leiste); }
.klein-links { font-size: 12px; gap: 4px 12px; padding: 0 8px; }

main { min-width: 0; width: 100%; max-width: 1240px; padding: 34px 40px 30px; }
body:not(.angemeldet) main { margin: 0 auto; padding-top: 24px; }
.ansicht { display: flex; flex-direction: column; gap: 18px; }
.ansicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; min-height: 44px; }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; }
.kopf-zahl { color: var(--text-4); font-weight: 600; }
.nur-klein { display: none !important; }

/* ---------- Menü ---------- */
.menue {
  position: fixed; left: 16px; bottom: 76px; width: 236px; z-index: 60;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(20, 24, 40, .18); padding: 6px; display: flex; flex-direction: column;
}
.menue a, .menue button {
  text-align: left; padding: 10px 12px; border-radius: 9px; color: var(--text); text-decoration: none;
  background: none; border: none; cursor: pointer; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between;
}
.menue a:hover, .menue button:hover { background: var(--flaeche-2); color: var(--text); }
.menue-wer { padding: 8px 12px 10px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; display: flex; flex-direction: column; }
.menue-wer span { font-size: 12.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; }
.menue-klein { display: flex; gap: 2px; }
.menue-klein a { font-size: 13px; color: var(--text-3); font-weight: 500; padding: 8px 12px; }
#abmelden { color: var(--schlecht); border-top: 1px solid var(--linie); border-radius: 0 0 9px 9px; margin-top: 4px; }
.zahl-punkt { font-style: normal; background: #2fa35f; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.schleier { position: fixed; inset: 0; z-index: 55; background: rgba(16, 18, 26, .32); }

/* ---------- Grundbausteine ---------- */
.flaeche { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--linie); background: var(--flaeche); border-radius: 11px;
  padding: 9px 15px; cursor: pointer; min-height: 42px; font-weight: 700; color: var(--text); text-decoration: none;
}
.knopf:hover { border-color: #cfcbc2; color: var(--text); }
.knopf svg { width: 18px; height: 18px; }
.knopf.haupt { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf.haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.knopf.dunkel { background: var(--text); color: #fff; border-color: var(--text); }
.knopf.gefahr { color: var(--schlecht); }
.knopf.flach { border: none; background: none; min-height: 0; padding: 4px 8px; font-size: 18px; color: var(--text-3); }
.knopf:disabled { opacity: .55; cursor: default; }
.icon-knopf { width: 44px; height: 44px; padding: 0; position: relative; }
.knopf.mehr { align-self: center; margin-top: 4px; }
.klein-knopf { min-height: 32px; padding: 4px 11px; font-size: 13px; border-radius: 9px; }
.link-knopf { background: none; border: none; color: var(--akzent); cursor: pointer; padding: 0 0 0 4px; font: inherit; font-weight: 700; }
.mehr-link { font-weight: 750; text-decoration: none; font-size: 14px; white-space: nowrap; }

input[type=search], input[type=text], input[type=number], input[type=email], input[type=password], select, textarea {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 11px;
  padding: 9px 12px; outline: none; min-height: 42px; color: var(--text);
}
input:focus, select:focus, textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(35, 70, 209, .14); }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235c5f66' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.schalter { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-3); user-select: none; cursor: pointer; }
.schalter input { accent-color: var(--akzent); width: 17px; height: 17px; }
.klein { font-size: 13px; color: var(--text-4); font-weight: 500; }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.zahl { font-variant-numeric: tabular-nums; }
.plus { color: var(--gut); }
.minus { color: var(--schlecht); }
.fehler-text { color: var(--schlecht); margin: 4px 0; font-size: 14px; }
.fehlertext { color: var(--schlecht) !important; }

.suchfeld {
  display: flex; align-items: center; gap: 9px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; padding: 0 13px; min-height: 46px; color: var(--text-4); flex: none; min-width: 0;
}
.suchfeld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(35, 70, 209, .14); }
.suchfeld input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; padding: 0; background: transparent; min-height: 44px; }
.suchfeld svg { width: 18px; height: 18px; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.werkzeuge .suchfeld { flex: 1 1 260px; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -2px 0; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2);
  border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: #cfcbc2; }
.chip[aria-pressed=true] { background: var(--akzent); color: #fff; border-color: var(--akzent); font-weight: 750; }
.chip small { font-size: 12.5px; opacity: .8; margin-left: 2px; }

.reiter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #eceae4; border-radius: 13px; padding: 4px; gap: 4px; max-width: 640px; }
.reiter button { border: 0; border-radius: 10px; padding: 9px 6px; background: transparent; font-weight: 700; font-size: 14px; color: var(--text-3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reiter button[aria-selected=true] { background: var(--flaeche); color: var(--text); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 11px; overflow: hidden; background: var(--flaeche); }
.umschalter button { border: none; background: none; width: 42px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--text-3); }
.umschalter button.aktiv { background: var(--text); color: #fff; }

.balken { height: 8px; border-radius: 99px; background: #eeece6; overflow: hidden; display: block; }
.balken span { display: block; height: 100%; background: var(--akzent); border-radius: 99px; transition: width .4s; }

.abschnitt { padding: 22px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.abschnitt-kopf .klein { text-align: right; }
.abschnitt-kopf h2 { white-space: nowrap; }
.abschnitt.voll { grid-column: 1 / -1; }
.leer-text { color: var(--text-4); font-size: 14px; margin: 6px 0; }

/* Mini-Karte (Bild in Listen) */
.mini { width: 40px; aspect-ratio: 63 / 88; border-radius: 4px; overflow: hidden; flex: none; background: var(--flaeche-2); box-shadow: 0 2px 6px rgba(20, 24, 40, .14); position: relative; }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.ohne { box-shadow: none; border: 1.5px dashed #c9c5bb; background: none; display: grid; place-items: center; color: var(--text-4); font-size: 10px; font-family: var(--mono); }
.mini.geist img { filter: grayscale(1); opacity: .35; }

/* Zeilen in Listen (Start, Grading, Set-Seite) */
.zeilen { display: flex; flex-direction: column; }
.k-zeile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--linie-2); cursor: pointer; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  text-align: left; width: 100%; color: inherit;
}
.k-zeile:first-child { border-top: 0; }
.k-zeile:hover .k-name { color: var(--akzent); }
.k-mitte { display: flex; flex-direction: column; min-width: 0; }
.k-name { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-unter { color: var(--text-4); font-size: 13px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.k-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.k-rechts b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hebel { background: var(--gelb-hell); color: var(--gelb-text); font-weight: 800; font-size: 12.5px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.hebel.top { background: var(--gut); color: #fff; }

/* ---------- Startseite ---------- */
.start-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.start-kopf .datum { color: var(--text-4); font-size: 14px; font-weight: 650; }
.start-kopf h1 { font-size: 36px; margin-top: 4px; }
.start-ich { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--text); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; position: relative; }
.start-ich .menue-punkt { top: -1px; left: auto; right: -1px; border-color: var(--bg); }
.wert-karte { padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; }
.wert-zahlen { display: flex; flex-direction: column; gap: 6px; }
.etikett { color: var(--text-3); font-weight: 750; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; }
.gesamtwert { font-family: var(--titel); font-stretch: 125%; font-weight: 800; font-size: 54px; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.woche { font-weight: 800; }
.woche span { color: var(--text-4); font-weight: 500; }
.kennzahlen { display: flex; gap: 26px; margin-top: 12px; color: var(--text-2); }
.kennzahlen b { font-size: 20px; display: block; font-variant-numeric: tabular-nums; }
.kennzahlen span { color: var(--text-4); font-size: 13px; }
.kurve { min-width: 0; }
.kurve-flaeche { position: relative; }
.kurve svg { width: 100%; height: 190px; display: block; overflow: visible; }
.kurve-punkt { position: absolute; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 3px #fff; }
.anm-marke .marke-icon { color: #fff; }
.kurve-fuss { display: flex; justify-content: space-between; color: var(--text-4); font-size: 12px; margin-top: 4px; }
.kurve-leer { border: 1.5px dashed var(--linie); border-radius: 14px; padding: 24px; color: var(--text-4); font-size: 14px; text-align: center; }
.start-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: start; }
.firma-band { width: 56px; flex: none; text-align: center; font-weight: 800; font-size: 11.5px; color: #fff; background: var(--slab, #6d6f76); padding: 4px 0; border-radius: 6px; }
.firma-band.leer { background: var(--flaeche-2); color: var(--text-3); border: 1px dashed #cfcbc2; }
.g-zeile { grid-template-columns: 56px minmax(0, 1fr) auto; }
.bewegung { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bewegung h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--schrift); font-weight: 800; color: var(--text-3); margin-bottom: 2px; }
.zuletzt { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.zuletzt button { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; color: inherit; }
.zuletzt .bildrahmen { width: 100%; }
.zuletzt .name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px dashed #d6d2c9; border-radius: 14px; font-size: 14px; color: var(--text-3); }
.admin-zeile b { color: var(--text); }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gut); flex: none; }
.punkt.laeuft { background: var(--akzent); animation: puls 1.2s ease-in-out infinite; }
.punkt.fehler { background: var(--schlecht); }
@keyframes puls { 50% { opacity: .3; } }

/* ---------- Set-Kacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px;
  text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; min-width: 0;
}
.kachel:hover { border-color: #cfcbc2; color: var(--text); box-shadow: 0 6px 18px rgba(20, 24, 40, .06); }
.kachel.ohne { opacity: .6; }
.kachel-logo { height: 54px; display: flex; align-items: center; justify-content: flex-start; }
.kachel-logo img { max-height: 54px; max-width: 100%; object-fit: contain; }
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.code { font-family: var(--mono); font-weight: 700; font-size: 16px; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 6px; }
.code img { width: 18px; height: 18px; object-fit: contain; }
.kachel-kopf b { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kachel-name { color: var(--text-3); font-size: 13px; min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-stand { color: var(--text-4); font-size: 12.5px; display: flex; justify-content: space-between; gap: 6px; }
.logo-ersatz { font-family: var(--titel); font-stretch: 125%; font-weight: 800; font-size: 22px; color: #c9c5bb; }

/* ---------- Ein Set ---------- */
.zurueck-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; text-decoration: none; min-height: 40px; align-self: flex-start; }
.zurueck-link svg { width: 20px; height: 20px; stroke-width: 2.2; }
.set-held { padding: 20px 22px; display: flex; gap: 20px; align-items: center; }
.ring { flex: none; width: 96px; height: 96px; }
.ring svg { width: 100%; height: 100%; }
.set-held-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.set-held-text .code { color: var(--text-3); font-size: 13px; }
.set-held-text h1 { font-size: 26px; font-stretch: 112%; }
.set-held-text b { font-weight: 800; }
.set-held-logo { max-height: 78px; max-width: 220px; object-fit: contain; flex: none; }
.set-teile { display: flex; gap: 2px 14px; flex-wrap: wrap; color: var(--text-4); font-size: 13px; }
.set-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.set-werkzeuge .reiter { flex: 1 1 420px; }
.set-hinweis { padding: 14px 16px; border-radius: 14px; background: var(--flaeche-2); border: 1px dashed var(--linie); color: var(--text-3); font-size: 14px; }
.set-liste { padding: 4px 16px; }
.s-zeile { display: grid; grid-template-columns: 40px 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linie-2); }
.s-zeile:first-child { border-top: 0; }
.s-zeile.hat { cursor: pointer; }
.s-zeile.hat:hover .s-name { color: var(--akzent); }
.s-nr { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.s-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-zeile.fehlt .s-name { font-weight: 500; color: var(--text-4); }
.s-info { font-size: 13px; font-weight: 700; display: flex; gap: 5px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.s-zeile.fehlt .s-info { color: var(--text-4); font-weight: 600; }
.wunsch-knopf { width: 38px; height: 38px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #b9b5ab; }
.wunsch-knopf:hover { background: var(--flaeche-2); color: var(--text-3); }
.wunsch-knopf.an { color: #e5a400; }
.wunsch-knopf.an svg { fill: currentColor; }
.wunsch-knopf svg { width: 19px; height: 19px; }
.platzhalter-knopf { width: 38px; }
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 12px; }
.album-karte { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.album-karte .bildrahmen { cursor: pointer; }
.album-karte.fehlt .bildrahmen { cursor: default; border: 1.5px dashed #c9c5bb; background: transparent; box-shadow: none; }
.album-karte.fehlt img { filter: grayscale(1); opacity: .28; }
.album-karte .unter { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-4); gap: 4px; }
.album-karte .unter b { color: var(--text); font-weight: 800; }
.album-karte .wunsch-knopf { position: absolute; right: 2px; top: 2px; z-index: 4; width: 32px; height: 32px; background: rgba(255, 255, 255, .85); }
.album-nr { position: absolute; left: 6px; bottom: 6px; z-index: 3; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text-3); }

/* ---------- Kartenliste ---------- */
.set-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--akzent-hell); color: var(--akzent-text); font-weight: 650; }
.set-filter a { font-weight: 750; }
.set-filter .abstand { flex: 1; }
.filter-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.panel-feld { display: flex; align-items: center; gap: 8px; }
.panel-feld span { font-size: 13px; color: var(--text-4); font-weight: 650; }
.filter-zahl { position: absolute; top: -5px; right: -5px; font-style: normal; background: var(--akzent); color: #fff; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center; border: 2px solid var(--bg); }
.treffer { font-size: 13px; color: var(--text-4); margin: -4px 2px -6px; font-weight: 600; }

.liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; container-type: inline-size; container-name: liste; }
.zeile {
  display: grid;
  grid-template-columns: 62px 38px 54px minmax(140px, 1.6fr) 64px 104px 100px 92px 96px 104px minmax(92px, .8fr) minmax(70px, .6fr) minmax(92px, .8fr);
  align-items: center; gap: 0 10px; padding: 7px 16px; border-top: 1px solid var(--linie-2); cursor: pointer; min-height: 46px;
}
.zeile:first-child { border-top: none; }
.zeile:hover { background: #fafaf7; }
.zeile.kopfzeile {
  cursor: default; background: var(--flaeche-2); font-size: 11.5px; font-weight: 750;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; min-height: 38px;
}
.zeile.kopfzeile span[data-sort] { cursor: pointer; user-select: none; }
.zeile.kopfzeile span[data-sort]:hover { color: var(--text); }
.zeile.leer { color: var(--text-4); }
.zeile > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.set { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.nr { font-family: var(--mono); font-size: 13px; }
.name { font-weight: 700; }
.ct { color: var(--text-4); font-size: 13px; }
.ct.hoeher { color: var(--schlecht); }
.ct.niedriger { color: var(--gut); }
.wert { font-weight: 750; }
.wert small.mal { display: block; font-size: 11px; font-weight: 600; color: var(--text-4); }
.anz { font-variant-numeric: tabular-nums; color: var(--text-3); }
.marke-text {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text-3); margin-right: 3px; line-height: 1.5;
}
.sp-meta { display: none; }
.sp-seltenheit, .sp-sprache { display: flex; align-items: center; gap: 2px; }
.schloss { font-size: 11px; margin-right: 4px; opacity: .75; }
.zeile.tipp-top { background: #f2f9f4; }
/* Spalten ausblenden, sobald die Liste selbst zu schmal wird (Seitenleiste mitgerechnet).
   Reihenfolge: Set Anz Nr Name Selt Spr Preis CT Wert PSA Grading Inseriert Update */
@media (min-width: 821px) {
  @container liste (max-width: 1275px) {
    .zeile { grid-template-columns: 60px 36px 52px minmax(130px, 1.6fr) 60px 100px 96px 88px 94px 104px 112px minmax(70px, .8fr); gap: 0 8px; }
    .zeile .sp-update { display: none; }
  }
  @container liste (max-width: 1140px) {
    .zeile { grid-template-columns: 62px 38px 54px minmax(140px, 1.6fr) 64px 104px 100px 96px 104px 112px minmax(70px, .8fr); gap: 0 10px; }
    .zeile .sp-ct { display: none; }
  }
  @container liste (max-width: 1078px) {
    .zeile { grid-template-columns: 62px 38px 54px minmax(140px, 1.6fr) 64px 104px 100px 96px 116px minmax(92px, .8fr); }
    .zeile .sp-inseriert { display: none; }
  }
  @container liste (max-width: 990px) {
    .zeile { grid-template-columns: 62px 38px 54px minmax(140px, 1.6fr) 104px 100px 96px 116px minmax(92px, .8fr); }
    .zeile .sp-seltenheit { display: none; }
  }
  @container liste (max-width: 916px) {
    .zeile { grid-template-columns: 58px 34px 50px minmax(130px, 1.6fr) 96px 92px 90px minmax(110px, .8fr); gap: 0 8px; }
    .zeile .sp-psa { display: none; }
  }
  @container liste (max-width: 760px) {
    .zeile { grid-template-columns: 58px 50px minmax(120px, 1.6fr) 90px 90px minmax(110px, .8fr); }
    .zeile .sp-anzahl, .zeile .sp-sprache { display: none; }
  }
}
.leer-start { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--text-3); }
.leer-start b { color: var(--text); font-size: 17px; }
.leer-hinweis { padding: 14px; margin: 0; }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); min-width: 0; gap: 18px 14px; }
.bildkachel { min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
.bildrahmen {
  position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 9px; overflow: hidden;
  background: var(--flaeche-2); border: 1px solid var(--linie); box-shadow: var(--schatten-karte); transition: transform .15s;
}
.bildkachel:hover .bildrahmen, .zuletzt button:hover .bildrahmen { transform: translateY(-2px); }
.bildrahmen > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bildkachel.leer .bildrahmen { opacity: .45; }
.bild-ersatz { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; height: 100%; padding: 10px; text-align: center; color: var(--text-3); font-size: 12px; }
.bild-ersatz b { color: var(--text); font-size: 13.5px; }
.anzahl-punkt { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(15, 17, 22, .78); color: #fff; z-index: 3; }
.ecke { position: absolute; left: 6px; top: 6px; z-index: 3; }
.ecke .g-status { background: rgba(15, 17, 22, .78); color: #fff; }
.bildkachel-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bildkachel-text .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.bildkachel-text .klein { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kachel-preise { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.kachel-preise .wert { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kachel-preise .psa { font-size: 12px; }
.bildrahmen.eigen > img { object-fit: cover; }

/* ---------- Flaggen & Seltenheitssymbole ---------- */
.flagge { font-size: 16px; line-height: 1; vertical-align: -1px; margin-right: 2px; }
.sel { display: inline-flex; align-items: baseline; gap: 1px; font-size: 14px; line-height: 1; letter-spacing: -.5px; color: var(--text); white-space: nowrap; }
.sel small { font-size: 9px; margin-left: 2px; color: var(--text-3); letter-spacing: 0; }
.sel.gold { color: #c9a227; text-shadow: 0 0 1px rgba(120, 90, 0, .35); }
.sel.weiss { color: #fff; -webkit-text-stroke: .8px #6d6f76; }
.sel.lila { color: #8b5cf6; }
.sel.shiny { background: linear-gradient(90deg, #e5484d, #f5a524, #3fb950, #3b82f6, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sel.ace, .sel.promo { font-size: 10px; font-weight: 800; letter-spacing: .03em; padding: 2px 5px; border-radius: 4px; }
.sel.ace { background: linear-gradient(135deg, #d6402b, #8b5cf6); color: #fff; }
.sel.promo { border: 1px solid var(--linie); color: var(--text-3); }
.sel-text { font-size: 12px; color: var(--text-3); }

/* ---------- Grading: Slabs, Status, PSA ---------- */
.slab {
  display: inline-flex; align-items: stretch; border-radius: 5px; overflow: hidden; font-size: 11px; line-height: 1;
  border: 1.5px solid var(--slab, #6d6f76); background: #fff; color: #111; vertical-align: middle; box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.slab b { background: var(--slab, #6d6f76); color: #fff; padding: 3px 5px; font-weight: 800; letter-spacing: .03em; }
.slab i { font-style: normal; font-weight: 800; padding: 3px 6px; font-variant-numeric: tabular-nums; }
.slab-psa { --slab: #c8102e; }
.slab-cgc { --slab: #1b3f8b; }
.slab-beckett { --slab: #1d1f24; }
.slab-beckett i { background: linear-gradient(180deg, #f2f2f2, #c9ccd1); }
.slab-pgs { --slab: #2f7d4f; }
.slab-pi { --slab: #7a3fbf; }
.slab-tag { --slab: #111; }
.slab-ace { --slab: #b8901f; }
.slab.pristine i { background: linear-gradient(180deg, #fff6d6, #e9c96b); }
.slab-gross { font-size: 15px; border-width: 2px; border-radius: 7px; }
.slab-gross b, .slab-gross i { padding: 5px 9px; }
.g-status { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 750; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.g-status.vorgemerkt { color: var(--akzent); background: var(--akzent-hell); }
.g-status.abgegeben { color: var(--orange); background: #fbefd5; }
.alt-eintrag { opacity: .8; }
.psa { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; color: var(--text-3); white-space: nowrap; }
.psa small { font-size: 11px; color: var(--text-4); font-weight: 700; }
.psa.gut { color: var(--gut); font-weight: 750; }
.psa.gut small { color: var(--gut); }
.psa.top { color: #fff; background: var(--gut); padding: 2px 8px; border-radius: 99px; font-weight: 800; }
.psa.top small { color: rgba(255, 255, 255, .85); }

/* ---------- Reverse-Holo-Folie ---------- */
@keyframes folie { from { background-position: 0% 0%, 0 0; } to { background-position: 250% 250%, 0 0; } }
.foil { position: relative; isolation: isolate; }
.foil::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 0, 170, .9) 12%, rgba(0, 220, 255, .9) 24%, rgba(255, 240, 0, .9) 36%,
      rgba(0, 255, 140, .85) 48%, rgba(170, 80, 255, .9) 60%, rgba(255, 0, 170, .9) 72%, rgba(0, 220, 255, .9) 84%, transparent 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 6px);
  background-size: 300% 300%, 100% 100%;
  mix-blend-mode: hard-light; opacity: .35;
  animation: folie 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, 85% 41%;
  -webkit-mask-position: 0 0, 50% 19%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 50% 19% / 85% 41% no-repeat;
          mask-composite: exclude;
}
@media (prefers-reduced-motion: reduce) { .foil::after, .anm-karte, .rh-schalter.an, .punkt.laeuft { animation: none; } }

/* ---------- Dialoge ---------- */
dialog {
  border: none; border-radius: 20px; padding: 0; width: min(720px, 100vw - 24px);
  background: var(--flaeche); color: var(--text); box-shadow: 0 24px 70px rgba(16, 18, 26, .3);
}
dialog::backdrop { background: rgba(16, 18, 26, .42); }
.editor-kopf { display: flex; align-items: center; padding: 18px 22px 6px; }
.editor-kopf h2 { font-size: 19px; flex: 1; }
.editor-inhalt { padding: 6px 22px 10px; max-height: min(70vh, 640px); overflow: auto; }
.gruppe { margin: 14px 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.felder label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.felder input { width: 100%; }
.felder .breit { grid-column: span 2; }
.editor-fuss { display: flex; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--linie); }
.abstand { flex: 1; }
.fehler { color: var(--schlecht); margin: 0 22px; font-size: 14px; }
.editor-bild { float: right; width: 120px; border-radius: 8px; margin: 8px 0 8px 14px; cursor: zoom-in; }
.schalter-feld { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px !important; color: var(--text) !important; cursor: pointer; }
.schalter-feld input { width: 18px !important; height: 18px; accent-color: var(--akzent); }

.meldung {
  position: fixed; left: 50%; bottom: calc(24px + var(--nav-hoehe) + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: var(--text); color: #fff; padding: 11px 17px; border-radius: 12px; max-width: calc(100vw - 32px);
  font-size: 14px; font-weight: 650; opacity: 0; pointer-events: none; transition: .2s; z-index: 80;
}
.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Großansicht ---------- */
dialog.gross { width: min(920px, 100vw - 24px); }
.gross-innen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; padding: 24px 58px; align-items: start; }
.gross-links { display: flex; flex-direction: column; gap: 12px; align-items: center; min-width: 0; }
.buehne { width: 100%; display: flex; justify-content: center; perspective: 1200px; }
.karte3d {
  position: relative; border-radius: 4.5% / 3.3%; overflow: hidden; max-width: 380px; width: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 18px 50px rgba(16, 18, 26, .3); transform-style: preserve-3d;
}
.karte3d.neigt { transition: transform .08s linear; }
.karte3d img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.karte3d.eigen { border-radius: 10px; background: var(--flaeche-2); }
.karte3d .glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 45%); mix-blend-mode: overlay; }
.karte3d.neigt .glanz { opacity: 1; }
.gross-foil::after { opacity: .4; }
.karte3d.neigt.gross-foil::after { animation: none; opacity: .55; background-position: var(--mx, 0%) var(--my, 0%), 0 0; }
.gross-ersatz { aspect-ratio: 63 / 88; width: 100%; max-width: 320px; border: 1.5px dashed var(--linie); border-radius: 14px; }
.gross-info h2 { margin: 0 0 4px; font-size: 24px; font-stretch: 112%; }
.gross-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-3); margin: 0 0 6px; }
.gross-meta .klein { width: 100%; }
.gross-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0 18px; }
.gross-info dt { color: var(--text-4); font-size: 13px; font-weight: 600; }
.gross-info dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.gross-info dd.stand { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.gross-info dd small.klein { font-weight: 500; }
.gross-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.gross-zu { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gross-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 56px; border: none; border-radius: 12px;
  cursor: pointer; background: var(--flaeche-2); color: var(--text); font-size: 30px; line-height: 1;
}
.gross-pfeil:hover { background: var(--linie); }
.gross-pfeil.links { left: 8px; }
.gross-pfeil.rechts { right: 8px; }
.daumen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.daumen-bild { width: 54px; aspect-ratio: 63 / 88; padding: 0; border: 2px solid transparent; border-radius: 7px; overflow: hidden; cursor: pointer; background: var(--flaeche-2); position: relative; }
.daumen-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.daumen-bild.aktiv { border-color: var(--akzent); }
.daumen-bild .stern { position: absolute; right: 2px; top: 1px; font-style: normal; color: #f5c518; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); font-size: 13px; }
.daumen-neu { width: 54px; aspect-ratio: 63 / 88; border: 1.5px dashed #b9b5ab; border-radius: 7px; background: none; cursor: pointer;
  color: var(--text-3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; gap: 2px; font-weight: 700; }
.daumen-neu span { font-size: 20px; line-height: 1; }
.daumen-neu:hover { border-color: var(--akzent); color: var(--akzent); }
.daumen-aktionen { display: flex; gap: 6px; width: 100%; justify-content: center; }
.verlauf { margin: 0 0 16px; color: var(--akzent); max-width: 340px; }
.verlauf:empty { display: none; }
.verlauf-kopf, .verlauf-fuss { display: flex; justify-content: space-between; }
.verlauf-fuss { font-size: 12px; color: var(--text-4); }
.verlauf-svg { display: block; width: 100%; height: 64px; margin: 4px 0; }
.verlauf .plus { color: var(--gut); font-weight: 750; }
.verlauf .minus { color: var(--schlecht); font-weight: 750; }
.g-box { border: 1px solid var(--linie); border-radius: 14px; padding: 13px 15px; margin: 4px 0 16px; background: var(--flaeche-2); }
.g-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ref { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 6px 9px; display: flex; flex-direction: column; }
.ref span { font-size: 11px; color: var(--text-4); font-weight: 700; }
.ref b { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; }
.hebel-zeile { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; }
.hebel-zeile.gut { color: var(--gut); }
.hebel-zeile.top { color: #fff; background: var(--gut); padding: 7px 11px; border-radius: 10px; }
.g-box > .klein { margin: 8px 0 0; }
.segment { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px; background: #eceae4; border-radius: 12px; padding: 4px; margin-top: 10px; }
.segment button { border: none; background: none; border-radius: 9px; padding: 8px 10px; cursor: pointer; font-weight: 700; color: var(--text-3); font-size: 13.5px; }
.segment button.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.g-felder { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.g-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); font-weight: 650; flex: 1 1 140px; }

/* ---------- Erfassen ---------- */
.erfassen { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.schnell { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 18px; }
.schnell-felder { display: grid; grid-template-columns: 1fr 1.5fr 1.3fr .55fr auto; gap: 10px; align-items: end; }
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld > span:first-child { font-size: 12px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.feld input, .feld select { width: 100%; min-height: 52px; font-size: 19px; }
.feld-set input, .feld-nr input { font-family: var(--mono); letter-spacing: .03em; }
.feld-nr input { font-size: 22px; font-weight: 700; }
.nr-halter { position: relative; display: block; }
.abc { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 1px solid var(--linie); background: var(--flaeche-2);
  border-radius: 7px; font-size: 11px; font-weight: 700; padding: 4px 6px; cursor: pointer; color: var(--text-3); }
.rh-schalter { min-height: 52px; min-width: 58px; border-radius: 11px; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; font-weight: 800; color: var(--text-3); }
.rh-schalter.an { color: #fff; border-color: transparent; background: linear-gradient(115deg, #ff3ea5, #29d3ff, #ffe600, #2cff8e); background-size: 200% 200%; animation: folie 4s linear infinite; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.speichern { min-height: 52px; padding: 0 18px; white-space: nowrap; }
.speichern kbd { font: inherit; opacity: .7; margin-left: 4px; }
.schnell-hilfe { margin: 12px 2px 0; font-size: 13px; color: var(--text-4); }
.vorschau { display: flex; gap: 14px; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; }
.vorschau img, .vorschau .bild-leer { width: 92px; aspect-ratio: 245 / 342; object-fit: cover; border-radius: 6px; flex: none; }
.bild-leer { display: grid; place-items: center; background: var(--flaeche-2); border: 1.5px dashed var(--linie); color: var(--text-4); font-size: 22px; }
.bild-leer.klein { width: 40px; aspect-ratio: 245 / 342; font-size: 14px; border-radius: 4px; }
.vorschau-name { font-size: 19px; font-weight: 800; }
.vorschau-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vorschau-status { font-size: 14px; color: var(--text-3); }
.status { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.status.neu { background: var(--gut-hell); color: var(--gut); }
.status.alt { background: var(--akzent-hell); color: var(--akzent-text); }
.mehrzeilig { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 16px; }
.mehrzeilig summary { cursor: pointer; font-weight: 750; color: var(--text-3); }
.mehrzeilig textarea { width: 100%; margin: 10px 0; font-family: var(--mono); font-size: 15px; padding: 10px; resize: vertical; }
.mehr-ergebnis p { margin: 8px 0 0; font-size: 14px; }
.erfasst-kopf { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 2px -6px; }
.erfasst-kopf h2 { font-size: 18px; }
.erfasst-liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.erfasst { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--linie-2); cursor: pointer; }
.erfasst:first-child { border-top: none; }
.erfasst:hover { background: #fafaf7; }
.erfasst img { width: 40px; aspect-ratio: 245 / 342; object-fit: cover; border-radius: 4px; flex: none; }
.erfasst-text { flex: 1; min-width: 0; }
.erfasst-text .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erfasst-zahl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rueck { font-size: 20px; }

/* ---------- Verwaltung: Preise, Backup, TCGdex ---------- */
.preis-box, .backup-box { padding: 18px 20px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.preis-box:empty { display: none; }
.preis-zeile { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.preis-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.preis-text b { font-size: 17px; font-family: var(--titel); font-stretch: 112%; font-weight: 800; }
.preis-text .ergebnis { color: var(--text-4); font-size: 12.5px; }
.preis-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.preis-box .balken { margin-top: 12px; }
dialog.protokoll { width: min(980px, 100vw - 24px); }
.protokoll pre { margin: 0; padding: 4px 22px 22px; max-height: 70vh; overflow: auto; font: 12px/1.5 var(--mono); white-space: pre-wrap; color: var(--text-3); }
.b-teile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.b-teil { border: 1px solid var(--linie); border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.b-teil.ok { border-color: #bfe0cc; }
.b-teil.fehler { border-color: #efc2bb; background: #fdf4f2; }
.b-teil.gesperrt { border-color: #e8a400; background: #fff9ea; }
.b-name { font-weight: 800; }
.b-teil.ok .b-name { color: var(--gut); }
.b-teil.fehler .b-name { color: var(--schlecht); }
.b-teil.gesperrt .b-name { color: var(--orange); }
.b-balken { margin-top: 6px; }
.b-balken span { background: var(--gut); }
.b-balken.voll span { background: #e8a400; }
.b-warnung { margin-top: 10px; padding: 11px 13px; border-radius: 12px; background: #fff6df; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ergaenzen-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border: 1.5px dashed var(--linie); border-radius: var(--radius); }
.ergaenzen-box:empty { display: none; }
.ergaenzen-box p { margin: 0; flex: 1; }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.anm-buehne { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 10%, #3557e6 0%, #2346d1 40%, #142a8a 100%); }
.anm-buehne::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 70% 80%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(40% 40% at 25% 30%, rgba(255, 214, 102, .22), transparent 70%); }
.anm-karte {
  position: absolute; width: 210px; aspect-ratio: 63 / 88; border-radius: 14px; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%), linear-gradient(160deg, #f6d365, #fda085 45%, #a18cd1);
  box-shadow: 0 30px 60px rgba(8, 16, 60, .45), inset 0 0 0 8px rgba(255, 255, 255, .8);
  background-size: 250% 250%, 100% 100%; animation: folie 7s linear infinite;
}
.anm-karte::before { content: ""; position: absolute; left: 10%; right: 10%; top: 13%; height: 40%; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); }
.anm-karte.k1 { left: 18%; top: 22%; transform: rotate(-14deg); }
.anm-karte.k2 { left: 38%; top: 30%; transform: rotate(4deg); background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 45%, transparent 60%), linear-gradient(160deg, #84fab0, #8fd3f4); background-size: 250% 250%, 100% 100%; animation-delay: -2s; }
.anm-karte.k3 { left: 56%; top: 20%; transform: rotate(16deg); background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 45%, transparent 60%), linear-gradient(160deg, #a18cd1, #fbc2eb); background-size: 250% 250%, 100% 100%; animation-delay: -4s; }
.anm-inhalt { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 80px); gap: 26px; }
.anm-marke { display: flex; align-items: center; gap: 14px; }
.anm-marke b { display: block; font-family: var(--titel); font-stretch: 125%; font-weight: 800; font-size: 28px; }
.anm-marke span { color: var(--text-3); font-size: 14px; }
.anm-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; box-shadow: 0 20px 50px rgba(20, 24, 40, .07); max-width: 440px; width: 100%; }
.anm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #eceae4; padding: 4px; border-radius: 13px; margin-bottom: 18px; }
.anm-tabs button { border: none; background: none; padding: 9px; border-radius: 10px; cursor: pointer; font-weight: 700; color: var(--text-3); }
.anm-tabs button.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.anm-form { display: flex; flex-direction: column; gap: 13px; }
.anm-form label, .stapel label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-3); font-weight: 650; }
.anm-form input:not([type=checkbox]), .stapel input { padding: 11px 13px; font-size: 16px; }
.anm-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.anm-check input { accent-color: var(--akzent); width: 17px; height: 17px; }
.anm-hinweis { margin: 0; font-size: 14px; color: var(--text-3); line-height: 1.5; }
.anm-fehler { margin: 0; color: var(--schlecht); font-size: 14px; background: var(--schlecht-hell); padding: 9px 12px; border-radius: 10px; }
.gross-knopf { min-height: 48px; font-size: 16px; margin-top: 4px; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.anm-fertig { text-align: center; padding: 10px 6px; }
.anm-fertig h2 { margin: 10px 0 6px; }
.anm-fertig p { color: var(--text-3); margin: 0 0 18px; }
.anm-haken { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--gut); }
.fuss-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.fuss-links a { color: var(--text-4); text-decoration: none; }
.fuss-links a:hover { color: var(--text); text-decoration: underline; }
.fuss { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--linie); }
body.angemeldet .fuss { display: none; }

/* ---------- Seiten (Info, Impressum, Datenschutz, Konto, Konten) ---------- */
.text-seite { max-width: 820px; width: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: clamp(18px, 4vw, 40px); line-height: 1.6; }
.text-seite.schmal { max-width: 620px; }
.text-seite.breit-seite { max-width: 1000px; }
.text-seite h1 { margin: 0 0 6px; font-size: 30px; }
.text-seite h2 { margin: 28px 0 8px; font-size: 19px; }
.seite-lead { color: var(--text-3); margin-top: 0; }
.seite-fuss { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--text-4); }
.seite-zurueck { margin: 0 0 4px; align-self: flex-start; }
.quellen { width: 100%; border-collapse: collapse; font-size: 14px; }
.quellen th, .quellen td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.quellen th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.quellen td:first-child { font-weight: 700; width: 28%; }
.symbole { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; align-items: center; }
.symbole dt { display: flex; gap: 6px; align-items: center; }
.symbole dd { margin: 0; color: var(--text-3); }
.stapel { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.stapel .knopf { align-self: flex-start; }
.gefahr-titel { color: var(--schlecht); }
.konto-karte { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--linie); border-radius: 14px; margin: 16px 0 8px; }
.konto-karte div:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.konten { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.konto-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 14px; flex-wrap: wrap; }
.konto-zeile.wartend { border-color: #9fd3b4; background: #f3faf6; }
.konto-text { flex: 1 1 260px; display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.konto-knoepfe { display: flex; gap: 6px; }
.pill { font-size: 12px; font-weight: 750; padding: 3px 10px; border-radius: 99px; background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text-3); }
.pill.aktiv { color: var(--gut); border-color: #bfe0cc; }
.pill.wartend { color: var(--gut); background: var(--gut-hell); border-color: transparent; }
.pill.gesperrt { color: var(--schlecht); }

/* =====================================================================
   Mittlere Breite: Seitenleiste nur mit Symbolen
   ===================================================================== */
@media (max-width: 1100px) and (min-width: 821px) {
  body.angemeldet { grid-template-columns: 76px minmax(0, 1fr); }
  .seitenleiste { padding: 22px 12px 16px; align-items: center; }
  .marke span:last-child, .hauptnav a span, .ich-text, .klein-links { display: none; }
  .hauptnav a { padding: 11px; justify-content: center; }
  .ich { padding: 12px 0 0; }
  .menue-punkt { left: 26px; }
  main { padding: 28px 28px 30px; }
  .wert-karte { grid-template-columns: 1fr; }
  .zuletzt { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .zuletzt > :nth-child(n+7) { display: none; }
}

/* =====================================================================
   Handy: Navigation unten, Filter im Panel
   ===================================================================== */
@media (max-width: 820px) {
  :root { --nav-hoehe: 72px; }
  body.angemeldet { display: block; }
  .nur-gross { display: none !important; }
  .nur-klein { display: revert !important; }
  .knopf.nur-klein, .icon-knopf.nur-klein { display: inline-flex !important; }
  .seitenleiste { position: static; height: auto; padding: 0; border: 0; background: none; display: contents; }
  .seitenleiste .marke, .leiste-unten { display: none; }
  .hauptnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; flex-direction: row; gap: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    height: calc(var(--nav-hoehe) + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linie);
  }
  .hauptnav a { flex-direction: column; gap: 3px; padding: 6px 0; font-size: 11px; font-weight: 700; color: var(--text-3); background: none !important; border-radius: 0; }
  .hauptnav a svg { width: 24px; height: 24px; }
  .hauptnav a.aktiv { color: var(--akzent); font-weight: 800; }
  .hauptnav a[data-ansicht=start] { order: 1; }
  .hauptnav a[data-ansicht=karten] { order: 2; }
  .hauptnav a.nav-plus { order: 3; }
  .hauptnav a[data-ansicht=sets] { order: 4; }
  .hauptnav a[data-ansicht=grading] { order: 5; }
  .hauptnav a.nav-plus { justify-self: center; width: 54px; height: 54px; margin-top: -22px; padding: 0; border-radius: 16px;
    background: var(--akzent) !important; color: #fff !important; justify-content: center; box-shadow: 0 10px 22px rgba(35, 70, 209, .3); }
  .hauptnav a.nav-plus span { display: none; }
  .hauptnav a.nav-plus svg { width: 26px; height: 26px; stroke-width: 2.6; }
  main { padding: 16px 16px calc(var(--nav-hoehe) + 28px + env(safe-area-inset-bottom)); padding-top: calc(16px + env(safe-area-inset-top)); }
  body:not(.angemeldet) main { padding-bottom: 30px; }
  .ansicht { gap: 14px; }
  h1 { font-size: 28px; }
  .menue { left: 12px; right: 12px; bottom: auto; top: calc(70px + env(safe-area-inset-top)); width: auto; }

  .start-kopf { align-items: center; flex-wrap: nowrap; }
  .start-kopf h1 { font-size: 25px; }
  .start-kopf .datum { font-size: 13px; }
  .wert-karte { grid-template-columns: 1fr; padding: 18px 18px 12px; gap: 6px; border-radius: 20px; }
  .gesamtwert { font-size: 40px; }
  .kurve svg { height: 110px; }
  .kennzahlen { justify-content: space-between; gap: 10px; margin-top: 6px; }
  .kennzahlen b { font-size: 17px; }
  .abschnitt { padding: 16px; }
  .abschnitt-kopf { flex-wrap: wrap; row-gap: 2px; }
  .reiter { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; max-width: none; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter button { padding: 9px 12px; font-size: 13.5px; }
  .logo-ersatz { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .wunsch-knopf, .platzhalter-knopf { width: 30px; }
  .s-info .klein { font-size: 12px; }
  .start-raster { gap: 14px; }
  .bewegung { grid-template-columns: 1fr; gap: 10px; }
  .zuletzt { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .zuletzt > :nth-child(n+5) { display: none; }
  .zuletzt .name { display: none; }

  .filter-panel { display: none; }
  .filter-panel.offen {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--flaeche);
    border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(16, 18, 26, .2);
  }
  .panel-kopf { display: flex !important; justify-content: space-between; align-items: center; }
  .panel-kopf b { font-family: var(--titel); font-stretch: 112%; font-weight: 800; font-size: 18px; }
  .panel-feld { flex-direction: column; align-items: stretch; gap: 5px; }
  .panel-feld select { width: 100%; min-height: 48px; }
  .panel-fertig { min-height: 48px; }
  .suchfeld { flex-basis: 100%; }
  .treffer { margin: -2px 2px -4px; }
  .liste { border-radius: 14px; }
  .zeile.kopfzeile { display: none; }
  .zeile { grid-template-columns: 1fr auto; grid-template-areas: "name wert" "meta preis"; gap: 3px 10px; padding: 10px 14px; }
  .zeile > span { white-space: normal; }
  .zeile .sp-name { grid-area: name; }
  .zeile .sp-wert { grid-area: wert; }
  .zeile .sp-meta { grid-area: meta; display: flex !important; align-items: center; gap: 4px; flex-wrap: wrap; }
  .zeile .sp-preis { grid-area: preis; font-size: 13px; color: var(--text-3); }
  .zeile .sp-anzahl, .zeile .sp-ct, .zeile .sp-psa, .zeile .sp-set, .zeile .sp-nr, .zeile .sp-seltenheit, .zeile .sp-sprache,
  .zeile .sp-grading, .zeile .sp-inseriert, .zeile .sp-update { display: none; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kachel { padding: 13px; gap: 8px; }
  .kachel-logo { height: 40px; }
  .kachel-logo img { max-height: 40px; }
  .werkzeuge select { flex: 1 1 40%; }

  .set-held { padding: 16px; gap: 14px; border-radius: 20px; }
  .ring { width: 84px; height: 84px; }
  .set-held-text h1 { font-size: 21px; }
  .set-held-logo { display: none; }
  .set-liste { padding: 2px 12px; }
  .s-zeile { grid-template-columns: 30px 44px minmax(0, 1fr) auto auto; gap: 9px; }
  .s-zeile .mini { width: 30px; }
  .album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }

  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .felder { grid-template-columns: 1fr 1fr; }
  dialog.gross { width: 100vw; max-width: 100vw; max-height: 100dvh; overflow: auto; }
  .gross-innen { grid-template-columns: 1fr; padding: 48px 14px calc(18px + env(safe-area-inset-bottom)); gap: 14px; }
  .karte3d img { max-height: 48vh; width: auto; max-width: 100%; margin: 0 auto; }
  .karte3d { width: auto; }
  .gross-pfeil { top: 30%; width: 34px; height: 48px; background: rgba(0, 0, 0, .35); color: #fff; }
  .refs { grid-template-columns: repeat(2, 1fr); }
  .editor-bild { width: 90px; }
  dialog.protokoll { width: 100vw; max-width: 100vw; }

  .schnell { padding: 14px; }
  .schnell-felder { grid-template-columns: 1fr 1fr; }
  .feld-set { order: -3; } .feld-sprache { order: -2; }
  .feld-nr { grid-column: 1 / -1; order: -1; }
  .speichern { grid-column: 1 / -1; }
  .feld-anz { grid-column: 1 / -1; }
  .preis-box, .backup-box { padding: 14px 16px; }
  .preis-knoepfe .knopf { flex: 1 1 auto; }
  .b-teile { grid-template-columns: 1fr; }

  .anmeldung { grid-template-columns: 1fr; }
  .anm-buehne { height: 190px; }
  .anm-karte { width: 110px; border-radius: 9px; box-shadow: 0 16px 30px rgba(8, 16, 60, .45), inset 0 0 0 5px rgba(255, 255, 255, .8); }
  .anm-karte.k1 { left: 14%; top: 30%; } .anm-karte.k2 { left: 38%; top: 36%; } .anm-karte.k3 { left: 62%; top: 26%; }
  .anm-inhalt { padding: 22px 16px 30px; gap: 18px; justify-content: flex-start; }
  .anm-box { padding: 16px; }
}
@media (max-width: 360px) {
  .album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gesamtwert { font-size: 34px; }
}
.kennzahlen > * { color: var(--text); }

/* Originale Firmenlogos: unverzerrt, mit eigenem kontrastreichen Hintergrund. */
.firma-logo { display:inline-flex; align-items:center; justify-content:center; width:48px; height:22px; padding:3px; background:#fff; border-radius:3px; vertical-align:middle; flex:none; }
.firma-logo img { display:block; width:100% !important; height:100% !important; object-fit:contain !important; border-radius:0; }
/* Logo im Status-Badge (vorgemerkt / abgegeben) */
.g-status .firma-logo { width:40px; height:18px; padding:2px; border-radius:3px; }
.g-status .firma-logo-beckett, .g-status .firma-logo-bgs { width:48px; }
.g-status .firma-logo-pgs { width:42px; }
.g-status .firma-logo-pi, .g-status .firma-logo-ace { width:20px; height:20px; padding:0; }
.g-status.mit-logo { padding: 2px 3px 2px 7px; gap: 5px; }
.firma-logo-beckett, .firma-logo-bgs { width:58px; }
.firma-logo-pgs { background:#191919; width:50px; }
.firma-logo-pi { background:#050504; width:26px; height:26px; padding:0; }
.firma-logo-ace { width:26px; height:26px; padding:0; }
.slab b.slab-marke { display:inline-flex; align-items:center; justify-content:center; padding:2px 3px; background:#fff; }
.slab b.slab-marke.ohne-logo { background: var(--slab, #6d6f76); color: #fff; padding: 3px 6px; font-size: 11px; }
.slab i { display:inline-flex; align-items:center; }
.slab-gross .firma-logo { width:58px; height:28px; }
.slab-gross .firma-logo-beckett, .slab-gross .firma-logo-bgs { width:70px; }
.slab-gross .firma-logo-pi, .slab-gross .firma-logo-ace { width:32px; height:32px; }
.firma-band:has(.firma-logo) { width:64px; padding:3px; background:#fff; border:1px solid var(--linie); }
.ref-firma { display:flex; align-items:center; justify-content:center; gap:4px; min-height:28px; }
.ref-firma .firma-logo { width:42px; height:20px; padding:2px; }
.ref-firma .firma-logo-bgs { width:50px; }

/* ---------- Grading: Prognose, Verkaufszahlen, Gesamtlauf ---------- */
.g-balken { height: 6px; margin-top: 6px; max-width: 260px; }
.g-balken.drueber span { background: #e8a400; }
.prognose { margin-top: 12px; padding: 11px 13px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); }
.prognose .g-balken { max-width: none; margin: 0 0 8px; }
.prognose p { margin: 0; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.prognose.drueber { border-color: #f0d38a; background: #fff9ea; }
.g-dauer { flex: 0 1 110px !important; }
.ref small { font-size: 11px; color: var(--text-4); font-weight: 600; }
.unsicher { color: var(--orange) !important; }
.tipp-unten { display: inline-flex; align-items: center; gap: 6px; }
.g-statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.g-quote { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.g-quote b { font-family: var(--titel); font-stretch: 112%; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.g-posten { display: flex; flex-direction: column; margin-top: 10px; }
.g-posten-zeile { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; padding: 9px 4px; border: 0;
  border-top: 1px solid var(--linie-2); background: none; cursor: pointer; text-align: left; font-weight: 650; color: var(--text); }
.g-posten-zeile:first-child { border-top: 0; }
.g-posten-zeile:hover { color: var(--akzent); }
.g-posten-zeile b { font-variant-numeric: tabular-nums; }
.g-posten-zeile svg { width: 16px; height: 16px; color: var(--text-4); }
.g-punkt { width: 10px; height: 10px; border-radius: 50%; background: #c9c5bb; }
.g-ok { background: var(--gut); } .g-keine_verkaeufe { background: #9aa1b1; } .g-variante { background: #e8a400; }
.g-keine_id { background: var(--schlecht); } .g-nie { background: #fff; border: 1.5px solid #b9b5ab; } .g-unbekannt { background: #d6d2c9; }
@media (max-width: 820px) { .g-statistik { grid-template-columns: 1fr 1fr; } .g-statistik > :last-child { grid-column: 1 / -1; } }

/* ---------- Varianten ---------- */
.erf-varianten { display: flex; align-items: center; gap: 10px; min-width: 0; grid-column: 1 / -1; order: 5; }
.erf-varianten .chips { flex-wrap: wrap; overflow: visible; }
.erf-varianten > span { font-size: 12px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; flex: none; }
.erf-varianten .chips { flex: 1; min-width: 0; }
.chip.chip-rh[aria-pressed=true] { border-color: transparent; background: linear-gradient(115deg, #ff3ea5, #29d3ff, #ffe600, #2cff8e); background-size: 200% 200%;
  animation: folie 4s linear infinite; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.marke-text.muster { background: #eef1fd; border-color: #cdd6f7; color: var(--akzent-text); }
@media (max-width: 820px) { .erf-varianten { flex-direction: column; align-items: stretch; gap: 6px; order: 1; } .speichern { order: 2; } }

/* ---------- Preisalarme ---------- */
.hauptnav a { position: relative; }
.nav-zahl { font-style: normal; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #e5484d; color: #fff;
  font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.alarm-abschnitt { border-color: #f3c3c4; }
.alarm-k { cursor: pointer; }
.alarm-k.neu, .alarm-zeile.neu { background: #fff4f4; }
.alarm-k.neu { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 10px; }
.alarm-an { color: #c53035; font-weight: 750; font-size: 13px; white-space: nowrap; }
.alarm-knoepfe { display: inline-flex; align-items: center; gap: 4px; }
.alarm-knoepfe .knopf.flach { font-size: 15px; padding: 4px 6px; }
.alarm-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding: 7px 8px; border-radius: 10px; border-top: 1px solid var(--linie-2); }
.alarm-zeile .alarm-an { margin-left: auto; }
.alarm-zeile .alarm-an + .klein { margin-left: 0; }
.alarm-zeile > .klein:not(.alarm-an + .klein) { margin-left: auto; }
.alarm-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.alarm-form select { flex: 1 1 180px; min-height: 38px; }
.alarm-form input { width: 92px; min-height: 38px; }
.alarm-einheit { color: var(--text-3); font-weight: 700; }
@media (max-width: 1100px) and (min-width: 821px) { .nav-zahl { position: absolute; top: 4px; right: 4px; margin: 0; } }
@media (max-width: 820px) {
  .nav-zahl { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; font-size: 11px; }
  .alarm-k .k-rechts { gap: 2px; max-width: 128px; }
  .alarm-k .k-rechts .klein { white-space: normal; }
}

/* ---------- Inserat ---------- */
.zahl-punkt.blau { background: var(--akzent); }
.ins-liste { display: flex; flex-direction: column; }
.ins-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 96px 34px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie-2); }
.ins-zeile:first-child { border-top: 0; }
.ins-zeile .k-mitte, .ins-zeile .mini { cursor: pointer; }
.ins-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-3); font-weight: 650; min-width: 0; }
.ins-feld select, .ins-feld input { min-height: 38px; width: 100%; }
.ins-feld.voll { margin-top: 10px; }
.ins-feld textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; padding: 10px 12px; resize: vertical; }
.ins-suche { margin-top: 12px; }
.ins-treffer { margin-top: 6px; border: 1px solid var(--linie); border-radius: 12px; padding: 0 12px; }
.ins-einst summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
.ins-einst summary::-webkit-details-marker { display: none; }
.ins-einst summary b { font-family: var(--titel); font-stretch: 112%; font-weight: 800; font-size: 18px; }
.ins-einst-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin: 12px 0 8px; }
.ins-einst-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.ins-einst-form .breit { grid-column: 1 / -1; }
.ins-einst-form textarea { font: inherit; font-size: 14px; padding: 8px 10px; resize: vertical; }
.ins-einst-form .knopf { justify-self: start; }
.ins-aktion { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ins-ergebnis .ins-aktion { margin-top: 12px; }
.ins-kopie { display: flex; gap: 8px; }
.ins-kopie input { flex: 1; min-width: 0; }
.ins-fotos { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ins-fotos > div { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-fotos a { position: relative; width: 74px; aspect-ratio: 63 / 88; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); background: var(--flaeche-2); }
.ins-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-fotos i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 10px; text-align: center; background: rgba(15, 17, 22, .7); color: #fff; padding: 1px 0; }
.ins-tabelle { display: flex; flex-direction: column; }
.ins-cm { display: grid; grid-template-columns: minmax(0, 1fr) 120px 80px auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie-2); }
.ins-cm:first-child { border-top: 0; }
.ins-cm b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .ins-zeile { grid-template-columns: 34px minmax(0, 1fr) 92px; grid-template-areas: "bild text weg" "bild zustand preis"; row-gap: 8px; column-gap: 10px; }
  .ins-zeile .mini { grid-area: bild; width: 34px; align-self: start; }
  .ins-zeile .k-mitte { grid-area: text; }
  .ins-zeile [data-ins-weg] { grid-area: weg; justify-self: end; }
  .ins-zeile .ins-feld:not(.ins-preis) { grid-area: zustand; }
  .ins-zeile .ins-preis { grid-area: preis; }
  .ins-einst-form { grid-template-columns: 1fr 1fr; }
  .ins-cm { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .ins-cm > .k-mitte { grid-column: 1 / 3; }
  .ins-cm > b { grid-column: 3; grid-row: 1; }
  .ins-cm > span:nth-child(2) { grid-column: 1; font-size: 13px; color: var(--text-3); }
}
.ins-slab { min-height: 38px; display: flex; align-items: center; }

/* ---------- Einkäufe ---------- */
.einkauf-leiste { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; }
.einkauf-leiste.aktiv { border-color: #b9c6f3; background: linear-gradient(0deg, var(--akzent-hell), var(--akzent-hell)) padding-box; }
.einkauf-leiste.offen { display: block; }
.ek-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 260px; }
.ek-text b { font-size: 16px; font-weight: 800; }
.einkauf-leiste .etikett { font-size: 11px; color: var(--akzent-text); }
.ek-bilanz { display: flex; align-items: baseline; gap: 6px; font-size: 18px; white-space: nowrap; }
.ek-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ek-fortsetzen { min-height: 32px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; max-width: 240px; }
.einkauf-form { display: grid; grid-template-columns: 2fr 1fr 1fr 0.7fr 1fr 1.2fr; gap: 10px 12px; margin-top: 12px; align-items: end; }
.einkauf-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; min-width: 0; }
.einkauf-form input, .einkauf-form select { min-height: 42px; width: 100%; }
.einkauf-form .ek-hilfe, .einkauf-form .ek-knoepfe { grid-column: 1 / -1; margin: 0; }
.ek-bilanz-karte { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.ek-bilanz-karte > .klein { margin: 0; }
.ek-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ek-kpis.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ek-kpis > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ek-kpis b { font-family: var(--titel); font-stretch: 115%; font-weight: 800; font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ek-kpis > div > .klein { font-size: 13px; }
.ek-kpis .plus, .ek-kpis .minus { font-weight: 800; }
.ek-kpis b + .klein.plus, .ek-kpis b + .klein.minus { font-size: 14px; }
.ek-damals { margin: 0; }
.ek-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linie-2); color: inherit; text-decoration: none; }
.ek-zeile:first-child { border-top: 0; }
.ek-zeile:hover .k-name { color: var(--akzent); }
.ek-zeile .k-rechts { min-width: 104px; }
.ek-tops { display: flex; gap: 4px; }
.ek-tops .mini { width: 30px; }
.ek-karte { border-top: 1px solid var(--linie-2); }
.ek-karte:first-child { border-top: 0; }
.ek-karte .k-zeile { border-top: 0; }
.ek-karte.mit-ep { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; align-items: center; }
.ek-ep { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-3); font-weight: 650; }
.ek-ep input { min-height: 36px; width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.ek-ep .klein { text-align: right; font-weight: 750; }
.ek-kopf { align-items: flex-start; }
.ek-kopf p { margin: 4px 0 0; }
.ek-top { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ek-start-bilanz { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; color: var(--text-3); font-size: 14px; }
.ek-start-bilanz .klein { font-size: 13px; }
@media (max-width: 1100px) { .einkauf-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .einkauf-form .ek-name { grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .einkauf-leiste { padding: 12px 14px; }
  .einkauf-form { grid-template-columns: 1fr 1fr; }
  .ek-kpis, .ek-kpis.vier { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ek-kpis b { font-size: 23px; }
  .ek-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .ek-tops { display: none; }
  .ek-karte.mit-ep { grid-template-columns: 1fr; gap: 0; }
  .ek-ep { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 0 10px 54px; font-size: 12.5px; }
  .ek-ep input { width: 96px; min-height: 36px; }
  .ek-ep .klein { min-width: 64px; }
  .ek-kopf .ek-knoepfe { width: 100%; flex-wrap: nowrap; }
  .ek-kopf .ek-knoepfe .knopf { flex: 1 1 auto; min-height: 40px; padding: 7px 10px; font-size: 14px; }
  .ek-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .ek-top .bildkachel-text .name { font-size: 13px; }
  .ek-top .kachel-preise .wert { font-size: 13px; }
}

/* ---------- Sealed ---------- */
.sealed-rahmen { aspect-ratio: 1 / 1; background: #fff; }
.bildrahmen.sealed-rahmen > img { object-fit: contain; padding: 10px; }
.sealed-ersatz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; color: var(--text-4); text-align: center; padding: 10px; }
.sealed-ersatz svg { width: 46%; height: auto; stroke-width: 1.2; color: #b9b5aa; }
.sealed-ersatz small { font-size: 12px; font-weight: 650; }
.sealed-galerie { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sealed-kachel { position: relative; text-decoration: none; }
.sealed-kachel.verkauft .bildrahmen { opacity: .55; }
.sealed-anzahl { top: 8px; right: 8px; }
.sealed-kachel .kachel-preise .klein { gap: 5px; }
.sealed-status { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; white-space: nowrap; background: var(--flaeche-2); color: var(--text-3); border: 1px solid var(--linie); }
.sealed-status.verkaufen { background: #fbefd5; color: var(--orange); border-color: #f1dcae; }
.sealed-status.verkauft { background: var(--gut-hell); color: var(--gut); border-color: #c4e5d2; }
.sealed-mini { aspect-ratio: 1 / 1; background: #fff; }
.sealed-mini img { object-fit: contain !important; padding: 2px; }
.sealed-mini.ohne { display: grid; place-items: center; }
.sealed-mini.ohne svg { width: 70%; height: auto; color: #b9b5aa; stroke-width: 1.5; }
.sealed-neu .abschnitt-kopf { align-items: center; }
.sealed-such { display: grid; grid-template-columns: 160px 200px auto; gap: 10px 12px; align-items: end; margin-bottom: 12px; }
.sealed-such label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.sealed-such input, .sealed-such select { min-height: 42px; width: 100%; }
.sealed-such .knopf { justify-self: start; }
.sealed-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 360px; overflow: auto; padding: 2px; margin-bottom: 6px; }
.sealed-option { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 7px 10px 7px 7px; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 12px; cursor: pointer; color: inherit; }
.sealed-option:hover { border-color: #b9c6f3; }
.sealed-option.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 2px rgba(35, 70, 209, .18); background: var(--akzent-hell); }
.sealed-option img, .sealed-option-ohne { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; display: grid; place-items: center; }
.sealed-option-ohne svg { width: 30px; height: 30px; color: #b9b5aa; stroke-width: 1.5; }
.sealed-option b { display: block; font-size: 13.5px; line-height: 1.3; }
.sealed-option small { color: var(--text-4); font-size: 12px; }
.sealed-detail { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.sealed-buehne .sealed-rahmen { border-radius: 16px; }
.sealed-info h1 { font-size: 28px; margin-bottom: 6px; }
.sealed-info dd a { font-weight: 700; }
.sealed-info .segment { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 16px; max-width: 460px; }
.sealed-verkauft { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin: -6px 0 16px; max-width: 560px; }
.sealed-verkauft label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.sealed-verkauft input { min-height: 42px; width: 100%; }
.wert-teile { color: var(--text-3); font-size: 14px; font-weight: 650; margin: 4px 0 2px; }
[data-sealed-oeffnen] { cursor: pointer; }
@media (max-width: 820px) {
  .sealed-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sealed-reiter button { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .sealed-reiter button .klein { display: none; }
  .sealed-such { grid-template-columns: 1fr 1fr; }
  .sealed-such .knopf { grid-column: 1 / -1; justify-self: stretch; }
  .sealed-wahl { grid-template-columns: 1fr; max-height: 300px; }
  .sealed-detail { grid-template-columns: 1fr; gap: 16px; }
  .sealed-buehne { max-width: 260px; margin: 0 auto; width: 100%; }
  .sealed-verkauft { grid-template-columns: 1fr 1fr; }
  .sealed-verkauft .knopf { grid-column: 1 / -1; }
}
a.k-zeile { text-decoration: none; color: inherit; }

/* ---------- Öffnen (Opening) ---------- */
.sealed-status.geoeffnet { background: var(--akzent-hell); color: var(--akzent-text); border-color: #c9d3f6; }
.sealed-info .segment.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; margin-bottom: 10px; }
.sealed-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.sealed-aktionen .knopf svg { width: 18px; height: 18px; }
.ek-titel { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ek-produkt .mini { width: 56px; border-radius: 10px; }
.ek-markt { margin: 0; }
.status.verkauft-badge { background: var(--gut-hell); color: var(--gut); }

/* ---------- Verkauft ---------- */
.vk-pos { display: grid; grid-template-columns: 40px minmax(0, 1fr) 76px 112px 112px 34px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie-2); }
.vk-pos:first-child { border-top: 0; }
.vk-pos input { text-align: right; font-variant-numeric: tabular-nums; }
.vk-eins { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-variant-numeric: tabular-nums; }
.vk-unten { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 14px; }
.vk-kopf { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.vk-kopf .vk-breit { grid-column: span 2; }
.vk-summe { border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; background: var(--flaeche-2); display: flex; flex-direction: column; gap: 4px; }
.vk-summe-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.vk-summe-zeile small { color: var(--text-4); font-weight: 600; }
.vk-summe-zeile.leise { color: var(--text-3); }
.vk-summe-zeile.fett { font-weight: 800; border-top: 1px solid var(--linie); padding-top: 4px; }
.vk-summe-zeile.gewinn { border-top: 1px solid var(--linie); padding-top: 6px; margin-top: 2px; font-weight: 800; align-items: baseline; }
.vk-summe-zeile.gewinn b { font-family: var(--titel); font-stretch: 115%; font-size: 22px; }
.vk-summe .klein { margin: 4px 0 0; }
.vk-filter { display: flex; gap: 10px 12px; align-items: end; flex-wrap: wrap; }
.vk-filter label { display: flex; flex-direction: column; gap: 3px; }
.vk-filter select { min-height: 40px; min-width: 120px; }
.vk-eintrag { border-top: 1px solid var(--linie-2); }
.vk-eintrag:first-child { border-top: 0; }
.vk-eintrag .vk-zeile { border-top: 0; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; font: inherit; }
.vk-eintrag.offen .vk-zeile .k-name { color: var(--akzent); }
.vk-detail { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.vk-fakten { display: grid; grid-template-columns: repeat(4, auto 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.vk-fakten dt { color: var(--text-3); font-weight: 650; }
.vk-fakten dd { margin: 0; font-variant-numeric: tabular-nums; }
.vk-detail-liste { display: flex; flex-direction: column; }
.vk-hinweis { margin: -4px 0 0; }
.vk-detail-pos { display: grid; grid-template-columns: 40px minmax(0, 1fr) repeat(4, 96px); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.vk-detail-pos:first-child { border-top: 0; }
.vk-detail-pos:has(input) { grid-template-columns: 40px minmax(0, 1fr) 120px 120px; }
.vk-bild { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.vk-zahl { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.vk-zahl .klein { font-size: 11.5px; }
.vk-einst-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.vk-geb, .vk-geb-kopf { display: grid; grid-template-columns: 160px 110px 110px auto; gap: 10px; align-items: center; }
.vk-geb-kopf { font-size: 12px; color: var(--text-3); font-weight: 650; }
.vk-geb input[type=text] { min-height: 38px; width: 100%; text-align: right; }
.vk-geb-std { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.vk-geb-std label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-3); font-weight: 650; }
.vk-geb-std input { min-height: 38px; width: 140px; text-align: right; }
.vk-einst-form .knopf { align-self: flex-start; }
@media (max-width: 1100px) {
  .vk-unten { grid-template-columns: 1fr; }
  .vk-fakten { grid-template-columns: repeat(2, auto 1fr); }
}
@media (max-width: 820px) {
  .vk-pos { grid-template-columns: 34px minmax(0, 1fr) 1fr 1fr; grid-template-areas: "bild text text weg" "bild anz preis einstand"; row-gap: 8px; column-gap: 10px; }
  .vk-pos .mini { grid-area: bild; width: 34px; align-self: start; }
  .vk-pos .k-mitte { grid-area: text; }
  .vk-pos [data-vk-weg] { grid-area: weg; justify-self: end; }
  .vk-pos .vk-anz { grid-area: anz; }
  .vk-pos .vk-preis { grid-area: preis; }
  .vk-pos .vk-einstand { grid-area: einstand; }
  .vk-kopf { grid-template-columns: 1fr 1fr; }
  .vk-kopf .vk-breit { grid-column: 1 / -1; }
  .vk-filter label { flex: 1 1 30%; }
  .vk-filter select { min-width: 0; width: 100%; }
  .vk-filter .knopf { flex: 1 1 100%; justify-content: center; }
  .vk-fakten { grid-template-columns: auto 1fr; }
  .vk-detail { padding: 12px; }
  .vk-detail-pos { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); row-gap: 6px; column-gap: 8px; }
  .vk-detail-pos > .vk-bild { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .vk-detail-pos > .vk-bild .mini { width: 34px; }
  .vk-detail-pos > .k-mitte { grid-column: 2 / -1; grid-row: 1; }
  .vk-detail-pos > .vk-zahl, .vk-detail-pos > .ins-feld { grid-row: 2; }
  .vk-detail-pos > .vk-zahl b { font-size: 13.5px; }
  .vk-detail-pos:has(input) { grid-template-columns: 34px 1fr 1fr; }
  .vk-geb, .vk-geb-kopf { grid-template-columns: minmax(0, 1fr) 70px 70px 54px; gap: 8px; }
  .vk-geb b { font-size: 13.5px; }
  .ek-titel { gap: 10px; }
  .ek-produkt .mini { width: 44px; }
}

/* ---------- Sonstige Kosten ---------- */
.kosten-zeile { grid-template-columns: minmax(0, 1fr) auto 34px; cursor: default; }
.kosten-zeile:hover .k-name { color: inherit; }
.kosten-form { grid-template-columns: 2fr 1fr 1fr 1fr; margin-top: 14px; }
@media (max-width: 820px) { .kosten-form { grid-template-columns: 1fr 1fr; } }

/* ---------- Hobby-Bilanz ---------- */
.hobby-bilanz { gap: 12px; }
.hb-oben { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 24px; align-items: start; }
.hb-ergebnis { display: flex; flex-direction: column; gap: 2px; }
.hb-ergebnis b { font-family: var(--titel); font-stretch: 120%; font-weight: 800; font-size: 40px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hb-teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-teile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-teile b { font-family: var(--titel); font-stretch: 112%; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.hb-monate { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding-bottom: 2px; }
.hb-monat { flex: 1 0 44px; max-width: 90px; display: grid; grid-template-rows: 64px 64px auto auto; text-align: center; }
.hb-oben-h, .hb-unten-h { display: flex; justify-content: center; }
.hb-oben-h { align-items: flex-end; border-bottom: 1px solid var(--linie); }
.hb-unten-h { align-items: flex-start; }
.hb-monat i { display: block; width: 60%; border-radius: 4px; }
.hb-monat i.ein { background: #1a7f4b; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hb-monat i.aus { background: #c0392b; opacity: .8; border-top-left-radius: 0; border-top-right-radius: 0; }
.hb-name { font-size: 11.5px; color: var(--text-3); font-weight: 650; margin-top: 4px; }
.hb-kasse { font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.hb-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hb-legende i.ein { background: #1a7f4b; } .hb-legende i.aus { background: #c0392b; }
.hobby-bilanz > .klein { margin: 0; }
@media (max-width: 1100px) { .hb-oben { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 820px) { .hb-teile { grid-template-columns: 1fr 1fr; } .hb-teile > div:first-child { grid-column: 1 / -1; } .hb-ergebnis b { font-size: 32px; } }

/* ---------- Grading-Einsendungen ---------- */
.es-kopf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.es-wahl { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie-2); cursor: pointer; }
.es-wahl:first-child { border-top: 0; }
.es-wahl input { width: 18px; height: 18px; }
.es-zeile { grid-template-columns: 40px minmax(0, 1fr) auto; }
.es-zeile .firma-band { width: 40px; height: 40px; }
.es-karte { grid-template-columns: 40px minmax(0, 1fr) 90px 110px; cursor: default; }
.es-note input { text-align: center; font-weight: 750; }
.es-statistik { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.es-firma { border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--flaeche-2); }
.es-firma-kopf { display: flex; align-items: center; gap: 10px; }
.es-logo { display: inline-flex; height: 24px; align-items: center; }
.es-logo img { height: 22px; width: auto; max-width: 90px; object-fit: contain; }
.grading-reiter { max-width: none; }
.es-firma-kopf .klein { margin-left: auto; }
.es-verteilung { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 74px; align-items: end; }
.es-verteilung span { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; position: relative; }
.es-verteilung i { align-self: end; display: block; background: var(--akzent); border-radius: 4px 4px 0 0; min-height: 2px; }
.es-verteilung small { font-size: 11px; color: var(--text-3); font-weight: 700; }
.es-verteilung em { position: absolute; top: 0; left: 0; right: 0; font-style: normal; font-size: 11px; font-weight: 750; color: var(--text-2); }
.es-zahlen { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 13.5px; }
.es-zahlen dt { color: var(--text-3); font-weight: 650; }
.es-zahlen dd { margin: 0; font-variant-numeric: tabular-nums; }
.ev-box { border: 1px solid #c9d3f6; background: var(--akzent-hell); border-radius: 12px; padding: 10px 12px; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.ev-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ev-kopf b { font-weight: 800; }
.ev-box .klein { margin: 0; }
.ev-felder { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-felder label { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-3); font-weight: 650; }
.ev-felder input { width: 90px; min-height: 34px; text-align: right; }
@media (max-width: 820px) {
  .grading-reiter { overflow-x: auto; grid-auto-columns: max-content; }
  .grading-reiter button { padding-left: 10px; padding-right: 10px; }
  .es-kopf { grid-template-columns: 1fr 1fr; }
  .es-karte { grid-template-columns: 34px minmax(0, 1fr) 70px; }
  .es-karte .k-rechts { grid-column: 2 / -1; }
}

/* ---------- Tauschen ---------- */
.tz-mitmachen .schalter { margin: 4px 0; }
.tz-partner { border: 1px solid var(--linie); border-radius: 14px; padding: 12px 14px; margin-top: 10px; background: var(--flaeche-2); }
.tz-partner-kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.tz-partner-kopf b { font-size: 17px; }
.tz-partner-kopf .knopf { margin-left: auto; }
.tz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tz-spalten h3 { margin: 6px 0 4px; display: flex; justify-content: space-between; gap: 8px; }
.tz-zeile { cursor: default; }
.tz-zeile .k-rechts { flex-direction: row; align-items: center; gap: 8px; display: flex; }
.tz-wert { width: 86px; min-height: 34px; text-align: right; }
.tz-anz { width: 56px; min-height: 34px; text-align: right; }
.tz-kopf { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 12px; }
.tz-frei { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; margin-top: 10px; }
.tz-frei input { min-height: 40px; }
.knopf.aktiv-knopf { background: var(--akzent-hell); border-color: #b9c6f3; color: var(--akzent-text); }
@media (max-width: 820px) {
  .tz-spalten { grid-template-columns: 1fr; gap: 10px; }
  .tz-kopf { grid-template-columns: 1fr 1fr; }
}

/* ---------- Steuer-Ampel ---------- */
.steuer-oben { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.steuer-ampel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.steuer-ampel > i { width: 18px; height: 18px; border-radius: 50%; margin-top: 6px; box-shadow: 0 0 0 4px rgba(0,0,0,.04); }
.steuer-ampel.gruen > i { background: #1a7f4b; } .steuer-ampel.gelb > i { background: #e0a400; } .steuer-ampel.rot > i { background: #c0392b; }
.steuer-ampel b { font-family: var(--titel); font-stretch: 115%; font-weight: 800; font-size: 26px; display: block; }
.steuer-ampel .klein { display: block; }
.steuer-balken { margin-top: 8px; }
.steuer-ampel.gelb .steuer-balken span { background: #e0a400; } .steuer-ampel.rot .steuer-balken span { background: #c0392b; }
.steuer-pf { display: flex; flex-direction: column; gap: 6px; }
.steuer-pf-z { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linie); font-size: 13.5px; }
.steuer-pf-z small { grid-column: 2; font-size: 12px; font-weight: 700; }
.steuer-pf-z.gruen small { color: var(--gut); } .steuer-pf-z.gelb { background: var(--gelb-hell); } .steuer-pf-z.gelb small { color: var(--gelb-text); }
.steuer-pf-z.rot { background: var(--schlecht-hell); } .steuer-pf-z.rot small { color: var(--schlecht); }
.steuer > .klein { margin: 6px 0 0; }
@media (max-width: 1100px) { .steuer-oben { grid-template-columns: 1fr; } }

/* =====================================================================
   Kamera-Erfassung
   ===================================================================== */
.kamera-start svg { width: 19px; height: 19px; }
body.kamera-offen { overflow: hidden; }
.kamera { position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff; overflow: hidden;
  font-family: var(--schrift); -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.kamera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamera.blitz::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.35); pointer-events: none; }
.kam-ebene { position: absolute; inset: 0; display: flex; flex-direction: column; }
.kam-buehne { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; padding: 6px 0 10px; }
.kam-rahmen { position: relative; height: min(100cqh - 24px, 84cqw * 1.397); aspect-ratio: 63 / 88; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0,0,0,.42); pointer-events: none; }
.kam-rahmen i { position: absolute; width: 28px; height: 28px; border: 3.5px solid #fff; }
.kam-rahmen i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.kam-rahmen i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.kam-rahmen i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.kam-rahmen i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.kam-ring { position: absolute; left: 0; right: 0; bottom: -10px; height: 4px; border-radius: 2px; background: #fff;
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .14s linear; opacity: .9; }
.kam-oben { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 6px; }
.kam-rund { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff;
  font-size: 20px; display: grid; place-items: center; cursor: pointer; }
.kam-rund[aria-pressed=false] { opacity: .55; }
.kam-rund[aria-pressed=true][data-kam=licht] { background: #ffe58a; color: #000; }
.kam-zaehler { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.kam-zaehler b { font-family: var(--titel); font-stretch: 112%; font-size: 18px; }
.kam-zaehler span { font-family: var(--mono); font-size: 13px; opacity: .85; }
.kam-ziel { position: relative; z-index: 1; align-self: center; max-width: 90%; font-size: 13px; height: 26px; line-height: 18px; background: rgba(0,0,0,.5);
  padding: 4px 12px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kam-status { text-align: center; font-size: 15px; font-weight: 650; height: 42px; line-height: 21px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.kam-status.gut { color: #8ff0b9; }
.kam-status.fehler { color: #ffb4a8; }
.kam-status.warn { color: #ffe08a; }
.kam-status.arbeit::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kam-dreh .7s linear infinite; }
@keyframes kam-dreh { to { transform: rotate(360deg); } }
.kam-unten { position: relative; z-index: 1; padding: 0 14px calc(env(safe-area-inset-bottom) + 14px);
  display: flex; flex-direction: column; gap: 10px; }
.kam-liste { display: flex; flex-direction: column; gap: 6px; height: 52px; }
.kam-liste.leer, .kam-ziel.leer { visibility: hidden; }
.kam-eintrag { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 12px; padding: 5px 6px 5px 5px; }
.kam-eintrag img, .kam-eintrag .bild-leer { width: 30px; height: 42px; border-radius: 4px; object-fit: cover; flex: none; }
.kam-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kam-name b, .kam-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kam-name small { opacity: .8; font-size: 12.5px; }
.kam-rueck { border: 0; background: rgba(255,255,255,.16); color: #fff; width: 38px; height: 38px; border-radius: 10px; font-size: 18px; cursor: pointer; }
.kam-varianten { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
.kam-varianten > :first-child { margin-left: auto; }
.kam-varianten > :last-child { margin-right: auto; }
.kam-varianten .chip { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; white-space: nowrap; }
.kam-varianten .chip[aria-pressed=true] { background: #fff; color: #000; }
.kam-knoepfe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.kam-schalter { justify-self: center; min-width: 64px; padding: 0 14px; height: 40px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.6);
  background: transparent; color: #fff; font-weight: 750; cursor: pointer; }
.kam-schalter[aria-pressed=true] { background: #fff; color: #000; border-color: #fff; }
.kam-schalter:disabled { opacity: .35; }
.kam-ausloeser { width: 70px; height: 70px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 4px #000; cursor: pointer; }
.kam-ausloeser:active { background: #fff; }
.kam-frage { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; background: var(--flaeche); color: var(--text);
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px); box-shadow: 0 -8px 30px rgba(0,0,0,.35);
  max-height: 80vh; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.kam-frage-kopf { display: flex; flex-direction: column; margin-bottom: 12px; }
.kam-frage-kopf b { font-family: var(--titel); font-size: 18px; }
.kam-frage-kopf small { color: var(--orange); }
.kam-frage-inhalt { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.kam-frage-bild img, .kam-frage-bild .bild-leer { width: 96px; aspect-ratio: 63 / 88; border-radius: 6px; object-fit: cover; display: grid; place-items: center; }
.kam-frage-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-content: start; }
.kam-frage-felder > .klein { grid-column: 1 / -1; }
.kam-frage-felder label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-3); gap: 3px; }
.kam-frage-felder input, .kam-frage-felder select { min-height: 40px; border: 1px solid var(--linie); border-radius: 10px; padding: 6px 10px;
  background: var(--flaeche); color: var(--text); font-size: 16px; min-width: 0; width: 100%; }
.kam-frage-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.kam-frage-knoepfe .haupt { flex: 1; max-width: 220px; }
@media (min-width: 821px) {
  .kam-unten { width: min(640px, 100%); align-self: center; }
  .kam-frage { left: 50%; transform: translateX(-50%); width: 520px; bottom: 16px; border-radius: 20px; }
}