/* Strukturbausteine, die den Fließtext auflockern: Kennzahlenleiste,
   Bento-Raster, Bildergalerie mit Schnappen, Ablaufschritte, Bildtafel,
   Vergleichsliste. Bewusst getrennt von components.css, weil es hier um
   Seitenaufbau geht und nicht um wiederkehrendes Kleinteiliges. */

/* Kennzahlenleiste. Drei bis vier belegbare Angaben als schneller Überblick. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin-block: var(--space-l);
  background-color: var(--sky-200);
  border: 1px solid var(--sky-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.kennzahl {
  padding: var(--space-m) var(--space-s);
  background-color: var(--sky-50);
  text-align: center;
}

.kennzahl-wert {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--sky-800);
}

.kennzahl-text {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-700);
  max-width: none;
}

/* Bento-Raster. Bewusst ungleiche Kacheln statt drei gleicher Karten: die
   wichtigste Kachel bekommt mehr Fläche, der Rest ordnet sich unter. */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-block: var(--space-m) var(--flow-absatz);
}

@media (min-width: 44em) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }

  .bento-gross {
    grid-column: span 2;
  }
}

@media (min-width: 62em) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento-gross {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Vier Kacheln gehen im Dreierraster nie sauber auf, es bliebe eine halbe
   Zeile leer. Deshalb für diesen Fall zwei Spalten, die hervorgehobene Kachel
   behält ihre Fläche, verliert aber die doppelte Breite. */
.bento-vier {
  grid-template-columns: 1fr;
}

@media (min-width: 44em) {
  .bento-vier {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-vier .bento-gross {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (min-width: 62em) {
  .bento-vier {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bento-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
  border: 1px solid var(--sky-100);
  border-radius: var(--radius);
  background-color: var(--sky-50);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-hover) var(--ease-hover),
    box-shadow var(--duration-hover) var(--ease-hover),
    transform var(--duration-hover) var(--ease-out);
}

a.bento-kachel:hover {
  border-color: var(--sky-300);
  box-shadow: var(--schatten-karte);
  transform: translateY(-2px);
  color: inherit;
}

.bento-kachel > * {
  min-width: 0;
}

.bento-kachel h3 {
  margin: 0;
}

.bento-kachel p {
  margin: 0;
  color: var(--ink-700);
  max-width: none;
}

.bento-gross {
  background-color: var(--sky-100);
  border-color: var(--sky-200);
}

.bento-preis {
  margin-top: auto;
  padding-top: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sky-800);
}

.bento-hinweis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  align-self: flex-start;
  padding: 0.15rem var(--space-2xs);
  border-radius: 999px;
  /* sky-700 statt sky-600: der Hinweis ist mit 0.75rem kleiner Text und
     braucht 4.5:1. Auf sky-600 lag der Kontrast bei 4.00. */
  background-color: var(--sky-700);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Bildergalerie mit Schnappen. Rein über CSS-Scroll-Snap gelöst, dadurch ohne
   JavaScript bedienbar, per Tastatur scrollbar und ohne Fremdbibliothek.
   Die Pfeiltasten des Skripts sind nur eine Ergänzung. */
.galerie {
  margin-block: var(--space-m) var(--flow-absatz);
}

.galerie-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 78%);
  gap: var(--space-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding-bottom: var(--space-2xs);
  scrollbar-color: var(--sky-300) var(--sky-50);
}

@media (min-width: 44em) {
  .galerie-spur {
    grid-auto-columns: minmax(18rem, 42%);
  }
}

@media (min-width: 68em) {
  .galerie-spur {
    grid-auto-columns: minmax(18rem, 31%);
  }
}

.galerie-bild {
  scroll-snap-align: start;
  margin: 0;
  border: 1px solid var(--sky-100);
  border-radius: var(--radius);
  background-color: var(--sky-50);
  overflow: hidden;
}

.galerie-bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.galerie-bild figcaption {
  padding: var(--space-xs) var(--space-s) var(--space-s);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-700);
}

.galerie-bild figcaption b {
  display: block;
  color: var(--ink-900);
}

.galerie-steuerung {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.galerie-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--sky-700);
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover),
    border-color var(--duration-hover) var(--ease-hover);
}

.galerie-knopf:hover:not(:disabled) {
  background-color: var(--sky-50);
  border-color: var(--sky-600);
}

.galerie-knopf:disabled {
  opacity: 0.4;
  cursor: default;
}

.galerie-knopf svg {
  width: 20px;
  height: 20px;
}

.galerie-hinweis {
  font-size: var(--font-size-klein);
  color: var(--ink-500);
}

/* Ohne JavaScript sind die Pfeile nutzlos, dann bleibt das Wischen. */
html:not(.js) .galerie-steuerung {
  display: none;
}

/* Ablaufschritte. Nummeriert, damit die Reihenfolge auch ohne Fließtext klar
   ist. Als ol ausgezeichnet, die Zahlen kommen aus dem Markup. */
.ablauf {
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-m) var(--flow-absatz);
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

@media (min-width: 48em) {
  .ablauf {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) var(--space-xl);
  }
}

/* auto-fit statt fester Vier: Seiten mit drei Schritten bekommen sonst eine
   leere vierte Spalte. 11rem ist so gewählt, dass vier Spalten plus Abstände
   in die Textbreite von 61rem passen. */
@media (min-width: 68em) {
  .ablauf {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
}

.ablauf-schritt {
  position: relative;
  counter-increment: schritt;
  padding-top: var(--space-m);
  border-top: 3px solid var(--sky-200);
  min-width: 0;
}

.ablauf-schritt::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background-color: var(--sky-700);
  color: var(--white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.125rem;
}

.ablauf-schritt h3 {
  margin: var(--space-s) 0 var(--space-3xs);
  font-size: var(--font-size-h4);
  font-family: var(--font-sans);
}

.ablauf-schritt p {
  margin: 0;
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-700);
  max-width: none;
}

