/* MyVLife v6 - Demo-Shell und 17 Live-Demos nach docs/DESIGNSYSTEM.md (Werkbank - Lebendes System). */

/* 1. Tokens */
:root{
  color-scheme:light;
  --papier:#F4F5F2;--flaeche:#FFFFFF;--flaeche-2:#EBEDE9;--tinte:#14181A;--graphit:#5B6360;--linie:#D6DAD4;
  --rahmen:#1F2422;--rahmen-text:#ECEEEA;--rahmen-label:#B8BFBA;--rahmen-linie:rgb(236 238 234 / .18);
  --pruefgruen:#0F7A40;--fehler:#B42318;--wartet:#8F5E14;
  --r-1:4px;--r-2:10px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  --t-micro:140ms;--t-ui:240ms;--t-gross:480ms;
  --ein:cubic-bezier(.22,.61,.36,1);--aus:cubic-bezier(.55,0,1,.45);--raum:cubic-bezier(.65,0,.35,1);
  --schatten-schwebend:0 12px 32px -8px rgb(20 24 26 / .18);
  --stimme:"Bricolage Grotesque","Instrument Sans","Segoe UI",Arial,sans-serif;
  --arbeit:"Instrument Sans","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --shell-hoehe:92px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --papier:#101311;--flaeche:#171A17;--flaeche-2:#1F2320;--tinte:#E9ECE6;--graphit:#9AA39D;--linie:#2B302C;
  --rahmen:#262B28;--rahmen-text:#ECEEEA;--rahmen-label:#B8BFBA;
  --pruefgruen:#3FD07E;--fehler:#F0716A;--wartet:#E3B04B;
  --schatten-schwebend:0 12px 32px -8px rgb(0 0 0 / .55);
}

/* 2. Basis */
*,*::before,*::after{box-sizing:border-box}
html[data-demo]{font-size:18px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html[data-demo] body{font-size:16px;text-rendering:auto}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--arbeit);line-height:1.55;font-variant-numeric:tabular-nums}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{color:inherit;font:inherit;letter-spacing:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
svg,img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--stimme);font-optical-sizing:none;text-wrap:balance;letter-spacing:-.01em}
h1,h2{font-weight:520;font-variation-settings:"opsz" 48;line-height:1.1}
h3{font-weight:560;font-variation-settings:"opsz" 24;line-height:1.2}
p{text-wrap:pretty}
small{font-size:14px;line-height:1.5}
kbd{display:inline-block;padding:1px 5px;border:1px solid var(--linie);border-radius:var(--r-1);font:500 12px/1.4 var(--mono)}
::selection{background:var(--tinte);color:var(--papier)}
:focus-visible{outline:2px solid var(--tinte);outline-offset:2px}
[hidden]{display:none!important}
::placeholder{color:var(--graphit);opacity:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;fill:none}
/* Icons, die im Fliesstext eines Knopfes stehen (statt getippter Pfeile und Pluszeichen). */
.icon-text{display:inline-block;vertical-align:-5px}
.icon-text.ist-vor{margin-right:6px}
.icon-text.ist-nach{margin-left:6px}
:is(.ghost-button,.primary-button,.secondary-button,.danger-button,.nw-button,.mobile-tab,.panel-head button,.panel-head a,.record-card-footer button,.file-row button,.issue-card>button,.desktop-layout>aside>button,.project-context>a) .icon-text{margin:0;vertical-align:0}
.leuchte{display:inline-block;width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--graphit)}
.leuchte.ist-farbe{margin-right:8px;background:currentColor;vertical-align:middle}
.leuchte.ist-gruen{background:var(--pruefgruen)}
.leuchte.ist-fehler{background:var(--fehler)}
.leuchte.ist-wartet{background:var(--wartet);animation:leuchte-wartet 1.6s ease-in-out infinite}
@keyframes leuchte-wartet{50%{opacity:.35}}
.t-mono,.mono-label{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.skip-link{position:fixed;z-index:1000;top:8px;left:8px;padding:10px 14px;transform:translateY(-200%);border:1px solid var(--linie);border-radius:var(--r-1);background:var(--tinte);color:var(--papier);font-size:14px;font-weight:500}
.skip-link:focus-visible{transform:none;outline-color:var(--tinte)}

/* 3. Buttons */
.ghost-button,.primary-button,.secondary-button,.danger-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid var(--tinte);border-radius:var(--r-1);background:transparent;color:var(--tinte);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color var(--t-micro) var(--ein),border-color var(--t-micro) var(--ein),color var(--t-micro) var(--ein)}
.primary-button{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
.primary-button:hover{border-color:var(--graphit);background:var(--graphit);color:var(--papier)}
.secondary-button:hover{background:var(--flaeche-2)}
.ghost-button{border-color:var(--graphit)}
.ghost-button:hover{border-color:var(--tinte);background:var(--flaeche-2)}
.danger-button{border-color:var(--fehler);color:var(--fehler)}
.danger-button:hover{background:var(--fehler);color:#fff}
.ghost-button:active,.primary-button:active,.secondary-button:active,.danger-button:active{transform:translateY(1px)}
.ghost-button.active,.secondary-button.active{border-color:var(--tinte);background:var(--flaeche-2);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.icon-only{width:44px;padding:0}
.button-small{min-height:36px;padding-inline:12px;font-size:14px}
.button-small.icon-only{width:36px}
.button-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.textlink{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.textlink:hover{color:var(--graphit)}

/* 4. Instrumentenleiste */
.demo-workbench{position:relative;z-index:60;display:grid;min-height:56px;grid-template-columns:auto minmax(200px,1fr) minmax(240px,1.3fr) auto;align-items:center;gap:var(--s-4);padding:6px var(--s-5);background:var(--rahmen);color:var(--rahmen-text)}
.demo-workbench :focus-visible{outline-color:var(--rahmen-text)}
.demo-brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.demo-wortmarke{font:600 18px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 24;letter-spacing:-.01em;color:var(--rahmen-text)}
.demo-brand-mono{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--rahmen-label)}
.demo-current{display:flex;min-width:0;align-items:baseline;gap:10px;padding-left:var(--s-4);border-left:1px solid var(--rahmen-linie)}
.demo-current-nummer{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--rahmen-label)}
.demo-current h1{flex:1 1 auto;overflow:hidden;margin:0;font:560 15px/1.2 var(--stimme);font-variation-settings:"opsz" 24;letter-spacing:0;color:var(--rahmen-text);text-overflow:ellipsis;white-space:nowrap}
.demo-current-bereich{flex:0 20 auto;overflow:hidden;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--rahmen-label);text-overflow:ellipsis;white-space:nowrap}
.demo-session-hud{display:flex;min-width:0;align-items:center;gap:var(--s-3);margin:0;font:400 12px/1 var(--mono);letter-spacing:.02em;color:var(--rahmen-label);white-space:nowrap}
.demo-session-hud>span,.demo-session-hud>time{display:inline-flex;align-items:center;gap:6px}
.demo-session-hud b{font-weight:500;color:var(--rahmen-text)}
.demo-session-hud .hud-lokal{color:var(--rahmen-text)}
.demo-session-hud .hud-last{display:block;flex:1 1 auto;overflow:hidden;min-width:12ch;max-width:420px;padding-left:var(--s-3);border-left:1px solid var(--rahmen-linie);color:var(--rahmen-text);line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.demo-session-hud .hud-last:empty{display:none}
.demo-experience-actions{display:flex;align-items:center;gap:6px}
.demo-workbench .ghost-button{min-height:36px;padding-inline:10px;border-color:var(--rahmen-label);color:var(--rahmen-text);font-size:14px}
.demo-workbench .ghost-button:hover{border-color:var(--rahmen-text);background:rgb(236 238 234 / .08)}
.demo-workbench .icon-only{width:36px}
.demo-workbench .primary-button{min-height:36px;padding-inline:14px;border-color:var(--rahmen-text);background:var(--rahmen-text);color:var(--rahmen);font-size:14px}
.demo-workbench .primary-button:hover{border-color:var(--rahmen-label);background:var(--rahmen-label);color:var(--rahmen)}
.demo-workbench .primary-button .icon{display:none}
.demo-experience-actions{flex:0 0 auto}
.demo-workbench kbd{margin-left:2px;border-color:var(--rahmen-linie);color:var(--rahmen-label);font-size:11px}
.demo-taskbar{position:relative;z-index:55;display:flex;min-height:36px;align-items:center;gap:var(--s-3);padding:6px var(--s-5);border-bottom:1px solid var(--linie);background:var(--flaeche);font:400 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--graphit)}
.taskbar-label{flex:0 0 auto;font-weight:500;letter-spacing:.06em;color:var(--graphit)}
.taskbar-task{min-width:0;flex:1 1 auto;color:var(--tinte)}
.taskbar-step+.taskbar-step::before{content:" · "}
.demo-taskbar .textlink{display:inline-flex;flex:0 0 auto;align-items:center;min-height:44px;margin-block:-10px;padding-inline:var(--s-2);color:var(--tinte);font:inherit}
.demo-taskbar .textlink:last-child{margin-right:calc(-1*var(--s-2))}
.demo-taskbar .taskbar-toggle{display:none}

/* 5. Buehne und Ladezustand */
.demo-root{position:relative;min-height:calc(100vh - var(--shell-hoehe))}
.demo-loading{display:grid;min-height:calc(100vh - var(--shell-hoehe));grid-template-columns:230px minmax(0,1fr)}
.demo-loading aside{border-right:1px solid var(--linie);background:var(--flaeche)}
.demo-loading section{padding:var(--s-6)}
.demo-loading section>i{display:block;width:26%;height:12px;margin-bottom:var(--s-3);border-radius:var(--r-1);background:var(--flaeche-2)}
.demo-loading section>i:nth-child(2){width:44%;height:28px}
.demo-loading section>div{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:var(--s-6) 0}
.demo-loading section b{height:96px;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.demo-loading section>span{display:block;height:44px;margin:var(--s-2) 0;border-bottom:1px solid var(--linie)}
html[data-embed]{--shell-hoehe:0px}
html[data-embed] .demo-workbench,html[data-embed] .demo-taskbar,html[data-embed] .skip-link{display:none}
html[data-embed] .demo-root{min-height:100vh}

/* 6. Dialoge, Command-Palette, Tour, Toasts */
.demo-dialog{width:min(600px,calc(100% - 32px));max-height:calc(100vh - 48px);overflow:auto;padding:0;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche);color:var(--tinte);box-shadow:var(--schatten-schwebend)}
.demo-dialog[open]{animation:dialog-ein var(--t-gross) var(--ein)}
@keyframes dialog-ein{from{transform:scale(.98)}}
.demo-dialog::backdrop{background:rgb(20 24 26 / .55)}
.demo-dialog>form{padding:var(--s-5)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.modal-head small{display:block;margin-bottom:6px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.modal-head h2{margin:0;font-size:clamp(20px,17px + .8vw,26px)}
.modal-head>button{display:grid;width:36px;height:36px;flex:0 0 auto;place-items:center;padding:0;border:1px solid var(--graphit);border-radius:var(--r-1);background:transparent;color:var(--tinte)}
.modal-head>button:hover{border-color:var(--tinte);background:var(--flaeche-2)}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--linie)}
.confirm-copy,.demo-inline-note{margin:0 0 var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--linie);border-left:2px solid var(--graphit);border-radius:0 var(--r-1) var(--r-1) 0;background:var(--flaeche-2);font-size:14px;color:var(--tinte)}
.help-dialog p,.help-dialog li{font-size:15px;color:var(--tinte)}
.help-dialog ul{display:grid;gap:6px;margin:0 0 var(--s-4);padding-left:20px}
.help-dialog .primary-button{width:100%}
.command-dialog{width:min(720px,calc(100% - 32px))}
.command-dialog .modal-head{margin:calc(-1*var(--s-5)) calc(-1*var(--s-5)) var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-2) var(--r-2) 0 0;background:var(--rahmen);color:var(--rahmen-text)}
.command-dialog .modal-head small{color:var(--rahmen-label)}
.command-dialog .modal-head>button{border-color:var(--rahmen-label);color:var(--rahmen-text)}
.command-dialog .modal-head>button:hover{border-color:var(--rahmen-text);background:rgb(236 238 234 / .08)}
.command-dialog .modal-head :focus-visible{outline-color:var(--rahmen-text)}
.command-search{position:relative;display:block;margin-bottom:var(--s-3)}
.command-search input{width:100%;height:44px;padding:0 72px 0 14px;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:16px}
.command-search input:focus{border-color:var(--tinte)}
.command-search kbd{position:absolute;top:11px;right:12px;color:var(--graphit)}
.command-results{display:grid;max-height:min(480px,55vh);overflow:auto;border-top:1px solid var(--linie);scroll-padding-block:8px}
.command-results a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:10px 6px;border-bottom:1px solid var(--linie);border-left:2px solid transparent}
.command-results a:hover,.command-results a.selected{border-left-color:var(--tinte);background:var(--flaeche-2)}
.command-results a>span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.command-results a div{display:grid;min-width:0}
.command-results strong{font-size:15px;font-weight:500}
.command-results small{overflow:hidden;font-size:13px;color:var(--graphit);text-overflow:ellipsis;white-space:nowrap}
.command-results b{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit);white-space:nowrap}
.command-results a.current b::after{content:" · geöffnet";color:var(--pruefgruen)}
.command-empty{padding:var(--s-6);font:400 13px/1.5 var(--mono);color:var(--graphit);text-align:center}
.command-hint{margin:var(--s-3) 0 0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.tour-dialog{width:min(560px,calc(100% - 32px))}
.tour-progress{height:2px;background:var(--flaeche-2)}
.tour-progress i{display:block;width:100%;height:100%;transform:scaleX(var(--tour-progress,.2));transform-origin:left;background:var(--pruefgruen);transition:transform var(--t-ui) var(--ein)}
.tour-dialog>form>p{min-height:72px;font-size:16px;line-height:1.6}
.tour-actions{display:flex;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--linie)}
.tour-actions button{min-width:120px}
.tour-actions [data-tour-next]{margin-left:auto}
.toast-region{position:fixed;z-index:300;bottom:var(--s-4);left:var(--s-4);display:grid;width:min(380px,calc(100% - 32px));gap:var(--s-2)}
.toast{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:1px solid var(--rahmen-linie);border-radius:var(--r-2);background:var(--rahmen);color:var(--rahmen-text);box-shadow:var(--schatten-schwebend);animation:toast-ein var(--t-ui) var(--ein)}
@keyframes toast-ein{from{transform:translateY(8px);opacity:.01}}
.toast-icon{display:grid;width:20px;height:20px;flex:0 0 auto;place-items:center;margin-top:2px;color:var(--pruefgruen)}
.toast.error .toast-icon{color:var(--fehler)}
.toast p{display:grid;flex:1;gap:2px;margin:0;font-size:14px}
.toast p strong{font-weight:500}
.toast p small{font:400 12px/1.5 var(--mono);color:var(--rahmen-label)}
.toast>button{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;padding:0;border:0;background:none;color:var(--rahmen-label)}
.toast>button:hover{color:var(--rahmen-text)}
.toast>button:focus-visible{outline-color:var(--rahmen-text)}

