/* Zitierfähig · Zweiklang-Grammatik aus dem Signalakquise-Brand-Kit, Akzent Cyan statt Signalgrün.
   Radius 0, keine Schatten. Papier für Text und Beleg, Nachtglas für alles, was Messung zeigt. */
/* Schriften: fonts/fonts.css wird im Seitenkopf direkt geladen (kein @import, spart eine Abrufkette). */
:root{
  --font:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --bg:#F7F7F5;--raised:#FFFFFF;--ink:#14171A;--body:#575C60;--dim:#8A8F92;--rule:#E4E4E0;--rule-strong:#CBCBC5;
  --akzent:#21708C;--akzent-weich:rgba(33,112,140,.07);--akzent-kante:rgba(33,112,140,.32);
  --n-bg:#080C13;--n-line:#1E2836;--n-text:#E8EDF3;--n-body:#A3B0BF;--n-dim:#74838F;--n-akzent:#46B6D8;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.62;color:var(--body);background:var(--bg)}
a{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent)}
.eyebrow::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
@media (max-width:640px){.eyebrow{align-items:flex-start;line-height:1.6}.eyebrow::before{margin-top:5px}}
h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.026em;line-height:1.14;margin:0}
h1{font-size:clamp(32px,4.3vw,50px);margin:20px 0 22px;max-width:17ch}
h2{font-size:clamp(24px,2.6vw,32px);margin:14px 0 18px;max-width:24ch}
h3{font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
h1,h2{text-wrap:balance}
p{margin:0 0 14px;max-width:62ch}
.lead{font-size:18px;color:var(--ink);max-width:52ch}
.quelle{font-size:12.5px;color:var(--dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--ink);color:#F7F7F5;padding:8px 12px;z-index:9}

/* Kopf */
header.top{border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:19px;letter-spacing:-.026em}
.marke i{display:block;width:14px;height:14px;background:var(--ink);position:relative}
.marke i::after{content:"";position:absolute;right:-6px;bottom:-6px;width:8px;height:8px;background:var(--akzent)}
nav.haupt{display:flex;gap:28px;align-items:center;font-size:14px}
nav.haupt a{text-decoration:none;color:var(--body)}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:#F7F7F5 !important;text-decoration:none;font-weight:500;font-size:15px;padding:13px 20px;border:0}
.btn:hover{background:var(--akzent)}
.btn.klein{font-size:13.5px;padding:9px 14px}
.mikro{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);margin-top:12px;max-width:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* Held */
.held{padding:88px 0 104px;border-bottom:1px solid var(--rule)}
.held .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}

/* Index-Objekt auf Nachtglas */
.index{margin:0;background:var(--n-bg);color:var(--n-body);position:relative;overflow:hidden;
  background-image:radial-gradient(118% 76% at 50% -10%,rgba(122,164,226,.13),transparent 58%)}
.index::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:radial-gradient(rgba(190,215,255,.9) 1px,transparent 1.2px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent)}
.index .ikopf{display:flex;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--n-line);position:relative}
.index .ikopf span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--n-dim)}
.index .ikopf span.an{color:var(--n-akzent)}
.index .titel{padding:20px 20px 6px;position:relative}
.index .titel b{display:block;color:var(--n-text);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.index table{width:100%;border-collapse:collapse;position:relative;font-size:13px;margin:0}
.index th{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--n-dim);text-align:left;padding:14px 10px 8px 20px;border-bottom:1px solid var(--n-line)}
.index th.s{text-align:center;padding-left:4px;padding-right:4px}
.index td{padding:11px 10px 11px 20px;border-bottom:1px solid var(--n-line);color:var(--n-body);vertical-align:top}
.index td.id{font-family:var(--mono);font-size:11px;color:var(--n-dim);white-space:nowrap;width:1%}
.index td.s{text-align:center;padding:13px 3px;width:22px}
.index td.s:last-child{padding-right:20px}
.index i.q{display:inline-block;width:10px;height:10px;border:1px solid #2C3A4C}
.index .fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--n-dim);position:relative}
.index .fuss a{color:var(--n-akzent);text-decoration:none}

section.block{padding:112px 0;border-bottom:1px solid var(--rule)}
.split{display:grid;grid-template-columns:.9fr 1.5fr;gap:64px;align-items:start}

/* drei Arbeiten */
.teile{border-top:1px solid var(--ink)}
.teil{display:grid;grid-template-columns:72px 1fr 1.1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule)}
.teil .nr{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:3px}
.teil p{font-size:15px;margin:0}
.teil .beleg{font-size:14px;color:var(--body);border-left:1px solid var(--rule);padding-left:20px}
.teil .beleg .label{display:block;margin-bottom:6px}

/* Ausgangslage */
.zahl{font-weight:600;color:var(--ink);font-size:clamp(56px,7vw,88px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin:14px 0 10px}
.zahl small{font-size:.38em;color:var(--dim);letter-spacing:-.01em;font-weight:500}
.karte{border:1px solid var(--rule);padding:22px 24px}
.karte.akzent{border-color:var(--akzent-kante);background:var(--akzent-weich)}

/* Leistungen */
.leiter{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.leiter > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 20px 20px;display:flex;flex-direction:column}
.leiter .preis{font-family:var(--mono);color:var(--ink);font-size:14px;margin:6px 0 12px;display:block}
.leiter p{font-size:14px;margin:0 0 8px}
.leiter .lauf{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim)}
.hinweise{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.hinweise p{font-size:14px}
.hinweise b{color:var(--ink)}

/* Für wen */
.zwei{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.zwei > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 24px}
.zwei h3{margin-top:14px}
.zwei q{display:block;quotes:"„" "“";color:var(--ink);font-size:17px;line-height:1.4;margin:10px 0 14px}
.zwei p{font-size:14.5px;margin:0}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--rule-strong);color:var(--body)}
.tag.jetzt{border-color:var(--ink);color:var(--ink)}

