/* Kampagne: Altendorf F 45 Jubilaeums-Edition
   Alle Regeln gescopt auf .poeppel-campaign[data-campaign-slug="altendorf-120-edition"]
   Keine externen Requests, kein CDN, keine Webfonts, kein Tracking.
   Erzeugt aus Landingpage/index.html durch Lieferung/konvertieren.py —
   nicht von Hand aendern, sondern in der Quelle und neu konvertieren. */

.poeppel-campaign {
  /* Poeppel — Systemwerte, nicht #CC071E */
  --rot: #d51030;
  --rot-dunkel: #b30d27;
  --anthrazit: #3C3C3B;
  /* Altendorf — aus dem Aktions-PDF bei 300 dpi gemessen */
  --gruen: #009865;
  --gruen-tief: #002112;
  --gruen-mittel: #03754C;
  --gruen-hell: #35C48D;
  --orange: #F25924;
  --grau: #f4f4f4;
  --grau-linie: #dcdcdc;
  --text: #232323;
  --text-leise: #5f5f5f;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

.poeppel-campaign *, .poeppel-campaign *::before, .poeppel-campaign *::after { margin: 0; padding: 0; box-sizing: border-box; }
.poeppel-campaign { scroll-behavior: smooth; }
.poeppel-campaign { font-family: var(--schrift); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.poeppel-campaign img { max-width: 100%; height: auto; display: block; }
.poeppel-campaign a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .poeppel-campaign { scroll-behavior: auto; }
  .poeppel-campaign * { animation: none !important; transition: none !important; }
}

/* ---------- Kampagnenbereich ---------- */
.poeppel-campaign { --rand: 24px; }
.poeppel-campaign .bahn { max-width: 1180px; margin: 0 auto; padding: 0 var(--rand); }
.poeppel-campaign section { padding: 84px 0; }
.poeppel-campaign section.eng { padding: 60px 0; }
.poeppel-campaign .dunkel { background: linear-gradient(155deg, var(--gruen-mittel) 0%, var(--gruen-tief) 65%); color: #fff; }
.poeppel-campaign .hell { background: var(--grau); }

.poeppel-campaign h1, .poeppel-campaign h2, .poeppel-campaign h3 {
  line-height: 1.12; letter-spacing: -.02em; color: inherit; text-transform: none; font-weight: 800;
}
.poeppel-campaign h1 { font-size: clamp(38px, 6vw, 68px); }
.poeppel-campaign h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.poeppel-campaign h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 10px; }
.poeppel-campaign p { font-size: clamp(16px, 1.6vw, 18px); }
.poeppel-campaign .vorspann { font-size: clamp(17px, 1.8vw, 21px); color: var(--text-leise); max-width: 62ch; }
.poeppel-campaign .dunkel .vorspann { color: rgba(255,255,255,.86); }

.kicker { display: inline-block; background: var(--gruen); color: #fff; font-size: 13px; font-weight: 700;
          letter-spacing: 1.6px; text-transform: uppercase; padding: 8px 16px; margin-bottom: 18px; }

.knopf { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer;
         font: inherit; font-weight: 700; font-size: 17px; padding: 16px 30px; text-decoration: none;
         background: var(--rot); color: #fff; transition: background .18s ease, transform .18s ease; }
.knopf:hover { background: var(--rot-dunkel); transform: translateY(-2px); }
.knopf.zweit { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.knopf.zweit:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px #fff; }
.knopf svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero .marken { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.hero .marken img.wortmarke { height: 44px; width: auto; }
.hero .marken img.jubi { height: 78px; width: auto; }
.hero h1 { margin-bottom: 18px; }
.hero h1 .zusatz { display: block; color: var(--gruen-hell); }
.hero .knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero .frist { margin-top: 26px; font-size: 15px; color: rgba(255,255,255,.75); }
.hero figure { position: relative; }
.hero figcaption { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.6); }
.hero .stoerer { position: absolute; top: -14px; right: -6px; width: 132px; height: 132px; border-radius: 50%;
                 background: var(--orange); color: #fff; display: grid; place-content: center; text-align: center;
                 font-weight: 800; font-size: 15px; line-height: 1.22; transform: rotate(-8deg); }

/* ---------- Kennzahlen ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--grau-linie); }
.kennzahlen div { background: #fff; padding: 30px 26px; }
.kennzahlen .wert { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; color: var(--gruen); line-height: 1.1; }
.kennzahlen .bez { font-size: 15px; color: var(--text-leise); margin-top: 6px; }

/* ---------- Merkmale ---------- */
.merkmale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 44px; }
.merkmal { border-top: 3px solid var(--gruen); padding-top: 20px; }

/* ---------- Bildkacheln (Steuerungen, Sicherheit) ---------- */
.bildkacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; }
.kachel { background: #fff; border: 1px solid var(--grau-linie); display: flex; flex-direction: column; }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ededed; }
.kachel figcaption { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.kachel h3 { font-size: 23px; margin-bottom: 8px; }
.kachel p { font-size: 16px; line-height: 1.45; flex: 1 1 auto; }
.paketmarke { display: inline-block; align-self: flex-start; margin-top: 16px; background: var(--gruen);
              color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; padding: 6px 12px; }
.paketmarke.leise { background: transparent; color: var(--text-leise); padding: 6px 0;
                    box-shadow: inset 0 1px 0 var(--grau-linie); }

/* ---------- Technische Daten ---------- */
.daten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 42px; }
.datenblock { background: var(--grau); padding: 28px 26px; }
.datenblock h3 { color: var(--gruen); font-size: 19px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.datenliste > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-top: 1px solid var(--grau-linie); }
.datenliste > div:first-child { border-top: 0; padding-top: 0; }
.datenliste dt { font-size: 14px; color: var(--text-leise); }
.datenliste dd { font-size: 17px; font-weight: 700; }

/* ---------- Pakete ---------- */
.pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; align-items: stretch; }
.paket { background: #fff; border: 1px solid var(--grau-linie); padding: 34px 30px 30px;
         display: flex; flex-direction: column; }
.paket.hervor { border-color: var(--gruen); box-shadow: 0 0 0 2px var(--gruen); }
.paket .kennung { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
                  color: var(--gruen); margin-bottom: 10px; min-height: 20px; }
.paket .preis { font-size: clamp(32px, 3.4vw, 40px); font-weight: 800; margin: 6px 0 2px; }
.paket .netto { font-size: 14px; color: var(--text-leise); }
.paket .liste { margin: 18px 0 0; padding: 0; list-style: none; font-size: 15.5px; flex: 1 1 auto; }
.paket .liste li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--grau-linie); }
.paket .liste li:first-child { border-top: 0; }
.paket .liste li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px;
                           background: var(--gruen); }
