/* ==========================================================================
   Avora Living – Bausteine
   Kopfzeile, Hero, Sektionen der Startseite, Unterseiten, Formular,
   Galerie, Lightbox und Consent-Banner. Farben und Grundlagen: base.css.

   Kontextfarben: Bausteine nutzen --leise, --akzent-schrift, --fokus und
   --rahmen statt fester Farben. Dunkle Flaechen setzen diese Variablen in
   base.css (oder lokal, z. B. .kontaktkarte) - dann passt alles von selbst.

   Einblenden: [data-reveal-group] setzt transition auf die direkten Kinder.
   Hover-Uebergaenge gehoeren deshalb auf innere Elemente oder Pseudo-
   Elemente, nie direkt auf die li einer Gruppe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
[data-kopf-sentinel] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}

.kopfzeile {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: var(--hell);
  transition:
    background-color .45s var(--ease-out),
    box-shadow .45s var(--ease-out);
}

.kopfzeile.is-stuck {
  background: rgba(18, 14, 13, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linie-dunkel);
}

.kopfzeile__innen {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
  transition: height .45s var(--ease-out);
}

.kopfzeile.is-stuck .kopfzeile__innen {
  height: 72px;
}

/* Logo: AVORA / LIVING gestapelt, darunter INTERIOR DESIGN (Mockup) */
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: .3rem;
  text-decoration: none;
}

.logo__marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: .14em;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: .95;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-hell);
}

.logo__zusatz {
  padding-left: .32em;
  font: 400 .57rem/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hell-weich);
}

/* Hauptnavigation: schiebt sich per margin-left: auto nach rechts */
.hauptnav {
  margin-left: auto;
}

.hauptnav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.4rem);
}

.hauptnav a {
  position: relative;
  display: block;
  padding-block: .6rem;
  font: 500 .76rem/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--hell);
}

/* Goldene Linie unter dem Link - faehrt bei Hover und auf der aktiven Seite auf */
.hauptnav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: .16em;
  bottom: .2rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}

.hauptnav a:hover::after,
.hauptnav a[aria-current='page']::after {
  transform: scaleX(1);
}

.kopfzeile__cta {
  flex-shrink: 0;
}

/* Burger: erst unter 1100 px sichtbar, 44 px Trefferflaeche fuer Touch */
.burger {
  display: none;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--hell);
}

.burger .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.2;
}

@media (max-width: 1099px) {
  .kopfzeile__innen {
    gap: 1.25rem;
  }

  .js .hauptnav {
    display: none;
  }

  .js .burger {
    display: grid;
  }

  .kopfzeile__cta {
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .kopfzeile__cta {
    display: none;
  }

  .burger {
    margin-left: auto;
  }
}

/* Ohne JavaScript: Navigation bricht unter das Logo um, kein Burger */
html:not(.js) .kopfzeile {
  position: absolute;
}

@media (max-width: 1099px) {
  html:not(.js) .kopfzeile__innen {
    flex-wrap: wrap;
    height: auto;
    padding-block: 1rem;
  }

  html:not(.js) .hauptnav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Mobile Navigation (liegt ausserhalb von main/footer, damit inert greift)
   -------------------------------------------------------------------------- */
.mobilnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + 2rem) 0 2.5rem;
  background: var(--braun-950);
  color: var(--hell);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity .45s var(--ease-out),
    visibility 0s linear .45s;
}

.mobilnav.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity .45s var(--ease-out),
    visibility 0s linear 0s;
}

.mobilnav__innen {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

/* Menuepunkte starten versetzt; --i staffelt die Verzoegerung beim Oeffnen */
.mobilnav__liste li {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .3s var(--ease-out),
    transform .3s var(--ease-out);
}

.mobilnav.is-open .mobilnav__liste li {
  opacity: 1;
  transform: none;
  transition-duration: .5s, .6s;
  transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}

.mobilnav__liste li:nth-child(2) {
  --i: 1;
}

.mobilnav__liste li:nth-child(3) {
  --i: 2;
}

.mobilnav__liste li:nth-child(4) {
  --i: 3;
}

.mobilnav__liste li:nth-child(5) {
  --i: 4;
}

.mobilnav__liste a {
  display: block;
  padding-block: .55rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 1px solid var(--linie-dunkel);
  transition: color .3s var(--ease-out);
}

.mobilnav__liste a:hover,
.mobilnav__liste a[aria-current='page'] {
  color: var(--gold-hell);
}

/* Fuss des Menues (Mail, Social) kommt zuletzt, nach den Punkten */
.mobilnav__fuss {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}

.mobilnav.is-open .mobilnav__fuss {
  opacity: 1;
  transition: opacity .6s var(--ease-out) .4s;
}

.mobilnav__mail {
  font-size: .95rem;
  color: var(--hell-weich);
  text-decoration: none;
}

.mobilnav__mail:hover {
  color: var(--gold-hell);
}

@media (min-width: 1100px) {
  .mobilnav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Hero (Startseite)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 92vh;
  min-height: 92svh;
  padding-block: calc(var(--header-h) + 3rem) 5rem;
  overflow: hidden;
  background: var(--braun-950);
  color: var(--hell);
}

.hero__bild,
.hero__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bild {
  z-index: -2;
}

.hero__bild img {
  object-fit: cover;
  object-position: 62% 50%;
  animation: kenburns 16s var(--ease-out) both;
}

/* Verlauf: links dunkel fuer die Schrift, oben fuer die Kopfzeile */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 14, 13, .88) 0%, rgba(18, 14, 13, .62) 32%, rgba(18, 14, 13, .18) 62%, rgba(18, 14, 13, 0) 80%),
    linear-gradient(180deg, rgba(18, 14, 13, .55) 0%, rgba(18, 14, 13, 0) 22%, rgba(18, 14, 13, 0) 70%, rgba(18, 14, 13, .45) 100%);
}

/* Hero-Text: jede Zeile taucht 0,15 s nach der vorherigen auf */
.hero__titel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__marke {
  font-size: clamp(2.1rem, 1.3rem + 3.45vw, 5.6rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: auftauchen 1.2s var(--ease-out) both;
}

.hero__zusatz {
  margin-top: 1rem;
  padding-left: .1em;
  font: 400 clamp(.95rem, .6rem + 1.1vw, 1.6rem)/1.2 var(--sans);
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold-hell);
  animation: auftauchen 1.2s var(--ease-out) .15s both;
}

