/* ---------------------------------------------------------------------------
   Corporate design application.

   Deliberately conservative. The existing Elementor page already carries the
   correct BW colour values on individual widgets, so this file does NOT try to
   restyle widgets — doing that would fight Elementor's own per-widget CSS and
   produce specificity wars. It sets the typographic and interaction baseline
   that Elementor does not control, and leaves layout to the page itself.

   Widget-level colour and typography belongs in Elementor's Global Colors /
   Global Fonts, not here. See doc/ for the mapping.
--------------------------------------------------------------------------- */

/* --- Typographic baseline ------------------------------------------------ */

body {
	font-family: var(--bw-font-sans);
	font-weight: var(--bw-font-weight-regular);
	color: var(--bw-color-text-default);
	font-feature-settings: "kern";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* German compounds ("Landesbehindertengleichstellungsgesetzes") are wider
	   than a 320px screen and forced sideways scrolling (WCAG 1.4.10 reflow).
	   Breaks a word only when it cannot fit on a line of its own. */
	overflow-wrap: break-word;
}

/* NOTE: do NOT set a blanket serif on h1-h6.
   The existing design uses BaWueSerif only for the hero wordmark and sans for
   every other heading. A blanket rule here silently converts every heading that
   has no explicit Elementor font setting (they inherit from body) to serif,
   which visibly changes the page. Heading fonts belong in Elementor's Global
   Typography, per widget — not in a theme-wide override. */

/* --- Accessibility: visible focus ---------------------------------------- */
/* Public-sector sites in Germany fall under BITV 2.0, which requires a visible
   keyboard focus indicator. Astra and Elementor both suppress outlines in
   places, so restore an unambiguous one that works on light and dark grounds. */

/* The focus colour is Violet 80 (#6E0BCC) — an OFFICIAL semantic token,
   --bw-color-border-focus. design.landbw.de applies it on its own button via
   the `outline-focus` class with outline-2 / outline-offset-2.
   Violet is a deliberate choice, not decoration: it is the one hue that stays
   visible against BOTH the yellow and the near-black ground, which is why the
   state does not use a black or white focus ring.
   Not a zero-specificity :where(): Astra's inline `a:focus-visible` (0,1,1)
   resets the outline to `thin dotted currentColor`, invisible on the dark nav
   pill and the footer. `body :is(…)` is (0,2,1); the skip link is named to
   beat Astra's `.site .skip-link:focus-visible` (0,3,0). */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body .site .skip-link:focus-visible {
	outline: 2px solid var(--bw-color-border-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Elementor detects the breakpoint by reading `content: "desktop"` (or
   "tablet", "mobile") from #elementor-device-mode::after, a span with the
   screen-reader-only class — so screen readers announced "desktop" at the end
   of every page. visibility: hidden drops it from the accessibility tree; the
   computed `content` Elementor's script reads is unaffected. */
#elementor-device-mode {
	visibility: hidden;
}

/* --- Buttons -------------------------------------------------------------- */
/* Colour, size, radius and padding come from Elementor's Global Button style
   (Site Settings -> Buttons), which is where they belong. Only the colour
   transition lives here — the kit exposes no control for it.

   Reference implementation from design.landbw.de:
     rounded-[3px] font-bold text-base leading-none px-4 py-3
     bg-bw-grey-95 text-white
     hover:bg-bw-yellow hover:text-bw-grey-95
     transition-colors duration-300 ease-in-out                                */

.elementor-button,
.wp-block-button__link,
button {
	transition: background-color var(--bw-transition-hover),
	            color var(--bw-transition-hover),
	            border-color var(--bw-transition-hover);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.wp-block-button__link,
	button {
		transition: none;
	}
}

/* Text selection is deliberately left at the browser default. A yellow
   ::selection was tried and removed: it collides with the yellow page sections,
   where selected text becomes indistinguishable from its background. */

/* --- Utility classes for new BW-styled sections --------------------------- */
/* Use these when building new content so BW surfaces stay consistent. */

.bw-surface-accent   { background: var(--bw-color-background-accent);   color: var(--bw-color-text-on-accent); }
.bw-surface-emphasis { background: var(--bw-color-background-emphasis); color: var(--bw-color-text-on-emphasis); }
.bw-surface-subtle   { background: var(--bw-color-background-subtle);   color: var(--bw-color-text-default); }
.bw-surface-muted    { background: var(--bw-color-background-muted);    color: var(--bw-color-text-default); }

/* --- Barrierefreie Angebote: Leichte Sprache / Gebärdensprache ------------ */
/* Icons are the state's own (bw-easy-read-line, bw-sign-language-line), taken
   from the landes-cd icon sprite. They sit in the navigation as on
   klimalaend.de and in the digitalLÄND reference header. */

.bw-a11y {
	display: flex;
	align-items: center;
	gap: var(--bw-space-xs);
}

.bw-a11y .bw-a11y__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	color: var(--bw-color-foreground-primary);
}

.bw-a11y__link svg {
	width: 26px;
	height: 26px;
	display: block;
}

/* Same inversion the CD uses for buttons. */
.bw-a11y__link:hover,
.bw-a11y__link:active {
	background-color: var(--bw-color-background-accent);
	color: var(--bw-color-foreground-primary);
}

