/* =====================================================
   GOEDERENVERVOERDERS – ALGEMEEN
   Versie: 3.0
   Datum: september 2026

   DOEL
   Centrale styling voor de ALGEMEEN-tab van
   goederenvervoerders.

   BASIS
   De bestaande basis-CSS blijft leidend.
   Dit bestand bevat uitsluitend de aanvullingen
   voor de goederenvervoerders.

   BEVAT
   - openingsfoto
   - tekstblok
   - treinlijn
   - accordion
   - vervoerdersaccenten
   - mobiele aanpassingen

   =====================================================

   INHOUDSOPGAVE

   01. KLEURREGISTER
   02. OPENINGSFOTO
   03. TEKSTBLOK
   04. TREINLIJN
   05. ACCORDION
   06. MOBIEL

   -----------------------------------------------------

   ZOEKEN IN DIT BESTAND

   Mac:
   ⌘ Command + F

   Zoek bijvoorbeeld op:

   OPENINGSFOTO
   TEKSTBLOK
   TREINLIJN
   ACCORDION
   LINEAS
   BLS CARGO
   LTE
   RAIL FORCE ONE
   RTB CARGO
   SBB CARGO INTERNATIONAL

   ===================================================== */


/* =====================================================
   01. KLEURREGISTER
   ===================================================== */

/*
   LINEAS
   #18b8c8

   BLS CARGO
   Nog in te vullen

   LTE
   Nog in te vullen

   RAIL FORCE ONE
   Nog in te vullen

   RTB CARGO
   Nog in te vullen

   SBB CARGO INTERNATIONAL
   Nog in te vullen
*/


/* =====================================================
   02. OPENINGSFOTO
   ===================================================== */


/* -----------------------------------------------------
   GOEDEREN – OPENINGSBLOK
   ----------------------------------------------------- */

body.site .goederen-openingsblok {
    max-width: 900px;

    margin: 24px auto;

    overflow: hidden;

    background: #111;

    border: 1px solid #444;
    border-radius: 10px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    box-sizing: border-box;
}


/* -----------------------------------------------------
   HOVER
   ----------------------------------------------------- */

body.site .goederen-openingsblok:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.55);
}


/* -----------------------------------------------------
   FOTO
   ----------------------------------------------------- */

body.site .goederen-openingsfoto {
    width: 100%;

    overflow: hidden;

    background: #111;
}


body.site .goederen-openingsfoto img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* -----------------------------------------------------
   INFOBALK
   ----------------------------------------------------- */

body.site .goederen-openingsinfo {
    display: flex;

    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding: 10px 14px;

    box-sizing: border-box;

    background: #181818;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}


/* -----------------------------------------------------
   INFO – LINKS
   ----------------------------------------------------- */

body.site .goederen-info-links {
    text-align: left;
}


/* -----------------------------------------------------
   INFO – RECHTS
   ----------------------------------------------------- */

body.site .goederen-info-rechts {
    text-align: right;
}


/* -----------------------------------------------------
   LINEAS – ACCENT
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs.lineas
.goederen-openingsblok {

    border-color: #18b8c8;

    box-shadow:
        0 6px 18px rgba(24, 184, 200, 0.18);
}


/* =====================================================
   03. TEKSTBLOK
   ===================================================== */


/* -----------------------------------------------------
   GOEDEREN – TEKSTBLOK
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs
.tekstblokken.goederen-tekstblok {

    max-width: 760px;

    margin: 20px auto;

    border: 1px solid #333;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* -----------------------------------------------------
   LINEAS – ACCENT
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs.lineas
.tekstblokken.goederen-tekstblok {

    border-color: #18b8c8;

    box-shadow:
        0 6px 18px rgba(24, 184, 200, 0.12);
}


/* =====================================================
   04. TREINLIJN
   =====================================================

   Gebaseerd op bestaande .treinlijn uit user.css

   Variants:
   - goederen-treinlijn-lang
   - goederen-treinlijn-kort

   Beide gebruiken de vervoerderskleur.
   ===================================================== */


/* -----------------------------------------------------
   GOEDEREN – TREINLIJN LANG
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs
.goederen-treinlijn-lang {

    position: relative;

    width: 100%;
    height: 10px;

    margin: 26px 0;

    border: none;

    background: none;
}


/* Bovenste lijn */

body.site .tabs.goederen-tabs
.goederen-treinlijn-lang::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 2px;

    height: 2px;

    border-radius: 2px;

    background: #888;
}


/* Onderste lijn */

body.site .tabs.goederen-tabs
.goederen-treinlijn-lang::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 2px;

    height: 2px;

    border-radius: 2px;

    background: #888;
}


/* -----------------------------------------------------
   GOEDEREN – TREINLIJN KORT
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs
.goederen-treinlijn-kort {

    position: relative;

    max-width: 760px;

    height: 10px;

    margin: 30px auto;

    border: none;

    background: none;
}


/* Bovenste lijn */

body.site .tabs.goederen-tabs
.goederen-treinlijn-kort::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 2px;

    height: 2px;

    border-radius: 2px;

    background: #888;
}


/* Onderste lijn */

body.site .tabs.goederen-tabs
.goederen-treinlijn-kort::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 2px;

    height: 2px;

    border-radius: 2px;

    background: #888;
}


/* -----------------------------------------------------
   LINEAS – ACCENT LANG
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs.lineas
.goederen-treinlijn-lang::before {

    background: #18b8c8;
}


body.site .tabs.goederen-tabs.lineas
.goederen-treinlijn-lang::after {

    background: #18b8c8;

    box-shadow:
        0 0 6px rgba(24, 184, 200, 0.35);
}


/* -----------------------------------------------------
   LINEAS – ACCENT KORT
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs.lineas
.goederen-treinlijn-kort::before {

    background: #18b8c8;
}


body.site .tabs.goederen-tabs.lineas
.goederen-treinlijn-kort::after {

    background: #18b8c8;

    box-shadow:
        0 0 6px rgba(24, 184, 200, 0.35);
}

/* =====================================================
   05. ACCORDION
   ===================================================== */


/* -----------------------------------------------------
   GOEDEREN – ACCORDION
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs
.accordion.goederen-accordion {

    max-width: 760px;

    margin: 20px auto;

    --acc-accent: #888888;
}


/* -----------------------------------------------------
   LINEAS – ACCENT
   ----------------------------------------------------- */

body.site .tabs.goederen-tabs.lineas
.accordion.goederen-accordion {

    --acc-accent: #18b8c8;
}


/* =====================================================
   06. MOBIEL
   ===================================================== */

@media (max-width: 700px) {


    /* -------------------------------------------------
       OPENINGSFOTO
       ------------------------------------------------- */

    body.site .goederen-openingsblok {
        margin: 18px auto;
    }


    body.site .goederen-openingsinfo {
        padding: 9px 12px;

        font-size: 14px;
    }


    /* -------------------------------------------------
       TEKSTBLOK
       ------------------------------------------------- */

    body.site .tabs.goederen-tabs
    .tekstblokken.goederen-tekstblok {

        margin: 18px auto;

        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }


    /* -------------------------------------------------
       TREINLIJN
       ------------------------------------------------- */

    body.site .tabs.goederen-tabs
    .goederen-treinlijn {

        margin: 18px auto;
    }


    /* -------------------------------------------------
       ACCORDION
       ------------------------------------------------- */

    body.site .tabs.goederen-tabs
    .accordion.goederen-accordion {

        margin: 18px auto;
    }

}


/* =====================================================
   EINDE GOEDERENVERVOERDERS – ALGEMEEN
   ===================================================== */