/* ==========================================================================
   AL Immobilien — design tokens
   ========================================================================== */

:root {
  --bg: #F7F4EE;
  --bg-alt: #F1EDE4;
  --ink: #16211D;
  --ink-2: #3A443F;
  --muted: #635C4E;
  --muted-2: #8F8674;
  --green: #1E4034;          /* Marken-Grün, tief */
  --green-2: #2C5646;        /* zweite Ebene */
  --green-light: #A9BDB1;
  --gold: #B99244;           /* Akzent aus dem Konzept */
  --gold-soft: #E4D3AE;
  --sand: #E8DCC8;
  --sand-soft: #F0E8DB;      /* Mitte aus --bg und --sand: Tippgeber-Band */
  --sand-2: #B9AF9D;
  --line: rgba(23, 25, 26, .09);
  --line-2: rgba(23, 25, 26, .14);
  --line-3: rgba(23, 25, 26, .18);
  --green-wash: rgba(30, 64, 52, .045);
  --green-line: rgba(30, 64, 52, .34);
  --dark: #191512;
  --dark-2: #211B17;
  --dark-3: #26201B;
  --copper: #C77A55;
  --cream: #F4EFE9;

  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(56px, 6.5vw, 104px);
  --max: 1440px;

  --radius: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 6px 22px rgba(22, 33, 29, .07);
  --shadow: 0 18px 48px rgba(22, 33, 29, .11);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   Testschema „dunkel" — aktiv über AL Optionen oder ?scheme=dark in der URL.
   Überschreibt nur die Farbtoken; das helle Set oben bleibt unverändert.
   -------------------------------------------------------------------------- */

:root[data-scheme="dark"] {
  --bg: #141210;
  --bg-alt: #1D1814;
  --ink: #F4EFE9;
  --ink-2: #C7C0B2;
  --muted: #9A917F;
  --muted-2: #6E6555;
  --green: #2C5646;
  --green-2: #3D7059;
  --green-light: #1E4034;
  --gold: #C9A055;
  --gold-soft: #3A2E1A;
  --sand: #2A241D;
  --sand-2: #4A4030;
  --line: rgba(244, 239, 233, .09);
  --line-2: rgba(244, 239, 233, .14);
  --line-3: rgba(244, 239, 233, .18);
  --green-wash: rgba(61, 112, 89, .12);
  --green-line: rgba(61, 112, 89, .40);
  --dark: #0C0A08;
  --dark-2: #100D0B;
  --dark-3: #171310;
  --copper: #D98F68;
  --cream: #F4EFE9;

  /* Nicht im gelieferten Set enthalten, aber vom Theme gebraucht: */
  --sand-soft: #221D17;      /* Mitte aus --bg und --sand, wie im hellen Set */
  --shadow-sm: 0 6px 22px rgba(0, 0, 0, .4);
  --shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: var(--sand); }

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

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 200; background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 2px;
}

@keyframes alrise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.sec { border-top: 1px solid var(--line); }
.sec--flush { border-top: none; }
.sec--alt { background: var(--bg-alt); }
.sec--dark { background: var(--dark); color: var(--cream); }
.sec--ink { background: var(--green); color: var(--bg); }
.sec--sand { background: var(--sand); color: var(--green); }
.sec--anchor { scroll-margin-top: 96px; }

.sec__inner { padding: var(--section-y) 0; }
.sec__inner--lead { padding: clamp(44px, 5.5vw, 84px) 0 clamp(32px, 3.6vw, 52px); }
.sec__inner--tight { padding: 0 0 clamp(44px, 5vw, 80px); }
.sec__inner--tall { padding: clamp(60px, 7vw, 116px) 0; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.split--end { align-items: end; }
.split--start { align-items: start; }
.split--center { align-items: center; }
.split--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.sec-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(28px, 3.4vw, 46px);
}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  margin: 0 0 18px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--copper { color: var(--copper); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.eyebrow--copper .eyebrow__sub { color: rgba(244, 239, 233, .5); letter-spacing: .1em; }

.kicker {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 clamp(26px, 3.6vw, 42px);
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.kicker::before {
  content: ""; width: 34px; height: 1px; background: var(--sand-2);
  display: inline-block; flex: none;
}

.display {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(42px, 5.6vw, 86px); line-height: 1.04;
  letter-spacing: -.022em; text-wrap: balance;
}
.display em { color: var(--green); }

.page-title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(38px, 5vw, 74px); line-height: 1.06;
  letter-spacing: -.02em; max-width: 18ch; text-wrap: balance;
}
.page-title em { color: var(--green); }

.h2 {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12;
  /* 20ch brach Zeilen um, wo die Spalte noch Platz hatte ("Vermieten ist nicht
     gleich vermieten." nutzte 624 von 1178 px). Die Spalte begrenzt ohnehin. */
  letter-spacing: -.018em; max-width: 34ch; text-wrap: balance;
}
.h2--lg { font-size: clamp(32px, 4vw, 60px); line-height: 1.06; letter-spacing: -.02em; max-width: 30ch; }
.h2--tight { max-width: 17ch; }

.h3-serif {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(26px, 2.7vw, 38px); line-height: 1.1; letter-spacing: -.015em;
}

.lead {
  margin: clamp(26px, 3vw, 38px) 0 0;
  max-width: 48ch;
  font: 400 clamp(17px, 1.35vw, 20px)/1.62 var(--sans);
  color: var(--ink-2); text-wrap: pretty;
}
.lead--dark { color: var(--ink); }
.lead--on-dark { color: rgba(244, 239, 233, .72); }

.note {
  margin: 0; max-width: 38ch;
  font: 400 16px/1.6 var(--sans); color: var(--ink-2);
}
.note--on-dark { color: rgba(244, 239, 233, .72); max-width: 36ch; font-size: 16px; line-height: 1.62; }

.body-text {
  margin: 0;
  font: 400 17px/1.65 var(--sans); color: var(--ink-2);
  max-width: 52ch; text-wrap: pretty;
}
.body-text + .body-text { margin-top: 20px; }
.body-text--ink { color: var(--ink); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.62; max-width: 50ch; }
.body-text--wide { max-width: 72ch; font-size: 17px; line-height: 1.68; }

.claim {
  margin: 0;
  font-family: var(--display); font-weight: 300; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.14; letter-spacing: -.02em;
}
.claim span { font-style: normal; color: var(--green); }
.claim--sm { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; }

.fineprint {
  margin: 16px 0 0;
  font: 400 12px/1.5 var(--mono); color: var(--muted);
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-block;
  font: 500 17px/1 var(--sans);
  padding: 19px 30px; border-radius: var(--radius); border: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s ease, color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green); color: var(--bg); box-shadow: 0 10px 26px rgba(30, 64, 52, .22); }
.btn--primary:hover { background: var(--green-2); color: var(--bg); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #A47C33; color: #fff; }
.btn--ghost { color: var(--ink); border-color: rgba(23, 25, 26, .24); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(23, 25, 26, .04); color: var(--ink); }
.btn--light { background: var(--bg); color: var(--green); }
.btn--light:hover { background: var(--sand); color: var(--ink); }
.btn--sm { font-size: 16px; padding: 17px 26px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3.2vw, 42px); }
.btn-row--tight { gap: 12px; margin-top: 32px; }

.link-underline {
  display: inline-block;
  font: 500 16px/1 var(--sans);
  border-bottom: 1px solid rgba(23, 25, 26, .3);
  padding-bottom: 5px;
  transition: border-color .25s ease;
}
.link-underline:hover { border-bottom-color: var(--ink); color: var(--ink); }
.link-underline--on-dark { color: var(--cream); border-bottom-color: rgba(199, 122, 85, .6); }
.link-underline--on-dark:hover { border-bottom-color: var(--copper); color: var(--cream); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { position: sticky; top: 0; z-index: 50; }
/* Lesefortschritt: sitzt unterhalb der Kopfzeile, wächst von links. Innerhalb
   lag er unter dem dunklen Glas der Slogan-Leiste und wirkte abgedunkelt. */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  pointer-events: none; overflow: hidden;
}
.scroll-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--green);
  transform: scaleX(0); transform-origin: left center;
}
/* Beide Leisten haben backdrop-filter und bilden damit eigene Stacking-Kontexte.
   Ohne explizite Ordnung malt die später folgende Slogan-Leiste ÜBER die
   ausgeklappten Untermenüs und schluckt deren Hover/Klicks (Navbar "kaputt"
   nach dem Scrollen). Die Bar muss deshalb über der Slogan-Leiste liegen. */
.site-header__bar {
  position: relative; z-index: 2;
  background: rgba(247, 244, 238, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header__inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: 10px var(--gutter); min-height: 84px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}

/* Zeichen mittig wie bei Rolex — die Navigation ordnet sich darum. */
.brand--center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; padding: 4px; z-index: 2;
}
/* Platz für das Logo — und Landeplatz für den Engel aus dem Hero. */
/* Das Zeichen als zwei Würfelseiten: vorne das Logo, hinten der Engel.
   Gedreht wird per Scroll-Stand in app.js — keine laufende Animation. */
