/* ================================
   ECH Company Data
   ================================ */

/* Globale Variablen für Light/Dark Modus (entsprechend deiner Präferenz) */
@media (prefers-color-scheme: light) {
    :root {
        --text-color: rgb(0, 0, 0); /* Light Mode Schriftfarbe: rgb 0, 0, 0 */
        --link-color: rgb(0, 0, 0);
        --container-bg: rgb(242, 242, 242); /* Light Mode Hintergrund: rgb 242, 242, 242 */
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: rgb(242, 242, 242); /* Dark Mode Schriftfarbe: rgb 242, 242, 242 */
        --link-color: rgb(242, 242, 242);
        --container-bg: rgb(60, 60, 60); /* Dark Mode Hintergrund: rgb 60, 60, 60 */
    }
}

.ech-company-container {
    /* Container-Styles */
    background-color: var(--container-bg);
    color: var(--text-color);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schattenfunktion nach unten */
    padding: 30px; /* etwas Puffer um den Inhalt */
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf Mobil */
    gap: 40px;
}

/* --- H3 Headline --- */
.ech-h3-company {
    background-color: rgb(0, 84, 134); /* Statischer Hintergrund */
    color: rgb(242, 242, 242); /* Statische Schriftfarbe */
    font-weight: bold;
    padding: 10px;
    margin: 0 0 30px 0; /* 30px frei darunter */
    line-height: 1.2;
    width: 100%; /* H3 nimmt volle Breite im Detailbereich ein */
}

/* --- Unternehmensdetails und Piktogramme --- */
.ech-company-details {
    flex: 1 1 45%; /* Nimmt fast die Hälfte der Breite ein */
    min-width: 300px;
}

.ech-info-line {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}
.ech-info-fax {
    margin-bottom: 20px; /* 20px unter Fax, wie gewünscht */
}

/* Piktogramm */
.ech-pictogram {
    flex-shrink: 0;
}
.ech-pictogram img {
    display: block;
    width: var(--size, 25px); /* Standard 25px */
    height: var(--size, 25px);
}

.ech-info-text, .ech-info-link, .ech-info-text-multiline {
    margin-left: 10px;
    color: var(--text-color);
    line-height: 1.5;
    word-break: break-word;
}

/* Links (Telefon, Mail, Domain) */
.ech-info-link {
    text-decoration: none;
    color: var(--link-color);
}
.ech-info-link:hover {
    text-decoration: underline; /* Wunschanforderung: Unterstrichen bei Mouseover */
    /* Farbe bleibt unverändert (keine spezielle Hover-Farbe gesetzt) */
}

/* --- Bildverknüpfung --- */
.ech-image-wrapper {
    flex: 1 1 45%; /* Nimmt fast die Hälfte der Breite ein */
    display: flex;
}
.ech-image-container {
    position: relative;
    max-width: 100%;
    width: var(--img-width, 100%);
}
.ech-image-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px; /* Radien an allen Ecken 10px */
}

/* Bildausrichtung (Wird im Parent-Element (ech-image-wrapper) gesteuert) */
.ech-pos-top_left, .ech-pos-center_left, .ech-pos-bottom_left { justify-content: flex-start; }
.ech-pos-top_center, .ech-pos-center, .ech-pos-bottom_center { justify-content: center; }
.ech-pos-top_right, .ech-pos-center_right, .ech-pos-bottom_right { justify-content: flex-end; }

.ech-pos-top_left, .ech-pos-top_center, .ech-pos-top_right { align-items: flex-start; }
.ech-pos-center_left, .ech-pos-center, .ech-pos-center_right { align-items: center; }
.ech-pos-bottom_left, .ech-pos-bottom_center, .ech-pos-bottom_right { align-items: flex-end; }

/* ================================
   Ergänzungen (additiv)
   ================================ */

/* Hintergrundklassen (werden nur gesetzt, wenn im Template aktiviert) */
.ech-bg--light { background-color: rgb(242,242,242); }
.ech-bg--dark  { background-color: rgb(60,60,60); color: #fff; }

/* PNG zwischen H3 und Text: kleiner Abstand */
.ech-company-inline-image { margin: 10px 0 16px; }

/* Company-Details IMMER linksbündig (falls irgendwo zentriert geerbt wird) */
.ech-company-details,
.ech-company-details .ech-info-line,
.ech-company-details .ech-info-text-multiline {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Logo-/Piktogramm-Layout: 
   - Linkspadding = Piktogrammbreite + 10px
   - Abstand Icon → Text = 10px (über Padding, daher margin links auf 0) */
.ech-info-line {
    position: relative;
    padding-left: calc(var(--pic-size, 25px) + 10px);
}
.ech-info-line > .ech-pictogram {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pic-size, 25px);
    height: var(--pic-size, 25px);
}
.ech-info-line .ech-info-text,
.ech-info-line .ech-info-link,
.ech-info-line .ech-info-text-multiline {
    margin-left: 0; /* damit nicht doppelt: Padding übernimmt die 10px */
}

/* Mobil-Layout */
@media (max-width: 768px) {
    .ech-company-container {
        flex-direction: column;
        padding: 20px;
    }
    .ech-company-details, .ech-image-wrapper {
        flex: 1 1 100%;
        min-width: unset;
    }
    .ech-image-wrapper {
        /* Bildausrichtung im mobilen Modus oft zentriert besser */
        justify-content: center;
    }

    /* Rider-Bild mobil: max. 350px und zentriert */
    .ech-image-container {
        width: min(100%, 350px);
        margin: 0 auto;
    }
    .ech-image-container img {
        width: 100%;
        height: auto;
        display: block;
    }
}