/* ==========================================================================
   miettransporter-wien.at, Theme-Styles
   Regeln: Text immer 100 % Deckkraft, Schwarz = #000, Weiss = #fff (keine Graustufen).
   Ueberschriften brechen bei 344 px nur zwischen Woertern, nie mitten im Wort.
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400-800.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-semi-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
	/* Markenfarben Weiss, Rot, Schwarz (Auftraggeber 2026-09-27, vorher Navy/Gelb) */
	--mtw-red: #ee0418;
	--mtw-red-2: #c40313;
	--mtw-red-soft: #fdeced;
	--mtw-ink: #111111;
	--mtw-ink-2: #1e1e1e;
	--mtw-ink-3: #3a3a3a;
	--mtw-ink-deep: #000;
	--mtw-navy: #0a1f44; /* Formular-Abschnitt Verlauf oben (Auftraggeber 2026-10-05: dunkelblau statt schwarz) */
	--mtw-soft: #f4f4f4;
	--mtw-line: #dcdcdc;
	--mtw-black: #000;
	--mtw-white: #fff;
	--mtw-ok: #0e7a3c;
	--mtw-err: #b3261e;
	--mtw-radius: 14px;
	--mtw-radius-sm: 10px;
	--mtw-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
	--mtw-shadow-lg: 0 18px 48px rgba(0, 0, 0, .18);
	--mtw-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--mtw-font-head: "Barlow Semi Condensed", "Arial Narrow", "Inter", sans-serif;
	--mtw-width: 1200px;
	--mtw-gutter: 16px;
}
@media (min-width: 768px) { :root { --mtw-gutter: 24px; } }

/* ── Basis ─────────────────────────────────────────────────────────────── */
/* Von WP-Core (sonst Inline-Style, siehe mu-plugin html.php): verhindert Layout-Spruenge bei sizes="auto". */
img:is([sizes=auto i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--mtw-font); font-size: 1.0625rem; line-height: 1.65; color: var(--mtw-black); background: var(--mtw-white); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--mtw-red); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--mtw-black); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mtw-red); outline-offset: 2px; border-radius: 4px; }
strong, b { font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, .mtw-h { font-family: var(--mtw-font-head); font-weight: 800; line-height: 1.08; letter-spacing: -.005em; color: inherit; margin: 0 0 .5em; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); font-weight: 700; line-height: 1.2; }
h4 { font-size: 1.15rem; font-weight: 700; }
.elementor-widget-heading .elementor-heading-title { line-height: 1.08; font-family: var(--mtw-font-head); }
.elementor-widget-heading h3.elementor-heading-title { line-height: 1.2; }

.mtw-container { width: 100%; max-width: calc(var(--mtw-width) + 2 * var(--mtw-gutter)); margin-inline: auto; padding-inline: var(--mtw-gutter); }
.mtw-narrow { max-width: calc(820px + 2 * var(--mtw-gutter)); }
.mtw-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; }
.mtw-small { font-size: .9rem; }
.mtw-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--mtw-red); color: var(--mtw-white); padding: 10px 16px; font-weight: 700; border-radius: 8px; }
.mtw-skip:focus { top: 12px; }
.mtw-icon { width: 1.25em; height: 1.25em; flex: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.mtw-btn, .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .8em 1.35em; border: 2px solid transparent; border-radius: var(--mtw-radius-sm); font: 700 1rem/1.2 var(--mtw-font); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; text-align: center; }
.mtw-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mtw-btn--primary, .elementor-widget-button .elementor-button { background: var(--mtw-red); color: var(--mtw-white); }
.mtw-btn--primary:hover, .elementor-widget-button .elementor-button:hover { background: var(--mtw-red-2); color: var(--mtw-white); }
.mtw-btn--dark { background: var(--mtw-ink); color: var(--mtw-white); }
.mtw-btn--dark:hover { background: var(--mtw-ink-2); color: var(--mtw-white); }
.mtw-btn--light { background: var(--mtw-white); color: var(--mtw-black); }
.mtw-btn--light:hover { background: var(--mtw-red-soft); color: var(--mtw-black); }
.mtw-btn--ghost { background: transparent; color: var(--mtw-black); border-color: var(--mtw-line); }
.mtw-btn--ghost:hover { border-color: var(--mtw-black); color: var(--mtw-black); }
.mtw-btn--sm { min-height: 42px; padding: .55em 1.05em; font-size: .95rem; }
.mtw-btn--block { width: 100%; }
.mtw-btn[disabled] { background: var(--mtw-line); color: var(--mtw-black); cursor: progress; transform: none; }
.mtw-sec--dark .elementor-widget-button.mtw-btn-light .elementor-button, .mtw-hero .elementor-widget-button.mtw-btn-light .elementor-button { background: transparent; color: var(--mtw-white); border-color: var(--mtw-white); }
.mtw-hero .elementor-widget-button.mtw-btn-light .elementor-button:hover { background: var(--mtw-white); color: var(--mtw-black); }
.elementor-button .elementor-button-content-wrapper { gap: .5em; }

/* ── Kein Header (Auftraggeber 2026-09-24): Hero beginnt ganz oben, Burger fest rechts oben, Menue als Panel ── */
.mtw-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mtw-black); flex: none; }
.mtw-logo:hover { text-decoration: none; color: var(--mtw-black); }
/* Logo = Bild (2026-09-27), Hoehe je Ort; im Footer auf weisser Kachel (schwarze Schrift im Logo) */
.mtw-logo__pic { display: block; }
.mtw-logo .mtw-logo__img { display: block; width: auto; max-width: none; height: 44px; }
.mtw-footer .mtw-logo { padding: 10px 14px; background: var(--mtw-white); border-radius: var(--mtw-radius-sm); }
.mtw-footer .mtw-logo .mtw-logo__img { height: 48px; }
/* Kleine Bildschirme (einspaltiger Footer, Auftraggeber 2026-10-05): Logo groesser und zentriert, Text darunter bleibt linksbuendig */
@media (max-width: 639px) {
	.mtw-footer .mtw-logo { display: flex; width: fit-content; margin: 0 auto; }
	.mtw-footer .mtw-logo .mtw-logo__img { height: clamp(60px, 18vw, 76px); }
}

/* Burger: auf allen Breiten, fest rechts oben, ueber Hero und Menue-Panel */
.mtw-burger { position: fixed; top: 14px; right: var(--mtw-gutter); z-index: 101; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); background: var(--mtw-white); color: var(--mtw-black); cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.mtw-burger:hover { border-color: var(--mtw-red); }
.mtw-burger .mtw-icon { width: 24px; height: 24px; }
.mtw-burger__close, .nav-open .mtw-burger__open { display: none; }
.nav-open .mtw-burger__close { display: block; }
.admin-bar .mtw-burger { top: 46px; }
@media (min-width: 783px) { .admin-bar .mtw-burger { top: 46px; } }
@media (min-width: 768px) { .mtw-burger { top: 18px; } }

/* Menue-Panel (alle Breiten): mobil vollflaechig, ab 768 px als Schublade rechts mit abgedunkeltem Hintergrund */
.mtw-nav { position: fixed; inset: 0; z-index: 99; background: var(--mtw-white); padding: 14px var(--mtw-gutter) 32px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
.admin-bar .mtw-nav { top: 46px; }
@media (min-width: 783px) { .admin-bar .mtw-nav { top: 32px; } }
.nav-open .mtw-nav { transform: none; visibility: visible; }
.nav-open { overflow: hidden; }
html.nav-open body::after { content: ""; position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, .55); }
@media (min-width: 768px) { .mtw-nav { left: auto; width: min(440px, 100%); box-shadow: -12px 0 40px rgba(0, 0, 0, .25); padding: 18px 28px 36px; } }
.mtw-nav__logo { margin: 4px 64px 16px 0; }
.mtw-nav__logo .mtw-logo__img { height: 46px; }
.mtw-menu, .mtw-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.mtw-menu > li { border-bottom: 1px solid var(--mtw-line); position: relative; }
.mtw-menu a { display: block; padding: 14px 44px 14px 0; font-weight: 700; font-size: 1.08rem; color: var(--mtw-black); text-decoration: none; }
.mtw-menu .current-menu-item > a, .mtw-menu .current-menu-ancestor > a, .mtw-menu .current-page-ancestor > a { color: var(--mtw-red); }
.mtw-menu .sub-menu { display: none; padding: 0 0 10px 12px; }
.mtw-menu .sub-menu a { font-weight: 500; font-size: 1rem; padding: 9px 0; }
.mtw-menu li.is-open > .sub-menu { display: block; }
.mtw-sub-toggle { position: absolute; right: 0; top: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--mtw-black); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mtw-sub-toggle .mtw-icon { transition: transform .2s; }
li.is-open > .mtw-sub-toggle .mtw-icon { transform: rotate(180deg); }
.mtw-nav__extra { display: grid; gap: 12px; margin-top: 24px; }
.mtw-nav__mail { display: inline-flex; align-items: center; gap: 8px; justify-content: center; color: var(--mtw-black); font-weight: 600; overflow-wrap: anywhere; }

/* ── Navigationsleiste (Auftraggeber 2026-09-27): nur ab 1024 px, sticky; darunter Burger + Panel wie bisher ── */
.mtw-header { display: none; }
@media (min-width: 1024px) {
	html { scroll-padding-top: 92px; }
	.mtw-header { display: block; position: sticky; top: 0; z-index: 100; background: var(--mtw-white); border-bottom: 1px solid var(--mtw-line); box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
	.admin-bar .mtw-header { top: 32px; }
	.mtw-header__inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
	.mtw-header__logo .mtw-logo__img { height: 50px; }
	.mtw-hnav { margin-left: auto; }
	.mtw-hnav__menu, .mtw-hnav__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
	.mtw-hnav__menu { display: flex; align-items: center; gap: 2px; }
	.mtw-hnav__menu > li { position: relative; }
	.mtw-hnav__menu > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 11px; border-radius: 8px; font-weight: 700; font-size: .97rem; color: var(--mtw-black); text-decoration: none; white-space: nowrap; }
	.mtw-hnav__menu > li > a:hover, .mtw-hnav__menu > li:focus-within > a { background: var(--mtw-soft); color: var(--mtw-black); }
	.mtw-hnav__menu > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
	.mtw-hnav__menu .current-menu-item > a, .mtw-hnav__menu .current-menu-ancestor > a, .mtw-hnav__menu .current-page-ancestor > a { color: var(--mtw-red); }
	.mtw-hnav__menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 270px; padding: 8px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); box-shadow: var(--mtw-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
	.mtw-hnav__menu > li:hover > .sub-menu, .mtw-hnav__menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.mtw-hnav__menu .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-weight: 500; color: var(--mtw-black); text-decoration: none; white-space: nowrap; }
	.mtw-hnav__menu .sub-menu a:hover, .mtw-hnav__menu .sub-menu a:focus-visible { background: var(--mtw-soft); color: var(--mtw-black); }
	.mtw-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }
	/* Sicherung: ein zu langer Kurz-CTA bricht um, statt die Leiste zu sprengen (Regel: max. 24 Zeichen) */
	.mtw-header__actions .mtw-btn { max-width: 250px; line-height: 1.15; }
	.mtw-header__phone { display: none; align-items: center; gap: 7px; font-weight: 700; color: var(--mtw-black); text-decoration: none; white-space: nowrap; }
	.mtw-header__phone .mtw-icon { color: var(--mtw-red); }
	.mtw-header__phone:hover { color: var(--mtw-red); }
	.mtw-burger { display: none; }
	.mtw-crumbs .mtw-container { padding-right: var(--mtw-gutter); }
}
/* 1024 bis 1279 px: kompakter, sonst passt die Leiste nicht in die Breite (Telefon erst ab 1280 px) */
@media (min-width: 1024px) and (max-width: 1279px) {
	.mtw-header__inner { gap: 12px; }
	.mtw-header__logo .mtw-logo__img { height: 42px; }
	.mtw-hnav__menu > li > a { padding: 9px 7px; font-size: .93rem; }
}
@media (min-width: 1280px) { .mtw-header__phone { display: inline-flex; } }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.mtw-crumbs { background: var(--mtw-soft); border-bottom: 1px solid var(--mtw-line); font-size: .9rem; }
.mtw-crumbs .mtw-container { padding-right: 76px; }
.mtw-crumbs .rank-math-breadcrumb p { margin: 0; padding: 10px 0; color: var(--mtw-black); }
.mtw-crumbs a { color: var(--mtw-black); font-weight: 600; text-decoration: none; }
.mtw-crumbs a:hover { text-decoration: underline; }
.mtw-crumbs .separator { margin: 0 .45em; color: var(--mtw-red); }
.mtw-crumbs .last { font-weight: 400; }
/* Als Abschnitt unter dem Hero (Elementor-Container ohne Innenabstand, volle Breite; Auftraggeber 2026-09-25) */
.e-con.mtw-crumbsbar { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; --row-gap: 0; --column-gap: 0; background: var(--mtw-soft); }
.e-con.mtw-crumbsbar > .e-con-inner { width: 100%; max-width: none; }
.mtw-crumbsbar .elementor-widget { margin: 0; }
.mtw-crumbsbar .mtw-crumbs .mtw-container { padding-right: var(--mtw-gutter); }

