/* ==========================================================================
   SP BAU – Garten- & Pflasterbau · Entwurf biberach-digital.de
   Farbwelt aus dem eigenen Flyer des Betriebs: Anthrazit + Gold auf warmem Stein
   ========================================================================== */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600.woff2") format("woff2");
}

/* ---------- Design-Token ---------- */
:root {
  --ink: #171a20;          /* Anthrazit – Basis (Flyer-Schwarz) */
  --ink-2: #21252d;        /* Karten auf dunklem Grund */
  --ink-3: #2b303a;        /* Linien auf dunklem Grund */
  --paper: #faf8f3;        /* warmes Papierweiß */
  --sand: #f1ecdf;         /* Steingrau/Sand – Sektionswechsel */
  --line: #e3ddcd;         /* Linien auf hellem Grund */
  --gold: #e8a01d;         /* Flyer-Gold – Akzent/CTA */
  --gold-deep: #c78508;    /* Hover */
  --gold-ink: #8a5b00;     /* Gold als Schriftfarbe auf hellem Grund (5,5:1) */
  --gold-soft: #fdf3dd;    /* Akzentfläche hell */
  --text: #3a3e46;         /* Fließtext */
  --muted: #5f636b;        /* Nebentext – dunkel genug für 4.5:1 auf Sand */
  --white: #ffffff;

  --font-display: "Barlow", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: .5rem; --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem;
  --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; --s-8: 6.5rem;

  --radius: 16px;
  --radius-s: 10px;
  --shadow-1: 0 1px 2px rgba(23, 26, 32, .05), 0 8px 24px rgba(23, 26, 32, .06);
  --shadow-2: 0 2px 6px rgba(23, 26, 32, .08), 0 18px 48px rgba(23, 26, 32, .12);
  --wrap: 72rem;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

a { color: inherit; }
ul { padding: 0; list-style: none; }

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

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: .6rem;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: .65rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: .6rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(232, 160, 29, .32);
}
.btn--gold:hover { background: var(--gold-deep); box-shadow: 0 12px 30px rgba(199, 133, 8, .38); }

.btn--ghost-light {
  border-color: rgba(255, 255, 255, .35);
  color: var(--white);
}
.btn--ghost-light:hover { border-color: var(--gold); color: var(--gold); }

.btn--ghost-dark {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost-dark:hover { background: var(--ink); color: var(--white); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(23, 26, 32, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-decoration: none;
}
.wordmark__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: .02em;
  color: var(--white);
}
.wordmark__logo span { color: var(--gold); }
.wordmark__claim {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
@media (max-width: 40em) { .wordmark__claim { display: none; } }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color .2s ease;
}
.nav a:hover { color: var(--gold); }

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  transition: background-color .2s ease;
  white-space: nowrap;
}
.header__cta:hover { background: var(--gold-deep); }
.header__cta svg { flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .55rem;
  cursor: pointer;
  border-radius: 8px;
}
.nav-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle .bar + .bar { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 56em) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: .5rem 1.25rem 1.1rem;
    display: none;
  }
  .nav.offen { display: flex; }
  .nav a { padding: .8rem .25rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
}
.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  opacity: .26;
  pointer-events: none;
  /* nach unten ausblenden, damit der Text seine Ruhe behält */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,.35) 100%);
}
@media (min-width: 62em) {
  .hero__foto { object-position: center 58%; opacity: .3; }
}
/* Auf dem Handy stapelt sich der Hero-Inhalt: die Sektion wird gut 1300 px hoch
   bei 390 px Breite. Ein 16:9-Foto müsste dafür rund 85 % seiner Breite
   wegschneiden – übrig bleibt ein bis zur Unkenntlichkeit vergrößerter Streifen
   (auf dem Desktop passt das Bild dagegen fast exakt in die Fläche). Deshalb
   bekommt es hier ein eigenes Band im 4:3-Ausschnitt statt der vollen Höhe. */
@media (max-width: 61.99em) {
  .hero__foto {
    bottom: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: center 50%;
    mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  }
}

