/* ==========================================================================
   LAYOUT  —  Header, Navigation, Mobile-Menü, Footer, globale Widgets
   Wird von JEDER Seite geladen.
   ========================================================================== */

/* ==========================================================================
   SCROLL-FORTSCHRITT
   ========================================================================== */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:2px; background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 12px rgba(255,232,61,.7);
  transition:width .1s linear;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.1rem var(--gutter);
  transition:padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-stuck{
  padding:.55rem var(--gutter);
  background:rgba(7,15,13,.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}

.header__inner{
  width:min(100%, var(--shell));
  margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
}

/* --- Logo ---------------------------------------------------------------- */
.brand{
  display:flex; align-items:center; gap:.75rem;
  margin-right:auto;
  transition:filter .3s var(--ease);
}
.brand:hover{ filter:drop-shadow(0 0 14px rgba(53,242,207,.5)); }
.brand__mark{ width:52px; height:52px; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__text strong{
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; letter-spacing:.22em;
}
.brand__text small{
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent-2); margin-top:.35rem;
}

/* --- Desktop-Navigation --------------------------------------------------- */
.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__item{ position:relative; }

.nav__link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.85rem 1.05rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim);
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute; left:1.05rem; right:1.05rem; bottom:.45rem;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  box-shadow:var(--glow-y);
  transition:transform .3s var(--ease);
}
.nav__link:hover,
.nav__link.is-active{ color:var(--text); }
.nav__link.is-active{ color:var(--accent); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }

