@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-700.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}

:root {
  /* Modern Organic / Editorial Boho (P6): dieselbe Naturpalette wie zuvor,
     aber bewusst heller eingesetzt - Terracotta/Clay bleiben Akzentfarben
     (Buttons, Linien, Sterne), keine großen dunklen Flächen mehr (siehe
     .service-grid und .contact weiter unten). Line-Töne wurden
     leicht abgeschwächt (0.13/0.07 -> 0.10/0.05), damit Rahmen überall
     feiner statt "kartig" wirken, ohne Kontrast/Barrierefreiheit zu
     verlieren (reine Trennlinien, kein Fließtext). */
  --ink: #2b2118;
  --ink-soft: #4d4033;
  --muted: #7d7061;
  --paper: #faf6ec;
  --linen: #f1e7d6;
  --sand: #e4d5b8;
  --cream: #fffcf6;
  --clay: #b4795a;
  --clay-deep: #8a5738;
  --terracotta: #c1633f;
  --sage: #838c6c;
  --sage-deep: #5e6849;
  --gold: #c69a4c;
  --gold-deep: #8b6230;
  --line: rgba(43, 32, 24, 0.1);
  --line-soft: rgba(43, 32, 24, 0.05);
  --shadow: 0 10px 28px rgba(75, 54, 36, 0.07);
  --glow: 0 12px 32px rgba(75, 54, 36, 0.1);
  --radius: 4px;
  --radius-lg: 18px;
  --arch: 4px;
  --arch-lg: clamp(64px, 11vw, 140px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3.4vw, 48px);
  /* Innere Contentbreite auf 1500px begrenzt, Leiste/Hintergrund bleibt
     full-width: auf breiten Monitoren wird die Navigation dadurch nicht mehr
     bis an die Bildschirmkanten auseinandergezogen - ohne Wrapper-Element im
     HTML (max() greift erst, wenn der Viewport breiter als 1500px ist).
     padding-block bewusst unverändert (17px) - Header-Höhe bleibt bei den in
     P4.2 vermessenen 80px, an die Dropdown-/Mobile-Panel-Offsets gebunden
     sind (siehe .nav-dropdown-menu / .site-nav @media 980px/760px). */
  padding-block: 17px;
  padding-inline: max(clamp(20px, 4vw, 56px), calc((100% - 1500px) / 2));
  border-bottom: 1px solid transparent;
  background: rgba(255, 253, 248, 0.86);
  backdrop-filter: blur(18px) saturate(1.08);
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 12px 36px rgba(55, 42, 30, 0.09);
}

/* Anker-Ziele bekommen einen Scroll-Versatz, damit der Inhalt beim Sprung
   per #anker-Link (z. B. "Angebot anfragen" -> kontakt/#anfrage) nicht
   unter dem fixierten/sticky Header landet. Großzügig auf 96px gesetzt -
   deckt den am Desktop gemessenen 80px-Header mit etwas Luft ab und lässt
   auf dem flacheren Mobile-Header (siehe @media 760px) sogar noch etwas
   zusätzlichen Freiraum. */
#anfrage,
#bewertungen,
#leistungen,
#tradition,
#referenzen,
#kontakt,
#datenschutz,
#impressum {
  scroll-margin-top: 96px;
}

/* Kein min-width mehr: die feste 250px-Reserve drückte die Navigation auf
   schmaleren Desktops unnötig zusammen. */
.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: block;
  width: 72px;
  height: 45px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Name und Berufsbezeichnung gehören untereinander. <strong>/<small> sind
   beide inline und liefen sonst auf einer Zeile durch ("Ralf Lorbach Maler-
   und Lackierermeister") - das margin-top an .brand small blieb dabei
   wirkungslos. */
.brand > span:not(.brand-mark) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  line-height: 1;
}

.brand small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* P6: noch ruhiger gesperrt (0.1em -> 0.08em) und leichter (700 -> 600) -
   wirkt editorial statt wie technische Industrienavigation. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 20px);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line-height: 1 gleicht die Höhen aller Hauptpunkte exakt an - vorher lagen
   "Start" und die übrigen Punkte 1px versetzt, was die Zeile unruhig machte.
   nowrap verhindert, dass "100 Jahre" zweizeilig umbricht. */
.site-nav > a,
.nav-item > a {
  position: relative;
  padding: 10px 12px;
  line-height: 1;
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: var(--ink);
}

.section,
.intro,
.section-band {
  padding-inline: clamp(20px, 5vw, 78px);
}

/* P6: moderat großzügiger als der P4.3-Wert (96px -> 108px), für mehr
   editoriale Luft zwischen den Sektionen. Die P4.3-Korrektur bleibt aber in
   Kraft: zwei direkt aufeinanderfolgende .section-Karten auf gleichem
   Untergrund (.section.no-top-Paare) summieren weiterhin NICHT zwei volle
   Innenabstände, siehe die eigene Regel dafür weiter unten. */
.section {
  padding-top: clamp(66px, 7vw, 108px);
  padding-bottom: clamp(66px, 7vw, 108px);
}

.section-band {
  min-height: auto;
}

/* P6.1: Creative Editorial Hero - asymmetrische Zwei-Spalten-Komposition
   (Foto ca. 57%, Text ca. 43%) statt gestapeltem Vollbreite-Foto mit
   Titelkarte darunter. Kein Blob/Schattierung mehr hinter dem Foto (siehe
   ehemals .hero::before), keine Maus-Tilt-Bewegung (siehe script.js -
   [data-float]/pointermove wurden vollständig entfernt). */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  max-width: 1220px;
  margin: 0 auto;
  padding-top: clamp(28px, 4vw, 46px);
  padding-bottom: clamp(58px, 8vw, 112px);
  overflow: visible;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
}

