/*
 Theme Name:   Industrium Child
 Description:  Industrium Child Theme
 Theme URI:	   https://demo.artureanec.com/themes/industrium
 Author:       Artureanec
 Author URI:   https://demo.artureanec.com
 Template:     industrium
 Version:      1.0.0
 License: GNU  General Public License version 3.0
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  industrium-child
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* Team-Kachel: Qualifikation steht jetzt unter dem Namen statt der Funktion.
   Ursprüngliches Parent-CSS (css/theme.css):
     .team-item .team-item-position:before { content: '.'; margin-right: 3px; }
   Punkt-Präfix entfernen und stattdessen den Abstand übernehmen, den zuvor
   .post-title:not(:first-child) hatte (jetzt ist post-title der erste, nicht
   mehr die Qualifikation). */
.team-item .team-item-position:before {
    content: none;
}
.team-item .team-item-position:not(:first-child) {
    margin-top: 5px;
}

/* Social-/Kontakt-Icons (LinkedIn, Mail, Telefon ...): Das Parent-CSS (css/theme.css) setzt
   in ".wrapper-socials a" fest die Brands-Schriftart für ALLE Links in diesem Wrapper -
   unabhängig von deren tatsächlicher FA-Stil-Klasse (fab/fas/far). Bisher gab es dort nur
   Marken-Icons (LinkedIn, Twitter ...), daher fiel es nie auf. Eine Ausnahme existiert im
   Parent bereits für Fontello (".wrapper-socials a[class^='fontello']"); hier dieselbe Technik
   für Solid ("fas") und Regular ("far") Icons, z.B. fa-envelope, fa-phone. Höhere Spezifität
   (Klasse + Element + Attribut) als ".wrapper-socials a", gewinnt daher unabhängig von der
   Reihenfolge im Stylesheet. */
