/* ============================================
   VidiReserve - Seitensystem beider Hosts (Website-Redesign A0, Spec 2026-10-17 § 4)
   ============================================ */
/* Laedt nur views/layouts/main.php, nach app.css. Alles haengt an body.vr-site oder vr-Klassen, keine Regeln auf
   nackte h1–h3/p; Bootstrap-Klassen nur im N1-Block (Buttons), Farben nur ueber Tokens (:root in app.css). */

/* === Scope und Tokens === */
/* Ergaenzung zu :root (gedaempft 6,05:1 auf Weiss, 5,64:1 auf Paper, 9,12:1 auf Navy), dann die Bootstrap-Werte
   aus N1: --dr-primary Navy statt Gold (Gold auf Weiss 1,65:1); Backoffice/Admin ohne vr-site bleiben rot. */
body.vr-site {
    --vr-muted-tint: #556476;
    --vr-dark-muted: #b7c7d9;
    --vr-radius: 12px;
    --vr-radius-lg: 22px;
    --vr-shadow: 0 30px 60px rgba(16,36,58,.12);
    --vr-ease: cubic-bezier(.22,1,.36,1);
    --dr-primary: var(--vr-navy);
    --dr-primary-dark: var(--vr-navy-2);
    --bs-primary: var(--vr-navy);
    --bs-primary-rgb: 16, 36, 58;
    --bs-link-hover-color: var(--vr-blue);
    --bs-link-hover-color-rgb: 39, 90, 201;
}

/* === Typografie === */
/* Nur eigene Klassen (Spec § 4.2): H1 30–44 px, H2 24–32 px fliessend zwischen 360 und 1200 px, H3 20, Lead 18;
   Kicker Blau 6,19:1, Fine --vr-muted-tint 6,05:1 auf Weiss, .vr-muted 5,05:1. */
.vr-h1,
.vr-h2,
.vr-h3 {
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow-wrap: break-word;
}
.vr-h1,
.vr-h2 { text-wrap: balance; }
.vr-h1 { font-size: clamp(1.875rem, 1.5rem + 1.667vw, 2.75rem); }
.vr-h2 { font-size: clamp(1.5rem, 1.286rem + .952vw, 2rem); }
.vr-h3 { font-size: 1.25rem; }
.vr-lead {
    font-size: 1.125rem;
    line-height: 1.6;
}
.vr-kicker {
    color: var(--vr-blue);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.6;
    text-transform: uppercase;
}
.vr-fine {
    color: var(--vr-muted-tint);
    font-size: .8125rem;
    line-height: 1.6;
}
.vr-muted { color: var(--vr-muted); }

/* === Container === */
/* Marketing 1180 px, Lesen 860 px, Formulare 480 px, je 16 px Rand; Abschnitte 96/72/56 px (Breakpoints). */
.vr-wrap,
.vr-wrap-read,
.vr-wrap-form {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}
.vr-wrap-read { width: min(860px, calc(100% - 32px)); }
.vr-wrap-form { width: min(480px, calc(100% - 32px)); }
.vr-section { padding-block: 96px; }

/* === Buttons === */
/* Zuerst der N1-Block (Nachtrag N1, 2026-10-17, Regeln im Wortlaut aus app.css), danach vr-btn und vr-link. */
/* N1 Gold (Navy auf Gold 9,53:1): jeder Zustand direkt gegen das Rot aus app.css; Doppelring Weiss/Navy .7. */
body.vr-site .btn-primary,
body.vr-site .btn-warning {
    --bs-btn-color: var(--vr-navy);
    --bs-btn-bg: var(--vr-gold);
    --bs-btn-border-color: var(--vr-gold);
    --bs-btn-hover-color: var(--vr-navy);
    --bs-btn-hover-bg: var(--vr-gold-2);
    --bs-btn-hover-border-color: var(--vr-gold-2);
    --bs-btn-active-color: var(--vr-navy);
    --bs-btn-active-bg: var(--vr-gold-2);
    --bs-btn-active-border-color: var(--vr-gold-2);
    --bs-btn-disabled-color: var(--vr-navy);
    --bs-btn-disabled-bg: var(--vr-gold);
    --bs-btn-disabled-border-color: var(--vr-gold);
    --bs-btn-disabled-opacity: .55;
    --bs-btn-focus-box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 36, 58, .7);
    color: var(--vr-navy);
    background-color: var(--vr-gold);
    border-color: var(--vr-gold);
    font-weight: 600;
}
body.vr-site .btn-primary:hover,
body.vr-site .btn-primary:focus,
body.vr-site .btn-primary:focus-visible,
body.vr-site .btn-primary:active,
body.vr-site .btn-primary.active,
body.vr-site .btn-primary.show,
body.vr-site .btn-check:checked + .btn-primary,
body.vr-site .btn-warning:hover,
body.vr-site .btn-warning:focus,
body.vr-site .btn-warning:focus-visible,
body.vr-site .btn-warning:active,
body.vr-site .btn-warning.active,
body.vr-site .btn-warning.show,
body.vr-site .btn-check:checked + .btn-warning {
    color: var(--vr-navy);
    background-color: var(--vr-gold-2);
    border-color: var(--vr-gold-2);
}
body.vr-site .btn-primary:disabled,
body.vr-site .btn-primary.disabled,
body.vr-site fieldset:disabled .btn-primary,
body.vr-site .btn-warning:disabled,
body.vr-site .btn-warning.disabled,
body.vr-site fieldset:disabled .btn-warning {
    color: var(--vr-navy);
    background-color: var(--vr-gold);
    border-color: var(--vr-gold);
    opacity: .55;
}

