/* ==========================================================================
   STAYS Verwaltungs GmbH · stays-bodensee.de
   Grundgestaltung (funktioniert auch ganz ohne Bewegung / ohne JS).
   Bewegung kommt aus stays-motion.css + js/stays.js.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Amble'; src: url('../fonts/amble-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amble'; src: url('../fonts/amble-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amble'; src: url('../fonts/amble-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Amble'; src: url('../fonts/amble-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Token ---------- */
:root {
  --anthrazit:       #53565A;
  --greige:          #BABBB1;
  --putz:            #F4F2EC;
  --putz-2:          #EAE7DF;
  --tinte:           #2F3235;
  --tinte-tief:      #24272A;
  --nacht:           #1C1F22;
  --greige-text:     #62635C;
  --greige-hell:     #D5D6CE;
  --hairline:        #D9D6CC;
  --hairline-dunkel: #6B6E72;

  /* Markenakzent: Ziegel (sparsam) */
  --akzent:          #A8654A;
  --akzent-dunkel:   #93553D;
  --akzent-text:     #955640;
  --akzent-hell:     #D49B82;
  --akzent-zart:     rgba(168, 101, 74, 0.09);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-text: 'Amble', 'Segoe UI', Helvetica, Arial, sans-serif;
  --sperrung: 0.16em;

  --rand: clamp(1.25rem, 5vw, 6rem);
  --spalte-max: 86rem;
  --abstand: clamp(5rem, 11vh, 9rem);
  --federn: cubic-bezier(0.16, 1, 0.3, 1);
  --dauer-reveal: 1.1s;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 6rem; }
main:focus, section:focus { outline: none; }
body {
  margin: 0; font-family: var(--font-text); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.65; color: var(--tinte); background: var(--putz);
  overflow-x: hidden;
}
body.nav-offen { overflow: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 460; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); letter-spacing: -0.012em; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.18; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 420; color: var(--akzent-text); }
.abschnitt--dunkel h2 em, .abschnitt--dunkel h3 em { color: var(--akzent-hell); }
p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.spiegel { max-width: var(--spalte-max); margin-inline: auto; padding-inline: var(--rand); }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 400; background: var(--tinte); color: var(--putz); padding: 0.75rem 1.25rem; }
.skip-link:focus { left: 0; }
::selection { background: var(--akzent); color: var(--putz); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.abschnitt--dunkel :focus-visible, .zahlenband :focus-visible, .fuss-kern :focus-visible, .nav-mobil :focus-visible { outline-color: var(--akzent-hell); }

.klein { font-size: 0.85rem; color: var(--greige-text); line-height: 1.55; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; }
.kicker {
  font-size: 0.72rem; letter-spacing: var(--sperrung); text-transform: uppercase;
  color: var(--greige-text); margin: 0 0 0.5rem; font-weight: 700;
}
.kicker--akzent { color: var(--akzent-text); }
.kicker--rechts { text-align: right; }
.textlink {
  font-weight: 700; text-decoration: none; color: var(--tinte);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 0.35s var(--federn); padding-bottom: 2px;
}
.textlink:hover { background-size: 30% 1px; }
.abschnitt--dunkel .textlink { color: var(--putz); }
.pfeil { display: inline-block; transition: transform 0.35s var(--federn); }
a:hover .pfeil { transform: translateX(6px); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-text); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.9rem; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; background: none;
  transition: transform 0.4s var(--federn), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.knopf--akzent { background: var(--akzent-dunkel); color: #FBF6F2; }
.knopf--akzent:hover { background: #7E4733; box-shadow: 0 14px 40px rgba(126,71,51,0.32); }
.knopf--rand { border-color: var(--anthrazit); color: var(--tinte); }
.knopf--rand:hover { background: var(--tinte); color: var(--putz); border-color: var(--tinte); }
.abschnitt--dunkel .knopf--rand, .knopf--rand-hell { border-color: rgba(244,242,236,0.55); color: var(--putz); }
.abschnitt--dunkel .knopf--rand:hover, .knopf--rand-hell:hover { background: var(--putz); color: var(--tinte); border-color: var(--putz); }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.25rem; }
.knopfzeile--mitte { justify-content: center; }

/* ==========================================================================
   KOPFZEILE + MOBILES MENÜ
   ========================================================================== */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  transition: transform 0.5s var(--federn), background 0.35s ease, box-shadow 0.35s ease;
}
.kopf.versteckt { transform: translateY(-110%); }
.kopf.versteckt:focus-within { transform: none; }
.kopf.fest {
  background: rgba(244, 242, 236, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(47,50,53,0.08);
}
.lauflinie { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.lauflinie span { display: block; height: 100%; width: 100%; background: var(--akzent); transform-origin: 0 50%; transform: scaleX(0); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.75rem; }
.marke { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--tinte); }
.marke img { width: clamp(44px, 4.4vw, 54px); height: auto; }
.marke-text { display: grid; line-height: 1.15; }
.marke-text b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.01em; }
.marke-text small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige-text); }
.nav-gross { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 2rem); }
.nav-gross a:not(.knopf) {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--tinte); position: relative; padding-block: 0.4rem;
}
.nav-gross a:not(.knopf)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--akzent); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.4s var(--federn);
}
.nav-gross a:not(.knopf):hover::after, .nav-gross a:not(.knopf)[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-gross a:not(.knopf)[aria-current="page"] { color: var(--akzent-text); }
.nav-gross .knopf[aria-current="page"] { background: var(--tinte); }
.nav-gross .knopf[aria-current="page"]::after { display: none; }
.nav-gross .knopf { padding: 0.65rem 1.35rem; }

.nav-toggle {
  display: none; position: relative; z-index: 140;
  width: 46px; height: 46px; border: 1px solid var(--tinte); border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--tinte); padding: 0;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--tinte);
  transition: transform 0.4s var(--federn), top 0.4s var(--federn), background 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 26px; }
