/* =========================================================================
   FREEBIES

   -------------------------------------------------------------------------
   DER FREMDE IFRAME

   Das Anmeldeformular kommt von Brevo. Es liegt in einem iFrame einer
   anderen Domain, und dort hinein reicht kein CSS. Weder Schrift noch
   Farben noch Abstände lassen sich von hier aus ändern.

   Also wird nicht versucht, den Rahmen unsichtbar zu machen. Stattdessen
   bekommt er drumherum eine eigene Fläche in Markenfarben, genug Luft
   und eine Rundung. Dadurch liest er sich als Teil der Seite, obwohl er
   innen anders aussieht.

   Zur Höhe: Brevo liefert 305 Pixel als Vorschlag. Auf einem schmalen
   Telefon reicht das nicht, weil die Felder dort untereinander stehen.
   Deshalb wächst die Höhe hier nach Bildschirmbreite mit, und der iFrame
   darf zusätzlich innen scrollen. Falls Brevo eine Höhe per Nachricht
   schickt, überschreibt js/freebies.js sie ohnehin.
   ========================================================================= */

.fb-hero {
  background: linear-gradient(160deg, #FFFBF7 0%, var(--cream) 100%);
  padding: calc(var(--kopf-hoehe, 84px) + clamp(24px, 3.5vw, 56px)) 0 clamp(36px, 4.5vw, 64px);
}

.fb-kopf { max-width: 46rem; }

.fb-kopf h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin: 0 0 16px;
}


/* -------------------------------------------------------------------------
   Die Liste der Freebies

   Aktuell ein Eintrag. Als Raster angelegt, damit ein zweiter nur eine
   weitere Karte kostet und keine Umbauten.
   ------------------------------------------------------------------------- */

.fb-liste-sec {
  background: var(--white);
  padding: clamp(44px, 5.5vw, 80px) 0;
}

.fb-karte {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.fb-marke {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-dark);
  background: var(--peach);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 14px;
}

.fb-karte-text h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--charcoal);
  margin: 0 0 14px;
}

.fb-teaser {
  font-family: var(--sans);
  font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.08rem);
  line-height: 1.7;
  color: #5F4E42;
  margin: 0 0 20px;
  max-width: 48ch;
}

.fb-punkte {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.fb-punkte li {
  position: relative;
  padding-left: 26px;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5F4E42;
}
.fb-punkte li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
}

.fb-karte-bild {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(90, 60, 35, 0.18);
  background: var(--cream);
}
.fb-karte-bild img { width: 100%; height: auto; display: block; }

/* Solange keine Vorschau da ist, zeigt der Browser das kaputte Bild als
   leeres Kästchen. Die Fläche darunter macht daraus eine bewusste
   Leerstelle statt eines Fehlers. */
.fb-karte-bild::after {
  content: "Vorschau folgt";
  display: none;
}


/* -------------------------------------------------------------------------
   Das Formular
   ------------------------------------------------------------------------- */

.fb-form-sec {
  background: var(--cream);
  padding: clamp(48px, 6vw, 88px) 0;
}

.fb-form-kopf {
  max-width: 40rem;
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
}

.fb-form-kopf h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--charcoal);
  margin: 0 0 10px;
}

.fb-form-kopf p {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: #5F4E42;
  margin: 0;
}

.fb-form-rahmen {
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 18px 48px rgba(90, 60, 35, 0.13);
  /* clip statt hidden, damit die Rundung greift, ohne einen eigenen
     Scrollbereich um den iFrame zu legen. */
  overflow: clip;
  padding: 8px;
}

.fb-iframe {
  display: block;
  width: 100%;
  /* Brevo schlägt 305 Pixel vor. Das reicht nur, solange die Felder
     nebeneinander passen. */
  height: 360px;
  border: 0;
  border-radius: var(--r-sm);
}

/* Der Platzhalter, solange keine Einwilligung vorliegt. Gleicher
   Aufbau wie bei Calendly auf der Finanz-Check-Seite: sagen, wer der
   Dienst ist, was passiert, und einen Weg anbieten, der ohne ihn
   auskommt. */
.fb-platzhalter {
  padding: clamp(24px, 3.5vw, 40px);
  text-align: center;
}

.fbp-titel {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.fbp-text {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 0 auto 20px;
  max-width: 44ch;
}

.fbp-klein {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--warm-grey);
  margin: 16px 0 0;
}
.fbp-klein a { color: var(--orange-dark); overflow-wrap: anywhere; }

.fb-datenschutz {
  max-width: 620px;
  margin: 18px auto 0;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--warm-grey);
  text-align: center;
}
.fb-datenschutz a { color: var(--orange-dark); }


/* -------------------------------------------------------------------------
   Nach dem Eintragen
   ------------------------------------------------------------------------- */

.fb-danke-sec {
  background: linear-gradient(160deg, #FFFBF7 0%, var(--cream) 100%);
  padding: calc(var(--kopf-hoehe, 84px) + clamp(32px, 4vw, 64px)) 0 clamp(48px, 6vw, 88px);
}

.fb-danke {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.fb-danke-zeichen { font-size: 2.6rem; line-height: 1; }

.fb-danke h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--charcoal);
  margin: 12px 0 14px;
}

.fb-danke .lede { margin: 0 auto 28px; }

.fb-download { margin-bottom: 8px; }

.fb-danke-weiter {
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
}

.fb-danke-weiter h2 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--charcoal);
  margin: 0 0 10px;
}

.fb-danke-weiter p {
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.65;
  color: #5F4E42;
  margin: 0 0 20px;
}

.fb-danke-weiter .cta-zweitweg { display: block; margin-top: 16px; }


/* =========================================================================
   SCHMALE BILDSCHIRME
   ========================================================================= */

@media (max-width: 900px) {
  .fb-karte { grid-template-columns: minmax(0, 1fr); }
  /* Bild zuerst: Ein Freebie verkauft sich über das, was man bekommt. */
  .fb-karte-bild { order: -1; }
}

@media (max-width: 768px) {
  .fb-hero { padding-top: calc(var(--kopf-hoehe, 84px) + 20px); }
  .fb-liste-sec { padding: 36px 0; }
  .fb-form-sec { padding: 40px 0 44px; }

  .fb-karte-text .btn { width: 100%; justify-content: center; min-height: 54px; }

  /* Der entscheidende Punkt bei eingebetteten Formularen: Untereinander
     stehende Felder brauchen deutlich mehr Höhe. Zu wenig Höhe erzeugt
     ein zweites Scrollfeld mitten in der Seite, und der Absendeknopf
     liegt dann unsichtbar darunter. */
  .fb-iframe { height: 520px; }
  .fb-form-rahmen { padding: 6px; }

  .fb-danke-weiter .btn { width: 100%; justify-content: center; min-height: 54px; }
}

@media (max-width: 380px) {
  /* Auf sehr schmalen Geräten bricht in Brevo zusätzlich die
     Einwilligungszeile um. */
  .fb-iframe { height: 580px; }
}