/* ============================================================
   SOLID ESTATE — Komponenten
   Übernommen aus dem Jetlag-System (Hover-Mechanik nach noart-Analyse);
   ohne HUD, Cursor, Radar, Pass, Scanner, Shop, 3D — plus Solid-Bausteine
   (Projektregister, Projekt-Karten, Kontakt, Leistungs-Diagramm, Solid Ring).
   ============================================================ */

/* ================= NAVBAR ================= */
.navbar {
  position: fixed; inset: 0 0 auto; width: 100%;
  z-index: var(--z-chrome);
  color: var(--color-light); mix-blend-mode: difference;
}
/* Startzustand nur mit JS (preloader.js blendet ein) — ohne JS sofort sichtbar */
html.js .navbar { opacity: 0; }
.nav_wrapper { display: flex; justify-content: space-between; align-items: flex-start; padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px)); }
.nav_logo { display: block; }
.nav_logo_img { height: 2.88em; width: auto; display: block; }   /* 2× +20 % (User 17.09.) */
/* 3 Spalten-Paare (2 Zeilen, spaltenweise gefüllt) — noart-Muster */
.nav_right { display: flex; align-items: flex-start; gap: var(--space-xl); }
.nav_links { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; gap: var(--space-xs) var(--space-lg); }
.nav_link { display: flex; align-items: center; gap: var(--space-2xs); }
/* Abschnittscodes [01]–[06] statt tag_dots (gleiche Sprache wie das Overlay-Menü). */
.nav_link_gate { font-size: var(--text-tag); opacity: var(--opacity-muted); }
/* Aktive Seite hue-frei (difference-Blend würde jede Farbe invertieren): volle Deckung + fett */
.nav_link[aria-current="page"] .nav_link_gate { opacity: 1; font-weight: 700; }
.nav_link .tag_text { opacity: .8; }
.nav_link[aria-current="page"] .tag_text { opacity: 1; font-weight: 700; }
/* Sprachwechsler [DE] [EN] rechts neben dem Link-Raster */
.nav_lang { display: flex; gap: var(--space-2xs); font-size: var(--text-tag); }
.nav_lang a { opacity: var(--opacity-muted); }
.nav_lang a[aria-current="true"] { opacity: 1; font-weight: 700; }
@media (max-width: 991px) { .nav_right { display: none; } }

/* ================= MENU ================= */
.menu-button {
  position: fixed;
  top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-md) + env(safe-area-inset-right, 0px));
  z-index: var(--z-chrome);
  display: none; align-items: center; gap: var(--space-3xs);
  background: var(--color-grey-dark); color: var(--color-light);
  border-radius: var(--radius-small); padding: var(--space-sm);
  cursor: pointer;
}
html.js .menu-button { opacity: 0; }
@media (max-width: 991px) { .menu-button { display: flex; } }
/* Ohne JS laesst sich das Overlay nicht oeffnen — Button ausblenden, die Seite
   bleibt ueber Footer-Navigation und Logo erreichbar. */
html:not(.js) .menu-button { display: none; }
.menu_wrapper {
  position: fixed; inset: 0; z-index: var(--z-chrome);
  opacity: 0; pointer-events: none; will-change: opacity;
}
.menu_wrapper.is-open { pointer-events: auto; }
.menu_overlay { position: absolute; inset: 0; background: var(--color-dark-50); border: var(--border-1); }
.menu {
  position: absolute; z-index: 1;
  inset: calc(var(--space-md) + env(safe-area-inset-top, 0px)) calc(var(--space-md) + env(safe-area-inset-right, 0px))
         calc(var(--space-md) + env(safe-area-inset-bottom, 0px)) calc(var(--space-md) + env(safe-area-inset-left, 0px));
  background: var(--color-light); color: var(--color-dark);
  padding: var(--space-md);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
  transform: scale(0); transform-origin: 100% 0%; will-change: transform;
  border-radius: var(--radius-small);
  overflow: auto;
  /* Touch: im Panel scrollen, aber nicht auf die Seite darunter durchreichen */
  touch-action: pan-y; overscroll-behavior: contain;
}
/* Geoeffnetes Menue sperrt die Seite dahinter (Lenis wird in menu.js gestoppt) */
.menu_wrapper { touch-action: none; }
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
.menu_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.menu_close { display: flex; padding: var(--space-3xs); cursor: pointer; }
.menu_close svg { width: .625em; height: .625em; }
.menu_links { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-md); }
.menu_link { display: flex; align-items: baseline; gap: var(--space-2xs); }
.menu_link_gate { font-size: var(--text-tag); opacity: var(--opacity-muted); min-width: 2.5em; }
.menu_link_text { font-size: var(--text-subhead); }
/* Aktive Seite im Menü: fett und in Taupe (hier kein Blend, Farbe bleibt echt) */
.menu_link[aria-current="page"] .menu_link_gate { opacity: 1; font-weight: 700; color: var(--color-brand); }
.menu_link[aria-current="page"] .menu_link_text { font-weight: 700; color: var(--color-brand); }
.menu_bottom { display: flex; flex-direction: column; gap: var(--space-md); }
.menu_socials { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.menu_lang { display: flex; gap: var(--space-md); font-size: var(--text-tag); }
.menu_lang a { opacity: var(--opacity-muted); }
.menu_lang a[aria-current="true"] { opacity: 1; font-weight: 700; }

/* ================= PAGE TRANSITION ================= */
.page-transition {
  position: fixed; inset: 0; z-index: var(--z-wipe);
  background: var(--color-dark); color: var(--color-light);
  pointer-events: none; will-change: transform;
  display: flex; justify-content: center; align-items: center;
}

/* ================= HERO (Home) ================= */
.hero { position: relative; min-height: 100dvh; overflow: hidden; }
.hero_bg { position: absolute; inset: 0; z-index: 0; background: var(--color-dark); }
/* Standbild liegt unter den Videos und traegt den Hero, bis (und falls) ein Clip laeuft */
.hero_poster, .hero_poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero_video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s linear;
}
.hero_video.is-active { opacity: 1; }
/* Abdunklung fürs difference-Chrome: helle Szenen müssen unter die
   50%-Grau-Todeszone, sonst saufen Wortmarke/Nav ab. Top-Verlauf sichert die Nav-Zone. */
.hero_scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 22%),
    rgba(0, 0, 0, .6);
}
.hero_frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 100dvh; overflow: hidden; z-index: 1;
}
.hero_title_wrapper {
  position: absolute; inset: 0; z-index: var(--z-hero);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-lg);
  color: var(--color-light); mix-blend-mode: difference;
  pointer-events: none;
}
.hero_title {
  transform-origin: center;
  font-size: 1em; /* h1 erbt sonst die Headline-Größe — die em-Maße der Wortmarke rechnen im 1em-Kontext */
  /* Startzustand (unsichtbar) setzt preloader.js — eine dauerhafte Transform-
     Ebene unter dem difference-Blend erzeugt Compositing-Artefakte. */
}
.hero_title::before, .hero_title::after { content: none; } /* Leading-Trim aus: h1 enthält nur die Wortmarke */
.hero_title_img { width: 17.5em; height: auto; }
/* Standbild-Variante (wenn kein Video): gleiche Fläche wie .hero_video */
.hero_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Claim unter der Wortmarke — ruhig gesperrte Mono-Zeile */
.hero_claim { font-family: var(--font-mono); font-size: var(--text-tag); letter-spacing: .12em; text-align: center; max-width: 34em; padding-inline: var(--padding-global); }
@media (max-width: 767px) { .hero_title_img { width: 14em; } }
.hero_bottom {
  position: absolute; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
  z-index: var(--z-hero); color: var(--color-light);
}
html.js .hero_bottom_inner { opacity: 0; transform: translateY(2em); }