.chev{
  width:9px; height:6px; fill:none;
  stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.nav__item.is-open > .nav__link .chev{ transform:rotate(180deg); }

/* --- Dropdown ------------------------------------------------------------- */
.subnav{
  position:absolute; top:100%; left:0;
  min-width:220px;
  padding:.5rem;
  background:rgba(11,26,22,.96);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item.is-open > .subnav,
.nav__item:hover > .subnav{
  opacity:1; visibility:visible; transform:translateY(0);
}
.subnav a{
  display:block;
  padding:.6rem .9rem;
  font-size:.8rem; color:var(--text-dim);
  border-left:2px solid transparent;
  transition:all .22s var(--ease);
}
.subnav a:hover{
  color:var(--accent);
  border-left-color:var(--accent);
  background:rgba(255,232,61,.07);
  padding-left:1.15rem;
}

/* --- Burger --------------------------------------------------------------- */
.burger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.burger span{
  display:block; width:24px; height:2px;
  background:var(--text);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   MOBILE-MENÜ
   ========================================================================== */
.mmenu{ position:fixed; inset:0; z-index:110; }
.mmenu[hidden]{ display:none; }

.mmenu__backdrop{
  position:absolute; inset:0;
  background:rgba(3,8,7,.72);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease);
}
.mmenu.is-open .mmenu__backdrop{ opacity:1; }

.mmenu__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(88vw, 380px);
  padding:5.5rem 2rem 2.5rem;
  overflow-y:auto;
  background:linear-gradient(160deg, #0f231e, #081411 70%);
  border-left:1px solid var(--line-strong);
  box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .42s var(--ease);
}
.mmenu.is-open .mmenu__panel{ transform:translateX(0); }

.mmenu__close{
  position:absolute; top:1.5rem; right:1.5rem;
  width:44px; height:44px;
  display:grid; place-items:center;
  color:var(--accent);
}
.mmenu__close svg{
  width:26px; height:26px; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round;
  transition:transform .3s var(--ease);
}
.mmenu__close:hover svg{ transform:rotate(90deg); }

.mmenu__nav > ul > li{ border-bottom:1px solid rgba(140,255,214,.09); }
.mmenu__nav a,
.mmenu__toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:1rem 0;
  font-family:var(--font-display); font-weight:600;
  font-size:.95rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.mmenu__nav a:hover,
.mmenu__toggle:hover{ color:var(--accent); padding-left:.5rem; }
.mmenu__nav a.is-active{ color:var(--accent); }
.mmenu__toggle .chev{ width:12px; height:8px; }
.mmenu__toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.mmenu__sub{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.mmenu__sub > *{ overflow:hidden; }
.mmenu__toggle[aria-expanded="true"] + .mmenu__sub{ grid-template-rows:1fr; }
.mmenu__sub li{ overflow:hidden; }
.mmenu__sub a{
  padding:.5rem 0 .5rem 1.1rem;
  /* Gewicht mit zurücksetzen — sonst erbt es die 600 der Hauptpunkte,
     die es in der Mono-Schrift gar nicht gibt */
  font-family:var(--font-body); font-weight:500; font-size:.85rem;
  letter-spacing:.02em; text-transform:none;
  border-left:1px solid var(--line);
  margin-left:.2rem;
}
.mmenu__sub li:last-child a{ padding-bottom:1rem; }

.mmenu__meta{ margin-top:2.5rem; display:grid; gap:1rem; }
.mmenu__contact{
  display:flex; align-items:center; gap:.75rem;
  font-size:.85rem; color:var(--text-dim);
  transition:color .25s var(--ease);
}
.mmenu__contact:hover{ color:var(--accent-2); }
.mmenu__contact svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

.mmenu__social{ display:flex; gap:.75rem; margin-top:.5rem; }
.mmenu__social a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.mmenu__social a:hover{ background:rgba(53,242,207,.12); border-color:var(--accent-2); }
.mmenu__social svg{
  width:18px; height:18px;
  fill:none; stroke:var(--text); stroke-width:1.6;
}
.mmenu__social a:first-child svg{ fill:var(--text); stroke:none; }

.mmenu__cta{ margin-top:1rem; justify-self:start; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  padding-top:clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(180deg, transparent, rgba(53,242,207,.05)),
    var(--bg);
  border-top:1px solid var(--line);
}
.site-footer::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:min(520px, 70%); height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:var(--glow-y);
}

.footer__inner{
  display:grid;
  grid-template-columns:1.4fr .8fr 1.2fr 1fr;
  gap:clamp(2rem, 4vw, 3.5rem);
  padding-bottom:3.5rem;
}

.footer__brand img{ width:64px; height:64px; margin-bottom:1.25rem; }
.footer__brand p{
  font-size:.8rem; color:var(--text-mute);
  max-width:30ch; line-height:1.9;
}

.footer__col h5{
  font-size:.7rem; letter-spacing:.24em;
  color:var(--accent);
  margin-bottom:1rem;
}
.footer__col h5 + .footer__big + h5{ margin-top:1.75rem; }

.footer__links li + li{ margin-top:.7rem; }
.footer__links a{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.85rem; color:var(--text-dim);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.footer__links a:hover{ color:var(--accent-2); transform:translateX(4px); }
.footer__links svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.6;
}
.footer__links li:first-child svg{ fill:currentColor; stroke:none; }

.footer__big{
  display:block;
  font-size:1rem; color:var(--text);
  letter-spacing:.02em; line-height:1.7;
  transition:color .25s var(--ease);
}
a.footer__big:hover{ color:var(--accent); }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  padding:1.4rem 0;
  border-top:1px solid rgba(140,255,214,.09);
  color:var(--text-mute); font-size:.75rem;
}
.footer__legal{ display:flex; gap:1.5rem; }
.footer__legal a{ transition:color .25s var(--ease); }
.footer__legal a:hover{ color:var(--accent); }

/* ==========================================================================
   SEITENKOPF  (Unterseiten)
   ========================================================================== */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
  overflow:hidden;
  isolation:isolate;
}
.page-hero__grid{
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(53,242,207,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,242,207,.07) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 90% at 30% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%, #000 30%, transparent 80%);
}
.page-hero__glow{
  position:absolute; z-index:-1; pointer-events:none;
  width:46vw; height:46vw; right:-12vw; top:-16vh;
  border-radius:50%; filter:blur(100px);
  background:radial-gradient(circle, rgba(255,232,61,.20), transparent 68%);
  animation:pageGlowFloat 16s ease-in-out infinite alternate;
}
@keyframes pageGlowFloat{ to{ transform:translate3d(-4vw, 4vh, 0) scale(1.1); } }

.page-hero__title{
  font-size:clamp(2.1rem, 5.6vw, 4.6rem);
  line-height:1.02;
  margin-top:.3rem;
}

/* ==========================================================================
   PANEL-SEKTION  (abgerundeter Block, der den Seitenkopf abschließt)
   ========================================================================== */
.section--panel{
  position:relative;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:
    radial-gradient(90% 60% at 15% 0%, rgba(53,242,207,.07), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg) 85%);
  border-top:1px solid var(--line);
}
@media (max-width: 900px){
  .section--panel{ border-radius:28px 28px 0 0; }
}

/* ==========================================================================
   RASTER-SEKTION  (Abschnitt mit Millimeterpapier-Hintergrund)
   ========================================================================== */
