/* --- GRUNDLAGEN & RESET --- */
:root {
  color-scheme: dark;
  --bg-color: #0a0a0a;
  --text-color: #ffffff;
  --accent-color: #00d4ff;
  /* Neon Cyan */
  --accent-secondary: #7000ff;
  /* Neon Purple */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}
html {
  scroll-padding-top: 0px;
}
/* WICHTIG: Der Stern * muss hier stehen! */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
}
/* --- ANIMATION --- */
.hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.show {
  opacity: 1;
  transform: translateY(0);
}
/* --- HINTERGRUND --- */
.glow, .glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  z-index: -1;
  pointer-events: none;
}
.glow {
  background:
    radial-gradient(
      circle,
      rgba(0, 212, 255, 0.15),
      transparent 70%
    );
  top: -200px;
  left: -100px;
}
.glow-2 {
  background:
    radial-gradient(
      circle,
      rgba(112, 0, 255, 0.15),
      transparent 70%
    );
  bottom: 0;
  right: 0;
}
/* --- NAV (OPTIMIERT) --- */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 10, 0.8);
  border-bottom: 1px solid var(--glass-border);
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  background:
    linear-gradient(
      90deg,
      #fff,
      var(--accent-color)
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .nav-links {
    position: absolute;
    /* WICHTIG: Zieht das Menü über den Innenabstand an den Rand */
    right: -20px; 
    
    top: 70px; /* Oder die Höhe deiner Leiste */
    height: 100vh;
    background: #0a0a0a;
    flex-direction: column;
    
    /* Mach es etwas breiter, sieht auf Mobile besser aus */
    width: 65%; 
    
    transform: translateX(100%);
    transition: 0.3s ease-in;
    border-left: 1px solid var(--glass-border);
    padding-top: 50px;
    gap: 30px;
    
    /* Damit kein weißer Rand entsteht, falls man scrollt */
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
  }

  /* Das hier hat gefehlt! Es holt das Menü zurück ins Bild */
  .nav-links.nav-active {
      transform: translateX(0%);
  }

}

.nav-links li {
  margin: 0;
  display: flex;
  align-items: center;
}
.nav-links a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-links a:hover {
  color: var(--accent-color);
}
.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: white;
}
/* NAV BUTTON (Login - Standard) */
.cta-btn-small {
  background:
    linear-gradient(
      45deg,
      var(--accent-color),
      var(--accent-secondary)
    );
  color: #ffffff !important;
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
}
.cta-btn-small:hover {
  box-shadow: 0 0 15px var(--accent-color);
}
/* --- AVATAR STYLE --- */
.nav-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--accent-color),
      var(--accent-secondary)
    );
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  padding: 0 !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  margin-left: 10px;
  text-decoration: none;
}
.nav-avatar:hover {
  transform: scale(1.1);
  border-color: #fff;
  box-shadow: 0 0 20px var(--accent-color);
}
/* --- HERO & SECTIONS --- */
header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px 20px 0;
}
h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  line-height: 1.1;
}
h1 span {
  color: var(--accent-color);
}
.subtitle {
  font-size: 1.2rem;
  color: #aaa;
  max-width: 600px;
  margin-bottom: 40px;
}
.hero-btns {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
/* HAUPT BUTTONS */
.btn-primary {
  padding: 15px 30px;
  background:
    linear-gradient(
      45deg,
      var(--accent-color),
      var(--accent-secondary)
    );
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 212, 255, 0.3);
}
.btn-secondary {
  padding: 15px 30px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
  display: inline-block;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-color);
}
section {
  padding: 100px 5%;
}
.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 50px;
  width: 100%;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 30px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
