/* ============================================================
   ⚡ KUNI ENGINEERING – MINIFIED & COMMENTED VERSION
   ============================================================ */

   @font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
       url('/fonts/space-grotesk/SpaceGrotesk-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
       url('/fonts/space-grotesk/SpaceGrotesk-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
   
/* 🌈 Farb- und Designvariablen */
:root{--bg:#0b1220;--bg-2:#0f1830;--panel:#121b31cc;--border:#1f2a48b3;--text:#e7ecf7;--muted:#a8b3cf;--brand:#00d5ff;--brand-2:#3b82f6;--radius:18px;--maxw:1200px;--shadow:0 10px 30px rgba(0,0,0,.35);}

/* 📐 Basislayout */
*{box-sizing:border-box}html,body{height:100%}

/* 🧍 Haupt-Body – Hintergrund + Schrift */
body{
  margin:0;
  font-family:'Ubuntu',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  position:relative;
  background: url("img/background_pcb.png") center/100% no-repeat fixed;
  background-color: var(--bg); /* Fallback, falls Bild nicht lädt */
  filter:brightness(1.1) contrast(1.02);
  overflow-x:hidden
}

/* 💡 Leichter Schimmer über dem PCB-Hintergrund */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;mix-blend-mode:screen;opacity:.6;transition:background-position .3s ease}

/* ======================= 🔝 NAVIGATION ======================= */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(12px);background:rgba(10,16,30,.75);border-bottom:1px solid #1a2440}
.nav__wrap{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* 🔷 Branding-Logo */
.brand{display:flex;align-items:center;gap:12px}
.brand img{max-height:13vh;height:auto;width:auto}

/* 🧭 Navigation Links */
.nav__links{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap
}
.nav__links a{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  transition:all .3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ✨ Hover + Aktiver Menüpunkt – Glas & Glow */
.nav__links a:hover,
.nav__links a[aria-current="page"]{
  /*background: rgba(20, 30, 60, 0.75); *//* leicht transparenter, dunkleres Glas */
  background: rgba(0, 213, 255, 0.08);
  border: 0.1px solid rgba(0, 213, 255, 0.35);
  box-shadow: inset 0 0 4px rgba(0, 213, 255, 0.15);
  /*text-shadow: 0 0 6px rgba(0, 213, 255, 0.35);*/
  transform: translateY(-1px);
  transition: all 0.1s ease;
}

/* ☰ Toggle (nur für mobile Ansicht vorgesehen) */
.nav__toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;padding:6px 10px;border-radius:10px}
.nav__toggle:focus-visible{outline:2px solid var(--brand)}

/* ======================= 🧩 HERO SECTION ======================= */
.section{padding:40px 20px 80px}
.wrap{max-width:var(--maxw);margin:0 auto}
.hero{position:relative;padding:clamp(80px,10vw,160px) 20px 80px;overflow:hidden}
.hero__wrap{max-width:var(--maxw);margin:0 auto;text-align:center}

/* 🎖️ Badge */
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:999px;font-size:13px;color:#cfefff;background:linear-gradient(90deg,#0b2a46,#113b6a);border:1px solid #1c456f;box-shadow:inset 0 0 12px rgba(0,213,255,.15)}

/* 🏷️ Hauptüberschrift */
h1{font-size:clamp(22px,5vw,51px);line-height:1.08;margin:14px 0;font-weight:800}
.accent{
  background:linear-gradient(90deg,var(--brand),
  var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 4 8px rgba(0,213,255,.3)
}
.lead{
  color:var(--muted);
  max-width:850px;
  margin:10px auto 28px
}

/* 🔘 Call to Action */
.cta{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:14px;font-weight:700;letter-spacing:.3px;color:#03121a;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 24px rgba(0, 213, 255, 0.288),0 0 64px rgba(59, 131, 246, 0.164);border:none;  text-decoration: none;}
.cta:hover{
  filter:saturate(115%)
    background: linear-gradient(90deg, #33e1ff, #66a3ff);
  box-shadow: 0 0 30px rgba(0,213,255,.6), 0 0 80px rgba(59,130,246,.4);
  transform: translateY(-2px);
}

/* ======================= 💼 CARD GRID ======================= */
.grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}

/* 📦 Card-Element */
.card{position:relative;border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),rgba(10,16,30,.8));border:1px solid var(--border);padding:24px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;isolation:isolate}
.card:hover{transform:translateY(-4px);border-color:#345092;box-shadow:0 12px 40px rgba(2,13,30,.6),0 0 60px rgba(0,213,255,.12)}
.card::after{content:"";position:absolute;inset:auto 10% 0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);opacity:0;transition:opacity .25s ease;filter:blur(.3px)}
.card:hover::after{opacity:.9}
.card h3{margin:8px 0 6px;font-size:22px}
.card p{
  margin:0;
  color:var(--muted);   
  text-align: left;
  text-justify: inter-word;
  hyphens: auto;                  /* Trennt lange Wörter automatisch */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-spacing: 0.05em;           /* leichter Ausgleich der Wortabstände */
}

/* ======================= 📰 BLOG TEASERS ======================= */
.teasers{display:grid;gap:20px;grid-template-columns:1fr}
.teaser {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg,var(--panel),rgba(10, 23, 54, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45),
              inset 0 0 12px rgba(255, 255, 255, 0.04);
  transition: all 0.35s ease;
  cursor: pointer;
  /* 🔧 Fix: erzwingt GPU und Blur */
  will-change: backdrop-filter;
  transform: translateZ(0);
}

.teaser:hover{transform:translateY(-4px);border-color:#345092;box-shadow:0 12px 40px rgba(2,13,30,.6),0 0 60px rgba(0,213,255,.12)}
.teaser::after{content:"";position:absolute;inset:auto 10% 0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);opacity:0;transition:opacity .25s ease;filter:blur(.3px)}
.teaser:hover::after{opacity:.9}
.teaser::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at top left,rgba(0,213,255,.15),transparent 70%);opacity:.5;transition:opacity .4s ease,transform .4s ease;z-index:0}
.teaser__header{padding:16px 18px;font-weight:700}
.teaser__meta{font-size:14px;color:var(--muted)}
.teaser__body{padding:16px 18px}
.teaser__title{font-weight:700;margin:2px 0 6px}

/* 📂 Akkordeon-Effekt */
.teaser__content{hyphens: auto; position:relative;max-height:0;overflow:hidden;opacity:0;transform:scale(.97);padding:0 22px;transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .4s ease,transform .4s ease;z-index:1}
.teaser.open .teaser__content{max-height:2000px;opacity:1;transform:scale(1);padding-bottom:22px}

/* ======================= ⚙️ FOOTER ======================= */
footer{padding:10px 10px 10px;background:rgba(10,18,33,.8);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);border-top:1px solid rgba(20,32,58,.6);color:var(--muted);box-shadow:0 -4px 20px rgba(0,0,0,.35)}
.footer__wrap{max-width:var(--maxw);margin:0 auto;display:grid;gap:24px;grid-template-columns:1fr auto}
.footer__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.footer__links a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--brand);
}

