/* ============================================================
   ZONING · Feldführer der Arbeiten
   Aesthetik: ornithologischer Atelier-Feldführer
   Creme-Papier · Tiefseeblau-Tinte · ein Rost-Akzent
   ============================================================ */

:root {
  /* Farben */
  --paper:      #f4eee2;
  --paper-2:    #ece4d3;
  --paper-3:    #e4dac5;
  --ink:        #16212e;
  --ink-2:      #2c3a49;
  --ink-soft:   #5b6775;
  --navy:       #1b2c44;
  --navy-deep:  #132134;
  --rust:       #bf4a2b;
  --rust-2:     #d4623c;
  --cream:      #f4eee2;
  --line:       rgba(22, 33, 46, .16);
  --line-soft:  rgba(22, 33, 46, .09);

  /* Typo */
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Maße */
  --edge: clamp(1.1rem, 4vw, 4rem);
  --maxw: 1320px;
  --radius: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Imagegen phone frame asset geometry */
  --phone-frame-w: 864px;
  --phone-frame-h: 1821px;
  --phone-screen-x: 12.26852%;
  --phone-screen-y: 6.58979%;
  --phone-screen-w: 75.34722%;
  --phone-screen-h: 86.54585%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--rust); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Papierkorn ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---------- Fliegende Schwalbe ---------- */
.swift-flyby {
  position: fixed; z-index: 60; width: 46px; height: auto;
  top: 14vh; left: -8vw; fill: var(--ink); pointer-events: none;
  opacity: 0;
  animation: flyby 9s var(--ease-out) 1.1s forwards;
  filter: drop-shadow(0 6px 10px rgba(22,33,46,.18));
}
@keyframes flyby {
  0%   { opacity: 0; transform: translate(0,0) rotate(8deg) scale(.6); }
  8%   { opacity: 1; }
  40%  { transform: translate(46vw, -6vh) rotate(-4deg) scale(1); }
  70%  { transform: translate(82vw, 10vh) rotate(6deg) scale(.85); opacity: 1; }
  100% { transform: translate(118vw, 2vh) rotate(-2deg) scale(.7); opacity: 0; }
}

/* ============================================================
   Masthead
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem var(--edge);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color .3s, background .3s;
}
.masthead.is-stuck { border-color: var(--line); }

.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand__mark { width: auto; height: 42px; object-fit: contain; }
.brand__word {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: .14em; color: var(--ink); padding-right: .14em;
}

.mast-nav { display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 2rem); }
.mast-nav a {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); position: relative; padding: .25rem 0;
}
.mast-nav a:not(.mast-nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--rust); transition: width .35s var(--ease);
}
.mast-nav a:not(.mast-nav__cta):hover::after { width: 100%; }
.mast-nav__cta {
  border: 1px solid var(--ink); border-radius: 100px; padding: .42rem 1.05rem !important;
  transition: background .3s, color .3s, border-color .3s;
}
.mast-nav__cta:hover { background: var(--ink); color: var(--cream); }

@media (max-width: 620px) {
  .masthead { padding: .7rem var(--edge); }
  .mast-nav { gap: .8rem; }
  .mast-nav a:not(.mast-nav__cta) { display: none; }
  .brand__word { font-size: 1.3rem; }
  .brand__mark { height: 36px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  min-height: calc(100vh - var(--mast-h, 72px));
  min-height: calc(100dvh - var(--mast-h, 72px));
  padding: clamp(1.8rem, 5vh, 3.4rem) var(--edge) clamp(1.6rem, 3.5vh, 2.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center; column-gap: clamp(2rem, 6vw, 5.5rem);
  row-gap: clamp(1.4rem, 4vh, 2.6rem);
}
.hero__main { grid-column: 1; grid-row: 1; min-width: 0; }

/* Wabenfeld hinter dem Hero – feines Raster + wandernde Lichtwelle */
.hero__hexfield {
  position: absolute; inset: -6% -6% auto -6%; width: 112%; height: 116%;
  z-index: -1; pointer-events: none;
}
.hexfield__cell {
  fill: none; stroke: var(--ink); stroke-width: 1; opacity: .055;
  vector-effect: non-scaling-stroke;
}
.hexfield__lit {
  stroke: none; opacity: 0; mix-blend-mode: multiply;
  animation: hexlit var(--lit-dur, 8s) ease-in-out var(--lit-delay, 0s) infinite;
}
@keyframes hexlit {
  0%   { opacity: 0; }
  8%   { opacity: var(--lit-peak, .2); }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}
