:root{
  --pink:#ff2f9d;
  --pink-soft:#ff58b4;
  --bg:#050607;
  --text:#f4f2f6;
  --muted:rgba(255,255,255,.64);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  overflow-x:hidden;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#050607 !important;
  position:relative;
}

a{
  color:inherit;
  text-decoration:none;
}

/* GLOBAL BACKGROUND */
.site-background{
  position:fixed;
  inset:0;
  z-index:-20;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 72% 35%, rgba(255, 47, 157, 0.055), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.58)),
    url("assets/anthracite-background.png");
  background-size:100% 100%,100% 100%,cover;
  background-position:center center,center center,center center;
  background-repeat:no-repeat,no-repeat,no-repeat;
}

.site-background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.38) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0.08), rgba(0,0,0,0.28));
}

.page-noise{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.28;
  mix-blend-mode:soft-light;
  background-image:
    radial-gradient(rgba(255,255,255,.055) .42px, transparent .85px),
    radial-gradient(rgba(255,255,255,.028) .42px, transparent 1.1px),
    linear-gradient(135deg, rgba(255,255,255,.02), transparent 38%, rgba(0,0,0,.18));
  background-size:3px 3px,7px 7px,100% 100%;
}

.page-vignette{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 44%, rgba(0,0,0,.38) 100%);
}

.site-shell{
  width:min(1700px,calc(100vw - 42px));
  margin:12px auto 0;
  position:relative;
}

/* HEADER */
.topbar{
  position:relative;
  z-index:20;
  min-height:70px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(10,11,14,.72), rgba(8,9,12,.52)),
    radial-gradient(circle at 98% 50%, rgba(255,47,157,.12), transparent 24%);
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.20),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(10px) saturate(125%);
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,47,157,.07), transparent 22%, transparent 78%, rgba(255,47,157,.08));
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}

.brand-mark{
  width:42px;
  height:28px;
  position:relative;
}

.brand-mark .bar{
  position:absolute;
  height:9px;
  border-radius:2px;
  transform:skewX(-35deg);
}

.brand-mark .top.pink{left:0;top:1px;width:26px;background:var(--pink);}
.brand-mark .top.silver{left:21px;top:1px;width:18px;background:#dcdde0;}
.brand-mark .bottom.pink{left:15px;bottom:1px;width:26px;background:var(--pink);}
.brand-mark .bottom.silver{left:0;bottom:1px;width:18px;background:#dcdde0;}

.brand-text{
  font-size:20px;
  letter-spacing:5px;
  font-weight:600;
  color:#f0edf3;
}

.brand-text span{
  color:var(--pink);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:44px;
}

.main-nav a{
  color:rgba(255,255,255,.78);
  font-size:12px;
  letter-spacing:1.45px;
  text-transform:uppercase;
  transition:.25s ease;
}

.main-nav a span{
  color:rgba(255,255,255,.34);
  margin-left:7px;
  font-size:10px;
}

.main-nav a:hover{
  color:var(--pink);
}

.contact-pill{
  height:44px;
  min-width:170px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1.5px;
  color:#fff;
  background:linear-gradient(180deg,rgba(25,20,28,.58),rgba(15,16,20,.42));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 20px rgba(255,47,157,.08),
    0 0 24px rgba(255,47,157,.16);
  transition:.25s ease;
}

.contact-pill:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.45),
    0 0 28px rgba(255,47,157,.26);
}

/* HERO */
.hero-panel{
  position:relative;
  margin-top:-2px;
  padding:26px 18px 18px;
  border-radius:0 0 22px 22px;
  min-height:auto;
  overflow:hidden;
  background:transparent !important;
  box-shadow:none;
}

.hero-bg,
.hero-texture{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-bg{
  opacity:.72;
  background:
    radial-gradient(circle at 74% 31%, rgba(255,47,157,.055), transparent 22%),
    radial-gradient(circle at 72% 65%, rgba(255,47,157,.06), transparent 28%) !important;
}

.hero-texture{
  opacity:.10 !important;
  mix-blend-mode:soft-light;
  background-image:
    radial-gradient(rgba(255,255,255,.03) .45px, transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0));
  background-size:4px 4px,100% 100%;
}

.hero-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0,.75fr) minmax(720px,1.25fr);
}

.hero-left{
  padding:24px 0 0 8px;
}

.hero-left h1{
  font-size:clamp(54px,5.3vw,82px);
  line-height:1.04;
  font-weight:700;
  text-transform:uppercase;
  color:#f4f3f6;
  margin-bottom:20px;
}

.hero-left h1 span{
  color:var(--pink);
  text-shadow:0 0 18px rgba(255,47,157,.18);
}

.hero-left p{
  max-width:440px;
  font-size:16px;
  line-height:1.62;
  color:var(--muted);
  margin-bottom:30px;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:36px;
}

.btn-primary{
  min-height:48px;
  padding:0 28px;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(180deg,#ff3aa5,#de1f79);
  color:#fff;
  font-size:12px;
  letter-spacing:1.25px;
  text-transform:uppercase;
  box-shadow:
    0 14px 28px rgba(255,47,157,.16),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:.25s ease;
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-link{
  color:#efedf2;
  font-size:12px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  padding-bottom:10px;
  border-bottom:2px solid var(--pink);
}

.hero-right {
  position: relative;
  min-height: 650px;
  overflow: visible;
}

.particle-frame {
  position: relative;
  width: 125%;
  height: 650px;
  transform: scale(1.18) translateX(-3%) translateY(5%);
  transform-origin: center center;
  opacity: .98;
  overflow: hidden;

  -webkit-mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,0.92) 72%,
    rgba(0,0,0,0.55) 84%,
    rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center,
    rgba(0,0,0,1) 58%,
    rgba(0,0,0,0.92) 72%,
    rgba(0,0,0,0.55) 84%,
    rgba(0,0,0,0) 100%);
}
#particleCanvas{
  width:100%;
  height:100%;
  display:block;
  filter:
    drop-shadow(0 0 14px rgba(255,47,157,.14))
    drop-shadow(0 0 30px rgba(255,47,157,.06));
}

