/* Schriften lokal eingebunden (keine Verbindung zu Google), Lizenz: SIL Open Font License */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

/* zeichnungsfragen.de · Layout: die Seite als technisches Zeichnungsblatt – Rahmen mit Feldeinteilung A–F / 1–8, Abschnitte als Felder, Fuß als Schriftfeld. Farben und Schriften von BeSt (gps-schulung.de) */
:root{
  --paper:#F3F8FC; --sheet:#FFFFFF; --ink:#2E3750; --graphite:#5A6378; --line:#DCE3EA; --grid:#EEF4F9;
  --correct:#1F84C2; --correct-soft:#E4F1FA; --signal:#F4B400; --signal-ink:#2E3750; --frame:#2E3750;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#141925; --sheet:#1A2030; --ink:#E6EBF3; --graphite:#A3ADC0; --line:#2F3850; --grid:#20283A;
  --correct:#5CB4E8; --correct-soft:#1C3048; --signal:#F4B400; --signal-ink:#2E3750; --frame:#A3ADC0; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#141925; --sheet:#1A2030; --ink:#E6EBF3; --graphite:#A3ADC0; --line:#2F3850; --grid:#20283A;
  --correct:#5CB4E8; --correct-soft:#1C3048; --signal:#F4B400; --signal-ink:#2E3750; --frame:#A3ADC0; color-scheme:dark}
.brandbar{max-width:1120px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.01em}
.wordmark span{color:var(--correct)}
.by{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--graphite)}
a.by{text-decoration:none}
.logo{height:44px;width:auto;display:inline-block}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none} :root:not([data-theme="light"]) .logo-dark{display:inline-block}}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:inline-block}
.portrait{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line)}
.more{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;margin-top:6px}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 90px}
a{color:var(--correct)}
:focus-visible{outline:2px solid var(--correct);outline-offset:3px}

/* Zeichnungsrahmen */
.sheet{max-width:1120px;margin:0 auto;background:var(--sheet);border:2px solid var(--ink);position:relative;
  display:grid;grid-template-columns:22px minmax(0,1fr) 22px}
.zones-x{grid-column:1/-1;display:grid;grid-template-columns:22px repeat(8,1fr) 22px;border-bottom:1px solid var(--ink);
  font-family:var(--f-mono);font-size:11px;color:var(--graphite);text-align:center}
.zones-x span{padding:2px 0;border-left:1px solid var(--line)}
.zones-x span:first-child,.zones-x span:last-child{border:0}
.zones-x.bottom{border-bottom:0;border-top:1px solid var(--ink)}
.zones-y{display:grid;grid-template-rows:repeat(6,1fr);font-family:var(--f-mono);font-size:11px;color:var(--graphite);
  border-right:1px solid var(--ink)}
.zones-y.right{border-right:0;border-left:1px solid var(--ink)}
.zones-y span{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--line)}
.zones-y span:first-child{border-top:0}
.content{min-width:0}

section{padding:56px clamp(18px,5vw,64px);border-top:1px solid var(--line);position:relative}
section:first-child{border-top:0}
.field{position:absolute;top:12px;right:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--graphite)}
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;color:var(--correct);margin:0 0 10px}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,6vw,64px);font-weight:700;letter-spacing:-.005em}
h2{font-size:clamp(29px,3.6vw,40px);font-weight:600;margin-bottom:20px}
h3{font-size:24px;font-weight:600;margin:32px 0 10px}
p{margin:0 0 14px;max-width:65ch}
.lead{font-size:19px;color:var(--graphite);margin-top:18px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin:28px 0 22px}
.btn{display:inline-block;background:var(--signal);color:var(--signal-ink);font-family:var(--f-display);font-weight:700;
  font-size:21px;letter-spacing:.01em;padding:14px 26px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.link{font-weight:500;text-decoration:underline;text-underline-offset:4px}
.proof{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--graphite)}
.stars{color:var(--ink);font-weight:600}
.drawing{border:1px solid var(--line);background:
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px, var(--sheet);padding:14px}
.drawing svg{display:block;width:100%;height:auto}
.drawing figcaption{font-family:var(--f-mono);font-size:12px;color:var(--graphite);margin-top:8px}

/* Fall */
.case{border-left:3px solid var(--correct);padding:4px 0 4px 22px;margin-top:28px}
.case p:last-child{font-weight:600;margin-bottom:0}

