/* ============================================================
   BÖTTGER XR-SOLUTIONS — gemeinsames Stylesheet
   Genutzt von: bxr-landingpage.html
                leistungen-reality-capturing.html
                leistungen-realtime-3d.html
                leistungen-ar-inspektion.html
                news.html
                impressum.html
                datenschutz.html
   Fokus: 3D allgemein (Reality Capturing · Realtime 3D · SuPAR)
   Corporate Design: Neon Green #0ef57d · Exo 2 / Open Sans
   ============================================================ */

/* ============================================================
   SCHRIFTEN — selbst gehostet
   Beide Familien liegen als Variable Font in fonts/ und decken
   damit den gesamten genutzten Strichstärkenbereich in je einer
   Datei ab. Nicht von fonts.googleapis.com laden: das überträgt
   die IP-Adresse jedes Besuchers an Google (LG München I,
   3 O 17493/20) und macht einen eigenen Abschnitt in der
   Datenschutzerklärung nötig.
   Quelle: Google Fonts, Exo 2 v26 und Open Sans v44,
   SIL Open Font License 1.1 (Lizenztexte in fonts/).
   Subsets latin und latin-ext — mehr braucht die deutsche und
   englische Fassung nicht; Pfeile (→), Anführungszeichen („")
   und ™ liegen im latin-Bereich.
   ============================================================ */
@font-face{
  font-family:"Exo 2";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(exo2-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Exo 2";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(exo2-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:400 700;
  font-stretch:100%;font-display:swap;
  src:url(open-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:400 700;
  font-stretch:100%;font-display:swap;
  src:url(open-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --green:#0ef57d;  --green-dim:#0bc866;  --blue:#2ea3f2;
  --dark:#2b2b2b;   --grey:#757575;       --light:#f4f4f4;  --white:#fff;
  --ink:#121513;    --ink-2:#191d1b;      --ink-3:#222725;
  --maxw:1240px;    --pad:clamp(20px,5vw,48px);  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;overflow-x:hidden;
  background:var(--white);color:var(--grey);
  font-family:"Open Sans",Arial,sans-serif;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Das hidden-Attribut muss jede display-Angabe schlagen. Ohne das
   bleiben per JS ausgeblendete Elemente (Kategoriefilter der
   News-Seite) sichtbar, weil .news-bar/.post selbst display setzen. */
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:"Exo 2","Open Sans",sans-serif;color:var(--dark);margin:0;font-weight:500;line-height:1.2}
h1{font-size:clamp(36px,4.9vw,62px)}
h2{font-size:clamp(29px,3.5vw,46px)}
h3{font-size:clamp(19px,1.5vw,23px);font-weight:600}
p{margin:0 0 1.1em}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

.eyebrow{
  font-family:"Exo 2",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--green);
  margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);flex:none}
.eyebrow.center{justify-content:center}
.lead{font-size:clamp(16px,1.25vw,18px);max-width:64ch}

/* --- Buttons ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Exo 2",sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.6px;text-transform:uppercase;
  padding:15px 30px;border-radius:var(--r);border:2px solid transparent;
  transition:.25s ease;cursor:pointer;
}
.btn-primary{background:var(--green);color:var(--dark);border-color:var(--green)}
.btn-primary:hover{background:transparent;color:var(--green);box-shadow:0 0 28px rgba(14,245,125,.28)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn .arw{transition:transform .25s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ============================ HEADER ======================== */
/* Konstante Höhe: das Animieren von padding erzwingt Layout-Neuberechnung.
   Der Scroll-Zustand wird allein über Hintergrund und Schatten gezeigt. */
header{
  position:fixed;inset:0 0 auto 0;z-index:100;padding:18px 0;
  background:linear-gradient(to bottom,rgba(18,21,19,.75),transparent);
  transition:background .3s ease,box-shadow .3s ease;
}
header.stuck{background:rgba(18,21,19,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo img{height:34px;width:auto;filter:invert(1)}
.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu a{
  font-family:"Exo 2",sans-serif;font-size:14px;font-weight:500;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(255,255,255,.85);padding:6px 0;position:relative;transition:color .2s;
}
/* scaleX statt width: läuft auf dem Compositor, ohne Layout anzustoßen. */
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.menu a:hover{color:#fff}
.menu a:hover::after{transform:scaleX(1)}
.nav .btn{padding:11px 22px;font-size:13px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.25s ease}
.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)}
.mobile-nav{display:none;background:rgba(18,21,19,.98);backdrop-filter:blur(14px)}
.mobile-nav.open{display:block}
.mobile-nav ul{list-style:none;margin:0;padding:18px var(--pad) 26px;display:grid;gap:2px}
.mobile-nav a{
  display:block;padding:13px 0;color:rgba(255,255,255,.88);
  font-family:"Exo 2",sans-serif;font-size:16px;letter-spacing:1px;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-nav a:last-child{border-bottom:0;color:var(--green)}

/* ============================ HERO ========================== */
.hero{min-height:100svh;display:flex;align-items:center;background:var(--ink);overflow:hidden;padding:140px 0 0}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(85% 70% at 92% 30%,rgba(14,245,125,.13),transparent 62%),
    linear-gradient(100deg,var(--ink) 8%,rgba(18,21,19,.86) 46%,rgba(18,21,19,.42) 100%);
}
.grid-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);
}
.hero-inner{position:relative;z-index:2;width:100%;min-width:0;padding-bottom:56px}
.hero h1{color:#fff;max-width:17ch;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .claim{
  font-family:"Exo 2",sans-serif;font-weight:500;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:5px;text-transform:uppercase;color:var(--green);margin:0 0 18px;
}
.hero p.lead{color:rgba(255,255,255,.78);max-width:58ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* Überblick im Hero-Fuß: die drei Kompetenzfelder — identisch benannt
   und nummeriert wie die Karten und die Sektions-Eyebrows weiter unten.
   Prozessverben (erfassen/aufbereiten/anwenden) bleiben der Ablauf-
   Sektion vorbehalten, damit sich die Nummerierungen nicht überlagern. */
.chain{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.12);
  margin-top:56px;padding-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.chain .c{display:flex;gap:14px;align-items:flex-start}
.chain .i{
  width:38px;height:38px;border:1px solid rgba(14,245,125,.5);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--green);
  font-family:"Exo 2",sans-serif;font-size:13px;font-weight:700;
}
.chain .k{display:block;font-family:"Exo 2",sans-serif;font-size:17px;font-weight:600;color:#fff;line-height:1.3}
.chain .t{display:block;font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.5;margin-top:2px}

/* ==================== KUNDEN + PARTNER ====================== */
.clients{background:var(--ink-2);padding:32px 0;border-top:1px solid rgba(255,255,255,.07)}
.clients .row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.clients .label{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.8px;
  text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;
}
.clients ul{display:flex;align-items:center;gap:clamp(26px,4vw,56px);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.clients img{height:36px;width:auto;object-fit:contain}
.partner-pill{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  border:1px solid rgba(14,245,125,.45);border-radius:100px;padding:9px 18px;
  font-family:"Exo 2",sans-serif;font-size:13px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--green);background:rgba(14,245,125,.07);
}
.partner-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ====================== KOMPETENZFELDER ===================== */
.fields{background:var(--white);padding:clamp(80px,9vw,130px) 0}
.sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:52px}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{
  position:relative;overflow:hidden;border-radius:var(--r);min-height:430px;
  display:flex;align-items:flex-end;background:var(--ink);isolation:isolate;
}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pillar::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(18,21,19,.95) 14%,rgba(18,21,19,.55) 54%,rgba(18,21,19,.2) 100%);
  transition:background .35s ease;
}
.pillar:hover img{transform:scale(1.06)}
.pillar:hover::after{background:linear-gradient(to top,rgba(11,40,26,.96) 14%,rgba(18,21,19,.6) 60%,rgba(18,21,19,.25) 100%)}
.pillar .body{padding:32px;position:relative}
.pillar .num{font-family:"Exo 2",sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;color:var(--green);display:block;margin-bottom:10px}
.pillar h3{color:#fff;margin-bottom:10px}
.pillar p{color:rgba(255,255,255,.72);font-size:15px;margin:0 0 14px}
.pillar ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.pillar li{color:rgba(255,255,255,.62);font-size:14px;display:flex;gap:9px;align-items:baseline}
.pillar li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.pillar .more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Exo 2",sans-serif;font-size:13px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--green);
}
.pillar:hover .more .arw{transform:translateX(5px)}
.pillar .arw{transition:transform .25s}