/* 7. Anwendungs-Shell (Sidebar, Kopfzeile, Inhalt) */
.app-shell{display:grid;min-height:calc(100vh - var(--shell-hoehe));grid-template-columns:230px minmax(0,1fr)}
.app-sidebar{position:sticky;top:0;display:flex;max-height:100vh;flex-direction:column;overflow:auto;padding:var(--s-5) var(--s-4);border-right:1px solid var(--linie);background:var(--flaeche)}
.app-identity{display:flex;align-items:center;gap:10px;padding:0 0 var(--s-5);border-bottom:1px solid var(--linie)}
.app-identity>span{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border-radius:var(--r-1);background:var(--tinte);color:var(--papier);font:600 13px/1 var(--stimme)}
.app-identity div{display:grid;min-width:0}
.app-identity strong{overflow:hidden;font:560 15px/1.2 var(--stimme);font-variation-settings:"opsz" 24;text-overflow:ellipsis;white-space:nowrap}
.app-identity small{overflow:hidden;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--graphit);text-overflow:ellipsis;white-space:nowrap}
.app-nav-label{display:block;margin:var(--s-5) 0 var(--s-2);font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.app-nav{display:grid}
.app-nav button{display:flex;min-height:44px;align-items:center;gap:10px;padding:0 10px;border:0;border-left:2px solid transparent;background:transparent;color:var(--tinte);font-size:15px;font-weight:500;text-align:left;transition:background-color var(--t-micro) var(--ein)}
.app-nav button:hover{background:var(--flaeche-2)}
.app-nav button.active{border-left-color:var(--tinte);background:var(--flaeche-2)}
.nav-copy{display:grid;min-width:0;flex:1}
.nav-copy strong{font-weight:500;line-height:1.25}
.nav-icon{display:none}
.nav-count{margin-left:auto;padding:2px 6px;border:1px solid var(--linie);border-radius:var(--r-1);font:500 12px/1.2 var(--mono);color:var(--graphit)}
.sidebar-foot{display:grid;gap:var(--s-3);margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--linie)}
.sidebar-user{display:flex;align-items:center;gap:10px}
.sidebar-user>div{display:grid;min-width:0}
.sidebar-user strong{overflow:hidden;font-size:14px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user small{overflow:hidden;font:400 12px/1.4 var(--mono);color:var(--graphit);text-overflow:ellipsis;white-space:nowrap}
.user-avatar,.table-avatar{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border:1px solid var(--linie);border-radius:50%;background:var(--flaeche-2);color:var(--tinte);font:500 12px/1 var(--mono)}
.sidebar-security{display:flex;align-items:center;gap:8px;font:400 12px/1.4 var(--mono);color:var(--graphit)}
.app-main{min-width:0;background:var(--papier)}
.app-topbar{position:sticky;z-index:30;top:0;display:flex;min-height:56px;align-items:center;justify-content:space-between;gap:var(--s-4);padding:8px var(--s-6);border-bottom:1px solid var(--linie);background:var(--papier)}
.app-breadcrumb{display:flex;min-width:0;align-items:center;gap:8px;font:400 13px/1.4 var(--mono);color:var(--graphit)}
.app-breadcrumb i{font-style:normal}
.app-breadcrumb strong{overflow:hidden;font-weight:500;color:var(--tinte);text-overflow:ellipsis;white-space:nowrap}
.app-topbar-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-2)}
.app-sync{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--mono);letter-spacing:.02em;color:var(--graphit)}
.app-sync i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pruefgruen)}
.top-search,.search-field{position:relative;display:block}
.top-search input,.search-field input{width:260px;height:44px;padding:0 14px 0 40px;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:15px}
.top-search input:focus,.search-field input:focus{border-color:var(--tinte)}
.top-search .icon,.search-field .icon,.top-search>span,.search-field>span{position:absolute;top:12px;left:12px;pointer-events:none;color:var(--graphit)}
.mobile-app-toggle{display:none}
.app-content{width:min(100%,1600px);margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-8)}
.mobile-tabs{display:none;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-5)}
.mobile-tab{display:inline-flex;min-height:44px;flex:0 0 auto;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--graphit);border-radius:var(--r-1);background:var(--flaeche);font-size:14px;font-weight:500;white-space:nowrap}
.mobile-tab.active{border-color:var(--tinte);background:var(--flaeche-2);color:var(--tinte);box-shadow:inset 0 -2px 0 var(--tinte)}
.mobile-tab .nav-count{margin:0;border-color:currentColor;color:inherit}
.content-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--linie)}
.content-heading>div{min-width:0}
.content-heading>div>small{display:block;margin-bottom:6px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.content-heading h2{margin:0;font-size:clamp(24px,20px + 1vw,32px);letter-spacing:-.015em}
.content-heading p{max-width:66ch;margin:6px 0 0;font-size:15px;color:var(--graphit)}
.content-heading-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* 8. Gemeinsame Bausteine */
.panel,.detail-card,.record-card,.kpi-card,.status-main,.status-mini,.table-shell,.empty-state,.final-app{border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.panel,.detail-card{min-width:0;padding:var(--s-5)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.panel-head h3{margin:0;font-size:18px}
.panel-head p{margin:4px 0 0;font-size:13px;color:var(--graphit)}
.panel-head a,.panel-head button{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:36px;margin-block:-8px;padding:0;border:0;background:transparent;color:var(--tinte);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.panel-head a:hover,.panel-head button:hover{color:var(--graphit)}
.panel>h3{margin-bottom:var(--s-4);font-size:18px}
.panel-span{grid-column:1/-1}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.kpi-card{display:grid;align-content:start;gap:4px;padding:var(--s-4) var(--s-5)}
.kpi-card>small{order:-1;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.kpi-card>strong{margin:8px 0 2px;font:600 clamp(26px,22px + 1vw,34px)/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em;overflow-wrap:anywhere}
.kpi-card>span{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.kpi-card.warning>span{color:var(--wartet)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:var(--s-3)}
.chart{display:flex;height:180px;align-items:flex-end;gap:8px;padding-top:var(--s-5);border-bottom:1px solid var(--linie)}
.chart>div{position:relative;flex:1;min-width:10px;background:var(--tinte);border-radius:2px 2px 0 0}
.chart>div::after{position:absolute;right:0;bottom:-22px;left:0;font:400 12px/1 var(--mono);color:var(--graphit);content:attr(data-label);text-align:center}
.chart .h20{height:20%}.chart .h28{height:28%}.chart .h35{height:35%}.chart .h42{height:42%}.chart .h48{height:48%}.chart .h55{height:55%}.chart .h62{height:62%}.chart .h68{height:68%}.chart .h75{height:75%}.chart .h82{height:82%}.chart .h90{height:90%}
.activity-list,.compact-list{display:grid}
.activity-item,.compact-item{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--linie)}
.activity-item:last-child,.compact-item:last-child{border-bottom:0}
.activity-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--graphit)}
.activity-item p,.compact-item p{display:grid;flex:1;min-width:0;margin:0;font-size:14px}
.activity-item p strong,.compact-item p strong{font-weight:500}
.activity-item p small,.compact-item p small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.activity-item time,.compact-item>small{flex:0 0 auto;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.progress-row{display:grid;grid-template-columns:minmax(80px,120px) 1fr 44px;gap:var(--s-3);align-items:center;margin:10px 0}
.progress-row>span{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.progress-row>b{font:500 13px/1 var(--mono);text-align:right}
.progress-track{height:6px;overflow:hidden;border-radius:2px;background:var(--flaeche-2)}
.progress-track i{display:block;height:100%;background:var(--tinte)}
.progress-track .w0{width:0}.progress-track .w10{width:10%}.progress-track .w20{width:20%}.progress-track .w30{width:30%}.progress-track .w40{width:40%}.progress-track .w50{width:50%}.progress-track .w60{width:60%}.progress-track .w70{width:70%}.progress-track .w80{width:80%}.progress-track .w90{width:90%}.progress-track .w100{width:100%}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);font-size:14px;color:var(--graphit)}
.toolbar>span,.toolbar>div>strong{font:500 13px/1.4 var(--mono);color:var(--graphit)}
.toolbar-group{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.toolbar select,.form-field select{height:44px;padding:0 36px 0 12px;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:15px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6360' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");background-position:right 8px center;background-size:20px 20px;background-repeat:no-repeat}
html[data-theme="dark"] .toolbar select,html[data-theme="dark"] .form-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239AA39D' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E")}
.toolbar select:focus,.form-field select:focus{border-color:var(--tinte)}
.table-shell{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:12px 16px;border-bottom:1px solid var(--linie);font-size:14px;text-align:left;vertical-align:middle}
.data-table th{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.data-table td{font-variant-numeric:tabular-nums}
.data-table td strong{font-weight:500}
.data-table td small{display:block;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--flaeche-2)}
.table-person{display:flex;align-items:center;gap:10px}
.table-person div{display:grid;min-width:0}
.table-person strong{font-size:14px;font-weight:500}
.table-person small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.table-actions{display:flex;gap:4px;justify-content:flex-end}
.table-actions button{display:grid;width:36px;height:36px;place-items:center;padding:0;border:1px solid var(--linie);border-radius:var(--r-1);background:transparent;color:var(--tinte);font:500 14px/1 var(--mono)}
.table-actions button:hover{border-color:var(--tinte);background:var(--flaeche-2)}
.status-badge{display:inline-flex;align-items:center;justify-self:start;gap:6px;padding:3px 8px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);color:var(--graphit);font:500 12px/1.4 var(--mono);letter-spacing:.02em;white-space:nowrap}
.status-badge::before{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:currentColor;content:""}
.status-badge.success,.status-badge.status-freigegeben,.status-badge.status-erledigt,.status-badge.status-repariert,.status-badge.status-tolerante-suche,.status-badge.status-live,.status-badge.status-produktionsbereit,.status-badge.status-aktiv,.status-badge.status-niedrig{border-color:color-mix(in srgb,var(--pruefgruen) 45%,var(--linie));color:var(--pruefgruen)}
.status-badge.warning,.status-badge.status-in-arbeit,.status-badge.status-pruefung,.status-badge.status-prufung,.status-badge.status-in-pruefung,.status-badge.status-offen,.status-badge.status-in-umsetzung,.status-badge.status-abnahme,.status-badge.status-entwurf,.status-badge.status-hoch,.phase-head .status-badge.status-aktiv{border-color:color-mix(in srgb,var(--wartet) 45%,var(--linie));color:var(--wartet)}
.workflow-canvas .status-badge.accent{border-color:color-mix(in srgb,var(--wartet) 45%,var(--linie));color:var(--wartet)}
.workflow-canvas .status-badge.accent::before{animation:leuchte-wartet 1.6s ease-in-out infinite}
.status-badge.danger,.status-badge.status-fehler-aktiv,.status-badge.status-gross-kleinschreibung-fehlerhaft,.status-badge.status-kritisch{border-color:color-mix(in srgb,var(--fehler) 45%,var(--linie));color:var(--fehler)}
.status-badge.accent{color:var(--tinte)}
.priority-high{color:var(--fehler)}
.priority-medium{color:var(--wartet)}
.priority-low{color:var(--pruefgruen)}
.priority-high,.priority-medium,.priority-low{font:500 13px/1.4 var(--mono)}
.sort-button{padding:0;border:0;background:none;color:inherit;font:inherit}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.record-card{display:flex;min-width:0;flex-direction:column;padding:var(--s-5)}
.record-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.record-card-head>div{min-width:0}
.record-card h3{margin:0;font-size:18px}
.record-card-head small{display:block;margin-top:4px;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.record-card>p{font-size:14px;color:var(--graphit)}
.record-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);margin:var(--s-4) 0;padding:var(--s-3) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.record-meta div{display:grid;gap:2px;min-width:0}
.record-meta small{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.record-meta strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.record-card-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);margin-top:auto;padding-top:var(--s-3)}
.record-card-footer span{min-width:0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.record-card-footer button{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:36px;margin-block:-8px;padding:0;border:0;background:none;color:var(--tinte);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;white-space:nowrap}
.record-card-footer .table-actions button{display:grid;min-height:0;margin:0;gap:0;text-decoration:none}
.empty-state{display:grid;min-height:280px;place-content:center;justify-items:center;gap:6px;padding:var(--s-6);text-align:center}
.empty-state>span{display:grid;width:44px;height:44px;place-items:center;margin-bottom:var(--s-3);border:1px solid var(--linie);border-radius:var(--r-1);color:var(--graphit);font:500 16px/1 var(--mono)}
.empty-state h3{margin:0;font-size:18px}
.empty-state p{max-width:42ch;margin:0 0 var(--s-3);font-size:14px;color:var(--graphit)}
.pipeline-board{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2)}
.pipeline-column{min-height:480px;padding:var(--s-3);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche-2);transition:border-color var(--t-micro) var(--ein)}
.pipeline-column.drag-over{border-color:var(--tinte)}
.pipeline-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.pipeline-head div{display:flex;align-items:center;gap:8px;min-width:0}
.pipeline-head i{display:none}
.pipeline-head strong{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.pipeline-head span{font:500 12px/1.4 var(--mono);color:var(--tinte)}
.pipeline-total{display:block;margin-bottom:var(--s-3);padding-bottom:var(--s-2);border-bottom:1px solid var(--linie);font:400 12px/1.4 var(--mono);color:var(--graphit)}
.lead-card{margin-bottom:var(--s-2);padding:var(--s-3);border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);cursor:grab;transition:border-color var(--t-micro) var(--ein)}
.lead-card:hover{border-color:var(--tinte)}
.lead-card:active{cursor:grabbing}
.lead-card.dragging{opacity:.45}
.lead-card strong{display:block;font-size:14px;font-weight:500}
.lead-card>span{font-size:13px;color:var(--graphit)}
.lead-card footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.lead-card footer span{font:500 13px/1 var(--mono)}
.lead-card footer i{display:grid;width:24px;height:24px;place-items:center;border:1px solid var(--linie);border-radius:50%;font:500 10px/1 var(--mono);font-style:normal;color:var(--graphit)}
.tabs{display:flex;gap:var(--s-1);margin-bottom:var(--s-4);border-bottom:1px solid var(--linie)}
.tabs button{padding:10px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--graphit);font-size:14px;font-weight:500}
.tabs button.active{border-color:var(--tinte);color:var(--tinte)}
.detail-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:var(--s-3);align-items:start}
.detail-hero{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.detail-hero .user-avatar{width:48px;height:48px;font-size:14px}
.detail-hero>div{min-width:0;flex:1}
.detail-hero h2{margin:0;font-size:22px}
.detail-hero p{margin:2px 0 0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4);margin-bottom:var(--s-5)}
.detail-field{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--linie)}
.detail-field small{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.detail-field span{font-size:14px;overflow-wrap:anywhere}
.note-list{display:grid;gap:var(--s-2)}
.note-item{padding:10px 12px;border:1px solid var(--linie);border-left:2px solid var(--tinte);border-radius:0 var(--r-1) var(--r-1) 0;background:var(--flaeche-2)}
.note-item p{margin:0;font-size:14px}
.note-item small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.file-row{display:flex;align-items:center;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--linie)}
.file-row:last-child{border:0}
.file-icon{display:grid;min-width:32px;height:24px;flex:0 0 auto;place-items:center;padding:0 6px;border:1px solid var(--linie);border-radius:var(--r-1);font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.file-row p{display:grid;flex:1;min-width:0;margin:0;font-size:14px}
.file-row p strong{overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.file-row p small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.file-row button{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-block:-8px;padding:0;border:0;background:none;color:var(--tinte);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.form-stack{display:grid;gap:var(--s-4)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4)}
.form-field{display:grid;gap:6px}
.form-field>span,.field-label{display:block;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.field-label{margin-bottom:var(--s-2)}
.form-field input,.form-field textarea{width:100%;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:16px}
.form-field select{width:100%}
.form-field input{height:44px;padding:0 12px}
.form-field textarea{min-height:104px;padding:10px 12px;resize:vertical}
.form-field input:focus,.form-field textarea:focus{border-color:var(--tinte)}
.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"]{border-color:var(--fehler);box-shadow:inset 0 0 0 1px var(--fehler)}
.form-error{display:flex;align-items:center;gap:6px;min-height:18px;font:500 12px/1.5 var(--mono);color:var(--fehler)}
.form-error .icon{width:16px;height:16px}
.checkbox-field{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px}
.checkbox-field input,.check-card input,.project-task input,.requirement-list input,.landing-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--tinte)}
.checkbox-field input{width:20px;height:20px;margin:0}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--linie);cursor:pointer}
.setting-row span{display:grid;gap:2px}
.setting-row strong{font-size:15px;font-weight:500}
.setting-row small{font-size:13px;color:var(--graphit)}
.setting-row input{width:44px;height:24px;flex:0 0 auto;accent-color:var(--tinte)}
.settings-panel .setting-row:last-child{border-bottom:0}
.task-check{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;padding:0;border:1px solid var(--graphit);border-radius:var(--r-1);background:transparent;color:var(--graphit);font:500 12px/1 var(--mono)}
.task-check.done{border-color:var(--pruefgruen);color:var(--pruefgruen)}
.skill-tags{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s-3) 0;padding:0;list-style:none}
.skill-tags li{padding:3px 8px;border:1px solid var(--linie);border-radius:var(--r-1);font:400 12px/1.5 var(--mono);color:var(--graphit)}
.task-list{display:grid;margin:var(--s-2) 0}
.project-task{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--linie);font-size:14px;cursor:pointer}
.project-task:last-child{border-bottom:0}
.calculator-admin-link{width:100%;margin-top:var(--s-2)}
.workflow-history-head{margin-top:var(--s-5)}

