@font-face {
  font-family: 'DM Sans';
  src: url('./public/fonts/DMSans-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('./public/fonts/Manrope-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --tinte: #111111;
  --graphit: #41464b;
  --text: #555555;
  --papier: #f5f5f5;
  --papier-weiss: #ffffff;
  --gold: #c9b284;
  --linie: #e3e3e3;
  --schrift: 'DM Sans', Arial, sans-serif;
  --schrift-titel: 'Manrope', Arial, sans-serif;
  font-family: var(--schrift);
  color: var(--tinte);
  background: var(--papier-weiss);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--graphit); outline-offset: 4px; }
.seitenkopf a:focus-visible, .seitenfuss a:focus-visible { outline-color: var(--gold); }
::selection { color: var(--tinte); background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--schrift-titel); }
.produktname { font-weight: 800; }
h1, h2 { letter-spacing: -.045em; }
h1 em, h2 em { color: var(--graphit); font-style: normal; }
.einstieg h1 em { color: var(--gold); }
.ki-scout h2 em { color: var(--gold); }
.ki-pruefung h2 em { color: var(--gold); }
.belegbereich h2 em { color: var(--gold); }
.leistung h2 em { color: var(--gold); }
.reporting h2 em { color: var(--gold); }
.ablauf h2 em { color: var(--gold); }
.preisbereich h2 em { color: var(--gold); }
.fragen h2 em { color: var(--gold); }

.sprunglink {
  position: absolute;
  z-index: 40;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  background: var(--gold);
  color: var(--tinte);
  font-weight: 700;
  transform: translateY(-150%);
}
.sprunglink:focus { transform: translateY(0); }

.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 14px clamp(22px, 5vw, 86px);
  background: var(--tinte);
  color: #fff;
}
main > section[id], #hauptinhalt { scroll-margin-top: calc(var(--menuehoehe, 160px) + 16px); }
.marke { display: inline-flex; align-items: center; gap: 16px; flex: none; text-decoration: none; }
.marke__logo { display: block; flex: none; width: auto; height: 120px; aspect-ratio: 349 / 467; shape-rendering: geometricPrecision; }
.marke__vip { font-family: var(--schrift-titel); font-size: 24px; font-weight: 800; letter-spacing: -.08em; }
.marke__trenner { width: 1px; height: 30px; flex: 0 0 1px; margin-left: 16px; background: rgba(255,255,255,.4); }
.marke__produkt { font-size: 16px; font-weight: 800; letter-spacing: .09em; }
.marke__zusatz { display: block; margin-top: 8px; font-family: var(--schrift); font-size: 12px; font-weight: 600; letter-spacing: .025em; line-height: 1.4; }
.seitenkopf .marke { gap: clamp(48px, 6vw, 96px); }
.seitenkopf .marke__produkt {
  font-family: var(--schrift-titel);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.1;
}
.seitenkopf .marke__zusatz { font-size: 14px; }
.hauptnavigation { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.5vw, 38px); }
.hauptnavigation > a:not(.knopf) { color: #e3e3e3; font-size: 18px; font-weight: 600; text-decoration: none; }
.hauptnavigation > a:not(.knopf):hover { color: var(--gold); }
.menue-schalter { display: none; }
.menue-schalter[hidden] { display: none; }
.menue-schalter:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 22px;
  border: 1px solid var(--gold);
  background: #fff;
  box-shadow: 0 6px 16px rgba(17,17,17,.14);
  color: var(--tinte);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.knopf::before { position: absolute; inset: -6px 0; content: ''; }
.knopf:hover, .knopf:focus-visible {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,17,17,.22), 0 0 0 2px rgba(201,178,132,.24);
}
.knopf:active { box-shadow: 0 2px 6px rgba(17,17,17,.16); }
.knopf--klein { min-height: 42px; padding: 9px 15px; font-size: 12px; }
.knopf--dunkel { width: 100%; }