/* ==================== REALITY CAPTURING ===================== */
.capture{background:var(--ink);color:rgba(255,255,255,.75);padding:clamp(80px,9vw,130px) 0}
.capture::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 55% at 85% 0%,rgba(14,245,125,.10),transparent 62%)}
.capture .wrap{position:relative;z-index:1}
.capture h2,.capture h3{color:#fff}

.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:56px}
.method{border:1px solid rgba(255,255,255,.13);border-radius:var(--r);overflow:hidden;background:var(--ink-2);transition:.3s ease}
.method:hover{border-color:rgba(14,245,125,.5);transform:translateY(-4px)}
.mfig{position:relative;height:190px;overflow:hidden}
.mfig img{width:100%;height:100%;object-fit:cover;opacity:.62}
/* Scan-Overlay: Punktraster + Scanlinie — macht „Erfassung" sichtbar */
.mfig::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,245,125,.55) 1px,transparent 1.4px);
  background-size:11px 11px;
  mask-image:linear-gradient(120deg,#000 15%,transparent 85%);
}
/* .raw = das Bild ist bereits eine echte Punktwolke — kein Kunst-Raster
   darüberlegen, dafür weniger abdunkeln, damit die Punkte lesbar bleiben. */
.mfig.raw::after{display:none}
.mfig.raw img{opacity:.92}
.mfig .tag{
  position:absolute;left:16px;top:16px;z-index:2;background:rgba(18,21,19,.85);
  border:1px solid rgba(14,245,125,.5);color:var(--green);border-radius:3px;
  font-family:"Exo 2",sans-serif;font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;padding:5px 10px;
}
.method .mbody{padding:26px}
.method h3{font-size:20px;margin-bottom:10px}
.method p{font-size:14.5px;color:rgba(255,255,255,.7);margin:0 0 14px}
.method dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.method dt{color:rgba(255,255,255,.42);white-space:nowrap}
.method dd{margin:0;color:rgba(255,255,255,.8)}

/* Vergleichstabelle */
.tblwrap{overflow-x:auto;border:1px solid rgba(255,255,255,.13);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px}
/* Die Caption sitzt innerhalb des gerahmten .tblwrap und braucht daher
   dieselben Innenabstände wie die Zellen. */
caption{
  text-align:left;padding:16px 20px;color:rgba(255,255,255,.6);
  font-size:14px;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.09);
}
th,td{padding:15px 20px;text-align:left;border-bottom:1px solid rgba(255,255,255,.09)}
thead th{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green);font-weight:700;background:rgba(255,255,255,.03);
}
tbody th{font-family:"Exo 2",sans-serif;font-size:16px;font-weight:600;color:#fff}
td{color:rgba(255,255,255,.72)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
/* Fussnote unter der Tabelle — sitzt ausserhalb des Rahmens, greift aber
   Groesse und Farbe der Caption auf. */
.tblnote{margin:10px 2px 0;color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.6}
.tblnote sup{color:var(--green)}
tbody tr:hover td,tbody tr:hover th{background:rgba(14,245,125,.045)}

/* ====================== REALTIME 3D ========================= */
.realtime{background:var(--white);padding:clamp(80px,9vw,130px) 0}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.use{
  border:1px solid #e6e6e6;border-radius:var(--r);padding:30px 26px;
  background:var(--white);position:relative;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.use:hover{border-color:var(--green);box-shadow:0 18px 40px rgba(0,0,0,.07);transform:translateY(-4px)}
.use svg{width:34px;height:34px;stroke:var(--green);fill:none;stroke-width:1.6;margin-bottom:18px}
.use h3{font-size:19px;margin-bottom:8px}
.use p{font-size:14.5px;margin:0}

/* Plattform-Panel („Alles läuft im Browser") */
.platform{
  margin-top:26px;background:var(--ink);border-radius:var(--r);
  padding:clamp(32px,4vw,46px);color:rgba(255,255,255,.72);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center;
  position:relative;overflow:hidden;
}
.platform::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 100% 0%,rgba(14,245,125,.14),transparent 60%);
}
.platform>*{position:relative;z-index:1}
.platform h3{color:#fff;font-size:clamp(22px,2.1vw,28px);margin-bottom:12px}
.platform p{font-size:15.5px;margin:0}
.platform p+p{margin-top:14px}
.platform ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.platform li{
  display:flex;gap:12px;align-items:center;color:#fff;
  font-family:"Exo 2",sans-serif;font-size:15.5px;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px;
}
.platform li:last-child{border-bottom:0;padding-bottom:0}
.platform li::before{
  content:"";width:16px;height:9px;flex:none;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg) translateY(-3px);
}

/* ========================== SuPAR =========================== */
.supar{background:var(--ink-2);color:rgba(255,255,255,.75);padding:clamp(80px,9vw,130px) 0;overflow:hidden}
.supar::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 8% 50%,rgba(14,245,125,.12),transparent 60%)}
.supar .wrap{position:relative;z-index:1}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,80px);align-items:center}
.supar h2{color:#fff;margin-bottom:18px}
.supar h2 .tm{font-size:.5em;vertical-align:super;color:var(--green)}
.supar-visual{position:relative}
.supar-visual img{border-radius:var(--r);width:100%;height:500px;object-fit:cover}
.supar-visual .frame{position:absolute;inset:auto -20px -20px auto;width:60%;height:58%;border:2px solid var(--green);border-radius:var(--r);z-index:-1;opacity:.5}
/* Kennzahl-Hervorhebung im Teaser — die Betonung kommt aus Größe und
   Farbe des Werts, nicht aus einem farbigen Balken an der Seite. */
.stat{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:28px 0 30px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);font-size:15px;
}
.stat strong{
  font-family:"Exo 2",sans-serif;font-size:clamp(34px,3.4vw,46px);
  font-weight:700;color:var(--green);line-height:1;letter-spacing:-.01em;
}

/* ======================= TESTIMONIAL ======================== */
.quote{background:var(--light);padding:clamp(76px,8vw,110px) 0}
.qbox{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,4vw,54px);align-items:center}
.qbox .ph{position:relative;flex:none;width:150px;height:150px;justify-self:start}
.qbox .ph img{display:block;width:150px;height:150px;border-radius:50%;object-fit:cover;background:#dedede}
.qbox .ph::after{content:"";position:absolute;inset:-9px;border:2px solid var(--green);border-radius:50%;clip-path:polygon(0 0,58% 0,58% 100%,0 100%)}
blockquote{margin:0;font-family:"Exo 2",sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,29px);line-height:1.45;color:var(--dark)}
blockquote::before{content:"„";color:var(--green);font-size:1.1em;line-height:0}
.qmeta{margin-top:20px;font-size:14.5px}
.qmeta strong{color:var(--dark);font-family:"Exo 2",sans-serif;font-size:16px;display:block}

/* ========================= PROZESS ========================== */
.process{background:var(--white);padding:clamp(80px,9vw,130px) 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:linear-gradient(90deg,var(--green),rgba(14,245,125,.15))}
.step{position:relative;padding-top:62px}
.step .n{
  position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;
  background:var(--white);border:2px solid var(--green);color:var(--dark);
  display:grid;place-items:center;font-family:"Exo 2",sans-serif;font-weight:700;font-size:15px;
}
.step h3{margin-bottom:8px;font-size:19px}
.step p{font-size:14.5px;margin:0}

/* =========================== CTA ============================ */
.cta{background:var(--ink);padding:clamp(80px,9vw,120px) 0;text-align:center;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 50% 115%,rgba(14,245,125,.28),transparent 65%),
             linear-gradient(180deg,var(--ink-2),var(--ink));
}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:rgba(255,255,255,.72);max-width:56ch;margin:0 auto 32px}