.brand__slot { display: grid; place-items: center; width: 104px; height: 64px; perspective: 700px; }
.brand__flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.brand__face {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.brand__face--angel { transform: rotateY(180deg); }
/* Fallback zusätzlich zu backface-visibility: WebKit ignoriert das, sobald
   ein Vorfahr einen eigenen Stacking-Kontext hat (die Header-Bar braucht
   ihren z-index für die Untermenüs). app.js schaltet die Klasse bei der
   halben Drehung um — dort steht die Fläche auf der Kante, der Wechsel
   ist unsichtbar. */
.brand__face--angel { opacity: 0; }
.brand__flip.is-flipped .brand__face--logo { opacity: 0; }
.brand__flip.is-flipped .brand__face--angel { opacity: 1; }
.brand__logo--head { height: 30px; width: auto; color: var(--ink); }
.brand__angel { height: 56px; width: auto; display: block; }

/* Slogan als schmale Zeile: auf der Startseite blendet sie beim Scrollen ein,
   auf allen anderen Seiten steht sie von Anfang an. */
.site-header__claim {
  position: relative; z-index: 1;
  background: rgba(10, 14, 12, .55);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .3s ease;
}
.site-header__claim.is-in { max-height: 44px; opacity: 1; }
.site-header__claim span {
  display: block; padding: 9px var(--gutter);
  font: 400 13.5px/1.3 var(--sans); letter-spacing: .06em; color: rgba(247, 244, 238, .95);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-header__claim em { font-style: normal; color: var(--gold-soft); }

.brand__angel {
  width: auto; height: 58px; display: block;
  transition: transform .4s var(--ease);
}
.brand--center:hover .brand__angel { transform: translateY(-2px) scale(1.03); }
@media (max-width: 900px) {
  .brand__angel { height: 40px; }
}

.brand { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.brand__mark { font: 600 19px/1 var(--sans); letter-spacing: -.02em; }
.brand__rule { width: 16px; height: 1px; background: var(--ink); display: inline-block; transform: translateY(-5px); }
.brand__word { font: 400 19px/1 var(--sans); letter-spacing: .01em; color: var(--ink-2); }
svg.brand__logo { width: auto; height: 28px; display: block; color: var(--ink); flex: none; }
img.brand__logo { width: auto; height: 28px; display: block; flex: none; }
.brand__word { display: block; line-height: 1; }
.brand--footer { align-items: center; }
.brand--footer svg.brand__logo,
.brand--footer img.brand__logo { height: 25px; }
.al-play .site-footer svg.brand__logo { color: #fff; }
.al-play .site-footer img.brand__logo { filter: invert(1); }
.brand--footer .brand__mark { font-size: 18px; }
.brand--footer .brand__word { font-size: 18px; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(23, 25, 26, .24);
  border-radius: 2px; padding: 11px 16px; font: 500 15px/1 var(--sans); cursor: pointer;
  color: var(--ink);
}

.main-nav {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  flex-wrap: wrap; justify-content: flex-start;
}
.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); flex-wrap: wrap;
}
/* Scoped to the menu list — the CTA button sits next to it and keeps its own
   padding (a bare ".main-nav a" would outweigh ".nav-cta"). */
.main-nav ul a {
  font: 500 16px/1 var(--sans);
  padding: 8px 0; border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.main-nav ul a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { border-bottom-color: var(--ink); color: var(--ink); }

.nav-cta {
  display: inline-block; flex: none; white-space: nowrap;
  font: 500 16px/1 var(--sans);
  background: var(--green); color: var(--bg);
  padding: 15px 24px; border-radius: var(--radius);
  transition: background .25s ease;
}
.nav-cta:hover { background: var(--green-2); color: var(--bg); }
.nav-cta--menu { display: none; }

@media (max-width: 900px) {
  /* Drei Spalten statt absoluter Mitte: das Zeichen sitzt zwischen zwei gleich
     breiten Spalten — also wirklich mittig — und das offene Menü fällt in die
     zweite Zeile, statt unter dem Zeichen zu liegen. */
  .site-header__inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; align-content: center;
    column-gap: 16px; row-gap: 0;
  }
  .nav-toggle { display: block; justify-self: start; }
  /* min-height hält den Balken bei offenem Menü genauso hoch wie geschlossen. */
  .brand--center { position: static; transform: none; grid-column: 2; min-height: 64px; }
  .site-header__inner > .nav-cta { grid-column: 3; justify-self: end; padding: 13px 18px; font-size: 15px; }

  .main-nav { display: none; grid-column: 1 / -1; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 12px; }
  .main-nav.is-open { display: flex; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .main-nav ul a { padding: 12px 0; }
}

/* Auf dem Handy bleibt für Menü + Zeichen + Button nicht genug Platz: der
   Button wandert ans Ende des Menüs, damit das Zeichen mittig stehen kann. */
@media (max-width: 560px) {
  .site-header__inner > .nav-cta { display: none; }
  .nav-cta--menu { display: block; width: 100%; margin-top: 10px; text-align: center; padding: 15px 18px; font-size: 15px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: end;
  padding: clamp(52px, 6.5vw, 100px) 0 clamp(44px, 5vw, 80px);
}
.hero__copy { animation: alrise .8s cubic-bezier(.2, .7, .3, 1) both; }
.hero__figure { margin: 0; animation: alrise 1s .12s cubic-bezier(.2, .7, .3, 1) both; }

/* ==========================================================================
   Media placeholders / images
   ========================================================================== */

.media {
  border-radius: var(--radius-md);
  position: relative;
  background: repeating-linear-gradient(135deg, #EAE4D8 0 11px, #E1D9CA 11px 22px);
  display: flex; align-items: flex-end; padding: 16px; overflow: hidden;
}
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media__label {
  position: relative;
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: #57503F;
}
.media--hero { aspect-ratio: 4/5; padding: 22px; }
.media--hero .media__label { font-size: 11px; letter-spacing: .09em; }
.media--4x3 { aspect-ratio: 4/3; }
.media--3x4 { aspect-ratio: 3/4; }
.media--2x1 { aspect-ratio: 2/1; padding: 26px; }
.media--16x10 { aspect-ratio: 16/10; border-radius: 2px; padding: 14px; }
.media--wide { aspect-ratio: 16/9; }
.media--dark {
  background: repeating-linear-gradient(135deg, #2E2620 0 11px, #26201B 11px 22px);
}
.media--dark .media__label { color: #B79A85; font-size: 10px; }
.media--offset { margin-top: 36px; }

.media-caption { margin-top: 12px; font: 400 12px/1.5 var(--mono); color: var(--muted); }

.portrait-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ==========================================================================
   Hairline grids & cards
   ========================================================================== */

.hairgrid {
  display: grid; gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.hairgrid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.hairgrid--md { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.hairgrid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.hairgrid--stat { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.hairgrid > * { background: var(--bg); }
.hairgrid--on-alt > * { background: var(--bg-alt); }

.service-card {
  padding: clamp(24px, 2.5vw, 34px);
  display: flex; flex-direction: column; gap: 12px; min-height: 230px;
  transition: background .3s ease;
}
.service-card:hover { background: #EDE7DC; color: var(--ink); }
.service-card__num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--green); }
.service-card__title { margin: 4px 0 0; font: 500 21px/1.28 var(--sans); letter-spacing: -.01em; }
.service-card__text { margin: 0; font: 400 15px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.service-card__more { margin-top: auto; font: 500 14px/1 var(--sans); color: var(--green); }

.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.modern-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--dark-2); border: 1px solid rgba(199, 122, 85, .28); border-radius: 3px;
  padding: clamp(22px, 2.3vw, 30px); min-height: 300px;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), border-color .35s ease, background .35s ease;
}
.modern-card:hover {
  transform: translateY(-5px); border-color: var(--copper);
  background: var(--dark-3); color: var(--cream);
}
.modern-card__en { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--copper); }
.modern-card__title { margin: 0; font: 500 21px/1.28 var(--sans); letter-spacing: -.01em; }
.modern-card__text { margin: 0; font: 400 15px/1.6 var(--sans); color: rgba(244, 239, 233, .7); text-wrap: pretty; }

.cell {
  padding: 22px 18px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.cell__num { font: 400 11px/1 var(--mono); color: var(--muted-2); }
.cell__label { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.cell--ink { background: var(--ink); color: var(--bg); }
.cell--ink .cell__num { color: var(--green-light); }
.cell--ink .cell__label { color: var(--bg); }

.stat { padding: 20px 18px; }
.stat--lg { padding: 26px 22px; }
.stat__value { margin: 0; font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1; }
.stat--lg .stat__value { font-size: 38px; }
.stat__label { margin: 8px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted); }
.stat--lg .stat__label { margin-top: 10px; font-size: 14px; }

.tags { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags--flush { margin-bottom: 0; }
.tags li {
  font: 400 14px/1 var(--sans); color: var(--ink-2);
  border: 1px solid var(--line-3); padding: 9px 14px; border-radius: 2px;
}
.tags--on-dark li { color: rgba(244, 239, 233, .8); border-color: rgba(199, 122, 85, .4); }

/* ==========================================================================
   Immobilien-Kompass
   ========================================================================== */

.compass__tabs {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  background: var(--line-2); border: 1px solid var(--line-2);
}
.compass__tab {
  text-align: left; cursor: pointer; border: none;
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px; min-height: 130px;
  transition: background .3s ease;
  font-family: var(--sans); background: var(--bg-alt); color: var(--ink);
}
.compass__tab[aria-selected="true"] { background: var(--bg); box-shadow: inset 0 3px 0 var(--green); }
.compass__tab-num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--green); }
.compass__tab-label { font: 500 clamp(17px, 1.5vw, 20px)/1.35 var(--sans); letter-spacing: -.008em; }

.compass__panel {
  background: var(--bg); border: 1px solid var(--line-2); border-top: none;
  padding: clamp(26px, 3vw, 44px);
}
.compass__panel[hidden] { display: none; }
.compass__lead {
  margin: 0 0 clamp(22px, 2.4vw, 30px);
  font: 400 clamp(18px, 1.5vw, 22px)/1.55 var(--sans);
  color: var(--ink); max-width: 60ch; text-wrap: pretty;
}
.compass__path {
  margin: 0 0 clamp(24px, 2.6vw, 32px); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.compass__path li { display: flex; align-items: center; gap: 10px; }
.compass__step {
  font: 500 15px/1 var(--sans); color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line-3);
  padding: 12px 16px; border-radius: 2px;
  transition: background .25s ease, border-color .25s ease;
}
.compass__step:hover { background: var(--sand); border-color: rgba(23, 25, 26, .36); color: var(--ink); }
.compass__sep { font: 400 14px/1 var(--sans); color: var(--sand-2); }

/* ==========================================================================
   Vorher / Nachher
   ========================================================================== */

.ba {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid var(--line-2);
  background: repeating-linear-gradient(135deg, #EDE7DC 0 12px, #E4DCCD 12px 24px);
}
.ba__after, .ba__before { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 26px; }
.ba__after { justify-content: flex-end; }
.ba__after img, .ba__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The "before" layer keeps the full frame size and is only cropped — shrinking
   its width would rescale the image instead of revealing the one underneath. */
.ba__clip { position: absolute; inset: 0; overflow: hidden; z-index: 1; clip-path: inset(0 50% 0 0); }
.ba__before { background: repeating-linear-gradient(135deg, #3A3E40 0 12px, #2C3032 12px 24px); }
.ba__label {
  position: relative;
  font: 400 11px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #57503F;
}
.ba__after .ba__label { text-align: right; }
.ba__before .ba__label { color: #CFC7B7; }
.ba__line {
  position: absolute; top: 0; bottom: 0; width: 1px; left: 50%;
  background: rgba(247, 244, 238, .92); box-shadow: 0 0 0 1px rgba(23, 25, 26, .22); z-index: 2;
}
/* Der Griff hängt an der Linie, nicht am Range-Thumb: der native Thumb läuft
   nur zwischen 0 und (Breite − Thumbbreite) und säße an den Rändern daneben. */
.ba__line::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 104px; border-radius: 13px;
  background: rgba(10, 14, 12, .78);
  backdrop-filter: blur(5px) saturate(115%);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  border: 1px solid rgba(247, 244, 238, .22);
  box-shadow:
    0 14px 34px rgba(8, 20, 16, .42),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.ba__line::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font: 400 13px/1 var(--sans); letter-spacing: .1em; text-indent: .1em;
  color: rgba(247, 244, 238, .9); white-space: nowrap;
}
.ba:hover .ba__line::before { transform: translate(-50%, -50%) scale(1.06); }
.ba__badge {
  position: absolute; top: 20px;
  font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 2px; z-index: 2;
}
.ba__badge--before { left: 22px; color: var(--bg); background: rgba(23, 25, 26, .72); }
.ba__badge--after { right: 22px; color: var(--ink); background: rgba(246, 243, 237, .86); }

input[type="range"].ba__range {
  position: absolute; left: 0; right: 0; bottom: calc(50% - 52px);
  width: 100%; height: 104px; margin: 0; cursor: ew-resize; z-index: 3;
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* Nur noch Greiffläche — sichtbar ist der Griff an der Linie. */
input[type="range"].ba__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 104px; border-radius: 13px;
  background: transparent; border: 0; box-shadow: none; cursor: ew-resize;
}
input[type="range"].ba__range::-moz-range-thumb {
  width: 26px; height: 104px; border-radius: 13px;
  background: transparent; border: 0; cursor: ew-resize;
}

.ba__meta { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); padding-top: 22px; }
.ba__meta p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); max-width: 44ch; }
.ba__meta strong { font-weight: 500; }
.ba__meta .fineprint { margin: 0; }

/* ==========================================================================
   Listen: Leistungen, Journal, Timeline
   ========================================================================== */

.list-row {
  border-top: 1px solid rgba(23, 25, 26, .16);
  padding: clamp(28px, 3.2vw, 46px) 0;
  display: grid;
  grid-template-columns: 64px minmax(min(100%, 230px), 1fr) minmax(min(100%, 260px), 1.2fr);
  gap: clamp(18px, 2.6vw, 44px); align-items: start;
}
.list-row__num { font: 400 13px/1.6 var(--mono); letter-spacing: .08em; color: var(--green); padding-top: 6px; }
.list-row__problem { margin: 0; font: 400 16px/1.62 var(--sans); color: var(--muted); max-width: 36ch; text-wrap: pretty; }
.list-row__text { margin: 0 0 20px; font: 400 17px/1.62 var(--sans); color: var(--ink); max-width: 52ch; text-wrap: pretty; }
.list-end { border-top: 1px solid rgba(23, 25, 26, .16); }

.list-row--on-dark { border-top-color: rgba(244, 239, 233, .18); }
.list-row--on-dark .list-row__num { color: var(--copper); }
.list-row--on-dark .list-row__problem { color: rgba(244, 239, 233, .66); }
.list-row--on-dark .list-row__text { color: var(--cream); }
.list-end--on-dark { border-top-color: rgba(244, 239, 233, .18); }

.list-row__en {
  margin: 0 0 8px; font: 400 11px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--copper);
}

@media (max-width: 720px) {
  .list-row { grid-template-columns: 1fr; }
  .list-row__num { padding-top: 0; }
}

.journal-row {
  border-top: 1px solid rgba(23, 25, 26, .16);
  padding: clamp(24px, 2.8vw, 38px) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.6vw, 44px); align-items: baseline;
}
.journal-row__meta { margin: 0 0 10px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.journal-row__title {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.14; letter-spacing: -.015em; max-width: 22ch;
}
.journal-row__text { margin: 0; font: 400 16px/1.62 var(--sans); color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  padding: 0 0 clamp(24px, 2.6vw, 32px) clamp(18px, 2.2vw, 32px);
  border-left: 1px solid rgba(23, 25, 26, .16);
}
.timeline__num { font: 400 12px/1.6 var(--mono); letter-spacing: .09em; color: var(--green); padding-top: 3px; }
.timeline__title { margin: 0 0 8px; font: 500 19px/1.3 var(--sans); letter-spacing: -.005em; }
.timeline__text { margin: 0; font: 400 16px/1.62 var(--sans); color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }

/* ==========================================================================
   Portfolio & Stimmen
   ========================================================================== */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(22px, 2.8vw, 42px);
}
.project-card { display: flex; flex-direction: column; gap: 14px; }
.project-card__title { margin: 0; font: 500 19px/1.3 var(--sans); }
.project-card__meta { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(26px, 3.2vw, 52px);
}
.quote {
  margin: 0; display: flex; flex-direction: column; gap: 20px;
  border-top: 1px solid var(--line-3); padding-top: 24px;
}
.quote blockquote {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(20px, 1.7vw, 25px); line-height: 1.42; letter-spacing: -.008em;
  color: var(--ink); text-wrap: pretty;
}
.quote figcaption { font: 400 14px/1.5 var(--sans); color: var(--muted); }

.deflist {
  margin: 32px 0 0; display: grid; grid-template-columns: auto 1fr;
  gap: 12px 24px; font: 400 15px/1.5 var(--sans);
}
.deflist dt { color: var(--muted); }
.deflist dd { margin: 0; }
.deflist--contact { margin: clamp(34px, 4vw, 54px) 0 0; gap: 14px 28px; font-size: 17px; }
.deflist--contact dt { font-size: 14px; padding-top: 2px; }

.case-blocks { display: flex; flex-direction: column; gap: 26px; }
.case-block { border-top: 1px solid rgba(23, 25, 26, .16); padding-top: 18px; }
.case-block__label {
  margin: 0 0 8px; font: 500 12px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.case-block__text { margin: 0; font: 400 17px/1.62 var(--sans); color: var(--ink); max-width: 54ch; text-wrap: pretty; }

/* ==========================================================================
   Finanzierung / Kaufen & Verkaufen
   ========================================================================== */

.crumb {
  margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 12px/1.5 var(--mono); letter-spacing: .16em; color: var(--green);
}
.crumb a { color: var(--green); }
.crumb span { color: var(--sand-2); }

.step { padding: 26px 22px; min-height: 170px; display: flex; flex-direction: column; gap: 14px; }
.step__num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--green); }
.step__title { margin: 0; font: 500 18px/1.3 var(--sans); letter-spacing: -.005em; }
.step__text { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }

.panel { padding: clamp(26px, 3vw, 42px); display: flex; flex-direction: column; }
.panel__text { margin: 0 0 22px; font: 400 17px/1.65 var(--sans); color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.coming {
  margin-top: auto; border: 1px dashed rgba(23, 25, 26, .28);
  background: var(--bg-alt); padding: clamp(24px, 3vw, 38px); text-align: center;
}
.coming__title { margin: 0 0 8px; font: 500 clamp(19px, 1.8vw, 24px)/1.3 var(--sans); color: var(--ink); }
.coming__text { margin: 0 0 20px; font: 400 15px/1.55 var(--sans); color: var(--muted); }

.disclaimer {
  margin: clamp(40px, 4.4vw, 64px) 0 0; padding-top: 22px;
  border-top: 1px solid rgba(246, 243, 237, .2); max-width: 88ch;
  font: 400 13px/1.62 var(--sans); color: rgba(246, 243, 237, .6);
}
.sec--ink .h2, .sec--ink .claim { color: var(--bg); }
.finance-claim { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.14; letter-spacing: -.02em; max-width: 24ch; }
.finance-list { margin: clamp(32px, 3.6vw, 48px) 0 0; font: 500 clamp(16px, 1.5vw, 21px)/1.6 var(--sans); color: var(--green-light); letter-spacing: .01em; }
.finance-claim-sm { margin: 18px 0 0; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; }

/* ==========================================================================
   Kontakt
   ========================================================================== */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 88px); align-items: start;
  padding: clamp(44px, 5.5vw, 84px) 0 clamp(60px, 7vw, 108px);
}
.contact-form {
  display: flex; flex-direction: column; gap: 22px;
  background: var(--bg-alt); padding: clamp(24px, 3vw, 44px); border: 1px solid rgba(23, 25, 26, .1);
}
.contact-form__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 22px;
}
.contact-form label {
  display: flex; flex-direction: column; gap: 9px; font: 500 15px/1 var(--sans);
}
.contact-form label span { color: var(--muted); font-weight: 400; }
.contact-form__label { color: var(--ink) !important; font-weight: 500; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: 400 17px/1 var(--sans); padding: 15px 14px;
  border: 1px solid rgba(23, 25, 26, .22); background: var(--bg);
  border-radius: 2px; color: var(--ink); width: 100%;
}
.contact-form textarea { line-height: 1.55; resize: vertical; }
.contact-form button { align-self: flex-start; border: none; }
.contact-form__note { margin: 0; font: 400 13px/1.55 var(--sans); color: var(--muted); }
.contact-form__hp { position: absolute; left: -9999px; }
.form-message {
  margin: 0; padding: 14px 16px; border-radius: 2px;
  font: 400 15px/1.5 var(--sans); border: 1px solid var(--line-3); background: var(--bg);
}
.form-message--ok { border-color: var(--green); color: var(--green); }
.form-message--error { border-color: #A8443A; color: #A8443A; }

/* ==========================================================================
   CTA & Footer
   ========================================================================== */

.cta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: end;
}
.cta-grid .h2 { max-width: 14ch; font-size: clamp(34px, 4.4vw, 66px); line-height: 1.05; letter-spacing: -.02em; }
.cta-grid p { margin: 0 0 28px; max-width: 44ch; font: 400 17px/1.65 var(--sans); color: rgba(246, 243, 237, .72); text-wrap: pretty; }

.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(24px, 2.6vw, 36px) var(--gutter) clamp(16px, 1.8vw, 22px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px clamp(24px, 3vw, 48px);
}
.site-footer__brand-line { display: flex; align-items: center; gap: 12px; margin: 0; }
.site-footer__blurb {
  margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); max-width: 34ch;
}
/* Auszeichnungen: klein, ruhig, zwischen Wortmarke und Footer-Links. */
.site-footer__awards {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 1.8vw, 26px);
  list-style: none; margin: 0; padding: 0;
}
.site-footer__awards img {
  height: clamp(52px, 5vw, 68px); width: auto; object-fit: contain;
  opacity: .85; transition: opacity .3s ease;
}
.site-footer__awards img:hover { opacity: 1; }

