/* =========================================================================
   JUNU BAU – styles.css
   Helles Farbkonzept: Creme, Dunkelgrün, Gold, Anthrazit
   Aufbau:
     01 Farb- und Basisvariablen
     02 Reset und Grundtypografie
     03 Hilfsklassen und Layout-Container
     04 Buttons
     05 Navigation
     06 Hero
     07 Abschnittsköpfe
     08 Über uns
     09 Leistungen
     10 Warum JUNU BAU
     11 Ablauf
     12 Galerie und Lightbox
     13 Positionenkatalog
     14 Kontakt
     15 Footer
     16 Rechtsseiten (Impressum / Datenschutz)
     17 Animationen
     18 Responsive Anpassungen
     19 Barrierefreiheit / prefers-reduced-motion / Druck
   ========================================================================= */


/* =========================================================================
   01 – FARB- UND BASISVARIABLEN
   Alle Farben zentral hier ändern.
   ========================================================================= */
:root {
  /* Markenfarben */
  --cream:        #F6F1E7;
  --cream-light:  #FBF8F2;
  --green:        #173D2D;
  --green-dark:   #102C21;
  --gold:         #B8944F;
  --gold-light:   #D1B477;
  --anthracite:   #2D312F;
  --white:        #FFFFFF;
  --border:       rgba(23, 61, 45, 0.16);
  --border-soft:  rgba(23, 61, 45, 0.08);

  /* Schrift */
  --font-base: Inter, "Helvetica Neue", Arial, Helvetica, system-ui, sans-serif;

  /* Abstände */
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --container:     1200px;
  --container-narrow: 800px;
  --text-measure:  740px;

  /* Radien und Schatten (bewusst zurückhaltend) */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-soft:  0 2px 10px rgba(23, 61, 45, 0.05);
  --shadow-card:  0 4px 18px rgba(23, 61, 45, 0.07);
  --shadow-lift:  0 10px 28px rgba(23, 61, 45, 0.10);

  /* Übergänge */
  --t-fast: 160ms ease;
  --t-base: 260ms ease;
}


/* =========================================================================
   02 – RESET UND GRUNDTYPOGRAFIE
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Freiraum, damit Anker nicht unter der fixierten Navigation landen */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--anthracite);
  font-family: var(--font-base);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;            /* verhindert horizontale Überläufe */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--green);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.55rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.3rem); line-height: 1.35; }
h4 { font-size: 1.05rem; }

p {
  margin: 0 0 1.15em;
  max-width: var(--text-measure);
}

a {
  color: var(--green);
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--gold); }

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

ul { margin: 0; padding: 0; }

strong { color: var(--green); font-weight: 650; }

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* =========================================================================
   03 – HILFSKLASSEN UND LAYOUT
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--space-section);
}

.section--light  { background-color: var(--cream-light); }
.section--white  { background-color: var(--white); }
.section--cream  { background-color: var(--cream); }

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink zum Hauptinhalt */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  background: var(--green);
  color: var(--cream-light);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: 1rem;
  color: var(--cream-light);
}

/* Feine goldene Trennlinie */
.rule-gold {
  width: 64px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.6rem;
}


/* =========================================================================
   04 – BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.9rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-fast),
              box-shadow var(--t-base);
}

/* Hauptbutton – Gold */
.btn--gold {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background-color: #A9863F;
  border-color: #A9863F;
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* Zweitbutton – umrandet, dunkelgrün */
.btn--outline {
  background-color: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--green);
  color: var(--cream-light);
  transform: translateY(-1px);
}

/* Umrandet auf dunklem Grund */
.btn--outline-light {
  background-color: transparent;
  border-color: rgba(246, 241, 231, 0.55);
  color: var(--cream-light);
}
.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  background-color: var(--cream-light);
  border-color: var(--cream-light);
  color: var(--green);
}

/* Kompakter Button in der Navigation */
.btn--nav {
  min-height: 46px;
  padding: 0.6rem 1.35rem;
  font-size: 0.95rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}


