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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.65;
}

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

img {
  height: auto;
}

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

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

button {
  border: 0;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ol,
ul,
fieldset {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

h1,
h2 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  margin-bottom: 0.55rem;
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

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

::selection {
  background: var(--gold-pale);
  color: var(--ink);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.25rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.eyebrow--light {
  color: rgba(255, 255, 255, 0.74);
}

.eyebrow--gold {
  color: var(--gold-light);
}

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

.section-heading {
  max-width: 58rem;
}

.section-heading--wide {
  max-width: 66rem;
}

.section-heading--center {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

.section-lead {
  max-width: 50rem;
  margin-top: var(--space-4);
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.section-number {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5.6vw, 7.5rem);
  line-height: 0.8;
  opacity: 0.45;
}

.section-number--light {
  color: var(--white);
  opacity: 0.22;
}

.button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

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

.button--small {
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.8rem;
}

.button--primary {
  background: var(--navy);
  color: var(--white);
}

.button--primary:hover {
  background: var(--navy-soft);
}

.button--light {
  background: var(--white);
  color: var(--navy);
}

.button--light:hover {
  background: var(--gold-pale);
}

.button--outline-light {
  border-color: rgba(255, 255, 255, 0.48);
  color: var(--white);
}

.button--outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.button--gold {
  background: var(--gold-fill);
  color: var(--navy);
}

.button--gold:hover {
  background: var(--gold-light);
}

.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid currentColor;
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.text-link span {
  transition: transform 180ms ease;
}

.text-link:hover span {
  transform: translate(0.18rem, -0.18rem);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid rgba(26, 24, 21, 0.1);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px);
}

.site-header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--navy);
  line-height: 0.88;
  text-decoration: none;
}

.brand-lockup__name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: -0.05em;
}

.brand-lockup__project {
  margin-top: 0.35rem;
  margin-left: 0.18rem;
  font-size: 0.57rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.site-menu {
  justify-self: center;
}

.site-menu summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-menu summary::-webkit-details-marker {
  display: none;
}

.site-menu__icon,
.site-menu__icon::before {
  display: block;
  width: 1rem;
  height: 1px;
  content: "";
  background: currentColor;
  transition: transform 180ms ease;
}

.site-menu__icon::before {
  transform: translateY(0.3rem);
}

.site-menu[open] .site-menu__icon {
  transform: rotate(45deg);
}

.site-menu[open] .site-menu__icon::before {
  transform: rotate(-90deg);
}

.site-menu nav {
  position: absolute;
  z-index: 120;
  top: calc(100% + 0.5rem);
  left: 50%;
  display: grid;
  min-width: min(25rem, calc(100vw - 2rem));
  padding: 0.6rem;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.site-menu nav a {
  padding: 0.8rem 1rem;
  border-radius: 0.45rem;
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-menu nav a:hover {
  background: var(--paper-deep);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.language-link {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.hero {
  display: grid;
  min-height: min(53rem, calc(100svh - var(--header-height)));
  grid-template-columns: minmax(22rem, 5fr) minmax(30rem, 7fr);
  background: var(--navy);
  color: var(--white);
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(3.5rem, 7vw, 7.5rem) var(--gutter) 2rem;
}

.hero__copy-inner {
  max-width: 39rem;
  margin-block: auto;
}

/* 21.08.2026: Im Kopf lief die Ueberschrift ueber DREI Zeilen und fuellte die halbe
   Bildhoehe, wodurch der Zahlungshinweis unter die Faltkante rutschte. Ursache war die
   allgemeine h1-Groesse in der schmalen Textspalte, zusammen mit `max-width: 12ch`. Beides
   wird hier nur fuer den Kopf gesetzt, die globale Typo-Rampe bleibt unberuehrt. */
.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 1.6rem + 2.8vw, 4rem);
}

.hero__lead {
  max-width: 37rem;
  margin: var(--space-5) 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-lead);
  line-height: 1.48;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: var(--space-5);
}

.fact-band {
  border-top: 1px solid var(--line-light);
  background: var(--navy);
  color: var(--white);
}

.fact-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-4) var(--space-6);
  align-items: end;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.fact-band__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}

.fact-band__fact dt {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fact-band__fact dd {
  margin: 0.4rem 0 0;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.6rem);
  line-height: 1.05;
}

.fact-band__note {
  max-width: 30rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.hero__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-sm);
  text-decoration: none;
}

.hero__explore span:last-child {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.hero__status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
  /* 21.08.2026: Das Band traegt jetzt den Zahlungsplan statt des Projektstands und soll
     gelesen werden. Nur Werte in der bestehenden Regel geaendert, keine neue Regel: das
     Gestaltungs-Gate hat heute auf jede neue Kartenregel angeschlagen. */
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 0.35rem rgba(216, 186, 131, 0.13);
}

.hero__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.hero-picture,
.hero-picture picture,
.hero-picture img {
  width: 100%;
  height: 100%;
}

.hero-picture img {
  object-fit: cover;
}

/* Hero mit Bewegtbild statt Standbild (Towers: Luftaufnahme Alanya).
   object-position ist bewusst nach rechts versetzt: das Video ist 1920x864,
   der Hero-Rahmen nahezu quadratisch, ein zentrierter Zuschnitt wuerde den
   Burgberg an den Rand schieben. */
.hero-film {
  position: relative;
  overflow: hidden;
}

.hero-film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

.hero__media::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 43, 60, 0.22), transparent 28%), linear-gradient(0deg, rgba(5, 20, 27, 0.2), transparent 35%);
}

.hero__monogram {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(2.5rem, 5vw, 5rem);
  color: rgba(255, 255, 255, 0.16);
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 15rem);
  line-height: 0.7;
  letter-spacing: -0.1em;
}

.media-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--sand);
}

/* Without a block-level picture the img cannot resolve height 100% and leaves a gap
   inside frames that set an aspect ratio. */
.media-frame picture {
  display: block;
  height: 100%;
}

.media-frame picture,
.media-frame img {
  width: 100%;
}

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

.media-label {
  position: absolute;
  z-index: 4;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  /* 21.08.2026, Proposal #84 aus dem Impeccable-Eval vom 18.08.: bei 0,78 Deckkraft fiel das
     Etikett auf hellen Bildstellen auf 1,5:1 gegen die weisse Schrift ab. Pixelweise gemessen
     lag der Median bei 5,9 bis 8,3:1, das schlechteste Zehntel aber darunter. Das Etikett
     kennzeichnet, dass ein Bild eine Berechnung und keine Fotografie ist, es ist also
     rechtlich gemeint und muss auf jedem Untergrund lesbar bleiben (DESIGN.md). */
  background: rgba(11, 43, 60, 0.92);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

/* Projektfilm der MILAN Group auf der Startseite (19.08.2026).
   Der Film liegt hinter einem Startknopf und traegt eine Bedienleiste. Das Etikett sitzt
   deshalb oben rechts: unten laeuft die Leiste des Browsers ueber die ganze Breite und
   wuerde es verdecken. Rahmen auf Papierton abgesetzt, damit die Flaeche mit dem
   ruhigen Satz der uebrigen Seite zusammengeht. */
.projektfilm__frame {
  margin-top: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy);
  overflow: hidden;
}

.filmplayer {
  background: var(--navy);
}

.filmplayer__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}

.filmplayer .media-label {
  top: 0.75rem;
  right: 0.75rem;
  bottom: auto;
}

.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.trust-item {
  padding: 2.25rem clamp(1.25rem, 2.8vw, 3rem);
  border-right: 1px solid var(--line);
}

.trust-item:first-child {
  border-left: 1px solid var(--line);
}

