/* ============================================================
   Selbst gehostete Schriften — KEINE Verbindung zu Google.
   Beim Laden von Google-Servern würde die IP-Adresse jedes
   Besuchers an Google übertragen (LG München I, Urteil 2022).
   Lokal gehostet entfällt das: Die Seite lädt nichts von Dritten
   und braucht deshalb kein Cookie-/Einwilligungsbanner.

   Archivo und Playfair Display sind variable Schriften — eine
   Datei deckt alle Gewichte ab (font-weight als Bereich).
   Subset "latin" (enthält alle deutschen Umlaute und ß).
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/Archivo.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/PlayfairDisplay.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Terra Facility Service — Stylesheet
   Farbwelt & Typografie abgeleitet vom Print-Flyer.
   ========================================================================== */

:root {
  --ink:        #111111;
  --ink-soft:   #1c1b19;
  --ink-line:   #2c2a26;
  --gold:       #b8935a;
  --gold-light: #d4b483;
  --gold-deep:  #8f6f3d;
  --cream:      #faf8f4;
  --paper:      #ffffff;
  --muted:      #6b6862;
  --muted-dark: #a9a49a;
  --line:       #e4dfd4;

  /* Durchgehend eine moderne Grotesk — ruhig, sachlich, zeitgemäß.
     Die Serifenschrift bleibt ausschließlich der Wortmarke vorbehalten,
     damit die Website zum gedruckten Logo (Flyer, Fahrzeug, Kleidung) passt. */
  --serif: "Archivo", -apple-system, "Segoe UI", sans-serif;
  --sans:  "Archivo", -apple-system, "Segoe UI", sans-serif;
  --brand: "Playfair Display", "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: 5vw;
  --header-h: 84px;
  --locbar-h: 48px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--locbar-h) + 20px); }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto ist zwingend: sonst erzwingt das height-Attribut im HTML eine
   feste Höhe und das Bild wird verzerrt, sobald die Breite begrenzt wird. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* --- Typografie ----------------------------------------------------------- */
/* Überschriften in der Marken-Serifenschrift (wie im Logo),
   Fließtext bleibt in der Grotesk — beste Mischung aus Marke und Lesbarkeit. */
h1, h2, h3, h4 { font-family: var(--brand); font-weight: 600; line-height: 1.1; letter-spacing: -0.012em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow--light { color: var(--gold); }

.section-title { font-size: clamp(2rem, 4.1vw, 3.15rem); margin: 0.9rem 0 1.1rem; letter-spacing: -0.012em; }
/* Akzentwort: in einer Grotesk wirkt Farbe + Gewicht stärker als Kursivschnitt */
.section-title em { font-style: normal; font-weight: 700; color: var(--gold-deep); }
.lead { font-size: 1.075rem; color: var(--muted); max-width: 54ch; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5rem); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark .lead { color: var(--muted-dark); }
.rule { width: 68px; height: 2px; background: var(--gold); border: 0; margin: 0 0 1.6rem; }

/* Vertikal ausgeblendet statt seitlich — seitliches Versetzen würde
   horizontales Scrollen erzeugen. */
.skip-link {
  position: fixed; left: 0; top: -120px; z-index: 999;
  background: var(--ink); color: var(--cream); padding: .8rem 1.2rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  padding: 1rem 1.6rem; border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--gold-deep); transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--ghost-light { border-color: rgba(250,248,244,.35); color: var(--cream); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); }

/* --- Logo ----------------------------------------------------------------- */
.logo { display: flex; align-items: center; gap: 1rem; }
/* aspect-ratio statt fixer width+height: hält das Seitenverhältnis exakt zum
   viewBox (32:36) — vorher stand hier 33x39px, was leicht gestaucht wirkte.
   Insgesamt auch größer: die Marke ging im Header zuvor fast unter. */