.hero__claim {
  position: relative;
  max-width: 12em;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.6rem, 1rem + 1.7vw, 2.4rem);
  font-style: italic;
  line-height: 1.2;
  color: var(--hell);
  animation: auftauchen 1.2s var(--ease-out) .3s both;
}

/* Feine Goldlinie ueber dem Claim, die sich von links aufzieht */
.hero__claim::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(64px, 8vw, 120px);
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  animation: linie 1.4s var(--ease-out) .5s both;
}

.hero__text {
  max-width: 27em;
  margin-top: 1.25rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--hell-weich);
  animation: auftauchen 1.2s var(--ease-out) .45s both;
}

.hero__aktion {
  margin-top: 2.25rem;
  animation: auftauchen 1.2s var(--ease-out) .6s both;
}

/* Scrollhinweis unten mittig - auf kleinen und flachen Bildschirmen ausgeblendet */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding-left: .3em;
  font: 500 .65rem/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hell-weich);
  transform: translateX(-50%);
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: scrollhinweis 2.4s var(--ease-out) infinite;
}

.hero__scroll:hover {
  color: var(--gold-hell);
}

/* Bewegungen des Heros: langsamer Bildzoom, Auftauchen, Linie, Scrollimpuls */
@keyframes kenburns {
  from {
    transform: scale(1.08);
  }

  to {
    transform: none;
  }
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes linie {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes scrollhinweis {
  0% {
    opacity: 1;
    transform: scaleY(0);
  }

  60% {
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@media (max-width: 700px), (max-height: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* Smartphone: Bild oben, Schrift unten auf dunklem Verlauf */
@media (max-width: 700px) {
  .hero {
    align-items: flex-end;
    padding-bottom: 3.5rem;
  }

  .hero::before {
    background: linear-gradient(180deg, rgba(18, 14, 13, .6) 0%, rgba(18, 14, 13, .1) 25%, rgba(18, 14, 13, .35) 45%, rgba(18, 14, 13, .9) 72%, var(--braun-950) 100%);
  }

  .hero__bild img {
    object-position: 50% 30%;
  }
}

/* --------------------------------------------------------------------------
   Bereiche: Einzelraum, Wohnung, Haus (Startseite)
   Runde Oliv-Plakette sitzt mittig auf der Bildunterkante (Mockup).
   -------------------------------------------------------------------------- */
.bereiche {
  --plakette: 80px;
  --plakette-x: 2.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

.bereich {
  position: relative;
}

.bereich__medien {
  position: relative;
}

.bereich__bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--taupe);
}

.bereich__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.bereich:hover .bereich__bild img {
  transform: scale(1.05);
}

.bereich__badge {
  position: absolute;
  left: var(--plakette-x);
  bottom: calc(var(--plakette) / -2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--plakette);
  height: var(--plakette);
  border: 2px solid var(--creme);
  border-radius: 50%;
  background: var(--oliv);
  color: var(--hell);
  box-shadow: 0 10px 24px -12px rgba(18, 14, 13, .5);
  pointer-events: none;
}

.bereich__badge .icon {
  width: 45%;
  height: 45%;
  stroke-width: 1.1;
}

.bereich__koerper {
  padding: 1.5rem 0 0 calc(var(--plakette-x) + var(--plakette) + 1.25rem);
}

.bereich__titel {
  font: 500 .85rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bereich__link {
  text-decoration: none;
  transition: color .3s var(--ease-out);
}

/* Ganze Karte klickbar, Fokusring um die ganze Karte */
.bereich__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bereich:hover .bereich__link {
  color: var(--bronze);
}

.bereich__link:focus-visible {
  outline: none;
}

.bereich__link:focus-visible::after {
  outline: 2px solid var(--fokus);
  outline-offset: 6px;
}

.bereich__text {
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--leise);
}

@media (max-width: 999px) {
  .bereiche {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 420px) {
  .bereiche {
    --plakette: 66px;
    --plakette-x: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Zusammenarbeit in sechs Schritten (Startseite, dunkel)
   -------------------------------------------------------------------------- */
.schritte {
  --gap: 1.5rem;
  --kreis: 72px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3rem var(--gap);
  text-align: center;
}

/* Verbindungslinie von Kreismitte zu Kreismitte */
.schritte::before {
  content: '';
  position: absolute;
  top: calc(var(--kreis) / 2);
  left: calc((100% - 5 * var(--gap)) / 12);
  right: calc((100% - 5 * var(--gap)) / 12);
  height: 1px;
  background: var(--gold-linie);
  transform-origin: left;
  transition: transform 1.6s var(--ease-out) .2s;
}

.js .schritte:not(.is-visible)::before {
  transform: scaleX(0);
}

.schritt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.schritt__kreis {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--kreis);
  height: var(--kreis);
  margin-bottom: 2.25rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--braun-900);
  color: var(--gold-hell);
}

.schritt__kreis .icon {
  width: 42%;
  height: 42%;
  stroke-width: 1.1;
}

/* Kurzer Strich unter jedem Kreis */
.schritt__kreis::after {
  content: '';
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  width: 1px;
  height: 1.1rem;
  background: var(--gold-linie);
}

.schritt__nummer {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
}

.schritt__titel {
  margin-top: .6rem;
  font: 500 .78rem/1.35 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.schritt__text {
  max-width: 16rem;
  margin-top: .75rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--leise);
}

@media (max-width: 1179px) {
  .schritte {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 3.5rem;
  }

  .schritte::before {
    display: none;
  }
}

/* Smartphone: senkrechte Zeitleiste, Kreis links */
@media (max-width: 699px) {
  .schritte {
    --kreis: 60px;
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    text-align: left;
  }

  .schritt {
    display: grid;
    grid-template-columns: var(--kreis) 1fr;
    column-gap: 1.25rem;
    align-items: start;
  }

  .schritt__kreis {
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }

  .schritt__kreis::after {
    display: none;
  }

  .schritt__nummer {
    margin-top: .35rem;
  }

  .schritt__text {
    max-width: none;
  }

  .schritt:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--kreis) + .5rem);
    bottom: calc(-2.25rem + .5rem);
    left: calc(var(--kreis) / 2);
    width: 1px;
    background: var(--gold-linie);
  }
}

/* --------------------------------------------------------------------------
   Bild + Text nebeneinander, versetzter Goldrahmen
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.split--umgekehrt {
  grid-template-columns: 1fr 1.15fr;
}

.split--umgekehrt .split__bild {
  order: 2;
}

.split__bild img {
  width: 100%;
}

/* Versetzter Goldrahmen: Pseudoelement hinter dem Bild, isolation haelt z-index: -1 im Element */
.rahmen {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.rahmen::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  z-index: -1;
  border: 1px solid var(--rahmen);
  pointer-events: none;
}

/* Kleines Label auf dem Bild, z. B. "3D-Visualisierung" */
.split__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .65rem 1.1rem;
  background: var(--braun-900);
  color: var(--hell);
  font: 500 .68rem/1.2 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.split__text > .btn,
.split__text > .btn-reihe {
  margin-top: 2.25rem;
}

/* Haken-Liste im Textteil: Icon oliv, auf dunklem Grund gold */
.checkliste {
  display: grid;
  gap: .8rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.checkliste li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.checkliste .icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .3rem;
  stroke-width: 1.6;
  color: var(--oliv);
}

.sektion--dunkel .checkliste .icon,
.seitenkopf .checkliste .icon {
  color: var(--gold);
}

@media (max-width: 860px) {
  .split,
  .split--umgekehrt {
    grid-template-columns: 1fr;
  }

  .split--umgekehrt .split__bild {
    order: 0;
  }

  .rahmen::before {
    inset: .75rem -.75rem -.75rem .75rem;
  }
}

/* --------------------------------------------------------------------------
   Projekte & Inspiration: vier hohe Kacheln (Startseite)
   -------------------------------------------------------------------------- */
.raeume {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}

.raum__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--braun-800);
  color: var(--hell);
  text-decoration: none;
}