/* ── Elementor-Grundgeruest ────────────────────────────────────────────── */
.mtw-builder .elementor-widget-text-editor { font-size: 1.0625rem; line-height: 1.7; }
.e-con.mtw-sec, .e-con.mtw-hero { --padding-top: 64px; --padding-bottom: 64px; --padding-left: var(--mtw-gutter); --padding-right: var(--mtw-gutter); --gap: 20px; --row-gap: 20px; }
@media (min-width: 1024px) { .e-con.mtw-sec { --padding-top: 88px; --padding-bottom: 88px; } }
.e-con.mtw-sec--tight { --padding-top: 40px; --padding-bottom: 40px; }
.e-con.mtw-sec--soft { background: var(--mtw-soft); }
.e-con.mtw-sec--dark { background: var(--mtw-ink); color: var(--mtw-white); }
.e-con.mtw-sec--dark a:not(.mtw-btn):not(.mtw-linkcard):not(.mtw-bcard):not(.elementor-button) { color: var(--mtw-white); }
.e-con.mtw-sec--line { border-top: 1px solid var(--mtw-line); }
.mtw-eyebrow, .elementor-widget.mtw-eyebrow .elementor-heading-title { display: inline-block; margin: 0 0 .6em; font: 800 .82rem/1.2 var(--mtw-font); letter-spacing: .14em; text-transform: uppercase; color: var(--mtw-red); }
.mtw-sec--dark .mtw-eyebrow, .mtw-sec--dark .elementor-widget.mtw-eyebrow .elementor-heading-title, .mtw-hero .elementor-widget.mtw-eyebrow .elementor-heading-title { color: var(--mtw-red); }
.elementor-widget.mtw-lead { font-size: 1.15rem; max-width: 62ch; }
.mtw-center, .elementor-widget.mtw-center { text-align: center; }
.elementor-widget.mtw-center.mtw-lead { margin-inline: auto; }

/* Zwei Spalten (Text + Aside) */
.e-con.mtw-split > .e-con-inner, .e-con.mtw-split.e-con-full { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .e-con.mtw-split > .e-con-inner, .e-con.mtw-split.e-con-full { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; } }
.e-con.mtw-col { --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 16px; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Flyer-Nachbau (Auftraggeber 2026-09-24, Referenz: Hochformat-Flyer 941x1672 mit dem Foto hero-van-wien).
   Handy/Tablet = 1:1 wie der Flyer: Textblock oben im Himmel, darunter das Foto-Fenster (Van + Fahrer, Foto sitzt
   unten buendig bei 100 % Breite), Fusszeile ueber dem Pflaster. Alle Masse skalieren mit der Breite (vw), also bleiben
   die Proportionen des Flyers auf jeder Breite erhalten; Mindestgroessen sichern die Lesbarkeit unter ~400 px.
   Ist der Textblock hoeher als der Himmel im Foto, rutscht das Foto nach unten und oben bleibt ein Navy-Verlauf.
   Desktop ab 1024 px: Text links, Foto-Panel rechts (Van unten buendig, links weich ausgeblendet), Formular darunter.
   Schrift im Hero ist Inter (breite Grotesk wie im Flyer), Gelb ist das Zitronengelb des Flyers. */
.e-con.mtw-hero {
	--hero-x: max(16px, 8vw);
	position: relative; overflow: hidden; color: var(--mtw-white); font-family: var(--mtw-font);
	background: var(--mtw-ink);
	--padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; --row-gap: 0; --column-gap: 0;
}
.e-con.mtw-hero > .e-con-inner { display: flex; flex-direction: column; width: 100%; max-width: none; gap: 0; }
.e-con.mtw-hero .e-con.mtw-hero__text { position: relative; z-index: 1; --gap: 0; --row-gap: 0; --column-gap: 0; --padding-top: clamp(22px, 8vw, 76px); --padding-bottom: clamp(12px, 3vw, 28px); --padding-left: var(--hero-x); --padding-right: var(--hero-x); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.mtw-hero .elementor-widget { margin: 0; }
.mtw-hero .elementor-heading-title, .mtw-hero .elementor-widget-text-editor, .mtw-hero .elementor-widget-text-editor a { color: var(--mtw-white); }
/* Dachzeile mit gelbem Strich */
.mtw-hero .elementor-widget.mtw-hero__eyebrow .elementor-heading-title { position: relative; display: block; margin: 0 0 clamp(10px, 1.5vw, 15px); padding-bottom: clamp(9px, 1.3vw, 13px); font: 500 clamp(.7rem, 2.1vw, 1.25rem)/1.2 var(--mtw-font); letter-spacing: .22em; text-transform: uppercase; }
.mtw-hero .elementor-widget.mtw-hero__eyebrow .elementor-heading-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: clamp(56px, 10.6vw, 100px); height: max(4px, .64vw); background: var(--mtw-red); }
/* Unter 1024 px liegt der feste Burger (46 px, rechts oben) auf Höhe der Dachzeile: lange Dachzeilen (z. B. „Kleintransporter ohne Schalter“,
   Begriffsseiten 2026-10-02) liefen darunter und wurden abgeschnitten. Rechts Platz lassen, damit sie vorher umbrechen. */
@media (max-width: 1023px) { .mtw-hero .elementor-widget.mtw-hero__eyebrow .elementor-heading-title { padding-right: 58px; } }
/* H1, Schluesselwort rot (mtw-hl) */
.mtw-hero h1.elementor-heading-title { margin: 0 0 clamp(8px, 1.7vw, 16px); font: 800 clamp(1.7rem, 7vw, 4.125rem)/1.12 var(--mtw-font); letter-spacing: -.02em; }
/* Lange Ein-Wort-H1 (Einsatzseite „Haushaltsgeräte-Transport“, 2026-10-02): nie am Bindestrich umbrechen (Z Fold 5, 344 px),
   sondern die Schrift auf die Breite der H1 verkleinern. 13,2 = Textbreite in em (gemessen 13,0) plus Reserve. */
.mtw-hero h1:has(.mtw-h1-lang) { container-type: inline-size; }
.mtw-h1-lang { white-space: nowrap; font-size: min(1em, calc(100cqi / (var(--n, 25) * .528))); }   /* --n = Zeichen der Wortgruppe; .528 gemessen an „Haushaltsgeräte-Transport“ (25 Zeichen = 13,2) */
/* Einleitung */
.mtw-hero .elementor-widget.mtw-hero__lead { max-width: max(62vw, 21rem); margin: 0 0 clamp(10px, 2.2vw, 22px); font: 400 clamp(.9rem, 2.76vw, 1.625rem)/1.42 var(--mtw-font); }
.mtw-hero .elementor-widget.mtw-hero__lead p { margin: 0; }
/* Preiszeile: immer EINE Zeile, EINE Groesse, ganz gelb, so gross wie moeglich (Auftraggeber 2026-09-24, Massstab Galaxy
   Z Fold 5 = 344 px). Barlow Semi Condensed 800 (Headline-Schrift der Seite) ist ~20 % schmaler als Inter; reine vw-Groesse
   ohne Mindestwert, damit Textbreite und Zeilenbreite (84 vw) immer im selben Verhaeltnis bleiben.
   Laufweite -.02em (wie die Hero-H1) und Wortabstand -.08em holen ~9 % mehr Groesse heraus als die normale Laufweite
   (Auftraggeber 2026-09-25, letzte Fassung: die Zeile haelt sich wie alle anderen Hero-Elemente an das Seitenpadding
   --hero-x, linksbuendig, und fuellt die Textspalte so weit wie moeglich; ein zwischenzeitlicher Vollbreiten-Umbau mit
   negativen Raendern wurde am selben Tag wieder zurueckgenommen). Die Groesse hier ist nur die Naeherung fuer den ersten
   Frame und ohne JS (5,5vw = ~5 % Reserve zur 84-vw-Spalte in Headless-Chrome; Desktop 1,96 rem / 2,42 rem). Die exakte
   Groesse setzt main.js (fitPrice): misst die Textbreite im Browser und skaliert auf Spaltenbreite minus 1 px je Seite. */
.mtw-hero__price { display: block; white-space: nowrap; margin: 0 0 clamp(10px, 2.5vw, 26px); text-align: left; font: 800 5.5vw/1.1 var(--mtw-font-head); letter-spacing: -.02em; word-spacing: -.08em; color: #f8d800; } /* Zitronengelb des Flyers, seit 2026-09-27 abends wieder gelb (Auftraggeber), H1-Schluesselwort bleibt rot */
/* Drei Karten: Foto im Milchglas-Kasten, Text direkt auf dem Foto */
.mtw-hero__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: max(8px, 1.06vw); }
.mtw-hero__card { display: grid; grid-template-columns: clamp(96px, 24.9vw, 234px) minmax(0, 1fr); align-items: center; gap: clamp(12px, 2.3vw, 22px); }
.mtw-hero__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 234 / 142; border-radius: clamp(10px, 1.9vw, 18px); background: rgba(255, 255, 255, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; }
.mtw-hero__thumb img { width: 92%; height: 90%; object-fit: contain; }
.mtw-hero__cardtext { display: block; min-width: 0; }
.mtw-hero__card strong { display: block; margin: 0 0 .12em; font: 700 clamp(.95rem, 3.2vw, 1.9rem)/1.2 var(--mtw-font); color: var(--mtw-white); }
.mtw-hero__sub { display: block; font: 400 clamp(.85rem, 2.76vw, 1.625rem)/1.32 var(--mtw-font); color: var(--mtw-white); }
/* Button: mobil uebernimmt die Anfrage-Leiste (der Flyer hat keinen Button), ab Tablet sichtbar */
.mtw-hero__cta { display: none; }
@media (min-width: 1024px) { .mtw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } }
/* Foto-Fenster: Foto sitzt unten buendig in voller Breite, der obere Teil (Himmel) liegt hinter dem Textblock */
.e-con.mtw-hero .e-con.mtw-hero__photo { position: relative; z-index: 0; width: 100%; aspect-ratio: 941 / 682; --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; --gap: 0; --row-gap: 0; --column-gap: 0; }
.mtw-hero__photo > .elementor-widget, .mtw-hero__photo .elementor-shortcode { position: static; }
.mtw-hero__img { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; height: auto; margin: 0; }
@media (max-width: 1023px) { .e-con.mtw-hero .e-con.mtw-hero__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; padding-bottom: 177.7%; pointer-events: none; background: linear-gradient(180deg, #111111 0, rgba(17, 17, 17, .7) 6%, rgba(17, 17, 17, 0) 20%); } }
/* Fusszeile: Kalender mit Haken + fette Zeile (Flyer), mehrere Punkte kompakt umbrechend */
.mtw-hero__foot { position: absolute; left: var(--hero-x); right: var(--hero-x); bottom: clamp(14px, 5vw, 48px); z-index: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45em 1.3em; }
.mtw-hero__foot li { display: inline-flex; align-items: center; gap: clamp(10px, 3.4vw, 34px); font: 700 clamp(.85rem, 3.45vw, 2.25rem)/1.15 var(--mtw-font); color: var(--mtw-white); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.mtw-hero__foot .mtw-illu { width: clamp(38px, 9.4vw, 88px); height: auto; flex: none; }
.mtw-hero__foot .mtw-icon { width: 1.15em; height: 1.15em; color: var(--mtw-red); }
.mtw-illu__y { fill: var(--mtw-red); }
/* Desktop: Text links (am 1200er Raster ausgerichtet), Foto-Panel rechts bis zum Bildschirmrand */
@media (min-width: 1024px) {
	.e-con.mtw-hero { --hero-x: 0px; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .2) 100%), url("../img/hero-van-wien.webp") center 32% / cover no-repeat var(--mtw-ink-deep); }
	.e-con.mtw-hero > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
	.e-con.mtw-hero .e-con.mtw-hero__text { --padding-top: 64px; --padding-bottom: 64px; --padding-left: max(var(--mtw-gutter), calc((100vw - var(--mtw-width)) / 2)); --padding-right: 32px; justify-content: center; }
	.mtw-hero .elementor-widget.mtw-hero__eyebrow .elementor-heading-title { margin-bottom: 14px; padding-bottom: 12px; font-size: .85rem; }
	.mtw-hero .elementor-widget.mtw-hero__eyebrow .elementor-heading-title::after { width: 72px; height: 5px; }
	.mtw-hero h1.elementor-heading-title { margin-bottom: 14px; font-size: clamp(2.5rem, 5.86vw - 19px, 3.5rem); }
	.mtw-hero .elementor-widget.mtw-hero__lead { max-width: 34rem; margin-bottom: 20px; font-size: 1.2rem; }
	.mtw-hero__price { margin-bottom: 22px; font-size: 1.96rem; }
	.mtw-hero__cards { gap: 10px; max-width: 34rem; }
	.mtw-hero__card { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
	.mtw-hero__thumb { border-radius: 14px; }
	.mtw-hero__card strong { font-size: 1.25rem; }
	.mtw-hero__sub { font-size: 1.02rem; }
	.mtw-hero__cta { margin-top: 26px; }
	.e-con.mtw-hero .e-con.mtw-hero__photo { aspect-ratio: auto; min-height: 620px; }
	.mtw-hero__img { left: auto; right: 0; width: 88%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
	.mtw-hero__foot { left: 6%; right: 4%; bottom: 34px; gap: .4em 1.2em; }
	.mtw-hero__foot li { gap: 16px; font-size: 1.35rem; }
	.mtw-hero__foot .mtw-illu { width: 56px; }
}
@media (min-width: 1280px) { .e-con.mtw-hero .e-con.mtw-hero__text { --padding-right: 40px; } .mtw-hero__price { font-size: 2.42rem; } }
/* Van-Hero (alle Seiten): Verlauf wie vl-installationen.at (Auftraggeber 2026-10-05: „Der Verlauf hier ist nicht gut, es soll so
   aussehen wie bei vl-installationen.at“, Referenz /wien/transporter-mieten-1010-innere-stadt/; danach: „der Verlauf muss sanfter werden,
   er soll nicht abrupt von dunkel auf hell gehen“). Wie bei VL ein heller Links-Verlauf in EINER Farbe (Dunkelblau der Seite, --mtw-navy)
   plus ein Verlauf von unten und ein weicher Textschatten, aber ohne Knicke: links gleichmäßig von 65 % am linken bis 0 am rechten Rand
   (über die ganze Breite = überall gleich flach), unten VL-Stärke als knickfreie Kurve 70 % -> 0 bei 42 %, oben am Handy Kosinus 100 % -> 0
   über 40 % der Fotohöhe. Seit 2026-10-06 auch auf der Startseite (Auftraggeber: „Der Hero der Startseite muss auch einen blauen Verlauf
   erhalten so wie die anderen Unterseiten statt schwarz“; bis dahin Flyer-Nachbau mit Schwarz #111 und ohne Abdunkelung). Heros mit Seitenfoto
   (.mtw-hero__img--bild) haben ihren eigenen Effekt. Kurven gemessen/berechnet, siehe CLAUDE.md Abschnitt Hero. */
.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) {
	--mtw-hero-scrim-x: linear-gradient(90deg, rgba(10, 31, 68, .65) 0%, rgba(10, 31, 68, 0) 100%);
	--mtw-hero-scrim-y: linear-gradient(0deg, rgba(10, 31, 68, .7) 0%, rgba(10, 31, 68, .514) 6%, rgba(10, 31, 68, .357) 12%, rgba(10, 31, 68, .229) 18%, rgba(10, 31, 68, .129) 24%, rgba(10, 31, 68, .057) 30%, rgba(10, 31, 68, .014) 36%, rgba(10, 31, 68, 0) 42%);
	background: var(--mtw-navy);
}
.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) .e-con.mtw-hero__text { text-shadow: 0 1px 8px rgba(10, 31, 68, .72); }
.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) h1.elementor-heading-title { text-shadow: 0 1px 10px rgba(10, 31, 68, .75); }
/* Handy/Tablet: die Verläufe liegen im Foto-Fenster (Box = exakte Fotohöhe); oben läuft das Blau weich ins Foto aus statt in 20 % mit Knick */
@media (max-width: 1023px) {
	.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) .e-con.mtw-hero__photo::after { background: linear-gradient(180deg, rgba(10, 31, 68, 1) 0%, rgba(10, 31, 68, .962) 5%, rgba(10, 31, 68, .854) 10%, rgba(10, 31, 68, .691) 15%, rgba(10, 31, 68, .5) 20%, rgba(10, 31, 68, .309) 25%, rgba(10, 31, 68, .146) 30%, rgba(10, 31, 68, .038) 35%, rgba(10, 31, 68, 0) 40%), var(--mtw-hero-scrim-x), var(--mtw-hero-scrim-y); }
}
/* Desktop: Links- und Unten-Verlauf über dem Hintergrundfoto. Das Foto-Panel (rechte Hälfte, Foto ab 12 % = 100 % - 88 %) bekommt
   dieselben Verläufe, sonst taucht dort ein unabgedunkeltes, helles Foto auf (= harter Sprung in der Bildmitte): Links-Verlauf in
   Panel-Koordinaten = 65 % x (1 - 0,56) = 28,6 % -> 0. Foto und Verlaufsschicht blenden mit derselben S-Kurve (Kosinus über 26 %) ein,
   statt linear mit Knick; Lage der Einblendung bleibt, damit der Van nicht durchscheint. Dazu ein weicher Schleier an der Panelkante
   (35 % -> 0 über 45 % der Fotobreite, Kosinus): Hintergrund (Himmel) und Panel (Skyline) sind verschiedene Ausschnitte desselben Fotos,
   ohne Schleier bleibt auf breiten Schirmen (1920 px) eine helle Kante; mit 50 % würde die Van-Front sichtbar dunkler (getestet). */