/* --- Links: no hover transitions ----------------------------------------- */
/* Link hovers switch instantly. Astra puts `a { transition: all .2s linear }` on
   every link; this equal-specificity rule wins because cd.css loads last.
   Buttons keep their colour fade (`.elementor-button` above outranks `a`). */
a,
a * {
	transition: none;
}

/* --- Links on the dark footer surface ------------------------------------- */
/* Elementor's text-editor has no link-colour control, so the rule lives here.
   It is a surface-level rule (links on an emphasis ground are white), not a
   per-widget colour. */

.bw-surface-emphasis a,
.bw-footer a {
	color: var(--bw-color-text-on-emphasis);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bw-surface-emphasis a:hover,
.bw-footer a:hover {
	color: var(--bw-color-background-accent);
}

/* Footer links stay white; hover only adds the underline. */
.bw-footer a { text-decoration: none; }
.bw-footer a:hover { text-decoration: underline; color: var(--bw-color-text-on-emphasis); }

.bw-footer .elementor-widget-text-editor p { margin: 0; }

/* Footer menu (Elementor menu widget, menu "Footermenü"). Colour, font and
   spacing are widget settings; the size and the hover underline are not —
   the widget's typography is bound to the global "Fließtext", which carries
   no size. */
.bw-footer .elementor-nav-menu--main .elementor-item {
	font-size: 16px;
}

.bw-footer .elementor-nav-menu--main .elementor-item:hover,
.bw-footer .elementor-nav-menu--main .elementor-item:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Stacked footer (tablet + mobile): everything left-aligned.
   - The footer column centres its children (the container's "align items:
     center", needed side by side on desktop). Overridden here: the funding
     logo starts at the left, and the menu's container stretches full width.
   - The widget's mobile alignment control emits no class in this Pro version;
     the list is aligned here.
   - Elementor spaces items with a margin on each side of every item but the
     first, so the first item of a WRAPPED line was indented. A flex gap spaces
     only between items. (Desktop keeps the widget's "Space Between" control.) */
@media (max-width: 1024px) {
	/* Beats the footer's own (0,3,0) per-element rule. */
	.elementor .e-con.bw-footer.bw-surface-emphasis {
		--align-items: flex-start;
	}

	.bw-footer .e-con:has(> .elementor-widget-nav-menu) {
		align-self: stretch;
	}

	.bw-footer .elementor-element.elementor-widget-nav-menu.elementor-nav-menu--dropdown-none {
		--e-nav-menu-horizontal-menu-item-margin: 0px;
	}

	.bw-footer .elementor-nav-menu--main .elementor-nav-menu {
		justify-content: flex-start;
		margin-inline-start: 0;
		gap: 4px 24px;
	}
}

/* --- Header: two-line BW navigation pattern ------------------------------- */
/* Line 1 (yellow): project wordmark = primärer Absender (Ebene 4),
   plus the Landesportal link and the accessibility offerings.
   Line 2 (white): the site menu. No search — this is a one-pager. */

.bw-header__brandbar .elementor-widget-heading a,
.bw-header__brandbar .elementor-heading-title {
	color: var(--bw-color-foreground-primary);
	text-decoration: none;
}

/* Landesportal link, styled like the reference: arrow marker then label. */
.bw-header__brandbar .bw-landesportal {
	display: inline-flex;
	align-items: center;
	gap: var(--bw-space-xs);
	color: var(--bw-color-foreground-primary);
	font-family: var(--bw-font-sans);
	font-weight: var(--bw-font-weight-bold);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	padding: 8px;
	border-radius: 3px;
	white-space: nowrap;
}

.bw-header__brandbar .bw-landesportal svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* On the yellow bar the accent inversion cannot be yellow-on-yellow, so hover
   uses the emphasis surface instead — still one of the three permitted pairs.

   The `a` in the selector is load-bearing: the kit emits
   `.elementor-kit-7 a:hover { color: #2A2623 }` at (0,2,1), and a class-only
   selector here is (0,2,0) — so the background inverted but the label stayed
   dark on the dark ground. Naming the element takes this to (0,3,1). */
.bw-header__brandbar a.bw-landesportal:hover,
.bw-header__brandbar a.bw-landesportal:focus-visible,
.bw-header__brandbar a.bw-a11y__link:hover,
.bw-header__brandbar a.bw-a11y__link:focus-visible {
	background-color: var(--bw-color-background-emphasis);
	color: var(--bw-color-text-on-emphasis);
}

/* Scoped to the desktop menu (--main). The mobile dropdown renders the same
   ul.elementor-nav-menu inside .elementor-nav-menu--dropdown; unscoped, this
   rule laid the dropdown's items out in a row instead of one under the other. */
.bw-header__navbar .elementor-nav-menu--main .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	/* 16px gap + 12px padding either side = the same 40px between labels as
	   before, so adding the pill box does not change the nav's rhythm. */
	gap: var(--bw-space-sm);
}

/* Elementor Pro sets `padding: 13px 20px` on the menu link AND repeats it for
   :hover/:focus/.highlighted in the same rule. The hover selector carries one
   extra element (a:hover), so it out-specifies a wrapper-scoped rule that only
   names .elementor-item — the horizontal padding snapped back on hover and each
   item grew by 40px. Match Elementor's own selectors, all four states, so the
   spacing is stable. Vertical padding is left alone: it is the click target. */
.bw-header__navbar .elementor-nav-menu--main .elementor-nav-menu a,
.bw-header__navbar .elementor-nav-menu--main .elementor-nav-menu a:hover,
.bw-header__navbar .elementor-nav-menu--main .elementor-nav-menu a:focus,
.bw-header__navbar .elementor-nav-menu--main .elementor-nav-menu a.highlighted {
	/* Identical in every state — Elementor repeats its own `padding: 13px 20px`
	   for :hover/:focus/.highlighted, and any difference between states makes
	   the item resize under the cursor. */
	padding: 8px 12px;
	border-radius: 3px;
}

/* --- Links in content ----------------------------------------------------- */
/* Astra's dynamic CSS sets a global `a { color: #ffffff }`, which renders
   in-content links white on a white ground — effectively invisible and a WCAG
   1.4.3 failure. The CD permits only black on white/yellow and white on black,
   so links take the foreground colour and are underlined. The underline is not
   decoration: WCAG 1.4.1 requires links to be distinguishable by more than
   colour alone, and on the yellow ground colour alone cannot carry it.

   Buttons, menu items and the wordmark opt out — they carry their own
   treatment and must not gain an underline. */

/* NOTE on specificity: Elementor ships `.elementor a { text-decoration: none }`
   (0-1-1) and its frontend.css is enqueued AFTER this file, so a rule of equal
   specificity here silently loses the tie. Prefixing with `.elementor` raises
   these to 0-2-1 so the underline survives. Any rule in this file that competes
   with an Elementor rule needs the same treatment. */
.elementor .elementor-widget-text-editor a,
.elementor .elementor-widget-theme-post-content a {
	color: var(--bw-color-foreground-primary);
	/* The underline is a background stripe along the link's bottom edge, not
	   text-decoration: an inline-block (the external-link arrow) takes no part
	   in its parent's text-decoration, and a separately drawn line never sat
	   exactly level with the browser's. The stripe spans the whole link box,
	   arrow included, so there is only one line. currentColor keeps it the
	   label's colour on every ground. */
	--bw-link-underline: 1px;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% var(--bw-link-underline);
	/* A URL used as link text is one unbreakable word and pushed the layout
	   sideways on mobile. `anywhere` (not `break-word`) also lowers the
	   min-content width, so flex containers shrink instead of overflowing.
	   Links only — compound words in body text keep normal wrapping. */
	overflow-wrap: anywhere;
}

/* Hover, as on baden-wuerttemberg.de: yellow ground under the dark label
   (black on yellow, a permitted pair) and a heavier underline. */
.elementor .elementor-widget-text-editor a:hover,
.elementor .elementor-widget-theme-post-content a:hover {
	color: var(--bw-color-foreground-primary);
	background-color: var(--bw-color-background-accent);
	--bw-link-underline: 2px;
}

/* On the emphasis (near-black) ground the permitted pairing inverts. */
.elementor .bw-surface-emphasis .elementor-widget-text-editor a,
.elementor .bw-footer .elementor-widget-text-editor a {
	color: var(--bw-color-text-on-emphasis);
}

/* No yellow ground here — yellow label instead (yellow on yellow is not allowed). */
.elementor .bw-surface-emphasis .elementor-widget-text-editor a:hover,
.elementor .bw-footer .elementor-widget-text-editor a:hover {
	color: var(--bw-color-background-accent);
	background-color: transparent;
}

/* Footer: underline on hover only (rich-text links draw it as a stripe). */
.elementor .bw-footer .elementor-widget-text-editor a { --bw-link-underline: 0px; }
.elementor .bw-footer .elementor-widget-text-editor a:hover { --bw-link-underline: 1px; color: var(--bw-color-text-on-emphasis); }

/* The wordmark is a link but must read as a wordmark: one line, no underline. */
.bw-header__brandbar .elementor-heading-title,
.bw-header__brandbar .elementor-heading-title a {
	white-space: nowrap;
	text-decoration: none;
	color: var(--bw-color-foreground-primary);
}

/* --- Anchor targets under the sticky header ------------------------------- */
/* The header is sticky and 144px tall, so a plain #anchor jump puts the top of
   the target underneath it. scroll-margin-top offsets the scroll position for
   the jump only — it adds no visual spacing and does not move the element.
   Applies to Elementor's menu-anchor widgets and to any element given a custom
   CSS ID (those are the only Elementor elements that carry a real `id`). */

.elementor-menu-anchor,
.elementor-element[id],
[id]:target {
	scroll-margin-top: var(--bw-anchor-offset);
}

/* Native smooth scrolling, unless the visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --- Heading line breaks -------------------------------------------------- */
/* Elementor's heading "Title" field is a plain textarea: pressing Enter stores a
   real newline, but HTML collapses it to a space, so the break silently
   disappears. The usual workaround is to type <br> — which is not reasonable to
   ask of an editor.

   `white-space: pre-line` renders those newlines as breaks while still
   collapsing other whitespace and wrapping normally. Pressing Enter in the field
   now does what it looks like it does, with no HTML knowledge required.

   Applied globally rather than as an opt-in class, because an opt-in class
   (Advanced -> CSS Classes) is exactly as technical as typing <br>. Checked
   before enabling: only one heading on the site contained a newline, so nothing
   else changes appearance. */

.elementor-widget-heading .elementor-heading-title {
	white-space: pre-line;
}

/* No hard break: let the browser even the lines out instead. Useful where a
   fixed break tuned to one width would fall badly at another.
   Apply via the widget's Advanced -> CSS Classes field. */
.bw-balance .elementor-heading-title,
.bw-balance h1, .bw-balance h2, .bw-balance h3,
.bw-balance h4, .bw-balance h5, .bw-balance h6 {
	text-wrap: balance;
}

/* --- WYSIWYG element defaults --------------------------------------------- */
/* Elementor's Theme Style covers body, links and h1-h6 only. Anything else an
   editor can produce in a text-editor — lists, quotes, tables, rules — falls
   through to Astra's defaults, which are not CD-conformant (its blockquote is
   #334155, a blue-grey that is not a BW colour at all).

   These rules give those elements a BW default so editors never have to style
   anything by hand. Scoped to Elementor's text widgets so they cannot disturb
   wp-admin or any non-Elementor output. */

.elementor-widget-text-editor :is(ul, ol),
.elementor-widget-theme-post-content :is(ul, ol) {
	margin: 0 0 var(--bw-space-md);
	padding-inline-start: var(--bw-space-md);   /* not Astra's arbitrary 3em */
}

.elementor-widget-text-editor li,
.elementor-widget-theme-post-content li {
	margin-block-end: var(--bw-space-xs);
}

.elementor-widget-text-editor li:last-child,
.elementor-widget-theme-post-content li:last-child {
	margin-block-end: 0;
}

/* The CD reserves the serif for "Auszeichnungen wie Titel und Zitate", so a
   quote is one of the few places BaWueSerif is correct outside a Titel. */
.elementor-widget-text-editor blockquote,
.elementor-widget-theme-post-content blockquote {
	margin: var(--bw-space-md) 0;
	padding-inline-start: var(--bw-space-md);
	border-inline-start: 3px solid var(--bw-color-background-accent);
	font-family: var(--bw-font-serif);
	font-weight: var(--bw-font-weight-serif-regular);
	font-size: 1.4em;
	line-height: 1.3;
	color: var(--bw-color-foreground-primary);
}

.elementor-widget-text-editor blockquote p:last-child { margin-block-end: 0; }

/* Tables: readable defaults, and able to scroll rather than break the layout. */
.elementor-widget-text-editor table,
.elementor-widget-theme-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--bw-space-md);
}

