/**
 * Eigenes CSS für das Child-Theme "Avada Child".
 *
 * Wird in functions.php nach Avadas dynamischem CSS geladen, dadurch
 * gewinnen diese Regeln bei gleicher Spezifität ohne !important.
 *
 * Reihenfolge: Avada style.min.css -> child style.css -> fusion-dynamic-css -> diese Datei
 */

/* ==========================================================================
   1. Variablen
   ========================================================================== */

:root {
    /* Beispiel – an die Avada-Optionen anpassen:
    --pw-color-primary: #1b5e20;
    --pw-color-text: #333333;
    --pw-spacing-section: 80px;
    */
}

/* ==========================================================================
   2. Resets
   ========================================================================== */

/* Inline border-color aus dem Block-Editor soll keinen Rahmen erzwingen. */
html :where([style*=border-color]) {
    border-style: none;
}

/* ==========================================================================
   3. Typografie
   ========================================================================== */

/* Beitragstitel als farbig hinterlegtes Label. */
h1.entry-title {
    background: #579555;
    color: #ffffff !important;
    padding: 0 12.5px 3px 12.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px;
    opacity: 0.9;
}

/* Vormerkung – noch ohne Regeln:
.post-content .fusion-content-layout-column {}
*/


/* ==========================================================================
   4. Header / Navigation
   ========================================================================== */

/**
 * Header stacking repair: ordered z-index values.
 *
 * ACHTUNG – unverändert übernommen, wie ausdrücklich gewünscht.
 * Stand der Prüfung (Avada 7.14.1, diese Installation):
 *
 * - .fusion-tb-header existiert hier nicht. Die Site nutzt den Legacy-Header
 *   v3 (.fusion-header-wrapper / .fusion-header / .fusion-main-menu), und
 *   `wp post list --post_type=fusion_tb_layout` liefert null Einträge.
 *   Alle .fusion-tb-header-Regeln unten laufen daher ins Leere.
 * - .fusion-builder-column-2/-3 gibt es als Klasse nicht.
 * - .fusion-builder-row-N zählt global über die ganze Seite hoch
 *   (container_counter, fusion-container.php:775) – die Nummern sind nicht
 *   „die zwei Header-Zeilen".
 * - Wirksam sind nur .fusion-header-wrapper und .fusion-header. Die bekommen
 *   hier z-index 200, wo Avada 10000 vorsieht (Flyout-Menü 99998,
 *   Such-Dropdown 999999999). Der Header liegt damit unter diesen Ebenen.
 *
 * Für das eigentliche Symptom (Dropdown verschwindet hinter dem Inhalt)
 * siehe die Notiz am Ende dieses Abschnitts.
 */

:root {
  --z-content: 10;
  --z-header: 200;
  --z-header-ui: 210;
  --z-header-menu: 220;
  --z-header-cta: 215;
  --z-header-submenu: 230;
  --z-header-row1: 230;
  --z-header-row2: 210;
}

#boxed-wrapper,
#wrapper,
#main,
#content {
  position: relative;
  z-index: var(--z-content);
}

.fusion-tb-header,
.fusion-header-wrapper,
.fusion-header {
  position: relative;
  z-index: var(--z-header) !important;
}

.fusion-tb-header .fusion-builder-row,
.fusion-tb-header .fusion-row {
  position: relative;
  z-index: var(--z-header-ui);
}

.fusion-tb-header .awb-menu,
.fusion-tb-header .awb-menu__main-ul,
.fusion-tb-header .awb-menu__main-li,
.fusion-tb-header .awb-menu__main-a,
.fusion-tb-header .awb-menu__sub-a {
  position: relative;
  z-index: var(--z-header-menu) !important;
}

.fusion-tb-header .awb-menu__sub-ul {
  z-index: var(--z-header-submenu) !important;
}

.fusion-tb-header .fusion-button,
.fusion-tb-header .fusion-button-wrapper {
  position: relative;
  z-index: var(--z-header-cta) !important;
}

/* Row 2: keep main menu column above the CTA column */
.fusion-tb-header .fusion-builder-row-1 {
  position: relative;
  z-index: var(--z-header-row1);
  isolation: isolate;
}

.fusion-tb-header .fusion-builder-row-2 {
  position: relative;
  z-index: var(--z-header-row2);
  isolation: isolate;
}

