/* ═══════════════════════════════════════════════════════════════
   UNTERSEITEN
   ═══════════════════════════════════════════════════════════════ */

/* ── Seitenkopf ──────────────────────────────────────────────── */
.page-hero {
    position: relative;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.page-hero h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

.page-hero .lead {
    max-width: 58ch;
    margin-inline: auto;
    margin-bottom: 0;
}

.crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.crumbs a { color: var(--accent-strong); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .icon { color: var(--text-muted); }

/* ── Teaser-Abschluesse ──────────────────────────────────────── */
.features-more,
.faq-more {
    text-align: center;
    margin-top: var(--space-7);
    margin-bottom: 0;
}

.faq-foot {
    text-align: center;
    margin-top: var(--space-8);
}

.faq-foot > p {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
}

.faq-foot-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* ── Abschluss-CTA ───────────────────────────────────────────── */
.cta-box {
    text-align: center;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    border-radius: var(--radius-lg);
    background: var(--gradient);
    color: var(--text-invert);
    box-shadow: var(--shadow-lift);
}

.cta-box h2 { color: var(--white); }
.cta-box p  { color: rgba(255, 255, 255, 0.86); max-width: 48ch; margin-inline: auto; }

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-5);
}

.cta-ghost { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.35); }
.cta-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
}

/* ── Detailliste (Sicherheit) ────────────────────────────────── */
.detail-list {
    display: grid;
    gap: var(--space-4);
}

.detail-item {
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    border-left: 4px solid var(--accent);
    box-shadow: var(--shadow-sm);
}

.detail-item h3 { color: var(--accent-strong); margin-bottom: var(--space-2); }
.detail-item p  { margin-bottom: 0; }

.detail-note {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-7);
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.detail-note .icon { color: var(--accent-strong); flex-shrink: 0; margin-top: 4px; }
.detail-note h3 { margin-bottom: var(--space-2); }
.detail-note p  { margin-bottom: 0; color: var(--text); }
.detail-note a  { color: var(--accent-strong); text-decoration: underline; }

@media (min-width: 900px) {
    .detail-list { grid-template-columns: repeat(2, 1fr); }
    .detail-item:first-child { grid-column: 1 / -1; }
}

/* ── Preis-Detail ────────────────────────────────────────────── */
.pricing-split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.pricing-split-visual .phone img { max-height: 52vh; width: auto; }

@media (min-width: 900px) {
    .pricing-split { grid-template-columns: 1.1fr 0.9fr; }
}

/* ── Für Schulen: Rollen-Tabelle ─────────────────────────────── */
.rollen-tabelle {
    overflow-x: auto;
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.rollen-tabelle table {
    width: 100%;
    min-width: 620px;           /* auf dem Handy horizontal scrollen statt quetschen */
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.rollen-tabelle th,
.rollen-tabelle td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.rollen-tabelle thead th {
    background: var(--accent-strong);
    color: var(--text-invert);
    font-weight: 600;
}

.rollen-tabelle tbody th { font-weight: 600; color: var(--text); }
.rollen-tabelle tbody tr:last-child > * { border-bottom: none; }
.rollen-tabelle .ist-nein { color: var(--text-muted); }
.rollen-tabelle .ist-ja { color: var(--accent-strong); font-weight: 600; }

/* ── Für Schulen: Datenschutz ────────────────────────────────── */
.ds-raster {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}

/* Standort-Block: dunkle Markenflaeche, damit „Frankfurt“ als erstes ins Auge faellt */
.ds-standort {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: var(--footer-bg);
    color: var(--footer-muted);
    box-shadow: var(--shadow-lift);
}

.ds-ort-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--footer-fill);
    color: var(--footer-accent);
    font-size: var(--text-sm);
    font-weight: 600;
}

.ds-ort {
    margin-bottom: var(--space-3);
    color: var(--footer-text);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    font-weight: var(--heading-weight);
    line-height: 1.1;
}

.ds-standort .ds-ort-text { margin-bottom: 0; color: var(--footer-muted); }

.ds-fakten {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--footer-border);
}

.ds-fakten li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--footer-text);
    font-weight: 500;
}

.ds-fakten .icon { color: var(--footer-accent); flex-shrink: 0; margin-top: 3px; }

.ds-karten {
    display: grid;
    gap: var(--space-4);
}

.ds-karte {
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.ds-karte .icon-box { width: 44px; height: 44px; margin-bottom: var(--space-3); }
.ds-karte .icon-box .icon { width: 22px; height: 22px; }
.ds-karte h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.ds-karte p  { margin-bottom: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Leiste „Vor dem Start“: drei Schritte nebeneinander */
.ds-vorher {
    margin-top: var(--space-6);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
}

.ds-vorher h3 { margin-bottom: var(--space-4); }

.ds-vorher ol {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.ds-vorher li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
}

.ds-vorher li .icon-box { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; }
.ds-vorher li .icon-box .icon { width: 22px; height: 22px; }
.ds-vorher strong { color: var(--heading-color); }

.ds-vorher-fuss {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--accent-strong);
    font-weight: 600;
}

@media (min-width: 640px) {
    .ds-karten { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .ds-raster { grid-template-columns: 5fr 7fr; }
    .ds-vorher ol { grid-template-columns: repeat(3, 1fr); }
}

/* Sechs Karten: drei Spalten statt 4 + 2 */
@media (min-width: 900px) {
    .schul-karten { grid-template-columns: repeat(3, 1fr); }
}

/* Fünf Schritte: auf breiten Schirmen in einer Reihe statt 3 + 2 */
@media (min-width: 1100px) {
    .schul-schritte { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
    .schul-schritte .step-card { padding: var(--space-5); }
}

/* ── Formularseiten ──────────────────────────────────────────── */
.form-layout {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

.form-card {
    padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    border: 1px solid var(--border);
}

.form-row {
    display: grid;
    gap: var(--space-4);
}

.form-side h2 { margin-bottom: var(--space-3); }

/* Kontakt und Support ohne Formular: die Karte traegt Text, Liste und einen
   mailto-Knopf statt Eingabefeldern. */
.form-card h2 { margin-bottom: var(--space-4); }
.form-card > p { margin-bottom: var(--space-4); }
.form-card > .btn { margin-block: var(--space-2) var(--space-4); gap: var(--space-2); }
.form-card > .form-mail:last-child { margin-bottom: 0; font-size: var(--text-base); }

.form-mail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: 600;
}

.form-mail .icon { color: var(--accent); }
.form-mail a { color: var(--accent-strong); text-decoration: underline; }

.form-hintbox {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: var(--text-sm);
}

.form-hintbox .icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.form-hintbox p { margin-bottom: 0; }
.form-hintbox a { color: var(--accent-strong); text-decoration: underline; }

.steps-mini {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin-bottom: var(--space-5);
}

.steps-mini li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.steps-mini span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: var(--text-xs);
    font-weight: 800;
}

@media (min-width: 800px) {
    .form-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); }
    .form-row    { grid-template-columns: 1fr 1fr; }
}