.elementor-widget-text-editor :is(th, td),
.elementor-widget-theme-post-content :is(th, td) {
	padding: var(--bw-space-xs) var(--bw-space-sm);
	border-block-end: 1px solid var(--bw-color-background-neutral);
	text-align: start;
	vertical-align: top;
}

.elementor-widget-text-editor th,
.elementor-widget-theme-post-content th {
	font-weight: var(--bw-font-weight-bold);
	background: var(--bw-color-background-subtle);
}

.elementor-widget-text-editor hr,
.elementor-widget-theme-post-content hr {
	border: 0;
	border-block-start: 1px solid var(--bw-color-background-neutral);
	margin-block: var(--bw-space-lg);
}

/* --- CD rule: h1 / Titel is always the serif ------------------------------ */
/* Elementor's heading widget hard-binds its family to the PRIMARY typography
   global — which is Sans, because h2-h6 are Sans under the CD. That binding
   (.elementor-widget-heading .elementor-heading-title, 0-2-0) out-specifies
   Elementor's Theme Style h1 (.elementor-kit-7 h1, 0-1-1), so the kit's h1
   family never reaches a heading *widget* — only h1s typed in a WYSIWYG.

   Adding the element to the selector gives 0-2-1, which wins. Now "Titel are
   serif" holds for every h1 regardless of how it was authored, and an h1
   heading widget needs to override nothing but its size. */

