:root{
  --bg: #0b0f17;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.09);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --line: rgba(255,255,255,0.12);
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
  --r: 18px;
}

*{ box-sizing: border-box; }
html { 
  height:100%; 
  scroll-padding-top: 72px; /* Höhe deiner Topbar */
  scroll-behavior: smooth;

}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color: var(--text);
  background: var(--bg);
  position: relative;
  padding-top: 72px; /* Höhe der Topbar */
  height:100%;
}

/* Fixed background layer: nie abgeschnitten, unabhängig von Content-Höhe */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(82, 140, 255, 0.25), transparent 55%),
    radial-gradient(900px 550px at 85% 15%, rgba(255, 120, 200, 0.18), transparent 60%),
    radial-gradient(900px 800px at 50% 90%, rgba(80, 255, 190, 0.10), transparent 55%),
    var(--bg);
}



a{ color: var(--text); text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{ max-width: 1115px; margin: 0 auto; padding: 28px 18px 48px; }

.topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  display:flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(14px);
}

.brand{ display:flex; gap: 12px; align-items: center; }
.logo{
  width: 40px; height: 40px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(82,140,255,0.9), rgba(255,120,200,0.7));
  box-shadow: var(--shadow);
}
.name{ font-weight: 700; letter-spacing: 0.2px; }
.tagline{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.search input{
  width: min(360px, 48vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline: none;
}
.search input:focus{ border-color: rgba(82,140,255,0.55); }

.hero{ padding: 18px 4px 8px; }
.hero h1{ margin: 0 0 8px; font-size: 34px; }
.hero p{ margin: 0 0 14px; color: var(--muted); max-width: 70ch; }

.chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.chip{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.chip:hover{
  background: rgba(255,255,255,0.10);
  text-decoration: none;
}

/* Sections + Carousel */
.sections{ margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }

.sectionCard{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.04));
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sectionHead{
  padding: 14px 14px 10px;
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.sectionTitle{ margin:0; font-weight: 800; font-size: 18px; }
.sectionSub{ margin-top: 6px; color: var(--muted); font-size: 13px; }

.carouselControls{ display:flex; gap: 10px; }
.iconBtn{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.iconBtn:hover{ background: rgba(255,255,255,0.10); }

.carousel{
  border-top: 1px solid var(--line);
  padding: 12px;
  overflow: hidden;
}

/* Scrollbar Grundlayout */
::-webkit-scrollbar{
  width: 8px;
}

/* Track unsichtbar */
::-webkit-scrollbar-track{
  background: transparent;
}

/* Scrollbar selbst */
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* Hover etwas stärker */
::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.28);
}

*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.track{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;          /* kann bleiben, damit sich die Höhe nicht ändert */
  scrollbar-width: none;        /* Firefox: Scrollbar ausblenden */
  -ms-overflow-style: none;     /* Legacy Edge/IE: Scrollbar ausblenden */
}

.track::-webkit-scrollbar{
  display: none;                /* Chrome/Safari: Scrollbar ausblenden */
}
.track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 999px; }

.slide{
  flex: 0 0 auto;
  width: min(520px, 92vw);
}

@media (min-width: 820px){
  .slide{ width: 520px; }
}

/* Project card (reused) */
.card{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.04));
  border-radius: var(--r);
  overflow: hidden;
}

