/* ==========================================================================
   Ebene 4a · Bausteine – Grundgestaltung der eigenen Blöcke
   --------------------------------------------------------------------------
   Abschnittskopf, Kacheln, Vergleichstabelle, Bühne. Nur Tokens, keine
   Kundenfarben. Akzente der Vergleichstabelle über --akzent-1 / --akzent-2
   (Standard: --primary), im Projekt überschreiben.
   ========================================================================== */

@layer sections {

  /* Abschnittskopf ------------------------------------------------------
     Breite des Einleitungstexts im Projekt änderbar:
       --abschnittskopf-lead-breite (52ch)                                   */
  .abschnittskopf-rubrik {
    border-block-end: var(--border-width) solid var(--border-color);
    margin-block: 0 var(--size-5);
    padding-block-end: var(--size-2);
  }
  .abschnittskopf-titel {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    line-height: 1.15;
    margin: 0 0 var(--size-2);
    text-wrap: balance;
  }
  .abschnittskopf-lead {
    color: var(--text-muted);
    font-size: var(--font-size-2);
    margin: 0;
    max-inline-size: var(--abschnittskopf-lead-breite, 52ch);
  }

  /* Kacheln ------------------------------------------------------------- */
  .kacheln { counter-reset: kachel; }
  .kachel {
    background: var(--surface-tonal);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-3);
    padding: var(--size-5);
  }
  .kachel b { display: block; margin-block-end: var(--size-1); }
  .kachel p { margin: 0; }
  .kacheln[data-nummeriert] .kachel::before {
    color: var(--primary);
    content: counter(kachel);
    counter-increment: kachel;
    display: block;
    font-size: var(--font-size-4);
    font-weight: 700;
    line-height: 1;
    margin-block-end: var(--size-2);
  }

  /* Vergleichstabelle --------------------------------------------------- */
  .vergleich-rahmen { overflow-x: auto; }
  .vergleich { inline-size: 100%; }
  .vergleich :is(th, td) { padding: var(--size-3) var(--size-2); vertical-align: top; }
  .vergleich tbody th { inline-size: 32%; text-align: start; }
  .vergleich [data-akzent="1"] { border-inline-start: var(--border-size-2) solid var(--akzent-1, var(--primary)); }
  .vergleich [data-akzent="2"] { border-inline-start: var(--border-size-2) solid var(--akzent-2, var(--primary)); }

  /* Bühne: randlos, Bild füllt die Fläche, Text unten auf Verlauf -------
     Stellschrauben (Standardwerte in Klammern):
       --buehne-hoehe (auto) · --buehne-min-hoehe (clamp 23–34rem)
       --buehne-schleier (Verlauf Schwarz) · --buehne-breite (68rem)
       --buehne-titel-farbe (#fff) · --buehne-titel-abstand (--size-2)
       --buehne-akzent (--primary) · --buehne-text-farbe (#e6ecf2)
       --buehne-aktionen-abstand (--size-3) · --buehne-umriss (#fff)          */
  .block[data-type="buehne"] { margin-inline: calc(50% - 50vw); }
  .buehne-figur {
    align-items: end;
    block-size: var(--buehne-hoehe, auto);
    display: grid;
    min-block-size: var(--buehne-min-hoehe, clamp(23rem, 62vh, 34rem));
    position: relative;
  }
  .buehne-figur img { block-size: 100%; inline-size: 100%; inset: 0; object-fit: cover; position: absolute; }
  .buehne-schleier {
    background: var(--buehne-schleier, linear-gradient(to top, oklch(0% 0 0 / .85), oklch(0% 0 0 / .55) 45%, oklch(0% 0 0 / .1) 80%));
    inset: 0;
    position: absolute;
  }
  .buehne-inhalt { inline-size: 100%; margin-inline: auto; max-inline-size: var(--buehne-breite, 68rem); padding: 0 var(--size-5) var(--size-8); position: relative; }
  .buehne-titel {
    color: var(--buehne-titel-farbe, #fff);
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    line-height: 1.05;
    margin: 0 0 var(--buehne-titel-abstand, var(--size-2));
    max-inline-size: 20ch;
    text-wrap: balance;
  }
  .buehne-titel em { color: var(--buehne-akzent, var(--primary)); font-style: normal; }
  .buehne-inhalt p { color: var(--buehne-text-farbe, #e6ecf2); margin: 0 0 var(--size-5); max-inline-size: 42ch; }
  .buehne-aktionen { display: flex; flex-wrap: wrap; gap: var(--buehne-aktionen-abstand, var(--size-3)); }
  .buehne-aktionen .ui-button.ui-outlined { --_color: var(--buehne-umriss, #fff); }
}

/* ==========================================================================
   Personen – Porträt, Name, Rolle, Text
   Gestaltung über Variablen (im Projekt überschreiben):
     --personen-abstand, --personen-radius, --personen-kachel-s|m|l,
     --personen-flaeche (Kartenfläche), --personen-name-groesse,
     --personen-rolle-farbe, --personen-hover
   ========================================================================== */
@layer sections {
  .personen {
    --_abstand: var(--personen-abstand, var(--size-5));
    --_radius:  var(--personen-radius, var(--radius-3));
    --_kachel:  var(--personen-kachel-m, 15rem);
    --_format:  4 / 5;
    display: grid;
    gap: var(--_abstand);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--_kachel), 100%), 1fr));
  }
  .personen[data-groesse="s"] { --_kachel: var(--personen-kachel-s, 11rem); }
  .personen[data-groesse="l"] { --_kachel: var(--personen-kachel-l, 20rem); }
  .personen[data-format="f11"] { --_format: 1; }

  .person { display: flex; flex-direction: column; }
  .personen[data-darstellung="karten"] .person {
    background: var(--personen-flaeche, var(--surface-tonal));
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--_radius);
    overflow: hidden;
  }

  /* OPUI: <figure> ist ein zentriertes Grid – hier soll das Bild füllen */
  .person-bild { display: block; margin: 0; overflow: hidden; place-items: normal; }
  .personen[data-darstellung="portraets"] .person-bild { border-radius: var(--_radius); }
  .person-bild > a { display: block; }
  .person-bild img,
  .person-initialen {
    aspect-ratio: var(--_format);
    display: block;
    inline-size: 100%;
  }
  .person-bild img {
    block-size: auto;
    object-fit: cover;
    object-position: var(--fokus, 50% 30%);
    transition: transform .35s ease;
  }
  .person-bild > a:is(:hover, :focus-visible) img { transform: var(--personen-hover, scale(1.03)); }
  @media (prefers-reduced-motion: reduce) { .person-bild img { transition: none; } }
  .person-initialen {
    background: var(--surface-filled);
    color: var(--text-muted);
    display: grid;
    font-size: var(--font-size-6);
    font-weight: 700;
    place-items: center;
  }

  .person-text { padding: var(--size-4) var(--size-4) var(--size-5); }
  .personen[data-darstellung="portraets"] .person-text { padding: var(--size-2) 0 0; text-align: center; }
  .person-name { font-size: var(--personen-name-groesse, var(--font-size-3)); line-height: 1.2; margin: 0; }
  .person-rolle {
    color: var(--personen-rolle-farbe, var(--primary));
    font-size: var(--font-size-0);
    font-weight: 600;
    margin: var(--size-1) 0 0;
  }
  .person-beschreibung { color: var(--text-muted); font-size: var(--font-size-1); margin-block-start: var(--size-3); }
  .person-beschreibung p { margin: 0 0 var(--size-2); }
  .person-beschreibung p:last-child { margin-block-end: 0; }
}

/* Personen: Hinweis „Mehr über …“ (Darstellung Porträt + Name) */
@layer sections {
  .person-mehr {
    color: var(--text-muted);
    display: inline-block;
    font-size: var(--font-size-0);
    margin-block-start: var(--size-2);
    text-underline-offset: .2em;
  }
  .person-mehr::after { content: " ›"; }
  .person-mehr:is(:hover, :focus-visible) { color: var(--primary); }
  .person:has(.person-bild a:hover) .person-mehr { color: var(--primary); }
}