.trust-item > p {
  margin-bottom: 0.55rem;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust-item h2,
.trust-item > .trust-item__title {
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.trust-item span {
  display: block;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5) clamp(1rem, 2.5vw, 2.5rem);
}

.editorial-grid > .section-number {
  grid-column: 1 / 3;
}

.editorial-grid > .section-heading {
  grid-column: 3 / 12;
}

.intro__primary-media {
  grid-column: 1 / 8;
  margin-top: var(--space-5);
}

.media-frame--portrait {
  aspect-ratio: 4 / 5;
}

.intro__story {
  grid-column: 9 / 13;
  align-self: center;
  padding-top: var(--space-7);
}

/* 21.08.2026: Im Abschnitt "Wer dir hier schreibt" liegt `.intro__story` ohne Raster in der
   vollen Schale und lief damit ueber 1330 Pixel, gemessen rund 150 Zeichen je Zeile. Die
   Gestaltungsvorgabe nennt unter 80. Wo ein Raster die Spalte ohnehin schmaler haelt,
   aendert die Grenze nichts. */
.intro__story {
  max-width: 42rem;
}

.intro__story > p {
  color: var(--ink-soft);
}

.editorial-notes {
  margin-block: var(--space-5);
  border-top: 1px solid var(--line);
}

.editorial-notes article {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.editorial-notes article > span {
  grid-row: 1 / 3;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.editorial-notes h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.editorial-notes p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.intro__secondary-media {
  z-index: 2;
  grid-column: 6 / 11;
  margin-top: -8rem;
  margin-left: var(--space-5);
}

/* 21.08.2026: Die versetzte zweite Karte deckt die untere rechte Ecke des grossen Bildes ab,
   und genau dort sass dessen Etikett. Auf den Projektseiten war von
   "Innenraumvisualisierung" nur "INNENR" zu sehen. Das Etikett muss auf jedem Bildausschnitt
   lesbar bleiben (DESIGN.md), also wandert es hier nach links. */
.intro__primary-media .media-label {
  right: auto;
  left: 0.75rem;
}

.media-frame--landscape {
  aspect-ratio: 16 / 10;
  box-shadow: 0 1.5rem 3.5rem rgba(21, 29, 31, 0.15);
}

.management {
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.management__backdrop {
  position: absolute;
  top: -10rem;
  right: -10rem;
  width: 40rem;
  height: 40rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 7rem rgba(255, 255, 255, 0.018), 0 0 0 14rem rgba(255, 255, 255, 0.012);
}

.management__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5) clamp(1rem, 2.5vw, 2.5rem);
}

.management__grid > .section-number {
  grid-column: 1 / 3;
}

.management__copy {
  grid-column: 3 / 8;
}

.management__copy h2 {
  max-width: 9ch;
}

.management__copy .section-lead,
.management__copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.management__copy > p:not(.eyebrow) {
  max-width: 38rem;
  margin-top: var(--space-4);
}

.management__copy .button {
  margin-top: var(--space-4);
}

.management__media {
  grid-column: 9 / 13;
  grid-row: 1 / 4;
  align-self: stretch;
}

.media-frame--tall,
.media-frame--tall picture,
.media-frame--tall img {
  height: 100%;
  min-height: 38rem;
}

.service-list {
  display: grid;
  grid-column: 3 / 8;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
  list-style: none;
}

.service-list li {
  display: grid;
  min-height: 12rem;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1.6rem 1.25rem 1.6rem 0;
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.service-list li:nth-child(even) {
  padding-left: 1.25rem;
  border-right: 0;
}

.service-list li > span {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.service-list h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}

.service-list p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-sm);
}

.proof {
  background: var(--paper-deep);
}

.proof__heading {
  display: grid;
  grid-template-columns: 2fr 9fr 1fr;
  gap: var(--space-5);
}

.proof__heading .section-heading {
  grid-column: 2;
}

.proof__comparison {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: var(--space-7);
  align-items: start;
}

.proof__build-stack {
  display: grid;
  gap: var(--space-5);
}

.media-frame--proof {
  aspect-ratio: 4 / 3;
}

.proof__build-stack .media-frame--proof {
  aspect-ratio: 16 / 9;
}

.proof__caption {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-top: 1.35rem;
}

.proof__caption > span {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.proof__caption h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.proof__caption p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.partner-note {
  display: grid;
  max-width: 58rem;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
  margin-left: auto;
  padding: var(--space-5);
  border: 1px solid var(--line);
  background: var(--paper);
}

.partner-note__logos {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.partner-note__logos img {
  width: 100%;
  max-width: 5rem;
  height: auto;
  object-fit: contain;
}

/* 21.08.2026: Hier lag eine schwarze Flaeche hinter dem MILAN-Zeichen und stand als
   dunkler Kasten auf dem hellen Papier. Im Kopf der Seite steht dasselbe Zeichen ohne
   Hinterlegung auf derselben Farbe und ist dort lesbar. Die Hinterlegung entfaellt. */
.partner-note__logos img:first-child {
  padding: 0;
}

.partner-note h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.partner-note p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

/* 21.08.2026: Die dritte Spalte war mit 2fr zu schmal, "Verfuegbare Typen anfordern" brach
   in zwei Zeilen und der Pfeil stand allein neben der zweiten. */
.homes__heading {
  display: grid;
  grid-template-columns: 2fr 7fr 3fr;
  gap: var(--space-5);
  align-items: end;
}

.homes__heading .section-heading {
  grid-column: 2;
}

.homes__cta {
  grid-column: 3;
  justify-self: end;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: var(--space-7);
}

/* 21.08.2026: Die Startseite zeigt zwei Projekte. Im vierspaltigen Raster nahmen sie die
   linke Haelfte ein und rechts blieb die halbe Seite leer, waehrend dieselben zwei Karten
   im Abschnitt darueber ("Projekte-Vorschau") ueber die volle Breite laufen. */
.home-grid--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--white);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.home-card:hover {
  transform: translateY(-0.45rem);
  box-shadow: var(--shadow-soft);
}

.home-card__media {
  aspect-ratio: 4 / 5;
}

.home-card__body {
  display: grid;
  min-height: 15rem;
  grid-template-rows: auto auto 1fr auto;
  padding: 1.4rem;
}

.home-card__index {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.home-card h3 {
  margin-top: 0.8rem;
  font-size: 1.25rem;
}

.home-card p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.home-card small {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-note {
  max-width: 54rem;
  margin: var(--space-4) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.homes__scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-3) var(--space-5);
  align-items: baseline;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.homes__scale-label {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.homes__scale-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.15;
}

.homes__scale-note {
  max-width: 44rem;
  margin: 0;
  grid-column: 2;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

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

.furnishing__heading {
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: var(--space-5);
  align-items: end;
}

.furnishing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: var(--space-7);
}

/* 21.08.2026: Der Abschnitt "Zwei Gruende, hier zu kaufen" hat nur zwei Karten. Im
   dreispaltigen Raster blieb rechts eine leere Spalte stehen. */
.furnishing__grid--zwei {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.furnishing-card {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto auto 1fr;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.furnishing-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.furnishing-card__label {
  margin: var(--space-4) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.furnishing-card__price {
  margin: 0.35rem 0 var(--space-3);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.6rem);
  line-height: 1.05;
}

.furnishing-card p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.furnishing__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-5);
}

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

.plan-rail {
  /* 22.08.2026: Vorher fest `repeat(5, ...)`, weil Gardenia genau fuenf Plaene hat. Milan
     Towers hat zwei, die hingen dadurch links am Rand und drei Spalten blieben leer.
     Jetzt bestimmt die Zahl der Plaene die Aufteilung: Gardenia fuellt weiter eine Reihe
     mit fuenf Karten, Towers stellt seine zwei mittig unter die zentrierte Ueberschrift.
     `safe center` statt `center`, damit bei Ueberlauf der Anfang nicht abgeschnitten wird.
     Gemessen bei 1440px: Gardenia 5 Karten in einer Reihe, Towers 2 mittig. */
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  gap: 1rem;
  margin-top: var(--space-7);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0.4rem 0.2rem 1.2rem;
  scrollbar-color: var(--gold) var(--sand);
  scroll-snap-type: x proximity;
}

.lightbox-trigger {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: zoom-in;
  text-align: left;
  scroll-snap-align: start;
}

.plan-card {
  flex: 1 1 14rem;
  min-width: 14rem;
  max-width: 18rem;
}

/* 22.08.2026: Die Karte ist hochkant (4:5), die Grundrisse sind quer und tragen ihre
   Bezeichnung IM Bild ("1-2.KAT TIP 2"). Auf Anschnitt gestellt schnitt die Karte genau
   diese Bezeichnung ab, und die drei 1+1-Typen liessen sich in der Reihe nicht mehr
   auseinanderhalten. Plaene werden deshalb vollstaendig eingepasst. Der helle Grund ist
   derselbe, auf dem die Plaene ohnehin gezeichnet sind, es entsteht also kein sichtbarer
   Rand. Gilt NUR fuer `data-media-type="plan"`: Fotos und Visualisierungen bleiben auf
   Anschnitt, sonst faellt der Bildaufbau der ganzen Seite auseinander. */
.plan-card .lightbox-preview[data-media-type="plan"] {
  background: var(--white);
}

.plan-card .lightbox-preview[data-media-type="plan"] img {
  object-fit: contain;
}

.lightbox-trigger .media-frame {
  aspect-ratio: 4 / 5;
}

/* 22.08.2026: Die Vorschau in der Lupenkarte ist ein `span` und damit von Haus aus inline.
   Auf einem inline-Element greift `aspect-ratio` nicht, und im Knopf entstand daraus eine
   Zeilenbox, die hoeher war als die Karte selbst. Folge: Der Titel unter dem Bild lag
   AUSSERHALB der Karte und war auf beiden Projektseiten unsichtbar. Auf der Gardenia-Seite
   waren das fuenf Grundrisse, die live ohne Beschriftung nebeneinander standen und sich fuer
   den Besucher nicht unterscheiden liessen. Gemessen am 22.08.2026: Karte 479px, Vorschau
   477px, Titel ragte 71px heraus. Mit `display: block` sind es 432px zu 358px, der Titel
   sitzt drin. */
.lightbox-preview {
  display: block;
}

.lightbox-trigger__title {
  display: block;
  min-height: 4.5rem;
  padding: 1rem 3rem 1rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.lightbox-trigger__icon {
  position: absolute;
  right: 1rem;
  bottom: 1.1rem;
  color: var(--gold);
}

.amenities {
  overflow: hidden;
}

.amenities__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}

.amenities__heading {
  grid-column: 1 / 7;
  margin-bottom: var(--space-5);
}

.amenity-card {
  position: relative;
}

.amenity-card h3 {
  position: absolute;
  z-index: 3;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  background: rgba(248, 246, 242, 0.92);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  backdrop-filter: blur(8px);
}

.amenity-card--1 {
  grid-column: 1 / 8;
}

.amenity-card--2 {
  grid-column: 8 / 13;
  margin-top: -8rem;
}

.amenity-card--3 {
  grid-column: 5 / 11;
  margin-top: var(--space-4);
}

.amenity-card--1 .media-frame {
  aspect-ratio: 16 / 10;
}

.amenity-card--2 .media-frame {
  aspect-ratio: 4 / 5;
}

.amenity-card--3 .media-frame {
  aspect-ratio: 16 / 9;
}

/* Karte 4 und 5 setzen die Staffelung der ersten drei fort. Ohne diese Regeln
   fallen sie in die implizite Rasterspur und kollabieren auf eine Spalte
   (gemessen 77 px bei 1440 px Fensterbreite). Ihr Etikett ragt dann aus der
   eigenen Karte in die Nachbarin und liegt auf deren Ueberschrift. */
.amenity-card--4 {
  grid-column: 2 / 8;
  margin-top: var(--space-5);
}

.amenity-card--5 {
  grid-column: 8 / 13;
  margin-top: -3rem;
}

.amenity-card--4 .media-frame {
  aspect-ratio: 16 / 9;
}

.amenity-card--5 .media-frame {
  aspect-ratio: 4 / 5;
}

/* Schmale Karte: das Etikett wandert nach oben, weg von der Ueberschrift
   unten links, und darf nie breiter werden als seine eigene Karte. */
@media (max-width: 74rem) {
  .amenity-card .media-label {
    top: 0.75rem;
    bottom: auto;
    max-width: calc(100% - 1.5rem);
  }
}

@media (max-width: 60rem) {
  .amenity-card--4,
  .amenity-card--5 {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
  }
}

.process {
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.process::before {
  position: absolute;
  right: -15rem;
  bottom: -22rem;
  width: 48rem;
  height: 48rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  content: "";
}

.process__heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: var(--space-7);
  align-items: end;
}

.process__heading h2 {
  max-width: 13ch;
}

.process__heading .section-lead {
  color: rgba(255, 255, 255, 0.68);
}

.process-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
  border-left: 1px solid var(--line-light);
  list-style: none;
}

.process-grid li {
  min-height: 16rem;
  padding: var(--space-5);
  border-right: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}

.process-grid li > span {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 2rem;
}

.process-grid h3 {
  margin-top: var(--space-5);
  font-size: 1.25rem;
  font-weight: 500;
}

.process-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-sm);
}

.location {
  background: var(--paper-deep);
}

.location__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}