/* ========================== FOOTER ========================== */
footer{background:#0d100e;color:rgba(255,255,255,.55);padding:70px 0 30px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px}
footer img.flogo{height:34px;width:auto;filter:invert(1);margin-bottom:18px}
footer h4{color:#fff;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:18px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a:hover{color:var(--green)}
footer .green{color:var(--green)}
.fbottom{
  margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.38);
}

/* ======================= ANIMATIONEN ======================== */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .rv.in{opacity:1;transform:none}

/* ======================== RESPONSIVE ======================== */
@media(max-width:1080px){
  .pillars,.methods,.uses{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:40px}
  .steps::before{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .chain{grid-template-columns:1fr;gap:16px}
}
@media(max-width:860px){
  .menu{display:none}
  .burger{display:block}
  .nav .btn{display:none}
  .split,.sec-head,.platform{grid-template-columns:1fr;gap:36px}
  .sec-head{align-items:start}
  .pillars,.methods,.uses{grid-template-columns:1fr}
  .qbox{grid-template-columns:1fr}
  .supar-visual img{height:340px}
  .supar-visual .frame,.supar-visual .ar{display:none}
  .hero{padding-top:120px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   UNTERSEITEN (Leistungs-Detailseiten)
   Eigene Bausteine, gleiche Tokens wie die Landing Page.
   ============================================================ */

/* --- Kompakter Seitenkopf ------------------------------------ */
.subhero{
  position:relative;background:var(--ink);overflow:hidden;
  padding:clamp(140px,16vw,190px) 0 clamp(56px,7vw,84px);
}
.subhero-media{position:absolute;inset:0;z-index:0}
.subhero-media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.subhero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(75% 80% at 88% 20%,rgba(14,245,125,.16),transparent 60%),
    linear-gradient(95deg,var(--ink) 18%,rgba(18,21,19,.9) 55%,rgba(18,21,19,.55) 100%);
}
.subhero-inner{position:relative;z-index:2;min-width:0}
.subhero h1{color:#fff;max-width:15ch;margin-bottom:22px}
.subhero .lead{color:rgba(255,255,255,.78);max-width:60ch;margin-bottom:0}

/* Brotkrumen */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  list-style:none;margin:0 0 22px;padding:0;
  font-family:"Exo 2",sans-serif;font-size:13px;letter-spacing:.6px;
  color:rgba(255,255,255,.5);
}
.crumb a{color:rgba(255,255,255,.72);transition:color .2s}
.crumb a:hover{color:var(--green)}
.crumb li+li::before{content:"/";margin-right:10px;color:rgba(255,255,255,.28)}
.crumb [aria-current]{color:var(--green)}

/* --- Wechselseitige Inhaltsblöcke ---------------------------- */
/* Bewusst kein Karten-Raster: jedes Verfahren bekommt eine eigene
   Zeile mit Bild, damit die Seite gelesen und nicht überflogen wird. */
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,72px);align-items:center;
  padding:clamp(56px,7vw,88px) 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.feature:first-of-type{border-top:0}
/* Sprungziele der Messeflyer-QR-Codes (boettger-xr.de/demo/… leitet auf
   #punktwolke, #splat, #rundgang, #webapp, #vr weiter). Der Header ist
   position:fixed und misst gemessen 78px (375px breit) bis 85px (Desktop) —
   ohne scroll-margin-top verschwindet die Oberkante des Blocks darunter.
   Derselbe Wert wie bei .prose>h2; dort mitziehen. */
.feature[id]{scroll-margin-top:104px}
.feature.flip .feature-media{order:2}
.feature-media{position:relative;min-width:0}
.feature-media img{
  width:100%;height:clamp(280px,32vw,420px);object-fit:cover;border-radius:var(--r);
}
.feature-media figcaption{
  margin-top:10px;font-size:12.5px;color:var(--grey);line-height:1.5;
}

/* Live-Beispiele anstelle eines Bildes.
   Der eigene Viewer wird direkt eingebettet, Matterport und YouTube
   erst nach Klick — sonst überträgt bereits der Seitenaufruf Daten an
   die Anbieter. Gleiches Seitenverhältnis wie die Bilder daneben. */
.embed{
  position:relative;aspect-ratio:16/9;
  border-radius:var(--r);overflow:hidden;background:var(--ink);
}
/* Auch selbst gehostete Videos füllen den Rahmen. Sie brauchen keine
   Consent-Schicht — die Datei liegt auf unserem eigenen Server —, aber
   preload="none": ohne das lädt schon der Seitenaufruf zweistellige MB. */
.embed iframe,.embed video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.embed video{object-fit:cover;background:var(--ink)}
/* Nur die Klickfläche bekommt eine Kontur — der eigene Viewer bringt
   seinen eigenen Rahmen schon mit. */
.embed-consent{border:1px solid rgba(14,245,125,.28)}
/* Der eigene Viewer hat intern eine Mindesthöhe von 360 px. Ist der
   Rahmen flacher — bei 16:9 in einer halben Spalte ist er das —,
   scrollt die Karte im iframe und die Bedienleisten verschwinden.
   Deshalb feste Höhe statt Seitenverhältnis, Untergrenze mit Reserve. */
/* Kein Seitenverhältnis: zusammen mit einer Mindesthöhe würde Chrome
   die Breite aus dem Verhältnis ableiten und der Rahmen liefe aus der
   Spalte heraus. */
.embed-app{aspect-ratio:auto;height:clamp(400px,30vw,460px)}
.embed-load{
  position:absolute;inset:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;cursor:pointer;font:inherit;border:0;color:#fff;
  background:radial-gradient(circle at 50% 44%,rgba(14,245,125,.16),var(--ink) 72%);
  transition:background .3s ease;
}
.embed-load:hover,.embed-load:focus-visible{
  background:radial-gradient(circle at 50% 44%,rgba(14,245,125,.28),var(--ink) 72%);
}
/* Vorschaubild hinter der Klickfläche. Es liegt selbst gehostet in
   media/ — ein Standbild vom Anbieter zu verlinken würde genau die
   Verbindung aufbauen, die das Click-to-Load verhindern soll.
   Die Klickfläche liegt im Markup danach und damit darüber; sie
   bekommt statt des vollflächigen Verlaufs nur noch einen Schleier,
   der dunkel genug für weiße Schrift bleibt. */
.embed-thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.embed-has-thumb .embed-load{
  background:
    linear-gradient(180deg,rgba(18,21,19,.62),rgba(18,21,19,.84)),
    radial-gradient(circle at 50% 44%,rgba(14,245,125,.2),transparent 70%);
}
.embed-has-thumb .embed-load:hover,
.embed-has-thumb .embed-load:focus-visible{
  background:
    linear-gradient(180deg,rgba(18,21,19,.5),rgba(18,21,19,.68)),
    radial-gradient(circle at 50% 44%,rgba(14,245,125,.3),transparent 70%);
}
.embed-load:focus-visible{outline:2px solid var(--green);outline-offset:-5px}
.embed-src{
  font-family:"Exo 2",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--green);
}
.embed-play{
  width:58px;height:58px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--green);color:var(--green);
  transition:transform .25s ease,box-shadow .25s ease;
}
.embed-load:hover .embed-play,
.embed-load:focus-visible .embed-play{transform:scale(1.08);box-shadow:0 0 28px rgba(14,245,125,.35)}
.embed-title{font-family:"Exo 2",sans-serif;font-size:19px;font-weight:600;color:#fff}
.embed-note{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6);max-width:44ch}
@media(prefers-reduced-motion:reduce){
  .embed-load,.embed-play{transition:none}
  .embed-load:hover .embed-play,
  .embed-load:focus-visible .embed-play{transform:none}
}

.feature-body{min-width:0}
.feature-body h2{margin-bottom:14px}
.feature-body>p{max-width:56ch}

/* Faktenliste innerhalb eines Blocks */
.facts{
  margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(0,0,0,.1);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;
}
.facts div{min-width:0}
.facts dt{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--green-dim);margin-bottom:4px;
}
.facts dd{margin:0;font-size:15px;color:var(--dark)}