/* =========================================================================
   05 – NAVIGATION
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background-color: rgba(246, 241, 231, 0.0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base), border-color var(--t-base),
              box-shadow var(--t-base), padding var(--t-base);
}

/* Zustand nach dem Scrollen: cremeweiß und kompakter */
.site-header.is-scrolled {
  background-color: rgba(251, 248, 242, 0.97);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  transition: padding-block var(--t-base);
}
.site-header.is-scrolled .nav { padding-block: 0.7rem; }

/* Logo */
.nav__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 1;
}
.nav__logo img {
  width: 168px;
  height: auto;
  transition: width var(--t-base);
}
.site-header.is-scrolled .nav__logo img { width: 148px; }

/* Menü */
.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--green);
  font-size: 0.97rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background-color: var(--gold);
  transition: width var(--t-base);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--gold); }

/* Hamburger-Schalter (nur mobil sichtbar) */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav__toggle-bars {
  position: relative;
  display: block;
  width: 22px; height: 2px;
  background-color: var(--green);
  transition: background-color var(--t-fast);
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background-color: var(--green);
  transition: transform var(--t-base), top var(--t-base);
}
/* Abdunkelung hinter dem Menü – nur im Mobilmenü aktiv */
.nav-backdrop { display: none; }

/* Reduzierte Navigation auf den Rechtsseiten:
   immer sichtbar, kein Mobilmenü, kein Hamburger */
.nav__menu--simple {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  visibility: visible !important;
  overflow: visible !important;
  flex-direction: row !important;
  gap: clamp(0.9rem, 3vw, 1.75rem) !important;
}
.nav__menu--simple li { border: 0 !important; }
.nav__menu--simple .nav__link { padding: 0.35rem 0 !important; font-size: 0.97rem !important; }

.nav__toggle-bars::before { top: -7px; }
.nav__toggle-bars::after  { top:  7px; }

/* Geöffneter Zustand: X */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background-color: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }


/* =========================================================================
   06 – HERO
   ========================================================================= */
.hero {
  position: relative;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: var(--space-section);
  background-color: var(--cream);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__label,
.section__label {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__title { margin-bottom: 1.1rem; }
.hero__title span { display: block; }

.hero__subtitle {
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--anthracite);
}

.hero__claim {
  max-width: 40ch;
  color: var(--green);
  font-weight: 600;
}

/* Vertrauenszeile */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: 0.94rem;
  color: var(--green);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__trust li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background-color: var(--gold);
}

/* Bildseite */
.hero__media {
  position: relative;
  z-index: 0;              /* eigener Stapelkontext für die Dekorlinie */
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3.35;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--cream-light);
}
/* dekorative goldene Linie hinter dem Bild */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: -1;
}


/* =========================================================================
   07 – ABSCHNITTSKÖPFE
   ========================================================================= */
.section__head {
  max-width: var(--text-measure);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.section__intro {
  font-size: 1.08rem;
}


/* =========================================================================
   08 – ÜBER UNS
   ========================================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background-color: var(--cream-light);
}

/* hervorgehobener Schlusssatz */
.about__highlight {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background-color: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
  color: var(--green);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.55;
  max-width: none;
}


/* =========================================================================
   09 – LEISTUNGEN
   ========================================================================= */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.35rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.9rem 1.7rem;
  background-color: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base);
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.service-card__num {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.service-card__num::after {
  content: "";
  display: block;
  width: 26px; height: 1.5px;
  margin-top: 0.75rem;
  background-color: var(--gold);
}

.service-card h3 { margin-bottom: 0.55rem; }

.service-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
}


/* =========================================================================
   10 – WARUM JUNU BAU
   ========================================================================= */
.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 2.5rem;
  list-style: none;
}

.why__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border-soft);
}

/* Häkchen als reines CSS-Element */
.why__check {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 2px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: relative;
}
.why__check::after {
  content: "";
  position: absolute;
  left: 8px; top: 4px;
  width: 6px; height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(42deg);
}

