/* ============================================================
   Leistungsseiten — Marketing-Bausteine.

   Wird ZUSÄTZLICH zu base.css geladen. base.css bringt Tokens,
   Schrift, Reset, Kopf und Fuß; hier steht nur, was eine
   Leistungsseite darüber hinaus braucht.

   Die Tokens werden hier nicht neu definiert. Wer eine Farbe
   ändert, ändert sie in base.css und in index.html.
   ============================================================ */

/* base.css deckelt --wrap auf 780px (Lesebreite für Rechtstexte).
   Eine Leistungsseite trägt Bilder und Raster und braucht mehr. */
:root{
  --wrap:min(92vw,1180px);
  --stone-2:#E7E5DC;
  --r-img:20px;
  /* Diese vier stammen aus index.html und werden von den übernommenen
     Blöcken gebraucht. Fehlten sie, war `var(--ink-2)` ungültig — dann fiel
     `--card` in #arbeit.on-dark auf den hellen Ausgangswert zurück und die
     Thumbnail-Beschriftungen standen hell auf hell (gemessen 1,05 : 1).
     Ein nicht definiertes Token scheitert lautlos, deshalb hier notiert. */
  --ink-2:#24271F;
  --r-card:26px;
  --sh-dk:0 30px 70px -20px rgba(0,0,0,.65);
  --z-bar:40;
}

main{padding-block:0}
/* Wie auf der Startseite gilt der Abstand generisch für jede Section. Die aus
   index.html übernommenen Blöcke (.work, .contact) tragen keine eigene
   Abstandsregel und standen deshalb ohne Außenabstand, während alle anderen
   Sections 72px hatten. */
main>section{padding-block:var(--sec)}
.shero{padding-block:0}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec) * .7)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--soft{background:var(--soft)}
.sec--stone{background:var(--stone-2)}

/* Display-Stimme wie auf der Startseite: eine Familie, zwei Breiten.
   wdth 66 fürs Display, wdth 100 für Fließtext. */
.dhead{
  font-variation-settings:'wdth' 66;
  font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.2vw,3.9rem);
  line-height:.9;letter-spacing:-.005em;margin:0 0 1rem;max-width:none;
}
/* Umlaute brauchen mehr Luft: gemessener Nullpunkt liegt bei .90,
   .98 gibt 8 % Reserve. Siehe CLAUDE.md Build-Regel 2. */
.dhead--um{line-height:.98}
.kicker{
  font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime-deep);margin:0 0 .7rem;
}
.sec--dark .kicker{color:var(--lime)}
.lede{font-size:1.125rem;max-width:62ch;color:var(--muted);margin:0 0 1.5rem}
.sec--dark .lede{color:var(--paper-72)}

/* ---------- Hero ---------- */
.shero{position:relative;isolation:isolate;overflow:hidden;background:var(--stone-2)}
.shero__bg{position:absolute;inset:0;z-index:0;margin:0}
.shero__bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.shero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(247,246,241,.96) 0%,rgba(247,246,241,.86) 26%,rgba(247,246,241,.38) 50%,rgba(247,246,241,0) 68%),
    linear-gradient(180deg,rgba(247,246,241,.7) 0%,rgba(247,246,241,0) 26%);
}
.shero__in{
  position:relative;z-index:2;
  padding-block:clamp(6rem,15vh,9rem) clamp(3rem,7vh,5rem);
  display:flex;flex-direction:column;align-items:flex-start;
}
.shero h1{margin:0 0 1.1rem}
/* Der Kicker steht im Hero als <span> INNERHALB der H1 und war damit ein
   Inline-Element — vertikale Margins greifen dort nicht, die .7rem aus .kicker
   liefen ins Leere. Gemessen (Canvas-Tintenmaße, 24.08.2026) blieben so nur
   12,6 px Tinte-zu-Tinte bei 390 px, während der Hero der Startseite 33,5 px
   trug. Erst display:block macht die Margin wirksam. Eigene Zeilenhöhe, weil
   der Kicker sonst die .98 aus .dhead--um erbt und seine Umlaute (ENTRÜMPELUNG,
   HAUSHALTSAUFLÖSUNG) beim Umbruch auf schmalen Viewports kollidieren würden. */
.shero h1 .kicker{display:block;line-height:1.4;margin-bottom:1.35rem}
/* max-width:16ch war der einzige Grund, warum „Entrümpelung in Augsburg." umbrach
   — nicht der Schriftgrad. Gemessen braucht die Zeile das 11,6-fache des
   Schriftgrads an Breite; 28ch lassen sie ab 430 px auf einer Zeile und halten
   eine künftige lange Überschrift trotzdem davon ab, die vollen 1180 px zu laufen.
   Unter 430 px fehlten bei 390 px genau 2 px, deshalb der min()-Deckel: er greift
   ausschliesslich auf schmalen Viewports und lässt alles ab 430 px unverändert. */
.shero__claim{display:block;max-width:28ch;
  font-size:min(7vw,clamp(1.9rem,5.2vw,3.9rem))}
.shero__sub{font-size:1.125rem;max-width:44ch;color:var(--muted);margin:0 0 1.75rem}
.shero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
/* Wie auf der Startseite: unter 400px laufen beide Schaltflächen auf volle
   Breite, statt unterschiedlich breit untereinander zu stehen. */
@media (max-width:400px){ .shero__cta{gap:.6rem} .shero__cta .btn{flex:1 1 100%} }

@media (max-width:900px){
  .shero__bg img{object-position:64% 50%}
  /* Gemessen 24.08.2026. Der Schleier stand bei 60 % Höhe auf .45 — genau dort
     liegt der Fließtext. Gegen die dunkelsten 2 % der Bildfläche dahinter kam
     --muted (#5E655D) damit auf 1,21 : 1; WCAG AA verlangt 4,5 : 1 für 18 px.
     Der Schleier hält jetzt bis 78 % mindestens .78 und fällt erst darunter ab,
     der Fließtext läuft auf --ink-2. Nachgemessen: 8,33 : 1 im ungünstigsten
     Fall, 9,29 : 1 im Median. Unterhalb des Textblocks bleibt das Foto frei. */
  .shero__veil{background:linear-gradient(180deg,
    rgba(247,246,241,.96) 0%,
    rgba(247,246,241,.93) 42%,
    rgba(247,246,241,.86) 62%,
    rgba(247,246,241,.78) 78%,
    rgba(247,246,241,.32) 92%,
    rgba(247,246,241,0) 100%)}
  .shero__sub{color:var(--ink-2)}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.85rem 1.5rem;border-radius:999px;
  border:1.5px solid transparent;text-decoration:none;
  font-weight:700;font-size:.9375rem;cursor:pointer;
  transition:background .25s var(--e),color .25s var(--e),border-color .25s var(--e),scale .16s var(--e);
}
.btn .i{width:18px;height:18px;flex:none}
a.btn--lime,.btn--lime{background:var(--lime);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn--lime:hover{background:var(--lime-deep);color:var(--paper)}}
a.btn--dark,.btn--dark{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.btn--dark:hover{background:var(--lime);color:var(--ink)}}
a.btn--ghost,.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(247,246,241,.4)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:var(--paper);color:var(--ink)}}

