/* Praktisch Datenschutz – Designsystem. Keine externen Ressourcen. */
:root{
  --ink:#0f2038;          /* Wortmarke "DATENSCHUTZ" */
  --navy:#1b3558;
  --navy-deep:#0d1d33;
  --navy-700:#27476f;
  --teal:#1a8898;         /* Wortmarke "PRAKTISCH" */
  --teal-text:#12727f;    /* AA auf Weiss/Papier (5.6:1) */
  --teal-bright:#4cc3cf;  /* nur auf dunklem Grund */
  --paper:#f6f9fb;
  --paper-2:#eaf1f5;
  --white:#fff;
  --line:#d3dfe7;
  --line-dark:rgba(255,255,255,.16);
  --muted:#4a5c70;        /* 6.9:1 auf Weiss */
  --muted-dark:#b8c8d8;
  --focus:#b37f00;

  --font-text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif",Georgia,serif;

  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4rem;--s7:6rem;--s8:8rem; /* 8px-Raster */
  --gutter:clamp(1rem,4vw,2rem);
  --maxw:72rem;--readw:42rem;
  --r:6px;--r-lg:14px;
  --shadow:0 1px 2px rgba(15,32,56,.06),0 12px 32px -12px rgba(15,32,56,.18);
  --ease:cubic-bezier(.2,.7,.2,1);

  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-base:clamp(1rem,.96rem + .2vw,1.125rem);
  --t-lg:clamp(1.125rem,1.05rem + .4vw,1.375rem);
  --t-h3:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --t-h2:clamp(1.75rem,1.3rem + 2.2vw,2.875rem);
  --t-h1:clamp(2.125rem,1.4rem + 3.2vw,3.75rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-base)/1.65 var(--font-text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--teal-text);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
::selection{background:var(--teal);color:#fff}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--s2);color:var(--ink);text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:-.025em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.2}
h4{font-size:var(--t-lg)}
p{margin:0 0 var(--s2);text-wrap:pretty}
.lead{font-size:var(--t-lg);line-height:1.55;color:var(--muted);max-width:38em}
.skip{position:absolute;left:var(--s2);top:-4rem;background:var(--ink);color:#fff;padding:var(--s1) var(--s2);border-radius:var(--r);z-index:100}
.skip:focus{top:var(--s1)}
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(var(--s6),9vw,var(--s8))}
.section--tight{padding-block:clamp(var(--s4),5vw,var(--s6))}
.section--alt{background:var(--paper-2)}
.section--white{background:var(--white)}
.section__head{max-width:44rem;margin-bottom:var(--s5)}
.section__head p{color:var(--muted);font-size:var(--t-lg)}
/* Kicker: kleine Beschriftung mit Knoten – nur wo sie ein Thema benennt */
.kicker{display:inline-flex;align-items:center;gap:.75rem;font-size:var(--t-sm);font-weight:600;color:var(--teal-text);margin-bottom:var(--s2);letter-spacing:.01em}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(26,136,152,.18)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.5rem;border-radius:var(--r);border:2px solid transparent;font:600 var(--t-sm)/1.2 var(--font-text);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--teal-text);color:#fff}
.btn--ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--light{background:#fff;color:var(--navy-deep)}
.btn--light:hover{background:var(--teal-bright);color:var(--navy-deep)}
.btn--ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--navy-deep)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.link-arrow{font-weight:600;text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:2px;color:var(--ink)}
.link-arrow:hover{color:var(--teal-text)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,249,251,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:72px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.brand img{height:48px;width:auto}
.brand__word{display:flex;flex-direction:column;line-height:1;gap:4px}
.brand__word span{font:500 .7rem/1 var(--font-text);letter-spacing:.32em;color:var(--teal-text);text-transform:uppercase}
.brand__word b{font:800 1.1rem/1 var(--font-text);letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.nav{display:none}
.nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.nav__link{display:block;padding:.85rem 0;color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--t-sm);border-bottom:1px solid var(--line);position:relative}
.nav__link:hover{color:var(--teal-text)}
.nav__link[aria-current="page"]{color:var(--teal-text);font-weight:600}
.nav__cta{margin-top:var(--s2)}
.burger{width:48px;height:48px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);cursor:pointer;display:grid;place-items:center;padding:0}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),background .2s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.site-header.is-open .nav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s1) var(--gutter) var(--s3);box-shadow:var(--shadow)}
@media (min-width:60rem){
  .burger{display:none}
  .nav,.site-header.is-open .nav{display:flex;align-items:center;gap:var(--s4);position:static;background:none;border:0;padding:0;box-shadow:none}
  .nav__list{flex-direction:row;gap:var(--s3)}
  .nav__link{border:0;padding:.5rem 0}
  .nav__link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
  .nav__cta{margin:0}
  .nav .btn{min-height:44px;padding:.6rem 1.25rem}
}