body.nav-offen .nav-toggle { border-color: var(--putz); }
body.nav-offen .nav-toggle span { background: var(--putz); top: 22px; }
body.nav-offen .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
body.nav-offen .nav-toggle span:nth-child(2) { transform: rotate(-45deg); }
.nav-mobil {
  position: fixed; inset: 0; z-index: 130; background: var(--tinte-tief);
  display: grid; align-content: center; align-content: safe center; gap: 3rem; padding: var(--rand);
  padding-top: max(5.5rem, var(--rand)); overflow-y: auto;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.65s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.65s;
}
body.nav-offen .nav-mobil { clip-path: inset(0); visibility: visible; transition-delay: 0s, 0s; }
.nav-mobil nav { display: grid; gap: 0.3rem; }
.nav-mobil nav a {
  font-family: var(--font-display); font-size: clamp(1.6rem, min(8vw, 7svh), 3.2rem);
  color: var(--putz); text-decoration: none; line-height: 1.22; width: fit-content;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.6s var(--federn), color 0.3s ease;
}
.nav-mobil nav a:hover, .nav-mobil nav a[aria-current="page"] { color: var(--akzent-hell); font-style: italic; }
body.nav-offen .nav-mobil nav a { opacity: 1; transform: none; transition-delay: calc(0.25s + var(--i) * 0.06s); }
@media (max-height: 30rem) { .nav-mobil { gap: 1.5rem; } }
.nav-mobil-fuss { color: var(--greige-hell); font-size: 0.85rem; line-height: 1.7; }
.nav-mobil-fuss a { color: var(--putz); text-decoration: none; }
/* Kopfzeile mit dem X über dem offenen Menü */
body.nav-offen .kopf { z-index: 135; transform: none; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.nav-offen .kopf .marke { color: var(--putz); }
body.nav-offen .kopf .marke small { color: var(--greige-hell); }
body.nav-offen .kopf .marke img { content: url("../img/logo-stays-greige.svg"); }

/* ==========================================================================
   AUFTAKT (Startseite) · Editorial-Split mit Diashow
   ========================================================================== */
.auftakt { position: relative; background: var(--putz); overflow: hidden; }
.auftakt-raster {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  min-height: min(92vh, 62rem); min-height: min(92svh, 62rem);
  padding-top: clamp(6.5rem, 13vh, 8.5rem); padding-bottom: clamp(5rem, 10vh, 7rem);
}
.auftakt-adresse {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; letter-spacing: var(--sperrung); text-transform: uppercase;
  font-weight: 700; color: var(--akzent-text); margin: 0 0 1.4rem;
}
.auftakt-adresse::before { content: ""; width: 2.6rem; height: 1px; background: var(--akzent); flex: none; }
.auftakt-titel { font-size: clamp(2.5rem, 5.4vw, 4.9rem); font-weight: 420; letter-spacing: -0.015em; line-height: 1.05; }
.maske { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.maske > span { display: inline-block; transform: translateY(115%); }
.auftakt-lead { margin-top: 1.6rem; max-width: 48ch; }
.auftakt-fakten {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--hairline); font-size: 0.85rem; color: var(--greige-text);
}
.auftakt-fakten b { color: var(--tinte); font-weight: 700; }
.auftakt-bild { position: relative; }
.diashow {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4 / 5; max-height: min(74vh, 56rem); width: 100%;
  background: var(--putz-2); isolation: isolate;
}
.dia { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.dia.aktiv { opacity: 1; }
.dia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.dia.aktiv img { animation: 9.5s ease-out forwards; }
.dia[data-kb="a"].aktiv img { animation-name: kenburns-a; }
.dia[data-kb="b"].aktiv img { animation-name: kenburns-b; }
@keyframes kenburns-a { from { transform: scale(1.02) translate(0.5%, 0.5%); } to { transform: scale(1.12) translate(-0.8%, -1%); } }
@keyframes kenburns-b { from { transform: scale(1.14) translate(-0.8%, -0.5%); } to { transform: scale(1.03) translate(0.5%, 0.8%); } }
.dia figcaption { position: absolute; left: -9999px; }
.auftakt-dial { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
.dia-text { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--greige-text); margin: 0; transition: opacity 0.5s ease; min-height: 3.3em; }
.dia-steuer { display: inline-flex; align-items: center; gap: 0.9rem; flex: none; }
.dia-pause { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--tinte); }
.dia-pause span { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.dia-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.dia-pause:hover { border-color: var(--anthrazit); }
.diashow.pausiert .dia.aktiv img { animation-play-state: paused; }
.diashow.pausiert ~ .auftakt-dial .dia-punkte b.aktiv::after, .auftakt-bild:has(.pausiert) .dia-punkte b.aktiv::after { animation-play-state: paused; }
.dia-punkte { display: inline-flex; gap: 0.45rem; flex: none; }
.dia-punkte b { width: 26px; height: 2px; background: var(--hairline); border-radius: 2px; position: relative; display: block; overflow: hidden; }
.dia-punkte b::after { content: ""; position: absolute; inset: 0; background: var(--akzent); transform: scaleX(0); transform-origin: 0 50%; }
.dia-punkte b.aktiv::after { animation: dia-lauf 6.5s linear forwards; }
.dia-punkte b.war::after { transform: scaleX(1); }
@keyframes dia-lauf { to { transform: scaleX(1); } }
.auftakt-bild::before {
  content: ""; position: absolute; inset: -14px 14px 46px -14px;
  border: 1px solid var(--akzent); border-radius: 8px; opacity: 0.4; pointer-events: none;
}
.dia-chip {
  position: absolute; top: 1rem; left: 1rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--putz); background: rgba(28,31,34,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.55rem 1rem; border-radius: 999px; pointer-events: none;
}
.dia-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-hell); animation: chip-puls 2.4s ease-out infinite; }
@keyframes chip-puls {
  0% { box-shadow: 0 0 0 0 rgba(212,155,130,0.7); }
  70% { box-shadow: 0 0 0 9px rgba(212,155,130,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,155,130,0); }
}
@media (max-width: 60rem) {
  .auftakt-raster { grid-template-columns: 1fr; min-height: 0; padding-top: 7rem; }
  .diashow { aspect-ratio: 4 / 5; max-height: 62vh; }
  .auftakt-bild::before { display: none; }
}

