/* HesaAzubi - Gestaltung
   Schriften: Barlow Condensed (Ueberschriften, Kennungen, Zahlen), Overpass (Text) - beide lokal eingebunden
   Leitmotiv: Uebungsbogen mit Ankreuzfeldern und die Gewichtungsleiste der Pruefungsbereiche */
@font-face{font-family:'Overpass';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/f-overpass-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Overpass';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/f-overpass-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/f-barlowc-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/f-barlowc-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/f-barlowc-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/f-barlowc-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#14332D; --ink-2:#1D463E; --ink-3:#2B6156;
  --paper:#F1F3EF; --card:#FFFFFF; --line:#D9DFD8; --line-2:#C2CBC1;
  --text:#18251F; --muted:#56675E;
  --signal:#FF8A2A; --signal-2:#F0780F; --signal-soft:#FFEBD9;
  --ok:#1C8A4A; --ok-soft:#E2F3E8; --danger:#C4382E; --danger-soft:#FBE7E5;
  --schrift:#14332D; --praxis:#FF8A2A; --muendlich:#3E8FB0;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --schatten:0 10px 30px rgba(20,51,45,.16),0 2px 6px rgba(20,51,45,.08);
  --f-body:'Overpass',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-disp:'Barlow Condensed','Arial Narrow','Roboto Condensed',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --nav-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.5;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ink-3)}
