/* ------------------------------------------------------------------
   Schriften — lokal ausgeliefert, nicht von Google.
   Dadurch geht keine Besucher-IP an Google, und Abschnitt 6 der
   Datenschutzerklärung entfällt ersatzlos.
   Erzeugt aus der offiziellen Google-Fonts-Auslieferung, unverändert.
   Beide sind variable Schriften: Archivo mit Breiten- und Strichstärken-
   achse (font-stretch nutzt die Seite), Instrument Sans mit Strichstärke.
   ------------------------------------------------------------------ */

/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('schriften/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url('schriften/archivo-latin.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;
}

/* Instrument Sans · latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('schriften/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Instrument Sans · latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('schriften/instrument-sans-latin.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;
}

/* =========================================================================
   LÖWEN HAUSMEISTERSERVICE & MONTAGE
   Designrichtung: "Zollstock" — Signalgelb, Werkstatt-Schwarz, Sperrholz-Sand,
   Mess-Blau. Flächig, kantig, ohne Verlauf und ohne Glaseffekt.
   Aufbau:  1 Tokens · 2 Basis · 3 Bausteine · 4 Kopf · 5 Hero
            6 Sektionen · 7 Formular · 8 Fuß · 9 Bewegung
   ========================================================================= */

/* ── 1 · TOKENS ────────────────────────────────────────────────────────── */
:root {
  /* Farbe — vier Töne, mehr nicht */
  --sand:       #EDE7DB;   /* Grundfläche, Sperrholz */
  --sand-deep:  #E3DBC9;   /* zweite Fläche */
  --paper:      #FBF9F5;   /* Karten */
  --ink:        #1B1815;   /* Text und dunkle Bänder */
  --ink-70:     #4A443C;   /* Fließtext gedämpft */
  --gelb:       #E9B233;   /* Zollstock — die eine laute Farbe */
  --gelb-tief:  #C9931C;   /* Hover */
  --blau:       #2F4A5A;   /* Mess-Blau, zweiter Akzent */
  --rot:        #A03328;   /* nur Fehlermeldungen */
  --linie:      color-mix(in srgb, var(--ink) 16%, transparent);
  --linie-hell: color-mix(in srgb, var(--sand) 22%, transparent);

  /* Schrift */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  /* Maß */
  --shell:  1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --sec-y:  clamp(64px, 9vw, 124px);

  --tick: repeating-linear-gradient(90deg,
          currentColor 0 1px, transparent 1px 8px);
}

/* ── 2 · BASIS ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Sprungziele dürfen nicht unter der klebenden Kopfzeile landen */
[id] { scroll-margin-top: 124px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (max-width: 767px) { body { padding-bottom: 68px; } } /* Platz für Callbar */
/* Impressum und Datenschutz haben keinen Anruf-Balken. */
body.no-callbar { padding-bottom: 0; }

img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--ink :focus-visible,
.footer :focus-visible { outline-color: var(--gelb); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--sand);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Unsichtbar für das Auge, vorhanden für Screenreader und Suchmaschinen.
   Wird für die Überschrift des Leistungsabschnitts gebraucht, die auf
   Kundenwunsch nicht sichtbar sein soll. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Platzhalter-Markierung — im Prototyp sichtbar, eine Zeile zum Entfernen */
.ph {
  font-size: .78em; letter-spacing: .04em;
  opacity: .6; white-space: nowrap;
}

/* ── 3 · BAUSTEINE ─────────────────────────────────────────────────────── */

/* Eyebrow mit Maßstrich — das Motiv im Flüsterton */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: .9rem; font-weight: 600; font-stretch: 108%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blau);
  margin: 0 0 20px;
}
.eyebrow__tick {
  flex: 0 0 44px; height: 9px;
  background-image: var(--tick);
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom: 1px solid currentColor;
}
.section--ink .eyebrow { color: var(--gelb); }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  font-family: var(--display);
  font-size: 1rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 20px; height: 20px; fill: currentColor; flex: none; }

