/*
 * Quartier am Hain – projektspezifische Gestaltung für das Template CygnusX
 * Geladen als Web Asset "template.user" (templates/cygnusx/index.php).
 * Designreferenz: docs/design/quartier am hain - flyer.jpg · Doku: docs/knowledge/startseite-design.md
 *
 * Farben: EINZIGE Quelle sind die CygnusX-Template-Parameter (Style 13 → „Farben“).
 * Diese Datei verwendet nur deren CSS-Variablen und leitet Zwischentöne per color-mix() ab.
 * Inhalte (Texte, Zahlen, Adressen, Logos) kommen aus Joomla (Modul „Quartier am Hain – Inhaltsbereich“).
 */

/* ================================================================ Schriften (lokal, SIL OFL) */
/* Poppins 400 liefert CygnusX selbst (webfonts/google). Hier nur die zusätzlich benötigten Schnitte. */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../webfonts/qah/cormorant-garamond-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../webfonts/qah/poppins-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================ Tokens */
:root {
    /* Farben – Aliase auf die CygnusX-Parameter (keine eigenen Farbwerte) */
    --qah-green: var(--color-primary);                 /* Primary: Flyer-Grün */
    --qah-green-dark: var(--color-secondary);          /* Secondary: dunkles Grün (Links, Kontaktleiste) */
    --qah-background: var(--body-bg);                  /* Body Hintergrund: Flyer-Beige */
    --qah-surface: var(--color-surface);               /* Surface: helle Fläche */
    --qah-text: var(--body-color);                     /* Body Textfarbe: Anthrazit */
    --qah-text-muted: var(--color-text-muted);         /* Gedämpfte Textfarbe */
    --qah-line: var(--color-border);                   /* Rahmenfarbe: dekorative Linien */
    --qah-error: var(--color-danger);                  /* Danger: Fehlermeldungen */
    /* abgeleitete Töne */
    --qah-surface-strong: color-mix(in srgb, var(--qah-surface) 45%, #fff);
    --qah-border: color-mix(in srgb, var(--qah-text) 62%, var(--qah-surface));   /* Feldrahmen ≥ 3:1 */
    --qah-on-green: var(--qah-surface);
    /* Sektionsvarianten (automatisch abwechselnd, siehe „Startseiten-Sektionen“) */
    --qah-bg-a: var(--qah-background);   /* Variante A: Flyer-Beige */
    --qah-bg-b: var(--qah-surface);      /* Variante B: helle Fläche */

    --qah-font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --qah-font-sans: 'Poppins', Arial, sans-serif;

    /* Spacing-System: ein Satz Stufen, alle Bereiche verwenden nur diese */
    --qah-space-2xs: 0.5rem;
    --qah-space-xs: 0.75rem;
    --qah-space-sm: 1.25rem;
    --qah-space-md: 2rem;
    --qah-space-lg: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
    --qah-space-xl: clamp(3rem, 2rem + 4vw, 6rem);
    --qah-section-space: clamp(3.5rem, 2.25rem + 5vw, 7.5rem);        /* Standard-Sektionsabstand */
    --qah-section-space-tight: clamp(2.5rem, 1.75rem + 3vw, 5rem);    /* Abschnitte mit wenig Inhalt */

    --qah-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --qah-max: var(--content-max-width, 76rem);   /* Template-Parameter „Maximale Inhaltsbreite“ */
    --qah-measure: 38rem;                         /* maximale Zeilenlänge für Fließtext */
}

/* CygnusX-Überschriftenschrift auf Cormorant Garamond umstellen (nicht in der Parameterliste enthalten). */
html:root {
    --font-family-headings: var(--qah-font-serif);
    --cassiopeia-font-family-headings: var(--qah-font-serif);
}

/* ================================================================ Grundlagen */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--qah-green);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.qah-container {
    width: min(100% - 2 * var(--qah-gutter), var(--qah-max));
    margin-inline: auto;
}

.qah-section {
    padding-block: var(--qah-section-space);
}

/* Bereiche schließen ohne Zwischenraum aneinander an (CygnusX setzt sonst margin-top im Komponentenbereich) */
.container-component > :is(.qah-home-section, .qah-section, .rsform, main),
.cygnusx-footer-position > .qah-contact {
    margin-block: 0;
}

