/* TC Office – Grund-Stile (Layout und Komponenten). Farben und Schrift: design.css */

:root{
  --canvas:#F6F7FB; --glas:rgba(255,255,255,.72); --glas-2:rgba(255,255,255,.55); --feld:rgba(255,255,255,.88);
  --rand:rgba(255,255,255,.92); --linie:rgba(28,30,60,.10);
  --tinte:#191A2B; --grau:#6C6E85; --hell:#9B9DB2;
  --gold:#C9A84C; --gold-tief:#9C7A25; --gold-blass:#FBF4E2;
  --indigo:#6366F1; --cyan:#22D3EE; --pink:#F472B6; --rot:#DC2626;
  --iris:linear-gradient(100deg,#4F46E5 0%,#6366F1 60%,#C9A84C 100%);
  --goldverlauf:linear-gradient(100deg,#B8923A 0%,#D9BD6A 55%,#C9A84C 100%);
  --schatten:0 10px 34px rgba(28,32,70,.09);
  --schatten-tief:0 16px 46px rgba(28,32,70,.14);
  --blob:.42;
  --r:20px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#0E1020; --glas:rgba(26,28,52,.68); --glas-2:rgba(30,33,60,.55); --feld:rgba(14,16,32,.7);
    --rand:rgba(255,255,255,.08); --linie:rgba(255,255,255,.11);
    --tinte:#ECEDF7; --grau:#A3A6C2; --hell:#70738F; --gold-tief:#D9BD6A; --gold-blass:rgba(201,168,76,.14); --rot:#F87171;
    --schatten:0 10px 34px rgba(0,0,0,.35); --schatten-tief:0 16px 46px rgba(0,0,0,.45); --blob:.28;
  }
}
:root[data-theme="dark"]{
  --canvas:#0E1020; --glas:rgba(26,28,52,.68); --glas-2:rgba(30,33,60,.55); --feld:rgba(14,16,32,.7);
  --rand:rgba(255,255,255,.08); --linie:rgba(255,255,255,.11);
  --tinte:#ECEDF7; --grau:#A3A6C2; --hell:#70738F; --gold-tief:#D9BD6A; --gold-blass:rgba(201,168,76,.14); --rot:#F87171;
  --schatten:0 10px 34px rgba(0,0,0,.35); --schatten-tief:0 16px 46px rgba(0,0,0,.45); --blob:.28;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--canvas);color:var(--tinte)}
body{font-family:var(--fs);font-size:16px;line-height:1.45;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--canvas)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--blob)}
.b1{width:60vw;height:60vw;background:var(--indigo);top:-18vw;left:-14vw;animation:drift1 26s ease-in-out infinite alternate}
.b2{width:52vw;height:52vw;background:var(--cyan);top:22vh;right:-20vw;animation:drift2 32s ease-in-out infinite alternate}
.b3{width:46vw;height:46vw;background:var(--pink);bottom:-14vh;left:8vw;animation:drift3 29s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-10vw,-8vh,0) scale(1.08)}}
@keyframes drift3{to{transform:translate3d(6vw,-6vh,0) scale(1.14)}}

#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  background:var(--canvas);transition:opacity .5s}
#splash .sp{position:relative;z-index:1}
#splash.weg{opacity:0;pointer-events:none}
.sp{text-align:center;padding:0 20px;width:100%}
.sp-l,.sp-r{font-weight:700;font-size:clamp(46px,14vw,92px);line-height:.98;letter-spacing:-.035em;white-space:nowrap}
.sp-l{animation:vonLinks .95s cubic-bezier(.16,.84,.24,1) both}
.sp-r{animation:vonRechts .95s .12s cubic-bezier(.16,.84,.24,1) both;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.sp-l .g{color:var(--gold)}
.sp-line{height:3px;width:min(260px,60vw);margin:22px auto 18px;border-radius:3px;background:var(--goldverlauf);transform:scaleX(0);animation:linie .6s 1.05s ease-out forwards}
.sp-by{opacity:0;animation:auf .6s 1.3s ease-out forwards;color:var(--grau);font-size:15px}
.sp-by b{display:block;color:var(--tinte);font-size:19px;margin-top:2px}
.sp-by span{display:block;font-size:13px;margin-top:6px;color:var(--hell)}
@keyframes vonLinks{from{transform:translateX(-120vw);opacity:0}to{transform:none;opacity:1}}
@keyframes vonRechts{from{transform:translateX(120vw);opacity:0}to{transform:none;opacity:1}}
@keyframes linie{to{transform:scaleX(1)}}
@keyframes auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.top{position:sticky;top:0;z-index:20;background:var(--glas);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--linie)}
.top{padding-top:env(safe-area-inset-top)}
.top-in{max-width:720px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:10px;min-height:60px}
.rund{appearance:none;width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--linie);background:var(--feld);display:grid;place-items:center;cursor:pointer;color:var(--tinte)}
.rund svg{width:20px;height:20px}
.titel{flex:1;min-width:0}
.titel h1{margin:0;font-size:18px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titel h1 .g{color:var(--gold)}
.titel p{margin:0;font-size:12.5px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fortschritt{height:3px;background:var(--linie)}
.fortschritt i{display:block;height:100%;background:var(--iris);transition:width .3s}

.wrap{max-width:720px;margin:0 auto;padding:16px 14px 8px}
.glas{background:var(--glas);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schatten);padding:16px;margin-bottom:12px}
.glas h2{margin:0 0 12px;font-size:17px;font-weight:700}
.glas h2 small{font-weight:500;color:var(--grau);font-size:13px;margin-left:6px}
.leise{color:var(--grau);font-size:13.5px;margin:0 0 12px}

.f{margin-bottom:12px;min-width:0}
.f label,.lbl{display:block;font-size:12.5px;font-weight:700;color:var(--grau);margin:0 0 5px}
.f input,.f select,.f textarea{width:100%;background:var(--feld);border:1px solid var(--linie);border-radius:12px;padding:12px;font-size:16px;font-weight:500;min-height:48px}
.f textarea{min-height:110px;resize:vertical;line-height:1.45}
.einh{position:relative}
.einh input{padding-right:46px}
.einh i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--grau);font-size:14px;pointer-events:none}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.chip{appearance:none;border:1px solid var(--linie);background:var(--glas-2);border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:500;cursor:pointer}
.chip.an{border-color:var(--indigo);color:var(--indigo);background:rgba(99,102,241,.08)}
.info-chips{display:flex;flex-wrap:wrap;gap:6px}
.ic{font:500 12.5px var(--fz);background:var(--gold-blass);color:var(--gold-tief);border-radius:8px;padding:5px 9px}