.cardHeader{
  padding: 14px 14px 10px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
}
.cardTitle{ font-weight: 700; margin: 0; }
.cardMeta{ color: var(--muted); font-size: 12px; margin-top: 6px; }
.badges{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.badge{
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}

.media{
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
   overflow: hidden; /* wichtig, sonst zoomt das Bild aus dem Rahmen */
}

.media img, .media video, model-viewer, .ytWrap{
  width: 100%;
  display:block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.media img{
  transition: transform 220ms ease, filter 220ms ease;
}

.media img:hover{
  transform: scale(1.05);
}

.media img,
.projectModalMedia img{
  cursor: pointer !important;
}


.projectModalMedia model-viewer{
  aspect-ratio: 16 / 9;
  min-height: 520px;
}

.media model-viewer{
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

@media (min-width: 900px){
  .media model-viewer{
    aspect-ratio: 16 / 8;
    min-height: 420px;
  }
}

.ytWrap{ position: relative; }
.ytWrap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}

.cardBody{ padding: 12px 14px 14px; }
.desc{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.actions{ display:flex; flex-wrap: wrap; gap: 10px; }
.btn{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 13px;
}
.btn:hover{ background: rgba(255,255,255,0.10); text-decoration: none; }

.footer{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 28px;
  color: var(--muted);
  display:flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.dot{ opacity: 0.4; }

/* --- Card description in carousel: truncated --- */
.desc.truncated{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Project modal overlay --- */
.projectModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding: 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
}

.projectModal.open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.projectModalInner{
  width: min(1200px, 98vw);
  max-height: min(92vh, 920px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10, 14, 22, 0.72);
  box-shadow: var(--shadow);
}

.projectModalTopbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
}

.projectModalTitle{
  font-weight: 800;
  margin: 0;
  font-size: 16px;
}

.projectModalBody{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 980px){
  .projectModalBody{
    grid-template-columns: 1.7fr 1fr;
  }
}

.projectModalMedia{
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
}

@media (min-width: 980px){
  .projectModalMedia{
    border-bottom: none;
    border-right: 1px solid var(--line);
  }
}

.projectModalMedia img,
.projectModalMedia video,
.projectModalMedia model-viewer,
.projectModalMedia .ytWrap{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (min-width: 980px){
  .projectModalMedia img,
  .projectModalMedia video,
  .projectModalMedia model-viewer,
  .projectModalMedia .ytWrap{
    aspect-ratio: 16 / 11;
  }
}

.projectModalContent{
  padding: 14px 14px 16px;
  overflow: auto;
  max-height: min(92vh, 920px);
}

.projectModalMeta{
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.projectModalNav{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Modal nav buttons outside the modal box */
.projectModalNavBtn{
  pointer-events: auto;
  position: fixed;                 /* wichtig: relativ zum Viewport/Overlay */
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  z-index: 10000;                  /* über dem Overlay */
}

.projectModalNavBtn:hover{
  background: rgba(255,255,255,0.16);
}

/* Pfeile außerhalb, aber an der Modal-Box ausgerichtet */
.projectModalNavBtn.prev{
  left: calc(50% - min(1200px, 98vw) / 2 - 64px);
}
.projectModalNavBtn.next{
  right: calc(50% - min(1200px, 98vw) / 2 - 64px);
}


/* --- 3x3 Image Grid (media.type = imageGrid) --- */
.imageGrid{
  width: 100%;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  padding: 10px;
}

.imageGridItem{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.imageGridItem img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 180ms ease;
}

.imageGridItem:hover img{
  transform: scale(1.12);
}

/* Optional: im Modal etwas mehr Platz */
.projectModalMedia .imageGrid{
  padding: 12px;
}

/* ImageGrid Preview NUR im Modal */
.projectModal .imageGrid{
  position: relative;
}

.projectModal .imageGridPreview{
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  overflow: hidden;
  display: none;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.projectModal .imageGridPreview.open{
  display: block;
}

.projectModal .imageGridPreview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Während Preview: kleine Zellen nicht interaktiv */
.projectModal .imageGrid.previewing .imageGridItem{
  pointer-events: none;
}


/* ---- Grid Lightbox (für imageGrid) ---- */
.gridLightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 12000; /* über projectModal */
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  padding: 18px;
}

.gridLightbox.open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.gridLightboxInner{
  width: min(1200px, 98vw);
  max-height: 92vh;
  background: transparent;
  border: none;
  box-shadow: none;
}


.gridLightboxTopbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
}

.gridLightboxTitle{
  margin: 0;
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

.projectModalClose,
.gridLightboxClose{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  z-index: 12002;
  transition: background 160ms ease, transform 120ms ease;
}

.projectModalClose:hover,
.gridLightboxClose:hover{
  background: rgba(255,255,255,0.16);
}


.gridLightboxMedia{
  background: transparent;
}

.gridLightboxMedia img{
  width: 100%;
  height: min(78vh, 820px);
  object-fit: contain;
  display: block;
  border-radius: 16px;   /* <- entscheidend */
}


/* Pfeile: an der Box ausgerichtet (außen) */
.gridLightboxNavBtn{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  z-index: 12001;
}

.gridLightboxNavBtn:hover{
  background: rgba(255,255,255,0.16);
}

.gridLightbox.open .gridLightboxNavBtn{ display: block; }
.gridLightbox .gridLightboxNavBtn{ display: none; }

.gridLightboxNavBtn.prev{
  left: calc(50% - min(1200px, 98vw) / 2 - 64px);
}
.gridLightboxNavBtn.next{
  right: calc(50% - min(1200px, 98vw) / 2 - 64px);
}

@media (max-width: 700px){
  .gridLightboxNavBtn.prev{ left: 10px; }
  .gridLightboxNavBtn.next{ right: 10px; }
}



/* ---------- Footer (buttons + legal cards) ---------- */
.siteFooter{ margin-top: 64px; }
.footerInner{ padding: 40px 18px 24px; }
.footerButtons{
  display:flex;
  gap:14px;
   justify-self: center;
  flex-wrap:wrap;
}

.footerBarGrid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* links | mitte | rechts */
  align-items: center;
  gap: 16px;
}

.footerBtn{
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.footerBar{
  margin-top: 18px;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.footerBarInner{
  max-width: none;
  width: 100%;
  padding: 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin: 0;
}
.footerCopy{ 
  color: var(--muted); 
  font-size: 13px; 
  justify-self: start;
  text-align: left;
}

.footerLegal{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-self: end;
}
.footerLegalCard{
  appearance: none;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
}
.footerLegalCard:hover{
  background: rgba(255,255,255,0.10);
}

/* ---------- Legal modal (Impressum/Datenschutz) ---------- */
.legalModal .projectModalInner{
  width: min(900px, 98vw);
}
.legalModal .projectModalBody{
  grid-template-columns: 1fr;
}
.legalModal .projectModalContent{
  max-height: min(80vh, 760px);
}
.legalModalContent h4{
  margin: 18px 0 10px;
}
.legalModalContent p,
.legalModalContent li{
  color: var(--text);
  line-height: 1.55;
}


.icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* GitHub */
.icon-github{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 .5C5.73.5.75 5.78.75 12.29c0 5.22 3.44 9.65 8.21 11.22.6.11.82-.27.82-.58v-2.02c-3.34.75-4.04-1.65-4.04-1.65-.55-1.43-1.35-1.81-1.35-1.81-1.1-.78.08-.77.08-.77 1.22.09 1.86 1.28 1.86 1.28 1.08 1.92 2.83 1.36 3.52 1.04.11-.81.42-1.36.76-1.67-2.67-.31-5.47-1.37-5.47-6.1 0-1.35.46-2.45 1.24-3.32-.13-.31-.54-1.55.12-3.23 0 0 1.01-.33 3.3 1.27a11.2 11.2 0 0 1 6 0c2.29-1.6 3.3-1.27 3.3-1.27.66 1.68.25 2.92.12 3.23.77.87 1.24 1.97 1.24 3.32 0 4.74-2.8 5.79-5.48 6.1.43.38.81 1.12.81 2.26v3.35c0 .32.22.69.83.58 4.77-1.57 8.2-6 8.2-11.22C23.25 5.78 18.27.5 12 .5z'/%3E%3C/svg%3E");
}

/* LinkedIn */
.icon-linkedin{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4.98 3.5C3.34 3.5 2 4.85 2 6.48c0 1.63 1.34 2.98 2.98 2.98h.03A2.99 2.99 0 0 0 8 6.48C8 4.85 6.66 3.5 4.98 3.5zM2.5 21.5h5v-12h-5v12zM9.5 9.5v12h5v-6.6c0-3.68 4.5-3.98 4.5 0v6.6h5v-8.2c0-6.3-6.84-6.07-9.5-2.97V9.5h-5z'/%3E%3C/svg%3E");
}

/* Email */
.icon-mail{
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M2 5.75A2.75 2.75 0 0 1 4.75 3h14.5A2.75 2.75 0 0 1 22 5.75v12.5A2.75 2.75 0 0 1 19.25 21H4.75A2.75 2.75 0 0 1 2 18.25V5.75zm2.3-.25L12 11.3l7.7-5.8H4.3zm15.7 1.9-5.5 4.15 5.5 4.15V7.4zM4 7.4v8.3l5.5-4.15L4 7.4zm7.05 4.9L4.3 17.5h15.4l-6.75-5.2-.9.65-.9-.65z'/%3E%3C/svg%3E");
}