/* ====================================================================
   GT HASO VIP — Mini App, Design "Kugeln" (September 2026)
   Dunkel, Silber, Blau. Kein Gold (das gehört Xantheon).
   ==================================================================== */
:root {
  color-scheme: dark;
  --void:    #06080c;
  --silver:  #e3e8ef;
  --dim:     #8b94a3;
  --faint:   #4a5260;
  --line:    rgba(227,232,239,.14);
  --line-2:  rgba(227,232,239,.07);
  --blue:    #38bdf8;
  --stop:    #ff8a8a;
  --btn:     #e3e8ef;
  --btn-ink: #0a0d13;
  --ease:    cubic-bezier(.16,1,.3,1);
  --mark:    url("data:image/webp;base64,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");
  --grain: 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");
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--void); color: var(--silver);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overflow: hidden; overscroll-behavior: none;
}
[hidden] { display: none !important; }

.app {
  position: relative; overflow: hidden;
  height: 100vh; height: 100dvh;
  height: var(--tg-viewport-stable-height, 100dvh);
  display: flex; flex-direction: column;
  background: var(--void);
}

/* --------------------------------------------------------------------
   Kugeln
   -------------------------------------------------------------------- */
.orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(34px); will-change: transform;
  transition: opacity 1.4s ease, scale 1.6s var(--ease);
}
.orb i {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  animation: drift var(--t) ease-in-out infinite alternate, sway calc(var(--t) * .61) ease-in-out infinite alternate;
  animation-delay: var(--d), calc(var(--d) * .7);
}
.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,.62), rgba(214,222,233,.22) 45%, transparent 70%); }
.orb.b { width: 250px; height: 250px; top: 40%; left: -120px; --t: 20s; --d: -14s; }
.orb.b i { background: radial-gradient(circle at 55% 45%, rgba(56,189,248,.55), rgba(24,110,160,.22) 48%, transparent 72%); }
.orb.c { width: 190px; height: 190px; bottom: 60px; right: -60px; --t: 27s; --d: -3s; }
.orb.c i { background: radial-gradient(circle at 45% 50%, rgba(90,130,255,.42), rgba(30,60,140,.18) 50%, transparent 72%); }
.orb.d { width: 130px; height: 130px; bottom: 170px; left: 40px; --t: 17s; --d: -9s; }
.orb.d i { background: radial-gradient(circle at 50% 40%, rgba(227,232,239,.45), rgba(180,190,205,.15) 50%, transparent 72%); }
@keyframes drift {
  0%   { translate: 0 0; scale: 1; }
  50%  { translate: -120px 90px; scale: 1.08; }
  100% { translate: 60px 170px; scale: .94; }
}
@keyframes sway {
  0%   { rotate: 0deg; margin-left: 0; }
  100% { rotate: 8deg; margin-left: 70px; }
}
.orb.a i { animation-direction: alternate-reverse, alternate; }
.orb.c i { animation-direction: alternate, alternate-reverse; }
.grain {
  position: absolute; inset: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 160px 160px;
  opacity: .11; will-change: transform;
  animation: grainmove .7s steps(1) infinite;
}
@keyframes grainmove {
  0%   { translate: 0 0; }
  14%  { translate: -3% 2%; }
  28%  { translate: 4% -1%; }
  42%  { translate: -2% -4%; }
  57%  { translate: 3% 3%; }
  71%  { translate: -4% 1%; }
  85%  { translate: 1% -3%; }
  100% { translate: 0 0; }
}
.vignette { 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,.55) 100%); }

.app[data-state="checking"] .orb { scale: 1.12; }
.app[data-state="ok"] .orb.b { scale: 1.3; opacity: 1; }
.app[data-state="ok"] .orb.c { scale: 1.15; }
.app[data-state="bad"] .orb { opacity: .45; scale: .92; }
.app[data-state="bad"] .orb.b { opacity: .25; }