/* 9. Assistenten, Rechner, Konfigurator */
.wizard-shell{max-width:960px;margin:0 auto}
.stepper{display:flex;align-items:center;margin-bottom:var(--s-5)}
.stepper-item{display:flex;align-items:center}
.stepper-item>span{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--graphit);border-radius:var(--r-1);color:var(--graphit);font:500 12px/1 var(--mono)}
.stepper-item.active>span{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
.stepper-item.done>span{border-color:var(--pruefgruen);color:var(--pruefgruen)}
.stepper-item>i{width:56px;height:1px;background:var(--linie)}
.stepper-item.done>i{background:var(--pruefgruen)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.choice-card{display:grid;min-height:150px;align-content:space-between;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche);text-align:left;transition:border-color var(--t-micro) var(--ein)}
.choice-card:hover{border-color:var(--tinte)}
.choice-card.selected{border-color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.choice-card>span{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--linie);border-radius:var(--r-1);font:500 13px/1 var(--mono);color:var(--graphit)}
.choice-card strong{display:block;font-size:16px;font-weight:500}
.choice-card small{font-size:13px;color:var(--graphit)}
.choice-card>b{font:500 12px/1.4 var(--mono);color:var(--tinte)}
.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--linie)}
.wizard-actions>span{font:400 12px/1.4 var(--mono);color:var(--graphit)}
.date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.date-grid button{display:grid;min-height:64px;place-content:center;gap:2px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);font:500 16px/1 var(--stimme)}
.date-grid button span{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.date-grid button:hover{border-color:var(--tinte)}
.date-grid button.selected{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
.date-grid button.selected span{color:var(--papier)}
.time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.time-grid button{min-height:44px;padding:10px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);font:500 14px/1.2 var(--mono)}
.time-grid button:hover{border-color:var(--tinte)}
.time-grid button.selected{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
.time-grid button:disabled{opacity:.4}
.time-grid button small{display:block;font:400 11px/1.4 var(--mono);color:inherit}
.booking-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
.booking-summary div{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--linie)}
.booking-summary small{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.booking-summary strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}
.success-state{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-7) var(--s-5);text-align:center}
.success-state>span{display:grid;width:56px;height:56px;place-items:center;border:1px solid var(--pruefgruen);border-radius:var(--r-1);color:var(--pruefgruen);font:500 22px/1 var(--mono)}
.success-state>span .icon{width:24px;height:24px}
.success-state h2{margin:var(--s-3) 0 0;font-size:clamp(22px,18px + 1vw,30px)}
.success-state p{max-width:56ch;font-size:15px;color:var(--graphit)}
.success-state .booking-summary{width:min(560px,100%);text-align:left}
.confirmation-code{padding:8px 14px;border:1px solid var(--linie);border-radius:var(--r-1);font:500 13px/1.4 var(--mono);letter-spacing:.08em}
.calculator-layout,.config-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:var(--s-3);align-items:start}
.calculator-form,.config-form{display:grid;gap:var(--s-5)}
.range-field{display:grid;gap:4px}
.range-field header{display:flex;justify-content:space-between;align-items:baseline}
.range-field header span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.range-field header strong{font:500 13px/1 var(--mono)}
.range-field input{width:100%;height:44px;margin:0;accent-color:var(--tinte)}
.range-scale{display:flex;justify-content:space-between;font:400 12px/1.4 var(--mono);color:var(--graphit)}
.range-scale i{font-style:normal}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check-card{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);cursor:pointer;transition:border-color var(--t-micro) var(--ein)}
.check-card:hover{border-color:var(--tinte)}
.check-card:has(input:checked){border-color:var(--tinte);background:var(--flaeche-2)}
.check-card span{display:grid;font-size:14px;font-weight:500}
.check-card small{font:400 12px/1.5 var(--mono);font-weight:400;color:var(--graphit)}
.price-summary{position:sticky;top:72px;padding:var(--s-5);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.price-summary>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.price-summary>strong{display:block;margin:8px 0 4px;font:600 clamp(28px,24px + 1vw,38px)/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.price-summary>p{margin:0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.price-lines{display:grid;margin:var(--s-4) 0;border-top:1px solid var(--linie)}
.price-line{display:flex;justify-content:space-between;gap:var(--s-4);padding:8px 0;border-bottom:1px solid var(--linie);font-size:14px}
.price-line span{color:var(--graphit)}
.price-line b{font:500 13px/1.5 var(--mono);text-align:right;overflow-wrap:anywhere}
.price-total{display:flex;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);font-size:15px;font-weight:500}
.price-total strong{font:500 15px/1.5 var(--mono)}
.price-summary .primary-button,.price-summary .secondary-button{width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:10px}
.config-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.config-type{display:grid;min-height:96px;place-content:center;justify-items:center;gap:6px;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche);transition:border-color var(--t-micro) var(--ein)}
.config-type span{font:500 14px/1 var(--mono);color:var(--graphit)}
.config-type strong{font-size:14px;font-weight:500;text-align:center}
.config-type:hover{border-color:var(--tinte)}
.config-type.selected{border-color:var(--tinte);box-shadow:inset 0 0 0 1px var(--tinte)}
.scope-meter{display:flex;gap:4px;margin:var(--s-4) 0 var(--s-2)}
.scope-meter i{height:6px;flex:1;background:var(--flaeche-2)}
.scope-meter i.active{background:var(--tinte)}
.scope-meter+strong{display:block;font-size:16px;font-weight:500}
.config-preview{margin-top:var(--s-3);overflow:hidden;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche-2)}
.config-preview header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.config-preview header b{font:500 12px/1.4 var(--mono)}
.config-preview header span{display:none}
.config-preview main{display:grid;min-height:160px;place-content:center;gap:6px;padding:var(--s-5);text-align:center}
.config-preview main small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.config-preview main strong{font:560 18px/1.2 var(--stimme);font-variation-settings:"opsz" 24}
.config-preview main i{display:none}

/* 10. Automatisierung und Monitoring */
.workflow-selector{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:var(--s-4)}
.workflow-selector button{display:grid;min-height:64px;justify-items:start;gap:4px;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);color:var(--tinte);font-size:14px;font-weight:500;text-align:left;transition:border-color var(--t-micro) var(--ein)}
.workflow-selector button span{font:500 12px/1 var(--mono);color:var(--graphit)}
.workflow-selector button:hover{border-color:var(--tinte)}
.workflow-selector button.selected{border-color:var(--tinte);background:var(--flaeche-2);box-shadow:inset 2px 0 0 var(--tinte)}
.workflow-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:var(--s-3);align-items:start}
.workflow-step{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:12px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);color:var(--graphit);transition:border-color var(--t-ui) var(--ein),color var(--t-ui) var(--ein)}
.workflow-step.running{border-color:var(--wartet);color:var(--tinte)}
.workflow-step.complete{border-color:var(--linie);color:var(--tinte)}
.workflow-step.error{border-color:var(--fehler);color:var(--tinte)}
.workflow-step>span{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--linie);border-radius:var(--r-1);font:500 12px/1 var(--mono);color:var(--graphit)}
.workflow-step.running>span{border-color:var(--wartet);color:var(--wartet);animation:leuchte-wartet 1.6s ease-in-out infinite}
.workflow-step.complete>span{border-color:var(--pruefgruen);color:var(--pruefgruen)}
.workflow-step.error>span{border-color:var(--fehler);color:var(--fehler)}
.workflow-step div{display:grid;min-width:0}
.workflow-step strong{font-size:14px;font-weight:500}
.workflow-step small{font-size:13px;color:var(--graphit)}
.workflow-step>i{font:400 12px/1.4 var(--mono);font-style:normal;color:var(--graphit);white-space:nowrap}
.workflow-step.running>i{color:var(--wartet)}
.workflow-connector{width:1px;height:16px;margin-left:28px;background:var(--linie)}
.workflow-connector.complete{background:var(--pruefgruen)}
.data-stream{display:grid;border-top:1px solid var(--linie)}
.data-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-3);padding:8px 0;border-bottom:1px solid var(--linie);font:400 13px/1.5 var(--mono)}
.data-row span{color:var(--graphit)}
.data-row b{font-weight:500;overflow-wrap:anywhere}
.workflow-result{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--linie);border-left:2px solid var(--pruefgruen);border-radius:0 var(--r-1) var(--r-1) 0;background:var(--flaeche-2)}
.workflow-result strong{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--pruefgruen)}
.workflow-result strong::before{content:"bestanden · "}
.workflow-result p{margin:4px 0 0;font-size:14px}
.workflow-result.error{border-left-color:var(--fehler)}
.workflow-result.error strong{color:var(--fehler)}
.workflow-result.error strong::before{content:"fehler · "}
.status-overview{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-3)}
.status-main{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5)}
.status-main>div:last-child{min-width:0}
.uptime-ring{display:grid;flex:0 0 auto;gap:6px;padding-right:var(--s-5);border-right:1px solid var(--linie)}
.uptime-ring strong{font:600 34px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.uptime-ring small{font:400 11px/1.4 var(--mono);color:var(--graphit)}
.status-main h2{margin:0;font-size:20px}
.status-main p{margin:4px 0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.status-main span{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.4 var(--mono);color:var(--pruefgruen)}
.status-mini{display:grid;align-content:center;gap:2px;padding:var(--s-4) var(--s-5)}
.status-mini>span{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.status-mini>span i{width:8px;height:8px;border-radius:50%;background:var(--pruefgruen)}
.status-mini strong{margin:8px 0 2px;font:600 24px/1 var(--stimme);font-variation-settings:"opsz" 48}
.status-mini small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.service-status-list{display:grid}
.service-status{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(90px,120px)) auto;gap:var(--s-3);align-items:center;padding:12px 0;border-bottom:1px solid var(--linie)}
.service-status:last-child{border-bottom:0}
.service-status>div{display:flex;align-items:center;gap:10px;min-width:0}
.service-status>div i{display:none}
.service-status>div>span{display:grid;min-width:0}
.service-status strong{font-size:14px;font-weight:500}
.service-status span,.service-status small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.service-status>div strong{color:var(--tinte)}
.log-list{display:grid}
.log-row{display:grid;grid-template-columns:132px 96px minmax(0,1fr);gap:var(--s-3);padding:8px 0;border-bottom:1px solid var(--linie);font:400 13px/1.5 var(--mono)}
.log-row:last-child{border-bottom:0}
.log-row time,.log-row span{color:var(--graphit)}
.log-row strong{font-weight:500}

/* 11. Kundenportal und MVP (Login-Ansichten) */
.portal-login,.mvp-login{display:grid;min-height:calc(100vh - var(--shell-hoehe));grid-template-columns:1.1fr .9fr;background:var(--papier)}
/* Login und Portal tragen dieselbe Identitaet: Tinte statt einer Produktfarbe, die nach dem Anmelden verschwindet. */
.portal-login,.mvp-login{--produkt:var(--tinte)}
.portal-login>section,.mvp-login>section{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-6) 6%;border-right:1px solid var(--linie);background:var(--flaeche)}
.portal-login>section>div,.mvp-login>section>div{max-width:640px;margin-block:0}
.portal-login .demo-brand,.mvp-login .demo-brand,.bug-lab .demo-brand,.project-cockpit .demo-brand{display:inline-flex;align-items:center;gap:10px;font:560 16px/1 var(--stimme)}
.portal-login .demo-brand span,.mvp-login .demo-brand span,.bug-lab .demo-brand span,.project-cockpit .demo-brand span{display:grid;width:32px;height:32px;place-items:center;border-radius:var(--r-1);background:var(--tinte);color:var(--papier);font:600 14px/1 var(--stimme)}
.portal-login>section small,.mvp-login>section small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.portal-login h1,.mvp-login h1{margin:var(--s-4) 0;font-size:clamp(34px,26px + 2.4vw,60px);letter-spacing:-.02em;line-height:1.04}
.mvp-login h1 em{font-style:normal;color:inherit}
.portal-login>section p,.mvp-login>section p{max-width:56ch;font-size:17px;color:var(--graphit)}
.mvp-login>section>ul{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0;padding:0;list-style:none}
.mvp-login>section>ul li{font:400 13px/1.5 var(--mono);color:var(--graphit)}
.mvp-login>section>ul li::before{margin-right:6px;color:var(--pruefgruen);content:"[ok]"}
.demo-credentials{display:grid;max-width:520px;grid-template-columns:1fr auto 1fr;gap:var(--s-3);align-items:center;margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche-2)}
.demo-credentials span{display:grid;min-width:0}
.demo-credentials small{color:var(--graphit)}
.demo-credentials strong{overflow:hidden;font:500 13px/1.5 var(--mono);text-overflow:ellipsis}
.demo-credentials button{min-height:36px;padding:0 12px;border:1px solid var(--graphit);border-radius:var(--r-1);background:var(--flaeche);font-size:14px;font-weight:500}
.demo-credentials button:hover{border-color:var(--tinte)}
.portal-login>form,.mvp-login>form{display:grid;width:min(420px,calc(100% - 40px));align-self:start;justify-self:center;gap:var(--s-3);margin:calc(var(--s-6) + 32px + var(--s-6)) 0 var(--s-6);padding:var(--s-6);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.portal-login>form>div:first-child,.mvp-login>form>div:first-child{display:grid;justify-items:center;margin-bottom:var(--s-2);text-align:center}
.portal-login>form .user-avatar,.mvp-login>form .user-avatar{width:48px;height:48px;margin-bottom:10px;font-size:14px}
.portal-login>form h2,.mvp-login>form h2{margin:0;font-size:22px}
.portal-login>form p,.mvp-login>form p{margin:4px 0 0;font:400 12px/1.5 var(--mono);color:var(--graphit)}
.portal-order{display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(90px,.6fr) 48px;gap:var(--s-3);align-items:center;padding:12px 0;border-bottom:1px solid var(--linie)}
.portal-order:last-child{border-bottom:0}
.portal-order>div:first-child{display:grid;min-width:0}
.portal-order strong{font-size:14px;font-weight:500}
.portal-order small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.portal-order>b{font:500 13px/1 var(--mono);text-align:right}
.message-layout{max-width:900px;margin-inline:auto}
.message-thread{padding:0}
.message-thread>.panel-head{margin:0;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--linie)}
.messages{display:grid;gap:var(--s-3);max-height:460px;overflow:auto;padding:var(--s-5)}
.message{display:flex;gap:10px;max-width:76%}
.message>span{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;border:1px solid var(--linie);border-radius:50%;background:var(--flaeche-2);font:500 11px/1 var(--mono)}
.message>div{min-width:0;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.message strong{font:500 12px/1.4 var(--mono);color:var(--graphit)}
.message p{margin:4px 0;font-size:14px}
.message small{font:400 12px/1.4 var(--mono);color:var(--graphit)}
.message.own{justify-self:end;flex-direction:row-reverse}
.message.own>div{background:var(--flaeche-2)}
.message-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-top:1px solid var(--linie)}
.message-form textarea{min-height:56px;padding:10px 12px;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:15px;resize:vertical}
.message-form textarea:focus{border-color:var(--tinte)}
.message-form .form-error{grid-column:1/-1}
.mvp-signal{display:grid;min-height:220px;align-content:center;justify-items:center;gap:8px;padding:var(--s-4);text-align:center}
.mvp-signal i{display:none}
.mvp-signal strong{font:560 18px/1.2 var(--stimme);font-variation-settings:"opsz" 24}
.mvp-signal p{max-width:36ch;margin:0;font-size:14px;color:var(--graphit)}
.detail-card .danger-button[data-portal-logout]{border-color:var(--tinte);color:var(--tinte)}
.detail-card .danger-button[data-portal-logout]:hover{background:var(--flaeche-2);color:var(--tinte)}