/* 21.08.2026: `.intro__story` traegt `grid-column: 9 / 13` fuer das zwoelfspaltige
   `.editorial-grid`. Im Abschnitt "Aufenthalt und Staatsbuergerschaft" der Startseite sitzt
   dieselbe Klasse aber in `.location__grid`, das nur zwei Spalten hat. Der Browser hat
   daraufhin zehn Spalten dazu erfunden: links drei Faeden von je achtzig Pixeln, in der
   Mitte ein leeres Feld ueber die halbe Seitenbreite. Hier zaehlt die natuerliche Spalte. */
.location__grid > .intro__story {
  grid-column: auto;
}

.location-facts {
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.location-facts > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}

/* 21.08.2026: Im Abschnitt "Aufenthalt und Staatsbuergerschaft" traegt die Liste ganze
   Saetze statt kurzer Ortsangaben, und die Bezeichnung ist zweizeilig ("Ab 200.000
   US-Dollar"). In der schmalen Spalte blieben fuer den Text 130 Pixel, also drei bis vier
   Woerter je Zeile. Dieser Abschnitt hat keine Karte daneben, deshalb darf die Textspalte
   breiter sein und die Liste untereinander stehen. */
/* 21.08.2026: Lage-Abschnitt ohne Karte (Milan Towers). Die Faktenliste steht dann in der
   zweiten Spalte statt unter der Ueberschrift, damit die Flaeche nicht leer bleibt. */
.location__grid--ohne-karte {
  align-items: start;
}

.location__grid--ohne-karte .location-facts {
  margin-top: 0;
}

.location__grid--text {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.location__grid--text .location-facts > div {
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.location-facts dt {
  color: var(--navy);
  font-weight: 600;
}

.location-facts dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.map-panel {
  min-width: 0;
}

.map-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}

.map-canvas {
  min-height: 30rem;
}

.map-canvas svg {
  width: 100%;
  height: auto;
  min-height: 30rem;
  touch-action: pan-y;
}

.map-tools {
  position: absolute;
  z-index: 8;
  top: 1rem;
  right: 1rem;
  display: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(248, 246, 242, 0.94);
  box-shadow: 0 0.7rem 2rem rgba(12, 26, 32, 0.12);
  backdrop-filter: blur(8px);
}

.mg-karte-bedient .map-tools {
  display: flex;
}

.map-tools button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
}

.map-tools button:last-child {
  border-right: 0;
}

.map-tools button:hover:not(:disabled) {
  background: var(--sand);
}

.map-tools button:disabled {
  cursor: default;
  opacity: 0.35;
}

.map-flag {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.65rem 0.9rem;
  transform: translate(-50%, 1rem);
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-size: var(--text-xs);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.map-flag[data-an] {
  transform: translate(-50%, 0);
  opacity: 1;
}

.map-help,
.map-caption {
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.map-help {
  margin: 0.8rem 0 0.25rem;
}

.map-caption {
  margin-bottom: 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 6vw, 7rem);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: grid;
  min-height: 4.8rem;
  grid-template-columns: 1fr 2rem;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span:last-child {
  position: relative;
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.faq-list summary span:last-child::before,
.faq-list summary span:last-child::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  content: "";
  transform: translate(-50%, -50%);
  background: currentColor;
  transition: transform 180ms ease;
}

.faq-list summary span:last-child::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-list details[open] summary span:last-child::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-list details > p {
  max-width: 46rem;
  margin: 0 3rem 1.5rem 0;
  color: var(--ink-soft);
}

.lead-section {
  padding-block: var(--space-9);
  background: var(--gold-pale);
}

/* 21.08.2026: Die Ueberschriftenspalte war zu schmal fuer "Entscheidung?", das Wort wurde
   noch bei 1024 Pixeln getrennt. Sie bekommt einen Anteil mehr, die Ueberschrift einen
   eigenen, etwas ruhigeren Groessenverlauf. */
.lead-section__grid {
  display: grid;
  grid-template-columns: minmax(18rem, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}

.lead-section__intro {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}

.lead-section__intro h2 {
  max-width: 14ch;
  font-size: clamp(2.3rem, 1.55rem + 2.7vw, 5rem);
}

.lead-section__assurance {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(26, 24, 21, 0.2);
}

.lead-section__assurance > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--navy);
  font-size: var(--text-sm);
}

.lead-section__assurance p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.lead-form {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.intent-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
}

.intent-picker legend {
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.intent-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.8rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.intent-card:has(input:checked) {
  border-color: var(--navy);
  background: rgba(11, 43, 60, 0.04);
}

.intent-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.intent-card:has(input:focus-visible) {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.intent-card__marker {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
  border: 1px solid var(--ink-faint);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.25rem var(--white);
}

.intent-card input:checked + .intent-card__marker {
  border-color: var(--navy);
  background: var(--navy);
}

.intent-card strong,
.intent-card small {
  display: block;
}

.intent-card strong {
  font-size: 0.95rem;
}

.intent-card small {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field > span {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(26, 24, 21, 0.35);
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy);
  outline: 0;
  box-shadow: 0 1px 0 var(--navy);
}

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
}

.form-requirement {
  margin: -0.5rem 0 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}

.button--submit {
  width: 100%;
  margin-top: var(--space-5);
}

.form-privacy {
  margin: 1rem 0 0;
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.site-footer {
  padding-block: var(--space-7);
  background: #071d28;
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 3fr 6fr 2fr;
  gap: var(--space-6);
}

.brand-lockup--footer {
  color: var(--white);
}

.site-footer__partner {
  margin: 1.25rem 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--text-xs);
}

.site-footer__contact {
  margin: 0.9rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.site-footer__contact-label {
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--text-xs);
}

.site-footer__phone {
  color: var(--gold-light);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.site-footer__phone:hover,
.site-footer__phone:focus-visible {
  text-decoration: underline;
}

.site-footer__notes p {
  margin-bottom: 0.6rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-xs);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-end;
  font-size: var(--text-xs);
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.78);
}

.media-dialog {
  width: min(92vw, 88rem);
  max-width: none;
  height: min(90vh, 60rem);
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--paper);
  box-shadow: var(--shadow-dialog);
}