/* FLIP CARDS */
.cards-row{
  position:relative;
  z-index:4;
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.flip-card{
  min-height:250px;
  perspective:1200px;
}

.flip-card-inner{
  position:relative;
  width:100%;
  height:250px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.flip-card:hover .flip-card-inner{
  transform:rotateY(180deg);
}

.flip-card-front,
.flip-card-back{
  position:absolute;
  inset:0;
  border-radius:14px;
  backface-visibility:hidden;
}

.info-card{
  min-height:250px;
  border-radius:14px;
  padding:22px 18px 18px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(14,15,19,.72),rgba(8,9,12,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.14);
  backdrop-filter:blur(10px) saturate(120%);
}

.info-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 0, rgba(255,47,157,.05), transparent 35%),
    radial-gradient(rgba(255,255,255,.02) .45px, transparent 1px);
  background-size:100% 100%,4px 4px;
  opacity:.75;
}

.info-card > *{
  position:relative;
  z-index:1;
}

.info-card .icon{
  color:var(--pink);
  font-size:34px;
  margin-bottom:20px;
  text-shadow:0 0 16px rgba(255,47,157,.35);
}

.info-card h3{
  font-size:18px;
  line-height:1.28;
  letter-spacing:1.1px;
  margin-bottom:12px;
  color:#f6f3f6;
  text-transform:uppercase;
}

.info-card p{
  color:rgba(255,255,255,.62);
  line-height:1.55;
  font-size:14px;
  min-height:74px;
}

.info-card a{
  display:inline-block;
  margin-top:16px;
  color:var(--pink);
  font-size:13px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.flip-card-back{
  transform:rotateY(180deg);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(14,15,19,.78), rgba(8,9,12,.62)),
    radial-gradient(circle at 50% 0, rgba(255,47,157,.10), transparent 45%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.14);
  backdrop-filter:blur(10px) saturate(130%);
}

.flip-card-back h4{
  font-size:14px;
  letter-spacing:2px;
  color:var(--pink);
  text-transform:uppercase;
  margin-bottom:14px;
}

.flip-card-back p{
  color:rgba(255,255,255,.75);
  line-height:1.7;
  font-size:15px;
}

.info-card.featured,
.featured-back{
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.78),
    0 0 22px rgba(255,47,157,.10),
    0 14px 30px rgba(0,0,0,.14);
}

.featured-corner{
  position:absolute;
  top:14px;
  right:16px;
  color:rgba(255,255,255,.55);
  font-size:15px;
  animation:rotateCorner 4s linear infinite;
}

@keyframes rotateCorner{
  to{transform:rotate(360deg);}
}

/* REMOVE LOGO/COMPANY ROW */
.logos-zone{
  display:none !important;
}

/* BELOW */
.below-section{
  padding:30px 8px 90px;
  background:transparent !important;
}

.below-card{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:32px;
  border-radius:18px;
  background-color:rgba(8, 9, 12, 0.56) !important;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

.below-card h2{
  font-size:32px;
  margin-bottom:12px;
  text-transform:uppercase;
}

.below-card p{
  color:var(--muted);
  line-height:1.7;
}

@media (max-width:1380px){
  .main-nav{gap:24px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-right{min-height:420px;}
  .particle-frame{height:420px;transform:scale(.92);}
  .cards-row{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:900px){
  .site-shell{
    width:calc(100vw - 18px);
    margin:10px auto 0;
  }

  .topbar{
    padding:0 16px;
    min-height:72px;
  }

  .brand-text{
    font-size:18px;
    letter-spacing:4px;
  }

  .main-nav{display:none;}

  .contact-pill{
    min-width:134px;
    height:42px;
    font-size:11px;
  }

  .hero-panel{
    padding:18px 12px 24px;
  }

  .hero-left h1{font-size:48px;}

  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .particle-frame{height:320px;transform:none;}
  .cards-row{grid-template-columns:1fr;}
}


/* ==========================================================
   V26 HEADER EXAKTER NACH BILD 2
   ========================================================== */

.site-shell {
  width: min(1700px, calc(100vw - 42px)) !important;
  margin: 18px auto 0 !important;
}

/* Header selbst ist bewusst schmaler, wie im Referenzbild */
.topbar {
  width: min(1228px, 100%) !important;
  margin: 0 auto !important;
  min-height: 78px !important;
  padding: 0 31px !important;
  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(13, 14, 18, 0.78), rgba(7, 8, 11, 0.58)),
    radial-gradient(circle at 96% 50%, rgba(255,47,157,0.16), transparent 22%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,0.26),
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 18px 38px rgba(0,0,0,0.28) !important;

  backdrop-filter: blur(9px) saturate(118%) !important;
}

.topbar::before {
  border-radius: 18px !important;
  background:
    linear-gradient(90deg,
      rgba(255,47,157,0.07) 0%,
      transparent 18%,
      transparent 82%,
      rgba(255,47,157,0.09) 100%
    ) !important;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,47,157,0.72), transparent);
  box-shadow: 0 0 14px rgba(255,47,157,0.38);
}

.brand {
  gap: 14px !important;
}

.brand-mark {
  width: 39px !important;
  height: 27px !important;
}

.brand-mark .bar {
  height: 9px !important;
  border-radius: 2px !important;
}

.brand-mark .top.pink {
  left: 0 !important;
  top: 1px !important;
  width: 25px !important;
}

.brand-mark .top.silver {
  left: 20px !important;
  top: 1px !important;
  width: 18px !important;
}

.brand-mark .bottom.pink {
  left: 14px !important;
  bottom: 1px !important;
  width: 25px !important;
}

.brand-mark .bottom.silver {
  left: 0 !important;
  bottom: 1px !important;
  width: 18px !important;
}

.brand-text {
  font-size: 19px !important;
  letter-spacing: 5.4px !important;
  font-weight: 600 !important;
}

