/* ==========================================================================
   Miller Weinhaus — Stylesheet (Quelle der Wahrheit fürs Aussehen)

   Alle Werte stammen aus der Design-Referenz
   handoff/design/Miller Weinhaus Website.dc.html und sind gegen sie gemessen
   (tools/mess/diff.js). Wer hier etwas ändert, misst danach neu.

   Gliederung
     1  Tokens
     2  Bricks neutralisieren
     3  Basis-Typografie
     4  Layout-Wrapper
     5  Bausteine (Overline, Button, Chip, Rahmen mit Herzen, Platzhalter)
     6  Header und Footer
     7  Startseite
     8  Weine
     9  Geschenkkörbe
    10  Jobs und Job-Detail
    11  Formular (WPForms)
    12  Responsive
   ========================================================================== */

/* ---------- 1  Tokens ---------------------------------------------------- */

.mw-page {
	--mw-bg: #FFFCF9;
	--mw-ink: #3B2A22;
	--mw-ink-soft: #5E4A40;
	--mw-muted: #7A6358;
	--mw-accent: #C45E26;
	--mw-accent-hover: #A9491A;
	--mw-peach: #F9D9C7;
	--mw-peach-light: #FCEDE4;
	--mw-sage: #E6EDDF;
	--mw-sage-ink: #5C6E52;
	--mw-rose: #F4E3E5;
	--mw-rose-ink: #7D5960;
	--mw-line: #F1E2D8;
	--mw-line-strong: #EBD9CE;
	--mw-border-soft: #E7CDBE;
	--mw-footer-line: #E8B79C;
	--mw-footer-ink: #7A4A33;

	/* Hover-Flächen der Teaser */
	--mw-sage-hover: #DCE6D3;
	--mw-rose-hover: #EFD8DB;

	/* Schraffuren der Bildplatzhalter. Fallen weg, sobald die Fotos da sind. */
	--mw-hatch-peach: repeating-linear-gradient(135deg, #F3C9B3 0 1px, #FBE6DA 1px 12px);
	--mw-hatch-sage: repeating-linear-gradient(135deg, #CFDCC6 0 1px, #E8EFE2 1px 12px);
	--mw-hatch-rose: repeating-linear-gradient(135deg, #E9CFD3 0 1px, #F6E8EA 1px 12px);

	/* Maße */
	--mw-breite: 1280px;
	--mw-rand: clamp(20px, 5vw, 64px);
	--mw-sektion: clamp(80px, 11vw, 160px);
	--mw-header-h: 90px;
}

/* ---------- 2  Bricks neutralisieren ------------------------------------- */

/*
 * Bricks' section/container/block rendern als Flex-Spalte mit align-items.
 * Ein max-width-Wrapper darin schrumpft sonst auf Inhaltsbreite — der
 * Klassiker "alles zu eng" (§4.1). Deshalb display:block und width:100%.
 */
.mw-page .brxe-section,
.mw-page .brxe-container,
.mw-page .brxe-block,
.mw-page .brxe-div {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}

/*
 * Die Polsterung wird bewusst NICHT hier zurückgesetzt.
 *
 * Ein `padding: 0` an dieser Stelle hätte die Spezifität (0,2,0) und würde
 * jede Sektionsklasse `.mw-sec--hero` (0,1,0) schlagen — die Seite verlöre
 * sämtliche vertikalen Abstände, und zwar lautlos. Stattdessen setzt die
 * Basisklasse `.mw-sec` auf null, und die Varianten darunter stehen auf
 * derselben Spezifität und gewinnen über die Quellreihenfolge.
 */
.mw-page .mw-sec {
	padding: 0;
}

/* ---------- 3  Basis-Typografie ------------------------------------------ */

/*
 * Bricks vererbt global line-height:1.7, Überschriften zusätzlich 1.4.
 * Die Design-Referenz setzt keine — dort gilt 'normal'. Ohne diesen Reset
 * sitzt jede Zeile ein paar Pixel tiefer als im Entwurf (§9.2).
 */
.mw-page {
	background: var(--mw-bg);
	color: var(--mw-ink);
	font-family: 'Jost', sans-serif;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

.mw-page :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	/*
	 * Silbentrennung für die großen Überschriften.
	 *
	 * Greift nur, wenn eine Zeile sonst nicht passt — oberhalb von 360px
	 * ändert sich dadurch nichts. Gebraucht wird es auf sehr schmalen
	 * Geräten: "Geschenkkörbe" ist als H1 breiter als die Spalte und schob
	 * die Seite sonst 4px seitlich raus. Deutsche Trennmuster greifen über
	 * das lang-Attribut, das WordPress auf <html> setzt.
	 */
	hyphens: auto;
	-webkit-hyphens: auto;
}

.mw-page :where(p, ul, ol, figure, blockquote) {
	margin: 0;
}

.mw-page :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.mw-page a {
	color: var(--mw-accent);
	text-decoration: none;
}

.mw-page a:hover {
	color: #9E4417;
}

.mw-page :where(input, textarea, select, button) {
	font-family: inherit;
}

/* Bricks stylt generische Tags per Element-Selektor (§4.3). */
.mw-page :where(blockquote) {
	font-family: inherit;
	font-size: inherit;
	padding-left: 0;
	border-left: 0;
}

.mw-page :where(figcaption) {
	text-align: left;
}

/* Anker dürfen nicht unter dem Sticky-Header verschwinden (§4.6). */
.mw-page [id] {
	scroll-margin-top: calc(var(--mw-header-h) + 16px);
}

/* ---------- 4  Layout-Wrapper -------------------------------------------- */

/*
 * Der zentrierte Breiten-Wrapper. width:100% ist der entscheidende Teil —
 * ohne ihn schrumpft er im Flex-Kontext auf Inhaltsbreite (§4.1).
 * Die seitliche Polsterung liegt INNERHALB der max-width, genau wie im
 * Entwurf: bei 1440px beginnt der Text damit bei x=144.
 */
.mw-page .mw-inner {
	display: block;
	width: 100%;
	max-width: var(--mw-breite);
	margin-inline: auto;
	padding-inline: var(--mw-rand);
}

/* Vertikale Abstände je Sektion — "viel Weißraum ist ausdrücklich gewünscht".
   Die Nullstellung steht oben bei .mw-page .mw-sec (Abschnitt 2). */
.mw-page .mw-sec--schluss { padding-bottom: var(--mw-sektion); }

/* ---------- 5  Bausteine ------------------------------------------------- */

/*
 * Overline: 12px, 500, 0.32em, Versalien, Akzentfarbe.
 *
 * font-family ist Pflicht: Auf der Job-Detailseite sind die Overlines echte
 * <h2> (Abschnittsüberschriften der Stellenanzeige). Ohne diese Zeile erbten
 * sie Marcellus aus der Überschriftenregel — im Entwurf stehen sie in Jost.
 */
.mw-overline {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mw-accent);
	line-height: normal;
}

.mw-overline--sage { color: var(--mw-sage-ink); }
.mw-overline--rose { color: var(--mw-rose-ink); }

/* Etikett in der Kontaktbox und beim Ansprechpartner: 0.28em statt 0.32em. */
.mw-label {
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--mw-accent);
	line-height: normal;
}

.mw-label--sage { color: var(--mw-sage-ink); }

/*
 * Buttons. Bricks' Button-Element bringt .bricks-button-Defaults mit, und
 * Buttons sind <a> — ein generischer .mw-page a:hover (0,2,1) schlägt sonst
 * jeden .mw-btn--primaer:hover (0,2,0). Deshalb werden die Hover-Farben
 * unten mit derselben Spezifität abgesichert (§4.6).
 */
.mw-page .mw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	cursor: pointer;
	text-align: center;
	border: 0;
	background: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.mw-page .mw-btn--primaer {
	padding: 16px 28px;
	background: var(--mw-accent);
	color: var(--mw-bg);
}

.mw-page .mw-btn--primaer:hover {
	background: var(--mw-accent-hover);
	color: var(--mw-bg);
}

.mw-page .mw-btn--sekundaer {
	padding: 15px 28px;
	border: 1px solid var(--mw-border-soft);
	color: var(--mw-ink);
}

.mw-page .mw-btn--sekundaer:hover {
	border-color: var(--mw-accent);
	color: var(--mw-accent);
}

/* Chips: Pillenform, zwei Varianten (gefüllt und umrandet). */
.mw-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: normal;
}

