/* ==========================================================================
   GRIMM■INGENIEURE – Responsive-Korrekturen für das Theme "grimm2601"
   Datei:   wp-content/themes/grimm2601/assets/css/responsive.css
   Laden:   über functions.php (siehe functions-snippet.php), NACH style.css
   Stand:   05.11.2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Grundlagen
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Deutsche Silbentrennung für lange Komposita (Siedlungswasserwirtschaft …).
   Funktioniert, weil <html lang="de"> gesetzt ist. */
h1, h2, h3, h4,
.wp-block-button__link,
.wp-block-navigation-item__label {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4; /* nur lange Wörter trennen */
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   1) Seitenränder: Spalten-Blöcke kleben auf allen Breiten < 1340 px
      direkt am Bildschirmrand (padding 0 im Post-Content).
   -------------------------------------------------------------------------- */
.wp-block-post-content > .wp-block-columns.alignwide,
.wp-block-post-content > .wp-block-group.alignwide:not(.has-global-padding) {
	box-sizing: border-box;
	padding-left: var(--wp--style--root--padding-left, clamp(30px, 5vw, 50px));
	padding-right: var(--wp--style--root--padding-right, clamp(30px, 5vw, 50px));
}

/* Ungültiger 3-Werte-gap ("0em 1em 30px") wird vom Browser verworfen
   → Spalten haben aktuell gar keinen Abstand. */
.wp-block-columns.alignwide {
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
}

/* Überschriften in den Spalten sind 10 px eingerückt, der Text nicht. */
.wp-block-columns.alignwide .wp-block-heading {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Leere Absätze (Abstandshalter) in den Spalten ausblenden */
.wp-block-post-content p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   2) Blocksatz nur auf breiten Bildschirmen – auf dem Handy entstehen
      sonst große Wortlücken ("Umweltschutz        sowie").
   -------------------------------------------------------------------------- */
