/* Kunden-Dashboard "Liquid" (12.09.2026). Farben und Schrift wie in styles.css;
   eigene Datei, damit an der Verifizierungs-Seite (index.html) nichts wackelt. */
@property --rim { syntax: '<angle>'; inherits: false; initial-value: 200deg; }
:root {
  color-scheme: dark;
  --void: #06080c; --silver: #e3e8ef; --dim: #8b94a3; --faint: #4a5260;
  --hair: rgba(227,232,239,.10); --hair2: rgba(227,232,239,.06);
  --blue: #38bdf8; --good: #7dd3a7; --warn: #f0c27a; --crit: #ff8a8a; --ease: cubic-bezier(.16,1,.3,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--void); }
body { color: var(--silver); font-family: Manrope, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow: hidden; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Buehne ─────────────────────────────────────────── */
.app { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; height: var(--tg-viewport-stable-height, 100dvh); overflow: hidden; background: var(--void); color: var(--silver); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(36px); transition: opacity 1.2s ease; }
.orb i { display: block; width: 100%; height: 100%; border-radius: 50%; animation: drift var(--t) ease-in-out infinite alternate; animation-delay: var(--d); transition: background 1.4s ease; }
.orb.a { width: 300px; height: 300px; top: -110px; right: -90px; --t: 24s; --d: -6s; }
.orb.a i { background: radial-gradient(circle at 40% 40%, rgba(236,241,248,.42), rgba(214,222,233,.14) 45%, transparent 70%); }
.orb.b { width: 260px; height: 260px; top: 36%; left: -125px; --t: 20s; --d: -14s; }
.orb.b i { background: radial-gradient(circle at 55% 45%, rgba(56,189,248,.44), rgba(24,110,160,.18) 48%, transparent 72%); }
.orb.c { width: 200px; height: 200px; bottom: 60px; right: -60px; --t: 27s; --d: -3s; }
.orb.c i { background: radial-gradient(circle at 45% 50%, rgba(90,130,255,.36), rgba(30,60,140,.14) 50%, transparent 72%); }
@keyframes drift { 0% { translate: 0 0; scale: 1; } 50% { translate: -84px 66px; scale: 1.07; } 100% { translate: 44px 122px; scale: .95; } }
.app[data-state="grace"] .orb.b i { background: radial-gradient(circle at 55% 45%, rgba(240,194,122,.4), rgba(150,105,40,.15) 48%, transparent 72%); }
.app[data-state="pause"] .orb { opacity: .5; }
.app[data-state="ended"] .orb { opacity: .35; }
.grain { position: absolute; inset: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none; opacity: .08; animation: grainmove .7s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.93  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; }
@keyframes grainmove { 0% { translate: 0 0; } 25% { translate: -3% 2%; } 50% { translate: 4% -1%; } 75% { translate: -2% -4%; } 100% { translate: 0 0; } }
.vig { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(6,8,12,.6) 100%); }
.scr { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.scr::-webkit-scrollbar { display: none; }
.scr > *, .sin > *, .sbody > * { flex-shrink: 0; }
.bar { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top)) 22px 0; }
.bar img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.bar .nm { font-size: 14.5px; font-weight: 600; }
.bar .nm span { color: var(--dim); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.chev { color: var(--faint); font-size: 17px; line-height: 1; margin-left: 10px; }

/* ── Liquid-Glas ─────────────────────────────────────── */
.panel { margin: 12px 14px 0; border-radius: 26px; position: relative; overflow: hidden;
  background: rgba(227,232,239,.045); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.35), 0 30px 60px -30px rgba(0,0,0,.9); }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--rim) at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,.05) 25%, rgba(56,189,248,.4) 50%, rgba(255,255,255,.04) 75%, rgba(255,255,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rim 16s linear infinite; }
