/* /assets/css/style.css */
:root{
  --bg: #0b0f16;
  --bg2:#0f1624;
  --card:#121b2b;
  --card2:#0f1829;
  --line: rgba(255,255,255,.08);

  --text:#e9eef9;
  --muted:rgba(233,238,249,.72);

  --accent:#ffb000;         /* warmes Orange */
  --accent2:#ff7a18;        /* mehr Punch */
  --accentGlow:rgba(255,176,0,.22);

  --ok:#35d07f;
  --bad:#ff5d5d;

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;

  --max: 1120px;
  --pad: 20px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  line-height:1.55;
  letter-spacing: .2px;

  /* wichtig: body selbst transparent lassen (BG kommt als fixed Layer) */
  background: transparent;
  overflow-x: hidden;
}

/* fixed background layer (sauber auf Desktop + Mobile) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(255,176,0,.08), transparent 60%),
    radial-gradient(1000px 600px at 20% 80%, rgba(255,122,24,.07), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-repeat:no-repeat;
  background-size: cover;

  transform: translateZ(0);
  will-change: transform;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 14px; color: var(--muted); }
h1,h2,h3{ margin:0 0 12px; line-height:1.15; letter-spacing:-.4px; }
h1{ font-size: clamp(32px, 4vw, 52px); }
h2{ font-size: clamp(22px, 2.8vw, 34px); }
h3{ font-size: 18px; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.small{ font-size: 13px; color: rgba(233,238,249,.62); }
.muted{ color: var(--muted); }
.hidden{ display:none !important; }

.hr{
  height:1px;
  background: var(--line);
  border:0;
  margin: 24px 0;
}

/* Topbar / Nav (optional) */
.nav{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(11,15,22,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
  box-shadow: 0 0 0 6px rgba(255,176,0,.14);
}
.nav-links{
  display:flex;
  gap: 14px;
  align-items:center;
  font-size: 14px;
  color: rgba(233,238,249,.82);
}
.nav-links a{ opacity:.9; }
.nav-links a:hover{ opacity:1; color:#fff; }

/* Buttons */
button, .btn, .cta-primary, .cta-secondary{
  border:0;
  cursor:pointer;
  font: inherit;
  border-radius: 999px;
  padding: 12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease, border-color .2s ease;
  user-select:none;
}
button:active, .btn:active, .cta-primary:active, .cta-secondary:active{
  transform: translateY(1px);
}

.cta-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: #1a1200;
  font-weight: 800;
  box-shadow: 0 14px 40px rgba(255,176,0,.20), 0 0 0 1px rgba(255,176,0,.25) inset;
}
.cta-primary:hover{
  box-shadow: 0 18px 55px rgba(255,176,0,.25), 0 0 0 1px rgba(255,176,0,.35) inset;
}

.cta-secondary{
  background: rgba(255,255,255,.06);
  color: #fff;
  border: 1px solid var(--line);
}
.cta-secondary:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
}

button[disabled], .disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(18,27,43,.92), rgba(15,24,41,.88));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad{ padding: 18px; }

/* Sections */
/* WICHTIG: vertikale Abstände kommen über .stack -> section nur noch links/rechts */
section{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
section.tight{
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items:center;
  padding-top: 44px;
  padding-bottom: 34px;
}
.hero-text p{ font-size: 16px; }
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 18px 0 22px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(233,238,249,.85);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.badge .mini{
  width:8px; height:8px; border-radius:50%;
  background: rgba(255,176,0,.9);
  box-shadow: 0 0 0 6px rgba(255,176,0,.12);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ===== PRICE BADGE ===== */
.price-badge{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;

  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,176,0,.28);
  background: rgba(255,176,0,.10);
  box-shadow: 0 14px 40px rgba(255,176,0,.12);
}
.price-badge .label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  color:#1a1200;
  padding:5px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.price-badge .old{
  font-size:13px;
  color: rgba(233,238,249,.65);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(233,238,249,.35);
}
.price-badge .new{
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.hero-image{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  position:relative;
}
.hero-image::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 200px at 20% 20%, rgba(255,176,0,.18), transparent 55%);
  pointer-events:none;
}