/* ---------- Raster ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

.card{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-img);
  padding:clamp(1.1rem,2vw,1.6rem);
}
.sec--dark .card{background:rgba(247,246,241,.05);border-color:var(--hair-d)}
.card h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--muted);max-width:none}
.sec--dark .card p{color:var(--paper-72)}

/* ---------- Aufzählung mit Häkchen ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;line-height:1.55}
.ticks .i{width:20px;height:20px;flex:none;margin-top:.2rem;color:var(--lime-deep)}
.sec--dark .ticks .i{color:var(--lime)}
/* Ausschlussliste: dieselbe Struktur, anderes Symbol und ruhigere Farbe. */
.ticks--no .i{color:var(--muted)}

/* ---------- Ablauf als nummerierte Schritte ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.1rem}
.steps li{
  counter-increment:s;position:relative;padding-left:3.2rem;
  font-size:1rem;line-height:1.6;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;
  width:2.3rem;height:2.3rem;border-radius:999px;
  display:grid;place-items:center;
  background:var(--soft);color:var(--lime-deep);
  font-weight:800;font-size:.9375rem;font-variant-numeric:tabular-nums;
}
.steps b{display:block;margin-bottom:.15rem}
.steps span{color:var(--muted)}
.sec--dark .steps li::before{background:rgba(141,186,21,.16);color:var(--lime)}
.sec--dark .steps span{color:var(--paper-72)}

/* ---------- Vorher / Nachher ---------- */
.ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.ba__item{margin:0}
.ba__pair{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.ba__shot{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--stone-2)}
.ba__shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba__tag{
  position:absolute;left:.5rem;top:.5rem;
  padding:.2rem .55rem;border-radius:999px;
  background:rgba(17,19,15,.82);color:var(--paper);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.ba__cap{margin:.6rem 0 0;font-size:.9375rem;font-weight:600}
.ba__sub{display:block;font-weight:500;color:var(--muted);font-size:.875rem}

/* ---------- Bildblock ---------- */
.shot{margin:0;border-radius:var(--r-img);overflow:hidden;background:var(--stone-2)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem}
.faq details{
  background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:.2rem 1.1rem;
}
.faq summary{
  cursor:pointer;padding:.95rem 0;font-weight:650;font-size:1.0625rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:11px;height:11px;
  border-right:2px solid var(--lime-deep);border-bottom:2px solid var(--lime-deep);
  rotate:45deg;transition:rotate .25s var(--e);
}
.faq details[open] summary::after{rotate:-135deg}
.faq p{margin:0 0 1rem;color:var(--muted);max-width:70ch}

/* ---------- CTA-Band ---------- */
.cta__row{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-top:1.5rem}

/* ---------- Formular ---------- */
/* Die Formularregeln standen hier ein zweites Mal, aus der Zeit vor der
   Kontakt-Section. Der spätere Block im Abschnitt „Kontakt" überschrieb fast
   alles davon — mit zwei Folgen: `.form .row` (0-2-0) schlug dort die
   Mobil-Regel `.row` (0-1-0), sodass zwischen 561 und 620 px zwei Spalten
   stehen blieben, und `.form__send` / `.form__note` waren tote Klassen, die
   im Markup nie vorkamen. Beides ist mit dem Löschen erledigt.
   Die einzige gültige Fassung steht jetzt unter „Kontakt / Formularkarte". */

/* ---------- Brotkrumen ---------- */
.crumbs{font-size:.8125rem;color:var(--muted);margin:0;padding-block:1rem 0}
.crumbs a{color:var(--muted);text-decoration:none;min-height:0}
@media (hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--lime-deep)}}
.crumbs span{opacity:.5;padding-inline:.35rem}

