@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#090f17;--gold:#d4aa68;--white:#f5f2eb;--muted:#a5aeba}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',Arial,sans-serif}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}

/* ---------- Kopfleiste ---------- */
.top{height:88px;background:#080d14eF;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,calc(var(--lf-layout-unit, 1vw) * 5),92px);gap:24px;position:relative;z-index:20;border-bottom:1px solid #ffffff12}
.brand{display:flex;align-items:center;gap:12px}
.brand img{max-width:175px;max-height:60px;object-fit:contain}
.wordmark{font-size:23px;font-weight:800;letter-spacing:.1em;line-height:1}
.wordmark>span{color:var(--gold)}
.wordmark small{display:block;font-size:8px;letter-spacing:.37em;color:#a9b2be;margin-top:7px}
.top nav{display:flex;gap:36px}
.top nav a,.top-action{font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.top nav a{color:#c0c8d0}
.top nav a:hover,.top-action:hover{color:var(--gold)}
.top-action{border:1px solid #b18c5777;padding:15px 19px}
.top-action span{margin-left:18px;color:var(--gold)}

/* ---------- Campus-Header (finales Video) ---------- */
.campus-hero{position:relative;background:#04080e;border-bottom:1px solid #ffffff0f}
/* Bühne hat exakt das Seitenverhältnis des Videos (1740:700) – dadurch sitzen die
   Klickflächen in Prozent immer pixelgenau über den Gebäuden und nichts wird beschnitten. */
.campus-stage{position:relative;width:100%;aspect-ratio:1740/700;overflow:hidden;background:#04080e}
.campus-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;border:0;pointer-events:none}
.campus-hud{position:absolute;z-index:2;top:22px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10px;letter-spacing:.2em;font-weight:800;color:#f0eee9;text-shadow:0 2px 10px #000a;pointer-events:none}
.campus-status{white-space:nowrap}
.campus-hint{margin:0;padding:14px clamp(22px,calc(var(--lf-layout-unit, 1vw) * 5),92px);font-size:10px;letter-spacing:.2em;color:#c9d1da;background:#0a121b;border-top:1px solid #ffffff0f}

/* Fünf transparentere Klickflächen; sichtbar wird nur der Tastaturfokus. */
.hotspots{position:absolute;inset:0;z-index:3}
.hotspot{position:absolute;display:block;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
.hotspot:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;box-shadow:0 0 0 7px #d4aa6840}
.hotspot:focus:not(:focus-visible){outline:none}

/* Gebäudekoordinaten im Verhältnis 1740 x 700 */
.h1{left:1.2%;top:50%;width:16.6%;height:38%}   /* Software & Apps */
.h2{left:19.6%;top:54%;width:13.1%;height:34%}  /* Webseiten & Shops */
.h3{left:59.8%;top:58%;width:9.0%;height:30%}   /* Marketingtools */
.h4{left:70.2%;top:64%;width:14.8%;height:24%}  /* KI & Automatisierung */
.h5{left:86.0%;top:52%;width:13.6%;height:36%}  /* Weitere Projekte */

/* ---------- Abschnitte ---------- */
.kicker{font-size:11px;letter-spacing:.26em;color:var(--gold);font-weight:800}
.kicker i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#d5a45c;box-shadow:0 0 13px #d5a45c;margin-right:10px}
h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;line-height:.89;letter-spacing:.012em;font-weight:800;margin:22px 0}
h1{font-size:clamp(76px,calc(var(--lf-layout-unit, 1vw) * 10),150px)}
h2{font-size:clamp(57px,calc(var(--lf-layout-unit, 1vw) * 7),105px)}
h3{font-size:clamp(42px,calc(var(--lf-layout-unit, 1vw) * 5),70px)}
h1 em,h2 em{font-style:normal;color:var(--gold)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:20px 25px;margin-top:22px;font-size:11px;letter-spacing:.16em;font-weight:800;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-3px)}
.button.gold{background:var(--gold);color:#0a111b}
.button.outline{border:1px solid #b68c56;color:var(--gold)}

.footer-legal{display:flex;flex-wrap:wrap;gap:8px 26px}
.footer-legal a{color:#c6cfd8;transition:color .2s}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--gold)}
.footer-legal a[aria-current="page"]{color:var(--gold)}
.footer-copy{color:#98a3af}
footer{padding:30px clamp(24px,calc(var(--lf-layout-unit, 1vw) * 8),135px);display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.17em;color:#98a3af}

@media(max-width:760px){
  .top{height:auto;min-height:0;flex-wrap:wrap;gap:7px 10px;padding:8px 14px 0}
  .brand{min-width:0;gap:8px}
  .brand img{max-width:46px;max-height:32px}
  .wordmark{font-size:13px}
  .wordmark small{font-size:6.5px;letter-spacing:.28em;margin-top:4px}
  .top-action{padding:8px 9px;font-size:9px;letter-spacing:.11em;white-space:nowrap}
  .top-action span{margin-left:7px}
  /* Kompakte mobile Navigation: eigene Zeile im Kopfbereich, kein Overlay über dem
     Campus-Header. Bei sehr schmalen Geräten bricht sie auf zwei Zeilen um. */
  .top nav{display:flex;order:3;flex:1 0 100%;flex-wrap:wrap;gap:0 16px;margin:0;padding:1px 0 3px;border-top:1px solid #ffffff12}
  .top nav a{font-size:9px;letter-spacing:.1em;padding:10px 0;color:#bcc5cf}
  /* Gebäude sind auf kleinen Displays nur wenige Pixel hoch – die Klickflächen
     reichen deshalb bis knapp über den Boden, ohne einander zu überdecken. */
  .h1{top:42%;height:48%}
  .h2{top:46%;height:44%}
  .h3{top:50%;height:40%}
  .h4{top:56%;height:34%}
  .h5{top:44%;height:46%}
  /* Auf kleinen Displays liegt die HUD-Zeile direkt über dem LOGICFABRIK-Schriftzug
     im Video – sie wird dort ausgeblendet, statt die Beschriftung zu überdecken. */
  .campus-hud{display:none}
  .campus-hint{font-size:8px;padding:10px 20px;letter-spacing:.14em}
  footer{flex-wrap:wrap}
}

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

/* Die Goldkante ist bereits Teil des Films. Kein Zuschnitt oder zusätzliche Kante.
   Nur der unterste Campus-Rand blendet in den dunklen Anschluss aus. */
.campus-stage::after{content:"";position:absolute;inset:auto 0 0;height:14px;background:linear-gradient(transparent,#04080e);pointer-events:none;z-index:2}
.waterfall-stage{position:relative;width:100%;aspect-ratio:1672/890;background:#04080e}
.waterfall-video{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Polygonflächen folgen den perspektivischen Rahmen; auch mobil unverändert. */
.waterfall-link{position:absolute;display:block;background:transparent;-webkit-tap-highlight-color:transparent}
.waterfall-link:focus-visible{background:#d4aa6830;outline:3px solid var(--gold);outline-offset:-5px}
.w1{left:.36%;top:57.08%;width:20.81%;height:36.63%;clip-path:polygon(24% 0,100% 0,89% 100%,0 100%)}
.w2{left:20.45%;top:57.08%;width:19.44%;height:36.63%;clip-path:polygon(18% 0,100% 0,96% 100%,0 100%)}
.w3{left:41.03%;top:57.08%;width:18.48%;height:36.63%;clip-path:polygon(8% 0,93% 0,100% 100%,0 100%)}
.w4{left:60.47%;top:57.08%;width:19.44%;height:36.63%;clip-path:polygon(0 0,85% 0,100% 100%,5% 100%)}
.w5{left:79.31%;top:57.08%;width:20.39%;height:36.63%;clip-path:polygon(0 0,81% 0,100% 100%,11% 100%)}

/* Only the central stream loops independently; all side and button motion is original. */
.waterfall-core{position:absolute;left:30.46875%;top:0;width:39.84375%;height:45.833333%;object-fit:fill;pointer-events:none;mask-image:url('/assets/data-core-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('/assets/data-core-mask.svg');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}

/* Sharpen only existing campus lettering; the video and its timing stay intact. */
.campus-video{filter:url(#campus-label-sharp)}