/**
 * Nominierungen Portfolio Template Styles
 * Basierend auf Adobe XD Design für DFJP
 */

/* ========================================
   Font Definitions
======================================== */

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/raleway/v34/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrcVIT9d0c-dYA.woff2') format('woff2');
}

/* Fallback: Raleway von Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

/* ========================================
   CSS Variablen / Design Tokens
======================================== */

:root {
    /* Farben - Desktop Palette */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-lightblue: #B3E5FC;
    --color-beige: #E8C4B0;
    --color-lilac: #C5B3E6;
    --color-yellow: #F4E4A1;
    --color-mint: #B8F4D3;
    --color-lightgray: #E5E5E5;
    --color-gray: #C4C4C4;

    /* Farben - Nominierungen spezifisch */
    --color-gold: #FFD700;
    --color-bronze: #CD7F32;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;

    /* Container */
    --container-max-width: 1200px;
}

/* ========================================
   Basis Styles
======================================== */

/* Standard Font Raleway für alle Elemente außer proxima-sera */
.nominierung-template {
    font-family: 'Raleway', sans-serif !important;
}

.nominierung-template p,
.nominierung-template strong,
.nominierung-kategorie p[style*="font-size: 18px"],
.nominierung-kategorie p[style*="font-size: 14px"] {
    font-family: 'Raleway', sans-serif !important;
}

/* Entferne Avada #main Padding und Margin */
body.single-avada_portfolio #main,
body.single-avada_portfolio #main.clearfix,
body.single-avada_portfolio .clearfix,
.nominierung-template #main,
.nominierung-template #main.clearfix,
.nominierung-template .clearfix,
#main.clearfix {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fusion Row auf volle Breite */
.fusion-row {
    max-width: 100% !important;
}

.nominierung-template .fusion-builder-row,
.nominierung-template .fusion_builder_row {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Abstand zwischen Kategorienamen und Videos */
.nominierung-kategorie p[style*="font-size: 40px"] {
    margin-bottom: 10px !important;
}

/* Zweite Spalte auf Höhe des Videos ausrichten */
.nominierung-kategorie .fusion_builder_column_1_2:last-child {
    padding-top: 83px !important;
}

/* Abstand zwischen Kategorie-Ende und Separator */
.nominierung-kategorie {
    margin-bottom: 45px !important;
}

/* ========================================
   Responsive Design - Mobile
======================================== */

@media only screen and (max-width: 1024px) {
    /* Zweite Spalte Padding entfernen auf Mobile */
    .nominierung-kategorie .fusion_builder_column_1_2:last-child {
        padding-top: 0 !important;
    }

    /* Abstand zwischen Video und Namen */
    .nominierung-kategorie div[style*="aspect-ratio: 16/9"] {
        margin-bottom: 30px !important;
    }

    /* Header "Nominierungen" Text */
    .nominierung-header p[style*="font-size: 40px"] {
        font-size: 48px !important;
        line-height: 55px !important;
    }

    /* Header Jahr */
    .nominierung-header p[style*="font-size: 90px"] {
        font-size: 98px !important;
        line-height: 118px !important;
    }

    /* Kategorie Label "Kategorie" */
    .nominierung-kategorie p[style*="font-size: 20px"][style*="Raleway"] {
        font-size: 32px !important;
        line-height: 36px !important;
    }

    /* Kategorienamen */
    .nominierung-kategorie p[style*="font-size: 40px"] {
        font-size: 48px !important;
        line-height: 57px !important;
    }

    /* Namen der Nominierten */
    .nominierung-kategorie p[style*="font-size: 18px"] {
        font-size: 30px !important;
        line-height: 36px !important;
    }

    /* Projekttitel */
    .nominierung-kategorie p[style*="font-size: 20px"][style*="italic"] {
        font-size: 32px !important;
        line-height: 36px !important;
    }

    /* Sender */
    .nominierung-kategorie p[style*="font-size: 14px"] {
        font-size: 26px !important;
        line-height: 36px !important;
    }
}