/* „Aktuelles Projekt"-Karte im Hero — 1:1 nach der noart-„Next up"-Glaskarte:
   Thumbnail 4:3 links, Info-Spalte rechts (Tag oben, Zeilen unten), Glas =
   rgba(0,0,0,.2) + blur(20px) auf isolate, Radius .125em, alles Mono in Tag-Größe.
   --nextup-scale skaliert das ganze Instrument (kompakt, User 2026-09-15),
   die Zeilen bleiben dabei exakt Tag-Größe. */
.nextup {
  --nextup-scale: .85;
  font-size: calc(var(--nextup-scale) * 1em);
  display: flex; gap: .625em;
  padding: .3125em .625em .3125em .3125em;
  background: var(--color-dark-20);
  isolation: isolate;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: var(--radius-small);
  color: var(--color-light);
  font-family: var(--font-mono); font-weight: 400;
  opacity: .9; transition: opacity var(--dur-base) var(--ease-expo);
}
.nextup[hidden] { display: none; }   /* hidden-Attribut schlägt sonst das eigene display:flex nicht (nextup.js blendet ohne Projekt aus) */
/* Thumbnail im Originalformat der Renderings (3:2), feste Breite 8.25em (statt 6.6875em bei 4:3) — die Kartenhöhe bleibt wie bei noart */
.nextup_art { display: block; flex: none; width: 8.25em; aspect-ratio: 3 / 2; border-radius: var(--radius-small); overflow: hidden; }
.nextup_art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nextup_data { display: flex; flex-direction: column; justify-content: space-between; gap: .375em; min-width: 6.6875em; padding-block: .3125em; }
.nextup_info { display: flex; flex-direction: column; gap: .375em; }
.nextup_row {
  font-size: calc(var(--text-tag) / var(--nextup-scale)); line-height: 1.2; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.nextup_row.is-id { color: var(--color-grey); }
.nextup_row.is-id .tag_dot { background: var(--color-grey); }
.nextup_row.is-status { color: var(--color-brand-light); }
.nextup.is-build .nextup_row.is-status { color: var(--color-signal-light); }
@media (prefers-reduced-motion: reduce) { .nextup { opacity: 1; } }
@media (hover: none) { .nextup { opacity: 1; } }   /* ohne Maus wird die Karte sonst nie voll deckend */
@media (max-width: 767px) { .nextup { --nextup-scale: .8; } }

/* ================= TAFELN (Projektregister, Leistungen) ================= */
.board { border-top: var(--border-1); font-size: var(--text-tag); }
.board_head, .board_row_inner {
  display: grid;
  grid-template-columns: 6em 1fr 8em 5em minmax(8em, auto);
  gap: var(--space-md); align-items: center;
}
.board_status { white-space: nowrap; }
.board_head { padding-block: var(--space-sm); opacity: var(--opacity-muted); }
.board_row { display: block; border-top: var(--border-1); position: relative; }
.board_row_inner { padding-block: var(--space-md); transition: padding-left var(--dur-slow) var(--ease-expo); }
.board_row:last-child { border-bottom: var(--border-1); }
/* Subhead-Größe; .board steht auf .75em, daher durch --tag-ratio teilen */
.board_dest { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 900; font-size: calc(var(--text-subhead) / var(--tag-ratio)); line-height: 1; letter-spacing: .01em; font-feature-settings: "lnum" 1; }
.board_status { display: inline-flex; align-items: center; gap: var(--space-2xs); justify-self: end; }
.board_status .tag_dot { width: .4375em; height: .4375em; }
/* Projektstatus: in Planung (Stein) · im Bau (Taupe, ruhiger Puls) · fertiggestellt (gedimmt) */
.board_status.is-planning { color: var(--color-caution); }
.board_status.is-build { color: var(--color-signal); }
.board_status.is-build .tag_dot { animation: pulse 2.4s ease-in-out infinite; }
.board_status.is-done { opacity: var(--opacity-muted); }
.section-dark .board_status.is-planning, .board.is-dark .board_status.is-planning { color: var(--color-stone); }
.section-dark .board_status.is-build, .board.is-dark .board_status.is-build { color: var(--color-signal-light); }
@keyframes pulse { 50% { opacity: .35; } }
/* Dunkle Tafel (Startseite) */
.board.is-dark, .board.is-dark .board_row { border-color: var(--color-light-20); }
.board_loc { opacity: var(--opacity-muted); white-space: nowrap; }
/* Hinweis: Media-Queries erhöhen die Spezifität nicht — Spalten-Overrides
   deshalb mit identischen Selektoren schreiben (Muster bei .board.is-register). */
.board_row.is-closed { opacity: var(--opacity-muted); pointer-events: none; }
@media (max-width: 767px) {
  .board_head { display: none; }
  .board_row_inner { grid-template-columns: 1fr auto; grid-template-areas: "flight status" "dest dest" "meta meta"; row-gap: var(--space-xs); }
  .board_flight { grid-area: flight; }
  .board_dest { grid-area: dest; }
  .board_time { grid-area: meta; }
  .board_gate { display: none; }
  .board_status { grid-area: status; }
}
/* Projektregister (Projekte-Seite): CODE · PROJEKT · ORT · NUTZUNG · STATUS */
.board.is-register { width: 100%; max-width: 84em; margin-inline: auto; }
.board.is-register .board_head, .board.is-register .board_row_inner {
  grid-template-columns: 6em minmax(0, 1fr) 15em 15em 12em; column-gap: var(--space-lg);   /* bei 84em: Projekt 26em, Ort/Nutzung je 15em mit Luft; Status 12em fest (Spalten aller Zeilen bündig, reicht für „Under construction") */
}
.board_use { opacity: var(--opacity-muted); white-space: nowrap; }
@media (max-width: 991px) {
  .board.is-register .board_head, .board.is-register .board_row_inner { grid-template-columns: 6em minmax(0, 1fr) 13em 12em; column-gap: var(--space-lg); }
  .board.is-register .board_use, .board.is-register .board_head span:nth-child(4) { display: none; }
}
@media (max-width: 767px) {
  .board.is-register .board_row_inner { grid-template-columns: 1fr auto; grid-template-areas: "flight status" "dest dest" "loc loc"; }
  .board.is-register .board_loc { grid-area: loc; }
}

/* ================= START: PROJEKT-SLIDER ================= */
/* Zentrierter Poster-Slider: aktive Slide voll sichtbar mit Eckwinkeln,
   Nachbarn stark gedimmt und am Viewport-Rand angeschnitten. */
.home-events { position: relative; }
.home-events .swiper { overflow: visible; }
/* Alle sichtbaren Slides voll deckend und klickbar (User-Wunsch) —
   das aktive Slide markieren nur die Eckwinkel */
/* max-width < 84vw: auf Phones sollen die Nachbar-Artworks seitlich anteasern
   (sichtbarer Peek = (100vw − Slide)/2 − 24px spaceBetween ≈ 20px pro Seite) */
.home-events_slide { display: block; width: 27em; max-width: 76vw; }
.home-events_frame { position: relative; display: block; padding: .875em; }
.home-events_frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-events_frame .corner { opacity: 0; transition: opacity var(--dur-slow) var(--ease-expo); }
.swiper-slide-active .home-events_frame .corner { opacity: 1; }
.home-events_meta { display: flex; gap: var(--space-md); padding: var(--space-md) .875em 0; font-size: var(--text-tag); }
.home-events_idx { opacity: var(--opacity-muted); }
.home-events_meta_col { display: flex; flex-direction: column; gap: var(--space-xs); }
.home-events_name { font-weight: 700; }
.home-events_nav { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-lg); font-size: var(--text-tag); }
.home-events_btn { display: inline-flex; align-items: center; gap: var(--space-sm); background: none; border: 0; padding: var(--space-3xs); color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.home-events_btn .btn_icon { width: .5em; height: .5em; }
/* Swiper-Bundle setzt .swiper-pagination-horizontal auf width:100% — hier
   soll die Tick-Leiste kompakt zwischen Prev/Next sitzen. */
.home-events_nav .swiper_pagination { width: auto; position: static; }
@media (max-width: 767px) {
  .home-events_slide { width: 82vw; }
  .home-events_nav { gap: 1.25em; }
}

/* ================= KARTEN ================= */
.card { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 28em; margin-inline: auto; }
/* min-height: 0 — sonst wächst der Rahmen mit der Naturhöhe hoher Bilder (aspect-ratio ist nur „preferred"),
   Bilder werden stattdessen per object-fit auf das Kartenformat beschnitten */
.card_visual_wrapper { position: relative; aspect-ratio: 4 / 3; width: 100%; min-height: 0; overflow: hidden; }
.card_border { position: absolute; inset: 0; border: var(--border-1); pointer-events: none; }
.card_markers { position: absolute; inset: 0; z-index: var(--z-card); color: currentColor; opacity: var(--opacity-marker); transition: opacity var(--dur-slower) var(--ease-expo); pointer-events: none; }
.card_visual {
  position: relative; z-index: var(--z-card);
  width: 100%; height: 100%; overflow: hidden;
  border-radius: var(--radius-small);
  transition: width var(--dur-slow) var(--ease-expo), height var(--dur-slow) var(--ease-expo);
}
.card_visual img, .card_visual video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zähler-Rinne als Padding im 1em-Kontext — Margins auf den .75em-Kindern
   wären zu schmal (em-Falle). */
.card_bottom { position: relative; display: flex; flex-direction: column; gap: var(--space-2xs); padding-left: var(--space-lg); }
.card_count { position: absolute; top: 0; left: 0; font-size: var(--text-tag); }
.card_title { font-size: var(--text-tag); font-weight: 700; }
.card_meta { font-size: var(--text-tag); }
/* Hover: Bild schrumpft ins 1em-Inset, Marker erscheinen (Signature-Motiv) */
@media (min-width: 768px) and (hover: hover) {
  .card:hover .card_visual { width: calc(100% - var(--card-inset)); height: calc(100% - var(--card-inset)); }
  .card:hover .card_markers { opacity: 1; }
}
@media (max-width: 767px) {
  .swiper-slide-active .card_visual { width: calc(100% - var(--card-inset)); height: calc(100% - var(--card-inset)); }
  .swiper-slide-active .card_markers { opacity: 1; }
}
/* Formate: Hochformat (Portrait) und 3:2 (Renderings); S/W-Variante */
.card_visual_wrapper.is-portrait { aspect-ratio: 4 / 5; }
.card_visual_wrapper.is-wide { aspect-ratio: 3 / 2; }
.card_visual.is-mono img { filter: grayscale(1); }
.card.is-full { max-width: none; }

/* ================= SWIPER ================= */
.swiper { cursor: grab; overflow: visible; }
.swiper:active { cursor: grabbing; }
.slider_wrapper { position: relative; }
.slider_item { height: auto; }
/* Geschwister-Dimming beim Hover (Desktop) */
@media (min-width: 992px) and (hover: hover) {
  [data-swiper-dim]:hover .slider_item { opacity: var(--opacity-dim); transition: opacity var(--dur-base) var(--ease-expo); }
  [data-swiper-dim]:hover .slider_item:hover { opacity: 1; }
}
.slider_nav { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); margin-top: var(--space-lg); }
.slider_nav_btn { font-size: var(--text-tag); display: flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.slider_nav_btn.swiper-button-disabled { opacity: var(--opacity-muted); cursor: not-allowed; }

/* Soundwave-Pagination (aus der Analyse, 5er-Höhenzyklus) */
.swiper_pagination { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-3xs); height: 1.25em; }
.swiper_pagination .swiper-pagination-bullet {
  width: 1px; border-radius: 0; margin: 0 !important; opacity: .4 !important;
  background: currentColor; flex-shrink: 0;
  transition: height var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.swiper_pagination .swiper-pagination-bullet:nth-child(5n+1) { height: .875em; }
.swiper_pagination .swiper-pagination-bullet:nth-child(5n+2) { height: 1.125em; }
.swiper_pagination .swiper-pagination-bullet:nth-child(5n+3) { height: .625em; }
.swiper_pagination .swiper-pagination-bullet:nth-child(5n+4) { height: 1em; }
.swiper_pagination .swiper-pagination-bullet:nth-child(5n+5) { height: .75em; }
.swiper_pagination .swiper-pagination-bullet-active { height: 1.25em !important; opacity: 1 !important; }

/* ================= MARQUEE ================= */
.marquee { overflow: hidden; width: 100%; border-block: var(--border-1); user-select: none; touch-action: pan-y; }
.marquee_track { display: flex; width: max-content; }
.marquee_list { display: flex; flex: none; align-items: center; }
.marquee_item {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display); font-stretch: var(--font-display-stretch);
  font-weight: 900; font-size: var(--text-headline); line-height: 1; white-space: nowrap;
}
.marquee_item .tag_dot { width: .25em; height: .25em; }