.elementor-widget-heading h1.elementor-heading-title {
	font-family: var(--bw-font-serif);
	font-weight: var(--bw-font-weight-serif-bold);
}

/* --- Untertitel: a subtitle line hugs the heading above it ---------------- */
/* The Untertitel is a heading widget with a non-heading tag (p/div/span) and
   the "Untertitel" global font, placed directly under a heading widget — an h1
   on a page title, an h2 on a section such as the homepage's event teaser.
   Between two widgets the only space is the container's row gap, which reads
   as a separate block rather than a subtitle. Editors used to pull the line up
   with a negative margin (-20px here, -24px there); this makes it automatic.

   The row gap is read from the container, so the result is 8px whatever gap
   the container is set to. Scoped to non-heading tags, so an h2 placed right
   after an h1 keeps its normal spacing. When this was added, exactly two such
   pairs existed on the site, both date lines, so nothing else moved. */
.elementor-widget-heading:has(:is(h1, h2, h3, h4, h5, h6).elementor-heading-title)
	+ .elementor-widget-heading:has(:is(p, div, span).elementor-heading-title) {
	margin-block-start: calc(8px - var(--row-gap, 20px));
}

/* --- Heading margins (klimalaend.de reference values) --------------------- */
/* Elementor's Theme Style has no margin control for headings, so these live
   here. Deliberately scoped to headings inside RICH TEXT only: in Elementor's
   own layout, spacing between elements comes from container gaps and widget
   padding, so giving standalone heading widgets a bottom margin would add to
   that and shift the page. Inside a text-editor there is no container gap, so
   the margin is what separates a heading from the copy beneath it. */