/* ---------- Querverweise auf andere Leistungen ---------- */
.more__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.more__links a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem 1rem;border:1px solid var(--hair);border-radius:999px;
  text-decoration:none;font-size:.9375rem;font-weight:600;
  transition:border-color .2s var(--e),background .2s var(--e);
}
@media (hover:hover) and (pointer:fine){.more__links a:hover{border-color:var(--lime-deep);background:var(--soft)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   Kopf und Mobil-Leiste wie auf der Startseite.
   base.css bringt einen schlichten Kopf mit „Zur Startseite" mit — der
   passt für Rechtstexte, wirkt auf einer Leistungsseite aber wie eine
   Sackgasse. Hier die vollständige Navigation, damit die Seite sich als
   Teil der Website anfühlt und nicht als Anhang.
   ============================================================ */
.hdr__in{gap:1.25rem}
/* margin-inline:auto verteilt nur den Rest zwischen Logo und Schaltflächen —
   weil die rechte Gruppe breiter ist als das Logo, sass die Leiste 134px
   links der Fenstermitte. Absolut zentriert sitzt sie wirklich mittig.
   pointer-events wieder aktivieren, sonst schluckt die Leiste die Klicks
   auf Logo und Schaltflächen. */
.hdr__in{position:relative}
.hdr__nav{
  position:absolute;left:50%;translate:-50% 0;
  display:flex;gap:1.6rem;align-items:center;
}
.hdr__home{display:inline-flex;align-items:center;gap:.4rem}
.hdr__home svg{width:15px;height:15px}
.hdr__nav a{
  text-decoration:none;font-size:.9375rem;font-weight:550;opacity:.85;
  color:var(--ink);display:flex;align-items:center;min-height:44px;
  white-space:nowrap;
}
/* Die eigene Seite: Unterstrich in Tinte, kein Lime-Text (Build-Regel 1) */
.hdr__nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.4em}
@media (hover:hover) and (pointer:fine){.hdr__nav a:hover{opacity:1}}
/* ---- Auswahl „Leistungen“ in der Kopfleiste (15.09.2026) -------------------
   Derselbe Block steht in index.html und service.css — beide mitziehen.
   Maus: öffnet per :hover. Tastatur und Touch: der Knopf schaltet data-open,
   Escape, Klick daneben und Verlassen mit dem Fokus schließen wieder. Ohne JS
   bleibt :hover, und kein Ziel hängt an der Auswahl: Entrümpelung steht als
   eigener Punkt daneben, beide Seiten sind über die Leistungskarten verlinkt. */
.dd{position:relative;display:flex}
.dd__btn{display:flex;align-items:center;gap:.3rem;min-height:44px;padding:0;border:0;background:none;
  font:inherit;font-size:.9375rem;font-weight:550;color:inherit;opacity:.85;cursor:pointer;white-space:nowrap}
.dd[data-open] .dd__btn{opacity:1}@media (hover:hover) and (pointer:fine){.dd__btn:hover{opacity:1}}
.dd__btn svg{width:14px;height:14px;flex:none;transition:rotate .2s cubic-bezier(.16,1,.3,1)}
.dd[data-open] .dd__btn svg{rotate:180deg}
.dd__list{position:absolute;top:calc(100% + .35rem);left:50%;translate:-50% 0;z-index:1;
  min-width:21rem;margin:0;padding:.4rem;list-style:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-radius:16px;
  box-shadow:0 12px 30px -12px rgba(17,19,15,.2);
  opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s}
/* Brücke über den Abstand, damit die Maus auf dem Weg nach unten nicht abreißt */
.dd__list::before{content:'';position:absolute;inset:auto 0 100%;height:.5rem}
.dd[data-open] .dd__list{opacity:1;visibility:visible;transition:opacity .18s}
@media (hover:hover){
  .dd:hover .dd__list{opacity:1;visibility:visible;transition:opacity .18s}
  .dd:hover .dd__btn{opacity:1}
  .dd:hover .dd__btn svg{rotate:180deg}
}
.hdr__nav .dd__list a{display:block;min-height:0;padding:.6rem .8rem;border-radius:10px;
  opacity:1;white-space:normal;line-height:1.3;text-decoration:none}
.hdr__nav .dd__list a:focus-visible{background:var(--soft)}@media (hover:hover) and (pointer:fine){.hdr__nav .dd__list a:hover{background:var(--soft)}}
.dd__list b{display:block;font-weight:650}
.dd__list small{display:block;margin-top:.15rem;font-size:.8125rem;font-weight:450;color:var(--muted)}
.dd__all{margin-top:.3rem;padding-top:.3rem;border-top:1px solid var(--hair)}
/* Die eigene Seite: Unterstrich nur am Titel, nicht an der Zeile darunter */
.dd__list a[aria-current="page"] b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.3em}
.hdr__act{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.hdr__act .btn{min-height:44px;padding:.55rem 1.1rem;font-size:.875rem}
a.btn--plain,.btn--plain{background:var(--paper);color:var(--ink);border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){.btn--plain:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
/* Mit sieben Punkten reicht die Mitte erst ab 1440 px (gemessen 11.09.2026).
   Darunter rückt die Leiste zwischen Logo und Knöpfe, statt sie zu überdecken —
   genau das tat die zentrierte Leiste vorher zwischen 1081 und rund 1280 px.
   Mit dem Pfeil an „Leistungen“ (15.09.2026) bleiben bei 1440 px rechts 17 px,
   bei 1340 px je 20 px — gemessen.
   Wo auch das nicht mehr reicht, bleibt nur der Rückweg zur Startseite. */
@media (max-width:1439px){
  .hdr__nav{position:static;translate:none;margin-inline:auto}
}
/* Unter 1340 px bricht die Telefonnummer im Knopf rechts um (gemessen: bei
   1301 px 67 statt 44 px hoch), ab 1340 px bleiben 26/33 px Luft. */
@media (max-width:1339px){
  /* Leiste weg, aber der Rückweg zur Startseite bleibt sichtbar. */
  .hdr__nav{margin-inline:0 auto}
  .hdr__nav a:not(.hdr__home),.hdr__nav .dd{display:none}
}
/* .btn--plain trägt nur ein <span> und kein Icon. Mit der Regel darunter allein
   blieb davon eine leere Pille im Kopf stehen — sichtbar in den Kundenscreenshots
   vom 24.08.2026. Die Startseite blendet die Schaltfläche auf Mobil ganz aus,
   weil die fixierte CTA-Leiste unten „Anfragen" ohnehin abdeckt. Hier genauso. */
@media (max-width:560px){
  .hdr__act .btn--plain{display:none}
  .hdr__act .btn span{display:none}
  .hdr__act .btn{padding:.55rem .8rem}
}

/* Mobil-Leiste: dieselbe wie auf der Startseite, inklusive der Regel, dass
   Lime nur das Icon trägt und nie die Beschriftung (Build-Regel 1). */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--ink);
}
.bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:58px;text-decoration:none;font-weight:650;font-size:1rem;color:var(--paper);
}
.bar .i{width:19px;height:19px}
.bar .wa{border-left:1px solid var(--hair-d)}
.bar .wa .i{color:var(--lime)}
@media (max-width:880px){ .bar{display:flex} body{padding-bottom:58px} }

/* ============================================================
   Scroll-Reveals wie auf der Startseite.
   Nur mit JS aktiv (html.js), damit ohne Skript nichts unsichtbar
   bleibt — dieselbe Absicherung wie auf der Startseite.
   ============================================================ */
html.js .rv{opacity:0;translate:0 28px}
html.js .rv.on{opacity:1;translate:0;transition:opacity 1s var(--e),translate 1.05s var(--e)}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1!important;translate:none!important}
}


/* ============================================================
   Aus index.html übernommen (17.08.2026): Vorher/Nachher, Kontakt
   und Fuß. Damit sieht die Leistungsseite aus wie die Startseite.

   ⚠️ Diese Blöcke existieren jetzt zweimal — hier und inline in
   index.html. Wer dort etwas ändert, muss es hier nachziehen.
   Der saubere Weg wäre, index.html ebenfalls auf base.css +
   service.css umzustellen; das ist ein eigener Umbau.
   ============================================================ */
/* ============================================================
   4 · VORHER / NACHHER — eine Karte statt Sticky-Track plus Leiste
   ============================================================ */
/* Bis hierher lief der Vergleich über einen 190 vh langen Sticky-Track und
   darunter eine zweite Leiste mit eigenen Wipe-Karten — zusammen knapp drei
   Bildschirmhöhen. Jetzt eine Karte plus Auswahlreihe darunter: ein Klick
   holt ein Paar in die große Bühne, der Scrollweg entfällt.
   Leserichtung wie im Entwurf: links vorher, rechts nachher.
   --rev ist die Position der Trennkante, von links gemessen. */
/* Eigenes Abstandsmaß entfällt: die Section läuft auf demselben --sec wie
   alle anderen, damit auch dieselbe Sprungziel-Rechnung greift. */
/* ---------- Vorher/Nachher auf Anthrazit (16.08.2026) ----------
   Die Section trug ihre Farben durchgehend über Tokens, deshalb genügt es,
   die Tokens im Abschnitt neu zu binden. Eigene Regeln braucht nur, wo
   --ink zugleich „Textfarbe auf hellem Grund" bedeutet — dort wäre eine
   Umdeutung des Tokens falsch.
   Rückgängig: `on-dark` am <section> entfernen und diesen Block löschen. */