/* Dunkle Variante der Blöcke */
.on-dark{background:var(--ink);color:rgba(255,255,255,.74)}
.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .feature{border-top-color:rgba(255,255,255,.12)}
.on-dark .facts{border-top-color:rgba(255,255,255,.14)}
.on-dark .facts dd{color:rgba(255,255,255,.86)}
.on-dark .facts dt{color:var(--green)}
.on-dark .feature-media figcaption{color:rgba(255,255,255,.5)}

/* --- Redaktionelle Liste (sekundäre Punkte, bewusst ohne Bild) -- */
.editorial{list-style:none;margin:0;padding:0;border-top:1px solid rgba(0,0,0,.1)}
.editorial li{
  display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);align-items:baseline;
  padding:26px 0;border-bottom:1px solid rgba(0,0,0,.1);
}
.editorial h3{font-size:20px;margin:0}
.editorial p{margin:0;font-size:15px}
.on-dark .editorial,.on-dark .editorial li{border-color:rgba(255,255,255,.12)}

/* --- Kurzliste mit Haken („Auf einen Blick") ------------------ */
/* Zweispaltige Aufzählung statt Kachelraster: die Punkte sind
   gleichrangig und kurz, Karten würden ihnen ein Gewicht geben,
   das sie nicht tragen. Haken wie im Plattform-Panel. */
.checklist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4vw,64px);
}
.checklist li{
  display:flex;gap:13px;align-items:baseline;
  font-family:"Exo 2",sans-serif;font-size:16px;color:var(--dark);
  padding:14px 0;border-bottom:1px solid rgba(0,0,0,.1);
}
.checklist li::before{
  content:"";width:16px;height:9px;flex:none;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg) translateY(-2px);
}
.on-dark .checklist li{color:#fff;border-bottom-color:rgba(255,255,255,.12)}

/* --- Ergebnis-/Übergabeliste --------------------------------- */
.deliver{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;
}
.deliver div{background:var(--ink);padding:28px 26px}
.deliver h3{font-size:18px;margin-bottom:8px}
.deliver p{margin:0;font-size:14.5px;color:rgba(255,255,255,.68)}

/* --- Seitenwechsel am Fuß ------------------------------------ */
.pagenav{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:clamp(50px,6vw,72px) 0;
}
.pagenav a{
  display:block;border:1px solid #e2e2e2;border-radius:var(--r);
  padding:26px 28px;transition:.3s ease;
}
.pagenav a:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.07)}
.pagenav .dir{
  display:block;font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--grey);margin-bottom:8px;
}
.pagenav .ttl{font-family:"Exo 2",sans-serif;font-size:21px;font-weight:600;color:var(--dark)}
.pagenav .next{text-align:right}

/* --- Aktiver Navigationspunkt -------------------------------- */
.menu a[aria-current]{color:var(--green)}
.menu a[aria-current]::after{transform:scaleX(1)}
.mobile-nav a[aria-current]{color:var(--green)}

@media(max-width:900px){
  .feature{grid-template-columns:1fr;gap:28px;padding:44px 0}
  .feature.flip .feature-media{order:0}
  .deliver{grid-template-columns:1fr}
  .editorial li{grid-template-columns:1fr;gap:8px}
  .pagenav{grid-template-columns:1fr}
  .pagenav .next{text-align:left}
}
@media(max-width:560px){
  .facts,.checklist{grid-template-columns:1fr}
}

/* ============================================================
   SEITENKOPF OHNE BILD (News, Impressum, Datenschutz)
   Diese Seiten bekommen bewusst kein Motiv: es gäbe nur einen
   weiteren Unsplash-Platzhalter, und der Kopf soll hier nicht
   mit dem Inhalt konkurrieren. Verlauf und Raster tragen allein.
   ============================================================ */
.subhero.plain{padding-bottom:clamp(44px,5vw,64px)}
.subhero.plain::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 90% at 88% 8%,rgba(14,245,125,.15),transparent 62%),
    linear-gradient(180deg,var(--ink),var(--ink-2));
}
.subhero.plain h1{max-width:20ch}

/* ============================================================
   NEWS (news.html)
   Die Beiträge kommen zur Laufzeit aus der WordPress-REST-API
   von boettger-xr.de — Aufbau der Karten siehe bxr-app.js.
   ============================================================ */
.news{background:var(--white);padding:clamp(56px,7vw,88px) 0 clamp(70px,8vw,110px)}

/* Filter über den Kategorien der geladenen Beiträge. Wird erst
   eingeblendet, wenn wirklich mehr als eine Kategorie da ist. */
.news-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.1);
}
.news-bar .label{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--grey);margin-right:4px;
}
.chip{
  font-family:"Exo 2",sans-serif;font-size:13px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;color:var(--dark);background:transparent;cursor:pointer;
  border:1px solid #dcdcdc;border-radius:100px;padding:8px 18px;transition:.25s ease;
}
.chip:hover{border-color:var(--green);color:var(--green-dim)}
.chip[aria-pressed="true"]{
  border-color:var(--green);background:rgba(14,245,125,.12);color:var(--green-dim);
}
.chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}

.post{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #e6e6e6;border-radius:var(--r);background:var(--white);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.post:hover{border-color:var(--green);box-shadow:0 18px 40px rgba(0,0,0,.07);transform:translateY(-4px)}
.post-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-2);flex:none}
.post-fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.post:hover .post-fig img{transform:scale(1.05)}
/* Beiträge ohne Beitragsbild bekommen kein leeres Loch, sondern
   dasselbe Raster wie der Seitenkopf. */
.post-fig.empty{background:
  linear-gradient(140deg,var(--ink),var(--ink-3)),
  radial-gradient(60% 80% at 80% 10%,rgba(14,245,125,.2),transparent 60%)}
.post-cat{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(18,21,19,.85);border:1px solid rgba(14,245,125,.5);color:var(--green);
  border-radius:3px;padding:5px 10px;
  font-family:"Exo 2",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
}
.post-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-date{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--grey);margin-bottom:10px;
}
.post h3{font-size:20px;margin-bottom:10px;line-height:1.3}
.post h3 a{transition:color .2s ease}
/* Die ganze Karte ist klickbar, der Titel bleibt trotzdem der
   eigentliche Link — sonst hätte die Karte kein Ziel für Tastatur
   und Screenreader. */
.post h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post:hover h3 a{color:var(--green-dim)}
.post p{font-size:14.5px;margin:0 0 18px}
.post .more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:"Exo 2",sans-serif;font-size:13px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--green-dim);
}
.post .arw{transition:transform .25s ease}
.post:hover .arw{transform:translateX(5px)}
.post h3 a:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* Ladezustand: Platzhalterkarten in der Größe der echten Karten,
   damit beim Eintreffen der Daten nichts springt. */
.post.skeleton{pointer-events:none}
.post.skeleton .post-fig{background:#ececec}
.post.skeleton .bar{height:13px;border-radius:3px;background:#ececec;margin-bottom:12px}
.post.skeleton .bar.t{height:20px;width:80%}
.post.skeleton .bar.s{width:55%}
@media(prefers-reduced-motion:no-preference){
  .post.skeleton .post-fig,.post.skeleton .bar{animation:pulse 1.5s ease-in-out infinite}
}
@keyframes pulse{50%{opacity:.45}}

/* Hinweiskasten für „keine Verbindung" und <noscript>.
   Kein farbiger Seitenbalken — der Akzent sitzt in der Überschrift. */
.news-note{
  border:1px solid #e2e2e2;border-radius:var(--r);
  padding:26px 28px;background:var(--light);max-width:60ch;
}
.news-note h3{
  font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:12px;
}
.news-note h3::before{content:"";width:26px;height:2px;background:var(--green);flex:none}
.news-note p{margin:0 0 14px;font-size:15px}
.news-note p:last-child{margin-bottom:0}
.news-more{margin-top:40px;text-align:center}

/* ============================================================
   RECHTSTEXTE (Impressum, Datenschutz)
   Fließtext mit Sprungmarken statt Kacheln: diese Seiten werden
   gesucht, nicht überflogen.
   ============================================================ */
.legal{background:var(--white);padding:clamp(56px,7vw,88px) 0 clamp(70px,8vw,110px)}
.legal-layout{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(36px,5vw,72px);align-items:start;
}
/* Inhaltsverzeichnis */
.toc{position:sticky;top:104px}
.toc h2{
  font-family:"Exo 2",sans-serif;font-size:12px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--grey);margin-bottom:16px;
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:toc}
.toc a{
  display:block;padding:7px 0 7px 30px;position:relative;
  font-size:14px;line-height:1.45;color:var(--grey);transition:color .2s ease;
}
.toc li{counter-increment:toc}
.toc a::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:7px;
  font-family:"Exo 2",sans-serif;font-size:12px;font-weight:700;color:var(--green-dim);
}
.toc a:hover{color:var(--dark)}

