/* ============================================================
   SONDERFAHRZEUGE – Zusatz-CSS für Sachverständigenbüro Dorny
   Baut auf dem bestehenden mainstyles.css der Hauptseite auf
   ============================================================ */

/* ---------- Fonts (gleich wie Hauptseite) ---------- */
@font-face {
    font-family: 'brandon_textregular';
    src: url('/files/fonts/hvd_fonts_-_brandontext-regular-webfont.woff2') format('woff2'),
         url('/files/fonts/hvd_fonts_-_brandontext-regular-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'brandon_textlight';
    src: url('/files/fonts/hvd_fonts_-_brandontext-light-webfont.woff2') format('woff2'),
         url('/files/fonts/hvd_fonts_-_brandontext-light-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'brandon_textbold';
    src: url('/files/fonts/hvd_fonts_-_brandontext-bold-webfont.woff2') format('woff2'),
         url('/files/fonts/hvd_fonts_-_brandontext-bold-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;
    font-display: swap;
}

/* ---------- Reset & Basis ---------- */
* { padding: 0; margin: 0; box-sizing: border-box; }

body {
    overflow-x: hidden;
    font-family: 'brandon_textregular', sans-serif;
    letter-spacing: 2px;
    color: #25303b;
}

a, em, strong { font-size: inherit; color: inherit; text-decoration: none; }
p, li, option, label { font-size: 18px; line-height: 1.6; }
body h1, .h1 { font-size: 60px; margin-bottom: 20px; }
body h2, .h2 { font-size: 40px; text-transform: uppercase; margin-bottom: 20px; }
body h3, .h3 { font-size: 28px; text-transform: uppercase; margin-bottom: 20px; }
body h4, .h4 { font-size: 22px; text-transform: uppercase; margin-bottom: 15px; }

/* ---------- Layout-Helfer ---------- */
.container      { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.flex           { display: flex; flex-wrap: wrap; }
.middle         { align-items: center; }
.stretch        { align-items: stretch; }
.paddingTop     { padding-top: 50px; }
.paddingBottom  { padding-bottom: 50px; }
.bigpadding     { padding-top: 7vw; padding-bottom: 7vw; }
.text-center    { text-align: center; }
.whiteBG        { background-color: #fff; }

/* ============================================================
   NAVIGATION
   ============================================================ */
#menucontainer {
    width: 100%;
    position: fixed;
    z-index: 200;
    min-height: 100px;
    top: calc(100vh - 100px);
    left: 0;
    background-color: #fff;
    font-family: 'brandon_textbold', sans-serif;
    /* kein transition – JS steuert top direkt synchron mit Scroll */
}

#menuBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 25px;
    height: 100px;
}

#mobilLogo {
    background-image: url('../img/dorny-logo.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 75px;
    display: block;
    flex-shrink: 0;
}

#menuBox nav ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
}

#menuBox nav ul li a,
#menuBox nav ul li strong {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0 20px;
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 2px;
    white-space: nowrap;
}

#menuBox nav ul li a:hover,
#menuBox nav ul li strong.active {
    background-color: #6ac2bf;
    color: #fff;
}

/* Aktiver Reiter Sonderfahrzeuge – orange Akzent */
#menuBox nav ul li.sonderfahrzeuge a,
#menuBox nav ul li.sonderfahrzeuge strong.active {
    background-color: #e8820c;
    color: #fff;
}

/* EC Logo in Navigation */
#nav-ec-logo {
    flex-shrink: 0;
    margin-left: 15px;
}
#nav-ec-logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* Mobil-Burger */
#menutrigger {
    display: none;
    width: 60px; height: 60px;
    background-color: #172e3d;
    background-image: url('../img/openM.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    cursor: pointer;
    position: absolute;
    top: 20px; right: 15px;
    z-index: 202;
}

/* Telefon oben links */
.menuphone {
    position: absolute;
    left: 0; top: 0;
    padding: 25px 20px 0 25px;
    z-index: 200;
    background-color: #fff;
}
.menuphone a { color: #6ac2bf; font-weight: bold; font-size: 20px; }

/* ============================================================
   HERO / HEADERBILD
   ============================================================ */
.headerbild {
    position: relative;
    max-height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.headerbild figure,
.headerbild .hero-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
}

/* Diagonaler Teal-Overlay (identisch zur Hauptseite) */
.headerbild figure::after,
.headerbild .hero-img-wrap::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 1;
    border: 20px solid #fff;
    background: linear-gradient(135deg,
        rgba(105,194,190,1) 0%,
        rgba(0,0,0,0) 29%,
        rgba(0,0,0,0) 69%,
        rgba(105,194,190,1) 100%);
}

/* Weißer Innenrahmen */
#borderoverlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: calc(100vh - 80px);
    border: 20px solid #fff;
    z-index: 10;
    pointer-events: none;
}

