/* ============================================================
   Sachverständigenbüro Oskar Baker
   Gestaltungsprinzip: Vermessung. Graphit, Chrom, Maßlinien.
   ============================================================ */
:root{
  --void:#080B0F;        /* Grund */
  --graphit:#0E141B;     /* Abschnitt */
  --panel:#141D26;       /* Karte */
  --panel-2:#1A2632;     /* Karte gehoben */
  --navy:#152A47;        /* Logo-Navy */
  --chrom:#EDF2F6;       /* Text hell */
  --stahl:#8FA3B3;       /* Text gedeckt */
  --stahl-2:#5D7081;     /* Text schwach */
  --linie:#1F2C38;       /* Hairline */
  --linie-hell:#31424F;
  --eis:#7FD3E8;         /* Akzent: nur Annotation, Zustand, Maß */
  --eis-tief:#173A46;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--chrom);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--chrom)}

/* ---------- Typografie ---------- */
h1,h2,h3,.dsp{
  margin:0;font-family:"Archivo",sans-serif;font-weight:800;
  font-stretch:78%;text-transform:uppercase;line-height:.96;
  letter-spacing:-.005em;text-wrap:balance;
}
h1{font-size:clamp(44px,7.4vw,104px)}
h2{font-size:clamp(30px,4.4vw,58px)}
h3{font-size:clamp(19px,1.5vw,23px);font-weight:700;font-stretch:84%;letter-spacing:.01em;line-height:1.1}
.mono,.label,.anno-t,.idx{font-family:"IBM Plex Mono",ui-monospace,monospace}
.label{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--stahl-2);
  display:inline-flex;align-items:center;gap:10px;
}
.label::before{content:"";width:22px;height:1px;background:var(--eis);flex:none}
.lead{color:var(--stahl);font-size:clamp(16.5px,1.35vw,19px);max-width:60ch;line-height:1.65}
.tiny{font-size:13px;color:var(--stahl-2);line-height:1.55}

/* ---------- Raster ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4.5vw,56px)}
.narrow{max-width:820px}
section{padding-block:clamp(56px,8vw,128px);position:relative}
.sec-line{border-top:1px solid var(--linie)}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:960px){.g2,.g3,.split{grid-template-columns:1fr}}

/* ---------- Maßlinie: das Leitmotiv ---------- */
.mass{display:flex;align-items:center;gap:12px;color:var(--eis);margin-block:22px}
.mass::before,.mass::after{content:"";height:9px;width:1px;background:currentColor;flex:none}
.mass i{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor 12%,currentColor 88%,transparent);display:block;position:relative}
.mass span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stahl-2);white-space:nowrap}

/* Eckmarken */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:9px;height:9px;border:1px solid var(--linie-hell);pointer-events:none;
}
.ticks::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ticks::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* Geisternummer */
.idx{
  position:absolute;top:clamp(26px,4vw,52px);right:clamp(18px,4.5vw,56px);
  font-size:clamp(56px,9vw,132px);line-height:1;font-weight:400;
  color:transparent;-webkit-text-stroke:1px var(--linie-hell);
  pointer-events:none;user-select:none;
}