/* Leichter vertikaler Versatz nach oben - "Foto leicht aus dem normalen
   Grid versetzt" statt exakt im Raster zu sitzen. */
.hero-visual {
  position: relative;
  margin-top: clamp(-20px, -1.6vw, -8px);
}

/* Wrapper mit overflow:visible, damit die Comic-Figur und die "100
   Jahre"-Marke leicht über den Bildrahmen hinausragen können, während das
   Foto selbst (samt Wisch-Canvas) weiterhin sauber auf die Arch-Form
   geclippt bleibt (siehe .hero-media/.primary-image, overflow:hidden). */
.hero-media-frame {
  position: relative;
  overflow: visible;
}

.hero-media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

.arch-frame {
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--sand);
  box-shadow: var(--shadow);
}

.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* P6.1: Höhe an die neue, schmalere Foto-Spalte (ca. 57% statt fast voller
   Hero-Breite) angepasst, damit das Container-Seitenverhältnis nah am
   Seitenverhältnis des Originalfotos (1000x646 = 1,548) bleibt - dadurch
   wird beim object-fit:cover-Zuschnitt eher weniger oben/unten abgeschnitten
   als in der alten, sehr breiten Vollbild-Version (dort lag das
   Containerverhältnis bei ca. 2,3 und schnitt deutlich mehr vertikal ab).
   object-position bleibt unverändert (siehe unten) - Köpfe bleiben dadurch
   mindestens genauso gut sichtbar, siehe P6.1-Test. Schatten auf ein
   Minimum reduziert statt var(--shadow) ("fast kein Shadow" laut Auftrag). */
.primary-image {
  position: relative;
  height: clamp(340px, 30vw, 460px);
  border-radius: var(--arch-lg) var(--arch-lg) 8px 8px;
  box-shadow: 0 10px 26px rgba(43, 32, 24, 0.05);
}

.primary-image img {
  object-position: center 12%;
  filter: sepia(0.14) saturate(0.82) contrast(0.98) brightness(1.03);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.primary-image:hover img {
  transform: scale(1.02);
}

.paint-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* No-JS fallback: without the "js" class on <html>, the cover/figure never
   render, so the hero photo just shows normally. hero-paint.js takes over
   the moment it runs. */
.paint-cover,
.paint-character {
  display: none;
}

.js .paint-cover,
.js .paint-character {
  display: block;
}

.paint-cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* <canvas>: hero-paint.js draws the wall wash, wet-sheen highlight and the
     current mask frame directly onto its pixels every tick (destination-in
     compositing). A CSS mask-image swapped via JS was tried first, but
     changing mask-image every ~30ms/frame can make the browser briefly show
     the layer unmasked while the new image loads/decodes - visible as
     flicker on both desktop and mobile Chrome. Canvas draws are synchronous,
     so there's no such gap. */
}

/* P6.1: etwas kleiner als zuvor und jetzt Geschwisterelement von
   .hero-media (nicht mehr innerhalb von .paint-intro verschachtelt) -
   .hero-media-frame ist overflow:visible, .hero-media/.paint-intro bleiben
   overflow:hidden. Der leicht negative bottom-Wert lässt die Figur minimal
   über die Unterkante des Fotorahmens hinausragen ("teilweise über den
   Bildrahmen hinaus" statt flach aufgesetzt wie ein Sticker), der
   drop-shadow-Filter gibt ihr etwas Bodenhaftung/Tiefe. Die
   Positions-/Bewegungslogik in js/hero-paint.js bleibt unverändert - sie
   misst Breite/Position zur Laufzeit und ist von dieser Größenanpassung
   unabhängig. */
.paint-character {
  position: absolute;
  z-index: 2;
  bottom: -14px;
  left: 2%;
  width: clamp(96px, 15vw, 168px);
  height: clamp(138px, 21.5vw, 240px);
  opacity: 0;
  filter: drop-shadow(0 10px 12px rgba(43, 32, 24, 0.16));
  will-change: transform, opacity;
}

.paint-character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* hero-paint.js schaltet [data-paint-reveal] synchron auf is-revealed, noch
   bevor irgendetwas geladen/animiert wird (Core-Web-Vitals-Fix: H1/Hero-Text/
   CTA dürfen nie auf die Animation warten). Der opacity:0-Zustand ist damit
   nur die Startposition für die kurze Einblend-Transition, kein Gate mehr.
   Nur unter der "js"-Klasse aktiv (siehe Inline-Script in <head>), damit die
   Seite ohne JavaScript oder bei einem frühen Skriptfehler unverändert
   sichtbar bleibt. */