/* prefers-reduced-motion bewusst ignoriert — .hexfield__lit-Animation läuft immer */

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.4rem;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rust);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rust) 22%, transparent);
}
.eyebrow--light { color: color-mix(in srgb, var(--cream) 75%, transparent); }

.hero__title {
  font-family: var(--display); font-weight: 350;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); line-height: .98;
  letter-spacing: -.02em; margin: 0 0 1.3rem; color: var(--ink);
  font-optical-sizing: auto;
}
.hero__title em {
  font-style: italic; font-weight: 360; color: var(--rust);
  position: relative;
}
.hero__lead {
  max-width: 46ch; font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  color: var(--ink-2); margin: 0 0 1.6rem;
}

.hero__stats {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: clamp(1rem, 2.4vh, 1.7rem);
  margin: 0; padding: .2rem 0 .2rem clamp(1.3rem, 2.4vw, 2.2rem);
  border-left: 1px solid var(--line); align-self: center;
}
.hero__stats div { display: flex; flex-direction: column-reverse; gap: .15rem; }
.hero__stats dt {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.hero__stats dd {
  margin: 0; font-family: var(--display); font-weight: 380;
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: var(--ink);
}

.scroll-cue {
  grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: end;
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 0;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
}
.scroll-cue svg { width: 20px; height: 20px; fill: none; stroke: var(--rust); stroke-width: 1.6; }
.scroll-cue svg path { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }

/* Hero auf schmalen Schirmen: einspaltig, Kennzahlen als Reihe darunter */
@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr; grid-template-rows: none;
    align-content: center; align-items: start;
    row-gap: clamp(1.4rem, 4vh, 2.2rem);
  }
  .hero__main  { grid-column: 1; grid-row: auto; }
  .hero__stats {
    grid-column: 1; grid-row: auto;
    flex-direction: row; flex-wrap: wrap; gap: clamp(1.4rem, 5vw, 3rem);
    border-left: none; border-top: 1px solid var(--line);
    padding: 1.3rem 0 0; align-self: stretch;
  }
  .scroll-cue { grid-column: 1; grid-row: auto; align-self: start; }
}

/* ============================================================
   Sammlung – Kopf & Werkzeugleiste
   ============================================================ */
.collection {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) var(--edge) clamp(3rem, 9vh, 6rem);
}
.collection__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 2rem; margin-bottom: 1.8rem;
}
.section-title {
  font-family: var(--display); font-weight: 360;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); letter-spacing: -.015em;
  margin: 0; color: var(--ink);
}
.section-note { margin: 0; max-width: 38ch; color: var(--ink-soft); font-size: .95rem; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0 1.6rem; margin-bottom: 2.2rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: sticky; top: 62px; z-index: 30;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .03em;
  padding: .4rem .85rem; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  transition: all .25s var(--ease); white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip__count { opacity: .55; margin-left: .35rem; font-size: .9em; }
.chips--status .chip.is-active { background: var(--rust); border-color: var(--rust); }

.viewswitch {
  display: inline-flex; padding: 3px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--paper-2);
}
.viewswitch button {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .03em;
  border: 0; background: transparent; color: var(--ink-soft);
  padding: .4rem .95rem; border-radius: 100px; cursor: pointer;
  transition: color .25s, background .25s;
}
.viewswitch button.is-active { background: var(--ink); color: var(--cream); }

/* ============================================================
   Sammlung – getrennte Gewerbe-Cluster: jede Zone eine eigene kleine
   Wabe mit Beschriftung, per Flexbox mit Abstand übers Feld verteilt.
   Jede Kachel atmet leicht. Beim Hover wächst sie zu einem kompakten
   rechteckigen Vorschaufenster, das immer komplett sichtbar bleibt
   und alles überdeckt.
   ============================================================ */