/* 12. Legacy-Modernisierung und Software-Rettung */
.version-switch{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)}
.version-switch button{min-height:44px;padding:0 14px;border:1px solid var(--tinte);border-radius:var(--r-1);background:var(--flaeche);font-size:14px;font-weight:500}
.version-switch button.active{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
.version-switch>span{margin-left:auto;font:400 12px/1.4 var(--mono);color:var(--graphit)}
.modernization-frame{overflow:hidden;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.modernization-frame>header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--linie)}
.modernization-frame>header small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.modernization-frame>header h3{margin:6px 0 0;font-size:20px}
.modern-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding:var(--s-4) var(--s-5) 0}
.modern-kpis article{display:grid;gap:4px;padding:var(--s-3) var(--s-4);border:1px solid var(--linie);border-radius:var(--r-2)}
.modern-kpis small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.modern-kpis strong{font:600 24px/1 var(--stimme);font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.modernization-search{position:relative;display:grid;gap:6px;padding:var(--s-4) var(--s-5)}
.modernization-search span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.modernization-search input{height:44px;padding:0 40px 0 12px;border:1px solid var(--graphit);border-radius:var(--r-1);outline:0;background:var(--flaeche);font-size:15px}
.modernization-search input:focus{border-color:var(--tinte)}
.modernization-search i{position:absolute;right:calc(var(--s-5) + 12px);bottom:calc(var(--s-4) + 12px);font:400 14px/1 var(--mono);font-style:normal;color:var(--graphit)}
.modernization-frame .table-shell{margin:0 var(--s-5) var(--s-5)}
.modernization-table{min-width:720px}
.modernization-frame.is-legacy{color-scheme:light;border:2px outset #c8c8c8;border-radius:0;background:#d5d5d5;color:#101010;font-family:Tahoma,Arial,sans-serif}
.is-legacy>header{border-bottom:1px solid #8a8a8a;background:linear-gradient(#174aa2,#082d75);color:#fff}
.is-legacy>header small,.is-legacy>header h3{font-family:Tahoma,Arial,sans-serif;color:#fff;letter-spacing:0}
.is-legacy>header h3{font-size:16px;font-weight:700}
.legacy-button{min-height:24px;padding:4px 10px;border:2px outset #eee;border-radius:0;background:#d4d0c8;color:#111;font:700 12px/1.2 Tahoma,Arial,sans-serif}
.legacy-button:active{border-style:inset}
.legacy-menu{display:flex;border-bottom:1px solid #777;background:#d4d0c8}
.legacy-menu button{padding:6px 12px;border:0;border-radius:0;background:none;color:#111;font:12px/1.2 Tahoma,Arial,sans-serif}
.legacy-menu button:last-child{min-width:34px}
.is-legacy .modernization-search{gap:4px;padding:10px;background:#c7c7c7}
.is-legacy .modernization-search span{font:12px Tahoma,Arial,sans-serif;letter-spacing:0;color:#111}
.is-legacy .modernization-search input{height:28px;border:2px inset #fff;border-radius:0;background:#fff;color:#111;font:12px Tahoma,Arial,sans-serif}
.is-legacy .modernization-search i{right:20px;bottom:16px;color:#111}
.is-legacy .table-shell{margin:0 10px 10px;border:2px inset #fff;border-radius:0;background:#fff}
.is-legacy .data-table{color:#111;font:12px Tahoma,Arial,sans-serif}
.is-legacy .data-table th{border-color:#888;background:#c6c6c6;color:#111;font:700 12px Tahoma,Arial,sans-serif;letter-spacing:0;padding:6px 8px}
.is-legacy .data-table td{padding:5px 8px;border-color:#aaa;color:#111;font-size:12px}
.is-legacy .data-table tbody tr:hover{background:#e8e8e8}
.is-legacy .status-badge{border:1px solid #888;border-radius:0;background:#f4f4f4;color:#111;font:12px Tahoma,Arial,sans-serif}
.is-legacy .status-badge::before{display:none}
.workflow-rescue,.rescue-board{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:var(--s-3);align-items:start}
.modern-workflow{display:grid}
.modern-workflow>button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;min-height:56px;padding:10px 0;border:0;border-bottom:1px solid var(--linie);background:transparent;color:var(--tinte);text-align:left}
.modern-workflow>button:hover{background:var(--flaeche-2)}
.modern-workflow>button>span,.rescue-track button>span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.modern-workflow>button div,.rescue-track button div{display:grid;min-width:0}
.modern-workflow strong,.rescue-track strong{font-size:14px;font-weight:500}
.modern-workflow small,.rescue-track small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.audit-list{display:grid;margin:0;padding:0;list-style:none}
.audit-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--linie)}
.audit-list li:last-child{border-bottom:0}
.audit-list li>i{display:grid;width:24px;height:24px;flex:0 0 auto;place-items:center;border:1px solid var(--pruefgruen);border-radius:var(--r-1);color:var(--pruefgruen);font:500 11px/1 var(--mono);font-style:normal}
.audit-list li>i .icon{width:16px;height:16px}
.audit-list li span{display:grid;min-width:0}
.audit-list strong{font-size:14px;font-weight:500}
.audit-list small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.rescue-overview{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s-3);margin-bottom:var(--s-3)}
.rescue-score{display:flex;align-items:center;gap:var(--s-5)}
.rescue-score>div:last-child{min-width:0}
.rescue-score>div:last-child>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.rescue-score h3{margin:8px 0;font-size:clamp(20px,17px + .8vw,26px)}
.rescue-score p{max-width:60ch;margin:0;font-size:14px;color:var(--graphit)}
/* Stand der Rettung als Zahlenblock mit Fortschrittsleiste statt Tortenring. */
.health-ring{position:relative;display:grid;min-width:132px;flex:0 0 auto;gap:6px;padding:0 var(--s-5) 14px 0;border-right:1px solid var(--linie)}
.health-ring::before,.health-ring::after{position:absolute;bottom:0;left:0;height:4px;border-radius:2px;content:""}
.health-ring::before{width:calc(100% - var(--s-5));background:var(--flaeche-2)}
.health-ring::after{width:calc((100% - var(--s-5)) * var(--health));background:var(--pruefgruen)}
.health-ring.health-0{--health:0}.health-ring.health-1{--health:.25}.health-ring.health-2{--health:.5}.health-ring.health-3{--health:.75}.health-ring.health-4{--health:1}
.health-ring strong{font:600 34px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.health-ring small{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.issue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.issue-card{display:flex;min-height:200px;flex-direction:column;padding:var(--s-4) var(--s-5);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.issue-card.resolved{border-left:2px solid var(--pruefgruen)}
.issue-card>span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.issue-card h3{margin:var(--s-3) 0 var(--s-4);font-size:18px}
.issue-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.issue-card>div>b{font:500 12px/1.4 var(--mono);color:var(--graphit)}
.issue-card.resolved>div>b{color:var(--pruefgruen)}
.issue-card>button{display:flex;align-items:center;gap:6px;min-height:44px;margin-top:auto;padding:12px 0 0;border:0;border-top:1px solid var(--linie);background:transparent;color:var(--tinte);font-size:14px;font-weight:500;text-align:left;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.issue-card>button:disabled{color:var(--pruefgruen);text-decoration:none;opacity:1}
.rescue-track{display:grid}
.rescue-track button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;min-height:56px;padding:10px 0;border:0;border-bottom:1px solid var(--linie);background:transparent;color:var(--tinte);text-align:left}
.rescue-track button:hover:not(:disabled){background:var(--flaeche-2)}
.rescue-track button>i{font:500 13px/1 var(--mono);font-style:normal;color:var(--graphit)}
.rescue-track button.done{opacity:1}
.rescue-track button.done>i,.rescue-track button.done>span{color:var(--pruefgruen)}
.rescue-board .panel-head>strong{font:600 24px/1 var(--stimme);font-variation-settings:"opsz" 48}
.rescue-release{display:flex;flex-direction:column;gap:var(--s-2)}
.rescue-release>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.rescue-release h3{margin:var(--s-2) 0 0;font-size:22px}
.rescue-release p{font-size:14px;color:var(--graphit)}
.final-app{padding:var(--s-5)}
.final-app>header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.final-app>header small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.final-app>header h3{margin:6px 0 0;font-size:22px}
.final-app .modern-kpis{padding:0;margin-bottom:var(--s-4)}

/* 13. Bugfix-Labor */
.bug-lab{min-height:calc(100vh - var(--shell-hoehe));background:var(--papier);color:var(--tinte)}
.bug-lab{--produkt:var(--fehler)}
.bug-lab.fixed-version{--produkt:var(--pruefgruen)}
.bug-lab-head{display:flex;align-items:center;gap:var(--s-5);min-height:64px;padding:10px 4%;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.bug-lab-head .version-switch{margin:0 auto}
.bug-lab-head>span{font:500 12px/1.4 var(--mono);color:var(--produkt)}
.bug-lab-head>span::before{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--produkt);content:"";vertical-align:middle}
.bug-lab main{width:min(1320px,92%);margin:auto;padding:var(--s-7) 0}
.bug-intro{display:grid;max-width:760px;margin-bottom:var(--s-6)}
.bug-intro>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.bug-intro h1{margin:var(--s-3) 0;font-size:clamp(30px,24px + 2vw,52px);letter-spacing:-.02em;line-height:1.05}
.bug-intro h1 em{font-style:normal;color:inherit}
.bug-intro p{max-width:60ch;margin:0;font-size:17px;color:var(--graphit)}
.bug-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:var(--s-3)}
.bug-module{display:flex;min-width:0;min-height:380px;flex-direction:column;padding:var(--s-5);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.bug-module>header{display:flex;min-height:24px;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--s-5)}
.bug-module>header>span{font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit);overflow-wrap:anywhere}
.bug-module>header>b{font:500 12px/1.4 var(--mono);color:var(--tinte)}
.bug-module .modernization-search{padding:0}
.bug-module .modernization-search i{right:12px;bottom:12px}
.bug-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bug-fields label{display:grid;gap:6px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.bug-fields input{width:100%;min-width:0;height:44px;padding:0 10px;border:1px solid var(--graphit);border-radius:var(--r-1);background:var(--flaeche);color:var(--tinte);font-size:15px;font-family:var(--arbeit);letter-spacing:0}
.bug-fields input:focus{border-color:var(--tinte);outline:0}
.bug-total{display:grid;margin:var(--s-4) 0;padding:var(--s-4);border:1px solid var(--linie);border-left:2px solid var(--produkt);border-radius:0 var(--r-1) var(--r-1) 0;background:var(--flaeche-2)}
.bug-total small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.bug-total strong{margin:8px 0 4px;font:600 28px/1 var(--stimme);font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.bug-total span{font:400 12px/1.5 var(--mono);color:var(--produkt)}
.bug-module>.primary-button{margin-top:auto}
.bug-results{display:grid;margin-top:var(--s-3)}
.bug-results>p{display:flex;align-items:center;gap:10px;margin:0;padding:10px 0;border-bottom:1px solid var(--linie)}
.bug-results>p i{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche-2);font:500 11px/1 var(--mono);font-style:normal}
.bug-results strong{font-size:14px;font-weight:500}
.bug-results .empty-state{min-height:160px;padding:var(--s-4)}
.bug-diagnostics>button{display:flex;align-items:center;gap:10px;min-height:52px;margin-inline:calc(-1*var(--s-2));padding:10px var(--s-2);border:0;border-bottom:1px solid var(--linie);background:none;color:var(--tinte);text-align:left}
.bug-diagnostics>button:hover{background:var(--flaeche-2)}
.bug-diagnostics>button i{font:500 13px/1 var(--mono);font-style:normal;color:var(--graphit)}
.bug-diagnostics>button.done i{color:var(--produkt)}
.bug-diagnostics>button span{display:grid;min-width:0}
.bug-diagnostics>button strong{font-size:14px;font-weight:500}
.bug-diagnostics>button small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.bug-log{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);margin-top:auto;padding-top:var(--s-4)}
.bug-log small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.bug-log strong{font:600 24px/1 var(--stimme);font-variation-settings:"opsz" 48}

/* 14. Desktop-Software (Fenstermetapher bleibt Inhalt) */
.desktop-stage{min-height:calc(100vh - var(--shell-hoehe));padding:var(--s-5);background:var(--flaeche-2)}
.desktop-window{overflow:hidden;max-width:1480px;min-height:720px;margin:auto;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche);color:var(--tinte)}
.desktop-window.macos{border-radius:12px}
.desktop-titlebar{display:grid;height:40px;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;border-bottom:1px solid var(--linie);background:var(--papier)}
.desktop-titlebar>strong{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.window-controls{display:flex;gap:6px}
.window-controls i{width:10px;height:10px;border:1px solid var(--graphit);border-radius:2px}
.macos .window-controls i{border:1px solid var(--graphit);border-radius:50%;background:var(--linie)}
.platform-switch{display:flex;justify-self:end;gap:4px}
.platform-switch button{min-height:28px;padding:0 10px;border:1px solid var(--linie);border-radius:var(--r-1);background:none;color:var(--graphit);font:500 12px/1 var(--mono)}
.platform-switch button.active{border-color:var(--tinte);color:var(--tinte)}
.desktop-menubar{position:relative;display:flex;height:34px;align-items:center;padding:0 8px;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.desktop-menubar>button{height:100%;padding:0 10px;border:0;background:none;color:var(--tinte);font-size:14px}
.desktop-menubar>button:hover{background:var(--flaeche-2)}
.desktop-menu-popover{position:absolute;z-index:8;top:33px;left:8px;display:grid;width:200px;padding:4px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);box-shadow:var(--schatten-schwebend)}
.desktop-menu-popover button{min-height:36px;padding:0 10px;border:0;border-radius:2px;background:none;color:var(--tinte);font-size:14px;text-align:left}
.desktop-menu-popover button:hover{background:var(--flaeche-2)}
.desktop-layout{display:grid;min-height:600px;grid-template-columns:200px minmax(0,1fr)}
.desktop-layout>aside{display:flex;flex-direction:column;padding:var(--s-4) var(--s-3);border-right:1px solid var(--linie);background:var(--papier)}
.desktop-product{display:flex;align-items:center;gap:8px;margin:0 8px var(--s-5)}
.desktop-product>span{display:grid;width:28px;height:28px;place-items:center;border-radius:var(--r-1);background:var(--tinte);color:var(--papier);font:600 13px/1 var(--stimme)}
.desktop-product strong{font:560 14px/1 var(--stimme);letter-spacing:.04em}
.desktop-product strong span{color:var(--graphit)}
.desktop-layout>aside>button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border:0;border-left:2px solid transparent;border-radius:0;background:none;color:var(--tinte);font-size:14px;font-weight:500;text-align:left}
.desktop-layout>aside>button:hover{background:var(--flaeche-2)}
.desktop-layout>aside>button.active{border-left-color:var(--tinte);background:var(--flaeche-2)}
.desktop-layout>aside>small{margin:auto 10px 0;font:400 12px/1.4 var(--mono);color:var(--graphit)}
.desktop-layout>main{min-width:0;padding:var(--s-5)}
.desktop-layout>main>header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--linie)}
.desktop-layout>main>header small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.desktop-layout>main>header h1{margin:6px 0 0;font-size:clamp(20px,18px + .6vw,26px)}
.desktop-primary{min-height:36px;padding:0 12px;border:1px solid var(--tinte);border-radius:var(--r-1);background:var(--tinte);color:var(--papier);font-size:14px;font-weight:500}
.desktop-primary:hover{background:var(--graphit);border-color:var(--graphit)}
.desktop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)}
.desktop-toolbar label{position:relative;display:block}
.desktop-toolbar input{width:300px;height:36px;padding:0 36px 0 10px;border:1px solid var(--graphit);border-radius:var(--r-1);background:var(--flaeche);color:var(--tinte);font-size:14px}
.desktop-toolbar input:focus{outline:0;border-color:var(--tinte)}
.desktop-toolbar label i{position:absolute;top:9px;right:10px;font:400 14px/1 var(--mono);font-style:normal;color:var(--graphit)}
.desktop-toolbar>button{min-height:36px;padding:0 12px;border:1px solid var(--graphit);border-radius:var(--r-1);background:none;color:var(--tinte);font-size:14px}
.desktop-content{display:grid;grid-template-columns:minmax(0,1fr) 240px;border:1px solid var(--linie);border-radius:var(--r-1)}
.desktop-table{min-width:0;overflow-x:auto}
.desktop-table-head,.desktop-table>button{display:grid;grid-template-columns:minmax(200px,1.5fr) .6fr .8fr .7fr;gap:10px;align-items:center}
.desktop-table-head{padding:8px 12px;border-bottom:1px solid var(--linie);font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.desktop-table>button{width:100%;min-height:44px;padding:8px 12px;border:0;border-bottom:1px solid var(--linie);border-radius:0;background:none;color:var(--tinte);font-size:14px;text-align:left}
.desktop-table>button:hover{background:var(--flaeche-2)}
.desktop-table>button.selected{background:var(--flaeche-2);box-shadow:inset 2px 0 0 var(--tinte)}
.desktop-table>button>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.desktop-table>button>span:first-child strong{overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.desktop-table>button>span:first-child i{display:grid;width:24px;height:24px;flex:0 0 auto;place-items:center;border:1px solid var(--linie);border-radius:var(--r-1);font:500 11px/1 var(--mono);font-style:normal;color:var(--graphit)}
.desktop-table>button>span:nth-child(2),.desktop-table>button>span:nth-child(4){font:400 13px/1.4 var(--mono);color:var(--graphit)}
.desktop-inspector{padding:var(--s-4);border-left:1px solid var(--linie);background:var(--papier)}
.desktop-inspector>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.desktop-inspector h3{margin:var(--s-3) 0 var(--s-4);font-size:18px}
.desktop-inspector dl{display:grid;margin:0}
.desktop-inspector dl div{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid var(--linie)}
.desktop-inspector dt{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.desktop-inspector dd{margin:0;font-size:14px}
.desktop-inspector button{width:100%;min-height:36px;margin-top:var(--s-4);padding:0 10px;border:1px solid var(--tinte);border-radius:var(--r-1);background:transparent;color:var(--tinte);font-size:14px;font-weight:500}
.desktop-inspector button:hover{background:var(--flaeche-2)}
.desktop-activity{display:grid;max-width:800px}
.desktop-activity article{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--linie)}
.desktop-activity article>i{display:grid;width:28px;height:28px;flex:0 0 auto;place-items:center;border:1px solid var(--linie);border-radius:var(--r-1);font:500 11px/1 var(--mono);font-style:normal;color:var(--graphit)}
.desktop-activity article div{display:grid}
.desktop-activity strong{font-size:14px;font-weight:500}
.desktop-activity small{font:400 12px/1.5 var(--mono);color:var(--graphit)}
.desktop-settings{display:grid;max-width:760px}
.desktop-settings>label{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--linie);cursor:pointer}
.desktop-settings>label span{display:grid;gap:2px}
.desktop-settings>label strong{font-size:15px;font-weight:500}
.desktop-settings>label small{font-size:13px;color:var(--graphit)}
.desktop-settings input{width:44px;height:24px;accent-color:var(--tinte)}
.desktop-settings>section{margin-top:var(--s-5);padding:var(--s-5);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--papier)}
.desktop-settings>section small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.desktop-settings>section h3{margin:var(--s-2) 0;font-size:18px}
.desktop-settings>section p{margin:0;font-size:14px;color:var(--graphit)}
.desktop-window>footer{display:flex;height:32px;align-items:center;justify-content:space-between;gap:var(--s-3);padding:0 14px;border-top:1px solid var(--linie);background:var(--papier);font:400 12px/1 var(--mono);color:var(--graphit)}
.desktop-window>footer span:first-child{color:var(--pruefgruen)}
.desktop-window>footer i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--pruefgruen);vertical-align:middle}
.desktop-window.compact .desktop-table>button{min-height:36px;padding-block:4px}

/* 15. Full Project Cockpit */
.project-cockpit{min-height:calc(100vh - var(--shell-hoehe));background:var(--papier);color:var(--tinte)}
.project-cockpit>header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:64px;padding:10px 4%;border-bottom:1px solid var(--linie);background:var(--flaeche)}
.project-cockpit>header>div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.project-cockpit>header>div>span{font:400 12px/1.4 var(--mono);color:var(--graphit)}
.project-cockpit>main{width:min(1380px,92%);margin:auto;padding:var(--s-7) 0}
.project-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6)}
.project-hero>div:first-child{max-width:760px}
.project-hero small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.project-hero h1{margin:var(--s-3) 0;font-size:clamp(30px,24px + 2vw,52px);letter-spacing:-.02em;line-height:1.05}
.project-hero h1 em{font-style:normal;color:inherit}
.project-hero p{max-width:66ch;margin:0;font-size:17px;color:var(--graphit)}
.project-progress-ring{display:grid;flex:0 0 auto;gap:6px;padding-left:var(--s-4);border-left:1px solid var(--linie)}
.project-progress-ring strong{font:600 34px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.project-progress-ring small{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.phase-rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:var(--s-6) 0 var(--s-3);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche);overflow:hidden}
.phase-rail button{display:grid;min-width:0;gap:var(--s-3);padding:var(--s-3);border:0;border-right:1px solid var(--linie);border-bottom:2px solid transparent;background:none;color:var(--graphit);text-align:left}
.phase-rail button:last-child{border-right:0}
.phase-rail button:hover{background:var(--flaeche-2)}
.phase-rail button.active{border-bottom-color:var(--tinte);background:var(--flaeche-2);color:var(--tinte)}
.phase-rail button.done{color:var(--graphit)}
.phase-rail button.done i{color:var(--pruefgruen)}
.phase-rail span{font:500 12px/1 var(--mono);letter-spacing:.06em}
.phase-rail strong{overflow:hidden;font-size:13px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.phase-rail i{font:500 12px/1 var(--mono);font-style:normal}
.phase-rail i .icon{width:16px;height:16px}
.project-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:var(--s-3);align-items:start}
.phase-detail,.project-context{padding:var(--s-5);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--flaeche)}
.phase-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.phase-head small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.phase-head h2{margin:6px 0 0;font-size:clamp(22px,18px + 1vw,30px)}
.phase-detail>p{max-width:66ch;font-size:15px;color:var(--graphit)}
.phase-detail>footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--linie)}
.requirement-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4);margin-top:var(--s-4)}
.requirement-list label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;border-bottom:1px solid var(--linie);font-size:14px}
.architecture-nodes{display:flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:160px}
.architecture-nodes span{padding:12px 16px;border:1px solid var(--tinte);border-radius:var(--r-1);font:500 13px/1 var(--mono)}
.architecture-nodes i{font:400 14px/1 var(--mono);font-style:normal;color:var(--graphit)}
.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.decision-grid article{padding:var(--s-4);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--papier)}
.decision-grid small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.decision-grid h3{margin:var(--s-2) 0;font-size:17px}
.decision-grid p{margin:0;font-size:14px;color:var(--graphit)}
/* Oberflaechen-Schema mit Mono-Beschriftung statt gestrichelter Balkenattrappe. */
.wireframe-board{display:grid;min-height:220px;grid-template-columns:120px 1fr;gap:8px;margin-top:var(--s-4);padding:12px;border:1px solid var(--linie);border-radius:var(--r-2);background:var(--papier);font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--graphit)}
.wireframe-board aside,.wireframe-board section>i,.wireframe-board section>div,.wireframe-board section>span{display:grid;align-content:start;gap:6px;padding:8px 10px;border:1px solid var(--linie);border-radius:var(--r-1);background:var(--flaeche);font-style:normal}
.wireframe-board aside::before{content:"Navigation · 5 Module"}
.wireframe-board section{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wireframe-board section>i{grid-column:1/-1;min-height:40px}
.wireframe-board section>i::before{content:"Kopfzeile · Suche · Konto"}
.wireframe-board section>div::before{content:"Inhalt · Dokumentliste"}
.wireframe-board section>div b{display:block;padding:6px 0;border-top:1px solid var(--linie);font-weight:400;color:var(--tinte)}
.wireframe-board section>div b:nth-child(1)::before{content:"Übersicht"}
.wireframe-board section>div b:nth-child(2)::before{content:"Dokument öffnen"}
.wireframe-board section>div b:nth-child(3)::before{content:"Freigabe erteilen"}
.wireframe-board section>span:nth-of-type(1)::before{content:"Seitenleiste · Status"}
.wireframe-board section>span:nth-of-type(2)::before{content:"Hinweise · Verlauf"}
.test-console,.deploy-console{margin-top:var(--s-4);padding:var(--s-4);border:1px solid var(--linie);border-radius:var(--r-2);background:var(--papier)}
.test-console>header{display:flex;justify-content:space-between;gap:var(--s-3);font:500 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.test-console>header b{color:var(--pruefgruen)}
.test-console pre{min-height:96px;margin:var(--s-3) 0;font:400 13px/1.8 var(--mono);color:var(--pruefgruen);white-space:pre-wrap}
.deploy-console{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.deploy-console>div{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--linie)}
.deploy-console span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.deploy-console b{font:500 14px/1.4 var(--mono)}
.deploy-console button{grid-column:1/-1;justify-self:start}
.project-context>small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--graphit)}
.project-context h3{margin:var(--s-3) 0 var(--s-2);font-size:20px}
.project-context p{font-size:14px;color:var(--graphit)}
.project-context dl{display:grid;margin:var(--s-4) 0}
.project-context dl div{display:flex;justify-content:space-between;gap:var(--s-3);padding:8px 0;border-bottom:1px solid var(--linie)}
.project-context dt{font:500 12px/1.5 var(--mono);color:var(--graphit)}
.project-context dd{margin:0;font-size:14px;text-align:right}
.project-context>a{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--tinte);font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* 16. Nordwerk-Website (fiktionsinterne Produktgestaltung) */
.showcase-site{--nw-grund:#F5F7FA;--nw-flaeche:#FFFFFF;--nw-flaeche-2:#EEF2F6;--nw-tinte:#10223D;--nw-text:#435269;--nw-akzent:#19695F;--nw-akzent-text:#FFFFFF;--nw-linie:#D7E0EA;--nw-dunkel:#112944;--nw-dunkel-text:#E6EDF4;min-height:calc(100vh - var(--shell-hoehe));background:var(--nw-grund);color:var(--nw-tinte);font-family:var(--arbeit);font-size:16px}
html[data-theme="dark"] .showcase-site{--nw-grund:#111820;--nw-flaeche:#18222C;--nw-flaeche-2:#1F2B37;--nw-tinte:#E8EEF4;--nw-text:#B4C0CC;--nw-akzent:#63C3AF;--nw-akzent-text:#0D1B18;--nw-linie:#2C3A48;--nw-dunkel:#0B1219;--nw-dunkel-text:#E6EDF4}
.showcase-site :focus-visible{outline-color:var(--nw-tinte)}
.showcase-site h1,.showcase-site h2,.showcase-site h3{color:var(--nw-tinte)}
.nw-service-bar{display:flex;min-height:32px;align-items:center;justify-content:space-between;gap:var(--s-3);padding:5px max(24px,calc((100% - 1180px)/2));background:var(--nw-dunkel);color:var(--nw-dunkel-text);font:500 12px/1.4 var(--mono);letter-spacing:.04em}
.showcase-nav{position:sticky;z-index:20;top:0;display:flex;height:72px;align-items:center;justify-content:space-between;gap:var(--s-5);padding:0 max(24px,calc((100% - 1180px)/2));border-bottom:1px solid var(--nw-linie);background:var(--nw-flaeche)}
.showcase-logo{display:grid;padding:0;border:0;background:none;color:var(--nw-tinte);font:600 20px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 24;letter-spacing:.02em;text-align:left}
.showcase-logo span{color:var(--nw-akzent)}
.showcase-logo small{margin-top:4px;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--nw-text)}
.showcase-links{display:flex;height:100%;align-items:center;gap:var(--s-5)}
.showcase-links button{height:100%;padding:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--nw-text);font-size:15px;font-weight:500}
.showcase-links button:hover,.showcase-links button.active{border-color:var(--nw-akzent);color:var(--nw-tinte)}
.nw-button{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 18px;border:1px solid var(--nw-tinte);border-radius:var(--r-1);background:transparent;color:var(--nw-tinte);font-size:15px;font-weight:500;transition:background-color var(--t-micro) var(--ein),color var(--t-micro) var(--ein)}
.nw-button:hover{background:var(--nw-flaeche-2)}
.nw-button.primary{border-color:var(--nw-akzent);background:var(--nw-akzent);color:var(--nw-akzent-text)}
.nw-button.primary:hover{filter:brightness(.92)}
.nw-button:active{transform:translateY(1px)}
.showcase-menu{display:none;width:44px;height:44px;padding:0;border:1px solid var(--nw-tinte);border-radius:var(--r-1);background:var(--nw-flaeche);color:var(--nw-tinte);font:500 14px/1 var(--mono)}
.nw-page{width:min(100%,1440px);min-height:600px;margin-inline:auto;background:var(--nw-flaeche)}
.nw-hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:580px}
.nw-hero-copy{display:grid;align-content:center;padding:var(--s-8) max(34px,calc((100vw - 1180px)/2));padding-right:var(--s-8);background:var(--nw-grund)}
.nw-eyebrow{display:block;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-akzent)}
.nw-hero h1,.nw-page-head h1,.nw-detail-hero h1,.nw-contact-page h1{margin:var(--s-4) 0 var(--s-5);font-size:clamp(36px,26px + 2.8vw,64px);font-weight:520;letter-spacing:-.02em;line-height:1.04}
.nw-hero-copy>p{max-width:58ch;margin:0;font-size:18px;line-height:1.5;color:var(--nw-text)}
.nw-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.nw-hero-visual{position:relative;display:grid;place-items:center;overflow:hidden;padding:var(--s-7);background:var(--nw-dunkel)}
.nw-system-card{position:relative;z-index:1;width:min(420px,100%);padding:var(--s-5);border:1px solid rgb(255 255 255 / .18);border-radius:var(--r-2);background:rgb(255 255 255 / .06);color:var(--nw-dunkel-text)}
.nw-system-card header{display:flex;justify-content:space-between;padding-bottom:var(--s-4);border-bottom:1px solid rgb(255 255 255 / .18);font:500 12px/1.4 var(--mono);letter-spacing:.06em}
.nw-system-card header b{color:#73D1BD}
.nw-energy-ring{display:grid;gap:6px;margin:var(--s-5) 0 var(--s-4)}
.nw-energy-ring strong{font:600 44px/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em;color:#fff}
.nw-energy-ring small{font:400 12px/1.4 var(--mono);color:#B9C8D9}
.nw-system-row{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgb(255 255 255 / .14);font-size:14px;color:#D7E1EC}
.nw-system-row b{font:500 13px/1.5 var(--mono);color:#fff}
.nw-appointment{position:absolute;z-index:2;right:var(--s-6);bottom:var(--s-6);display:grid;padding:12px 16px;border:1px solid var(--nw-linie);border-radius:var(--r-1);background:var(--nw-flaeche);color:var(--nw-tinte)}
.nw-appointment small{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--nw-text)}
.nw-appointment strong{margin-top:4px;font-size:15px;font-weight:500}
.nw-value{display:grid;grid-template-columns:repeat(3,1fr);padding:0 max(24px,calc((100% - 1180px)/2));border-top:1px solid var(--nw-linie);border-bottom:1px solid var(--nw-linie);background:var(--nw-flaeche)}
.nw-value article{padding:var(--s-5);border-right:1px solid var(--nw-linie)}
.nw-value article:first-child{padding-left:0}
.nw-value article:last-child{border-right:0}
.nw-value strong{display:block;font:560 17px/1.2 var(--stimme);font-variation-settings:"opsz" 24;color:var(--nw-tinte)}
.nw-value span{font-size:14px;color:var(--nw-text)}
.nw-teaser{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s-8);padding:var(--s-8) max(24px,calc((100% - 1180px)/2))}
.nw-teaser h2{margin:var(--s-3) 0;font-size:clamp(28px,22px + 1.6vw,44px);letter-spacing:-.02em;line-height:1.08}
.nw-teaser p{font-size:16px;color:var(--nw-text)}
.nw-teaser-list{border-top:1px solid var(--nw-linie)}
.nw-teaser-list button{display:grid;width:100%;grid-template-columns:44px 1fr auto;gap:var(--s-4);align-items:center;min-height:80px;padding:var(--s-3) 0;border:0;border-bottom:1px solid var(--nw-linie);background:none;color:var(--nw-tinte);text-align:left}
.nw-teaser-list button:hover{background:var(--nw-flaeche-2)}
.nw-teaser-list button>span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-akzent)}
.nw-teaser-list button strong{font:560 18px/1.2 var(--stimme);font-variation-settings:"opsz" 24}
.nw-teaser-list button i{font:400 16px/1 var(--mono);font-style:normal;color:var(--nw-text)}
.nw-page-head{padding:var(--s-8) max(24px,calc((100% - 1180px)/2)) var(--s-7);border-bottom:1px solid var(--nw-linie);background:var(--nw-grund)}
.nw-page-head h1{max-width:20ch}
.nw-page-head p{max-width:66ch;margin:0;font-size:17px;color:var(--nw-text)}
.nw-service-list{padding:var(--s-4) max(24px,calc((100% - 1180px)/2)) var(--s-8)}
.nw-service-list article{display:grid;grid-template-columns:56px 1fr auto;gap:var(--s-6);align-items:center;padding:var(--s-6) 0;border-bottom:1px solid var(--nw-linie)}
.nw-service-list article>span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-akzent)}
.nw-service-list small{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-text)}
.nw-service-list h2{margin:8px 0;font-size:clamp(22px,18px + 1.2vw,34px);letter-spacing:-.015em}
.nw-service-list p{max-width:66ch;margin:0;font-size:15px;color:var(--nw-text)}
.nw-service-list button{min-height:44px;padding:0 14px;border:1px solid var(--nw-tinte);border-radius:var(--r-1);background:var(--nw-flaeche);color:var(--nw-tinte);font-size:14px;font-weight:500}
.nw-service-list button:hover{background:var(--nw-flaeche-2)}
.nw-breadcrumb{display:flex;gap:8px;padding:var(--s-5) max(24px,calc((100% - 1180px)/2));border-bottom:1px solid var(--nw-linie);font:400 13px/1.4 var(--mono);color:var(--nw-text)}
.nw-breadcrumb button{padding:0;border:0;background:none;color:var(--nw-akzent);font:inherit;text-decoration:underline;text-underline-offset:.18em}
.nw-detail-hero{display:grid;grid-template-columns:1.15fr .65fr;gap:var(--s-8);padding:var(--s-8) max(24px,calc((100% - 1180px)/2));background:var(--nw-grund)}
.nw-detail-hero>div>p{max-width:60ch;font-size:17px;color:var(--nw-text)}
.nw-detail-hero aside{align-self:end;padding:var(--s-5);border:1px solid var(--nw-linie);border-radius:var(--r-2);background:var(--nw-flaeche)}
.nw-detail-hero aside>strong{font:560 17px/1.2 var(--stimme);font-variation-settings:"opsz" 24;color:var(--nw-tinte)}
.nw-detail-hero ul{margin:var(--s-3) 0 0;padding:0;list-style:none}
.nw-detail-hero li{padding:8px 0;border-bottom:1px solid var(--nw-linie);font-size:14px;color:var(--nw-text)}
.nw-detail-hero li:last-child{border:0}
.nw-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:0 max(24px,calc((100% - 1180px)/2));padding:var(--s-8) 0}
.nw-steps article{min-height:200px;padding:var(--s-5);border:1px solid var(--nw-linie);border-right:0}
.nw-steps article:first-child{border-radius:var(--r-2) 0 0 var(--r-2)}
.nw-steps article:last-child{border-right:1px solid var(--nw-linie);border-radius:0 var(--r-2) var(--r-2) 0}
.nw-steps span{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-akzent)}
.nw-steps h3{margin:var(--s-7) 0 8px;font-size:20px}
.nw-steps p{margin:0;font-size:15px;color:var(--nw-text)}
.nw-faq{padding:var(--s-4) max(24px,calc((100% - 1180px)/2)) var(--s-8)}
.nw-faq h2{max-width:24ch;font-size:clamp(26px,20px + 1.4vw,40px);letter-spacing:-.02em}
.nw-faq details{border-bottom:1px solid var(--nw-linie)}
.nw-faq summary{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) 0;color:var(--nw-tinte);cursor:pointer;font-size:16px;font-weight:500;list-style:none}
.nw-faq summary span{font:400 16px/1 var(--mono);color:var(--nw-text)}
.nw-faq details[open] summary span{visibility:hidden}
.nw-faq details p{max-width:66ch;font-size:15px;color:var(--nw-text)}
.nw-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);padding:var(--s-7) max(24px,calc((100% - 1180px)/2)) var(--s-8)}
.nw-project-grid article{overflow:hidden;border:1px solid var(--nw-linie);border-radius:var(--r-2);background:var(--nw-flaeche)}
.nw-project-image{display:flex;height:200px;align-items:flex-end;padding:var(--s-4);background:#7C6A55}
.nw-project-grid .green .nw-project-image{background:#3E6A5E}
.nw-project-grid .blue .nw-project-image{background:#2E4E70}
.nw-project-image span{padding:4px 8px;border-radius:var(--r-1);background:var(--nw-flaeche);color:var(--nw-tinte);font:500 12px/1.4 var(--mono)}
.nw-project-grid article>div:last-child{padding:var(--s-5)}
.nw-project-grid h2{margin:0 0 8px;font-size:22px}
.nw-project-grid p{font-size:15px;color:var(--nw-text)}
.nw-project-grid ul{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s-4) 0 0;padding:0;list-style:none}
.nw-project-grid li{padding:3px 8px;border:1px solid var(--nw-linie);border-radius:var(--r-1);font:400 12px/1.5 var(--mono);color:var(--nw-text)}
.nw-contact-page{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--s-8);padding:var(--s-8) max(24px,calc((100% - 1180px)/2));background:var(--nw-grund)}
.nw-contact-page>div>p{font-size:17px;color:var(--nw-text)}
.nw-contact-data{display:grid;gap:4px;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--nw-linie)}
.nw-contact-data small{margin-top:10px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-text)}
.nw-contact-data strong{font-weight:500;color:var(--nw-tinte)}
.nw-contact-page form{display:grid;gap:var(--s-4);padding:var(--s-6);border:1px solid var(--nw-linie);border-radius:var(--r-2);background:var(--nw-flaeche)}
.nw-contact-page label{display:grid;gap:6px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--nw-text)}
.nw-contact-page input,.nw-contact-page select,.nw-contact-page textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--nw-text);border-radius:var(--r-1);outline:0;background:var(--nw-flaeche);color:var(--nw-tinte);font:400 16px/1.4 var(--arbeit);letter-spacing:0}
.nw-contact-page textarea{resize:vertical}
.nw-contact-page input:focus,.nw-contact-page select:focus,.nw-contact-page textarea:focus{border-color:var(--nw-tinte);box-shadow:inset 0 0 0 1px var(--nw-tinte)}
.showcase-contact-status{min-height:24px;margin:0;font:500 13px/1.5 var(--mono);color:var(--pruefgruen)}
.showcase-contact-status.error,.landing-offer .landing-lead-status.error{display:flex;align-items:center;gap:6px;color:var(--fehler)}
.showcase-contact-status .icon,.landing-lead-status .icon{width:16px;height:16px}
.showcase-footer{display:flex;justify-content:space-between;gap:var(--s-6);padding:var(--s-6) max(24px,calc((100% - 1180px)/2));background:var(--nw-dunkel);color:var(--nw-dunkel-text);font-size:14px}
.showcase-footer>div{display:grid;gap:4px}
.showcase-footer>div strong{font:560 16px/1.2 var(--stimme)}
.showcase-footer>div span{font:400 12px/1.5 var(--mono);color:#9EB0C4}
.showcase-footer nav{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.showcase-footer button{padding:0;border:0;background:none;color:var(--nw-dunkel-text);font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.showcase-footer button:focus-visible{outline-color:var(--nw-dunkel-text)}

/* 17. Landingpage Fokusraum (fiktionsinterne Produktgestaltung) */
.landing-site{--lp-grund:#FFF5EC;--lp-flaeche:#FFFFFF;--lp-tinte:#27110E;--lp-text:#6B4F49;--lp-akzent:#C23F2D;--lp-akzent-text:#FFFFFF;--lp-linie:#E7D5CB;--lp-dunkel:#27110E;--lp-dunkel-2:#3A2320;--lp-dunkel-text:#FFF5EC;--lp-dunkel-label:#D9C3BB;min-height:calc(100vh - var(--shell-hoehe));background:var(--lp-grund);color:var(--lp-tinte);font-size:16px}
html[data-theme="dark"] .landing-site{--lp-grund:#1B1412;--lp-flaeche:#241B18;--lp-tinte:#F6EDE6;--lp-text:#C9B7AF;--lp-akzent:#FF7A6B;--lp-akzent-text:#2A110D;--lp-linie:#3B2C27;--lp-dunkel:#120D0B;--lp-dunkel-2:#1C1412;--lp-dunkel-text:#F6EDE6;--lp-dunkel-label:#BFAAA1}
.landing-site :focus-visible{outline-color:var(--lp-tinte)}
.landing-site h1,.landing-site h2,.landing-site h3{color:inherit}
.landing-nav{display:flex;height:64px;align-items:center;justify-content:space-between;gap:var(--s-4);padding:0 max(24px,calc((100% - 1120px)/2));border-bottom:1px solid var(--lp-linie);background:var(--lp-flaeche)}
.landing-nav strong{font:600 18px/1 var(--stimme);font-variation-settings:"opsz" 24;letter-spacing:.04em}
.landing-nav>span{font:400 12px/1.4 var(--mono);color:var(--lp-text)}
.landing-site .primary-button{min-height:44px;border-color:var(--lp-akzent);background:var(--lp-akzent);color:var(--lp-akzent-text)}
.landing-site .primary-button:hover{border-color:var(--lp-tinte);background:var(--lp-tinte);color:var(--lp-grund)}
.landing-hero{padding:var(--s-8) max(24px,calc((100% - 1120px)/2));border-bottom:1px solid var(--lp-linie)}
.landing-hero>div{max-width:820px}
.landing-kicker{display:block;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--lp-akzent)}
.landing-hero h1{max-width:16ch;margin:var(--s-4) 0 var(--s-5);font-size:clamp(40px,28px + 3.6vw,80px);font-weight:520;letter-spacing:-.025em;line-height:1}
.landing-hero p{max-width:58ch;margin:0 0 var(--s-5);font-size:18px;line-height:1.5;color:var(--lp-text)}
.landing-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lp-linie);border-bottom:1px solid var(--lp-linie)}
.landing-proof div{padding:var(--s-5) max(24px,calc((100% - 1120px)/6));background:var(--lp-grund)}
.landing-proof strong{display:block;font:600 clamp(28px,22px + 1.4vw,40px)/1 var(--stimme);font-optical-sizing:none;font-variation-settings:"opsz" 48;letter-spacing:-.02em}
.landing-proof small{display:block;margin-top:6px;font:400 12px/1.5 var(--mono);color:var(--lp-text)}
.landing-content{padding:var(--s-8) max(24px,calc((100% - 1120px)/2))}
.landing-content h2{max-width:22ch;margin:0 0 var(--s-6);font-size:clamp(28px,22px + 1.8vw,48px);letter-spacing:-.02em;line-height:1.05}
.landing-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.landing-feature{padding:var(--s-5);border:1px solid var(--lp-linie);border-radius:var(--r-2);background:var(--lp-flaeche)}
.landing-feature span{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--lp-linie);border-radius:var(--r-1);font:500 14px/1 var(--mono);color:var(--lp-akzent)}
.landing-feature h3{margin:var(--s-5) 0 8px;font-size:20px}
.landing-feature p{margin:0;font-size:15px;color:var(--lp-text)}
.landing-offer{display:grid;grid-template-columns:1fr 1fr;background:var(--lp-dunkel);color:var(--lp-dunkel-text)}
.landing-offer>div:first-child{padding:var(--s-8) var(--s-7) var(--s-8) max(24px,calc((100vw - 1120px)/2))}
.landing-offer .landing-kicker{color:var(--lp-akzent)}
.landing-offer h2{margin:var(--s-4) 0;font-size:clamp(28px,22px + 1.8vw,48px);letter-spacing:-.02em;line-height:1.05}
.landing-offer p{max-width:52ch;font-size:16px;color:var(--lp-dunkel-label)}
.landing-option-list{display:grid;margin:var(--s-5) 0;border-top:1px solid rgb(255 255 255 / .16)}
.landing-option{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 0;border-bottom:1px solid rgb(255 255 255 / .16);cursor:pointer}
.landing-option input{accent-color:var(--lp-akzent)}
.landing-option strong{font-weight:500}
.landing-option small{font:400 12px/1.5 var(--mono);color:var(--lp-dunkel-label)}
.landing-lead-panel{padding:var(--s-8) 7%;background:var(--lp-dunkel-2)}
.landing-lead-panel form{display:grid;gap:var(--s-3)}
.landing-lead-panel label{display:grid;gap:6px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--lp-dunkel-label)}
.landing-lead-panel input,.landing-lead-panel select,.landing-lead-panel textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid rgb(255 255 255 / .35);border-radius:var(--r-1);outline:0;background:rgb(255 255 255 / .06);color:var(--lp-dunkel-text);font:400 16px/1.4 var(--arbeit);letter-spacing:0}
.landing-lead-panel option{color:var(--lp-tinte);background:var(--lp-flaeche)}
.landing-lead-panel textarea{resize:vertical}
.landing-lead-panel input:focus,.landing-lead-panel select:focus,.landing-lead-panel textarea:focus{border-color:var(--lp-dunkel-text)}
.landing-lead-panel :focus-visible{outline-color:var(--lp-dunkel-text)}
.landing-lead-panel input::placeholder,.landing-lead-panel textarea::placeholder{color:var(--lp-dunkel-label);opacity:.75}
.landing-offer .landing-lead-status{min-height:24px;margin:0;font:500 13px/1.5 var(--mono);color:var(--lp-dunkel-text)}
.landing-offer .landing-lead-status.error{color:#FF9D8F}
.leadboard{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid rgb(255 255 255 / .16)}
.leadboard-head{display:flex;justify-content:space-between;gap:var(--s-3)}
.leadboard-head strong{font:560 16px/1.2 var(--stimme);font-variation-settings:"opsz" 24}
.leadboard-head span{font:500 12px/1.4 var(--mono);color:var(--lp-akzent)}
.leadboard-list{display:grid;margin-top:var(--s-2)}
.leadboard-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:10px 0;border-bottom:1px solid rgb(255 255 255 / .12);font-size:14px}
.leadboard-item strong{font-weight:500}
.leadboard-item small{font:400 12px/1.5 var(--mono);color:var(--lp-dunkel-label);text-align:right}