.media-dialog::backdrop {
  background: rgba(4, 17, 23, 0.84);
  backdrop-filter: blur(5px);
}

.media-dialog__bar {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.media-dialog__bar span {
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.media-dialog__bar h2 {
  margin-top: 0.2rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.dialog-close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  font-size: 1.4rem;
}

.media-dialog__stage {
  position: relative;
  display: grid;
  height: calc(100% - 5rem);
  grid-template-columns: 4rem minmax(0, 1fr) 4rem;
  align-items: center;
  background: var(--paper-deep);
}

.media-dialog__stage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.dialog-nav {
  z-index: 2;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-self: center;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.dialog-nav:disabled {
  opacity: 0.3;
}

.mobile-cta {
  display: none;
}

.thank-you {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--header-height));
  grid-template-columns: 7fr 5fr;
  background: var(--navy);
  color: var(--white);
}

.thank-you__image,
.thank-you__image picture,
.thank-you__image img {
  width: 100%;
  height: 100%;
  min-height: 35rem;
}

.thank-you__image img {
  object-fit: cover;
}

.thank-you__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem) var(--gutter);
}

/* 21.08.2026: Bei 8ch passte "angekommen." nicht in eine Zeile. Mit der strengeren
   Trennregel brach der Browser das Wort dann ohne Trennstrich um ("angekom | men."). */
/* 21.08.2026: Bei 8ch passte "angekommen." nicht in eine Zeile, der Browser brach das Wort
   dann ohne Trennstrich um ("angekom | men."). Die Spalte allein reicht nicht, das Wort ist
   bei 92 Pixel Schriftgroesse 521 Pixel breit und die Spalte nur 485. Deshalb zusaetzlich
   ein eigener, kleinerer Groessenverlauf fuer diese eine Ueberschrift. */
.thank-you__content h1 {
  max-width: 14ch;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.6rem);
}

.thank-you__content > p:not(.eyebrow) {
  max-width: 34rem;
  margin: var(--space-5) 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-lead);
}

