@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --bg: #fafafa;
  --bg-accent-a: #f4f4f5;
  --bg-accent-b: #f4f4f5;
  --card: #ffffff;
  --ink: #09090b;
  --muted: #5f5f68;
  --accent: #0f766e;
  --accent-2: #0d9488;
  --accent-ink: #ffffff;
  --accent-soft: #e6f7f4;
  --border: #e4e4e7;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #16a34a;
  --success-soft: #f0fdf4;
  --gold: #b8860b;
  --gold-bright: #d4a017;
  --radius: 12px;
  --radius-sm: 9px;
  --sidebar-w: 258px;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0d;
    --bg-accent-a: #17171a;
    --bg-accent-b: #17171a;
    --card: #141417;
    --ink: #f4f4f5;
    --muted: #9a9aa2;
    --accent: #2dd4bf;
    --accent-2: #5eead4;
    --accent-ink: #06201c;
    --accent-soft: #133430;
    --border: #2a2a2f;
    --danger-soft: #2a1414;
    --success-soft: #10241a;
    --teaser-bg: linear-gradient(135deg, #123a34, #10262b);
    --teaser-border: #1f4a43;
    --ai-bg: linear-gradient(135deg, #123a34, #10262b);
    --ai-border: #1f4a43;
    --ai-text: #bdf0e4;
    --ai-warn-bg: linear-gradient(135deg, #332711, #2e1c10);
    --ai-warn-border: #5c4318;
    --ai-warn-text: #f3c98a;
    --item-row-bg: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0d;
  --bg-accent-a: #17171a;
  --bg-accent-b: #17171a;
  --card: #141417;
  --ink: #f4f4f5;
  --muted: #9a9aa2;
  --accent: #2dd4bf;
  --accent-2: #5eead4;
  --accent-ink: #06201c;
  --accent-soft: #133430;
  --border: #2a2a2f;
  --danger-soft: #2a1414;
  --success-soft: #10241a;
  --teaser-bg: linear-gradient(135deg, #123a34, #10262b);
  --teaser-border: #1f4a43;
  --ai-bg: linear-gradient(135deg, #123a34, #10262b);
  --ai-border: #1f4a43;
  --ai-text: #bdf0e4;
  --ai-warn-bg: linear-gradient(135deg, #332711, #2e1c10);
  --ai-warn-border: #5c4318;
  --ai-warn-text: #f3c98a;
  --item-row-bg: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }

html { overflow-x: hidden; touch-action: manipulation; height: 100%; height: 100dvh; overflow-y: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.wrap { position: relative; height: 100%; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }

/* Schmalerer Scrollbalken auf den Haupt-Scrollflächen (Tablet mit Maus/Trackpad, Desktop) - Handys
   ohne Maus zeigen ohnehin einen eigenen, automatisch ausblendenden Overlay-Scrollbalken, den diese
   Regeln nicht betreffen. scrollbar-width für Firefox, ::-webkit-scrollbar für Chrome/Safari/Edge. */
.wrap, .main-content, .plan-screen { scrollbar-width: thin; }
.wrap::-webkit-scrollbar, .main-content::-webkit-scrollbar, .plan-screen::-webkit-scrollbar { width: 8px; }
.wrap::-webkit-scrollbar-track, .main-content::-webkit-scrollbar-track, .plan-screen::-webkit-scrollbar-track { background: transparent; }
.wrap::-webkit-scrollbar-thumb, .main-content::-webkit-scrollbar-thumb, .plan-screen::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.wrap::-webkit-scrollbar-thumb:hover, .main-content::-webkit-scrollbar-thumb:hover, .plan-screen::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.wrap.landing-scroll { scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior-y: none; }
/* Belt-and-suspenders: even if overscroll-behavior isn't fully honored on some mobile
   browser, the marketing page's own dark background is what shows through, not the
   app's (possibly light-mode) default body color. */
body:has(#landing-page) { background: #0a0f0e; }

/* On phones/tablets, let the marketing page scroll NATIVELY (the real page/body
   scroll) instead of inside the nested .wrap div used for the desktop's full-page
   snap-scroll effect. Scrolling inside a nested div stops the mobile browser from
   ever recognising "the page is scrolling", so its address bar never auto-collapses
   (the app never gets the full screen) and some browsers draw a persistent, always-
   visible scrollbar for that inner div instead of their normal fading overlay
   indicator. Scoped to #landing-page only - the logged-in dashboard keeps its
   existing nested-scroll layout untouched. */
@media (max-width: 900px) {
  html:has(#landing-page) { height: auto; overflow: visible; }
  body:has(#landing-page) { height: auto; overflow: visible; overscroll-behavior-y: auto; }
  body:has(#landing-page) .wrap { height: auto; overflow: visible; -webkit-overflow-scrolling: auto; }
  body:has(#landing-page) .wrap.landing-scroll { scroll-snap-type: none; overscroll-behavior-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wrap.landing-scroll { scroll-snap-type: none; scroll-behavior: auto; }
}
@media (max-width: 720px) {
  .wrap.landing-scroll { scroll-snap-type: none; }
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { display: block; box-sizing: border-box; width: 52px; height: 52px; flex-shrink: 0; border: 0; border-radius: 13px; padding: 3px; background-color: var(--accent-soft); background-image: url('/assets/logo-splash.png'); background-position: center; background-size: 100%; background-repeat: no-repeat; filter: none; box-shadow: none; }

.mobile-back-btn {
  display: none;
  flex-shrink: 0;
  margin-right: 6px;
  background: transparent;
  border: none;
  color: var(--ink);
  box-shadow: none;
  padding: 0;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
}
.mobile-back-btn:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }

.mobile-back-label { display: none; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.avatar-circle.mobile-topbar-profile-btn { display: none; }
.mobile-only-card { display: none; }
.mobile-only-block { display: none; }
.mobile-only-btn { display: none; }

/* ---------- Mini-Belegkarte (letzter Beleg, Handy-Übersicht) ---------- */
.mini-receipt-card {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px; margin-top: 10px; width: 100%; box-shadow: none; color: var(--ink);
  font-weight: 400; letter-spacing: normal;
}
.mini-receipt-card:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.mini-receipt-card::after { display: none; }
.mini-receipt-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini-receipt-card-amount { font-weight: 800; font-size: 1.05rem; color: var(--accent-2); }
.mini-receipt-card-desc { font-weight: 700; }
.mini-receipt-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.78rem; color: var(--muted); }

.mobile-receipts-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.mobile-receipt-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.mobile-receipt-header-actions a { display: block; }
.mobile-receipt-header-actions button { width: auto; min-height: 38px; padding: 8px 11px; }

/* ---------- Mobile-Overlays (Alle Belege / Beleg-Detail) ---------- */
.mobile-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; touch-action: none; overscroll-behavior: contain; }
.mobile-overlay-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: none; }
.mobile-overlay-center { align-items: center; justify-content: center; padding: 24px 16px; }
.mobile-overlay-sheet {
  position: relative; width: 100%; max-height: 88vh;
  background: var(--bg); border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.mobile-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-overlay-header h2 { margin: 0; }
.mobile-overlay-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mobile-overlay-export-actions { display: flex; align-items: center; gap: 5px; }
.mobile-overlay-export-btn {
  min-width: 44px; min-height: 34px; padding: 7px 9px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.mobile-overlay-export-btn:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.mobile-overlay-close {
  background: var(--card); border: 1.5px solid var(--border); color: var(--ink);
  width: 32px; height: 32px; border-radius: 50%; padding: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mobile-overlay-close:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.mobile-overlay-sheet-detail {
  max-height: min(88vh, 760px);
  padding-top: 56px;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-overlay-sheet-detail .mobile-overlay-close { position: absolute; top: 14px; left: 14px; }

.mobile-overlay-sheet-center {
  border-radius: 20px; max-height: 86vh; width: 100%; max-width: 420px;
  touch-action: auto; overscroll-behavior: contain;
}
.receipt-calculation-overlay { z-index: 110; }
.receipt-calculation-sheet {
  max-height: min(82vh, 620px);
  padding-top: 56px;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .72);
}
.receipt-calculation-sheet .mobile-overlay-close { position: absolute; top: 14px; left: 14px; }

/* ---------- Steuer-Kompass-Auswahl (Kassasturz / Spickzettel) ---------- */
.mobile-choice-options { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.mobile-choice-option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 14px; box-shadow: none; color: var(--ink);
}
.mobile-choice-option:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.mobile-choice-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center;
}
.mobile-choice-icon svg { width: 20px; height: 20px; }
.mobile-choice-text { display: flex; flex-direction: column; gap: 2px; }
.mobile-choice-text strong { font-size: 0.95rem; font-weight: 800; }
.mobile-choice-text span:last-child { font-size: 0.8rem; font-weight: 500; color: var(--muted); }

/* ---------- Übergangs-Animation Dashboard -> Tab (nur am Handy erreichbar) ---------- */
.mobile-transition-overlay {
  position: fixed; inset: 0; z-index: 200; background: #000;
  align-items: center; justify-content: center; overflow: hidden;
}
.mobile-transition-overlay.hidden { display: none; }
.mobile-transition-overlay:not(.hidden) { display: flex; }
.mobile-transition-content {
  display: flex; align-items: center; gap: 12px;
  transform: translate(-42vw, -38vh) scale(0.42); opacity: 0.85;
}
.mobile-splash-content { gap: 10px; transform: translateX(-120vw); opacity: 1; }
.mobile-transition-symbol { width: 148px; height: 148px; display: block; flex: 0 0 auto; background: url('/assets/logo-splash.png') center / 100% auto no-repeat; }
.mobile-transition-wordmark {
  width: auto; height: auto; display: block; white-space: nowrap;
  color: #fff; font-size: clamp(2.45rem, 6vw, 4.3rem); line-height: 1;
  font-weight: 850; letter-spacing: -0.06em; text-shadow: 0 0 24px rgba(0, 210, 190, .18);
}
.mobile-splash-wind { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mobile-splash-wind i {
  position: absolute; left: -28vw; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(93, 239, 218, .7), transparent);
  opacity: 0; transform: rotate(-12deg); filter: blur(.2px);
}
.mobile-splash-wind i:nth-child(1) { top: 38%; width: 25vw; animation: splash-wind 2.4s 0.35s ease-out infinite; }
.mobile-splash-wind i:nth-child(2) { top: 46%; width: 18vw; animation: splash-wind 2.8s 1s ease-out infinite; }
.mobile-splash-wind i:nth-child(3) { top: 57%; width: 31vw; animation: splash-wind 2.6s 1.5s ease-out infinite; }
.mobile-splash-wind i:nth-child(4) { top: 64%; width: 15vw; animation: splash-wind 3s 0.8s ease-out infinite; }
.mobile-transition-overlay.splash-play .mobile-splash-content {
  animation: splash-arrive var(--splash-arrive-dur, 2.2s) cubic-bezier(.2,.8,.2,1) forwards;
}
.mobile-transition-overlay.splash-logo-leave .mobile-transition-symbol {
  animation: splash-symbol-leave var(--splash-leave-dur, 1.35s) cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes splash-arrive { from { transform: translateX(-120vw); } to { transform: translateX(0); } }
@keyframes splash-symbol-leave { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } to { transform: translate(115vw, -28vh) rotate(18deg) scale(.25); opacity: 0; } }
@keyframes splash-wind { 0% { transform: translateX(0) rotate(-12deg) scaleX(.7); opacity: 0; } 18% { opacity: .65; } 100% { transform: translateX(155vw) rotate(-12deg) scaleX(1.15); opacity: 0; } }
.mobile-transition-overlay { background: #09262d; }
:root[data-theme="dark"] .mobile-transition-overlay { background: #071b20; }
.mobile-transition-skip { z-index: 3; }
@media (max-width: 720px) {
  .mobile-transition-symbol { width: 118px; height: 118px; }
  .mobile-transition-wordmark { font-size: clamp(2rem, 10vw, 3.2rem); }
}
.mobile-transition-overlay.mt-play .mobile-transition-content { animation: mt-flight 0.32s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.mobile-transition-overlay.mt-play .mobile-transition-symbol { animation: mt-logo-loop 0.32s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
.mobile-transition-overlay.mt-wipe { animation: mt-wipe-out 0.3s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
.mobile-transition-logo { width: 60px; height: 60px; border-radius: 15px; object-fit: cover; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }
.mobile-transition-word { font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
@keyframes mt-flight {
  0% { transform: translate(-42vw, -38vh) scale(0.42) rotate(-18deg); opacity: 0.7; }
  38% { transform: translate(-12vw, -10vh) scale(0.72) rotate(10deg); opacity: 1; }
  68% { transform: translate(3vw, 2vh) scale(1.05) rotate(-5deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
}
@keyframes mt-logo-loop {
  0% { transform: translate(0, 0) rotate(0); }
  35% { transform: translate(12px, -8px) rotate(120deg); }
  70% { transform: translate(-8px, 8px) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes mt-wipe-out { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.mobile-login-intro-overlay {
  position: fixed; inset: 0; z-index: 210; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mobile-login-intro-overlay.hidden { display: none; }
.mobile-login-intro-overlay:not(.hidden) { display: flex; }
.registration-closed [data-landing-auth="register"],
.registration-closed #show-register,
.registration-closed .registration-entry,
.registration-closed #register-card { display: none !important; }
.registration-closed-note { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: .84rem; }
.registration-closed .registration-closed-note { display: block !important; }
.mobile-login-intro-video-backdrop {
  position: absolute; inset: -5%; width: 110%; height: 110%;
  object-fit: cover; object-position: center; opacity: .58;
  filter: blur(24px) brightness(.92) saturate(.82);
  transform: scale(1.08); pointer-events: none;
}
.mobile-login-intro-video {
  position: relative; z-index: 1; display: block; width: 100vw; height: 100dvh;
  max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;
  background: transparent;
}
:root[data-theme="dark"] .mobile-login-intro-overlay { background: #06191d; }
:root[data-theme="dark"] .mobile-login-intro-video-backdrop {
  opacity: .72; filter: blur(24px) brightness(.38) saturate(1.2);
}
.mobile-transition-skip {
  position: absolute; right: 16px; bottom: max(18px, env(safe-area-inset-bottom));
  padding: 9px 13px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  background: rgba(0,0,0,.34); color: #fff; font-size: .78rem; font-weight: 700;
  box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mobile-transition-skip:hover { transform: none; box-shadow: none; background: rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) {
  .mobile-transition-overlay, .mobile-login-intro-overlay { display: none !important; }
}

.mobile-search-row { display: flex; gap: 8px; align-items: center; }
.mobile-search-icon-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.mobile-search-icon-wrap svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.mobile-search-icon-wrap input { flex: 1; margin: 0; padding-left: 34px; }
.mobile-search-row select { width: auto; margin: 0; flex-shrink: 0; }
#receipts-category-filter { max-width: 180px; }
#receipts-sort-dir-btn {
  flex-shrink: 0; width: 40px; height: 40px; padding: 0;
  background: var(--card); border: 1.5px solid var(--border); color: var(--ink);
  box-shadow: none; display: flex; align-items: center; justify-content: center;
}
#receipts-sort-dir-btn:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
#receipts-sort-dir-btn.desc svg { transform: rotate(180deg); }

.receipt-row-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.receipt-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 10px 16px; cursor: pointer; text-align: left; width: 100%;
  color: var(--ink); font-weight: 400; letter-spacing: normal; box-shadow: none;
}
.receipt-row:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.receipt-row::after { display: none; }
.receipt-row-id { font-weight: 800; color: var(--accent-2); flex-shrink: 0; font-size: 0.82rem; }
.receipt-row-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.86rem; }
.receipt-row-amount { flex-shrink: 0; font-weight: 700; font-size: 0.86rem; }

.receipt-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.receipt-detail-row:last-of-type { border-bottom: none; }
.receipt-detail-label { color: var(--muted); font-weight: 600; }
.receipt-detail-value { font-weight: 700; text-align: right; }
.receipt-detail-deductible-toggle { width: calc(100% + 16px); border: 1px solid var(--accent); cursor: pointer; text-align: left; color: var(--ink); transition: background .18s ease, box-shadow .18s ease; }
.receipt-detail-deductible-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 76%, var(--card)); box-shadow: 0 8px 20px -16px var(--accent); filter: none; transform: none; }
.receipt-detail-deductible-toggle .receipt-detail-value { display: inline-flex; align-items: center; gap: 8px; }
.receipt-detail-chevron { display: inline-block; color: var(--accent-2); transition: transform .2s ease; }
.receipt-detail-deductible-toggle[aria-expanded="true"] .receipt-detail-chevron { transform: rotate(180deg); }
.receipt-selfbehalt-badge { display:inline-flex; align-items:center; margin-left:5px; padding:3px 7px; border:1px solid color-mix(in srgb, var(--accent) 72%, var(--border)); border-radius:999px; background:var(--accent-soft); color:var(--accent-2); font-size:.68rem; font-weight:800; line-height:1; white-space:nowrap; }
.receipt-selfbehalt-note { margin:-4px 0 12px; padding:8px 10px; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; background:color-mix(in srgb, var(--accent-soft) 52%, var(--card)); color:var(--ink); font-size:.78rem; line-height:1.35; }
.receipt-detail-calculation { margin: -4px 0 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 36%, var(--card)); animation: receipt-calc-open .2s ease both; }
.receipt-detail-calculation.hidden { display: none; }
.receipt-calc-kicker, .receipt-calc-section-title { display: block; color: var(--accent-2); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.receipt-calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .8rem; }
.receipt-calc-row span:first-child { color: var(--muted); }
.receipt-calc-row strong { color: var(--ink); text-align: right; }
.receipt-calc-row-minus strong { color: var(--danger); }
.receipt-calc-row-result { margin-top: 6px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.receipt-calc-row-result span, .receipt-calc-row-result strong { color: var(--accent-2) !important; font-weight: 800; }
.receipt-calc-section { margin: 10px 0 2px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border)); }
.receipt-calc-fraction { display: inline-grid; grid-template-rows: auto 1px auto; gap: 3px; min-width: 145px; margin: 8px 0 4px; color: var(--ink); font-size: .78rem; font-weight: 800; }
.receipt-calc-fraction i { display: block; width: 100%; height: 1px; background: var(--accent-2); }
.receipt-calc-note { margin: 8px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.4; }
@keyframes receipt-calc-open { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .receipt-detail-calculation { animation: none; } }

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--accent-soft); filter: none; }
.hamburger-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.08rem; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); font-size: 0.92rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(23, 26, 43, 0.04), 0 10px 24px -18px rgba(23, 26, 43, 0.18);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-top: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

label { display: block; font-size: 0.86rem; font-weight: 600; margin-top: 10px; color: var(--ink); }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.inline input { width: auto; margin: 0; }
.agb-consent-check { align-items: flex-start; font-weight: 400; margin-top: 14px; font-size: 0.9rem; line-height: 1.4; }
.agb-consent-check input { margin-top: 3px; flex-shrink: 0; }
.agb-consent-check a { color: var(--accent); text-decoration: underline; }

button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.45);
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
button:not(.secondary):not(.danger):not(.link)::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
button:not(.secondary):not(.danger):not(.link):hover:not(:disabled)::after { left: 130%; }
button:not(.secondary):not(.danger):not(.link):hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-soft), 0 6px 24px -8px var(--accent);
  transform: translateY(-1px);
}
button:hover:not(:disabled) { filter: brightness(1.15); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px) scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  button:hover:not(:disabled), button:active:not(:disabled) { transform: none; }
}
button.secondary {
  background: var(--card);
  color: var(--accent);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
button.secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); filter: none; }
button.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger-soft); box-shadow: none; padding: 5px 12px; font-weight: 600; font-size: 0.83rem; }
button.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); filter: none; }
button.link { background: none; color: var(--accent); border: none; padding: 0; font-weight: 700; text-decoration: underline; box-shadow: none; }
button:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

a { color: var(--accent); font-weight: 600; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; min-width: 0; }

/* ---------- App-Shell: Seitenleiste + Hauptbereich ---------- */
.app-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  height: 100%;
  overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-logo-sm { display: block; box-sizing: border-box; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; padding: 2px; background-color: var(--accent-soft); background-image: url('/assets/logo-splash.png'); background-position: center; background-size: 100%; background-repeat: no-repeat; filter: none; box-shadow: none; }
.sidebar-brand .brand-logo-sm { width: 42px; height: 42px; border-radius: 11px; }
.sidebar-brand-name { font-size: 1.08rem; }
.sidebar-brand-name { font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1.2; }

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 10px;
  margin-top: 6px;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: none;
  font-weight: 600;
  font-size: 0.87rem;
  padding: 9px 10px;
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.tab-icon { width: 17px; height: 17px; flex-shrink: 0; color: #a1a1aa; transition: color 0.12s ease; }
.sidebar-nav button:hover:not(.active) { background: var(--accent-soft); color: var(--ink); filter: none; }
.sidebar-nav button:hover:not(.active) .tab-icon { color: var(--ink); }
.sidebar-nav button.active {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: none;
  transform: none;
  font-weight: 700;
}
.sidebar-nav button.active .tab-icon { color: var(--ink); }
.sidebar-coming-soon-mark { margin-left: auto; color: var(--accent-2); font-size: .78rem; line-height: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 55%, transparent)); animation: sidebar-coming-soon-tick 2.4s ease-in-out infinite; }
@keyframes sidebar-coming-soon-tick { 0%, 100% { opacity: .58; transform: rotate(-8deg); } 50% { opacity: 1; transform: rotate(8deg) translateY(-1px); } }

.sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.sidebar-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; }
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
  text-transform: uppercase;
}
button.avatar-circle { padding: 0; box-shadow: none; border: none; overflow: visible; }
button.avatar-circle::after { display: none; }
button.avatar-circle svg { width: 60%; height: 60%; }
.sidebar-logout-btn {
  background: transparent; box-shadow: none; padding: 6px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 8px;
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-logout-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); filter: none; box-shadow: none; transform: none; }

.main-area { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.main-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  z-index: 5;
}
.main-topbar-spacer { flex: 1; }
.main-topbar-right { display: flex; gap: 10px; align-items: center; }
.main-topbar-right > label { display: flex; align-items: center; margin: 0 !important; }
.main-topbar-right select { width: 94px; min-width: 94px; max-width: 94px; height: 34px; min-height: 34px; margin: 0; padding: 5px 24px 5px 10px; box-sizing: border-box; border-radius:999px; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.main-topbar-right #add-year-btn, .main-topbar-right #admin-header-btn { display: none !important; }
.main-topbar-right #credits-header-pill, .main-topbar-right .header-language-btn, .main-topbar-right .profile-menu-trigger { min-height: 34px; height: 34px; box-sizing: border-box; }
.profile-completion-wrap { display: flex; align-items: center; min-width: 0; }
.profile-completion-btn {
  display: grid; grid-template-columns: minmax(130px, 1fr) 68px; align-items: center; gap: 12px;
  width: min(286px, 24vw); min-height: 42px; padding: 6px 10px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 58%, var(--border)); border-radius: 13px;
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--card)); color: var(--ink);
  text-align: left; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: profile-completion-pulse 2.8s ease-in-out infinite;
}
.profile-completion-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 80%, var(--card)); filter: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); transform: none; }
.profile-completion-copy { display: grid; min-width: 0; gap: 2px; }
.profile-completion-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.profile-completion-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .66rem; }
.profile-completion-progress { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border) 75%, transparent); }
.profile-completion-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s ease; }
@keyframes profile-completion-pulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .profile-completion-btn { animation: none; } .profile-completion-progress i { transition: none; } }
.header-language-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
  min-width: 48px; height: 34px; padding: 5px 9px;
  background: var(--card); color: var(--muted); border: 1.5px solid var(--border);
  border-radius: 10px; box-shadow: none; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
}
.header-language-btn svg { width: 15px; height: 15px; color: var(--accent-2); }
.header-language-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); filter: none; box-shadow: none; transform: none; }
.main-content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; max-width: 1180px; padding: 26px 28px 60px; width: 100%; margin: 0; position: relative; scrollbar-width: none; }
.main-content::-webkit-scrollbar { width: 0; height: 0; }
.app-scroll-rail { position:absolute; top:72px; right:5px; bottom:8px; z-index:8; display:none; width:6px; border:1px solid color-mix(in srgb, var(--border) 75%, transparent); border-radius:999px; background:color-mix(in srgb, var(--border) 22%, transparent); pointer-events:none; }
.app-scroll-thumb { position:absolute; top:0; left:1px; width:2px; min-height:34px; border-radius:999px; background:var(--accent-2); box-shadow:0 0 10px color-mix(in srgb, var(--accent-2) 45%, transparent); transition:top .12s ease, height .12s ease; }
.app-scroll-rail.is-scrollable { display:block; }
@media (max-width:720px) { .app-scroll-rail { top:8px; right:3px; bottom:8px; width:4px; } .app-scroll-thumb { left:1px; width:2px; } }

/* ---------- Belege-Tab: Hauptspalte + Info-Rail (füllt den leeren Platz rechts auf breiten Screens) ---------- */
.belege-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.belege-main { min-width: 0; }
.belege-rail { display: flex; flex-direction: column; gap: 14px; }
.belege-rail .card { margin-bottom: 0; }
.guide-teaser-rail { flex-direction: column; align-items: flex-start; }
.guide-teaser-rail button { width: 100%; }
#rail-category-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rail-category-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0;
  font-size: 0.86rem; padding: 6px 0; border-top: 1px solid var(--border);
}
.rail-category-row:first-child { border-top: none; }
.rail-category-row .amount-cell { font-weight: 700; }
.rail-category-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-category-name i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--category-color, var(--accent)); }

@media (min-width: 1180px) {
  .belege-layout { grid-template-columns: 1fr 300px; }
  .belege-rail { position: sticky; top: 0; }
}

/* Kassasturz/Spickzettel/Tipp gehören am Desktop nur noch zum Steuerkompass-Tab, nicht mehr zu Belege
   (am Handy bleiben sie ohnehin schon über @media(max-width:720px) ausgeblendet, siehe dort). */
@media (min-width: 721px) {
  #tab-belege #kassasturz-teaser-card,
  #tab-belege #spickzettel-teaser-card,
  #tab-belege #rail-tip-card { display: none; }
}

/* Die Pauschale bleibt am Handy in der Info-Rail; am Desktop gehört der volle Fokus der
   interaktiven Kategorienübersicht. Die alte Info-Rail bleibt daher am PC leer und wird ausgeblendet.
   Am Handy bleibt die Rail über @media(max-width:720px) unverändert (display:contents + order). */
@media (min-width: 721px) {
  #tab-belege .belege-rail { display: none; }
  #tab-belege .belege-layout { grid-template-columns: 1fr; }
}

/* Belege-Startbereich: die interaktive Kategorienübersicht bekommt die gesamte Breite.
   Die ehemalige Pauschale-Karte rechts wurde bewusst entfernt, damit das Belegbild als
   eigener visueller Mittelpunkt wirken kann. */
.desktop-belege-insights { display: block; }
.desktop-belege-overview {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch;
  overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 1px 3px rgba(23, 26, 43, .05), 0 18px 34px -22px rgba(23, 26, 43, .22);
}

.desktop-belege-overview .desktop-vault-card,
.desktop-belege-overview .desktop-category-overview {
  min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
.desktop-belege-overview .desktop-vault-card { border-bottom: 1px solid var(--border); }
.desktop-belege-overview .desktop-belege-insights { min-width: 0; }
.desktop-belege-overview .desktop-vault-hero .desktop-vault-panel-tresor { flex-direction: column; gap: 6px; }
.desktop-belege-overview .desktop-vault-hero .desktop-vault-svg { width: min(190px, 100%); max-width: 190px; }
.desktop-belege-overview .desktop-vault-hero .desktop-vault-switch-reading { min-width: 180px; }
.desktop-belege-overview .desktop-category-overview { padding: 20px 22px 22px; }
.desktop-belege-overview .desktop-category-board { margin-top: 16px; padding: 12px 8px 6px; }
.desktop-belege-overview .desktop-category-board .desktop-category-list { min-height: 160px; }
.desktop-category-overview { position: relative; min-height: 430px; overflow: hidden; padding: 24px 28px 22px; background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%), var(--card); }
.desktop-category-overview::after { content: ''; position: absolute; inset: auto -12% -46% 42%; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 8%, transparent); filter: blur(26px); pointer-events: none; }
.desktop-category-overview-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.desktop-category-overview-head h2 { margin: 2px 0 4px; }
.desktop-category-overview-head p { margin: 0; }
.desktop-category-kicker { display: block; color: var(--accent-2); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.desktop-category-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.desktop-category-total span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.desktop-category-total strong { color: var(--accent-2); font-size: 1.2rem; }
.desktop-category-stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 240px; margin: 12px auto 18px; width: min(360px, 52vw); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border)); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 3%, transparent), 0 18px 38px -24px color-mix(in srgb, var(--accent-2) 48%, transparent); animation: desktop-category-breathe 4.6s ease-in-out infinite; }
.desktop-category-stage-ring { position: absolute; border: 1px dashed color-mix(in srgb, var(--accent-2) 34%, transparent); border-radius: 50%; pointer-events: none; }
.desktop-category-stage-ring-one { inset: 12%; animation: desktop-category-spin 16s linear infinite; }
.desktop-category-stage-ring-two { inset: 24%; border-style: solid; opacity: .55; animation: desktop-category-spin-reverse 11s linear infinite; }
.desktop-category-stage-ring-three { inset: 36%; border-style: dotted; opacity: .42; animation: desktop-category-spin 8s linear infinite; }
.desktop-category-stage-moons { position: absolute; inset: 0; pointer-events: auto; }
.desktop-category-stage-moon-track { position: absolute; inset: 0; transform-origin: 50% 50%; animation: desktop-category-moon-orbit var(--moon-duration) linear var(--moon-delay) infinite; }
.desktop-category-stage-moon { position: absolute; top: var(--moon-top); left: 50%; width: 13px; height: 13px; padding: 0; border: 2px solid color-mix(in srgb, var(--moon-color) 76%, white); border-radius: 50%; background: var(--moon-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--moon-color) 14%, transparent), 0 0 18px color-mix(in srgb, var(--moon-color) 72%, transparent); transform: translate(-50%, -50%); cursor: pointer; appearance: none; }
.desktop-category-stage-moon:hover, .desktop-category-stage-moon:focus-visible { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--moon-color) 20%, transparent), 0 0 24px color-mix(in srgb, var(--moon-color) 82%, transparent); outline: 2px solid color-mix(in srgb, var(--moon-color) 78%, white); outline-offset: 3px; }
.desktop-category-stage-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.desktop-category-stage-core > span { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.desktop-category-stage-core strong { color: var(--accent-2); font-size: 1.18rem; }
.desktop-category-stage-core small { position: static; color: var(--muted); font-size: .6rem; }
.desktop-category-stage-excluded { position: absolute; z-index: 3; top: 39%; right: 2%; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; cursor: pointer; }
.desktop-category-stage-excluded-orbit { position: absolute; inset: 6px; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--gold-bright) 72%, transparent); border-radius: 50%; animation: desktop-category-excluded-orbit 8s linear infinite; }
.desktop-category-stage-excluded-orbit::after { content: ''; position: absolute; top: 7px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px var(--gold-bright); }
.desktop-category-stage-excluded-orbit i { width: 15px; height: 15px; border: 2px solid var(--gold-bright); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-bright) 13%, transparent), 0 0 13px color-mix(in srgb, var(--gold-bright) 52%, transparent); }
.desktop-category-stage-excluded:hover .desktop-category-stage-excluded-orbit, .desktop-category-stage-excluded:focus-visible .desktop-category-stage-excluded-orbit { transform: scale(1.15); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold-bright) 14%, transparent), 0 0 22px color-mix(in srgb, var(--gold-bright) 62%, transparent); }
.desktop-category-stage-excluded:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 50%; }
@keyframes desktop-category-excluded-orbit { to { transform: rotate(360deg); } }
.desktop-category-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px 3px 2px 0; scrollbar-width: thin; }
.desktop-category-item { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg) 58%, transparent); color: var(--ink); text-align: left; box-shadow: none; animation: desktop-category-in .42s cubic-bezier(.2,.8,.2,1) var(--category-delay) both; }
.desktop-category-item:hover:not(:disabled), .desktop-category-item.is-selected { border-color: color-mix(in srgb, var(--category-color) 72%, var(--border)); background: color-mix(in srgb, var(--category-color) 11%, var(--card)); box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--category-color) 80%, transparent); transform: translateY(-1px); }
.desktop-category-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: .78rem; font-weight: 700; }
.desktop-category-item-top > span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-category-item-top > span i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--category-color); }
.desktop-category-item-top strong { color: var(--accent-2); font-size: .76rem; white-space: nowrap; }
.desktop-category-item small { color: var(--muted); font-size: .66rem; }
.desktop-category-item-bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--border) 65%, transparent); }
.desktop-category-item-bar i { display: block; width: var(--category-progress); height: 100%; border-radius: inherit; background: var(--category-color); transform-origin: left; animation: desktop-category-fill .7s ease var(--category-delay) both; }
.desktop-category-empty { grid-column: 1 / -1; margin: 4px 0 0; }
.desktop-category-overview { min-height: 0; padding: 24px 28px 26px; }
.desktop-category-board { position: relative; z-index: 1; display: block; margin-top: 24px; padding: 16px 8px 6px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 20px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 52%), color-mix(in srgb, var(--bg) 38%, transparent); overflow: hidden; }
.desktop-category-board::before, .desktop-category-board::after { content: ''; position: absolute; left: 50%; top: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: desktop-category-orbit-pulse 6s ease-in-out infinite; }
.desktop-category-board::before { width: 58%; height: 150px; }
.desktop-category-board::after { width: 30%; height: 78px; animation-delay: -2.5s; opacity: .65; }
.desktop-category-board .desktop-category-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-content: start; gap: 8px; max-height: none; min-height: 0; overflow: visible; padding: 0; }
.desktop-category-board .desktop-category-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; align-items: center; gap: 8px; min-height: 74px; padding: 10px 11px; border-color: color-mix(in srgb, var(--border) 78%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--bg) 48%, var(--card)); animation: desktop-category-in .42s cubic-bezier(.2,.8,.2,1) var(--category-delay) both, desktop-category-float 5.8s ease-in-out var(--category-delay) infinite; }
.desktop-category-board .desktop-category-item:hover:not(:disabled), .desktop-category-board .desktop-category-item:focus-visible { animation-play-state: paused; }
.desktop-category-board .desktop-category-item:hover:not(:disabled), .desktop-category-board .desktop-category-item.is-selected { border-color: color-mix(in srgb, var(--category-color) 72%, var(--border)); background: color-mix(in srgb, var(--category-color) 10%, var(--card)); box-shadow: 0 14px 28px -22px color-mix(in srgb, var(--category-color) 82%, transparent); transform: translateY(-2px); }
.desktop-category-board .desktop-category-item.is-exceptional { --category-color: var(--gold-bright) !important; }
.desktop-category-item-index { align-self: start; color: color-mix(in srgb, var(--category-color) 82%, var(--muted)); font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.desktop-category-item-body { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.desktop-category-board .desktop-category-item-top { gap: 8px; font-size: .82rem; }
.desktop-category-board .desktop-category-item-top > span { gap: 7px; }
.desktop-category-board .desktop-category-item-top strong { font-size: .8rem; font-variant-numeric: tabular-nums; }
.desktop-category-board .desktop-category-item-bar { height: 5px; }
.desktop-category-board .desktop-category-item small { font-size: .68rem; }
.desktop-category-item-arrow { color: var(--muted); font-size: 1.15rem; line-height: 1; transition: color .2s ease, transform .2s ease; }
.desktop-category-item:hover .desktop-category-item-arrow, .desktop-category-item:focus-visible .desktop-category-item-arrow { color: var(--accent-2); transform: translate(2px, -2px); }
@media (max-width: 980px) {
  .desktop-category-board { padding-inline: 6px; }
}
@media (max-width: 700px) {
  .desktop-category-overview { padding: 20px 18px 22px; }
  .desktop-category-board .desktop-category-list { grid-template-columns: 1fr; }
}
.desktop-category-detail { position: relative; z-index: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); animation: desktop-category-detail-in .22s ease both; }
.desktop-category-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.desktop-category-detail-head h3 { margin: 2px 0 2px; font-size: .98rem; }
.desktop-category-detail-head p { margin: 0; font-size: .74rem; }
.desktop-category-detail-head > strong { color: var(--accent-2); font-size: 1.05rem; white-space: nowrap; }
.desktop-category-receipts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-top: 9px; }
.desktop-category-receipts span { min-width: 0; padding: 7px 8px; border-radius: 8px; background: var(--accent-soft); }
.desktop-category-receipts b, .desktop-category-receipts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-category-receipts b { font-size: .7rem; }
.desktop-category-receipts small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.desktop-category-receipts-overlay .mobile-overlay-backdrop { background: rgba(2, 7, 12, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.desktop-category-receipts-sheet { width: min(900px, 92vw); max-width: 900px; max-height: 82vh; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 48%, var(--bg)), var(--card)); box-shadow: 0 28px 90px rgba(0, 0, 0, .58); }
.desktop-category-receipts-header { align-items: flex-start; gap: 18px; }
.desktop-category-receipts-header h2 { margin: 4px 0 2px; }
.desktop-category-receipts-header p { margin: 0; }
.desktop-category-receipts-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.desktop-category-info-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-2) 48%, var(--border)); border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--accent-2);
  font-size: .82rem; font-weight: 850; box-shadow: none;
}
.desktop-category-info-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-2); filter: none; box-shadow: none; transform: none; }
.desktop-category-receipts-modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 4px 0; }
.desktop-category-receipts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-auto-rows: 126px; gap: 12px; }
.desktop-category-receipt-card { min-width: 0; height: 100%; box-sizing: border-box; padding: 15px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 15px; background: color-mix(in srgb, var(--card) 92%, var(--bg)); box-shadow: 0 12px 28px -22px rgba(0, 0, 0, .72); animation: desktop-category-modal-card-in .24s ease both; }
.desktop-category-receipt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desktop-category-receipt-card-top strong { color: var(--accent-2); font-size: .95rem; white-space: nowrap; }
.desktop-category-receipt-card h3 { margin: 13px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.desktop-category-receipt-card p, .desktop-category-receipt-card small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-category-receipt-card p { color: var(--muted); font-size: .76rem; }
.desktop-category-receipt-card small { margin-top: 7px; color: var(--muted); font-size: .68rem; }
body.desktop-category-receipts-open { overflow: hidden; }
@keyframes desktop-category-modal-card-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes desktop-category-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes desktop-category-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes desktop-category-detail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes desktop-category-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes desktop-category-spin { to { transform: rotate(360deg); } }
@keyframes desktop-category-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes desktop-category-moon-orbit { to { transform: rotate(360deg); } }
@keyframes desktop-category-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes desktop-category-orbit-pulse { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.98); } 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .desktop-category-stage, .desktop-category-stage-ring-one, .desktop-category-stage-ring-two, .desktop-category-stage-ring-three, .desktop-category-stage-moon-track, .desktop-category-stage-excluded-orbit, .desktop-category-item, .desktop-category-item-bar i, .desktop-category-receipt-card, .desktop-category-board::before, .desktop-category-board::after { animation: none; }
}

