/* ============================================================
   home.css — Startseite (Blueprint / Datasheet-Look)
   Wird NUR auf der Home-Route geladen. Alle Komponenten-Klassen
   sind mit "hb-" präfixt, damit es keine Kollision mit app.css
   gibt (Header/Footer/Karussell kommen weiter aus app.css).
   Farben auf das Website-Blau gemappt:
     Türkis #39e0d8 → #00b4d8 (--accent)
     Orange #ff7a18 → #0077b6 (--accent-dim)
   ============================================================ */

:root{
  --hb-bg:#070a0f;
  --hb-grid:#10161f;
  --hb-line:#1c2531;
  --hb-fg:#eef2f7;
  --hb-dim:#8893a3;
  --hb-faint:#566273;
  --hb-cyan:#00b4d8;
  --hb-amber:#0077b6;
  --hb-maxw:1280px;
}

body.hb{
  background:var(--hb-bg);
  color:var(--hb-fg);
  cursor:crosshair;
}

/* ── Hintergrund-Ebenen (fixed) — auf allen öffentlichen Seiten ── */
.hb #flow{position:fixed;inset:0;z-index:0;display:block}

.hb .hb-gridlayer{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(var(--hb-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--hb-grid) 1px,transparent 1px);
  background-size:54px 54px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 40%,transparent 100%)}

/* Eck-Registrierungsmarken — oben unter den festen Header gesetzt */
.hb .hb-reg{position:fixed;z-index:40;width:26px;height:26px;pointer-events:none;opacity:.6}
.hb .hb-reg::before,.hb .hb-reg::after{content:"";position:absolute;background:var(--hb-cyan)}
.hb .hb-reg::before{width:100%;height:1px;top:50%}
.hb .hb-reg::after{height:100%;width:1px;left:50%}
.hb .hb-reg.tl{top:84px;left:16px}.hb .hb-reg.tr{top:84px;right:16px}
.hb .hb-reg.bl{bottom:16px;left:16px}.hb .hb-reg.br{bottom:16px;right:16px}

/* Rotierte Seitenleiste */
.hb .hb-rail{position:fixed;left:18px;top:50%;z-index:40;
  transform:rotate(-90deg) translateX(-50%);transform-origin:left center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.32em;
  color:var(--hb-faint);text-transform:uppercase;pointer-events:none;white-space:nowrap}
@media(max-width:900px){.hb .hb-rail{display:none}}

/* ── Content-Wrapper ── */
.hb .hb-content{position:relative;z-index:10;
  font-family:'IBM Plex Mono',monospace;line-height:1.6;color:var(--hb-fg)}
.hb .hb-wrap{max-width:var(--hb-maxw);margin:0 auto;padding:0 56px}
@media(max-width:680px){.hb .hb-wrap{padding:0 24px}}

/* ── Hero ── */
.home .hb-hero{padding-top:128px;padding-bottom:130px;position:relative}
.home .hb-tag{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--hb-cyan);margin-bottom:40px}
.home .hb-dot{width:7px;height:7px;background:var(--hb-cyan);border-radius:50%;
  box-shadow:0 0 12px var(--hb-cyan);animation:hb-pulse 1.8s infinite}
@keyframes hb-pulse{50%{opacity:.3}}
.home .hb-display{font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(58px,13vw,184px);line-height:.86;letter-spacing:.005em;text-transform:uppercase}
.home .hb-display .hb-l2{color:var(--hb-amber);-webkit-text-stroke:0}
.home .hb-display .hb-out{color:transparent;-webkit-text-stroke:1.5px var(--hb-fg)}
.home .hb-herometa{display:flex;gap:60px;margin-top:56px;flex-wrap:wrap;max-width:760px}
.home .hb-herometa p{font-size:15px;color:var(--hb-dim);max-width:42ch;line-height:1.7}
.home .hb-coords{font-size:12px;color:var(--hb-faint);margin-top:30px;letter-spacing:.08em}

/* ── Figure-Blöcke ── */
.home .hb-fig{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--hb-line);position:relative}
.home .hb-fignum{font-family:'Anton',sans-serif;font-size:clamp(60px,9vw,130px);color:transparent;
  -webkit-text-stroke:1px var(--hb-line);line-height:.8;position:absolute;
  right:56px;top:60px;pointer-events:none;z-index:-1}
@media(max-width:900px){.home .hb-fignum{display:none}}
.home .hb-figlabel{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hb-cyan);
  display:flex;align-items:center;gap:14px;margin-bottom:26px}
.home .hb-figlabel::after{content:"";flex:1;max-width:120px;height:1px;background:var(--hb-line)}
.home .hb-fightitle{font-family:'Anton',sans-serif;font-size:clamp(30px,5vw,62px);line-height:.96;
  text-transform:uppercase;letter-spacing:.01em;max-width:16ch;margin-bottom:26px}
.home .hb-fightitle em{color:var(--hb-amber);font-style:normal}
.home .hb-figbody{font-size:16px;color:var(--hb-dim);max-width:54ch;line-height:1.75}

