/**
 * Trafmo – front-end & editor extras.
 * Only what theme.json cannot express (transitions, custom block styles).
 */

html {
	scroll-behavior: smooth;
}

/* Prevent any accidental horizontal overflow on small screens */
body {
	overflow-x: hidden;
}

/* Smooth, consistent interaction feedback */
.wp-element-button,
.wp-block-button__link,
a {
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

/* Primary buttons lift slightly on hover */
.wp-block-button:not(.is-style-outline-brand) .wp-block-button__link:hover {
	box-shadow: 0 12px 30px rgba(28, 36, 224, 0.25);
	transform: translateY(-1px);
}

/* Button style: outline (brand) */
.wp-block-button.is-style-outline-brand .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline-brand .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Group style: card */
.wp-block-group.is-style-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--50);
	box-shadow: 0 4px 16px rgba(27, 27, 47, 0.06);
}

/* CTA card inside the services grid: center its content vertically so it
   doesn't stick to the top when the grid row is taller than its content. */
.wp-block-group.trafmo-cta-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Group style: card with hover lift */
.wp-block-group.is-style-card-hover {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--50);
	box-shadow: 0 4px 16px rgba(27, 27, 47, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.wp-block-group.is-style-card-hover:hover {
	box-shadow: 0 18px 40px rgba(27, 27, 47, 0.12);
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary-soft);
}

/* Hero split visual (Google local search illustration) */
.trafmo-hero-visual {
	margin: 0;
}
.trafmo-hero-visual img {
	width: 100%;
	height: auto;
}

/* Customer logo trust bar — a row that moves left as the PAGE is scrolled
   (not auto-playing). footer-reveal.js duplicates the track once for a seamless
   loop and sets translateX from window.scrollY; CSS just clips + edge-fades.
   Constrained to the content (alignwide) width, not full-bleed. */
.trafmo-logos {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.trafmo-logos-track {
	width: max-content;
	flex-wrap: nowrap;
	gap: 0;
	will-change: transform;
}
.trafmo-logos-track .wp-block-image {
	margin: 0 var(--wp--preset--spacing--60) 0 0;
	flex: 0 0 auto;
}
.trafmo-logos img {
	height: 40px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
}
@media (max-width: 781px) {
	.trafmo-logos img {
		height: 32px;
	}
}

/* Real photos (Firefly) — rounded card look + soft brand shadow */
.trafmo-photo {
	margin: 0;
}
.trafmo-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(28, 36, 224, 0.13);
}

/* Inline logo (with wordmark) used inside a heading, replacing the word "Trafmo" */
.trafmo-inline-logo {
	height: 0.98em;
	width: auto;
	display: inline-block;
	vertical-align: -0.15em;
	margin: 0 0.12em;
}

/* Round founder/team avatar (e.g. Jens Schulz on Über uns) */
.trafmo-avatar {
	margin: 0 auto 1.25rem !important;
}
.trafmo-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: 0 10px 28px rgba(28, 36, 224, 0.18);
}

/* About page — vertical story timeline */
.trafmo-timeline {
	max-width: 700px;
	margin-inline: auto;
}
.trafmo-timeline-item {
	position: relative;
	padding-left: 2.25rem;
	padding-bottom: 2.25rem;
	border-left: 2px solid var(--wp--preset--color--stroke);
}
.trafmo-timeline-item:last-child {
	padding-bottom: 0;
}
.trafmo-timeline-item::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}
.trafmo-timeline-year {
	margin: 0 0 0.3rem !important;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.trafmo-timeline-item h3 {
	margin: 0 0 0.4rem;
}
.trafmo-timeline-item p:last-child {
	margin-bottom: 0;
}

/* Legal pages (Impressum/Datenschutz/AGB) — readable typography for the raw
   1:1 legal HTML rendered via core/html inside .trafmo-legal. */
.trafmo-legal {
	line-height: 1.7;
}
.trafmo-legal p {
	margin: 0 0 1rem;
}
.trafmo-legal h2 {
	font-size: 1.4rem;
	margin: 2.2rem 0 0.6rem;
	line-height: 1.3;
}
.trafmo-legal h3 {
	font-size: 1.15rem;
	margin: 1.6rem 0 0.5rem;
}
.trafmo-legal h4 {
	font-size: 1.02rem;
	margin: 1.3rem 0 0.4rem;
}
.trafmo-legal ul,
.trafmo-legal ol {
	margin: 0 0 1rem 1.2rem;
}
.trafmo-legal li {
	margin-bottom: 0.4rem;
}
.trafmo-legal a {
	color: var(--wp--preset--color--primary);
	word-break: break-word;
}

/* Contact Form 7 — brand styling inside the .trafmo-form card */
.trafmo-form .wpcf7-form p {
	margin: 0 0 1.1rem;
}
.trafmo-form label {
	display: block;
	font-weight: 600;
	font-size: 0.95rem;
}
.trafmo-form .trafmo-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}
@media (max-width: 600px) {
	.trafmo-form .trafmo-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.trafmo-form .trafmo-form-grid label {
		display: block;
		margin-bottom: 1.1rem;
	}
}
.trafmo-form input.wpcf7-form-control,
.trafmo-form textarea.wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.trafmo-form textarea.wpcf7-form-control {
	min-height: 7rem;
	resize: vertical;
}
.trafmo-form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(28, 36, 224, 0.12);
}
.trafmo-form input::placeholder,
.trafmo-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 0.7;
}
.trafmo-form .trafmo-form-submit {
	margin-bottom: 0;
}
.trafmo-form input.wpcf7-submit {
	width: 100%;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	padding: 0.95rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transition: background 0.15s ease;
}
.trafmo-form input.wpcf7-submit:hover {
	background: #1319a8;
}
.trafmo-form .wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 0.3rem;
}
.trafmo-form .wpcf7-response-output {
	margin: 1.1rem 0 0 !important;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	font-size: 0.95rem;
}
.trafmo-form .wpcf7-spinner {
	margin: 0 0 0 0.5rem;
}