@media (min-width: 1024px) {
	.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) { background: var(--mtw-hero-scrim-x), var(--mtw-hero-scrim-y), url("../img/hero-van-wien.webp") center 32% / cover no-repeat var(--mtw-navy); }
	.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) .mtw-hero__img { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .067) 4.3%, rgba(0, 0, 0, .25) 8.7%, rgba(0, 0, 0, .5) 13%, rgba(0, 0, 0, .75) 17.3%, rgba(0, 0, 0, .933) 21.7%, #000 26%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .067) 4.3%, rgba(0, 0, 0, .25) 8.7%, rgba(0, 0, 0, .5) 13%, rgba(0, 0, 0, .75) 17.3%, rgba(0, 0, 0, .933) 21.7%, #000 26%); }
	.e-con.mtw-hero:not(:has(.mtw-hero__img--bild)) .e-con.mtw-hero__photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 12%; pointer-events: none; background: linear-gradient(90deg, rgba(10, 31, 68, .35) 0%, rgba(10, 31, 68, .337) 5.625%, rgba(10, 31, 68, .299) 11.25%, rgba(10, 31, 68, .242) 16.875%, rgba(10, 31, 68, .175) 22.5%, rgba(10, 31, 68, .108) 28.125%, rgba(10, 31, 68, .051) 33.75%, rgba(10, 31, 68, .013) 39.375%, rgba(10, 31, 68, 0) 45%), linear-gradient(90deg, rgba(10, 31, 68, .286) 0%, rgba(10, 31, 68, 0) 100%), var(--mtw-hero-scrim-y); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .067) 4.3%, rgba(0, 0, 0, .25) 8.7%, rgba(0, 0, 0, .5) 13%, rgba(0, 0, 0, .75) 17.3%, rgba(0, 0, 0, .933) 21.7%, #000 26%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .067) 4.3%, rgba(0, 0, 0, .25) 8.7%, rgba(0, 0, 0, .5) 13%, rgba(0, 0, 0, .75) 17.3%, rgba(0, 0, 0, .933) 21.7%, #000 26%); }
}
/* Hero im Theme-Template (Artikel, single.php, 2026-10-05): Elementors Frontend-CSS laedt dort nicht, deshalb die
   Container-Grundregeln von .e-con hier nachgebaut (Flex-Spalte, Innenabstand aus --padding-*). */
.mtw-hero--tpl, .mtw-hero--tpl .e-con { display: flex; flex-direction: column; min-width: 0; padding: var(--padding-top, 0) var(--padding-right, 0) var(--padding-bottom, 0) var(--padding-left, 0); }
.mtw-hero--tpl > .e-con-inner { flex: 1 1 auto; margin: 0 auto; }
.mtw-hero--tpl .elementor-heading-title { padding: 0; }
.mtw-hero--tpl .mtw-hero__eyebrow a { color: inherit; text-decoration: none; }
.mtw-hero--tpl .mtw-hero__lead p { margin: 0; }
/* Eigenes Querformat-Foto statt des Flyer-Hochformats (Seitenfotos und Beitragsbilder, 2026-10-05): im Foto-Fenster bzw.
   -Panel per object-fit: cover (Ausschnitt per object-position aus config 'seiten_bilder'), unten ein Verlauf fuer die Fusszeile.
   Aussehen wie der Blog-Artikel-Hero (Auftraggeber 2026-10-05: „mach den hero von diesen so wie bei den blog-artikeln“, zuerst für die
   drei Gebietsseiten, dann „das selbe“ für die 8 Leistungsseiten; Artikel davor: „Hintergrund blau, aber ohne Transparenz“): hinter dem
   Text volles --mtw-navy ohne durchscheinendes Foto. Bis dahin lag dort dasselbe Foto weichgezeichnet (::before). */
.e-con.mtw-hero:has(.mtw-hero__img--bild) { background: var(--mtw-navy); isolation: isolate; }
.mtw-hero__img.mtw-hero__img--bild { top: 0; height: 100%; object-fit: cover; }
.e-con.mtw-hero .e-con.mtw-hero__photo:has(.mtw-hero__img--bild)::after { content: ""; display: block; position: absolute; left: 0; right: 0; top: auto; bottom: 0; height: 55%; padding-bottom: 0; pointer-events: none; background: linear-gradient(0deg, rgba(10, 31, 68, .78) 0%, rgba(10, 31, 68, 0) 100%); }
@media (max-width: 1023px) {
	/* Handy/Tablet (Referenz Hero-Bild von kellerentruempelung.at, aber unten statt oben): Foto als Karte im Seitenabstand des Textes,
	   16:10, runde Ecken, feiner heller Rand + Schatten, ohne Verlauf; die Fusszeile steht darunter auf dem Blau. */
	.e-con.mtw-hero .e-con.mtw-hero__photo:has(.mtw-hero__img--bild) { aspect-ratio: auto; --padding-top: clamp(6px, 2vw, 16px); --padding-bottom: clamp(22px, 6vw, 44px); --padding-left: var(--hero-x); --padding-right: var(--hero-x); }
	.e-con.mtw-hero .e-con.mtw-hero__photo:has(.mtw-hero__img--bild)::after { content: none; }
	.e-con.mtw-hero .mtw-hero__img.mtw-hero__img--bild { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 25px -5px rgba(0, 0, 0, .3), 0 8px 10px -6px rgba(0, 0, 0, .3); }
	.e-con.mtw-hero:has(.mtw-hero__img--bild) .mtw-hero__foot { position: static; margin-top: clamp(16px, 4.5vw, 30px); }
}
@media (min-width: 1024px) {
	.mtw-hero__img.mtw-hero__img--bild { bottom: 0; height: 100%; }
	/* Fusszeilen-Verlauf wie das Foto links weich auslaufen lassen, sonst steht am Panelrand eine harte Kante */
	.e-con.mtw-hero .e-con.mtw-hero__photo:has(.mtw-hero__img--bild)::after { left: 12%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
}
/* Formular als eigener dunkler Abschnitt direkt unter dem Hero (ohne Welle, die Welle des naechsten Abschnitts bleibt) */
.e-con.mtw-sec.mtw-sec--nowave::after { content: none; }
.e-con.mtw-sec--form { --padding-top: 28px; --padding-bottom: 56px; }
.mtw-sec--form .mtw-formcard, .mtw-tsec--form .mtw-formcard { max-width: 760px; margin-inline: auto; }
/* Ab 1024 px (Auftraggeber 2026-09-28): links 1/3 Telefon + E-Mail, rechts 2/3 Formular, beide Karten gleich hoch.
   Darunter bleibt alles wie vorher: nur das Formular, die Kontaktspalte ist ausgeblendet. */
.mtw-formcontact { display: none; }
@media (min-width: 1024px) {
	.mtw-formwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: stretch; }
	.mtw-sec--form .mtw-formwrap .mtw-formcard, .mtw-tsec--form .mtw-formwrap .mtw-formcard { max-width: none; margin: 0; }
	.mtw-formcontact { display: flex; flex-direction: column; background: var(--mtw-white); color: var(--mtw-black); border-radius: 18px; padding: 28px; box-shadow: var(--mtw-shadow-lg); border-top: 6px solid var(--mtw-red); }
}
.mtw-formcontact__eyebrow { margin: 0 0 6px; font: 800 .8rem/1.2 var(--mtw-font); letter-spacing: .14em; text-transform: uppercase; color: var(--mtw-red); }
.mtw-formcontact__title { margin: 0 0 6px; font: 800 1.6rem/1.1 var(--mtw-font-head); }
.mtw-formcontact__text { margin: 0 0 20px; font-size: .95rem; line-height: 1.5; }
.mtw-formcontact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Icon + Beschriftung in einer Zeile, Wert darunter über die volle Breite: Telefon bricht nie um, E-Mail nur nach dem @. */
.mtw-formcontact__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 14px 16px; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); color: var(--mtw-black); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.mtw-formcontact__item:hover { border-color: var(--mtw-red); box-shadow: var(--mtw-shadow); color: var(--mtw-black); text-decoration: none; }
.mtw-formcontact__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mtw-red-soft); color: var(--mtw-red); }
.mtw-formcontact__ic .mtw-icon { width: 20px; height: 20px; }
.mtw-formcontact__item > span:last-child { display: contents; }
.mtw-formcontact__label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mtw-red); }
.mtw-formcontact__value { grid-column: 1 / -1; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--mtw-black); } /* eigene Farbe: .mtw-sec--dark färbt Links weiß */
.mtw-formcontact__nb { white-space: nowrap; }
@media (min-width: 1280px) { .mtw-formcontact__value { font-size: 1.1rem; } }
.mtw-formcontact__note { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 20px; font-size: .9rem; font-weight: 600; }
.mtw-formcontact__note .mtw-icon { flex: none; width: 20px; height: 20px; color: var(--mtw-red); }
@media (min-width: 1024px) { .e-con.mtw-sec--form { --padding-top: 56px; --padding-bottom: 72px; } }
.mtw-chip, .elementor-widget.mtw-chip .elementor-heading-title { display: inline-flex; align-items: center; gap: .5em; padding: .4em .8em; border-radius: 999px; background: var(--mtw-ink-2); border: 1px solid var(--mtw-ink-3); color: var(--mtw-red); font: 800 .8rem/1.2 var(--mtw-font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.elementor-widget.mtw-chip { width: auto; }
.mtw-price-badge { display: inline-flex; align-items: baseline; gap: .4em; padding: 10px 16px; border-radius: 12px; background: var(--mtw-red); color: var(--mtw-white); font-weight: 700; }
.mtw-price-badge strong { font: 800 1.7rem/1 var(--mtw-font-head); }

/* ── Formular ──────────────────────────────────────────────────────────── */
.mtw-formcard { background: var(--mtw-white); color: var(--mtw-black); border-radius: 18px; padding: 22px; box-shadow: var(--mtw-shadow-lg); border-top: 6px solid var(--mtw-red); }
@media (min-width: 480px) { .mtw-formcard { padding: 28px; } }
.mtw-formcard__title { font: 800 1.6rem/1.1 var(--mtw-font-head); margin: 0 0 4px; }
.mtw-formcard__sub { margin: 0 0 14px; font-size: .95rem; }
.mtw-form__progress { height: 6px; border-radius: 99px; background: var(--mtw-soft); overflow: hidden; }
.mtw-form__progress span { display: block; height: 100%; width: 33.3%; background: var(--mtw-red); border-radius: 99px; transition: width .25s; }
.mtw-form__stepinfo { margin: 8px 0 12px; font-size: .85rem; font-weight: 700; }
.mtw-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mtw-field { display: block; margin-bottom: 12px; }
.mtw-field > span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 5px; }
.mtw-field input, .mtw-field select, .mtw-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); background: var(--mtw-white); color: var(--mtw-black); font: 400 1rem/1.4 var(--mtw-font); }
.mtw-field textarea { min-height: 96px; resize: vertical; }
.mtw-field ::placeholder { color: #6b6b6b; opacity: 1; }
.mtw-field input:focus, .mtw-field select:focus, .mtw-field textarea:focus { outline: none; border-color: var(--mtw-red); box-shadow: 0 0 0 3px rgba(238, 4, 24, .18); }
.mtw-field .is-invalid { border-color: var(--mtw-err); }
.mtw-form__nav { display: flex; gap: 10px; margin-top: 4px; }
.mtw-form__nav .mtw-btn { flex: 1; }
.mtw-form__nav .mtw-btn--ghost { flex: 0 0 auto; }
.mtw-form__status { margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
.mtw-form__status:empty { display: none; }
.mtw-form__status.is-error { color: var(--mtw-err); }
.mtw-form__status.is-ok { color: var(--mtw-ok); }
.mtw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── USP-Leiste ────────────────────────────────────────────────────────── */
.mtw-usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mtw-usps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mtw-usps { grid-template-columns: repeat(4, 1fr); } }
/* Vorteils-Kacheln als Karten mit echtem Foto oben (freigestellt auf hellem Panel), Text darunter. */
.mtw-usp { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); }
.mtw-usp__media { display: flex; align-items: center; justify-content: center; height: 128px; background: var(--mtw-soft); }
.mtw-usp__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 10px 14px; }
.mtw-usp__media--icon { background: var(--mtw-red-soft); }
.mtw-usp__media--icon .mtw-illu { width: 60px; height: 60px; }
.mtw-usp__body { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 20px; font-size: .95rem; line-height: 1.45; }
.mtw-usp__body strong { font: 800 1.2rem/1.15 var(--mtw-font-head); }