.comb {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  /* Spalten-Abstand gedeckelt (max 2.25rem) + feste Wabenbreite: so ist die Cluster-
     Anordnung viewport-unabhängig und auf jedem Bildschirm identisch (24"-Windows =
     MacBook Air M1) – und Dienstleistung + Handwerk passen mit in die obere Reihe. */
  gap: clamp(2.4rem, 5vw, 4.4rem) clamp(2rem, 4vw, 2.25rem);
  max-width: 1190px;
  margin-inline: auto;
  margin-top: calc(clamp(1rem, 2.5vw, 2rem) + 3cm); /* Wabe ~3 cm nach unten geschoben */
}
/* solange eine Vorschau offen ist, hebt sich das Feld über Toolbar/Masthead */
.collection:has(.card:hover), .collection:has(.card:focus-within) { z-index: 60; }
.comb:has(.card:hover), .comb:has(.card:focus-within) { z-index: 50; }

/* Eine Gewerbe-Gruppe = getrennte kleine Wabe */
.cluster {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.7rem, 1.5vw, 1.1rem);
}
.cluster[hidden] { display: none; }
.cluster:has(.card:hover), .cluster:has(.card:focus-within) { z-index: 6; } /* über Nachbar-Cluster */
.cluster__label {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; white-space: nowrap;
  font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: color-mix(in srgb, var(--tint, var(--rust)) 70%, var(--ink));
}
.cluster__label b {
  font-weight: 500; color: var(--ink-soft); letter-spacing: .06em;
  border: 1px solid color-mix(in srgb, var(--tint, var(--line)) 42%, var(--line));
  border-radius: 100px; padding: .02rem .42rem;
}
/* die kleine Wabe eines Clusters (Breite/Höhe von JS gesetzt) */
.cluster__comb { position: relative; }

/* Eine Zelle (left/top/width/height von JS gesetzt) */
.card {
  --hex:  polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --rect: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%);
  --exp-w: min(460px, 92vw); --exp-h: min(380px, 82vh); --bar-h: 30px; --exp-x: 0px; --exp-y: 0px; --bob: 6px;
  position: absolute; top: 0; left: 0;
  width: 220px; height: 254px;            /* Fallback, bis JS misst */
  opacity: 0; transform: scale(.6);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.card.is-in { opacity: 1; transform: none; }
.card.is-hidden { display: none; }

.card__media {
  position: relative; display: block; cursor: pointer;
  width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent;
  animation: hex-bob var(--bob-dur, 6s) ease-in-out var(--bob-delay, 0s) infinite;
}
.card__media:focus-visible { outline: 0; }
/* Atem-Bewegung: jede Kachel wiegt sich leicht, Phase versetzt → Welle */
@keyframes hex-bob {
  0%, 100% { transform: translateY(calc(var(--bob, 6px) * -1)); }
  50%      { transform: translateY(var(--bob, 6px)); }
}

/* Das morphende Fenster: Sechseck im Ruhezustand → Rechteck beim Hover.
   .card__view trägt die Statusrandfarbe, .card__inner ist um 2.5px eingerückt. */
.card__view {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  -webkit-clip-path: var(--hex); clip-path: var(--hex);
  background: color-mix(in srgb, var(--tint, var(--line)) 52%, var(--paper-2)); /* getönte Zellwand je Gewerbe */
  filter: drop-shadow(0 12px 20px rgba(19, 33, 52, .16));
  transition: width .6s var(--ease-out), height .6s var(--ease-out),
              transform .6s var(--ease-out),
              -webkit-clip-path .6s var(--ease-out), clip-path .6s var(--ease-out),
              filter .6s var(--ease-out), background .3s var(--ease);
}
.card__media:focus-visible .card__view { background: var(--rust); } /* Fokus-Indikator (clip schneidet outline weg) */

.card__inner {
  position: absolute; inset: 2.5px; z-index: 1;
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-clip-path: var(--hex); clip-path: var(--hex);
  background: var(--paper-3);
  transition: -webkit-clip-path .6s var(--ease-out), clip-path .6s var(--ease-out);
}
/* zarte Gewerbe-Tönung über dem Screenshot (verschwindet beim Hover) */
.card__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--tint, transparent); opacity: .13; mix-blend-mode: multiply;
  transition: opacity .4s var(--ease-out);
}
.card:hover .card__inner::after, .card:focus-within .card__inner::after { opacity: 0; }