/* N1 Outline: nur Bootstrap-Variablen; direkte Werte schluegen .btn-check + .btn:hover (Chip saehe gewaehlt aus). */
body.vr-site .btn-outline-primary {
    --bs-btn-color: var(--vr-navy);
    --bs-btn-border-color: var(--vr-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vr-navy);
    --bs-btn-hover-border-color: var(--vr-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--vr-navy);
    --bs-btn-active-border-color: var(--vr-navy);
    --bs-btn-disabled-color: var(--vr-navy);
    --bs-btn-disabled-border-color: var(--vr-navy);
    --bs-btn-focus-box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(16, 36, 58, .7);
}

/* N1 Formularfokus Navy; :where() haelt (0,2,0), Validierungsfarben und .vr-brand (main.php) gewinnen. */
:where(body.vr-site) .form-control:focus,
:where(body.vr-site) .form-select:focus {
    border-color: var(--vr-navy);
    box-shadow: 0 0 0 .25rem rgba(16, 36, 58, .25);
}

/* N1 Fusszeilen (alle dunkel): Hover Gold-2 statt Navy, !important wie footer a:hover in app.css; Knoepfe nicht. */
body.vr-site footer a:not(.btn):not(.vr-btn):hover {
    color: var(--vr-gold-2) !important;
}

/* N1 Textlinks auf dunklen Flaechen: Gold-2 10,50:1; :where() = Spezifitaet von a:hover, Knoepfe bleiben. */
:where(body.vr-site :is(.bg-dark, .text-bg-dark, .pl-dark, .pl-final)) a:hover {
    color: var(--vr-gold-2);
}

/* Eigene Knoepfe (Spec § 4.1): Gold primaer, Navy-Outline sekundaer, hell auf Navy, Textlink mit Pfeil; 44 px. */
.vr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .7rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--vr-ease), border-color .2s var(--vr-ease), color .2s var(--vr-ease);
}
.vr-btn-gold {
    border-color: var(--vr-gold);
    background-color: var(--vr-gold);
    color: var(--vr-navy);
}
.vr-btn-gold:hover {
    border-color: var(--vr-gold-2);
    background-color: var(--vr-gold-2);
    color: var(--vr-navy);
}
.vr-btn-outline {
    border-color: var(--vr-navy);
    background-color: transparent;
    color: var(--vr-navy);
}
.vr-btn-outline:hover {
    background-color: var(--vr-paper);
    color: var(--vr-navy);
}
.vr-btn-light {
    border-color: #fff;
    background-color: #fff;
    color: var(--vr-navy);
}
.vr-btn-light:hover {
    border-color: var(--vr-paper);
    background-color: var(--vr-paper);
    color: var(--vr-navy);
}
.vr-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    color: var(--vr-navy);
    font-weight: 600;
    text-decoration: none;
}
/* Pfeil als Text (U+2192); die zweite Angabe nimmt ihn Screenreadern weg, wo sie verstanden wird. */
.vr-link::after {
    content: "\2192";
    content: "\2192" / "";
}
.vr-link:hover {
    color: var(--vr-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.vr-dark .vr-link { color: #fff; }
.vr-dark .vr-link:hover { color: var(--vr-gold-2); }
/* Fokusring Navy .7 (5,88:1 auf Weiss), auf .vr-dark Gold-2 (10,50:1); die Kontur zeigt der Kontrastmodus. */
.vr-btn:focus-visible,
.vr-link:focus-visible {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 3px rgba(16,36,58,.7);
}
.vr-dark .vr-btn:focus-visible,
.vr-dark .vr-link:focus-visible {
    box-shadow: 0 0 0 3px var(--vr-gold-2);
}

/* === Skip-Link === */
/* Nur wenn die Ansicht $skipLinkHref meldet: versteckt bis zum Fokus, dann oben links, Navy auf Gold (§ 4.6). */
.vr-skip {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 1090;
    padding: 12px 18px;
    border-radius: 10px;
    background-color: var(--vr-gold);
    color: var(--vr-navy);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - 24px));
}
.vr-skip:focus {
    transform: none;
    color: var(--vr-navy);
    outline: 3px solid var(--vr-navy);
    outline-offset: 2px;
}

/* === Bausteine === */
/* Partials unter views/partials/site/ (Variablen im Kopf). Hell: --vr-ink/--vr-muted-tint auf Weiss/Paper; .vr-dark:
   Weiss 15,72:1, --vr-dark-muted 9,12:1, Kicker Gold 9,53:1; Links per :where(), Knoepfe behalten ihre Farben. */
.vr-dark {
    --vr-muted-tint: var(--vr-dark-muted);
    --vr-muted: var(--vr-dark-muted);
    background-color: var(--vr-navy);
    color: #fff;
}
.vr-dark .vr-kicker { color: var(--vr-gold); }
:where(.vr-dark) a { color: #fff; }
:where(.vr-dark) a:hover { color: var(--vr-gold-2); }
.vr-dark .vr-btn-outline {
    border-color: #fff;
    color: #fff;
}
.vr-dark .vr-btn-outline:hover {
    background-color: #fff;
    color: var(--vr-navy);
}
:is(.vr-hero-copy, .vr-section-head, .vr-split-copy, .vr-form-panel, .vr-cta-band > div, .vr-status > div) {
    display: grid;
    align-content: start;
    gap: 16px;
}
:is(.vr-hero-copy, .vr-section-head, .vr-split-copy, .vr-form-panel, .vr-cta-band > div, .vr-status > div, .vr-card) > * { margin: 0; }
:is(.vr-hero, .vr-section-head, .vr-cta-band, .vr-status, .vr-form-card) .vr-lead,
.vr-split-text,
.vr-card p,
.vr-faq-body { color: var(--vr-muted-tint); }

/* site/hero: mit .vr-hero-aside zwei Spalten (auto-fit); dunkel mit hellem Schein wie der Landing-Abschluss */
.vr-hero { padding-block: 80px 72px; }
.vr-hero--light {
    background: linear-gradient(180deg, var(--vr-paper), #fff);
    color: var(--vr-ink);
}
.vr-hero--dark { background-image: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.08), transparent 70%); }
.vr-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    align-items: center;
    gap: 48px 64px;
}
.vr-hero-copy { max-width: 680px; }
.vr-hero-aside { min-width: 0; }
.vr-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding-top: 8px;
}
@media (max-width: 1050px) {
    .vr-hero { padding-block: 64px 56px; }
}
@media (max-width: 760px) {
    .vr-hero { padding-block: 48px 40px; }
}