/* Wellen (Bodensee-Signatur) */
.wellen { position: relative; height: clamp(52px, 9vw, 110px); background: var(--putz); pointer-events: none; overflow: hidden; }
.wellen-schicht { position: absolute; inset: 0; display: flex; width: 200%; }
.wellen-schicht svg { width: 50%; height: 100%; flex: none; }
.wellen-schicht--hinten svg path { fill: rgba(36,39,42,0.35); }
.wellen-schicht--vorn svg path { fill: var(--tinte-tief); }
.wellen-schicht--hinten { animation: woge 26s linear infinite; }
.wellen-schicht--vorn { animation: woge 17s linear infinite reverse; }
@keyframes woge { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   SEITENKOPF (Unterseiten)
   ========================================================================== */
.seitenkopf { padding-top: clamp(8rem, 18vh, 12rem); padding-bottom: clamp(3.5rem, 8vh, 6rem); background: var(--putz); }
.seitenkopf-titel { font-size: clamp(2.4rem, 5.6vw, 5.3rem); font-weight: 420; letter-spacing: -0.016em; line-height: 1.04; max-width: 17em; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 24rem) { .seitenkopf-status { letter-spacing: 0.06em; padding-inline: 0.85rem; } }
.seitenkopf-fuss {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--hairline);
}
.seitenkopf-fuss .lead { grid-column: 2; margin: 0; max-width: 54ch; }
.seitenkopf-fuss .knopfzeile { grid-column: 2; margin-top: 0.5rem; }
.seitenkopf-status {
  display: inline-flex; align-items: center; gap: 0.55rem; align-self: start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--akzent-text); border: 1px solid var(--akzent); border-radius: 999px; padding: 0.5rem 1rem; width: fit-content;
}
.seitenkopf-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.seitenkopf-bild { margin-top: clamp(3rem, 7vw, 5rem); }
.seitenkopf-bild .parallax-rahmen { aspect-ratio: 16 / 8; }
.seitenkopf-bild .parallax-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-bild figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--greige-text); }
@media (max-width: 54rem) {
  .seitenkopf-fuss { grid-template-columns: 1fr; }
  .seitenkopf-fuss .lead, .seitenkopf-fuss .knopfzeile { grid-column: 1; }
  .seitenkopf-bild .parallax-rahmen { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   ZAHLENBAND
   ========================================================================== */
.zahlenband { background: var(--tinte-tief); color: var(--putz); padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.zahlen li { border-left: 1px solid var(--hairline-dunkel); padding-left: clamp(1rem, 2vw, 1.75rem); }
.zahlen b {
  display: block; font-family: var(--font-display); font-weight: 420;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; color: var(--akzent-hell);
}
.zahlen span { font-size: 0.85rem; color: var(--greige-hell); line-height: 1.5; display: block; max-width: 24ch; }
@media (max-width: 54rem) { .zahlen { grid-template-columns: 1fr 1fr; row-gap: 2rem; } }

/* ==========================================================================
   ABSCHNITTE
   ========================================================================== */
.abschnitt { padding-block: var(--abstand); position: relative; overflow: clip; }
.abschnitt--flaeche { background: var(--putz-2); }
.abschnitt--dunkel { background: var(--tinte); color: var(--putz); }
.abschnitt--dunkel p { color: rgba(244,242,236,0.88); }
.abschnitt--dunkel .kicker { color: var(--akzent-hell); }
.abschnitt--dunkel .kicker--rechts { color: var(--greige-hell); }
.abschnitt--dunkel .klein { color: var(--greige-hell); }
.abschnitt--knapp { padding-block: clamp(4rem, 9vh, 6.5rem); }
.kopfzeile-abschnitt {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  border-top: 1px solid var(--hairline); padding-top: 1.1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.abschnitt--dunkel .kopfzeile-abschnitt { border-top-color: var(--hairline-dunkel); }
.kopfzeile-abschnitt .kicker { margin: 0; }
.zweispalt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.zweispalt--mitte { align-items: center; }
.zweispalt--umgekehrt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.zweispalt h2 + p, .zweispalt h2 + .lead { margin-top: 1.6rem; }
.text-block > * + * { margin-top: 1.1rem; }
.text-block h2 + * { margin-top: 1.6rem; }
.zweispalt--karte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
@media (max-width: 60rem) { .zweispalt, .zweispalt--umgekehrt, .zweispalt--karte { grid-template-columns: 1fr; } }
.einleitung { max-width: 54ch; margin-top: 1.4rem; }
.kopf-paar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.kopf-paar p { margin: 0; }
@media (max-width: 60rem) { .kopf-paar { grid-template-columns: 1fr; } }

/* Bild mit Tiefe */
.parallax-rahmen { overflow: hidden; border-radius: 14px; background: var(--putz-2); }
.parallax-rahmen img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.bild-fig figcaption { margin-top: 0.8rem; font-size: 0.8rem; color: var(--greige-text); }
.abschnitt--dunkel .bild-fig figcaption { color: var(--greige-hell); }
.bild-fig--hoch .parallax-rahmen { aspect-ratio: 4 / 5; }
.bild-fig--quer .parallax-rahmen { aspect-ratio: 3 / 2; }

/* ---------- Statement ---------- */
.statement { padding-block: clamp(6rem, 17vh, 12rem); background: var(--putz); }
.statement-kicker { margin-bottom: 2rem; }
.statement-text {
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(1.9rem, 4.3vw, 4.2rem); line-height: 1.1; letter-spacing: -0.018em;
  max-width: 17.5em; margin: 0; color: var(--tinte); text-wrap: pretty;
}
.statement-text em { font-style: italic; color: var(--akzent-text); }
.sw { display: inline; }

/* ---------- Team (kurz) ---------- */
.team { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.team li { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--hairline); }
.team b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.team span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-text); }
@media (max-width: 34rem) { .team { grid-template-columns: 1fr; } }

/* ---------- Personen (ausführlich) ---------- */
.personen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.person { border-top: 1px solid var(--hairline); padding-top: 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: 0 1.4rem; }
.person-zeichen {
  grid-row: span 3; width: clamp(3.6rem, 6vw, 4.6rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--putz-2); border: 1px solid var(--hairline);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--akzent-text);
}
.person h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.person .rolle { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-text); margin: 0.35rem 0 0.9rem; }
.person p:not(.rolle) { font-size: 0.95rem; color: var(--greige-text); }
.person p a { color: var(--tinte); font-weight: 700; }
@media (max-width: 54rem) { .personen { grid-template-columns: 1fr; } }

