/* =========================================================================
   WALO - GmbH – Stylesheet
   Handgeschrieben, ohne Framework. Die Farb- und Schriftwerte entsprechen
   denen der früheren Tailwind-Konfiguration.
   ========================================================================= */

:root {
  /* Markenfarben – Blautöne, verankert auf dem Logoblau (brand-700) */
  --brand-50: #edf8ff;
  --brand-100: #ceeafd;
  --brand-200: #9dd5fb;
  --brand-300: #64baf7;
  --brand-400: #2a9def;
  --brand-500: #0573c7;
  --brand-600: #006bbd;
  --brand-700: #0066b2; /* Logoblau */
  --brand-800: #004f8f;
  --brand-900: #043967;
  --brand-950: #05223d;

  /* Akzentfarbe – Logogelb.
     Achtung: accent-500 hat auf Weiß nur 1,56:1. Nie als Text auf Weiß und
     nie als randlose Fläche auf hellem Grund – nur auf dunklem Grund oder
     mit dunkler Schrift darauf. accent-600 ist die textsichere Variante. */
  --accent-400: #fcc736;
  --accent-500: #fcc90a;
  --accent-600: #8a5c00;

  /* Signalfarbe – Logomagenta, sparsam zur Unterscheidung (z. B. Kauf/Miete) */
  --signal-500: #e6008a;
  --signal-600: #b80070;

  --ink-50: #f6f7f9;
  --ink-100: #eceef1;
  --ink-400: #6b7686;
  --ink-600: #48505c;
  --ink-900: #1c2128;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  --shadow-card: 0 1px 2px rgba(20, 44, 73, 0.06), 0 8px 24px -8px rgba(20, 44, 73, 0.16);
  --shadow-card-hover: 0 4px 12px rgba(20, 44, 73, 0.08), 0 16px 40px -12px rgba(20, 44, 73, 0.22);
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

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

img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-950);
}

h1 {
  font-size: 48px;
  line-height: 1.25;
}
h2 {
  font-size: 36px;
  line-height: 1.111;
}
h3 {
  /* Wie zuvor unter Tailwind: Überschriften erben die Textgröße,
     die konkrete Größe setzt die jeweilige Komponente. */
  font-size: 16px;
  line-height: 1.5;
}

/* Muss nach den display-Regeln greifen: sonst überschreibt z. B.
   .alert-success { display: flex } das hidden-Attribut. */
[hidden] {
  display: none !important;
}

.icon {
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------- Layout ---------- */
.container-page {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  width: 100%;
}

@media (min-width: 640px) {
  .container-page {
    padding-inline: 2rem;
  }
}

.section {
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .section {
    padding-block: 6rem;
  }
}

/* Etwas flacher – wird auf der FAQ-Sektion verwendet */
.section--tight {
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .section--tight {
    padding-block: 5rem;
  }
}

/* Die Kopfzeile bleibt beim Scrollen oben stehen. Ohne diesen Abstand
   verschwindet die Überschrift eines angesprungenen Abschnitts darunter. */
.section[id],
[id^="anfrage"] {
  scroll-margin-top: 5.5rem;
}

.section--white {
  background: #fff;
}
.section--muted {
  background: color-mix(in srgb, var(--brand-50) 60%, #fff);
}
.section--brand {
  background: var(--brand-900);
  color: #fff;
}

/* Abschnitt mit Video im Hintergrund. Es soll die Fläche beleben, nicht
   dominieren – deshalb liegt ein kräftiger Verlauf darüber und der Inhalt
   bleibt unverändert lesbar. */
.section--video {
  position: relative;
  overflow: hidden;
  background: var(--brand-950);
}

.section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Leicht zurückgenommen, damit das Bild als Textur wirkt und nicht mit
     den Karten davor um Aufmerksamkeit konkurriert. */
  filter: saturate(0.85);
}

.section__video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--brand-950) 80%, transparent),
    color-mix(in srgb, var(--brand-950) 68%, transparent)
  );
}

/* Beide Ebenen sind positioniert und lägen sonst über dem Text. */
.section--video > .container-page {
  position: relative;
  z-index: 1;
}

.section__head {
  margin-bottom: 3rem;
  max-width: 42rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--brand-600);
}

.section--brand .eyebrow {
  color: var(--accent-400);
}

.section__title {
  margin-top: 0.5rem;
}

.section--brand .section__title {
  color: #fff;
}

/* Größere Fassung für einzelne Abschnittsüberschriften */
.section__title--gross {
  font-size: 30px;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .section__title--gross {
    font-size: 38px;
  }
}

/* Bildunterschrift unter dem Bildwechsel auf „Über uns“ */
.about-bild {
  margin: 0;
}