/* ================================================================ Startseiten-Sektionen A/B/Akzent */
/* Die Klassen vergibt der Modul-Chrome templates/cygnusx/html/layouts/chromes/qahsection.php
   in der tatsächlich gerenderten Reihenfolge der veröffentlichten Module:
   normale Sektionen abwechselnd A/B, das grüne Band als Akzent (zählt nicht mit),
   Kontaktleiste und Footer sind ausgenommen. Redakteure stellen keine Farben ein. */
.qah-home-section--a {
    background-color: var(--qah-bg-a);
}

.qah-home-section--b {
    background-color: var(--qah-bg-b);
}

.qah-home-section--accent {
    --qah-accent-top: var(--qah-bg-a);
    --qah-accent-bottom: var(--qah-bg-b);
    background: linear-gradient(to bottom, var(--qah-accent-top) 50%, var(--qah-accent-bottom) 50%);
}

.qah-home-section--top-b {
    --qah-accent-top: var(--qah-bg-b);
}

.qah-home-section--bottom-a {
    --qah-accent-bottom: var(--qah-bg-a);
}

/* Cassiopeia gibt dem Banner-Container 32 px Abstand nach unten; zwischen Hero und nächster Sektion
   schiene dort der Seitenhintergrund durch. Nur wenn im Banner eine QAH-Sektion steht. */
.container-banner:has(> .qah-home-section) {
    margin-bottom: 0;
}

/* Rund um das überlappende Band genügt ein kleinerer Abstand (das Band bringt eigene Fläche mit) */
.qah-home-section:has(+ .qah-home-section--accent) > .qah-section,
.qah-home-section:has(+ .qah-home-section--accent) .qah-section:last-child {
    padding-bottom: var(--qah-section-space-tight);
}

.qah-home-section--after-accent .qah-section {
    padding-top: var(--qah-section-space-tight);
}

/* Kleine Zeile mit grüner Linie (Flyer: Linie unter dem Claim) */
.qah-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--qah-space-xs);
    margin: 0 0 var(--qah-space-sm);
    color: var(--qah-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.qah-eyebrow::before {
    content: "";
    flex: none;
    width: 2.5rem;
    height: 1px;
    background: var(--qah-green);
}

.qah-heading {
    margin: 0 0 var(--qah-space-lg);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.875rem);
}

