:root{
  --accent:#0b6ef6;
  --accent-2:#5aa0ff;
  --bg:#0a0a0a;
  --card:#16181d;
  --muted:#9ca3af;
  --text:#eef2ff;

  --glow:rgba(11,110,246,.25);
  --border:rgba(255,255,255,.22);

  --glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  /* stärkerer, dunklerer Glaslook für den TOP-Banner */
  --glass-strong-top: linear-gradient(180deg, rgba(16,20,28,.78), rgba(16,20,28,.48));
  /* neutraler Glaslook für die PDF-Sidebar */
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));

  --ring: 0 0 0 2px rgba(11,110,246,.65), 0 10px 26px rgba(11,110,246,.20);

  --radius-xl: 26px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  --elev-1: 0 6px 18px rgba(0,0,0,.35);
  --elev-2: 0 10px 26px rgba(0,0,0,.45);
  --elev-3: 0 14px 34px rgba(0,0,0,.46);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
	align-items:center;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

.hide-cursor, .hide-cursor *{cursor:none !important}

/* =======================
   Background Layers
   ======================= */
#starfield{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 50% -20%, #0b0f19 30%, transparent 60%),
  linear-gradient(#05060b,#070a13 60%, #06070d)}
#aurora{position:fixed;inset:-12% -22%;z-index:-1;pointer-events:none;filter:blur(52px) saturate(115%);opacity:.55;background:
  radial-gradient(ellipse at 18% 78%, rgba(0,0,0,.38), transparent 46%),
  radial-gradient(ellipse at 82% 22%, rgba(70,70,70,.32), transparent 46%),
  radial-gradient(ellipse at 60% 92%, rgba(30,30,30,.30), transparent 50%),
  radial-gradient(ellipse at 12% 18%, rgba(90,90,90,.22), transparent 50%);
  animation: auroraShift 22s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translate3d(0,0,0) scale(1) rotate(0);opacity:.5}50%{transform:translate3d(-2%,-3%,0) scale(1.04) rotate(2deg);opacity:.62}100%{transform:translate3d(2%,3%,0) scale(1.02) rotate(-2deg);opacity:.55}}
@media (prefers-reduced-motion: reduce){ #aurora{animation:none} }

/* =======================
   Header / Hero
   ======================= */
header{
  position:relative;
  padding:110px 20px 24px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
}
header h1{font-size:48px;font-weight:700;margin-bottom:8px}
header p{font-size:20px;color:var(--muted)}
.fade-load{opacity:0;transform:translateY(12px);transition:opacity .8s ease, transform .8s ease}
.fade-load.show{opacity:1;transform:translateY(0)}

.hero-banner{
  margin:22px auto 10px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:10px 12px;border-radius:18px;;
  max-width:1100px
}
.hero-chip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px rgba(11,110,246,.16), inset 0 1px 0 rgba(255,255,255,.10);
  font-weight:700;letter-spacing:.2px;white-space:nowrap}
.hero-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(11,110,246,.7)}
.hero-chip strong{font-size:16px}

/* =======================
   TOP Mini-Banner (fixed)
   ======================= */
.mini-banner{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:1000;
  background:var(--glass-strong-top);
  border:1px solid var(--border);
  backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%);
  border-radius:var(--radius-pill); padding:6px;
  max-width:min(1100px, calc(100vw - 32px));
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  will-change:transform, opacity;
}
.mini-banner .clip{position:relative; overflow:visible}
.mini-banner .track{display:flex; align-items:center}
.mini-banner .lane{display:flex; gap:10px; align-items:center; flex-wrap:nowrap; padding:2px}
.mini-banner .mini-item{
  --pad-x:14px; --pad-y:10px;
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--pad-y) var(--pad-x);
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  color:#eef3ff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  min-height:40px; outline:0; white-space:nowrap;
  transition:transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mini-banner .mini-item:hover{transform:translateY(-1px);border-color:rgba(11,110,246,.45);color:#d9e7ff;box-shadow:var(--ring), inset 0 1px 0 rgba(255,255,255,.12)}
.mini-banner .mini-item:focus-visible{box-shadow:var(--ring), inset 0 1px 0 rgba(255,255,255,.12); outline:none}
.mini-banner .emoji{font-size:16px}
.mini-banner .mini-icon{width:18px;height:18px;object-fit:contain;vertical-align:middle}
@media (max-width:700px){
  .mini-banner{padding:4px}
  .mini-banner .lane{gap:8px}
  .mini-banner .mini-item{--pad-x:12px; --pad-y:9px; font-size:14px}
  .mini-banner .emoji{font-size:14px}
}
/* ========================
   Kontakt Button von unten eingeschoben
   ======================== */

   /* Fixierter Button unten */
.tel-toggle {
  position: fixed;
  right: 1.5rem;
  bottom: 4.5rem;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #0f172a;
  color: #52f74c;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}

.tel-toggle i {
  font-size: 1.1rem;
}

/* Overlay-Container */
.tel-overlay {
  position: fixed;
  inset: 0;
  display: none;              /* per JS auf flex setzen */
  align-items: flex-end;      /* unten ausrichten */
  justify-content: center;
  z-index: 9999;
}

/* halbtransparenter Hintergrund */
.tel-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 3, 0.6);
}

