/* =============================================================================
   RIVUS360 Support — Startseite
   =============================================================================
   Nur die Bausteine, die es in frontend-main.css noch nicht gibt: Downloadkarten,
   nummerierte Schritte und die aufklappbaren Hinweise. Alles andere (hero,
   feature-grid, feature-card, btn, container) kommt von dort.

   Farben ausschliesslich ueber die --theme-*-Variablen aus core_theme.css, damit
   der Dunkelmodus ohne zweite Pflegestelle mitlaeuft.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Gemeinsames
   -------------------------------------------------------------------------- */
.section-lead {
    max-width: 60ch;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: var(--theme-text-secondary, var(--text-secondary));
    font-size: 1.05rem;
    line-height: 1.6;
}

.downloads,
.guide,
.assurance {
    padding: 4rem 0;
}

.downloads h2,
.guide h2,
.assurance h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

/* Abwechselnder Hintergrund, damit sich die Abschnitte optisch trennen */
.guide {
    background: var(--theme-bg-secondary, var(--light));
}

/* -----------------------------------------------------------------------------
   Downloadkarten
   -------------------------------------------------------------------------- */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.download-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.download-card__icon {
    font-size: 2.75rem;
    line-height: 1;
    color: var(--primary);
    margin-bottom: 1rem;
}

.download-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}

.download-card__note {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, var(--text-secondary));
    /* Haelt die Knoepfe aller Karten auf einer Linie, auch bei
       unterschiedlich langen Hinweisen. */
    flex-grow: 1;
}

.download-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(40, 167, 69, 0.12);
    color: var(--success);
}

.download-card__badge--manual {
    background: var(--theme-bg-tertiary, rgba(108, 117, 125, 0.12));
    color: var(--theme-text-secondary, var(--text-secondary));
}

.downloads__hint {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--theme-text-muted, var(--text-muted));
}

/* -----------------------------------------------------------------------------
   Schritte
   -------------------------------------------------------------------------- */
.steps {
    list-style: none;
    /* Volle Containerbreite wie Downloads und Sicherheitsabschnitt — vorher
       waren Schritte und Hinweise schmaler und wirkten eingerueckt. */
    margin: 0 0 3rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
}

.step__number {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.step__title {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
}

.step__body p {
    margin: 0;
    color: var(--theme-text-secondary, var(--text-secondary));
}

/* -----------------------------------------------------------------------------
   Aufklappbare Hinweise
   -------------------------------------------------------------------------- */
.notes {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.note {
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius, 8px);
    overflow: hidden;
}

.note__summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

/* Eigener Pfeil statt des Browser-Dreiecks, damit es in beiden Themes passt */
.note__summary::-webkit-details-marker { display: none; }

.note__summary::after {
    content: "";
    margin-left: auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.note[open] .note__summary::after {
    transform: rotate(-135deg);
}

.note__summary i {
    color: var(--primary);
}

.note__body {
    padding: 0 1.25rem 1.25rem;
    color: var(--theme-text-secondary, var(--text-secondary));
}

.note__body p {
    margin: 0 0 0.75rem;
}

.note__body p:last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Serverangaben zum Abtippen
   -------------------------------------------------------------------------- */
.server-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 1rem 0 0;
    align-items: baseline;
}

.server-details dt {
    font-weight: 600;
    color: var(--theme-text-primary, var(--text-primary));
}

.server-details dd {
    margin: 0;
    min-width: 0;
}

.server-details code {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--theme-bg-tertiary, var(--light));
    font-size: 0.9rem;
    /* Der Schluessel ist 44 Zeichen lang und darf auf dem Handy umbrechen,
       statt die Seite breitzuziehen. */
    overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
    .server-details {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .server-details dd {
        margin-bottom: 0.75rem;
    }
    .step {
        flex-direction: column;
        gap: 0.75rem;
    }
}


/* -----------------------------------------------------------------------------
   Datensicherheit
   -------------------------------------------------------------------------- */
.security {
    padding: 4rem 0;
}

.security h2 {
    text-align: center;
    margin-bottom: 0.75rem;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.security-card {
    padding: 1.75rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-left: 3px solid var(--primary);
    border-radius: var(--radius, 8px);
}

.security-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.security-card__head i {
    font-size: 1.35rem;
    color: var(--primary);
}

.security-card__head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.security-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, var(--text-secondary));
}

