/* Angebotskalkulation, Synapse OS. Helle Variante des synapseos.io-Designs, Kapitel-Chips im Stil der Herkunftsmarken.
   Schrift lokal gehostet (Inter, SIL OFL). Keine Cookies, kein Tracking, keine Drittanbieter. */
@font-face { font-family: "Inter"; src: url("/_shared/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --paper2: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --ink2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  --line: #e2e8f0;
  --line2: #cbd5e1;
  --em: #047857;
  --em5: #10b981;
  --embg: #ecfdf5;
  --amber: #b45309;
  --amberbg: #fffbeb;
  --mono: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.62 "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--em); }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 520px) { .wrap { padding: 0 16px; } }
.muted { color: var(--muted); }

/* Kopf */
.akzent { height: 3px; background: linear-gradient(90deg, var(--em5), #14b8a6, var(--em5)); }
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(246,245,240,.88); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--line); }
.kopf .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 62px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kachel { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #34d399, #14b8a6); display: grid; place-items: center; flex: none; }
.kachel svg { width: 19px; height: 19px; color: #0f172a; }
.wortmarke { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.wortmarke .s { color: var(--ink); }
.wortmarke .o { color: var(--em5); }
.wortmarke small { display: block; font: 500 11px/1.3 var(--mono); color: var(--muted); letter-spacing: .04em; margin-top: 3px; text-transform: uppercase; }
nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: 14.5px; font-weight: 500; }
nav a { color: var(--ink2); text-decoration: none; }
nav a:hover { color: var(--ink); }
nav a.knopf { background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 600; }
nav a.knopf:hover { background: var(--em); }
@media (max-width: 860px) { nav a:not(.knopf) { display: none; } }

/* Typografie */
h1, h2, h3 { margin: 0; color: var(--ink); }
h1 { font-weight: 300; font-size: clamp(38px, 6vw, 68px); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-weight: 300; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.028em; max-width: 17ch; }
h1 b, h2 b { font-weight: 700; }
h1 em, h2 em { font-style: normal; color: var(--em); font-weight: 600; }
h3 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lead { font-size: 19px; color: var(--ink2); max-width: 60ch; }
.unter { color: var(--muted); max-width: 62ch; margin: 22px 0 0; font-size: 17.5px; }

/* Kapitelzeile: 01 / AUSGANGSLAGE ---------- */
.kap { display: flex; align-items: center; gap: 16px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--em); margin: 0 0 30px; }
.kap::after { content: ""; flex: 1; border-top: 1px dashed var(--line2); }

section { padding: 104px 0; }
section.zwei { background: var(--paper2); }
@media (max-width: 760px) { section { padding: 68px 0; } }

/* Knöpfe */
.btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--em); color: #fff; padding: 13px 22px; border-radius: 9px; font-weight: 600; font-size: 15.5px; text-decoration: none; border: 1px solid var(--em); }
.btn:hover { background: #065f46; }
.btn.zwei { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.zwei:hover { background: var(--ink); color: #fff; }
.link { font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 92px 0 0; text-align: center; }
.hero .wrap { position: relative; z-index: 1; }
.hero .mono.oben { color: var(--em); display: inline-flex; gap: 12px; align-items: center; }
.hero .mono.oben::before, .hero .mono.oben::after { content: ""; width: 34px; border-top: 1px solid var(--em5); }
.hero h1 { margin: 22px auto 0; max-width: 16ch; }
.hero .lead { margin: 26px auto 0; }
.hero .lead b { color: var(--ink); }
.hero .btns { justify-content: center; margin-top: 32px; }
.hero .vertrauen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 26px auto 0; font: 500 11.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hero .vertrauen span::before { content: "✓ "; color: var(--em5); }
/* schwebende Herkunfts-Etiketten im Hintergrund */
.hero .etiketten { position: absolute; top: 0; left: 0; right: 0; height: 560px; z-index: 0; pointer-events: none; }
.hero .etiketten span { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 5px; border: 1px solid var(--line2); background: rgba(255,255,255,.55); color: var(--faint); }
.hero .etiketten span.g { color: #2f8f6b; border-color: #bfe3d1; }
.hero .etiketten span.a { color: #b7791f; border-color: #f1dcae; }
@media (max-width: 980px) { .hero .etiketten { display: none; } }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(18,22,29,.07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(#000 40%, transparent 85%); mask-image: linear-gradient(#000 40%, transparent 85%); }
.produkt { margin-top: 64px; padding-bottom: 96px; text-align: left; }

/* Fenster mit Bildschirmfoto */
.fenster { margin: 0; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -50px rgba(18,22,29,.45), 0 2px 8px rgba(18,22,29,.05); }
.fenster .leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f2ec; border-bottom: 1px solid var(--line); }
.fenster .leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d6d3c8; }
.fenster .leiste span { margin-left: 10px; font: 500 11px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster img, .shot img { display: block; width: 100%; height: auto; }
ol.legende { list-style: none; counter-reset: l; margin: 26px 0 0; padding: 0; display: grid; gap: 16px 32px; grid-template-columns: 1fr; }
@media (min-width: 820px) { ol.legende { grid-template-columns: repeat(3, 1fr); } }
ol.legende li { counter-increment: l; font-size: 15px; border-top: 1px solid var(--line2); padding-top: 14px; }
ol.legende li::before { content: "0" counter(l); display: block; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--em); margin-bottom: 8px; }
ol.legende b { display: block; color: var(--ink); }
ol.legende span { color: var(--muted); }
.bildnote { font: 500 11px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 18px 0 0; }

/* Karten */
.grid3, .grid2, .grid4 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, 1fr); } .grid2 { grid-template-columns: repeat(2, 1fr); } .grid4 { grid-template-columns: repeat(4, 1fr); } }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; box-shadow: 0 1px 2px rgba(18,22,29,.04); }
.karte .mono { color: var(--em); display: block; margin-bottom: 14px; }
.karte h3 { margin-bottom: 10px; }
.karte p { color: var(--muted); font-size: 15.5px; margin: 0; }
.karte .pillen { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pillen { display: flex; flex-wrap: wrap; gap: 7px; }
.pillen span { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 10px; background: #fff; }
.abschnitt-kopf { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: end; margin-bottom: 52px; }
@media (min-width: 980px) { .abschnitt-kopf { grid-template-columns: 1.15fr 1fr; } .abschnitt-kopf .unter { margin: 0; } }

/* Merksatz mit Linie */
.merksatz { margin: 44px 0 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--em5); font-size: clamp(20px, 2.4vw, 26px); font-weight: 300; line-height: 1.4; color: var(--ink); max-width: 46ch; }
.merksatz b { font-weight: 650; color: var(--em); }

/* Schritte mit Bildschirmfoto */
.bildzeile { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.bildzeile:first-of-type { border-top: 0; padding-top: 8px; }
@media (min-width: 940px) { .bildzeile { grid-template-columns: 1fr 1.12fr; gap: 64px; } .bildzeile.rechts > .text { order: 2; } }
.bildzeile figure { margin: 0; }
.bildzeile .mono { color: var(--em); }
.bildzeile .wort { display: block; font-weight: 300; font-size: clamp(40px, 5vw, 60px); letter-spacing: -.035em; line-height: 1.05; margin: 10px 0 16px; color: var(--ink); }
.bildzeile .text p { color: var(--ink2); font-size: 16.5px; margin: 0; }
.bildzeile .text p.imbild { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line2); font-size: 14.5px; color: var(--muted); }
.bildzeile .text p.imbild::before { content: "IM BILD  "; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--em); }
.shot { position: relative; max-height: 440px; overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -36px rgba(18,22,29,.35); }
.shot .leiste { padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f3f2ec; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.shot .leiste i { font-style: normal; color: var(--em5); }
.shot.fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
figcaption { font: 500 11px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.ergebnis ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ergebnis li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink2); font-size: 15.5px; }
.ergebnis li::before { content: "✓"; position: absolute; left: 4px; color: var(--em5); font-weight: 700; }
.ergebnis h3 { margin-bottom: 4px; }

/* Nutzen als Treppe */
.treppe { margin-top: 12px; border-top: 1px solid var(--line2); }
.stufe { display: grid; grid-template-columns: 1fr; gap: 10px 48px; padding: 30px 0; border-bottom: 1px solid var(--line2); }
@media (min-width: 900px) { .stufe { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.stufe .gross { font-weight: 300; font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -.04em; line-height: 1; color: var(--ink); transition: color .5s ease; }
.stufe .mono { color: var(--em); display: block; margin-bottom: 8px; }
.stufe p { margin: 0; color: var(--ink2); font-size: 16px; }
.stufe p b { color: var(--ink); }
.stufe .rechts { transition: opacity .5s ease; }
.fussnote { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* Rechner */
.rechner { margin-top: 64px; border: 1px solid var(--line2); border-radius: 14px; background: #fff; padding: 30px 28px; }
@media (max-width: 520px) { .rechner { padding: 24px 18px; } }
.rechner .mono { color: var(--em); display: block; margin-bottom: 10px; }
.rechner-kopf h3 { margin: 0 0 6px; font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.rechner-kopf p { margin: 0 0 22px; color: var(--muted); font-size: 15px; max-width: 70ch; }
.rechner-grid { display: grid; gap: 14px 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rechner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rechner-grid { grid-template-columns: repeat(4, 1fr); } }
.rechner label { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink2); }
.rechner input { font: 600 17px/1.3 "Inter", sans-serif; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line2); border-radius: 9px; background: var(--paper); width: 100%; }
.rechner input:focus { outline: 2px solid var(--em5); outline-offset: 1px; border-color: var(--em5); background: #fff; }
.rechner-ergebnis { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 22px; }
@media (min-width: 720px) { .rechner-ergebnis { grid-template-columns: 1fr 1fr 1.3fr; } }
.rechner-ergebnis div { background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.rechner-ergebnis span { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rechner-ergebnis b { display: block; font-size: 28px; font-weight: 400; letter-spacing: -.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rechner-ergebnis .haupt { border-color: #f1d79a; background: var(--amberbg); }
.rechner-ergebnis .haupt b { color: var(--amber); font-weight: 600; }
.rechner-fuss { margin: 16px 0 0; font-size: 14.5px; color: var(--ink2); }

/* Einstieg */
ol.schritte { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { ol.schritte { grid-template-columns: repeat(4, 1fr); } }
ol.schritte li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px 22px; }
ol.schritte li::before { content: "Schritt 0" counter(s) " / 04"; display: block; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--em); margin-bottom: 14px; }
ol.schritte h3 { margin-bottom: 8px; font-size: 17.5px; }
ol.schritte p { color: var(--muted); font-size: 15px; margin: 0; }
.aufwand { margin-top: 26px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .aufwand { grid-template-columns: 1fr 1fr; } }
.aufwand div { border-top: 1px solid var(--line2); padding-top: 14px; font-size: 15.5px; color: var(--ink2); }
.aufwand .mono { color: var(--em); display: block; margin-bottom: 6px; }

/* Branchen */
ul.branchen { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line2); }
@media (min-width: 860px) { ul.branchen { grid-template-columns: repeat(3, 1fr); column-gap: 32px; } }
ul.branchen li { padding: 18px 0; border-bottom: 1px solid var(--line2); }
ul.branchen b { display: block; font-weight: 600; }
ul.branchen span { color: var(--muted); font-size: 15px; }
ul.branchen li.anders b { color: var(--em); }

/* Fakten */
.fakten { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 860px) { .fakten { grid-template-columns: repeat(3, 1fr); } }
.fakt { border-top: 2px solid var(--ink); padding-top: 16px; }
.fakt b { display: block; margin-bottom: 6px; }
.fakt span { color: var(--muted); font-size: 15px; }

/* Großer Satz */
.zitat { text-align: center; padding: 120px 0; background: radial-gradient(closest-side, rgba(16,185,129,.10), transparent 70%) center / 900px 500px no-repeat; }
.zitat p { margin: 0 auto; max-width: 22ch; font-weight: 300; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.16; letter-spacing: -.03em; }
.zitat p em { font-style: normal; color: var(--em); font-weight: 400; }

/* Kontakt */
.kontaktkarte { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 44px 40px; display: grid; gap: 36px; grid-template-columns: 1fr; box-shadow: 0 30px 60px -44px rgba(18,22,29,.35); }
@media (min-width: 940px) { .kontaktkarte { grid-template-columns: 1.3fr 1fr; align-items: center; } }
@media (max-width: 520px) { .kontaktkarte { padding: 28px 20px; } }
.kontaktkarte h2 { max-width: 14ch; }
.kontaktkarte .unter { margin-top: 18px; }
.kontaktkarte .btns { margin-top: 26px; }
.kontaktkarte ul { list-style: none; margin: 0; padding: 0; }
.kontaktkarte li { padding: 0 0 16px 32px; position: relative; font-size: 15.5px; color: var(--ink2); }
.kontaktkarte li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--em5); color: var(--em); font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.kontaktkarte li b { color: var(--ink); }
.kontaktkarte .mail { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* Fuß */
footer { border-top: 1px solid var(--line); padding: 30px 0 44px; font-size: 13.5px; color: var(--muted); }
footer .wrap { display: grid; gap: 8px; }
footer p { margin: 0; }
footer a { color: var(--ink2); }
footer .mono { color: var(--faint); font-size: 11px; }

/* Rechtstexte */
.recht { max-width: 780px; padding: 56px 24px 72px; }
.recht h1 { font-size: 40px; font-weight: 300; max-width: none; }
.recht h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; margin-top: 32px; max-width: none; }
.recht p, .recht li { font-size: 16px; color: var(--ink2); }
@media (max-width: 620px) { .hero .mono.oben::before, .hero .mono.oben::after { display: none; } .hero { padding-top: 56px; } }


/* ===== Synapse-Stil: eigene Handschrift statt Magazin-Optik ===== */
.kopf { background: rgba(255,255,255,.92); }
.wortmarke small { font: 500 12px/1.3 "Inter", sans-serif; letter-spacing: 0; text-transform: none; }
nav a.knopf { background: var(--em); }
nav a.knopf:hover { background: #065f46; }

h1 { font-weight: 800; font-size: clamp(36px, 5vw, 56px); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; }
h1 b, h2 b { font-weight: inherit; background: linear-gradient(90deg, #059669, #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .05em; }

/* Kapitel als Chip mit Nummernkachel, wie die Herkunftsmarken im Produkt */
.kap { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 "Inter", sans-serif; letter-spacing: .02em; text-transform: none; color: var(--em); background: var(--embg); border: 1px solid #a7f3d0; border-radius: 999px; padding: 5px 14px 5px 5px; margin: 0 0 22px; }
.kap::after { display: none; }
.kap span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #34d399, #14b8a6); color: #0f172a; font-size: 11.5px; font-weight: 800; }
.hero .kap { padding-left: 14px; }

section { padding: 88px 0; }
section.zwei { background: var(--paper2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.unter { font-size: 17px; }
.abschnitt-kopf { margin-bottom: 40px; }

/* Hero: Text links, Beleg rechts */
.hero { text-align: left; padding: 72px 0 0; background: linear-gradient(180deg, var(--embg) 0%, #fff 60%); }
.hero::before { background-image: radial-gradient(rgba(4,120,87,.10) 1px, transparent 1px); background-size: 22px 22px; }
.hero-grid { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.hero h1 { margin: 0; max-width: 18ch; }
.hero .lead { margin: 22px 0 0; }
.hero .btns { justify-content: flex-start; margin-top: 28px; }
.hero .vertrauen { justify-content: flex-start; margin: 22px 0 0; font: 500 14px/1.4 "Inter", sans-serif; letter-spacing: 0; text-transform: none; }
.hero .vertrauen span::before { content: "✓ "; font-weight: 700; }
.btn.zwei { background: #fff; color: var(--ink); border-color: var(--line2); }
.btn.zwei:hover { background: var(--paper2); color: var(--ink); }
.beleg { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 16px; font-size: 15px; box-shadow: 0 24px 48px -26px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.04); }
.beleg .titel { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.beleg .titel i { font-style: normal; background: var(--paper2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.beleg .anf { border-left: 3px solid #f59e0b; background: var(--amberbg); padding: 11px 13px; border-radius: 6px; margin-bottom: 12px; color: var(--ink2); }
.beleg .anf b { color: var(--amber); }
.zeile { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.zeile .was { font-weight: 600; }
.zeile .wert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.zeile .her { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.tag.an { background: var(--amberbg); color: var(--amber); border: 1px solid #fde68a; }
.tag.ok { background: var(--embg); color: var(--em); border: 1px solid #a7f3d0; }
.beleg .fuss { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.produkt { margin-top: 64px; padding-bottom: 80px; }
.fenster .leiste span, .shot .leiste, figcaption, .bildnote { font-family: "Inter", sans-serif; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
ol.legende li { border-top: 0; padding-top: 0; padding-left: 38px; position: relative; }
ol.legende li::before { content: counter(l); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #34d399, #14b8a6); color: #0f172a; font: 800 12px/26px "Inter", sans-serif; text-align: center; letter-spacing: 0; }

/* Schritte: Nummernkachel + fette Überschrift statt Riesenwort */
.bildzeile { border-top: 0; padding: 36px 0; }
.bildzeile .text > .mono { display: inline-block; font-size: 12px; color: var(--em); background: var(--embg); border: 1px solid #a7f3d0; padding: 4px 10px; border-radius: 999px; }
.bildzeile .wort { font-weight: 800; font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -.02em; margin: 14px 0 10px; }
.bildzeile .text p.imbild { border-top: 0; padding: 12px 14px; background: var(--paper2); border-left: 3px solid var(--em5); border-radius: 6px; }
.bildzeile .text p.imbild::before { content: "Im Bild: "; font: 700 14px/1 "Inter", sans-serif; letter-spacing: 0; color: var(--ink); }
.pillen span { font: 600 12px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; background: var(--paper2); }

/* Merksatz */
.merksatz { font-weight: 500; font-size: clamp(19px, 2vw, 22px); }

/* Nutzen: Kacheln statt Treppe */
.treppe { display: grid; gap: 18px; grid-template-columns: 1fr; border-top: 0; }
@media (min-width: 860px) { .treppe { grid-template-columns: repeat(2, 1fr); } }
.stufe { display: block; padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stufe .gross { font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--ink); margin-bottom: 6px; }

.stufe .mono { margin-bottom: 10px; }
.stufe p { color: var(--muted); font-size: 15.5px; }

/* Rechner */
.rechner { background: linear-gradient(180deg, var(--embg), #fff 55%); border-color: var(--line); }
.rechner-kopf h3 { font-weight: 800; font-size: 22px; }
.rechner input { background: #fff; }
.rechner-ergebnis div { background: #fff; }
.rechner-ergebnis span { font: 500 13px/1.4 "Inter", sans-serif; letter-spacing: 0; text-transform: none; }
.rechner-ergebnis b { font-weight: 800; font-size: 26px; }

/* Einstieg */
ol.schritte li::before { content: counter(s); width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #34d399, #14b8a6); color: #0f172a; font: 800 14px/32px "Inter", sans-serif; text-align: center; letter-spacing: 0; }
.aufwand div { border-top: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.aufwand .mono { margin-bottom: 4px; }

/* Fakten */
.fakt { border-top: 3px solid var(--em5); }

/* Dunkles Band wie synapseos.io */
.zitat { background: #0b1220; color: #fff; padding: 96px 0; }
.zitat p { font-weight: 800; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.02em; max-width: 26ch; color: #e2e8f0; }
.zitat p em { color: #34d399; font-weight: 800; }


.kontaktkarte { box-shadow: 0 24px 48px -30px rgba(15,23,42,.25); }
.kontaktkarte h2 { max-width: 16ch; }
.kontaktkarte li::before { background: var(--embg); }
footer { background: var(--paper2); }
footer .mono { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.recht h1 { font-weight: 800; }
.beleg .titel { gap: 10px; }

/* ===== Feinschliff Abstände und Umbrüche (Audit 13.10.) ===== */
h1, h2, h3, .zitat p { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Fensterschatten dezenter, Legende näher am Bild */
.fenster { box-shadow: 0 24px 50px -30px rgba(15,23,42,.30), 0 1px 3px rgba(15,23,42,.06); }
ol.legende { margin-top: 22px; }
ol.legende li::before { top: -1px; }
.produkt { padding-bottom: 72px; }

/* Vertrauenszeile: Abstand zum Haken */
.hero .vertrauen { gap: 6px 22px; }
.hero .vertrauen span::before { content: "✓"; margin-right: 6px; color: var(--em5); }

/* Karten: Pillen immer unten, gleiche Innenabstände */
.karte { display: flex; flex-direction: column; padding: 24px; }
.karte .pillen { margin-top: auto; padding-top: 16px; }
.karte p + .pillen { margin-top: auto; }
.karte > p { margin-bottom: 18px; }
.karte > p:last-child { margin-bottom: 0; }
.grid2.oben { align-items: start; }
.aufwand div { padding: 20px 24px; }

/* Nutzen: Etikett über dem Titel wie bei allen Karten */
.stufe { padding: 24px; }
.stufe .mono { margin-bottom: 10px; }
.stufe .gross { margin-bottom: 8px; }

/* Schritte mit Bild: weniger Leerraum zwischen den Zeilen */
.bildzeile { padding: 28px 0; }
@media (min-width: 940px) { .bildzeile { padding: 36px 0; } }

/* Zitat und Merksatz */
.zitat p { max-width: 24ch; }
.merksatz { max-width: 52ch; }

/* Raster für Tablet */
@media (min-width: 760px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) {
  .grid2, .treppe { grid-template-columns: repeat(2, 1fr); }
  ul.branchen { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  ol.schritte { grid-template-columns: repeat(2, 1fr); }
  .aufwand { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) { ul.branchen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { ol.schritte { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 759px) { .grid3 .karte { padding: 22px; } }

/* Mobil: Kopf einzeilig, kleinere Abstände, Knöpfe volle Breite */
@media (max-width: 760px) {
  section { padding: 60px 0; }
  .zitat { padding: 64px 0; }
  .hero { padding-top: 40px; }
  .produkt { margin-top: 44px; padding-bottom: 56px; }
  .abschnitt-kopf { gap: 14px; margin-bottom: 28px; }
  .kap { margin-bottom: 16px; }
  .merksatz { margin-top: 32px; }
  .rechner { margin-top: 44px; }
  .kontaktkarte { gap: 24px; }
}
@media (max-width: 560px) {
  .kopf .wrap { flex-wrap: nowrap; min-height: 56px; }
  .wortmarke { font-size: 17px; }
  .wortmarke small { display: none; }
  .kachel { width: 30px; height: 30px; }
  nav a.knopf { padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
  .hero .kap { font-size: 12px; padding: 6px 12px; border-radius: 12px; line-height: 1.35; }
  .hero .btns .btn { flex: 1 1 100%; justify-content: center; }
  .kontaktkarte .btns .btn { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 600px) and (max-width: 939px) { .bildzeile figure { max-width: 560px; } }

/* ===== Hero v2: Produktbild mit Anmerkungen ===== */
.kap { padding-left: 14px; }
.hero2 { padding: 72px 0 0; text-align: center; background: linear-gradient(180deg, var(--embg), #fff 55%); overflow: hidden; }
.hero2 h1 { font-size: clamp(38px, 5.6vw, 66px); max-width: 18ch; margin: 0 auto; }
.hero2 .lead { margin: 20px auto 0; }
.hero2 .btns { justify-content: center; margin-top: 28px; }
.buehne { position: relative; max-width: 1080px; margin: 56px auto 0; text-align: left; }
.buehne .fenster { border-radius: 14px 14px 0 0; border-bottom: 0; }
.anm { position: absolute; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 8px; font: 600 13.5px/1 "Inter", sans-serif; color: var(--ink); box-shadow: 0 12px 28px -14px rgba(15,23,42,.35); white-space: nowrap; }
.anm span { font: 700 11px/1 "Inter", sans-serif; padding: 5px 8px; border-radius: 999px; }
.a1 { left: -40px; top: 28%; } .a1 span { background: #fef3c7; color: #92400e; }
.a2 { right: -36px; top: 18%; } .a2 span { background: #dbeafe; color: #1e40af; }
.a3 { right: -52px; top: 56%; } .a3 span { background: #d1fae5; color: #065f46; }
.a4 { left: -24px; top: 66%; } .a4 span { background: #ede9fe; color: #5b21b6; }
.hero2 .bildnote { text-align: center; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 1180px) {
  .anmerkungen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px 0 0; }
  .anm { position: static; box-shadow: none; font-size: 13px; }
  .buehne .fenster { border-radius: 14px; border-bottom: 1px solid var(--line2); }
  .hero2 .bildnote { border-top: 0; }
}
@media (max-width: 560px) { .hero2 { padding-top: 40px; } .hero2 .btns .btn { flex: 1 1 100%; justify-content: center; } .anm { white-space: normal; } }
.shot .leiste span:empty { display: none; }
.todo { background: #fef3c7; color: #92400e; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* ===== Kurzfassung ===== */
section.kompakt { padding: 64px 0; }
section.kompakt h2 { max-width: none; font-size: clamp(24px, 2.8vw, 32px); }
ul.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.chips li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 600; color: var(--ink2); }
ul.nutzenzeile { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 860px) { ul.nutzenzeile { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
ul.nutzenzeile li { border-top: 3px solid var(--em5); padding-top: 14px; }
ul.nutzenzeile b { display: block; font-size: 19px; margin-bottom: 6px; }
ul.nutzenzeile span { color: var(--muted); font-size: 15.5px; }
details.rechner { margin-top: 36px; padding: 0; }
details.rechner summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 700; font-size: 17px; color: var(--ink); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
details.rechner summary::-webkit-details-marker { display: none; }
details.rechner summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--em); font-weight: 600; }
details.rechner[open] summary::after { content: "−"; }
details.rechner summary .mono { margin: 0; }
details.rechner > :not(summary) { margin-left: 24px; margin-right: 24px; }
details.rechner > :last-child { margin-bottom: 24px; }
.rechner-hinweis { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }
ul.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 860px) { ul.refs { grid-template-columns: repeat(3, 1fr); column-gap: 28px; } }
ul.refs li { padding: 16px 0; border-bottom: 1px solid var(--line); }
ul.refs b { display: block; }
ul.refs span { color: var(--muted); font-size: 15px; }
.leiste-fakten { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; padding: 16px 20px; background: var(--paper2); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--ink2); }
.leiste-fakten span::before { content: "✓"; color: var(--em5); font-weight: 700; margin-right: 8px; }
#erfahrung .abschnitt-kopf, #nutzen .abschnitt-kopf { margin-bottom: 28px; }
@media (min-width: 761px) { section { padding: 72px 0; } section.kompakt { padding: 56px 0; } .shot { max-height: 400px; } }
.leiste-fakten { display: grid; grid-template-columns: 1fr; gap: 10px 24px; }
@media (min-width: 860px) { .leiste-fakten { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) and (max-width: 939px) { .bildzeile figure { margin: 0 auto; width: 100%; } }


/* ===== Hero: Analyse-Auszug mit Randnotizen ===== */

/* Analyse-Auszug: links die Schritte wie in der Anwendung, rechts Randnotizen mit Bezugslinie, wie Positionsangaben auf einer Zeichnung */
.testzeile{margin:14px auto 0;font-size:14.5px;color:var(--muted)}
.testzeile::before{content:"✓";color:var(--em5);font-weight:700;margin-right:7px}
.spur{--app:#1f4e79;--appbg:#ffffff;--rand:#dfe5ec;--linie:#9fb3c8;max-width:1040px;margin:56px auto 0;text-align:left}
.spur ol{list-style:none;margin:0;padding:0}
.spur-kopf,.sz,.spur-fuss{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:56px}
.panel-kopf,.schritt,.panel-fuss{background:var(--appbg);border-left:1px solid var(--rand);border-right:1px solid var(--rand);min-width:0}
.panel-kopf{display:flex;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--rand);border-radius:14px 14px 0 0;border-bottom:1px solid #eef2f6}
.panel-kopf .ico{width:30px;height:30px;border-radius:8px;background:#eef3f8;display:grid;place-items:center}
.panel-kopf svg{width:17px;height:17px;fill:none;stroke:var(--app);stroke-width:1.6;stroke-linecap:round}
.panel-kopf b{display:block;font-size:15px;color:var(--ink)}
.panel-kopf span{font-size:12.5px;color:var(--muted)}
.notiz-kopf{align-self:end;padding-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--em)}
.schritt{display:flex;gap:14px;padding:18px 22px 18px 22px;position:relative}
.sz + .sz .schritt{border-top:1px solid #eef2f6}
.haken{flex:none;width:24px;height:24px;border-radius:50%;border:1.6px solid var(--app);display:grid;place-items:center;margin-top:1px;background:#fff;position:relative;z-index:1}
.haken svg{width:13px;height:13px;fill:none;stroke:var(--app);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.schritt::before{content:"";position:absolute;left:33px;top:0;bottom:0;border-left:1.5px solid #e3e9f0}
.sz:first-child .schritt::before{top:22px}.sz:last-child .schritt::before{bottom:calc(100% - 22px)}
.inhalt{min-width:0}
.inhalt h3{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.inhalt p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.inhalt p b{color:var(--ink);font-variant-numeric:tabular-nums}
.quellen{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.q{font-size:11px;font-weight:700;line-height:1;padding:4px 7px;border-radius:4px}
.q-lv{background:#e0ecfb;color:#1e4f9a}.q-an{background:#fbe7ef;color:#9d1d4f}.q-rw{background:#f1f4f7;color:#3d4a59;box-shadow:inset 0 0 0 1px #dde3ea}.q-ew{background:#fdf1d8;color:#8a5a00}.q-lp{background:#ece8fb;color:#5232a8}
.notiz{position:relative;align-self:center;padding:4px 0 4px 18px;border-left:2px solid var(--em5)}
.notiz::before{content:"";position:absolute;right:calc(100% + 2px);top:50%;width:50px;border-top:1px dashed var(--linie)}
.notiz::after{content:"";position:absolute;right:calc(100% + 49px);top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--linie)}
.notiz b{display:block;font-size:17px;line-height:1.3;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.notiz span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted)}
.panel-fuss{display:flex;flex-wrap:wrap;gap:6px 22px;padding:14px 22px;border-top:1px solid #eef2f6;border-bottom:1px solid var(--rand);border-radius:0 0 14px 14px;background:#f7f9fb;font-size:13px;color:var(--muted)}
.panel-fuss b{color:var(--ink);font-variant-numeric:tabular-nums}
.spur-fuss .hinweis{grid-column:1/-1;margin:12px 0 0;font-size:12.5px;color:var(--faint)}
.spur{position:relative;isolation:isolate}
.spur::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc((100% - 56px) * 0.6);background:var(--appbg);border:1px solid var(--rand);border-radius:14px;box-shadow:0 30px 60px -36px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.04)}
.panel-kopf,.schritt,.panel-fuss{background:transparent;border-left:0;border-right:0}
.panel-kopf{border-top:0}.panel-fuss{border-bottom:0;background:#f7f9fb;border-radius:0 0 13px 13px;margin:0 1px 1px}
.spur-hinweis{max-width:1040px;margin:12px auto 0;text-align:left;font-size:12.5px;color:var(--faint)}
@media (max-width:860px){
 .spur{margin-top:40px}
 .spur::before{width:auto;right:0}
 .spur-kopf,.sz,.spur-fuss{grid-template-columns:1fr}
 .notiz-kopf{display:none}
 .panel-kopf{border-radius:14px 14px 0 0}
 .sz + .sz{border-top:1px solid #eef2f6}
 .sz + .sz .schritt{border-top:0}
 .schritt{border:0;padding:16px 16px 10px}
 .schritt::before{display:none}
 .notiz{margin:0 16px 16px 54px;padding:10px 12px;border-left:0;border-radius:8px;background:var(--embg);align-self:auto}
 .notiz::before,.notiz::after{display:none}
 .notiz b{font-size:15.5px;color:#065f46}.notiz span{font-size:14px;color:#2f6b54}
}
@media (max-width:420px){.notiz{margin-left:16px}}

.hero2{padding-bottom:80px}
.beispielwahl{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:52px auto 0}
.bw-label{font-size:13.5px;color:var(--muted);margin-right:4px}
.beispielwahl button{font:600 14px/1 "Inter",sans-serif;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--ink2);cursor:pointer}
.beispielwahl button:hover{border-color:var(--em5);color:var(--ink)}
.beispielwahl button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.beispielwahl button:focus-visible{outline:2px solid var(--em5);outline-offset:2px}
.beispielwahl + .spur, .beispielwahl ~ .spur{margin-top:22px}
.q-nb{background:#dcf5e8;color:#0b6b45}
.chipgruppen{display:grid;gap:22px;margin-top:24px}
.chipgruppe{display:grid;gap:10px}
.cg-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chipgruppe .chips{margin-top:0}
.validierung{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:0 0 28px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:14px}
.validierung div{display:grid;gap:4px;min-width:0}
.validierung b{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--em);font-variant-numeric:tabular-nums;line-height:1}
.validierung span{font-size:14.5px;color:var(--ink2)}
.validierung p{grid-column:1/-1;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:640px){.validierung{grid-template-columns:1fr}}

/* ===== Kontra-Flächen: Validierung und Kontakt dunkel wie synapseos.io ===== */
:root { --nacht: #0b1a17; --nacht2: #10251f; --nachtlinie: rgba(167,243,208,.14); --nachttext: #cfe3dc; --nachtmuted: #8fb1a5; --mint: #34d399; }
.validierung { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px 44px; padding: 30px 34px; border: 0; border-radius: 16px; color: var(--nachttext);
  background: radial-gradient(520px 260px at 0% 0%, rgba(52,211,153,.16), transparent 70%), linear-gradient(135deg, var(--nacht2), var(--nacht)); }
.validierung b { color: #fff; font-size: clamp(36px, 4.2vw, 52px); }
.validierung div:nth-child(2) b { color: var(--mint); }
.validierung span { color: var(--nachtmuted); font-size: 14px; }
.validierung p { grid-column: auto; margin: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--nachtlinie); color: var(--nachttext); font-size: 15px; line-height: 1.6; }
@media (max-width: 860px) { .validierung { grid-template-columns: 1fr 1fr; } .validierung p { grid-column: 1 / -1; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--nachtlinie); } }

.kontaktkarte { border: 0; color: var(--nachttext); box-shadow: 0 30px 60px -36px rgba(11,26,23,.6);
  background: radial-gradient(700px 360px at 100% 0%, rgba(52,211,153,.18), transparent 65%), linear-gradient(135deg, var(--nacht2), var(--nacht)); }
.kontaktkarte h2 { color: #fff; }
.kontaktkarte h2 b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--mint); }
.kontaktkarte .unter { color: var(--nachtmuted); }
.kontaktkarte .btn { background: var(--mint); border-color: var(--mint); color: #062a1e; }
.kontaktkarte .btn:hover { background: #6ee7b7; border-color: #6ee7b7; }
.kontaktkarte .mail { color: var(--nachtmuted); }
.kontaktkarte .mail a { color: #a7f3d0; }
.kontaktkarte ul { padding: 24px 26px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--nachtlinie); align-self: center; }
.kontaktkarte li { color: var(--nachttext); }
.kontaktkarte li:last-child { padding-bottom: 0; }
.kontaktkarte li::before { background: rgba(52,211,153,.12); border-color: var(--mint); color: var(--mint); }