/* Bottom-Sheet Inhalt */
.tel-overlay-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  background: #0b1120;
  color: #e5e7eb;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 1.5rem 1.5rem 2rem;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.6);

  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* aktiver Zustand: hochgeslidet */
.tel-overlay.is-open .tel-overlay-content {
  transform: translateY(0);
  opacity: 1;
}

/* Schließen-Button */
.tel-overlay-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: #e5e7eb;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile: Button mittig unten (optional) */
@media (max-width: 768px) {
  .tel-toggle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1rem;
  }
}


/* Header mittig & mit großem Abstand nach oben */
.page-header{
  max-width:1100px;
  margin:140px auto 20px;  /* <- Abstand nach oben erhöht */
  padding:0 20px;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.page-header img{
  max-width:180px;
  height:auto;
  display:block;
}


/* layout */
.container{max-width:1100px;margin:20px auto;padding:0 16px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  padding:18px;
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-bottom:12px;
}
.grid label{
  display:flex;
  flex-direction:column;
  font-size:13px;
  color:var(--muted);
}
.grid input,
.grid select{
  margin-top:8px;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:var(--text);
  font-weight:600;
}

/* Kalender-Icon im Datumsfeld in Weiß darstellen (Chrome/Edge/Safari) */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity:0.9;
}

/* mode switch */
.mode-switch{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  margin-bottom:12px;
  flex-wrap:wrap;
}
.mode-btn{
  border:0;
  padding:6px 12px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.mode-btn.active{
  background:linear-gradient(180deg,var(--accent),#0658d6);
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}

/* hidden utility */
.hidden{display:none !important;}

.actions{
  display:flex;
  gap:10px;
  margin-top:6px;
  flex-wrap:wrap;
}
.result{
  margin-top:12px;
  padding:12px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  min-height:56px;
  color:var(--text);
  font-weight:700;
}

/* charts */
.charts-grid{
  display:none;
  opacity:0;
  transition:opacity .35s ease;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
  align-items:stretch;
}
@media (max-width:900px){.charts-grid{grid-template-columns:1fr}}
.charts-grid.visible{
  display:grid;
  opacity:1;
}
.chart-card{
  background:rgba(255,255,255,0.01);
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
}
.chart-card.fullwidth{grid-column:1/-1}
.chart-card.chart-large{grid-column:1/-1}

/* table */
.table-wrap{
  max-height:380px;
  overflow:auto;
  padding:0; /* kein Spalt zwischen Sticky-Header & Rand */
  background:rgba(0,0,0,0.12);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.05);
  margin-top:10px;
}
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,0.10)}

.calc-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.calc-table thead th{
  position:sticky;
  top:0;
  background:rgba(7,10,19,0.98);
  z-index:1;
  padding:8px;
  text-align:left;
  color:var(--accent);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.calc-table tbody td{
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.calc-table tr.highlight-row{
  background:rgba(11,110,246,0.15);
}


.btn-small{padding:8px 12px;font-size:13px;line-height:1.2}
/* buttons */
.btn-solid{
  background:linear-gradient(180deg,var(--accent),#0658d6);
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  border:0;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1.25;
}
.btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}

/* Kontextmenü beim Rechtsklick */
#chartContextMenu{
  position:fixed;
  z-index:1500;
  min-width:190px;
  background:rgba(9,16,32,0.96);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 32px rgba(0,0,0,0.7);
  padding:4px;
  display:none;
}
#chartContextMenu button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}
#chartContextMenu button:hover{
  background:rgba(255,255,255,0.06);
}

/* Footer */
.site-footer{
  text-align:center;
  padding:18px;
  color:var(--muted);
  font-size:13px;
  margin-top:24px;
}
.site-footer .footer-links{
  margin-top:6px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.site-footer .footer-links a{
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
}
.site-footer .footer-links a:hover{
  color:var(--text);
}



/* Spezifische Styles für die Rechner-Seite */
body.rechner-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.hero-info-card h2{
  margin-bottom:6px;
}

.muted{
  color:var(--muted);
  font-size:14px;
}

.button-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:1rem;
}

/* Kontakt-Buttons vertikal & mittig */
.button-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 1rem;
}

/* Buttons schön breit & zentriert */
.button-group a{
  width: 220px;                /* gleiche Breite */
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}


.btn-whatsapp,
.btn-telegram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  font-weight:600;
  text-decoration:none;
  border:0;
  font-size:14px;
}