/* Header-Text mittig */
.headertext {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 20;
    color: #fff;
    text-transform: uppercase;
    font-family: 'brandon_textbold', sans-serif;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
    text-align: center;
    width: 90%;
}

.headertext h1 { font-size: clamp(36px, 6vw, 70px); line-height: 1.1; }

/* Akzent-Balken unterm Titel */
.headertext .accent-bar {
    width: 80px; height: 5px;
    background: #e8820c;
    margin: 15px auto 0;
    border-radius: 3px;
}

/* Kein Hero – für Unterseiten ohne Vollbild */
.noheader .headerbild { display: none; }

/* ============================================================
   SECTION: WILLKOMMEN (Teal-Gradient – wie greenBG)
   ============================================================ */
.greenBG {
    background: linear-gradient(to right,
        rgba(106,194,191,0.1) 0%,
        rgba(106,194,191,1) 48%);
    position: relative;
    z-index: 2;
    color: #fff;
}

.greenBG h2 { color: rgba(37,48,59,1); text-transform: uppercase; margin-bottom: 20px; }
.greenBG h3 { text-transform: uppercase; margin-bottom: 20px; }

/* ============================================================
   SECTION: PARTNER / KOMPETENZ (dunkler Hintergrund)
   ============================================================ */
.willkommenBG {
    background-image: url('../img/bg-dark.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

.willkommenBG::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(37,48,59,0.97) 38%,
        rgba(37,48,59,1) 100%);
    z-index: 0;
}

.willkommenBG > * { position: relative; z-index: 1; }

.pHeading * {
    font-size: 50px;
    text-transform: uppercase;
    font-family: 'brandon_textbold', sans-serif;
    line-height: 1.15;
}

.pList ul {
    list-style: none;
    padding-left: 30px;
}

.pList ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 18px;
}

.pList ul li::before {
    content: "";
    position: absolute;
    left: -10px; top: 2px;
    width: 26px; height: 26px;
    background-image: url('../img/listitem.png');
    background-repeat: no-repeat;
    background-size: contain;
}

/* ============================================================
   SERVICE-KACHELN
   ============================================================ */
.services {
    justify-content: center;
    gap: 20px;
}

.serviceKachel {
    position: relative;
    min-height: 380px;
    flex: 0 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    cursor: pointer;
}

.serviceKachel .kachel-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.serviceKachel:hover .kachel-img {
    transform: scale(1.06);
}

/* Diagonaler Teal-Overlay auf Kacheln */
.serviceKachel::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    border: 20px solid #fff;
    background: linear-gradient(135deg,
        rgba(105,194,190,0.9) 0%,
        rgba(0,0,0,0.25) 30%,
        rgba(0,0,0,0.25) 70%,
        rgba(105,194,190,0.9) 100%);
}

.serviceKachel .kachel-content {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 2;
    padding: 20px;
    text-align: center;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
    color: #fff;
    font-family: 'brandon_textbold', sans-serif;
    transform: translateY(-30%);
}

.serviceKachel .kachel-content h3 {
    font-size: clamp(15px, 1.5vw, 20px);
    margin-bottom: 8px;
    color: #fff;
    word-break: break-word;
    hyphens: auto;
}

.serviceKachel .kachel-content p {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.4;
}

