/*
 * SUBWAY Kontaktseite V2 (Stefan 08.10.2026) – nur /kontakt/ (body.sw-kontaktseite), Inhalt aus [sw_kontakt] (inc/kontakt.php).
 * Ausschließlich bestehende Tokens: Anton (Display), Archivo (UI/Text), Newsreader kursiv (Akzent), Farbwelt über --sw-accent / --sw-on-accent.
 * Farbwelt Papier: Akzent = Papierton → Akzentflächen dort in Tinte (--swk-akzent).
 */

.sw-kontaktseite { --swk-akzent: var(--sw-accent); --swk-auf: var(--sw-on-accent); --swk-feld: var(--sw-surface); }
[data-theme="papier"] .sw-kontaktseite, [data-theme="papier"].sw-kontaktseite, .sw-kontaktseite[data-theme="papier"] { --swk-akzent: var(--sw-ink); --swk-auf: var(--sw-paper); }
html[data-theme="papier"] body.sw-kontaktseite { --swk-akzent: var(--sw-ink); --swk-auf: var(--sw-paper); }

/* Inhaltsspalte der Seitenvorlage auf volle Breite öffnen (nur diese Seite) */
.sw-kontaktseite .e-con:has(> .elementor-widget-theme-post-content) { max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; --content-width: 100%; }
/* Kopf wie Rubrikseiten, Rechtsseiten und Über uns (Stefan 09.10.2026): Brotkrumen Archivo 700, Versal, .2em, aktuelle Seite mit 3-px-Linie in --sw-word; 64/36 px nach oben */
.sw-kontaktseite .swk-kopf { padding-block: 64px 0; width: auto; max-width: none; margin-inline: 0; padding-inline: var(--sw-pad); } /* gleiche Rasterlinie wie Logo und Inhalt (auch ≥ 1600 px) */
.swk-kopf .sw-breadcrumb { font-family: var(--sw-font-ui); font-stretch: 100%; font-weight: 700; font-size: var(--sw-fs-label); letter-spacing: .2em; line-height: 1; text-transform: uppercase; color: var(--sw-ink); }
.swk-kopf .sw-breadcrumb p { margin: 0; }
.swk-kopf .sw-breadcrumb a { color: inherit; text-decoration: none; padding-bottom: 3px; border-bottom: 3px solid transparent; transition: border-color .2s; }
.swk-kopf .sw-breadcrumb a:hover, .swk-kopf .sw-breadcrumb a:focus-visible { color: inherit; border-bottom-color: var(--sw-word); text-decoration: none; }
.swk-kopf .sw-breadcrumb .separator { margin-inline: 8px; color: var(--sw-text-2); }
.swk-kopf .sw-breadcrumb .last { padding-bottom: 3px; border-bottom: 3px solid var(--sw-word); }
@media (max-width: 767px) { .sw-kontaktseite .swk-kopf { padding-top: 36px; } .swk-kopf .sw-breadcrumb { line-height: 2; } }

.swk { --swk-rand: var(--sw-pad); color: var(--sw-ink); }
.swk *, .swk *::before, .swk *::after { box-sizing: border-box; }
.swk a:not(.sw-btn) { color: inherit; } /* Style-Guide-Buttons behalten ihre Farben */

/* ---------- Hero: Wir hören zu. ---------- */
.swk-hero { display: grid; gap: var(--sw-s-l); padding: var(--sw-s-l) var(--swk-rand) var(--sw-s-xl); }
.swk-hero__kennung { justify-self: start; margin: 0 0 var(--sw-s-xs); padding-bottom: 3px; border-bottom: 3px solid var(--sw-accent); font: 700 var(--sw-fs-label)/1 var(--sw-font-ui); letter-spacing: var(--sw-tracking-dachzeile); text-transform: uppercase; color: var(--sw-ink); } /* Dachzeile wie im Artikel (.a2-dach) */
.swk-hero__eyebrow { margin: 0; font: 800 clamp(15px, 1.2vw, 18px)/1.1 var(--sw-font-ui); font-stretch: 62%; letter-spacing: .04em; text-transform: uppercase; }
.swk-hero__h1 { margin: 0; font-family: var(--sw-font-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(52px, 14vw, 68px); line-height: .94; letter-spacing: -.01em; }
.swk-z { display: block; }
.swk-z--3 { margin-top: .1em; } /* Abstand für die gedrehte Akzentfläche */
.swk-z--2 { padding-left: .5em; margin-top: .22em; } /* Umlaut-Punkte (Ö) ragen in Anton weit über die Versalhöhe */
.swk-hl { display: inline-block; padding: .04em .1em 0; background: var(--swk-akzent); color: var(--swk-auf); transform: rotate(-2deg); transform-origin: left bottom; }
.swk-hero__links { display: grid; gap: var(--sw-s-s); align-content: start; }
.swk-hero__rechts { display: grid; align-content: start; }
.swk-hero__intro { max-width: 46rem; }
.swk-hero__intro p { margin: 0; }
.swk-hero__satz { font: italic 400 clamp(22px, 2vw, 30px)/1.25 var(--sw-font-accent); }
.swk-hero__satz::before { content: "„"; }
.swk-hero__satz::after { content: "“"; }
.swk-hero__intro .swk-hero__sprung { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sw-s-m); } /* Buttons aus dem Style Guide (.sw-btn, .sw-btn--sec) */
/* „Formular“ ohne Hover-Effekt (Stefan 08.10.2026); „Lieber direkt“ behält den Style-Guide-Hover */
.swk-hero__sprung .swk-btn--ruhig:hover, .swk-hero__sprung .swk-btn--ruhig:active { background: var(--sw-accent); color: var(--sw-on-accent); transform: none; box-shadow: none; }

