/**
 * Pixel-perfect layout parity with Drupal jagdverband theme.
 * Fonts, container widths, header/footer spacing.
 */

/* ── Typography: enforce Sarala across header/footer ── */
#page-header,
#page-header a,
#footer,
#footer a {
    font-family: 'Sarala', sans-serif;
}

/* ── Fixed header offset (Drupal: body.no-pageimage #main) ── */
@media (min-width: 1200px) {
    /* Nur ohne Hero-Bild – Seiten mit .pageimage (Artikel, Rezepte) beginnen unter dem transparenten Header. */
    body.jagdverband-has-fixed-header:not(.has-page-hero) #main {
        margin-top: 12rem;
    }

    body.jagdverband-has-fixed-header:not(.has-page-hero) #main {
        margin-bottom: 8rem;
    }

    /* Aktivierungsseite der Bestätigungsmail (wp-activate.php, Core-Markup ohne #main): sonst unter dem Header. */
    body.jagdverband-has-fixed-header #signup-content {
        margin-top: 12rem;
        margin-bottom: 8rem;
    }

    body:not(.jagdverband-has-fixed-header) header {
        position: static;
    }

    /* Veranstaltungen (GeoDirectory), Referenten und Lernort-Angebote bringen den Abstand zum Header selbst mit
       (Drupal: #main bei 0 bzw. 32px, geprüft 13.10.2026 gegen live). */
    body.jagdverband-has-fixed-header.single-gd_event #main,
    body.jagdverband-has-fixed-header.single-referent #main {
        margin-top: 0;
    }

    body.jagdverband-has-fixed-header.single-lernort_angebot #main {
        margin-top: 2rem;
    }
}

/* Drupal: global img { width: 100%; height: auto } + max-width-Stufen (305/280/230/200px in jagdverband.css).
   Mit width:100% schrumpft das Logo als Flex-Item (z. B. 1000px: 124px breit), mit width:auto nicht (Überlauf). */
header .home-btn .custom-logo,
header .home-btn img {
    height: auto;
    width: 100%;
}

/* Admin bar offset when logged in */
body.admin-bar #page-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #page-header {
        top: 46px;
    }
}

/* ── Header containers (Drupal: 1460px meta + navbar, 1030px menu) ── */
header .meta-nav .nav-container {
	max-width: 1460px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

header .navbar .navbar-container {
	max-width: 1460px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0; /* Drupal: kein Innenabstand, der Abstand kommt aus .navbar (2em) */
	padding-right: 0;
	box-sizing: border-box;
}

header .navbar ul#superfish-main {
	max-width: 1030px;
	width: 100%;
	margin-left: auto;
}

/* Top meta bar: Drupal uses uniform 2.25rem (36px) gaps between all items.
   Nur Desktop: unter 601px gelten die Mobil-Regeln aus djv.css (.topmenu li.textitem { margin-top: 7em }),
   die diese spezifischeren Selektoren sonst überschreiben würden. */
@media only screen and (min-width: 601px) {
	header .meta-nav ul.topmenu {
		max-width: none;
		width: 100%;
		margin: 0;
		padding: 0;
		height: 35px;
		list-style: none;
	}

	header .meta-nav ul.topmenu > li {
		margin: 0 2.25rem 0 0; /* Drupal: 36px bei 16px Root, skaliert mit der responsiven Root-Schriftgröße */
		padding: 0;
		list-style: none;
	}
}

/* Tablet (Drupal djv.css 601–840px): .topmenu li { padding-left: 1em; margin-right: 1em !important } –
   die Desktop-Regel oben ist spezifischer und hätte das sonst überschrieben. */
@media only screen and (min-width: 601px) and (max-width: 840px) {
	header .meta-nav ul.topmenu > li {
		margin: 0 1em 0 0;
		padding: 0 0 0 1em;
	}
}

header .meta-nav ul.topmenu > li.social {
	display: flex;
	align-items: center;
}

