/*
 Theme Name:     LYYNX Divi 5
 Theme URI:      https://www.lyynx.eu
 Description:    High-Performance Child Theme für lyynx.eu (Optimiert für React, JSON-LD & GEO)
 Author:         LYYNX
 Author URI:     https://www.lyynx.eu
 Template:       Divi
 Version:        1.0.7
*/

/* ==========================================================================
   1. LYYNX TYPOGRAFIE (Lokales Hosting - DSGVO-konform & Anti-Faux-Bold)
   ========================================================================== */

/* --- All Round Gothic (Highlights & Alternative Headings) --- */
@font-face {
    font-family: 'All Round Gothic';
    src: url('fonts/AllRoundGothicBook.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'All Round Gothic';
    src: url('fonts/AllRoundGothicMedium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'All Round Gothic';
    src: url('fonts/AllRoundGothicDemi.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
/* ANTI-FAUX-BOLD: Leitet alle extremeren Fettschnitte auf die saubere 600er um */
@font-face {
    font-family: 'All Round Gothic';
    src: url('fonts/AllRoundGothicDemi.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'All Round Gothic';
    src: url('fonts/AllRoundGothicDemi.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* --- Museo Sans (Body Text & Primäre Headings) --- */
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans500Italic.woff2') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap;
}
/* --- Der reaktivierte Mittelweg (Semibold & Bold) --- */
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans700.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
/* Original für Black/Heavy (900) */
@font-face {
    font-family: 'Museo Sans';
    src: url('fonts/MuseoSans900.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   2. LYYNX DESIGN VARIABLES (Divi 5 Standard & Fluid Typography)
   ========================================================================== */
:root, .et-builder-body, #et-boc {
    /* Brand Colors */
    --lyynx-primary: #EB6D00;
    --lyynx-primary-hover: #CC5E00;
    --lyynx-secondary: #1A2B40;
    --lyynx-secondary-hover: #294466;
    --lyynx-bg-light: #F6F6F7;
    --lyynx-white: #FFFFFF;

    /* Typografie - Font Families (Mit sicheren Quotes für Divi 5.2.0) */
    --lyynx-font-heading: 'Museo Sans', sans-serif;
    --lyynx-font-heading-alt: 'All Round Gothic', sans-serif;
    --lyynx-font-body: 'Museo Sans', sans-serif;

    /* Fluid Typography - Skalierung zw. 320px und 1280px */
    --lyynx-size-h1: clamp(30px, 20px + 3.125vw, 60px);
    --lyynx-size-h2: clamp(25px, 22.33px + 0.833vw, 33px);
    --lyynx-size-h3: clamp(20px, 17px + 0.938vw, 29px);
    --lyynx-size-h4: clamp(17px, 15px + 0.625vw, 23px);
    --lyynx-size-body: clamp(16px, 15.67px + 0.104vw, 17px);
}

/* ==========================================================================
   3. GLOBALE FALLBACKS & FLUID TYPOGRAPHY (High Specificity)
   ========================================================================== */
/* Basis-Styling mit ID-Selektor, um Divi-Standardwerte zu überschreiben */
#page-container, 
.et-db #et-boc .et_builder_inner_content {
    font-family: var(--lyynx-font-body) !important;
    font-weight: 500; 
    color: var(--lyynx-secondary);
    -webkit-font-smoothing: antialiased;
}

/* Headings - Harter Überschrieb mit ID und !important für die Font-Family */
#page-container h1, #page-container h2, #page-container h3, #page-container h4,
.et-db #et-boc .et_builder_inner_content h1, .et-db #et-boc .et_builder_inner_content h2,
.et-db #et-boc .et_builder_inner_content h3, .et-db #et-boc .et_builder_inner_content h4 {
    font-family: var(--lyynx-font-heading) !important; 
    font-weight: 500 !important; /* Auf 500 reduziert, damit markierte 900er Wörter hervorstechen */
    color: var(--lyynx-secondary); 
    margin-bottom: 0;
}

/* Fluid Typography - Wieder zurück auf harte Selektoren ohne :where() */
#page-container h1, .et-db #et-boc .et_builder_inner_content h1 { 
    font-size: var(--lyynx-size-h1); line-height: 1.3; 
}
#page-container h2, .et-db #et-boc .et_builder_inner_content h2 { 
    font-size: var(--lyynx-size-h2); line-height: 1.4; 
}
#page-container h3, .et-db #et-boc .et_builder_inner_content h3 { 
    font-size: var(--lyynx-size-h3); line-height: 1.4; 
}
#page-container h4, .et-db #et-boc .et_builder_inner_content h4 { 
    font-size: var(--lyynx-size-h4); line-height: 1.1; 
}

/* ==========================================================================
   4. INTERAKTIONEN (LINKS & HOVER)
   ========================================================================== */
.et_pb_text_inner a, .et_pb_blurb_content a, .et_pb_toggle_content a {
    color: var(--lyynx-primary);
    text-decoration: underline; 
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.et_pb_text_inner a:hover, .et_pb_blurb_content a:hover, .et_pb_toggle_content a:hover {
    color: var(--lyynx-primary-hover);
}

/* ==========================================================================
   5. NAVIGATION & WPML (SPRACHWECHSLER)
   ========================================================================== */
/* Runde Flaggen Optimierung */
.lyynx-lang-switch .wpml-ls-statics-shortcode_actions ul {
    list-style: none !important; display: flex !important; gap: 15px; justify-content: flex-end;
}

.lyynx-lang-switch .wpml-ls-statics-shortcode_actions img.wpml-ls-flag {
    width: 32px !important; height: 32px !important; border-radius: 50% !important; object-fit: cover !important;
}

/* Menü Abstände */
.et_pb_menu .et_pb_menu__menu > nav > ul > li { padding: 0 25px !important; }
.et_pb_menu .et_pb_menu__menu > nav > ul > li:last-child { padding-right: 0 !important; }

/* ==========================================================================
   6. UTILITY KLASSEN (TYPOGRAFIE-BAUKASTEN)
   ========================================================================== */
.lyynx-font-museo { font-family: var(--lyynx-font-body) !important; }
.lyynx-font-gothic { font-family: var(--lyynx-font-heading-alt) !important; }

/* Inline Highlighting für H-Tags */
.lyynx-hl-gothic {
    font-family: var(--lyynx-font-heading-alt) !important;
    font-weight: 600 !important;
    color: var(--lyynx-primary) !important;
    display: inline-block;
}

.lyynx-weight-300 { font-weight: 300 !important; }
.lyynx-weight-500 { font-weight: 500 !important; }
.lyynx-weight-600 { font-weight: 600 !important; }
.lyynx-weight-900 { font-weight: 900 !important; }

.lyynx-color-orange { color: var(--lyynx-primary) !important; }
.lyynx-color-blue { color: var(--lyynx-secondary) !important; }

/* ==========================================================================
   7. FOOTER & GEO-ELEMENTE
   ========================================================================== */
address, address p { font-style: normal !important; color: var(--lyynx-white) !important; line-height: 1.6em !important; }
address a { color: var(--lyynx-white) !important; text-decoration: none !important; }
address a:hover { color: var(--lyynx-primary) !important; }

ul.lyynx-legal-links { list-style: none !important; display: flex; gap: 20px; flex-wrap: wrap; }
ul.lyynx-legal-links a { color: var(--lyynx-white) !important; font-size: 0.9em; text-decoration: none !important; }

/* ==========================================================================
   8. CUSTOM MODULE: STEP BOX (Divi 5 Safe & 0 CLS)
   ========================================================================== */
/* Basis-Setup für das Modul */
.lyynx-step-box {
    position: relative !important;
    /* Reserviert physischen Platz im DOM -> 0 CLS */
    margin-bottom: 18px !important; 
    /* Verhindert, dass die Divi 5 React-Engine überstehende Pseudoelemente abschneidet */
    overflow: visible !important; 
    /* Optional, aber empfohlen für saubere Kanten */
    border-radius: 8px;
}

/* Der Pfeil (Triangle) zeigt nach unten OUTSIDE der Box */
.lyynx-step-box::after {
    content: "";
    position: absolute;
    bottom: -18px; /* Exakt unter der Box platzieren */
    left: 50%; 
    transform: translateX(-50%); 
    width: 0;
    height: 0;
    /* Geometrie für Pfeil nach unten */
    border-left: 18px solid transparent;  
    border-right: 18px solid transparent; 
    /* Nutzt die Primärfarbe (z.B. Dunkelblau), anpassen falls die Box Orange ist */
    border-top: 18px solid var(--lyynx-secondary);        
    z-index: 2; 
}

/* Modifikator: Falls die Step-Box Orange ist */
.lyynx-step-box.lyynx-bg-orange::after {
    border-top-color: var(--lyynx-primary);
}

/* ==========================================================================
   9. CUSTOM MODULE: PHASEN-RIBBONS & TREPPE (SAM | Sense)
   ========================================================================== */
body .lyynx-phase-ribbon {
    position: relative !important; margin-left: -15px !important; width: calc(100% + 45px) !important;
    padding: 16px 15px !important; z-index: 10 !important; font-family: var(--lyynx-font-heading-alt) !important; 
    font-weight: 600 !important; font-size: 1.4rem !important; text-align: center !important; overflow: visible !important; 
}
body .lyynx-ribbon-dark { background-color: var(--lyynx-secondary) !important; color: var(--lyynx-white) !important; }
body .lyynx-ribbon-orange { background-color: var(--lyynx-primary) !important; color: var(--lyynx-white) !important; }
body .lyynx-phase-ribbon::before {
    content: "" !important; position: absolute !important; bottom: -15px !important; left: 0 !important;
    width: 0 !important; height: 0 !important; border-style: solid !important; z-index: -1 !important;
}
body .lyynx-ribbon-dark::before { border-width: 15px 0 0 15px !important; border-color: #0b131c transparent transparent transparent !important; }
body .lyynx-ribbon-orange::before { border-width: 15px 0 0 15px !important; border-color: #b85500 transparent transparent transparent !important; }
body .lyynx-phase-ribbon.lyynx-ribbon-arrow { width: calc(100% + 15px) !important; margin-right: 0 !important; }
body .lyynx-phase-ribbon.lyynx-ribbon-arrow::after {
    content: "" !important; position: absolute !important; top: 0 !important; right: -20px !important; 
    left: auto !important; width: 20px !important; height: 100% !important; background-color: var(--lyynx-primary) !important; 
    clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}
body .lyynx-phase-card {
    background-color: var(--lyynx-bg-light) !important; padding-right: 30px !important; padding-bottom: 40px !important;
    padding-left: 30px !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important;
}

@media (min-width: 981px) {
    body .lyynx-phase-ribbon.lyynx-step-1 { margin-top: 90px !important; }
    body .lyynx-phase-ribbon.lyynx-step-2 { margin-top: 60px !important; }
    body .lyynx-phase-ribbon.lyynx-step-3 { margin-top: 30px !important; }
    body .lyynx-phase-ribbon.lyynx-step-4 { margin-top: 0px !important; }
    body .lyynx-phase-card.lyynx-card-step-1, body .lyynx-phase-card.lyynx-card-step-1:hover { padding-top: 40px !important; }
    body .lyynx-phase-card.lyynx-card-step-2, body .lyynx-phase-card.lyynx-card-step-2:hover { padding-top: 70px !important; }
    body .lyynx-phase-card.lyynx-card-step-3, body .lyynx-phase-card.lyynx-card-step-3:hover { padding-top: 100px !important; }
    body .lyynx-phase-card.lyynx-card-step-4, body .lyynx-phase-card.lyynx-card-step-4:hover { padding-top: 130px !important; }
    body .lyynx-phase-card p { font-size: clamp(16px, 0.5vw + 12px, 18px) !important; line-height: 1.6em !important; }
    body .lyynx-phase-card p strong.lyynx-weight-900 { font-size: clamp(20px, 1vw + 14px, 26px) !important; line-height: 1.3em !important; display: block !important; margin-bottom: 15px !important; }
}

/* ==========================================================================
   10. CUSTOM MODULE: SPRECHBLASEN-LAYOUT (Final Mockup Match)
   ========================================================================== */
/* Basis-Setup */
body .lyynx-speech-left, 
body .lyynx-speech-right {
    position: relative !important; 
    background-color: var(--lyynx-secondary) !important; 
    border-radius: 12px !important; /* ZURÜCK ZUM MOCKUP: Straffere, moderne Ecken */
    padding: 1.2rem 1.5rem !important; /* Knackiger Innenabstand */
    filter: drop-shadow(0px 15px 25px rgba(26, 43, 66, 0.25)) !important; /* Satterer, schwererer Schatten */
    transform: translateZ(0) !important; 
    width: 100% !important; 
    max-width: 330px !important; /* Kürzer! Gibt dem "n" mehr Platz zum Atmen */
    margin-bottom: 50px !important; /* WICHTIG: Zieht die Blasen vertikal auseinander */
    text-align: center !important; 
    border: none !important; 
}

/* Seitliche Außenabstände */
body .lyynx-speech-left { margin-left: auto !important; margin-right: 30px !important; }
body .lyynx-speech-right { margin-right: auto !important; margin-left: 30px !important; }

/* Typografie */
body .lyynx-speech-left p, 
body .lyynx-speech-right p {
    color: #E2E8F0 !important; 
    font-size: calc(var(--lyynx-size-body) * 0.95) !important; 
    line-height: 1.35 !important; 
    margin: 0 !important;
}

body .lyynx-speech-left p strong, 
body .lyynx-speech-right p strong { 
    display: block !important;
    color: var(--lyynx-white) !important; 
    font-family: var(--lyynx-font-heading) !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important; 
    font-size: 1.05em !important;
}

/* --------------------------------------------------------------------------
   POSITIONIERUNG & DREIECKE
   -------------------------------------------------------------------------- */
/* Obere Blasen wieder auf Null setzen, da margin-bottom jetzt den Abstand regelt */
body .lyynx-speech-left:nth-of-type(1),
body .lyynx-speech-right:nth-of-type(1) {
    margin-top: 0px !important; 
}

/* OBERE BLASE LINKS: Neigung nach unten */
body .lyynx-speech-left:nth-of-type(1)::after {
    content: "" !important; position: absolute !important; 
    top: 65% !important; 
    right: -15px !important; 
    transform: translateY(-50%) !important;
    border-width: 24px 0 10px 16px !important; 
    border-style: solid !important;
    border-color: transparent transparent transparent var(--lyynx-secondary) !important;
}

/* OBERE BLASE RECHTS: Neigung nach unten */
body .lyynx-speech-right:nth-of-type(1)::after {
    content: "" !important; position: absolute !important; 
    top: 65% !important; 
    left: -15px !important; 
    transform: translateY(-50%) !important;
    border-width: 24px 16px 10px 0 !important; 
    border-style: solid !important;
    border-color: transparent var(--lyynx-secondary) transparent transparent !important;
}

/* UNTERE BLASE LINKS: Standard zentriert */
body .lyynx-speech-left:nth-of-type(2)::after {
    content: "" !important; position: absolute !important; 
    top: 50% !important; 
    right: -15px !important; 
    transform: translateY(-50%) !important;
    border-width: 16px 0 16px 16px !important; 
    border-style: solid !important;
    border-color: transparent transparent transparent var(--lyynx-secondary) !important;
}

/* UNTERE BLASE RECHTS: Standard zentriert */
body .lyynx-speech-right:nth-of-type(2)::after {
    content: "" !important; position: absolute !important; 
    top: 50% !important; 
    left: -15px !important; 
    transform: translateY(-50%) !important;
    border-width: 16px 16px 16px 0 !important; 
    border-style: solid !important;
    border-color: transparent var(--lyynx-secondary) transparent transparent !important;
}

/* Das Logo (n) Mitte */
body .lyynx-center-brand-mark {
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    height: 100% !important; 
    min-width: 180px !important; 
}

/* ==========================================================================
   11. CUSTOM MODULE: PROMISE GRID (White Cards)
   ========================================================================== */
body .lyynx-promise-grid { gap: 30px !important; }
body .lyynx-promise-card {
    background-color: var(--lyynx-white, #ffffff) !important; padding: 40px 40px 60px 40px !important;
    position: relative !important; border-radius: 8px !important; overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body .lyynx-promise-card::after {
    content: "" !important; position: absolute !important; bottom: 0 !important; right: 0 !important;
    width: 65px !important; height: 65px !important; background-color: var(--lyynx-primary) !important;
    border-top-left-radius: 100% !important; z-index: 1 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>') !important;
    background-repeat: no-repeat !important; background-position: 60% 60% !important; background-size: 24px !important;
}

/* ==========================================================================
   12. RESPONSIVE FALLBACKS
   ========================================================================== */
@media (max-width: 980px) {
    body .lyynx-staircase-row .et_pb_column .lyynx-phase-ribbon { width: calc(100% + 15px) !important; margin-top: 0 !important; }
    body .lyynx-phase-card { padding-top: 30px !important; margin-bottom: 30px !important; }
    .lyynx-center-brand-mark { grid-row: auto !important; min-width: auto !important; max-width: 160px !important; margin: 20px auto !important; }
    .lyynx-speech-left, .lyynx-speech-right { margin: 0 auto !important; max-width: 450px !important; }
    .lyynx-speech-left::after, .lyynx-speech-right::after { display: none !important; }
}