/* ================= KENNZAHLEN ================= */
/* Kennzahlen-Leiste */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 1099px) { .statgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .statgrid { grid-template-columns: 1fr; } }   /* „24,5 Mio. €" bleibt einzeilig */
.stat { display: flex; flex-direction: column; gap: var(--space-sm); border-top: var(--border-1); padding-top: var(--space-sm); }
.stat_label { font-size: var(--text-tag); opacity: var(--opacity-muted); }
.stat_value {
  font-family: var(--font-display); font-stretch: var(--font-display-stretch);
  font-weight: 900; font-size: var(--text-headline); line-height: 1; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.stat_note { font-size: var(--text-tag); opacity: var(--opacity-muted); }
@media (max-width: 767px) {
  .statgrid { grid-template-columns: 1fr 1fr; }
}

/* Leistungs-Tafel: CODE | LEISTUNG | BESCHREIBUNG (3 Spalten) */
.board.is-ops .board_head, .board.is-ops .board_row_inner { grid-template-columns: 6em 1fr 26em; }
.board_desc { text-transform: none; opacity: var(--opacity-muted); }
@media (max-width: 991px) {
  .board.is-ops .board_head, .board.is-ops .board_row_inner { grid-template-columns: 6em 1fr; }
  .board.is-ops .board_desc { grid-column: 2; }
}
@media (max-width: 767px) {
  .board.is-ops .board_row_inner { grid-template-columns: 1fr; grid-template-areas: "flight" "dest" "desc"; }
  .board.is-ops .board_desc { grid-area: desc; grid-column: auto; }
}

/* Partner-/Referenzliste */
.partner_list { border-top: var(--border-1); }
.partner_row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md);
  padding-block: var(--space-sm); border-bottom: var(--border-1); font-size: var(--text-tag);
}
.partner_row_role { opacity: var(--opacity-muted); white-space: nowrap; }

