/* =====================================================================
   3-iQ Standardbaukasten – Struktur
   =====================================================================
   Diese Datei ist projektneutral und gehört unverändert in jedes
   Sitepackage. Sie beschreibt nur Bau und Verhalten; alles Sichtbare
   hängt an den Variablen unter --3iq-*, die das Projekt in seinem
   eigenen Stylesheet setzt.

   Die Vorgaben hier sind bewusst neutral gewählt, damit die Seite auch
   dann trägt, wenn ein Projekt eine Variable vergisst.

   Drei Bausteine:
     1. Abschnitte  – Sammelbox mit Hintergrundfarbe und Standardabstand
     2. Überschriften – die zwei Zeilen aus dem Inhaltselement
     3. Redaktioneller Inhalt – was im RTE geschrieben wird
     4. Akkordeon   – Verhalten über Rahmenklassen

   ★ Im redaktionellen Inhalt gibt es KEINE Breitenbegrenzung. Wie breit
     der Text läuft, bestimmt allein die Spalte, in der das Element im
     Backend liegt. Das ist Absicht: Der Redakteur soll die Breite über
     den Container wählen, nicht gegen eine max-width im Stylesheet
     ankämpfen.
   ===================================================================== */

:root {
    /* Flächen. Das Projekt setzt hier seine Palette ein. */
    --3iq-flaeche-neutral: #fff;
    --3iq-flaeche-akzent-hell: #f2f2f2;
    --3iq-flaeche-akzent-dunkel: #333;

    /* Textfarbe auf der dunklen Fläche. Ohne sie wäre dunkel auf dunkel. */
    --3iq-text-auf-akzent-dunkel: #fff;
    --3iq-linie-auf-akzent-dunkel: rgba(255, 255, 255, .28);

    /* Maße. Das Projekt schreibt sie in SEINEN Haltepunkten um – hier
       stehen bewusst keine Medienabfragen, sonst müsste jedes Projekt
       gegen fremde Haltepunkte anarbeiten. */
    --3iq-abschnitt-abstand: 96px;
    --3iq-inhaltsbreite: 1360px;
    --3iq-seitenrand: 64px;

    /* Luft zwischen zwei Inhaltselementen einer Sammelbox */
    --3iq-element-abstand: 44px;

    /* Abstände im redaktionellen Text */
    --3iq-absatz-abstand: 1.15em;
    --3iq-ueberschrift-abstand-oben: 1.6em;
}

/* =====================================================================
   1. Abschnitte
   =====================================================================
   .standard-section ist die farbige Fläche über die volle Breite,
   .container hält den Inhalt auf Satzbreite. Beide Klassen erzeugt das
   TypoScript aus dem Feld "Layout" (siehe lib/0080_3iq_layouts.typoscript).
   ===================================================================== */

.standard-section {
    padding-top: var(--3iq-abschnitt-abstand);
    padding-bottom: var(--3iq-abschnitt-abstand);
}

.standard-section > .container {
    max-width: var(--3iq-inhaltsbreite);
    margin-inline: auto;
    padding-inline: var(--3iq-seitenrand);
}

/* Zwei Inhaltselemente in derselben Sammelbox sollen nicht aneinander
   kleben. Der Abstand liegt am FOLGENDEN Element, damit das erste bündig
   an der Oberkante der Fläche beginnt.
   Bewusst nur innerhalb von .sammelbox: Die gestalteten Bausteine der
   Seite bringen ihre eigenen Abstände mit und sollen unberührt bleiben. */
.sammelbox > * + *,
.sammelbox > .container > * + *,
.sammelbox [class*="col-"] > * + *,
.accordion__body > * + * {
    margin-top: var(--3iq-element-abstand);
}

/* Eine Sammelbox in einer Sammelbox soll den Inhalt nicht ein zweites Mal
   einrücken. */
.container .container {
    max-width: none;
    padding-inline: 0;
}