.why__text {
  color: var(--green);
  font-weight: 550;
  font-size: 1.03rem;
  line-height: 1.5;
}


/* =========================================================================
   11 – ABLAUF
   ========================================================================= */
.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  list-style: none;
}

/* durchgehende Prozesslinie auf großen Bildschirmen */
.process::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 6%;
  right: 6%;
  height: 1.5px;
  background-color: var(--gold);
  opacity: 0.45;
}

.process__step {
  position: relative;
  padding-top: 0;
}

.process__num {
  position: relative;
  display: inline-block;
  margin-bottom: 1.1rem;
  padding-right: 0.7rem;
  background-color: var(--cream-light); /* verdeckt die Linie sauber */
  color: var(--gold);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.process__step h3 { margin-bottom: 0.4rem; }

.process__step p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
}


/* =========================================================================
   12 – GALERIE UND LIGHTBOX
   ========================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background-color: var(--cream-light);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-base);
}
.gallery__item:hover img { transform: scale(1.015); }

.gallery__note {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--anthracite);
  opacity: 0.85;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background-color: rgba(16, 44, 33, 0.92);
}
.lightbox.is-open { display: flex; }

.lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 86vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  background-color: var(--cream-light);
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.75rem);
  right: clamp(0.75rem, 3vw, 1.75rem);
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(246, 241, 231, 0.5);
  border-radius: 50%;
  color: var(--cream-light);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lightbox__close:hover {
  background-color: var(--cream-light);
  color: var(--green);
}


/* =========================================================================
   13 – POSITIONENKATALOG
   ========================================================================= */
.catalog {
  background-color: var(--green);
  color: rgba(246, 241, 231, 0.9);
}
.catalog h2,
.catalog h3 { color: var(--cream-light); }
.catalog .section__label { color: var(--gold-light); }

.catalog__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.catalog__media img {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  /* feiner Goldrand, damit sich das dunkle Cover vom grünen Grund absetzt */
  border: 1px solid rgba(184, 148, 79, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  background-color: var(--cream-light);
}

.catalog__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.75rem;
  margin: 1.75rem 0 0;
  list-style: none;
}
.catalog__benefits li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.99rem;
  line-height: 1.55;
}
.catalog__benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 1.5px;
  background-color: var(--gold-light);
}


/* =========================================================================
   14 – KONTAKT
   ========================================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.contact__card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background-color: var(--white);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.contact__list {
  list-style: none;
  margin: 0 0 1.75rem;
}
.contact__list li { margin-bottom: 1.25rem; }
.contact__list li:last-child { margin-bottom: 0; }

.contact__label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact__value {
  display: block;
  color: var(--green);
  font-size: 1.08rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  text-decoration: none;
}
a.contact__value:hover { color: var(--gold); }

.contact__area {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.7rem 1.1rem;
  background-color: var(--cream);
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  color: var(--green);
  font-weight: 550;
}
.contact__area::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--gold);
}


/* =========================================================================
   15 – FOOTER
   ========================================================================= */
.site-footer {
  background-color: var(--green-dark);
  color: rgba(246, 241, 231, 0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.97rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246, 241, 231, 0.14);
}

