/* mitmachen.php: Seitenlayout auf Basis der Bausteine in styles.css
   (Hero-Rezept, .card, .list-rows, .chip, .photo). Nur Tokens, keine Effekte. */

/* Hero: Wrapper fuer Standard- und Leichte-Sprache-Text im Grid der hero-copy */
.page-mitmachen .hero-copy .ls-hide {
  display:grid;
  gap:var(--sp-4);
  min-width:0
}
.page-mitmachen .hero-copy .ls-hide > * {
  margin:0
}
.page-mitmachen .hero-copy .ls-only h1 {
  margin:0 0 var(--sp-3)
}
.page-mitmachen .hero-copy .ls-only p {
  font-size:var(--fs-lg);
  line-height:var(--lh-copy);
  color:var(--muted);
  max-width:48ch
}
@media (max-width:767px) {
  .page-mitmachen .hero-photo img {
    aspect-ratio:21/9
  }
}

/* Mitglied werden
   Achtung: styles-extra.css setzt .page-mitmachen .member-grid ab 1024 px auf
   vier Spalten (Regel der alten Seite). Deshalb hier gleiche Spezifitaet und
   spaetere Quelle, sonst greift die alte Regel. */
.page-mitmachen .member-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start
}
@media (min-width:900px) {
  .page-mitmachen .member-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
    gap:var(--sp-6)
  }
}
.member-card {
  display:grid;
  gap:var(--sp-3);
  justify-items:start
}
.member-price {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2);
  margin:0
}
.member-price strong {
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--ink)
}
.member-price span {
  font-size:var(--fs-lg);
  color:var(--muted)
}
.member-copy {
  margin:0;
  color:var(--muted);
  max-width:40ch
}
.member-note {
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-soft)
}
.member-benefits h3 {
  margin:0 0 var(--sp-2);
  font-size:var(--fs-lg)
}
.benefit-rows .list-row {
  display:grid;
  gap:var(--sp-1);
  justify-content:start;
  padding:var(--sp-3) 0
}
.benefit-rows .list-row strong {
  font-size:var(--fs-base);
  color:var(--ink)
}
.benefit-rows .list-row p {
  color:var(--muted);
  max-width:60ch
}

/* Kontakt: Kontaktwege links, Formular rechts
   styles.css belegt .contact-grid mit auto-fit-Spalten, deshalb gebunden. */
.page-mitmachen .contact-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);
  margin-top:0;
  align-items:start
}
@media (min-width:920px) {
  .page-mitmachen .contact-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    gap:var(--sp-6)
  }
}
.contact-rows .list-row {
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:var(--sp-3);
  align-items:center;
  padding:var(--sp-2) 0
}
.contact-rows svg {
  width:24px;
  height:24px;
  color:var(--muted)
}
.contact-cell {
  display:grid;
  min-width:0
}
.contact-label {
  font-size:var(--fs-sm);
  color:var(--muted)
}
.contact-rows a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--fs-base);
  color:var(--accent-2);
  text-decoration:underline;
  text-underline-offset:.15em;
  overflow-wrap:anywhere
}
.contact-rows a:hover {
  color:var(--accent-2-strong)
}