.footer-links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px clamp(18px, 2vw, 30px);
  list-style: none; margin: 0; padding: 0;
  font: 500 14.5px/1 var(--sans);
}
.footer-links a:hover { color: var(--green); }
.site-footer__legal { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 20px; }
.site-footer__legal p {
  margin: 0; padding-top: 14px; border-top: 1px solid rgba(23, 25, 26, .1);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  font: 400 12px/1.5 var(--sans); color: var(--muted-2);
}
.brand--footer svg.brand__logo, .brand--footer img.brand__logo { height: 22px; }
.brand--footer .brand__word { font-size: 16px; }

/* ==========================================================================
   Journal single / generic pages
   ========================================================================== */

.entry { padding: clamp(44px, 5.5vw, 84px) 0 clamp(56px, 6vw, 96px); }
.entry__meta { margin: 0 0 14px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.entry__content { max-width: 68ch; font: 400 17px/1.7 var(--sans); color: var(--ink-2); }
.entry__content h2 { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: var(--ink); margin: 40px 0 14px; }
.entry__content h3 { font: 500 21px/1.3 var(--sans); color: var(--ink); margin: 32px 0 10px; }
.entry__content a { border-bottom: 1px solid rgba(23, 25, 26, .3); }
.entry__content blockquote {
  margin: 32px 0; padding-left: 22px; border-left: 2px solid var(--sand-2);
  font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.45; color: var(--ink);
}
.entry__content img { margin: 28px 0; }
.entry__content ul, .entry__content ol { padding-left: 20px; }
.pagination { display: flex; gap: 12px; padding-top: 24px; font: 500 15px/1 var(--sans); }
.pagination .page-numbers { padding: 10px 14px; border: 1px solid var(--line-3); border-radius: 2px; }
.pagination .current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ==========================================================================
   Kurzzeitvermietung — Teaser band on the homepage (playful colours)
   ========================================================================== */

.kurz-teaser { background: var(--blue, #1C6AD6); color: #fff; }
.kurz-teaser__inner {
  max-width: 1440px; margin: 0 auto; padding: clamp(48px, 5.5vw, 88px) clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.kurz-teaser__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .18); color: #fff;
  font: 600 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px;
}
.kurz-teaser__title {
  margin: 20px 0 0; font: 700 clamp(30px, 3.6vw, 50px)/1.06 var(--sans);
  letter-spacing: -.03em; max-width: 18ch; text-wrap: balance;
}
.kurz-teaser__title em { font-style: normal; color: #FFD66B; }
.kurz-teaser__text { margin: 18px 0 0; max-width: 46ch; font: 400 17px/1.6 var(--sans); color: rgba(255, 255, 255, .84); }
.kurz-teaser__stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 26px 0 0; padding: 0; list-style: none; }
.kurz-teaser__stats strong { display: block; font: 700 clamp(24px, 2.4vw, 34px)/1 var(--sans); color: #FFD66B; }
.kurz-teaser__stats span { font: 400 14px/1.4 var(--sans); color: rgba(255, 255, 255, .8); }
.kurz-teaser__btn {
  display: inline-flex; margin-top: 30px; background: #fff; color: #0E3F8C;
  font: 600 17px/1 var(--sans); padding: 19px 30px; border-radius: 999px;
  transition: transform .2s ease, background .2s ease;
}
.kurz-teaser__btn:hover { transform: translateY(-2px); background: #FFD66B; color: #08224A; }
.kurz-teaser__media img { width: 100%; border-radius: 24px; box-shadow: 0 24px 60px rgba(4, 22, 52, .35); display: block; }

/* ==========================================================================
   Konzept 2026 — Hauptseite & Unterseiten
   Modern, aber ruhig: tiefes Grün, Gold als Akzent, weiche Karten,
   Bewegung nur beim Scrollen.
   ========================================================================== */

/* --------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; }
.reveal--d2 { transition-delay: .16s; }
.reveal--d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- hero */

.k-hero { position: relative; padding: clamp(56px, 7vw, 116px) 0 clamp(48px, 5.5vw, 88px); }
.k-hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
.k-hero__title {
  margin: 18px 0 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(44px, 6vw, 92px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
}
.k-hero__title em { color: var(--green); }
.k-hero__media { position: relative; }
.k-hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
.k-hero__claim {
  margin: clamp(26px, 3vw, 38px) 0 0; padding: 22px 26px;
  background: var(--green); color: var(--bg); border-radius: var(--radius-md);
  font-family: var(--display); font-weight: 300; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35;
}

/* Schlagwörter, keine Schaltflächen: keine Kontur, kein Feld — die Wörter
   hängen wie im Fließtext aneinander, getrennt durch einen goldenen Punkt
   (dasselbe Muster wie .k-welt__tags). */
.k-words {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0;
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding-top: 24px; border-top: 1px solid var(--line-2);
}
/* Das .is-in braucht dieselbe Spezifität wie die Startregel, sonst bleibt es
   beim gedimmten Zustand hängen. */
.js .k-words span[data-word] { opacity: .35; }
.js .k-words span[data-word].is-in { opacity: 1; }
.k-words span {
  font: 400 clamp(15px, 1.2vw, 16.5px)/1.6 var(--sans); letter-spacing: .05em;
  color: var(--muted);
  transition: opacity .5s var(--ease), color .5s ease;
}
/* Trenner am Wortende, nicht am Wortanfang: beim Umbruch soll keine Zeile
   mit einem Punkt beginnen. */
.k-words span:not(:last-child)::after {
  content: "·"; color: var(--gold); margin: 0 clamp(12px, 1.2vw, 18px);
}
.k-words span.is-in { opacity: 1; color: var(--ink-2); }

/* -------------------------------------------------------------- compass */

.k-compass { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.k-card {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: clamp(24px, 2.6vw, 34px); min-height: 220px;
  transition: transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
  color: var(--ink);
}
.k-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(30, 64, 52, .28); color: var(--ink); }
.k-card__num { font: 600 12px/1 var(--sans); letter-spacing: .16em; color: var(--gold); }
.k-card__title { margin: 0; font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: -.01em; }
.k-card__text { margin: 0; font: 400 15.5px/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.k-card__more { margin-top: auto; font: 500 15px/1 var(--sans); color: var(--green); }
.k-card:hover .k-card__more { color: var(--gold); }

.k-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-chain li { display: flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); color: var(--green); }
.k-chain li::after { content: "→"; color: var(--sand-2); font-weight: 400; }
.k-chain li:last-child::after { content: ""; }
.k-chain--pill li {
  background: rgba(30, 64, 52, .06); border-radius: 999px; padding: 9px 14px;
}
.k-chain--pill li::after { display: none; }
/* Schlagwortzeile statt Pillen (Vorher/Nachher) — wie die Wörter im Hero.
   Doppelte Klasse, damit die späteren .k-chain--pill-Regeln nicht gewinnen. */
.k-chain--pill.k-chain--words { gap: 2px 0; align-items: baseline; }
.k-chain--pill.k-chain--words li {
  background: none; border: 0; border-radius: 0; padding: 0;
  font: 400 clamp(15px, 1.2vw, 16.5px)/1.6 var(--sans); letter-spacing: .05em;
  color: var(--muted);
}
.k-chain--pill.k-chain--words li:not(:last-child)::after {
  display: inline; content: "·"; color: var(--gold);
  margin: 0 clamp(12px, 1.2vw, 18px); font-weight: 400;
}
.k-chain--on-dark li { color: var(--gold-soft); }
.k-chain--on-dark li::after { color: rgba(255, 255, 255, .4); }

/* ------------------------------------------------------------ Leistungswelten */

/* Auf der Startseite ein ruhiges Verzeichnis: keine Kästen, keine fünf
   Buttons — nur Haarlinien, eine Nummer und ein Pfeil je Zeile. */
.k-welten { display: grid; }
.k-welt {
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: clamp(14px, 1.8vw, 28px); align-items: baseline;
  transition: background .3s ease;
}
.k-welt:last-child { border-bottom: 1px solid var(--line); }
.k-welt__num { font: 400 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--gold); }
.k-welt__title { margin: 0 0 4px; font-family: var(--sans); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -.01em; }
.k-welt__text { margin: 0 0 8px; font: 400 15.5px/1.6 var(--sans); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.k-welt__tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.k-welt__tags li { font: 400 13px/1.5 var(--sans); color: var(--muted-2); }
.k-welt__tags li + li::before { content: "·"; color: var(--gold); margin-right: 12px; }
.k-welt__cta {
  justify-self: end; white-space: nowrap;
  font: 500 15px/1.4 var(--sans); color: var(--green);
}
.k-welt__cta span { display: inline-block; transition: transform .3s var(--ease); }
.k-welt:hover .k-welt__cta span { transform: translateX(4px); }
@media (max-width: 860px) {
  .k-welt { grid-template-columns: 32px minmax(0, 1fr); }
  .k-welt__cta { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* ---------------------------------------------------------------- tabs */

.k-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 2.6vw, 34px); }
.k-tab {
  font: 500 16px/1 var(--sans); cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 14px 22px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.k-tab[aria-selected="true"] { background: var(--green); color: var(--bg); border-color: var(--green); }
.k-panel[hidden] { display: none; }
.k-measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.k-measures li {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 16px 18px; font: 400 15.5px/1.45 var(--sans); color: var(--ink);
}
.k-measures li strong { display: block; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }

/* ------------------------------------------------------------- Kampagne */

.k-campaign {
  background:
    linear-gradient(180deg, rgba(30, 64, 52, .9), rgba(30, 64, 52, .9)),
    var(--green);
  color: var(--bg); border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(40px, 5vw, 76px) clamp(26px, 4vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.k-campaign--image { background-size: cover; background-position: center; }

/* Stilbruch: Das Band bekommt keinen eigenen Hintergrund. Stattdessen zieht
   der negative Abstand den folgenden Abschnitt nach oben — dessen Farbe
   beginnt hinter der Karte, die damit echt in ihn hineinragt. */
.k-altbau { background: none; }
.k-altbau .sec__inner { padding: clamp(26px, 3vw, 46px) 0 0; }
.k-altbau .k-campaign {
  position: relative; z-index: 1;
  padding: clamp(32px, 3.6vw, 56px) clamp(24px, 3.4vw, 52px);
  margin-bottom: calc(-1 * clamp(46px, 5vw, 84px));
  box-shadow: 0 16px 40px rgba(12, 30, 24, .14);
}
/* Der Abschnitt darunter startet hinter der Karte — sein normaler Abstand
   fängt also 70px zu früh an. Etwas Luft dazu, sonst klebt der Text. */
.k-altbau + .sec .sec__inner { padding-top: calc(var(--section-y) + clamp(24px, 3vw, 52px)); }
/* Die Kante läuft hinter der Karte — eine Trennlinie quer darüber würde den
   Effekt zerschneiden. */
.k-altbau + .sec { border-top: none; }
.k-altbau + .sec::before { display: none; }
.k-campaign__title { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.02em; }
.k-campaign p { margin: 18px 0 0; font: 400 17px/1.68 var(--sans); color: rgba(247, 244, 238, .82); max-width: 46ch; }

/* ------------------------------------------------------------ Vermietung */

/* Zwei mal zwei, im Schachbrett grün und hell — jede Karte mit Icon, Titel
   und Text, deutlich größer als die frühere Viererreihe. */
.k-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.k-model {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: clamp(28px, 3.2vw, 48px); display: flex; flex-direction: column; gap: 14px; min-height: 280px;
  transition: transform .35s var(--ease), box-shadow .35s ease, background .3s ease, border-color .3s ease;
  color: var(--ink);
}
.k-model:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); color: var(--ink); }
.k-model__icon {
  display: grid; place-items: center; flex: none;
  width: clamp(48px, 4.4vw, 60px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-2); color: var(--green);
  margin-bottom: clamp(4px, .8vw, 10px);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* Farbe kommt vom Kreis — sonst zieht die Grundregel .al-icon alles auf Grün. */
.k-model__icon .al-icon { width: 46%; height: 46%; color: inherit; }
.k-model:hover .k-model__icon { background: var(--green); border-color: var(--green); color: var(--cream); }
.k-model h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.015em; }
.k-model p { margin: 0; font: 400 clamp(16px, 1.3vw, 17.5px)/1.6 var(--sans); color: var(--ink-2); max-width: 40ch; }
.k-model__more { margin-top: auto; font: 500 15px/1 var(--sans); color: var(--gold); }

@media (max-width: 720px) {
  .k-models { grid-template-columns: 1fr; }
  .k-model { min-height: 0; }
}

/* ------------------------------------------------------- Projektservice */

/* Netzwerk-Ring: Mitte mit Logo, acht Partner auf der Kreisbahn, Beschriftung
   außen. Winkel und Radius kommen aus zwei Variablen — Linie, Kreis und Text
   einer Speiche teilen sich dieselben, damit nichts auseinanderläuft. */
.split--hub { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); align-items: center; }

.k-hub { display: grid; place-items: center; }
.k-hub__ring {
  --ring: clamp(270px, 28vw, 400px);
  --r: calc(var(--ring) / 2);
  --node: clamp(46px, 4.2vw, 60px);
  --center: clamp(136px, 14vw, 200px);
  position: relative;
  width: var(--ring); aspect-ratio: 1;
  display: grid; place-items: center;
}
/* Die Kreisbahn, auf der die Partner sitzen. */
.k-hub__ring::before {
  content: ""; position: absolute; inset: 0;
  border: 1px dashed rgba(228, 211, 174, .22); border-radius: 50%;
}

/* Ohne eigene Box: sonst belegen die acht Speichen Grid-Zeilen im Ring und
   schieben die Mitte nach oben. Linie, Kreis und Text liegen ohnehin absolut. */
.k-hub__spoke { display: contents; }

.k-hub__center {
  position: relative; z-index: 3;
  width: var(--center); aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); color: var(--green);
  display: grid; place-items: center; align-content: center; gap: 1px;
  text-align: center; padding: 12px;
  box-shadow: 0 0 0 1px rgba(185, 146, 68, .55), 0 0 0 9px rgba(20, 40, 32, .55), 0 22px 60px rgba(4, 16, 12, .5);
  transform: scale(.9); opacity: 0;
  transition: transform .7s var(--ease), opacity .5s ease;
}
.k-hub.is-in .k-hub__center { transform: scale(1); opacity: 1; }
.k-hub__logo { width: clamp(54px, 5.6vw, 82px); height: auto; color: var(--green); }
.k-hub__center strong {
  margin-top: 8px;
  font: 600 clamp(10px, .9vw, 11.5px)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.k-hub__center span { font: 400 clamp(10px, .9vw, 11.5px)/1.3 var(--sans); color: var(--muted); }

/* Linie vom Zentrum zum Kreis — der Anfang liegt hinter der Mitte. */
.k-hub__line {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: calc(var(--r) - var(--node) / 2); height: 1px;
  transform-origin: 0 50%;
  transform: rotate(var(--a)) scaleX(0);
  background: rgba(228, 211, 174, .38);
  transition: transform .7s var(--ease) calc(var(--i) * 70ms + 200ms), background .3s ease;
}
.k-hub.is-in .k-hub__line { transform: rotate(var(--a)) scaleX(1); }
/* Goldener Punkt dort, wo die Linie die Mitte verlässt. */
.k-hub__line::before {
  content: ""; position: absolute; left: calc(var(--center) / 2 - 3px); top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--gold);
  transition: transform .3s var(--ease), box-shadow .3s ease;
}

.k-hub__node {
  --x: calc(var(--r) * var(--cos));
  --y: calc(var(--r) * var(--sin));
  /* --mx/--my: Magnet-Versatz zur Maus, setzt app.js per Frame am Spoke. */
  --pos: translate(-50%, -50%) translate(var(--x), var(--y)) translate(var(--mx, 0px), var(--my, 0px));
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--node); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); border: 1px solid rgba(228, 211, 174, .4);
  color: var(--bg);
  transform: var(--pos) scale(.85); opacity: 0;
  transition:
    transform .55s var(--ease) calc(var(--i) * 70ms + 320ms),
    opacity .45s ease calc(var(--i) * 70ms + 320ms),
    border-color .3s ease, background .3s ease;
}
.k-hub.is-in .k-hub__node { transform: var(--pos) scale(1); opacity: 1; }
.k-hub__icon { width: 46%; height: 46%; stroke-width: 1.5; }

.k-hub__label {
  --gap: clamp(10px, 1.2vw, 18px);
  --x: calc(var(--r) * var(--cos));
  --y: calc(var(--r) * var(--sin));
  --off: calc(var(--node) / 2 + var(--gap));
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: grid; gap: 2px; width: clamp(96px, 10vw, 132px);
  opacity: 0; transition: opacity .45s ease calc(var(--i) * 70ms + 420ms);
}
.k-hub.is-in .k-hub__label { opacity: 1; }
.k-hub__label strong {
  font: 600 clamp(10.5px, .95vw, 12px)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg); transition: color .3s ease;
}
.k-hub__label span { font: 400 clamp(10.5px, .95vw, 12px)/1.35 var(--sans); color: rgba(247, 244, 238, .62); }

/* Die Beschriftung steht neben ihrem Kreis, nicht radial nach außen —
   sonst rücken die diagonalen Speichen einander auf die Füße. */
.k-hub__spoke--right .k-hub__label {
  transform: translate(calc(var(--x) + var(--off) + var(--mx, 0px) * .5), calc(var(--y) - 50% + var(--my, 0px) * .5));
  text-align: left;
}
.k-hub__spoke--left .k-hub__label {
  transform: translate(calc(var(--x) - var(--off) - 100% + var(--mx, 0px) * .5), calc(var(--y) - 50% + var(--my, 0px) * .5));
  text-align: right;
}
.k-hub__spoke--top .k-hub__label {
  transform: translate(calc(var(--x) - 50% + var(--mx, 0px) * .5), calc(var(--y) - var(--off) - 100% + var(--my, 0px) * .5));
  text-align: center;
}
.k-hub__spoke--bottom .k-hub__label {
  transform: translate(calc(var(--x) - 50% + var(--mx, 0px) * .5), calc(var(--y) + var(--off) + var(--my, 0px) * .5));
  text-align: center;
}

/* Sobald der Zeiger im Ring ist (is-live), weicht die lange Reveal-Transition
   einer kurzen — sie würde das Magnet-Lerp sonst zäh nachziehen lassen. */
.k-hub.is-live .k-hub__node {
  transition: transform .16s ease-out, opacity .45s ease, border-color .3s ease, background .3s ease;
}

/* Zeigen: Kreis, Linie und Beschriftung reagieren gemeinsam. */
.k-hub__spoke:hover .k-hub__node {
  transform: var(--pos) scale(1.08);
  background: var(--green-2); border-color: var(--gold);
  transition-delay: 0s;
}
.k-hub__spoke:hover .k-hub__line { background: var(--gold); transition-delay: 0s; }
.k-hub__spoke:hover .k-hub__line::before { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(185, 146, 68, .2); }
.k-hub__spoke:hover .k-hub__label strong { color: var(--gold-soft); }

/* Der Text links steht auf Grün — sonst bleiben Fließtext und Aussage dunkel. */
.sec--ink .lead { color: rgba(247, 244, 238, .82); }
.sec--ink .k-statement, .sec--ink .k-statement em { color: var(--bg); }
.sec--ink .eyebrow { color: var(--gold-soft); }

/* Unter 900px trägt der Ring die Beschriftungen nicht mehr: Liste daraus. */
@media (max-width: 900px) {
  .split--hub { grid-template-columns: 1fr; }
  .k-hub__ring {
    width: 100%; aspect-ratio: auto; display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .k-hub__ring::before { display: none; }
  .k-hub__line { display: none; }
  .k-hub__center { grid-column: 1 / -1; justify-self: center; }
  .k-hub__spoke { display: flex; align-items: center; gap: 12px; }
  .k-hub__node { position: static; transform: none; opacity: 1; flex: none; width: 44px; }
  .k-hub.is-in .k-hub__node { transform: none; }
  .k-hub__label { position: static; transform: none !important; width: auto; text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  .k-hub__center, .k-hub__line, .k-hub__node, .k-hub__label { transition: none; }
}

/* ---------------------------------------------------------------- Prozess */

.k-process { position: relative; display: grid; gap: clamp(20px, 2.4vw, 30px); }
.k-process__track { position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px; background: var(--line-2); }
.k-process__fill { position: absolute; left: 27px; top: 12px; width: 2px; background: var(--green); height: 0; transition: height .25s linear; }
.k-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); align-items: start; position: relative; }
.k-step__dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
  display: grid; place-items: center; font: 600 15px/1 var(--sans); color: var(--muted);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
  position: relative; z-index: 1;
}
.k-step.is-in .k-step__dot { background: var(--green); border-color: var(--green); color: var(--bg); }
.k-step h3 { margin: 12px 0 6px; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.k-step p { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink-2); max-width: 52ch; }

