/* Raster: Bahn, Abschnitt, Zeile, Spalte, Formkanten.
   Bildet Divis Aufbau nach – die Maße stehen in README.md.

   Namen: Klassen deutsch und nach dem Muster block__element--art.
   Werte, die aus dem Bestand kommen, reisen als CSS-Eigenschaft am
   Element mit (--bereich-eigenschaft) – siehe includes/stil.php. */

/* ---------------------------------------------------------------- Raster */

/* Divi rechnet in Prozent des Fensters: Die Zeile ist 80 % breit, höchstens
   aber die eingestellten 1198 px. Bei 1440 px Fenster sind das 1140 px – genau
   so breit steht der Inhalt auf der bestehenden Seite. Unterhalb von 980 px
   wechselt Divi auf 90 %. */
.bahn {
  width: min(80%, var(--inhalt-breite));
  margin-inline: auto;
}

.bahn--schmal {
  width: min(80%, var(--inhalt-schmal));
  margin-inline: auto;
}

@media (max-width: 980px) {
  .bahn,
  .bahn--schmal {
    width: 90%;
  }
}

/* Abschnittsluft: 4 % der Fensterbreite, wie im Bestand (57 px bei 1425 px).
   Einzelne Abschnitte weichen ab; ihre Werte kommen aus dem Modell. */
.abschnitt {
  padding-top: var(--abschnitt-oben, 4%);
  padding-bottom: var(--abschnitt-unten, 4%);
}

/* Angesprungene Abschnitte (#kennung) halten Abstand zum festen Kopf. */
.abschnitt[id] {
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--abstand-s));
}

.abschnitt--dunkel {
  background: linear-gradient(160deg, var(--dunkel) 0%, var(--blau) 130%);
  color: var(--hell);
}

.abschnitt--dunkel h1,
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 {
  color: var(--rein-weiss);
}

.abschnitt--hell {
  background: var(--hell);
}

/* Eigener Ton aus dem Bestand – die Farbe steht am Abschnitt selbst. */
.abschnitt--farbig {
  background: var(--abschnitt-grund);
}

/* Verlauf ohne Bild darunter: Er ist selbst der Hintergrund. */
.abschnitt--verlauf {
  background: var(--abschnitt-verlauf);
}

.abschnitt--farbig.abschnitt--dunkel {
  background: var(--abschnitt-grund);
  color: var(--hell);
}

/* ------------------------------------------------------- Zeilen, Spalten */

/* Eine Zeile ist 80 % des Fensters breit, höchstens 1198 px – Divis Vorgabe.
   Einzelne Zeilen weichen davon ab (Bildstrecken laufen über die volle
   Breite); diese Werte kommen als --zeile-breite/--zeile-max aus dem Modell.

   Die Rinne beträgt 5,5 % der Zeile. Bei zwölf Spuren ergibt das rechnerisch
   genau Divis Spaltenbreiten: eine halbe Zeile misst 47,25 %, ein Viertel
   20,875 %. Bildstrecken setzen sie auf 0. */
.zeile {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--rinne, 5.5%);
  row-gap: var(--abstand-m);
  align-items: start;
  width: var(--zeile-breite, 80%);
  max-width: var(--zeile-max, var(--inhalt-breite));
  margin-inline: auto;
  padding-block: 2%;
}

@media (max-width: 980px) {
  .zeile {
    width: var(--zeile-breite, 90%);
  }
}

/* Inhalte liegen über Hintergrundbild, Schleier und Formkanten. Ohne die
   Ebene verdeckte die Kante am Fuß der Kontaktseite den Absenden-Knopf. */
.abschnitt__inhalt {
  position: relative;
  z-index: 2;
}

/* Inhalt eines Schaubilds – im Bestand mittig und in halber Breite. */
.aussage {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------ Formkanten */

.abschnitt--kanten {
  position: relative;
  overflow: hidden;
}

.teiler {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--teiler-hoehe, 100px);
  background: var(--teiler-bild) center / 100% 100% no-repeat;
  transform: var(--teiler-kippen, none);
  pointer-events: none;
  z-index: 1;
}

