/* Container als Grid definieren */
.lehrerliste {
    display: grid;
    grid-template-columns: 1fr; /* Unter 950px: Immer 1 Spalte */
    gap: 20px; /* Abstand zwischen den Karten */
}

/* Erst ab 950px Bildschirmbreite auf 2 Spalten umschalten */
@media screen and (min-width: 950px) {
    .lehrerliste {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Die ersten beiden Personen spannen sich über die volle Breite */
    .lehrerkraft:nth-child(1),
    .lehrerkraft:nth-child(2) {
        grid-column: 1 / -1;
    }
}

.lehrerkraft {
    width: 100%;
    box-sizing: border-box;
    min-height: 180px;
    padding: 20px;
}

@media screen and (max-width: 450px) {
    .lehrerimg {
        display: none;
    }
}

.lehrerimg {
    width: 120px;
    height: 160px;
    float: left;
    margin-right: 12px;
    object-fit: cover;
}

lehrername {
    font-size: 21px;
    font-weight: 400;
    color: var(--blue);
    display: block;
    padding-top: 10px;
}

lehrertitel {
    font-size: 14px;
    display: block;
}

klassenvorstand {
    font-size: 15px;
    font-weight: 600;
    color: var(--orange);
    display: block;
}

lehramt {
    font-size: 13px;
    display: block;
    font-weight: 400;
}

aemter {
    font-size: 15px;
    display: block;
    font-weight: 600;
    color: var(--blue);
}

sprechstunde {
    font-size: 15px;
    font-weight: 400;
    display: block;
}

brief {
    display: block;
    position: relative;
    top: 3px;
}

/* Trennlinie unter der 2. Karte */
.lehrerkraft:nth-child(2) {
    border-bottom: 2px solid var(--orange); /* Farbe und Dicke der Linie */
    padding-bottom: 30px;          /* Abstand vom Inhalt zur Linie */
    margin-bottom: 10px;           /* Abstand von der Linie zur nächsten Karte */
}