/* -------------------------------------------------------------- Referenz */

.k-case {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 60px); align-items: center;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  overflow: hidden;
}
.k-case__media { min-height: 100%; }
.k-case__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.k-case__body { padding: clamp(26px, 3.4vw, 48px); }
.k-case__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.k-case__steps li { font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: rgba(30, 64, 52, .07); padding: 10px 13px; border-radius: 999px; }

/* ------------------------------------------------------------- Tippgeber */

.k-tip {
  background: var(--sand-soft); border-radius: var(--radius-lg);
  padding: clamp(34px, 4.4vw, 68px) clamp(26px, 4vw, 60px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(26px, 4vw, 56px); align-items: center;
}
.k-tip__title { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; color: var(--green); letter-spacing: -.02em; }
.k-tip .k-chain li { color: var(--green); }
.k-tip .k-chain--pill li { background: rgba(30, 64, 52, .08); }

/* ----------------------------------------------------------------- Warum */

.k-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(18px, 2.2vw, 30px); }
.k-reason { border-top: 2px solid var(--gold); padding-top: 22px; }
.k-reason h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; }
.k-reason p { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink-2); }

/* ----------------------------------------------------------------- Claim */

.k-claim { text-align: center; }
.k-claim__line {
  margin: 0 0 14px; font-family: var(--display); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1.3; color: rgba(247, 244, 238, .5);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .6s ease;
}
.js .k-claim__line { opacity: 0; transform: translateY(10px); }
.js .k-claim__line.is-in { opacity: 1; transform: none; }
.k-claim__final {
  margin: clamp(22px, 3vw, 40px) 0 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(36px, 5.4vw, 78px); line-height: 1.05; letter-spacing: -.02em; color: var(--bg);
}