.stepper{display:flex;align-items:center;gap:8px}
.stepper button{appearance:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--linie);background:var(--feld);font-size:24px;font-weight:500;cursor:pointer;line-height:1;flex:none}
.stepper output{flex:1;text-align:center;font:700 26px var(--fz);color:var(--gold-tief)}
.stepper.gross output{font-size:44px}

.btn{appearance:none;border:0;border-radius:14px;padding:14px 16px;min-height:52px;font-weight:700;font-size:16px;cursor:pointer;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--tinte)}
.btn.iris{background:var(--iris);color:#fff;box-shadow:0 8px 24px rgba(99,102,241,.28)}
.btn.gold{background:var(--goldverlauf);color:#2E2206;box-shadow:0 8px 22px rgba(201,168,76,.28)}
.btn.ghost{background:var(--feld);border:1px solid var(--linie)}
.btn.rot{background:transparent;border:1px solid var(--linie);color:var(--rot)}
.btn.klein{min-height:40px;padding:8px 12px;font-size:13.5px;border-radius:11px}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.linkbtn{appearance:none;background:none;border:0;padding:6px 0;color:var(--indigo);font-weight:700;font-size:14px;cursor:pointer}

.hero{text-align:center;padding:26px 16px 22px}
.hero .logo{font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1}
.hero .logo .g{color:var(--gold)}
.hero .logo .i{background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--grau);margin:10px 0 0;font-size:14.5px}
.menue{display:grid;gap:10px}
.mp{appearance:none;display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--glas);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schatten);padding:16px}
.mp.haupt{background:var(--iris);color:#fff;border:0;box-shadow:0 12px 32px rgba(99,102,241,.3)}
.mp .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--gold-blass);color:var(--gold-tief)}
.mp.haupt .ico{background:rgba(255,255,255,.22);color:#fff}
.mp .ico svg{width:24px;height:24px}
.mp .t{flex:1;min-width:0}
.mp b{display:block;font-size:17px}
.mp span{display:block;font-size:13px;color:var(--grau);margin-top:1px}
.mp.haupt span{color:rgba(255,255,255,.88)}
.mp .zahl{font:700 15px var(--fz);color:var(--gold-tief);background:var(--gold-blass);border-radius:9px;padding:3px 9px;margin:0}
.mp .pfeil{color:var(--hell);font-size:22px}
.mp.haupt .pfeil{color:#fff}
.signatur{text-align:center;color:var(--hell);font-size:12.5px;margin:22px 0 4px}
.signatur b{color:var(--grau)}

.gruppe{font-size:13px;font-weight:700;color:var(--grau);margin:16px 2px 8px}
.gruppe:first-child{margin-top:0}
.job{background:var(--feld);border:1px solid var(--linie);border-radius:16px;margin-bottom:8px;overflow:hidden}
.job.an{border-color:transparent;box-shadow:0 0 0 2px var(--indigo)}
.job>label{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer}
.job>label input{width:24px;height:24px;accent-color:var(--indigo);margin:0;flex:none}
.job>label b{display:block;font-size:16px}
.job>label span{display:block;font-size:12.5px;color:var(--grau)}
.jopt{padding:2px 14px 12px;border-top:1px dashed var(--linie)}
.jopt .r2{margin-top:10px}
.jopt .f{margin-bottom:8px}
.jopt .f input,.jopt .f select{min-height:44px;padding:10px;font-size:15px;background:var(--glas-2)}
.jopt .f select{font-size:14px;padding:10px 6px;text-overflow:ellipsis}
.jopt .f label{min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14.5px;cursor:pointer}
.cb input{width:20px;height:20px;accent-color:var(--indigo);margin:0;flex:none}

.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:11px 0;border-top:1px solid var(--linie)}
.mrow:first-of-type{border-top:0}
.mn{font-weight:700;line-height:1.3}
.ms{font:12px/1.45 var(--fz);color:var(--grau);margin-top:2px}
.mq{display:flex;align-items:center;gap:6px}
.mq input{width:76px;text-align:right;background:var(--feld);border:1px solid var(--linie);border-radius:10px;padding:9px 8px;font:700 16px var(--fz);color:var(--gold-tief)}
.mq input.geaendert{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.mq span{font-size:13px;color:var(--grau);min-width:58px}
.x{appearance:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--linie);background:none;color:var(--hell);cursor:pointer;font-size:18px;line-height:1;flex:none}
.mview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--linie)}
.mview:first-of-type{border-top:0}
.mview .q{text-align:right;white-space:nowrap}
.mview .q b{font:700 20px var(--fz);color:var(--gold-tief)}
.mview .q small{display:block;font-size:12px;color:var(--grau)}
.raum{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--linie)}
.raum:first-of-type{border-top:0}
.raum .rt{flex:1 1 140px;min-width:0}
.raum .rt b{overflow-wrap:anywhere}
.raum .rk{margin-left:auto}
.raum b{display:block}
.raum small{display:block;color:var(--grau);font-size:12.5px}
.raum .rk{display:flex;gap:6px;flex:none}
.raum .rk .btn{width:auto}
.leer{color:var(--grau);text-align:center;padding:22px 10px;margin:0}
.infotext{white-space:pre-wrap;margin:0}
.rw{grid-column:1/-1;background:var(--gold-blass);border-radius:10px;padding:8px 10px;font:12px/1.5 var(--fz);color:var(--tinte);margin-top:2px}
.rw div+div{margin-top:3px}
.rwkopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}
.rwkopf h2{margin:0}
.ck{display:flex;align-items:center;gap:12px;width:100%;appearance:none;border:0;border-top:1px solid var(--linie);background:none;text-align:left;padding:13px 0;cursor:pointer;color:var(--tinte)}
.leise+.ck{border-top:0}
.ck .box{width:30px;height:30px;border-radius:9px;border:2px solid var(--linie);flex:none;display:grid;place-items:center;background:var(--feld);color:#fff}
.ck.an .box{background:var(--iris);border-color:transparent}
.ck .box svg{width:18px;height:18px;opacity:0}
.ck.an .box svg{opacity:1}
.ck .t{flex:1;min-width:0}
.ck .t b{display:block;font-weight:700;line-height:1.3}
.ck.an .t b{text-decoration:line-through;color:var(--grau);font-weight:500}
.ck .m{font:700 17px var(--fz);color:var(--gold-tief);white-space:nowrap;text-align:right}
.ck .m small{display:block;font:600 12px var(--fs);color:var(--grau)}
.ck.an .m{color:var(--hell)}
.gross-zahl{font:700 30px var(--fz);color:var(--gold-tief)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--glas-2);border:1px solid var(--linie);border-radius:12px;padding:3px;margin:0 0 12px}
.seg button{appearance:none;border:0;background:none;padding:9px;border-radius:9px;font-weight:700;font-size:14px;color:var(--grau);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--iris);color:#fff}
.rgk{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:16px 0 2px;padding:9px 12px;border-radius:12px;background:var(--gold-blass)}
.rgk:first-of-type{margin-top:4px}
.rgk b{color:var(--gold-tief);font-size:15px}
.rgk small{color:var(--grau);font-size:12px}
.rgk+.mview,.rgk+.mrow,.rgk+.ck{border-top:0}
.riss{width:100%;height:auto;display:block;margin:0 auto 6px;max-width:560px}
.riss.mini .rl{font-size:22px}
.rissMini{width:96px;flex:none;background:var(--glas-2);border:1px solid var(--linie);border-radius:12px;padding:4px}
.rissMini .riss{margin:0}
@media (max-width:360px){.rissMini{width:92px}}
.riss .rl{font:600 17px var(--fz);fill:var(--grau)}
.riss .ziel{cursor:pointer}
.wandzeile{border:1px solid var(--linie);border-radius:14px;margin-bottom:8px;overflow:hidden;background:var(--feld)}
.wandzeile.an{border-color:transparent;box-shadow:0 0 0 2px var(--indigo)}
.wkopf{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:0;background:none;padding:12px 14px;cursor:pointer;color:var(--tinte)}
.wkopf b{font-size:15.5px}
.wkopf small{color:var(--grau);font:12.5px var(--fz)}
.wdetail{padding:0 14px 12px;border-top:1px dashed var(--linie)}
.wdetail .f{margin-top:10px}
.oef{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}
.oef .ot{font-weight:700;font-size:13px;color:var(--gold-tief);background:var(--gold-blass);border-radius:9px;padding:9px 10px;align-self:end;white-space:nowrap}
.oef .f{margin:0}
.oef .f label{font-size:11.5px}
.oef .f input,.oef .f select{min-height:42px;padding:8px 9px;font-size:15px}
.oef .einh input{padding-right:26px}
.oef .einh i{right:8px;font-size:12px}
.oef .x{align-self:end;height:42px;width:32px}
.oef.o3{grid-template-columns:auto 1fr 1fr 1fr auto}
@media (max-width:420px){.oef.o3{grid-template-columns:1fr 1fr 1fr auto}.oef.o3 .ot{grid-column:1/-1;justify-self:start}}
@media (max-width:360px){.oef{grid-template-columns:1fr 1fr auto}.oef .ot{grid-column:1/-1;justify-self:start}}
.wahl{margin-top:6px}
.wahl .chips{margin-top:6px}
.wahl .chip{font-size:13px;padding:6px 10px}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{padding:12px 0;border-top:1px solid var(--linie)}
.punkte li:first-child{border-top:0;padding-top:0}
.punkte b{display:block;margin-bottom:2px}
.punkte span{display:block;color:var(--grau);font-size:14px}
.lagz{grid-column:1/-1;font-size:12.5px;color:var(--gold-tief);background:var(--gold-blass);border-radius:9px;padding:6px 10px;margin-top:4px}
.lagz.ok{color:#15803D;background:rgba(21,128,61,.10)}
.preisz{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.preisz label{display:flex;align-items:center;gap:8px;min-width:0;flex:1;font-size:12.5px;color:var(--grau);font-weight:600}
.preisz input{width:90px;text-align:right;background:var(--feld);border:1px solid var(--linie);border-radius:9px;padding:7px 8px;font:600 14px var(--fz)}
.preisz b{font:700 15px var(--fz)}
.ksum{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--linie);font-size:15px}
.ksum b{font-family:var(--fz)}
.ksum.gross{font-size:18px;font-weight:800}.ksum.gross b{color:var(--gold-tief)}
.fotogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.fotok{position:relative;appearance:none;border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--glas-2);cursor:pointer}
.fotok img{width:100%;height:100%;object-fit:cover;display:block}
.fotok span{position:absolute;left:6px;bottom:6px;right:6px;font-size:11px;font-weight:700;color:#fff;background:rgba(25,26,43,.7);border-radius:7px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay{position:fixed;inset:0;z-index:90;background:var(--canvas);display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.ovkopf{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--linie)}
.ovbild{flex:1;display:grid;place-items:center;overflow:hidden;background:#000}
.ovbild img{max-width:100%;max-height:100%;object-fit:contain}
.ovfuss{display:flex;gap:10px;align-items:end;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--linie)}
.ovfuss .btn{width:auto}
.d3box{flex:1;position:relative;overflow:hidden}
.d3box canvas{display:block;touch-action:none}
#fotoIn{display:none}
.pwahl{grid-column:1/-1;margin-top:6px;min-width:0;max-width:100%}
.pwahl label{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--grau);font-weight:600}
.pwahl select{flex:1 1 auto;width:100%;max-width:100%;min-width:0;min-height:36px;padding:6px 8px;border-radius:9px;border:1px solid var(--linie);background:var(--feld);font-size:13.5px}
.lagprod{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--linie);padding:11px 0;cursor:pointer;color:var(--tinte)}
.rgk+.lagprod{border-top:0}
.lagprod .q{text-align:right}.lagprod .q b{font:700 18px var(--fz);color:var(--gold-tief)}.lagprod .q small{display:block;font-size:12px;color:var(--grau)}
.mp .ico{font-size:24px;font-weight:700}
.kamera{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3}
.scanbox{position:relative;width:100%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--linie)}
.scanbox video,.scanbox canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanbox canvas{pointer-events:none}
.scanhint{position:absolute;left:10px;right:10px;top:10px;z-index:2;background:rgba(25,26,43,.72);color:#fff;border-radius:12px;padding:10px 12px;font-size:13.5px;pointer-events:none}
.scanhint b{color:#D9BD6A}
.kamera video{width:100%;height:100%;object-fit:cover;display:block}
.kamera .rahmen{position:absolute;left:12%;right:12%;top:32%;bottom:32%;border:3px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.scinfo{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#fff;font-weight:700;font-size:14px;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.planbox{position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--glas-2);border:1px solid var(--linie)}
.planbox canvas{width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair}
.planbox .leer{position:absolute;left:0;right:0;top:45%;pointer-events:none}
#planIn{display:none}
.oder{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--hell);font-size:14px;font-weight:600}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--linie)}
.kontoleiste{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:12px 14px;border-radius:16px;background:var(--glas-2);border:1px solid var(--linie)}
.kontoleiste .linkbtn{font-weight:600;color:var(--grau);text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kontoleiste .btn{width:auto;flex:none}
.btn.schwarz{background:#000;color:#fff;border:0}
.btn.schwarz .bald{margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:3px 8px;border-radius:999px}
.btn.schwarz:active{opacity:.85}
.schritte{list-style:none;counter-reset:sx;margin:0;padding:0}
.schritte li{counter-increment:sx;position:relative;padding:10px 0 10px 46px;border-top:1px solid var(--linie)}
.schritte li:first-child{border-top:0}
.schritte li::before{content:counter(sx);position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:10px;background:var(--tinte);color:#fff;display:grid;place-items:center;font:700 15px var(--fz)}
.schritte b{display:block}
.schritte span{display:block;color:var(--grau);font-size:14px}
.stat{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:999px;vertical-align:middle;background:var(--glas-2);color:var(--grau);border:1px solid var(--linie)}
.s-anfrage{background:#EEF0FF;color:#4649B5;border-color:#DADDFF}
.s-aufmass{background:#E8F6FF;color:#0E6E96;border-color:#CFEAFB}
.s-beauftragt{background:var(--gold-blass);color:var(--gold-tief);border-color:#EADBB0}
.s-arbeit{background:#FFF1DC;color:#9A5B12;border-color:#F6DFBD}
.s-fertig{background:#E7F7EC;color:#15803D;border-color:#CDEDD7}
.s-abgerechnet{background:#EFEFF4;color:#4B4D63;border-color:#E2E2EA}
.s-ueber{background:#FDECEC;color:#B91C1C;border-color:#F8D0D0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.kpi{background:var(--glas);border:1px solid var(--linie);border-radius:16px;padding:10px 12px;min-width:0}
.kpi small{display:block;font-size:11.5px;font-weight:700;color:var(--grau);text-transform:uppercase;letter-spacing:.04em}
.kpi b{display:block;font:700 16px var(--fz);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.rot b{color:var(--rot)}.kpi.gruen b{color:#15803D}
.aktgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aktgrid .btn{min-height:50px;font-size:14.5px}
.restatus{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.onl{max-width:640px;margin-left:auto;margin-right:auto}
.onllogo{display:block;max-height:56px;max-width:200px;object-fit:contain;margin:0 0 12px}
.onlkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.onlkopf b{display:block;font-size:18px}.onlkopf small{display:block;color:var(--grau);font-size:12.5px;margin-top:2px}
.zahlbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.zahlbox img{width:150px;height:150px;border-radius:10px;background:#fff;padding:6px;image-rendering:pixelated}
.stempel{text-align:center}
.stempel.laeuft{box-shadow:0 0 0 2px var(--gold)}
.stempel .uhr{font:700 46px var(--fz);margin:6px 0 12px;color:var(--tinte)}
.monatwahl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.monatwahl .btn{width:48px}
@media (max-width:380px){.kpis{grid-template-columns:1fr 1fr}.kpi b{font-size:14.5px}}
.farbchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.fchip{width:36px;height:36px;border-radius:50%;border:2px solid var(--glas);box-shadow:0 0 0 1px var(--linie);cursor:pointer;padding:0;position:relative;display:grid;place-items:center;font-weight:800;color:var(--grau);background:var(--glas-2)}
.fchip.an{box-shadow:0 0 0 3px var(--indigo)}
.fchip.eigen input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
h3.mini{font-size:14px;margin:16px 0 6px}h3.mini small{font-weight:500;color:var(--grau)}
.logobox{display:grid;place-items:center;min-height:80px;border:1px dashed var(--linie);border-radius:14px;background:#fff;margin:0 0 10px;padding:10px}
.logobox img{max-width:100%;max-height:90px;object-fit:contain}
.pdfmuster{margin-top:16px;background:#fff;border:1px solid var(--linie);border-radius:10px;padding:14px;max-width:320px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.pm-kopf{display:flex;align-items:center;gap:8px;color:#191A2B;font-size:12px}.pm-kopf img{max-height:24px;max-width:70px;object-fit:contain}.pm-kopf i{margin-left:auto;font-style:normal;font-weight:800;font-size:14px}
.pm-linie{height:3px;margin:8px 0 10px;border-radius:2px}.pm-tab{height:9px;border-radius:2px;margin-bottom:6px}
.pm-z{height:6px;background:#EEE;border-radius:2px;margin:5px 0}.pm-sum{margin:10px 0 0 55%;border-top:2px solid;height:8px}
.balken{height:10px;border-radius:999px;background:var(--linie);overflow:hidden;margin-top:12px}
.balken i{display:block;height:100%;background:var(--iris);transition:width .3s}
.belegz{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--linie)}
.belegz:first-child{border-top:0}
.belegz input,.belegz select{min-width:0;padding:7px 8px;font-size:13px;border-radius:8px;border:1px solid var(--linie);background:var(--feld)}
.belegz [data-blmenge]{width:44px}
.belegz [data-blpreis]{width:56px}
.belegz select{width:60px}
@media (max-width:360px){.belegz{grid-template-columns:auto 1fr;grid-template-rows:auto auto}.belegz label{grid-row:1}.belegz [data-blname]{grid-column:2;grid-row:1}.belegz .f:not(:first-of-type){grid-column:1/-1}}
.abschnitt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hell);margin:22px 4px 8px}
.menue+.abschnitt{margin-top:24px}
.ladebox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:50vh;padding:30px 20px}
.spinner{width:54px;height:54px;border-radius:50%;border:5px solid var(--linie);border-top-color:var(--indigo);animation:dreh .9s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.ladetext{font-weight:700;font-size:18px;margin:0;text-align:center}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.5s}}
.ak{background:var(--glas);border:1px solid var(--linie);border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:var(--schatten);padding:0}
.ak>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;flex-direction:column;gap:2px;position:relative}
.ak>summary::-webkit-details-marker{display:none}
.ak>summary::after{content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(90deg);font-size:22px;color:var(--hell);transition:transform .18s}
.ak[open]>summary::after{transform:translateY(-50%) rotate(-90deg)}
.ak>summary b{font-size:17px;letter-spacing:-.01em}
.ak>summary span{font-size:13.5px;color:var(--grau)}
.akin{padding:0 18px 18px;border-top:1px solid var(--linie);padding-top:14px}
.akin>h2:first-child{margin-top:0}
.rate{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--linie)}
.rate:first-of-type{border-top:0}
.rate b{display:block;font-size:14.5px}
.rate small{display:block;color:var(--grau);font-size:12px;line-height:1.35}
.rate .einh input{min-height:42px;padding:8px 44px 8px 10px;font:700 15px var(--fz);text-align:right}
.rate .einh i{font-size:11px}
.rate input.geaendert{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

.liste-karte .kopf{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.liste-karte b{font-size:17px}
.liste-karte .meta{font:12.5px var(--fz);color:var(--grau);margin-top:3px}
.liste-karte .datum{font-size:12.5px;color:var(--hell);white-space:nowrap}
.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.k4 .btn{min-height:54px;padding:6px 4px;font-size:12.5px;flex-direction:column;gap:3px;border-radius:12px}
.k4 .btn svg{width:18px;height:18px}

details:not(.ak){border-top:1px solid var(--linie);padding:12px 0}
details:not(.ak):first-of-type{border-top:0;padding-top:0}
details:not(.ak)>summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
details:not(.ak)>summary::after{content:"+";color:var(--indigo);font-size:20px;line-height:1}
details:not(.ak)[open]>summary::after{content:"–"}
details:not(.ak) p{color:var(--grau);margin:8px 0 0;font-size:14.5px}

.leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--glas);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--linie);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.leiste .in{max-width:720px;margin:0 auto;display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.leiste.aus{display:none}
.leiste.tabs .in{max-width:520px;grid-template-columns:repeat(5,1fr);gap:2px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px 4px;
  background:none;border:0;border-radius:12px;color:var(--hell);font:600 10.5px var(--fs);letter-spacing:.01em;position:relative}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9}
.tab.an{color:var(--indigo)}
.tab .punkt{position:absolute;top:2px;right:calc(50% - 17px);width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--glas)}

.toast{position:fixed;left:50%;transform:translate(-50%,10px);bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;
  background:var(--tinte);color:var(--canvas);padding:12px 18px;border-radius:14px;font-size:14.5px;font-weight:700;max-width:88%;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--schatten-tief)}
.toast.an{opacity:1;transform:translate(-50%,0)}
input[type=file]{display:none}
.scanwand{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.scanwand b{font-size:18px}.scanwand span{font-size:13px;color:var(--grau);text-align:right}
.scanstreifen{display:flex;gap:6px;overflow-x:auto;margin-top:10px}
.scanstreifen span{position:relative;flex:none;width:64px;height:48px;border-radius:8px;overflow:hidden;border:2px solid transparent}
.scanstreifen span.an{border-color:var(--indigo)}
.scanstreifen img{width:100%;height:100%;object-fit:cover;display:block}
.scanstreifen i{position:absolute;left:3px;bottom:2px;font:700 10px var(--fz);color:#fff;background:rgba(25,26,43,.7);border-radius:4px;padding:0 3px;font-style:normal}
/* Einführung */
.tour{text-align:left}
.tour h2{font-size:21px;letter-spacing:-.015em;margin:16px 0 6px}
.tour-ico{font-size:54px;text-align:center;margin:6px 0 0}
.tour .punkte li{padding:10px 0}
.tourbild{background:linear-gradient(160deg,var(--gold-blass),rgba(99,102,241,.08));border-radius:16px;padding:14px;border:1px solid var(--linie)}
.tb-karte{background:var(--feld);border:1px solid var(--linie);border-radius:12px;padding:10px 12px}
.tb-karte b{font-size:15px}.tb-karte small{display:block;color:var(--grau);font:12px var(--fz)}
.tb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tb-chips span{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(99,102,241,.1);color:var(--indigo)}
.tb-chips.gross span{font-size:12.5px;background:var(--feld);border:1px solid var(--linie);color:var(--tinte)}
.tb-chips.gross span.an{border-color:var(--indigo);color:var(--indigo);background:rgba(99,102,241,.08)}
.tb-pfeil{text-align:center;font-size:20px;color:var(--gold-tief);font-weight:700;line-height:1.4}
.tb-z{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-top:1px dashed var(--linie)}
.tb-z:first-child{border-top:0}.tb-z b{font:700 13.5px var(--fz);color:var(--gold-tief);white-space:nowrap}
.tb-z b.gold{box-shadow:0 0 0 1.5px var(--gold);border-radius:6px;padding:0 5px}
.tb-rw{font:11px var(--fz);background:var(--gold-blass);border-radius:6px;padding:3px 7px;margin:0 0 3px}
.tb-sum{display:flex;justify-content:space-between;border-top:2px solid var(--gold);margin-top:6px;padding-top:6px;font-weight:800}
.tb-sum b{font-family:var(--fz);color:var(--gold-tief)}
.tb-cb{font-size:14px;font-weight:700;padding:4px 0}.tb-cb small{font-weight:500;color:var(--grau);margin-left:4px}.tb-cb.an{color:var(--indigo)}
.tb-svg{width:100%;height:auto;display:block}.tb-t{font:600 13px var(--fz);fill:var(--grau)}
.tb-hand{text-align:center;font-size:13px;font-weight:700;color:var(--indigo);margin-top:4px}
.tourpunkte{display:flex;justify-content:center;gap:8px;margin:4px 0 14px}
.tourpunkte button{appearance:none;border:0;width:9px;height:9px;border-radius:50%;background:var(--linie);padding:0;cursor:pointer}
.tourpunkte button.an{background:var(--indigo);width:24px;border-radius:6px}
/* Schnell-Pakete */
.pakete{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;margin:0 -2px;scrollbar-width:none}
.pakete::-webkit-scrollbar{display:none}
.pakete .chip{white-space:nowrap;flex:none;background:var(--feld)}
.pakete .chip.kopie{border-color:var(--gold);color:var(--gold-tief);background:var(--gold-blass)}
/* Angebot */
.apos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;padding:12px 0;border-top:1px solid var(--linie);align-items:start}
.apos:first-of-type{border-top:0}
.apos.aus .at,.apos.aus .an2{opacity:.45}
.apos .at textarea{width:100%;border:1px solid transparent;background:transparent;border-radius:9px;padding:4px 6px;margin:-4px -6px 0;font-weight:700;font-size:14.5px;line-height:1.35;resize:vertical;min-height:0}
.apos .at textarea:focus{border-color:var(--linie);background:var(--feld)}
.apos .at small{display:block;color:var(--grau);font-size:12px}
.apos .an2{grid-column:2;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
.apos .an2 input{width:100%;background:var(--feld);border:1px solid var(--linie);border-radius:10px;padding:8px 34px 8px 8px;font:600 15px var(--fz);text-align:right;min-height:42px}
.apos .an2 input.geaendert{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.apos .an2 .einh i{font-size:11.5px;right:8px}
.apos .an2 b{font:700 14px var(--fz);color:var(--gold-tief);min-width:84px;text-align:right}
.apos .x{width:28px;height:28px;font-size:15px}
/* Unterschrift */
.sigbox{position:relative;flex:1;margin:0 14px;border:2px dashed var(--linie);border-radius:16px;background:#fff;min-height:200px;overflow:hidden}
.sigbox canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sigbox span{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#9B9DB2;font-size:13px;pointer-events:none;border-top:1px solid #E3E3EA;margin:0 24px;padding-top:6px}
.sigbox.an span{opacity:.5}
.sigbild{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:6px;max-width:320px}
.sigbild img{width:100%;height:auto;display:block}
/* Spracheingabe */
.overlay.sprech{background:rgba(14,16,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);justify-content:center;align-items:center}
.sprechbox{background:var(--canvas);border-radius:22px;padding:26px 22px;width:min(340px,88vw);display:grid;gap:10px;justify-items:center;box-shadow:var(--schatten-tief)}
.sprechbox .mic{font-size:44px;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:var(--iris);animation:puls 1.3s ease-in-out infinite}
@keyframes puls{50%{transform:scale(1.08);box-shadow:0 0 0 14px rgba(99,102,241,.15)}}
/* Rechtstexte */
.rechtstext h2{font-size:19px;margin:0 0 10px}
.rechtstext h3{font-size:15.5px;margin:18px 0 6px}
.rechtstext p,.rechtstext li{color:var(--grau);font-size:14px;line-height:1.6;margin:0 0 8px}
.rechtstext ul{padding-left:18px;margin:0 0 10px}
.rechtstext a{color:var(--indigo)}
.baust-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  .sp-l,.sp-r,.sp-line,.sp-by{animation-duration:.01s!important;animation-delay:0s!important}
  *{transition:none!important}
}
@media (max-width:360px){.k4 .btn{font-size:11.5px}.mq input{width:64px}.mq span{min-width:48px}.r3{gap:6px}}
/* ================= Design 10: ruhig, klar, für Büro und Baustelle ================= */
:root{--glas:#FFFFFF;--glas-2:#F3F4F8;--feld:#FFFFFF;--rand:rgba(28,30,60,.10);--cyan:#6366F1;--pink:#C9A84C;
  --aktion:#4F46E5;--aktion-tief:#4338CA;--gruen:#15803D;--schatten:0 1px 2px rgba(28,32,70,.05),0 4px 14px rgba(28,32,70,.05);--schatten-tief:0 12px 34px rgba(28,32,70,.16);--r:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glas:#171933;--glas-2:#1E2140;--feld:#11132A;--rand:rgba(255,255,255,.09);--aktion:#6366F1;--aktion-tief:#818CF8;--gruen:#4ADE80;--schatten:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--glas:#171933;--glas-2:#1E2140;--feld:#11132A;--rand:rgba(255,255,255,.09);--aktion:#6366F1;--aktion-tief:#818CF8;--gruen:#4ADE80;--schatten:0 1px 2px rgba(0,0,0,.4)}
.aurora{display:none}body.mitAurora .aurora{display:block}
#splash .b2{background:var(--indigo)}#splash .b3,.aurora .b3{background:var(--gold)}.aurora .b2{background:var(--indigo)}
.glas{backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--rand)}
.top,.leiste{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.iris{background:var(--aktion);box-shadow:none}.btn.iris:hover{background:var(--aktion-tief)}
.btn.gold{box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.rot.voll{background:var(--rot);color:#fff;border:0}
.mp{box-shadow:var(--schatten)}
:focus-visible{outline:3px solid var(--aktion);outline-offset:2px;border-radius:6px}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--gold-blass);color:var(--gold-tief);font:700 12px var(--fz);margin-left:4px}
.badge.rot{background:rgba(220,38,38,.12);color:var(--rot)}.badge.gross{min-width:30px;height:30px;font-size:15px}
.ms.live{color:var(--gruen);font-weight:700}
.balken.klein{height:6px;margin-top:6px}.balken i{background:var(--aktion)}
.kpis.k4{grid-template-columns:repeat(4,1fr)}
button.kpi{appearance:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.kpi.gold b{color:var(--gold-tief)}.kpi.gold{border-color:var(--gold)}
@media (max-width:520px){.kpis.k4{grid-template-columns:1fr 1fr}}
.sprechbox{max-height:92vh;overflow:auto;width:min(440px,94vw)}
/* Dashboard */
.dash{display:grid;gap:12px}
.dkarte{background:var(--glas);border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schatten);padding:16px;min-width:0}
.dkarte h2{margin:0 0 12px;font-size:17px}.dkarte .rwkopf h2{margin:0}
.schnell{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sa{appearance:none;border:1px solid var(--linie);background:var(--glas-2);border-radius:14px;padding:12px 6px;cursor:pointer;display:grid;gap:4px;justify-items:center;font-size:13px;font-weight:700;color:var(--tinte)}
.sa b{font-size:22px;line-height:1}.sa:hover{border-color:var(--aktion)}
.mini3,.fin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.mini3 button,.fin button{appearance:none;border:1px solid var(--linie);background:var(--glas-2);border-radius:12px;padding:10px 8px;text-align:left;cursor:pointer;font-size:12.5px;color:var(--grau)}
.mini3 b{display:block;font:700 20px var(--fz);color:var(--tinte)}
.fin small{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.fin b{display:block;font:700 15px var(--fz);color:var(--tinte);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini3 .gold,.fin .gold{border-color:var(--gold)}.mini3 .rot b,.fin .rot b{color:var(--rot)}.fin .gruen b{color:var(--gruen)}
.meldungen{display:grid;gap:6px;margin-top:10px}
.meldung{appearance:none;text-align:left;border:1px solid var(--gold);background:var(--gold-blass);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:14px;color:var(--tinte)}
.meldung.rot{border-color:var(--rot);background:rgba(220,38,38,.07)}
/* Stunden */
.stdbox{border-top:1px solid var(--linie);padding:10px 0}.stdbox:first-of-type{border-top:0}
.stdz{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}.stdz.weg{opacity:.7}
.stdz-t{font-size:13.5px;margin-top:2px}
.stdz-std{font:700 18px var(--fz);color:var(--gold-tief)}
.stdz-akt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.stdz-akt .btn{width:auto}
/* Mitarbeiter-App */
.wkarte{padding:0;overflow:hidden}
.wkopf{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;text-align:left;background:none;border:0;padding:14px 16px;cursor:pointer;color:inherit;font:inherit}
.wkopf .pf{font-size:22px;color:var(--hell);align-self:center}
.wakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;padding:0 16px 14px}
.wakt .btn{min-height:50px;font-size:15px;padding:10px 8px}
.anweisung{margin-top:10px;padding:10px 12px;border-left:3px solid var(--gold);background:var(--gold-blass);border-radius:8px;white-space:pre-wrap;font-size:14.5px}
.schrittleiste{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px}
.schrittleiste span{font-size:11px;font-weight:700;text-align:center;padding:6px 2px;border-radius:8px;background:var(--glas-2);color:var(--hell)}
.schrittleiste span.an{background:var(--aktion);color:#fff}
.aufg{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--linie);cursor:pointer;font-size:15.5px}
.aufg:first-of-type{border-top:0}.aufg input{width:24px;height:24px;flex:none;accent-color:var(--aktion);margin:0}
.aufg small{display:block;color:var(--grau);font-size:12px}.aufg.erl span{text-decoration:line-through;color:var(--grau)}
.dokugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:6px 0 10px}
.dokubild{appearance:none;border:0;padding:0;background:none;position:relative;cursor:pointer;border-radius:10px;overflow:hidden;aspect-ratio:1}
.dokubild img{width:100%;height:100%;object-fit:cover;display:block}
.dokubild span{position:absolute;left:4px;bottom:4px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:2px 6px}
.mangel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--linie)}.mangel:first-of-type{border-top:0}
.mangel img{width:64px;height:64px;object-fit:cover;border-radius:8px;cursor:pointer}.mangel.erl{opacity:.6}
.mangel:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.lagergrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.lgk{appearance:none;border:1px solid var(--rand);background:var(--glas);border-radius:16px;padding:18px 10px;display:grid;gap:6px;justify-items:center;cursor:pointer;font-weight:700;font-size:15px;color:var(--tinte);box-shadow:var(--schatten);min-height:96px}
.lgk b{font-size:30px;line-height:1}.lgk.rot{border-color:rgba(220,38,38,.35)}
.mitmic{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.bildgross{background:rgba(0,0,0,.92)}.bildgross .ovkopf{color:#fff;border-color:rgba(255,255,255,.15)}
.bgin{flex:1;display:grid;place-items:center;padding:10px;overflow:auto}.bgin img{max-width:100%;max-height:100%;object-fit:contain}
.rund.klein{width:34px;height:34px}
.updbanner{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));z-index:95;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:14px;background:var(--glas);border:1px solid var(--aktion);box-shadow:var(--schatten-tief);font-weight:700;font-size:14px;max-width:94vw}
.updbanner .btn{width:auto}
.zahlen{border:2px solid var(--aktion)}
.offenbetrag{display:grid;gap:2px;margin:0 0 14px}.offenbetrag small{font-size:12px;font-weight:700;color:var(--grau);text-transform:uppercase;letter-spacing:.05em}
.offenbetrag b{font:700 34px var(--fz);color:var(--tinte)}.offenbetrag span{color:var(--grau);font-size:14px}
.qrgross{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-bottom:14px}
.qrgross img{width:180px;height:180px;background:#fff;padding:8px;border-radius:12px;image-rendering:pixelated;border:1px solid var(--linie)}
.qrgross p{margin:0;font-size:14px;color:var(--grau)}.qrgross p b{color:var(--tinte);font-size:16px}
@media (max-width:480px){.qrgross{grid-template-columns:1fr;justify-items:center;text-align:center}.qrgross img{width:220px;height:220px}}
.zahldaten{display:grid;gap:6px}.zd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--linie)}
.zd small{grid-column:1/-1;font-size:11.5px;color:var(--grau);font-weight:700}.zd b{font-family:var(--fz);font-size:14.5px;word-break:break-all}.zd .btn{width:auto}
/* Seitennavigation (nur breite Bildschirme) */
.seitennav{display:none}
@media (min-width:1024px){
  body.mitnav{padding-left:232px}
  body.mitnav .seitennav{display:flex;flex-direction:column;gap:2px;position:fixed;left:0;top:0;bottom:0;width:232px;padding:18px 12px;background:var(--glas);border-right:1px solid var(--rand);z-index:25;overflow:auto}
  .seitennav .snlogo{font-size:24px;font-weight:700;letter-spacing:-.03em;padding:4px 10px 18px}.seitennav .snlogo .g{color:var(--gold)}
  .seitennav .tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 12px;border-radius:12px;font-size:15px;position:relative;width:100%;appearance:none;border:0;background:none;cursor:pointer;color:var(--grau);font-weight:600}
  .seitennav .tab:hover{background:var(--glas-2);color:var(--tinte)}
  .seitennav .tab.an{background:rgba(79,70,229,.10);color:var(--aktion)}
  .seitennav .tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none}
  .seitennav .tab .punkt{position:static;margin-left:auto}
  .seitennav .snfuss{margin-top:auto;padding:12px 10px 0;font-size:13px;color:var(--grau);border-top:1px solid var(--linie)}
  body.mitnav .leiste.tabs{display:none}
  body.mitnav .leiste{left:232px}
  body.mitnav{padding-bottom:110px}
  .top-in,.wrap{max-width:1100px}
  .leiste .in{max-width:720px}
  .dash{grid-template-columns:1fr 1fr}.dkarte.breit{grid-column:1/-1}
  body.mitnav .toast{left:calc(50% + 116px)}
}
@media (min-width:1400px){.top-in,.wrap{max-width:1240px}.dash{grid-template-columns:1fr 1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.blob{animation:none!important}}
.wskizze{margin:12px 0 4px;background:var(--glas-2);border-radius:12px;padding:8px}
.wandsvg{width:100%;height:auto;display:block}
.wandsvg .wsb{font:600 24px/1 var(--schrift,system-ui);fill:var(--tinte)}
.wandsvg .wsm{font:500 20px/1 var(--schrift,system-ui);fill:var(--grau)}
.oef2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px}
.oef2 .f{margin:0}
.wdetail textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:58px}
/* Steuerberater-Tabelle */
.sttab{width:100%;border-collapse:collapse;font-size:14px}
.sttab th,.sttab td{padding:7px 4px;border-bottom:1px solid var(--linie);text-align:left;font-variant-numeric:tabular-nums}
.sttab th{font-weight:650;color:var(--tinte)}
/* Auswahlblatt: Drucken / E-Mail / Teilen */
.aktblatt{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.aktblatt .akthg{position:absolute;inset:0;background:rgba(0,0,0,.38);opacity:0;transition:opacity .2s}
.aktblatt .aktin{position:relative;width:100%;max-width:480px;background:var(--flaeche,var(--canvas));border-radius:18px 18px 0 0;padding:8px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.aktblatt.auf .akthg{opacity:1}.aktblatt.auf .aktin{transform:none}
.aktgriff{width:38px;height:5px;border-radius:3px;background:var(--linie);margin:2px auto 10px}
.akttitel{display:block;text-align:center;font-size:13px;color:var(--grau);font-weight:500;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aktk{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--glas-2);border:0;border-radius:12px;padding:13px 14px;margin:0 0 8px;color:var(--tinte);font:inherit;cursor:pointer}
.aktk svg{width:22px;height:22px;flex:none;color:var(--gold-tief)}
.aktk span{display:flex;flex-direction:column}.aktk b{font-size:16px;font-weight:600}.aktk small{font-size:12.5px;color:var(--grau)}
.aktk.aktab{justify-content:center;font-weight:600;margin-top:4px}
@media (min-width:700px){.aktblatt{align-items:center}.aktblatt .aktin{border-radius:18px;transform:scale(.96);opacity:0;transition:all .18s}.aktblatt.auf .aktin{transform:none;opacity:1}}
.stzeit{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px}
.stzeit b{text-align:center;font-size:18px}
.stzeit .btn{width:48px;padding-left:0;padding-right:0;font-size:22px}
/* 3D: Infokarte beim Antippen */
.d3info{position:absolute;left:12px;right:12px;bottom:12px;max-width:420px;margin:0 auto;background:var(--flaeche,var(--canvas));border:1px solid var(--linie);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:60%;overflow:auto;z-index:3}
.d3ik{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.d3ik b{font-size:17px}
.d3ik .rund{width:32px;height:32px}
.d3iz{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--linie);font-size:14px}
.d3iz span{color:var(--grau)}.d3iz b{text-align:right;font-weight:600}.d3iz small{display:block;font-weight:400;color:var(--grau);font-size:12px}
.d3notiz{margin:8px 0 0;font-size:13.5px}
.d3info .btn{margin-top:10px;width:100%}
.d3info.form{max-height:78%}
.d3info .f{margin:6px 0 0}.d3info .f label{font-size:12px}
.d3oef{border-top:1px dashed var(--linie);margin-top:8px;padding-top:6px}
.d3ok{display:flex;justify-content:space-between;align-items:center}
.d3info .r4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.d3info .r2 .btn{margin-top:10px}
@media (min-width:900px){.d3info{left:auto;right:16px;bottom:16px;width:380px;max-height:calc(100% - 32px);margin:0}.d3info.form{max-height:calc(100% - 32px)}}
/* Grundrisse: Wandansichten */
.wanz{margin-top:12px;border-top:1px solid var(--linie,rgba(0,0,0,.08));padding-top:8px}
.wanz>summary{cursor:pointer;font-weight:600;padding:6px 0;list-style:revert}
.wanzraster{display:grid;grid-template-columns:1fr;gap:10px;margin-top:6px}
@media(min-width:760px){.wanzraster{grid-template-columns:1fr 1fr}}
.wanzkarte{border:1px solid var(--linie,rgba(0,0,0,.08));border-radius:12px;padding:8px 10px}
.wanzkopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wanzkarte .wskizze{margin:6px 0 2px}
.wanznotiz{margin:6px 0 0;font-size:13px;font-style:italic}
.wanz>summary{display:flex;justify-content:flex-start;align-items:baseline;gap:8px}
.wanz>summary small{color:var(--grau);font-weight:500;margin-right:auto}
.wanzkarte .wandsvg{max-height:300px}
/* PDF-Vorschau */
.pdfvs{z-index:8500;background:var(--canvas)}
.pdfvs .pvkopf{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linie,rgba(0,0,0,.08));background:var(--flaeche,var(--canvas))}
.pdfvs .pvtitel{flex:1;min-width:0;display:flex;flex-direction:column}
.pdfvs .pvtitel b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfvs .pvtitel small{font-size:12px;color:var(--grau)}
.pdfvs .pvzoom{display:flex;gap:6px}
.pvrund{width:40px;height:40px;border-radius:50%;border:1px solid var(--linie,rgba(0,0,0,.1));background:var(--glas-2);color:var(--tinte);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.pvrund svg{width:20px;height:20px}
.pdfvs .pvseiten{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;background:color-mix(in srgb,var(--tinte) 7%,var(--canvas))}
.pdfvs .pvseiten.breit{align-items:flex-start}
.pdfvs .pvseite{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:10px}
.pdfvs .pvseite canvas{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18);border-radius:2px;max-width:none}
.pdfvs .pvseite small{font-size:11.5px;color:var(--grau)}
.pdfvs .pvframe{width:100%;height:100%;border:0;background:#fff}
.pdfvs .pvlade{padding:60px;display:flex;justify-content:center}
.pdfvs .pvleiste{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--linie,rgba(0,0,0,.08));background:var(--flaeche,var(--canvas))}
.pdfvs .pvleiste .btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px}
.pdfvs .pvleiste .btn svg{width:18px;height:18px}
.pdfvs .pvleiste #pvFertig{grid-column:1/-1}
html.pv-offen,html.pv-offen body{overflow:hidden}
.pvansehen{margin-left:8px;font-size:13px;display:inline-flex;align-items:center;gap:4px}
.pvansehen svg{width:14px;height:14px}
select.pveinh{border:0;background:transparent;color:var(--grau);font:inherit;font-size:13px;padding:0 2px;max-width:70px}