.about-bild__unterschrift {
  margin-top: 0.75rem;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-400);
}

.section__desc {
  margin-top: 1rem;
  font-size: 18px;
  line-height: 1.625;
  color: var(--ink-600);
}

.section--brand .section__desc {
  color: var(--brand-200);
}

/* ---------- Raster ---------- */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid--gap8 {
  gap: 2rem;
}
.grid--gap10 {
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .sm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s;
}

.site-header.is-scrolled {
  border-bottom-color: var(--brand-100);
  box-shadow: var(--shadow-card);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding-block: 0.75rem;
  transition: all 0.3s;
}

.site-header.is-scrolled .site-header__bar {
  height: 4rem;
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Die Bildmarke steht für sich, der Schriftzug daneben ist echter Text –
   nur so lässt sich „WALO - GmbH“ mit den Leerzeichen um den Bindestrich
   sauber setzen. */
.brand__logo {
  width: auto;
  height: 2.25rem;
  transition: all 0.3s;
}

@media (min-width: 640px) {
  .brand__logo {
    height: 2.75rem;
  }
}

/* Nachgemessen am alten Logo: Farbe #0066b2 (= brand-700), Versalhöhe
   15,4 px bei 44 px Bildmarke und ein Verhältnis Stammbreite zu Versalhöhe
   von 0,127 – das entspricht 22 px in normaler Stärke, nicht in fetter. */
.brand__name {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--brand-700);
}

@media (min-width: 640px) {
  .brand__name {
    font-size: 22px;
  }
}

.site-header.is-scrolled .brand__logo {
  height: 2rem;
}

@media (min-width: 640px) {
  .site-header.is-scrolled .brand__logo {
    height: 2.25rem;
  }
}

.brand__tag {
  display: none;
  border-left: 1px solid var(--brand-100);
  padding-left: 0.75rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.025em;
  color: var(--brand-500);
}

@media (min-width: 640px) {
  .brand__tag {
    display: block;
  }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
}

.nav-link {
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--ink-600);
  transition: background-color 0.15s, color 0.15s;
}

.nav-link:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.nav-link.is-active {
  background: var(--brand-50);
  color: var(--brand-700);
}

.nav-cta {
  margin-left: 0.75rem;
  border-radius: 0.375rem;
  background: var(--brand-700);
  padding: 0.625rem 1.25rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-card);
  transition: all 0.15s;
}

.nav-cta:hover {
  background: var(--brand-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
  color: var(--brand-700);
  transition: background-color 0.15s;
}

.nav-toggle:hover {
  background: var(--brand-50);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-mobile {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.nav-mobile.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  border-top-color: var(--brand-100);
}

@media (min-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

.nav-mobile__inner {
  overflow: hidden;
}

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 0.75rem;
}

.nav-mobile__list .nav-link {
  padding: 0.75rem 1rem;
}

.nav-mobile__cta {
  margin-top: 0.5rem;
  border-radius: 0.375rem;
  background: var(--brand-700);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-950);
  color: #fff;
}

.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-size: cover;
  background-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    var(--brand-950),
    color-mix(in srgb, var(--brand-900) 95%, transparent),
    color-mix(in srgb, var(--brand-800) 90%, transparent)
  );
}

/* Bewegter Hintergrund */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Das Videomaterial ist eine helle Büroszene. Der Verlauf für Standbilder
   reicht dort nicht: weiße Schrift bräuchte sonst Kontrast gegen nahezu
   Weiß. Deshalb hier deutlich kräftiger – links, wo der Text steht, fast
   deckend, nach rechts hin öffnend, damit das Bild sichtbar bleibt. */
.hero__scrim--video {
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--brand-950) 97%, transparent) 0%,
      color-mix(in srgb, var(--brand-950) 92%, transparent) 45%,
      color-mix(in srgb, var(--brand-900) 72%, transparent) 100%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--brand-950) 55%, transparent),
      color-mix(in srgb, var(--brand-950) 35%, transparent)
    );
}

.hero__inner {
  position: relative;
  padding-block: 5rem;
}

@media (min-width: 640px) {
  .hero__inner {
    padding-block: 7rem;
  }
}

.hero--compact .hero__inner {
  padding-block: 4rem;
}

@media (min-width: 640px) {
  .hero--compact .hero__inner {
    padding-block: 5rem;
  }
}

.hero__content {
  max-width: 42rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand-500) 20%, transparent);
  padding: 0.375rem 1rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--brand-200);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-400) 30%, transparent);
}

.hero h1 {
  margin-top: 1.25rem;
  color: #fff;
  font-size: 36px;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 48px;
  }
}