.btn--primary { background: var(--gelb); color: var(--ink); }
.btn--primary:hover { background: var(--gelb-tief); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--sand); }

/* WhatsApp nutzt bewusst das Mess-Blau statt des Messenger-Grüns —
   sonst hätte die Seite eine fünfte Farbe. Sand auf Blau: 7,6:1. */
.btn--wa { background: var(--blau); color: var(--sand); border-color: var(--blau); }
.btn--wa:hover { background: color-mix(in srgb, var(--blau) 82%, black); border-color: color-mix(in srgb, var(--blau) 82%, black); }

.btn--call {
  min-height: 44px; padding: 8px 16px;
  font-size: .9rem;
  background: var(--gelb); color: var(--ink);
  /* darf schrumpfen und umbrechen, damit das Logo seine Größe behält */
  min-width: 0;
}
.masthead__call span { overflow-wrap: anywhere; }
.btn--call:hover { background: var(--gelb-tief); }

.btn--block { width: 100%; }

/* Hakenliste */
.ticklist { list-style: none; margin: 0; padding: 0; }
.ticklist li {
  position: relative;
  padding-left: 22px;
  padding-block: 5px;
  font-size: .97rem;
  color: var(--ink-70);
}
.ticklist li + li { border-top: 1px solid var(--linie); }
.ticklist li::before {
  content: ""; position: absolute;
  left: 0; top: 1.05em;
  width: 11px; height: 2px;
  background: var(--gelb);
}

/* ── 4 · KOPFZEILE ─────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--sand);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.masthead.is-stuck {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--sand) 94%, white);
}
.masthead__inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 106px;
}

.brand {
  display: flex; align-items: center;
  min-height: 44px;
  text-decoration: none; margin-right: auto;
  /* darf nicht schrumpfen, sonst zieht max-width das Logo schmal */
  flex: none;
}
/* Echtes Firmenlogo statt der früheren Zeichnung. Es ist gestapelt —
   Marke über Wortmarke über Unterzeile — und damit im Verhältnis rund
   2:1. Die Höhe gibt deshalb den Ton an, nicht die Breite. Unter etwa
   70 px wird die Unterzeile "Hausmeisterservice & Montage" zu Matsch,
   darüber trägt sie. */
.brand__logo {
  height: 88px; width: auto;
  /* flex: none — sonst quetscht der Anrufknopf auf Impressum und
     Datenschutz das Logo schmal, weil dort kein Menü dazwischenliegt. */
  flex: none;
}
@media (max-width: 599px) {
  .brand__logo     { height: 66px; }
  .masthead__inner { min-height: 86px; gap: 12px; }
}
@media (max-width: 429px) {
  .brand__logo     { height: 56px; }
}

.burger {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 12px;
  background: none; border: 2px solid var(--ink);
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.burger__box { display: grid; gap: 4px; width: 18px; }
.burger__box span { height: 2px; background: var(--ink); }
.burger[aria-expanded="true"] { background: var(--ink); color: var(--sand); }
.burger[aria-expanded="true"] .burger__box span { background: var(--sand); }

.mainnav__list {
  list-style: none; margin: 0; padding: 0;
}
.mainnav__list a {
  display: block;
  font-family: var(--display);
  font-weight: 600; font-stretch: 106%;
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
  font-size: .92rem;
}

/* Mobil: Auszug unter der Kopfzeile */
@media (max-width: 899px) {
  .mainnav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); color: var(--sand);
    padding: 12px var(--gutter) 24px;
    border-top: 3px solid var(--gelb);
  }
  .mainnav.is-open { display: block; }
  .mainnav__list li + li { border-top: 1px solid var(--linie-hell); }
  .mainnav__list a { padding: 15px 0; }
  .masthead__call { margin-top: 18px; width: 100%; }
}

/* Desktop: Zeile */
@media (min-width: 900px) {
  .burger { display: none; }
  .mainnav { display: flex; align-items: center; gap: 30px; }
  .mainnav__list { display: flex; gap: 28px; }
  .mainnav__list a { position: relative; padding-block: 6px; }
  .mainnav__list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px; background: var(--gelb);
    transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .mainnav__list a:hover::after,
  .mainnav__list a:focus-visible::after { transform: scaleX(1); }
}