/* ================= PRICING ================= */
.pricing-section {
  text-align: center;
}
.pricing-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.pricing-card {
  flex: 1;
  min-width: 300px;
  max-width: 380px;
  background: #0f0f0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}
.card-content {
  margin-bottom: 30px;
}
.pricing-header h3 {
  font-size: 1.8rem;
  margin-bottom: 5px;
  color: #fff;
}
.pricing-header p {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.price-container {
  margin: 15px 0;
}
.price-tag {
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.price-suffix {
  display: block;
  color: #555;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
}
.divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 15px 0;
}
.pricing-list {
  list-style: none;
  text-align: left;
  padding: 0;
}
.pricing-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  color: #ccc;
  font-size: 1rem;
}
.pricing-list li i {
  color: var(--accent-color);
  margin-right: 12px;
  width: 20px;
  text-align: center;
}
.text-gradient-purple {
  background:
    linear-gradient(
      to right,
      #b05aff,
      #7000ff
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-red {
  background:
    linear-gradient(
      to right,
      #ff0055,
      #ff5e00
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 0, 85, 0.3);
}
.highlight-purple {
  color: #b05aff !important;
  font-weight: bold;
}
.highlight-purple i {
  color: #b05aff !important;
}
.highlight-red {
  color: #ff0055 !important;
  font-weight: bold;
}
.highlight-red i {
  color: #ff0055 !important;
}
.highlight-blue {
  color: #246aff !important;
  font-weight: bold;
}
.highlight-blue i {
  color: #246aff !important;
}
/* PRICING BUTTONS */
.btn-outline {
  width: 100%;
  padding: 15px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.btn-exclusive {
  width: 100%;
  padding: 15px;
  background:
    linear-gradient(
      45deg,
      #ff0055,
      #ff5e00
    );
  border: none;
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(255, 0, 85, 0.3);
}
.btn-exclusive:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(255, 0, 85, 0.5);
}
.pricing-card.popular {
  border: 1px solid var(--accent-secondary);
  background:
    linear-gradient(
      180deg,
      rgba(112, 0, 255, 0.08) 0%,
      #0f0f0f 100%
    );
  z-index: 2;
}
.badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-secondary);
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(112, 0, 255, 0.5);
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
  z-index: 10;
}
.pricing-card.exclusive {
  border: 1px solid rgba(255, 0, 85, 0.5);
  background:
    linear-gradient(
      180deg,
      rgba(255, 0, 85, 0.05) 0%,
      #0f0f0f 100%
    );
}
/* --- DELIVERY SECTION --- */
.delivery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.delivery-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 15px;
  text-align: left;
  transition: transform 0.3s ease;
}
.delivery-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
}
.delivery-card h3 {
  margin: 15px 0 10px 0;
  font-size: 1.3rem;
  color: #fff;
}
.delivery-card p {
  color: #aaa;
  font-size: 0.95rem;
}
.icon-box {
  width: 60px;
  height: 60px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.01)
    );
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;
}
.icon-box i {
  font-size: 1.8rem;
  background:
    linear-gradient(
      45deg,
      var(--accent-color),
      var(--accent-secondary)
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* --- FOOTER (NEU & OPTIMIERT) --- */
footer {
  text-align: center;
  padding: 60px 20px 40px;
  border-top: 1px solid var(--glass-border);
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,1),
      rgba(10,10,10,0)
    );
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
/* Social Icons */
.social-links {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.social-links a {
  color: #aaa;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  text-decoration: none;
}
.social-links a:hover {
  color: #000;
  /* Schwarz auf Neon */
  background: var(--accent-color);
  transform: translateY(-5px);
  box-shadow: 0 0 15px var(--accent-color);
  border-color: var(--accent-color);
}
/* Rechtliche Links (Horizontal) */
.footer-legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer-legal li {
  display: inline-block;
}
.footer-legal a {
  color: #888;
  text-decoration: none;
  font-size: 0.95rem;
  transition: 0.3s;
  font-weight: 500;
}
.footer-legal a:hover {
  color: var(--accent-color);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
/* Der Trennstrich */
.separator {
  color: #444;
  font-size: 0.9rem;
  user-select: none;
}
/* Copyright */
.copyright {
  color: #555;
  font-size: 0.85rem;
  margin-top: 10px;
}
/* --- MODALS --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: #111;
  border: 1px solid var(--accent-color);
  padding: 40px;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}
.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.close-modal:hover {
  color: var(--accent-color);
}
/* --- FORMS --- */
.form-group {
  margin-bottom: 20px;
  text-align: left;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: bold;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300d4ff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px top 50%;
  background-size: 12px auto;
  padding-right: 40px;
  color-scheme: dark;
}
.form-group select option {
  background-color: #000;
  color: #fff;
  padding: 10px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}
textarea {
  resize: vertical;
}
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 20px;
}
.checkbox-group a {
  color: var(--accent-color);
  text-decoration: none;
}
.success-icon {
  font-size: 4rem;
  color: #00ff88;
  margin-bottom: 20px;
  animation: popIn 0.5s ease;
}
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  80% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* --- MOBILE & UTILITIES --- */
@media (max-width: 900px) {
  .pricing-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .pricing-card {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }
}
@media (max-width: 1024px) {
  h1 {
    font-size: 2.5rem;
  }
  .hero-btns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 0 20px;
  }
  .btn-primary, .btn-secondary {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .menu-toggle {
    display: block;
  }
  .nav-links {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    background: #0a0a0a;
    flex-direction: column;
    width: 75%;
    max-width: 320px;
    transform: translateX(100%);
    transition: 0.3s ease-in;
    border-left: 1px solid var(--glass-border);
    padding: 0;
    gap: 0;
    overflow-y: auto;
  }
  .nav-links li {
    margin: 0;
    text-align: center;
    justify-content: center;
  }
  .nav-active {
    transform: translateX(0%);
  }
}
.center-text {
  text-align: center !important;
  margin: -30px auto 50px auto !important;
  display: block;
  width: 100%;
  max-width: 600px;
}
/* HIER IST DER SCROLL-FIX (150px statt 20px) */
/* HIER IST DER SCROLL-FIX (Padding-Trick) */
/* --- DER ECHTE FIX (scroll-margin-top) --- */
/* --- DER FINAL FIX (Abstands-Methode) --- */
/* --- DER FINAL FIX (Feinjustierung) --- */
#pricing {
  /* Wir verringern den Abstand auf 120px -> Text rutscht 20px höher */
  padding-top: 80px;
  /* Wir passen den Margin leicht an, damit es harmonisch bleibt */
  margin-top: -40px;
  padding-bottom: 50px;
  scroll-margin-top: 0;
}
/* --- ORDER LIST STYLES (Profil-Modal) --- */
#orders-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 20px;
}
#orders-list::-webkit-scrollbar {
  width: 6px;
}
#orders-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
#orders-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
}
.order-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: left;
  transition: background 0.2s;
}
.order-card:hover {
  background: rgba(255, 255, 255, 0.08);
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.order-title {
  font-weight: bold;
  color: #fff;
  font-size: 0.95rem;
}
.order-status {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.status-neu {
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.1);
}
.status-ok {
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.1);
}
.order-date {
  font-size: 0.8rem;
  color: #888;
  display: flex;
  justify-content: space-between;
}
/* --- TOAST NOTIFICATION --- */
.toast {
  position: fixed;
  /* ÄNDERUNG: Von oben nach unten verschoben */
  top: auto;
  /* Sicherheitshalber, falls es woanders überschrieben wird */
  bottom: 20px;
  /* Abstand vom unteren Rand */
  right: 20px;
  /* Abstand vom rechten Rand */
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 15px 25px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 3000;
  /* Animation bleibt gleich: Fliegt von rechts rein */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: translateX(150%);
}
.toast.show-toast {
  transform: translateX(0);
}
.toast i {
  font-size: 1.2rem;
}
/* Fehler Button Hover */
#error-btn:hover {
  background: #cc0000 !important;
  box-shadow: 0 0 15px #ff4444;
}
/* --- NEU: LANGUAGE DROPDOWN CSS --- */
.lang-dropdown {
  position: relative;
  cursor: pointer;
  margin-right: 10px;
}
.lang-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #ccc;
  padding: 5px 10px;
  border-radius: 8px;
  transition: 0.3s;
}
.lang-selected:hover {
  color: var(--accent-color);
  background: rgba(255,255,255,0.05);
}
/* Das Menü (versteckt) */
.lang-menu {
  position: absolute;
  top: 100%;
  margin-top: 15px;
  right: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 1001;
}
/* --- NEU: DIE UNSICHTBARE BRÜCKE --- */
.lang-menu::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  display: block;
}
/* Menü anzeigen bei Hover */
.lang-dropdown:hover .lang-menu {
  display: flex;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- DEMO TEMPLATE SECTION (NEU & VERBESSERT) --- */
#demo-template {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
/* Hintergrund-Effekt (optional, leichter Glow) */
#demo-template::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--accent-color);
  filter: blur(150px);
  opacity: 0.1;
  top: 50%;
  right: -100px;
  border-radius: 50%;
  z-index: -1;
}
/* CONTAINER LIMIT (Damit es nicht am Rand klebt) */
.container-limit {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}
.demo-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
  /* Oben bündig */
}
/* Text Seite */
.badge-small {
  display: inline-block;
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent-color);
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 212, 255, 0.3);
}
.demo-text h2 span {
  color: var(--accent-color);
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}
.demo-text p {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 25px;
}
.demo-features {
  list-style: none;
  margin-bottom: 30px;
}
.demo-features li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eee;
}
.demo-features li i {
  color: var(--accent-color);
}
.small-note {
  font-size: 0.8rem;
  color: #777 !important;
  margin-top: 10px;
}
/* Visual Seite (Code Editor) */
.demo-visual {
  position: relative;
}
.code-window {
  background: #1e1e1e;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: 0.3s;
}
.code-window:hover {
  transform: perspective(1000px) rotateY(0) rotateX(0);
}
.window-header {
  background: #252526;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #333;
}
.dots {
  display: flex;
  gap: 6px;
  margin-right: 15px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.red {
  background: #ff5f56;
}
.yellow {
  background: #ffbd2e;
}
.green {
  background: #27c93f;
}
.filename {
  font-family: monospace;
  color: #999;
  font-size: 0.8rem;
}
.window-body {
  padding: 20px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d4d4d4;
}
/* Syntax Highlighting Fake */
.tag {
  color: #569cd6;
}
.attr {
  color: #9cdcfe;
}
.string {
  color: #ce9178;
}
.comment {
  color: #6a9955;
}
.indent {
  margin-left: 20px;
}
.indent2 {
  margin-left: 40px;
}
/* Blinkender Cursor */
.cursor {
  color: var(--accent-color);
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* Schwebendes Badge */
.floating-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* --- NEU: ANLEITUNG BOX STYLE --- /
/ Das hat in deinem Code gefehlt! */
.how-to-start {
  margin-top: 40px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.how-to-start h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}
.how-to-start h3 i {
  color: var(--accent-color);
}
.step {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.step:last-child {
  margin-bottom: 0;
}
.step-num {
  background: rgba(255,255,255,0.1);
  color: var(--accent-color);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.step p {
  margin: 0;
  font-size: 0.95rem;
  color: #ccc;
}
.step p strong {
  color: white;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
  .demo-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .demo-features {
    display: inline-block;
    text-align: left;
  }
  .code-window {
    transform: none;
    margin-top: 30px;
  }
  .floating-badge {
    right: 0;
  }
  .how-to-start {
    text-align: left;
  }
}
/* --- TOOLTIPS (INFO TAGS) --- */
/* Das Icon selbst */
.info-icon {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.4);
  /* Dezent grau */
  cursor: help;
  /* Mauszeiger wird zum Fragezeichen */
  position: relative;
  display: inline-flex;
  font-size: 0.9em;
  transition: color 0.3s ease;
}
.info-icon:hover {
  color: var(--accent-color, #fff);
  /* Leuchtet beim Drüberfahren */
}
/* Die Sprechblase (versteckt) */
.info-icon::after {
  content: attr(data-tooltip);
  /* Holt den Text aus dem HTML */
  position: absolute;
  bottom: 140%;
  /* Position über dem Icon */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.95);
  /* Sehr dunkler Hintergrund */
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  width: max-content;
  max-width: 220px;
  /* Maximale Breite der Blase */
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  /* Glassmorphism Border & Shadow */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  pointer-events: none;
}
/* Kleiner Pfeil unten an der Blase */
.info-icon::before {
  content: '';
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 15, 20, 0.95);
  /* Muss gleiche Farbe wie Hintergrund haben */
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
/* Einblenden beim Hover */
.info-icon:hover::after, .info-icon:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
  /* Kleine Animation nach unten */
}
/* Mobile Anpassung: Damit Tooltips nicht aus dem Bild ragen */
@media (max-width: 480px) {
  .info-icon::after {
    left: -100px;
    /* Verschiebt Blase nach links */
    transform: none;
  }
  .info-icon:hover::after {
    transform: translateY(5px);
  }
  .info-icon::before {
    display: none;
    /* Pfeil auf Handy ausblenden, da Position schwer zu treffen */
  }
}
/* --- HOSTING SECTION --- */
.hosting-section {
  padding: 100px 20px;
  position: relative;
}
.hosting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.step-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px;
  position: relative;
  transition: transform 0.3s ease;
  overflow: hidden;
  /* WICHTIG: Damit die Ecke sauber abschließt */
}
.step-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}
/* DAS IST DER NEUE STYLE FÜR DIE ZAHLEN */
.step-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  /* Größe der Ecke */
  height: 60px;
  /* Größe der Ecke */
  /* Hier nutzen wir direkt deine Farben, da var(--gradient) fehlte */
  background:
    linear-gradient(
      135deg,
      var(--accent-color),
      var(--accent-secondary)
    );
  color: #fff;
  /* Nur unten rechts abrunden */
  border-radius: 0 0 30px 0;
  display: flex;
  align-items: center;
  /* Vertikal zentrieren */
  justify-content: center;
  /* Horizontal zentrieren */
  /* Text etwas nach oben links schieben, damit er mittig in der Ecke wirkt */
  padding-right: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 1.4rem;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
  z-index: 10;
}
.step-icon {
  font-size: 2.5rem;
  color: var(--accent-color, #fff);
  margin-bottom: 20px;
  margin-top: 40px;
  /* Mehr Abstand nach oben, damit es nicht an der Zahl klebt */
}
.step-card h3 {
  margin-bottom: 10px;
  font-size: 1.4rem;
  color: #fff;
}
.step-card p {
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.6;
}
.text-link {
  color: var(--accent-color, #fff);
  text-decoration: underline;
}
/* Visueller Dropzone Effekt */
.dropzone-visual {
  margin-top: 20px;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.2);
}
/* Pro Tip Box */
.hosting-pro-tip {
  margin-top: 50px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 100%
    );
  border-left: 4px solid #ffd700;
  /* Goldener Rand */
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.tip-icon {
  font-size: 1.5rem;
  color: #ffd700;
}
.tip-content h4 {
  margin: 0 0 5px 0;
  color: #fff;
}
.tip-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #ccc;
}
/* Mobile Anpassung */
@media (max-width: 768px) {
  .hosting-pro-tip {
    flex-direction: column;
    text-align: center;
  }
  .hosting-pro-tip .tip-icon {
    margin-bottom: 10px;
  }

  .hosting-card {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }

  .hosting-features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}