.hero__desc {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 18px;
  line-height: 1.625;
  color: var(--brand-100);
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__accent {
  color: var(--accent-400);
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--brand-700);
  color: #fff;
}
.btn--primary:hover {
  background: var(--brand-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.btn--accent {
  background: var(--accent-500);
  color: var(--brand-950);
  box-shadow: var(--shadow-card);
}
.btn--accent:hover {
  background: var(--accent-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.btn--outline {
  border-color: var(--brand-300);
  color: var(--brand-700);
}
.btn--outline:hover {
  background: var(--brand-50);
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn--white {
  background: #fff;
  color: var(--brand-800);
  box-shadow: var(--shadow-card);
}
.btn--white:hover {
  background: var(--brand-50);
}

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

/* Pfeil wandert beim Überfahren */
.btn:hover .icon-arrow {
  transform: translateX(4px);
}
.icon-arrow {
  transition: transform 0.3s;
}

/* ---------- Karten ---------- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: var(--brand-50);
  color: var(--brand-700);
  transition: background-color 0.15s, color 0.15s;
}

.card:hover .card__icon {
  background: var(--brand-700);
  color: #fff;
}

.card h3 {
  margin-top: 1.25rem;
  font-size: 18px;
  line-height: 1.5556;
}

.card__text {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

/* Anklickbare Karte, die zum passenden Abschnitt der Leistungsseite führt */
a.card--link {
  color: inherit;
  text-decoration: none;
}

a.card--link .card__text {
  flex: 1;
}

a.card--link:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--brand-700);
}

.card__more .icon-arrow {
  transition: transform 0.2s;
}

a.card--link:hover .card__more .icon-arrow {
  transform: translateX(3px);
}

/* USP / Wertekachel */
.feature {
  display: flex;
  gap: 1rem;
}

.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--brand-700);
  color: #fff;
}

.feature__text {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

/* ---------- Objektkarte ---------- */
.listing {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}

.listing:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.listing__media {
  position: relative;
  height: 13rem;
  width: 100%;
  overflow: hidden;
}

.listing__media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

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

.badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.badge--miete {
  background: var(--accent-500);
  color: var(--brand-950);
}

.badge--kauf {
  background: var(--signal-600);
  color: #fff;
}

.listing__body h3 {
  font-size: 18px;
  line-height: 1.375;
}

.listing__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
}

.listing__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--brand-50);
  padding-block: 0.625rem;
  font-size: 14px;
  line-height: 1.4286;
}

.listing__row:last-child {
  border-bottom: none;
}

.listing__row dt,
.listing__label {
  color: var(--ink-400);
}

.listing__row dd,
.listing__value {
  font-weight: 500;
  color: var(--brand-950);
}

.listing__btn {
  margin-top: 1.5rem;
  padding-block: 0.75rem;
}

/* ---------- Google-Rezensionen ---------- */
.g-review {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}

.g-review:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.g-review__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.g-review__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.g-review__who {
  display: block;
  min-width: 0;
  flex: 1;
}

.g-review__name {
  display: block;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--brand-950);
}

.g-review__meta {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-400);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g-review .stars {
  margin-top: 0.875rem;
}

.g-review__text {
  margin-top: 0.75rem;
  flex: 1;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

.g-glyph {
  flex-shrink: 0;
}

/* Endlos laufende Rezensionsreihen.
   Jede Spur enthält ihre Karten zweimal und wird um genau die halbe Breite
   verschoben – am Ende der Animation steht deshalb wieder derselbe Anblick
   wie am Anfang, der Neustart ist unsichtbar. Der Abstand hängt als margin
   an den Karten und nicht als gap an der Spur, sonst wäre „halbe Breite“
   nicht exakt eine Kartenrunde. */
.g-marquee {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
}

.g-marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.g-marquee__track {
  display: flex;
  width: max-content;
  padding-block: 0.5rem;
  animation: g-marquee-ltr var(--marquee-duration, 42s) linear infinite;
}

.g-marquee__row--rtl .g-marquee__track {
  animation-name: g-marquee-rtl;
}

.g-marquee__item {
  width: 20rem;
  flex: 0 0 auto;
  margin-right: 1.5rem;
}

/* Beim Lesen anhalten – sonst rutscht die Karte unter dem Cursor weg. */
.g-marquee:hover .g-marquee__track,
.g-marquee__track:focus-within {
  animation-play-state: paused;
}

@keyframes g-marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes g-marquee-rtl {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .g-marquee__row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .g-marquee__track {
    animation: none;
  }
}

/* Sterne */
.stars {
  display: flex;
  gap: 0.125rem;
}

.star {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
}

.star--md {
  width: 1.25rem;
  height: 1.25rem;
}

.star__bg,
.star__fill {
  position: absolute;
  inset: 0;
}

.star__fill {
  overflow: hidden;
}

/* Muss die <svg> selbst treffen, nicht nur die umhüllende <span> – sonst
   bleibt die feste width/height="24" vom SVG-Tag bestehen und der
   Hintergrundstern ragt größer als der goldene Stern darüber hervor. */
.star__bg svg,
.star__fill svg {
  display: block;
  width: 100%;
  height: 100%;
}

.star__bg svg {
  fill: var(--brand-100);
  color: var(--brand-200);
}

.star__fill svg {
  fill: var(--accent-500);
  color: var(--accent-600);
  max-width: none;
}

.star--md .star__fill svg,
.star--md .star__bg svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Übersichtskarte */
.review-summary {
  display: grid;
  gap: 2rem;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .review-summary {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .review-summary {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 3rem;
  }
}

.review-summary__score {
  text-align: center;
}

@media (min-width: 1024px) {
  .review-summary__score {
    text-align: left;
  }
}

.review-summary__source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--ink-600);
}