/* ---------- Desktop-Tresor-Grafik (Belege-Rail): gleiche Idee wie am Handy-Dashboard,
   eigene Klassen damit sich nichts mit den Handy-Regeln in @media(max-width:720px) überschneidet ---------- */
.desktop-vault-card { position: relative; overflow: hidden; padding-top: 22px; cursor: pointer; }
.desktop-vault-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.desktop-vault-slider { display: flex; width: 200%; transition: transform 0.42s cubic-bezier(.65, 0, .35, 1); }
.desktop-vault-card.expanded .desktop-vault-slider { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .desktop-vault-slider { transition: none; }
}
.desktop-vault-panel { flex: 0 0 50%; width: 50%; box-sizing: border-box; padding: 0 2px; min-width: 0; }
.desktop-vault-panel-tresor { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.desktop-vault-panel-breakdown { display: flex; flex-direction: column; gap: 10px; }
.desktop-vault-breakdown-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desktop-vault-breakdown-head h3 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.desktop-vault-close-btn {
  background: var(--card); border: 1.5px solid var(--border); color: var(--ink);
  width: 28px; height: 28px; border-radius: 50%; padding: 0; box-shadow: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.desktop-vault-close-btn:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.desktop-vault-breakdown-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.desktop-vault-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.83rem; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-accent-a); }
.desktop-vault-breakdown-row .amount-cell { font-weight: 700; }
.desktop-vault-visual { position: relative; display: flex; justify-content: center; width: 100%; }
.vault-category-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vault-orbit-chip { position: absolute; display: flex; flex-direction: column; gap: 1px; min-width: 76px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 5px 14px rgba(23,26,43,.12); font-size: .62rem; line-height: 1.1; animation: vault-category-drift 4.2s ease-in-out var(--orbit-delay) infinite alternate; }
.vault-orbit-chip > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-orbit-chip { width: clamp(82px, 9vw, 132px); min-width: 0; box-sizing: border-box; }
.vault-orbit-chip strong { color: var(--accent-2); font-size: .68rem; }
.vault-orbit-chip-0 { left: 1%; top: 7%; animation-name: vault-category-zig-a; }
.vault-orbit-chip-1 { right: 1%; top: 13%; animation-name: vault-category-zig-b; }
.vault-orbit-chip-2 { left: 0; bottom: 16%; animation-name: vault-category-zig-c; }
.vault-orbit-chip-3 { right: 0; bottom: 10%; animation-name: vault-category-zig-a; }
.vault-orbit-chip-4 { left: 19%; top: 0; animation-name: vault-category-zig-b; }
.vault-orbit-chip-5 { right: 17%; bottom: 0; animation-name: vault-category-zig-c; }
@keyframes vault-category-zig-a { 0%,100% { transform: translate(0,0) rotate(-2deg); opacity: .55; } 30% { transform: translate(13px,-5px) rotate(2deg); opacity: 1; } 65% { transform: translate(-4px,8px) rotate(-1deg); opacity: .8; } }
@keyframes vault-category-zig-b { 0%,100% { transform: translate(0,0) rotate(2deg); opacity: .55; } 35% { transform: translate(-12px,8px) rotate(-2deg); opacity: 1; } 70% { transform: translate(5px,-7px) rotate(1deg); opacity: .8; } }
@keyframes vault-category-zig-c { 0%,100% { transform: translate(0,0) rotate(-1deg); opacity: .55; } 32% { transform: translate(7px,10px) rotate(2deg); opacity: 1; } 68% { transform: translate(-10px,-5px) rotate(-2deg); opacity: .8; } }
.desktop-vault-svg { width: 100%; max-width: 210px; height: auto; overflow: visible; }
.desktop-vault-visual .vault-shadow { fill: var(--border); opacity: 0.55; }
.desktop-vault-visual .vault-body { fill: var(--card); stroke: var(--border); stroke-width: 2; }
.desktop-vault-visual .vault-hole { fill: var(--ink); opacity: 0.08; }
.desktop-vault-visual .vault-door-face { fill: var(--accent); }
.desktop-vault-visual .vault-door-dial { fill: var(--accent-2); }
.desktop-vault-visual .vault-door-spokes { stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; opacity: 0.55; fill: none; }
.desktop-vault-visual .vault-coin { fill: var(--gold-bright); stroke: var(--gold); stroke-width: 1.2; }
.desktop-vault-visual .vault-coin-label { font-size: 8px; font-weight: 800; fill: var(--gold); text-anchor: middle; }
.desktop-vault-visual .vault-bill { fill: var(--accent-soft); stroke: var(--accent-2); stroke-width: 1.2; }
.desktop-vault-visual .vault-float {
  animation: desktop-vault-float 3.6s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.desktop-vault-visual .vault-float-1 { animation-delay: 0s; }
.desktop-vault-visual .vault-float-2 { animation-delay: 0.9s; }
.desktop-vault-visual .vault-float-3 { animation-delay: 1.7s; }
.desktop-vault-visual .vault-float-4 { animation-delay: 2.4s; }
@keyframes desktop-vault-float {
  0% { transform: translateY(6px) scale(0.85); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translateY(-26px) scale(1); opacity: 1; }
  100% { transform: translateY(-42px) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-vault-visual .vault-float { animation: none !important; opacity: 1; transform: none; }
}
.desktop-vault-amount-wrap { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.desktop-vault-amount-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); transition: opacity 0.15s ease; }
.desktop-vault-amount-value { font-size: 1.5rem; font-weight: 800; color: var(--accent-2); }
.desktop-vault-switcher { display: flex; align-items: center; justify-content: center; gap: 14px; }
.desktop-vault-switch-reading { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 250px; transition: opacity 0.18s ease, transform 0.18s ease; }
.desktop-vault-switch-reading.is-fading { opacity: 0.42; transform: translateY(2px); }
.desktop-vault-switcher .desktop-vault-amount-wrap { align-items: center; text-align: center; }
.desktop-vault-switcher .desktop-vault-amount-label { max-width: 280px; line-height: 1.25; }
.desktop-vault-switch-arrow {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1;
  box-shadow: none; transition: background .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.desktop-vault-switch-arrow:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-2); box-shadow: none; transform: translateY(-1px); }
.desktop-vault-switch-arrow:disabled { opacity: .34; cursor: not-allowed; }
.desktop-vault-switch-dots { display: flex; justify-content: center; gap: 6px; min-height: 6px; }
.desktop-vault-switch-dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 28%, transparent); transition: background .2s ease, transform .2s ease; }
.desktop-vault-switch-dots i.is-active { background: var(--accent-2); transform: scale(1.35); }
#dashboard-vault-card.is-clickable { cursor: pointer; }
#dashboard-vault-card.is-clickable:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
#dashboard-vault-card.is-clickable:hover .desktop-vault-amount-label { opacity: 0.7; }
.dashboard-vault-dots { display: flex; gap: 5px; margin-top: 4px; }
.dashboard-vault-dot { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 30%, transparent); transition: background 0.2s ease, transform 0.2s ease; }
.dashboard-vault-dot.active { background: var(--accent-2); transform: scale(1.3); }

/* ---------- Tresor als große Hero-Banner oben im Belege-Tab statt kleiner Karte rechts oben ---------- */
.desktop-vault-hero {
  position: relative; padding: 18px 28px; overflow: hidden;
  border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 74%);
}
.desktop-vault-hero::after { content: ''; position: absolute; inset: auto -8% -74px; height: 140px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; }
.desktop-vault-hero > * { position: relative; z-index: 1; }
.desktop-vault-hero .desktop-vault-panel-tresor {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.desktop-vault-hero .desktop-vault-visual { width: auto; flex: 0 0 auto; }
.desktop-vault-hero .desktop-vault-svg { width: 220px; max-width: 220px; }
.desktop-vault-hero .desktop-vault-amount-wrap { align-items: flex-start; }
.desktop-vault-hero .desktop-vault-switcher .desktop-vault-amount-wrap { align-items: center; }
.desktop-vault-hero .desktop-vault-amount-label { font-size: 0.82rem; }
.desktop-vault-hero .desktop-vault-amount-value { font-size: 2.6rem; }
.desktop-vault-hero .desktop-vault-panel-breakdown { padding: 6px 8px; }
.desktop-vault-hero .desktop-vault-breakdown-list { max-height: 320px; }
@media (max-width: 900px) {
  .desktop-vault-hero .desktop-vault-panel-tresor { flex-direction: column; gap: 8px; }
  .desktop-vault-hero .desktop-vault-amount-wrap { align-items: center; }
}

/* Aufklapp-Übergang im Belege-Hero: statt komplett wegzuschieben (Basisverhalten oben),
   bleibt der Tresor beim Aufklappen links sichtbar und die Kategorien schieben sich rechts
   daneben ein - weicheres Timing, kein hartes "verschwinden". Nur Desktop, Handy nutzt
   weiterhin die Basis-Slide-Regel oben unverändert. */
@media (min-width: 721px) {
  .desktop-vault-hero .desktop-vault-slider {
    width: 100%;
    align-items: stretch;
    gap: 0;
    transition: gap 0.55s cubic-bezier(.65, 0, .35, 1);
  }
  .desktop-vault-hero.expanded .desktop-vault-slider {
    transform: none;
    gap: 30px;
  }
  .desktop-vault-hero .desktop-vault-panel-tresor {
    width: auto;
    flex: 1 1 100%;
    transition: flex-basis 0.55s cubic-bezier(.65, 0, .35, 1);
  }
  .desktop-vault-hero.expanded .desktop-vault-panel-tresor {
    flex-basis: 42%;
  }
  .desktop-vault-hero .desktop-vault-panel-breakdown {
    width: auto;
    flex: 0 0 0%;
    min-width: 0;
    opacity: 0;
    transform: translateX(18px);
    padding: 6px 0;
    overflow: hidden;
    transition: flex-basis 0.55s cubic-bezier(.65, 0, .35, 1),
                opacity 0.4s ease 0.14s,
                transform 0.4s ease 0.14s;
  }
  .desktop-vault-hero.expanded .desktop-vault-panel-breakdown {
    flex-basis: 54%;
    opacity: 1;
    transform: none;
    padding: 6px 8px;
  }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .desktop-vault-hero .desktop-vault-slider,
  .desktop-vault-hero .desktop-vault-panel-tresor,
  .desktop-vault-hero .desktop-vault-panel-breakdown { transition: none; }
}

/* Kleine Kategorie-Rechtecke bewegen sich um den Desktop-Tresor.
   Die mobile Kategorienliste bleibt bewusst eine schlichte, gut lesbare Liste. */
@media (min-width: 721px) {
  .desktop-vault-card { cursor: default; }
  .desktop-vault-card:focus-visible { outline: none; }
  .desktop-vault-hero .desktop-vault-slider { width: 100%; transform: none !important; }
  .desktop-vault-hero .desktop-vault-panel-tresor { width: 100%; flex-basis: 100%; position: relative; z-index: 3; }
  .desktop-vault-hero .desktop-vault-panel-breakdown { display: none; }
  .desktop-vault-hero .vault-category-orbit { display: none; }
  .desktop-vault-hero .vault-orbit-chip { width: 86px; min-width: 0; padding: 4px 6px; border-radius: 7px; font-size: .56rem; }
  .desktop-vault-hero .vault-orbit-chip strong { font-size: .62rem; }
  .desktop-vault-hero .vault-orbit-chip-0 { left: 0; top: 7%; }
  .desktop-vault-hero .vault-orbit-chip-1 { right: 0; top: 9%; }
  .desktop-vault-hero .vault-orbit-chip-2 { left: 7%; bottom: 4%; }
  .desktop-vault-hero .vault-orbit-chip-3 { right: 7%; bottom: 5%; }
  .desktop-vault-hero .vault-orbit-chip-4 { left: 25%; top: 0; }
  .desktop-vault-hero .vault-orbit-chip-5 { right: 25%; top: 0; }
  .desktop-vault-hero .vault-orbit-chip-6 { left: 18%; bottom: 0; }
  .desktop-vault-hero .vault-orbit-chip-7 { right: 18%; bottom: 0; }
  .desktop-vault-hero .vault-orbit-chip-8 { left: 3%; top: 43%; }
  .desktop-vault-hero .vault-orbit-chip-9 { right: 3%; top: 45%; }
  .desktop-vault-hero .vault-orbit-chip-10 { left: 34%; bottom: 2%; }
  .desktop-vault-hero .vault-orbit-chip-11 { right: 34%; bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit.is-crowded .vault-orbit-chip { width: 72px; padding: 3px 4px; font-size: .5rem; }
  .desktop-vault-hero .vault-category-orbit.is-crowded .vault-orbit-chip strong { font-size: .55rem; }

  /* Anzahlabhängige Bahnen: die Chips stehen mit genug Abstand über/unter
     dem Tresor und dürfen sich durch die kleine Bewegung nicht berühren. */
  .desktop-vault-hero .vault-category-orbit[data-count="5"] .vault-orbit-chip:nth-child(1) { left: 2%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="5"] .vault-orbit-chip:nth-child(2) { left: 25%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="5"] .vault-orbit-chip:nth-child(3) { right: 25%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="5"] .vault-orbit-chip:nth-child(4) { right: 2%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="5"] .vault-orbit-chip:nth-child(5) { left: 44%; bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(1) { left: 2%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(2) { left: 27%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(3) { right: 2%; top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(4) { left: 2%; bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(5) { left: 27%; bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="6"] .vault-orbit-chip:nth-child(6) { right: 2%; bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(-n+4) { top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(1) { left: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(2) { left: 25%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(3) { right: 25%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(4) { right: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(n+5) { bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(5) { left: 12%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(6) { left: 44%; }
  .desktop-vault-hero .vault-category-orbit[data-count="7"] .vault-orbit-chip:nth-child(7) { right: 12%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(-n+4) { top: 3%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(1),
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(5) { left: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(2),
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(6) { left: 27%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(3),
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(7) { right: 27%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(4),
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(8) { right: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="8"] .vault-orbit-chip:nth-child(n+5) { bottom: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(-n+6) { top: 2%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(n+7) { bottom: 1%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(1),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(7) { left: 1%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(2),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(8) { left: 18%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(3),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(9) { left: 35%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(4),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(10) { right: 35%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(5),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(11) { right: 18%; }
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(6),
  .desktop-vault-hero .vault-category-orbit[data-count="12"] .vault-orbit-chip:nth-child(12) { right: 1%; }
}

/* Geldfluss-Animation beim erfolgreichen Beleg-Upload: kleine Münzen/Schein fallen kurz in den Tresor */
.desktop-vault-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.vault-fx-coin, .vault-fx-bill { position: absolute; opacity: 0; top: -8px; }
.vault-fx-coin {
  left: 38%; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-bright); border: 1.5px solid var(--gold); color: var(--gold);
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.vault-fx-coin:nth-child(2) { left: 56%; }
.vault-fx-bill { left: 47%; width: 26px; height: 16px; border-radius: 3px; background: var(--accent-soft); border: 1.5px solid var(--accent-2); }
.desktop-vault-fx.play .vault-fx-coin,
.desktop-vault-fx.play .vault-fx-bill { animation: vault-fx-drop 0.75s ease-in forwards; }
.desktop-vault-fx.play .vault-fx-coin:nth-child(2) { animation-delay: 0.08s; }
.desktop-vault-fx.play .vault-fx-bill { animation-delay: 0.16s; }
@keyframes vault-fx-drop {
  0% { opacity: 0; transform: translateY(-8px) scale(0.8); }
  25% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(66px) scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-vault-fx.play .vault-fx-coin,
  .desktop-vault-fx.play .vault-fx-bill { animation: none !important; opacity: 0 !important; }
}

/* ---------- Werbungskosten-Pauschale: (i)-Hinweis-Popover ---------- */
.pauschale-tracker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pauschale-tracker-head h2 { margin: 0; }
.pauschale-info-btn {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: var(--accent-soft); border: 1.5px solid var(--accent); color: var(--accent-2);
  font-size: 0.78rem; font-weight: 800; font-style: italic; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
.pauschale-info-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); filter: none; box-shadow: none; transform: none; }
.pauschale-info-popover {
  background: var(--bg-accent-a); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 8px 0; font-size: 0.82rem; color: var(--ink);
}
.pauschale-info-popover p { margin: 0; }

/* ---------- Desktop: Belege als flexibles Karten-Grid (ersetzt die volle Tabelle) ---------- */
.desktop-receipt-grid-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.desktop-receipt-grid-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.desktop-receipt-grid-actions button { white-space: nowrap; }

.desktop-receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 134px;
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}
.desktop-receipt-grid, #all-receipts-overlay .receipt-row-list.desktop-cards-mode { align-items: stretch; grid-auto-rows: 134px; }
.receipt-grid-card {
  display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; box-shadow: none; color: var(--ink);
  font-weight: 400; letter-spacing: normal; cursor: pointer;
  transition: grid-column 0.32s ease, grid-row 0.32s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.receipt-grid-card:hover { border-color: var(--accent); }
.receipt-grid-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.receipt-grid-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.receipt-grid-card-amount { font-weight: 800; font-size: 1.05rem; color: var(--accent-2); }
.receipt-grid-card-desc { min-height: 2.55em; font-weight: 700; line-height: 1.28; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.receipt-grid-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.78rem; color: var(--muted); }
.receipt-grid-card-meta { margin-top: auto; min-height: 1.2em; }
.receipt-grid-card-id {
  display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font-size: .7rem; font-weight: 800;
  letter-spacing: .04em; line-height: 1; white-space: nowrap;
}

.receipt-grid-card-detail {
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.receipt-grid-card-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.receipt-grid-card-detail-row:last-of-type { border-bottom: none; }
.receipt-grid-card-detail-label { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.receipt-grid-card-detail-value { text-align: right; }
.receipt-grid-card-detail-actions { display: flex; gap: 8px; margin-top: 10px; }
.receipt-grid-card-detail-actions button { flex: 1; }
.receipt-grid-card-calculation-toggle { width: 100%; margin: 8px 0 2px; padding: 9px 10px; }
@media (prefers-reduced-motion: reduce) {
  .receipt-grid-card { transition: none; }
}

/* "Suche & Sortierung" am Desktop: gleiche Filter-/Sortierlogik wie am Handy, aber als
   Karten-Grid (mehrere Karten pro Zeile) statt schmaler Zeilen-Liste, in einem breiten Panel. */
@media (min-width: 721px) {
  /* Profil-Menü: nach einer Auswahl bleibt nur der angeforderte Bereich sichtbar. */
  #tab-profil.profile-focus-personal #profil-section-abo,
  #tab-profil.profile-focus-personal #profil-section-allgemein,
  #tab-profil.profile-focus-general #profil-section-abo,
  #tab-profil.profile-focus-general #profil-section-allgemein,
  #tab-profil.profile-focus-security #profil-section-abo,
  #tab-profil.profile-focus-security #profil-section-persoenlich,
  #tab-profil.profile-focus-abo #profil-section-persoenlich,
  #tab-profil.profile-focus-abo #profil-section-allgemein { display: none; }
  #tab-profil.profile-focus-personal #profil-section-persoenlich,
  #tab-profil.profile-focus-general #profil-section-persoenlich,
  #tab-profil.profile-focus-security #profil-section-allgemein,
  #tab-profil.profile-focus-abo #profil-section-abo { display: block; }
  #tab-profil.profile-focus-personal .two-col-layout,
  #tab-profil.profile-focus-general .two-col-layout,
  #tab-profil.profile-focus-security .two-col-layout { grid-template-columns: minmax(0, 1fr); }

  .mobile-overlay-export-actions { display: none; }
  #all-receipts-overlay.desktop-wide-overlay .mobile-overlay-sheet-center { max-width: 1180px; width: 92vw; max-height: 82vh; }
  #all-receipts-overlay .receipt-row-list.desktop-cards-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 12px;
    grid-auto-rows: 148px;
  }
  #all-receipts-overlay .receipt-row-list.desktop-cards-mode .receipt-grid-card { cursor: pointer; }
}

/* Beleg-Detail als zentriertes Lightbox-Overlay (Klick auf Karte im Belege-Grid) statt
   In-Grid-Ausklapp - Hintergrund wird über .mobile-overlay-backdrop abgedunkelt. */
@media (min-width: 721px) {
  .desktop-receipt-lightbox-sheet { max-width: 560px; max-height: 84vh; overflow-y: auto; }
  .desktop-receipt-lightbox-sheet .receipt-grid-card-detail { margin-top: 14px; }
}

/* ---------- Desktop-Feinschliff: main-content Karten etwas mehr Tiefe/Hierarchie geben
   (>720px only, Handy-Kartenoptik in @media(max-width:720px) bleibt unangetastet) ---------- */
@media (min-width: 721px) {
  .main-content .card {
    box-shadow: 0 1px 3px rgba(23, 26, 43, 0.05), 0 18px 34px -22px rgba(23, 26, 43, 0.22);
  }
  .main-content .card h2 { font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
  .main-content .card p.muted { margin-bottom: 6px; }
  .belege-rail { gap: 16px; }
  .two-col-rail { gap: 16px; }
}

/* ---------- Generisches zweispaltiges Layout (Haupt + Info-Rail) für weitere Tabs ---------- */
.two-col-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.two-col-main { min-width: 0; }
.two-col-rail { display: flex; flex-direction: column; gap: 14px; }
.two-col-rail .card { margin-bottom: 0; }
/* Am Handy verschmelzen Passkeys/Support/Passwort/Konto-löschen/Darstellung optisch zu einer
   "Allgemein"-Karte (siehe @media 720px unten) - am Desktop bleibt es display:contents, also
   unsichtbar/wirkungslos, sodass die einzelnen .card-Elemente exakt wie bisher gerendert werden. */
.profil-allgemein-wrap { display: contents; }
@media (min-width: 1180px) {
  .two-col-layout { grid-template-columns: 1fr 300px; }
  .two-col-rail { position: sticky; top: 0; }
}

/* Erklärungen-Tab: Kategorie-Sprungmarken in der Rail */
.category-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.category-toc a { display: block; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.category-toc a:hover { background: var(--accent-soft); border-left-color: var(--accent); }

/* Desktop-Karten mit Klick-zum-Vergrößern: gemeinsame Toggle-Mechanik für Erklärungen-Karten
   und die "Eckwerte"-Rail (Pendler/AfA). Nur ab 721px aktiv - am Handy bleibt alles wie bisher
   immer sichtbar/ausgeklappt. */
@media (min-width: 721px) {
  .expand-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    cursor: pointer;
  }
  .expand-chevron { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; color: var(--muted); transition: transform 0.25s ease; }
  .is-expanded .expand-chevron { transform: rotate(180deg); }
  .expand-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
  .expand-detail > div { overflow: hidden; min-height: 0; padding: 0 20px; }
  .is-expanded .expand-detail { grid-template-rows: 1fr; }
  .is-expanded .expand-detail > div { padding: 0 20px 18px; }

  /* Erklärungen-Tab: Kartei-Karten-Grid, das sich beim Öffnen an Ort und Stelle vergrößert */
  #categories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
  .category-card { cursor: default; padding: 0; overflow: hidden; }
  .category-card-heading h2 { margin: 0 0 4px; font-size: 1.05rem; }
  .category-card-heading p { margin: 0; }
  .category-card.is-expanded { grid-column: 1 / -1; box-shadow: 0 18px 40px -20px rgba(23, 26, 43, 0.28); }

  /* Pendler/AfA: "Eckwerte"-Rail-Karte hinter Klick versteckt, damit der Rechner im Vordergrund bleibt */
  .eckwerte-card { padding: 0; overflow: hidden; }
  .eckwerte-card .expand-toggle h2 { margin: 0 0 4px; font-size: 1.05rem; }
  .eckwerte-card .expand-toggle p { margin: 0; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .expand-detail, .expand-chevron { transition: none; }
}

/* Kleine Viewports: Expand-Trigger bleiben kompakte Text-Header und erben nicht
   die große globale CTA-Buttonfläche. Die Details bleiben mobil sichtbar. */
@media (max-width: 720px) {
  .expand-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 18px 20px;
    color: var(--ink);
    cursor: pointer;
    position: relative;
    z-index: 1;
  }
  .expand-toggle::after { display: none !important; }
  .expand-toggle:hover:not(:disabled), .expand-toggle:active:not(:disabled) { background: transparent; color: var(--ink); filter: none; box-shadow: none; transform: none; }
  .expand-toggle h2 { margin: 0 0 4px; font-size: 1.05rem; }
  .expand-toggle p { margin: 0; }
  .expand-chevron { flex-shrink: 0; width: 18px; height: 18px; margin-top: 4px; color: var(--muted); }
  .expand-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .expand-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
  .expand-detail > div { overflow: hidden; min-height: 0; padding: 0 20px; }
  .is-expanded .expand-detail { grid-template-rows: 1fr; }
  .is-expanded .expand-detail > div { padding: 0 20px 18px; }
  .eckwerte-card { padding: 0; overflow: hidden; }
}

.expand-toggle::after { display: none !important; pointer-events: none; }

/* Pendler/AfA-Rail: kompakte Eckwerte-Liste */
.fact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fact-list dt { font-size: 0.76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.fact-list dd { margin: 2px 0 0; font-size: 0.87rem; }

/* Sehr breite Screens: main-content-Fläche etwas weiter öffnen, damit Tabellen/Grids mehr Platz nutzen */
@media (min-width: 1600px) {
  .main-content { max-width: 1440px; }
}

/* Dashboard/Belege/Admin nutzen am Desktop/Tablet die volle verfügbare Breite statt der sonst
   üblichen main-content-Deckelung (auch auf sehr breiten Screens, siehe 1600px-Regel oben - diese
   Regel steht bewusst NACH dieser Stelle im Cascade und hat durch :has() zusätzlich höhere
   Spezifität, damit hier wirklich "max-width: none" gewinnt statt wieder auf 1440px gedeckelt zu
   werden). Innen sorgen die jeweiligen Grids (repeat(auto-fit, minmax(...))) für sinnvolles
   Umbrechen statt einer harten Breakpoint-Kante. */
@media (min-width: 721px) {
  .main-content:has(#tab-dashboard:not(.hidden)),
  .main-content:has(#tab-belege:not(.hidden)),
  .main-content:has(#tab-admin:not(.hidden)),
  .main-content:has(#tab-chatbot:not(.hidden)) { max-width: none; }
}

.main-content.drop-target-active::after {
  content: '';
  position: fixed;
  inset: 0;
  left: var(--sidebar-w);
  background: var(--accent-soft);
  opacity: 0.55;
  border: 3px dashed var(--accent);
  pointer-events: none;
  z-index: 4;
}
@media (max-width: 720px) {
  .main-content.drop-target-active::after { left: 0; }
}

/* ---------- Theme-Toggle, Admin-Link, Profil-Menü im Header ---------- */
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--card); color: var(--muted);
  border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: none; padding: 0;
}

/* ---------- Credits-Anzeige im Header (neben der Jahres-Auswahl) ---------- */
.credits-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #0aa89a 100%);
  color: #ffffff; border: none; border-radius: 999px;
  padding: 7px 14px; font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(15, 118, 110, .28);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.credits-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 118, 110, .36); }
.credits-pill svg { width: 16px; height: 16px; flex-shrink: 0; fill: rgba(255,255,255,.25); }
.credits-pill.is-low { background: var(--accent-soft); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 42%, var(--border)); box-shadow: none; }
@media (max-width: 720px) {
  .credits-pill { padding: 6px 10px; font-size: 0.78rem; }
}

/* ---------- Admin "Als Nutzer:in anzeigen"-Banner ---------- */
.impersonation-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: #b8860b; color: #1a1200; font-weight: 700; font-size: 0.85rem;
  text-align: center; padding: 8px 16px; display: flex; align-items: center;
  justify-content: center; gap: 10px; flex-wrap: wrap;
}
.impersonation-banner.hidden { display: none; }
.impersonation-banner button {
  background: #1a1200; color: #ffe9a8; border: none; border-radius: 999px;
  padding: 5px 14px; font-weight: 800; font-size: 0.8rem; cursor: pointer;
}

/* ---------- Credit-Gutschrift-Hinweis (Popup beim Login) ---------- */
.credit-notice-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.credit-notice-list li { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.9rem; }
.credit-notice-list li.credit-notice-minus { background: rgba(220, 38, 38, .1); }
.header-icon-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink); filter: none; box-shadow: none; transform: none; }
.header-icon-btn svg { width: 18px; height: 18px; }

.theme-switch {
  position: relative;
  width: 48px; height: 34px; flex-shrink: 0;
  background: var(--accent-soft);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}
.theme-switch:hover:not(:disabled) { filter: none; box-shadow: none; transform: none; }
.theme-switch-knob {
  position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
  transition: transform 0.18s ease;
}
.theme-switch-knob svg { width: 13px; height: 13px; }
:root[data-theme="dark"] .theme-switch-knob { transform: translateX(16px); }

.profile-menu-wrap { position: relative; }
.profile-menu-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 4px 12px 4px 4px;
  box-shadow: none; color: var(--ink); font-size: 0.83rem; font-weight: 600;
}
.profile-menu-trigger:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.profile-menu-trigger .avatar-circle { width: 28px; height: 28px; font-size: 0.72rem; }
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: max-content; min-width: 220px; max-width: min(460px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.3);
  padding: 8px;
  z-index: 20;
}
.profile-menu-email { display: block; max-width: 100%; padding: 8px 10px 10px; font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu button.link-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; color: var(--ink); border: none; box-shadow: none;
  font-weight: 600; font-size: 0.87rem; padding: 9px 10px; border-radius: 8px; text-align: left;
}
.profile-menu button.link-item:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.profile-menu button.link-item.danger-item { color: var(--danger); }
.profile-menu button.link-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.profile-menu button.link-item + button.link-item { margin-top: 2px; }

.profile-form-section-heading {
  margin: 22px 0 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
  scroll-margin-top: 24px;
}
.profile-form-section-heading h3 { margin: 2px 0 3px; font-size: 1rem; }
.profile-form-section-heading p { margin: 0; font-size: .82rem; }
.profile-form-section-heading-general { margin-top: 28px; }
.profile-security-heading { margin-bottom: 14px; scroll-margin-top: 24px; }
.profile-security-heading h2 { margin: 3px 0 4px; }
.profile-security-heading p { margin: 0; }

/* ---------- Werbungskosten-Pauschale-Tracker ---------- */
.pauschale-bar {
  position: relative; display: block; width: 100%; height: 22px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden; margin-top: 8px; padding: 0; border: none;
  box-shadow: none; cursor: pointer; transition: height 0.2s ease;
}
.pauschale-bar:hover:not(:disabled) { filter: none; box-shadow: none; transform: none; }
.pauschale-bar.expanded { height: 34px; }
.pauschale-bar-fill {
  position: relative; width: 0; height: 100%; border-radius: 999px;
  background: var(--danger); transition: width 0.3s ease, background 0.3s ease;
  display: flex; align-items: center; justify-content: flex-end;
}
.pauschale-bar-fill.mid { background: var(--gold-bright); }
.pauschale-bar-fill.over { background: var(--success); }
.pauschale-bar-fill span {
  padding: 0 10px; font-size: 0.76rem; font-weight: 800; color: #fff;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pauschale-bar-mark {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(0, 0, 0, 0.25); pointer-events: none;
}
:root[data-theme="dark"] .pauschale-bar-mark { background: rgba(255, 255, 255, 0.3); }
.pauschale-bar-mark-label {
  text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--muted);
  margin-top: 4px;
}

/* ---------- Gesperrte Features (Plan-Gating) ---------- */
.lock-icon { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; color: var(--muted); }
#beleg-upload-card form > .row button .lock-icon { margin-left: 6px; width: 15px; height: 15px; vertical-align: -2px; }
#beleg-upload-card form > .row button { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.locked-feature-note {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-soft); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
  font-size: 0.85rem; color: var(--muted);
}
.locked-feature-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
.locked-feature-card { text-align: center; padding: 40px 24px; }
.locked-feature-card svg { color: var(--muted); margin-bottom: 10px; }
.locked-feature-card p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ---------- Pendlerpauschale: Tage-Slider ---------- */
#pendler-form input[type="range"] {
  width: 100%; height: 24px; margin: 6px 0 0; appearance: none; -webkit-appearance: none;
  background: transparent; accent-color: var(--accent);
}
#pendler-form input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--border); }
#pendler-form input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); }
#pendler-form input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border: 0; border-radius: 50%; background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 72%, transparent);
}
#pendler-form input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 72%, transparent); }
#pendler-whatif { margin-top: 10px; }

/* ---------- Pendlerpauschale: kompakte Schrittkarte ---------- */
.pendler-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.pendler-card-head-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.pendler-rail-actions { display:flex; flex-direction:column; gap:14px; }
.pendler-periods-trigger { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 11px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--ink); font-size:.78rem; font-weight:800; white-space:nowrap; text-align:center; box-shadow:none; }
.pendler-periods-trigger:hover { border-color:var(--accent); background:var(--accent-soft); transform:none; }
.pendler-eyebrow { display:block; color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.pendler-card-head h2 { margin:0; }
.pendler-source-link { flex:0 0 auto; color:var(--accent); font-size:.82rem; font-weight:700; white-space:nowrap; }
.pendler-intro { color:var(--muted); margin:8px 0 18px; max-width:70ch; }
.pendler-edit-note { display:grid; gap:3px; margin:0 0 12px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--accent) 62%, var(--border)); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent-soft) 68%, var(--card)); }
.pendler-edit-note-kicker { color:var(--accent-2); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.pendler-edit-note strong { color:var(--ink); font-size:.95rem; }
.pendler-mobile-route { display:none; }
.pendler-route-line { display:flex; align-items:center; gap:10px; color:var(--accent-2); }
.pendler-route-home, .pendler-route-work { width:24px; height:24px; flex:0 0 24px; }
.pendler-route-track { position:relative; display:block; flex:1; height:2px; background:color-mix(in srgb, var(--accent-2) 55%, var(--border)); }
.pendler-route-track::after { display:none; }
.pendler-route-runner { position:absolute; left:0; top:50%; width:28px; height:28px; object-fit:contain; transform:translate(-4px,-50%); animation:pendler-route-travel 4.8s ease-in-out infinite alternate; }
@keyframes pendler-route-travel { from { left:0; } to { left:calc(100% - 28px); } }
.pendler-route-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.66rem; font-weight:700; margin-top:5px; }
@media (prefers-reduced-motion: reduce) { .pendler-route-runner { animation:none; left:calc(50% - 14px); } }
.pendler-bmf-callout { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:14px 0 18px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent-soft) 72%, var(--card)); }
.pendler-bmf-callout strong { display:block; font-size:.86rem; }
.pendler-bmf-callout span { display:block; color:var(--muted); font-size:.75rem; margin-top:2px; }
.pendler-bmf-callout a { flex:0 0 auto; color:var(--accent); font-size:.8rem; font-weight:800; white-space:nowrap; }
.pendler-step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pendler-step { position:relative; min-width:0; padding:16px 16px 14px 48px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); }
.pendler-summary-step { grid-column:1 / -1; }
.pendler-summary-step .pendler-step-body { padding-right:0; }
.pendler-step-number { position:absolute; left:16px; top:16px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:var(--accent); background:var(--accent-soft); font-weight:800; font-size:.78rem; }
.pendler-step h3 { margin:0 0 3px; font-size:.98rem; }
.pendler-step p { margin:0; font-size:.8rem; line-height:1.35; }
.pendler-input-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:12px; }
.pendler-input-grid label, .pendler-month-row label { margin:0; font-size:.78rem; font-weight:700; }
.pendler-input-grid label .muted { display:inline-block; margin-left:3px; font-size:.7rem; font-weight:500; vertical-align:baseline; }
.pendler-input-grid input, .pendler-month-row select { margin-top:5px; }
.pendler-address-hint { margin:12px 0 0 !important; color:var(--muted); font-size:.76rem !important; line-height:1.4 !important; }
.pendler-autofill-btn { width:100%; margin-top:10px; padding:9px 12px; font-size:.8rem; }
.pendler-route-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; margin-top:8px; padding:10px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); text-align:left; box-shadow:none; cursor:pointer; }
.pendler-route-summary:hover { border-color:var(--accent); background:var(--accent-soft); transform:none; box-shadow:0 8px 18px -16px var(--accent); }
.pendler-route-summary-content { display:grid; gap:2px; min-width:0; }
.pendler-route-summary-title { color:var(--ink); font-size:.8rem; font-weight:800; }
.pendler-route-summary-meta { color:var(--ink); font-size:.78rem; line-height:1.3; overflow-wrap:anywhere; }
.pendler-route-summary-content small { color:var(--muted); font-size:.7rem; line-height:1.25; }
.pendler-route-summary-chevron { color:var(--accent); transition:transform .18s ease; }
.pendler-route-summary.is-open .pendler-route-summary-chevron { transform:rotate(180deg); }
.pendler-route-summary-detail { display:grid; gap:4px; margin-top:6px; padding:10px; border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius:10px; background:color-mix(in srgb, var(--card) 84%, var(--accent-soft)); color:var(--muted); font-size:.74rem; line-height:1.4; animation:pendler-alert-in .18s ease-out; }
.pendler-route-summary-detail strong { color:var(--ink); }
.pendler-route-summary-detail small { color:var(--muted); }
.pendler-check { display:flex; align-items:center; gap:9px; margin:14px 0 0; font-size:.84rem; font-weight:700; }
.pendler-check input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pendler-toggle-ui { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--bg); }
.pendler-toggle-option { min-width:34px; padding:4px 7px; border-radius:999px; color:var(--muted); font-size:.68rem; font-weight:800; text-align:center; }
.pendler-toggle-yes { background:var(--accent); color:var(--accent-ink); }
.pendler-check input:not(:checked) + .pendler-toggle-ui .pendler-toggle-yes { background:transparent; color:var(--muted); }
.pendler-check input:not(:checked) + .pendler-toggle-ui .pendler-toggle-no { background:color-mix(in srgb, var(--muted) 18%, transparent); color:var(--ink); }
.pendler-check:focus-within { outline:2px solid var(--accent); outline-offset:3px; border-radius:10px; }
.pendler-step-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pendler-step-title strong { color:var(--accent); text-align:right; font-size:.8rem; }
.pendler-step-header { display:flex; align-items:flex-start; gap:10px; min-width:0; }
.pendler-step-header > span:nth-child(2) { min-width:0; }
.pendler-step-header h3 { margin:0 0 3px; font-size:.98rem; }
.pendler-step-header p { margin:0; font-size:.8rem; line-height:1.35; }
.pendler-step-header > strong { margin-left:auto; color:var(--accent); text-align:right; font-size:.8rem; white-space:nowrap; }
.pendler-step-chevron { display:none; margin-left:auto; color:var(--muted); font-size:1.1rem; line-height:1; }
.pendler-choice-hint { margin:0 0 10px; color:var(--muted); font-size:.76rem; line-height:1.4; }
.pendler-transit-details { margin:10px 0 12px; font-size:.75rem; }
.pendler-transit-current { display:grid; gap:3px; margin-bottom:8px; padding:9px 10px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:color-mix(in srgb, var(--accent-soft) 58%, var(--card)); }
.pendler-transit-current strong { color:var(--ink); font-size:.76rem; }
.pendler-transit-current span, .pendler-transit-current small { color:var(--muted); line-height:1.35; }
.pendler-transit-toggle { position:relative; display:grid; place-items:center; flex:0 0 48px; width:48px; height:42px; padding:0; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border)); border-radius:14px; background:linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 82%, var(--card)), var(--card)); color:var(--accent); box-shadow:0 8px 20px -13px var(--accent), inset 0 0 18px color-mix(in srgb, var(--accent) 12%, transparent); }
.pendler-transit-toggle::before { content:""; position:absolute; left:8px; right:8px; bottom:6px; height:2px; border-radius:999px; background:color-mix(in srgb, var(--accent) 68%, transparent); box-shadow:12px 0 0 -0.2px color-mix(in srgb, var(--accent) 28%, transparent); animation:pendler-train-rail 1.5s linear infinite; }
.pendler-transit-toggle::after { content:""; position:absolute; inset:3px; border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:11px; pointer-events:none; animation:pendler-train-pulse 2.2s ease-in-out infinite; }
.pendler-transit-toggle svg { position:relative; z-index:1; display:block; width:24px; height:24px; animation:pendler-train-bob 1.4s ease-in-out infinite; }
.pendler-transit-glyph { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.pendler-transit-spark { position:absolute; z-index:0; width:4px; height:4px; top:10px; right:8px; border-radius:50%; background:var(--accent-2); box-shadow:-8px 5px 0 -1px var(--accent), 4px 9px 0 -1px var(--accent-2); animation:pendler-train-spark 1.8s ease-in-out infinite; }
.pendler-transit-toggle:hover { transform:translateY(-2px); box-shadow:0 12px 26px -11px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); background:color-mix(in srgb, var(--accent-soft) 90%, var(--card)); }
.pendler-transit-details.is-open .pendler-transit-toggle { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes pendler-train-bob { 0%,100% { transform:translateY(1px); } 50% { transform:translateY(-1px); } }
@keyframes pendler-train-rail { from { transform:translateX(-8px); opacity:.55; } to { transform:translateX(8px); opacity:1; } }
@keyframes pendler-train-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes pendler-train-spark { 0%,100% { transform:translate(0,0) scale(.75); opacity:.55; } 50% { transform:translate(-4px,-3px) scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .pendler-transit-toggle svg, .pendler-transit-toggle::before, .pendler-transit-toggle::after, .pendler-transit-spark { animation:none; } }
.pendler-transit-panel { display:none; margin-top:9px; padding:12px; border:1px solid color-mix(in srgb, var(--accent) 58%, var(--border)); border-radius:12px; background:color-mix(in srgb, var(--accent-soft) 58%, var(--card)); box-shadow:0 16px 30px -22px var(--accent); }
.pendler-transit-details.is-open .pendler-transit-panel { display:grid; gap:7px; animation:pendler-alert-in .18s ease-out; }
@keyframes pendler-alert-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.pendler-transit-route { display:grid; gap:2px; padding-top:6px; border-top:1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); }
.pendler-transit-route b { font-size:.75rem; }
.pendler-transit-endpoints { color:var(--muted); }
.pendler-transit-route > span:not(.pendler-transit-endpoints) { color:var(--muted); padding-left:8px; }
.pendler-days-step input[type="range"] { margin-top:12px !important; }
.pendler-range-labels { display:flex; justify-content:space-between; gap:8px; color:var(--accent); font-size:.68rem; font-weight:800; margin-top:2px; text-shadow:0 0 10px color-mix(in srgb, var(--accent) 42%, transparent); }
.pendler-range-labels span { color:#8ff5e7; white-space:nowrap; }
.pendler-range-labels span:nth-child(2) { color:var(--accent); text-shadow:0 0 12px color-mix(in srgb, var(--accent) 78%, transparent); }
.pendler-range-labels span:last-child { color:#a5fff3; }
.pendler-month-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.pendler-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pendler-actions > #pendler-periods-list { display:inline-flex; flex:1 1 0; min-width:190px; }
.pendler-actions > #pendler-periods-list:empty { display:none; }
.pendler-actions > #pendler-periods-list .pendler-periods-trigger { width:100%; min-height:0; padding:11px 18px; border-radius:var(--radius-sm); font-size:inherit; font-weight:700; }
.pendler-actions button:first-child { min-width:190px; }
.eckwerte-card .fact-list { margin-top:0; }
.pendler-periods-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 8px; }
.pendler-periods-heading h3 { margin:0; font-size:.92rem; }
.pendler-periods-heading span { color:var(--muted); font-size:.76rem; }
.pendler-period-card { margin:0 0 9px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--card); transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.pendler-period-card:hover, .pendler-period-card:focus-within { border-color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 35%, var(--card)); box-shadow:0 10px 24px -18px var(--accent); }
.pendler-period-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:0; background:transparent; color:var(--text); text-align:left; box-shadow:none; cursor:pointer; }
.pendler-period-summary:hover { transform:none; background:transparent; }
.pendler-period-title { display:flex; align-items:center; gap:8px; min-width:0; font-weight:800; }
.pendler-period-title::before { content:'+'; display:grid; place-items:center; flex:0 0 auto; width:20px; height:20px; padding:0; border-radius:50%; color:var(--accent); background:var(--accent-soft); font-family:Arial, sans-serif; font-size:1rem; line-height:1; text-align:center; }
.pendler-period-card.is-expanded .pendler-period-title::before { content:'−'; }
.pendler-period-meta { display:block; color:var(--muted); font-size:.76rem; font-weight:500; margin-top:3px; padding-left:28px; }
.pendler-period-amount { color:var(--accent); font-size:.86rem; font-weight:800; white-space:nowrap; }
.pendler-period-details { display:none; padding:0 14px 13px 54px; color:var(--muted); font-size:.78rem; }
.pendler-period-card.is-expanded .pendler-period-details { display:block; }
.pendler-period-details p { margin:0 0 10px; }
.pendler-period-breakdown { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; margin-bottom:11px; }
.pendler-period-breakdown span { color:var(--muted); }
.pendler-period-breakdown strong { color:var(--ink); text-align:right; }
.pendler-saved-overview { margin-bottom:12px; padding:12px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent-soft) 42%, var(--card)); }
.pendler-saved-overview .pendler-total-heading { margin-bottom:12px; }
.pendler-saved-overview .pendler-total-lines { gap:7px; }
.pendler-saved-overview .pendler-total-lines > div { padding:8px 10px; }
.pendler-total-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pendler-total-heading span, .pendler-total-heading small { display:block; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.pendler-total-heading strong { display:block; margin-top:4px; color:var(--accent-2); font-size:1.55rem; line-height:1.05; }
.pendler-total-heading small { text-align:right; font-weight:600; text-transform:none; letter-spacing:0; }
.pendler-total-lines { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.pendler-total-lines > div { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent-soft) 55%, var(--card)); }
.pendler-total-lines span { color:var(--muted); font-size:.75rem; }
.pendler-total-lines strong { font-size:.95rem; }
.pendler-period-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pendler-period-actions button { padding:7px 11px; font-size:.75rem; }
.pendler-periods-mobile-toggle { display:none; }
.pendler-periods-items { display:block; }
.pendler-save-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; }
.pendler-save-modal.hidden { display:none; }
.pendler-save-backdrop { position:absolute; inset:0; background:rgba(5,8,12,.76); backdrop-filter:blur(5px); }
.pendler-save-card { position:relative; width:min(100%, 500px); padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); box-shadow:0 22px 70px rgba(0,0,0,.36); }
.pendler-period-list-modal { position:fixed; inset:0; z-index:1001; display:grid; place-items:center; padding:18px; }
.pendler-period-list-modal.hidden { display:none; }
.pendler-period-list-backdrop { position:absolute; inset:0; background:rgba(5,8,12,.80); backdrop-filter:blur(9px) brightness(.58); -webkit-backdrop-filter:blur(9px) brightness(.58); }
.pendler-period-list-card { position:relative; z-index:1; width:min(100%, 520px); max-height:min(88vh, 760px); overflow:auto; padding:26px 20px 20px; border:1px solid var(--accent); border-radius:var(--radius); background:var(--card); box-shadow:0 24px 80px rgba(0,0,0,.5); }
.pendler-period-list-card h2 { margin:0 36px 8px 0; }
.pendler-period-list-card > .muted { margin:0 0 14px; font-size:.82rem; }
.pendler-period-list-card .pendler-periods-items { display:block; }
.pendler-period-list-card .pendler-periods-heading { display:none; }
.pendler-period-list-card .pendler-period-card { background:color-mix(in srgb, var(--accent-soft) 46%, var(--card)); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pendler-info-modal { position:fixed; inset:0; z-index:1002; display:grid; place-items:center; padding:18px; }
.pendler-info-modal.hidden { display:none; }
.pendler-info-backdrop { position:absolute; inset:0; background:rgba(5,8,12,.80); backdrop-filter:blur(9px) brightness(.58); -webkit-backdrop-filter:blur(9px) brightness(.58); }
.pendler-info-card { position:relative; z-index:1; width:min(100%, 520px); max-height:min(82vh, 720px); overflow:auto; padding:26px 20px 20px; border:1px solid var(--accent); border-radius:var(--radius); background:var(--card); box-shadow:0 24px 80px rgba(0,0,0,.5); }
.pendler-info-card h2 { margin:0 36px 14px 0; }
.pendler-info-card #pendler-info-content { display:grid; gap:8px; }
.pendler-info-card .pendler-transit-route { padding:10px 0 0; }
.pendler-save-card .modal-close { position:absolute; top:12px; right:12px; }
.pendler-modal-kicker { display:block; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.pendler-save-card h2 { margin:0 34px 8px 0; }
.pendler-save-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:18px 0; }
.pendler-save-fact { padding:10px 12px; border-radius:var(--radius-sm); background:var(--card); }
.pendler-save-fact span { display:block; color:var(--muted); font-size:.7rem; }
.pendler-save-fact strong { display:block; margin-top:2px; font-size:.94rem; }
.pendler-save-fact-wide { grid-column:1 / -1; }
.pendler-save-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; }
.button-like { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-contrast, #071413); font-weight:800; text-decoration:none; }

@media (max-width: 720px) {
  #tab-pendler .two-col-layout { position:relative; }
  #tab-pendler .two-col-layout > .two-col-rail { position:absolute; top:8px; left:12px; right:12px; z-index:5; width:auto; pointer-events:none; }
  #tab-pendler .pendler-rail-actions { width:100%; justify-content:flex-end; pointer-events:auto; }
  .pendler-card-head { gap:10px; }
  .pendler-card-head { display:grid; grid-template-columns:1fr; }
  .pendler-card-head-actions { justify-content:flex-start; gap:8px; }
  .pendler-rail-actions { flex-direction:row; align-items:flex-start; gap:6px; }
  .pendler-periods-trigger { min-height:34px; padding:7px 10px; font-size:.76rem; }
  .pendler-source-link { font-size:.75rem; }
  .pendler-intro { margin:6px 0 10px; font-size:.8rem; }
  .pendler-mobile-route { display:block; margin:8px 2px 14px; padding:4px 4px 0; }
  .pendler-bmf-callout { display:none; }
  .pendler-bmf-callout { align-items:flex-start; flex-direction:column; gap:7px; }
  .pendler-bmf-callout a { white-space:normal; }
  .pendler-step-grid { grid-template-columns:1fr; gap:10px; }
  .pendler-step { padding:0; overflow:hidden; }
  .pendler-step-header { min-height:52px; padding:10px 12px 9px 42px; align-items:center; cursor:pointer; }
  .pendler-step-header:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .pendler-step-number { left:12px; top:14px; width:22px; height:22px; }
  .pendler-step-chevron { display:block; }
  .pendler-step-body { display:none; padding:0 12px 12px 42px; }
  .pendler-step.is-open .pendler-step-body { display:block; }
  .pendler-step.is-open .pendler-step-chevron { transform:rotate(180deg); }
  .pendler-step-header > strong { font-size:.72rem; }
  .pendler-choice-hint { font-size:.74rem; }
  .pendler-autofill-btn { min-height:42px; margin-top:8px; }
  .pendler-route-summary { min-height:54px; margin:8px 0 0; }
  .pendler-transit-details { margin:8px 0 8px; }
  .pendler-transit-toggle { min-width:40px; min-height:40px; }
  .pendler-transit-panel { padding:10px; }
  .pendler-choice-row { display:flex; align-items:center; gap:8px; }
  .pendler-choice-row .pendler-check { flex:1; min-width:0; margin:0; }
  .pendler-choice-row .pendler-transit-details { flex:0 0 auto; margin:0; }
  .pendler-info-card { width:min(100%, 380px); max-height:78vh; padding:23px 16px 17px; }
  .pendler-info-card h2 { font-size:1.08rem; margin-bottom:12px; }
  .pendler-check { margin:9px 0 0; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb, var(--card) 82%, var(--accent-soft)); }
  .pendler-input-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .pendler-range-labels { font-size:.62rem; }
  .pendler-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
  .pendler-actions button:first-child { width:100%; min-width:0; }
  .pendler-actions > #pendler-periods-list { width:100%; min-width:0; max-width:100%; }
  .pendler-actions > #pendler-periods-list .pendler-periods-trigger { min-width:0; padding-inline:18px; font-size:inherit; }
  .pendler-actions > #pendler-cancel-edit-btn { grid-column:1 / -1; width:100%; }
  .pendler-period-summary { grid-template-columns:minmax(0,1fr); gap:5px; }
  .pendler-period-amount { padding-left:28px; }
  .pendler-period-details { padding-left:42px; }
  .pendler-periods-mobile-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; margin:12px 0 8px; padding:12px 14px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--ink); text-align:left; box-shadow:none; }
  .pendler-periods-mobile-toggle span:first-child { display:flex; flex-direction:column; gap:3px; }
  .pendler-periods-mobile-toggle small { color:var(--muted); font-size:.72rem; }
  #pendler-periods-list.has-multiple .pendler-periods-items { display:none; }
  .pendler-period-list-card { width:min(100%, 460px); max-height:86vh; padding:24px 14px 14px; }
  .pendler-total-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .pendler-total-heading small { text-align:left; }
  .pendler-total-lines { grid-template-columns:1fr; }
  #tab-pendler .two-col-main > .card { padding:14px 12px 18px; }
  #tab-pendler .pendler-card-head h2 { font-size:1.35rem; }
  #tab-pendler .eckwerte-card { margin:0; padding:0; border-color:transparent; background:transparent; align-items:flex-end; pointer-events:auto; }
  #tab-pendler .eckwerte-card.is-expanded { padding:10px 12px 12px; border-color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 35%, var(--card)); box-shadow:0 12px 30px -18px var(--accent); }
  #tab-pendler .eckwerte-card .expand-toggle { width:auto; min-height:34px; margin-left:auto; padding:7px 11px; align-items:center; border:1px solid var(--border); border-radius:999px; background:var(--card); }
  #tab-pendler .eckwerte-card .expand-toggle h2 { margin:0; font-size:.78rem; }
  #tab-pendler .eckwerte-card .expand-toggle p { display:none; }
  #tab-pendler .eckwerte-card .expand-chevron { display:none; }
  #tab-pendler .eckwerte-card .expand-detail { width:100%; align-self:stretch; }
  #tab-pendler .eckwerte-card.is-expanded { width:min(350px, calc(100vw - 32px)); }
  #tab-pendler .eckwerte-card .expand-detail > div { position:relative; }
  #tab-pendler .eckwerte-close { position:absolute; top:0; right:0; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--ink); font-size:1.2rem; line-height:1; }
  #tab-pendler .eckwerte-close:hover { background:var(--accent); color:var(--accent-ink); }
  .pendler-bmf-callout { margin:12px 0 14px; padding:0; border:0; background:transparent; }
  .pendler-bmf-callout div { display:none; }
  .pendler-bmf-callout a { display:flex; align-items:center; justify-content:center; width:100%; min-height:42px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--accent); color:var(--accent-contrast, #071413); font-weight:800; text-decoration:none; }
  .pendler-card-head .pendler-source-link { display:none; }
  .pendler-save-card { padding:23px 18px 18px; }
  .pendler-save-actions { display:grid; grid-template-columns:1fr; }
  .pendler-save-actions button, .pendler-save-actions .button-like { width:100%; }
}