/* --- NEUES SPLIT-MODAL DESIGN --- */
/* 1. Das Modal breiter machen */
.modal-content.modal-xl {
  max-width: 950px;
  /* Viel breiter als vorher */
  width: 95%;
  padding: 0;
  /* Padding entfernen, das machen die inneren Boxen */
  overflow: hidden;
  /* Damit die runden Ecken bleiben */
  display: flex;
  /* Flexbox für Layout */
  flex-direction: column;
}
/* Das Grid Layout */
.modal-grid-layout {
  display: grid;
  grid-template-columns: 2fr 3fr;
  /* Links 40%, Rechts 60% */
  min-height: 500px;
}
/* --- LINKE SEITE (INFOS) --- */
.modal-info-col {
  background:
    linear-gradient(
      135deg,
      #1a1a1a 0%,
      #0d0d0d 100%
    );
  padding: 40px;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-subtitle {
  font-size: 0.9rem;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
#modal-package-title {
  font-size: 2.2rem;
  margin-bottom: 10px;
  line-height: 1.1;
}
.modal-price-tag {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}
.modal-divider {
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  margin-bottom: 25px;
  border-radius: 2px;
}
.modal-desc {
  color: #ccc;
  margin-bottom: 15px;
  font-weight: bold;
}
.modal-feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: auto;
  /* Drückt den Rest nach unten */
}
.modal-feature-list li {
  margin-bottom: 12px;
  color: #aaa;
  display: flex;
  align-items: flex-start;
  font-size: 0.95rem;
}
.modal-feature-list li i {
  color: var(--accent-color);
  margin-right: 10px;
  margin-top: 4px;
}
.modal-trust-badge {
  margin-top: 30px;
  background: rgba(255,255,255,0.05);
  padding: 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}
