:root{
  /* Rot / Schwarz / Weiß */
  --bg1:#0b0b0d; --bg2:#141418; --card:rgba(20,20,24,.82); --ink:#f4f4f6; --muted:#a0a0aa;
  --line:#2c2c33; --accent:#e11d2a; --accent-soft:#2a1015;
  --ok:#22c55e; --ok-soft:#0f2a1a; --bad:#ef3b46; --bad-soft:#2a1114;
  --chip:#1b1b20; --shadow:0 18px 48px rgba(0,0,0,.6);
  --red:#e11d2a; --red-bright:#ff2d3f; --topbar-h:56px; --side-w:240px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:#0a0a0c;
  min-height:100vh; line-height:1.5;
}

/* ---- Hintergrund: interaktives Sternennetz (Canvas) ---- */
.bg{position:fixed; inset:0; z-index:-1; display:block; width:100%; height:100%; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 0%, #140a0d 0%, #0b0b0d 55%, #08080a 100%), #0a0a0c;}
.wrap{max-width:900px; margin:0 auto; padding:22px 16px 60px}
@media (max-width:900px){ .wrap{padding-top:calc(var(--topbar-h) + 18px)} }
header h1{font-size:1.35rem; margin:.2rem 0 .1rem; display:flex; gap:.5rem; align-items:center}
header p.sub{margin:.1rem 0 1rem; color:var(--muted); font-size:.9rem}
.controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px; box-shadow:var(--shadow); margin-bottom:14px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.controls label, .controls .lbl{font-size:.78rem; color:var(--muted); display:block; margin-bottom:3px}
select,.seg button{font:inherit}
select{
  padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg2); color:var(--ink); min-width:190px;
}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{
  border:0; padding:8px 12px; background:var(--bg2); color:var(--muted); cursor:pointer;
}
.seg button.active{background:var(--accent); color:#fff}
.btn{
  border:0; border-radius:10px; padding:9px 14px; font-weight:600; cursor:pointer;
  background:var(--accent-soft); color:var(--accent);
}
.btn:hover{filter:brightness(1.15)}
.btn:focus-visible, select:focus-visible, .seg button:focus-visible, .half:focus-visible{outline:2px solid var(--red-bright); outline-offset:2px}
.btn:disabled{opacity:.55; cursor:default; filter:none}
.grow{flex:1}
.statline{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:.85rem; color:var(--muted); margin:2px 2px 12px}
.statline b{color:var(--ink)}
.pill{background:var(--chip); border-radius:999px; padding:3px 10px}
.pill.ok{color:var(--ok)} .pill.bad{color:var(--bad)}
.progress{height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin:6px 2px 16px}
.progress > i{display:block; height:100%; background:var(--accent); width:0; transition:width .25s}

/* ---- Startbildschirm: Vollbild-Split (zwei Modi nebeneinander) ---- */
.home{position:fixed; inset:0 0 0 var(--side-w); z-index:40}
@media (max-width:900px){ .home{inset:var(--topbar-h) 0 0 0} }
.home:not([hidden]){display:flex}
.half{position:relative; flex:1; overflow:hidden; cursor:pointer; font:inherit; color:var(--ink); border:0;
  background:rgba(10,10,12,.34); display:flex; align-items:center; justify-content:center; padding:40px 26px; text-align:center;
  transition:background .35s ease, box-shadow .35s ease;}
.home .half:not(:last-child){border-right:1px solid rgba(225,29,42,.40)}
.half::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(225,29,42,.20), transparent 60%); opacity:0; transition:opacity .35s}
.half:hover, .half:focus-visible{background:rgba(22,9,12,.50); outline:none; box-shadow:inset 0 0 160px rgba(225,29,42,.20)}
.half:hover::before, .half:focus-visible::before{opacity:1}
.half-inner{pointer-events:none; position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:380px; transition:transform .35s ease}
.half:hover .half-inner, .half:focus-visible .half-inner{transform:scale(1.06)}
.half-icon{font-size:3.6rem; line-height:1; filter:drop-shadow(0 10px 28px rgba(225,29,42,.6))}
.half-title{font-size:1.85rem; font-weight:800; letter-spacing:.03em}
.half-desc{color:var(--muted); font-size:1rem; line-height:1.5}
.half .go{margin-top:8px; font-weight:700; color:var(--red); letter-spacing:.08em; font-size:1.05rem}
@media (max-width:760px){ .home:not([hidden]){flex-direction:column} .home .half:not(:last-child){border-right:0; border-bottom:1px solid rgba(225,29,42,.40)} .half-title{font-size:1.5rem} .half-icon{font-size:3rem} }

.lernq{flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:14px 0}

