/* 🌑 BODY */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@font-face {
  font-family: 'PT Sans';
  src: url('/PT_Sans/PTSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
    overflow-y: visible;
    overflow-x: hidden;
    background-color: #101010;
    margin: 0;
    padding: 0;
    font-family: 'PT Sans', sans-serif;
    font-weight: 200;
}



.hero, .circle, .parallax-container, .about-me, .contact-section, .recent-work-section {
  overflow-x: hidden;
  max-width: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
  }
  
  /* Das Pseudoelement für das Pixelraster */
  .pixel-overlay {
    display: none;
    content: "";
    position: fixed; 
    inset: 0;        
    pointer-events: none; 
    z-index: 9999;        
    background: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 2px 2px repeat; 
  }
  @media (max-width: 750px) {
    .pixel-overlay {
      display: none;
  }
}
  /* Optional: Keyframes für eine leichte Bewegung */
  @keyframes drift {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 0 200px; /* oder diagonal: 200px 200px */
    }
  }

/* ✅ HEADER */
header {
    width: 100%;
    max-width: 100%;
    text-align: center;
    background: transparent;
}

/* ===================== Desktop: Standard ===================== */
  .nav {
    position: relative;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 97% !important;
    width: 95%;
    padding: 15px;
    z-index: 1000;
    display: flex;
    background: transparent;
  }

  .nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 6%;
    width: 88%;
    height: 0px;
    background-color: rgba(255, 255, 255, 0.1); /* halbtransparent weiß */
  }
  
  /* Logo links */
  .logo-header {
    position: fixed;
    margin-left: 7%;
    margin-top: -10px;
    height: 45px;
    width: auto;
  }
  
  /* Links (Desktop: sichtbar) */
  .nav-links {
    position: relative;
    left: 13%;
    top: 9%;
    list-style: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
  }
  
  /* Einzelne Links */
  .nav-links li a {
    color: #d4d4d4;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 400;
    padding: 0px 15px;
    transition: color 0.3s ease;
  }
  
  /* Hover-Effekt */
  .nav-links li a:hover {
    color: rgb(170, 225, 255, 0.8);
  }



  /* ===== Desktop: fixed header + auto-hide ===== */
@media (min-width: 901px) {
  :root { --hdr-h: 80px; }     /* will be updated by JS to your real header height */

  header {
    position: fixed;           /* fixed beats sticky issues with transformed parents */
    inset: 0 0 auto 0;         /* top:0; left:0; right:0 */
    z-index: 5000;
    transform: translateY(0);
    transition: transform .35s ease, opacity .25s ease;
    will-change: transform, opacity;
  }

  /* Push page content down by header height to avoid layout jump */
  body { padding-top: var(--hdr-h); }

  /* Hide when scrolling down */
  header.nav-hide {
    transform: translateY(calc(-1 * var(--hdr-h) - 10px));
    opacity: 0;
    pointer-events: none;
  }

  /* Your fixed logo should also fade while hidden */
  header.nav-hide .logo-header {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: transform .35s ease, opacity .25s ease;
  }
}

/* Mobile: keep header normal & always visible */
@media (max-width: 900px) {
  header { position: relative; transform: none !important; opacity: 1 !important; }
}
  /* Generator - Button */

.nav-badge {
  position: absolute;
  font-size: 0.5rem;         /* etwas größer als 0.35rem */
  white-space: nowrap;       /* verhindert Zeilenumbruch */
  margin-left: 6px;
  bottom: 10px;
  padding: 2px 8px;          /* mehr Platz links/rechts */
  border-radius: 6px;
  background: rgba(59,130,246,0.15); 
  color: #88a4bb; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(59,130,246,0.6);
}

  .nav-social-container {
    position: fixed;
    right: 18%;
    top: 5px;
    display: flex;
    align-items: center;
    gap: 22px;
    z-index: 1000;
  }

  .whatsapp-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 200 !important;
    backdrop-filter: blur(4px);
    transition: background 0.3s ease;
  }
  
  .whatsapp-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
  
  .whatsapp-button img {
    width: 28px;
    height: 28px;
    filter: brightness(1.3);
  }
  
  .whatsapp-button .faded {
    opacity: 0.4;
  }
  .nav-social {
    position: fixed;
    right: 8%;
    top: 47%;
    transform: translateY(-50%);
    opacity: 0.8;
    display: flex;
    flex-direction: row;
    gap: 18px;
    z-index: 1000;
  }
  
  .nav-social a img {
    width: 25px;
    height: auto;
    filter: brightness(1) contrast(1);
    transition: filter 0.3s ease;
  }
  
  .nav-social a:hover img {
    filter: brightness(1.3) contrast(1.2);
  }
  
  .hamburger {
    display: none;
  }
  @media (min-width: 1201px) {
    .nav-mobile-title {
      display: none;
    }
  }
  
  /* ===================== Mobile (max-width: 900px) ===================== */
  @media (max-width: 900px) {
    .nav {
      position: relative;
      width: 100%;
      max-width: 95%;
      justify-content: space-between;
      padding: 10px 15px;
      flex-direction: row;
      overflow: visible;
    }

      .nav::after {
    content: "";
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 6%;
    width: 92%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* halbtransparent weiß */
  }

    .nav-links.active {
      display: flex;
      flex-direction: column;
    }
    
    .logo-header {
      position: relative;
      left: 5px;
      top: 12px;
      height: 45px;
      z-index: 100;
    }

    .nav-mobile-title {
      display: none;
      position: absolute;
      top: 10px;
      left: 50px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 300;
      z-index: 1000;
      pointer-events: none;
      letter-spacing: -0.8px; /* Buchstaben enger zusammenrücken */
      font-stretch: condensed; /* Falls vom Font unterstützt, schmaler zeichnen */
      line-height: 1.1; /* Geringere Zeilenhöhe */
      transform: scaleX(0.95) scaleY(1.05); /* etwas schmaler und höher skalieren */
    }

    .divider-background img.divider-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.15;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      pointer-events: none;
    }
  
      .hamburger {
        position: absolute;
        top: 19px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px; 
        height: 28px;
        background: transparent;
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        z-index: 1100;
        overflow: visible;
      }

    .hamburger .bar {
      position: relative;
      height: 1px;
      width: 25px;
      background-color: white;
      transform-origin: center;
      transition: all 0.3s ease;
      transition: transform 0.3s ease, opacity 0.3s ease;
      z-index: 1110; 
    }

    .hamburger:focus,
    .hamburger:active {
      outline: none;
      border: none;
      box-shadow: none;
    }
  
    .nav-links {
      display: none;
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 100%;
      width: 100%;
      height: 350px;
      flex-direction: column;
      justify-content: space-between;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 3px 0;
      padding-bottom: 30px;
      z-index: 10;
    }
  
    .nav-links.active {
      display: flex;
    }
    .hamburger.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(11px, 11px);
  background-color: #28b4ff;
}

.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  background-color: #28b4ff;
}

.hamburger.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -3px);
  background-color: #28b4ff;
}
  
    .nav-links li {
      position: relative;
      text-align: center;
      justify-content: space-between;
      margin: 8px 0;
      padding-top: 0px;
    }
    .nav-links li:first-child {
      margin-top: 70px;
    }
    .nav-links li a {
      font-size: 18px;
      font-weight: 400;
    }


  /* SOCIALS */
    .nav-social-container {
      position: absolute;
      top: 10px;
      right: 0px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      transform: none;
      scale: 0.8;
      z-index: 10;
    }
  
    .nav-social {
      position: relative;
      top: 0;
      right: 5px;
      transform: none;
      flex-direction: row;
      gap: 10px;
    }
  
    .whatsapp-button {
      position: relative;
      padding: 3px 12px;
      margin-top: 30px;
      font-size: 12px;
      right: 2px;
    }
  
    .whatsapp-button img {
      width: 20px;
      height: 20px;
    }
  }








/* ✅ MAIN-BEREICH */


main {
    display: block; /* Flex entfernen, um alle Sektionen frei positionierbar zu machen */
    min-height: 100vh; 
    text-align: center;
}

/* Glow-Bubble */
.colorb{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-40%); /* leicht oberhalb der Mitte */
  width: min(70vw, 600px);   
  max-width: 100% !important;      /* responsive statt fester 800px */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(83,83,83,0.20);
  filter: blur(90px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: -2;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: visible;
}

/* ✅ Hero-Bereich (Startbereich) */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 10vh, 140px) 5vw;
  background: transparent;
  isolation: isolate;
}

/* Hintergrund-Raster (Hero) */
.hero-grid{
  position: absolute;
  inset: 0;
  z-index: -2;                 /* unter Blur, aber innerhalb des Hero */
  pointer-events: none;

  /* feines Grid wie im Referenzshot */
  --c: rgba(255, 255, 255, 0.036);
  background:
    repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 30px);

  /* Seiten-Fade + leichte Vignette */
  mask:
    linear-gradient(90deg, transparent 0 6%, #000 14% 86%, transparent 100%),
    radial-gradient(160% 100% at 50% 45%, #000 60%, transparent 100%);
  opacity: .25;
}


/* Inhalt */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
  text-align: center;

}

.animated-label {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(240,240,240,.85);
  letter-spacing: .5px;
  margin-bottom: 0px;
}

.animated-text {
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
}

.animated-text2 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  color: rgba(220,220,220,.85);
  margin-bottom: 30px;
}

/* Buttons mittig */
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 14px;
}

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #eee;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  transition: all .3s ease;
}

.btn:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

/* Hint unter Buttons */
.hero-hint {
  margin-top: 12px;
  color: rgba(230,230,230,.7);
  font-family: monospace;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 750px) {

  .animated-label {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 300;
  color: rgba(240,240,240,.85);
  letter-spacing: .5px;
  margin-bottom: 0px;
}

  .colorb{
    transform: translate(-50%,-35%);
    width: 250px;
    height: 250px;
    filter: blur(60px);
    overflow: visible !important;

  }

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  margin-bottom: 25%;
}

 .hero::before{
    width: 120vw;
    height: 120vw;
    top: 45%;
    transform: translate(-50%, -50%);
  }

  .animated-text {
    font-size: 35px;
  }
  .animated-text2 {
    font-size: 15px;
  }
  .hero-actions {
    display: none;
    font-size: 10px;
  }
}




/* ✅ Animierter Button */
.cta-button {
    display: block;
    position: absolute;
    top: 37%;
    left: 80%;
    width: 150px; /* Etwas größer für bessere Balance */
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 255, 255, 0.0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.0);
    border: 1px solid rgba(211, 211, 211, 0.0);
    border-radius: 50%;
    z-index: 100;
}

/* ✅ Farb- und Glow-Einstellungen */
:root {
    --blur-color: rgba(50, 50, 50, 0.4);  /* Dunkler Grauton mit leichtem Türkis */
    --text-color: rgba(255, 255, 255, 1); /* Weiß für maximale Lesbarkeit */
    --text-glow: rgba(0, 255, 255, 0.6);  /* Türkisfarbener Glow */
}