/* Hero – Raster/Netz-Motiv + Emblem */
.hero{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 40%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 80% 40%,#000 0,transparent 75%);opacity:.8}
.hero__inner{position:relative;display:grid;gap:var(--s5);padding-block:clamp(var(--s5),8vw,var(--s7));align-items:center}
.hero__text h1{max-width:15em}
.hero__text .lead{margin-bottom:var(--s4)}
.hero__art{position:relative;justify-self:center;width:min(100%,34rem)}
.hero__art img{width:100%;height:auto;position:relative;filter:drop-shadow(0 24px 30px rgba(15,32,56,.16))}
.hero__net{position:absolute;inset:-8% -6%;width:112%;height:116%;max-width:none;color:var(--teal);overflow:visible}
.hero__facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);list-style:none;margin:var(--s4) 0 0;padding:0;font-size:var(--t-sm);color:var(--muted)}
.hero__facts li{display:flex;align-items:center;gap:.5rem}
.hero__facts svg{width:18px;height:18px;color:var(--teal-text);flex:none}
@media (min-width:60rem){.hero__inner{grid-template-columns:1.1fr .9fr;gap:var(--s6)}}
@media (prefers-reduced-motion:no-preference){
  .hero__net .pulse{animation:pulse 3.2s ease-in-out infinite}
  .hero__net .pulse:nth-of-type(2n){animation-delay:1.1s}
  .hero__net .pulse:nth-of-type(3n){animation-delay:2.1s}
  @keyframes pulse{50%{opacity:.25}}
}

/* Themenleiste */
.topics{background:var(--navy-deep);color:#fff}
.topics__label{margin:0;padding:var(--s2) 0 0;font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-dark)}
.topics__list{list-style:none;margin:0;padding:var(--s2) 0;display:flex;gap:var(--s1) var(--s4);flex-wrap:wrap;font-size:var(--t-sm);font-weight:500}
.topics__list li{display:flex;align-items:center;gap:.6rem;color:var(--muted-dark)}
.topics__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-bright)}
.topics__list b{color:#fff;font-weight:600}

/* Säulen / Karten */
.grid{display:grid;gap:var(--s3)}
@media (min-width:48rem){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}
.pillar{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s3) var(--s3);display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.pillar::before{content:"";position:absolute;left:var(--s3);right:var(--s3);top:-1px;height:3px;background:linear-gradient(90deg,var(--teal),var(--navy));border-radius:0 0 3px 3px}
.pillar:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-3px)}
.pillar__icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--navy);margin-bottom:var(--s3);border:1px solid var(--line)}
.pillar__icon svg{width:28px;height:28px}
.pillar h3{font-size:var(--t-lg)}
.pillar p{color:var(--muted);font-size:var(--t-sm)}
.pillar .link-arrow{margin-top:auto;align-self:flex-start}
.pillar ul{margin:0 0 var(--s3);padding:0;list-style:none;font-size:var(--t-sm);color:var(--ink)}
.pillar ul li{padding:.4rem 0 .4rem 1.5rem;border-top:1px solid var(--line);position:relative}
.pillar ul li::before{content:"";position:absolute;left:0;top:1rem;width:8px;height:2px;background:var(--teal)}