/* ── Raster & Karten ───────────────────────────────────────────────────── */
.mtw-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mtw-grid--2, .mtw-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mtw-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.mtw-linkcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 52px 20px 20px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); color: var(--mtw-black); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; height: 100%; }
.mtw-linkcard:hover { border-color: var(--mtw-red); box-shadow: var(--mtw-shadow); transform: translateY(-2px); text-decoration: none; color: var(--mtw-black); }
.mtw-linkcard__title { font: 700 1.2rem/1.2 var(--mtw-font-head); }
.mtw-linkcard__text { font-size: .95rem; line-height: 1.5; }
.mtw-linkcard__go { position: absolute; right: 16px; top: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--mtw-red); color: var(--mtw-white); display: inline-flex; align-items: center; justify-content: center; }
.mtw-linkcard__go .mtw-icon { width: 16px; height: 16px; }
/* Linkkarten mit Seitenfoto (Startseite "Leistungen" und "Über Wien hinaus", 2026-10-05): Foto oben randlos, Pfeil auf dem Foto */
.mtw-linkcard--bild { padding-top: 0; overflow: hidden; }
.mtw-linkcard__img { display: block; margin: 0 -52px 8px -20px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mtw-soft); }
.mtw-linkcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mtw-linkcard--bild:hover .mtw-linkcard__img img { transform: scale(1.03); }
/* Pfeil unten rechts neben dem Text statt oben rechts auf dem Foto (Auftraggeber 2026-10-06), im rechten Innenabstand der Karte (52 px) */
.mtw-linkcard--bild .mtw-linkcard__go { top: auto; bottom: 20px; right: 16px; }
.mtw-sec--dark .mtw-linkcard { background: var(--mtw-ink-2); border-color: var(--mtw-ink-3); color: var(--mtw-white); }
.mtw-sec--dark .mtw-linkcard:hover { border-color: var(--mtw-red); color: var(--mtw-white); }

.mtw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mtw-chips a { display: inline-block; padding: 9px 14px; border: 1px solid var(--mtw-line); border-radius: 12px; background: var(--mtw-white); color: var(--mtw-black); font-weight: 600; font-size: .95rem; text-decoration: none; }
.mtw-chips a:hover { border-color: var(--mtw-red); background: var(--mtw-red-soft); }

/* ── Pakete ────────────────────────────────────────────────────────────── */
.mtw-packages { display: grid; gap: 32px; }
/* Preiskarten mit Foto (Auftraggeber 2026-09-25): Foto oben komplett sichtbar (Hochformat 1186x1327, kein Zuschnitt),
   Chip mit Personenzahl im Himmel oben links, darunter Name, Preis, Beschreibung, Inklusivliste, Button unten buendig. */
.mtw-pkg { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--mtw-white); border: 2px solid var(--mtw-line); border-radius: 18px; height: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transition: transform .2s, border-color .2s, box-shadow .2s; }
.mtw-pkg:hover { transform: translateY(-3px); border-color: var(--mtw-red); box-shadow: 0 16px 36px rgba(0, 0, 0, .14); }
.mtw-pkg__media { position: relative; margin: 0; background: var(--mtw-soft); border-bottom: 2px solid var(--mtw-line); }
.mtw-pkg__media picture, .mtw-pkg .mtw-pkg__media img { display: block; width: 100%; height: auto; }
.mtw-pkg__chip { position: absolute; top: 14px; left: 14px; padding: 7px 13px; border-radius: 999px; background: var(--mtw-ink); color: var(--mtw-white); font: 800 .78rem/1.2 var(--mtw-font); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.mtw-pkg__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 20px 22px 22px; }
.mtw-pkg__name { margin: 0; font-size: 1.35rem; }
.mtw-pkg__price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; }
.mtw-pkg__amount { font: 800 2.4rem/1 var(--mtw-font-head); }
.mtw-pkg__unit { font-weight: 600; }
.mtw-pkg__fit { margin: 0; font-size: .95rem; }
.mtw-pkg .mtw-btn { margin-top: auto; }
.mtw-packages__note { font-size: .92rem; margin: 0; }
.mtw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mtw-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: .96rem; }
.mtw-checks .mtw-icon { color: var(--mtw-ok); margin-top: 2px; }

/* ── Konditionen ───────────────────────────────────────────────────────── */
.mtw-conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .mtw-conditions { grid-template-columns: 1fr 1fr; } }
.mtw-conditions li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); font-weight: 600; }
.mtw-conditions .mtw-icon { color: var(--mtw-red); }
.mtw-sec--dark .mtw-conditions li { background: var(--mtw-ink-2); border-color: var(--mtw-ink-3); color: var(--mtw-white); }
.mtw-sec--dark .mtw-conditions .mtw-icon { color: var(--mtw-red); }

/* ── Ablauf ────────────────────────────────────────────────────────────── */
.mtw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 900px) { .mtw-steps { grid-template-columns: repeat(3, 1fr); } }
.mtw-step { padding: 24px; border-radius: var(--mtw-radius); background: var(--mtw-ink-2); border: 1px solid var(--mtw-ink-3); color: var(--mtw-white); }
.mtw-sec--soft .mtw-step, .mtw-sec:not(.mtw-sec--dark) .mtw-step { background: var(--mtw-white); border-color: var(--mtw-line); color: var(--mtw-black); }
.mtw-sec--dark .mtw-step { background: var(--mtw-ink-2); border-color: var(--mtw-ink-3); color: var(--mtw-white); }
.mtw-step__num { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: var(--mtw-red); color: var(--mtw-white); font: 800 1.3rem/1 var(--mtw-font-head); margin-bottom: 14px; }
.mtw-step__title { margin: 0 0 6px; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.mtw-table-wrap { overflow: hidden; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); background: var(--mtw-white); }
.mtw-table { width: 100%; border-collapse: collapse; font-size: .98rem; } /* ohne Mindestbreite und ohne Scrollbalken (Auftraggeber 2026-09-27), Zellen umbrechen */
.mtw-table th, .mtw-table td { padding: 13px clamp(12px, 3.5vw, 16px); text-align: left; border-bottom: 1px solid var(--mtw-line); vertical-align: top; }
.mtw-table thead th { background: var(--mtw-ink); color: var(--mtw-white); font-weight: 700; }
.mtw-table tbody tr:last-child td { border-bottom: 0; }
.mtw-table tbody tr:nth-child(even) td { background: var(--mtw-soft); }
.mtw-table-wrap + .mtw-small { margin-top: 10px; }
/* Verpackungsmaterial als Bildkarten ([mtw_material], Auftraggeber 2026-10-01: Produktfotos statt Tabelle). 2 x 2, Foto immer ganz sichtbar. */
.mtw-material { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Startseite (Auftraggeber 2026-10-02): auf großen Bildschirmen vier Karten in einer Reihe unter dem Text, Kartengröße wie im 2 x 2 */
@media (min-width: 1024px) { .mtw-material--reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 8px; } }
.mtw-material__item { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #000; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); }
.mtw-material__media { margin: 0; padding: 8px; background: #fff; border-bottom: 1px solid var(--mtw-line); }
.mtw-material__media picture, .mtw-material .mtw-material__media img { display: block; width: 100%; height: auto; }
.mtw-material__body { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px clamp(10px, 3vw, 16px) 14px; }
.mtw-material__name { font-weight: 700; font-size: clamp(.95rem, 4.2vw, 1.08rem); line-height: 1.25; }
.mtw-material__price { font-size: clamp(.86rem, 3.8vw, .98rem); }
.mtw-material__price strong { color: var(--mtw-red); white-space: nowrap; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.mtw-faq { display: grid; gap: 10px; }
.mtw-faq__item { background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); }
.mtw-faq__item[open] { border-color: var(--mtw-red); }
.mtw-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.mtw-faq__item summary::-webkit-details-marker { display: none; }
.mtw-faq__chev { transition: transform .2s; color: var(--mtw-red); }
.mtw-faq__item[open] .mtw-faq__chev { transform: rotate(180deg); }
.mtw-faq__a { padding: 0 20px 18px; }

/* ── CTA-Band ──────────────────────────────────────────────────────────── */
.mtw-cta { display: grid; gap: 20px; align-items: center; padding: 28px 24px; border-radius: 18px; background: var(--mtw-ink); color: var(--mtw-white); margin: 8px 0; }
@media (min-width: 900px) { .mtw-cta { grid-template-columns: 1fr auto; padding: 36px 40px; } }
.mtw-cta__title { font: 800 clamp(1.5rem, 1.2rem + 1.1vw, 2rem)/1.1 var(--mtw-font-head); margin: 0 0 6px; }
.mtw-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mtw-cta__actions .mtw-btn { overflow-wrap: anywhere; }

/* ── Kontakt, Rechtliches, Sitemap ─────────────────────────────────────── */
.mtw-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mtw-contact li { display: flex; gap: 14px; align-items: flex-start; }
.mtw-contact__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--mtw-soft); color: var(--mtw-red); display: inline-flex; align-items: center; justify-content: center; }
.mtw-contact__label { display: block; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.mtw-contact a { font-weight: 600; overflow-wrap: anywhere; }
.mtw-legal { display: grid; grid-template-columns: 1fr; gap: 2px 24px; }
@media (min-width: 640px) { .mtw-legal { grid-template-columns: 220px 1fr; } }
.mtw-legal dt { font-weight: 700; margin-top: 10px; }
@media (min-width: 640px) { .mtw-legal dt { margin-top: 0; } .mtw-legal dt, .mtw-legal dd { padding: 8px 0; border-bottom: 1px solid var(--mtw-line); } }
.mtw-legal dd { margin: 0; }
mark { background: var(--mtw-red-soft); color: var(--mtw-black); padding: 0 .2em; }
.mtw-sitemap ul { columns: 1; padding-left: 1.2em; }
@media (min-width: 768px) { .mtw-sitemap > ul { columns: 2; column-gap: 40px; } }
.mtw-sitemap li { break-inside: avoid; margin: 4px 0; }

/* ── Fliesstext (Elementor-Texteditor, Rechtstexte, Ratgeber) ──────────── */
.mtw-prose, .mtw-builder .elementor-widget-text-editor { max-width: 72ch; }
.mtw-prose > * + *, .mtw-builder .elementor-widget-text-editor > * + * { margin-top: 1em; }
.mtw-prose h2 { margin-top: 1.8em; }
.mtw-prose h3 { margin-top: 1.5em; }
.mtw-prose ul, .mtw-prose ol, .elementor-widget-text-editor ul, .elementor-widget-text-editor ol { padding-left: 1.3em; margin: 0 0 1em; }
.mtw-prose ul li, .elementor-widget-text-editor ul li { margin: .35em 0; }
.mtw-prose ul li::marker, .elementor-widget-text-editor ul li::marker { color: var(--mtw-red); }
.mtw-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .98rem; }
.mtw-prose th, .mtw-prose td { border: 1px solid var(--mtw-line); padding: 10px 12px; text-align: left; }
.mtw-prose th { background: var(--mtw-soft); }
.mtw-prose img { border-radius: var(--mtw-radius); }
.mtw-prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 5px solid var(--mtw-red); background: var(--mtw-soft); border-radius: 0 var(--mtw-radius-sm) var(--mtw-radius-sm) 0; }
.mtw-full { max-width: none; }
.elementor-widget.mtw-full { max-width: none; }
.mtw-box { padding: 22px; border-radius: var(--mtw-radius); background: var(--mtw-red-soft); border: 1px solid var(--mtw-red); }
.mtw-box > :last-child { margin-bottom: 0; }
/* Hinweis-Kasten (geschlossener Händler, 2026-10-06): im zentrierten Paket-Abschnitt linksbündig und schmal */
.mtw-box--hinweis { max-width: 760px; margin: 0 auto 20px; text-align: left; }
.mtw-box--hinweis p { margin: 0; }

/* ── Seitenkopf fuer Nicht-Elementor-Seiten ────────────────────────────── */
.mtw-pagehead { background: var(--mtw-ink); color: var(--mtw-white); padding: 48px 0 44px; }
@media (min-width: 1024px) { .mtw-pagehead { padding: 72px 0 64px; } }
.mtw-pagehead h1 { margin: .35em 0 .25em; }
.mtw-pagehead__lead { font-size: 1.15rem; max-width: 62ch; margin: 0; }
.mtw-page-body { padding-top: 48px; padding-bottom: 64px; }
.mtw-sec-plain { padding: 48px 0 64px; }
.mtw-empty { font-size: 1.1rem; }
.mtw-article__meta { background: var(--mtw-white); padding: 16px 0; border-bottom: 1px solid var(--mtw-line); }
.mtw-article__meta .mtw-container { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: var(--mtw-black); }
.mtw-article__meta span { display: inline-flex; align-items: center; gap: 7px; }
.mtw-article__meta .mtw-icon { color: var(--mtw-red); }
/* Artikel mit Beitragsbild nutzen seit 2026-10-05 den Startseiten-Hero (mtw_hero_tpl(), Block "Hero"); der Kopf mit Bild
   (.mtw-pagehead--img, 2026-10-03) ist entfernt, Backup backups/2026-10-05-hero-bilder/. */
