/* TC Office – Android-Ebene (Material 3). Gilt nur in der Android-App (html.android).
   Fester App-Rahmen, Top-App-Bar, Navigationsleiste mit Indikator-Pille, gefüllte Karten,
   runde Knöpfe, Bottom-Sheets, Snackbar, Systemschrift (Roboto / Google Sans). */

html.android{
  --sa-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sa-bot:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  --sa-l:var(--safe-area-inset-left,0px);--sa-r:var(--safe-area-inset-right,0px);
  --nav-h:64px;--tab-h:80px;
  --fs:"Google Sans Text","Google Sans",Roboto,system-ui,sans-serif;--fz:"Google Sans","Google Sans Display",Roboto,system-ui,sans-serif;--fm:"Roboto Mono",monospace;
  --primaer:#7A5A12;--auf-primaer:#FFFFFF;--primaer-cont:#FFDEA6;--auf-primaer-cont:#271900;
  --sek-cont:#EFE1CB;--auf-sek-cont:#251A07;
  --flaeche:#FFF8F2;--flaeche-1:#FAF2E9;--flaeche-2:#F4ECE3;--flaeche-3:#EEE6DD;--flaeche-h:#E9E1D8;
  --auf-flaeche:#1F1B16;--auf-flaeche-v:#4E4639;--kontur:#807567;--kontur-v:#D1C5B4;
  --canvas:var(--flaeche);--glas:var(--flaeche-1);--glas-2:var(--flaeche-2);--tinte:var(--auf-flaeche);--grau:var(--auf-flaeche-v);--hell:#807567;--rand:var(--kontur-v);--linie:var(--kontur-v);
  --aktion:var(--primaer);--aktion-text:var(--auf-primaer);
}
@media (prefers-color-scheme:dark){html.android:not([data-theme="light"]){
  --primaer:#ECC06C;--auf-primaer:#412D00;--primaer-cont:#5D4200;--auf-primaer-cont:#FFDEA6;
  --sek-cont:#51452F;--auf-sek-cont:#EFE1CB;
  --flaeche:#17130E;--flaeche-1:#1F1B16;--flaeche-2:#231F1A;--flaeche-3:#2E2924;--flaeche-h:#39342E;
  --auf-flaeche:#EBE1D7;--auf-flaeche-v:#D1C5B4;--kontur:#9A8F80;--kontur-v:#4E4639;--hell:#9A8F80;
}}