.mw-chip--gefuellt {
	background: var(--mw-peach);
	color: var(--mw-ink);
}

.mw-chip--rand {
	border: 1px solid var(--mw-line-strong);
	color: var(--mw-muted);
}

/*
 * Rahmen mit Herzen — das Markenmotiv der Kundin.
 * Pfirsichfläche, ein ♥ oben links und eines unten rechts, dazu je eine
 * 1px-Linie oben und unten mit 44px Abstand zu den Seiten.
 */
.mw-rahmen {
	position: relative;
	background: var(--mw-peach);
	padding: 28px;
}

/* Das Seitenverhältnis sitzt auf dem Rahmen (siehe .mw-bild--fuellend). */
.mw-rahmen--4-5 { aspect-ratio: 4 / 5; }
.mw-rahmen--21-9 { aspect-ratio: 21 / 9; }

/*
 * Bildrahmen: Das Foto ist GENAU so breit wie die Zierlinien und hält oben
 * und unten Abstand zu ihnen.
 *
 * Abgestimmt mit Christian am 14.10.2026. Im Prototyp ist das Bild rundum
 * 28px eingerückt, die Linien laufen aber von 44px bis 44px — ihre Enden
 * liegen dadurch AUF dem Foto. Mit der Schraffur fiel das nicht auf, mit
 * einem echten Foto wirkt es unruhig.
 *
 * Waagerecht deshalb 44px: Bildkante und Linienende fallen zusammen, die
 * Linie rahmt das Bild sauber ein.
 * Senkrecht hält das Bild denselben Abstand zur Linie, den die Linie zum
 * Rahmenrand hat (je 20px). Der Entwurf setzt hier 28px; mit einem echten
 * Foto ist das zu knapp, die Linie klebt am Bild.
 *
 * Gilt bewusst auch für den schraffierten Platzhalter: Sonst springt das
 * Layout, sobald ein Foto nachgeliefert wird.
 */
.mw-rahmen--bild {
	/* Abstand der Zierlinie vom Rahmenrand. Dieselbe Luft bekommt das Bild
	   zur Linie — oben wie unten gleich viel, das hält die Fläche ruhig. */
	--mw-rahmen-linie: 20px;

	/* 44px = dort, wo die Zierlinien beginnen und enden: Bildkante und
	   Linienende fallen damit zusammen. */
	padding-inline: 44px;

	/* Linie (20px) + ebenso viel Luft darunter. */
	padding-block: calc(var(--mw-rahmen-linie) * 2);
}

.mw-rahmen__herz {
	position: absolute;
	color: var(--mw-accent);
	font-size: 16px;
	line-height: 1;
}

.mw-rahmen__herz--oben { left: 14px; top: 12px; }
.mw-rahmen__herz--unten { right: 14px; bottom: 12px; }