/* Brand dot-grid texture — subtle "map" feel behind the hero */
.trafmo-hero {
	background-image: radial-gradient(rgba(28, 36, 224, 0.06) 1.4px, transparent 1.4px);
	background-size: 28px 28px;
}

/* Mobile: centre the hero content once the split columns stack */
@media (max-width: 781px) {
	.trafmo-hero .wp-block-column {
		text-align: center;
	}
	.trafmo-hero .wp-block-buttons {
		justify-content: center;
	}
	/* Footer bottom bar (copyright + social + legal): sauber vertikal stapeln */
	.trafmo-footer-bottom {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		text-align: center;
	}
}

/* List style: pin bullets — location pin in brand colour (local-marketing motif) */
.wp-block-list.is-style-pin {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-pin li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 0.6em;
}
.wp-block-list.is-style-pin li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.3em;
	height: 1.3em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C24E0'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* List style: check marks (for feature lists) */
.wp-block-list.is-style-check {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-check li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.6em;
}
.wp-block-list.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C24E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.8em;
}

/* Image style: rounded */
.wp-block-image.is-style-rounded img {
	border-radius: 16px;
}

/* Eyebrow / kicker text helper (apply via class).
   display:block so .has-text-align-center actually centers the element;
   without an alignment class it follows normal flow (left). */
.trafmo-eyebrow {
	display: block;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Slightly tighter, bolder nav links */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 700;
}

/* Header: below ~1000px the 6 nav items + CTA would wrap to a second line, so
   we collapse the WHOLE nav into the hamburger overlay there (WP's built-in
   "mobile" overlay only kicks in <600px, which left a wrapping 600–1000px gap).
   The standalone CTA button is hidden in this range — "Angebot anfordern" then
   lives inside the overlay (trafmo-nav-cta). */
@media (max-width: 999px) {
	.trafmo-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.trafmo-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.wp-block-buttons.trafmo-header-cta {
		display: none !important;
	}
}

/* On the wide inline nav (>=1000px) the standalone CTA button covers it, so
   hide the duplicate "Angebot anfordern" nav item (it shows inside the overlay
   on smaller screens). */
@media (min-width: 1000px) {
	.wp-block-navigation-item.trafmo-nav-cta {
		display: none !important;
	}
}