.prose{max-width:74ch;min-width:0}
.prose>h2{
  font-size:clamp(21px,2vw,26px);margin:clamp(44px,5vw,60px) 0 14px;
  padding-top:clamp(30px,4vw,40px);border-top:1px solid rgba(0,0,0,.1);
  scroll-margin-top:104px;
}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:17px;margin:26px 0 8px}
.prose p{margin:0 0 1.1em}
.prose a:not(.btn){color:var(--green-dim);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--dark)}
.prose ul{list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:9px}
.prose ul li{display:flex;gap:12px;align-items:baseline}
.prose ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.prose strong{color:var(--dark)}
.prose address{font-style:normal;line-height:1.8}
.prose code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.9em;
  background:var(--light);border:1px solid #e2e2e2;border-radius:3px;padding:1px 6px;
  color:var(--dark);
  /* Als Ganzes umbrechen: ein mitten im Hostnamen getrenntes
     "fonts.gstati / c.com" liest sich wie ein Tippfehler. */
  white-space:nowrap;overflow-wrap:break-word;
}

/* Hervorgehobener Block: Verantwortlicher, Kontaktadresse */
.legal-card{
  border:1px solid #e2e2e2;border-radius:var(--r);background:var(--light);
  padding:26px 28px;margin:0 0 1.4em;
}
.legal-card p:last-child{margin-bottom:0}

/* Begriff/Erklärung, z. B. Zweck – Rechtsgrundlage – Speicherdauer */
.legal-dl{
  margin:18px 0 1.4em;padding:20px 0 0;border-top:1px solid rgba(0,0,0,.1);
  display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:12px 26px;
}
.legal-dl dt{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--green-dim);padding-top:3px;
}
.legal-dl dd{margin:0;font-size:15px;color:var(--dark)}

.legal-updated{
  margin-top:clamp(44px,5vw,60px);padding-top:24px;
  border-top:1px solid rgba(0,0,0,.1);font-size:13.5px;color:var(--grey);
}

@media(max-width:1080px){
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:36px}
  .toc{position:static;border:1px solid #e2e2e2;border-radius:var(--r);padding:22px 24px}
  .prose{max-width:none}
}
@media(max-width:660px){
  .news-grid{grid-template-columns:1fr}
  .legal-dl{grid-template-columns:1fr;gap:4px 0}
  .legal-dl dd{margin-bottom:12px}
}

/* ============================================================
   DIVI-BRÜCKE
   Gilt nur auf den Seiten, die dieses Stylesheet laden — es wird
   über einen <link> im Seiteninhalt eingebunden, nicht global.
   Deshalb kann #main-header{display:none} die uebrige Live-Site
   nicht treffen. Beim Rueckbau auf reine HTML-Auslieferung ist
   dieser Block ersatzlos loeschbar; darueber steht nichts, was
   von ihm abhaengt.
   ============================================================ */

/* Divis eigenes Chrome ausblenden. Der Header ist auf dieser
   Instanz der klassische Theme-Header (#main-header), NICHT ein
   Theme-Builder-Layout; der Footer dagegen kommt aus dem TB
   (.et-l--footer). Beide werden durch unseren eigenen ersetzt. */
#main-header,#top-header,.et-l--footer,#sidebar,.et_pb_scroll_top{display:none!important}
#page-container{padding-top:0!important;margin-top:0!important}

/* Vorsichtsregel: aeltere Seiten tragen noch das Divi-4-Altmeta
   page_layout:et_right_sidebar, und post_meta ist per MCP nicht
   setzbar. Ohne das hier rendert der Inhalt in einer schmalen Spalte. */
#left-area{width:100%!important;padding:0!important}

/* Sections und Rows liefern das Geruest, nicht die Abstaende —
   die kommen aus unseren eigenen Sektionsregeln weiter oben. */
/* KEIN pauschaler Polsterungs-Reset auf .bxr-sec: Sections wie .subhero
   und .legal bringen ihre eigene Polsterung mit, und unser Stylesheet
   laedt nach Divis — sie gewinnen also ohnehin. Ein Reset hier wuerde
   sie mitnehmen (genau das ist am 2026-08-20 passiert: der Seitenkopf
   verlor seine 140px und die Brotkrumen lagen unter dem Header).
   Zurueckgesetzt wird nur, was keine eigene Polsterung hat. */
.bxr-pagenav-sec.et_pb_section{padding:0!important}
/* KEIN pauschales background:transparent auf .bxr-sec — dieselbe Falle wie
   beim Polsterungs-Reset: Sections wie .hero und .legal setzen ihren
   Hintergrund selbst, und .bxr-sec.et_pb_section (0,2,0) schlaegt .hero
   (0,1,0). Der Hero stand dadurch auf Weiss statt auf --ink. */
/* Die Row liefert Breite und seitliche Polsterung. Vertikal wird auf 0
   gesetzt (Divi bringt eigene mit), aber NICHT gesperrt: Hilfsklassen und
   Entwurfsklassen wie .feature muessen sie setzen koennen. Weil diese
   Regel 0,2,0 hat, brauchen sie den .et_pb_row-Zusatz — siehe unten. */
.bxr-wrap.et_pb_row{
  width:100%!important;max-width:var(--maxw)!important;
  padding-left:var(--pad)!important;padding-right:var(--pad)!important;
  padding-top:0;padding-bottom:0;
}
.bxr-wrap.et_pb_row .et_pb_column{margin-bottom:0!important}

/* Divi setzt auf h1–h6 und p eigene Groessen mit hoher Spezifitaet.
   Die verdoppelte Klasse hebt unsere Regeln darueber, ohne pauschal
   !important zu streuen. */
.bxr.bxr h1,.bxr.bxr h2,.bxr.bxr h3,.bxr.bxr h4{font-family:"Exo 2",sans-serif;color:inherit}
.bxr.bxr p{font-family:"Open Sans",sans-serif}

/* Tabellenregeln aus dem Basisteil gescoped wiederholen, damit sie
   nichts ausserhalb unserer Code-Module treffen. */
/* Der Entwurf setzt Tabellen UNQUALIFIZIERT (table, th, td, caption) —
   Spezifitaet 0,0,1. Divi styled sie ueber .entry-content und gewinnt
   damit ausnahmslos: die Zellenpolsterung (15px 20px) fiel weg, die
   Vergleichstabelle war dadurch 47px flacher, und Divi haengte ihr
   zusaetzlich 15px Aussenabstand an. Die verdoppelte Klasse hebt uns auf
   0,3,0 und damit darueber. Werte sind Kopien aus dem Basisteil oben —
   bei Aenderungen dort hier mitziehen. */