.mw-rahmen__linie {
	position: absolute;
	left: 44px;
	right: 44px;
	height: 1px;
	background: var(--mw-accent);
	opacity: 0.7;
}

.mw-rahmen__linie--oben { top: 20px; }
.mw-rahmen__linie--unten { bottom: 20px; }

/* Die Kontaktbox nutzt dasselbe Motiv, aber großzügigere Innenabstände. */
.mw-rahmen--box {
	padding: clamp(40px, 6vw, 80px) clamp(28px, 6vw, 88px);
}

/*
 * Bildplatzhalter. Solange Fotos und Logos fehlen, steht hier eine
 * schraffierte Fläche mit Beschriftung — kein erfundenes Stockfoto (§13).
 * Sobald ein Bild gesetzt ist, rendert das Element stattdessen <img>.
 */
.mw-bild {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

.mw-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-bild--4-5 { aspect-ratio: 4 / 5; }
.mw-bild--3-4 { aspect-ratio: 3 / 4; }
.mw-bild--1-1 { aspect-ratio: 1 / 1; }
.mw-bild--21-9 { aspect-ratio: 21 / 9; }

/*
 * Im Rahmen mit Herzen trägt der RAHMEN das Seitenverhältnis, das Bild füllt
 * nur dessen Innenfläche. Bei 4:5 und 1440px heißt das: Rahmen 532,8×666,
 * Bild 476,8×610 — also je 28px Polsterung weniger. Bekäme das Bild selbst
 * ein Seitenverhältnis, würde der Rahmen um die Polsterung zu hoch.
 */
.mw-bild--fuellend {
	height: 100%;
	aspect-ratio: auto;
}

.mw-platzhalter {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: 16px;
	background: var(--mw-hatch-peach);
}

.mw-platzhalter--sage { background: var(--mw-hatch-sage); }
.mw-platzhalter--rose { background: var(--mw-hatch-rose); }

.mw-platzhalter__text {
	font-family: ui-monospace, monospace;
	font-size: 12px;
	line-height: normal;
	color: #8A5A42;
	background: var(--mw-bg);
	padding: 6px 10px;
}

.mw-platzhalter--sage .mw-platzhalter__text { color: var(--mw-sage-ink); }
.mw-platzhalter--rose .mw-platzhalter__text { color: var(--mw-rose-ink); }
.mw-platzhalter--neutral .mw-platzhalter__text { color: var(--mw-muted); }

/* Im Rahmen mit Herzen hat der Platzhalter 20px statt 16px Innenabstand. */
.mw-rahmen .mw-platzhalter { padding: 20px; }

/* ---------- 6  Header und Footer ----------------------------------------- */

/*
 * Bricks umschließt das Header-Template mit <header id="brx-header"> und
 * stylt es per ID: #brx-header{position:relative}. Eine Klasse (0,1,0)
 * verliert dagegen — der Header wäre nicht sticky geworden. Deshalb hängt
 * unsere Klasse am selben Element und der Selektor ist ID+Klasse (1,1,0).
 */
#brx-header.mw-header,
.mw-page .mw-header {
	position: sticky;
	top: 0;
	z-index: 20;
	width: 100%;
	background: rgba(255, 252, 249, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.mw-page .mw-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: 18px;
}

/*
 * Der Logo-Platz ist nur 54px hoch, das Logo selbst 120px: es ragt unten
 * bewusst über den Header hinaus. Der Header wird dadurch NICHT höher —
 * genau deshalb liegt das Logo absolut und der Platzhalter behält seine Höhe.
 */
.mw-header__logoslot {
	position: relative;
	width: 120px;
	height: 54px;
	flex: 0 0 auto;
	transition: width 400ms ease;
}

.mw-header__logo {
	position: absolute;
	left: 0;
	top: -6px;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 400ms cubic-bezier(.4, 0, .2, 1);
}

/* Das Logo wird per CSS-Maske eingefärbt — ohne Kreis, ohne Schatten. */
.mw-header__logo span,
.mw-footer__logo {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--mw-accent);
	-webkit-mask: var(--mw-logo) center / contain no-repeat;
	mask: var(--mw-logo) center / contain no-repeat;
}

/* Ab 40px Scrollweite schrumpft das Logo von 120px auf 56px. */
.mw-header.is-scrolled .mw-header__logoslot { width: 56px; }
.mw-header.is-scrolled .mw-header__logo { width: 56px; height: 56px; top: -1px; }

.mw-page .mw-header__nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: clamp(18px, 3vw, 40px);
	flex-wrap: wrap;
	width: auto;
}

.mw-page .mw-header__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-ink);
}

.mw-page .mw-header__link:hover { color: var(--mw-accent); }

/*
 * Der Punkt unter dem aktiven Menüpunkt. Inaktive Punkte bekommen einen
 * gleich großen, unsichtbaren Platzhalter — sonst springt die Beschriftung
 * beim Seitenwechsel um 11px nach oben.
 */
.mw-header__punkt {
	width: 5px;
	height: 5px;
}

.mw-header__link.is-aktiv .mw-header__punkt {
	border-radius: 50%;
	background: var(--mw-accent);
}

/* Burger: erscheint erst, wenn die Navigation nicht mehr einzeilig passt. */
.mw-header__burger {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.mw-header__burger span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--mw-ink);
	transition: transform 300ms ease, opacity 200ms ease;
}

#brx-footer.mw-footer,
.mw-page .mw-footer {
	background: var(--mw-peach);
}

.mw-page .mw-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-block: clamp(56px, 7vw, 88px) 32px;
}

.mw-footer__oben {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 40px;
	align-items: start;
}

.mw-footer__logo {
	width: 84px;
	height: 88px;
}