h1,h2,h3{font-family:var(--f-disp);font-weight:700;line-height:1.05;margin:0;color:var(--ink);letter-spacing:.005em}
h1{font-size:clamp(2.7rem,7vw,5rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 .8em}
ul{margin:0;padding-left:1.2em}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:6px}
.ic{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .small{font-size:.875rem} .tiny{font-size:.78rem}
.hide{display:none!important}
.row{display:flex;align-items:center;gap:10px} .row.wrap{flex-wrap:wrap} .grow{flex:1;min-width:0}
.stack>*+*{margin-top:14px}
.zahl{font-family:var(--f-disp);font-weight:700;font-variant-numeric:tabular-nums}

/* Knoepfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-m);border:1.5px solid transparent;font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap;transition:transform .08s ease,background .15s ease,border-color .15s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--signal);color:var(--ink)}
.btn.primary:hover{background:#FF9B47}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink-2)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn.light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34)}
.btn.light:hover{background:rgba(255,255,255,.2)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.block{width:100%}
.btn.sm{min-height:38px;padding:0 14px;font-size:.92rem;border-radius:10px}
.link{background:none;border:0;padding:0;color:var(--ink-3);text-decoration:underline;font-weight:600}
.onink .link{color:#fff}

/* Marken und Schilder */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:700;font-size:1.55rem;color:inherit;text-decoration:none;letter-spacing:.01em}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--signal);display:grid;place-items:center;color:var(--ink)}
.brand .mark .ic{width:22px;height:22px;stroke-width:2.6}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.78rem;font-weight:650;color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tag.warn{background:var(--signal-soft);border-color:transparent;color:#9A4A05}
.schild{width:40px;height:40px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;background:var(--feld,var(--ink));color:#fff}
.schild.hell{color:var(--ink)}
.schild .ic{width:23px;height:23px}
.schild.sm{width:30px;height:30px;border-radius:6px} .schild.sm .ic{width:18px;height:18px}

/* Typenschild eines Berufs */
.plate{position:relative;display:grid;gap:8px;align-content:start;text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px 14px 22px;color:var(--text)}
.plate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--feld,var(--ink));border-radius:var(--r-m) 0 0 var(--r-m)}
button.plate:hover,a.plate:hover{border-color:var(--ink-3)}
.plate.aktiv{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.plate .kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plate .code{font-family:var(--f-disp);font-weight:700;font-size:2rem;line-height:.95;color:var(--ink)}
.plate .nm{font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.plate>*{min-width:0}
.plate .meta{display:flex;gap:6px;flex-wrap:wrap}

/* Gewichtungsleiste */
.wbar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--line);gap:2px}
.wbar i{display:block;height:100%;min-width:3px}
.wbar .schriftlich{background:var(--schrift)}
.wbar .praktisch{background:var(--praxis)}
.wbar .muendlich{background:var(--muendlich)}
.wbar.gross{height:34px;border-radius:6px}
.wbar.gross i{display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:1rem;color:#fff;font-style:normal;overflow:hidden}
.wbar.gross .praktisch{color:var(--ink)}
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende b{width:12px;height:12px;border-radius:3px;display:inline-block}

/* Uebungsbogen */
.bogen{background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-m);overflow:hidden}
.bogen-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;border-bottom:1.5px solid var(--ink);font-size:.82rem;font-weight:650;color:var(--ink)}
.bogen-kopf .nr{font-family:var(--f-disp);font-size:1.05rem;font-weight:700;white-space:nowrap}
.bogen-kopf span:first-child{min-width:0}
.bogen-body{padding:18px 16px 16px}
.frage{font-size:1.1rem;font-weight:650;line-height:1.4;margin:0 0 14px;color:var(--text)}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:#fff;line-height:1.4}
.opt:hover:not([disabled]){border-color:var(--ink-3)}
.opt .kz{flex:none;width:28px;height:28px;border:2px solid var(--ink);border-radius:5px;display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:1.05rem;color:var(--ink);background:#fff}
.opt .kz .ic{width:18px;height:18px;stroke-width:3}
.opt.wahl{border-color:var(--ink);background:#F3F7F5}
.opt.wahl .kz{background:var(--ink);color:#fff}
.opt.ok{border-color:var(--ok);background:var(--ok-soft)}
.opt.ok .kz{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.falsch{border-color:var(--danger);background:var(--danger-soft)}
.opt.falsch .kz{background:var(--danger);border-color:var(--danger);color:#fff}
.opt[disabled]{cursor:default;color:var(--text)}
.erkl{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--paper);border-left:4px solid var(--ink-3);font-size:.95rem}
.erkl b{display:block;margin-bottom:2px}
.erkl.ok{border-left-color:var(--ok)} .erkl.falsch{border-left-color:var(--danger)}

/* ---------- Startseite ---------- */
.karo{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;color:#fff}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:calc(16px + var(--safe-t)) clamp(16px,4vw,40px) 0}
.top nav{display:flex;align-items:center;gap:8px}
.top .navlink{color:#D5E2DC;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.top .navlink:hover{color:#fff}
.hero-grid{max-width:1180px;margin:0 auto;padding:clamp(34px,7vh,84px) clamp(16px,4vw,40px) clamp(40px,8vh,90px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{color:#fff;margin-bottom:18px}
.hero .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:#D5E2DC;max-width:34em;margin-bottom:26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hero .hinweis{color:#A9C0B7;font-size:.9rem}
.demo-stage{perspective:1400px}
.demo-stack{position:relative;transform-style:preserve-3d;transform:rotateY(-13deg) rotateX(5deg);transition:transform .5s ease;animation:einflug .9s ease-out both}
.demo-stack::before,.demo-stack::after{content:"";position:absolute;inset:0;background:#fff;border-radius:var(--r-m);border:1.5px solid rgba(20,51,45,.5)}
.demo-stack::before{transform:translate3d(22px,22px,-40px);opacity:.32}
.demo-stack::after{transform:translate3d(11px,11px,-20px);opacity:.6}
.demo-stack .bogen{position:relative;z-index:1;box-shadow:0 30px 60px rgba(0,0,0,.35);color:var(--text)}
.demo-stage:hover .demo-stack,.demo-stage:focus-within .demo-stack{transform:none}
@keyframes einflug{from{opacity:0;transform:rotateY(-30deg) rotateX(13deg) translateY(36px)}to{opacity:1;transform:rotateY(-13deg) rotateX(5deg)}}
.demo-cta{position:relative;z-index:2;margin:28px 0 0}
.demo-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.demo-tabs button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#D5E2DC;border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:650}
.demo-tabs button.an{background:#fff;color:var(--ink);border-color:#fff}
.sektion{max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(16px,4vw,40px)}
.sektion>h2{margin-bottom:8px}
.sektion>.unter{color:var(--muted);max-width:44em;margin-bottom:26px}
.felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px;margin-top:22px;align-items:start}
.feld-gruppe{min-width:0}
.feld-kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.feld-kopf h3{font-size:1.45rem}
.plates{display:grid;gap:12px}
.formate{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:4px 40px;margin:0;padding:0;list-style:none}
.formate li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.formate b{display:block;font-size:1.05rem}
.aufbau{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:start}
.auswahl{display:grid;gap:6px}
.auswahl button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;font-weight:600}
.auswahl button .code{font-family:var(--f-disp);font-weight:700;font-size:1.15rem;min-width:44px;color:var(--ink)}
.auswahl button.an{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fuss{background:var(--ink);color:#C7D6CF;font-size:.9rem}
.fuss .innen{max-width:1180px;margin:0 auto;padding:34px clamp(16px,4vw,40px) calc(34px + var(--safe-b));display:grid;gap:14px}
.fuss a{color:#fff}
.fuss .links{display:flex;gap:18px;flex-wrap:wrap}
.rl{display:inline-flex;gap:6px 18px;flex-wrap:wrap}

/* Tabellen */
.tab{width:100%;border-collapse:collapse;font-size:.95rem}
.tab th{text-align:left;font-size:.8rem;color:var(--muted);font-weight:650;padding:8px 10px;border-bottom:1.5px solid var(--ink)}
.tab td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tab td.r,.tab th.r{text-align:right;white-space:nowrap}
.tab .gew{font-family:var(--f-disp);font-weight:700;font-size:1.25rem;color:var(--ink)}
.tabwrap{overflow-x:auto}

/* ---------- Anmeldung ---------- */
.auth{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.auth .top{width:100%}
.auth-mitte{display:grid;place-items:center;padding:24px 16px 40px}
.glas{width:100%;max-width:440px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);border-radius:var(--r-l);padding:26px 24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.35);color:#fff}
.glas h2{color:#fff;margin-bottom:6px}
.glas .sub{color:#D5E2DC;margin-bottom:18px}
.feld{display:grid;gap:6px;margin-bottom:14px}
.feld label{font-size:.88rem;font-weight:650}
.inp{width:100%;min-height:46px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line-2);background:#fff;color:var(--text)}
.inp:focus{outline:3px solid var(--signal);outline-offset:1px;border-color:var(--ink)}
textarea.inp{min-height:110px;resize:vertical;line-height:1.45}
.glas .inp{border-color:transparent}
.pw{position:relative}
.pw .inp{padding-inline-end:48px}
.pw button{position:absolute;inset-inline-end:4px;top:4px;width:38px;height:38px;border:0;background:transparent;color:var(--muted);border-radius:8px;display:grid;place-items:center}
.falle{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:6px 0 16px}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--signal)}
.check a{color:#fff}
.meldung{padding:10px 12px;border-radius:10px;font-size:.92rem;margin-bottom:14px}
.meldung.fehler{background:var(--danger-soft);color:#8E241C}
.meldung.gut{background:var(--ok-soft);color:#125E32}
.meldung.info{background:var(--signal-soft);color:#7A3A04}
.code-inp{font-family:var(--f-disp);font-weight:700;font-size:2rem;letter-spacing:.35em;text-align:center}
.auth-fuss{padding:0 16px calc(18px + var(--safe-b));text-align:center;color:#A9C0B7;font-size:.82rem}
.auth-fuss a{color:#D5E2DC}

/* ---------- App ---------- */
.shell{min-height:100svh;display:grid;grid-template-columns:248px minmax(0,1fr);background:linear-gradient(90deg,var(--ink) 248px,var(--paper) 248px)}
.side{background:var(--ink);color:#D5E2DC;padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100svh;overflow-y:auto}
.side .brand{color:#fff;margin:2px 6px 14px}
.side .beruf{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 10px;color:#fff;margin-bottom:10px}
.side .beruf .code{font-family:var(--f-disp);font-weight:700;font-size:1.3rem}
.side .beruf small{display:block;color:#A9C0B7;line-height:1.25}
.nav-a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#D5E2DC;text-decoration:none;font-weight:600}
.nav-a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-a.an{background:#fff;color:var(--ink)}
.side .unten{margin-top:auto;display:grid;gap:6px}
.main{min-width:0;padding:26px clamp(16px,3.4vw,40px) 60px}
.main-in{max-width:940px;margin:0 auto}
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.kopfzeile h1{font-size:clamp(2rem,4.4vw,2.8rem)}
.kopfzeile p{margin:4px 0 0;color:var(--muted)}
.topbar,.tabbar{display:none}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:18px}
.panel h3{margin-bottom:10px}
.raster{display:grid;gap:14px}
.raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.kenn{display:grid;gap:2px}
.kenn .zahl{font-size:2.6rem;line-height:1;color:var(--ink)}
.kenn span{color:var(--muted);font-size:.9rem}
.balken{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;background:var(--ink-3);border-radius:999px}
.balken.ok i{background:var(--ok)}
.liste{display:grid}
.zeile{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.zeile:first-child{border-top:0}
a.zeile:hover b,button.zeile:hover b{text-decoration:underline}
.zeile .pfeil{color:var(--muted);flex:none}
.zeile .wert{font-family:var(--f-disp);font-weight:700;font-size:1.2rem;color:var(--ink);min-width:52px;text-align:right}
.modul-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 8px}
.lauf{max-width:720px;margin:0 auto}
.lauf-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lauf-kopf .balken{flex:1}
.lauf-fuss{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.uhr{font-family:var(--f-disp);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums;color:var(--ink);padding:2px 10px;border-radius:8px;background:var(--card);border:1px solid var(--line)}
.uhr.knapp{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;margin-top:14px}
.qgrid button{height:38px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;font-family:var(--f-disp);font-weight:700;font-size:1.05rem}
.qgrid button.beantwortet{background:var(--ink);border-color:var(--ink);color:#fff}
.qgrid button.akt{outline:3px solid var(--signal);outline-offset:1px}
.note{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.note .gross{font-family:var(--f-disp);font-weight:700;font-size:4.4rem;line-height:.9;color:var(--ink)}
.karte{min-height:230px;display:grid;align-content:center;gap:12px;text-align:center;padding:26px 20px}
.karte .frage{margin:0}
.karte .antwort{font-size:1.2rem;font-weight:700;color:var(--ok)}
.teil{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.teil .punkte{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.teil .punkte input{width:84px}
.loesung{margin-top:10px;padding:12px 14px;border-radius:10px;background:var(--ok-soft);border-left:4px solid var(--ok);font-size:.95rem}
.merk-liste{display:grid;gap:8px;padding:0;list-style:none}
.merk-liste li{padding:10px 12px;border-radius:10px;background:var(--paper);border-left:4px solid var(--signal)}
.leer{padding:26px;text-align:center;color:var(--muted)}

/* Dialog und Hinweise */
.schleier{position:fixed;inset:0;background:rgba(10,26,22,.55);display:grid;place-items:center;padding:16px;z-index:60}
.dialog{width:100%;max-width:420px;background:#fff;border-radius:var(--r-l);padding:22px;box-shadow:var(--schatten)}
.dialog h3{margin-bottom:8px}
.dialog .knoepfe{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 16px + var(--safe-b));display:grid;gap:8px;z-index:70;width:min(92vw,460px);pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--schatten);font-weight:600;pointer-events:auto;display:flex;align-items:center;gap:12px;justify-content:space-between}
.toast button{background:var(--signal);color:var(--ink);border:0;border-radius:8px;padding:6px 12px;font-weight:700}
.lade{display:grid;place-items:center;min-height:50svh;color:var(--muted)}

/* Rechtstexte */
.legal{max-width:760px;margin:0 auto;padding:30px clamp(16px,4vw,40px) 70px}
.legal h1{font-size:clamp(2.2rem,5vw,3rem);margin:18px 0 18px}
.legal h2{font-size:1.5rem;margin:28px 0 8px}
.legal p,.legal li{max-width:68ch}
.legal-top{background:var(--ink);color:#fff;padding:14px clamp(16px,4vw,40px)}

@media (max-width:1040px){.felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .felder{grid-template-columns:1fr}
  .tab.stapel thead{display:none}
  .tab.stapel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tab.stapel td{display:block;padding:0;border:0}
  .tab.stapel td:nth-child(1){grid-column:1;grid-row:1}
  .tab.stapel td:nth-child(4){grid-column:2;grid-row:1}
  .tab.stapel td:nth-child(2),.tab.stapel td:nth-child(3){grid-column:1 / -1;font-size:.9rem;color:var(--muted)}
}
@media (max-width:899px){
  html{scroll-padding-bottom:calc(var(--nav-h) + 28px)}
  .shell{display:block;background:var(--paper)}
  .tasten{display:none}
  .lauf-fuss>.btn{flex:1 1 auto}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;padding:calc(10px + var(--safe-t)) 14px 10px}
  .topbar .brand{font-size:1.3rem}
  .topbar .brand .mark{width:30px;height:30px}
  .topbar .beruf{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--f-disp);font-weight:700;font-size:1.05rem}
  .main{padding:18px 14px calc(var(--nav-h) + 34px + var(--safe-b))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--nav-h) + var(--safe-b))}
  .tabbar a{display:grid;place-items:center;align-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:650}
  .tabbar a .ic{width:23px;height:23px}
  .tabbar a.an{color:var(--ink)}
  .tabbar a.an .ic{stroke-width:2.5}
  .raster.zwei,.raster.drei{grid-template-columns:1fr}
  .aufbau{grid-template-columns:1fr}
  .auswahl{display:flex;flex-wrap:wrap;gap:6px}
  .auswahl button{padding:6px 12px}
  .auswahl button .small{display:none}
  .auswahl button .code{min-width:0}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .demo-stack{transform:none;animation:none}
  .demo-stack::before,.demo-stack::after{display:none}
  .top .navlink{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .demo-stack{transform:none}
}
@media print{
  .side,.tabbar,.topbar,.toasts,.btn{display:none!important}
  .shell{display:block}
  body{background:#fff}
}