.raum__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.raum__link:hover img {
  transform: scale(1.05);
}

.raum__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 14, 13, 0) 45%, rgba(18, 14, 13, .72) 100%);
}

.raum__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding-left: .14em;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.raum__label::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .5s var(--ease-out);
}

.raum__link:hover .raum__label::after,
.raum__link:focus-visible .raum__label::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .raeume {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphone: waagerechtes Karussell mit Einrasten */
@media (max-width: 600px) {
  .raeume {
    display: flex;
    gap: .75rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .raeume::-webkit-scrollbar {
    display: none;
  }

  .raeume > li {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   Abschluss-CTA (dunkel, Bild laeuft nach rechts ins Dunkel aus)
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 9rem);
  background: var(--braun-950);
  color: var(--hell);
}

.cta__bild {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 48%;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
  mask-image: linear-gradient(90deg, #000 40%, transparent);
}

.cta__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}

.cta__inhalt {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
}

.cta__text {
  grid-column: 2;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.cta .titel {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
}

.cta__text .trenner {
  margin: 1.5rem auto;
}

.cta__text p {
  font-size: 1.1rem;
  color: var(--leise);
}

.cta__text .btn {
  margin-top: 2.25rem;
}

@media (max-width: 800px) {
  .cta {
    padding-top: 0;
  }

  .cta__bild {
    position: relative;
    width: 100%;
    height: 240px;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent);
    mask-image: linear-gradient(180deg, #000 45%, transparent);
  }

  .cta__inhalt {
    grid-template-columns: 1fr;
    margin-top: -2rem;
  }

  .cta__text {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */
.fusszeile {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  border-top: 1px solid var(--gold-linie);
  background: var(--braun-950);
  color: var(--hell);
  font-size: .95rem;
}

/* Vier Spalten -> zwei (960 px) -> eine (560 px) */
.fusszeile__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 3rem clamp(2rem, 4vw, 4rem);
}

.fusszeile__marke .logo {
  width: fit-content;
}

.fusszeile__marke p {
  max-width: 17rem;
  margin-top: 1.5rem;
  color: var(--leise);
}

.fusszeile__titel {
  margin-bottom: 1.25rem;
  font: 500 .72rem/1.3 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.fusszeile__spalte ul {
  display: grid;
  gap: .6rem;
}

.fusszeile a,
.fusszeile__recht button {
  color: var(--leise);
  text-decoration: none;
  transition: color .3s var(--ease-out);
}

.fusszeile a:hover,
.fusszeile__recht button:hover {
  color: var(--gold-hell);
}

.fusszeile__kontakt li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--leise);
}

.fusszeile__kontakt .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .3rem;
  color: var(--gold);
}

.fusszeile__spalte .fusszeile__sozial {
  display: flex;
  gap: .75rem;
}

/* Social-Icons als runde 44-px-Flaechen (Touch-Groesse) */
.fusszeile__sozial a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gold-linie);
  border-radius: 50%;
  color: var(--gold-hell);
  transition:
    border-color .3s var(--ease-out),
    background-color .3s var(--ease-out);
}

.fusszeile__sozial a:hover {
  border-color: var(--gold);
  background: rgba(179, 157, 120, .1);
}

.fusszeile__sozial .icon {
  width: 20px;
  height: 20px;
}

/* Untere Zeile: Copyright links, Rechtslinks rechts */
.fusszeile__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: .8rem;
  color: var(--leise);
}

.fusszeile__recht {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
}

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

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

/* --------------------------------------------------------------------------
   Seitenkopf der Unterseiten
   -------------------------------------------------------------------------- */
.seitenkopf {
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(4rem, 8vw, 6.5rem);
  background: var(--braun-900);
  color: var(--hell);
}

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

.seitenkopf__text {
  animation: auftauchen 1.1s var(--ease-out) both;
}

.seitenkopf__titel {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem);
  line-height: 1.05;
}

.seitenkopf__lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--leise);
}

.seitenkopf .btn-reihe {
  margin-top: 2.25rem;
}

.seitenkopf__bild {
  animation: auftauchen 1.2s var(--ease-out) .15s both;
}

.seitenkopf__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

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

/* Ohne Bild, eine Spalte (Impressum, Datenschutz) */
.seitenkopf--schlicht .seitenkopf__raster {
  grid-template-columns: minmax(0, 52rem);
}