/* ---------- Leistungskarten ---------- */
.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.karte {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  border-top: 1px solid var(--anthrazit); padding: 1.6rem 0 0.4rem;
}
.karte-nr { font-family: var(--font-display); font-style: italic; color: var(--akzent-text); font-size: 1rem; }
.karte h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); }
.karte p { font-size: 0.95rem; color: var(--greige-text); margin: 0; }
.karte .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 60rem) { .karten { grid-template-columns: 1fr; } }

/* ---------- Schritte (nummerierte Zeilen) ---------- */
.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritt {
  position: relative; display: grid; grid-template-columns: minmax(4rem, 8rem) minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline; padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--hairline);
}
.schritt:last-child { border-bottom: 1px solid var(--hairline); }
.schritt-nr { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; color: var(--akzent-text); font-variant-numeric: tabular-nums; }
.schritt h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.schritt p { margin: 0; color: var(--greige-text); font-size: 0.98rem; }
.abschnitt--dunkel .schritt { border-color: var(--hairline-dunkel); }
.abschnitt--dunkel .schritt-nr { color: var(--akzent-hell); }
.abschnitt--dunkel .schritt p { color: rgba(244,242,236,0.82); }
@media (max-width: 54rem) {
  .schritt { grid-template-columns: 3.5rem 1fr; row-gap: 0.6rem; }
  .schritt p { grid-column: 2; }
}

/* ---------- Fahrplan (Startseite: vier Schritte als Zeitleiste) ---------- */
.fahrplan { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.fahrplan-schritt { position: relative; padding-top: 1.8rem; }
.fahrplan-schritt::before {
  content: ""; position: absolute; left: 0; right: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)); top: 6px;
  height: 1px; background: var(--anthrazit); opacity: 0.45;
}
.fahrplan-schritt:last-child::before { right: 0; }
.fahrplan-schritt i {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--putz-2); border: 1.5px solid var(--akzent);
}
.fahrplan-schritt:last-child i { background: var(--akzent); }
.fahrplan-schritt b { display: block; font-family: var(--font-display); font-weight: 480; font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin-bottom: 0.45rem; }
.fahrplan-schritt b small { display: block; font-family: var(--font-text); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 0.4rem; }
.fahrplan-schritt span { font-size: 0.9rem; color: var(--greige-text); line-height: 1.55; display: block; max-width: 32ch; }
@media (max-width: 60rem) {
  .fahrplan { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 0.25rem; }
  .fahrplan-schritt { padding-top: 0; padding-left: 2rem; }
  .fahrplan-schritt::before { left: 6px; right: auto; top: 16px; bottom: -1.7rem; width: 1px; height: auto; }
  .fahrplan-schritt:last-child::before { display: none; }
  .fahrplan-schritt i { top: 5px; }
}

/* ---------- Galerie (Referenz, quer) ---------- */
.galerie-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.galerie-kopf p { margin: 1rem 0 0; }
.galerie-pfeile { display: flex; gap: 0.6rem; flex: none; }
.galerie-pfeil {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--anthrazit);
  background: transparent; color: var(--tinte); font-size: 1.15rem; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--federn);
}
.galerie-pfeil:hover { background: var(--tinte); color: var(--putz); transform: scale(1.05); }
.galerie-leiste {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--rand), calc((100vw - var(--spalte-max)) / 2 + var(--rand)));
  scroll-padding-inline: max(var(--rand), calc((100vw - var(--spalte-max)) / 2 + var(--rand)));
  padding-bottom: 0.5rem; cursor: grab; scrollbar-width: none;
}
.galerie-leiste::-webkit-scrollbar { display: none; }
.galerie-leiste.zieht { cursor: grabbing; scroll-snap-type: none; }
.galerie-leiste.zieht .gal-karte { pointer-events: none; }
.gal-karte { flex: 0 0 auto; width: clamp(18rem, 34vw, 34rem); scroll-snap-align: start; }
.gal-rahmen { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2; background: var(--putz-2); transition: transform 0.6s var(--federn), box-shadow 0.6s ease; }
.gal-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.gal-karte:hover .gal-rahmen { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(47,50,53,0.16); }
.gal-karte figcaption { margin-top: 0.7rem; font-size: 0.82rem; color: var(--greige-text); }
.gal-karte figcaption b { color: var(--tinte); font-weight: 700; }
@media (max-width: 44rem) { .gal-karte { width: 82vw; } }
.galerie-fortschritt { height: 2px; background: var(--hairline); margin-top: 1.6rem; border-radius: 2px; overflow: hidden; }
.galerie-fortschritt span { display: block; height: 100%; width: 100%; background: var(--akzent); transform: scaleX(0.1); transform-origin: 0 50%; transition: transform 0.25s ease-out; }

/* ---------- Bildraster (Referenzseite) ---------- */
.bildraster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.9rem, 1.8vw, 1.5rem); }
.bildraster li { grid-column: span 2; }
.bildraster li.breit { grid-column: span 4; }
.bildraster li.halb { grid-column: span 3; }
.bildraster .gal-rahmen { aspect-ratio: 3 / 2; }
.bildraster figure { height: 100%; display: flex; flex-direction: column; }
.bildraster figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--greige-text); }
@media (min-width: 54.01rem) {
  .bildraster li.breit { grid-row: span 2; }
  .bildraster li.breit .gal-rahmen { aspect-ratio: auto; height: auto; min-height: 0; flex: 1 1 0; }
}
@media (max-width: 54rem) {
  .bildraster { grid-template-columns: 1fr 1fr; }
  .bildraster li, .bildraster li.halb { grid-column: span 1; }
  .bildraster li.breit { grid-column: span 2; grid-row: auto; }
}

