/* sachsen-ohne-anhalt.de -- Ergaenzungen zu Bulma 1.0.4
 *
 * Alles lokal: Bulma liegt unter /css/bulma.min.css, Lato unter /fonts/.
 * Keine externe Quelle, kein @import, kein CDN -- sonst braeche die CSP
 * (default-src 'self') und es entstuende eine Verbindung zu Dritten,
 * bevor der Besucher irgendetwas angeklickt hat.
 */

/* --- Lato, selbst gehostet (SIL Open Font License 1.1) ------------------ */

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/lato-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/lato-400-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/lato-400i.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/lato-400i-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/lato-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/lato-700-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Bulma auf Lato umstellen ------------------------------------------ */

:root {
	--bulma-family-primary: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bulma-family-secondary: var(--bulma-family-primary);
	--bulma-body-line-height: 1.7;
}

/* --- Grundlagen -------------------------------------------------------- */

/* Der Fliesstext ist lang. 68 Zeichen Zeilenlaenge, damit die Augen die
   naechste Zeile wiederfinden -- das ist der groesste Hebel fuer
   Lesbarkeit, groesser als die Schriftwahl selbst. */
.content p {
	max-width: 68ch;
}

.hero-lead {
	max-width: 60ch;
}

.hero.is-dark {
	background-color: #1b3a4b;
}

/* Titelbild: volle Breite, aber als Band beschnitten statt in voller Hoehe.
 * Das Motiv ist 1232x928 (4:3) -- ungeschnitten wuerde es auf dem Bildschirm
 * den ganzen ersten Eindruck fuellen. object-position haelt den Zug und den
 * Horizont im Bild, der Himmel wird oben beschnitten.
 * width/height stehen im <img>, damit beim Laden nichts springt. */
.titelbild {
	margin: 0;
}

.titelbild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: center 62%;
}

@media (max-width: 768px) {
	.titelbild img {
		aspect-ratio: 4 / 3;
	}
}

/* Abgesetzte Flaeche zwischen den Abschnitten.
 *
 * NICHT Bulmas has-background-light nehmen: die Klasse zieht ihre Farbe aus
 * --bulma-light-*, einer festen Palettenfarbe. Im Dunkelmodus dreht Bulma die
 * Textfarbe auf hell, diese Flaeche aber bleibt hell -- hell auf hell, gemessen
 * am 06.09.2026. --bulma-background folgt dem Farbschema und dreht mit. */
.section-alt {
	background-color: var(--bulma-background);
}

.forderung {
	height: 100%;
}

.footer a {
	text-decoration: underline;
}

/* Sichtbarer Tastaturfokus -- Bulma setzt bei Buttons einen Schatten, der
   auf hellem Grund kaum auffaellt. */
a:focus-visible,
button:focus-visible {
	outline: 3px solid #1b3a4b;
	outline-offset: 2px;
}

/* Nur fuer Screenreader. Nicht display:none und nicht visibility:hidden --
 * beides nimmt den Text auch der Sprachausgabe weg. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sprungmarke: nur sichtbar, wenn sie den Fokus hat. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: #1b3a4b;
	color: #fff;
}

.skip-link:focus {
	left: 0;
}

/* --- openPetition-Widget ----------------------------------------------- */

.op-widget__hinweis {
	max-width: 68ch;
	margin-bottom: 1.25rem;
}

.op-widget__alt,
.op-widget__fallback {
	margin-top: 1rem;
}

.op-widget__frame {
	display: block;
	width: 100%;
	height: 100px;   /* Startwert; die echte Hoehe meldet das Widget per postMessage */
	border: 0;
	overflow: hidden;
}