.main-nav {
  gap: 47px !important;
  margin-left: 54px !important;
  margin-right: auto !important;
}

.main-nav a {
  font-size: 11.5px !important;
  letter-spacing: 1.55px !important;
  color: rgba(255,255,255,0.78) !important;
}

.main-nav a span {
  margin-left: 6px !important;
  font-size: 9.5px !important;
  color: rgba(255,255,255,0.38) !important;
}

.contact-pill {
  width: 132px !important;
  min-width: 132px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 11.5px !important;
  letter-spacing: 1.35px !important;
  gap: 10px !important;

  background:
    linear-gradient(180deg, rgba(26,20,30,0.64), rgba(14,15,19,0.44)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 0 18px rgba(255,47,157,0.10),
    0 0 32px rgba(255,47,157,0.26) !important;
}

.contact-pill:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,0.54),
    inset 0 0 18px rgba(255,47,157,0.13),
    0 0 36px rgba(255,47,157,0.34) !important;
}

/* Header soll unabhängig von der Hero-Breite bleiben */
.hero-panel {
  margin-top: 18px !important;
}

/* Falls der Bildschirm kleiner wird */
@media (max-width: 1280px) {
  .topbar {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  .main-nav {
    gap: 25px !important;
    margin-left: 24px !important;
  }
}

@media (max-width: 900px) {
  .topbar {
    width: calc(100vw - 18px) !important;
    min-height: 72px !important;
    padding: 0 16px !important;
  }

  .brand-text {
    font-size: 18px !important;
    letter-spacing: 4px !important;
  }
}


/* ==========================================================
   V27: ECHTES FIRMENLOGO AUS DER REFERENZ
   Kein CSS-Fake mehr.
   ========================================================== */

.real-brand {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.header-logo-img {
  display: block !important;
  width: 222px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(255, 47, 157, 0.08));
}

/* Alte Fake-Logo-Regeln sicher neutralisieren, falls Browser noch Cache nutzt */
.real-brand .brand-mark,
.real-brand .brand-text {
  display: none !important;
}

@media (max-width: 900px) {
  .header-logo-img {
    width: 190px !important;
  }
}

@media (max-width: 520px) {
  .header-logo-img {
    width: 160px !important;
  }
}


/* ==========================================================
   V28: NEUE KACHELN + EIGENE BEREICHE
   Branchen entfernt, Lösungen/Expertise/Über uns/Wissen/Kontakt ergänzt.
   ========================================================== */

.main-nav {
  gap: 52px;
}

.cards-row {
  margin-top: 18px;
}

/* Kacheln bleiben hochwertig und drehen sich */
.flip-card {
  min-height: 250px;
  perspective: 1300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 250px;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.8,.2,1);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(14,15,19,.80), rgba(8,9,12,.66)),
    radial-gradient(circle at 50% 0, rgba(255,47,157,.12), transparent 48%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.14);
  backdrop-filter: blur(10px) saturate(130%);
}

.flip-card-back h4 {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.flip-card-back p {
  color: rgba(255,255,255,.76);
  line-height: 1.7;
  font-size: 15px;
}

.featured-back {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.78),
    0 0 22px rgba(255,47,157,.12),
    0 14px 30px rgba(0,0,0,.14);
}

/* alte Firmen-/Logozeile bleibt entfernt */
.logos-zone {
  display: none !important;
}

/* Inhaltsbereiche unter den Kacheln */
.content-section {
  padding: 34px 8px 0;
  position: relative;
  z-index: 4;
}

.content-section:last-of-type {
  padding-bottom: 90px;
}

.content-box {
  max-width: 1228px;
  margin: 0 auto;
  padding: 34px 34px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14,15,19,.68), rgba(8,9,12,.52));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.16);
  backdrop-filter: blur(10px) saturate(120%);
}

.section-kicker {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.content-box h2 {
  font-size: clamp(30px, 3vw, 46px);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  color: #f4f3f6;
}

.content-box p {
  max-width: 880px;
  color: rgba(255,255,255,.68);
  font-size: 16px;
  line-height: 1.75;
}

.content-button {
  margin-top: 24px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg,#ff3aa5,#de1f79);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  box-shadow:
    0 14px 28px rgba(255,47,157,.16),
    inset 0 1px 0 rgba(255,255,255,.22);
}

@media (max-width: 1380px) {
  .main-nav {
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .content-box {
    padding: 28px 22px;
  }
}


/* ==========================================================
   V29: KACHELN = TÄTIGKEITSBEREICHE
   Header-Punkte bleiben Bereiche darunter.
   ========================================================== */

.activity-cards {
  grid-template-columns: repeat(6, 1fr);
}

.activity-cards .info-card h3 {
  font-size: 15px;
  letter-spacing: 1.05px;
}

.activity-cards .info-card p {
  font-size: 13px;
  min-height: 58px;
}

.activity-cards .info-card .icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.activity-cards .info-card a {
  margin-top: 12px;
  font-size: 12px;
}

.activity-cards .flip-card,
.activity-cards .flip-card-inner {
  min-height: 245px;
  height: 245px;
}

.solution-list {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.solution-list div {
  padding: 16px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(14,15,19,.66), rgba(8,9,12,.52));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.12);
  color: rgba(255,255,255,.74);
  line-height: 1.5;
  backdrop-filter: blur(8px) saturate(120%);
}

@media (max-width: 1500px) {
  .activity-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .activity-cards {
    grid-template-columns: 1fr;
  }

  .solution-list {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   V30: RÜCKSEITEN-TEXT DER KACHELN VERSTECKEN
   Rückseite ist erst sichtbar, wenn die Karte wirklich gedreht wird.
   ========================================================== */

.flip-card {
  position: relative;
  perspective: 1300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 245px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.2,.8,.2,1);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Vorderseite ist normal sichtbar */
.flip-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Rückseite ist nach hinten gedreht und zusätzlich unsichtbar */
.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* Beim Hover wird die Rückseite sichtbar */
.flip-card:hover .flip-card-back {
  opacity: 1;
}

/* Beim Hover wird die Vorderseite ausgeblendet */
.flip-card:hover .flip-card-front {
  opacity: 0;
}


/* ==========================================================
   V33: PREMIUM-KACHELN STATT SCHÄBIGER FLIP-ANIMATION
   Keine 3D-Drehung mehr. Ruhiger, hochwertiger Hover.
   Partikelanimation bleibt unverändert.
   ========================================================== */

/* Kachel-Grid sauber setzen */
.cards-row,
.activity-cards {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px !important;
  align-items: stretch;
}

/* 3D-Flip komplett deaktivieren */
.flip-card {
  perspective: none !important;
  transform: none !important;
  min-height: 250px !important;
  height: 250px !important;
  contain: layout paint;
}

.flip-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;

  transform: none !important;
  -webkit-transform: none !important;

  transform-style: flat !important;
  -webkit-transform-style: flat !important;

  transition: none !important;
  will-change: auto !important;
}

.flip-card:hover .flip-card-inner {
  transform: none !important;
  -webkit-transform: none !important;
}

/* Rückseite ausblenden, weil sie billig wirkt und vorher Probleme gemacht hat */
.flip-card-back {
  display: none !important;
}

/* Vorderseite wird zur hochwertigen statischen Kachel */
.flip-card-front.info-card,
.info-card {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;

  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;

  opacity: 1 !important;
  overflow: hidden;

  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(18,19,24,.78), rgba(8,9,12,.62)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.13), transparent 48%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 16px 34px rgba(0,0,0,.18) !important;

  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s cubic-bezier(.22,.61,.36,1),
    background .28s cubic-bezier(.22,.61,.36,1) !important;
}

/* dezenter Neon-Schein innerhalb der Kachel */
.flip-card-front.info-card::before,
.info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% -8%, rgba(255,47,157,.24), transparent 38%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);

  opacity: .35;
  transition: opacity .28s ease;
}