/* Ablauf – Verbindungslinie mit Knoten (Motiv aus dem Logo) */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;position:relative;display:grid;gap:var(--s4)}
.steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:repeating-linear-gradient(var(--teal) 0 6px,transparent 6px 12px)}
.step{counter-increment:step;position:relative;padding-left:calc(48px + var(--s3))}
.step::before{content:counter(step);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 1.125rem/1 var(--font-head);box-shadow:0 0 0 6px var(--paper)}
.section--white .step::before{box-shadow:0 0 0 6px var(--white)}
.section--alt .step::before{box-shadow:0 0 0 6px var(--paper-2)}
.step h3{font-size:var(--t-lg);margin-bottom:.35rem;padding-top:.6rem}
.step p{color:var(--muted);font-size:var(--t-sm);max-width:34em}
.step__meta{font-size:var(--t-xs);color:var(--teal-text);font-weight:600}
@media (min-width:60rem){
  .steps{grid-template-columns:repeat(4,1fr);gap:var(--s3)}
  .steps::before{left:24px;right:calc(25% - 24px);top:23px;bottom:auto;width:auto;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 12px)}
  .step{padding:calc(48px + var(--s3)) var(--s2) 0 0}
  .step h3{padding-top:0}
}

/* Feature-Liste */
.features{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.feature{display:grid;grid-template-columns:40px 1fr;gap:var(--s2) var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.feature svg{width:32px;height:32px;color:var(--teal-text);margin-top:.15rem}
.feature h3{font-size:var(--t-lg);margin-bottom:.25rem}
.feature p{margin:0;color:var(--muted);font-size:var(--t-sm);max-width:40em}
@media (min-width:48rem){.features{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.checklist{list-style:none;margin:0 0 var(--s3);padding:0}
.checklist li{position:relative;padding:.35rem 0 .35rem 2rem}
.checklist li::before{content:"";position:absolute;left:0;top:.7rem;width:16px;height:9px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg) scale(.9)}

/* Split-Layout */
.split{display:grid;gap:var(--s5);align-items:start}
@media (min-width:60rem){.split{grid-template-columns:5fr 7fr;gap:var(--s7)}.split--rev{grid-template-columns:7fr 5fr}.split__sticky{position:sticky;top:7rem}}

/* FAQ */
.faq{border-top:1px solid var(--line);max-width:48rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) 0;font:600 var(--t-lg)/1.3 var(--font-head);color:var(--ink);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--navy);background:
  linear-gradient(var(--navy),var(--navy)) center/12px 2px no-repeat,
  linear-gradient(var(--navy),var(--navy)) center/2px 12px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.faq summary:hover{color:var(--teal-text)}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--paper-2)}
.faq .faq__body{padding:0 var(--s6) var(--s3) 0;color:var(--muted);max-width:40em}
.faq details[open] .faq__body{animation:faqin .3s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}}

