/*
|--------------------------------------------------------------------------
| 2026-11-02
| Author: Claude
| Änderung (Referenzen R8, Runde B): gemeinsame Basis wie Startseite R12.
| Achse, Bänder, Abschluss, Textlink, Studien-Einleitung entfernt
| (jetzt vt-axis.css, vt-band.css, vt-textlink.css; Werte der Startseite).
| Hier bleiben Collage, Einleitungstext, Studien-Karten, „Was bleibt“.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-10-25
| Author: Claude
| Neuanlage (Referenzen R2), Variante C ([vt-referenzen]).
|
| Präfix vt-refs-* (die alte Seite nutzt vt-referenzen-* in
| vt-referenzen_old.css, nur auf [vt-referenzen-old] geladen).
| Achse und Bänder vorläufig seitenlokal wie in vt-start-seite.css;
| Auslagerung nach 01-foundation/vt-axis.css und gemeinsames Band-CSS
| folgt in einer eigenen Runde (dann für Start und Referenzen).
|
| Collage-Geometrie aus der alten Seite (R5–R8, im Browser getestet).
| Hover-Text: nur bei Maus (hover: hover), kein Link, kein Pointer
| (Leitfaden, Ausnahme Hover-Text in Collagen).
|--------------------------------------------------------------------------
*/


/* --------------------------------------------------------------
   Rahmen. R8 2026-11-02: Achse → 01-foundation/vt-axis.css
-------------------------------------------------------------- */

.vt-refs {
    --vt-refs-info-fs: 15px;          /* Hover-Text, nach Sichtprüfung anpassen */
    width: 100%;
}


/* --------------------------------------------------------------
   Banner-Collage (dunkel)
-------------------------------------------------------------- */

.vt-refs .vt-refs-banner {
    position: relative;
    width: 100%;
    padding: 68px 0 24px;
    background-color: #12233e;
}