.logo__mark { height: 52px; width: auto; aspect-ratio: 32 / 36; color: var(--gold); flex: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.logo__word { line-height: 1; }
.logo__name { font-family: var(--brand); font-size: 1.75rem; font-weight: 400; letter-spacing: .2em; display: block; }
/* „FACILITY" wie in der Wortmarke: Serifenschrift, gold, weit gesperrt */
.logo__sub {
  font-family: var(--brand); font-size: 12.5px; font-weight: 400; letter-spacing: .42em;
  text-transform: uppercase; color: var(--gold); display: block; margin-top: 6px;
}
.logo--light .logo__name { color: var(--cream); }
.logo--light .logo__sub { color: var(--gold); }

/* --- Standort-Leiste --------------------------------------------------------
   Klebt zusammen mit dem Header oben fest. Zwei Gewerbe, zwei Rufnummern —
   die Standortwahl muss deshalb jederzeit sichtbar und eindeutig sein. */
.locbar {
  position: sticky; top: 0; z-index: 110;
  background: var(--ink); color: var(--cream);
}
.locbar__inner {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  height: var(--locbar-h);
}
.locbar__label {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-dark);
}
.locbar__links { display: flex; gap: .5rem; }
.locbar__btn {
  border: 1px solid rgba(250,248,244,.3); padding: .38rem 1.25rem;
  font-size: 13px; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.locbar__btn:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* Auf einer Standortseite ist die aktive Stadt dauerhaft hervorgehoben */
.locbar__btn[aria-current="page"] {
  background: var(--gold); color: var(--ink); border-color: var(--gold); cursor: default;
}

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky; top: var(--locbar-h); z-index: 100;
  background: rgba(250,248,244,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -26px rgba(17,17,17,.5); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 2rem; }
.nav { display: flex; gap: 2.2rem; flex: none; }
.nav a {
  font-size: 14px; font-weight: 600; letter-spacing: .03em; position: relative; padding-block: 4px;
  white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav a:hover::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: 1.2rem; }
.header__phone { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 15px; white-space: nowrap; }
.header__phone svg { width: 17px; height: 17px; color: var(--gold-deep); }
.header__phone:hover { color: var(--gold-deep); }

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger svg { width: 26px; height: 26px; }

/* Mobile-Panel — ein- und ausgeblendet über Deckkraft statt seitlichem
   Verschieben: ein fixiertes Element außerhalb des Viewports würde sonst
   horizontales Scrollen auf der ganzen Seite verursachen. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200; background: var(--ink); color: var(--cream);
  padding: 1.4rem var(--gutter) 3rem;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* Beim Schließen erst ausblenden, dann verstecken; beim Öffnen sofort sichtbar
     (sonst wäre das Panel während der Animation nicht fokussierbar). */
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.mobile-nav.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}
.mobile-nav__links a { opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-nav.is-open .mobile-nav__links a { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: .05s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: .1s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: .15s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(5) { transition-delay: .2s; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 24px); }
.mobile-nav__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--cream); }
.mobile-nav__close svg { width: 26px; height: 26px; }
.mobile-nav__links { margin-top: 2.5rem; display: grid; gap: .4rem; }
.mobile-nav__links a {
  font-family: var(--brand); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.01em;
  padding: .55rem 0; border-bottom: 1px solid var(--ink-line);
}
.mobile-nav__cta { margin-top: auto; padding-top: 2.5rem; display: grid; gap: .8rem; }
.mobile-nav__cta .btn { justify-content: center; }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--cream); overflow: hidden; }
/* Breiter als ursprünglich: Ein Gruppenfoto im hochformatigen Panel würde
   sonst seitlich stark beschnitten und die äußeren Personen abschneiden. */
.hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--ink);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
  position: absolute; top: 2.2rem; right: 2.4rem; z-index: 3;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--gold);
  display: grid; place-content: center; text-align: center; color: var(--cream);
  padding: .5rem;
}
.hero__badge strong { font-family: var(--brand); font-weight: 700; font-size: 1.55rem; letter-spacing: 0; display: block; color: var(--gold); }
.hero__badge span { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; display: block; margin-top: 2px; }
.hero__stars { color: var(--gold); font-size: 11px; letter-spacing: .2em; }