/* Formular: Feinschliff auf den Regeln aus styles-extra.css */
.page-mitmachen .cf-chips {
  gap:var(--sp-2)
}
.page-mitmachen .cf-context-hint {
  transition:none
}
.page-mitmachen .cf-context-hint:empty {
  display:none
}
/* Falle fuer Spam-Roboter: kein sichtbares Feld, kein Tippziel */
.page-mitmachen .cf-hp input {
  width:1px;
  height:1px;
  padding:0;
  border:0;
  opacity:0
}
.page-mitmachen .cf-field label {
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-transform:none;
  letter-spacing:0;
  color:var(--ink)
}
.page-mitmachen .cf-optional {
  font-weight:var(--fw-regular);
  opacity:1;
  color:var(--ink-soft)
}
.page-mitmachen .cf-field input,
.page-mitmachen .cf-field textarea {
  min-height:48px;
  padding:.7rem .9rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  box-shadow:none;
  transition:border-color var(--dur) var(--ease)
}
.page-mitmachen .cf-field input:focus,
.page-mitmachen .cf-field textarea:focus {
  outline:3px solid var(--accent-2);
  outline-offset:2px;
  border-color:var(--accent-2);
  box-shadow:none
}
.page-mitmachen .cf-consent-label {
  align-items:center;
  min-height:44px;
  gap:var(--sp-1);
  font-size:var(--fs-sm);
  color:var(--muted)
}
.page-mitmachen .cf-consent-label input[type="checkbox"] {
  width:44px;
  height:44px;
  min-width:44px;
  margin:0 0 0 -10px;
  border:0;
  border-radius:0;
  background:transparent;
  transition:none
}
.page-mitmachen .cf-consent-label input[type="checkbox"]:checked {
  border-color:transparent;
  background:transparent
}
.page-mitmachen .cf-consent-label input[type="checkbox"]::before {
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  box-sizing:border-box;
  width:24px;
  height:24px;
  border:2px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--bg)
}
.page-mitmachen .cf-consent-label input[type="checkbox"]:checked::before {
  border-color:var(--accent-2);
  background:var(--accent-2)
}
.page-mitmachen .cf-consent-label input[type="checkbox"]:checked::after {
  left:17px;
  top:13px;
  width:7px;
  height:13px
}
.page-mitmachen .cf-consent-label input[type="checkbox"]:focus-visible {
  outline:3px solid var(--accent-2);
  outline-offset:-6px;
  border-radius:var(--radius-sm);
  box-shadow:none
}
.page-mitmachen .cf-submit {
  width:100%;
  height:auto;
  min-height:48px;
  background:var(--accent-fill);
  color:var(--on-accent);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  font-weight:var(--fw-medium);
  box-shadow:none;
  transition:background var(--dur) var(--ease)
}
.page-mitmachen .cf-submit:hover:not(:disabled) {
  background:var(--accent-strong);
  box-shadow:none
}
.page-mitmachen .cf-status--error,
.page-mitmachen .cf-status--success,
.page-mitmachen .cf-success {
  animation:none
}
.page-mitmachen .cf-status--error,
.page-mitmachen .cf-status--success {
  padding-left:1rem
}
.page-mitmachen .cf-status--error::before,
.page-mitmachen .cf-status--success::before {
  content:none
}
.page-mitmachen .cf-success {
  padding:var(--sp-5) var(--sp-4);
  border:1px solid var(--accent-2);
  border-radius:var(--radius-md)
}

/* Alltag: Zeilen mit Strichicon links */
.alltag-rows .list-row {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:var(--sp-4);
  align-items:start;
  padding:var(--sp-4) 0
}
.alltag-symbol {
  display:block;
  width:32px;
  height:32px;
  margin-top:2px;
  color:var(--accent-2)
}
.alltag-symbol svg {
  display:block;
  width:32px;
  height:32px
}
.alltag-body {
  min-width:0
}
.alltag-body h3 {
  margin:0 0 var(--sp-1);
  font-size:var(--fs-lg);
  line-height:var(--lh-snug)
}
.alltag-body p {
  margin:0;
  font-size:var(--fs-md);
  line-height:var(--lh-copy);
  color:var(--muted);
  max-width:60ch
}
.alltag-body a {
  color:var(--accent-2);
  text-decoration:underline;
  text-underline-offset:.15em
}
.alltag-body a:hover {
  color:var(--accent-2-strong)
}

/* Helfen: vier Karten, ab 768 px zwei Spalten */
.helfen-grid {
  display:grid;
  gap:var(--sp-4)
}
@media (min-width:768px) {
  .helfen-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
a.helfen-card {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 20px;
  gap:var(--sp-3);
  align-items:start;
  padding:var(--sp-4);
  color:inherit;
  text-decoration:none
}
a.helfen-card:hover,
a.helfen-card:focus-visible {
  border-color:var(--accent-2)
}
.helfen-icon {
  display:block;
  width:32px;
  height:32px;
  margin-top:2px;
  color:var(--accent-2)
}
.helfen-icon svg {
  display:block;
  width:32px;
  height:32px
}
.helfen-card-body {
  display:block;
  min-width:0
}
.helfen-card h3 {
  margin:0 0 var(--sp-1);
  font-size:var(--fs-lg);
  line-height:var(--lh-snug)
}
.helfen-card p {
  margin:0;
  font-size:var(--fs-md);
  line-height:var(--lh-copy);
  color:var(--muted)
}
.helfen-chevron {
  width:20px;
  height:20px;
  align-self:center;
  color:var(--muted)
}

/* Stimmen: ein Video, mittig, hoechstens 960 px */
.stimmen-video {
  grid-template-columns:minmax(0,1fr);
  max-width:960px;
  margin:0 auto
}
.stimmen-video .video-card {
  border:1px solid var(--line);
  box-shadow:none
}

/* FAQ: linksbuendig unter der Ueberschrift */
.page-mitmachen .faq-list {
  max-width:760px;
  margin:0
}
.page-mitmachen .faq-question {
  font-size:var(--fs-base)
}


/* Bereichskarte angetippt: Formular leuchtet kurz auf (04.09.2026) */
@media (prefers-reduced-motion: no-preference) {
  .cf.is-highlight {
    animation: cfPuls 2s var(--ease) 1;
  }

  @keyframes cfPuls {
    0% { box-shadow: 0 0 0 0 rgba(216, 30, 42, .45); }
    35% { box-shadow: 0 0 0 10px rgba(216, 30, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 30, 42, 0); }
  }
}