/* Münzverwaltung – Gestaltung. Eigene Schriften, light-dark(), keine externen Anfragen. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: light-dark(#f5f0e6, #0e0d0a);
  --surface: light-dark(#fffdf8, #1a1812);
  --surface-2: light-dark(#efe8d8, #25221a);
  --surface-glass: light-dark(rgb(255 252 244 / .72), rgb(22 20 15 / .72));
  --text: light-dark(#1d1a14, #f4eedd);
  --muted: light-dark(#6a6252, #b3a98f);
  --border: light-dark(rgb(70 50 15 / .13), rgb(255 240 200 / .11));
  --accent: light-dark(#8a5d08, #e6bc5c);
  --accent-2: light-dark(#c4902c, #b88a2c);
  --accent-text: light-dark(#fffaf0, #1b1405);
  --danger: light-dark(#a3302a, #f08a82);
  --ok: light-dark(#2a6a43, #86d3a1);
  --warn-bg: light-dark(#fbf0cf, #35290f);
  --warn-text: light-dark(#6a510b, #efd68a);
  --shadow-1: 0 1px 2px light-dark(rgb(60 40 10 / .08), rgb(0 0 0 / .4));
  --shadow-2: 0 10px 30px -14px light-dark(rgb(70 45 10 / .35), rgb(0 0 0 / .7));
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.4, .5, 1);
  --radius: 20px;
  --bar-h: 64px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font: 16px/1.55 var(--sans); font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased;
}
/* Hintergrund als eigene Ebene: ruckelfrei, auch auf dem Handy */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 85% -8%, light-dark(rgb(214 160 60 / .26), rgb(214 160 60 / .14)), transparent 65%),
    radial-gradient(700px 480px at -10% 28%, light-dark(rgb(150 110 220 / .10), rgb(120 90 210 / .09)), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, light-dark(rgb(90 150 120 / .10), rgb(70 140 110 / .07)), transparent 60%);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; font-optical-sizing: auto; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
h2 { font-size: 1.3rem; }
a { color: var(--accent); text-underline-offset: 3px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .small { font-size: .875rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- Kopfleiste & Navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid var(--border); }
/* Der Weichzeichner liegt auf einer eigenen Ebene: Direkt am Element würde er die untere Navigation am Kopf festhalten. */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.topbar-inner { max-width: 1120px; margin: auto; padding: 10px 20px; display: flex; align-items: center; gap: 8px 20px; }
.brand { font: 600 1.2rem var(--serif); color: var(--text); text-decoration: none; display: flex; gap: 10px; align-items: center; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; transition: transform .6s var(--spring); }
.brand:hover img { transform: rotate(360deg) scale(1.08); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; transition: background .2s, color .2s, transform .15s; }
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a:active { transform: scale(.96); }
.nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.who { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }

main { max-width: 1120px; margin: auto; padding: 28px 20px 80px; display: grid; gap: 22px; align-content: start; view-transition-name: page; }

/* ---------- Buttons & Formulare ---------- */
button, .button {
  font: 500 .95rem var(--sans); padding: 9px 16px; min-height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-1); transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
button:hover, .button:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
button:active, .button:active { transform: scale(.96); }
button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  border-color: transparent; color: var(--accent-text); font-weight: 600;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .35);
  position: relative; overflow: hidden;
}
button.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
button.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent)); }
button.primary:hover::after { transform: translateX(120%); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
button:disabled { opacity: .5; cursor: default; transform: none; }

label.field { display: grid; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); min-width: 0; letter-spacing: .01em; }
input, select, textarea {
  font-size: 1rem; font-family: inherit; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .04)); color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height: 96px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.form-grid .wide { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.error { color: var(--danger); font-size: .9rem; margin: 0; animation: shake .4s; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.filters .search { grid-column: span 2; }
.filter-more { grid-column: 1 / -1; }
.filter-more > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::before { content: "▸"; transition: transform .25s var(--spring); }
.filter-more[open] > summary::before { transform: rotate(90deg); }
.filters-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 701px) { .filter-more > summary { display: none; } }

/* ---------- Karten & Flächen ---------- */
.panel, .tile, .row, .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1), var(--shadow-2);
}
.panel { padding: 22px; display: grid; gap: 16px; }
.stack-form { display: grid; gap: 14px; min-width: 0; }
.stack-form p { margin: 0; }
.notice { background: var(--warn-bg); color: var(--warn-text); padding: 12px 16px; border-radius: 14px; font-size: .9rem; animation: rise .4s var(--ease) backwards; }
.notice.ok { background: var(--surface-2); color: var(--text); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--surface-2); font-size: .76rem; font-weight: 500; color: var(--muted); }
.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile { padding: 18px 20px; position: relative; overflow: hidden; }
.tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%); }
.tile .num { font: 600 clamp(1.6rem, 4vw, 2.1rem)/1.1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .lbl { color: var(--muted); font-size: .84rem; margin-top: 4px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; perspective: 700px; }
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card:active { transform: translateY(-1px) scale(.985); }
.card-img { aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 68%), var(--surface-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.card:hover .card-img img { transform: scale(1.06); }
.card-img .coin { --s: 118px; }
.card-img .bill { --s: 156px; }
.card:hover .coin { transform: rotateY(24deg) rotateZ(-4deg) scale(1.07); }
.card:hover .bill { transform: rotate(-3deg) scale(1.06); }
.card-body { padding: 12px 14px 14px; display: grid; gap: 5px; }
.card-title { font: 600 1rem var(--serif); letter-spacing: -.005em; }

.list { display: grid; gap: 10px; }
.row { padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; transition: transform .25s var(--ease), border-color .2s; }
.row:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.row.suggested { border-color: var(--accent); }
.row-main { flex: 1 1 240px; min-width: 0; }
.row-title { font-weight: 600; }
.row .coin { --s: 54px; } .row .bill { --s: 78px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); border: 1.5px dashed var(--border); border-radius: var(--radius); display: grid; gap: 14px; justify-items: center; }
.empty svg { width: 120px; height: auto; animation: float 4s ease-in-out infinite; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }

/* ---------- Münzen und Scheine ---------- */
.coin {
  --s: 76px; --rim-a: #f7e29a; --rim-b: #b99231; --core-a: #fbeaa8; --core-b: #cfa43f; --ink: #4d3a0a;
  width: var(--s); height: var(--s); border-radius: 50%; position: relative; display: grid; place-items: center; flex: none; isolation: isolate;
  background: conic-gradient(from 200deg, var(--rim-a), var(--rim-b), var(--rim-a) 28%, var(--rim-b) 52%, var(--rim-a) 78%, var(--rim-b));
  box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 calc(var(--s) * .1) calc(var(--s) * .2) calc(var(--s) * -.06) rgb(0 0 0 / .55), inset 0 1px 1px rgb(255 255 255 / .65);
  transition: transform .6s var(--spring);
}
.coin::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 32% 28%, var(--core-a), var(--core-b));
  box-shadow: inset 0 1px 2px rgb(255 255 255 / .55), inset 0 -2px 4px rgb(0 0 0 / .28), 0 0 0 1px rgb(0 0 0 / .2); }