/* ---- Editor: Eigene Karten ---- */
.creator-form{background:var(--card); border:1px solid var(--line); border-top:2px solid var(--red); border-radius:16px; padding:18px; box-shadow:var(--shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; flex-direction:column}
.creator-form label{font-size:.82rem; color:var(--muted); margin:12px 2px 4px}
.creator-form label .opt{font-weight:400; opacity:.8}
.creator-form input, .creator-form textarea{width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit}
.creator-form input:focus, .creator-form textarea:focus{outline:2px solid var(--accent); border-color:transparent}
.creator-form textarea{resize:vertical}
.creator-actions{display:flex; align-items:center; gap:12px; margin-top:16px}
.creator-msg{font-size:.85rem; font-weight:600}
.creator-msg.ok{color:var(--ok)} .creator-msg.bad{color:var(--bad)}
.creator-list{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.creator-listhead{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:2px}
.creator-empty{color:var(--muted); font-size:.9rem; text-align:center; padding:18px; border:1px dashed var(--line); border-radius:12px}
.creator-card{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.cc-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.cc-cat{font-size:.7rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.03em}
.cc-q{font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cc-del{flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:.9rem}
.cc-del:hover{color:var(--bad); border-color:var(--bad)}

.scene{perspective:1400px}
.card{
  background:var(--card); border:1px solid var(--line); border-top:2px solid var(--red); border-radius:20px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(225,29,42,.10); padding:24px; min-height:340px;
  transform-style:preserve-3d; transition:transform .19s ease; will-change:transform;
  display:flex; flex-direction:column;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:999px; letter-spacing:.02em;
}
.qnum{color:var(--muted); font-size:.72rem; font-weight:600}
.rowtop{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px}
.frage{font-size:1.28rem; font-weight:700; margin:2px 0 16px}
.sidelayout{display:flex; gap:18px; align-items:stretch}
.sidelayout .ql{flex:1}
.sidelayout .al{flex:1; border-left:1px dashed var(--line); padding-left:18px}
@media (max-width:620px){ .sidelayout{flex-direction:column} .sidelayout .al{border-left:0; border-top:1px dashed var(--line); padding-left:0; padding-top:14px} }
textarea{
  width:100%; min-height:120px; resize:vertical; padding:12px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit;
}
textarea:focus{outline:2px solid var(--accent); border-color:transparent}
.hint{color:var(--muted); font-size:.8rem; margin:8px 2px 0}
.actions{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top:18px}
.btn-primary{background:var(--accent); color:#fff; padding:11px 18px; font-size:1rem}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}

/* back side */
.verdict{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.mark{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; flex:0 0 auto}
.mark.ok{background:var(--ok-soft); color:var(--ok)}
.mark.bad{background:var(--bad-soft); color:var(--bad)}
.verdict .vt{font-weight:800; font-size:1.15rem}
.verdict .vs{color:var(--muted); font-size:.85rem}
.kwwrap{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 4px}
.kw{font-size:.82rem; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--bg2)}
.kw.hit{background:var(--ok-soft); color:var(--ok); border-color:transparent; font-weight:600}
.kw.hit::before{content:"✓ "}
.answer{margin-top:14px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.answer h4{margin:0 0 8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.answer ul{margin:0; padding-left:20px}
.answer li{margin:3px 0}
.answer .formel{margin-top:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--accent-soft); color:var(--accent); padding:6px 10px; border-radius:8px; display:inline-block; font-size:.9rem}
.yourans{margin-top:12px; font-size:.85rem; color:var(--muted)}
.yourans b{color:var(--ink); font-weight:600}
.recnote{margin-top:12px; font-size:.78rem; color:var(--muted); background:var(--chip); border-radius:10px; padding:8px 11px}
footer{margin-top:22px; text-align:center; color:var(--muted); font-size:.76rem}
footer .copyblock{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
footer .copy{font-size:.9rem; font-weight:700; letter-spacing:.06em; color:var(--ink)}
footer .copy .brand{color:var(--red); text-shadow:0 0 18px rgba(225,29,42,.45)}
footer .copy.sub{margin-top:4px; font-size:.8rem; font-weight:600; color:var(--muted)}
kbd{background:var(--chip); border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; font-size:.78rem}

/* ---- Allgemein ---- */
[hidden]{display:none !important}
.noscript{padding:40px; text-align:center}
.ctl-title{font-size:1.05rem}
.muted{color:var(--muted)}

/* ---- Anmeldung ---- */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.auth-card{width:100%; max-width:380px; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-top:2px solid var(--red); border-radius:20px; padding:26px 24px 22px; box-shadow:var(--shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.auth-brand{font-size:1.4rem; font-weight:800; text-align:center; margin-bottom:18px}
.auth-brand span{color:var(--red)}
.auth-tabs{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:11px; overflow:hidden; margin-bottom:8px}
.auth-tabs button{font:inherit; border:0; padding:9px; background:var(--bg2); color:var(--muted); cursor:pointer; font-weight:600}
.auth-tabs button[aria-selected="true"]{background:var(--accent); color:#fff}
.auth-card label{font-size:.82rem; color:var(--muted); margin:12px 2px 4px}
.auth-card input{width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit}
.auth-card input:focus{outline:2px solid var(--accent); border-color:transparent}
.auth-hint{margin:6px 2px 0; font-size:.78rem; color:var(--muted)}
.auth-err{min-height:1.3em; margin:10px 2px 0; font-size:.85rem; color:var(--bad); font-weight:600}
.auth-submit{margin-top:6px; width:100%}
.auth-foot{margin:14px 0 0; font-size:.78rem; color:var(--muted); text-align:center}

/* ---- Seitenmenü ---- */
body.in-app{padding-left:var(--side-w)}
.sidebar{position:fixed; top:0; bottom:0; left:0; width:var(--side-w); z-index:80; display:flex; flex-direction:column;
  padding:18px 12px 14px; background:rgba(12,12,15,.92); border-right:1px solid rgba(225,29,42,.30);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); overflow-y:auto}
.sb-brand{font-weight:800; font-size:1.1rem; padding:2px 10px 16px}
.sb-brand b, .mb-brand b{color:var(--red)}
.sb-nav{display:flex; flex-direction:column; gap:2px; flex:1}
.sb-head{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:14px 10px 6px; opacity:.8}
.sb-item{display:flex; align-items:center; gap:10px; width:100%; font:inherit; font-size:.93rem; text-align:left; color:var(--ink);
  background:transparent; border:0; border-radius:10px; padding:9px 10px; cursor:pointer; position:relative}
.sb-item .ic{width:22px; text-align:center; flex:0 0 auto}
.sb-item:hover{background:rgba(255,255,255,.05)}
.sb-item:focus-visible{outline:2px solid var(--red-bright); outline-offset:-2px}
.sb-item[aria-current="page"]{background:var(--accent-soft); color:#fff; font-weight:600}
.sb-item[aria-current="page"]::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--red)}
.sb-badge{margin-left:auto; font-size:.72rem; font-weight:700; min-width:22px; text-align:center; padding:1px 7px; border-radius:999px; background:var(--chip); color:var(--muted)}
.sb-badge.hot{background:var(--red); color:#fff}
.sb-user{display:flex; align-items:center; gap:10px; padding:12px 10px; margin-top:12px; border-top:1px solid var(--line)}
.sb-avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font-weight:800;
  background:var(--accent-soft); color:var(--red-bright); border:1px solid rgba(225,29,42,.45); text-transform:uppercase}
.sb-who{display:flex; flex-direction:column; min-width:0}
.sb-who b, .sb-who small{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-who small{color:var(--muted); font-size:.75rem}
.sb-logout{color:var(--muted)}
.sb-logout:hover{color:var(--bad)}

/* Handy: Menü als ausklappbare Leiste */
.mobilebar{display:none}
.side-backdrop{display:none}
@media (max-width:900px){
  body.in-app{padding-left:0}
  .mobilebar:not([hidden]){display:flex; position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:70; align-items:center; gap:12px;
    padding:0 12px; background:rgba(11,11,13,.86); border-bottom:1px solid rgba(225,29,42,.35);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
  .mb-brand{font-weight:800}
  .burger{width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:var(--bg2); cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px}
  .burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px}
  .sidebar{transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow)}
  body.menu-open .sidebar{transform:none}
  body.menu-open .side-backdrop:not([hidden]){display:block; position:fixed; inset:0; z-index:75; background:rgba(0,0,0,.55)}
}

/* ---- Karten-Extras ---- */
.boxpill{font-size:.7rem; color:var(--muted); background:var(--chip); border-radius:999px; padding:3px 9px; white-space:nowrap}
.boxpill i{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--line); margin-left:2px}
.boxpill i.on{background:var(--ok)}
.rowtop .meta{display:flex; gap:8px; align-items:center}
.btn-ok{background:var(--ok-soft); color:var(--ok); padding:11px 18px; font-size:1rem}
.btn-bad{background:var(--bad-soft); color:var(--bad); padding:11px 18px; font-size:1rem}
.done{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px}
.done .big{font-size:3rem}

/* ---- Dashboard ---- */
.dash-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); margin-bottom:14px}
.panel h2{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px}
@media (max-width:700px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.tile{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.tile .v{font-size:1.7rem; font-weight:800; line-height:1.15}
.tile .v small{font-size:.95rem; color:var(--muted); font-weight:600}
.tile .l{font-size:.8rem; color:var(--muted)}
.tile.accent{border-top:2px solid var(--red)}
.review{display:flex; flex-wrap:wrap; gap:14px; align-items:center; border-top:2px solid var(--red)}
.review .rv-num{font-size:2.2rem; font-weight:800; color:var(--red-bright); line-height:1}
.review .rv-txt{flex:1; min-width:180px}
.review .rv-txt b{display:block; font-size:1.05rem}
.review .rv-btns{display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--muted); margin-bottom:10px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.c-master{background:var(--ok)} .c-work{background:#f59e0b} .c-new{background:var(--line)}
.catrow{display:grid; grid-template-columns:minmax(120px,190px) 1fr auto; gap:12px; align-items:center; padding:7px 0; border-top:1px solid rgba(44,44,51,.6)}
.catrow:first-of-type{border-top:0}
.catrow .cn{font-size:.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:none; border:0; color:var(--ink); font-family:inherit; text-align:left; cursor:pointer; padding:0}
.catrow .cn:hover{color:var(--red-bright)}
.stack{display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--line)}
.stack > span{display:block; height:100%}
.catrow .cs{font-size:.78rem; color:var(--muted); white-space:nowrap; text-align:right; min-width:92px}
@media (max-width:560px){ .catrow{grid-template-columns:1fr auto} .catrow .stack{grid-column:1 / -1; order:3} }
.chart{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:6px}
.chart .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; min-width:0}
.chart .bar{width:100%; max-width:30px; border-radius:6px 6px 2px 2px; background:var(--line); display:flex; flex-direction:column-reverse; overflow:hidden; min-height:2px}
.chart .bar .ok{background:var(--ok)} .chart .bar .bad{background:var(--bad)}
.chart .d{font-size:.66rem; color:var(--muted)}
.chart .col.today .d{color:var(--ink); font-weight:700}
.weak{display:flex; flex-direction:column; gap:6px}
.weak-item{display:flex; gap:10px; align-items:center; background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:9px 12px}
.weak-item .wq{flex:1; min-width:0; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.weak-item .wc{font-size:.7rem; font-weight:700; color:var(--accent); text-transform:uppercase}
.weak-item .wr{font-size:.78rem; color:var(--bad); white-space:nowrap}
.empty{color:var(--muted); font-size:.9rem; text-align:center; padding:14px; border:1px dashed var(--line); border-radius:12px}
.dash-foot{display:flex; justify-content:flex-end}

/* ---- Toast ---- */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90; background:#1b1b20; border:1px solid var(--line);
  border-left:3px solid var(--red); padding:10px 16px; border-radius:12px; box-shadow:var(--shadow); font-size:.9rem; max-width:calc(100% - 32px)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }
.auth-ok{min-height:0; margin:6px 2px 0; font-size:.85rem; color:var(--ok); font-weight:600}
.auth-ok:empty{display:none}
.auth-pending{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:6px 0 2px}
.auth-pending .ap-icon{font-size:2.6rem}
.auth-pending b{font-size:1.15rem}
.auth-pending p{margin:2px 0; font-size:.9rem}
.auth-pending #aPendMail{color:var(--ink); font-weight:700; word-break:break-all}
.auth-pending .btn{width:100%; margin-top:6px}

/* ---- Eigene Kategorien & Import ---- */
.cat-add{display:flex; gap:8px}
.cat-add input, .imp-row input{flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit}
.cat-add input:focus, .imp-row input:focus{outline:2px solid var(--accent); border-color:transparent}
.cat-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.cat-chip{display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 12px; font-size:.88rem}
.cat-chip .n{color:var(--muted); font-size:.78rem}
.cat-chip button{border:0; background:transparent; color:var(--muted); width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:.8rem}
.cat-chip button:hover{color:var(--bad); background:var(--bad-soft)}
.cat-chips .empty{width:100%; padding:10px}
.imp-row{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.imp-row label{font-size:.78rem; color:var(--muted); display:block; margin-bottom:3px}
.imp-row > div{display:flex; flex-direction:column}
#impNewWrap{flex:1; min-width:180px}
.import-panel .hint{margin-top:10px}
.form-h{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 2px}
@media (min-width:901px){ body.in-app .toast{left:calc(50% + var(--side-w)/2)} }

/* ---- Anmeldung: Passwort vergessen / zurücksetzen ---- */
.auth-title{font-size:1.15rem; margin:4px 0 0; text-align:center}
.auth-lead{font-size:.88rem; color:var(--muted); text-align:center; margin:6px 0 4px}
.lblrow{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.linkbtn{font:inherit; font-size:.8rem; color:var(--red-bright); background:none; border:0; padding:6px 2px; cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.auth-back{align-self:center; margin-top:10px; font-size:.88rem; color:var(--muted)}
.pw{position:relative}
.pw input{padding-right:48px}
.pw-toggle{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:8px;
  background:transparent; cursor:pointer; font-size:1rem; opacity:.55}
.pw-toggle.on, .pw-toggle:hover{opacity:1}

/* =========================================================================
   Mobile-Optimierung
   ========================================================================= */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
button, select, input, textarea, .half{touch-action:manipulation}
body.menu-open{overflow:hidden}
.auth{min-height:100vh; min-height:100dvh; padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:max(24px, env(safe-area-inset-bottom))}
.btn .short{display:none}
.ctl-toggle{display:none}

/* Touch-Geräte: kein „hängender“ Hover-Effekt, größere Tippflächen, keine Tastatur-Tipps */
@media (hover:none){
  .half:hover{background:rgba(10,10,12,.34); box-shadow:none}
  .half:hover::before{opacity:0}
  .half:hover .half-inner{transform:none}
  .half:active{background:rgba(22,9,12,.55)}
  .btn:hover{filter:none}
  .btn:active, .sb-item:active{filter:brightness(1.25)}
  .kbd-tip{display:none}
}
@media (pointer:coarse){
  .btn, select, .seg button{min-height:44px}
  .sb-item{min-height:46px}
  .cc-del{width:40px; height:40px}
  .cat-chip button{width:34px; height:34px}
  .linkbtn{padding:10px 4px}
}

@media (max-width:900px){
  .mobilebar:not([hidden]){height:calc(var(--topbar-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
    padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right))}
  .sidebar{width:min(280px, 84vw); padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .home{inset:calc(var(--topbar-h) + env(safe-area-inset-top)) 0 0 0}
  .wrap{padding-top:calc(var(--topbar-h) + env(safe-area-inset-top) + 14px)}
  /* Unschärfe-Effekte kosten auf Handys viel Leistung – dort deckende Flächen */
  .card, .controls, .panel, .tile, .creator-form, .creator-card, .auth-card{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(20,20,24,.95)}
}

@media (max-width:640px){
  .wrap{padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right));
    padding-bottom:calc(32px + env(safe-area-inset-bottom))}
  .wrap > header{display:none}

  /* Lern-/Übungsbereich: Einstellungen einklappbar, damit die Karte sofort sichtbar ist */
  .ctl-toggle{display:flex; align-items:center; gap:10px; width:100%; min-height:46px; margin-bottom:10px; padding:10px 14px;
    font:inherit; font-size:.92rem; color:var(--ink); text-align:left; cursor:pointer;
    background:rgba(20,20,24,.95); border:1px solid var(--line); border-radius:12px}
  .ctl-toggle .ct-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ctl-toggle .ct-arrow{color:var(--muted); transition:transform .2s}
  .ctl-toggle[aria-expanded="true"] .ct-arrow{transform:rotate(180deg)}
  #study .controls{display:none}
  #study .controls.open{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px}
  #study .controls > *{min-width:0}
  #study .controls select{min-width:0; width:100%}
  #backHome, #backHome2, #study .controls .grow{display:none}
  #strictWrap{grid-column:1 / -1}
  .seg{display:flex} .seg button{flex:1}
  #shuffle{grid-column:1 / -1}

  .statline{gap:6px; margin:0 0 8px; font-size:.8rem; flex-wrap:nowrap}
  .statline .pill{white-space:nowrap}
  .btn-sm .long{display:none} .btn-sm .short{display:inline}
  #reset{padding:6px 12px; min-width:44px}
  .progress{margin:4px 0 12px}

  .card{padding:16px; min-height:0; border-radius:16px}
  .rowtop{flex-wrap:wrap; margin-bottom:10px}
  .boxpill i{display:none}
  .frage{font-size:1.12rem; margin-bottom:12px}
  .lernq{padding:6px 0 4px}
  .answer{padding:12px 14px}
  textarea{min-height:100px}
  .actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:14px}
  .actions .grow{display:none}
  .actions .btn{width:100%; padding:12px 8px; font-size:.95rem}
  .actions .btn:only-child{grid-column:1 / -1}
  .verdict .vt{font-size:1.05rem}

  /* Eigene Karten */
  #creator .controls{padding:10px 12px}
  .creator-form{padding:14px}
  .imp-row > div{flex:1 1 100%}
  #cImport{width:100%}
  .cat-add .btn{white-space:nowrap}

  /* Fortschritt */
  .tiles{gap:8px}
  .tile{padding:12px}
  .tile .v{font-size:1.4rem}
  .panel{padding:14px}
  .review{gap:10px}
  .review .rv-num{font-size:1.8rem}
  .review .rv-btns .btn{flex:1 1 calc(50% - 8px)}
  .chart{gap:3px; height:100px}
  .chart .d{font-size:.6rem}
  .dash-head{display:none}

  .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
  footer{font-size:.72rem}
}

/* Startseite am Handy: kompakte Karten statt drei hoher Flächen */
@media (max-width:760px){
  .home{overflow-y:auto; -webkit-overflow-scrolling:touch}
  .half{flex:1 0 auto; padding:18px max(20px, env(safe-area-inset-left)); justify-content:flex-start; text-align:left; min-height:120px}
  .half-inner{display:grid; grid-template-columns:52px 1fr; column-gap:16px; row-gap:2px; align-items:center; max-width:none; text-align:left; width:100%}
  .half-icon{grid-row:1 / span 3; font-size:2.4rem; text-align:center}
  .half-title{font-size:1.2rem}
  .half-desc{font-size:.86rem; line-height:1.4}
  .half .go{margin-top:2px; font-size:.85rem}
}
@media (max-width:380px){
  .actions .btn{font-size:.88rem; padding:12px 6px; white-space:nowrap}
  .ctl-toggle, .statline{font-size:.78rem}
}

/* ---- Karten aus Dokument ---- */
.dropzone{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 16px; text-align:center; cursor:pointer;
  border:2px dashed var(--line); border-radius:14px; background:var(--bg2); transition:border-color .2s, background .2s}
.dropzone:hover, .dropzone.drag{border-color:var(--red); background:var(--accent-soft)}
.dropzone.has-file{border-style:solid; border-color:rgba(225,29,42,.6)}
.dropzone input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.dropzone:focus-within{outline:2px solid var(--red-bright); outline-offset:2px}
.dz-icon{font-size:1.8rem}
.dz-main{font-weight:700; word-break:break-word}
.dz-sub{font-size:.78rem; color:var(--muted)}
.doc-opts{margin-top:12px}
.doc-opts > div{flex:1; min-width:200px}
.doc-opts select{width:100%}
.doc-status{margin:10px 2px 0; font-size:.88rem; font-weight:600}
.doc-status.ok{color:var(--ok)} .doc-status.bad{color:var(--bad)} .doc-status.busy{color:var(--ink)}
.doc-review{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.dr-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.dr-all{display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; cursor:pointer}
.dr-all input, .dr-check input{width:20px; height:20px; accent-color:var(--red)}
.dr-warn{font-size:.82rem; color:#f59e0b; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:10px; padding:8px 11px; margin-bottom:10px}
.dr-list{display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto; padding-right:2px}
.dr-card{display:flex; gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.dr-card.off{opacity:.45}
.dr-check{padding-top:4px; cursor:pointer}
.dr-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.dr-how{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.dr-q, .dr-a{width:100%; font:inherit; color:var(--ink); background:transparent; border:1px solid transparent; border-radius:8px; padding:6px 8px}
.dr-q{font-weight:700}
.dr-a{min-height:0; resize:vertical; font-size:.9rem; color:#d4d4da}
.dr-q:hover, .dr-a:hover{border-color:var(--line)}
.dr-q:focus, .dr-a:focus{outline:none; border-color:var(--red); background:var(--bg1)}
.dr-save{margin-top:12px}
.dr-save .imp-row > div{flex:1; min-width:180px}
.dr-save select{width:100%}
.dr-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
@media (max-width:640px){
  .dr-list{max-height:none}
  .dr-actions .btn{flex:1}
}
.dr-q{resize:none; min-height:0; line-height:1.35}
@media (max-width:640px){ .dr-q{field-sizing:content} }

/* =========================================================================
   Rechtliches: Impressum, Datenschutz, Cookies
   ========================================================================= */
.legal-page{background:radial-gradient(120% 80% at 50% 0%, #140a0d 0%, #0b0b0d 55%, #08080a 100%) fixed, #0a0a0c}
.legal-top{position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  padding:calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background:rgba(11,11,13,.92); border-bottom:1px solid rgba(225,29,42,.35)}
.legal-back{color:var(--ink); font-weight:700; text-decoration:none; padding:8px 0}
.legal-back:hover{color:var(--red-bright)}
.legal-nav{display:flex; gap:4px; flex-wrap:wrap}
.legal-nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; font-size:.9rem}
.legal-nav a:hover{color:var(--ink); background:rgba(255,255,255,.05)}
.legal-nav a[aria-current="page"]{color:#fff; background:var(--accent-soft)}
.legal{max-width:760px; margin:0 auto; padding:28px max(16px, env(safe-area-inset-left)) 40px; line-height:1.65}
.legal h1{font-size:1.8rem; margin:0 0 14px}
.legal h2{font-size:1.2rem; margin:32px 0 8px; padding-top:6px; scroll-margin-top:80px}
.legal h3{font-size:1rem; margin:20px 0 4px; color:var(--ink)}
.legal p, .legal li{color:#d4d4da}
.legal ul, .legal ol{padding-left:22px}
.legal a{color:var(--red-bright)}
.legal-lead{font-size:1.05rem}
.legal-toc{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 16px; margin:18px 0}
.legal-toc ol{margin:0; columns:2; column-gap:24px}
.legal-toc li{break-inside:avoid; margin:3px 0}
.legal-box{background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px; padding:4px 16px; margin:12px 0}
.legal-table{overflow-x:auto; margin:10px 0; border:1px solid var(--line); border-radius:12px}
.legal-table table{border-collapse:collapse; width:100%; min-width:560px; font-size:.9rem}
.legal-table th, .legal-table td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
.legal-table th{background:var(--bg2); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
.legal-table tr:last-child td{border-bottom:0}
.legal code{background:var(--chip); padding:1px 6px; border-radius:6px; font-size:.88em}
.legal-date{margin-top:32px; color:var(--muted) !important; font-size:.85rem}
.legal-foot{text-align:center; color:var(--muted); font-size:.85rem; padding:20px 16px calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.legal-foot a{color:var(--muted)}
/* Platzhalter, die vor der Veröffentlichung ausgefüllt werden müssen */
mark.todo{background:rgba(245,158,11,.18); color:#fbbf24; border:1px dashed rgba(245,158,11,.6); border-radius:5px; padding:0 4px}
@media (max-width:640px){
  .legal h1{font-size:1.5rem}
  .legal-toc ol{columns:1}
  .legal-top{justify-content:center}
}

/* Rechtliche Links in der App */
.legal-links{font-size:.8rem; color:var(--muted); text-align:center; margin:10px 0 0}
.legal-links a{color:var(--muted); text-decoration:none; padding:6px 2px; display:inline-block}
.legal-links a:hover{color:var(--ink); text-decoration:underline}
.sb-legal{margin-top:6px; font-size:.72rem}

/* Cookie-Hinweis */
.cookie-note{position:fixed; z-index:95; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(640px, calc(100% - 24px)); display:flex; align-items:center; gap:14px; padding:12px 14px;
  background:#16161a; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:14px; box-shadow:var(--shadow)}
.cookie-note p{margin:0; flex:1; font-size:.86rem; line-height:1.45}
.cookie-note a{color:var(--red-bright)}
.cookie-note .btn{flex:0 0 auto}
@media (min-width:901px){ body.in-app .cookie-note{left:calc(50% + var(--side-w)/2)} }
@media (max-width:520px){ .cookie-note{flex-direction:column; align-items:stretch} .cookie-note .btn{width:100%} }

/* Konto & Daten */
.acc-info{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0}
.acc-info dt{color:var(--muted); font-size:.85rem}
.acc-info dd{margin:0; font-weight:600; word-break:break-all}
.acc-p{margin:0 0 12px}
#accExport{display:inline-flex; align-items:center; text-decoration:none}
.acc-form{display:flex; flex-direction:column; align-items:flex-start}
.acc-form label{font-size:.82rem; color:var(--muted); margin:10px 2px 4px}
.acc-form input{width:100%; max-width:380px; padding:11px 12px; border-radius:11px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit}
.acc-form input:focus{outline:2px solid var(--accent); border-color:transparent}
.acc-form .btn{margin-top:10px}
.acc-form .creator-msg{margin:8px 2px 0}
.acc-form .creator-msg:empty{display:none}
.acc-danger{border-color:rgba(239,59,70,.4)}
.acc-danger h2{color:var(--bad)}
@media (max-width:640px){ .acc-form input, .acc-form .btn{max-width:none; width:100%} }
.legal-top{background:#0b0b0d}
@media (max-width:640px){
  .legal-table{border:0; overflow:visible}
  .legal-table table{min-width:0}
  .legal-table thead{display:none}
  .legal-table tr{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 0; margin-bottom:10px}
  .legal-table td{display:grid; grid-template-columns:110px 1fr; gap:10px; border:0; padding:6px 14px}
  .legal-table td::before{content:attr(data-label); color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding-top:2px}
}
.legal-table td > code{justify-self:start}

/* ---- Leeres Konto ---- */
.welcome{text-align:center; border-top:2px solid var(--red); padding:26px 20px}
.welcome .big{font-size:3rem}
.welcome h2{font-size:1.3rem; text-transform:none; letter-spacing:0; color:var(--ink); margin:6px 0}
.welcome p{color:var(--muted); max-width:520px; margin:0 auto 16px}
.wl-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 18px; text-align:left}
.wl-steps div{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:4px}
.wl-steps span{font-size:.82rem; color:var(--muted)}
@media (max-width:640px){ .wl-steps{grid-template-columns:1fr} .welcome .btn{width:100%} }

/* ---- Eigene Karten: nach Kategorie aufklappbar ---- */
.cc-group{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.cc-group summary{display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; list-style:none; min-height:48px}
.cc-group summary::-webkit-details-marker{display:none}
.cc-group summary::before{content:"▸"; color:var(--red); transition:transform .2s; flex:0 0 auto}
.cc-group[open] summary::before{transform:rotate(90deg)}
.cc-group summary:hover{background:rgba(255,255,255,.03)}
.cc-group summary:focus-visible{outline:2px solid var(--red-bright); outline-offset:-2px}
.cg-name{flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cg-n{font-size:.78rem; color:var(--muted); background:var(--chip); border-radius:999px; padding:2px 9px; white-space:nowrap}
.cg-cards{display:flex; flex-direction:column; gap:6px; padding:0 10px 10px}
.cg-cards .creator-card{background:var(--bg2)}

/* =========================================================================
   Eigene Karten: Übersicht + Assistent
   ========================================================================= */
#ovMsg:empty{display:none}
#ovMsg{margin:0 2px 10px}
.creator-empty p{margin:0 0 12px}
.cg-tools{display:flex; gap:8px; flex-wrap:wrap; padding:0 10px 10px}
.btn-sm{padding:6px 12px; font-size:.85rem}
@media (pointer:coarse){ .btn-sm{min-height:40px} }

/* Kopf mit Schritten */
.wiz-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.wiz-steps{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; flex:1; min-width:240px}
.wiz-steps li{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; font-weight:600}
.wiz-steps li + li::before{content:""; width:28px; height:2px; background:var(--line); border-radius:2px}
.ws-n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; border:2px solid var(--line); background:var(--bg2)}
.wiz-steps li.is-active{color:var(--ink)}
.wiz-steps li.is-active .ws-n{border-color:var(--red); background:var(--red); color:#fff}
.wiz-steps li.is-done .ws-n{border-color:var(--ok); color:var(--ok)}
.wiz-steps li.is-done .ws-n::after{content:"✓"} .wiz-steps li.is-done .ws-n{font-size:0} .wiz-steps li.is-done .ws-n::after{font-size:.8rem}

/* Schritt 1 */
#cStep1 .lbl{display:block; font-size:.82rem; color:var(--muted); margin:4px 2px 8px}
.cat-pick{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px}
.cp-item{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:56px}
.cp-item:hover{border-color:rgba(225,29,42,.5)}
.cp-item[aria-checked="true"]{border-color:var(--red); background:var(--accent-soft); box-shadow:0 0 0 1px var(--red) inset}
.cp-item:focus-visible{outline:2px solid var(--red-bright); outline-offset:2px}
.cp-name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.cp-n{font-size:.78rem; color:var(--muted)}
.or{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.8rem; margin:16px 0 6px}
.or::before, .or::after{content:""; flex:1; height:1px; background:var(--line)}
.wiz-input{width:100%; padding:12px; border-radius:11px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); font:inherit}
.wiz-input:focus{outline:2px solid var(--accent); border-color:transparent}
#step1Msg:empty{display:none}
#step1Msg{margin:8px 2px 0}
.wiz-actions{display:flex; justify-content:flex-end; margin-top:16px}

/* Schritt 2 */
.wiz-cat{display:flex; align-items:center; gap:10px; padding:12px 16px}
.wiz-cat b{font-size:1.05rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wiz-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px}
.wiz-tabs button{font:inherit; font-size:.9rem; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 8px; cursor:pointer; min-height:48px}
.wiz-tabs button:hover{color:var(--ink)}
.wiz-tabs button[aria-selected="true"]{color:#fff; background:var(--accent-soft); border-color:var(--red)}
.wiz-pane{margin-bottom:14px}
.wiz-list{margin-top:16px; display:flex; flex-direction:column; gap:6px}
.wiz-list:empty{display:none}
.wl-item{font-size:.88rem; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wl-more{font-size:.8rem; color:var(--muted); padding:0 4px}
.check-row{display:flex; align-items:flex-start; gap:10px; font-size:.9rem; margin:0 0 14px; cursor:pointer}
.check-row input{width:20px; height:20px; accent-color:var(--red); flex:0 0 auto; margin-top:1px}
#impMsg:empty{display:none}
.wiz-done{display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; padding:6px 0 4px}
#wizAdded{color:var(--ok); font-weight:600; font-size:.9rem}
@media (max-width:640px){
  .wiz-head{gap:10px}
  .wiz-head #wizCancel{order:2}
  .wiz-steps{min-width:0; width:100%}
  .wiz-steps .ws-t{font-size:.82rem}
  .wiz-tabs{grid-template-columns:1fr}
  .wiz-tabs button{text-align:left; padding:12px 14px}
  .cat-pick{grid-template-columns:1fr 1fr}
  .wiz-actions .btn, .wiz-done .btn{width:100%}
  .wiz-done{flex-direction:column; align-items:stretch; text-align:center}
}
@media (max-width:640px){
  .wiz-head{flex-direction:column; align-items:stretch}
  .wiz-head #wizCancel{order:0; align-self:flex-start}
  .wiz-steps li{white-space:nowrap}
}
@media (max-width:640px){
  .wiz-tabs{grid-template-columns:repeat(3,1fr)}
  .wiz-tabs button{text-align:center; font-size:.8rem; padding:10px 6px; line-height:1.3}
}