/* ==========================================================================
   KI-Register - Produktseite
   Eine Datei, keine Abhängigkeiten, keine externen Schriften. Die Seite soll
   aussehen wie die Anwendung: hell, aufgeräumt, ein Akzentton.
   ========================================================================== */

:root {
  --akzent: #1f5eb3;
  --akzent-dunkel: #17498c;
  --akzent-blass: #eef4fc;

  --text: #16202e;
  --text-leise: #5b6675;
  --text-hell: #ffffff;
  --text-hell-leise: #c7d8f0;

  --flaeche: #ffffff;
  --flaeche-hell: #f6f9fc;
  --rand: #e3e8ef;

  --bahn: 1180px;
  --radius: 10px;
  --radius-gross: 14px;

  --schatten: 0 1px 2px rgba(22, 32, 46, .06), 0 8px 24px rgba(22, 32, 46, .07);
  --schatten-gross: 0 2px 4px rgba(22, 32, 46, .06), 0 18px 50px rgba(22, 32, 46, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--akzent); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; }

/* --------------------------------------------------------------- Grundraster */

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: 24px;
}

.bahn--schmal { max-width: 760px; }

.abschnitt { padding-block: 88px; }
.abschnitt--hell { background: var(--flaeche-hell); border-block: 1px solid var(--rand); }
.abschnitt--akzent { background: var(--akzent); color: var(--text-hell); }

.mitte { text-align: center; }

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.sprungmarke:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- Typografie */

.ueberschrift {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem);
  font-weight: 650;
  margin-bottom: 18px;
}
.ueberschrift--mitte { text-align: center; }
.ueberschrift--hell { color: var(--text-hell); }

.vorspann {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
  color: var(--text-leise);
  font-size: 1.06rem;
}
.vorspann--hell { color: var(--text-hell-leise); }

.fliesstext p { margin: 0 0 18px; font-size: 1.08rem; }
.fliesstext p:last-child { margin-bottom: 0; }
.fliesstext strong { font-weight: 640; }

.hinweiszeile {
  margin: 34px 0 0;
  padding: 18px 22px;
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-leise);
}

.kleingedruckt { color: var(--text-leise); font-size: .92rem; margin: 18px 0 0; }

/* --------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rand);
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 660;
  letter-spacing: -.01em;
}

.marke__zeichen {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--akzent);
  flex: none;
}

.kopf__nav { display: flex; align-items: center; gap: 26px; }

.kopf__nav a {
  color: var(--text-leise);
  text-decoration: none;
  font-size: .95rem;
}
.kopf__nav a:hover { color: var(--text); }

/* Der Knopf in der Kopfzeile behaelt seine eigene Farbe: `.kopf__nav a` ist
   spezifischer als `.knopf` und wuerde die Schrift sonst grau faerben. */
.kopf__nav a.knopf,
.kopf__nav a.knopf:hover { color: #fff; }

@media (max-width: 640px) {
  .kopf__nav a:not(.knopf) { display: none; }
}

/* --------------------------------------------------------------- Knöpfe */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--akzent);
  transition: background-color .15s ease;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf--klein { padding: 8px 16px; font-size: .92rem; }
.knopf--gross { padding: 15px 34px; font-size: 1.06rem; }

.verweis {
  color: var(--text-leise);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--rand);
  padding-bottom: 2px;
}
.verweis:hover { color: var(--text); border-color: var(--text-leise); }

.abschnitt--akzent .knopf {
  background: #fff;
  color: var(--akzent);
  border-color: #fff;
}

/* --------------------------------------------------------------- Hero */

.hero {
  padding-top: 76px;
  padding-bottom: 0;
  text-align: center;
  background:
    radial-gradient(1100px 420px at 50% -140px, var(--akzent-blass), transparent 70%);
}

.hero__kategorie {
  margin: 0 0 20px;
  color: var(--akzent);
  font-size: .82rem;
  font-weight: 620;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hero__claim {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.35rem);
  font-weight: 680;
  letter-spacing: -.028em;
  margin-bottom: 22px;
}

.hero__unterzeile {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(1.06rem, 1rem + .5vw, 1.28rem);
  color: var(--text-leise);
}

.hero__aktion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 26px;
  margin: 34px 0 0;
}

/* --------------------------------------------------- Browserfenster-Rahmen */

.fenster {
  margin: 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--schatten);
}

.fenster--gross {
  margin-top: 56px;
  box-shadow: var(--schatten-gross);
}

.fenster__leiste {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 14px;
  background: var(--flaeche-hell);
  border-bottom: 1px solid var(--rand);
}

.fenster__leiste span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d3dae3;
  flex: none;
}

/* Bildausschnitt: die Aufnahmen sind oben interessant, unten leer */
.fenster img { display: block; width: 100%; }

