/* MEYNEXA Relaunch, Entwurf 26.10.2026
   Leitidee: der Bauplan. Alles beginnt als blaue Zeichnung und wird zu etwas Echtem.
   Farben aus dem Brand Kit, abgeleitet nur Papier, Raster und das tiefe Navy. */

@font-face {
  font-family: 'Mulish';
  src: url('fonts/mulish-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --papier: #F5F7F9;
  --papier-hell: #FAFCFD;
  --raster: rgba(0, 113, 188, 0.055);
  --raster-stark: rgba(0, 113, 188, 0.1);
  --linie: #D5E0EA;
  --navy: #0D2D44;
  --navy-tief: #071C2B;
  --blau: #0071BC;
  --hell: #2F93D6;
  --grau: #787777;
  --tinte: #1F1F1F;
  --text: #25282B;
  --weiss: #FFFFFF;

  --schrift: 'Mulish', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;

  --rand: clamp(18px, 4vw, 56px);
  --breite: 1280px;
  --radius-buehne: clamp(20px, 2.4vw, 32px);
  --radius: 18px;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--papier);
  background-image:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(47, 147, 214, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 45% at 0% 60%, rgba(0, 113, 188, 0.05), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hell); outline-offset: 3px; border-radius: 6px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* Bauplan-Vermerk: kleine Beschriftung in Schreibmaschinenschrift */
.vermerk {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blau);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.vermerk::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.vermerk.ohne-strich::before { display: none; }

h1, h2, h3 { color: var(--tinte); margin: 0; font-weight: 900; letter-spacing: -0.03em; }
.titel-gross { font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; }
.titel-mittel { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; }
.einleitung { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--text); max-width: 56ch; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 12px;
  font: 800 1rem/1 var(--schrift);
  text-decoration: none; cursor: pointer;
  padding: 17px 22px 17px 24px;
  border-radius: 999px; border: 0;
  background: var(--blau); color: var(--weiss);
  transition: background 0.25s, transform 0.25s var(--kurve);
}
.knopf::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--weiss); transition: transform 0.35s var(--kurve);
}
.knopf:hover { background: var(--navy); }
.knopf:hover::after { transform: scale(1.6); }
.knopf.hell { background: var(--weiss); color: var(--navy); }
.knopf.hell::after { background: var(--blau); }
.knopf.hell:hover { background: var(--hell); color: var(--weiss); }
.knopf.hell:hover::after { background: var(--weiss); }
.textlink {
  font-weight: 800; text-decoration: none; color: var(--blau);
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* ---------------------------------------------------------------- Kopfzeile */
.kopfzeile {
  position: fixed; z-index: 50; top: 22px; left: 50%;
  width: min(calc(100% - 2 * var(--rand)), var(--breite));
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 10px 10px 18px;
  background: rgba(250, 252, 253, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(13, 45, 68, 0.08);
  border-radius: 999px;
  box-shadow: 0 10px 40px -18px rgba(7, 28, 43, 0.45);
  transition: top 0.4s var(--kurve);
}
.kopfzeile .logo img { height: 40px; width: auto; }
.kopfzeile nav { display: flex; gap: 4px; }
.kopfzeile nav a {
  text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--navy);
  padding: 10px 14px; border-radius: 999px; transition: background 0.2s;
}
.kopfzeile nav a:hover, .kopfzeile nav a[aria-current="page"] { background: rgba(0, 113, 188, 0.09); }
.kopfzeile .knopf { padding: 13px 18px 13px 20px; font-size: 0.92rem; }
.menueknopf { display: none; }

/* ---------------------------------------------------------------- Kopf / Hero */
.kopf {
  position: relative;
  margin: 12px;
  min-height: calc(100svh - 24px);
  border-radius: var(--radius-buehne);
  overflow: hidden;
  color: var(--weiss);
  background:
    radial-gradient(ellipse 55% 60% at 74% 38%, rgba(0, 113, 188, 0.75), transparent 70%),
    radial-gradient(ellipse 40% 45% at 12% 100%, rgba(47, 147, 214, 0.28), transparent 70%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-tief) 100%);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.kopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 74% 38%, rgba(47, 147, 214, 0.22), transparent 42%);
  filter: blur(20px);
}
.kopf-inhalt {
  position: relative; z-index: 3;
  width: 100%; max-width: calc(var(--breite) + 2 * var(--rand));
  margin: 0 auto; padding: 0 var(--rand) clamp(36px, 6vh, 72px);
}
.kopf .vermerk { color: var(--hell); }
.kopf h1 {
  color: var(--weiss);
  font-size: clamp(3.3rem, 8.8vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  margin: 22px 0 28px;
}
.kopf h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.06em; }
.kopf h1 .zeile > span { display: inline-block; transform: translateY(105%); animation: zeile-hoch 1.1s var(--kurve) forwards; }
.kopf h1 .zeile:nth-child(2) > span { animation-delay: 0.12s; }
.kopf h1 .punkt { color: var(--hell); }
@keyframes zeile-hoch { to { transform: none; } }
.kopf-unten { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.kopf-unten p { margin: 0 0 22px; max-width: 46ch; font-size: clamp(1.02rem, 1.25vw, 1.18rem); color: rgba(255, 255, 255, 0.82); }
.schnellwege { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 230px; }
.schnellwege a {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  text-decoration: none; font-weight: 700; color: var(--weiss);
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: padding 0.3s var(--kurve), color 0.2s;
}
.schnellwege a span { font-family: var(--mono); font-size: 0.72rem; color: var(--hell); }
.schnellwege a:hover { padding-left: 10px; color: var(--hell); }

/* Der Fächer: echte Arbeiten, die als Bauplan beginnen */
.faecher {
  position: absolute; z-index: 1;
  right: 3%; top: 12%;
  width: min(39vw, 580px); aspect-ratio: 1.15;
  perspective: 1400px;
}
.blatt {
  position: absolute; left: 50%; top: 50%;
  width: 54%; aspect-ratio: 0.78;
  margin: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) translateZ(var(--z, 0px));
  transition: transform 0.9s var(--kurve);
}
.blatt.quer { width: 70%; aspect-ratio: 1.45; }
.blatt.klein { width: 42%; }
.blatt-innen {
  position: absolute; inset: 0;
  border-radius: 14px; overflow: hidden;
  background: rgba(13, 45, 68, 0.4);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.blatt img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  clip-path: inset(100% 0 0 0);
  animation: blatt-fuellen 1.1s var(--kurve) forwards;
  animation-delay: calc(var(--i) * 0.22s + 1.05s);
}
.blatt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.blatt svg .zug {
  fill: none; stroke: var(--hell); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: zeichnen 1s var(--kurve) forwards;
  animation-delay: calc(var(--i) * 0.22s + 0.2s);
}
.blatt svg .zug.fein { stroke-width: 0.8; opacity: 0.55; animation-delay: calc(var(--i) * 0.22s + 0.55s); }
.blatt svg { animation: gitter-zurueck 0.8s ease forwards; animation-delay: calc(var(--i) * 0.22s + 1.9s); }
.blatt figcaption {
  position: absolute; left: 0; bottom: -28px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--hell); white-space: nowrap;
  opacity: 0; animation: vermerk-kurz 2.6s ease forwards;
  animation-delay: calc(var(--i) * 0.22s + 0.4s);
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes blatt-fuellen { to { clip-path: inset(0 0 0 0); } }
@keyframes gitter-zurueck { to { opacity: 0.28; } }
@keyframes einblenden { to { opacity: 1; } }
@keyframes vermerk-kurz { 0% { opacity: 0; } 15%, 60% { opacity: 1; } 100% { opacity: 0; } }
.faecher:hover .blatt figcaption { animation: none; opacity: 1; transition: opacity 0.3s; }
.faecher:hover .blatt { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.18), calc(var(--y) * 1.18)) rotate(calc(var(--r) * 1.3)) translateZ(var(--z, 0px)); }

