/* ============================================================
   Schriften lokal — keine Verbindung zu Google-Servern
   Latin-Subset, WOFF2, zusammen rund 130 kB
   ============================================================ */

@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   ENTWURF C — "Lebendig"
   Grafik ist Struktur, nicht Deko. Alles SVG, alles handgebaut.
   ============================================================ */

:root{
  --paper:  #FBFAF7;
  --paper2: #F2EFE8;
  --ink:    #10141A;
  --grey:   #5E6670;
  --line:   #DFDBD2;

  --flame:  #FF5D2E;   /* Hauptakzent, energetisch */
  --teal:   #0E7C66;   /* zweiter Ton, nur in Grafiken */
  --sun:    #F5C542;   /* Highlight, sparsam */

  --disp: "Space Grotesk", -apple-system, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gut: 20px;
  --max: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-family:var(--disp); font-weight:600; line-height:1.05; letter-spacing:-.03em; }
p{ margin:0 0 1em; max-width:58ch; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
svg{ display:block; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:2; }

.h-xl{ font-size:clamp(2.6rem, 8.4vw, 5rem); font-weight:700; letter-spacing:-.04em; }
.h-l { font-size:clamp(1.85rem, 4.4vw, 2.9rem); }
.h-m { font-size:clamp(1.2rem, 2.4vw, 1.5rem); }

.lead{ font-size:clamp(1.02rem, 1.9vw, 1.18rem); color:var(--grey); max-width:50ch; }

.tag{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--grey);
  display:inline-flex; align-items:center; gap:9px;
}
.tag::before{
  content:""; width:22px; height:2px; background:var(--flame); display:inline-block;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:500; font-size:.95rem;
  padding:14px 24px; border:1.5px solid var(--ink);
  background:var(--ink); color:var(--paper); text-decoration:none;
  border-radius:100px; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), background .2s, border-color .2s;
}
.btn:hover{ background:var(--flame); border-color:var(--flame); transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:transparent; border-color:var(--flame); color:var(--flame); }
.btn .ar{ transition:transform .2s; }
.btn:hover .ar{ transform:translateX(4px); }

/* ---------- der durchgehende Faden ---------- */
#page{ position:relative; }
#thread{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.75;
  display:none;                      /* nur wo wirklich Platz ist */
}
@media (min-width:1240px){ #thread{ display:block; } }
#thread path{
  fill:none; stroke:var(--flame); stroke-width:2;
  vector-effect:non-scaling-stroke; stroke-linecap:round;
}
#thread .ghost{ stroke:var(--line); stroke-width:1.5; }

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(10px);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--disp); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; }
.hdr nav{ display:none; gap:28px; }
@media (min-width:960px){ .hdr nav{ display:flex; } }
/* Zwischenbereich: sechs Punkte brauchen weniger Abstand */
@media (min-width:960px) and (max-width:1120px){
  .hdr nav{ gap:19px; }
  .hdr nav a{ font-size:.87rem; }
}
.hdr nav a{ font-size:.92rem; text-decoration:none; color:var(--grey); position:relative; }
.hdr nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:1.5px;
  background:var(--flame); transition:width .25s;
}
.hdr nav a:hover{ color:var(--ink); }
.hdr nav a:hover::after{ width:100%; }

section{ padding-block:80px; position:relative; }
@media (min-width:880px){ section{ padding-block:112px; } }

/* ---------- Hero ---------- */
.hero{ padding-block:44px 0; }
.hero-grid{ display:grid; gap:44px; }
@media (min-width:960px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
}
.hero h1{ margin:20px 0 8px; }

