/* ==========================================================================
   PROJECTS  —  Übersicht + alle Projekt-Unterseiten
   ========================================================================== */

/* ==========================================================================
   SEITENKOPF MIT ANIMATION
   ========================================================================== */
.page-hero--split .page-hero__inner{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.page-hero__visual{ position:relative; }
.page-hero__visual .mesh{
  width:100%; height:min(42vh, 380px);
}

/* ==========================================================================
   PROJEKT-KACHELN  (Übersicht)
   ========================================================================== */
.prj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(1.25rem, 3vw, 2rem);
  margin-top:3rem;
}
.prj{
  position:relative;
  display:flex; flex-direction:column;
  background:linear-gradient(170deg, var(--panel-2), rgba(7,15,13,.9));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.prj:hover{ transform:translateY(-6px); border-color:var(--accent-2); }

.prj__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(53,242,207,.16), transparent 70%),
    linear-gradient(140deg, var(--panel-2), var(--bg));
}
.prj__media::after{                        /* Dateiname, solange kein Bild da ist */
  content:attr(data-file);
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  padding:1rem; text-align:center;
  color:var(--text-mute); font-size:.68rem; letter-spacing:.08em;
}
.prj__media img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.prj:hover .prj__media img{ transform:scale(1.06); filter:saturate(1.15); }

.prj__no{
  position:absolute; top:0; left:0; z-index:2;
  padding:.4rem .9rem;
  font-family:var(--font-display); font-weight:700;
  font-size:.68rem; letter-spacing:.18em;
  color:#0a1512;
  background:var(--accent);
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}