.wrapper-socials a[class^="fas "] {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.wrapper-socials a[class^="far "] {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
}

/* Seiten-Loader (Logo beim Laden der Seite): war vertikal nach unten verschoben.
   Ursprüngliches Parent-CSS (css/theme.css):
     .page-loader { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100px; }
     .page-loader-inner { position:absolute; left:0; top:0; right:0; bottom:0; ... }
   ".page-loader-inner" liegt durch "position:absolute" ausserhalb des normalen Layout-Flusses
   und trägt dadurch NICHT zur Höhe von ".page-loader" bei - dessen Höhe bleibt effektiv 0.
   Die "top:50%; translateY(-50%)"-Zentrierung von ".page-loader" zentriert dadurch nur einen
   Punkt ohne Ausdehnung statt der echten Logo-Höhe; das Bild hängt ab diesem Punkt nach unten
   heraus, statt darum zentriert zu sein (horizontal war es bereits korrekt, da ".page-loader"
   dort eine echte Breite hat). Fix: ".page-loader-inner" wieder in den normalen Fluss bringen,
   damit es seine echte (Bild-)Höhe an ".page-loader" weitergibt. Die Pulsier-Animation (reines
   transform:scale()) bleibt davon unberührt. Strukturell/groessenunabhaengig, daher global. */
.page-loader-container .page-loader-inner {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
}

/* Loader-Grösse: Parent-Default ist 100px, gewünscht deutlich grösser auf Desktop/Laptop.
   Gestuft nach den tatsächlichen Elementor-Breakpoints dieser Seite, damit zwischen
   768–1199px keine Lücke auf den Parent-Default zurückfällt. */
@media only screen and (min-width: 1200px) {
    .page-loader {
        width: 300px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .page-loader {
        width: 200px;
    }
}
@media (max-width: 767px) {
    .page-loader {
        width: 120px;
    }
}

/* Hero-Slider Startseite: Der Titel (.industrium-heading-content) hat bereits einen weichen
   Schlagschatten (via Elementor-Widget-Style: text-shadow: 0 0 80px rgb(0,0,0)) fuer besseren
   Kontrast zum Hintergrundfoto. Der Beschreibungstext direkt darunter
   (.industrium-content-wrapper-2 .content-slider-item-text) hatte bisher keinen - zur besseren
   Lesbarkeit hier denselben Schatten uebernommen. Auf den groessten Breakpoint beschraenkt;
   darunter kein Schatten (Theme-Default). */
@media only screen and (min-width: 1200px) {
    .industrium-content-wrapper-2 .content-slider-item-text {
        text-shadow: 0 0 80px rgb(0, 0, 0);
    }
}

/* Startseite: Eyebrow-Titel "DELTA Ingenieure" ueber "DELTA - Der Unterschied traegt."
   (Widget elementor-element-e948b09) von 16px auf 18px vergroessert. Bewusst nur auf dieses
   eine Widget beschraenkt, damit die anderen Eyebrows ("Expertise", "Features" usw.)
   unveraendert bei 16px bleiben. Nur groesster Breakpoint, darunter Theme-Default (0.8888em). */
@media only screen and (min-width: 1200px) {
    .elementor-element-e948b09 .industrium-subheading.no-dot {
        font-size: 18px;
    }
}

/* Seite "Fachbereiche" (/fachbereiche/), 1. Reihe: Titel "Tragwerksplanung"
   (Widget elementor-element-c960e53, h5 span.industrium-heading-content) von 20px auf 25px
   vergroessert. Bewusst nur auf dieses eine Widget beschraenkt (NICHT sitewide fuer alle
   Icon-Box-Titel). Nur groesster Breakpoint. */
@media only screen and (min-width: 1200px) {
    .elementor-element-c960e53 .icon-box-header h5 span {
        font-size: 25px;
    }
}

/* Team-Kacheln (Grid): Bilder waren standardmässig schwarzweiss mit Farb-Effekt beim Hover -
   das ist nicht mehr gewünscht. Stattdessen: immer farbig, dafür sanfter Zoom beim Hover.
   Ursprüngliches Parent-CSS (css/theme.css):
     .team-item .team-item-media img { filter: saturate(0%); transition: filter 0.3s; ... }
     .team-item:hover .team-item-media img { filter: saturate(100%); }
   overflow:hidden auf dem Bild-Container ergänzt, damit das gezoomte Bild sauber innerhalb
   der Kachel abgeschnitten wird statt über den Rand hinauszuwachsen. Farb-/Effekt-Regeln sind
   groessenunabhaengig und bleiben global. */
.team-item .team-item-media {
    overflow: hidden;
}
.team-item .team-item-media img {
    filter: saturate(100%);
    transition: transform 0.3s ease;
}
.team-item:hover .team-item-media img {
    filter: saturate(100%);
    transform: scale(1.08);
}

/* Runder CTA-Button "Arbeiten bei DELTA Ingenieure" im Hero der Startseite.
   Markup wird per PHP+JS in ".content-slider-container" eingehaengt (siehe functions.php,
   industrium_child_hero_cta_button()) - dieser Container hat bereits position:relative,
   daher funktioniert position:absolute hier zuverlaessig relativ zum Hero.
   Platzierung oben rechts im Hero (Siegel-Optik), damit es sich nicht mit dem Text unten
   links oder dem Slide-Zaehler unten rechts ueberschneidet - bei Bedarf anpassen.
   Pfeil (round-cta-button-arrow) uebernimmt Zeichen+Technik vom bestehenden "Mehr erfahren"-
   Button (.industrium-content-slider-widget .industrium-content-wrapper-3 .industrium-button,
   css/theme.css Zeile ~16298): Fontello-Icon-Zeichen \e839, beim Hover 45 Grad gedreht.
   Form/Verhalten (Kreis, Hover-Animation, Farbe) ist groessenunabhaengig und bleibt global;
   Groesse & Position sind gestuft, da ein 180px-Kreis auf Mobile mit dem Hero-Titel
   kollidieren wuerde. Tablet-/Mobile-Werte sind Schaetzungen, bitte visuell pruefen. */
.round-cta-button {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #009a96;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.round-cta-button-text {
    display: block;
    color: #fff;
    font-weight: 600;
    line-height: 1.3;
}
.round-cta-button-arrow {
    display: block;
    font-family: 'fontello';
    color: #fff;
    transition: transform 0.3s;
}
.round-cta-button-arrow:before {
    content: '\e839';
}
.round-cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.round-cta-button:hover .round-cta-button-arrow {
    transform: rotate(45deg);
}
@media only screen and (min-width: 1200px) {
    .round-cta-button {
        top: 40px;
        right: 40px;
        width: 180px;
        height: 180px;
    }
    .round-cta-button-text {
        font-size: 16px;
        padding: 0 20px;
    }
    .round-cta-button-arrow {
        margin-top: 8px;
        font-size: 17px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .round-cta-button {
        top: 24px;
        right: 24px;
        width: 130px;
        height: 130px;
    }
    .round-cta-button-text {
        font-size: 13px;
        padding: 0 14px;
    }
    .round-cta-button-arrow {
        margin-top: 6px;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .round-cta-button {
        top: 16px;
        right: 16px;
        width: 100px;
        height: 100px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    }
    .round-cta-button-text {
        font-size: 11px;
        padding: 0 10px;
    }
    .round-cta-button-arrow {
        margin-top: 4px;
        font-size: 12px;
    }
}

/* Team-Kachel: Namens-/Qualifikations-/Funktions-Farben & Typo, Reihenfolge Funktion vor
   Qualifikation.
   - Name (.post-title): Markenfarbe #009a96, groesser/kraeftiger (25px/700) mit leichtem
     letter-spacing.
   - Funktion (team_member_position) UND Qualifikation (team_member_skills_list) nutzen beide
     dieselbe Basis-Klasse ".team-item-position" (siehe content-industrium_team.php), damit
     Schriftart/-groesse/-farbe automatisch identisch sind: #000000.
   - Reihenfolge jetzt: Name -> Funktion -> Qualifikation. Der Abstand liegt VOR der
     Qualifikation (Klasse ".team-item-qualification"), nicht mehr vor der Funktion - so bleibt
     der Abstand konstant, egal ob jemand eine oder zwei Qualifikationen hat. Update 28.09.:
     nur noch eine halbe Blindzeile statt einer ganzen (11px / 8px statt 22px / 16px).
   Farben sind groessenunabhaengig und bleiben global; Schriftgroesse/Abstand sind gestuft,
   damit der Name auf schmalen Team-Karten nicht zu dominant wirkt (Werte <1200px geschaetzt). */
.team-item .post-title {
    color: #009a96;
}
.team-item .team-item-position {
    color: #000000;
}
@media only screen and (min-width: 1200px) {
    .team-item .post-title {
        font-size: 25px;
        font-weight: 700;
        letter-spacing: -0.6px;
    }
    .team-item .team-item-position.team-item-qualification {
        margin-top: 11px;
    }
}
@media only screen and (max-width: 1199px) {
    .team-item .post-title {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.4px;
    }
    .team-item .team-item-position.team-item-qualification {
        margin-top: 8px;
    }
}

/* Header-Logo: Original-Bild ist 1157px breit, ohne Begrenzung wuerde es auf jeder
   Bildschirmgroesse riesig/kaputt aussehen - daher an ALLEN Breakpoints begrenzt (nicht nur
   Desktop). Gestuft nach den tatsaechlichen Elementor-Breakpoints dieser Seite (Mobile/
   Tablet portrait/Tablet landscape/Laptop/Desktop).
   WICHTIG: Das Theme rendert bei schmaleren Breiten ein KOMPLETT SEPARATES Mobile-Header-
   Markup (.mobile-header .mobile-header-row .logo-container img), das parallel im DOM
   existiert - der Desktop-Header (.header-icons-container ...) wird dann nur unsichtbar
   geschaltet, nicht entfernt. Ohne den zweiten Selektor greift die Begrenzung dort nicht,
   da das unsichtbare Desktop-Logo zwar korrekt begrenzt ist, aber das sichtbare Mobile-Logo
   komplett unbegrenzt bleibt (25.09. live festgestellt: 789px statt 150px bei 950px Breite). */
.header-icons-container .logo-container img,
.mobile-header-row .logo-container img {
    max-width: 130px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-icons-container .logo-container img,
.mobile-header-row .logo-container img {
        max-width: 150px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1279px) {
    .header-icons-container .logo-container img,
.mobile-header-row .logo-container img {
        max-width: 170px;
    }
}
@media only screen and (min-width: 1280px) and (max-width: 1600px) {
    .header-icons-container .logo-container img,
.mobile-header-row .logo-container img {
        max-width: 200px;
    }
}
@media only screen and (min-width: 1601px) {
    .header-icons-container .logo-container img,
.mobile-header-row .logo-container img {
        max-width: 240px;
    }
}

/* Bullet-Stil: eckiger Punkt statt Standard-Pfeil/Dreieck. Design-/Markenentscheidung,
   keine grössenabhängige Anpassung - daher bewusst sitewide/global (nicht auf Desktop
   beschraenkt), sonst wuerde auf Mobile/Tablet wieder der alte Standard-Pfeil erscheinen. */
ul > li {
    padding: 0 0 0 1.2222em;
}
.elementor-widget-text-editor ul > li::before {
    content: "\25A0";
    font: 0.9em / 1em fontello;
    top: 0.45em;
    left: 0;
    color: #009a96 !important;
}
ul > li::before {
    content: "\25A0";
    font: 0.9em / 1em fontello;
    color: #009a96;
    top: 0.45em;
    left: 0;
}

/* Icon-List-Pfeile (Elementor Icon-List-Widget) drehen - Design-Entscheidung, global. */
.elementor-icon-list-icon svg {
    transform: rotate(-45deg);
    transform-origin: center;
    color: #767676 !important;
}

/* Navbar: Such-Icon-Bereich + "E-MAIL"-Button ragten unten aus der Navbar heraus.
   Ursache: Parent-CSS setzt .header-icons-container.icons-container-big einen fest
   eingebackenen negativen unteren Rand (margin: 0 0 -12px 20px). Struktureller Bugfix
   ohne Groessenabhaengigkeit, global. */
.header-icons-container.icons-container-big {
    margin-bottom: 0;
}

/* Footer-Anpassungen Style 1: Widget-Breite auf Desktop (Theme wechselt hier selbst von
   4 auf 3 Spalten). Bewusst beim Theme-eigenen Breakpoint (1200px) belassen. */
@media only screen and (min-width: 1200px) {
    .footer-type-1 .footer-widgets .widget:nth-child(4n+1) {
        width: calc(31%);
    }
    .footer-type-1 .footer-widgets .widget {
        width: calc(32%);
        margin-left: 0;
        margin-right: 20px;
    }
}

/* Footer-Rahmen (Style 1): angepasste Breite/Position des dekorativen Trenners zwischen
   Footer-Sektionen. Beim Theme-eigenen Breakpoint (992px) belassen, da das Parent-CSS genau
   dort das Original-Pendant definiert. */
@media only screen and (min-width: 992px) {
    .footer-section + .footer-section:before {
        left: 30px;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: calc(100%);
        max-width: 1430px;
    }
}

/* Zentrierten Bottom-Footer ausblenden - strukturell, global. */
.footer-section.footer-section-bottom:last-child {
    display: none;
}

/* Footer "Rechtliches" Einrueckungs-Fix: der 3. Footer-Widget-Block (Rechtliches, ein klassisches
   Nav-Menu-Widget innerhalb eines Gutenberg-Group-Blocks) hat einen zusaetzlichen inneren
   .widget-Wrapper mit eigenem margin-left:15px, der sich zum aeusseren margin-left:15px addiert
   und dadurch 15px weiter eingerueckt ist als "Anschrift"/"Telefon". Live verifiziert (25.09.). */
.footer-widgets .widget .widget_industrium_nav_menu_widget {
    margin-left: 0;
}

/* Footer-Logo auf dem Smartphone ueber den Anschrifts-Block verschieben (statt darunter).
   Struktur "Anschrift"-Widget: H5, P, Spacer, Figure(Logo) - reine Gutenberg-Flow-Liste.
   Auf max-width 767px (Mobile-Tier) auf Flex/Column umstellen und das Bild per order nach vorne holen. */
@media (max-width: 767px) {
    .footer-widgets .widget:first-child .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
    }
    .footer-widgets .widget:first-child .wp-block-image {
        order: -1;
        margin-bottom: 60px;
    }
}

/* /fachbereiche: weisser Abstand zwischen den grau hinterlegten Fachbereichs-Kacheln, wenn sie
   auf Tablet/Mobile untereinander gestapelt werden. Live verifiziert (25.09.): die Kacheln liegen
   in mehreren separaten Flexbox-Containern (Elementor "Flex Container"), deren Zeilen ab
   max-width 991px umbrechen (flex-wrap: wrap) - das ist der Stapel-Breakpoint. Innerhalb einer
   Zeile beruehren sich die Kacheln direkt (0px Abstand), da das margin-bottom auf dem inneren
   .elementor-widget-container mit dem Eltern-Element kollabiert. Fix: margin-bottom direkt auf
   das Flex-Item selbst (.elementor-widget-industrium_icon_box) setzen - Flex-Item-Margins
   kollabieren nicht, das erzeugt zuverlaessig einen gleichmaessigen weissen Zwischenraum. */
@media (max-width: 991px) {
    .elementor-widget-industrium_icon_box {
        margin-bottom: 20px;
    }
}

/* Footer-Widgets: oberen Abstand des Parent-Themes nur auf Mobile entfernen (theme.css setzt
   34px Basis/Mobile, 74px ab 768px - der 74px-Wert auf Desktop/Tablet wird bewusst NICHT
   angetastet, wird dort noch gebraucht). Scoped auf max-width:767px (Mobile-Tier, wie an
   anderer Stelle im File verwendet). */
@media (max-width: 767px) {
    .footer-widgets > .widget {
        margin-top: 0;
    }
}

/* Hero-Slider (Startseite, Widget "industrium_content_slider"): Hintergrund-Videos sollen
   oben statt mittig ausgerichtet sein (object-position). Scope bewusst auf den Content-Slider
   begrenzt, falls object-fit:cover-Videos anderswo im Theme absichtlich zentriert bleiben
   sollen. Live verifiziert (28.09.): Parent-Theme setzt object-fit:cover + object-position:
   50% 50% auf .elementor-background-video-hosted innerhalb .elementor-background-video-container. */
.content-slider .elementor-background-video-container video.elementor-background-video-hosted {
    object-position: 50% 0%;
}

/* Suchergebnis-Seite (?s=...): Autoren-/Datumsinfo ausblenden, Highlight-Farbe der
   Suchbegriffe auf Markenfarbe #009a96 setzen. Bewusst auf body.search-results (WordPress
   Kern-Body-Klasse, nur auf der Suchergebnisseite vorhanden) begrenzt, da .post-meta-header
   und <mark> im Theme auch anderswo (z.B. normale Blog-Listings) mit gewuenschtem
   Datum/Autor bzw. anderer Bedeutung vorkommen koennen - global ausblenden waere zu riskant. */
body.search-results .post-meta-header {
    display: none;
}

body.search-results mark {
    background-color: #009a96;
    color: #fff;
}

/* Suchergebnis-Seite: Hero-Bereich (Bild + H1) wird fuer is_search() komplett unterdrueckt
   (siehe templates/page-title/page-title.php im Child-Theme) - der Titel "Suchergebnisse
   fuer ..." wird stattdessen als H2 direkt im Seiteninhalt ausgegeben (siehe search.php im
   Child-Theme). Hier nur der Abstand dafuer, da das bisherige Hero-Padding (50px oben/unten)
   wegfaellt. */
body.search-results .search-results-page-title {
    margin: 60px 0 30px;
}