/* datenschutz-agentur.ch – Erscheinungsbild
   Eine Schrift (Atkinson Hyperlegible, für Lesbarkeit entworfen), Kobaltblau als Stempelfarbe,
   Zustände als Registerreiter am linken Rand. */
@font-face{font-family:"Atkinson";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
:root{
  --paper:#f5f6f9;--surface:#fff;--ink:#141a2e;--muted:#4a5068;--rule:#d5dae6;--rule-strong:#9aa3ba;
  --cobalt:#1d3fbf;--cobalt-dark:#142c8a;--cobalt-wash:#e8ecfb;
  --ok:#1f6b45;--ok-bg:#e3f1e8;--warn:#8a5300;--warn-bg:#fbefd9;--risk:#b42318;--risk-bg:#fbe6e3;--soon:#7a8197;
  --r:6px;
  font-size:106.25%;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Atkinson",system-ui,sans-serif;line-height:1.55;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--cobalt);text-underline-offset:.18em}
a:hover{color:var(--cobalt-dark)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:0 0 1em;max-width:68ch}
small,.fine,.hint,.sub{font-size:.875rem;color:var(--muted)}
code{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:.9em;background:var(--cobalt-wash);padding:.1em .35em;border-radius:3px;word-break:break-all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:0}
[hidden]{display:none!important}

.top{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:.9rem clamp(1rem,3vw,2.5rem);background:var(--surface);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--ink);text-decoration:none;font-size:1.05rem;margin-right:auto}
.mark{width:18px;height:22px;background:var(--cobalt);border-radius:2px 7px 2px 2px;position:relative}
.mark::after{content:"";position:absolute;left:4px;right:4px;top:7px;height:2px;background:#fff;box-shadow:0 5px 0 #fff}
.topnav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.topnav a{text-decoration:none;color:var(--ink)}
.topnav a.btn{color:#fff}
.topnav a[aria-current]{color:var(--cobalt);text-decoration:underline}
.langs{display:flex;gap:.15rem}
.langs a{font-size:.8rem;color:var(--muted);text-decoration:none;padding:.2rem .35rem;border-radius:3px}
.langs a[aria-current]{color:var(--ink);background:var(--cobalt-wash);font-weight:700}
.inline{display:inline}

.btn,button{font:inherit;cursor:pointer}
.btn,button.small{display:inline-block;background:var(--cobalt);color:#fff;border:1px solid var(--cobalt);border-radius:var(--r);padding:.6rem 1.15rem;text-decoration:none;font-weight:700;line-height:1.2}
.btn:hover,button.small:hover{background:var(--cobalt-dark);color:#fff}
.btn.ghost,button.ghost{background:transparent;color:var(--cobalt);border:1px solid var(--rule-strong);border-radius:var(--r);padding:.55rem 1rem;font-weight:700}
.btn.ghost:hover,button.ghost:hover{border-color:var(--cobalt);background:var(--cobalt-wash);color:var(--cobalt-dark)}
.btn.small,button.small{padding:.35rem .75rem;font-size:.9rem}
.btn.danger,button.danger{background:var(--risk);border-color:var(--risk);color:#fff}
.linkbtn{background:none;border:0;padding:0;color:var(--cobalt);text-decoration:underline;text-underline-offset:.18em}
.linkbtn.danger,button.linkbtn.danger{background:none;border:0;padding:0;color:var(--risk)} /* 1.9.1: sonst roter Text auf rotem Grund (button.danger) */
.copybtn{margin-left:.5rem;font-size:.85rem}

.page{width:100%;max-width:74rem;margin:0 auto;padding:clamp(1.5rem,4vw,3.5rem) clamp(1rem,3vw,2.5rem);flex:1}
.narrow{max-width:34rem}
.narrow-wide{max-width:60rem}
.lead{font-size:1.15rem;color:var(--muted)}
.alt{margin-top:1.25rem}
.empty{color:var(--muted);border:1px dashed var(--rule-strong);border-radius:var(--r);padding:1.25rem;max-width:56rem}

.hero{max-width:46rem;padding:1rem 0 2.5rem}
.hero h1{font-size:clamp(2.1rem,1.4rem + 3.2vw,3.6rem);letter-spacing:-.025em;line-height:1.05;margin-bottom:.45em}
.hero .lead{font-size:1.25rem;max-width:38rem}
.cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.75rem 0 1rem}
.register{margin:1.5rem 0 3rem}
.register h2,.steps h2{font-size:1.6rem}

.reg{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.reg-item{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--rule);border-left:0;border-radius:0 var(--r) var(--r) 0;padding:.85rem 1rem .85rem 1.4rem}
.reg-item::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:7px;background:var(--cobalt)}
.reg-item h3{margin:0;font-size:1.05rem}
.reg-item p{margin:.15rem 0 0;color:var(--muted);font-size:.93rem}
.reg-state{font-size:.85rem;white-space:nowrap;color:var(--muted)}
.reg-item.is-soon::before,.reg-item.st-muted::before{background:var(--soon);opacity:.45}
.reg-item.is-ready .reg-state{color:var(--cobalt);font-weight:700}
.reg-item.st-ok::before{background:var(--ok)}.reg-item.st-ok .reg-state{color:var(--ok)}
.reg-item.st-warn::before{background:#d08a12}.reg-item.st-warn .reg-state{color:var(--warn)}
.reg-item.st-risk::before{background:var(--risk)}.reg-item.st-risk .reg-state{color:var(--risk);font-weight:700}
.reg.compact .reg-item{padding:.6rem .9rem .6rem 1.25rem}
@media(min-width:52rem){.register .reg{grid-template-columns:1fr 1fr}}

.steps ol{list-style:none;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:.9rem}
.steps li::before{content:counter(s);display:block;font-weight:700;font-size:1.6rem;color:var(--cobalt);line-height:1;margin-bottom:.4rem}
.split{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin:3rem 0 1rem;border-top:1px solid var(--rule);padding-top:2rem}

.toggle{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden;margin:.5rem 0 1.5rem}
.toggle a{padding:.4rem .9rem;text-decoration:none;color:var(--ink)}
.toggle a[aria-current]{background:var(--ink);color:#fff}
.promo{background:var(--cobalt-wash);border-left:4px solid var(--cobalt);padding:.7rem 1rem;border-radius:0 var(--r) var(--r) 0}
.guarantee{background:var(--ok-bg);border-left:4px solid var(--ok);padding:.7rem 1rem;border-radius:0 var(--r) var(--r) 0;margin:1rem 0}
.foot .ver{color:var(--muted);font-size:.85em}
.pkgs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-bottom:2.5rem}
.pkg{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--cobalt);border-radius:var(--r);padding:1.25rem}
.pkg-for{color:var(--muted);font-size:.93rem}
.price{font-size:1.6rem;font-weight:700;margin:.4rem 0 .8rem}.price small{font-size:.9rem;font-weight:400}
.tbd{font-size:1rem;font-weight:400;color:var(--muted)}
.quota{padding-left:1.1rem;margin:0 0 .8rem}.mods{font-size:.88rem;color:var(--muted)}

.shell{display:grid;grid-template-columns:15.5rem minmax(0,1fr);flex:1;width:100%;max-width:84rem;margin:0 auto}
.side{border-right:1px solid var(--rule);padding:1.5rem 1rem;background:var(--surface)}
.side ul{list-style:none;padding:0;margin:0}
.side li a{display:block;padding:.45rem .7rem;border-radius:var(--r);color:var(--ink);text-decoration:none}
.side li a:hover{background:var(--paper)}
.side li a[aria-current]{background:var(--cobalt-wash);color:var(--cobalt-dark);font-weight:700;box-shadow:inset 4px 0 0 var(--cobalt)}
.orgbox{padding:0 .7rem 1rem;margin-bottom:1rem;border-bottom:1px solid var(--rule)}
.orgname{display:block;font-weight:700}.orgrole{font-size:.85rem;color:var(--muted)}
.switch{margin-top:.6rem;display:flex;gap:.4rem}.switch select{max-width:100%;flex:1}
.content{padding:clamp(1.25rem,3vw,2.5rem);min-width:0}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.25rem 1.4rem;margin:0 0 1.25rem;max-width:56rem}
.card>header{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.card>header h2{margin:0}
.card.demo{background:repeating-linear-gradient(-45deg,var(--surface) 0 18px,#f8f9fc 18px 36px)}
.demo-note{display:inline-block;background:var(--ink);color:#fff;padding:.25rem .65rem;border-radius:3px;font-size:.85rem}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.checklist li{padding-left:1.8rem;position:relative}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:1.1rem;height:1.1rem;border:2px solid var(--rule-strong);border-radius:3px}
.checklist li.done{color:var(--muted)}
.checklist li.done::before{background:var(--ok);border-color:var(--ok)}
.checklist li.done::after{content:"";position:absolute;left:.38rem;top:.38em;width:.3rem;height:.6rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1.25rem;margin:0 0 1rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.field select{max-width:100%}
.ways{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.ways>div{border:1px solid var(--rule);border-radius:var(--r);padding:1rem}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.75rem 0 0}
.hint-box{background:var(--cobalt-wash);border-radius:var(--r);padding:.8rem 1rem;max-width:56rem}
.plain{list-style:none;padding:0;max-width:56rem}.plain li{padding:.35rem 0;border-bottom:1px solid var(--rule)}
.filters a{margin-right:.6rem}.filters a[aria-current]{font-weight:700;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin-bottom:1.25rem;max-width:56rem}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.8rem 1rem}.stat span{display:block;font-size:.85rem;color:var(--muted)}.stat b{font-size:1.5rem}
.codes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:.5rem 2rem;font-size:1.1rem}
.qr{background:#fff;display:inline-block;padding:10px;border:1px solid var(--rule);margin:.75rem 0}
.qrline{display:block;margin:.75rem 0}.qr-lg{display:block;width:max-content;max-width:100%}.qr-lg svg{width:240px;height:240px;max-width:100%;display:block}
.secret{font-size:1.05rem;letter-spacing:.05em}
.howto{padding-left:1.25rem}.howto li{margin-bottom:1rem}
.addr{border-left:3px solid var(--cobalt);padding-left:1rem}

.badge{display:inline-block;font-size:.8rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;background:var(--paper);color:var(--muted);border:1px solid var(--rule);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.badge.risk{background:var(--risk-bg);color:var(--risk);border-color:transparent}
.flash{padding:.75rem 1rem;border-radius:var(--r);margin:0 0 1.25rem;max-width:56rem;border-left:4px solid}
.flash.ok{background:var(--ok-bg);border-color:var(--ok)}
.flash.warn{background:var(--warn-bg);border-color:#d08a12}
.flash.err{background:var(--risk-bg);border-color:var(--risk)}

.form{max-width:36rem}
.form.wide,.card .form{max-width:none}
fieldset{border:0;padding:0;margin:0 0 1.25rem}
legend{font-weight:700;margin-bottom:.5rem}
.field{margin:0 0 1rem}
.field label{display:block;font-weight:700;margin-bottom:.3rem}
.field.check label,.radio,.choice{font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),select,textarea{font:inherit;width:100%;max-width:100%;padding:.55rem .7rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:#fff;color:var(--ink)}
input[type=number]{max-width:9rem}
textarea.mono{font-family:ui-monospace,Consolas,monospace;font-size:.9rem}
input[readonly],textarea[readonly]{background:var(--paper)}
input[aria-invalid=true]{border-color:var(--risk);box-shadow:0 0 0 1px var(--risk)}
.err{color:var(--risk);font-size:.9rem;margin:.3rem 0 0}
.hint{margin:.3rem 0 0}
.row2{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem}
.row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem}
.row-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem 1rem;max-width:none}.row-form .field{margin:0;flex:1 1 14rem}
.kinds{display:grid;gap:.5rem}
.radio,.choice{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem .8rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);cursor:pointer}
.radio input,.choice input{margin-top:.3rem}
.radio small,.choice small{display:block;color:var(--muted)}
.choice .p{color:var(--muted);font-size:.9rem}
.planform fieldset .choice{margin-bottom:.45rem}
.planform .mods{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:.4rem 0 0 1.8rem}
.choice.small{padding:.45rem .65rem}
.radio:has(input:checked),.choice:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-wash)}
details summary{cursor:pointer;color:var(--cobalt);margin:.5rem 0}
.pkgedit{border:1px solid var(--rule);border-radius:var(--r);padding:1rem;margin-bottom:1rem;background:var(--surface)}
.row6{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:flex-end;margin-bottom:.75rem}.row6 label{font-size:.9rem}.row6 input{width:7rem}
.modgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.25rem .75rem}
.tiny{font-size:.9rem;font-weight:400}

.tablewrap{overflow-x:auto;max-width:56rem;margin-bottom:1.25rem}
.tbl{width:100%;border-collapse:collapse;background:var(--surface)}
.tbl th,.tbl td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl thead th{font-size:.85rem;color:var(--muted);font-weight:400;border-bottom:2px solid var(--ink)}
.tbl .n{text-align:right;white-space:nowrap}
.tbl .tot td{font-weight:700;border-bottom:0;border-top:2px solid var(--ink)}
.tbl input:not([type=checkbox]){min-width:6rem}
.summary .tbl{background:transparent}

.legal{max-width:44rem}.legal h2{margin-top:1.6em}.legal h1{margin-bottom:.3em}

.foot{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1.25rem clamp(1rem,3vw,2.5rem);border-top:1px solid var(--rule);font-size:.88rem;color:var(--muted);background:var(--surface)}
.foot a{color:var(--muted)}

@media(max-width:52rem){
  .shell{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--rule);padding:1rem}
  .side ul{display:flex;flex-wrap:wrap;gap:.25rem}
  .side li a[aria-current]{box-shadow:inset 0 -3px 0 var(--cobalt)}
  .row2{grid-template-columns:1fr}
  .reg-item{flex-direction:column;align-items:flex-start;gap:.25rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(forced-colors:active){.reg-item::before{background:CanvasText}.mark{background:CanvasText}}
@media print{.top,.side,.foot,.actions,form{display:none}}

/* Inaktivitäts-Warnung */
dialog#idle-dialog{border:1px solid var(--rule-strong);border-radius:var(--r);padding:1.5rem 1.75rem;max-width:28rem;width:calc(100% - 2rem);color:var(--ink);background:var(--surface);box-shadow:0 18px 50px rgba(20,26,46,.25)}
dialog#idle-dialog::backdrop{background:rgba(20,26,46,.45)}
dialog#idle-dialog h2{font-size:1.25rem}
#idle-left{font-variant-numeric:tabular-nums}
/* 1.4.0 SSO: lange Adressen und Werte umbrechen (Handy) */
.sso-urls li{margin:0 0 .6rem}.sso-urls code,.break,.sso .hint,.sso textarea{overflow-wrap:anywhere;word-break:break-word}
/* 1.6.0 Betriebsnachweis: lange Texte und Belege */
td.wrap{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
ul.files{margin:.4rem 0 0;padding-left:1.1rem}ul.files li{margin:.15rem 0;overflow-wrap:anywhere}
input[type=file]{font:inherit;max-width:100%}
textarea{resize:vertical}
@media (max-width:640px){.tbl.stack thead{display:none}.tbl.stack tr{display:grid;grid-template-columns:auto 1fr;gap:.3rem .6rem;align-items:start;padding:.7rem 0;border-bottom:1px solid var(--rule)}.tbl.stack td{display:block;padding:0;border:0}.tbl.stack td.full{grid-column:1/-1}.tbl.stack code{overflow-wrap:anywhere}}
.card form + h3{margin-top:1.6rem}
/* 1.7.0 Postfächer */
.muted{color:var(--muted)}
.mailgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:1rem;align-items:start}
.mailgrid>.card{min-width:0}
.mailmsg{border-top:1px solid var(--rule);padding:.75rem 0;min-width:0}
.mailmsg:first-of-type{border-top:0}
.mailout{background:#f3f6fd;padding:.75rem;border-radius:var(--r)}
.mailcur{box-shadow:inset 3px 0 0 var(--rule-strong);padding-left:.75rem}
pre.mailtext{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-family:inherit;font-size:.95rem;margin:.5rem 0;max-width:100%}
pre.mailtext.small{font-family:ui-monospace,Consolas,monospace;font-size:.8rem}
.kv dd.wrap,h1.wrap,p.wrap{overflow-wrap:anywhere}
/* 1.10.0: Fragebogen 2 */
[hidden]{display:none!important}
.inline-choices{display:flex;flex-wrap:wrap;gap:.4rem}
.inline-choices .choice{margin:0}
.qradio{border:0;padding:0;margin:0 0 1rem}
.qradio legend{font-weight:700;margin-bottom:.35rem}
.docform .sub{margin:.2rem 0 1rem 1.1rem;padding-left:.9rem;border-left:2px solid var(--rule)}
.docform .rowset{border-top:1px dashed var(--rule);padding-top:.75rem;margin-top:.75rem}
.docform .card-sub{border:1px solid var(--rule);border-radius:var(--r);padding:.75rem .9rem;margin:.75rem 0;background:var(--paper)}
.docform .svc-decide{margin-top:.6rem}
.issues ul{margin:.35rem 0 0 1.1rem;padding:0}
.issues li{margin:.15rem 0}
.sticky-save{position:sticky;bottom:0;background:var(--paper);padding:.6rem 0;margin:0;z-index:2}
@media (max-width:640px){.eu-states .choice{flex:1 1 45%}}
/* 1.13.0: Köderteil geschützter E-Mail-Adressen (nicht sichtbar, nicht kopiert) */
.em-x{display:none}
/* 1.13.0 Befunde und Mitigation */
.findings>li{border-left:4px solid var(--rule);padding:.5rem .75rem;margin:.5rem 0;background:var(--paper);border-radius:0 var(--r) var(--r) 0}
.findings>li.sev-3{border-left-color:var(--risk)}
.findings>li.sev-2{border-left-color:var(--warn)}
.findings summary{cursor:pointer;list-style-position:outside}
.findings details[open] summary{margin-bottom:.4rem}
.findings ul{margin:.25rem 0 .25rem 1.2rem}
.cookie-props .row-form{margin:.4rem 0}
.disclaimer{margin-top:1rem}