/*
Theme Name: Winkler Tobias MdB
Theme URI: https://winkler-tobias.de/
Author: Compro IT Support
Description: Natives WordPress-Block-Theme fuer die Website von Tobias Winkler MdB.
Version: 1.0.3
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: winkler-tobias
*/

@font-face {
	font-family: "Polo 22r";
	src: url("assets/fonts/Polo22R-Buch.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.wt-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

:root {
	--wt-blue: #122d4b;
	--wt-blue-dark: #0b1c30;
	--wt-green: #005973;
	--wt-cta-green: #005973;
	--wt-gold: #b9975b;
	--wt-grey: #f4f4f4;
	--wt-tint: #e3f2f6;
	--wt-text: #282c36;
}

body {
	font-family: "Polo 22r", sans-serif;
	color: var(--wt-text);
	background: #ffffff;
}

/* Start-Hero: Name/Funktion duerfen bei keiner Bildschirmgroesse Tobias'
   Gesicht ueberlagern. Vorher feste font-size (5rem/2.6rem) + festes
   padding-bottom (12rem) liessen den Textblock auf schmalen Viewports auf
   3 Zeilen umbrechen und weit genug nach oben wachsen, um bis auf Hoehe der
   Augen zu reichen. Jetzt: fluessige Schriftgroessen (clamp), auf Mobil mehr
   Bildhoehe fuer mehr Abstand, sowie ein Verlaufsschleier hinter dem Text als
   zusaetzliche, groessenunabhaengige Trennung von Motiv und Schrift. */
#start {
	position: relative;
	min-height: 70vh;
	padding-bottom: clamp(6rem, 13vw, 12rem);
}

#start::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 48%;
	background: linear-gradient(to top, rgba(11, 28, 48, 0.8), rgba(11, 28, 48, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

#start .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

#start .wt-hero-title {
	font-size: clamp(3rem, 7.8vw, 5rem);
}

#start .wt-hero-sub {
	font-size: clamp(1.55rem, 3.7vw, 2.6rem);
}

@media (max-width: 782px) {
	#start {
		min-height: 82vh !important;
	}
}

@media (max-width: 480px) {
	#start {
		min-height: 90vh !important;
	}
}

a {
	color: var(--wt-blue);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wt-green);
	color: var(--wt-blue);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wt-green);
	color: #ffffff;
}

.wt-header-grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 1.5rem;
}

.wt-cv-button {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wt-cv-button:hover,
.wt-cv-button:focus-visible {
	box-shadow: 0 0 0 2px #ffffff;
	transform: scale(1.05);
}

.wt-cv-flag {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.wt-header-brand {
	align-items: center;
	gap: 0.9rem;
}

.wt-header-logo img {
	height: 68px;
	width: auto;
}

.wt-header-title,
.wt-header-title a {
	margin: 0;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-decoration: none;
}

.wt-header-nav {
	justify-content: center;
}

/* Mobiles Menue (Sandwich-Icon) oeffnete sich technisch korrekt, war aber
   unsichtbar: der WordPress-Standard-Overlay-Hintergrund ist weiss, der
   Navigationsblock selbst hat aber weisse Schrift (fuer die Kopfzeile
   gedacht) - weiss auf weiss. Eigener dunkler Hintergrund fuer das Overlay
   ergaenzt, dazu etwas Innenabstand und groessere, klar lesbare Menuepunkte. */
.wt-header-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wt-blue-dark) !important;
}

.wt-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 2rem 1.5rem;
}

.wt-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.wt-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: 1.5rem;
	padding: 0.7rem 0;
}

.wt-header-nav .wp-block-navigation__responsive-container-open,
.wt-header-nav .wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

.wt-header-nav .wp-block-navigation-item__content {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}

@media (max-width: 782px) {
	.wt-header-grid {
		grid-template-columns: 1fr auto auto;
		column-gap: 0.85rem;
	}

	/* CV-Button soll direkt links neben dem Sandwich-Menü stehen statt in
	   einer eigenen Zeile unter dem Logo (2 Spalten liessen das dritte
	   Grid-Kind in eine neue Zeile umbrechen). Per "order" umsortiert, ohne
	   die Quellreihenfolge/Barrierefreiheit im Markup zu aendern. */
	.wt-header-brand {
		order: 1;
	}

	.wt-cv-button {
		order: 2;
	}

	.wt-header-nav {
		order: 3;
	}
}