.einstieg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 5.5vw, 94px);
  min-height: 700px;
  padding: 80px clamp(28px, 8vw, 130px) 90px clamp(28px, 8vw, 130px);
  background: var(--papier);
}
.einstieg__raster { display: none; }
.einstieg__inhalt { grid-column: 1; grid-row: 1; max-width: 670px; }
.ueberzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--graphit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.einstieg .ueberzeile {
  align-items: flex-start;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.35;
}
.einstieg .ueberzeile .signalpunkt { margin-top: .5em; }
.signalpunkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,178,132,.2);
}
.einstieg h1 {
  margin-bottom: 24px;
  font-size: clamp(44px, 4.8vw, 70px);
  font-weight: 800;
  line-height: 1.08;
}
.einstieg__aussage {
  max-width: 590px;
  margin-bottom: 18px;
  color: var(--graphit);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 700;
  line-height: 1.4;
}
.einstieg__text {
  max-width: 590px;
  margin-bottom: 30px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.65;
}
.einstieg__aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.preis-hinweis { width: fit-content; max-width: min(100%, 300px); margin: 0 0 0 auto; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 12px; background: #fff; color: var(--text); font-size: 14px; line-height: 1.5; }
.preis-hinweis p { margin: 0; }
.preis-hinweis strong { color: var(--tinte); font-size: 20px; }
.preis-hinweis__tagespreis { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; }
.einstieg__leistungsueberblick { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linie); }
.einstieg__leistungsueberblick .preis-hinweis { flex: 0 1 230px; }
.einstieg__vertrauen {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 280px;
  gap: 12px 25px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
}
.einstieg__vertrauen span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.einstieg__vertrauen b { color: var(--graphit); font-size: 16px; }

.einstieg__grafiken {
  position: relative;
  top: -40px;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: min(100%, 560px);
  padding-top: clamp(78px, 8vw, 120px);
  isolation: isolate;
}
.einstieg__plattformnetz { position: absolute; z-index: 0; top: 0; left: 22%; width: 92%; }
.einstieg__plattformnetz img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 24px rgba(17,17,17,.08)); }
.einstieg__plattformnetz::after { position: absolute; top: 43.5%; left: 34.5%; width: 25.5%; height: 7%; background: #fff; content: ''; pointer-events: none; }
.sichtbarkeitsbild {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 24px 56px rgba(17,17,17,.1);
}
.sichtbarkeitsbild__verbindungen { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .65; }
.sichtbarkeitsbild__verbindungen circle { stroke-dasharray: 3 9; opacity: .55; }
.sichtbarkeitsbild__zentrum {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: clamp(140px, 29%, 164px);
  aspect-ratio: 1;
  border: 10px solid rgba(201,178,132,.22);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,17,17,.1);
  transform: translate(-50%, -50%);
}
.sichtbarkeitsbild__zentrum strong { font-family: var(--schrift-titel); font-size: 39px; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.sichtbarkeitsbild__zentrum span { color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .035em; }
.sichtbarkeitsbild__stationen { position: absolute; inset: 0; }
.sichtbarkeitsbild__station {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(135px, 27.5%, 154px);
  min-height: 54px;
  padding: 8px 24px;
  border: 1px solid var(--linie);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 17px rgba(17,17,17,.08);
  color: var(--tinte);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}
.sichtbarkeitsbild__station::before { position: absolute; top: 50%; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); content: ''; transform: translateY(-50%); }
.sichtbarkeitsbild__station--oben, .sichtbarkeitsbild__station--unten { left: 50%; width: 178px; transform: translateX(-50%); }
.sichtbarkeitsbild__station--oben { top: 5%; }
.sichtbarkeitsbild__station--unten { bottom: 5%; }
.sichtbarkeitsbild__station--links-oben { top: 29%; left: 5%; }
.sichtbarkeitsbild__station--rechts-oben { top: 29%; right: 5%; }
.sichtbarkeitsbild__station--links-unten { bottom: 29%; left: 5%; }
.sichtbarkeitsbild__station--rechts-unten { bottom: 29%; right: 5%; }
.weiterhinweis { position: absolute; right: 4%; bottom: 25px; width: 24px; height: 34px; border: 1px solid var(--gold); border-radius: 20px; }
.weiterhinweis span { position: absolute; top: 7px; left: 10px; width: 2px; height: 7px; background: var(--graphit); }