.mtw-postcard { display: flex; flex-direction: column; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); overflow: hidden; }
.mtw-postcard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mtw-postcard__body { padding: 18px 20px 22px; }
.mtw-postcard__date { font-size: .85rem; font-weight: 700; margin: 0 0 6px; }
.mtw-postcard__title { font-size: 1.25rem; margin: 0 0 8px; }
.mtw-postcard__title a { color: var(--mtw-black); text-decoration: none; }
.mtw-postcard__title a:hover { text-decoration: underline; }
.navigation.pagination { margin-top: 36px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); color: var(--mtw-black); text-decoration: none; font-weight: 700; }
.nav-links .page-numbers.current { background: var(--mtw-ink); border-color: var(--mtw-black); color: var(--mtw-white); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.mtw-footer { background: var(--mtw-ink); color: var(--mtw-white); margin-top: 0; }
.mtw-footer a { color: var(--mtw-white); text-decoration: none; }
.mtw-footer a:hover { text-decoration: underline; color: var(--mtw-white); }
.mtw-footer__grid { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mtw-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mtw-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.mtw-footer__brand p { margin: 16px 0; font-size: .95rem; max-width: 42ch; }
.mtw-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.mtw-footer__contact li { display: flex; gap: 10px; align-items: center; }
.mtw-footer__contact .mtw-icon { color: var(--mtw-red); }
.mtw-footer__contact a { overflow-wrap: anywhere; }
.mtw-footer__title { font: 800 1.1rem/1.2 var(--mtw-font-head); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; color: var(--mtw-red); }
.mtw-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
/* Einsatzgebiete (2026-09-27): eigene Zeile ueber die volle Breite, 23 Bezirke in bis zu 3 Spalten */
.mtw-footer__areas { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--mtw-ink-3); }
.mtw-footer__menu--cols { display: block; column-gap: 40px; }
.mtw-footer__menu--cols li { break-inside: avoid; margin: 0 0 8px; }
@media (min-width: 640px) { .mtw-footer__menu--cols { columns: 2; } }
@media (min-width: 1024px) { .mtw-footer__menu--cols { columns: 3; } }
.mtw-footer__bottom { background: var(--mtw-ink-deep); font-size: .88rem; padding: 16px 0; }
.mtw-footer__bottom .mtw-container { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.mtw-footer__bottom p { margin: 0; }
.mtw-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Social-Links (Auftraggeber 2026-09-25): weisse Kacheln, Logos in Originalfarben, Links auf die Plattform-Startseiten */
.mtw-footer__bottom ul.mtw-social { gap: 10px; }
.mtw-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--mtw-white); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s; }
.mtw-social a:hover, .mtw-social a:focus-visible { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.mtw-social a:focus-visible { outline: 3px solid var(--mtw-red); outline-offset: 2px; }
.mtw-social__icon { display: block; width: 26px; height: 26px; }

/* ── Mobile CTA-Leiste: unter 768 px IMMER sichtbar (Auftraggeber 2026-09-24). Aussehen nach Referenzbild (2026-09-25):
   zwei gleich breite Felder, links Rot #dc0101 „Anrufen / Direkt sprechen“ mit Hoerer-Icon, rechts Gruen #038105
   „WhatsApp / Nachricht schreiben“ mit WhatsApp-Icon, weisse Trennlinie, Titel weiss, Unterzeile Gelb #f8e000
   (Farben aus dem Referenzbild gemessen). Icons = die hochgeladenen PNGs (assets/img/cta-*.png). Kein Formular-Button
   mehr in der Leiste (das Formular steht direkt unter dem Hero, der Kurz-CTA bleibt im Menue-Panel). ─── */
.mtw-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr; background: #dc0101; box-shadow: 0 -6px 20px rgba(0, 0, 0, .2); }
.mtw-mobilebar.has-phone.has-wa { grid-template-columns: 1fr 1fr; }
.mtw-ctabar { display: flex; align-items: center; gap: clamp(6px, 2vw, 12px); min-height: 58px; min-width: 0; padding: 8px clamp(7px, 2.2vw, 16px) calc(8px + env(safe-area-inset-bottom)); color: #fff; text-decoration: none; font-family: var(--mtw-font); transition: filter .15s; }
.mtw-ctabar--tel { background: #dc0101; }
.mtw-ctabar--wa { background: #038105; }
.mtw-ctabar:hover, .mtw-ctabar:focus-visible { color: #fff; filter: brightness(1.1); }
.mtw-ctabar:focus-visible { outline: 3px solid #f8e000; outline-offset: -5px; }
.mtw-ctabar__icon { flex: none; width: clamp(26px, 8vw, 40px); height: auto; }
.mtw-ctabar__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 2px 0 2px clamp(6px, 2vw, 12px); border-left: 1px solid #fff; line-height: 1.12; }
.mtw-ctabar__title { font-weight: 800; font-size: clamp(.95rem, 4.4vw, 1.3rem); letter-spacing: -.01em; white-space: nowrap; }
.mtw-ctabar__sub { font-weight: 600; font-size: clamp(.62rem, 3vw, .9rem); color: #f8e000; white-space: nowrap; }
/* Platz für die feste Leiste unter dem Footer: liegt in der schwarzen Footer-Unterleiste statt als weißes Body-Padding (Auftraggeber
   2026-10-06: weißer Spalt zwischen Footer und Leiste; das Body-Padding war 72 px, die Leiste nur 58 px hoch, mit iPhone-Home-Balken
   dagegen höher als 72 px = Footer-Ende verdeckt). Höhe misst main.js (--mtw-bar-h), ohne JS reicht die Schätzung; zu viel Platz
   bleibt schwarz und fällt nicht auf. */
@media (max-width: 767px) { .mtw-footer__bottom { padding-bottom: calc(16px + var(--mtw-bar-h, calc(64px + env(safe-area-inset-bottom)))); } }
@media (min-width: 768px) { .mtw-mobilebar { display: none; } }
.nav-open .mtw-mobilebar { display: none; }

/* ── Elementor-Feinschliff ─────────────────────────────────────────────── */
.mtw-builder .elementor-widget-shortcode, .mtw-builder .elementor-shortcode { width: 100%; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.mtw-sec--dark .elementor-widget-text-editor, .mtw-sec--dark .elementor-heading-title { color: var(--mtw-white); }

.mtw-btn--outline-light { background: transparent; color: var(--mtw-white); border-color: var(--mtw-white); }
.mtw-btn--outline-light:hover { background: var(--mtw-white); color: var(--mtw-black); }

/* Feinschliff nach Screenshot-Pruefung */
.e-con .elementor-widget.mtw-chip { --container-widget-width: auto; width: auto; max-width: 100%; align-self: flex-start; }
.elementor .elementor-widget.mtw-chip .elementor-heading-title { display: inline-flex; }
.mtw-split .mtw-conditions { grid-template-columns: 1fr; }

/* ── Bezirks-Slider (natives Scroll-Snap, Pfeile per JS) ───────────────── */
.mtw-slider { position: relative; }
.mtw-slider__track { list-style: none; margin: 0; padding: 4px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mtw-slider__track::-webkit-scrollbar { display: none; }
.mtw-slider__track:focus-visible { outline: 3px solid var(--mtw-red); outline-offset: 4px; border-radius: var(--mtw-radius); }
@media (min-width: 640px) { .mtw-slider__track { grid-auto-columns: calc((100% - 16px) / 2.15); } }
@media (min-width: 1024px) { .mtw-slider__track { grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; } }
.mtw-slider__slide { scroll-snap-align: start; min-width: 0; }
.mtw-bcard { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); color: var(--mtw-black); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mtw-bcard:hover { border-color: var(--mtw-red); box-shadow: var(--mtw-shadow); transform: translateY(-2px); color: var(--mtw-black); text-decoration: none; }
.mtw-bcard__top { display: flex; align-items: center; gap: 12px; }
.mtw-bcard__badge { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--mtw-red); color: var(--mtw-white); display: inline-flex; align-items: center; justify-content: center; font: 800 1.2rem/1 var(--mtw-font-head); }
.mtw-bcard__label { font: 800 .8rem/1.2 var(--mtw-font); letter-spacing: .1em; text-transform: uppercase; color: var(--mtw-red); }
.mtw-bcard__title { font: 700 1.3rem/1.2 var(--mtw-font-head); }
.mtw-bcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mtw-line); font-weight: 700; font-size: .95rem; color: var(--mtw-red); }
.mtw-bcard__foot .mtw-icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--mtw-red); color: var(--mtw-white); }
/* Bezirks-Slider „Transporter mieten“ und „Kastenwagen mieten“ (Auftraggeber 2026-09-28): 2 bis 3 Sätze, schwarz, normale Stärke, Pfeil unten rechts. */
/* Titel reserviert immer 2 Zeilen, damit die Trennlinie in allen Karten gleich hoch liegt; Text über die volle Breite, Pfeil unten rechts. */
.mtw-bcard--saetze .mtw-bcard__title { min-height: 2.4em; }
.mtw-bcard--saetze .mtw-bcard__foot { flex: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; margin-top: 0; font-weight: 400; font-size: .92rem; line-height: 1.5; color: var(--mtw-black); }
.mtw-bcard--saetze .mtw-bcard__foot .mtw-icon { flex: none; align-self: flex-end; margin-top: auto; }
.mtw-sec--soft .mtw-bcard { border-color: var(--mtw-line); }
.mtw-slider__nav { display: none; justify-content: center; gap: 12px; margin-top: 14px; }
.mtw-slider.is-ready .mtw-slider__nav { display: flex; }
.mtw-slider__btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--mtw-ink); color: var(--mtw-white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--mtw-shadow); transition: background-color .15s, transform .15s; }
.mtw-slider__btn:hover { background: var(--mtw-ink-2); transform: scale(1.05); }
.mtw-slider__btn[disabled] { background: var(--mtw-line); color: var(--mtw-black); cursor: default; transform: none; box-shadow: none; }
.mtw-icon--flip { transform: rotate(180deg); }
@media (min-width: 1024px) {
	.mtw-slider__nav { position: absolute; top: calc(50% - 5px); left: -24px; right: -24px; transform: translateY(-50%); justify-content: space-between; margin: 0; pointer-events: none; }
	.mtw-slider__btn { pointer-events: auto; }
	.mtw-slider__btn[disabled] { visibility: hidden; }
}
@media (max-width: 1023px) { .mtw-slider__track { margin-inline: calc(-1 * var(--mtw-gutter)); padding-inline: var(--mtw-gutter); scroll-padding-inline: var(--mtw-gutter); } }

/* ── Begriffs-Bildwechsler (Startseite, Auftraggeber 2026-09-27) ─────────── */
/* Karte = Bild 4:3 oben (Theme assets/img/begriffe/<slug>.webp), fehlt es: Transporter-Platzhalter auf Navy mit Punktmuster. */
.mtw-bcard--img { padding: 0; gap: 0; overflow: hidden; }
.mtw-bcard__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mtw-ink-2); }
.mtw-bcard__media.is-empty { background: url("../img/begriff-platzhalter.svg") center / 46% auto no-repeat, radial-gradient(circle, rgba(255, 255, 255, .12) 1.2px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(160deg, var(--mtw-red), var(--mtw-ink)); }
.mtw-bcard .mtw-bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mtw-bcard--img:hover .mtw-bcard__media img { transform: scale(1.04); }
.mtw-bcard__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px 18px 18px; }
.mtw-bcard--img .mtw-bcard__title { font-size: 1.22rem; }
.mtw-sec--dark .mtw-bcard { border-color: var(--mtw-ink-3); color: var(--mtw-black); }
.mtw-sec--dark .mtw-bcard:hover { border-color: var(--mtw-red); color: var(--mtw-black); }
.mtw-sec--dark .mtw-slider__btn { background: var(--mtw-red); color: var(--mtw-white); }
.mtw-sec--dark .mtw-slider__btn:hover { background: var(--mtw-red-2); }
.mtw-sec--dark .mtw-slider__btn[disabled] { background: var(--mtw-ink-3); color: var(--mtw-white); }

/* ── Autorenprofile (E-E-A-T, 2026-09-27) ──────────────────────────────── */
.mtw-autor { display: grid; gap: 24px; align-items: start; }
@media (min-width: 640px) { .mtw-autor { grid-template-columns: 180px 1fr; gap: 36px; } }
.mtw-autor__media { width: 140px; }
@media (min-width: 640px) { .mtw-autor__media { width: 180px; } }
.mtw-autor .mtw-autor__img, .mtw-autorcard .mtw-autor__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.mtw-autor__initials { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--mtw-ink); color: var(--mtw-red); font: 800 3rem/1 var(--mtw-font-head); }
.mtw-autor__text h2 { margin-top: 0; }
.mtw-autor__label { margin: 1.4em 0 .6em; font: 800 .8rem/1.2 var(--mtw-font); letter-spacing: .12em; text-transform: uppercase; color: var(--mtw-red); }
.mtw-autor__links { margin: 0; padding-left: 1.2em; }
.mtw-autor__back { margin: 28px 0 0; font-weight: 600; }
.mtw-sec-plain--soft { background: var(--mtw-soft); }
.mtw-autoren { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .mtw-autoren { grid-template-columns: 1fr 1fr; } }
.mtw-autorcard { display: flex; align-items: center; gap: 18px; height: 100%; padding: 18px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); color: var(--mtw-black); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.mtw-autorcard:hover { border-color: var(--mtw-red); box-shadow: var(--mtw-shadow); color: var(--mtw-black); text-decoration: none; }
.mtw-autorcard__media { flex: none; width: 76px; }
.mtw-autorcard .mtw-autor__initials { font-size: 1.6rem; }
.mtw-autorcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mtw-autorcard__name { font: 700 1.3rem/1.2 var(--mtw-font-head); }
.mtw-autorcard__role { font-weight: 600; color: var(--mtw-red); }
.mtw-autorcard__count { font-size: .92rem; }