/* Flyer-Stil: grüne Zwischenüberschrift mit feiner Unterstreichung */
.qah-label {
    display: inline-block;
    margin: 0 0 var(--qah-space-xs);
    color: var(--qah-green-dark);
    font-family: var(--qah-font-serif);
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* ================================================================ Buttons und Fokus */
.btn-primary,
.btn.btn-primary {
    --bs-btn-active-bg: var(--qah-green-dark);
    --bs-btn-active-border-color: var(--qah-green-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--qah-green);
    --bs-btn-disabled-border-color: var(--qah-green);
}

.qah-btn.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.375rem;
    padding: 0.9rem 1.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* feine Linie als Richtungshinweis, wird beim Hover länger */
.qah-btn.btn::after {
    content: "";
    width: 1.1em;
    height: 1px;
    background: currentColor;
}

.qah-btn--light.btn {
    border-color: var(--qah-surface);
    background-color: var(--qah-surface);
    color: var(--qah-green-dark);
    --btn-color: var(--qah-green-dark);
    --btn-bg: var(--qah-surface);
    --btn-border-color: var(--qah-surface);
    --btn-hover-color: var(--qah-text);
    --btn-hover-bg: #fff;
    --btn-hover-border-color: #fff;
    --bs-btn-color: var(--qah-green-dark);
    --bs-btn-bg: var(--qah-surface);
    --bs-btn-border-color: var(--qah-surface);
    --bs-btn-hover-color: var(--qah-text);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

.qah-btn--light.btn:hover,
.qah-btn--light.btn:focus-visible {
    border-color: #fff;
    background-color: #fff;
    color: var(--qah-text);
}

/* Sichtbarer Fokus für Buttons (Bootstrap/Cassiopeia blenden ihn teils aus) */
.btn:focus-visible,
.qah-form [data-rsfp-hashcash]:focus-visible {
    outline: 3px solid var(--qah-green-dark);
    outline-offset: 3px;
    box-shadow: none;
}

.qah-visual__panel :focus-visible,
.qah-contact :focus-visible,
.cygnusx-footer-position :focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .qah-btn.btn,
    .qah-btn.btn::after,
    .qah-contact__link,
    .qah-form .form-control,
    .qah-form .form-select {
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, width 0.2s ease;
    }

    .qah-btn.btn:hover::after {
        width: 1.6em;
    }
}

/* ================================================================ Header */
.container-header,
.site .container-header {
    border-bottom: 1px solid var(--qah-line);
    background-color: var(--qah-background);
    background-image: none;
    color: var(--qah-text);
}

/* Header-Inhalt auf dieselbe Kante wie die Inhaltsbereiche setzen */
.container-header > .container.cygnusx-header-main {
    width: min(100% - 2 * var(--qah-gutter), var(--qah-max));
    max-width: none;
    padding-block: var(--qah-space-xs);
    padding-inline: 0;
}

.container-header .navbar-brand {
    padding-block: 0;
    line-height: 1;
}

.container-header .navbar-brand .brand-logo {
    display: block;
}

.container-header .navbar-brand .brand-logo img {
    display: block;
    height: auto;
    /* Platz vor dem Laden reservieren (kein Layout Shift); nach dem Laden gilt das echte Seitenverhältnis,
       sodass ein späteres SVG-Logo mit anderem Format ohne CSS-Änderung passt. Wert = Wortmarke 483 × 263 px. */
    aspect-ratio: auto 483 / 263;
    object-fit: contain;
}

/* Textmarke, falls kein Logo im Template-Parameter gesetzt ist */
.container-header .navbar-brand .brand-logo span {
    color: var(--qah-green);
    font-family: var(--qah-font-serif);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    font-weight: 600;
    line-height: 1;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    color: var(--qah-text);
    font-size: 0.9375rem;
    text-decoration: none;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
    color: var(--qah-green-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

/* Cassiopeia zeichnet unter Menüpunkten zusätzlich einen weißen Balken (li::after, für dunkle Header gedacht).
   Zusammen mit der Unterstreichung ergab das zwei Linien. Es gibt nur noch eine: die grüne Unterstreichung des Links. */
.container-header .mod-menu > li::after,
.container-header .mod-menu > li > a::after {
    content: none;
}

/* ================================================================ Hero */
/* Ebenen: Hero-Hintergrund → Blattgrafik (z-index 0, nicht klickbar) → Text und Button (z-index 1).
   Blattgrafik: Original docs/grafik/baum_blaetter.png, rein dekorativ, Auswahl im Modul (Medien → Blattgrafik). */
.qah-hero {
    --qah-leaves-width: clamp(28rem, 52vw, 60rem);
    --qah-leaves-shift-x: 3%;
    --qah-leaves-shift-y: -12%;
    --qah-leaves-opacity: 1;
    /* Doppelmaske: weich nach links auslaufen und die gerade Unterkante des Originals ausblenden */
    --qah-leaves-fade: linear-gradient(to top, transparent 17%, #000 34%), linear-gradient(to left, #000 55%, transparent 98%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2rem + 4.5vw, 6.5rem) clamp(3.5rem, 2rem + 4vw, 6rem);
}

.qah-hero__text {
    position: relative;
    z-index: 1;
    max-width: 42rem;
}

.qah-hero__place {
    width: fit-content;
    margin-bottom: var(--qah-space-sm);
    color: var(--qah-text);   /* mehr Kontrastreserve, weil auf Tablet/Mobil Blattausläufer dahinter liegen */
}

.qah-hero__title {
    margin: 0 0 var(--qah-space-lg);
    color: var(--qah-green);
    font-size: clamp(2.5rem, 1.4rem + 3.9vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
}

.qah-hero__claim {
    display: inline-block;
    margin: 0 0 var(--qah-space-lg);
    padding-bottom: var(--qah-space-xs);
    border-bottom: 1px solid var(--qah-green);
    color: var(--qah-green);
    font-family: var(--qah-font-serif);
    font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
}

.qah-hero__actions {
    margin: 0;
}

.qah-hero__leaves {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: var(--qah-leaves-width);
    max-width: none;
    height: auto;
    opacity: var(--qah-leaves-opacity);
    transform: translate(var(--qah-leaves-shift-x), var(--qah-leaves-shift-y));
    -webkit-mask-image: var(--qah-leaves-fade);
    -webkit-mask-composite: source-in;
    mask-image: var(--qah-leaves-fade);
    mask-composite: intersect;
    pointer-events: none;
    user-select: none;
}

/* Desktop: Text links, Blätter füllen den rechten Bereich; die Hero-Höhe richtet sich nach dem Motiv */
@media (min-width: 992px) {
    .qah-hero--art .qah-hero__inner {
        display: flex;
        align-items: center;
        min-height: calc(var(--qah-leaves-width) * 0.5);
    }

    .qah-hero--art .qah-hero__text {
        max-width: min(42rem, 100% - var(--qah-leaves-width) * 0.42);
    }
}

/* Tablet und Mobil: Das Motiv bleibt oben rechts kräftig und läuft per Doppelmaske (nach links und nach unten)
   dorthin aus, wo der Text steht. So liegen die Blätter hinter dem Text, ohne die Lesbarkeit zu stören. */
@media (max-width: 991.98px) {
    .qah-hero {
        --qah-leaves-width: clamp(26rem, 74vw, 42rem);
        --qah-leaves-shift-x: 20%;
        --qah-leaves-shift-y: -18%;
        --qah-leaves-opacity: 0.9;
        padding-top: clamp(10rem, 30vw, 14rem);
    }

    .qah-hero {
        --qah-leaves-fade: linear-gradient(to bottom, #000 30%, transparent 72%), linear-gradient(to left, #000 40%, transparent 88%);
    }
}

@media (max-width: 575.98px) {
    .qah-hero {
        --qah-leaves-width: 112vw;
        --qah-leaves-shift-x: 30%;
        --qah-leaves-shift-y: -20%;
        --qah-leaves-opacity: 0.85;
        padding-top: 8.5rem;
    }
}

/* ================================================================ Kennzahlen */
.qah-facts__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--qah-line);
    list-style: none;
}

.qah-facts__item {
    display: flex;
    flex-direction: column;
    gap: var(--qah-space-2xs);
    padding: var(--qah-space-md) var(--qah-space-sm) var(--qah-space-sm);
    border-bottom: 1px solid var(--qah-line);
}

.qah-facts__item:nth-child(odd) {
    padding-left: 0;
}

.qah-facts__item:nth-child(even) {
    border-left: 1px solid var(--qah-line);
}

.qah-facts__value {
    color: var(--qah-green);
    font-family: var(--qah-font-serif);
    font-size: clamp(3rem, 1.6rem + 3.3vw, 5.25rem);
    font-weight: 600;
    line-height: 0.95;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
}

.qah-facts__value small {
    margin-left: 0.05em;
    font-size: 0.45em;
}

.qah-facts__label {
    color: var(--qah-text);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (max-width: 379.98px) {
    .qah-facts__list {
        grid-template-columns: 1fr;
    }

    .qah-facts__item,
    .qah-facts__item:nth-child(even) {
        padding-inline: 0;
        border-left: 0;
    }
}

/* Ab 1200 px vier Spalten, Breite nach Inhalt; der freie Raum wird zwischen den Kennzahlen verteilt */
@media (min-width: 1200px) {
    .qah-facts__list {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        border-top: 0;
    }

    .qah-facts__item,
    .qah-facts__item:nth-child(odd) {
        padding: var(--qah-space-2xs) 0 var(--qah-space-2xs) var(--qah-space-md);
        border-bottom: 0;
        border-left: 1px solid var(--qah-line);
    }

    .qah-facts__item:first-child {
        padding-left: 0;
        border-left: 0;
    }
}

/* ================================================================ Lage und Projektdaten */
.qah-location__inner {
    display: grid;
    gap: var(--qah-space-lg);
}

.qah-location__title {
    margin: 0;
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.875rem);
}

.qah-location__text {
    max-width: var(--qah-measure);
    margin: var(--qah-space-sm) 0 0;
}

.qah-location__label {
    font-size: 1.25rem;
}

.qah-location__address {
    margin: 0 0 var(--qah-space-lg);
    color: var(--qah-text);
    font-family: var(--qah-font-serif);
    font-size: clamp(2.125rem, 1.4rem + 2.8vw, 4.25rem);
    font-weight: 600;
    line-height: 1.05;
}

.qah-location__facts {
    display: grid;
    gap: var(--qah-space-sm) var(--qah-space-md);
    margin: 0;
}

.qah-location__facts > div {
    padding-top: var(--qah-space-xs);
    border-top: 1px solid var(--qah-line);
}

.qah-location__facts dt {
    margin-bottom: 0.25rem;
    color: var(--qah-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qah-location__facts dd {
    margin: 0;
    color: var(--qah-text);
    font-size: 1.0625rem;
    font-weight: 500;
}

.qah-location__figure {
    margin: 0;
}

.qah-location__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--image-radius, 0.125rem);
}

@media (min-width: 640px) {
    .qah-location__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .qah-location__inner {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: var(--qah-space-xl);
    }

    .qah-location__figure {
        grid-column: 1 / -1;
    }
}

/* ================================================================ Statement / Visualisierung */
/* Das Band liegt über der Grenze zweier Sektionen (leichte Überlagerung); die Farben oben/unten
   kommen automatisch aus den Nachbarsektionen (.qah-home-section--accent, siehe unten). */
.qah-visual {
    padding-block: 0;
}

.qah-visual__panel {
    position: relative;
    display: grid;
    gap: var(--qah-space-sm);
    padding: var(--qah-space-lg) clamp(1.5rem, 5vw, 4.5rem);
    background: var(--qah-green);
    color: var(--qah-on-green);
}

.qah-visual__eyebrow {
    margin: 0;
    color: var(--qah-on-green);
}

.qah-visual__eyebrow::before {
    background: var(--qah-on-green);
}

.qah-visual__title {
    max-width: 16ch;
    margin: 0;
    color: #fff;
    font-size: clamp(2.125rem, 1.6rem + 2vw, 3.5rem);
}

.qah-visual__text {
    max-width: var(--qah-measure);
    margin: 0;
    font-size: 1.0625rem;
}

.qah-visual__actions {
    margin: var(--qah-space-2xs) 0 0;
}

@media (min-width: 992px) {
    .qah-visual__panel {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: end;
        column-gap: var(--qah-space-xl);
        padding-block: var(--qah-space-xl);
    }

    .qah-visual__eyebrow,
    .qah-visual__title {
        grid-column: 1;
    }

    .qah-visual__title {
        grid-row: 1 / span 2;
        align-self: end;
    }

    .qah-visual__text,
    .qah-visual__actions {
        grid-column: 2;
    }
}

/* Mit Visualisierung: großes Bild, Panel überlappt die Bildunterkante */
.qah-visual__figure {
    margin: 0;
}

.qah-visual__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--image-radius, 0.125rem);
}

.qah-visual--image .qah-visual__panel {
    margin: calc(-1 * var(--qah-space-xl)) var(--qah-space-md) 0;
}

/* ================================================================ Interessentenbereich (RSForm-Formular 3) */
.qah-interest {
    scroll-margin-top: var(--qah-space-sm);
}

.qah-interest__grid {
    display: grid;
    gap: var(--qah-space-lg);
}

.qah-interest__intro .qah-heading {
    margin-bottom: var(--qah-space-sm);
    font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
}

.qah-interest__intro p:not(.qah-eyebrow) {
    max-width: var(--qah-measure);
}

.qah-interest__note {
    color: var(--qah-text-muted);
    font-size: 0.9375rem;
}

.qah-interest__form {
    padding: var(--qah-space-lg) clamp(1.25rem, 4vw, 3rem);
    border-top: 3px solid var(--qah-green);
    background: var(--qah-surface-strong);
}

@media (min-width: 992px) {
    .qah-interest__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        align-items: start;
        column-gap: var(--qah-space-xl);
    }

    .qah-interest__intro {
        position: sticky;
        top: var(--qah-space-md);
    }
}

.qah-form {
    --qah-field-height: 3.25rem;
}

.qah-form__group {
    margin: 0 0 var(--qah-space-lg);
    padding: 0;
    border: 0;
}

.qah-form__legend {
    float: none;
    width: 100%;
    margin: 0 0 var(--qah-space-sm);
    padding: 0 0 var(--qah-space-xs);
    border-bottom: 1px solid var(--qah-line);
    color: var(--qah-green-dark);
    font-family: var(--qah-font-serif);
    font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
    font-weight: 600;
    line-height: 1.2;
}

.qah-form .form-label,
.qah-form .qah-form__caption {
    margin-bottom: 0.4rem;
    color: var(--qah-text);
    font-size: 0.9375rem;
    font-weight: 500;
}

.qah-form .qah-required {
    color: var(--qah-green-dark);
}

.qah-form .form-control,
.qah-form .form-select {
    min-height: var(--qah-field-height);
    padding: 0.75rem 1rem;
    border: 1px solid var(--qah-border);
    border-radius: var(--form-radius, 0.125rem);
    background-color: #fff;
    color: var(--qah-text);
    font-size: 1rem;
    box-shadow: none;
}

.qah-form textarea.form-control {
    min-height: 9rem;
}

.qah-form .form-control:hover,
.qah-form .form-select:hover {
    border-color: var(--qah-text);
}

.qah-form .form-control:focus,
.qah-form .form-select:focus {
    border-color: var(--qah-green-dark);
    background-color: #fff;
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--qah-green) 30%, transparent);
    outline: 0;
}