.section--grid{
  background:
    linear-gradient(180deg, rgba(11,26,22,.85), rgba(7,15,13,1)),
    repeating-linear-gradient(0deg, rgba(53,242,207,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(53,242,207,.05) 0 1px, transparent 1px 46px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ==========================================================================
   ICON-KARTEN  (Raster aus Karten mit Icon, Titel, Text)
   ========================================================================== */
.cardgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(1.25rem, 3vw, 2rem);
  margin-top:2.5rem;
}
.icard{
  position:relative;
  padding:clamp(1.5rem, 3vw, 2.1rem);
  background:linear-gradient(165deg, var(--panel-2), rgba(11,26,22,.65));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.icard:hover{ transform:translateY(-5px); border-color:var(--accent-2); }
.icard__icon{
  width:34px; height:34px; margin-bottom:1.1rem;
  fill:none; stroke:var(--accent-2); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(53,242,207,.4));
}
.icard h3{ font-size:1rem; margin-bottom:.7rem; }
.icard p{ font-size:.79rem; color:var(--text-mute); }

/* ==========================================================================
   VERGLEICHSTABELLE
   ========================================================================== */
.table-scroll{
  overflow-x:auto;
  margin-top:2.5rem;
  border:1px solid var(--line);
  background:rgba(7,15,13,.6);
}
.compare{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.8rem;
}
.compare th,
.compare td{
  padding:1rem 1.15rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.compare thead th{
  font-family:var(--font-display); font-weight:700;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(17,39,34,.85);
  white-space:nowrap;
}
.compare tbody th{
  font-family:var(--font-display); font-weight:600;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
}
.compare td{ color:var(--text-dim); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td{ border-bottom:0; }
.compare tbody tr{ transition:background .25s var(--ease); }
.compare tbody tr:hover{ background:rgba(53,242,207,.05); }

/* ==========================================================================
   TRENNER MIT PLAKETTE
   ========================================================================== */
.divider-badge{
  position:relative;
  display:flex; justify-content:center;
  margin:clamp(2.5rem, 6vw, 4.5rem) 0;
}
.divider-badge::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.55;
}
.divider-badge span{
  position:relative;
  padding:.55rem 1.5rem;
  font-family:var(--font-display); font-weight:700;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#0a1512;
  background:linear-gradient(135deg, var(--accent-soft), var(--accent));
  clip-path:var(--hex);
  filter:drop-shadow(0 0 14px rgba(255,232,61,.5));
}

/* ==========================================================================
   CTA-BAND  (auf mehreren Seiten im Einsatz)
   ========================================================================== */
.cta-band{
  padding:clamp(3rem, 6vw, 5rem) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255,232,61,.10), transparent 65%),
    var(--bg);
}
.cta-band__inner{
  display:flex; flex-wrap:wrap; gap:2rem;
  align-items:center; justify-content:space-between;
  padding:clamp(2rem, 4vw, 3rem);
  background:linear-gradient(120deg, var(--panel-2), rgba(13,31,26,.6));
  border:1px solid var(--line-strong);
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
}
.cta-band h2{ font-size:clamp(1.4rem, 2.8vw, 2.2rem); margin-bottom:.6rem; }
.cta-band p{ color:var(--text-dim); font-size:.86rem; max-width:48ch; }

@media (max-width: 900px){
  .cta-band__inner{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   BILDRAHMEN  (mit Platzhalter, solange das Foto fehlt)
   ========================================================================== */
/* Platzhalter und Bild liegen in derselben Grid-Zelle: Der Platz ist damit
   immer reserviert — egal ob die Bilddatei schon existiert oder nicht. */
.shot{
  display:grid;
  grid-template-rows:auto auto;
  --shot-cut: polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%,0 30px);
}
.shot::before{
  content:attr(data-file);
  grid-area:1 / 1;
  display:grid; place-items:center;
  aspect-ratio:var(--shot-ratio, 4/3);
  padding:1rem;
  background:
    radial-gradient(70% 70% at 50% 40%, rgba(53,242,207,.14), transparent 70%),
    linear-gradient(140deg, var(--panel-2), var(--bg));
  clip-path:var(--shot-cut);
  color:var(--text-mute); font-size:.7rem; letter-spacing:.08em;
  text-align:center;
}
.shot img{
  grid-area:1 / 1;
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:cover;
  clip-path:var(--shot-cut);
}
.shot figcaption{
  grid-area:2 / 1;
  margin-top:.9rem;
  font-size:.72rem; letter-spacing:.08em;
  color:var(--text-mute);
}

/* ==========================================================================
   NACH-OBEN-BUTTON
   ========================================================================== */
.to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:48px; height:48px;
  display:grid; place-items:center;
  background:rgba(11,26,22,.85);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:all .3s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent); color:#0a1512; }
.to-top svg{
  width:20px; height:20px; fill:none;
  stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px){
  .nav__link{ padding:.85rem .75rem; font-size:.72rem; }
  .brand__text small{ display:none; }
}

@media (max-width: 900px){
  :root{ --header-h: 72px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__cta{ display:none; }
  .site-header{ padding:.75rem var(--gutter); background:rgba(7,15,13,.6); backdrop-filter:blur(12px); }
  .brand__mark{ width:44px; height:44px; }
  .brand__text strong{ font-size:.9rem; }

  .footer__inner{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 560px){
  .footer__inner{ grid-template-columns:1fr; }
  .footer__bottom{ justify-content:center; text-align:center; }
  .to-top{ right:1rem; bottom:1rem; }
}