/* 18. Responsiv */
@media(max-width:1280px){
  .demo-brand-mono,.demo-current-bereich{display:none}
  .demo-session-hud .hud-last{max-width:180px}
}
@media(max-width:1100px){
  .demo-workbench .demo-session-hud{display:none}
  .demo-workbench{grid-template-columns:auto minmax(0,1fr) auto}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid,.workflow-layout,.rescue-overview,.project-workspace,.workflow-rescue,.rescue-board{grid-template-columns:1fr}
  .panel-span{grid-column:auto}
  .card-grid,.issue-grid,.bug-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-status{grid-template-columns:minmax(0,1fr) 90px 90px auto}
  .service-status>small:nth-child(4){display:none}
  .workflow-selector{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phase-rail{grid-template-columns:repeat(4,1fr)}
  .phase-rail button:nth-child(4){border-right:0}
  .phase-rail button:nth-child(-n+4){border-bottom:1px solid var(--linie)}
  .desktop-content{grid-template-columns:1fr}
  .desktop-inspector{border-top:1px solid var(--linie);border-left:0}
  .showcase-links,.nav-cta{display:none}
  .showcase-menu{display:grid;place-items:center}
  .showcase-links.open{position:absolute;top:72px;right:16px;left:16px;display:grid;height:auto;padding:8px;border:1px solid var(--nw-linie);border-radius:var(--r-2);background:var(--nw-flaeche);box-shadow:var(--schatten-schwebend)}
  .showcase-links.open button{height:auto;min-height:44px;padding:0 12px;border:0;border-bottom:1px solid var(--nw-linie);text-align:left}
  .showcase-links.open button:last-child{border-bottom:0}
  .nw-hero{grid-template-columns:1fr}
  .nw-hero-visual{min-height:480px}
  .nw-teaser,.nw-detail-hero,.nw-contact-page{grid-template-columns:1fr;gap:var(--s-6)}
  .nw-project-grid{grid-template-columns:1fr 1fr}
  .landing-feature-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .demo-workbench [data-demo-help]{display:none}
  .demo-workbench .primary-button{width:36px;padding:0}
  .demo-workbench .primary-button .icon{display:block}
  .demo-workbench .primary-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .app-shell{grid-template-columns:200px minmax(0,1fr)}
  .app-content{padding-inline:var(--s-5)}
  .modernization-frame .table-shell{margin-inline:var(--s-4)}
  .modern-kpis,.modernization-search{padding-inline:var(--s-4)}
  .modernization-search i{right:calc(var(--s-4) + 12px)}
  .bug-grid{grid-template-columns:1fr}
}
@media(max-width:767px){
  :root{--shell-hoehe:0px}
  .demo-workbench{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marke aktionen" "system system";row-gap:2px;column-gap:var(--s-3);padding:8px var(--s-4)}
  .demo-workbench .demo-brand{grid-area:marke;min-height:44px;align-items:center;gap:8px}
  .demo-wortmarke{font-size:16px}
  .demo-current{grid-area:system;padding-left:0;border-left:0}
  .demo-current-bereich{display:none}
  .demo-experience-actions{grid-area:aktionen;gap:6px}
  .demo-workbench .demo-command-trigger kbd{display:none}
  .demo-workbench .ghost-button{min-height:44px;padding-inline:10px;font-size:13px}
  .demo-workbench .icon-only,.demo-workbench .primary-button{width:44px}
  .demo-workbench [data-demo-reset],.demo-workbench [data-demo-tour],.demo-workbench [data-demo-command]{width:44px;padding:0}
  /* Beschriftung bleibt fuer Screenreader erhalten, nur das Icon ist sichtbar. */
  .demo-workbench .ghost-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .demo-taskbar{flex-wrap:wrap;padding-inline:var(--s-4);row-gap:2px}
  .taskbar-task{display:grid;flex-basis:100%;order:3;gap:2px;counter-reset:schritt}
  .taskbar-step{display:flex;gap:6px}
  .taskbar-step::before,.taskbar-step+.taskbar-step::before{flex:0 0 auto;counter-increment:schritt;color:var(--graphit);content:counter(schritt) " ·";white-space:nowrap}
  .demo-taskbar:not(.is-offen) .taskbar-step:not(:first-child){display:none}
  .demo-taskbar .taskbar-toggle{display:inline-flex;margin-left:auto}
  .command-search kbd,.command-hint{display:none}
  .toast>button{width:44px;height:44px;margin:-8px -12px -8px 0}
  .table-actions button{width:44px;height:44px}
  .panel-head a,.panel-head button,.record-card-footer button,.file-row button,.project-context>a{min-height:44px;margin-block:-12px}
  .project-context>a{margin-block:0}
  .demo-credentials button{min-height:44px}
  .demo-root,.demo-loading,.app-shell,.bug-lab,.portal-login,.mvp-login,.desktop-stage,.project-cockpit,.showcase-site,.landing-site{min-height:0}
  .demo-loading{grid-template-columns:1fr}
  .demo-loading aside{display:none}
  .demo-loading section{padding:var(--s-5) var(--s-4)}
  .app-shell{display:block}
  .app-sidebar,.mobile-app-toggle{display:none}
  .app-topbar{padding:8px var(--s-4)}
  .app-topbar-actions .top-search{display:none}
  .app-sync{display:none}
  .app-content{padding:var(--s-4) var(--s-4) var(--s-7)}
  .mobile-tabs{display:flex}
  .content-heading{align-items:flex-start;flex-direction:column;gap:var(--s-3)}
  .panel-head,.record-card-head,.modernization-frame>header,.bug-module>header,.phase-head,.final-app>header,.desktop-layout>main>header{flex-wrap:wrap}
  .kpi-grid,.card-grid,.choice-grid,.calculator-layout,.config-layout,.detail-layout,.issue-grid,.status-overview,.form-row,.detail-grid,.booking-summary,.option-grid,.modern-kpis,.requirement-list,.decision-grid,.deploy-console{grid-template-columns:1fr}
  .panel,.detail-card,.record-card{padding:var(--s-4)}
  /* Tabellen werden Zeilenkarten: Kopfzeile weg, jede Zelle mit ihrem Mono-Label; die Legacy-Ansicht bleibt absichtlich alt. */
  .data-table:not(.is-legacy *){min-width:0}
  .data-table:not(.is-legacy *) thead{display:none}
  .data-table:not(.is-legacy *) tbody{display:grid}
  .data-table:not(.is-legacy *) tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2) var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--linie)}
  .data-table:not(.is-legacy *) tbody tr:last-child{border-bottom:0}
  .data-table:not(.is-legacy *) tbody tr:hover{background:transparent}
  .data-table:not(.is-legacy *) td{display:block;min-width:0;padding:0;border:0}
  .data-table:not(.is-legacy *) td::before{display:block;margin-bottom:2px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--graphit);content:attr(data-label)}
  .data-table:not(.is-legacy *) td:not([data-label])::before,.data-table:not(.is-legacy *) td[data-label=""]::before{display:none}
  .data-table:not(.is-legacy *) td:first-child,.data-table:not(.is-legacy *) td:has(.table-actions),.data-table:not(.is-legacy *) td[colspan]{grid-column:1/-1}
  .data-table:not(.is-legacy *) .table-actions{justify-content:flex-start}
  .modernization-table:not(.is-legacy *){min-width:0}
  .toolbar{align-items:stretch;flex-direction:column}
  .search-field input,.top-search input{width:100%}
  .toolbar-group{display:flex;flex-wrap:wrap}
  .toolbar>.primary-button,.toolbar>.secondary-button{width:100%}
  .pipeline-board{grid-template-columns:repeat(6,200px)}
  .price-summary{position:static}
  .workflow-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow-step{grid-template-columns:32px minmax(0,1fr)}
  .workflow-step>i{display:none}
  .wizard-actions{flex-wrap:wrap}
  .wizard-actions>span{order:3;flex-basis:100%;text-align:center}
  .service-status{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-2) var(--s-3)}
  .service-status>div,.service-status>.status-badge,.service-status>button{grid-column:1/-1}
  .service-status>.status-badge,.service-status>button{justify-self:start}
  .log-row{grid-template-columns:1fr;gap:2px}
  .stepper-item>i{width:20px}
  .date-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .time-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-login,.mvp-login{grid-template-columns:1fr}
  .portal-login>section,.mvp-login>section{gap:var(--s-5);padding:var(--s-6) var(--s-4);border-right:0;border-bottom:1px solid var(--linie)}
  .portal-login>form,.mvp-login>form{width:calc(100% - 32px);margin:var(--s-5) auto;padding:var(--s-5)}
  .demo-credentials{grid-template-columns:1fr}
  .portal-order{grid-template-columns:1fr auto}
  .portal-order .progress-track,.portal-order>b{grid-column:1/-1}
  .portal-order>b{text-align:left}
  .message{max-width:92%}
  .message-form{grid-template-columns:1fr}
  .version-switch{flex-wrap:wrap}
  .version-switch>span{flex-basis:100%;margin:0}
  .modernization-frame>header{align-items:flex-start;flex-direction:column}
  .modernization-frame .table-shell{margin-inline:var(--s-3)}
  .modern-kpis,.modernization-search{padding-inline:var(--s-3)}
  .modernization-search i{right:calc(var(--s-3) + 12px)}
  .rescue-score{align-items:flex-start;flex-direction:column}
  .bug-lab-head{flex-wrap:wrap;gap:var(--s-3);padding:10px var(--s-4)}
  .bug-lab-head .version-switch{width:100%;margin:0;order:3}
  .bug-lab main{width:calc(100% - 32px);padding:var(--s-6) 0}
  .bug-fields{grid-template-columns:1fr}
  .bug-module{min-height:0}
  .desktop-stage{padding:var(--s-2)}
  .desktop-window{min-height:0}
  .desktop-titlebar{grid-template-columns:1fr auto}
  .desktop-titlebar>strong{display:none}
  .desktop-layout{grid-template-columns:1fr;min-height:0}
  .desktop-layout>aside{display:flex;flex-direction:row;gap:4px;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--linie)}
  .desktop-layout>aside>button{min-height:44px;border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  .desktop-layout>aside>button.active{border-bottom-color:var(--tinte)}
  .desktop-product,.desktop-layout>aside>small{display:none}
  .desktop-layout>main{padding:var(--s-4)}
  .desktop-layout>main>header{align-items:flex-start;flex-direction:column}
  .desktop-toolbar{align-items:stretch;flex-direction:column}
  .desktop-toolbar input{width:100%}
  /* Dokumentliste zweizeilig: Name und Status oben, Typ und Datum als Mono-Zeile darunter. */
  .desktop-table-head{grid-template-columns:minmax(0,1fr) auto}
  .desktop-table-head>span:nth-child(2),.desktop-table-head>span:nth-child(4){display:none}
  .desktop-table>button{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .desktop-table>button>span:nth-child(3){grid-row:1;grid-column:2;justify-self:end}
  .desktop-table>button>span:nth-child(2){grid-row:2;grid-column:1}
  .desktop-table>button>span:nth-child(4){grid-row:2;grid-column:2;justify-self:end}
  .platform-switch button,.desktop-primary,.desktop-toolbar input,.desktop-toolbar>button,.desktop-inspector button,.desktop-menubar>button{min-height:44px}
  .desktop-menubar{height:44px}
  .desktop-menu-popover{top:43px}
  .desktop-window>footer{height:auto;flex-wrap:wrap;padding:8px 12px;line-height:1.5}
  .phase-rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--s-4);padding-inline-end:var(--s-4)}
  .phase-rail button{min-width:150px;border-bottom:2px solid transparent;scroll-snap-align:start}
  .phase-rail button.active{border-bottom-color:var(--tinte)}
  .project-cockpit>header{flex-wrap:wrap}
  .project-cockpit>main{width:calc(100% - 32px);padding:var(--s-5) 0}
  /* Mobil kompakter Kopf, damit die Phasenleiste im ersten Bildschirm liegt. */
  .project-hero{align-items:flex-start;flex-direction:column;gap:var(--s-4)}
  .project-hero h1{margin:var(--s-2) 0;font-size:clamp(24px,20px + 1.5vw,30px)}
  .project-hero p{display:none}
  .project-progress-ring{display:flex;align-items:baseline;gap:var(--s-3);padding-left:0;border-left:0}
  .project-progress-ring strong{font-size:26px}
  .phase-detail,.project-context{padding:var(--s-4)}
  .phase-detail>footer{align-items:stretch;flex-direction:column}
  .architecture-nodes{align-items:stretch;flex-direction:column;text-align:center}
  .wireframe-board{grid-template-columns:72px 1fr}
  .nw-service-bar{justify-content:center;padding-inline:var(--s-4)}
  .nw-service-bar span:last-child{display:none}
  .showcase-nav{height:64px;padding-inline:var(--s-4)}
  .showcase-links.open{top:64px}
  .nw-hero-copy{padding:var(--s-7) var(--s-4)}
  .nw-hero h1,.nw-page-head h1,.nw-detail-hero h1,.nw-contact-page h1{font-size:clamp(32px,24px + 3vw,44px)}
  .nw-hero-visual{min-height:0;gap:var(--s-3);padding:var(--s-5) var(--s-4)}
  .nw-appointment{position:static;width:min(420px,100%)}
  .nw-value{grid-template-columns:1fr;padding-inline:var(--s-4)}
  .nw-value article,.nw-value article:first-child{padding:var(--s-4) 0;border-right:0;border-bottom:1px solid var(--nw-linie)}
  .nw-value article:last-child{border-bottom:0}
  .nw-teaser{gap:var(--s-5);padding:var(--s-7) var(--s-4)}
  .nw-page-head{padding:var(--s-7) var(--s-4) var(--s-6)}
  .nw-service-list{padding:var(--s-3) var(--s-4) var(--s-7)}
  .nw-service-list article{grid-template-columns:40px 1fr;gap:var(--s-3);padding:var(--s-5) 0}
  .nw-service-list article button{grid-column:2;width:max-content}
  .nw-breadcrumb{padding-inline:var(--s-4)}
  .nw-detail-hero{gap:var(--s-5);padding:var(--s-7) var(--s-4)}
  .nw-steps{grid-template-columns:1fr;margin-inline:var(--s-4);padding:var(--s-7) 0}
  .nw-steps article,.nw-steps article:first-child,.nw-steps article:last-child{min-height:0;border-right:1px solid var(--nw-linie);border-bottom:0;border-radius:0}
  .nw-steps article:first-child{border-radius:var(--r-2) var(--r-2) 0 0}
  .nw-steps article:last-child{border-bottom:1px solid var(--nw-linie);border-radius:0 0 var(--r-2) var(--r-2)}
  .nw-steps h3{margin-top:var(--s-5)}
  .nw-faq{padding:var(--s-3) var(--s-4) var(--s-7)}
  .nw-project-grid{grid-template-columns:1fr;padding:var(--s-6) var(--s-4) var(--s-7)}
  .nw-contact-page{gap:var(--s-6);padding:var(--s-7) var(--s-4)}
  .nw-contact-page form{padding:var(--s-4)}
  .showcase-footer{align-items:flex-start;flex-direction:column;padding:var(--s-6) var(--s-4)}
  .showcase-footer nav{display:grid;grid-template-columns:1fr 1fr}
  .landing-nav{padding-inline:var(--s-4)}
  .landing-nav>span{display:none}
  .landing-hero{padding:var(--s-7) var(--s-4)}
  .landing-proof{grid-template-columns:1fr}
  .landing-proof div{padding:var(--s-4)}
  .landing-content{padding:var(--s-7) var(--s-4)}
  .landing-feature-grid{grid-template-columns:1fr}
  .landing-offer{grid-template-columns:1fr}
  .landing-offer>div:first-child{padding:var(--s-7) var(--s-4)}
  .landing-lead-panel{padding:var(--s-6) var(--s-4)}
  .leadboard-item{flex-direction:column;align-items:flex-start;gap:4px}
  .leadboard-item small{text-align:left;white-space:nowrap}
}
@media(max-width:600px){
  /* Command-Palette: Bereich und Zustand wandern unter Titel und Beschreibung, nichts wird abgeschnitten. */
  .command-results a{grid-template-columns:36px minmax(0,1fr);row-gap:4px}
  .command-results a b{grid-column:2;justify-self:start;white-space:normal}
  .command-results small{overflow:visible;text-overflow:clip;white-space:normal}
}
@media(max-width:440px){
  .demo-workbench{padding-inline:var(--s-3)}
  .demo-brand-mono{display:none}
  .config-type-grid{grid-template-columns:1fr 1fr}
  .date-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tour-actions button{min-width:0;flex:1}
  .toast-region{width:calc(100% - 24px);left:12px;bottom:12px}
}
/* Toasts stehen neben der Seitenleiste, nicht ueber ihrem Fuss. */
@media(min-width:768px){
  body:has(.app-sidebar) .toast-region{left:calc(200px + var(--s-4))}
}
@media(min-width:901px){
  body:has(.app-sidebar) .toast-region{left:calc(230px + var(--s-4))}
}
/* Ohne Maus bleibt kein Hover-Zustand nach dem Antippen haengen. */
@media(hover:none){
  .primary-button:hover{border-color:var(--tinte);background:var(--tinte);color:var(--papier)}
  .secondary-button:hover,.ghost-button:hover{background:transparent}
  .ghost-button:hover{border-color:var(--graphit)}
  .secondary-button.active:hover,.ghost-button.active:hover{background:var(--flaeche-2)}
  .danger-button:hover{background:transparent;color:var(--fehler)}
  .demo-workbench .ghost-button:hover{border-color:var(--rahmen-label);background:transparent}
  .demo-workbench .primary-button:hover{border-color:var(--rahmen-text);background:var(--rahmen-text);color:var(--rahmen)}
  .landing-site .primary-button:hover{border-color:var(--lp-akzent);background:var(--lp-akzent);color:var(--lp-akzent-text)}
  .nw-button:hover{background:transparent}
  .nw-button.primary:hover{filter:none}
  .choice-card:hover,.date-grid button:hover,.time-grid button:hover,.check-card:hover,.workflow-selector button:hover,.lead-card:hover,.config-type:hover,.table-actions button:hover,.demo-credentials button:hover{border-color:var(--linie);background:var(--flaeche)}
  .choice-card.selected:hover,.date-grid button.selected:hover,.time-grid button.selected:hover,.workflow-selector button.selected:hover,.config-type.selected:hover,.check-card:has(input:checked):hover{border-color:var(--tinte)}
  .date-grid button.selected:hover,.time-grid button.selected:hover{background:var(--tinte)}
  .workflow-selector button.selected:hover,.check-card:has(input:checked):hover{background:var(--flaeche-2)}
  .table-actions button:hover{background:transparent}
  .data-table tbody tr:hover,.app-nav button:hover,.bug-diagnostics>button:hover,.modern-workflow>button:hover,.desktop-table>button:hover,.rescue-track button:hover:not(:disabled),.phase-rail button:hover,.nw-teaser-list button:hover,.desktop-layout>aside>button:hover{background:transparent}
  .app-nav button.active:hover,.desktop-table>button.selected:hover,.phase-rail button.active:hover,.desktop-layout>aside>button.active:hover{background:var(--flaeche-2)}
}