.hero__inner { position: relative; z-index: 2; padding: clamp(3rem, 5.5vw, 4.5rem) 0 clamp(3.25rem, 6vw, 5rem); }
.hero__text { max-width: 31rem; }
.hero__services {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 2rem;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero__services li { display: flex; align-items: center; gap: 1.4rem; }
.hero__services li:not(:last-child)::after { content: "•"; color: var(--gold); }
/* Grotesk baut breiter als eine Serifenschrift — etwas kleiner und enger gesetzt */
.hero h1 { font-size: clamp(2.9rem, 7vw, 5.1rem); line-height: .98; letter-spacing: -0.015em; font-weight: 700; }
.hero h1 .line2 { color: var(--gold-deep); display: block; }
/* Bewusst NICHT in der Serifenschrift: kursives Playfair wirkte hier altmodisch.
   Die Grotesk hält die Zeile modern und ordnet sie der Headline unter. */
.hero__script {
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: clamp(1.25rem, 2.8vw, 1.85rem); letter-spacing: -0.015em;
  color: var(--muted);
  margin-top: .7rem; position: relative; display: inline-block;
}
.hero__script::after { content: ""; position: absolute; left: 0; right: 12%; bottom: -6px; height: 1.5px; background: var(--gold); }
.hero__intro { margin-top: 2rem; font-size: 1.1rem; color: var(--muted); max-width: 30rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

/* --- Trust-Leiste --------------------------------------------------------- */
.trust { background: var(--ink); color: var(--cream); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: 2.2rem 1.8rem; display: flex; align-items: center; gap: 1rem; }
.trust__item + .trust__item { border-left: 1px solid var(--ink-line); }
.trust__item svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.trust__item span { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.45; }

/* --- Leistungen (Accordion) ----------------------------------------------- */
.services__layout { display: grid; grid-template-columns: .85fr 1.55fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.services__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.services__aside .btn { margin-top: 1.8rem; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__head {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem;
  padding: 1.55rem 0; text-align: left;
}
.acc__num { font-family: var(--sans); font-size: .95rem; color: var(--gold); font-weight: 700; letter-spacing: 0; }

/* Einheitliches "&" für die GANZE Website — unabhängig von der Schrift des
   umgebenden Texts (Playfair-Überschrift oder Archivo-Fließtext). Playfairs
   verschnörkeltes Schreibschrift-& passt nicht zur klaren Logo-Linienführung;
   Archivos & wirkt kantig. Poppins liefert ein ruhiges, geometrisches & — bewusst
   als drittes Schriftschnitt-Detail beibehalten. */
.amp { font-family: "Poppins", var(--sans); font-weight: 600; font-style: normal; }
.acc__title { font-family: var(--brand); font-size: clamp(1.25rem, 2.4vw, 1.65rem); font-weight: 600; letter-spacing: -0.01em; transition: color .25s; }
.acc__head:hover .acc__title { color: var(--gold-deep); }
.acc__icon { width: 26px; height: 26px; color: var(--gold-deep); transition: transform .35s var(--ease); }
.acc__head[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__head[aria-expanded="true"] .acc__title { color: var(--gold-deep); }
.acc__panel { overflow: hidden; height: 0; transition: height .4s var(--ease); }
.acc__body { padding: 0 0 1.9rem calc(1rem + 1.4rem); }
.acc__list { columns: 2; column-gap: 2.5rem; }
.acc__list li {
  break-inside: avoid; position: relative; padding-left: 1.35rem; margin-bottom: .55rem;
  font-size: 15.5px; color: var(--muted);
}
.acc__list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: rotate(45deg);
}
.acc__note {
  margin-top: 1rem; display: inline-block; background: var(--gold); color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1rem;
}

/* --- Zielgruppen ---------------------------------------------------------- */
.audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 3rem; }
.audience__col { background: var(--cream); padding: 2.6rem 2rem; }
.audience__col svg { width: 34px; height: 34px; color: var(--gold-deep); margin-bottom: 1.4rem; }
.audience__col h3 { font-size: 1.45rem; margin-bottom: .7rem; }
.audience__col p { font-size: 15.5px; color: var(--muted); }

/* --- Ablauf --------------------------------------------------------------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem; margin-top: 3.2rem; counter-reset: step; }
.process__step { position: relative; padding-top: 2.4rem; border-top: 1px solid var(--ink-line); }
.section--dark .process__step { border-top-color: var(--ink-line); }
.process__step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -.2rem; left: 0; transform: translateY(-100%);
  font-family: var(--brand); font-weight: 600; font-size: 2.5rem; letter-spacing: 0; color: var(--gold);
}
.process__step h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.process__step p { font-size: 15px; color: var(--muted-dark); }

/* --- Einsatzgebiet -------------------------------------------------------- */
.area { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 3rem; }
.area__card { border: 1px solid var(--line); background: var(--paper); padding: 2.4rem 2.2rem; }
.area__card h3 { font-size: 1.7rem; display: flex; align-items: center; gap: .7rem; }
.area__card h3 svg { width: 24px; height: 24px; color: var(--gold-deep); }
.area__card p { color: var(--muted); font-size: 15.5px; margin-top: .6rem; }
.area__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.area__tags li { font-size: 12.5px; letter-spacing: .04em; border: 1px solid var(--line); padding: .35rem .75rem; color: var(--muted); }

/* --- Warum wir ------------------------------------------------------------ */
.why__layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.why__list { display: grid; gap: .1rem; }
.why__list li { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--ink-line); }
.why__list svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: 3px; }
.why__list strong { font-family: var(--brand); font-size: 1.22rem; font-weight: 600; letter-spacing: -0.01em; }
.why__quote {
  border-left: 2px solid var(--gold); padding-left: 1.8rem;
}
.why__quote p { font-family: var(--brand); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.32; letter-spacing: 0; }
.why__quote span { display: block; margin-top: 1.2rem; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* --- Kontakt -------------------------------------------------------------- */
.contact__layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__phone {
  font-family: var(--brand); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.4rem); color: var(--cream);
  display: inline-block; margin: 1.2rem 0 .4rem; letter-spacing: 0;
}
.contact__phone:hover { color: var(--gold); }
.contact__hint { color: var(--muted-dark); font-size: 15px; }
.contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.form { background: var(--cream); color: var(--ink); padding: clamp(1.8rem, 4vw, 2.6rem); }
.form__row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.form__row--2 { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); padding: .8rem .9rem;
  transition: border-color .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: 13px; color: var(--muted); margin-bottom: 1.3rem; }
