/* Gemeinsames Kleid der Anlass-Seiten (fuer/) — die Mini-Wand ist dieselbe
   wie auf der Einladungsseite. */
.case {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 64px;
}
.case h1 {
  margin: 18px 0 8px;
}
.case .lede {
  margin-top: 6px;
  font-size: 23px;
}
.case-block {
  margin-top: 34px;
}
/* Grosse, leicht lesbare Texte — sie sollen ins Auge springen, nicht
   flüstern (Michael 2026-08-21). */
.case-block p,
.case-block li,
.case-block summary {
  font-size: 22px;
  line-height: 1.5;
}
.case-block .eyebrow {
  font-size: 18px;
}
/* Die Wandnamen tragen die Markenfarbe mit. */
.wall-name {
  color: #007b85;
}
.case-block li {
  margin-top: 10px;
}
.case-block ul {
  padding-left: 20px;
}
.case-list {
  padding-left: 20px;
}
.case-list li {
  margin-top: 10px;
}

/* Die grosse, lebende Wand (wall.js): Korkbrett-Optik, Sachen ziehbar. */
.wall-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: rgba(34, 28, 15, 0.55);
  margin: 28px 0 10px;
}
.case-wall {
  position: relative;
  height: 460px;
  border-radius: 18px;
  overflow: hidden;
  background: #efe3c8;
  background-image: radial-gradient(rgba(34, 28, 15, 0.14) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
}
@media (max-width: 720px) {
  .case-wall {
    height: 400px;
  }
}
.case-wall .wall-caption {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(34, 28, 15, 0.55);
  margin-top: 6px;
}
.case-wall .is-photo .stripes {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  border-radius: 3px;
}

.cta-fold {
  margin-top: 18px;
}
.cta-fold .fine {
  margin-top: 8px;
}
.case .steps {
  margin-top: 10px;
  padding-left: 22px;
}
.case .steps li {
  margin-top: 10px;
}

/* Der Erklaersatz vor dem h1: keine Seite setzt voraus, dass "Wand" verstanden ist. */
.case .whatis {
  margin-top: 18px;
  max-width: 620px;
  font-size: 24px;
  line-height: 1.5;
  color: rgba(34, 28, 15, 0.78);
}

/* Ganzflächig hinter dem Text: die Wand ist der Grund, auf dem der
   Kopfbereich liegt. */
.case.wall-stage {
  min-height: 780px;
}
/* Muss hier stehen und nicht nur in styles.css: fuer.css wird später geladen
   und würde die Handy-Regel sonst wieder überschreiben. */
@media (max-width: 720px) {
  .case.wall-stage {
    min-height: 0;
    padding-bottom: 340px;
  }
}
/* Randlos über die ganze Breite: absolut positioniert zieht `margin` nicht,
   also aus der Spalte heraus auf Fensterbreite gerechnet. */
.case-wall.wall-bg {
  height: auto;
  border-radius: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  right: auto;
}
.case-head {
  padding-top: 26px;
}