/* ============================================================
   Gecko Compliance · geteiltes Stylesheet
   Liegt unter /assets/app.css und wird von allen Seiten via
   <link rel="stylesheet" href="/assets/app.css?v=1"> eingebunden.
   Pfade sind ABSOLUT (/fonts/…), damit sie aus jedem Ordner stimmen.
   ============================================================ */

/* ----- Schriften (lokal, keine externen Requests) ----- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-v22-latin-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-v23-latin-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-v23-latin-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');}

/* ----- Design-Tokens ----- */
:root{
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --bg1:#021623; --bg2:#072531;
  --surface:#0B2C33; --surface2:#15373A;
  --line:rgba(234,243,236,.12);
  --text:#FFFFFF; --muted:rgba(234,243,236,.6);
  --accent:#D6FF1B; --accent-ink:#021623;
  --arc:rgba(214,255,27,.08); --ring:rgba(214,255,27,.18);
  --err:#ff8a8d; --warn-bg:rgba(255,176,32,.12); --warn-bd:rgba(255,176,32,.45); --warn-tx:#f0b429;
  color-scheme:dark;
}
body[data-theme="light"]{
  --bg1:#FAFBF8; --bg2:#EEF2E9;
  --surface:#ffffff; --surface2:#EEF2E9;
  --line:rgba(14,77,68,.14);
  --text:#15302B; --muted:#5E6F6A;
  --accent:#0E4D44; --accent-ink:#ffffff;
  --arc:rgba(14,77,68,.10); --ring:rgba(14,77,68,.18);
  --err:#b00020; --warn-bg:#fff7ed; --warn-bd:#fed7aa; --warn-tx:#9a3412;
  color-scheme:light;
}

/* ----- Reset & Grundlayout (App-Seiten: zentrierte Karte) ----- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f-body);color:var(--text);min-height:100vh;
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  display:flex;align-items:center;justify-content:center;padding:18px;
  position:relative;overflow-x:hidden;transition:background .45s,color .45s}

/* ----- Animierter Hintergrund ----- */
.arcs{position:fixed;border-radius:50%;border:1.5px solid var(--arc);pointer-events:none;z-index:0}
.arcs.a1{width:760px;height:760px;top:-300px;right:-220px;animation:breathe 9s ease-in-out infinite}
.arcs.a2{width:1100px;height:1100px;bottom:-480px;left:-300px;animation:breathe 12s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
.aurora{position:fixed;width:900px;height:900px;left:50%;top:50%;margin:-450px 0 0 -450px;
  background:conic-gradient(from 0deg,transparent,var(--ring),transparent 38%);
  filter:blur(70px);border-radius:50%;animation:spin 26s linear infinite;z-index:0;pointer-events:none;opacity:.7}

/* ----- Brand / Navigation / Theme ----- */
.wrap{width:100%;max-width:480px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.brand .mark{width:34px;height:34px;display:grid;place-items:center;color:var(--accent);flex:none}
.brand .mark svg{width:34px;height:34px;display:block}
.brand .mark svg path{fill:currentColor!important}
.brand .wm{font-family:var(--f-mono);font-size:12.5px;color:var(--text);line-height:1.25}
.brand .wm b{font-weight:500}
.brand .wm .tag{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.brand .sp{flex:1}
.nav{display:flex;gap:4px;align-items:center}
.navlink{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  color:var(--muted);padding:7px 9px;border-radius:9px;border:1px solid transparent;transition:border-color .15s,color .15s;white-space:nowrap}
.navlink:hover{color:var(--text);border-color:var(--line)}
.themebtn{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);cursor:pointer;font-size:15px;transition:border-color .15s,transform .15s}
.themebtn:hover{border-color:var(--accent);transform:translateY(-1px)}

/* ----- Karte / Wizard-Fortschritt ----- */
.card{background:var(--surface);border-radius:22px;padding:24px 22px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55);border:1px solid var(--line);transition:background .45s,border-color .45s}
.progress{height:6px;background:var(--surface2);border-radius:99px;overflow:hidden;margin-bottom:22px}
.progress>i{display:block;height:100%;width:0%;background:var(--accent);border-radius:99px;transition:width .55s cubic-bezier(.16,1,.3,1)}
#step{animation:enter .42s cubic-bezier(.16,1,.3,1)}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ----- Typo ----- */
.q{font-family:var(--f-display);font-size:26px;font-weight:700;margin:0 0 8px;line-height:1.12;letter-spacing:-.02em;color:var(--text)}
.sub{color:var(--muted);font-size:15px;margin:0 0 22px;line-height:1.6}

/* ----- Auswahl-Buttons / Tabs ----- */
.choice{display:grid;gap:12px}
@media(min-width:360px){.choice.two{grid-template-columns:1fr 1fr}}
.opt{border:1.5px solid var(--line);border-radius:14px;padding:18px 14px;font-size:16px;font-weight:600;cursor:pointer;
  background:var(--surface2);color:var(--text);text-align:center;font-family:var(--f-body);
  transition:transform .15s,border-color .15s,box-shadow .15s,color .15s}
.opt:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 28px -18px var(--accent)}
.opt:active{transform:translateY(-1px)}
.opt.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px var(--ring) inset}