.footer-logo {
  margin-top: 20px;
  width: 200px !important;;       /* z. B. 140px – passe die Größe nach Wunsch an */
  height: auto;       /* behält das Seitenverhältnis bei */
  opacity: 0.9;       /* leicht dezenter */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.05);
  opacity: 1;
}

.footer-icon {
  width: 42px;           /* Bildgröße anpassen */
  height: auto;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ======================= 📱 MOBIL ANSICHT ======================= */
@media (max-width: 700px) {
  footer {
    padding: 18px 14px 28px;
    text-align: center;
  }

  .footer__wrap {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer__left .brand img {
    max-height: 36px;
    margin-bottom: 6px;
  }

  .footer__links {
    justify-content: center;
    gap: 10px;
  }

  .footer__links a {
    font-size: 0.9rem;
  }

  .footer__title {
    margin-top: 6px;
    margin-bottom: 4px;
  }

  footer p {
    margin: 3px 0;
    line-height: 1.3;
  }
}

/* ======================= 👁️ REVEAL ANIMATION ======================= */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal--in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.cta,.card,.teaser,.reveal{transition:none}.reveal{opacity:1;transform:none}}

/* 🚫 Alte PCB-Ebene deaktiviert */
.pcb{  

  inset: 0;
  background: url("img/background_pcb.png") center/cover no-repeat fixed;
  z-index: -2;
  opacity: 0.9;

  /* ✨ Weicher, neutraler Hintergrund */
  filter: blur(6px) brightness(1.05) contrast(1.05) saturate(0.75);}


/* ======================= 🍪 COOKIE-BANNER ======================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  background: rgba(5, 10, 25, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--muted);
  font-size: 0.9rem;
  z-index: 9999;
  display: none; /* wird per JS eingeblendet */
}

.cookie-banner--visible {
  display: block;
}

.cookie-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner__inner p {
  margin: 0;
  flex: 1 1 220px;
}

.cookie-banner__inner a {
  color: var(--brand);
  text-decoration: underline;
}

.cookie-banner__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-banner__buttons button {
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid rgba(0, 213, 255, 0.4);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #03121a;
}