#arbeit.on-dark{
  --card:var(--ink-2);
  --hair:var(--hair-d);
  --muted:#9A9C93;      /* gemessen 6,64 : 1 auf Anthrazit */
  --lime-deep:var(--lime);
  --stone-2:#2A2E26;
}
#arbeit.on-dark .cmp{box-shadow:var(--sh-dk)}
#arbeit.on-dark .cmp__cta{color:var(--paper)}
@media (hover:hover) and (pointer:fine){#arbeit.on-dark .cmp__cta:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}}
#arbeit.on-dark .work__nav button{color:var(--paper)}
@media (hover:hover) and (pointer:fine){#arbeit.on-dark .work__nav button:hover:not(:disabled){background:var(--paper);color:var(--ink);border-color:var(--paper)}}
#arbeit.on-dark .work__thumb{color:var(--paper)}
@media (hover:hover) and (pointer:fine){#arbeit.on-dark .work__thumb:hover{border-color:rgba(247,246,241,.4);box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}}
#arbeit.on-dark .work__thumb.is-on .work__go{background:var(--lime);color:var(--ink);border-color:var(--lime)}

.work__head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.work__kicker{
  margin:0 0 .8rem;font-size:.9375rem;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  /* wie bei den Leistungen: Lime hat auf Warmweiß 2,29 : 1 und fällt durch
     WCAG AA — grüner Text ist deshalb Dunkelgrün mit 5,65 : 1 */
  color:var(--lime-deep);
}
.work__head .sub{margin:.85rem 0 0;max-width:54ch}

/* ---------- Die Vergleichskarte ---------- */
.cmp{
  margin:0;background:var(--card);border:1px solid var(--hair);
  border-radius:var(--r-img);overflow:hidden;
  box-shadow:0 1px 2px rgba(17,19,15,.04),0 14px 34px -20px rgba(17,19,15,.3);
}
.cmp__stage{
  position:relative;width:100%;aspect-ratio:16/9;
  /* Deckel statt freier Höhe: bei 16:9 wäre die Bühne auf 1440 px allein
     745 px hoch, und die Section passte in kein Fenster mehr */
  max-height:clamp(300px,46svh,540px);
  background:var(--stone-2);overflow:hidden;
}
.cmp__pair{position:absolute;inset:0}
.cmp__pair[hidden]{display:none}
.cmp__layer{position:absolute;inset:0}
.cmp__layer img{width:100%;height:100%;object-fit:cover;display:block}
/* Vorher liegt oben und wird von rechts weggeschnitten. Es steht auch im
   Markup zuerst — ohne JS ist die Reihenfolge dann vorher, dann nachher. */
.cmp__before{z-index:2;clip-path:inset(0 calc(100% - var(--rev,55%)) 0 0)}
/* Nur während der Geste auf eine eigene Ebene heben. Dauerhaft kostet das
   Grafikspeicher für ein Bild, das die meiste Zeit still steht. */
.cmp__stage[data-grab] .cmp__before{will-change:clip-path}
/* Die Trennkante ist weiß, nicht grün: so liest sie sich als physische
   Schnittkante statt als Akzentstreifen, und Lime bleibt beim Griff. */
/* Linie, Griff und Hinweis laufen über translate statt über left: left
   rechnet pro Bild das Layout der Bühne neu, translate läuft im Compositor.
   --revpx liefert das Skript in Pixeln (--rev bleibt Prozent für den
   Zuschnitt). Ohne JS sind alle drei ausgeblendet, deshalb genügt 0 als
   Rückfallwert. */
.cmp__line{
  position:absolute;top:0;bottom:0;left:0;width:2px;z-index:3;
  translate:var(--revpx,0px) 0;
  background:var(--paper);pointer-events:none;box-shadow:0 0 8px rgba(17,19,15,.35);
}
.cmp__tag{
  position:absolute;top:1rem;z-index:4;padding:.34rem .8rem;border-radius:999px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(17,19,15,.2);
}
.cmp__tag--v{left:1rem;background:var(--ink);color:var(--paper)}
/* Text auf Lime ist Anthrazit — 8,16 : 1, Build-Regel 1 */
.cmp__tag--n{right:1rem;background:var(--lime);color:var(--ink)}

/* Schieberegler auf der Trennlinie. Maus, Finger und Tastatur bedienen
   denselben Wert; ein Klick auf die Bühne springt an die Stelle. */
.cmp__grip{
  position:absolute;top:50%;left:0;translate:calc(var(--revpx,0px) - 50%) -50%;z-index:5;
  width:56px;height:56px;padding:0;border:none;border-radius:999px;cursor:grab;
  background:var(--lime);color:var(--ink);display:grid;place-items:center;
  /* Weißer Ring plus Schatten: Lime auf einer hellen Wand hat rund 1,8 : 1
     und hätte allein keine erkennbare Kante */
  box-shadow:0 0 0 3px var(--paper),0 4px 14px rgba(17,19,15,.3);touch-action:none;
}
.cmp__grip:active{cursor:grabbing;scale:.95}
.cmp__grip svg{width:26px;height:26px;pointer-events:none}
.cmp__stage[data-grab]{cursor:grabbing}
/* Hinweis wandert mit dem Griff und verschwindet nach der ersten Berührung */
.cmp__hint{
  position:absolute;left:0;top:calc(50% + 52px);translate:calc(var(--revpx,0px) - 50%) 0;z-index:4;
  margin:0;padding:.4rem .8rem;border-radius:999px;white-space:nowrap;
  background:rgba(17,19,15,.88);color:var(--paper);
  font-size:.8125rem;font-weight:600;pointer-events:none;
  transition:opacity .35s var(--e);
}
.cmp.is-used .cmp__hint{opacity:0}
/* Der Hinweis wandert mit dem Griff. Im Ausgangszustand steht der Griff bei 100 %,
   dort lief die Pille auf schmalen Displays aus der Bühne heraus (gemessen 360 px:
   Rand bei 418 statt 360) und wurde vom overflow der Bühne abgeschnitten. Unter
   620 px steht sie deshalb fest in der Mitte statt mitzuwandern. */
@media (max-width:620px){
  .cmp__hint{left:50%;translate:-50% 0;max-width:calc(100% - 2rem);white-space:normal;text-align:center}
}

.cmp__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,1.8vw,1.4rem);border-top:1px solid var(--hair);
}
.cmp__foot p{margin:0;max-width:none}
.cmp__meta{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600}
.cmp__meta svg{width:19px;height:19px;flex:none;color:var(--lime-deep)}
.cmp__res{font-size:.9375rem;color:var(--muted)}
/* CTA nach Entwurf: kantiger als die Pillen der Seite, Grundmaße von .btn */
.cmp__cta{
  border-radius:10px;min-height:52px;padding:.7rem 1.25rem;
  font-size:.9375rem;font-weight:650;
  background:transparent;color:var(--ink);border-color:var(--lime-deep);
}
@media (hover:hover) and (pointer:fine){.cmp__cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
.cmp__cta svg{width:17px;height:17px;flex:none}
/* Fließtext je Paar — steht nur da, wenn kein JS läuft und alle sechs
   Paare untereinander stehen */
.cmp__nojs{display:none;margin:.35rem 0 1.75rem;font-size:.9375rem;color:var(--muted)}

/* ---------- Auswahlreihe ---------- */
.work__sel{margin-top:clamp(1.5rem,2.8vw,2.25rem)}
.work__selhead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:.9rem}
.work__selhead h3{font-size:clamp(1.0625rem,1.5vw,1.3125rem)}
.work__nav{display:flex;gap:.5rem;flex:none}
.work__nav button{
  width:46px;height:46px;flex:none;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:transparent;color:var(--ink);
  display:grid;place-items:center;
  transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e),scale .16s var(--e);
}
@media (hover:hover) and (pointer:fine){.work__nav button:hover:not(:disabled){background:var(--ink);color:var(--paper);border-color:var(--ink)}}
.work__nav button:disabled{opacity:.28;cursor:default}
.work__nav svg{width:18px;height:18px}
.work__nav .prev svg{rotate:180deg}