/* feiner pinker Hover-Rand */
.flip-card-front.info-card::after,
.info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.0),
    inset 0 0 22px rgba(255,47,157,.0);

  transition: box-shadow .28s ease;
}

/* Hover: kein Drehen, nur edles Anheben */
.flip-card:hover .flip-card-front.info-card,
.flip-card:hover .info-card {
  transform: translateY(-8px) !important;
  -webkit-transform: translateY(-8px) !important;

  opacity: 1 !important;

  background:
    linear-gradient(180deg, rgba(24,25,31,.84), rgba(10,11,15,.68)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.20), transparent 50%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.34),
    0 20px 44px rgba(0,0,0,.24),
    0 0 26px rgba(255,47,157,.08) !important;
}

.flip-card:hover .flip-card-front.info-card::before,
.flip-card:hover .info-card::before {
  opacity: .70;
}

.flip-card:hover .flip-card-front.info-card::after,
.flip-card:hover .info-card::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.45),
    inset 0 0 24px rgba(255,47,157,.06);
}

/* Featured-Kachel nur etwas stärker, aber nicht billig */
.flip-card-front.info-card.featured,
.info-card.featured {
  background:
    linear-gradient(180deg, rgba(24,20,28,.82), rgba(9,9,13,.66)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.22), transparent 48%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.36),
    0 18px 38px rgba(0,0,0,.20),
    0 0 22px rgba(255,47,157,.08) !important;
}

/* Inhalt über den Effekten halten */
.info-card > * {
  position: relative;
  z-index: 2;
}

/* Icons hochwertiger */
.info-card .icon {
  filter: drop-shadow(0 0 10px rgba(255,47,157,.18));
  transform: translateY(0);
  transition: transform .28s ease, filter .28s ease;
}

.flip-card:hover .info-card .icon {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 14px rgba(255,47,157,.30));
}

/* Link unten ruhiger */
.info-card a {
  transition: color .25s ease, transform .25s ease;
}

.flip-card:hover .info-card a {
  transform: translateX(3px);
}

/* Kachel-Texte kompakter und sauberer */
.activity-cards .info-card h3,
.info-card h3 {
  font-size: 14px !important;
  letter-spacing: 1.15px;
  line-height: 1.25;
}

.activity-cards .info-card p,
.info-card p {
  font-size: 13px !important;
  line-height: 1.55;
}

/* Responsive sauber */
@media (max-width: 1500px) {
  .cards-row,
  .activity-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cards-row,
  .activity-cards {
    grid-template-columns: 1fr;
  }

  .flip-card {
    height: 230px !important;
    min-height: 230px !important;
  }
}


/* ==========================================================
   V34: KACHELN = REINE LINKS OHNE ANIMATION
   Klick auf Kachel springt direkt zum passenden Bereich in "Das machen wir".
   ========================================================== */

html {
  scroll-behavior: auto !important;
}

/* alte Flip-Karten komplett neutralisieren */
.flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back,
.info-card {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.flip-card-back {
  display: none !important;
}

/* Neue Link-Kacheln */
.service-link-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px !important;
  margin-top: 18px;
}

.service-link-card {
  min-height: 235px;
  padding: 24px 20px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background:
    linear-gradient(180deg, rgba(18,19,24,.78), rgba(8,9,12,.62)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.12), transparent 48%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 16px 34px rgba(0,0,0,.18);

  color: rgba(255,255,255,.78);
  text-decoration: none;

  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.service-link-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.45),
    0 16px 34px rgba(0,0,0,.18),
    0 0 22px rgba(255,47,157,.08);
}

.service-link-featured {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.38),
    0 16px 34px rgba(0,0,0,.18),
    0 0 18px rgba(255,47,157,.08);
}

.service-link-icon {
  font-size: 28px;
  margin-bottom: 14px;
}

.service-link-card h3 {
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 1.15px;
  text-transform: uppercase;
  color: #f4f3f6;
  margin-bottom: 12px;
}

.service-link-card p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
  margin-bottom: 18px;
}

.service-link-card span {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* "Das machen wir" Bereich */
#das-machen-wir {
  scroll-margin-top: 40px;
}