.cookie-banner__buttons button:nth-child(2) {
  background: transparent;
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ======================= 📱 RESPONSIVE FIX ======================= */

@media (max-width: 768px) {
  body {
    background:
      var(--bg) url("img/background_pcb.png") center top / cover repeat-y;
    /*background-attachment: fixed; *//* verhindert Weiß auf mobilen Geräten */
    background-attachment: scroll; /* kein fixed auf Mobile */
    background-position: center top;
    background-size: cover;        /* statt 100% */
  }

    /* NAV: Logo auf Mobile kleiner machen */
  .nav .brand img {
    max-height: 68px;   /* oder 36/32px, je nach Geschmack */
    height: auto;
    width: auto;
  }

  footer {
    padding: 16px 12px 24px;  /* weniger Abstand oben/unten */
    text-align: center;
  }

  .footer__wrap {
    grid-template-columns: 1fr; /* alles untereinander */
    gap: 8px;                   /* geringerer Abstand zwischen Blöcken */
  }

  footer p {
    font-size: 0.85rem;
    line-height: 1.3;
    margin: 4px 0;
  }

  footer .brand img {
    max-height: 36px;           /* kleineres Logo */
    height: auto;
    width: auto;
    margin-bottom: 4px;
  }

  footer .nav__links a {
    font-size: 0.9rem;
    padding: 4px 6px;
  }

  .nav__wrap {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
    gap: 8px;  
  }
}

@media (max-width: 480px) {
  footer {
    padding: 12px 8px 18px;
  }
  footer .brand img {
    max-height: 36px;
  }
}

/* ======================= 🖼️ GALERIE ======================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  justify-items: center;
}
.gallery img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(0,213,255,0.3), 0 0 30px rgba(0,213,255,0.15);
}

/* ======================= 💡 LIGHTBOX – fixiert und perfekt zentriert ======================= */
.lightbox {
  position: fixed;              /* ✅ immer relativ zum Viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;                /* ✅ gesamte Höhe des sichtbaren Fensters */
  display: none;
  align-items: center;          /* vertikal zentriert */
  justify-content: center;      /* horizontal zentriert */
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
}

.lightbox.active {
  display: flex;
}

/* 💡 Das Bild */
.lightbox img {
  max-width: 90vw;             /* 90 % der Bildschirmbreite */
  max-height: 85vh;            /* 85 % der Bildschirmhöhe */
  width: auto;
  height: auto;
  object-fit: contain;         /* ✅ garantiert vollständige Anzeige */
  display: block;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 213, 255, 0.3);
  box-shadow: 0 0 40px rgba(0, 213, 255, 0.4);
  transition: transform 0.3s ease;
}

.lightbox img:hover {
  transform: scale(1.02);
}

/* Pfeiltasten bleiben auch fixiert */
.lightbox-btn {
  position: fixed;             /* ✅ bleibt ebenfalls fixiert */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 30, 50, 0.6);
  border: 1px solid rgba(0, 213, 255, 0.4);
  color: #fff;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 0 10px rgba(0, 213, 255, 0.7);
}

.lightbox-btn:hover {
  background: rgba(0, 213, 255, 0.25);
  box-shadow: 0 0 20px rgba(0, 213, 255, 0.4);
}

.lightbox-btn.prev { left: 5%; }
.lightbox-btn.next { right: 5%; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 🔧 Mobile Fix */
@media (max-width: 700px) {
  .lightbox img {
    max-width: 95vw;
    max-height: 75vh;
  }
  .lightbox-btn {
    font-size: 1.6rem;
    width: 40px;
    height: 40px;
  }
}
/* ======================= 🧩 PROJEKT-GALERIE ======================= */
.project {
  background: rgba(18,25,45,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
  backdrop-filter: blur(18px) saturate(160%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.project:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,213,255,0.1);
}

.project-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
  text-shadow: 0 0 8px rgba(0,213,255,0.3);
}

.project-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.project-images img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s ease;
}
.project-images img:hover {
  transform: scale(1.05);
}

.slogan {
  font-family: 'Orbitron', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00d5ff;
  text-shadow: 0 0 12px rgba(0, 213, 255, 0.4);
}

/* ======================= 🖖 STAR TREK HERO SECTION ======================= */
.trek-hero {
  text-align: center;
  padding: 7rem 1rem 6rem;
  color: #e7ecf7;
  background: transparent;
  position: relative;
  z-index: 1;
}

.trek-hero .hero-content {
  max-width: 760px;
  margin: 0 auto;
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  background: rgba(20, 25, 45, 0.35);
  border: 1px solid rgba(143, 122, 255, 0.25);
  border-radius: 16px;
  padding: 2.4rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.hero-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2rem;
  color: #00d5ff;
  letter-spacing: 0.1em;
  margin-bottom: 0.3rem;
  text-shadow: 0 0 12px rgba(0, 213, 255, 0.4);
}

.stardate {
  display: flex;
  align-items: center;
  gap: 10px;             /* Abstand zwischen Text und Icon */
  margin-top: 12px;
  color: #b199ff;
  font-family: 'Fira Code', monospace;
}

.stardate p {
  margin: 0;             /* verhindert extra Abstand */
}

.log-entry {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #cfd2e9;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin-bottom: 2rem;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.562);
}

/* kleiner blinkender Cursor für Star-Trek-Computer-Look */
.stardate::after {
  content: "_";
  animation: blink 1.2s infinite steps(2, start);
  color: #00d5ff;
  margin-left: 3px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.footer-icon {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  width: 70px;          /* Größe anpassen */
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.teaser__image {
  display: block;
  width: 64%;      /* passt sich der Breite der Karte an */
  height: auto;     /* Höhe ergibt sich proportional */
  max-height: none; /* keine harte Begrenzung mehr */
  object-fit: contain;  /* Bild komplett anzeigen, nichts abschneiden */
  border-radius: 10px;
  margin-bottom: 0.75rem;
  margin: 1rem auto; /* Auto-Margin zentriert das Element */
}
.highlight {
  color: rgba(152, 221, 242, 0.918); /* dein Neonblau */
  font-weight: 700;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.4);
}