.prj__body{
  display:flex; flex-direction:column; flex:1;
  padding:1.5rem 1.4rem 1.4rem;
}
.prj__body h3{
  font-size:1.05rem;
  margin-bottom:.6rem;
}
.prj__body p{
  font-size:.79rem; color:var(--text-mute);
  flex:1;
}
.prj__tags{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:1rem 0 1.25rem;
}
.prj__tags li{
  padding:.22rem .6rem;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid rgba(53,242,207,.28);
}
.prj__link{
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:flex-start;
  font-family:var(--font-display); font-weight:600;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
}
.prj__link svg{
  width:14px; height:14px; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.prj:hover .prj__link svg{ transform:translateX(5px); }
/* ganze Kachel klickbar */
.prj__link::after{ content:""; position:absolute; inset:0; }

/* ==========================================================================
   REFERENZ-LISTE  (Webdesign)
   ========================================================================== */
.weblist{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(1.25rem, 3vw, 1.75rem);
  margin-top:2.5rem;
}
.ref{
  position:relative;
  display:flex; flex-direction:column;
  background:rgba(11,26,22,.7);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.ref:hover{ transform:translateY(-4px); border-color:var(--accent); background:rgba(17,39,34,.9); }

.ref__shot{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(140deg, #16302a, #0a1714);
  border-bottom:1px solid var(--line);
}
.ref__shot::after{
  content:attr(data-file);
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  padding:.75rem; text-align:center;
  color:var(--text-mute); font-size:.62rem; letter-spacing:.06em;
}
/* Eckfahne, z. B. „Der Anfangspunkt“ */
.ref__flag{
  position:absolute; top:0; left:0; z-index:2;
  padding:.3rem .75rem;
  font-family:var(--font-display); font-weight:700;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:#0a1512;
  background:var(--accent);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}

.ref__shot img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease);
}
.ref:hover .ref__shot img{ transform:scale(1.05); }

.ref__body{ padding:1.15rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.ref__cat{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:.5rem;
}
.ref__body h3{ font-size:.92rem; margin-bottom:.5rem; }
.ref__body p{ font-size:.75rem; color:var(--text-mute); flex:1; }
.ref__url{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem;
  font-size:.72rem; color:var(--accent);
  word-break:break-all;
}
.ref__url svg{
  width:13px; height:13px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.ref__url::after{ content:""; position:absolute; inset:0; }

/* ==========================================================================
   SPLIT-BLOCK  (Bild + Text, abwechselnd)
   ========================================================================== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  padding:clamp(2.5rem, 5vw, 4rem) 0;
}
.split + .split{ border-top:1px solid var(--line); }
.split--flip .split__media{ order:2; }
.split__media{ --shot-ratio:4/3; }
.split__body h2{
  font-size:clamp(1.5rem, 3vw, 2.4rem);
  margin-bottom:1.1rem;
}
.split__body h3{
  font-size:clamp(1.05rem, 1.8vw, 1.3rem);
  color:var(--accent-2);
  margin:1.75rem 0 .7rem;
}
.split__body p{ color:var(--text-dim); font-size:.85rem; }
.split__body p + p{ margin-top:1rem; }

/* ==========================================================================
   LEISTUNGS-LISTE  (verschachtelt, aus der alten Seite)
   ========================================================================== */
.svclist{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(1.25rem, 3vw, 2rem);
  margin-top:2.5rem;
}
.svcgroup{
  padding:1.5rem 1.4rem;
  background:rgba(11,26,22,.55);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  transition:background .3s var(--ease), border-left-color .3s var(--ease);
}
.svcgroup:hover{ background:rgba(17,39,34,.85); border-left-color:var(--accent-2); }
.svcgroup h3{
  font-size:.88rem; letter-spacing:.05em;
  margin-bottom:.9rem;
}
.svcgroup ul{ display:grid; gap:.55rem; }
.svcgroup li{
  position:relative;
  padding-left:1.1rem;
  font-size:.77rem; line-height:1.65;
  color:var(--text-mute);
}
.svcgroup li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:5px; height:5px;
  background:var(--accent-2);
  box-shadow:0 0 8px rgba(53,242,207,.6);
}

/* ==========================================================================
   HERVORGEHOBENER HINWEIS-BLOCK
   ========================================================================== */
.callout{
  padding:clamp(1.75rem, 4vw, 2.75rem);
  background:linear-gradient(120deg, rgba(255,232,61,.07), rgba(11,26,22,.6));
  border:1px solid rgba(255,232,61,.28);
  clip-path:var(--chamfer);
}
.callout h2{
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  color:var(--accent);
  margin-bottom:1.25rem;
}
.callout__cols{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 3vw, 2.5rem);
}
.callout__cols p{ color:var(--text-dim); font-size:.83rem; }

/* ==========================================================================
   GALERIE  (+ Lightbox, siehe site.js)
   ========================================================================== */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:.85rem;
  margin-top:2.5rem;
}
.gallery__item{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(53,242,207,.12), transparent 70%),
    linear-gradient(140deg, var(--panel-2), var(--bg));
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.gallery__item::after{
  content:attr(data-file);
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center;
  padding:.75rem; text-align:center;
  color:var(--text-mute); font-size:.62rem; letter-spacing:.06em;
}
.gallery__item img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.gallery__item:hover{ border-color:var(--accent); transform:translateY(-3px); }
.gallery__item:hover img{ transform:scale(1.08); }
.gallery__cap{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:1.5rem .8rem .6rem;
  font-size:.68rem; color:var(--text);
  background:linear-gradient(transparent, rgba(4,10,9,.92));
  opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery__item:hover .gallery__cap{ opacity:1; transform:none; }

/* ==========================================================================
   SIGNALKETTE
   ========================================================================== */
.chain{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(165px, 1fr));
  gap:2.25rem;
  margin-top:2.5rem;
}
.chain__step{
  position:relative;
  padding:1.3rem 1.1rem;
  background:linear-gradient(170deg, var(--panel-2), rgba(7,15,13,.85));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.chain__step:hover{ border-color:var(--accent-2); transform:translateY(-4px); }

.chain__step:not(:last-child)::after{      /* Pfeil zum nächsten Glied */
  content:"";
  position:absolute; top:50%; right:-1.55rem;
  width:.85rem; height:.85rem;
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
  filter:drop-shadow(0 0 6px rgba(255,232,61,.6));
  animation:chainPulse 2.4s var(--ease) infinite;
}
.chain__step:nth-child(2)::after{ animation-delay:.3s; }
.chain__step:nth-child(3)::after{ animation-delay:.6s; }
.chain__step:nth-child(4)::after{ animation-delay:.9s; }
@keyframes chainPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.chain__no{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:.62rem; letter-spacing:.2em;
  color:var(--accent);
  margin-bottom:.6rem;
}
.chain__step h3{ font-size:.86rem; line-height:1.3; margin-bottom:.5rem; }
.chain__step p{ font-size:.72rem; line-height:1.6; color:var(--text-mute); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(3,8,7,.94);
  backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:78vh;
  border:1px solid var(--line-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__cap{
  margin-top:1rem; text-align:center;
  font-size:.78rem; color:var(--text-dim);
}
.lightbox__btn{
  position:absolute;
  width:52px; height:52px;
  display:grid; place-items:center;
  color:var(--accent);
  background:rgba(11,26,22,.8);
  border:1px solid var(--line-strong);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lightbox__btn:hover{ background:var(--accent); color:#0a1512; }
.lightbox__btn svg{
  width:22px; height:22px; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.lightbox__close{ top:1.25rem; right:1.25rem; }
.lightbox__prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:1.25rem; top:50%; transform:translateY(-50%); }

/* ==========================================================================
   MATERIAL-KARTEN MIT BALKEN
   ========================================================================== */
.matgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1.25rem, 3vw, 1.75rem);
  margin-top:2.5rem;
}
.matcard{
  display:flex; flex-direction:column;
  padding:clamp(1.4rem, 2.5vw, 1.9rem);
  background:linear-gradient(170deg, var(--panel-2), rgba(7,15,13,.9));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.matcard:hover{ border-color:var(--accent-2); transform:translateY(-5px); }

.matcard__head{
  padding-bottom:.9rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.matcard__head h3{
  font-size:1.35rem; letter-spacing:.04em;
  margin-bottom:.3rem;
}
.matcard__sub{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.matcard__intro{ font-size:.77rem; color:var(--text-dim); }

/* Balken */
.meter{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem .75rem;
  margin-top:.9rem;
}
.meter__label{
  font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute);
}
.meter__val{
  font-size:.64rem; letter-spacing:.04em;
  color:var(--accent-2); text-align:right;
}
.meter__track{
  grid-column:1 / -1;
  height:5px;
  background:rgba(140,255,214,.12);
  overflow:hidden;
}
.meter__bar{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 10px rgba(255,232,61,.45);
  transition:width 1.1s var(--ease) .2s;
}
.is-in .meter__bar{ width:var(--v); }
/* ohne JS stehen die Balken sofort auf ihrem Wert */
html:not(.js) .meter__bar{ width:var(--v); }

/* Eckdaten unter den Balken */
.matspecs{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.4rem .9rem;
  margin-top:1.5rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.71rem;
}
.matspecs dt{ color:var(--text-mute); letter-spacing:.06em; }
.matspecs dd{ margin:0; color:var(--text); text-align:right; }

.matcard__use{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.74rem; color:var(--text-dim);
}
.matcard__use b{ color:var(--accent-3); font-weight:500; }

/* ==========================================================================
   FAKTEN-LEISTE
   ========================================================================== */
.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1px;
  margin-top:2.5rem;
  background:var(--line);
  border:1px solid var(--line);
}
.fact{
  background:var(--bg);
  padding:1.4rem 1.2rem;
  transition:background .3s var(--ease);
}
.fact:hover{ background:var(--panel); }
.fact dt{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.5rem;
}
.fact dd{
  margin:0;
  font-family:var(--font-display); font-weight:600;
  font-size:.92rem; letter-spacing:.03em;
  color:var(--text);
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 900px){
  .page-hero--split .page-hero__inner{ grid-template-columns:1fr; }
  .page-hero__visual{ order:-1; }
  .page-hero__visual .mesh{ height:min(30vh, 240px); }

  .split{ grid-template-columns:1fr; }
  .split--flip .split__media{ order:0; }
  .split__media{ max-width:560px; }

  .lightbox__prev{ left:.5rem; }
  .lightbox__next{ right:.5rem; }

  .callout__cols{ grid-template-columns:1fr; }
}

@media (max-width: 700px){
  /* einspaltige Kette: Pfeile zeigen nach unten */
  .chain{ gap:2rem; }
  .chain__step:not(:last-child)::after{
    top:auto; right:auto;
    bottom:-1.5rem; left:50%;
    transform:translateX(-50%) rotate(135deg);
  }
}

@media (max-width: 560px){
  .gallery{ grid-template-columns:repeat(2, 1fr); }
  .gallery__cap{ opacity:1; transform:none; font-size:.6rem; }
}