/* Bildschirmfuellend und zentriert (Danke, 404) */
.seitenkopf--voll {
  display: flex;
  align-items: center;
  min-height: 80vh;
  min-height: 80svh;
}

.seitenkopf--voll .seitenkopf__raster {
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
  text-align: center;
}

.seitenkopf--voll .seitenkopf__lead {
  margin-inline: auto;
}

.seitenkopf--voll .trenner {
  margin: 1.75rem auto 0;
}

.seitenkopf--voll .btn-reihe {
  justify-content: center;
}

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  font: 500 .7rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--leise);
}

.brotkrumen li + li::before {
  content: '/';
  content: '/' / '';
  margin-right: .75rem;
  color: var(--gold);
}

.brotkrumen a {
  text-decoration: none;
  transition: color .3s var(--ease-out);
}

.brotkrumen a:hover,
.brotkrumen [aria-current] {
  color: var(--gold-hell);
}

.linkliste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 2rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.linkliste a {
  padding-bottom: .3rem;
  font: 500 .78rem/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hell);
  border-bottom: 1px solid var(--gold-linie);
  transition:
    color .3s var(--ease-out),
    border-color .3s var(--ease-out);
}

.linkliste a:hover {
  color: var(--gold-hell);
  border-color: var(--gold);
}

/* --------------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.rechtstext {
  max-width: 46rem;
}

.rechtstext h2 {
  margin-top: 3rem;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext h3 {
  margin-top: 1.75rem;
  font: 500 1rem/1.4 var(--sans);
}

.rechtstext p,
.rechtstext ul,
.rechtstext address {
  margin-top: .9rem;
  color: var(--leise);
}

.rechtstext ul {
  padding-left: 1.2rem;
}

.rechtstext li + li {
  margin-top: .35rem;
}

.rechtstext a {
  color: var(--bronze);
  text-underline-offset: .2em;
}

.rechtstext address {
  font-style: normal;
}

.rechtstext strong {
  color: var(--text);
}

.rechtstext .stand {
  margin-top: 3rem;
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Kleine Layout-Helfer
   -------------------------------------------------------------------------- */
.kopf--links {
  margin-inline: 0;
  text-align: left;
}

.kopf--links .trenner {
  margin-left: 0;
}

.einleitung {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.sektion--ohne-oben {
  padding-top: 0;
}

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

/* Linke Spalte bleibt beim Scrollen stehen (Ablauf, FAQ) */
@media (min-width: 861px) {
  .klebend {
    position: sticky;
    top: calc(72px + 2.5rem);
  }
}

/* --------------------------------------------------------------------------
   Leistungen (Unterseite)
   -------------------------------------------------------------------------- */
.leistungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 5rem);
}

.leistung {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 0 1.5rem;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--linie-hell);
}

.leistung__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--oliv);
  color: var(--gold-hell);
}

.leistung__icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.2;
}

.leistung__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: .6rem;
}

.leistung__nummer {
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .24em;
  color: var(--akzent-schrift);
}

.markierung {
  display: inline-block;
  padding: .3rem .65rem;
  border: 1px solid var(--oliv);
  font: 500 .62rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oliv);
}

.leistung__titel {
  font-size: clamp(1.55rem, 1.3rem + .8vw, 1.95rem);
}

.leistung__text {
  margin-top: .75rem;
  color: var(--leise);
}

.leistung__punkte {
  display: grid;
  gap: .45rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.leistung__punkte li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}

/* Goldener Strich statt Aufzaehlungspunkt - rein dekorativ */
.leistung__punkte li::before {
  content: '';
  flex: 0 0 14px;
  height: 1px;
  background: var(--gold);
  transform: translateY(-.3em);
}

@media (max-width: 800px) {
  .leistungen {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .leistung {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Pakete (Einzelraum, Wohnung, Haus) - helle Karten auf Taupe
   -------------------------------------------------------------------------- */
.pakete {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.paket {
  /* Karte ist Creme: Akzentschrift wieder in Bronze */
  --akzent-schrift: var(--bronze);
  display: flex;
  flex-direction: column;
  background: var(--creme);
  box-shadow:
    0 1px 0 rgba(35, 28, 23, .06),
    0 24px 48px -32px rgba(35, 28, 23, .35);
}

/* Sprung von der Startseite (#wohnung etc.): Karte dezent markieren */
.paket:target {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

/* Paketbild im 3:2-Ausschnitt, faehrt beim Hover leicht heran */
.paket__bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--taupe-2);
}

.paket__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.paket:hover .paket__bild img {
  transform: scale(1.04);
}

.paket__koerper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.paket__titel {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem);
}

.paket__text {
  margin-top: .6rem;
  color: var(--leise);
}

/* "Preis auf Anfrage" zwischen zwei feinen Linien - es stehen bewusst keine Zahlen auf der Seite */
.paket__preis {
  margin-top: 1.25rem;
  padding-block: .9rem;
  border-block: 1px solid var(--linie-hell);
  font: 500 .75rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

.paket__liste {
  display: grid;
  gap: .55rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.paket__liste li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.paket__liste .icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .3rem;
  color: var(--oliv);
  stroke-width: 1.6;
}

/* margin-top: auto haelt den Button unten, egal wie lang die Liste darueber ist */
.paket__aktion {
  margin-top: auto;
  padding-top: 1.75rem;
}

.paket__aktion .btn {
  width: 100%;
}

.pakete__hinweis {
  max-width: 44rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: .95rem;
  text-align: center;
  color: var(--leise);
}

@media (max-width: 960px) {
  .pakete {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Zeitleiste (Ablauf auf der Leistungsseite, dunkle Sektion)
   -------------------------------------------------------------------------- */
.zeitleiste {
  --zl-kreis: 64px;
  --zl-gap: clamp(2.25rem, 4vw, 3rem);
  display: grid;
  gap: var(--zl-gap);
}

.zeitleiste__schritt {
  position: relative;
  display: grid;
  grid-template-columns: var(--zl-kreis) minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(1.25rem, 3vw, 2rem);
}

/* Verbindungslinie zum naechsten Kreis */
.zeitleiste__schritt:not(:last-child)::before {
  content: '';
  position: absolute;
  top: calc(var(--zl-kreis) + .5rem);
  bottom: calc(-1 * var(--zl-gap) + .5rem);
  left: calc(var(--zl-kreis) / 2 - .5px);
  width: 1px;
  background: var(--gold-linie);
}

.zeitleiste__kreis {
  display: grid;
  place-items: center;
  width: var(--zl-kreis);
  height: var(--zl-kreis);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--braun-900);
  color: var(--gold-hell);
}

.zeitleiste__kreis .icon {
  width: 44%;
  height: 44%;
  stroke-width: 1.2;
}

.zeitleiste__inhalt {
  padding-top: .35rem;
}

.zeitleiste__nummer {
  display: block;
  font: 400 1.35rem/1 var(--serif);
  color: var(--gold);
}

.zeitleiste__titel {
  margin-top: .5rem;
  font-size: clamp(1.5rem, 1.3rem + .7vw, 1.85rem);
}

.zeitleiste__inhalt p {
  max-width: 34rem;
  margin-top: .7rem;
  color: var(--leise);
}

@media (max-width: 560px) {
  .zeitleiste {
    --zl-kreis: 52px;
  }
}

/* --------------------------------------------------------------------------
   FAQ - natives <details>, Inhalte identisch mit dem FAQPage-Schema
   -------------------------------------------------------------------------- */
.faq {
  border-bottom: 1px solid var(--linie-hell);
  /* Erlaubt das Aufklappen auf height:auto (wo unterstuetzt) */
  interpolate-size: allow-keywords;
}

.faq__eintrag {
  border-top: 1px solid var(--linie-hell);
}

.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  list-style: none;
  cursor: pointer;
}

.faq__frage::-webkit-details-marker {
  display: none;
}

.faq__frage h3 {
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem);
  transition: color .3s var(--ease-out);
}

.faq__frage:hover h3 {
  color: var(--akzent-schrift);
}

.faq__frage .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--akzent-schrift);
  transition: transform .4s var(--ease-out);
}