/* --------------------------------------------------------------- Kontakt */

.k-intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 42px); }
.k-intent {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  padding: 22px 24px; color: var(--ink);
  transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease;
}
.k-intent:hover { transform: translateY(-4px); border-color: var(--green); box-shadow: var(--shadow-sm); color: var(--ink); }
.k-intent strong { font: 500 18px/1.2 var(--sans); }
.k-intent span { font: 400 14.5px/1.4 var(--sans); color: var(--muted); }

/* ------------------------------------------------------- Unterseiten */

.k-page-hero { padding: clamp(44px, 5.5vw, 92px) 0 clamp(30px, 3.4vw, 50px); }
.k-page-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(30px, 4vw, 64px); align-items: center; }
.k-statement {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.018em;
  color: var(--green); max-width: 24ch; text-wrap: balance;
}
.k-statement--center { margin-inline: auto; text-align: center; max-width: 26ch; }

.k-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.k-block { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: clamp(24px, 2.6vw, 34px); }
.k-block h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; }
.k-block p { margin: 0; font: 400 16px/1.62 var(--sans); color: var(--ink-2); }

.k-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.k-route {
  display: flex; flex-direction: column; gap: 14px; min-height: 260px;
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: var(--green); color: var(--bg);
  padding: clamp(28px, 3vw, 44px);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.k-route:hover { transform: translateY(-6px); box-shadow: var(--shadow); color: var(--bg); }
.k-route--light { background: var(--bg-alt); color: var(--ink); }
.k-route--light:hover { color: var(--ink); }
.k-route__eyebrow { font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.k-route h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; }
.k-route p { margin: 0; font: 400 16px/1.6 var(--sans); color: rgba(247, 244, 238, .78); max-width: 40ch; }
.k-route--light p { color: var(--ink-2); }
.k-route span { margin-top: auto; font: 500 15px/1 var(--sans); }

.k-empty {
  border: 1px dashed var(--line-3); border-radius: var(--radius-lg);
  background: var(--bg-alt); padding: clamp(34px, 4vw, 60px); text-align: center;
}
.k-empty h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; }
.k-empty p { margin: 0 auto 26px; font: 400 17px/1.62 var(--sans); color: var(--ink-2); max-width: 46ch; }

/* ------------------------------------------------------- Navigation (Ebene 2) */

.main-nav li { position: relative; }

/* Ein Punkt mit Enkeln (Leistungen) spannt ein Panel unter die ganze
   Kopfzeile — sonst würde es den Header überlappen. */
.main-nav > ul > li:has(.sub-menu .sub-menu) { position: static; }

/* Unsichtbare Brücke bis zur Unterkante der Kopfzeile: sonst verliert der
   Zeiger auf dem Weg zum Panel den Hover und das Menü klappt wieder zu. */
.main-nav > ul > .menu-item-has-children > a { position: relative; }
.main-nav > ul > .menu-item-has-children > a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
}

.main-nav .sub-menu {
  position: absolute; top: 100%; left: -18px; min-width: 240px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: var(--shadow); padding: 12px; margin: 0;
  display: flex; flex-direction: column; gap: 2px; align-items: stretch;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s var(--ease), visibility .22s;
  z-index: 60;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.main-nav .sub-menu a {
  display: block;
  padding: 11px 14px; border-radius: var(--radius); border-bottom: none;
  font: 500 15.5px/1.35 var(--sans); white-space: nowrap;
}
.main-nav .sub-menu a:hover { background: rgba(30, 64, 52, .07); border-bottom: none; color: var(--green); }
.main-nav > ul > .menu-item-has-children > a::after { content: "⌄"; margin-left: 6px; font-size: 13px; opacity: .55; }

/* Breites Panel, sobald ein Punkt Enkel hat (Leistungen). */
.main-nav > ul > li > .sub-menu:has(.sub-menu) {
  top: 100%;
  left: var(--gutter); right: auto;
  width: min(880px, calc(100% - var(--gutter) * 2));
  min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px 30px; padding: 26px 24px 28px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: translateY(6px);
}

/* Ebene 2 wird zur Spaltenüberschrift, Ebene 3 zur Linkliste */
.main-nav .sub-menu .sub-menu {
  position: static; opacity: 1; transform: none;
  visibility: inherit; pointer-events: inherit;
  background: transparent; border: none; box-shadow: none; padding: 0; min-width: 0;
}
.main-nav .sub-menu > .menu-item-has-children > a {
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); padding: 4px 14px 12px;
}
.main-nav .sub-menu .sub-menu a { font-size: 15px; padding: 10px 14px; margin-bottom: 2px; }
.main-nav .sub-menu > .menu-item-has-children > a:hover { background: transparent; color: var(--green); }

