/* Taulant Hausmeisterservice, Fassung 2 ("Die Kante"), Stand 4 nach Nikolas' Review.
   Tokens nach der Awwwards-Code-Studie (awwwards-motion): eine Grotesk in zwei Breiten plus Mono, Papier und Tinte als
   Flächen, die beim Scrollen ineinander übergehen (Farbwechsel am Body), ein Akzent auf höchstens drei Rollen, Haarlinien
   statt Kästen, Radius 0 (Knöpfe als Pille), Medien bis an den Rand, drei Kurven, drei Dauern. Keine Labels über Überschriften. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geistmono-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #141513;
  --paper: #EEECE4;
  --accent: #C8E24F;
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: color-mix(in srgb, currentColor 60%, transparent);   /* currentColor wird am Ort der Nutzung aufgelöst, nicht hier */
  --hair: color-mix(in srgb, currentColor 18%, transparent);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-hero: clamp(2.4rem, 8.9vw, 9.6rem);
  --text-h2: clamp(2.1rem, 5.2vw, 5.4rem);
  --text-h3: clamp(1.3rem, 2vw, 2rem);
  --text-body: clamp(.9375rem, 1.05vw, 1.0625rem);
  --text-label: .75rem;
  --lh-display: .94;
  --ls-display: -.025em;
  --lh-body: 1.4;
  --wdth: 112%;
  --margin: clamp(1rem, 2.8vw, 3rem);
  --gutter: clamp(1rem, 1.6vw, 1.5rem);
  --section: clamp(4.5rem, 8vw, 8rem);
  --nav-h: 4.5rem;
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --dur-fast: .35s;
  --dur: .6s;
  --dur-slow: 1.1s;
  --theme: .9s;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: auto; scroll-padding-top: var(--nav-h); }
