/* =============================================================================
   LAYOUT - CONTAINER, SEKTIONEN, REVEAL
   ============================================================================= */

/* Seiten ohne Hero: Platz für den fixierten Header */
body:not(.seite--hero) {
    padding-top: var(--header-hoehe);
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* Sektionen */
.sektion {
    position: relative;
    padding-block: var(--sektion-padding);
    background-color: var(--farbe-flaeche);
}

/* Wasserzeichen: das Signet aus favicon.svg sehr hell rechts im Hintergrund (jede Variante höchstens einmal pro Seite).
   Über eine Maske eingefärbt, damit keine zweite SVG-Datei nötig ist.
   "overflow: clip" statt "hidden": hidden würde die Sektion zum Scroll-Container machen, und die
   Scroll-Animation der Reveal-Elemente (animation-timeline: view()) hinge dann an der Sektion statt am Fenster. */
.sektion--wasserzeichen {
    isolation: isolate;
    overflow: clip;
}

.sektion--wasserzeichen::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -4%;
    z-index: -1;
    width: min(60vw, 640px);
    aspect-ratio: 633 / 589;
    translate: 0 -50%;
    background: rgb(var(--farbe-rot-rgb) / 0.05);
    mask: url('../images/favicon.svg') no-repeat center / contain;
    -webkit-mask: url('../images/favicon.svg') no-repeat center / contain;
    pointer-events: none;
}

/* Textur: kleine Signets als Kachelmuster, sichtbar oben links und unten rechts. Das Signet liegt direkt
   in der CSS (Pfade aus logo.svg, ungedreht wie im Logo - nur die Bild-Signatur in components.css ist gekippt).
   Kacheln hängen fest am Sektionsrand, damit sich nichts verschiebt, wenn die Sektion wächst (z. B. Akkordeon) */
.sektion--wasserzeichen-textur::before {
    --signet-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cg transform='translate(20 23) scale(0.16)'%3E%3Cpath d='M0,178.175c0,0,85.351,259.93,207.091,345.065c121.739,85.14,386.407,62.299,393.229,61.016c6.799-1.281-202.302-7.695-358.66-114.502C85.313,362.942,0,178.175,0,178.175'/%3E%3Cpath d='M222.813,91.641c0,0-54.431,268.769,47.833,338.552c116.233,79.322,315.656-78.619,322.547-84.015c0,0-164.229,113.146-287.978,30.528C184.582,296.179,222.813,91.641,222.813,91.641'/%3E%3Cpath d='M378.073-0.45c0,0-143.664,273.173-41.517,339.201c104.35,67.452,289.925-161.979,296.797-168.858c4.949-4.938-177.87,173.112-262.503,115.18C285.075,226.355,378.073-0.45,378.073-0.45'/%3E%3C/g%3E%3C/svg%3E");
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    translate: 0;
    background: rgb(var(--farbe-rot-rgb) / 0.08);
    mask:
        linear-gradient(135deg, black 0%, transparent 35%, transparent 65%, black 100%),
        var(--signet-kachel) 0 0 / 140px 140px repeat;
    -webkit-mask:
        linear-gradient(135deg, black 0%, transparent 35%, transparent 65%, black 100%),
        var(--signet-kachel) 0 0 / 140px 140px repeat;
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

/* Schwung: nur der große äußere Bogen des Signets (schwung.svg), riesig quer durch die Sektion */
.sektion--schwung::before {
    top: auto;
    right: -10%;
    bottom: -25%;
    width: min(120vw, 1500px);
    aspect-ratio: 600 / 410;
    translate: 0;
    rotate: -6deg;
    background: rgb(var(--farbe-rot-rgb) / 0.045);
    mask: url('../images/schwung.svg') no-repeat center / contain;
    -webkit-mask: url('../images/schwung.svg') no-repeat center / contain;
}

/* Hintergrund-Varianten für Sektionen (auf allen Seiten nutzbar, im Wechsel mit der weißen Standard-Sektion):
   --licht    weiche rote Lichtflecken in den Ecken, wie diffuses Licht hinter Milchglas
   --verlauf  diagonaler Rot-Schleier mit Glas-Reflex, flächiger und wärmer
   --cta      kräftiger Rotverlauf mit Lichtreflex, weiße Schrift (Aufforderungen) */
.sektion--licht {
    background-color: var(--farbe-creme);
    background-image:
        radial-gradient(50% 55% at 10% 5%, rgb(var(--farbe-rot-rgb) / 0.16), transparent 70%),
        radial-gradient(40% 50% at 95% 100%, rgb(var(--farbe-rot-rgb) / 0.13), transparent 70%),
        linear-gradient(180deg, var(--farbe-flaeche) 0%, var(--farbe-creme) 100%);
}

.sektion--verlauf {
    background-color: var(--farbe-creme);
    background-image:
        linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.55) 50%, transparent 62%),
        linear-gradient(135deg, var(--farbe-flaeche) 0%, rgb(var(--farbe-rot-rgb) / 0.16) 50%, rgb(var(--farbe-rot-rgb) / 0.06) 100%);
}