@media (max-width: 900px) {
  .main-nav .sub-menu,
  .main-nav > ul > li > .sub-menu:has(.sub-menu) {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent; padding: 0 0 0 14px;
    min-width: 0; display: block;
  }
  .main-nav .sub-menu a { padding: 9px 0; }
  .main-nav .sub-menu > .menu-item-has-children > a { padding: 12px 0 4px; }
}

/* ------------------------------------------------- Vorher / Nachher: Räume */

/* Räume als Schlagwortzeile statt als Pillen — wie die Wörter im Hero, nur
   klickbar: der gewählte Raum trägt Markengrün und eine Linie unter dem Wort. */
.k-rooms__tabs { margin-bottom: clamp(18px, 2vw, 26px); gap: 4px 0; align-items: baseline; }
.k-rooms__tabs .k-tab {
  border: 0; background: none; border-radius: 0; padding: 4px 0;
  font: 400 clamp(15px, 1.2vw, 16.5px)/1.6 var(--sans); letter-spacing: .05em;
  color: var(--muted); transition: color .25s ease;
}
.k-rooms__tabs .k-tab:not(:last-child)::after {
  content: "·"; color: var(--gold); margin: 0 clamp(12px, 1.2vw, 18px);
}
.k-rooms__tabs .k-tab:hover { background: none; color: var(--ink); }
.k-tab__label { display: inline-block; border-bottom: 2px solid transparent; padding-bottom: 4px; transition: border-color .25s ease, color .25s ease; }
.k-rooms__tabs .k-tab:hover .k-tab__label { border-bottom-color: rgba(30, 64, 52, .25); }
.k-rooms__tabs .k-tab[aria-selected="true"] { background: none; color: var(--green); font-weight: 600; }
.k-rooms__tabs .k-tab[aria-selected="true"] .k-tab__label { border-bottom-color: var(--green); }
.k-rooms .ba { border-radius: var(--radius-md); }
.k-rooms__note { margin: 16px 0 0; font: 400 15px/1.55 var(--sans); color: var(--muted); }

/* Wohnungs-Umschalter über den Räumen: eine Ebene höher, darum als Band
   statt als Pillen — die Räume darunter bleiben die feinere Auswahl. */
.k-suites__switch {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-md); overflow: hidden;
  margin-bottom: clamp(22px, 2.4vw, 32px);
}
.k-suite-cell { position: relative; display: grid; background: var(--bg); }
.k-suite {
  display: grid; gap: 6px; justify-items: start; text-align: left; cursor: pointer;
  height: 100%;
  background: var(--bg); color: var(--ink); border: 0;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  transition: background .25s ease, color .25s ease;
}
.k-suite:hover { background: var(--bg-alt); }
.k-suite__num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--gold); }
.k-suite__name { font: 500 clamp(17px, 1.5vw, 20px)/1.35 var(--sans); letter-spacing: -.008em; }
.k-suite__meta { font: 400 13.5px/1 var(--sans); color: var(--muted); }
.k-suite[aria-selected="true"] { background: var(--green); color: var(--bg); }
.k-suite-cell:has(.k-suite[aria-selected="true"]) { background: var(--green); }

/* Bewertung: sitzt in der Ecke der Wohnungs-Kachel und führt zu Booking. */
.k-suite__rating {
  position: absolute; top: 0; right: 0; z-index: 1;
  display: grid; justify-items: center; gap: 6px;
  padding: clamp(13px, 1.5vw, 17px) clamp(15px, 1.7vw, 19px);
}
/* Notenkachel wie im alten Bewertungs-Badge — quadratisch, klein, in der Ecke. */
.k-suite__score {
  display: grid; place-items: center;
  width: 42px; aspect-ratio: 1;
  border-radius: 10px; background: var(--green); color: var(--bg);
  font: 600 15.5px/1 var(--sans); letter-spacing: -.01em;
  transition: background .25s ease, color .25s ease;
}
.k-suite__source {
  font: 500 10.5px/1.2 var(--sans); letter-spacing: .06em; text-align: center;
  color: var(--muted); transition: color .25s ease;
}
.k-suite__rating:hover .k-suite__score { background: var(--gold); color: var(--ink); }
.k-suite__rating:hover .k-suite__source { color: var(--gold); }
/* Auf der gewählten, grünen Kachel dreht sich die Kachel um. */
.k-suite-cell:has(.k-suite[aria-selected="true"]) .k-suite__score { background: var(--bg); color: var(--green); }
.k-suite-cell:has(.k-suite[aria-selected="true"]) .k-suite__source { color: rgba(247, 244, 238, .66); }
.k-suite-cell:has(.k-suite[aria-selected="true"]) .k-suite__rating:hover .k-suite__score { background: var(--gold-soft); color: var(--green); }
/* Platz für die Bewertung, damit der Wohnungsname nicht darunterläuft. */
.k-suite-cell:has(.k-suite__rating) .k-suite__name { padding-right: 116px; }
.k-suite[aria-selected="true"]:hover { background: var(--green); }
.k-suite[aria-selected="true"] .k-suite__num { color: var(--gold-soft); }
.k-suite[aria-selected="true"] .k-suite__meta { color: rgba(247, 244, 238, .72); }

/* Viele Räume passen auf dem Handy nicht in mehrere Zeilen: seitlich wischen. */
@media (max-width: 700px) {
  .k-rooms__tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .k-rooms__tabs::-webkit-scrollbar { display: none; }
  .k-rooms__tabs .k-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ------------------------------------------------- Hero: zentrierte Variante */

.k-hero--center {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(52px, 6vw, 92px);
  text-align: center;
  overflow: hidden;
}
.k-hero--image {
  background-size: cover;
  background-position: center;
  color: var(--bg);
}
.k-hero--image::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 42% at 50% 26%, rgba(12, 22, 18, .5) 0%, rgba(12, 22, 18, 0) 70%),
    linear-gradient(180deg, rgba(18, 32, 27, .8) 0%, rgba(18, 32, 27, .72) 45%, rgba(18, 32, 27, .9) 100%);
}

.k-hero__center { position: relative; display: flex; flex-direction: column; align-items: center; }
.k-hero__center > * { margin-left: auto; margin-right: auto; }



/* 18ch brach den Titel auf schmaleren Notebooks in vier Zeilen — 80 % lässt
   die beiden Sätze je auf einer Zeile. */
.k-hero--center .k-hero__title { max-width: 80%; }
.k-hero--center .lead { max-width: 60ch; text-align: center; }
.k-hero--center .btn-row { justify-content: center; }

.k-hero--image .eyebrow { color: var(--gold-soft); }
.k-hero--image .k-hero__title { color: var(--bg); }
.k-hero--image .k-hero__title em { color: var(--gold-soft); }
.k-hero--image .lead { color: rgba(247, 244, 238, .84); }
.k-hero--image .btn--ghost { color: var(--bg); border-color: rgba(247, 244, 238, .45); }
.k-hero--image .btn--ghost:hover { border-color: var(--bg); background: rgba(247, 244, 238, .12); color: var(--bg); }
.k-hero--image .btn--primary { background: var(--bg); color: var(--green); }
.k-hero--image .btn--primary:hover { background: var(--sand); color: var(--green); }

.k-hero__claim--center {
  background: rgba(247, 244, 238, .1);
  border: 1px solid rgba(247, 244, 238, .22);
  backdrop-filter: blur(6px);
  color: var(--bg);
  max-width: 34ch;
}
.k-hero:not(.k-hero--image) .k-hero__claim--center {
  background: var(--green); border-color: transparent; color: var(--bg);
}

/* Ohne Pillen-Kontur reicht die Zeile weiter — 78ch hält die sechs Wörter
   auf dem Desktop in einer Zeile. */
.k-words--center { justify-content: center; border-top-color: rgba(247, 244, 238, .22); max-width: 78ch; margin-inline: auto; }
.k-hero--image .k-words span { color: rgba(247, 244, 238, .62); }
.k-hero--image .k-words span:not(:last-child)::after { color: var(--gold-soft); }
.js .k-hero--image .k-words span[data-word] { opacity: .3; }
.js .k-hero--image .k-words span[data-word].is-in { opacity: 1; }
.k-hero--image .k-words span.is-in { color: rgba(247, 244, 238, .94); }

/* ==========================================================================
   Feinschliff: Grotesk-Display + mehr Grün
   ========================================================================== */

/* Grotesk statt Serife: die großen Aussagen halbfett, die Ebene darunter
   mittelstark — das hält die Seite ruhig und trotzdem präsent. */
.display, .page-title, .h2, .h2--lg, .k-hero__title, .claim,
.k-statement, .k-claim__final, .k-campaign__title, .k-tip__title {
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.06;
}
.h3-serif, .k-welt__title, .journal-row__title, .stay-title, .finance-claim,
.k-block h3, .k-reason h3, .k-model h3, .k-route h3, .k-step h3,
.coming__title, .k-empty h2 {
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.k-claim__line { font-weight: 500; letter-spacing: -.02em; }
.k-hero__claim { font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.display em, .page-title em, .k-hero__title em, .h2 em, .k-campaign__title em,
.k-statement em, .play-h1 em, .play-h2 em, .claim span {
  font-style: normal; color: var(--green);
}
.k-hero--image .k-hero__title em { color: var(--gold-soft); }
.k-tip__title em { font-style: normal; color: var(--gold); }

/* Grün als Kontur: Karten, Kacheln, Felder */
.k-card, .k-model, .k-block, .k-intent, .k-measures li, .tags li,
.contact-form, .k-empty, .k-case {
  border-color: var(--line-2);
}
.k-card:hover, .k-model:hover, .k-intent:hover { border-color: var(--green-line); }

.hairgrid { background: var(--line-2); border-color: var(--line-2); }
.sec { border-top-color: var(--line); }

/* Ruhige grüne Fläche statt reinem Beige */
.sec--alt { background: linear-gradient(0deg, var(--green-wash), var(--green-wash)), var(--bg-alt); }

/* Buttons: Outline in Markengrün */
.btn--ghost { border-color: var(--green-line); color: var(--green); }
.btn--ghost:hover { border-color: var(--green); background: var(--green-wash); color: var(--green); }

/* Feine grüne Linie über jedem Kapitel-Titel */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--green-line); flex: none;
}
.eyebrow--copper::before { background: var(--copper); }

.link-underline { border-bottom-color: var(--green-line); color: var(--green); }
.link-underline:hover { border-bottom-color: var(--green); color: var(--green); }

.k-chain li { color: var(--green); }
.k-chain--pill li { background: var(--green-wash); border: 1px solid var(--line); }
.deflist dt { color: var(--green); }
.stat__value, .k-welt__num { color: var(--green); }
.k-case__steps li { background: var(--green-wash); }

/* ------------------------------------------------------------------ Icons */