/* Maßlinie unten im Kopf */
.masslinie {
  position: absolute; left: var(--rand); right: var(--rand); top: 108px; z-index: 2;
  height: 14px; color: rgba(47, 147, 214, 0.55);
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em;
}
.masslinie::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: currentColor;
  transform-origin: left; transform: scaleX(0); animation: strecken 1.6s var(--kurve) 0.3s forwards;
}
.masslinie span { position: absolute; top: -14px; }
.masslinie span:first-child { left: 0; }
.masslinie span:last-child { right: 0; }
@keyframes strecken { to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- Abschnitte allgemein */
.abschnitt { padding: clamp(88px, 13vw, 180px) 0; position: relative; }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.abschnitt-kopf .vermerk { align-self: start; padding-top: 0.6em; }

/* Sanftes Einblenden */
.js .zeigen { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--kurve), transform 0.9s var(--kurve); }
.js .zeigen.da { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Laufband Kunden */
.kunden { padding: clamp(70px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.kunden-kopf { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 36px; }
.kunden-kopf h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); max-width: 22ch; line-height: 1.12; }
.laufband { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband-spur { display: flex; gap: 18px; width: max-content; animation: laufen 38s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.logo-karte {
  flex: none; width: 250px; height: 132px; border-radius: var(--radius);
  background: var(--weiss); border: 1px solid var(--linie);
  display: grid; place-items: center; padding: 26px 34px;
}
.logo-karte img { max-height: 66px; width: auto; filter: grayscale(1); opacity: 0.72; transition: filter 0.3s, opacity 0.3s; }
.logo-karte:hover img { filter: none; opacity: 1; }
.logo-karte.hoch img { max-height: 84px; }
@keyframes laufen { to { transform: translateX(calc(-50% - 9px)); } }

/* ---------------------------------------------------------------- Person */
.person-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.person-raster .titel-gross { margin: 22px 0 28px; }
.person-raster p { max-width: 52ch; }
.fakten { list-style: none; padding: 0; margin: 36px 0 34px; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.fakten li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linie); font-weight: 700; color: var(--tinte); }
.fakten li span { font-family: var(--mono); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grau); padding-top: 3px; }
.portraet {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-buehne);
  border: 1.5px dashed rgba(0, 113, 188, 0.45);
  background: linear-gradient(145deg, rgba(0, 113, 188, 0.06), rgba(47, 147, 214, 0.02));
  display: grid; place-items: center; text-align: center;
}
.portraet::before, .portraet::after { content: ''; position: absolute; background: rgba(0, 113, 188, 0.22); }
.portraet::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.portraet::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.portraet .vermerk { position: relative; z-index: 1; background: var(--papier); padding: 8px 12px; border-radius: 8px; flex-direction: column; gap: 4px; }
.portraet .vermerk::before { display: none; }
.portraet .mass { position: absolute; font-family: var(--mono); font-size: 0.66rem; color: var(--blau); }
.portraet .mass.oben { top: -22px; left: 0; right: 0; text-align: center; }
.portraet .mass.seite { right: -34px; top: 50%; transform: rotate(90deg); }