/* ── 5 · HERO ──────────────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) {
  .hero__grid {
    /* Textspalte muss breit genug bleiben, damit die beiden
       Handlungsknöpfe nebeneinander stehen */
    /* Textspalte ab hier etwas breiter als im Prototyp: die Hero-Zeile
       hat jetzt drei Knöpfe statt zwei und soll einzeilig bleiben. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: center;
    gap: clamp(40px, 4vw, 64px);
  }
}

.hero__title {
  /* Die Zeile ist mit dem neuen Wortlaut deutlich länger als im Prototyp.
     Obergrenze deshalb von 4,6 auf 3,4rem gesenkt, damit "HAUSMEISTER"
     und "QUEDLINBURG" auf jeder Breite am Stück stehen bleiben und die
     Überschrift nicht mitten im Wort umbricht. */
  font-size: clamp(1.72rem, 5.4vw, 3.4rem);
  margin-bottom: 30px;
  overflow-wrap: break-word;
}
/* Die Hervorhebung des Ortsnamens ist auf Kundenwunsch entfallen —
   die Überschrift steht durchgehend in Werkstatt-Schwarz. */

.lede {
  font-size: clamp(1.06rem, 2.1vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 60ch;
  margin-bottom: 34px;
}
.lede strong { color: var(--ink); font-weight: 600; }

.ctarow { display: flex; flex-wrap: wrap; gap: 14px; }
.ctarow .btn { flex: 1 1 260px; }
@media (min-width: 560px) { .ctarow .btn { flex: 0 0 auto; } }

.trustrow {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  list-style: none; margin: 34px 0 0; padding: 0;
}
.trustrow--services { margin-top: 26px; }
.trustrow li {
  display: flex; align-items: center; gap: 9px;
  font-size: .92rem; font-weight: 500; color: var(--ink-70);
}
.trustrow li::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--gelb); border: 1.5px solid var(--ink);
}

/* Fotostapel im Hero — vier Karten, eine je Werk.
   Ersetzt das frühere Einzelfoto: der Chef möchte nicht selbst aufs Bild,
   also übernimmt die Arbeit die Rolle des Aushängeschilds.
   Beim Überfahren und bei Tastaturfokus fächern die Karten auf; auf
   Touchgeräten stehen sie dauerhaft etwas weiter auseinander. */
.stack {
  display: block;
  position: relative;
  text-decoration: none;
  margin-inline: auto;
  margin-bottom: 46px;      /* Platz für das Band, das unten übersteht */
  width: 100%;
  /* Fest begrenzt, damit die aufgefächerten Karten nicht in die
     Textspalte ragen — die Hero-Spalte ist rund 375 px breit. */
  max-width: 320px;
}
.stack__cards {
  display: block; position: relative;
  aspect-ratio: 1 / 1;
}
.stack__card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 7px solid var(--paper);
  outline: 1px solid var(--linie);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.stack__card:nth-child(1) { transform: rotate(-8deg); }
.stack__card:nth-child(2) { transform: rotate(5deg); }
.stack__card:nth-child(3) { transform: rotate(-3deg); }
.stack__card:nth-child(4) { transform: rotate(1deg); }

/* Aufgefächert: beim Überfahren, bei Tastaturfokus und — per Skript —
   beim ersten Antippen auf dem Handy (.is-open). */
.stack:hover   .stack__card:nth-child(1),
.stack:focus-visible .stack__card:nth-child(1),
.stack.is-open .stack__card:nth-child(1) { transform: rotate(-15deg) translate(-13%, 8%); }
.stack:hover   .stack__card:nth-child(2),
.stack:focus-visible .stack__card:nth-child(2),
.stack.is-open .stack__card:nth-child(2) { transform: rotate(11deg) translate(12%, 5%); }
.stack:hover   .stack__card:nth-child(3),
.stack:focus-visible .stack__card:nth-child(3),
.stack.is-open .stack__card:nth-child(3) { transform: rotate(-7deg) translate(-8%, -5%); }
.stack:hover   .stack__card:nth-child(4),
.stack:focus-visible .stack__card:nth-child(4),
.stack.is-open .stack__card:nth-child(4) { transform: rotate(3deg) translate(3%, -9%); }

