@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-weight:100 900;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-weight:100 900;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/fonts/plexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/fonts/plexmono-500-latin.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --ink:#070b0c; --charcoal:#0e1415; --charcoal-2:#151d1e; --charcoal-3:#1c2627;
  --paper:#edf3f3; --muted:rgba(237,243,243,.66); --faint:rgba(237,243,243,.45); --line:rgba(237,243,243,.12);
  --accent:#24f5fd; --accent-dim:rgba(36,245,253,.12);
  --good:#5fe0a0; --mid:#ffc857; --low:#ff6b6b;
  --line-strong:rgba(237,243,243,.3); --accent-hover:#6cfaff; --raise:rgba(255,255,255,.04); --shadow:0 1px 0 rgba(0,0,0,.4);
  --display:'Bricolage Grotesque',Arial,sans-serif; --body:'Archivo',Helvetica,Arial,sans-serif; --mono:'IBM Plex Mono',Menlo,monospace;
}
/* Light theme: the same names with other values (chosen with the sun/moon button, kept in the browser). The turquoise
   of the logo is too pale for text on white, so links and buttons use its dark tone there. */
:root[data-theme="light"]{
  color-scheme:light;
  --ink:#f2f5f5; --charcoal:#ffffff; --charcoal-2:#f0f4f4; --charcoal-3:#e2e9e9;
  --paper:#0c1415; --muted:rgba(12,20,21,.72); --faint:rgba(12,20,21,.54); --line:rgba(12,20,21,.13);
  --accent:#006b73; --accent-dim:rgba(0,107,115,.09);
  --good:#12754a; --mid:#8f5d00; --low:#c2362b;
  --line-strong:rgba(12,20,21,.32); --accent-hover:#00565c; --raise:rgba(12,20,21,.03); --shadow:0 1px 2px rgba(12,20,21,.08);
}
/* the top bar keeps the dark brand colours in both themes (the logo is drawn in light tones) */
:root[data-theme="light"] .topbar{
  --ink:#070b0c; --paper:#edf3f3; --muted:rgba(237,243,243,.66); --faint:rgba(237,243,243,.45); --line:rgba(237,243,243,.12); --accent:#24f5fd;
  background:#070b0c; color:var(--paper);
}
*{box-sizing:border-box}
[hidden]{display:none !important}  /* a layout rule (display:grid/flex) must never undo the hidden attribute */
body{margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:15px; line-height:1.55}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
h1,h2,h3{font-family:var(--display); line-height:1.1; margin:0; text-wrap:balance}
h1{font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.01em}
h2{font-size:22px; font-weight:700}
h3{font-size:17px; font-weight:600}
p{margin:0}
.mono,.eyebrow,label,th{font-family:var(--mono)}
.eyebrow{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.muted{color:var(--muted)} .faint{color:var(--faint)}

.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(16px,4vw,40px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:14px; color:var(--paper); text-decoration:none}
.brand svg{height:22px; width:auto}
.brand span{font-family:var(--mono); font-size:13px; letter-spacing:.16em; padding-left:14px; border-left:1px solid rgba(237,243,243,.25)}
.topbar nav{display:flex; align-items:center; gap:18px; font-family:var(--mono); font-size:13px}
.topbar nav a{color:var(--muted); text-decoration:none}
.topbar nav a:hover{color:var(--accent)}
main{padding:32px clamp(16px,4vw,40px) 80px; max-width:1180px; margin:0 auto; display:grid; gap:32px}
main > *,.grid2 > *{min-width:0}  /* wide tables scroll inside their box instead of widening the page */

.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.03em; line-height:1.2; padding:10px 16px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--ink); text-decoration:none; cursor:pointer; box-shadow:var(--shadow); transition:background .12s, border-color .12s, color .12s}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--charcoal-2); color:var(--paper); border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--accent-dim); border-color:var(--accent); color:var(--accent)}
.btn.danger{background:transparent; color:var(--low); border-color:rgba(255,107,107,.4)}
.linkbtn{background:none; border:0; color:var(--muted); font-family:var(--mono); font-size:13px; cursor:pointer; padding:0}
.linkbtn:hover{color:var(--accent)}