/* ---------------------------------------------------------------- System (feste Bühne mit Kreisen) */
.system { position: relative; height: 340vh; }
.system-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.system-titel { position: absolute; top: clamp(96px, 13vh, 140px); left: 0; right: 0; }
.ringe { position: absolute; width: min(92vh, 92vw); aspect-ratio: 1; left: 50%; top: 54%; transform: translate(-50%, -50%) rotate(var(--dreh, 0deg)); }
.ringe circle { fill: none; stroke: rgba(13, 45, 68, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ringe circle.gestrichelt { stroke-dasharray: 3 7; stroke: rgba(0, 113, 188, 0.4); }
.ringe .marke { fill: var(--blau); }
.mitte {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: min(34vh, 300px); aspect-ratio: 1; border-radius: 50%;
  background: var(--papier-hell); border: 1px solid var(--linie);
  box-shadow: 0 30px 70px -40px rgba(7, 28, 43, 0.4);
  display: grid; place-items: center; text-align: center; padding: 34px;
}
.mitte p {
  grid-area: 1 / 1; margin: 0; font-weight: 900; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.2;
  color: var(--tinte); letter-spacing: -0.02em;
  opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s var(--kurve);
}
.mitte p.an { opacity: 1; transform: none; }
.buendel {
  position: absolute; width: min(330px, 26vw);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px -36px rgba(7, 28, 43, 0.45);
  opacity: 0; transform: translate(var(--vonx, 0), var(--vony, 0)) scale(0.9);
  transition: opacity 0.7s var(--kurve), transform 0.9s var(--kurve);
}
.buendel.an { opacity: 1; transform: none; }
.buendel h3 { font-size: 1.35rem; margin: 10px 0 12px; }
.buendel ul { list-style: none; padding: 0; margin: 0 0 16px; font-size: 0.95rem; }
.buendel li { padding: 5px 0 5px 18px; position: relative; }
.buendel li::before { content: ''; position: absolute; left: 0; top: 0.85em; width: 8px; height: 1.5px; background: var(--blau); }
.buendel a { font-size: 0.92rem; }
.buendel .vermerk { font-size: 0.68rem; }
.buendel.b1 { left: 7%; top: 26%; --vonx: 120px; --vony: 60px; }
.buendel.b2 { right: 7%; top: 30%; --vonx: -120px; --vony: 60px; }
.buendel.b3 { left: 11%; bottom: 6%; --vonx: 120px; --vony: -60px; }
.buendel.b4 { right: 11%; bottom: 4%; --vonx: -120px; --vony: -60px; }
.system-fortschritt { position: absolute; left: var(--rand); bottom: 30px; font-family: var(--mono); font-size: 0.72rem; color: var(--grau); display: flex; gap: 8px; align-items: center; }
.system-fortschritt i { display: block; width: 120px; height: 2px; background: var(--linie); position: relative; overflow: hidden; }
.system-fortschritt i::after { content: ''; position: absolute; inset: 0; background: var(--blau); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------------------------------------------------------------- Echte Projekte */
.projekte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: clamp(40px, 6vw, 80px); }
.riesig { font-size: clamp(4rem, 13vw, 12.5rem); line-height: 0.86; letter-spacing: -0.06em; }
.riesig .buchstabe { display: inline-block; }
.js .riesig .buchstabe { opacity: 0; transform: translateY(0.5em) rotate(6deg); transition: opacity 0.6s, transform 0.9s var(--kurve); transition-delay: calc(var(--n) * 0.035s); }
.js .riesig.da .buchstabe { opacity: 1; transform: none; }
.siegel-spalte { display: grid; justify-items: end; gap: 22px; max-width: 330px; text-align: right; }
.siegel-spalte p { margin: 0; color: var(--text); font-size: 0.98rem; }
.riesig.mittel { font-size: clamp(3rem, 8.4vw, 7.6rem); }
.siegel { position: relative; width: 156px; height: 156px; flex: none; }
.siegel-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 30s linear infinite; }
.siegel text { font-family: var(--mono); font-size: 10.5px; font-weight: 700; fill: var(--navy); text-transform: uppercase; }
/* In der Mitte die 3D-Bildmarke aus logo3d.js, ohne die Kugeln der Bereiche. Das flache SVG steht nur da,
   bis three.js geladen ist, und bleibt ohne WebGL stehen. */
.siegel-logo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; cursor: grab; }
.siegel-logo.wird-gezogen { cursor: grabbing; }
.siegel-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s; }
.siegel-logo.laeuft canvas { opacity: 1; }
.siegel-ersatz { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; transform: translate(-50%, -50%); transition: opacity 0.6s; }
.siegel-logo.laeuft .siegel-ersatz { opacity: 0; }
@keyframes drehen { to { transform: rotate(360deg); } }
.projekt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.projekt { text-decoration: none; color: inherit; display: block; }
.projekt-bild {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11;
  background: var(--navy); border: 1px solid var(--linie);
}
.projekt-bild .leiste { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #E9EEF3; display: flex; gap: 6px; align-items: center; padding: 0 12px; z-index: 1; }
.projekt-bild .leiste i { width: 9px; height: 9px; border-radius: 50%; background: #C7D3DE; }
.projekt-bild .leiste b { margin-left: 12px; font: 400 0.68rem var(--mono); color: var(--grau); }
.projekt-bild img.lang { position: absolute; top: 30px; left: 0; width: 100%; height: auto; transition: transform 5s ease-in-out; }
.projekt:hover .projekt-bild img.lang { transform: translateY(calc(-100% + 420px)); }
.projekt-bild img.foto { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kurve); }
.projekt:hover .projekt-bild img.foto { transform: scale(1.04); }
.projekt-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 2px 14px; border-bottom: 1px solid var(--linie); }
.projekt-fuss strong { font-size: 1.15rem; color: var(--tinte); }
.projekt-fuss span { font-family: var(--mono); font-size: 0.72rem; color: var(--grau); text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }

/* ---------------------------------------------------------------- Selbst gebaut (feste Liste) */
.selbst { position: relative; height: 240vh; }
/* nach der festen Bühne reicht ein kleiner Abstand, die Bühne lässt unten schon Luft (Tim, 27.10.2026: zu viel Platz) */
.selbst + .abschnitt { padding-top: clamp(40px, 5vw, 80px); }
.selbst-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.selbst-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); align-items: center; width: 100%; }
.selbst-bilder { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--radius-buehne); overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); }
.selbst-bilder figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 0.6s, transform 1s var(--kurve); }
.selbst-bilder figure.an { opacity: 1; transform: none; }
.selbst-bilder img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.selbst-bilder figure.logo-flaeche { display: grid; place-items: center; background: var(--papier-hell); }
.selbst-bilder figure.logo-flaeche img { width: 58%; height: auto; object-fit: contain; }
.selbst-liste h2 { margin: 18px 0 34px; }
.selbst-liste ol { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.selbst-liste li {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 22px 26px; border-radius: 16px; margin-bottom: 4px;
  font-weight: 800; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--tinte);
  transition: background 0.4s, color 0.4s, transform 0.5s var(--kurve), box-shadow 0.4s;
}
.selbst-liste li span { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grau); }
.selbst-liste li.an { background: var(--navy); color: var(--weiss); transform: translateX(-8px); box-shadow: 0 24px 50px -30px rgba(7, 28, 43, 0.7); }
.selbst-liste li.an span { color: var(--hell); }
.selbst-liste li.partner.an { background: var(--weiss); color: var(--tinte); border: 1px solid var(--blau); }
.selbst-liste li.partner.an span { color: var(--blau); }
.selbst-liste .hinweis { margin-top: 22px; font-size: 0.95rem; color: var(--grau); max-width: 48ch; }