/* Browser-Leiste – im Ruhezustand zusammengeklappt, beim Hover ausgefahren */
.card__bar {
  flex: 0 0 auto; height: 0; overflow: hidden; opacity: 0;
  display: flex; align-items: center; gap: .5rem; padding: 0 .7rem;
  background: var(--paper-2); border-bottom: 1px solid transparent;
  transition: height .5s var(--ease-out), opacity .35s var(--ease-out);
}
.frame__dots { display: flex; gap: 5px; flex: 0 0 auto; }
.frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.frame__dots i:nth-child(1) { background: #d98b6e; }
.frame__dots i:nth-child(2) { background: #d9c27a; }
.frame__dots i:nth-child(3) { background: #9fbf8e; }
.frame__url {
  flex: 1; font-family: var(--mono); font-size: .66rem; color: var(--ink-soft);
  background: var(--paper); border-radius: 6px; padding: .2rem .6rem;
  border: 1px solid var(--line-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Screenshot-Fenster */
.shot { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--paper-3); }
.shot img { width: 100%; height: auto; display: block; transform: translateY(0); transition: transform .45s var(--ease); }

/* Ruhe-Beschriftung auf dem Sechseck (Name + Status) – blendet beim Hover aus */
.hex__veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: .25rem; padding: 0 15% 26%;
  text-align: center; pointer-events: none; color: var(--cream);
  background: linear-gradient(to top,
              color-mix(in srgb, var(--navy-deep) 90%, transparent) 6%,
              color-mix(in srgb, var(--navy-deep) 38%, transparent) 42%,
              transparent 66%);
  transition: opacity .3s var(--ease-out);
}
.hex__name {
  font-family: var(--display); font-weight: 380; line-height: 1.06;
  font-size: clamp(.92rem, 1.4vw, 1.1rem);
  text-shadow: 0 1px 10px rgba(10, 18, 28, .45);
}
.hex__veil .status {
  margin-top: .2rem; font-size: .58rem; padding: .12rem .46rem;
  border-color: color-mix(in srgb, var(--cream) 30%, transparent);
  color: color-mix(in srgb, var(--cream) 88%, transparent);
}

/* Hover-Beschriftung am unteren Rand des Rechtecks */
.card__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem .7rem .6rem; opacity: 0; pointer-events: none; color: var(--cream);
  transition: opacity .3s var(--ease-out) .12s;
  background: linear-gradient(to top, color-mix(in srgb, var(--navy-deep) 94%, transparent), color-mix(in srgb, var(--navy-deep) 45%, transparent) 64%, transparent);
}
.card__cap-name { font-family: var(--display); font-size: 1.02rem; line-height: 1.1; }
.card__cap .status { border-color: color-mix(in srgb, var(--cream) 32%, transparent); color: color-mix(in srgb, var(--cream) 85%, transparent); font-size: .6rem; padding: .14rem .44rem; }

/* ---- Hover/Focus: Sechseck → großes rechteckiges Vorschaufenster + Auto-Scroll ---- */
@media (hover: hover) {
  .card:hover, .card:focus-within { z-index: 40; }
  .card:hover .card__view,
  .card:focus-within .card__view {
    width: var(--exp-w); height: var(--exp-h);
    transform: translate(calc(-50% + var(--exp-x)), calc(-50% + var(--exp-y)));
    -webkit-clip-path: var(--rect); clip-path: var(--rect);
    filter: drop-shadow(0 40px 70px -28px rgba(10, 18, 28, .6));
  }
  .card:hover .card__inner,
  .card:focus-within .card__inner {
    -webkit-clip-path: var(--rect); clip-path: var(--rect);
  }
  .card:hover .card__bar,
  .card:focus-within .card__bar {
    height: var(--bar-h); opacity: 1; border-bottom-color: var(--line-soft);
  }
  .card:hover .shot img,
  .card:focus-within .shot img {
    transform: translateY(calc(-100% + (var(--exp-h) - var(--bar-h))));
    transition: transform var(--scroll-dur, 13s) linear .35s;
  }
  .card:hover .hex__veil,
  .card:focus-within .hex__veil { opacity: 0; }
  .card:hover .card__cap,
  .card:focus-within .card__cap { opacity: 1; }
  /* Atmen pausiert, solange die Vorschau offen ist */
  .card:hover .card__media,
  .card:focus-within .card__media { animation-play-state: paused; }
}

/* ---- Touch (Konzept A): dieselbe Aufblüh-/Auto-Scroll-Mechanik per Tap ----
   Spiegelt die Hover-Regeln auf eine .is-preview-Klasse, die JS beim Antippen
   setzt – ungated, damit sie auf Geräten ohne Hover funktioniert. ---- */
.card.is-preview { z-index: 40; }
.card.is-preview .card__view {
  width: var(--exp-w); height: var(--exp-h);
  transform: translate(calc(-50% + var(--exp-x)), calc(-50% + var(--exp-y)));
  -webkit-clip-path: var(--rect); clip-path: var(--rect);
  filter: drop-shadow(0 40px 70px -28px rgba(10, 18, 28, .6));
}
.card.is-preview .card__inner { -webkit-clip-path: var(--rect); clip-path: var(--rect); }
.card.is-preview .card__bar { height: var(--bar-h); opacity: 1; border-bottom-color: var(--line-soft); }
.card.is-preview .shot img {
  transform: translateY(calc(-100% + (var(--exp-h) - var(--bar-h))));
  transition: transform var(--scroll-dur, 13s) linear .35s;
}
.card.is-preview .hex__veil { opacity: 0; }
.card.is-preview .card__cap { opacity: 1; }
.card.is-preview .card__media { animation-play-state: paused; }

/* „Nochmal tippen zum Öffnen"-Hinweis – nur auf Touch & nur wenn aufgeblüht */
.card__tap-hint {
  position: absolute; left: 50%; bottom: 3.1rem; z-index: 4;
  transform: translate(-50%, 8px); pointer-events: none; white-space: nowrap;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .03em;
  padding: .26rem .62rem; border-radius: 100px;
  background: color-mix(in srgb, var(--navy-deep) 84%, transparent);
  color: color-mix(in srgb, var(--cream) 92%, transparent);
  opacity: 0; transition: opacity .3s var(--ease-out) .35s, transform .3s var(--ease-out) .35s;
}
@media (hover: none) {
  .card.is-preview .card__tap-hint { opacity: 1; transform: translate(-50%, 0); }
}
body[data-view="mobile"] .card__tap-hint { bottom: 1rem; }

/* Mobilmodus: fertige Phone-Preview-Assets statt scrollender Langscreenshots. */
body[data-view="mobile"] .card {
  --exp-w: min(340px, 86vw);
  --exp-h: min(620px, 82vh);
  --bar-h: 0px;
}
body[data-view="mobile"] .shot {
  --phone-preview-pad: clamp(7px, 1.4vw, 14px);
  --phone-preview-pad-2: clamp(14px, 2.8vw, 28px);
  display: block;
  background:
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--paper) 74%, #fff 14%), transparent 72%),
    var(--paper-3);
}
body[data-view="mobile"] .shot img {
  position: absolute; inset: var(--phone-preview-pad);
  width: calc(100% - var(--phone-preview-pad-2));
  height: calc(100% - var(--phone-preview-pad-2));
  max-width: none; max-height: none;
  object-fit: contain; margin: 0;
  transform: none !important; transition: none;
  filter: drop-shadow(0 18px 30px rgba(10, 18, 28, .24));
}
body[data-view="mobile"] .card__bar { display: none; }
body[data-view="mobile"] .card:hover .card__bar,
body[data-view="mobile"] .card:focus-within .card__bar {
  height: 0; opacity: 0; border: 0;
}
body[data-view="mobile"] .card:hover .shot img,
body[data-view="mobile"] .card:focus-within .shot img {
  width: calc(100% - var(--phone-preview-pad-2));
  height: calc(100% - var(--phone-preview-pad-2));
  max-width: none; max-height: none;
  transform: none !important; transition: none;
}
body[data-view="mobile"] .card__cap { display: none; }


@media (max-width: 560px) {
  .hex__name { font-size: .82rem; }
  .hex__veil { padding-bottom: 24%; }
  .comb { gap: clamp(2rem, 8vw, 3rem) clamp(1.4rem, 5vw, 2.4rem); }
  .cluster__label { font-size: .62rem; }
  .card { --bob: 5px; }
}

/* Status-Pille */
.status {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem;
  border-radius: 100px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
.status i { width: 7px; height: 7px; border-radius: 50%; }
.status--live i { background: #5b8c5a; }
.status--live { color: #426d41; border-color: color-mix(in srgb, #5b8c5a 35%, transparent); }
.status--wip i { background: var(--rust); animation: pulse 1.8s var(--ease) infinite; }
.status--wip { color: var(--rust); border-color: color-mix(in srgb, var(--rust) 35%, transparent); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rust) 55%, transparent); }
  60% { box-shadow: 0 0 0 6px transparent; }
}

.grid-empty {
  width: 100%; text-align: center; padding: 3rem 0;
  font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--ink-soft);
}

