html { scroll-behavior: smooth; }
    :root {
      --blur: 32px;
      --glass-alpha: 0.26;
      --glass-border: 1.6px;
      --glass-radius: 28px;
      --accent: #7ac2ff;
      --active: #3ba5ff;
    }
    body {
      margin: 0; padding: 0; min-height: 100vh;
        height: 100%;        /* hinzugefügt */
  display: flex;       /* hinzugefügt */
  flex-direction: column;
  position: relative;
      font-family: 'San Francisco', 'Segoe UI', Arial, sans-serif;
      background: 
      linear-gradient(
        180deg,
        rgba(208, 67, 210, 0.32) 0%,
        rgba(95, 8, 98, 0.29) 33%,
        rgba(249,98,211,0.26) 65%,
        rgba(24, 79, 88, 0.377) 88%,
        rgba(9, 115, 120, 0.416) 100%
      ),
      url('../images/background.png') center/cover no-repeat fixed;
      color: #172438; overflow-x: hidden;
    }
    /* Ergänzung für den Sticky Footer */
.main {
  flex: 1 0 auto;
}
.glass-footer {
  flex-shrink: 0;
}
.background-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.196); /* Wert anpassen */
  /* Übergang falls gewünscht: */
  transition: background 0.3s;
}

.background-static {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Verlauf (Gradient) und Bild übereinander! */
  background:
    linear-gradient(
      180deg,
      rgba(208, 67, 210, 0.32) 0%,
      rgba(95, 8, 98, 0.29) 33%,
      rgba(249,98,211,0.26) 65%,
      rgba(24, 79, 88, 0.377) 88%,
      rgba(9, 115, 120, 0.416) 100%
    ),
    url('../images/background.png') center/cover no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  will-change: transform;
}


    header {
      width: 100%; position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,var(--glass-alpha));
      border-bottom: var(--glass-border) solid rgba(255,255,255,0.28);
      backdrop-filter: blur(var(--blur)) saturate(1.7);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
      box-shadow: 0 4px 20px 0 rgba(125, 150, 255, 0.10);
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: center;   /* <-- statt space-between */
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 18px;
      height: 62px;
    }
.menu {
  display: flex;
  flex-wrap: nowrap; /* nie umbrechen! */
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  padding: 0 16px; /* Immer Luft rechts/links */
  scrollbar-width: none; /* Firefox: keine Scrollbar */
  -ms-overflow-style: none; /* IE 10+ */
}
.menu::-webkit-scrollbar { display: none; } /* Chrome/Safari: keine Scrollbar */

.menu button {
  padding: 8px 24px;
  font-size: 1.09rem;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: 18px;
  border-bottom: 2.5px solid rgba(124,177,255,0.43);
  background: rgba(255,255,255,0.15);
  color: #fff;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px 0 rgba(125, 150, 255, 0.12);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition:
    background 0.22s cubic-bezier(.4,2,.6,1),
    color 0.22s, box-shadow 0.22s,
    border-bottom 0.18s, transform 0.14s;
  outline: none;
  min-width: 82px;
  flex-shrink: 1;
  flex-grow: 1;
  margin: 0 2px;
}