.belegbereich, .reporting, .preisbereich { background: #fff; }
.ki-pruefung, .ki-scout, .belegbereich, .leistung, .reporting, .ablauf, .preisbereich, .fragen { padding: 100px clamp(24px, 9vw, 150px); }
.ki-scout { background: #fff; border-bottom: 1px solid var(--linie); }
.ki-scout__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; }
.ki-scout__kopf .abschnittsnummer { margin: 0; }
.ki-scout__einstieg { max-width: 1000px; margin-bottom: 40px; }
.ki-scout__einstieg > p { max-width: 780px; margin-bottom: 0; color: var(--text); font-size: 18px; line-height: 1.75; }
.ki-scout__themen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ki-scout__thema { min-width: 0; padding: clamp(24px, 2.2vw, 34px); border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(17,17,17,.04); }
.ki-scout__thema h3 { margin-bottom: 26px; font-size: clamp(24px, 2vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.ki-scout__analysen { display: grid; gap: 22px; min-width: 0; margin: 0; }
.ki-scout__analysen > div { min-width: 0; padding-top: 18px; border-top: 1px solid var(--linie); }
.ki-scout__analysen dt { margin: 0 0 8px; font-size: 18px; font-weight: 800; line-height: 1.4; }
.ki-scout__analysen dd { margin: 0; color: var(--text); font-size: 17px; line-height: 1.65; }
.ki-scout__betreuung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: 36px; padding: 30px; border-radius: 12px; background: var(--papier); }
.ki-scout__betreuung > div { min-width: 0; }
.ki-scout__betreuung h3 { margin-bottom: 10px; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -.025em; }
.ki-scout__betreuung p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.7; }
.ki-scout__abschluss { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 28px; width: fit-content; max-width: min(100%, 800px); margin: 32px auto 0; padding: 28px; border: 1px solid var(--gold); border-top-width: 3px; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(17,17,17,.06); }
.ki-scout__angebot { min-width: 0; }
.ki-scout__angebotslabel { margin: 0 0 12px; color: var(--graphit); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ki-scout__angebot h3 { max-width: 560px; margin-bottom: 22px; font-size: clamp(25px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.ki-scout__angebot h3 em { color: var(--gold); font-style: normal; }
.ki-scout__inklusivleistungen { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ki-scout__inklusivleistungen li { position: relative; padding-left: 26px; color: var(--text); font-size: 16px; line-height: 1.55; }
.ki-scout__inklusivleistungen li::before { position: absolute; left: 0; color: var(--graphit); font-weight: 800; content: '✓'; }
.ki-scout__buchung { display: grid; gap: 14px; min-width: 0; padding-left: 28px; border-left: 1px solid var(--linie); }
.ki-scout__monatspreis { display: grid; gap: 5px; margin: 0; }
.ki-scout__monatspreis strong { color: var(--tinte); font-family: var(--schrift-titel); font-size: 48px; font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.ki-scout__monatspreis span { color: var(--text); font-size: 13px; line-height: 1.5; }
.ki-scout__flexibilitaet { margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.ki-scout__flexibilitaet strong { color: var(--tinte); font-size: 17px; }
.ki-scout__buchung .knopf { width: 100%; min-height: 56px; font-size: 16px; }
.ki-scout__tagesvergleich { margin: 0; color: var(--text); font-size: 13px; line-height: 1.5; text-align: center; }
.ki-pruefung { padding-block: 60px; background: var(--papier); }
.ki-pruefung > .abschnittsnummer { margin-bottom: 18px; }
.ki-pruefung > h2 { max-width: 1000px; margin-bottom: 16px; font-size: clamp(30px, 3vw, 42px); }
.ki-pruefung__einleitung { max-width: 960px; margin-bottom: 24px; color: var(--text); font-size: 18px; line-height: 1.6; }
.ki-pruefung__raster { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.ki-pruefung__formular { min-width: 0; padding: 24px; border: 1px solid var(--linie); border-top: 3px solid var(--gold); border-radius: 12px; background: #fff; }
.ki-pruefung__felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.ki-pruefung__felder label, .ki-pruefung__zusatz label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--tinte); font-size: 16px; font-weight: 700; line-height: 1.5; }
.ki-pruefung__felder input, .ki-pruefung__felder select, .ki-pruefung__zusatz textarea { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #b5b5b5; border-radius: 6px; background: #fff; color: var(--tinte); font: 400 16px/1.5 var(--schrift); }
.ki-pruefung__zusatz textarea { max-width: 650px; resize: vertical; }
.ki-pruefung input:focus-visible, .ki-pruefung select:focus-visible, .ki-pruefung textarea:focus-visible, .ki-pruefung button:focus-visible { outline: 3px solid var(--graphit); outline-offset: 3px; }
.ki-pruefung__zusatz { margin-top: 18px; }
.ki-pruefung__zusatz summary, .ki-pruefung__methode summary { cursor: pointer; color: var(--graphit); font-size: 16px; font-weight: 700; line-height: 1.5; }
.ki-pruefung__zusatz label { margin-top: 14px; font-weight: 400; }
.ki-pruefung__zustimmung { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; color: var(--text); font-size: 14px; line-height: 1.65; }
.ki-pruefung__zustimmung input { width: 20px; height: 20px; flex: 0 0 20px; margin: 3px 0 0; accent-color: var(--graphit); }
.ki-pruefung .knopf { cursor: pointer; font-family: var(--schrift); }
.ki-pruefung .knopf:disabled { cursor: not-allowed; box-shadow: none; opacity: .55; }
.ki-pruefung .knopf:disabled::before { display: none; }
.ki-pruefung__status { margin: 14px 0 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.ki-pruefung__methode { min-width: 0; padding: 0; }
.ki-pruefung__methode ol { display: grid; gap: 14px; margin: 18px 0; padding-left: 24px; color: var(--text); font-size: 16px; line-height: 1.65; }
.ki-pruefung__methode li { padding-left: 6px; }
.ki-pruefung__methode li::marker { color: var(--graphit); font-weight: 800; }
.ki-pruefung__methode li strong { color: var(--tinte); }
.ki-pruefung__methode > p, .ki-pruefung__messhinweis { color: var(--text); font-size: 14px; line-height: 1.7; }
.ki-pruefung__ergebnis { margin-top: 40px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.ki-pruefung__ergebnis[hidden] { display: none; }
.ki-pruefung__ergebniskopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.ki-pruefung__ergebniskopf > div { min-width: 0; }
.ki-pruefung__ergebniskopf h3 { margin-bottom: 12px; overflow-wrap: anywhere; font-size: clamp(24px, 3vw, 36px); }
.ki-pruefung__ergebniskopf .ueberzeile { margin-bottom: 10px; }
.ki-pruefung__ergebniskopf p:last-child { margin: 0; color: var(--text); font-size: 13px; line-height: 1.7; }
.ki-pruefung__score { display: flex; flex-direction: column; align-items: center; padding: 18px 28px; border: 2px solid var(--gold); border-radius: 12px; }
.ki-pruefung__score strong { color: var(--tinte); font-family: var(--schrift-titel); font-size: 64px; line-height: 1.2; }
.ki-pruefung__score span { color: var(--text); font-size: 14px; }
.ki-pruefung__ergebnis > p:not(.ki-pruefung__messhinweis) { color: var(--text); font-size: 17px; line-height: 1.7; }
.ki-pruefung__vergleich { margin: 28px 0; }
.ki-pruefung__vergleich:empty { display: none; }
.ki-pruefung__vergleich li { margin-bottom: 10px; overflow-wrap: anywhere; color: var(--text); font-size: 17px; line-height: 1.65; }
.ki-pruefung__ergebnis details { padding: 18px 0; border-top: 1px solid var(--linie); }
.ki-pruefung__ergebnis summary { cursor: pointer; font-weight: 700; font-size: 17px; line-height: 1.6; }
.ki-pruefung__antworttext { margin: 18px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 16px; line-height: 1.75; }
.ki-pruefung__quellen { display: grid; gap: 8px; padding-left: 22px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.ki-pruefung__ergebnis a { text-underline-offset: 3px; }
.ki-pruefung__ergebnisaktionen { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.belegbereich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(36px, 4.5vw, 72px); align-items: center; }
.belegbereich > .abschnittsnummer { grid-column: 1 / -1; }
.belegbereich__text { grid-column: 1; min-width: 0; }
.belegbereich__text, .quellenbeleg { max-width: 900px; }
.verzeichnisnetz { position: relative; grid-column: 2; grid-row: 2; justify-self: center; width: min(100%, 620px); margin: 0; }
.verzeichnisnetz img { display: block; width: 100%; height: auto; }
/* Nur die Anbieterkennzeichnung verdecken; alle Plattformlogos bleiben original. */
.verzeichnisnetz::after { position: absolute; top: 43.5%; left: 34.5%; width: 25.5%; height: 7%; background: #fff; content: ''; pointer-events: none; }
.abschnittsnummer { margin-bottom: 28px; }
.abschnittsnummer span {
  display: block;
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.2;
}
.ueberzeile--dunkel { color: var(--text); }
.belegbereich__text > .ueberzeile {
  color: var(--gold);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: .025em;
  line-height: 1.35;
}
.ki-pruefung h2, .ki-scout h2, .belegbereich h2, .leistung h2, .reporting h2, .ablauf h2, .preisbereich h2, .fragen h2, .abschluss h2 {
  margin-bottom: 24px;
  font-size: clamp(34px, 3.75vw, 54px);
  font-weight: 750;
  line-height: 1.14;
}
.belegbereich__text > p:not(.ueberzeile), .reporting__text > p:not(.ueberzeile), .preisbereich__inhalt > div:first-child > p:not(.ueberzeile) {
  max-width: 680px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
}
.textlink { display: inline-flex; align-items: center; gap: 10px; color: var(--graphit); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.quellenbeleg { grid-column: 1 / -1; max-width: none; margin-top: 50px; padding: 26px 30px 24px; border: 1px solid var(--linie); background: var(--papier); }
.quellenbeleg__zeile { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--linie); color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.5; }
.quellenbeleg__werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 25px 0 20px; }
.quellenwert { display: grid; gap: 9px; }
.quellenwert strong { font-family: var(--schrift-titel); font-size: clamp(36px, 4vw, 50px); font-weight: 700; letter-spacing: -.05em; }
.quellenwert strong small { font-size: .5em; }
.quellenwert > span { max-width: 300px; min-height: 36px; color: var(--text); font-size: 13px; line-height: 1.45; }
.quellenwert__balken { height: 5px; background: var(--linie); }
.quellenwert__balken i { display: block; width: var(--breite); height: 100%; background: var(--graphit); }
.quellenbeleg__hinweis { margin: 0; color: var(--text); font-size: 12px; line-height: 1.6; }
.quellenbeleg__hinweis a { color: var(--graphit); font-weight: 700; }
.lokalargumente { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.lokalargumente__gruppe {
  min-width: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,17,17,.05);
}
.lokalargumente__gruppe .ueberzeile { margin-bottom: 20px; color: var(--graphit); font-size: 16px; font-weight: 800; letter-spacing: .035em; }
.lokalargumente__gruppe h3 { margin-bottom: 24px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 750; letter-spacing: -.025em; line-height: 1.25; }
.lokalargumente__gruppe h3 em { color: var(--gold); font-style: normal; }
.lokalargumente__liste { margin: 0; padding: 0; list-style: none; }
.lokalargumente__liste li { padding: 17px 0; border-top: 1px solid var(--linie); }
.lokalargumente__liste li > strong { display: block; margin-bottom: 6px; color: var(--tinte); font-size: 17px; line-height: 1.4; }
.lokalargumente__liste p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.65; }
.lokalargumente__quellen { grid-column: 1 / -1; margin: 0; color: var(--text); font-size: 12px; line-height: 1.7; }
.lokalargumente__quellen a { text-underline-offset: 3px; }

.leistung, .fragen { background: var(--papier); color: var(--tinte); }
.ablauf { background: #fff; color: var(--tinte); }
.leistung h2, .ablauf h2, .fragen h2 { max-width: 850px; }
.abschluss h2 em { color: var(--gold); }
.leistung__einstieg { max-width: 850px; margin-bottom: 36px; }
.leistung__hinweis { margin: 0; color: var(--text); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.leistungsraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.leistungsbaustein {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  gap: 14px 16px;
  padding: 26px;
  border: 1px solid var(--linie);
  border-top: 2px solid var(--gold);
  border-radius: 12px;
  background: #fff;
}
.leistungsbaustein__symbol { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(201,178,132,.55); border-radius: 12px; background: var(--papier); color: var(--graphit); }
.leistungsbaustein__symbol svg { display: block; width: 25px; height: 25px; }
.leistungsbaustein h3 { align-self: center; margin: 0; font-size: clamp(21px, 1.8vw, 25px); font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.leistungsbaustein p { grid-column: 1 / -1; margin: 0; color: var(--text); font-size: 16px; line-height: 1.65; }
.ablaufschritte h3 { margin-bottom: 9px; font-size: clamp(21px, 2vw, 26px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.ablaufschritte p { max-width: 720px; margin: 0; color: var(--text); font-size: 16px; line-height: 1.7; }
.leistung__schluss { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--text); font-size: 16px; }
.leistung__schluss p { margin: 0; }
.leistung__schluss strong { color: var(--tinte); }

.reporting { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 100px); }
.reporting__text { max-width: 590px; }
.reporting__text > .ueberzeile { font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: .025em; line-height: 1.35; }
.reportpunkte { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; color: var(--text); font-size: 16px; list-style: none; }
.reportpunkte li { display: flex; align-items: flex-start; gap: 11px; }
.reportpunkte li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--papier); color: var(--graphit); font-size: 13px; font-weight: 800; }
.reportansicht { min-width: 0; padding: 22px; border: 1px solid var(--linie); background: #fff; box-shadow: 0 20px 55px rgba(17,17,17,.08); }
.reportansicht__kopf, .reportansicht__titel, .reportansicht__diagramm-kopf, .reportansicht__monate { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reportansicht__kopf { padding-bottom: 16px; border-bottom: 1px solid var(--linie); color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .07em; }
.reportansicht__punkt { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gold); }
.reportansicht__titel { padding: 20px 0 17px; }
.reportansicht__titel small { color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.reportansicht__titel h3 { margin: 6px 0 0; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.reportansicht__menue { color: var(--text); font-size: 20px; }
.reportansicht__kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reportansicht__kennzahlen > div { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 88px; padding: 12px; border: 1px solid var(--linie); }
.reportansicht__kennzahlen span { color: var(--text); font-size: 12px; }
.reportansicht__kennzahlen strong { font-size: 17px; }
.kennzahlzeichen { position: absolute; right: 10px; bottom: 9px; color: var(--graphit); font-size: 16px; font-style: normal; }
.kennzahlzeichen--gruen { font-size: 10px; }
.miniverlauf { position: absolute; right: 9px; bottom: 9px; display: flex; align-items: end; gap: 2px; height: 17px; }
.miniverlauf b { width: 3px; background: var(--graphit); }
.miniverlauf b:nth-child(1) { height: 5px; }.miniverlauf b:nth-child(2) { height: 8px; }.miniverlauf b:nth-child(3) { height: 6px; }.miniverlauf b:nth-child(4) { height: 10px; }
.miniverlauf b:nth-child(5) { height: 9px; }.miniverlauf b:nth-child(6) { height: 12px; }.miniverlauf b:nth-child(7) { height: 11px; }.miniverlauf b:nth-child(8) { height: 16px; }
.reportansicht__diagramm { margin-top: 16px; padding: 15px; border: 1px solid var(--linie); }
.reportansicht__diagramm-kopf { color: var(--text); font-size: 12px; }
.reportansicht__diagramm-kopf span + span { color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.reportansicht__diagramm svg { display: block; width: 100%; height: 125px; margin-top: 14px; }
.reportansicht__monate { color: var(--text); font-size: 10px; letter-spacing: .03em; }
.reportansicht__fuss { margin: 12px 0 0; color: var(--text); font-size: 11px; text-align: right; }

.ablauf h2, .fragen h2 { margin-bottom: 45px; }
.ablaufschritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--linie); }
.ablaufschritte article { padding-top: 23px; }
.ablaufschritte article > span { display: inline-block; margin-bottom: 24px; color: var(--graphit); font-size: 15px; font-weight: 700; }

.preisbereich__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: center; gap: clamp(40px, 8vw, 130px); }
.preisbereich h2 { max-width: 670px; }
.preiskarte { padding: 30px; border: 1px solid var(--linie); background: var(--papier); box-shadow: 0 18px 45px rgba(17,17,17,.07); }
.preiskarte__label { margin-bottom: 12px; color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.preiskarte__preis { margin-bottom: 3px; font-family: var(--schrift-titel); font-size: 66px; font-weight: 700; letter-spacing: -.07em; line-height: 1; }
.preiskarte__preis > span { position: relative; top: -1.15em; margin-right: 4px; font-size: 15px; letter-spacing: 0; }
.preiskarte__preis small { margin-left: 5px; color: var(--text); font-family: var(--schrift); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.preiskarte__steuer { margin-bottom: 23px; color: var(--text); font-size: 13px; }
.preiskarte__tagespreis { margin: 0 0 20px; }
.preiskarte__tagespreis strong { display: block; color: var(--graphit); font-size: 18px; line-height: 1.4; }
.preiskarte__tagespreis small { display: block; margin-top: 5px; color: var(--text); font-size: 12px; line-height: 1.5; }
.preiskarte ul { display: grid; gap: 13px; margin: 0 0 24px; padding: 20px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); color: var(--text); font-size: 16px; list-style: none; }
.preiskarte li { position: relative; padding-left: 20px; }
.preiskarte li::before { position: absolute; left: 0; color: var(--graphit); content: '✓'; font-weight: 700; }
.preiskarte__kuendigung { margin: 16px 0 0; color: var(--tinte); font-size: 17px; font-weight: 800; line-height: 1.5; text-align: center; }

.fragen h2 { margin-inline: auto; text-align: left; }
.fragenliste { max-width: 940px; margin-inline: auto; border-top: 1px solid var(--linie); }
.fragenliste details { border-bottom: 1px solid var(--linie); }
.fragenliste summary { position: relative; padding: 23px 42px 23px 0; cursor: pointer; font-family: var(--schrift-titel); font-size: 19px; font-weight: 700; line-height: 1.4; text-align: left; list-style: none; }
.fragenliste summary::-webkit-details-marker { display: none; }
.fragenliste summary::after { position: absolute; right: 5px; color: var(--graphit); content: '+'; font-size: 24px; font-weight: 400; }
.fragenliste details[open] summary::after { content: '−'; }
.fragenliste details p { max-width: 760px; margin: -2px 0 23px; color: var(--text); font-size: 16px; line-height: 1.7; }

.abschluss { position: relative; overflow: hidden; padding: 105px 24px; background: var(--papier-weiss); color: var(--tinte); text-align: center; }
.abschluss__schein { position: absolute; top: -250px; left: 50%; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(201,178,132,.15), rgba(201,178,132,0) 68%); transform: translateX(-50%); pointer-events: none; }
.abschluss > *:not(.abschluss__schein) { position: relative; }
.abschluss .ueberzeile { justify-content: center; color: var(--gold); }
.abschluss h2 { max-width: 850px; margin: 0 auto 22px; }
.abschluss > p:not(.ueberzeile) { max-width: 670px; margin: 0 auto 28px; color: var(--text); font-size: 17px; line-height: 1.7; }
.abschluss__preis { display: block; margin-top: 18px; color: var(--text); font-size: 13px; line-height: 1.7; }

.seitenfuss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 32px; padding: 30px clamp(22px, 5vw, 86px) 24px; background: var(--tinte); color: #fff; }
.marke--fuss .marke__logo { height: 108px; }
.seitenfuss > p { margin: 0; color: #ccc; font-size: 13px; }
.seitenfuss__links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.seitenfuss__links a { color: #ddd; font-size: 12px; text-decoration: none; }
.seitenfuss__links a:hover { color: var(--gold); }
.seitenfuss > small { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.2); color: #ccc; font-size: 12px; line-height: 1.6; }

@media (min-width: 1201px) {
  .einstieg__grafiken { left: -24px; }
  .einstieg__plattformnetz { left: 27%; }
  .einstieg__grafiken > .sichtbarkeitsbild { top: -24px; left: calc(32px - clamp(48px, 5.5vw, 94px)); }
}
@media (max-width: 1200px) {
  .einstieg { grid-template-columns: minmax(0, 1fr); gap: 50px; padding: 70px clamp(24px, 7vw, 90px) 80px; }
  .einstieg__inhalt { grid-column: 1; grid-row: 1; max-width: 920px; }
  .einstieg__grafiken { top: -20px; grid-column: 1; grid-row: 2; width: min(82%, 560px); }
  .weiterhinweis { display: none; }
}
@media (max-width: 1100px) {
  .ki-pruefung__raster { grid-template-columns: minmax(0, 1fr); }
  .ki-pruefung__methode { max-width: 800px; padding-top: 0; }
  .ki-scout__themen { grid-template-columns: minmax(0, 1fr); }
  .ki-scout__analysen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .belegbereich { grid-template-columns: minmax(0, 1fr); }
  .verzeichnisnetz { grid-column: 1; grid-row: auto; margin-top: 40px; }
}
@media (max-width: 900px) {
  h1, h2, h3, .abschnittsnummer span { overflow-wrap: anywhere; }
  .seitenkopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; min-height: 0; padding: 12px 20px; }
  .seitenkopf .marke { min-width: 0; gap: 12px; }
  .seitenkopf .marke__logo { height: 56px; }
  .seitenkopf .marke__produkt { min-width: 0; font-size: clamp(18px, 3.4vw, 26px); letter-spacing: 0; line-height: 1.2; }
  .seitenkopf .marke__zusatz { margin-top: 4px; font-size: 11px; }
  .menue-schalter:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--gold); border-radius: 6px; background: transparent; color: #fff; font: 700 14px/1.3 var(--schrift); cursor: pointer; }
  .seitenkopf--menue-offen .menue-schalter { background: rgba(201,178,132,.18); }
  .hauptnavigation { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; }
  .hauptnavigation > a:not(.knopf) { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .25em; min-height: 44px; padding: 10px 6px; font-size: 16px; }
  .hauptnavigation .knopf { min-height: 44px; margin: 8px 4px; font-size: 15px; }
  .seitenkopf--menue-bereit .hauptnavigation { display: none; }
  .seitenkopf--menue-offen .hauptnavigation { display: flex; }
  .ki-scout__abschluss { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ki-scout__buchung { width: 100%; max-width: 380px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--linie); }
  .ki-pruefung__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lokalargumente { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .reporting, .preisbereich__inhalt { grid-template-columns: minmax(0, 1fr); }
  .reporting { gap: 42px; }
  .reporting__text { max-width: 760px; }
  .reportansicht { max-width: 760px; }
  .ablaufschritte { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ablaufschritte article { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--linie); }
  .ablaufschritte article > span { grid-row: 1 / span 2; margin: 2px 0 0; }
  .ablaufschritte p { grid-column: 2; }
}
@media (max-width: 700px) {
  .seitenkopf { padding: 12px 16px; }
  .marke { gap: 12px; }
  .marke__trenner { margin-left: 8px; }
  .marke__produkt { font-size: 14px; }
  .marke__logo { height: 96px; }
  .marke--fuss .marke__logo { height: 96px; }
  .einstieg { gap: 38px; min-height: 0; padding: 55px 22px 66px; }
  .einstieg h1 { font-size: clamp(38px, 8vw, 54px); }
  .einstieg__text { font-size: 17px; }
  .einstieg__leistungsueberblick { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 30px; }
  .einstieg__vertrauen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .einstieg__leistungsueberblick .preis-hinweis { width: 100%; max-width: none; margin: 0; }
  .ki-pruefung, .ki-scout, .belegbereich, .leistung, .reporting, .ablauf, .preisbereich, .fragen { padding: 75px 22px; }
  .ki-pruefung h2, .ki-scout h2, .belegbereich h2, .leistung h2, .reporting h2, .ablauf h2, .preisbereich h2, .fragen h2, .abschluss h2 { font-size: clamp(32px, 7vw, 44px); }
  .ki-pruefung__felder { grid-template-columns: minmax(0, 1fr); }
  .ki-pruefung { padding-block: 48px; }
  .ki-pruefung__formular { padding: 20px; }
  .ki-scout__analysen, .ki-scout__betreuung { grid-template-columns: minmax(0, 1fr); }
  .ki-scout__einstieg { margin-bottom: 30px; }
  .ki-scout__themen { gap: 20px; }
  .ki-scout__thema h3 { margin-bottom: 22px; }
  .ki-scout__analysen { gap: 24px; }
  .ki-scout__betreuung { margin-top: 32px; padding: 22px; }
  .ki-scout__abschluss { width: 100%; padding: 22px; }
  .ki-scout__buchung { max-width: none; }
  .quellenbeleg { padding: 22px; }
  .quellenbeleg__zeile { flex-direction: column; gap: 3px; }
  .quellenbeleg__werte { gap: 18px; }
  .leistungsraster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .leistungsbaustein { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 22px; }
  .leistungsbaustein__symbol { width: 40px; height: 40px; }
  .reportansicht { padding: 16px; }
  .preiskarte { padding: 23px; }
  .abschluss { padding: 80px 22px; }
  .seitenfuss { grid-template-columns: 1fr; gap: 14px; padding: 28px 22px; }
  .seitenfuss > small { grid-column: 1; }
  .einstieg__grafiken { top: 0; display: grid; gap: 24px; width: min(100%, 470px); padding-top: 0; }
  .einstieg__plattformnetz { position: relative; inset: auto; grid-row: 2; width: 100%; }
  .sichtbarkeitsbild { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; aspect-ratio: auto; padding: 20px; border-radius: 24px; }
  .sichtbarkeitsbild__verbindungen { display: none; }
  .sichtbarkeitsbild__zentrum { position: relative; top: auto; left: auto; width: 128px; height: 128px; flex: none; border-width: 8px; transform: none; }
  .sichtbarkeitsbild__zentrum strong { font-size: 32px; }
  .sichtbarkeitsbild__stationen { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .sichtbarkeitsbild__station, .sichtbarkeitsbild__station--oben, .sichtbarkeitsbild__station--unten {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    min-height: 52px;
    padding: 9px 8px 9px 23px;
    font-size: 13px;
    transform: none;
  }
  .sichtbarkeitsbild__station::before { left: 9px; width: 6px; height: 6px; }
  .quellenbeleg__werte { grid-template-columns: minmax(0, 1fr); }
  .quellenwert > span { min-height: 0; }
  .reportansicht__kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .reportansicht__kennzahlen > div { min-height: 65px; }
  .reportansicht__diagramm-kopf span + span { display: none; }
}
@media (max-width: 390px) {
  .marke__produkt { font-size: 13px; }
  .einstieg__aktionen { align-items: flex-start; flex-direction: column; }
  .sichtbarkeitsbild { padding: 20px; }
  .sichtbarkeitsbild__station, .sichtbarkeitsbild__station--oben, .sichtbarkeitsbild__station--unten { min-height: 46px; }
  .reportansicht__monate { font-size: 9px; }
  .preiskarte__preis { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}