/* ---- Mobile overlay menu: clean list with spacing, separators & CTA ---- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	padding-top: 104px !important;
}
/* Trafmo logo (mark + wordmark) at the top of the overlay for recognition */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "";
	position: absolute;
	top: 26px;
	left: var(--wp--preset--spacing--50);
	width: 150px;
	height: 35px;
	background: url(/wp-content/themes/trafmo/assets/img/logo-rounded.svg) no-repeat left center;
	background-size: contain;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--stroke);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.05rem 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-align: left;
}
/* "Angebot anfordern" rendered as a filled brand button at the bottom */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.trafmo-nav-cta {
	border-bottom: 0;
	margin-top: var(--wp--preset--spacing--50);
}
.wp-block-navigation__responsive-container.is-menu-open .trafmo-nav-cta .wp-block-navigation-item__content {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-align: center;
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

/* The raw legal nav items are only a data source — never shown as nav links.
   The visible version is the JS-built .trafmo-legal-row (footer-reveal.js). */
.trafmo-nav-legal {
	display: none !important;
}
.trafmo-legal-row {
	display: none;
}
@media (max-width: 999px) {
	.wp-block-navigation__responsive-container.is-menu-open .trafmo-legal-row {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 24px;
		z-index: 10;
		justify-content: center;
		align-items: center;
		gap: 0.6rem;
		padding: 0 var(--wp--preset--spacing--50);
	}
	.trafmo-legal-row a {
		color: var(--wp--preset--color--muted);
		font-size: 0.9rem;
		font-weight: 600;
		text-decoration: none;
	}
	.trafmo-legal-row .trafmo-legal-sep {
		color: var(--wp--preset--color--muted);
		opacity: 0.6;
	}
}

/* Service-card icons — custom Trafmo SVGs via core/image (WP 7.0 core/icon is
   library-only, so custom icons use a standard image block). */
.trafmo-card-icon {
	margin: 0 0 1rem;
}
.trafmo-card-icon img {
	width: 48px;
	height: 48px;
	display: block;
}

/* Logo (header + footer) — core/image figure with a linked SVG */
.trafmo-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin: 0;
}
.trafmo-logo img {
	height: 38px !important;
	width: auto !important;
	max-width: none;
	display: block;
}
.trafmo-logo--footer img {
	height: 40px !important;
}
@media (max-width: 781px) {
	.trafmo-logo img {
		height: 32px !important;
	}
}

/* Google Partner Badge (Footer, zweite Spalte) */
.trafmo-partner-badge img {
	border-radius: 20px;
}
@media (min-width: 782px) {
	.trafmo-partner-badge.wp-block-image {
		/* auf Höhe des Beschreibungstexts starten (Logo 40px + 25px Abstand) */
		margin-top: 65px;
	}
}

/* Zertifikate an der "Wand" mit Goldrahmen (online-werbung) */
.trafmo-cert-wall {
	background: #edeef2;
}
.trafmo-cert {
	margin: 0;
}
.trafmo-cert img {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #fff; /* Passepartout */
	padding: 12px;
	border: 8px solid;
	border-image: linear-gradient(135deg, #7a5c00 0%, #d4af37 22%, #f7e7a8 42%, #d4af37 58%, #a67c00 78%, #f2d98a 100%) 1;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trafmo-cert:hover img {
	transform: scale(1.04);
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}
.trafmo-cert figcaption {
	margin-top: 16px;
	text-align: center;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	font-size: 0.95rem;
}
/* Zertifikate-Karussell (online-werbung) */
.trafmo-carousel {
	position: relative;
}
.trafmo-carousel-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px 64px 34px; /* seitliches Padding = "Peek" der Nachbarkarten */
	scrollbar-width: none;
	/* weicher Übergang an den Rändern */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 66px, #000 calc(100% - 66px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 66px, #000 calc(100% - 66px), transparent 100%);
}
.trafmo-carousel-track::-webkit-scrollbar {
	display: none;
}
.trafmo-carousel-track .trafmo-cert {
	flex: 0 0 calc((100% - 48px) / 3); /* 3 sichtbar (Desktop), 2 Lücken à 24px */
	margin: 0;
}
@media (max-width: 900px) {
	.trafmo-carousel-track .trafmo-cert {
		flex-basis: calc((100% - 24px) / 2);
	}
}
@media (max-width: 560px) {
	.trafmo-carousel-track .trafmo-cert {
		flex-basis: 100%;
	}
}
.trafmo-carousel-btn {
	position: absolute;
	top: 50%; /* Startwert; JS (centerBtns) setzt top auf die Bildmitte */
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #4b4b4b;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.trafmo-carousel-btn:hover {
	background: #ffffff;
	color: #1a1a1a;
}
.trafmo-carousel-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}
.trafmo-carousel-prev {
	left: 10px;
}
.trafmo-carousel-next {
	right: 10px;
}
/* mobil: Pfeile aus, dafuer Dots wie bei den Kundenstimmen */
.trafmo-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}
.trafmo-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #b9bcd0;
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}
.trafmo-carousel-dot.is-active {
	width: 22px;
	background: var(--wp--preset--color--primary, #1C24E0);
}
@media (min-width: 782px) {
	.trafmo-carousel-dots { display: none; }
}
@media (max-width: 781px) {
	.trafmo-carousel-btn { display: none; }
}

/* Trust-Bar: mobil je Item eine Reihe, Inhalt (Icon+Text) linksbündig, der Block als Ganzes zentriert */
@media (max-width: 781px) {
	.trafmo-trustbar {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
		width: fit-content !important;
		max-width: 100% !important;
		margin-inline: auto !important;
	}
	.trafmo-trustbar > .wp-block-group {
		justify-content: flex-start;
	}
}

/* Root-level sections (header / main / footer template parts) sit flush —
   each provides its own padding. The root .wp-site-blocks block-gap otherwise
   adds a 1.5rem margin on the footer template-part wrapper, which shows as a
   white band between the blue CTA section and the dark footer. */
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0 !important;
}