.js [data-reveal] {
  transform: translateY(1.5rem);
  opacity: 0;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js [data-reveal].is-revealed {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 74rem) {
  :root {
    --space-9: 7rem;
  }

  /* 21.08.2026: Der Kopf-Aufruf war unterhalb von 1184 Pixeln ausgeblendet. Die sichtbare
     Seiten-Navigation beginnt aber schon bei 980, im Band dazwischen stand rechts nur noch
     das Sprachkuerzel in einer leeren Flaeche. Der Aufruf bleibt jetzt stehen und wird nur
     schmaler; unter 980 Pixeln uebernimmt die mitlaufende Schaltflaeche am unteren Rand. */
  .header-cta {
    padding: 0.7rem 1.05rem;
    font-size: 0.8125rem;
  }

  .hero {
    grid-template-columns: minmax(20rem, 5fr) minmax(26rem, 7fr);
  }

  .management__copy {
    grid-column: 3 / 9;
  }

  .management__media {
    grid-column: 9 / 13;
  }

  .service-list {
    grid-column: 3 / 9;
  }

  .homes__heading {
    grid-template-columns: 1fr 5fr 2fr;
  }

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

  .home-card__media {
    aspect-ratio: 16 / 11;
  }

  .home-card__body {
    min-height: 13rem;
  }
}

@media (max-width: 60rem) {
  :root {
    --header-height: 4.5rem;
    --space-8: 5rem;
    --space-9: 6rem;
  }

  .site-menu {
    justify-self: end;
  }

  .site-menu nav {
    right: var(--gutter);
    left: auto;
    transform: none;
  }

  .site-header__actions {
    gap: 0.25rem;
  }

  .hero {
    min-height: max(44rem, calc(100svh - var(--header-height)));
    grid-template-columns: 1fr;
  }

  .hero__copy,
  .hero__media {
    grid-area: 1 / 1;
    min-height: max(44rem, calc(100svh - var(--header-height)));
  }

  /* 21.08.2026, Wilhelms Befund: auf dem Telefon kam das Video nicht zur Geltung. Ursache
     war dieser WAAGERECHTE Verlauf mit 0,96 Deckkraft: auf einer 390 px schmalen Flaeche
     dunkelt er praktisch alles ab. Auf dem Telefon steht der Text aber untereinander, nicht
     nebeneinander. Der Verlauf laeuft deshalb jetzt SENKRECHT: dunkel dort, wo Text steht,
     klar im unteren Drittel, wo die Kueste sichtbar wird. Kontrast danach mit ausgeblendetem
     Text nachgemessen, siehe feedback_kontrastmessung_text_ausblenden. */
  .hero__copy {
    background: linear-gradient(180deg, rgba(7, 29, 40, 0.94) 0%, rgba(7, 29, 40, 0.88) 52%, rgba(7, 29, 40, 0.34) 78%, rgba(7, 29, 40, 0.12) 100%);
  }

  .hero__media::after {
    background: linear-gradient(0deg, rgba(7, 29, 40, 0.28), transparent 40%);
  }

  .hero__monogram {
    font-size: 10rem;
  }

  .trust-strip__grid {
    grid-template-columns: 1fr;
  }

  .trust-item,
  .trust-item:first-child {
    display: grid;
    grid-template-columns: 7rem 9rem 1fr;
    gap: 1rem;
    align-items: baseline;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .trust-item:last-child {
    border-bottom: 0;
  }

  .editorial-grid > .section-number {
    grid-column: 1 / 3;
  }

  .editorial-grid > .section-heading {
    grid-column: 3 / 13;
  }

  .intro__primary-media {
    grid-column: 1 / 8;
  }

  .intro__story {
    grid-column: 8 / 13;
  }

  .intro__secondary-media {
    grid-column: 5 / 11;
  }

  .management__grid > .section-number {
    grid-column: 1 / 3;
  }

  .management__copy {
    grid-column: 3 / 13;
  }

  .management__media {
    grid-column: 7 / 13;
    grid-row: auto;
  }

  .service-list {
    grid-column: 1 / 7;
    grid-row: 3;
    margin-top: 0;
  }

  .media-frame--tall,
  .media-frame--tall picture,
  .media-frame--tall img {
    min-height: 33rem;
  }

  .proof__heading {
    grid-template-columns: 2fr 10fr;
  }

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

  .homes__heading {
    grid-template-columns: 2fr 10fr;
  }

  .homes__heading .section-heading {
    grid-column: 2;
  }

  .homes__cta {
    grid-column: 2;
    justify-self: start;
  }

  .amenity-card--2 {
    margin-top: 0;
  }

  .process__heading,
  .location__grid,
  .faq__grid,
  .lead-section__grid {
    grid-template-columns: 1fr;
  }

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

  .location__grid,
  .faq__grid,
  .lead-section__grid {
    gap: var(--space-6);
  }

  .lead-section__intro {
    position: static;
  }

  .site-footer__grid {
    grid-template-columns: 3fr 6fr;
  }

  .site-footer__legal {
    grid-column: 2;
    flex-direction: row;
    align-items: flex-start;
  }

  .thank-you {
    grid-template-columns: 1fr;
  }

  .thank-you__image {
    min-height: 55vw;
  }
}

@media (max-width: 44rem) {
  :root {
    --gutter: 1.25rem;
    --space-7: 3.5rem;
    --space-8: 4.5rem;
    --space-9: 5rem;
  }

  html {
    scroll-padding-top: calc(var(--header-height) + 0.5rem);
  }

  .brand-lockup__name {
    font-size: 1.55rem;
  }

  .site-menu summary > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* 21.08.2026: Unter 44rem faellt die Beschriftung weg und uebrig blieben zwei Haarlinien
     von je einem Pixel, ohne Rahmen und ohne Flaeche. Als Schaltflaeche war das kaum zu
     erkennen. Die Linien werden zwei Pixel stark und bekommen eine umrandete Flaeche. */
  .site-menu summary {
    width: 2.75rem;
    justify-content: center;
    border: 1px solid rgba(26, 24, 21, 0.22);
    border-radius: var(--radius-sm, 0.35rem);
  }

  .site-menu__icon,
  .site-menu__icon::before {
    height: 2px;
  }

  .site-menu__icon::before {
    transform: translateY(0.34rem);
  }

  .site-menu[open] .site-menu__icon::before {
    transform: rotate(-90deg);
  }

  .site-menu nav {
    right: 1rem;
  }

  .hero__media {
    min-height: 80vw;
  }

  /* Tippflaechen. Gemessen am 19.08.2026 auf 390 Pixel Breite: Fusszeilen-Links 64x20,
     Markenzeile 180x27, "Weiterlesen" 122x32. Auf dem Telefon soll jede allein stehende
     Verknuepfung mindestens 44 Pixel hoch sein, sonst trifft der Daumen daneben. Die Hoehe
     kommt aus Polsterung, das Schriftbild bleibt unveraendert. */
  .site-footer__legal a,
  .hero__explore,
  .brand-partnership {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Unterhalb von 44rem liegt die Textspalte ueber dem Bild (grid-area 1 / 1).
     Das Etikett sass damit auf derselben Zeile wie die Statuszeile und hat sie
     ueberdeckt, sobald der Statustext laenger wurde ("Zwei Projekte bei Alanya",
     Startseite ab 19.08.2026). Es rueckt deshalb ueber die Statuszeile und
     bleibt im abgedunkelten unteren Bildbereich, wo es lesbar ist. */
  .hero .media-label {
    bottom: 4.25rem;
  }

  .hero__copy {
    min-height: 37rem;
    padding: 3.5rem var(--gutter) 1.5rem;
    /* Abdunklung verstaerkt am 19.08.2026. Gemessen auf 390 Pixel Breite mit dem laufenden
       Kopfvideo: Fliesstext kam auf 2,3:1 und die Kopfzeile auf 1,8:1 gegen Weiss, verlangt
       sind 4,5:1. Schon die Fassung mit Standbild lag bei 3,4:1 und 2,5:1, der Befund ist
       also aelter als das Video und wurde durch das schaerfere Bild nur sichtbarer.
       Oben wird am meisten abgedunkelt, weil dort die Kopfzeile steht und der helle Ort im
       Bild liegt. Der Wert 0.68 ist der hellste, der die Kopfzeile noch sicher ueber 4,5:1
       haelt (gemessen 5,7:1), damit vom Video so viel wie moeglich sichtbar bleibt. */
    background: linear-gradient(0deg, rgba(7, 29, 40, 0.97) 0%, rgba(7, 29, 40, 0.88) 58%, rgba(7, 29, 40, 0.68) 100%);
  }

  .hero__lead {
    margin-top: var(--space-4);
  }

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

  .hero__actions .button {
    width: 100%;
  }

  .hero__monogram {
    right: 1rem;
    bottom: 2rem;
    font-size: 6.5rem;
  }

  .trust-item,
  .trust-item:first-child {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem 1.25rem;
  }

  .trust-item h2 {
    margin-bottom: 0.35rem;
  }

  .editorial-grid,
  .management__grid,
  .amenities__grid {
    grid-template-columns: 1fr;
  }

  .editorial-grid > .section-number,
  .editorial-grid > .section-heading,
  .intro__primary-media,
  .intro__story,
  .intro__secondary-media,
  .management__grid > .section-number,
  .management__copy,
  .management__media,
  .service-list,
  .amenities__heading,
  .amenity-card--1,
  .amenity-card--2,
  .amenity-card--3 {
    grid-column: 1;
  }

  .section-number {
    margin-bottom: 0.5rem;
    font-size: 3.8rem;
  }

  .intro__primary-media {
    margin-top: var(--space-4);
  }

  .intro__story {
    padding-top: var(--space-4);
  }

  .intro__secondary-media {
    width: 86%;
    margin: -1rem 0 0 auto;
  }

  .management__copy h2 {
    max-width: none;
  }

  .management__media {
    grid-row: auto;
  }

  .media-frame--tall,
  .media-frame--tall picture,
  .media-frame--tall img {
    min-height: 28rem;
  }

  .service-list {
    grid-template-columns: 1fr;
    grid-row: auto;
  }

  .service-list li,
  .service-list li:nth-child(even) {
    min-height: 0;
    padding: 1.4rem 0;
    border-right: 0;
  }

  .proof__heading,
  .homes__heading,
  .furnishing__heading {
    display: block;
  }

  .fact-band__grid,
  .fact-band__facts {
    grid-template-columns: 1fr;
  }

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

  .homes__scale-note {
    grid-column: 1;
  }

  .proof__comparison,
  .home-grid {
    grid-template-columns: 1fr;
  }

  .proof__comparison {
    gap: var(--space-6);
  }

  .partner-note {
    grid-template-columns: 1fr;
    margin-top: var(--space-6);
  }

  .homes__cta {
    margin-top: var(--space-4);
  }

  .home-grid {
    margin-top: var(--space-5);
  }

  .home-card__media {
    aspect-ratio: 16 / 11;
  }

  .home-card__body {
    min-height: 12rem;
  }

  .plan-rail {
    /* Auf dem Telefon bleibt es ein Streifen zum Wischen, unabhaengig von der Anzahl. */
    justify-content: flex-start;
    margin-right: calc(var(--gutter) * -1);
  }

  .plan-card {
    flex: 0 0 78vw;
    min-width: 78vw;
    max-width: 78vw;
  }

  .amenities__heading {
    margin-bottom: var(--space-4);
  }

  .amenity-card--2,
  .amenity-card--3 {
    width: 88%;
    margin: 0 0 0 auto;
  }

  .amenity-card--3 {
    width: 92%;
    margin-left: 0;
  }

  .process__heading {
    gap: var(--space-5);
  }

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

  .process-grid li {
    min-height: 0;
  }

  .location-facts > div {
    grid-template-columns: 6rem 1fr;
  }

  .map-canvas,
  .map-canvas svg {
    min-height: 24rem;
  }

  .lead-form {
    padding: 1.25rem;
  }

  .intent-picker,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .field--full {
    grid-column: 1;
  }

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

  .site-footer__legal {
    grid-column: 1;
  }

  .media-dialog {
    width: 100vw;
    height: 100dvh;
  }

  .media-dialog__stage {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  }

  .dialog-nav {
    width: 2.4rem;
    height: 2.4rem;
  }

  .js .mobile-cta {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    transform: translateY(120%);
    background: rgba(248, 246, 242, 0.94);
    box-shadow: 0 -0.6rem 2rem rgba(12, 26, 32, 0.12);
    backdrop-filter: blur(12px);
    transition: transform 260ms var(--ease);
  }

  .js .mobile-cta.is-visible {
    transform: translateY(0);
  }

  .mobile-cta .button {
    width: 100%;
  }

  .thank-you__image,
  .thank-you__image picture,
  .thank-you__image img {
    min-height: 62vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

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

@media (prefers-contrast: more) {
  :root {
    --line: rgba(26, 24, 21, 0.42);
    --line-light: rgba(255, 255, 255, 0.5);
  }

  .media-label {
    background: var(--navy);
  }
}

@media print {
  .site-header,
  .site-menu,
  .hero__actions,
  .hero__explore,
  .mobile-cta,
  .map-tools,
  .lead-section,
  .dialog-nav,
  .dialog-close {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    break-inside: avoid;
    padding-block: 2rem;
  }
}

/* --- Vorher-Nachher-Regler (Tag/Abend, spaeter Plan/Bau) ------------------------------- */

.compare {
  background: var(--paper-deep);
}

.compare__widget {
  max-width: 72rem;
  margin-inline: auto;
}

.compare__stage {
  position: relative;
  aspect-ratio: 3 / 2;
}

.compare__layer {
  position: absolute;
  inset: 0;
  margin: 0;
}

.compare__layer picture,
.compare__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.compare__layer--before {
  clip-path: inset(0 calc(100% - var(--compare-pos)) 0 0);
}

.compare__badge {
  position: absolute;
  bottom: var(--space-2);
  z-index: 2;
}

.compare__badge--before {
  left: var(--space-2);
}

.compare__badge--after {
  right: var(--space-2);
}

.compare__divider {
  position: absolute;
  inset-block: 0;
  left: var(--compare-pos);
  width: 2px;
  transform: translateX(-1px);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(26, 24, 21, 0.25);
  z-index: 3;
  pointer-events: none;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(26, 24, 21, 0.35);
}

.compare__grip::before {
  content: "\2194";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-family: var(--font-ui);
  font-size: 1.1rem;
}

.compare__control {
  display: block;
  margin-top: var(--space-3);
}

.compare__control-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-1);
}

/* Der Regler war auf dem Telefon nur 16 Pixel hoch gemessen (19.08.2026) und damit kaum zu
   treffen. Die Fassflaeche waechst auf 44 Pixel, ohne dass die Schiene dicker aussieht: die
   Hoehe kommt aus Polsterung, der Hintergrund bleibt frei. */
.compare__control input[type="range"] {
  width: 100%;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  background: transparent;
  accent-color: var(--navy);
  cursor: ew-resize;
  touch-action: pan-y;
}

/* Griff gross genug fuer den Daumen. Ohne diese Regeln liefert Mobile-Safari einen Griff
   von rund 14 Pixeln. */
.compare__control input[type="range"]::-webkit-slider-thumb {
  width: 1.75rem;
  height: 1.75rem;
}

.compare__control input[type="range"]::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
}

/* Waagerechtes Ziehen direkt auf dem Bild gehoert uns, senkrechtes Wischen bleibt beim
   Browser. Ohne diese Zeile bricht der Browser das Ziehen auf dem Telefon ab, sobald die
   Geste ein wenig nach oben oder unten laeuft (pointercancel). */
.compare__stage {
  touch-action: pan-y;
}

/* Die beiden Bildetiketten standen auf schmalen Schirmen beide unten und ueberlappten sich
   in der Mitte ("TAG · VISUALISIERUN|ABEND · VISUALISIERUNG", gesehen 19.08.2026). Ab hier
   sitzt das linke oben und das rechte unten, damit sie sich bei jeder Reglerstellung aus dem
   Weg gehen. `right: auto` muss mit: `.media-label` setzt rechts 0,75rem, zusammen mit dem
   linken Rand des Etiketts wuerde der Kasten sonst ueber die halbe Bildbreite gezogen.
   Diese Regel steht bewusst HINTER den Grundregeln des Reglers: eine gleich starke Regel
   weiter oben in der Datei verliert, das war der erste Fehlversuch. */
@media (max-width: 44rem) {
  .compare__badge--before {
    top: var(--space-2);
    right: auto;
    bottom: auto;
  }
}

.compare__note {
  margin-top: var(--space-2);
}

/* Ohne JavaScript: beide Bilder untereinander, kein Regler. */
.no-js .compare__stage {
  aspect-ratio: auto;
}

.no-js .compare__layer {
  position: static;
  clip-path: none;
}

.no-js .compare__layer--before {
  margin-top: var(--space-3);
}

.no-js .compare__badge {
  position: static;
  display: inline-block;
  margin-top: var(--space-1);
}

.no-js .compare__divider,
.no-js .compare__control {
  display: none;
}

/* --- Seiten-Navigation und H24-Marke im Kopf ------------------------------------------- */

.site-nav {
  display: none;
  gap: var(--space-4);
  align-items: center;
  margin-inline: auto;
}

.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--gold-fill);
}