.review-summary__value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-950);
}

.review-summary__stars {
  margin-top: 0.75rem;
  justify-content: center;
}

@media (min-width: 1024px) {
  .review-summary__stars {
    justify-content: flex-start;
  }
}

.review-summary__count {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-400);
}

.review-summary__bars {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.review-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-400);
}

.review-bar__label {
  width: 4rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.review-bar__track {
  height: 0.5rem;
  flex: 1;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--brand-50);
}

.review-bar__fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--accent-500);
  transition: width 0.7s;
}

.review-bar__count {
  width: 1rem;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.review-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .review-summary__actions {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .review-summary__actions {
    flex-direction: column;
  }
}

/* ---------- Formulare ---------- */
.field__label {
  display: block;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--brand-950);
}

.field__input,
.field__textarea {
  margin-top: 0.375rem;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--brand-200);
  padding: 0.625rem 0.875rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}

.field__input:focus,
.field__textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.field__input.is-invalid,
.field__textarea.is-invalid {
  border-color: #f87171;
}

.field__error {
  margin-top: 0.375rem;
  font-size: 12px;
  line-height: 1.3333;
  color: #ef4444;
}

.field__hint {
  margin-top: 0.375rem;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-400);
}

.field__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-600);
}

.field__checkbox input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--brand-700);
}

.form-note {
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-400);
}

.alert-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  background: var(--brand-50);
  padding: 0.75rem 1rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 500;
  color: var(--brand-700);
}

/* ---------- Akkordeon ---------- */
.accordion {
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--brand-100);
}

.accordion__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--brand-950);
}

.accordion__btn svg {
  flex-shrink: 0;
  color: var(--brand-500);
  transition: transform 0.2s;
}

.accordion__item.is-open .accordion__btn svg {
  transform: rotate(180deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion__inner {
  overflow: hidden;
}

.accordion__text {
  padding: 0 1.5rem 1.25rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

/* ---------- Objekt-Detailseite ---------- */
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--brand-700);
}

.detail__back:hover {
  color: var(--brand-800);
}

.detail__meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.detail__ref {
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-400);
}

.detail__badge {
  position: static;
  box-shadow: none;
}

.detail h1 {
  margin-top: 0.75rem;
  max-width: 56rem;
  font-size: 30px;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .detail h1 {
    font-size: 36px;
  }
}

.detail__facts {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-600);
}

.detail__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.detail__fact svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand-700);
}

.detail__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .detail__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.detail h2 {
  margin-top: 3rem;
  font-size: 24px;
  line-height: 1.333;
}

.detail__data {
  margin-top: 1.25rem;
  display: grid;
  column-gap: 2.5rem;
}

@media (min-width: 640px) {
  .detail__data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail__data-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--brand-50);
  padding-block: 0.75rem;
  font-size: 14px;
  line-height: 1.4286;
}

.detail__data-row dt {
  font-weight: 600;
  color: var(--brand-950);
}

.detail__data-row dd {
  text-align: right;
  color: var(--ink-600);
}

.detail__commission {
  margin-top: 1rem;
  font-size: 12px;
  line-height: 1.625;
  color: var(--ink-400);
}

.detail__para {
  margin-top: 1rem;
  line-height: 1.625;
  color: var(--ink-600);
}

.detail__features {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem 2.5rem;
}

@media (min-width: 640px) {
  .detail__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-600);
}

.detail__feature svg {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--brand-700);
}