/* Zwei gleichfarbige Abschnitte direkt untereinander sollen wie einer
   wirken – sonst entsteht in der Mitte der doppelte Abstand. */
.hintergrund-neutral + .hintergrund-neutral,
.hintergrund-akzent-hell + .hintergrund-akzent-hell,
.hintergrund-akzent-dunkel + .hintergrund-akzent-dunkel {
    padding-top: 0;
}

.hintergrund-neutral {
    background: var(--3iq-flaeche-neutral);
}

.hintergrund-akzent-hell {
    background: var(--3iq-flaeche-akzent-hell);
}

.hintergrund-akzent-dunkel {
    background: var(--3iq-flaeche-akzent-dunkel);
    color: var(--3iq-text-auf-akzent-dunkel);
}

/* Auf dunkler Fläche erbt alles die helle Schrift – auch Überschriften
   und Links, die sonst ihre eigene Farbe mitbringen. */
.hintergrund-akzent-dunkel :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, figcaption) {
    color: inherit;
}

.hintergrund-akzent-dunkel :is(hr, table, th, td) {
    border-color: var(--3iq-linie-auf-akzent-dunkel);
}

/* =====================================================================
   2. Die zwei Überschriftenzeilen des Inhaltselements
   =====================================================================
   "Untertitel" steht ÜBER der Überschrift und ist die kleine Zeile
   (Eyebrow). "Überschrift" ist die große Zeile; welche Ebene sie
   bekommt, steuert der Redakteur über das Feld "Typ".
   Erzeugt vom Partial Header/All.html.
   ===================================================================== */

.heading {
    margin-bottom: 1.1em;
}

.heading:last-child {
    margin-bottom: 0;
}

/* .eyebrow gestaltet das Projekt. Hier nur, was zur Funktion gehört. */
.heading .eyebrow {
    display: block;
}

.heading > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

/* Ausrichtung aus dem Feld "Position" */
.ce-headline-center { text-align: center; }
.ce-headline-right  { text-align: right; }
.ce-headline-left   { text-align: left; }

.ce-headline-center .eyebrow,
.ce-headline-right .eyebrow {
    margin-inline: auto;
}

/* =====================================================================
   3. Redaktioneller Inhalt (RTE)
   =====================================================================
   Gilt für alles, was aus dem Editor kommt. Die Auswahl ist absichtlich
   an .ce-bodytext gebunden und nicht global: Gestaltete Bausteine der
   Seite sollen davon unberührt bleiben.
   ===================================================================== */

.ce-bodytext > :first-child { margin-top: 0; }
.ce-bodytext > :last-child  { margin-bottom: 0; }

/* ★ Keine Breitenbegrenzung. Siehe Kopf dieser Datei. */
.ce-bodytext :is(p, ul, ol, dl, blockquote, table) {
    max-width: none;
}

.ce-bodytext p {
    margin: 0 0 var(--3iq-absatz-abstand);
}

.ce-bodytext :is(h1, h2, h3, h4, h5, h6) {
    margin: var(--3iq-ueberschrift-abstand-oben) 0 .45em;
}

.ce-bodytext :is(ul, ol) {
    margin: 0 0 var(--3iq-absatz-abstand);
    padding-left: 1.3em;
}

.ce-bodytext li {
    margin-bottom: .35em;
}

.ce-bodytext li > :is(ul, ol) {
    margin-top: .35em;
    margin-bottom: 0;
}

/* Verweise im Fließtext sind unterstrichen – im Fließtext ist die Farbe
   allein kein ausreichendes Erkennungsmerkmal. */
.ce-bodytext a:not(.button) {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}

.ce-bodytext a:not(.button):hover {
    text-decoration-thickness: 2px;
}

/* Ein Schalter im Fließtext braucht eigene Zeilenluft, sonst klebt er
   an Absätzen. Die Gestaltung von .button kommt aus dem Projekt. */
.ce-bodytext a.button {
    text-decoration: none;
    margin: .3em .6em .3em 0;
}