/* --------------------------------------------------------------- Kacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 34px;
}

@media (max-width: 860px) {
  .kacheln { grid-template-columns: 1fr; gap: 46px; }
}

.kachel { display: flex; flex-direction: column; }

.kachel .fenster { margin-bottom: 22px; }

.kachel .fenster img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}

.kachel__nummer {
  margin: 0 0 6px;
  color: var(--akzent);
  font-size: .78rem;
  font-weight: 660;
  letter-spacing: .1em;
}

.kachel h3 { font-size: 1.24rem; font-weight: 640; margin-bottom: 10px; }

.kachel p:last-child { margin: 0; color: var(--text-leise); }

/* --------------------------------------------------------------- Merkmale */

.merkmale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 44px;
}

@media (max-width: 800px) {
  .merkmale { grid-template-columns: 1fr; gap: 34px; }
}

.merkmal {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-gross);
  padding: 30px 30px 28px;
}

.merkmal__zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.merkmal__zeichen svg { width: 23px; height: 23px; }

.merkmal h3 {
  color: var(--text-hell);
  font-size: 1.16rem;
  font-weight: 640;
  margin-bottom: 10px;
}

.merkmal p { margin: 0; color: var(--text-hell-leise); font-size: 1rem; }

/* --------------------------------------------------------------- Schritte */

.schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}

@media (max-width: 800px) {
  .schritte { grid-template-columns: 1fr; gap: 30px; }
}

.schritt {
  position: relative;
  padding: 30px 28px 28px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

.schritt__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 0 16px;
  border-radius: 50%;
  background: var(--akzent-blass);
  color: var(--akzent);
  font-weight: 680;
  font-size: 1.02rem;
}

.schritt h3 { font-size: 1.16rem; font-weight: 640; margin-bottom: 10px; }

.schritt p:last-child { margin: 0; color: var(--text-leise); font-size: 1rem; }

/* --------------------------------------------------------------- Fußzeile */

.fuss {
  background: #10192a;
  color: #96a3b6;
  padding-block: 52px 44px;
  font-size: .93rem;
}

.fuss__disclaimer {
  margin: 0 0 14px;
  color: #dbe3ee;
  font-weight: 560;
}

.fuss__katalog {
  margin: 0 0 26px;
  max-width: 720px;
  line-height: 1.6;
}

.fuss__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.fuss__nav a { color: #96a3b6; text-decoration: none; }
.fuss__nav a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------- Fokus */

a:focus-visible,
.knopf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

.abschnitt--akzent a:focus-visible { outline-color: #fff; }
.fuss a:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------- Druck */

@media print {
  .kopf, .sprungmarke { display: none; }
  .abschnitt { padding-block: 24px; }
  .abschnitt--akzent { background: #fff; color: #000; }
  .merkmal h3, .merkmal p, .ueberschrift--hell, .vorspann--hell { color: #000; }
  .fenster { box-shadow: none; }
}

.fuss__anbieter {
  margin: 18px 0 0;
  font-size: .88rem;
  color: #78879c;
}

/* --------------------------------------------------- Bild vergrößern (Lupe) */

/* Der Verweis zeigt auf das PNG. Ohne JavaScript öffnet der Klick schlicht das
   Bild - die Vergrößerung ist eine Zugabe, keine Voraussetzung. */
.lupe {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.lupe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

.lupe:hover::after { opacity: .05; }

.lupe__zeichen {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(22, 32, 46, .62);
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.lupe:hover .lupe__zeichen,
.lupe:focus-visible .lupe__zeichen { opacity: 1; transform: none; }

.lupe__zeichen svg { width: 18px; height: 18px; }

/* Überlagerung */

.lupe-fenster {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: none;
  border-radius: var(--radius-gross);
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
  overflow: hidden;
}

.lupe-fenster::backdrop { background: rgba(16, 25, 42, .82); }

.lupe-fenster img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94vh - 30px);
  object-fit: contain;
}

.lupe-fenster__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 42px;
  padding-inline: 14px;
  background: var(--flaeche-hell);
  border-bottom: 1px solid var(--rand);
}

.lupe-fenster__titel {
  font-size: .88rem;
  color: var(--text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lupe-fenster__zu {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: #fff;
  color: var(--text-leise);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.lupe-fenster__zu:hover { color: var(--text); border-color: var(--text-leise); }

.fuss__katalogstand {
  display: block;
  margin-bottom: 6px;
  color: #b9c5d4;
  font-weight: 560;
}

/* Überschriften in längeren Fließtexten (Datenschutz) */
.fliesstext h2 {
  margin: 34px 0 12px;
  font-size: 1.14rem;
  font-weight: 640;
}
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext code {
  padding: 1px 5px;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: 5px;
  font-size: .92em;
}

.vorspann--links { margin-inline: 0; text-align: left; }