.detail__aside-inner {
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: color-mix(in srgb, var(--brand-50) 60%, #fff);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

@media (min-width: 1024px) {
  .detail__aside > div {
    position: sticky;
    top: 6rem;
  }
}

.detail__price-label {
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--brand-700);
}

.detail__price {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-950);
}

.detail__price-note {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-400);
}

.detail__aside-cta {
  margin-top: 1.5rem;
}

.detail__aside-hint {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-400);
}

.detail__aside-phone {
  margin-top: 1rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Galerie ---------- */
.gallery__stage {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  box-shadow: var(--shadow-card);
}

.gallery__stage:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}

.gallery__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.gallery__frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s;
}

.gallery__frame img.is-active {
  opacity: 1;
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-950);
  box-shadow: var(--shadow-card);
  transition: all 0.15s;
}

.gallery__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.1);
}

.gallery__nav--prev {
  left: 0.75rem;
}
.gallery__nav--next {
  right: 0.75rem;
}

.gallery__counter {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand-950) 80%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 600;
  color: #fff;
}

.gallery__thumbs {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .gallery__thumbs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.gallery__thumb {
  overflow: hidden;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  transition: all 0.15s;
  padding: 0;
}

.gallery__thumb:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
}

.gallery__thumb.is-active {
  border-color: var(--brand-700);
}

.gallery__thumb img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.gallery__thumb.is-active img,
.gallery__thumb:hover img {
  opacity: 1;
}

/* ---------- Karte ---------- */
.map {
  position: relative;
  height: 24rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  box-shadow: var(--shadow-card);
  background: var(--brand-50);
}

@media (min-width: 640px) {
  .map {
    height: 28rem;
  }
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Platzhalter, solange keine Zustimmung zu Google Maps vorliegt */
.map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.map-consent__icon {
  color: var(--brand-400);
}

.map-consent__text {
  max-width: 32rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

.map-consent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---------- Cookie-Banner ---------- */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--brand-100);
  box-shadow: var(--shadow-card-hover);
}

.consent-banner__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .consent-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem 2rem;
  }
}

.consent-banner__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-600);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.consent-banner__actions .btn {
  padding: 0.625rem 1.125rem;
  font-size: 13px;
  white-space: nowrap;
}

/* ---------- Cookie-Einstellungsdialog ---------- */
.consent-dialog-open {
  overflow: hidden;
}

.consent-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.consent-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 34, 61, 0.55);
}

.consent-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  background: #fff;
  padding: 2rem;
  box-shadow: var(--shadow-card-hover);
}

.consent-dialog__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: var(--ink-400);
  transition: background-color 0.15s, color 0.15s;
}

.consent-dialog__close:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.consent-dialog__panel h2 {
  padding-right: 2rem;
  font-size: 20px;
  line-height: 1.4;
}

.consent-dialog__intro {
  margin-top: 0.75rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

.consent-dialog__rows {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.consent-row {
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  padding: 1rem 1.25rem;
}

.consent-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.consent-row__title {
  font-weight: 600;
  color: var(--brand-950);
}

.consent-row__locked {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--brand-500);
}

.consent-row__desc {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-600);
}

.consent-dialog__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.consent-dialog__actions .btn {
  flex: 1 1 auto;
  padding: 0.75rem 1rem;
  font-size: 13px;
  white-space: nowrap;
}

/* Schalter */
.consent-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.consent-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.consent-switch__track {
  display: block;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--brand-200);
  transition: background-color 0.15s;
}

.consent-switch__thumb {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.1875rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}

.consent-switch input:checked + .consent-switch__track {
  background: var(--brand-700);
}

.consent-switch input:checked + .consent-switch__track .consent-switch__thumb {
  transform: translateX(1.25rem);
}

.consent-switch input:focus-visible + .consent-switch__track {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
}

/* Fußzeilen-Link, als <button> statt <a>, weil er nicht navigiert */
.footer-cookie-link {
  font: inherit;
  color: inherit;
}

.footer-cookie-link:hover {
  color: #fff;
}

/* ---------- CTA-Band ---------- */
.cta {
  background: var(--brand-700);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 4rem;
  text-align: center;
}

@media (min-width: 640px) {
  .cta__inner {
    padding-block: 5rem;
  }
}

.cta h2 {
  max-width: 42rem;
  color: #fff;
  font-size: 30px;
}

@media (min-width: 640px) {
  .cta h2 {
    font-size: 36px;
  }
}

.cta__desc {
  max-width: 36rem;
  font-size: 18px;
  line-height: 1.5556;
  color: var(--brand-100);
}

.cta__actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cta__actions {
    flex-direction: row;
  }
}

.cta__phone {
  border-color: color-mix(in srgb, var(--brand-400) 60%, transparent);
  color: #fff;
}