@media (min-width: 768px) {
	.swk-hero__h1 { font-size: clamp(72px, 9vw, 100px); }
}
@media (min-width: 1200px) {
	/* Kopfbereich (Stefan 08.10.2026): links „Wir hören zu.“ (mitlaufend), rechts Satz + Links, darunter das Formular */
	.swk-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); align-items: start; padding-bottom: var(--sw-s-2xl); }
	.swk-hero__links { grid-column: 1 / 6; position: sticky; top: calc(var(--sw-sticky) + var(--sw-s-l)); }
	.swk-hero__rechts { grid-column: 6 / -1; max-width: 760px; }
	.swk-hero__h1 { font-size: clamp(84px, 7vw, 116px); }
}

/* ---------- Formular (rechte Spalte des Kopfbereichs) ---------- */
.swk-form { margin-top: var(--sw-s-xl); }
.swk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.swk-formular { display: grid; gap: var(--sw-s-m); }

.swk-anliegen { margin: 0 0 var(--sw-s-s); padding: 0; border: 0; min-width: 0; } /* mehr Abstand zu den Feldern: 24 + 16 = 40 px (Stefan 09.10.2026) */
.swk-anliegen legend { padding: 0; margin-bottom: 10px; }
.swk-anliegen__wahl { display: grid; gap: 14px; }
.swk-wahl { position: relative; display: block; cursor: pointer; }
.swk-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swk-wahl__text {
	position: relative; display: flex; align-items: center; min-height: 48px; padding: 12px 46px 12px 18px;
	border: 1.5px solid var(--sw-ink); background: var(--swk-feld); color: var(--sw-ink);
	box-shadow: inset 4px 0 0 #B70074, 4px 4px 0 var(--sw-ink);
	font-family: var(--sw-font-ui); font-weight: 700; font-size: 16px; line-height: 1.3;
	transition: background-color var(--sw-t-fast), box-shadow var(--sw-t-fast) var(--sw-ease);
}
/* Kasten wie die Hauptempfehlung der Redaktionszentrale (Stefan 09.10.2026): Grund wie die Eingabefelder (--swk-feld), Linie Tinte 1,5 px, harter Schatten 4 px, pinke Kante links.
   Gewählt: Kästchen pink gefüllt + Gelb 22 %; Hover: Schatten 6 px. Auswahlmarke eckig rechts, vertikal mittig. */