/* --- RECHTE SEITE (FORMULAR) --- */
.modal-form-col {
  padding: 40px;
  background: #111;
  /* Dunkler Hintergrund wie vorher */
}
/* Mobile Anpassung: Untereinander statt nebeneinander */
@media (max-width: 768px) {
  .modal-grid-layout {
    grid-template-columns: 1fr;
    /* Nur eine Spalte */
  }
  .modal-info-col {
    padding: 30px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .modal-form-col {
    padding: 30px;
  }
  /* Close Button muss immer oben rechts sein, auch mobil */
  .close-modal {
    z-index: 10;
    color: #fff;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
  }
}
/* ================= REPARATUR KIT FÜR DAS BESTELL-MODAL ================= */
/* 1. Das Modal Fenster selbst breiter machen */
.modal-content.modal-xl {
  max-width: 1100px !important;
  /* Mehr Platz schaffen */
  width: 95%;
  padding: 0 !important;
  /* WICHTIG: Kein Padding am Haupt-Container */
  background: #0f0f0f;
  border: 1px solid var(--accent-color);
  overflow: hidden;
  /* Damit nichts übersteht */
  display: flex;
  flex-direction: column;
}
/* 2. Das Grid Layout (Links Info, Rechts Formular) */
.modal-grid-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  /* Links fest 350px, Rechts der Rest */
  min-height: 600px;
  /* Mindesthöhe damit es gut aussieht */
}
/* 3. Linke Seite (Info Box) */
.modal-info-col {
  background:
    linear-gradient(
      160deg,
      #1a1a1a 0%,
      #050505 100%
    );
  padding: 40px;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Inhalt oben starten */
}
/* Text auf der linken Seite */
.modal-info-col h2 {
  font-size: 2rem;
  margin-top: 0;
  line-height: 1.2;
}
.modal-info-col p {
  color: #ccc;
  line-height: 1.6;
  font-size: 0.95rem;
}
.modal-price-tag {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  margin: 15px 0;
}
/* 4. Rechte Seite (Formular) */
.modal-form-col {
  padding: 40px;
  background: #0a0a0a;
  /* Sehr dunkel */
  overflow-y: auto;
  /* Scrollbar falls Formular zu lang */
  max-height: 85vh;
  /* Damit man auf kleinen Screens scrollen kann */
}
/* 5. Formular Zeilen (Nebeneinander) */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
/* Damit die Inputs in der Reihe gleich groß sind */
.form-row .form-group {
  flex: 1;
  /* Beide nehmen 50% Platz */
  margin-bottom: 0;
  /* Margin wird von row gesteuert */
}
/* 6. Datei Upload Box verschönern */
/* ================= UPLOAD BOX FIX ================= */
.file-upload-box {
  position: relative;
  /* Wichtig für die Positionierung */
  min-height: 100px;
  /* Feste Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  transition: 0.3s;
  margin-bottom: 5px;
}
.file-upload-box:hover {
  border-color: var(--accent-color);
  background: rgba(0, 212, 255, 0.05);
}
/* Der eigentliche Input-Button wird unsichtbar über alles gelegt */
.file-upload-box input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  /* Unsichtbar */
  cursor: pointer;
  z-index: 10;
  /* Liegt ganz oben */
}
/* Unser schöner Text */
.upload-hint {
  pointer-events: none;
  /* Klicks gehen durch zum Input */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 0.9rem;
  padding: 10px;
}
.upload-hint i {
  font-size: 1.8rem;
  color: var(--accent-color);
  margin-bottom: 5px;
}
.upload-hint span {
  font-weight: 500;
}
/* Container für die Dateiliste */
#file-list-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Einzelne Datei-Zeile */
.file-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #ddd;
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: fadeIn 0.3s ease;
}
.file-item i {
  margin-right: 10px;
  color: var(--accent-color);
  /* Deine Akzentfarbe */
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Container für die Liste */
.file-list-area {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Einzelne Datei-Zeile */
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  /* Dunkler Hintergrund */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 8px;
  transition: background 0.2s;
}
.file-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* Datei Info (Icon + Name) */
.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e0e0e0;
  font-size: 0.9rem;
  overflow: hidden;
}
.file-info i {
  color: var(--accent-color);
  /* Deine Akzentfarbe */
  font-size: 1.1rem;
}
/* Der Löschen Button (Schön gestylt) */
.btn-remove-file {
  background: transparent;
  border: none;
  color: #ef4444;
  /* Rot */
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 30px;
  height: 30px;
}
/* --- STYLE.CSS GANZ UNTEN EINFÜGEN --- */
/* Gesperrte Buttons */
button:disabled, button[disabled] {
  background: #333 !important;
  color: #888 !important;
  border: 1px solid #444 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
  /* Entfernt Gradients */
}
/* Optional: Die ganze Karte etwas dunkler machen, wenn ausverkauft */
.pricing-card.sold-out {
  opacity: 0.6;
  filter: grayscale(0.8);
  transform: scale(0.98);
  pointer-events: none;
  /* Verhindert Hover-Effekte auf der Karte */
}
/* Aber den Button wieder klickbar machen für Tooltips? Nein, besser alles sperren. */
.pricing-card.sold-out button {
  pointer-events: auto;
  /* Damit man sieht, dass es verboten ist */
}
/* Popup Hintergrund (dunkel) */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  /* Wird per JS aktiviert */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/* Die weiße Box */
.popup-content {
  background: white;
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: popIn 0.3s ease;
}
.popup-icon {
  font-size: 50px;
  margin-bottom: 20px;
}
.popup-btn {
  background: #4CAF50;
  /* Grün */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
}
@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- LIVE SHOWCASE SECTION --- */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 60px auto 0;
}