.cta__phone:hover {
  background: var(--brand-600);
}

/* ---------- Fußzeile ---------- */
.site-footer {
  /* position+z-index, damit die Fußzeile über dem "Zurück nach oben"-Button
     liegt, statt von ihm am unteren Bildschirmrand verdeckt zu werden. */
  position: relative;
  z-index: 45;
  border-top: 1px solid var(--brand-800);
  background: var(--brand-950);
  color: var(--brand-100);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 3.5rem;
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-card);
}

.site-footer__logo img {
  height: 2rem;
  width: auto;
}

/* Gleiche Proportion wie in der Kopfzeile, passend zur 2rem hohen
   Bildmarke in der Fußzeile. */
.site-footer__wordmark {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--brand-700);
}

.site-footer__about {
  margin-top: 1rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--brand-300);
}

.site-footer h3 {
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--brand-400);
}

.site-footer__list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--brand-200);
}

.site-footer__list a:hover {
  color: #fff;
}

.site-footer__contact {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--brand-200);
}

.site-footer__contact li {
  display: flex;
  gap: 0.5rem;
}

.site-footer__contact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--brand-400);
}

.site-footer__contact li:first-child svg {
  margin-top: 0.125rem;
}

.site-footer__bar {
  border-top: 1px solid var(--brand-800);
}

.site-footer__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.25rem;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--brand-400);
}

@media (min-width: 640px) {
  .site-footer__bar-inner {
    flex-direction: row;
  }
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-footer__legal a:hover {
  color: #fff;
}

/* ---------- Zurück nach oben ---------- */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--brand-700);
  color: #fff;
  box-shadow: var(--shadow-card-hover);
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--brand-800);
  transform: translateY(-4px);
}

/* ---------- Bewegung ---------- */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.enter {
  animation: enter-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.enter-slow-zoom {
  animation: slow-zoom 24s ease-out both;
}

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slow-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}

/* Wer Bewegung reduziert haben möchte, bekommt alle Endzustände sofort. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Blöcke, die ab 640px nebeneinander liegen ---------- */
.panel {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: color-mix(in srgb, var(--brand-50) 50%, #fff);
  padding: 2rem;
}

@media (min-width: 640px) {
  .panel {
    flex-direction: row;
    padding: 2.5rem;
  }
}

/* Ansprechpartner auf der Startseite */
.panel--contact {
  align-items: center;
  gap: 2rem;
}

.panel--contact img {
  height: 7rem;
  width: 7rem;
  flex-shrink: 0;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff;
}

.panel--contact__body {
  flex: 1;
  text-align: center;
}

@media (min-width: 640px) {
  .panel--contact__body {
    text-align: left;
  }
}

.panel--contact h3 {
  font-size: 20px;
  line-height: 1.4;
}

.panel--contact__role {
  color: var(--brand-600);
}

.panel--contact__text {
  margin-top: 0.75rem;
  max-width: 36rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ink-600);
}

.panel--contact .btn {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
}

/* ---------- Green Alu ---------- */

/* Foto im Kopfbereich. Hier soll ein konkretes Produkt zu sehen sein und
   nicht nur eine Farbstimmung, deshalb volle Deckkraft – den Kontrast für
   die Schrift übernimmt der Verlauf darüber. */
.hero__bg--greenalu {
  opacity: 1;
  background-image: url("../assets/greenalu/hero.jpg");
  background-position: center 58%;
}

/* Links, wo der Text steht, nahezu deckend; nach rechts öffnet der Verlauf,
   damit das Foto sichtbar bleibt. */
.hero__scrim--foto {
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--brand-950) 94%, transparent) 0%,
      color-mix(in srgb, var(--brand-950) 84%, transparent) 40%,
      color-mix(in srgb, var(--brand-900) 42%, transparent) 100%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--brand-950) 45%, transparent),
      color-mix(in srgb, var(--brand-950) 25%, transparent)
    );
}

.ga-bild {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

/* Bildergalerie der umgesetzten Anlagen. Größere Kacheln als üblich, weil
   die Anlagen sonst nicht zu erkennen sind, und ein sehr langsames
   Heranfahren, damit die Fläche nicht statisch wirkt. */
.ga-galerie {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.ga-galerie figure {
  overflow: hidden;
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
}

.ga-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform-origin: center;
  animation: ga-zoom 22s ease-in-out infinite alternate;
}

/* Versetzt starten, sonst atmen alle Kacheln im Gleichtakt. */
.ga-galerie figure:nth-child(3n + 2) img {
  animation-delay: -7s;
}

.ga-galerie figure:nth-child(3n + 3) img {
  animation-delay: -14s;
}

@keyframes ga-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

/* Beim Darüberfahren anhalten, damit man ein Motiv in Ruhe ansehen kann. */
.ga-galerie figure:hover img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ga-galerie img {
    animation: none;
  }
}

