/* Kampagne „Kostenloser Entwurf“ (/kostenloser-entwurf/ und /bestaetigen/).
   Eigene Datei statt style.css: Die Regeln gelten nur auf diesen zwei Seiten,
   und eine Änderung an style.css verlangte einen neuen ?v= in allen Seiten
   (DESIGN.md, „Verbindlich“). Farben, Radien und Schriften aus den Token von
   style.css; Karte flach mit 1px-Rand wie jede Karte der Website. */

/* Breiter als der übliche Kopf (780 px), damit die Überschrift in zwei Zeilen
   steht: „Ihre Website, neu gestaltet.“ / „Sie zahlen nur, wenn sie gefällt.“
   Der Umbruch dazwischen gilt nur, wo beide Hälften je in eine Zeile passen. */
.kf-ph{max-width:900px}
.kf-ph h1{text-wrap:balance}
.kf-ph p{max-width:640px}
@media(max-width:900px){.kf-umbruch{display:none}}

/* hidden muss gewinnen: .cf und .btn setzen display (flex, inline-flex) und
   überstimmten sonst das Attribut -- Formular und „Weiter“ blieben stehen. */
.kf-karte [hidden]{display:none !important}

/* Die Formularkarte im Seitenkopf. .ph setzt zentrierten Text und gibt jedem
   p darin Farbe, Abstand und die Einblend-Animation des Kopfes -- hier nicht. */
.kf-karte{max-width:640px;margin:2rem auto 0;padding:1.6rem;background:var(--wh);border:1px solid var(--g200);border-radius:var(--r);text-align:left}
.kf-karte p{margin:0;max-width:none;animation:none;color:var(--bk);font-size:.95rem;line-height:1.65}
.kf-karte p+p,.kf-karte p+.btn,.kf-karte .btn+p{margin-top:.8rem}

.kf .fg label{line-height:1.4}
.kf-opt{font-weight:400;text-transform:none;letter-spacing:0}
.kf-website label{font-size:.82rem;color:var(--ink)}
.kf-zeile{display:flex;gap:.6rem;align-items:stretch}
.kf-zeile input{flex:1;min-width:0;font-size:1.02rem;padding:.9rem 1rem}
.kf-weiter{flex:none;padding-left:1.4rem;padding-right:1.4rem}
.kf-feldhinweis{margin-top:.4rem !important;font-size:.82rem !important;color:#991b1b !important}

/* Schritt 2 erscheint nach „Weiter“. Ohne JavaScript bleibt er offen (das
   hidden setzt erst kampagne.js); dann sagt der noscript-Hinweis, wie es
   anders geht. */
.kf-schritt2{display:flex;flex-direction:column;gap:.9rem;margin-top:.9rem}
.kf-schritt2[hidden]{display:none}
.kf-schritt2.kf-auf{animation:kfAuf .35s ease both}
@keyframes kfAuf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.kf .fg select{width:100%;padding:.78rem 2.2rem .78rem 1rem;border:1px solid var(--g200);border-radius:10px;font-size:.9rem;color:var(--bk);background:var(--wh) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;-webkit-appearance:none;appearance:none;outline:none;transition:border-color .2s}
.kf .fg select:focus{border-color:var(--blue)}
.kf-name{grid-template-columns:minmax(150px,.42fr) 1fr}
.kf [aria-invalid="true"]{border-color:#dc2626}
.kf .zustimmung{margin:.3rem 0 .2rem;font-size:.8rem}
.kf .form-status{margin:0}

/* Unter der Karte: die drei Zusagen in einer Zeile. */
.kf-punkte{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.4rem;margin:1.1rem auto 0;padding:0;font-size:.88rem;color:var(--g600)}
.kf-punkte li::before{content:"✓";color:var(--blue-dk);font-weight:700;margin-right:.4rem}

/* Nach dem Absenden und auf der Bestätigungsseite. */
.kf-danke-titel{font-family:var(--font);font-weight:700;letter-spacing:-.02em;color:var(--ink) !important;font-size:1.2rem !important;line-height:1.3 !important}
.kf-karte .kf-klein{font-size:.84rem;color:var(--g600)}
.kf-karte a:not(.btn){color:var(--blue-dk)}
.kf-danke:focus,.kb-zustand:focus{outline:none}
.kb{margin-top:2.2rem}
.kb .btn{margin-top:1.1rem}
.kb a.btn{color:var(--wh)}

@media(max-width:600px){
  .kf-karte{padding:1.15rem;margin-top:1.5rem}
  .kf-zeile{flex-direction:column}
  .kf-weiter{width:100%;justify-content:center}
  .kf-name{grid-template-columns:1fr}
  .kf-punkte{gap:.3rem 1rem;font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .kf-schritt2.kf-auf{animation:none}
}