:root{
  --brand:#7b1b58;
  --brand-600:#8e1f65;
  --accent:#ffcc00;
  --ink:#161616;
  --muted:#667085;
  --paper:#faf7f4;
  --radius:18px;
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin:0 auto;padding:0 18px}
.topbar{background:var(--brand);color:#fff}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px}
.logo-wrap{display:flex;align-items:center;gap:14px}
.logo-wrap img{height:38px;width:auto;border-radius:4px;background:#fff;padding:4px}
.nav{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #eee}
.nav .container{height:68px;display:flex;align-items:center;justify-content:space-between}
.menu{display:flex;gap:16px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--brand);color:#fff;border:none;font-weight:700;cursor:pointer}
.btn.secondary{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn.ghost{background:transparent;color:var(--ink);border:1px dashed #cbd5e1}
.btn:hover{background:var(--brand-600);color:#fff}
.hero{position:relative;overflow:hidden;color:#fff;background:#000}
.hero img{width:100%;height:460px;object-fit:cover;opacity:.75}
.hero .headline{position:absolute;left:20px;bottom:26px;font-size:36px;font-weight:900;line-height:1.1;text-shadow:0 8px 28px rgba(0,0,0,.4)}
.hero .badge{position:absolute;top:20px;left:20px;background:#fff;color:#111;border-radius:999px;padding:10px 14px;font-weight:800}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge-chip{background:#fff;color:#111;border-radius:999px;padding:8px 12px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.section{padding:56px 0}
.section.alt{background:var(--paper)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.grid-2,.grid-3{grid-template-columns:1fr} .hero img{height:320px} .hero .headline{font-size:26px}}
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.h1{font-size:34px;margin:0 0 8px 0}
.h2{font-size:24px;margin:0 0 8px 0}
.p{margin:0 0 10px 0;color:#2b2b2b}
.list{padding-left:20px;margin:6px 0}
.kicker{letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--brand)}
.table{width:100%;border-collapse:collapse;margin-top:6px}
.table th,.table td{border-bottom:1px solid #eee;padding:12px;text-align:left}
.notice{background:#f1f5f9;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.footer{background:var(--brand);color:#fff;padding:28px 0;margin-top:32px}
.footer a{color:#fff;text-decoration:underline}
.small{font-size:.9rem;color:var(--muted)}

/* Price cards */
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.price-grid{grid-template-columns:1fr}}
.price{border:1px solid #e5e7eb;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#fff}
.price .title{font-weight:800}
.price .value{font-size:28px;font-weight:900}
.price .meta{color:#475569}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:#fff}
.faq summary{cursor:pointer;font-weight:700}

/* Sticky CTA (mobile) */
.cta-float{position:fixed;left:0;right:0;bottom:12px;display:none;justify-content:center;z-index:70}
.cta-float .inner{background:rgba(255,255,255,.95);border:1px solid #e5e7eb;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:8px}
@media(max-width:860px){.cta-float{display:flex}}

/* Modal overlay with focus trap */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.modal-backdrop.open{display:flex}
.modal{background:#fff;border-radius:18px;max-width:900px;width:100%;max-height:90vh;overflow:auto;border:1px solid #e5e7eb;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal .modal-head{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.close{background:transparent;border:0;font-size:22px;cursor:pointer}

/* Form */
.form{display:grid;gap:16px;padding:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.form .row{grid-template-columns:1fr}}
.input, select, textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:12px;background:#fff}
.checkbox{display:flex;align-items:center;gap:10px}
.help{font-size:.9rem;color:#64748b}
.hidden{position:absolute !important; left:-9999px !important; height:1px; width:1px; overflow:hidden;}

/* soziale medien */
.social-footer {
  background-color: #7a2669;
  color: #fff;
  font-family: sans-serif;
  padding: 40px 60px;
}

.footer-content {
  display: flex;
  justify-content: space-around; /* gleichmäßige Verteilung */
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-left, .footer-center {
  flex: 1;
  min-width: 200px;
}

.footer-right {
  flex: 0.8; /* kleiner als die Textspalten – so rutscht es mehr zur Mitte */
  text-align: center;
}

.footer-left h4,
.footer-center h4 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #fff;
  display: inline-block;
  padding-bottom: 5px;
}

.footer-left ul,
.footer-center ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-left ul li,
.footer-center ul li {
  margin: 8px 0;
}

.footer-left a,
.footer-center a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-left a:hover,
.footer-center a:hover {
  text-decoration: underline;
}

/* Social Icons */
.social-footer {
  background-color: #7a2669;
  color: #fff;
  font-family: sans-serif;
  padding: 20px 60px;
}

.footer-content {
  display: flex;
  justify-content: space-between; /* Text links, Icons rechts */
  align-items: center;
  flex-wrap: wrap; /* für mobile Geräte */
}

.footer-content p {
  margin: 0;
  font-size: 16px;
}

/* Social Icons */
.social-footer {
  background-color: #7a2669;
  color: #fff;
  font-family: sans-serif;
  padding: 20px 60px;
}

.footer-content {
  display: flex;
  justify-content: space-between; /* Text links, Icons rechts */
  align-items: center;
  flex-wrap: wrap;
}

.footer-content p {
  margin: 0;
  font-size: 16px;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center; /* Zentriert leicht */
  transform: translateX(-300px); /* 🔹 verschiebt Icons etwas nach links (zur Mitte) */
}

.social-icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  text-decoration: none; /* entfernt Unterstrich */
  transition: all 0.3s ease;
  background: transparent;
}

.social-icons a:hover {
  background-color: #fff;
  color: #7a2669;
  transform: scale(1.1);
  text-decoration: none;
}

/* Responsive Ansicht */
@media (max-width: 800px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .social-icons {
    transform: none; /* Keine Verschiebung bei kleinen Bildschirmen */
  }
}

/* impressum */
/* ===== Impressum (Footer) ===== */
.impressum{
  background:#6e256d;          /* Dein Lila */
  color:#fff;
}
.impressum a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.impressum a:hover{ opacity:.85; }
.impressum :focus-visible{
  outline:2px solid #fff; outline-offset:2px; border-radius:4px;
}

.impressum__container{
  max-width:1100px;            /* an deine Sitebreite anpassen */
  margin:0 auto;
  padding:2rem 1.25rem 2.5rem; /* gleicht den Footer-Abstand an */
  line-height:1.65;
}

.impressum__summary{
  list-style:none;
  cursor:pointer;
  margin:0 0 .75rem 0;
}
.impressum__summary::-webkit-details-marker{ display:none; }

.impressum h2{
  font-size:clamp(1.2rem, 1vw + 1rem, 1.6rem);
  margin:0 0 .5rem 0;
  font-weight:700;
  letter-spacing:.2px;
}

.impressum__grid{
  display:grid;
  gap:1.25rem;
}
@media (min-width: 768px){
  .impressum__grid{
    grid-template-columns: 1fr 1fr;     /* zwei Spalten auf Desktop */
    gap:2rem 3rem;
  }
}

.impressum__col p{ margin:.5rem 0 1rem; }

.impressum address{
  font-style:normal;
  margin:.25rem 0 1rem;
}

.impressum__sub{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:1rem 0 .5rem;
  opacity:.95;
}

.impressum__links{
  margin:0 0 1rem 0;
  padding:0;
  list-style:none;
}
.impressum__links li{ margin:.25rem 0; }

.impressum__note{
  opacity:.9;
  margin-top:.25rem;
}

/* Kompakter auf sehr kleinen Screens */
@media (max-width: 420px){
  .impressum__container{ padding:1.25rem 1rem 1.75rem; }
  .impressum h2{ font-size:1.2rem; }
}