@keyframes rim { to { --rim: 560deg; } }
.panel::after { content: ""; position: absolute; top: -40%; left: -30%; width: 70%; height: 80%; pointer-events: none; rotate: -18deg;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 60%); filter: blur(6px); animation: gleam 9s ease-in-out infinite alternate; }
@keyframes gleam { from { translate: 0 0; opacity: .8; } to { translate: 26px 10px; opacity: 1; } }
.hero { padding: 18px 20px 14px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.lens { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.24), rgba(227,232,239,.06) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.8); transition: box-shadow .8s ease; }
.app[data-state="ok"] .lens { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.8), 0 0 40px -10px rgba(125,211,167,.45); }
.app[data-state="grace"] .lens { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.8), 0 0 40px -10px rgba(240,194,122,.55); }
.app[data-state="pause"] .lens { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.4), 0 14px 30px -12px rgba(0,0,0,.8), 0 0 40px -10px rgba(56,189,248,.5); }
.lens .n { font-size: 38px; font-weight: 200; letter-spacing: -.05em; line-height: 1; }
.lens .n.klein { font-size: 26px; }
.lens img { width: 48px; height: 48px; border-radius: 12px; opacity: .9; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); object-fit: cover; }
.hero .tx { flex: 1; min-width: 0; }
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--dim); }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.app[data-state="ok"] .st i { background: var(--good); box-shadow: 0 0 8px rgba(125,211,167,.6); }
.app[data-state="grace"] .st i { background: var(--warn); box-shadow: 0 0 8px rgba(240,194,122,.6); }
.app[data-state="pause"] .st i { background: var(--blue); }
.app[data-state="unknown"] .st i, .app[data-state="guest"] .st i { background: transparent; border: 1.5px solid var(--faint); }
.app[data-state="ended"] .st i { background: var(--crit); }
.hero .unit { font-size: 13px; color: var(--dim); margin-top: 2px; }
.hero .line { margin: 5px 0 0; font-size: 13.5px; color: var(--silver); line-height: 1.35; } .hero .line b { font-weight: 600; }
.hero .cta { margin-top: 10px; background: none; border: 0; color: var(--blue); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; }
.hero .cta[hidden] { display: none; }

