/* Handy-Optimierung (<= 680 px), 2026-09-20. */
@media (max-width: 680px) {
	/* Footer: statt sechs untereinander gestapelter Spalten zwei Spalten
	 * (Kontakt und Social volle Breite). Spart ca. 280 px Scrollweg. */
	.elementor-element-914a826 > .elementor-container {
		flex-wrap: wrap;
	}
	.elementor-element-914a826 > .elementor-container > .elementor-column {
		width: 50% !important;
	}
	.elementor-element-914a826 > .elementor-container > .elementor-column:first-child,
	.elementor-element-914a826 > .elementor-container > .elementor-column:last-child {
		width: 100% !important;
	}
	/* Social-Icons: alle 7 in einer Reihe (2 Widgets sonst 4 + 3 versetzt), 40 px Tippfläche. */
	footer .elementor-column[data-id="28eb222"] > .elementor-widget-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
		padding: 0 15px;
	}
	footer .elementor-column[data-id="28eb222"] > .elementor-widget-wrap::before {
		content: "Folgen Sie uns";
		display: block;
		width: 100%;
		font: 500 20px/24px "Nunito Sans", sans-serif;
		color: #464646;
	}
	footer .elementor-column[data-id="28eb222"] .elementor-widget-social-icons,
	footer .elementor-column[data-id="28eb222"] .elementor-social-icons-wrapper { display: contents; }
	footer .elementor-column[data-id="28eb222"] .elementor-grid-item { margin: 0; }
	footer .elementor-column[data-id="28eb222"] a.elementor-icon.elementor-social-icon {
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 17px !important;
	}
	footer .elementor-column[data-id="28eb222"] a.elementor-icon svg { width: 17px !important; height: 17px !important; }
	/* Kontaktdaten: Adresse, Telefon, E-Mail in einer Zeile (bei 345 px Platz). */
	footer .elementor-column[data-id="d3a711d"] .elementor-icon-list-text { white-space: nowrap; }
	/* Startseite „Unsere Container-Services im Überblick": Kacheln waren ~465 px hoch, weil die
	 * (auf dem Handy unsichtbare, opacity 0) Beschreibung 270 px Höhe reservierte. Auf dem Handy
	 * ohne Beschreibung, Kachel 170 px, Titel unten. */
	.wgl-service-1 .wgl-service_description { display: none !important; }
	.wgl-service-1 .wgl-service_title { min-height: 0 !important; height: auto !important; margin-bottom: 0 !important; }
	.wgl-service-1 .wgl-service_content-wrap { min-height: 170px; display: flex !important; align-items: flex-end; }
	.wgl-service-1 .wgl-service_content { width: 100%; }
	/* Tippflächen der Footer-Links mind. ~40 px hoch. */
	.elementor-element-914a826 .hover_links a {
		display: inline-block;
		padding: 9px 0;
	}
}

/* Handy-Menü: Antippen des Menütexts öffnet die Seite (wie am Computer, z. B. „Kaufen" ->
 * Shop); nur der Pfeil rechts klappt das Untermenü auf/zu. Das Theme legt den Umschalter
 * sonst über die ganze Zeile (width:100%) und blockiert den Link. Punkte ohne echtes Ziel
 * (href="#", z. B. „Services") behalten die volle Breite, sonst wären sie tot. */
.mobile_nav_wrapper .primary-nav .menu-item-has-children > a .button_switcher {
	width: 64px;
	height: 48px;
}
.mobile_nav_wrapper .primary-nav .menu-item-has-children > a[href="#"] .button_switcher {
	width: 100%;
}

/* Long German compounds (e.g. "Wechselbrückencontainer" in a 42px product H1) are wider
 * than a phone screen and get clipped instead of wrapping (client report M-11, 14.10.2026).
 * Hyphenation relies on <html lang="de">; break-word is the fallback for words the
 * dictionary cannot split. */
@media (max-width: 680px) {
	h1, h2, h3, h4 {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* Article and page text: words joined by slashes ("Slots/Warteschlangen/Terminalbeschränkungen",
 * "Feuchtigkeitsabsorber/Luftentfeuchter") have no break point and were clipped on phones in two
 * blog posts (K5, 15.10.2026; up to 116 px at 360 px). Only p/li of the post or page content may
 * break inside such a word: Elementor text editor and icon list widgets, and the block editor flow
 * of a single post (.blog-post_content) or a page (.page #main-content; not the shop, not the blog
 * index). Header, footer, menus, breadcrumbs, buttons, sidebar, cards and forms keep "normal".
 * "anywhere", not "break-word": icon list text is a flex item, and only "anywhere" lowers its
 * min-content width (with break-word 1 of the 6 clipped items at 360 px stayed clipped).
 * Hyphenation as in the phone headings above (M-11): German hyphens where the dictionary allows a split
 * (decision of Volodymyr, 15.10.2026, K5v). "anywhere" stays as the fallback for words the dictionary
 * cannot split: Chromium (148) does not hyphenate a word that contains a slash. Since K5g (15.10.2026)
 * inc/content-wbr.php puts a <wbr> after such a slash, so the chain breaks there and each word is hyphenated.
 * hyphenate-limit-chars 8 4 4 (K5g): only words of 8 letters or more, at least 4 letters on each side of the
 * hyphen (no "ha-|ben", "Ma-|terial"); the -webkit- limits are the WebKit (Safari) spelling of the same minimums. */
@media (max-width: 680px) {
	#main-content .elementor-widget-text-editor p,
	#main-content .elementor-widget-text-editor li,
	#main-content .elementor-widget-icon-list li,
	#main-content .blog-post-single-item .blog-post_content > p,
	#main-content .blog-post-single-item .blog-post_content > ul:not([class]) li,
	#main-content .blog-post-single-item .blog-post_content > ul.wp-block-list li,
	#main-content .blog-post-single-item .blog-post_content > ol:not([class]) li,
	#main-content .blog-post-single-item .blog-post_content > ol.wp-block-list li,
	.page #main-content > p,
	.page #main-content > ul:not([class]) li,
	.page #main-content > ul.wp-block-list li,
	.page #main-content > ol:not([class]) li,
	.page #main-content > ol.wp-block-list li {
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		overflow-wrap: anywhere;
	}
}

/* Internal links of core v2 (inc/seo-internal-links.php, card K4, 15.10.2026): "Passende Alternativen" at the end of
 * the product summary, one "Siehe auch" line after the product grid of categories and the shop hub.
 * Plain list without markers or icons (see M-16: list icons), no hyphenation (decision of Volodymyr, 15.10.2026, K5v).
 * Underlined: the link colour #996600 (coin-link-color-fix.css) is only 1.9:1 against the body text #464646 (WCAG 1.4.1
 * asks for 3:1 when colour alone marks a link), too little to tell links from "Siehe auch:" and the separators. */
.coin-links a:not(.button) {
	text-decoration: underline;
}
.coin-links--product {
	margin: 20px 0 0;
}
.coin-links--product .coin-links__title {
	margin: 0 0 4px;
	font-weight: 700;
}
.coin-links--product ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.coin-links--product li {
	margin: 0 0 4px;
	padding: 0;
}
.coin-links--archive {
	margin: 1.5em 0;
}

/* Service CTA line after the intro of two guide articles (inc/seo-cta-links.php, card K70, 27.10.2026).
 * Accent line in the link colour #996600 named above (no new colour); the link itself keeps the content link styles. */
.coin-cta {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1em;
	border-left: 4px solid #996600;
}