/* Header-Abstand zum fixed Nav */
:root { --nav-h: 64px; }
.hero-section { padding-top: calc(var(--nav-h) + 6%); }

/* Deal-Badge & Hinweisstreifen – im Stil Ihrer Seite */
.deal-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:999px; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(145deg,var(--accent, #bfa94c),var(--accent-silver, #c0c0c0)); color:#0b0b0b;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
.deal-badge svg{stroke:#0b0b0b}

.stripe{
  background:var(--card, #1b1b1b);
  border:1px solid rgba(255,255,255,.10);
  border-left:4px solid var(--accent, #bfa94c);
  border-radius:.9rem; padding:1rem 1.1rem;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.stripe.bad{border-left-color:#d9534f}

/* Preise */
.price-wrap{display:flex; align-items:baseline; gap:.8rem; margin:.6rem 0}
.price-old{opacity:.8}
.price-old .strike{text-decoration:line-through}
.price-new{font-size:1.25rem; font-weight:800}
.price-new .final{color:var(--accent, #bfa94c)}

/* Feedback oben */
#topCodeFeedback.success{color:#198754}
#topCodeFeedback.error{color:#dc3545}

/* ===== Inline-Gratulationsanimation (unter dem Prüfen) ===== */
.gratz-inline{ margin-top: 1rem; display: block; }
.gratz-inline.d-none{ display: none; }

.gratz-card{
  position: relative; display: grid;
  grid-template-columns: 64px 1fr; gap: .9rem; align-items: center;
  padding: .9rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 14px 36px rgba(0,0,0,.18), 0 0 0 2px rgba(191,169,76,.22) inset;
  backdrop-filter: blur(10px) saturate(120%);
  transform: translateY(8px) scale(.98); opacity: 0;
  animation: gratzIn .5s cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes gratzIn { to { transform: translateY(0) scale(1); opacity: 1; } }

.gratz-left{ position: relative; width: 64px; height: 64px; }
.check{ width: 28px; height: 28px; stroke: #0b0b0b; fill: none; stroke-width: 3; }
.checkwrap{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(145deg,var(--accent, #bfa94c),var(--accent-silver, #c0c0c0));
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(191,169,76,.45);
  animation: pop .45s cubic-bezier(.2,.9,.2,1) .15s both;
}
@keyframes pop { 0%{ transform: scale(.6); } 100%{ transform: scale(1); } }

.ring{
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191,169,76,.35), transparent 70%);
  filter: blur(8px); opacity: 0; transform: scale(.85);
  animation: ringIn .6s ease .06s forwards;
}
@keyframes ringIn { to { opacity: 1; transform: scale(1); } }

.pulse{
  position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(191,169,76,.45); opacity: 0;
  animation: pulse 1.4s ease .25s 2 forwards;
}
@keyframes pulse { 0%{ opacity: .55; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.25); } }

.gratz-title{ font-weight: 900; color: var(--accent, #bfa94c); letter-spacing: .2px; }
.gratz-text{ color: var(--muted, #c8c8c8); font-weight: 600; }

/* Konfetti (dezent) */
.confetti-piece {
  position: fixed; width: 7px; height: 7px; top: -8px; left: 0;
  background: gold; opacity: .95; animation: fall 1.6s linear forwards;
  pointer-events: none; z-index: 9999;
}
@keyframes fall { to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* ========== NUR MOBILE TEXTE (UMBRUCH/GRÖSSE) ========== */
.ff-headline{
  font-weight: 900;
  line-height: 1.12;
  word-break: normal;
  overflow-wrap: anywhere;
  /* etwas kleiner, damit nichts clipped */
  font-size: clamp(1.6rem, 5.2vw + 0.5rem, 2.8rem);
}
.section-title{
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 3.4vw + .6rem, 1.9rem);
  letter-spacing: .2px;
  margin-bottom: 1rem;
}
.price-title{
  font-weight: 800;
  line-height: 1.22;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: clamp(1rem, 2.2vw + .7rem, 1.2rem);
}
.ff-lead{
  line-height: 1.55;
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 1.3vw + .82rem, 1.2rem);
}

/* Zusätzliche Sicherheit für extra kleine Geräte */
@media (max-width: 575.98px){
  #heroHeadline span{ display:inline; } /* darf frei umbrechen */
  .hero-section{ padding-top: calc(var(--nav-h) + 7%); } /* etwas mehr Luft */
}

/* Responsive Basis */
@media (max-width: 991.98px){
  .hero-section{ padding-top: calc(var(--nav-h) + 5%); }
}


/* ===== Mobile-Navbar: Brand-Text sauber umbrechen ===== */
.navbar .brand-text {
  min-width: 0;                 /* WICHTIG: erlaubt Umbruch im Flex-Item */
}

@media (max-width: 575.98px) {
  .navbar .navbar-brand { gap: .5rem; }       /* etwas weniger Abstand */
  .ff-logo-img { height: 36px; }              /* Logo minimal kleiner */

  .navbar .brand-title {
    white-space: normal;
    overflow-wrap: anywhere;                  /* bricht lange Worte */
    word-break: normal;
    line-height: 1.15;
    font-weight: 800;
    font-size: clamp(1rem, 4.2vw + .4rem, 1.25rem);
  }

  .navbar .brand-sub {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.2;
    font-size: clamp(.72rem, 1.2vw + .6rem, .9rem);
    opacity: .9;
  }
}