.bxr-sec.bxr-sec table{
  border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px;margin:0;
}
.bxr-sec.bxr-sec caption{
  text-align:left;padding:16px 20px;color:rgba(255,255,255,.6);
  font-size:14px;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.09);
}
.bxr-sec.bxr-sec th,.bxr-sec.bxr-sec td{
  padding:15px 20px;text-align:left;border-bottom:1px solid rgba(255,255,255,.09);
}
.bxr-sec.bxr-sec thead th{
  font-family:"Exo 2",sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--green);font-weight:700;background:rgba(255,255,255,.03);
}
.bxr-sec.bxr-sec tbody th{font-family:"Exo 2",sans-serif;font-size:16px;font-weight:600;color:#fff}
.bxr-sec.bxr-sec td{color:rgba(255,255,255,.72)}
.bxr-sec.bxr-sec tbody tr:last-child th,
.bxr-sec.bxr-sec tbody tr:last-child td{border-bottom:0}
.bxr-sec.bxr-sec .tblnote{
  margin:10px 2px 0;color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.6;
}
.bxr-sec.bxr-sec .tblnote sup{color:var(--green)}

/* Native Divi-Buttons auf die .btn-Optik bringen. Der Pfeil kommt
   als ::after, weil das Button-Modul kein Inline-Markup zulaesst;
   font-family:inherit ist noetig, sonst zieht Divi ETmodules und
   zeigt statt des Pfeils ein Icon aus der eigenen Schrift. */
.bxr-btn .et_pb_button{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Exo 2",sans-serif!important;font-weight:600;font-size:15px;
  letter-spacing:.6px;text-transform:uppercase;
  padding:15px 30px!important;border-radius:var(--r);border:2px solid transparent;
  transition:.25s ease;
}
.bxr-btn .et_pb_button::after{
  content:"→"!important;font-family:inherit!important;
  font-size:inherit;line-height:1;margin:0!important;opacity:1!important;
  position:static!important;transition:transform .25s ease;
}
.bxr-btn .et_pb_button:hover::after{transform:translateX(4px)}
.bxr-btn-primary .et_pb_button{
  background:var(--green)!important;color:var(--dark)!important;border-color:var(--green)!important;
}
.bxr-btn-primary .et_pb_button:hover{
  background:transparent!important;color:var(--green)!important;
  box-shadow:0 0 28px rgba(14,245,125,.28);
}
.bxr-btn-ghost .et_pb_button{border-color:rgba(255,255,255,.35)!important;color:#fff!important}
.bxr-btn-ghost .et_pb_button:hover{border-color:var(--green)!important;color:var(--green)!important}
.bxr-btnrow .et_pb_button_module_wrapper{margin:0!important}

/* Das Boot-Modul traegt nur <link>/<script> und darf keine
   Flex-Luecke erzeugen. */
.bxr-boot{display:none!important}

html,body{overflow-x:clip}

/* Das Rasterelement liegt im Entwurf als eigenes <div> direkt in der
   <section>. In Divi kann eine Section nur Rows enthalten — ein div im
   Code-Modul wuerde sich an der Row ausrichten und damit die Polsterung
   der Section aussparen. Deshalb hier als Section-Pseudoelement, das
   .grid-lines eins zu eins nachbildet. ::after ist von .subhero.plain
   fuer den Verlauf belegt, also ::before. */
.bxr-sec.subhero::before,.bxr-sec.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 20%,transparent 92%);
}

/* Zweispalter aus .legal-layout als echte Divi-Row mit zwei Spalten.
   Divi vergibt Prozentbreiten; das Raster des Entwurfs braucht aber eine
   feste 230px-Spalte, damit das Inhaltsverzeichnis nicht mitwaechst. */
.bxr-legal-row.et_pb_row{
  display:grid!important;
  grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(36px,5vw,72px);align-items:start;
}
.bxr-legal-row.et_pb_row>.et_pb_column{width:auto!important;margin:0!important;float:none!important}
@media(max-width:900px){
  .bxr-legal-row.et_pb_row{grid-template-columns:1fr}
}

/* position:sticky haftet innerhalb des ELTERN-Kastens. Im Entwurf ist
   .toc selbst das Rasterkind, sein Kasten also die volle Zeilenhoehe.
   In Divi liegt dazwischen die Spalte — die bei align-items:start nur
   so hoch ist wie ihr Inhalt, womit nichts mehr zu haften haette.
   Deshalb wandert das Kleben auf die Spalte, und .toc wird darin
   ruhiggestellt, damit sich die Versaetze nicht addieren. */
.bxr-legal-row.et_pb_row>.et_pb_column:first-child{
  position:sticky;top:104px;align-self:start;
}
.bxr-legal-row .toc{position:static;top:auto}
@media(max-width:900px){
  .bxr-legal-row.et_pb_row>.et_pb_column:first-child{position:static}
}

/* Kein Reset der Modul-Aussenabstaende: Divi 5 steuert die Abstaende
   ueber den Spalten-gap (oben auf 0 gesetzt), die Module selbst haben
   margin-bottom:0. Ein Reset hier wuerde stattdessen die Abstaende des
   Entwurfs mitnehmen — .eyebrow verlor so seine 14px und alles darunter
   sass 13px zu hoch (gemessen 2026-08-20).
   */

/* --- Divi-Modulhuellen neutralisieren ------------------------
   Divi legt den Inhalt jedes Text-Moduls in ein zusaetzliches
   .et_pb_text_inner und zentriert es per auto-Rand. Regeln, die im
   Entwurf direkt am Element haengen, greifen dadurch auf die falsche
   Kiste. display:contents loest die Huelle im Layout auf, ohne sie
   aus dem DOM zu nehmen — damit wird der Text wieder unmittelbares
   Flex-Kind und .eyebrow::before steht wie vorgesehen davor. */
.et_pb_text.eyebrow>.et_pb_text_inner{display:contents}
.bxr-sec .et_pb_text>.et_pb_text_inner{margin-left:0;margin-right:0}

/* Divi nummeriert jede <ol> im Inhaltsbereich. Die Brotkrumen und das
   Inhaltsverzeichnis bringen ihre eigene Zaehlung mit bzw. gar keine. */
.bxr-sec .crumb,.bxr-sec .crumb li{list-style:none!important}
.bxr-sec .toc ol,.bxr-sec .toc li{list-style:none!important}

/* Header und Footer sind eigene Sections ohne eigene Hoehe: der Header
   ist position:fixed, der Footer bringt seine Polsterung selbst mit.
   Divis Standardpolsterung (54px oben und unten) wuerde sonst je einen
   leeren Streifen erzeugen. */
.bxr-header-sec.et_pb_section,.bxr-footer-sec.et_pb_section,.bxr-boot.et_pb_section{
  padding:0!important;margin:0!important;
}
.bxr-header-sec .et_pb_row,.bxr-footer-sec .et_pb_row,.bxr-boot .et_pb_row{
  width:100%!important;max-width:none!important;padding:0!important;margin:0!important;
}
.bxr-header-sec{position:relative;z-index:60}

/* Divi setzt Modulen flex-direction:column. .eyebrow ist eine Zeile:
   erst der Strich, dann der Text. Ohne das stapelt beides mittig. */
.et_pb_text.eyebrow{flex-direction:row;justify-content:flex-start}
.et_pb_text.eyebrow>.et_pb_text_inner>p{margin:0}

/* Divi-Spalten sind Flex-Container mit 30px Abstand zwischen den Modulen.
   Der Entwurf steuert die Abstaende ueber die Raender der Elemente selbst
   (Brotkrumen 22px, Eyebrow 14px, h1 22px) — der Spaltenabstand kaeme
   also obendrauf. */
.bxr-sec .et_pb_column{row-gap:0;gap:0}

/* Divis Stylesheet laedt NACH unserem und setzt body{font-size:14px;
   line-height:1.7}. Bei gleicher Spezifitaet gewinnt das spaetere — der
   ganze Entwurf rechnet aber mit 16px. Folge waere subtil und ueberall:
   .prose{max-width:74ch} misst in ch, also 592 statt 677px, und saemtliche
   Zeilenhoehen sitzen enger. "html body" hebt die Spezifitaet um eins und
   holt die Grundwerte zurueck. */
html body{font-size:16px;line-height:1.75}

/* --- Divis Inhaltsbereich-Vorgaben zuruecknehmen --------------
   Divi haengt sechs eigene <style>-Bloecke HINTER unser Stylesheet
   (Modul-Design, Theme-Builder, Divi Pixel — zusammen ueber 45 KB).
   Bei gleicher Spezifitaet gewinnt damit immer Divi. Betroffen sind
   drei Dinge, gemessen am 2026-08-20 gegen die lokale Fassung:
     - padding-bottom an Ueberschriften (10px) und Absaetzen (16px)
     - font-weight 500 als Grundgewicht statt 400
     - abweichende Zeilenhoehen an <li> und an Text-Modulen (1.7 statt 1.75)
   Ohne diesen Block sammelt sich das ueber eine lange Seite zu mehreren
   hundert Pixeln Versatz und der Text wirkt durchgehend zu fett. */
html body{font-weight:400}