/* (Tags erscheinen jetzt nur noch in der Großansicht.) */

/* Highlights in der Großansicht */
.viewer__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.6rem; padding: 0; }
.viewer__tags li {
  font-family: var(--mono); font-size: .72rem; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; padding: .26rem .72rem;
}

/* ============================================================
   Ansatz (dunkle Sektion)
   ============================================================ */
.approach {
  position: relative; z-index: 2; background: var(--navy); color: var(--cream);
  padding: clamp(3.5rem, 11vh, 7rem) var(--edge);
  margin-top: clamp(2rem, 6vh, 4rem);
  border-radius: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px) 0 0;
  overflow: hidden;
}
.approach::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(120% 80% at 80% -10%, color-mix(in srgb, var(--rust) 30%, transparent), transparent 55%);
}
.approach > * { position: relative; max-width: var(--maxw); margin-inline: auto; }
.approach__title {
  font-family: var(--display); font-weight: 340; letter-spacing: -.015em;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1.06; margin: .4rem 0 0;
}
.approach__cols {
  display: grid; gap: 2rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(3, 1fr); margin-top: clamp(2.5rem, 6vh, 4rem);
}
.approach__cols article { border-top: 1px solid color-mix(in srgb, var(--cream) 28%, transparent); padding-top: 1.1rem; }
.approach__cols h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .5rem; color: var(--rust-2);
}
.approach__cols p { margin: 0; color: color-mix(in srgb, var(--cream) 82%, transparent); font-size: .98rem; }
@media (max-width: 740px) { .approach__cols { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--navy-deep); color: var(--cream);
  padding: clamp(2.5rem, 6vh, 4rem) var(--edge);
  display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
.footer__brand { display: flex; align-items: center; gap: 1rem; }
.footer__mark { width: 54px; height: 54px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.footer__claim { font-family: var(--display); font-style: italic; font-size: 1.25rem; margin: 0; max-width: 22ch; }
.footer__links { display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }
.footer__links a {
  font-family: var(--mono); font-size: .86rem; text-decoration: none;
  color: color-mix(in srgb, var(--cream) 80%, transparent); transition: color .25s;
}
.footer__links a:hover { color: var(--rust-2); }
.footer__legal {
  grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  padding-top: 1.4rem; margin: .5rem 0 0; font-size: .82rem;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}
@media (max-width: 640px) {
  .footer { grid-template-columns: 1fr; }
  .footer__links { align-items: flex-start; }
}

/* ============================================================
   Detail-Großansicht (Dialog)
   ============================================================ */
.viewer {
  border: 0; padding: 0; max-width: min(1180px, 94vw); width: 100%;
  max-height: 92vh; border-radius: clamp(14px, 2vw, 22px); overflow: hidden;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(10,18,28,.7);
}
.viewer::backdrop { background: rgba(15,23,34,.62); backdrop-filter: blur(6px); }
.viewer[open] { animation: pop .4s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }

.viewer__chrome {
  display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem .8rem 1.4rem;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.viewer__specimen { flex: 1; margin: 0; font-family: var(--mono); font-size: .76rem; color: var(--rust); letter-spacing: .05em; }
.viewer__tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 100px; border: 1px solid var(--line); background: var(--paper); }
.viewer__tabs button {
  font-family: var(--mono); font-size: .74rem; border: 0; background: transparent; color: var(--ink-soft);
  padding: .35rem .85rem; border-radius: 100px; cursor: pointer; transition: background .25s, color .25s;
}
.viewer__tabs button.is-active { background: var(--ink); color: var(--cream); }
.viewer__close {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; font-size: .9rem;
  transition: background .25s, color .25s, transform .25s;
}
.viewer__close:hover { background: var(--rust); color: var(--cream); border-color: var(--rust); transform: rotate(90deg); }

.viewer__body { display: grid; grid-template-columns: 1.7fr 1fr; max-height: calc(92vh - 60px); }
.viewer__stage {
  background: var(--paper-3); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; position: relative;
}
.viewer__stage img { width: 100%; height: auto; }

/* Mobil-Tab: echtes Telefon-Mockup – der Screenshot scrollt im Bildschirm,
   im korrekten Seitenverhältnis (nichts gestaucht, nichts abgeschnitten). */
.viewer__stage.is-mobile {
  display: grid; place-items: center; overflow: hidden;
  padding: clamp(1.1rem, 3vw, 2.2rem);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--paper) 70%, #fff 14%), transparent 70%),
    var(--paper-3);
}
.phone-device {
  position: relative;
  aspect-ratio: 864 / 1821;
  isolation: isolate;
  filter: drop-shadow(0 34px 70px rgba(10,18,28,.38));
}
.phone-device--viewer {
  width: min(330px, 88%);
}
.phone-device__screen {
  position: absolute;
  left: var(--phone-screen-x); top: var(--phone-screen-y);
  width: var(--phone-screen-w); height: var(--phone-screen-h);
  z-index: 1;
  overflow: hidden auto;
  background: #fff;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.phone-device__screen::-webkit-scrollbar { width: 0; height: 0; }
.phone-device__screen img {
  width: 100%; max-width: none; height: auto; display: block;
}
.viewer__stage .phone-device__frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; user-select: none;
}
.viewer__stage iframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; }
.viewer__stage.is-loading::before {
  content: "Lädt Live-Vorschau …"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-soft);
}