/* ---------------------------------------------------------------- Große Zeilen */
.zeilen { padding: clamp(60px, 9vw, 130px) 0; overflow: hidden; }
.zeilen p {
  margin: 0; white-space: nowrap; font-weight: 900; letter-spacing: -0.045em; line-height: 1.04;
  font-size: clamp(2.6rem, 8.4vw, 8.2rem); color: var(--tinte);
  transform: translateX(var(--schub, 0px)); will-change: transform;
}
.zeilen p.umriss { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.zeilen p.blau { color: var(--blau); }

/* ---------------------------------------------------------------- Fallstudien */
.fall-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.fall {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-buehne);
  overflow: hidden; display: flex; flex-direction: column;
}
.fall-bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.fall-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fall-text { padding: 28px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.fall h3 { font-size: 1.2rem; }
.fall .ort { font-size: 0.9rem; color: var(--grau); margin: 2px 0 22px; }
.kennzahl { font-size: clamp(3rem, 5vw, 4.3rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.05em; color: var(--blau); font-variant-numeric: tabular-nums; }
.kennzahl small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 4px; }
.kennzahl-text { margin: 8px 0 20px; font-weight: 700; color: var(--tinte); }
.fall ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 0.95rem; }
.fall li { padding: 8px 0 8px 22px; border-top: 1px solid var(--linie); position: relative; }
.fall li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 5px; border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(-45deg); }
.fall .gebaut { font-size: 0.92rem; margin: 0 0 18px; }
.fall .quelle { margin-top: auto; font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; color: var(--grau); padding-top: 14px; border-top: 1px dashed var(--linie); }
.fall .quelle a { color: var(--blau); }

/* ---------------------------------------------------------------- Vorher Nachher */
.vergleich-reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.vergleich-reiter button {
  font: 700 0.95rem var(--schrift); color: var(--navy); cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss);
}
.vergleich-reiter button[aria-selected="true"] { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.vergleich-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.regler {
  position: relative; border-radius: var(--radius-buehne); overflow: hidden; aspect-ratio: var(--seite, 16 / 9);
  background: var(--navy); user-select: none; touch-action: pan-y; cursor: ew-resize; border: 1px solid var(--linie);
}
.regler img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
.regler .nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }
.regler .griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--weiss); transform: translateX(-1px); }
.regler .griff::after {
  content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--weiss); color: var(--navy);
  display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.regler .schild { position: absolute; top: 16px; font: 400 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 11px; border-radius: 999px; }
.regler .schild.links { left: 16px; background: rgba(255, 255, 255, 0.9); color: var(--navy); }
.regler .schild.rechts { right: 16px; background: var(--blau); color: var(--weiss); }
.regler input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.vergleich-text h3 { font-size: 1.5rem; margin: 12px 0 12px; }