/* 19. Bewegung: nur transform und opacity, bei reduzierter Bewegung sofort im Endzustand */
@media(prefers-reduced-motion:reduce){
  html[data-demo]{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .leuchte.ist-wartet,.workflow-step.running>span{animation:none;opacity:1}
}

/* 20. Nachpruefung Runde 2 (06.09.2026): gemeinsame Korrekturen ueber alle 17 Demos */
@media (min-width:1101px){
  .demo-workbench{grid-template-columns:auto minmax(280px,1.3fr) minmax(200px,1fr) auto}
}
.demo-experience-actions{min-width:0}
.demo-current-bereich{flex:0 0 auto}
.demo-session-hud .hud-last{flex:0 1 auto;min-width:0;max-width:360px}
.landing-site{--lp-akzent-auf-dunkel:#FF8A78}
html[data-theme="dark"] .landing-site{--lp-akzent-auf-dunkel:#FF7A6B}
.landing-offer .landing-kicker,.leadboard-head span{color:var(--lp-akzent-auf-dunkel)}
.config-type:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.top-search>span,.search-field>span{width:20px;height:20px}
.top-search>span .icon,.search-field>span .icon{position:static;width:20px;height:20px}
@media (max-width:767px){
  .demo-workbench .icon-only{width:44px;min-height:44px}
  /* Der einzige Weg zur Anfrage bleibt auch mobil beschriftet; der sr-only-Span traegt den vollen Namen. */
  .demo-workbench .primary-button{width:auto;min-height:44px;padding:0 12px;gap:6px}
  .demo-workbench .primary-button::after{content:"Anfrage";font-size:14px;font-weight:500}
  .data-table:not(.is-legacy *) tr{padding:var(--s-3) var(--s-4)}
}
@media (max-width:899px){
  .desktop-layout>aside{flex-wrap:wrap;overflow:visible}
}