/* Fixed-footer reveal (desktop): the footer is pinned to the bottom of the
   viewport; the content scrolls up over it and reveals it. JS sets main's
   margin-bottom to the exact footer height — the value here is a fallback. */
@media (min-width: 782px) {
	.wp-site-blocks > footer.wp-block-template-part {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 0;
	}
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > main {
		position: relative;
		z-index: 1;
	}
	.wp-site-blocks > main {
		background-color: var(--wp--preset--color--base);
		margin-bottom: 440px;
	}
	/* When the overlay menu is open, lift the header's stacking context above
	   <main> so the fixed overlay (otherwise trapped at the header's z-index:1)
	   paints over the page. Only needed >=782px, where the reveal sets z-index. */
	.wp-site-blocks > header.wp-block-template-part:has( .wp-block-navigation__responsive-container.is-menu-open ) {
		z-index: 100000;
	}
}

/* Two-column list (footer Leistungen) so a long link list stays compact */
.trafmo-cols-2 {
	column-count: 2;
	column-gap: var(--wp--preset--spacing--50);
}
.trafmo-cols-2 li {
	break-inside: avoid;
}
@media (max-width: 781px) {
	.trafmo-cols-2 {
		column-count: 1;
	}
}

/* Footer links: highlight blue has too little contrast on the dark footer,
   so use the light surface color with an underline on hover. */
