body {
      font-family: 'Inter', sans-serif;
      background: #f4f5fb;
      margin: 0;
      padding: 40px;
    }
    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
	  justify-content: center;
    }
    .tab-button {
      padding: 10px 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
    }
    .tab-button.active {
      background-color: #26C0B1;
      color: white;
      border-color: #26C0B1;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    .card {
      display: flex;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      padding: 30px;
      max-width: 1050px;
      margin: auto;
      gap: 30px;
      align-items: flex-start;
    }

    .card img {
      width: 200px;
      height: auto;
      border-radius: 8px;
    }

    .card-content {
      flex: 1;
	   padding-right: 20px;
    }
	.card .subtitle {
       margin: 0 0 6px 0; /* oder 4px für kleineren Abstand nach unten */		
	  font-size: 14px;
      color: #F39C12;
      margin: 0;
      text-transform: uppercase;
      font-weight: 600;
	  }
    .card h4 {
      font-size: 14px;
      color: #F39C12;
      margin: 0;
      text-transform: uppercase;
      font-weight: 600;
    }

    .card h2 {
      font-size: 30px;
      margin: 20px 0 20px 0;
      font-weight: 700;
    }
	.card h1 {
      font-size: 20px;
      margin: 8px 0;
      font-weight: 700;
	  color: #4C5C65;
    }
	.card h3 {
      font-size: 15px;
      margin: 8px 0;
      font-weight: 700;
	  color: #4C5C65;
    }
	
	.card:not(:last-child) {
	  margin-bottom: 40px;
	}

    .divider {
      height: 3px;
      width: 60px;
      background-color: #0073ff;
      margin-bottom: 20px;
    }
	 .divider_titeltext {
      height: 3px;
      width: 80%;
	  text-align: center;
      background-color: #0073ff;
      margin-bottom: 20px;
    }

    .card p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 20px;
      color: #333;
    }

    .features {
      font-size: 15px;
      line-height: 2.0;
      color: #111;
	   list-style: none;
		padding-left: 0;
    }

    .features i {
      color: #2ecc71;
      margin-right: 8px;

	padding-left: 0; /* optional: entfernt Einzug */
  margin: 0;
    }
	
	.features li i {
  margin-right: 8px;
  color: #27ae60; /* schönes Grün für "erledigt" */
}

   .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* … bereits vorhandene Regeln … */
  width: 120px; 
  padding-inline-end: 40px; /* oder padding-right: 30px; */
}

/* Thumbnail-Container innerhalb Actions */
.actions .thumbnails {
  display: flex;
  justify-content: center; /* zentriert 1, 2, … Bilder */
  gap: 10px;               /* Abstand zwischen den Thumbnails */
  margin-top: 20px;        /* Abstand nach oben */
  width: 100%;             /* volle Breite nutzen */
}

/* Einzelnes Thumbnail */
.actions .thumbnail {
  width: 80px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .2s;
}

.actions .thumbnail:hover {
  transform: scale(1.05);
}

    .price {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #212E52;
    }

    .button {
      background-color: #26C0B1;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      width: 100%;
      margin-bottom: 10px;
    }

    .video-button {
      padding: 12px 20px;
      border: 2px solid black;
      border-radius: 6px;
      background: white;
      color: black;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 98%;
      margin-bottom: 10px;
      text-decoration: none;
    }

    .payment-icons {
      font-size: 22px;
      color: #555;
      margin-top: 5px;
    }

    .payment-icons i {
      margin-right: 10px;
    }

    .tax-note {
      font-size: 13px;
      color: #777;
      margin-top: 4px;
    }
	.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-row h2 {
  font-size: 32px;
  color: #2c3e50;
  margin: 0;
}