/* Nachhaltigkeit: Text links, Partnerlogo rechts daneben */
.ga-nachhaltig {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ga-nachhaltig {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }

  /* Das Logo steht neben dem Text, leicht eingerückt; der freie Platz bleibt rechts. */
  .ga-nachhaltig__logo {
    margin-left: 2rem;
    margin-right: auto;
  }
}

.ga-nachhaltig .stack {
  max-width: 44rem;
}

/* Querformat, deshalb breiter als hoch – die Datei hat einen transparenten
   Hintergrund und braucht keine abgerundeten Ecken. */
.ga-nachhaltig__logo {
  width: 13rem;
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .ga-nachhaltig__logo {
    width: 15rem;
  }
}

/* Kontaktkarte für den Standort Neuffen */
.ga-kontakt {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.ga-kontakt__label {
  font-size: 14px;
  line-height: 1.4286;
  font-weight: 600;
  color: var(--brand-600);
}

.ga-kontakt__name {
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--brand-950);
}

.ga-kontakt__liste {
  display: flex;
  margin-top: 1.5rem;
  flex-direction: column;
  gap: 0.875rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-600);
}

.ga-kontakt__liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ga-kontakt__liste .icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--brand-400);
}

.ga-kontakt__liste a:hover {
  color: var(--brand-700);
}

.ga-kontakt__cta {
  margin-top: 1.75rem;
}

/* Partnerhinweis auf „Leistungen“ */
.panel--partner {
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .panel--partner {
    align-items: center;
    justify-content: space-between;
  }
}

.panel--partner .btn {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem;
}

/* Direkter Draht bei den Wohnungsangeboten */
.hotline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2.5rem;
  border-radius: 1rem;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  padding: 1.75rem;
}

@media (min-width: 768px) {
  .hotline {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

.hotline__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--brand-700);
}

.hotline__body {
  flex: 1;
}

.hotline__title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--brand-950);
}

.hotline__text {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.5714;
  color: var(--ink-600);
}

.hotline__link {
  flex-shrink: 0;
  padding: 0.875rem 1.5rem;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Stellenanzeige */
.job {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .job {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.job__text {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.4286;
  color: var(--ink-600);
}

.job__meta {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.75rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 500;
  color: var(--brand-600);
}

.job .btn {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
}

/* Bildwechsel auf „Über uns“ */

/* Der Text braucht weniger Platz als die Bilder – deshalb keine zwei gleich
   breiten Spalten, sondern eine deutlich breitere Bildspalte. */
/* Text oben ausrichten statt mittig – so beginnt er direkt unter der
   Überschrift und hängt nicht in der Mitte neben dem Bild. */
.about-intro {
  align-items: start;
}

@media (min-width: 1024px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

.slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--brand-50);
  box-shadow: var(--shadow-card);
}

.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Langsames Heranfahren, solange das Bild steht – das nimmt dem Wechsel die
     Härte. Die Dauer bleibt unter dem Bildtakt, sonst bricht die Bewegung
     mittendrin ab. */
  transform: scale(1.05);
  transition: opacity 0.9s ease, transform 4.6s ease-out;
}

.slideshow__img.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Abdunklung nur unten, damit die Punkte auf hellen Bildern lesbar bleiben. */
.slideshow__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(to top, rgba(5, 34, 61, 0.45), transparent);
  pointer-events: none;
}

.slideshow__dots {
  position: absolute;
  inset: auto 0 1rem 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.slideshow__dot {
  height: 0.5rem;
  width: 0.5rem;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  transition: width 0.3s, background 0.3s;
}

.slideshow__dot.is-active {
  width: 1.5rem;
  background: #fff;
}

.slideshow__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__img {
    transform: none;
    transition: opacity 0.2s;
  }
}

/* Teamkarte – kompakte Zeile: rechteckiges Bild links, Text rechts */
.team-card {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 1rem;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.team-card__photo {
  display: block;
  width: 6.5rem;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: cover;
  /* Weit oben beschneiden: die Porträts sind quadratisch, im schmalen
     Kartenausschnitt braucht der Kopf sonst zu wenig Luft nach oben. */
  object-position: center 18%;
  background: var(--brand-50);
}

/* Solange kein Foto hinterlegt ist: Initialen statt eines fremden Gesichts. */
.team-card__photo--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--brand-50), var(--brand-100));
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-300);
}

.team-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: 1rem 1rem 1rem 0;
}

.team-card h3 {
  font-size: 15px;
  line-height: 1.3333;
}