/* Person */
.person{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.person img{width:200px;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule)}
.person p{font-size:15.5px}
.person .klein{font-size:14px}

/* Belege unter einem Absatz */
.belege{margin-top:26px;border-top:1px solid var(--rule);padding-top:16px}
.belege .label{display:block;margin-bottom:10px}
.belege p{font-size:13.5px;line-height:1.55;margin:0 0 10px}

/* Fragen und Antworten */
.faq{border-top:1px solid var(--ink)}
.faq > div{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--rule)}
.faq h3{margin:0;font-size:17px;line-height:1.3}
.faq p{margin:0;font-size:15px;max-width:60ch}

/* Auszug anfordern: Schlussband auf Nachtglas */
.auszug{padding:104px 0;background:var(--n-bg);color:var(--n-body);position:relative;
  background-image:radial-gradient(90% 70% at 20% -10%,rgba(122,164,226,.11),transparent 60%)}
.auszug .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.auszug .label{color:var(--n-akzent)}
.auszug h2{color:var(--n-text);margin-bottom:16px}
.auszug p{color:var(--n-body)}
.auszug a{color:var(--n-text)}
.auszug .brauch{border:1px solid var(--n-line);padding:24px 24px 26px;background:rgba(255,255,255,.02)}
.auszug .brauch .label{display:block;color:var(--n-dim);margin-bottom:12px}
.auszug ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:b}
.auszug li{counter-increment:b;display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--n-line);color:var(--n-text);font-size:15px}
.auszug li::before{content:"0" counter(b);font-family:var(--mono);font-size:11px;color:var(--n-dim);padding-top:3px}
.auszug .btn{background:var(--n-akzent);color:#04121A !important;font-weight:600}
.auszug .btn:hover{background:#7CD0EA}
.auszug .mikro{color:var(--n-dim)}
.auszug .tel{font-size:14px;margin:14px 0 0}
.auszug a:focus-visible{outline-color:var(--n-akzent)}

/* Fuß */
footer{border-top:1px solid var(--rule);padding:36px 0 56px;font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer p{margin:0 0 6px}
footer b{color:var(--ink)}
footer .rechts{text-align:right}
.hinweis{border:1px solid var(--akzent-kante);background:var(--akzent-weich);padding:16px 20px;margin-top:28px;max-width:68ch;color:var(--ink);font-size:15px}
.hinweis .label{display:block;color:var(--akzent);margin-bottom:6px}
.fehler{padding:120px 0 140px}

/* Unterseiten: Methode, Impressum, Datenschutz */
.seitenkopf{padding:80px 0 64px;border-bottom:1px solid var(--rule)}
.seitenkopf h1{font-size:clamp(30px,4vw,46px);margin:18px 0 20px;max-width:20ch}
.seitenkopf .lead{max-width:56ch}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.eckdaten{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:40px}
.eckdaten div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 18px 16px}
.eckdaten b{display:block;color:var(--ink);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.eckdaten span{font-size:13.5px}
.abschnitt{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:72px 0;border-bottom:1px solid var(--rule);line-height:1.65}
.abschnitt > .label{padding-top:8px}
.abschnitt h2{font-size:clamp(22px,2.3vw,28px);margin:0 0 16px;max-width:30ch}
.abschnitt h3{font-size:16.5px;margin:24px 0 6px}
.abschnitt p,.abschnitt ul{max-width:68ch}
.abschnitt table{width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14px;line-height:1.5}
.abschnitt th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--ink);padding:8px 12px 8px 0;vertical-align:bottom}
.abschnitt td{border-bottom:1px solid var(--rule);padding:10px 12px 10px 0;vertical-align:top}
.abschnitt td b{color:var(--ink);font-weight:600}
.abschnitt td.z{text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.formel{font-family:var(--mono);font-size:13px;color:var(--ink);border-left:2px solid var(--akzent);padding:10px 16px;margin:10px 0 18px;background:var(--akzent-weich);max-width:68ch}
.abschnitt ul{margin:0 0 16px;padding-left:18px}
.abschnitt li{margin:0 0 7px}
.adresse{font-style:normal;border-left:2px solid var(--akzent);padding:4px 0 4px 16px;margin:6px 0 18px;color:var(--ink)}

@media (max-width:980px){
  .held .wrap,.split,.auszug .wrap{grid-template-columns:1fr;gap:44px}
  .leiter{grid-template-columns:1fr 1fr}
  nav.haupt a.n{display:none}
}
@media (max-width:860px){
  .abschnitt{grid-template-columns:1fr;gap:12px;padding:52px 0}
  .eckdaten{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .held{padding:56px 0 72px}
  section.block{padding:72px 0}
  .seitenkopf{padding:52px 0 44px}
  .teil{grid-template-columns:1fr;gap:10px}
  .teil .beleg{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:12px}
  .leiter,.zwei,.hinweise{grid-template-columns:1fr}
  .faq > div{grid-template-columns:1fr;gap:8px}
  .auszug{padding:72px 0}
  .index td{padding-left:14px}
  .index th{padding-left:14px}
  .index .ikopf,.index .titel,.index .fuss{padding-left:14px;padding-right:14px}
  footer .rechts{text-align:left}
  .person{grid-template-columns:1fr}
  .person img{width:160px}
  .abschnitt table{display:block;overflow-x:auto}
}