/* ================= LEGAL (Impressum & Datenschutz) ================= */
.legal { border-bottom: var(--border-1); }
.legal_row {
  display: grid; grid-template-columns: 13em 1fr; gap: var(--space-md);
  padding-block: var(--space-md); border-top: var(--border-1);
}
.legal_label { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); }
.legal_text {
  max-width: 38em; text-transform: none; font-weight: 400; line-height: 1.35;
  display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--text-copy);
}
.legal_text a { text-decoration: underline; }
@media (max-width: 767px) {
  .legal_row { grid-template-columns: 1fr; gap: var(--space-xs); }
}
.legal_text ul { list-style: disc; padding-left: 1.2em; }
.legal_note { font-size: var(--text-tag); opacity: var(--opacity-muted); }

/* ================= FOOTER ================= */
.footer { position: relative; z-index: var(--z-footer); }
.footer_wrapper { position: relative; padding: var(--space-md); }
/* Bio-Spalte symmetrisch zum Link-Raster (User 2026-09-15): stretch + margin-auto
   verankern das Logo an der Oberkante der Spalten-Header und Copyright/Claim
   an der Unterkante der längsten Linkliste */
.footer_inner { display: flex; gap: var(--space-lg); align-items: stretch; }
.footer_bio { display: flex; flex-direction: column; gap: var(--space-md); width: 24em; flex: none; }
.footer_bio p { margin-top: auto; }
.footer_logo { display: block; }
.footer_logo_img { height: 3.5em; width: auto; }
/* vier Textspalten gleich breit, die Button-Spalte so breit wie der Button — so sind alle Spaltenabstände identisch */
.footer_links_grid { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--space-lg) var(--space-md); flex: 1; }
.footer_col_header { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-tag); font-weight: 700; padding-block: var(--space-2xs); }
.footer_col_lines { display: none; position: relative; width: .625em; height: .625em; }
.footer_col_lines::before, .footer_col_lines::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; }
.footer_col_lines::after { transform: rotate(90deg); }
.footer_col.is-open .footer_col_lines::after { transform: rotate(0deg); }
.footer_list { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--text-tag); padding-top: var(--space-xs); }
/* Investorenportal-Button als fünfte Spalte: ohne Kopfzeile, oben auf Höhe der Spaltenüberschriften; mobil sichtbar (kein Akkordeon) */
.footer_col.is-cta { display: flex; align-items: flex-start; }
.footer_col.is-cta .btn { margin-top: var(--space-3xs); }   /* Oberkante des Buttons auf der Textoberkante der Spaltenköpfe */
/* 992–1099 px: vier Textspalten passen neben Bio und Button nicht mehr nebeneinander
   (seit die Grundschrift dort 16 px statt 11 px ist) → zwei Spalten, Button rechts daneben. */
@media (min-width: 992px) and (max-width: 1099px) {
  .footer_links_grid { grid-template-columns: 1fr 1fr auto; }
  .footer_col.is-cta { grid-row: span 2; }
}
@media (max-width: 991px) {
  .footer_inner { flex-direction: column-reverse; }
  .footer_bio { width: 100%; }
  .footer_links_grid { grid-template-columns: 1fr; width: 100%; gap: 0; }
  .footer_col { border-top: var(--border-1); }
  .footer_col.is-cta { padding-block: var(--space-sm); }
  .footer_col_header { padding-block: var(--space-sm); }
  .footer_col_lines { display: block; }
  /* Kollabiert MUSS die Box exakt 0 hoch sein — stehendes padding zeigte die
     angeschnittene erste Zeile. Abstand unten via :last-child-margin (zaehlt
     dank overflow:hidden/BFC in die height-Messung des Accordions). */
  .footer_list { height: 0; overflow: hidden; padding-block: 0; }
  .footer_list > :last-child { margin-bottom: var(--space-sm); }
}

/* ================= PROJEKT-KARTEN (Projekte-Übersicht) ================= */
.proj_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
.proj_card { display: flex; flex-direction: column; gap: var(--space-sm); }
.proj_card_visual {
  display: block; overflow: hidden; border-radius: var(--radius-small);
  aspect-ratio: 3 / 2; background: var(--color-dark-5, #eee);
}
.proj_card_visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-expo);
}
.proj_card_meta { display: flex; gap: var(--space-md); align-items: baseline; font-size: var(--text-tag); }
.proj_card_idx { font-family: var(--font-mono); font-weight: 400; opacity: var(--opacity-muted); white-space: nowrap; }
.proj_card_col { display: flex; flex-direction: column; gap: var(--space-xs); }
.proj_card_name { font-weight: 700; }
.proj_card_date { opacity: var(--opacity-muted); }
.proj_card_meta .board_status { margin-left: auto; }
@media (max-width: 767px) { .proj_grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
.proj_grid.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .proj_grid.is-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .proj_grid.is-3 { grid-template-columns: 1fr; } }
.proj_grid.is-4 { grid-template-columns: repeat(4, 1fr); }   /* Investorenportal-Übersicht: kompakte Kacheln */
/* Kompakte Kachel: Meta als Raster — Code | Name/Ort/Ticket, Status in eigener Zeile unter dem Text */
.proj_grid.is-4 .proj_card_meta { display: grid; grid-template-columns: auto 1fr; align-items: start; row-gap: var(--space-xs); }
.proj_grid.is-4 .proj_card_meta .board_status { grid-column: 2; margin-left: 0; justify-self: start; }
@media (max-width: 991px) { .proj_grid.is-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .proj_grid.is-4 { grid-template-columns: 1fr; } }