.trafmo-footer a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}
.trafmo-footer a:hover,
.trafmo-footer a:focus {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* FAQ accordion (core/details) styled as cards */
.trafmo-faq .wp-block-details {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 12px;
	padding: 1.1rem 1.5rem;
}
.trafmo-faq .wp-block-details summary {
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	list-style-position: inside;
}
.trafmo-faq .wp-block-details[open] summary {
	margin-bottom: 0.6rem;
}
.trafmo-faq .wp-block-details p {
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	margin: 0;
}
/* Ortsseiten-FAQ: leicht getönte Kacheln, damit sie auf weißem (base) Abschnitt sichtbar sind */
.trafmo-faq-onbase .wp-block-details { background-color: #f2f4ff; border-color: #dde1fb; }
/* Bewertungs-Slider: deaktivierte Pfeile am Anfang/Ende abdunkeln */
.trafmo-reviews-btn:disabled { opacity: .35; cursor: default; }

/* Accessible focus ring in brand color */
:where(a, button, .wp-element-button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ===== Blog / Wissen ===== */

/* Content-Bilder & CTA sollen den Text nur leicht überragen
   (max. 60px je Seite → 760px Text + 120px = 880px) statt bis zur vollen 1200px-wideSize. */
.single-post .wp-block-post-content.is-layout-constrained > .alignwide {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
/* alignwide-Tabellen füllen die 880px-Breite aus */
.single-post .wp-block-post-content .wp-block-table.alignwide table {
	width: 100%;
}

/* Inhaltsmenü (table of contents) */
.trafmo-toc {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.trafmo-toc-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.6rem;
}
.trafmo-toc ul {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.85;
}
.trafmo-toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.trafmo-toc a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
/* offset anchor jumps so headings don't hide behind the sticky-ish header */
.wp-block-heading[id] {
	scroll-margin-top: 90px;
}

/* Author box at the end of a post — same surface bg as the TOC ("INHALT") box */
.wp-block-group.trafmo-author {
	background-color: var(--wp--preset--color--surface);
}
.trafmo-author .wp-block-post-author {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.trafmo-author .wp-block-post-author__avatar {
	margin-right: 0;
}
.trafmo-author .wp-block-post-author__avatar img {
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(28, 36, 224, 0.18);
	display: block;
}
.trafmo-author .wp-block-post-author__byline {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.15rem;
}
.trafmo-author .wp-block-post-author__name {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast);
}
.trafmo-author .wp-block-post-author__bio {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	margin: 0.3rem 0 0;
}

/* Blog overview cards (index/Wissen) */
.trafmo-postcard {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(27, 27, 47, 0.06);
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.trafmo-postcard:hover {
	box-shadow: 0 18px 40px rgba(27, 27, 47, 0.12);
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary-soft);
}
.trafmo-postcard .wp-block-post-featured-image {
	margin: 0;
}
.trafmo-postcard .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.trafmo-postcard .wp-block-post-title {
	margin: 0;
}
.trafmo-postcard .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.trafmo-postcard .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Erster Beitrag auf Seite 1 der Übersicht doppelt breit – NUR Desktop & Hauptseite.
   (Auf Mobil würde span 2 sonst eine zweite Spalte erzwingen.) Bild links, Text rechts. */
@media (min-width: 782px) {
	.blog:not(.paged) .wp-block-post-template.is-layout-grid > li:first-child {
		grid-column: span 2;
	}
	.blog:not(.paged) .wp-block-post-template > li:first-child .trafmo-postcard {
		display: grid;
		grid-template-columns: 45% 55%;
		align-items: stretch;
	}
	.blog:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-featured-image {
		position: relative;
		margin: 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		overflow: hidden;
		aspect-ratio: auto !important; /* Inline aspect-ratio:16/9 überschreiben, sonst bläht height die Breite auf */
	}
	.blog:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-featured-image a,
	.blog:not(.paged) .wp-block-post-template > li:first-child .wp-block-post-featured-image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
	.blog:not(.paged) .wp-block-post-template > li:first-child .trafmo-postcard > div:last-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
	}
}

/* CTA-Karte in der Beitragsübersicht (Akzentfarbe) */
.trafmo-cta-card {
	list-style: none;
	display: flex;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, #1C24E0 0%, #5A60EA 100%);
	box-shadow: 0 4px 16px rgba(27, 27, 47, 0.10);
}
.trafmo-cta-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.55rem;
	padding: var(--wp--preset--spacing--50);
}
.trafmo-cta-eyebrow {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}
.trafmo-cta-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.25;
	color: #ffffff;
}
.trafmo-cta-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}
.trafmo-cta-btn {
	align-self: stretch;
	margin-top: 0.6rem;
	padding: 0.7rem 1rem;
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	text-decoration: none;
	border-radius: 10px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trafmo-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Author box stacks on small screens */
@media (max-width: 600px) {
	.trafmo-author .wp-block-post-author {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* Previous / next post navigation as image cards with title overlay */
.trafmo-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.trafmo-nav-card {
	position: relative;
	display: block;
	min-height: 160px;
	border-radius: 14px;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	background-size: cover;
	background-position: center;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(27, 27, 47, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.trafmo-nav-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 22, 40, 0.05) 0%, rgba(20, 22, 40, 0.78) 100%);
}
.trafmo-nav-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(27, 27, 47, 0.16);
}
.trafmo-nav-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.1rem 1.25rem;
}
.trafmo-nav-label {
	color: #ffffff;
	opacity: 0.85;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}
.trafmo-nav-title {
	color: #ffffff;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.25;
}
.trafmo-nav-next .trafmo-nav-overlay {
	align-items: flex-end;
	text-align: right;
}
@media (max-width: 600px) {
	.trafmo-postnav {
		grid-template-columns: 1fr;
	}
	.trafmo-nav-spacer {
		display: none;
	}
}

/* Post meta row: date · reading time */
.trafmo-postmeta {
	align-items: center;
}
.trafmo-postmeta .wp-block-post-date,
.trafmo-postmeta .wp-block-post-time-to-read,
.trafmo-postmeta p {
	margin: 0;
}

/* Author box: Website / Kontakt icon links, aligned under the bio text */
.trafmo-author-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin-top: 0.9rem;
	padding-left: calc(72px + var(--wp--preset--spacing--40));
}
.trafmo-author-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
}
.trafmo-author-links a:hover {
	text-decoration: underline;
}
.trafmo-author-links svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
@media (max-width: 600px) {
	.trafmo-author-links {
		padding-left: 0;
	}
}