/* ── Datasheet-Readout-Zeilen ── */
.home .hb-readout{margin-top:48px;border:1px solid var(--hb-line);background:rgba(10,14,20,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.home .hb-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:baseline;
  padding:22px 26px;border-bottom:1px solid var(--hb-line);transition:background .2s}
.home .hb-row:last-child{border-bottom:none}
.home .hb-row:hover{background:rgba(0,180,216,.06)}
.home .hb-id{color:var(--hb-amber);font-size:13px}
.home .hb-nm{color:var(--hb-fg);font-size:17px}
.home .hb-nm small{display:block;color:var(--hb-faint);font-size:13px;margin-top:5px}
.home .hb-vl{color:var(--hb-cyan);font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media(max-width:680px){.home .hb-row{grid-template-columns:40px 1fr}.home .hb-vl{grid-column:2;margin-top:6px}}

/* ── Expertise-Zitat ── */
.home .hb-pquote{position:relative;isolation:isolate;overflow:hidden;
  font-family:'Anton',sans-serif;font-size:clamp(26px,4vw,52px);line-height:1.02;
  text-transform:uppercase;letter-spacing:.005em;
  min-height:calc(6.3em + 64px);display:flex;align-items:center;
  padding:32px 34px;border:1px solid var(--hb-line)}
.home .hb-pquote::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,12,20,.80) 0%,rgba(7,12,20,.40) 100%),
    url(/public/img/Hoersaal-1024x683_cy.jpg) center/cover no-repeat}
.home .hb-pq-text{display:block;max-width:18ch}
.home .hb-pquote em{color:var(--hb-cyan);font-style:normal}
.home .hb-sig{margin:38px 0 0;max-width:54ch;font-size:13px}
.home .hb-sig .hb-mk{display:block;width:100%;height:auto;border:1px solid var(--hb-line);
  filter:grayscale(0.35);
  pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.home .hb-signame{margin-top:16px;line-height:1.55}
.home .hb-sig b{color:var(--hb-fg);display:block;letter-spacing:.08em;margin-bottom:4px}
.home .hb-sig span{color:var(--hb-faint);display:block}
.home .hb-about{margin-top:38px}
.home .hb-figbody + .hb-figbody{margin-top:1em}

/* ── Partner-Karussell (Sektion) ── */
.home .hb-partners{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--hb-line);position:relative}
.home .hb-partners .logos-title{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;color:var(--hb-cyan);margin-bottom:20px}
.home .hb-partners .logos-note{color:var(--hb-faint);font-size:12px;margin-top:14px;letter-spacing:.04em}

/* ── CTA ── */
.home .hb-cta{padding-top:120px;padding-bottom:120px;text-align:center;border-top:1px solid var(--hb-line)}
.home .hb-cta h2{font-family:'Anton',sans-serif;font-size:clamp(36px,7vw,96px);line-height:.9;
  text-transform:uppercase;margin-bottom:30px}
.home .hb-cta h2 em{color:transparent;-webkit-text-stroke:1.5px var(--hb-amber);font-style:normal}
.home .hb-cta p{color:var(--hb-dim);max-width:46ch;margin:0 auto 44px;font-size:16px}
.hb .hb-btn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--hb-cyan);
  color:var(--hb-cyan);text-decoration:none;padding:18px 34px;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;transition:.25s;background:transparent;
  font-family:'IBM Plex Mono',monospace;cursor:pointer}
.hb .hb-btn:hover{background:var(--hb-cyan);color:var(--hb-bg);box-shadow:0 0 40px -8px var(--hb-cyan)}

/* ── Reveal (CSS-Animation, kein JS nötig) ── */
.home .hb-reveal{opacity:0;transform:translateY(20px);
  animation:hb-rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.home .hb-d1{animation-delay:.1s}.home .hb-d2{animation-delay:.28s}
.home .hb-d3{animation-delay:.46s}.home .hb-d4{animation-delay:.62s}
@keyframes hb-rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .home .hb-reveal{animation:none;opacity:1;transform:none}
  .home .hb-dot{animation:none}
}

/* ── Footer über dem Strömungsfeld, undurchsichtig wie der Header ── */
.hb footer{position:relative;z-index:10;
  background:rgba(10,14,23,.86);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--hb-line)}

/* ════════════════════════════════════════════════════════
   UNTERSEITEN (Kontakt, Impressum, Datenschutz) im Datasheet-Look
   ════════════════════════════════════════════════════════ */
.hb .hb-page{padding-top:150px;padding-bottom:90px;min-height:70vh}
.hb .hb-pagetitle{font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(40px,7vw,86px);line-height:.92;text-transform:uppercase;
  letter-spacing:.01em;margin:14px 0 22px}
.hb .hb-pagelead{font-size:16px;color:var(--hb-dim);max-width:58ch;line-height:1.75;margin-bottom:8px}