/* ---------- Projekte ---------- */
.projektliste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 7vw, 6rem); }
.projekt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: center; }
.projekt:nth-child(even) .projekt-bild { order: 2; }
.projekt-bild { display: block; text-decoration: none; }
.projekt-bild .parallax-rahmen { aspect-ratio: 4 / 3; }
.projekt-bild--karte .parallax-rahmen { background: #E6E3DA; }
.projekt-bild--karte .parallax-rahmen img { object-fit: contain; transform: none; }
.projekt-status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--akzent-text); margin-bottom: 1rem;
}
.projekt-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.projekt-status--ruhig { color: var(--greige-text); }
.projekt-status--ruhig i { background: var(--greige); }
.projekt h3 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.projekt h3 a { text-decoration: none; }
.projekt-ort { margin: 0.6rem 0 0; color: var(--greige-text); font-size: 0.95rem; }
.projekt-fakten { list-style: none; margin: 1.5rem 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.projekt-fakten li { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--hairline); border-radius: 999px; padding: 0.4rem 0.9rem; background: var(--putz); }
.abschnitt--flaeche .projekt-fakten li { background: var(--putz); }
.projekt-text { color: var(--greige-text); font-size: 0.98rem; max-width: 46ch; }
@media (max-width: 54rem) {
  .projekt { grid-template-columns: 1fr; }
  .projekt:nth-child(even) .projekt-bild { order: 0; }
}

/* ---------- Kriterien (Ankauf, dunkel) ---------- */
.kriterien { list-style: none; margin: 0; padding: 0; }
.kriterium {
  display: grid; grid-template-columns: minmax(3rem, 6rem) minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding-block: clamp(1.3rem, 2.8vw, 2rem); border-top: 1px solid var(--hairline-dunkel);
}
.kriterium:last-child { border-bottom: 1px solid var(--hairline-dunkel); }
.kriterium-nr { font-size: 0.72rem; font-weight: 700; letter-spacing: var(--sperrung); color: var(--akzent-hell); }
.kriterium h3 { font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-weight: 430; }
.kriterium p { margin: 0; font-size: 0.95rem; color: rgba(244,242,236,0.82); }
.kriterium--nein h3 { color: var(--akzent-hell); }
@media (max-width: 54rem) {
  .kriterium { grid-template-columns: 2.5rem 1fr; row-gap: 0.5rem; }
  .kriterium p { grid-column: 2; }
}
.abschnitt--hell .kriterium, .abschnitt--flaeche .kriterium { border-color: var(--hairline); }
.abschnitt--flaeche .kriterium-nr { color: var(--akzent-text); }
.abschnitt--flaeche .kriterium p { color: var(--greige-text); }
.abschnitt--flaeche .kriterium--nein h3 { color: var(--akzent-text); }

/* ---------- Hakenliste ---------- */
.hakenliste { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.hakenliste li {
  display: flex; gap: 1rem; align-items: baseline;
  padding-block: 0.85rem; border-bottom: 1px solid var(--hairline); font-size: 0.98rem;
}
.hakenliste li:first-child { border-top: 1px solid var(--hairline); }
.hakenliste li::before { content: "—"; color: var(--akzent-text); flex: none; font-family: var(--font-display); }
.hakenliste b { font-weight: 700; }
.hakenliste b + span::before { content: " · "; color: var(--greige-text); }
.hakenliste span { color: var(--greige-text); }
.abschnitt--dunkel .hakenliste li { border-color: var(--hairline-dunkel); color: rgba(244,242,236,0.92); }
.abschnitt--dunkel .hakenliste li::before { color: var(--akzent-hell); }
.abschnitt--dunkel .hakenliste span { color: var(--greige-hell); }
.haken { display: none; }
.hakenliste--spalten { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.hakenliste--spalten li:nth-child(2) { border-top: 1px solid var(--hairline); }
.abschnitt--dunkel .hakenliste--spalten li:nth-child(2) { border-top-color: var(--hairline-dunkel); }
@media (max-width: 54rem) {
  .hakenliste--spalten { grid-template-columns: 1fr; }
  .hakenliste--spalten li:nth-child(2) { border-top: 0; }
}

/* ---------- Fakten (Steckbrief) ---------- */
.fakten { margin: 0; display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); border-top: 1px solid var(--hairline); }
.fakten dt, .fakten dd { margin: 0; padding-block: 1rem; border-bottom: 1px solid var(--hairline); }
.fakten dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-text); padding-right: 1rem; padding-top: 1.15rem; }
.fakten dd { font-size: 0.98rem; }
.fakten dd a { font-weight: 700; color: var(--tinte); }
.abschnitt--dunkel .fakten, .abschnitt--dunkel .fakten dt, .abschnitt--dunkel .fakten dd { border-color: var(--hairline-dunkel); }
.abschnitt--dunkel .fakten dt { color: var(--akzent-hell); }
.abschnitt--dunkel .fakten dd a { color: var(--putz); }
@media (max-width: 34rem) {
  .fakten { grid-template-columns: 1fr; }
  .fakten dt { border-bottom: 0; padding-bottom: 0; }
  .fakten dd { padding-top: 0.35rem; }
}

/* ---------- Tabelle (Wohnungsübersicht) ---------- */
.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabelle th { text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige-text); padding: 0 1rem 0.9rem 0; border-bottom: 1px solid var(--anthrazit); white-space: nowrap; }
.tabelle td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--hairline); vertical-align: baseline; }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle td:first-child { font-family: var(--font-display); font-size: 1.35rem; color: var(--akzent-text); }
.tabelle .frei { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--akzent-text); border: 1px solid var(--akzent); border-radius: 999px; padding: 0.3rem 0.7rem; white-space: nowrap; }
@media (max-width: 46rem) {
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr { border-top: 1px solid var(--anthrazit); padding-block: 0.8rem; }
  .tabelle td { border: 0; padding: 0.2rem 0; display: flex; justify-content: space-between; gap: 1rem; }
  .tabelle td::before { content: attr(data-titel); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--greige-text); }
  .tabelle td:first-child::before { content: none; }
}