.wt-section {
	padding: 4rem 1.5rem;
}

.wt-section--alt {
	background: var(--wt-tint);
}

/* Instagram-Feed soll direkt am Sektionsanfang ohne Abstand beginnen. */
#aktuelles {
	padding-top: 0;
	padding-bottom: 2rem;
}

/* Der Instagram-Feed liegt in einem .wt-fullbleed-Wrapper und verliert dadurch
   den seitlichen Sektions-Gutter (1.5rem). Direkt am Plugin-Container wieder
   ergaenzt, damit Profilkopf und Bildraster nicht an den Viewport-Raendern kleben. */
#sb_instagram {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Politik-Sektion: gleich grosser, groesserer Abstand zu "Ueber mich" oben und "Meine Reden im Plenum" unten.
   Hinweis: zwischen #ueber-mich und #politik besteht unabhaengig vom Padding ein zusaetzlicher visueller
   Abstand von ca. 28px (Restspalt trotz margin:0 auf beiden Sektionen), zwischen #politik und #reden nicht.
   padding-top ist deshalb um diese 28px reduziert, damit der sichtbare Gesamtabstand oben und unten gleich gross ist. */
#politik {
	padding-top: calc(9rem - 28px);
	padding-bottom: 9rem;
}

/* "Ueber mich": Foto randlos links, Text vertikal zentriert rechts. */
.wt-ueber-mich-columns {
	gap: 0;
	align-items: stretch;
}

.wt-ueber-mich-columns > .wp-block-column {
	flex-basis: 50% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	min-width: 0;
}

.wt-ueber-mich-photo {
	margin: 0;
	padding: 0;
	overflow: hidden;
	min-height: 26rem;
}

.wt-ueber-mich-photo .wp-block-image {
	height: 100%;
	margin: 0;
}

.wt-ueber-mich-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 25% center;
}

.wt-ueber-mich-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 3rem;
	box-sizing: border-box;
}

.wt-ueber-mich-text .wp-block-buttons {
	margin-top: 2.5rem;
}

@media (max-width: 781px) {
	.wt-ueber-mich-photo {
		min-height: 22rem;
	}

	.wt-ueber-mich-columns > .wp-block-column {
		flex-basis: 100%;
	}
}

/* Politik-Sektion: Akkordeon im Stil der Altseite (natives core/details-Block). */
.wt-accordion {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.wt-accordion details.wp-block-details {
	width: 100%;
	box-sizing: border-box;
	background: var(--wt-tint);
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(18, 45, 75, 0.22);
	padding: 0;
	margin: 0;
}

.wt-accordion summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--wt-blue);
}

.wt-accordion summary::-webkit-details-marker {
	display: none;
}

.wt-accordion summary::marker {
	content: "";
}

.wt-accordion summary::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid currentColor;
	transition: transform 0.2s ease;
}

.wt-accordion details[open] summary {
	color: var(--wt-cta-green);
}

.wt-accordion details[open] summary::after {
	transform: rotate(-90deg);
}

.wt-accordion details > *:not(summary) {
	margin: 0;
	padding: 0 2rem 1.75rem;
}

/* "Meine Reden im Plenum": dunkelblaue Sektion mit Video-Teaser + Play-Button-Overlay. */
.wt-reden-media {
	margin-top: 0;
}

.wt-reden-media figure.wp-block-image {
	margin: 0;
}

.wt-reden-media img {
	display: block;
	width: 100%;
	height: auto;
}

.wt-reden-media a {
	position: relative;
	display: block;
}

.wt-reden-media a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 84px;
	height: 84px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.5);
	z-index: 1;
	transition: background 0.2s ease;
}

.wt-reden-media a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 26px solid #ffffff;
	transform: translate(-38%, -50%);
	z-index: 2;
}

.wt-reden-media a:hover::before {
	background: rgba(20, 20, 20, 0.7);
}

/* "Praktika": wie "Ueber mich", nur gespiegelt - Text links, Foto randlos rechts. */
.wt-praktika-columns {
	gap: 0;
	align-items: stretch;
}

.wt-praktika-columns > .wp-block-column {
	flex-basis: 50% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	min-width: 0;
}

.wt-praktika-photo {
	margin: 0;
	padding: 0;
	overflow: hidden;
	min-height: 38rem;
}