.services-layout {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 22px;
  align-items: start;
}

.service-main-list {
  display: grid;
  gap: 16px;
}

.service-detail-card {
  scroll-margin-top: 42px;
  padding: 24px 24px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(14,15,19,.72), rgba(8,9,12,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.14);
}

.service-detail-card:target {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.72),
    0 0 28px rgba(255,47,157,.12),
    0 12px 24px rgba(0,0,0,.14);
}

.service-number {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.service-detail-card h3 {
  color: #f4f3f6;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 20px;
  margin-bottom: 10px;
}

.service-detail-card p {
  color: rgba(255,255,255,.66);
  line-height: 1.7;
}

.service-side-panel {
  position: sticky;
  top: 28px;
  padding: 24px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(12,13,17,.80), rgba(7,8,11,.66)),
    radial-gradient(circle at 50% 0, rgba(255,47,157,.10), transparent 44%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.14);
}

.service-side-panel h3 {
  color: #f4f3f6;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.service-side-panel > p {
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin-bottom: 18px;
}

.side-service {
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.side-service strong {
  display: block;
  color: rgba(255,255,255,.82);
  margin-bottom: 7px;
  font-size: 14px;
}

.side-service span {
  display: block;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  font-size: 13px;
}

@media (max-width: 1500px) {
  .service-link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .services-layout {
    grid-template-columns: 1fr;
  }

  .service-side-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 900px) {
  .service-link-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   V35: "DAS MACHEN WIR" KOMPAKT
   Alle Hauptleistungen sind auf Desktop gleichzeitig ersichtlich.
   ========================================================== */

/* Bereich insgesamt kompakter */
#das-machen-wir .content-box {
  padding: 30px 32px;
}

/* Text oben etwas kürzer/kompakter darstellen */
#das-machen-wir .content-box > p {
  max-width: 980px;
  margin-bottom: 0;
}

/* Hauptleistungen links als 2-spaltige Übersicht */
.services-layout {
  margin-top: 26px !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 18px !important;
}

/* 6 Bereiche sichtbar: 2 Spalten x 3 Reihen */
.service-main-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Einzelne Service-Blöcke kleiner, damit alles auf einmal sichtbar ist */
.service-detail-card {
  min-height: 138px;
  padding: 18px 18px !important;
  border-radius: 14px !important;
}

.service-number {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

.service-detail-card h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

.service-detail-card p {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Seitenbereich kompakter, damit auch die zusätzlichen Leistungen sichtbar bleiben */
.service-side-panel {
  position: relative !important;
  top: auto !important;
  padding: 20px !important;
}

.service-side-panel h3 {
  font-size: 16px !important;
}

.service-side-panel > p {
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

.side-service {
  padding: 12px 0 !important;
}

.side-service strong {
  font-size: 13px !important;
  margin-bottom: 5px !important;
}

.side-service span {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Angeclickter Bereich wird sichtbar markiert */
.service-detail-card:target {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.82),
    0 0 28px rgba(255,47,157,.16),
    0 12px 24px rgba(0,0,0,.14) !important;
}

/* Bei mittleren Bildschirmen bleibt es noch übersichtlich */
@media (max-width: 1200px) {
  .services-layout {
    grid-template-columns: 1fr !important;
  }

  .service-main-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobil untereinander */
@media (max-width: 760px) {
  .service-main-list {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================
   V36: ANGEKLICKTE SPARTE NEON MARKIEREN,
   aber immer das Hauptfeld "Das machen wir" anzeigen.
   ========================================================== */

.service-detail-card.active-service {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.88),
    0 0 34px rgba(255,47,157,.18),
    0 12px 24px rgba(0,0,0,.14) !important;

  background:
    linear-gradient(180deg, rgba(22,16,25,.78), rgba(8,9,12,.60)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.15), transparent 48%) !important;
}

.service-detail-card.active-service h3 {
  color: #fff;
}

.service-detail-card.active-service .service-number {
  color: #ff3fa6;
}

/* kein sanftes Scrollen, sondern direkt ins Hauptfeld */
html {
  scroll-behavior: auto !important;
}


/* ==========================================================
   V37: "DAS MACHEN WIR" NACH KLICK SCHÖNER MITTIG
   ========================================================== */

#das-machen-wir {
  scroll-margin-top: 0 !important;
}


/* ==========================================================
   V38: EXPERTISE-BEREICH MIT BILD RECHTS
   ========================================================== */

.expertise-box {
  overflow: hidden;
  position: relative;
}

.expertise-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  gap: 34px;
  align-items: center;
}

.expertise-copy {
  position: relative;
  z-index: 2;
}

.expertise-copy p:not(.section-kicker) {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(255,255,255,.68);
}

.expertise-visual {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.expertise-visual::before {
  content: "";
  position: absolute;
  width: 78%;
  height: 72%;
  right: 6%;
  bottom: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,47,157,.20), rgba(255,47,157,.07) 42%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.expertise-visual img {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
  max-height: 430px;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 20px 34px rgba(0,0,0,.34))
    drop-shadow(0 0 22px rgba(255,47,157,.12));
}

/* Auf kleineren Bildschirmen Bild unter den Text */
@media (max-width: 1050px) {
  .expertise-layout {
    grid-template-columns: 1fr;
  }

  .expertise-visual {
    min-height: 300px;
  }

  .expertise-visual img {
    max-height: 340px;
  }
}


/* ==========================================================
   V39: TEXTABSTAND FÜR EXPERTISE UND ÜBER UNS
   ========================================================== */

.expertise-copy p + p,
#about .content-box p + p {
  margin-top: 16px;
}


/* ==========================================================
   V41: ÜBER UNS FIX - TEXT + BILD SICHTBAR EINGEFÜGT
   ========================================================== */

.about-box {
  position: relative;
  overflow: hidden;
  min-height: 620px;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, .9fr);
  gap: 40px;
  align-items: center;
}

.about-copy {
  position: relative;
  z-index: 3;
}