.paket .sparen { display: inline-block; background: var(--orange); color: #fff; font-weight: 700;
                 font-size: 14px; padding: 7px 14px; margin-top: 20px; align-self: flex-start; }
.paket .knopf { margin-top: 18px; width: 100%; justify-content: center; font-size: 16px; padding: 14px 20px; }
.paket .streich { text-decoration: line-through; color: var(--text-leise); font-size: 15px; }

/* ---------- Gewinnspiel ---------- */
.gewinn { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.gewinn .zahl { font-size: 92px; font-weight: 800; color: var(--gruen-hell); line-height: 1; }
.gewinn ul { list-style: none; margin-top: 26px; }
.gewinn li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.18); }
.gewinn li b { display: block; color: var(--gruen-hell); }

/* ---------- Ablauf ---------- */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; counter-reset: schritt; }
.schritt { position: relative; padding-top: 66px; }
.schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; top: 0; left: 0;
                   width: 50px; height: 50px; background: var(--gruen); color: #fff; display: grid;
                   place-content: center; font-size: 24px; font-weight: 800; }

/* ---------- Poeppel-Mehrwert ---------- */
.vorteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 42px; }
.vorteil { display: flex; gap: 18px; align-items: flex-start; }
.vorteil svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--rot); margin-top: 3px; }