.stack__label {
  position: absolute; z-index: 2;
  left: 50%; bottom: -34px;
  transform: translateX(-50%);
  width: min(100%, 300px);
  display: grid; gap: 3px; justify-items: center;
  padding: 13px 16px 15px;
  background: var(--ink); color: var(--sand);
  border-top: 4px solid var(--gelb);
  text-align: center;
}
.stack__kicker {
  font-family: var(--display);
  font-size: .68rem; font-weight: 600; font-stretch: 108%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gelb);
}
.stack__cta {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: .96rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: .03em; text-transform: uppercase;
}
.stack__arrow { width: 17px; height: 17px; flex: none; }
/* Auf Touchgeräten gibt es kein Überfahren. Damit dort trotzdem
   erkennbar ist, dass mehrere Fotos im Stapel liegen, stehen die Karten
   dauerhaft etwas weiter auseinander. Kein Skript, kein Scroll-Effekt. */
@media (hover: none) {
  .stack__card:nth-child(1) { transform: rotate(-11deg) translate(-7%, 5%); }
  .stack__card:nth-child(2) { transform: rotate(8deg)  translate(7%, 3%); }
  .stack__card:nth-child(3) { transform: rotate(-5deg) translate(-3%, -2%); }
  .stack__card:nth-child(4) { transform: rotate(2deg); }
}

.stack:hover .stack__label,
.stack:focus-visible .stack__label,
.stack.is-open .stack__label { background: var(--gelb-tief); color: var(--ink); }
.stack:hover .stack__kicker,
.stack:focus-visible .stack__kicker,
.stack.is-open .stack__kicker { color: var(--ink); }

/* ── 6 · SEKTIONEN ─────────────────────────────────────────────────────── */
.section { padding-block: var(--sec-y); }
.section--paper { background: var(--sand-deep); }
.section--ink   { background: var(--ink); color: var(--sand); }
/* :where() hält die Spezifität bei 0 — sonst überschreibt diese Regel
   jeden späteren Absatz-Ton (z.B. im hellen Formularkasten). */
.section--ink :where(p) { color: color-mix(in srgb, var(--sand) 80%, var(--ink)); }

.sechead { max-width: 56ch; margin-bottom: clamp(38px, 5vw, 64px); }
.sechead--wide { max-width: 40ch; }
/* Nur die Eyebrow, keine sichtbare Überschrift — dann darf der Abstand
   darunter kleiner ausfallen. */
.sechead--bare { margin-bottom: clamp(26px, 3.4vw, 40px); }
.sechead--bare .eyebrow { margin-bottom: 0; }
.sechead__title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.sechead__lede {
  margin-top: 20px;
  /* auf der zweiten Fläche (sand-deep) ergäbe --ink-70 nur 6,98:1 */
  font-size: 1.06rem; color: color-mix(in srgb, var(--ink-70) 92%, var(--ink));
  max-width: 52ch;
}
.section--ink .sechead__lede { color: color-mix(in srgb, var(--sand) 78%, var(--ink)); }

/* Leistungen */
.cards { display: grid; gap: 22px; }
@media (min-width: 760px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid var(--linie);
  padding: 30px 26px 32px;
  display: flex; flex-direction: column;
}
.card__rule {
  display: block; height: 10px; width: 56px;
  color: var(--ink);
  background-image: var(--tick);
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom: 3px solid var(--gelb);
  margin-bottom: 22px;
}
/* Keine Auto-Silbentrennung: sonst wird "Hausmeis-terservice" getrennt.
   Die Trennstellen setzt ­ im HTML von Hand. */