/* ===== Pagination (Blog-Übersicht) ===== */
.wp-block-query-pagination {
	gap: 0.5rem !important;
	align-items: center;
	margin-top: var(--wp--preset--spacing--60);
	flex-wrap: wrap;
}
.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
/* Zahlen-Links + aktuelle Seite: quadratische Buttons */
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.5rem;
	border-radius: 12px;
	border: 1.5px solid #d7d8f5;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.wp-block-query-pagination .page-numbers:hover {
	background: #eef0ff;
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-1px);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(27, 36, 224, 0.28);
}
.wp-block-query-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--muted);
	min-width: auto;
}
/* Vorherige / Nächste: Pill-Buttons mit Pfeil */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 46px;
	padding: 0 1.15rem;
	border-radius: 12px;
	border: 1.5px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: #1118c4;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(27, 36, 224, 0.28);
}
.wp-block-query-pagination-previous::before {
	content: "←";
	font-size: 1.15rem;
	line-height: 1;
}
.wp-block-query-pagination-next::after {
	content: "→";
	font-size: 1.15rem;
	line-height: 1;
}
@media (max-width: 600px) {
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		padding: 0 0.9rem;
	}
	.wp-block-query-pagination .page-numbers {
		min-width: 42px;
		height: 42px;
	}
}