.fusion-tb-header .fusion-builder-row-2 .fusion-builder-column-2 {
  position: relative;
  z-index: var(--z-header-menu) !important;
}

.fusion-tb-header .fusion-builder-row-2 .fusion-builder-column-3 {
  position: relative;
  z-index: var(--z-header-cta) !important;
}

.fusion-tb-header .fusion-builder-row-2 .fusion-builder-column-2 .awb-menu {
  position: relative;
  z-index: var(--z-header-menu) !important;
}

.fusion-tb-header .fusion-builder-row-2 .fusion-builder-column-3 .fusion-button,
.fusion-tb-header .fusion-builder-row-2 .fusion-builder-column-3 .fusion-button-wrapper {
  position: relative;
  z-index: var(--z-header-cta) !important;
}

/* Prevent lower menu from stealing hover when top menu dropdown is open */
@supports selector(.fusion-tb-header:has(.awb-menu__main-li:hover)) {
  .fusion-tb-header:has(.fusion-builder-row-1 .awb-menu__main-li:hover),
  .fusion-tb-header:has(.fusion-builder-row-1 .awb-menu__sub-ul:hover) {
    /* no-op: used to scope pointer-events */
  }

  .fusion-tb-header:has(.fusion-builder-row-1 .awb-menu__main-li:hover) .fusion-builder-row-2,
  .fusion-tb-header:has(.fusion-builder-row-1 .awb-menu__sub-ul:hover) .fusion-builder-row-2 {
    pointer-events: none;
  }
}

/* Sticky header: shrink height smoothly */
.fusion-tb-header .fusion-builder-row-1,
.fusion-tb-header .fusion-builder-row-2 {
  transition: padding 0.25s ease;
}

.fusion-tb-header .fusion-standard-logo,
.fusion-tb-header .fusion-sticky-logo,
.fusion-tb-header .fusion-mobile-logo {
  transition: max-height 0.25s ease;
}

.fusion-tb-header .awb-menu__main-a,
.fusion-tb-header .fusion-button {
  transition: padding 0.25s ease, line-height 0.25s ease, font-size 0.25s ease;
}

.fusion-is-sticky .fusion-tb-header .fusion-builder-row-1,
.fusion-header-wrapper.fusion-is-sticky .fusion-tb-header .fusion-builder-row-1 {
  --awb-padding-top: 6px !important;
  --awb-padding-bottom: 6px !important;
}

.fusion-is-sticky .fusion-tb-header .fusion-standard-logo,
.fusion-is-sticky .fusion-tb-header .fusion-sticky-logo,
.fusion-header-wrapper.fusion-is-sticky .fusion-tb-header .fusion-standard-logo,
.fusion-header-wrapper.fusion-is-sticky .fusion-tb-header .fusion-sticky-logo {
  max-height: 180px !important;
}

