/**
 * Mobile Nachbesserungen aus dem Testing (Gitea-Issue #2, 14.09.2026).
 *
 * Bewusst als eigenes Stylesheet nach main.css/wp-blocks.css, damit die
 * 1:1 übernommenen Original-Stylesheets (style.css, responsive.css, main.css)
 * unangetastet bleiben. Breakpoints wie responsive.css (750 / 1000 / 1010 px).
 */

/* Die Seite kennt kein Dunkel-Design — Formularelemente (Submit-Buttons) sollen
   auch bei aktiviertem Dark Mode des Geräts die hellen UA-Farben behalten. */
:root {
	color-scheme: light;
}

/* ------------------------------------------------------------------
   Mitmach-Formular: Schriftfarbe des Submit-Buttons explizit setzen.
   style.css setzt nur Hintergrund/Rahmen, bootstrapMinimal.css danach
   `appearance: button` — iOS zeichnete daraus einen Button ohne lesbaren Text.
   ------------------------------------------------------------------ */
.tx-powermail .powermail_fieldwrap input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	color: #333333;
	-webkit-text-fill-color: #333333;
}

.tx-powermail .powermail_fieldwrap input[type="submit"]:hover,
.tx-powermail .powermail_fieldwrap input[type="submit"]:focus-visible,
.tx-powermail .powermail_fieldwrap input[type="submit"]:active {
	background-color: #333333;
	color: #fff;
	-webkit-text-fill-color: #fff;
}

body.contrast-0 .tx-powermail .powermail_fieldwrap input[type="submit"] {
	color: #000;
	-webkit-text-fill-color: #000;
}

body.contrast-0 .tx-powermail .powermail_fieldwrap input[type="submit"]:hover,
body.contrast-0 .tx-powermail .powermail_fieldwrap input[type="submit"]:focus-visible,
body.contrast-0 .tx-powermail .powermail_fieldwrap input[type="submit"]:active {
	background-color: #000;
	color: #fff;
	-webkit-text-fill-color: #fff;
}

/* ------------------------------------------------------------------
   Kein horizontales Scrollen: lange Wörter in Überschriften und
   Akkordeon-Titeln (Versalien + Laufweite, z. B. „KOMMUNALPOLITIKERINNEN",
   „GESPRÄCHSLEITFADEN") liefen über den Viewport hinaus.
   Bewusst KEIN `hyphens: auto` — das trennt auch dort, wo ein normaler
   Umbruch reicht („OHNE UNTER-SCHIED", „KOMMUNALPO-LITIK"). Die beiden
   bekannten Überlänge-Wörter tragen stattdessen ein weiches Trennzeichen
   (U+00AD) im Inhalt (migration/07-nachtrag.php, Schritt 7); overflow-wrap
   bleibt als Notbremse für alles Unbekannte.
   ------------------------------------------------------------------ */
@media only screen and (max-width: 1000px) {
	.content h1,
	.content h2,
	.content h3,
	.content h4,
	.content h5,
	.content h6,
	.accordion .accordion-button {
		overflow-wrap: anywhere;
	}

	/* Sicherheitsnetz gegen künftige Ausreißer (clip erzeugt keinen
	   Scroll-Container, sticky/fixed bleiben unberührt) */
	.content {
		overflow-x: clip;
	}
}

/* ------------------------------------------------------------------
   Smartphone-Breiten
   ------------------------------------------------------------------ */
@media only screen and (max-width: 750px) {
	/* Buttons aus core/buttons („Zum Quiz") über die volle Breite — das
	   Original-CSS setzt `.content a.button { width: 100% }`, der Block-
	   Wrapper .wp-block-button ist aber ein Flex-Item mit Inhaltsbreite. */
	.content .wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	/* „mehr laden" unter der Karte genauso: volle Breite mit 25 px Rand
	   (der Kartenblock liegt randlos, Klasse .borderless). */
	.entryMapSearch > #loadMore {
		width: calc(100% - 50px);
		margin-left: 25px;
		margin-right: 25px;
	}

	/* Akkordeon-Titel: kleinere Schrift, Pfeil nach außen und Platz dafür
	   reservieren — bisher lief der Text ab ca. 195 px Breite in den Pfeil. */
	.accordion .accordion-button {
		padding: 20px 96px 20px 25px;
		font-size: 28px;
		line-height: 40px;
	}

	.accordion .accordion-button::after {
		right: 25px;
	}
}