/* ============================================================
   ESSENTIALS DNA — Partnerbereich V2 (Entwurf 15.10.2026)
   Ergaenzt style.css additiv. Lernstand aus dem Benchmark madeforme.health:
   Produkt als Gegenstand, Farbcode je Analyse, Faktorenraster mit Gennamen,
   Kennzahlen-Kacheln, "Passt, wenn"-Listen, Ablauf mit Illustration.
   ============================================================ */

:root {
  --radius: 14px;
  --shadow: 0 18px 40px rgba(15,26,58,0.10);
  /* Farbcode je Analyselinie: --c Flaeche, --ci Schrift (kontrastsicher auf Weiss und Tint), --ct Tint */
}
.linie-ernaehrung { --c:#2E8B62; --ci:#1F6B4A; --ct:#E6F3EC; }
.linie-gewicht    { --c:#E0A33A; --ci:#8A5A0F; --ct:#FBF1DE; }
.linie-training   { --c:#2F6DB5; --ci:#225490; --ct:#E5EEF8; }
.linie-haut       { --c:#A64B72; --ci:#87395B; --ct:#F7E8EF; }
.linie-naehrstoffe{ --c:#1AACB0; --ci:#0F7A7E; --ct:#E6F5F5; }
.linie-gesundheit { --c:#0F1A3A; --ci:#0F1A3A; --ct:#ECEFF1; }

/* Entwurfsmarker: nur sichtbar, solange ENTWURF=True im Generator */
.entwurf-flag {
  display:inline-block; background:#FFF3C4; color:#6B5300; border:1px dashed #C9A300;
  font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.2rem 0.5rem; border-radius:4px; margin:0 0 0.6rem;
}
.entwurf-box { outline:2px dashed #C9A300; outline-offset:6px; border-radius:6px; }
.entwurf-leiste {
  position:relative; z-index:101; background:#FFF3C4; color:#6B5300; text-align:center;
  font-size:0.8rem; padding:0.45rem var(--pad); border-bottom:1px solid #E6D17A;
}

/* Navigation V2: Abstand fuer Entwurfsleiste */
body.v2 nav { top: 0; }
body.v2.mit-leiste nav { top: 31px; }
.nav-menu a.aktiv { color: var(--teal); opacity: 1; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.95rem 1.5rem; border-radius:999px; transition:all 0.2s; cursor:pointer; border:0;
  font-family:inherit;
}
.btn-primaer { background:var(--teal); color:#fff; }
.btn-primaer:hover { background:var(--navy); }
.btn-linie { background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--navy); }
.btn-linie:hover { background:var(--navy); color:#fff; }
.btn-farbe { background:var(--c); color:#fff; }
.btn-farbe:hover { filter:brightness(0.9); }
.linie-gewicht .btn-farbe { color:var(--navy); }

/* ---------------- HERO V2 (geteilt, mit Produkt-Stillleben) ---------------- */
.hero2 {
  position:relative; overflow:hidden;
  padding: calc(6.5rem + 2vw) var(--pad) clamp(3rem, 6vw, 5rem);
  background: var(--bg);
}
.hero2-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items:center;
}
.hero2-kicker { font-size:0.74rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal); margin-bottom:1.2rem; }
.hero2 h1 {
  font-weight:100; font-size: clamp(2.3rem, 5.4vw, 4.9rem); line-height:1.04; letter-spacing:-0.025em; color:var(--navy);
  margin-bottom:1.4rem;
}
.hero2 h1 em { color:var(--teal); font-style:normal; font-weight:300; }
.hero2-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height:1.6; max-width:50ch; margin-bottom:2rem; }
.hero2-ctas { display:flex; gap:0.8rem; flex-wrap:wrap; }
.hero2-bild { position:relative; }
.hero2-bild svg { width:100%; height:auto; display:block; }
.hero2-bild figcaption, .bild-hinweis { font-size:0.72rem; color:var(--muted); margin-top:0.6rem; text-align:right; }

.vertrauen {
  max-width:1280px; margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:1px;
  background: var(--border); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden;
}
.vertrauen div { background:#fff; padding:1.1rem 1.2rem; }
.vertrauen strong { display:block; font-size:1.05rem; font-weight:400; color:var(--navy); margin-bottom:0.15rem; }
.vertrauen span { font-size:0.78rem; color:var(--muted); line-height:1.4; display:block; }
@media (max-width: 1000px) { .vertrauen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .hero2-inner { grid-template-columns: 1fr; } .hero2-bild { max-width:520px; } }

/* Produkt-Hero (Analyse-Seite): farbige Buehne */
.hero-analyse { background: var(--ct); }
.hero-analyse .hero2-kicker { color: var(--ci); }
.hero-analyse h1 em { color: var(--ci); }

/* ---------------- BAND (Statement) ---------------- */
.band {
  background: var(--navy); color:#fff; padding: clamp(3.5rem, 7vw, 6rem) var(--pad);
}
.band-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.band h2 { font-weight:100; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height:1.1; letter-spacing:-0.02em; }
.band h2 em { color: var(--teal); font-style:normal; }
.band p { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height:1.7; color: rgba(255,255,255,0.86); }
@media (max-width: 800px) { .band-inner { grid-template-columns: 1fr; } }

/* ---------------- Sektion V2 (ohne Seitennummer-Spalte) ---------------- */
.s2 { padding: var(--vpad) var(--pad); border-top:1px solid var(--border); background: var(--bg); }
.s2.weiss { background:#fff; }
.s2.tint { background: var(--ct, var(--bg-2)); }
.s2.dunkel { background: var(--navy); color:#fff; border-top-color: rgba(255,255,255,0.1); }
.s2-inner { max-width:1280px; margin:0 auto; }
.s2-kopf { max-width: 780px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.s2-kopf.mitte { margin-left:auto; margin-right:auto; text-align:center; }
.s2-eyebrow { font-size:0.74rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color: var(--ci, var(--teal)); margin-bottom:1rem; }
.s2.dunkel .s2-eyebrow { color: var(--teal); }
.s2 h2 { font-weight:100; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height:1.12; letter-spacing:-0.018em; margin-bottom:1.2rem; }
.s2 h2 em { color: var(--ci, var(--teal)); font-style:normal; }
.s2.dunkel h2 em { color: var(--teal); }
.s2-p { font-size: clamp(1rem, 1.3vw, 1.14rem); line-height:1.68; max-width: 64ch; margin-bottom:1rem; }
.s2.dunkel .s2-p { color: rgba(255,255,255,0.86); }
.s2-p a { color: var(--teal-2); border-bottom: 1px solid currentColor; }

/* ---------------- Analyse-Karten (Ueberblick, farbcodiert) ---------------- */
.analyse-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.analyse-karte {
  background:#fff; border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--border); transition: transform .18s, box-shadow .18s;
}
.analyse-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.analyse-karte-kopf { background: var(--c); color:#fff; padding: 1.4rem 1.3rem 1.2rem; min-height: 132px; }
.linie-gewicht .analyse-karte-kopf { color: var(--navy); }
.analyse-karte-kopf .tag { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; }
.analyse-karte-kopf h3 { font-weight:300; font-size:1.7rem; line-height:1.1; margin-top:0.5rem; }
.analyse-karte-body { padding: 1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.analyse-karte-body p { font-size:0.88rem; line-height:1.55; color: var(--muted); margin-bottom: 0.9rem; }
.haken { list-style:none; margin: 0 0 1.2rem; display:grid; gap:0.45rem; }
.haken li { position:relative; padding-left:1.5rem; font-size:0.88rem; line-height:1.45; color: var(--navy); }
.haken li::before {
  content:''; position:absolute; left:0; top:0.18rem; width:1rem; height:1rem; border-radius:50%;
  background: var(--c, var(--teal)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.linie-gewicht .haken li::before { background-color: var(--ci); }
.analyse-karte .mehr { margin-top:auto; font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--ci); }
@media (max-width: 1200px) { .analyse-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .analyse-grid { grid-template-columns: 1fr; } }

.gesundheit-hinweis {
  margin-top: 1rem; border:1px dashed rgba(15,26,58,0.25); border-radius: var(--radius); padding: 1.1rem 1.3rem;
  display:flex; justify-content:space-between; align-items:center; gap: 1rem; flex-wrap:wrap; background:#fff;
}
.gesundheit-hinweis p { font-size:0.92rem; color: var(--navy); max-width: 80ch; }
.gesundheit-hinweis a { font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--navy); white-space:nowrap; }

/* ---------------- Matrix Rolle x Analyse ---------------- */
.matrix { width:100%; border-collapse: separate; border-spacing:0; background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.matrix th, .matrix td { padding: 0.9rem 1rem; text-align:center; border-bottom:1px solid var(--border); font-size:0.9rem; }
.matrix th:first-child, .matrix td:first-child { text-align:left; }
.matrix thead th { font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color: var(--muted); background: var(--bg); }
.matrix tbody tr:last-child td { border-bottom:0; }
.matrix td a { color: var(--navy); border-bottom: 1px solid var(--border); }
.punkt { display:inline-block; width:14px; height:14px; border-radius:50%; background: var(--c); }
.punkt.leer { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.matrix-legende { font-size:0.8rem; color: var(--muted); margin-top:0.8rem; }
.matrix-wrap { overflow-x:auto; }

/* ---------------- Feature: Bericht in der Hand ---------------- */
.feature { display:grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius); overflow:hidden; background:#fff; border:1px solid var(--border); }
.feature-bild { background: var(--ct, var(--teal-3)); display:flex; align-items:center; justify-content:center; padding: clamp(1.5rem, 4vw, 3rem); }
.feature-bild svg { width:100%; max-width:440px; height:auto; }
.feature-text { padding: clamp(1.8rem, 4vw, 3.2rem); }
.feature-text h3 { font-weight:100; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height:1.15; margin-bottom: 1rem; }
.feature-text > p { font-size:1rem; line-height:1.65; color: var(--navy); margin-bottom: 1.4rem; }
details.akk { border-top:1px solid var(--border); }
details.akk:last-of-type { border-bottom:1px solid var(--border); }
details.akk summary { list-style:none; cursor:pointer; padding: 1rem 0; font-weight:700; font-size:0.98rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
details.akk summary::-webkit-details-marker { display:none; }
details.akk summary::after { content:'+'; color: var(--teal); font-size:1.4rem; font-weight:300; }
details.akk[open] summary::after { content:'−'; }
details.akk p { font-size:0.94rem; line-height:1.65; color: var(--muted); padding: 0 0 1.1rem; max-width:62ch; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* ---------------- Ablauf mit Illustration ---------------- */
.ablauf { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: schritt; }
.ablauf-schritt { background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.ablauf-bild { background: var(--ct, var(--teal-3)); aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; }
.ablauf-bild svg { width:62%; height:auto; }
.ablauf-text { padding: 1.2rem 1.3rem 1.5rem; }
.ablauf-num { font-size: 2.6rem; font-weight:100; color: var(--ci, var(--teal)); line-height:1; letter-spacing:-0.03em; margin-bottom:0.5rem; }
.ablauf-text h3 { font-size:1.02rem; font-weight:700; margin-bottom:0.45rem; }
.ablauf-text p { font-size:0.9rem; line-height:1.6; color: var(--muted); }
@media (max-width: 1000px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ablauf { grid-template-columns: 1fr; } }

/* ---------------- Leistungen (Partnerpaket) ---------------- */
.leistungen { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.leistung { background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.leistung .icon { width:40px; height:40px; color: var(--teal); margin-bottom: 1rem; }
.leistung .icon svg { width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.leistung h3 { font-size:1.1rem; font-weight:400; margin-bottom: 0.5rem; color:#fff; }
.leistung p { font-size:0.9rem; line-height:1.6; color: rgba(255,255,255,0.78); }
@media (max-width: 900px) { .leistungen { grid-template-columns: 1fr; } }

/* ---------------- Zwei Wege ---------------- */
.wege { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.weg { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.8rem 1.6rem; }
.weg .tag { font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--teal-2); }
.weg h3 { font-weight:300; font-size:1.6rem; margin: 0.4rem 0 0.8rem; line-height:1.15; }
.weg p { font-size:0.95rem; line-height:1.65; color: var(--navy); margin-bottom:1rem; }
.weg .haken li::before { background-color: var(--teal); }
@media (max-width: 760px) { .wege { grid-template-columns: 1fr; } }

/* ---------------- Faktorenraster ---------------- */
.faktoren { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.faktor { background:#fff; border-radius: 12px; padding: 1.2rem 1.25rem 1.3rem; border:1px solid var(--border); }
.faktor h3 { font-weight:400; font-size:1.12rem; line-height:1.25; color: var(--navy); }
.faktor .gen { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--ci); margin: 0.3rem 0 0.7rem; padding-bottom:0.6rem; border-bottom: 2px solid var(--c); display:inline-block; }
.faktor p { font-size:0.9rem; line-height:1.55; color: var(--muted); }
@media (max-width: 900px) { .faktoren { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .faktoren { grid-template-columns: 1fr; } }

/* ---------------- Kennzahlen ---------------- */
.kennzahlen { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kennzahl { background: #fff; border-radius: var(--radius); padding: 1.5rem 1.4rem; border:1px solid var(--border); }
.kennzahl .zahl { font-weight:100; font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height:1; color: var(--ci, var(--teal)); letter-spacing:-0.03em; }
.kennzahl .label { font-weight:700; font-size:0.92rem; margin: 0.5rem 0 0.4rem; }
.kennzahl p { font-size:0.88rem; line-height:1.55; color: var(--muted); }
@media (max-width: 800px) { .kennzahlen { grid-template-columns: 1fr; } }

/* ---------------- Paket-Karte (ueberlappend) ---------------- */
.paket { max-width: 980px; margin: clamp(-4rem, -5vw, -2rem) auto 0; position:relative; z-index:2;
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3rem);
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 3rem); }
.paket h2 { font-weight:100; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1.15; margin-bottom: 1rem; }
.paket h2::after { content:''; display:block; width:48px; height:2px; background: var(--c); margin-top: 1rem; }
.paket p { font-size: 1rem; line-height:1.65; margin-bottom: 1rem; }
.paket .haken li { font-size: 0.95rem; }
@media (max-width: 800px) { .paket { grid-template-columns: 1fr; } }

/* ---------------- Passt-wenn + Gespraechsanlaesse ---------------- */
.zweispaltig { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items:start; }
.passt { list-style:none; }
.passt li { border-top:1px solid var(--border); padding: 0.95rem 0 0.95rem 2rem; position:relative; font-size: 1rem; line-height:1.5; }
.passt li:last-child { border-bottom:1px solid var(--border); }
.passt li::before { content:'…'; position:absolute; left:0; top:0.85rem; color: var(--ci, var(--teal)); font-weight:700; }
.anlass { background: var(--c); color:#fff; border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-bottom: 0.8rem; }
.linie-gewicht .anlass { color: var(--navy); }
.anlass .tag { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.85; }
.anlass p { font-size: 1.22rem; font-weight:300; line-height:1.35; margin-top:0.4rem; }
@media (max-width: 800px) { .zweispaltig { grid-template-columns: 1fr; } }

/* ---------------- Ehrlicher Wissenschaftsblock ---------------- */
.wissen-box { background:#fff; border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.6rem; }
.wissen-box p { font-size: 0.95rem; line-height: 1.7; color: var(--navy); margin-bottom: 0.9rem; }
.wissen-box p:last-child { margin-bottom:0; }
.s2.dunkel .wissen-box { background: rgba(255,255,255,0.06); }
.s2.dunkel .wissen-box p { color: rgba(255,255,255,0.88); }

/* Evidenzstufen */
.stufen { display:grid; gap: 0.9rem; }
.stufe { display:grid; grid-template-columns: 120px 1fr auto; gap: 1.5rem; align-items:start; background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.stufe .nr { font-weight:100; font-size: 3rem; line-height:1; color: var(--teal); }
.stufe h3 { font-weight:400; font-size: 1.2rem; margin-bottom: 0.45rem; }
.stufe p { font-size: 0.94rem; line-height: 1.65; color: var(--muted); max-width: 70ch; }
.stufe .status { font-size: 0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; white-space:nowrap; }
.status.belegt { background:#E6F3EC; color:#1F6B4A; }
.status.gekennzeichnet { background:#FBF1DE; color:#8A5A0F; }
.status.offen { background:#ECEFF1; color: var(--navy); }
@media (max-width: 760px) { .stufe { grid-template-columns: 1fr; gap: 0.6rem; } }

/* Zitat */
.zitat { max-width: 920px; margin: 0 auto; text-align:center; }
.zitat blockquote { font-weight:300; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height:1.45; color: var(--navy); }
.zitat blockquote::before { content:'“'; display:block; font-size: 4rem; line-height: 0.6; color: var(--teal); margin-bottom: 1rem; }
.zitat .aussage { font-weight:300; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height:1.45; color: var(--navy); }
.zitat .aussage::before { content:''; display:block; width:48px; height:3px; background: var(--teal); margin: 0 auto 1.4rem; }
.zitat cite { display:block; margin-top: 1.2rem; font-style:normal; font-size:0.85rem; color: var(--muted); }
.zitat cite a { color: var(--teal-2); border-bottom:1px solid currentColor; }

/* Weitere Analysen */
.weitere { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.weitere a { display:block; background:#fff; border:1px solid var(--border); border-top: 4px solid var(--c); border-radius: 10px; padding: 1rem 1.1rem; transition: transform .18s, box-shadow .18s; }
.weitere a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.weitere .tag { font-size:0.66rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--ci); }
.weitere strong { display:block; font-weight:400; font-size:1.1rem; margin-top: 0.3rem; }
@media (max-width: 900px) { .weitere { grid-template-columns: 1fr 1fr; } }

/* Zwei-Wege-Abschluss */
.abschluss { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.abschluss > div { border-radius: var(--radius); padding: 1.8rem 1.6rem; }
.abschluss .a { background: var(--navy); color:#fff; }
.abschluss .b { background:#fff; border:1px solid var(--border); }
.abschluss .tag { font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.75; }
.abschluss h3 { font-weight:300; font-size: 1.6rem; line-height:1.2; margin: 0.5rem 0 0.8rem; }
.abschluss p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.3rem; }
.abschluss .a p { color: rgba(255,255,255,0.82); }
@media (max-width: 760px) { .abschluss { grid-template-columns: 1fr; } }

/* Laborzahlen */
.laborzahlen { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.laborzahlen div { border-top: 2px solid var(--teal); padding-top: 1rem; }
.laborzahlen strong { display:block; font-weight:100; font-size: clamp(2rem, 3.6vw, 3rem); line-height:1; color: var(--teal); }
.laborzahlen span { display:block; font-size:0.85rem; color: rgba(255,255,255,0.78); margin-top: 0.5rem; line-height:1.45; }
@media (max-width: 800px) { .laborzahlen { grid-template-columns: 1fr 1fr; } }

/* Rollenverteilung */
.rollen { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rolle { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.5rem; }
.rolle .tag { font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--teal-2); }
.rolle h3 { font-weight:300; font-size: 1.5rem; margin: 0.4rem 0 0.9rem; }
@media (max-width: 760px) { .rollen { grid-template-columns: 1fr; } }

/* Rollen-Kacheln (Fuer wen) */
.fuerwen { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.fuerwen a { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.3rem; display:flex; flex-direction:column; gap:0.5rem; transition: transform .18s, box-shadow .18s; }
.fuerwen a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fuerwen .tag { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--teal-2); }
.fuerwen strong { font-weight:400; font-size: 1.15rem; line-height:1.3; }
.fuerwen span { font-size: 0.86rem; color: var(--muted); line-height:1.5; }
@media (max-width: 1000px) { .fuerwen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .fuerwen { grid-template-columns: 1fr; } }

/* Kontakt-Checkbox sauber ausrichten (Befund Live-Seite 15.10.: Haken stand mittig) */
.form-group.check { display:flex; align-items:flex-start; gap:0.75rem; }
.form-group.check input { width:auto; margin-top:3px; flex-shrink:0; }
.form-group.check label { text-transform:none; letter-spacing:0; font-size:0.85rem; color: var(--navy); }

/* Bericht-Schema */
.schema-hinweis { font-size: 0.75rem; color: var(--muted); margin-top: 0.6rem; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Fusszeilen-Links umbrechen statt seitlich ueberlaufen (Mobil 390px) */
.foot-links { flex-wrap: wrap; gap: .6rem 1.5rem; }

/* Mobil-Befunde 15.10.: Matrix-Scrollcontainer faengt absolute sr-only-Spans ein; engere Zellen */
.matrix-wrap { position: relative; }
@media (max-width: 560px) {
  .matrix th, .matrix td { padding: 0.6rem 0.35rem; font-size: 0.78rem; }
  .matrix thead th { font-size: 0.56rem; letter-spacing: 0.04em; }
}
/* Drei Gespraechssaetze (Wissenschaft) */
.analyse-grid.saetze { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .analyse-grid.saetze { grid-template-columns: 1fr; } }

/* Mobil-Kopf 15.10.: Leiste einzeilig, Nav-Knopf kompakt, Hinweis an der Matrix */
.entwurf-leiste { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matrix-hinweis { display: none; font-size: 0.75rem; color: var(--muted); margin: 0 0 0.5rem; }
@media (max-width: 768px) {
  .entwurf-leiste .nur-gross, .nav-cta .nur-gross { display: none; }
  .nav-cta { padding: 0.55rem 0.8rem; font-size: 0.66rem; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 560px) {
  .matrix-hinweis { display: block; }
  .vertrauen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Fotos (15.10.2026, Karsten: "wir brauchen mehr Bilder") ---------- */
.foto-rahmen { position: relative; border-radius: 14px; overflow: visible; }
.foto-rahmen img { display:block; width:100%; height:auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px rgba(15,26,58,.14); }
.foto-karte { position:absolute; left: -6%; bottom: -10%; width: 36%; filter: drop-shadow(0 12px 22px rgba(15,26,58,.22)); }
.foto-karte svg { width:100%; height:auto; display:block; }
.hero2-bild .foto-rahmen { margin-bottom: 2.2rem; }
@media (max-width: 860px) { .foto-karte { left: 4%; width: 32%; } }

.feature-bild.mit-foto { padding: clamp(1rem, 3vw, 2rem); flex-direction: column; align-items: stretch; }
.feature-bild.mit-foto .bild-hinweis { margin-top: .5rem; }

.betriebe { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.betrieb { background:#fff; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: transform .18s, box-shadow .18s; color: var(--navy); }
.betrieb:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.betrieb .foto-rahmen, .betrieb .foto-rahmen img { border-radius: 0; box-shadow: none; }
.betrieb-text { padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.betrieb-text strong { font-weight:400; font-size:1.1rem; line-height:1.3; }
.betrieb-text span { font-size:.86rem; color: var(--muted); line-height:1.5; }
.betrieb-text em { font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--teal-2); margin-top:auto; }
.matrix-titel { font-size: 1.15rem; font-weight: 400; margin: 2.6rem 0 1rem; }
@media (max-width: 1000px) { .betriebe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .betriebe { grid-template-columns: 1fr; } }
.rolle-foto { max-width: none; margin: 0; padding: 0 var(--pad) clamp(1.5rem, 4vw, 3rem); }
.rolle-foto .foto-rahmen img { aspect-ratio: 21 / 9; }
@media (max-width: 560px) { .rolle-foto .foto-rahmen img { aspect-ratio: 4 / 3; } }
/* Echte Laborfotos Novogenia (15.10.2026) */
.galerie { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.galerie-bild { margin:0; }
.galerie-bild .foto-rahmen img { box-shadow: 0 10px 26px rgba(15,26,58,.10); }
.galerie-bild figcaption { margin-top:.6rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--teal-2); font-weight:600; }
@media (max-width: 900px) { .galerie { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr; } }
.zitat-foto { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.zitat-foto figure { margin:0; }
.zitat-foto figcaption { font-size:0.72rem; color:var(--muted); margin-top:0.6rem; }
.zitat-foto .zitat { text-align:left; margin:0; }
.zitat-foto .zitat .aussage::before { margin: 0 0 1.4rem; }
@media (max-width: 860px) { .zitat-foto { grid-template-columns: 1fr; } }
.standort-bild { max-width: 640px; margin: 0 auto; }
.standort-bild svg { width:100%; height:auto; display:block; }
.standort-bild figcaption { font-size:0.72rem; color:var(--muted); margin-top:0.6rem; text-align:right; }