.coin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .6) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1s var(--ease); }
.coin:hover::after, .card:hover .coin::after, .row:hover .coin::after { background-position: -30% 0; }
.coin-label { display: grid; text-align: center; line-height: 1; color: var(--ink); text-shadow: 0 1px 0 rgb(255 255 255 / .45); }
.coin-label b { font: 700 calc(var(--s) * .36)/.95 var(--serif); letter-spacing: -.02em; }
.coin-label i { font: 600 calc(var(--s) * .115)/1 var(--sans); font-style: normal; letter-spacing: .1em; opacity: .8; margin-top: calc(var(--s) * .03); }
.coin[data-cents="1"], .coin[data-cents="2"], .coin[data-cents="5"] { --rim-a: #f2b998; --rim-b: #9a5733; --core-a: #f5c2a1; --core-b: #b4673e; --ink: #4a2411; }
.coin[data-cents="100"] { --core-a: #f6f8fa; --core-b: #a5adb7; --ink: #2b3036; }
.coin[data-cents="200"] { --rim-a: #f6f8fa; --rim-b: #a0a8b3; }

.bill {
  --s: 104px; --n-a: #c2c9c9; --n-b: #818f8f;
  width: var(--s); aspect-ratio: 2 / 1.1; border-radius: calc(var(--s) * .07); position: relative; display: grid; place-items: center; flex: none; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--n-a), var(--n-b));
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 calc(var(--s) * .08) calc(var(--s) * .16) calc(var(--s) * -.05) rgb(0 0 0 / .5), inset 0 1px 1px rgb(255 255 255 / .5);
  transition: transform .6s var(--spring);
}
.bill::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 82% 26%, rgb(255 255 255 / .2) 0 2px, transparent 2px 9px), linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .3) 50%, transparent 60%); }
.bill::after { content: ""; position: absolute; inset: 7%; border: 1px solid rgb(255 255 255 / .5); border-radius: calc(var(--s) * .04); }
.bill-label { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 3px; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.bill-label b { font: 700 calc(var(--s) * .3)/1 var(--serif); }
.bill-label i { font: 600 calc(var(--s) * .13)/1 var(--sans); font-style: normal; }
.bill[data-cents="500"] { --n-a: #c3c9c9; --n-b: #7d8a8a; }
.bill[data-cents="1000"] { --n-a: #f3908b; --n-b: #bb403b; }
.bill[data-cents="2000"] { --n-a: #8db3f0; --n-b: #3a68c0; }
.bill[data-cents="5000"] { --n-a: #f6b57c; --n-b: #d4701f; }
.bill[data-cents="10000"] { --n-a: #93d6a8; --n-b: #3a8f5b; }
.bill[data-cents="20000"] { --n-a: #ecd187; --n-b: #aa862a; }
.bill[data-cents="50000"] { --n-a: #c8a6e6; --n-b: #7747a5; }

/* ---------- Auswahl-Chips (Schnellerfassung) ---------- */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips.two { grid-template-columns: 1fr 1fr; } .chips.five { grid-template-columns: repeat(5, 1fr); }
.chip { min-height: 50px; font-weight: 600; padding: 6px; transition: transform .25s var(--spring), background .2s, color .2s, border-color .2s; }
.chip[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); border-color: transparent; color: var(--accent-text); transform: scale(1.04); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shot { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: grid; background: var(--surface); }
.shot-view { aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: .85rem; }
.shot-view img { width: 100%; height: 100%; object-fit: cover; animation: pop .5s var(--spring); }
.shot .actions { padding: 8px; flex-wrap: nowrap; }
.shot .actions > * { flex: 1; padding: 6px; }
.choice { display: grid; gap: 4px; justify-items: start; justify-content: stretch; align-content: start; text-align: left; padding: 14px; height: auto; border-radius: 16px; }
.success-mark { width: 64px; height: 64px; }
.success-mark circle { fill: color-mix(in srgb, var(--ok) 16%, transparent); stroke: var(--ok); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s var(--ease) forwards; }
.success-mark path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .45s .45s var(--ease) forwards; }

/* ---------- Stück-Seite ---------- */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.flip { all: unset; display: block; width: 248px; aspect-ratio: 1; perspective: 900px; cursor: pointer; border-radius: 28px; }
.flip:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--spring); }
.flip.is-back .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 28px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 68%), var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.flip-face.back { transform: rotateY(180deg); }
.flip-face img { width: 100%; height: 100%; object-fit: cover; }
.flip-face .coin { --s: 168px; } .flip-face .bill { --s: 204px; }
.flip-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 12px; border-radius: 99px; background: var(--surface-glass); color: var(--muted); backdrop-filter: blur(8px); white-space: nowrap; }
.hero-text { display: grid; gap: 10px; min-width: 0; }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.photo { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); }
.photo-view { aspect-ratio: 1; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: .9rem; }
.photo-view img { width: 100%; height: 100%; object-fit: cover; }
.photo-foot { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.history { display: grid; }
.history-row { display: grid; grid-template-columns: 7rem 7rem 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.history-row:first-child { border-top: 0; }
.spark-wrap { position: relative; height: 84px; }
.spark { width: 100%; height: 100%; overflow: visible; display: block; }
.spark-dot { position: absolute; right: 0; width: 13px; height: 13px; border-radius: 50%; translate: 50% -50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); opacity: 0; animation: pop .5s 1.4s var(--spring) forwards; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6000; stroke-dashoffset: 6000; animation: draw 1.4s .2s var(--ease) forwards; }
.spark .s1 { stop-color: var(--accent); stop-opacity: .35; } .spark .s2 { stop-color: var(--accent); stop-opacity: 0; }
.spark .area { fill: url(#sparkfill); opacity: 0; animation: fade .8s .9s forwards; }

/* ---------- Rechtliche Seiten und Fußzeile ---------- */
.grow { flex: 1; }
.legal { max-width: 760px; }
.legal h3 { font: 600 1rem var(--sans); margin: 8px 0 -6px; }
.legal p { margin: 0; }
.legal code { font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.footer { max-width: 1120px; margin: 0 auto; padding: 4px 20px 28px; display: flex; gap: 20px; justify-content: center; font-size: .85rem; }
.footer a { color: var(--muted); text-decoration: none; padding: 8px 4px; }
.footer a:hover, .footer a[aria-current] { color: var(--text); text-decoration: underline; }

/* ---------- Anmeldung ---------- */
.login-wrap { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: min(420px, 100%); display: grid; gap: 22px; justify-items: center; text-align: center; }
.login-box .coin { --s: 118px; animation: float 4.5s ease-in-out infinite; }
.login { width: 100%; text-align: left; }
.login-hero { display: grid; gap: 6px; }
.secret { font-family: ui-monospace, Menlo, monospace; background: var(--surface-2); padding: 10px 12px; border-radius: 12px; word-break: break-all; user-select: all; }

/* ---------- Dialog, Toast, Laden ---------- */
dialog { border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); padding: 24px; width: min(580px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); animation: dialog-in .45s var(--spring); }
dialog::backdrop { background: rgb(14 10 4 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s both; }
dialog.closing { animation: dialog-out .2s var(--ease) forwards; }
dialog.closing::backdrop { animation: fade-out .2s forwards; }
dialog form, dialog .stack { display: grid; gap: 16px; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px) scale(.96); background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 14px; opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); z-index: 30; font-weight: 500; box-shadow: 0 14px 34px -10px rgb(0 0 0 / .5); transition: opacity .25s, transform .45s var(--spring); }
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.skeleton { border-radius: var(--radius); min-height: 90px; background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface) 70%, var(--surface-2)) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton.tall { min-height: 190px; } .skeleton.line { min-height: 36px; width: 55%; border-radius: 10px; }

/* ---------- Bewegung ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.reveal { animation: rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }

::view-transition-old(page) { animation: fade-out .12s ease-in both; }
::view-transition-new(page) { animation: fade .2s ease-out both; }

/* ---------- Handy ---------- */
@media (pointer: coarse), (max-width: 700px) {
  button, .button, select, input:not([type=checkbox]):not([type=radio]) { min-height: 46px; }
}
@media (max-width: 700px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  main { padding: 18px 14px 28px; gap: 18px; }
  .topbar { position: sticky; padding-top: env(safe-area-inset-top); }
  .topbar-inner { padding: 8px 14px; gap: 8px; justify-content: space-between; }
  .brand { font-size: 1.1rem; min-width: 0; }
  .who { min-width: 0; font-size: .85rem; }
  .who-name { display: none; }
  .who button { flex: none; padding: 4px 12px; }

  .nav { --n: 4; --idx: 0; position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; flex: none; gap: 0;
    height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom);
    background: var(--surface-glass); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-top: 1px solid var(--border); }
  .nav::before { content: ""; position: absolute; top: 7px; left: 0; width: calc(100% / var(--n)); height: calc(var(--bar-h) - 14px); padding: 0 8px; background-clip: content-box;
    border-radius: 18px; background-color: color-mix(in srgb, var(--accent) 17%, transparent); transform: translateX(calc(var(--idx) * 100%)); transition: transform .5s var(--spring); }
  .nav a { flex: 1; position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: var(--bar-h); padding: 0 2px; border-radius: 0; font-size: .72rem; font-weight: 600; background: none !important; }
  .nav a svg { width: 24px; height: 24px; transition: transform .4s var(--spring); }
  .nav a[aria-current="page"] { color: var(--accent); } .nav a[aria-current="page"] svg { transform: translateY(-1px) scale(1.12); }

  .page-head > .actions { width: 100%; } .page-head .actions > * { flex: 1; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .tile { padding: 14px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-img .coin { --s: 92px; } .card-img .bill { --s: 128px; }
  .card-body { padding: 10px 12px 12px; } .card-title { font-size: .94rem; }
  .filters, .form-grid, .filters-inner { grid-template-columns: 1fr 1fr; }
  .form-grid .wide { grid-column: 1 / -1; }
  .panel { padding: 18px 16px; }
  .row { padding: 12px; } .row .actions { width: 100%; } .row .actions > * { flex: 1; }

  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .hero-text { justify-items: center; }
  .flip { width: min(260px, 72vw); }
  .photos { grid-template-columns: 1fr; gap: 10px; }
  .photo { flex-direction: row; } .photo-view { width: 96px; flex: none; }
  .photo-foot { flex: 1; flex-direction: column; align-items: stretch; justify-content: center; }
  .photo-foot .actions { flex-wrap: nowrap; } .photo-foot .actions > * { flex: 1; }
  .history-row { grid-template-columns: 5.5rem 1fr; } .history-row span:last-child { grid-column: 1 / -1; margin-top: -6px; }

  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 92dvh; overflow-y: auto; border-bottom: 0;
    padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); animation: sheet-in .5s var(--spring); }
  dialog::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--border); margin: 0 auto 14px; }
  dialog.closing { animation: sheet-out .25s var(--ease) forwards; }
  #toast { bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); }
  .login-wrap { align-items: start; padding-top: 9vh; }
}
@media (max-width: 340px) { .grid, .tiles, .filters, .form-grid, .filters-inner { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}