.menu button:hover,
.menu button:focus {
  background: linear-gradient(90deg, #3ba5ff 0%, #7ac2ff 100%);
  color: #222;
  border-bottom: 2.5px solid var(--active);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 4px 28px 0 rgba(36, 123, 255, 0.18);
}

.menu button.active {
  color: #fff;
  background: linear-gradient(90deg,#2b95ed,#77c7ff 90%);
  border-bottom: 2.5px solid var(--active);
  box-shadow: 0 6px 28px 0 rgba(36, 123, 255, 0.14);
  transform: translateY(-3px) scale(1.08);
}

/* Ab 900px werden die Buttons etwas kleiner */
@media (max-width: 900px) {
  .menu {
    gap: 7px;
    padding: 0 10px;
  }
  .menu button {
    padding: 6px 14px;
    font-size: 0.96rem;
    border-radius: 12px;
    min-width: 64px;
  }
}

/* Ab 700px noch kleiner */
@media (max-width: 700px) {
  .menu {
    gap: 3px;
    padding: 0 7px;
    justify-content: space-between;
  }
  .menu button {
    padding: 4px 6px;
    font-size: 0.79rem;
    border-radius: 8px;
    min-width: 48px;
  }
}

/* Ab 440px für Mini-Screens */
@media (max-width: 440px) {
  .menu {
    gap: 1.5px;
    padding: 0 3vw;
  }
  .menu button {
    padding: 2.5px 2vw;
    font-size: 0.69rem;
    border-radius: 5px;
    min-width: 32px;
  }
}

@media (max-width: 650px) {
  /* Verstecke alle außer VI-IT, Über uns, Preise, Kontakt */
  .menu button[data-target="features"],
  .menu button[data-target="projects"],
  .menu button[data-target="teamviewer-guide"] {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .menu button[data-target="about"],
  .menu button[data-target="prices"] {
    display: none !important;
  }
}

/* --- Form Modal --- */
#form-modal-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(24,36,54,0.34);
  backdrop-filter: blur(8px);
}
.form-modal-content {
  display: flex;
  flex-direction: column; /* Anordnung der Kinder untereinander */
  align-items: center;    /* Zentriert horizontal */
  gap: 1em;               /* Abstand zwischen Text und Button */
  position: relative;
  background: rgba(240, 248, 255, 0.22);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.15);
  padding: 2.3em 2em 1.3em 2em;
  min-width: 270px;
  max-width: 90vw;
  text-align: center;
  color: #1b2a47;
  font-size: 1.18em;
  font-weight: 500;
  z-index: 2;
}

#form-modal-message {
  display: block;
  margin-bottom: 2em;
  text-align: center;
  width: 100%;
}


/* --- Floating Sidebar --- */
:root {
    --pill-size: clamp(36px, 7vw, 54px);
    --pill-radius: calc(var(--pill-size) / 2);
    --pill-width: clamp(var(--pill-size), 32vw, 265px);
}

.pill-icon img,
.pill-icon svg {
  width: 2em;
  height: 2em;
  max-width: 70%;
  max-height: 70%;
  display: block;
}

.floating-sidebar {
    position: fixed;
    right: 2vw;
    bottom: 2vw;
    /* top und transform entfernen! */
    z-index: 5200;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
}

.sidebar-pill {
    display: flex;
    align-items: center;
    width: var(--pill-size);
    height: var(--pill-size);
    background: var(--sidebar-color, #25d366);
    border-radius: var(--pill-radius);
    box-shadow: 0 1px 4px rgba(24,196,0,0.07), 0 0 6px 2px var(--sidebar-color, #bbb);
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    transition:
      width 0.24s cubic-bezier(.42,.17,.13,1.3),
      background 0.15s,
      box-shadow 0.23s cubic-bezier(.4,2.5,.3,1);
}

.pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pill-size);
    height: var(--pill-size);
    font-size: calc(var(--pill-size) * 0.52);
    /* Kein margin, kein padding! */
}

.pill-label {
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: calc(var(--pill-size) * 0.39);
    font-weight: 500;
    height: var(--pill-size);
    display: flex;
    align-items: center;
    /* border-radius optional für die rechte Seite */
    border-radius: 0 var(--pill-radius) var(--pill-radius) 0;
    pointer-events: none;
    transition: opacity 0.18s, max-width 0.22s, padding 0.16s;
}