.al-icon { width: 24px; height: 24px; display: block; color: var(--green); }

.k-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--green-wash);
  transition: background .3s ease, border-color .3s ease;
}
.k-card:hover .k-card__icon { background: var(--green); border-color: var(--green); }
.k-card:hover .k-card__icon .al-icon { color: var(--bg); }

.k-welt__num { display: flex; align-items: center; gap: 14px; }
.k-welt__num em { font-style: normal; }
.k-welt__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line-2);
}

/* --------------------------------------------- Bewertungen & Karte */

.k-reviews {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(20px, 2.4vw, 32px);
}
.k-review {
  display: flex; align-items: center; gap: 18px;
  background: var(--green); color: var(--bg); border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: transform .3s var(--ease), background .3s ease;
}
.k-review:hover { transform: translateY(-3px); background: var(--green-2); color: var(--bg); }
.k-review__score {
  flex: none; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 14px;
  background: var(--bg); color: var(--green);
  font: 500 20px/1 var(--display); letter-spacing: -.015em;
}
.k-review__body { display: flex; flex-direction: column; gap: 4px; }
.k-review__body strong { font: 500 17px/1.25 var(--sans); }
.k-review__body span { font: 400 13.5px/1.4 var(--sans); color: rgba(247, 244, 238, .74); }


/* ------------------------------------------------------------------ Karte */

/* 2.5D-Karte: frei schwebende Insel statt Karten-Card. Die Ebene ist per
   rotateX/rotateZ gekippt, die Region als Silhouetten-Stapel extrudiert;
   die Pins drehen exakt entgegen und stehen aufrecht im Raum. app.js neigt
   die Ebene sanft zum Zeiger (Custom Properties --tilt-x/--tilt-z). */
.k-map { position: relative; perspective: 1100px; }
/* Labels/Geisterflächen dürfen aus der Karte laufen, aber nicht aus der
   Seite — clip statt hidden, damit kein Scroll-Container entsteht. */
.sec:has(.k-map) { overflow: clip; }

.k-map__shadow {
  position: absolute; left: 10%; right: 10%; bottom: 0; height: 16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 20, 15, .30), transparent 72%);
  filter: blur(10px);
  animation: al-map-shadow 7s ease-in-out infinite;
}
.k-map__float {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: al-map-bob 7s ease-in-out infinite;
}
.k-map__tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(50deg + var(--tilt-x, 0deg)))
    rotateZ(calc(-8deg + var(--tilt-z, 0deg)));
  transition: transform .35s var(--ease);
}

/* Holo-Boden: Raster läuft über die Kartenränder hinaus und blendet weich aus. */
.k-map__grid {
  position: absolute; inset: -14%;
  background-image:
    linear-gradient(rgba(30, 64, 52, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 52, .16) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(62% 62% at 50% 46%, #000 32%, transparent 78%);
  -webkit-mask-image: radial-gradient(62% 62% at 50% 46%, #000 32%, transparent 78%);
}

.k-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.k-map__land--neighbour { fill: rgba(30, 64, 52, .05); stroke: rgba(30, 64, 52, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.k-map__wall use { fill: #163A2D; }
.k-map__top { fill: url(#al-map-top); stroke: rgba(247, 244, 238, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Punkte: Ring pulst flach auf der Ebene, der Pin steht senkrecht darauf
   (exakte Gegendrehung zur Ebenen-Neigung, Fußpunkt als Drehachse). */
.k-map__point { position: absolute; z-index: 2; transform-style: preserve-3d; }
.k-map__ring {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid rgba(247, 244, 238, .85);
  animation: alping 3.2s ease-out infinite;
  animation-delay: inherit;
}
.k-map__pin {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
  transform: rotateZ(8deg) rotateX(-50deg);
}
.k-map__stem {
  position: absolute; left: -1px; bottom: 0; width: 2px; height: 30px;
  background: linear-gradient(to top, rgba(185, 146, 68, 0), var(--gold));
}
.k-map__dot {
  position: absolute; left: -5px; bottom: 27px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(247, 244, 238, .75);
}
.k-map__label {
  position: absolute; left: 11px; bottom: 24px;
  font: 500 13.5px/1 var(--sans); color: var(--green); white-space: nowrap;
  background: rgba(247, 244, 238, .88); padding: 4px 8px; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(6, 20, 15, .14);
}
.k-map__point--left .k-map__label { left: auto; right: 11px; }

@keyframes alping {
  0% { transform: scale(.4); opacity: .85; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes al-map-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes al-map-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.94); opacity: .78; }
}

.k-map__legend { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.k-map__legend li { display: flex; align-items: center; gap: 10px; font: 400 15.5px/1.4 var(--sans); }
.k-map__legend strong { font-weight: 500; }
.k-map__legend span { color: var(--muted); font-size: 14px; }
.al-icon--sm { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .k-map__ring, .k-map__float, .k-map__shadow { animation: none; }
  .k-map__tilt { transition: none; }
}

/* -------------------------------------- Fliegende Plattform-Logos (Band) */

.kurz-teaser__media { position: relative; }
.kurz-fly {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #08224A; border-radius: 14px;
  padding: 11px 16px; font: 600 15px/1 var(--sans); letter-spacing: -.01em;
  box-shadow: 0 14px 34px rgba(4, 22, 52, .28);
  animation: kurzfly 4.6s ease-in-out infinite;
}
.kurz-fly svg { height: 20px; width: 20px; border-radius: 5px; display: block; flex: none; }
/* Airbnb liefert Bildmarke und Schriftzug in einem — nicht quadratisch quetschen.
   Der Schriftzug braucht mehr Höhe als ein reines Bildzeichen, sonst wirkt er
   im weißen Feld verloren; dafür rückt das Feld enger an ihn heran. */
.kurz-fly svg.play-logo--airbnb { height: 34px; width: auto; border-radius: 0; }
.kurz-fly--airbnb { padding: 8px 13px; }
.kurz-fly--airbnb { top: -16px; left: -14px; transform: rotate(-5deg); color: #FF5A5F; }
.kurz-fly--booking { bottom: -18px; right: -10px; transform: rotate(4deg); animation-delay: .9s; }
.kurz-fly--booking strong { color: #003B95; font-weight: 700; }

@keyframes kurzfly {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) { .kurz-fly { animation: none; } }

/* ==========================================================================
   Grün als Leitfarbe — Details auf der Hauptseite
   ========================================================================== */

/* Hero: Schleier klar ins Markengrün ziehen */
.k-hero--image::before {
  background:
    radial-gradient(60% 42% at 50% 26%, rgba(12, 30, 24, .5) 0%, rgba(12, 30, 24, 0) 70%),
    linear-gradient(180deg, rgba(16, 38, 30, .82) 0%, rgba(20, 44, 35, .72) 45%, rgba(14, 34, 27, .92) 100%);
}
/* Kompass: grüne Kante, die beim Zeigen durchläuft */
.k-card { position: relative; overflow: hidden; }
.k-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--green); transition: width .45s var(--ease);
}
.k-card:hover::before { width: 100%; }
.k-card:hover { background: linear-gradient(0deg, var(--green-wash), var(--green-wash)), var(--bg); }
.k-card__num { color: var(--green); }

/* Leistungswelten: nur die Zeile selbst reagiert, ohne Fläche und Balken */
.k-welt:hover .k-welt__title { color: var(--green); }
.k-welt__title { transition: color .3s ease; }

/* Vorher / Nachher: das Ergebnis trägt Markengrün */
.ba__badge--after { background: var(--green); color: var(--bg); }
.ba__line { background: rgba(247, 247, 245, .95); box-shadow: 0 0 0 1px rgba(23, 25, 26, .22); }

/* Wertsteigerung: Maßnahmen mit grüner Kante */
.k-measures li { border-left: 3px solid var(--green-line); }

/* Prozess: Spur und Ringe in Grün */
.k-process__track { background: rgba(30, 64, 52, .16); }
.k-step__dot { border-color: var(--green-line); color: var(--green); }

/* Referenzen: grüne Linie über der Karte */
.k-case { position: relative; }
.k-case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), rgba(30, 64, 52, 0));
}

/* Warum AL: Grün statt Gold als Trennlinie */
.k-reason { border-top-color: var(--green); }
.k-reason h3 { color: var(--green); }

/* Kontakt-Kacheln: grüne Führung */
.k-intent { position: relative; padding-right: 44px; }
.k-intent::after {
  content: "→"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--green); transition: transform .3s var(--ease);
}
.k-intent:hover::after { transform: translate(4px, -50%); }
.k-intent:hover { background: linear-gradient(0deg, var(--green-wash), var(--green-wash)), var(--bg); }

/* Tippgeber: ohne Kontur, die Fläche trägt sich selbst */
.k-tip .k-chain--pill li { border: none; background: rgba(30, 64, 52, .1); }

/* Kleine Raute als Trenner zwischen den Kapiteln */
.sec + .sec { position: relative; }
.sec + .sec::before {
  content: ""; position: absolute; left: 50%; top: -4px;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--bg); border: 1px solid var(--green-line);
  transform: rotate(45deg);
}
.sec--ink + .sec::before, .sec--dark + .sec::before { display: none; }

/* Zahlen und Kennwerte durchgehend in Grün */
.play-stat__value, .stat__value, .k-map__legend strong { color: var(--green); }

/* ==========================================================================
   Grüne und helle Karten im Wechsel — wie auf den Unterseiten
   ========================================================================== */

.k-compass .k-card:nth-child(odd),
.k-models .k-model:nth-child(2),
.k-models .k-model:nth-child(3) {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}
.k-compass .k-card:nth-child(odd):hover,
.k-models .k-model:nth-child(2):hover,
.k-models .k-model:nth-child(3):hover {
  background: var(--green-2);
  border-color: var(--green-2);
  color: var(--cream);
}

/* Inhalte auf grünem Grund */
.k-compass .k-card:nth-child(odd) .k-card__num,
.k-compass .k-card:nth-child(odd) .k-card__more { color: var(--gold-soft); }
.k-compass .k-card:nth-child(odd) .k-card__title { color: var(--cream); }
.k-compass .k-card:nth-child(odd) .k-card__text { color: rgba(244, 239, 233, .76); }
.k-compass .k-card:nth-child(odd) .k-chain li { color: rgba(244, 239, 233, .92); }
.k-compass .k-card:nth-child(odd) .k-chain li::after { color: rgba(244, 239, 233, .45); }
.k-compass .k-card:nth-child(odd) .k-card__icon {
  border-color: rgba(244, 239, 233, .3); background: rgba(244, 239, 233, .08);
}
.k-compass .k-card:nth-child(odd) .k-card__icon .al-icon { color: var(--cream); }
.k-compass .k-card:nth-child(odd):hover .k-card__icon { background: var(--cream); border-color: var(--cream); }
.k-compass .k-card:nth-child(odd):hover .k-card__icon .al-icon { color: var(--green); }
.k-compass .k-card:nth-child(odd)::before { background: var(--gold); }

.k-models .k-model:nth-child(2) h3,
.k-models .k-model:nth-child(3) h3 { color: var(--cream); }
.k-models .k-model:nth-child(2) p,
.k-models .k-model:nth-child(3) p { color: rgba(244, 239, 233, .76); }
.k-models .k-model:nth-child(2) .k-model__more,
.k-models .k-model:nth-child(3) .k-model__more { color: var(--gold-soft); }
.k-models .k-model:nth-child(2) .k-model__icon,
.k-models .k-model:nth-child(3) .k-model__icon {
  border-color: rgba(244, 239, 233, .3); background: rgba(244, 239, 233, .08); color: var(--cream);
}
.k-models .k-model:nth-child(2):hover .k-model__icon,
.k-models .k-model:nth-child(3):hover .k-model__icon { background: var(--cream); border-color: var(--cream); color: var(--green); }

/* Referenz-Kachel und Kontaktfelder mit grüner Note im Wechsel */
.k-intents .k-intent:nth-child(3n+1) {
  background: var(--green); border-color: var(--green); color: var(--cream);
}
.k-intents .k-intent:nth-child(3n+1) span { color: rgba(244, 239, 233, .7); }
.k-intents .k-intent:nth-child(3n+1)::after { color: var(--gold-soft); }
.k-intents .k-intent:nth-child(3n+1):hover {
  background: var(--green-2); border-color: var(--green-2); color: var(--cream);
}

/* Auszeichnungen: erste Kachel grün gerahmt */

/* ------------------------------------------------------ WhatsApp-Knopf */

/* Sitzt unten rechts über allem, klappt beim Zeigen die Beschriftung aus. */
/* Beide Knöpfe stapeln sich in derselben Ecke — kein Rechnen mit Abständen. */
.fab-stack {
  position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px);
  z-index: 60; display: grid; justify-items: end; gap: 12px;
}
.to-top {
  display: grid; place-items: center; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); color: var(--green); border: 1px solid var(--line-2);
  box-shadow: 0 10px 26px rgba(6, 20, 15, .18);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ease), background .25s ease, color .25s ease;
}
.to-top.is-in { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green); color: var(--bg); }
.to-top svg { width: 20px; height: 20px; display: block; }