.card__title { font-size: 1.5rem; margin-bottom: 10px; hyphens: manual; }
.card__note {
  font-size: .95rem; color: var(--ink-70);
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--linie);
}

/* Zielgruppen — stand früher im dunklen Abschnitt "Warum ich", steht jetzt
   unter dem Ablauf auf hellem Grund. Deshalb Blau statt Gelb für das Label
   (Gelb auf Sand wäre 1,4:1 und damit unlesbar).
   Gemessen: Blau auf Sand 7,6:1 · Fließtext auf Sand 7,8:1. */
.audience {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 32px;
  border-top: 1px solid var(--linie);
}
.audience__label {
  font-family: var(--display);
  font-size: .8rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blau);
  margin: 0 0 18px;
}
.tags { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.tags li {
  border: 1px solid var(--linie);
  padding: 7px 14px;
  font-size: .89rem;
  color: var(--ink-70);
}

/* Ablauf */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  background: var(--linie);
}
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  background: var(--sand);
  padding: 28px 24px 32px;
  position: relative;
}
.step__no {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem; font-weight: 800; font-stretch: 122%;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
  margin-bottom: 16px;
}
.step__title { font-size: 1.14rem; margin-bottom: 10px; }
.step p { font-size: .95rem; color: var(--ink-70); margin: 0; }

/* Werke — je Werk eine kleine Diaschau (Vorher · Handwerk · Nachher),
   darüber ein waagerechter Schieber über alle vier Werke.

   Ohne JavaScript liegen alle Bilder schlicht untereinander und die
   Bedienelemente sind ausgeblendet — der Inhalt hängt nicht am Skript. */
.sechead--works { max-width: none; display: grid; gap: 26px; }
.sechead--works .sechead__text { max-width: 56ch; }
@media (min-width: 720px) {
  .sechead--works {
    grid-template-columns: 1fr auto;
    align-items: end; gap: 32px;
  }
}

.works__nav { display: flex; gap: 10px; }
.rnd {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}
.rnd svg { width: 22px; height: 22px; }
.rnd:hover { background: var(--ink); color: var(--sand); }
.rnd[aria-disabled="true"] { opacity: .32; cursor: default; }
.rnd[aria-disabled="true"]:hover { background: transparent; color: var(--ink); }

.works__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
@media (min-width: 760px)  { .works__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 1060px) { .works__track { grid-auto-columns: calc((100% - 40px) / 3); } }

.work { scroll-snap-align: start; min-width: 0; }
.work__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.work__slides { list-style: none; margin: 0; padding: 0; }
.work__slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
}
.work__slide.is-on { opacity: 1; pointer-events: auto; }
/* Der Bildlink füllt die ganze Fläche. Ohne JavaScript führt er direkt
   auf die große Bilddatei, mit JavaScript öffnet er die Großansicht. */
.work__open {
  display: block; width: 100%; height: 100%;
  cursor: zoom-in;
}
.work__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Schrittmarke — Farbe sagt, wo im Ablauf man ist */
.work__step {
  position: absolute; left: 0; top: 0;
  padding: 8px 14px;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--sand);
}
.work__step[data-schritt="vorher"]  { background: var(--blau); color: var(--sand); }
.work__step[data-schritt="nachher"] { background: var(--gelb); color: var(--ink); }

.work__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--sand);
  border: 0; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.work__arrow svg { width: 22px; height: 22px; }
.work__arrow:hover { background: var(--gelb); color: var(--ink); }
.work__arrow--prev { left: 0; }
.work__arrow--next { right: 0; }

.work__counter {
  position: absolute; right: 0; bottom: 0;
  margin: 0; padding: 7px 12px;
  background: var(--ink); color: var(--sand);
  font-family: var(--display);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
}

/* Feste Mindesthöhe, damit die Zeile darunter bei allen vier Karten
   auf gleicher Höhe steht — ein Titel bricht auf zwei Zeilen um. */