.about-copy p:not(.section-kicker) {
  max-width: 780px;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(255,255,255,.70);
}

.about-copy p + p {
  margin-top: 18px;
}

.about-visual {
  position: relative;
  z-index: 2;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-visual::before {
  content: "";
  position: absolute;
  width: 82%;
  height: 72%;
  right: 5%;
  bottom: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,47,157,.20), rgba(255,47,157,.08) 42%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}

.about-visual img {
  display: block;
  position: relative;
  z-index: 3;
  width: min(620px, 100%);
  max-height: 620px;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 24px 38px rgba(0,0,0,.36))
    drop-shadow(0 0 26px rgba(255,47,157,.12));
}

@media (max-width: 1100px) {
  .about-box {
    min-height: auto;
  }

  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-visual {
    min-height: 360px;
  }

  .about-visual img {
    max-height: 430px;
  }
}


/* ==========================================================
   V42: WISSEN ALS AUFKLAPPBARE REITER
   Nur Überschriften sichtbar, Text öffnet per Klick.
   ========================================================== */

.knowledge-box {
  position: relative;
}

.knowledge-intro {
  margin-bottom: 26px;
}

.knowledge-accordion {
  display: grid;
  gap: 14px;
}

.knowledge-item {
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14,15,19,.72), rgba(8,9,12,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.14);
}

.knowledge-item[open] {
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.55),
    0 0 26px rgba(255,47,157,.10),
    0 12px 24px rgba(0,0,0,.14);
}

.knowledge-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  color: #f4f3f6;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.knowledge-item summary::-webkit-details-marker {
  display: none;
}

.knowledge-item summary::after {
  content: "+";
  color: var(--pink);
  font-size: 24px;
  line-height: 1;
  flex: 0 0 auto;
}

.knowledge-item[open] summary::after {
  content: "–";
}

.knowledge-item p {
  padding: 0 22px 22px;
  max-width: 980px;
  color: rgba(255,255,255,.68);
  font-size: 16px;
  line-height: 1.75;
}


/* ==========================================================
   V43: WISSEN-ÜBERSCHRIFT NEON NUR WENN ANGEKLICKT / OFFEN
   ========================================================== */

.knowledge-item summary {
  color: #f4f3f6;
  text-shadow: none;
}

.knowledge-item[open] summary {
  color: #ff3fa6;
  text-shadow:
    0 0 8px rgba(255,47,157,.45),
    0 0 18px rgba(255,47,157,.28),
    0 0 32px rgba(255,47,157,.16);
}

.knowledge-item[open] summary::after {
  color: #ff3fa6;
  text-shadow:
    0 0 8px rgba(255,47,157,.55),
    0 0 20px rgba(255,47,157,.34);
}


/* ==========================================================
   V44: KONTAKTFELD MIT KONTAKTDATEN + QR-CODE
   ========================================================== */

.contact-box {
  position: relative;
  overflow: hidden;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: center;
}

.contact-copy p:not(.section-kicker) {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.70);
}

.contact-details {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
}

.contact-detail {
  padding: 16px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(14,15,19,.72), rgba(8,9,12,.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 24px rgba(0,0,0,.12);
}

.contact-detail span {
  display: block;
  color: var(--pink);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.contact-detail strong,
.contact-detail a {
  color: rgba(255,255,255,.86);
  font-size: 15px;
  line-height: 1.45;
  text-decoration: none;
}

.contact-detail a:hover {
  color: #ff3fa6;
}

.contact-qr-card {
  position: relative;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(15,16,22,.82), rgba(7,8,12,.68)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.16), transparent 50%);
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.28),
    0 18px 36px rgba(0,0,0,.22),
    0 0 28px rgba(255,47,157,.08);
}

.contact-qr-card img {
  width: 220px;
  max-width: 100%;
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow:
    0 16px 28px rgba(0,0,0,.28),
    0 0 22px rgba(255,47,157,.12);
}