/* Hinweis auf die Einhaltung von NIS-2 */
.compliance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: var(--theme-bg-secondary, var(--light));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
}

.compliance__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}

.compliance__text {
    margin: 0;
    flex: 1 1 22rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, var(--text-secondary));
}


/* =============================================================================
   Auswahl der Download-Variante
   ============================================================================= */
.download-card__more {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, var(--text-secondary));
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.variant-dialog {
    /* Ohne diese drei Zeilen klebt der Dialog oben links: sobald eine eigene
       Breite gesetzt wird, greift das automatische Zentrieren des Browsers nicht
       mehr zuverlaessig. inset + margin: auto holt ihn in die Mitte. */
    inset: 0;
    margin: auto;
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    background: var(--theme-bg-primary, var(--white));
    color: var(--theme-text-primary, var(--text-primary));
    box-shadow: var(--shadow-lg);
}

.variant-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.variant-dialog__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-color, var(--border-color));
}

.variant-dialog__head i { font-size: 1.4rem; color: var(--primary); }
.variant-dialog__head h3 { margin: 0; font-size: 1.1rem; }

.variant-dialog__close {
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--theme-text-secondary, var(--text-secondary));
}

.variant-list { list-style: none; margin: 0; padding: 0.5rem; }

.variant__link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius, 8px);
    text-decoration: none;
    color: inherit;
}

.variant__link:hover,
.variant__link:focus-visible {
    background: var(--theme-bg-hover, rgba(0, 0, 0, 0.04));
    text-decoration: none;
}

.variant__main { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.variant__label { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.variant__hint { font-size: 0.85rem; color: var(--theme-text-secondary, var(--text-secondary)); }
.variant__size { font-size: 0.85rem; color: var(--theme-text-muted, var(--text-muted)); white-space: nowrap; }

.variant__tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--theme-bg-tertiary, var(--light));
    color: var(--theme-text-secondary, var(--text-secondary));
}

.variant__tag--ready { background: rgba(40, 167, 69, 0.15); color: var(--success); }
.variant--empfohlen .variant__link { border: 1px solid var(--primary); }

.variant-dialog__foot {
    margin: 0;
    padding: 0.9rem 1.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--theme-text-muted, var(--text-muted));
}

/* =============================================================================
   Kompatibilitätsliste
   ============================================================================= */
/* Ohne eigenen Hintergrund — liegt zwischen der hellen Datensicherheit und dem
   dunkleren Hilfe-Band und trennt damit beide. */
.compat { padding: 4rem 0; }
.compat h2 { text-align: center; margin-bottom: 0.75rem; }

/* Tabellen sind das Einzige, was quer scrollen darf */
.compat__scroll { overflow-x: auto; }

.compat-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.compat-table th,
.compat-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-light, var(--border-color));
    vertical-align: top;
}

.compat-table thead th {
    background: var(--theme-bg-tertiary, var(--light));
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.compat-table tbody th { white-space: nowrap; font-weight: 700; }
.compat-table tbody th i { color: var(--primary); }
.compat-table__hint { display: block; font-size: 0.82rem; color: var(--theme-text-muted, var(--text-muted)); }
.compat-table__size { white-space: nowrap; color: var(--theme-text-secondary, var(--text-secondary)); }
.compat-table__yes { color: var(--success); font-weight: 600; white-space: nowrap; }
.compat-table__no { color: var(--theme-text-muted, var(--text-muted)); }

/* =============================================================================
   RustDesk
   ============================================================================= */
.rustdesk { padding: 4rem 0; }

.rustdesk__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    padding: 2.5rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
}

/* Sanftes Schweben, damit das Logo nicht tot wirkt */
.rustdesk__logo img {
    display: block;
    animation: rd-schweben 6s ease-in-out infinite;
}

@keyframes rd-schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.rustdesk__body h2 { margin-top: 0; }
.rustdesk__body p { color: var(--theme-text-secondary, var(--text-secondary)); line-height: 1.7; }

.rustdesk__links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; }

.rustdesk__offer {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--primary);
    background: var(--theme-bg-secondary, var(--light));
    border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}