/* --------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------- */
.content {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: max(26px, env(safe-area-inset-top)) 30px calc(118px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  transition: opacity .45s ease, translate .6s var(--ease);
}
.content::-webkit-scrollbar { display: none; }
/* Kinder dürfen beim Scrollen nicht zusammengedrückt werden (sonst überlappen Urteil und Links) */
.content > * { flex-shrink: 0; }
.overview li[hidden] { display: none; }
.app[data-sheet="1"] .content { opacity: 0; translate: 0 -16px; pointer-events: none; }
.app[data-view="overview"] .hello p { display: none; }
.app[data-view="overview"] .hello { margin-top: 26px; }

/* Zurueck oben links (15.09.2026, Befund F2).
   NACHTRAG 15.09. (Tobi, iPhone): War erst "sticky" -- der Knopf wanderte beim
   Scrollen mit und schwebte mitten im Fließtext. Jetzt steht er einfach oben
   und scrollt normal mit weg, wie eine Ueberschrift. */
.backtop {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  margin: -6px 0 2px -10px; padding: 6px 12px 6px 10px;
  background: none; border: 0; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--blue);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity .18s ease, scale .18s var(--ease);
}
.backtop[hidden] { display: none; }
.backtop:active { scale: .96; opacity: .65; }
.backtop:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.crest { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crest::before {
  content: ""; position: absolute; z-index: -1; top: -46px; left: 50%; translate: -50% 0;
  width: 220px; height: 170px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(214,228,246,.15), rgba(56,189,248,.07) 42%, transparent 70%);
  filter: blur(12px);
  animation: glow 6s ease-in-out infinite alternate;
}
.crest .mark {
  display: block; width: 72px; height: 72px; background: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(227,232,239,.45)) drop-shadow(0 0 22px rgba(170,205,240,.4));
}
.crest .brand { font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); text-indent: .3em; }
@keyframes glow { from { opacity: .7; scale: .94; } to { opacity: 1; scale: 1.06; } }