/* Gast: Verifizierung in der Flaeche */
.verify { position: relative; z-index: 1; padding: 0 20px 14px; display: none; flex-direction: column; gap: 8px; }
.app[data-mode="guest"] .verify { display: flex; }
.field { display: flex; align-items: center; gap: 8px; padding: 4px 5px 4px 14px; border-radius: 999px; background: rgba(227,232,239,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--silver); letter-spacing: .04em; }
.field input::placeholder { color: var(--faint); letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
.pbtn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--silver); color: #0a0d13; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px -8px rgba(227,232,239,.5); white-space: nowrap; }
.pbtn[disabled] { opacity: .5; cursor: default; }
.vres { font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.vres b { color: var(--silver); font-weight: 600; } .vres.bad b { color: var(--crit); } .vres.good b { color: var(--good); }
.vres .l { color: var(--blue); font-weight: 600; cursor: pointer; background: none; border: 0; font-family: inherit; font-size: inherit; padding: 0; }

.joined { position: relative; z-index: 1; padding: 0 20px 14px; display: flex; flex-direction: column; gap: 6px; }
.joined[hidden] { display: none; }
.chk { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.chk[hidden] { display: none; }
.chk i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); background: rgba(125,211,167,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.big { margin-top: 6px; width: 100%; font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px; border-radius: 999px; border: 0; cursor: pointer; background: var(--silver); color: #0a0d13; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px -10px rgba(227,232,239,.55); transition: .2s ease; }
.big[disabled] { opacity: .6; cursor: default; }
.hint { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.sec { border-top: 1px solid var(--hair2); position: relative; z-index: 1; }
.sec[hidden] { display: none; }
.sec .cap { font-size: 11.5px; font-weight: 600; color: var(--dim); padding: 10px 20px 2px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10.5px 20px; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; color: var(--silver); font-family: inherit; position: relative; transition: background .2s ease; }
.row + .row { border-top: 1px solid var(--hair2); }
.row:hover { background: linear-gradient(90deg, rgba(255,255,255,.06), transparent); }
.row svg { width: 19px; height: 19px; stroke: var(--silver); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; opacity: .85; }
.row .k { flex: 1; font-size: 15px; font-weight: 500; }
.row .v { font-size: 13.5px; color: var(--dim); display: flex; align-items: center; white-space: nowrap; }
.row.add .k { color: var(--blue); } .row.add svg { stroke: var(--blue); }
.row .v.warn { color: var(--warn); }
.row[hidden] { display: none; }
.foot-in { margin: 10px 0 0; font-size: 11px; color: var(--faint); text-align: center; padding: 0 22px; }

/* Dock */
.dock { position: absolute; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 5; display: flex; padding: 6px; border-radius: 999px; gap: 4px;
  background: rgba(227,232,239,.06); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 40px -18px rgba(0,0,0,.9); }
.dock button { flex: 1; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--dim); background: none; border: 0; padding: 10px 0; border-radius: 999px; cursor: pointer; transition: .18s ease; }
.dock button[aria-pressed="true"] { background: rgba(227,232,239,.16); color: var(--silver); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.dock button[hidden] { display: none; }

/* Unterseite */
.sheet { position: absolute; inset: 0; z-index: 3; background: var(--void); overflow: hidden; translate: 0 100%; transition: translate .42s var(--ease); }
.sheet[data-open="1"] { translate: 0 0; }
.sheet .orb.a { top: -120px; left: -90px; right: auto; } .sheet .orb.b { top: 42%; left: auto; right: -130px; } .sheet .orb.c { bottom: -40px; right: auto; left: 30px; }
.sin { position: relative; z-index: 2; height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.sin::-webkit-scrollbar { display: none; }
.sh { padding: calc(22px + env(safe-area-inset-top)) 22px 6px; display: flex; align-items: center; justify-content: space-between; }
.sh h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0; flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.close { flex: 0 0 auto; white-space: nowrap; background: rgba(227,232,239,.08); border: 0; color: var(--silver); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.sbody { display: flex; flex-direction: column; }
.sbody .panel { margin-top: 10px; }
.intro { padding: 4px 22px 6px; font-size: 14px; color: var(--dim); line-height: 1.5; } .intro b { color: var(--silver); font-weight: 600; }
.cd { padding: 10px 22px 10px; } .cd b { font-size: 52px; font-weight: 200; letter-spacing: -.05em; line-height: 1; color: var(--warn); display: block; } .cd span { font-size: 13.5px; color: var(--dim); }
.ev { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px; position: relative; z-index: 1; } .ev + .ev { border-top: 1px solid var(--hair2); }
.ev .n { font-size: 14.5px; font-weight: 500; min-width: 0; } .ev .n span { display: block; font-size: 12.5px; color: var(--dim); font-weight: 400; }
.ev .t { font-size: 13px; color: var(--dim); text-align: right; white-space: nowrap; }
.ev .l { background: none; border: 0; color: var(--faint); font-family: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.tog { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; position: relative; z-index: 1; } .tog + .tog { border-top: 1px solid var(--hair2); }
.tog .k { font-size: 15px; } .tog .k span { display: block; font-size: 12.5px; color: var(--dim); }
.sw { width: 44px; height: 26px; border-radius: 999px; background: rgba(227,232,239,.12); position: relative; border: 0; cursor: pointer; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); transition: background .2s ease; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--silver); box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: translate .2s var(--ease); }
.sw[aria-checked="true"] { background: var(--blue); } .sw[aria-checked="true"]::after { translate: 18px 0; }
.sw[disabled] { opacity: .5; }
.chips { display: flex; gap: 4px; margin: 10px 22px 4px; padding: 3px; border-radius: 999px; background: rgba(227,232,239,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); overflow-x: auto; scrollbar-width: none; }
.chip { flex: 1 0 auto; font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--dim); border: 0; white-space: nowrap; }
.chip[aria-pressed="true"] { background: rgba(227,232,239,.16); color: var(--silver); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.f { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; position: relative; z-index: 1; } .f + .f { border-top: 1px solid var(--hair2); }
.f label { font-size: 14.5px; }
.f input, .f select { background: none; border: 0; outline: none; font-family: inherit; font-size: 17px; font-weight: 500; color: var(--dim); text-align: right; width: 46%; -webkit-appearance: none; appearance: none; }
.f input:focus, .f select:focus { color: var(--blue); }
.f select option { background: #0d1117; color: var(--silver); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; }
.out { padding: 20px 22px 6px; display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--hair2); position: relative; z-index: 1; } .out b { font-size: 56px; font-weight: 200; letter-spacing: -.05em; line-height: 1; } .out span { font-size: 14px; color: var(--dim); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px; border-top: 1px solid var(--hair2); font-size: 14px; color: var(--dim); position: relative; z-index: 1; } .kv b { color: var(--silver); font-weight: 500; text-align: right; }
.kv.note { font-size: 12.5px; color: var(--faint); }
.kv .good { color: var(--good); } .kv .warn { color: var(--warn); }
.ziele { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair2); position: relative; z-index: 1; }
.ziel { padding: 12px 8px; text-align: center; } .ziel + .ziel { border-left: 1px solid var(--hair2); }
.ziel .r { font-size: 12px; color: var(--dim); } .ziel .p { font-size: 15px; font-weight: 500; margin-top: 2px; } .ziel .g { font-size: 12.5px; color: var(--good); }
.step { display: flex; align-items: center; gap: 12px; padding: 12px 22px; position: relative; z-index: 1; cursor: default; } .step + .step { border-top: 1px solid var(--hair2); }
.step .no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--dim); background: rgba(227,232,239,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); flex: 0 0 auto; }
.step .k { flex: 1; font-size: 15px; font-weight: 500; } .step .k span { display: block; font-size: 12.5px; color: var(--dim); font-weight: 400; }
.step.tap { cursor: pointer; } .step.tap:hover { background: linear-gradient(90deg, rgba(255,255,255,.06), transparent); }
.code { display: flex; align-items: center; gap: 12px; margin: 12px 22px 0; padding: 12px 14px 12px 18px; border-radius: 999px; background: rgba(227,232,239,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); position: relative; z-index: 1; }
.code[hidden] { display: none; }
.code b { flex: 1; font-size: 20px; letter-spacing: .14em; font-weight: 500; overflow-wrap: anywhere; }
.act { font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; background: var(--silver); color: #0a0d13; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px -8px rgba(227,232,239,.5); }
.act.ghost { background: rgba(227,232,239,.08); color: var(--silver); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.act.danger { background: rgba(255,138,138,.14); color: var(--crit); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.act[disabled] { opacity: .5; cursor: default; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 22px 4px; position: relative; z-index: 1; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(227,232,239,.1); color: var(--silver); font-size: 18px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); line-height: 1; }
.stepper b { font-size: 17px; font-weight: 500; min-width: 64px; text-align: center; }
.verdict { margin: 12px 22px 0; padding: 14px 16px; border-radius: 18px; display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; background: rgba(227,232,239,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.verdict .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 16px; font-weight: 700; }
.verdict[data-r="ok"] .ic { background: rgba(125,211,167,.18); color: var(--good); } .verdict[data-r="no"] .ic { background: rgba(255,138,138,.16); color: var(--crit); } .verdict[data-r="wait"] .ic { background: rgba(227,232,239,.08); }
.verdict .tx { font-size: 14px; font-weight: 600; min-width: 0; } .verdict .tx span { display: block; font-size: 12.5px; color: var(--dim); font-weight: 400; }
.spin { width: 16px; height: 16px; border: 2px solid rgba(227,232,239,.2); border-top-color: var(--silver); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.confirm { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; padding: 24px; background: rgba(6,8,12,.55); backdrop-filter: blur(6px); }
.confirm[data-open="1"] { display: flex; }
.confirm .box { width: 100%; border-radius: 26px; padding: 22px; background: rgba(20,24,32,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -20px rgba(0,0,0,.9); }
.confirm h4 { margin: 0 0 6px; font-size: 18px; font-weight: 600; } .confirm p { margin: 0 0 16px; font-size: 14px; color: var(--dim); }
.confirm .acts { padding: 0; }
.cfield { margin: -6px 0 14px; padding: 6px 14px; } .cfield[hidden] { display: none; }
.cfield input { letter-spacing: .12em; text-transform: uppercase; }
.toast { position: absolute; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 7; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(20,24,32,.94); color: var(--silver); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 20px 40px -18px rgba(0,0,0,.9); max-width: calc(100% - 48px); text-align: center; }
.toast[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .orb i, .grain, .panel::before, .panel::after, .spin, .ein-r, .ein-l, .ein-f, .confirm[data-open="1"], .confirm .box, .toast, .hero .cta { animation: none; } .sheet, .sw::after { transition: none; } }
/* Zeilen in einer Unterseite (Einstellungen) */
.panel .row { z-index: 1; padding: 13px 20px; }
.row .k .sub { display: block; font-size: 12.5px; color: var(--dim); font-weight: 400; margin-top: 1px; }

/* Zweite Flaeche auf der Startseite: leiser als die Hauptflaeche (kein laufender Rand, kein Glanz) */
.panel.soft { background: rgba(227,232,239,.03); }
.panel.soft::before { animation: none; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04)); }
.panel.soft::after { display: none; }
.ihead { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 20px 2px; background: none; border: 0; color: var(--dim); font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; position: relative; z-index: 1; text-align: left; }
.ihead + .ihead, #infoTermine + .ihead { border-top: 1px solid var(--hair2); margin-top: 6px; }
.panel.soft .ev { padding: 8px 20px; }
.panel.soft .ev .n { font-size: 14px; } .panel.soft .ev .t { color: var(--warn); font-size: 14px; font-weight: 500; align-self: center; }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 20px 12px; position: relative; z-index: 1; }
.kchip { display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 14px; background: rgba(227,232,239,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-size: 12.5px; color: var(--dim); }
.kchip b { color: var(--silver); font-weight: 600; font-size: 13px; letter-spacing: .02em; } .kchip i { font-style: normal; font-size: 11.5px; }

.lnk { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; }

/* Uebergaenge (Tobi, 12.09.): dezent wie bei Apple. Unterseiten schieben seitlich
   wie in iOS (rechts = weiter, links = zurueck), neue Inhalte blenden weich ein,
   Hoehen wachsen per JS (weich()) statt zu springen. */
@keyframes ein-r { from { opacity: 0; translate: 32px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ein-l { from { opacity: 0; translate: -32px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ein-f { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.ein-r { animation: ein-r .36s var(--ease) both; }
.ein-l { animation: ein-l .36s var(--ease) both; }
.ein-f { animation: ein-f .3s var(--ease) both; }
.hero .cta:not([hidden]) { animation: ein-f .3s var(--ease) both; }
/* BEFUND 15.09.2026 (Abnahme, Tobi/iPhone): Die Blase erschien unten RECHTS.
   Ursache: .toast steht mit "translate: -50% 0" mittig -- die Einblend-
   Animation ein-f (12.09., "dezente Uebergaenge") setzt aber selbst translate
   und ueberschreibt damit die Mitte. Mit "both" bleibt der Endwert (0 0)
   danach stehen: Die Blase klebt mit ihrer linken Kante auf der Mitte.
   Eigene Kurve, die die -50% durchhaelt. */
@keyframes ein-toast { from { opacity: 0; translate: -50% 6px; } to { opacity: 1; translate: -50% 0; } }
.toast:not([hidden]) { animation: ein-toast .26s var(--ease) both; }
@keyframes schleier { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; scale: .96; translate: 0 12px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.confirm[data-open="1"] { animation: schleier .22s ease both; }
.confirm[data-open="1"] .box { animation: pop .34s var(--ease) both; }
.row, .dock button, .act, .big, .step.tap, .ihead { transition: background .18s ease, opacity .18s ease, scale .18s var(--ease); }
.act:active, .big:active, .dock button:active { scale: .97; }

/* Unter dem Dock verblasst der Inhalt (12.09.2026): In Telegram Desktop greift der
   Glas-Weichzeichner nicht, Text stand sichtbar hinter dem Dock. Liegt ueber der
   Startseite UND ueber jedem Fenster (z 4), unter dem Dock (z 5). */
.dockfade { position: absolute; left: 0; right: 0; bottom: 0; height: calc(120px + env(safe-area-inset-bottom)); z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,8,12,0) 0%, rgba(6,8,12,.92) 42%, var(--void) 70%); }

/* AGB & Datenschutz in voller Laenge (12.09.2026): Text wie auf der Eingabeseite. */
.legal { padding: 8px 22px 4px; }
.legal + .legal { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--hair2); }
.legal .eyebrow { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.legal .eyebrow i { font-style: normal; color: var(--faint); letter-spacing: .1em; }
.legal p { margin: 0 0 11px; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--dim); }
.legal p b { font-weight: 600; color: var(--silver); }