/* ── Leere Abschnitte (Bewertungen/Blog ohne Inhalt) ausblenden ────────── */
.e-con.mtw-sec:has(.mtw-empty-section) { display: none; }
.mtw-slider.is-static .mtw-slider__nav { display: none; }

/* ── Bewertungen ───────────────────────────────────────────────────────── */
.mtw-reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.mtw-reviews__head h2 { margin: 0; }
/* Google-Badge im Kopf (Schriftlogo + Sterne + Zaehler) und G-Logo am Quellen-Label, Vorlage vl-installationen.at (Auftraggeber 2026-09-25) */
.mtw-reviews__badge { display: flex; align-items: center; gap: 14px; }
.mtw-reviews__badge picture { flex: none; }
/* Spezifitaet (0,2,1) noetig: Elementors `.elementor img { height: auto }` wuerde sonst das Logo in Originalgroesse (330x109) zeigen. */
.mtw-reviews img.mtw-reviews__logo { display: block; width: auto; max-width: none; height: 34px; }
@media (min-width: 640px) { .mtw-reviews img.mtw-reviews__logo { height: 38px; } }
.mtw-reviews__score { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.3; }
.mtw-reviews__score strong { white-space: nowrap; }
.mtw-google-g { flex: none; width: 16px; height: 16px; }
.mtw-stars { display: inline-flex; gap: 2px; }
.mtw-star { width: 20px; height: 20px; fill: var(--mtw-line); }
.mtw-star.is-full { fill: #f4b400; } /* Bewertungssterne bewusst gold wie bei Google */
.mtw-star.is-half { fill: #fbbc04; }
.mtw-slider--reviews .mtw-slider__track { grid-auto-columns: 85%; }
@media (min-width: 640px) { .mtw-slider--reviews .mtw-slider__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .mtw-slider--reviews .mtw-slider__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
.mtw-review { position: relative; margin: 0; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); }
.mtw-review__demo { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 3px 10px; border-radius: 99px; background: var(--mtw-ink); color: var(--mtw-white); font: 800 .72rem/1.4 var(--mtw-font); letter-spacing: .1em; text-transform: uppercase; }
.mtw-review__text { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.mtw-review__who { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--mtw-line); }
.mtw-review__who > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.mtw-review__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--mtw-ink); color: var(--mtw-white); display: inline-flex; align-items: center; justify-content: center; font: 800 1.1rem/1 var(--mtw-font-head); }
.mtw-review__meta { font-size: .88rem; }
.mtw-review__src { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--mtw-red); }
.mtw-reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.mtw-reviews__foot .mtw-small { margin: 0; max-width: 70ch; }

/* ── Blog-Bildwechsler ─────────────────────────────────────────────────── */
.mtw-slider--blog .mtw-slider__track { grid-auto-columns: 85%; }
.mtw-blogslider__more { display: flex; justify-content: center; margin-top: 24px; }
@media (min-width: 640px) { .mtw-slider--blog .mtw-slider__track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .mtw-slider--blog .mtw-slider__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
.mtw-bpost { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.mtw-bpost:hover { box-shadow: var(--mtw-shadow); transform: translateY(-2px); }
.mtw-bpost.is-draft { border-style: dashed; border-color: var(--mtw-red); }
.mtw-bpost__media { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--mtw-ink); overflow: hidden; }
.mtw-bpost__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mtw-bpost:hover .mtw-bpost__img { transform: scale(1.04); }
.mtw-bpost__noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--mtw-red); }
.mtw-bpost__noimg .mtw-icon { width: 64px; height: 64px; }
.mtw-bpost__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.mtw-bpost__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .85rem; font-weight: 600; }
.mtw-bpost__cat { padding: 3px 10px; border-radius: 99px; background: var(--mtw-red-soft); border: 1px solid var(--mtw-red); font-weight: 700; }
.mtw-bpost__title { margin: 0; font-size: 1.3rem; }
.mtw-bpost__title a { color: var(--mtw-black); text-decoration: none; }
.mtw-bpost__title a:hover { text-decoration: underline; }
.mtw-bpost__excerpt { margin: 0; font-size: .96rem; }
.mtw-bpost__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mtw-red); text-decoration: none; }
.mtw-bpost__more .mtw-icon { width: 18px; height: 18px; }
.mtw-bpost__more:hover { text-decoration: underline; }
/* ── Abschnitts-CTAs (Elementor-Button je Abschnitt) ───────────────────── */
.elementor-widget-button.mtw-sec-cta { margin-top: 8px; }
.elementor-widget-button.mtw-sec-cta .elementor-button { font-size: 1rem; }
.elementor-widget-button.mtw-sec-cta .elementor-button-text::after { content: "\2192"; margin-left: .55em; font-weight: 800; }
.elementor-widget-button.mtw-sec-cta--nav .elementor-button, .elementor-widget-button.mtw-sec-cta--contact .elementor-button { background: var(--mtw-ink); color: var(--mtw-white); }
.elementor-widget-button.mtw-sec-cta--nav .elementor-button:hover, .elementor-widget-button.mtw-sec-cta--contact .elementor-button:hover { background: var(--mtw-ink-2); color: var(--mtw-white); }
.mtw-sec--dark .elementor-widget-button.mtw-sec-cta--nav .elementor-button, .mtw-sec--dark .elementor-widget-button.mtw-sec-cta--contact .elementor-button { background: var(--mtw-white); color: var(--mtw-black); }
.elementor-widget-button.mtw-sec-cta--contact .elementor-button-text::after { content: none; }
.elementor-widget-button.mtw-sec-cta .elementor-button { white-space: normal; text-align: center; line-height: 1.25; }


/* Elementor-Buttons: eigene Form/Farben gegen Elementor-Kit-Defaults durchsetzen */
.elementor .elementor-widget-button .elementor-button { border-radius: var(--mtw-radius-sm); padding: .85em 1.4em; min-height: 48px; font: 700 1rem/1.25 var(--mtw-font); background: var(--mtw-red); color: var(--mtw-white); }
.elementor .elementor-widget-button .elementor-button:hover { background: var(--mtw-red-2); color: var(--mtw-white); }
.elementor .elementor-widget-button.mtw-sec-cta--nav .elementor-button, .elementor .elementor-widget-button.mtw-sec-cta--contact .elementor-button { background: var(--mtw-ink); color: var(--mtw-white); }
.elementor .elementor-widget-button.mtw-sec-cta--nav .elementor-button:hover, .elementor .elementor-widget-button.mtw-sec-cta--contact .elementor-button:hover { background: var(--mtw-ink-2); color: var(--mtw-white); }
.elementor .mtw-sec--dark .elementor-widget-button.mtw-sec-cta--nav .elementor-button, .elementor .mtw-sec--dark .elementor-widget-button.mtw-sec-cta--contact .elementor-button { background: var(--mtw-white); color: var(--mtw-black); }

/* ==========================================================================
   Verzierung (2026-09-24): Wellen-Uebergaenge, Punktmuster, Marker, Route, Illustrationen, Bewegung.
   Alle Animationen nur mit html.mtw-anim (main.js, nie bei "Bewegung reduzieren"); ohne JS ist alles sichtbar.
   ========================================================================== */
:root {
	--mtw-wave-h: 22px;
	--mtw-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V26C160 6 330 0 520 12S880 44 1080 36S1330 8 1440 18V48Z'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --mtw-wave-h: 30px; } }
@media (min-width: 1280px) { :root { --mtw-wave-h: 38px; } }

/* Wellen: jeder Abschnitt zeichnet oben eine Welle in seiner eigenen Farbe, die in den vorigen Abschnitt ragt.
   Gleiche Farbe hintereinander = unsichtbar. Elementor belegt nur .e-con::before (Overlay), ::after ist frei. */
.e-con.mtw-sec { --mtw-sec-bg: var(--mtw-white); background-color: var(--mtw-sec-bg); }
.e-con.mtw-sec--soft { --mtw-sec-bg: var(--mtw-soft); }
.e-con.mtw-sec--dark { --mtw-sec-bg: var(--mtw-ink); }
/* Formular-Abschnitt (Auftraggeber 2026-09-25): Verlauf von Dunkelblau oben nach Weiss unten (27.09. bis 05.10. Schwarz #111). */
.e-con.mtw-sec--form { --mtw-sec-bg: var(--mtw-white); background: linear-gradient(180deg, var(--mtw-navy) 0%, var(--mtw-white) 100%); }
.e-con.mtw-sec::after, .mtw-tsec::after, .mtw-footer::before, .mtw-pagehead::after {
	content: ""; position: absolute; left: 0; right: 0; height: var(--mtw-wave-h); pointer-events: none;
	-webkit-mask: var(--mtw-wave) center / 100% 100% no-repeat; mask: var(--mtw-wave) center / 100% 100% no-repeat;
}
.e-con.mtw-sec::after { top: calc(1px - var(--mtw-wave-h)); background: var(--mtw-sec-bg); }
/* Startseite (Auftraggeber 2026-10-05): Formular nach der Preisuebersicht, Welle oben in der Startfarbe des Verlaufs. */
.e-con.mtw-sec--form.mtw-sec--form-welle::after { background: var(--mtw-navy); }
.e-con.mtw-sec:nth-child(even)::after { transform: scaleX(-1); }
.mtw-footer { position: relative; }
.mtw-footer::before { top: calc(1px - var(--mtw-wave-h)); background: var(--mtw-ink); transform: scaleX(-1); }
/* Footer-Straße (Auftraggeber 2026-09-28): asphaltgraue Fahrbahn mit weiß strichlierter Mittellinie (bis 2026-10-06 rot auf Schwarz) knapp unter der Wellenkante, darauf fährt der Transporter von rechts
   nach links (Position je Bild per main.js auf dem Pfad .mtw-footroad__motion). Ohne JS nur die Linie. Linienbreite und Striche bleiben
   dank non-scaling-stroke bei jeder Breite gleich, obwohl die Grafik (wie die Welle) waagrecht gestreckt wird. */
.mtw-footroad { position: absolute; left: 0; right: 0; top: calc(1px - var(--mtw-wave-h)); height: var(--mtw-wave-h); z-index: 1; pointer-events: none; overflow-x: clip; }
.mtw-footroad__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mtw-footroad__line path { fill: none; stroke: var(--mtw-white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 16; vector-effect: non-scaling-stroke; }
.mtw-footroad__line .mtw-footroad__motion { stroke: none; }
.mtw-footroad__line .mtw-footroad__asphalt { fill: #5C6066; stroke: none; } /* Fahrbahn asphaltgrau statt Footer-Schwarz (Auftraggeber 2026-10-06) */
.mtw-footroad__line .mtw-footroad__meadow { fill: #58A52F; stroke: none; } /* Wiesengrün unter der Fahrbahn (Auftraggeber 2026-10-03) */
.mtw-footroad__pkg { position: absolute; left: 0; top: 0; width: 16px; visibility: hidden; will-change: transform; }
.mtw-footroad__pkg svg { display: block; width: 100%; height: auto; }
.mtw-footroad__van { position: absolute; left: 0; top: 0; width: 64px; transform-origin: 50% 100%; visibility: hidden; will-change: transform; }
.mtw-footroad.is-ready .mtw-footroad__van { visibility: visible; }
.mtw-footroad__van svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .mtw-footroad__van { width: 48px; } .mtw-footroad__pkg { width: 12px; } }
/* Footer-Inhalt beginnt unter der Wiese (tiefster Punkt 108 von 48 Einheiten = 1,25 Wellenhöhen unter der Footer-Oberkante). */
.mtw-footer .mtw-footer__grid { padding-top: calc(1.25 * var(--mtw-wave-h) + 34px); }
.mtw-pagehead { position: relative; }
.mtw-pagehead::after { bottom: -1px; background: var(--mtw-white); }

/* Dezentes Punktmuster in den hellblauen Abschnitten (Karten darauf bleiben weiss). */
.e-con.mtw-sec--soft, .mtw-tsec--soft { background-image: radial-gradient(rgba(0, 0, 0, .07) 1.3px, transparent 1.8px); background-size: 22px 22px; background-position: 11px 11px; }

/* Marker: ein Schluesselwort pro Ueberschrift (mtw_highlight). Hell = gelber Streifen, dunkel = gelbe Schrift. */
.mtw-hl { color: var(--mtw-red); background-image: linear-gradient(var(--mtw-red), var(--mtw-red)); background-position: 0 100%; background-size: 100% .09em; background-repeat: no-repeat; padding-bottom: .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* seit 2026-09-27 rot mit Unterstrich: ein roter Marker-Balken hinter schwarzer Schrift sah durchgestrichen aus */
.mtw-hero .mtw-hl, .mtw-sec--dark .mtw-hl, .mtw-pagehead .mtw-hl, .mtw-footer .mtw-hl { background-image: none; color: var(--mtw-red); padding: 0; margin: 0; }
/* Rot im Hero (2026-09-27): Rot ist etwa so hell wie der Sonnenuntergang im Foto, deshalb dunkler Schatten um Preiszeile
   und Schluesselwort (vorher Gelb, das heller als der Himmel war). */
.mtw-hero .mtw-hl { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 10px rgba(0, 0, 0, .7), 0 0 22px rgba(0, 0, 0, .45); }
.mtw-hero__price { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .3); }
.mtw-anim .mtw-sec .mtw-hl { background-size: 0 .09em; transition: background-size .9s cubic-bezier(.2, .7, .2, 1) .35s; }
.mtw-anim .mtw-sec.is-in .mtw-hl { background-size: 100% .09em; }

/* Vorteils-Kacheln: sanftes Anheben beim Hover (Foto-Karten, Basis-Layout weiter oben). */
.mtw-usp { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.mtw-usp:hover { transform: translateY(-3px); box-shadow: var(--mtw-shadow); border-color: var(--mtw-red); }
.mtw-usp:hover .mtw-usp__media img { transform: scale(1.03); }
.mtw-usp__media img { transition: transform .3s ease; }

/* Ablauf als Route: Stationen auf einer gestrichelten Strasse, mobil senkrecht verbunden. */
.mtw-route { position: relative; --mtw-route-gap: 24px; --mtw-route-line: var(--mtw-red); --mtw-route-road: var(--mtw-ink); }
.mtw-sec--dark .mtw-route { --mtw-route-line: var(--mtw-red); --mtw-route-road: var(--mtw-ink-3); }
.mtw-route .mtw-steps { position: relative; gap: var(--mtw-route-gap); }
.mtw-route .mtw-steps .mtw-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; align-items: start; align-content: start; padding: 0; background: none; border: 0; }
.mtw-route .mtw-steps .mtw-step__num { position: relative; z-index: 2; width: 56px; height: 56px; margin: 0; border-radius: 50%; box-shadow: 0 0 0 6px var(--mtw-sec-bg, var(--mtw-white)); }
.mtw-route .mtw-step__card { padding: 20px 22px; border-radius: var(--mtw-radius); background: var(--mtw-white); border: 1px solid var(--mtw-line); color: var(--mtw-black); }
.mtw-sec--dark .mtw-route .mtw-step__card { background: var(--mtw-ink-2); border-color: var(--mtw-ink-3); color: var(--mtw-white); }
.mtw-route .mtw-step__card p { margin: 0; }
.mtw-route .mtw-steps .mtw-step:not(:last-child)::after { content: ""; position: absolute; left: 26px; top: 66px; bottom: calc(10px - var(--mtw-route-gap)); width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--mtw-route-line) 0 10px, transparent 10px 18px); }
.mtw-route__road { display: none; }
@media (min-width: 900px) {
	.mtw-route .mtw-steps .mtw-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; justify-items: center; gap: 22px; text-align: center; }
	.mtw-route .mtw-steps .mtw-step:not(:last-child)::after { display: none; }
	.mtw-route .mtw-step__card { width: 100%; height: 100%; }
	.mtw-route__road {
		display: block; position: absolute; z-index: 1; top: 20px; height: 16px; border-radius: 8px;
		left: calc((100% - 2 * var(--mtw-route-gap)) / 6); right: calc((100% - 2 * var(--mtw-route-gap)) / 6);
		background: repeating-linear-gradient(90deg, var(--mtw-red) 0 18px, transparent 18px 34px) center / 100% 3px no-repeat, var(--mtw-route-road);
	}
	.mtw-route__van { position: absolute; bottom: 6px; left: calc(100% - 112px); width: 72px; height: 34px; }
	.mtw-anim .mtw-route__van { left: 40px; }
	.mtw-anim .mtw-route.is-driving .mtw-route__van { left: calc(100% - 112px); transition: left 3.2s cubic-bezier(.45, .05, .35, 1) .2s; }
}