.hero::before {
  /* dezentes Pflaster-Muster */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 34px, 56px 34px;
  background-position: 0 0, 28px 0;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to top, rgba(232, 160, 29, .07), transparent);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  align-items: center;
}
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Auf hellem Grund braucht die Marke ein dunkleres Gold: das Flyer-Gold
     kommt auf Papierweiß nur auf 2,1:1 und ist damit nicht lesbar genug. */
  color: var(--gold-ink);
  margin-bottom: var(--s-4);
}
/* Auf dunklem Grund bleibt es das originale Flyer-Gold. */
.hero .eyebrow,
.sektion--dunkel .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.hero h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  letter-spacing: .005em;
  margin-bottom: var(--s-4);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero__sub {
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, .72);
  margin-bottom: var(--s-5);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: var(--s-5);
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: .42rem .95rem;
}
.chip svg { color: var(--gold); flex: none; }

/* Hero-Checkkarte (kein Fotomaterial vorhanden – gestaltetes Markenelement) */
.pruefkarte {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-2);
}
.pruefkarte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--gold), rgba(232, 160, 29, .25));
}
.pruefkarte__kopf {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink-3);
}
.pruefkarte__logo {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  /* flex, nicht grid: bei grid werden der Textknoten "S" und das <span>P</span>
     zu zwei Zellen untereinander – das P fiel dadurch aus der Box. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--white);
}
.pruefkarte__logo span { color: var(--gold); }
.pruefkarte__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--white);
}
.pruefkarte__untertitel { font-size: .82rem; color: rgba(255, 255, 255, .55); }

.pruefkarte ul { display: grid; gap: .68rem; }
.pruefkarte li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}
.pruefkarte li svg { flex: none; margin-top: .18rem; color: var(--gold); }

.pruefkarte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-3);
}
.pruefkarte__fuss .siegel {
  /* .74rem waren 11,8px — auf dem Handy zu klein zum Lesen. */
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(232, 160, 29, .1);
  border: 1px solid rgba(232, 160, 29, .3);
  border-radius: 999px;
  padding: .35rem .8rem;
}

/* ---------- Sektionen allgemein ---------- */
.sektion { padding-block: clamp(3.5rem, 9vw, 6rem); }
.sektion--sand { background: var(--sand); }
.sektion--dunkel { background: var(--ink); }

.sektion__kopf {
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
}
.sektion__kopf h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  margin-bottom: .9rem;
}
.sektion__kopf p { color: var(--muted); font-size: 1.05rem; }
.sektion--dunkel .sektion__kopf h2 { color: var(--white); }
.sektion--dunkel .sektion__kopf p { color: rgba(255, 255, 255, .65); }

/* ---------- Leistungen ---------- */
.leistungen__grid {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 44em) { .leistungen__grid { grid-template-columns: 1fr 1fr; } }

.lkarte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lkarte:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(232, 160, 29, .45);
}
.lkarte__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--gold-soft);
  border: 1px solid rgba(232, 160, 29, .35);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.lkarte h3 { font-size: 1.28rem; margin-bottom: .35rem; }
.lkarte__intro { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.lkarte ul { display: grid; gap: .5rem; }
@media (min-width: 30em) { .lkarte ul { grid-template-columns: 1fr 1fr; } }
.lkarte li {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .92rem;
  /* Ohne das kann ein langer Listeneintrag die Rasterspalte aufblähen. */
  min-width: 0;
}
.lkarte li svg { flex: none; margin-top: .22rem; color: var(--gold-deep); }
/* Auf dem Handy einspaltig: Zwei Spalten mit Einträgen wie „Verlegung von
   Leerrohren & Entwässerungssystemen" wurden zusammen breiter als der
   Bildschirm und haben die ganze Seite seitlich ausbrechen lassen. */
.lkarte--breit ul { grid-template-columns: 1fr; }
@media (min-width: 30em) { .lkarte--breit ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 44em) {
  .lkarte--breit { grid-column: span 2; }
  .lkarte--breit ul { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Warum SP BAU ---------- */
.warum__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 62em) { .warum__grid { grid-template-columns: 1.05fr .95fr; } }

.warum h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 1rem; }
.warum__text { color: var(--muted); margin-bottom: 1.6rem; max-width: 33rem; }

.usp { display: grid; gap: .95rem; }
.usp li {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.usp__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--gold-soft);
  border: 1px solid rgba(232, 160, 29, .35);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
}
.usp strong { display: block; color: var(--ink); font-weight: 600; font-size: .98rem; }
.usp span { font-size: .88rem; color: var(--muted); }