/* ---------- Vorher / Nachher ---------- */
.vergleich { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--putz-2); --pos: 50%; user-select: none; touch-action: pan-y; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--putz); pointer-events: none; }
.vergleich-griff {
  position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: var(--putz); color: var(--tinte); display: grid; place-items: center;
  font-size: 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); pointer-events: none;
}
.vergleich input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.vergleich-marke {
  position: absolute; bottom: 1rem; z-index: 2; pointer-events: none;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--putz); background: rgba(28,31,34,0.6); padding: 0.45rem 0.9rem; border-radius: 999px;
}
.vergleich-marke--links { left: 1rem; }
.vergleich-marke--rechts { right: 1rem; }
@media (max-width: 44rem) {
  .vergleich { aspect-ratio: 4 / 3; }
  .vergleich-marke { max-width: calc(50% - 1.5rem); white-space: normal; line-height: 1.3; border-radius: 12px; }
}
@media (pointer: coarse) { .vergleich input { inset: auto 0; top: calc(50% - 32px); height: 64px; } }
.vergleich:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 3px; }
.vergleich:has(input:focus-visible) .vergleich-griff { box-shadow: 0 0 0 3px var(--akzent), 0 10px 30px rgba(0,0,0,0.25); }

/* ---------- Karte / Region ---------- */
.karte-fig .parallax-rahmen { background: #E6E3DA; aspect-ratio: auto; }
.karte-fig .parallax-rahmen img { transform: none; height: auto; }
.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--greige-text); list-style: none; padding: 0; }
.legende li { display: inline-flex; align-items: center; gap: 0.5rem; }
.legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legende .bau { background: var(--akzent); }
.legende .fertig { background: var(--anthrazit); }
.legende .plan { background: transparent; border: 1.5px solid var(--anthrazit); }

/* ---------- Kontaktraster ---------- */
.kontakt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.kontakt-raster > div { border-top: 1px solid var(--hairline); padding-top: 1.3rem; }
.kontakt-raster .gross { display: inline-block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); text-decoration: none; line-height: 1.15; margin-bottom: 0.6rem; word-break: break-word; }
.kontakt-raster .gross:hover { color: var(--akzent-text); }
.kontakt-raster address { font-style: normal; font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; margin-bottom: 0.6rem; }
.kontakt-raster p { font-size: 0.92rem; color: var(--greige-text); }
.kontakt-raster p a { color: var(--tinte); font-weight: 700; }
@media (max-width: 60rem) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ---------- Zwei Wege (Abschluss-Kacheln) ---------- */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); }
.weg { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.6rem, 3.5vw, 2.75rem); border-radius: 16px; background: var(--putz); border: 1px solid var(--hairline); text-decoration: none; transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s var(--federn); }
.weg:hover { background: #FBFAF6; border-color: var(--akzent); }
.weg h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.weg p { margin: 0; color: var(--greige-text); font-size: 0.98rem; }
.weg .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 54rem) { .wege { grid-template-columns: 1fr; } }

/* ---------- Formulare ---------- */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem); margin: 0; }
.honig { display: none !important; }
.feld { display: grid; gap: 0.5rem; align-content: start; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld legend { margin-bottom: 0.5rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label, .feld legend { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--greige-hell); padding: 0; }
.feld .optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--greige); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--putz);
  background-color: rgba(244,242,236,0.05); border: 0; border-bottom: 1px solid #8A8D90;
  border-radius: 6px 6px 0 0; padding: 0.85rem 0.9rem; transition: border-color 0.3s ease, background-color 0.3s ease;
  scroll-margin-top: 7rem;
}
.einwilligung input { scroll-margin-top: 7rem; }
.feld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--greige-hell) 50%), linear-gradient(135deg, var(--greige-hell) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.feld select option { color: var(--tinte); background: var(--putz); }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(213,214,206,0.7); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-bottom-color: var(--akzent-hell); background-color: rgba(244,242,236,0.09); outline: none; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.feld input[aria-invalid="true"] { border-bottom-color: #E8A08A; }
.auswahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.auswahl label { position: relative; font-size: 0.9rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--putz); cursor: pointer; }
.auswahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.auswahl label span { display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid #8A8D90; border-radius: 999px; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.auswahl input:checked + span { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #FBF6F2; }
.auswahl input:focus-visible + span { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.einwilligung { grid-column: 1 / -1; display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.88rem; color: var(--greige-hell); line-height: 1.55; cursor: pointer; }
.einwilligung input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--akzent); flex: none; }
.einwilligung a { color: var(--putz); }
.formular-fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.5rem; }
.formular-fuss .klein { margin: 0; }
@media (max-width: 44rem) { .formular { grid-template-columns: 1fr; } }
.formular-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.formular-raster .text-block p a { color: var(--putz); font-weight: 700; }
@media (max-width: 60rem) { .formular-raster { grid-template-columns: 1fr; } }

/* ---------- Großes Laufband ---------- */
.grossband { overflow: hidden; white-space: nowrap; padding-block: clamp(3rem, 8vh, 5.5rem); }
.grossband-spur { display: inline-flex; }
.grossband-spur span { font-family: var(--font-display); font-weight: 430; font-size: clamp(3.6rem, 11vw, 10.5rem); line-height: 1; letter-spacing: -0.03em; padding-right: 0.42em; }
.grossband-spur span:nth-child(odd) { color: var(--akzent); font-style: italic; }
.grossband-spur span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.3px var(--anthrazit); }
@supports (paint-order: stroke fill) {
  .grossband-spur span:nth-child(even) { color: var(--putz); -webkit-text-stroke: 2.6px var(--anthrazit); paint-order: stroke fill; }
}