.js [data-paint-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

.js [data-paint-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}

/* P6.1: Text steht jetzt direkt auf der hellen Seitenfläche neben dem Foto -
   keine Titelkarte/Box mehr (siehe ehemals .hero-title-panel). Linksbündig
   statt zentriert, passend zur asymmetrischen Zwei-Spalten-Komposition. */
.hero-content {
  position: relative;
  z-index: 1;
  text-align: left;
}

.hero-content::before {
  content: "";
  display: block;
  width: 44px;
  height: 1.5px;
  margin-bottom: 20px;
  background: var(--terracotta);
  opacity: 0.7;
}

/* Schmalere, an die neue Spaltenbreite angepasste Überschriftgröße, damit
   die H1 zweizeilig statt dreizeilig umbricht und Above-the-Fold Platz für
   Text + CTA bleibt. Wortlaut der H1 bleibt unverändert. */
.hero-content h1 {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(36px, 3.6vw, 54px);
}

.hero-content .hero-copy {
  margin: 20px 0 0;
  max-width: 460px;
}

.hero-content .hero-actions {
  justify-content: flex-start;
}

/* Kleine, dezente "100 Jahre"-Marke als Medaillon, das leicht oben links auf
   den Fotorahmen überlappt (siehe .hero-media-frame, overflow:visible) -
   ersetzt die frühere separate .anniversary-card-Box im Textbereich. */
.hero-badge {
  position: absolute;
  z-index: 3;
  top: -18px;
  left: clamp(20px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(193, 99, 63, 0.3);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 8px 20px rgba(43, 32, 24, 0.08);
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hero-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(43, 32, 24, 0.12);
}

.hero-badge span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.hero-badge small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-media img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

/* P6: kleiner, feiner, großzügiger gesperrt statt fett/dominant - die
   Eyebrow soll ein leises Editorial-Signal sein, kein Label. */
.eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* P6: font-weight 600 -> 500 für einen leichteren, editorialeren Schnitt
   (Fashion-/Interior-Editorial-Anmutung), Zeilenhöhe minimal großzügiger. */
h1,
h2,
h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(40px, 6.4vw, 78px);
  max-width: 920px;
  margin-inline: auto;
  font-weight: 500;
}

h2 {
  font-size: clamp(33px, 4.4vw, 58px);
}

h3 {
  font-size: 25px;
  font-weight: 500;
}

p {
  color: var(--muted);
  line-height: 1.78;
}

.hero-copy {
  max-width: 620px;
  margin: 0;
  font-size: 17px;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-actions {
  justify-content: flex-start;
}

/* P6: kleiner und weniger massiv (52px -> 45px Höhe, 28px -> 22px
   Padding, Schriftgewicht 600 -> 500), die charakteristische asymmetrische
   Ecke bleibt erhalten, nur enger skaliert. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 3px 11px 3px 11px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button.primary {
  color: var(--cream);
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  box-shadow: 0 10px 24px rgba(90, 58, 34, 0.2);
}

.button.primary:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
}

.button.secondary {
  color: var(--ink);
  background: transparent;
  border-color: rgba(43, 32, 24, 0.32);
}

.button.secondary:hover {
  border-color: var(--ink);
  background: rgba(43, 32, 24, 0.04);
}

.button:hover {
  transform: translateY(-2px);
}

/* P6: deutlich ruhigere Editorial-Sektion statt kompaktem Zwei-Spalten-
   Textblock - mehr Weißraum oben/unten, größere Serif-Überschrift, kürzerer
   Absatz auf begrenzter Zeilenlänge. Bestehender Text unverändert, kein
   neues Bild ergänzt (das historische Foto ist bereits Hero + Chronik +
   Social-Preview, eine erneute Verwendung hier hätte sich wiederholt). */
.intro {
  padding-top: clamp(70px, 9vw, 128px);
  padding-bottom: clamp(70px, 9vw, 128px);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(300px, 0.75fr);
  gap: clamp(32px, 7vw, 100px);
  align-items: end;
  max-width: 1180px;
  margin: 0 auto;
}

.intro-grid p:last-child {
  margin: 0;
  max-width: 460px;
  font-size: 17.5px;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 42px;
}

.section-heading p:last-child {
  max-width: 620px;
  margin-top: 18px;
  font-size: 17px;
}

.section-heading.compact {
  max-width: 680px;
}

.services {
  background: var(--paper);
  border-block: 1px solid var(--line);
}

/* P6: von einem sechsfachen "Card"-Raster (Rahmen/Hintergrund/Schatten) zu
   einem ruhigen, symmetrischen 3+3-Bildraster - die Leistungen sollen über
   große Arch-Fotos wirken, nicht über UI-Kartenkacheln. Alle sechs
   Kategorien bleiben in identischer Reihenfolge, gleich groß und gleich
   erreichbar; nur die Optik wird leiser. Die vormals dunkle "featured"-
   Auszeichnung der ersten Karte entfällt (keine schwere dunkle Fläche mehr,
   siehe P6-Auftrag Abschnitt 1) - alle sechs wirken jetzt gleichrangig. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4.4vw, 56px) clamp(24px, 3vw, 40px);
}

.service-card {
  min-height: 0;
  padding: 0;
  transition: transform 210ms ease;
}

.service-card-media {
  display: block;
  height: clamp(280px, 23vw, 360px);
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: var(--arch-lg) var(--arch-lg) 6px 6px;
  box-shadow: none;
  cursor: zoom-in;
}

.service-card-media img {
  transition: transform 500ms ease;
}

.service-card:hover .service-card-media img {
  transform: scale(1.03);
}

.service-card:hover {
  transform: translateY(-3px);
}

.service-card span {
  display: block;
  margin: 0 0 8px;
  color: var(--terracotta);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.service-card p {
  margin: 14px 0 0;
}

/* Feiner statt fett/gepunktet - die Liste bleibt vollständig im DOM
   (SEO/Inhalt unverändert), tritt optisch aber hinter Bild/Titel/Kurztext
   zurück. */
.service-list {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.service-card .leistung-card-link {
  margin-top: 16px;
}

.heritage {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(0, 0.92fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}

.heritage-gallery {
  display: grid;
  grid-template-columns: 1.2fr 0.82fr;
  gap: 14px;
}

.heritage-gallery figure {
  position: relative;
  display: grid;
  min-height: 210px;
  margin: 0;
  overflow: hidden;
  border-radius: 3px 3px 20px 3px;
  box-shadow: var(--shadow);
  background: var(--sand);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Echter, größerer Arch-Shape auf dem hochformatigen Gründer-Portrait
   (var(--arch-lg), P6), leicht unterschiedliche Ecken bei den übrigen
   Bildern statt vier identischer Rechtecke. */
.heritage-main {
  border-radius: var(--arch-lg) var(--arch-lg) 6px 6px;
}

.heritage-gallery figure:nth-child(3) {
  border-radius: 3px 20px 3px 3px;
}

.heritage-gallery figure:nth-child(4) {
  border-radius: 20px 3px 3px 3px;
}

.heritage-zoom {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.heritage-gallery figure:hover {
  box-shadow: var(--glow);
  transform: translateY(-4px);
}

.heritage-gallery img {
  object-fit: contain;
  object-position: center;
  padding: 12px;
  background: rgba(255, 253, 248, 0.72);
  filter: grayscale(0.8) sepia(0.16) contrast(1.05);
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 220ms ease;
}

.heritage-gallery figure:hover img {
  transform: scale(1.015);
  filter: grayscale(0.18) sepia(0.08) contrast(1.06);
}

.heritage-main {
  grid-row: span 3;
  min-height: 650px;
}

/* P6: heller "Frosted-Glass"-Pill statt dunkler Overlay-Fläche - passt zur
   restlichen editorialen Bildsprache und wirkt auf jedem Foto leicht statt
   schwer. */
.heritage-gallery figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255, 253, 248, 0.86);
  backdrop-filter: blur(10px);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
  background: rgba(42, 33, 27, 0.78);
  backdrop-filter: blur(18px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox figure {
  position: relative;
  width: min(1080px, 92vw);
  max-height: 88vh;
  margin: 0;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid rgba(255, 253, 248, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

.lightbox img {
  width: 100%;
  height: min(72vh, 760px);
  object-fit: contain;
  background: var(--paper);
}

.lightbox figcaption {
  margin-top: 14px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.lightbox-arrow {
  position: fixed;
  top: 50%;
  z-index: 1;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 253, 248, 0.36);
  border-radius: 50%;
  color: var(--paper);
  font-size: 26px;
  line-height: 1;
  background: rgba(42, 33, 27, 0.66);
  cursor: pointer;
}

.lightbox-arrow[hidden] {
  display: none;
}

.lightbox-prev {
  left: 18px;
}

.lightbox-next {
  right: 18px;
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 253, 248, 0.36);
  border-radius: 50%;
  color: var(--paper);
  font-size: 30px;
  line-height: 1;
  background: rgba(42, 33, 27, 0.66);
  cursor: pointer;
}

.heritage-content h2 span {
  color: var(--gold-deep);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink);
  font-weight: 600;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sage);
}

/* P6: von der randscharfen Panel-Karte (Rahmen/Hintergrund) zu einem
   editorialen Portrait-Layout - viel Weißraum statt Kartenfläche, großer
   Arch-Bogen auf dem Foto, feine Akzentlinie vor der Eyebrow statt Rahmen.
   Bildausschnitt/-größe des Fotos (.team-spotlight-media img) bewusst NICHT
   verändert, damit die sichtbaren Köpfe nicht erneut beschnitten werden. */
.team-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
}

.team-spotlight-media button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.team-spotlight-media .arch-frame {
  border-radius: var(--arch-lg) var(--arch-lg) 8px 8px;
}

.team-spotlight-media img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
}

.team-spotlight-content::before {
  content: "";
  display: block;
  width: 48px;
  height: 1.5px;
  margin-bottom: 18px;
  background: var(--terracotta);
  opacity: 0.7;
}

.team-spotlight-content p:not(.eyebrow) {
  margin: 0 0 16px;
  font-size: 17px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* P6: offenes 3er-Raster statt Tabellen-/Grid-Optik mit sichtbaren
   Trennlinien - wirkt weniger technisch, mehr Editorial-Aufzählung. */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.process-list article {
  padding: 0;
}

.process-list span {
  display: block;
  margin-bottom: 10px;
  color: var(--terracotta);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
}

/* P6: von dunklem Foto-Overlay (weiße Schrift) zu einer hellen, luxuriösen
   Linen-Fläche mit dunkler Schrift - "keine dunklen schweren Flächen" (siehe
   P6-Auftrag Abschnitt 1/11). Das frühere Hintergrundfoto
   (img/chronik/kontakt-bg.jpg) wird nicht mehr referenziert, die Datei
   bleibt aber unangetastet im Repository. Buttons/Text übernehmen jetzt die
   globalen, für helle Flächen ausgelegten Stile - die frühere Dark-Mode-
   Sonderbehandlung entfällt ersatzlos. */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  align-items: center;
  gap: clamp(28px, 6vw, 88px);
  min-height: auto;
  padding-top: clamp(66px, 7vw, 104px);
  padding-bottom: clamp(66px, 7vw, 104px);
  background: var(--linen);
  border-top: 1px solid var(--line);
}

.contact-more-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Feine Akzentlinie statt Glas-Panel - passt zur übrigen, leichteren
   Bildsprache (vgl. .team-spotlight-content::before). */
.contact-card {
  display: grid;
  gap: 10px;
  padding-left: 24px;
  border-left: 2px solid var(--terracotta);
  font-style: normal;
}

.contact-card strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

.site-footer,
.legal {
  padding: 24px clamp(20px, 5vw, 78px);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer div {
  display: flex;
  gap: 18px;
}

.legal {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.legal:target {
  display: block;
}

.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  font-size: 34px;
}

.legal h3 {
  margin-top: 32px;
  margin-bottom: 10px;
  font-size: 19px;
  color: var(--ink);
}

.legal p {
  font-size: 15px;
}

.legal a {
  color: var(--gold-deep);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .hero,
  .intro-grid,
  .heritage,
  .team-spotlight,
  .contact {
    grid-template-columns: 1fr;
  }

  /* Sobald der Hero einspaltig wird, wirkt die am Desktop bewusst
     linksbündige, asymmetrische Textspalte auf schmalen/mittleren Breiten
     unausgewogen (Buttons "schweben" links im leeren Raum). Ab hier daher
     zentriert wie vor P6.1 - der Desktop-Look bleibt unverändert. */
  .hero-visual {
    min-height: auto;
    margin-top: 0;
  }

  .hero-content {
    text-align: center;
  }

  .hero-content::before {
    margin-inline: auto;
  }

  .hero-content .hero-actions {
    justify-content: center;
  }

  .service-grid,
  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card-media {
    height: 240px;
  }

  .heritage-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .heritage-main {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 520px;
  }
}

/* Kompakt-/Burger-Navigation bewusst schon ab 980px statt erst ab 760px:
   zwischen 761px und ca. 1000px brauchte die horizontale Navigation mehr
   Platz als verfügbar war, wodurch "100 Jahre" zweizeilig umbrach und der
   Header auf 89px wuchs. Lieber früher das Burger-Menü als ein kaputtes
   mehrzeiliges Desktop-Menü. Betrifft ausschließlich Header/Navigation -
   das übrige Mobile-Layout bleibt an seinem 760px-Breakpoint. */
@media (max-width: 980px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: fixed;
    inset: 88px 14px auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  /* Bestehende Touch-Darstellung im aufgeklappten Panel beibehalten. */
  .site-nav > a,
  .nav-item > a {
    border-radius: var(--radius);
    white-space: normal;
  }

  .site-nav > a:hover,
  .site-nav > a.is-active,
  .nav-item > a:hover {
    color: var(--ink);
    background: rgba(217, 173, 70, 0.13);
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-block: 14px;
    padding-inline: 18px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 58px;
    height: 36px;
  }

  .brand small {
    display: none;
  }

  /* Header ist hier flacher als im 761-980px-Band, Panel rückt entsprechend
     nach oben (unveränderte Mobile-Darstellung). */
  .site-nav {
    inset: 75px 14px auto;
  }

  .site-nav a {
    border-radius: var(--radius);
  }

  .section,
  .intro,
  .section-band {
    padding-inline: 18px;
  }


  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 32px;
  }

  .section-band {
    min-height: auto;
  }

  /* Mobile: Foto -> Eyebrow -> H1 -> Text -> CTA einspaltig, zentriert (siehe
     @media 980px oben) - keine 2-Spalten-Komposition. */
  .hero-visual {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .primary-image {
    height: 300px;
    border-radius: 32px 32px 6px 6px;
  }

  .hero-content {
    max-width: 100%;
    margin-top: 28px;
  }

  .service-grid,
  .process-list {
    grid-template-columns: 1fr;
  }

  .service-card-media {
    height: 260px;
  }

  .heritage-gallery {
    grid-template-columns: 1fr;
  }

  .heritage-gallery figure,
  .heritage-main {
    min-height: 340px;
  }

  .heritage-gallery figcaption {
    border-radius: var(--radius);
  }

  .site-footer {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   Phase 2: Multi-Page-Navigation (Breadcrumbs, Leistungen-Dropdown,
   Unterseiten-Hero, CTA-Band, Leistungs-Hub-Karten, Kontakt/Projekte).
   Nutzt ausschließlich bestehende Tokens/Klassen als Grundlage, keine
   neue Farbwelt oder Typografie.
   ------------------------------------------------------------------- */

.breadcrumbs {
  max-width: 1220px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 78px) 0;
  font-size: 13px;
  color: var(--muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--line);
}

.breadcrumbs a {
  color: var(--muted);
  transition: color 160ms ease;
}

.breadcrumbs a:hover {
  color: var(--gold-deep);
}

.breadcrumbs li[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

/* Leistungen-Dropdown in der Hauptnavigation */
.nav-item {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 981px) {
  /* Ruhige Clay-Linie statt auffälliger Pill-Fläche - passt besser zum
     Architectural-Boho-Stil als der bisherige gelbe Hintergrundblock. */
  .site-nav > a::after,
  .nav-item > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 1.5px;
    background: var(--clay);
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 170ms ease, transform 170ms ease;
  }

  .site-nav > a:hover,
  .site-nav > a.is-active,
  .nav-item > a:hover,
  .nav-item:focus-within > a {
    color: var(--ink);
  }

  .site-nav > a:hover::after,
  .site-nav > a.is-active::after,
  .nav-item > a:hover::after,
  .nav-item:focus-within > a::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /* Chevron als reine CSS-Form (kein Textzeichen), damit Screenreader nichts
     Zusätzliches vorlesen. Zeigt im geschlossenen Zustand nach unten. */
  .nav-item > a {
    padding-right: 26px;
  }

  .nav-item > a::after {
    right: 26px;
  }

  .nav-item > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.7;
    transform: rotate(45deg);
    transition: transform 170ms ease, margin-top 170ms ease;
  }

  .nav-item:hover > a::before,
  .nav-item:focus-within > a::before {
    margin-top: -1px;
    transform: rotate(225deg);
  }

  /* P6: heller/weicher (Paper statt Cream), Rahmen nur noch angedeutet,
     deutlich flacherer Schatten - "clean" statt sichtbares UI-Panel. */
  .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 258px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 3px 16px 3px 3px;
    background: var(--paper);
    box-shadow: 0 10px 26px rgba(75, 54, 36, 0.08);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    font-size: 14px;
  }

  /* Unsichtbare Brücke über den Abstand zwischen Navigationspunkt und
     Dropdown: ohne sie verliert die Maus auf dem Weg nach unten den Hover
     und das Menü klappt wieder zu. */
  .nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }

  .nav-item:hover .nav-dropdown-menu,
  .nav-item:focus-within .nav-dropdown-menu {
    display: flex;
  }

  .nav-dropdown-menu a {
    padding: 9px 12px;
    border-radius: 3px;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: background 140ms ease, color 140ms ease;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible {
    color: var(--ink);
    background: rgba(180, 121, 90, 0.1);
  }
}

@media (max-width: 980px) {
  .nav-item {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-dropdown-menu {
    margin: 2px 0 6px 14px;
  }

  .nav-dropdown-menu a {
    padding: 7px 13px;
    font-size: 12px;
  }
}

/* Unterseiten-Hero (ohne Wisch-Animation, für /leistungen/, /kontakt/ usw.).
   padding-inline hatte hier nie gefehlt - äh, gefehlt: die Breadcrumb direkt
   darüber hat immer einen seitlichen Einzug (clamp(20px,5vw,78px), siehe
   .breadcrumbs), .page-hero selbst aber keinen. Dadurch stand die H1/Text/
   Buttons unterhalb ~1376px Viewportbreite (wenn max-width:1220px nicht
   mehr greift) bündig an der Displaykante, während die Breadcrumb darüber
   sauber eingerückt blieb - auf dem Smartphone am auffälligsten. Jetzt
   derselbe Einzug wie bei Breadcrumb/.section. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: clamp(32px, 6.6vw, 80px);
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
  padding-block: clamp(24px, 3.4vw, 40px) clamp(56px, 7.6vw, 96px);
  padding-inline: clamp(20px, 5vw, 78px);
}

.page-hero h1 {
  margin: 0;
  max-width: none;
  text-align: left;
}

.page-hero-copy {
  margin-top: 18px;
  max-width: 560px;
  font-size: 17px;
}

/* P6: größerer, deutlicherer Arch-Bogen (var(--arch-lg)), kein sichtbarer
   Rahmen mehr. Höhe bewusst unverändert gelassen - die Kontaktseite zeigt
   hier dasselbe Teamfoto wie .team-spotlight; eine andere Rahmenhöhe würde
   den in P4.5 korrigierten Bildausschnitt (sichtbare Köpfe) erneut
   verändern. */
.page-hero-media {
  height: clamp(240px, 32vw, 400px);
  border-radius: var(--arch-lg) var(--arch-lg) 8px 8px;
}

.page-hero-media img {
  object-fit: cover;
}

/* Alle Unterseiten-Heros sind Hochformat-Fotos in diesem Querformat-Rahmen;
   auf schmalen Viewports schneidet object-fit: cover davon rund die Hälfte der
   Höhe weg. Bei zentriertem Standardausschnitt traf das auf der Kontaktseite
   genau die Gesichter (Köpfe komplett abgeschnitten). Für Motive, deren
   Bildinhalt oben liegt, wird der Ausschnitt deshalb an die Oberkante gelegt. */
.page-hero-media.is-portrait-top img {
  object-position: 50% 6%;
}

/* Sobald der Unterseiten-Hero einspaltig wird (≤980px), lief das Bild über die
   volle Spaltenbreite, während die Rahmenhöhe klein blieb - bei 768px ergab das
   einen 3:1-Streifen, von dem knapp 70% der Bildhöhe fehlten. Feste
   Rahmenhöhe hier deshalb durch ein ruhiges 4:3-Format mit begrenzter Breite
   ersetzt, das zu den Hochformat-Fotos deutlich besser passt. */
@media (max-width: 980px) {
  .page-hero-media {
    height: auto;
    aspect-ratio: 4 / 3;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* Sobald der Unterseiten-Hero einspaltig wird, zentriert statt linksbündig -
   konsistent mit dem Startseiten-Hero (siehe .hero-content @media 980px),
   damit CTA-Buttons auf dem Smartphone nicht unausgewogen links "schweben". */
@media (max-width: 980px) {
  .page-hero {
    grid-template-columns: 1fr;
  }

  .page-hero > div {
    text-align: center;
  }

  .page-hero h1 {
    text-align: center;
  }

  .page-hero-copy {
    margin-inline: auto;
  }

  .page-hero .hero-actions {
    justify-content: center;
  }
}

/* CTA-Band, wiederverwendbar am Seitenende jeder Unterseite. P6: von der
   umrandeten Karte zu einer offenen, durch eine feine Linie abgesetzten
   Fläche - "weniger harte Blöcke" (P6-Auftrag Abschnitt 14). */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(38px, 5.6vw, 56px) 0 0;
  border-top: 1px solid var(--line);
}

.cta-band h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.cta-band p {
  margin: 10px 0 0;
  max-width: 480px;
}

.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Leistungen-Hub: dieselbe bildstarke, ruhige Editorial-Sprache wie das
   Startseiten-Leistungsraster (P6) statt umrandeter UI-Karten - kein Rahmen,
   kein Kartenhintergrund, großer Arch-Bogen aufs Bild. */
.leistung-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 48px) clamp(22px, 3vw, 36px);
}

.leistung-card {
  display: flex;
  flex-direction: column;
  transition: transform 210ms ease;
}

.leistung-card:hover,
.leistung-card:focus-visible {
  transform: translateY(-3px);
}

.leistung-card-media {
  display: block;
  height: clamp(240px, 20vw, 300px);
  border-radius: var(--arch-lg) var(--arch-lg) 6px 6px;
  overflow: hidden;
}

.leistung-card-media img {
  transition: transform 500ms ease;
}

.leistung-card:hover .leistung-card-media img {
  transform: scale(1.03);
}

.leistung-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 2px 0;
}

.leistung-card-body .eyebrow {
  margin-bottom: 6px;
}

.leistung-card-body p {
  margin: 12px 0 0;
  flex: 1;
}

.leistung-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--gold-deep);
  font-weight: 700;
  font-size: 14px;
}

