/* Projekt 73 // Portfolio-Erweiterungen zum Neon District System */
.logo-num{color:var(--nd-red)}
.hero-p73{min-height:calc(100vh - 95px)}
.hero-p73 .hero-grid{min-height:calc(100vh - 95px);align-items:center}
.hero-video{position:relative;border:1px solid #2a2c30;background:#0d0e10;aspect-ratio:1920/804}
.hero-video video{width:100%;height:100%;object-fit:cover}
.hero-meta{display:grid;grid-template-columns:repeat(3,auto);gap:28px;margin-top:44px;padding-top:24px;border-top:1px solid #2f3136;justify-content:start}
.hero-meta b{display:block;font-family:var(--nd-display);font-weight:900;font-size:40px;line-height:1;color:var(--nd-white)}
.hero-meta span{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8d8d92}

/* Index-Navigation */
.toc{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--nd-ink)}
.toc a{display:flex;gap:14px;align-items:baseline;padding:18px 16px 18px 0;border-bottom:1px solid var(--nd-line);text-decoration:none;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.toc a b{color:var(--nd-red);font-weight:800}
.toc a:hover{color:var(--nd-red)}

/* Fokus-Matrix (D3LTA) */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.matrix .card{background:#1d2024;color:var(--nd-white)}
.matrix .card h3{color:var(--nd-white)}
.matrix .card p{color:#b9b9bd}
.matrix .card .proof{list-style:none;border-top:1px solid #2f3136;padding-top:14px;margin-top:auto;display:flex;flex-direction:column;gap:6px}
.matrix .card .proof li{font-size:12px;font-weight:600;color:#e7e7e9}
.matrix .card .proof li::before{content:"→ ";color:var(--nd-red);font-weight:800}
.matrix .card.muted{border-top-color:#3a3c41;background:#17191c}
.matrix .card.muted .num{color:#8d8d92}

/* Projekt-Kapitel */
.project{padding:98px 0;border-top:1px solid var(--nd-line)}
.project:nth-of-type(even){background:var(--nd-white)}
.project-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.project-grid.flip > :first-child{order:2}
.project h2{font-size:clamp(40px,4.6vw,68px);margin-bottom:24px}
.project .prose{margin-bottom:28px}
.project .tags{margin-bottom:28px}
.facts{list-style:none;border-top:2px solid var(--nd-ink);margin-bottom:28px}
.facts li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--nd-line);font-size:14px}
.facts li span:first-child{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--nd-red);padding-top:2px}
.facts li span:last-child{color:#3c3e42}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.shots .wide{grid-column:1 / -1}
.shot{position:relative;display:block;padding:0;border:1px solid var(--nd-line);background:#0d0e10;cursor:zoom-in;overflow:hidden}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s}
.shot.wide img{aspect-ratio:16/8}
.shot.contain img{object-fit:contain;background:#f4f2ed}
.shot.tall img{aspect-ratio:4/5;object-position:top}
.shot:hover img{transform:scale(1.03)}
.shot span{position:absolute;left:0;bottom:0;background:var(--nd-ink);color:var(--nd-white);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:6px 9px}
.shot video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.honest{border-left:5px solid var(--nd-ink);background:var(--nd-paper);padding:16px 18px;font-size:13px;color:#535559;margin-bottom:28px}
.project:nth-of-type(odd) .honest{background:var(--nd-white)}
.honest b{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--nd-ink);margin-bottom:4px}
.placeholder{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;aspect-ratio:16/10;border:1.5px dashed #9b9a96;padding:32px;background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(21,23,26,.04) 14px 28px)}
.placeholder b{font-family:var(--nd-display);font-weight:900;font-size:34px;text-transform:uppercase;line-height:.95}
.placeholder span{font-size:13px;color:var(--nd-muted);max-width:40ch}

/* Vergleichstafel */
.versus{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.versus figure{margin:0;background:var(--nd-white);border:1px solid var(--nd-line)}
.versus figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.versus .tbd{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,#ecebe6 0 12px,#f4f2ed 12px 24px);font-family:var(--nd-display);font-weight:900;font-size:28px;text-transform:uppercase;color:#9b9a96}
.versus img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* 3D-Galerie */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.model{background:#1d2024;border:1px solid #2f3136;display:flex;flex-direction:column}
.model model-viewer{width:100%;height:340px;background:radial-gradient(circle at 50% 40%,#2c2f35,#121316);--poster-color:transparent}
.model .media-body{border-top:1px solid #2f3136}
.model h4{color:var(--nd-white)}
.model p{color:#b9b9bd;font-size:13px}
.model .load{position:absolute;inset:auto 0 18px 0;margin:auto;width:max-content}
.mv-hint{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#8d8d92;margin-top:18px}

/* Bildgalerie */
.gallery{columns:3 320px;column-gap:12px}
.gallery .shot{margin:0 0 12px;break-inside:avoid;width:100%}
.gallery .shot img{aspect-ratio:auto;height:auto}

/* Laufbahn */
.timeline{list-style:none;border-top:2px solid var(--nd-ink)}
.timeline li{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--nd-line)}
.timeline .y{font-family:var(--nd-display);font-weight:900;font-size:30px;line-height:1;color:var(--nd-red)}
.timeline h4{margin-bottom:6px}
.timeline p{color:var(--nd-muted);font-size:15px}

/* Artikel */
.article{max-width:760px}
.article h2{font-size:clamp(32px,3.4vw,48px);margin:64px 0 20px;padding-top:24px;border-top:2px solid var(--nd-ink)}
.article p{color:#3c3e42;font-size:17px;line-height:1.8;margin-bottom:20px}
.article ul{margin:0 0 24px 0;list-style:none;border-top:1px solid var(--nd-line)}
.article ul li{padding:12px 0 12px 28px;border-bottom:1px solid var(--nd-line);position:relative;color:#3c3e42}
.article ul li::before{content:"→";position:absolute;left:0;color:var(--nd-red);font-weight:800}
.article .lead{font-size:20px;color:var(--nd-ink);margin-bottom:28px}

@media (max-width:1100px){
  .matrix,.models{grid-template-columns:repeat(2,1fr)}
  .toc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .project-grid,.project-grid.flip{grid-template-columns:1fr;gap:36px}
  .project-grid.flip > :first-child{order:0}
  .project{padding:65px 0}
  .hero-p73,.hero-p73 .hero-grid{min-height:0}
  .versus{grid-template-columns:1fr}
}
@media (max-width:560px){
  .matrix,.models,.toc,.shots{grid-template-columns:1fr}
  .facts li,.timeline li{grid-template-columns:1fr;gap:4px}
  .hero-meta{grid-template-columns:repeat(3,1fr);gap:14px}
  .hero-meta b{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}.shot:hover img{transform:none}}

/* Dunkles Projektkapitel */
.project.project-dark{background:var(--nd-ink);border-top-color:#2f3136}
.project-dark .facts{border-top-color:var(--nd-white)}
.project-dark .facts li{border-color:#2f3136}
.project-dark .facts li span:last-child{color:#d8d8db}
.project.project-dark .honest{background:#1d2024;color:#c9c9cc;border-left-color:var(--nd-red)}
.project.project-dark .honest b{color:var(--nd-white)}
.project-dark .placeholder{border-color:#3a3c41;background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.03) 14px 28px)}
.project-dark .placeholder b{color:var(--nd-white)}
.project-dark .placeholder span{color:#b9b9bd}
.project-dark .shot{border-color:#2f3136}

/* Pipeline-Schaubild */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;position:relative;margin-bottom:28px}
.stage{background:#1d2024;border-top:5px solid var(--nd-red);padding:22px 18px 18px;position:relative;display:flex;flex-direction:column;gap:10px}
.stage:not(:last-child)::after{content:"→";position:absolute;right:-24px;top:22px;width:20px;height:20px;background:var(--nd-red);color:var(--nd-white);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:2}
.stage .num{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--nd-red)}
.stage h4{color:var(--nd-white);font-size:24px;margin-bottom:4px}
.node{border:1px solid #34373d;padding:10px 12px;background:#15171a}
.node b{display:block;font-size:13px;font-weight:700;color:var(--nd-white);line-height:1.35}
.node small{display:block;font-size:11px;color:#9a9aa0;line-height:1.45;margin-top:3px}
.node.gate{border-color:var(--nd-cyan);background:rgba(85,210,220,.07)}
.node.gate b{color:var(--nd-cyan)}
.node.gate b::before{content:"◆ "}
.node.out{border-color:var(--nd-red)}
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-bottom:12px}
.loop span{grid-column:2 / 4;border:2px dashed #4a4d54;border-top:0;height:26px;position:relative}
.loop span::after{content:"Abweichung gefunden → zurück in den Bau";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);background:var(--nd-ink);padding:0 10px;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#b9b9bd;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9a9aa0}
.legend i{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:8px;border:1px solid #34373d;background:#15171a}
.legend i.g{border-color:var(--nd-cyan);background:rgba(85,210,220,.15)}
.legend i.o{border-color:var(--nd-red)}

/* Kleine Pipelines */
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.mini .card{background:#1d2024}
.mini h3{color:var(--nd-white)}
.chain{list-style:none;display:flex;flex-direction:column;gap:0;counter-reset:c}
.chain li{position:relative;padding:9px 0 9px 34px;border-left:2px solid #34373d;margin-left:9px;font-size:14px;color:#d8d8db}
.chain li::before{counter-increment:c;content:counter(c);position:absolute;left:-11px;top:8px;width:20px;height:20px;background:var(--nd-red);color:var(--nd-white);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.chain li small{display:block;color:#9a9aa0;font-size:12px}
.mini .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.mini .pair .shot img{aspect-ratio:16/10}

/* Werkzeugkiste */
.toolbox{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px;margin-top:64px}
.toolbox h4{color:var(--nd-white);padding-top:14px;border-top:1px solid #34373d;margin-bottom:12px;font-size:20px}
.rules{list-style:none;margin-top:64px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid #34373d}
.rules li{padding:22px 18px;border-right:1px solid #34373d;color:#d8d8db;font-size:14px}
.rules li:last-child{border-right:0}
.rules b{display:block;font-family:var(--nd-display);font-weight:900;text-transform:uppercase;font-size:24px;line-height:1;color:var(--nd-white);margin-bottom:8px}
.rules em{font-style:normal;color:var(--nd-red);font-size:11px;font-weight:800;letter-spacing:2px;display:block;margin-bottom:8px}

/* Neon District Gebäude */
.buildings{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px}
.bld{grid-column:span 2;background:#1d2024;border:1px solid #2f3136;display:flex;flex-direction:column}
.bld.big{grid-column:span 4;grid-row:span 2}
.bld .shot{border:0;border-bottom:1px solid #2f3136}
.bld.big .shot{flex:1;min-height:0}
.bld.big .shot img{height:100%;aspect-ratio:auto;min-height:320px}
.bld .media-body h4{color:var(--nd-white)}
.bld .media-body p{color:#b9b9bd;font-size:13px}
.bld-strip{display:grid;grid-template-columns:1fr 1fr 2fr;gap:16px;margin-top:16px}
.bld-strip .shot img{height:100%;aspect-ratio:auto;min-height:220px}

@media (max-width:1100px){
  .pipe,.loop{grid-template-columns:1fr 1fr;gap:20px}
  .loop{display:none}
  .stage:not(:last-child)::after{display:none}
  .mini,.toolbox{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr 1fr}
  .rules li{border-bottom:1px solid #34373d}
  .buildings{grid-template-columns:repeat(2,1fr)}
  .bld,.bld.big{grid-column:span 1;grid-row:auto}
  .bld.big{grid-column:1 / -1}
}
@media (max-width:560px){
  .pipe,.mini,.toolbox,.rules,.buildings,.bld-strip{grid-template-columns:1fr}
  .bld.big{grid-column:auto}
}
.block-dark .tag.tag-on{border-color:var(--nd-red);color:var(--nd-white);background:transparent}

/* Hero: lange Überschrift, Video bleibt groß */
.hero-p73 .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
.hero-p73 h1{font-size:clamp(52px,5.8vw,108px)}
.hero-p73 .hero-video{align-self:center}
.rules{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.hero-p73 .hero-grid{grid-template-columns:1fr}}
@media (max-width:1100px){.rules{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rules{grid-template-columns:1fr}}

/* Hero geteilt: Text links, Video randlos rechts */
.hero-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:calc(100vh - 95px)}
.hero-split::after{display:none}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:80px 56px 72px max(6vw,calc((100vw - 1360px) / 2 + 82px))}
.hero-split h1{font-size:clamp(52px,5.6vw,112px);margin-bottom:32px}
.hero-split .lead{color:#c9c9cc;max-width:46ch}
.hero-media{position:relative;margin:0;min-height:520px;background:#0b0c0e;overflow:hidden}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(10,11,13,.85),transparent);pointer-events:none}
.hero-media .sticker{top:22px;right:0;padding:9px 14px}
.hero-media figcaption{position:absolute;left:28px;bottom:24px;z-index:1;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#e7e7e9}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:56px 6% 48px}
  .hero-media{min-height:0;aspect-ratio:16/10}
}
/* Mehr Zeilenabstand, damit Umlaut-Punkte nicht in die Zeile darüber laufen */
.hero-split h1{line-height:.96;letter-spacing:-.5px}