.wt-praktika-photo .wp-block-image {
	height: 100%;
	margin: 0;
}

.wt-praktika-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

.wt-praktika-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 3rem;
	box-sizing: border-box;
}

.wt-praktika-text a {
	color: var(--wt-cta-green);
	font-weight: 700;
}

@media (max-width: 781px) {
	.wt-praktika-photo {
		min-height: 26rem;
	}

	.wt-praktika-columns > .wp-block-column {
		flex-basis: 100%;
	}
}

/* "Berlinfahrten": wie "Ueber mich" - Foto randlos links, Text rechts. */
.wt-berlinfahrten-columns {
	gap: 0;
	align-items: stretch;
}

.wt-berlinfahrten-columns > .wp-block-column {
	flex-basis: 50% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	min-width: 0;
}

.wt-berlinfahrten-photo {
	margin: 0;
	padding: 0;
	overflow: hidden;
	min-height: 38rem;
}

.wt-berlinfahrten-photo .wp-block-image {
	height: 100%;
	margin: 0;
}

.wt-berlinfahrten-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.wt-berlinfahrten-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 3rem;
	box-sizing: border-box;
}

.wt-berlinfahrten-text a {
	color: var(--wt-cta-green);
	font-weight: 700;
}

.wt-berlinfahrten-text p + p {
	margin-top: 1.5rem;
}

@media (max-width: 781px) {
	.wt-berlinfahrten-photo {
		min-height: 26rem;
	}

	.wt-berlinfahrten-columns > .wp-block-column {
		flex-basis: 100%;
	}

	/* Mobil sollen Praktika-Bild und Berlinfahrten-Bild nicht direkt
	   aufeinanderfolgen: Berlinfahrten zeigt am Desktop bewusst zuerst das
	   Foto, dann den Text (Spiegelbild zu Praktika). Beim Stapeln auf Mobil
	   wuerden dadurch beide Tobias-Fotos unmittelbar hintereinander stehen.
	   Reihenfolge deshalb nur hier vertauscht: Text zuerst, dann Foto -
	   jedes Bild bleibt so seinem eigenen Themenblock zugeordnet. */
	.wt-berlinfahrten-text {
		order: 1;
	}

	.wt-berlinfahrten-photo {
		order: 2;
	}
}

/* Kein Abstand zwischen Praktika und Berlinfahrten: Bildkante soll direkt auf Bildkante treffen. */
#berlinfahrten {
	margin-top: -28px;
}

#kontakt {
	padding-top: 2.5rem;
	padding-left: 3rem;
}

/* Ueberschrift/Text/Team-Reihen duerfen bei sehr breiten Fenstern ueber die
   sonst uebliche 1200px-Grenze hinaus wachsen, damit z. B. "Sandra Schmidt /
   Assistentin (Terminanfragen Berlin)" nicht unnoetig umbricht - aber nicht
   bis zum echten Fensterrand (das waere fuer Fliesstext zu weit). */
#kontakt .alignfull {
	width: 100%;
	max-width: 1800px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wt-kontakt-intro {
	margin-top: 0;
}

.wt-kontakt-intro-inner {
	display: block;
	max-width: 36rem;
}

.wt-kontakt-subheading {
	color: var(--wt-cta-green);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 1.25rem;
}

.wt-kontakt-label {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: #888888;
	margin-top: -0.5rem;
	margin-bottom: 1.5rem;
}

.wt-kontakt .wp-block-columns {
	margin-bottom: 0;
}

/* Alle Team-Spalten (egal ob 2, 3 oder 5 pro Reihe) auf dieselbe Breite wie
   im 5-spaltigen "Mein Team in Berlin"-Raster zwingen, damit kuerzere Reihen
   (Wahlkreis) nicht auf volle Breite auseinandergezogen werden und buendig
   unter den Berlin-Spalten stehen. */
.wt-kontakt .wp-block-columns > .wp-block-column.wt-team-member {
	flex: 0 0 calc((100% - 4 * 2rem) * 0.9375 / 5) !important;
	max-width: calc((100% - 4 * 2rem) * 0.9375 / 5) !important;
}

