/* =========================================================================
   VORKS RECORDS — Verfeinerung der öffentlichen Seiten
   =========================================================================
   Diese Datei wird NACH label_new.css geladen und überschreibt nur das
   Aussehen. Sie fügt keine neuen Klassen hinzu, von denen das Markup
   abhängt — entfernt man sie wieder, sieht alles aus wie vorher und
   funktioniert weiterhin.

   Wirkt nur innerhalb von body.site, damit das Dashboard unberührt bleibt.
   ========================================================================= */

body.site {
    /* Feinere Abstufungen als das bisherige Flächen-Schwarz */
    --vp-surface:      #070c1a;
    --vp-surface-2:    #0b1223;
    --vp-line:         rgba(148, 163, 184, .13);
    --vp-line-strong:  rgba(148, 163, 184, .26);
    --vp-glow:         rgba(225, 29, 72, .16);
    --vp-ease:         cubic-bezier(.22, .61, .36, 1);

    /* Ein durchgehender, sehr dunkler Verlauf statt harter Blockfarben */
    background:
        radial-gradient(1100px 620px at 12% -8%,  rgba(225, 29, 72, .085), transparent 60%),
        radial-gradient(900px  520px at 88% 4%,   rgba(99, 102, 241, .07), transparent 62%),
        linear-gradient(180deg, #050914 0%, #020617 42%, #01040d 100%);
    background-attachment: fixed;
}

/* ─────────────────────────────────────────────────────────────
   Typografie — der größte Hebel für einen hochwertigen Eindruck
   ───────────────────────────────────────────────────────────── */

body.site {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.site .hero-title,
body.site .section-title {
    letter-spacing: -.028em;
    line-height: 1.04;
    text-wrap: balance;
}

body.site .hero-title {
    font-weight: 800;
    color: #fff;
}

/* Der Farbverlauf im Titel nur dort, wo der Browser ihn wirklich kann.
   Ohne diese Abfrage wäre der Text in älteren Browsern unsichtbar. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    body.site .hero-title {
        background: linear-gradient(175deg, #fff 22%, #c7cddb 96%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

body.site .hero-kicker,
body.site .section-kicker {
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent-strong);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* Feiner Strich vor dem Kicker — ruhiger als ein Punkt oder Icon */
body.site .hero-kicker::before,
body.site .section-kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
    flex-shrink: 0;
}

body.site .hero-subtitle,
body.site .section-subtitle {
    line-height: 1.65;
    max-width: 62ch;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */

body.site .hero {
    position: relative;
    isolation: isolate;
}

body.site .hero-bg {
    filter: saturate(1.06) contrast(1.04);
    transform: scale(1.03);
    transition: transform 1.6s var(--vp-ease);
}

body.site .hero:hover .hero-bg { transform: scale(1.055); }

body.site .hero-overlay {
    background:
        linear-gradient(180deg, rgba(2, 6, 23, .32) 0%, rgba(2, 6, 23, .76) 58%, #020617 100%),
        radial-gradient(760px 420px at 22% 38%, rgba(225, 29, 72, .13), transparent 68%);
}

/* Weicher Übergang vom Hero in den nächsten Abschnitt */
body.site .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--bg, #020617));
    z-index: 2;
}

body.site .hero--subpage { min-height: auto; }
body.site .hero--subpage::after { height: 80px; }

/* ─────────────────────────────────────────────────────────────
   Abschnitte
   ───────────────────────────────────────────────────────────── */

body.site .section {
    position: relative;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* Die abwechselnden Radialverläufe wirkten fleckig — ein durchgehender
   Untergrund mit einer Haarlinie dazwischen ist ruhiger. */
body.site .section:nth-of-type(odd),
body.site .section:nth-of-type(even) {
    background: transparent;
}

body.site .section + .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, 92%);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vp-line-strong) 22%,
                                var(--vp-line-strong) 78%, transparent);
}

body.site .section-header { margin-bottom: 1.8rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }

