/* ============================================================
   Bitwarden-Umzug — Anleitung
   Reines CSS, keine externen Abhängigkeiten.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  color-scheme: light dark;

  --bw:        #175DDC;
  --bw-dark:   #1148a8;
  --bw-soft:   #e8effc;

  --bg:        #f2f5fa;
  --card:      #ffffff;
  --text:      #131a2b;
  --muted:     #5a6478;
  --line:      #dde2ec;

  --warn-bg:   #fff8e6;
  --warn-line: #e8c164;
  --warn-text: #6a4a06;
  --danger:    #c62828;
  --ok:        #1c7c4a;

  --radius:    16px;
  --shadow:    0 1px 2px rgba(16,24,40,.05), 0 10px 30px rgba(16,24,40,.06);

  /* Tokens für die nachgebauten App-Oberflächen */
  --ui-bg:     #f5f6f8;
  --ui-card:   #ffffff;
  --ui-fg:     #1b2233;
  --ui-muted:  #78808f;
  --ui-line:   #e3e6ec;
  --ui-blue:   #175DDC;
  --ui-danger: #c62828;
  --ui-frame:  #23272f;
}

@media (prefers-color-scheme: dark){
  :root{
    --bw:        #6f9dff;
    --bw-dark:   #4a7fe6;
    --bw-soft:   #16233d;

    --bg:        #0e1220;
    --card:      #161c2c;
    --text:      #e8ecf5;
    --muted:     #a0a9bd;
    --line:      #2a3245;

    --warn-bg:   #2a2412;
    --warn-line: #7d6420;
    --warn-text: #f4d98a;
    --danger:    #ff8b83;
    --ok:        #6ddb9f;

    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);

    --ui-bg:     #14181f;
    --ui-card:   #1c222c;
    --ui-fg:     #e7ebf2;
    --ui-muted:  #8e97a6;
    --ui-line:   #2b323d;
    --ui-blue:   #6f9dff;
    --ui-danger: #ff8b83;
    --ui-frame:  #000000;
  }
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}

/* Icon-Sammlung am Seitenanfang: nimmt keinen Platz ein.
   Als Klasse und nicht als style-Attribut, damit die Content-Security-Policy
   ohne 'unsafe-inline' für Styles auskommt. */
.sprite{position:absolute; width:0; height:0; overflow:hidden}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x:hidden;
}

h1,h2,h3,h4{line-height:1.25; margin:0 0 .4em; text-wrap:balance}
h1{font-size:clamp(1.65rem, 5.2vw, 2.6rem); letter-spacing:-.02em}
h2{font-size:clamp(1.2rem, 3.4vw, 1.5rem)}
h3{font-size:1.15rem}
h4{font-size:1.05rem}
p{margin:0 0 .8em}
a{color:var(--bw); text-decoration-thickness:.08em; text-underline-offset:.15em}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92em;
  background:var(--bw-soft);
  color:inherit;
  padding:.1em .35em;
  border-radius:5px;
  word-break:break-all;
}

.wrap{max-width:1040px; margin:0 auto; padding:0 clamp(14px, 4vw, 28px)}

