/*
Theme Name: DIGUM Divi Child
Theme URI: https://digum.de
Description: Child Theme für DIGUM GmbH, basierend auf Divi 5
Author: cmd creative media Design GmbH
Author URI: https://cmd-creative.de
Template: Divi
Version: 1.18.0
*/

/* ==========================================================
   1. MARKENFARBEN & GRUNDWERTE (zentral, als CSS-Variablen)
   Änderungen hier wirken sofort überall, wo die Variable
   verwendet wird — keine Einzelanpassung pro Element nötig.
   ========================================================== */
:root {
    /* DIGUM Signature-Farben (Original aus Logo-Gestaltung) */
    --digum-red: #e40521;
    --digum-blue: #004b8b;
    --digum-green: #3aa935; /* aktuell ungenutzt, für spätere Nachhaltigkeits-Elemente reserviert */

    /* Fließtext-Grau (bewusst gewähltes CI-Grau, nicht der IONOS/Lovable-Toolstandard) */
    --digum-text: #575756;

    /* Section-Hintergründe hell */
    --digum-bg-light: #f3f5f7;   /* primär, aus Lovable-Seite */
    --digum-bg-light-alt: #dae4ee; /* Alternative aus IONOS-Seite, als Variable verfügbar */

    /* Weiß / Flächen */
    --digum-white: #ffffff;

    /* Rundungs-Radius für Signature-Boxen */
    --digum-radius: 40px;

    /* Seitenbreite (aus Lovable-Referenz: 1920px Bildschirm, 276px Rand je Seite) */
    --digum-content-width: 1368px;
}


/* ==========================================================
   2. TYPOGRAFIE (zentral, in rem, Basisschrift Lato)
   ========================================================== */
html {
    font-size: 100%; /* = 16px Basis, respektiert Nutzer-Browsereinstellung */
}

body, p, li, a {
    font-family: 'Lato', sans-serif;
    color: var(--digum-text);
    /* Schriftgröße & Zeilenhöhe bewusst NICHT hier festgelegt.
       Das steuert ihr live im Divi Theme Customizer
       (Allgemeine Einstellungen -> Typografie), inkl. eigener
       Werte pro Endgerät (Desktop/Tablet/Phone).
       So gibt es nur eine Quelle für diese Werte -
       kein Konflikt zwischen Child-Theme und Customizer mehr.
       Hinweis: "span" wurde bewusst aus dieser Liste entfernt,
       da es sonst auch Divis eigene Builder-Oberfläche
       (z.B. die Gitteransicht-Beschriftungen) einfärbt.
       Normale <span> in Absätzen erben ihre Farbe ohnehin
       automatisch vom umgebenden Element. */
}

h1, .digum-h1 {
    font-family: 'Lato', sans-serif;
    color: var(--digum-blue);
    /* Größe/Zeilenhöhe/Schriftschnitt: siehe Customizer, wie oben */
}

h2, .digum-h2 {
    font-family: 'Lato', sans-serif;
    color: var(--digum-blue);
}

h3, .digum-h3 {
    font-family: 'Lato', sans-serif;
    color: var(--digum-blue);
}

h4, .digum-h4 {
    font-family: 'Lato', sans-serif;
    color: var(--digum-blue);
}


/* ==========================================================
   3. SIGNATURE-BOX (Peters "Ecken-Element")
   Oben-links & unten-rechts gerundet, oben-rechts & unten-links eckig.
   Nutzung in Divi: Element -> Advanced -> CSS ID & Classes
   -> Klasse "digum-gradient-box" eintragen.
   ========================================================== */
.digum-gradient-box {
    border-radius: var(--digum-radius) 0 var(--digum-radius) 0;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--digum-white), var(--digum-white)) padding-box,
        linear-gradient(135deg, var(--digum-red), var(--digum-blue)) border-box;
}

/* Variante: gleiche Eckenlogik, aber ohne Verlaufsrand, nur als Flächen-Akzent
   (z. B. für Bild-Platzhalter, die aktuell noch grau sind) */