.sektion--cta {
    color: var(--farbe-weiss);
    background-color: var(--farbe-rot);
    background-image:
        radial-gradient(60% 70% at 15% 0%, rgb(255 255 255 / 0.22), transparent 70%),
        radial-gradient(55% 65% at 100% 100%, rgb(0 0 0 / 0.35), transparent 70%),
        linear-gradient(135deg, var(--farbe-rot-hover) 0%, var(--farbe-rot) 40%, var(--farbe-rot-tief) 100%);
}

.sektion__header {
    text-align: center;
    margin-bottom: clamp(var(--space-2xl), 6vw, var(--space-3xl));
}

/* h1 und h2: Trägt eine Seite den Sektionskopf als Seitentitel (sektion-kopf mit 'haupt'), ist die Überschrift eine
   h1. Ohne sie in dieser Regel war der Seitentitel kleiner als die Abschnitte darunter und klebte an der Unterzeile
   (Audit 2026-10-10). */
.sektion__header :is(h1, h2) {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-md);
}

.sektion__header p {
    font-size: var(--text-lg);
    color: var(--farbe-grau-gedaempft);
    max-width: 600px;
    margin-inline: auto;
}

.sektion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-lg);
    background: rgb(var(--farbe-rot-rgb) / 0.06);
    border-radius: var(--radius-xl);
    color: var(--farbe-rot);
}

.sektion__icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}

@media (max-width: 30em) {
    .sektion__icon {
        width: 64px;
        height: 64px;
    }

    .sektion__icon svg {
        width: 32px;
        height: 32px;
    }
}

/* Hinweis statt Inhalt (leere Liste): mittig, gedämpft */
.sektion__hinweis {
    max-width: 60ch;
    margin-inline: auto;
    text-align: center;
    color: var(--farbe-grau-gedaempft);
}

.sektion__footer {
    text-align: center;
    margin-top: clamp(var(--space-2xl), 6vw, var(--space-3xl));
}

/* Akzent-Text im Rotverlauf (Überschriften, Kennzahlen, Preise).
   Der Verlauf endet an der Textbox; bei negativer Laufweite ragt das letzte Zeichen darüber hinaus
   und würde abgeschnitten - das Polster rechts gleicht genau die Laufweite aus. */
.text-akzent {
    padding-inline-end: calc(-1 * var(--ls-headline));
    background: var(--gradient-rot);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hoher Kontrast (Windows): Verlaufstext wieder als Textfarbe rendern */
@media (forced-colors: active) {
    .text-akzent {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: CanvasText;
    }
}

/* Reveal beim Scrollen - nur mit JS aktiv, damit Inhalte nie unsichtbar bleiben.
   Liegt auf Wrappern, nicht auf Karten, damit Hover-Transforms frei bleiben. */
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--dauer-reveal) var(--ease), transform var(--dauer-reveal) var(--ease);
}

.js .reveal.reveal--sichtbar {
    opacity: 1;
    transform: translateY(0);
}

@supports (animation-timeline: view()) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        animation: reveal-einblenden linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    @keyframes reveal-einblenden {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}