header .meta-nav ul.topmenu > li.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

header .meta-nav ul.topmenu > li.social.don a.donate {
	line-height: 1.5;
}

/* Main nav top-level link padding matches Drupal .sf-with-ul */
header .navbar ul.sf-menu > li > a.sf-with-ul {
    padding: 1em 1.5em;
}

@media (max-width: 1199.98px) {
    header .navbar ul.sf-menu > li > a.sf-with-ul {
        padding: 1em 0.5em;
    }
}

/* ── Footer column spacing (5 columns @ desktop) ── */
@media (min-width: 992px) {
    footer .footerNav .container {
        max-width: 1275px;
        padding-left: 25px;
        padding-right: 25px;
    }

}

/* Spalten-Untertitel (span): keine eigene Regel, Drupal lässt sie inline in 1rem. */

footer .footerMeta .container {
    max-width: 1275px;
    padding-left: 25px;
    padding-right: 25px;
}

footer .footerMeta .meta-bottom {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.8;
}

footer .footerMeta .meta-bottom a {
    color: #fff;
    text-decoration: none;
}

footer .footerMeta .meta-bottom a:hover {
    color: #ff7a00;
}

/* Override djv.css global rule that hides last footer column on WP */
footer .footerNav .navblock:last-child {
    display: block;
}

/* Front page: no extra footer top margin (djv.css .footerNav 10em is for inner pages) */
body.home footer .footerNav,
body.front-page footer .footerNav {
    margin-top: 0 !important;
}

/* Front page: slider sits above #main; no fixed-header offset on main content */
@media (min-width: 1200px) {
    body.path-frontpage #main,
    body.front-page #main {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

body.path-frontpage #main > *,
body.front-page #main > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

body.path-frontpage .wp-block-group.is-layout-flow > *,
body.front-page .wp-block-group.is-layout-flow > * {
    margin-block-start: 0;
}

/* ── Site content container ── */
.layout-container > .container,
#main.container {
    max-width: 1275px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: auto;
    margin-right: auto;
}

/* Article template: Drupal nests .container inside .imagetext / .news-reader */
.single-article #main,
.post-type-article #main {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.single-article #main > .jagdverband-article-node .imagetext > .container,
.single-article #main > .jagdverband-article-node .news-reader > .container,
.post-type-article #main > .jagdverband-article-node .imagetext > .container,
.post-type-article #main > .jagdverband-article-node .news-reader > .container {
    max-width: 1275px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Drupal-Core-Regeln (system.theme.css / breadcrumb), die im Theme-Port fehlten */
.visually-hidden{position:absolute !important;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;word-wrap:normal;}
.breadcrumb ol{margin:0;padding:0;overflow:hidden !important;}
.breadcrumb li{display:inline;margin:0;padding:0;list-style-type:none;}
.breadcrumb li:before{content:" \BB ";}
.breadcrumb li:first-child:before{content:none;}
.pageimage figcaption{bottom:35px;left:0;background:transparent;}
.pageimage figcaption span{display:inline-block;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:left top;transform-origin:left top;}

/* Startseiten-News: Drupal-Bildstil "newsimage" (image_scale_and_crop 778x526, mittig). WordPress liefert das
   Originalformat; der mittige Zuschnitt per CSS ergibt in der Darstellung dasselbe Bild. */
.news-container .news-block figure.image_container img {
	width: 100%;
	aspect-ratio: 778 / 526;
	object-fit: cover;
}

/* Startseiten-Kacheln: Drupal-Bildstil "quadrat" (image_scale_and_crop 407x405, skaliert auch hoch). */
.tiles .tile img {
	width: 100%;
	aspect-ratio: 407 / 405;
	object-fit: cover;
}

/* Drupal djv.css: der letzte Block eines Artikels bekommt 9rem Abstand nach unten, außer er ist ein Fullwidth-Bild.
   Selektor dort: .block-system-main-block>article>div:last-child – bei uns ist der Artikel .jagdverband-article-node. */