/* site/anchors: Fokusring innen (overflow schneidet aussen ab); sticky ab 992 px im Abschnitt Breakpoints */
.vr-anchors {
    border-block: 1px solid var(--vr-line);
    background-color: #fff;
}
.vr-anchors ul {
    display: flex;
    gap: 4px;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6px 0;
    overflow-x: auto;
    list-style: none;
}
.vr-anchors a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 14px;
    border-radius: 999px;
    color: var(--vr-ink);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.vr-anchors a:hover { background-color: var(--vr-paper); }
.vr-anchors a:focus-visible {
    outline: 3px solid transparent;
    box-shadow: inset 0 0 0 3px rgba(16,36,58,.7);
}
/* Seiten mit Anker-Leiste (A2 Funktionen): Folgeabschnitte ohne doppelten Abstand */
.vr-anchors ~ .vr-section + .vr-section { padding-top: 0; }

.vr-section-head {
    max-width: 720px;
    margin-bottom: 48px;
}
.vr-section-head--center {
    margin-inline: auto;
    text-align: center;
}

/* site/card-grid: Hebung per translate, transform bleibt der Einblendung */
.vr-card-grid {
    display: grid;
    gap: 24px;
}
.vr-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vr-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vr-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vr-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid var(--vr-line);
    border-radius: var(--vr-radius);
    background-color: #fff;
    color: var(--vr-ink);
    transition: translate .2s var(--vr-ease), box-shadow .2s var(--vr-ease);
}
.vr-card:is(:hover, :focus-within) {
    translate: 0 -4px;
    box-shadow: var(--vr-shadow);
}
.vr-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--vr-radius);
    background-color: var(--vr-paper);
    color: var(--vr-blue);
    font-size: 1.375rem;
}
.vr-card .vr-link {
    align-self: flex-start;
    margin-top: auto;
}
/* Mit Einblendung gilt die Uebergangsliste des Zielzustands: Einblendung und Hebung in einer Liste. */
.vr-js .vr-card.vr-reveal {
    transition: opacity .6s var(--vr-ease), transform .6s var(--vr-ease), translate .2s var(--vr-ease),
        box-shadow .2s var(--vr-ease);
}
@media (prefers-reduced-motion: reduce) {
    .vr-js .vr-card.vr-reveal { transition: none; }
}
@media (max-width: 1050px) {
    .vr-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .vr-card-grid--2,
    .vr-card-grid--3,
    .vr-card-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* site/split: --reverse stellt die Medien nach links, mobil Text zuerst */
.vr-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 40px 72px;
}
.vr-split + .vr-split { margin-top: 96px; }
.vr-card-grid + .vr-split { margin-top: clamp(48px, 7vw, 72px); }
.vr-split-copy:only-child {
    grid-column: 1 / -1;
    max-width: 720px;
}
.vr-split-copy > :is(.vr-btn, .vr-link) { justify-self: start; }
.vr-split--reverse .vr-split-media { order: -1; }
.vr-split-media {
    min-width: 0;
    text-align: center;
}
.vr-points {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}
.vr-points li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.vr-points .bi { color: var(--vr-blue); }
.vr-dark .vr-points .bi { color: var(--vr-gold); }
@media (max-width: 760px) {
    .vr-split { grid-template-columns: minmax(0, 1fr); }
    .vr-split + .vr-split { margin-top: 56px; }
    .vr-split--reverse .vr-split-media { order: 0; }
}