.btn-whatsapp{
  background:#16a34a;
  color:#ecfdf5;
}

.btn-telegram{
  background:#0ea5e9;
  color:#e0f2fe;
}

.btn-whatsapp:hover,
.btn-telegram:hover{
  filter:brightness(1.05);
}

/* Mini-Banner Toggle für Mobile */
.mini-banner{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-banner .mini-toggle{
  border:0;
  border-radius:var(--radius-pill);
  padding:8px 12px;
  background:rgba(15,23,42,0.9);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  margin-right:10px;
  display:none;
}

@media (max-width:700px){
  .mini-banner .track{
    justify-content:flex-start;
  }
  .mini-banner .mini-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .mini-banner .lane[data-collapsed="true"]{
    display:none;
  }
}

@media (min-width:701px){
  .mini-banner .mini-toggle{
    display:none !important;
  }
}

/* Feinheiten Overlay */
.tel-overlay-content h2{
  margin-bottom:0.75rem;
}
/* Rechner-Seite: Header nicht beschneiden und Abstand sauber setzen */
body.rechner-page header{
  padding:0;
  overflow:visible;
}

body.rechner-page .page-header{
  margin:110px auto 24px;
}


/* Gebühren-Modal für Rechner-Seite */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal.show{
  display:flex;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
}
.modal-content{
  position:relative;
  z-index:10;
  background:var(--glass-strong);
  padding:22px;
  border-radius:20px;
  width:min(92%,640px);
  box-shadow:var(--elev-3);
}
.modal-content h3{
  margin-bottom:10px;
}
.modal-close{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:24px;
  cursor:pointer;
}
.modal img{
  max-width:100%;
  height:auto;
  display:block;
  margin-top:10px;
  border-radius:12px;
}

/* Auszahlungs-Sequenz */
.payout-card h3{
  margin-bottom:6px;
}
.payout-grid label input{
  background:rgba(255,255,255,0.02);
}
.payout-actions{
  margin-top:10px;
}
.result.small{
  font-size:13px;
  margin-top:8px;
}

.calc-table thead th:first-child{border-top-left-radius:10px}
.calc-table thead th:last-child{border-top-right-radius:10px}

/* Table tools (Suche/Markierung) */
.table-tools{margin-top:8px}
.table-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.table-search input{
  flex:1;
  min-width:220px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  color:var(--text);
  font-weight:600;
  outline:none;
}
.table-search input:focus{box-shadow:var(--ring);border-color:rgba(11,110,246,0.35)}
.table-hint{margin-top:6px;font-size:12px;opacity:.85}

.chart-card.chart-equal{min-height:280px}
.chart-card canvas{width:100% !important}

#chartContextMenu .cm-head{
  padding:10px 10px 8px;
  font-weight:800;
  font-size:12px;
  color:rgba(255,255,255,0.85);
  border-bottom:1px solid rgba(255,255,255,0.08);
  margin-bottom:4px;
}


/* =========================
   UI Fixes (Dropdowns, Modal, Table Header)
   ========================= */

/* Info Gebührenstruktur Button größer & präsenter */
#feeInfoBtn{
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 30px rgba(37,99,235,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#feeInfoBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(37,99,235,0.45);
  filter: brightness(1.03);
}
#feeInfoBtn:focus-visible{
  outline: none;
  box-shadow: var(--ring), 0 14px 36px rgba(37,99,235,0.45);
}

/* Select/Option lesbarer (kein weiß auf weiß / disabled sauber) */
.grid select{
  background: #0f172a;
  color: #e5e7eb;
}
.grid select option{
  background: #020617;
  color: #e5e7eb;
}
.grid select option:disabled{
  color: #64748b;
  background: #020617;
}

/* Entnahme-Modell Dropdown (falls vorhanden) */
#withdrawModel{
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #020617;
  border: 1px solid rgba(255,255,255,0.10);
}
#withdrawModel option{
  padding: 10px;
  line-height: 1.4;
}

/* Gebühren-Modal größer + PNG groß anzeigen */
.modal-content{
  max-width: 1100px;
  width: 96%;
  padding: 24px;
}
.modal-content img{
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 16px;
  margin-top: 16px;
}

/* Tabellen-Header: smooth/rund & ohne Lücke */
.calc-table thead th{
  background: #020617;
}
.calc-table thead th:first-child{
  border-top-left-radius: 12px;
}
.calc-table thead th:last-child{
  border-top-right-radius: 12px;
}


/* =======================
   UX Verbesserungen (2025-12)
   ======================= */