.vt-refs .vt-refs-banner__scene {
    position: relative;
    height: clamp(320px, 31vw, 660px);
    overflow: hidden;
    perspective: 94vw;
    perspective-origin: 50% 10%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
                        linear-gradient(180deg, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
                        linear-gradient(180deg, #000 88%, transparent 100%);
            mask-composite: intersect;
}

.vt-refs .vt-refs-banner__plane {
    position: absolute;
    left: 50%;
    top: 1.6vw;
    width: 102vw;
    aspect-ratio: 1960 / 760;
    margin-left: -51vw;
    transform: rotateX(38deg);
    transform-origin: 50% 0;
}

.vt-refs .vt-refs-karte {
    position: absolute;
    overflow: hidden;
    transform: rotate(var(--vt-refs-rot, 0deg));
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
    transition: filter .25s ease;
}

.vt-refs .vt-refs-karte img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

/* Rangfolge: vt > aktuell > neu > alt-klar > alt */
.vt-refs .vt-refs-karte--alt      { filter: blur(2.2px) brightness(.42) saturate(.7); }
.vt-refs .vt-refs-karte--alt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(14, 30, 58, .35);
}
.vt-refs .vt-refs-karte--alt-klar { filter: blur(1px) brightness(.58) saturate(.8); }
.vt-refs .vt-refs-karte--neu      { filter: blur(.5px) brightness(.58) saturate(.8); }
.vt-refs .vt-refs-karte--aktuell  { filter: blur(.3px) brightness(.66) saturate(.85); }
.vt-refs .vt-refs-karte--vt       { outline: 2px solid rgba(94, 169, 255, .5); }

/* Hover-Text: für Screenreader immer vorhanden, sichtbar nur bei Hover.
   Oben auf der Karte: die Unterkante liegt oft im ausgeblendeten Bereich. */
.vt-refs .vt-refs-karte__info {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    padding: .7em 1em;
    background: rgba(11, 23, 48, .84);
    color: #ffffff;
    font-size: var(--vt-refs-info-fs);
    line-height: 1.35;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.vt-refs .vt-refs-karte__info strong {
    display: block;
    font-weight: 700;
}

.vt-refs .vt-refs-karte__info span {
    display: block;
    font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
    .vt-refs .vt-refs-karte--projekt { cursor: default; }
    .vt-refs .vt-refs-karte--projekt:hover {
        z-index: 5;
        filter: none;
    }
    .vt-refs .vt-refs-karte--projekt:hover .vt-refs-karte__info {
        opacity: 1;
    }
}

/* Tablet/Mobil: Ausschnitt um VisionThinks (Werte alte Seite R5) */
@media (max-width: 860px) {
    .vt-refs .vt-refs-banner { padding: 40px 0 16px; }
    .vt-refs .vt-refs-banner__scene {
        height: clamp(240px, 64vw, 520px);
        perspective: 170vw;
        -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
        -webkit-mask-composite: source-over;
                mask-composite: add;
    }
    .vt-refs .vt-refs-banner__plane {
        top: 3vw;
        width: 190vw;
        margin-left: -95vw;
        transform: rotateX(32deg);
    }
    .vt-refs .vt-refs-karte { box-shadow: 0 14px 28px rgba(0, 0, 0, .6); }
    .vt-refs .vt-refs-karte--alt { filter: blur(1.4px) brightness(.42) saturate(.7); }
}

@media (max-width: 600px) {
    .vt-refs .vt-refs-banner__scene { height: 86vw; perspective: 220vw; }
    .vt-refs .vt-refs-banner__plane { top: 2vw; width: 250vw; margin-left: -125vw; transform: rotateX(30deg); }
    .vt-refs .vt-refs-karte--alt { filter: blur(1px) brightness(.42) saturate(.7); }
}


/* R8 2026-11-02: Bänder → 02-layout/vt-band.css (.vt-band*) */


/* --------------------------------------------------------------
   Was bleibt: drei Spalten, Tablet/Handy untereinander
-------------------------------------------------------------- */

.vt-refs .vt-refs-punkte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 48px;
}

.vt-refs .vt-refs-punkt__title {
    margin: 0 0 12px;
    color: #0b1730;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.vt-refs .vt-refs-punkt__text {
    margin: 0;
    color: #34445e;
    font-size: 17px;
    line-height: 1.65;
}

@media (max-width: 1024px) {
    .vt-refs .vt-refs-punkte { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 720px; }
}


/* R8 2026-11-02: Abschluss → 02-layout/vt-band.css (.vt-band--abschluss, .vt-abschluss*) */


/* --------------------------------------------------------------
   R3 2026-10-25: Einleitung über dem Banner, weicherer Hover
-------------------------------------------------------------- */

.vt-refs .vt-refs-intro__kicker {
    margin: 0 0 12px;
    color: #9fd0ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vt-refs .vt-refs-intro__title { margin-bottom: 20px; }   /* R8: vorher .vt-refs-band--intro .vt-refs-band__title--hell */

.vt-refs .vt-refs-intro__text {
    max-width: 72ch;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    line-height: 1.65;
}

.vt-refs .vt-refs-intro__text + .vt-refs-intro__text { margin-top: 1em; }

.vt-refs .vt-refs-banner { padding-top: 40px; }

@media (max-width: 767px) {
    .vt-refs .vt-refs-intro__text { font-size: 17px; }
    .vt-refs .vt-refs-banner { padding-top: 24px; }
}

/* Hover: langsam ein- und ausblenden; z-index fällt erst nach dem Ausblenden zurück */
.vt-refs .vt-refs-karte {
    z-index: 1;
    transition: filter .6s ease, z-index 0s linear .6s;
}

.vt-refs .vt-refs-karte__info {
    transition: opacity .45s ease;
}

@media (hover: hover) and (pointer: fine) {
    .vt-refs .vt-refs-karte--projekt:hover {
        transition: filter .6s ease, z-index 0s;
    }
    .vt-refs .vt-refs-karte--projekt:hover .vt-refs-karte__info {
        transition: opacity .45s ease .15s;
    }
}


/* --------------------------------------------------------------
   R5 2026-10-25: Einleitung hell (Klaus), Banner wieder mit eigenem Abstand oben
   R8: Band selbst über .vt-band--hell
-------------------------------------------------------------- */

.vt-refs .vt-refs-intro__text { color: #34445e; }

.vt-refs .vt-refs-banner { padding-top: 68px; }

@media (max-width: 767px) {
    .vt-refs .vt-refs-banner { padding-top: 40px; }
}
/* --------------------------------------------------------------
   R6 2026-10-25: Kopf der Collage, Design-Studien, Textlink
-------------------------------------------------------------- */

.vt-refs .vt-refs-banner__kopf { padding-bottom: 40px; }

.vt-refs .vt-refs-banner__kopf .vt-band__title--hell { margin-bottom: 16px; }

.vt-refs .vt-refs-banner__text {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 19px;
    line-height: 1.6;
}

/* R8: getöntes Band, Überschrift mit Einleitung, Einleitung → vt-band.css */

.vt-refs .vt-refs-studien {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

/* Karte: ganzer Block ist der Link (Leitfaden Hover-Karten) */
.vt-refs .vt-refs-studie {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d4e2f2;
    border-radius: var(--vt-radius-card, 20px);
    background-color: #ffffff;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.vt-refs .vt-refs-studie__bild {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    background-color: #0f1f3b;
}

.vt-refs .vt-refs-studie__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px 28px;
}

.vt-refs .vt-refs-studie__label {
    align-self: flex-start;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #1658a8;
    border-radius: 999px;
    color: #1658a8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vt-refs .vt-refs-studie__title {
    margin: 4px 0 0;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.vt-refs .vt-refs-studie__link,
.vt-refs .vt-refs-studie__link:hover,
.vt-refs .vt-refs-studie__link:focus {
    color: #0b1730;
    text-decoration: none;
}

.vt-refs .vt-refs-studie__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vt-refs .vt-refs-studie__text {
    margin: 0;
    color: #34445e;
    font-size: 17px;
    line-height: 1.65;
}

.vt-refs .vt-refs-studie__mehr {
    margin-top: auto;
    padding-top: 6px;
    color: #1658a8;
    font-size: 16px;
    font-weight: 500;
}

.vt-refs .vt-refs-studie:focus-within {
    outline: 2px solid #1d8ff0;
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .vt-refs .vt-refs-studie:hover {
        border-color: #1d8ff0;
        box-shadow: 0 12px 32px rgba(11, 23, 48, .12);
        transform: translateY(-2px);
    }
}

.vt-refs .vt-refs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* R8: Textlink-Zeile → vt-band.css (.vt-band__more), Textlink → 03-components/vt-textlink.css */

@media (max-width: 860px) {
    .vt-refs .vt-refs-studien { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 767px) {
    .vt-refs .vt-refs-banner__kopf { padding-bottom: 24px; }
    .vt-refs .vt-refs-banner__text { font-size: 17px; }
    .vt-refs .vt-refs-studie__body { padding: 20px; }
}