/* ============================================
   PORTFOLIO.CSS — Portfolio-Grid der Startseite
   Aus work.css herausgelöst: dort lagen zusätzlich ~2.700 Zeilen reiner
   Detailseiten-Styles (.wd-*, .bv-*), die die Startseite blockierend lud,
   ohne dass eine einzige davon greift. Siehe work-detail.css.
   ============================================ */

/* ---- Selected Work Section (Homepage) ---- */
.selected-work {
    padding: 6rem 0;
    max-width: 1400px;
    margin: 0 auto;
}

/* ---- Header ---- */
.selected-work-header {
    text-align: center;
    margin-bottom: 5rem;
    padding: 0 2rem;
}

.selected-work-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 1.5rem;
    text-align: left;
    font-family: 'Geist', 'Inter', monospace;
}

.selected-work-title {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #f5f1e8;
    margin-bottom: 0.75rem;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.selected-work-subtitle {
    font-family: var(--font-display, 'Fraunces', serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.95rem;
    color: rgba(245, 241, 232, 0.55);
    letter-spacing: -0.005em;
    opacity: 1;
}

/* ============================================
   PORTFOLIO GRID - 3-Column Staggered Layout
   ============================================ */
.portfolio-grid {
    display: flex;
    gap: 1.25rem;
    padding: 0 2rem;
}

.portfolio-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Middle column offset for stagger effect — fluid for intermediate viewports */
.portfolio-col--offset {
    margin-top: clamp(2.5rem, 8vw, 4.5rem);
}

/* ============================================
   PORTFOLIO TILE
   ============================================ */
.portfolio-tile {
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.4s cubic-bezier(.25,.46,.45,.94);
}

.portfolio-tile:hover {
    transform: translateY(-3px);
}

.portfolio-tile:focus-visible {
    outline: 2px solid var(--purple-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---- Number Label (editorial Fraunces italic) ---- */
.portfolio-tile__number {
    display: block;
    font-family: var(--font-display, 'Fraunces', serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1;
    color: var(--purple-accent);
    opacity: 0.85;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
    font-optical-sizing: auto;
}

/* ---- Image Area ---- */
.portfolio-tile__image {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Phase 2.11 — keep clip-path wipe + opacity transitions on portfolio images
   alongside the hover transitions above (default shorthand would clobber). */
.portfolio-tile__image.reveal-clip {
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}

.portfolio-tile:hover .portfolio-tile__image {
    border-color: rgba(142, 68, 255, 0.55);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 32px rgba(142, 68, 255, 0.18);
}

.portfolio-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
}

.portfolio-tile:hover .portfolio-tile__image img {
    transform: scale(1.025);
}

/* Size variants */
.portfolio-tile--md .portfolio-tile__image {
    aspect-ratio: 1 / 1.05;
}

.portfolio-tile--lg .portfolio-tile__image {
    aspect-ratio: 1 / 1.35;
}

/* Fallback für Browser ohne aspect-ratio (u.a. Edge vor 88, Jan 2021).
   .portfolio-tile__image hat sonst KEINE Höhenangabe: Kacheln ohne <img>
   (Baila Verde, Coming-Soon-Platzhalter) fallen dort auf 2px zusammen.
   Gemessen: 788×1064 mit aspect-ratio, 788×2 ohne.
   Greift ausschließlich in Browsern ohne Support — moderne bleiben unberührt. */
@supports not (aspect-ratio: 1 / 1) {
    .portfolio-tile__image::before {
        content: '';
        display: block;
    }

    .portfolio-tile--md .portfolio-tile__image::before { padding-top: 105%; }
    .portfolio-tile--lg .portfolio-tile__image::before { padding-top: 135%; }

    /* Das <img> ist normalerweise height:100% im Fluss — neben dem
       Höhen-Pseudoelement muss es absolut liegen. Die Logos sind
       bereits position:absolute. */
    .portfolio-tile__image > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (max-width: 768px) {
        .portfolio-tile--md .portfolio-tile__image::before,
        .portfolio-tile--lg .portfolio-tile__image::before { padding-top: 75%; }
    }

    @media (max-width: 480px) {
        .portfolio-tile--md .portfolio-tile__image::before,
        .portfolio-tile--lg .portfolio-tile__image::before { padding-top: 100%; }
    }
}

/* ---- Image: Day&Nite ---- */
.portfolio-tile__image--daynite {
    background: #0a0816;
}

.portfolio-tile__image--daynite > img {
    opacity: 0.8;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.5s ease;
}

.portfolio-tile:hover .portfolio-tile__image--daynite > img {
    opacity: 0.9;
    transform: scale(1.025);
}

/* ---- Image: Entrel ---- */
.portfolio-tile__image--entrel {
    background: url('../images/portfolio_entrel/Entrel_Card.webp') center/cover no-repeat, linear-gradient(145deg, #0a0a0f 0%, #14100a 40%, #0e0c08 100%);
}

.portfolio-tile__image--entrel > img {
    object-fit: contain;
    transition: transform 0.6s ease;
}

.portfolio-tile:hover .portfolio-tile__image--entrel > img {
    transform: scale(1.025);
}

/* ---- Image: Eden01 ---- */
.portfolio-tile__image--eden01 {
    background: #0a0a0f;
}

.portfolio-tile__image--eden01 > img {
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-tile:hover .portfolio-tile__image--eden01 > img {
    transform: scale(1.025);
}

/* ---- Image: Placeholder ---- */
.portfolio-tile__image--placeholder {
    background: #09090e;
}

.portfolio-tile__image--placeholder > img {
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-tile:hover .portfolio-tile__image--placeholder > img {
    transform: scale(1.025);
}

/* ---- Logo Overlay (base) ---- */
.portfolio-tile__logo {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    transition: transform 0.4s ease;
}

.portfolio-tile__logo img {
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
}

/* Day&Nite logo – top left */
.portfolio-tile__logo--daynite {
    top: 1.25rem;
    left: 1.25rem;
}

.portfolio-tile__logo--daynite img {
    height: 80px;
}

.portfolio-tile:hover .portfolio-tile__logo--daynite {
    transform: scale(1.025);
}

/* Entrel logo – stacked Icon + Wordmark, anchored bottom-center, large */
.portfolio-tile__logo--entrel {
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset generic .portfolio-tile__logo img sizing so Icon + Wordmark can size individually */
.portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark {
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7));
}


.portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark {
    width: 240px;
    opacity: 0.95;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.5s ease;
}

.portfolio-tile:hover .portfolio-tile__logo--entrel {
    transform: translateX(-50%) scale(1.03);
}


.portfolio-tile:hover .portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark {
    opacity: 1;
    width: 252px;
}

/* Eden01 logo – top center */
.portfolio-tile__logo--eden01 {
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
}

.portfolio-tile__logo--eden01 img {
    height: 70px;
}

.portfolio-tile:hover .portfolio-tile__logo--eden01 {
    transform: translateX(-50%) scale(1.05);
}

/* Baila Verde logo – center, Icon stacked over Wordmark */
.portfolio-tile__logo--bailaverde {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Solid dark-warm background (no photo) — like the hero, dark with amber accent */
.portfolio-tile__image--bailaverde {
    background:
        radial-gradient(ellipse at 30% 75%, rgba(217, 122, 48, 0.35) 0%, rgba(217, 122, 48, 0.08) 40%, transparent 70%),
        linear-gradient(160deg, #100c08 0%, #0c0a08 55%, #1a0d05 100%);
}

/* Reset the generic logo img dimensions for the BV stack — specificity beats
   the generic .portfolio-tile__logo img rule (two classes > one class + one type) */
.portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon,
.portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7));
}

.portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon {
    width: 92px;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
    width: 130px;
    opacity: 0.95;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.5s ease;
}

.portfolio-tile:hover .portfolio-tile__logo--bailaverde {
    transform: translate(-50%, -50%) scale(1.03);
}

.portfolio-tile:hover .portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon {
    transform: rotate(-3deg) scale(1.05);
    filter: drop-shadow(0 0 28px rgba(74, 143, 106, 0.55));
}

.portfolio-tile:hover .portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
    opacity: 1;
    width: 138px;
}

/* ---- Warm BV-themed hover (overrides generic purple) ---- */
.portfolio-tile--bailaverde:hover .portfolio-tile__image {
    border-color: rgba(217, 122, 48, 0.55);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35),
                0 0 36px rgba(217, 122, 48, 0.18);
}

/* Always-on subtle amber radial wash (intensifies on hover) */
.portfolio-tile--bailaverde .portfolio-tile__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 80%, rgba(217, 122, 48, 0.28) 0%, rgba(74, 143, 106, 0.08) 45%, transparent 70%);
    opacity: 0.55;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 1;
}

.portfolio-tile--bailaverde:hover .portfolio-tile__image::after {
    opacity: 1;
}

/* Keep Icon + Wordmark above the warm glow */
.portfolio-tile__logo--bailaverde {
    z-index: 2;
}

/* Expand button: warm verde-glow on BV card hover */
.portfolio-tile--bailaverde:hover .portfolio-tile__expand {
    background: #4a8f6a;
    border-color: #4a8f6a;
    color: #f4ead8;
    box-shadow: 0 4px 16px rgba(74, 143, 106, 0.35);
}

/* ---- Expand Button ---- */
.portfolio-tile__expand {
    position: absolute;
    bottom: 0.85rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.35s cubic-bezier(.25,.46,.45,.94);
    z-index: 3;
    line-height: 1;
}

.portfolio-tile:hover .portfolio-tile__expand {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    color: #fff;
    transform: rotate(45deg);
    box-shadow: 0 4px 16px rgba(142, 68, 255, 0.35);
}

/* ---- Info Section (below image) ---- */
.portfolio-tile__info {
    padding: 1rem 0.15rem 0;
}

.portfolio-tile__info-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.2rem;
}

.portfolio-tile__title {
    font-family: 'Geist', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.portfolio-tile__year {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: 1rem;
}

.portfolio-tile__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.4;
    opacity: 0.7;
    transform: translateY(2px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.portfolio-tile:hover .portfolio-tile__subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Portfolio Footer ---- */
.portfolio-footer {
    display: flex;
    justify-content: flex-end;
    padding: 3.5rem 2rem 0;
}

.portfolio-footer__link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.25s ease;
    font-family: 'Geist', 'Inter', sans-serif;
}

.portfolio-footer__link:hover {
    color: var(--purple-accent);
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .selected-work {
        padding: 4rem 0;
    }

    .selected-work-header {
        margin-bottom: 3.5rem;
    }

    .portfolio-grid {
        padding: 0 1.5rem;
        gap: 1rem;
    }

    .portfolio-col--offset {
        margin-top: 3rem;
    }

    .portfolio-tile__logo--daynite img {
        height: 60px;
    }

    .portfolio-tile__logo--entrel {
        bottom: 1.25rem;
        gap: 0.9rem;
    }

    .portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark { width: 180px; }

    .portfolio-tile__logo--eden01 img {
        height: 55px;
    }

    .portfolio-tile--bailaverde .portfolio-tile__logo--bailaverde {
        gap: 1rem;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon {
        width: 76px;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
        width: 108px;
    }
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media (max-width: 768px) {
    .selected-work {
        padding: 3rem 0;
    }

    .selected-work-header {
        margin-bottom: 2.5rem;
    }

    .selected-work-label {
        text-align: center;
    }

    .selected-work-title {
        font-size: 2.25rem;
    }

    /* Stack to single column */
    .portfolio-grid {
        flex-direction: column;
        gap: 0;
        padding: 0 1.5rem;
    }

    .portfolio-col {
        gap: 0;
    }

    .portfolio-col--offset {
        margin-top: 0;
    }

    .portfolio-tile {
        margin-bottom: 2rem;
    }

    .portfolio-tile--md .portfolio-tile__image,
    .portfolio-tile--lg .portfolio-tile__image {
        aspect-ratio: 4 / 3;
    }

    .portfolio-tile__logo img {
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    }

    .portfolio-tile__logo--daynite img {
        height: 70px;
    }

    .portfolio-tile__logo--entrel {
        bottom: 1.5rem;
        gap: 1rem;
    }

    .portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark { width: 210px; }

    .portfolio-tile__logo--eden01 img {
        height: 60px;
    }

    .portfolio-tile--bailaverde .portfolio-tile__logo--bailaverde {
        gap: 0.9rem;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon {
        width: 70px;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
        width: 100px;
    }

    .portfolio-tile__title {
        font-size: 1.15rem;
    }

    .portfolio-tile__expand {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        bottom: 0.75rem;
        right: 0.75rem;
    }

    .portfolio-footer {
        justify-content: center;
        padding: 1.5rem 2rem 0;
    }
}

@media (max-width: 480px) {
    .selected-work-title {
        font-size: 1.85rem;
        letter-spacing: -0.5px;
    }

    .portfolio-tile--md .portfolio-tile__image,
    .portfolio-tile--lg .portfolio-tile__image {
        aspect-ratio: 1 / 1;
    }

    .portfolio-tile__logo--daynite img {
        height: 60px;
    }

    .portfolio-tile__logo--daynite {
        top: 1rem;
        left: 1rem;
    }

    .portfolio-tile__logo--entrel {
        bottom: 1rem;
        gap: 0.8rem;
    }

    .portfolio-tile__logo--entrel .portfolio-tile__entrel-wordmark { width: 150px; }

    .portfolio-tile__logo--eden01 img {
        height: 55px;
    }

    .portfolio-tile__logo--eden01 {
        top: 1rem;
    }

    .portfolio-tile--bailaverde .portfolio-tile__logo--bailaverde {
        gap: 0.85rem;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-icon {
        width: 64px;
    }

    .portfolio-tile__logo--bailaverde .portfolio-tile__bv-wordmark {
        width: 92px;
    }
}



/* ---- Padelball Club — Konzeptstudie, Navy-Glow statt Foto ----
   Die Kachel führt auf /concepts/padelball-club/. Kein Bildmotiv, sondern
   die Navy-Palette der Konzeptstudie selbst: --navy #0E1B2E über
   --navy-900 #050B16, dazu ein kühler Lichtkegel. Die Wortmarke steht frei
   darauf, wie im Splash der Seite. */
.portfolio-tile__image--padel {
    background:
        radial-gradient(ellipse 78% 62% at 50% 38%, rgba(42, 64, 100, 0.55) 0%, transparent 68%),
        radial-gradient(ellipse 60% 45% at 50% 8%, rgba(169, 192, 222, 0.16) 0%, transparent 70%),
        linear-gradient(170deg, #0E1B2E 0%, #050B16 100%);
    border-color: rgba(169, 192, 222, 0.16);
}

.portfolio-tile:hover .portfolio-tile__image--padel {
    border-color: rgba(169, 192, 222, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(42, 64, 100, 0.45);
}

.portfolio-tile__logo--padel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12%;
}

.portfolio-tile__logo--padel img {
    width: auto;
    height: 78%;
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 4px 26px rgba(0, 0, 0, 0.55));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-tile:hover .portfolio-tile__logo--padel img {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .portfolio-tile__logo--padel img { height: 70%; }
}

/* ---- Hoam Bräu — Konzeptstudie, Fresko statt Farbfläche ----
   Anders als bei Padelball gibt es hier ein echtes Motiv: den Fresko-Himmel
   der Studie. Im Hochformat der lg-Kachel bleibt davon vor allem die
   Wolkenpartie — ruhiger Grund, auf dem die Fraktur-Wortmarke trägt. */
.portfolio-tile__image--hoam {
    background: #22303C;
    border-color: rgba(242, 237, 225, 0.12);
}

.portfolio-tile__image--hoam img {
    /* Der obere Bildteil trägt den Himmel; unten wird es unruhig. */
    object-position: center 32%;
    filter: brightness(0.82) saturate(0.95);
}

.portfolio-tile:hover .portfolio-tile__image--hoam {
    border-color: rgba(201, 162, 39, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(34, 48, 60, 0.5);
}

.portfolio-tile__logo--hoam {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14%;
}

.portfolio-tile__logo--hoam img {
    width: auto;
    height: auto;
    max-width: 78%;
    max-height: 46%;
    object-fit: contain;
    filter: drop-shadow(0 6px 30px rgba(12, 20, 27, 0.75));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-tile:hover .portfolio-tile__logo--hoam img { transform: scale(1.04); }

/* ---- Genova — Konzeptstudie, gerendert statt fotografiert ----
   Die Studie hat keine Bilddateien; ihre Bildwelt entsteht zur Laufzeit
   aus einem Canvas. Das Kachelbild ist deshalb ein Standbild der echten
   Seite. Der Aqua-Ton stammt aus deren Palette. */
.portfolio-tile__image--genova {
    background: #04070E;
    border-color: rgba(53, 224, 218, 0.14);
}

/* Das Standbild ist im Seitenverhältnis der Kachel gerendert (1200×1260 zu
   1 / 1.05) — im Dreispalter wird also nichts beschnitten. Unter 768px wird
   die Kachel 4:3 bzw. 1:1; dann schneidet cover oben und unten. 42% hält
   die Wortmarke dabei im Bild, sie liegt im Rendering auf dieser Höhe. */
.portfolio-tile__image--genova img {
    object-position: center 42%;
}

.portfolio-tile:hover .portfolio-tile__image--genova {
    border-color: rgba(53, 224, 218, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(53, 224, 218, 0.22);
}

/* ---- Eishockey — Konzeptstudie, gerendert statt fotografiert ----
   Wie bei Genova ist das Kachelbild ein Standbild der echten Seite, im
   Seitenverhältnis der Kachel gerendert (1200×1260 zu 1 / 1.05) — im
   Dreispalter wird also nichts beschnitten. Unter 768px wird die Kachel
   4:3 bzw. 1:1; dann schneidet cover oben und unten, und 38% hält den
   Kopf des Spielers im Bild.
   Grundton und Leuchten stammen aus der Palette der Studie: --ice #7fd4ff
   auf dem tiefen Eisblau #04070f. */
.portfolio-tile__image--eishockey {
    background: #04070f;
    border-color: rgba(127, 212, 255, 0.14);
}

.portfolio-tile__image--eishockey img {
    object-position: center 38%;
}

.portfolio-tile:hover .portfolio-tile__image--eishockey {
    border-color: rgba(127, 212, 255, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(127, 212, 255, 0.22);
}

/* ---- CHULA — Konzeptstudie, gerendert statt fotografiert ----
   Wie bei Genova und Eishockey ist das Kachelbild ein Standbild der echten
   Seite, im Seitenverhältnis der Kachel gerendert (1200×1260 zu 1 / 1.05) —
   im Dreispalter wird also nichts beschnitten. Unter 768px wird die Kachel
   4:3 bzw. 1:1; 40% hält dann die Wortmarke im Bild.
   Grundton und Leuchten stammen aus der Palette der Studie: --red-deep
   #8b2c2c auf dem fast schwarzen #050505. */
.portfolio-tile__image--chula {
    background: #050505;
    border-color: rgba(139, 44, 44, 0.22);
}

.portfolio-tile__image--chula img {
    object-position: center 40%;
}

.portfolio-tile:hover .portfolio-tile__image--chula {
    border-color: rgba(139, 44, 44, 0.7);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(139, 44, 44, 0.35);
}

/* ---- Noir Calme — Konzeptstudie, gerendert statt fotografiert ----
   Die einzige Kachel auf hellem Grund: die Marke arbeitet mit Knochenweiß
   (--bone #EFEBE3) statt Schwarz. Rahmen und Leuchten deshalb dunkel statt
   hell, sonst verschwindet die Kachel im Seitenhintergrund.
   Bild im Seitenverhältnis der Kachel gerendert (1200×1260 zu 1 / 1.05) —
   im Dreispalter kein Beschnitt. Unter 768px wird die Kachel 4:3 bzw. 1:1;
   45% hält dann die Figur im Bild. */
.portfolio-tile__image--noircalme {
    background: #EFEBE3;
    border-color: rgba(10, 10, 10, 0.18);
}

.portfolio-tile__image--noircalme img {
    object-position: center 45%;
}

.portfolio-tile:hover .portfolio-tile__image--noircalme {
    border-color: rgba(10, 10, 10, 0.45);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 34px rgba(239, 235, 227, 0.22);
}

/* ---- Sebi's — Konzeptstudie, gerendert statt fotografiert ----
   Die lauteste Kachel im Raster: die Marke arbeitet mit vollflächigem
   Signalrot (--red #DA0104). Rahmen und Leuchten deshalb im selben Rot
   statt im Purple der Standardkachel.
   Bild im Seitenverhältnis der Kachel gerendert (1200×1260 zu 1 / 1.05) —
   im Dreispalter kein Beschnitt. Unter 768px wird die Kachel 4:3 bzw.
   1:1; 42% hält Wortmarke und Kartons im Bild. */
.portfolio-tile__image--sebis {
    background: #DA0104;
    border-color: rgba(218, 1, 4, 0.35);
}

.portfolio-tile__image--sebis img {
    object-position: center 42%;
}

.portfolio-tile:hover .portfolio-tile__image--sebis {
    border-color: rgba(218, 1, 4, 0.85);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(218, 1, 4, 0.4);
}