.teiler--oben  { top: 0; }
.teiler--unten { bottom: 0; }

.spalte {
  grid-column: span var(--spalten, 12);
  min-width: 0;
  padding: var(--spalte-oben, 0) var(--spalte-rechts, 0)
           var(--spalte-unten, 0) var(--spalte-links, 0);
}

/* Eigene Farbe aus dem Bestand: Auf /kontakt/ liegt das Formular auf
   Hellgrau, die Spalte daneben auf Blau. */
.spalte--farbig {
  background: var(--spalte-grund);
}

.zeile--farbig {
  background: var(--zeile-grund);
}

/* Heller Text auf dunklem Grund – gilt für Zeilen wie für Spalten.
   Eine Klasse statt Verschachtelung: Sie hängt an dem Element, das die
   Farbe trägt, und wirkt auf alles darin. */
.auf-dunkel {
  color: var(--hell);
}

.auf-dunkel h1,
.auf-dunkel h2,
.auf-dunkel h3,
.auf-dunkel h4,
.auf-dunkel .fliesstext,
.auf-dunkel .fliesstext a {
  color: var(--rein-weiss);
}

.auf-dunkel .trenner {
  background: rgba(232, 238, 241, 0.25);
}

/* Bausteine untereinander: 2,75 % der Spaltenbreite, wie in Divi. In schmalen
   Spalten rücken sie dadurch enger zusammen – aber nie unter eine Mindestluft,
   sonst kleben in einer Seitenspalte Kasten an Kasten. */
.spalte > * + * {
  margin-top: max(2.75%, var(--abstand-s));
}

/* Eigenständige Kästen in einer Spalte (Ampel, Ablauf, Aufruf) brauchen
   mehr Abstand zueinander als Text zu Text. */
.spalte > * + .auslastung,
.spalte > .auslastung + *,
.spalte > * + .schritte,
.spalte > .schritte + * {
  margin-top: var(--abstand-l);
}

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

  .spalte {
    grid-column: 1 / -1;
  }
}

/* Abschnitt mit Hintergrundbild.
   Die Textfarbe kommt aus der Tonlage, nicht aus der Tatsache, dass hier ein
   Bild liegt: Der Kopfbereich von /hochzeit/ legt einen hellen Verlauf über
   sein Foto und trägt dunklen Text. Ein pauschaler dunkler Schleier hätte die
   Seite ins Gegenteil verkehrt. */
.abschnitt--bild {
  position: relative;
  background: var(--weiss);
}

.abschnitt__grund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildlage, center);
}

/* Abschnitt mit eigener Höhe – etwa der bildschirmhohe Kopf von /portrait/. */
.abschnitt--hoch {
  display: flex;
  align-items: center;
  min-height: var(--abschnitt-hoehe, auto);
  padding-block: 0;
}

/* Der Schleier trägt den Verlauf aus dem Bestand. Fehlt er, bleibt er leer –
   das Bild steht dann für sich. */
.abschnitt__schleier {
  position: absolute;
  inset: 0;
  background: var(--abschnitt-verlauf, none);
}

/* Kein Verlauf, aber dunkle Tonlage: Dann braucht heller Text seinen Grund. */
.abschnitt--bild.abschnitt--dunkel {
  color: var(--hell);
}

.abschnitt--bild.abschnitt--dunkel .abschnitt__schleier {
  background: var(--abschnitt-verlauf,
    linear-gradient(180deg, rgba(2, 32, 59, 0.55) 0%, rgba(2, 32, 59, 0.72) 100%));
}

.abschnitt--bild.abschnitt--dunkel h1,
.abschnitt--bild.abschnitt--dunkel h2,
.abschnitt--bild.abschnitt--dunkel h3 {
  color: var(--rein-weiss);
}

/* Platzhalter, damit Inhalte nicht unter der festen Kopfzeile beginnen */
.unter-kopfzeile {
  height: calc(var(--kopf-hoehe) + var(--abstand-s) * 2);
}

.abschnitt--titel {
  padding-bottom: 0;
}