.contact-qr-card h3 {
  color: #f4f3f6;
  font-size: 17px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.contact-qr-card p {
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-qr-card {
    max-width: 360px;
  }
}

@media (max-width: 700px) {
  .contact-details {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   V47: EINFACHE DISPLAY-ANPASSUNG AUF BASIS DER NEUESTEN VERSION
   Nur kleine Displays:
   - Layout sauber skalieren
   - Kacheln am Handy ausblenden
   - Partikel hinter den großen Hero-Text legen
   Desktop bleibt unverändert.
   ========================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .site-shell {
    width: calc(100vw - 14px) !important;
    margin: 10px auto 0 !important;
  }

  .topbar {
    width: 100% !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }

  .main-nav {
    display: none !important;
  }

  .header-logo-img {
    width: 145px !important;
  }

  .contact-pill {
    min-width: 118px !important;
    width: 118px !important;
    height: 42px !important;
    font-size: 10.5px !important;
    letter-spacing: 1.1px !important;
    flex-shrink: 0;
  }

  .hero-panel {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 10px !important;
    padding: 16px 8px 28px !important;
  }

  .hero-grid {
    position: relative !important;
    display: block !important;
    min-height: 610px !important;
  }

  .hero-left {
    position: relative !important;
    z-index: 5 !important;
    padding: 24px 4px 0 !important;
  }

  .hero-left h1 {
    font-size: clamp(38px, 12vw, 66px) !important;
    line-height: .96 !important;
    letter-spacing: -0.6px !important;
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .hero-left p {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    position: relative !important;
    z-index: 6 !important;
  }

  .hero-actions {
    position: relative !important;
    z-index: 6 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .btn-primary {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  /* Partikel nur am Handy hinter den großen Text */
  .hero-right {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    pointer-events: none !important;
    opacity: .46 !important;
    overflow: hidden !important;
  }

  .particle-frame {
    position: absolute !important;
    top: 58px !important;
    right: -38% !important;
    width: 170% !important;
    height: 520px !important;
    transform: none !important;
    opacity: .92 !important;

    -webkit-mask-image: radial-gradient(circle at 58% 48%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.92) 45%,
      rgba(0,0,0,0.55) 72%,
      rgba(0,0,0,0.12) 90%,
      rgba(0,0,0,0) 100%) !important;

    mask-image: radial-gradient(circle at 58% 48%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.92) 45%,
      rgba(0,0,0,0.55) 72%,
      rgba(0,0,0,0.12) 90%,
      rgba(0,0,0,0) 100%) !important;
  }

  #particleCanvas {
    width: 100% !important;
    height: 100% !important;
  }

  .cards-row,
  .activity-cards {
    display: none !important;
  }

  .content-section {
    padding: 26px 0 0 !important;
  }

  .content-box {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }

  .content-box h2 {
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1.05 !important;
  }

  .content-box p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 520px) {
  .site-shell {
    width: calc(100vw - 10px) !important;
  }

  .topbar {
    padding: 10px 10px !important;
  }

  .header-logo-img {
    width: 128px !important;
  }

  .contact-pill {
    width: 104px !important;
    min-width: 104px !important;
    height: 40px !important;
    font-size: 10px !important;
  }

  .hero-grid {
    min-height: 585px !important;
  }

  .hero-left {
    padding-top: 16px !important;
  }

  .hero-left h1 {
    font-size: clamp(34px, 12vw, 54px) !important;
  }

  .hero-left p {
    font-size: 14px !important;
  }

  .particle-frame {
    top: 62px !important;
    right: -48% !important;
    width: 190% !important;
    height: 470px !important;
  }
}

@media (max-width: 390px) {
  .hero-grid {
    min-height: 560px !important;
  }

  .particle-frame {
    top: 70px !important;
    right: -55% !important;
    width: 205% !important;
    height: 440px !important;
  }
}


/* ==========================================================
   V48: ADAPTIVE SCHRIFT + HERO-BUTTONS WEG + HAMBURGER-MENÜ
   - Button "Das machen wir" und "Projekte ansehen" entfernt
   - Schriftgrößen skalieren mit Displaygröße
   - Menü mit drei Strichen enthält alle Rubriken
   ========================================================== */

/* Hero-Buttons sicher ausblenden */
.hero-actions {
  display: none !important;
}

/* Normale alte Navigation / Kontaktbutton ausblenden */
.main-nav,
.contact-pill {
  display: none !important;
}

/* Header-Menü Button */
.topbar {
  position: relative !important;
}

.menu-toggle {
  width: 50px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(26,20,30,.64), rgba(14,15,19,.44));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 18px rgba(255,47,157,.10),
    0 0 28px rgba(255,47,157,.20);
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 10px;
  background: #f4f3f6;
  box-shadow: 0 0 10px rgba(255,47,157,.22);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 99;
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  border-radius: 18px;
  display: none;
  background:
    linear-gradient(180deg, rgba(13,14,18,.94), rgba(7,8,11,.86)),
    radial-gradient(circle at 100% 0%, rgba(255,47,157,.16), transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.28),
    0 24px 46px rgba(0,0,0,.36),
    0 0 34px rgba(255,47,157,.12);
  backdrop-filter: blur(12px) saturate(120%);
}

.menu-panel.is-open {
  display: grid;
  gap: 8px;
}

.menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 13px;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  letter-spacing: 1.45px;
  font-size: 12px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}

.menu-panel a::after {
  content: "↗";
  color: var(--pink);
}

.menu-panel a:hover {
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.48),
    0 0 18px rgba(255,47,157,.10);
}

/* Adaptive Schriftgrößen allgemein */
.hero-left h1 {
  font-size: clamp(42px, 5.2vw, 82px) !important;
  line-height: .98 !important;
}

.hero-left p {
  font-size: clamp(14px, 1.08vw, 17px) !important;
}

.content-box h2 {
  font-size: clamp(30px, 3.4vw, 50px) !important;
}

.content-box p {
  font-size: clamp(14px, 1.05vw, 17px) !important;
}

