/* cb07 · Textseiten (Datenschutz, Hilfe & Kontakt): Kopf auf Lila, Lesespalte als weißes Heftblatt auf Gelb */

/* Lesespalte: Kopf und Heftblatt teilen sich dieselbe Achse */
.ff-textkopf,
.ff-textseite {
  --blatt-pad: clamp(22px, 5vw, 72px);
  --blatt-rand: 7px;
  --textspalte: calc(68ch + 2 * var(--blatt-pad) + 2 * var(--blatt-rand));
}

/* ---------- Kopf ---------- */
.ff-textkopf {
  padding-block: var(--space-5) calc(var(--space-8) + var(--stanz-h));
}
.ff-textkopf__inner { max-width: calc(var(--textspalte) + 2 * var(--gutter)); }
.ff-textkopf__marke {
  display: inline-block;
  padding: 6px 18px 10px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ff-pflaume);
  text-decoration: none;
  background: var(--surface-etikett);
  border: 4px solid var(--border-sticker);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-sticker);
  rotate: -1.5deg;
  transition: rotate var(--dauer-kurz) var(--ease-pop), scale var(--dauer-kurz) var(--ease-pop);
}
.ff-textkopf__marke:hover { rotate: 0deg; scale: 1.04; }

.ff-textkopf__buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-7);
  align-items: end;
  margin-top: clamp(40px, 6vw, 80px);
}
.ff-textkopf__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 640px;
}
.ff-textkopf__titel {
  --tilt: -2.5deg;
  font-size: var(--fs-h2);
  white-space: normal;
  text-align: left;
  background: var(--surface-etikett);
  border-width: 7px;
  border-radius: 30px;
  padding: .26em .62em .38em;
  box-shadow: var(--shadow-hoch);
}
.ff-textkopf__lead {
  max-width: 38ch;
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-lead);
  line-height: 1.38;
}
.ff-textkopf__fritte {
  --tilt: 5deg;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  margin-bottom: calc(var(--space-4) * -1);
  rotate: var(--tilt);
}

/* Kontakt-Knopf: dunkler Sticker wie der Store-Knopf */
.ff-mailknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  min-height: 64px;
  padding: 12px 26px 14px 20px;
  font-weight: 600;
  font-size: clamp(1.15rem, .95rem + 1vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ff-weiss);
  text-decoration: none;
  background: var(--ff-pflaume);
  border-radius: var(--radius-rund);
  box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), var(--shadow-hoch);
  rotate: -1.5deg;
  transition: scale var(--dauer-kurz) var(--ease-pop), rotate var(--dauer-kurz) var(--ease-pop), box-shadow var(--dauer-kurz) var(--ease-weich);
}
.ff-mailknopf:hover { scale: 1.04; rotate: 1deg; }
.ff-mailknopf:active { scale: .97; box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), var(--shadow-gedrückt); }
.ff-mailknopf:focus-visible {
  border-radius: var(--radius-rund);
  box-shadow: 0 0 0 var(--sticker-rand) var(--border-sticker), 0 0 0 calc(var(--sticker-rand) + 3px) var(--ff-pflaume);
}
.ff-mailknopf__icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  color: var(--ff-gold);
}
.ff-mailknopf__adresse { overflow-wrap: anywhere; }

/* ---------- Lesespalte ---------- */
.ff-textseite { padding-top: calc(var(--space-8) + var(--stanz-h)); }
.ff-textblatt {
  max-width: var(--textspalte);
  margin-inline: auto;
  padding: var(--blatt-pad);
  border-width: var(--blatt-rand);
  border-radius: 36px;
  box-shadow: var(--shadow-hoch);
}

.ff-text {
  font-size: 1.0625rem;
  line-height: 1.62;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.ff-text > * + * { margin-top: var(--space-4); }
.ff-text h2 {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.65rem, 1.35rem + 1.1vw, 2.35rem);
  line-height: 1.1;
  color: var(--text-strong);
  text-wrap: balance;
  hyphens: manual;
}
.ff-text h3 {
  margin-top: var(--space-6);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-strong);
}
.ff-text h2 + *,
.ff-text h3 + * { margin-top: var(--space-3); }
.ff-text h2 + h3 { margin-top: var(--space-5); }
.ff-text > :first-child { margin-top: 0; }
.ff-text strong { font-weight: 600; }
.ff-text address { font-style: normal; }
.ff-text a {
  font-weight: 600;
  overflow-wrap: anywhere;
  hyphens: manual;
  border-radius: 4px;
  transition: background-color var(--dauer-kurz) var(--ease-weich);
}
.ff-text a:hover { background-color: rgb(247 197 72 / .55); }

/* Listen mit Pommes als Aufzählungszeichen */
.ff-text ul > li {
  position: relative;
  padding-left: 30px;
}
.ff-text ul > li + li { margin-top: var(--space-3); }
.ff-text ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .32em;
  width: 10px;
  height: 21px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ff-gold) 64%, var(--ff-gold-schatten) 64%);
  border: 2px solid var(--ff-pflaume);
  border-top: 4px solid var(--ff-kruste);
  rotate: 12deg;
}
.ff-text ul > li:nth-child(even)::before { rotate: -8deg; }

/* Schritte (Hilfe): Nummer als gelber Sticker */
.ff-text ol { counter-reset: ff-schritt; }
.ff-text ol > li {
  position: relative;
  min-height: 44px;
  padding-left: 60px;
  counter-increment: ff-schritt;
}
.ff-text ol > li + li { margin-top: var(--space-5); }
.ff-text ol > li::before {
  content: counter(ff-schritt);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-bottom: 3px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ff-pflaume);
  background: var(--ff-gold);
  border: 3px solid var(--border-sticker);
  border-radius: var(--radius-rund);
  box-shadow: 0 0 0 2px var(--ff-pflaume);
  rotate: -6deg;
}

/* Kasten „Kurz gesagt“ als gelber Sticker */
.ff-kurz {
  --tilt: -1deg;
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--surface-etikett);
  border-width: 5px;
  border-radius: var(--radius-l);
}
.ff-text .ff-kurz__titel {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.95rem);
}
.ff-text .ff-kurz ul { margin-top: var(--space-4); }
.ff-text .ff-kurz ul > li::before { background: linear-gradient(90deg, var(--ff-weiss) 64%, var(--ff-lavendel) 64%); }

.ff-text__stand {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---------- schmal ---------- */
@media (max-width: 760px) {
  .ff-textkopf { padding-bottom: calc(var(--space-7) + var(--stanz-h)); }
  .ff-textkopf__buehne {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-7);
  }
  .ff-textkopf__text { gap: var(--space-5); }
  .ff-textkopf__lead { padding: var(--space-4) var(--space-5); }
  .ff-textkopf__lead::before { display: none; }
  .ff-textkopf__titel { font-size: clamp(2.1rem, 9.4vw, 3rem); }
  /* Fritte steht mobil klein in der Zeile der Wortmarke, über dem Titel */
  .ff-textkopf__fritte {
    --tilt: 8deg;
    position: absolute;
    right: calc(var(--gutter) + 4px);
    top: 10px;
    width: 68px;
    margin: 0;
  }
  .ff-textblatt { border-radius: 28px; }
  .ff-kurz { padding: var(--space-5); margin-inline: -6px; }
  .ff-text ol > li { padding-left: 56px; }
}