body { margin: 0; font-family: var(--font); font-size: var(--text-body); line-height: var(--lh-body); background: var(--bg); color: var(--fg); overscroll-behavior-y: none; transition: background-color var(--theme) var(--ease-out), color var(--theme) var(--ease-out); }
/* Die Fläche der Seite wechselt mit dem Abschnitt (Klasse am Body, von ScrollTrigger gesetzt). Abschnitte selbst sind durchsichtig. */
body.t-dark { --bg: var(--ink); --fg: var(--paper); }
body.t-accent { --bg: var(--accent); --fg: var(--ink); }
img, video, svg { display: block; max-width: 100%; }
img { width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; max-width: 44ch; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
a[href], button { scroll-margin-top: calc(var(--nav-h) + 1rem); scroll-margin-bottom: 1rem; }

.mono { font-family: var(--mono); font-size: var(--text-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.display { font-weight: 500; font-stretch: var(--wdth); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); font-stretch: 100%; line-height: 1.08; letter-spacing: -.015em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 200; padding: .75rem 1rem; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: .08em; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out); }
.skip:focus { transform: none; }

/* Flächen und Raster */
section, footer { position: relative; padding: var(--section) var(--margin); }
.head { margin-bottom: clamp(2.5rem, 5vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.head .h2 { max-width: 14ch; }
.head .lede { margin-top: 1.5rem; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.35; max-width: 40ch; }

/* Maskierte Zeilen (SplitText mask:"lines" erzeugt .line-mask um jede .line). Flex-Spalte erst nach dem Teilen (onSplit), vor dem Messen weg (onRevert). */
.js .split { visibility: hidden; }
.line-mask { padding: .09em .04em .14em; margin: -.09em -.04em -.14em; }
.split.is-split { display: flex; flex-direction: column; align-items: flex-start; }
.js .rise, .js .clip img { visibility: hidden; }
.js .rise:focus-within { visibility: visible !important; opacity: 1 !important; transform: none !important; }
.clip { overflow: hidden; margin: 0; }
.clip picture { display: block; height: 100%; }
.clip img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.no-js .loader { display: none; }
.loader__count { position: absolute; left: var(--margin); bottom: var(--margin); font-size: clamp(3rem, 8vw, 9rem); line-height: .8; letter-spacing: -.04em; font-weight: 500; font-stretch: var(--wdth); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .15em; }
.loader__count small { font-size: .22em; letter-spacing: 0; opacity: .6; font-weight: 400; font-stretch: 100%; }
.loader__bar { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) - .75rem); height: 1px; background: rgba(238,236,228,.15); }
.loader__bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* Marke: Haus mit Blatt. Kopf und Loader tragen dasselbe Lockup in denselben Proportionen (Marke : Lücke : Schrift = 40 : 12 : 15,2), damit der Flug landet. */
.lockup { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; font-stretch: var(--wdth); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.lockup .mark { width: 1em; height: 1em; flex: none; }
.lockup__word { display: grid; font-size: .38em; line-height: 1; gap: .06em; }
.loader__mark { font-size: clamp(5rem, 12vw, 9rem); }
.loader .mark__house, .loader .mark__rib { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader .mark__leaf { opacity: 0; }   /* kein CSS-transform: beim SVG überstimmt es das transform-Attribut, das GSAP schreibt */
.no-js .loader .mark__house, .no-js .loader .mark__rib { stroke-dashoffset: 0; }
.loader__label { position: absolute; right: var(--margin); bottom: var(--margin); opacity: .6; }

/* Kopf: durchsichtig über dem Hero, ab 10 px Scroll die Fläche der Seite (erbt den Body-Übergang) */
.header { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--gutter); padding: 0 var(--margin); color: inherit; transition: background-color var(--theme) var(--ease-out), color var(--theme) var(--ease-out); }
.header.is-solid { background-color: inherit; box-shadow: inset 0 -1px var(--hair); }
.header.is-menu { color: var(--paper); background-color: transparent; box-shadow: none; }
.header__mark { font-size: 2.5rem; justify-self: start; }   /* Marke 40 px, Wortmarke 15 px in zwei Zeilen; start, sonst dehnt das Raster das Lockup */
.header__nav { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); font-size: 1rem; }
.header__right { display: flex; justify-self: end; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.header__tel { font-size: 1rem; }
.header__menu { display: none; height: 2.75rem; padding: 0 .25rem; }
.roll { display: inline-grid; overflow: hidden; line-height: 1.2; }
.roll > span { grid-area: 1 / 1; display: block; transition: transform .5s var(--ease-in-out); }
.roll > span + span { transform: translateY(110%); }
@media (hover: hover) and (pointer: fine) {
  .roll:hover > span:first-child { transform: translateY(-110%); }
  .roll:hover > span + span { transform: translateY(0); }
}

/* Knöpfe: Pille, Füllung fährt von unten hoch, Beschriftung rollt */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.5rem; border: 1px solid currentColor; border-radius: 0; overflow: hidden; isolation: isolate; font-weight: 500; white-space: nowrap; color: var(--fg); }
.btn--solid { background: var(--fg); color: var(--bg); border-color: transparent; transition: background-color var(--theme) var(--ease-out), color var(--theme) var(--ease-out); }
.btn__fill { position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease-in-out); z-index: -1; }
body.t-accent .btn__fill, .header .btn__fill { background: var(--paper); }
.btn__label { display: inline-grid; overflow: hidden; }
.btn__label > span { grid-area: 1 / 1; transition: transform .5s var(--ease-in-out), color .5s var(--ease-in-out); }
.btn__label > span + span { transform: translateY(110%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__fill { transform: translateY(0); }
  .btn:hover .btn__label > span:first-child { transform: translateY(-110%); }
  .btn:hover .btn__label > span + span { transform: translateY(0); color: var(--ink); }
}
.btn--small { height: 2.6rem; padding: 0 1.1rem; font-size: .9rem; }
.btn--icon { width: 2.6rem; padding: 0; }
.btn--icon svg { width: 1.1rem; height: 1.1rem; }
.link { position: relative; display: inline-block; padding-bottom: .15em; font-weight: 500; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right; transition: transform .6s var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover::after { transform: scaleX(0); transform-origin: left; animation: link-in .6s var(--ease-in-out) .3s forwards; }
}
@keyframes link-in { to { transform: scaleX(1); transform-origin: left; } }

/* Menü (Handy) */
.menu { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu__panel { position: absolute; inset: 0; background: var(--ink); color: var(--paper); clip-path: inset(0 0 100% 0); display: grid; align-content: end; gap: 2rem; padding: calc(var(--nav-h) + 1rem) var(--margin) var(--margin); }
.menu__list { display: grid; gap: .25rem; }
.menu__link { font-size: clamp(2.4rem, 11vw, 5rem); font-weight: 500; font-stretch: var(--wdth); line-height: 1; letter-spacing: -.03em; }
.menu__link .line { display: block; overflow: hidden; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
.menu__link .line > span { display: block; }
.menu__meta { display: grid; gap: .5rem; opacity: .7; }

/* Hero: Text oben, das Bild liegt als Ebene über die ganze Höhe und wird auf das Band am unteren Rand beschnitten.
   Beim Auftritt steht es erst bildfüllend und zieht sich dann in das Band zurück (Clip plus Maßstab, nur Transforms). */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 var(--gutter); padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 0; overflow: hidden; }
.hero__title { grid-column: 1 / -1; font-size: var(--text-hero); letter-spacing: -.035em; line-height: .9; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); position: relative; z-index: 2; }
.hero__lead { grid-column: 1 / -1; grid-row: 2; align-self: start; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.75rem var(--gutter); align-items: end; padding-bottom: calc(var(--band) + 2.5rem); position: relative; z-index: 2; }
.hero__copy { grid-column: 8 / -1; font-size: clamp(1.1rem, 1.45vw, 1.4rem); line-height: 1.35; max-width: 34ch; }
.hero__actions { grid-column: 1 / span 6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }
.hero { --band: 40svh; }
.hero__media { position: absolute; inset: 0; margin: 0; z-index: 1; clip-path: inset(calc(100% - var(--band)) 0 0 0); overflow: hidden; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; transform-origin: 50% 100%; will-change: transform; }
.no-js .hero__media img { visibility: visible; transform: translateY(41%) scale(1.08); }
.hero__cap { position: absolute; left: var(--margin); bottom: var(--margin); z-index: 2; color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* Leistungen: horizontale Bahn, gepinnt (Desktop); auf dem Handy und bei reduzierter Bewegung ein Stapel */
.services { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.track-wrap { height: 100svh; overflow: hidden; display: grid; align-content: center; }
.track { display: flex; gap: var(--gutter); padding: 0 var(--margin); width: max-content; will-change: transform; }
.card { flex: none; width: clamp(640px, 66vw, 1040px); height: min(74svh, 760px); display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); border-top: 1px solid var(--hair); padding-top: 1.25rem; }
.card--intro { width: clamp(420px, 42vw, 660px); grid-template-columns: 1fr; align-content: center; }
.card__media { height: 100%; }
.card__media picture { display: block; height: 100%; width: 100%; }
.card__media picture { transition: transform 1.2s var(--ease-out); }
.card__media img { width: 112%; max-width: none; height: 100%; margin-left: -6%; }
@media (hover: hover) and (pointer: fine) { .card:hover .card__media picture { transform: scale(1.04); } }
.card__text { display: grid; gap: 1.25rem; align-content: center; padding: 0 clamp(.5rem, 2vw, 2rem); }
.card__text p { font-size: clamp(1rem, 1.2vw, 1.2rem); }
.card__num { color: var(--muted); }
.card__text .h3 { font-size: clamp(1.8rem, 3vw, 3.1rem); max-width: 10ch; }
.card__points { display: grid; gap: .55rem; color: var(--muted); }
.card__points li { display: flex; gap: .75rem; align-items: baseline; }
.card__points li::before { content: ""; width: 5px; height: 5px; background: currentColor; opacity: .6; flex: none; transform: translateY(-.15em); }
.card--intro .h2 { max-width: 12ch; }
.card--intro .lede { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.35; max-width: 34ch; }
.track-wrap__line { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) + .5rem); height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }
body.t-dark .track-wrap__line { background: var(--accent); }
.track-wrap { position: relative; }