.footer__logo img {
  width: 180px;
  margin-bottom: 1rem;
  /* Logo auf dunklem Grund aufhellen */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.footer__claim {
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

.footer h2 {
  color: var(--cream-light);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer__list {
  list-style: none;
  line-height: 1.9;
}
.footer__list a,
.footer address a {
  color: rgba(246, 241, 231, 0.85);
  text-decoration: none;
}
.footer__list a:hover,
.footer address a:hover {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer address {
  font-style: normal;
  line-height: 1.85;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: 0.88rem;
  color: rgba(246, 241, 231, 0.6);
}


/* =========================================================================
   16 – RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================================= */
.legal {
  padding-top: clamp(7.5rem, 12vw, 9.5rem);
  padding-bottom: var(--space-section);
}
.legal__inner {
  max-width: var(--container-narrow);
}
.legal h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.legal h3 {
  margin-top: 1.75rem;
}
.legal ul {
  margin: 0 0 1.25rem 1.25rem;
  padding-left: 0.5rem;
  list-style: disc;
}
.legal li { margin-bottom: 0.4rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.25rem;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}
.back-link::before { content: "\2190"; color: var(--gold); }
.back-link:hover { color: var(--gold); }

/* Deutlich markierter Hinweiskasten (Datenschutz) */
.notice {
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
}
.notice h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.notice p:last-child { margin-bottom: 0; }


/* =========================================================================
   17 – ANIMATIONEN (dezent)
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms ease, transform 620ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* =========================================================================
   18 – RESPONSIVE ANPASSUNGEN
   ========================================================================= */

/* --- bis 1100 px: Leistungen dreispaltig --- */
@media (max-width: 1100px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- bis 980 px: Navigation als Mobilmenü, Layouts einspaltig --- */
@media (max-width: 980px) {
  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: fixed;
    top: 0; right: 0;
    z-index: 1200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: min(360px, 88vw);
    height: 100dvh;
    padding: 6rem 1.5rem 2.5rem;
    background-color: var(--cream-light);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base), visibility var(--t-base);
  }
  .nav__menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__menu li { border-bottom: 1px solid var(--border-soft); }
  .nav__menu li:last-child { border-bottom: 0; }

  .nav__link {
    display: block;
    padding: 1.05rem 0.25rem;   /* große anklickbare Fläche */
    font-size: 1.08rem;
  }
  .nav__link::after { display: none; }

  .nav__cta { margin-top: 1.5rem; }
  .btn--nav { width: 100%; min-height: 54px; font-size: 1rem; }

  /* Der Schalter muss über dem geöffneten Menü liegen */
  .nav__toggle { position: relative; z-index: 1300; }

  /* Abdunkelung hinter dem Menü */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background-color: rgba(16, 44, 33, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  /* Layouts einspaltig */
  .hero__grid,
  .about__grid,
  .catalog__grid,
  .contact__grid { grid-template-columns: 1fr; }

  .hero__media { order: -1; }
  .hero__media::before { display: none; }
  .hero__media img { aspect-ratio: 16 / 10; }

  .about__media img { aspect-ratio: 16 / 10; max-height: 420px; }

  .catalog__media img { max-width: 300px; }

  .process { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .process::before { display: none; }

  .gallery { grid-template-columns: repeat(2, 1fr); }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- bis 760 px: alles einspaltig, Buttons volle Breite --- */
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }

  .services__grid { grid-template-columns: 1fr; }
  .why__grid      { grid-template-columns: 1fr; gap: 0; }
  .process        { grid-template-columns: 1fr; gap: 1.75rem; }
  .gallery        { grid-template-columns: 1fr; }
  .catalog__benefits { grid-template-columns: 1fr; }
  .footer__grid   { grid-template-columns: 1fr; gap: 2rem; }

  /* Buttons über die volle verfügbare Breite */
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }

  .hero { padding-top: 7rem; }
  .hero__media img { aspect-ratio: 4 / 3; }
  .about__media img { aspect-ratio: 4 / 3; }

  .about__highlight { padding: 1.25rem 1.35rem; font-size: 1.06rem; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- sehr schmale Geräte (ab 320 px) --- */
@media (max-width: 380px) {
  body { font-size: 1rem; }
  .container { padding-inline: 1.05rem; }
  .nav__logo img { width: 138px; }
  .site-header.is-scrolled .nav__logo img { width: 128px; }
  .service-card { padding: 1.5rem 1.3rem; }
  .contact__card { padding: 1.4rem; }
}

/* --- sehr große Bildschirme --- */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}


/* =========================================================================
   19 – BARRIEREFREIHEIT: REDUZIERTE ANIMATIONEN UND DRUCK
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover,
  .service-card:hover,
  .gallery__item:hover,
  .gallery__item:hover img { transform: none; }
}

@media print {
  .site-header,
  .nav-backdrop,
  .lightbox,
  .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}