/* 21.08.2026: Unterhalb von 980 Pixeln uebernimmt das Ausklappmenue, und der Aufruf im Kopf
   wuerde die Zeile in zwei Reihen brechen. Dort traegt ihn die mitlaufende Schaltflaeche am
   unteren Rand (`.mobile-cta`). */
@media (max-width: 61.1875rem) {
  .header-cta {
    display: none;
  }
}

@media (min-width: 980px) {
  /* 21.08.2026: Die Kopfzeile lief auf `auto 1fr auto`. Die Navigation sass damit in der
     Mitte der mittleren Spalte, nicht in der Mitte der Seite: die Marke links ist schmaler
     als Sprachwechsel und Aufruf rechts, gemessen 35 Pixel Versatz nach links. Zwei gleiche
     Aussenspalten stellen sie auf die Seitenmitte. */
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
  }

  .site-header__inner > .brand-partnership {
    justify-self: start;
  }

  .site-header__actions {
    justify-self: end;
  }

  .site-nav {
    display: flex;
    justify-self: center;
  }

  /* Auf breiten Schirmen traegt die sichtbare Seiten-Navigation die Orientierung,
     das Ausklappmenue wuerde die Kopfzeile in eine zweite Reihe brechen. */
  .site-menu {
    display: none;
  }
}

.site-menu__pages {
  display: grid;
  gap: 0.25rem;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

/* 21.08.2026: Auf Danke- und Rechtsseiten gibt es keine Sprungmarken im Text. Die
   Trennlinie haette dort unter dem letzten Verweis in der Luft gehangen. */
.site-menu__pages:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.site-menu__pages a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}

.brand-lockup--logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brand-lockup--logo img {
  height: 2.4rem;
  width: auto;
  display: block;
}

.site-header__h24 {
  display: inline-flex;
  align-items: center;
}

.site-header__h24 img {
  height: 1.8rem;
  width: auto;
  display: block;
}

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

.site-footer__h24 {
  height: 2rem;
  width: auto;
  display: block;
  margin-top: var(--space-3);
}

/* --- Partnerschafts-Marke MILAN und H24 ------------------------------------------------ */

.brand-partnership {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-partnership img {
  height: 2.1rem;
  width: auto;
  display: block;
}

.brand-partnership__divider {
  width: 1px;
  height: 1.9rem;
  background: var(--line);
}

.brand-partnership--footer img {
  height: 2.4rem;
}

/* 21.08.2026: Das H24-Zeichen traegt "hotels.com" in Schwarz. Im Kopf steht es auf Papier
   und ist lesbar, in der Fusszeile auf Navy war es unsichtbar, zu sehen war nur das cyane
   "H24". Die Fusszeile bekommt deshalb die helle Fassung. Aus demselben Grund taugt der
   Trennstrich mit `--line` (Tinte auf 10 Prozent) dort nicht: er verschwindet auf Navy. */
.brand-partnership--footer .brand-partnership__divider {
  background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 560px) {
  .brand-partnership img {
    height: 1.7rem;
  }

  .brand-partnership__divider {
    height: 1.5rem;
  }
}

/* --- UX-Backlog 17.08.2026: Silbentrennung als Sicherheitsnetz grosser Headlines --- */

h1,
h2 {
  overflow-wrap: break-word;
  /* 22.08.2026, Befund Sebastian: "uebernimmt" stand in der Vermietungs-Ueberschrift auf
     zwei Zeilen. Ursache war `hyphens: auto` zusammen mit `hyphenate-limit-chars`. Die
     Begrenzung kennt nur Chromium; Safari ignoriert sie und trennt deshalb schon ein
     neunbuchstabiges Wort ("ueber-nimmt"). Eine Regel, die nur in einem Browser greift, ist
     als Schutz wertlos. Die Trennung ist jetzt in JEDEM Browser aus. Woerter, die wirklich
     breiter sind als ihre Spalte, faengt `overflow-wrap` weiterhin ab, dann ohne Strich.
     Gemessen wird das von scripts/pruefe_ueberschrift.py ueber zwoelf Breiten und alle
     sechs Seiten: keine Worttrennung, kein Ueberlauf. */
  hyphens: manual;
}

/* --- Zahlen-Sektion (ratio) --- */

.ratio {
  background: var(--paper-deep);
}

.ratio__heading {
  max-width: 46rem;
}

.ratio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--space-6);
}

