/* ============================================================
   Abschnitt

   Masse aus Prototyp.dc.html Zeile 1888 / 1983 / 2047.

   Aufbau: Die <section> laeuft ueber die volle Breite und traegt die
   Flaeche (Band, Panel). Erst der Inhalt darin wird auf 1180px begrenzt.
   So laeuft eine Bandflaeche randlos durchs Bild, waehrend die Trennlinie
   des Normalfalls — wie im Prototyp — nur ueber die Inhaltsbreite geht.

   Alle Masse haengen an zwei blockeigenen Variablen. Wer den Block in ein
   anderes Theme kopiert, hat damit einen Regler und muss nicht die
   Media Queries durchsuchen.
   ============================================================ */

.ps-abschnitt {
  --ps-abschnitt-py: var(--space-10);
  --ps-abschnitt-px: var(--space-6);
  --ps-abschnitt-gap: var(--space-9);

  /* Der Flow-Layout-Block von WordPress setzt zwischen Geschwistern
     `margin-block-start`. Abschnitte stossen aber direkt aneinander —
     ihren Abstand macht das Innenpolster, nicht ein Aussenabstand. */
  margin-block: 0;
}

.ps-abschnitt__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--ps-abschnitt-gap);
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1180px);
  margin-inline: auto;
  padding: var(--ps-abschnitt-py) var(--ps-abschnitt-px);
}

/* ---------- Trennlinie ---------- */

.ps-abschnitt--linie > .ps-abschnitt__inhalt {
  border-top: 1px solid var(--section-line);
}

/*
   Nach einem gefaerbten Abschnitt faellt die Linie weg: Dessen Kante ist
   der Trenner. Zwei Striche uebereinander sind einer zu viel — und genau
   das stand ueber „Wie wir zusammenarbeiten“, direkt unter dem Band.

   Der Nachbarschaftsselektor kann das von selbst; niemand muss beim
   Verschieben eines Abschnitts daran denken, einen Schalter umzulegen.
*/

.ps-abschnitt--band + .ps-abschnitt--linie > .ps-abschnitt__inhalt,
.ps-abschnitt--panel + .ps-abschnitt--linie > .ps-abschnitt__inhalt {
  border-top: 0;
}

/* Dasselbe fuer die Abschnitte, die noch aus Core-Bloecken bestehen. */
.ps-abschnitt--band + .ps-section,
.ps-abschnitt--panel + .ps-section {
  border-top: 0;
}

/* ---------- Flaechen ---------- */

.ps-abschnitt--panel {
  background: var(--section-panel);
  border-block: 1px solid var(--section-line);
}

.ps-abschnitt--band {
  background: var(--section-band);
  border-block: 1px solid var(--section-band-line);
}

/*
   Im hellen Schema ist das Band Petrol-950 — darauf muss die Schrift hell
   werden. Statt jede Regel zu doppeln, werden hier die Text-Token neu
   belegt: Alles darin erbt die richtige Farbe von selbst, auch Bloecke,
   die es noch gar nicht gibt.

   Im dunklen Schema ist das Band eine aufgehellte Flaeche der Seite; dort
   stimmen die normalen Token bereits.
*/
:root:not([data-theme="dark"]) .ps-abschnitt--band {
  --text-strong:    var(--on-band-strong);
  --text-body:      var(--on-band-text);
  --text-muted:     var(--on-band-label);
  --border-subtle:  var(--on-band-line);
  --border-default: var(--on-band-line);
  --section-line:   var(--on-band-line);

  /* Auf dunklem Grund traegt der helle Akzent, nicht die kraeftige
     Schwester — die ist fuer Text auf hellem Grund gemacht. */
  --highlight:      var(--accent-base);
}

/* ---------- Abstandsstufen ---------- */

.ps-abschnitt--aussen-eng  { --ps-abschnitt-py: var(--space-9); }
.ps-abschnitt--aussen-ohne { --ps-abschnitt-py: 0; }
.ps-abschnitt--abstand-eng { --ps-abschnitt-gap: var(--space-8); }

/* ---------- Schmale Breiten ---------- */
/*
   Der Prototyp ist hier nicht optimiert: 128px oben und unten kosten auf
   dem Handy fast einen halben Bildschirm an Scrollweg, ohne etwas zu
   zeigen. Deshalb zwei Stufen nach unten.
*/

@media (max-width: 768px) {
  .ps-abschnitt {
    --ps-abschnitt-py: var(--space-8);
    --ps-abschnitt-px: var(--space-4);
    --ps-abschnitt-gap: var(--space-7);
  }
  .ps-abschnitt--aussen-eng { --ps-abschnitt-py: var(--space-7); }
}

@media (max-width: 480px) {
  .ps-abschnitt {
    --ps-abschnitt-py: var(--space-7);
    --ps-abschnitt-gap: var(--space-6);
  }
}