.bxr-sec h1,.bxr-sec h2,.bxr-sec h3,.bxr-sec h4,.bxr-sec h5,.bxr-sec h6,.bxr-sec p,
.bxr-header-sec h1,.bxr-header-sec h2,.bxr-header-sec h3,.bxr-header-sec h4,.bxr-header-sec p,
.bxr-footer-sec h1,.bxr-footer-sec h2,.bxr-footer-sec h3,.bxr-footer-sec h4,.bxr-footer-sec p{
  padding-bottom:0;
}

.bxr-sec li,.bxr-header-sec li,.bxr-footer-sec li,
.bxr-sec .et_pb_text,.bxr-sec .et_pb_text p{line-height:inherit}

/* Nachtrag zu den Inhaltsbereich-Vorgaben: Divi polstert auch Listen
   (23px unten) und gibt ihnen eine ABSOLUTE Zeilenhoehe von 26px. Weil
   absolut, vererbt sie sich unveraendert an alle <li> — die Brotkrumen
   mit 13px Schrift bekamen so dieselben 26px wie der Footer mit 14,5px.
   Deshalb hier zurueck auf den Faktor aus dem Entwurf. */
.bxr-sec ol,.bxr-sec ul,.bxr-header-sec ol,.bxr-header-sec ul,
.bxr-footer-sec ol,.bxr-footer-sec ul{padding-bottom:0;line-height:1.75}

/* Der Absatz im Text-Modul BEHAELT seinen Abstand: der Entwurf setzt
   p{margin:0 0 1.1em} — genau den Wert, den auch Divi vergibt. Ein
   pauschaler Reset hier hat die Absatzabstaende der ganzen Seite getilgt
   (gemessen 2026-08-20: bis zu 104px pro Section zu kurz).
   Zurueckgesetzt wird nur, wo der Entwurf ausdruecklich 0 will. */
.bxr-sec.subhero .lead>.et_pb_text_inner>p{margin-bottom:0}

/* Divi setzt .et_flex_column > .et_pb_module{margin-bottom:0} — Spezifitaet
   0,2,0 und damit staerker als jede Klassenregel des Entwurfs. Abstaende, die
   dort am Element haengen, muessen deshalb hier nachgezogen werden. Ohne das
   fehlen 14px unter dem Eyebrow und ALLES darunter sitzt zu hoch. */
.bxr-sec .et_flex_column>.et_pb_module.eyebrow{margin-bottom:14px}

/* Divi ruecken Listen links ein (padding-left ~14,5px). Der Entwurf setzt bei
   jeder Liste explizit padding:0 und baut Aufzaehlungspunkte selbst per
   ::before — der Einzug macht die Zeile also nur schmaler und laesst sie
   umbrechen (im Footer wurde aus einer Zeile zwei, +26px pro <li>). */
.bxr-sec ol,.bxr-sec ul,.bxr-header-sec ol,.bxr-header-sec ul,
.bxr-footer-sec ol,.bxr-footer-sec ul{padding-left:0}

/* Beim generischen Port wird jede <section> des Entwurfs zu einer echten
   Divi-Section; ihr Innenleben (inkl. .wrap) sitzt in einem Code-Modul.
   Die Divi-Row dazwischen darf dann weder Breite noch Polsterung
   beisteuern — das macht weiter .wrap. */
.bxr-passthrough.et_pb_row{
  width:100%!important;max-width:none!important;padding:0!important;margin:0!important;
}
.bxr-passthrough.et_pb_row>.et_pb_column{width:100%!important;margin:0!important}

/* Ersetzt das style="margin-top:clamp(56px,7vw,90px)" der Entwurfsseiten —
   Inline-Styles mit Anfuehrungszeichen sind in Blockattributen heikel. */
.bxr-mt-l{margin-top:clamp(56px,7vw,90px)}

/* Divi setzt list-style mit hoeherer Spezifitaet als die Klassenregeln des
   Entwurfs (.entry-content ul{list-style:disc}). Kein Element des Entwurfs
   braucht Divis Marker: Navigation und Footer sind reine Linklisten, das
   Inhaltsverzeichnis zaehlt per CSS-Counter, .prose ul setzt eigene Punkte
   per ::before. Also durchgehend ab. */
.bxr-sec ul,.bxr-sec ol,.bxr-sec li,
.bxr-header-sec ul,.bxr-header-sec ol,.bxr-header-sec li,
.bxr-footer-sec ul,.bxr-footer-sec ol,.bxr-footer-sec li{list-style:none!important}

/* Divi gibt weiteren Blockelementen Aussenabstaende. Zurueckgesetzt wird
   nur, was der Entwurf nachweislich auf 0 haben will: <address> hat von
   Haus aus keinen Rand (Divi haengt 12px an — die beiden .legal-card im
   Impressum waren dadurch je 12px zu hoch), und blockquote sowie die
   dd-Elemente setzen im Entwurf ausdruecklich margin:0.
   NICHT zurueckgesetzt werden dl, figure und table: dort verlaesst sich
   der Entwurf auf die Browser-Vorgaben, ein Reset waere also die
   Abweichung. */
.bxr-sec address,.bxr-footer-sec address{margin:0}
.bxr-sec blockquote{margin:0}
.bxr-sec .legal-dl dd,.bxr-sec .facts dd{margin:0}

/* --- Hilfsklassen fuer den Divi-Port -------------------------
   Der Entwurf setzt an einigen Stellen Inline-Styles. In Divi wandern
   Layout-Angaben aufs Modul bzw. auf Row/Spalte, und style="…" mit
   Anfuehrungszeichen ist in Blockattributen heikel. Deshalb hier als
   Klassen. Werte identisch zum Entwurf. */
.bxr-pt-l{padding-top:clamp(64px,7vw,96px)}
.bxr-pt-m{padding-top:clamp(56px,7vw,84px)}
.bxr-pb-l{padding-bottom:clamp(64px,8vw,100px)}
.bxr-pad-l{padding-top:clamp(64px,8vw,100px);padding-bottom:clamp(64px,8vw,100px)}
.bxr-mb-6{margin-bottom:6px}
.bxr-mb-8{margin-bottom:8px}
.bxr-mb-14{margin-bottom:14px}
.bxr-mb-20{margin-bottom:20px}
.bxr-mb-34{margin-bottom:34px}
.bxr-w34{max-width:34ch}
.bxr-w64{max-width:64ch}
.bxr-w70{max-width:70ch}
.bxr-w72{max-width:72ch}
.bxr-m0{margin:0}
.bxr-img-169 img{height:auto;aspect-ratio:16/9}
.bxr-note{margin:26px 0 0;font-size:13.5px;color:rgba(255,255,255,.5);max-width:70ch}
.bxr-btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Das dekorative Medien-Element einer Section liegt im Entwurf direkt in
   der <section> und richtet sich per position:absolute an ihr aus. In Divi
   muss es in einer Row stecken — die darf deshalb kein Bezugssystem
   aufspannen und keine Hoehe beisteuern. */
.bxr-media-row.et_pb_row{
  position:static!important;height:0!important;
  margin:0!important;padding:0!important;width:100%!important;max-width:none!important;
}
.bxr-media-row.et_pb_row>.et_pb_column{position:static!important;margin:0!important}
/* Divi legt um jedes Modul noch zwei Huellen (.et_pb_module und
   .et_pb_code_inner), beide position:relative. Das dekorative Bild haette
   sich sonst an der innersten davon ausgerichtet — die ist 0 hoch. */
.bxr-media-row .et_pb_module,.bxr-media-row .et_pb_code_inner{
  position:static!important;height:0!important;
}

/* .sec-head und .feature sind im Entwurf zweispaltige Raster. Als echte
   Divi-Row mit zwei Spalten nachgebaut, damit die Texte darin native
   Module bleiben und im Builder editierbar sind.
   Die Row traegt BEIDE Klassen (z. B. "feature bxr-feature"): die
   Originalklasse liefert Rasterspalten, Abstaende, Polsterung und
   Trennlinie, hier wird nur Divis Flex-Layout und die Prozentbreite der
   Spalten neutralisiert. So bleibt es bei EINER Quelle fuer die Werte. */
