/* ============================================================================
   Unterseiten – gemeinsamer Aufbau für alle Marken.
   Die Marke setzt nur die Variablen (--page-*) in ihrer landing/css/site.css.
   Bausteine: resources/project/germanhost/additional/page/components.php
   Hell/Dunkel: Vorgaben aus den Bootstrap-Variablen (5.3, data-bs-theme); die Marke
   setzt eigene Werte je Farbmodus.
   ============================================================================ */

:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --page-accent: var(--bs-primary, #0d6efd);
    --page-ink: inherit;
    --page-muted: var(--bs-secondary-color);
    --page-line: var(--bs-border-color);
    --page-alt-bg: var(--bs-tertiary-bg);
    --page-card-bg: var(--bs-body-bg);
    --page-radius: 14px;
    --page-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
    --page-shadow-hover: 0 4px 12px rgba(16, 24, 40, .07), 0 12px 32px rgba(16, 24, 40, .07);
    --page-header-bg: var(--page-alt-bg);
    --page-header-color: inherit;
    --page-header-muted: var(--page-muted);
    --page-eyebrow-bg: rgba(13, 110, 253, .1);
    --page-eyebrow-color: var(--page-accent);
    --page-icon-bg: rgba(13, 110, 253, .1);
    --page-icon-color: var(--page-accent);
    --page-cta-bg: var(--page-accent);
    --page-cta-color: #fff;
    --page-cta-btn-bg: #fff;
    --page-cta-btn-color: var(--page-accent);
}

/* ---------- Seitenkopf ---------- */
.page-header {
    background: var(--page-header-bg);
    color: var(--page-header-color);
    padding: 3rem 0 3.25rem;
    border-bottom: 1px solid var(--page-line);
}
.page-breadcrumb { --bs-breadcrumb-divider-color: var(--page-header-muted); --bs-breadcrumb-item-active-color: var(--page-header-muted); font-size: .85rem; margin-bottom: 1.25rem; }
.page-breadcrumb a { color: var(--page-header-muted); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--page-header-color); }
.page-title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .75rem; max-width: 22ch; }
.page-lead { font-size: 1.1rem; color: var(--page-header-muted); max-width: 62ch; margin-bottom: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.page-eyebrow {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--page-eyebrow-color); background: var(--page-eyebrow-bg);
    border-radius: 999px; padding: .3rem .8rem; margin-bottom: 1rem;
}

/* ---------- Abschnitte ---------- */
.page-section { padding: 4rem 0; }
.page-section + .page-section { padding-top: 0; }
.page-section-alt { background: var(--page-alt-bg); border-block: 1px solid var(--page-line); }
.page-section-alt + .page-section, .page-section + .page-section-alt { padding-top: 4rem; }
.page-section-head { margin-bottom: 2.5rem; max-width: 720px; }
.page-h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: 750; letter-spacing: -.01em; line-height: 1.22; margin-bottom: .6rem; }
.page-h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.page-muted { color: var(--page-muted); }

/* ---------- Karten ---------- */
.page-card { --bs-card-bg: var(--page-card-bg); --bs-card-border-color: var(--page-line); --bs-card-border-radius: var(--page-radius); --bs-card-spacer-y: 1.4rem; --bs-card-spacer-x: 1.4rem; color: inherit; box-shadow: var(--page-shadow); }
.page-card-link { transition: transform .15s, box-shadow .15s; }
.page-card-link:hover { transform: translateY(-2px); box-shadow: var(--page-shadow-hover); }
.page-card-link a { color: inherit; text-decoration: none; }
.page-icon {
    width: 2.6rem; height: 2.6rem; display: inline-grid; place-items: center; margin-bottom: 1rem;
    border-radius: calc(var(--page-radius) * .7); background: var(--page-icon-bg); color: var(--page-icon-color); font-size: 1.2rem;
}

/* ---------- Listen, Kennzahlen ---------- */
.page-checklist { list-style: none; padding: 0; margin: 0; }
.page-checklist li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; }
.page-checklist li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--page-accent); font-weight: 700; }
.page-stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--page-accent); line-height: 1.1; }
.page-stat span { color: var(--page-muted); font-size: .9rem; }