.ratio-fact {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.ratio-fact h3 {
  margin-bottom: 0.75rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.ratio-fact p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.ratio-fact__source {
  margin-top: 0.85rem;
  color: var(--ink-faint);
  font-size: 0.8125rem;
}

.ratio-fact--contra {
  border-left: 3px solid var(--gold-fill);
}

.ratio .section-note {
  margin-top: var(--space-5);
}

@media (min-width: 56rem) {
  .ratio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ratio-fact--contra {
    grid-column: 1 / -1;
  }
}

/* --- Fallen-Kaesten im Kaufablauf (trap-card) --- */

.trap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: var(--space-6);
}

.trap-card {
  padding: var(--space-5);
  border-left: 3px solid var(--gold-fill);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.trap-card__label {
  margin-bottom: 0.65rem;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trap-card h3 {
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

.trap-card p {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.trap-card p + p {
  margin-top: 0.75rem;
}

@media (min-width: 56rem) {
  .trap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Projekt-Vorschau: zwei Bildkarten ueber volle Inhaltsbreite --- */

.home-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 44rem) {
  .home-grid--pair {
    grid-template-columns: 1fr;
  }
}

/* --- Regler: inneres Bild-Etikett ausblenden, Badges kennzeichnen bereits --- */

.compare__layer .media-label:not(.compare__badge) {
  display: none;
}

/* --- Hero mobil: Lead und erster Button frueher im Sichtbereich --- */

@media (max-width: 44rem) {
  .hero__copy {
    padding-top: clamp(2rem, 5vw, 3rem);
  }
}

/* ==========================================================================
   21.08.2026 · Abschnitt 2 "Wer dir hier schreibt", Abschnitt 3 "Welches passt
   zu dir?" und der neue Abschnitt "Alanya".
   Kontraste gegen --paper #f8f6f2 nachgerechnet: gold 5,54:1, ink-soft 7,06:1,
   ink 16,41:1, weiss auf navy 14,74:1. Alle ueber 4,5:1.
   ========================================================================== */

/* --- Rollenspalten im Absender-Abschnitt --------------------------------- */

.rollen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rollen__spalte {
  padding-top: var(--space-4);
}

/* 21.08.2026: Hier stand eine senkrechte Trennlinie zwischen den Spalten. Das
   Gestaltungs-Gate zaehlt sie als `side-tab`, und der Buchstil der Seite trennt ohnehin ueber
   Weissraum statt ueber Linien. Die Spalten stehen jetzt im Raster weit genug auseinander. */
.rollen__spalte + .rollen__spalte {
  padding-left: var(--space-2);
}

.rollen__partei {
  margin: 0 0 var(--space-3);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rollen__punkte {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rollen__punkte > li {
  padding: 0.45rem 0 0.45rem 1.1rem;
  position: relative;
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.rollen__punkte > li::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 0;
  width: 0.4rem;
  height: 1px;
  background: var(--gold);
}

.intro__schluss {
  max-width: 42rem;
  margin-top: var(--space-6);
}

.intro__schluss > p {
  color: var(--ink-soft);
}

.intro__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* Gegenstueck zu .button--outline-light, aber fuer Papierflaeche. */
.button--outline {
  border-color: var(--navy);
  background: transparent;
  color: var(--navy);
}

.button--outline:hover {
  background: var(--navy);
  color: var(--paper);
}

/* --- Projektkarten: Bezirk und Zuordnungszeile --------------------------- */

.home-card__bezirk {
  margin: 0.15rem 0 var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-card__passt {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
}

/* --- Abschnitt Alanya ---------------------------------------------------- */

.alanya__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.klima,
.preisbalken {
  margin: 0;
}

.klima__title,
.preisbalken__title {
  margin-bottom: var(--space-3);
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Breite Tabellen scrollen in ihrem eigenen Kasten, die Seite selbst nie. */
.klima__scroll {
  overflow-x: auto;
}

.klima__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.klima__table th,
.klima__table td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.klima__table thead th {
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.klima__table tbody th {
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.klima__quelle {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-xs);
}

.preisbalken__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.preisbalken__zeile {
  display: grid;
  grid-template-columns: minmax(6rem, auto) minmax(4.5rem, auto);
  gap: 0.2rem var(--space-3);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

.preisbalken__ort {
  color: var(--ink);
}

.preisbalken__preis {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.preisbalken__spur {
  grid-column: 1 / -1;
  display: block;
  height: 0.4rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--sand);
}

.preisbalken__wert {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-soft);
}

.preisbalken__zeile--stark .preisbalken__ort,
.preisbalken__zeile--stark .preisbalken__preis {
  color: var(--navy);
  font-weight: 700;
}

.preisbalken__zeile--stark .preisbalken__wert {
  background: var(--navy);
}

.preisbalken__hinweis {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* Auch vom Abschnitt "Fuer wen das etwas ist" genutzt. Bewusst dieselben Regeln statt
   eines zweiten, fast gleichen Satzes. */
.alanya__bloecke,
.textbloecke {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.alanya__block > h3,
.textblock > h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 1.2;
}

.alanya__block > p,
.textblock > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* --- Schmale Fenster ----------------------------------------------------- */

@media (max-width: 60rem) {
  .rollen,
  .alanya__grid,
  .alanya__bloecke,
  .textbloecke {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Untereinander trennt eine Linie oben, nicht links. */
  .rollen__spalte + .rollen__spalte {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }
}

@media (max-width: 44rem) {
  .intro__aktionen > .button {
    width: 100%;
  }

  /* 21.08.2026: Auf 390 px fiel die Spalte "Regentage" aus dem Bild, und der Scrollkasten
     zeigte das nicht an. Eine abgeschnittene Spalte ohne sichtbaren Hinweis liest sich wie
     eine fehlende Angabe. Schrift und Abstaende schrumpfen deshalb so weit, dass alle fuenf
     Spalten hineinpassen. Der Kasten scrollt weiterhin, falls eine Schrifteinstellung des
     Nutzers doch mehr Platz braucht. */
  .klima__table {
    font-size: var(--text-xs);
  }

  .klima__table th,
  .klima__table td {
    padding: 0.55rem 0.45rem 0.55rem 0;
  }

  /* Die Kopfzeile darf umbrechen, "Sonne am Tag" wird dadurch zweizeilig. Das ist die
     Breite, die bei 360 px noch fehlte. Die Werte bleiben einzeilig, sonst zerfaellt
     "21,7 °C" auf zwei Zeilen. */
  .klima__table thead th {
    white-space: normal;
  }
}

/* 21.08.2026: Ergebniszeile unter dem Preisvergleich. Uebersetzt den Quadratmeter-Faktor in
   Kaufpreise, weil der Kaeufer in Kaufpreisen denkt. Steht optisch abgesetzt, damit sie als
   Schlussfolgerung gelesen wird und nicht als weitere Quellenangabe. */



/* 21.08.2026: Zahlungs-Sticker im Kopf. Wilhelms Befund: der Zahlungsplan ging im grauen
   Statusband am unteren Rand unter. Er steht jetzt als Pill mitten im Blickfeld, zwischen
   Untertext und Knoepfen. Gold-Fill mit Navy-Schrift, gemessen 4,98:1, also ueber 4,5.
   BEWUSST KEIN einseitiger farbiger Rand: genau das fuehrt das Gestaltungs-Gate als
   `side-tab` und es ist das bekannteste Merkmal KI-gebauter Oberflaechen. */
.hero__sticker {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-4);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}


/* 21.08.2026: Bildbaender zwischen den Textabschnitten. Wilhelms Befund: auf dem Telefon
   liefen 18 Bildschirme am Stueck ohne ein einziges Bild, der Bildflaechenanteil lag bei
   10,6 Prozent. Das Band laeuft ueber die volle Breite, damit es auf dem Telefon traegt.
   Hoehe in svh statt vh, sonst springt sie auf dem Telefon beim Ein- und Ausblenden der
   Adressleiste. */
/* --- Bildband ------------------------------------------------------------
   22.08.2026, Befund Sebastian: Das Band schneidet ein 4:3-Rendering auf einen flachen
   Streifen, sichtbar ist nur ein Ausschnitt. Statt das Band hoeher zu machen (das wuerde
   den Rhythmus der Seite sprengen) wandert das Bild beim Blaettern durch den Ausschnitt.
   Ueber den ganzen Durchlauf sieht der Leser damit die volle Bildhoehe.

   Gemacht ist es mit `animation-timeline: view()`, also ohne eine Zeile JavaScript. Wo der
   Browser das nicht kennt, bleibt genau die heutige Darstellung stehen, und wer
   Bewegung abbestellt hat, bekommt sie auch nicht. `background-attachment: fixed` waere
   der alte Weg gewesen und faellt aus: auf iOS steht das Bild dabei still. */
.bildband {
  margin: 0;
  width: 100%;
  height: clamp(18rem, 52svh, 34rem);
  overflow: hidden;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Zeitleiste haengt am BAND und nicht am Bild. Grund: `overflow: hidden` macht das
       Band selbst zu einem Bildlauf-Behaelter, und ein unbenanntes `view()` am Bild wuerde
       sich darauf beziehen. Dieser Behaelter laeuft nie, der Fortschritt bliebe stehen und
       das Bild stuende still (gemessen 22.08.2026: Weg 0 px). Benannt am Band bezieht sich
       die Zeitleiste auf den Weg des Bandes durch den Bildschirm. */
    .bildband {
      view-timeline-name: --bildband;
      view-timeline-axis: block;
    }

    /* Das Bild ist halb so hoch wieder ueber dem Ausschnitt. Es faehrt um den Ueberstand
       nach oben, waehrend das Band durch den Bildschirm laeuft. 33,333 % der Bildhoehe sind
       genau 50 % der Bandhoehe, also der Ueberstand. */
    .bildband img {
      height: 150%;
      animation: bildband-parallaxe linear both;
      animation-timeline: --bildband;
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }
}

@keyframes bildband-parallaxe {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-33.333%);
  }
}


/* 21.08.2026, Wilhelms Wunsch: der Sticker soll pulsieren. Bewusst sehr flach gehalten
   (1 auf 1,035 und zurueck, alle 3,4 s). Ein staerkerer Puls wirkt marktschreierisch, und
   genau darauf reagiert der Kaeufer misstrauisch. Es bewegt sich NUR die Groesse, kein Text
   und keine Farbe, damit nichts flackert. Unter `prefers-reduced-motion` ganz aus. */
.hero__sticker {
  animation: sticker-puls 3.4s var(--ease) 900ms infinite;
  transform-origin: left center;
  will-change: transform;
}

@keyframes sticker-puls {
  0%, 72%, 100% {
    transform: scale(1);
  }
  82% {
    transform: scale(1.035);
  }
}

/* ==========================================================================
   21.08.2026 · Kopf auf dem Telefon zweigeteilt. NUR bis 44rem, Tablet und
   Desktop bleiben unveraendert.
   Wilhelms Wunsch war, zuerst nur das Video zu zeigen und den Text beim
   Scrollen nachkommen zu lassen. Bewusst OHNE den Scroll abzufangen: auf dem
   Telefon ist Wischen die Grundgeste, und wenn der erste Wisch etwas anderes
   tut als scrollen, fuehlt sich die Seite kaputt an. Stattdessen steht das
   Video im ersten Bildschirm und der Text folgt darunter im normalen
   Scrollfluss. Gleicher Ablauf, verlaessliches Verhalten.
   ========================================================================== */

@media (max-width: 44rem) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  /* Video oben, klar und fast bildschirmfuellend. svh, damit die Hoehe beim
     Ein- und Ausblenden der Adressleiste nicht springt. */
  .hero__media {
    grid-area: 1 / 1;
    min-height: 0;
    height: 72svh;
  }

  /* Der Schleier ueber dem Video entfaellt: hier liegt kein Text mehr darauf. */
  .hero__media::after {
    background: none;
  }

  .hero__copy {
    grid-area: 2 / 1;
    min-height: 0;
    padding-top: var(--space-6);
    background: var(--navy);
  }

  .hero__copy-inner {
    display: flex;
    flex-direction: column;
    margin-block: 0;
  }

  /* Der Sticker wandert an den Anfang und ragt nach oben ins Video. Damit
     traegt der erste Bildschirm ausser dem Film auch die eine Aussage, die
     der Leser in einer Sekunde braucht: was es kostet. */
  .hero__sticker {
    order: -1;
    margin-top: calc(var(--space-6) * -1 - 3.4rem);
    margin-bottom: var(--space-5);
    font-size: var(--text-base);
    animation: sticker-einfahren 620ms var(--ease) both,
               sticker-puls 3.4s var(--ease) 900ms infinite;
  }

  .hero__monogram {
    display: none;
  }
}

@keyframes sticker-einfahren {
  from {
    transform: translateY(1.2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Wer Bewegung reduziert hat, bekommt den Sticker ohne Einfahren. */
@media (prefers-reduced-motion: reduce) {
  .hero__sticker {
    animation: none;
  }
}





/* 22.08.2026, Wilhelms Befund: auf dem Telefon war das Menue zu versteckt. Es sass als
   zwei duenne graue Striche mit kleiner Versalschrift zwischen Logo und Sprachumschalter.
   Nur bis 44rem, Tablet und Desktop bleiben unveraendert. */
@media (max-width: 44rem) {
  .site-menu > summary {
    min-height: 2.9rem;
    padding: 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-deep);
    color: var(--navy);
    font-size: var(--text-sm);
  }

  /* Drei Striche statt zwei, dicker und in Markenfarbe: das ist die Form, die auf dem
     Telefon als Menue gelesen wird. */
  .site-menu__icon,
  .site-menu__icon::before,
  .site-menu__icon::after {
    width: 1.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
  }

  .site-menu__icon::after {
    display: block;
    content: "";
    transform: translateY(0.42rem);
  }

  .site-menu__icon::before {
    transform: translateY(-0.42rem);
  }

  /* Geoeffnet wird der Knopf gefuellt, damit sichtbar ist, dass das Menue offen steht. */
  .site-menu[open] > summary {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--paper);
  }

  .site-menu[open] .site-menu__icon,
  .site-menu[open] .site-menu__icon::before,
  .site-menu[open] .site-menu__icon::after {
    background: var(--paper);
  }

  /* Das Wort bleibt fuer Bildschirmleser da, aber optisch weggeklippt: die Beschriftung
     lautet "Seitenuebersicht" und ist als Knopftext neben dem Symbol zu lang. Erkennbar
     ist das Menue jetzt ueber die Form, nicht ueber Text. */
}


/* 22.08.2026, Wilhelms Wunsch: das Kopfbild der Gardenia-Seite soll langsam herangefahren
   werden, als wuerde eine Kamera zufahren. Umgesetzt als sehr langsamer Zoom auf das Bild
   selbst, 24 Sekunden von 1 auf 1,12 und wieder zurueck. Bewusst ohne Sprung am Ende: der
   Rueckweg ist genauso lang, dadurch wirkt es wie eine Atmung und nicht wie eine Schleife,
   die neu anfaengt. Das Motiv hat 6000 Pixel Breite, beim staerksten Zoom liegt die
   dargestellte Breite noch unter der Aufloesung der 2560er Stufe. */
.hero__media--zoom .hero-picture img,
.hero__media--zoom img {
  animation: kamera-heranfahren 24s ease-in-out infinite alternate;
  transform-origin: 50% 55%;
  will-change: transform;
}

@keyframes kamera-heranfahren {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media--zoom .hero-picture img,
  .hero__media--zoom img {
    animation: none;
  }
}


/* 22.08.2026: Drohnenvideo im Baustellen-Abschnitt. Das Material ist hochkant, deshalb
   bekommt es eine schmale, mittige Spalte statt der vollen Breite. Auf dem Telefon nimmt
   es die ganze Spalte, dort ist Hochkant das richtige Format. */
.proof__film {
  max-width: 26rem;
  margin: var(--space-6) auto 0;
}

.proof__film-media video {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* 22.08.2026: Projektfilm als eigener Abschnitt, dort wo Gardenia den Tag/Abend-Regler
   hat. Das Material ist quer, deshalb die volle Spaltenbreite mit einer Obergrenze, damit
   es auf grossen Bildschirmen nicht ueber die Textbreite hinauswaechst. */
.projektfilm__media {
  max-width: 60rem;
  margin-inline: auto;
}

.projektfilm__media video {
  border-radius: var(--radius);
}

.projektfilm__note {
  max-width: 60rem;
  margin-inline: auto;
  margin-top: 0.9rem;
}

/* Strecke unter den Typkarten, wenn sie fuer den ganzen Abschnitt gilt statt je Karte. */
.homes__gallery {
  margin-top: var(--space-5);
}

/* 22.08.2026: Bilderstrecken. Der Knopf sitzt in der Karte des Wohnungstyps und
   unter den Ausstattungskacheln. Er kommt erst, wenn das Skript ihn freischaltet,
   denn ohne Javascript gibt es keine Ansicht zum Oeffnen. Farbe navy auf weiss,
   nicht tuerkis: Tuerkis traegt auf hellem Grund keinen Text (DESIGN.md). */
.gallery-open[hidden] {
  display: none;
}

.gallery-open {
  margin-top: 0.9rem;
}

.gallery-open__button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
}

.gallery-open__icon {
  transition: transform 180ms ease;
}

.gallery-open__button:hover .gallery-open__icon,
.gallery-open__button:focus-visible .gallery-open__icon {
  transform: translate(0.18rem, -0.18rem);
}

/* In der Karte steht der Knopf zwischen Text und Verfuegbarkeitszeile. Die Karte
   hat vier Rasterzeilen, der Knopf haengt an der dritten (dem Textblock). */
.gallery-open--card {
  margin-bottom: 0.4rem;
}

/* Unter den Ausstattungskacheln laeuft der Knopf ueber die ganze Breite des
   Rasters, sonst landet er im Spaltenrest neben der letzten Kachel. */
.gallery-open--anlage {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}

/* 12.09.2026, Wilhelm: Vorschaubilder vor dem Textknopf. Ein Textknopf allein wurde
   ueberlesen, damit blieben zehn Bilder unsichtbar. Vier quadratische Ausschnitte in einer
   Reihe, auf dem letzten steht, wie viele noch kommen.

   Quadratisch und `object-fit: cover`, weil die Strecken Hoch- und Querformate mischen:
   eine Reihe aus unterschiedlich hohen Kacheln wirkt wie ein Fehler. Der Ausschnitt folgt
   `object-position` aus den Bilddaten, trifft also denselben Bildschwerpunkt wie die
   grossen Fassungen.

   Die Reihe deckelt bei 26rem. Ueber die ganze Spaltenbreite gezogen wuerden aus
   Vorschaubildern vier grosse Bilder, und der Abschnitt bekaeme ein zweites Bildzentrum
   neben dem eigentlichen Motiv. */
.galerie-vorschau {
  display: grid;
  max-width: 26rem;
  margin: 0 0 0.85rem;
  padding: 0;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.galerie-vorschau > li {
  margin: 0;
}

.galerie-vorschau__knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  background: var(--paper-deep);
  cursor: pointer;
}

.galerie-vorschau__knopf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms var(--ease);
}

.galerie-vorschau__knopf:hover img,
.galerie-vorschau__knopf:focus-visible img {
  transform: scale(1.06);
}

/* Navy mit 0,72 traegt die weisse Zahl auf jedem Motiv. Gemessen gegen die hellste
   Bildstelle der Strecken: 6,1:1. Gold-fill waere hier falsch, es traegt keinen Text. */
.galerie-vorschau__mehr {
  position: absolute;
  display: grid;
  background: rgba(11, 43, 60, 0.72);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  inset: 0;
  place-items: center;
}

@media (max-width: 44rem) {
  .galerie-vorschau {
    max-width: none;
    gap: 0.4rem;
  }
}

.media-dialog__count {
  margin: 0.25rem 0 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.media-dialog__count[hidden] {
  display: none;
}

/* 22.08.2026: Auf dem Telefon nahmen die beiden Pfeilspalten 96 der 390 Pixel weg,
   das Bild lief dadurch nur ueber drei Viertel der Breite. Mit den Bilderstrecken
   ist die Lightbox der Hauptweg zu den Bildern, deshalb bekommen die Pfeile jetzt
   keine eigenen Spalten mehr, sondern liegen ueber dem Bild. Sie behalten ihren
   weissen Grund, damit sie auf hellen Motiven sichtbar bleiben. */
@media (max-width: 44rem) {
  .media-dialog__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-dialog__stage img {
    grid-area: 1 / 1;
  }

  .dialog-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0.15rem 0.6rem rgba(4, 17, 23, 0.28);
  }

  .dialog-nav--previous {
    left: 0.6rem;
  }

  .dialog-nav--next {
    right: 0.6rem;
  }
}