/* ----- Eingabefelder ----- */
input[type=text],input[type=date]{width:100%;padding:14px 16px;font-size:17px;font-family:var(--f-body);
  border:1.5px solid var(--line);border-radius:12px;outline:none;background:var(--surface2);color:var(--text);
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}
input[type=text]::placeholder{color:var(--muted)}
input[type=text]:focus,input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
input[type=date]{font-family:var(--f-mono);font-size:15px}
input[type=date]::-webkit-calendar-picker-indicator{width:18px;height:18px;cursor:pointer;opacity:.9;background-repeat:no-repeat;background-position:center;background-size:18px;transition:opacity .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6FF1B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E")}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
body[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4D44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E")}
.ingroup{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:var(--surface2);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ingroup:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.ingroup .prefix{display:flex;align-items:center;padding:0 4px 0 16px;font-family:var(--f-mono);font-size:16px;font-weight:500;color:var(--muted)}
.ingroup input[type=text]{border:none;background:transparent;box-shadow:none;border-radius:0;padding:14px 16px 14px 4px;flex:1;color:var(--text)}
.ingroup input[type=text]:focus{box-shadow:none}
.flabel{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.14em}

/* ----- Buttons ----- */
.btn{width:100%;padding:15px;font-size:16px;font-weight:700;font-family:var(--f-body);cursor:pointer;
  color:var(--accent-ink);border:none;border-radius:12px;margin-top:18px;background:var(--accent);
  transition:transform .15s,box-shadow .15s,opacity .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@keyframes btnpop{0%{transform:scale(.97);box-shadow:0 0 0 0 var(--ring)}55%{transform:scale(1.03);box-shadow:0 0 0 10px transparent}100%{transform:scale(1);box-shadow:0 16px 30px -16px var(--accent)}}
.btn.ready{animation:btnpop .55s cubic-bezier(.16,1,.3,1)}
.back{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:0;
  margin-bottom:14px;display:inline-flex;align-items:center;gap:5px;font-weight:500;font-family:var(--f-body)}
.back:hover{color:var(--text)}

/* ----- Detail-Zeilen / Summe ----- */
.rows{margin-top:4px}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.row:last-child{border-bottom:none}
.row .k{color:var(--muted)}
.row .v{font-weight:600;text-align:right;color:var(--text)}
.row.add .k,.row.add .v{color:var(--accent)}
.total{margin-top:18px;padding:20px;border-radius:14px;text-align:center;background:var(--surface2);border:1px solid var(--line)}
.total .lbl{font-family:var(--f-mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em}
.total .amt{font-family:var(--f-display);font-size:32px;font-weight:700;margin-top:6px;letter-spacing:-.02em;color:var(--accent);word-break:break-all}
.rateinfo{text-align:center;color:var(--muted);font-size:12px;margin-top:12px;font-family:var(--f-mono);min-height:16px;line-height:1.5}

/* ----- Status / Hinweise ----- */
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:26px auto 14px}
.center{text-align:center;color:var(--muted);font-size:14px}
.err{color:var(--err);font-weight:600;font-size:13px;margin-top:10px;min-height:16px}
.note{background:var(--surface2);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.5}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--surface2);color:var(--accent);font-size:12px;font-weight:500;font-family:var(--f-mono);vertical-align:middle}
.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:12px;line-height:1.4}
.info{background:var(--surface2);border:1px solid var(--accent);color:var(--text);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:500;margin-bottom:12px;line-height:1.4}

/* ----- QR / Adresse / Verifizierung (Bezahl-App) ----- */
.qrbox{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 14px}
.qrbox .frame{background:#fff;padding:12px;border-radius:14px;box-shadow:0 12px 26px -14px rgba(0,0,0,.55);line-height:0}
.qrbox .frame img,.qrbox .frame canvas{display:block;border-radius:4px}
.qrcap{font-size:12px;color:var(--muted);text-align:center;max-width:260px;line-height:1.45}
.addr{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px}
.addr span{font-family:var(--f-mono);font-size:13px;word-break:break-all;flex:1;line-height:1.45;color:var(--text)}
.copy{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--accent);font-family:var(--f-body)}
.copy:hover{border-color:var(--accent)}
.verify{margin-top:16px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:14px}
.verify .vt{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--text);font-family:var(--f-display)}
.verify p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.5}
.check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--text)}
.check input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex:none}
.tswrap{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.tsframe{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;justify-content:center}
.tsframe #ts{border-radius:8px;overflow:hidden;line-height:0}