/* ---------- Kopfzeile ---------- */
header.site{
  position:sticky;top:0;z-index:40;background:rgba(8,11,15,.82);
  backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--linie);
}
.hrow{display:flex;align-items:center;gap:22px;padding-block:14px}
.logo{margin-right:auto;display:block}
.logo-img{height:46px;width:auto}
@media (max-width:560px){.logo-img{height:36px}}
nav.main{display:flex;gap:26px}
nav.main a{
  text-decoration:none;color:var(--stahl);font-size:13px;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.12em;text-transform:uppercase;padding-block:6px;position:relative;
}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--eis);transition:right .3s ease}
nav.main a:hover{color:var(--chrom)}
nav.main a:hover::after{right:0}
nav.main a[aria-current="page"]{color:var(--chrom)}
nav.main a[aria-current="page"]::after{right:0}
@media (max-width:1040px){nav.main{display:none}}
.mnav{display:none;border-top:1px solid var(--linie);background:var(--graphit)}
.mnav ul{list-style:none;margin:0;padding:6px 0;display:flex;flex-wrap:wrap}
.mnav a{display:block;padding:9px 14px;text-decoration:none;color:var(--stahl);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mnav a[aria-current="page"]{color:var(--eis)}
@media (max-width:1040px){.mnav{display:block}}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;background:var(--chrom);color:#080B0F;
  text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 24px;border:1px solid var(--chrom);cursor:pointer;font-family:inherit;
  transition:transform .18s ease,background .18s ease;
}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn-line{
  display:inline-flex;align-items:center;gap:11px;background:transparent;color:var(--chrom);
  text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 24px;border:1px solid var(--linie-hell);transition:border-color .2s ease,color .2s ease;
  font-family:inherit;cursor:pointer;
}
.btn-line:hover{border-color:var(--eis);color:var(--eis)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn .num,.btn-line .num{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.btn,.btn-line{white-space:nowrap}
@media (max-width:430px){.btn,.btn-line{padding:14px 18px;font-size:13px}}

/* ---------- Titelbereich ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(62px,10vw,150px) clamp(48px,7vw,104px);
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(127,211,232,.10), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, #0B1119 58%, var(--void) 100%);
}
.hero-art{
  position:absolute;right:-6%;bottom:6%;width:min(62%,780px);opacity:.30;pointer-events:none;
}
@media (max-width:900px){.hero-art{right:-18%;bottom:auto;top:58%;width:110%;opacity:.14}}
.hero-in{position:relative;z-index:2;max-width:min(780px,100%)}
.hero h1{max-width:14ch}
.hero h1 em{font-style:normal;color:var(--eis)}
.hero .lead{margin-top:26px;max-width:52ch}
.claim{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linie);
  border-block:1px solid var(--linie);margin-top:clamp(42px,6vw,76px);
}
.claim > div{background:var(--void);padding:clamp(20px,2.4vw,30px);position:relative}
.claim b{
  display:block;font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,2vw,27px);line-height:1;margin-bottom:9px;
}
.claim span{font-size:14px;color:var(--stahl);line-height:1.55;display:block}
.claim .n{position:absolute;top:14px;right:16px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--stahl-2);letter-spacing:.14em}
@media (max-width:800px){.claim{grid-template-columns:1fr}}

/* ---------- Karten ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--graphit));
  border:1px solid var(--linie);padding:clamp(22px,2.4vw,32px);
  display:flex;flex-direction:column;gap:12px;position:relative;
  transition:border-color .25s ease,transform .25s ease;
}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:0;height:2px;background:var(--eis);transition:width .35s ease}
.card:hover{border-color:var(--linie-hell);transform:translateY(-3px)}
.card:hover::before{width:46px}
.card .ic{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--eis)}
.card p{color:var(--stahl);font-size:15px}
.card .more{margin-top:auto;padding-top:10px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--chrom);text-decoration:none;display:inline-flex;gap:8px}
.card .more:hover{color:var(--eis)}

/* ---------- Schrittfolge ---------- */
.steps{display:grid;gap:0;border-top:1px solid var(--linie)}
.step{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:clamp(16px,3vw,44px);
  padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--linie);align-items:start;
  transition:background .25s ease;
}
.step:hover{background:rgba(127,211,232,.035)}
.step .sn{
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--eis);letter-spacing:.12em;padding-top:4px;
}
.step p{color:var(--stahl);font-size:15.5px;margin-top:8px}
@media (max-width:680px){.step{grid-template-columns:1fr;gap:4px}.step .sn{padding-top:0}}

/* ---------- Gegenüberstellung ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie)}
.col{background:var(--graphit);padding:clamp(22px,2.6vw,34px)}
.col.mine{background:linear-gradient(180deg,rgba(23,58,70,.55),var(--graphit))}
.col h3{margin-bottom:6px}
.col .who{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stahl-2);margin-bottom:16px;display:block}
.col.mine .who{color:var(--eis)}
.col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.col li{font-size:15px;color:var(--stahl);padding-left:26px;position:relative;line-height:1.5}
.col li::before{content:"";position:absolute;left:0;top:10px;width:14px;height:1px;background:var(--linie-hell)}
.col.mine li::before{background:var(--eis)}
.col li b{color:var(--chrom);font-weight:600}
@media (max-width:820px){.compare{grid-template-columns:1fr}}

/* ---------- Ausklapper ---------- */
details{border-bottom:1px solid var(--linie);padding:20px 0}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  font-family:"Archivo",sans-serif;font-weight:700;font-stretch:84%;font-size:18px;text-transform:uppercase;letter-spacing:.005em;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"IBM Plex Mono",monospace;font-size:19px;color:var(--eis);font-weight:400}
details[open] summary::after{content:"−"}
details p{margin-top:14px;color:var(--stahl);font-size:15.5px;max-width:74ch}