.work__title { font-size: 1.2rem; margin: 18px 0 6px; min-height: 2.45em; }
@media (max-width: 759px) { .work__title { min-height: 0; } }
.work__meta {
  margin: 0;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  /* reines --blau ergibt auf sand-deep nur 6,78:1 */
  color: color-mix(in srgb, var(--blau) 88%, var(--ink)); font-weight: 600;
}

/* Großansicht — Vollbild über der Seite. Flächig wie der Rest:
   kein Verlauf, kein Weichzeichner, keine Rundungen. */
.lb[hidden] { display: none; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 14px 20px;
  background: var(--ink);
  color: var(--sand);
}
.lb__top {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.lb__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lb__rubrik, .lb__stufe {
  display: inline-block;
  padding: 7px 13px;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700; font-stretch: 108%;
  letter-spacing: .12em; text-transform: uppercase;
}
.lb__rubrik { background: var(--sand); color: var(--ink); }
.lb__stufe  { border: 2px solid color-mix(in srgb, var(--sand) 55%, transparent); color: var(--sand); }
.lb__stufe[data-stufe="vorher"]  { background: var(--blau); color: var(--sand); border-color: var(--blau); }
.lb__stufe[data-stufe="nachher"] { background: var(--gelb); color: var(--ink); border-color: var(--gelb); }

.lb__zaehler {
  margin: 0 0 0 auto;
  font-family: var(--display);
  font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  color: color-mix(in srgb, var(--sand) 78%, var(--ink));
}
.lb__x {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--sand);
  border: 2px solid color-mix(in srgb, var(--sand) 45%, transparent);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.lb__x svg { width: 22px; height: 22px; }
.lb__x:hover { background: var(--gelb); color: var(--ink); border-color: var(--gelb); }

.lb__stage {
  margin: 0; min-height: 0;
  position: relative;
  padding-inline: clamp(0px, 2vw, 24px);
}
/* Ganzes Bild, nichts abgeschnitten — hier zählt der Inhalt, nicht das Raster.
   Deshalb sind hoch- und querformatige Aufnahmen beide vollständig zu sehen. */
/* Das Bild wird absolut in die Bühne gelegt. Prozentangaben rechnen
   sonst gegen eine unbestimmte Höhe und das Hochformat läuft unten
   heraus — mit inset:0 ist der Kasten eindeutig, object-fit macht den
   Rest. Nichts wird abgeschnitten, hoch wie quer. */
.lb__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.lb__text {
  margin: 0; text-align: center;
  font-size: .92rem; line-height: 1.5;
  color: color-mix(in srgb, var(--sand) 82%, var(--ink));
  max-width: 70ch; justify-self: center;
}

.lb__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  color: var(--sand);
  border: 2px solid color-mix(in srgb, var(--sand) 45%, transparent);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.lb__pfeil svg { width: 24px; height: 24px; }
.lb__pfeil:hover { background: var(--gelb); color: var(--ink); border-color: var(--gelb); }
.lb__pfeil--prev { left: 8px; }
.lb__pfeil--next { right: 8px; }
@media (min-width: 700px) {
  .lb__pfeil--prev { left: 20px; }
  .lb__pfeil--next { right: 20px; }
}

/* Seite hinter der Großansicht nicht mitscrollen lassen */
html.lb-offen, html.lb-offen body { overflow: hidden; }

/* Ohne JavaScript: alles sichtbar, nichts zu bedienen */
html:not(.js) .work__frame  { aspect-ratio: auto; background: none; border: 0; }
html:not(.js) .work__slide  { position: static; opacity: 1; pointer-events: auto; }
html:not(.js) .work__slide + .work__slide { margin-top: 10px; }
html:not(.js) .work__step   { position: static; display: inline-block; }
html:not(.js) .work__arrow,
html:not(.js) .work__counter,
html:not(.js) .works__nav   { display: none; }
html:not(.js) .work__open   { cursor: pointer; }

/* Kontakt */
.contact { display: grid; gap: clamp(40px, 6vw, 72px); }
@media (min-width: 940px) { .contact { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact__title { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: 30px; }

.phoneblock {
  display: block;
  border: 2px solid var(--gelb);
  padding: 18px 22px;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.phoneblock + .phoneblock { margin-top: 12px; }
.phoneblock:hover { background: var(--gelb); color: var(--ink); }
.phoneblock:hover .phoneblock__label { color: var(--ink); }
.phoneblock__label {
  display: block;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gelb); margin-bottom: 4px;
}
.phoneblock__no {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 800; font-stretch: 112%;
  letter-spacing: .01em;
}
.phoneblock--wa { border-color: var(--linie-hell); }
.phoneblock--wa .phoneblock__no {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}
.phoneblock--wa .ico { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.phoneblock--wa:hover { background: var(--sand); color: var(--ink); }
.phoneblock--wa:hover .phoneblock__label { color: var(--ink); }

.factlist { margin: 34px 0 0; }
.factlist > div { padding: 16px 0; border-top: 1px solid var(--linie-hell); }
.factlist dt {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gelb); margin-bottom: 6px;
}
.factlist dd { margin: 0; font-size: 1rem; }
/* Die E-Mail ist ein echtes Tippziel — als reiner Fließtext wäre sie
   nur 20 px hoch. */
.factlist a {
  display: inline-block; padding-block: 12px;
  text-decoration-color: var(--gelb); text-underline-offset: 3px;
}

/* ── 7 · FORMULAR ──────────────────────────────────────────────────────── */
.contact__form {
  background: var(--sand);
  color: var(--ink);
  padding: clamp(26px, 4vw, 40px);
}
/* Der Kasten ist hell, obwohl die Sektion dunkel ist — Textfarben zurücksetzen */
.contact__form p { color: var(--ink-70); }
.contact__form .field__err { color: var(--rot); }
.form__intro {
  font-family: var(--display);
  font-size: 1.06rem; font-weight: 700; font-stretch: 108%;
  text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: 26px; color: var(--ink);
}

.field { margin-bottom: 20px; }
.field > label {
  display: block;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 7px;
}
.field abbr { color: var(--rot); text-decoration: none; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-family: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: 0;
  transition: border-color .15s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B1815' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blau); }
.field [aria-invalid="true"] { border-color: var(--rot); }

.field__hint { font-size: .84rem; color: var(--ink-70); margin: 6px 0 0; }
.field__err {
  font-size: .84rem; font-weight: 600; color: var(--rot);
  margin: 6px 0 0; min-height: 0;
}
.field__err:empty { display: none; }

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: start;
}
.field--check input {
  width: 24px; height: 24px; min-height: 0;
  margin-top: 2px; accent-color: var(--blau);
}
.field--check label {
  font-size: .89rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  margin: 0; line-height: 1.5;
}
.field--check .field__err { grid-column: 1 / -1; margin-top: 0; }

.form__status {
  margin: 16px 0 0;
  font-size: .95rem; font-weight: 600;
  padding: 12px 14px;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"]  { background: var(--gelb); color: var(--ink); }
.form__status[data-state="err"] { color: var(--rot); border: 2px solid var(--rot); }

/* ── 8 · FUSSZEILE ─────────────────────────────────────────────────────── */
.footer {
  background: var(--ink); color: var(--sand);
  padding-top: clamp(48px, 6vw, 76px);
  border-top: 5px solid var(--gelb);
}
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }

/* Helle Fassung des Logos — auf dem dunklen Grund der Fußzeile wäre der
   schwarze Schriftzug sonst nicht zu sehen. Erzeugt mit fotos/logotool.swift:
   es färbt alle unbunten Pixel auf Sand um und lässt das Gelb stehen. */
.footer__logo {
  height: 84px; width: auto;
  max-width: 100%;
  margin-bottom: 16px;
}
.footer__claim { font-size: .92rem; color: color-mix(in srgb, var(--sand) 72%, var(--ink)); }

.footer__head {
  font-family: var(--display);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gelb);
  margin: 0 0 14px;
}
.footer__list { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.footer__list li { padding-block: 4px; }
/* Tippfläche auf Fingergröße bringen — reiner Text wäre nur ~19 px hoch */
.footer__list a {
  display: inline-block; padding-block: 10px;
  text-decoration-color: color-mix(in srgb, var(--sand) 40%, transparent);
  text-underline-offset: 3px;
}
.footer__list a:hover { text-decoration-color: var(--gelb); }

.footer__base {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 22px;
  border-top: 1px solid var(--linie-hell);
  font-size: .84rem;
  /* 66% ergaben 6,85:1 — knapp unter der 7:1-Marke des Projekts. */
  color: color-mix(in srgb, var(--sand) 70%, var(--ink));
}
.footer__base p { margin: 0; }

/* Hinweis auf den Ersteller — bewusst zurückhaltend, das Logo steht in
   Sand statt in den eigenen Farben, damit es sich der Marke des Kunden
   unterordnet und nicht mit dem Gelb beißt. */
.footer__macher {
  display: flex; align-items: center; gap: 10px;
}
.footer__macher a {
  display: inline-flex; align-items: center;
  padding-block: 8px;                 /* bringt die Tippfläche auf 46 px */
}
.footer__macher img {
  height: 36px; width: auto;
  opacity: .8;
  transition: opacity .16s ease;
}
.footer__macher a:hover img,
.footer__macher a:focus-visible img { opacity: 1; }

/* Mobiler Handlungsbalken */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--ink);
  border-top: 3px solid var(--gelb);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 60px; padding: 10px 8px;
  font-family: var(--display);
  font-size: clamp(.78rem, 3.4vw, .92rem); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  text-align: center; white-space: nowrap;
  color: var(--sand);
}
.callbar__btn .ico { width: 19px; height: 19px; fill: currentColor; }
.callbar__btn--primary { background: var(--gelb); color: var(--ink); }
.callbar__btn--wa { background: var(--blau); color: var(--sand); }
/* Ab 320 px stehen drei Beschriftungen nebeneinander — auf den engsten
   Geräten weicht das Icon, damit der Text nicht abgeschnitten wird. */
@media (max-width: 359px) {
  .callbar__btn .ico { display: none; }
  .callbar__btn { font-size: .72rem; letter-spacing: 0; }
}
@media (min-width: 768px) { .callbar { display: none; } }

/* Rechtstexte — Impressum und Datenschutz teilen sich Kopf und Fuß
   mit der Startseite und brauchen nur Lesetypografie. */
.legal { padding-block: clamp(48px, 7vw, 88px); }
.legal__inner { max-width: 68ch; }
.legal__title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); margin-bottom: 12px; }
.legal h2 {
  font-size: 1.24rem;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.legal h3 { font-size: 1rem; margin: 26px 0 8px; letter-spacing: 0; }
.legal p, .legal li { color: var(--ink-70); }
.legal ul { margin: 0 0 1em; padding-left: 20px; }
.legal li { padding-block: 3px; }
.legal a { text-decoration-color: var(--gelb); text-underline-offset: 3px; }
.legal address { font-style: normal; margin-bottom: 1em; }
.legal__note {
  border-left: 4px solid var(--gelb);
  background: var(--paper);
  padding: 14px 18px;
  margin: 0 0 1.4em;
  font-size: .95rem;
}
.legal__back { margin-top: 48px; }

/* ── 9 · BEWEGUNG ──────────────────────────────────────────────────────── */
/* Bewusst keine Einblende-Effekte beim Scrollen: Der Inhalt ist sofort da,
   hängt nicht an JavaScript, und die Seite wirkt nicht nach Baukasten.
   Bewegung gibt es nur dort, wo sie eine Reaktion zeigt — Hover und Fokus. */

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

/* Druck — Handwerkskunden drucken Kontaktseiten tatsächlich aus */
@media print {
  .masthead, .callbar, .burger { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section--ink, .footer { background: #fff !important; color: #000 !important; }
  .section--ink p, .footer__claim { color: #000 !important; }
}

/* Honigtopf des Kontaktformulars. Nicht display:none — manche Bots erkennen
   das und lassen das Feld dann bewusst leer. */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}