.mw-footer__spalte {
	font-size: 15px;
	line-height: 1.8;
}

.mw-page .mw-footer__spalte a { color: var(--mw-ink); }
.mw-page .mw-footer__spalte a:hover { color: var(--mw-accent); }

.mw-footer__unten {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--mw-footer-line);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-footer-ink);
}

/*
 * Kein flex-wrap: Im Entwurf bleiben die vier Links auch bei 375px in EINER
 * Reihe und brechen stattdessen innerhalb des jeweiligen Links um
 * ("Made by Bold\AMarketing"). Mit flex-wrap rutschte "Made by Bold Marketing"
 * stattdessen in eine eigene Zeile und der Footer wurde 10px höher.
 */
.mw-footer__rechtliches {
	display: flex;
	gap: 28px;
}

.mw-page .mw-footer__rechtliches a { color: var(--mw-footer-ink); }
.mw-page .mw-footer__rechtliches a:hover { color: var(--mw-accent); }

/* ---------- 7  Startseite ------------------------------------------------ */

/* Hero */
.mw-page .mw-sec--hero { padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); }

.mw-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.mw-hero__text {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.mw-hero__titel {
	font-size: clamp(44px, 6vw, 80px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.mw-hero__lead {
	max-width: 460px;
	font-size: 18px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

.mw-hero__buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 8px;
}

/* Band "Feinkost × Spirituosen × Pralinen × Geschenke" */
.mw-band {
	border-top: 1px solid var(--mw-line);
	border-bottom: 1px solid var(--mw-line);
}

.mw-page .mw-band__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	flex-wrap: wrap;
	padding-block: 28px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-accent);
}

/*
 * Das × erbt die berechnete letter-spacing des Bandes (0.32em bei 13px = 4,16px)
 * und behält sie trotz eigener Schriftgröße — em-Werte vererben sich als px.
 * Ein "letter-spacing: normal" hier würde das × schmaler machen als im Entwurf.
 */
.mw-band__x {
	font-weight: 300;
	font-size: 18px;
}

/* Das Weinhaus */
.mw-page .mw-sec--intro { padding-block: var(--mw-sektion); }

.mw-intro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(32px, 6vw, 96px);
}

.mw-intro__marke {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Halbkreis, Punkt, Dreieck — die geometrischen Formen der Kundin. */
.mw-formen {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mw-formen__halbkreis {
	width: 22px;
	height: 11px;
	border-radius: 22px 22px 0 0;
	background: var(--mw-accent);
}

.mw-formen__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mw-accent);
}

.mw-formen__dreieck {
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 12px solid var(--mw-accent);
}

.mw-intro__text {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 720px;
}

.mw-intro__gross {
	font-family: 'Marcellus', serif;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.35;
	text-wrap: pretty;
}

.mw-intro__absatz {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

/* Laden */
.mw-page .mw-sec--laden { padding-block: 0 var(--mw-sektion); }

.mw-laden__bilder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 20px;
}

/* Das mittlere Bild sitzt bewusst tiefer — das trägt die ganze Komposition. */
.mw-laden__bild--versetzt { margin-top: clamp(0px, 4vw, 64px); }

.mw-laden__box { margin-top: clamp(48px, 7vw, 96px); }

.mw-laden__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 40px;
}

.mw-laden__titel {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.1;
}

