/*
 * Vorstellseiten-Designs + Netzwerkliste (Anwender-Direktive 2026-07-22).
 *
 * Konzept „Ein Netz, fünf Stimmen": Jedes Mitglied wählt im Profil eines von
 * fünf Designs für seine öffentliche Vorstellseite. Alle Designs teilen sich
 * dieselbe HTML-Struktur (site_helfer.php) — umgeschaltet wird ausschließlich
 * über die Body-Klasse vd--<id> auf vorstellung.php. Katalog (Single Source):
 * app/VorstellungDesigns.php. Kein Inline-Stil (CSP), keine externen Fonts
 * (CI: Montserrat + Open Sans mit System-Fallbacks, lokal bzw. Systemstapel).
 *
 * Enthält außerdem:
 *  - .vd-team…      neue Netzwerk-/Team-Kartenliste (Klassik-Seiten + Neural-Fenster)
 *  - .vd-vorschau   Banner der Besitzer-/Admin-Vorschau
 *  - .vdw-…         Design-Wähler mit CSS-Miniaturen im Profil
 */

/* =========================================================================
   Gemeinsame Bühne (gilt für jede Design-Variante auf vorstellung.php)
   ========================================================================= */

.vd .site-vorstellung-kopf { position: relative; }

/* Sanfter, gestaffelter Seiten-Einstieg — ein Moment, kein Feuerwerk. */
@keyframes vdAuf {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.vd .site-vorstellung > * ,
.vd .site-vorstellung-kontakt {
    animation: vdAuf .6s cubic-bezier(.2, .7, .2, 1) both;
}
.vd .site-vorstellung > *:nth-child(2) { animation-delay: .08s; }
.vd .site-vorstellung > *:nth-child(3) { animation-delay: .16s; }
.vd .site-vorstellung-kontakt          { animation-delay: .26s; }

/* Vorschau-Banner (nur Besitzer/Admin sichtbar) */
.vd-vorschau {
    max-width: 760px;
    margin: 18px auto -22px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(31, 198, 213, .55);
    background:
        repeating-linear-gradient(-45deg,
            rgba(31, 198, 213, .16) 0 12px,
            rgba(31, 198, 213, .05) 12px 24px);
    color: var(--site-text, #EAF3F6);
    font: 600 .9rem/1.45 'Open Sans', Arial, Helvetica, sans-serif;
    text-align: center;
}
.vd-vorschau strong { color: #7EE7F0; letter-spacing: .04em; }
.vd-vorschau a { color: #7EE7F0; }

/* =========================================================================
   Design 1 — NEURAL („Knoten des Netzwerks", Standard)
   Tiefes Anthrazit, Punktnetz, glühende Kante, pulsierender Avatar-Ring.
   ========================================================================= */

body.vd--neural { position: relative; }
body.vd--neural::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(rgba(126, 231, 240, .13) 1px, transparent 1.4px) 0 0 / 26px 26px,
        radial-gradient(60% 45% at 50% 0%, rgba(15, 175, 192, .14), transparent 70%);
    mask-image: radial-gradient(120% 90% at 50% 30%, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 45%, transparent 100%);
}
body.vd--neural .site-kopf,
body.vd--neural .site-inhalt,
body.vd--neural .site-fuss { position: relative; z-index: 1; }

.vd.vd--neural .site-karte {
    position: relative;
    overflow: hidden;
    border-color: rgba(126, 231, 240, .28);
}
/* glühende Oberkante — die Signatur des Netzes */
.vd.vd--neural .site-karte::before {
    content: "";
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1FC6D5 30%, #7EE7F0 50%, #1FC6D5 70%, transparent);
    filter: drop-shadow(0 0 8px rgba(31, 198, 213, .8));
}
@keyframes vdNeuralPuls {
    0%, 100% { box-shadow: 0 0 0 3px rgba(31, 198, 213, .55), 0 0 24px rgba(31, 198, 213, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(31, 198, 213, .18), 0 0 42px rgba(31, 198, 213, .55); }
}
.vd.vd--neural .site-vorstellung-foto,
.vd.vd--neural .site-vorstellung-platzhalter {
    animation: vdNeuralPuls 3.6s ease-in-out infinite;
}
.vd.vd--neural .site-vorstellung-platzhalter {
    background: radial-gradient(circle at 30% 25%, #17414a, #0C1016 75%);
    color: #7EE7F0;
}
.vd.vd--neural .site-vorstellung-logo {
    background: rgba(234, 243, 246, .96);
    box-shadow: 0 0 0 1px rgba(126, 231, 240, .35), 0 0 28px rgba(31, 198, 213, .25);
}
.vd.vd--neural .site-vorstellung-titel {
    background: linear-gradient(92deg, #EAF3F6 20%, #7EE7F0 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vd.vd--neural .site-vorstellung-unter { color: #8FA6B0; }
.vd.vd--neural .site-vorstellung-kurz {
    border-left: 3px solid rgba(31, 198, 213, .7);
    padding-left: 14px;
    font-size: 1.06rem;
    color: #C7D6DD;
}

/* =========================================================================
   Design 2 — AURORA („Lichtschleier"): nachtblau, langsam wandernde
   Farbnebel in Türkis/Eisblau, schwebende Glaskarte. Ruhig und edel.
   ========================================================================= */

body.vd--aurora { background: #060D18; }
body.vd--aurora::before,
body.vd--aurora::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}
body.vd--aurora::before {
    width: 55vw; height: 55vw;
    left: -12vw; top: -18vh;
    background: radial-gradient(circle, rgba(31, 198, 213, .38), transparent 65%);
    animation: vdAuroraA 26s ease-in-out infinite alternate;
}
body.vd--aurora::after {
    width: 48vw; height: 48vw;
    right: -14vw; bottom: -20vh;
    background: radial-gradient(circle, rgba(90, 160, 232, .30), transparent 65%);
    animation: vdAuroraB 34s ease-in-out infinite alternate;
}
@keyframes vdAuroraA { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes vdAuroraB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-10vw, -8vh) scale(.95); } }

body.vd--aurora .site-kopf,
body.vd--aurora .site-inhalt,
body.vd--aurora .site-fuss { position: relative; z-index: 1; }

.vd.vd--aurora .site-karte {
    border-radius: 26px;
    border-color: rgba(255, 255, 255, .14);
    background: rgba(12, 20, 33, .5);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 30px 90px -25px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.vd.vd--aurora .site-vorstellung-foto,
.vd.vd--aurora .site-vorstellung-platzhalter {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 0 0 5px rgba(126, 231, 240, .35), 0 18px 40px -12px rgba(0, 0, 0, .8);
}
.vd.vd--aurora .site-vorstellung-platzhalter {
    background: linear-gradient(140deg, #133a52, #0a1b30);
    color: #A8E9F2;
}
.vd.vd--aurora .site-vorstellung-titel {
    text-shadow: 0 0 30px rgba(126, 231, 240, .45);
    letter-spacing: .01em;
}
.vd.vd--aurora .site-vorstellung-kurz {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #D5E4EC;
}
.vd.vd--aurora .site-knopf,
.vd.vd--aurora .shop-absenden {
    border-radius: 999px;
}

/* =========================================================================
   Design 3 — EDITORIAL („Magazin-Artikel"): HELL. Papierweiß, große schwarze
   Überschrift, türkise Deckzeile, klare Linienführung, viel Weißraum.
   ========================================================================= */

body.vd--editorial {
    background: #F7F4ED;
    color: #1B1B1B;
    --site-text: #1B1B1B;
    --site-text-hell: #6B6558;
    --site-flaeche: #FFFDF8;
    --site-flaeche-2: #F1EDE2;
    --site-rahmen: #DCD5C6;
    --site-akzent: #0FAFC0;
    --site-akzent-hell: #0C8E9C;
    --site-akzent-dunkel: #0C8E9C;
}
/* Kopf & Fuß hell nachziehen (Layout kommt dunkel aus site-klassisch.css) */
body.vd--editorial .site-kopf {
    background: rgba(247, 244, 237, .92);
    border-bottom: 2px solid #1B1B1B;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.vd--editorial .site-marke,
body.vd--editorial .site-netzlink { color: #1B1B1B; }
body.vd--editorial .site-netzlink:hover { color: #0C8E9C; }
body.vd--editorial .site-loginknopf {
    background: #1B1B1B;
    color: #F7F4ED;
    border-color: #1B1B1B;
}
body.vd--editorial .site-loginknopf:hover { background: #0FAFC0; border-color: #0FAFC0; color: #fff; }
body.vd--editorial .site-fuss { background: transparent; border-top: 2px solid #1B1B1B; }
body.vd--editorial .site-fuss a, body.vd--editorial .site-fuss-marke { color: #6B6558; }

/* Karte auflösen — der Artikel liegt direkt auf dem Papier */
.vd.vd--editorial .site-karte {
    max-width: 820px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 24px 20px 40px;
}
/* Türkise Deckzeile über dem Kopf — das Magazin-„Ressort" */
.vd.vd--editorial .site-vorstellung::before {
    content: "Netzwerk · Vorstellung";
    display: block;
    margin-bottom: 22px;
    font: 700 .78rem/1 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: #0C8E9C;
}
.vd.vd--editorial .site-vorstellung-kopf {
    display: block;
    border-bottom: 1px solid #DCD5C6;
    padding-bottom: 26px;
    margin-bottom: 26px;
}
.vd.vd--editorial .site-vorstellung-foto,
.vd.vd--editorial .site-vorstellung-logo,
.vd.vd--editorial .site-vorstellung-platzhalter {
    float: right;
    margin: 0 0 16px 24px;
    border-radius: 0;
    width: 132px; height: 132px;
    outline: 1px solid #1B1B1B;
    outline-offset: 8px;
    box-shadow: 12px 12px 0 rgba(15, 175, 192, .22);
}
.vd.vd--editorial .site-vorstellung-logo { object-fit: contain; background: #FFFDF8; padding: 10px; width: auto; max-width: 200px; }
.vd.vd--editorial .site-vorstellung-platzhalter {
    display: flex;
    background: #1B1B1B;
    color: #F7F4ED;
    font-size: 3rem;
}
.vd.vd--editorial .site-vorstellung-titel {
    font-size: clamp(2rem, 5.5vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #1B1B1B;
}
.vd.vd--editorial .site-vorstellung-titel::after {
    content: "";
    display: block;
    width: 72px; height: 5px;
    margin-top: 16px;
    background: #0FAFC0;
}
.vd.vd--editorial .site-vorstellung-unter {
    font: 600 1rem/1.4 'Montserrat', Arial, Helvetica, sans-serif;
    color: #6B6558;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vd.vd--editorial .site-vorstellung-kurz {
    font-size: 1.22rem;
    line-height: 1.6;
    color: #33302A;
}
.vd.vd--editorial .site-vorstellung-lang { color: #33302A; line-height: 1.75; }
.vd.vd--editorial .site-vorstellung-lang a { color: #0C8E9C; }
.vd.vd--editorial .neural-feld {
    background: #FFFDF8;
    border: 1px solid #C9C2B2;
    color: #1B1B1B;
    border-radius: 0;
}
.vd.vd--editorial .neural-feld:focus { border-color: #0FAFC0; }
.vd.vd--editorial .site-knopf,
.vd.vd--editorial .shop-absenden {
    background: #1B1B1B;
    color: #F7F4ED;
    border: 0;
    border-radius: 0;
}
.vd.vd--editorial .site-knopf:hover,
.vd.vd--editorial .shop-absenden:hover { background: #0FAFC0; color: #fff; }
.vd.vd--editorial .site-hinweis { color: #6B6558; }
.vd.vd--editorial .vd-vorschau { color: #1B1B1B; border-color: #0FAFC0; }

/* =========================================================================
   Design 4 — MONOLITH („Statement"): fast schwarz, Versal-Typo, harte
   türkise Konturen, keinerlei Rundungen, Versatz-Schatten.
   ========================================================================= */

body.vd--monolith {
    background:
        repeating-linear-gradient(90deg, rgba(126, 231, 240, .045) 0 1px, transparent 1px 140px),
        #07090B;
}
.vd.vd--monolith .site-karte {
    max-width: 820px;
    border: 2px solid #1FC6D5;
    border-radius: 0;
    background: #0A0D10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 14px 14px 0 rgba(31, 198, 213, .16);
}
.vd.vd--monolith .site-vorstellung-kopf {
    border-bottom: 2px solid #1FC6D5;
    padding-bottom: 22px;
    margin-bottom: 22px;
}
.vd.vd--monolith .site-vorstellung-foto,
.vd.vd--monolith .site-vorstellung-platzhalter,
.vd.vd--monolith .site-vorstellung-logo {
    border-radius: 0;
    border: 2px solid #1FC6D5;
}
.vd.vd--monolith .site-vorstellung-logo { background: #EAF3F6; }
.vd.vd--monolith .site-vorstellung-platzhalter { background: #1FC6D5; color: #07090B; }
.vd.vd--monolith .site-vorstellung-titel {
    text-transform: uppercase;
    font-size: clamp(1.7rem, 6vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: .05em;
}
.vd.vd--monolith .site-vorstellung-unter {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .82rem;
    color: #1FC6D5;
}
.vd.vd--monolith .site-vorstellung-unter::before { content: "— "; }
.vd.vd--monolith .site-vorstellung-kurz {
    font-size: 1.1rem;
    border: 2px solid rgba(31, 198, 213, .4);
    padding: 14px 16px;
}
.vd.vd--monolith .neural-feld { border-radius: 0; border: 2px solid rgba(31, 198, 213, .45); background: #07090B; }
.vd.vd--monolith .neural-feld:focus { border-color: #1FC6D5; }
.vd.vd--monolith .site-knopf,
.vd.vd--monolith .shop-absenden {
    border-radius: 0;
    border: 2px solid #1FC6D5;
    background: transparent;
    color: #1FC6D5;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    transition: background .15s, color .15s;
}
.vd.vd--monolith .site-knopf:hover,
.vd.vd--monolith .shop-absenden:hover { background: #1FC6D5; color: #07090B; }

/* =========================================================================
   Design 5 — BLUEPRINT („Konstruktionszeichnung"): Petrol mit
   Millimeter-Raster, gestrichelte Rahmen, Eckmarken, technische Labels.
   ========================================================================= */

body.vd--blueprint {
    background:
        linear-gradient(rgba(126, 231, 240, .05) 1px, transparent 1px) 0 0 / 100% 8px,
        linear-gradient(90deg, rgba(126, 231, 240, .05) 1px, transparent 1px) 0 0 / 8px 100%,
        linear-gradient(rgba(126, 231, 240, .11) 1px, transparent 1px) 0 0 / 100% 40px,
        linear-gradient(90deg, rgba(126, 231, 240, .11) 1px, transparent 1px) 0 0 / 40px 100%,
        #0A2530;
}
.vd.vd--blueprint .site-karte {
    position: relative;
    border: 1px dashed rgba(126, 231, 240, .55);
    border-radius: 4px;
    background: rgba(7, 27, 36, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
}
/* Eckmarken wie auf einem Plan */
.vd.vd--blueprint .site-karte::before,
.vd.vd--blueprint .site-karte::after {
    content: "";
    position: absolute;
    width: 26px; height: 26px;
    pointer-events: none;
}
.vd.vd--blueprint .site-karte::before {
    top: -7px; left: -7px;
    border-top: 3px solid #1FC6D5;
    border-left: 3px solid #1FC6D5;
}
.vd.vd--blueprint .site-karte::after {
    bottom: -7px; right: -7px;
    border-bottom: 3px solid #1FC6D5;
    border-right: 3px solid #1FC6D5;
}
.vd.vd--blueprint .site-vorstellung::before {
    content: "Profil · Netzwerkzeichnung Nr. 01";
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 12px;
    border: 1px dashed rgba(126, 231, 240, .6);
    font: 600 .72rem/1 'Open Sans', Arial, Helvetica, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #7EE7F0;
}
.vd.vd--blueprint .site-vorstellung-foto,
.vd.vd--blueprint .site-vorstellung-platzhalter,
.vd.vd--blueprint .site-vorstellung-logo {
    border-radius: 4px;
    border: 1px dashed rgba(126, 231, 240, .7);
    padding: 5px;
    background: rgba(7, 27, 36, .6);
}
.vd.vd--blueprint .site-vorstellung-logo { background: rgba(234, 243, 246, .94); }
.vd.vd--blueprint .site-vorstellung-platzhalter { color: #7EE7F0; }
.vd.vd--blueprint .site-vorstellung-titel {
    letter-spacing: .02em;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: rgba(126, 231, 240, .5);
    text-underline-offset: 10px;
}
.vd.vd--blueprint .site-vorstellung-unter {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .8rem;
    color: #8FD9E2;
}
.vd.vd--blueprint .site-vorstellung-kurz {
    border: 1px dashed rgba(126, 231, 240, .45);
    padding: 14px 16px;
    border-radius: 4px;
}
.vd.vd--blueprint .neural-feld { border: 1px dashed rgba(126, 231, 240, .5); border-radius: 4px; }
.vd.vd--blueprint .neural-feld:focus { border-style: solid; border-color: #1FC6D5; }
.vd.vd--blueprint .site-knopf,
.vd.vd--blueprint .shop-absenden { border-radius: 4px; }

/* =========================================================================
   Netzwerkliste („Team") — Karten-Grid mit Portraits, Glow und Staffelung.
   Gleiches Markup auf Klassik-Seiten UND im Neural-Fenster (beide dunkel).
   ========================================================================= */

/* Kompaktes Raster: ~30 Mitglieder sollen auf einen Blick erfassbar sein.
   Deshalb schmale Spalten (ab 148 px), kleine Portraits und geklammerter
   Kurztext — die Reihenfolge liefert der Server bei jedem Aufruf neu
   durchmischt (UserVorstellungRepo::listeOeffentliche). */
.vd-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
    gap: 10px;
    margin: 14px 0;
}
@keyframes vdTeamIn {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.vd-team-karte {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(126, 231, 240, .22);
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(23, 34, 45, .85), rgba(10, 15, 21, .9));
    color: inherit;
    text-decoration: none;
    animation: vdTeamIn .55s cubic-bezier(.2, .7, .2, 1) both;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.vd-team-karte:nth-child(2) { animation-delay: .07s; }
.vd-team-karte:nth-child(3) { animation-delay: .14s; }
.vd-team-karte:nth-child(4) { animation-delay: .21s; }
.vd-team-karte:nth-child(5) { animation-delay: .28s; }
.vd-team-karte:nth-child(6) { animation-delay: .35s; }
.vd-team-karte:nth-child(n+7) { animation-delay: .42s; }
.vd-team-karte::after {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1FC6D5, transparent);
    opacity: 0;
    transition: opacity .25s;
}
.vd-team-karte:hover,
.vd-team-karte:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(126, 231, 240, .55);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .8), 0 0 34px -6px rgba(31, 198, 213, .35);
    outline: none;
}
.vd-team-karte:hover::after,
.vd-team-karte:focus-visible::after { opacity: 1; }

.vd-team-bild {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(80% 80% at 50% 20%, rgba(31, 198, 213, .16), rgba(10, 15, 21, .4));
}
.vd-team-bild img.vd-team-foto {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.vd-team-karte:hover img.vd-team-foto { transform: scale(1.05); }
.vd-team-bild img.vd-team-logo {
    max-width: 84%;
    max-height: 74%;
    object-fit: contain;
    background: rgba(234, 243, 246, .96);
    border-radius: 7px;
    padding: 5px 8px;
}
.vd-team-initial {
    width: 54px; height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #0C8E9C, #1FC6D5, #7EE7F0, #0C8E9C);
    color: #06232A;
    font: 700 1.5rem/1 'Montserrat', Arial, Helvetica, sans-serif;
    box-shadow: 0 0 0 3px rgba(126, 231, 240, .18), 0 8px 20px -8px rgba(0, 0, 0, .7);
}
.vd-team-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px 10px;
    flex: 1;
}
.vd-team-name {
    margin: 0;
    font: 700 .88rem/1.25 'Montserrat', Arial, Helvetica, sans-serif;
    color: var(--site-text, #EAF3F6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vd-team-titel {
    margin: 0;
    font: 700 .62rem/1.3 'Montserrat', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7EE7F0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vd-team-kurz {
    margin: 1px 0 0;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--site-text-hell, #8FA6B0);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vd-team-mehr {
    margin-top: auto;
    padding-top: 7px;
    font: 700 .7rem/1 'Montserrat', Arial, Helvetica, sans-serif;
    color: #1FC6D5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vd-team-mehr::after {
    content: "\2192";
    transition: transform .25s;
}
.vd-team-karte:hover .vd-team-mehr::after { transform: translateX(5px); }

/* Editorial-Kontext: falls die Liste je auf heller Fläche landet */
.vd.vd--editorial .vd-team-karte {
    background: #FFFDF8;
    border-color: #DCD5C6;
}
.vd.vd--editorial .vd-team-name { color: #1B1B1B; }
.vd.vd--editorial .vd-team-kurz { color: #6B6558; }

/* =========================================================================
   Design-Wähler im Profil (Karteikarte „Vorstellseite")
   Radiokarten mit reinen CSS-Miniaturen — jede Miniatur zitiert ihr Design.
   ========================================================================= */

.vdw-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: 12px;
    margin: 10px 0 6px;
}
.vdw-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--aam-rahmen, #d5dde2);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.vdw-karte:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(15, 175, 192, .45); }
.vdw-karte input { position: absolute; opacity: 0; pointer-events: none; }
.vdw-karte:has(input:checked) {
    border-color: #0FAFC0;
    box-shadow: 0 0 0 3px rgba(15, 175, 192, .25);
}
.vdw-karte:has(input:focus-visible) { outline: 3px solid rgba(15, 175, 192, .5); outline-offset: 2px; }
.vdw-name { font: 700 .95rem/1.3 'Montserrat', Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 8px; }
.vdw-karte:has(input:checked) .vdw-name::after {
    content: "\2713";
    color: #0FAFC0;
    font-size: 1rem;
}
.vdw-beschr { font-size: .82rem; line-height: 1.45; opacity: .85; margin: 0; }
.vdw-vorschau-link { font-size: .82rem; font-weight: 700; color: #0C8E9C; align-self: flex-start; }

/* Miniaturen: 3 Bausteine (a = Avatar, b = Titelbalken, c = Textzeilen) */
.vdw-mini {
    position: relative;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .12);
}
.vdw-mini i { position: absolute; display: block; }
.vdw-mini .a { width: 22px; height: 22px; border-radius: 50%; left: 12px; top: 14px; }
.vdw-mini .b { height: 8px; border-radius: 3px; left: 44px; top: 16px; right: 18px; }
.vdw-mini .c { height: 5px; border-radius: 2px; left: 44px; top: 30px; right: 34px; opacity: .55; }
.vdw-mini .d { height: 5px; border-radius: 2px; left: 12px; top: 52px; right: 18px; opacity: .4; }

.vdw-mini--neural { background: radial-gradient(rgba(126,231,240,.25) 1px, transparent 1.3px) 0 0 / 12px 12px, #0C1016; }
.vdw-mini--neural::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; background: linear-gradient(90deg, transparent, #1FC6D5, transparent); }
.vdw-mini--neural .a { background: #1FC6D5; box-shadow: 0 0 10px #1FC6D5; }
.vdw-mini--neural .b, .vdw-mini--neural .c, .vdw-mini--neural .d { background: #EAF3F6; }

.vdw-mini--aurora { background: radial-gradient(60% 90% at 20% 0%, rgba(31,198,213,.5), transparent 70%), radial-gradient(60% 90% at 90% 100%, rgba(90,160,232,.45), transparent 70%), #060D18; }
.vdw-mini--aurora .a { background: rgba(255,255,255,.85); }
.vdw-mini--aurora .b, .vdw-mini--aurora .c, .vdw-mini--aurora .d { background: rgba(255,255,255,.8); border-radius: 999px; }

.vdw-mini--editorial { background: #F7F4ED; }
.vdw-mini--editorial .a { border-radius: 0; background: #1B1B1B; left: auto; right: 12px; }
.vdw-mini--editorial .b { background: #1B1B1B; left: 12px; right: 48px; height: 10px; }
.vdw-mini--editorial .c { background: #0FAFC0; left: 12px; right: 70%; opacity: 1; height: 4px; top: 34px; }
.vdw-mini--editorial .d { background: #6B6558; }

.vdw-mini--monolith { background: #07090B; border: 0; box-shadow: inset 0 0 0 2px #1FC6D5; }
.vdw-mini--monolith .a { border-radius: 0; background: #1FC6D5; }
.vdw-mini--monolith .b, .vdw-mini--monolith .c { background: #EAF3F6; border-radius: 0; }
.vdw-mini--monolith .d { background: #1FC6D5; border-radius: 0; }

.vdw-mini--blueprint { background: linear-gradient(rgba(126,231,240,.14) 1px, transparent 1px) 0 0 / 100% 10px, linear-gradient(90deg, rgba(126,231,240,.14) 1px, transparent 1px) 0 0 / 10px 100%, #0A2530; }
.vdw-mini--blueprint .a { border-radius: 2px; background: transparent; border: 1px dashed #7EE7F0; }
.vdw-mini--blueprint .b, .vdw-mini--blueprint .c, .vdw-mini--blueprint .d { background: #7EE7F0; }

/* Eingefügte Bilder/Screenshots im langen Text (alle Designs): nie breiter
   als die Spalte, weiche Ecken, eigener Absatz-Abstand. Ohne diese Regel
   sprengt ein großer Screenshot das Layout. */
.vd .site-vorstellung-lang img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px 0;
    border-radius: 10px;
}
.vd.vd--neural .site-vorstellung-lang img,
.vd.vd--aurora .site-vorstellung-lang img,
.vd.vd--blueprint .site-vorstellung-lang img {
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(126, 231, 240, .22);
}
.vd.vd--editorial .site-vorstellung-lang img {
    border-radius: 0;
    box-shadow: 10px 10px 0 rgba(15, 175, 192, .18);
}
.vd.vd--monolith .site-vorstellung-lang img {
    border-radius: 0;
    border: 2px solid rgba(31, 198, 213, .55);
}

/* =========================================================================
   Vorstellungs-DETAIL im Neural-Fenster (öffentliche 3D-Startseite).
   Dort lädt nur site-neural.css + diese Datei — die Basis-Styles der
   .site-vorstellung-*-Klassen aus site.css fehlen. Ohne diese Regeln
   rendert das Logo in nativer Größe (füllt das ganze Fenster) und das
   Honeypot-Feld des Kontaktformulars wäre sichtbar. Scope: body.neural.
   ========================================================================= */

body.neural .site-vorstellung-kopf {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin: 2px 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(126, 231, 240, .2);
}
body.neural .site-vorstellung-foto,
body.neural .site-vorstellung-platzhalter {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    box-shadow: 0 0 0 3px rgba(31, 198, 213, .45), 0 0 26px rgba(31, 198, 213, .3);
}
body.neural .site-vorstellung-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 25%, #17414a, #0C1016 75%);
    color: #7EE7F0;
    font: 700 2rem/1 'Montserrat', Arial, Helvetica, sans-serif;
}
body.neural .site-vorstellung-logo {
    width: auto;
    max-width: min(100%, 230px);
    height: 92px;
    object-fit: contain;
    flex: none;
    border-radius: 12px;
    background: rgba(234, 243, 246, .96);
    padding: 8px 12px;
    box-shadow: 0 0 0 1px rgba(126, 231, 240, .35), 0 0 24px rgba(31, 198, 213, .22);
}
body.neural .site-vorstellung-titel {
    margin: 0;
    font: 700 1.4rem/1.25 'Montserrat', Arial, Helvetica, sans-serif;
    background: linear-gradient(92deg, #EAF3F6 20%, #7EE7F0 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.neural .site-vorstellung-unter {
    margin: 6px 0 0;
    color: #8FA6B0;
    font-size: .92rem;
}
body.neural .site-vorstellung-kurz {
    border-left: 3px solid rgba(31, 198, 213, .7);
    padding-left: 14px;
    margin: 0 0 14px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #C7D6DD;
}
body.neural .site-vorstellung-lang {
    line-height: 1.7;
    color: #B9C9D2;
}
body.neural .site-vorstellung-lang a { color: #7EE7F0; }
body.neural .site-vorstellung-lang img { max-width: 100%; height: auto; border-radius: 10px; }
body.neural .site-vorstellung-lang h2,
body.neural .site-vorstellung-lang h3,
body.neural .site-vorstellung-lang h4 {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    color: #EAF3F6;
    margin: 18px 0 8px;
}

/* Kontaktformular im Fenster */
body.neural .site-vorstellung-kontakt {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(126, 231, 240, .2);
}
body.neural .site-vorstellung-kontakt h2 {
    margin: 0 0 8px;
    font: 700 1.05rem/1.3 'Montserrat', Arial, Helvetica, sans-serif;
    color: #EAF3F6;
}
body.neural .site-kontakt-formular { display: grid; gap: 12px; margin-top: 12px; }
body.neural .site-kontakt-formular label {
    display: grid;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: #8FD9E2;
}
body.neural .site-kontakt-formular .neural-feld { width: 100%; box-sizing: border-box; }
body.neural .site-kontakt-formular .site-knopf { justify-self: start; }
/* Spam-Schutz-Feld unsichtbar halten (Basis-Regel aus site.css fehlt hier) */
body.neural .site-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
body.neural .site-hinweis { color: #8FA6B0; font-size: .92rem; }
body.neural .site-ok { color: #6FDB8F; }
body.neural .site-fehler { color: #FF7A85; }

/* =========================================================================
   Bewegung reduzieren + Responsive
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    body.vd .site-vorstellung > *,
    body.vd .site-vorstellung-kontakt,
    .vd-team-karte { animation: none; }
    body.vd--aurora::before, body.vd--aurora::after { animation: none; }
    body.vd--neural .site-vorstellung-foto,
    body.vd--neural .site-vorstellung-platzhalter { animation: none; }
    .vd-team-karte, .vd-team-bild img.vd-team-foto, .vdw-karte { transition: none; }
}

@media (max-width: 640px) {
    body.vd--editorial .site-vorstellung-foto,
    body.vd--editorial .site-vorstellung-logo,
    body.vd--editorial .site-vorstellung-platzhalter {
        float: none;
        margin: 0 0 18px;
    }
    body.vd--monolith .site-karte { box-shadow: 8px 8px 0 rgba(31, 198, 213, .16); }
    .vd-vorschau { margin: 12px 12px -8px; }
}

/* =========================================================================
   EINGEBETTETER Kontext: Vorstellung im Fenster der Neuronen-Startseite.
   Dort gibt es keinen Seitenhintergrund und keine seitenfüllenden Overlays —
   das Design zeigt sich als eigene Fläche innerhalb des Glas-Fensters.
   Element-Regeln (Titel, Kopf, Bilder, Kontakt) greifen bereits über
   `.vd.vd--<design>` und gelten hier automatisch mit.
   ========================================================================= */

.vd-eingebettet {
    padding: 16px 18px;
    border-radius: 14px;
    margin: -4px 0 0;
}

/* Neural: feines Punktnetz + glühende Oberkante als lokale Fläche. */
.vd-eingebettet.vd--neural {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(rgba(126, 231, 240, .10) 1px, transparent 1.3px) 0 0 / 22px 22px,
        linear-gradient(160deg, rgba(23, 34, 45, .55), rgba(10, 15, 21, .35));
    border: 1px solid rgba(126, 231, 240, .2);
}
.vd-eingebettet.vd--neural::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1FC6D5 40%, #7EE7F0 50%, #1FC6D5 60%, transparent);
    filter: drop-shadow(0 0 7px rgba(31, 198, 213, .75));
}

/* Aurora: Lichtschleier als lokaler Verlauf (statt fixed Overlays). */
.vd-eingebettet.vd--aurora {
    background:
        radial-gradient(70% 90% at 12% 0%, rgba(31, 198, 213, .26), transparent 62%),
        radial-gradient(70% 90% at 92% 100%, rgba(90, 160, 232, .24), transparent 62%),
        rgba(6, 13, 24, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
}

/* Editorial: helle Papierfläche mitten im dunklen Fenster. */
.vd-eingebettet.vd--editorial {
    background: #F7F4ED;
    color: #1B1B1B;
    --site-text: #1B1B1B;
    --site-text-hell: #6B6558;
    --site-flaeche: #FFFDF8;
    --site-rahmen: #DCD5C6;
    border-radius: 4px;
    border-top: 3px solid #1B1B1B;
    padding: 20px 22px;
}
.vd-eingebettet.vd--editorial .site-vorstellung-lang,
.vd-eingebettet.vd--editorial .site-hinweis { color: #33302A; }
.vd-eingebettet.vd--editorial .site-vorstellung-kontakt { border-top-color: #DCD5C6; }
.vd-eingebettet.vd--editorial .site-vorstellung-kontakt h2 { color: #1B1B1B; }
.vd-eingebettet.vd--editorial .site-kontakt-formular label { color: #6B6558; }

/* Monolith: harte türkise Kante, keine Rundung. */
.vd-eingebettet.vd--monolith {
    background: #0A0D10;
    border: 2px solid #1FC6D5;
    border-radius: 0;
    box-shadow: 8px 8px 0 rgba(31, 198, 213, .14);
}

/* Blueprint: Millimeter-Raster + gestrichelte Kante mit Eckmarken. */
.vd-eingebettet.vd--blueprint {
    position: relative;
    background:
        linear-gradient(rgba(126, 231, 240, .07) 1px, transparent 1px) 0 0 / 100% 8px,
        linear-gradient(90deg, rgba(126, 231, 240, .07) 1px, transparent 1px) 0 0 / 8px 100%,
        rgba(10, 37, 48, .6);
    border: 1px dashed rgba(126, 231, 240, .5);
    border-radius: 4px;
}
.vd-eingebettet.vd--blueprint::before,
.vd-eingebettet.vd--blueprint::after {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    pointer-events: none;
}
.vd-eingebettet.vd--blueprint::before {
    top: -5px; left: -5px;
    border-top: 3px solid #1FC6D5;
    border-left: 3px solid #1FC6D5;
}
.vd-eingebettet.vd--blueprint::after {
    bottom: -5px; right: -5px;
    border-bottom: 3px solid #1FC6D5;
    border-right: 3px solid #1FC6D5;
}

@media (max-width: 640px) {
    .vd-eingebettet { padding: 12px 12px; }
    .vd-eingebettet.vd--monolith { box-shadow: 5px 5px 0 rgba(31, 198, 213, .14); }
}