.work__thumbs{
  display:flex;gap:clamp(.6rem,1.1vw,1rem);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  /* 2 px Luft, sonst schneidet der Overflow den Ring der aktiven Karte an */
  padding:2px 2px 4px;
}
.work__thumbs::-webkit-scrollbar{display:none}
.work__thumb{
  flex:1 1 190px;min-width:172px;scroll-snap-align:start;
  display:block;padding:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:var(--card);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  transition:border-color .25s var(--e),box-shadow .25s var(--e),scale .16s var(--e);
}
.work__thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--stone-2)}
.work__tfoot{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem .75rem}
.work__ttxt{display:block;min-width:0}
/* 14 px, nicht 15: „3-Zimmer-Wohnung“ brach bei 15 px in der 207 px breiten
   Karte um, und dann standen die Kartenfüße unterschiedlich hoch */
.work__tfoot b{display:block;font-size:.875rem;font-weight:650;line-height:1.25}
.work__tsub{display:block;margin-top:.1rem;font-size:.8125rem;color:var(--muted);line-height:1.3}
.work__go{
  margin-left:auto;flex:none;width:32px;height:32px;border-radius:999px;
  display:grid;place-items:center;border:1px solid var(--hair);
  transition:background-color .25s var(--e),color .25s var(--e),border-color .25s var(--e);
}
.work__go svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){.work__thumb:hover{border-color:rgba(17,19,15,.32);box-shadow:0 10px 26px -18px rgba(17,19,15,.45)}}
/* Aktive Karte: Ring in Dunkelgrün, nicht in Lime. Als bedeutungstragende
   Grafik braucht der Ring 3 : 1 — Lime auf Warmweiß hat 2,29 : 1,
   Dunkelgrün 5,65 : 1. Der gefüllte Pfeil kommt dazu, damit der Zustand
   nicht allein an der Farbe hängt. */
.work__thumb.is-on{border-color:var(--lime-deep);box-shadow:0 0 0 1px var(--lime-deep)}
.work__thumb.is-on .work__go{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- Ohne JS: alle sechs Paare untereinander, Bedienung weg ---------- */
html:not(.js) .work__sel{display:none}
html:not(.js) .cmp{background:transparent;border:none;box-shadow:none;overflow:visible}
html:not(.js) .cmp__stage{aspect-ratio:auto;max-height:none;background:transparent;overflow:visible}
html:not(.js) .cmp__pair,html:not(.js) .cmp__pair[hidden]{display:block;position:static}
html:not(.js) .cmp__layer{position:static}
html:not(.js) .cmp__layer img{height:auto;border-radius:var(--r-img)}
html:not(.js) .cmp__after{margin-top:.75rem}
html:not(.js) .cmp__before{clip-path:none}
html:not(.js) .cmp__line,html:not(.js) .cmp__grip,
html:not(.js) .cmp__hint,html:not(.js) .cmp__tag{display:none}
html:not(.js) .cmp__nojs{display:block}
html:not(.js) .cmp__meta,html:not(.js) .cmp__res{display:none}
html:not(.js) .cmp__foot{padding-inline:0;border-top:none}

@media (max-width:880px){
  /* 16:9 ergibt bei 350 px Breite eine 197 px hohe Bühne — Hochformat wie
     im Hero. Der Deckel muss dafür weg, sonst wird daraus wieder 1:1. */
  .cmp__stage{aspect-ratio:4/5;max-height:none}
  .cmp__grip{width:48px;height:48px}
  .cmp__hint{top:calc(50% + 46px);font-size:.75rem}
  .work__selhead{gap:1rem}
}
@media (max-width:620px){
  .cmp__foot{flex-direction:column;align-items:stretch;gap:.55rem}
  .cmp__cta{width:100%;margin-top:.35rem}
  .work__thumb{flex:0 0 min(76vw,300px);min-width:0}
}

/* ============================================================
   10 · KONTAKT
   Dunkle Section, helle Formularkarte rechts.
   ============================================================ */
.contact__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(1.75rem,4vw,4.5rem);align-items:center;
}
.contact__kicker{
  margin:0 0 .85rem;font-size:.9375rem;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
}
/* Eigener Grad: „Den Rest klären wir." braucht bei 'wdth' 66 gemessen
   8,44 px je 1 px Schriftgrad, die Spalte ist nur 44 % der Fensterbreite.
   Mit dem Standard-.dhead (5,5 vw) liefe die Zeile über die Kante. */
.dhead--contact{font-size:clamp(1.9rem,4.9vw,4.5rem)}
/* Ab 980 px steht die Spalte allein, ab 820 px greift die Mobil-Staffel der
   übrigen Headlines. Beide Regeln müssen hier stehen: `.dhead--contact` ist
   gleich spezifisch wie `.dhead` und käme sonst später in der Datei durch —
   die Headline wäre auf dem Smartphone 30 statt 52 px. */
@media (max-width:980px){ .dhead--contact{font-size:clamp(1.9rem,5.5vw,5.25rem)} }
@media (max-width:820px){ .dhead--contact{font-size:clamp(1.9rem,8.4vw,3.25rem)} }
/* Die zwei Zeilen der Kontakt-Überschrift sind Spans. Auf der Startseite
   macht `.dhead span{display:block}` sie zu Zeilen; hier fehlte die Regel, und
   „Ein Anruf." lief ohne Leerzeichen in „Den Rest …" hinein — sichtbar als
   „ANRUF.DEN", und Screenreader lasen es genauso. Gefunden 11.09.2026. */
.dhead--contact span{display:block}
.contact__sub{
  margin:clamp(1.1rem,1.8vw,1.7rem) 0 0;max-width:46ch;
  font-size:clamp(1rem,.3vw + .93rem,1.125rem);line-height:1.55;color:var(--paper-72);
}
.contact__rule{
  display:block;width:56px;height:2px;background:var(--lime);
  margin:clamp(1.1rem,1.8vw,1.6rem) 0 0;
}

.contact__tel{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;min-height:44px;
  margin:clamp(1rem,1.8vw,1.6rem) 0 0;color:var(--lime);
  font-size:clamp(2rem,4.4vw,3.75rem);font-weight:700;line-height:1.1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.contact__tel .i{width:.72em;height:.72em;flex:none}
@media (hover:hover) and (pointer:fine){.contact__tel:hover{color:var(--paper)}}

.contact__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;margin-top:clamp(1.1rem,1.8vw,1.6rem)}
/* Versal wie in der Referenz — nur hier, .btn trägt die ganze Seite. */
.contact__cta .btn{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.875rem}
/* Kontur statt Fläche — .btn--plain wäre eine helle Fläche auf Anthrazit
   und würde neben dem Lime-Button die Rangfolge umdrehen. */
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(247,246,241,.4)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}}
.contact__mail{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  text-decoration:none;color:var(--paper);
  font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--lime);
}
.contact__mail .i{width:15px;height:15px;flex:none;transition:translate .3s var(--e)}
@media (hover:hover) and (pointer:fine){.contact__mail:hover{color:var(--lime)}}
@media (hover:hover) and (pointer:fine){.contact__mail:hover .i{translate:3px -3px}}