.fusion-is-sticky .fusion-tb-header .awb-menu__main-a,
.fusion-header-wrapper.fusion-is-sticky .fusion-tb-header .awb-menu__main-a {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.fusion-is-sticky .fusion-tb-header .fusion-button,
.fusion-header-wrapper.fusion-is-sticky .fusion-tb-header .fusion-button {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/**
 * Offen: „Dropdown verschwindet hinter dem Inhalt" ist damit nicht behoben,
 * weil der Legacy-Header andere Klassen und eine andere z-index-Skala nutzt.
 * Der gezielte Fix dafür wäre:
 *
 *   .fusion-header-wrapper { z-index: 10001 !important; }
 *   .fusion-main-menu .sub-menu { z-index: 10002 !important; }
 *
 * Bewusst nicht aktiviert – bitte erst gegensprechen, da es dem
 * z-index: 200 weiter oben direkt widerspricht.
 */


/* ==========================================================================
   5. Inhalte / Fusion-Builder-Elemente
   ========================================================================== */

/**
 * Blog Grid / Blog Element – Titelgröße fixieren.
 *
 * !important ist hier nötig und kein Versehen: Avada generiert die
 * Titel-Typografie mit ID-Selektoren, z. B.
 *   #wrapper #main .fusion-blog-shortcode .entry-title { font-size: var(--awb-title-font-size) }
 * Spezifität 2-2-0. Dagegen kommt eine reine Klassenregel unabhängig von
 * der Ladereihenfolge nicht an. Alternative wäre, #wrapper #main hier zu
 * wiederholen – das bindet die Regel aber an Avadas Markup-Struktur.
 */
.fusion-blog-shortcode .fusion-post-title,
.fusion-blog-layout-grid .entry-title,
.fusion-blog-layout-masonry .entry-title,
.fusion-blog-shortcode .fusion-post-title a {
    font-size: 24px !important;
    line-height: 1.25;
}

/**
 * Abgeschnittene Unterlängen (g, y, p, j) in Avada Cards.
 *
 * Ursache ist Avadas eigene Regel
 *   .fusion-content-boxes .heading { overflow: hidden; margin-bottom: 15px }
 * In Kombination mit enger line-height kappt das die Unterlängen.
 * Avada hebt das in einigen Layouts selbst wieder auf (icon-boxed etc.),
 * in den übrigen nicht – daher hier flächendeckend.
 *
 * Abweichung zur Vorlage: die line-height-Regel klammert <i> und <img> aus.
 * Avada zentriert die runden Icons über line-height gleich Höhe
 * (line-height: 64px bei height: 64px, ebenso 35/50/65px für small/medium/large).
 * Ein pauschales line-height: 1.4 auf * würde das Glyph im Kreis nach oben
 * rutschen lassen – sichtbar in icon-boxed, icon-on-top, icon-on-side und
 * icon-with-title.
 */

/* Text & Überschriften */
.fusion-content-boxes *:not(i):not(img),
.fusion-content-boxes h1,
.fusion-content-boxes h2,
.fusion-content-boxes h3,
.fusion-content-boxes h4,
.fusion-content-boxes p,
.fusion-post-content h1,
.fusion-post-content h2,
.fusion-post-content h3,
.fusion-post-content p {
    line-height: 1.4 !important;
}

/* Container dürfen NICHT clippen */
.fusion-content-boxes,
.fusion-content-boxes *,
.fusion-content-boxes .fusion-column-wrapper,
.fusion-content-boxes .fusion-column-content-centered,
.fusion-post-grid,
.fusion-post-content {
    overflow: visible !important;
}

/* Extra Sicherheit für Karten-Titel */
.fusion-content-boxes .heading,
.fusion-post-grid h2,
.fusion-post-grid h3 {
    padding-bottom: 0.2em !important;
}

/**
 * Off-Canvas: nicht abschneiden, sauber scrollen.
 *
 * Abweichung zur Vorlage: Klassennamen korrigiert. Avada 7.14 rendert
 *   <div class="awb-off-canvas-wrap">         Overlay
 *     <div class="awb-off-canvas">            Panel
 *       <div class="awb-off-canvas-inner">    Rahmen/Hintergrund, overflow: hidden
 *         <div class="off-canvas-content">    Inhalt, overflow-y: auto
 * .fusion-off-canvas und .fusion-off-canvas-content gibt es hier nicht,
 * die Vorlage hätte wirkungslos im Stylesheet gestanden.
 *
 * Ursache des Abschneidens: steht die Panel-Höhe auf auto, läuft das
 * height: 100% von .off-canvas-content ins Leere, der Inhalt wächst über
 * das Panel hinaus und .awb-off-canvas-inner { overflow: hidden } kappt
 * ihn – ohne dass je ein Scrollbalken entsteht. Wird die Höhe verbindlich
 * begrenzt, scrollt Avadas eigenes overflow-y: auto von selbst.
 */

.awb-off-canvas,
.awb-off-canvas * {
    box-sizing: border-box;
}

/* Höhe verbindlich begrenzen – das ist der eigentliche Fix. */
.awb-off-canvas-wrap .awb-off-canvas,
.awb-off-canvas-wrap .awb-off-canvas-inner {
    max-height: 92vh !important;
}

/**
 * Gescrollt wird genau auf dieser einen Ebene.
 *
 * Abweichung zur Vorlage: .fusion-builder-row und .fusion-builder-column-outer
 * bekommen bewusst kein eigenes max-height/overflow-y. Verschachtelte
 * Scrollbereiche ergeben sonst zwei Scrollbalken übereinander.
 *
 * Das padding überschreibt die Innenabstände aus den Off-Canvas-Optionen
 * (var(--awb-padding-*)). Wer die dort pflegen will, nimmt die Zeile raus.
 */
.awb-off-canvas-wrap .awb-off-canvas-inner .off-canvas-content {
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 24px !important;
}

/* Mobile: Panel nutzt fast die volle Breite */
@media (max-width: 768px) {
    .awb-off-canvas-wrap .awb-off-canvas {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/**
 * Bild-Rollover: Icon durch einen Button mit Beschriftung "WEITER" ersetzen.
 *
 * Abweichung zur Vorlage: das :before bekommt font-family und font-size
 * gesetzt. Avada stylt .fusion-rollover-link:before mit
 *   font-family: awb-icons; content: "\e619";
 * also einer Icon-Schrift. Ein Wort darin rendert als Kästchen bzw.
 * Zufallsglyphen – "WEITER" wäre unlesbar gewesen.
 *
 * font-size ist nötig, weil das Elternelement auf 0 steht (blendet Avadas
 * Originaltexte aus). Avada setzt am :before zwar
 * var(--image_rollover_icon_size), das sind hier aber 15px Icon-Maß.
 *
 * Das absolute Zentrieren (position/left/top/transform) kommt von Avada und
 * bleibt bewusst stehen – es zentriert die Beschriftung im 200px-Button.
 */

.fusion-image-wrapper .fusion-rollover-content > * {
    display: none !important;
}

.fusion-image-wrapper .fusion-rollover-content a.fusion-rollover-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 14px 34px !important;
    border-radius: 10px !important;

    background: var(--primary_color, #8b0032) !important;
    color: #fff !important;

    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important;

    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;

    white-space: nowrap !important;

    font-size: 0 !important;

    border-style: solid !important;
    border-color: #fff !important;
    border-width: 1px !important;
    width: 200px !important;
}

.fusion-image-wrapper .fusion-rollover-content a.fusion-rollover-link:hover {
    background: var(--link_hover_color, #a50344) !important;
}

.fusion-image-wrapper .fusion-rollover .fusion-rollover-link:before {
    content: "WEITER" !important;

    /* ohne diese zwei Zeilen unlesbar – siehe Kommentar oben */
    font-family: inherit !important;
    font-size: 15px !important;
}

/**
 * Blog-Karten: abgerundet, weisser Inhaltsbereich, eigener Schatten.
 *
 * Verschachtelung laut Avada (templates/blog-layout.php:256/295):
 *   .fusion-post-wrapper              <- Radius + Schatten
 *     [Beitragsbild]                  <- Avada erzwingt border-radius: 0
 *     .fusion-post-content-wrapper    <- weisser Hintergrund
 *
 * Zusatz zur Vorlage: overflow: hidden am .fusion-post-wrapper. Ohne das
 * bleibt der Radius unsichtbar – Avada setzt am Bild
 *   .fusion-blog-layout-grid .fusion-post-wrapper .fusion-image-wrapper img
 *   { border-radius: 0 }
 * und der weisse Inhaltsbereich hat selbst keinen Radius. Beide wuerden die
 * abgerundeten Ecken oben und unten wieder eckig ueberdecken.
 */

.fusion-post-wrapper {
    border-radius: 12px;
    overflow: hidden; /* Zusatz – sonst greift der Radius optisch nicht */
}

.fusion-blog-layout-grid .post .fusion-post-wrapper {
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; */
    /* box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; */
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; */

    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

    /* !important noetig: Avada setzt hier mit gleicher Spezifitaet (0-3-0)
       .fusion-blog-layout-grid .fusion-post-wrapper:not(.fusion-masonary-is-transparent)
       { border: 1px solid #eaeaea; border-bottom-width: 3px } */
    border: none !important;
}

.fusion-post-content-wrapper {
    background: #fff;
}

/**
 * Trennlinien ausblenden.
 *
 * Hinweis: .fusion-content-sep ist Avadas Trenner zwischen Blogbeitraegen
 * (templates/blog-layout.php), .fusion-separator und .fusion-separator-border
 * gehoeren dagegen zum Separator-Element des Fusion Builders
 * (shortcodes/fusion-separator.php:217/295). Die Regel blendet also auch
 * jeden bewusst gesetzten Separator mit Stil "solid" aus.
 */
.fusion-body .fusion-content-sep.sep-solid,
.fusion-body .fusion-separator-border.sep-solid,
.fusion-body .fusion-separator.sep-solid {
    visibility: hidden;
    height: 0px !important;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */


/* ==========================================================================
   7. Responsive
   ========================================================================== */

/* Avada-Breakpoints (Standard):
   @media (max-width: 1024px) { }
   @media (max-width: 800px)  { }
   @media (max-width: 640px)  { }
*/