/*
Theme Name: Hello Elementor Child
Theme URI: http://example.com/
Description: Hello Elementor Child Theme
Author: Your Name
Author URI: http://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Importing styles from parent theme */
@import url("../hello-elementor/style.css");

/* Add your custom styles below */

/* ===== Hero-Schriftart für ALLE Überschriften site-wide (2026-07-18) =====
   Vereinheitlicht die Überschriften der gesamten Seite auf die Schrift des
   neuen Hero. Body-Text bleibt unverändert. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1, .elementor-widget-heading h2,
.elementor-widget-heading h3, .elementor-widget-heading h4,
.elementor-widget-heading h5, .elementor-widget-heading h6 {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 700 !important;   /* einheitliche Schriftstärke wie im Hero */
}

/* Footer: Daten-Attribution "Price and Risk Data by leeway" (2026-07-18) */
.ff-leeway-attr{display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:12px;font-weight:400;color:#8FA6B4;line-height:1;flex-wrap:wrap;
    letter-spacing:normal;word-spacing:normal;}
.ff-leeway-attr a{display:inline-flex;align-items:center;line-height:0;}
.ff-leeway-attr img{height:22px !important;width:auto !important;max-width:none !important;display:inline-block !important;transition:opacity .15s;}
.ff-leeway-attr a:hover img{opacity:.8;}