/* ---------- Laufband (im Zahlenband) ---------- */
.laufband { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--hairline-dunkel); padding-block: 1.05rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.laufband-spur { display: inline-flex; }
.laufband-spur span { display: inline-flex; align-items: center; gap: 1.1em; padding-right: 1.1em; font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 2rem); color: var(--putz); letter-spacing: -0.005em; }
.laufband-spur span.k { font-style: italic; color: var(--akzent-hell); }
.laufband-spur span::after { content: ""; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--akzent); flex: none; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 2.6rem 0 0.8rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext address { font-size: 0.98rem; font-style: normal; }
.rechtstext address { margin-bottom: 1rem; line-height: 1.7; }
.rechtstext a { color: var(--tinte); font-weight: 700; }

/* ==========================================================================
   FUSS
   ========================================================================== */
.fuss { background: var(--putz); }
.fuss-kern { background: var(--tinte-tief); color: var(--putz); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.fuss-finale { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 3.5rem); padding-block: clamp(1rem, 3vw, 2.5rem) clamp(0.5rem, 2vw, 1.5rem); }
.fuss-linie { flex: 1; height: 1px; background: var(--hairline-dunkel); }
.fuss-linie--links { transform-origin: 100% 50%; }
.fuss-linie--rechts { transform-origin: 0 50%; }
.fuss-finale .fuss-linie { transform: scaleX(0); transition: transform 1.2s var(--federn) 0.35s; }
.fuss-logo { display: block; transition: transform 0.5s var(--federn); }
.fuss-logo:hover { transform: translateY(-4px) rotate(-4deg); }
.fuss-logo img { display: block; width: clamp(8.5rem, 14vw, 12rem); height: auto; }
.fuss-finale .fuss-logo img { opacity: 0; transform: scale(0.9) rotate(-30deg); transition: opacity 0.8s ease 0.1s, transform 1.2s var(--federn) 0.1s; }
.fuss-finale.sichtbar .fuss-linie { transform: scaleX(1); }
.fuss-finale.sichtbar .fuss-logo img { opacity: 1; transform: none; }
.fuss-zeile { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hairline-dunkel); padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.fuss address { font-style: normal; font-size: 0.9rem; line-height: 1.8; color: var(--greige-hell); }
.fuss address b { color: var(--putz); }
.fuss address a { color: var(--putz); text-decoration: none; }
.fuss address a:hover { color: var(--akzent-hell); }
.fuss-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 2.5rem; }
.fuss-nav a { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--greige-hell); text-decoration: none; transition: color 0.3s ease; }
.fuss-nav a:hover { color: var(--putz); }
.fuss-recht { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--hairline-dunkel); font-size: 0.75rem; color: var(--greige-hell); }
.fuss-recht p { margin: 0; max-width: none; }
.fuss-recht a { color: var(--putz); text-decoration: none; }
.fuss-recht a:hover { text-decoration: underline; }
@media (max-width: 54rem) { .fuss-zeile { grid-template-columns: 1fr; } }

/* ==========================================================================
   REVEAL (Grundzustand ohne GSAP)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity var(--dauer-reveal) ease, transform var(--dauer-reveal) var(--federn); transition-delay: var(--d, 0s); }
.reveal.sichtbar { opacity: 1; transform: none; }
.zeile-anim { opacity: 0; transform: translateY(28px); }
body.bereit .zeile-anim { animation: zeile 1.1s var(--federn) forwards; animation-delay: calc(0.1s + var(--z) * 0.11s); }
body.bereit .maske > span { animation: wort 1.15s var(--federn) forwards; animation-delay: calc(0.1s + var(--z) * 0.11s); }
@keyframes zeile { to { opacity: 1; transform: none; } }
@keyframes wort { to { transform: translateY(0); } }

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width: 72rem) {
  .nav-gross { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 30rem) { .marke-text small { display: none; } }

/* ==========================================================================
   REDUZIERTE BEWEGUNG
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeile-anim, .maske > span { opacity: 1; transform: none; animation: none; }
  .dia img, .dia.aktiv img { animation: none; transform: none; }
  .wellen-schicht--hinten, .wellen-schicht--vorn, .dia-chip i { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .fuss-finale .fuss-linie, .fuss-finale .fuss-logo img { opacity: 1; transform: none; transition: none; }
  .parallax-rahmen img { transform: none !important; }
  .dia-punkte b.aktiv::after { animation: none; transform: scaleX(1); }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .nav-mobil, .lader, .uebergang, .zeiger, .wellen, .laufband, .grossband, .galerie-pfeile, .formular { display: none !important; }
  .reveal, .zeile-anim, .maske > span { opacity: 1 !important; transform: none !important; }
  .abschnitt--dunkel, .zahlenband, .fuss-kern { background: #fff !important; color: #000 !important; }
}

/* ---------- Ergänzungen ---------- */
.wellen--flaeche { background: var(--putz-2); }
.wellen--dunkel { background: var(--tinte); }
.wellen--dunkel .wellen-schicht--hinten svg path { fill: rgba(28,31,34,0.5); }
.projekt-bild, .bild-fig { position: relative; }
.bild-hinweis {
  position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 2; pointer-events: none;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--putz); background: rgba(28,31,34,0.55); padding: 0.4rem 0.8rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.extern::after { content: " ↗"; }
.fuss-wellen { margin-bottom: -1px; }
@media (max-width: 44rem) {
  .galerie-kopf { flex-direction: column; align-items: flex-start; }
  .kopfzeile-abschnitt { flex-direction: column; gap: 0.25rem; }
  .kopfzeile-abschnitt .kicker--rechts { text-align: left; }
}