.panel{background:var(--charcoal); border:1px solid var(--line); border-radius:2px; padding:22px}
.head{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:2px}
table{width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums}
th{font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:left; padding:12px 14px; background:var(--charcoal-2); border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tr:last-child td{border-bottom:0}
td a.rowlink{color:var(--paper); text-decoration:none; font-weight:600}
td a.rowlink:hover{color:var(--accent)}

.score{font-family:var(--display); font-weight:800; font-size:22px}
.score.good{color:var(--good)} .score.mid{color:var(--mid)} .score.low{color:var(--low)}
.status{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:2px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.status.done{color:var(--good); border-color:rgba(95,224,160,.35)}
.status.running,.status.queued{color:var(--accent); border-color:rgba(36,245,253,.35)}
.status.failed{color:var(--low); border-color:rgba(255,107,107,.4)}

.progress{height:8px; background:var(--charcoal-3); border-radius:2px; overflow:hidden}
.progress div{height:100%; background:var(--accent); transition:width .6s ease}

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px}
.areas{display:grid; gap:12px}
.area{display:grid; grid-template-columns:150px 1fr 40px; gap:14px; align-items:center; font-size:14px}
.area .bar{height:10px; background:var(--charcoal-3); border-radius:1px; overflow:hidden}
.area .bar div{height:100%}
.bar .good{background:var(--good)} .bar .mid{background:var(--mid)} .bar .low{background:var(--low)}
.area .num{font-family:var(--mono); text-align:right}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px}
.kv dt{font-family:var(--mono); font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; padding-top:2px}
.kv dd{margin:0}
.notes{margin:0; padding-left:18px; color:var(--muted); font-size:14px; display:grid; gap:4px}
.actions{display:flex; flex-wrap:wrap; gap:10px}
.delta{font-family:var(--mono); font-size:13px}
.delta.up{color:var(--good)} .delta.down{color:var(--low)}