.swk-wahl__text::after { content: ""; position: absolute; top: calc(50% - 9px); right: 14px; width: 18px; height: 18px; border: 1.5px solid var(--sw-ink); background: var(--swk-feld); }
.swk-wahl input:checked + .swk-wahl__text { background: color-mix(in srgb, #F5C83C 22%, var(--swk-feld)); }
.swk-wahl input:checked + .swk-wahl__text::after { background: #B70074; box-shadow: inset 0 0 0 3px var(--swk-feld); }
.swk-wahl input:focus-visible + .swk-wahl__text { outline: 3px solid var(--sw-focus); outline-offset: 5px; }
@media (hover: hover) {
	.swk-wahl:hover .swk-wahl__text { box-shadow: inset 4px 0 0 #B70074, 6px 6px 0 var(--sw-ink); }
}
.swk-anliegen.is-fehler .swk-wahl__text { border-color: var(--sw-danger); }

.swk-felder { display: grid; gap: var(--sw-s-s) var(--sw-s-m); }
.swk-feld { display: grid; gap: 6px; }
.swk-feld__label { font: 800 12px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking-label); text-transform: uppercase; }
.swk-optional { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--sw-text-2); }
.swk-feld input, .swk-feld textarea {
	width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--sw-ink); border-radius: 0;
	background: var(--swk-feld); color: var(--sw-ink); font: 500 16px/1.4 var(--sw-font-ui); box-shadow: none; appearance: none;
	transition: box-shadow var(--sw-t-fast) var(--sw-ease), border-color var(--sw-t-fast);
}
.swk-feld textarea { min-height: 132px; resize: vertical; }
.swk-feld input:focus, .swk-feld textarea:focus { outline: 2px solid var(--sw-ink); outline-offset: 0; box-shadow: 4px 4px 0 var(--swk-akzent); }
.swk-feld.is-fehler input, .swk-feld.is-fehler textarea { border-color: var(--sw-danger); box-shadow: inset 0 0 0 1px var(--sw-danger); }
.swk-fehler { margin: 0; display: flex; gap: 6px; align-items: baseline; color: var(--sw-danger); font: 700 14px/1.35 var(--sw-font-ui); }
.swk-fehler::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; background: var(--sw-danger); color: #fff; font: 800 12px/1 var(--sw-font-ui); transform: translateY(2px); }
.swk-fehler[hidden] { display: none; }
.swk-falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.swk-datenschutz { margin: 0; max-width: 40rem; font: 500 14px/1.5 var(--sw-font-ui); color: var(--sw-text-2); }
.swk-datenschutz a { color: var(--sw-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }

.swk-senden { display: grid; gap: 12px; justify-items: start; }
.swk-button {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 18px 9px; border: 0; border-radius: 0; cursor: pointer;
	background: var(--sw-ink); color: var(--sw-paper);
	font-family: var(--sw-font-display); font-size: clamp(22px, 1.8vw, 26px); line-height: 1; text-transform: uppercase;
	transition: background-color var(--sw-t-fast), color var(--sw-t-fast), transform var(--sw-t-fast) var(--sw-ease), box-shadow var(--sw-t-fast) var(--sw-ease);
}
/* Theme-Basis färbt Buttons bei Hover/Fokus #CC3366 – hier ausdrücklich SUBWAY */
.swk-button.swk-button:hover, .swk-button.swk-button:focus { background: var(--sw-ink); color: var(--sw-paper); }
.swk-button__pfeil svg, .swk-pfeil svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.swk-button__pfeil { display: block; width: .62em; height: .62em; transition: transform var(--sw-t-fast) var(--sw-ease); }
.swk-button__pfeil svg { width: 100%; height: 100%; }
@media (hover: hover) {
	.swk-button.swk-button:hover { background: var(--swk-akzent); color: var(--swk-auf); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--sw-ink); }
	.swk-button:hover .swk-button__pfeil { transform: translate(3px, -3px); }
}
.swk-button.swk-button:focus-visible { background: var(--swk-akzent); color: var(--swk-auf); transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--sw-ink), 0 0 0 7px var(--sw-ink); outline: 3px solid var(--sw-focus); outline-offset: 2px; }
.swk-button:focus-visible .swk-button__pfeil { transform: translate(3px, -3px); }
.swk-button.swk-button:active { transform: none; box-shadow: none; }
.swk-button[aria-busy="true"] { cursor: progress; opacity: .8; transform: none !important; box-shadow: none !important; }
.swk-button[aria-busy="true"] .swk-button__pfeil { animation: swk-unterwegs .9s var(--sw-ease) infinite; }
@keyframes swk-unterwegs { 0% { transform: translate(-4px, 4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(8px, -8px); opacity: 0; } }
.swk-status { margin: 0; min-height: 1.4em; font: 700 15px/1.4 var(--sw-font-ui); }
.swk-status.is-fehler { color: var(--sw-danger); }

.swk-erfolg { padding: var(--sw-s-m); background: var(--swk-akzent); color: var(--swk-auf); outline: none; }
.swk-erfolg[hidden] { display: none; }
.swk-erfolg__h { margin: 0 0 10px; font-family: var(--sw-font-display); font-size: clamp(48px, 8vw, 80px); line-height: .9; text-transform: uppercase; }
.swk-erfolg p:not(.swk-erfolg__h) { margin: 0; font: 600 clamp(17px, 1.3vw, 20px)/1.4 var(--sw-font-ui); }

@media (min-width: 600px) {
	.swk-anliegen__wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.swk-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.swk-feld--telefon, .swk-feld--nachricht { grid-column: 1 / -1; }
	.swk-feld--telefon { max-width: calc(50% - var(--sw-s-m) / 2); }
	.swk-anliegen__wahl { gap: 16px; }
}

/* ---------- Lieber direkt? ---------- */
.swk-direkt { padding: var(--sw-s-l) var(--swk-rand) var(--sw-s-xl); border-top: var(--sw-line-sec); }
.swk-direkt__kopf { margin-bottom: var(--sw-s-l); }
.swk-direkt__h { margin: 0; font-family: var(--sw-font-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(44px, 12vw, 60px); line-height: .9; }
.swk-direkt__sub { margin: 10px 0 0; font: 500 clamp(16px, 1.1vw, 18px)/1.45 var(--sw-font-ui); }
.swk-direkt__raster { display: grid; gap: var(--sw-s-l); }
.swk-modul { position: relative; padding-top: 14px; border-top: 1px solid var(--sw-ink); transition: box-shadow var(--sw-t-fast) var(--sw-ease); }
.swk-modul__nr { margin: 0 0 4px; font-family: var(--sw-font-display); font-size: 16px; line-height: 1; letter-spacing: .04em; transition: transform var(--sw-t-fast) var(--sw-ease); }
.swk-modul__h { margin: 0; font-family: var(--sw-font-display); font-weight: 400; font-synthesis: none; text-transform: uppercase; font-size: clamp(28px, 7vw, 38px); line-height: .95; }
.swk-modul__claim { margin: 4px 0 var(--sw-s-s); font: italic 400 clamp(17px, 1.25vw, 19px)/1.3 var(--sw-font-accent); }
.swk-modul__daten { display: grid; gap: 2px; justify-items: start; }
.swk-adresse { margin: 0 0 4px; font: 600 16px/1.45 var(--sw-font-ui); }
@media (hover: hover) {
	.swk-modul:has(a:hover) { box-shadow: inset 0 3px 0 var(--swk-akzent); } /* nur über Links, nicht über Titel/Nummer (Stefan 08.10.2026) */
	.swk-modul:has(a:hover) .swk-modul__nr { transform: translateX(6px); }
}
.swk-modul:has(a:focus-visible) { box-shadow: inset 0 3px 0 var(--swk-akzent); }
.swk-modul:has(a:focus-visible) .swk-modul__nr { transform: translateX(6px); }

/* E-Mail: wachsende Unterstreichung in Akzent + diagonaler Pfeil */
.swk-mail { display: inline-flex; align-items: center; gap: 6px; min-height: var(--sw-touch); text-decoration: none; font: 700 clamp(16px, 1.15vw, 18px)/1.2 var(--sw-font-ui); white-space: nowrap; }
.swk-mail__text { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat, linear-gradient(var(--swk-akzent), var(--swk-akzent)) 0 100% / 0 4px no-repeat; transition: background-size var(--sw-t-fast) var(--sw-ease); }
.swk-pfeil { display: block; width: 12px; height: 12px; transition: transform var(--sw-t-fast) var(--sw-ease); }
.swk-pfeil svg { width: 100%; height: 100%; }
@media (hover: hover) {
	.swk-mail:hover .swk-mail__text { background-size: 100% 1px, 100% 4px; }
	.swk-mail:hover .swk-pfeil { transform: translate(3px, -3px); }
}
.swk-mail:focus-visible .swk-mail__text { background-size: 100% 1px, 100% 4px; }
.swk-mail:focus-visible .swk-pfeil { transform: translate(3px, -3px); }

/* Telefon: Linie wächst, Zahl rückt */
.swk-tel { display: inline-flex; align-items: center; gap: 10px; min-height: var(--sw-touch); text-decoration: none; font: 600 clamp(16px, 1.15vw, 18px)/1.2 var(--sw-font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.swk-tel__linie { display: block; width: 12px; height: 1px; background: currentColor; transition: width var(--sw-t-fast) var(--sw-ease), background-color var(--sw-t-fast); order: -1; }
@media (hover: hover) {
	.swk-tel:hover .swk-tel__linie { width: 24px; height: 2px; background: var(--swk-akzent); }
	.swk-tel:hover .swk-tel__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
.swk-tel:focus-visible .swk-tel__linie { width: 24px; height: 2px; background: var(--swk-akzent); }

@media (min-width: 900px) {
	.swk-direkt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sw-gutter); row-gap: var(--sw-s-xl); }
	/* Module bündig nebeneinander (Oberlinien auf einer Höhe, Stefan 08.10.2026) */
}
@media (min-width: 1200px) {
	.swk-direkt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gutter); padding-block: var(--sw-s-xl) var(--sw-s-2xl); }
	.swk-direkt__kopf { grid-column: 1 / 5; margin: 0; position: sticky; top: calc(var(--sw-sticky) + var(--sw-s-m)); align-self: start; }
	.swk-direkt__h { font-size: clamp(60px, 5vw, 84px); }
	.swk-direkt__raster { grid-column: 6 / -1; max-width: 760px; }
}

@media (prefers-reduced-motion: reduce) {
	.swk *, .swk *::before, .swk *::after { transition: none !important; animation: none !important; }
	.swk-wahl input:checked + .swk-wahl__text, .swk-button.swk-button:hover, .swk-button.swk-button:focus-visible { transform: none; }
}
#swk-formular:focus { outline: none; } /* nur programmatischer Fokus nach „Formular“ */