/* Shared redesign styles for the misc marketing pages
   (registrieren, interessenten, rueckruf, beratungstermin, termin-mit-*,
   vorstellungsgespraech, jobs, handbuch, podcast, aquapaed, bni, vk, error).
   Base grammar: redesign/tokens.css + redesign/base.css,
   form card grammar: pages/redesign-kontakt.css (.form-card). */

/* ---------- Appointment iframe pages ---------- */
.sec--appointment .appointment-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 20px;
    box-shadow: var(--sh-lg);
}
.sec--appointment .kursolino_frame { display: block; border-radius: 18px; }
.sec--ajax { padding: 0; }
.sec--ajax .appointment-card { border: none; box-shadow: none; padding: 0; }

/* ---------- Form card (registrieren / interessenten) ---------- */
.form-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 40px 38px;
    box-shadow: var(--sh-lg);
}
.form-card h2 { font-size: 1.4rem; margin-bottom: 6px; }
.form-card .hint { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }
.form-card label {
    font-family: var(--f-body-bold);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink); margin-bottom: 8px;
}
.form-card .form-control,
.form-card select.form-control,
.form-card textarea.form-control {
    height: auto;
    font-family: var(--f-body);
    font-size: 1rem; color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 16px;
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.form-card .form-control:focus {
    outline: none;
    border-color: var(--yellow-dark);
    box-shadow: 0 0 0 3px rgba(61, 98, 168, .15);
}
.form-card .form-control::placeholder { color: var(--muted); }
.form-card .input-group-text {
    background: var(--cream);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 14px 0 0 14px;
    color: var(--muted);
}
.form-card .input-group .form-control { border-radius: 0 14px 14px 0; }
.form-card label.error {
    text-transform: none; letter-spacing: 0;
    color: var(--danger); font-family: var(--f-body);
    font-size: .85rem; margin: 6px 0 0;
}
.form-card .form-control.error { border-color: var(--danger); }
.form-card a { color: var(--blue-dark); }

/* submit CTA (same grammar as pages/redesign-kontakt.css .btn-yellow) —
   the register form uses a <button>, so Bootstrap's default button look
   must be fully replaced here */
.btn-yellow {
    display: inline-block; font-family: var(--f-body-bold); font-size: 1rem;
    background: var(--yellow); color: var(--ink); text-decoration: none;
    border: none; border-radius: 999px; padding: 14px 34px;
    box-shadow: var(--sh-yellow); cursor: pointer;
    transition: transform .18s var(--ease);
}
.btn-yellow:hover { transform: translateY(-2px); }

/* register form: checklist column */
.register-benefits { list-style: none; margin: 0; padding: 0; }
.register-benefits li { position: relative; padding: 5px 0 5px 28px; color: var(--text-mid); }
.register-benefits li .fa-check { position: absolute; left: 0; top: 10px; color: var(--yellow-dark); font-size: .8rem; }

/* register success card */
.register-success h3 { font-size: 1.4rem; margin-bottom: 12px; }
.register-success p { color: var(--text-mid); }
.register-success .alert { margin-top: 20px; }

/* ---------- Jobs ---------- */
.job-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 40px 38px;
    box-shadow: var(--sh-md);
    margin-bottom: 40px;
}
.job-card .job-title { display: flex; align-items: center; gap: 18px; color: var(--blue-dark); }
.job-card h3 { font-size: 1.35rem; }
.job-card h3 small { display: block; font-family: var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .95rem; margin-top: 4px; }
.job-card h5 { font-family: var(--f-body-bold); font-size: 1.05rem; margin: 26px 0 10px; }
.job-card ul.check-icons { list-style: none; margin: 0; padding: 0; }
.job-card ul.check-icons li { position: relative; padding: 4px 0 4px 28px; color: var(--text-mid); }
.job-card ul.check-icons li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
    position: absolute; left: 0; top: 6px; color: var(--yellow-dark); font-size: .8rem;
}
.job-card .job-apply { margin-top: 30px; text-align: center; }
.jobs-empty {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 56px 38px;
    box-shadow: var(--sh-md);
    text-align: center;
    max-width: 640px; margin: 0 auto;
}
.jobs-empty .ic {
    width: 64px; height: 64px; border-radius: 20px;
    background: var(--yellow-soft); color: var(--yellow-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 22px;
}
.jobs-empty h3 { font-size: 1.35rem; margin-bottom: 12px; }
.jobs-empty p { color: var(--text-mid); margin-bottom: 26px; }

/* ---------- Handbuch (documentation keeps its own page CSS) ---------- */
.sec--docs { padding: 24px 0; }

/* ---------- Person card (BNI) ---------- */
.person-card {
    display: inline-block;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 26px 30px;
    box-shadow: var(--sh-md);
    text-align: center;
}
.person-card h2 { font-size: 1.4rem; margin-bottom: 16px; }
.person-card img { max-height: 300px; border-radius: 18px; }

/* ---------- Intro copy (vk / aquapaed) ---------- */
.intro-copy { max-width: 62ch; color: var(--text-mid); font-size: 1.1rem; line-height: 1.65; margin-top: 18px; }

/* ---------- Error page (404) ---------- */
.error-hero { text-align: center; padding: 40px 0; }
.error-hero .error-code {
    font-family: var(--f-display);
    font-size: clamp(6rem, 18vw, 12rem);
    line-height: 1;
    color: var(--cream-band);
    -webkit-text-stroke: 2px var(--border);
}
.error-hero .muffel { width: 180px; margin: -30px auto 20px; display: block; }
.error-hero p { color: var(--text-mid); font-size: 1.1rem; margin-bottom: 30px; }
.error-hero b { color: var(--ink); }