/* sailesconsulting Design-System · Brand Guide Juni 2026 (Basis CONACT Styleguide v3.2)
   Farben, Radien, Elevation aus dem Brand Book. Saira (Display), Hanken Grotesk (Body), IBM Plex Mono-Ersatz: ui-monospace.
   Nur helles Schema. Bereiche tragen die Kennzeichnung Eingabe, Information oder Ergebnis. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/hanken-300.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-600.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/hanken-700.woff2") format("woff2")}
@font-face{font-family:"Saira";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/saira-600.woff2") format("woff2")}
@font-face{font-family:"Saira";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/saira-700.woff2") format("woff2")}

:root{
  --primary:#2B3440;--primary-75:#5A626D;--primary-50:#959BA1;--primary-25:#CACDD1;--primary-10:#EAECEE;
  --petrol:#0E5A6F;--petrol-75:#4B828F;--petrol-50:#87ACB5;--petrol-25:#C3D5DA;--petrol-10:#E7EEF1;
  --burgundy:#8B2E3E;--burgundy-10:#F2E5E8;--moss:#7B8F3E;--moss-10:#EEF1E3;--warning:#C28A2C;--warning-10:#F7EEDD;
  --spark:#D3E282;--spark-10:#F4F8E3;
  --surface:#F4F5F7;--white:#FFFFFF;--muted:#8A94A3;--line:#CACDD1;--line-soft:#EAECEE;
  --ink:var(--primary);--ink-75:var(--primary-75);
  --r-sm:4px;--r:6px;--r-lg:8px;--r-xl:14px;--r-pill:999px;
  --e1:0 1px 3px rgba(43,52,64,.08);--e2:0 4px 8px rgba(43,52,64,.10);--e3:0 8px 24px rgba(43,52,64,.14);
  --t:180ms ease-out;--max:1440px;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --font-body:"Hanken Grotesk","Neue Haas Unica Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Saira","FF DIN","DIN Next","Hanken Grotesk",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--surface);color:var(--ink);font:400 15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
h1,h2,h3,h4{margin:0;text-wrap:balance}
h1{font-family:var(--font-display);font-size:1.9rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
p{margin:0}
a{color:var(--petrol)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.kicker{font:600 .7rem/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy)}
.caption{font-size:.8rem;color:var(--muted)}
.lead{font-size:1.05rem;font-weight:300;line-height:1.55;color:var(--ink-75);max-width:66ch}
.spacer{flex:1}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stack{display:grid;gap:4px}
.right{text-align:right}
.center{text-align:center}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
.ok{color:var(--moss)} .warn{color:var(--warning)} .bad{color:var(--burgundy)}

/* Wortmarke */
.brand{display:inline-flex;flex-direction:column;line-height:1;gap:3px;text-decoration:none}
.brand .wm{font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:.002em;color:#CBD4D8;line-height:.95}
.brand .wm .ai{color:var(--spark)}
.brand .by{font-family:var(--font-display);font-weight:400;font-size:.68rem;letter-spacing:.06em;color:var(--petrol-50)}
.brand .by .act{font-weight:700;font-size:.8rem;color:#CBD4D8}

/* Kopfzeile (dunkel, wie sailesconsulting.com) */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;min-height:60px;padding:8px 28px;background:var(--primary);color:#fff;box-shadow:var(--e1)}
.top .appname{padding-left:16px;border-left:1px solid rgba(255,255,255,.18);font-weight:600;font-size:.95rem;color:#fff}
.top .claim{color:var(--petrol-50);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.top a{color:rgba(255,255,255,.85);text-decoration:none}
.top .btn{border-color:rgba(255,255,255,.35);background:transparent;color:#fff}
.top .btn:hover{background:rgba(255,255,255,.1)}
.top .btn.primary{background:var(--petrol);border-color:var(--petrol)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;font-size:.8rem;font-weight:500}
.pill b{font-family:var(--mono);letter-spacing:.08em}
main{max-width:var(--max);margin:0 auto;padding:28px 28px 112px}
main.narrow{max-width:900px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r);background:var(--white);color:var(--ink);font-size:.875rem;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--t),border-color var(--t),transform var(--t)}
.btn:hover{background:var(--surface)}
.btn.primary{background:var(--petrol);border-color:var(--petrol);color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--petrol)}
.btn.ghost:hover{background:var(--petrol-10)}
.btn.danger{border-color:var(--burgundy);color:var(--burgundy)}
.btn.danger:hover{background:var(--burgundy-10)}
.btn.ai{border-color:var(--petrol-25);background:var(--spark-10);color:var(--petrol)}
.btn.ai:hover{background:var(--spark)}
.btn.ai::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--spark);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--petrol-25)}
.btn.sm{height:32px;padding:0 12px;font-size:.8125rem}
.btn.lg{height:48px;padding:0 22px;font-size:1rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn .ic{width:16px;height:16px}

/* Formulare */
label{display:block;margin-bottom:4px;font-size:.8125rem;font-weight:500}
input,textarea,select{width:100%;min-height:40px;padding:9px 12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--petrol)}
textarea{resize:vertical;line-height:1.5;min-height:96px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 1px var(--petrol)}
.field+.field{margin-top:14px}
.field .caption{margin-top:4px}
.field .err{margin-top:4px;font-size:.8rem;color:var(--burgundy)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}