.ce-bodytext blockquote {
    margin: var(--3iq-absatz-abstand) 0;
    padding-left: 1.2em;
    border-left: 3px solid currentColor;
}

.ce-bodytext table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--3iq-absatz-abstand);
}

.ce-bodytext :is(th, td) {
    padding: .6em .8em;
    border-bottom: 1px solid var(--3iq-linie, #ddd);
    text-align: left;
    vertical-align: top;
}

.ce-bodytext th {
    font-weight: 700;
}

.ce-bodytext hr {
    border: 0;
    border-top: 1px solid var(--3iq-linie, #ddd);
    margin: calc(var(--3iq-absatz-abstand) * 1.5) 0;
}

/* =====================================================================
   4. Akkordeon
   =====================================================================
   Aufbau kommt aus Accordion.html, Verhalten aus 3iq.js. Das Verhalten
   wählt der Redakteur über das Feld "Rahmen":

     frame-accordeon-geoeffnet                erstes Panel offen
     frame-accordeon-bleibt-geoeffnet         mehrere gleichzeitig offen
     frame-accordeon-geoffnet-bleibt-geoeffnet   beides

   Ohne Rahmen: alles zu, immer nur eines offen.

   Ohne JavaScript bleiben alle Panels offen und damit lesbar – deshalb
   öffnet erst 3iq.js sie, statt sie zu schließen (siehe .js-bereit).
   ===================================================================== */

.accordion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    width: 100%;
    padding: .9em 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--3iq-linie, #ddd);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.accordion__head > :is(h2, h3, h4, h5, h6, span) {
    margin: 0;
}

.accordion__icon {
    flex: 0 0 auto;
    position: relative;
    width: 1em;
    height: 1em;
    margin: 0;
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: currentColor;
    transition: transform .25s;
}

.accordion__icon::after {
    transform: rotate(90deg);
}

.accordion__head[aria-expanded="true"] .accordion__icon::after {
    transform: rotate(0deg);
}

.accordion__body {
    padding: .2em 0 1.4em;
}

/* Erst wenn 3iq.js gelaufen ist, wird zugeklappt. Vorher – und ohne
   JavaScript – steht alles offen da. */
.js-accordion.js-bereit .accordion__body[hidden] {
    display: none;
}

.accordion__body[hidden] {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .accordion__icon::before,
    .accordion__icon::after {
        transition: none;
    }
}

/* =====================================================================
   5. Abstand davor und danach
   =====================================================================
   Aus den Feldern "Abstand vor/nach" des Inhaltselements. Die Werte sind
   absolute Pixel statt "klein/mittel/groß" – wer eine Seite setzt, denkt
   in Pixeln, und "mittel" bedeutet in jedem Projekt etwas anderes.

   Die Klassen vergibt fluid_styled_content selbst. Container rendern ihre
   Vorlage ohne das Standard-Layout und tragen sie deshalb selbst ein.

   ★ Ein gewählter Wert ERSETZT den Grundabstand aus
     --3iq-element-abstand, er kommt nicht hinzu: Wer "100 px" wählt, will
     100 px sehen und nicht 144. Möglich wird das dadurch, dass diese
     Regeln am Ende der Datei stehen – sie haben dieselbe Spezifität wie
     .sammelbox > * + *, und bei Gleichstand gewinnt die spätere Stelle.
     Gemessen: Lücke 100 px.
     ★ Deshalb diesen Abschnitt beim Übernehmen NICHT nach oben schieben.
   ===================================================================== */

.frame-space-before-abstand10 {margin-top: 10px;}
.frame-space-after-abstand10 {margin-bottom: 10px;}
.frame-space-before-abstand15 {margin-top: 15px;}
.frame-space-after-abstand15 {margin-bottom: 15px;}
.frame-space-before-abstand20 {margin-top: 20px;}
.frame-space-after-abstand20 {margin-bottom: 20px;}
.frame-space-before-abstand25 {margin-top: 25px;}
.frame-space-after-abstand25 {margin-bottom: 25px;}
.frame-space-before-abstand30 {margin-top: 30px;}
.frame-space-after-abstand30 {margin-bottom: 30px;}
.frame-space-before-abstand35 {margin-top: 35px;}
.frame-space-after-abstand35 {margin-bottom: 35px;}
.frame-space-before-abstand40 {margin-top: 40px;}
.frame-space-after-abstand40 {margin-bottom: 40px;}
.frame-space-before-abstand45 {margin-top: 45px;}
.frame-space-after-abstand45 {margin-bottom: 45px;}
.frame-space-before-abstand50 {margin-top: 50px;}
.frame-space-after-abstand50 {margin-bottom: 50px;}
.frame-space-before-abstand60 {margin-top: 60px;}
.frame-space-after-abstand60 {margin-bottom: 60px;}
.frame-space-before-abstand80 {margin-top: 80px;}
.frame-space-after-abstand80 {margin-bottom: 80px;}
.frame-space-before-abstand100 {margin-top: 100px;}
.frame-space-after-abstand100 {margin-bottom: 100px;}

/* =====================================================================
   6. Lichtkasten (Lightbox)
   =====================================================================
   Gehört zu 3iq.js. Die Überlagerung entsteht erst beim ersten Klick,
   im Quelltext der Seite steht nichts davon.

   Bewusst zurückhaltend gestaltet: Das Bild soll wirken, nicht der
   Rahmen. Farben über die Variablen, damit ein Projekt sie anpassen
   kann, ohne die Datei zu ändern.
   ===================================================================== */

:root {
    --3iq-lichtkasten-grund: rgba(20, 22, 19, .93);
    --3iq-lichtkasten-schrift: #fff;
}

.lichtkasten {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: var(--3iq-lichtkasten-grund);
    color: var(--3iq-lichtkasten-schrift);
}

.lichtkasten[hidden] { display: none; }

/* Die Seite darunter soll nicht mitscrollen. */
body.lichtkasten-offen { overflow: hidden; }

.lichtkasten__buehne {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9em;
}

.lichtkasten__bild {
    max-width: 100%;
    /* Platz für Bildunterschrift und Zähler frei halten */
    max-height: calc(100vh - clamp(120px, 18vw, 220px));
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity .2s;
}

.lichtkasten--laedt .lichtkasten__bild { opacity: .35; }

.lichtkasten__text {
    max-width: 62ch;
    text-align: center;
    font-size: .95em;
    line-height: 1.5;
}

.lichtkasten__text[hidden] { display: none; }

.lichtkasten__zaehler {
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 2vw, 20px);
    transform: translateX(-50%);
    margin: 0;
    font-size: .85em;
    opacity: .75;
}

.lichtkasten__zaehler[hidden] { display: none; }

/* Schalter: groß genug für den Finger (44 px), unaufdringlich */
.lichtkasten button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s;
}

.lichtkasten button:hover,
.lichtkasten button:focus-visible { opacity: 1; }

.lichtkasten button[hidden] { display: none; }

.lichtkasten__zu {
    top: clamp(8px, 2vw, 22px);
    right: clamp(8px, 2vw, 22px);
    font-size: 34px;
}

.lichtkasten__weiter {
    top: 50%;
    transform: translateY(-50%);
}

.lichtkasten__weiter--zurueck { left: clamp(4px, 1.5vw, 20px); }
.lichtkasten__weiter--vor { right: clamp(4px, 1.5vw, 20px); }

/* Der Fokusrahmen muss auf dunklem Grund sichtbar bleiben. */
.lichtkasten button:focus-visible {
    outline: 3px solid var(--3iq-lichtkasten-schrift);
    outline-offset: 3px;
}

/* Ein Bild mit Lightbox zeigt, dass es anklickbar ist. */
a.lightbox { cursor: zoom-in; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .lichtkasten__bild,
    .lichtkasten button { transition: none; }
}