.showcase-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

.showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-color, #00d4ff);
}

/* Browser Header Look */
.browser-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.browser-header .dots {
    display: flex;
    gap: 6px;
    margin-right: 15px;
}

.browser-header .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #555;
}
.browser-header .dots span:nth-child(1) { background: #ff5f56; }
.browser-header .dots span:nth-child(2) { background: #ffbd2e; }
.browser-header .dots span:nth-child(3) { background: #27c93f; }

.url-bar {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    flex-grow: 1;
    height: 24px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 0.75rem;
    color: #aaa;
    font-family: monospace;
}

/* Preview Image Area */
.showcase-preview {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.showcase-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-preview img {
    transform: scale(1.05);
}

/* Overlay mit Button */
.showcase-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.showcase-card:hover .showcase-overlay {
    opacity: 1;
}

/* Info Text unten */
.showcase-info {
    padding: 25px;
    text-align: left;
}

.showcase-info h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.showcase-info p {
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-overlay {
        opacity: 1; /* Auf Touch-Geräten immer sichtbar */
    }

    .showcase-overlay .btn-primary {
        width: auto !important;
        padding: 12px 24px;
    }
}

/* ================= NAVIGATION & HEADER (FINAL) ================= */

/* 1. Die Leiste selbst */
nav {
    display: flex;
    align-items: center;
    /* Wichtig: Wir verteilen NICHT automatisch (kein space-between), 
       sondern schieben Elemente gezielt */
    padding: 15px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.8); /* Dunkel & Transparent */
    backdrop-filter: blur(10px);       /* Blur-Effekt */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. Logo bleibt links */
.logo {
    margin-right: 20px;
    font-weight: bold;
    font-size: 1.5rem;
}

/* 3. Die Links (Vorteile, Preise...) */
@media (max-width: 1024px) {
  .nav-links {
    position: fixed;
    right: 0;
    top: 0;

    height: 100vh;
    width: 75%;
    max-width: 320px;

    background: #0a0a0a;
    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    transition: 0.3s ease-in;
    border-left: 1px solid var(--glass-border);
    padding: 70px 0 0 0;
    gap: 0;
    overflow-y: auto;

    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    z-index: 9999;
  }
}


.nav-links a {
    text-decoration: none;
    color: #ccc;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #fff;
}

/* 4. Die rechte Gruppe (Sprache + Login) */
.nav-right-side {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Da .nav-links margin-left: auto hat, klebt diese Gruppe automatisch rechts am Rand */
}

/* ================= SPRACH DROPDOWN ================= */

.lang-wrapper {
    position: relative; /* Ankerpunkt für das Popup */
}

.lang-btn {
    cursor: pointer;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
    transition: 0.3s;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent-color, #00d4ff);
}

/* Das ausklappbare Menü */
.lang-dropdown-box {
    display: none; /* Standardmäßig unsichtbar */
    position: absolute;
    top: 120%; /* Etwas unter dem Button */
    right: 0;  /* Rechtsbündig */
    
    background: #0f0f0f;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    width: 160px;
    padding: 8px;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2000;
}

/* Anzeigen bei Hover */
.lang-wrapper:hover .lang-dropdown-box {
    display: flex;
}

/* Links im Dropdown */
.lang-dropdown-box a {
    color: #bbb;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    display: block;
    transition: 0.2s;
}

.lang-dropdown-box a:hover {
    background: var(--accent-color, #00d4ff);
    color: #000;
    font-weight: 500;
}

/* ================= MOBILE ANPASSUNG ================= */
@media (max-width: 1024px) {
    nav {
        justify-content: space-between; /* Logo links, Burger rechts */
    }

    .nav-links {
        display: none; /* Desktop Links ausblenden */
    }

    .nav-right-side {
        display: none; /* Desktop Login/Sprache ausblenden */
    }
    
    /* Hinweis: Für Mobile müsstest du Sprache/Login separat ins 
       ausklappbare Mobile-Menü einbauen, falls noch nicht geschehen. */
}

/* ================= DIE UNSICHTBARE BRÜCKE ================= */
.lang-dropdown-box::before {
    content: "";
    position: absolute;
    
    /* Platziert die Brücke direkt OBERHALB des Menüs */
    bottom: 100%; 
    left: 0;
    
    /* Breite wie das Menü, Höhe reicht bis zum Button */
    width: 100%;
    height: 30px; /* Groß genug, um jede Lücke zu schließen */
    
    background: transparent; /* Unsichtbar */
    display: block;
}

/* WICHTIG: Damit wir die Mail absolut positionieren können */
footer {
    position: relative; 
    padding: 40px 20px; /* Stelle sicher, dass genug Platz ist */
}

/* Der Mail-Link Style */
.footer-support {
    position: absolute;
    left: 40px;        /* Abstand von Rechts */
    top: 50%;           /* Vertikal mittig */
    transform: translateY(-50%); /* Exakte Mitte berechnen */
    
    color: rgba(255, 255, 255, 0.5); /* Leicht transparent */
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-support:hover {
    color: #fff; /* Weiß beim Drüberfahren */
}

/* --- MOBILE ANPASSUNG --- */
/* Auf kleinen Bildschirmen (Handy/Tablet) machen wir es mittig */
@media (max-width: 900px) {
    .footer-support {
        position: static; /* Nicht mehr rechts fixiert */
        display: inline-flex;
        transform: none;
        margin-top: 20px; /* Abstand nach oben */
        justify-content: center;
    }
    
    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

#mobile-menu {
    position: relative;
    z-index: 10001 !important; /* Zwingt den Button über alles andere */
    cursor: pointer;
}

/* --- MOBILE MENU FIX (Ganz unten einfügen) --- */

/* 1. Den Container sichtbar & klickbar machen */
#mobile-menu {
    display: none; /* Standardmäßig weg auf Desktop */
    font-size: 1.8rem; /* Größe des Icons */
    color: white; /* Farbe */
    cursor: pointer;
    z-index: 10002 !important; /* Über allem liegen */
    padding: 10px; /* Klickfläche vergrößern */
}

/* 2. Nur auf Mobile anzeigen */
@media (max-width: 1024px) {
    #mobile-menu {
        display: block !important; /* Zwingend anzeigen */
    }
    
    /* Falls du vorher .nav-links ausgeblendet hast, mach sie wieder sichtbar */
    .nav-links {
        display: flex; /* Flexbox für die Liste */
    }
}

/* 3. Das Icon selbst */
#mobile-menu i {
    pointer-events: none; /* Klicks gehen durch das Icon auf den Button */
}

/* Den Burger-Button vom rechten Rand wegschieben */


@media (max-width: 1024px) {
    #mobile-menu {
        margin-left: auto; /* Schiebt den Button ganz nach rechts */
    margin-right: 1%; /* Spiel mit dieser Zahl, bis es dir gefällt */
}
}

/* --- MOBILE MENU EXTRAS --- */

/* Standardmäßig verstecken wir die Mobile-Only Elemente auf Desktop */
.mobile-only {
    display: none !important;
}

/* Aber auf dem Handy zeigen wir sie an! */
@media (max-width: 1024px) {

    .mobile-only {
        display: flex !important;
        width: 100% !important;
        align-items: center;
    }

    /* Login + Sprache nebeneinander */
    .mobile-action-row {
        justify-content: stretch !important;
        gap: 10px;
        padding: 12px 20px 16px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-login-btn {
        flex: 1;
        text-align: center;
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    .mobile-lang-select {
        flex: 1;
        padding: 9px 8px;
        background: #1a1a1a;
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        border-radius: 8px;
        font-size: 0.85rem;
        cursor: pointer;
        outline: none;
    }

    /* Nav-Links: Padding und Abstände */
    .nav-links > li:not(.mobile-only) {
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .nav-links > li:not(.mobile-only) a {
        font-size: 1rem;
        color: #ccc;
        width: 100%;
        display: block;
    }

    .nav-links > li:not(.mobile-only):last-child {
        border-bottom: none;
    }

    /* Die Trennlinie */
    .separator-line {
        height: 1px !important;
        background: rgba(255,255,255,0.08) !important;
        padding: 0 !important;
        margin: 0;
        width: 80% !important; /* Linie etwas breiter als die Buttons sieht meist besser aus */
    }
}

/* --- FIX FÜR DAS DROPDOWN FARB-PROBLEM --- */

@media (max-width: 1024px) {

    .mobile-lang-select option {
        background-color: #1a1a1a;
        color: white;
    }
}

/* --- DESKTOP REPARATUR (Update) --- */
@media (min-width: 1025px) {
    
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 30px; 
        
        /* DAS HIER SCHIEBT ALLES NACH RECHTS: */
        margin-left: auto !important;  /* Drückt die Links weg vom Logo nach rechts */
        margin-right: 40px !important; /* Kleiner Sicherheitsabstand zu den runden Buttons rechts */
    }

    /* Versteckt die Handy-Sachen weiterhin auf dem PC */
    .mobile-only {
        display: none !important;
    }
}

/* --- FIX FÜR OVALES PROFILBILD (MOBILE) --- */
@media (max-width: 1024px) {
    #mobile-nav-auth-btn.nav-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex: none !important;        /* Verhindert Strecken durch flex: 1 */
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }
}

/* ================= MOBILE ORDER MODAL FIX (FINAL) ================= */
@media (max-width: 900px) {

    /* 1. Das Haupt-Fenster anpassen */
    .modal-content.modal-xl {
        width: 95% !important;
        max-width: none !important;
        height: 90vh !important; /* 90% der Bildschirmhöhe */
        margin: 5vh auto !important; /* Zentriert */
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; /* Wichtig für interne Scrollbar */
    }

    /* 2. Das Layout-Gitter auflösen und scrollbar machen */
    .modal-grid-layout {
        display: block !important; /* Kein Grid mehr, alles untereinander */
        overflow-y: auto !important; /* HIER IST DER SCHLÜSSEL: Scrollen erlauben */
        height: 100% !important;
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iPhones */
    }

    /* 3. Linke Seite (Info) kompakter machen */
    .modal-info-col {
        width: 100% !important;
        padding: 20px !important;
        min-height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background: #151515 !important;
    }

    /* Titel und Preis kleiner */
    #modal-package-title {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }
    .modal-price-tag {
        font-size: 1.8rem !important;
        margin: 10px 0 !important;
    }
    .modal-desc, .modal-custom-text {
        font-size: 0.85rem !important;
    }

    /* 4. Rechte Seite (Formular) anpassen */
    .modal-form-col {
        width: 100% !important;
        padding: 20px !important;
        background: #0a0a0a !important;
        overflow: visible !important; /* Scrollen übernimmt jetzt das Elternelement */
        max-height: none !important; /* Begrenzung aufheben */
        padding-bottom: 80px !important; /* Extra Platz unten für Handy-Browser-Leisten */
    }

    /* 5. Formularfelder untereinander statt nebeneinander */
    .form-row {
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
    .form-row .form-group {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* 6. Inputs lesbar machen (Verhindert iPhone Zoom) */
    input, select, textarea {
        font-size: 16px !important; 
        padding: 12px !important;
    }

    /* 7. Schließen-Button sicher positionieren */
    .close-modal {
        position: absolute !important; /* Absolut zum Fenster, nicht zum Scroll-Inhalt */
        top: 10px !important;
        right: 10px !important;
        z-index: 9999 !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        background-color: transparent;
        align-items: center;
        justify-content: center;
        color: white !important;
    }
}

/* --- MEHR ABSTAND IM HEADER (NUR DESKTOP) --- */
@media (min-width: 1025px) {
    nav {
        /* 15px oben/unten | 80px links/rechts */
        padding: 15px 70px !important;

        /* ALTERNATIVE: Wenn du es dynamisch willst (5% vom Bildschirmrand): */
        /* padding: 15px 5% !important; */
    }
}

/* ================= SEITEN KONFIGURATION ================= */
.page-config-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
}
.page-config-item:hover {
    border-color: var(--accent-color);
}
.page-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.page-number {
    background: var(--accent-color);
    color: #000;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.page-name-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}
.page-name-input:focus {
    border-color: var(--accent-color);
}
.page-desc-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    padding: 10px 12px;
    color: #ddd;
    font-size: 0.88rem;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
}
.page-desc-input:focus {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.07);
}