/* ---------- Rechtstexte ---------- */
.legaldoc{max-width:800px}
.legaldoc h2{font-size:clamp(20px,1.8vw,26px);margin-top:46px;padding-top:22px;border-top:1px solid var(--linie)}
.legaldoc h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.legaldoc h3{margin-top:26px;font-size:17px;color:var(--eis)}
.legaldoc p,.legaldoc li{color:var(--stahl);font-size:15.5px;margin-top:12px}
.legaldoc strong,.legaldoc b{color:var(--chrom);font-weight:600}
.legaldoc ul,.legaldoc ol{padding-left:20px;margin:0}
.legaldoc li::marker{color:var(--stahl-2)}
.legaldoc a{color:var(--eis)}
.legaldoc .meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--stahl-2);margin-top:48px;padding-top:18px;border-top:1px solid var(--linie);letter-spacing:.1em;text-transform:uppercase}
.dl{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px 24px;margin-top:20px;font-size:15.5px}
.dl dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stahl-2);padding-top:4px}
.dl dd{margin:0;color:var(--chrom)}
@media (max-width:640px){.dl{grid-template-columns:1fr;gap:3px 0}.dl dd{margin-bottom:16px}}

/* ---------- Formular ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px)}
@media (max-width:900px){.kontakt{grid-template-columns:1fr}}
form{display:flex;flex-direction:column;gap:20px;margin-top:30px}
label{display:flex;flex-direction:column;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stahl-2)}
input,textarea,select{
  font-family:"Archivo",sans-serif;font-size:16px;color:var(--chrom);
  padding:13px 0;border:0;border-bottom:1px solid var(--linie-hell);background:transparent;width:100%;
  transition:border-color .2s ease;letter-spacing:0;text-transform:none;
}
select{padding-right:20px}
option{background:var(--graphit);color:var(--chrom)}
input::placeholder,textarea::placeholder{color:var(--stahl-2)}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--eis)}
a:focus-visible,summary:focus-visible,.btn:focus-visible,.btn-line:focus-visible,button:focus-visible{outline:2px solid var(--eis);outline-offset:3px}
.kbox{border:1px solid var(--linie);padding:clamp(24px,2.8vw,36px);align-self:start;background:linear-gradient(180deg,var(--panel),var(--graphit))}
.kline{display:grid;grid-template-columns:82px minmax(0,1fr);gap:16px 20px;margin:22px 0 0;font-size:16px}
.kline dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stahl-2);padding-top:5px}
.kline dd{margin:0}
.kline a{color:var(--chrom);text-decoration:none;border-bottom:1px solid var(--linie-hell)}
.kline a:hover{color:var(--eis);border-color:var(--eis)}

/* ---------- Hinweis ---------- */
.hinweis{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--stahl-2);line-height:1.7;letter-spacing:.02em}
.merk{border-left:1px solid var(--eis);background:linear-gradient(90deg,rgba(127,211,232,.07),transparent 70%);padding:18px 22px;font-size:15.5px;color:var(--chrom)}

/* ---------- Fußzeile ---------- */
footer.site{border-top:1px solid var(--linie);padding-block:clamp(44px,5vw,72px) 30px;background:var(--graphit)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.fcols{grid-template-columns:1fr;gap:32px}}
footer.site h3{font-size:15px;color:var(--stahl-2);font-family:"IBM Plex Mono",monospace;font-weight:400;letter-spacing:.18em;text-transform:uppercase;font-stretch:100%;margin-bottom:18px}
footer.site p{color:var(--stahl);font-size:15px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
footer.site a{color:var(--chrom);text-decoration:none;font-size:15px}
footer.site a:hover{color:var(--eis)}
.flogo{height:38px;width:auto;margin-bottom:20px;opacity:.9}
.fine{
  border-top:1px solid var(--linie);margin-top:clamp(36px,4vw,56px);padding-top:22px;
  display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--stahl-2);letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}