/* Kundenstimmen / Google-Reviews */
.trafmo-stars{ color:#fbbc04; letter-spacing:2px; font-size:1.15rem; line-height:1; margin:0 0 6px; }
.trafmo-review{ display:flex; flex-direction:column; scroll-snap-align:start; }
.trafmo-review-text{ line-height:1.65; }
.trafmo-review-author{ margin-top:14px; font-size:0.9rem; text-align:center; }
.trafmo-review-name{ color:var(--wp--preset--color--primary,#1C24E0); font-weight:700; font-size:1.05rem; }
.trafmo-review-author a{ color:inherit; text-decoration:underline; font-weight:400; }
.trafmo-review-author a:hover{ text-decoration:underline; }

/* ============================================================
   WERBUNG-REDESIGN (Sektions-Varianten)
   ============================================================ */

/* Kennen Sie das? – Problem/Lösung-Split */
.trafmo-pain-list{ list-style:none; margin:1.3rem 0 0; padding:0; }
.trafmo-pain-list li{ position:relative; padding-left:2.4rem; margin:0 0 1.15rem; line-height:1.55; }
.trafmo-pain-list li::before{ content:"\2715"; position:absolute; left:0; top:0; width:1.6rem; height:1.6rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fdeaea; color:#e5484d; font-size:.78rem; font-weight:700; }
.trafmo-solution-panel{ background:linear-gradient(135deg,#1319A8 0%,#1C24E0 100%); color:#fff; border-radius:20px; padding:2.1rem 2rem !important; box-shadow:0 18px 40px rgba(28,36,224,.22); height:100%; }
.trafmo-solution-panel .trafmo-panel-label{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:#c9ccff; margin:0 0 .5rem; }
.trafmo-solution-panel h3{ color:#fff; margin:0 0 .7rem; }
.trafmo-solution-panel p{ color:#eef0ff; line-height:1.65; margin:0; }

/* Kundenstimmen – Slider */
.trafmo-reviews{ position:relative; }
.trafmo-reviews-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:8px 2px 14px; }
.trafmo-reviews-track::-webkit-scrollbar{ display:none; }
.trafmo-reviews-track > *{ flex:0 0 calc((100% - 24px)/2); scroll-snap-align:start; margin:0 !important; }
@media(max-width:781px){ .trafmo-reviews-track > *{ flex-basis:100%; } }
.trafmo-reviews-btn{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; padding:0; border:1px solid rgba(0,0,0,.12); border-radius:50%; background:rgba(255,255,255,.95); color:#4b4b4b; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.12); z-index:4; }
.trafmo-reviews-btn:hover{ color:#111; background:#fff; }
.trafmo-reviews-btn svg{ width:20px; height:20px; }
.trafmo-reviews-prev{ left:-14px; } .trafmo-reviews-next{ right:-14px; }
/* Mobil: Pfeile ausblenden (dort wird gewischt) – sie ragten sonst rechts ueber den Viewport */
@media(max-width:781px){ .trafmo-reviews-btn{ display:none; } }
/* Mobil: Karte ~86% breit, damit die nächste Bewertung rechts hereinguckt (Wisch-Hinweis) */
@media(max-width:781px){ .trafmo-reviews-track > .trafmo-review{ flex:0 0 86% !important; } }
/* Pagination-Dots (nur mobil sichtbar) – aktiver Dot als breite Pille */
.trafmo-reviews-dots{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
.trafmo-reviews-dot{ width:8px; height:8px; padding:0; border:0; border-radius:99px; background:#c9cbe0; cursor:pointer; transition:width .25s ease, background .25s ease; }
.trafmo-reviews-dot.is-active{ width:22px; background:var(--wp--preset--color--primary,#1C24E0); }
@media(min-width:782px){ .trafmo-reviews-dots{ display:none; } }
/* Lange Bewertungen mobil einklappen (~7 Zeilen) + Weiterlesen-Toggle (JS setzt .is-visible / .is-expanded) */
.trafmo-review-more{ display:none; margin-top:10px; background:none; border:0; padding:0; color:var(--wp--preset--color--primary,#1C24E0); font-weight:600; font-size:.9rem; cursor:pointer; align-self:flex-start; }
.trafmo-review-more.is-visible{ display:inline-block; }
@media(max-width:781px){
	.trafmo-review-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:10; overflow:hidden; }
	.trafmo-review.is-expanded .trafmo-review-text{ display:block; -webkit-line-clamp:unset; overflow:visible; }
}

/* Für wen wir arbeiten – Service-Kacheln */
.trafmo-service-tile{ text-align:center; padding:1.5rem .9rem !important; border-radius:16px; background:var(--wp--preset--color--base); border:1px solid var(--wp--preset--color--stroke); transition:transform .2s ease, box-shadow .2s ease; }
.trafmo-service-tile:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(27,27,47,.1); }
figure.trafmo-service-icon{ width:58px; height:58px; margin:0 auto .85rem !important; border-radius:50%; background:var(--wp--preset--color--primary-soft,#eef0ff); display:flex; align-items:center; justify-content:center; }
figure.trafmo-service-icon img{ width:31px; height:31px; }
.trafmo-service-tile h3{ font-size:1rem !important; margin:0 0 .2rem; }
.trafmo-service-tile p{ font-size:.82rem; margin:0; }

/* Aus dem Wissen – Postcards (manuell) */
figure.trafmo-postcard-img{ margin:0 !important; }
figure.trafmo-postcard-img img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.trafmo-postcard .trafmo-postcard-body{ padding:var(--wp--preset--spacing--40); }
.trafmo-postcard h3{ margin:.5rem 0 .5rem; font-size:1.25rem; line-height:1.3; }
.trafmo-postcard h3 a{ color:var(--wp--preset--color--contrast); text-decoration:none; }
.trafmo-postcard h3 a:hover{ color:var(--wp--preset--color--primary); }

/* Aus dem Wissen – Header-Zeile (Text links, Button rechts) */
.trafmo-wissen-head{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; }
.trafmo-wissen-head .trafmo-wissen-intro{ flex:1 1 340px; }
.trafmo-wissen-head .wp-block-buttons{ flex:1 1 220px; justify-content:center; margin:0; }
.trafmo-wissen-head .trafmo-wissen-intro{ max-width:640px; }
.trafmo-wissen-head h2{ margin:.3rem 0 .5rem; }
.trafmo-wissen-head .trafmo-wissen-intro p{ margin:0; }
@media(max-width:781px){ .trafmo-wissen-head{ align-items:flex-start; } }

/* Kennen Sie das? – Überschrift links (Desktop), mobil zentriert */
@media(max-width:781px){ .trafmo-pain-head{ text-align:center; } }

/* Kundenstimmen – Firmenlogo (grau) oben in der Karte */
.trafmo-review-logo{ margin:0 0 16px !important; }
.trafmo-review-logo img{ height:40px; width:auto; display:block; margin:0 auto; }

/* Kennen Sie das? – Überschrift auf Desktop bündig mit Listentext (✕-Einrückung 2.4rem) */
@media(min-width:782px){ .trafmo-pain-head{ padding-left:2.4rem; } }

/* Kontaktformular – Datenschutz-Haken */
.trafmo-form-accept{ font-size:.85rem; line-height:1.5; color:var(--wp--preset--color--muted,#6b6b6b); margin-top:.25rem; }
.trafmo-form-accept .wpcf7-list-item{ margin:0; display:block; }
.trafmo-form-accept label{ display:flex; align-items:flex-start; gap:.55rem; cursor:pointer; }
.trafmo-form-accept input[type=checkbox]{ margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--wp--preset--color--primary,#1C24E0); flex:0 0 auto; }
.trafmo-form-accept a{ color:var(--wp--preset--color--primary,#1C24E0); }

/* Angebot: "So läuft's"-Spalte auf Mobil zentrieren */
@media (max-width: 781px) {
	.trafmo-steps-col { text-align: center; }
	.trafmo-steps-col > ul.is-style-pin { display: inline-block; text-align: left; }
}

/* Kontakt: schlichte Kontaktdaten-Liste mit kleinen Icons */
.trafmo-contact-simple{ margin-top:2.2rem; }
.trafmo-contact-simple p{ margin:0 0 .55rem; display:flex; align-items:center; gap:.7rem;
	font-size:1.4rem; line-height:1.35; color:var(--wp--preset--color--foreground,#1f2430); }
.trafmo-contact-simple p.tcs-gap{ margin-top:1.6rem; }
.trafmo-contact-simple .tcs-ic{ flex:0 0 auto; display:inline-flex; align-items:center;
	color:var(--wp--preset--color--primary,#1C24E0); }
.trafmo-contact-simple .tcs-ic svg{ width:24px; height:24px; }
.trafmo-contact-simple .tcs-lbl{ flex:0 0 auto; min-width:104px;
	color:var(--wp--preset--color--muted,#6b7180); font-weight:400; }
.trafmo-contact-simple a{ color:var(--wp--preset--color--primary,#1C24E0); font-weight:600; text-decoration:none; }
.trafmo-contact-simple a:hover{ text-decoration:underline; }
.trafmo-contact-simple p.tcs-addr{ align-items:flex-start; font-size:1.4rem; font-weight:400; line-height:1.45;
	color:var(--wp--preset--color--muted,#5b616e); }
.trafmo-contact-simple p.tcs-addr .tcs-ic{ margin-top:2px; }

/* Kontakt: auf Mobil nur Eyebrow + Überschrift zentrieren, Kontaktdaten bleiben links */
@media (max-width:781px){
	.trafmo-contact-col > .trafmo-eyebrow,
	.trafmo-contact-col > .wp-block-heading{ text-align:center; }
}

/* CF7 Honeypot – für Menschen unsichtbar, im DOM vorhanden */
.tb-cf7-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* DSGVO-konforme Karte (Klick zum Laden) */
.trafmo-map{ position:relative; box-sizing:border-box; width:100%; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; border:1px solid var(--wp--preset--color--stroke, #e5e7eb); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; background:radial-gradient(circle at 50% 40%, #f4f5ff 0%, #e5e8fb 100%); color:var(--wp--preset--color--contrast, #4B4B4B); }
.trafmo-map__btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; cursor:pointer; border:0; background:transparent; color:inherit; font:inherit; }
.trafmo-map__icon{ width:44px; height:44px; }
.trafmo-map__title{ font-weight:700; font-size:1.05rem; }
.trafmo-map__cta{ display:inline-block; margin-top:4px; padding:9px 20px; border-radius:999px; background:var(--wp--preset--color--primary, #1C24E0); color:#fff; font-weight:700; font-size:.95rem; transition:background .2s ease; }
.trafmo-map__btn:hover .trafmo-map__cta{ background:#151bb0; }
.trafmo-map__note{ max-width:40ch; margin:0; font-size:.8rem; opacity:.8; line-height:1.5; }
.trafmo-map__note a{ color:inherit; text-decoration:underline; }
.trafmo-map.is-loaded{ display:block; padding:0; background:none; }
.trafmo-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Footer: Social-Media-Icons */
.trafmo-social{ display:flex; align-items:center; gap:.5rem; }
.trafmo-social a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:#fff; }
.trafmo-social a:hover, .trafmo-social a:focus-visible{ opacity:.7; }
.trafmo-social svg{ width:1.25rem; height:1.25rem; fill:currentColor; display:block; }

/* Mobil: barrierefreie Tap-Targets & Lesbarkeit (Material 48dp / Apple 44pt / WCAG 2.2) */
@media (max-width: 781px) {
	/* Menü-Button (Hamburger): Tappfläche ≥ 44px */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
	/* Footer-Navigationslinks: komfortable Tapphöhe + Abstand */
	.trafmo-footer li a {
		display: inline-block;
		padding-block: 0.75rem;
		line-height: 1.2;
	}
	/* Card-CTA „Mehr erfahren →" leichter treffbar */
	.is-style-card-hover a {
		display: inline-block;
		padding-block: 0.35rem;
	}
	/* H3-Hierarchie deutlicher (überschreibt nur die Variable für H3, kein !important) */
	h3.wp-block-heading {
		--wp--preset--font-size--large: 1.35rem;
	}
	/* Formularfelder komfortabel tappbar */
	.wpcf7-form input:not([type="checkbox"]):not([type="submit"]),
	.wpcf7-form textarea,
	.wpcf7-form select {
		min-height: 48px;
	}
}