.rustdesk__offer h3 { margin: 0 0 0.5rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.rustdesk__offer h3 i { color: var(--primary); }
.rustdesk__offer p { margin: 0; }

.rustdesk__credit {
    margin: 1.5rem 0 0;
    font-size: 0.82rem;
    color: var(--theme-text-muted, var(--text-muted));
}

@media (max-width: 40rem) {
    .rustdesk__inner { grid-template-columns: 1fr; padding: 1.75rem; }
}


/* =============================================================================
   Datensicherheit — Kulisse, 3D-Einblendung, Regelwerke
   =============================================================================
   Alle Bewegungen laufen ueber CSS, kein JavaScript. Das Einblenden nutzt
   animation-timeline: view() — wo der Browser das nicht kennt, stehen die Karten
   einfach sichtbar da (siehe @supports weiter unten). Und wer im System
   "weniger Bewegung" eingestellt hat, bekommt gar keine Animation.
   ============================================================================= */
.security {
    position: relative;
    /* Tiefe fuer die Karten-Einblendung */
    perspective: 900px;
    /* Abwechselnder Hintergrund: sonst klebt der Bereich an RustDesk davor */
    background: var(--theme-bg-secondary, var(--light));
}

/* -----------------------------------------------------------------------------
   Schaubild der drei Zonen — im Textfluss, nicht als Kulisse
   -------------------------------------------------------------------------- */
.zonen {
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius-lg, 12px);
    color: var(--theme-text-secondary, var(--text-secondary));
}

.zonen .dc { display: block; width: 100%; height: auto; }

.dc__beschriftung { font-weight: 600; letter-spacing: 0.01em; }

/* Statuslichter blinken unregelmaessig */
.dc__led { animation: dc-blinken 3.2s ease-in-out infinite; }
.dc__led--2 { animation-duration: 4.1s; animation-delay: -1.2s; }
.dc__led--3 { animation-duration: 2.6s; animation-delay: -0.6s; }

@keyframes dc-blinken {
    0%, 100% { opacity: 0.25; }
    45%      { opacity: 0.95; }
    55%      { opacity: 0.8; }
}

/* Datenfluss wandert Richtung Pfeilspitze */
.dc__fluss { animation: dc-fluss 2s linear infinite; }
.dc__fluss--2 { animation-duration: 2.6s; }

@keyframes dc-fluss {
    from { stroke-dashoffset: 32; }
    to   { stroke-dashoffset: 0; }
}

/* Das Schild atmet, der Haken zeichnet sich nach */
.dc__schild { animation: dc-atmen 5s ease-in-out infinite; transform-origin: 320px 180px; }

@keyframes dc-atmen {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.05); opacity: 1; }
}

.dc__haken { stroke-dasharray: 40; animation: dc-haken 5s ease-in-out infinite; }

@keyframes dc-haken {
    0%, 15%  { stroke-dashoffset: 40; }
    35%, 85% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 40; }
}

/* --- Karten mit 3D-Einblendung --- */
.security-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-style: preserve-3d;
}

/* Wandernde Linie am linken Rand — greift die Datenfluss-Optik des Schaubilds auf,
   jetzt aber IN der Karte statt stoerend dahinter. */
.security-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--primary) 20%,
        var(--primary) 45%,
        transparent 65%,
        transparent 100%
    );
    background-size: 100% 220%;
    animation: kante-wandern 4.5s linear infinite;
}

.security-card:nth-child(2)::before { animation-duration: 5.4s; animation-delay: -1.1s; }
.security-card:nth-child(3)::before { animation-duration: 3.9s; animation-delay: -2.3s; }
.security-card:nth-child(4)::before { animation-duration: 6.1s; animation-delay: -0.7s; }
.security-card:nth-child(5)::before { animation-duration: 4.2s; animation-delay: -3.0s; }
.security-card:nth-child(6)::before { animation-duration: 5.8s; animation-delay: -1.8s; }

@keyframes kante-wandern {
    from { background-position: 0 -120%; }
    to   { background-position: 0 220%; }
}

/* Feiner Schimmer, der beim Ueberfahren einmal durchlaeuft */
.security-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 40%,
        color-mix(in srgb, var(--primary) 12%, transparent) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    pointer-events: none;
}

.security-card:hover::after {
    animation: karte-schimmer 0.9s ease-out;
}

@keyframes karte-schimmer {
    to { transform: translateX(100%); }
}

.security-card:hover {
    transform: translateY(-4px) rotateX(3deg);
    box-shadow: var(--shadow-lg);
}

