/* Stil wie die Anmeldeseiten auf business-celebrity.com (Videotraining): Lora + Roboto,
   zentrierte Überschriften mit Schwung, goldener Knopf, abwechselnd weiße und cremefarbene Flächen.
   Gilt nur für die Landingpage (body.lp), die App behält ihr eigenes Design. */
@font-face { font-family: "Lora"; src: url("/fonts/lora.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/roboto.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
body.lp { --creme: #f7f3ec; --gold: linear-gradient(136deg, #ffc02e 0%, #ffbb45 21%, rgba(248,248,248,.8) 44%, #f5c76a 70%, #ffc02e 100%);
  background: #fff; color: #3a3939; font-family: "Roboto", system-ui, sans-serif; line-height: 1.8; }
.lp h1, .lp h2, .lp h3 { font-family: "Lora", Georgia, serif; color: #0c1115; letter-spacing: 0; }
.lp h1 { font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.3; }
.lp h2 { font-weight: 400; text-align: center; font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.35; }
.lp h2 .schwung { display: inline-block; padding-bottom: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 50 2, 120 2, 198 6 M 20 10 C 80 6, 140 6, 190 9' fill='none' stroke='%23a32355' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% 12px no-repeat; }
.lp section { padding: 64px 0; }
.lp section + section { border-top: 0; }
.lp section:nth-of-type(odd) { background: var(--creme); }
.lp .kicker { text-transform: uppercase; font-size: .9rem; letter-spacing: .04em; }
.lp .untertitel { color: #3a3939; font-family: "Lora", Georgia, serif; font-style: italic; }
.lp .held { background: #fff; padding: 48px 0 64px; }
.lp .held-text { text-align: center; }
.lp .held-text > p:not(.untertitel) { text-align: left; }
.lp .von { justify-content: center; text-align: left; }
.lp .knopf { background: var(--gold); color: #343633; text-transform: uppercase; letter-spacing: 2px; font-weight: 500;
  font-size: .95rem; padding: 18px 30px; border-radius: 100px; }
.lp .knopf:hover { filter: brightness(1.04); color: #343633; }
.lp .karte { border-radius: 6px; box-shadow: 0 10px 30px rgba(12,17,21,.08); border: 1px solid #eee5d8; }
.lp .anmelde-karte { border-top: 4px solid var(--beere); }
.lp .anmelde-karte h2 { font-weight: 700; }
.lp .anmelde-karte .unter { text-align: center; }
.lp .formular input[type=text], .lp .formular input[type=email] { border-radius: 4px; border: 1px solid #d9cfc2; }
.lp .liste li { padding-left: 38px; }
.lp .liste li::before { border-radius: 4px; width: 22px; height: 22px; top: 6px; }
.lp .zitat { font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.45rem; text-align: center; }
.lp .geschichte-raster { display: grid; gap: 32px; }
.lp .geschichte-foto { margin: 0; }
.lp .geschichte-foto img { width: 100%; height: auto; border-radius: 6px; display: block; }
.lp .geschichte-foto figcaption { font-size: .85rem; color: var(--text-leise); text-align: center; margin-top: 8px; font-style: italic; font-family: "Lora", Georgia, serif; }
.lp .ki-gemacht { border: 0; border-left: 4px solid var(--beere); border-radius: 0; background: #fff; padding: 20px 24px; font-size: 1rem; }
.lp .ueber img { border-radius: 6px; width: 260px; height: 320px; object-position: 48% 30%; }
.lp footer { background: #fff; }
@media (min-width: 880px) {
  .lp .geschichte-raster { grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
  .lp .geschichte-foto { position: sticky; top: 24px; }
  .lp .ueber { grid-template-columns: 260px 1fr; gap: 40px; }
  .lp .ueber h2 { text-align: left; }
  .lp .held-text { text-align: left; }
  .lp .von { justify-content: flex-start; }
}
@media (max-width: 879px) { .lp .geschichte-foto { max-width: 340px; margin: 0 auto; order: -1; } .lp .ueber { text-align: center; } .lp .ueber img { margin: 0 auto; } }