/* ---------- stays.js kam nicht an (kopf.js setzt html.ohne-skript) ---------- */
html.ohne-skript .reveal, html.ohne-skript .zeile-anim, html.ohne-skript .maske > span { opacity: 1; transform: none; }
html.ohne-skript .fuss-finale .fuss-linie, html.ohne-skript .fuss-finale .fuss-logo img { opacity: 1; transform: none; }
html.ohne-skript .nav-toggle { display: none !important; }
@media (max-width: 72rem) {
  html.ohne-skript .nav-gross { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  html.ohne-skript .nav-gross a:not(.knopf) { display: none; }
}

/* ==========================================================================
   AUFTAKT MIT FILM (Startseite) · Hafen Friedrichshafen
   Standbild sofort, Video blendet ein, sobald es läuft.
   ========================================================================== */
.auftakt--film {
  background: var(--nacht); color: var(--putz);
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
}
.film-grund { position: absolute; inset: 0; overflow: hidden; background: #1F2A33; }
.film-poster, .film-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 50%; }
.film-video { opacity: 0; transition: opacity 1.1s ease; }
.film-video.laeuft { opacity: 1; }
.film-video.oben { z-index: 1; }
.film-schleier {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,21,24,0.8) 0%, rgba(18,21,24,0.58) 40%, rgba(18,21,24,0.16) 72%, rgba(18,21,24,0) 100%),
    linear-gradient(0deg, rgba(18,21,24,0.6) 0%, rgba(18,21,24,0) 42%),
    linear-gradient(180deg, rgba(18,21,24,0.5) 0%, rgba(18,21,24,0) 24%);
}
.auftakt-film { position: relative; z-index: 3; width: 100%; padding-top: clamp(8rem, 18vh, 11rem); padding-bottom: clamp(7rem, 17vh, 11rem); }
.auftakt--film .auftakt-text { max-width: 46rem; }
.auftakt--film .auftakt-titel { color: var(--putz); font-size: clamp(2.6rem, 6vw, 5.6rem); text-shadow: 0 2px 34px rgba(0,0,0,0.28); }
.auftakt--film .auftakt-titel em { color: var(--akzent-hell); }
.auftakt--film .auftakt-adresse { color: var(--putz); }
.auftakt--film .auftakt-adresse::before { background: var(--akzent-hell); }
.auftakt--film .auftakt-lead { color: rgba(244,242,236,0.92); }
.auftakt--film .auftakt-fakten { border-top-color: rgba(244,242,236,0.24); color: var(--greige-hell); }
.auftakt--film .auftakt-fakten b { color: var(--putz); }
.auftakt--film :focus-visible { outline-color: var(--akzent-hell); }
.film-leiste {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(4rem, 9vw, 7.5rem);
  display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; pointer-events: none;
}
.film-ort {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,242,236,0.85);
}
.film-ort i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent-hell); animation: chip-puls 2.4s ease-out infinite; }
.film-pause {
  pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(244,242,236,0.5); background: rgba(18,21,24,0.25); color: var(--putz);
  display: grid; place-items: center; transition: background 0.3s ease, border-color 0.3s ease;
}
.film-pause:hover { background: rgba(244,242,236,0.15); border-color: var(--putz); }
.film-pause[hidden] { display: none; }
@media (min-width: 44.01rem) and (max-height: 950px) {
  .auftakt-film { padding-top: clamp(6rem, 13vh, 8rem); padding-bottom: clamp(5.5rem, 12vh, 7.5rem); }
  .auftakt--film .auftakt-titel { font-size: clamp(2.6rem, 5vw, 4.6rem); }
}
.film-pause span { width: 9px; height: 11px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.film-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.wellen--film { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; background: transparent; }
.wellen--film .wellen-schicht--hinten svg path { fill: rgba(36,39,42,0.5); }
@media (max-width: 44rem) {
  .film-poster, .film-video { object-position: 30% 50%; }
  .film-schleier { background: linear-gradient(0deg, rgba(18,21,24,0.88) 0%, rgba(18,21,24,0.64) 55%, rgba(18,21,24,0.56) 100%); }
  .film-ort { display: none; }
  .film-leiste { bottom: auto; top: 5.2rem; }
}
/* Kopfzeile über dem Film hell, sobald sie fest wird wieder normal */
.mit-film .kopf:not(.fest) .marke, .mit-film .kopf:not(.fest) .nav-gross a:not(.knopf) { color: var(--putz); }
.mit-film .kopf:not(.fest) .marke small { color: var(--greige-hell); }
.mit-film .kopf:not(.fest) .marke img { content: url("../img/logo-stays-greige.svg"); }
.mit-film .kopf:not(.fest) .nav-toggle { border-color: var(--putz); }
.mit-film .kopf:not(.fest) .nav-toggle span { background: var(--putz); }
.mit-film .kopf:not(.fest) :focus-visible { outline-color: var(--akzent-hell); }
@media (prefers-reduced-motion: reduce) { .film-video { display: none; } .film-ort i { animation: none; } }
@media print { .film-grund, .film-leiste { display: none !important; } .auftakt--film { min-height: 0; color: #000; background: #fff; } .auftakt--film .auftakt-titel { color: #000; } }

/* ---------- Formular-Meldung (Versand nicht möglich) ---------- */
.formular-meldung { flex-basis: 100%; margin: 0.4rem 0 0; padding: 0.9rem 1.1rem; border-radius: 10px; font-size: 0.92rem; line-height: 1.55; background: rgba(212,155,130,0.14); border: 1px solid rgba(212,155,130,0.45); color: var(--putz); max-width: none; }
.formular-meldung a { color: var(--putz); font-weight: 700; }
.knopf[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Ortskachel (Projekt, für das noch kein Bild vorliegt) ---------- */
.ort-kachel {
  position: relative; width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem); color: var(--putz);
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(212,155,130,0.22), transparent 60%),
    repeating-radial-gradient(circle at 78% 30%, transparent 0 26px, rgba(244,242,236,0.05) 26px 27px),
    var(--tinte);
}
.ort-kachel-ort { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1; color: var(--putz); overflow-wrap: anywhere; }
.ort-kachel-zeile, .ort-kachel-fakt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--greige-hell); }
.ort-kachel-fakt { color: var(--akzent-hell); }

.bild-huelle { position: relative; }

/* ---------- Handy: Foto vor dem Text, damit lange Abschnitte nicht textlastig wirken ---------- */
@media (max-width: 60rem) {
  .zweispalt > .bild-fig { order: -1; }
  .zweispalt > .bild-fig--hoch .parallax-rahmen { aspect-ratio: 4 / 3; }
}