/* ==========================================================================
   Basis für alle Seiten: Design-Tokens (Quelle: Websitematerial/css/styles.css),
   Typografie, Inhaltsbreite, Abschnittskopf, Buttons und Fokus.
   Farben und Schrift sind zusätzlich als SCSS-Variablen in settings.yaml gesetzt.
   ========================================================================== */
:root {
    --color-bg: #fcfdff;
    --color-bg-alt: #f2f6fb;
    --color-surface: #fff;
    --color-border: #e1e7f0;
    --color-border-strong: #7a8496;

    --color-text: #10192b;
    --color-text-muted: #566073;

    --color-primary: #1857c0;
    --color-primary-dark: #123f8f;
    --color-primary-tint: #e7eefc;
    --color-navy: #0b1e3d;
    --color-on-primary: #fff;
    --color-on-dark-link: #a9c4f2;
    --color-on-dark-lead: #dbe6fa;
    --color-on-dark-muted: #c4d2ea;
    --color-danger: #b42318;

    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;

    --space-section: clamp(3.5rem, 8vw, 6rem);
    --space-section-sm: clamp(2.5rem, 6vw, 4rem);

    --shadow-card: 0 10px 28px rgb(24 87 192 / 8%);
    --shadow-card-hover: 0 16px 36px rgb(24 87 192 / 14%);

    --container: 73.75rem;
    --focus-ring: 3px solid var(--color-primary);
}

/* ---------- Typografie ---------- */
body {
    line-height: 1.6;
}

:is(h1, h2, h3, h4) {
    line-height: 1.15;
    letter-spacing: -.01em;
}

:is(h1, .h1) { font-weight: 900; }
:is(h2, .h2, h3, .h3) { font-weight: 700; }

/* ---------- Inhaltsbereich ---------- */
#page-content {
    overflow-wrap: break-word;
}

/* Abschnittsrhythmus wie in der Vorlage (BP setzt --frame-spacing je Breakpoint) */
.bp-page-content .frame {
    --frame-spacing: var(--space-section);
}

#page-content .frame-container-default {
    max-width: var(--container);
    padding-inline: 1.5rem;
}

/* Native Textelemente: lesbare Zeilenlänge, z. B. für reine Textabschnitte */
#page-content .frame-type-text .frame-inner {
    max-width: 50rem;
    margin-inline: auto;
}

#page-content .frame-type-text :is(ul, ol) {
    padding-left: 1.4em;
}

#page-content .frame-type-text li + li {
    margin-top: .75rem;
}

#page-content .frame-type-text li::marker {
    color: var(--color-primary);
}

/* ---------- Überschriften der nativen Textelemente: gleiche H2-Größe wie Abschnittsköpfe ---------- */
/* Fließtext-Abschnitte bleiben linksbündig mit kleinem Abstand zum Text (1,25rem). */
#page-content .frame-type-text .frame-header {
    margin-bottom: 1.25rem;
}

#page-content .frame-type-text h2.element-header {
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    text-wrap: balance;
}

/* ---------- Abschnittskopf (Content Blocks und native Elemente) ---------- */
.frame-header.section-head,
.frame-type-accordion .frame-header {
    max-width: 40rem;
    margin: 0 auto var(--space-section-sm);
    text-align: center;
}

:is(.section-head, .frame-type-accordion .frame-header) .element-header {
    margin: 0;
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    text-wrap: balance;
}

:is(.section-head, .frame-type-accordion .frame-header) .element-subheader {
    margin: .75rem 0 0;
    color: var(--color-text-muted);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.eyebrow {
    margin: 0 0 .875rem;
    color: var(--color-primary);
    font-size: .78125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.eyebrow--on-dark { color: var(--color-on-dark-link); }

.section-actions {
    margin: 2rem 0 0;
    text-align: center;
}

/* ---------- Buttons (Bootstrap .btn mit Projektmaßen) ---------- */
:root .btn {
    --bs-btn-padding-y: .8125rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .9375rem;
    --bs-btn-border-radius: var(--radius-sm);
    min-height: 2.75rem;
    white-space: normal;
}

:root .btn-primary {
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
}

/* Auf dunklen Flächen (Seitenkopf, Kontaktbereich) */
:root .btn-on-dark {
    --bs-btn-color: var(--color-primary-dark);
    --bs-btn-bg: var(--color-on-primary);
    --bs-btn-border-color: var(--color-on-primary);
    --bs-btn-hover-color: var(--color-primary-dark);
    --bs-btn-hover-bg: var(--color-primary-tint);
    --bs-btn-hover-border-color: var(--color-primary-tint);
    --bs-btn-active-color: var(--color-primary-dark);
    --bs-btn-active-bg: var(--color-primary-tint);
}

:root .btn-outline-on-dark {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgb(255 255 255 / 45%);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: rgb(255 255 255 / 12%);
    --bs-btn-hover-border-color: var(--color-on-primary);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: rgb(255 255 255 / 18%);
}

/* ---------- Fokus: eine Regel für alle interaktiven Elemente ---------- */
/* :root erhöht die Spezifität über Bootstraps .btn/.accordion-button/.form-control-Fokus (nur Schatten, zu kontrastarm). */
:root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
    box-shadow: none;
}

:root :is(.frame-background-dark, .frame-type-srwebsites_pageintro, .frame-type-srwebsites_contactcta, #page-footer) :focus-visible {
    outline-color: var(--color-on-dark-link);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}