.form__consent input { margin-top: 3px; accent-color: var(--gold-deep); }
.form .btn { width: 100%; justify-content: center; }
.form__note { font-size: 12.5px; color: var(--muted); margin-top: .9rem; text-align: center; }

/* --- Standort-Umschalter (Kostenvoranschlag & Einsatzgebiet) --------------- */
.city-switch { display: inline-flex; border: 1px solid var(--line); overflow: hidden; }
.city-switch__btn {
  padding: .7rem 1.5rem; font-size: 13.5px; font-weight: 700; letter-spacing: .03em;
  background: var(--paper); color: var(--muted); transition: background .2s, color .2s;
}
.city-switch__btn + .city-switch__btn { border-left: 1px solid var(--line); }
.city-switch__btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.city-switch__btn:hover:not([aria-pressed="true"]) { background: var(--cream); }
#einsatzgebiet .city-switch { margin-bottom: 1.8rem; }
#einsatzgebiet .area { display: block; margin-top: 3rem; }
#einsatzgebiet .area__card { max-width: 34rem; }

/* --- Kostenvoranschlag ------------------------------------------------------ */
.quote__form {
  max-width: 46rem; margin-top: 2.4rem; background: var(--paper);
  border: 1px solid var(--line); padding: clamp(1.6rem, 4vw, 2.4rem);
}
.quote__services { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.6rem; }
.quote__services label { display: flex; align-items: center; gap: .65rem; font-size: 14.5px; cursor: pointer; }
.quote__services input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--gold-deep); }
.quote .btn { width: 100%; justify-content: center; margin-top: 1.6rem; }
.quote__note { font-size: 12.5px; color: var(--muted); margin-top: .9rem; text-align: center; }