/* CTA-Band (dunkel) */
.cta-band{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 100% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 100% at 100% 50%,#000,transparent 70%)}
.cta-band__inner{display:grid;gap:var(--s4);padding-block:clamp(var(--s5),7vw,var(--s7));align-items:center}
.cta-band h2{color:#fff;max-width:18em}
.cta-band p{color:var(--muted-dark);font-size:var(--t-lg);max-width:34em}
@media (min-width:60rem){.cta-band__inner{grid-template-columns:1.4fr 1fr}.cta-band .btn-row{justify-content:flex-end}}
.section--dark{background:var(--navy-deep);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p,.section--dark .lead{color:var(--muted-dark)}
.section--dark .kicker{color:var(--teal-bright)}
.section--dark .kicker::before{background:var(--teal-bright);box-shadow:0 0 0 4px rgba(76,195,207,.2)}

/* Seitenkopf Unterseiten */
.page-head{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.page-head::after{content:"";position:absolute;right:0;top:0;bottom:0;width:min(50%,28rem);pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.page-head__inner{position:relative;z-index:1;padding-block:clamp(var(--s5),7vw,var(--s6))}
.page-head h1{font-size:clamp(2rem,1.4rem + 3vw,3.5rem);max-width:18em}
.page-head .lead{margin:0}
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 var(--s3);padding:0;font-size:var(--t-sm);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{color:var(--muted)}

/* Textseite (Impressum / Datenschutz) */
.prose{max-width:var(--readw);font-size:var(--t-base);line-height:1.75}
.prose h2{font-size:clamp(1.375rem,1.2rem + 1vw,1.875rem);margin:var(--s5) 0 var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;border:0;padding:0}
.prose h3{font-size:var(--t-lg);margin:var(--s4) 0 var(--s1)}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 var(--s2)}
.prose li{margin-bottom:.35rem;padding-left:.25rem}
.prose li::marker{color:var(--teal)}
.prose address{font-style:normal;margin:0 0 var(--s2);padding:var(--s2) var(--s3);border-left:3px solid var(--teal);background:var(--white)}
.prose a{word-break:break-word}
.prose-layout{display:grid;gap:var(--s4)}
.toc{font-size:var(--t-sm);border:1px solid var(--line);background:var(--white);border-radius:var(--r-lg);padding:var(--s3)}
.toc strong{display:block;margin-bottom:var(--s1);font-family:var(--font-head);font-size:var(--t-lg)}
.toc ol{margin:0;padding-left:1.25rem}.toc li{padding:.2rem 0}
@media (min-width:60rem){.prose-layout{grid-template-columns:16rem 1fr;gap:var(--s7)}.toc{position:sticky;top:7rem;align-self:start}}

/* Kontaktkarte */
.contact-card{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:var(--s4) var(--s3);position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:1px solid var(--line-dark);box-shadow:0 0 0 28px rgba(255,255,255,.03),0 0 0 56px rgba(255,255,255,.02)}
.contact-card h3{color:#fff}
.contact-card p{color:var(--muted-dark)}
.contact-list{list-style:none;margin:var(--s3) 0;padding:0;display:grid;gap:var(--s2);position:relative;z-index:1}
.contact-list li{display:grid;grid-template-columns:24px 1fr;gap:var(--s2);align-items:start}
.contact-list svg{width:24px;height:24px;color:var(--teal-bright);margin-top:2px}
.contact-list small{display:block;color:var(--muted-dark);font-size:var(--t-xs)}
.contact-list a{color:#fff;text-underline-offset:.25em}
.contact-list a:hover{color:var(--teal-bright)}
.contact-card .btn{position:relative;z-index:1}
/* Formularfelder */
.form{display:grid;gap:var(--s3)}
.field label{display:block;font-weight:600;font-size:var(--t-sm);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:.7rem .9rem;border:1.5px solid #8aa0b3;border-radius:var(--r);background:#fff;font:inherit;color:var(--ink)}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--navy)}
.field .hint{font-size:var(--t-xs);color:var(--muted);margin-top:.35rem}

/* Zitat / Hinweis / Profil */
.note{border-left:3px solid var(--teal);background:var(--white);padding:var(--s2) var(--s3);border-radius:0 var(--r) var(--r) 0;font-size:var(--t-sm);color:var(--muted)}
.profile{display:grid;gap:var(--s3);grid-template-columns:auto 1fr;align-items:center}
.profile__fig{width:88px;height:88px;border-radius:50%;background:var(--paper);display:grid;place-items:center;overflow:hidden;border:3px solid var(--white);box-shadow:var(--shadow)}
.profile__fig img{width:72px;height:auto}
.tags-label{margin:0 0 .5rem;font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.tags li{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:.25rem .85rem;font-size:var(--t-xs);font-weight:600;color:var(--navy)}

/* Footer */
.site-footer{background:var(--navy-deep);color:var(--muted-dark);font-size:var(--t-sm)}
.footer__grid{display:grid;gap:var(--s4);padding-block:var(--s6) var(--s4)}
@media (min-width:48rem){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__brand{display:inline-block;background:var(--paper);padding:.5rem .75rem;border-radius:var(--r);margin-bottom:var(--s2)}
.footer__brand img{height:56px;width:auto}
.site-footer h2{font:600 var(--t-sm)/1.2 var(--font-text);color:#fff;letter-spacing:.02em;margin-bottom:var(--s2)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.site-footer a{color:var(--muted-dark);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer__legal{border-top:1px solid var(--line-dark);padding-block:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between;font-size:var(--t-xs)}
.footer__legal ul{display:flex;gap:var(--s3)}

/* Scroll-Reveal: ohne JS sichtbar; nur wenn JS aktiv (.js) wird versteckt */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.08s}.js .reveal[data-delay="2"]{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.center{text-align:center}
@media print{.site-header,.cta-band,.burger{display:none}body{background:#fff}}
/* Icons (Sprite via <use>) */
.i{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:1em;height:1em}
.section__head p.kicker{color:var(--teal-text);font-size:var(--t-sm)}
.section--dark .section__head p.kicker{color:var(--teal-bright)}

/* Kontaktformular */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s3)}
.form-card h2{font-size:var(--t-h3);margin-top:0}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.5rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b3558' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .9rem center}
.field select:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--navy)}
.field .opt{font-weight:400;color:var(--muted)}
.field--check{display:grid;grid-template-columns:24px 1fr;gap:.75rem;align-items:start}
.field--check input{width:24px;height:24px;min-height:0;margin:.15rem 0 0;accent-color:var(--navy)}
.field--check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.field--check label{margin:0;font-weight:400}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{display:none;border:2px solid #b3261e;background:#fdf0ef;color:#7a1710;border-radius:var(--r);padding:var(--s2) var(--s3);margin-bottom:var(--s3);font-weight:500}
.form-error:target{display:block}
.form-error:focus{outline:3px solid var(--focus);outline-offset:2px}
.form-error strong{display:block;margin-bottom:.25rem}
.form-error a{color:#7a1710}
.noscript-note{margin:0 0 var(--s3)}
.footer__brand img{height:104px;width:auto}
.thanks{max-width:40rem}

/* ===== Webseiten-Selbst-Check (webseiten-check.html) ===== */
.wc-notes{display:grid;gap:var(--s2);margin:0;padding:0;list-style:none}
@media (min-width:48rem){.wc-notes{grid-template-columns:repeat(3,1fr)}}
.wc-notes .note{height:100%;margin:0}
.wc-app{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s2);max-width:52rem;margin-inline:auto}
@media (min-width:48rem){.wc-app{padding:var(--s4)}}
.wc-progress-text{margin:0 0 .35rem;font-size:var(--t-sm);font-weight:600;color:var(--teal-text)}
.wc-progress{display:block;width:100%;height:10px;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--paper-2);overflow:hidden}
.wc-progress::-webkit-progress-bar{background:var(--paper-2);border-radius:999px}
.wc-progress::-webkit-progress-value{background:var(--navy);border-radius:999px}
.wc-progress::-moz-progress-bar{background:var(--navy);border-radius:999px}
.wc-steps{display:none;list-style:none;margin:var(--s2) 0 0;padding:0;gap:.5rem;flex-wrap:wrap}
@media (min-width:48rem){.wc-steps{display:flex}}
.wc-steps__item{font-size:var(--t-xs);color:var(--muted)}
.wc-steps__btn{display:flex;align-items:center;gap:.4rem;min-height:32px;padding:.15rem .4rem .15rem 0;background:none;border:0;border-radius:var(--r);font:inherit;color:inherit;cursor:pointer}
.wc-steps__btn:hover .wc-steps__t{text-decoration:underline}
.wc-steps__btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wc-steps__n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);font-weight:700;font-size:.75rem}
.wc-steps__item.is-done .wc-steps__n{background:var(--navy);border-color:var(--navy);color:#fff}
.wc-steps__item.is-current{color:var(--ink);font-weight:700}
.wc-steps__item.is-current .wc-steps__n{border-color:var(--navy);color:var(--navy)}
.wc-title{margin:var(--s4) 0 var(--s1);font-size:var(--t-h3)}
.wc-title:focus{outline:none}
.wc-title:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.wc-intro{color:var(--muted);margin-bottom:var(--s3)}
.wc-error{border:2px solid #b3261e;background:#fdf0ef;color:#7a1710;border-radius:var(--r);padding:var(--s2) var(--s3);margin-bottom:var(--s3);font-weight:600}
.wc-error[hidden]{display:none}
.wc-q{border:0;border-top:1px solid var(--line);margin:0;padding:var(--s3) 0;min-width:0}
.wc-q:first-of-type{border-top:0;padding-top:var(--s1)}
/* Legende innerhalb des Fieldsets, damit die Trennlinie nicht an der Legende abreißt */
.wc-q__legend{float:left;width:100%}
.wc-q__legend+*{clear:both}
.wc-q[hidden]{display:none}
.wc-q:focus{outline:none}
.wc-q__legend{padding:0;margin-bottom:var(--s2);font-weight:600;line-height:1.4}
.wc-q__num{display:block;font-size:var(--t-xs);font-weight:700;color:var(--teal-text);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.2rem}
.wc-q__text{display:block}
.wc-q__hint{margin:0 0 var(--s2);font-size:var(--t-sm);color:var(--muted)}
.wc-options{display:grid;gap:.5rem}
@media (min-width:48rem){.wc-options{grid-template-columns:repeat(2,1fr)}}
.wc-opt{position:relative;display:flex}
.wc-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.wc-opt label{display:flex;align-items:center;gap:.75rem;width:100%;min-height:48px;padding:.65rem .9rem;border:1.5px solid #8aa0b3;border-radius:var(--r);background:#fff;font-size:var(--t-sm);line-height:1.4;cursor:pointer}
.wc-opt label::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--navy);background:#fff}
.wc-opt input:checked+label{border-color:var(--navy);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--navy);font-weight:600}
.wc-opt input:checked+label::before{background:radial-gradient(circle,var(--navy) 0 45%,#fff 50%)}
.wc-opt input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.wc-opt label:hover{border-color:var(--navy)}
.wc-help{margin-top:var(--s2);display:grid;gap:.25rem}
.wc-help details{font-size:var(--t-sm)}
.wc-help summary{cursor:pointer;display:inline-block;min-height:32px;padding:.3rem 0;color:var(--teal-text);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.wc-help summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.wc-help details p{margin:.25rem 0 var(--s1);padding:var(--s2);background:var(--paper);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;color:var(--ink)}
.wc-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.wc-nav .btn{flex:1 1 9rem}
@media (min-width:48rem){.wc-nav .btn{flex:0 0 auto;min-width:10rem}}
/* Ergebnis */
.wc-badge{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:var(--t-sm);padding:.2rem .7rem;border-radius:1rem;border:1.5px solid currentColor}
.wc-badge__dot{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none}
.wc-badge--gruen{color:#14532d;background:#e6f4ea}
.wc-badge--gelb{color:#6b4800;background:#fff6dc}
.wc-badge--rot{color:#8a1912;background:#fdecea}
.wc-badge--gelb .wc-badge__dot{border-radius:2px;transform:rotate(45deg)}
.wc-badge--rot .wc-badge__dot{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
.wc-verdict{border:2px solid;border-radius:var(--r-lg);padding:var(--s3);margin:var(--s3) 0}
.wc-verdict p:last-child{margin-bottom:0}
.wc-verdict__head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.wc-verdict--gruen{border-color:#2e7d4f;background:#f2faf5}
.wc-verdict--gelb{border-color:#b37f00;background:#fffaec}
.wc-verdict--rot{border-color:#b3261e;background:#fef6f5}
.wc-h3{font-size:var(--t-lg);margin:var(--s4) 0 var(--s2)}
.wc-areas{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
@media (min-width:48rem){.wc-areas{grid-template-columns:repeat(2,1fr)}}
.wc-area{border:1px solid var(--line);border-left-width:6px;border-radius:var(--r);padding:var(--s2) var(--s3);background:#fff}
.wc-area--gruen{border-left-color:#2e7d4f}.wc-area--gelb{border-left-color:#b37f00}.wc-area--rot{border-left-color:#b3261e}
.wc-area h4{font-size:var(--t-base);margin-bottom:.4rem}
.wc-area p{font-size:var(--t-sm);color:var(--muted);margin-bottom:.5rem}
.wc-area .wc-area__badge{color:var(--ink)}
.wc-group{margin:var(--s3) 0}
.wc-group h4{font-size:var(--t-lg);margin-bottom:.25rem}
.wc-group--dringend h4{color:#8a1912}.wc-group--bald h4{color:#6b4800}.wc-group--optimieren h4{color:var(--navy)}
.wc-group__intro{color:var(--muted);font-size:var(--t-sm)}
.wc-measures{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.wc-measure{border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);background:var(--paper)}
.wc-measure p{margin:0 0 .35rem;font-size:var(--t-sm)}
.wc-measure__title{font-weight:700;font-size:var(--t-base)!important}
.wc-measure__meta{color:var(--muted);font-size:var(--t-xs)!important;margin-bottom:0!important}
.wc-tag{display:inline-block;font-weight:700;padding:.05rem .5rem;border-radius:999px;border:1px solid currentColor;margin-right:.35rem}
.wc-tag--klaeren{color:#6b4800}.wc-tag--handeln{color:var(--navy)}
.wc-disclaimer{margin-top:var(--s4);font-size:var(--t-sm);color:var(--muted);border-left:3px solid var(--teal);padding-left:var(--s2)}
.wc-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.wc-copy-status{min-height:1.5rem;margin:var(--s1) 0 0;font-size:var(--t-sm);color:var(--teal-text);font-weight:600}
.wc-again{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s1)}
.wc-linkbtn{background:none;border:0;padding:.5rem 0;min-height:44px;font:600 var(--t-sm)/1.2 var(--font-text);color:var(--teal-text);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.wc-linkbtn:hover{color:var(--navy)}
.wc-print-head{display:none}
.wc-noscript{max-width:52rem;margin-inline:auto}
@media print{
  @page{margin:16mm}
  body{font-size:11pt;line-height:1.45;color:#000;background:#fff}
  .skip,.site-footer,.page-head,.cta-band,.wc-noprint,.wc-actions,.wc-copy-status,.wc-again,.wc-steps,.wc-progress-wrap,.wc-nav{display:none!important}
  .wc-has-result .site-header{display:none!important}
  .section{padding-block:0!important;background:#fff!important}
  .wc-app{border:0;padding:0;max-width:none}
  .wc-print-head{display:block;border-bottom:2px solid #000;margin-bottom:12pt;padding-bottom:8pt}
  .wc-print-head p{margin:0 0 3pt;font-size:10pt}
  .wc-print-brand{font-weight:700;font-size:11pt!important}
  .wc-print-title{font-size:16pt!important;font-weight:700;font-family:var(--font-head)}
  .wc-title{margin-top:0;font-size:16pt}
  .wc-verdict,.wc-area,.wc-measure{break-inside:avoid}
  .wc-verdict{border:1.5pt solid #000;background:#fff!important}
  .wc-areas{display:block}
  .wc-area{margin-bottom:6pt;padding:6pt 10pt}
  .wc-area p{font-size:10pt;margin-bottom:3pt}
  .wc-measure{margin-bottom:5pt;padding:6pt 10pt}
  .wc-measures{display:block}
  .wc-measure p{font-size:10pt}
  .wc-group{margin:8pt 0}
  .wc-area,.wc-measure{background:#fff;border-color:#555}
  .wc-badge{border-width:1.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wc-h3{break-after:avoid;font-size:13pt}
  .wc-group h4,.wc-group__intro{break-after:avoid;color:#000!important}
  .wc-measure:first-child{break-before:avoid}
  a{color:#000}
}

/* ---- Integrator-Ergänzungen ---- */
.feature h4{font:600 var(--t-lg)/1.2 var(--font-head);margin:0 0 .25rem;color:var(--ink)}
.feature__meta{font-size:var(--t-xs);font-weight:600;color:var(--teal-text);margin:0 0 .25rem!important}
.features--1{grid-template-columns:1fr!important}
.stack{display:grid;gap:var(--s5)}
.stack>.split{padding-top:var(--s4);border-top:1px solid var(--line)}
.stack>.split:first-child{border-top:0;padding-top:0}
.stack h3{font-size:var(--t-h3)}
.mt-gpai{margin-top:var(--s3);color:var(--muted);font-size:var(--t-sm)}
.pillar ol{margin:0 0 var(--s3);padding-left:1.4rem;font-size:var(--t-sm)}
.pillar ol li{padding:.3rem 0 .3rem .25rem}
.pillar ol li::marker{color:var(--teal-text);font-weight:600}
.pillar__for{font-weight:600;color:var(--ink)!important;margin-top:auto;margin-bottom:0}
.contact-card h2{color:#fff;font-size:var(--t-h3)}
.footer__note{margin:0 0 var(--s3);font-size:var(--t-xs);max-width:46rem}
.legal-stand{color:var(--muted);font-size:var(--t-sm);margin-top:var(--s4)}
.error-page{max-width:40rem;padding-block:var(--s6)}
.error-code{font:700 clamp(4rem,14vw,8rem)/1 var(--font-head);color:var(--teal-text);margin:0 0 var(--s2)}
.steps--v{grid-template-columns:1fr!important;gap:var(--s4);max-width:46rem}
.steps--v::before{left:23px!important;right:auto!important;top:24px!important;bottom:24px!important;width:2px!important;height:auto!important;background:repeating-linear-gradient(var(--teal) 0 6px,transparent 6px 12px)!important}
.steps--v .step{padding:0 0 0 calc(48px + var(--s3))!important}
.steps--v .step h3{padding-top:.6rem!important}