/* HOVER-EFFEKT: ganze Kapsel fährt raus */
.floating-sidebar > .sidebar-pill:hover,
.floating-sidebar > .sidebar-pill:focus {
    width: var(--pill-width);
    background: var(--sidebar-color, #25d366);
    box-shadow: 0 0 15px 5px var(--sidebar-color, #fff);
}

.floating-sidebar > .sidebar-pill:hover .pill-label,
.floating-sidebar > .sidebar-pill:focus .pill-label {
    opacity: 1;
    max-width: 180px;
    padding: 0 22px 0 0;
    pointer-events: auto;
}

.floating-sidebar > .sidebar-pill:hover .pill-icon,
.floating-sidebar > .sidebar-pill:focus .pill-icon {
    font-size: calc(var(--pill-size) * 0.62);
}

/* Dienstfarben */
.sidebar-pill.email      { --sidebar-color: #1765c1; }
.sidebar-pill.phone      { --sidebar-color: #009688; }
.sidebar-pill.whatsapp   { --sidebar-color: #25d366; }
.sidebar-pill.viber      { --sidebar-color: #665cac; }
.sidebar-pill.telegram   { --sidebar-color: #0088cc; }
.sidebar-pill.facebook   { --sidebar-color: #1877f3; }
.sidebar-pill.instagram  { --sidebar-color: #e1306c; }
.sidebar-pill.tiktok     { --sidebar-color: #010101; }


    /* Animierte Glass Cards */
    .glass-card {
      opacity: 0;
      transform: translateY(32px) scale(.97);
      transition: opacity .66s cubic-bezier(.33,.82,.36,1), transform .77s cubic-bezier(.26,1,.28,1.01);
      will-change: opacity, transform;
      position: relative;
      border-radius: var(--glass-radius);
      background: rgba(255,255,255,var(--glass-alpha));
      box-shadow: 0 8px 38px 0 rgba(125, 150, 255, 0.13), 0 1.5px 7px 0 rgba(255,255,255,0.19) inset;
      border: var(--glass-border) solid rgba(255,255,255,0.42);
      backdrop-filter: blur(var(--blur)) saturate(1.65);
      -webkit-backdrop-filter: blur(var(--blur)) saturate(1.65);
      padding: 40px 32px 32px 32px;
      margin-bottom: 0;
      overflow: hidden;
      z-index: 2;
      background: rgba(255, 255, 255, 0.397);
    }
    .glass-card.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1.0);
      box-shadow: 0 12px 52px 0 rgba(125, 150, 255, 0.22), 0 1.5px 9px 0 rgba(255,255,255,0.17) inset;
    }
    .main { max-width: 980px; margin: 44px auto 44px auto; padding: 0 10px; display: flex; flex-direction: column; gap: 44px;}
    section { scroll-margin-top: 90px; }
    .glass-card:before { content: ''; position: absolute; left: 8%; top: 5%; width: 75%; height: 80%; border-radius: 44px;
      background: radial-gradient(circle at 25% 12%,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 65%);
      z-index: 0; pointer-events: none; filter: blur(2.5px); }
    h1, h2 { margin-top: 0; margin-bottom: 18px; font-weight: 700; letter-spacing: 0.01em; z-index: 1; position: relative;}
    h1 { font-size: 2.1rem; background: linear-gradient(90deg,#04080f,#0c245a 70%);
          background-clip: text;
          -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 12px rgba(90,150,255,0.08);}
    h2 { font-size: 1.36rem; color: #294166;}
    p, ul, li, label { font-size: 1.08rem; z-index: 1; position: relative; }
    .liquid-btn { margin-top: 18px; padding: 13px 32px; border: none; border-radius: 22px;
      background: linear-gradient(90deg,#247bff,#58d1fa 85%); color: #fff; font-weight: bold; font-size: 1.05rem;
      cursor: pointer; box-shadow: 0 4px 14px 0 rgba(36,123,255,0.15); transition: background 0.3s, box-shadow 0.2s, transform 0.15s;}
    .liquid-btn:hover { background: linear-gradient(90deg,#2e4a6f,#5ce5f5 90%); box-shadow: 0 8px 32px 0 rgba(90, 200, 255, 0.21); transform: scale(1.05);}
    .features-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 24px; margin-top: 18px; margin-bottom: 8px; padding: 0; list-style: none;}
    .feature { background: rgba(255,255,255,0.19); border: 1.3px solid rgba(255,255,255,0.35); border-radius: 18px;
      box-shadow: 0 2px 8px 0 rgba(125, 150, 255, 0.08); padding: 18px 12px; text-align: center;
      backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);}
    .form-row { margin-bottom: 14px; display: flex; flex-direction: column; align-items: flex-start;}
    label { margin-bottom: 5px; color: #2c3651;}
    input, textarea {
      border: none; border-radius: 13px; padding: 10px 14px; font-size: 1rem; width: 100%;
      background: rgba(255,255,255,0.32); color: #232b44; margin-bottom: 2px;
      box-shadow: 0 1.5px 8px 0 rgba(150, 200, 255, 0.07) inset;
      border: 1.1px solid rgba(255,255,255,0.33); backdrop-filter: blur(14px) saturate(1.2);
      -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: border .2s; outline: none;}
    input:focus, textarea:focus { border: 1.3px solid var(--accent); background: rgba(255,255,255,0.5);}
    textarea { resize: vertical; min-height: 60px; }
    .blur-light { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(28px); opacity: 0.14; z-index: 0;}
    .blur-light1 { width: 120px; height: 120px; top: -30px; left: -40px; background: #fff;}
    .blur-light2 { width: 90px; height: 90px; bottom: -22px; right: -40px; background: #8eb2f6; opacity: 0.11;}
 
.feature {
  transition:
    transform 0.22s cubic-bezier(.4,2,.6,1),
    background 0.22s,
    box-shadow 0.22s,
    color 0.22s;
  cursor: pointer;
  text-decoration:none;
  color:inherit;
}

.feature:hover, .feature:focus {
  background: linear-gradient(90deg, #3ba5ff 0%, #7ac2ff 100%);
  color: #222;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 32px 0 rgba(36, 123, 255, 0.18);
  border-color: #3ba5ff;
}
    /* footer */

    .glass-footer {
  width: 100%;
  background: rgba(255,255,255,0.17);
  border-top: 1.5px solid rgba(124,177,255,0.18);
  box-shadow: 0 -2px 22px 0 rgba(36,123,255,0.10);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  padding: 22px 0 16px 0;
  margin-top: 250px;
  font-size: 1.06rem;
  color: #203a55;
  z-index: 10;
}
.footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.footer-links {
  display: flex;
  gap: 18px;
}
.footer-links a {
  color: #203a55;
  text-decoration: none;
  font-weight: 500;
  transition: color .16s;
  border-bottom: none;
}
.footer-links a:hover {
  color: #7ac2ff;
  border-bottom: none;
}
@media (max-width: 650px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-links {
    gap: 12px;
  }
}

    @media (max-width: 800px) {
      .main { gap: 24px; }
      .glass-card { padding: 18px 8px 16px 8px; }
      nav { padding: 0 4px; }
    }
    @media (max-width: 600px) {
      .main { margin: 18px 0 12px 0; }
      h1 { font-size: 1.1rem;}
      .glass-card { border-radius: 13px; }
      .menu button { padding: 7px 11px; }
    }
    
    /* LIVE CODING Block */
.code-live-block {
  position: relative;
  border-radius: var(--glass-radius, 28px);
  background: rgba(255,255,255, var(--glass-alpha, 0.26));
  box-shadow: 0 8px 38px 0 rgba(125, 150, 255, 0.13), 0 1.5px 7px 0 rgba(255,255,255,0.19) inset;
  border: var(--glass-border, 1.6px) solid rgba(255,255,255,0.42);
  backdrop-filter: blur(var(--blur, 32px)) saturate(1.65);
  -webkit-backdrop-filter: blur(var(--blur, 32px)) saturate(1.65);
  padding: 24px 15px 18px 18px;
  margin: 44px auto 38px auto;
  min-width: 180px;
  width: 55vw;
  max-width: 900px;  /* neu: begrenzt auf großen Bildschirmen */
  min-height: 100px;
  height: 100px;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  font-size: 1.04rem;
  line-height: 1.48;
  color: #232b44;
  box-sizing: border-box;
  scrollbar-width: none;
  transition: box-shadow 0.2s, border 0.2s;
  z-index: 2;
}

/* Mobile optimiert: Nimmt fast volle Breite, keine riesigen Ränder */
@media (max-width: 650px) {
  .code-live-block {
    width: 98vw;
    min-width: 0;
    max-width: 98vw;
    margin: 22px 0 22px 0;
    padding: 14px 4vw 13px 4vw;
    font-size: 0.92rem;
  }
}
@media (max-width: 440px) {
  .code-live-block {
    width: 99vw;
    max-width: 99vw;
    margin: 12px 0 14px 0;
    padding: 8px 2vw 8px 2vw;
    font-size: 0.82rem;
  }
}
@supports (-webkit-touch-callout: none) {
  /* iOS/iPhone/iPad (und wenige Android mit WebKit) */
  .background-overlay {
    display: none !important;
  }
}
.menu button:not(.active):focus {
  /* Fokus-Effekt NICHT anzeigen, wenn nicht aktiv */
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-bottom: 2.5px solid rgba(124,177,255,0.43);
  box-shadow: 0 2px 8px 0 rgba(125, 150, 255, 0.12);
  transform: none;
}

@supports (-webkit-touch-callout: none) {
  .menu button:not(.active):focus,
  .menu button:not(.active):active {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
    border-bottom: 2.5px solid rgba(124,177,255,0.43) !important;
    box-shadow: 0 2px 8px 0 rgba(125, 150, 255, 0.12) !important;
    transform: none !important;
  }
}