/* Fallback, wenn Einbetten gesperrt ist */
.viewer__stage.is-blocked { display: grid; place-items: center; padding: 0; }
.blocked {
  position: relative; width: 100%; min-height: 60vh; display: grid; place-items: center; padding: 2rem;
}
.blocked::before {
  content: ""; position: absolute; inset: 0; background-image: var(--bg);
  background-size: cover; background-position: top center; filter: blur(7px) saturate(.85) brightness(.7);
  transform: scale(1.08);
}
.blocked::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--navy-deep) 55%, transparent); }
.blocked__card {
  position: relative; z-index: 1; max-width: 360px; text-align: center;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--cream) 50%, transparent);
  border-radius: 18px; padding: 2rem 1.7rem; box-shadow: 0 24px 60px -30px rgba(10,18,28,.8);
}
.blocked__icon { width: 34px; height: 34px; fill: none; stroke: var(--rust); stroke-width: 1.6; margin: 0 auto .8rem; }
.blocked__title { font-family: var(--display); font-size: 1.3rem; margin: 0 0 .5rem; color: var(--ink); }
.blocked__text { font-size: .9rem; color: var(--ink-2); margin: 0 0 1.4rem; }

.viewer__meta { padding: clamp(1.4rem, 3vw, 2.2rem); border-left: 1px solid var(--line); overflow-y: auto; }
.viewer__name { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .3rem; letter-spacing: -.015em; }
.viewer__cat { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); margin: 0 0 1.2rem; }
.viewer__desc { color: var(--ink-2); margin: 0 0 1.6rem; }
.viewer__facts { display: grid; gap: .9rem; margin: 0 0 1.8rem; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.viewer__facts div { display: flex; justify-content: space-between; gap: 1rem; }
.viewer__facts dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.viewer__facts dd { margin: 0; font-weight: 600; text-align: right; }

.btn-live {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--ink); color: var(--cream); padding: .8rem 1.4rem; border-radius: 100px;
  font-weight: 600; transition: background .3s, gap .3s; width: 100%; justify-content: center;
}
.btn-live svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-live:hover { background: var(--rust); gap: .8rem; }
.viewer__hint { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); margin: 1.2rem 0 0; text-align: center; }
.viewer__hint kbd {
  font-family: var(--mono); background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 5px; padding: .1rem .4rem; font-size: .9em;
}

@media (max-width: 800px) {
  .viewer__body { grid-template-columns: 1fr; max-height: calc(92vh - 60px); overflow-y: auto; }
  .viewer__stage { max-height: 50vh; }
  .viewer__meta { border-left: 0; border-top: 1px solid var(--line); }
  .viewer__chrome { flex-wrap: wrap; }
  /* Mobil-Tab auf kleinen Screens: der Rahmen bleibt ein fester Preview-Viewport. */
  .viewer__stage.is-mobile { max-height: none; overflow: visible; align-items: start; }
  .viewer__stage.is-mobile .phone-device--viewer {
    width: min(300px, 78vw); height: auto; max-width: none;
  }
}

/* ============================================================
   Reduzierte Bewegung — bewusst deaktiviert
   prefers-reduced-motion wird absichtlich ignoriert, damit
   Bewegungen und Animationen auf allen Geräten immer laufen.
   ============================================================ */