.serviceKachel .kachel-footer {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 3;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.kachel-phone {
    padding: 9px 20px;
    font-size: 13px;
    color: #6ac2bf !important;
    font-family: 'brandon_textbold', sans-serif;
    letter-spacing: 1px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kachel-phone:hover {
    background-color: #e8820c;
    color: #fff !important;
    text-decoration: none;
}

/* ============================================================
   UDS – UNFALLDATENSPEICHER SECTION
   ============================================================ */
.uds-section {
    background-color: #25303b;
    color: #fff;
    position: relative;
}

.uds-section h2 { color: #6ac2bf; }
.uds-section h3 { color: #6ac2bf; font-size: 22px; }

.uds-device-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.uds-device-wrap img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
    transition: transform 0.3s ease;
}

.uds-device-wrap img:hover {
    transform: scale(1.04);
}

.uds-screenshot {
    width: 100%;
    border: 3px solid #6ac2bf;
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.uds-info-box {
    background: rgba(106,194,191,0.12);
    border-left: 4px solid #6ac2bf;
    padding: 20px 25px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
}

.uds-info-box p { font-size: 17px; line-height: 1.7; }

/* ============================================================
   LEISTUNGS-DETAIL Seiten (Unterseiten)
   ============================================================ */
.leistung-header {
    position: relative;
    height: 55vh;
    min-height: 350px;
    overflow: hidden;
}

.leistung-header img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}

.leistung-header::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(37,48,59,0.9) 60%,
        rgba(37,48,59,1) 100%);
    border: 20px solid #fff;
}

.leistung-header-text {
    position: absolute;
    top: 50%; right: 60px;
    transform: translateY(-50%);
    color: #fff;
    text-align: right;
    z-index: 2;
    font-family: 'brandon_textbold', sans-serif;
}

.leistung-header-text h1 { font-size: clamp(28px, 4vw, 52px); }
.leistung-header-text .accent-bar {
    width: 60px; height: 4px;
    background: #e8820c;
    margin-left: auto;
    border-radius: 2px;
    margin-top: 12px;
}

/* ============================================================
   KONTAKT-CTA
   ============================================================ */
.kontakt-cta {
    background-color: #172e3d;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.kontakt-cta h2 { color: #6ac2bf; }

.btn-cta {
    display: inline-block;
    margin-top: 25px;
    padding: 16px 45px;
    background-color: #6ac2bf;
    color: #fff;
    text-transform: uppercase;
    font-family: 'brandon_textbold', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-cta:hover {
    background-color: #e8820c;
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   FOOTER – Emergency Competence Layout
   ============================================================ */
#footercontainer {
    background-color: #d2d7db;
    border-top: 20px solid #fff;
}

#innerFooter {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Dorny Logo – links */
.footer-logo-left { flex: 0 0 auto; }
.footer-logo-left img { height: 70px; width: auto; display: block; }

/* Adresstext – Mitte */
.footer-address {
    flex: 1;
    text-align: center;
    font-size: 16px;
    line-height: 2;
    color: #25303b;
}
.footer-address a { color: #25303b; }
.footer-address a:hover { color: #6ac2bf; }

/* EC Logo – rechts */
.footer-logo-right { flex: 0 0 auto; text-align: right; }
.footer-logo-right img {
    height: 70px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
}

/* Rechte Links darunter */
.footer-legal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 30px;
    border-top: 1px solid #bbb;
    text-align: center;
    font-size: 13px;
    color: #555;
}
.footer-legal a { color: #555; }
.footer-legal a:hover { color: #6ac2bf; }

/* Zurück-Link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6ac2bf;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'brandon_textbold', sans-serif;
    margin-bottom: 30px;
    transition: gap 0.2s ease;
}

.back-link:hover { gap: 14px; color: #e8820c; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-bar {
    background-color: #f4f5f6;
    padding: 12px 0;
    border-bottom: 2px solid #6ac2bf;
}

.breadcrumb-bar span,
.breadcrumb-bar a {
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb-bar a:hover { color: #6ac2bf; }
.breadcrumb-bar .sep { margin: 0 10px; color: #aaa; }
.breadcrumb-bar .current { color: #e8820c; font-family: 'brandon_textbold', sans-serif; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .serviceKachel {
        flex: 0 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
        min-height: 300px;
    }

    body h1, .h1 { font-size: 42px; }
    body h2, .h2 { font-size: 30px; }
    .pHeading * { font-size: 36px; }
    .headertext h1 { font-size: 38px; }
}

@media (max-width: 768px) {
    #menuBox nav { display: none; }
    #menutrigger { display: block; }

    #menuBox nav.open {
        display: flex;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 300;
    }

    #menuBox nav.open ul {
        flex-direction: column;
        gap: 0;
    }

    #menuBox nav.open ul li a {
        height: 60px;
        font-size: 20px;
        width: 280px;
        justify-content: center;
    }

    .serviceKachel,
    .services.three-col .serviceKachel {
        flex: 1 1 100%;
        max-width: 100%;
        min-height: 260px;
    }

    .headertext h1 { font-size: 28px; }

    .leistung-header-text {
        right: 20px; left: 20px;
        text-align: center;
    }

    .leistung-header-text .accent-bar { margin: 12px auto 0; }

    #innerFooter { flex-direction: column; text-align: center; gap: 20px; }
    .footer-logo-left img,
    .footer-logo-right img { height: 55px; margin: 0 auto; }

    /* Beide Logos in Nav – symmetrisch auf Mobil */
    #menuBox { padding: 0 10px; position: relative; justify-content: space-between; }
    #mobilLogo { width: 100px; height: 50px; flex-shrink: 0; }
    #nav-ec-logo {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        margin-top: 0;
        transform: translate(-50%, -50%);
    }
    #nav-ec-logo img { height: 28px; width: auto; max-width: 130px; object-fit: contain; }
    #menutrigger { flex-shrink: 0; }

    /* Hero Untertitel auf Mobil */
    .headertext p { font-size: 13px; letter-spacing: 1px; }

    /* Kachel-Footer Schrift */
    .kachel-phone { font-size: 14px; padding: 10px 15px; }
}

@media (max-width: 480px) {
    body h1, .h1 { font-size: 28px; }
    body h2, .h2 { font-size: 26px; }
    body h3, .h3 { font-size: 20px; }
    .bigpadding { padding-top: 40px; padding-bottom: 40px; }
    .headertext h1 { font-size: 24px; }
    .pHeading h2 { font-size: 28px; }
    .pList ul li { font-size: 15px; }
}