/* ---------------------------------------------------------------- Fragen */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.fragen-kasten { background: var(--navy); color: rgba(255, 255, 255, 0.85); border-radius: var(--radius-buehne); padding: 30px; margin-top: 34px; }
.fragen-kasten strong { display: block; color: var(--weiss); font-size: 1.2rem; margin-bottom: 8px; }
.fragen-kasten .knopf { margin-top: 18px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 24px 0; font-weight: 800; font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: var(--tinte);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linie);
  background: linear-gradient(var(--blau), var(--blau)) center / 12px 2px no-repeat, linear-gradient(var(--blau), var(--blau)) center / 2px 12px no-repeat;
  transition: transform 0.4s var(--kurve), background-color 0.3s;
}
.frage[open] summary::after { transform: rotate(45deg); background-color: rgba(0, 113, 188, 0.08); }
.frage p { margin: 0 0 24px; max-width: 64ch; }

/* ---------------------------------------------------------------- Abschluss und Fuß */
.abschluss {
  margin: 0 12px; border-radius: var(--radius-buehne); overflow: hidden; position: relative; isolation: isolate;
  color: var(--weiss); text-align: center; padding: clamp(100px, 15vw, 200px) var(--rand);
  background:
    radial-gradient(ellipse 50% 70% at var(--lichtx, 50%) 110%, rgba(0, 113, 188, 0.85), transparent 70%),
    linear-gradient(180deg, var(--navy-tief), var(--navy));
}
.abschluss::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 40% 50% at 50% 0%, rgba(47, 147, 214, 0.18), transparent 70%);
}
.abschluss h2 { color: var(--weiss); font-size: clamp(2.2rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 17ch; margin: 22px auto 40px; }
.abschluss .vermerk { color: var(--hell); }
.fuss { padding: clamp(70px, 9vw, 120px) 0 40px; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); }
.fuss h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 18px 0 18px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formular label { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; color: var(--navy); }
.formular .breit { grid-column: 1 / -1; }
.formular input, .formular textarea, .formular select {
  font: 500 1rem var(--schrift); color: var(--tinte);
  padding: 15px 16px; border-radius: 12px; border: 1px solid var(--linie); background: var(--weiss);
}
.formular textarea { min-height: 130px; resize: vertical; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px rgba(0, 113, 188, 0.14); }
.formular .klein { font-size: 0.82rem; color: var(--grau); font-weight: 400; }
.fuss-unten { margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; color: var(--grau); }
.fuss-unten nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss-unten a { text-decoration: none; }
.fuss-unten a:hover { color: var(--blau); }
.kontaktwege { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.kontaktwege li { display: grid; grid-template-columns: 110px 1fr; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.kontaktwege span { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--grau); padding-top: 3px; }
.kontaktwege a { font-weight: 800; color: var(--tinte); text-decoration: none; }

.entwurf-schild {
  position: fixed; z-index: 60; left: 16px; bottom: 16px;
  font: 400 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em;
  background: #FFF4D6; color: #6B4E00; border: 1px solid #E8C766; padding: 8px 12px; border-radius: 999px;
}

/* ---------------------------------------------------------------- Tablet */
@media (max-width: 1080px) {
  .kopfzeile nav { display: none; }
  .menueknopf {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--linie); background: var(--weiss); cursor: pointer; padding: 0;
  }
  .menueknopf span, .menueknopf span::before, .menueknopf span::after { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
  .menueknopf span::before, .menueknopf span::after { content: ''; position: absolute; left: 0; }
  .menueknopf span::before { top: -6px; } .menueknopf span::after { top: 6px; }
  .kopfzeile.offen nav {
    display: flex; flex-direction: column; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: 12px;
    box-shadow: 0 30px 60px -30px rgba(7, 28, 43, 0.5);
  }
  .kopfzeile.offen nav a { padding: 15px 16px; font-size: 1.05rem; }
  .kopf-werkzeug { display: flex; gap: 8px; align-items: center; }
  .faecher { width: 52vw; right: -4%; top: 16%; opacity: 0.9; }
  .buendel { width: min(300px, 40vw); padding: 20px; }
  .buendel.b1 { left: 3%; } .buendel.b2 { right: 3%; } .buendel.b3 { left: 4%; } .buendel.b4 { right: 4%; }
  .fall-raster { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

/* ---------------------------------------------------------------- Handy */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .kopfzeile { top: 12px; padding: 7px 7px 7px 14px; }
  /* Kopf am Handy ohne Leiste (Tim, 27.10.2026: „transparent, zumindest leicht“): die Fläche ist durchsichtig, es
     schweben nur Logo und Menüknopf als zwei helle Kreise. Ein Glasbalken wurde auf den dunklen Köpfen grau und das
     Logo blass, die Kreise bleiben auf jedem Grund lesbar. */
  .kopfzeile { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .kopfzeile .logo {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    background: rgba(250, 252, 253, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -12px rgba(7, 28, 43, 0.55);
  }
  .kopfzeile .menueknopf { width: 50px; height: 50px; border-color: transparent; background: rgba(250, 252, 253, 0.92); box-shadow: 0 8px 24px -12px rgba(7, 28, 43, 0.55); }
  .kopfzeile .logo img { height: 34px; }
  .kopfzeile > .knopf, .kopf-werkzeug > .knopf { display: none; }
  .kopf { min-height: calc(100svh - 24px); align-items: stretch; flex-direction: column; justify-content: flex-end; }
  .faecher { position: relative; right: auto; top: auto; width: 86%; margin: 92px auto 28px; aspect-ratio: 1.3; }
  .blatt figcaption { display: none; }
  .masslinie { display: none; }
  .kopf h1 { font-size: clamp(2.5rem, 12.6vw, 4.4rem); margin: 14px 0 18px; }
  .kopf .vermerk { font-size: 0.66rem; }
  .kopf-unten { gap: 18px; }
  .schnellwege { width: 100%; }
  .abschnitt-kopf, .person-raster, .selbst-raster, .vergleich-raster, .fragen-raster, .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .person-raster .portraet { max-width: 340px; }
  .portraet .mass.seite { display: none; }
  .fakten li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .logo-karte { width: 190px; height: 104px; padding: 20px 26px; }

  /* Kreisbühne wird zur Liste */
  .system { height: auto; }
  .system-buehne { position: static; height: auto; display: block; padding: 90px 0 40px; overflow: visible; }
  .system-titel { position: static; margin-bottom: 30px; }
  .ringe, .mitte, .system-fortschritt { display: none; }
  .buendel, .buendel.b1, .buendel.b2, .buendel.b3, .buendel.b4 {
    position: static; width: auto; margin: 0 var(--rand) 14px; opacity: 1; transform: none;
  }
  /* nacheinander einblenden, abwechselnd von links und rechts, wie die Karten auf der Kreisbühne */
  .js .buendel { opacity: 0; transform: translateX(var(--vonx-handy, -36px)) scale(0.96); }
  .js .buendel.b2, .js .buendel.b4 { --vonx-handy: 36px; }
  .js .buendel.an { opacity: 1; transform: none; }
  .projekte-kopf { flex-direction: column; align-items: flex-start; }
  .siegel-spalte { justify-items: start; text-align: left; }
  .siegel { width: 124px; height: 124px; }
  .siegel-logo { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .projekt-raster { grid-template-columns: minmax(0, 1fr); }
  .projekt:hover .projekt-bild img.lang { transform: none; }

  .selbst { height: auto; }
  .selbst-buehne { position: static; height: auto; display: block; padding: 20px 0; }
  .selbst-bilder { display: none; }
  .selbst-liste li { padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .selbst-liste li.an { transform: none; }

  /* Große Zeilen am Handy: umbrechen statt abschneiden (Tim, 27.10.2026), Rand wie der übrige Text */
  .zeilen { padding: 56px 0; }
  .zeilen p { font-size: clamp(2rem, 9.6vw, 2.8rem); white-space: normal; text-wrap: balance; line-height: 1.02; padding: 0 var(--rand); margin-bottom: 16px; }
  .zeilen p:last-child { margin-bottom: 0; }
  /* Umrissschrift zeichnet bei dieser Größe die Überlappungen im Buchstaben nach, deshalb gefüllt in Graublau (Kontrast 3,7 : 1, reicht für große Schrift) */
  .zeilen p.umriss { -webkit-text-stroke: 0; color: #6E8396; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .kontaktwege li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .entwurf-schild { left: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .laufband-spur { animation: none; flex-wrap: wrap; width: auto; }
  .siegel-ring { animation: none; }
  .zeilen p { transform: none !important; }
}