@media (max-width: 390px) {
  .pendler-card-head { display:block; }
  .pendler-card-head-actions { display:block; }
  .pendler-source-link { display:inline-block; margin-top:7px; }
  .pendler-input-grid { grid-template-columns:1fr; }
}

/* ---------- Credits aufladen (Guthaben-Popup + Kauf-Karte im Plan-Screen) ---------- */
.credits-exhausted-icon { color: var(--accent-2); background: var(--accent-soft); }
.credits-purchase-card { margin-top: 20px; }
.credits-purchase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.credits-purchase-pack { text-align: center; padding: 18px 14px; }
.credits-purchase-pack h3 { margin: 0 0 6px; font-size: 1rem; }
.credits-purchase-pack strong { display: block; font-size: 1.3rem; color: var(--accent-2); margin-bottom: 4px; }
.credits-purchase-pack button { width: 100%; margin-top: 10px; }

/* ---------- Plan-Auswahl-Screen ---------- */
.plan-screen { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 40px clamp(20px, 4vw, 64px) 72px; min-height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.plan-screen-back-top { display: block; width: auto; margin: -18px auto 14px 0; padding: 8px 13px; font-size: .82rem; }
.plan-screen-plans-actions { width: min(100%, 1640px); margin: 24px auto 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.plan-screen-credits-panel { width: min(100%, 760px); margin-inline: auto; }
.plan-screen-credit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plan-screen-credit-card { min-height: 0; padding: 16px 18px; }
.plan-screen-credit-card p { margin: 0 0 7px; }
.plan-screen-credit-card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.plan-screen-credit-card strong { display: block; margin: 0 0 8px; color: var(--accent-2); font-size: 1.35rem; }
.plan-screen-credit-card button { width: auto; margin-top: 8px; padding: 9px 14px; }
.account-type-toggle { display: inline-flex; gap: 4px; background: var(--accent-soft); border-radius: 999px; padding: 4px; margin: 18px 0 24px; }
.account-type-btn {
  background: transparent; color: var(--muted); box-shadow: none; border: none;
  padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
}
.account-type-btn:hover:not(:disabled) { filter: none; box-shadow: none; transform: none; color: var(--ink); }
.account-type-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
#plan-screen-plans-panel { width: min(100%, 1640px); margin-inline: auto; }
/* justify-content:center + Tracks mit fester Maximalbreite (statt 1fr, das immer auf volle
   Breite dehnt) - damit die Karten als GRUPPE mittig stehen, egal ob 4 (Erstauswahl bei der
   Registrierung) oder nur 3 Karten angezeigt werden (Verwalten-Modus blendet den Standard-Plan
   aus, siehe renderPlanGrid() in app.js) - mit fixen 4 Spalten wären 3 Karten sonst links
   geklebt und rechts bliebe eine leere Spalte übrig (Anton, 2026-09-05). */
.plan-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); gap: 24px; align-items: stretch; justify-content: center; }
.plan-card { display: flex; flex-direction: column; position: relative; }
.plan-screen .plan-card { min-height: 520px; padding: 30px 28px 26px; }
.plan-screen-actions { width: min(100%, 1640px); margin: 24px auto 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.plan-card-tagline { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.plan-card-price { font-size: 1.6rem; font-weight: 800; margin: 4px 0 2px; }
.plan-card-price-sub { font-size: 0.8rem; color: var(--muted); margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 6px; }
.plan-card-price-strike { font-size: 0.95rem; font-weight: 600; color: var(--muted); text-decoration: line-through; opacity: 0.75; }
.plan-card-price-new { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
/* Oben rechts (statt links), weil .plan-card-badge hier bereits oben links sitzt -
   siehe .plan-card-badge unten. */
.plan-card-offer-chip {
  position: absolute; top: -10px; right: -10px; transform: rotate(9deg); z-index: 4;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  box-shadow: 0 5px 12px -3px rgba(0, 0, 0, 0.45);
}
.plan-card-features { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.plan-card-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.87rem; }
.plan-card-features li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--success); }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 12px 30px -16px rgba(0,0,0,0.35); position: relative; padding-top: 40px; }
.plan-card-badge {
  position: absolute; top: -11px; left: 20px;
  background: var(--accent); color: var(--accent-ink); font-size: 0.68rem; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.03em; white-space: nowrap;
}
.plan-card-badge-top {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-size: 0.72rem; padding: 4px 12px;
  box-shadow: 0 4px 14px -4px rgba(45,212,191,.6);
}

/* ---------- Admin: Aktivitätsprotokoll ---------- */
.activity-log-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: 360px; overflow-y: auto; }
.activity-log-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; font-size: 0.85rem;
}
.activity-log-row:nth-child(odd) { background: var(--accent-soft); }
.activity-log-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); flex-shrink: 0; width: 105px; }
.activity-log-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.activity-log-dot.event-error { background: var(--danger); }
.activity-log-dot.event-warn { background: var(--gold-bright); }
.activity-log-dot.event-ok { background: var(--success); }
.activity-log-email { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-log-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Admin als eigene Seiten-Ansicht ---------- */
.admin-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-page-header h1 { font-size: 1.4rem; margin: 0 0 4px; }
.admin-back-btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-back-btn svg { width: 15px; height: 15px; }

/* ---------- Admin: Karten-Übersicht (Hub) vor der Detailansicht ---------- */
.admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }
.admin-hub-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 22px 20px; box-shadow: 0 1px 2px rgba(23, 26, 43, 0.03); color: var(--ink);
  font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer;
}
.admin-hub-card:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); filter: none; box-shadow: 0 10px 24px -14px rgba(13,148,136,.35); transform: translateY(-2px); }
.admin-hub-card-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.admin-hub-card-icon svg { width: 22px; height: 22px; }
.admin-hub-card-title { font-size: 1.02rem; }
.admin-hub-card-sub { font-size: 0.8rem; font-weight: 500; color: var(--muted); }

/* ---------- Admin: Detailansicht als hervorgehobenes Overlay (verzerrter/dunkler Hintergrund) ---------- */
.admin-detail-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(9, 9, 11, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: admin-backdrop-in 0.2s ease;
}
:root[data-theme="dark"] .admin-detail-backdrop { background: rgba(0, 0, 0, 0.72); }
@keyframes admin-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.admin-detail-section {
  position: fixed; z-index: 141;
  top: 4vh; left: 3vw; right: 3vw; bottom: 4vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); border-radius: 20px; border: 1px solid var(--border);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.5);
  padding: 22px 26px 34px;
  animation: admin-detail-in 0.22s ease;
}
@keyframes admin-detail-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .admin-detail-backdrop, .admin-detail-section { animation: none; }
}
.admin-detail-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-detail-panel-header h2 { margin: 0; font-size: 1.25rem; }
@media (min-width: 721px) {
  #admin-detail-accounts > .card {
    padding: 22px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 24%, var(--card)), var(--card));
  }
  #admin-detail-accounts > .card > p { max-width: 760px; margin-bottom: 16px; }
  #admin-detail-accounts > .card > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
  #admin-detail-accounts > .card > .row > button { min-width: 190px; }
  #admin-detail-accounts .table-scroll { overflow: visible; }
  #admin-users-table { border-collapse: separate; border-spacing: 0; margin-top: 18px; }
  #admin-users-table thead { display: none; }
  #admin-users-table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr)); gap: 14px; }
  #admin-users-table tr {
    display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); gap: 10px 14px;
    padding: 16px; border: 1px solid var(--border); border-radius: 16px;
    background: color-mix(in srgb, var(--card) 92%, var(--bg)); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .72);
  }
  #admin-users-table td { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: 0; text-align: left; }
  #admin-users-table td::before {
    content: attr(data-label); margin-bottom: 4px; color: var(--muted); font-size: .66rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
  }
  #admin-users-table td[data-label="Konto"] { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  #admin-users-table td[data-label=""] {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px;
    margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  #admin-users-table td[data-label=""]::before { display: none; }
  #admin-users-table td[data-label=""] button { width: 100%; min-height: 40px; margin: 0 !important; padding: 8px 10px; font-size: .78rem; }
  #admin-users-table .account-cell { width: 100%; }
  #admin-users-table .account-cell-email { overflow-wrap: anywhere; }
  #admin-users-table .status-pill { white-space: normal; }
}
@media (max-width: 720px) {
  .admin-detail-section { top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; padding: 16px 14px 28px; }
}

.hidden { display: none !important; }

.tab-panel:not(.hidden) { animation: panel-fade-in 0.28s ease; }
@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-panel:not(.hidden) { animation: none; }
}

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.92rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
tfoot td { font-weight: 700; }
.grand-total-row td { color: var(--gold); font-size: 1.02rem; }
.grand-total-row td.amount-cell { font-size: 1.15rem; }

/* Perforierter Beleg-Rand oben an der Karte - kleine Anspielung darauf, dass es um Kassenbons geht */
.receipt-edge {
  position: relative;
  margin-top: 14px;
}
.receipt-edge::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background-image: radial-gradient(circle at 10px 8px, var(--bg) 8px, transparent 8.5px);
  background-size: 20px 16px;
  background-repeat: repeat-x;
  pointer-events: none;
}
td.num, .amount-cell { font-family: var(--font-mono); font-weight: 600; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
}

