/**
 * Layout-Korrekturen für Sites, deren Theme einen FIXIERTEN Header ohne globalen
 * Ausgleich setzt (HR-Sites, trex-Basis): Rechner-Seiten (unser Template) und
 * Hub-Seite (Theme-Template, markiert per body_class).
 *
 * Wird nur geladen, wenn das Template auch wirklich greift (aktives Site-Profil
 * mit `single_template` und kein theme-eigenes single-<cpt>.php).
 *
 * Zweck: Abstand unter den FIXIERTEN Theme-Header. Die HR-Themes (trex-Basis)
 * setzen `header.main-header { position: fixed }`, gleichen das aber nirgends
 * global aus — im Blog-Layout kommt der Vorlauf aus `.blog-wrap #primary`
 * (padding). Unser Template hat diesen Wrapper bewusst nicht (er erzwingt die
 * schmale Sidebar-Spalte von ~582px), also bringt es den Abstand selbst mit.
 *
 * Werte live gemessen auf sportske-kladionice.net (2026-07-25, eingeloggt, also
 * inkl. 32px Admin-Bar — für Besucher ist der Abstand entsprechend grösser):
 *   Viewport 1280 → Header-Unterkante 98px, Inhalt startet bei 128px
 *   Viewport  820 → Header-Unterkante 89px, Inhalt startet bei 112px
 *   Viewport  390 → Header-Unterkante 102px, Inhalt startet bei 126px
 */

.wettrechner-single {
    padding-top: 96px;
}

@media (max-width: 1024px) {
    .wettrechner-single {
        padding-top: 80px;
    }
}

/**
 * Hub-Seite (normale Page mit dem Profil-Slug, z. B. /alati/ oder
 * /kalkulatori/). Sie wird vom Theme gerendert, nicht von uns — der
 * `body_class`-Filter des aktiven Profils setzt dort `wettrechner-hub`.
 *
 * Gleiches Problem, gleiche Ursache: der fixierte Header überdeckt den
 * Seitenanfang. Das ist auf den HR-Sites VORBESTEHEND (auch vor unserem
 * Template), fiel nur weniger auf.
 *
 * Live gemessen 2026-07-25 (eingeloggt, inkl. 32px Admin-Bar), identisch auf
 * kocka-hr.com und sportske-kladionice.net:
 *   ohne Regel → H1 bei 54px, Header-Unterkante 98px (H1 verdeckt)
 *   mit Regel  → H1 bei 150px (1280) / 134px (820) / 168px (390), jeweils frei
 */

.wettrechner-hub .site-content {
    padding-top: 96px;
}

@media (max-width: 1024px) {
    .wettrechner-hub .site-content {
        padding-top: 80px;
    }
}

/**
 * Das Theme bringt selbst einen Header-Ausgleich mit:
 * `.site-content .entry-content { padding-top: 130px }` (style.css/style9.css,
 * ohne Mobile-Override). Der greift aber erst UNTERHALB des Titels — deshalb
 * blieb der Titel verdeckt, während unter ihm 130px Leerraum standen. Da wir
 * den Abstand jetzt oberhalb des Titels mitbringen, wird der Rest hier gekürzt;
 * sonst summiert sich beides (auf Mobil besonders störend, Owner-Befund).
 *
 * Nur auf der Hub-Seite (`.wettrechner-hub`), der Rest der Site bleibt wie er
 * ist. Spezifität 0,3,0 schlägt die Theme-Regel (0,2,0).
 *
 * Live gemessen auf kocka-hr.com (2026-07-25, 2.20.2 aktiv, eingeloggt):
 *   vorher  → Titel frei, erster Absatz bei 342px (1280)
 *   nachher → Titel frei bei 150px, erster Absatz bei 245px (1280) / 324px (390)
 */

.wettrechner-hub .site-content .entry-content {
    padding-top: 34px;
}

@media (max-width: 1024px) {
    .wettrechner-hub .site-content .entry-content {
        padding-top: 24px;
    }
}

/**
 * Rechner-Grid auf der Hub-Seite (Kadence-Query-Loop, seit 2.20.4 auf den
 * HR-Sites im Einsatz — nachgebaut nach dem Vorbild von sportwettenschweiz.pro).
 *
 * Zwei Eigenheiten der HR-Themes/Kadence-Kombination:
 *
 * 1. Kadence rendert die Kacheln als <li> in einer <ul>. Die Themes hängen
 *    ALLEN Listenpunkten im Inhalt ein `::before { content: "●" }` an — der
 *    Punkt klebte dadurch oben links in jeder Kachel.
 *
 * 2. Hat ein Rechner (noch) KEIN Beitragsbild, rendert Kadence gar kein <img>,
 *    die <figure> behält aber ihre quadratische Ratio-Höhe: 311px Leerfläche
 *    pro Kachel (live gemessen auf kocka-hr.com, Kachelhöhe 469px statt 158px).
 *    Wir blenden nur die BILDLOSEN Figuren aus — sobald ein Beitragsbild
 *    gesetzt wird, erscheint die Kachel automatisch wieder mit Bild.
 */

.wettrechner-hub .kb-query-grid-wrap > li::before {
    content: none;
}

.wettrechner-hub .kb-query-item figure.wp-block-kadence-image:not(:has(img)) {
    display: none;
}

/**
 * Brotkrumen nach oben ziehen (Profil-Schlüssel `breadcrumb_top`).
 *
 * Auf der CH-Site ruft das Theme `yoast_breadcrumb()` in single-rechner.php
 * erst NACH `</main>` auf — die Brotkrumen standen dadurch am Seitenende
 * (gemessen: 3948px von 4758px Seitenhöhe). Die Theme-Datei liesse sich nur
 * per FTP ändern (der Theme-Editor ist auf der Site gesperrt), deshalb lösen
 * wir es ohne PHP: `#breadcrumbs` ist ein Geschwister-Element von `<main>` im
 * selben `#primary`, also genügt Flex + `order`.
 *
 * Der Header ist auch hier fixiert (Unterkante 98px), und `main.entry-content`
 * bringt dieselben 130px Theme-Vorlauf mit wie auf den HR-Sites. Deshalb
 * bekommt die Krume den Abstand und der Inhalt gibt ihn ab — sonst summiert
 * sich beides.
 *
 * Live gemessen auf sportwettenschweiz.pro (2026-07-25, eingeloggt):
 *   1280 → Krume 128px (Header 98px), erster Inhalt 186px
 *    820 → Krume 112px (Header 89px), erster Inhalt 160px
 *    390 → Krume 126px (Header 102px), erster Inhalt 194px
 */

.wettrechner-crumb-top #primary {
    display: flex;
    flex-direction: column;
}

.wettrechner-crumb-top #primary > #breadcrumbs {
    order: -1;
    margin: 96px 0 0;
}

.wettrechner-crumb-top #primary > main.entry-content {
    padding-top: 34px;
}

@media (max-width: 1024px) {
    .wettrechner-crumb-top #primary > #breadcrumbs {
        margin-top: 80px;
    }

    .wettrechner-crumb-top #primary > main.entry-content {
        padding-top: 24px;
    }
}