/* h1 bottom margin, klimalaend reference (rich text only — see note above). */
.elementor-widget-text-editor h1,
.elementor-widget-theme-post-content h1 { margin-block-start: 0; margin-block-end: 32px; }

/* h2, h3 and h4: more space above than below, so each groups with the copy it
   introduces (rich text only). The top margin collapses with the preceding
   paragraph's 18px; none at the start of a text block or directly under a
   heading. */
.elementor-widget-text-editor h2,
.elementor-widget-theme-post-content h2 { margin-block-start: 64px; margin-block-end: 16px; }

.elementor-widget-text-editor h3,
.elementor-widget-theme-post-content h3 { margin-block-start: 48px; margin-block-end: 12px; }

.elementor-widget-text-editor h4,
.elementor-widget-theme-post-content h4 { margin-block-start: 32px; margin-block-end: 8px; }

.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4),
.elementor-widget-theme-post-content :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4),
.elementor-widget-text-editor :is(h2, h3, h4):first-child,
.elementor-widget-theme-post-content :is(h2, h3, h4):first-child { margin-block-start: 0; }

/* A text block that ends the page keeps 100px from the footer (50px on
   mobile). "Ends the page": last child of the page's last top-level container,
   and no container around it has a sibling after it — at any nesting depth.
   The Kontakt block is excluded — it brings its own padding. Its container
   carries the CSS class `kontakt-block` (Advanced → CSS Classes). */
[data-elementor-type="wp-page"] > .e-con:last-child .elementor-widget-text-editor:last-child:not(.e-con:not(:last-child) *, .kontakt-block *) {
	margin-block-end: 100px;
}
@media (max-width: 767px) {
	[data-elementor-type="wp-page"] > .e-con:last-child .elementor-widget-text-editor:last-child:not(.e-con:not(:last-child) *, .kontakt-block *) {
		margin-block-end: 50px;
	}
}

/* --- Sticky header: separation from the content beneath ------------------- */
/* The header is sticky, so it overlaps content on scroll and needs to read as
   a layer above it. Kept deliberately slight: the BW design is flat and
   high-contrast, and a pronounced drop shadow would sit wrong against it.

   Tinted with the emphasis colour rather than pure black, so it reads as a
   soft edge on both the white nav bar and the yellow band below it.

   `.elementor` prefix: Elementor's container CSS is enqueued after this file,
   so an equal-specificity rule here would lose the tie. */

.elementor .bw-header {
	box-shadow: 0 2px 6px rgba(42, 38, 35, 0.14);
	position: relative;   /* keeps the shadow above the following section */
	z-index: 10;
}

/* --- Menu underline: lift it clear of the item's baseline ----------------- */
/* Elementor's pointer underline is an absolutely positioned ::after pinned to
   `bottom: 0`, so it sits hard against the bottom edge of the link box. Setting
   `bottom` directly is the right lever here — a margin would work only because
   margins offset absolutely positioned boxes, which reads as a trick.

   Specificity: Elementor's rule is (0,2,1) and its CSS is enqueued after this
   file, so the navbar scope is needed to raise this to (0,3,1) and win. */

.bw-header__navbar .e--pointer-underline .elementor-item:after {
	bottom: 8px;
}

/* --- External links: BW arrow marker -------------------------------------- */
/* Reference: baden-wuerttemberg.de — "↗ Landtag", the north-east arrow (the
   header's Landesportal marker) BEFORE the label, the underline running under
   both. The marker is drawn on ::before for every link the generated rule in
   functions.php matches (http/https pointing somewhere other than this host).
   That rule only sets `content: ""`; everything visual is here, so the look can
   be changed without touching PHP.

   The arrow is a mask rather than an <img> or a literal "↗" character:
   - mask + currentColor means it inverts correctly on the dark footer, which a
     coloured image would not;
   - the ↗ glyph is missing from BaWueSansWeb and would fall back to another
     font, changing size and alignment unpredictably.

   The underline runs under the arrow because it is the link's background
   stripe (see the link rule above), not text-decoration. The box's width is
   arrow + gap; its bottom sits on the baseline. */

.elementor .elementor-widget-text-editor a::before,
.elementor .elementor-widget-theme-post-content a::before {
	--bw-ext-arrow: 0.8em; /* incl. the icon's 1-unit margin; visible arrow ≈ 0.7em */
	display: inline-block;
	width: calc(var(--bw-ext-arrow) + 0.45em);
	height: var(--bw-ext-arrow);
	background-color: currentColor;
	-webkit-mask: var(--bw-icon-external) no-repeat left top / var(--bw-ext-arrow) var(--bw-ext-arrow);
	        mask: var(--bw-icon-external) no-repeat left top / var(--bw-ext-arrow) var(--bw-ext-arrow);
}