/* Leistungen */
.gets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px}
.gets li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px}
.gets .n{font-family:var(--f-mono);font-size:14px;border:1.5px solid var(--ink);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.gets b{display:block;font-weight:600}
.example{margin-top:40px;border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.example > div{padding:22px 24px;min-width:0}
.example .q{background:var(--grid)}
.example .a{background:var(--correct-soft);border-left:1px solid var(--line)}
.tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.example .a .tag{color:var(--correct)}
.example p{font-size:16px}
.mono{font-family:var(--f-mono);font-size:.92em}

/* Kosten-Hinweis */
.cost{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
.quote80{font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1.15;border:2px solid var(--correct);
  color:var(--correct);padding:18px 20px;text-wrap:balance}

/* Ablauf */
.steps{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps li{border-top:2px solid var(--ink);padding-top:12px}
.steps .k{font-family:var(--f-mono);font-size:13px;color:var(--graphite)}
.steps b{display:block;font-family:var(--f-display);font-size:22px;font-weight:600;margin:4px 0 6px}
.steps p{font-size:15.5px}

/* Person */
.person{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}

.name{font-family:var(--f-display);font-size:28px;font-weight:700}
.titles{font-size:14px;color:var(--graphite);margin-bottom:18px}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.reviews blockquote{margin:0;padding:14px 16px;border:1px solid var(--line);font-size:14.5px;color:var(--graphite)}
.reviews blockquote{display:flex;flex-direction:column;gap:12px}
.reviews blockquote p{margin:0}
.reviews blockquote footer{margin-top:auto;display:grid;gap:2px;font-size:13px;line-height:1.4}
.reviews blockquote footer b{color:var(--ink);font-weight:600}
.logos{margin-top:28px;font-size:13px;color:var(--graphite)}
.logos ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.logos li{border:1px dashed var(--line);padding:6px 10px;font-family:var(--f-mono);font-size:12px}

/* FAQ */
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);color:var(--correct)}
details[open] summary::after{content:"−"}
details p{margin:10px 0 0}

/* Danach */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.next div{border:1px solid var(--line);padding:18px}
.next b{display:block;font-family:var(--f-display);font-size:21px;font-weight:600;margin-bottom:6px}
.next p{font-size:15px;margin:0}

/* Formular */
.form-sec{background:var(--grid)}
form{background:var(--sheet);border:2px solid var(--ink);padding:28px;max-width:760px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
form .full{grid-column:1/-1}
label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
label .opt{font-weight:400;color:var(--graphite)}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--graphite);padding:10px 12px;border-radius:0}
textarea{min-height:130px;resize:vertical}
input[type=file]{font:inherit;font-size:14px;width:100%;padding:12px;border:1px dashed var(--graphite);background:var(--paper)}
.hint{font-size:13px;color:var(--graphite);margin-top:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:400}
.check input{margin-top:5px;accent-color:var(--correct)}
.note{font-size:14px;color:var(--graphite);margin-bottom:20px}
.sent{grid-column:1/-1;font-size:15px;background:var(--correct-soft);border:1px solid var(--correct);padding:12px 14px}

/* Archiv */
.archive{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.archive a{font-weight:500}
.archive .mono{color:var(--graphite);margin-right:10px}

/* Schriftfeld */
.titleblock{grid-column:1/-1;border-top:2px solid var(--ink);display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr;
  font-size:13px}
.titleblock > div{padding:10px 14px;border-left:1px solid var(--ink);min-width:0}
.titleblock > div:first-child{border-left:0}
.titleblock .k{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.titleblock strong{font-family:var(--f-display);font-size:20px}

.sticky{display:none}

@media (max-width:860px){
  .hero,.cost,.person{grid-template-columns:minmax(0,1fr)}
  .example,.gets,.steps,.reviews,.next{grid-template-columns:minmax(0,1fr)}
  .example .a{border-left:0;border-top:1px solid var(--line)}
  .person .portrait{max-width:240px}
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock > div:nth-child(3){border-left:0}
  .titleblock > div:nth-child(n+3){border-top:1px solid var(--ink)}
}
@media (max-width:560px){
  .sheet{grid-template-columns:minmax(0,1fr)}
  .zones-x,.zones-y{display:none}
  form{grid-template-columns:minmax(0,1fr);padding:20px}
  .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--sheet);border-top:2px solid var(--ink);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .sticky .btn{display:block;text-align:center;font-size:19px;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Seitenrahmen für echte Seiten */
html{-webkit-text-size-adjust:100%}
body{margin:0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--correct);text-decoration:underline;cursor:pointer}
.plain{max-width:760px}
.plain h1{font-size:clamp(34px,5vw,52px);margin-bottom:18px}
.errors{border:2px solid #b3261e;background:var(--sheet);padding:16px 20px;margin:18px 0}
.errors li{margin:4px 0}
/* Cookie-Hinweis */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--sheet);border-top:2px solid var(--ink);
  padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.consent-in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.consent p{margin:0;font-size:15px;max-width:70ch}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
.consent button{font-family:var(--f-display);font-weight:700;font-size:18px;padding:10px 20px;border:2px solid var(--ink);
  background:var(--sheet);color:var(--ink);cursor:pointer;min-width:140px}
.logo-row li{border:0;padding:0;background:none}
.logo-row{gap:14px 26px!important;align-items:center}
.logo-row img{height:36px;width:auto;filter:grayscale(1);opacity:.75}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-row img{filter:grayscale(1) invert(1);opacity:.8}}

.field[data-feld]::before{content:"FELD " attr(data-feld)}

.consent-text{min-width:0;flex:1 1 420px}
.consent-opts{display:grid;gap:8px;margin-top:10px}
.consent-opt{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:400;margin:0;cursor:pointer}
.consent-opt input{margin-top:4px;accent-color:var(--correct);width:18px;height:18px;flex:none}
.consent-btns button[data-wahl="alle"]{background:var(--ink);color:var(--sheet)}
@media (max-width:560px){.consent-btns{width:100%}.consent-btns button{flex:1 1 100%}}