.has-justify p {
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (max-width: 781.98px) {
	.has-justify p,
	p.has-text-align-justify {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   3) Startseite – Slogan über dem Slider
      Bisher: width:100vw + margin-left:-50vw (erzeugt horizontalen Überlauf)
      und unter 700 px komplett unsichtbar.
   -------------------------------------------------------------------------- */
 h2.headline-start {
	left: 0;
	right: 0;
	width: auto;
	margin-left: 0;
	padding-inline: var(--wp--preset--spacing--30);
	font-size: clamp(1.6rem, 6vw, 7rem);
	line-height: 1.05;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
	pointer-events: none;
    bottom: 2rem;
}


@media (max-width: 700px) {
	h2.headline-start {
		visibility: visible;
		bottom: 2.5rem; /* über den Slider-Bullets */
	}
}

/* --------------------------------------------------------------------------
   4) Startseite – "WIR"-Einleitung
      Die Flex-Gruppe ist "nowrap": auf 375 px bleiben für den Text ~190 px.
      Selektor greift auf die Gruppe, die den Blocksatz-Text enthält.
      (Besser: im Editor der Gruppe die Klasse "intro-wir" geben.)
   -------------------------------------------------------------------------- */
@media (max-width: 781.98px) {
	.intro-wir,
	.wp-block-group.is-layout-flex:has(> .has-justify) {
		flex-wrap: wrap !important;
		gap: 0 !important;
	}

	.intro-wir > *,
	.wp-block-group.is-layout-flex:has(> .has-justify) > * {
		flex: 1 1 100%;
	}

	.wp-block-group.is-layout-flex:has(> .has-justify) > .has-justify {
		padding-top: var(--wp--preset--spacing--20) !important;
	}
}

/* --------------------------------------------------------------------------
   5) Startseite – Kacheln "UNSERE LEISTUNGEN"
      Bisher: 3 Kacheln pro Reihe auch auf dem Handy (92 px breit,
      bis 338 px hoch, Wörter mitten im Wort umbrochen).
   -------------------------------------------------------------------------- */
.buttons-start .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.3;
}

/* Tablet: 2 Kacheln pro Reihe */
@media (max-width: 999.98px) {
	.buttons-start > .wp-block-group.is-layout-flex {
		flex-wrap: wrap !important;
		min-height: 0 !important;
		margin-top: 0 !important;
		margin-bottom: var(--wp--preset--spacing--30) !important;
	}

	.buttons-start > .wp-block-group.is-layout-flex > .wp-block-buttons {
		flex: 1 1 calc(50% - var(--wp--preset--spacing--30));
		max-width: none;
	}

	.buttons-start .wp-block-button a {
		min-height: 110px;
		font-size: 1.05em;
		padding: 1em 1.25em !important;
	}
}

/* Handy: 1 Kachel pro Reihe, flacher */
@media (max-width: 599.98px) {
	.buttons-start > .wp-block-group.is-layout-flex {
		gap: 12px !important;
		margin-bottom: 12px !important;
	}

	.buttons-start > .wp-block-group.is-layout-flex > .wp-block-buttons {
		flex-basis: 100%;
	}

	.buttons-start .wp-block-button a {
		min-height: 72px;
		font-size: 1rem;
		letter-spacing: .03em;
	}
}

/* --------------------------------------------------------------------------
   6) Unterseiten – große Titel im Titelbild (.top-headline)
      "SIEDLUNGSWASSERWIRTSCHAFT" ist auf 375 px 690 px breit
      und wird zur Hälfte abgeschnitten.
   -------------------------------------------------------------------------- */
.top-headline {
	left: 0;
	right: 0;
	width: auto;
	margin-left: 0;
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

@media (max-width: 781.98px) {
	.top-headline {
		font-size: clamp(1.5rem, 7.5vw, 2.5rem) !important;
		letter-spacing: .04em;
		bottom: -.3em;
	}
}

/* --------------------------------------------------------------------------
   7) Titelbild "Gestalten + Planen im Dialog": weiße Schrift auf hellem
      Himmel, schwarzer Link auf Foto → Kontrast zu schwach.
      Im Editor dem Cover-Block die Klasse "cover-dark" geben.
   -------------------------------------------------------------------------- */
.cover-dark .wp-block-cover__background {
	background-color: #000 !important;
	opacity: .35 !important;
}

.cover-dark .wp-block-cover__inner-container,
.cover-dark .wp-block-cover__inner-container a {
	color: #fff !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* Parallax (background-attachment: fixed) ruckelt bzw. zoomt auf
   Tablets/Handys – dort normal scrollen lassen. */
@media (max-width: 1024px), (hover: none) {
	.wp-block-cover .has-parallax,
	.wp-block-cover.has-parallax {
		background-attachment: scroll !important;
	}
}

/* --------------------------------------------------------------------------
   8) Footer
   -------------------------------------------------------------------------- */
@media (max-width: 781.98px) {
	footer .wp-block-group.is-content-justification-space-between.is-nowrap {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--30);
	}

	footer .has-xx-large-font-size {
		font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
		line-height: 1.15;
	}

	footer .is-content-justification-right {
		justify-content: flex-start !important;
	}
}

/* Social-Icons: Tippfläche mind. 44 × 44 px (aktuell 23 px) */
footer .wp-block-image a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

footer .wp-block-image img {
	width: 32px;
	height: 32px;
}

/* Footer-Links: größere Tippfläche */
footer .has-small-font-size a {
	display: inline-block;
	padding-block: 10px;
}

/* --------------------------------------------------------------------------
   9) Navigation
   -------------------------------------------------------------------------- */
/* Untermenü: Pfeil-Button größer tippbar */
.wp-block-navigation__submenu-icon {
	min-width: 24px;
	min-height: 24px;
}

/* Hamburger-Button: 44 × 44 px Tippfläche */
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}

/* Sichtbarer Tastatur-Fokus (theme.json verweist auf eine nicht
   existierende Farbe "color-schwarz") */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--grimm, #006351);
	outline-offset: 3px;
}

/* OPTIONAL – erst testen: Hamburger-Menü schon bis 900 px statt nur bis
   600 px. Zwischen 600 und ~700 px wird die Desktop-Navigation sehr eng.
   Zum Aktivieren den Kommentar entfernen.
@media (min-width: 600px) and (max-width: 899.98px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}
*/

/* --------------------------------------------------------------------------
   10) Bewegung reduzieren (Barrierefreiheit)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}