@media (max-width: 980px) {
  .leistung-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .leistung-grid {
    grid-template-columns: 1fr;
  }
}

/* Kompakte Einleitung (z. B. Leistungen-Hub, Projekte, Kontakt) + Utility */
.intro-band {
  padding-top: clamp(20px, 3vw, 34px);
  padding-bottom: 0;
}

.intro-band-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.intro-band-inner p.lede {
  margin-top: 16px;
  font-size: 17px;
}

.section.no-top {
  padding-top: 0;
}

/* Das Projekte-CTA-Band ist eine in sich geschlossene Karte auf gleichem
   Untergrund wie die folgende Sektion. Ohne diese Kürzung trafen hier zwei
   volle Innenabstände aufeinander (~250px reine Leerfläche zwischen
   "Projekte" und "Arbeitsweise"). */
.section.no-top {
  padding-bottom: clamp(44px, 4.4vw, 66px);
}

.section.no-top + .section {
  padding-top: clamp(34px, 3.4vw, 52px);
}

.section-cta-link {
  margin-top: 34px;
  text-align: center;
}

.section-cta-link.align-left {
  text-align: left;
}

.section p.lead-note {
  margin-top: 22px;
}

/* Foto-Galerie auf den Leistungs-Detailseiten (nutzt bestehende Lightbox) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.photo-grid button {
  height: 190px;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

@media (max-width: 980px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .photo-grid button {
    height: 220px;
  }
}

/* Interne Verlinkung zu verwandten Leistungen am Seitenende */
.related-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.related-links a {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: transparent;
  font-weight: 700;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.related-links a:hover {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

@media (max-width: 980px) {
  .related-links {
    grid-template-columns: 1fr;
  }
}

/* Kontakt-Seite */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(28px, 6vw, 70px);
  max-width: 1180px;
  margin: 0 auto;
}

.kontakt-facts {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.kontakt-facts div {
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 3px 18px 3px 3px;
  background: var(--cream);
}

.kontakt-facts strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
}

.kontakt-facts p {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 980px) {
  .kontakt-grid {
    grid-template-columns: 1fr;
  }
}

/* Projekte-Hub */
.projekte-placeholder {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  background: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 404-Seite: nutzt bewusst dieselben Tokens/Klassen wie der Rest der Seite
   (eyebrow, h1, .button, .hero-actions) statt eines eigenen Stilsystems. */
.error-page {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(64px, 12vh, 120px) 24px clamp(72px, 14vh, 140px);
  text-align: center;
}

.error-page-phone {
  margin-top: 18px;
  font-size: 14px;
}

.error-page-phone a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Phase 3: Conversion-Schärfung (Trust-Leiste, mobile Sticky-CTA,
   Kontaktformular, Bewertungs-Vorbereitung, Chronik-Timeline,
   Projekte-Kartenraster, Fokus-Zustände). Rein additiv, nutzt
   ausschließlich bestehende Tokens/Farben/Typografie.
   ------------------------------------------------------------------- */

/* Klar sichtbarer, markenkonformer Fokus-Ring für Tastaturbedienung -
   ergänzt (nicht ersetzt) den nativen Browser-Fokus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

/* Ruhige Kennzahlen-Leiste direkt unter dem Hero: seit 1924, 5 Generationen,
   Meisterbetrieb, Frechen. Ausschließlich verifizierbare Angaben, bewusst
   typografisch statt mit bunten Icons gelöst. */
.trust-bar-section {
  padding-top: 12px;
  padding-bottom: 44px;
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.trust-bar li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  text-align: center;
}

/* Natürliches Trennelement statt Kartenrahmen: ein feiner vertikaler Strich
   zwischen den Feldern, leicht versetzt für eine ruhige, organische Reihe. */
.trust-bar li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(clamp(14px, 2.5vw, 32px) * -1);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.trust-bar li:nth-child(even) {
  transform: translateY(10px);
}

.trust-bar strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.trust-bar span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .trust-bar {
    justify-content: space-between;
    gap: 22px 18px;
  }

  .trust-bar li {
    flex: 1 1 calc(50% - 18px);
  }

  .trust-bar li:nth-child(even) {
    transform: none;
  }

  .trust-bar li:nth-child(-n + 2)::before,
  .trust-bar li:nth-child(3)::before {
    display: none;
  }
}

/* Mobile Sticky-CTA-Leiste (wird von script.js auf allen Seiten eingehängt).
   Nur auf schmalen Viewports sichtbar, respektiert die untere
   Safe-Area (Home-Indicator) und bleibt unter Header/Lightbox in der
   Stapelreihenfolge. */
.sticky-cta {
  display: none;
}

@media (max-width: 760px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    gap: 1px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--line);
    box-shadow: 0 -10px 28px rgba(42, 33, 27, 0.18);
  }

  .sticky-cta-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
  }

  .sticky-cta-link.call {
    color: var(--cream);
    background: var(--ink);
  }

  .sticky-cta-link.quote {
    color: var(--cream);
    background: var(--terracotta);
  }

  /* Platz für die fixierte Leiste reservieren, damit sie nichts verdeckt
     (Footer-Links, Rechtstexte, letzter CTA-Band). */
  body.has-sticky-cta {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* Kontaktformular */
.contact-form {
  display: grid;
  gap: 22px;
  max-width: 660px;
  margin-top: 8px;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line-soft);
  border-radius: 3px 32px 3px 3px;
  background: var(--linen);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(180, 121, 90, 0.16);
}