.wa-fab {
  display: inline-flex; align-items: center; gap: 0;
  height: clamp(52px, 5vw, 58px); padding: 0 calc(clamp(52px, 5vw, 58px) / 2 - 12px);
  border-radius: 999px;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px rgba(6, 20, 15, .28);
  transition: gap .35s var(--ease), padding-right .35s var(--ease), background .25s ease, transform .25s var(--ease);
}
.wa-fab:hover { background: #1FBE5A; color: #fff; transform: translateY(-2px); gap: 10px; padding-right: 22px; }
.wa-fab .play-logo--whatsapp { width: 24px; height: 24px; display: block; flex: none; }
.wa-fab__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font: 600 14.5px/1 var(--sans); letter-spacing: .01em;
  transition: max-width .35s var(--ease);
}
.wa-fab:hover .wa-fab__label { max-width: 120px; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab__label { transition: none; }
}

/* ==========================================================================
   Objekt-Kacheln (Hauptseite 04b): drei Fotos, unten Markengrün-Verlauf,
   Titel darüber. Hover: Titel schiebt in die vertikale Mitte, Verlauf wächst.
   ========================================================================== */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5; /* 1 : 1.25 */
  background: var(--green-wash);
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.tile:hover img { transform: scale(1.04); }

/* Weicher Scrim statt linearer Kante: die Deckkraft folgt einer Ease-Kurve
   über mehrere Stops — kein sichtbarer Übergangs-Streifen. color-mix hält
   die Stops am Markengrün, auch im dunklen Schema. */
.tile__shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(
    to top,
    var(--green) 0%,
    color-mix(in srgb, var(--green) 95%, transparent) 16%,
    color-mix(in srgb, var(--green) 85%, transparent) 30%,
    color-mix(in srgb, var(--green) 70%, transparent) 43%,
    color-mix(in srgb, var(--green) 53%, transparent) 55%,
    color-mix(in srgb, var(--green) 37%, transparent) 66%,
    color-mix(in srgb, var(--green) 23%, transparent) 76%,
    color-mix(in srgb, var(--green) 12%, transparent) 85%,
    color-mix(in srgb, var(--green) 4%, transparent) 93%,
    transparent 100%
  );
  transition: height .5s var(--ease);
  pointer-events: none;
}
.tile:hover .tile__shade { height: 88%; }

.tile__title {
  position: absolute; left: 16px; right: 16px; bottom: 8%;
  margin: 0; text-align: center;
  font: 700 clamp(22px, 2.3vw, 34px)/1.12 var(--sans);
  text-transform: uppercase; letter-spacing: .05em;
  color: #000;
  transition: bottom .5s var(--ease), transform .5s var(--ease);
}
.tile:hover .tile__title { bottom: 50%; transform: translateY(50%); }

@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; gap: 14px; }
  .tile { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .tile img, .tile__shade, .tile__title { transition: none; }
}

/* ==========================================================================
   Wertsteigerung (05): die Wert-Kurve. Dunkelgrüne Bühne (Töne der 2.5D-
   Karte), goldene Kurve zeichnet sich pro Ziel neu, die Maßnahmen sitzen
   als nummerierte Meilenstein-Chips darauf (app.js erzeugt SVG + Chips).
   ========================================================================== */

/* Frei stehend wie die 2.5D-Karte: kein Kasten, die Kurve liegt direkt auf
   dem Seitenhintergrund, darunter nur ein weich auslaufendes grünes Raster. */
.value__stage {
  position: relative;
  aspect-ratio: 1000 / 470;
}
.value__grid {
  position: absolute; inset: -6% -2%;
  background-image:
    linear-gradient(rgba(30, 64, 52, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 52, .09) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(62% 70% at 50% 52%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(62% 70% at 50% 52%, #000 30%, transparent 78%);
}
.value__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.value__area { fill: url(#al-value-area); opacity: 0; transition: opacity .9s var(--ease) .55s; }
.is-drawn .value__area { opacity: 1; }
.value__line {
  fill: none; stroke: var(--gold); stroke-width: 3;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  filter: drop-shadow(0 1px 6px rgba(185, 146, 68, .35));
  transition: stroke-dashoffset 1.7s var(--ease);
}

.value__points { position: absolute; inset: 0; }
.value__ms {
  position: absolute; width: 0; height: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.is-drawn .value__ms { opacity: 1; transform: none; }
.value__ms i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px var(--bg);
}
.value__ms em {
  position: absolute; bottom: 16px; left: 0; transform: translateX(-50%);
  font: 500 13px/1.35 var(--sans); font-style: normal; color: var(--green);
  background: #fff; border: 1px solid var(--line-2);
  padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(6, 20, 15, .08);
}
.value__ms b { color: var(--gold); font-weight: 700; margin-right: 6px; letter-spacing: .04em; }
.value__ms--below em { bottom: auto; top: 16px; }

.value__end {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(185, 146, 68, .5);
  opacity: 0; transition: opacity .4s ease 1.5s;
}
.is-drawn .value__end { opacity: 1; }
.value__end::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(185, 146, 68, .6);
  animation: alping 2.8s ease-out infinite 1.8s;
}

/* Mit JS übernehmen die Kurven-Chips die Darstellung — die Panels bleiben
   als Screenreader-Fassung erhalten (ohne JS sind sie das sichtbare UI). */
.js .value__panel {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (max-width: 900px) {
  .value__stage { aspect-ratio: 4 / 5; }
  /* Auf schmalen Screens sitzen die Chips seitlich neben dem Punkt (linke
     Kurvenhälfte → rechts, rechte → links): übereinander würden sie an der
     steilen Kurve kollidieren, außen würden sie aus der Bühne ragen. */
  .value__ms em {
    font-size: 11.5px; white-space: normal;
    width: max-content; max-width: 140px;
    bottom: auto; top: -13px; transform: none;
  }
  .value__ms--chip-right em { left: 13px; }
  .value__ms--chip-left em { left: auto; right: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .value__line, .value__area, .value__ms, .value__end { transition: none; }
  .value__end::after { animation: none; }
}

/* ==========================================================================
   Zahlen-Band (Über uns): goldene Hairline, große Display-Zahl, Count-up
   per app.js. tabular-nums hält die Breite beim Hochzählen ruhig.
   ========================================================================== */

/* Die Kennzahlen stehen als Stationen auf einer goldenen Linie — dieselbe
   Sprache wie die Meilensteine der Wert-Kurve und die Pins der Karte.
   Jedes Feld zeichnet sein eigenes opakes Liniensegment durch den Dot;
   nebeneinander ergeben sie eine durchgehende Linie, im mobilen Stack
   bekommt jede Station ihre eigene. */
.statband {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 34px 0;
  text-align: center;
  padding: clamp(18px, 2.6vw, 34px) 0;
  overflow: clip;
}
.statband::before {
  content: ""; position: absolute; inset: -14% -4%; z-index: 0;
  background-image:
    linear-gradient(rgba(30, 64, 52, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 64, 52, .08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(58% 75% at 50% 50%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(58% 75% at 50% 50%, #000 25%, transparent 80%);
}
.statband__item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(14px, 2vw, 28px);
}
.statband__value {
  margin: 0 0 20px;
  /* bewusst --sans in geladenem Gewicht — keine Serifen, kein Faux-Light */
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(36px, 4vw, 54px); line-height: 1.05;
  letter-spacing: -.02em; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.statband__suffix { color: var(--gold); }
.statband__dot {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px #F7F4EE;
}
.statband__dot::before {
  content: ""; position: absolute; top: 50%; left: -50vw; right: -50vw;
  height: 2px; margin-top: -1px; background: var(--gold);
  z-index: -1;
}
/* Einmaliger Boden-Ping pro Station, gestaffelt, sobald das Band im Bild ist. */
.statband.is-in .statband__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid rgba(185, 146, 68, .65);
  animation: alping 1s ease-out forwards;
}
.statband__item:nth-child(2) .statband__dot::after { animation-delay: .18s; }
.statband__item:nth-child(3) .statband__dot::after { animation-delay: .36s; }
.statband__item:nth-child(4) .statband__dot::after { animation-delay: .54s; }
.statband__item:nth-child(5) .statband__dot::after { animation-delay: .72s; }
.statband__label { margin: 16px 0 0; font: 400 14.5px/1.45 var(--sans); color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .statband.is-in .statband__dot::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   Consent-Banner (Cookies & Datenschutz): dezente Karte unten links,
   gleichrangige Buttons — keine Dark Patterns. Wiederöffnen über den
   Footer-Link „Cookie-Einstellungen“ ([data-consent-open]).
   ========================================================================== */

.consent {
  position: fixed; z-index: 80;
  left: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px);
  display: flex; justify-content: flex-start;
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__card {
  pointer-events: auto;
  max-width: 460px;
  background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(6, 20, 15, .25);
  padding: 20px 22px;
}
.consent__title { margin: 0 0 8px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.consent__text { margin: 0; font: 400 13.5px/1.55 var(--sans); color: var(--ink-2); }
.consent__text a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.consent__cats { display: grid; gap: 10px; margin: 14px 0 0; }
.consent__cats[hidden] { display: none; }
.consent__cat { display: flex; gap: 10px; align-items: flex-start; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }
.consent__cat input { margin-top: 2px; accent-color: var(--green); }
.consent__cat strong { color: var(--ink); font-weight: 600; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.consent__btn {
  appearance: none; cursor: pointer;
  border: 1px solid var(--green); border-radius: var(--radius);
  padding: 10px 16px;
  font: 600 13.5px/1 var(--sans);
  background: var(--green); color: var(--bg);
  transition: background .2s ease, color .2s ease;
}
.consent__btn:hover { background: var(--green-2); border-color: var(--green-2); }
.consent__btn--save { background: transparent; color: var(--green); }
.consent__btn--save:hover { background: var(--green-wash); color: var(--green); }
.consent__more {
  appearance: none; background: none; border: none; cursor: pointer;
  font: 500 13px/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; padding: 6px 2px;
}
.consent__more:hover { color: var(--ink); }
.consent-link {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; padding: 0;
}
@media (max-width: 560px) {
  .consent__card { max-width: none; width: 100%; }
}