/* site/cta-band und site/status-card: Abstaende 72/56 px unter Breakpoints */
.vr-cta-band {
    padding-block: 96px;
    text-align: center;
}
.vr-cta-band > div { justify-items: center; }
.vr-cta-band .vr-lead { max-width: 640px; }
.vr-cta-band .vr-btn { margin-top: 8px; }

/* site/faq-list: Pfeil als gerahmtes Pseudo-Element ohne Text */
.vr-faq-item { border-bottom: 1px solid var(--vr-line); }
.vr-faq-item summary {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 20px 40px 20px 0;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}
.vr-faq-item summary::-webkit-details-marker { display: none; }
.vr-faq-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s var(--vr-ease);
}
.vr-faq-item[open] summary::after {
    margin-top: -2px;
    transform: rotate(225deg);
}
.vr-faq-item summary:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.vr-faq-body { padding: 0 40px 24px 0; }
.vr-faq-body > :last-child { margin-bottom: 0; }
.vr-faq-list > .vr-link { margin-top: 16px; }

/* site/breadcrumb: Trenner ohne Vorlesen; Links 44 px hoch ueber min-height, Zeile mittig */
.vr-breadcrumb-nav { font-size: .875rem; }
.vr-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--vr-muted-tint);
    list-style: none;
}
.vr-breadcrumb li + li::before {
    content: "/";
    content: "/" / "";
    margin-inline: 8px;
}
.vr-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vr-breadcrumb [aria-current="page"] { font-weight: 600; }

/* Toene von site/status-card und site/note: Bootstrap-Toenungen (Text 7,6–11:1), info Blau auf Paper */
.vr-status--ok,
.vr-note--ok {
    --vr-tone-bg: var(--bs-success-bg-subtle);
    --vr-tone-fg: var(--bs-success-text-emphasis);
}
.vr-status--info,
.vr-note--info {
    --vr-tone-bg: var(--vr-paper);
    --vr-tone-fg: var(--vr-blue);
}
.vr-status--warn,
.vr-note--warn {
    --vr-tone-bg: var(--bs-warning-bg-subtle);
    --vr-tone-fg: var(--bs-warning-text-emphasis);
}
.vr-status--error {
    --vr-tone-bg: var(--bs-danger-bg-subtle);
    --vr-tone-fg: var(--bs-danger-text-emphasis);
}

.vr-status {
    padding-block: 96px;
    color: var(--vr-ink);
    text-align: center;
}
.vr-status > div { justify-items: center; }
.vr-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--vr-tone-bg);
    color: var(--vr-tone-fg);
    font-size: 1.75rem;
}
.vr-status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    padding-top: 8px;
}

.vr-refs {
    padding-block: 48px;
    text-align: center;
}
.vr-refs .vr-kicker { margin: 0; }
.vr-refs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 40px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.vr-refs-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}
.vr-refs-list img {
    display: block;
    width: auto;
    max-width: 160px;
    height: 40px;
    object-fit: contain;
}
.vr-refs-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 18px;
    border: 1px solid var(--vr-line);
    border-radius: 999px;
    font-weight: 600;
}

.vr-phone {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    border: 7px solid var(--vr-navy-2);
    border-radius: 40px;
    background-color: var(--vr-navy-2);
    box-shadow: var(--vr-shadow);
    vertical-align: top;
}
.vr-phone img {
    display: block;
    max-width: 100%;
    height: auto;
}

.vr-note {
    margin-bottom: 1.5rem;
    padding: 16px 20px;
    border-left: 4px solid var(--vr-tone-fg);
    border-radius: var(--vr-radius);
    background-color: var(--vr-tone-bg);
    color: var(--vr-ink);
}
.vr-note > :last-child { margin-bottom: 0; }
.vr-note-title {
    margin-bottom: 4px;
    color: var(--vr-tone-fg);
    font-weight: 700;
}