/* Bildtafel im Fließtext, zweispaltig ab mittlerer Breite. */
.bildtafel {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  margin-block: var(--space-l);
}

@media (min-width: 52em) {
  .bildtafel {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .bildtafel-gedreht .bildtafel-bild {
    order: 2;
  }
}

.bildtafel > * {
  min-width: 0;
}

.bildtafel-bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--sky-100);
}

.bildtafel-bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.bildtafel-bild figcaption {
  padding: var(--space-xs) var(--space-s);
  background-color: var(--sky-50);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-700);
}

.bildtafel-text > :last-child {
  margin-bottom: 0;
}

.bildtafel-text p {
  max-width: none;
}

/* Kennzeichnung erzeugter Bilder.
   Artikel 50 Absatz 4 der KI-Verordnung verlangt vom Betreiber, erzeugte
   Bilder, die echt wirken, offenzulegen. Vorgeschrieben ist ein Hinweis, kein
   Wasserzeichen im Bild: die Pflicht, die Kennzeichnung technisch in den
   Inhalt einzubetten, trifft nach Absatz 2 den Anbieter des Generators.
   Ein Hinweis am Bildblock genügt, ein Hinweis nur im Impressum nicht.
   Deshalb eine ruhige Zeile je Abschnitt statt einer Marke auf jedem Bild. */
/* Zwei Erscheinungsformen, weil zwei Fälle:

   Als Absatz nach einer Galerie deckt eine Zeile mehrere Bilder ab. Der
   negative obere Abstand holt sie an den Bildblock heran, der seinen eigenen
   unteren Abstand mitbringt.

   Als Bildunterschrift steht sie unter genau einem Bild und gehört optisch
   zum Bild. Hier darf der negative Abstand NICHT gelten, sonst rutscht der
   Text auf das Bild. Genau das ist beim Hero-Bild passiert. */
p.bild-hinweis {
  margin-top: calc(var(--space-2xs) * -1);
  margin-bottom: var(--flow-absatz);
}

figcaption.bild-hinweis {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  background-color: var(--sky-50);
  border-top: 1px solid var(--sky-100);
}

.bild-hinweis {
  max-width: none;
  color: var(--ink-500);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
}

/* Das Zertifikat ist ein Dokument, kein Foto: hochkant, mit Rahmen und
   begrenzter Breite, damit es nicht wie ein Hero-Bild wirkt. */
.zertifikat {
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-l);
  align-items: start;
}

@media (min-width: 46em) {
  .zertifikat {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

.zertifikat > * {
  min-width: 0;
}

.zertifikat-bild {
  margin: 0;
  max-width: 16rem;
}

.zertifikat-bild img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background-color: var(--white);
}

.zertifikat-bild figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-500);
}

.zertifikat-text > :first-child {
  margin-top: 0;
}

.zertifikat-text > :last-child {
  margin-bottom: 0;
}

.zertifikat-text p {
  max-width: none;
}

/* Paketliste. Neun Leistungen, die vorher als Folge von Überschrift plus zwei
   Absätzen untereinander standen. Als Karten sind sie einzeln erfassbar, und
   die Zeile "Geeignet, wenn" hebt sich vom Beschreibungstext ab. Die
   Überschriften behalten ihre IDs, die Preisseite verlinkt darauf. */
.paketliste {
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-m) var(--flow-absatz);
}

@media (min-width: 52em) {
  .paketliste {
    grid-template-columns: repeat(2, 1fr);
  }
}

.paket {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-m);
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--sky-700);
  border-radius: var(--radius);
  background-color: var(--white);
}

.paket > * {
  min-width: 0;
}

.paket h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-h4);
  font-family: var(--font-sans);
}

.paket p {
  margin: 0 0 var(--space-s);
  max-width: none;
}

.paket-eignung {
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--sky-100);
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
  color: var(--ink-700);
}

.paket-eignung b {
  color: var(--ink-900);
}

/* Das erste Paket ist der Einstieg und bekommt über die Fläche etwas mehr
   Gewicht, ohne dass ein zweiter Farbton nötig wäre. */
.paket-hervor {
  background-color: var(--sky-50);
  border-color: var(--sky-200);
  border-top-color: var(--sky-700);
}

/* Gegenüberstellung: was ein Gutachten leistet und was nicht. */
.gegenüber {
  display: grid;
  gap: var(--space-m);
  margin-block: var(--space-m) var(--flow-absatz);
}

@media (min-width: 48em) {
  .gegenüber {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gegenüber > * {
  min-width: 0;
}

.gegenüber-block {
  padding: var(--space-m);
  border-radius: var(--radius);
  border: 1px solid var(--sky-200);
  background-color: var(--sky-50);
}

.gegenüber-block h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-h4);
  font-family: var(--font-sans);
}

.gegenüber-block ul {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2xs);
}

.gegenüber-block li {
  display: flex;
  gap: var(--space-2xs);
  max-width: none;
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
}

.gegenüber-block li::before {
  content: "";
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.15em;
  border-radius: 999px;
  background-color: var(--sky-700);
}

/* Der zweite Block trägt bewusst keine Warnfarbe. Der Masterplan verbietet
   Rot, das Gewicht entsteht über die hellere Kante und den Text. */
.gegenüber-block-grenzen {
  background-color: var(--white);
  border-color: var(--ink-200);
}

.gegenüber-block-grenzen li::before {
  background-color: var(--ink-200);
}