/* Scrollgesteuertes Einblenden, rein in CSS. Ohne Unterstuetzung passiert
   nichts — die Karten sind dann von Anfang an sichtbar. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .security-card {
            animation: karte-auftauchen linear both;
            animation-timeline: view();
            animation-range: entry 8% cover 32%;
        }
    }
}

/* Leichter Versatz, damit die Karten nacheinander erscheinen statt im Block */
.security-card:nth-child(2) { animation-range: entry 10% cover 34%; }
.security-card:nth-child(3) { animation-range: entry 12% cover 36%; }
.security-card:nth-child(4) { animation-range: entry 14% cover 38%; }
.security-card:nth-child(5) { animation-range: entry 16% cover 40%; }
.security-card:nth-child(6) { animation-range: entry 18% cover 42%; }

@keyframes karte-auftauchen {
    from { opacity: 0; transform: translateY(28px) rotateX(-12deg) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* --- Regelwerke --- */
.standards__titel {
    margin: 3rem 0 1.25rem;
    text-align: center;
    font-size: 1.15rem;
}

.standards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.standard {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--theme-bg-primary, var(--white));
    border: 1px solid var(--theme-border-color, var(--border-color));
    border-radius: var(--radius, 8px);
}

.standard__kuerzel {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 4.25rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius, 8px);
    background: var(--theme-bg-tertiary, var(--light));
    color: var(--theme-text-secondary, var(--text-secondary));
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Was wir erfuellen, hebt sich farblich ab — der Rest ist Orientierung */
.standard--erfuellt { border-color: var(--primary); }
.standard--erfuellt .standard__kuerzel { background: var(--primary); color: #fff; }

.standard__text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, var(--text-secondary));
}

.standard__text strong {
    display: block;
    color: var(--theme-text-primary, var(--text-primary));
    margin-bottom: 0.15rem;
}

.standards__fuss {
    margin: 2rem auto 0;
    max-width: 58ch;
    text-align: center;
    font-size: 0.9rem;
    color: var(--theme-text-muted, var(--text-muted));
}

/* =============================================================================
   Weniger Bewegung, wenn das System es verlangt
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .dc__led,
    .dc__fluss,
    .dc__schild,
    .dc__haken,
    .rustdesk__logo img,
    .security-card,
    .security-card::before,
    .security-card::after {
        animation: none !important;
    }
    .security-card:hover { transform: none; }
    .security-card::before { background: var(--primary); }
}


/* =============================================================================
   Hero der Supportseite
   =============================================================================
   Pendant zu den Paragraphen bei laws: schwebende Symbole aus der Fernwartung
   plus eine Verbindungslinie, auf der ein Paket hin und her wandert.
   ============================================================================= */
.hero--support {
    position: relative;
    overflow: hidden;
    /* Unter dem Inhalt muessen zwei Dinge Platz finden: die Verbindungs-
       animation und das schraege Band am Fuss. Auf hohen Fenstern gibt
       min-height (max(55vh, 480px)) genug Spielraum her, weil der Inhalt
       mittig darin schwimmt. Wird das Fenster niedriger, ist der Inhalt hoeher
       als min-height — dann bestimmt er die Hoehe, der Spielraum verschwindet,
       und die Animation klebt unter den Knoepfen und liegt auf der Linie.
       Gemessen bei 1366x700: vorher 13 px Abstand, jetzt 66 px.
       Die Reserve steht deshalb fest im Polster, nicht in einer Bildschirmhoehe. */
    padding-bottom: 10.5rem;
}

/* Inhalt liegt immer ueber der Kulisse. Die Umriss-Knoepfe sind durchsichtig —
   ohne eigenen Hintergrund wuerde ein schwebendes Symbol dahinter durchscheinen. */
.hero--support > .container { position: relative; z-index: 3; }

.hero--support .btn-outline {
    background: var(--theme-bg-primary, #fff);
}

.hero__symbols {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Sicherheitsnetz zusaetzlich zur Platzierung: zur Mitte hin blenden die
       Symbole vollstaendig aus. Egal wie weit sie schweben, sie koennen Text,
       Knoepfe und Rivy nicht mehr schneiden. */
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0%, #000 14%, transparent 27%,
        transparent 73%, #000 86%, #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0%, #000 14%, transparent 27%,
        transparent 73%, #000 86%, #000 100%
    );
}