/* Standortkennzeichnung im Header + Standortwahl im Hero:
   Bei zwei Gewerben muss immer erkennbar sein, welche Nummer gerade gilt. */
.header__phone-city {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); margin-right: .1rem;
}
.hero__city {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1.6rem; font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.city-switch--inline { border-color: var(--line); background: var(--paper); }
.city-switch--inline .city-switch__btn { padding: .5rem 1.05rem; font-size: 12.5px; }

/* Abschluss-Formular: eigene, schmalere Sektion am Seitenende */
.form-section { max-width: 46rem; }
.form-section .form { margin-top: 2rem; }

/* Standort-Links: führen auf die eigenständigen Seiten /giessen/ und /hannover/ */
.city-pill {
  display: inline-block; border: 1px solid var(--line); background: var(--paper);
  padding: .5rem 1.15rem; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  transition: background .2s, color .2s, border-color .2s;
}
.city-pill:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.area__links { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.loc-card__more {
  display: inline-block; margin-top: 1.1rem; font-size: 13.5px; font-weight: 700;
  color: var(--gold); border-bottom: 1px solid transparent;
}
.loc-card__more:hover { border-bottom-color: var(--gold); }
/* Auf den Standortseiten steht die Stadt fest statt zur Auswahl */
.quote__fixedcity {
  font-family: var(--brand); font-size: 1.35rem; font-weight: 600; color: var(--ink);
}
.city-link { color: var(--gold-deep); font-weight: 700; border-bottom: 1px solid transparent; }
.city-link:hover { border-bottom-color: var(--gold-deep); }

/* --- Bundesweite Entrümpelung ------------------------------------------------
   Bewusst als eigener, dunkler Block: „bundesweit" ist der größere Markt und
   soll sich optisch klar von den regionalen Radien absetzen. */
.area-bund {
  display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center;
  background: var(--ink); color: var(--cream);
  padding: clamp(1.8rem, 4vw, 2.8rem); margin-top: 2.5rem;
}
.area-bund__label {
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.area-bund h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cream); margin-bottom: .8rem; }
.area-bund p { color: var(--muted-dark); font-size: 1rem; max-width: 46ch; }
.area-bund strong { color: var(--cream); }
.area-bund .btn { margin-top: 1.5rem; background: var(--gold); color: var(--ink); }
.area-bund .btn:hover { background: var(--gold-light); }
.area-bund__karte { width: 150px; height: auto; color: var(--gold); flex: none; }
.area__intro { margin-top: 3rem; font-size: 1.02rem; color: var(--muted); max-width: 52ch; }

/* --- Standort-Kontaktkarten (Kontaktbereich) --------------------------------
   Zwei getrennte Gewerbe = zwei getrennte Kontaktblöcke. Bewusst beide
   gleichzeitig sichtbar statt umschaltbar: Der Besucher soll auf einen Blick
   sehen, welcher Standort für ihn zuständig ist. */
/* Nebeneinander: Der Kontaktbereich sitzt jetzt weit oben und nutzt die volle
   Seitenbreite — zwei Spalten halten den Abschnitt kompakt, damit der Weg zu
   den Leistungen kurz bleibt. Mobil greift weiter unten eine Spalte. */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.loc-card {
  border: 1px solid var(--ink-line);
  padding: 1.6rem 1.5rem 1.7rem; background: rgba(250,248,244,.03);
}
.loc-card__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .5rem;
}
.loc-card__city { font-size: 1.75rem; color: var(--cream); line-height: 1.05; }
.loc-card__region { font-size: 14px; color: var(--muted-dark); margin-top: .25rem; }
.loc-card__phone {
  font-family: var(--brand); font-weight: 600; font-size: 1.5rem; color: var(--cream);
  display: block; margin-top: 1.1rem; letter-spacing: 0;
}
a.loc-card__phone:hover { color: var(--gold); }
.loc-card__phone--todo { color: var(--muted-dark); font-style: italic; font-size: 1.15rem; }
.loc-card__addr { font-size: 14px; color: var(--muted-dark); margin-top: .45rem; }
.loc-card__actions { display: flex; gap: .6rem; margin-top: 1.3rem; flex-wrap: wrap; }
.loc-card__actions .btn { padding: .8rem 1.2rem; font-size: 13px; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--ink-soft); color: var(--muted-dark); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer h4 { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.footer li { margin-bottom: .5rem; }
.footer a:hover { color: var(--gold-light); }
.footer__about { max-width: 34ch; margin-top: 1.2rem; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 13px;
}

/* --- Sticky Mobile CTA ---------------------------------------------------- */
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; }
.mobile-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem; font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.mobile-cta svg { width: 18px; height: 18px; }
.mobile-cta .call { background: var(--ink); color: var(--cream); }
.mobile-cta .wa { background: var(--gold); color: var(--ink); }