/* Scroll-Einblendung: nur Abschnitte, die beim Laden unterhalb des sichtbaren Bereichs liegen (main.js). */
.mtw-anim .mtw-reveal > .e-con-inner { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.mtw-anim .mtw-reveal.is-in > .e-con-inner { opacity: 1; transform: none; }
.mtw-anim .mtw-reveal :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.mtw-anim .mtw-reveal.is-in :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > * { opacity: 1; transform: none; }
.mtw-anim .mtw-reveal.is-in :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > :nth-child(2) { transition-delay: .08s; }
.mtw-anim .mtw-reveal.is-in :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > :nth-child(3) { transition-delay: .16s; }
.mtw-anim .mtw-reveal.is-in :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > :nth-child(4) { transition-delay: .24s; }
.mtw-anim .mtw-reveal.is-in :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > :nth-child(n+5) { transition-delay: .3s; }
@media print { .mtw-anim .mtw-reveal > .e-con-inner, .mtw-anim .mtw-reveal :is(.mtw-grid, .mtw-usps, .mtw-steps, .mtw-packages) > * { opacity: 1; transform: none; } }



/* Nach-oben-Button: immer sichtbar, auch bei Scrollposition 0 (Auftraggeber 2026-09-24).
   Dunkelblau mit weissem Ring, damit er auf hellen und dunklen Abschnitten erkennbar bleibt.
   Mobil sitzt er ueber der immer sichtbaren Anfrage-Leiste (Geschwister-Selektor, kein JS noetig). */
.mtw-totop { position: fixed; right: var(--mtw-gutter); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 89; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mtw-ink); color: var(--mtw-white); box-shadow: 0 0 0 2px var(--mtw-white), 0 6px 18px rgba(0, 0, 0, .28); text-decoration: none; transition: bottom .2s ease, background-color .15s ease, transform .15s ease; }
.mtw-totop .mtw-icon { width: 22px; height: 22px; }
.mtw-totop:hover { background: var(--mtw-red); color: var(--mtw-white); transform: translateY(-2px); }
.mtw-totop:focus-visible { outline: 3px solid var(--mtw-red); outline-offset: 3px; }
@media (min-width: 768px) { .mtw-totop { right: 24px; bottom: 24px; width: 50px; height: 50px; } }
@media (max-width: 767px) { .mtw-mobilebar ~ .mtw-totop { bottom: calc(80px + env(safe-area-inset-bottom)); } }
.nav-open .mtw-totop { display: none; }
@media print { .mtw-totop { display: none; } }

/* ── Theme-Abschnitte (Auftraggeber 2026-09-27) ─────────────────────────────
   Ratgeber-Artikel, Ratgeber-Uebersicht, Kategorien, Autoren: Kopf, Formular, Preisuebersicht wie auf den Elementor-Seiten
   (template-parts/top-sections.php). Auf jeder Seite direkt ueber dem Footer: Google Maps + Blog (bottom-sections.php).
   Gleiche Wellen wie .e-con.mtw-sec: jede Fläche zeichnet oben eine Welle in ihrer Farbe. */
.mtw-tsec { position: relative; --mtw-sec-bg: var(--mtw-white); background-color: var(--mtw-sec-bg); padding: 56px 0 64px; }
@media (min-width: 1024px) { .mtw-tsec { padding: 88px 0; } }
.mtw-tsec--soft { --mtw-sec-bg: var(--mtw-soft); }
/* Dunkler Theme-Abschnitt (2026-10-06: „Fahrzeuge und Anlässe“ über dem Blog). Trägt zusätzlich .mtw-sec--dark, damit Karten, Slider-Pfeile,
   Dachzeile und Marker die Regeln der dunklen Elementor-Abschnitte bekommen. */
.mtw-tsec--dark { --mtw-sec-bg: var(--mtw-ink); color: var(--mtw-white); }
.mtw-tsec--dark h2, .mtw-tsec--dark .mtw-lead { color: var(--mtw-white); }
.mtw-tsec--dark .mtw-lead a { color: var(--mtw-white); }
.mtw-tsec--flush { padding: 0; }
.mtw-tsec::after { top: calc(1px - var(--mtw-wave-h)); background: var(--mtw-sec-bg); }
.mtw-tsec--map::after { transform: scaleX(-1); }
.mtw-tsec--form { background: linear-gradient(180deg, var(--mtw-navy) 0%, var(--mtw-white) 100%); padding: 28px 0 56px; }
@media (min-width: 1024px) { .mtw-tsec--form { padding: 56px 0 72px; } }
.mtw-tsec--form::after, .mtw-tsec--nowave::after, .mtw-pagehead--nowave::after { display: none; }
/* Ratgeber-Artikel (Auftraggeber 2026-10-05): Formular nach der Preisuebersicht, Welle oben in der Startfarbe des Verlaufs. */
.mtw-tsec--form.mtw-tsec--form-welle::after { display: block; background: var(--mtw-navy); }
.mtw-tsec__head { max-width: 760px; margin: 0 auto 28px; }
.mtw-tsec__head h2 { margin: .2em 0 .35em; }
.mtw-tsec__head .mtw-lead { margin: 0 auto; max-width: 62ch; }
/* Nicht zentrierte Startseiten-Abschnitte im Theme (Bewertungen im Artikel, „Fahrzeuge und Anlässe“ über dem Blog) linksbündig am
   Containerrand wie in Elementor, statt als schmaler Block in der Mitte (2026-10-06). */
.mtw-tsec--abschnitt .mtw-tsec__head:not(.mtw-center), .mtw-tsec--abschnitt .mtw-tsec__head:not(.mtw-center) .mtw-lead { margin-left: 0; }
.mtw-article__cta { padding-bottom: 56px; }
/* Startseiten-Abschnitte im Ratgeber-Artikel (Auftraggeber 2026-10-05, mtw_artikel_abschnitt): Lead und Button wie die Elementor-Fassung. */
.mtw-tsec__lead { font-size: 1.15rem; }
.mtw-tsec__lead p { margin: 0; }
.mtw-tsec__lead p + p { margin-top: .6em; }
.mtw-tsec__cta { margin: 28px 0 0; }
.mtw-tsec__cta .mtw-btn { font-size: 1rem; white-space: normal; line-height: 1.25; }
.mtw-tsec__cta-text::after { content: "\2192"; margin-left: .55em; font-weight: 800; }   /* Pfeil fließt mit dem Text (zweizeilig bei 344 px) */
.mtw-page-body--weiter > h2:first-child { margin-top: 0; }

/* Google Maps: Zwei-Klick-Loesung, das iframe kommt erst nach Klick (main.js), vorher nur diese Flaeche. */
.mtw-map__head { max-width: 760px; margin-bottom: 24px; }
.mtw-map__head h2 { margin: .2em 0 .35em; }
.mtw-map__head p:last-child { margin: 0; }
/* Mobil feste Hoehe statt aspect-ratio + min-height (das zusammen erzwang 427 px Breite bei 344 px Bildschirm). */
.mtw-map { position: relative; width: 100%; height: 400px; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); overflow: hidden;
	background: linear-gradient(var(--mtw-line) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--mtw-line) 1px, transparent 1px) 0 0 / 44px 44px, var(--mtw-soft); }
@media (min-width: 768px) { .mtw-map { height: auto; aspect-ratio: 21 / 9; } }
.mtw-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mtw-map__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.mtw-map__pin { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mtw-white); border: 1px solid var(--mtw-line); box-shadow: var(--mtw-shadow); color: var(--mtw-red); }
.mtw-map__pin .mtw-icon { width: 32px; height: 32px; }
.mtw-map__note { max-width: 52ch; margin: 0; padding: 10px 14px; border-radius: var(--mtw-radius-sm); background: var(--mtw-white); color: var(--mtw-black); font-size: .95rem; }
.mtw-map__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.mtw-map__open { font-weight: 700; color: var(--mtw-red); background: var(--mtw-white); padding: 4px 8px; border-radius: 6px; }

/* ── Startseite: drei Kartenabschnitte nach Referenzgrafiken (Auftraggeber 2026-09-28) ──────────────────────────
   [mtw_lieferungen] Händlerkarten (Foto, Logo, Text, Pfeil), [mtw_einsaetze] Einsatzkarten mit Route, [mtw_einzelmoebel] Möbelkacheln.
   Referenz war blau, hier in den Markenfarben: Pfeil-/Icon-Kreise rot auf Rot-hell, Text rein Schwarz. */
.mtw-shops__list, .mtw-shops__usps, .mtw-jobs, .mtw-items { list-style: none; margin: 0; padding: 0; }
.mtw-shop, .mtw-job, .mtw-item { position: relative; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius); overflow: hidden; color: var(--mtw-black); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mtw-shop:hover, .mtw-job:hover, .mtw-item:hover { border-color: var(--mtw-red); box-shadow: var(--mtw-shadow); transform: translateY(-2px); color: var(--mtw-black); text-decoration: none; }
.mtw-shop__go, .mtw-job__go, .mtw-item__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mtw-red-soft); color: var(--mtw-red); transition: background-color .15s, color .15s; }
.mtw-shop__go .mtw-icon, .mtw-job__go .mtw-icon, .mtw-item__go .mtw-icon { width: 20px; height: 20px; }
.mtw-shop:hover .mtw-shop__go, .mtw-job:hover .mtw-job__go, .mtw-item:hover .mtw-item__go { background: var(--mtw-red); color: var(--mtw-white); }
/* Doppelte Klasse, sonst gewinnt Elementors .elementor img { height: auto } und das Foto füllt die Karte nicht. */
.mtw-shop .mtw-shop__photo img, .mtw-job .mtw-job__photo img, .mtw-item .mtw-item__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Händlerkarten: unter 768 px zwei Spalten, Foto oben (Filiale ganz sichtbar), Pfeil rechts oben auf dem Foto;
   768 bis 1023 px eine Spalte in einer Zeile wie die Referenz (Foto | Logo | Text | Pfeil);
   ab 1024 px zwei Spalten, Foto links, rechts Logo + Pfeil, darunter Titel und Text. */
/* Kopf wie Referenz (Auftraggeber 2026-09-28): Text links, Transporter rechts bis an den Bildschirmrand, links und oben weich
   ausgeblendet, unten bündig auf den Karten. Das Bild ist die zweite Spalte des Elementor-Splits, hier absolut positioniert.
   Unter 560 px feste Breite unten rechts neben dem Lead; ab 560 px so hoch wie der Kopf (Breite aus dem Seitenverhältnis).
   Lead-Breite braucht die lange Kette: Elementor setzt .elementor.elementor .e-con > .elementor-widget { max-width: 100% }. */