/* "Kostenlos starten" (764) + "Cockpit" (877) Nav-Buttons in Grün statt Coral (2026-07-18/19) */
li.menu-item-764 > a,
li.menu-item-877 > a { background-color: #02D095 !important; color: #04120d !important; }
li.menu-item-764 > a:hover,
li.menu-item-877 > a:hover { background-color: #22e0a6 !important; }

/* Abstand in der Kopfzeile zwischen "Kostenlos starten" (764) und "Login" (42) (2026-07-18) */
li.menu-item-42.show-login { margin-left: 22px !important; }

/* ===== Mobiles Hamburger-Menü: die zwei CTA-Schaltflächen (2026-07-21) =====
   Im Klappmenü lief "Kostenlos starten" randlos über die volle Breite (390px),
   während "Login" durch das Desktop-margin-left:22px eingerückt und dadurch
   schmaler war (368px) — und beide klebten ohne Abstand aneinander.
   Jetzt: gleicher linker/rechter Rand -> identische Breite, plus 12px Luft. */
@media (max-width: 1024px) {
    .elementor-nav-menu--dropdown li.menu-item-764,
    .elementor-nav-menu--dropdown li.menu-item-42.show-login {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto !important;
    }
    .elementor-nav-menu--dropdown li.menu-item-42.show-login {
        margin-top: 12px !important;
    }
}

/* ===== Premiumvorteile: Diamant über der Karten-Überschrift (2026-07-21) =====
   Der türkise Diamant (Bild-Widget e3d8737, absolut positioniert, top:12.5px)
   hängt an der oberen linken Ecke der "Premium Paket"-Karte. Auf Tablet/Handy
   bricht die Überschrift auf zwei Zeilen und rückt nach links -> der Diamant
   lag auf dem "P" von "Premium". Unter 1025px sitzt er jetzt unterhalb der
   Überschrift links neben dem Preis. Desktop bleibt unverändert. */
@media (max-width: 1024px) {
    .elementor-element.elementor-element-e3d8737 { top: 104px !important; }
}
/* Ab 1025px steht die Überschrift einzeilig, der Diamant bleibt an der Ecke —
   er lag dort aber auf dem "P" von "Premium". Deshalb nach links aus der Karte
   heraus schieben (statt nach unten), damit die Badge-Optik erhalten bleibt. */
@media (min-width: 1025px) {
    .elementor-element.elementor-element-e3d8737 { left: -70px !important; }
}

/* ===== Abonnementpläne: Diamant-Badge der "Premium Paket"-Karte (2026-07-21) =====
   Das Bild-Widget f83eee6 ist absolut zur KARTENREIHE (7232520) positioniert
   (top: -4% / left: 48% der Reihe). Solange alle 4 Karten nebeneinander stehen,
   sitzt es genau auf der Ecke der Premium-Karte. Sobald die Karten umbrechen
   (Tablet 2x2, Handy gestapelt), wächst die Reihenhöhe auf ein Vielfaches -> das
   Badge wanderte weit nach oben und lag auf der Liste "Keine Mindestlaufzeit ...".
   Unter 1025px daher ausblenden und stattdessen fest an der Premium-Karte
   verankern (::after; ::before ist dort schon für den grünen Rahmen-Ring belegt). */
@media (max-width: 1024px) {
    .elementor-element.elementor-element-f83eee6 { display: none !important; }
    .elementor-element.elementor-element-ac6ef3c::after {
        content: "";
        position: absolute;
        top: -34px;
        left: -24px;
        width: 92px;
        height: 64px;
        background: url("/wp-content/uploads/2025/11/dimond_icon.svg") no-repeat center/contain;
        z-index: 200;
        pointer-events: none;
    }
}

/* ===== Cockpit-Überschriften auf die Site-Überschriftenschrift (2026-07-18) =====
   Haupttabs (Meine Suche/Watchlist/Portfolio/Konto/Paket) laufen sonst in
   Merriweather, die Frame-Überschriften darunter in Space Grotesk. */
#ubersicht_fonds_data, #watchlist_data, #portfolio_data, #kontoinformationen_data, #mein_packet_data,
#ubersicht_fonds_data .e-n-tab-title-text, #watchlist_data .e-n-tab-title-text,
#portfolio_data .e-n-tab-title-text, #kontoinformationen_data .e-n-tab-title-text,
#mein_packet_data .e-n-tab-title-text,
.page-id-825 .elementor-image-box-title {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

/* ===== Cockpit: nur 3 Tabs sichtbar (2026-07-19) =====
   Nur Meine Suche / Meine Watchlist / Mein Portfolio in der Tab-Leiste.
   "Mein Konto" und "Mein Paket" ausgeblendet — die Inhalte bleiben erreichbar über
   /kontodetails/ (Menü "Kontodetails") bzw. /dashboard/#paket ("Abonnement verwalten");
   der Hash-Router klickt den versteckten Tab-Button. */
#kontoinformationen_data, #mein_packet_data { display: none !important; }

/* ===== Dropdown-Einträge mit Titel + Untertext (leeway-Stil, 2026-07-18) =====
   Gilt für "Funktionen" (321), "Finanzbildung" (4722), "Über Uns" (1545)
   "Depot & Sparplan" (1100), "Mediathek" (401) und "Konto" (.ff-konto-menu). */
.menu-item-321 > ul.sub-menu,
.menu-item-4722 > ul.sub-menu,
.menu-item-1545 > ul.sub-menu,
.menu-item-1100 > ul.sub-menu,
.menu-item-401 > ul.sub-menu,
.ff-konto-menu > ul.sub-menu { min-width: 340px !important; padding: 8px !important; }
.menu-item-321 > ul.sub-menu > li,
.menu-item-4722 > ul.sub-menu > li,
.menu-item-1545 > ul.sub-menu > li,
.menu-item-1100 > ul.sub-menu > li,
.menu-item-401 > ul.sub-menu > li,
.ff-konto-menu > ul.sub-menu > li { margin: 0 !important; }
.menu-item-321 > ul.sub-menu > li > a.elementor-sub-item,
.menu-item-4722 > ul.sub-menu > li > a.elementor-sub-item,
.menu-item-1545 > ul.sub-menu > li > a.elementor-sub-item,
.menu-item-1100 > ul.sub-menu > li > a.elementor-sub-item,
.menu-item-401 > ul.sub-menu > li > a.elementor-sub-item,
.ff-konto-menu > ul.sub-menu > li > a.elementor-sub-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    height: auto !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    padding: 11px 16px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background-color .15s ease, color .15s ease;
}
.menu-item-321 > ul.sub-menu > li > a.elementor-sub-item::after,
.menu-item-4722 > ul.sub-menu > li > a.elementor-sub-item::after,
.menu-item-1545 > ul.sub-menu > li > a.elementor-sub-item::after,
.menu-item-1100 > ul.sub-menu > li > a.elementor-sub-item::after,
.menu-item-401 > ul.sub-menu > li > a.elementor-sub-item::after,
.ff-konto-menu > ul.sub-menu > li > a.elementor-sub-item::after {
    display: block;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #8FA6B4 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: normal !important;
}
/* Funktionen (321) */
.menu-item-321 > ul.sub-menu > li > a[href$="#suche"]::after     { content: "Die Ampel – 9.000+ Fonds & ETFs"; }
.menu-item-321 > ul.sub-menu > li > a[href$="#watchlist"]::after { content: "Interessante Fonds & ETFs im Auge behalten"; }
.menu-item-321 > ul.sub-menu > li > a[href$="#portfolio"]::after { content: "Wie laufen meine Fonds & ETFs?"; }
.menu-item-321 > ul.sub-menu > li > a[href$="/dashboard/"]::after { content: "Alle Funktionen an einem Ort"; }
/* Finanzbildung (4722) — adressiert per URL-Pfad (umgebungsstabil) */
.menu-item-4722 > ul.sub-menu > li > a[href*="/altersvorsorge"]::after   { content: "Alles zur Förderung ab 2027"; }
.menu-item-4722 > ul.sub-menu > li > a[href*="/finanzbildung/"]::after    { content: "Renditen seit 1901"; }
.menu-item-4722 > ul.sub-menu > li > a[href*="tradingmasters.de"]::after  { content: "Börsenspiel – Start September 2027"; }
.menu-item-4722 > ul.sub-menu > li > a[href*="/5-weltportfolios/"]::after { content: "Welchen Weltindex kaufen?"; }
/* Über Uns (1545) — adressiert per URL-Pfad (umgebungsstabil) */
.menu-item-1545 > ul.sub-menu > li > a[href*="/ueber-fonds-facts/"]::after { content: "Wir machen die Fondswelt transparent"; }
.menu-item-1545 > ul.sub-menu > li > a[href*="/premiumvorteile/"]::after    { content: "Alles, was Sie brauchen"; }
/* Depot & Sparplan (1100) — adressiert per URL-Pfad (umgebungsstabil) */
.menu-item-1100 > ul.sub-menu > li > a[href*="/etf-sparplan-vergleich/"]::after  { content: "Wo gibt es kostengünstige Sparpläne?"; }
.menu-item-1100 > ul.sub-menu > li > a[href*="/depotvergleich/"]::after          { content: "Finde dein bestes Depot"; }
.menu-item-1100 > ul.sub-menu > li > a[href*="/junior-depot-vergleich/"]::after  { content: "Sparpläne für den Nachwuchs"; }
/* Mediathek (401) — adressiert per URL-Pfad (umgebungsstabil) */
.menu-item-401 > ul.sub-menu > li > a[href*="/mediathek/"]::after { content: "Analysen, Podcast, Videos – alles, was du brauchst"; }
/* Konto (.ff-konto-menu, nur eingeloggt) — adressiert per Item-Klasse */
.ff-konto-menu > ul.sub-menu > li.ff-konto-details > a.elementor-sub-item::after { content: "Sehen und ändern Sie Ihre Konto-Details."; }
.ff-konto-menu > ul.sub-menu > li.ff-logout-link > a.elementor-sub-item::after   { content: "Loggen Sie sich aus."; }
/* Hover: dezenter Marken-Grün-Hintergrund, Titel grün */
.menu-item-321 > ul.sub-menu > li > a.elementor-sub-item:hover,
.menu-item-4722 > ul.sub-menu > li > a.elementor-sub-item:hover,
.menu-item-1545 > ul.sub-menu > li > a.elementor-sub-item:hover,
.menu-item-1100 > ul.sub-menu > li > a.elementor-sub-item:hover,
.ff-konto-menu > ul.sub-menu > li > a.elementor-sub-item:hover,
.menu-item-401 > ul.sub-menu > li > a.elementor-sub-item:hover {
    background-color: rgba(2, 208, 149, .10) !important;
    color: #02D095 !important;
}

/* ===== Startseite: rote CTA-Buttons auf Marken-Grün (2026-07-18) =====
   kostenlos starten (Hero) · Unser Premiumpaket · Jetzt Premiumvorteile nutzen ·
   Zu der Mediathek · Kostenlos registrieren — von #FE4F59 auf #02D095. */
.ffhero-btn.primary {
    background: #02D095 !important;
    color: #04120d !important;
    box-shadow: 0 10px 26px -10px rgba(2,208,149,.6) !important;
}
.ffhero-btn.primary:hover { background: #22e0a6 !important; }
body.page-id-47 .elementor-element-c50c454 .elementor-button,
body.page-id-47 .elementor-element-742dfd3 .elementor-button,
body.page-id-47 .elementor-element-e4cbf06 .elementor-button,
body.page-id-47 .elementor-element-b85da50 .elementor-button {
    background: #02D095 !important;
    color: #04120d !important;
}
body.page-id-47 .elementor-element-c50c454 .elementor-button:hover,
body.page-id-47 .elementor-element-742dfd3 .elementor-button:hover,
body.page-id-47 .elementor-element-e4cbf06 .elementor-button:hover,
body.page-id-47 .elementor-element-b85da50 .elementor-button:hover {
    background: #22e0a6 !important;
    box-shadow: 0 14px 30px -10px rgba(2,208,149,.7) !important;
}

/* ===== Startseite: Abstand zwischen "Regelmäßige Fakten…" und
   "Depot- & Sparplanvergleich" reduzieren (2026-07-18) =====
   Der Abstand war das 70px obere Padding des Depot-Abschnitts (81cd109). */
body.page-id-47 .elementor-element-81cd109 { padding-top: 20px !important; }

/* ===== Abonnementpläne: die 4 Plan-Karten bündig ausrichten (2026-07-18) =====
   Karte 1 ("Original Fonds Facts Inhalte") hatte einen versehentlichen Transform
   (translateY ~598px), der sie ggü. den anderen 3 Karten nach unten verschob. */
.elementor-element-29db378 { transform: none !important; }

/* ===== Header-Navigation: 2-Zeilen-Umbruch verhindern (2026-07-18) =====
   Zwischen ~1025px und 1300px passten die 8 Menüpunkte nicht in eine Zeile und
   brachen um -> der Header wurde höher und das Logo rutschte optisch nach unten.
   Darunter (<=1024px) greift ohnehin das mobile Hamburger-Menü. */
@media (min-width: 1025px) and (max-width: 1300px) {
    .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap !important; }
    .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    li.menu-item-42.show-login { margin-left: 10px !important; }
}
/* Schmales Band: noch kompakter, damit "Login" nicht abgeschnitten wird */
@media (min-width: 1025px) and (max-width: 1160px) {
    .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 12.5px !important;
    }
    li.menu-item-42.show-login { margin-left: 4px !important; }
}

/* ===== Premiumvorteile: 3 Frames + Zahlen darüber auf Site-Überschriftenschrift (2026-07-18) =====
   icon-box-Titel (Aktuelle Fondsdaten / Fonds Facts Rating / Mediathek für Fonds-Porträts)
   und die Zahlen (9.000+ / 230+ / täglich) liefen in Space Grotesk. */
.elementor-element-6b042a8 .elementor-icon-box-title,
.elementor-element-b17a164 .elementor-icon-box-title,
.elementor-element-053cd2e .elementor-icon-box-title,
.elementor-element-0c6b5fd .elementor-icon-box-title,
.elementor-element-7a7a71f .elementor-icon-box-title,
.elementor-element-2b26965 .elementor-icon-box-title,
.elementor-element-6b042a8 .elementor-icon-box-title *,
.elementor-element-b17a164 .elementor-icon-box-title *,
.elementor-element-053cd2e .elementor-icon-box-title *,
.elementor-element-0c6b5fd .elementor-icon-box-title *,
.elementor-element-7a7a71f .elementor-icon-box-title *,
.elementor-element-2b26965 .elementor-icon-box-title * {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

/* Depot & Sparplan: "Melden Sie sich noch heute an ..."-CTA für eingeloggte Nutzer ausblenden (2026-07-18) */
body.logged-in .elementor-element-358b028 { display: none !important; }

/* Footer-Copyright & "Webdesign & Konzeption": kleiner (2026-07-18) */
.elementor-element-42d1d4c .elementor-heading-title,
.elementor-element-286937d .elementor-heading-title {
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* ===== Tablet-Optimierung (2026-07-18 Mobil/Tablet-Audit) ===== */
/* Mediathek u.a.: Swiper-Bullet-Leisten (hunderte Bullets) + AI-Disclaimer-Overlay
   dürfen die Seite auf Tablet nicht horizontal aufziehen (der Mobil-Fix darunter
   galt nur bis 767px, daher lief Mediathek bei 768px ~508px über). */
@media (max-width: 1024px) {
    .swiper-pagination { max-width: 100% !important; overflow: hidden !important; }
    .ff-disc-overlay, .ff-disc-lock .ff-disc-overlay { max-width: 100vw !important; overflow-x: hidden !important; }
    html, body { overflow-x: hidden !important; }
}
/* Abonnementpläne: die 4 Plan-Karten auf Tablet in 2 Reihen umbrechen statt in
   einer zu engen Reihe (die 4. Karte "Kostenlose Mitgliedschaft" wurde sonst
   rechts abgeschnitten, ~73px Überlauf). */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element-7232520 { flex-wrap: wrap !important; justify-content: center !important; row-gap: 24px !important; column-gap: 20px !important; }
    .elementor-element-7232520 > .e-con { flex: 0 0 46% !important; max-width: 46% !important; }
}

/* ===== Mobile-Fixes (2026-07-16): Seitenbreite darf 100vw nie überschreiten ===== */
@media (max-width: 767px) {

    /* Lange Wörter/Links (Datenschutz, Widerruf, Impressum) umbrechen statt Seite aufziehen */
    p a,
    .elementor-widget-text-editor a {
        overflow-wrap: anywhere;
    }
    h1, h2, h3 {
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Elementor-Widgets mit fester Breite nie breiter als der Bildschirm */
    .elementor-widget__width-initial {
        max-width: 100% !important;
    }

    /* Mediathek: Swiper-Punkteleisten (hunderte Bullets) begrenzen */
    .swiper-pagination {
        max-width: 100%;
        overflow: hidden;
    }

    /* Cockpit "Mein Portfolio": Tabelle scrollt in ihrer Karte statt Seite zu sprengen */
    .ffp-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cockpit "Mein Paket": Abo-Boxen/Tabellen bleiben im Bildschirm */
    .exp-subscriptions {
        max-width: 100%;
    }
    .exp-subscription-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .exp-subscription-box table.exp-table {
        width: 100% !important;
    }

    /* "Kostenlos Anmelden"-Seite: Header-CTA hat mobil neben dem Logo keinen
       Platz (42px Rest) und ragt rechts raus -> auf dem Handy ausblenden,
       die CTAs im Seiteninhalt bleiben */
    .elementor-element-11c1f82 {
        display: none;
    }
}

/* Mediathek (Seite 322): Titel-Block auf dem Desktop etwas nach unten setzen,
   damit der "Fonds Facts Mediathek"-Schriftzug frei unter der transparenten
   Navigation steht und nicht optisch am Header-Balken bricht. Mobil hat der
   Hero bereits genug Abstand -> nur ab Desktop. */
@media (min-width: 1025px) {
    body.page-id-322 .elementor-element-6988664 {
        padding-top: 80px;
    }
}

/* Startseite (47): "Ihre Vorteile"-Karten (3+2) in EINE Reihe zu 5 bringen.
   Die zwei Karten-Reihen (cdeca6a=3, ebb4c5b=2) haben keine eigene Optik ->
   per display:contents auflösen, Eltern-Container (d797337) auf Row-Wrap, die
   5 Karten je ~20%. Nur Desktop; darunter bleibt das normale Wrap-Verhalten. */
@media (min-width: 1200px) {
    body.page-id-47 .elementor-element-d797337 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        column-gap: 16px !important;
        row-gap: 24px !important;
    }
    body.page-id-47 .elementor-element-d797337 > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    body.page-id-47 .elementor-element-cdeca6a,
    body.page-id-47 .elementor-element-ebb4c5b {
        display: contents !important;
    }
    body.page-id-47 .elementor-element-740bf38,
    body.page-id-47 .elementor-element-b541924,
    body.page-id-47 .elementor-element-7996d89,
    body.page-id-47 .elementor-element-d22dcd4,
    body.page-id-47 .elementor-element-dd128a0 {
        flex: 0 0 calc(20% - 13px) !important;
        width: calc(20% - 13px) !important;
        max-width: calc(20% - 13px) !important;
        min-width: 0 !important;
        padding: 30px 20px !important;
    }
    /* Überschriften/Texte fürs schmalere 5er-Raster verkleinern, damit nichts überläuft */
    body.page-id-47 .elementor-element-740bf38 .elementor-heading-title,
    body.page-id-47 .elementor-element-b541924 .elementor-heading-title,
    body.page-id-47 .elementor-element-7996d89 .elementor-heading-title,
    body.page-id-47 .elementor-element-d22dcd4 .elementor-heading-title,
    body.page-id-47 .elementor-element-dd128a0 .elementor-heading-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* Startseite (47): dieselben 5 "Ihre Vorteile"-Karten auf dem TABLET (2026-07-21).
   Dort standen sie einzeln untereinander, jede 691px breit mit min-height:300px —
   viel Leerraum und sehr langes Scrollen (Block war 1.874px hoch). Jetzt 3 + 2
   nebeneinander (zweite Reihe zentriert), Höhe nach Inhalt, Schrift passend
   verkleinert. Unter 768px bleibt die Stapelung, ab 1200px die 5er-Reihe. */
@media (min-width: 768px) and (max-width: 1199px) {
    body.page-id-47 .elementor-element-d797337 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        column-gap: 16px !important;
        row-gap: 16px !important;
    }
    body.page-id-47 .elementor-element-d797337 > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    body.page-id-47 .elementor-element-cdeca6a,
    body.page-id-47 .elementor-element-ebb4c5b {
        display: contents !important;
    }
    body.page-id-47 .elementor-element-740bf38,
    body.page-id-47 .elementor-element-b541924,
    body.page-id-47 .elementor-element-7996d89,
    body.page-id-47 .elementor-element-d22dcd4,
    body.page-id-47 .elementor-element-dd128a0 {
        flex: 0 0 calc(33.333% - 11px) !important;
        width: calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 26px 18px !important;
    }
    body.page-id-47 .elementor-element-740bf38 .elementor-heading-title,
    body.page-id-47 .elementor-element-b541924 .elementor-heading-title,
    body.page-id-47 .elementor-element-7996d89 .elementor-heading-title,
    body.page-id-47 .elementor-element-d22dcd4 .elementor-heading-title,
    body.page-id-47 .elementor-element-dd128a0 .elementor-heading-title {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    body.page-id-47 .elementor-element-3d40226,
    body.page-id-47 .elementor-element-e186d76,
    body.page-id-47 .elementor-element-7daa79b,
    body.page-id-47 .elementor-element-d612ed4,
    body.page-id-47 .elementor-element-316d68c {
        font-size: .95rem !important;
    }
}

/* Startseite Cockpit-Absatz: "Das Besondere an der Portfoliofunktion" grün + etwas größer. */
body.page-id-47 .elementor-element-3695d02.elementor-widget-text-editor strong {
    color: #02D095 !important;
    font-size: 1.2em !important;
    display: inline-block;
    margin-bottom: 4px;
}

/* Startseite: "Regelmäßige Fakten"-Block enger — die Sektion hatte min-height:900px und
   zentrierte ihren Inhalt (viel Leerraum ober-/unterhalb). Höhe an den Inhalt anpassen +
   inneren Abstand etwas reduzieren -> Block rückt nach oben, näher an "Depot & Sparplan". */
body.page-id-47 .elementor-element-2052bfd {
    min-height: 0 !important;
}
body.page-id-47 .elementor-element-2052bfd > .elementor-element-9cc9f8e {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* "Depot- & Sparplanvergleich" oberen Abstand leicht verringern */
body.page-id-47 .elementor-element-81cd109 {
    padding-top: 0 !important;
}

/* Mediathek-Kategorieseiten (Category-Archiv): dekoratives Rating-Widget (10 rote Sterne)
   über der "Kategorie:"-Überschrift entfernen (gilt für alle Kategorieseiten, gleiches Widget). */
.elementor-element-1748052 {
    display: none !important;
}
/* Mobil: ohne die Sterne rückte der "Kategorie:"-Titel unter den Header -> oberen Abstand geben. */
@media (max-width: 768px) {
    .elementor-element-07567ab {
        padding-top: 100px !important;
    }
}
/* Kasse mobil: "Kasse"-Titel ragte in den transparenten Header -> oberen Abstand geben. */
@media (max-width: 768px) {
    body.woocommerce-checkout .elementor-element-57ba63c5 {
        padding-top: 90px !important;
    }
}
/* Abonnementpläne mobil: "Ihr Plan, Ihre Wahl" ragte in den Header -> oberen Abstand geben. */
@media (max-width: 768px) {
    body.page-id-737 .elementor-element-41ba448 {
        padding-top: 90px !important;
    }
}
/* Weitere Seiten mobil: Seitentitel ragte in den transparenten Header -> oberen Abstand geben.
   (Depot-/Sparplan-/ETF-/Junior-Vergleich, Finanzbildung, Premiumvorteile, FAQ, Glossar,
   Staatliche Förderung, AGB, Impressum, Eigenpositionen, Widerruf, Datenschutz.) */
@media (max-width: 768px) {
    .elementor-element-fffea45,   /* Depot- & Sparplanvergleich */
    .elementor-element-a42dab9,   /* ETF Sparplan Vergleich */
    .elementor-element-dbf6f7d,   /* Depotvergleich */
    .elementor-element-d41cc90,   /* Junior Depot Vergleich */
    .elementor-element-2f14696,   /* Finanzbildung */
    .elementor-element-896857e,   /* Premiumvorteile */
    .elementor-element-ea68392,   /* Häufig gestellte Fragen */
    .elementor-element-eba83f9,   /* Glossar */
    .elementor-element-e975936,   /* Staatliche Förderung */
    .elementor-element-aebcf66,   /* AGB */
    .elementor-element-3c50e8f,   /* Impressum */
    .elementor-element-d5715bc,   /* Eigenpositionen */
    .elementor-element-042e603,   /* Widerrufsbelehrung */
    .elementor-element-dd99a46 {  /* Datenschutzerklärung */
        padding-top: 92px !important;
    }
}
/* Depotvergleich (1096) mobil: die Fließtexte hatten eine feste Breite (195px, halb) +
   sehr großen Zeilenabstand -> auf volle Breite, linksbündig, normaler Zeilenabstand. */
@media (max-width: 768px) {
    body.page-id-1096 .elementor-element-10bdda7,
    body.page-id-1096 .elementor-element-56b1959 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body.page-id-1096 .elementor-element-10bdda7,
    body.page-id-1096 .elementor-element-10bdda7 *,
    body.page-id-1096 .elementor-element-56b1959,
    body.page-id-1096 .elementor-element-56b1959 * {
        text-align: left !important;
    }
    body.page-id-1096 .elementor-element-10bdda7 p,
    body.page-id-1096 .elementor-element-56b1959 p {
        line-height: 1.6 !important;
    }
}
/* ETF Sparplan Vergleich (1463) + Junior Depot Vergleich (1527) mobil: gleiche Umstellung
   der Fließtexte auf linksbündigen Blocktext (volle Breite, normaler Zeilenabstand). */
@media (max-width: 768px) {
    body.page-id-1463 .elementor-element-549b177,
    body.page-id-1463 .elementor-element-ad03d43,
    body.page-id-1527 .elementor-element-75fe7ce,
    body.page-id-1527 .elementor-element-d6bfd0e {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body.page-id-1463 .elementor-element-549b177, body.page-id-1463 .elementor-element-549b177 *,
    body.page-id-1463 .elementor-element-ad03d43, body.page-id-1463 .elementor-element-ad03d43 *,
    body.page-id-1527 .elementor-element-75fe7ce, body.page-id-1527 .elementor-element-75fe7ce *,
    body.page-id-1527 .elementor-element-d6bfd0e, body.page-id-1527 .elementor-element-d6bfd0e * {
        text-align: left !important;
    }
    body.page-id-1463 .elementor-element-549b177 p,
    body.page-id-1463 .elementor-element-ad03d43 p,
    body.page-id-1527 .elementor-element-75fe7ce p,
    body.page-id-1527 .elementor-element-d6bfd0e p {
        line-height: 1.6 !important;
    }
}
/* Depot-Vergleichstabelle (alle 3 Vergleichsseiten) mobil: die fixierte Label-Spalte (sticky <th>,
   270px) fraß den Platz -> Label-Spalte schmaler + Depot-Spalten etwas schmaler, damit pro Bildschirm
   eine ganze Auswertung neben den Bezeichnungen lesbar ist (Rest per Pfeile/Wischen). */
@media (max-width: 768px) {
    .depot-compare-table tr th {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
    }
    .depot-compare-table tr td.first_column {
        width: 224px !important;
        min-width: 224px !important;
        max-width: 224px !important;
    }
}

/* Footer: langer Titel "Für Fondsgesellschaften" würde bei 1.5em in der schmalen Spalte
   abgeschnitten -> kleiner + umbrechen. Klassenbasiert (ff-foot-smalltitle wird per Elementor
   auf die Überschrift gesetzt), damit es unabhängig von der Spaltenposition greift. */
.ff-foot-smalltitle .elementor-heading-title,
.elementor-widget-heading.ff-foot-smalltitle .elementor-heading-title {
    font-size: 1.0em !important;
    line-height: 1.25 !important;
    overflow-wrap: normal;
    hyphens: none;
}

/* Footer: "Mehr Analysen"-Überschrift — geklontes Heading hat keine Elementor-Einzel-CSS,
   daher Schriftgröße explizit an die anderen Footer-Überschriften angleichen (24px = 1.5em). */
.ff-foot-title{margin-top:22px;}
/* Selektor bewusst hoch (3 Klassen), um die Startseiten-Regel
   body.page-id-47 h2.elementor-heading-title{...!important} zu schlagen. */
.elementor-element-9ae6e0d .ff-foot-title .elementor-heading-title{font-size:1.5rem !important;line-height:1.2 !important;}

/* Footer: LinkedIn-Icon in der Marken-Spalte. */
/* ===== Startseite: Abschnitt "Depot- & Sparplanvergleich" im Blocksatz (2026-07-21) =====
   Einleitungstext (04769dc) sowie die drei Spaltentexte Depotvergleich (065bd0d),
   ETF Sparplan Vergleich (70ced80) und Junior Depot Vergleich (ad49503).
   Auf allen Breiten inkl. Handy (vom Nutzer so gewünscht); hyphens:auto mildert
   die Wortlücken, wo der Browser Silbentrennung für "de" beherrscht. */
body.page-id-47 .elementor-element-04769dc .elementor-widget-container,
body.page-id-47 .elementor-element-04769dc p,
body.page-id-47 .elementor-element-065bd0d .elementor-widget-container,
body.page-id-47 .elementor-element-065bd0d p,
body.page-id-47 .elementor-element-70ced80 .elementor-widget-container,
body.page-id-47 .elementor-element-70ced80 p,
body.page-id-47 .elementor-element-ad49503 .elementor-widget-container,
body.page-id-47 .elementor-element-ad49503 p {
    text-align: justify !important;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* Die drei Vergleichs-Rahmen (Depotvergleich / ETF Sparplan / Junior Depot) hatten
   min-height: 300px — nötig, solange die mittlere Spalte einen doppelten Absatz
   trug. Der ist raus, also schrumpfen die Rahmen jetzt auf ihre Inhaltshöhe
   (Desktop 300 -> 215px, Handy 300 -> 173px). */
body.page-id-47 .elementor-element-9a3f4a5,
body.page-id-47 .elementor-element-2197966,
body.page-id-47 .elementor-element-a346cb7 { min-height: 0 !important; }

/* Footer: Social-Icons (LinkedIn + Instagram, 2026-07-21) */
.ff-foot-social{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ff-foot-linkedin,.ff-foot-instagram{display:inline-flex;margin:14px 0 4px;transition:transform .15s ease,opacity .15s ease;}
.ff-foot-linkedin:hover,.ff-foot-instagram:hover{transform:translateY(-2px);opacity:.9;}
.ff-foot-linkedin img,.ff-foot-instagram img{display:block;width:34px;height:34px;}

/* Footer: Partner-Logos ("Mehr Analysen") — dunkle Logos auf weißen Kacheln, untereinander. */
.ff-foot-partners{display:flex;flex-direction:column;gap:10px;margin-top:2px;}
.ff-foot-partners a{display:inline-flex;align-items:center;justify-content:center;background:#fff;
    border-radius:8px;padding:9px 14px;max-width:190px;transition:transform .15s ease,box-shadow .15s ease;}
.ff-foot-partners a:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(2,208,149,.6);}
.ff-foot-partners img{max-height:24px;max-width:100%;width:auto;height:auto;display:block;}

/* Cockpit/Funktionen-Seiten: die 3 Support-Kacheln (Offene Fragen? / Deine Rückmeldung? /
   Alles erledigt?) entfernen. Feedback bleibt über den rechten "Feedback"-Reiter erreichbar. */
.elementor-element-b58f29e {
    display: none !important;
}

/* Footer-Überschriften auf der STARTSEITE an die übrigen Seiten angleichen: die Regel
   `body.page-id-47 h2.elementor-heading-title{clamp!important}` zieht alle H2 (auch im Footer)
   groß. Mit höherer Spezifität (Widget-IDs) auf die Normalgrößen der anderen Seiten setzen. */
body.page-id-47 .elementor-element-ed31751 .elementor-heading-title {
    font-size: 19.2px !important;   /* "Depotvergleich und eigenes Scoring…" */
}
body.page-id-47 .elementor-element-f565527 .elementor-heading-title,
body.page-id-47 .elementor-element-04817bd .elementor-heading-title,
body.page-id-47 .elementor-element-c694c44 .elementor-heading-title {
    font-size: 24px !important;     /* Übersicht / Vergleiche / Rechtliches */
}
body.page-id-47 .elementor-element-42d1d4c .elementor-heading-title,
body.page-id-47 .elementor-element-286937d .elementor-heading-title {
    font-size: 12px !important;     /* Copyright / eXP Designs */
}


/* Abonnementpläne (#737): der "Kostenlos registrieren"-Button der Gratis-Karte (afd8710)
   ist absolut positioniert (top:417px) — für die Desktop-Ausrichtung mit den anderen
   Plan-Karten. Auf Mobil stapeln die Karten und die Feature-Liste wird höher, wodurch der
   absolute Button die Liste überlappt. Daher auf Mobil zurück in den normalen Fluss, sodass
   er unter der Feature-Liste sitzt. */
@media(max-width:768px){
  body.page-id-737 .elementor-element-afd8710{
    position:static !important;
    top:auto !important;
    margin-top:16px !important;
  }
}

/* Footer mobil: die Spalten-Reihe (9ae6e0d) ist flex-direction:row und klemmt die Höhe der
   letzten Spalte ("Für Fondsgesellschaften" + "Mehr Analysen"-Logos) auf die Flex-Linie ein.
   Dadurch läuft die 2. Logo-Kachel (Research Hub) aus der Spalte heraus und der darunter
   liegende Leeway-Attributions-Block überdeckt sie. Auf Mobil sauber untereinander stapeln. */
@media(max-width:767px){
  .elementor-element-9ae6e0d{flex-direction:column !important;flex-wrap:nowrap !important;height:auto !important;}
  .elementor-element-9ae6e0d > *{width:100% !important;}
}
/* Reicht allein NICHT: das HTML-Widget 80bffd2 mit den Partner-Logos ist ein Flex-Item der
   Footer-Spalte und wird auf ~48px zusammengedrückt (Inhalt: 96px) — die 2. Kachel
   (ResearchHub / mwb research) lief dadurch aus dem Widget heraus und wurde vom folgenden
   Abschnitt (Leeway-Attribution, eigener Hintergrund) überdeckt. Widget nicht schrumpfen
   lassen + Kachelhöhe sichern. Gilt bewusst für ALLE Breiten (auf Tablet wurde die 2. Kachel
   ebenfalls gestaucht); auf Desktop ändert es nichts, da dort die natürliche Höhe erreicht wird. */
.elementor-element-9ae6e0d .elementor-element-80bffd2{flex:0 0 auto !important;min-height:96px !important;}
.ff-foot-partners a{flex:0 0 auto !important;min-height:42px !important;}