/* ---------- Rahmen ---------- */
html.android,html.android body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--flaeche)}
html.android body{position:fixed;inset:0;width:100%;padding:0!important;margin:0;font-family:var(--fs);font-size:16px;line-height:1.45;letter-spacing:.005em;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html.android input,html.android textarea{-webkit-user-select:text;user-select:text}
html.android #inhalt{position:fixed;inset:0;max-width:none;margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--sa-top) + var(--nav-h)) calc(16px + var(--sa-r)) calc(var(--tab-h) + var(--sa-bot) + 24px) calc(16px + var(--sa-l));touch-action:pan-y}
html.android #inhalt>*{max-width:760px;margin-left:auto;margin-right:auto}
html.android #inhalt>.dash,html.android #inhalt>.dash2,html.android #inhalt>.kstreifen{max-width:none}
html.android .aurora{display:none}

/* ---------- Top-App-Bar ---------- */
html.android header.top{position:fixed;top:0;left:0;right:0;z-index:40;padding-top:var(--sa-top);background:var(--flaeche);border:0;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .2s}
html.android header.top.voll{background:var(--flaeche-2)}
html.android .top-in{height:var(--nav-h);min-height:0;max-width:none;padding:0 calc(4px + var(--sa-r)) 0 calc(4px + var(--sa-l));gap:4px}
html.android .top .titel{flex:1;min-width:0;opacity:0;transition:opacity .15s;padding-left:4px}
html.android header.top.voll .titel,html.android header.top.ohnegross .titel{opacity:1}
html.android #kTitel{font:400 22px/1.2 var(--fz);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--auf-flaeche)}
html.android #kTitel .g{color:var(--primaer)}
html.android #kSub{display:none}
html.android .top .rund{width:48px;height:48px;border:0;border-radius:50%;background:none;color:var(--auf-flaeche-v);position:relative;overflow:hidden}
html.android .top .rund svg{width:24px;height:24px;stroke-width:2}
html.android .top .rund:active{background:color-mix(in srgb,var(--auf-flaeche) 12%,transparent)}
html.android #zurueck svg{transform:none}
html.android #startseite{display:none!important}

/* Großer Titel (Material „Large top app bar“) */
html.android .ios-titel{margin:8px 4px 20px}
html.android .ios-titel h1{font:400 32px/1.2 var(--fz);letter-spacing:0;margin:0;color:var(--auf-flaeche)}
html.android .ios-titel h1 .g{color:var(--primaer)}
html.android .ios-titel p{margin:4px 0 0;color:var(--auf-flaeche-v);font-size:15px}

/* ---------- Navigationsleiste mit Pille ---------- */
html.android .leiste{left:0!important;right:0;bottom:0;padding:0 var(--sa-r) var(--sa-bot) var(--sa-l);background:var(--flaeche-2);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;z-index:45}
html.android .leiste.tabs .in{max-width:720px;height:var(--tab-h);gap:0;align-items:stretch}
html.android .leiste .tab{padding:12px 0 0;justify-content:flex-start;gap:4px;font:500 12px/1.2 var(--fs);letter-spacing:.03em;color:var(--auf-flaeche-v);border-radius:0;background:none!important;box-shadow:none!important}
html.android .leiste .tab svg,html.android .leiste .tab svg.i{width:64px;height:32px;padding:4px 20px;border-radius:16px;stroke-width:1.8;box-sizing:border-box;transition:background .2s}
html.android .leiste .tab.an{color:var(--auf-flaeche);font-weight:700}
html.android .leiste .tab.an svg{background:var(--sek-cont);color:var(--auf-sek-cont);stroke-width:2.1}
html.android .leiste .tab .punkt{top:12px;right:calc(50% - 18px);width:8px;height:8px;background:#B3261E;border:0}
html.android .leiste:not(.tabs){background:var(--flaeche-2)}
html.android .leiste:not(.tabs) .in{padding:12px 16px;max-width:760px;gap:12px}

/* ---------- Typografie ---------- */
html.android h2{font:500 20px/1.3 var(--fz);letter-spacing:0}
html.android .glas>h2:first-child,html.android .dkarte h2{font:500 16px/1.4 var(--fs);letter-spacing:.01em;margin-bottom:12px}
html.android .leise,html.android .ms,html.android small{color:var(--auf-flaeche-v)}
html.android .mn{font-weight:500;font-size:16px}
html.android .f label,html.android .lbl{font:500 12px var(--fs);letter-spacing:.04em;color:var(--auf-flaeche-v);text-transform:none}

/* ---------- Karten ---------- */
html.android .glas,html.android .dkarte,html.android .mp,html.android .kpi,html.android .kz,html.android .karte,html.android .wkarte{border:0!important;box-shadow:none!important;border-radius:16px;background:var(--flaeche-1)}
html.android .glas{padding:16px;margin-bottom:12px}
html.android .mp{padding:14px 16px;min-height:64px;margin-bottom:8px;border-radius:16px}
html.android .mp .ico{border-radius:12px;background:var(--primaer-cont);color:var(--auf-primaer-cont);border:0}
html.android .lagprod,html.android .mrow,html.android .mview{border-top:1px solid var(--kontur-v)!important}
html.android .glas>.lagprod:first-of-type,html.android .dkarte>.lagprod:first-of-type{border-top-color:transparent!important}
html.android .kstreifen{background:transparent;border:0;gap:12px;grid-template-columns:1fr 1fr;overflow:visible}
html.android .kz{border-radius:16px}
html.android .kz .kz-ico{border-radius:10px;border:0}
html.android .kleiste button{background:transparent;border:1px solid var(--kontur-v);border-radius:8px;height:32px;color:var(--auf-flaeche-v)}
html.android .mini3 button,html.android .fin button,html.android .faellig button{background:var(--flaeche-3);border:0;border-radius:12px}
html.android .faellig{border:0;gap:8px}
html.android .kpi b{font-size:15.5px!important}

/* ---------- Knöpfe ---------- */
html.android .btn{min-height:48px;border-radius:999px;font:500 15px/1.2 var(--fs);letter-spacing:.01em;box-shadow:none;position:relative;overflow:hidden;transition:background .15s}
html.android .btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none}
html.android .btn:active::after{opacity:.12}
html.android .btn.iris{background:var(--primaer);color:var(--auf-primaer)}
html.android .btn.ghost{background:var(--sek-cont);border:0;color:var(--auf-sek-cont)}
html.android .btn.gold{background:var(--primaer-cont);color:var(--auf-primaer-cont)}
html.android .btn.rot{background:#F9DEDC;color:#410E0B;border:0}
html.android .btn.klein{min-height:36px;font-size:14px;padding:6px 16px}
html.android .k4 .btn,html.android .aktgrid .btn,html.android .wakt .btn{border-radius:16px;font-size:12.5px;min-height:60px}
html.android .linkbtn{color:var(--primaer);border:0;font-weight:500;text-decoration:none}
html.android .chip{border-radius:8px;border:1px solid var(--kontur-v);background:transparent;min-height:32px;font-size:14px;font-weight:500}
html.android .chip.an{background:var(--sek-cont);border-color:transparent;color:var(--auf-sek-cont)}
html.android .dk-akt .btn.sa{border-radius:16px;min-height:64px}
html.android .dk-akt .btn.ghost.sa{background:var(--flaeche-1);color:var(--auf-flaeche)}
html.android .dk-akt .btn.ghost.sa svg{color:var(--primaer)}
html.android .dk-akt .btn.iris.sa{background:var(--primaer-cont);color:var(--auf-primaer-cont)}

/* ---------- Textfelder (gefüllt, Material) ---------- */
html.android input,html.android select,html.android textarea{font-size:16px!important}
html.android .f input,html.android .f select,html.android .f textarea{min-height:56px;border:0;border-bottom:1px solid var(--auf-flaeche-v);border-radius:4px 4px 0 0;background:var(--flaeche-3);padding:16px;color:var(--auf-flaeche);box-shadow:none}
html.android .f input:focus,html.android .f select:focus,html.android .f textarea:focus{border-bottom:2px solid var(--primaer);box-shadow:none;outline:0}
html.android .cb input[type=checkbox]{accent-color:var(--primaer);width:20px;height:20px}
html.android .ios-gruppe{display:grid;gap:12px;margin:0 0 20px}
html.android .ios-gruppe .f{margin:0}
html.android .ios-gruppe .f label{display:none}

/* ---------- Bottom-Sheets ---------- */
html.android .overlay.sprech{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(0,0,0,.32);-webkit-backdrop-filter:none;backdrop-filter:none;animation:anEin .2s ease-out}
html.android .overlay.sprech .sprechbox{position:relative;width:100%;max-width:640px;margin:0 auto;border:0;border-radius:28px 28px 0 0;background:var(--flaeche-1);
  padding:36px calc(20px + var(--sa-r)) calc(20px + var(--sa-bot)) calc(20px + var(--sa-l));max-height:90vh;overflow-y:auto;box-shadow:none;animation:anSheet .32s cubic-bezier(.2,0,0,1)}
html.android .overlay.sprech .sprechbox::before{content:"";position:absolute;top:16px;left:50%;width:32px;height:4px;margin-left:-16px;border-radius:2px;background:var(--auf-flaeche-v);opacity:.4}
html.android .overlay.sprech .sprechbox h2{font:400 24px/1.3 var(--fz)}
html.android .overlay:not(.sprech){padding-top:var(--sa-top);padding-bottom:var(--sa-bot)}

/* ---------- Snackbar ---------- */
html.android .toast{left:calc(16px + var(--sa-l))!important;right:calc(16px + var(--sa-r));transform:none!important;max-width:none;text-align:left;bottom:calc(var(--tab-h) + var(--sa-bot) + 12px);
  border-radius:4px;padding:14px 16px;font:400 14px var(--fs);background:#322F2B;color:#F7EFE7;box-shadow:0 3px 8px rgba(0,0,0,.25)}

/* ---------- Übergänge (Material „Shared axis X“) ---------- */
@keyframes anEin{from{opacity:0}to{opacity:1}}
@keyframes anSheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes anPush{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes anPop{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
@keyframes anTab{from{opacity:0}to{opacity:1}}
html.android #inhalt.push{animation:anPush .3s cubic-bezier(.2,0,0,1)}
html.android #inhalt.pop{animation:anPop .3s cubic-bezier(.2,0,0,1)}
html.android #inhalt.tabw{animation:anTab .2s ease-out}

/* ---------- Anmeldung ---------- */
html.android body.authseite #inhalt{padding:calc(var(--sa-top) + 32px) calc(24px + var(--sa-r)) calc(var(--sa-bot) + 24px) calc(24px + var(--sa-l))}
html.android .auth{display:block;min-height:0}
html.android .auth-marke,html.android .af-kopf{display:none}
html.android .auth-form{padding:0;max-width:440px;margin:0 auto}
html.android .ios-kopf{text-align:center;margin:12px 0 32px}
html.android .ios-kopf img{width:80px;height:80px;border-radius:24px;display:block;margin:0 auto 20px}
html.android .ios-kopf h1{font:400 32px/1.2 var(--fz);margin:0 0 8px}
html.android .ios-kopf p{margin:0;color:var(--auf-flaeche-v);font-size:16px}
html.android .auth-form .glas{background:transparent!important;padding:0!important}
html.android .auth-form .oder{margin:20px 0 16px}
html.android .auth-form .oder span{background:var(--flaeche);color:var(--auf-flaeche-v)}
html.android .auth-form .btn.google{background:transparent;border:1px solid var(--kontur);color:var(--auf-flaeche)}
html.android .auth-form .btn.schwarz{margin-top:12px;background:var(--auf-flaeche);color:var(--flaeche)}
html.android .auth-form .r2{margin-top:16px!important}
html.android .auth-form .signatur{text-align:center;margin-top:28px;color:var(--hell);font-size:12px}
html.android .auth-form .ios-weg{display:none}

html.android ::-webkit-scrollbar{display:none}
@media (min-width:1024px){
  html.android body.mitnav #inhalt{left:248px}
  html.android body.mitnav header.top{left:248px}
}