/* site/form-shell-*: zweispaltig ab 992 px, schmal das Formular vor dem Panel */
.vr-form-shell {
    padding-block: 72px;
    background-color: var(--vr-paper);
}
.vr-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    width: min(1000px, calc(100% - 32px));
    overflow: hidden;
    border-radius: var(--vr-radius-lg);
    background-color: #fff;
    box-shadow: var(--vr-shadow);
}
.vr-form-panel,
.vr-form-card { padding: 48px; }
.vr-form-card { color: var(--vr-ink); }
.vr-form-card:only-child { grid-column: 1 / -1; }
.vr-form-card > .vr-h2 { margin: 0 0 8px; }
.vr-form-card > .vr-lead { margin: 0 0 24px; }
@media (max-width: 991.98px) {
    .vr-form-grid { grid-template-columns: minmax(0, 1fr); }
    .vr-form-card { order: -1; }
}
@media (max-width: 760px) {
    .vr-form-shell { padding-block: 24px; }
    .vr-form-panel,
    .vr-form-card { padding: 28px 20px; }
}

/* site/window: statisches Konzeptfenster mit Beispieldaten (A2) */
.vr-window {
    overflow: hidden;
    border: 1px solid var(--vr-line);
    border-radius: var(--vr-radius-lg);
    background-color: #fff;
    box-shadow: var(--vr-shadow);
    color: var(--vr-ink);
    text-align: left;
}
.vr-window-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--vr-line);
    background-color: var(--vr-paper);
    font-size: .75rem;
}
.vr-window-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cfd8e3;
}
.vr-window-app {
    margin-left: 6px;
    font-weight: 600;
}
.vr-window-tag {
    margin-left: auto;
    color: var(--vr-muted-tint);
}
.vr-window-body { padding: 24px; }
.vr-window-heading { margin-bottom: 8px; }
.vr-window-heading strong,
.vr-window-row strong {
    display: block;
    font-weight: 600;
}
.vr-window-heading strong { font-size: 1.125rem; }
.vr-window-heading small,
.vr-window-row small {
    display: block;
    color: var(--vr-muted-tint);
    font-size: .75rem;
}
.vr-window-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vr-window-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--vr-line);
    font-size: .875rem;
}
.vr-window-row > div {
    flex: 1;
    min-width: 0;
}
.vr-window-when {
    min-width: 3.25rem;
    color: var(--vr-blue);
    font-weight: 600;
}
.vr-window-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--vr-paper);
    font-size: 12px;
    white-space: nowrap;
}
.vr-window-foot {
    padding-top: 12px;
    border-top: 1px solid var(--vr-line);
}
.vr-window-foot .vr-fine { margin: 0; }
@media (max-width: 760px) {
    .vr-window-body { padding: 18px; }
}

/* site/tiles: „In allen Paketen enthalten"; --6 ab 1200 px sechs Spalten, mobil eine */
.vr-tiles {
    display: grid;
    gap: 16px;
}
.vr-tiles > .vr-kicker { margin: 0; }
.vr-tiles-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vr-tiles-list--3,
.vr-tiles-list--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vr-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 12px 16px;
    border-radius: var(--vr-radius);
    background-color: var(--vr-paper);
    color: var(--vr-ink);
    font-size: 15px;
    font-weight: 600;
}
.vr-tile .bi {
    color: var(--vr-navy);
    font-size: 1.25rem;
}
@media (min-width: 1200px) {
    .vr-tiles-list--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .vr-tiles-list--3,
    .vr-tiles-list--6 { grid-template-columns: minmax(0, 1fr); }
}

/* Preisseite (A2): Badge, Monat/Jahr-Umschalter (Knoepfe .vr-btn-outline, aktiv ueber aria-pressed Gold),
   Paketkarten 5/3/2 Spalten mit 24 px Abstand */
