/* ============================================================================
   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);
    /* Ausrichtung wie die Abschnittsüberschriften der Marke: mittig oder linksbündig (start, flex-start, 0) */
    --page-align: center;
    --page-justify: center;
    --page-narrow-start: auto;
}

/* ---------- 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; }

/* Hinweise, Leerzustände und schmale Blöcke stehen wie die Überschrift darüber */
.page-align { text-align: var(--page-align); }
.page-justify { justify-content: var(--page-justify) !important; }
.page-narrow { max-width: 760px; margin-left: var(--page-narrow-start); margin-right: auto; }

/* ---------- 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%; height: auto; 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); }
/* Sprachumschalter (page_lang_switch) */
.page-lang { display: inline-flex; align-items: center; gap: .15rem; font-size: .8rem; font-weight: 600; }
.page-lang a { padding: .2rem .45rem; border-radius: .4rem; color: inherit; opacity: .65; text-decoration: none; }
.page-lang a:hover, .page-lang a.active { opacity: 1; }
.page-lang a.active { background: rgba(127, 127, 127, .15); }
.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 .card-body > :last-child { margin-bottom: 0; }
.page-legal-toc .nav-link { --bs-nav-link-padding-y: .35rem; --bs-nav-link-padding-x: .75rem; --bs-nav-link-color: var(--page-muted); --bs-nav-link-hover-color: var(--page-accent); --bs-nav-pills-border-radius: calc(var(--page-radius) * .5); font-size: .9rem; }
@media (min-width: 992px) {
    .page-legal-aside { position: sticky; top: 6rem; }
    .page-legal-toc { max-height: calc(100vh - 12rem); overflow-y: auto; }
}
/* Sprungziele nicht unter der festen Kopfzeile verstecken */
.page-prose h3[id] { scroll-margin-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; }