/* Kontaktseite */
.hb .hb-contact{display:grid;grid-template-columns:300px 1fr;gap:48px;margin-top:56px;align-items:start}
@media(max-width:820px){.hb .hb-contact{grid-template-columns:1fr;gap:36px}}
.hb .hb-contact-info{display:flex;flex-direction:column;gap:0;border:1px solid var(--hb-line)}
.hb .hb-ci{padding:20px 22px;border-bottom:1px solid var(--hb-line)}
.hb .hb-ci:last-child{border-bottom:none}
.hb .hb-ci .hb-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-faint);margin-bottom:8px}
.hb .hb-ci .hb-v{font-size:14px;color:var(--hb-fg);line-height:1.6}
.hb .hb-ci a{color:var(--hb-cyan);text-decoration:none}
.hb .hb-ci a:hover{text-decoration:underline}

/* Formular */
.hb .hb-form{display:flex;flex-direction:column;gap:20px}
.hb .hb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.hb .hb-form-row{grid-template-columns:1fr}}
.hb .hb-field{display:flex;flex-direction:column;gap:8px}
.hb .hb-field label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hb-faint)}
.hb .hb-field input,.hb .hb-field select,.hb .hb-field textarea{
  font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--hb-fg);
  background:rgba(10,14,20,.55);border:1px solid var(--hb-line);border-radius:0;
  padding:13px 14px;transition:border-color .2s;width:100%}
.hb .hb-field input:focus,.hb .hb-field select:focus,.hb .hb-field textarea:focus{
  outline:none;border-color:var(--hb-cyan)}
.hb .hb-field textarea{min-height:140px;resize:vertical}
.hb .hb-field input::placeholder,.hb .hb-field textarea::placeholder{color:var(--hb-faint)}
.hb .hb-form .hb-btn{align-self:flex-start;margin-top:6px}

/* Feedback-Meldungen (Kontaktformular) */
.hb .hb-alert{margin-top:28px;padding:15px 18px;border:1px solid var(--hb-line);
  font-size:14px;line-height:1.55}
.hb .hb-alert-ok{border-color:var(--hb-cyan);color:var(--hb-fg);background:rgba(0,180,216,.08)}
.hb .hb-alert-err{border-color:#c2603f;color:#e7b9a6;background:rgba(194,96,63,.10)}

/* Rechtstexte (Impressum / Datenschutz) */
.hb .hb-legal{max-width:760px;margin-top:48px}
.hb .hb-legal-block{padding:26px 0;border-top:1px solid var(--hb-line)}
.hb .hb-legal-block:first-child{border-top:none;padding-top:0}
.hb .hb-legal-block h2{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hb-cyan);margin-bottom:12px}
.hb .hb-legal-block > div{font-size:15px;color:var(--hb-dim);line-height:1.85}
.hb .hb-legal-block a{color:var(--hb-cyan);text-decoration:none}
.hb .hb-legal-block a:hover{text-decoration:underline}

/* ── Netzwerk-Block (Fig. 03) ── */
.home .hb-network{margin-top:54px;padding-top:30px;border-top:1px solid var(--hb-line)}
.home .hb-network .hb-nl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hb-faint);margin-bottom:18px}
.home .hb-network .hb-netlogos{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.home .hb-network .hb-netlogos a{display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--hb-line);border-radius:6px;padding:14px 18px;height:76px;
  transition:border-color .2s,transform .2s}
.home .hb-network .hb-netlogos a:hover{border-color:var(--hb-cyan);transform:translateY(-2px)}
.home .hb-network .hb-netlogos img{height:100%;width:auto;object-fit:contain;display:block}
.home .hb-network .hb-parts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.home .hb-network .hb-parts-row{display:flex;flex-wrap:wrap;gap:14px}
.home .hb-network a{border:1px solid var(--hb-line);padding:10px 16px;color:var(--hb-dim);
  text-decoration:none;font-size:12px;letter-spacing:.06em;transition:border-color .2s,color .2s}
.home .hb-network a:hover{border-color:var(--hb-cyan);color:var(--hb-cyan)}

/* ── Kontakt-Grid (CTA) ── */
.home .hb-contactgrid{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:66px;
  border:1px solid var(--hb-line);max-width:780px;margin-left:auto;margin-right:auto;text-align:left}
.home .hb-contactgrid > div{flex:1;min-width:200px;padding:24px 26px;border-right:1px solid var(--hb-line)}
.home .hb-contactgrid > div:last-child{border-right:none}
.home .hb-contactgrid .hb-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hb-faint);margin-bottom:10px}
.home .hb-contactgrid .hb-v{font-size:14px;color:var(--hb-fg);line-height:1.6}
.home .hb-contactgrid a{color:var(--hb-cyan);text-decoration:none}
.home .hb-contactgrid a:hover{text-decoration:underline}
@media(max-width:680px){
  .home .hb-contactgrid > div{border-right:none;border-bottom:1px solid var(--hb-line)}
  .home .hb-contactgrid > div:last-child{border-bottom:none}
}