.faq__eintrag[open] .faq__frage .icon {
  transform: rotate(45deg);
}

.faq__antwort {
  max-width: 44rem;
  padding: 0 3rem 1.75rem 0;
  color: var(--leise);
}

@supports selector(::details-content) {
  .faq__eintrag::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size .45s var(--ease-out),
      content-visibility .45s allow-discrete;
  }

  .faq__eintrag[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__eintrag::details-content {
    transition: none;
  }
}

@media (max-width: 560px) {
  .faq__antwort {
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Werte (Ueber-Seite)
   -------------------------------------------------------------------------- */
.werte {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 2rem);
}

.wert {
  padding-top: 1.75rem;
  border-top: 1px solid var(--gold-linie);
}

.wert__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--akzent-schrift);
}

.wert__icon .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.2;
}

.wert__titel {
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem);
}

.wert p {
  margin-top: .6rem;
  font-size: .95rem;
  color: var(--leise);
}

@media (max-width: 1100px) {
  .werte {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

@media (max-width: 480px) {
  .werte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Statement (grosser Leitsatz auf Taupe)
   -------------------------------------------------------------------------- */
.statement {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.statement__zitat {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem);
  font-style: italic;
  line-height: 1.12;
  text-wrap: balance;
}

.statement .trenner {
  margin: 2rem auto;
  background: var(--rahmen);
}

.statement__text {
  font-size: 1.1rem;
  color: var(--leise);
}

/* --------------------------------------------------------------------------
   Person (Ueber-Seite)
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .split--person {
    grid-template-columns: .85fr 1fr;
  }
}

.person__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.signatur {
  display: grid;
  gap: .35rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie-hell);
}

.signatur__name {
  font: italic 400 1.6rem/1.2 var(--serif);
}

.signatur__rolle {
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--akzent-schrift);
}

@media (max-width: 860px) {
  .person__bild {
    max-width: 440px;
  }
}

/* --------------------------------------------------------------------------
   Filter (Projekte) - ohne JavaScript ausgeblendet, dann sind alle Bilder da
   -------------------------------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

html:not(.js) .filter {
  display: none;
}

.filter__knopf {
  min-height: 2.75rem;
  padding: .7rem 1.25rem;
  border: 1px solid rgba(35, 28, 23, .28);
  font: 500 .74rem/1.2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  transition:
    background-color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    color .3s var(--ease-out);
}

.filter__knopf:hover {
  border-color: var(--braun-900);
}

.filter__knopf[aria-pressed='true'] {
  border-color: var(--braun-900);
  background: var(--braun-900);
  color: var(--hell);
}

/* --------------------------------------------------------------------------
   Galerie (Masonry per CSS-Spalten)
   -------------------------------------------------------------------------- */
.galerie {
  columns: 3 300px;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}

.galerie__eintrag {
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  break-inside: avoid;
}

.galerie__figur {
  margin: 0;
}

.galerie__knopf {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--taupe);
  cursor: zoom-in;
}

.galerie__knopf img {
  width: 100%;
  transition: transform 1.2s var(--ease-out);
}

.galerie__knopf:hover img {
  transform: scale(1.04);
}

.galerie__knopf:focus-visible {
  outline-offset: 4px;
}

.galerie__zoom {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 14, 13, .62);
  color: var(--hell);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .35s var(--ease-out),
    transform .35s var(--ease-out);
}

.galerie__zoom .icon {
  width: 20px;
  height: 20px;
}

.galerie__knopf:hover .galerie__zoom,
.galerie__knopf:focus-visible .galerie__zoom {
  opacity: 1;
  transform: none;
}

/* Touch-Geraete haben kein Hover: Lupe immer zeigen */
@media (hover: none) {
  .galerie__zoom {
    opacity: 1;
    transform: none;
  }
}

.galerie__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-top: .8rem;
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.galerie__text span {
  color: var(--akzent-schrift);
}

.galerie__hinweis {
  margin-top: clamp(1rem, 3vw, 2rem);
  font-size: .9rem;
  text-align: center;
  color: var(--leise);
}

/* --------------------------------------------------------------------------
   Lightbox (<dialog>, per showModal geoeffnet)
   -------------------------------------------------------------------------- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 4.5rem clamp(1rem, 4vw, 4rem) 2.5rem;
  border: 0;
  background: rgba(18, 14, 13, .96);
  color: var(--hell);
}

/* Geoeffnet: drei Spalten - zurueck, Bild, weiter */
.lightbox[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'zurueck figur weiter';
  align-items: center;
  justify-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  animation: einblenden .35s var(--ease-out);
}

.lightbox::backdrop {
  background: rgba(18, 14, 13, .6);
}

.lightbox__figur {
  grid-area: figur;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

/* Bildhoehe begrenzen; dvh wiederholt vh wegen der Adressleiste auf iOS */
.lightbox__bild {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
}

.lightbox__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  width: 100%;
  margin-top: 1rem;
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leise);
}