/* Raster statt Flex: als Flex-Elemente fielen die Kästchen auf ihre
   Inhaltsbreite zurück, die zweite Zeile von „Persönlicher Ansprechpartner"
   lief dann über die Trennlinie in die Nachbarspalte. */
.contact__checks{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin:clamp(1.4rem,2.4vw,2.25rem) 0 0;padding:0;
}
.contact__checks li{
  display:flex;align-items:flex-start;gap:.6rem;
  padding-right:clamp(1.1rem,1.8vw,1.75rem);
  font-size:.875rem;font-weight:600;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;
}
.contact__checks li+li{
  border-left:1px solid var(--hair-d);
  padding-left:clamp(1.1rem,1.8vw,1.75rem);
}
.contact__checks .i{width:18px;height:18px;flex:none;color:var(--lime);margin-top:-.1em}
.contact__hours{margin:1.4rem 0 0}

/* Formularkarte — Stand identisch zu index.html (17.08.2026). Beide Seiten
   zeigen dasselbe Formular, deshalb bleibt auch die Fassung wortgleich.
   Kopfzeile mit Statuspille, drei nummerierte Schritte in eigenen Feldern.
   Warmes Weiß statt reinem Weiß, wie die Kartenflächen bei Vorher/Nachher. */
.fcard{
  background:var(--card);color:var(--ink);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.6vw,2.75rem);box-shadow:var(--sh-dk);
}
.fcard__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.9rem 1.25rem;flex-wrap:wrap;
}
.fcard__kicker{
  margin:0 0 .55rem;font-size:.8125rem;font-weight:700;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lime-deep);
}
.fcard__title{
  margin:0;font-size:clamp(1.375rem,1.9vw,2rem);line-height:1.05;
  letter-spacing:-.005em;text-transform:uppercase;
  font-weight:800;font-variation-settings:'wdth' 66;
}
/* Statuspille neben der Überschrift. Der Punkt ist reines Dekor, trägt aber
   trotzdem Lime-Deep: volles Lime steht auf der Kartenfläche bei 2,29 : 1
   und wäre kaum zu erkennen. */
.fcard__badge{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;margin:.15rem 0 0;
  padding:.5rem .95rem;border:1.5px solid var(--hair);border-radius:999px;
  font-size:.8125rem;font-weight:600;color:var(--muted);white-space:nowrap;
}
.fcard__badge::before{
  content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--lime-deep);
}
.fcard__sub{margin:.7rem 0 0;font-size:.9375rem;color:var(--muted);max-width:44ch}
/* Sitzt die Karte in einer dunklen Section, erben .tiny und .sub die Farbe
   für dunklen Grund und stehen hell auf hell — gemessen 1,02 : 1. */
.fcard .tiny,.fcard .sub{color:var(--muted)}
.sec--dark .fcard{color:var(--ink)}
.sec--dark .fcard p{color:var(--muted)}
.form{display:grid;gap:.85rem;margin-top:1.75rem}

/* Schrittfeld. `display:grid` nimmt der legend ihre Sonderrolle: sie fließt
   als gewöhnliches Rasterkind in die Fläche, statt den oberen Rahmen zu
   durchbrechen. Ohne das säße die Beschriftung mitten in der Rahmenlinie. */
.fstep{
  display:grid;gap:.85rem;min-width:0;margin:0;
  padding:clamp(1rem,1.5vw,1.35rem);
  border:1.5px solid var(--hair);border-radius:18px;background:var(--paper);
}
/* flex-wrap, damit bei 390 px der Zusatz „(Mehrfachauswahl)" in die zweite
   Zeile fällt, statt „Worum geht es?" auf zwei Wörter zusammenzudrücken. */
.fstep__lg{
  display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .65rem;padding:0;margin:0;
  font-size:.8125rem;font-weight:700;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
/* Schrittziffer grün, aber als Text zwingend Lime-Deep — volles Lime fällt
   durch WCAG AA (harte Build-Regel 1). */
.fstep__no{
  font-size:.875rem;font-weight:800;letter-spacing:.02em;
  color:var(--lime-deep);font-variant-numeric:tabular-nums;
}
.fstep__lg .field__opt{color:var(--muted)}

.row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:grid;gap:.4rem;min-width:0}
.field label{font-size:.8125rem;font-weight:600;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.8rem 1rem;border-radius:12px;
  border:1.5px solid var(--hair);background:var(--card);color:var(--ink);font:inherit;font-size:1rem;
  transition:border-color .2s var(--e),box-shadow .2s var(--e);
}
/* Kein zusätzliches `opacity`: schon bei .6 steht der Platzhalter auf der
   Kartenfläche bei 2,55 : 1 und fällt durch WCAG AA. Ungedimmt sind es
   5,81 : 1 — die sichtbare Beschriftung darüber trennt ihn ohnehin von
   einem echten Eintrag. */
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field textarea{min-height:104px;resize:vertical}
/* Der Rahmenwechsel allein wäre ein reiner Farbunterschied und damit als
   Fokusanzeige zu schwach — der Ring trägt die Sichtbarkeit. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:none;border-color:var(--lime-deep);box-shadow:0 0 0 3px rgba(78,107,10,.2);
}
/* Kein `opacity:.8`: „(optional)" stand damit gemessen bei 3,67 : 1 auf der
   Feldfläche und fiel als Normaltext durch WCAG AA. Ohne Dimmung 5,57 : 1. */
.field__opt{font-weight:500;text-transform:none;letter-spacing:0}

/* Eigene Auswahlkästchen statt `accent-color`: die Auswahl sitzt rechts in
   der Kachel und braucht dort eine ruhige, überall gleich große Fläche.
   Das Häkchen ist eine Data-URI, kein externer Abruf — harte Build-Regel 3.
   24 px ist die Untergrenze aus WCAG 2.2 (2.5.8, Zielgröße minimum). */
.cbox{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:24px;height:24px;border:1.5px solid var(--hair);border-radius:8px;
  background:var(--card);cursor:pointer;
  transition:background-color .18s var(--e),border-color .18s var(--e);
}
.cbox:focus-visible{outline:3px solid var(--lime-deep);outline-offset:2px}
.cbox:checked{
  border-color:var(--lime-deep);
  background:var(--lime-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F6F1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}

/* Mehrfachauswahl der Leistungen: Icon links, Beschriftung, Kästchen rechts. */
.svcpick__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.55rem}
.svcpick__opt{
  display:flex;align-items:center;gap:.6rem;min-height:58px;padding:.6rem .8rem;
  border:1.5px solid var(--hair);border-radius:14px;background:var(--card);
  font-size:.9375rem;line-height:1.25;cursor:pointer;
  transition:border-color .2s var(--e),background .2s var(--e),scale .16s var(--e);
}
/* 20 statt 22 px: „Etwas anderes" braucht in der dreispaltigen Aufteilung
   rund 100 px Textbreite und lief sonst auf zwei Zeilen um. */