/* ================= SEITEN-HERO (Projektseiten) ================= */
.page-hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; color: var(--color-light); overflow: hidden; padding-block: 8em 4em; }
.page-hero_bg { position: absolute; inset: 0; z-index: 0; }
.page-hero_bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero_bg::after { content: ""; position: absolute; inset: 0; background: var(--color-dark-50); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero_meta { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.page-hero_meta_item { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-tag); }
.page-cta {
  position: fixed; z-index: var(--z-cta);
  right: calc(var(--space-lg) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--space-sm);
}
@media (max-width: 479px) {
  /* Volle Breite am unteren Rand: ein Button fuellt die Leiste, zwei teilen sie sich.
     Der Home-Indikator bekommt seinen Raum aus dem Button-Padding — so traegt der
     Streifen die Button-Farbe und es entsteht kein Fremdblock daneben. */
  .page-cta { inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .page-cta .btn { border-radius: 0; padding-bottom: calc(var(--padding-button) + env(safe-area-inset-bottom, 0px)); }
}
.page-hero.is-center { justify-content: center; }
.page-hero_title { max-width: 12em; }
.page-hero_meta_item span:first-child { opacity: var(--opacity-muted); }

/* ================= EMPTY STATE ================= */
.empty-state { padding: var(--space-lg); border: var(--border-1); text-align: center; font-size: var(--text-tag); opacity: var(--opacity-muted); }

/* Draw-in: JS armiert [data-draw] (.is-armed), IntersectionObserver löst
   .is-drawn aus. Ohne JS bleibt alles gezeichnet (Progressive Enhancement). */
[data-draw] .bp { transition: stroke-dashoffset 1.5s var(--ease-expo); }
[data-draw].is-armed .bp { stroke-dasharray: 1; stroke-dashoffset: 1; transition: none; }
[data-draw].is-armed.is-drawn .bp { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease-expo); }
[data-draw].is-armed.is-drawn .bp:nth-of-type(2n) { transition-delay: .15s; }
[data-draw].is-armed.is-drawn .bp:nth-of-type(3n) { transition-delay: .3s; }
[data-draw] .bp_label { transition: opacity .5s var(--ease-expo) .9s; }
[data-draw].is-armed .bp_label { opacity: 0; transition: none; }
[data-draw].is-armed.is-drawn .bp_label { opacity: 1; transition: opacity .5s var(--ease-expo) .9s; }

/* ---- Seiten-Intro (linke Spalte): Text und Spec-Linien enden auf derselben
   Kante — 26em Lesebreite × 1.125 (Copy-Größe) = 29.25 Wrapper-em ---- */
.page-intro { max-width: 29.25em; }
/* Artwork an die RECHTE Rasterkante — spiegelt den linksbuendigen Text
   (die .card zentriert sich sonst in ihrer Spalte und laesst rechts Luft) */
.page-intro + .card { margin-inline: auto 0; }

/* ---- Spec-Block (Projektseiten): Kennzahlen ---- */
/* Specs sind gelesener Inhalt (Telefon, E-Mail, Flächen) → Copy-Größe, Mono */
.specs { display: flex; flex-direction: column; font-size: var(--text-copy); }
.specs_row { display: grid; grid-template-columns: 10em 1fr; gap: var(--space-md); padding-block: var(--space-xs); border-top: var(--border-1); }   /* 10em: „[Fertigstellung]" passt in Mono */
.specs_row:last-child { border-bottom: var(--border-1); }
/* Unter 480 px bliebe neben der 10em-Beschriftung zu wenig Platz für den Wert */
@media (max-width: 479px) { .specs_row { grid-template-columns: 1fr; row-gap: var(--space-3xs); } }
.specs_key { opacity: var(--opacity-muted); }
.section-dark .specs_row { border-color: var(--color-light-20); }
.specs a { text-decoration: underline; text-decoration-color: var(--color-dark-20); text-underline-offset: .2em; }

/* ---- Merkmal-Kacheln (Projektseiten): Icons,
   Icons zeichnen sich via [data-draw]/.bp beim Scrollen ---- */
.groundops { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--space-md); width: 100%; }
.sitemap_panel { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; }
.sitemap_panel .sitemap { border: var(--border-1); }
@media (max-width: 991px) { .groundops { grid-template-columns: 1fr 1fr; } }
.groundops_item { display: flex; flex-direction: column; gap: .45em; padding-block: var(--space-sm); border-top: var(--border-1); }
.groundops_icon { width: 1.9em; height: 1.9em; }
.groundops_icon .bp { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.groundops_title { font-size: var(--text-tag); opacity: var(--opacity-muted); }
.groundops_text { font-size: var(--text-tag); text-transform: none; opacity: var(--opacity-muted); max-width: 18em; }
@media (max-width: 479px) { .groundops { grid-template-columns: 1fr; } }

/* ---- Lageplan: DOP20-Luftbild mit Markern ---- */
.sitemap { position: relative; }
.sitemap img { display: block; width: 100%; }
.sitemap_marker { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .5em; color: var(--color-light); }
.sitemap_marker i { flex: none; width: .6em; height: .6em; background: var(--color-brand); border: 1px solid #fff; transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }
.sitemap_marker em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-tag); white-space: nowrap; background: rgba(0, 0, 0, .55); padding: .25em .55em; }

/* ---- Kennzahlen-Zeile ---- */
.factline {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-tag); border-block: var(--border-1); padding-block: var(--space-sm);
}

/* ---- Foto mit Bildunterschrift ---- */
.photo_figure { display: flex; flex-direction: column; gap: var(--space-xs); }
.photo_figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-small); }
.photo_figure_caption { font-size: var(--text-tag); opacity: var(--opacity-muted); }

/* Punktliste (dunkle Sektion) */
.pointlist { display: flex; flex-direction: column; }
.pointlist_row { display: flex; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-light-20); font-size: var(--text-tag); }
.pointlist_row:last-child { border-bottom: 1px solid var(--color-light-20); }
.pointlist_idx { opacity: var(--opacity-muted); flex: none; }
/* Listentext in Copy-Größe; die Zeile bleibt .75em-Kontext (Index, Dot, Gaps), daher durch --tag-ratio teilen */
.pointlist_text { text-transform: none; font-weight: 400; font-size: calc(var(--text-copy) / var(--tag-ratio)); }
/* helle Variante */
.pointlist.is-light .pointlist_row { border-color: var(--color-border); }

/* ================= KONTAKT (Hülle, auf allen Seiten) ================= */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.contact .specs { font-size: var(--text-tag); }   /* Kontaktdaten eine Stufe unter Copy (User 17.09.); Kennzahlen-Specs bleiben Copy */
.contact .specs_row { grid-template-columns: 8em 1fr; padding-block: var(--space-sm); }
.contact .specs a { text-decoration-color: var(--color-light-20); }
.contact_note { font-size: var(--text-tag); opacity: var(--opacity-muted); text-transform: none; }
@media (max-width: 767px) { .contact { grid-template-columns: 1fr; } }

/* ================= ZEIGER-ERGONOMIE (Hover nur mit Maus, Trefferflächen für den Finger) ================= */
.nav_link, .menu_link, .footer_list a, .btn, .menu_lang a, .nav_lang a { transition: opacity var(--dur-base) var(--ease-expo); }

/* Hover NUR mit echtem Zeiger: auf Touch bliebe der Zustand nach dem Tippen kleben. */
@media (hover: hover) {
  .nav_link:hover, .menu_link:hover, .footer_list a:hover, .btn:hover, .menu_lang a:hover, .nav_lang a:hover { opacity: .65; }
  .nav_link[aria-current="page"]:hover, .nav_lang a[aria-current="true"]:hover { opacity: 1; }
  .nextup:hover { opacity: 1; }
  .board_row:hover .board_row_inner { padding-left: var(--space-md); }
  .proj_card:hover .proj_card_visual img { transform: scale(1.03); }
  .deck_hud a:hover { opacity: .65; }
  .deck_nav button:hover { opacity: 1; }
}
/* Touch bekommt stattdessen eine kurze Rückmeldung beim Tippen. */
@media (hover: none) {
  :is(.btn, .menu_link, .nav_link, .footer_list a, .board_row, .proj_card, .deck_hud a):active { opacity: .65; transition: none; }
}

/* Trefferflächen ab 44 px (Apple HIG / WCAG 2.5.5) — unsichtbar, das Layout bleibt.
   min(0px, …) vergrößert nur, verkleinert nie; top/bottom rechnen gegen die Höhe,
   left/right gegen die Breite des Elements. */