.digum-corner-frame {
    border-radius: var(--digum-radius) 0 var(--digum-radius) 0;
    overflow: hidden;
}

/* Erzwingt, dass ein eingebettetes <img> exakt die gleiche Rundung
   wie sein Container übernimmt - verhindert, dass eine eigene,
   abweichende Divi-Bild-Rundung die Ecke durchbrechen lässt. */
.digum-corner-frame img {
    border-radius: inherit;
    display: block;
    width: 100%;
    height: auto;
}

/* Eigene, schlankere Variante für Buttons und ähnliche Elemente
   mit Hover-Effekten: gleiche Ecken-Logik, aber OHNE overflow:hidden,
   damit Divis Button-Hover-Animationen (z.B. einfliegendes Icon)
   nicht abgeschnitten werden. */
.digum-button-corner {
    border-radius: var(--digum-radius) 0 var(--digum-radius) 0;
}


/* ==========================================================
   4. HINTERGRUND-UTILITIES
   ========================================================== */
.digum-bg-light {
    background-color: var(--digum-bg-light);
}

.digum-bg-light-alt {
    background-color: var(--digum-bg-light-alt);
}


/* ==========================================================
   5. INHALTSBREITE (Referenzwert, primär in Divi Theme Options
   -> General Settings -> Layout Settings -> Website Content Width
   auf 1368px einzustellen. Diese Klasse ist nur ein Fallback/Hilfsmittel
   für einzelne Elemente, die bewusst von der Standardbreite abweichen sollen.)
   ========================================================== */
.digum-content-width {
    max-width: var(--digum-content-width);
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   6. T4M STICKY-BADGE
   Sitebreites, dauerhaft sichtbares Verweis-Element
   auf transformations-magazin.com, unten mittig,
   analog zum bestehenden DIGUM-Badge auf t4m selbst.
   Wird per functions.php automatisch in den Footer jeder
   Seite eingefügt - keine manuelle Einzelplatzierung nötig.
   ========================================================== */
.digum-t4m-badge {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 44px;
    background-color: var(--digum-white);
    border: 0;
    border-radius: 8px 8px 0 0; /* nur oben gerundet, wie beim T4M-eigenen Badge */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 9px 10px 6px; /* 2-3px mehr Luft oben zum Logo */
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.digum-t4m-badge:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transform: translateX(-50%) translateY(-4px);
}

.digum-t4m-badge img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

/* Auf sehr kleinen Screens etwas näher am Rand, damit
   es nicht mit Mobile-Menü-Elementen kollidiert */
@media (max-width: 480px) {
    .digum-t4m-badge {
        bottom: 0;
    }
}


/* ==========================================================
   7. MENÜ-CTA-BUTTON
   Verwandelt einen normalen WordPress-Menüpunkt (CSS-Klasse
   "digum-menu-cta" im Menü-Editor gesetzt) optisch in einen
   Button - analog zum "Jetzt Erstberatung vereinbaren"-Button
   der Lovable-Referenzseite. Kein Hover-Farbwechsel gewünscht,
   nur der normale Cursor-Wechsel zur Hand (Browser-Standard).
   Vertikal zentriert innerhalb der Menüleiste (nicht am
   unteren Rand klebend), Farbe bleibt auch im geschrumpften
   Fixed-Header-Zustand UND auf der eigenen/aktuellen Seite
   (Divis "current-menu-item"-Färbung) erhalten.
   ========================================================== */
.digum-menu-cta {
    display: inline-block;
}

.digum-menu-cta a {
    background-color: var(--digum-red) !important;
    color: var(--digum-white) !important;
    padding: 10px 24px !important; /* überschreibt Divis eigene, asymmetrische
        Menü-Link-Regel (#et-top-navigation nav > ul > li > a mit
        padding-bottom: 33px bzw. 20px im gescrollten Zustand) -
        genau das war die Ursache für das "Kleben am unteren Rand" */
    border-radius: 4px;
    display: inline-block;
    line-height: 1.2;
    text-decoration: none !important;
}

.digum-menu-cta a:hover,
.digum-menu-cta a:focus,
.digum-menu-cta a:active {
    background-color: var(--digum-red) !important;
    color: var(--digum-white) !important;
    text-decoration: none !important;
}

/* Höhere Spezifität über die tatsächliche Divi-Menü-ID (#top-menu),
   damit unsere Padding-Korrektur zuverlässig über Divis eigener
   Regel gewinnt, unabhängig vom Scroll-Zustand. */
#top-menu .digum-menu-cta a {
    padding: 10px 24px !important;
}

