/* ==========================================================================
   Ebene 4a · Sections – übersetzt die Panel-Settings in Gestaltung
   --------------------------------------------------------------------------
   Das Snippet schreibt nur data-Attribute (data-bg, data-spacing …).
   Hier wird daraus Farbe und Abstand – ausschließlich über Tokens.
   Kundenspezifisches gehört NICHT hierher, sondern in project.css.
   ========================================================================== */

@layer sections {

  /* Grundgerüst ---------------------------------------------------------- */
  .section {
    position: relative;
    padding-block: var(--section-pad, var(--s4));
    background-color: var(--section-bg, transparent);
    color: var(--text-muted);  /* neu auflösen, damit dunkle Sections helle Schrift bekommen */
  }

  /* Abstand oben/unten */
  .section[data-spacing="none"] { --section-pad: 0; }
  .section[data-spacing="s"] { --section-pad: var(--s2); }
  .section[data-spacing="m"] { --section-pad: var(--s4); }
  .section[data-spacing="l"] { --section-pad: var(--s5); }

  /* Hintergründe --------------------------------------------------------
     Trick bei „dark“ und „accent“: color-scheme: dark.
     OPUI definiert Farben mit light-dark(). Stellt man eine Section auf
     dark, rechnen ALLE Komponenten darin (Karten, Buttons, Accordions)
     automatisch mit ihren Dunkel-Werten – ohne eine Zeile Extra-CSS.  */
  .section[data-bg="tonal"] {
    --section-bg: var(--surface-tonal);
  }

  .section[data-bg="dark"] {
    --color-scheme: dark;
    color-scheme: dark;
    --section-bg: var(--gray-15);
  }

  .section[data-bg="accent"] {
    --color-scheme: dark;
    color-scheme: dark;
    --section-bg: var(--color-12);   /* dunkle Stufe der Primärfarbe */
  }

  /* Hintergrundbild – immer mit Abdunklung und hellem Text */
  .section[data-image] {
    --color-scheme: dark;
    color-scheme: dark;
    background-image:
      linear-gradient(oklch(0% 0 0 / var(--section-overlay, 55%)), oklch(0% 0 0 / var(--section-overlay, 55%))),
      var(--section-image);
    background-size: cover;
    background-position: center;
  }

  /* Blocks --------------------------------------------------------------
     .ui-rich-text gibt Absätzen und Überschriften Außenabstände.
     Am Anfang und Ende eines Blocks übernimmt das der .stack. */
  .block > :first-child { margin-block-start: 0; }
  .block > :last-child  { margin-block-end: 0; }

  /* Fließtext nicht breiter als die ideale Zeilenlänge */
  .block.ui-rich-text {
    max-inline-size: var(--measure);
  }
  .columns > :only-child > .block.ui-rich-text {
    /* in einspaltigen Sections darf eine Überschrift etwas breiter laufen */
    max-inline-size: max(var(--measure), 50rem);
  }

  /* Zitat etwas größer, Quelle dezent */
  .block[data-type="quote"] blockquote {
    color: var(--text-primary);
    font-size: var(--font-size-fluid-1);
  }
  .block[data-type="quote"] footer {
    font-size: var(--font-size-1);
  }

  /* Seitenrahmen -------------------------------------------------------- */
  .site-header {
    padding-block: var(--s0);
    border-block-end: var(--border-width) solid var(--border-color);
  }
  .site-title {
    color: var(--text-primary);
    font-size: var(--font-size-3);
    font-weight: 700;
    text-decoration: none;
  }
  .site-footer {
    padding-block: var(--s2);
    border-block-start: var(--border-width) solid var(--border-color);
    font-size: var(--font-size-0);
  }
  .site-footer a {
    color: inherit;
  }
}