.lightbox__zaehler {
  color: var(--akzent-schrift);
}

/* Runde Knoepfe fuer Zurueck, Weiter und Schliessen */
.lightbox__knopf,
.lightbox__schliessen {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid var(--gold-linie);
  border-radius: 50%;
  color: var(--hell);
  transition:
    border-color .3s var(--ease-out),
    background-color .3s var(--ease-out);
}

.lightbox__knopf:hover,
.lightbox__schliessen:hover {
  border-color: var(--gold);
  background: rgba(179, 157, 120, .12);
}

.lightbox__knopf .icon,
.lightbox__schliessen .icon {
  width: 22px;
  height: 22px;
}

.lightbox__knopf--zurueck {
  grid-area: zurueck;
}

.lightbox__knopf--weiter {
  grid-area: weiter;
}

.lightbox__schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

/* Schmal: Pfeile unter das Bild */
@media (max-width: 700px) {
  .lightbox[open] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      'figur figur'
      'zurueck weiter';
    column-gap: 1rem;
  }

  .lightbox__knopf--zurueck {
    justify-self: end;
  }

  .lightbox__knopf--weiter {
    justify-self: start;
  }

  .lightbox__bild {
    max-height: calc(100vh - 13rem);
    max-height: calc(100dvh - 13rem);
  }
}

/* --------------------------------------------------------------------------
   Anfrage (Kontaktseite): Formular + Seitenspalte
   -------------------------------------------------------------------------- */
.anfrage {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.anfrage__seite {
  position: sticky;
  top: calc(72px + 2rem);
  display: grid;
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .anfrage {
    grid-template-columns: minmax(0, 1fr);
  }

  .anfrage__seite {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Formular
   Feldrahmen #8C8177: 3,3:1 auf Creme (WCAG 1.4.11 verlangt 3:1)
   -------------------------------------------------------------------------- */
.formular {
  position: relative;
}

.formular fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Gefloatete Legende verhaelt sich wie ein normales Label */
.formular legend {
  float: left;
  width: 100%;
  padding: 0;
}

.formular legend + * {
  clear: both;
}

.formular__gruppe + .formular__gruppe {
  margin-top: clamp(2.75rem, 5vw, 3.75rem);
}

/* Schrittkopf: "01 Dein Projekt" - Nummer klein in Akzentfarbe, darunter eine Trennlinie */
.formular__legende {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linie-hell);
  font: 400 clamp(1.6rem, 1.35rem + .9vw, 2.1rem)/1.15 var(--serif);
}

.formular__nummer {
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .24em;
  color: var(--akzent-schrift);
}

.formular__felder {
  display: grid;
  gap: 1.75rem;
}

/* Ein Feld: Label ueber der Eingabe, darunter Platz fuer die Fehlermeldung */
.feld {
  display: grid;
  align-content: start;
  gap: .6rem;
}

fieldset.feld {
  display: block;
}

fieldset.feld > legend {
  margin-bottom: .75rem;
}

fieldset.feld > .feld__fehler {
  margin-top: .6rem;
}

/* Zwei Felder nebeneinander, unter 600 px gestapelt */
.feld-reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
}

@media (max-width: 600px) {
  .feld-reihe {
    grid-template-columns: minmax(0, 1fr);
  }
}

.feld__label {
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}

.feld__pflicht {
  color: var(--bronze);
}

.feld__optional {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--leise);
}

.formular input:not([type='radio']):not([type='checkbox']),
.formular select,
.formular textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .8rem 1rem;
  border: 1px solid #8C8177;
  border-radius: 0;
  background: #FBF8F4;
  /* 16px verhindert das Auto-Zoomen in iOS */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color .25s var(--ease-out),
    box-shadow .25s var(--ease-out);
}

.formular textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.formular input:not([type='radio']):not([type='checkbox']):hover,
.formular select:hover,
.formular textarea:hover {
  border-color: var(--braun-700);
}

.formular input:not([type='radio']):not([type='checkbox']):focus,
.formular select:focus,
.formular textarea:focus {
  border-color: var(--bronze);
  outline: 2px solid var(--bronze);
  outline-offset: 0;
}

.formular ::placeholder {
  color: #7A6F64;
  opacity: 1;
}

.formular [aria-invalid='true']:not(fieldset) {
  border-color: var(--fehler);
  box-shadow: inset 3px 0 0 var(--fehler);
}

.auswahl {
  position: relative;
}

.auswahl::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.15rem;
  width: .5rem;
  height: .5rem;
  border-right: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.formular select {
  padding-right: 2.75rem;
  cursor: pointer;
}

.feld__fehler {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--fehler);
}

/* Auswahl-Chips: echte Radio-/Checkboxen, nur optisch als Kachel */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .65rem 1.15rem;
  border: 1px solid #8C8177;
  background: #FBF8F4;
  font-size: .95rem;
  line-height: 1.3;
  transition:
    background-color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    color .25s var(--ease-out);
}

/* Kreis = eine Auswahl, Quadrat = mehrere moeglich */
.chip span::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .6;
}

.chip input[type='checkbox'] + span::before {
  border-radius: 2px;
}

.chip:hover span {
  border-color: var(--braun-900);
}

.chip input:checked + span {
  border-color: var(--oliv);
  background: var(--oliv);
  color: var(--hell);
}

.chip input:checked + span::before {
  opacity: 1;
  background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px);
}

.chip input[type='checkbox']:checked + span::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3 7.2 2.6 2.6L11 4.4' fill='none' stroke='%23F3EEE8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}

.feld[aria-invalid='true'] .chip span {
  border-color: var(--fehler);
}

@media (forced-colors: active) {
  .chip input:checked + span {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
}

/* Einwilligung */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  font-size: .95rem;
  color: var(--leise);
  cursor: pointer;
}