.vr-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--vr-gold);
    color: var(--vr-navy);
    font-size: 14px;
    font-weight: 600;
}
.vr-cycle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 48px;
}
.vr-cycle [aria-pressed="true"] {
    border-color: var(--vr-gold);
    background-color: var(--vr-gold);
    color: var(--vr-navy);
}
.vr-cycle [aria-pressed="true"]:hover {
    border-color: var(--vr-gold-2);
    background-color: var(--vr-gold-2);
}
.vr-cycle-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--vr-paper);
    font-size: 12px;
}
.vr-plans {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}
/* Jede Karte haelt oben Platz fuer den Navy-Kopf frei, damit Preise und CTAs einer Reihe auf einer Linie liegen */
.vr-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding: 44px 20px 24px;
    border: 1px solid var(--vr-line);
    border-radius: var(--vr-radius-lg);
    background-color: #fff;
    color: var(--vr-ink);
    text-align: center;
}
.vr-plan > * { margin: 0; }
.vr-plan--popular {
    border-color: var(--vr-navy);
    box-shadow: var(--vr-shadow);
}
.vr-plan-flag {
    position: absolute;
    inset: 0 0 auto;
    padding: 6px 12px;
    background-color: var(--vr-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vr-plan-price {
    color: var(--vr-navy);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.vr-plan-note {
    color: var(--vr-muted-tint);
    font-size: 13px;
    line-height: 1.5;
}
.vr-plan-limit {
    align-self: center;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: var(--vr-radius);
    background-color: var(--vr-paper);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.vr-plan-all {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
}
.vr-plan-all .bi { color: var(--vr-blue); }
.vr-plan-cta {
    margin-top: auto;
    padding-inline: 12px;
}
.vr-plans-note {
    max-width: 720px;
    margin: -8px 0 32px;
}
.vr-tiles + .vr-section-head,
.vr-fine + .vr-section-head { margin-top: 72px; }
/* Vier Pakete (Events & Kurse): vier Spalten, darunter zwei — keine leere Spalte */
.vr-plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1050px) {
    .vr-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vr-plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .vr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vr-plan { padding: 44px 12px 16px; }
    .vr-plan-price { font-size: 26px; }
    .vr-tiles + .vr-section-head,
    .vr-fine + .vr-section-head { margin-top: 48px; }
}
/* Unter 576 px eine Karte je Zeile, der CTA bleibt einzeilig */
@media (max-width: 575.98px) {
    .vr-plans { grid-template-columns: minmax(0, 1fr); }
    .vr-plan-cta { white-space: nowrap; }
}

/* Partner-App (A2): Hero-Screen; Galerie wischbar (die Liste scrollt, nicht die Seite), Telefone 160 px, ab 992 px 200 px;
   Store-Badges Navy mit Icon und zwei Zeilen; QR-Codes 112 px mit Ruhezone, unter 768 px aus */
.vr-phone--hero {
    display: block;
    width: min(100%, 280px);
    margin-inline: auto;
}
.vr-card-grid + .vr-section-head,
.vr-note + .vr-section-head { margin-top: 72px; }
.vr-phone-gallery {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 4px 4px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
}
.vr-phone-gallery > li {
    flex: none;
    scroll-snap-align: start;
}
.vr-phone-gallery .vr-phone {
    width: 160px;
    box-shadow: none;
}
.vr-phone-gallery:focus-visible,
.vr-store:focus-visible {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(16,36,58,.7);
}
.vr-store-cols {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 24px 48px;
    margin-bottom: 16px;
}
.vr-store-cols > div {
    display: grid;
    justify-items: start;
    gap: 16px;
}
.vr-store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: var(--vr-radius);
    background-color: var(--vr-navy);
    color: #fff;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .2s var(--vr-ease);
}
.vr-store:hover {
    background-color: var(--vr-navy-2);
    color: #fff;
}
.vr-store svg { flex: none; }
.vr-store small,
.vr-store strong { display: block; }
.vr-store small { font-size: .6875rem; }
.vr-store strong {
    font-size: 1.0625rem;
    font-weight: 600;
}
.vr-qr {
    box-sizing: content-box;
    display: block;
    width: 112px;
    height: 112px;
    padding: 10px;
    border: 1px solid var(--vr-line);
    border-radius: var(--vr-radius);
    background-color: #fff;
}
.vr-qr-caption { margin: 0; }
.vr-qr-caption + .vr-note { margin-top: 40px; }
@media (min-width: 992px) {
    .vr-phone-gallery .vr-phone { width: 200px; }
}
@media (max-width: 760px) {
    .vr-phone--hero { width: 220px; }
    .vr-store-cols { grid-template-columns: minmax(0, 1fr); }
    .vr-card-grid + .vr-section-head,
    .vr-note + .vr-section-head { margin-top: 48px; }
}
@media (max-width: 767.98px) {
    .vr-qr,
    .vr-qr-caption { display: none; }
}

/* === Navigation === */
/* Partner-Kopfzeile (navbar-partner.php), Regeln aus app.css umgezogen (A1); danach Gruppen-Panels aus PARTNER_NAV:
   ab 992 px helles Panel mit Spalten-Grid, mobil statisch im Navy-Collapse. */
/* navbar-dark bleibt fuer das helle Toggler-Icon; Farben und Abstaende kommen von hier. */
.navbar.vr-pnav {
    --bs-navbar-padding-y: .75rem;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: var(--vr-gold-2);
    --bs-navbar-active-color: var(--vr-gold-2);
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-nav-link-padding-x: .75rem;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, .25);
    --bs-navbar-toggler-border-radius: 8px;
    min-height: 78px;
    background-color: var(--vr-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.vr-pnav-home {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -.6px;
}
.vr-pnav-logo { width: 34px; height: 34px; }
/* Markenfarbe der Wortmarke (wie Logo), nicht der CTA-Ton. */
.vr-pnav-brand-gold,
.vr-pfoot-brand-gold { color: #d9a440; }
.vr-pnav .nav-link { font-size: .875rem; font-weight: 500; }

/* Gold-CTA; die helle Variante fuehrt Eingeloggte ins Backoffice. */
.vr-pnav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1.125rem;
    border-radius: 100px;
    background-color: var(--vr-gold);
    color: var(--vr-navy);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s ease, transform .25s ease;
}
.vr-pnav-cta:hover {
    background-color: var(--vr-gold-2);
    color: var(--vr-navy);
    transform: translateY(-1px);
}
.vr-pnav-cta-light { background-color: #fff; }
.vr-pnav-cta-light:hover { background-color: var(--vr-paper); }

/* Sprach-Dropdown ausserhalb von .navbar-nav: --bs-nav-link-Werte am Toggle, Weiss/Gold-2 auf Navy, 44px. */
.vr-pnav .vr-pnav-lang-toggle {
    --bs-nav-link-color: #fff;
    --bs-nav-link-hover-color: var(--vr-gold-2);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.vr-pnav-lang .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* Fokus: Gold auf Navy (§ 4.6); kein Bootstrap-Schatten am Toggler. */
.vr-pnav a:focus-visible,
.vr-pnav button:focus-visible,
.vr-pfoot a:focus-visible {
    outline: 3px solid var(--vr-gold-2);
    outline-offset: 2px;
    box-shadow: none;
}
.vr-pnav .navbar-toggler:focus { box-shadow: none; }
/* Helle Dropdowns: Navy auf Weiss, aktiv Weiss auf Navy, Fokusring Navy (auf dem aktiven Eintrag Gold-2). */
.vr-pnav .dropdown-menu {
    --bs-dropdown-link-color: var(--vr-navy);
    --bs-dropdown-link-hover-color: var(--vr-navy);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--vr-navy);
}
.vr-pnav .dropdown-menu a:focus-visible,
.vr-pnav .dropdown-menu button:focus-visible {
    outline-color: var(--vr-navy);
    outline-offset: -3px;
}
.vr-pnav .dropdown-menu .dropdown-item.active:focus-visible { outline-color: var(--vr-gold-2); }

@media (min-width: 992px) {
    .vr-pnav-actions { align-items: center; gap: .75rem; margin-left: 1rem; }
    /* Im Markup vor dem Toggler (mobil sichtbar), hier rechts aussen hinter dem CTA. */
    .vr-pnav-lang { order: 1; margin-left: 1.25rem; }
}
/* 992-1199px: Container nur 960px breit — Links enger, sonst bricht die Zeile. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar.vr-pnav { --bs-navbar-nav-link-padding-x: .5rem; }
}

/* Mobil: Menue auf Navy, Eintraege 44px, CTA volle Breite; Umschalter bleibt neben dem Toggler. */
@media (max-width: 991.98px) {
    .navbar.vr-pnav {
        --bs-navbar-brand-margin-end: .5rem;
        --bs-navbar-toggler-padding-x: .5rem;
        min-height: 68px;
    }
    .vr-pnav-home { font-size: 1.25rem; }
    .vr-pnav-logo { width: 30px; height: 30px; }
    .vr-pnav-toggler { min-width: 44px; min-height: 44px; }
    /* Offenes Menue scrollt unter der Kopfzeile (68px) selbst; 100vh als Rueckfall ohne dvh. */
    .vr-pnav .navbar-collapse {
        max-height: calc(100vh - 68px);
        max-height: calc(100dvh - 68px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: var(--vr-navy);
        padding: .5rem 0 1rem;
    }
    .vr-pnav .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .vr-pnav-actions { gap: .75rem; padding-top: .25rem; }
    .vr-pnav-cta { width: 100%; min-height: 44px; font-size: 1rem; }
    .vr-pnav-lang { margin-left: auto; margin-right: .25rem; }
}
/* Schmal (320px): Wortmarke kleiner, sonst bricht die Kopfzeile um. */
@media (max-width: 359.98px) {
    .vr-pnav-home { font-size: 1.125rem; }
}

.vr-pnav-panel {
    --bs-dropdown-link-hover-bg: var(--vr-paper);
    padding: 1rem;
    border-color: var(--vr-line);
    border-radius: var(--vr-radius);
    background-color: #fff;
    box-shadow: var(--vr-shadow);
}
.vr-pnav-cols { display: grid; gap: .75rem 1.5rem; }
.vr-pnav-cols--2 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.vr-pnav-cols--3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.vr-pnav-col > ul { margin: 0; }
.vr-pnav-col-title {
    margin: 0 0 .25rem;
    padding: 0 var(--bs-dropdown-item-padding-x);
    color: var(--vr-muted-tint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vr-pnav-panel .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-radius: 8px;
    white-space: normal;
}
.vr-pnav-panel .dropdown-item.active { font-weight: 700; }
.vr-pnav-group-toggle::after { transition: transform .2s var(--vr-ease); }
.vr-pnav-group-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (min-width: 992px) {
    .vr-pnav .navbar-nav .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
    .vr-pnav-cols--2 { min-width: 320px; }
    .vr-pnav-cols--3 { min-width: 640px; }
}
@media (max-width: 991.98px) {
    .vr-pnav .vr-pnav-group-toggle { width: 100%; justify-content: space-between; text-align: start; }
    .vr-pnav .vr-pnav-panel {
        --bs-dropdown-link-color: #fff;
        --bs-dropdown-link-hover-color: var(--vr-gold-2);
        --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08);
        --bs-dropdown-link-active-color: var(--vr-gold-2);
        --bs-dropdown-link-active-bg: transparent;
        position: static;
        margin: 0 0 .5rem;
        padding: .5rem 0;
        border: 0;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, .06);
        box-shadow: none;
    }
    .vr-pnav-cols--2,
    .vr-pnav-cols--3 { grid-template-columns: minmax(0, 1fr); }
    .vr-pnav-col-title { color: var(--vr-dark-muted); }
    .vr-pnav .vr-pnav-panel a:focus-visible { outline-color: var(--vr-gold-2); }
}

/* === Footer === */
/* footer-partner.php: Navy, Raster 6/3/2, Links und Badges 44 px hoch (Spec § 4.2); Hover-Regel unter Buttons. */
.vr-pfoot {
    margin-top: auto;
    padding: 2.75rem 0 2rem;
    background-color: var(--vr-navy);
    color: #b7c7d9;
}
.vr-pfoot a { color: #b7c7d9; }
.vr-pfoot-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.4px;
}
.vr-pfoot-logo { width: 29px; height: 29px; }
.vr-pfoot-title {
    color: #fff;
    font-size: .8125rem;
    font-weight: 650;
    letter-spacing: .02em;
}
.vr-pfoot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
@media (min-width: 768px) {
    .vr-pfoot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .vr-pfoot-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Ohne Abstand zwischen den Links: die 44 px kommen aus min-height, Umbrueche bleiben eng (line-height). */
.vr-pfoot-list a,
.vr-pfoot-bottom > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem 0;
    line-height: 1.3;
    text-decoration: none;
}
.vr-pfoot-bottom,
.vr-pfoot-apps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.vr-pfoot-bottom { justify-content: space-between; gap: 1.25rem 2rem; }
.vr-pfoot-store {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .25rem .875rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    line-height: 1.15;
    text-decoration: none;
}
.vr-pfoot-store i { font-size: 1.25rem; }
.vr-pfoot-store small { display: block; font-size: .6875rem; }
.vr-pfoot-rule { color: #fff; opacity: .15; }
/* Firmen-Familie: unterstrichen (1.4.1). */
.vr-pfoot-fine a { text-decoration: underline; text-underline-offset: 3px; }
/* Sprachwechsel ohne JavaScript (Kopfzeile braucht Bootstrap): Textlinks, aktive Sprache ohne Link, 44 px. */
.vr-pfoot-lang { display: flex; justify-content: center; gap: .5rem; }
.vr-pfoot-lang > * { display: inline-flex; align-items: center; min-height: 44px; }
.vr-pfoot-lang [aria-current] { color: #fff; font-weight: 600; }

/* === Einblendung === */
/* vr-js setzt site.js auf <html>; ohne Skript bleibt alles sichtbar. 24 px wie die Landing; bei
   reduzierter Bewegung und im Druck sofort sichtbar. */
.vr-js .vr-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--vr-ease), transform .6s var(--vr-ease);
}
.vr-js .vr-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .vr-js .vr-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
@media print {
    .vr-js .vr-reveal {
        opacity: 1;
        transform: none;
    }
}

/* === Breakpoints === */
/* Stufen wie die Landing: 1450, 1050 (Tablet), 992 (Navigation), 760 (Mobil). Hier die Grundschichten und was
   mehrere Bausteine teilen; sonst tragen Bausteine ihre Breakpoints selbst. */
@media (max-width: 1050px) {
    .vr-section { padding-block: 72px; }
    .vr-cta-band,
    .vr-status { padding-block: 72px; }
}
@media (max-width: 760px) {
    .vr-section { padding-block: 56px; }
    .vr-cta-band,
    .vr-status { padding-block: 56px; }
}
/* Anker-Leiste ab 992 px sticky unter der Kopfzeile (78 px), Sprungziele darunter — auf beiden Hosts: die Leiste
   steht immer bei 78 px, auch unter der niedrigeren Gast-Navigation (gleiche Spezifitaet wie die Regeln in app.css,
   site.css laedt danach). Grund und Linie setzt .vr-anchors im Abschnitt Bausteine */
@media (min-width: 992px) {
    .vr-anchors {
        position: sticky;
        top: 78px;
        z-index: 5;
    }
    html:has(> body > nav.sticky-top):has(.vr-anchors) { scroll-padding-top: 8.75rem; }
}