.error { color: var(--danger); font-size: 0.9rem; margin-top: 6px; }
.ai-source-box, .ai-validation-warnings { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.ai-source-box a { color: var(--accent); text-decoration: underline; }
.ai-validation-warnings { border-color: var(--danger); background: var(--danger-soft); color: var(--ink); }
.ai-validation-warnings ul { margin: 2px 0 0 18px; padding: 0; }
.success { color: var(--success); font-size: 0.9rem; margin-top: 6px; font-weight: 600; }

.category-card { border-left: 4px solid var(--accent); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.category-section-heading { font-size: 1.05rem; margin: 28px 0 4px; }
.category-section-heading:first-child { margin-top: 0; }
.category-section-intro { margin: 0 0 14px; font-size: 0.88rem; }
.category-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(23, 26, 43, 0.22); }
.quick-points, .category-quick-points { list-style: none; margin: 0; padding: 0; }
.quick-points { display: grid; gap: 7px; margin-top: 12px; }
.quick-points li, .category-quick-points li { position: relative; padding-left: 19px; line-height: 1.35; }
.quick-points li::before, .category-quick-points li::before { content: '•'; position: absolute; left: 3px; color: var(--accent); font-weight: 900; }
.category-quick-points { display: grid; gap: 3px; color: var(--muted); font-size: 0.92rem; }
.category-quick-points li::before { color: var(--accent-2); }

/* Eigene Farbe pro Werbungskosten-Kategorie, statt allem in derselben Akzentfarbe */
.badge-arbeitsmittel { background: #e0e7ff; color: #4338ca; }
.badge-fortbildung { background: #dbeafe; color: #1d4ed8; }
.badge-fachliteratur { background: #ccfbf1; color: #0d9488; }
.badge-home_office { background: #cffafe; color: #0891b2; }
.badge-homeoffice_moebel { background: #e0f2fe; color: #0369a1; }
.badge-doppelte_haushaltsfuehrung { background: #e2e8f0; color: #334155; }
.badge-reisekosten { background: #e0f2fe; color: #0284c7; }
.badge-gewerkschaft_pflichtbeitraege { background: #e2e8f0; color: #475569; }
.badge-arbeitskleidung { background: #d1fae5; color: #059669; }
.badge-sonstiges { background: #f1f1f6; color: var(--muted); }
.badge-krankheitskosten { background: #fee2e2; color: #b91c1c; }
.badge-standard { background: var(--accent-soft); color: var(--muted); }
.badge-premium { background: var(--gold-bright); color: #2b2200; }
.badge-business { background: var(--accent); color: var(--accent-ink); }

.category-card.cat-arbeitsmittel { border-left-color: #4f46e5; }
.category-card.cat-fortbildung { border-left-color: #7c3aed; }
.category-card.cat-fachliteratur { border-left-color: #0d9488; }
.category-card.cat-home_office { border-left-color: #0891b2; }
.category-card.cat-homeoffice_moebel { border-left-color: #ea580c; }
.category-card.cat-doppelte_haushaltsfuehrung { border-left-color: #db2777; }
.category-card.cat-reisekosten { border-left-color: #0284c7; }
.category-card.cat-gewerkschaft_pflichtbeitraege { border-left-color: #475569; }
.category-card.cat-arbeitskleidung { border-left-color: #059669; }
.category-card.cat-sonstiges { border-left-color: var(--muted); }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 14px; }
.admin-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(23, 26, 43, 0.03);
}
.admin-stat-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.admin-stat-icon svg { width: 17px; height: 17px; }
.admin-stat .label { font-size: 0.86rem; color: var(--muted); font-weight: 500; }
.admin-stat .num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--ink); margin-top: 4px; }
.admin-stat .sub { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.admin-stat-alert { border-color: var(--danger); background: var(--danger-soft); }
.admin-stat-alert .num { color: var(--danger); }
.admin-stat-highlight { border-color: var(--accent); background: var(--accent-soft); }
.admin-stat-highlight .num { color: var(--accent-2, var(--accent)); }
.admin-stat-highlight .admin-stat-icon { color: var(--accent); }
.admin-alerts-ok .admin-stat .num { color: var(--success); }

.admin-workflow-card { overflow: hidden; }
.admin-workflow-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.admin-workflow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; margin-top: 16px; }

/* ---------- n8n-artige Node-Canvas: wächst mit der Anzahl der Stationen statt zu clippen ---------- */
.admin-workflow-canvas {
  position: relative; overflow: auto; padding: 18px; min-height: 470px; touch-action: pan-x pan-y;
  background: radial-gradient(circle at 20% 20%, rgba(13,148,136,.08), transparent 42%), var(--bg);
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px), radial-gradient(circle at 20% 20%, rgba(13,148,136,.08), transparent 42%), var(--bg);
  background-size: 18px 18px, auto, auto;
  border: 1px solid var(--border); border-radius: 12px;
}
.admin-workflow-connectors { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.admin-workflow-connectors path { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.55; }
.admin-workflow-connectors circle { fill: var(--accent); opacity: 0.8; }
.admin-workflow-track {
  position: relative; min-width: 940px; min-height: 430px; z-index: 1;
}
.admin-workflow-node {
  width: 126px; min-height: 98px; padding: 10px 9px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 7px; text-align: left; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 13px; box-shadow: 0 5px 14px rgba(23,26,43,.08);
  cursor: pointer; color: var(--ink); position: relative;
}
.admin-workflow-node { cursor: grab; user-select: none; touch-action: none; }
.admin-workflow-node:active { cursor: grabbing; }
.admin-workflow-node::before, .admin-workflow-node::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent); transform: translateY(-50%);
}
.admin-workflow-node::before { left: -5px; }
.admin-workflow-node::after { right: -5px; }
.admin-workflow-node:hover, .admin-workflow-node.selected { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 9px 20px rgba(13,148,136,.2); }
.admin-workflow-node-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.admin-workflow-node-icon svg { width: 18px; height: 18px; }
.node-guard .admin-workflow-node-icon { background: var(--danger-soft); color: var(--danger); }
.node-rule .admin-workflow-node-icon { background: #fff7ed; color: #c2410c; }
.node-human .admin-workflow-node-icon { background: #fef3c7; color: #a16207; }
.node-ai .admin-workflow-node-icon { background: #2d1b12; color: #f4a261; }
.node-input .admin-workflow-node-icon, .node-output .admin-workflow-node-icon { background: var(--accent-soft); color: var(--accent); }
.admin-workflow-node-title { font-size: .84rem; font-weight: 750; }
.admin-workflow-node-status { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .68rem; }
.admin-workflow-node-status .status-dot { margin: 0; width: 6px; height: 6px; }
.admin-workflow-inspector { min-height: 150px; padding: 15px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-size: .84rem; }

.tax-fireworks { position: fixed; left: 50%; top: 28%; z-index: 220; pointer-events: none; width: 1px; height: 1px; }
.tax-fireworks i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--success); opacity: 0; }
.tax-fireworks.is-playing i { animation: tax-firework-pop 1.1s cubic-bezier(.15,.8,.3,1) calc(var(--i) * 18ms) forwards; }
@keyframes tax-firework-pop { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 3), calc(var(--y) * 4 + 90px)) rotate(240deg) scale(1); } }

.dashboard-welcome-card { position: relative; overflow: hidden; }
.welcome-logo-loop { position: absolute; right: 8%; bottom: 8px; width: 84px; height: 60px; pointer-events: none; filter: drop-shadow(0 7px 16px rgba(24,205,180,.26)); opacity: 0; transform: translate(-42px, 24px) scale(.56); }
.welcome-logo-loop.is-playing { animation: welcome-logo-flight 2.8s both; }
.welcome-logo-loop::before { content: ''; position: absolute; left: -28px; top: 50%; width: 42px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(94,234,212,.65)); filter: blur(1px); opacity: 0; transform-origin: right center; }
.welcome-logo-loop.is-playing::before { animation: welcome-logo-trail 2.8s cubic-bezier(.22,1,.36,1) both; }
.welcome-logo-loop img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes welcome-logo-flight {
  0% { opacity: 0; transform: translate(-56px, 34px) scale(.56); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  24% { opacity: 1; transform: translate(-18px, 8px) scale(.78); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  46% { opacity: 1; transform: translate(0, -5px) scale(.82); animation-timing-function: cubic-bezier(.82, 0, 1, 1); }
  100% { opacity: 0; transform: translate(142px, -96px) scale(.46); }
}
@keyframes welcome-logo-trail { 0%, 100% { opacity: 0; transform: scaleX(.35); } 18%, 68% { opacity: .78; transform: scaleX(1); } 82% { opacity: 0; transform: scaleX(.2); } }
@media (max-width: 720px) { .welcome-logo-loop { right: 4%; width: 68px; height: 48px; bottom: 7px; } }
@media (prefers-reduced-motion: reduce) { .vault-orbit-chip, .welcome-logo-loop, .tax-fireworks i { animation: none !important; } .welcome-logo-loop { opacity: 1; transform: none; } }

.profile-edit-cancel-btn { margin-left: 8px; }
.cancel-plan-box { width: min(460px, 100%); }
.cancel-plan-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--danger-soft); color: var(--danger); font-size: 1.4rem; font-weight: 900; }
.modal-kicker { margin: 14px 0 4px; color: var(--accent); font: 700 .76rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cancel-plan-box h2 { margin: 0 0 8px; }
.cancel-plan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.cancel-plan-facts span { padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: .8rem; }
.cancel-plan-facts strong { display: block; margin-top: 4px; color: var(--ink); font-size: .95rem; }
.cancel-plan-actions { display: flex; justify-content: flex-end; gap: 10px; }
.cancel-plan-actions button { width: auto; }
.danger-button { background: var(--danger); color: #fff; }
.danger-button:hover:not(:disabled) { background: #b91c1c; }
.plan-action-confirm-box { width: min(480px, 100%); }
.plan-action-confirm-fact { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: .85rem; font-weight: 750; }
.plan-action-confirm-box.is-danger .cancel-plan-icon { background: var(--danger-soft); color: var(--danger); }
.plan-action-confirm-box.is-danger #plan-action-confirm-yes { background: var(--danger); color: #fff; }

.receipt-delete-modal { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px; }
.receipt-delete-modal.hidden { display: none; }
.receipt-delete-backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, .62); backdrop-filter: blur(5px); }
.receipt-delete-card { position: relative; width: min(420px, 100%); padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: 0 24px 70px -20px rgba(0,0,0,.5); }
.receipt-delete-card h2 { margin: 12px 0 6px; }
.receipt-delete-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--danger); background: var(--danger-soft); }
.receipt-delete-icon svg { width: 22px; height: 22px; }
.receipt-delete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.receipt-delete-actions .danger { padding: 9px 14px; }
.receipt-detail-deductible { margin: 8px -8px; padding: 10px 8px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent); }
.receipt-detail-deductible .receipt-detail-value { color: var(--accent-2); font-size: 1.05rem; font-weight: 800; }
.admin-workflow-inspector h3 { margin: 4px 0 7px; font-size: 1rem; }
.admin-workflow-inspector p { margin: 0 0 12px; line-height: 1.45; }
.admin-workflow-inspector code, .admin-workflow-inspector pre { display: block; padding: 8px; border-radius: 7px; background: var(--card); color: var(--ink); border: 1px solid var(--border); font-size: .72rem; overflow-wrap: anywhere; white-space: pre-wrap; margin: 0 0 10px; }
.admin-inspector-kicker { color: var(--accent); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.admin-inspector-safe { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--success); font-size: .74rem; }
.admin-inspector-json-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); margin: 12px 0 6px; }
.admin-run-log { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 11px; overflow-x: auto; }
.admin-run-log-title { font-size: .78rem; font-weight: 750; color: var(--muted); margin-bottom: 6px; }
.admin-run-row { display: grid; grid-template-columns: 12px 76px 110px 90px 65px 65px 70px 140px; align-items: center; gap: 7px; padding: 5px 7px; font-size: .74rem; white-space: nowrap; }
.admin-run-row:nth-child(odd) { background: var(--accent-soft); border-radius: 6px; }
.admin-run-row code { color: var(--accent); }
.admin-run-row time { color: var(--muted); }
@media (max-width: 800px) { .admin-workflow-layout { grid-template-columns: 1fr; } .admin-workflow-inspector { min-height: 0; } }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; }
.status-dot.online { background: var(--success); }
.status-dot.offline { background: #d4d4d8; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.account-cell { display: flex; align-items: center; gap: 10px; }
.account-cell .avatar-circle { width: 28px; height: 28px; font-size: 0.7rem; }
.account-cell-info { line-height: 1.3; }
.account-cell-email { font-weight: 600; font-size: 0.88rem; }
.account-cell-sub { font-size: 0.76rem; color: var(--muted); }

/* ---------- Beleg-Aktivität Balkendiagramm ---------- */
.chart-wrap { margin-top: 14px; }
.chart-bars { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.chart-bar {
  width: 100%;
  max-width: 26px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: opacity 0.15s ease;
}
.chart-bar-col:hover .chart-bar { opacity: 0.75; }
.chart-bar-label { font-size: 0.62rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }
.chart-bar-count { font-size: 0.68rem; color: var(--ink); font-weight: 700; margin-bottom: 3px; font-family: var(--font-mono); }

.kz-hint { margin-top: 10px; }
.kz-badge {
  display: inline-block;
  background: var(--success-soft);
  color: #067a47;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 6px;
}
.result-box {
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-accent-b));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 10px;
}
.result-box .amount { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--accent); }

/* ---------- KI-Vorschlag Karte ---------- */
.ai-suggestion {
  border: 1px solid var(--ai-border, #b8e6db);
  border-radius: var(--radius-sm);
  background: var(--ai-bg, linear-gradient(135deg, #e6f7f4, #ecfeff));
  padding: 14px 16px;
  margin: 10px 0 6px;
}
.ai-suggestion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ai-suggestion-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 4px 10px;
  border-radius: 999px;
}
.ai-suggestion-item { font-size: 1.02rem; font-weight: 700; margin: 2px 0 4px; }
.ai-suggestion-text { color: var(--ai-text, #0f4a43); font-size: 0.9rem; margin-bottom: 8px; }
.confidence-track { height: 6px; border-radius: 999px; background: rgba(13, 148, 136, 0.14); overflow: hidden; margin-top: 6px; }
.confidence-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.confidence-label { font-size: 0.74rem; color: var(--muted); margin-top: 4px; font-weight: 600; }
.share-hint { font-size: 0.78rem; color: var(--accent); font-weight: 600; margin-top: 4px; }

.ai-quick-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.86rem; color: var(--muted); margin: 2px 0 8px; }
.ai-quick-facts strong { color: var(--ink); }
.ai-quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ai-quality-badge::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ai-quality-badge.ai-quality-gut { background: rgba(16, 185, 129, 0.14); color: #0d9488; }
.ai-quality-badge.ai-quality-mittel { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.ai-quality-badge.ai-quality-schlecht { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.ai-reasoning-details { margin-top: 2px; font-size: 0.82rem; color: var(--muted); }
.ai-reasoning-details summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ai-reasoning-details p { margin: 6px 0 0; }

.item-checklist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.item-checklist-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: start;
  gap: 10px;
  background: var(--item-row-bg, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 400;
}
.item-checklist-row input[type="checkbox"] { width: auto; margin-top: 3px; }
.item-checklist-desc { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.item-afa-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.item-checklist-pct { display: flex; align-items: center; gap: 3px; font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.item-pct-input { width: 52px; padding: 4px 6px; margin: 0; text-align: right; font-size: 0.85rem; }
.item-pct-input:disabled { opacity: 0.4; }

.saved-profile-box { margin: 10px 0 4px; }
.saved-profile-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.saved-profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.saved-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 6px 14px;
  border-radius: 999px;
}
.saved-profile-chip.empty { background: var(--accent-soft); color: var(--muted); font-weight: 500; }

/* Warnung bei schlecht lesbaren Fotos / niedriger KI-Sicherheit */
.ai-suggestion.warning {
  border-color: var(--ai-warn-border, #fde68a);
  background: var(--ai-warn-bg, linear-gradient(135deg, #fffbeb, #fff7ed));
}
.ai-suggestion.warning .ai-suggestion-tag { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.ai-suggestion.warning .confidence-fill { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.ai-suggestion.warning .ai-suggestion-text { color: var(--ai-warn-text, #92400e); font-weight: 600; }

/* ---------- KI-Rückfragen: kompakt am Desktop, touchfreundlich mobil ---------- */
.ai-suggestion-risk {
  display: inline-flex;
  margin: 2px 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.ai-questions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 148, 136, 0.18);
}
.ai-q-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-q-progress-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(13, 148, 136, 0.16); overflow: hidden; }
.ai-q-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.25s ease; }
.ai-q-progress-label { font-size: 0.76rem; font-weight: 700; color: var(--ai-text, #0f4a43); white-space: nowrap; }
.ai-q-list { min-height: 76px; }
.ai-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ai-text, #0f4a43);
  font-size: 0.9rem;
  font-weight: 700;
}
.ai-question .wizard-q-icon { flex-shrink: 0; }
.ai-question-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ai-question select,
.ai-question input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(13, 148, 136, 0.3);
}
.ai-question select:focus,
.ai-question input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14); }
.ai-question-follow-up { display: contents; }
.ai-question-scope { display: block; margin-bottom: 3px; color: var(--wiz-accent, var(--accent)); font-size: .7rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ai-q-done {
  display: flex; align-items: center; gap: 10px; padding: 12px 4px;
  color: var(--ai-text, #0f4a43); font-size: 0.86rem; font-weight: 600;
}
.ai-q-done-check {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.9rem; flex-shrink: 0;
}
.ai-q-nav { margin-top: 10px; padding-top: 0; border-top: none; justify-content: space-between; }

@media (max-width: 720px) {
  .ai-suggestion { padding: 14px; }
  .ai-question select,
  .ai-question input { min-height: 48px; font-size: 1rem; }
  .ai-suggestion-risk { font-size: 0.72rem; }
}

/* ---------- Google-Login-Button ---------- */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 26, 43, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.google-btn:hover { border-color: #c7cadd; box-shadow: 0 4px 10px -4px rgba(23, 26, 43, 0.15); }

.auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.register-why-note {
  background: var(--accent-soft); border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 0.82rem; color: var(--muted); margin: 14px 0 4px;
}

/* ---------- Willkommens-Diashow (Onboarding) ---------- */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #0b0b0d; color: #fafafa;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px 50px;
  overflow-y: auto; overflow-x: hidden;
}
/* position:fixed statt absolute (Anton, 2026-09-08: "möchte nicht scrollen") - diese rein
   dekorativen Glow-Blobs reichen mit negativen top/bottom-Offsets weit ueber den sichtbaren
   Bereich hinaus und blaehten dadurch overflow-y:auto's scrollHeight um mehrere hundert Pixel
   auf, obwohl man sie nie zu Gesicht bekommt - fixed positioniert traegt ein Element nicht mehr
   zum scrollbaren Inhalt des Vorfahren bei. */
.onboarding-overlay::before, .onboarding-overlay::after {
  content: ''; position: fixed; border-radius: 50%; pointer-events: none; filter: blur(70px);
  opacity: 0.35;
}
.onboarding-overlay::before {
  width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, #22d3ee, transparent 70%);
  top: -20%; left: -10%;
  animation: onboarding-drift-a 16s ease-in-out infinite alternate;
}
.onboarding-overlay::after {
  width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, #14b8a6, transparent 70%);
  bottom: -15%; right: -10%;
  animation: onboarding-drift-b 20s ease-in-out infinite alternate;
}
@keyframes onboarding-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 8vh) scale(1.15); } }
@keyframes onboarding-drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-5vw, -6vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay::before, .onboarding-overlay::after { animation: none; }
}
.onboarding-stage { position: relative; z-index: 1; }
.onboarding-icon-badge {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 18px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  animation: onboarding-icon-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-icon-badge svg { width: 24px; height: 24px; }
@keyframes onboarding-icon-in { from { opacity: 0; transform: scale(0.5) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .onboarding-icon-badge { animation: none; } }

.onboarding-done-check {
  width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.onboarding-done-check::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; animation: onboarding-pulse-ring 1.2s ease-out 0.3s;
}
.onboarding-done-check svg { width: 100%; height: 100%; }
.onboarding-done-check circle { fill: none; stroke: var(--accent); stroke-width: 2; }
.onboarding-done-check path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30; animation: onboarding-check-draw 0.5s ease-out 0.35s forwards;
}
@keyframes onboarding-check-draw { to { stroke-dashoffset: 0; } }
@keyframes onboarding-pulse-ring { from { opacity: 0.6; transform: scale(0.8); } to { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
  .onboarding-done-check::before { animation: none; }
  .onboarding-done-check path { animation: none; stroke-dashoffset: 0; }
}
.onboarding-progress { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background 0.25s ease, transform 0.25s ease; }
.onboarding-dot.active { background: var(--accent); transform: scale(1.3); }
.onboarding-dot.done { background: rgba(255,255,255,0.6); }
/* Weiter unten als die Punktereihe (Anton, 2026-09-08: "diese credits anzeige sollte weiter
   unten sein... rechts oben ist [Platz] vor diesen hellgrauen kleinen punkte") - die Punkte oben
   sollen ungestoert erkennbar bleiben, welcher Schritt gerade dran ist. */
.onboarding-credits-badge {
  position: absolute; top: 46px; right: 20px; display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--accent);
  font-size: 0.78rem; font-weight: 600; transition: transform 0.2s ease;
}
.onboarding-credits-badge.pulse-up { animation: wiz-pulse-up 0.5s ease; }
@media (max-width: 720px) {
  .onboarding-credits-badge { top: 40px; right: 16px; font-size: 0.68rem; padding: 3px 10px; }
  .onboarding-credits-badge svg { width: 11px; height: 11px; }
}

.onboarding-stage { width: 100%; max-width: 480px; text-align: center; }
.onboarding-step { animation: onboarding-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes onboarding-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .onboarding-step { animation: none; } }

.onboarding-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.onboarding-money-hook {
  display: inline-block; font-weight: 800; font-size: 1.05rem; color: var(--accent);
  background: rgba(45,212,191,0.14); border: 1px solid rgba(45,212,191,0.4); border-radius: 999px;
  padding: 6px 16px; margin-bottom: 16px;
}
.onboarding-title { font-size: 1.9rem; font-weight: 800; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.01em; overflow-wrap: break-word; }
.onboarding-body { color: rgba(255,255,255,0.72); font-size: 1.02rem; line-height: 1.55; margin: 0 0 26px; }
.onboarding-money { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; color: var(--accent); margin: 10px 0; animation: onboarding-count 1.1s ease-out; }
@keyframes onboarding-count { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

.onboarding-feature-list { text-align: left; list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 14px; }
.onboarding-feature-list li {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm);
  padding: 12px 16px; color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.45;
}
.onboarding-feature-list li strong { display: block; color: #fff; margin-bottom: 2px; }
.onboarding-percent-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.onboarding-percent-value { flex: 0 0 auto; min-width: 92px; text-align: right; font-weight: 700; color: var(--accent); }
/* #profil-section-persoenlich mit dabei (Anton, 2026-09-08: "im profil irgendein button... wo ich
   diese infos die ich im intro eingeben habe auch wieder finden kann") - dieselben Klassen wie im
   Intro werden im Profil-Formular fuer Arbeitgeber-Mittel-Chips, Kinder-Kategorien und den
   Behinderungsgrad-Schieberegler wiederverwendet statt sie ein zweites Mal zu bauen. */
#onboarding-overlay input[type="range"], #profil-section-persoenlich input[type="range"] {
  flex: 1 1 auto; height: 24px; margin: 0; appearance: none; -webkit-appearance: none;
  background: transparent; accent-color: var(--accent);
}
#onboarding-overlay input[type="range"]::-webkit-slider-runnable-track, #profil-section-persoenlich input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); }
#onboarding-overlay input[type="range"]::-moz-range-track, #profil-section-persoenlich input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); }
#onboarding-overlay input[type="range"]::-webkit-slider-thumb, #profil-section-persoenlich input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border: 0; border-radius: 50%; background: var(--accent); cursor: pointer;
}
#onboarding-overlay input[type="range"]::-moz-range-thumb, #profil-section-persoenlich input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.onboarding-tag-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.onboarding-tag {
  padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  background: rgba(45,212,191,0.12); border: 1px solid rgba(45,212,191,0.3); color: #fff;
}

/* "4 Schritte"-Karten (Anton, 2026-09-08: "in karten formate... von links nach rechts zeigen
   statt oben nach unten... hier ist pc genug platz am bildschirm") - auf PC ein breiter,
   aus der normalen Card-Breite ausbrechender Reihen-Layout mit Pfeilen zwischen den Schritten;
   auf Mobile (siehe Media Query unten) wieder gestapelt, weil dafür noch eigene Handy-Designs
   kommen (Anton: "mach das für PC und dann schicke ich dir designs fürs handy").
   Der Breakout (position:relative; left:50%; transform) durchbricht bewusst die sonst geltende
   max-width der Karte, weil hier laut Anton auf PC "genug Platz am Bildschirm" ist. */
.onboarding-howto-grid {
  display: flex; align-items: stretch; gap: 10px; margin: 0 0 26px;
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(920px, 92vw);
}
.onboarding-howto-card {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 20px 14px; border-radius: var(--radius); position: relative;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.onboarding-howto-card:hover { transform: translateY(-3px); border-color: rgba(45,212,191,0.4); }
.onboarding-howto-num {
  position: absolute; top: -10px; left: -10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1;
}
.onboarding-howto-icon { font-size: 1.8rem; margin-bottom: 2px; }
.onboarding-howto-text { display: flex; flex-direction: column; gap: 2px; }
.onboarding-howto-card strong { color: #fff; font-size: 0.9rem; line-height: 1.3; }
.onboarding-howto-text span { color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.onboarding-howto-arrow { display: flex; align-items: center; color: var(--accent); font-size: 1.3rem; flex: 0 0 auto; }
@media (max-width: 900px) {
  .onboarding-howto-grid { flex-direction: column; left: auto; transform: none; width: 100%; gap: 8px; margin-bottom: 16px; }
  .onboarding-howto-arrow { display: none; }
}
@media (max-width: 520px) {
  /* Kompakte Zeilen statt hoher Bloecke, Nummer als eigenes Element in der Reihe statt absolut
     positioniert ueber dem Icon (Anton, 2026-09-08: "ist alles so ineinander geraten") - jetzt
     klar getrennt: Nummer-Kreis, Icon, Textblock, in dieser Reihenfolge nebeneinander. */
  .onboarding-howto-card { flex-direction: row; align-items: center; text-align: left; padding: 10px 14px; gap: 10px; }
  .onboarding-howto-num { position: static; margin-top: 0; }
  .onboarding-howto-icon { font-size: 1.3rem; margin-bottom: 0; flex-shrink: 0; }
  .onboarding-howto-card strong { font-size: 0.82rem; }
  .onboarding-howto-text span { font-size: 0.74rem; }
}
/* Zutreffende Themen deutlich hervorgehoben statt nur einer duennen Randfarbe (Anton, 2026-09-08:
   "nicht so unerkenntlich") - kraeftigerer Farbhintergrund + dickerer Rand, damit man auf den
   ersten Blick sieht, was einen wirklich betrifft, statt es erst lesen zu muessen. */
.onboarding-summary-list li.not-applicable { opacity: 0.45; }
.onboarding-summary-list li.applies {
  background: rgba(45,212,191,0.12); border-color: var(--accent); border-width: 1.5px;
}
.onboarding-summary-list li.applies strong { color: var(--accent); }
.onboarding-summary-list li.onboarding-summary-hero {
  background: rgba(45,212,191,0.2); border-color: var(--accent); border-width: 2px;
}
.onboarding-summary-list li.onboarding-summary-hero strong { color: var(--accent); font-size: 1.02rem; }

.onboarding-question { text-align: left; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.onboarding-question label { color: rgba(255,255,255,0.85); }
.onboarding-question input, .onboarding-question select {
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff;
}
.onboarding-question input::placeholder { color: rgba(255,255,255,0.4); }
.onboarding-choice-row { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.onboarding-choice {
  flex: 1 1 100px; min-width: 0; padding: 12px 10px; text-align: center; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: #fff;
  font-weight: 700; box-shadow: none; transition: all 0.15s ease;
  white-space: normal; overflow-wrap: break-word;
}
/* Icon-Chips (Arbeitgeber-Mittel) als festes Grid statt Flex-Wrap (Anton, 2026-09-08: "wenn dann
   alle gleich groß... das alles reinpasst") - garantiert 2 pro Reihe auf Mobile statt einem
   unvorhersehbaren Flex-Umbruch, Icon immer ueber dem Text, feste kompakte Hoehe. */
.onboarding-choice-row:has(.onboarding-choice-iconed) { display: grid; grid-template-columns: repeat(2, 1fr); }
.onboarding-choice-iconed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 7px 6px; min-height: 52px; }
@media (max-width: 520px) {
  .onboarding-choice-row { gap: 6px; }
  .onboarding-custom-add-row { margin-top: 2px; }
}
.onboarding-choice-icon { font-size: 1.3rem; line-height: 1; }
.onboarding-choice-label { font-size: 0.76rem; line-height: 1.15; }
.onboarding-choice.selected { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-1px); }
.onboarding-choice:hover:not(:disabled) { border-color: var(--accent); filter: none; box-shadow: none; transform: none; }
.onboarding-choice:focus-visible, .onboarding-nav button:focus-visible, .onboarding-skip button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Hoehe gedeckelt mit eigenem Scroll (Anton, 2026-09-08: "wenn man mehrere kinder hat dieses
   auto mit der ziellinie ist über dem") - bei vielen Kindern (Feld erlaubt bis 20) wuerde die
   Liste sonst beliebig hoch werden und die fixe Fortschrittsleiste unten ueberlappen; so scrollt
   nur die Liste selbst, der Rest des Schritts (inkl. Ziellinie) bleibt an seinem Platz. */
#ob-children-detail-rows { max-height: 38vh; overflow-y: auto; padding-right: 4px; }
.onboarding-child-row { margin-bottom: 12px; }
.onboarding-child-row:last-child { margin-bottom: 0; }
.onboarding-child-label { display: block; font-size: 0.82em; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.onboarding-child-row .onboarding-choice-row { flex-wrap: nowrap; }
.onboarding-child-row .onboarding-choice {
  flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 0.78em; font-weight: 600;
}
.onboarding-custom-add-row { display: flex; gap: 8px; }
.onboarding-custom-add-row input {
  flex: 1 1 auto; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: #fff;
}
.onboarding-custom-add-row button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
  /* Nebeneinander quetschte das Eingabefeld auf einen unbrauchbaren Streifen zusammen
     (Live-Test 2026-09-08, Placeholder war nur noch als "Was fe..." lesbar) - untereinander
     bekommt das Textfeld die volle Breite. */
  .onboarding-custom-add-row { flex-direction: column; }
  .onboarding-custom-add-row button { width: 100%; }
}

/* Meilenstein-Screen (Anton, 2026-09-08: "wie in einem spiel, du hast ein level erreicht") - ein
   echter Schritt (siehe insertOnboardingMilestones in app.js), kein automatisch verschwindendes
   Overlay mehr. .onboarding-milestone-page bricht bewusst aus der Card-Breite/-Position aus
   (position:fixed inset:0), damit das Konfetti wirklich den ganzen Bildschirm nutzt, auch wenn der
   Rest des Schritts (Trophäe, Text, Button) normal in der Card-Breite bleibt. */
.onboarding-milestone-page { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.onboarding-milestone-confetti {
  position: absolute; top: -20px; width: var(--size); height: var(--size); border-radius: 2px;
  opacity: 0; animation: onboarding-milestone-confetti-fall var(--duration) ease-in var(--delay) forwards;
}
.onboarding-milestone-trophy {
  font-size: 3.4rem; margin-bottom: 8px; display: inline-block;
  animation: onboarding-milestone-trophy-pop 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes onboarding-milestone-trophy-pop {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes onboarding-milestone-confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--drift), 100vh) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-milestone-page { display: none; }
  .onboarding-milestone-trophy { animation: none; }
}

.onboarding-bottom-bar {
  position: fixed; left: 24px; right: 24px; bottom: 18px; z-index: 45;
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.1);
  max-width: 480px; margin: 0 auto;
}
.onboarding-bottom-bar-fill {
  height: 100%; border-radius: 999px; width: 0%;
  background: linear-gradient(90deg, var(--accent), #22d3ee);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-bottom-bar-car {
  position: absolute; top: 50%; left: 0%; width: 34px; height: 34px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(45,212,191,0.7));
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) { .onboarding-bottom-bar-fill, .onboarding-bottom-bar-car { transition: none; } }

.onboarding-nav { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.onboarding-nav button { min-width: 120px; }
.onboarding-nav .secondary { background: transparent; color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); }
.onboarding-skip { margin-top: 16px; }
.onboarding-skip button { background: none; box-shadow: none; color: rgba(255,255,255,0.45); font-weight: 500; text-decoration: underline; padding: 4px; }

@media (min-width: 700px) {
  .onboarding-stage { max-width: 560px; }
}
@media (max-width: 520px) {
  /* justify-content:flex-start statt center (Live-Test 2026-09-08): bei Schritten mit viel Inhalt
     (z.B. der Beleg-Beispiele-Liste) war die Karte hoeher als der verfuegbare Platz - zentriert
     wurde sie dann so weit nach oben geschoben, dass der Titel ueber die per padding-top
     reservierte Kopfzeile hinausragte und das Credits-Badge dort ueberlappte. Oben ausgerichtet
     beginnt der Inhalt stattdessen immer direkt unter der Kopfzeile und scrollt bei Bedarf. */
  /* So kompakt wie moeglich (Anton, 2026-09-08: "ich möchte nicht scrollen... alles ersichtlich
     ohne zu scrollen") - jeder Wert hier ist bewusst knapper als die Desktop-Version, damit ein
     Schritt komplett auf ein Handy-Display (getestet: 375x812) passt. */
  .onboarding-overlay { padding: 60px 16px 40px; justify-content: flex-start; }
  .onboarding-bottom-bar { left: 16px; right: 16px; bottom: 10px; }
  .onboarding-icon-badge { width: 40px; height: 40px; margin: 0 auto 10px; }
  .onboarding-icon-badge svg { width: 18px; height: 18px; }
  .onboarding-eyebrow { margin-bottom: 6px; }
  .onboarding-title { font-size: 1.4rem; margin-bottom: 8px; }
  .onboarding-body { font-size: 0.9rem; margin-bottom: 14px; line-height: 1.4; }
  .onboarding-money-hook { font-size: 0.9rem; padding: 5px 12px; margin-bottom: 10px; }
  .onboarding-money { font-size: 1.9rem; margin: 4px 0; }
  .onboarding-question { padding: 14px 14px; margin-bottom: 14px; }
  .onboarding-nav { flex-direction: column-reverse; margin-top: 0; }
  .onboarding-nav button { width: 100%; min-width: 0; padding: 10px 16px; }
  .onboarding-skip { margin-top: 8px; }
  .onboarding-feature-list { gap: 8px; margin-bottom: 14px; }
  .onboarding-feature-list li { padding: 9px 12px; font-size: 0.85rem; }
}

.passkey-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; margin-top: 10px;
  background: var(--accent); color: var(--accent-ink);
}
.passkey-list-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.passkey-list-item svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.passkey-list-item-info { flex: 1; min-width: 0; }
.passkey-list-item-label { font-weight: 600; font-size: 0.9rem; }
.passkey-list-item-sub { font-size: 0.78rem; color: var(--muted); }

/* ---------- Formular-Guide Teaser & Diashow ---------- */
.guide-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--teaser-bg, linear-gradient(135deg, #e6f7f4, #ecfeff));
  border: 1px solid var(--teaser-border, #b8e6db);
}
.guide-teaser-text { flex: 1 1 320px; }
.guide-teaser-text h2 { margin: 6px 0 4px; }
.guide-teaser #open-guide-btn, .guide-teaser #open-guide-btn-2, .guide-teaser #steuerkompass-open-guide-btn, .guide-teaser #steuerkompass-open-wizard-btn { flex-shrink: 0; white-space: nowrap; }

/* Steuerkompass: zentrale Übersicht für Kassasturz, Belege und FinanzOnline. */
.steuerkompass-overview {
  margin-top: 18px; padding: 26px; border: 1px solid var(--border); border-radius: 22px;
  background: var(--card); box-shadow: 0 18px 42px rgba(0, 0, 0, .08);
}
.steuerkompass-overview-head, .steuerkompass-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.steuerkompass-eyebrow { color: var(--accent); font: 700 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.steuerkompass-overview h2 { margin: 4px 0; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.steuerkompass-overview-head p { margin: 5px 0 0; }
.steuerkompass-progress-ring {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--accent) var(--progress, 0deg), var(--accent-soft) 0); position: relative;
}
.steuerkompass-progress-ring::after { content: ''; position: absolute; inset: 7px; border-radius: inherit; background: var(--card); }
.steuerkompass-progress-ring strong, .steuerkompass-progress-ring span { position: relative; z-index: 1; }
.steuerkompass-progress-ring strong { font: 800 .95rem var(--font-mono); }
.steuerkompass-progress-ring span { color: var(--muted); font-size: .58rem; }
.steuerkompass-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 30px; }
.steuerkompass-stat { padding: 15px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg); }
.steuerkompass-stat span, .steuerkompass-stat small { display: block; color: var(--muted); font-size: .73rem; }
.steuerkompass-stat strong { display: block; margin: 5px 0 2px; font: 800 1.15rem var(--font-mono); color: var(--accent); }
.steuerkompass-section-head { margin-bottom: 12px; }
.steuerkompass-section-head h3 { margin: 4px 0 0; }
.steuerkompass-topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.steuerkompass-topic { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 104px; padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--bg); color: var(--text); text-align: left; cursor: pointer; }
.steuerkompass-topic:hover { border-color: var(--accent); transform: translateY(-1px); }
.steuerkompass-topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.steuerkompass-topic.is-locked { border-color: color-mix(in srgb, var(--border) 80%, var(--muted)); opacity: .62; }
.steuerkompass-topic.is-locked:hover { border-color: var(--accent); opacity: .82; }
.steuerkompass-topic-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); font-size: 1.15rem; }
.steuerkompass-topic-copy { min-width: 0; }
.steuerkompass-topic-copy strong, .steuerkompass-topic-copy small { display: block; }
.steuerkompass-topic-copy small { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.steuerkompass-topic-state { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.steuerkompass-topic.is-done .steuerkompass-topic-state { color: var(--success); font-weight: 700; }
.steuerkompass-full-form, .steuerkompass-ready-action {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 16px;
  border: 1px dashed var(--border); border-radius: 15px; background: var(--bg);
}
.steuerkompass-full-form strong, .steuerkompass-full-form small { display: block; }
.steuerkompass-full-form small { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.steuerkompass-full-form button, .steuerkompass-ready-action button { flex: 0 0 auto; white-space: nowrap; }
.steuerkompass-ready-action { border-style: solid; border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--card)); color: var(--success); font-weight: 700; }
.steuerkompass-pendler-dialog { width: min(560px, 100%); max-height: min(86vh, 720px); overflow: auto; }
.steuerkompass-pendler-dialog h2 { margin-right: 34px; }
.steuerkompass-pendler-estimate { display: grid; gap: 4px; margin: 14px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 24%, var(--bg)); }
.steuerkompass-pendler-estimate span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.steuerkompass-pendler-estimate strong { color: var(--accent); font-size: 1.45rem; }
.steuerkompass-pendler-estimate small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.steuerkompass-pendler-empty { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.steuerkompass-pendler-empty strong { color: var(--accent); }
.steuerkompass-pendler-empty span { color: var(--muted); font-size: .82rem; }
.steuerkompass-pendler-total { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.steuerkompass-pendler-total > div { display: grid; gap: 4px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 24%, var(--bg)); }
.steuerkompass-pendler-total span, .steuerkompass-pendler-period span { color: var(--muted); font-size: .72rem; }
.steuerkompass-pendler-total strong { color: var(--accent); font-size: .98rem; }
.steuerkompass-pendler-total > div:first-child strong { font-size: 1.2rem; }
.steuerkompass-pendler-periods { display: grid; gap: 8px; }
.steuerkompass-pendler-periods > strong { font-size: .82rem; }
.steuerkompass-pendler-period { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.steuerkompass-pendler-period > div { display: grid; gap: 3px; min-width: 0; }
.steuerkompass-pendler-period > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steuerkompass-pendler-period > strong { flex: 0 0 auto; color: var(--accent); }
.steuerkompass-pendler-actions { margin-top: 18px; }
@media (max-width: 640px) {
  .steuerkompass-overview { padding: 18px 14px; border-radius: 18px; }
  .steuerkompass-stat-grid, .steuerkompass-topic-grid { grid-template-columns: 1fr; }
  .steuerkompass-topic {
    height: 122px;
    min-height: 122px;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .steuerkompass-topic-icon { grid-row: 1 / span 2; }
  .steuerkompass-topic-copy { grid-column: 2; align-self: end; }
  .steuerkompass-topic-state {
    grid-column: 2;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .steuerkompass-progress-ring { width: 64px; height: 64px; flex-basis: 64px; }
  .steuerkompass-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .steuerkompass-full-form, .steuerkompass-ready-action { align-items: stretch; flex-direction: column; }
  .steuerkompass-full-form button, .steuerkompass-ready-action button { width: 100%; }
  .steuerkompass-pendler-dialog { max-height: calc(100vh - 28px); padding: 22px 16px 16px; }
  .steuerkompass-pendler-total { grid-template-columns: 1fr 1fr; }
  .steuerkompass-pendler-total > div:first-child { grid-column: 1 / -1; }
  .steuerkompass-pendler-period { align-items: flex-start; flex-direction: column; }
  .steuerkompass-pendler-period > strong { align-self: flex-end; }
  .steuerkompass-pendler-actions { align-items: stretch; flex-direction: column-reverse; }
  .steuerkompass-pendler-actions button { width: 100%; }
}

.guide-box {
  position: relative;
  width: min(560px, 100%);
  max-height: min(860px, calc(100vh - 32px));
  background: var(--card);
  border-radius: 20px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.guide-progress { display: flex; gap: 5px; }
.guide-progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--accent-soft); }
.guide-progress span.done { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.guide-progress span.current { background: var(--accent); }

.guide-card { min-height: 0; max-height: calc(100vh - 220px); overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; text-align: left; padding: 4px; animation: guide-fade-in 0.25s ease; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
@keyframes guide-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.guide-eyebrow { font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.guide-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; }
.guide-text { color: var(--muted); font-size: 1rem; max-width: 46ch; margin: 0 auto 16px; }
.guide-text-left { margin-left: 0; }
.guide-bullets {
  width: min(100%, 38ch);
  margin: 0 auto 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  color: var(--text);
}
.guide-bullets li {
  position: relative;
  padding: 8px 0 8px 24px;
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}
.guide-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}
.guide-source { color: var(--muted); font-size: 0.78rem; margin: 0 auto 10px; }

.guide-kz-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 16px;
  border-radius: 999px;
  margin: 0 auto 14px;
}
.guide-amount { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 700; color: var(--gold); margin: 6px 0; text-shadow: 0 1px 0 rgba(184, 134, 11, 0.12); }
.guide-copy-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.guide-copy-btn { width: auto; padding: 10px 20px; }
.guide-copy-note { font-size: 0.82rem; color: var(--muted); }
.guide-copy-note.copied { color: var(--success); font-weight: 700; }

.guide-icon-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.6rem; font-weight: 800; color: var(--accent);
}

.guide-nav { display: flex; justify-content: space-between; gap: 10px; }
.guide-nav button { flex: 1; }

/* Spickzettel-Übersicht (konsolidierte Kennzahlen-Karte) */
.guide-box.guide-box-wide { width: min(860px, 100%); }
.guide-summary { text-align: left; max-width: none; }
.guide-summary-total {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 16px; margin-bottom: 16px; border-radius: var(--radius-sm, 10px);
  background: var(--accent-soft); border: 1px solid var(--border);
}
.guide-summary-total-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.guide-summary-total-amount { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 800; color: var(--accent); }
.guide-summary-group { margin-bottom: 18px; }
.guide-summary-group h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  color: var(--muted); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.guide-summary-row { padding: 9px 0; border-bottom: 1px dashed var(--border); }
.guide-summary-row:last-child { border-bottom: none; }
.guide-summary-row-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.guide-summary-row-label { font-weight: 600; }
.guide-summary-row-amount { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.guide-summary-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.guide-summary-kz { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; }
.guide-summary-copy-btn { padding: 5px 12px; font-size: 0.8rem; width: auto; }
.guide-summary-copy-btn.copied { color: var(--success); border-color: var(--success); }
.guide-summary-row.is-calculated { padding: 11px 10px; margin: 5px -10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(15, 118, 110, 0.06); }
.guide-summary-no-copy { color: var(--muted); font-size: .78rem; font-weight: 700; }
.guide-summary-calculated-label { display: block; margin-top: 7px; color: var(--warning, #d97706); font-size: .76rem; font-weight: 800; }
.guide-summary-instruction { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }

.guide-overview-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-overview-group { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); }
.guide-overview-group h3 { margin: 0 0 8px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.guide-overview-grid { display: grid; gap: 7px; }
.guide-overview-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.guide-overview-row:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-overview-row > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-overview-row strong { font-size: .9rem; overflow-wrap: anywhere; }
.guide-overview-row span { color: var(--accent); font-family: var(--font-mono); font-size: .7rem; font-weight: 800; }
.guide-overview-row small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.guide-overview-row b { flex: 0 0 auto; color: var(--accent); font-family: var(--font-mono); white-space: nowrap; }
.guide-action-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.guide-action-legend > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(15, 118, 110, 0.05); }
.guide-action-legend strong { color: var(--accent); font-size: .78rem; }
.guide-action-legend span { color: var(--muted); font-size: .75rem; line-height: 1.3; }
.guide-form-checklist { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.guide-form-checklist > h3 { margin: 0 0 4px; font-size: .95rem; }
.guide-form-checklist > p { margin: 0 0 9px; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.guide-form-hints { display: grid; gap: 7px; }
.guide-form-hint { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,0.02); }
.guide-form-hint summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.guide-form-hint summary::-webkit-details-marker { display: none; }
.guide-form-hint summary::after { content: '+'; color: var(--accent); font-size: 1rem; font-weight: 800; }
.guide-form-hint[open] summary::after { content: '−'; }
.guide-form-hint summary > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guide-form-hint summary strong { font-size: .86rem; overflow-wrap: anywhere; }
.guide-form-hint summary small { color: var(--muted); font-size: .7rem; }
.guide-form-hint summary b { flex: 0 0 auto; color: var(--accent); font-family: var(--font-mono); font-size: .68rem; text-align: right; }
.guide-form-hint ul { margin: 0; padding: 0 14px 11px 30px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.guide-form-hint li + li { margin-top: 4px; }
.guide-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.guide-final-actions .guide-link-btn { margin-top: 0; }
.guide-final-actions .guide-pdf-btn { margin-right: 0; }

@media print {
  body * { visibility: hidden; }
  #guide-summary-print-area, #guide-summary-print-area * { visibility: visible; }
  #guide-summary-print-area { position: absolute; top: 0; left: 0; width: 100%; }
  #guide-summary-print-area .guide-summary-actions { display: none; }
}

.guide-link-btn { display: inline-block; margin-top: 6px; }

@media (max-width: 560px) {
  .guide-box { padding: 22px 18px 18px; }
  .guide-card { max-height: calc(100vh - 205px); }
  .guide-title { font-size: 1.3rem; }
  .guide-amount { font-size: 2.2rem; }
  .guide-bullets { font-size: 0.92rem; }
  .guide-overview-groups { grid-template-columns: 1fr; }
  .guide-action-legend { grid-template-columns: 1fr; }
  .guide-final-actions { align-items: stretch; flex-direction: column; }
  .guide-final-actions > * { width: 100%; text-align: center; }
}

/* ---------- Foto-Viewer Overlay ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
.plan-card.featured::after {
  content: ''; position: absolute; top: 18px; right: 18px; width: 104px; height: 104px;
  background: url('/assets/landing/belegheld-shield-gemini.jpg') center / contain no-repeat;
  opacity: .92; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(13,148,136,.28));
}
.plan-card.featured > * { position: relative; z-index: 1; }
.plan-card.featured h2, .plan-card.featured .plan-card-price { padding-right: 92px; }
.plan-card { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.plan-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 32px -20px rgba(13,148,136,.45); }
@media (max-width: 560px) {
  .plan-card.featured::after { width: 76px; height: 76px; top: 16px; right: 14px; }
  .plan-card.featured h2, .plan-card.featured .plan-card-price { padding-right: 64px; }
  .plan-screen-credit-grid { grid-template-columns: 1fr; gap: 10px; }
}
#plan-screen .plan-card.featured::after { display: none; }
#plan-screen .plan-card { overflow: visible; padding-top: 42px; }
#plan-screen .plan-card.is-current-plan { background: color-mix(in srgb, var(--accent-soft) 42%, var(--card)); border-color: var(--accent-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 38%, transparent), 0 14px 30px -24px color-mix(in srgb, var(--accent-2) 55%, transparent); }
#plan-screen .plan-card.featured h2, #plan-screen .plan-card.featured .plan-card-price { padding-right: 0; }
#plan-screen .plan-card-badge {
  position: absolute; top: -11px; right: 16px; left: auto; z-index: 4;
}
#plan-screen .plan-card-offer-chip {
  position: absolute; top: -10px; left: -12px; right: auto; z-index: 4; transform: rotate(-9deg);
  padding: 4px 9px; border-radius: 999px; font-size: .6rem;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
}
#plan-screen .plan-card-current-tag { position: absolute; top: 14px; right: 18px; z-index: 4; margin: 0; }
#plan-screen .plan-card { min-height: 0; padding: 22px 22px 48px; cursor: pointer; }
#plan-screen .plan-card.featured { padding-top: 32px; }
#plan-screen .plan-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#plan-screen .plan-card.is-expanded { border-color: var(--accent); box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--accent) 65%, transparent); }
#plan-screen .plan-card:not(.is-expanded) .plan-card-billing-status,
#plan-screen .plan-card:not(.is-expanded) .plan-card-price-sub,
#plan-screen .plan-card:not(.is-expanded) .plan-card-features,
#plan-screen .plan-card:not(.is-expanded) button[data-select-plan] { display: none; }
#plan-screen .plan-card.is-expanded .plan-card-summary-hint { display: none; }
/* Hervorgehobene Karten setzen direkte Kinder weiter oben auf position:relative.
   Der Detail-Hinweis bleibt trotzdem an derselben Stelle wie bei Smart Flex. */
#plan-screen .plan-card > .plan-card-summary-hint {
  position: absolute;
  right: 22px;
  bottom: 16px;
  display: block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--accent-2);
  font-size: .72rem;
  font-weight: 800;
}
#plan-screen .plan-card > .plan-card-summary-hint > span { margin-left: 4px; font-size: .9rem; }
#admin-user-modal { z-index: 180; }
.modal-box {
  position: relative;
  width: min(900px, 100%);
  height: min(85vh, 900px);
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.modal-box iframe { width: 100%; height: 100%; border: none; background: #222; }
.modal-box img { width: 100%; height: 100%; object-fit: contain; background: #15161f; display: block; }

@media (max-width: 720px) {
  #address-gate-modal .modal-box {
    width: min(100%, 380px);
    height: auto;
    max-height: calc(100vh - 32px);
    padding: 22px 16px 16px;
    overflow: visible;
  }
  #address-gate-modal .modal-box h3 { margin: 0 34px 8px 0; font-size: 1.05rem; }
  #address-gate-modal .modal-box > p { margin: 0 0 12px; font-size: .78rem !important; line-height: 1.35; }
  #address-gate-form label { font-size: .78rem; }
  #address-gate-form label[style] { margin-top: 8px !important; }
  #address-gate-form input { min-height: 40px; margin-top: 4px; }
  #address-gate-form .row { margin-top: 10px !important; }
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(23, 26, 43, 0.75);
  color: #fff;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  box-shadow: none;
  padding: 0;
}
.modal-close:hover { background: rgba(23, 26, 43, 0.9); filter: none; }

/* ---------- Autocomplete (Berufsauswahl) ---------- */
.autocomplete-wrap { position: relative; display: block; }
.autocomplete-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 6px;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -12px rgba(23, 26, 43, 0.25);
}
.autocomplete-list li {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
}
.autocomplete-list li:hover, .autocomplete-list li.active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Drag & Drop Upload-Zone ---------- */
.drop-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px 16px;
  text-align: center;
  background: var(--bg-accent-a);
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-top: 6px;
}
.drop-zone.drag-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-zone-text { font-weight: 700; margin: 0 0 2px; }
.drop-zone-sub { margin: 0; font-size: 0.82rem; }
.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
}
@media (hover: none) {
  .drop-zone-text-desktop { display: none; }
}

/* Fortschrittsanzeige bei Mehrfach-Upload */
.queue-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 10px;
}

footer.disclaimer {
  margin-top: 24px;
  font-size: 0.8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ---------- Mobile-Dashboard (Startbildschirm mit Kartenraster, nur < 721px) ---------- */
.mobile-dashboard { display: none; }
@media (max-width: 720px) {
  .mobile-dashboard {
    flex-direction: column;
    gap: 18px;
    padding: 16px 14px 24px;
  }
  .mobile-dashboard:not(.hidden) { display: flex; overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; height: 100%; min-height: 0; touch-action: pan-y; }

  .mobile-dash-header { display: flex; align-items: center; justify-content: space-between; }
  .mobile-dash-category-top-back-group { display: none; align-items: center; gap: 18px; }
  .mobile-dash-category-top-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; box-shadow:none; }
  .mobile-dash-category-top-back:hover:not(:disabled) { background: transparent; color: var(--ink); transform:none; box-shadow:none; filter:none; }
  .mobile-dash-category-top-back svg { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; color: var(--accent); flex: 0 0 34px; }
  .mobile-dash-category-top-back-label { color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.2; }
  .mobile-dashboard.category-page-open .mobile-dash-header { min-height: 59px; margin: -16px -14px 0; padding: 12px 16px; box-sizing: border-box; border-bottom: 1px solid var(--border); background: var(--card); gap: 12px; }
  .mobile-dashboard.category-page-open .mobile-dash-brand { display: none; }
  .mobile-dashboard.category-page-open .mobile-dash-category-top-back-group { display: inline-flex; }
  .mobile-dashboard.category-page-open .mobile-dash-page-back { display: none; }
  .mobile-dash-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.02rem; }
  .mobile-dash-brand .brand-logo-sm { width: 36px; height: 36px; }
  .mobile-dash-header-right { display: flex; align-items: center; gap: 7px; min-width: 0; height: 32px; }
  .mobile-credits-pill { padding: 6px 8px; font-size: .72rem; gap: 4px; }
  .mobile-credits-pill svg { width: 13px; height: 13px; }
  .mobile-year-select {
    width: 76px; min-width: 76px; height: 32px; min-height: 32px; box-sizing: border-box;
    margin: 0; padding: 0 8px; background: var(--card); border: 1.5px solid var(--border); border-radius: 999px;
    font-weight: 700; font-size: .64rem; line-height: 1; color: var(--ink); align-self: center; font-variant-numeric: tabular-nums;
  }
  .mobile-credits-pill, #mobile-profile-btn { min-height: 32px; height: 32px; margin: 0; box-sizing: border-box; align-self: center; }
  #mobile-profile-btn { width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #mobile-profile-btn { border: none; cursor: pointer; }

  .mobile-dash-hero { display: flex; flex-direction: column; gap: 4px; }
  .mobile-dash-greeting { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mobile-dash-greeting h1 { margin: 0 0 3px; font-size: 1.5rem; }
  .mobile-dash-greeting p { margin: 0; font-size: 0.85rem; }
  .mobile-add-beleg-btn {
    flex-shrink: 0; background: var(--accent); color: var(--accent-ink);
    border: none; border-radius: 999px; padding: 10px 16px;
    font-weight: 700; font-size: 0.85rem; box-shadow: none;
  }

  /* Offener Tresor mit Geld, das langsam herausschwebt (Hero-Grafik am Handy-Dashboard) */
  .mobile-dash-vault-visual { display: flex; justify-content: center; padding: 1px 0 0; }
  .mobile-dash-vault-svg { width: 100%; max-width: 128px; height: auto; overflow: visible; }
  .vault-shadow { fill: var(--border); opacity: 0.55; }
  .vault-body { fill: var(--card); stroke: var(--border); stroke-width: 2; }
  .vault-hole { fill: var(--ink); opacity: 0.08; }
  .vault-door-face { fill: var(--accent); }
  .vault-door-dial { fill: var(--accent-2); }
  .vault-door-spokes { stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; opacity: 0.55; fill: none; }
  .vault-coin { fill: var(--gold-bright); stroke: var(--gold); stroke-width: 1.2; }
  .vault-coin-label { font-size: 8px; font-weight: 800; fill: var(--gold); text-anchor: middle; }
  .vault-bill { fill: var(--accent-soft); stroke: var(--accent-2); stroke-width: 1.2; }
  .vault-float {
    animation: vault-float 3.6s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .vault-float-1 { animation-delay: 0s; }
  .vault-float-2 { animation-delay: 0.9s; }
  .vault-float-3 { animation-delay: 1.7s; }
  .vault-float-4 { animation-delay: 2.4s; }
  @keyframes vault-float {
    0% { transform: translateY(6px) scale(0.85); opacity: 0; }
    15% { opacity: 1; }
    60% { transform: translateY(-26px) scale(1); opacity: 1; }
    100% { transform: translateY(-42px) scale(0.85); opacity: 0; }
  }

  .mobile-dash-hero-amount { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -6px; border-radius: 12px; padding: 2px 10px; }
  .mobile-dash-hero-amount-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); transition: opacity 0.15s ease, transform 0.2s ease; }
  .mobile-dash-hero-amount-value { font-size: 1.75rem; line-height: 1; font-weight: 850; color: var(--accent-2); font-variant-numeric: tabular-nums; transition: opacity 0.2s ease, transform 0.2s ease; }
  .mobile-dash-hero-amount.is-clickable { cursor: pointer; }
  .mobile-dash-hero-amount.is-clickable:active .mobile-dash-hero-amount-label { opacity: 0.7; }
  .mobile-dash-hero-amount.is-clickable:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  .mobile-dash-vault-dots { display: flex; gap: 5px; margin-top: 3px; }

  .mobile-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mobile-dash-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
    padding: 16px 14px; box-shadow: none; color: var(--ink);
    font-weight: 700; font-size: 0.9rem; text-align: left;
  }
  .mobile-dash-card:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
  .mobile-dash-card .tab-icon { width: 22px; height: 22px; color: var(--accent); }

  .mobile-dash-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mobile-dash-insight { position: relative; min-width: 0; min-height: 190px; padding: 13px 11px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: none; text-align: left; overflow: hidden; }
  .mobile-dash-category-insight { display: flex; flex-direction: column; align-items: stretch; cursor: pointer; }
  .mobile-dash-category-insight:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.mobile-dash-insight { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
  button.mobile-dash-insight:hover:not(:disabled), button.mobile-dash-insight:active:not(:disabled) { background: var(--card); color: var(--ink); filter: none; box-shadow: none; transform: none; }
  .mobile-dash-insight-eyebrow { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-dash-plan-insight strong { font-size: .95rem; }
  .mobile-dash-plan-status { position: absolute; top: 13px; right: 11px; color: var(--accent-2); font-size: .55rem; font-weight: 850; letter-spacing: .05em; }
  .mobile-dash-plan-status.is-ending { color: var(--gold); }
  .mobile-dash-plan-status.is-trial { color: var(--gold); }
  .mobile-dash-plan-price { margin-top: 8px; color: var(--accent-2); font-size: 1.2rem; font-weight: 850; white-space: nowrap; }
  .mobile-dash-plan-insight.is-trial .mobile-dash-plan-price { white-space: normal; font-size: .9rem; line-height: 1.1; }
  .mobile-dash-plan-meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; color: var(--accent-2); font-size: .6rem; font-weight: 750; line-height: 1.15; white-space: pre-line; }
  .mobile-dash-category-body { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; margin-top: 10px; }
  .mobile-dash-category-open-hint { display:flex; width:100%; align-items:center; justify-content:flex-end; gap:4px; margin-top:auto; padding-top:8px; color:var(--accent); font-size:.62rem; font-weight:800; }
  .mobile-dash-category-open-hint svg { width:13px; height:13px; }
  .mobile-dash-plan-usage-label { color: var(--accent-2); font-size: .6rem; font-weight: 800; line-height: 1.1; }
  .mobile-dash-plan-usage-track { display: block; width: 100%; height: 4px; margin-top: 1px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, var(--border)); overflow: hidden; }
  .mobile-dash-plan-usage-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent-2); transition: width .2s ease; }
  .mobile-dash-plan-billing { color: var(--accent-2); font-size: .58rem; font-weight: 750; line-height: 1.15; }
  .mobile-dash-donut-wrap { position: relative; flex: 0 0 118px; width: 118px; height: 118px; }
  .mobile-dash-donut { position: relative; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--border) 0 100%); -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57%); mask: radial-gradient(circle, transparent 0 56%, #000 57%); }
  .mobile-dash-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
  .mobile-dash-donut-slice { fill: transparent; stroke: transparent; stroke-width: 1.5; cursor: pointer; transition: stroke .16s ease, stroke-width .16s ease; }
  .mobile-dash-donut-slice:hover, .mobile-dash-donut-slice.is-active { stroke: var(--slice-color); stroke-width: 4; filter: brightness(1.08); }
  .mobile-dash-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
  .mobile-dash-donut-center strong { display: block; max-width: 104px; font-size: clamp(.72rem, 3.8vw, .92rem); font-weight: 850; line-height: 1.05; white-space: nowrap; }
  .mobile-dash-donut-center small { display: -webkit-box; width: 78px; max-width: 78px; padding: 0 2px; box-sizing: border-box; overflow-wrap: anywhere; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; color: var(--muted); font-size: .5rem; line-height: 1.1; }
  .mobile-dash-category-legend { display: none; }
  .mobile-dash-category-item { display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 5px; align-items: center; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .59rem; text-align: left; cursor: pointer; box-shadow: none; }
  .mobile-dash-category-item b { grid-column: 2; color: var(--ink); font-size: .62rem; white-space: nowrap; }
  .mobile-dash-category-item i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
  .mobile-dash-category-item.is-active span, .mobile-dash-category-item.is-active b { color: var(--accent-2); }
  .mobile-dash-insight::after, .mobile-dash-category-item::after { display: none !important; }
  .mobile-dash-category-item:hover:not(:disabled), .mobile-dash-category-item:active:not(:disabled) { background: transparent; color: var(--muted); filter: none; box-shadow: none; transform: none; }
  @media (max-width: 420px) { .mobile-dash-insight { min-height: 190px; } .mobile-dash-donut-wrap { flex-basis: 116px; width: 116px; height: 116px; } }

  .mobile-dash-vault { display: flex; flex-direction: column; gap: 8px; }
  .mobile-dash-vault-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 4px 0 0; }
  .mobile-dash-vault-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card); border: 1.5px solid var(--border); border-radius: 12px;
    padding: 11px 14px; font-size: 0.86rem;
  }
  .mobile-dash-vault-row .amount-cell { font-weight: 700; color: var(--accent-2); }

  .mobile-dashboard.category-page-open > :not(.mobile-dash-header):not(.mobile-dash-category-page) { display:none; }
  .mobile-dash-category-page { display:flex; flex-direction:column; gap:16px; min-height:0; padding-bottom:24px; animation:mobile-page-in .2s ease-out; }
  @keyframes mobile-page-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
  .mobile-dash-page-back { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--ink); font-size:.8rem; font-weight:800; }
  .mobile-dash-page-back span { color:var(--accent); font-size:1.2rem; line-height:.7; }
  .mobile-dash-page-heading h1 { margin:4px 0 3px; font-size:1.55rem; }
  .mobile-dash-page-heading p { margin:0; font-size:.82rem; }
  .mobile-dash-category-total { display:flex; align-items:center; justify-content:space-between; padding:15px 14px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:14px; background:var(--accent-soft); }
  .mobile-dash-category-total span { color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
  .mobile-dash-category-total strong { color:var(--accent-2); font-size:1.35rem; }
  .mobile-dash-category-page-overview { display:grid; grid-template-columns:132px minmax(0,1fr); align-items:center; gap:14px; padding:14px; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius:16px; background:var(--accent-soft); }
  .mobile-dash-category-page-chart { position:relative; width:132px; height:132px; }
  .mobile-dash-page-donut { width:100%; height:100%; border-radius:50%; -webkit-mask:radial-gradient(circle, transparent 0 56%, #000 57%); mask:radial-gradient(circle, transparent 0 56%, #000 57%); }
  .mobile-dash-page-donut svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .mobile-dash-page-donut-slice { fill:transparent; stroke:transparent; stroke-width:1.5; }
  .mobile-dash-page-donut-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
  .mobile-dash-page-donut-center strong { color:var(--ink); font-size:.92rem; line-height:1.05; }
  .mobile-dash-page-donut-center small { color:var(--muted); font-size:.56rem; }
  .mobile-dash-category-page-overview p { margin:5px 0 0; color:var(--muted); font-size:.78rem; line-height:1.35; }
  .mobile-dash-category-section-title { margin:2px 0 -7px; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
  .mobile-dash-category-list { display:flex; flex-direction:column; gap:8px; }
  .mobile-dash-category-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
  .mobile-dash-category-row-dot { width:10px; height:10px; border-radius:50%; background:var(--dot); }
  .mobile-dash-category-row-name { display:flex; flex-direction:column; min-width:0; font-size:.88rem; font-weight:700; }
  .mobile-dash-category-row-name small { margin-top:2px; color:var(--muted); font-size:.65rem; font-weight:500; }
  .mobile-dash-category-row strong { color:var(--accent-2); font-size:.9rem; }
  .mobile-dash-receipt-list { display:flex; flex-direction:column; gap:8px; }
  .mobile-dash-receipt-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
  .mobile-dash-receipt-copy { display:flex; flex-direction:column; min-width:0; gap:3px; }
  .mobile-dash-receipt-copy .badge { align-self:flex-start; font-size:.56rem; }
  .mobile-dash-receipt-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
  .mobile-dash-receipt-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.65rem; }
  .mobile-dash-receipt-row > b { flex:0 0 auto; color:var(--accent-2); font-size:.84rem; }

  /* Einladender Einstieg zum Steuerausgleich: eigene Karte statt Druck im Dashboard */
  .mobile-dash-highlight {
    display: flex; align-items: center; gap: 12px;
    background: var(--accent-soft); border: 1.5px solid var(--border); border-radius: 16px;
    min-height: 68px; padding: 15px 16px; box-shadow: none; text-align: left; color: var(--ink);
  }
  .mobile-dash-highlight:hover:not(:disabled) { filter: none; box-shadow: none; transform: none; }
  .mobile-dash-highlight-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px;
    background: var(--card); color: var(--accent); display: flex; align-items: center; justify-content: center;
  }
  .mobile-dash-highlight-icon svg { width: 20px; height: 20px; }
  .mobile-dash-highlight-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .mobile-dash-highlight-title { font-weight: 800; font-size: 1rem; line-height: 1.2; }
  .mobile-dash-highlight-sub { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
  .mobile-dash-highlight-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted); }

  .mobile-back-btn {
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; margin-right: 6px;
    background: transparent; border: none; color: var(--ink); box-shadow: none; padding: 0;
  }
  .mobile-back-btn:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .vault-float { animation: none !important; opacity: 1; transform: none; }
}

/* ---------- Responsive: Beleg-Tabelle wird auf schmalen Screens zu Karten ---------- */
@media (max-width: 720px) {
  .wrap { padding: 14px 10px 60px; height: 100dvh; overscroll-behavior-y: auto; touch-action: pan-y; }
  .card { padding: 14px 14px; border-radius: 12px; }
  .brand-logo { width: 32px; height: 32px; }

  /* Beleg-Tab am Handy: Fortschrittsbalken + Kategorie-Summe direkt nach den Buttons einreihen,
     statt sie ganz unten in der Rail zu verstecken (Reihenfolge aus Antons Mockup). */
  .belege-main, .belege-rail { display: contents; }
  .belege-layout { gap: 12px; }
  #beleg-upload-card { order: 1; }
  #receipt-form-card { order: 2; }
  #pauschale-tracker-card { order: 3; }
  #rail-category-totals { order: 4; }
  #receipts-table-card { order: 5; }
  #kassasturz-teaser-card { order: 6; }
  #spickzettel-teaser-card { order: 7; }
  #rail-tip-card { order: 8; }

  /* Belege: mobile Einstieg nach dem Tresor-Mockup - Kategorie und Summe wechseln,
     die beiden Erfassungswege liegen bewusst leicht überlappend wie im Entwurf. */
  /* Offene mobile Arbeitsfläche: der Tresor und die Liste sollen wie im Entwurf
     ineinander übergehen, nicht wie mehrere verschachtelte Rechteck-Karten wirken. */
  #beleg-upload-card,
  #receipts-table-card { background: transparent; border: 0; box-shadow: none; }
  #beleg-upload-card { padding: 0 0 0; overflow: visible; }
  .mobile-belege-vault {
    position: relative; margin: 0 -14px -24px; padding: 13px 18px 10px;
    min-height: 250px; overflow: hidden; text-align: center;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 74%);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  .mobile-belege-vault::after { content: ''; position: absolute; inset: auto -20% -80px; height: 112px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 9%, transparent); pointer-events: none; }
  .mobile-belege-vault-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-belege-vault-year { color: var(--accent-2); }
  .mobile-belege-vault-stage { position: relative; z-index: 1; width: 156px; height: 92px; margin: 8px auto 0; }
  .mobile-belege-vault-svg { position: absolute; left: 50%; top: 50%; width: 128px; height: auto; overflow: visible; transform: translate(-50%, -50%); }
  .mobile-vault-body { position: absolute; left: 22px; top: 22px; width: 106px; height: 58px; border: 1.5px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--card) 88%, var(--bg)); box-shadow: 0 12px 22px color-mix(in srgb, var(--bg) 25%, transparent); }
  .mobile-vault-body i { position: absolute; left: 18px; top: 14px; width: 31px; height: 31px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 13%, transparent); }
  .mobile-vault-body b { position: absolute; right: -17px; top: 7px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
  .mobile-vault-body b::before, .mobile-vault-body b::after { content: ''; position: absolute; left: 50%; top: 50%; width: 25px; height: 1.5px; background: var(--accent-ink); transform: translate(-50%,-50%); opacity: .5; }
  .mobile-vault-body b::after { transform: translate(-50%,-50%) rotate(90deg); }
  .mobile-vault-coin { position: absolute; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--gold); background: var(--gold-bright); border: 1px solid var(--gold); font-size: .65rem; font-weight: 850; animation: mobile-vault-float 3.4s ease-in-out infinite; }
  .mobile-vault-coin-one { left: 45px; top: 8px; }
  .mobile-vault-coin-two { left: 66px; top: 1px; width: 14px; height: 14px; font-size: .48rem; animation-delay: .8s; }
  @keyframes mobile-vault-float { 0%,100% { transform: translateY(4px); opacity: .7; } 50% { transform: translateY(-7px); opacity: 1; } }
  .mobile-belege-vault-reading { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
  .mobile-belege-vault-controls { position: relative; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 5px; }
  .mobile-belege-vault-arrow { width: 32px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--muted); box-shadow: none; font-size: 2rem; line-height: 1; }
  .mobile-belege-vault-arrow:hover:not(:disabled) { background: transparent; color: var(--accent-2); box-shadow: none; transform: none; }
  .mobile-belege-vault-reading span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: opacity .2s ease, transform .2s ease; }
  .mobile-belege-vault-reading strong { color: var(--accent-2); font-size: 1.75rem; line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; transition: opacity .2s ease, transform .2s ease; }
  .mobile-belege-vault-reading.is-fading span, .mobile-belege-vault-reading.is-fading strong { opacity: 0; transform: translateY(4px); }
  .mobile-belege-vault-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
  .mobile-belege-vault-dots i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 28%, transparent); }
  .mobile-belege-vault-dots i.is-active { background: var(--accent-2); transform: scale(1.35); }
  #beleg-upload-card form { position: relative; z-index: 2; }
  #beleg-upload-card form > .row { display: flex; align-items: stretch; justify-content: center; gap: 0; margin: 2px 10px 0; }
  #beleg-upload-card form > .row button { position: relative; flex: 1 1 50%; min-height: 48px; padding: 10px 9px; border-radius: 14px; font-size: .86rem; white-space: nowrap; }
  #beleg-upload-card form > .row button:first-child { z-index: 2; box-shadow: 8px 0 0 var(--card); }
  #beleg-upload-card form > .row button + button { z-index: 1; margin-left: -10px; }
  #receipts-table-card { margin-top: 0; padding: 0 14px 18px; }
  #receipts-table-card .mobile-receipts-header { border-bottom: 1px solid var(--border); padding: 10px 0 12px; }
  #receipts-table-card #mobile-last-receipt-wrap { padding-top: 4px; }
  #receipts-table-card .mini-receipt-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 7px 2px; margin: 0; gap: 2px; }
  #receipts-table-card .mini-receipt-card .badge { padding: 3px 7px; font-size: .64rem; }
  #receipts-table-card .mini-receipt-card-desc { font-size: .8rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #receipts-table-card .mini-receipt-card-amount { font-size: .88rem; }
  #receipts-table-card .mini-receipt-card-meta { font-size: .66rem; line-height: 1.2; }
  #receipts-table-card .mini-receipt-card:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
  #pauschale-tracker-card, #rail-category-totals { display: none; }
  #receipts-table-card .mobile-receipts-header { padding-bottom: 4px; }
  #receipts-table-card .mobile-receipt-header-actions a { display: none; }
  #receipts-table-card .mobile-receipt-header-actions .mobile-only-btn { min-height: 38px; padding-inline: 13px; }
  #all-receipts-overlay .mobile-search-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 40px; grid-template-areas: "search search search" "category sort direction"; gap: 7px; }
  #all-receipts-overlay .mobile-search-icon-wrap { grid-area: search; min-width: 0; }
  #all-receipts-overlay #receipts-category-filter { grid-area: category; width: 100%; max-width: none; min-width: 0; height: 38px; padding: 7px 9px; font-size: .78rem; }
  #all-receipts-overlay #receipts-sort-select { grid-area: sort; width: 100%; min-width: 0; height: 38px; padding: 7px 9px; font-size: .78rem; }
  #all-receipts-overlay #receipts-sort-dir-btn { grid-area: direction; width: 40px; height: 38px; }

  /* Hamburger/Sidebar-Navigation wird am Handy durch das Karten-Dashboard + Zurück-Button ersetzt. */
  .hamburger-btn { display: none !important; }
  .mobile-back-btn { display: flex; }
  .mobile-back-label { display: block; }
  .main-topbar-spacer { display: none; }
  .main-topbar { padding: 12px 16px; }
  .main-topbar-right { gap: 8px; margin-left: auto; min-width: 0; }
  .main-topbar-right > label { flex: 0 0 76px; min-width: 0; }
  .main-topbar-right select {
    width: 76px; min-width: 76px; max-width: 76px; height: 32px; min-height: 32px; flex: 0 0 76px;
    padding: 0 8px; font-size: .64rem;
    overflow: hidden; text-overflow: clip; white-space: nowrap;
  }
  /* Der Belege-Header nutzt dieselbe kompakte Credits-/Jahr-/Profil-Gruppe wie das Dashboard. */
  .main-topbar-right #credits-header-pill {
    flex: 0 0 auto;
    width: auto;
    min-height: 32px;
    height: 32px;
    padding: 6px 8px;
    gap: 4px;
    font-size: .72rem;
  }
  .main-topbar-right #credits-header-pill svg { width: 13px; height: 13px; }
  .main-topbar-right .mobile-topbar-profile-btn { flex: 0 0 32px; }
  .profile-completion-wrap { display: none !important; }
  /* Passt genau wie am Dashboard: Zurück + "Dashboard", Jahr, Profilkreis - Rest übersiedelt ins Profil-Tab. */
  #header-language-btn, #add-year-btn, #theme-toggle, #admin-header-btn { display: none; }
  .profile-menu-wrap { display: none; }
  .avatar-circle.mobile-topbar-profile-btn { display: flex; }
  .mobile-only-card { display: block; }
  .mobile-receipts-header { align-items: flex-start; }
  .mobile-receipt-header-actions { margin-left: auto; }
  .mobile-receipt-header-actions .mobile-only-btn { display: inline-flex; }
  .mobile-receipt-header-actions button { min-height: 34px; padding: 7px 9px; font-size: .78rem; }

  /* "Allgemein"-Karte im Profil-Tab: Support, Passkeys, Passwort ändern, Konto löschen und
     Darstellung optisch zu einer Karte zusammenfassen, Reihenfolge nach Antons Vorgabe. */
  .profil-allgemein-wrap {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 4px 14px 10px; margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(23, 26, 43, 0.04), 0 10px 24px -18px rgba(23, 26, 43, 0.18);
  }
  .profil-allgemein-wrap .card {
    border: none; box-shadow: none; background: transparent; border-radius: 0;
    padding: 14px 0; margin: 0;
  }
  .profil-allgemein-wrap .card + .card { border-top: 1px solid var(--border); }
  #support-card { order: 1; }
  #passkeys-card { order: 2; }
  #username-change-card { order: 3; }
  #password-change-card { order: 4; }
  #delete-account-card { order: 5; }
  #darstellung-card { order: 6; }

  /* Profil-Tab am Handy: Kartenraster-Startbildschirm + Drill-down, wie beim Hauptdashboard. */
  .profil-mobile-heading { margin: 2px 0 16px; }
  .profil-mobile-heading h1 { margin: 2px 0 4px; font-size: 1.35rem; letter-spacing: -0.02em; }
  .profil-mobile-heading p { margin: 0; }
  .profil-mobile-kicker { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .profil-mobile-grid { gap: 10px; }
  .profil-mobile-grid .mobile-dash-card { min-height: 112px; gap: 7px; padding: 14px 13px; }
  .profil-mobile-grid .mobile-dash-card small { color: var(--muted); font-size: .7rem; font-weight: 600; line-height: 1.25; }
  .profil-mobile-card-featured { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
  .profil-mobile-card-featured .tab-icon { color: var(--accent-2); }
  .profil-mobile-card-completion.is-attention { border-color: color-mix(in srgb, var(--accent-2) 65%, var(--border)); }
  .profil-mobile-card-completion.is-attention .tab-icon { color: var(--accent-2); }
  .profile-language-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 18px; }
  .profile-language-modal.hidden { display: none; }
  .profile-language-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 10, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .profile-language-card { position: relative; width: min(390px, 100%); padding: 22px; border: 1px solid var(--accent); border-radius: 18px; background: var(--card); box-shadow: 0 24px 70px -24px rgba(0,0,0,.65); animation: app-dialog-in .18s cubic-bezier(.2,.8,.2,1); }
  .profile-language-card .modal-close { position: absolute; top: 10px; right: 10px; }
  .profile-language-card h2 { margin: 4px 0 6px; }
  .profile-language-card .muted { margin: 0 0 16px; }
  .profile-language-options { display: grid; gap: 8px; }
  .profile-language-option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--ink); text-align: left; font-weight: 700; }
  .profile-language-option small { color: var(--muted); font-size: .7rem; letter-spacing: .08em; }
  .profile-language-option.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
  .profile-contact-card strong { display: block; overflow-wrap: anywhere; margin: 2px 0 12px; }
  .profile-contact-card button { width: 100%; }
  #profil-section-abo, #profil-section-persoenlich, #profil-section-allgemein { display: none; }
  #profil-section-abo.profil-section-open,
  #profil-section-persoenlich.profil-section-open,
  #profil-section-allgemein.profil-section-open { display: block; }
  .profil-section-back {
    margin-bottom: 10px; background: transparent; color: var(--ink);
    box-shadow: none; padding: 6px 0; font-weight: 700;
  }
  .profil-section-back:hover:not(:disabled) { filter: none; box-shadow: none; transform: none; background: transparent; }
  .mobile-collapsible-form { display: none; }
  .mobile-collapsible-form.mobile-form-open { display: block; margin-top: 10px; }

  /* Persönliche Daten am Handy: Felder untereinander statt nebeneinander, damit
     Geburtsdatum nicht rechts abgeschnitten wird und Wohn-/Arbeitsadresse nicht versetzt sind. */
  #profil-section-persoenlich .row { flex-direction: column; align-items: stretch; }
  #profil-section-persoenlich .row > * { flex: 1 1 auto; width: 100%; }

  #drop-zone { display: none; }
  #rail-tip-card { display: none; }
  #kassasturz-teaser-card, #spickzettel-teaser-card { display: none; }
  .desktop-only-block { display: none; }
  .mobile-only-block { display: block; }
  .mobile-only-btn { display: inline-flex; }
  .main-content { padding: 18px 14px 50px; min-height: 0; touch-action: pan-y; overscroll-behavior-y: auto; }
  .main-content:has(#tab-belege:not(.hidden)) { padding-top: 0; }
  #auth-screen, #plan-screen { touch-action: pan-y; overscroll-behavior-y: auto; }
  #register-card input[type="date"], #profil-section-persoenlich input[type="date"], #profil-section-persoenlich input[type="month"],
  #onboarding-overlay input[type="date"], #onboarding-overlay input[type="month"] { width: 100%; min-width: 0; max-width: 100%; font-size: .82rem; padding-left: 6px; padding-right: 2px; box-sizing: border-box; }
  .profile-edit-cancel-btn { margin-left: 6px; }
  .admin-workflow-layout { grid-template-columns: 1fr; }
  .admin-workflow-canvas { min-height: 430px; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0);
    width: min(280px, 82vw);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
  }

  #receipts-table thead, #admin-users-table thead { display: none; }
  #receipts-table, #receipts-table tbody, #receipts-table tr, #receipts-table td,
  #admin-users-table, #admin-users-table tbody, #admin-users-table tr, #admin-users-table td {
    display: block; width: 100%;
  }
  #receipts-table tr, #admin-users-table tr {
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(23, 26, 43, 0.04);
  }
  #receipts-table tfoot tr { box-shadow: none; background: var(--accent-soft); }
  #receipts-table td, #admin-users-table td {
    border: none;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  #receipts-table td::before, #admin-users-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  #receipts-table td:first-child, #admin-users-table td:first-child { font-weight: 700; }
}