@media (pointer: coarse) {
  .btn { min-height: 2.75em; }
  /* .menu-button ist bereits fixed und darf NICHT auf relative zurückgesetzt werden
     (sonst rutscht der Knopf aus dem Bild); fixed reicht als Bezug fürs Pseudo. */
  :is(.menu_close, .btn.is-link, .home-events_btn, .slider_nav_btn) { position: relative; }
  :is(.menu-button, .menu_close, .btn.is-link, .home-events_btn, .slider_nav_btn)::before {
    content: ""; position: absolute; inset: min(0px, calc(50% - 22px));
  }
  /* Zeilen-Links: nur in der Höhe aufspannen, sonst kollidieren Nachbarn. */
  :is(.specs a, .menu_lang a, .nav_lang a) { position: relative; }
  :is(.specs a, .menu_lang a, .nav_lang a)::before {
    content: ""; position: absolute; inset-inline: -.375em; inset-block: min(0px, calc(50% - 22px));
  }
  /* HUD-Links stehen einzeln (Gap unten auf space-lg) — hier auch in der Breite auf 44 px.
     position: relative NUR fuer Links innerhalb der Ecken — die Ecken selbst sind
     fixed (auf der Code-Seite ist .deck_hud_tl der Wortmarken-Link) und wuerden
     sonst aus dem Bild rutschen; fixed genuegt als Bezug fuers Pseudo-Element. */
  .deck_hud_bl a, .deck_hud_br a { position: relative; }
  .deck_hud a::before { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
  /* Listen mit eigenem Zeilenrhythmus: echtes Padding (Pseudo-Flächen würden überlappen). */
  .menu_links { gap: var(--space-2xs); }
  .menu_link { padding-block: .6em; }
  .footer_list { gap: 0; }
  .footer_list a { padding-block: .75em; }
  .contact .specs_row { padding-block: var(--space-md); }
  .deck_hud_bl { gap: var(--space-lg); }
}

/* ================= UNTERSEITEN-REDESIGN (Entwicklung, Dienstleistung, Über uns, Projekte) ================= */

/* ---- Seiten-Hero, kurze Foto-Variante ---- */
.page-hero.is-short { min-height: 74dvh; justify-content: flex-end; }
.page-hero.is-short .page-hero_bg img { object-position: var(--hero-focus, 50% 50%); }
/* Scrim: oben abdunkeln (Navbar läuft unter difference — heller Himmel wäre die 50%-Grau-Todeszone), unten für die Headline */
.page-hero.is-short .page-hero_bg::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 28%),
    linear-gradient(to top, rgba(0, 0, 0, .6), transparent 55%),
    var(--color-dark-50);
}
@media (max-width: 767px) { .page-hero.is-short { min-height: 62dvh; } }

/* ---- Zitat-Display (Über uns): leicht, gesperrt, Satzschrift wie die alte Seite ---- */
.display.is-quote { font-weight: 300; font-size: 1.875em; line-height: 1.45; letter-spacing: .08em; text-transform: none; max-width: 26em; }
.display.is-quote::before, .display.is-quote::after { content: none; }
@media (max-width: 767px) { .display.is-quote { font-size: 1.25em; letter-spacing: .05em; } }

/* ---- Layout-Utilities (additiv) ---- */
.flex-col.is-centered { align-items: center; text-align: center; }
.grid.is-middle { align-items: center; }
.card_visual_wrapper.is-video { aspect-ratio: 16 / 9; }
.section-dark .card_border { border-color: var(--color-light-20); }
.section-dark .specs a { text-decoration-color: var(--color-light-20); }
.section-dark .marquee { border-color: var(--color-light-20); }
.section-dark .proj_card_visual { background: #111; }
/* Blocksatz bleibt (reveal.js), aber mit Silbentrennung gegen Löcher */
.text-body.is-hyph { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }

/* ---- Leistungs-Tafel: Beschreibungen in Raleway, kompakte LPH-Liste ---- */
.board.is-ops.is-prose .board_head, .board.is-ops.is-prose .board_row_inner { grid-template-columns: 5em 1fr 34em; }
.board.is-ops.is-prose .board_desc { font-family: var(--font-ui); font-weight: 400; font-size: calc(var(--text-copy) / var(--tag-ratio)); line-height: 1.35; opacity: .75; max-width: 30em; }
@media (max-width: 991px) {
  .board.is-ops.is-prose .board_head, .board.is-ops.is-prose .board_row_inner { grid-template-columns: 5em 1fr; }
  .board.is-ops.is-prose .board_desc { grid-column: 2; }
}
@media (max-width: 767px) { .board.is-ops.is-prose .board_row_inner { grid-template-columns: 1fr; } .board.is-ops.is-prose .board_desc { grid-column: auto; } }

/* ---- Ablauf (Entwicklung): vier nummerierte Schritte, Ziffern wie .stat_value ---- */
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg) var(--space-md); }
.pipeline_step { display: flex; flex-direction: column; gap: var(--space-sm); border-top: var(--border-1); padding-top: var(--space-md); }
.section-dark .pipeline_step { border-color: var(--color-light-20); }
.pipeline_num { font-family: var(--font-display); font-weight: 900; font-size: var(--text-headline); line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--color-brand-light); margin-bottom: var(--space-xs); }
.pipeline_title { font-size: var(--text-subhead); font-weight: 700; }
.pipeline_text { font-size: var(--text-copy); font-weight: 400; text-transform: none; opacity: .75; max-width: 18em; line-height: 1.35; }
@media (max-width: 991px) { .pipeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .pipeline { grid-template-columns: 1fr; } }

