/* Selbst gehostete Schriften — kein externer Aufruf (DSGVO) */
@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('fonts/serif.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --hall:#DCE2E6; --hall-deep:#C9D2D8; --paper:#FFFFFF;
  --ink:#131A20; --ink-2:#3A4650; --ink-3:#6E7D88;
  /* --ink-2 traegt den Fliesstext: auf grauem Grund jetzt 7.4:1 statt 5.3:1 */
  --lacquer:#B0281F; --deep:#16232E; --line:#D2DADF;
  --r:22px; --r-s:12px;
  --shadow:0 2px 4px rgba(19,26,32,.04), 0 12px 32px rgba(19,26,32,.09);
  --shadow-lg:0 4px 8px rgba(19,26,32,.06), 0 28px 64px rgba(19,26,32,.16);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--hall); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:18px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,.ui{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.021em; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(2.05rem,4.1vw,3.15rem)}
h2{font-size:clamp(1.62rem,3.1vw,2.35rem); line-height:1.12}
h3{font-size:1.2rem; letter-spacing:-.012em; line-height:1.25}
p{margin:0 0 1.05em; text-wrap:pretty} p:last-child{margin-bottom:0}
li,figcaption,dd{text-wrap:pretty}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
/* --ink-3 auf hellem Grund kommt nur auf 2,3:1 — fuer Text zu wenig.
   Kleinschrift-Label laufen deshalb auf --ink-2 (rund 5:1). */
.eyebrow{font-family:Archivo,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 18px}
.lead{font-size:1.16rem; color:var(--ink-2)}

/* Hervorhebung: eine Kernaussage je Absatz, damit das Auge einen Halt hat.
   Sparsam einsetzen — mehr als eine Stelle je Block hebt sich gegenseitig auf. */
.hl{font-weight:600; color:var(--ink);
  background:linear-gradient(to top, rgba(176,40,31,.14) 0 .55em, transparent .55em)}