/* ================= WIZARD (Steuerausgleich-Fragebogen) ================= */
:root {
  --wiz-bg: #0b0d0c;
  --wiz-card: #15181a;
  --wiz-card-2: #1c2022;
  --wiz-accent: #2dd4bf;
  --wiz-accent-ink: #06201c;
  --wiz-ink: #f4f4f5;
  --wiz-muted: #9aa3a2;
  --wiz-border: #262b2b;
  --wiz-warn: #f5b942;
  --wiz-danger: #f16565;
}

.wizard-overlay {
  position: fixed;
  inset: 0;
  background: var(--wiz-bg);
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--wiz-ink);
  font-variant-numeric: tabular-nums;
}
.wizard-overlay.hidden { display: none; }

.wizard-shell { max-width: 640px; margin: 0 auto; padding: 18px 18px 60px; }

.wizard-topbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 18px; position: relative; }
.wizard-close-btn {
  width: 38px; height: 38px; border-radius: 999px; border: none; background: var(--wiz-card-2);
  color: var(--wiz-ink); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.wizard-close-btn:hover { background: #24292a; filter: none; }
.wizard-amount-wrap { width: min(100%, 920px); text-align: center; position: relative; }
.wizard-stat { display: flex; flex-direction: column; align-items: center; }
.wizard-stat-label {
  color: var(--wiz-muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.wizard-stat-refund {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wiz-border);
}
.wizard-refund-amount { color: var(--wiz-accent); font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.wizard-refund-label { margin-top: 3px; color: var(--wiz-muted); font-size: .68rem; }
.wizard-amount {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; transition: color 0.2s ease;
}
.wizard-amount.pulse-up, .wizard-refund-amount.pulse-up { animation: wiz-pulse-up 0.5s ease; }
@keyframes wiz-pulse-up { 0% { transform: scale(1); } 35% { transform: scale(1.12); color: var(--wiz-accent); } 100% { transform: scale(1); } }
.wizard-amount-label {
  display: inline-block; margin-top: 4px; font-size: 0.78rem; padding: 4px 12px; border-radius: 999px;
  background: var(--wiz-card-2); color: var(--wiz-muted);
}
.wizard-diff-badge {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-weight: 800; font-size: 0.95rem; color: var(--wiz-accent); pointer-events: none; opacity: 0;
}
.wizard-diff-badge.fly { animation: wiz-fly-up 0.9s ease-out forwards; }
@keyframes wiz-fly-up {
  0% { opacity: 1; transform: translateX(-50%) translateY(28px) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.85); }
}
.wizard-benefit-breakdown {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; text-align: left;
}
.wizard-estimate-pending {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--wiz-accent) 28%, var(--wiz-border));
  border-radius: 14px; background: color-mix(in srgb, var(--wiz-accent) 7%, var(--wiz-card));
}
.wizard-estimate-pending strong { color: var(--wiz-ink); font-size: .86rem; }
.wizard-estimate-pending span { color: var(--wiz-muted); font-size: .74rem; line-height: 1.4; }
.wizard-benefit-section, .wizard-selfbehalt-summary {
  min-width: 0; padding: 10px 12px; border: 1px solid var(--wiz-border); border-radius: 14px; background: rgba(21, 24, 26, .62);
}
.wizard-benefit-section-title {
  display: block; margin-bottom: 6px; color: var(--wiz-accent); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.wizard-benefit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid color-mix(in srgb, var(--wiz-border) 70%, transparent); }
.wizard-benefit-row:first-of-type { border-top: 0; }
.wizard-benefit-row span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wizard-benefit-row strong { overflow-wrap: anywhere; font-size: .78rem; }
.wizard-benefit-row small, .wizard-selfbehalt-summary small { color: var(--wiz-muted); font-size: .68rem; line-height: 1.25; }
.wizard-benefit-row b { flex: 0 0 auto; color: var(--wiz-accent); font-size: .82rem; white-space: nowrap; }
.wizard-selfbehalt-summary { border-color: color-mix(in srgb, var(--wiz-accent) 35%, var(--wiz-border)); background: color-mix(in srgb, var(--wiz-accent) 8%, var(--wiz-card)); }
.wizard-selfbehalt-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wizard-selfbehalt-summary span { font-size: .78rem; font-weight: 700; }
.wizard-selfbehalt-summary strong { color: var(--wiz-accent); font-size: .86rem; }
.wizard-selfbehalt-summary small { display: block; margin-top: 5px; }
.wizard-selfbehalt-summary.is-empty { display: flex; flex-direction: column; gap: 4px; }
.wizard-avatar-btn {
  width: 38px; height: 38px; border-radius: 999px; background: var(--wiz-card-2); border: none; color: var(--wiz-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.wizard-sidebar { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.wizard-cat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px;
  cursor: default;
}
.wizard-cat-row .wizard-cat-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wizard-cat-row .wizard-cat-icon { font-size: 1.15rem; }
.wizard-cat-ring {
  --pct: 0;
  width: 30px; height: 30px; border-radius: 999px;
  background: conic-gradient(var(--wiz-accent) calc(var(--pct) * 1%), var(--wiz-border) 0);
  display: flex; align-items: center; justify-content: center; transition: background 0.35s ease;
}
.wizard-cat-ring::after { content: ''; width: 20px; height: 20px; border-radius: 999px; background: var(--wiz-bg); }
.wizard-cat-ring.done { background: var(--wiz-accent); }
.wizard-cat-ring.done::after { content: '✓'; width: auto; height: auto; background: none; color: var(--wiz-accent-ink); font-weight: 900; font-size: 0.8rem; }

.wizard-card {
  background: var(--wiz-card); border: 1px solid var(--wiz-border); border-radius: 20px; padding: 22px 20px;
  margin: 4px 0 18px; animation: wiz-card-in 0.25s ease;
}
@keyframes wiz-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wizard-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.wizard-card-title { display: flex; align-items: center; gap: 8px; font-weight: 800; }

.wizard-q-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; }
.wizard-q-icon {
  width: 32px; height: 32px; min-width: 32px; border-radius: 999px; background: var(--wiz-card-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--wiz-muted);
}
.wizard-q-text { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.wizard-q-text-row { display: flex; align-items: flex-start; gap: 8px; }
.wizard-info-btn {
  width: 22px; height: 22px; min-width: 22px; padding: 0; border: 1px solid var(--wiz-border);
  border-radius: 50%; background: transparent; color: var(--wiz-muted); font-size: .75rem;
  font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wizard-info-btn:hover { border-color: var(--wiz-accent); color: var(--wiz-accent); }
.wizard-q-hint { font-size: 0.82rem; color: var(--wiz-muted); margin-top: 6px; font-weight: 400; }

.wizard-option-list { display: flex; flex-direction: column; gap: 10px; }
.wizard-option-group-label { margin: 14px 0 -2px; padding: 0 4px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wiz-muted, var(--muted)); }
.wizard-option-group-label:first-child { margin-top: 0; }
.wizard-review-list { display: flex; flex-direction: column; gap: 10px; }
.wizard-review-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wiz-card-2); cursor: pointer; }
.wizard-review-row input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent, #0f766e); flex-shrink: 0; }
.wizard-review-copy { display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.wizard-review-copy strong { font-weight: 700; }
.wizard-review-copy .muted { font-size: 0.8rem; color: var(--wiz-muted); }
.guide-pdf-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 8px 14px;
  border-radius: 999px; background: var(--accent, #0f766e); color: #fff; font-size: 0.82rem;
  font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.guide-pdf-btn::before { content: "⬇"; font-size: 0.85em; }
.guide-pdf-btn:hover { filter: brightness(1.08); }
.vault-info-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  margin-left: 2px; border: none; border-radius: 50%; background: rgba(255,255,255,0.14);
  color: inherit; font-size: 0.7rem; line-height: 1; cursor: pointer; vertical-align: middle;
  opacity: 0.75;
}
.vault-info-btn:hover { opacity: 1; background: rgba(255,255,255,0.24); }
.wizard-option {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 999px; border: none;
  background: transparent; color: var(--wiz-ink); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.wizard-option:hover:not(.selected) { background: var(--wiz-card-2); filter: none; }
.wizard-option.selected { background: var(--wiz-accent); color: var(--wiz-accent-ink); }
.wizard-option-icon { font-size: 1.1rem; width: 22px; text-align: center; }
.wizard-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wizard-option-copy strong { font-weight: inherit; }
.wizard-option-copy small { color: var(--wiz-muted); font-size: .74rem; line-height: 1.25; font-weight: 400; }
.wizard-option.selected .wizard-option-copy small { color: inherit; opacity: .75; }
.wizard-option-check {
  width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--wiz-card-2); font-size: 0.75rem; flex-shrink: 0;
}
.wizard-option.selected .wizard-option-check { background: rgba(6, 32, 28, 0.25); }

.wizard-toggle-row { display: flex; flex-direction: column; gap: 10px; }

.wizard-slider-row { display: flex; align-items: center; gap: 16px; padding: 30px 4px 10px; }
.wizard-slider-row input[type="range"] {
  --slider-progress: 0%;
  flex: 1; min-width: 0; height: 24px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--wiz-accent);
}
.wizard-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--wiz-accent) 0 var(--slider-progress), var(--wiz-border) var(--slider-progress) 100%);
}
.wizard-slider-row input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--wiz-accent) 0 var(--slider-progress), var(--wiz-border) var(--slider-progress) 100%);
}
.wizard-slider-row input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border: 0; border-radius: 50%; background: var(--wiz-accent); cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wiz-accent) 18%, transparent);
}
.wizard-slider-row input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--wiz-accent); cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wiz-accent) 18%, transparent);
}
.wizard-slider-value {
  min-width: 52px; height: 52px; border-radius: 999px; background: var(--wiz-card-2);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem;
}