.qah-form .form-text,
.qah-form [id^="rsfp-counter-"] {
    margin-top: 0.4rem;
    color: var(--qah-text-muted);
    font-size: 0.875rem;
}

/* Checkboxen und Radios: Bootstrap-form-check-input (appearance: none) direkt einfärben */
.qah-form .form-check {
    margin-bottom: var(--qah-space-xs);
}

.qah-form .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
    border: 1px solid var(--qah-border);
    background-color: #fff;
}

.qah-form .form-check-input:checked {
    border-color: var(--qah-green-dark);
    background-color: var(--qah-green-dark);
}

.qah-form .form-check-input:focus {
    border-color: var(--qah-green-dark);
    box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--qah-green) 30%, transparent);
}

.qah-form .form-check-label {
    padding-left: 0.5rem;
    font-size: 1rem;
    line-height: 1.55;
}

.qah-form .rsform-block-datenschutz .form-check-label,
.qah-form .rsform-block-projektinformationen .form-check-label {
    font-size: 0.9375rem;
}

/* Fehlerzustände: RSForm setzt serverseitig .is-invalid; :user-invalid ergänzt das E-Mail-Format im Browser */
.qah-form .is-invalid,
.qah-form input[type="email"]:user-invalid {
    border-color: var(--qah-error);
}