/* Vorher und nachher: die Kante */
.wipe { padding-bottom: 0; padding-left: 0; padding-right: 0; }
.wipe .head { margin-left: var(--margin); margin-right: var(--margin); }
.wipe__pin { height: 100svh; }
.wipe__stage { position: relative; height: 100%; overflow: hidden; background: #0d0e0d; }
.pair { position: absolute; inset: 0; margin: 0; --p: 0; }
.pair + .pair { opacity: 0; visibility: hidden; }
.pair picture { position: absolute; inset: 0; }
.pair img { width: 100%; height: 100%; object-fit: cover; }
.pair__after { clip-path: inset(0 0 0 calc((1 - var(--p)) * 100%)); }   /* das Ergebnis kommt von rechts: links vorher, rechts nachher */
.pair__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--accent); transform: translateX(calc((1 - var(--p)) * (var(--sw, 100vw) - 2px))); will-change: transform; }
.pair__edge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); background: rgba(13,14,13,.35); }
.pair__caps { position: absolute; left: var(--margin); right: var(--margin); bottom: var(--margin); display: flex; justify-content: space-between; font-size: clamp(1.1rem, 2vw, 1.75rem); font-weight: 500; font-stretch: var(--wdth); color: var(--paper); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.cap--b { opacity: calc(1 - var(--p) * .65); }
.cap--a { opacity: calc(.35 + var(--p) * .65); }
.wipe__meta { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(var(--margin) + 2.75rem); color: rgba(238,236,228,.85); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.no-js .wipe__pin, .reduce .wipe__pin { height: auto; }
.no-js .wipe__stage, .reduce .wipe__stage { height: auto; display: grid; gap: 2px; overflow: visible; }
.no-js .pair, .reduce .pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; opacity: 1 !important; visibility: visible !important; }
.no-js .pair picture, .reduce .pair picture { position: relative; aspect-ratio: 16 / 9; clip-path: none; min-width: 0; }
.no-js .pair__edge, .reduce .pair__edge, .no-js .wipe__meta, .reduce .wipe__meta { display: none; }
.no-js .pair__caps, .reduce .pair__caps { position: static; grid-column: 1 / -1; padding: .75rem var(--margin); opacity: 1; }
.no-js .cap--b, .no-js .cap--a, .reduce .cap--b, .reduce .cap--a { opacity: 1; }

/* Ablauf */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding-top: 2rem; }
.steps__rail { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); }
.steps__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; margin-top: -.5px; background: currentColor; transform: scaleX(0); transform-origin: left; }
body.t-dark .steps__line { background: var(--accent); }
.step { display: grid; gap: 1rem; align-content: start; }
.step__num { font-size: clamp(2rem, 3.6vw, 3.75rem); font-weight: 500; font-stretch: var(--wdth); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.step .h3 { max-width: 12ch; }
.step p { color: var(--muted); }

/* Gebiet (auf Papier): Ringe in Textfarbe, der Heimatpunkt im Akzent */
.area { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.area__map { grid-column: 1 / span 6; min-width: 0; overflow: hidden; }   /* die Karte wartet vor dem Auftritt bei Maßstab 1,08; ohne Beschnitt ragt sie über den Rand */
.map { width: 100%; max-width: 100%; height: auto; display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }   /* max-width: sonst wächst die 1fr-Spur auf die Eigenbreite des SVG und die Seite läuft rechts über */
.map circle.ring { fill: none; stroke: color-mix(in srgb, currentColor 30%, transparent); stroke-width: 1; }
.map circle.ring--20 { stroke: currentColor; }
.js .map circle.ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-js .map circle.ring { stroke-dasharray: none; }
.map .dot { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.js .map .town { opacity: 0; }
.map .town text { fill: currentColor; fill-opacity: .8; }
.map .home .dot { fill: var(--accent); stroke: currentColor; stroke-width: 1.5; }
.map .home text { fill: currentColor; font-weight: 500; }
.map .ringlabel { fill: color-mix(in srgb, currentColor 55%, transparent); }
.area__list { grid-column: 8 / span 5; display: grid; gap: 2rem; }
.towns { border-top: 1px solid var(--hair); }
.towns li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--hair); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.towns b { font-family: var(--mono); font-weight: 400; font-size: .8rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); }
.area__foot { color: var(--muted); }

/* Fragen */
.faq { border-top: 1px solid var(--hair); max-width: 62rem; }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q { display: grid; grid-template-columns: 1fr 2rem; align-items: center; gap: var(--gutter); width: 100%; padding: 1.4rem 0; text-align: left; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.2; }
.faq__q svg { width: 1.25rem; height: 1.25rem; justify-self: end; transition: transform var(--dur) var(--ease-in-out); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-in-out); }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s var(--dur); }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
.no-js .faq__a > div { visibility: visible; }
.faq__a p { padding: 0 2rem 1.6rem 0; color: var(--muted); max-width: 60ch; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.no-js .faq__a { grid-template-rows: 1fr; }

/* Anfrage (Blattgrün über den Body) */
.contact { min-height: 90svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-content: center; }
.contact__text { grid-column: 1 / span 6; display: grid; gap: 2rem; align-content: start; }
.contact__title { font-size: clamp(2.6rem, 8vw, 8.6rem); letter-spacing: -.035em; line-height: .9; }
.contact__tel { display: inline-block; font-size: clamp(1.6rem, 3.4vw, 3.6rem); font-weight: 500; font-stretch: var(--wdth); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; width: max-content; }
.contact__mail { width: max-content; }
.form { grid-column: 8 / span 5; display: grid; gap: 1.25rem; align-self: start; }
.form label { display: grid; gap: .5rem; font-family: var(--mono); font-size: var(--text-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; font-family: var(--font); font-size: 1rem; color: inherit; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 0; padding: .7rem 0; min-height: 3rem; width: 100%; transition: border-color var(--dur-fast) var(--ease-out); }
.form textarea { min-height: 7rem; resize: vertical; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23141513' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right center / 1rem; cursor: pointer; }
.form input:hover, .form select:hover, .form textarea:hover, .form input:focus, .form select:focus, .form textarea:focus { border-color: currentColor; outline: none; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.form ::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); opacity: 1; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form .state { display: none; padding: .75rem 1rem; font-size: .95rem; border-left: 2px solid currentColor; }
.form.is-error .state.err, .form.is-sent .state.ok { display: block; }
.form input.is-invalid, .form textarea.is-invalid { border-bottom: 2px solid currentColor; }
.form label.is-bad::after { content: "Bitte ausfüllen"; color: var(--ink); }
.form__hint { color: var(--muted); font-size: .85rem; max-width: 40ch; }
.form__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Fuß: Wortmarke in zwei Zeilen, die zweite füllt die Breite */
.footer { padding-bottom: 0; overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding-bottom: var(--section); border-top: 1px solid var(--hair); padding-top: 2rem; }
.footer__cols div { display: grid; gap: .5rem; align-content: start; }
.footer__cols a { width: max-content; }
.footer__cols a:hover { opacity: .6; }
.footer__mark { font-size: 9.6vw; line-height: .84; letter-spacing: -.045em; font-weight: 500; font-stretch: var(--wdth); margin: 0 0 -.14em; will-change: transform; user-select: none; }
.footer__mark span { display: block; }

/* Unterseiten */
.page { padding-top: calc(var(--nav-h) + var(--section)); min-height: 100svh; }
.page .wrap { max-width: 44rem; display: grid; gap: 1.25rem; }
.page h1 { font-size: var(--text-h2); margin-bottom: 1rem; }
.page h2 { font-size: var(--text-h3); margin-top: 1.5rem; }
.page p { max-width: 62ch; }
.page a { text-decoration: underline; text-underline-offset: .2em; }
.fig { font-variant-numeric: tabular-nums; }

/* Reduzierte Bewegung und ohne Skript: Endzustände */
.reduce .map .town, .no-js .map .town { opacity: 1; }
.reduce .map circle.ring { stroke-dashoffset: 0; }
.reduce .steps__line, .reduce .track-wrap__line { transform: none; }
.reduce .hero__media img { transform: translateY(41%) scale(1.08); }
.reduce .track-wrap, .no-js .track-wrap { height: auto; display: block; }
.reduce .track, .no-js .track { flex-direction: column; width: auto; padding-bottom: var(--section); }
.reduce .card, .no-js .card { width: auto; height: auto; }
.reduce .card__media, .no-js .card__media { aspect-ratio: 16 / 10; }
.reduce .track-wrap__line, .no-js .track-wrap__line { display: none; }

/* Handy und Tablet */
@media (max-width: 991px) {
  .header { grid-template-columns: 1fr auto; }
  .header__mark { font-size: 2.15rem; }
  .header__nav, .header__tel { display: none; }
  .header__right { gap: 1rem; }
  .header__menu { display: inline-flex; align-items: center; }
  .hero { --band: 42svh; padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero__title { font-size: clamp(2rem, 12vw, 7rem); }   /* drei Zeilen "Hausmeister- / service in / Zweibrücken." (Inline-Skript im HTML) */
  .no-js .hero__title { font-size: clamp(2rem, 9.2vw, 6rem); }
  .hero__lead { grid-template-columns: 1fr; align-items: start; }
  .hero__copy, .hero__actions { grid-column: 1 / -1; }
  .hero__copy { order: -1; }
  .hero__media img { object-position: 50% 30%; }
  .no-js .hero__media img, .reduce .hero__media img { transform: translateY(28%); }
  .services { padding-top: var(--section); }
  .track-wrap { height: auto; display: block; }
  .track { flex-direction: column; width: auto; gap: clamp(3rem, 8vw, 5rem); }
  .card, .card--intro { width: auto; height: auto; grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 16 / 10; }
  .card__media img { width: 100%; margin-left: 0; }
  .track-wrap__line { display: none; }
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 2.5rem; }
  .steps__rail, .steps__line { left: 0; top: 0; bottom: 0; right: auto; height: auto; width: 1px; margin: 0; }
  .steps__line { width: 2px; margin-left: -.5px; transform: scaleY(0); transform-origin: top; }
  .area__map, .area__list { grid-column: 1 / -1; }
  .map .town text { display: none; }
  .map .ringlabel, .map .home text { font-size: 22px; }
  .wipe__pin { display: grid; align-content: center; }
  .wipe__stage { height: auto; aspect-ratio: 4 / 5; }
  .contact__text, .form { grid-column: 1 / -1; }
  .form__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__mark { font-size: 10.4vw; }
}
@media (min-width: 992px) { .nw { white-space: nowrap; } .btn--icon { display: none; } }
@media (pointer: coarse) { .footer__cols a, .towns .link, .contact__mail { padding-block: .5rem; margin-block: -.5rem; } }

/* Reduzierte Bewegung: dekorative Übergänge nach Namen aus, nie der pauschale Reset (bricht GSAP) */
@media (prefers-reduced-motion: reduce) {
  .roll > span, .btn__fill, .btn__label > span, .link::after, .card__media picture, .faq__q svg, .faq__a { transition: none; }
  .link:hover::after { animation: none; transform: scaleX(1); }
}