.wizard-pct-slider-row { gap: 10px; }
.wizard-slider-edge { font-size: 0.75rem; color: var(--wiz-muted); font-weight: 700; min-width: 14px; text-align: center; }

/* Falsche/leere Antwort im Beleg-Prüfung-Wizard: kurzes Wackeln statt stiller Browser-Validierung
   (nötig, weil Ja/Nein- und Prozent-Antworten in einem verstecktem Input gespeichert werden). */
.wizard-shake { animation: wiz-shake 0.4s ease; }
@keyframes wiz-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) { .wizard-shake { animation: none; } }

/* Wisch-Geste im Beleg-Prüfung-Wizard (nur Mobile <=720px, siehe app.js wireReceiptWizardSwipe) */
.wizard-card.swipe-out-left {
  transition: transform 0.22s ease, opacity 0.22s ease; transform: translateX(-130%) rotate(-8deg); opacity: 0;
}
.wizard-card.swipe-out-up {
  transition: transform 0.22s ease, opacity 0.22s ease; transform: translateY(-130%); opacity: 0;
}
.wizard-card.swipe-in { animation: wiz-card-in 0.22s ease; }
@media (prefers-reduced-motion: reduce) {
  .wizard-card.swipe-out-left, .wizard-card.swipe-out-up { transition: none; transform: none; opacity: 1; }
  .wizard-card.swipe-in { animation: none; }
}

.wizard-amount-input-row { padding: 10px 0 4px; }
.wizard-amount-input-row .input-with-prefix { position: relative; }
.wizard-amount-input-row input, .wizard-text-input-row input {
  width: 100%; background: transparent; border: 1.5px solid var(--wiz-border); border-radius: 999px;
  padding: 14px 16px; color: var(--wiz-ink); font-size: 1rem;
}
.wizard-amount-input-row input:focus, .wizard-text-input-row input:focus { border-color: var(--wiz-accent); outline: none; }

.wizard-receipt-match {
  display: flex; align-items: center; gap: 12px; background: var(--wiz-card-2); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px;
}
.wizard-receipt-thumb {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--wiz-border); flex-shrink: 0; cursor: zoom-in;
}
.wizard-confidence-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.wizard-confidence-dot.high { background: var(--wiz-accent); }
.wizard-confidence-dot.mid { background: var(--wiz-warn); }
.wizard-confidence-dot.low { background: var(--wiz-muted); }
.wizard-receipt-match-text { font-size: 0.88rem; }
.wizard-receipt-match-text strong { font-size: 1rem; }
.wizard-receipt-finance {
  display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px;
  background: var(--wiz-card-2); border: 1px solid var(--wiz-border); border-radius: 14px;
}
.wizard-receipt-finance > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; color: var(--wiz-muted); }
.wizard-receipt-finance strong { color: var(--wiz-ink); font-size: .95rem; }
.wizard-receipt-finance .wizard-receipt-refund strong { color: var(--wiz-warn); }
.wizard-receipt-finance .wizard-receipt-net { padding-top: 7px; margin-top: 2px; border-top: 1px solid var(--wiz-border); color: var(--wiz-accent); font-weight: 800; }
.wizard-receipt-finance .wizard-receipt-net strong { color: var(--wiz-accent); font-size: 1.1rem; }
.wizard-receipt-missing { padding: 10px 12px; border: 1px solid rgba(245,185,66,.45); border-radius: 12px; background: rgba(245,185,66,.08); }

/* BelegHeld-Akkordeon: eine ruhige, eigene Prüfoberfläche statt eines langen
   Konkurrenz-Wizards. Nur ein Abschnitt ist geöffnet, erledigte Abschnitte
   können danach jederzeit wieder kontrolliert werden. */
#receipt-wizard-overlay .wizard-sidebar { display: none; }
#receipt-wizard-overlay .wizard-main-col { grid-column: 1 / -1; }
.receipt-accordion { display: flex; flex-direction: column; gap: 10px; }
.receipt-accordion-progress { position: relative; margin: 0 0 12px; padding: 2px 2px 0; }
.receipt-accordion-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--wiz-muted); font-size: .76rem; }
.receipt-accordion-progress-head strong { color: var(--wiz-accent); font-size: .8rem; }
.receipt-accordion-progress-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.receipt-accordion-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wiz-accent), #82f3d5); transition: width .35s ease; }
.receipt-accordion-progress-message { margin-top: 5px; color: var(--wiz-muted); font-size: .7rem; }
.receipt-confetti-piece { position: absolute; top: 19px; left: 50%; width: 6px; height: 10px; border-radius: 2px; background: var(--c); pointer-events: none; animation: receipt-confetti 1.2s ease-out forwards; }
@keyframes receipt-confetti { from { opacity: 1; transform: translate(-50%, 0) rotate(0); } to { opacity: 0; transform: translate(calc(-50% + var(--x)), 48px) rotate(var(--r)); } }
.receipt-accordion-panel { overflow: hidden; border: 1px solid var(--wiz-border); border-radius: 16px; background: var(--wiz-card-2); }
.receipt-accordion-panel.is-open { border-color: rgba(45,212,191,.55); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.receipt-accordion-toggle { width: 100%; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 0; background: transparent; color: var(--wiz-ink); text-align: left; cursor: pointer; }
.receipt-accordion-toggle:hover { background: rgba(255,255,255,.04); filter: none; }
.receipt-accordion-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.receipt-accordion-title > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.receipt-accordion-title strong { font-size: .98rem; }
.receipt-accordion-title small { color: var(--wiz-muted); font-size: .74rem; font-weight: 500; }
.receipt-accordion-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--wiz-accent); background: rgba(45,212,191,.12); flex-shrink: 0; }
.receipt-accordion-status { color: var(--wiz-muted); font-size: 1.35rem; line-height: 1; transform: rotate(0deg); transition: transform .2s ease, color .2s ease; }
.receipt-accordion-panel.is-open .receipt-accordion-status { transform: rotate(180deg); color: var(--wiz-accent); }
.receipt-accordion-body { padding: 0 15px 17px; }
.receipt-accordion-body[hidden] { display: none; }
.receipt-accordion-body > .ai-review-intro,
.receipt-accordion-body > #ai-review-intro { margin-top: 0; }
.receipt-accordion-next { width: 100%; min-height: 46px; margin-top: 5px; }
.receipt-accordion-actions { margin-top: 18px; }
#receipt-accordion-nutzung .ai-questions { border-top: 0; padding-top: 0; margin-top: 0; }
#receipt-accordion-nutzung .ai-q-progress { padding-top: 2px; }
.receipt-item-usage-head { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; color: var(--wiz-ink); }
.receipt-item-usage-head span { color: var(--wiz-muted); font-size: .76rem; }
.receipt-item-usage-panel { margin: 8px 0; overflow: hidden; border: 1px solid var(--wiz-border); border-radius: 13px; background: var(--wiz-bg); }
.receipt-item-usage-panel.is-open { border-color: rgba(45,212,191,.6); }
.receipt-item-usage-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 0; background: transparent; color: var(--wiz-ink); text-align: left; cursor: pointer; }
.receipt-item-usage-toggle:hover { background: rgba(255,255,255,.04); filter: none; }
.receipt-item-usage-toggle > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.receipt-item-usage-toggle strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.receipt-item-usage-toggle small { color: var(--wiz-muted); font-size: .72rem; }
.receipt-item-usage-changed { display: block; color: var(--wiz-accent); font-size: .72rem; font-style: normal; font-weight: 800; }
.receipt-item-usage-status { display: block; min-width: 0; }
.receipt-item-usage-panel.has-user-change { border-color: rgba(45,212,191,.7); }
.receipt-item-usage-chevron { color: var(--wiz-muted); font-size: 1.2rem; transition: transform .2s ease; }
.receipt-item-usage-panel.is-open .receipt-item-usage-chevron { color: var(--wiz-accent); transform: rotate(180deg); }
.receipt-item-usage-body { padding: 0 12px 12px; }
.receipt-item-usage-body[hidden] { display: none; }
.receipt-item-usage-label { display: block; color: var(--wiz-ink); font-size: .8rem; font-weight: 700; }
.receipt-item-usage-slider .wizard-slider-row { padding: 20px 0 4px; }
.receipt-item-usage-ai-value, .receipt-single-share-ai { margin: 8px 0; color: var(--wiz-muted); font-size: .78rem; }
.receipt-item-usage-ai-value strong, .receipt-single-share-ai strong { color: var(--wiz-accent); }
.receipt-item-usage-edit, .receipt-single-share-edit { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--wiz-border); border-radius: 999px; background: transparent; color: var(--wiz-ink); font-weight: 750; cursor: pointer; }
.receipt-item-usage-edit:hover, .receipt-single-share-edit:hover { background: rgba(255,255,255,.05); filter: none; }
.receipt-item-usage-editor[hidden], .receipt-single-share-editor[hidden] { display: none; }
.receipt-accordion-next { position: static; z-index: auto; margin-top: 0; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.receipt-share-confirm-question { margin: 13px 0 4px; padding: 12px; border: 1px solid rgba(245,185,66,.55); border-radius: 13px; background: rgba(245,185,66,.09); color: var(--wiz-ink); }
.receipt-share-confirm-question > span { display: block; margin-top: 4px; color: var(--wiz-muted); font-size: .8rem; line-height: 1.4; }
.receipt-share-confirm-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.receipt-share-confirm-actions .wizard-option { justify-content: center; padding: 10px 12px; border: 1px solid var(--wiz-border); font-size: .8rem; }
.receipt-share-confirm-actions .receipt-share-confirm-yes { background: var(--wiz-accent); color: var(--wiz-accent-ink); }
.receipt-share-confirm-actions .receipt-share-confirm-no { color: var(--wiz-ink); }
.receipt-share-confirm-question + .wizard-nav { margin-top: 12px; }
.receipt-questions-reopen { width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--wiz-border); border-radius: 999px; background: transparent; color: var(--wiz-muted); font-weight: 700; cursor: pointer; }
.receipt-questions-reopen:hover { background: transparent; color: var(--wiz-accent); filter: none; }
#receipt-share-override-confirm:not(.hidden) { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 20px; background: rgba(2, 7, 12, .72); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
#receipt-share-override-confirm:not(.hidden) .receipt-share-confirm-question { width: min(430px, 100%); margin: 0; padding: 22px; border: 1px solid rgba(45,212,191,.48); border-radius: 22px; background: linear-gradient(145deg, #17252a, #102e31); box-shadow: 0 28px 90px rgba(0,0,0,.55); color: var(--wiz-ink); animation: receipt-confirm-pop .22s ease-out both; }
#receipt-share-override-confirm:not(.hidden) .receipt-share-confirm-question strong { display: block; font-size: 1.12rem; color: #fff; }
#receipt-share-override-confirm:not(.hidden) .receipt-share-confirm-question > span { margin-top: 9px; color: rgba(255,255,255,.78); }
@keyframes receipt-confirm-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.receipt-saving-state { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 28px 18px; color: var(--wiz-ink); text-align: center; }
.receipt-saving-state span { color: var(--wiz-muted); font-size: .82rem; }
.receipt-saving-spinner { width: 34px; height: 34px; border: 3px solid rgba(45,212,191,.2); border-top-color: var(--wiz-accent); border-radius: 50%; animation: receipt-saving-spin .8s linear infinite; }
.receipt-saving-error { gap: 14px; }
@keyframes receipt-saving-spin { to { transform: rotate(360deg); } }
#receipt-wizard-overlay.is-saving .wizard-close-btn { visibility: hidden; }
.wizard-card .ai-source-details,
.wizard-card .ai-source-details:hover,
.wizard-card .ai-source-details[open] { background: var(--wiz-card-2); color: var(--wiz-muted); border-color: var(--wiz-border); box-shadow: none; }
.wizard-card .ai-source-details summary,
.wizard-card .ai-source-details summary:hover { background: transparent; color: var(--wiz-muted); filter: none; }
.wizard-card .ai-source-details summary::marker { color: var(--wiz-muted); }
.ai-analysis-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.ai-analysis-overlay.hidden { display: none; }
.ai-analysis-backdrop { position: absolute; inset: 0; background: rgba(3,8,15,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ai-analysis-card { position: relative; width: min(420px, 100%); overflow: hidden; padding: 22px; border: 1px solid rgba(45,212,191,.35); border-radius: 24px; background: linear-gradient(145deg,#0b1e2d,#092c30); color: #effffc; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ai-analysis-hero { width: 100%; height: 190px; margin-bottom: 4px; background: url('/assets/landing/belegheld-standing-gemini.jpg') center 35% / cover no-repeat; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); animation: ai-analysis-hero-fly 3.8s ease-in-out infinite alternate; }
.ai-analysis-kicker { color: #8bece5; font-size: .7rem; letter-spacing: .14em; font-weight: 800; }
.ai-analysis-card h2 { margin: 5px 0; font-size: 1.3rem; }
.ai-analysis-card p { margin: 4px 0 12px; color: rgba(239,255,252,.75); }
.ai-analysis-progress { color: #8bece5; font-size: .82rem; }
.ai-analysis-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.ai-analysis-dots span { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; animation: ai-analysis-dot 1s ease-in-out infinite; }
.ai-analysis-dots span:nth-child(2) { animation-delay: .15s; }
.ai-analysis-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-analysis-hero-fly { from { transform: translateY(10px) scale(1.02); filter: saturate(.85) brightness(.75); } to { transform: translateY(-10px) scale(1.06); filter: saturate(1.15) brightness(1); } }
@keyframes ai-analysis-dot { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .ai-analysis-hero, .ai-analysis-dots span, .receipt-confetti-piece { animation: none; } }
@media (max-width: 520px) { .ai-analysis-card { padding: 16px; border-radius: 20px; } .ai-analysis-hero { height: 150px; } }
@media (max-width: 420px) {
  .receipt-accordion-toggle { min-height: 60px; padding: 11px 12px; }
  .receipt-accordion-body { padding: 0 12px 14px; }
  .receipt-accordion-title strong { font-size: .91rem; }
  .receipt-accordion-title small { font-size: .68rem; }
}

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wizard-nav-left { display: flex; align-items: center; gap: 10px; }
.wizard-help-link { background: none; border: none; color: var(--wiz-muted); font-weight: 600; cursor: pointer; padding: 8px 0; }
.wizard-nav-btn {
  width: 46px; height: 46px; border-radius: 999px; border: none; background: var(--wiz-card-2); color: var(--wiz-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem;
}
.wizard-next-btn {
  min-width: 46px; height: 46px; padding: 0 20px; border-radius: 999px; border: none; background: var(--wiz-accent);
  color: var(--wiz-accent-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.wizard-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.wizard-nav button:focus-visible, .wizard-option:focus-visible, .wizard-info-btn:focus-visible, .wizard-close-btn:focus-visible {
  outline: 2px solid var(--wiz-accent); outline-offset: 2px;
}

.wizard-celebrate { text-align: center; padding: 30px 10px 10px; }
.wizard-celebrate-emoji { font-size: 3rem; margin-bottom: 6px; }
.wizard-celebrate-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.wizard-celebrate-stat { color: var(--wiz-accent); font-weight: 700; margin-bottom: 22px; }
.wizard-celebrate-btn {
  width: 100%; padding: 16px; border-radius: 999px; border: none; background: var(--wiz-accent); color: var(--wiz-accent-ink);
  font-weight: 800; font-size: 1rem; cursor: pointer;
}
.wizard-share-btn { width: 100%; margin-top: 10px; border-radius: 999px; }

/* ---------- BelegHeld KI: eigene Seite statt Popup (Desktop/Tablet) ----------
   Anton, 2026-09-08: "Mittig setzen und viel besser designen" - echte vertikale Zentrierung
   solange noch kein Gespräch läuft (wie ein "leerer" KI-Chat-Startbildschirm), plus Atmosphäre
   (Glow-Hintergrund, größerer Orb, Vorschlags-Chips) statt der vorherigen, zu kargen Version.
   Sobald eine echte Frage gestellt wurde (.has-conversation), rückt die Ansicht nach oben und
   verhält sich wie ein normaler Chatverlauf. Der Sidebar-Eintrag "BelegHeld KI" (data-tab="chatbot")
   führt auf #tab-chatbot statt einen Dialog zu öffnen (siehe index.html). Mobile ist Codex' Bereich. */
#tab-chatbot {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(40% 40% at 85% 15%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
  margin: -26px -28px; padding: 26px 28px;
  min-height: calc(100vh - 77px);
  min-height: calc(100dvh - 77px);
}
#tab-chatbot .chatbot-page {
  position: relative; max-width: 1400px; width: 100%; margin: 0 auto;
  min-height: calc(100vh - 77px - 52px);
  min-height: calc(100dvh - 77px - 52px);
  display: flex; flex-direction: column; justify-content: center;
}
#tab-chatbot .chatbot-page.has-conversation { justify-content: flex-end; padding-top: 24px; }
#tab-chatbot .chatbot-page.has-conversation .chatbot-hero { padding: 0 16px 18px; }
#tab-chatbot .chatbot-page.has-conversation .chatbot-hero-orb { width: 46px; height: 46px; margin-bottom: 10px; }
#tab-chatbot .chatbot-page.has-conversation .chatbot-hero-orb img { width: 24px; height: 24px; }
#tab-chatbot .chatbot-page.has-conversation .chatbot-hero-sub,
#tab-chatbot .chatbot-page.has-conversation .chatbot-suggestions { display: none; }
#tab-chatbot .chatbot-page.has-conversation .chatbot-hero h2 { font-size: 1.3rem; }

.chatbot-hero { text-align: center; padding: clamp(20px, 3vw, 36px) 16px clamp(18px, 2vw, 26px); transition: padding 0.25s ease; }
.chatbot-hero-orb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; border-radius: 50%; margin-bottom: 22px;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%), var(--accent-soft);
  animation: chatbot-orb-pulse 3.6s ease-in-out infinite;
  transition: width 0.25s ease, height 0.25s ease;
}
.chatbot-hero-orb::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: chatbot-orb-ring 3.6s ease-in-out infinite;
}
.chatbot-hero-orb img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent)); transition: width 0.25s ease, height 0.25s ease; }
@keyframes chatbot-orb-pulse {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 32%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 50%, transparent); }
}
@keyframes chatbot-orb-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 0.1; }
}
.chatbot-eyebrow { margin: 0 0 10px; color: var(--accent-2); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.chatbot-hero h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -0.03em; transition: font-size 0.25s ease; }
.chatbot-hero-sub { margin: 12px 0 0; color: var(--muted); font-size: 0.96rem; }
.chatbot-page.is-coming-soon { justify-content: center; }
.chatbot-page.is-coming-soon .chatbot-suggestions,
.chatbot-page.is-coming-soon .chatbot-messages,
.chatbot-page.is-coming-soon .chatbot-form,
.chatbot-page.is-coming-soon .chatbot-note { display: none; }
.chatbot-page.is-coming-soon .chatbot-hero { padding-bottom: 18px; }
.chatbot-page.is-live-hold .chatbot-hero-orb { animation: chatbot-coming-soon-logo 2.8s ease-in-out infinite; }
.chatbot-page.is-live-hold .chatbot-hero h2 { animation: chatbot-coming-soon-title .65s cubic-bezier(.2,.8,.2,1) both; }
.chatbot-page.is-live-hold .chatbot-hero-sub { animation: chatbot-coming-soon-title .65s .08s cubic-bezier(.2,.8,.2,1) both; }
.chatbot-page.is-live-hold .chatbot-coming-soon { animation: chatbot-coming-soon-title .65s .16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chatbot-coming-soon-logo { 0%, 100% { transform: scale(.96); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent); } 50% { transform: scale(1.04); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent), 0 0 58px color-mix(in srgb, var(--accent) 52%, transparent); } }
@keyframes chatbot-coming-soon-title { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chatbot-coming-soon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: min(700px, 100%); margin: 6px auto 0; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 44%, var(--card)), var(--card)); box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 12%, transparent); text-align: left; }
.chatbot-coming-soon-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--accent) 18%, var(--bg)); color: var(--accent-2); font-size: 1.25rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.chatbot-coming-soon-kicker { color: var(--accent-2); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.chatbot-coming-soon h3 { margin: 3px 0 4px; font-size: 1.05rem; }
.chatbot-coming-soon p { max-width: 54ch; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.chatbot-coming-soon-state { align-self: start; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); border-radius: 8px; color: var(--muted); font-size: .68rem; font-weight: 700; white-space: nowrap; }

.chatbot-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.chatbot-suggestion {
  padding: 11px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.chatbot-suggestion:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.chatbot-suggestion:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.chatbot-messages { display: flex; flex-direction: column; gap: 12px; max-height: 56vh; overflow-y: auto; padding: 4px 4px 14px; }
.chatbot-messages:not(:empty) { margin-top: 4px; }
.steuer-chat-message { max-width: min(78%, 680px); padding: 12px 16px; border-radius: 16px; font-size: 0.93rem; line-height: 1.55; white-space: pre-wrap; }
.steuer-chat-message.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--shadow); }
.steuer-chat-message.user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg); border-bottom-right-radius: 5px; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.steuer-chat-message.loading { color: var(--muted); border-style: dashed; }
.steuer-chat-message p { margin: 0 0 8px; }
.steuer-chat-message p:last-child { margin-bottom: 0; }
.steuer-chat-message ul { margin: 0 0 8px; padding-left: 18px; }
.steuer-chat-message ul:last-child { margin-bottom: 0; }
.steuer-chat-message li { margin: 2px 0; }

.steuer-chat-rating {
  align-self: flex-start; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: -4px 0 4px 4px; padding: 6px 10px; color: var(--muted); font-size: 0.78rem;
}
.steuer-chat-rating-label { white-space: nowrap; }
.steuer-chat-rating-stars { display: inline-flex; gap: 2px; }
.steuer-chat-rating-stars button {
  padding: 0; border: 0; background: transparent; color: var(--border); font-size: 1.1rem;
  line-height: 1; cursor: pointer; transition: color 0.12s ease, transform 0.12s ease;
}
.steuer-chat-rating-stars button:hover,
.steuer-chat-rating-stars button:hover ~ button { color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.steuer-chat-rating-stars button.is-selected { color: var(--accent-2); }
.steuer-chat-rating-reasons { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 2px; }
.steuer-chat-rating-reasons button {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 0.74rem; cursor: pointer;
}
.steuer-chat-rating-reasons button:hover { border-color: var(--accent); background: var(--accent-soft); }

.steuer-chat-proposal {
  align-self: flex-start; max-width: min(90%, 480px); padding: 14px 16px; margin: 2px 0 6px;
  border: 1px solid var(--accent); border-radius: 16px; background: var(--accent-soft);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 18%, transparent);
}
.steuer-chat-proposal-head { font-weight: 800; font-size: 0.88rem; margin-bottom: 8px; }
.steuer-chat-proposal-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 0.82rem; }
.steuer-chat-proposal-grid span { color: var(--muted); }
.steuer-chat-proposal-note { margin: 8px 0 0; color: var(--muted); font-size: 0.72rem; }
.steuer-chat-proposal-actions { display: flex; gap: 8px; margin-top: 12px; }
.steuer-chat-proposal-actions button {
  flex: 1; padding: 8px 10px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg);
}
.steuer-chat-proposal-actions button.secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.steuer-chat-proposal-actions button:disabled { opacity: 0.6; cursor: default; }

.chatbot-form {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 20px; margin: 14px 0 10px;
  border: 1px solid var(--border); border-radius: 22px; background: var(--card); box-shadow: 0 12px 34px rgba(0,0,0,.22);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chatbot-form:focus-within { border-color: var(--accent); box-shadow: 0 12px 34px rgba(0,0,0,.22), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chatbot-form textarea { flex: 1; resize: none; max-height: 160px; min-height: 28px; padding: 10px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.95rem; }
.chatbot-form textarea:focus { outline: none; }
.chatbot-form button {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; line-height: 0;
  border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg); cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.chatbot-form button svg { display: block; width: 19px; height: 19px; }
.chatbot-form button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.chatbot-form button:disabled { opacity: 0.55; cursor: default; }
.chatbot-form button.is-sending svg { animation: chatbot-send-spin 0.9s linear infinite; }
@keyframes chatbot-send-spin { to { transform: rotate(360deg); } }
.chatbot-note { margin: 0; text-align: center; color: var(--muted); font-size: 0.7rem; }
.chatbot-form button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (max-width: 720px) {
  .chatbot-coming-soon { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; }
  .chatbot-coming-soon-state { grid-column: 2; justify-self: start; }
}
@media (max-width: 720px) { #tab-chatbot { margin: 0; padding: 0; min-height: 0; background: none; } }

.wizard-info-summary {
  display: grid;
  gap: 5px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 12px;
  background: rgba(45, 212, 191, 0.08);
}
.wizard-info-summary strong { color: var(--wiz-accent); }
.wizard-info-summary span { color: var(--wiz-muted); font-size: .86rem; line-height: 1.45; }
.wizard-confirm-summary { display: grid; gap: 8px; margin: 16px 0 20px; }
.wizard-confirm-summary > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 13px; border: 1px solid var(--wiz-border); border-radius: 10px; background: var(--wiz-card-2);
}
.wizard-confirm-summary span { color: var(--wiz-muted); }
.wizard-confirm-summary strong { color: var(--wiz-ink); text-align: right; }
.wizard-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 720px) {
  .wizard-confirm-actions { display: grid; grid-template-columns: 1fr; }
  .wizard-confirm-summary > div { display: grid; gap: 3px; }
  .wizard-confirm-summary strong { text-align: left; }
}

.wizard-teaser {
  background: var(--teaser-bg, linear-gradient(135deg, #e6f7f4, #ecfeff));
  border: 1px solid var(--teaser-border, #b8e6db); color: var(--ink);
}
.wizard-teaser h2 { color: var(--ink); }
.wizard-teaser .muted { color: var(--muted); }
.wizard-teaser button { background: var(--wiz-accent); color: var(--wiz-accent-ink); }

@media (min-width: 900px) {
  .wizard-shell { max-width: 1040px; display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-top: 28px; align-items: start; }
  .wizard-topbar { grid-column: 1 / -1; }
  .wizard-sidebar { position: sticky; top: 28px; gap: 4px; }
  .wizard-cat-row { padding: 12px 10px; border-radius: 12px; }
  .wizard-main-col { min-width: 0; }
}

/* Kassasturz: kompakte Desktop-Arbeitsfläche statt lose Elemente auf leerem Grund. */
@media (min-width: 900px) {
  #wizard-overlay { background: radial-gradient(circle at 50% 6%, #123934 0, var(--wiz-bg) 42%); }
  #wizard-overlay .wizard-shell { max-width: 1120px; padding: 28px 26px 64px; }
  #wizard-overlay .wizard-topbar {
    grid-column: 1 / -1; padding: 12px 16px 14px; margin-bottom: 2px;
    border: 1px solid color-mix(in srgb, var(--wiz-accent) 20%, var(--wiz-border));
    border-radius: 22px; background: color-mix(in srgb, var(--wiz-card) 92%, transparent);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  }
  #wizard-overlay .wizard-amount { font-size: 2.35rem; }
  #wizard-overlay .wizard-close-btn { transition: transform .2s ease, background .2s ease; }
  #wizard-overlay .wizard-close-btn:hover { transform: rotate(-8deg) scale(1.05); background: var(--wiz-accent); color: var(--wiz-accent-ink); }
  #wizard-overlay .wizard-sidebar {
    gap: 6px; padding: 10px; margin: 0; border: 1px solid var(--wiz-border);
    border-radius: 20px; background: color-mix(in srgb, var(--wiz-card) 76%, transparent);
  }
  #wizard-overlay .wizard-cat-row {
    min-height: 58px; padding: 11px 12px; border: 1px solid transparent; border-radius: 14px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  #wizard-overlay .wizard-cat-row.is-current {
    border-color: color-mix(in srgb, var(--wiz-accent) 55%, var(--wiz-border));
    background: color-mix(in srgb, var(--wiz-accent) 12%, var(--wiz-card));
    transform: translateX(3px);
  }
  #wizard-overlay .wizard-cat-row.is-current .wizard-cat-name { color: var(--wiz-accent); }
  #wizard-overlay .wizard-card {
    min-height: 330px; margin: 0; padding: 28px 28px 22px; border-radius: 22px;
    border-color: color-mix(in srgb, var(--wiz-accent) 18%, var(--wiz-border));
    box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
  }
  #wizard-overlay .wizard-card-header { margin-bottom: 22px; }
  #wizard-overlay .wizard-q-text { font-size: 1.22rem; }
  #wizard-overlay .wizard-amount-input-row input { min-height: 58px; border-radius: 16px; font-size: 1.05rem; }
}

/* Mobile: Fortschritt links, Beleg-/Fragenkarte rechts. Dadurch bleibt die
   Analyse sichtbar und die Fragen werden nicht als langer Block über dem Inhalt
   dargestellt. Die Spalte ist bewusst kompakt, damit sie auch auf kleinen Geräten
   nicht zum horizontalen Scrollen führt. */
@media (max-width: 899px) {
  .wizard-shell {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    max-width: 760px;
  }
  .wizard-topbar { grid-column: 1 / -1; }
  .wizard-sidebar { grid-column: 1; grid-row: 2; position: sticky; top: 12px; margin: 0; }
  .wizard-main-col { grid-column: 2; grid-row: 2; min-width: 0; }
  .wizard-cat-row { padding: 10px 4px; align-items: flex-start; }
  .wizard-cat-row .wizard-cat-name { flex-direction: column; align-items: flex-start; gap: 5px; font-size: .75rem; line-height: 1.2; }
  .wizard-cat-row .wizard-cat-icon { font-size: 1rem; }
  .wizard-cat-ring { width: 25px; height: 25px; min-width: 25px; flex-basis: 25px; }
  .wizard-cat-ring::after { width: 17px; height: 17px; font-size: .5rem; }
  .wizard-card { padding: 18px 15px; margin-top: 0; }
  .wizard-q-text { font-size: 1rem; }
  .wizard-receipt-finance { margin: 0 0 16px; }
}