.form-field textarea {
  min-height: 150px;
  resize: vertical;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}

.form-checkbox input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--gold-deep);
}

.form-checkbox a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot-Feld: für Menschen unsichtbar, aber im DOM und per Tab
   erreichbar auslassbar - bewusst nicht display:none (das erkennen manche
   Bots) und aria-hidden, damit Screenreader es korrekt überspringen. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.form-note {
  margin: 0;
  font-size: 13px;
}

.form-status {
  display: none;
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-weight: 700;
}

.form-status:target {
  display: block;
}

.form-status.success {
  color: #3d5a2e;
  background: rgba(118, 127, 94, 0.16);
  border: 1px solid rgba(118, 127, 94, 0.35);
}

.form-status.error {
  color: #7a2f1f;
  background: rgba(217, 123, 79, 0.14);
  border: 1px solid rgba(217, 123, 79, 0.35);
}

@media (max-width: 620px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Kurzer Bewertungs-Hinweis mit Link zur vollständigen Review-Sektion auf
   der Startseite - keine doppelte vollständige Review-Sektion auf /kontakt/. */
.reviews-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 3px 20px 3px 3px;
  background: var(--linen);
}

.reviews-panel-logo {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.reviews-panel a {
  color: var(--clay-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reviews-panel p {
  margin: 8px 0 0;
  font-size: 14px;
}

.reviews-panel .eyebrow {
  margin-bottom: 0;
}

/* Chronik-Timeline (100-Jahre-Seite): Generationen-Hierarchie statt
   einfacher Liste. Keine erfundenen Jahreszahlen - nur 1924 ist verifiziert
   (Lehrvertrag/Impressum), die übrigen Generationen zeigen bewusst nur ihre
   Ordnungszahl statt geratener Daten. */
.timeline {
  display: grid;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}

.timeline li {
  position: relative;
  z-index: 0;
  padding: 0 0 44px 34px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--line);
}

.timeline-year {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline h3 {
  margin: 0 0 6px;
  font-size: 21px;
}

.timeline p {
  margin: 0;
  font-size: 15px;
}

/* Projekte: vorbereitetes Kartenraster für künftige echte Fallstudien.
   Aktuell nirgends mit Inhalten befüllt (siehe projekte/index.html). */
.projekt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.projekt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 3px 3px 22px 3px;
  background: var(--cream);
  overflow: hidden;
  transition: box-shadow 210ms ease, transform 210ms ease;
}

.projekt-card:nth-child(even) {
  border-radius: 3px 3px 3px 22px;
}

.projekt-card:hover,
.projekt-card:focus-visible {
  box-shadow: var(--glow);
  transform: translateY(-3px);
}

.projekt-card-media {
  display: block;
  height: 220px;
  overflow: hidden;
}

.projekt-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 22px 24px;
}

.projekt-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.projekt-card-body p {
  margin: 10px 0 0;
  flex: 1;
}

@media (max-width: 980px) {
  .projekt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .projekt-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Phase 4.1: Google Review Redesign, P6: beruhigt/aufgehellt. Der Google-
   Bezug bleibt bewusst erkennbar (gelbe Sterne, Google-Blau, offizielles
   G-Logo), die Fläche wurde aber von einem eigenständigen "Widget-Grau" auf
   die warme Paper-/Cream-Palette der übrigen Seite umgestellt, Kartenrahmen
   entfernt bzw. stark abgeschwächt und mehr Weißraum ergänzt - ruhiger statt
   wie ein eingebettetes Fremd-Widget. Farb-Tokens bleiben lokal auf .reviews
   gescoped.
   ------------------------------------------------------------------- */

.reviews {
  --g-bg: var(--paper);
  --g-card: var(--cream);
  --g-border: var(--line-soft);
  --g-border-soft: var(--line-soft);
  --g-text: var(--ink);
  --g-text-muted: var(--muted);
  --g-shadow: 0 8px 22px rgba(75, 54, 36, 0.05);
  --g-radius: 16px;
  background: var(--g-bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Google-typische gelbe Sterne - gilt für Zusammenfassung, Karten und die
   kompakte Review-Zeile auf /kontakt/, da alle Sterne echte Google-
   Bewertungen abbilden. */
.reviews-stars {
  color: #fbbc04;
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* Google-Gesamtbewertung: G-Logo + Bezeichnung + Note + Sterne + Anzahl,
   oberhalb der einzelnen Karten. */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--g-border-soft);
}

.reviews-summary-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.reviews-summary-label {
  margin: 0;
  color: var(--g-text);
  font-size: 14px;
  font-weight: 700;
}

.reviews-summary-score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 0;
}

.reviews-summary-number {
  color: var(--g-text);
  font-size: 20px;
  font-weight: 700;
}

.reviews-summary-count {
  color: var(--g-text-muted);
  font-size: 14px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}

/* P6: kein sichtbarer Kartenrahmen mehr, nur ein sehr flacher Schatten und
   mehr Innenabstand - ruhiger, weniger "Widget-Kachel". */
.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 30px 28px;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  background: var(--g-card);
  box-shadow: var(--g-shadow);
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Neutrale Initialen-Fläche - rein dekorativ, ohne Google-Markenfarben
   nachzuahmen. Kein Fake-Avatarbild. */
.review-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--linen);
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
}