/* Skalen-Auswahl (1–5, Ja/Nein) */
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choice{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);cursor:pointer;font-weight:500;font-size:.9rem;transition:all var(--t);user-select:none}
.choice:hover{border-color:var(--petrol-50)}
.choice.on{background:var(--petrol);border-color:var(--petrol);color:#fff}
.choice.na{color:var(--muted);font-weight:400}
.choice.na.on{background:var(--primary-75);border-color:var(--primary-75)}
.scale-ends{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:4px}

/* Bereiche: Eingabe, Information, Ergebnis */
.panel{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden}
.panel>header{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px;border-bottom:1px solid var(--line-soft)}
.panel>.body{padding:20px}
.panel.in{border-color:var(--petrol-25)}
.panel.in>header{background:var(--petrol-10);border-bottom-color:var(--petrol-25)}
.panel.info{background:var(--surface);box-shadow:none}
.panel.out>header{background:var(--moss-10)}
.panel.ai>header{background:var(--spark-10)}
.tag{display:inline-block;padding:5px 8px;border-radius:var(--r-pill);font:600 .62rem/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.tag.in{background:var(--petrol);color:#fff}
.tag.info{border:1px solid var(--line);color:var(--muted)}
.tag.out{background:var(--moss);color:#fff}
.tag.ai{background:var(--spark);color:var(--primary)}
.tag.warn{background:var(--warning);color:#fff}
.tag.bad{background:var(--burgundy);color:#fff}
.tag.soft{background:var(--primary-10);color:var(--ink-75)}

/* Hero (dunkle Karte) */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:radial-gradient(120% 150% at 92% -30%,#36434f 0%,var(--primary) 55%);color:#fff;padding:36px 40px;box-shadow:var(--e2)}
.hero::after{content:"";position:absolute;right:-70px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(211,226,130,.13) 0%,rgba(211,226,130,0) 70%);pointer-events:none}
.hero h1{color:#fff;max-width:24ch}
.hero .lede{margin-top:14px;font-size:1.05rem;line-height:1.55;color:rgba(255,255,255,.74);max-width:60ch}
.hero .stats{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center}
.hero .stat{display:inline-flex;align-items:baseline;gap:9px;padding:0 24px;border-left:1px solid rgba(255,255,255,.16)}
.hero .stat:first-child{padding-left:0;border-left:none}
.hero .stat .n{font-family:var(--font-display);font-weight:700;font-size:1.8rem;line-height:1;color:var(--spark)}
.hero .stat .l{font-size:.9rem;color:rgba(255,255,255,.72)}

/* Kennzahl-Kacheln */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat-tile{padding:14px 16px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--e1)}
.stat-tile .l{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stat-tile .n{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1.1;color:var(--petrol);margin-top:4px}
.stat-tile .d{font-size:.8rem;color:var(--ink-75);margin-top:2px}

/* Schrittleiste */
.steps{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line-soft);background:var(--white);padding:0 28px}
.step{padding:12px 14px;font-size:.82rem;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;cursor:default}
.step.active{color:var(--petrol);border-bottom-color:var(--petrol);font-weight:600}
.step.done{color:var(--ink);cursor:pointer}
.prog{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--ink-75)}
.prog i{display:block;width:160px;height:4px;overflow:hidden;border-radius:var(--r-pill);background:var(--line-soft)}
.prog b{display:block;height:100%;background:var(--petrol);transition:width .2s}
.bar{height:8px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden}
.bar b{display:block;height:100%;background:var(--petrol)}
.bar.ok b{background:var(--moss)} .bar.warn b{background:var(--warning)} .bar.bad b{background:var(--burgundy)}

/* Aktionsleiste unten */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--white);border-top:1px solid var(--line-soft);box-shadow:0 -2px 8px rgba(43,52,64,.06)}
.actionbar .inner{display:flex;align-items:center;gap:8px;max-width:var(--max);margin:0 auto;padding:12px 28px}

/* Tabellen */
table{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
th{padding:9px 14px;background:var(--surface);border-bottom:1px solid var(--line-soft);text-align:left;font:600 .66rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
tr.sub td{background:var(--surface);font-weight:600}
.list{display:grid;gap:6px;margin:0;padding-left:20px;font-size:.9rem}
.list.plain{list-style:none;padding:0}

/* Karten-Raster */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--e1);text-decoration:none;color:inherit;transition:transform var(--t),box-shadow var(--t)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--petrol-25)}

/* KI-Vorschläge */
.suggest{display:grid;gap:8px;margin-top:10px}
.sug{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--spark-10);border:1px solid var(--petrol-25);border-radius:var(--r);font-size:.9rem}
.sug .t{flex:1}
.sug .why{display:block;font-size:.8rem;color:var(--ink-75);margin-top:2px}
.sug.taken{opacity:.55}

/* Meldungen, Dialoge */
.toasts{position:fixed;right:24px;bottom:84px;z-index:60;display:grid;gap:8px;max-width:380px}
.toast{padding:10px 14px;background:var(--white);border-left:4px solid var(--petrol);border-radius:var(--r);box-shadow:var(--e2);font-size:.875rem}
.toast.err{border-left-color:var(--burgundy);background:var(--burgundy-10)}
.toast.ok{border-left-color:var(--moss)}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(43,52,64,.5)}
.box{width:min(1180px,100%);max-height:90vh;overflow:auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e3)}
.box>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--white);border-bottom:1px solid var(--line-soft)}
.box>.body{padding:20px}
.box.busy{width:auto;display:flex;align-items:center;gap:14px;padding:20px 24px;background:var(--white)}
.spinner{width:18px;height:18px;border:2px solid var(--petrol-25);border-top-color:var(--petrol);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.alert{padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--white);font-size:.9rem}
.alert.info{background:var(--petrol-10);border-color:var(--petrol-25)}
.alert.ok{background:var(--moss-10);border-color:var(--moss)}
.alert.warn{background:var(--warning-10);border-color:var(--warning)}
.alert.bad{background:var(--burgundy-10);border-color:var(--burgundy)}

/* Fußzeile */
.foot{margin-top:40px;padding:20px 0;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.foot a{color:var(--muted)}

/* Session-Code, QR */
.code{font:600 3.2rem/1 var(--mono);letter-spacing:.14em;color:var(--petrol)}
canvas.qr,img.qr{width:172px;height:172px;padding:6px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r)}

@media (max-width:980px){
  .grid2,.grid3{grid-template-columns:1fr}
  main{padding:20px 16px 112px}
  .top{padding:8px 16px}
  .hero{padding:26px 22px}
  .top .claim{display:none}
  .actionbar .inner{padding:10px 16px}
  .prog i{width:90px}
}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;font-size:11pt}
  .top,.actionbar,.toasts,.noprint,.steps{display:none!important}
  main{padding:0;max-width:none}
  .panel,.card,.stat-tile{box-shadow:none;break-inside:avoid}
  a{color:inherit;text-decoration:none}
}