.ablauf {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-1);
}
.ablauf h3 {
  font-size: 1.2rem;
  margin-bottom: 1.4rem;
}
.ablauf ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
}
.ablauf li {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-block: 1rem;
}
.ablauf li + li { border-top: 1px dashed var(--line); }
.ablauf__nr {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: .95rem;
}
.ablauf strong { display: block; color: var(--ink); font-size: .98rem; }
.ablauf p { font-size: .88rem; color: var(--muted); }

/* ---------- Einsatzgebiet ---------- */
.gebiet__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 58em) { .gebiet__grid { grid-template-columns: .9fr 1.1fr; } }

.gebiet__karte {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-2);
}
.gebiet__karte svg { width: 100%; height: auto; }

.gebiet h2 { color: var(--white); font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 1rem; }
.gebiet__text { color: rgba(255, 255, 255, .68); margin-bottom: 1.5rem; max-width: 32rem; }

.orte { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.5rem; }
.orte li {
  font-size: .92rem;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .5rem 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.orte li:hover { border-color: var(--gold); background: rgba(232, 160, 29, .08); }
.orte li svg { color: var(--gold); flex: none; }
.gebiet__hinweis { font-size: .9rem; color: rgba(255, 255, 255, .5); }

/* ---------- Versprechen ----------
   Die Inhalte stammen aus dem Firmenflyer. Der Flyer selbst wird bewusst nicht
   abgebildet: Er ist das Kleinanzeigen-Auftreten, nicht der Webauftritt. */
.versprechen { display: grid; gap: .9rem; }
@media (min-width: 40em) { .versprechen { grid-template-columns: repeat(3, 1fr); } }
.versprechen li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow-1);
}
.versprechen li svg { color: var(--gold-deep); margin-bottom: .6rem; }
.versprechen strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.versprechen span { font-size: .85rem; color: var(--muted); }

.versprechen__zitat {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  border-left: 3px solid var(--gold);
  padding: .35rem 0 .35rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.versprechen__zitat cite { display: block; font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: .35rem; }

/* ---------- Kontakt ---------- */
.kontakt__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 58em) { .kontakt__grid { grid-template-columns: .95fr 1.05fr; } }

.kontakt__karten { display: grid; gap: 1rem; margin-top: 1.6rem; }
.kkarte {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kkarte:hover { transform: translateY(-2px); border-color: rgba(232, 160, 29, .5); box-shadow: var(--shadow-2); }
.kkarte__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.kkarte strong { display: block; color: var(--ink); font-size: 1.02rem; }
.kkarte span { font-size: .86rem; color: var(--muted); }

.kontakt__nebeninfo { margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }

/* Formular */
.formular {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  box-shadow: var(--shadow-1);
}
.formular h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.formular__hinweis { font-size: .88rem; color: var(--muted); margin-bottom: 1.4rem; }

.feld { margin-bottom: 1.1rem; }
.feld label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4rem;
}
.feld input, .feld textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: .8rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 160, 29, .18);
}
.feld textarea { resize: vertical; min-height: 8.5rem; }

.zustimmung {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: 1.3rem;
}
.zustimmung input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--gold-deep);
}
.zustimmung a { color: var(--ink); }

.formular__status {
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--gold-deep);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .65);
  padding-block: var(--s-6) var(--s-5);
}
.footer__grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 44em) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.footer h4 {
  color: var(--white);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.footer p { font-size: .9rem; max-width: 26rem; }
.footer ul { display: grid; gap: .5rem; }
.footer a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .92rem; transition: color .2s ease; }
.footer a:hover { color: var(--gold); }