/* ─────────────────────────────────────────────────────────────
   Karten
   ───────────────────────────────────────────────────────────── */

body.site .card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%),
        var(--vp-surface);
    border: 1px solid var(--vp-line);
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset,
                0 18px 44px rgba(0, 0, 0, .42);
    overflow: hidden;
    transition: transform .34s var(--vp-ease),
                border-color .34s var(--vp-ease),
                box-shadow .34s var(--vp-ease);
}

body.site a.card:hover,
body.site .card:hover {
    transform: translateY(-3px);
    border-color: rgba(225, 29, 72, .32);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset,
                0 26px 58px rgba(0, 0, 0, .55),
                0 0 0 1px var(--vp-glow);
}

body.site .card-image {
    position: relative;
    overflow: hidden;
    background: var(--vp-surface-2);
}

/* Das Bild füllt die Kartenfläche vollständig aus. Vorher wurde es nur
   auf Breite gezogen und unten hart abgeschnitten — bei Porträts traf das
   oft den Kopf. Mit fester Höhe greift object-position, und damit lässt
   sich der Ausschnitt je Artist im Adminbereich einstellen. */
body.site .card-image {
    height: 220px;
    max-height: 220px;
}

body.site .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;   /* Voreinstellung: oben, wo der Kopf sitzt */
    transition: transform .6s var(--vp-ease);
}

/* Eine je Artist gesetzte Position gewinnt (steht inline am Bild) */

/* Kein Hover-Zoom mehr: der Grundzoom steht inline am Bild und würde
   sonst beim Überfahren verlorengehen. Stattdessen hebt sich die Karte. */
body.site .card-image img { will-change: transform; }

body.site .card-title {
    letter-spacing: -.012em;
    line-height: 1.28;
}

body.site .card-text {
    color: var(--text-muted);
    line-height: 1.62;
}

body.site .card-meta {
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
}

/* ─────────────────────────────────────────────────────────────
   Schaltflächen
   ───────────────────────────────────────────────────────────── */

body.site .btn {
    position: relative;
    isolation: isolate;
    border-radius: 11px;
    font-weight: 600;
    letter-spacing: .005em;
    transition: transform .2s var(--vp-ease),
                box-shadow .28s var(--vp-ease),
                background .28s var(--vp-ease),
                border-color .28s var(--vp-ease);
}

body.site .btn:active { transform: translateY(1px); }

body.site .btn-primary {
    background: linear-gradient(135deg, #f0385f 0%, #e11d48 48%, #be123c 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset,
                0 10px 26px rgba(225, 29, 72, .3);
}

body.site .btn-primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset,
                0 16px 36px rgba(225, 29, 72, .42);
    transform: translateY(-1px);
}

body.site .btn-ghost {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--vp-line-strong);
    backdrop-filter: blur(8px);
}

body.site .btn-ghost:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(225, 29, 72, .38);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   Kopfzeile
   ───────────────────────────────────────────────────────────── */

body.site .site-header {
    background: rgba(3, 7, 18, .72);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--vp-line);
    transition: background .3s var(--vp-ease), border-color .3s var(--vp-ease);
}

/* Abstand zwischen den Menüpunkten absichern — ohne Flexbox kleben
   die Einträge sonst aneinander. */

body.site .main-nav a {
    position: relative;
    padding-bottom: 4px;
    transition: color .22s var(--vp-ease);
}

/* Unterstrich wächst aus der Mitte — dezenter als ein Farbwechsel */
body.site .main-nav a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 1.5px;
    background: var(--accent);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .26s var(--vp-ease);
}

body.site .main-nav a:hover::after,
body.site .main-nav a.is-active::after { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   Fußzeile
   ───────────────────────────────────────────────────────────── */

body.site .site-footer {
    position: relative;
    border-top: 1px solid var(--vp-line);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .32));
}

body.site .footer-links a {
    transition: color .22s var(--vp-ease);
}