/* PROCESS */
.process{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items:center;
}
.process-image{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.process-text p{
  margin: 10px 0;
  padding-left: 14px;
  border-left: 2px solid rgba(255,176,0,.32);
}

/* Divider image full (falls irgendwo noch genutzt) */
.divider{
  padding: 0;
  max-width: none;
}
.divider img{
  width:100%;
  height: 240px;
  object-fit: cover;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  opacity: .9;
}

/* USP */
.usp{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 26px;
  align-items:center;
}
.usp-image img{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.usp-text p{ font-size: 15px; }

/* Feature grid / FAQ / Examples blocks (optional, landing-ready) */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.feature{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.feature h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.feature h3 .ico{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 6px rgba(255,176,0,.12);
}

.faq{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}
details{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  padding: 14px 16px;
}
summary{
  cursor:pointer;
  list-style:none;
  font-weight: 700;
  color: rgba(233,238,249,.95);
}
summary::-webkit-details-marker{ display:none; }
details[open]{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
details p{ margin-top: 10px; }

/* CTA Section */
.cta{
  text-align:center;
  padding-top: 40px;
  padding-bottom: 64px;
}
.cta h2{ margin-bottom: 10px; }
.cta p{ max-width: 720px; margin: 0 auto 16px; }
.cta .cta-primary{ padding: 14px 22px; font-size: 16px; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.22);
}
.footer-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  color: rgba(233,238,249,.70);
  font-size: 13px;
}
.footer a{ color: rgba(233,238,249,.82); }
.footer a:hover{ color: #fff; }

/* Forms (Order + Confirm) */
form{
  width:100%;
  max-width: 920px;
  margin: 0 auto;
}
label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(233,238,249,.9);
  margin: 14px 0 8px;
}
input, select, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea{ min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(233,238,249,.45); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(255,176,0,.45);
  box-shadow: 0 0 0 6px var(--accentGlow);
  background: rgba(255,255,255,.05);
}

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hint{
  font-size: 12px;
  margin-top: 8px;
  color: rgba(233,238,249,.58);
}

/* Chips (Presets) */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  color: rgba(233,238,249,.85);
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.chip:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.chip.on{
  background: rgba(255,176,0,.14);
  border-color: rgba(255,176,0,.28);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(255,176,0,.10);
}

/* Actions (Buttons row) */
.actions{
  max-width: 920px;
  margin: 18px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:flex-start;
}
.primary{ composes: cta-primary; } /* harmless; ignored by plain CSS engines */
.secondary{ composes: cta-secondary; } /* harmless */

/* Message box (your existing setMsg uses .box ok/bad) */
#msg{ max-width: 920px; margin: 18px auto 0; }
.box{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.box b{
  display:block;
  margin-bottom: 10px;
  font-size: 14px;
}
.box pre{
  margin:0;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(233,238,249,.75);
  font-size: 13px;
  line-height:1.45;
}
.box.ok{
  border-color: rgba(53,208,127,.25);
  background: rgba(53,208,127,.07);
}
.box.bad{
  border-color: rgba(255,93,93,.25);
  background: rgba(255,93,93,.07);
}

/* Legal checkbox */
.legal{
  max-width: 920px;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.legal input{ width:auto; margin-top: 3px; }
.legal a{
  color: rgba(255,176,0,.95);
  text-decoration: underline;
  text-decoration-color: rgba(255,176,0,.45);
}
.legal a:hover{ color:#fff; }

/* Modal (AGB / Datenschutz / Impressum Popup) */
/* Modal Backdrop */
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.65);

  display: flex;              /* <- wichtig: nie "none" hier */
  align-items: center;
  justify-content: center;

  padding: 18px;
}

/* Nur darüber verstecken */
.modal-backdrop.hidden{
  display: none !important;
}

.modal{
  width: min(920px, 100%);
  max-height: min(78vh, 720px);
  overflow: auto;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(18,27,43,.98),
    rgba(10,14,20,.98)
  );
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}

.modal-header{
  position: sticky;
  top: 0;
  background: rgba(12,16,24,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-body{
  padding: 14px;
  color: rgba(233,238,249,.78);
  font-size: 14px;
}

.modal-close{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.modal-close:hover{
  background: rgba(255,255,255,.10);
}

/* Audio players / examples (optional) */
audio{
  width:100%;
  margin-top: 10px;
  border-radius: 12px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* Responsive */
@media (max-width: 940px){
  .hero{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .usp{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }

  /* section vertikal bleibt über .stack – hier nur links/rechts relevant */
  section{ padding-left: var(--pad); padding-right: var(--pad); }
  .divider img{ height: 200px; }
}

/* Section spacing (mobile first) */
/* DEAKTIVIERT, weil .stack den vertikalen Abstand steuert */
.section{ padding: 0; }
@media (min-width: 900px){ .section{ padding: 0; } }

/* Note block ersetzt Divider */
.note-block .note{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 16px;
}
@media (min-width: 900px){
  .note-block .note{ padding: 22px; border-radius: 22px; }
}

.note-block h3{
  margin: 0 0 8px 0;
  font-size: 18px;
  line-height: 1.2;
}
.note-block p{
  margin: 0;
}

/* Optional: falls noch Divider irgendwo existiert */
.divider{ display:none; }

/* Price callout (Hero) */
.price-callout{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.price-pill{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,176,0,.35);
  background: linear-gradient(180deg, rgba(255,176,0,.18), rgba(255,122,24,.10));
  box-shadow: 0 16px 50px rgba(255,176,0,.16), 0 0 0 6px rgba(255,176,0,.08);
}

.price-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(233,238,249,.92);
  text-transform: uppercase;
}

.price-now{
  font-size: 22px;
  font-weight: 900;
  color: #fff;
}

.price-was{
  font-size: 14px;
  font-weight: 700;
  color: rgba(233,238,249,.65);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,93,93,.85);
}

.price-note{
  font-size: 13px;
  color: rgba(233,238,249,.70);
  padding-left: 6px;
}

@media (max-width: 940px){
  .price-now{ font-size: 20px; }
}

.legal-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.legal-modal.hidden{ display:none; }

.legal-dialog{
  background: #0f172a;
  color: #e5e7eb;
  width: min(900px, 92vw);
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.legal-header{
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content: space-between;
  align-items:center;
}
.legal-body{
  padding: 22px;
  overflow:auto;
  line-height: 1.6;
}
.legal-close{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.cta-buy{
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding-left: 18px;
  padding-right: 16px;
}

.cta-buy__label{
  white-space: nowrap;
}

.cta-buy__price{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(26,18,0,.25);
}

.cta-buy__now{
  font-weight: 900;
  letter-spacing: .2px;
}

.cta-buy__was{
  font-size: 13px;
  opacity: .7;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Mobile: Preis unter Label, damit es nicht quetscht */
@media (max-width: 520px){
  .cta-buy {
  justify-content: center;      /* Zentriert Text & Preis in der Mitte */
  gap: 24px;                    /* Schöner Abstand zwischen Text und Preis */
  min-height: 54px;             /* Macht den Button etwas höher/griffiger */
  padding-left: 32px;           /* WICHTIG: Mehr Abstand zum linken Rand (Rundung) */
  padding-right: 32px;          /* WICHTIG: Mehr Abstand zum rechten Rand */
  width: 100%;                  /* Nutzt die volle Breite (bis max-width) */
}
  .cta-buy__price{
    border-left: 0;
    padding-left: 0;
    opacity: .95;
  }
  .cta-buy__label{ white-space: normal; }
}

/* Einheitlicher Abstand zwischen allen Haupt-Boxen */
.stack > * + * {
  margin-top: 32px;
}

/* Desktop etwas luftiger */
@media (min-width: 900px) {
  .stack > * + * {
    margin-top: 44px;
  }
}
/* ===== Select Dropdown Fix (Dark Mode) ===== */

select {
  background-color: rgba(255,255,255,.04);
  color: var(--text);
}

/* Dropdown-Liste */
select option {
  background-color: #0f172a;   /* dunkler Hintergrund */
  color: #e9eef9;              /* helle Schrift */
}

/* Hover / Auswahl */
select option:checked,
select option:hover {
  background-color: #ffb000;
  color: #1a1200;
}

/* Plyr Audio Player Anpassung an Dark Mode */
:root {
  --plyr-color-main: var(--accent);       /* Dein Gold-Gelb */
  --plyr-audio-controls-background: rgba(255, 255, 255, 0.05); /* Leicht transparenter Hintergrund */
  --plyr-audio-control-color: var(--text); /* Deine Textfarbe */
  --plyr-audio-control-color-hover: #fff;
  --plyr-range-track-height: 4px;
  --plyr-control-radius: 6px;
}

.plyr--audio .plyr__controls {
  border: 1px solid var(--line);
  border-radius: 12px; /* Passt zu deinen Cards */
  padding: 10px;
}

/* Entfernt den Download-Button visuell, falls er trotz Config auftaucht */
.plyr__controls__item.plyr__menu { display: none !important; }

/* === HERO LAYOUT FIX === */

/* 1. Bild höher ausrichten */
/* Wir suchen den Container, der Text und Bild hält, und richten ihn oben aus */
.hero.container {
    align-items: start; /* Schiebt das Bild nach oben */
    /* Falls der Text jetzt zu hoch klebt, geben wir ihm etwas Luft */
    padding-top: 40px; 
}

/* 2. Buttons nebeneinander (Desktop) */
.hero-actions {
    display: flex;
    flex-direction: row; /* Nebeneinander erzwingen */
    align-items: flex-start; /* Oben bündig ausrichten */
    gap: 20px; /* Abstand zwischen den Buttons */
    margin-top: 30px;
    flex-wrap: wrap; /* Wichtig: Erlaubt Umbruch bei kleinen Bildschirmen */
}

/* Der linke Block (Kaufen + Kleingedrucktes) */
.cta-block {
    flex: 1 1 300px; /* Nimmt Platz, aber mind. 300px breit */
    max-width: 420px; /* Nicht breiter als das */
}

/* Der rechte Button (Beispiele) */
.hero-secondary-btn {
    flex: 0 1 auto; /* Nimmt nur den Platz, den der Text braucht */
    white-space: nowrap; /* Text darf nicht umbrechen */
    /* Damit er optisch zum großen Button passt, machen wir ihn gleich hoch */
    min-height: 54px; 
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optional: Wenn du ihn breiter willst, entferne den Kommentar unten */
    /* min-width: 200px; */
}


/* WICHTIG: Mobile Anpassung (unter 768px Breite) */
@media (max-width: 768px) {
    .hero.container {
        padding-top: 20px; /* Weniger Abstand auf Handy */
    }

    .hero-actions {
        flex-direction: column; /* Auf Handy wieder untereinander */
        gap: 15px;
    }

    .cta-block, 
    .hero-secondary-btn {
        width: 100%; /* Volle Breite nutzen */
        max-width: none; /* Begrenzung aufheben */
        flex: none;
    }
    
    .hero-secondary-btn {
        /* Auf Handy sieht es zentriert unter dem Kaufen-Button besser aus */
        margin-left: auto;
        margin-right: auto;
        max-width: 420px; /* Passt sich dem oberen Button an */
    }
}

/* === BUTTON HÖHEN FIX === */

/* === BUTTON HÖHEN FIX (Optimiert) === */

.cta-buy,
.hero-secondary-btn {
    min-height: 52px;   /* Schlanker (war 64px) */
    height: 52px;       /* Erzwingt gleiche Höhe */
    
    display: flex;
    align-items: center; 
    
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* Optional: Falls der Text im Sekundär-Button nicht perfekt mittig wirkt */
.hero-secondary-btn {
    justify-content: center;
}