.h-ico{width:1.1em; height:1.1em; vertical-align:-.15em; margin-right:.25em}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 400px at 15% -10%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(160deg, #175DDC 0%, #1148a8 55%, #0d3378 100%);
  color:#fff;
  padding:clamp(26px, 6vw, 58px) 0 clamp(30px, 7vw, 62px);
}
.hero h1{color:#fff}
.brand{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:.4em .8em; border-radius:999px;
  margin:0 0 1.1em;
}
.brand__ico{width:1.1em; height:1.1em}
.lead{font-size:clamp(1rem, 2.6vw, 1.16rem); max-width:64ch; color:rgba(255,255,255,.94)}
.lead strong{color:#fff}

/* ---------- Countdown ---------- */
.countdown{
  margin-top:clamp(18px, 4vw, 28px);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:clamp(14px, 3vw, 20px);
  max-width:640px;
}
.countdown__label{margin:0 0 .7em; font-size:.98rem; color:rgba(255,255,255,.9)}
.countdown__label b{color:#fff}
.countdown__clock{display:flex; gap:clamp(6px, 2vw, 14px); flex-wrap:wrap}
.cd{
  flex:1 1 0; min-width:62px;
  background:rgba(255,255,255,.1);
  border-radius:11px;
  padding:.55em .3em;
  text-align:center;
}
.cd b{
  display:block;
  font-size:clamp(1.4rem, 5vw, 2rem);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.cd small{display:block; font-size:.72rem; opacity:.8; letter-spacing:.06em; text-transform:uppercase}
.countdown__hint{margin:.8em 0 0; font-size:.88rem; color:rgba(255,255,255,.78)}

.countdown[data-state="over"]{background:rgba(198,40,40,.5); border-color:rgba(255,255,255,.35)}
.countdown[data-state="over"] .countdown__clock{display:none}
.countdown[data-state="loading"] .countdown__clock{opacity:.5}

/* ---------- Karten ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(18px, 4vw, 30px);
  margin:0 0 clamp(20px, 4vw, 30px);
}
/* Die erste Karte schiebt sich ein Stück in den Hero-Bereich */
main > .card:first-child{
  position:relative;
  margin-top:calc(-1 * clamp(14px, 3vw, 28px));
}

/* ---------- Alt / Neu ---------- */
.urls__grid{display:grid; gap:.5em; justify-items:start}
.urls__row{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  width:100%;
}
.urls__tag{
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--line); color:var(--muted);
  padding:.25em .6em; border-radius:6px;
}
.urls__tag--new{background:var(--bw); color:#fff}
.urls__val{
  font-size:clamp(.9rem, 3.2vw, 1.2rem);
  background:transparent; padding:0;
}
.urls__val--old{color:var(--muted); text-decoration:line-through; text-decoration-thickness:.09em}
.urls__hi{
  background:linear-gradient(transparent 55%, rgba(23,93,220,.32) 55%);
  font-weight:700;
  padding:0 .05em;
  border-radius:2px;
}
.urls__arrow{color:var(--muted); font-size:1.2rem; line-height:1; padding-left:.9em}
.urls__note{margin:1em 0 0; color:var(--muted); font-size:.95rem}

.btn{
  display:inline-flex; align-items:center; gap:.45em;
  font:inherit; font-size:.9rem; font-weight:600;
  background:var(--bw); color:#fff;
  border:0; border-radius:9px;
  padding:.5em .9em;
  cursor:pointer;
}
.btn:hover{background:var(--bw-dark)}
.btn:active{transform:translateY(1px)}
.btn__ico{width:1.05em; height:1.05em}
.btn--copy.is-done{background:var(--ok)}
@media (prefers-color-scheme: dark){
  .btn{color:#0d1220}
  .btn__ico{color:#0d1220}
}

/* ---------- Vorbereitung ---------- */
.prep{
  background:var(--warn-bg);
  border-color:var(--warn-line);
  color:var(--warn-text);
}
.prep h2{color:var(--warn-text)}
.prep code{background:rgba(0,0,0,.07)}
.prep__lead{max-width:70ch}

.checklist{list-style:none; margin:1.2em 0; padding:0; display:grid; gap:1em}
.checklist li{display:flex; gap:.8em; align-items:flex-start}
.checklist__ico{
  flex:0 0 auto; width:1.5em; height:1.5em; margin-top:.15em;
  color:var(--warn-text); opacity:.75;
}
.checklist__warn{display:block; margin-top:.35em; font-size:.95rem}
.prep__cta{margin:0; padding-top:.6em; border-top:1px solid var(--warn-line)}

.placeholder{
  display:inline-block;
  font-family: ui-monospace, monospace; font-size:.85em;
  background:rgba(198,40,40,.14); color:var(--danger);
  border:1px dashed currentColor; border-radius:6px;
  padding:0 .4em;
}

/* ---------- Tabs ---------- */
.guide{margin:clamp(24px, 5vw, 40px) 0}
.guide__lead{color:var(--muted); max-width:66ch}

.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:1.2em 0 1.4em;
}
.tab{
  font:inherit; font-size:.95rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.45em;
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:999px;
  padding:.55em 1.05em;
  cursor:pointer;
}
.tab:hover{border-color:var(--bw)}
.tab[aria-selected="true"]{background:var(--bw); border-color:var(--bw); color:#fff}
.tab__emoji{font-size:1.1em}
@media (prefers-color-scheme: dark){
  .tab[aria-selected="true"]{color:#0d1220}
}
html:not(.js) .tabs{display:none}

/* ---------- Panels & Schritte ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(16px, 4vw, 28px);
  margin-bottom:clamp(20px, 4vw, 30px);
}
.panel__title{
  margin:0 0 .8em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--line);
}
html.js .panel__title{display:none}

.player{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:.6em .7em;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:1.2em;
  position:sticky; top:8px; z-index:5;
}
.player__btn{
  font:inherit; font-size:.9rem; font-weight:600;
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:9px;
  padding:.45em .8em; cursor:pointer;
}
.player__btn:hover:not(:disabled){border-color:var(--bw)}
.player__btn:disabled{opacity:.4; cursor:default}
.player__btn--primary{background:var(--bw); border-color:var(--bw); color:#fff}
.player__btn--primary:hover:not(:disabled){background:var(--bw-dark)}
.player__btn--ghost{margin-left:auto; font-weight:500; color:var(--muted)}
.player__count{font-size:.9rem; color:var(--muted); padding:0 .3em; font-variant-numeric:tabular-nums}
@media (prefers-color-scheme: dark){
  .player__btn--primary{color:#0d1220}
}

.steps{list-style:none; margin:0; padding:0; display:grid; gap:clamp(24px, 5vw, 40px)}
.steps.is-player{gap:0}
.steps.is-player > .step:not(.is-active){display:none}

.step{
  display:grid; gap:clamp(14px, 3vw, 26px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:860px){
  .step{grid-template-columns:minmax(0,1fr) auto}
}
.step__body{display:flex; gap:.8em; align-items:flex-start}
.step__num{
  flex:0 0 auto;
  width:1.9em; height:1.9em;
  display:grid; place-items:center;
  background:var(--bw); color:#fff;
  border-radius:50%;
  font-weight:700; font-size:1rem;
  margin-top:.05em;
}
@media (prefers-color-scheme: dark){ .step__num{color:#0d1220} }
.step__copy{min-width:0}
.step__copy p{max-width:56ch}
.step__copy p:last-child{margin-bottom:0}
.step__alt{
  font-size:.93rem; color:var(--muted);
  border-left:3px solid var(--line);
  padding-left:.8em;
}
.step__url{
  margin:.6em 0;
  padding:.6em .8em;
  background:var(--bw-soft);
  border-radius:10px;
  font-size:1.02rem;
}
.step__url code{background:transparent; padding:0}

.step__fig{margin:0; display:grid; justify-items:center; gap:.7em}
.step__fig figcaption{
  font-size:.85rem; color:var(--muted); text-align:center; max-width:26ch;
}

/* ---------- Fertig-Häkchen ---------- */
.done{margin-top:clamp(20px, 4vw, 32px); padding-top:1em; border-top:1px solid var(--line)}
.done label{display:inline-flex; align-items:center; gap:.6em; cursor:pointer; font-weight:600}
.done input{width:1.25em; height:1.25em; accent-color:var(--bw)}
.done label:has(input:checked) span{color:var(--ok)}

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:.6em;
  background:var(--bg);
}
.faq summary{
  cursor:pointer; padding:.75em 1em;
  font-weight:600;
  list-style:none;
  display:flex; gap:.6em; align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--bw); font-weight:700; font-size:1.15em; line-height:1}
.faq details[open] summary::before{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq__b{padding:.9em 1em 1em}
.faq__b > :last-child{margin-bottom:0}
.faq__b ul{margin:.3em 0 .8em; padding-left:1.3em}
.faq__b li{margin-bottom:.2em}

/* ---------- Footer ---------- */
.foot{
  margin:clamp(28px, 6vw, 48px) 0 clamp(24px, 5vw, 40px);
  padding-top:1.2em;
  border-top:1px solid var(--line);
  color:var(--muted);
}
.foot__small{font-size:.85rem}

/* ============================================================
   Nachgebaute App-Oberflächen
   ============================================================ */

.device{
  position:relative;
  flex:0 0 auto;
  color:var(--ui-fg);
  font-size:11px; line-height:1.4;
  -webkit-user-select:none; user-select:none;
}
.device b{font-weight:650}

/* --- Handy --- */
.device--phone{
  width:252px;
  background:var(--ui-frame);
  border-radius:30px;
  padding:9px 7px;
  box-shadow:0 10px 30px rgba(16,24,40,.22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.phone__notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:56px; height:5px; border-radius:99px;
  background:rgba(255,255,255,.25);
  z-index:3;
}
.device--phone .screen{
  height:452px;
  border-radius:23px;
}
.device--ios .screen{border-radius:26px}

.screen{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--ui-bg);
  overflow:hidden;
}

/* --- Browser-Erweiterung --- */
.device--ext{width:290px}
.device--ext .ext__bar{
  display:flex; align-items:center; gap:6px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:10px 10px 0 0;
  padding:6px 8px;
  /* Platz für den Tipp-Punkt, der über dem Symbol in der Leiste pulst */
  margin-top:12px;
}
.ext__tab{
  font-size:9.5px; color:var(--ui-muted);
  background:var(--ui-bg); border-radius:5px; padding:2px 6px;
}
.ext__addr{
  flex:1; min-width:0;
  font-size:9.5px; color:var(--ui-muted);
  background:var(--ui-bg);
  border-radius:99px; padding:3px 8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ext__ico{
  flex:0 0 auto; width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:5px; font-size:11px;
  position:relative;
}
.ext__ico--bw{color:var(--ui-blue)}
.ext__ico--bw svg{width:15px; height:15px}
.device--ext .ext__popup{
  display:flex; flex-direction:column;
  height:330px;
  background:var(--ui-bg);
  border:1px solid var(--ui-line);
  border-top:0;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  position:relative;
  box-shadow:0 10px 26px rgba(16,24,40,.16);
}

/* --- Desktop-Fenster --- */
.device--win{width:min(430px, 100%)}
.win__bar{
  display:flex; align-items:center;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:10px 10px 0 0;
  padding:6px 10px;
}
.win__title{font-size:10px; font-weight:650}
.win__dots{margin-left:auto; display:flex; gap:5px}
.win__dots i{width:8px; height:8px; border-radius:50%; background:var(--ui-line)}
.win__menu{
  display:flex; gap:2px;
  background:var(--ui-card);
  border-left:1px solid var(--ui-line);
  border-right:1px solid var(--ui-line);
  border-bottom:1px solid var(--ui-line);
  padding:3px 6px;
  font-size:10px; color:var(--ui-muted);
}
.win__menu span{position:relative; padding:2px 6px; border-radius:4px}
.win__body{
  display:flex;
  height:250px;
  background:var(--ui-bg);
  border:1px solid var(--ui-line);
  border-top:0;
  border-radius:0 0 10px 10px;
  overflow:hidden;
  position:relative;
}
.win__side{
  width:52%;
  border-right:1px solid var(--ui-line);
  padding:7px;
  display:flex; flex-direction:column; gap:5px;
  background:var(--ui-card);
}
.win__main{flex:1; display:grid; place-items:center; opacity:.5}
.win__body--login{display:grid; place-items:center; padding:14px}
.win__login{width:210px; position:relative; display:flex; flex-direction:column; gap:8px}
.win__h{font-size:11px}
.win__dropdown{
  position:absolute; top:0; left:6px; z-index:4;  /* sitzt unter „Datei" */
  width:130px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:8px;
  box-shadow:0 12px 26px rgba(16,24,40,.24);
  padding:4px;
  animation:fadeDown .4s ease both .5s;
}
/* Untermenü hinter „Abmelden": dort wird das Konto ausgewählt */
.win__submenu{
  position:absolute; top:60px; left:calc(100% - 6px);
  width:134px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:8px;
  box-shadow:0 12px 26px rgba(16,24,40,.24);
  padding:4px;
  animation:fadeDown .4s ease both 1.05s;
}
/* „Zugriff auf" als kleine Zeile am unteren Fensterrand */
.win__env{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:4px;
  padding:5px 10px;
  background:var(--ui-card);
  border-top:1px solid var(--ui-line);
  font-size:9px; color:var(--ui-muted);
}
.win__env > span:not(.tap){
  display:flex; align-items:center; gap:3px;
  color:var(--ui-fg); font-weight:650;
}
.win__env .ui-caret{width:9px; height:9px}
.win__env.hl{border-radius:0; outline-offset:-2px}

/* --- Bausteine der App-Oberfläche --- */
.ui-status{
  display:flex; justify-content:space-between;
  padding:7px 12px 3px;
  font-size:9px; color:var(--ui-muted);
}
.ui-appbar{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--ui-bg);
  border-bottom:1px solid var(--ui-line);
}
.ui-appbar b{font-size:13px}
.ui-appbar--plain{justify-content:center}
.ui-appbar--plain b{font-size:11.5px}
.ui-avatar{
  position:relative;
  margin-left:auto;
  width:20px; height:20px; border-radius:50%;
  background:var(--ui-blue); color:#fff;
  display:grid; place-items:center;
  font-size:9.5px; font-weight:700;
}
.ui-avatar.hl{border-radius:50%}   /* rund bleiben, trotz .hl */
@media (prefers-color-scheme: dark){ .ui-avatar{color:#0d1220} }

.ui-search{
  margin:8px 10px;
  padding:6px 9px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:8px;
  color:var(--ui-muted);
  font-size:10px;
}
.win__side .ui-search{margin:0 0 3px}

.ui-list{overflow:hidden; padding:0 10px; display:flex; flex-direction:column; gap:1px}
.ui-list--items{gap:5px; padding-top:2px}
.ui-item{
  display:flex; align-items:center; gap:8px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:9px;
  padding:6px 9px;
}
.ui-item b{display:block; font-size:10.5px}
.ui-item small{display:block; color:var(--ui-muted); font-size:9px}
.ui-ico{
  flex:0 0 auto;
  width:20px; height:20px; border-radius:6px;
  background:var(--bw-soft); color:var(--ui-blue);
  display:grid; place-items:center;
  font-size:10px; font-weight:700;
}
.ui-row{
  position:relative;
  display:flex; align-items:center; gap:8px;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:9px;
  padding:8px 10px;
  margin-bottom:5px;
  font-size:10.5px;
}
.ui-row > span:first-child{flex:1}
.ui-row small{color:var(--ui-muted); font-size:9.5px}
.ui-row--sub{padding:7px 10px}
.ui-row--danger{color:var(--ui-danger); font-weight:650}
.ui-row.is-muted{opacity:.45}
.ui-chev{width:11px; height:11px; color:var(--ui-muted); flex:0 0 auto}
.ui-caret{width:11px; height:11px; flex:0 0 auto; opacity:.7}

.ui-switch{
  width:26px; height:15px; border-radius:99px;
  background:var(--ui-line); position:relative; flex:0 0 auto;
}
.ui-switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:11px; height:11px; border-radius:50%; background:#fff;
}
.ui-switch.is-on{background:var(--ui-blue)}
.ui-switch.is-on::after{left:auto; right:2px}

.ui-nav{
  margin-top:auto;
  display:flex;
  background:var(--ui-card);
  border-top:1px solid var(--ui-line);
  padding:5px 2px 6px;
}
.ui-nav__i{
  position:relative;
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:8.5px; color:var(--ui-muted);
  padding:3px 1px;
  border-radius:7px;
  text-align:center;
}
.ui-nav__i svg{width:15px; height:15px}
.ui-nav__i.is-active{color:var(--ui-blue); font-weight:650}

.ui-screenpad{padding:14px 14px 0; display:flex; flex-direction:column; gap:9px}
.ui-brand{
  display:flex; align-items:center; justify-content:center; gap:5px;
  color:var(--ui-blue);
  font-size:14px; font-weight:700; letter-spacing:-.01em;
  padding:6px 0 8px;
}
.ui-brand svg{width:17px; height:17px}
.ui-brand--big{font-size:16px}
.ui-brand--big svg{width:20px; height:20px}

.ui-field, .ui-select{
  position:relative;
  display:block;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:8px;
  padding:5px 9px 6px;
}
.ui-field small, .ui-select small{
  display:block; font-size:8.5px; color:var(--ui-muted); letter-spacing:.02em;
}
.ui-field > span, .ui-select > span:not(.tap){
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  min-height:15px;
  font-size:10.5px;
  word-break:break-all;
}
.ui-field.is-dim, .ui-btn.is-dim{opacity:.45}
.ui-help{margin:-3px 0 0; padding:0 2px; font-size:8.5px; color:var(--ui-muted)}
.ui-fold{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; color:var(--ui-muted);
  border-top:1px solid var(--ui-line);
  padding-top:7px;
}
.ui-btn{
  position:relative;
  text-align:center;
  background:var(--ui-blue); color:#fff;
  border-radius:8px;
  padding:7px;
  font-size:11px; font-weight:650;
}
@media (prefers-color-scheme: dark){ .ui-btn{color:#0d1220} }

.ui-typed{font-variant-ligatures:none}
.ui-typed .caret{
  display:inline-block; width:1px; height:11px;
  background:var(--ui-blue);
  margin-left:1px;
  vertical-align:-1px;
  animation:blink 1s steps(1) infinite;
}

.ui-sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background:var(--ui-card);
  border-top:1px solid var(--ui-line);
  border-radius:14px 14px 0 0;
  padding:8px;
  box-shadow:0 -8px 26px rgba(16,24,40,.22);
  animation:sheetUp .45s cubic-bezier(.2,.8,.2,1) both .55s;
}
.ui-sheet__t{font-size:9px; color:var(--ui-muted); padding:2px 6px 6px}
.ui-sheet__o{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:7px 8px; border-radius:7px;
  font-size:10.5px;
}
.ui-sheet__o svg{width:12px; height:12px; color:var(--ui-blue)}
.ui-sheet__o.is-sel{background:var(--bw-soft); font-weight:650; color:var(--ui-blue)}
.ui-sheet__o.is-danger{color:var(--ui-danger)}
.ui-sheet__o.is-sel.is-danger{background:rgba(198,40,40,.1); color:var(--ui-danger)}
/* Auswahl der Umgebung als Leiste am unteren Fensterrand (Erweiterung) */
.ui-select--bottom{
  margin-top:auto;
  border-radius:0;
  border-width:1px 0 0 0;
  padding:7px 12px;
}
.ui-select--bottom.hl{border-radius:0; outline-offset:-2px}
/* dazugehörige Liste klappt nach oben auf */
.ui-sheet--up{
  bottom:44px; top:auto; left:8px; right:8px;
  border:1px solid var(--ui-line);
  border-radius:9px;
  box-shadow:0 -10px 26px rgba(16,24,40,.2);
  animation-name:fadeUp;
}
/* dieselbe Liste im Desktop-Fenster: schmaler, links über der Zeile */
.ui-sheet--upwin{bottom:34px; left:8px; right:auto; width:150px}

/* Konto-Menü, das am Profil-Symbol oben rechts aufklappt */
.ui-sheet--menu{
  top:36px; right:8px; left:auto; bottom:auto;
  width:152px;
  border:1px solid var(--ui-line);
  border-radius:9px;
  box-shadow:0 12px 26px rgba(16,24,40,.24);
  animation-name:fadeDown;
}
.ui-sheet__acc{
  display:flex; align-items:center; gap:6px;
  padding:5px 7px 7px;
  margin-bottom:4px;
  border-bottom:1px solid var(--ui-line);
}
.ui-sheet__acc b{display:block; font-size:10px}
.ui-sheet__acc small{display:block; font-size:8.5px; color:var(--ui-muted)}
.ui-ico--round{border-radius:50%; background:var(--ui-blue); color:#fff}
.ui-sheet__o--add{color:var(--ui-muted); font-size:10px}
@media (prefers-color-scheme: dark){ .ui-ico--round{color:#0d1220} }

.ui-dialog{
  position:absolute; left:14px; right:14px; top:50%; transform:translateY(-50%);
  z-index:5;
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:12px;
  padding:12px;
  box-shadow:0 16px 40px rgba(16,24,40,.34);
  animation:pop .4s ease both .7s;
}
.ui-dialog b{font-size:11.5px}
.ui-dialog p{margin:.3em 0 .8em; font-size:10px; color:var(--ui-muted)}
.ui-dialog__btns{display:flex; justify-content:flex-end; gap:12px; font-size:10.5px; font-weight:650}
.ui-dialog__btns span{color:var(--ui-muted)}
.ui-dialog__btns .is-primary{color:var(--ui-danger)}
.ui-dialog--ios{text-align:center}
.ui-dialog--ios .ui-dialog__btns{justify-content:center; gap:22px}

.ui-ok{
  display:flex; align-items:center; gap:5px;
  margin:7px 10px 2px;
  padding:5px 8px;
  background:rgba(28,124,74,.12);
  color:var(--ok);
  border-radius:7px;
  font-size:9px; font-weight:650;
  word-break:break-all;
}
.ui-ok svg{width:11px; height:11px; flex:0 0 auto}
.win__side .ui-ok{margin:0 0 3px}

.ui-keyboard{
  margin-top:auto;
  display:grid; grid-template-columns:repeat(10, 1fr); gap:3px;
  padding:8px 6px 10px;
  background:var(--ui-card);
  border-top:1px solid var(--ui-line);
}
.ui-keyboard i{height:15px; border-radius:3px; background:var(--ui-bg); border:1px solid var(--ui-line)}

/* ============================================================
   Hervorhebung & Animation
   ============================================================ */

.hl{
  outline:2px solid var(--ui-blue);
  outline-offset:2px;
  border-radius:9px;
  z-index:2;
}
.tap{
  position:absolute;
  right:6px; top:50%;
  width:22px; height:22px; margin-top:-11px;
  border-radius:50%;
  border:2px solid var(--ui-blue);
  background:rgba(23,93,220,.22);
  pointer-events:none;
  z-index:3;
}
/* zentriert über dem Element — ohne transform, weil die Animation transform nutzt */
.tap--top{top:-9px; right:calc(50% - 11px); margin:0}
.tap--right{right:8px}
.tap--left{right:calc(100% + 5px)}

/* Animationen laufen nur im aktiven Schritt (bzw. immer, wenn kein JS da ist) */
.step.is-active .hl,
html:not(.js) .hl{
  animation:ring 1.9s ease-out infinite;
}
.step.is-active .tap,
html:not(.js) .tap{
  animation:tap 1.9s ease-out infinite;
}
/* zweiter Klick im selben Schritt: pulst versetzt, damit die Reihenfolge
   erkennbar bleibt (erst Profil-Symbol, dann Menüeintrag) */
.step.is-active .tap--late,
html:not(.js) .tap--late{
  animation-delay:.95s;
}

@keyframes ring{
  0%, 70%, 100%{outline-color:var(--ui-blue); box-shadow:0 0 0 0 rgba(23,93,220,.36)}
  35%          {outline-color:var(--ui-blue); box-shadow:0 0 0 7px rgba(23,93,220,0)}
}
@keyframes tap{
  0%   {transform:scale(.55) translate(6px,-6px); opacity:0}
  25%  {transform:scale(1) translate(0,0);        opacity:1}
  45%  {transform:scale(.8) translate(0,0);       opacity:1}
  70%  {transform:scale(1.5) translate(0,0);      opacity:0}
  100% {transform:scale(1.5) translate(0,0);      opacity:0}
}
@keyframes sheetUp{
  from{transform:translateY(100%); opacity:.4}
  to  {transform:translateY(0);    opacity:1}
}
@keyframes fadeDown{
  from{transform:translateY(-6px); opacity:0}
  to  {transform:translateY(0);    opacity:1}
}
@keyframes fadeUp{
  from{transform:translateY(6px); opacity:0}
  to  {transform:translateY(0);   opacity:1}
}
@keyframes pop{
  from{transform:translateY(-50%) scale(.92); opacity:0}
  to  {transform:translateY(-50%) scale(1);   opacity:1}
}
@keyframes blink{50%{opacity:0}}

/* Animationen abschalten, wenn der Nutzer das so möchte */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hl{outline-width:3px}
  .tap{opacity:1 !important; transform:none !important}
}

/* Druckversion */
@media print{
  .hero{background:#fff; color:#000}
  .hero h1, .lead, .lead strong, .brand{color:#000}
  .countdown, .player, .tabs{display:none}
  .panel, .card{box-shadow:none; break-inside:avoid}
  /* Gedruckt wird die gerade gewählte Plattform, dann aber mit allen
     Schritten am Stück (aufgeklappte FAQ-Punkte kommen mit). */
  .steps.is-player > .step:not(.is-active){display:grid}
  .panel__title{display:block !important}
  .step{break-inside:avoid}
  .faq details{break-inside:avoid}
}