/* Lead-Magnet-Seiten /teller und /teller/danke · baut auf site.css auf (Tischset, Knöpfe, Kopf, Fuß) */

.teller-einstieg .raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.teller-einstieg .tischset{align-content:start}
.teller-einstieg h1{max-width:13ch}
.teller-einstieg h1 .fein{max-width:15ch}

.heft-inhalt{display:grid;gap:12px}
.heft-inhalt h2{font-size:1.25rem;line-height:1.2}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.haken li{position:relative;padding-left:32px;line-height:1.45}
.haken li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--klee) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.klein{font-size:.95rem;color:var(--tinte-weich)}
.nur-mobil{display:none}
@media (max-width:860px){.nur-mobil{display:inline-flex;justify-self:start}}
#formular{scroll-margin-top:84px}

.wir-zeile{position:static;box-shadow:none;margin-top:6px}
.wir-zeile p{font-size:1rem;color:var(--tinte)}

/* Formular-Karte */
.formkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(22px,3vw,36px);box-shadow:0 18px 50px rgba(30,39,32,.08)}
.teller-form{display:grid;gap:18px}
.feld{display:grid;gap:6px}
.feld label{font-weight:600;font-size:1rem}
.optional{font-weight:400;color:var(--tinte-weich)}
.feld input{font:inherit;font-size:1.0625rem;padding:.8em 1em;border:2px solid var(--linie);border-radius:14px;background:var(--weiss);color:var(--tinte);min-height:52px;width:100%}
.feld input:focus{outline:none;border-color:var(--klee-text);box-shadow:0 0 0 3px rgba(0,191,111,.18)}
.feld input[aria-invalid="true"]{border-color:#B3261E}
.fehler{color:#B3261E;font-size:.95rem}
.feld--falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.haekchen{display:grid;grid-template-columns:24px 1fr;gap:4px 12px;align-items:start;background:var(--mint);border-radius:var(--radius-klein);padding:14px 16px}
.haekchen input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--tinte);cursor:pointer}
.haekchen label{font-size:.9rem;line-height:1.5;color:var(--tinte);cursor:pointer}
.haekchen .klein{grid-column:2;font-size:.85rem}
.haekchen.aus{opacity:.55}
.haekchen.aus input,.haekchen.aus label{cursor:not-allowed}

.teller-form .knopf{justify-content:center;width:100%;font-size:1.125rem}
.kleingedruckt{display:grid;gap:8px}
.kleingedruckt p{font-size:.85rem;line-height:1.5;color:var(--tinte-weich)}
.kleingedruckt p:first-child{font-size:.95rem;color:var(--tinte)}
.kleingedruckt a{color:var(--klee-text);font-weight:600}

@media (max-width:860px){
  .teller-einstieg .raster{grid-template-columns:1fr}
  .teller-einstieg .tischset{gap:16px}
}

/* Danke-Seite */
.danke{padding-block:clamp(40px,8vw,110px)}
.danke-karte{max-width:760px;margin-inline:auto;gap:18px}
.danke-karte h1{font-size:var(--fs-h1);line-height:1.04}
.danke-karte p{font-size:1.1875rem;max-width:52ch}
.danke-klee{width:56px;height:auto}
.tipp-romina{background:var(--weiss);border-radius:var(--radius-klein);padding:16px 20px;color:var(--tinte)}