/* ═══════════════════════════════════════════════════════════════
   ORTGIES — Design-System
   Ein Token-Satz für alle Seiten. Keine Überschreib-Ebenen.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('fonts/dm-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Mono';
  src:url('fonts/dm-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --ground:#F5F7F5;
  --surface:#FFFFFF;
  --sunken:#EFF2F0;
  --ink:#0D1210;
  --ink-2:#2E3733;
  --muted:#5F6B65;
  --faint:#8B958F;
  --line:rgba(13,18,16,.11);
  --line-2:rgba(13,18,16,.06);
  --accent:#075B52;
  --accent-ink:#FFFFFF;
  --accent-soft:#E3EEEB;
  --accent-line:rgba(7,91,82,.24);
  --lift-1:0 1px 2px rgba(13,18,16,.04), 0 4px 14px -6px rgba(13,18,16,.10);
  --lift-2:0 2px 4px rgba(13,18,16,.04), 0 18px 44px -22px rgba(13,18,16,.22);

  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',monospace;

  --s-1:clamp(12.5px,.35vw + 11.6px,13.5px);
  --s0:clamp(15px,.3vw + 14.2px,16.5px);
  --s1:clamp(17.5px,.5vw + 16.2px,20px);
  --s2:clamp(21px,1vw + 18px,26px);
  --s3:clamp(25px,1.6vw + 19px,34px);
  --s4:clamp(32px,2.8vw + 19px,52px);
  --s5:clamp(40px,4.6vw + 18px,78px);

  --gut:clamp(20px,4vw,40px);
  --max:1180px;
  --r-s:10px;
  --r-m:16px;
  --r-l:24px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0B100E;
    --surface:#141A18;
    --sunken:#0F1513;
    --ink:#EAEFEC;
    --ink-2:#C3CCC8;
    --muted:#909B96;
    --faint:#6D7772;
    --line:rgba(234,239,236,.14);
    --line-2:rgba(234,239,236,.07);
    --accent:#3ECFB8;
    --accent-ink:#04211D;
    --accent-soft:rgba(62,207,184,.13);
    --accent-line:rgba(62,207,184,.3);
    --lift-1:0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.5);
    --lift-2:0 2px 4px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.7);
  }
}

/* ─── Basis ─── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--s0);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4{
  margin:0;font-weight:500;letter-spacing:-.026em;line-height:1.08;
  text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;
}
p{margin:0;text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
::selection{background:var(--accent-soft);color:var(--ink);}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
.mono{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
}
.num{font-variant-numeric:tabular-nums;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;
}
.skip:focus{top:12px;}

/* ─── Eintritt (läuft beim Laden, endet sichtbar) ─── */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.d1{animation-delay:.05s;} .d2{animation-delay:.13s;}
.d3{animation-delay:.21s;} .d4{animation-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rise{animation:none;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ─── Header ─── */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.hdr.stuck{border-bottom-color:var(--line-2);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand svg{width:26px;height:26px;}
.brand b{font-size:var(--s0);font-weight:700;letter-spacing:-.02em;}
.brand i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  padding-left:11px;margin-left:2px;border-left:1px solid var(--line);
}
.hdr-nav{display:flex;align-items:center;gap:28px;}
.hdr-nav a{font-size:var(--s-1);color:var(--muted);transition:color .18s;}
.hdr-nav a:hover{color:var(--ink);}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  font-size:var(--s-1);font-weight:500;letter-spacing:-.005em;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s;
  cursor:pointer;white-space:nowrap;
}
.btn-a{background:var(--accent);color:var(--accent-ink);}
.btn-a:hover{transform:translateY(-1px);box-shadow:var(--lift-1);}
.btn-a:active{transform:translateY(0);}
.btn-a:disabled{opacity:.6;cursor:default;transform:none;}
.btn-b{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-b:hover{border-color:var(--ink);}
.btn-lg{padding:15px 26px;font-size:var(--s0);}

/* ─── Abschnitte ─── */
.sec{padding-block:clamp(56px,8vw,112px);}
.sec-h{margin-bottom:clamp(28px,3.6vw,48px);}
.sec-h h2{font-size:var(--s4);max-width:20ch;}
.sec-h p{margin-top:16px;font-size:var(--s1);color:var(--muted);line-height:1.55;letter-spacing:-.008em;max-width:54ch;}
.sec-h .mono{margin-bottom:14px;}

/* Kapitel: Haarlinie, Nummer, Stichwort — gibt der Seite ihre Gliederung */
.eyebrow-k{
  display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(26px,3.4vw,44px);
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.eyebrow-k b{font-weight:500;color:var(--accent);}
.eyebrow-k b::after{content:'';display:inline-block;width:22px;height:1px;background:var(--accent-line);vertical-align:middle;margin-left:12px;}
.sec-h .sec-sub{font-size:var(--s3);}

/* ─── Beweis-Zeile ─── */
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;}
.proof ul{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center;font-size:var(--s-1);color:var(--muted);}
.proof li{display:flex;align-items:center;gap:9px;}
.proof li svg{width:14px;height:14px;color:var(--accent);flex-shrink:0;}

/* ─── Drei Schritte ─── */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);counter-reset:how;}
.how li{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px;}
.how .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.how .k::before{counter-increment:how;content:counter(how,decimal-leading-zero) "  ·  ";color:var(--faint);white-space:pre;}
.how h3{font-size:var(--s1);}
.how p{color:var(--muted);font-size:var(--s-1);line-height:1.62;}
.how p a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ─── Themen-Liste ─── */
.fields{border-top:1px solid var(--line);}
.field{
  display:grid;grid-template-columns:minmax(0,15ch) 1fr;
  gap:8px clamp(20px,4vw,56px);padding:22px 0;border-bottom:1px solid var(--line-2);
}
.field h3{font-size:var(--s1);letter-spacing:-.018em;}
.field p{color:var(--muted);font-size:var(--s-1);line-height:1.62;max-width:64ch;}
.field p+p{margin-top:8px;}
.field p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line);}
.field p a:hover{text-decoration-color:var(--accent);}