.check input {
  width: 1.2rem;
  height: 1.2rem;
  margin: .25rem 0 0;
  accent-color: var(--oliv);
  cursor: pointer;
}

.check a {
  color: var(--bronze);
  text-underline-offset: .2em;
}

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus */
.formular__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__meldung {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--fehler);
  background: rgba(155, 59, 42, .07);
}

.formular__abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linie-hell);
}

.formular__hinweis {
  max-width: 26rem;
  font-size: .85rem;
  color: var(--leise);
}

/* --------------------------------------------------------------------------
   Seitenspalte: Kontaktkarten
   -------------------------------------------------------------------------- */
.kontaktkarte {
  /* Dunkle Karte auf heller Sektion: Kontextfarben lokal setzen */
  --leise: var(--hell-weich);
  --akzent-schrift: var(--gold);
  --fokus: var(--gold-hell);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--braun-900);
  color: var(--hell);
}

.kontaktkarte--hell {
  --leise: var(--text-weich);
  --akzent-schrift: var(--oliv);
  --fokus: var(--bronze);
  background: var(--taupe);
  color: var(--text);
}

.kontaktkarte__titel {
  margin-bottom: 1.25rem;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.8rem);
}

.kontaktkarte > p {
  margin-bottom: 1.25rem;
  font-size: .95rem;
  color: var(--leise);
}

.kontaktliste {
  display: grid;
  gap: .9rem;
}

.kontaktliste li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.kontaktliste .icon {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .3rem;
  color: var(--gold);
}

.kontaktliste a {
  text-decoration: none;
  border-bottom: 1px solid var(--gold-linie);
  transition:
    color .3s var(--ease-out),
    border-color .3s var(--ease-out);
}

.kontaktliste a:hover {
  color: var(--gold-hell);
  border-color: var(--gold);
}

.weiter {
  display: grid;
  gap: 1.1rem;
}

.weiter li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  font-size: .95rem;
  color: var(--leise);
}

.weiter__nummer {
  font: 400 1.35rem/1.2 var(--serif);
  color: var(--akzent-schrift);
}

/* --------------------------------------------------------------------------
   Consent-Banner - erscheint nur, wenn in main.js ein Tracking-Dienst
   eingetragen ist. Beide Knoepfe gleich gewichtet (TDDDG/DSGVO).
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 150;
  width: min(34rem, calc(100% - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--gold-linie);
  background: var(--braun-950);
  color: var(--hell);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  font-size: .92rem;
  animation: auftauchen .6s var(--ease-out) both;
}

.consent__titel {
  margin-bottom: .5rem;
  font: 400 1.35rem/1.2 var(--serif);
}

.consent p {
  color: var(--leise);
}

.consent a {
  color: var(--gold-hell);
}

.consent__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.consent__aktionen .btn {
  flex: 1 1 10rem;
}

/* --------------------------------------------------------------------------
   Bewegung und Maus
   Alles, was auf Scrollen oder den Zeiger reagiert und nicht zu einem
   einzelnen Baustein weiter oben gehoert. main.js setzt dafuer nur Klassen
   und Custom Properties - die Bewegung selbst macht durchgaengig CSS.

   Drei Regeln, die hier ueberall gelten:
   1. Bewegt werden nur transform, opacity und clip-path. Alles andere
      laesst den Browser bei jedem Frame neu rechnen und ruckelt.
   2. Zeiger-Effekte stehen in @media (hover: hover) and (pointer: fine).
      Ein Touchscreen meldet beim Antippen ebenfalls "hover" und behaelt
      den Zustand bis zum naechsten Tipp - der Glanz bliebe kleben.
   3. Kein transform auf direkten Kindern von [data-reveal-group]. Dort
      gehoert es dem Einblenden in base.css. Nur Enkel und Pseudoelemente.
   -------------------------------------------------------------------------- */

/* --- Lesefortschritt ------------------------------------------------------
   Eine Goldlinie an der Unterkante der Kopfzeile. main.js legt das Element
   selbst an, damit es in keiner der neun HTML-Dateien stehen muss.
   scaleX statt Breite: das laeuft auf dem Compositor, ohne Layout. */