/* --- Active menu item ----------------------------------------------------- */
/* Elementor Pro's nav-menu JS adds .elementor-item-active to the anchor whose
   section is currently in view, so this needs no scroll-spy of our own.

   The treatment mirrors the CD button: emphasis ground, white label, 3px
   radius — one of the three permitted colour pairings. The underline pointer is
   suppressed while active, since the reference shows a filled pill instead. */

/* Specificity note. Elementor emits the nav widget's hover/active colour as
     .elementor-164 .elementor-element.elementor-element-987258d
     .elementor-nav-menu--main .elementor-item.elementor-item-active
   which is SIX classes — exactly what a natural override here would be — and
   post-164.css is enqueued after this file, so an equal-specificity rule loses
   the tie and the label stays dark on the dark pill. The `.elementor-kit-7`
   body class adds a seventh to win it.

   This can't be solved in the widget instead: Elementor groups :hover,
   .elementor-item-active, .highlighted and :focus into ONE colour control, so
   setting it white there would make hover white on the white bar too. The
   active state genuinely needs to differ from hover, hence CSS. */
.elementor-kit-7 .elementor .elementor-element.bw-header__navbar .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-kit-7 .elementor .elementor-element.bw-header__navbar .elementor-nav-menu--main .elementor-item.highlighted {
	background-color: var(--bw-color-background-emphasis);
	color: var(--bw-color-text-on-emphasis);
	fill: var(--bw-color-text-on-emphasis);
}

.bw-header__navbar .e--pointer-underline .elementor-item.elementor-item-active:after,
.bw-header__navbar .e--pointer-underline .elementor-item.highlighted:after {
	opacity: 0;
}

/* The pointer underline is `width: 100%` of the link box, which now includes
   12px of horizontal padding — so it ran 24px wider than the label and read as
   a rule rather than an underline. Inset it to the text. */
.bw-header__navbar .e--pointer-underline .elementor-item:after {
	left: 12px;
	width: calc(100% - 24px);
	height: 2px;          /* Elementor's default is 3px */
}

/* --- Button default for NEW widgets --------------------------------------- */
/* Elementor's button widget defaults its background to the ACCENT global, which
   under the BW palette is the signal yellow — so a button added in the editor
   would come out yellow with white text: unreadable, and not the CD button.
   The kit's Global Button style cannot fix that on its own, because the widget
   default lives in the page CSS which loads after the kit. cd.css loads after
   both, so the correct default is stated once, here.

   Outline treatment: transparent ground, black label, 2px black border, with the
   CD's yellow inversion on hover. Per-widget settings still win, so anything set
   in the editor continues to override this. */

.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button,
.elementor-button {
	background-color: transparent;
	color: var(--bw-color-foreground-primary);
	fill: var(--bw-color-foreground-primary);
	border: 2px solid var(--bw-color-foreground-primary);
	border-radius: 3px;
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus,
.elementor-widget-form .elementor-button:hover,
.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--bw-color-background-accent);
	color: var(--bw-color-text-on-accent);
	fill: var(--bw-color-text-on-accent);
	border-color: var(--bw-color-foreground-primary);
}

/* --- Weiterlesen: text link with arrow ------------------------------------ */
/* klimalaend.de's teaser link ("→ Zum Artikel"): bold label, no box, arrow.
   Here the arrow sits AFTER the label. Chosen per widget via the Button
   widget's Type dropdown → "Weiterlesen (Pfeil)" (registered in functions.php),
   so editors need no CSS class. It stays a real Button widget, keeping the
   link field, alignment and the rest of the editor controls.

   Selectors are (0,5,0), hover (0,6,0). They must beat the widget's default
   Accent background, which the EDITOR re-emits inline after this file as
   `.elementor-164 .elementor-element.elementor-element-<id> .elementor-button`
   — (0,4,0), hover (0,5,0). A tie is not enough there, because the inline rule
   comes later; with four classes the link still showed yellow in the editor
   while the frontend was correct. The leading `.elementor` is the document
   wrapper, present on every Elementor page and in the editor preview. */

.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button,
.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button:hover,
.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button:focus {
	background-color: transparent;
	color: var(--bw-color-foreground-primary);
	fill: var(--bw-color-foreground-primary);
	border: 0;
	border-radius: 0;
	padding: 4px 0;
	font-family: var(--bw-font-sans);
	font-size: 18px;
	font-weight: var(--bw-font-weight-bold);
	line-height: 1.3;
}

.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button-content-wrapper {
	align-items: center;
}

.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button-content-wrapper::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	margin-inline-start: 12px;
	background-color: currentColor;
	-webkit-mask: var(--bw-icon-arrow-right) center / contain no-repeat;
	        mask: var(--bw-icon-arrow-right) center / contain no-repeat;
}

/* A link, not a button: no colour fade either (see "Links: no hover
   transitions"). */
.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button {
	transition: none;
}