body.site .footer-links a:hover { color: var(--accent-strong); }

/* ─────────────────────────────────────────────────────────────
   Formulare (Kontakt, Newsletter)
   ───────────────────────────────────────────────────────────── */

body.site input[type="text"],
body.site input[type="email"],
body.site input[type="search"],
body.site input[type="url"],
body.site input[type="tel"],
body.site input[type="password"],
body.site textarea,
body.site select {
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--vp-line-strong);
    border-radius: 11px;
    color: var(--text);
    transition: border-color .24s var(--vp-ease), box-shadow .24s var(--vp-ease),
                background .24s var(--vp-ease);
}

body.site input:focus,
body.site textarea:focus,
body.site select:focus {
    outline: none;
    border-color: rgba(225, 29, 72, .55);
    background: rgba(0, 0, 0, .42);
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .13);
}

body.site input::placeholder,
body.site textarea::placeholder { color: #4b5563; }

body.site label { letter-spacing: .01em; }

/* ─────────────────────────────────────────────────────────────
   Textlinks
   ───────────────────────────────────────────────────────────── */

body.site .text-link {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(var(--accent-strong), var(--accent-strong));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .28s var(--vp-ease), color .22s var(--vp-ease);
}

body.site .text-link:hover {
    background-size: 100% 1px;
    color: var(--accent-strong);
}

/* ─────────────────────────────────────────────────────────────
   Sprachumschalter
   ───────────────────────────────────────────────────────────── */

body.site .lang-link {
    border-radius: 8px;
    transition: background .22s var(--vp-ease), color .22s var(--vp-ease);
}

body.site .lang-link.is-active {
    background: rgba(225, 29, 72, .16);
    color: var(--accent-strong);
}

/* ─────────────────────────────────────────────────────────────
   Rechtstexte lesbarer machen
   ───────────────────────────────────────────────────────────── */

body.site .legal-content,
body.site .legal-body {
    max-width: 78ch;
    line-height: 1.78;
}

body.site .legal-content h2,
body.site .legal-body h2 {
    margin-top: 2.4rem;
    letter-spacing: -.015em;
}

/* ─────────────────────────────────────────────────────────────
   Bildlaufleiste
   ───────────────────────────────────────────────────────────── */

body.site ::-webkit-scrollbar { width: 11px; height: 11px; }
body.site ::-webkit-scrollbar-track { background: #020617; }
body.site ::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 6px;
    border: 2px solid #020617;
}
body.site ::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ─────────────────────────────────────────────────────────────
   Auswahlfarbe
   ───────────────────────────────────────────────────────────── */

body.site ::selection {
    background: rgba(225, 29, 72, .32);
    color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   Sanftes Einblenden beim Scrollen
   Ohne JavaScript, nur wo der Browser es unterstützt. Fällt sonst
   einfach weg — der Inhalt ist dann sofort sichtbar.
   ───────────────────────────────────────────────────────────── */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        body.site .section > .section-header,
        body.site .card {
            animation: vp-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }
    }
}

@keyframes vp-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
    body.site *,
    body.site *::before,
    body.site *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    body.site .hero-bg { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Tastaturbedienung sichtbar halten
   ───────────────────────────────────────────────────────────── */

body.site a:focus-visible,
body.site button:focus-visible,
body.site .btn:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────
   Kleine Bildschirme
   ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    body.site { background-attachment: scroll; }
    body.site .section { padding-left: 1.15rem; padding-right: 1.15rem; padding-inline: 1.15rem; }
    body.site .hero::after { height: 70px; }
    body.site .card:hover { transform: none; }
    body.site .hero-subtitle,
    body.site .section-subtitle { max-width: none; }
}

/* Drucken: alles Dekorative weg */
@media print {
    body.site { background: #fff !important; color: #000 !important; }
    body.site .hero-bg,
    body.site .hero-overlay,
    body.site .site-header,
    body.site .site-footer { display: none !important; }
    body.site .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}