@media (max-width: 420px) {
  .wizard-shell { grid-template-columns: 88px minmax(0, 1fr); column-gap: 8px; padding-left: 10px; padding-right: 10px; }
  .wizard-cat-row { padding-left: 0; padding-right: 0; }
  .wizard-cat-row .wizard-cat-name { font-size: .68rem; }
  .wizard-card { padding: 15px 12px; border-radius: 16px; }
  .wizard-q-row { gap: 7px; margin-bottom: 16px; }
  .wizard-q-icon { width: 28px; height: 28px; min-width: 28px; }
}

/* Auf kleinen Geräten wird der Wizard zu einer klaren Schrittfolge oben und einer
   vollbreiten Fragekarte darunter. So bleibt die Frage gut lesbar, ohne dass die
   linke Navigation den Inhalt zusammendrückt. */
@media (max-width: 720px) {
  .wizard-shell { display: block; max-width: 680px; padding: 12px 14px 30px; }
  .wizard-topbar { padding: 4px 0 12px; }
  .wizard-amount { font-size: 2rem; }
  .wizard-benefit-breakdown { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .wizard-sidebar {
    display: flex; flex-direction: row; align-items: stretch; gap: 8px; margin: 0 0 12px;
    overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 5px; scrollbar-width: thin;
  }
  .wizard-cat-row {
    flex: 0 0 132px; min-width: 132px; display: grid; grid-template-columns: minmax(0, 1fr) 23px; align-items: center;
    gap: 8px; padding: 9px 10px; border: 1px solid var(--wiz-border); border-radius: 14px;
    background: rgba(21, 24, 26, .72); transition: border-color .18s ease, background .18s ease;
  }
  .wizard-cat-row.is-current { border-color: var(--wiz-accent); background: rgba(45, 212, 191, .1); }
  .wizard-cat-row .wizard-cat-name { flex-direction: row; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.15; }
  .wizard-cat-row .wizard-cat-name > :last-child { min-width: 0; overflow-wrap: anywhere; }
  .wizard-cat-row .wizard-cat-icon { font-size: .95rem; }
  .wizard-cat-ring { width: 23px; height: 23px; min-width: 23px; flex-basis: 23px; }
  .wizard-cat-ring::after { width: 15px; height: 15px; font-size: .45rem; }
  .wizard-main-col { min-width: 0; }
  .wizard-card { padding: 18px 16px; margin: 0; border-radius: 18px; }
  .wizard-q-text { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-amount.pulse-up, .wizard-diff-badge.fly, .wizard-card { animation: none; }
}

/* Kassasturz: Kategorien als echte, responsive Akkordeon-Tabs statt Scroll-Leiste. */
#wizard-sidebar .wizard-cat-row {
  width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; overflow: hidden;
}
#wizard-sidebar .wizard-cat-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#wizard-sidebar .wizard-cat-ring {
  min-width: 30px; flex: 0 0 30px; aspect-ratio: 1; border-radius: 50%;
}
#wizard-sidebar .wizard-cat-ring::after {
  content: attr(data-pct); width: 20px; height: 20px; border-radius: 50%; background: var(--wiz-bg);
  display: flex; align-items: center; justify-content: center; color: var(--wiz-ink); font-size: .55rem; font-weight: 800;
}
#wizard-sidebar .wizard-cat-ring.done { background: conic-gradient(var(--wiz-accent) 100%, var(--wiz-border) 0); }
#wizard-sidebar .wizard-cat-ring.done::after { content: attr(data-pct); width: 20px; height: 20px; background: var(--wiz-bg); color: var(--wiz-ink); font-size: .55rem; }
#wizard-sidebar .wizard-cat-status {
  display: none; color: var(--wiz-muted); font-size: .68rem; font-weight: 600; letter-spacing: .01em;
}
#wizard-sidebar .wizard-cat-row.is-current .wizard-cat-status { display: block; }
#wizard-sidebar .wizard-cat-row:not(.is-current):hover { background: var(--wiz-card-2); border-color: var(--wiz-border); }
#wizard-sidebar .wizard-cat-row:focus-visible { outline: 2px solid var(--wiz-accent); outline-offset: 2px; }

@media (min-width: 721px) and (max-width: 899px) {
  #wizard-overlay .wizard-sidebar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible;
    padding: 2px; margin-bottom: 14px;
  }
  #wizard-overlay .wizard-cat-row { min-height: 62px; padding: 11px 12px; }
  #wizard-overlay .wizard-cat-row.is-current { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  #wizard-overlay .wizard-sidebar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible;
    overscroll-behavior: unset; padding: 2px; margin: 0 0 14px;
  }
  #wizard-overlay .wizard-cat-row {
    flex: none; min-width: 0; min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) 23px;
    padding: 10px 11px; border-radius: 15px;
  }
  #wizard-overlay .wizard-cat-row.is-current { grid-column: 1 / -1; min-height: 66px; }
  #wizard-overlay .wizard-cat-row .wizard-cat-name { flex-direction: row; align-items: center; font-size: .76rem; }
  #wizard-overlay .wizard-cat-row .wizard-cat-status { font-size: .66rem; }
}

@media (max-width: 420px) {
  #wizard-overlay .wizard-sidebar { gap: 6px; }
  #wizard-overlay .wizard-cat-row { padding-left: 9px; padding-right: 9px; }
  #wizard-overlay .wizard-cat-row .wizard-cat-name { font-size: .7rem; }
}

/* Der Beleg-Prüfung-Wizard verschiebt die bestehenden KI-Vorschlag-/Rückfrage-Elemente
   (heller Kartenstil) in die dunkle Wizard-Karte - hier werden sie auf die --wiz-* Tokens
   umgefärbt, damit es wie ein einziges Feature aussieht statt zwei verschiedene Stile. */
.wizard-card .ai-suggestion-item { color: var(--wiz-ink); }
.wizard-card .ai-suggestion-risk { background: var(--wiz-card-2); color: var(--wiz-muted); }
.wizard-card .ai-suggestion-text { color: var(--wiz-muted); }
.wizard-card .ai-suggestion.warning .ai-suggestion-text { color: var(--wiz-warn); }
.wizard-card .confidence-track { background: var(--wiz-border); }
.wizard-card .confidence-label { color: var(--wiz-muted); }
.wizard-card .ai-validation-warnings {
  border-color: var(--wiz-danger); background: rgba(241, 101, 101, 0.12); color: var(--wiz-ink);
}
.wizard-card .ai-source-box { background: var(--wiz-card-2); border-color: var(--wiz-border); color: var(--wiz-ink); }
.wizard-card .ai-source-box a { color: var(--wiz-accent); }
.wizard-card .ai-source-details { padding: 8px 10px; margin: 8px 0; font-size: .76rem; }
.wizard-card .ai-source-details summary { cursor: pointer; color: var(--wiz-accent); font-weight: 800; }
.wizard-card .ai-source-details-body { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-top: 7px; color: var(--wiz-muted); }
.wizard-card .ai-source-details-body a { font-size: .75rem; }
.wizard-card .ai-source-details,
.wizard-card .ai-source-details:hover,
.wizard-card .ai-source-details[open] { display: block; padding: 0; margin: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wizard-card .ai-source-details summary,
.wizard-card .ai-source-details summary:hover { display: inline-block; padding: 0; border: 0; background: transparent; color: var(--wiz-accent); font-weight: 600; }
.wizard-card .ai-source-details summary::marker { color: var(--wiz-accent); }
.wizard-card .ai-source-details { font-size: .82rem; }
.wizard-card .ai-source-details summary { font-size: .82rem; font-weight: 600; }
.wizard-receipt-calculation { margin-top: 8px; border-top: 1px solid var(--wiz-border); }
.wizard-receipt-calculation summary { list-style-position: outside; cursor: pointer; }
.wizard-receipt-calculation-body { padding: 9px 2px 0; color: var(--wiz-muted); font-size: .76rem; }
.wizard-receipt-calculation-title { display: block; margin-bottom: 5px; color: var(--wiz-ink); font-weight: 700; }
.wizard-receipt-calculation-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.wizard-receipt-calculation-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-receipt-calculation-row strong { flex-shrink: 0; color: var(--wiz-ink); font-weight: 600; }
.wizard-receipt-calculation-row-breakdown { opacity: 0.72; font-style: italic; }
.wizard-receipt-calculation-row-breakdown strong { color: var(--wiz-muted); font-weight: 500; }
.wizard-card .ai-quick-facts { color: var(--wiz-muted); }
.wizard-card .ai-quick-facts strong { color: var(--wiz-ink); }
.wizard-card .ai-reasoning-details { color: var(--wiz-muted); }
.wizard-card .ai-reasoning-details summary { color: var(--wiz-accent); }
.wizard-card .item-checklist-row { background: var(--wiz-card-2); border-color: var(--wiz-border); }
.wizard-card .item-checklist-desc { color: var(--wiz-ink); }
.wizard-card .item-checklist-pct { color: var(--wiz-muted); }
.wizard-card .item-pct-input {
  background: var(--wiz-bg); border-color: var(--wiz-border); color: var(--wiz-ink);
}
.wizard-card .share-hint { color: var(--wiz-accent); }
.wizard-card .ai-questions { border-top-color: var(--wiz-border); margin-top: 0; padding-top: 0; }
.wizard-card .ai-q-progress-label { color: var(--wiz-muted); }
.wizard-card .ai-q-progress-track { background: var(--wiz-border); }
.wizard-card .ai-question { color: var(--wiz-ink); }
.wizard-card .ai-question select,
.wizard-card .ai-question input {
  background: var(--wiz-card-2); border-color: var(--wiz-border); color: var(--wiz-ink);
}
.wizard-card .ai-question select:focus,
.wizard-card .ai-question input:focus { border-color: var(--wiz-accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18); }
.wizard-card .ai-q-done { color: var(--wiz-ink); flex-direction: column; align-items: flex-start; }
.wizard-card .ai-q-done .wizard-celebrate-btn { margin-top: 4px; }

/* ================= LANDING PAGE (logged-out visitors) ================= */
#auth-forms-anchor { max-width: 460px; margin: 0 auto; }

.reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* The marketing landing page is a fixed dark cinematic design (see the pinned
   --hero-*/--bg token block below) - it must NOT follow the app's light/dark
   theme toggle, so no theme-conditional token overrides live here anymore. */
html:has(#landing-page), body:has(#landing-page) { background: #0a0f0e; }
#landing-page .card { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 18px 34px -20px rgba(0, 0, 0, 0.55); }

/* Full-bleed sections (background spans the whole viewport width) with a centered,
   readable content column inside - this is what lets the landing page "use the whole
   screen" while keeping copy at a sane line length. */
.landing-header-inner, .landing-mobile-menu, .landing-section,
.landing-final-cta, .landing-footer-grid, .landing-footer-bottom {
  max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box;
}

.landing-snap { min-height: 100dvh; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; }
.landing-snap-end { scroll-snap-align: end; }
@media (prefers-reduced-motion: reduce) {
  .landing-snap { min-height: 0; scroll-snap-align: none; }
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.landing-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.35);
  background: var(--card);
}
.landing-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 32px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  padding-left: calc(32px + env(safe-area-inset-left, 0px));
  padding-right: calc(32px + env(safe-area-inset-right, 0px));
}
.landing-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.landing-brand .brand-logo-sm { width: 40px; height: 40px; border-radius: 10px; }
.landing-brand-name { font-weight: 800; font-size: 1.32rem; letter-spacing: -0.01em; }
.landing-nav { display: flex; align-items: center; gap: 22px; flex: 1; }
.landing-nav a { color: var(--ink); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; position: relative; padding: 4px 0; transition: color 0.15s ease; }
.landing-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--accent); transition: right 0.2s ease;
}
.landing-nav a:hover::after { right: 0; }
.landing-header-actions { display: flex; align-items: center; gap: 12px; }
.landing-header-login-btn, .landing-header-register-btn { padding: 9px 18px; font-size: 0.88rem; white-space: nowrap; }
.landing-theme-toggle { flex-shrink: 0; }
.landing-hamburger {
  display: none; background: none; border: none; box-shadow: none; padding: 8px; flex-direction: column;
  gap: 4px; width: 34px; height: 34px; align-items: center; justify-content: center;
}
.landing-hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.landing-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.landing-hamburger.open span:nth-child(2) { opacity: 0; }
.landing-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.lang-select { position: relative; }
.lang-select-btn {
  display: flex; align-items: center; gap: 6px; background: var(--card); color: var(--ink);
  border: 1.5px solid var(--border); box-shadow: none; padding: 8px 12px; font-size: 0.82rem; font-weight: 600;
}
.lang-select-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.lang-select-chevron { flex-shrink: 0; }
.lang-select-list {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.35); list-style: none; margin: 0; padding: 6px;
}
.lang-select-list li {
  padding: 8px 10px; border-radius: 7px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lang-select-list li:hover { background: var(--accent-soft); }
.lang-select-list li[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.lang-select-list li[aria-disabled="true"]:hover { background: none; }
.lang-select-list li[aria-selected="true"] { color: var(--accent); }
.lang-soon { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--accent-soft); padding: 1px 6px; border-radius: 999px; }

.landing-mobile-menu { display: none; }

/* ---------- Full-screen Hero (Sora + teal accent, floating receipt cards) ----------
   The whole marketing landing page is a dedicated dark cinematic design - it must NOT
   follow the app's light/dark theme toggle (which only makes sense for the logged-in
   product UI). So every shared token a landing-page component might use (--bg, --card,
   --ink, --muted, --border, --accent, --accent-2, --accent-soft) is pinned to the dark
   palette here, in addition to the hero-only --hero-* tokens. */
#landing-page {
  --hero-bg: #0a0f0e;
  --hero-bg-soft: #0d1413;
  --hero-fg: #f2f5f4;
  --hero-muted: #93a39c;
  --hero-accent: #2dd4bf;
  --hero-accent-2: #5eead4;
  --hero-accent-ink: #052420;
  --hero-border: rgba(255,255,255,.10);
  --hero-card: rgba(16,26,24,.55);

  --bg: #0a0f0e;
  --bg-accent-a: #0d1413;
  --bg-accent-b: #0d1413;
  --card: rgba(16,26,24,.55);
  --ink: #f2f5f4;
  --muted: #93a39c;
  --border: rgba(255,255,255,.10);
  --accent: #2dd4bf;
  --accent-2: #5eead4;
  --accent-ink: #052420;
  --accent-soft: rgba(45,212,191,.12);
}
.landing-hero-v2 {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  background: var(--hero-bg);
  scroll-margin-top: 0;
  scroll-snap-align: start;
}
.landing-hero-v2-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 88px clamp(20px, 5vw, 56px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.hero-fade { opacity: 0; animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes hero-fade-up {
  0% { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade { animation: none; opacity: 1; }
}
.landing-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-soft);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.landing-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
  animation: landing-eyebrow-pulse 1.8s ease-in-out infinite;
}
@keyframes landing-eyebrow-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .landing-eyebrow::before { animation: none; } }
.landing-hero-v2-title {
  font-family: 'Sora', var(--font-mono), sans-serif;
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--hero-fg); margin: 0 0 20px;
}
.landing-hero-v2-title em { font-style: normal; color: var(--hero-accent); }
.landing-hero-v2-sub {
  font-family: 'Sora', var(--font-mono), sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 400;
  color: var(--hero-muted); line-height: 1.6; max-width: 46ch; margin: 0 0 32px;
}
.landing-hero-v2-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-btn-primary, .hero-btn-secondary {
  font-family: 'Sora', var(--font-mono), sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; font-size: 0.94rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 10px; cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.hero-btn-primary {
  background: var(--hero-accent); color: var(--hero-accent-ink); border: none;
  box-shadow: 0 12px 32px -14px var(--hero-accent);
}
.hero-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 14px 36px -10px var(--hero-accent); }
.hero-btn-primary:active { transform: scale(0.97); }
.hero-btn-secondary { background: rgba(255,255,255,.05); color: var(--hero-fg); border: 1.5px solid rgba(255,255,255,.16); }
.hero-btn-secondary:hover { background: rgba(255,255,255,.1); }
.hero-btn-secondary:active { transform: scale(0.97); }

/* ---------- Floating receipt cards (hero visual, cursor tilt) ---------- */
.landing-hero-v2-visual { position: relative; height: clamp(320px, 40vw, 480px); perspective: 1400px; }
.landing-tilt-rig { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.landing-receipt {
  position: absolute; width: 220px; border-radius: 16px; padding: 18px 18px 20px;
  background: linear-gradient(160deg, rgba(20,32,30,.72), rgba(10,18,17,.78));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  transform-style: preserve-3d;
  animation: landing-receipt-float 6.5s ease-in-out infinite;
  color: var(--hero-fg);
}
.landing-receipt::before {
  content: ''; position: absolute; inset: -1px; border-radius: 17px; padding: 1px;
  background: linear-gradient(160deg, var(--hero-accent), transparent 40%, transparent 70%, rgba(45,212,191,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .5;
}
.landing-receipt .lr-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 8px; margin-bottom: 12px; }
.landing-receipt .lr-merchant { font-size: .78rem; font-weight: 700; }
.landing-receipt .lr-date { font-size: .66rem; color: var(--hero-muted); margin-top: 2px; }
.landing-receipt .lr-badge {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--hero-accent); background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.3);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.landing-receipt .lr-amount { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; }
.landing-receipt .lr-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin-bottom: 6px; }
.landing-receipt .lr-line:first-of-type { width: 78%; }
.landing-receipt .lr-line:nth-of-type(2) { width: 52%; }
.landing-receipt .lr-ai { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .66rem; color: var(--hero-accent); font-weight: 600; }
.landing-receipt .lr-ai svg { width: 12px; height: 12px; flex-shrink: 0; }
.lr-1 { top: 6%; left: 4%; transform: translateZ(40px) rotate(-7deg); animation-delay: 0s; }
.lr-2 { top: 30%; right: 2%; transform: translateZ(90px) rotate(5deg); animation-delay: 1.1s; width: 200px; }
.lr-3 { bottom: 4%; left: 16%; transform: translateZ(140px) rotate(-3deg); animation-delay: 2.2s; width: 232px; }
@keyframes landing-receipt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (prefers-reduced-motion: reduce) { .landing-receipt { animation: none; } .landing-tilt-rig { transition: none; } }

.landing-section { padding-top: 44px; padding-bottom: 44px; border-top: 1px solid var(--border); scroll-margin-top: 76px; }
.landing-section-title { font-size: 1.5rem; margin-bottom: 6px; }
.landing-section-sub { margin-bottom: 24px; }
#preise .landing-section-sub { margin-bottom: 24px; }
#preise { position: relative; overflow: hidden; }
#preise > * { position: relative; z-index: 1; }

/* Kompakte Funktionsübersicht zwischen Nutzenversprechen und Tarifen: Sie erklärt
   das Produkt schnell, ohne die Preiswahl mit langen Absätzen zu überladen. */
#preise .landing-capabilities {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 26px; padding: 12px;
  border: 1px solid color-mix(in srgb, var(--hero-accent, var(--accent)) 25%, var(--hero-border, var(--border)));
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(45,212,191,.08), rgba(255,255,255,.018));
  box-shadow: 0 20px 50px -36px color-mix(in srgb, var(--accent) 70%, transparent);
}
.landing-capability {
  min-width: 0; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px;
  min-height: 70px; padding: 10px 9px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hero-border, var(--border)) 80%, transparent);
  background: rgba(7, 18, 20, .34);
  transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, background .28s ease;
}
.landing-capability:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 62%, var(--border)); background: rgba(45,212,191,.08); }
.landing-capability-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.landing-capability-icon svg { width: 31px; height: 31px; overflow: visible; }
.landing-capability strong, .landing-capability span { display: block; min-width: 0; }
.landing-capability strong { color: var(--hero-fg, var(--ink)); font-size: .76rem; line-height: 1.2; }
.landing-capability span { margin-top: 4px; color: var(--hero-muted, var(--muted)); font-size: .68rem; line-height: 1.35; }
.landing-capability-orb { fill: color-mix(in srgb, var(--accent-2) 16%, transparent); stroke: var(--accent); stroke-width: 1.2; animation: landing-capability-pulse 2.8s ease-in-out infinite; }
.landing-capability-rays { stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; opacity: .72; }
.landing-capability-star { fill: var(--accent-2); stroke: var(--accent-ink); stroke-width: .7; transform-origin: 20px 20px; animation: landing-capability-spin 7s linear infinite; }
.landing-capability-gauge { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.landing-capability-needle { stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round; transform-origin: 20px 27px; animation: landing-capability-needle 2.8s ease-in-out infinite; }
.landing-capability-center { fill: var(--accent-2); }
.landing-capability-base { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.landing-capability-route { stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 3; animation: landing-capability-route 4s linear infinite; }
.landing-capability-stop { fill: var(--accent-2); }
.landing-capability-transit { stroke: var(--accent-2); stroke-width: 1.4; stroke-linecap: round; }
.landing-capability-doc { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1.4; }
.landing-capability-checks { stroke: var(--accent-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.landing-capability-tab { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.2; stroke-linecap: round; }
@keyframes landing-capability-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes landing-capability-spin { to { transform: rotate(360deg); } }
@keyframes landing-capability-needle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes landing-capability-route { to { stroke-dashoffset: -28; } }
@media (max-width: 860px) {
  #preise .landing-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  #preise .landing-capabilities { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .landing-capability { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-capability-orb, .landing-capability-star, .landing-capability-needle, .landing-capability-route { animation: none; }
}

/* Growth-chart accent: draws itself in (like a rising Rückerstattung curve) once
   the Preise section scrolls into view, instead of sitting there as a static image. */
.preise-growth-chart {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: -4%; width: min(560px, 72%); height: 44%; margin: 0 auto;
  pointer-events: none; overflow: visible;
}
.preise-growth-chart polyline {
  fill: none; stroke: var(--hero-accent, #2dd4bf); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  opacity: .55;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) .1s;
}
.preise-growth-chart.is-visible polyline { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .preise-growth-chart polyline { transition: none; stroke-dashoffset: 0; }
}
@media (max-width: 720px) {
  .preise-growth-chart { width: 94%; height: 34%; bottom: -2%; }
}

.landing-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.landing-step { padding: 4px 2px; }
.landing-step-num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.9rem;
  margin-bottom: 10px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.landing-step:hover .landing-step-num { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); }
.landing-step h3 { font-size: 1rem; margin-bottom: 4px; transition: color 0.2s ease; }
.landing-step:hover h3 { color: var(--accent-2); }

/* Visuelle Schrittstrecke: kleine SVG-Motive erklären den Ablauf schneller als
   zusätzliche Textblöcke. Die Motive bleiben bewusst leicht und ruhig, damit die
   Seite nicht wie ein Spielzeug wirkt. */
#so-funktionierts .landing-section-sub { max-width: 54ch; margin: 0; color: var(--hero-muted, var(--muted)); }
#so-funktionierts .landing-steps { position: relative; gap: 14px; margin-top: 26px; }
#so-funktionierts .landing-steps::before {
  content: ''; position: absolute; top: 118px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hero-accent, var(--accent)) 15%, var(--hero-accent, var(--accent)) 85%, transparent);
  opacity: .38; pointer-events: none;
}
#so-funktionierts .landing-step {
  position: relative; z-index: 1; min-width: 0; padding: 0 14px 16px;
  border: 1px solid var(--hero-border, var(--border)); border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease, box-shadow .28s ease;
}
#so-funktionierts .landing-step:hover { transform: translateY(-7px); border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 65%, var(--hero-border, var(--border))); box-shadow: 0 22px 42px -28px color-mix(in srgb, var(--hero-accent, var(--accent)) 70%, transparent); }
.landing-step-visual { display: grid; place-items: center; height: 112px; margin: 0 -2px 4px; overflow: visible; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.landing-step-visual svg { width: 126px; height: 100px; overflow: visible; }
.landing-step:hover .landing-step-visual { transform: translateY(-3px) scale(1.04); }
#so-funktionierts .landing-step-num { margin: 0 0 10px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent); }
#so-funktionierts .landing-step h3 { margin-bottom: 6px; }
#so-funktionierts .landing-step p { margin: 0; font-size: .82rem; line-height: 1.5; }
.landing-step-phone, .landing-step-doc { fill: color-mix(in srgb, var(--hero-accent, var(--accent)) 8%, transparent); stroke: var(--hero-accent, var(--accent)); stroke-width: 1.7; }
.landing-step-lines, .landing-step-doc-lines { stroke: var(--hero-muted, var(--muted)); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.landing-step-check, .landing-step-doc-check { stroke: var(--hero-accent-2, var(--accent-2)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.landing-step-camera { fill: var(--hero-accent, var(--accent)); opacity: .9; animation: landing-step-pulse 2.2s ease-in-out infinite; }
.landing-step-camera-line { stroke: var(--hero-accent-ink, var(--accent-ink)); stroke-width: 1.8; stroke-linecap: round; }
.landing-step-ai-orb { fill: color-mix(in srgb, var(--hero-accent, var(--accent)) 14%, transparent); stroke: var(--hero-accent, var(--accent)); stroke-width: 1.5; animation: landing-step-orb 3.5s ease-in-out infinite; }
.landing-step-ai-rays, .landing-step-ai-link { stroke: var(--hero-accent, var(--accent)); stroke-width: 1.5; stroke-linecap: round; opacity: .65; }
.landing-step-ai-star { fill: var(--hero-accent-2, var(--accent-2)); stroke: var(--hero-accent-ink, var(--accent-ink)); stroke-width: 1; transform-origin: 60px 47px; animation: landing-step-spin 7s linear infinite; }
.landing-step-ai-dot { fill: var(--hero-accent-2, var(--accent-2)); animation: landing-step-pulse 2.6s ease-in-out infinite; }
.landing-step-gauge-track, .landing-step-gauge-fill { fill: none; stroke-linecap: round; stroke-width: 7; }
.landing-step-gauge-track { stroke: color-mix(in srgb, var(--hero-border, var(--border)) 90%, transparent); }
.landing-step-gauge-fill { stroke: var(--hero-accent, var(--accent)); stroke-dasharray: 116; stroke-dashoffset: 116; animation: landing-step-gauge 1.2s cubic-bezier(.16,1,.3,1) .25s forwards; }
.landing-step-gauge-needle { stroke: var(--hero-accent-2, var(--accent-2)); stroke-width: 2; stroke-linecap: round; transform-origin: 60px 67px; animation: landing-step-needle 2.8s ease-in-out infinite; }
.landing-step-gauge-center { fill: var(--hero-accent-2, var(--accent-2)); }
.landing-step-gauge-base { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.landing-step-gauge-text { fill: var(--hero-fg, var(--ink)); font-size: 11px; font-weight: 800; }
.landing-step-doc-badge { fill: var(--hero-accent, var(--accent)); animation: landing-step-badge 2.6s ease-in-out infinite; }
.landing-step-doc-check { stroke: var(--hero-accent-ink, var(--accent-ink)); stroke-width: 2.5; }
@keyframes landing-step-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes landing-step-orb { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes landing-step-spin { to { transform: rotate(360deg); } }
@keyframes landing-step-gauge { to { stroke-dashoffset: 0; } }
@keyframes landing-step-needle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes landing-step-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .landing-step-camera, .landing-step-ai-orb, .landing-step-ai-star, .landing-step-ai-dot, .landing-step-gauge-fill, .landing-step-gauge-needle, .landing-step-doc-badge { animation: none; }
  .landing-step-gauge-fill { stroke-dashoffset: 0; }
  #so-funktionierts .landing-step:hover, .landing-step:hover .landing-step-visual { transform: none; }
}
@media (max-width: 720px) {
  #so-funktionierts .landing-steps::before { display: none; }
  #so-funktionierts .landing-step { padding: 0 14px 14px; }
  #so-funktionierts .landing-step-visual { height: 96px; }
  #so-funktionierts .landing-step-visual svg { width: 116px; height: 92px; }
}

.landing-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.landing-feature-card { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease; }
.landing-feature-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55), 0 0 50px -8px rgba(45,212,191,.55); border-color: var(--accent); }
.landing-feature-card h3 { font-size: 1rem; transition: color 0.18s ease; }
.landing-feature-card:hover h3 { color: var(--accent-2); }

/* Vorteile als visuelle Karten: jedes Versprechen bekommt ein eigenes, leicht
   animiertes Motiv. Die Karten bleiben informativ, ohne zu einem Textblock zu
   werden, und nutzen dieselben Spotlight-Effekte wie die übrige Landingpage. */
#vorteile .landing-cards-grid { gap: 18px; margin-top: 24px; }
#vorteile .landing-feature-card {
  min-height: 246px; padding: 0 20px 18px; overflow: hidden;
  display: grid; grid-template-rows: 108px 1fr auto; gap: 0;
  border-color: color-mix(in srgb, var(--hero-border, var(--border)) 88%, var(--accent));
  background:
    radial-gradient(180px 100px at 88% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}
#vorteile .landing-feature-visual { position: relative; z-index: 2; display: grid; place-items: center; height: 108px; margin: 0 -20px; padding: 8px 18px 0; overflow: visible; }
#vorteile .landing-feature-visual svg { width: min(100%, 150px); height: 100px; overflow: visible; }
#vorteile .landing-feature-copy { position: relative; z-index: 2; padding-top: 6px; }
#vorteile .landing-feature-card h3 { margin: 0 0 7px; font-size: 1.02rem; letter-spacing: -.01em; }
#vorteile .landing-feature-card p { max-width: 38ch; margin: 0; font-size: .82rem; line-height: 1.52; }
#vorteile .landing-feature-line { display: block; width: 42px; height: 2px; margin-top: 15px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left center; transition: width .35s cubic-bezier(.16,1,.3,1); }
#vorteile .landing-feature-card:hover .landing-feature-line { width: 100%; }
#vorteile .landing-feature-card:hover .landing-feature-visual { transform: translateY(-3px) scale(1.04); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#vorteile .landing-feature-card:not(:hover) .landing-feature-visual { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.landing-feature-calendar { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1.6; }
.landing-feature-calendar-lines, .landing-feature-form-lines { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.8; stroke-linecap: round; }
.landing-feature-calendar-dots { stroke: var(--hero-muted, var(--muted)); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 8; }
.landing-feature-calendar-check { stroke: var(--accent-2); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: landing-feature-draw .9s cubic-bezier(.16,1,.3,1) .2s forwards; }
.landing-feature-spark-ring { fill: color-mix(in srgb, var(--accent-2) 16%, transparent); stroke: var(--accent-2); stroke-width: 1.4; animation: landing-feature-pulse 2.7s ease-in-out infinite; }
.landing-feature-spark { stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; }
.landing-feature-coin { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 1.7; animation: landing-feature-float 3.2s ease-in-out infinite; }
.landing-feature-coin-inner { fill: none; stroke: var(--accent-2); stroke-width: 1.2; opacity: .8; }
.landing-feature-euro { fill: var(--accent-2); font-size: 20px; font-weight: 800; }
.landing-feature-price-lines { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.8; stroke-linecap: round; opacity: .72; }
.landing-feature-price-accent { stroke: var(--accent-2); stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 19; stroke-dashoffset: 19; animation: landing-feature-draw .8s cubic-bezier(.16,1,.3,1) .35s forwards; }
.landing-feature-price-dot { fill: var(--accent-2); animation: landing-feature-pulse 2.5s ease-in-out infinite .3s; }
.landing-feature-scan-card, .landing-feature-form { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: var(--accent); stroke-width: 1.6; }
.landing-feature-scan-corners { stroke: var(--accent-2); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.landing-feature-ai-orb { fill: color-mix(in srgb, var(--accent-2) 17%, transparent); stroke: var(--accent-2); stroke-width: 1.4; animation: landing-feature-pulse 2.8s ease-in-out infinite; }
.landing-feature-ai-rays { stroke: var(--accent-ink); stroke-width: 1.2; stroke-linecap: round; opacity: .86; }
.landing-feature-ai-dot { fill: var(--accent-2); animation: landing-feature-float 2.5s ease-in-out infinite; }
.landing-feature-ai-link { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 4 4; animation: landing-feature-dash 3s linear infinite; }
.landing-feature-form-lines { opacity: .78; }
.landing-feature-chart-bars { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 27 27; stroke-dashoffset: 27; animation: landing-feature-chart 1.2s cubic-bezier(.16,1,.3,1) .2s forwards; }
.landing-feature-chart-base { stroke: var(--hero-muted, var(--muted)); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.landing-feature-chart-line { stroke: var(--accent-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28; stroke-dashoffset: 28; animation: landing-feature-draw .9s cubic-bezier(.16,1,.3,1) .45s forwards; }
@keyframes landing-feature-draw { to { stroke-dashoffset: 0; } }
@keyframes landing-feature-chart { to { stroke-dashoffset: 0; } }
@keyframes landing-feature-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes landing-feature-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes landing-feature-dash { to { stroke-dashoffset: -16; } }
@media (max-width: 720px) {
  #vorteile .landing-feature-card { min-height: 224px; grid-template-rows: 96px 1fr auto; padding: 0 16px 16px; }
  #vorteile .landing-feature-visual { height: 96px; margin: 0 -16px; }
  #vorteile .landing-feature-visual svg { height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-feature-calendar-check, .landing-feature-spark-ring, .landing-feature-coin,
  .landing-feature-price-accent, .landing-feature-price-dot, .landing-feature-ai-orb,
  .landing-feature-ai-dot, .landing-feature-ai-link, .landing-feature-chart-bars,
  .landing-feature-chart-line { animation: none; stroke-dashoffset: 0; }
  #vorteile .landing-feature-card:hover .landing-feature-visual { transform: none; }
}

.landing-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); align-items: stretch; gap: 28px; margin-top: 22px; }
.landing-plan-card {
  position: relative; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  display: flex; flex-direction: column;
  /* Immer 40px oben reservieren, egal ob die Karte ein Badge hat - sonst starten
     Tagline/Name/Preis in unterschiedlichen Karten auf unterschiedlicher Hoehe. */
  padding-top: 40px;
}
.landing-plan-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55), 0 0 50px -8px rgba(45,212,191,.5); }

/* Pure-CSS safety net, no JS involved: works on literally any device, including
   touch (tap = :active) and any browser where the pointermove-driven effects above
   might not run for some reason. */
#landing-page .landing-feature-card, #landing-page .landing-plan-card { cursor: pointer; }
#landing-page .landing-feature-card:active, #landing-page .landing-plan-card:active {
  transform: scale(1.03) !important;
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .55), 0 0 40px -6px rgba(45,212,191,.6) !important;
  border-color: var(--accent) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.landing-plan-card.featured { border-color: var(--accent); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent-soft); animation: landing-plan-glow 3.2s ease-in-out infinite; }
.landing-plan-card.featured:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -18px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent); animation-play-state: paused; }
@keyframes landing-plan-glow {
  0%, 100% { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent-soft); }
  50% { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.35), 0 0 20px 2px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) { .landing-plan-card.featured { animation: none; } }

/* ---------- Spotlight "torch hole" + 3D tilt (landing step numbers, feature cards, plan cards) ----------
   Position tracked via --mx/--my custom properties set by JS on pointermove; rotateX/rotateY
   applied directly as inline transform by the same JS for a real tilt-toward-cursor feel.
   Fine-pointer only; see the (hover:none) and reduced-motion overrides below. */
.landing-cards-grid, .landing-plans-grid { perspective: 1200px; }
#landing-page .landing-step-num,
#landing-page .landing-feature-card,
#landing-page .landing-plan-card {
  --mx: 50%; --my: 50%; --spot-o: 0;
  position: relative; transform-style: preserve-3d;
}
#landing-page .landing-feature-card > *,
#landing-page .landing-plan-card > * { position: relative; z-index: 2; }

/* The "hole punched by light": a soft bright glow filling the card interior, following the cursor. */
#landing-page .landing-feature-card::before,
#landing-page .landing-plan-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(94,234,212,.45), rgba(45,212,191,.12) 45%, transparent 72%);
  opacity: var(--spot-o); transition: opacity .3s ease;
}
/* A crisp glowing ring right at the edge of that hole, for definition. */
#landing-page .landing-step-num::after,
#landing-page .landing-feature-card::after,
#landing-page .landing-plan-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  padding: 1.5px;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(148,255,234,1), rgba(45,212,191,.4) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--spot-o); transition: opacity .3s ease;
}

/* ---------- Magnetic buttons (pull a few px toward the cursor) ---------- */
#landing-page button:not(.secondary):not(.danger):not(.link),
#landing-page .hero-btn-primary,
#landing-page .hero-btn-secondary {
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  #landing-page .landing-step-num::after,
  #landing-page .landing-feature-card::after,
  #landing-page .landing-plan-card::after { display: none; }

  /* Touch has no cursor to hover with, so tapping a card triggers the same
     glow + lift as a brief, self-resetting pulse instead. */
  #landing-page .landing-feature-card.tap-glow,
  #landing-page .landing-plan-card.tap-glow {
    animation: landing-tap-glow .6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #landing-page .landing-step-num.tap-glow {
    animation: landing-tap-glow-num .6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes landing-tap-glow {
    0% { transform: none; box-shadow: none; border-color: var(--border); }
    35% { transform: scale(1.03); box-shadow: 0 24px 46px -18px rgba(0,0,0,.55), 0 0 40px -6px rgba(45,212,191,.6); border-color: var(--accent); }
    100% { transform: none; box-shadow: none; border-color: var(--border); }
  }
  @keyframes landing-tap-glow-num {
    0% { transform: scale(1); box-shadow: none; }
    35% { transform: scale(1.15); box-shadow: 0 0 0 8px var(--accent-soft); }
    100% { transform: scale(1); box-shadow: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #landing-page .landing-feature-card.tap-glow,
  #landing-page .landing-plan-card.tap-glow,
  #landing-page .landing-step-num.tap-glow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  #landing-page .landing-step-num::after,
  #landing-page .landing-feature-card::after,
  #landing-page .landing-plan-card::after { display: none; }
}
/* #landing-page-Praefix noetig, um gegen "#landing-page .landing-plan-card > * { position:
   relative }" (Hover-Glow-System) zu gewinnen - sonst faellt das Badge zurueck in den
   Text-Fluss statt ueber der Karte zu schweben, siehe [[feedback-css-specificity]]-Lektion. */
#landing-page .landing-plan-badge {
  position: absolute; top: -11px; right: 16px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; z-index: 3;
}
/* "Sehr beliebt" (Jahreszugang) hebt sich sichtbar staerker ab als das normale "Beliebt"
   (Premium Flex) - Farbverlauf statt Flaechenfarbe, minimal groesser. */