.mw-laden__spalte {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mw-laden__spalte--titel {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mw-laden__wert {
	font-size: 17px;
	line-height: 1.7;
}

.mw-page .mw-laden__wert a { color: var(--mw-ink); }
.mw-page .mw-laden__wert a:hover { color: var(--mw-accent); }

/* Winzer-Slider */
.mw-page .mw-sec--slider { padding-block: 0 var(--mw-sektion); }

/*
 * Mit .mw-inner kombiniert: der Selektor MUSS .mw-page tragen.
 * .mw-page .mw-inner setzt display:block mit Spezifität (0,2,0) — ein
 * schlichtes .mw-slider__kopf (0,1,0) verlöre, die Pfeile rutschten unter
 * die Überschrift und alles darunter um 48px nach unten.
 */
.mw-page .mw-slider__kopf {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 40px;
}

.mw-slider__titelgruppe {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mw-slider__titel {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.1;
}

.mw-slider__pfeile {
	display: flex;
	gap: 10px;
}

.mw-page .mw-slider__pfeil {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--mw-border-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: normal;
	color: var(--mw-ink);
	background: none;
	cursor: pointer;
	padding: 0;
	transition: border-color 200ms ease, color 200ms ease;
}

.mw-page .mw-slider__pfeil:hover {
	border-color: var(--mw-accent);
	color: var(--mw-accent);
}

.mw-page .mw-slider__fenster { overflow: hidden; }

.mw-slider__bahn {
	display: flex;
	gap: 20px;
	transition: transform 700ms cubic-bezier(.6, 0, .2, 1);
	will-change: transform;
}

.mw-slider__kachel {
	flex: 0 0 220px;
	height: 150px;
	border: 1px solid var(--mw-line);
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
}

.mw-slider__kachel img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Logos gedämpft, damit die Wand ruhig bleibt. */
	filter: grayscale(1);
	opacity: 0.75;
}

.mw-slider__logotext {
	font-family: ui-monospace, monospace;
	font-size: 11px;
	line-height: normal;
	color: #A88B7C;
}

.mw-slider__name {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.mw-slider__bahn { transition: none; }
}

/* Teaser */
.mw-page .mw-sec--teaser { padding-block: 0 var(--mw-sektion); }

.mw-teaser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 20px;
}

.mw-page .mw-teaser__flaeche {
	padding: clamp(36px, 5vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 300px;
	justify-content: space-between;
	color: var(--mw-ink);
	transition: background-color 250ms ease;
}

.mw-page .mw-teaser__flaeche--sage { background: var(--mw-sage); }
.mw-page .mw-teaser__flaeche--sage:hover { background: var(--mw-sage-hover); color: var(--mw-ink); }
.mw-page .mw-teaser__flaeche--rose { background: var(--mw-rose); }
.mw-page .mw-teaser__flaeche--rose:hover { background: var(--mw-rose-hover); color: var(--mw-ink); }

.mw-teaser__unten {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mw-teaser__titel {
	font-family: 'Marcellus', serif;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
}

.mw-teaser__link {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-ink);
}

/* ---------- 8  Weine ----------------------------------------------------- */

/* Kopfbereich der Unterseiten: Overline + H1 links, Lead rechts. */
.mw-page .mw-sec--seitenkopf { padding-block: clamp(64px, 9vw, 128px) clamp(56px, 7vw, 96px); }
.mw-page .mw-sec--seitenkopf-eng { padding-block: clamp(64px, 9vw, 128px) clamp(48px, 6vw, 80px); }

.mw-seitenkopf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 40px;
	align-items: end;
}

.mw-seitenkopf__gruppe {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mw-seitenkopf__titel {
	font-size: clamp(44px, 6vw, 76px);
	line-height: 1.05;
}

.mw-seitenkopf__lead {
	max-width: 480px;
	font-size: 17px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

.mw-page .mw-sec--breitbild { padding-block: 0 clamp(80px, 11vw, 140px); }

/* Text-Bild-Blöcke */
.mw-page .mw-sec--textbild { padding-block: 0 clamp(80px, 11vw, 140px); }

.mw-textbild {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(40px, 7vw, 112px);
	align-items: center;
}

.mw-textbild__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 520px;
}

.mw-textbild__titel {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.12;
	text-wrap: balance;
}

.mw-textbild__absatz {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

/* Das Bild steht je nach Variante links oder rechts. */
.mw-textbild--bild-rechts .mw-textbild__bild { order: 2; }

/* Salbei-Banner */
.mw-page .mw-sec--banner { padding-block: 0 var(--mw-sektion); }

.mw-banner {
	background: var(--mw-sage);
	padding: clamp(40px, 6vw, 80px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.mw-banner__text {
	font-family: 'Marcellus', serif;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
	max-width: 560px;
}

/* ---------- 9  Geschenkkörbe --------------------------------------------- */

.mw-page .mw-sec--koerbe { padding-block: 0 var(--mw-sektion); }

.mw-koerbe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(40px, 4vw, 56px) 28px;
}

.mw-korb {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mw-korb__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mw-korb__titel {
	font-size: 26px;
	line-height: 1.2;
}

.mw-korb__kurztext {
	font-size: 16px;
	line-height: 1.65;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

/*
 * Der Bestell-Button wird an Ort und Stelle durch die beiden Bestellwege
 * ersetzt. Beide Zustände liegen im Markup, umgeschaltet wird per Klasse —
 * so bleibt die Karte ohne JavaScript bedienbar (die Links funktionieren),
 * und es springt nichts, weil kein Element nachgeladen wird.
 */
.mw-page .mw-korb__bestellen {
	align-self: flex-start;
	padding: 14px 26px;
	border-radius: 999px;
	border: 1px solid var(--mw-accent);
	color: var(--mw-accent);
	background: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.mw-page .mw-korb__bestellen:hover {
	background: var(--mw-accent);
	color: var(--mw-bg);
}

.mw-korb__wege {
	display: none;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.mw-korb.is-offen .mw-korb__bestellen { display: none; }
.mw-korb.is-offen .mw-korb__wege { display: flex; }

.mw-page .mw-korb__weg {
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--mw-accent);
	color: var(--mw-bg);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: normal;
	transition: background-color 200ms ease;
}

.mw-page .mw-korb__weg:hover {
	background: var(--mw-accent-hover);
	color: var(--mw-bg);
}

.mw-page .mw-korb__weg--mail {
	padding: 13px 22px;
	border: 1px solid var(--mw-accent);
	background: none;
	color: var(--mw-accent);
}

.mw-page .mw-korb__weg--mail:hover {
	background: var(--mw-peach-light);
	color: var(--mw-accent);
}

.mw-page .mw-korb__schliessen {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 300;
	line-height: normal;
	color: var(--mw-muted);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: color 200ms ease;
}

.mw-page .mw-korb__schliessen:hover { color: var(--mw-accent); }

/* ---------- 10  Jobs und Job-Detail -------------------------------------- */

.mw-page .mw-sec--jobkopf { padding-block: clamp(64px, 9vw, 128px) clamp(56px, 7vw, 96px); }

.mw-jobkopf {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mw-jobkopf__titel {
	max-width: 900px;
	font-size: clamp(44px, 6vw, 76px);
	line-height: 1.05;
	text-wrap: balance;
}

.mw-jobkopf__lead {
	max-width: 560px;
	font-size: 17px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

/* "Arbeiten bei uns" — vier Punkte auf heller Pfirsichfläche. */
.mw-vorteile { background: var(--mw-peach-light); }

.mw-page .mw-vorteile__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(32px, 4vw, 56px);
	padding-block: clamp(56px, 8vw, 112px);
}

.mw-vorteil {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mw-vorteil__nr {
	font-family: 'Marcellus', serif;
	font-size: 20px;
	line-height: normal;
	color: var(--mw-accent);
}

.mw-vorteil__titel {
	font-size: 24px;
	line-height: 1.2;
}

.mw-vorteil__text {
	font-size: 16px;
	line-height: 1.65;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

/* Offene Stellen */
.mw-page .mw-sec--stellen { padding-block: clamp(72px, 10vw, 140px); }

.mw-stellen__kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 28px;
}

.mw-stellen__titel {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: normal;
}

.mw-stellen__anzahl {
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-muted);
}

.mw-stellen__liste {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--mw-line-strong);
}

/*
 * Die ganze Zeile ist der Link. Beim Hover rückt sie 12px ein und wird
 * akzentfarben — der Pfeil erbt die Farbe über currentColor.
 */
.mw-page .mw-stelle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 32px 0;
	border-bottom: 1px solid var(--mw-line-strong);
	color: var(--mw-ink);
	transition: padding-left 250ms ease, color 250ms ease;
}

.mw-page .mw-stelle:hover {
	padding-left: 12px;
	color: var(--mw-accent);
}

.mw-stelle__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mw-stelle__titel {
	/* Die Zeile ist ein <a> mit <span>-Titel, keine Überschrift — die
	   Marcellus-Regel für h1…h6 greift hier also nicht. */
	font-family: 'Marcellus', serif;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: inherit;
}

.mw-stelle__chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mw-stelle__pfeil {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: normal;
	flex: 0 0 auto;
}

/* Job-Detail */
.mw-page .mw-sec--zurueck { padding-block: clamp(40px, 6vw, 72px) 0; }

.mw-page .mw-zurueck {
	display: inline-flex;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: normal;
	color: var(--mw-muted);
}

.mw-page .mw-zurueck:hover { color: var(--mw-accent); }

.mw-page .mw-sec--job { padding-block: clamp(40px, 6vw, 72px) var(--mw-sektion); }

.mw-job {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(48px, 7vw, 112px);
	align-items: start;
}

.mw-job__haupt {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.mw-job__kopf {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mw-job__chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mw-job__titel {
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1.08;
	text-wrap: balance;
}

.mw-job__intro {
	font-size: 18px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--mw-ink-soft);
	text-wrap: pretty;
}

.mw-job__block {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: 32px;
	border-top: 1px solid var(--mw-line-strong);
}

.mw-job__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Listenpunkte in der Stellenanzeige: kleines ♥ statt Bullet. */
.mw-job__punkt {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 12px;
	font-size: 17px;
	line-height: 1.6;
	font-weight: 300;
}

/*
 * Kein eigenes line-height: Das ♥ erbt die 1.6 des Punktes. Die ist eine
 * ZAHL und rechnet sich auf die 11px des Herzens um (17,6px) — genau wie im
 * Entwurf. Ein "line-height: normal" hier verschöbe jeden Listenpunkt.
 */
.mw-job__herz {
	color: var(--mw-accent);
	font-size: 11px;
	padding-top: 6px;
}

.mw-job__kontakt {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	background: var(--mw-sage);
}

.mw-job__kontakttitel {
	font-size: 26px;
	line-height: 1.2;
}

.mw-job__kontakttext {
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--mw-ink);
	text-wrap: pretty;
}

.mw-job__person {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px solid #C9D6BF;
}

.mw-job__personwert {
	font-size: 17px;
	line-height: 1.6;
}

.mw-page .mw-job__personwert a { color: var(--mw-ink); }
.mw-page .mw-job__personwert a:hover { color: var(--mw-accent); }

/* ---------- 11  Formular (WPForms) --------------------------------------- */

/*
 * Die Formularbox klebt beim Scrollen — top 120px, damit sie unter dem
 * Sticky-Header nicht anstößt.
 */
/*
 * Die Box ist eine Flex-Spalte mit 20px Lücke — genau wie das <form> im
 * Entwurf, in dem Überschrift und Felder dieselbe Lücke teilen. Als
 * Block-Container säße das erste Feld 20px zu hoch.
 */
.mw-bewerbung {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--mw-peach-light);
	padding: clamp(28px, 4vw, 48px);
}

.mw-bewerbung__kopf {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 8px;
}

.mw-bewerbung__titel {
	font-size: 30px;
	line-height: 1.15;
}

.mw-bewerbung__sub {
	font-size: 15px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--mw-ink-soft);
}

/*
 * WPForms-Überschreibungen. Hier ist !important die dokumentierte Ausnahme
 * (§8.3): WPForms' eigenes CSS gewinnt je nach Ladereihenfolge, und seine
 * Modern-Markup-Variablen setzen Werte per Inline-Style auf dem Formular.
 */
.mw-bewerbung .wpforms-container,
.mw-bewerbung .wpforms-form {
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * Der Abstand von 20px muss auf BEIDE Ebenen: WPForms steckt alle Felder in
 * einen .wpforms-field-container. Läge die Lücke nur auf dem <form>, säßen die
 * Felder lückenlos aufeinander — im Entwurf sind es 20px, und über fünf Felder
 * summiert sich das zu 100px Versatz.
 */
.mw-bewerbung .wpforms-form,
.mw-bewerbung .wpforms-field-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

/* WPForms' eigene Listen-Polsterung im Formular zurücksetzen. */
.mw-bewerbung ul,
.mw-bewerbung ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mw-bewerbung .wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Die Layout-Zeile bringt margin: 0 -10px mit und ragt sonst aus der Box. */
.mw-bewerbung .wpforms-field-layout-columns {
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
	gap: 16px !important;
}

.mw-bewerbung .wpforms-layout-column {
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}

/* Layout-Zeilen rendern eine <h3>-Beschriftung ("Zeile 1"). Die muss weg —
   im Felddatensatz UND hier, weil WPForms die eigene Klasse teils überschreibt. */
.mw-bewerbung .wpforms-label-hide,
.mw-bewerbung .wpforms-field-layout > .wpforms-field-label {
	display: none !important;
}

.mw-bewerbung .wpforms-field-label {
	display: block !important;
	margin: 0 0 8px !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.18em !important;
	line-height: normal !important;
	text-transform: uppercase !important;
	color: var(--mw-muted) !important;
}

/*
 * Das Pflichtsternchen kommt im Entwurf nicht vor: die Beschriftungen stehen
 * dort schlicht als „Vorname“, „E-Mail“ und so weiter. Es wird deshalb optisch
 * entfernt — aber NICHT aus dem Markup: Screenreader lesen es weiter vor, und
 * WPForms' aria-required bleibt ohnehin am Feld.
 *
 * Soll es doch sichtbar sein, genügt es, diese Regel zu löschen.
 */
.mw-bewerbung .wpforms-required-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/*
 * WPForms gibt Eingabefeldern eine FESTE Höhe über eigene CSS-Variablen
 * (--wpforms-field-size-input-height). Dadurch war jedes Feld 43px statt der
 * 53px aus dem Entwurf — und das Formular über die ganze Länge 30px je Feld
 * zu kurz. `height: auto` gibt die Höhe an Polsterung und Zeilenhöhe zurück,
 * wo sie hingehört.
 */
.mw-bewerbung input[type='text'],
.mw-bewerbung input[type='email'],
.mw-bewerbung input[type='tel'],
.mw-bewerbung textarea {
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--mw-line-strong) !important;
	border-radius: 0 !important;
	background: var(--mw-bg) !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: var(--mw-ink) !important;
	box-shadow: none !important;
	outline: none !important;
}

.mw-bewerbung input:focus,
.mw-bewerbung textarea:focus {
	border-color: var(--mw-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* rows="4" setzt das Formular-PHP; die Höhe ergibt sich daraus von selbst. */
.mw-bewerbung textarea {
	resize: vertical !important;
}

/*
 * Datei-Upload: gestrichelte Fläche mit "+" und Beschriftung.
 * Das Markup kommt aus dem Template-Override im Plugin
 * (templates/wpforms/fields/file-upload-frontend.php) — WPForms' Original
 * bringt ein 50px-Icon und englischen Text mit.
 */
.mw-bewerbung .wpforms-uploader {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	border: 1px dashed #D9B6A2 !important;
	border-radius: 0 !important;
	background: var(--mw-bg) !important;
	cursor: pointer !important;
	min-height: 0 !important;
	transition: border-color 200ms ease;
}

.mw-bewerbung .wpforms-uploader:hover,
.mw-bewerbung .wpforms-uploader.dz-drag-hover {
	border-color: var(--mw-accent) !important;
}

.mw-bewerbung .wpforms-uploader .dz-message {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.mw-bewerbung .modern-title {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	text-transform: none !important;
	color: var(--mw-muted) !important;
}

.mw-bewerbung .mw-upload__plus {
	font-size: 18px;
	line-height: normal;
	color: var(--mw-accent);
}

/* Die Dateiliste nach dem Hochladen. */
.mw-bewerbung .wpforms-uploader .dz-preview {
	margin: 0 !important;
}

/* Datenschutz-Checkbox */
.mw-bewerbung .wpforms-field-checkbox ul li,
.mw-bewerbung .wpforms-field-gdpr-checkbox ul li {
	display: grid !important;
	grid-template-columns: 20px minmax(0, 1fr) !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mw-bewerbung .wpforms-field-checkbox input[type='checkbox'],
.mw-bewerbung .wpforms-field-gdpr-checkbox input[type='checkbox'] {
	width: 18px !important;
	height: 18px !important;
	margin: 2px 0 0 !important;
	accent-color: var(--mw-accent);
}

.mw-bewerbung .wpforms-field-checkbox label,
.mw-bewerbung .wpforms-field-gdpr-checkbox label {
	font-size: 14px !important;
	font-weight: 300 !important;
	letter-spacing: normal !important;
	line-height: 1.55 !important;
	text-transform: none !important;
	color: var(--mw-ink-soft) !important;
	margin: 0 !important;
	/* WPForms setzt padding-left:12px am Label. Zusammen mit der 12px-Lücke
	   des Rasters rückte der Text 24px statt 12px vom Kästchen ab. */
	padding: 0 !important;
	/* Keine Silbentrennung: WPForms trennte "Datenschutzer-klärung" mitten im
	   Wort. Im Entwurf rutscht das ganze Wort in die zweite Zeile. */
	hyphens: manual !important;
	-webkit-hyphens: manual !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

.mw-bewerbung .wpforms-submit-container {
	padding: 0 !important;
	margin-top: 6px !important;
}

.mw-bewerbung button[type='submit'] {
	width: 100% !important;
	/* Auch der Button bekommt von WPForms eine feste Höhe — hier 41px statt
	   der 55px aus dem Entwurf. */
	height: auto !important;
	min-height: 0 !important;
	padding: 18px 28px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--mw-accent) !important;
	color: var(--mw-bg) !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em !important;
	line-height: normal !important;
	text-transform: uppercase !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
}

.mw-bewerbung button[type='submit']:hover {
	background: var(--mw-accent-hover) !important;
}

/* Bestätigung nach dem Absenden — steht an derselben Stelle wie das Formular. */
.mw-bewerbung .wpforms-confirmation-container-full,
.mw-bewerbung .wpforms-confirmation-container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 18px !important;
	padding: 40px 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	color: inherit !important;
}

.mw-bewerbung .mw-danke__herz {
	font-size: 28px;
	line-height: normal;
	color: var(--mw-accent);
}

.mw-bewerbung .mw-danke__titel {
	font-family: 'Marcellus', serif;
	font-size: 32px;
	line-height: 1.15;
	color: var(--mw-ink);
}

.mw-bewerbung .mw-danke__text {
	max-width: 320px;
	font-size: 16px;
	line-height: 1.65;
	font-weight: 300;
	color: var(--mw-ink-soft);
}

.mw-bewerbung .wpforms-error,
.mw-bewerbung label.wpforms-error {
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #A9491A !important;
	margin-top: 6px !important;
}

/* ---------- 11b  Rich-Text (Rechtsseiten) -------------------------------- */

.mw-richtext {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--mw-ink-soft);
}

.mw-richtext > * + * { margin-top: 1.2em; }

.mw-richtext :where(h2) {
	margin-top: 2em;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.2;
	color: var(--mw-ink);
}

.mw-richtext :where(h3) {
	margin-top: 1.6em;
	font-size: 22px;
	line-height: 1.25;
	color: var(--mw-ink);
}

.mw-richtext :where(ul, ol) {
	padding-left: 1.2em;
	list-style: disc;
}

.mw-richtext :where(ol) { list-style: decimal; }
.mw-richtext :where(li) + :where(li) { margin-top: 0.4em; }
.mw-richtext :where(strong) { font-weight: 500; color: var(--mw-ink); }

/*
 * Der sichtbare Platzhalter für noch fehlende Rechtstexte. Bewusst auffällig:
 * eine leere Impressumsseite darf nicht unbemerkt live gehen (§11.1/§13).
 */
.mw-platzhalter-text {
	border: 1px dashed var(--mw-accent);
	padding: clamp(24px, 4vw, 40px);
	color: var(--mw-accent);
	font-weight: 400;
}

/* ---------- 12  Responsive ----------------------------------------------- */

/*
 * Grundhaltung ist fluid (clamp + auto-fit), deshalb gibt es nur dort Media
 * Queries, wo sich das VERHALTEN ändert — nicht nur eine Größe (§9.5).
 */

/* Stufe 1: Die Navigation passt nicht mehr neben das Logo. */
@media (max-width: 720px) {
	.mw-header__burger { display: flex; }

	.mw-page .mw-header__nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--mw-bg);
		border-top: 1px solid var(--mw-line);
		padding: 8px var(--mw-rand) 24px;
	}

	.mw-header.is-offen .mw-header__nav { display: flex; }

	.mw-page .mw-header__link {
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 16px 0;
	}

	.mw-header__logoslot { width: 72px; }
	.mw-header__logo { width: 72px; height: 72px; top: -4px; }
	.mw-header.is-scrolled .mw-header__logoslot { width: 48px; }
	.mw-header.is-scrolled .mw-header__logo { width: 48px; height: 48px; top: 0; }

	.mw-header.is-offen .mw-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.mw-header.is-offen .mw-header__burger span:nth-child(2) { opacity: 0; }
	.mw-header.is-offen .mw-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.mw-header__inner { position: relative; }

	/*
	 * BEWUSSTE ABWEICHUNG VOM ENTWURF — und zwar die einzige im Layout.
	 *
	 * Die vier Footer-Links passen bei 375px nicht in eine Reihe. Der Prototyp
	 * lässt sie trotzdem nicht umbrechen und erzeugt dadurch auf JEDER Seite
	 * 44px horizontale Überbreite (gemessen: scrollWidth 419 bei Viewport 375).
	 * Eine seitlich scrollende Seite fällt jedem Besucher sofort auf; der
	 * Prototyp ist als Desktop-Referenz entstanden und hat diesen Fall nicht
	 * geprüft. Deshalb brechen die Links hier um.
	 *
	 * Oberhalb dieses Breakpoints bleibt alles unverändert — dort ist die
	 * Umsetzung auf den Pixel deckungsgleich.
	 */
	.mw-footer__rechtliches {
		flex-wrap: wrap;
		gap: 14px 20px;
	}
}

/*
 * Stufe 3: sehr schmale Geräte (iPhone SE und Ähnliches).
 *
 * Der Textblock der Intro-Sektion behält sein `grid-column: span 2`. Bei
 * einer einzigen Spalte erzeugt das Raster dafür eine zweite, leere Spalte —
 * und die Lücke von 32px zählt mit. Ab etwa 360px fängt die seitliche
 * Polsterung das noch auf, bei 320px ragt der Block 12px über den Rand.
 *
 * Nur HIER den Span aufheben, nicht breiter: Bei zwei Spalten ist er genau
 * das, was den Block im Entwurf über die volle Breite laufen lässt.
 */
@media (max-width: 340px) {
	.mw-intro__text { grid-column: auto; }
}

/*
 * Weiter unten gibt es bewusst KEINE weiteren Breakpoints.
 *
 * Zwei naheliegende "Verbesserungen" wurden ausprobiert und wieder entfernt,
 * weil die Messung gegen den Entwurf sie widerlegt hat:
 *
 *  1. `.mw-intro__text { grid-column: auto }` unterhalb 980px.
 *     Im Entwurf behält der Textblock sein `span 2` auf jeder Breite. Bei zwei
 *     Spalten rutscht er dadurch als volle Breite in die zweite Zeile — genau
 *     so soll es aussehen. Mit `auto` landete er stattdessen als schmale
 *     Spalte neben den Formen (bei 768px 288px statt 612px breit).
 *
 *  2. `.mw-bewerbung { position: static }` unterhalb 980px.
 *     Der Entwurf lässt die Formularbox auf jeder Breite kleben.
 *
 * Wer hier etwas hinzufügt, lässt danach `node tools/mess/diff.js
 * --breiten=375,768,1024,1280,1440,1920` laufen.
 */