/* handgezeichneter Unterstrich unter dem Schlüsselwort */
.mark{ position:relative; display:inline-block; white-space:nowrap; }
.mark svg{ position:absolute; left:-4%; bottom:-.16em; width:108%; height:.42em; overflow:visible; }
.mark path{
  fill:none; stroke:var(--flame); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
}
.mark.drawn path{ animation:draw 1s cubic-bezier(.3,.9,.4,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero .lead{ margin:22px 0 30px; }
.acts{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- Grafik 1: Baustelle → Seite ---------- */
.build{ width:100%; height:auto; }
.build .frame{ fill:#fff; stroke:var(--ink); stroke-width:1.6; }
.build .blue{ fill:none; stroke:var(--line); stroke-width:1.4; stroke-dasharray:4 4; }
.build .solid{ stroke:none; }
.build .pop{ opacity:0; transform-origin:center; }
.build.go .pop{ animation:pop .55s cubic-bezier(.2,1.1,.4,1) forwards; }
@keyframes pop{ from{ opacity:0; transform:translateY(9px) scale(.97); } to{ opacity:1; transform:none; } }
.build .ln{ stroke-dasharray:var(--l); stroke-dashoffset:var(--l); }
.build.go .ln{ animation:draw 1.1s ease forwards; }
.build .float{ animation:bob 5s ease-in-out infinite; transform-origin:center; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.build .blip{ animation:blip 2.6s ease-in-out infinite; }
@keyframes blip{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---------- Befund-Karten mit Zeichnung ---------- */
.cards{ display:grid; gap:18px; margin-top:40px; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  background:#fff; border:1.5px solid var(--ink); border-radius:18px;
  padding:24px 22px 26px; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:8px 8px 0 var(--ink); }
.card h3{ font-size:1.12rem; margin:18px 0 8px; }
.card p{ font-size:.93rem; color:var(--grey); margin:0; }
.card .ill{ width:66px; height:66px; }
.card .ill [class*="s-"]{ fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.card .ill .s-ink{ stroke:var(--ink); }
.card .ill .s-acc{ stroke:var(--flame); }
.card .ill .s-teal{ stroke:var(--teal); }
.card .ill .f-sun{ fill:var(--sun); stroke:none; }
.card .ill .dash{ stroke-dasharray:var(--l); stroke-dashoffset:var(--l); transition:stroke-dashoffset 1.1s ease .15s; }
.card.in .ill .dash{ stroke-dashoffset:0; }
.card .num{
  position:absolute; top:16px; right:20px; font-family:var(--mono);
  font-size:.72rem; color:var(--line);
}

/* ---------- Höhenlinien Taunus ---------- */
.contours{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.contours path{ fill:none; stroke:var(--teal); stroke-width:1; opacity:.16; }
.region{ background:var(--paper2); overflow:hidden; }

/* ---------- Ablauf: Schiene, die sich beim Scrollen füllt ---------- */
.flow{ position:relative; margin-top:44px; }
.flow ol{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
@media (min-width:900px){ .flow ol{ grid-template-columns:repeat(4,1fr); } }

.step{
  position:relative;
  padding:26px 0 26px 30px;
  border-left:2px solid var(--line);
}
@media (min-width:900px){
  .step{
    padding:30px 26px 0 0;
    border-left:0;
    border-top:2px solid var(--line);
  }
}
/* der gefüllte Teil der Schiene */
.step::before{
  content:""; position:absolute; background:var(--flame);
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
  left:-2px; top:0; width:2px; height:100%;
  transform:scaleY(0); transform-origin:top;
}
@media (min-width:900px){
  .step::before{
    left:0; top:-2px; width:100%; height:2px;
    transform:scaleX(0); transform-origin:left;
  }
}
.step.in::before{ transform:none; }

.step-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.step-n{
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.1em;
  color:var(--grey); transition:color .4s;
}
.step.in .step-n{ color:var(--flame); }

.step-ill{ width:40px; height:40px; flex:0 0 40px; }
.step-ill [class^="d"],.step-ill [class^="a"],.step-ill [class^="p"]{
  fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.step-ill .d1{ stroke:var(--ink); }
.step-ill .a1{ stroke:var(--grey); }
.step-ill .p1{ stroke:var(--flame); }
.step-ill .p2{ stroke:var(--teal); }
.step-ill *{
  stroke-dasharray:200; stroke-dashoffset:200;
  transition:stroke-dashoffset .9s ease;
}
.step.in .step-ill *{ stroke-dashoffset:0; }
.step:nth-child(2) .step-ill *{ transition-delay:.1s }
.step:nth-child(3) .step-ill *{ transition-delay:.2s }
.step:nth-child(4) .step-ill *{ transition-delay:.3s }

.step h4{ font-size:1.06rem; margin-bottom:8px; }
.step p{ font-size:.92rem; color:var(--grey); margin:0 0 14px; max-width:34ch; }
.step-when{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grey);
  border:1px solid var(--line); border-radius:100px; padding:4px 11px;
  display:inline-block;
}

/* ---------- Referenzen ---------- */
.ref{
  display:grid; gap:10px; padding:26px 0; text-decoration:none; color:inherit;
  border-bottom:1.5px solid var(--line); position:relative;
}
.ref:first-of-type{ border-top:1.5px solid var(--line); }
@media (min-width:860px){ .ref{ grid-template-columns:180px 1fr 120px; gap:36px; align-items:center; } }
.ref .br{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); }
.ref h3{ font-size:1.35rem; transition:transform .3s cubic-bezier(.2,.8,.3,1); }
.ref:hover h3{ transform:translateX(8px); color:var(--flame); }
.ref p{ font-size:.93rem; color:var(--grey); margin:5px 0 0; }
.ref .go{ font-family:var(--mono); font-size:.72rem; color:var(--flame); }

/* ---------- dunkler Abschnitt ---------- */
.dark{ background:var(--ink); color:var(--paper); border-radius:26px; margin-inline:var(--gut); overflow:hidden; }
@media (min-width:960px){ .dark{ margin-inline:auto; max-width:calc(var(--max) - 2 * var(--gut)); } }
.dark p{ color:rgba(251,250,247,.68); }
.dark .tag{ color:rgba(251,250,247,.55); }
.dark .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.dark .btn:hover{ background:var(--flame); border-color:var(--flame); color:#fff; }
.dark .orb{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.dark .orb circle{ fill:none; stroke:rgba(255,93,46,.28); stroke-width:1.2; }

/* ---------- Footer ---------- */
footer{ padding-block:52px 32px; margin-top:60px; border-top:1.5px solid var(--line); }
.f-top{ display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; }
.f-links{ display:flex; flex-wrap:wrap; gap:20px; }
.f-links a{ font-size:.92rem; text-decoration:none; color:var(--grey); }
.f-links a:hover{ color:var(--flame); }
.f-bot{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--mono); font-size:.72rem; color:var(--grey); }

/* ---------- Kontaktformular ---------- */
.form-wrap{ display:grid; gap:36px; margin-top:38px; }
@media (min-width:920px){ .form-wrap{ grid-template-columns:1fr 300px; gap:52px; align-items:start; } }

.form{
  background:#fff; border:1.5px solid var(--ink); border-radius:22px;
  padding:28px 24px 30px;
}
@media (min-width:640px){ .form{ padding:34px 32px 36px; } }
.form .row{ display:grid; gap:18px; margin-bottom:18px; }
@media (min-width:640px){ .form .row.two{ grid-template-columns:1fr 1fr; } }

.fld{ position:relative; }
.fld label{
  display:block; font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--grey); margin-bottom:7px;
}
.fld input,.fld select,.fld textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:12px;
  padding:13px 15px; transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.fld textarea{ min-height:130px; resize:vertical; line-height:1.55; }
.fld select{
  background-image: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 1l5 5 5-5' fill='none' stroke='%235E6670' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; background:#fff; border-color:var(--flame);
  box-shadow:0 0 0 3px rgba(255,93,46,.13);
}
.fld input::placeholder,.fld textarea::placeholder{ color:#A9AEB4; }

.consent{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.86rem; color:var(--grey); margin:6px 0 22px; cursor:pointer;
}
.consent input{
  width:19px; height:19px; flex:0 0 19px; margin-top:3px; accent-color:var(--flame); cursor:pointer;
}
.consent a{ color:var(--ink); text-underline-offset:3px; }

.aside-note{
  background:var(--paper2); border-radius:18px; padding:24px 22px;
}
.aside-note h4{ font-size:1.02rem; margin-bottom:10px; }
.aside-note p{ font-size:.9rem; color:var(--grey); margin:0 0 14px; }
.aside-note .pt{ display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; font-size:.9rem; }
.aside-note .pt:last-child{ margin-bottom:0; }
.aside-note .pt svg{ flex:0 0 19px; margin-top:2px; }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.rv.in{ opacity:1; transform:none; }

:focus-visible{ outline:2.5px solid var(--flame); outline-offset:3px; }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:12px 18px; z-index:99; }
.skip:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  .mark path,.build .ln,.card .ill .dash{ stroke-dashoffset:0 !important; }
  .build .pop{ opacity:1; }
}

/* ---------- Schlagwort-Chips ---------- */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.chips li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  padding:6px 12px; border:1.5px solid var(--line); border-radius:100px;
  color:var(--grey); background:var(--paper);
}

/* ---------- Menü auf kleinen Bildschirmen ---------- */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; margin-left:6px;
  background:none; border:0; cursor:pointer;
}
@media (min-width:960px){ .burger{ display:none; } }
.burger span{
  height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobnav{
  display:none; border-top:1.5px solid var(--line);
  background:var(--paper); padding-bottom:18px;
  box-shadow:0 18px 30px -18px rgba(16,20,26,.28);
  max-height:calc(100dvh - 66px); overflow-y:auto;
}
/* Seite dahinter feststellen, solange das Menü offen ist */
body.menu-offen{ overflow:hidden; }
.mobnav.open{ display:block; }
@media (min-width:960px){ .mobnav{ display:none !important; } }
.mobnav ul{ list-style:none; margin:0 0 16px; padding:0; }
.mobnav li{ border-bottom:1px solid var(--line); }
.mobnav li a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; text-decoration:none;
  font-family:var(--disp); font-weight:600; font-size:1.3rem; letter-spacing:-.02em;
}
.mobnav li a::after{ content:"→"; color:var(--flame); font-family:var(--body); font-size:1rem; }
.mobnav .btn{ width:100%; justify-content:center; }

/* ---------- Ablaufschritte (Startseite) ---------- */
.step .dot{ transition:background .3s, border-color .3s, color .3s, transform .3s; }

/* ---------- Rechtstexte ---------- */
.legal-grid{ display:grid; gap:38px; }
@media (min-width:940px){
  .legal-grid{ grid-template-columns:230px minmax(0,1fr); gap:60px; align-items:start; }
  .legal-toc{ position:sticky; top:96px; }
}
.legal-toc h4{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey); margin:0 0 14px;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; border-bottom:1px solid var(--line); }
.legal-toc li:first-child{ border-top:1px solid var(--line); }
.legal-toc a{
  display:flex; gap:12px; padding:11px 0; text-decoration:none;
  font-size:.9rem; color:var(--grey); transition:color .2s;
}
.legal-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:.72rem; color:var(--flame); flex:0 0 auto;
}
.legal-toc a:hover{ color:var(--ink); }

.legal{ max-width:68ch; }
.legal section{ padding:0; border:0; scroll-margin-top:90px; }
.legal > section + section{ margin-top:44px; padding-top:36px; border-top:1.5px solid var(--line); }
.legal h2{
  font-family:var(--disp); font-size:1.35rem; font-weight:600; letter-spacing:-.02em;
  margin:0 0 14px; display:flex; gap:12px; align-items:baseline;
}
.legal h2 .n{ font-family:var(--mono); font-size:.74rem; color:var(--flame); font-weight:500; }
.legal h3{ font-size:1.02rem; margin:22px 0 8px; }
.legal p, .legal li{ color:var(--grey); }
.legal p{ margin:0 0 .9em; }
.legal ul{ margin:0 0 1em; padding-left:20px; }
.legal li{ margin-bottom:6px; }
.legal address{
  font-style:normal; background:var(--paper2); border-radius:14px;
  padding:18px 20px; margin:0 0 16px; color:var(--ink); line-height:1.8;
}
.legal a{ color:var(--ink); text-underline-offset:3px; }
.legal a:hover{ color:var(--flame); }

.ph{
  background:#FFE9E0; color:#A33518; border-radius:5px;
  padding:1px 7px; font-family:var(--mono); font-size:.85em;
  white-space:nowrap;
}
.legal-hint{
  background:#FFF4EF; border:1.5px dashed var(--flame); border-radius:16px;
  padding:18px 20px; margin:0 0 34px; font-size:.93rem; color:var(--ink);
}
.legal-hint b{ display:block; margin-bottom:5px; }
.legal-hint p{ color:var(--ink); margin:0; }
.legal-meta{ font-family:var(--mono); font-size:.72rem; color:var(--grey); margin-top:40px; padding-top:20px; border-top:1.5px solid var(--line); }
.toplink{
  display:inline-flex; align-items:center; gap:8px; margin-top:30px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grey); text-decoration:none;
}
.toplink:hover{ color:var(--flame); }

/* ---------- Ausrichtung des Schriftzugs neben dem Zeichen ----------
   Das Zeichen ist durch den Punkt oben höher als der Buchstabe selbst.
   Ohne Korrektur sitzt der Schriftzug optisch zu hoch. */
.logo .wm{ display:inline-block; transform:translateY(3px); }
@media (max-width:430px){
  .logo{ font-size:.9rem; gap:7px; }
  .logo .wm{ transform:translateY(2px); }
}

/* ---------- Abschnitt Sichtbarkeit in KI-Antworten ---------- */
.geo-grid{ display:grid; gap:28px; margin-top:34px; }
@media (min-width:920px){ .geo-grid{ grid-template-columns:1fr 300px; gap:48px; align-items:start; } }
.geo-txt p{ color:var(--grey); }
.geo-list{ list-style:none; margin:18px 0 0; padding:0; }
.geo-list li{
  position:relative; padding-left:26px; margin-bottom:14px;
  font-size:.95rem; color:var(--grey);
}
.geo-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:10px; height:10px; background:var(--flame); border-radius:2px;
}
.geo-list b{ color:var(--ink); font-weight:600; }
.geo-txt code{
  font-family:var(--mono); font-size:.86em; background:var(--paper2);
  padding:2px 6px; border-radius:5px; color:var(--ink);
}
.geo-card{
  background:var(--ink); color:var(--paper); border-radius:18px; padding:24px 22px;
}
.geo-card-hd{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(251,250,247,.6); margin-bottom:18px;
}
.geo-dot{ width:8px; height:8px; border-radius:50%; background:var(--flame); flex:0 0 8px; }
.geo-check{ list-style:none; margin:0; padding:0; }
.geo-check li{
  position:relative; padding-left:26px; margin-bottom:11px; font-size:.9rem;
  color:rgba(251,250,247,.86);
}
.geo-check li::before{
  content:""; position:absolute; left:2px; top:6px; width:11px; height:6px;
  border-left:2px solid var(--flame); border-bottom:2px solid var(--flame);
  transform:rotate(-45deg);
}
.geo-note{
  margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(251,250,247,.16);
  font-size:.82rem; color:rgba(251,250,247,.6);
}

/* ---------- KI-Teaser auf der Startseite ---------- */
.ki-teaser{
  background:var(--paper2); border-radius:24px; padding:34px 26px;
  display:grid; gap:28px;
}
@media (min-width:900px){
  .ki-teaser{ grid-template-columns:1.35fr 1fr; gap:52px; padding:48px 44px; align-items:center; }
}
.ki-punkte{ list-style:none; margin:0; padding:0; }
.ki-punkte li{
  position:relative; padding:14px 0 14px 34px;
  border-bottom:1px solid var(--line);
  font-family:var(--disp); font-weight:600; font-size:1.02rem; letter-spacing:-.01em;
}
.ki-punkte li:first-child{ border-top:1px solid var(--line); }
.ki-punkte li::before{
  content:""; position:absolute; left:4px; top:20px;
  width:12px; height:12px; background:var(--flame); border-radius:3px;
}

/* ---------- Vier Karten nebeneinander statt drei plus eine ---------- */
@media (min-width:720px){ .cards.vier{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .cards.vier{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Tippflächen auf kleinen Bildschirmen ---------- */
@media (max-width:820px){
  .f-links{ gap:0 20px; }
  .f-links a{ padding:9px 0; }
  .footer .f-bot a, .f-bot a{ padding:6px 0; display:inline-block; }
}

/* ---------- Zertifikate ---------- */
.zert{ display:grid; gap:16px; margin-top:32px; }
@media (min-width:760px){ .zert{ grid-template-columns:1fr 1fr; gap:20px; } }
.zert-karte{
  background:rgba(251,250,247,.05); border:1.5px solid rgba(251,250,247,.18);
  border-radius:18px; padding:24px 22px;
}
.zert-karte h3{
  font-family:var(--disp); font-size:1.08rem; font-weight:600; letter-spacing:-.02em;
  margin:16px 0 8px; color:var(--paper);
}
.zert-karte p{ font-size:.92rem; color:rgba(251,250,247,.68); margin:0; }
.zert-meta{
  display:inline-block; margin-top:14px; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em; color:rgba(251,250,247,.5);
}

/* ---------- Rechtslinks in der Fußzeile ---------- */
.f-recht a{
  color:var(--grey); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.f-recht a:hover{ color:var(--flame); border-color:var(--flame); }
@media (max-width:820px){ .f-recht a{ display:inline-block; padding:6px 0 8px; } }