/* Erste Spalte je Reihe (Bundestagsbuero / Wahlkreisbuero Fuerth / Neustadt)
   traegt mehr Text (Adresse) als die Personen-Spalten - etwas breiter, die
   uebrigen vier Slots kompensieren das, damit die Gesamtbreite je Reihe
   gleich bleibt und alles weiterhin buendig untereinander steht. */
.wt-kontakt .wp-block-columns > .wp-block-column.wt-team-member:first-child {
	flex: 0 0 calc((100% - 4 * 2rem) * 1.25 / 5) !important;
	max-width: calc((100% - 4 * 2rem) * 1.25 / 5) !important;
}

@media (max-width: 781px) {
	.wt-kontakt .wp-block-columns > .wp-block-column.wt-team-member,
	.wt-kontakt .wp-block-columns > .wp-block-column.wt-team-member:first-child {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

.wt-kontakt a {
	color: var(--wt-cta-green);
	font-weight: 700;
}

.wt-team-member h4 {
	margin-bottom: 0.2rem;
	font-size: 1.05rem;
}

.wt-team-member p {
	margin-top: 0;
	color: #555555;
}

.wt-team-member p strong {
	color: var(--wt-text);
}

.wt-contact-box {
	border: 1px solid #dddddd;
	padding: 1.5rem;
	border-radius: 4px;
}

/* Presse/Mandat-Spalten: als symmetrische, mittig ausgerichtete Karten mit gleicher Buttonhoehe. */
.wt-presse-mandat {
	gap: 2.5rem;
}

.wt-presse-mandat .wp-block-column {
	display: flex;
	flex-direction: column;
	background: var(--wt-tint);
	border-radius: 8px;
	padding: 2.25rem 2.5rem;
	box-shadow: 0 2px 14px rgba(18, 45, 75, 0.08);
	flex-basis: 0;
}

.wt-presse-mandat .wp-block-column > h4.wp-block-heading {
	text-align: center;
	margin-top: 0;
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid rgba(0, 89, 115, 0.15);
	color: var(--wt-blue);
	/* Fluessige Groesse statt fester 2.1rem: "Pressemitteilungen" und
	   "Veroeffentlichungen" brachen auf schmalen Mobilgeraeten sonst in der
	   Spalte um. */
	font-size: clamp(1.3rem, 6vw, 2.1rem);
	font-weight: 800;
	letter-spacing: 0.01em;
}

@media (max-width: 480px) {
	.wt-presse-mandat .wp-block-column {
		padding: 2.25rem 1.25rem;
	}
}

.wt-presse-mandat .wp-block-post-template {
	text-align: center;
}

.wt-presse-mandat .wp-block-post-template > li {
	padding: 1.15rem 0;
	border-bottom: 1px solid #e6e6e6;
}

.wt-presse-mandat .wp-block-post-template > li:first-child {
	padding-top: 0;
}

.wt-presse-mandat .wp-block-post-template > li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.wt-presse-mandat .wp-block-post-title {
	text-align: center;
	margin-bottom: 0.5rem;
	line-height: 1.35;
}

.wt-presse-mandat .wp-block-post-title a {
	color: var(--wt-blue);
}

.wt-presse-mandat .wp-block-post-date {
	text-align: center;
	color: #8a8a8a;
	font-style: italic;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wt-presse-mandat .wp-block-buttons {
	justify-content: center;
	margin-top: auto;
	padding-top: 3.5rem;
}

.wp-block-button.wt-cta-button .wp-block-button__link {
	background-color: var(--wt-cta-green);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 4px;
	padding: 0.85em 1.6em;
}

/* Footer im Stil der Altseite: gruene Kleinschrift-Label statt grosser weisser
   Ueberschriften, Instagram als runder Icon-Button statt Textlink. */
.wt-footer .wp-block-column {
	text-align: center;
}

.wt-footer-label {
	color: var(--wt-tint);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.wt-footer p {
	line-height: 1.7;
}

.wt-footer a {
	color: var(--wt-tint);
	font-weight: 700;
}

.wt-footer-social {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.wt-footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ffffff;
	transition: opacity 0.2s ease;
}

.wt-footer-social-icon:hover {
	opacity: 0.85;
}

/* Footer-Spalten sollen mit dem Fenster mitwachsen (nicht in einer festen
   800px-Box haengen bleiben), aber bei sehr breiten Fenstern nicht bis zum
   echten Rand laufen - gleiche Loesung wie bei #kontakt (5z7). */
.wt-footer .alignfull {
	width: 100%;
	max-width: 1800px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Impressum/Datenschutz (page.html): Abstand zwischen Seitentitel und
   Inhalt verkleinern, dafuer mehr Luft zwischen Inhaltsende und Footer. */
.wt-page-title {
	padding-bottom: 0.5rem;
}

.wt-page-title h1 {
	margin-bottom: 0;
}

.wt-page-content {
	padding-bottom: 5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Pressefotos-Archiv: Karten mit Bild, Fotografen-Hinweis und Download-Button. */
.wt-pressefoto-grid {
	gap: 2rem 1.5rem;
}

.wt-pressefoto-card {
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 4px 18px rgba(18, 45, 75, 0.12);
	overflow: hidden;
	padding-bottom: 1.5rem;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.wt-pressefoto-card img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* "Portraet formell" ist nahezu quadratisch (statt breiter Querformat wie die
   uebrigen Pressefotos), dadurch schnitt der zentrierte Ausschnitt bislang
   den Kopf oben ab. Ausschnitt gezielt fuer dieses Bild nach oben verschoben.
   Hinweis: das Featured-Image im Query-Loop traegt keine wp-image-{id}-Klasse,
   daher Auswahl ueber den Dateinamen im src-Attribut. */
.wt-pressefoto-card img[src*="Portraet-formell"] {
	object-position: center 0%;
}

/* "Portraet leger" ist ebenfalls hochformatig (statt breiter Querformat),
   dadurch schnitt der zentrierte Standard-Ausschnitt bislang den Kopf oben ab. */
.wt-pressefoto-card img[src*="Portraet-leger"] {
	object-position: center 0%;
}

/* "Mikrofon" ist ebenfalls hochformatig; der Kopf sitzt im Originalfoto nicht
   mittig, sondern im oberen Bilddrittel, dadurch schnitt die zentrierte
   Standard-Position bislang den Kopf oben leicht an. */
.wt-pressefoto-card img[src*="Mikrofon"] {
	object-position: center 17%;
}

.wt-pressefoto-card .wp-block-post-content {
	padding: 1rem 1.25rem 0;
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.wt-pressefoto-card .wp-block-post-content p {
	color: #666666;
	font-size: 0.9rem;
	margin-top: 0;
}

.wt-pressefoto-card .wp-block-buttons {
	justify-content: center;
	margin-top: auto;
}

/* Kontaktformular (Bereich "Kontakt", nach den Team-Reihen). */
.wt-kontaktformular {
	max-width: 40rem;
	margin-top: 1rem;
}

.wt-kontaktformular-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wt-kontaktformular-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 600px) {
	.wt-kontaktformular-grid {
		grid-template-columns: 1fr;
	}
}

.wt-kontaktformular-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.25rem;
}

.wt-kontaktformular label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--wt-blue);
	margin-bottom: 0.4rem;
}

.wt-kontaktformular input[type="text"],
.wt-kontaktformular input[type="email"],
.wt-kontaktformular textarea {
	font-family: inherit;
	font-size: 1rem;
	color: var(--wt-text);
	border: 1px solid #cfd6dc;
	border-radius: 4px;
	padding: 0.7em 0.85em;
	box-sizing: border-box;
	width: 100%;
}

.wt-kontaktformular input:focus,
.wt-kontaktformular textarea:focus {
	outline: none;
	border-color: var(--wt-cta-green);
	box-shadow: 0 0 0 3px rgba(0, 89, 115, 0.15);
}

.wt-kontaktformular-consent {
	font-size: 0.88rem;
	color: #555555;
	line-height: 1.5;
	margin-bottom: 1.5rem;
}

.wt-kontaktformular-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	color: #555555;
}

.wt-kontaktformular-consent input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.wt-kontaktformular-consent a {
	color: var(--wt-cta-green);
	font-weight: 700;
}

button.wt-kontaktformular-submit {
	display: inline-block;
	background-color: var(--wt-cta-green);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 4px;
	padding: 0.85em 1.6em;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
}

button.wt-kontaktformular-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.wt-kontaktformular-status {
	margin-top: 1rem;
	font-weight: 700;
	min-height: 1.5em;
}

.wt-kontaktformular-status.is-success {
	color: #1a7a3c;
}

.wt-kontaktformular-status.is-error {
	color: #b3261e;
}