.hero__symbol {
    position: absolute;
    color: var(--primary);
    opacity: 0.13;
    font-size: 2.2rem;
    animation: symbol-schweben 14s ease-in-out infinite;
    will-change: transform;
}

/* Die Symbole bleiben in den Aussenspalten. Vorher lagen sie quer ueber dem
   Inhalt und schwebten durch die durchsichtigen Umriss-Knoepfe hindurch — das
   wirkte unruhig. Jetzt ist die Mitte (22 % bis 78 %) frei fuer Text, Knoepfe
   und Rivy. */
.hero__symbol--1 { left:  4%; top: 14%; font-size: 2.6rem; animation-duration: 15s; }
.hero__symbol--2 { left: 11%; top: 44%; font-size: 3.2rem; animation-duration: 18s; animation-delay: -3s; }
.hero__symbol--3 { left:  6%; top: 72%; font-size: 2.1rem; animation-duration: 13s; animation-delay: -7s; }
.hero__symbol--4 { left: 16%; top: 86%; font-size: 2.4rem; animation-duration: 16s; animation-delay: -5s; }
.hero__symbol--5 { right: 4%;  top: 16%; font-size: 2.8rem; animation-duration: 19s; animation-delay: -9s; }
.hero__symbol--6 { right: 11%; top: 46%; font-size: 2.0rem; animation-duration: 14s; animation-delay: -2s; }
.hero__symbol--7 { right: 5%;  top: 74%; font-size: 3.0rem; animation-duration: 17s; animation-delay: -11s; }
.hero__symbol--8 { right: 16%; top: 88%; font-size: 2.3rem; animation-duration: 20s; animation-delay: -6s; }

/* Bewegung kleiner halten, damit nichts in die freie Mitte wandert */
@keyframes symbol-schweben {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    25%      { transform: translate3d(7px, -12px, 0) rotate(4deg); }
    50%      { transform: translate3d(-4px, -20px, 0) rotate(-3deg); }
    75%      { transform: translate3d(-8px, -8px, 0) rotate(2deg); }
}

/* Verbindung zwischen zwei Geraeten */
.hero__link {
    position: absolute;
    left: 50%;
    /* Fester Abstand statt Prozent: an 1.5 % der Bannerhoehe haengend wanderte
       die Animation mit der Fenstergroesse — auf niedrigen Fenstern bis in das
       schraege Band hinein. */
    bottom: 2.75rem;
    width: min(600px, 80%);
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.35;
    pointer-events: none;
}

.hero__link-node { fill: var(--primary); }
.hero__link-node--a { animation: knoten-puls 3s ease-in-out infinite; }
.hero__link-node--b { animation: knoten-puls 3s ease-in-out infinite 1.5s; }

@keyframes knoten-puls {
    0%, 100% { opacity: 0.55; r: 9; }
    50%      { opacity: 1;    r: 12; }
}

.hero__link-path {
    stroke: var(--primary);
    animation: leitung-laufen 1.8s linear infinite;
}

@keyframes leitung-laufen {
    from { stroke-dashoffset: 36; }
    to   { stroke-dashoffset: 0; }
}

/* Das Datenpaket pendelt zwischen den Knoten */
.hero__link-paket {
    fill: var(--primary);
    animation: paket-wandern 3s ease-in-out infinite;
}

@keyframes paket-wandern {
    0%, 100% { cx: 70;  opacity: 0; }
    10%      { opacity: 1; }
    50%      { cx: 530; opacity: 1; }
    60%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__symbol,
    .hero__link-node,
    .hero__link-path,
    .hero__link-paket {
        animation: none !important;
    }
}

@media (max-width: 64rem) {
    /* Mittlere Schirme: nur noch die aeussersten Symbole, sonst wird es eng */
    .hero__symbol--2, .hero__symbol--4,
    .hero__symbol--6, .hero__symbol--8 { display: none; }
}

@media (max-width: 48rem) {
    /* Auf dem Handy nimmt die Kulisse sonst die Lesbarkeit */
    .hero__symbols, .hero__link { display: none; }
}


/* =============================================================================
   Rivy im Banner
   =============================================================================
   Winkt, und die Sprechblase tippt sich einmal und bleibt dann stehen. Der Text
   wird ueber steps() in Zeichenschritten freigelegt — dafuer braucht die Blase
   eine feste Zeichenzahl (--zeichen), sonst bricht der Text um. Die Animation
   laeuft genau einmal (forwards), nicht endlos: nichts ist nerviger als ein
   Text, der sich staendig neu tippt.
   ============================================================================= */