.fortschritt {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-linie), var(--gold-hell));
  transform: scaleX(var(--anteil, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* --- Hero: Bild laeuft langsamer als die Seite ----------------------------
   Das <img> traegt schon den Ken-Burns-Zoom, und eine Animation schlaegt
   jede per JS gesetzte Angabe. Verschoben wird deshalb das <picture>
   darum. Damit an den Kanten nie etwas Leeres auftaucht, ist es groesser
   als der Hero - dieser Spielraum ist genau die Grenze, an der main.js
   die Verschiebung abschneidet (8 % der Hoehe nach unten, 14 px seitlich). */
.js .hero__bild {
  top: -8%;
  right: auto;
  bottom: auto;
  left: -2%;
  width: 104%;
  height: 116%;
  will-change: transform;
}

/* --- Titel und Trenner treten mit ihrer Sektion auf ----------------------
   Haengt an derselben .is-visible-Klasse wie das Einblenden in base.css.
   clip-path statt transform: das Elternteil verschiebt sich gleichzeitig
   schon, zwei transforms auf einer Kette liessen sich nicht mischen. */
.js [data-reveal] .titel {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.2s var(--ease-out) .15s;
}

.js [data-reveal].is-visible .titel {
  /* Negative Werte: Unterlaengen und kursive Auslaeufer bleiben ganz */
  clip-path: inset(-.4em -.4em);
}

.js [data-reveal] .trenner {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s var(--ease-out) .4s;
}

.js [data-reveal].is-visible .trenner {
  transform: scaleX(1);
}

/* --- Licht, das dem Zeiger folgt ----------------------------------------
   main.js setzt --mx/--my in Prozent auf das Element und die Klasse
   .hat-zeiger, solange der Zeiger darueberliegt. soft-light legt das Licht
   ins Bild statt darueber: auf dunklen Fotos hebt es die Mitteltoene, auf
   hellen passiert fast nichts. isolation: isolate haelt die Mischung im
   Rahmen, sonst rechnet der Browser die halbe Seite mit. */
@media (hover: hover) and (pointer: fine) {
  .bereich__bild,
  .paket__bild,
  .raum__link,
  .galerie__knopf {
    position: relative;
    isolation: isolate;
  }

  .bereich__bild::after,
  .paket__bild::after,
  .raum__link::before,
  .galerie__knopf::before {
    /* Kein z-index: absolut positioniert liegt es schon ueber dem Bild,
       und in der Baumreihenfolge unter .galerie__zoom und dem dunklen
       Verlauf von .raum__link::after - genau richtig. */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 50%),
      rgba(242, 237, 231, .5), rgba(242, 237, 231, 0) 60%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity .5s var(--ease-out);
    pointer-events: none;
  }

  .bereich__bild.hat-zeiger::after,
  .paket__bild.hat-zeiger::after,
  .raum__link.hat-zeiger::before,
  .galerie__knopf.hat-zeiger::before {
    opacity: 1;
  }

  /* --- Buttons: Goldschein unter dem Zeiger -----------------------------
     isolation: isolate plus z-index: -1 legt den Schein ueber die Flaeche
     des Buttons, aber unter Text und Pfeil. Ohne isolation verschwindet
     er hinter dem Button. */
  .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(8rem circle at var(--mx, 50%) 50%,
      rgba(210, 189, 149, .5), rgba(210, 189, 149, 0) 70%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
    pointer-events: none;
  }

  .btn:hover::before,
  .btn:focus-visible::before {
    opacity: 1;
  }

  /* --- Feinschliff beim Ueberfahren ------------------------------------
     Alles auf Enkeln oder Pseudoelementen (siehe Regel 3 oben). */
  .schritt__kreis {
    transition:
      transform .5s var(--ease-out),
      border-color .5s var(--ease-out),
      background-color .5s var(--ease-out);
  }

  .schritt:hover .schritt__kreis {
    transform: scale(1.07);
    border-color: var(--gold-hell);
    background: var(--braun-800);
  }

  .leistung__icon {
    transition:
      transform .5s var(--ease-out),
      background-color .5s var(--ease-out);
  }

  .leistung:hover .leistung__icon {
    transform: scale(1.08);
    background: var(--oliv-hell);
  }

  /* Goldene Haarlinie statt Schatten: .paket ist ein direktes Kind einer
     [data-reveal-group], ein transition darauf wuerde das Einblenden
     ueberschreiben. Das Pseudoelement hat seinen eigenen Uebergang. */
  .paket {
    position: relative;
  }

  .paket::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--gold);
    opacity: 0;
    transition: opacity .5s var(--ease-out);
    pointer-events: none;
  }

  .paket:hover::after {
    opacity: 1;
  }
}

/* --- Zeigerring in der Galerie ------------------------------------------
   Statt der Lupe in der Ecke folgt dem Zeiger ein Ring mit "Ansehen".
   translate ist hier bewusst die eigene Eigenschaft und nicht transform:
   main.js schreibt sie jeden Frame neu, waehrend scale und opacity in
   Ruhe ueberblenden. Mit einem gemeinsamen transform ginge beides nicht.
   main.js legt das Element an und setzt .zeiger-aktiv auf <html>. */
.zeiger {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(18, 14, 13, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--hell);
  font: 500 .62rem/1 var(--sans);
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  opacity: 0;
  translate: var(--x, 50vw) var(--y, 50vh);
  scale: .5;
  transition:
    opacity .3s var(--ease-out),
    scale .45s var(--ease-out);
  pointer-events: none;
}

.zeiger.is-visible {
  opacity: 1;
  scale: 1;
}

/* Solange der Ring die Rolle uebernimmt, braucht es die Lupe nicht doppelt */
html.zeiger-aktiv .galerie__knopf {
  cursor: none;
}

html.zeiger-aktiv .galerie__knopf:hover .galerie__zoom {
  opacity: 0;
}

/* Wer mit der Tastatur navigiert, sieht keinen Ring - dort bleibt die Lupe */
html.zeiger-aktiv .galerie__knopf:focus-visible .galerie__zoom {
  opacity: 1;
  transform: none;
}

/* --- Lightbox faehrt leise heran ----------------------------------------
   Gleiche Auswahl wie oben, nur spaeter in der Datei - ersetzt dort das
   reine Einblenden. Das Keyframe einblenden bleibt unangetastet, es wird
   auch vom Cookie-Hinweis benutzt. */
.lightbox[open] {
  animation: lightbox-auf .4s var(--ease-out);
}

@keyframes lightbox-auf {
  from {
    opacity: 0;
    transform: scale(.985);
  }
}

/* Beim Blaettern wechselt nur das src - ohne das hier springt das neue
   Bild hart herein. main.js setzt die Klasse bei jedem Wechsel neu. */
.lightbox__bild.ist-neu {
  animation: bild-wechsel .5s var(--ease-out);
}

@keyframes bild-wechsel {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
}

/* --- Wer weniger Bewegung will, bekommt weniger --------------------------
   base.css kuerzt global alle Dauern auf .01ms. Das allein genuegt nicht:
   die Ausgangszustaende oben muessen weg, sonst bleibt ein Titel
   beschnitten oder ein Trenner unsichtbar stehen. Die Fortschrittslinie
   bleibt - sie ist eine Anzeige, keine Animation. */
@media (prefers-reduced-motion: reduce) {
  .js .hero__bild {
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: auto;
  }

  .js [data-reveal] .titel {
    clip-path: none;
  }

  .js [data-reveal] .trenner {
    transform: none;
  }
}

/* --- Auf Papier gibt es keine Bewegung ---------------------------------- */
@media print {
  .fortschritt,
  .zeiger {
    display: none !important;
  }

  .js [data-reveal] .titel {
    clip-path: none !important;
  }

  .js [data-reveal] .trenner {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */
@media print {
  .kopfzeile,
  .mobilnav,
  .skip,
  .hero__scroll,
  .cta__bild,
  .filter,
  .lightbox,
  .consent,
  .fusszeile__sozial {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .hero,
  .seitenkopf,
  .sektion--dunkel,
  .sektion--taupe,
  .cta,
  .fusszeile,
  .kontaktkarte {
    --leise: #333;
    --akzent-schrift: #555;
    background: none !important;
    color: #000 !important;
  }

  .hero {
    min-height: 0;
  }

  .hero::before,
  .hero__bild {
    display: none;
  }

  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .rechtstext a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: .85em;
  }
}