.landing-plan-badge-top {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-size: 0.72rem; padding: 4px 12px;
  box-shadow: 0 4px 14px -4px rgba(45,212,191,.6);
}
.landing-plan-tagline {
  font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.landing-plan-card h3 { margin: 6px 0 0; }
/* Fester Block fuer Preis + Sub-Zeile, auch wenn eine Karte keine Sub-Zeile hat (siehe
   "&nbsp;"-Platzhalter im Template) - damit der Button in jeder Karte auf gleicher Hoehe sitzt. */
.landing-plan-price-block { min-height: 78px; margin: 8px 0 0; }
.landing-plan-price { font-size: 1.3rem; font-weight: 800; color: var(--accent-2); margin: 0 0 4px; }
.landing-plan-price-sub {
  font-size: 0.76rem; color: var(--hero-muted, var(--muted)); min-height: 1.2em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 5px;
}
.landing-plan-price-strike { font-size: 0.85rem; font-weight: 600; color: var(--hero-muted, var(--muted)); text-decoration: line-through; opacity: 0.75; }
.landing-plan-price-new { font-size: 0.8rem; font-weight: 700; color: var(--hero-muted, var(--muted)); }
/* Schiefes "Sticker"-Badge oben links, direktes Kind von .landing-plan-card (nicht in der
   Preis-Zeile verschachtelt), damit es relativ zur GANZEN Karte positioniert wird und ueber
   den Rand hinausragen kann. #landing-page-Praefix noetig, sonst gewinnt
   "#landing-page .landing-plan-card > * { position: relative }" (Hover-Glow-System) und wirft
   die absolute Positionierung zurueck in den Textfluss - siehe [[feedback-css-specificity]],
   selbe Lektion wie beim .landing-plan-badge-Fix oben. */
#landing-page .landing-plan-offer-chip {
  position: absolute; top: -10px; left: -12px; transform: rotate(-9deg); z-index: 4;
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 4px 11px; border-radius: 6px; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  box-shadow: 0 5px 12px -3px rgba(0, 0, 0, 0.45);
}
.landing-plan-cta {
  width: 100%; margin-top: 10px; padding: 10px 16px; border-radius: 10px; border: none;
  background: var(--hero-accent, var(--accent)); color: var(--hero-accent-ink, var(--accent-ink));
  font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.landing-plan-cta:hover { filter: brightness(1.08); }
.landing-plan-cta:active { transform: scale(0.97); }
.landing-plan-cta-note {
  text-align: center; font-size: 0.72rem; color: var(--hero-muted, var(--muted)); margin: 6px 0 0; min-height: 1.4em;
}
.landing-plan-divider { border: none; border-top: 1px solid var(--hero-border, var(--border)); margin: 16px 0 12px; }
.landing-plan-includes { font-size: 0.8rem; font-weight: 700; color: var(--hero-fg, var(--ink)); margin: 0 0 10px; }
.landing-plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.landing-credits-row {
  margin: 22px auto 0; max-width: 720px; text-align: center; padding: 16px 20px; border-radius: 14px;
  background: var(--hero-card, var(--card)); border: 1px solid var(--hero-border, var(--border));
}
.landing-credits-intro { margin: 0 0 10px; font-size: 0.88rem; color: var(--hero-muted, var(--muted)); }
.landing-credits-packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.landing-credits-pack { font-size: 0.86rem; color: var(--hero-fg, var(--ink)); }
.landing-credits-pack strong { color: var(--hero-accent, var(--accent)); }
.landing-plan-features li { font-size: 0.85rem; color: var(--muted); padding-left: 20px; position: relative; }
.landing-plan-features li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

.landing-about-card p { margin: 0; }

/* Über uns als kompakte Markenstory: eine klare Aussage links, ein ruhiges
   Produktmotiv rechts und drei konkrete Gründe statt eines langen Absatzes. */
#ueber-uns .landing-about-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr); gap: 28px;
  min-height: 350px; padding: 28px 30px; overflow: hidden;
  border-color: color-mix(in srgb, var(--hero-accent, var(--accent)) 34%, var(--hero-border, var(--border)));
  background:
    radial-gradient(420px 280px at 84% 48%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}
#ueber-uns .landing-about-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 55%, rgba(45,212,191,.06) 70%, transparent 88%); pointer-events: none; }
.landing-about-copy, .landing-about-visual { position: relative; z-index: 1; }
.landing-about-copy { align-self: center; max-width: 620px; }
.landing-about-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.landing-about-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 999px; background: var(--accent); }
#ueber-uns .landing-about-card h3 { max-width: 13ch; margin: 10px 0 12px; color: var(--hero-fg, var(--ink)); font-size: clamp(1.55rem, 2.3vw, 2.2rem); line-height: 1.05; letter-spacing: -.035em; }
#ueber-uns .landing-about-card p { max-width: 58ch; color: var(--hero-muted, var(--muted)); font-size: .9rem; line-height: 1.65; }
.landing-about-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.landing-about-point { min-width: 0; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); }
.landing-about-point-mark { display: block; margin-bottom: 7px; color: var(--accent); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.landing-about-point strong, .landing-about-point span { display: block; }
.landing-about-point strong { color: var(--hero-fg, var(--ink)); font-size: .76rem; line-height: 1.25; }
.landing-about-point div span { margin-top: 4px; color: var(--hero-muted, var(--muted)); font-size: .7rem; line-height: 1.4; }
.landing-about-visual { display: grid; place-items: center; min-height: 290px; perspective: 700px; }
.landing-about-visual svg { width: min(100%, 330px); height: auto; overflow: visible; filter: drop-shadow(0 24px 28px rgba(0,0,0,.22)); transform: rotate(2deg); transition: transform .45s cubic-bezier(.16,1,.3,1); }
#ueber-uns .landing-about-card:hover .landing-about-visual svg { transform: rotate(-2deg) scale(1.035); }
.landing-about-orbit { fill: none; stroke: var(--accent); stroke-linecap: round; }
.landing-about-orbit-outer { stroke-width: 1; stroke-dasharray: 3 10; opacity: .3; animation: landing-about-orbit 18s linear infinite; transform-origin: 150px 130px; }
.landing-about-orbit-inner { stroke-width: 1.3; stroke-dasharray: 1 8; opacity: .5; animation: landing-about-orbit-reverse 13s linear infinite; transform-origin: 150px 130px; }
.landing-about-crosshair { stroke: var(--accent-2); stroke-width: 1; stroke-linecap: round; opacity: .4; }
.landing-about-receipt { fill: color-mix(in srgb, var(--accent) 10%, var(--card)); stroke: var(--accent); stroke-width: 1.5; transform-origin: 150px 132px; animation: landing-about-card-float 4.5s ease-in-out infinite; }
.landing-about-receipt-lines { stroke: var(--hero-muted, var(--muted)); stroke-width: 2; stroke-linecap: round; opacity: .62; }
.landing-about-receipt-check { stroke: var(--accent-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.landing-about-node { stroke: var(--accent); stroke-width: 1.4; }
.landing-about-node-ai { fill: color-mix(in srgb, var(--accent-2) 20%, transparent); animation: landing-about-node-pulse 2.8s ease-in-out infinite; }
.landing-about-node-tax { fill: color-mix(in srgb, var(--accent) 20%, transparent); animation: landing-about-node-pulse 2.8s ease-in-out infinite .8s; }
.landing-about-node-check { fill: var(--accent-2); animation: landing-about-node-pulse 2.8s ease-in-out infinite 1.4s; }
.landing-about-node-mark, .landing-about-check { stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.landing-about-float { position: absolute; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 10px; color: var(--accent-2); background: rgba(5, 15, 17, .78); box-shadow: 0 10px 22px rgba(0,0,0,.22); font-size: .65rem; font-weight: 800; }
.landing-about-float-ai { top: 19%; right: 10%; animation: landing-about-label-float 3.3s ease-in-out infinite; }
.landing-about-float-tax { bottom: 17%; left: 8%; animation: landing-about-label-float 3.8s ease-in-out infinite .5s; }
.landing-about-float-check { right: 20%; bottom: 10%; color: var(--accent-ink); background: var(--accent-2); animation: landing-about-label-float 3.5s ease-in-out infinite 1s; }
@keyframes landing-about-orbit { to { transform: rotate(360deg); } }
@keyframes landing-about-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes landing-about-card-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes landing-about-node-pulse { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes landing-about-label-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 720px) {
  #ueber-uns .landing-about-card { grid-template-columns: 1fr; gap: 8px; padding: 24px 20px 20px; }
  .landing-about-visual { min-height: 238px; order: -1; }
  .landing-about-points { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .landing-about-point { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding-top: 10px; }
  .landing-about-point-mark { margin: 1px 0 0; }
  .landing-about-point div span { max-width: 42ch; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-about-orbit-outer, .landing-about-orbit-inner, .landing-about-receipt,
  .landing-about-node-ai, .landing-about-node-tax, .landing-about-node-check,
  .landing-about-float-ai, .landing-about-float-tax, .landing-about-float-check { animation: none; }
  #ueber-uns .landing-about-card:hover .landing-about-visual svg { transform: none; }
}

.landing-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.landing-faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; transition: border-color 0.2s ease; }
.landing-faq-item:hover, .landing-faq-item.open { border-color: var(--accent); }
.landing-faq-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 18px; }
.landing-faq-search { position: relative; display: flex; align-items: center; min-width: 0; }
.landing-faq-search > svg { position: absolute; left: 14px; width: 17px; height: 17px; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.landing-faq-search input { width: 100%; min-height: 44px; padding: 11px 14px 11px 42px; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.035); color: var(--ink); font: inherit; font-size: .84rem; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.landing-faq-search input::placeholder { color: var(--muted); }
.landing-faq-search input:focus { border-color: var(--accent); background: rgba(45,212,191,.06); box-shadow: 0 0 0 3px var(--accent-soft); }
.landing-faq-filters { display: flex; align-items: center; gap: 6px; }
.landing-faq-filter { min-height: 38px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); box-shadow: none; font-size: .7rem; font-weight: 700; white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.landing-faq-filter:hover:not(:disabled), .landing-faq-filter.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); box-shadow: none; transform: none; }
.landing-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; color: var(--ink); box-shadow: none; border: none; border-radius: 0;
  padding: 14px 16px; font-weight: 700; font-size: 0.92rem; text-align: left;
}
.landing-faq-q:hover:not(:disabled) { background: var(--accent-soft); filter: none; box-shadow: none; transform: none; }
.landing-faq-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.landing-faq-item.open .landing-faq-chevron { transform: rotate(180deg); }
.landing-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.landing-faq-a p { min-height: 0; overflow: hidden; margin: 0; padding: 0 16px; }
.landing-faq-item.open .landing-faq-a { grid-template-rows: 1fr; }
.landing-faq-item.open .landing-faq-a p { padding: 0 16px 16px; }
.landing-faq-a { display: grid; }
.landing-faq-empty { margin: 18px 0 0; padding: 18px; border: 1px dashed var(--border); border-radius: 13px; text-align: center; font-size: .82rem; }
.landing-faq-more { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin: 18px auto 0; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-2); box-shadow: none; font-size: .78rem; font-weight: 800; }
.landing-faq-more:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); box-shadow: 0 10px 24px -18px var(--accent); transform: translateY(-2px); }
.landing-faq-more svg { transition: transform .2s ease; }
.landing-faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 860px) {
  .landing-faq-tools { grid-template-columns: 1fr; }
  .landing-faq-filters { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .landing-faq-filters::-webkit-scrollbar { display: none; }
}
@media (max-width: 520px) {
  .landing-faq-filter { min-height: 36px; padding: 8px 10px; }
}

.landing-final-cta {
  position: relative; overflow: hidden;
  margin-top: 20px; margin-bottom: 8px; padding-top: 48px; padding-bottom: 48px; text-align: center; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-accent-b)); border: 1px solid var(--border);
}
.landing-final-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 60%);
  animation: landing-final-cta-pulse 4s ease-in-out infinite;
}
@keyframes landing-final-cta-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .landing-final-cta::before { animation: none; } }
.landing-final-cta h2 { position: relative; font-size: 1.5rem; margin-bottom: 18px; }
.landing-final-cta button { position: relative; padding: 14px 28px; font-size: 1rem; }

.landing-footer { border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: 36px; margin-top: 20px; background: var(--bg-accent-a); }
.landing-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.landing-footer-brand .landing-brand-name { font-size: 1.15rem; }
.landing-footer-brand p { font-size: 0.85rem; margin-top: 12px; max-width: 34ch; }
.landing-footer-col h3 { font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 12px; }
.landing-footer-col a { display: block; color: var(--ink); font-weight: 500; font-size: 0.9rem; text-decoration: none; margin-bottom: 10px; }
.landing-footer-col a:hover { color: var(--accent); }
.landing-footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.landing-footer-brand .brand-logo-sm { width: 34px; height: 34px; }

/* ---- Login/Registrieren als Modal (statt Inhalt auf der Startseite) ---- */
#auth-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow-y: auto;
  background: rgba(9, 9, 11, 0.55); backdrop-filter: blur(2px);
}
:root[data-theme="dark"] #auth-screen { background: rgba(0, 0, 0, 0.72); }
.auth-modal-dialog {
  position: relative; width: 100%; max-width: 500px; margin: auto 0;
  background: var(--bg); border-radius: var(--radius); padding: 30px 26px 26px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
  animation: authModalIn 0.22s ease;
}
@keyframes authModalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-modal-dialog { animation: none; }
}
.auth-modal-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--ink); border: none; box-shadow: none;
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0;
}
.auth-modal-close:hover { background: var(--border); filter: none; box-shadow: none; transform: none; }
@media (max-width: 560px) {
  #auth-screen { padding: 0; align-items: stretch; }
  .auth-modal-dialog { max-width: none; min-height: 100%; border-radius: 0; margin: 0; }
}

@media (max-width: 860px) {
  .landing-steps { grid-template-columns: repeat(2, 1fr); }
  .landing-cards-grid { grid-template-columns: 1fr; }
  .landing-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .landing-header-inner, .landing-section, .landing-final-cta,
  .landing-footer-grid, .landing-footer-bottom { padding-left: 18px; padding-right: 18px; }
  .landing-nav { display: none; }
  .landing-header-login-btn { display: none; }
  .landing-header-register-btn { display: none; }
  .landing-header-actions .lang-select { display: none; }
  .landing-header-actions { gap: 8px; }
  .landing-hamburger { display: flex; flex-shrink: 0; }
  .landing-mobile-menu {
    display: flex; flex-direction: column; gap: 2px; padding: 6px 18px 18px; border-top: 1px solid var(--border);
  }
  .landing-mobile-menu.hidden { display: none; }
  .landing-mobile-menu a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 10px 4px; border-radius: 8px; }
  .landing-mobile-menu a:hover { background: var(--accent-soft); }
  .landing-mobile-menu-langs { padding: 10px 4px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
  .landing-mobile-lang-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .lang-chip {
    padding: 6px 12px; font-size: 0.78rem; font-weight: 700; background: var(--card); color: var(--ink);
    border: 1.5px solid var(--border); box-shadow: none;
  }
  .lang-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .lang-chip:disabled { opacity: 0.5; cursor: not-allowed; }
  .landing-mobile-menu-actions { display: flex; gap: 10px; margin-top: 14px; }
  .landing-mobile-menu-actions button { flex: 1; }
}
@media (max-width: 720px) {
  .landing-steps { grid-template-columns: 1fr; }
  .landing-footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- BelegHeld Landing: cinematic Hero-Inszenierung ----------
   Die bestehende Landing-Markup-Struktur bleibt unverändert. Die beiden Motive liegen
   als lokale Assets im Projekt und werden nur im vorhandenen Hero-Visual komponiert. */
/* ---------- Ledger-grid + soft glow backdrop: ties the flat dark bg to the
   receipts/tax/finance theme instead of plain teal-on-charcoal ---------- */
#landing-page {
  background:
    radial-gradient(circle at 12% 15%, rgba(45,212,191,.07), transparent 38%),
    radial-gradient(circle at 88% 62%, rgba(94,234,212,.05), transparent 42%),
    radial-gradient(circle at 50% 92%, rgba(45,212,191,.05), transparent 40%),
    linear-gradient(rgba(45,212,191,.05) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(90deg, rgba(45,212,191,.05) 1px, transparent 1px) 0 0 / 58px 58px,
    var(--bg);
}
#landing-page .landing-header { background: rgba(10, 15, 14, .78); border-bottom-color: rgba(255,255,255,.08); }
#landing-page .landing-header.is-scrolled { background: rgba(10, 15, 14, .94); }
#landing-page .landing-brand, #landing-page .landing-nav a { color: #f4f8ff; }
#landing-page .landing-brand { transition: opacity 0.15s ease, transform 0.15s ease; }
#landing-page .landing-brand:hover { opacity: 0.85; }
#landing-page .landing-brand .brand-logo-sm { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
#landing-page .landing-brand:hover .brand-logo-sm { transform: rotate(-6deg) scale(1.06); }
#landing-page .landing-nav a::after { background: var(--hero-accent); }
#landing-page .landing-nav a:hover { color: var(--hero-accent-2); }
#landing-page .landing-header-login-btn { color: #f4f8ff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
#landing-page .landing-header-login-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
#landing-page .landing-header-register-btn { background: linear-gradient(135deg, var(--hero-accent), var(--hero-accent-2)); color: var(--hero-accent-ink); }
#landing-page .landing-header-register-btn:hover:not(:disabled) {
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(94,234,212,.35), 0 6px 26px -6px rgba(45,212,191,.55);
}
/* Two soft, slowly drifting glow orbs behind the whole landing page - stay fixed in the
   viewport (so they read as ambient atmosphere, not tied to one section) and breathe
   gently, giving the flat dark backdrop some quiet life without being distracting. */
#landing-page::before, #landing-page::after {
  content: ''; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(70px);
}
#landing-page::before {
  top: 10%; left: 6%; width: 380px; height: 380px;
  background: rgba(45,212,191,.08);
  animation: landing-orb-drift-a 20s ease-in-out infinite;
}
#landing-page::after {
  bottom: 8%; right: 8%; width: 340px; height: 340px;
  background: rgba(94,234,212,.07);
  animation: landing-orb-drift-b 24s ease-in-out infinite;
}
@keyframes landing-orb-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .65; }
  50% { transform: translate(36px, 44px) scale(1.18); opacity: 1; }
}
@keyframes landing-orb-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .55; }
  50% { transform: translate(-30px, -38px) scale(1.12); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  #landing-page::before, #landing-page::after { animation: none; }
}

/* Pendler-Aktionen: beide Hauptbuttons bewusst gleich groß und typografisch konsistent. */
@media (min-width: 721px) {
  .pendler-actions > button[type="submit"],
  .pendler-actions > #pendler-periods-list {
    flex: 1 1 0;
    min-width: 190px;
  }
}

.pendler-actions > #pendler-periods-list .pendler-periods-trigger {
  width: 100%;
  min-height: 0;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: inherit;
  font-weight: 700;
}

#landing-page .landing-hero-v2 {
  background:
    radial-gradient(circle at 78% 22%, rgba(45,212,191,.14), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(45,212,191,.08), transparent 40%),
    linear-gradient(rgba(45,212,191,.05) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(90deg, rgba(45,212,191,.05) 1px, transparent 1px) 0 0 / 58px 58px,
    var(--hero-bg);
}
#landing-page .landing-section { max-width: 1180px; }
@media (max-width: 980px) {
  .landing-hero-v2-inner { grid-template-columns: 1fr; text-align: left; padding-top: 96px; padding-bottom: 40px; }
  .landing-hero-v2-visual { height: 300px; order: -1; margin-bottom: 4px; }
}
@media (max-width: 560px) {
  .landing-hero-v2-title { font-size: 2rem; }
  .landing-receipt { width: 178px !important; padding: 14px 14px 16px; }
  .lr-3 { display: none; }
}

/* iOS Safari zoomt Eingaben automatisch heran, wenn die berechnete Schrift kleiner
   als 16px ist. Die logische Feldgröße bleibt deshalb mobil bei mindestens 16px;
   so bleibt die App beim Tippen im ursprünglichen Layout und Nutzer können weiterhin
   mit der normalen Zwei-Finger-Geste zoomen. */
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px !important; }
  input::placeholder, textarea::placeholder { font-size: 16px; }
  /* Das Steuerjahr bleibt ein gut bedienbarer Header-Button, die Zahl selbst soll aber
     nicht größer wirken als Credits- und Profil-Button. */
  .mobile-year-select,
  .main-topbar-right select { font-size: .78rem !important; }
}

/* ---------- Desktop: Sidebar/Tab-Shell-Restrukturierung (Dashboard, Steuerkompass, Profil-Menü) ---------- */
@media (min-width: 721px) {
  /* Profil bleibt als Tab/DOM für das Handy-Drilldown erhalten, ist am Desktop aber nur noch über
     das Kopfzeilen-Profilmenü erreichbar. */
  #main-nav button[data-tab="profil"] { display: none; }
}

.dashboard-welcome-card { margin-bottom: 16px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
@media (max-width: 900px) and (min-width: 721px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
.dashboard-hero-amount { font-size: 2rem !important; }
.dashboard-filing-hero-card {
  background: linear-gradient(160deg, var(--accent-soft), var(--card) 65%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-countdown-main { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.dashboard-countdown-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dashboard-countdown-date { font-size: 1.7rem; font-weight: 800; color: var(--accent-2); }
.dashboard-countdown-days { font-size: 0.92rem; font-weight: 700; color: var(--accent); }
.dashboard-countdown-retro { margin: 0; }

/* ---------- Dashboard: Kennzahlen-Kacheln ---------- */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) and (min-width: 721px) {
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-stat-tile-accent { background: linear-gradient(160deg, var(--accent-soft), var(--card) 70%); border-color: var(--accent); }
.dashboard-stat-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dashboard-stat-value { font-size: 1.55rem; font-weight: 800; color: var(--ink); }
.dashboard-stat-tile-accent .dashboard-stat-value { color: var(--accent-2); }
.dashboard-stat-sub { font-size: 0.76rem; color: var(--muted); font-weight: 600; }

/* ---------- Dashboard: Kategorie-Balken + Schnellzugriff ---------- */
.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
@media (max-width: 900px) and (min-width: 721px) {
  .dashboard-secondary-grid { grid-template-columns: 1fr; }
}
.dashboard-cat-bars { display: flex; flex-direction: column; gap: 12px; }
.dashboard-cat-row { display: flex; flex-direction: column; gap: 4px; }
.dashboard-cat-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-cat-row-amount { font-weight: 700; font-size: 0.88rem; }
.dashboard-cat-bar-track { height: 8px; border-radius: 999px; background: var(--bg-accent-a); overflow: hidden; }
.dashboard-cat-bar-fill { height: 100%; border-radius: 999px; min-width: 3px; }

.dashboard-actions-grid { display: flex; flex-direction: column; gap: 10px; }
.dashboard-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
}
.dashboard-action-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); filter: none; box-shadow: none; transform: none; }
.dashboard-action-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }

/* ---------- Dashboard: zuletzt erfasste Belege ---------- */
.dashboard-recent-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 900px) and (min-width: 721px) {
  .dashboard-recent-list { grid-template-columns: 1fr; }
}

.required-asterisk { color: var(--danger); margin-left: 2px; font-weight: 700; }
.required-legend { font-size: 0.8rem; color: var(--muted); margin: 4px 0 0; }
.required-legend .required-asterisk { margin-left: 0; margin-right: 2px; }

.plan-card.is-current-plan { border-color: var(--accent-2); position: relative; }
.plan-card-current-tag {
  display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-ink, #fff);
  background: var(--accent-2); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px;
}
.plan-card-billing-status { display:inline-flex; align-self:flex-start; margin:2px 0 12px; padding:5px 9px; border:1px solid color-mix(in srgb, var(--accent-2) 45%, var(--border)); border-radius:999px; color:var(--accent-2); background:var(--accent-soft); font-size:.72rem; font-weight:800; }
.ledger-plan-billing-status { display:block; margin-top:7px; color:var(--accent-2); font-size:.72rem; font-weight:800; }

/* ---------- Eigener alert()/confirm()/prompt()-Ersatz (siehe appDialog() in app.js) ---------- */
.app-dialog-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.app-dialog-overlay.hidden { display: none; }
.app-dialog-box {
  width: min(420px, 100%); background: var(--card); border-radius: var(--radius); padding: 26px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); text-align: left;
  animation: app-dialog-in .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes app-dialog-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.app-dialog-icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 12px;
}
.app-dialog-icon svg { width: 22px; height: 22px; }
.app-dialog-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.app-dialog-box h2 { margin: 0 0 8px; font-size: 1.1rem; }
.app-dialog-box p { margin: 0 0 16px; white-space: pre-line; }
.app-dialog-box input[type="text"] { width: 100%; margin-bottom: 16px; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.app-dialog-actions button { width: auto; }

/* ---------- Cookie-Hinweis (reiner Hinweis, kein Opt-In - siehe index.html) ---------- */
.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; justify-content: center; padding: 16px;
  pointer-events: none; /* nur die Karte selbst soll klickbar sein, nicht der ganze Streifen */
}
.cookie-notice.hidden { display: none; }
.cookie-notice-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 720px; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: 14px 18px;
  animation: cookie-notice-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.cookie-notice-card p { margin: 0; flex: 1 1 320px; font-size: 0.88rem; color: var(--ink); line-height: 1.5; }
.cookie-notice-card p a { color: var(--accent); text-decoration: underline; }
.cookie-notice-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-notice-actions button { white-space: nowrap; }
@keyframes cookie-notice-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 520px) {
  .cookie-notice { padding: 7px; }
  .cookie-notice-card { flex-direction: column; align-items: stretch; gap: 7px; padding: 9px 11px 10px; border-top-width: 2px; text-align: center; }
  .cookie-notice-icon { width: 28px; height: 28px; align-self: center; font-size: .88rem; }
  .cookie-notice-card p { flex: 0 1 auto; font-size: .74rem; line-height: 1.3; }
  .cookie-notice-actions { flex-direction: row; gap: 6px; }
  .cookie-notice-actions button { width: auto; min-width: 0; flex: 1 1 0; min-height: 40px; padding: 8px 6px; font-size: .75rem; }
}
.cookie-notice-card { border-top: 3px solid var(--accent); gap: 14px; }
.cookie-notice-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.cookie-notice-card p { flex: 1 1 340px; }

/* ---------- Rechtliche Seiten (Impressum/AGB/Datenschutz/KI-Quellen) - eigenständiges Layout,
   lädt kein app.js, nur styles.css. Eigene Klassen statt der App-weiten .wrap/.card-Defaults,
   damit Fließtext eine lesbare Breite bekommt statt auf volle Bildschirmbreite zu laufen. ---------- */
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; }
.legal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.legal-topbar a.legal-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.legal-topbar a.legal-back:hover { text-decoration: underline; }
.legal-wordmark { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 4px; }
.legal-nav.legal-nav-top { margin: 0 0 22px; }
.legal-nav a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 500; text-decoration: none; color: var(--ink);
  background: var(--card); transition: border-color .15s ease, color .15s ease;
}
.legal-nav a:hover { border-color: var(--accent); color: var(--accent); }
.legal-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.legal-draft-notice {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #f5c26b; background: linear-gradient(135deg,#fffbeb,#fff7ed);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; font-size: 0.9rem; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-draft-notice { background: linear-gradient(135deg,#2a2210,#241c0c); border-color: #7a5a1e; color: #f4f4f5; }
}
:root[data-theme="dark"] .legal-draft-notice { background: linear-gradient(135deg,#2a2210,#241c0c); border-color: #7a5a1e; color: #f4f4f5; }
.legal-draft-notice-icon { flex: 0 0 auto; font-size: 1.2rem; line-height: 1; }
.legal-page .card h1 { margin-top: 0; font-size: 1.5rem; }
.legal-page .card h2 { font-size: 1.05rem; margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.legal-page .card h2:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.legal-page .card p, .legal-page .card li { color: var(--ink); line-height: 1.65; font-size: 0.95rem; }
.legal-page .card ul { padding-left: 22px; }

/* ---------- Praezisions-Umschalter fuer "Beschaeftigt seit" (Monat/Jahr vs. genaues Datum) -
   Anton, 2026-09-07: war unklar, dass man bei type="month" keinen Wortmonat eintippt, sondern
   ueber den Browser-Picker waehlt. Umschalter macht explizit, welche Genauigkeit gerade gilt. ---------- */
.date-precision-toggle { display: flex; gap: 6px; margin: 6px 0 6px; }
.date-precision-btn {
  flex: 1; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--muted); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.date-precision-btn:hover { border-color: var(--accent); color: var(--ink); }
.date-precision-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Profil: Beschriftung und Genauigkeits-Umschalter in einer Zeile, Eingabefeld darunter. */
.employed-since-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.employed-since-label { white-space: nowrap; }
.employed-since-field .date-precision-toggle {
  min-width: 0;
  margin: 0;
}
.employed-since-field .date-precision-btn {
  min-width: 0;
  padding: 6px 7px;
  font-size: 0.76rem;
  white-space: nowrap;
}
.employed-since-field > input {
  grid-column: 1 / -1;
}

/* Kinder im Profil: Anzahl zuerst, danach ein eigenes Feld pro Kind für das Alter. */
.profile-children-settings-row { align-items: flex-start; }
.profile-children-check,
.profile-children-count-field { margin-top: 10px !important; }
.profile-children-check {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}
.profile-children-count-field input { margin-top: 4px; }
.profile-children-detail-wrap {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}
.profile-children-detail-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile-children-detail-heading strong { font-size: 0.86rem; }
.profile-children-detail-heading .muted { font-size: 0.76rem; }
#profile-children-detail-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.profile-child-age-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.profile-child-age-row > span { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.profile-child-age-row input { width: 132px; margin: 0; padding: 8px 10px; }
@media (max-width: 720px) {
  #profile-children-detail-rows { grid-template-columns: 1fr; }
  .profile-child-age-row input { width: 150px; }
}

/* Behinderung im Profil: Auswahl und optionale Prozentangabe als zusammengehörige Einstellung. */
.profile-disability-settings { margin-top: 14px; }
.profile-disability-check {
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}
.profile-disability-detail-wrap {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}
.profile-disability-detail-heading { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile-disability-detail-heading strong { font-size: 0.86rem; }
.profile-disability-detail-heading .muted { font-size: 0.76rem; }
.profile-disability-detail-wrap .onboarding-percent-slider-row { margin-top: 10px; }

/* Kinder, Homeoffice und Behinderung: kompakte Einstellungsblöcke mit Details
   in einer gemeinsamen Auswahlfläche, damit das Profil auch mobil übersichtlich bleibt. */
.profile-extra-settings { display: grid; gap: 10px; margin-top: 14px; }
.profile-extra-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}
.profile-extra-setting > div { min-width: 0; }
.profile-extra-setting strong { display: block; font-size: 0.86rem; }
.profile-extra-setting .muted {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-extra-setting button { flex: 0 0 auto; }
.profile-setting-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: 26px;
}
.profile-setting-dialog .modal-close { position: absolute; top: 10px; right: 10px; }
.profile-setting-dialog h2 { margin-right: 34px; }
.profile-setting-dialog > .muted { margin-bottom: 16px; }
.profile-setting-content { display: grid; gap: 12px; }
.profile-setting-actions { margin-top: 18px; }
body.profile-setting-modal-open { overflow: hidden; }

/* Arbeitgeberleistungen im Profil: kompakter Einstellungsblock mit derselben
   Auswahl-Logik wie im Intro, damit die lange Liste nicht dauerhaft im Formular steht. */
.profile-employer-means-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}
.profile-employer-means-settings > div { min-width: 0; }
.profile-employer-means-settings strong { display: block; font-size: 0.86rem; }
.profile-employer-means-summary {
  display: block;
  max-width: 42ch;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-employer-means-settings button { flex: 0 0 auto; }
.profile-employer-means-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: 26px;
}
.profile-employer-means-dialog .modal-close { position: absolute; top: 10px; right: 10px; }
.profile-employer-means-dialog h2 { margin-right: 34px; }
.profile-employer-means-dialog > .muted { margin-bottom: 16px; }
.profile-employer-means-options .onboarding-choice-row { margin-top: 0; }
.profile-employer-means-custom-chips { margin-top: 10px; }
.profile-employer-means-custom-add { margin-top: 10px; }
.profile-employer-means-custom-add input { margin-bottom: 0; }
.profile-employer-means-actions { margin-top: 18px; }
body.profile-employer-means-open { overflow: hidden; }
@media (max-width: 720px) {
  .profile-extra-setting { align-items: stretch; flex-direction: column; }
  .profile-extra-setting button { width: 100%; }
  .profile-setting-dialog { max-height: calc(100vh - 28px); padding: 22px 16px 16px; }
  .profile-employer-means-settings { align-items: stretch; flex-direction: column; }
  .profile-employer-means-settings button { width: 100%; }
  .profile-employer-means-dialog { max-height: calc(100vh - 28px); padding: 22px 16px 16px; }
}

/* Profil: persönliche Daten und Kontoverwaltung bilden eine gemeinsame Seite.
   Dadurch bleibt die rechte Rail vollständig weg und alle Aktionen stehen direkt
   unter Speichern/Abbrechen im selben Inhaltsfluss. */
.profile-page-stack { width: 100%; min-width: 0; }
.profile-account-actions { display: grid; gap: 16px; margin-top: 16px; }
.profile-plan-card { margin: 0; }
.profile-account-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.profile-account-card-heading > div:first-child { min-width: 0; }
.profile-account-card-heading h2 { margin: 4px 0 0; }
.profile-account-card-heading p { margin: 4px 0 0; }
.profile-account-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.profile-account-card-actions button { white-space: nowrap; }
.profile-account-settings { display: block; min-width: 0; }
.profile-account-settings .profil-allgemein-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.profile-account-settings .card { margin: 0; min-width: 0; }
.profile-account-settings #profile-contact-card,
.profile-account-settings #darstellung-card,
.profile-account-settings #support-card,
.profile-account-settings #passkeys-card,
.profile-account-settings #delete-account-card { grid-column: 1 / -1; }
.profile-account-settings #darstellung-card { display: none !important; }
.profile-account-settings .profil-section-back { display: none; }

@media (min-width: 721px) {
  #tab-profil #profil-section-persoenlich > .profile-account-actions { display: none; }
  #tab-profil.profile-focus-security #profil-section-persoenlich,
  #tab-profil.profile-focus-abo #profil-section-persoenlich { display: block; }
  #tab-profil.profile-focus-security #profil-section-persoenlich > .card,
  #tab-profil.profile-focus-abo #profil-section-persoenlich > .card { display: none; }
  #tab-profil.profile-focus-security #profil-section-persoenlich > .profile-account-actions,
  #tab-profil.profile-focus-abo #profil-section-persoenlich > .profile-account-actions { display: grid; }
  #tab-profil.profile-focus-security #profil-section-abo,
  #tab-profil.profile-focus-abo #profil-section-allgemein { display: none; }
  #tab-profil.profile-focus-security #profil-section-allgemein,
  #tab-profil.profile-focus-abo #profil-section-abo { display: block; }
}

@media (max-width: 720px) {
  #tab-profil #profil-section-persoenlich.profile-section-open .profile-account-actions { display: none !important; }
  #tab-profil.profile-focus-security #profil-section-persoenlich.profile-section-open .profile-account-actions,
  #tab-profil.profile-focus-abo #profil-section-persoenlich.profile-section-open .profile-account-actions { display: block !important; }
  #tab-profil.profile-focus-security #profil-section-persoenlich.profile-section-open > .card,
  #tab-profil.profile-focus-abo #profil-section-persoenlich.profile-section-open > .card { display: none; }
  #tab-profil.profile-focus-security #profil-section-abo,
  #tab-profil.profile-focus-abo #profil-section-allgemein { display: none !important; }
  #tab-profil.profile-focus-security #profil-section-allgemein,
  #tab-profil.profile-focus-abo #profil-section-abo { display: block !important; }
  .profile-account-card-heading { flex-direction: column; }
  .profile-account-card-actions { justify-content: stretch; width: 100%; }
  .profile-account-card-actions button { width: 100%; }
  .profile-account-settings .profil-allgemein-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .profile-account-settings .card { padding: 14px 0; }
}

/* Notiz-Editor: Aktionen auf kleinen Displays innerhalb des Dialogs halten. */
@media (max-width: 720px) {
  #receipt-note-overlay .mobile-overlay-sheet-center > div:last-child {
    min-width: 0;
  }
  #receipt-note-overlay .mobile-overlay-sheet-center > div:last-child > div {
    flex: 1 1 0;
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #receipt-note-overlay .mobile-overlay-sheet-center > div:last-child > div > button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: nowrap;
  }
}