/* Leiste über dem Kopf: Land für die Umsatzsteuer (page_vat_bar) */
.page-vat-bar { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border-bottom: 1px solid var(--bs-border-color-translucent); position: relative; z-index: 1031; }
.page-vat-toggle { font-size: .8rem; color: inherit; padding: .15rem .25rem; border: 0; }
.page-vat-toggle:hover, .page-vat-toggle.show { color: var(--bs-body-color); }
.page-vat-menu { font-size: .85rem; max-height: 60vh; overflow-y: auto; }
.page-vat-flag { width: 16px; height: 11px; margin-right: .45rem; vertical-align: -1px; border-radius: 1px; }
i.page-vat-flag { font-size: 12px; height: auto; vertical-align: 0; }
.page-vat-dark .page-vat-toggle { color: rgba(255, 255, 255, .75); padding: 0; }
.page-vat-dark .page-vat-toggle:hover, .page-vat-dark .page-vat-toggle.show { color: #fff; }

/* ---------- Hinweise und Rückfragen (SweetAlert2, alle Marken) ---------- */
/* Aufbau wie im Kundenbereich (Metronic), Farben, Rundung und Schatten aus den --page-* Variablen der Marke,
   damit Hell und Dunkel stimmen. Aufruf über SiteUI (/assets/libs/sweetalert2/site.js) oder sendError()/sendSuccess().
   Die Selektoren beginnen mit .swal2-container, damit sie das CSS schlagen, das SweetAlert2 selbst in den Kopf schreibt. */
body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .65); }
.swal2-container .swal2-popup {
    width: 28em; padding: 2rem 1.5rem 1.5rem; font-family: var(--bs-body-font-family);
    background: var(--page-card-bg); color: var(--bs-body-color);
    border: 1px solid var(--page-line); border-radius: var(--page-radius); box-shadow: var(--page-shadow-hover);
}
.swal2-container .swal2-popup .swal2-title { padding: .5rem 1rem 0; color: var(--bs-emphasis-color); font-size: 1.35rem; font-weight: 600; }
.swal2-container .swal2-popup .swal2-html-container { margin: .75rem 1rem 0; padding: 0; color: var(--page-muted); font-size: 1rem; line-height: 1.5; }
.swal2-container .swal2-popup .swal2-actions { margin: 1.5rem auto 0; gap: .5rem; }
.swal2-container .swal2-popup .swal2-actions .btn { margin: 0; min-width: 7rem; }
.swal2-container .swal2-popup .swal2-close { color: var(--page-muted); }
.swal2-container .swal2-popup .swal2-close:hover { color: var(--bs-body-color); }
.swal2-container .swal2-popup .swal2-icon { margin-top: .5rem; }
.swal2-container .swal2-icon.swal2-success { border-color: rgba(var(--bs-success-rgb), .35); color: var(--bs-success); }
.swal2-container .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--bs-success); }
.swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--bs-success-rgb), .3); }
.swal2-container .swal2-icon.swal2-error { border-color: var(--bs-danger); color: var(--bs-danger); }
.swal2-container .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--bs-danger); }
.swal2-container .swal2-icon.swal2-warning { border-color: var(--bs-warning); color: var(--bs-warning); }
.swal2-container .swal2-icon.swal2-info, .swal2-container .swal2-icon.swal2-question { border-color: var(--page-accent); color: var(--page-accent); }
.swal2-container .swal2-timer-progress-bar { background: var(--page-accent); opacity: .6; }
/* Kurzer Hinweis oben rechts (Toast) */
.swal2-container .swal2-popup.swal2-toast {
    width: 22rem; max-width: calc(100vw - 2rem); padding: .85rem 1rem;
    background: var(--page-card-bg); border-radius: min(var(--page-radius), 1rem); box-shadow: var(--page-shadow-hover);
}
.swal2-container .swal2-popup.swal2-toast .swal2-title { padding: 0; margin: .15rem .75rem 0; font-size: 1rem; }
.swal2-container .swal2-popup.swal2-toast .swal2-html-container { margin: .25rem .75rem 0; font-size: .925rem; }
.swal2-container .swal2-popup.swal2-toast .swal2-icon { margin: .1rem 0 0; }
/* Dunkle Info-Leiste (page_topbar), Hintergrund je Marke in site.css */
.page-topbar { position: relative; z-index: 1031; color: rgba(255, 255, 255, .75); }

/* ---------- Anmeldung über Discord, Google, Facebook, GitHub: Farbe des Anbieters, gleich bei allen Marken ---------- */
.btn-oauth { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 108, 117, 125; }
.btn-oauth-discord { --bs-btn-bg: #5865f2; --bs-btn-border-color: #5865f2; --bs-btn-hover-bg: #4752c4; --bs-btn-hover-border-color: #4752c4; --bs-btn-active-bg: #3c45a5; --bs-btn-active-border-color: #3c45a5; }
.btn-oauth-google { --bs-btn-bg: #ea4335; --bs-btn-border-color: #ea4335; --bs-btn-hover-bg: #c5372c; --bs-btn-hover-border-color: #c5372c; --bs-btn-active-bg: #a52e25; --bs-btn-active-border-color: #a52e25; }
.btn-oauth-facebook { --bs-btn-bg: #1877f2; --bs-btn-border-color: #1877f2; --bs-btn-hover-bg: #1464cc; --bs-btn-hover-border-color: #1464cc; --bs-btn-active-bg: #1053aa; --bs-btn-active-border-color: #1053aa; }
.btn-oauth-github { --bs-btn-bg: #24292f; --bs-btn-border-color: #24292f; --bs-btn-hover-bg: #32383f; --bs-btn-hover-border-color: #32383f; --bs-btn-active-bg: #1b1f24; --bs-btn-active-border-color: #1b1f24; }
[data-bs-theme="dark"] .btn-oauth-github { --bs-btn-border-color: #3d444d; --bs-btn-hover-border-color: #545d68; }