/* Grundfarben – hier zentral änderbar */
:root {
  --hintergrund: #e8eef2;
  --box: #ffffff;
  --text: #1d2b36;
  --akzent: #2f6f8f;
  --abstand: clamp(1rem, 3vw, 2rem);
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  line-height: 1.6;
}

/* Überschrift – Schriftgröße wächst mit der Bildschirmbreite */
.kopf {
  padding: var(--abstand);
  text-align: center;
}
.kopf h1 {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--akzent);
}

/* Inhalt: Handy = untereinander */
.inhalt {
  display: grid;
  gap: var(--abstand);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--abstand) var(--abstand);
}

/* Ab Tablet-Querformat: nebeneinander */
@media (min-width: 768px) {
  .inhalt {
    grid-template-columns: 1fr 1fr;
  }
}

.box {
  background: var(--box);
  border-radius: 12px;
  overflow: hidden;
}

/* Foto-Box: zwei Bilder übereinander, das obere wird eingeblendet */
.foto-box {
  position: relative;
  aspect-ratio: 1 / 1; /* quadratisch statt 4:3 */
  background: #ffffff; /* weißer Hintergrund */
  cursor: pointer;
}
.bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* statt cover: Bild wird nie abgeschnitten */
}
.bild-hover {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.foto-box:hover .bild-hover,
.foto-box:focus .bild-hover {
  opacity: 1;
}
.foto-box:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

/* Text-Box */
.text-box {
  padding: var(--abstand);
}
.text-box h2 {
  margin-bottom: 0.5em;
}
.text-box p {
  margin-bottom: 1em;
  max-width: 65ch;
}

@media (prefers-reduced-motion: reduce) {
  .bild-hover {
    transition: none;
  }
}