/* Inputs: besserer Kontrast + Fokus */
.grid input,
.grid select{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.grid input:focus,
.grid select:focus{
  outline: none;
  border-color: rgba(11,110,246,0.55);
  box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Help Button */
.help-btn{
  margin-left:8px;
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.help-btn:hover{border-color: rgba(11,110,246,0.55); box-shadow: 0 0 0 2px rgba(11,110,246,0.18)}
.help-btn:focus-visible{outline:none; box-shadow: var(--ring)}

/* Tooltips für data-tip (Mini-Banner) */
[data-tip]{ position:relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  background: rgba(9,16,32,0.96);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 32px rgba(0,0,0,0.55);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  z-index: 2000;
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(9,16,32,0.96);
  z-index: 2001;
}

/* Modal: Body + Actions */
.modal-help .modal-body{
  margin-top:10px;
  color: var(--text);
  font-weight:600;
  opacity:0.95;
}
.modal-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Sticky Actions für Mobile */
.sticky-actions{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 12000;
  display: none;
  gap:10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(10,12,18,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
@media (max-width: 900px){
  .sticky-actions{ display:flex; }
  /* Platz unten schaffen, damit Buttons nicht Inhalte überdecken */
  body.rechner-page main{ padding-bottom: 90px; }
}

/* Payout Steps */
.payout-steps{
  margin: 12px 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap:10px;
}
.payout-steps .step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.payout-steps .step-badge{
  width:28px;height:28px;
  border-radius:999px;
  background: linear-gradient(180deg,var(--accent),#0658d6);
  color:#fff;
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  box-shadow:0 10px 26px rgba(11,110,246,.16);
}
.payout-steps .step-body strong{display:block; font-size:14px; margin-bottom:2px}
.payout-steps .help-inline{justify-self:start}

/* Charts: etwas mehr Luft */
.chart-card h3{ margin-bottom: 8px; }

/* Kleine result-boxen in payout */
.result.small{ font-weight: 600; }



/* =========================
   Unified Field Heights (Drop-in)
   ========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.field {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.field > label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  line-height: 1.2;
  font-size: 0.85rem;
  color: rgba(210, 220, 255, 0.92);
}

.field .input-wrap {
  height: 46px;
  display: flex;
  align-items: center;
}

.field .input-wrap input,
.field .input-wrap select,
.field .input-wrap textarea {
  height: 100%;
  width: 100%;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}

.field .input-wrap input:focus,
.field .input-wrap select:focus,
.field .input-wrap textarea:focus {
  border-color: rgba(160, 180, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(120, 150, 255, 0.15);
}

.field .input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
  cursor: pointer;
}

@media (max-width: 520px) {
  .form-grid { gap: 14px; }
  .field > label { min-height: 38px; }
  .field .input-wrap { height: 44px; }
}
/* ===== Floating Startseite Button ===== */
.floating-home{
  position:fixed; right:16px; bottom:16px; z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
  color:#eef3ff; text-decoration:none; font-weight:700; letter-spacing:.2px;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, background .18s ease;
}
.floating-home:hover{transform:translateY(-1px);border-color:rgba(11,110,246,.45);color:#d9e7ff;box-shadow:var(--ring), inset 0 1px 0 rgba(255,255,255,.12)}
.floating-home:focus-visible{outline:none; box-shadow:var(--ring), inset 0 1px 0 rgba(255,255,255,.12)}
.floating-home .home-emoji{font-size:16px; line-height:1}

/* ===== Fix Modus 3: kein Overlap ===== */
/* MODE 3: drei Felder immer nebeneinander (Desktop), mobil untereinander */
.payout-protect-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}

/* verhindert, dass Inputs/Grid überlaufen */
.payout-protect-row > label{
  min-width:0;
}

/* Mobile / schmale Screens */
@media (max-width: 820px){
  .payout-protect-row{
    grid-template-columns: 1fr;
  }
}



/* ===== UI: Gleiche Höhe für Inputs/Selects (Auszahlungs-Grid) ===== */
.payout-grid input,
.payout-grid select {
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  line-height: 44px;
}

.payout-grid input[type="date"]{
  line-height: normal; /* Browser-Default für Date-UI */
  padding-top: 10px;
  padding-bottom: 10px;
}

.payout-grid label{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}



/* ===== Hilfe-Buttons vereinheitlichen: Popups oben entfernen, Hilfe neben Buttons ===== */
.help-btn,
.help-inline {
  display: none !important;
}

/* Actions: Buttons sauber in einer Reihe, mit Wrap */
.actions,
.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}



/* ===== UI: Einheitliche Höhe für Inputs/Selects (Rechner + Auszahlung) ===== */
.grid input,
.grid select,
.payout-grid input,
.payout-grid select {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 10px 14px;
  line-height: normal;
}
.grid input[type="date"],
.payout-grid input[type="date"]{
  padding: 10px 14px;
}
.grid label,
.payout-grid label{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Modus 3: kein Overlap */
.payout-protect-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  align-items:end;
}



/* Hilfe-Liste im Modal */
.help-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
}
.help-list li{
  line-height: 1.35;
}