.qah-form .formError {
    display: block;
    margin-top: 0.4rem;
    color: var(--qah-error);
    font-size: 0.875rem;
    font-weight: 500;
}

.qah-form .alert-danger {
    border-radius: var(--form-radius, 0.125rem);
}

/* Hashcash-Spamschutz an die Formularoptik anpassen */
.qah-form [data-rsfp-hashcash] {
    border: 1px solid var(--qah-border);
    border-radius: var(--form-radius, 0.125rem);
    background: #fff;
    color: var(--qah-text);
    font-family: var(--qah-font-sans);
    font-weight: 500;
}

/* RSForm-Grün (#7ac142) der Hashcash-Animation durch Projektgrün ersetzen */
.qah-form .hashcash {
    border-color: var(--qah-green);
    animation-name: qah-hashcash-fill, hashcash_scale;
}

.qah-form .hashcash__circle {
    stroke: var(--qah-green);
}

@keyframes qah-hashcash-fill {
    to {
        box-shadow: inset 0 0 0 30px var(--qah-green-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qah-form .hashcash,
    .qah-form .hashcash__circle,
    .qah-form .hashcash__check {
        animation-duration: 0.01ms;
        animation-delay: 0s;
        animation-iteration-count: 1;
    }
}

.qah-form__submit {
    display: grid;
    gap: var(--qah-space-sm);
    justify-items: start;
    padding-top: var(--qah-space-sm);
    border-top: 1px solid var(--qah-line);
}

.qah-form__submit .btn {
    min-width: min(100%, 17rem);
    min-height: 3.5rem;
    font-size: 1.0625rem;
}

.qah-form__legal {
    margin: var(--qah-space-sm) 0 0;
    color: var(--qah-text-muted);
    font-size: 0.875rem;
}

.qah-thanks.alert {
    padding: var(--qah-space-lg);
    border: 0;
    border-left: 4px solid var(--qah-green);
    border-radius: 0;
    background: var(--qah-surface-strong);
    color: var(--qah-text);
}

/* ================================================================ Projektpartner */
.qah-partners__list {
    display: grid;
    gap: var(--qah-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qah-partner {
    display: grid;
    align-content: start;
    gap: var(--qah-space-xs);
    padding-top: var(--qah-space-md);
    border-top: 1px solid var(--qah-line);
}

.qah-partner__logo {
    display: flex;
    align-items: flex-end;
    height: 3.5rem;
    margin-bottom: var(--qah-space-xs);
}

.qah-partner__logo img {
    width: auto;
    max-width: 12rem;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.qah-partner__role {
    margin: 0;
}

.qah-partner__address {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
}

.qah-partner__name {
    font-weight: 500;
}

@media (min-width: 768px) {
    .qah-partners__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--qah-space-xl);
    }
}

/* ================================================================ Kontaktleiste + Footer */
.cygnusx-footer-position {
    padding: 0;
}

.qah-contact {
    padding-block: var(--qah-space-xl);
    background: var(--qah-green-dark);
    color: var(--qah-on-green);
}

.qah-contact__inner {
    display: grid;
    gap: var(--qah-space-md);
    align-items: end;
}

.qah-contact__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem);
}

.qah-contact__list {
    display: grid;
    gap: var(--qah-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qah-contact__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--qah-on-green);
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.qah-contact__link {
    color: #fff;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #fff 40%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    overflow-wrap: anywhere;
}

.qah-contact__link:hover,
.qah-contact__link:focus-visible {
    color: #fff;
    text-decoration-color: #fff;
    text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
    .qah-contact__list {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        column-gap: var(--qah-space-xl);
    }
}

@media (min-width: 1200px) {
    .qah-contact__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--qah-space-xl);
    }

    .qah-contact__list {
        grid-template-columns: repeat(2, max-content);
    }

    .qah-contact__link {
        overflow-wrap: normal;
    }
}