.bxr-feature.et_pb_row,.bxr-sechead.et_pb_row{display:grid!important}
.bxr-feature.et_pb_row>.et_pb_column,
.bxr-sechead.et_pb_row>.et_pb_column{
  width:auto!important;margin:0!important;float:none!important;
}
.bxr-feature.flip.et_pb_row>.et_pb_column:first-child{order:2}
@media(max-width:900px){
  .bxr-feature.flip.et_pb_row>.et_pb_column:first-child{order:0}
}

/* --- Hilfsklassen in Row-Form -------------------------------
   Auf einer Divi-Row muessen sie .bxr-wrap.et_pb_row (0,2,0) schlagen,
   deshalb hier mit .et_pb_row qualifiziert. Werte identisch zur
   klassenlosen Fassung weiter oben. */
.bxr-pt-l.et_pb_row{padding-top:clamp(64px,7vw,96px)}
.bxr-pt-m.et_pb_row{padding-top:clamp(56px,7vw,84px)}
.bxr-pb-l.et_pb_row{padding-bottom:clamp(64px,8vw,100px)}
.bxr-pad-l.et_pb_row{padding-top:clamp(64px,8vw,100px);padding-bottom:clamp(64px,8vw,100px)}

/* .feature bringt im Entwurf eigene vertikale Polsterung und die
   Trennlinie mit (Zeile 487 ff.). Als Row braucht sie dieselbe
   Spezifitaet wie .bxr-wrap.et_pb_row — Werte von dort gespiegelt,
   bei Aenderungen oben hier mitziehen. */
.bxr-feature.et_pb_row{
  padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px);
}

/* .checklist ist im Entwurf das Raster selbst; als Modulklasse liegt sie
   nun zwei Huellen ueber den <li>. display:contents loest beide auf, dann
   sind die Punkte wieder direkte Rasterkinder. */
.et_pb_text.checklist>.et_pb_text_inner,.et_pb_text.checklist ul{display:contents}

/* === ERZEUGT: Section-Polsterung (gen_section_pad.py) === */
/* Nicht von Hand aendern — aus den Regeln oben erzeugt.
   Divi: section{padding:54px 0} und ein 60px-Abstand zwischen den
   Rows. Beides gibt es im Entwurf nicht; Sections mit eigener
   Polsterung bekommen sie hier qualifiziert zurueck. */
.bxr-sec.et_pb_section{padding:0;gap:0}
.bxr-header-sec.et_pb_section,.bxr-footer-sec.et_pb_section{gap:0}
.hero.et_pb_section{padding:140px 0 0}
.subhero.et_pb_section{padding:clamp(140px,16vw,190px) 0 clamp(56px,7vw,84px)}
.clients.et_pb_section{padding:32px 0}
.fields.et_pb_section{padding:clamp(80px,9vw,130px) 0}
.capture.et_pb_section{padding:clamp(80px,9vw,130px) 0}
.realtime.et_pb_section{padding:clamp(80px,9vw,130px) 0}
.supar.et_pb_section{padding:clamp(80px,9vw,130px) 0}
.quote.et_pb_section{padding:clamp(76px,8vw,110px) 0}
.process.et_pb_section{padding:clamp(80px,9vw,130px) 0}
.cta.et_pb_section{padding:clamp(80px,9vw,120px) 0}
.legal.et_pb_section{padding:clamp(56px,7vw,88px) 0 clamp(70px,8vw,110px)}
.news.et_pb_section{padding:clamp(56px,7vw,88px) 0 clamp(70px,8vw,110px)}

/* Auf einer Divi-Row bzw. einem Divi-Modul brauchen die Hilfsklassen und
   Entwurfsklassen mehr Spezifitaet als Divis eigene Regeln
   (.et_pb_row{margin-bottom:0} bzw. .et_flex_column>.et_pb_module{...}). */
.sec-head.et_pb_row{margin-bottom:52px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-6{margin-bottom:6px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-8{margin-bottom:8px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-14{margin-bottom:14px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-20{margin-bottom:20px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-34{margin-bottom:34px}

/* Randkollaps gibt es in Divis Flex-Sections nicht: der Entwurf laesst
   den Abstand einer Row und den ihres ersten Kindes verschmelzen, Divi
   addiert sie. Deshalb dort, wo die Row den Abstand schon liefert, den
   des Kindes abschalten. */
.bxr-sec .et_pb_code .steps{margin-top:0}
.bxr-sec .et_pb_module[class*="bxr-mb-"]>.et_pb_text_inner>p:last-child{margin-bottom:0}

/* Im Divi-Builder darf das Scroll-Reveal nicht greifen. Die Elemente
   starten auf opacity:0 und werden erst per IntersectionObserver
   eingeblendet — der laeuft im Builder-Rahmen nicht an, wodurch alles
   unterhalb des Heros unsichtbar bleibt (der Hero hat als einziger
   Bereich keine .rv-Elemente). Gemessen am 2026-08-20: 19 von 19
   Elementen dauerhaft auf opacity:0.
   Der Builder-Rahmen traegt html.et-vb-app-ancestor, der klassische
   Backend-Builder body.et-bfb, das Frontend-Overlay body.et-fb. */
html.et-vb-app-ancestor .rv,
body.et-fb .rv,
body.et-bfb .rv{opacity:1!important;transform:none!important}

/* Weitere Hilfsklassen fuer Inline-Styles der uebrigen Entwurfsseiten.
   Werte identisch zum Entwurf; die Zuordnung steht in build_native.py. */
.bxr-pad-m{padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(56px,7vw,84px)}
.bxr-mb-18{margin-bottom:18px}
.bxr-mt-26{margin-top:26px}
.bxr-mt-30{margin-top:30px}
.bxr-dim{color:rgba(255,255,255,.72)}
.bxr-quelle{color:var(--green-dim);text-decoration:underline;text-underline-offset:3px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mb-18{margin-bottom:18px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mt-26{margin-top:26px}
.bxr-sec .et_flex_column>.et_pb_module.bxr-mt-30{margin-top:30px}
.bxr-pad-m.et_pb_row{padding-top:clamp(56px,7vw,84px);padding-bottom:clamp(56px,7vw,84px)}

/* .prose wird beim Port aufgeloest: seine Kinder werden einzelne Module,
   damit der Rechtstext im Builder editierbar ist. Von den elf
   .prose-Regeln nutzen nur zwei den direkten Kind-Kombinator — die
   brauchen eine Fassung, die Divis Modulhuelle ueberspringt. Alle
   uebrigen sind Nachfahren-Selektoren und greifen unveraendert weiter.
   Werte gespiegelt von .prose>h2 (Zeile 822) — dort mitziehen. */
.prose>.et_pb_module h2{
  font-size:clamp(21px,2vw,26px);margin:clamp(44px,5vw,60px) 0 14px;
  padding-top:clamp(30px,4vw,40px);border-top:1px solid rgba(0,0,0,.1);
  scroll-margin-top:104px;
}
.prose>.et_pb_module:first-child h2{margin-top:0;padding-top:0;border-top:0}
/* Divi setzt Ueberschriften zusaetzlich eine Polsterung unten, die der
   Entwurf nicht hat — hier greift der allgemeine Reset nicht, weil die
   Row .prose traegt und nicht .bxr-sec. */
.prose h1,.prose h2,.prose h3,.prose h4,.prose p{padding-bottom:0}

/* .split ist wie .sec-head und .feature ein Zweispalten-Raster des
   Entwurfs. Die Row traegt beide Klassen: .split liefert Spalten und
   Abstaende, hier wird nur Divis Flex-Layout neutralisiert. */
.bxr-split.et_pb_row{display:grid!important}
.bxr-split.et_pb_row>.et_pb_column{width:auto!important;margin:0!important;float:none!important}

/* Divi-Spalten sind Flex-Container — dort kollabieren Raender nicht. Im
   aufgeloesten Flie\u00dftext addieren sich dadurch der untere Rand eines
   Absatzes und der obere der folgenden Ueberschrift, statt zu
   verschmelzen (gemessen: +246px ueber elf Ueberschriften). Blockfluss
   stellt das Verhalten des Entwurfs wieder her. */
.et_pb_column.prose,
.et_pb_column.prose>.et_pb_module,
.et_pb_column.prose .et_pb_heading_container{display:block}