/* ✅ Farbklecks mit sanftem Farbverlauf */
.cta-blur {
    display: none;
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--blur-color) 20%, rgba(0, 0, 0, 0) 90%);
    filter: blur(25px);
}

/* ✅ Rotierender SVG-Text */
.rotating-text {
  display: none;
    position: absolute;
    width: 150px;
    height: 150px;
    animation: rotateText 9s linear infinite;
    overflow: visible;
}

/* ✅ SVG-Text Styling */
.rotating-text text {
    font-size: 13px;
    fill: var(--text-color);
    font-weight: thin;
    letter-spacing: 5px;
    text-shadow: 0 0 0px var(--text-glow);
    z-index: 5;
}

/* ✅ Animation für das Drehen des Texts */
@keyframes rotateText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ✅ Logo mittig setzen */
.cta-logo img {
  display: none;
    width: 55px !important;
    height: auto;
    z-index: 4;
}

@media (max-width: 1200px) and (min-width: 751px) {
  .cta-button {
    position: fixed;
    bottom: 45px;
    right: 20px;
    width: 50px;
    height: 50px;
    top: auto;
    left: auto;
    background: rgba(0, 149, 255, 0.0);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.0);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 9999999 !important;
  }

  .cta-blur {
    width: 160px;
    height: 160px;
    filter: blur(20px);
  }

  .rotating-text {
    display: block;
    width: 100px;
    height: 100px;
  }

  .cta-logo img {
    width: 20px !important;
    height: auto;
  }
}




/* ===================== Mobile (max-width: 600px) ===================== */
@media (max-width: 750px) {
  .cta-button {
    position: fixed;
    bottom: 45px;
    right: 20px;
    width: 50px;
    height: 50px;
    top: auto;
    left: auto;
    background: rgba(85, 85, 85, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.0);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 9999999 !important;
  }

  .cta-logo img {
  display: block;
    width: 20px !important;
    height: auto;
    z-index: 4;
}

  .cta-blur {
    display: none;
    width: 90px;
    height: 90px;
    filter: blur(12px);
  }

  .rotating-text {
    display: none;
  }
}

.mobile-divider-section {
  display: none;

}



/* Nur für Mobilgeräte */
@media (max-width: 750px) {
  .mobile-divider-section {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    background: #131212;
    overflow: hidden;
    margin-top: -150px; /* optional, um sich an voriger Sektion anzugleichen */
    z-index: 5;
  }

  .divider-line-top,
.divider-line-bottom {
  position: absolute;
}

  .divider-line-top {
    top: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
  }

  .divider-line-bottom {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    bottom: 0;
    left: 0;
  }

  .divider-content {
    position: relative;
    height: 100%;
    display: flex;
    margin-top: 5%;;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .divider-background {
    position: absolute;
    background-color: #131212;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }

.divider-text-wrapper {
  position: relative;
  text-align: left;
  padding: 0 24px;
  z-index: 3;
}
  
.divider-subheading {
  font-size: 12px;
  font-weight: 300;
  color: rgba(149, 209, 255, 0.5);
  margin-bottom: 8px;
  margin-top: 0;
}

.divider-text {
  font-size: 20px;
  font-weight: 400;
  color: #edededd3;
  margin-bottom: 8px;
  line-height: 1.4;
}

.divider-text-wrapper {
  max-width: 500px;
  margin-left: 10%;
  margin-right: auto;
  padding: 10px 0;
  line-height: 1.5;
}

.divider-text-wrapper h2,
.divider-text-wrapper p,
.divider-text-wrapper a {
  text-align: left;
}

.divider-description {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
  line-height: 1.6;
}

  .github-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    transition: color 0.3s ease;
    margin-bottom: 40px;
  }
  .github-link:hover {
    color: #ffffff;
  }
}

/* section-two */

/* ===== section-two base ===== */
.section-two{
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --chip-bg: rgba(255,255,255,.06);
  --chip-fg: rgba(230,235,240,.9);
  --fade-bg: #0b0b0b;               /* page bg color behind fades */
  position: relative;
  isolation: isolate;
  padding: clamp(60px,6vw,100px) 6vw;
  overflow: hidden;
}

/* dashed rack/grid in the back */
.section-two .rack-bg{
  position:absolute; inset:0;
  z-index:-2;
  /* fine dashed grid */
  --c: rgba(255,255,255,.06);
  background:
    repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 28px);
  mask:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    radial-gradient(150% 80% at 50% 50%, #000 65%, transparent 100%);
  mask-composite: intersect;
  opacity:.0;
}

/* rails layer (dashed lines with end fades) */
.section-two .rails{
  position:absolute; inset:0;
  z-index:-1; /* sit in front of grid, behind content */
  pointer-events:none;
}

.section-two .rail{
  position:absolute; left:0; right:0; height:2px;
  top: 22%;
}
.section-two .rail-bottom{ top:auto; bottom: 18%; }

/* dashed line + end-fade via mask */
.section-two .rail::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, var(--line) 0 48px, transparent 48px 96px);
  /* fade out at edges */
  -webkit-mask: linear-gradient(90deg, transparent 0 3%, #000 10% 90%, transparent 97% 100%);
          mask: linear-gradient(90deg, transparent 0 3%, #000 10% 90%, transparent 97% 100%);
}

/* accent stronger center guide (optional, super subtle) */
.section-two .rail::after{
  content:""; position:absolute; inset:auto 10% auto 10%; height:2px; top:0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  opacity:.22;
}

/* small anchor circles on the rails */
.section-two .rail .node{
  position:absolute; top:50%; translate:0 -50%;
  width:10px; height:10px; border-radius:50%;
  background: var(--line-strong);
  box-shadow: 0 0 0 6px rgba(255,255,255,.05);
}

/* content layout */
.section-two__inner{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}

.section-two__copy{ text-align:left; }
.section-two .eyebrow{
  margin:0 0 .6rem 0; font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(200,240,255,.85);
}
.section-two .headline{
  margin:0 0 1rem 0; font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); 
  line-height:1.15; color:#fff; font-weight:600;
}
.section-two .lede{
  margin:0 0 1.2rem 0; color:rgba(201, 201, 201, 0.85); font-size:clamp(1rem, .4vw + .9rem, 1.2rem);
}

/* chips */
.section-two .chips{
  display:flex; 
  flex-wrap:wrap; 
  gap:8px 10px; 
  padding:0; 
  margin:0 0 1.3rem 0; 
  list-style:none;
}

.section-two .chips li{
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  /* Visuelle Basis NICHT hier setzen – damit die per‑Chip Farben greifen */
}
/* base chip stays as-is; we’ll just allow per-chip colors */
.chips .chip{
  --tint: 200 220 255;
  --alpha-bg: .30;
  --alpha-brd: .30;
  --alpha-glow: .30;
  background: linear-gradient(180deg,
              rgba(var(--tint) / var(--alpha-bg)) 0%,
              rgba(255 255 255 / .04) 100%);
  border: 1px solid rgba(var(--tint) / var(--alpha-brd));
  color: #e9eef6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.chips .chip:hover{
  box-shadow:
    0 0 24px rgba(var(--tint) / var(--alpha-glow)),
    inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* per-chip tints (HSL-ish in RGB for wide support) */
.chip--starter   { --tint: 147 197 114; }  /* green */
.chip--ecom      { --tint: 56 189 248;  }  /* sky */
.chip--blog      { --tint: 250 204 21;  }  /* amber */
.chip--ai        { --tint: 99 102 241;  }  /* indigo */
.chip--portfolio { --tint: 236 72 153;  }  /* pink */
.chip--saas      { --tint: 34 197 94;   }  /* emerald */
.chip--multi     { --tint: 168 85 247;  }  /* violet */

/* --- chip color helpers -------------------------------------------------- */
/* 1) Allow data-variant or utility-style classes (works with <li class="chip" data-variant="ecom">) */
.section-two .chips .chip[data-variant="starter"],
.section-two .chips .chip.is-starter{ --tint: 147 197 114; }
.section-two .chips .chip[data-variant="ecom"],
.section-two .chips .chip.is-ecom{ --tint: 56 189 248; }
.section-two .chips .chip[data-variant="blog"],
.section-two .chips .chip.is-blog{ --tint: 250 204 21; }
.section-two .chips .chip[data-variant="ai"],
.section-two .chips .chip.is-ai{ --tint: 99 102 241; }
.section-two .chips .chip[data-variant="portfolio"],
.section-two .chips .chip.is-portfolio{ --tint: 236 72 153; }
.section-two .chips .chip[data-variant="saas"],
.section-two .chips .chip.is-saas{ --tint: 34 197 94; }
.section-two .chips .chip[data-variant="multi"],
.section-two .chips .chip.is-multi{ --tint: 168 85 247; }

/* 2) Fallback: tint by order if no variant provided */
.section-two .chips .chip:nth-child(1){ --tint: 147 197 114; }
.section-two .chips .chip:nth-child(2){ --tint: 56 189 248; }
.section-two .chips .chip:nth-child(3){ --tint: 250 204 21; }
.section-two .chips .chip:nth-child(4){ --tint: 99 102 241; }
.section-two .chips .chip:nth-child(5){ --tint: 236 72 153; }
.section-two .chips .chip:nth-child(6){ --tint: 34 197 94; }
.section-two .chips .chip:nth-child(7){ --tint: 168 85 247; }

/* optional: slightly stronger text contrast for yellow/amber chips */
.chip--blog{ color: #111; background:
  linear-gradient(180deg, rgba(var(--tint)/.22), rgba(255 255 255 / .06)); }

/* button */
.section-two .button{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:10px; color:#eaeaea; text-decoration:none;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
}
.section-two .button.ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  background: linear-gradient(90deg, rgba(120,180,255,.12), rgba(139,92,246,.10));
}
.section-two .button .icon{ width:18px; height:18px; }

/* media/cards */
.section-two__media{
  position:relative; height:min(480px, 40vw);
}
.section-two__media .card{
  position:absolute; inset:auto; right:0; bottom:0;
  width:min(480px, 46vw); aspect-ratio: 4/3; 
  border-radius:6px;
  background: #101010; overflow:hidden; 
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform-origin: 80% 90%;
}
.section-two__media .card img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.95; }

