/* FORMA NERA · App v1 – Ergänzungen zu base.css (Stil C Editorial) */
html,body{background:var(--cr)}
#app{height:100dvh;padding-top:env(safe-area-inset-top)}
nav{grid-template-columns:repeat(4,1fr)}
.cover{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--e),visibility .7s;background:#fff}
.cover.off{opacity:0;visibility:hidden;pointer-events:none}
.cover>div{display:none;flex-direction:column;align-items:center;gap:18px;padding:24px}
html[data-theme=m] .cv-m{display:flex}
html[data-theme=w] .cover{background:radial-gradient(ellipse 70% 55% at 50% 42%,#FFFBF1 0%,#F6F2EB 55%,#E6DCCB 100%)}
html[data-theme=w] .cv-w{display:flex}
.cv-fig{width:min(78vw,330px);height:auto;animation:figrise 1.6s var(--e) both}
@keyframes figrise{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}to{opacity:1;transform:none}}
.cv-word{font-size:13px;letter-spacing:9px;font-weight:500;color:var(--ink);animation:fadein 1s .7s both}
.cv-line{font-family:var(--ser);font-size:26px;animation:fadein 1s 1.1s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* allgemeine Bausteine */
.card{background:#fff;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px}
.mut{color:var(--gr);font-size:13px;line-height:1.5}
.small{font-size:12px;color:var(--gr)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);font-size:11px;letter-spacing:1.2px;background:#fff}
.chip.on{background:var(--bx);color:#fff;border-color:var(--bx)}
.lnk{font-size:11px;letter-spacing:2px;font-weight:500;min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.lnk.u span{border-bottom:1px solid var(--ink);padding-bottom:2px}
input.in,textarea.in,select.in{width:100%;height:48px;border:1px solid var(--line);background:#fff;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);border-radius:0;-webkit-appearance:none}
textarea.in{height:84px;padding:12px 14px;resize:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.grid5 button,.dots button{height:48px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:300}
.grid5 button.on,.dots button.on{background:var(--bx);color:#fff;border-color:var(--bx)}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.dots button{height:40px;font-size:13px}
.big{font-family:var(--ser);font-weight:300;font-size:64px;line-height:.9;letter-spacing:-.02em}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--sand);gap:12px}
.kv b{font-weight:400}
.chk{display:flex;text-align:left;width:100%;gap:12px;align-items:flex-start;padding:12px 0;font-size:14px;line-height:1.45;cursor:pointer}
.chk i{flex:0 0 24px;height:24px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px}
.chk.on i{background:var(--bx);border-color:var(--bx);color:#fff}
.video{display:grid;grid-template-columns:96px 1fr;border:1px solid var(--line);background:#fff;min-height:72px;text-align:left;width:100%}
.video .ph{background:var(--cr);display:flex;align-items:center;justify-content:center}
.video .ph svg{width:16px;height:16px;fill:var(--bx)}
.video .tx{padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.vslot{aspect-ratio:4/5;width:100%;background:var(--cr);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative}
.vslot img{width:86%;margin-bottom:-4%;opacity:.95}
.vslot .badge{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:2px;background:#fff;padding:6px 8px}
.wu-ph{font-size:10.5px;letter-spacing:2.2px;color:var(--gt);font-weight:600}
.wu-list{display:flex;flex-direction:column}
.wu-list div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--sand);font-size:13px}
.wu-list div.d{color:var(--gr);text-decoration:line-through}
.wu-list div.c{font-weight:600}
.timer{font-weight:200;font-size:72px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.adj{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nova{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff}
.nova.n1{background:#4E7A4B}.nova.n2{background:#8C8C3C}.nova.n3{background:#B07A3B}.nova.n4{background:#9B3B32}
.scan{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden}
.scan video{width:100%;height:100%;object-fit:cover}
.scan .aim{position:absolute;left:12%;right:12%;top:42%;height:16%;border:1.5px solid rgba(255,255,255,.85)}
.ring{display:flex;gap:18px}
.ring>div{flex:1}
.empty{padding:28px 0;text-align:center;color:var(--gr);font-size:13px}
.sheet .p{max-height:88dvh;overflow-y:auto}
.mode-end{display:flex;flex-direction:column;gap:16px}
.offline{position:fixed;top:calc(env(safe-area-inset-top) + 6px);right:10px;z-index:70;font-size:9.5px;letter-spacing:1.6px;background:var(--sand);padding:4px 8px;display:none}
.offline.on{display:block}
.rest{display:flex}
.login{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:32px 28px;background:#fff}


.row{gap:12px}
button.kv.lnk{text-align:left;width:100%}
/* Overlays: geschlossen wirklich weg (kein Durchscheinen beim Tippen in Felder) */
#app{overflow:clip}
#mode:not(.open){visibility:hidden;transition:transform .42s var(--e),visibility 0s linear .42s}
#mode.open{visibility:visible}
.rest:not(.open){visibility:hidden;transition:transform .45s var(--e),visibility 0s linear .45s}
.rest.open{visibility:visible}