.svcpick__opt .i{width:20px;height:20px;flex:none;color:var(--muted);transition:color .2s var(--e)}
.svcpick__opt .cbox{margin-left:auto}
@media (hover:hover) and (pointer:fine){.svcpick__opt:hover{border-color:var(--lime-deep)}}
/* :has bindet den Zustand an das Label statt an ein Extra-Element im Markup.
   Rahmen und Fläche tragen die Auswahl mit, damit sie nicht allein am
   Kästchen hängt. */
.svcpick__opt:has(input:checked){border-color:var(--lime-deep);background:var(--soft)}
.svcpick__opt:has(input:checked) .i{color:var(--lime-deep)}
/* In der Kachel trägt der Rahmen den Fokus — sonst lägen zwei Ringe übereinander. */
.svcpick__opt:has(input:focus-visible){outline:3px solid var(--lime-deep);outline-offset:2px}
.svcpick__opt .cbox:focus-visible{outline:none}

/* Rückmeldung nach dem Absenden. role="status" meldet sie Screenreadern,
   ohne den Fokus zu stehlen. */
.form__msg{
  margin:0;padding:.85rem 1rem;border-radius:14px;font-size:.9375rem;line-height:1.45;
  border:1.5px solid transparent;
}
.form__msg[data-state="ok"]{background:var(--soft);border-color:var(--lime-deep);color:var(--ink)}
.form__msg[data-state="err"]{background:#FBEAEA;border-color:#A32323;color:#7A1A1A}
.consent{
  display:flex;gap:.75rem;align-items:flex-start;margin-top:.4rem;
  font-size:.875rem;line-height:1.5;color:var(--muted);cursor:pointer;
}
.consent .cbox{margin-top:.1rem;border-radius:7px}
.consent a{color:var(--ink)}
.fcard__send{
  width:100%;min-height:58px;gap:.6rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.fcard__send .i{width:18px;height:18px;flex:none;transition:translate .3s var(--e)}
@media (hover:hover) and (pointer:fine){.fcard__send:hover .i{translate:4px 0}}
/* Bewusst kein Flex: als Flex-Element stünde das Schild bei zweizeiligem
   Umbruch allein über dem Satz. Inline läuft es als erstes Zeichen mit.
   `display:inline-block` überschreibt die Grundregel `img,svg{display:block}`. */
.fcard__note{
  margin:0;font-size:.8125rem;line-height:1.5;color:var(--muted);text-align:center;
}
.fcard__note .i{
  display:inline-block;width:15px;height:15px;color:var(--lime-deep);
  vertical-align:-.2em;margin-right:.4rem;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:980px){
  .contact__in{grid-template-columns:1fr;gap:clamp(1.75rem,4vw,2.5rem)}
  .contact__sub{max-width:60ch}
}
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  /* Die Pille rutscht unter die Überschrift, statt sie auf zwei Wörter je
     Zeile zu quetschen. */
  .fcard__head{flex-direction:column;align-items:flex-start}
  .fcard__badge{margin-top:0}
  /* Drei Spalten ergäben bei 390 px 108 px je Zusage — „Persönlicher
     Ansprechpartner" braucht 186 und schob die Seite auf 427 px auf. */
  .contact__checks{grid-template-columns:1fr;gap:.85rem}
  .contact__checks li{max-width:none;padding-right:0}
  .contact__checks li+li{border-left:0;padding-left:0}
}

/* ============================================================
   11 · FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:var(--paper);padding-top:var(--sec);overflow:hidden}
.ftr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;padding-bottom:3rem}
.ftr h4{margin:0 0 1rem;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-55)}
.ftr ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
/* Die Footer-Listen sind Navigation, kein Fließtext — die Inline-Ausnahme aus
   WCAG 2.5.8 greift hier nicht. Ziele waren 16px hoch, jetzt 44px. Der frühere
   Listen-gap von .55rem steckt jetzt in der Zeilenhöhe, der Footer wächst dadurch
   nur um die Differenz. */
.ftr a{color:var(--paper-72);text-decoration:none;font-size:.9375rem;
  display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.ftr a:hover{color:var(--lime)}}
.ftr__base{
  border-top:1px solid var(--hair-d);margin-top:.5rem;padding-block:1.5rem 2.25rem;
  font-size:.8125rem;color:var(--paper-55);
  display:flex;gap:.75rem 1.5rem;flex-wrap:wrap;justify-content:space-between;align-items:center;
}
/* Wortmarke statt Entwurfsvermerk. Klein und mittig — sie schließt die
   Seite ab, ohne mit der Navigation darüber zu konkurrieren. */
.ftr__mark{display:inline-flex;align-items:center}
.ftr__mark img:last-child{width:104px;height:auto;opacity:.9}
/* Auf Anthrazit trägt die Bildmarke ihre Negativ-Fassung: das Dunkelgrün der
   Positiv-Marke kommt dort auf gemessene 1,35 : 1 und wäre unsichtbar. */
.brand__mark{width:30px;height:30px;flex:none;opacity:.9;margin-right:.5rem}
.ftr__by a{color:var(--paper-72);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:color .2s var(--e),border-color .2s var(--e)}
@media (hover:hover) and (pointer:fine){.ftr__by a:hover{color:var(--lime);border-color:var(--lime)}}

/* ---------- Mobile CTA ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:none;translate:0 110%;transition:translate .4s var(--e);background:var(--ink)}
.bar[data-on]{translate:0}
.bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;text-decoration:none;font-weight:650;font-size:1rem;color:var(--paper)}
/* Lime trägt nur das Icon, nicht die Beschriftung — Build-Regel 1 hält den Grünton
   grundsätzlich aus Text heraus. Als Grafik auf Anthrazit sind es 8,26 : 1, weit über
   den 3 : 1 aus WCAG 1.4.11. Beide Beschriftungen laufen damit auf derselben Farbe,
   die Kanäle unterscheiden sich über Wort und Symbol statt über Farbe allein. */
.bar .wa{border-left:1px solid var(--hair-d)}
.bar .wa .i{color:var(--lime)}
@media (max-width:880px){ .bar{display:flex} body{padding-bottom:58px} }

/* ---------- Reveal ---------- */
html.js .rv{opacity:0;translate:0 28px}
html.js .rv.on{opacity:1;translate:0;transition:opacity 1s var(--e),translate 1.05s var(--e)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv,html.js .pin{opacity:1!important;translate:none!important}
  /* Ohne Bewegung steht der Absatz sofort vollständig da */
  html.js .promise .w{color:var(--paper-72)!important}
}


/* Der Fuß von base.css ist einspaltig und schlicht — hier gilt der
   vierspaltige der Startseite. base.css wird vorher geladen, diese
   Regeln gewinnen. */
.ftr__in{display:none}

/* Bildspalte auf Texthöhe. Ohne das steht das 4:3-Bild deutlich kürzer oder
   länger als der Text daneben und die Zeile franst aus. `stretch` gibt beiden
   Spalten dieselbe Höhe, das Bild füllt sie über object-fit. */
.split--even{align-items:stretch}
.split--even .shot{height:100%}
.split--even .shot img{height:100%;aspect-ratio:auto;object-fit:cover}
/* Einspaltig greift das nicht mehr — dort braucht das Bild wieder ein Format. */
@media (max-width:900px){
  .split--even .shot img{height:auto;aspect-ratio:4/3}
}

/* ============================================================
   .on-dark stammt aus index.html, wo sie im allgemeinen Teil steht und
   deshalb nicht in den kopierten Blöcken enthalten war. Die übernommenen
   Sections (#arbeit, #kontakt) setzen sie aber voraus: ohne die Basisregel
   standen sie hell, während ihre Kindelemente die Farben für dunklen Grund
   behielten. Gemessen: Thumbnail-Beschriftungen 1,05 : 1, Kontakt-Subline
   1 : 1, also praktisch unsichtbar.
   ============================================================ */
.on-dark{background:var(--ink);color:var(--paper)}
.on-dark .sub{color:var(--paper-55)}
.on-dark .tiny{color:var(--paper-55)}
.on-dark .lede{color:var(--paper-72)}
.on-dark .kicker{color:var(--lime)}

/* ============================================================
   Kontakt auf hellem Grund (nur Leistungsseiten).
   Die übernommenen .contact__*-Regeln stammen aus index.html, wo die Section
   auf Anthrazit steht. Auf beigem Grund müssen Lime-Töne durch Dunkelgrün
   ersetzt werden: Lime hat auf Warmweiss nur 2,29 : 1 (Build-Regel 1).
   ============================================================ */
.contact.sec--stone .contact__kicker{color:var(--lime-deep)}
.contact.sec--stone .contact__sub{color:var(--muted)}
.contact.sec--stone .contact__tel{color:var(--lime-deep)}
@media (hover:hover) and (pointer:fine){.contact.sec--stone .contact__tel:hover{color:var(--ink)}}
.contact.sec--stone .contact__mail{color:var(--ink);border-bottom-color:var(--lime-deep)}
@media (hover:hover) and (pointer:fine){.contact.sec--stone .contact__mail:hover{color:var(--lime-deep)}}
.contact.sec--stone .contact__checks{color:var(--muted)}
.contact.sec--stone .contact__checks .i{color:var(--lime-deep)}
/* Kontur-Schaltfläche: auf Hell braucht sie eine dunkle Kante statt einer hellen. */
.contact.sec--stone .btn--ghost{color:var(--ink);border-color:var(--hair)}
@media (hover:hover) and (pointer:fine){.contact.sec--stone .btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
/* Die Formularkarte hebt sich auf beigem Grund über Warmweiss ab. */
/* Vorher stand hier `--paper`. Das ist seit dem Umbau vom 17.08.2026 genau
   die Fläche der Schrittfelder *innerhalb* der Karte — die Felder wären damit
   unsichtbar geworden. Mit `--card` ist der Abstand zum Beige (#E7E5DC)
   ohnehin größer, und die Karte sieht aus wie auf der Startseite. */
.contact.sec--stone .fcard{background:var(--card);color:var(--ink)}

/* Vorher/Nachher auf beigem Grund: die Bühne braucht eine sichtbare Kante,
   der Schatten allein trägt auf Beige nicht. */
/* Auf hellem Grund braucht die Bühne eine Kante, der Schatten allein trägt nicht. */
.work .cmp{border:1px solid var(--hair)}

/* Bei 320px liefen Logo, Rückweg und die beiden Schaltflächen zusammen 27px
   über die Kante. Unter 400px trägt der Rückweg nur noch den Pfeil. */
@media (max-width:400px){
  /* .hdr__nav a ist 0-1-1 und schlägt .hdr__home (0-1-0) — die Beschriftung
     blieb deshalb stehen. Mit dem Elementteil im Selektor gleicht sich das aus. */
  .hdr__nav a.hdr__home{font-size:0;gap:0}
  .hdr__nav a.hdr__home svg{width:19px;height:19px}
  .hdr__in{gap:.5rem}
  .hdr__mark{width:32px;height:32px}
  .hdr__word{width:92px}
}

/* Der Rückweg schrumpft unter 400px auf das Symbol. 19px waren unter der
   24px-Schwelle aus WCAG 2.5.8 — mit Innenabstand bleibt das Ziel treffbar. */
@media (max-width:400px){
  .hdr__nav a.hdr__home{padding-inline:.35rem;min-width:32px;justify-content:center}
}

/* ---- Umzugsseite (11.09.2026) --------------------------------------------
   Ein einzelnes Kundenzitat mit Quelle. Wie auf der Startseite OHNE Review-
   Schema: der Beleg ist der sichtbare Link aufs Portal (Build-Regel 13).
   Der Markenstrich ist Fläche, kein Text — Lime ist dort zulässig. */
.quote{margin:0;max-width:46rem}
.quote::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:var(--lime);margin-bottom:1.25rem}
.quote blockquote{margin:0;font-size:clamp(1.25rem,1.2vw + 1rem,1.625rem);line-height:1.45;
  font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.quote figcaption{margin-top:1rem;font-size:.9375rem;line-height:1.5;color:var(--muted)}
.quote figcaption b{color:var(--ink);font-weight:650;margin-right:.4rem}
/* Links im Fließtext: Unterstreichung als Kennzeichen, Farbe bleibt Tinte.
   Kein Lime als Linkfarbe (2,29 : 1, Build-Regel 1). */
.card a,.lede a,.faq a{color:var(--ink);font-weight:600;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){.card a:hover,.lede a:hover,.faq a:hover{color:var(--lime-deep)}}
/* Die Karte des Einsatzgebiets ist 3:1 und würde vom 4:3-Zuschnitt der .shot
   zerschnitten. Unter 700px etwas höher, sonst sind die Orte nicht lesbar. */
.shot--map img{aspect-ratio:3/1;object-fit:cover}
@media (max-width:700px){ .shot--map img{aspect-ratio:16/10} }

/* ---- Druck-Feedback (19.10.2026, nach Emil Kowalski) ----
   Alles, was man drückt, gibt beim Drücken um 3 % nach: Die Seite bestätigt
   den Klick, bevor die Antwort kommt. 160 ms auf der bestehenden Kurve --e,
   `scale` ist dafür an die vorhandenen Übergänge angehängt. Gesperrte Knöpfe
   bleiben stehen. Gilt auch auf Touch — dort gibt es kein Hover, nur Druck. */
.bar a{transition:scale .16s var(--e)}
:is(.btn,.work__nav button,.work__thumb,.svcpick__opt,.bar a):active:not(:disabled){scale:.97}