/* staggered fan */
.card-1{ transform: rotate(-7deg) translate(10px, -20px); z-index:1; opacity:.85;}
.card-2{ transform: rotate(-2deg) translate(0, -10px); z-index:2; }
.card-3{ transform: rotate(6deg) translate(30px, 20px); z-index:3; }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .section-two__media{ height: 44vw; }
}
@media (max-width: 860px){

  /* ===== section-two base ===== */
.section-two{
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --chip-bg: rgba(255,255,255,.06);
  --chip-fg: rgba(230,235,240,.9);
  --fade-bg: #0b0b0b;               /* page bg color behind fades */
  position: relative;
  isolation: isolate;
  padding: clamp(60px,6vw,100px) 6vw;
  overflow: hidden;
  margin-top: 7%;
}

/* dashed rack/grid in the back */
.section-two .rack-bg{
  position:absolute; inset:0;
  z-index:-2;
  /* fine dashed grid */
  --c: rgba(255,255,255,.06);
  background:
    repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 28px);
  mask:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    radial-gradient(150% 80% at 50% 50%, #000 65%, transparent 100%);
  mask-composite: intersect;
  opacity:.6;
}

/* rails layer (dashed lines with end fades) */
.section-two .rails{
  position:absolute; inset:0;
  z-index:-1; /* sit in front of grid, behind content */
  pointer-events:none;
}

.section-two .rail{
  position:absolute; left:0; right:0; height:2px;
  top: 22%;
}
.section-two .rail-bottom{ top:auto; bottom: 18%; }

  .section-two__inner{ 
  grid-template-columns: 1fr;
  display:grid;
  margin-top: 1%;
}

.section-two .eyebrow{
  margin:0 0 .6rem 0; 
  font-size:.7rem; 
  letter-spacing:.16em; 
  text-transform:uppercase;
  color:rgba(200,240,255,.85);
}

.section-two .headline{
  margin:0 0 1rem 0; 
  font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); 
  line-height:1.15; 
  color:#fff; 
  font-weight:600;
  margin-bottom: 12%;
}
  .section-two__media{
    order: 2; 
    height: 56vw; 
    margin-top: -50px;
  }

  .section-two__media .card{
  position:absolute; inset:auto; right:0; bottom:0;
  width:min(480px, 46vw); aspect-ratio: 4/3; 
  border-radius:6px;
  background: #101010; overflow:hidden; 
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform-origin: 80% 90%;
}

.section-two__media .card img{ 
  width:105%; 
  height:120%; 
  object-fit:cover; 
  display:block; 
  opacity:.95;
  transform: translate(-2.5%, -2.5%);
}



  .section-two__copy{ order: 1; }
  .card-1{ transform: rotate(-6deg) translate(-4%, -6%); }
  .card-2{ transform: rotate(-1deg) translate(0, 0); }
  .card-3{ transform: rotate(5deg) translate(4%, 6%); }
  .section-two .rail-top{ top: 18%; }
  .section-two .rail-bottom{ bottom: 14%; }
}
@media (max-width: 560px){
  .section-two{ padding: 48px 5vw; }
  .section-two__media{ height: 62vw; }
  .section-two .chips li{ font-size:.72rem; padding:5px 9px; }
  .section-two .button{ padding:10px 14px; }
}





/* SECTION FOUR TEST */

:root{
  --hg-cell-w: 440px;
  --hg-cell-h: 240px;
  --hg-line: rgba(255,255,255,.08);
  --hg-line-strong: rgba(255,255,255,.14);
}

/* Hero-Section */
.hg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 10vw, 140px) 0;
  min-height: 40vh;
  color: #eef1f6;
  text-align: center;
  margin-top: -5%;
  margin-bottom: -5%;
}

/* Grid-Ebene jetzt neutral, Background ist inline im <section> */
.hg-grid{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: none; /* kein vollflächiges Grid mehr */
}

/* Optional: dezent einzelne Referenzlinien */
.hg-grid::before,
.hg-grid::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}

