/* haendler.html – Mitmachen für Geschäfte */

.hero{padding-block:clamp(64px,8vw,120px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.field-deep .lede{color:#E5EEF5}
.field-deep .btn{color:var(--yellow-ink)}
.hero-media{position:relative}
.hero-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sky)}
/* echte Gutscheinkarte klein unten links über dem Luftbild */
.hero-media .hero-card{position:absolute;left:-4%;bottom:-8%;width:34%;height:auto;aspect-ratio:1200/757;border-radius:3.5%/5.6%;background:var(--blue);transform:rotate(-6deg);transition:transform .5s var(--ease)}
.hero-media:hover .hero-card{transform:rotate(0deg)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.split--top{align-items:start}
.split-text p{max-width:58ch}
.split-media img{width:100%;height:auto;aspect-ratio:3/4;max-height:720px;object-fit:cover;background:var(--sky)}
.text-pic{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sky);margin-top:24px}

/* Vorteile als offene Liste */
.benefits{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.benefits li{display:grid;gap:6px}
.benefits strong{font-family:var(--display);font-size:var(--step-2);color:var(--blue);font-weight:600;line-height:1.05}
.benefits span{color:var(--ink-2);max-width:52ch}

/* Vereine */
.clubs{list-style:none;margin:0 0 1.5em;padding:0;display:grid;gap:8px}
.clubs li{background:var(--paper);padding:20px 24px;display:grid;gap:4px;transition:transform .25s var(--ease-out),background var(--t-hover) ease}
.contact{transition:transform .25s var(--ease-out),background var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.clubs li:hover,.contact:hover{transform:translateY(-1px);background:var(--cream)}}
@media (prefers-reduced-motion:reduce){.clubs li:hover,.contact:hover{transform:none}}
.clubs strong{font-weight:600;color:var(--blue);font-size:var(--step-1)}
.clubs span{color:var(--ink-2);max-width:60ch}

/* Ablauf: Reihenfolge durch Worte, darunter der Blick über die Altstadt als breites Band (Kirchturm oben links im Bild halten) */
#ablauf .split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:28px}
.steps li{display:grid;gap:6px}
.steps strong{font-family:var(--display);font-size:var(--step-2);color:var(--blue);font-weight:600;line-height:1.05}
.steps span{color:var(--ink-2);max-width:60ch}
.ablauf-band{margin:clamp(40px,5vw,72px) auto 0}
.ablauf-band img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:30% 0;background:var(--sky)}

/* Kontakt auf Gelb: links Text + Vereinsadressen, rechts das Formular */
#kontakt .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.contacts{display:grid;gap:8px;margin-top:32px}
.contact{background:var(--paper);padding:clamp(20px,2.5vw,32px);color:var(--ink)}
.contact p:last-child{margin:0}
.contact-name{font-family:var(--display);font-size:var(--step-1);color:var(--blue);font-weight:600;margin-bottom:.3em}
#kontakt .form-feld label,#kontakt .form-check label{color:var(--yellow-ink)}

@media (max-width:860px){
  /* Kopfzeile: Wortmarke kompakter, damit „Menü“ nicht über den Rand läuft */
  .site-head .wrap{gap:12px}
  .wordmark{font-size:18px;gap:8px}
  .wordmark .mark{width:26px;height:26px;font-size:14px}
  .nav-toggle{padding:10px 0 10px 10px}
  .text-pic{aspect-ratio:16/10;margin-top:8px}
  .hero{padding-block:32px 56px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-media{order:-1;margin-inline:calc(-1*var(--gutter))}
  .hero-media img{aspect-ratio:4/3}
  .hero-media .hero-card{left:var(--gutter);bottom:5%;width:40%;transform:rotate(-4deg)}
  .split,.split--media-first,.split--top{grid-template-columns:1fr;gap:28px}
  .split--media-first .split-media{order:2;margin-inline:calc(-1*var(--gutter))}
  .split-media img{aspect-ratio:4/3;max-height:none}
  .steps{gap:20px}
  #ablauf .split{grid-template-columns:1fr}
  .steps li{gap:4px}
  .steps strong{font-size:var(--step-1)}
  .ablauf-band{width:100%;margin-top:32px}
  .ablauf-band img{aspect-ratio:4/3}
  .benefits{gap:20px}
  .benefits strong{font-size:var(--step-1)}
  #kontakt .split{grid-template-columns:1fr}
  .contacts{margin-top:16px;margin-bottom:32px}
}