:root{
  --bg:#07111f;--bg2:#0d1d30;--panel:#10243a;--panel2:#142b45;--panel3:#0b1a2b;
  --text:#edf5fb;--muted:#9eb0c4;--line:#28415d;--accent:#69e7c4;--accent2:#8db8ff;
  --danger:#ff8b93;--warning:#ffd27c;--ok:#78e6b9;--shadow:0 22px 60px rgba(0,0,0,.24);
  --radius:18px;--radius-sm:12px;--max:1320px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 84% 5%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 30%),
  radial-gradient(circle at 6% 18%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 28%),var(--bg);
  color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
a{color:inherit}.demo-shell{width:min(var(--max),calc(100% - 32px));margin:0 auto 64px}.demo-topbar{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)}
.demo-topbar-inner{width:min(var(--max),calc(100% - 32px));min-height:64px;margin:auto;display:flex;align-items:center;gap:16px}.demo-brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:850;letter-spacing:-.02em}.demo-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101a;font-weight:950}.demo-badge{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.74rem;font-weight:800}.demo-topbar-links{margin-left:auto;display:flex;gap:18px}.demo-topbar-links a{color:var(--muted);font-size:.86rem;text-decoration:none}.demo-topbar-links a:hover{color:#fff}.demo-hero{padding:42px 0 24px}.demo-hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:24px;align-items:end}.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.055em;margin-bottom:18px;max-width:900px}.demo-lead{max-width:850px;font-size:1.06rem;color:var(--muted);margin-bottom:0}.demo-note{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 88%,transparent),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}.demo-note strong{display:block;margin-bottom:5px}.demo-note p{margin:0;color:var(--muted);font-size:.88rem}
.app-frame{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--panel3) 94%,transparent);box-shadow:var(--shadow)}.app-toolbar{display:flex;align-items:center;gap:12px;min-height:70px;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel))}.app-toolbar .title{font-weight:900;letter-spacing:-.02em}.app-toolbar .sub{color:var(--muted);font-size:.8rem}.app-toolbar-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}.app-body{padding:20px}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.stack{display:grid;gap:14px}.panel{background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 92%,transparent),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px}.panel.soft{background:var(--panel3)}.panel h2{font-size:1.05rem;margin-bottom:5px}.panel p.help,.help{color:var(--muted);font-size:.84rem}.metric{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel2),var(--panel))}.metric .label{color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.metric .value{font-size:clamp(1.7rem,4vw,2.45rem);font-weight:950;letter-spacing:-.04em;line-height:1.05;margin-top:8px}.metric .delta{font-size:.78rem;color:var(--accent);margin-top:6px}.btn{appearance:none;border:0;border-radius:999px;min-height:42px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--panel2);color:var(--text);font:inherit;font-size:.84rem;font-weight:850;cursor:pointer;text-decoration:none;border:1px solid var(--line)}.btn:hover{filter:brightness(1.08)}.btn.primary{background:var(--accent);border-color:transparent;color:#06111a}.btn.secondary{background:var(--accent2);border-color:transparent;color:#06111a}.btn.danger{background:color-mix(in srgb,var(--danger) 18%,var(--panel));color:#ffd1d4;border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}.btn.ghost{background:transparent}.btn.small{min-height:34px;padding:0 11px;font-size:.76rem}.btn.square{width:40px;padding:0;border-radius:11px}.field{display:grid;gap:7px}.field label,.field-label{font-size:.76rem;font-weight:850;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel3);color:var(--text);padding:11px 12px;font:inherit;outline:none}textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}.inline-fields{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-fields>.field{flex:1;min-width:160px}.form-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:16px}.divider{height:1px;background:var(--line);margin:8px 0}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:var(--panel3);border:1px solid var(--line);font-size:.74rem;font-weight:850;color:var(--muted)}.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--panel3))}.pill.warn{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,var(--line));background:color-mix(in srgb,var(--warning) 8%,var(--panel3))}.pill.danger{color:#ffb8bd;border-color:color-mix(in srgb,var(--danger) 36%,var(--line));background:color-mix(in srgb,var(--danger) 10%,var(--panel3))}.pill.info{color:var(--accent2)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:middle}th{position:sticky;top:0;background:var(--panel2);z-index:2;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--accent2) 5%,transparent)}.actions-row{display:flex;gap:6px;justify-content:flex-end}.empty{padding:34px;text-align:center;color:var(--muted)}.searchbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.searchbar .grow{flex:1;min-width:210px}
.progress{height:9px;border-radius:999px;background:var(--panel3);overflow:hidden;border:1px solid var(--line)}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .25s ease}.steps{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.step-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:900}.step-dot.active,.step-dot.done{background:var(--accent);color:#06111a;border-color:transparent}.step-line{height:1px;min-width:24px;flex:1;background:var(--line)}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px;overflow:auto}.kanban-col{background:var(--panel3);border:1px solid var(--line);border-radius:var(--radius);padding:13px;min-height:430px}.kanban-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.kanban-head strong{font-size:.92rem}.kanban-head .count{margin-left:auto;color:var(--muted);font-size:.75rem}.task-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;cursor:grab}.task-card:active{cursor:grabbing}.task-card.dragging{opacity:.45}.task-title{font-weight:850;margin-bottom:8px}.task-meta{display:flex;gap:7px;flex-wrap:wrap}.task-note{font-size:.82rem;color:var(--muted);margin:8px 0}.task-footer{display:flex;align-items:center;gap:8px;margin-top:10px}.task-footer .spacer{margin-left:auto}.priority-high{border-left:4px solid var(--danger)}.priority-medium{border-left:4px solid var(--warning)}.priority-low{border-left:4px solid var(--accent)}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;overflow:auto}.calendar-day{min-height:150px;border:1px solid var(--line);border-radius:14px;background:var(--panel3);padding:10px}.calendar-day .day-title{font-size:.78rem;font-weight:900;color:var(--muted);margin-bottom:8px}.shift-chip,.booking-chip{padding:8px 9px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--accent2) 30%,var(--line));font-size:.76rem;margin-bottom:7px}.shift-chip strong,.booking-chip strong{display:block}.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}.slot{appearance:none;border:1px solid var(--line);background:var(--panel3);color:var(--text);border-radius:12px;padding:12px;cursor:pointer;font-weight:850}.slot:hover,.slot.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel3))}.slot.busy{opacity:.38;pointer-events:none;text-decoration:line-through}
.check-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}.check-row:last-child{border-bottom:0}.check-row input{margin-top:4px}.check-row.done .check-title{text-decoration:line-through;color:var(--muted)}.check-title{font-weight:800}.check-note{font-size:.8rem;color:var(--muted)}
.quote-lines{display:grid;gap:8px}.quote-line{display:grid;grid-template-columns:minmax(220px,2fr) 90px 120px 110px 44px;gap:8px;align-items:center}.summary-list{display:grid;gap:8px}.summary-row{display:flex;justify-content:space-between;gap:18px;color:var(--muted)}.summary-row strong{color:var(--text)}.summary-row.total{font-size:1.16rem;padding-top:10px;border-top:1px solid var(--line);color:var(--text)}
.chart-bars{display:flex;align-items:end;gap:12px;height:180px;padding:18px 4px 0}.chart-bar{flex:1;min-width:42px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:7px;height:100%}.chart-bar .bar{width:100%;max-width:58px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--accent2),var(--accent));min-height:2px;transition:height .3s}.chart-bar .bar-label{font-size:.72rem;color:var(--muted)}.chart-bar .bar-value{font-size:.72rem;font-weight:900}.nps{display:flex;gap:7px;flex-wrap:wrap}.nps button{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--panel3);color:var(--text);font-weight:900;cursor:pointer}.nps button.selected{background:var(--accent);color:#07111a;border-color:transparent}.timeline{display:grid;gap:0}.timeline-item{position:relative;padding:0 0 18px 26px}.timeline-item:before{content:"";position:absolute;left:7px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--accent)}.timeline-item:after{content:"";position:absolute;left:11px;top:18px;bottom:0;width:1px;background:var(--line)}.timeline-item:last-child:after{display:none}.timeline-item strong{font-size:.86rem}.timeline-item p{margin:2px 0 0;color:var(--muted);font-size:.78rem}
.stat-strip{display:flex;gap:10px;flex-wrap:wrap}.stat-mini{padding:9px 11px;border-radius:12px;background:var(--panel3);border:1px solid var(--line);font-size:.76rem;color:var(--muted)}.stat-mini strong{color:var(--text);font-size:.88rem}.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:16px}.sidebar-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}.side-nav{padding:12px;background:var(--panel3);border:1px solid var(--line);border-radius:var(--radius);height:max-content}.side-nav button{width:100%;text-align:left;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-weight:800;cursor:pointer}.side-nav button.active{background:var(--panel2);color:var(--text)}.tag{display:inline-flex;padding:4px 7px;border-radius:7px;font-size:.7rem;font-weight:800;background:var(--panel3);color:var(--muted);border:1px solid var(--line)}
.dn-toast{position:fixed;right:22px;bottom:22px;z-index:1000;max-width:min(390px,calc(100% - 44px));padding:12px 15px;border-radius:12px;background:#10243a;color:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(20px);opacity:0;transition:.2s;pointer-events:none;font-size:.86rem;font-weight:800}.dn-toast.show{transform:none;opacity:1}.dn-toast.bad{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));color:#ffd1d4}.dn-toast.warn{border-color:color-mix(in srgb,var(--warning) 45%,var(--line));color:#ffe8b5}
.theme-ocean{--accent:#64e4c3;--accent2:#7faeff}.theme-amber{--accent:#ffd06f;--accent2:#ff9c76}.theme-violet{--accent:#c9a7ff;--accent2:#7ea6ff}.theme-green{--accent:#75e29a;--accent2:#68d8d1}.theme-coral{--accent:#ff9f91;--accent2:#ffc06e}.theme-blue{--accent:#7bc5ff;--accent2:#8e9eff}.theme-plum{--accent:#e8a7ef;--accent2:#9f9cff}.theme-lime{--accent:#c8ea78;--accent2:#70d9bf}.theme-steel{--accent:#9ed6e8;--accent2:#a7b8ff}.theme-rose{--accent:#ff9eb8;--accent2:#c29cff}.theme-sand{--accent:#f2cb88;--accent2:#8fc7c1}.theme-indigo{--accent:#9ea8ff;--accent2:#78d9e6}
@media(max-width:980px){.demo-hero-grid,.split,.sidebar-layout{grid-template-columns:1fr}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.kanban{grid-template-columns:repeat(3,280px)}.quote-line{grid-template-columns:minmax(180px,2fr) 80px 110px 100px 44px}}
@media(max-width:720px){.demo-topbar-inner{min-height:58px}.demo-topbar-links{display:none}.demo-shell{width:min(100% - 20px,var(--max))}.demo-hero{padding-top:28px}.app-body{padding:13px}.grid.two,.grid.three,.grid.four,.form-grid{grid-template-columns:1fr}.quote-line{grid-template-columns:1fr 1fr}.quote-line .description{grid-column:1/-1}.quote-line .remove{grid-column:2;justify-self:end}.calendar-grid{grid-template-columns:repeat(7,180px)}.app-toolbar{align-items:flex-start;flex-direction:column}.app-toolbar-actions{margin-left:0;width:100%}.app-toolbar-actions .btn{flex:1}}
@media print{.demo-topbar,.demo-hero,.app-toolbar-actions,.no-print,.dn-toast{display:none!important}body{background:#fff;color:#111}.demo-shell{width:100%;margin:0}.app-frame,.panel,.metric{box-shadow:none;border-color:#ccc;background:#fff;color:#111}.help,.panel p.help{color:#555}.app-body{padding:0}.btn{display:none!important}input,select,textarea{border-color:#ccc;background:#fff;color:#111}}

/* =========================================================
   Individuelle Gestaltungsrichtungen
   Sechs Demos teilen dieselbe Funktionsbasis, sehen aber
   bewusst deutlich unterschiedlich aus.
   ========================================================= */

/* 1) Projektanfrage Pro – Editorial / Premium / warm */
body.layout-editorial{
  --bg:#f2eee7;--bg2:#ebe4d8;--panel:#fffdf9;--panel2:#f8f2e8;--panel3:#f1eadf;
  --text:#2e2a26;--muted:#756f67;--line:#d8cec0;--accent:#1e6f5c;--accent2:#c9975a;
  --danger:#b74f4b;--warning:#9b6b18;--ok:#2e7d5b;--shadow:0 22px 60px rgba(74,57,36,.12);
  --radius:10px;color-scheme:light;background:linear-gradient(180deg,#f7f3ed 0,#f2eee7 52%,#ebe4d8 100%);
  font-family:Georgia,"Times New Roman",serif;color:var(--text)
}
.layout-editorial .demo-topbar{position:relative;background:#f7f3ed;border-bottom:1px solid #ded4c6;backdrop-filter:none}
.layout-editorial .demo-topbar-inner{min-height:72px}
.layout-editorial .demo-brand{font-family:Inter,system-ui,sans-serif;color:#1f2824}
.layout-editorial .demo-mark{background:#1e6f5c;color:#fff;border-radius:3px}
.layout-editorial .demo-badge{font-family:Inter,system-ui,sans-serif;border-color:#d8cec0;background:#fffaf2;color:#756f67;border-radius:3px;letter-spacing:.02em}
.layout-editorial .demo-topbar-links a{font-family:Inter,system-ui,sans-serif;color:#5f625f}
.layout-editorial .demo-shell{width:min(1120px,calc(100% - 36px));margin-bottom:90px}
.layout-editorial .demo-hero{padding:64px 0 34px;border-bottom:1px solid #d8cec0}
.layout-editorial .demo-hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);align-items:start}
.layout-editorial .eyebrow{font-family:Inter,system-ui,sans-serif;color:#1e6f5c;letter-spacing:.16em}
.layout-editorial h1{max-width:760px;font-size:clamp(2.8rem,5.7vw,5.2rem);line-height:1.01;letter-spacing:-.045em;font-weight:500}
.layout-editorial .demo-lead{font-size:1.12rem;line-height:1.75;color:#68645e;max-width:760px}
.layout-editorial .demo-note{background:#fffaf2;border:0;border-left:4px solid #c9975a;border-radius:0;padding:20px 22px;box-shadow:none;font-family:Inter,system-ui,sans-serif}
.layout-editorial .demo-note p{color:#6d675f}
.layout-editorial .app-frame{margin-top:34px;background:#fffdf9;border:1px solid #d8cec0;border-radius:4px;box-shadow:0 30px 80px rgba(74,57,36,.13)}
.layout-editorial .app-toolbar{min-height:78px;background:#2c332f;border-bottom:0;padding:18px 22px;color:#fff}
.layout-editorial .app-toolbar .sub{color:#d8d8cf;font-family:Inter,system-ui,sans-serif}.layout-editorial .app-toolbar .title{font-size:1.08rem;font-family:Inter,system-ui,sans-serif}
.layout-editorial .app-body{padding:30px}.layout-editorial .panel,.layout-editorial .metric{background:#fffdf9;border:1px solid #ded4c6;border-radius:4px;box-shadow:none}
.layout-editorial .panel.soft{background:#f7f0e5}.layout-editorial .panel h2{font-family:Georgia,"Times New Roman",serif;font-size:1.45rem;font-weight:500}
.layout-editorial .help,.layout-editorial .panel p.help,.layout-editorial .field label,.layout-editorial .field-label{font-family:Inter,system-ui,sans-serif;color:#777069}
.layout-editorial input,.layout-editorial select,.layout-editorial textarea{background:#fff;border-color:#d8cec0;color:#2e2a26;border-radius:3px;font-family:Inter,system-ui,sans-serif}
.layout-editorial input:focus,.layout-editorial select:focus,.layout-editorial textarea:focus{border-color:#1e6f5c;box-shadow:0 0 0 3px rgba(30,111,92,.12)}
.layout-editorial .btn{font-family:Inter,system-ui,sans-serif;border-radius:3px;background:#f6efe5;color:#2e2a26;border-color:#d6c9b9}.layout-editorial .btn.primary{background:#1e6f5c;color:#fff;border-color:#1e6f5c}
.layout-editorial .step-dot{border-radius:3px;background:#f7f0e5}.layout-editorial .step-dot.active,.layout-editorial .step-dot.done{background:#1e6f5c;color:#fff}.layout-editorial .progress{border-radius:0;background:#e8ded0;border-color:#e0d5c7}.layout-editorial .progress>span{border-radius:0;background:#c9975a}

/* 2) ErfassungsDesk – sachliche Verwaltungssoftware */
body.layout-ledger{
  --bg:#eef1f3;--bg2:#e4e8eb;--panel:#ffffff;--panel2:#f3f5f6;--panel3:#f7f8f9;
  --text:#172027;--muted:#66737d;--line:#cfd6db;--accent:#e36d25;--accent2:#263746;
  --danger:#b84747;--warning:#9a6a08;--ok:#2f785a;--shadow:0 12px 32px rgba(30,43,52,.10);
  --radius:6px;color-scheme:light;background:#eef1f3;color:var(--text);font-family:Arial,Helvetica,sans-serif
}
.layout-ledger .demo-topbar{background:#172027;border:0;backdrop-filter:none}.layout-ledger .demo-topbar-inner{min-height:58px}.layout-ledger .demo-brand{color:#fff}.layout-ledger .demo-mark{border-radius:2px;background:#e36d25;color:#fff}.layout-ledger .demo-badge{border-radius:2px;border-color:#3c4a54;background:#26333c;color:#d7dde1}.layout-ledger .demo-topbar-links a{color:#c7d0d6}
.layout-ledger .demo-shell{width:min(1460px,calc(100% - 28px));margin-bottom:52px}.layout-ledger .demo-hero{padding:28px 0 18px}.layout-ledger .demo-hero-grid{grid-template-columns:minmax(0,1fr) 380px;align-items:center}.layout-ledger .eyebrow{color:#d55e18}.layout-ledger h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.02;letter-spacing:-.035em;max-width:900px}.layout-ledger .demo-lead{max-width:900px;color:#5f6d77}.layout-ledger .demo-note{background:#fff;border:1px solid #cfd6db;border-radius:4px;box-shadow:none}.layout-ledger .demo-note p{color:#67747d}
.layout-ledger .app-frame{border:1px solid #bcc5cb;border-radius:5px;background:#fff;box-shadow:0 16px 40px rgba(30,43,52,.10)}.layout-ledger .app-toolbar{min-height:62px;background:#263746;border:0;border-bottom:4px solid #e36d25;padding:11px 16px}.layout-ledger .app-toolbar .sub{color:#cbd5db}.layout-ledger .app-body{padding:16px;background:#eef1f3}
.layout-ledger .grid.four{gap:10px}.layout-ledger .metric{border-radius:4px;background:#fff;border:1px solid #cfd6db;box-shadow:none;padding:14px}.layout-ledger .metric .label{color:#6b7780}.layout-ledger .metric .value{font-size:1.9rem}.layout-ledger .metric .delta{color:#d55e18}
.layout-ledger .panel{border-radius:4px;background:#fff;border:1px solid #cfd6db;box-shadow:none;padding:15px}.layout-ledger input,.layout-ledger select,.layout-ledger textarea{background:#fff;color:#172027;border-radius:2px;border-color:#bfc8ce}.layout-ledger .btn{border-radius:2px;background:#fff;color:#263746;border-color:#aeb9c0}.layout-ledger .btn.primary{background:#e36d25;border-color:#e36d25;color:#fff}.layout-ledger .btn.secondary{background:#263746;color:#fff}.layout-ledger .table-wrap{border-radius:3px;border-color:#bfc8ce;background:#fff}.layout-ledger table{font-size:.9rem}.layout-ledger th{background:#e7ebee;color:#3d4b55;border-color:#c5cdd2}.layout-ledger td{border-color:#dde2e5}.layout-ledger tbody tr:nth-child(even){background:#fafbfb}.layout-ledger tbody tr:hover{background:#fff3ea}.layout-ledger .pill{border-radius:2px;background:#f3f5f6;color:#53616b}

/* 3) AufgabenBoard – visuell, locker, pastellig */
body.layout-canvas{
  --bg:#e9ecff;--bg2:#dfe4ff;--panel:#ffffff;--panel2:#f5f4ff;--panel3:#f8f7ff;
  --text:#282a3f;--muted:#6f7189;--line:#d8d9eb;--accent:#7768e8;--accent2:#55b7c7;
  --danger:#ef7d91;--warning:#e6b450;--ok:#5cb88b;--shadow:0 20px 55px rgba(76,78,133,.13);
  --radius:24px;color-scheme:light;background:linear-gradient(140deg,#eef0ff 0%,#e4eff5 45%,#f6eafd 100%);color:var(--text)
}
.layout-canvas .demo-topbar{top:12px;width:min(1180px,calc(100% - 28px));margin:12px auto 0;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 12px 36px rgba(80,82,130,.10);backdrop-filter:blur(18px)}.layout-canvas .demo-topbar-inner{width:auto;padding:0 14px}.layout-canvas .demo-brand{color:#2c2e42}.layout-canvas .demo-mark{background:linear-gradient(135deg,#7668e8,#63c6d1);color:white;border-radius:12px}.layout-canvas .demo-badge{border:0;background:#f0efff;color:#655fc0}.layout-canvas .demo-topbar-links a{color:#64667e}
.layout-canvas .demo-shell{width:min(1280px,calc(100% - 32px));margin-top:24px}.layout-canvas .demo-hero{padding:44px 0 26px}.layout-canvas .demo-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr)}.layout-canvas .eyebrow{color:#6e62dd}.layout-canvas h1{font-size:clamp(2.6rem,5.2vw,4.8rem);color:#282a3f}.layout-canvas .demo-lead{color:#686b83}.layout-canvas .demo-note{background:linear-gradient(135deg,#ffffff,#f6f3ff);border:1px solid #dcd9ef;box-shadow:0 12px 30px rgba(79,79,130,.08);border-radius:22px}.layout-canvas .demo-note p{color:#71748a}
.layout-canvas .app-frame{border:0;background:transparent;box-shadow:none;overflow:visible}.layout-canvas .app-toolbar{background:#fff;border:1px solid #dcddec;border-radius:24px;box-shadow:0 14px 40px rgba(79,79,130,.10);margin-bottom:16px}.layout-canvas .app-toolbar .sub{color:#7c7f93}.layout-canvas .app-body{padding:0}.layout-canvas .metric{background:rgba(255,255,255,.82);border:1px solid #dfe0ef;border-radius:22px;box-shadow:0 10px 30px rgba(79,79,130,.08)}.layout-canvas .metric:nth-child(1){transform:rotate(-.5deg)}.layout-canvas .metric:nth-child(2){transform:rotate(.35deg)}
.layout-canvas .panel{background:rgba(255,255,255,.86);border:1px solid #dedfec;border-radius:22px;box-shadow:0 12px 34px rgba(79,79,130,.08)}.layout-canvas input,.layout-canvas select,.layout-canvas textarea{background:#fff;color:#292b41;border-color:#d6d7e6;border-radius:14px}.layout-canvas .btn{border-radius:14px;background:#f2f1fb;color:#37394e;border-color:#dadbec}.layout-canvas .btn.primary{background:#7567e7;color:white;border-color:#7567e7}.layout-canvas .kanban{gap:18px}.layout-canvas .kanban-col{background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:12px;box-shadow:inset 0 0 0 1px rgba(214,216,235,.65)}.layout-canvas .kanban-col:nth-child(1){background:rgba(245,242,255,.82)}.layout-canvas .kanban-col:nth-child(2){background:rgba(235,249,250,.84)}.layout-canvas .kanban-col:nth-child(3){background:rgba(239,248,242,.88)}.layout-canvas .task-card{border-radius:18px;background:#fff;border-color:#e0e0ed;box-shadow:0 8px 20px rgba(79,79,130,.08)}.layout-canvas .pill{border-radius:12px;background:#f7f6ff;color:#666981}

/* 4) TerminPlaner – ruhig, hell, serviceorientiert */
body.layout-booking{
  --bg:#f5f8f6;--bg2:#edf3ef;--panel:#ffffff;--panel2:#f2f7f3;--panel3:#f7faf8;
  --text:#24342d;--muted:#66786f;--line:#d7e2db;--accent:#2f8d68;--accent2:#aacbb9;
  --danger:#b85c5c;--warning:#a47a2d;--ok:#2f8d68;--shadow:0 24px 70px rgba(46,77,60,.10);
  --radius:16px;color-scheme:light;background:#f5f8f6;color:var(--text);font-family:"Trebuchet MS",Inter,system-ui,sans-serif
}
.layout-booking .demo-topbar{position:relative;background:#fff;border-bottom:1px solid #dbe5de;backdrop-filter:none}.layout-booking .demo-brand{color:#26372f}.layout-booking .demo-mark{background:#2f8d68;color:#fff;border-radius:50%}.layout-booking .demo-badge{background:#eef6f1;border-color:#d4e5da;color:#4d6c5b}.layout-booking .demo-topbar-links a{color:#53685d}
.layout-booking .demo-shell{width:min(1180px,calc(100% - 36px));margin-bottom:80px}.layout-booking .demo-hero{padding:54px 0 34px}.layout-booking .demo-hero-grid{align-items:center}.layout-booking .eyebrow{color:#2f8d68}.layout-booking h1{font-size:clamp(2.7rem,5vw,4.6rem);line-height:1.02;color:#21352b}.layout-booking .demo-lead{color:#65776e;line-height:1.7}.layout-booking .demo-note{background:#eaf4ed;border:1px solid #d0e2d5;border-radius:18px;box-shadow:none}.layout-booking .demo-note p{color:#5e7467}
.layout-booking .app-frame{background:#fff;border:1px solid #d7e2db;border-radius:28px;box-shadow:0 26px 70px rgba(47,91,68,.12)}.layout-booking .app-toolbar{background:#fbfdfb;border-bottom:1px solid #dce7df;padding:18px 22px}.layout-booking .app-toolbar .sub{color:#6a7b72}.layout-booking .app-body{padding:24px}.layout-booking .grid.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.layout-booking .metric{background:#f3f8f4;border:0;border-radius:16px;box-shadow:none}.layout-booking .panel{background:#fff;border:1px solid #dce7df;border-radius:20px;box-shadow:none}.layout-booking .split{grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:22px}.layout-booking .split>section:first-child{background:#f6faf7}.layout-booking input,.layout-booking select,.layout-booking textarea{background:#fbfdfb;color:#24342d;border-color:#ccdcd1;border-radius:10px}.layout-booking .btn{background:#f2f6f3;color:#31483b;border-color:#d1ddd5;border-radius:10px}.layout-booking .btn.primary{background:#2f8d68;color:#fff;border-color:#2f8d68}.layout-booking .slot-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}.layout-booking .slot{background:#fff;color:#31483b;border:1px solid #cbdcd1;border-radius:10px}.layout-booking .slot:hover,.layout-booking .slot.selected{background:#2f8d68;color:#fff;border-color:#2f8d68}.layout-booking .table-wrap{border-radius:14px;background:#fff}.layout-booking th{background:#edf5ef;color:#536a5d}

/* 5) AngebotsRechner – dokumentnah / fast wie ein Angebot auf Papier */
body.layout-document{
  --bg:#dfe1e2;--bg2:#d8dadc;--panel:#ffffff;--panel2:#f8f8f6;--panel3:#fbfbfa;
  --text:#202224;--muted:#6c7074;--line:#d6d6d2;--accent:#1e4e6b;--accent2:#b9874f;
  --danger:#a84e4e;--warning:#946a22;--ok:#3e7055;--shadow:0 24px 65px rgba(27,32,35,.16);
  --radius:0;color-scheme:light;background:#dfe1e2;color:var(--text);font-family:Arial,Helvetica,sans-serif
}
.layout-document .demo-topbar{position:relative;background:#2c3033;border:0;backdrop-filter:none}.layout-document .demo-topbar-inner{min-height:52px}.layout-document .demo-mark{border-radius:0;background:#f2f2ef;color:#2c3033}.layout-document .demo-badge{border-radius:0;border-color:#555b5f;color:#d7dbdd;background:#3c4145}.layout-document .demo-topbar-links a{color:#d2d6d8}
.layout-document .demo-shell{width:min(1120px,calc(100% - 28px));margin-bottom:72px}.layout-document .demo-hero{padding:34px 0 22px}.layout-document .demo-hero-grid{grid-template-columns:1fr 340px;align-items:end}.layout-document .eyebrow{color:#315f78}.layout-document h1{font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:1.05;letter-spacing:-.035em}.layout-document .demo-lead{color:#5f6569}.layout-document .demo-note{border-radius:0;background:#eceeef;border:1px solid #cfd3d5;box-shadow:none}.layout-document .demo-note p{color:#62676b}
.layout-document .app-frame{width:min(100%,980px);margin:18px auto 0;border:0;border-radius:0;background:#fff;box-shadow:0 28px 80px rgba(25,31,35,.18);overflow:visible}.layout-document .app-toolbar{background:#fff;color:#202224;border-bottom:2px solid #202224;padding:24px 32px;min-height:82px}.layout-document .app-toolbar .title{font-size:1.25rem}.layout-document .app-toolbar .sub{color:#6d7174}.layout-document .app-body{padding:34px 38px 44px}.layout-document .panel{background:#fff;border:0;border-bottom:1px solid #d8d8d4;border-radius:0;box-shadow:none;padding:22px 0}.layout-document .panel:last-child{border-bottom:0}.layout-document .split{grid-template-columns:1fr 360px;gap:36px}.layout-document .split .panel{border:0;padding-top:10px}.layout-document input,.layout-document select,.layout-document textarea{background:#fff;color:#202224;border:0;border-bottom:1px solid #aeb2b4;border-radius:0;padding-left:0;padding-right:0}.layout-document input:focus,.layout-document select:focus,.layout-document textarea:focus{box-shadow:none;border-color:#1e4e6b}.layout-document .btn{border-radius:0;background:#f1f2f2;color:#2a3033;border-color:#bfc4c6}.layout-document .btn.primary{background:#1e4e6b;color:#fff;border-color:#1e4e6b}.layout-document .quote-line{padding:8px 0;border-bottom:1px solid #ececea}.layout-document .summary-row.total{border-top:2px solid #202224;font-size:1.25rem}.layout-document .pill{border-radius:0}

/* 6) FreigabeFlow – dunkles Prozess-/Operations-Interface */
body.layout-workflow{
  --bg:#080a10;--bg2:#0b0f18;--panel:#101521;--panel2:#151c2b;--panel3:#0d121d;
  --text:#f4f6fb;--muted:#8f9aad;--line:#293449;--accent:#9f85ff;--accent2:#64d8df;
  --danger:#ff7a8c;--warning:#f1c15c;--ok:#69d39b;--shadow:0 28px 80px rgba(0,0,0,.32);
  --radius:10px;background:linear-gradient(180deg,#080a10,#0d121d 55%,#080a10);color:var(--text);font-family:Inter,system-ui,sans-serif
}
.layout-workflow .demo-topbar{background:#080a10;border-bottom:1px solid #20283a}.layout-workflow .demo-topbar-inner{min-height:58px}.layout-workflow .demo-mark{border-radius:4px;background:#9f85ff;color:#090b10}.layout-workflow .demo-badge{border-radius:4px;background:#141927;border-color:#2a3347;color:#b6bfd0}.layout-workflow .demo-topbar-links a{color:#aeb8ca}
.layout-workflow .demo-shell{width:min(1500px,calc(100% - 30px));margin-bottom:60px}.layout-workflow .demo-hero{padding:32px 0 20px}.layout-workflow .demo-hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr);align-items:center}.layout-workflow .eyebrow{color:#9f85ff}.layout-workflow h1{font-size:clamp(2.3rem,4.6vw,4.1rem);max-width:980px}.layout-workflow .demo-lead{color:#97a2b5}.layout-workflow .demo-note{background:#101521;border:1px solid #273247;border-radius:8px;box-shadow:none}.layout-workflow .demo-note strong{color:#c8bbff}.layout-workflow .demo-note p{color:#939db0}
.layout-workflow .app-frame{background:#0b1019;border:1px solid #252f42;border-radius:10px;box-shadow:0 26px 80px rgba(0,0,0,.35)}.layout-workflow .app-toolbar{background:#0f1520;border-bottom:1px solid #263147;border-left:4px solid #9f85ff;padding:14px 18px;min-height:66px}.layout-workflow .app-body{padding:18px}.layout-workflow .metric{background:#111824;border:1px solid #28344a;border-radius:8px;box-shadow:none}.layout-workflow .metric .value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.layout-workflow .metric .delta{color:#64d8df}.layout-workflow .sidebar-layout{grid-template-columns:210px minmax(0,1fr);gap:12px}.layout-workflow .side-nav{background:#0e141f;border:1px solid #273249;border-radius:8px;padding:8px;position:sticky;top:78px}.layout-workflow .side-nav button{border-radius:5px;color:#909bad}.layout-workflow .side-nav button.active{background:#201c38;color:#d8d0ff;border-left:3px solid #9f85ff}.layout-workflow .panel{background:#101722;border:1px solid #273249;border-radius:8px;box-shadow:none}.layout-workflow input,.layout-workflow select,.layout-workflow textarea{background:#0b1019;border-color:#2d394f;border-radius:5px}.layout-workflow .btn{border-radius:5px;background:#151d2a;border-color:#303b50}.layout-workflow .btn.primary{background:#9f85ff;color:#090b10;border-color:#9f85ff}.layout-workflow .pill{border-radius:4px}.layout-workflow .timeline-item:before{box-shadow:0 0 0 4px rgba(159,133,255,.12)}

@media(max-width:980px){
  .layout-editorial .demo-hero-grid,.layout-ledger .demo-hero-grid,.layout-document .demo-hero-grid,.layout-workflow .demo-hero-grid{grid-template-columns:1fr}
  .layout-document .split,.layout-booking .split{grid-template-columns:1fr}
  .layout-workflow .sidebar-layout{grid-template-columns:1fr}.layout-workflow .side-nav{position:static;display:flex;gap:6px;overflow:auto}.layout-workflow .side-nav .field-label{display:none}.layout-workflow .side-nav button{width:auto;white-space:nowrap}
}
@media(max-width:720px){
  .layout-canvas .demo-topbar{top:6px;margin-top:6px;width:calc(100% - 14px)}
  .layout-editorial .app-body,.layout-document .app-body{padding:18px}
  .layout-document .app-toolbar{padding:18px}.layout-document .quote-line{padding:10px 0}
  .layout-booking .grid.four{grid-template-columns:1fr 1fr}
  .layout-ledger .demo-shell,.layout-workflow .demo-shell{width:calc(100% - 16px)}
}