/* Kleine Displays: Hero-Schrift kleiner, damit nichts abgeschnitten wird */
@media (max-width: 900px) {
  .topbar {
    justify-content: space-between !important;
  }

  .menu-toggle {
    flex-shrink: 0;
  }

  .hero-grid {
    min-height: 520px !important;
  }

  .hero-left {
    padding-top: 18px !important;
  }

  .hero-left h1 {
    font-size: clamp(30px, 9.5vw, 52px) !important;
    line-height: .97 !important;
    letter-spacing: -0.9px !important;
    max-width: 100% !important;
  }

  .hero-left p {
    font-size: clamp(13px, 3.7vw, 15px) !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* Partikel nur auf kleinen Displays hinter dem großen Text */
  .hero-right {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    pointer-events: none !important;
    opacity: .42 !important;
    overflow: hidden !important;
  }

  .particle-frame {
    position: absolute !important;
    top: 26px !important;
    right: -42% !important;
    width: 185% !important;
    height: 430px !important;
    transform: none !important;
    opacity: .88 !important;
  }

  .hero-left,
  .hero-left h1,
  .hero-left p {
    position: relative !important;
    z-index: 6 !important;
  }
}

@media (max-width: 520px) {
  .hero-grid {
    min-height: 500px !important;
  }

  .hero-left h1 {
    font-size: clamp(29px, 9.2vw, 46px) !important;
  }

  .particle-frame {
    top: 36px !important;
    right: -56% !important;
    width: 215% !important;
    height: 395px !important;
  }

  .menu-panel {
    right: 0;
    width: calc(100vw - 20px);
  }
}

@media (max-width: 390px) {
  .hero-grid {
    min-height: 470px !important;
  }

  .hero-left h1 {
    font-size: clamp(27px, 8.8vw, 40px) !important;
  }

  .particle-frame {
    top: 42px !important;
    right: -66% !important;
    width: 235% !important;
    height: 365px !important;
  }
}


/* ==========================================================
   V49: MOBILE SCHLOSSBERG WEITER NACH UNTEN
   Nur kleine Displays werden angepasst.
   Desktop bleibt unverändert.
   ========================================================== */

@media (max-width: 900px) {
  .particle-frame {
    top: 70px !important;         /* Schlossberg weiter nach unten */
    right: -42% !important;
    width: 185% !important;
    height: 430px !important;
  }
}

@media (max-width: 520px) {
  .particle-frame {
    top: 95px !important;         /* iPhone / kleine Handys weiter runter */
    right: -56% !important;
    width: 215% !important;
    height: 395px !important;
  }
}

@media (max-width: 390px) {
  .particle-frame {
    top: 105px !important;        /* sehr kleine Displays */
    right: -66% !important;
    width: 235% !important;
    height: 365px !important;
  }
}


/* ==========================================================
   V50: SCHLOSSBERG AM HANDY WEITER NACH UNTEN
   Nur kleine Displays.
   ========================================================== */

@media (max-width: 900px) {
  .particle-frame {
    top: 120px !important;
    height: 460px !important;
  }
}

@media (max-width: 520px) {
  .particle-frame {
    top: 165px !important;
    height: 450px !important;
  }
}

@media (max-width: 390px) {
  .particle-frame {
    top: 180px !important;
    height: 430px !important;
  }
}


/* ==========================================================
   V51: SCHLOSSBERG AM HANDY ETWAS WEITER NACH LINKS
   + Position bleibt nur auf kleinen Displays angepasst.
   ========================================================== */

@media (max-width: 900px) {
  .particle-frame {
    right: -30% !important;       /* weniger negativ = weiter nach links */
  }
}

@media (max-width: 520px) {
  .particle-frame {
    right: -40% !important;       /* vorher weiter rechts, jetzt etwas links */
  }
}

@media (max-width: 390px) {
  .particle-frame {
    right: -46% !important;       /* sehr kleine Displays */
  }
}


/* ==========================================================
   V52: DESKTOP HEADER REPARATUR
   Desktop bekommt wieder normale Navigation.
   Hamburger-Menü nur auf kleinen Displays.
   ========================================================== */

@media (min-width: 901px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .desktop-nav,
  .main-nav {
    display: flex !important;
    align-items: center !important;
    gap: clamp(20px, 2.4vw, 44px) !important;
    margin-left: clamp(22px, 3vw, 54px) !important;
    margin-right: auto !important;
  }

  .desktop-contact,
  .contact-pill {
    display: inline-flex !important;
  }

  .menu-toggle,
  .menu-panel {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .desktop-nav,
  .main-nav,
  .desktop-contact,
  .contact-pill {
    display: none !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }

  .menu-panel {
    display: none !important;
  }

  .menu-panel.is-open {
    display: grid !important;
  }
}


/* ==========================================================
   V54: LEISTUNGEN-SEKTION
   Basic / Standard / Rundum Sorglos
   ========================================================== */

@media (min-width: 901px) {
  .desktop-nav,
  .main-nav {
    gap: clamp(14px, 1.65vw, 30px) !important;
  }

  .main-nav a {
    font-size: 11px !important;
    letter-spacing: 1.25px !important;
  }
}

.packages-box {
  position: relative;
  overflow: hidden;
}

.package-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.package-card {
  position: relative;
  padding: 26px 22px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14,15,19,.74), rgba(8,9,12,.60));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.16);
}

.package-featured {
  background:
    linear-gradient(180deg, rgba(22,16,26,.82), rgba(8,9,12,.62)),
    radial-gradient(circle at 50% 0%, rgba(255,47,157,.16), transparent 52%);
  box-shadow:
    inset 0 0 0 1px rgba(255,47,157,.55),
    0 0 28px rgba(255,47,157,.12),
    0 18px 34px rgba(0,0,0,.20);
}

.package-label {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--pink);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: rgba(255,47,157,.08);
  box-shadow: inset 0 0 0 1px rgba(255,47,157,.22);
}

.package-card h3 {
  color: #f4f3f6;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.package-subtitle {
  color: rgba(255,255,255,.62);
  font-size: 15px;
  line-height: 1.6;
  min-height: 72px;
}

.package-card ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.package-card li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.55;
}

.package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pink);
}

.package-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.56);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .package-grid {
    grid-template-columns: 1fr;
  }

  .package-subtitle {
    min-height: auto;
  }
}

@media (max-width: 520px) {
  .package-card {
    padding: 22px 18px;
  }

  .package-card h3 {
    font-size: 19px;
  }
}


/* ==========================================================
   V56: EINFACHER VORSCHAU-PASSWORTSCHUTZ
   Hinweis: Nur einfacher Schutz für Vorschau/Freunde.
   ========================================================== */

.simple-password-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,47,157,.18), transparent 34%),
    linear-gradient(135deg, #050507, #101116 48%, #050507);
  backdrop-filter: blur(18px);
}

.simple-password-screen.is-hidden {
  display: none !important;
}

.simple-password-box {
  width: min(460px, 100%);
  padding: 34px 28px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(20,21,27,.92), rgba(8,9,12,.88));
  box-shadow:
    0 24px 80px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,47,157,.16);
  text-align: center;
}

.simple-password-logo {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 2px;
  background: rgba(255,47,157,.08);
  box-shadow: inset 0 0 0 1px rgba(255,47,157,.22);
}

.simple-password-box h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.08;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.simple-password-box p {
  margin: 0 auto 24px;
  color: rgba(255,255,255,.66);
  line-height: 1.6;
}

.simple-password-box form {
  display: grid;
  gap: 12px;
}

.simple-password-box input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  font-size: 16px;
}

.simple-password-box input:focus {
  border-color: rgba(255,47,157,.65);
  box-shadow: 0 0 0 4px rgba(255,47,157,.12);
}

.simple-password-box button {
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,47,157,1), rgba(255,120,195,1));
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.simple-password-error {
  display: none;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  color: rgba(255,135,180,.95) !important;
  font-size: 14px;
}

.simple-password-error.is-visible {
  display: block;
}