.topbar{position:sticky; top:0; z-index:60; background:rgba(220,226,230,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:28px; height:76px}
.brand{display:flex; align-items:center; text-decoration:none; line-height:0}
.brand img{width:200px; height:auto; opacity:.86}
.brand:hover img{opacity:1}
@media(max-width:520px){.brand img{width:160px}}
.brand em{font-style:normal; color:var(--lacquer)}
.nav{display:flex; gap:24px; margin-left:auto; align-items:center}
.tel{font-family:Archivo,sans-serif; font-size:.85rem; font-weight:600; color:var(--ink) !important; text-decoration:none; white-space:nowrap}
.tel:hover{color:var(--lacquer) !important}
@media(max-width:1040px){.tel{display:none}}
.nav a{font-family:Archivo,sans-serif; font-size:.85rem; font-weight:500; color:var(--ink-2); text-decoration:none}
.nav a:hover{color:var(--ink)}
.lang{font-size:.76rem !important; font-weight:600 !important; letter-spacing:.06em; color:var(--ink-3) !important;
  border:1px solid var(--line); border-radius:99px; padding:5px 11px}
.lang:hover{color:var(--ink) !important; border-color:var(--ink-3)}
/* Auf kleinen Schirmen bleiben Kontakt und Sprache stehen — sonst waere die
   Kopfzeile auf der Unterseite ganz leer und der Weg zum Kontakt nur ueber Scrollen */
@media(max-width:900px){.nav a:not(.lang):not(.keep){display:none}}

.btn{display:inline-block; font-family:Archivo,sans-serif; font-size:.92rem; font-weight:600; text-decoration:none;
  padding:14px 26px; border-radius:99px; border:1.5px solid transparent; transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--lacquer); color:#fff}
.btn-primary:hover{background:#96201a}
.btn-ghost{border-color:rgba(255,255,255,.42); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.11)}
/* Zweitrangige Aktion auf hellem Grund — soll den Hauptknopf nicht schlagen */
.btn-quiet{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-quiet:hover{background:var(--ink); color:#fff}
.btn-quiet span{font-weight:500; color:var(--ink-2)}
.btn-quiet:hover span{color:rgba(255,255,255,.72)}

/* Hero */
.hero{padding:26px 0 0}
.hero-card{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--deep); min-height:min(590px,76vh); display:flex; align-items:flex-end}
.hero-card>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% center}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(22,35,46,.10) 0%,rgba(22,35,46,.22) 30%,rgba(22,35,46,.80) 52%,rgba(22,35,46,.96) 68%,rgba(22,35,46,.97) 100%)}
.hero-body{position:relative; padding:clamp(28px,4.2vw,52px); max-width:600px; margin-left:auto; color:#fff}
.hero-body .eyebrow{color:rgba(255,255,255,.62)}
.hero-body h1{color:#fff}
.hero-body h1 span{color:#F0A9A3}
.hero-body p{color:rgba(255,255,255,.85); font-size:1.08rem; margin-top:22px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
@media(max-width:780px){
  .hero-card{min-height:0; display:block}
  .hero-card>img{position:relative; height:240px; object-position:62% 16%}
  .hero-scrim{display:none}
  .hero-body{max-width:none; background:var(--deep)}
}

section{padding:70px 0}
.card{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(26px,3.5vw,52px)}
.head{max-width:940px; margin-bottom:38px}
.head p{margin-top:16px; color:var(--ink-2); font-size:1.08rem; max-width:68ch}

/* Zwei Seiten — Zeilen liegen paarweise im selben Grid, damit sie gleich hoch sind */
.sides{display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg)}
.sides>*{padding:20px clamp(20px,2.8vw,38px)}
.s-l{background:var(--paper); border-bottom:1px solid var(--line)}
.s-r{background:var(--deep); color:#fff; border-left:3px solid var(--lacquer); border-bottom:1px solid rgba(255,255,255,.13)}
.s-hd{padding-top:clamp(24px,3vw,38px) !important}
.s-last{border-bottom:0 !important; padding-bottom:clamp(26px,3vw,38px) !important}
.s-l p{font-size:1.03rem; font-style:italic; margin:0}
.s-r p{font-size:1.03rem; color:rgba(255,255,255,.9); margin:0}
.s-r .eyebrow{color:rgba(255,255,255,.5)}
@media(max-width:780px){
  .sides{grid-template-columns:1fr}
  .s-r{border-left:0; border-top:3px solid var(--lacquer)}
  .s-l{border-bottom:0; padding-bottom:6px}
}

/* Leistungen */
.svc{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:start}
.svc article{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .18s ease, box-shadow .18s ease}
.svc article:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.svc figure{margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--hall-deep)}
.svc figure.ba{display:block; position:relative}
.svc figure.ba span{position:absolute; inset:0; overflow:hidden}
.svc figure.ba span:first-child{clip-path:polygon(0 0, 58% 0, 46% 100%, 0 100%)}
.svc figure.ba span:last-child{clip-path:polygon(59.2% 0, 100% 0, 100% 100%, 47.2% 100%)}
.svc figure.ba span:last-child::before{content:""; position:absolute; inset:0; z-index:1}
.svc figure.ba span:last-child::after{left:auto !important; right:10px}
.svc figure.ba span::after{content:attr(data-l); position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:Archivo,sans-serif; font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(19,26,32,.72); padding:4px 9px; border-radius:99px}
.svc figure img{width:100%; height:100%; object-fit:cover}
.svc .txt{padding:26px 26px 28px; flex:1}
.svc h3{margin-bottom:6px}
.svc .kicker{font-family:Archivo,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:14px}
.svc p{font-size:1rem; color:var(--ink-2)}
/* Die beiden nebeneinanderliegenden Karten haben unterschiedlich lange
   Einleitungen. Ohne Mindesthoehe starten ihre Aufzaehlungen versetzt. */
@media(min-width:821px){
  .svc article:not(.wide) .txt > p:first-of-type{min-height:8.1em}
}
.svc ul{margin:16px 0 0; padding:0; list-style:none; font-size:.97rem}
.svc li{padding-left:18px; position:relative; margin-bottom:7px; color:var(--ink-2)}
.svc li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:99px; background:var(--ink-3)}
/* Breite Kachel ueber beide Spalten: Bild links, Text rechts */
.svc article.wide{grid-column:1 / -1; flex-direction:row}
.svc article.wide figure{aspect-ratio:auto; width:42%; flex:0 0 42%}
.svc article.wide figure img{height:100%}
.svc article.wide .txt{padding:clamp(28px,3.2vw,42px)}
.svc .note{margin-top:16px; font-size:.94rem; font-style:italic; color:var(--ink-2)}
@media(max-width:820px){
  .svc{grid-template-columns:1fr}
  .svc article.wide{flex-direction:column}
  .svc article.wide figure{width:100%; flex:none; aspect-ratio:16/9}
}

/* Gastgeber */
.host{background:var(--deep); color:#fff; border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:clamp(28px,3.6vw,52px); display:grid; grid-template-columns:1fr 330px; gap:44px; align-items:center}
.host h2{color:#fff}
.host .eyebrow{color:rgba(255,255,255,.5)}
.host p{color:rgba(255,255,255,.84)}
.host dl{margin:26px 0 0; display:grid; gap:0}
.host dt{font-family:Archivo,sans-serif; font-size:.95rem; font-weight:600; color:#F0A9A3; padding-top:16px}
.host dd{margin:2px 0 0; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.8); font-size:1rem}
.host dd:last-of-type{border-bottom:0; padding-bottom:0}
.host figure{margin:0; border-radius:var(--r-s); overflow:hidden}
@media(max-width:900px){.host{grid-template-columns:1fr; gap:28px}}

/* Ablauf */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
.steps div{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:30px 26px; counter-increment:s; transition:transform .18s ease, box-shadow .18s ease}
.steps div:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.steps div::before{content:counter(s,decimal-leading-zero); font-family:Archivo,sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.1em; color:var(--ink-3); display:block; margin-bottom:14px}
.steps h3{margin-bottom:10px; font-size:1.08rem}
.steps p{font-size:.99rem; color:var(--ink-2)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* Vergleich */
.cmp{width:100%; border-collapse:collapse; font-size:1rem}
.cmp th,.cmp td{text-align:left; padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top}
.cmp thead th{font-family:Archivo,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1.5px solid var(--ink-3)}
.cmp tbody th{font-weight:400; color:var(--ink-2); width:32%}
.cmp td.me{color:var(--ink); border-left:3px solid var(--deep); background:#F1F5F7}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
@media(max-width:720px){
  .cmp thead{display:none}
  .cmp tr{display:block; padding:14px 0; border-bottom:1px solid var(--line)}
  .cmp th,.cmp td{display:block; width:auto; border-bottom:0; padding:4px 0}
  .cmp td.me{border-left:3px solid var(--deep); padding-left:14px; margin-top:8px}
}

/* Werkzeuge */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.tool{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.tool .shot{margin:0; background:var(--hall-deep); padding:22px 22px 0; overflow:hidden; height:300px; position:relative}
.tool .shot img{height:100%; object-fit:cover; object-position:top center}
.tool .shot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background:linear-gradient(to bottom, rgba(201,210,216,0), var(--hall-deep)); pointer-events:none}
.tool .shot img{border-radius:8px 8px 0 0; box-shadow:0 -1px 0 rgba(0,0,0,.07), 0 14px 30px rgba(19,26,32,.2); width:100%}
.tool .txt{padding:26px 30px 30px}
.tool .tag{display:inline-block; font-family:Archivo,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); background:#EEF1F3; padding:5px 11px; border-radius:99px; margin-bottom:14px}
.tool p{font-size:1rem; color:var(--ink-2)}
.tool a.lnk{font-family:Archivo,sans-serif; font-size:.9rem; font-weight:600; color:var(--lacquer); text-decoration:none; display:inline-block; margin-top:14px}
.tool a.lnk:hover{text-decoration:underline}
.tool a.lnk .ext{font-weight:500; color:var(--ink-3)}
@media(max-width:880px){.tools{grid-template-columns:1fr}}

/* Belege */
.cv{display:grid; grid-template-columns:150px 1fr; gap:0 30px}
.cv dt{font-family:Archivo,sans-serif; font-size:.85rem; font-weight:600; color:var(--ink-3); padding:18px 0 0}
.cv dd{margin:0; padding:18px 0; border-bottom:1px solid var(--line)}
.cv dd:last-of-type{border-bottom:0}
.cv dd strong{font-weight:600}
.cv dd span{display:block; color:var(--ink-2); font-size:.98rem; margin-top:3px}
@media(max-width:720px){.cv{grid-template-columns:1fr}.cv dt{padding-top:20px}.cv dd{padding-top:4px}}

/* Galerie */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; align-items:start}
.gal figure{margin:0; border-radius:var(--r-s); overflow:hidden; background:var(--hall-deep); box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.gal figure:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.gal figure.wide{grid-column:1 / -1}
.gal figure.wide img{aspect-ratio:21/9}
.gal img{width:100%; aspect-ratio:16/10; object-fit:cover}
/* Bildunterschriften immer zwei Zeilen hoch, damit die Karten einer Reihe
   gleich hoch enden. Kuerzere Texte bekommen den Platz trotzdem. */
.gal figcaption{font-family:Archivo,sans-serif; font-size:.74rem; color:var(--ink-2);
  background:var(--paper); padding:11px 14px; line-height:1.4; min-height:calc(2.8em + 22px)}
.gal figure.wide figcaption{min-height:0}
@media(max-width:860px){
  .gal{grid-template-columns:1fr 1fr}
  .gal figure.wide{grid-column:1 / -1}
  .gal figure.wide img{aspect-ratio:16/9}
}

/* Aktuelles */
.news{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px}
.news div{padding:16px 0; border-bottom:1px solid var(--line)}
.news .d{font-family:Archivo,sans-serif; font-size:.8rem; font-weight:600; color:var(--ink-3); padding-top:3px}
.news p{font-size:1rem}
@media(max-width:880px){.news{grid-template-columns:1fr}}

/* Kontakt — beide Karten gleich hoch, Fusszeile jeweils unten buendig */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch}
.contact>.card{display:flex; flex-direction:column}
.contact .card-foot{margin-top:auto}
.cdl{margin:26px 0 0; display:grid; gap:14px}
.cdl a{font-family:Archivo,sans-serif; font-size:1.02rem; font-weight:500; color:var(--ink); text-decoration:none; display:block}
.cdl a:hover{color:var(--lacquer)}
.cdl small{display:block; font-family:Archivo,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:3px}
@media(max-width:880px){.contact{grid-template-columns:1fr}}

footer{padding:44px 0 60px; border-top:1px solid var(--line); margin-top:30px}
.foot{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between;
  font-family:Archivo,sans-serif; font-size:.84rem; color:var(--ink-2)}
.foot a{text-decoration:none; color:var(--ink-2)} .foot a:hover{color:var(--ink)}
.foot nav{display:flex; gap:20px; flex-wrap:wrap}
.foot-logo{width:230px; height:auto; opacity:.72; margin-bottom:14px}

.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  .btn:hover{transform:none}
}
:focus-visible{outline:3px solid var(--lacquer); outline-offset:3px; border-radius:4px}

/* ---------- Unterseite ---------- */
.subhero{padding:56px 0 8px}
.subhero .wrap{max-width:900px}
.subhero h1{font-size:clamp(1.9rem,4vw,3.1rem)}
.subhero p{margin-top:22px; font-size:1.14rem; color:var(--ink-2)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
@media(max-width:880px){.two{grid-template-columns:1fr}}
/* .limits war hier ein zweites Mal dunkel definiert. Die helle Fassung weiter
   unten gewinnt, aber Schatten, Innenabstand und Trennlinien der dunklen Fassung
   sind durchgeschlagen. Entfernt — es gibt nur die helle Variante. */
.report{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:26px 26px 0; overflow:hidden}
.report img{border-radius:8px 8px 0 0; box-shadow:0 -1px 0 rgba(0,0,0,.07), 0 16px 34px rgba(19,26,32,.2)}
.fields{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px}
.fields div{padding:16px 0; border-bottom:1px solid var(--line)}
.fields strong{font-family:Archivo,sans-serif; font-size:.95rem; display:block}
.fields span{color:var(--ink-2); font-size:.98rem}
@media(max-width:780px){.fields{grid-template-columns:1fr}}

/* --- Passt / Passt nicht --- */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.fit>div{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(24px,3vw,40px)}
.fit>div.no{background:#F4F6F7; box-shadow:none; border:1px solid var(--line)}
.fit h3{margin-bottom:18px; font-size:1.14rem}
.fit ul{margin:0; padding:0; list-style:none}
.fit li{padding-left:22px; position:relative; margin-bottom:14px; font-size:1.01rem; color:var(--ink-2); line-height:1.5}
.fit li:last-child{margin-bottom:0}
.fit>div:not(.no) li::before{content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:99px; background:var(--deep)}
.fit>div.no li::before{content:""; position:absolute; left:0; top:.86em; width:9px; height:1.5px; background:var(--ink-3)}
@media(max-width:820px){.fit{grid-template-columns:1fr}}

/* --- Unterseite SME Radar --- */
.sub-hero{background:var(--deep); color:#fff; border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:clamp(30px,4vw,60px); margin-top:26px}
.sub-hero h1{color:#fff; max-width:19ch}
.sub-hero .eyebrow{color:rgba(255,255,255,.55)}
.sub-hero p{color:rgba(255,255,255,.84); font-size:1.1rem; margin-top:20px; max-width:60ch}
.deliver{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.deliver article{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:30px 28px; transition:transform .18s ease, box-shadow .18s ease}
.deliver article:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.deliver .lvl{font-family:Archivo,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:12px}
.deliver h3{margin-bottom:10px}
.deliver p{font-size:1rem; color:var(--ink-2)}
.deliver .meta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-family:Archivo,sans-serif; font-size:.85rem; color:var(--ink-2)}
@media(max-width:820px){.deliver{grid-template-columns:1fr}}
.report{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:40px; align-items:start}
.report figure{margin:0; border-radius:var(--r-s); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line)}
.crops{display:grid; grid-template-columns:1fr; gap:0; margin-top:32px; padding-top:8px}
.crops figure{display:grid; grid-template-columns:minmax(0,1.35fr) 1fr; gap:34px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line)}
.crops figure{margin:0}
.crops img{width:100%; border-radius:8px; border:1px solid var(--line); box-shadow:var(--shadow); display:block}
.crops figcaption{font-family:Archivo,sans-serif; font-size:.92rem; color:var(--ink-2); margin-top:0; line-height:1.5}
.crops figcaption b{color:var(--ink); font-weight:600}
@media(max-width:820px){.crops figure{grid-template-columns:1fr; gap:16px}}
.report ul{margin:18px 0 0; padding:0; list-style:none}
.report li{padding-left:18px; position:relative; margin-bottom:10px; color:var(--ink-2); font-size:1.01rem}
.report li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:99px; background:var(--ink-3)}
@media(max-width:820px){.report{grid-template-columns:1fr; gap:26px}}
.notdo{background:#F4F6F7; border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,40px)}
.notdo ul{margin:16px 0 0; padding:0; list-style:none; columns:2; column-gap:40px}
.notdo li{margin-bottom:10px; color:var(--ink-2); font-size:1.01rem; break-inside:avoid; padding-left:22px; position:relative}
.notdo li::before{content:""; position:absolute; left:0; top:.86em; width:9px; height:1.5px; background:var(--ink-3)}
@media(max-width:700px){.notdo ul{columns:1}}


/* --- Ihre Vorteile --- */
.adv{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.adv div{background:var(--paper); padding:30px 28px 32px; transition:transform .18s ease, box-shadow .18s ease}
.adv div:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(19,26,32,.13); position:relative; z-index:1}
.adv h3{font-size:1.06rem; margin-bottom:8px; line-height:1.3}
.adv p{font-size:.99rem; color:var(--ink-2); margin:0}
/* Abgesetzte Gegenzeile ("Ein Sprachmodell ...") — vom Fliesstext getrennt,
   damit die Kachel in Behauptung und Gegenprobe zerfaellt statt in einen Block */
.adv p.vs{margin-top:14px; padding:12px 0 0 20px; border-top:1px solid var(--line);
  font-size:.93rem; color:var(--ink-2); position:relative}
.adv p.vs::before{content:"\00d7"; position:absolute; left:0; top:11px;
  font-family:Archivo,sans-serif; font-weight:700; color:var(--lacquer); opacity:.75}
@media(max-width:900px){.adv{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.adv{grid-template-columns:1fr}}

/* --- Mittiger Handlungsaufruf --- */
.midcta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  background:var(--deep); color:#fff; border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:clamp(26px,3.2vw,40px) clamp(26px,3.5vw,48px)}
.midcta h3{color:#fff; font-size:clamp(1.2rem,2.1vw,1.55rem); max-width:34ch}
.midcta p{color:rgba(255,255,255,.75); font-size:1rem; margin:10px 0 0; max-width:52ch}
.midcta .acts{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.midcta a.plain{font-family:Archivo,sans-serif; font-weight:600; font-size:.95rem; color:#fff; text-decoration:none; white-space:nowrap}
.midcta a.plain:hover{text-decoration:underline}


/* --- Diagonal geteiltes Bildpaar (Kontakt) --- */
/* Diagonale im Container: oben 66%, unten 54%. Jede Haelfte hat einen eigenen
   Rahmen, damit das ganze Motiv im Keil sichtbar ist und nicht nur dessen linke Haelfte. */
.dsplit{position:relative; margin:20px 0 0; border-radius:var(--r-s); overflow:hidden; aspect-ratio:16/7}
.dsplit span{position:absolute; top:0; bottom:0; overflow:hidden}
.dsplit span img{width:100%; height:100%; object-fit:cover; display:block}
.dsplit span:first-child{left:0; width:66%; clip-path:polygon(0 0, 100% 0, 81.8% 100%, 0 100%)}
.dsplit span:first-child img{object-position:center 45%}
.dsplit span:last-child{left:55.3%; width:44.7%; clip-path:polygon(26.9% 0, 100% 0, 100% 100%, 0 100%)}


/* --- Kopf der Radar-Unterseite --- */
.topbar.sub .wrap{height:88px}
.brand.sme img{width:auto; height:64px; opacity:1}
@media(max-width:520px){.brand.sme img{height:50px}}


/* --- Kontaktkarte auf der Unterseite, einspaltig --- */
.contact.single{grid-template-columns:1fr}
.contact.single .cdl{display:flex; flex-wrap:wrap; gap:16px 44px; max-width:none}
.contact.single .cdl>div{min-width:0}
.contact.single .cdl a{white-space:nowrap}
@media(max-width:700px){.contact.single .cdl a{white-space:normal; word-break:break-word}}
.sig{margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-family:Archivo,sans-serif; font-size:.88rem; color:var(--ink-3)}


/* --- Hero der Unterseite mit angeschnittenem Dossier --- */
.sub-hero{position:relative; overflow:hidden}
.sub-hero .inner{display:grid; grid-template-columns:1fr 300px; gap:46px; align-items:center}
.sub-hero .doc{margin:0; transform:rotate(-4.5deg); border-radius:4px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.14)}
.sub-hero .doc img{width:100%; display:block}
@media(max-width:900px){.sub-hero .inner{grid-template-columns:1fr}.sub-hero .doc{display:none}}

/* --- Dunkler Block mitten auf der Seite --- */
.darkblock{background:var(--deep); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:clamp(30px,4vw,56px)}
.darkblock .head h2{color:#fff}
.darkblock .head .eyebrow{color:rgba(255,255,255,.5)}
.darkblock .head p{color:rgba(255,255,255,.78)}

/* --- Achsenmotiv --- */
.axes{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:30px 30px 32px}
.axes .ttl{font-family:Archivo,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:20px}
.axes .row{margin-bottom:16px}
.axes .row:last-of-type{margin-bottom:0}
.axes .nm{font-family:Archivo,sans-serif; font-size:.92rem; font-weight:600; margin-bottom:6px}
.axes .bar{height:22px; border-radius:3px; color:#fff; font-family:Archivo,sans-serif;
  font-size:.74rem; font-weight:600; display:flex; align-items:center; padding:0 9px}
.axes .bar.hoch{background:#33795f; width:100%}
.axes .bar.mittel{background:#6faa80; width:66%}
.axes .bar.niedrig{background:#d08b33; width:33%}
.axes p.cap{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--ink-2)}
.split{display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:28px}}

/* --- Kontaktkarte mit Portrait --- */
.ctwo{display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:center}
.ctwo figure{margin:0; border-radius:var(--r-s); overflow:hidden; box-shadow:var(--shadow)}
.ctwo figure img{width:100%; display:block; aspect-ratio:4/5; object-fit:cover; object-position:38% 22%}
@media(max-width:860px){.ctwo{grid-template-columns:1fr}.ctwo figure{max-width:280px}}

.dosslist{columns:2; column-gap:44px; margin-top:6px}
.dosslist li{break-inside:avoid; margin-bottom:11px}
@media(max-width:820px){.dosslist{columns:1}}
.limits{background:#F4F6F7; border:1px solid var(--line); border-radius:var(--r-s);
  padding:22px 26px; margin-top:26px}
.limits .ttl{font-family:Archivo,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
.limits ul{margin:0; padding:0; list-style:none; columns:2; column-gap:40px}
.limits li{margin-bottom:9px; padding-left:20px; position:relative; font-size:.96rem; color:var(--ink-2); break-inside:avoid}
.limits li::before{content:""; position:absolute; left:0; top:.82em; width:9px; height:1.5px; background:var(--ink-3)}
@media(max-width:760px){.limits ul{columns:1}}


/* --- Ablauf als Abfolge statt Kartenraster --- */
.flow{position:relative; margin-top:4px}
.flow .st{display:grid; grid-template-columns:76px 1fr; gap:26px; padding:24px 0; border-bottom:1px solid var(--line); align-items:start}
.flow .st:last-child{border-bottom:0}
.flow .n{font-family:Archivo,sans-serif; font-size:1.7rem; font-weight:700; color:var(--lacquer); line-height:1; padding-top:2px; opacity:.85}
.flow h3{margin-bottom:8px; font-size:1.12rem}
.flow p{font-size:1.01rem; color:var(--ink-2); max-width:72ch}
@media(max-width:640px){.flow .st{grid-template-columns:48px 1fr; gap:16px}.flow .n{font-size:1.3rem}}

/* --- Lieferobjekte auf getöntem Grund --- */
.tinted{background:var(--hall-deep); border-radius:var(--r); padding:clamp(28px,3.6vw,52px)}
.tinted .deliver article{box-shadow:0 1px 2px rgba(19,26,32,.05), 0 8px 22px rgba(19,26,32,.08)}
.regio{margin-top:24px; font-family:Archivo,sans-serif; font-size:.92rem; color:var(--ink-2);
  background:var(--paper); border-radius:var(--r-s); padding:16px 20px}
.regio b{color:var(--ink); font-weight:600}
/* Auf weissem Grund waere der Kasten unsichtbar — dort getoent absetzen */
.card .regio{background:#F4F6F7; border:1px solid var(--line)}


/* --- Preis auf den Lieferobjekt-Karten --- */
.deliver .price{font-family:Archivo,sans-serif; font-size:1.5rem; font-weight:700;
  color:var(--ink); letter-spacing:-.015em; margin-top:18px; line-height:1.2}
.deliver .price span{display:block; font-size:.82rem; font-weight:500; color:var(--ink-2);
  letter-spacing:0; margin-top:4px}

/* --- Kleine Gegenrechnung neben einem Argument --- */
.calc{background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow); padding:30px}
.calc .ttl{font-family:Archivo,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:20px}
.calc dl{display:grid; grid-template-columns:1fr auto; gap:16px 18px; margin:0; align-items:baseline}
.calc dt{font-family:Archivo,sans-serif; font-size:.95rem; font-weight:600; color:var(--ink)}
.calc dd{margin:0; font-family:Archivo,sans-serif; font-size:1.16rem; font-weight:700;
  color:var(--lacquer); text-align:right; white-space:nowrap}
.calc p{margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--ink-2)}

/* --- Rechtsseiten (Impressum, Datenschutz) --- */
.legal{max-width:78ch}
.legal h1{font-size:clamp(1.8rem,3.4vw,2.5rem); margin-bottom:10px}
.legal .stand{font-family:Archivo,sans-serif; font-size:.86rem; color:var(--ink-3); margin:0 0 34px}
.legal h2{font-size:1.26rem; margin:36px 0 12px; padding-top:26px; border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:0}
.legal h3{font-size:1.02rem; margin:22px 0 6px}
.legal p{font-size:1.02rem; color:var(--ink-2)}
.legal a{color:var(--lacquer)}
.legal ul{margin:12px 0 0; padding:0; list-style:none}
.legal li{padding-left:20px; position:relative; margin-bottom:9px; font-size:1.01rem; color:var(--ink-2)}
.legal li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:99px; background:var(--ink-3)}
.legal dl{display:grid; grid-template-columns:210px 1fr; gap:0 30px; margin:0}
.legal dt{font-family:Archivo,sans-serif; font-size:.85rem; font-weight:600; color:var(--ink-3); padding:16px 0 0}
.legal dd{margin:0; padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:1.01rem}
.legal dd:last-of-type{border-bottom:0}
@media(max-width:720px){.legal dl{grid-template-columns:1fr}.legal dt{padding-top:18px}.legal dd{padding-top:2px}}