/* ---------- Formular ---------- */
.kontakt-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; }
form.anfrage { background: #fff; border: 1px solid var(--grau-linie); padding: 34px; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { margin-bottom: 18px; }
.feld label { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 7px; }
.feld .pflicht { color: var(--rot); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid #c4c4c4;
  background: #fff; color: var(--text); border-radius: 0;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 3px solid rgba(0,152,101,.35); outline-offset: 1px; border-color: var(--gruen);
}
.feld textarea { min-height: 118px; resize: vertical; }
.feld .erklaerung { font-size: 13.5px; color: var(--text-leise); margin-top: 6px; }
.ankreuz { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; font-size: 15px; }
.ankreuz input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--gruen); }
form.anfrage .knopf { width: 100%; justify-content: center; margin-top: 8px; }
.formhinweis { font-size: 13.5px; color: var(--text-leise); margin-top: 16px; }
.fehler { color: var(--rot); font-size: 14px; margin-top: 6px; display: none; }
.feld.ungueltig input, .feld.ungueltig select { border-color: var(--rot); }
.feld.ungueltig .fehler { display: block; }
.rueckmeldung { display: none; background: #eaf7f0; border-left: 5px solid var(--gruen); padding: 22px 24px; margin-bottom: 22px; }
.rueckmeldung.sichtbar { display: block; }

.telefonhinweis { display: flex; gap: 14px; align-items: center; background: #fff4e8;
                  border-left: 5px solid var(--orange); padding: 16px 20px; margin-bottom: 24px;
                  font-size: 16px; line-height: 1.4; }
.telefonhinweis svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--orange); }
.telefonhinweis a { color: var(--rot); text-decoration: none; white-space: nowrap; }

.ansprech { background: #fff; border: 1px solid var(--grau-linie); padding: 30px; }
.ansprech p { font-size: 16px; }
.ansprech .knopf.telefon { margin: 20px 0 4px; width: 100%; justify-content: center; }
.ansprech dl { margin-top: 18px; font-size: 15.5px; }
.ansprech dt { font-weight: 700; margin-top: 14px; }
.ansprech dd { color: var(--text-leise); }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--grau-linie); }
.faq details { border-bottom: 1px solid var(--grau-linie); }
.faq summary { cursor: pointer; padding: 22px 44px 22px 0; font-weight: 700; font-size: 18px; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 30px; font-weight: 400; color: var(--gruen); }
.faq details[open] summary::after { content: "–"; }
.faq .antwort { padding: 0 0 24px; max-width: 78ch; }
.faq .antwort a { color: var(--rot); }

/* ---------- Quellen ---------- */
.quellen { font-size: 14px; color: var(--text-leise); }
.quellen li { margin-top: 8px; }
.quellen a { color: var(--rot); }

/* ---------- Sticky-CTA mobil ---------- */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--rot); color: #fff; text-decoration: none; font-weight: 700; font-size: 17px;
    align-items: center; justify-content: center; gap: 10px; padding: 17px 20px;
    box-shadow: 0 -4px 18px rgba(0,0,0,.22);
  }
  .poeppel-campaign { padding-bottom: 66px; }
}

/* ---------- Umbrueche ---------- */
@media (max-width: 1000px) {
  .hero .raster, .gewinn, .kontakt-raster { grid-template-columns: 1fr; gap: 38px; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .merkmale, .pakete, .schritte, .vorteile, .daten, .bildkacheln { grid-template-columns: 1fr; }
  .poeppel-campaign section { padding: 60px 0; }
}
@media (max-width: 620px) {
  .feldreihe { grid-template-columns: 1fr; }
  .hero .stoerer { width: 108px; height: 108px; font-size: 13px; }
  .kennzahlen { grid-template-columns: 1fr; }
}