/* --- Aufgaben-Kasten / Raster-Kasten (508:2195, Startseite Sektion 6) -----
   Figma zeigt hier weiterhin 6 einzelne Schatten-Karten; ein gemeinsamer
   Kasten mit duennen Gitterlinien zwischen den Zellen ist eine bewusste
   Weiterentwicklung darueber hinaus. Design-Tokens components.rasterKasten.
   Kasten: radius.flaeche (16, "grosse einfassende Flaeche"), elevation.karte,
   bg/base — dieselben Werte, die vorher auf jeder Einzelkarte lagen, reine
   Wiederverwendung. Zellen bleiben „.epi-card .epi-card--text" fuer
   Klickflaeche/Fokusring (Bauauftrag N27) und verlieren ihre eigene
   Flaeche/ihren eigenen Rand nur innerhalb dieses Kastens (Scoped Override,
   kein Markup-Unterschied zu anderen Textkarten-Verwendungen). Trennlinien
   in border/trennlinie, wie components.trennlinie/spaltentrenner. */

.epi-aufgaben-box {
    background-color: var(--color-base);
    border: 1px solid var(--color-secondary-20);
    border-radius: var(--radius-lg);
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}

/* Variante ohne eigene Titelzeile im Kasten (Nutzer-Befund 2026-09-15,
   digitale-belegerfassung): Der H2 sitzt hier als regulaerer Sektionstitel
   ueber dem Kasten statt als .epi-aufgaben-box__title darin. Der Kasten
   verliert deshalb seine eigene Flaeche/Rand/Schatten und fuegt sich in die
   Sektionsflaeche ein, die inneren Gitterlinien (.epi-aufgaben-box__grid)
   bleiben unveraendert bestehen. */
.epi-aufgaben-box.epi-aufgaben-box--plain {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* max-width:none haelt die Ueberschrift ausdruecklich breiter als die
   sonst uebliche 820px-Lesebreite (sections.css, ":is(h2, .epi-stack > h2)")
   — hier ist sie eine Kasten-Titelzeile, deren Trennlinie den Kasten in
   voller Breite unterstreichen muss, nicht ein Fliesstext-Titel. Der
   zwei zusaetzlichen Elternselektoren (".epi-section .epi-aufgaben-box")
   sind notwendig, nicht nur Stil: ".epi-section :is(h2, .epi-stack > h2)"
   hat Spezifitaet (0,2,1) — mit nur einer Elternklasse kommt dieser
   Selektor nur auf (0,2,0) und verliert trotzdem gegen die 820px-Regel; die
   Trennlinie brach dann rund 300px vor dem rechten Kastenrand ab. */
.epi-section .epi-aufgaben-box .epi-aufgaben-box__title {
    max-width: none;
    margin: 0;
    padding: var(--wp--preset--spacing--lg) 2rem var(--wp--preset--spacing--md);
    border-block-end: 1px solid var(--color-line);
}

/* Abweichung vom sitewide Halbsatz-Muster (h2 em, siehe oben): dort erzwingt
   display:block bewusst den Zeilenumbruch (Hero etc.), hier soll der Kasten
   niedriger bleiben — Nutzer-Entscheidung 2026-09-15, der Titel darf einzeilig
   bleiben, Farbe/Kursiv aus der Halbsatz-Regel gelten trotzdem weiter. */
.epi-aufgaben-box__title em {
    display: inline;
}

.epi-aufgaben-box__grid {
    gap: 0;
}

/* Gitterlinien als Pseudoelemente statt echter border, mit Luft an den
   Kreuzungen (Nutzer-Befund 2026-09-15: volle Linien, die sich an den
   Schnittpunkten beruehren, wirken wie ein hartes Plus-Raster). ::after ist
   die horizontale Linie (Kastenbreite minus Einzug links/rechts), ::before
   die vertikale (Zellhoehe minus Einzug oben/unten) — beide um denselben
   Betrag verkuerzt, damit an jeder Kreuzung eine kleine Luecke bleibt. */
.epi-aufgaben-box__grid > .epi-card {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem;
}

.epi-aufgaben-box__grid > .epi-card::before,
.epi-aufgaben-box__grid > .epi-card::after {
    content: "";
    position: absolute;
    background-color: var(--color-line);
}

/* Vertikale Linie standardmaessig aus (mobil, einspaltig, keine Nachbarzelle
   zum Abtrennen) — dieselbe Basis/Ausnahme-Struktur wie zuvor bei den
   border-inline-end/-block-end-Deklarationen, nur je Bruchpunkt neu an :before
   statt an border gebunden. */
.epi-aufgaben-box__grid > .epi-card::before {
    content: none;
    inset-block: 1rem;
    inset-inline-end: 0;
    width: 1px;
}

.epi-aufgaben-box__grid > .epi-card::after {
    inset-inline: 1rem;
    inset-block-end: 0;
    height: 1px;
}

.epi-aufgaben-box__grid > .epi-card:last-child::after {
    content: none;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .epi-aufgaben-box__grid > .epi-card::before {
        content: "";
    }

    .epi-aufgaben-box__grid > .epi-card:nth-child(2n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid > .epi-card:nth-last-child(-n+2)::after {
        content: none;
    }
}

@media screen and (min-width: 1024px) {
    .epi-aufgaben-box__grid > .epi-card::before {
        content: "";
    }

    .epi-aufgaben-box__grid > .epi-card:nth-child(3n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid > .epi-card:nth-last-child(-n+3)::after {
        content: none;
    }
}

/* Vier Zellen als 2x2 (TeleForm, 2026-10-26): mit .epi-grid--2 statt --3
   bleibt das Raster ab 768px zweispaltig, die Gitterlinien folgen 2n statt
   3n. Bis 1023px gelten die zweispaltigen Regeln oben unveraendert. */
@media screen and (min-width: 768px) {
    .epi-aufgaben-box__grid.epi-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-child(3n)::before {
        content: "";
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-child(2n)::before {
        content: none;
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-last-child(-n+3)::after {
        content: "";
    }

    .epi-aufgaben-box__grid.epi-grid--2 > .epi-card:nth-last-child(-n+2)::after {
        content: none;
    }
}