/* Absicherung für den geschrumpften Fixed-Header (verifiziert:
   diese Regel greift bereits korrekt, siehe Browser-Inspector-Check). */
.et-fixed-header .digum-menu-cta a,
.et_fixed_nav .digum-menu-cta a,
#main-header.et-fixed-header .digum-menu-cta a {
    background-color: var(--digum-red) !important;
    color: var(--digum-white) !important;
}

/* Zusätzlich, gezielt für den Sonderfall: Der Button ist selbst
   die aktuell besuchte Seite (/kontakt/). Divi markiert diesen
   Menüpunkt zusätzlich als "current-menu-item" mit eigener
   Farblogik, die sonst unsere Farbe im gescrollten Zustand wieder
   überschreiben kann. Über die Menü-ID #top-menu abgesichert,
   damit die Spezifität sicher gewinnt. */
#top-menu .digum-menu-cta.current-menu-item a,
.et-fixed-header #top-menu .digum-menu-cta a,
.et_fixed_nav #top-menu .digum-menu-cta a {
    color: var(--digum-white) !important;
    background-color: var(--digum-red) !important;
}

/* Letzte, gezielte Verstärkung: Divis eigene Regel
   "#top-menu li.current-menu-item > a { color: #e40521 !important; }"
   hat durch das zusätzliche li-Element im Selektor eine minimal
   höhere Spezifität als unsere vorherige Regel - hier gleichen
   wir das mit einem noch spezifischeren Selektor aus. */
.et-fixed-header #top-menu li.digum-menu-cta.current-menu-item a,
.et_fixed_nav #top-menu li.digum-menu-cta.current-menu-item a {
    color: var(--digum-white) !important;
    background-color: var(--digum-red) !important;
}


/* ==========================================================
   8. T4M-FEED-TEASER-GRID
   Layout für die automatisch aus dem T4M-RSS-Feed gezogenen
   Artikel-Teaser (siehe functions.php, Shortcode [digum_t4m_feed]).
   Vier Spalten Desktop, zwei Tablet, eine Mobile.
   ========================================================== */
.digum-t4m-teaser-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 20px;
}

.digum-t4m-teaser {
    padding: 24px;
}

.digum-t4m-teaser h4 {
    margin-top: 0;
    font-size: 1.15rem;
}

.digum-t4m-teaser p {
    font-size: 0.9rem;
}

.digum-t4m-teaser a {
    color: var(--digum-blue);
    font-weight: 700;
    text-decoration: none;
}

.digum-t4m-teaser a:hover {
    text-decoration: underline;
}

@media (max-width: 980px) {
    .digum-t4m-teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .digum-t4m-teaser-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   9. HAMBURGER-MENÜ-BREAKPOINT
   Erzwingt den Wechsel zum mobilen Hamburger-Menü bereits bei
   1100px Breite (statt Divis Standard 980px), damit iPads im
   Hochformat (~1024px) das Hamburger-Menü statt eines
   zweizeilig umbrechenden Volltext-Menüs zeigen.
   ========================================================== */
@media only screen and (max-width: 1100px) {
    #top-menu {
        display: none !important;
    }
    #et_mobile_nav_menu {
        display: block !important;
    }
}