/* ---------- Tarife ---------- */
.page-price { --bs-card-bg: var(--page-card-bg); --bs-card-border-color: var(--page-line); --bs-card-border-radius: var(--page-radius); --bs-card-spacer-y: 1.6rem; --bs-card-spacer-x: 1.5rem; color: inherit; box-shadow: var(--page-shadow); position: relative; }
.page-price.is-highlight { border: 2px solid var(--page-accent); box-shadow: var(--page-shadow-hover); }
.page-badge { position: absolute; top: -.8rem; right: 1.25rem; background: var(--page-accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.page-price-amount { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: .5rem 0 1.25rem; }
.page-price-amount small { font-size: .9rem; font-weight: 500; color: var(--page-muted); margin-left: .2rem; }
.page-price-request { font-size: 1.35rem; }

/* ---------- FAQ ---------- */
.page-accordion { --bs-accordion-bg: var(--page-card-bg); --bs-accordion-color: inherit; --bs-accordion-btn-color: inherit; --bs-accordion-border-color: var(--page-line); --bs-accordion-border-radius: var(--page-radius); --bs-accordion-inner-border-radius: var(--page-radius); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-color: var(--page-accent); --bs-accordion-active-bg: var(--page-alt-bg); }
.page-accordion .accordion-button { font-weight: 600; }

/* ---------- Abschluss-Kasten ---------- */
.page-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: var(--page-cta-bg); color: var(--page-cta-color);
    border-radius: calc(var(--page-radius) * 1.4); padding: 2.5rem;
}
.page-cta p { opacity: .85; }
.page-cta-btn { --bs-btn-bg: var(--page-cta-btn-bg); --bs-btn-color: var(--page-cta-btn-color); --bs-btn-hover-bg: var(--page-cta-btn-bg); --bs-btn-hover-color: var(--page-cta-btn-color); --bs-btn-font-weight: 600; }
.page-cta-btn:hover { opacity: .92; }

/* ---------- Bilder, Text, Formulare ---------- */
.page-figure { border-radius: var(--page-radius); width: 100%; object-fit: cover; box-shadow: var(--page-shadow-hover); }
.page-prose { max-width: 820px; }
.page-prose h2 { font-size: 1.3rem; font-weight: 700; margin: 2.25rem 0 .75rem; }
.page-prose h3 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.page-prose p, .page-prose li { color: var(--page-muted); }
.page-prose > :first-child { margin-top: 0; }
.page-form-card { max-width: 480px; margin: 0 auto; }
.page-form-card.is-wide { max-width: 720px; }
.page-divider { display: flex; align-items: center; gap: 1rem; color: var(--page-muted); font-size: .85rem; margin: 1.5rem 0; }
.page-divider::before, .page-divider::after { content: ""; flex: 1; border-top: 1px solid var(--page-line); }

@media (max-width: 767px) {
    .page-section, .page-section-alt + .page-section, .page-section + .page-section-alt { padding: 3rem 0; }
    .page-section + .page-section { padding-top: 0; }
    .page-cta { padding: 1.75rem; }
}
.page-price-old { display: block; font-size: .85rem; font-weight: 500; color: var(--page-muted); letter-spacing: 0; }

/* ---------- Tabellen ---------- */
.page-table { --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-border-color: var(--page-line); --bs-table-hover-bg: var(--page-alt-bg); }
.page-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--page-muted); font-weight: 700; background: var(--page-alt-bg); }
.page-table th, .page-table td { padding: .85rem 1rem; }
.page-pills { --bs-nav-pills-link-active-bg: var(--page-accent); --bs-nav-link-color: var(--page-muted); gap: .25rem; }

/* ---------- Personen, Eckdaten, Social Media ---------- */
.page-avatar { object-fit: cover; display: inline-block; border-radius: var(--page-radius); }
.page-avatar-initials { display: inline-grid; place-items: center; font-weight: 700; background: var(--page-icon-bg); color: var(--page-icon-color); }
.page-facts { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1.25rem; font-size: .92rem; }
.page-facts dt { font-weight: 600; }
.page-facts dd { margin: 0; color: var(--page-muted); }
.page-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-social a { width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center; border: 1px solid var(--page-line); border-radius: 50%; color: inherit; text-decoration: none; }
.page-social a:hover { color: var(--page-accent); border-color: var(--page-accent); }
.page-row-card .card-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

/* ---------- Rechtliche Seiten: Impressum zweispaltig, Seitenleiste ---------- */
.page-prose.is-wide { max-width: none; }
.page-prose > .row:first-child > :first-child > h2:first-child { margin-top: 0; }
@media (min-width: 992px) { .page-prose > .row:first-child > * > h2:first-child { margin-top: 0; } }
.page-legal-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.page-legal-title i { color: var(--page-accent); }
.page-legal-aside p { color: var(--page-muted); }
.page-legal-aside .card-body > :last-child { margin-bottom: 0; }
.page-legal-aside a:not(.list-group-item) { overflow-wrap: anywhere; }
.page-legal-nav { --bs-list-group-bg: var(--page-card-bg); --bs-list-group-border-color: var(--page-line); --bs-list-group-border-radius: var(--page-radius); --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); --bs-list-group-active-color: #fff; }
@media (min-width: 992px) { .page-legal-aside { position: sticky; top: 6rem; } }

/* ---------- Weiterleitung auf externe Seiten (/go/…, sites/redirect.php) ---------- */
.page-redirect { min-height: 60vh; display: flex; align-items: center; }
.page-redirect .container { width: 100%; }
.page-redirect .progress { height: .4rem; }
.page-redirect-bar { width: 100%; background: var(--page-accent); animation: page-go var(--go-seconds, 5s) linear both; }
@keyframes page-go { from { width: 0; } }
.page-redirect-url {
    font-family: var(--bs-font-monospace); font-size: .9rem; overflow-wrap: anywhere;
    background: var(--page-alt-bg); border: 1px solid var(--page-line); border-radius: calc(var(--page-radius) * .6); padding: .75rem 1rem;
}
@media (prefers-reduced-motion: reduce) { .page-redirect-bar { animation: none; } }

/* ---------- Fehlerseiten ---------- */
.page-error { padding: 5rem 0; border-bottom: 0; min-height: 60vh; display: flex; align-items: center; }
.page-error .container { width: 100%; }
.page-error-code { font-size: clamp(4.5rem, 12vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; margin-bottom: .5rem; }
.page-error .page-lead a { color: inherit; }

/* ---------- Handy: kein seitliches Scrollen ---------- */
/* g-5 (3rem Abstand) ist breiter als der Container-Rand und schiebt die Seite unter 992px um 12px nach rechts. */
@media (max-width: 991.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
}
/* Lange Adressen und Links (Impressum, Datenschutz) umbrechen statt die Seite zu verbreitern. */
.page-prose, .page-facts dd { overflow-wrap: anywhere; }

/* ---------- Hell/Dunkel (alle Marken, Umschalter: /assets/libs/theme/theme.js) ---------- */
/* Elemente nur in einem Farbmodus zeigen, z. B. Logo für hellen und für dunklen Grund. */
[data-bs-theme="light"] .theme-only-dark, [data-bs-theme="dark"] .theme-only-light { display: none !important; }