/* Arbeitgeber-Befund: nur fuer /arbeitgeber-befund/.
   Baut auf stil.css und magazin.css (Lupe, Leseprobe, Formular) auf. */

/* ---------- So laeuft es ab: Schritte ohne Bild ---------- */
.ablauf__schritt--ohne-bild .ablauf__inhalt{padding:2rem 1.8rem 2.1rem}
.ablauf__schritt--ohne-bild .ablauf__nr{position:static;transform:none;border-radius:12px;margin:0 0 1.2rem}

/* ---------- Was geprueft wird: zehn Kacheln ---------- */
.kanaele__raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;counter-reset:kanal}
.kanal{counter-increment:kanal;position:relative;background:#fff;border:1px solid var(--linie);border-radius:var(--radius-k);padding:1.4rem 1.3rem 1.5rem;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.kanal:hover{transform:translateY(-3px);box-shadow:var(--schatten-k);border-color:rgba(43,135,218,.4)}
.kanal::after{content:counter(kanal,decimal-leading-zero);position:absolute;top:1.3rem;right:1.2rem;font-family:var(--schrift-kopf);font-weight:700;font-size:.8rem;letter-spacing:.06em;color:var(--text-2);opacity:.6}
.kanal .zg__icon{margin-bottom:1rem}
.kanal h3{font-size:1.02rem;line-height:1.3;margin:0 0 .45rem;overflow-wrap:anywhere;hyphens:auto}
.kanal p{margin:0;font-size:.93rem;line-height:1.5;color:var(--text-2)}
.kanaele__plus{display:flex;gap:.9rem;align-items:flex-start;max-width:760px;margin:2.2rem auto 0;background:#fff;border:1px solid var(--linie);border-left:3px solid var(--blau);border-radius:12px;padding:1.1rem 1.3rem;font-size:1rem}
.kanaele__plus svg{width:var(--sym-zeichen);height:var(--sym-zeichen);flex:none;color:var(--blau);margin-top:.05rem}

/* ---------- Muster ---------- */
.muster__seiten{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);max-width:1040px;margin:0 auto}
.muster .leseprobe__knopf img{box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.muster .leseprobe__knopf span{color:rgba(255,255,255,.75)}
.muster__fuss{text-align:center;margin-top:clamp(2.2rem,4vw,3rem)}
.muster__hinweis{margin:1rem 0 0;font-size:.9rem;color:rgba(255,255,255,.65)}

/* ---------- Formular ---------- */
.feld__hilfe--oben{margin:-.2rem 0 .6rem}

/* ---------- Abschluss ---------- */
.schluss__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2rem 1.8rem}

@media (max-width:1100px){
  .kanaele__raster{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .kanaele__raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .kanal{padding:1.15rem 1rem 1.2rem}
  .kanal::after{top:1.1rem;right:1rem}
  .muster__seiten{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
}
@media (max-width:420px){
  .kanaele__raster{grid-template-columns:1fr}
  .kanal{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start}
  .kanal .zg__icon{grid-row:1/3;margin:0}
  .kanal h3{padding-right:1.6rem}
  .kanal p{grid-column:2}
}
.schluss__knoepfe .tel-link{color:#fff}
.schluss__knoepfe .tel-link svg{color:var(--blau-hell)}
.schluss__knoepfe .tel-link:hover{color:var(--blau-hell)}
/* Nach dem Absenden: Formular klappt zu, nur der Dank bleibt (langes Formular) */
#befund-formular.gesendet > :not(.danke){display:none}
#befund-formular .danke{position:static;padding:1.2rem .4rem}