.jagdverband-article-node > div:last-child:not(.fullwidth-image) {
	padding-bottom: 9rem !important;
}
.page-node-10896 .jagdverband-article-node > div:last-child:not(.fullwidth-image),
.page-node-5111 .jagdverband-article-node > div:last-child:not(.fullwidth-image) {
	padding-bottom: 0 !important;
}

/* Hero-Bilder: Drupal-Bildstil "pageimage" (image_scale_and_crop 1920x900), auf allen Breiten. */
.pageimage figure.image_container > img,
.pageimage > img {
	aspect-ratio: 1920 / 900;
	object-fit: cover;
}

/* Abschlussbild (field_image_bottom): Drupal-Bildstil "fullwidth" (image_scale_and_crop 1920x900). */
.fullwidth-image figure.image_container img {
	width: 100%;
	aspect-ratio: 1920 / 900;
	object-fit: cover;
}

/* Newsletter-Formulare (Fluent Forms) in der Drupal-Optik: Footer-Block newsletter_anmeldung_startseite
   (jagdverband.css footer .newsletter form) und die Seiten-Formulare (Webform newsletter_anmeldung: .form-group.col-6). */
footer .footerMeta .container .newsletter .djv-footer-newsletter .fluentform { font-size: 1.25rem; color: #fff; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-group { margin-bottom: 0; }
footer .footerMeta .container .newsletter .djv-footer-newsletter form fieldset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 5%; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-group.ff-el-form-hide_label { flex: 0 0 65%; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-input--content { width: 100%; }
footer .footerMeta .container .newsletter .djv-footer-newsletter input.ff-el-form-control { width: 100% !important; float: none !important; color: #fff; background: transparent; border: none; border-bottom: 2px solid #fff; border-radius: 0; padding: 0 0 10px; font-weight: 300; font-size: 1.25rem; height: auto; box-shadow: none; }
footer .footerMeta .container .newsletter .djv-footer-newsletter input.ff-el-form-control::placeholder { color: #fff; opacity: 1; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff_btn_no_style, footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-btn-submit { background: transparent; border: 2px solid #fff; color: #fff; padding: 5px 25px; border-radius: 0; font-size: 1.25rem; font-weight: 300; width: 100% !important; float: none !important; cursor: pointer; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff_submit_btn_wrapper { flex: 0 0 30%; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-hpsf-container { flex: 0 0 0; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-message-success { color: #fff; background: transparent; border: 1px solid #fff; padding: .75em 1em; font-size: .875rem; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-is-error .text-danger, footer .footerMeta .container .newsletter .djv-footer-newsletter .error { color: #ffd2a8; font-size: .75rem; }
@media (max-width: 991.98px) { footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-group.ff-el-form-hide_label, footer .footerMeta .container .newsletter .djv-footer-newsletter .ff_submit_btn_wrapper { flex: 0 0 100%; } }
/* Seiten-Formulare */
.jagdverband-article-content .fluentform, .entry-content .fluentform { max-width: 800px; margin: 1.5em 0; }
.fluentform .ff-el-group:has(input[name=first_name]), .fluentform .ff-el-group:has(input[name=last_name]), .fluentform .ff-el-group:has(input[name=email]) { max-width: 50%; }
.fluentform .ff-el-form-control { border: 1px solid #ced4da; border-radius: 0; padding: .375rem .75rem; }
.fluentform .ff_btn_no_style { background: #ff7a00; color: #fff; border: 0; padding: .375rem .75rem; cursor: pointer; }
.fluentform .ff_t_c { font-size: .875rem; }
.fluentform .ff-message-success { border-left: 4px solid #ff7a00; background: #f7f7f7; padding: 1em 1.25em; }
@media (max-width: 767.98px) { .fluentform .ff-el-group:has(input[name=first_name]), .fluentform .ff-el-group:has(input[name=last_name]), .fluentform .ff-el-group:has(input[name=email]) { max-width: none; } }
/* Die Footer-Spalte halbiert verschachtelte Blöcke (jagdverband.css); das Fluent-Forms-Markup hat vier Ebenen. */
footer .footerMeta .container .newsletter .djv-footer-newsletter, footer .footerMeta .container .newsletter .djv-footer-newsletter .fluentform, footer .footerMeta .container .newsletter .djv-footer-newsletter form, footer .footerMeta .container .newsletter .djv-footer-newsletter fieldset { width: 100% !important; max-width: none !important; }
footer .footerMeta .container .newsletter .djv-footer-newsletter .ff-el-input--content { display: block; width: 100% !important; }
footer .footerMeta .container .newsletter .djv-footer-newsletter div { width: 100% !important; max-width: none !important; }

/* ── Custom-CSS der Live-Seite (Drupal CSS-Editor, nicht im Theme-Ordner; übernommen 13.10.2026) ──
   Nur jagdverband.de (Child-Theme djv-jagdverband). Der Block #block-terminhinweis-2 existiert dort nicht mehr. */
body.wp-child-theme-djv-jagdverband .imagetext strong,
body.wp-child-theme-djv-jagdverband .imagetext b {
    font-weight: 900 !important;
}

body.wp-child-theme-djv-jagdverband article {
    font-size: 1.25rem;
}

/* Drupal Asset Injector „terminuebersicht“: nur auf /node/17117 (Termine). Bis 26.10.2026 galten die Regeln hier auf
   allen Seiten – unter dem Introtext fehlten dadurch 96 px (Kunden-Rückmeldung, Test intro-abstand-test.sh). */
body.wp-child-theme-djv-jagdverband.page-node-17117 .container .views-element-container .breadcrumb-item {
    display: none;
}

body.wp-child-theme-djv-jagdverband.page-node-17117 .container .views-element-container .view-table {
    margin-top: 0;
}

body.wp-child-theme-djv-jagdverband.page-node-17117 article .imagetext .container {
    padding-bottom: 0 !important;
}

/* Blöcke des Plugins djv-blocks (Listen u. a.) im Beitragsinhalt: keine zusätzlichen WP-Block-Abstände – wie die
   jagdverband-Blöcke (plugins/jagdverband/assets/paragraph-blocks.css), damit umgestellte Seiten pixelgleich bleiben. */
.single-article .content.text.col-12 .wp-block-post-content > [class*="wp-block-djv-"],
.post-type-article .content.text.col-12 .wp-block-post-content > [class*="wp-block-djv-"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Drupal Asset Injector „admin“ (Bedingung: Knotentyp Artikel): eingebettete Bild-Medien 480 px breit, Medienfelder
   ausgeblendet, Bildabstand 1rem (Kunden-Rückmeldung 26.10.2026 „Digitale Tafelbilder zu groß“,
   Test medien-bildgroesse-test.sh). */
body.wp-child-theme-djv-jagdverband.page-node-type-article .media--type-image img {
    width: 480px !important;
    height: auto !important;
}

body.wp-child-theme-djv-jagdverband.page-node-type-article article.media .field--type-string,
body.wp-child-theme-djv-jagdverband.page-node-type-article article.media .field--type-entity-reference,
body.wp-child-theme-djv-jagdverband.page-node-type-article article.media .field--type-datetime {
    display: none !important;
}

body.wp-child-theme-djv-jagdverband.page-node-type-article article.media img {
    margin: 1rem !important;
}

/* Eingebettete Beiträge in Akkordeons (z. B. ASP „Frage-Antwort-Papier“): Drupal setzt das schwebende Artikelbild direkt
   in .content.text; bei uns steckt es mit der ersten Überschrift im Textfeld, deren Abstand nach oben durchschlug
   (Margin-Collapsing) und das Bild 48 px nach unten schob (Kunde 27.10.2026). */
.accordion .collapse .jagdverband-body-block > .field--name-body {
    display: flow-root;
}