/* Footer-Menü „Rechtliches“ (Modul 111) als zurückhaltende Linkzeile */
.cygnusx-footer-position .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--qah-space-md);
    width: min(100% - 2 * var(--qah-gutter), var(--qah-max));
    margin: 0 auto;
    padding: var(--qah-space-xs) 0 var(--qah-space-md);
    border-top: 1px solid color-mix(in srgb, var(--qah-on-green) 30%, transparent);
    list-style: none;
}

.cygnusx-footer-position .mod-menu > li {
    width: auto;
    margin: 0;
}

.cygnusx-footer-position .mod-menu a {
    display: inline-block;
    padding-block: var(--qah-space-2xs);
    color: var(--qah-on-green);
    font-size: 0.875rem;
    text-decoration: none;
}

.cygnusx-footer-position .mod-menu a:hover,
.cygnusx-footer-position .mod-menu a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* ================================================================ Einfache Textseiten (z. B. Impressum, Datenschutz) */
/* CygnusX gibt Beiträge randlos aus (für Builder-Sektionen). Beiträge ohne Builder-Sektion erhalten einen Lesecontainer. */
.site main > .com-content-article:not(:has(.builder-section)) {
    width: min(100% - 2 * var(--qah-gutter), var(--qah-max));
    margin-inline: auto;
    padding-block: var(--qah-space-xl) var(--qah-section-space);
}

.site main > .com-content-article:not(:has(.builder-section)) > * {
    max-width: 48rem;
}

/* Rechtstexte: ruhigere Überschriftengrößen, lange URLs umbrechen */
.site main > .com-content-article:not(:has(.builder-section)) :is(h1, h2, h3) {
    margin: var(--qah-space-lg) 0 var(--qah-space-xs);
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: break-word;
}

.site main > .com-content-article:not(:has(.builder-section)) h2 {
    font-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);
}

.site main > .com-content-article:not(:has(.builder-section)) h3 {
    font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem);
}

.site main > .com-content-article:not(:has(.builder-section)) :is(p, li) a {
    overflow-wrap: anywhere;
}

.site main > .com-content-article:not(:has(.builder-section)) ul {
    padding-left: 1.25rem;
}