/* Hover: underline the label (as content links are) and nudge the arrow. */
.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button:hover .elementor-button-text,
.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button:focus-visible .elementor-button-text {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.elementor .elementor-element.elementor-widget-button.elementor-button-bw-more .elementor-button:hover .elementor-button-content-wrapper::after {
	transform: translateX(4px);
}

/* --- Menu item timing ----------------------------------------------------- */
/* Elementor sets `transition: all .4s` on menu items and `.3s` on the pointer
   underline. Menu items are links, and link hovers switch instantly. In the
   footer, `all` also faded the focus ring in from the white text colour. */

.bw-header__navbar .elementor-nav-menu--main .elementor-item,
.bw-footer .elementor-nav-menu--main .elementor-item,
.bw-header__navbar .e--pointer-underline .elementor-item:after {
	transition: none;
}

/* --- Full-width Elementor pages ------------------------------------------- */
/* Under Elementor Canvas there is no theme wrapper at all. The Full Width
   template (elementor_header_footer) — needed for Theme Builder header/footer
   to render — reintroduces Astra's `#content > .ast-container`, which boxes the
   content to a max-width. Full-bleed sections then sit in a narrow column with
   the page background showing either side, and text rewraps, making the page
   dramatically taller.

   Elementor already handles width itself: `e-con-boxed` constrains its own
   inner content while `e-con-full` spans. So Astra's box is redundant here and
   only fights it. */

.page-template-elementor_header_footer #content > .ast-container,
.elementor-page #content > .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* --- Side gutter on tablet and mobile ------------------------------------- */
/* On desktop the 1140px content box has room either side. Below that, content
   would run to the screen edge. Rather than every editor adding padding to every
   section for two breakpoints, the gutter is set once here.

   It goes on the INNER box of boxed containers (.e-con-inner), which holds the
   1140px width and has no padding control in Elementor — so it does not collide
   with the explicit left/right 0 the sections carry on the outer container, and
   it does not stack up in nested containers. Scope:
     - top-level boxed sections (.e-parent) on every page;
     - the header's boxed brand bar and nav bar, so the wordmark and menu line up
       with the content beneath.
   Full-width containers (e-con-full, e.g. the footer) keep their own padding.

   Breakpoints are Elementor's defaults: tablet ≤1024px, mobile ≤767px. */

@media (max-width: 1024px) {
	.e-con.e-parent.e-con-boxed > .e-con-inner,
	.bw-header .e-con.e-con-boxed > .e-con-inner {
		padding-inline: var(--bw-gutter-tablet);
	}
}

@media (max-width: 767px) {
	.e-con.e-parent.e-con-boxed > .e-con-inner,
	.bw-header .e-con.e-con-boxed > .e-con-inner {
		padding-inline: var(--bw-gutter-mobile);
	}
}

/* --- Headings: break long words (h1 tablet+mobile, h2/h3 mobile) --------- */
/* German compounds ("Auftaktveranstaltung") at 48px serif are wider than a
   phone screen; unbroken they run off the right edge. Below desktop, h1s are
   hyphenated using the browser's German dictionary (the page is lang="de"), so
   the break lands at a syllable with a hyphen: "Auftakt-veranstaltung".

   overflow-wrap is the fallback for a browser without a German dictionary or a
   word it cannot hyphenate: the word then breaks anywhere rather than overflow.
   `anywhere`, not `break-word`: only `anywhere` lowers the element's min-content
   width, and heading widgets sit in flex containers, where `break-word` lets the
   item stay as wide as the longest word and overflow anyway. Hyphenation points
   are still used first. Desktop keeps unbroken headings. */

@media (max-width: 1024px) {
	h1,
	.elementor-widget-heading h1.elementor-heading-title {
		-webkit-hyphens: auto;
		        hyphens: auto;
		overflow-wrap: anywhere;
	}
}

/* h2 and h3 on mobile only: at 32px/24px sans a long compound
   ("Hochwasserrisikomanagement") only overflows on phone widths, so tablet keeps
   them unbroken. Same mechanism and fallback as the h1 rule above. */
@media (max-width: 767px) {
	h2,
	h3,
	.elementor-widget-heading :is(h2, h3).elementor-heading-title {
		-webkit-hyphens: auto;
		        hyphens: auto;
		overflow-wrap: anywhere;
	}
}

/* --- Service links in the mobile menu ------------------------------------- */
/* Landesportal, Leichte Sprache and Gebärdensprache live in the yellow brand
   bar on desktop. On a phone that row costs a lot of height and the icons are
   small targets, so there the same links appear inside the hamburger menu,
   below the main items.

   They are ordinary items of the same WordPress menu, marked with the CSS class
   `service-menu` (Design -> Menüs -> CSS-Klassen). A second menu widget could
   not do this: the dropdown belongs to the main menu widget, and nothing can be
   placed inside it from outside.

   Hidden in the desktop menu (--main), shown in the dropdown, which Elementor
   only renders below 768px. The brand-bar row itself is hidden on mobile in the
   header template (container 7d3eceb, Erweitert -> Responsive), so the links do
   not appear twice. */

.bw-header__navbar .elementor-nav-menu--main .service-menu {
	display: none;
}

/* Separate the service block from the main items. */
.elementor-nav-menu--dropdown :not(.service-menu) + .service-menu {
	border-top: 1px solid var(--bw-color-background-muted);
	margin-top: var(--bw-space-xs);
	padding-top: var(--bw-space-xs);
}

/* Icon in front of the label: the same marks as in the brand bar, as CSS masks
   so they take the item's colour. Matched on the link target rather than extra
   classes, so editors only have to set `service-menu`. */
.elementor-nav-menu--dropdown .service-menu > a::before {
	content: "";
	/* Elementor gives `.elementor-item::before` position:absolute for its pointer
	   animations; without resetting it the icon leaves the flow. */
	position: static;
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-inline-end: var(--bw-space-xs);
	vertical-align: -5px;
	background-color: currentColor;
	-webkit-mask: var(--bw-icon-service, var(--bw-icon-arrow-right)) center / contain no-repeat;
	        mask: var(--bw-icon-service, var(--bw-icon-arrow-right)) center / contain no-repeat;
}

.elementor-nav-menu--dropdown .service-menu > a[href*="leichte-sprache"] {
	--bw-icon-service: url("../icons/bw-easy-read-line.svg");
}

.elementor-nav-menu--dropdown .service-menu > a[href*="gebaerdensprache"] {
	--bw-icon-service: url("../icons/bw-sign-language-line.svg");
}

/* Elementor hides the pointer pseudo-element on items that are not hovered with
   `.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::before
   { opacity: 0 }` — (0,5,0), which outranks the rule above, so the icon was
   reserved space but painted transparent. Same :not() chain here to win it back;
   in the hovered/active states Elementor's own opacity is 1 anyway. */
.elementor-nav-menu--dropdown .service-menu > a.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::before {
	opacity: 1;
}

/* Landesportal (or any external service link) keeps the north-east arrow. */
.elementor-nav-menu--dropdown .service-menu > a[target="_blank"] {
	--bw-icon-service: var(--bw-icon-external);
}

/* --- Mobile menu: full screen -------------------------------------------- */
/* The open dropdown covers everything below the header down to the bottom of
   the screen, instead of being a short list hanging under the nav bar.

   Only the OPEN state is changed (Elementor marks it with .elementor-active on
   the toggle); closed, its own scaleY(0)/max-height:0 still applies, so the
   click handling stays Elementor's. Its 0.3s top-down unfold is switched off:
   the panel opens and closes at once.

   The panel is anchored to the header element, not to the viewport, so the
   admin bar and the sticky state cannot shift it out of place. */

@media (max-width: 767px) {
	/* Elementor wraps toggle + dropdown in .elementor-nav-menu--toggle, which is
	   positioned and only as wide as the hamburger — so the absolutely
	   positioned panel below took its 45px as the containing block and collapsed
	   into a strip on the right. Taking the wrapper out of the positioning chain
	   hands that role to .bw-header (position: relative). */
	.bw-header__navbar .elementor-nav-menu--toggle {
		position: static;
	}

	/* No unfold animation: Elementor transitions max-height and transform. */
	.bw-header__navbar .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		transition: none;
	}

	/* Hamburger / close button: no grey box (Elementor's default
	   rgba(0,0,0,.05) background), just the icon. */
	.bw-header__navbar .elementor-menu-toggle {
		background-color: transparent;
	}

	.bw-header__navbar .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
		/* Anchored to the header (.bw-header is position: relative), not to the
		   viewport: `top: 100%` puts the panel exactly under the header whatever
		   the header's own offset is — admin bar, sticky state, a changed bar
		   height. An exact pixel `top` got this wrong in both directions: it
		   covered the close button, and later left a strip of the page showing.
		   The panel also cannot cover the header, because it is a descendant of
		   it and would paint over it whatever z-index it is given.

		   Height is a plain 100vh: it starts under the header, so it reaches past
		   the bottom of the screen by the header's height — invisible, and it
		   avoids `calc(100vh - 100%)`, which does not resolve because the header
		   itself has no fixed height.

		   !important is unavoidable: the widget's "Full Width: Stretch" option
		   makes Elementor's JS write top/left/width as inline styles. */
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		height: 100vh;
		max-height: none;
		/* The widget's Stil -> Dropdown -> Abstand writes `margin-top: 10px
		   !important` per widget, which showed as a strip of the page between
		   header and panel. Setting Abstand to 0 in the editor would do the same
		   job; this keeps it right whatever that control says. */
		margin-top: 0 !important;
		padding: var(--bw-space-sm) var(--bw-gutter-mobile) var(--bw-space-xl);
		background-color: var(--bw-color-background-primary);
		overflow-y: auto;
		/* Scrolling the panel must not scroll the page behind it. */
		overscroll-behavior: contain;
		z-index: 9990;
	}
}

/* Service links are secondary: clearly smaller than the main items.

   The size is absolute, not an em factor, because the widget sets the dropdown
   size on the item itself (Stil -> Dropdown -> Typografie, currently 26px) at
   (0,5,0) — an em here would resolve against the list, not against that value.
   Five classes plus the element out-specify it. Keep roughly 0.75 of the
   dropdown size if that setting changes. */
.bw-header .bw-header__navbar .elementor-nav-menu--dropdown .service-menu > a.elementor-item {
	font-size: 20px;
}

.elementor-nav-menu--dropdown .service-menu > a::before {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}