.e-con.mtw-sec--lieferungen { overflow-x: clip; }
.e-con.mtw-sec--lieferungen .e-con.mtw-split.e-con-full { position: relative; display: block; }
.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:first-child { position: relative; z-index: 1; }
.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:last-child { --width: auto; position: absolute; z-index: 0; right: calc(50% - 50vw); bottom: 0; width: 62vw; aspect-ratio: 6 / 5; pointer-events: none; }
.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:last-child :is(.elementor-widget, .elementor-shortcode) { width: 100%; height: 100%; }
.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col > .elementor-widget.mtw-lead { max-width: 55%; font-size: 1rem; }
.mtw-shops__hero { width: 100%; height: 100%; margin: 0; }
figure.mtw-shops__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; border-radius: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 28%); -webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 28%); mask-composite: intersect; }
@media (min-width: 560px) {
	.e-con.mtw-sec--lieferungen .e-con.mtw-split.e-con-full { min-height: 300px; }
	.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:last-child { top: 0; width: auto; }
	.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col > .elementor-widget.mtw-lead { max-width: 58%; font-size: 1.05rem; }
}
@media (min-width: 1024px) {
	.e-con.mtw-sec--lieferungen .e-con.mtw-split.e-con-full { min-height: 360px; }
	.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:first-child { max-width: 60%; }
	.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col:last-child { top: -56px; }
	.e-con.mtw-sec--lieferungen .e-con.mtw-split > .e-con.mtw-col > .elementor-widget.mtw-lead { max-width: none; font-size: 1.15rem; }
}
.mtw-shops__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.mtw-shop { display: flex; flex-direction: column; height: 100%; }
.mtw-shop__photo { position: relative; aspect-ratio: 16 / 10; background: var(--mtw-soft); }
.mtw-shop__logo { display: flex; align-items: center; min-height: 36px; margin: 10px 12px 0; }
.mtw-shop__logo img { max-width: 100%; height: auto; }
.mtw-shop__go { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: var(--mtw-white); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.mtw-shop__go .mtw-icon { width: 16px; height: 16px; }
.mtw-shop__text { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 14px; }
.mtw-shop__title { font: 800 1.08rem/1.15 var(--mtw-font-head); }
.mtw-shop__desc { font-size: .84rem; line-height: 1.4; }
@media (min-width: 560px) { .mtw-shops__list { gap: 16px; } .mtw-shop__title { font-size: 1.2rem; } .mtw-shop__desc { font-size: .92rem; } }
@media (min-width: 768px) {
	.mtw-shops__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.mtw-shop { display: grid; grid-template-columns: 210px 150px minmax(0, 1fr) 44px; grid-template-areas: "photo logo text go"; column-gap: 20px; padding-right: 18px; }
	.mtw-shop__photo { grid-area: photo; aspect-ratio: auto; min-height: 124px; }
	.mtw-shop__logo { grid-area: logo; justify-content: center; margin: 0; }
	.mtw-shop__go { grid-area: go; position: static; align-self: center; width: 40px; height: 40px; background: var(--mtw-red-soft); box-shadow: none; }
	.mtw-shop__go .mtw-icon { width: 20px; height: 20px; }
	.mtw-shop__text { grid-area: text; align-self: center; padding: 14px 0; }
	.mtw-shop__title { font-size: 1.3rem; }
	.mtw-shop__desc { font-size: .98rem; }
}
@media (min-width: 1024px) {
	.mtw-shops__list { grid-template-columns: 1fr 1fr; gap: 18px; }
	.mtw-shop { grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; grid-template-areas: "photo logo go" "photo text text"; column-gap: 18px; }
	.mtw-shop__photo { min-height: 150px; }
	.mtw-shop__logo { justify-content: flex-start; align-self: end; min-height: 40px; margin-top: 14px; }
	.mtw-shop__go { align-self: start; margin-top: 14px; }
	.mtw-shop__text { align-self: start; padding: 8px 0 14px; }
	.mtw-shop__desc { font-size: .95rem; }
}
.mtw-shops__cta { margin: 28px auto 0; max-width: 760px; }
.mtw-shops__cta .mtw-btn { width: 100%; min-height: 60px; gap: .7em; font-size: 1.15rem; }
.mtw-shops__cta .mtw-btn .mtw-icon { flex: none; width: 24px; height: 24px; }
@media (max-width: 399px) { .mtw-shops__cta .mtw-btn { font-size: 1.02rem; } .mtw-shops__cta .mtw-btn .mtw-icon:first-child { display: none; } }
.mtw-shops__usps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px auto 0; max-width: 900px; }
.mtw-shops__usps li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: .9rem; line-height: 1.3; }
.mtw-shops__ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mtw-red-soft); color: var(--mtw-red); }
.mtw-shops__ic .mtw-icon { width: 24px; height: 24px; }
@media (min-width: 640px) { .mtw-shops__usps li { flex-direction: row; justify-content: center; text-align: left; font-size: 1rem; } .mtw-shops__ic { width: 54px; height: 54px; } }
.mtw-shops__note { margin: 20px 0 0; font-size: .8rem; line-height: 1.45; text-align: center; }

/* Einsatzkarten: mobil Foto oben, ab 560 px Foto links (wie Referenz), ab 1024 px zwei Spalten. */
.mtw-jobs { display: grid; gap: 16px; margin-top: 8px; text-align: left; }
@media (min-width: 1024px) { .mtw-jobs { grid-template-columns: 1fr 1fr; gap: 20px; } }
.mtw-job { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.mtw-job__photo { position: relative; aspect-ratio: 16 / 10; background: var(--mtw-soft); }
.mtw-job__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 20px; }
.mtw-job__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 4px; border-radius: 50%; background: var(--mtw-red-soft); color: var(--mtw-red); }
.mtw-job__icon .mtw-icon { width: 28px; height: 28px; }
.mtw-job__go { position: absolute; top: 16px; right: 16px; }
.mtw-job__title { font: 800 1.35rem/1.15 var(--mtw-font-head); }
.mtw-job__text { font-size: .98rem; line-height: 1.45; }
@media (min-width: 560px) {
	.mtw-job { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
	.mtw-job__photo { aspect-ratio: auto; min-height: 230px; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .mtw-job__title { font-size: 1.22rem; } .mtw-job__body { padding: 14px 14px 18px; } .mtw-job__go { top: 14px; right: 14px; } }

/* Möbelkacheln: Bildstreifen oben, darunter Name + „Transport Wien“, Pfeil rechts. 2/3/4 Spalten, letzte Reihe zentriert.
   Mobil steht der Name über die volle Breite (lange Wörter wie „Geschirrspüler“ bei 344 px), der Pfeil neben „Transport Wien“. */
.mtw-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; text-align: left; }
.mtw-items > li { flex: 0 0 calc((100% - 12px) / 2); min-width: 0; }
@media (min-width: 768px) { .mtw-items { gap: 16px; } .mtw-items > li { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (min-width: 1024px) { .mtw-items { gap: 18px; } .mtw-items > li { flex-basis: calc((100% - 3 * 18px) / 4); } }
.mtw-item { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "name" "sub"; height: 100%; }
.mtw-item__photo { grid-area: photo; position: relative; aspect-ratio: 3 / 1; background: var(--mtw-soft); }
.mtw-item__photo.is-empty { display: flex; align-items: center; justify-content: center; color: var(--mtw-red); }
.mtw-item__photo.is-empty .mtw-icon { width: 30%; max-width: 64px; height: 70%; }
.mtw-item__body { display: contents; }
.mtw-item__name { grid-area: name; padding: 9px 10px 0 12px; font: 800 1.05rem/1.2 var(--mtw-font-head); }
.mtw-item__sub { grid-area: sub; padding: 0 10px 10px 12px; font-size: .88rem; line-height: 1.3; }
/* Mobil sitzt der Pfeil rechts oben auf dem Bildstreifen, damit Name und „Transport Wien“ die volle Breite haben. */
.mtw-item__go { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: var(--mtw-white); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.mtw-item__go .mtw-icon { width: 16px; height: 16px; }
@media (min-width: 768px) {
	.mtw-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "photo photo" "name go" "sub go"; column-gap: 10px; }
	.mtw-item__photo { aspect-ratio: 4 / 1; }
	.mtw-item__name { padding: 12px 0 0 16px; font-size: 1.15rem; }
	.mtw-item__sub { align-self: start; padding: 0 0 14px 16px; font-size: .95rem; }
	.mtw-item__go { position: static; grid-area: go; align-self: center; width: 38px; height: 38px; margin: 0 14px 0 0; background: var(--mtw-red-soft); box-shadow: none; }
	.mtw-item__go .mtw-icon { width: 18px; height: 18px; }
}

/* ── Suchbegriff-Kästchen der Händlerseiten (Auftraggeber 2026-10-01): Theme-Abschnitt direkt über dem Footer, 1 Spalte, ab 768 px 2 ── */
.mtw-kaestchen { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; text-align: left; }
@media (min-width: 768px) { .mtw-kaestchen { grid-template-columns: 1fr 1fr; gap: 16px; } }
/* Händlerlogo: unter 1024 px eigene Zeile über Symbol und Titel, ab 1024 px rechts neben dem Titel (schmale Kästchen bei 344 px, sonst bräche „Miettransporter“) */
.mtw-kasten { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "text text"; align-items: center; align-content: start; gap: 10px 14px; padding: 18px 20px 20px; background: var(--mtw-white); border: 1px solid var(--mtw-line); border-top: 4px solid var(--mtw-red); border-radius: var(--mtw-radius-sm); box-shadow: var(--mtw-shadow); }
.mtw-kasten__icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mtw-red-soft); color: var(--mtw-red); }
.mtw-kasten__icon .mtw-icon { width: 24px; height: 24px; }
.mtw-kasten__title { grid-area: title; margin: 0; font: 800 1.3rem/1.15 var(--mtw-font-head); color: var(--mtw-black); }
.mtw-kasten__text { grid-area: text; margin: 0; font-size: .98rem; line-height: 1.5; color: var(--mtw-black); }
.mtw-kaestchen__cta { margin: 28px 0 0; text-align: center; }
.mtw-kasten--logo { grid-template-areas: "logo logo" "icon title" "text text"; }   /* nur Händlerseiten; Einzelmöbel ohne Logo-Zeile */
.mtw-kasten__logo { grid-area: logo; display: flex; align-items: center; min-height: 28px; }
.mtw-kasten__logo img { display: block; max-width: 100%; height: auto; }
@media (min-width: 1024px) {
	.mtw-kasten--logo { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title logo" "text text text"; }
	.mtw-kasten__logo { justify-content: flex-end; }
}
.mtw-kaestchen__note { margin: 20px auto 0; max-width: 62ch; font-size: .8rem; line-height: 1.45; text-align: center; color: var(--mtw-black); }

/* Inhaltsverzeichnis der Ratgeber-Artikel (Rank-Math-Block, 2026-10-05; Rank-Math-CSS ist abgemeldet) */
.mtw-prose .mtw-toc { margin: 1.4em 0; padding: 18px 22px; background: var(--mtw-soft); border-left: 5px solid var(--mtw-red); border-radius: 0 var(--mtw-radius-sm) var(--mtw-radius-sm) 0; }
.mtw-prose .mtw-toc > p { margin: 0 0 .4em; font-weight: 700; color: #000; }
.mtw-prose .mtw-toc ul { margin: 0; padding-left: 1.2em; }
.mtw-prose .mtw-toc li { margin: .3em 0; }

/* ── Cookie-Banner (consent.php, Launch 2026-10-06) ────────────────────── */
/* Mobil über der Anruf/WhatsApp-Leiste (die bleibt bedienbar), ab 768 px Kasten unten links. Nicht modal, keine Cookie-Wall. */
.mtw-consent { position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--mtw-bar-h, calc(64px + env(safe-area-inset-bottom)))); z-index: 95; max-height: calc(100vh - 24px - var(--mtw-bar-h, 64px)); overflow-y: auto; background: var(--mtw-white); color: var(--mtw-black); border-top: 4px solid var(--mtw-red); border-radius: var(--mtw-radius); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); padding: 16px 16px 12px; font-size: .9rem; line-height: 1.45; }
.mtw-consent[hidden], .mtw-consent__opts[hidden] { display: none; }
@media (min-width: 768px) { .mtw-consent { left: 24px; right: auto; bottom: 24px; width: min(480px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 20px 22px 14px; } }
.mtw-consent__title { font: 800 1.2rem/1.2 var(--mtw-font-head); margin: 0 0 12px; }
.mtw-consent__text { margin: 0 0 12px; }
.mtw-consent a { color: var(--mtw-red); text-decoration: underline; }
.mtw-consent__opts { display: grid; gap: 8px; margin: 0 0 12px; }
.mtw-consent__opt { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--mtw-line); border-radius: var(--mtw-radius-sm); cursor: pointer; }
.mtw-consent__opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mtw-red); }
.mtw-consent__opt strong { display: block; }
.mtw-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mtw-consent__actions .mtw-btn { flex: 1 1 130px; min-height: 44px; padding: .65em 1em; }
/* „Nur notwendige“ in gedämpftem Rot (Auftraggeber 2026-10-06), weiter gefüllt und gleich groß wie „Alle akzeptieren“. Kontrast zu Weiß 5,5:1. */
.mtw-consent__actions [data-consent="keine"] { background: #AD4A52; color: var(--mtw-white); }
.mtw-consent__actions [data-consent="keine"]:hover, .mtw-consent__actions [data-consent="keine"]:focus-visible { background: #933C43; color: var(--mtw-white); }
.mtw-consent__more { flex: 1 1 100%; min-height: 40px; background: none; border: 0; padding: 4px; font: 600 .9rem/1.2 var(--mtw-font); color: var(--mtw-black); text-decoration: underline; cursor: pointer; }
.mtw-consent__more:focus-visible, .mtw-footer__consent:focus-visible { outline: 3px solid var(--mtw-red); outline-offset: 2px; }
@media (max-width: 767px) { .consent-open .mtw-totop { display: none; } }
.mtw-footer__legalwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.mtw-footer__consent { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* Ab 768 px sitzt der Nach-oben-Button (50 px, 24 px vom Rand) unten rechts über der Leiste: rechts Platz lassen. */
@media (min-width: 768px) { .mtw-footer__bottom .mtw-container { padding-right: calc(var(--mtw-gutter) + 66px); } }
.mtw-footer__consent[hidden] { display: none; }
/* reCAPTCHA v3: Badge auf Wunsch des Auftraggebers ausgeblendet (2026-10-06), Hinweistext unter dem Formular ist ebenfalls entfernt.
   visibility statt display:none, sonst funktioniert die Prüfung nicht zuverlässig. Achtung: Google verlangt Badge ODER Hinweis. */
.grecaptcha-badge { visibility: hidden !important; }
@media print { .mtw-consent { display: none; } }