.review-card-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-name {
  color: var(--g-text);
  font-size: 13.5px;
  font-weight: 700;
}

.review-time {
  color: var(--g-text-muted);
  font-size: 12px;
}

.review-card-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.review-card .reviews-stars {
  font-size: 15px;
}

/* P6: Zitat in der Editorial-Serif statt Sans-Serif - stärker "Magazin-
   Zitat" als "Widget-Text". */
.review-card blockquote {
  margin: 0;
  color: var(--g-text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

.review-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--g-border-soft);
  font-size: 12px;
}

.review-card-source {
  color: var(--g-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.review-card-foot a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .reviews-summary {
    align-items: flex-start;
    gap: 12px;
  }
}

/* Serifen-Generationennummer als große, ruhige Chronik-Ziffer statt reinem
   Fließtext - "Familienarchiv"-Charakter für die 100-Jahre-Seite. Reine
   CSS-Zähler, keine neuen Bilder/Markup nötig. */
.timeline {
  counter-reset: generation;
}

.timeline li {
  counter-increment: generation;
}

.timeline li::after {
  content: counter(generation);
  position: absolute;
  right: 0;
  top: -14px;
  color: var(--sand);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 600;
  line-height: 1;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 620px) {
  .timeline li::after {
    display: none;
  }
}