/* ================= LEISTUNGS-DIAGRAMM v2 (Kreislauf + drei Sektoren, dunkle Sektion) ================= */
.venn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20em, 36em); gap: var(--space-xl); align-items: center; }
.venn_svg { width: 100%; height: auto; overflow: visible; }
.venn_svg .bp { fill: none; stroke: var(--color-brand-light); stroke-width: 5; stroke-linecap: butt; }
.venn_arrow { fill: var(--color-brand-light); }
/* Scheiben: 82 % Deckung über Schwarz ergibt die gesampelten Alt-Töne; Überlappungen werden von selbst heller */
.venn_disc { fill-opacity: .82; transform-box: fill-box; transform-origin: center; }
.venn_disc.is-wohnbau { fill: #8b8882; }
.venn_disc.is-gewerbe { fill: #8a8070; }
.venn_disc.is-spezial { fill: #86827e; }
.venn_svg text { fill: var(--color-light); font-family: var(--font-display); text-anchor: middle; }
.venn_svg .venn_head { font-size: 20px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.venn_svg .venn_item { font-size: 12px; font-weight: 700; text-transform: none; }
.venn_svg .venn_cycle_lbl { font-size: 15px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; fill: var(--color-stone); }
[data-draw] .venn_disc { transition: opacity 1s var(--ease-expo), transform 1.4s var(--ease-expo); }
[data-draw].is-armed .venn_disc { opacity: 0; transform: scale(.9); transition: none; }
[data-draw].is-armed.is-drawn .venn_disc { opacity: 1; transform: none; transition: opacity 1s var(--ease-expo), transform 1.4s var(--ease-expo); }
[data-draw].is-armed.is-drawn .venn_disc:nth-child(2) { transition-delay: .12s; }
[data-draw].is-armed.is-drawn .venn_disc:nth-child(3) { transition-delay: .24s; }
/* Textliste nur mobil (SVG-Text wird dort zu klein) */
.venn_list { display: none; }
@media (max-width: 991px) { .venn { grid-template-columns: 1fr; } .venn_svg { max-width: 32em; margin-inline: auto; } }
@media (max-width: 767px) {
  .venn_list { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
  .venn_col { display: flex; flex-direction: column; gap: var(--space-xs); }
  .venn_label { font-family: var(--font-ui); font-size: var(--text-tag); font-weight: 700; border-top: 1px solid var(--color-light-20); padding-top: var(--space-xs); }
  .venn_col span { font-size: var(--text-copy); text-transform: none; opacity: .8; }
  .venn_svg .venn_item { display: none; }
}

/* ================= SOLID RING v2 (vier Segmente mit Pfeil-Enden) ================= */
.ring { display: grid; grid-template-columns: minmax(18em, 30em) 1fr; gap: var(--space-xl); align-items: center; }
.ring_svg { width: 100%; height: auto; overflow: visible; }
.ring_seg { stroke: var(--color-dark); stroke-width: 4; stroke-linejoin: miter; transform-box: view-box; transform-origin: 50% 50%; }
.ring_seg.is-1 { fill: var(--color-brand-light); }   /* Kaufmännisch */
.ring_seg.is-2 { fill: #626262; }                    /* Rechtlich */
.ring_seg.is-3 { fill: #3d3d3d; }                    /* Bautechnisch */
.ring_seg.is-4 { fill: #cbcbcb; }                    /* Vertrieb */
.ring_svg text { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: .01em; text-transform: none; fill: var(--color-light); text-anchor: middle; }
.ring_svg .ring_lbl.is-4 { fill: var(--color-dark); }
[data-draw] .ring_seg { transition: opacity .8s var(--ease-expo), transform 1.2s var(--ease-expo); }
[data-draw].is-armed .ring_seg { opacity: 0; transform: rotate(-10deg); transition: none; }
[data-draw].is-armed.is-drawn .ring_seg { opacity: 1; transform: none; transition: opacity .8s var(--ease-expo), transform 1.2s var(--ease-expo); }
[data-draw].is-armed.is-drawn .ring_seg.is-2 { transition-delay: .1s; }
[data-draw].is-armed.is-drawn .ring_seg.is-3 { transition-delay: .2s; }
[data-draw].is-armed.is-drawn .ring_seg.is-4 { transition-delay: .3s; }
.ring_list { display: flex; flex-direction: column; }
.ring_row { display: grid; grid-template-columns: 1.5em 1fr; gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-light-20); }
.ring_row:last-child { border-bottom: 1px solid var(--color-light-20); }
.ring_swatch { width: .875em; height: .875em; margin-top: .3125em; }
.ring_swatch.is-1 { background: var(--color-brand-light); }
.ring_swatch.is-2 { background: #626262; }
.ring_swatch.is-3 { background: #3d3d3d; outline: 1px solid var(--color-light-20); }
.ring_swatch.is-4 { background: #cbcbcb; }
.ring_title { font-size: var(--text-subhead); font-weight: 700; }
.ring_text { font-size: var(--text-copy); font-weight: 400; text-transform: none; opacity: .75; max-width: 28em; line-height: 1.35; }
@media (max-width: 991px) { .ring { grid-template-columns: 1fr; } .ring_svg { max-width: 26em; margin-inline: auto; } }

/* ---- Hero-Diashow (Entwicklung): gestapelte Bilder, Überblendung per .is-active (js/slideshow.js) ---- */
.page-hero_bg.is-slideshow img { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-expo); }
.page-hero_bg.is-slideshow img.is-active { opacity: 1; }
/* Pause/Weiter-Knopf der Diashow: unten rechts im Hero, über dem Scrim */
.slideshow_toggle { position: absolute; right: max(var(--padding-global), env(safe-area-inset-right, 0px)); bottom: calc(4em + env(safe-area-inset-bottom, 0px)); z-index: 2; }
@media (max-width: 767px) { .slideshow_toggle { bottom: calc(2em + env(safe-area-inset-bottom, 0px)); } }

/* ---- Teaser-Punktliste (Startseite Leistungen): Leitsatz + drei Kernpunkte statt Textwand ---- */
.pointlist.is-lead { max-width: 29.25em; }   /* gleiches Textmaß wie der Leitsatz (26 Copy-em) */
.pointlist.is-lead .pointlist_row { gap: var(--space-sm); padding-block: var(--space-sm); }
.pointlist.is-lead .pointlist_text { line-height: 1.3; opacity: .8; }
.pointlist_row .tag_dot { flex: none; margin-top: .75em; }   /* Zeilen-em: Dot mittig zur ersten Copy-Zeile */

/* ---- Leistungs-Teaser: Zeilen beider Spalten fluchten ----
   Bild / h3-Titel / Leitsatz / Kernpunkte / Button liegen in gemeinsamen
   Grid-Zeilen (Subgrid), damit Titel, Trennlinien und Buttons auf gleicher
   Höhe stehen — unabhängig von der Zeilenzahl der Leitsätze. */
.grid.is-rows > .flex-col { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: var(--space-md); align-content: start; }
.grid.is-rows .mt-auto { padding-top: var(--space-md); }

/* ================= INVESTORENPORTAL (Gate, Übersicht, Deck, Downloads) ================= */
/* Übersicht: Status „Investoren gesucht" + Ticket-Zeile auf Projektkarten */
.board_status.is-open { color: var(--color-brand); }
.section-dark .board_status.is-open { color: var(--color-brand-light); }
.specs .board_status { justify-self: start; }
.specs.is-narrow { max-width: 36em; }
.proj_card_ticket { font-family: var(--font-mono); font-weight: 400; opacity: var(--opacity-muted); }

/* ---- Gate: Eingabemaske (Markup kommt aus functions/_middleware.js) ----
   Hintergrund: Guilloche-Muster Schwarz auf Schwarz (assets/img/pattern-solid-13.svg, echter Rapport 797×760 auf 60 % skaliert),
   zur Mitte hin abgedunkelt, damit die Karte ruhig bleibt. */
body.is-gate { background: #000 url("/assets/img/pattern-solid-13.svg") center top / 478px 456px repeat; }
body.is-gate::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 58% 62% at 50% 52%, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%); }
@media (max-width: 767px) { body.is-gate { background-size: 398px 380px; } }
.gate {
  position: relative; z-index: 1; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 5em max(var(--padding-global), env(safe-area-inset-right, 0px)) 5em max(var(--padding-global), env(safe-area-inset-left, 0px));
}
/* Ein Rhythmus: Tag → Headline → Felder → Button linksbündig, 1.25em Abstand (wie Tag + h1 im Seiten-Hero) */
.gate_card { width: 100%; max-width: 26em; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--space-md); }
/* Kopfzeile: Wortmarke oben links (Link zur Startseite — der Ausweg ohne Code) statt Textzeile; Höhe = .nav_logo_img (2.88em Root, HUD-Kontext .75em) */
.deck_hud a.gate_hud_logo { display: block; text-decoration: none; }
.gate_hud_logo img { display: block; height: 3.84em; width: auto; }
.gate_boxes { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-xs); }
.gate_boxes input {
  width: 100%; min-width: 0; aspect-ratio: 1 / 1; padding: 0;
  border: 1px solid var(--color-light-50); border-radius: var(--radius-small); background: rgba(255, 255, 255, .05);
  color: var(--color-light); font-family: var(--font-mono); font-size: var(--text-subhead); line-height: 1; text-align: center; text-transform: uppercase;
  caret-color: var(--color-brand-light); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.gate_boxes input:focus { border-color: var(--color-brand-light); box-shadow: 0 0 0 1px var(--color-brand-light); }
.gate_boxes input.is-filled { border-color: var(--color-light); }
.gate_msg { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); color: var(--color-signal-light); }
.gate_msg:empty { display: none; }   /* nimmt nur Platz ein, wenn ein Fehler angezeigt wird */
.gate_card .btn { width: 100%; }
.gate_hint { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); text-transform: none; }
.gate_hint a { text-decoration: underline; text-underline-offset: .2em; }
.is-error .gate_boxes { animation: gate-shake .4s ease; }
.is-error .gate_boxes input { border-color: var(--color-signal-light); }
@keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ---- Deck: Vollbild-Folien, HUD, Kapiteltrenner (js/deck.js) ---- */
html.is-deck { scroll-snap-type: y proximity; }
@media (max-width: 991px), (prefers-reduced-motion: reduce) { html.is-deck { scroll-snap-type: none; } }
.deck_slide { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 5em var(--padding-global) calc(4em + env(safe-area-inset-bottom, 0px)); scroll-snap-align: start; overflow: hidden; }
.deck_slide > .rail { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-lg); }
.deck_code { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); color: var(--color-brand-light); letter-spacing: .04em; }
.deck_chapter { justify-content: center; }
.deck_chapter_num { font-family: var(--font-display); font-weight: 900; font-size: var(--text-headline); line-height: 1; color: var(--color-brand-light); }
.deck_chapter_sub { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); }
.deck_hud { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hud); color: var(--color-light); font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); text-transform: uppercase; }
.deck_hud_frame { position: absolute; inset: .75em; }
.deck_hud_tl, .deck_hud_tr, .deck_hud_bl, .deck_hud_br { position: fixed; }
.deck_hud_tl { top: calc(1.4em + env(safe-area-inset-top, 0px)); left: calc(1.6em + env(safe-area-inset-left, 0px)); }
.deck_hud_tr { top: calc(1.4em + env(safe-area-inset-top, 0px)); right: calc(1.6em + env(safe-area-inset-right, 0px)); }
.deck_hud_bl { bottom: calc(1.4em + env(safe-area-inset-bottom, 0px)); left: calc(1.6em + env(safe-area-inset-left, 0px)); display: flex; gap: var(--space-md); }
.deck_hud_br { bottom: calc(1.4em + env(safe-area-inset-bottom, 0px)); right: calc(1.6em + env(safe-area-inset-right, 0px)); }
.deck_hud a { pointer-events: auto; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--color-light-50); transition: opacity var(--dur-base) var(--ease-expo); }
@media (max-width: 767px) {
  .deck_hud_tr { display: none; }
  .deck_hud_bl { bottom: calc(1.2em + env(safe-area-inset-bottom, 0px)); left: calc(1.2em + env(safe-area-inset-left, 0px)); gap: var(--space-sm); }
  .deck_hud_br { bottom: calc(1.2em + env(safe-area-inset-bottom, 0px)); right: calc(1.2em + env(safe-area-inset-right, 0px)); }
  .deck_slide { padding: 4.5em var(--padding-global) calc(4.5em + env(safe-area-inset-bottom, 0px)); }
}
.deck_nav { position: fixed; right: 1.4em; top: 50%; transform: translateY(-50%); z-index: var(--z-cta); display: none; flex-direction: column; gap: var(--space-xs); }
html.js .deck_nav { display: flex; }
.deck_nav button { width: 2.75em; height: 2.75em; border: 1px solid var(--color-light-50); border-radius: var(--radius-small); color: var(--color-light); font-family: var(--font-mono); opacity: .75; transition: opacity var(--dur-base) var(--ease-expo); }
/* Handy/Tablet: Pfeile wandern nach unten rechts ueber den Zaehler — vorher gab
   es dort gar keine Blaetter-Moeglichkeit (nur freies Scrollen). */