.header-row img {
  width: 250px;
  max-height: 100px;
  object-fit: contain;
  border-radius: 6px;
}

    @media (max-width: 768px) {
      .card {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .actions {
        align-items: center;
        width: 100%;
      }

      .card img {
        margin-bottom: 20px;
      }
    }
	.payment-icons .mastercard {
  color: #243747; /* rot */
}

.payment-icons .visa {
  color: #1A1876; /* dunkelblau */
}

.payment-icons .paypal {
  color: #37B5E8; /* PayPal Blau */
}
.payment-icons i {
  font-size: 26px;
  margin-right: 12px;yyxas
}
.price-hit {
  display: inline-block;
  background: radial-gradient(circle at center, #F39C12 0%, #F39C12 100%);
  color: white;
  font-size: 22px;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  text-align: center;
  margin-bottom: 16px;
  /*animation: pulse 1.5s infinite;*/
}

.price-hit .amount {
  font-size: 26px;
  font-weight: 800;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: 0.95; }
  100% { transform: scale(1); opacity: 1; }
}

/* Container für die Vorschaubilder */
.card .thumbnails {
  display: flex;
  justify-content: center; /* 1, 2, 3… Bilder immer in der Mitte */
  gap: 10px;               /* Abstand zwischen den Thumbnails */
  margin: 20px 0 0;        /* Abstand nach oben, sonst bündig an .actions */
}

/* Vorschaubild selbst */
.card .thumbnail {
  width: 100px;             /* Breite der Miniatur */
  height: auto;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .2s;
}

.card .thumbnail:hover {
  transform: scale(1.05);
}
/* Footer-Card erbt alle .card-Regeln */
.footer-card {
  /* nur noch etwas extra oben-Abstand: */
  margin-top: 40px;
  /* Falls du das Padding im Footer anders möchtest: */
  padding: 30px 30px 20px;
}

/* Innerer Grid-Container für die vier Spalten */
/* === Footer-Card übernimmt das .card-Styling === */
.footer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  padding: 60px;
  max-width: 1000px;
  margin: 40px auto 0;
  gap: 20px;
}

/* ========== Footer-spezifisch ========== */
.footer-card { /* erbt alle .card-Regeln */ }

/* 1) Grid für die obere Zeile mit vier Spalten */
.footer-card .footer-content {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  align-items: baseline;
}

/* Spalten-Ãœberschrift und Listen */
.footer-card .footer-column h5 {
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #333;
}
.footer-card .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-card .footer-column li + li {
  margin-top: 0.4rem;
}
.footer-card .footer-column a {
  color: #0073ff;
  text-decoration: none;
}
.footer-card .footer-column a:hover {
  text-decoration: underline;
}

/* Kontakt-Spalte */
.footer-card .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-card .footer-contact .social a {
  margin-right: 0.5rem;
  font-size: 18px;
  color: #333;
}

/* Trennlinie */
.footer-card hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 0;
}

/* 2) Flex-Layout für untere Zeile mit drei Elementen */
.footer-card .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  font-size: 12px;
  color: #777;
}

/* Logo links */
.footer-card .footer-logo {
  height: 52px;
}

/* Disclaimer mittig */
.footer-card .legal-disclaimer {
  text-align: center;
  font-size: 11px;
}

/* Copyright rechts */
.footer-card .legal-copy {
  white-space: nowrap;
  text-align: right;
}
/* FAQ-spezifisch */
.faq-title {
  text-align: center;
  font-size: 24px;
  margin: 0;
  color: #333;
}
.faq-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 16px 0 24px;
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 70%;
}
.faq-item {
  border-bottom: 1px solid #f0f0f0;
}
.faq-item:last-child {
  border-bottom: none;
}


/* FAQ-Frage als flex-container */
.faq-question {
  display: flex;
  justify-content: space-between; /* Frage links, Toggle rechts */
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* Toggle-Icon */
.faq-toggle {
  transition: transform .2s;
}

/* Antwort zunächst verstecken */
.faq-answer {
  display: none;
  padding: 0 0 16px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* Klapp-Zustand */
.faq-item.open .faq-answer {
  display: block;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}