/* --- Rechtstexte (Unterseiten) -------------------------------------------- */
.legal { max-width: 68ch; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 1.8rem; }
.legal h2 { font-size: 1.45rem; margin: 2.4rem 0 .7rem; }
.legal h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.legal p, .legal li { color: var(--muted); margin-bottom: .8rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal .todo {
  display: block; background: #fff6e2; border-left: 3px solid var(--gold);
  padding: .9rem 1.1rem; margin: .6rem 0 1.4rem; font-size: 14.5px; color: var(--gold-deep); font-weight: 600;
}
.page-head { border-bottom: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

/* --- Scroll-Reveal --------------------------------------------------------
   Wichtig: Inhalte sind standardmäßig SICHTBAR. Nur wenn JavaScript aktiv ist
   (html.js), werden sie zunächst ausgeblendet und beim Scrollen eingeblendet.
   So bleibt die Seite auch ohne bzw. bei fehlerhaftem JS vollständig lesbar.
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  /* 5 Nav-Punkte (seit "Kostenvoranschlag" dazukam) passen zwischen Logo und
     Aktionen ab hier nicht mehr verlässlich — Burger-Menü übernimmt früher
     als vorher (900px). Verhindert sowohl Zeilenumbruch im Nav als auch ein
     Herauslaufen der Aktionen (WhatsApp-Button) aus dem Viewport. */
  .nav, .header__phone, .header__actions .btn { display: none; }
  .burger { display: flex; }
  /* Sticky Anrufen/WhatsApp-Leiste deckt genau den Bereich ab, in dem Header
     und Nav keine Kontaktwege mehr zeigen. */
  .mobile-cta { display: flex; }
  body { padding-bottom: 56px; }
  .services__layout { grid-template-columns: 1fr; }
  .services__aside { position: static; }
  .why__layout, .contact__layout { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Hero umgedreht: Headline zuerst, Bild darunter. Sonst füllt das Foto den
     halben Startbildschirm und die Kernaussage rutscht unter die Falz.
     Das Siegel sitzt dadurch automatisch unten rechts auf dem Bild. */
  .hero { display: flex; flex-direction: column; }
  .hero__inner { order: 1; padding: 2.25rem 0 2.5rem; }
  .hero__media { order: 2; position: relative; width: 100%; height: 230px; clip-path: none; }
  .hero__badge { top: auto; bottom: 1rem; right: 1rem; width: 94px; height: 94px; border-width: 1.5px; }
  .hero__badge strong { font-size: 1.25rem; }
  .hero__text { max-width: none; }
  .hero__services { font-size: 11px; gap: .35rem 1rem; margin-bottom: 1.5rem; }
  .hero__services li { gap: 1rem; }
  .hero__intro { margin-top: 1.3rem; font-size: 1.02rem; }
  .hero__cta { margin-top: 1.7rem; gap: .7rem; }
  /* Etwas kompaktere Abstände — auf dem Handy wirkt der Desktop-Rhythmus zäh */
  .section { padding: 3.75rem 0; }
  .section--tight { padding-block: 3rem; }
  .acc__body { padding-left: 0; padding-bottom: 1.5rem; }
  .acc__head { padding: 1.25rem 0; gap: 1rem; }

  /* Lesbarkeit & Bedienbarkeit auf Touch-Geräten:
     Kleinschrift anheben und Tippflächen auf mind. ~40 px vergrößern. */
  .logo__sub { font-size: 10px; letter-spacing: .3em; }
  .header .logo { padding-block: .3rem; }
  .hero__services { font-size: 11.5px; }
  .hero__badge span { font-size: 9.5px; }
  .eyebrow { font-size: 12.5px; }
  .acc__note { font-size: 12.5px; }
  .field label { font-size: 12.5px; }
  .footer li { margin-bottom: 0; }
  .footer li a { display: inline-block; padding: .7rem 0; }
  .quote__services { grid-template-columns: 1fr; }
  .area-bund { grid-template-columns: 1fr; gap: 1.5rem; }
  .area-bund__karte { width: 110px; justify-self: center; }
  .locbar__label { display: none; }
  .locbar__links { width: 100%; gap: .45rem; }
  .locbar__btn { flex: 1; text-align: center; padding: .38rem .5rem; }
  .loc-grid { grid-template-columns: 1fr; }
  .city-switch { display: flex; width: 100%; }
  .city-switch__btn { flex: 1; text-align: center; }
  #einsatzgebiet .area__card { max-width: none; }
  .form__consent { font-size: 13.5px; gap: .9rem; }
  .form__consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
  .audience, .process, .area { grid-template-columns: 1fr; }

  /* Ablauf gestapelt: Nummer nach links NEBEN den Text statt darüber.
     Über der Linie schwebend würde die Ziffer (45 px Platzbedarf) in den
     Abstand von 35 px ragen und den Text des vorherigen Schritts überlappen. */
  .process { gap: 0; }
  .process__step { padding: 1.6rem 0 1.7rem 3.5rem; }
  .process__step::before {
    top: 1.45rem; left: 0; transform: none;
    font-size: 1.85rem; line-height: 1;
  }
  .process__step h3 { font-size: 1.2rem; }
  .acc__list { columns: 1; }
}

@media (max-width: 560px) {
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--ink-line); }
  .form__row--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  /* Nur Buttons im Textfluss auf volle Breite — nicht die in Header
     oder fixierter CTA-Leiste. */
  .hero__cta .btn, .contact__actions .btn, .mobile-nav__cta .btn,
  .services__aside .btn, .form .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Muster-Widerrufsformular ------------------------------------------------
   Ausfülllinien als Rahmen statt Unterstrich-Ketten: Lange Unterstrichfolgen
   lassen sich nicht umbrechen und erzeugen auf schmalen Displays horizontales
   Scrollen über die ganze Seite. */
.wf-felder { margin-top: 1.2rem; }
.wf-zeile {
  display: block; border-bottom: 1px solid var(--muted);
  height: 1.6rem; margin-bottom: 1.4rem;
}
.wf-label { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: .1rem; }