.hero-rivy {
    position: relative;
    /* Ueber der Kulisse, damit nichts durch die Sprechblase schimmert */
    z-index: 3;
    display: inline-flex;
    align-items: flex-end;
    gap: 0.75rem;
    /* Dichter an den Untertitel, deutlich mehr Luft nach unten zu den Knoepfen */
    margin: 0.75rem auto 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.hero-rivy__bild {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    transform-origin: 50% 85%;
    /* Winken: kurze Serie, dann lange Pause */
    animation: rivy-winken 6s ease-in-out infinite;
}

@keyframes rivy-winken {
    0%, 62%, 100% { transform: rotate(0deg); }
    66%           { transform: rotate(-13deg); }
    70%           { transform: rotate(9deg); }
    74%           { transform: rotate(-9deg); }
    78%           { transform: rotate(6deg); }
    82%           { transform: rotate(0deg); }
}

.hero-rivy__blase {
    position: relative;
    padding: 0.75rem 1.1rem;
    border-radius: 14px 14px 4px 14px;
    background: var(--theme-bg-primary, #fff);
    border: 1px solid var(--theme-border-color, var(--border-color));
    box-shadow: var(--shadow);
    font-weight: 600;
    color: var(--theme-text-primary, var(--text-primary));
    white-space: nowrap;
    /* Blase selbst faehrt sanft ein, bevor getippt wird */
    animation: blase-auf 0.4s ease-out 0.3s both;
}

@keyframes blase-auf {
    from { opacity: 0; transform: translateY(6px) scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* Zipfel zur Ente hin */
.hero-rivy__blase::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 8px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-right: 1px solid var(--theme-border-color, var(--border-color));
    border-bottom: 1px solid var(--theme-border-color, var(--border-color));
    transform: rotate(-45deg);
}

.hero-rivy__text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    /* content-box ist hier entscheidend: mit border-box zaehlt die 2 px breite
       Schreibmarke zur Breite, und bei width: 100% wird das letzte Zeichen
       abgeschnitten — das Fragezeichen fehlte genau deshalb. */
    box-sizing: content-box;
    padding-right: 1px;
    /* Schreibmarke, die nach dem Tippen verschwindet */
    border-right: 2px solid var(--primary);
    animation:
        tippen 1.6s steps(22, end) 0.7s both,
        marke 0.6s step-end 0.7s 4,
        marke-weg 0.01s linear 3.1s forwards;
}

@keyframes tippen {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes marke {
    0%, 100% { border-color: var(--primary); }
    50%      { border-color: transparent; }
}

@keyframes marke-weg {
    to { border-color: transparent; }
}

.hero-rivy:hover .hero-rivy__blase,
.hero-rivy:focus-visible .hero-rivy__blase {
    border-color: var(--primary);
}

.hero-rivy:hover .hero-rivy__bild {
    animation: rivy-winken 1.2s ease-in-out infinite;
}

/* Auf schmalen Schirmen unter den Text und kleiner */
@media (max-width: 34rem) {
    .hero-rivy {
        flex-direction: column-reverse;
        align-items: center;
        gap: 0.4rem;
    }
    .hero-rivy__bild { width: 64px; height: 64px; }
    .hero-rivy__blase {
        border-radius: 14px 14px 14px 4px;
        font-size: 0.92rem;
        white-space: normal;
        text-align: center;
    }
    .hero-rivy__blase::after { right: auto; left: 12px; bottom: -7px; }
    /* Tippen braucht eine Zeile — bei Umbruch lieber direkt anzeigen */
    .hero-rivy__text {
        animation: none;
        border-right: 0;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-rivy__bild,
    .hero-rivy__blase,
    .hero-rivy__text {
        animation: none !important;
    }
    .hero-rivy__text { border-right: 0; }
}


/* Spinner fuer normale Formularknoepfe (main.js) ---------------------------- */
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-dreht 0.7s linear infinite;
    vertical-align: -0.125em;
}

@keyframes btn-dreht {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Kopfband der Download-Seite (/download/)
   --------------------------------------------------------------------------
   Die Seite hatte bisher gar kein eigenes CSS: die Ueberschrift stand links
   oben, der Fliesstext mittig (weil .section-lead zentriert), und der Rueckweg
   war unformatierter Text. Das Band fasst die drei Teile zu einer zentrierten
   Einheit zusammen und nimmt die Bildsprache des Banners der Startseite auf —
   gedaempfter, weil das hier eine kurze Zweckseite ist.
   ========================================================================== */

.download-kopf {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 2.75rem;
    text-align: center;
    border-bottom: 1px solid var(--theme-border, var(--border-color, #e3e6ea));
}

/* Weicher Farbschein statt eines harten Farbblocks. Liegt hinter dem Inhalt
   und reagiert auf nichts — rein dekorativ. */
.download-kopf__schein {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 120% at 50% -10%, rgba(197, 2, 60, 0.10), transparent 62%),
        radial-gradient(40% 90% at 12% 110%, rgba(197, 2, 60, 0.06), transparent 60%);
}

.download-kopf__inhalt {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.download-kopf__marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--theme-bg-primary, #fff);
    border: 1px solid var(--theme-border, var(--border-color, #e3e6ea));
    box-shadow: 0 6px 18px rgba(16, 18, 22, 0.08);
    color: var(--primary, #c5023c);
    font-size: 1.4rem;
    /* Der Pfeil sinkt langsam nach unten und kommt zurueck — ein leiser
       Hinweis auf "herunterladen", kein Blickfang. */
    animation: download-marke-sinken 3.2s ease-in-out infinite;
}

@keyframes download-marke-sinken {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

.download-kopf__titel {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--theme-text-primary, var(--text-primary, #1f2328));
}

.download-kopf__satz {
    max-width: 52ch;
    margin: 0;
    color: var(--theme-text-secondary, var(--text-secondary, #5b6068));
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Der Rueckweg ist ein echter Knopf, kein Text mittendrin. Durchsichtige
   Umriss-Knoepfe brauchen hier einen eigenen Hintergrund, sonst scheint der
   Farbschein durch. */
.download-kopf__zurueck {
    margin-top: 0.4rem;
    background: var(--theme-bg-primary, #fff);
}

.download-kopf__zurueck:hover {
    text-decoration: none;
}

[data-theme="dark"] .download-kopf__schein {
    background:
        radial-gradient(60% 120% at 50% -10%, rgba(232, 54, 93, 0.16), transparent 62%),
        radial-gradient(40% 90% at 12% 110%, rgba(232, 54, 93, 0.09), transparent 60%);
}

[data-theme="dark"] .download-kopf__marke,
[data-theme="dark"] .download-kopf__zurueck {
    background: var(--theme-bg-secondary, #24262b);
    border-color: var(--theme-border, #34373d);
}

[data-theme="dark"] .download-kopf__marke {
    color: #e8365d;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .download-kopf__marke {
        animation: none;
    }
}

@media (max-width: 640px) {
    .download-kopf {
        padding: 2.5rem 0 2rem;
    }
}

/* ==========================================================================
   Konfigurations-Zeichenkette zum Einfuegen in RustDesk
   --------------------------------------------------------------------------
   Eine lange Base64-Zeile. Sie darf umbrechen statt die Seite breit zu
   ziehen, und der Kopierknopf bleibt daneben erreichbar.
   ========================================================================== */

.konfig-kette {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

.konfig-kette__wert {
    flex: 1 1 22rem;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: var(--theme-bg-secondary, #f1f3f5);
    border: 1px solid var(--theme-border, var(--border-color, #e3e6ea));
    font-size: 0.82rem;
    line-height: 1.5;
    /* Base64 hat keine Trennstellen — ohne das steht die Zeile ueber den Rand. */
    overflow-wrap: anywhere;
    user-select: all;
}

.konfig-kette__knopf {
    flex: 0 0 auto;
    background: var(--theme-bg-primary, #fff);
}

.konfig-kette__knopf--fertig {
    border-color: var(--erfolg, #1a7f45);
    color: var(--erfolg, #1a7f45);
}

[data-theme="dark"] .konfig-kette__wert {
    background: var(--theme-bg-secondary, #24262b);
    border-color: var(--theme-border, #34373d);
}

[data-theme="dark"] .konfig-kette__knopf {
    background: var(--theme-bg-secondary, #24262b);
}