.hello { margin: 34px 0 0; text-align: center; }
.hello h1 { margin: 0; font-weight: 200; font-size: 36px; line-height: 1.05; letter-spacing: -.015em; color: #f2f5f9; text-wrap: balance; }
.hello h1 b { font-weight: 400; }
.hello p { margin: 14px auto 0; font-size: 14px; font-weight: 300; color: var(--dim); line-height: 1.55; max-width: 26ch; }
/* 25.09.2026: Hinweis auf den IB-Wechsel, direkt auf der Eingabeseite. */
.hello .ibhint { margin-top: 10px; font-size: 12.5px; max-width: 30ch; color: var(--dim); }
.hello .ibhint + .ibhint { margin-top: 4px; }
.hello .ibhint[hidden] { display: none; }
.hello .ibhint a { color: var(--blue); text-decoration: none; font-weight: 500; white-space: nowrap; }
.hello .ibhint a:hover, .hello .ibhint a:focus-visible { text-decoration: underline; outline: none; }

.field { margin: 34px 0 0; width: 100%; max-width: 250px; position: relative; }
.acc {
  width: 100%; background: transparent; border: 0; outline: 0; padding: 4px 0 12px; margin: 0;
  font-family: inherit; font-weight: 300; font-size: 34px; letter-spacing: .12em; text-align: center;
  color: #f4f7fb; caret-color: var(--blue); font-variant-numeric: tabular-nums; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.acc::placeholder { color: var(--faint); letter-spacing: .28em; }
.acc:disabled, .acc[readonly] { color: var(--silver); opacity: 1; -webkit-text-fill-color: var(--silver); }
.acc[readonly] { cursor: pointer; caret-color: transparent; }
.field .ul { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.field .ul::after {
  content: ""; position: absolute; left: 50%; top: 0; height: 100%; width: 0; translate: -50% 0;
  background: var(--blue); transition: width .9s var(--ease), background .4s ease;
}
.acc:focus ~ .ul::after, .app[data-state="checking"] .field .ul::after { width: 100%; }
.app[data-state="ok"] .field .ul::after { width: 100%; background: var(--blue); }
.app[data-state="bad"] .field .ul::after { width: 100%; background: var(--stop); }
.app[data-state="wait"] .field .ul::after { width: 100%; background: var(--dim); }
.field .cap { position: absolute; left: 0; right: 0; top: calc(100% + 10px); text-align: center; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }

/* Prüfzeilen */
.checks { list-style: none; margin: 38px 0 0; padding: 0; width: 100%; max-width: 250px; display: flex; flex-direction: column; gap: 13px; }
.checks li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 300; color: var(--dim);
  opacity: 0; translate: 0 8px; transition: opacity .7s var(--ease), translate .7s var(--ease), color .4s ease;
}
.checks li .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; transition: background .4s ease, box-shadow .6s ease; }
.checks li .st { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.checks li[data-s] { opacity: 1; translate: 0 0; }
.checks li[data-s="run"] .dot { background: var(--blue); animation: pulse 1.1s ease-in-out infinite; }
.checks li[data-s="wait"] .dot { background: var(--dim); }
.checks li[data-s="ok"] { color: var(--silver); }
.checks li[data-s="ok"] .dot { background: var(--blue); box-shadow: 0 0 12px rgba(56,189,248,.7); }
.checks li[data-s="ok"] .st { color: var(--blue); }
.checks li[data-s="bad"] { color: #f1d3d3; }
.checks li[data-s="bad"] .dot { background: var(--stop); box-shadow: 0 0 12px rgba(255,138,138,.55); }
.checks li[data-s="bad"] .st { color: var(--stop); }
@keyframes pulse { 0%,100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .7; } }

/* Konto-Übersicht nach Erfolg */
.overview { list-style: none; margin: 34px 0 0; padding: 0; width: 100%; max-width: 250px; display: none; flex-direction: column; }
.overview li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; opacity: 0; translate: 0 8px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.overview li:first-child { border-top: 1px solid var(--line-2); }
.overview li span:first-child { font-weight: 300; color: var(--dim); }
.overview li span:last-child { font-weight: 400; color: var(--silver); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.overview li .vip { color: var(--blue); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.app[data-view="overview"] .checks { display: none; }
.app[data-view="overview"] .overview { display: flex; }
.app[data-view="overview"] .overview li { opacity: 1; translate: 0 0; }
.app[data-view="overview"] .overview li:nth-child(1) { transition-delay: .05s; }
.app[data-view="overview"] .overview li:nth-child(2) { transition-delay: .15s; }
.app[data-view="overview"] .overview li:nth-child(3) { transition-delay: .25s; }
.app[data-view="overview"] .overview li:nth-child(4) { transition-delay: .35s; }

/* Urteil */
.verdict { margin-top: auto; text-align: center; min-height: 34px; padding-top: 10px; }
.verdict p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--silver); opacity: 0; translate: 0 6px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.verdict p.on { opacity: 1; translate: 0 0; }
.verdict p b { font-weight: 500; color: #fff; }
.app[data-state="bad"] .verdict p b { color: var(--stop); }
.app[data-view="overview"] .verdict { display: none; }
.app[data-view="overview"][data-mode="member"] .verdict { display: block; margin-top: 22px; min-height: 0; padding-top: 0; max-width: 300px; }
.app[data-view="overview"][data-mode="member"] .verdict p { font-size: 12.5px; color: var(--dim); }

/* Kleine Textlinks unter dem Urteil */
/* align-items: center ist wichtig -- ohne das streckt Flexbox die Textlinks auf
   die Hoehe des Entkoppeln-Knopfes, und ihr Unterstrich haengt in der Luft. */
/* 25.09.2026: dezenter Hinweis in der Wechsel-Anleitung (bis zu 24 h). */
.sec .note24 { margin-top: 8px; font-size: 12px; color: var(--dim); opacity: .85; }
/* 25.09.2026: Der Weg zum IB-Wechsel nach einer Absage -- ein echter Knopf. */
.ctabtn { display: block; margin: 14px 0 0; padding: 13px 16px; border-radius: 14px; text-align: center; text-decoration: none;
  font-size: 14px; font-weight: 500; color: #fff; background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.5);
  transition: background .3s ease, border-color .3s ease, scale .2s ease; }
.ctabtn:hover, .ctabtn:focus-visible { background: rgba(56,189,248,.24); border-color: var(--blue); outline: none; }
.ctabtn:active { scale: .985; }
.ctabtn[hidden] { display: none; }
.links { margin: 10px 0 0; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; }
.links:empty { display: none; }
.links a { font-size: 12px; font-weight: 400; color: var(--dim); text-decoration: none; border-bottom: 1px solid rgba(139,148,163,.35); padding: 2px 0; transition: color .3s ease, border-color .3s ease; }
.links a:hover, .links a:focus-visible { color: var(--silver); border-color: var(--silver); outline: none; }
/* Eigene Zeile fuer den Entkoppeln-Knopf. Ohne sichtbares Kind hat der
   Absatz Hoehe 0 und keinen Aussenabstand -- er faellt also nicht auf. */
.links.aktion { margin: 0; }
.links.aktion a.ghost { margin-top: 16px; }
/* Der Knopf braucht nach unten Luft, sonst klebt die Fusszeile an ihm. */
.links.aktion + .fine { margin-top: 20px; }

/* Entkoppeln: kleiner, leiser Knopf statt Textlink */
.links a.ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 400; color: var(--dim); text-decoration: none;
  background: rgba(227,232,239,.04); transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.links a.ghost::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--stop); opacity: .7; }
.links a.ghost:hover, .links a.ghost:focus-visible { color: var(--silver); border-color: rgba(227,232,239,.35); background: rgba(227,232,239,.07); outline: none; }
.app[data-view="overview"] .links { margin-top: 18px; }

.fine { margin: 12px 0 0; text-align: center; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1; }
.fine a { color: var(--faint); text-decoration: none; padding: 6px 4px; cursor: pointer; transition: color .3s ease; }
.fine a:hover, .fine a:focus-visible { color: var(--silver); outline: none; }

/* --------------------------------------------------------------------
   Zweiter Bildschirm (AGB & Datenschutz, IB-Anleitung)
   -------------------------------------------------------------------- */
.sheet {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  padding: max(22px, env(safe-area-inset-top)) 30px calc(118px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6,8,12,.42), rgba(6,8,12,.7));
  opacity: 0; translate: 0 24px; pointer-events: none;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
.app[data-sheet="1"] .sheet { opacity: 1; translate: 0 0; pointer-events: auto; }
.sheet .top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.sheet .back { background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 400; color: var(--dim); letter-spacing: .02em; display: flex; align-items: center; gap: 6px; transition: color .3s ease; }
.sheet .back:hover, .sheet .back:focus-visible { color: var(--silver); outline: none; }
.sheet .back svg { width: 12px; height: 12px; }
.sheet .top .mark-s { width: 26px; height: 26px; opacity: .85; background: var(--mark) center / contain no-repeat; }
.app[data-tg="1"] .sheet .back { visibility: hidden; } /* in Telegram übernimmt der BackButton */
.sheet .page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sheet h2 { margin: 26px 0 0; font-weight: 200; font-size: 30px; line-height: 1.05; letter-spacing: -.015em; color: #f2f5f9; flex: 0 0 auto; }
.sheet h2 b { font-weight: 400; }
.sheet .sub { margin: 10px 0 0; font-size: 12.5px; font-weight: 300; color: var(--dim); line-height: 1.5; flex: 0 0 auto; }
.sheet .scroll { flex: 1 1 auto; overflow-y: auto; margin: 22px -30px 0; padding: 0 30px 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
.sheet .scroll::-webkit-scrollbar { display: none; }
.sheet .sec + .sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.sheet .eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.sheet .eyebrow i { font-style: normal; color: var(--faint); letter-spacing: .1em; }
.sheet p { margin: 0 0 11px; font-size: 12.5px; font-weight: 300; line-height: 1.62; color: var(--dim); }
.sheet p b { font-weight: 500; color: var(--silver); }
.sheet p:last-child { margin-bottom: 0; }
.sheet .foot { flex: 0 0 auto; padding-top: 12px; font-size: 10.5px; font-weight: 300; color: var(--faint); text-align: center; letter-spacing: .04em; }
.sheet .sec { opacity: 0; translate: 0 10px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.app[data-sheet="1"] .sheet .sec { opacity: 1; translate: 0 0; }
.app[data-sheet="1"] .sheet .sec:nth-child(1) { transition-delay: .25s; }
.app[data-sheet="1"] .sheet .sec:nth-child(2) { transition-delay: .35s; }
.app[data-sheet="1"] .sheet .sec:nth-child(3) { transition-delay: .45s; }
.app[data-sheet="1"] .sheet .sec:nth-child(4) { transition-delay: .55s; }

/* --------------------------------------------------------------------
   Der Knopf: Glas, schwebt frei über den Kugeln (statt Telegrams MainButton)
   -------------------------------------------------------------------- */
.mainbtn {
  position: absolute; z-index: 5;
  left: 24px; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom));
  height: 54px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(227,232,239,.10);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 14px 34px -10px rgba(0,0,0,.6);
  color: #f2f5f9; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
  transition: background .5s ease, border-color .5s ease, color .5s ease, opacity .4s ease, scale .25s var(--ease), box-shadow .5s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.mainbtn::before { /* Lichtkante oben, wie auf Glas */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
}
.mainbtn:active { scale: .985; }
.mainbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mainbtn .spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(242,245,249,.25); border-top-color: #f2f5f9; animation: spin .8s linear infinite; }
.app[data-state="checking"] .mainbtn { opacity: .8; pointer-events: none; }
.app[data-state="checking"] .mainbtn .spin { display: block; }
.app[data-state="ok"] .mainbtn {
  background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.42); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 14px 34px -10px rgba(0,0,0,.6), 0 0 28px -6px rgba(56,189,248,.45);
}
@keyframes spin { to { rotate: 360deg; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mainbtn { background: rgba(30,36,46,.82); }
}

/* --------------------------------------------------------------------
   Einblendung beim Öffnen
   -------------------------------------------------------------------- */
.app[data-intro="1"] .orb    { animation: bloom 2.2s var(--ease) both; }
.app[data-intro="1"] .crest  { animation: rise 1.1s var(--ease) .15s both; }
.app[data-intro="1"] .hello  { animation: rise 1.1s var(--ease) .35s both; }
.app[data-intro="1"] .field  { animation: rise 1.1s var(--ease) .55s both; }
.app[data-intro="1"] .mainbtn{ animation: rise 1.1s var(--ease) .75s both; }
@keyframes rise  { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes bloom { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.app[data-shake="1"] .field { animation: shake .5s ease; }
@keyframes shake { 0%,100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* Sehr kleine Bildschirme: etwas kompakter */
@media (max-height: 700px) {
  .crest .mark { width: 56px; height: 56px; }
  .hello { margin-top: 22px; }
  .hello h1 { font-size: 30px; }
  .field { margin-top: 24px; }
  .checks, .overview { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb i, .grain, .crest::before, .checks li[data-s="run"] .dot, .mainbtn .spin,
  .app[data-intro="1"] .orb, .app[data-intro="1"] .crest, .app[data-intro="1"] .hello,
  .app[data-intro="1"] .field, .app[data-intro="1"] .mainbtn, .app[data-shake="1"] .field { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Diagnose-Pill (5x Logo tippen) */
#dbg { position: absolute; z-index: 6; left: 24px; right: 24px; bottom: calc(84px + env(safe-area-inset-bottom)); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6,8,12,.82); color: var(--dim); font: 400 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; word-break: break-word; }

/* --------------------------------------------------------------------
   Positionsgrößen-Rechner (dritte Seite im zweiten Bildschirm)
   Gleiche Glas-Optik, gleiche Abstände, gleiche Farben wie der Rest.
   -------------------------------------------------------------------- */
.sheet .calc-balance {
  margin: 0; font-size: 27px; font-weight: 300; line-height: 1.1;
  color: #f2f5f9; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.sheet .calc-balance[data-leer="1"] { font-size: 15px; color: var(--stop); }
.sheet .calc-note { margin: 7px 0 0; font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--faint); }

/* Die drei Risiko-Schaltflächen */
.calc-chips { display: flex; gap: 8px; }
.calc-chips button {
  flex: 1 1 0; padding: 13px 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 13px;
  background: rgba(227,232,239,.045);
  font-family: inherit; font-size: 14px; font-weight: 400; color: var(--dim);
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, scale .2s var(--ease);
}
.calc-chips button:active { scale: .97; }
.calc-chips button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.calc-chips button[aria-pressed="true"] {
  color: #fff; border-color: rgba(56,189,248,.42); background: rgba(56,189,248,.14);
  box-shadow: 0 0 26px -10px rgba(56,189,248,.8);
}

/* Eingabezeilen: Beschriftung links, Wert rechts — wie die Konto-Übersicht */
.calc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2); position: relative;
  transition: border-color .3s ease;
}
.calc-row:first-of-type { border-top: 1px solid var(--line-2); }
.calc-row > span { flex: 0 0 auto; font-size: 12.5px; font-weight: 300; color: var(--dim); }
.calc-row select,
.calc-row input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; margin: 0;
  font-family: inherit; font-size: 15px; font-weight: 400; color: var(--silver);
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.calc-row input::placeholder { color: var(--faint); letter-spacing: 0; }
.calc-row select option { background: #0d1118; color: var(--silver); }
.calc-row:focus-within { border-bottom-color: rgba(56,189,248,.45); }
/* Eigenes Pfeilchen, weil das Systemdreieck mit appearance:none verschwindet */
.calc-row.sel select { padding-right: 16px; }
.calc-row.sel::after {
  content: ""; position: absolute; right: 2px; top: 50%; margin-top: -5px;
  width: 6px; height: 6px; rotate: 45deg; pointer-events: none;
  border-right: 1px solid var(--dim); border-bottom: 1px solid var(--dim);
}

/* Das Ergebnis: groß und ruhig */
.calc-lot { display: flex; align-items: baseline; justify-content: center; gap: 11px; margin: 2px 0 20px; }
.calc-lot b {
  font-size: 46px; font-weight: 200; line-height: 1; color: #f4f7fb;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.calc-lot span { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.calc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.calc-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px;
}
.calc-list li:first-child { border-top: 1px solid var(--line-2); }
.calc-list li span:first-child { font-weight: 300; color: var(--dim); }
.calc-list li span:last-child { font-weight: 400; color: var(--silver); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.calc-list li .plus  { color: var(--blue); }
.calc-list li .minus { color: var(--stop); }
.calc-out[data-leer="1"] { opacity: .38; }

.sheet .calc-msg { margin: 16px 0 0; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--dim); }
.sheet .calc-msg[data-art="warn"] { color: #f1d3d3; }
.sheet .calc-fine { margin: 24px 0 0; font-size: 10.5px; font-weight: 300; line-height: 1.6; color: var(--faint); text-align: center; }

@media (max-height: 700px) {
  .calc-lot b { font-size: 38px; }
  .sheet .calc-balance { font-size: 23px; }
}

/* 12.09.2026: Unter dem Glas-Knopf verblasst der Inhalt. In Telegram Desktop greift
   der Weichzeichner nicht -- Links und Fusszeile standen sichtbar hinter dem Knopf. */
.app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  height: calc(112px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(6,8,12,0) 0%, rgba(6,8,12,.92) 42%, var(--void) 70%); }

/* 29.09.2026: 24-Stunden-Hinweis unter Absagen -- dezent, eigene Zeile */
.verdict .n24 { display: block; margin-top: 8px; font-size: 12px; color: var(--dim); opacity: .9; }