form.audit{display:grid; gap:22px}
.field{display:grid; gap:6px; align-content:start}
.field label{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.field small{color:var(--faint); font-size:13px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],input[type=number],input[type=password],input[type=date],select,textarea{width:100%; background:var(--charcoal-2); color:var(--paper); border:1px solid var(--line); border-radius:2px; padding:11px 12px; font:inherit}
textarea{min-height:96px; resize:vertical}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.profiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.profiles label{display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:2px; cursor:pointer; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:14px; color:var(--paper)}
.profiles input{position:absolute; opacity:0}
.profiles label:has(input:checked){border-color:var(--accent); background:var(--accent-dim)}
.profiles b{font-family:var(--display); font-size:16px}
.error{color:var(--low); font-size:14px}
.empty{padding:40px; text-align:center; color:var(--muted)}

.login{min-height:100vh; display:grid; place-items:center; padding:16px}
.login .panel{width:min(400px,100%); display:grid; gap:18px}
.login svg{height:26px; width:auto}

.level{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:2px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.level.hoch{color:var(--low); border-color:rgba(255,107,107,.45)}
.level.mittel{color:var(--mid); border-color:rgba(255,200,87,.4)}
.alertrow{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); color:inherit; text-decoration:none}
.alertrow:hover b{color:var(--accent)}
.alert{border-top:1px solid var(--line); padding:14px 0 4px; display:grid; gap:10px}
.alert:first-of-type{margin-top:8px}
.alert-head{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.alert-head .mono{margin-left:auto}
textarea.reply{min-height:96px; font-size:14px}
.state{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:2px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; align-self:start; margin-top:2px}
.state.erledigt{color:var(--good); border-color:rgba(95,224,160,.35)}
.state.verbessert{color:var(--accent); border-color:rgba(36,245,253,.35)}
.state.offen{color:var(--mid); border-color:rgba(255,200,87,.35)}
.measure{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14px}
.spark polyline{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
form.inline{display:flex; gap:10px; align-items:center}
form.inline select{width:auto}
.okmsg{color:var(--good); font-family:var(--mono); font-size:13px}
.checkline{display:flex; gap:10px; align-items:center; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:14px; color:var(--paper)}
details.panel summary{list-style:none}
.autofill{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px}
.field.unsure input,.field.unsure textarea,.field.unsure select{border-color:var(--mid); box-shadow:0 0 0 1px var(--mid)}
.field.unsure label::after{content:" · bitte prüfen"; color:var(--mid); text-transform:none; letter-spacing:0}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn.small{padding:7px 12px; font-size:12px}
.kit{display:grid; gap:10px}
.kit-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.kit .eyebrow{margin-top:8px}
.copybox{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start}
.copybox textarea{min-height:0; font-size:14px; line-height:1.5}
.idea{border-top:1px solid var(--line); padding-top:12px; display:grid; gap:6px}
table.dirs td{padding:6px 8px 6px 0; font-size:14px}
details.kit > summary{cursor:pointer}
.qsection{display:grid; gap:18px; margin-bottom:16px}
.qsection h2{margin:0}
.qlabel{font-family:var(--body) !important; font-size:15px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--paper) !important; font-weight:600}
.qchoices{display:grid; gap:8px; margin-top:4px}
.qchoices label{text-transform:none; letter-spacing:0; font-family:var(--body); font-size:15px; color:var(--paper); cursor:pointer}
.qsubmit{flex-wrap:nowrap !important; position:sticky; bottom:0; padding:14px 0; background:linear-gradient(transparent, var(--ink) 30%)}
body.public main{max-width:820px}
.qsubmit .btn{flex:1 1 0; justify-content:center; white-space:nowrap}
ol.prompts{margin:0; padding-left:20px; display:grid; gap:4px; color:var(--muted); font-size:14px}
@media (max-width:640px){ .area{grid-template-columns:110px 1fr 34px} .topbar{flex-wrap:wrap} .topbar nav{flex-wrap:wrap; gap:8px 14px} .measure{grid-template-columns:1fr} .copybox{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .progress div{transition:none} }

.gridmap{display:grid; gap:4px; max-width:360px; margin-top:8px}
.gridmap .cell{aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font-family:var(--mono); font-size:12px; font-weight:600}
.gridmap .g1{background:#1f9d62; color:#fff} .gridmap .g2{background:#e3b341; color:#1b1b1b} .gridmap .g3{background:#e0703a; color:#fff} .gridmap .g0{background:#6b2a2a; color:#fff}
.gridmap .center{outline:2px solid currentColor; outline-offset:2px}

.portal-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.portal-kpis .panel{display:grid; gap:6px}
.portal-value{font-family:var(--display); font-size:34px; font-weight:800; line-height:1.1}

.checklist{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px}
.checklist li{display:grid; grid-template-columns:22px 190px 1fr; gap:10px; align-items:start; padding:8px 0; border-top:1px solid var(--line); font-size:14px}
.checklist li::before{content:"✓"; color:var(--good); font-weight:700}
.checklist li.bad::before{content:"✗"; color:var(--low)}
.checklist li span{color:var(--muted)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
@media (max-width:640px){ .checklist li{grid-template-columns:22px 1fr} .checklist li span{grid-column:2} }

.qrbox{background:#fff; border-radius:4px; padding:10px; width:max-content}
.qrbox svg{display:block; width:200px; height:200px}

.brand .version{font-family:var(--mono); font-size:10px; color:var(--faint); margin-left:6px; letter-spacing:.04em}

/* Free check: figures at Google */
.gfacts{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
.gfacts > div{border:1px solid var(--line); border-radius:4px; padding:10px 12px; display:grid; gap:6px}
.gfacts span{font-size:12px; color:var(--muted)}
.gfacts b{font-family:var(--display); font-size:22px}
.checkline.consent{align-items:flex-start; line-height:1.5}
.checkline.consent input{margin-top:4px; flex:none}

/* Umsetzung: measures with prompts */
.todo{margin-bottom:8px; padding:14px 18px}
.todo summary{cursor:pointer; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.todo summary .status{margin-left:auto; text-decoration:none}
.todo .copybox{margin-top:10px}
.todo .copybox textarea{font-family:var(--mono); font-size:12.5px}

/* Einbau: alt text suggestions */
.altrow{display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start; padding:12px 0; border-top:1px solid var(--line)}
.altrow img{width:104px; height:78px; object-fit:cover; border-radius:2px; background:var(--charcoal-2)}
.altrow input[type=text]{margin-top:6px}

/* New audit: questions and notes to confirm before the start */
.precheck{margin:22px 0 6px; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; display:grid; gap:10px}
.precheck h2{margin:0; font-size:19px}
.precheck p{margin:0}
.precheck ol.prompts{color:var(--paper)}
.answer-check .answer-text{white-space:pre-wrap; background:var(--charcoal-2); border:1px solid var(--line); padding:12px 14px; font-size:14px; line-height:1.5; max-height:460px; overflow:auto}
.answer-check .marks{display:grid; gap:8px; margin-top:12px}
.answer-check mark{background:#ffe066; color:#111; padding:0 2px}
.answer-check .marks > div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; font-size:14px}
.yesno{display:inline-flex; gap:14px; white-space:nowrap}
.yesno label{display:inline-flex; gap:6px; align-items:center; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:14px; color:var(--paper)}
.checknotes{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px}
.checknotes li{padding:8px 12px; border-radius:8px; background:var(--raise)}
.checknotes li.warnung{background:rgba(255,186,73,.12); border:1px solid rgba(255,186,73,.45)}
.checknotes li.fehler{background:rgba(255,92,92,.14); border:1px solid rgba(255,92,92,.55)}
/* Audit page: automatic report control */
.control{display:grid; gap:10px; border-left:3px solid var(--good)}
.control.warnung{border-left-color:var(--mid)}
.control.fehler{border-left-color:var(--low)}
.control h2{margin:0; font-size:19px}
.control p{margin:0}
/* New audit: what is taken over from the last audit and what is measured again */
table.plan{width:100%; border-collapse:collapse; font-size:14px}
table.plan td{padding:7px 10px 7px 0; border-bottom:1px solid var(--line); vertical-align:top}
table.plan tr.none td{color:var(--faint)}

/* Navigation: four entries, the active one marked; tabs inside a section */
.topbar nav a.on{color:var(--paper); border-bottom:2px solid var(--accent); padding-bottom:3px}
.tabs{display:flex; gap:22px; flex-wrap:wrap; padding:10px clamp(16px,4vw,40px); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12.5px}
.tabs a{color:var(--muted); text-decoration:none}
.tabs a:hover{color:var(--accent)}
.tabs a.on{color:var(--accent)}
/* The five steps with a customer */
.steps{display:grid; grid-template-columns:auto repeat(5, minmax(0, 1fr)); gap:8px; align-items:stretch; margin-bottom:6px}
.steps a{text-decoration:none; color:var(--muted)}
.steps-home{display:flex; align-items:center; font-family:var(--mono); font-size:12.5px; padding:0 6px 0 0; white-space:nowrap}
.steps-home:hover{color:var(--accent)}
.step{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:2px; border-top:2px solid var(--line); min-width:0}
.step:hover{border-color:var(--accent)}
.step .nr{font-family:var(--mono); font-size:12px; color:var(--faint)}
.step .what{display:grid; gap:2px; min-width:0}
.step b{color:var(--paper); font-size:13.5px; font-weight:600}
.step small{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.step.erledigt{border-top-color:var(--good)}
.step.aktiv{border-top-color:var(--mid)}
.step.gesperrt{opacity:.55}
.step.here{background:var(--charcoal); border-color:rgba(36,245,253,.45)}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} .steps-home{grid-column:1 / -1} }
.nextstep{display:grid; gap:8px; border-left:3px solid var(--accent)}
.nextrow{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:17px}
.stepcard{display:grid; gap:10px; border-left:3px solid var(--line)}
.stepcard.erledigt{border-left-color:var(--good)}
.stepcard.aktiv{border-left-color:var(--mid)}
.stepcard.gesperrt{opacity:.6}
.stephead{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start}
.stephead .nr{font-family:var(--display); font-size:26px; font-weight:800; color:var(--faint); line-height:1}
.stephead h2{margin:0; font-size:19px}
.stephead p{margin:2px 0 0; font-size:13.5px}
.stepstate{margin:0; font-size:15px}
.steplist{margin:0; padding:0; list-style:none; display:grid; gap:7px; font-size:14px}
/* where each line leads to a page: rows to click, with an arrow */
.steplist.links{gap:6px}
.steplist.links li{padding:0; border:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; color:var(--muted)}
.steplist.links li > a:first-child{font-weight:600}
/* rows with a label in front or a state behind (warnings, monthly reports): one line each, wrapped text stays in its column */
.steplist.rows{gap:0}
.steplist.rows li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line); line-height:1.4}
.steplist.rows li:first-child{border-top:0; padding-top:2px}
.steplist.rows .level{min-width:66px; text-align:center}
.steplist.rows.ends li{grid-template-columns:1fr auto; align-items:center}
.steplist.rows a{text-decoration:none}
.steplist.rows a:hover{text-decoration:underline}
/* a panel whose parts follow one another with air between them */
.stack{display:grid; gap:16px; align-content:start}
.stack > .btn,.stack > .actions{justify-self:start}
.dots5{display:inline-flex; gap:5px}
.dots5 i{width:10px; height:10px; border-radius:50%; background:var(--line-strong); display:block}
.dots5 i.erledigt{background:var(--good)}
.dots5 i.aktiv{background:var(--mid)}
.toc{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13.5px; padding:10px 0 2px}
.toc a{color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--line)}
.toc a:hover{color:var(--accent)}
section[id]{scroll-margin-top:16px}

/* ---- icons: drawn by the stylesheet, so a document link looks like one on every page -------------------------------
   Any link to a PDF gets the document icon by itself; other elements name theirs with data-icon="…". */
[data-icon]::before,a[href$=".pdf"]::before,a[href*=".pdf?"]::before,a[href$=".md"]::before{
  content:""; display:inline-block; flex:none; width:1.05em; height:1.05em; vertical-align:-.16em; margin-right:.4em;
  background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
.btn[data-icon]::before,.btn[href$=".pdf"]::before,.btn[href*=".pdf?"]::before{margin-right:0}
a[href$=".pdf"],a[href*=".pdf?"],a[href$=".md"],[data-icon="pdf"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E")}
[data-icon="plus"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
[data-icon="arrow"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
[data-icon="open"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E")}
[data-icon="refresh"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E")}
[data-icon="play"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E")}
[data-icon="alert"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3zM12 10v5M12 18h.01'/%3E%3C/svg%3E")}
[data-icon="check"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
[data-icon="list"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E")}
[data-icon="chart"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16M8 16l4-5 3 3 5-7'/%3E%3C/svg%3E")}
[data-icon="sun"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E")}
[data-icon="moon"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E")}
/* links that lead on to another page of Scope: an arrow behind the text */
.steplist.links li > a:first-child::after{content:"→"; display:inline-block; margin-left:.35em; text-decoration:none; transition:transform .12s}
.steplist.links li > a:first-child:hover::after{transform:translateX(3px)}
.steplist.links li > a[href$=".pdf"]:first-child::after{content:none}
/* a document in a list: a small card instead of a bare link */
.steplist a[href$=".pdf"],.doclink{display:inline-flex; align-items:center; padding:3px 9px 3px 7px; border:1px solid var(--line-strong); border-radius:6px; background:var(--charcoal-2); text-decoration:none; font-weight:600}
.steplist a[href$=".pdf"]::before,.doclink::before{margin-right:.45em}
.steplist a[href$=".pdf"]:hover,.doclink:hover{border-color:var(--accent); background:var(--accent-dim)}
/* theme switch in the top bar */
.themeswitch{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted); cursor:pointer}
.themeswitch:hover{color:var(--accent); border-color:var(--accent)}
.themeswitch::before{margin:0 !important; width:16px !important; height:16px !important}
:root:not([data-theme="light"]) .themeswitch{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8'/%3E%3C/svg%3E")}
:root[data-theme="light"] .themeswitch{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E")}

/* ---- new audit in five steps (static/wizard.js) ------------------------------------------------------------------ */
.wizard fieldset.wizstep{border:0; margin:0; padding:0; min-width:0; display:grid; gap:22px}
.wizard fieldset.wizstep + fieldset.wizstep{margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
.wizard.stepped fieldset.wizstep + fieldset.wizstep{margin-top:0; padding-top:0; border-top:0}
.wizard legend{float:left; width:100%; padding:0; margin-bottom:2px; font-family:var(--display); font-size:22px; font-weight:700}
.wizard legend + *{clear:left}
.wizprogress{height:4px; border-radius:4px; background:var(--charcoal-3); overflow:hidden; margin-bottom:14px}
.wizprogress i{display:block; height:100%; width:20%; background:var(--accent); transition:width .25s}
.wizbar{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.wizbar button{display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-family:var(--mono); font-size:12.5px; cursor:pointer}
.wizbar button span{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--charcoal-3); color:var(--paper); font-size:11.5px}
.wizbar button.on{border-color:var(--accent); color:var(--paper); background:var(--accent-dim)}
.wizbar button.on span{background:var(--accent); color:var(--ink)}
.wizbar button.done span{background:var(--good); color:var(--ink)}
.wizbar button:hover{border-color:var(--accent)}
.wiznav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:30px; padding-top:18px; border-top:1px solid var(--line)}
.wizard details.more{border:1px solid var(--line); border-radius:8px; padding:10px 14px}
.wizard details.more summary{cursor:pointer; font-family:var(--mono); font-size:13px; color:var(--muted)}
/* services as cards in their order; the first three decide the AI questions */
.svc-list{list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:svc}
.svc-list li{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--charcoal-2); counter-increment:svc}
.svc-list li.key{border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:var(--accent-dim)}
.svc-list li.dragging{opacity:.5}
.svc-list li input[type=text]{border:0; background:transparent; padding:6px 2px; font-size:15px}
.svc-list .grip{cursor:grab; color:var(--faint); font-size:13px; letter-spacing:-2px; user-select:none}
.svc-list .grip::after{content:counter(svc); margin-left:8px; letter-spacing:0; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.svc-list .svc-tag{font-size:11px}
.svc-list .svc-tools{display:inline-flex; gap:10px}
.svc-list .svc-tools button:disabled{opacity:.3; cursor:default}
.svc-add{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:8px}
/* proposed competitors */
.rivallist{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px}
.rival{display:grid; gap:8px; align-content:start; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--charcoal-2)}
.rival.wettbewerber{border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.rival.fremd{opacity:.7}
.rival-top{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.rival-top .state{margin-left:auto}
.rival p{font-size:13px; line-height:1.4}
.rival .btn{justify-self:start}