.team-card__role {
  margin-top: 0.125rem;
  flex: 1;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--brand-600);
}

.team-card__contact {
  display: flex;
  margin-top: 0.75rem;
  flex-direction: column;
  gap: 0.25rem;
}

.team-card__line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 12px;
  line-height: 1.3333;
  color: var(--ink-600);
  transition: color 0.2s;
}

a.team-card__line:hover {
  color: var(--brand-700);
}

.team-card__line--empty {
  color: var(--ink-400);
}

.team-card__line .icon {
  flex-shrink: 0;
  color: var(--brand-400);
}

/* ---------- Objektkacheln (Seite "Über uns") ----------
   Je Haus eine Kachel: Titelbild, darunter die Adresse. Der Klick öffnet die
   Vollbildansicht mit den Fotos dieses Hauses. */
.objekt {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid var(--brand-100);
  background: #fff;
  padding: 0;
  text-align: left;
  cursor: zoom-in;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}

.objekt:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.objekt__buehne {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--brand-50);
}

.objekt__bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s;
}

.objekt:hover .objekt__bild {
  transform: scale(1.04);
}

/* Anzahl der Fotos – sagt vorab, was hinter der Kachel steckt. */
.objekt__anzahl {
  position: absolute;
  bottom: 0.625rem;
  right: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand-950) 80%, transparent);
  padding: 0.25rem 0.625rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 600;
  color: #fff;
}

.objekt__fuss {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.125rem 1.125rem;
}

.objekt__adresse {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 15px;
  line-height: 1.4667;
  font-weight: 600;
  color: var(--brand-950);
}

.objekt__adresse .icon {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--brand-600);
}

.objekt__zusatz {
  padding-left: 1.5rem; /* fluchtet mit der Adresse neben dem Symbol */
  font-size: 13px;
  line-height: 1.5385;
  color: var(--ink-600);
}

.objekt:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
}

/* ---------- Vollbildansicht ---------- */
.lightbox-offen {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 34, 61, 0.94);
}

.lightbox__schliessen {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: background-color 0.15s;
}

.lightbox__schliessen:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__inhalt {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 72rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox__rahmen {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.lightbox__bild {
  max-height: 72vh;
  max-width: 100%;
  border-radius: 0.75rem;
  object-fit: contain;
  box-shadow: var(--shadow-card-hover);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: all 0.15s;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__nav--prev {
  left: 0.5rem;
}

.lightbox__nav--next {
  right: 0.5rem;
}

.lightbox__adresse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
}

.lightbox__zaehler {
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.16);
  padding: 0.125rem 0.625rem;
  font-size: 12px;
  line-height: 1.3333;
  font-weight: 600;
  color: var(--brand-100);
}

.lightbox__nav:focus-visible,
.lightbox__schliessen:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Handy: kleinere Schaltflaechen, Bild darf mehr Hoehe nutzen. */
@media (max-width: 639px) {
  .lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
  }

  .lightbox__nav--prev {
    left: 0.375rem;
  }

  .lightbox__nav--next {
    right: 0.375rem;
  }

  .lightbox__adresse {
    font-size: 14px;
  }

  .lightbox {
    padding: 0.75rem;
  }

  .lightbox__bild {
    max-height: 66vh;
  }
}

/* Hinweis, wenn gerade keine Wohnung frei ist. Standardmäßig steht der
   Block auskommentiert in wohnungsangebote.html. */
.vermietet {
  border-radius: 1rem;
  background: linear-gradient(
    to bottom right,
    var(--brand-800),
    var(--brand-900) 60%,
    var(--brand-950)
  );
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .vermietet {
    padding: 3.5rem 3rem;
  }
}

.vermietet__titel {
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
}

@media (min-width: 640px) {
  .vermietet__titel {
    font-size: 30px;
  }
}

.vermietet__unter {
  margin-top: 0.75rem;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--accent-500);
}

.vermietet__text {
  margin-inline: auto;
  margin-top: 1.25rem;
  max-width: 40rem;
  font-size: 16px;
  line-height: 1.625;
  color: var(--brand-100);
}

.vermietet__cta {
  margin-top: 1.75rem;
}

/* ---------- Hilfsklassen ---------- */
.stack > * + * {
  margin-top: 1rem;
}
.stack-lg > * + * {
  margin-top: 2rem;
}
.stack-6 > * + * {
  margin-top: 1.5rem;
}
.text-center {
  text-align: center;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.max-w-3xl {
  max-width: 48rem;
  margin-inline: auto;
}
.max-w-2xl {
  max-width: 42rem;
}
.muted-text {
  color: var(--ink-600);
}