.footer__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-size: .82rem;
  /* .45 ergab 4,46:1 und blieb damit knapp unter der Lesbarkeitsschwelle. */
  color: rgba(255, 255, 255, .58);
}

/* ---------- Lightbox ---------- */
/* ---------- Referenzen-Galerie ---------- */
/* Die Referenzen sind nach Gewerk gruppiert statt als eine Kachelwand:
   21 Fotos am Stück lassen sich nicht lesen, und die Gruppen entsprechen
   genau den Leistungen weiter oben. */
.galerie-gruppe + .galerie-gruppe { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.galerie-gruppe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.galerie-gruppe__kopf h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--ink);
}
.galerie-gruppe__kopf h3::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: .7rem;
}
.galerie-gruppe__kopf p { font-size: .9rem; color: var(--muted); flex: 1 1 18rem; min-width: 0; }
.galerie-gruppe__kopf .galerie-gruppe__zahl {
  flex: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* --gold-deep ist ein Hover-Ton und schafft auf Sand nur 2,6:1;
     --gold-ink ist der dafür vorgesehene Schriftton (5,2:1). */
  color: var(--gold-ink);
  white-space: nowrap;
}
/* Der Wisch-Hinweis gilt nur dort, wo die Reihe auch wirklich wischbar ist. */
.galerie-gruppe__wisch { display: none; }
@media (max-width: 47.99em) {
  .galerie-gruppe__wisch { display: inline; }
}

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}

/* Am Handy stünden die 21 Fotos untereinander – das waren rund 7500 px, fast
   neun Bildschirmlängen, durch die sich niemand scrollt. Deshalb wird jede
   Gruppe hier zu einer seitlich wischbaren Reihe. Es fällt kein Foto weg, die
   Galerie schrumpft aber von neun auf gut anderthalb Bildschirme.
   Reines CSS, kein JavaScript: overflow-x plus scroll-snap. */
@media (max-width: 47.99em) {
  .galerie {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* 78 % Breite: das nächste Foto lugt herein und zeigt, dass es weitergeht */
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    /* overflow-x beschneidet auch vertikal – oben Platz lassen, sonst wird der
       Fokusrahmen (3 px Outline, 3 px Offset) beim Tabben abgeschnitten. */
    padding-block: 6px .5rem;
  }
  .galerie__eintrag { scroll-snap-align: start; }
  /* figcaption darf die Spaltenbreite nicht sprengen */
  .galerie__eintrag figcaption { overflow-wrap: break-word; }
}
.galerie__eintrag { margin: 0; }
.galerie__eintrag button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-2);
  border-radius: var(--radius-s);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.galerie__eintrag button:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.galerie__eintrag button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.galerie__eintrag img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}
.galerie__eintrag button:hover img { transform: scale(1.04); }
.galerie__eintrag figcaption {
  margin-top: .55rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}
.galerie__fuss {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .galerie__eintrag button, .galerie__eintrag img { transition: none; }
  .galerie__eintrag button:hover { transform: none; }
  .galerie__eintrag button:hover img { transform: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 17, 21, .92);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.lightbox img {
  max-height: 88vh;
  max-width: min(92vw, 640px);
  width: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox__schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox__schliessen:hover { background: rgba(255, 255, 255, .22); }

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Unterseiten (Impressum/Datenschutz) ---------- */
.unterseite { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5rem); }
.unterseite .wrap { max-width: 46rem; }
.unterseite h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
.unterseite h2 { font-size: 1.35rem; margin-top: 2.2rem; margin-bottom: .7rem; }
.unterseite h3 { font-size: 1.08rem; margin-top: 1.4rem; margin-bottom: .45rem; }
.unterseite p, .unterseite li { font-size: .96rem; }
.unterseite p + p { margin-top: .7rem; }
.unterseite ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .35rem; margin-block: .6rem; }
.unterseite a { color: var(--gold-deep); }
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1.8rem;
}
.zurueck:hover { color: var(--ink); }