.hg-grid::before{
  background:
    linear-gradient(to bottom,
      transparent calc(38% - 1px),
      var(--hg-line-strong),
      transparent calc(38% + 1px)
    );
  opacity:.6;
  mask: linear-gradient(90deg, transparent 0 6%, #000 12% 88%, transparent 100%);
}

.hg-grid::after{
  background:
    linear-gradient(to right,
      transparent calc(50% - 1px),
      var(--hg-line-strong),
      transparent calc(50% + 1px)
    );
  opacity:.35;
  mask: linear-gradient(180deg, transparent 0 8%, #000 18% 100%);
}

/* Inhalte */
.hg .hg-wrap {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.hg .hg-title {
  font-size: clamp(30px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 clamp(16px, 3vw, 24px);
}

.hg .hg-sub {
  max-width: 880px;
  margin: 0 auto clamp(24px, 4vw, 36px);
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.5;
  color: rgba(210, 210, 210, 0.88);
}
.hg .hg-sub strong { color:#fff; font-weight:800; }

/* CTA */
.hg .hg-cta {
  display: none;
  gap: 14px;
  margin-bottom: clamp(18px, 3vw, 26px);
}
.hg .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
.hg .btn--primary {
  background:#fff; color:#0b0b0d;
}
.hg .btn--primary:hover { transform: translateY(-1px); }
.hg .btn--ghost {
  background: rgba(255,255,255,.08);
  color: #eef1f6;
  border: 1px solid rgba(255,255,255,.16);
}
.hg .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Untere Hint-Zeile */
.hg .hg-hint {
  margin-top: 12px;
  color: rgba(238,241,246,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
}
.hg .triangle { color:#8bdcff; margin-right:6px; }

/* Responsive Anpassung */
@media (max-width: 920px){
  :root{
    --hg-cell-w: 320px;
    --hg-cell-h: 200px;
  }
}
@media (max-width: 600px){
  :root{
    --hg-cell-w: 260px;
    --hg-cell-h: 180px;
  }
}


/* ====== Section Three (Powered) – FINAL ====== */
.section-three.powered{
  --wrap: min(1200px, 92vw);
  --card-bg-a: rgba(16,16,18,.9);
  --card-bg-b: rgba(10,10,12,.86);
  --card-brd: rgba(255,255,255,.12);
  --grid-c: rgba(255,255,255,.06); 
  position: relative;
  padding: clamp(32px, 4vw, 60px) 0;
  color:#e9ecf2;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 2%;
  margin-top: 2%;
}


/* Container bleibt full-bleed, zeichnet selbst aber nichts */
.section-three.powered .s3-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}



/* Falls noch vorhanden: altes Unter‑Raster hart deaktivieren */
.section-three.powered .s3-grid--bottom-left{ display:none !important; }

/* dezente „Atmung“ der Ringe (optional) */
@media (prefers-reduced-motion: no-preference){
  .section-three.powered .s3-grid{
    animation:s3-rings-drift 22s linear infinite;
  }
  @keyframes s3-rings-drift{
    0%   { background-size:100% 100%; opacity:.28; }
    50%  { background-size:102% 102%; opacity:.30; }
    100% { background-size:100% 100%; opacity:.28; }
  }
}

/* Inhalt über dem Hintergrund halten */
.section-three.powered .s3-wrap{
  max-width:var(--wrap);
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* ===== Chip oben mittig ===== */
.section-three.powered .s3-chip{
  position: relative;
  width: 220px;
  height: 60px;
  margin: 0 auto 100px;   /* extra Luft */
  font-size: 25px;
}
.section-three.powered .s3-chip-face{
  position:absolute; inset:0;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(30,30,40,.9), rgba(10,10,14,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 20px 60px rgba(0,0,0,.45);
  display:grid; place-items:center;
}

.section-three.powered .s3-chip .label{
  font-weight:800;
  font-size:35px;         /* Semikolon gefixt */
  letter-spacing:.4px;
  opacity:.92;
}

.section-three.powered .s3-chip .scan{
  position:absolute; inset:2px;
  background: linear-gradient(180deg, transparent 0 40%, rgba(80,160,255,.12) 50%, transparent 60% 100%);
  border-radius:10px;
  animation: chip-scan 4s linear infinite;
  pointer-events:none;
}
@keyframes chip-scan{
  0%{ transform: translateY(-120%); opacity:.0; }
  15%{ opacity:.7; }
  40%{ transform: translateY(0%); }
  60%{ transform: translateY(0%); }
  85%{ opacity:.0; }
  100%{ transform: translateY(120%); opacity:0; }
}

/* kleine Pins oben/unten */
.section-three.powered .pins{
  position:absolute; 
  left:50%; 
  width:230px; 
  translate:-50% 0;
  height:8px; 
  display:flex; 
  justify-content:space-between;
}
.section-three.powered .pins--t{ top:-8px; }
.section-three.powered .pins--b{ bottom:-8px; }
.section-three.powered .pins::before,
.section-three.powered .pins::after{
  content:""; width:18px; height:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border-radius:2px;
  filter:url(#soft);
}
.section-three.powered .pins{ gap:14px; }

/* ===== Kartenlayout ===== */
.section-three.powered .s3-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,2vw,24px);
  margin-top: 30px;
  position: relative;   /* Anker für evtl. Linien */
  overflow: visible;
}
.section-three.powered .card{
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 14px;
  border:1px solid var(--card-brd);
  background: linear-gradient(var(--angle,180deg), var(--card-bg-a), var(--card-bg-b));
  box-shadow: 0 16px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .22s ease, background .35s ease, border-color .22s ease;
  min-height: 150px;
  z-index: 1; /* über Hintergrund/Linien */
}
.section-three.powered .card:hover{
  --angle: 0deg;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}

/* kleiner farbiger Akzent am Rand (Andockpunkt) */
.section-three.powered .card::after{
  content:""; position:absolute; top:-1px;
  left: var(--attach, 50%); translate:-50% 0;
  width: 72px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent,#00c2ff), transparent);
  box-shadow: 0 0 12px var(--accent,#00c2ff);
}

/* Kopf / Logos / Texte */
.section-three.powered .card-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.section-three.powered .logo .svg{ width:28px; height:28px; display:block; }
.section-three.powered .title{ margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; }
.section-three.powered .copy{ margin:0; text-align:left; color:rgba(230,232,238,.86); font-size:14px; line-height:1.45; }

/* Bildlogos (Supabase/GitHub/VSC) */
.section-three .logo,
.section-three .logo-img{
  width: 30px;
  height: 30px;
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
}

/* Akzentfarben */
.section-three.powered .stamp--blue  { --accent:#00c2ff; }
.section-three.powered .stamp--pink  { --accent:#ff5bd1; }
.section-three.powered .stamp--amber { --accent:#ffc34d; }

/* ===== (optional) SVG‑Linien Styles – falls genutzt ===== */
.section-three.powered .s3-lines.debug{ outline:1px dashed rgba(255,0,0,.35); background:transparent; }
.section-three.powered .s3-lines path{ vector-effect: non-scaling-stroke; }
.section-three.powered .bus-line{
  fill:none; stroke:rgba(255,255,255,.34); stroke-width:2px;
  stroke-dasharray:8 12; opacity:.9;
}

.section-three.powered .flow{
  fill:none; stroke-width:3.5px; stroke-linecap:round;
  filter: drop-shadow(0 0 6px var(--flow, #64c8ff));
  stroke-dasharray:56 var(--gap,520);
  animation: s3-dash 3.6s linear infinite;
  animation-delay: var(--delay, 0s);
  opacity:.95;
}
@keyframes s3-dash{
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -576; }
}

/* ===== Mobile Polish ===== */
@media (max-width: 700px){
  .section-three.powered{ padding: clamp(36px, 8vw, 56px) 0; }
  .section-three.powered .s3-wrap{ max-width:980px; width:92vw; margin:0 auto; }

  .section-three.powered .s3-cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .section-three.powered .card{
    width: 92%;
    margin: 0 auto;
    min-height: 172px;
    padding: 20px 18px 22px;
  }
  .section-three.powered .card-head{ gap:12px; }
  .section-three.powered .logo-img{ width:22px; height:22px; object-fit:contain; }
  .section-three.powered .title{ font-size:17px; }
  .section-three.powered .copy{ font-size:14px; line-height:1.5; }

  .section-three.powered .s3-chip{ margin-bottom:14px; }

  /* Linien ggf. weicher */
  .section-three.powered .s3-lines{ opacity:.65; }
}

/* Tablets: „schmale Karte“ etwas länger behalten */
@media (min-width: 701px) and (max-width: 860px){
  .section-three.powered .s3-cards{ grid-template-columns: 1fr; }
  .section-three.powered .card{ width: 88%; margin: 0 auto; min-height: 168px; }
}

/* leichte Korrektur, wenn du .s3-lines transformiert hast */
@media (max-width: 980px){
  .section-three.powered .s3-lines{
    transform: translateX(-50%) scale(.95);
    transform-origin: top center;
  }
}


/* neu Github Copy */

/* ===== Showcase base */
#showcase {
  position: relative;
  width: 1200px;
  padding: 10rem 6vw 7rem;
  isolation: isolate;
  margin-top: -5%;
}

/* Subtle space background glow */
.showcase-glow {
  position: absolute; inset: 10% -5% auto -5%;
  height: 30rem;
  background: radial-gradient(60rem 20rem at 50% 10%,
              rgba(85, 78, 121, 0.161), rgba(0, 0, 0, 0));
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}



/* Showcase Card anpassen */
.showcase-card {
  --showcase-img-w: 520px;
  position: relative;
  max-width: 1200px;
  height: auto;
  min-height: 450px;
  margin: 0 auto;
  padding: 2.2rem 2.4rem;
  border-radius: var(--card-radius, 18px);
  background: rgba(255,255,255,0.00);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 20px 60px rgba(30, 20, 90, .25),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: #eaeaea;

  /* NEU: Grid – links Text (flexibel), rechts Bild (fix) */
  display: grid;
  grid-template-columns: 1fr var(--showcase-img-w); 
  column-gap: 2rem;
  align-items: start;
  margin-top: -5%;
}

/* Alle Textelemente links verankern */
.showcase-card > :not(.showcase-image) {
  grid-column: 1;     /* linke Spalte */
  text-align: left;
}

/* Bild rechts, unter Titel nicht „drüber“ zeichnen */
.showcase-image {
  grid-column: 2;            /* rechte Spalte */
  grid-row: 1 / span 4;         /* über gesamte Höhe */
  position: relative;
  z-index: 0;                /* unter Text */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: visible;
}

.showcase-image img {
  width: 110%;
  height: 110%;
  object-fit: contain;
  border-radius: 12px;
}

/* Zweispaltiger Textfluss links: startet links unten weiter rechts OBEN */
.showcase-flow {
  column-width: 22rem;       /* Zielbreite pro Textspalte */
  column-gap: 2rem;
  column-fill: balance;
}
.showcase-flow > * {         /* keine Listenelemente zerreißen */
  break-inside: avoid;
  margin: 0 0 1rem 0;
}

/* Feintuning Liste (dein Klassennamen „showcase-features“) */
.showcase-features {
  padding-left: 1.1rem;
  margin: .25rem 0 0;
}



/* Responsive: unter 900px alles untereinander, Bildhöhe definieren */
@media (max-width: 900px) {

  .showcase-glow {
  position: absolute; inset: 10% -5% auto -5%;
  height: 20rem;
  background: radial-gradient(60rem 20rem at 50% 10%,
              rgba(85, 78, 121, 0.115), rgba(0, 0, 0, 0));
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

  .showcase-card {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
    min-height: 0;
  }
  .showcase-image {
    grid-column: 1;
    order: 3;
    height: 260px; 
  }
  .showcase-flow {
    column-count: 1;
  }
}


/* “Dock” to divider below by overlapping with negative margin */
.showcase-card { margin-bottom: -1.6rem; }

/* divider line */
.showcase-divider {
  position: relative;
  top: 60px;
  height: 2px;
  width: min(1500px, 100%);
  margin: 0 auto 2.4rem;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.15),
    rgba(140,200,255,.45),
    rgba(255,255,255,.15)
  );
  border-radius: 999px;
  opacity: .9;
  overflow: visible;
}

/* Card typography */
.showcase-eyebrow {
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(200,240,255,.85);
  margin: 0 0 .4rem 0;
}
.showcase-title {
  font-size: clamp(1.4rem, 2.2vw + 1rem, 1.6rem);
  line-height: 1.45;
  margin: 0 0 1rem 0;
  text-align: left;
}

.showcase-title span {
  background: linear-gradient(90deg, #e7e7ea, #467496, #e7e7ea);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: showcaseTitleShimmer 8s linear infinite;
}

@keyframes showcaseTitleShimmer {
  to { background-position: 200% 0; }
}
.showcase-list {
  margin: .25rem 0 0 1.1rem;
  padding: 0;
  color: rgba(240,240,240,.9);
}




/* ===== Grid */
/* Layout */
.showcase-grid{
  display:grid;
  margin-top: 85px;
  grid-template-columns:min(520px,45%) 1fr;
  gap:clamp(30px,3vw,50px);
  align-items:start;
}

/* Rows links */
.showcase-rows{display:grid;gap:12px}
/* Rows links */
.showcase-rows {
  display: grid;
  gap: 12px;
}

.row {
  display: grid;
  gap: 15px;
  width: 100%;
  text-align: left;
  font-size: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
  border: 1px solid rgba(255,255,255,.12);
  color: #e8e8ea;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.showcase-rows .row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* falls die Preview in Mobile darüber liegt: keine Klicks abfangen */
@media (max-width: 750px) {
  .showcase-preview { pointer-events: none; } /* NUR Mobile */
}

/* Hover: sanfter Gradient + leichter Lift */
.row:hover {
  background: linear-gradient(180deg,
      rgba(120,180,255,0), 60%),
      rgba(120,180,255,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12); /* Border bleibt dezent */
}

/* Active: gleich wie Hover, aber ohne Bewegung */
.row.is-active {
  background: linear-gradient(90deg,
      rgba(120,180,255,.12),
      rgba(120,180,255,0) 60%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,.12);
  transform: none;
}


.row-title {
  font-weight: 600;
}

.row-meta {
  font-size: 12px;
  opacity: .72;
}

/* Preview rechts */
.showcase-preview{
  position:relative;
  min-height:clamp(360px,48vh,540px);
  border-radius:14px; overflow:hidden;
  background: transparent;
  isolation:isolate;
}

/* Bild-Layer */
.preview-img{
  position:absolute; inset:0; margin:auto;
  margin-top: 3%;
  top:var(--y,50%); left:var(--x,50%);
  transform:translate3d(-50%,-50%,0) scale(var(--scale,1));
  width:var(--w,100%); height:var(--h,100%);
  object-fit:var(--fit,contain); max-width:none;
  transition:opacity .28s ease, transform .28s ease;
  will-change:transform, opacity;
  backface-visibility:hidden;
  opacity:0;              /* unsichtbar */
  visibility:hidden;      /* Layer bleibt erhalten (kein display:none) */
  pointer-events:none;
  z-index:1;
}




.preview-img.current{ opacity:1; visibility:visible; z-index:1; }
.preview-img.next   { z-index:2; }

.no-fade .preview-img { transition:none !important; }

/* Edge fades (optional) */
.preview-fade{
  position:absolute; left:0; right:0; height:18%;
  pointer-events:none; z-index:3;
}


/* Motion respektieren */
@media (prefers-reduced-motion:reduce){
  .preview-img{transition:none}
  .row{transition:none}
}

/* Stack auf schmal */
@media (max-width:860px){
  .showcase-grid{grid-template-columns:1fr}
  .showcase-preview{order:2}
}


/* Tablet Ansicht (751–1199px) */
@media (max-width: 1199px) and (min-width: 751px) {
  #showcase {
    padding: 80px 5vw 50px;
    width: 100%;
  }

  .showcase-card {
    grid-template-columns: 1fr; /* Bild unter Text */
    row-gap: 1.6rem;
    min-height: 0;
  }
  .showcase-image {
    grid-column: 1;
    order: 3;
    height: 320px;
  }
  .showcase-flow {
    column-count: 1;
  }

  .showcase-grid {
    grid-template-columns: 1fr; /* Preview über Rows */
    gap: 20px;
  }
  .showcase-preview {
    min-height: clamp(360px, 46vh, 520px);
    border-radius: 16px;
  }
  .showcase-rows {
    gap: 12px;
  }

  .row {
    padding: 16px;
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
  }
  .row .row-title {
    font-size: 18px;
  }
  .row .row-meta {
    font-size: 13px;
  }
}

/* Mobile Ansicht (≤ 750px) */
@media (max-width: 750px) {
  #showcase {
    padding: 60px 5vw 40px;
    width: 100%;
    overflow: hidden !important;
background: none;
    box-shadow: none;
  }

  .showcase-card {
    grid-template-columns: 1fr;
    row-gap: 1.0rem;
    border-radius: 18px;
    border: none;
    background: none;
    box-shadow: none;
  }
  .showcase-image {
    grid-column: 1;
    order: 3;
    height: 450px;
    margin-bottom: -60px;
  }
  .showcase-image img {
    margin-top: -30%;
    margin-bottom: -20%;
    margin-left: 3%;
    width: 130%;
    height: auto;
    object-fit: contain;
  }

  .showcase-title {
    font-size: 27px;
  }
  .showcase-flow {
    column-count: 1;
  }

  .showcase-glow {
  position: absolute; inset: 10% -5% auto -5%;
  height: 30rem;
  background: radial-gradient(60rem 20rem at 50% 10%,
              rgba(140, 120, 255, .35), rgba(0,0,0,0));
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.showcase-flow {
  column-width: 22rem;       /* Zielbreite pro Textspalte */
  column-gap: 0.2rem;
  column-fill: balance;
}
.showcase-flow > * {         /* keine Listenelemente zerreißen */
  break-inside: avoid;
  margin: 0 0 1rem 0;
}

/* Feintuning Liste (dein Klassennamen „showcase-features“) */
.showcase-features {
  padding-left: 1.1rem;
  margin: .25rem 0 0;
}


  .showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  /* Preview halbtransparentes Bild + Halo */
   .showcase-preview{
    order: 0;
    margin-top: 30px;
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 16/10;
    min-height: 40px;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
  }

  /* Nur ABSOLUTE verwenden – keine doppelt/konfliktierenden Werte */
  .showcase-preview .preview-img{
    position: absolute;
    inset: 0;
    top: var(--y,50%);
    left: var(--x,50%);
    transform: translate3d(-50%,-50%,0) scale(var(--scale,1));
    width: 60%;
    height: auto;
    object-fit: var(--fit,contain);
    pointer-events: none;

    /* Basis: unsichtbar */
    opacity: 0;
    visibility: hidden;
    z-index: 1;

    /* (Optional) auf Mobile kein Fade => kein Flackern */
    transition: none;
  }

  /* Exakt EIN Layer sichtbar: das aktuelle Bild */
  .showcase-preview .preview-img.current{
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2;
  }

  /* Sicherheitsnetz: next bleibt garantiert unsichtbar */
  .showcase-preview .preview-img.next{
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
  }

  /* Edge-Fades auf Mobile aus */
  .showcase-preview .preview-fade{ display: none; }


  /* Rows mobil: kein Rahmen, nur Text */
  .showcase-rows {
    order: 1;
    gap: 10px;
  }
  .row {
    background: transparent;
    border: none;
    padding: 14px 8px;
    border-radius: 12px;
    opacity: .9;
  }
  .row .row-title {
    font-size: 17px;
    font-weight: 600;
  }
  .row .row-meta {
    font-size: 12px;
    opacity: .72;
  }
  .row.is-active {
    background: linear-gradient(90deg,
      rgba(120,180,255,.12),
      rgba(120,180,255,0) 60%);
  }
  .row + .row {
    box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset;
  }
}






  /* ########## INFO CARD SECTION ############# */
.infocard-section {
  display: flex;
  gap: 120px;
  align-items: flex-start;
  justify-content: center;
  padding: 150px 5vw;
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  background-repeat: repeat;
  background-size: 5px 5px;
  background-position: center center;
  /* Parallax effect settings */
  overflow: hidden;
  overflow-x: hidden !important;
}

.infocard-section.infocard-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Linke Seite – Infocard Container */
.infocard-wrapper {
  flex: 0 0 400px;
  max-width: 300px;
  position: relative;
  overflow: visible;
  left: 5%;
}

/* Sticky Card selbst */
.infocard {
  z-index: 3;
  overflow: visible;
}

/* Innerer Parallaxbereich (für Bildwechsel etc.) */
.infocard-parallax {
  position: relative;
  background-color: rgba(255, 255, 255, 0.0);
  border-radius: 12px;
  padding: 0px;
  transform: translate3d(0, 0, 0); /* oder translateZ(0) */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  contain: layout paint;
}

/* Bild innerhalb der Karte */
.infocard-image {
  width: 100%;
  height: 280px;
  display: block;
  border-radius: 12px 12px 0 0;
  border: 1px bold rgba(212, 212, 212, 0.8);
  transition: opacity 0.5s ease;
  z-index: 10;
  margin-bottom: 5%;
}

/* Inhalt */
.infocard-content {
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 8px;
  color: black;
  text-align: left;
}
.infocard-content h3 {
  margin-top: 5%;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: rgb(255, 205, 125);
}
.infocard-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.infocard-scroll-content {
  flex: 1 1 0;
  max-width: calc(100% - 400px - 60px); 
  display: flex;
  flex-direction: column;
  gap: 120px;
  text-align: left;
}


.image-text-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-left: 5%;
  max-width: 750px;
  transition: all 0.6s ease-out;
}
.image-text-block img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0.9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.image-text-block p {
  font-size: 18px;
  color: #222;
  line-height: 1.5;
}

/* (Optional) Schienen hinter der Infocard */
.infocard-track::before,
.infocard-track::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  left: 10px;
}

/* TOOLBAR + FROMATIERTER TEXT */
.editable-wrapper {
  position: relative;
  margin-top: 24px;
  max-width: 100%;
}

.toolbar {
  position: absolute;
  top: -35px;
  left: 30px;
  background: #333;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.toolbar button {
  background: none;
  color: rgb(255, 255, 255);
  border: none;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}
.toolbar button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.highlighted-text {
  background-color: #ebd972;
  color: black;
  padding: 12px;
  border-radius: 0px;
  font-size: 18px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}


/* MARKER */
.marker {
  position: absolute;
  width: 10px;
  height: 50px;
  background: transparent;
  top: -5px;
}

.marker-left {
  left: -1px;
  border-left: 2px solid black;
  border-top: none;
  border-radius: 0;
}
.marker-left::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -5px;
}

.marker-right {
  right: -1px;
  top: 5px;
  border-right: 2px solid black;
  height: 50px;
}
.marker-right::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: -5px;
}

.icon-only {
  opacity: 0.7;
  font-size: 16px;
  cursor: default;
}

/* FORMATIERTER TEXT */

.formatted-text {
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  position: relative;
}

.strike {
  text-decoration: line-through;
  color: #999;
}

.highlight {
  color: #f97316; /* Orange-Ton, wie im Screenshot */
  font-weight: 600;
}

.avatar-marker {
  display: inline-block;
  position: relative;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 10px;
}
/* Markerlinie darunter */
.avatar-marker::after {
  content: '';
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 25px;
  background-color: #f97316;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* WICHTIG – verhindert Verzerrung */
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px #f97316;
}

.editable-container {
  position: relative;
  padding-left: 24px;
  margin-top: 12px;
}

.timeline-marker {
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
}

.editable-text {
  font-size: 20px;
  color: #999;
  outline: none;
  border: none;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.editable-text:focus {
  color: #222;
}

.edit-toolbar {
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: fit-content;
  align-items: center;
}

.edit-toolbar button {
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.edit-toolbar button:hover {
  transform: scale(1.1);
}
.final-text {
  font-family: monospace;
  font-size: 19px;
  color: #222;
  margin: 32px 0 16px;
  line-height: 1.6;
}

/* PHONEE */

@media screen and (max-width: 650px) {
  .infocard-section {
    flex-direction: column;
    gap: 60px;
    padding: 80px 5vw;
  }

  .infocard-wrapper {
    display: none;
  }

  .infocard-scroll-content {
    max-width: 100%;
    gap: 80px;
  }

  .image-text-block {
    max-width: 100%;
    margin-left: 0%;
  }

  .image-text-block img {
    width: 100%;
    border-radius: 10px;
  }
  .marker-right {
  right: -1px;
  top: 25px;
  border-right: 2px solid black;
  height: 50px;
}
.marker-right::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: -5px;
}

  .final-text {
    font-size: 16px;
    margin: 24px 0;
  }

.edit-toolbar {
    width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
  }

  .editable-text {
    font-size: 18px;
  }
}

/* TABLET */

@media screen and (min-width: 651px) and (max-width: 1249px) {
  .infocard-section {
    gap: 60px;
    padding: 120px 5vw;
  }

  .infocard-wrapper {
    flex: 0 0 280px;
    max-width: 280px;
  }

  .infocard-scroll-content {
    max-width: calc(100% - 280px - 40px);
    gap: 100px;
  }

  .image-text-block {
    max-width: 100%;
  }

  .image-text-block img {
    width: 100%;
    border-radius: 10px;
  }

  .editable-text {
    font-size: 18px;
  }

  .final-text {
    font-size: 17px;
    margin: 28px 0 20px;
  }
}



  /* DASHED LINEEEEEEEEEE */

.dashed-line-section {
    display: none;
    position: absolute;
    max-width: 100%;
    height: 100vh;
    top: 220px;
    left: 50%;
    transform: translatex(-50%);
    pointer-events: none; 
    z-index: 2; 
}

.dashed-line {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 750px) {
  .dashed-line-section {
    display: none;
  }
}

/* Globale Einstellungen für den Main-Bereich */
main {
    min-height: 300vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: -2;
}

.dashed-line-section2 {
  display: none;
    position: absolute;
    max-width: 100%;
    height: 100vh;
    top: 1300px;
    left: 50%;
    transform: translatex(-50%);
    pointer-events: none; /* Damit sie keine Klicks blockiert */
    z-index: -2; /* Hält sie im Hintergrund */
}

.dashed-line2 {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ========== Section: Bild + Marquee in einer Ebene ========== */
.image-section {
    position: relative;
    align-items: center;
    margin-top: 8%;
    width: 100%;    
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    background: transparent; 
    overflow: visible; 
    z-index: 2;
  }
  
  .feature-video-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 100px auto 80px;
    text-align: center;
    z-index: 1;
  }
  
  .video-feature-text {
    margin-bottom: 40px;
  }
  
  .video-headline {
    font-size: 55px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    margin-left: 16%;
    color: #fff;
  }
  .code-brackets {
    color: #1e96ff8c;
    letter-spacing: 1px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: normal; 
  }
  
  .video-subline {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75); /* Oder dunkler für hellen Hintergrund */
    margin-top: 12px;
  }
  .video-subline-mobile {
    display: none;
  }
  
  .video-frame-enhanced {
    position: relative;
    padding: 10px; /* Innenabstand für Rahmen */
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1); /* halbtransparenter Rahmen-Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.3); /* eigentlicher Rahmen */
    box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.05),
                0 0 200px 100px rgba(255, 255, 255, 0.0); /* Lichtschein nach hinten */
    backdrop-filter: blur(2px); /* für smoothen Glanz */
    overflow: hidden;
    max-width: 100%;
  }
  
.video-frame-enhanced::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 25px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
  animation: borderGlowHighlight 12s infinite ease-in-out;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, rgba(255,255,255,0.6), transparent) border-box;
  mask-image: linear-gradient(white, white); /* fallback */
  opacity: 0;
}
  
  .video-feature {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    opacity: 0.75;
  }

  /* play/pause button */


.video-toggle-btn-vision {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background: none;
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

  /* Große Bildschirme */

  @media (min-width: 1600px) {
    .image-section {
      max-width: 1200px;
    }
  }


@media (max-width: 1200px) and (min-width: 751px) {
  .image-section {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

  @media (max-width: 750px) {
    .image-section {
      width: 90%;
      max-width: 749px;
      margin-left: auto;
      margin-right: auto;
    }

    .feature-video-section {
      position: relative;
      width: 90%;
      max-width: 750px;
      margin-left: 5%;
      margin-right:5%;
    }
  
    .feature-video-section {
      position: relative;
      width: 90%;
      max-width: 749px;
      margin: 100px auto 80px;
      text-align: center;
      z-index: 1;
    }

    .video-headline {
      font-size: 28px;
      line-height: 1.2;
    }
  
    .video-subline {
      display: none;
    }

    .video-subline-mobile {
      display: block;
      position: relative;

      font-size: 12px;
      color: rgba(255, 255, 255, 0.75);
      margin-top: 12px;
      z-index: 10;
      text-align: left;
      margin-left: 16%;
    }
  
    .video-frame-enhanced {
      padding: 6px;
      border-radius: 18px;
      box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.08),
                  0 0 100px 50px rgba(255, 255, 255, 0.05);
    }
  
    .video-frame-enhanced::after {
      border-radius: 18px;
    }
  
    .video-feature {
      width: 100%;
      height: auto;
      border-radius: 14px;
    }
  }

/* ===================== Schriftzug WEBFLOW-THOMSEN ===================== */
.marquee-section {
  position: absolute;
  width: 100%;
  background: transparent;
  z-index: 11;
}

/* Container, der beide Kopien in einer Zeile hält */
.loop-content {
  display: inline-block;
  white-space: nowrap;
  /* Die Animation verschiebt den Inhalt um genau 50% (d.h. eine Kopie) */
  animation: marqueeLoop 20s linear infinite;
  animation-delay: 0s;
}

/* Keyframes: Nahtloser Loop von 0% bis -50% */
@keyframes marqueeLoop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Jede Kopie (Block) */
.marquee-content {
  display: none;
  vertical-align: middle;
  margin: -5% 50px -5% 50px;
  z-index: 1;
}

/* Text-Styling */
.marquee-text {
  display: inline-block;
  color: #fff;
  font-size: 100px;
  margin: 60px;
  vertical-align: middle;
  font-weight: 400;
}

/* Container für den Circle (Text, Blur, Logo) */
.marquee-circle {
  display: inline-block;
  position: relative;
  margin: 0 30px;
}

/* CTA-Blur (unverändert) */
.cta-blur {
  position: absolute;
  padding: 0px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blur-color, rgba(0,0,0,0.3)) 20%, rgba(0,0,0,0) 90%);
  filter: blur(25px);
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Rotierender SVG-Text */
.rotating-text {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotateText 8s linear infinite;
  overflow: visible;
  z-index: 4;
}

/* Keyframes: Rotation */
@keyframes rotateText {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* CTA-Logo mittig im Kreis */
.cta-logo {
  position: absolute;
  padding: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.cta-logo img {
  width: 50px;
  height: auto;
}



@media (max-width: 750px) {
  /* Gemeinsamer Container, der Text & Circle in eine Zeile bringt */

  .image-section {
    max-width: 100%;
  }
  .section-video { 
    width: 90%;
    height: 200px;
  }
  .marquee-content {
    display: none;
    align-items: center;
    vertical-align: middle;
    margin: 10px;
    z-index: -1;
  }

  /* Marquee-Text verkleinern */
  .marquee-text {
    font-size: 25px;
    margin: 10px;
  }

  /* Der Circle-CTA (marquee-circle) insgesamt kleiner */
  .marquee-circle {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 10px;
  }

  /* Blur verkleinern */
  .cta-blur {
    width: 60px;                /* statt 250px */
    height: 60px;
    filter: blur(10px);         /* statt 25px */
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Rotierender SVG-Text ebenfalls kleiner */
  .rotating-text {
    width: 50px;                /* statt 170px */
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Logo in der Mitte: kleiner */
  .cta-logo img {
    width: 20px;                /* statt 50px */
    height: auto;
  }
}

/* ---------------------------About-Me Sektion------------------------*/
  .about-me-section {
    padding: 10vh 5vw;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .scroll-paragraph {
    max-width: 1000px;
    width: 100%;
    font-size: 40px;
    line-height: 1.6;
    color: #555;
    font-weight: 300;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    transition: all 0.5s ease-in-out;
  }

  .scroll-paragraph span {
    display: inline-block;
    margin-right: 6px;
    color: #444;
    transition: margin 0.6s ease-in-out;
    opacity: 1;
  }

.scroll-paragraph span.visible {
  color: #fff;
}



.logo-word {
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  transform: scale(0.5);
  max-width: 0;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
  margin-left: -5px;
  margin-right: -5px;
  transition:
    opacity 0.6s ease-in-out,
    transform 0.6s ease-in-out,
    max-width 0.6s ease-in-out,
    margin 0.6s ease-in-out;
}

/* Sichtbarer Zustand */
.logo-word.visible {
  max-width: 120px;
  opacity: 1;
  transform: scale(1);
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.logo-glow {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  overflow: visible !important;
}

.logo-glow::before{
  display: none;
  content:""; position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: 100px; height: 100px;    /* größer als vorher */
  background: radial-gradient(
    circle,
    rgba(43,144,195,.26) 0%,
    rgba(43,144,195,.18) 30%,
    rgba(43,144,195,.08) 55%,
    rgba(43,144,195,.00) 75%
  );
  pointer-events:none; z-index:-1; opacity:0; transition: opacity .4s ease;
}

.logo-word.visible .logo-glow::before {
  opacity: 1;
}

.logo-glow img {
  display: block;
  width: 70px;
  height: auto;
  position: relative;
  z-index: 1;
}
.logo-word, .logo-glow {
  overflow: visible;
}

.logo-word img {
  height: 75px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.4s ease-in-out,
    transform 0.4s ease-in-out;
  position: relative;
  z-index: 10;
  visibility: hidden;
}

.logo-word.visible img {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}


/* Das ist dein Gradient-Text */
.gradient-text1 {
  background: linear-gradient(
    90deg,
    white 0%,
    #c6f3ff 35%,
    #8981f9 70%,
    #abc8f4 80%,
    white 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  opacity: 0;
  transform: translateY(0px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.gradient-text1.visible {
  opacity: 1;
  transform: translateY(0);
}


/* Container unter dem Text platzieren */
.crow-container {
  width: 150px;
  min-width: 150px;
  max-width: none;
  height: auto;
  margin: 80px auto 0 auto; /* Abstand nach oben, zentriert */
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatUpDown 4s ease-in-out infinite;
  flex-shrink: 0 !important;
}

/* Das animierte Logo selbst */
.animated-crow {
  width: 150px !important;
  min-width: 150px !important;
  max-width: none !important;
  height: auto;
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
  animation:
    crowFadeIn 1.2s ease-out forwards,
    crowFlap 1.6s ease-in-out infinite;
    flex-shrink: 0 !important;
}
  img.animated-crow {
  max-width: none !important;
}

/* Fade-In beim Laden */
@keyframes crowFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Auf- und Abschweben */
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Leichtes Zittern/Flattern */
@keyframes crowFlap {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.02) rotate(1deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.02) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Hover-Animation – Vorschwingen bei Hover */
@keyframes crowSwing {
  0% {
    transform: translateX(0) scale(1) rotate(20deg);
  }
  30% {
    transform: translateX(50px) scale(1.05) rotate(3deg);
  }
  60% {
    transform: translateX(-5px) scale(0.98) rotate(-2deg);
  }
  100% {
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

/* Hover-Trigger */
.animated-crow:hover {
  animation: crowFadeIn 3.2s ease-out forwards, 
             crowFlap 2.6s ease-in-out infinite,
             crowSwing 2.6s ease-out 1;
}


@media (max-width: 900px) {
  .crow-container {
    width: 150px;
    height: 150px;
    margin: 80px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floatUpDown 4s ease-in-out infinite;
    flex-shrink: 0;
  }

  .animated-crow {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
     max-width: none !important;
    flex-shrink: 0;
  }
  img.animated-crow {
  max-width: none !important;
}
}



@media (max-width: 1200px) and (min-width: 900px) {
  .scroll-paragraph {
    font-size: 30px;
    line-height: 1.9;
  }

  .logo-word img {
    height: 45px;
    width: auto;
  }

  .logo-glow::before {
    width: 140px;
    height: 140px;
    filter: blur(40px);
  }
}

@media (max-width: 899px) {
  .scroll-paragraph {
    font-size: 20px;
    line-height: 1.8;
  }

  .logo-word {
    margin-left: 0.3em;
    margin-right: 0.3em;
  }

  .logo-word img {
    height: 36px;
    width: auto;
  }

  .logo-glow::before {
    display: none;
    width: 60px;
    height: 60px;
    filter: blur(30px);
  }
}





/* ------------ FEATURES Section -------------------*/
.features-section {
  position: relative;
  padding: 60px 20px;
  text-align: center;
  z-index: 5;
}

/* Überschrift */
.features-title {
  font-size: 70px;
  font-weight: 500;
  margin-bottom: 45px;
  color: #fff; 
}
.features-title-mobile {
  display: none;
}

/* Grid-Layout für 6 Blöcke: 3 Spalten, 2 Zeilen */
.features-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* Abstand zwischen Blöcken */
  max-width: 1200px;
  margin: 0 auto; /* Zentriert das Grid */
}

/* Einzelner Block (ohne Hintergrund) */
.feature-block {
  display: flex;
  flex-direction: column;

}

/* Icon-Container */
.feature-icon {
  position: relative;
  left: -5%;
  width: 80px;
  height: 80px;
  margin-bottom: -20px;
}

/* Farbklecks (Bulb) */
.feature-bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 162, 255, 0.3);
  filter: blur(25px);
  z-index: -1;
}

/* Icon-Bild */
.feature-icon img {
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 1;
  align-items: left;
}

/* Überschrift + Text */
.feature-heading {
  font-size: 2rem;
  margin-bottom: 5px;
  font-weight: 400;
  text-align: left;
  color: #fff;
}

.feature-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #ddd;
  text-align: left;
  color: #bcbcbc;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

@media (max-width: 750px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;  
    max-width: 100%;
    margin: 0 10px; 
  }
  .features-title {
    display: none;
  }

  .features-title-mobile {
    display: block;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 45px;
    color: #fff; 
  }

  /* Entferne die negativen Offsets im Icon-Container */
  .feature-icon {
    left: 0;
    margin-bottom: 0;
  }
  
  .feature-heading {
    font-size: 22px;
  }
  
  .feature-text {
    font-size: 12px;
  }
}


/* =========================================
   RECENT WORK SECTION (PX & % ONLY)
   ========================================= */

   .recent-work-section {
    position: relative;
    z-index: 10;
    max-width: 100%;
    padding: 60px 20px;
    margin-bottom: 0;
    margin-top: 8%;
    text-align: center;
    background-color: #f7f6f6;
    background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px);
    background-repeat: repeat;
    background-size: 5px 5px;
    background-position: center center;
    color: #000;
    overflow-x: hidden;
  }
  
  /* Kleiner Untertitel (z.B. "HAPPY CLIENTS <3>") */
  .section-subtitle {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: 1px;
  }
  
  /* Gradient-Text-Effekt (nur fürs Subtitle) */
  .gradient-text {
    background: linear-gradient(90deg, #ffffff, #00c8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* Große Überschrift (z.B. "Recent Work") */
  .section-title {
    font-size: 70px;
    font-weight: 500;
    margin-bottom: 40px;
  }
  .section-title-mobile {
    display: none;
  }


  @media (max-width: 750px) {
    .section-title {
      display: none;
    }
  }
  
  /* Container für die Karten */
  .cards-container {
    position: relative;
    z-index: 10;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    margin-bottom: 80px;
  }
  
  /* Einzelne Card */
  /* ============ Basis-Styles (für alle Größen) ============ */

.card {
  position: relative;
  z-index: 10;
  background-color: #f3f3f3;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  height: auto;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  display: block;
  margin-bottom: 8px;
}

/* Card-Text */
.card-title {
  font-size: 18px;
  margin-bottom: 4px;
  text-align: left;
  color: #000;
}

.card-location {
  font-size: 12px;
  color: #747474;
  margin-bottom: 6px;
  text-align: left;
}

.card-description {
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: #414141;
  flex-grow: 1;
 margin-bottom: 10px;
}

@media (min-width: 350px) and (max-width: 600px) {
  .cards-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }

  .card {
    max-width: 100%;
  }
}


/* 550px bis 849px – 2 schmalere Karten */
@media (min-width: 601px) and (max-width: 849px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
  }

  .card {
    max-width: 100%;
  }
}

/* 850px bis 999px – 2 etwas größere Karten */
@media (min-width: 850px) and (max-width: 999px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 0 20px;
  }

  .card {
    max-width: 100%;
  }
}

/* Ab 1000px – 3 Karten nebeneinander */
@media (min-width: 1000px) {
  .cards-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 0 24px;
  }

  .card {
    max-width: 100%;
  }
}


  /* ===================== DIVIDER-BEREICH ===================== */
.section-divider {
  position: relative;
  width: 100%;
  height: 100px;
  background: transparent;
}

/* Die horizontale Linie */
.divider-line {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
  rgba(255, 255, 255, 0.497),
  rgba(8, 100, 193, 0.9)
);
  transform: translateY(-50%);
  opacity: 0.3;
  z-index: 3;
}

/* ------------------------- CTA (Button) ----------------------*/
.cta-mid {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(50, 107, 135, 0.5), rgba(255, 255, 255, 0.3));
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.0);
  border: 1px solid rgba(255, 255, 255, 0.208);
  z-index: 999;
}

/* Die Unterschichten des CTA (dein Code) */
.cta-mid .cta-blur {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blur-color, rgba(50, 50, 50, 0.1)) 20%, rgba(0, 0, 0, 0) 60%);
  filter: blur(10px);
  z-index: 3;
}

.cta-mid .rotating-text {
  position: absolute;
  width: 170px;
  height: 170px;
  animation: rotateText 8s linear infinite;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.cta-mid .rotating-text text {
  font-size: 14px;
  fill: #fff; 
  font-weight: 300;
  letter-spacing: 5px;
  text-shadow: 0 0 0px rgba(0, 162, 255, 0.6);
  z-index: 5;
}

/* Animation für das Drehen des Texts */
@keyframes rotateText {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Logo in der Mitte */
.cta-mid .cta-logo img {
  display: block;
  width: 50px;
  height: auto;
  z-index: 4;
}

@media (max-width: 750px) {
  .cta-mid {
    width: 100px;
    height: 100px;
  }

  .cta-mid .cta-blur {
    width: 140px;
    height: 140px;
    filter: blur(10px);
  }

  .cta-mid .rotating-text {
    width: 90px;
    height: 90px;
  }

  .cta-mid .rotating-text text {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .cta-mid .cta-logo img {
    width: 45px;
  }
}



/* ###################################################################*/
/* ========== Services-Sektion ========== */
.services-section {
  position: relative;
  padding: 60px 20px;
  color: #fff;
  margin-top: 5%;
  left: -1%;
}

.services-title {
  position: relative;
  text-align: center;
  font-size: 75px;
  font-weight: 500;
  margin-bottom: 40px;
  z-index: 10;
}
.services-title-mobile {
  display: none;
}

/* ========== Container für 3 Cards in EINER Zeile ========== */
.services-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 40px 5vw;
  margin: 0 auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-start-spacer,
.scroll-end-spacer {
  flex: 0 0 auto;
  width: 8%;
}

/* pfeil links + rechts als signal zum scrollen */
.services-scroll-arrow {
  position: absolute;
  margin-top: 15%;
  z-index: 10;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 10px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-arrow {
  left: 8px;
}

.right-arrow {
  right: 8px;
}

 /* FADE EFFECT LINK + RECHTS */

.services-section::before,
.services-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 450px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.services-section::before {
  left: 0;
  background: linear-gradient(to right, #101010 0%, transparent 100%);
}

.services-section::after {
  right: 0;
  background: linear-gradient(to left, #101010 0%, transparent 100%);
}


/* ========== Service Cards ========== */
.service-card {
  position: relative;
  width: 480px;
  height: 500px;
  border-radius: 12px;
  padding: 20px;
  flex: 0 0 auto;
  scroll-snap-align: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5' fill='none' stroke='rgba(255,255,255,0.05)'><rect width='1' height='1'/></svg>");
  background-repeat: repeat;
  background-size: 5px 5px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 
    inset 0 0 8px rgba(255, 255, 255, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(135deg, #00f2ff, #3a00ff);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* NEU: Lichtkante & Schattenkante */
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.2),
     2px  2px 6px rgba(0, 0, 0, 0.25);
}

.border-1 {
  background: linear-gradient(135deg, #65b5bc, #928da0);
}

.border-2 {
  background: linear-gradient(135deg, #a0a08a, #dfdfd6);
}

.border-3 {
  background: linear-gradient(135deg, #c4e9db, #8b8272);
}

.border-4 {
  background: linear-gradient(135deg, #323232, #8a6ce5);
}


.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3) 70%);
  animation: pulseLight 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}



@keyframes pulseLight {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.05);
  }
}


/* 3D-Kanten-Effekt für den Rand */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(29, 29, 29, 0.3) 0%,
    rgba(31, 31, 31, 0.1) 30%,
    rgba(55, 55, 55, 0) 70%
  );
  pointer-events: none;
  opacity: 0.1;
}


.service-card:hover {
  transform: translateY(-1px);
  border-color:#3c3c3c;
  transition: ease-in-out (0.5sec);
}

/* ========== Text und Überschriften der Service Card ========== */
.service-card .card-heading {
  font-size: 30px;
  font-weight: 400;
  text-align: left;
  color: #fdfdfd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.0);
  margin-top: 38px;
  margin-left: 20px;
}

.service-card .card-text {
  font-size: 1.1rem;
  font-weight: 100;
  color: #e3e3e3;
  line-height: 1.4;
  margin-top: 35px;
  margin-bottom: 12px;
  text-align: left;
  margin-left: 20px;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 300;
}
.service-highlight1 {
  color: #82a5b3; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}
.service-highlight2 {
  color: #afb382; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}
.service-highlight {
  color: #82b398; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}
.service-highlight4 {
  color: #9182b3; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}

.card-number-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  margin-left: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.card-number {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(73, 148, 169, 0.7);
}

.card-line {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
.card-checklist {
  list-style: none;
  padding-left: 10px;
  margin-top: 20px;
  margin-left: 9px;
  font-size: 16px;
  line-height: 1.6;
  color: #ccc;
}

.card-checklist li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.checkmark {
  display: inline-block;
  color: #9df99d; /* hellgrün, gerne anpassen */
  font-weight: bold;
  margin-right: 10px;
  font-size: 18px;
}


/* ✅ Farbkleckse */
.colorbservice {
  position: absolute;
  width: 500px;
  height:500px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
}
.colorbservice1 {
  position: absolute;
  width: 400px;
  height:400px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
}
.colorbservice2 {
  position: absolute;
  width: 400px;
  height:400px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
}
.colorbservice3 {
  position: absolute;
  width: 400px;
  height:400px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
}
.colorbservicetopmid {
  position: absolute;
  width: 600px;
  height:400px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -2;
}
.colorbservice {
  top: 18%;
  left: 10%;
  background: rgba(0, 255, 255, 0.01);
}
.colorbservice1 {
  top: 46%;
  left: 10%;
  background: rgba(0, 191, 255, 0.0);
}
.colorbservice2 {
  top: 50%;
  left: 65%;
  background: rgba(124, 90, 218, 0.02);
}
.colorbservice3 {
  top: 10%;
  left: 67%;
  background: rgba(0, 255, 255, 0.00);
}
.colorbservicetopmid {
  top: 20%;
  left: 40%;
  background: rgba(0, 153, 255, 0.03);
}

/* TABLET SERVICE */
@media (max-width: 1200px) and (min-width: 751px) {
  .services-section {
    position: relative;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    color: #fff;
    margin-top: 10%;
  }

  .services-section::before,
.services-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
  
  .services-title {
    display: none;
  }

  .services-title-mobile {
    display: block;
    position: relative;
    font-size: 40px;
    font-weight: 400;
    z-index: 10;
    text-align: center;
  }

  .card-number-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  /* Nummer */
  .card-number {
    font-size: 1.0rem;
    font-weight: 400;
    color: #5bcacb;
  }
  
  /* Kurze Linie in hellem Grau */
  .card-line {
    width: 20px;
    height: 1px;
    background: #9f9f9fd4;
  }

  .services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    justify-items: center;
  }
  
  /* Einzelne Card: Breite anpassen, Höhe evtl. auf auto setzen */
  .service-card {
    width: 90%;
    height: auto;
    padding: 16px;
  }
  
  /* Überschrift und Text anpassen */
  .card-heading {
    font-size: 16px;
  }
  
  .card-text {
    font-size: 12px;
  }
}


@media (max-width: 750px) {
  .services-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 48px 0 40px 0; /* entfernt Lücke links/rechts */
    margin: 0;
  }

  .services-title {
  Display: none;
}

.services-title-mobile {
  display: block;
  position: relative;
  text-align: center;
  font-size: 55px;
  font-weight: 500;
  margin-bottom: 40px;
  z-index: 10;
}


    .services-section::before,
.services-section::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

  /* pfeil links + rechts als signal zum scrollen */

.services-scroll-arrow {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s ease;
}

.left-arrow {
  left: 8px;
}

.right-arrow {
  right: 8px;
}

  .service-card {
    flex: 0 0 88vw; /* breiter */
    min-height: 360px;
    scroll-snap-align: start;
    border-radius: 16px;
    padding: 24px 20px;
  }

  .service-card .card-heading {
  font-size: 27px;
  font-weight: 400;
  text-align: left;
  color: #fdfdfd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin-top: 18px;
  margin-left: 20px;
}

.service-card .card-text {
  font-size: 1.0rem;
  font-weight: 100;
  color: #e3e3e3;
  line-height: 1.4;
  margin-top: 35px;
  margin-bottom: 12px;
  text-align: left;
  margin-left: 20px;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 300;
}
.service-highlight1 {
  color: #82a5b3; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}
.service-highlight2 {
  color: #afb382; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}
.service-highlight {
  color: #82b398; /* Beispiel: kräftiges Blau */
  font-weight: 600;
}

.card-number-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  margin-left: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.card-number {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(73, 148, 169, 0.7);
}

.card-line {
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

  .scroll-start-spacer {
    display: none;
  }

  .services-container::-webkit-scrollbar {
    display: none;
  }
  .checkmark {
  display: inline-block;
  color: #9df99d; /* hellgrün, gerne anpassen */
  font-weight: bold;
  margin-right: 8px;
  font-size: 16px;
}
}

 /* FAQ */

.faq-section {
  overflow-x: hidden;
  position: relative;
  padding: 60px 20px;
  color: #fff;
  background: transparent;
  z-index: 10;
  min-height: 100vh;
}

.faq-title {
  position: relative;
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 70px;
}

.faq-title .faq-highlight {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 70px;
  color: rgb(126, 159, 226);
  z-index: 2;
}

.faq-title .faq-glow {
  position: absolute;
  top: 50%;
  left: 55%;
  width: 60px;
  height: 60px;
  background: rgba(0, 162, 255, 0.3);
  filter: blur(25px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 5%;
}

.faq-item {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  cursor: pointer;
  text-align: left;
}

.faq-question {
  font-size: 25px;
  font-weight: 400;
  color: #fff;
  transition: color 0.3s ease;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 300;
}

.faq-question:hover {
  color: rgb(126, 189, 226);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #bcbcbc;
  margin-top: 10px;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

.faq-answer.active {
  max-height: 500px; /* genügt für 3–4 Absätze */
}
@media (max-width: 1200px) and (min-width: 751px) {

  .faq-section {
    overflow-x: hidden;
  }
  .faq-title {
    font-size: 40px;
    margin-bottom: 50px;
  }

  .faq-title .faq-highlight {
    font-size: 50px;
  }

  .faq-title .faq-glow {
    width: 50px;
    height: 50px;
    filter: blur(18px);
  }

  .faq-question {
    font-size: 20px;
  }

  .faq-answer {
    font-size: 14px;
  }

  .faq-container {
    padding-left: 0;
    padding-right: 10px;
  }
}

@media (max-width: 750px) {
  .faq-title {
    font-size: 32px;
    margin-bottom: 40px;
  }

  .faq-title .faq-highlight {
    font-size: 40px;
  }

  .faq-title .faq-glow {
    width: 40px;
    height: 40px;
    filter: blur(14px);
    left: 65%;
  }

  .faq-question {
    font-size: 18px;
  }

  .faq-answer {
    font-size: 13px;
  }

  .faq-container {
    padding-left: 0;
    padding-right: 10px;
  }
}


/* ---------------- Deine Kontakt Section-------------------- */
.contact-section {
  position: relative;
  min-height: 600px; 
  color: #fff;
  z-index: 10;
  overflow-x: hidden;
}

/* Der Container für den abgerundeten Kasten */
.contact-content {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  box-sizing: border-box;
}
/* Neuer Block für regionale SEO-Überschrift und Beschreibung */
.contact-location {
  position: absolute;
  top: 10%;
  width: 100%;
  text-align: center;
  z-index: 5;
  color: white;
  font-size: 1.2rem;
  font-weight: 300;
}

.location-title {
  font-size: 60px;
  font-weight: 500;
  margin-left: 18%;
  margin-bottom: 30px;
  color: #fff;
  text-align: left;
}

.location-text {
  font-size: 18px;
  line-height: 1.5;
  color: #ccc;
  text-align: left;
  margin-left: 18%;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

.location-text.mobile {
  display: none;
}
@media (max-width: 1200px) and (min-width: 751px) {
  .location-text.desktop {
    display: block;
    font-size: 16px;
    margin-left: 10%;
    text-align: center;
  }
  .location-text.mobile {
    display: none;
  }
}

@media (max-width: 750px) {
  .location-title {
    font-size: 26px;
  }

  .location-text.desktop {
    display: none;
  }

  .location-text.mobile {
    display: block;
    font-size: 14px;
    color: #ccc;
  }
}


.contact-image-overlay {
  position: absolute;
  top: 15%;
  height: 80%;
  inset: 0;
  background: url("assets/images/D-13.png") center center no-repeat;
  background-size: cover;
  z-index: -3;
  opacity: 0.15;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

/* Der abgerundete, halbtransparente Kasten */
.social-box {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 20px; 
  width: 900px;
  border: 1px solid;
  border-radius: 20px;
  border-color: #ffffff21;
  padding: 20px 30px;
  background: radial-gradient(circle, var(--blur-color, rgba(50, 50, 50, 0.4)) 20%, rgba(0, 0, 0, 0) 90%);
  border-radius: 8px;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

/* Mittlerer Teil: Social-Links */
.social-center {
  display: flex;
  gap: 100px;
}

.social-link {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: 6px 12px;
  gap: 20px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.social-link:hover {
  color: rgba(255, 255, 255, 0.2);
}

.email-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hover-popup {
  position: absolute;
  bottom: 100%; /* über dem Button */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(20, 20, 20, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.email-wrapper:hover .hover-popup {
  opacity: 1;
}

@media (max-width: 750px) {
  .hover-popup {
    display: none; /* auf Mobile per JS sichtbar */
  }

  .hover-popup.show-mobile {
    display: inline-block;
    opacity: 1;
  }
}

/* Vertikal gedrehter Text im Balken */
.right-bar span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-lr;
  text-orientation: s;
  color: #000;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.footer-left {
  position: absolute;
  text-align: left;
  bottom: 20%;
  left: 18%;
  display: flex;
  flex-direction: column; /* Logo oben, "Webflow - Thomsen" drunter */
  align-items: flex-start;
  gap: 6px;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

.footer-logo {
  width: 50px !important;
  height: auto !important;
  max-width: none !important;  
  max-height: none !important; 
  object-fit: contain !important;
  display: block !important;
}

.footer-sub {
  font-size: 0.95rem;
  color: #aaa;
}

/* ========== 3. UNTEN RECHTS: TEXT MIT 80PX ABSTAND ========== */
.footer-right {
  position: absolute;
  bottom: 20%;
  right: 18%;
  font-size: 0.85rem;
  color: #aaa;
  text-align: right;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 200;
}

@media (max-width: 1200px) and (min-width: 751px) {
  .contact-content {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .social-box {
    position: relative;
    left: 45%;
    bottom: 0%;
    transform: translateX( -50%, -50%);
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
  }

  /* Linker Bereich (Logo + Subtext) in einer Spalte */
  .footer-left {
    position: absolute;
    bottom: 0%;
    left:39px;     
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .footer-logo {
    width: 30px;
    height: auto;
    max-width: none;  
    max-height: none; 
    object-fit: contain;
    display: block;
  }
  
  /* Mittlerer Bereich (Social-Links) ebenso */
  .social-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
    text-align: center;
  }

  /* Rechter Bereich (Kontakt/Impressum) ebenfalls zentriert */
  .footer-right {
    display: none;
  }

  .right-bar span {
    display: none;
  }
  /* Optional: Schriftgrößen anpassen */
  .footer-sub {
    font-size: 0.9rem;
  }
  .social-link {
    font-size: 0.6rem;
    padding: 3px 6px;
  }
  .footer-right span {
    position: absolute;
    left: 60%;
    font-size: 12px;
  }
}

@media (max-width: 750px) {
  .contact-content {
    margin-bottom: -10%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
  }

  .location-title {
      bottom: 0%;
    margin-left: 18%;     
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .location-text mobile {
    bottom: 0%;
    margin-left:-20px;     
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .social-box {
    position: relative;
    left: 45%;
    bottom: -10%;
    transform: translateX( -50%, -50%);
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
  }

  /* Linker Bereich (Logo + Subtext) in einer Spalte */
  .footer-left {
    position: absolute;
    bottom: 0%;
    left:39px;     
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .footer-logo {
    width: 30px;
    height: auto;
    max-width: none;  
    max-height: none; 
    object-fit: contain;
    display: block;
  }
  
  /* Mittlerer Bereich (Social-Links) ebenso */
  .social-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
    text-align: center;
  }

  /* Rechter Bereich (Kontakt/Impressum) ebenfalls zentriert */
  .footer-right {
    display: none;
  }

  .right-bar span {
    display: none;
  }
  /* Optional: Schriftgrößen anpassen */
  .footer-sub {
    font-size: 0.9rem;
  }
  .social-link {
    font-size: 0.6rem;
    padding: 3px 6px;
  }
  .footer-right span {
    position: absolute;
    left: 60%;
    font-size: 12px;
  }
}

.contact-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.15; /* kannst du anpassen */
  pointer-events: none;
}



/* ----------------------- FOOTER ------------------- */
/* FOOTER GRUNDSTIL */
.footer {
  position: relative;
  color: white;
  text-align: center;
  margin-top: 70px;
  bottom: 0;
  padding: 0;
  width: 100%;
  z-index: 9999;
  background: transparent;
}

/* NAVIGATION IM FOOTER */
.navfooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Lekton', sans-serif;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
  width: 100%;
  padding: 20px 0;
  background: transparent; 
  backdrop-filter: none;  
  -webkit-backdrop-filter: none;
}


/* LINKLISTE IM FOOTER */
.navfooter ul {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: flex;
  gap: 20px;
  order: 1; /* ⬅️ Linkliste über dem Logo */
}

/* LINKS SELBST */
.navfooter ul li a {
  color: rgb(200, 200, 200);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.3s ease;
}

/* HOVER-EFFEKT */
.navfooter ul li a:hover {
  color: white;
  text-decoration: underline;
}


/* COOKIE BANNER */
/* COOKIE BANNER */
.cookie-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: bottom 0.5s ease;
  box-sizing: border-box;
  z-index: 9999;
}

.cookie-banner a {
  color: #4a91e295;
  text-decoration: underline;
}

.button-container {
  display: flex;
  gap: 12px;
}

.cookie-banner button {
  background-color: #4a7bb48b;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cookie-banner button:hover {
  background-color: #6395c1;
}


@media (max-width: 750px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 12px;
    bottom: 0;
    height: 40vh;
    justify-content: flex-start;
    overflow-y: auto;
    z-index: 99999;
  }

  .cookie-banner p {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: left;
  }

  .button-container {
    flex-direction: column;
    width: 70%;
    gap: 15px;
  }

  .cookie-banner button {
    width: 100%;
    font-size: 14px;
    padding: 10px 16px;
  }
}



/* ######  Footer Mobil ###### */

@media (max-width: 750px) {
  footer {
    margin-top: 90px;
  }

  .navfooter {
    font-size: 12px;
    padding: 15px 0;
  }

  .logo-footer {
    padding: 10px;
    height: 20px;
  }

  .navfooter ul {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}




/* WHATSAPP CSS */

.whatsapp-chat {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 280px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
  z-index: 9999;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: sans-serif;
  transition: all 0.3s ease-in-out;
}

.hidden {
  display: none;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 16px;
}

.chat-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.chat-body p {
  color: rgb(215, 215, 215);
  font-weight: 100;
  margin: 0;
  font-size: 14px;
}

.chat-body input {
  width: 85%;
  padding: 8px;
  margin-top: 20px;;
  border-radius: 6px;
  border: none;
  font-size: 12px;
}

.chat-body button {
  padding: 8px;
  width: 50%;
  margin-top: 20px;
  background: #25D366;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}