/* ─── Online-Checks: ruhige Spalten mit Haarlinie statt Karten ─── */
.checks{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,36px);}
.check{
  display:flex;flex-direction:column;gap:12px;
  padding-top:18px;border-top:1px solid var(--line);
  transition:border-color .25s;
}
.check:hover{border-top-color:var(--accent);}
.check .tagline{
  align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
}
.check h3{font-size:var(--s1);letter-spacing:-.018em;line-height:1.2;}
.check p{color:var(--muted);font-size:var(--s-1);line-height:1.6;flex:1;}
.check .fact{
  font-size:13px;color:var(--ink-2);line-height:1.55;
  padding-left:12px;border-left:1px solid var(--accent-line);
}
.check .fact b{font-weight:600;color:var(--ink);}
.check .go{display:flex;align-items:center;gap:8px;font-size:var(--s-1);font-weight:500;color:var(--ink);margin-top:6px;}
.check .go svg{width:14px;height:14px;transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.check:hover .go svg{transform:translateX(4px);}

/* ─── Aufklapper (FAQ + Rechtliches) ─── */
.acc{border-top:1px solid var(--line);}
.acc details{border-bottom:1px solid var(--line);}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:var(--s1);font-weight:500;letter-spacing:-.016em;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .pm{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s,color .2s;
}
.acc details[open] summary .pm{transform:rotate(45deg);border-color:var(--accent);color:var(--accent);}
.acc .body{padding:0 0 26px;max-width:78ch;}
.acc .body p{font-size:var(--s-1);color:var(--muted);line-height:1.72;}
.acc .body p+p{margin-top:14px;}
.acc .body strong{color:var(--ink);font-weight:600;}
.acc .body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.acc .body code{font-family:var(--mono);font-size:12px;background:var(--sunken);padding:2px 6px;border-radius:5px;color:var(--ink-2);}
.faq .body p{font-size:var(--s0);color:var(--ink-2);}

/* ─── Kontakt ─── */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;}
.chans{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line);}
.chan{
  display:flex;align-items:center;gap:16px;padding:16px 2px;
  border-bottom:1px solid var(--line);
  transition:color .2s,padding .25s cubic-bezier(.2,.7,.2,1);
}
.chan:hover{padding-left:8px;}
.chan:hover .ar{color:var(--accent);}
.chan .ic{width:20px;height:20px;flex-shrink:0;color:var(--accent);display:flex;align-items:center;justify-content:center;}
.chan .ic svg{width:18px;height:18px;}
.chan .tx{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
.chan .tx b{font-size:var(--s0);font-weight:500;letter-spacing:-.01em;}
.chan .tx span{font-size:12.5px;color:var(--muted);}
.chan .ar{margin-left:auto;color:var(--faint);font-size:14px;}

.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(22px,3vw,32px);}
.formcard h3{font-size:var(--s2);margin-bottom:6px;}
.formcard .sub{font-size:var(--s-1);color:var(--muted);margin-bottom:20px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ff{display:flex;flex-direction:column;gap:7px;}
.ff.full{grid-column:1/-1;}
.ff label{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);}
.ff input,.ff select,.ff textarea{
  font:inherit;font-size:var(--s-1);color:var(--ink);
  background:var(--sunken);border:1px solid transparent;
  border-radius:var(--r-s);padding:12px 14px;width:100%;
  transition:border-color .2s,background .2s;
}
.ff textarea{min-height:104px;resize:vertical;}
.ff input::placeholder,.ff textarea::placeholder{color:var(--faint);}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.opts{display:flex;flex-wrap:wrap;gap:8px;}
.opt{position:relative;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt label{
  display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;
  background:transparent;border:1px solid var(--line);font-size:var(--s-1);font-weight:400;
  color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.opt input:checked+label{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.opt input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px;}
.fsub{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap;}
.fnote{font-size:12px;color:var(--faint);line-height:1.5;}
.fnote a{text-decoration:underline;text-underline-offset:2px;color:var(--muted);}
.fok{display:none;padding:16px 18px;border-radius:var(--r-s);background:var(--accent-soft);color:var(--ink);font-weight:500;font-size:var(--s-1);margin-top:14px;}
.fok.show{display:block;}
/* Einwilligungen, Fehlermeldung, Turnstile (Audit 10/2026) */
.fchecks{display:grid;gap:10px;margin-top:16px;}
.fcheck{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--ink-2);cursor:pointer;}
.fcheck input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer;}
.fcheck .req{color:var(--accent);font-weight:600;}
.ferr{display:none;padding:14px 16px;border-radius:var(--r-s);border:1px solid rgba(192,71,60,.35);background:#FBEAE8;color:#8E2F25;font-size:var(--s-1);line-height:1.55;margin-top:14px;}
.ferr.show,.ferr:target{display:block;}
.ferr a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.ts-box{margin-top:12px;}
.ts-box:empty{display:none;}
.note{background:var(--accent-soft);border-radius:var(--r-s);padding:12px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.55;}

/* Nur mobil sichtbar (mobile.css schaltet sie ein) */
.hdr-call,.m-dots{display:none;}

/* ─── Footer ─── */
.ft{padding:44px 0 60px;border-top:1px solid var(--line);}
.ft-in{display:flex;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;align-items:flex-start;}
.ft p{font-size:12.5px;color:var(--faint);line-height:1.6;}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px;}
.ft-links a{color:var(--muted);}
.ft-links a:hover{color:var(--ink);}

/* ─── Responsive ─── */
@media (max-width:1080px){
  .checks{grid-template-columns:repeat(2,1fr);row-gap:44px;}
}
@media (max-width:960px){
  .how{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;}
  .hdr-nav{display:none;}
}
@media (max-width:560px){
  .brand i{display:none;}
  .hdr-in{height:60px;}
  .hdr .btn{padding:10px 16px;}
  .field{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr;}
}