@media (max-width: 991px) {
  .deck_nav {
    top: auto; transform: none; flex-direction: row;
    right: calc(1.2em + env(safe-area-inset-right, 0px));
    bottom: calc(3.4em + env(safe-area-inset-bottom, 0px));
  }
}
/* Reveal je Folie: JS setzt .is-in, CSS blendet die .deck_rv-Kinder gestaffelt ein */
html.js .deck_slide:not(.is-in) .deck_rv { opacity: 0; transform: translateY(1em); }
.deck_rv { transition: opacity var(--dur-slower) var(--ease-expo), transform var(--dur-slower) var(--ease-expo); }
.deck_rv:nth-child(2) { transition-delay: .08s; }
.deck_rv:nth-child(3) { transition-delay: .16s; }
.deck_rv:nth-child(4) { transition-delay: .24s; }
.deck_rv:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { html.js .deck_slide:not(.is-in) .deck_rv { opacity: 1; transform: none; } }
/* Platzhalterfläche (Karte, Rendering, Luftbild — Material folgt) */
.deck_ph { position: relative; width: 100%; aspect-ratio: 3 / 2; border: 1px solid var(--color-light-20); border-radius: var(--radius-small); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 .5em, transparent .5em 1.5em); display: flex; align-items: center; justify-content: center; }
.deck_ph.is-map { aspect-ratio: 16 / 9; }
.deck_ph_label { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); text-align: center; padding: var(--space-md); }
.deck_ph .corner { opacity: .6; }
/* Kalkulations-Tafel: Pos. | Position | Betrag | Hinweis */
.board.is-calc .board_head, .board.is-calc .board_row_inner { grid-template-columns: 5em 1fr 12em 22em; }
.board_amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board.is-calc .board_desc { font-family: var(--font-ui); font-weight: 400; font-size: calc(var(--text-copy) / var(--tag-ratio)); line-height: 1.35; opacity: .75; }
.board_row.is-total { border-top: 1px solid var(--color-light-50); }
.board_row.is-total .board_dest, .board_row.is-total .board_amount { font-weight: 700; }
@media (max-width: 991px) {
  .board.is-calc .board_head, .board.is-calc .board_row_inner { grid-template-columns: 5em 1fr 10em; }
  .board.is-calc .board_desc, .board.is-calc .board_head span:nth-child(4) { display: none; }
}
@media (max-width: 767px) {
  .board.is-calc .board_row_inner { grid-template-columns: 1fr auto; grid-template-areas: "flight amount" "dest dest"; }
  .board.is-calc .board_amount { grid-area: amount; }
  .board.is-calc .board_dest { grid-area: dest; }
}
.section-dark .stat { border-color: var(--color-light-20); }
/* Download-Liste */
.doclist { display: flex; flex-direction: column; border-bottom: 1px solid var(--color-light-20); }
.doclist_row { display: grid; grid-template-columns: 5em 1fr auto; gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-top: 1px solid var(--color-light-20); }
.doclist_type { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); }
.doclist_col { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.doclist_name { font-size: var(--text-copy); font-weight: 700; text-transform: none; }
.doclist_meta { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-tag); opacity: var(--opacity-muted); }
.doclist_row.is-pending { opacity: var(--opacity-muted); }
@media (max-width: 767px) { .doclist_row { grid-template-columns: 5em 1fr; } .doclist_row .btn { grid-column: 2; justify-self: start; } }
/* Druck: hell, eine Folie je Seite */
@media print {
  html.is-deck { scroll-snap-type: none; }
  body.is-deck, body.is-deck.section-dark { background: #fff; color: #000; }
  .deck_hud, .deck_nav, .btn { display: none !important; }
  .deck_slide { min-height: 0; break-after: page; page-break-after: always; padding: 1.5em 0; overflow: visible; }
  .deck_rv { opacity: 1 !important; transform: none !important; }
  .deck_slide.is-cover .page-hero_bg { display: none; }
  .board.is-dark, .board.is-dark .board_row, .specs_row, .pointlist_row, .doclist, .doclist_row, .stat, .pipeline_step, .deck_ph, .board_row.is-total { border-color: var(--color-dark-20) !important; }
  .deck_code, .deck_chapter_num, .pipeline_num, .board_status.is-open { color: var(--color-brand) !important; }
  @page { size: A4 landscape; margin: 12mm; }
}