/* ==========================================================================
   Lehre-Header — Kopfbereich des Lehrbereichs.

   Zielgruppe sind Schülerinnen und Schüler vor der Berufswahl. Deren erste
   Frage ist nicht "welches Unternehmen", sondern "was mache ich da den ganzen
   Tag". Deshalb steht die Frage links und die Antwort rechts als Stundenplan —
   das Ordnungsprinzip, das sie aus der Schule kennen.

   Der Plan ist die einzige helle Fläche der ganzen Site. Das ist der eine
   Ausreisser; alles andere bleibt bewusst ruhig.
   ========================================================================== */

.msf-lehre {
    --lehre-papier: #f4f1e8;
    --lehre-tinte: #14161a;

    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 8vw, 6rem);
    background: var(--msf-bg);
}

/* Angedeutetes Karopapier hinter dem Ganzen — sehr zurückhaltend, es soll
   nur ahnen lassen, worum es geht. */
.msf-lehre::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(249, 222, 66, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249, 222, 66, 0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(120% 90% at 70% 10%, #000 20%, transparent 75%);
    pointer-events: none;
}

.msf-lehre__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.msf-lehre__eyebrow {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--msf-line-accent);
    border-radius: 999px;
    color: var(--msf-yellow);
    font-size: var(--msf-fs-tiny);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.msf-lehre__titel {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 14ch;
}

/* Markerstrich als Hintergrundfläche, nicht als Pseudo-Element hinter dem
   Text: so bleibt er über mehrere Zeilen erhalten und liegt garantiert
   hinter der Schrift. Auf dem gelben Band steht die Schrift dunkel —
   Weiss auf Gelb wäre nicht lesbar. */
.msf-lehre__marker {
    background-image: linear-gradient(var(--msf-yellow), var(--msf-yellow));
    background-repeat: no-repeat;
    background-size: 100% 0.82em;
    background-position: 0 0.72em;
    color: var(--msf-on-yellow);
    padding-inline: 0.06em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.msf-lehre__lead {
    margin-top: 1.5rem;
    max-width: 40ch;
    color: var(--msf-text-muted);
}

.msf-lehre__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* ------------------------------------------------------------- Stundenplan */

.msf-plan {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--lehre-papier);
    color: var(--lehre-tinte);
    border-radius: 4px;
    transform: rotate(-1.4deg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Der rote Rand links wie auf einem Schulblatt. */
.msf-plan::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(1rem, 2vw, 1.5rem);
    width: 1px;
    background: rgba(210, 70, 70, 0.35);
}

.msf-plan__titel {
    margin: 0 0 1.25rem;
    padding-left: clamp(0.75rem, 1.5vw, 1rem);
    font-size: var(--msf-fs-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(20, 22, 26, 0.55);
}

.msf-plan__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: stunde;
}

.msf-plan__zeile {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.6rem 0 0.6rem clamp(0.75rem, 1.5vw, 1rem);
    border-bottom: 1px solid rgba(20, 22, 26, 0.12);
}

.msf-plan__zeile:last-child { border-bottom: 0; }

.msf-plan__zeit {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--msf-fs-small);
    color: rgba(20, 22, 26, 0.6);
}

.msf-plan__was { font-size: 1.05rem; }

/* Die hervorgehobene Zeile bekommt beim Laden einen Markerstrich, der von
   links durchläuft — ein Moment, nicht ein Effekt an jeder Ecke. */
.msf-plan__zeile--betont .msf-plan__was {
    position: relative;
    font-weight: 700;
}

.msf-plan__zeile--betont .msf-plan__was::before {
    content: "";
    position: absolute;
    left: -0.2em;
    right: -0.2em;
    bottom: 0.05em;
    height: 0.5em;
    background: var(--msf-yellow);
    transform: rotate(-0.8deg) scaleX(0);
    transform-origin: left center;
    animation: msf-marker 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    z-index: -1;
}

@keyframes msf-marker {
    to { transform: rotate(-0.8deg) scaleX(1); }
}

.msf-plan__notiz {
    margin: 1.5rem 0 0;
    padding-left: clamp(0.75rem, 1.5vw, 1rem);
    font-family: "Caveat", "Segoe Script", cursive;
    font-size: 1.6rem;
    line-height: 1.1;
    color: rgba(20, 22, 26, 0.75);
    transform: rotate(-1deg);
}

/* ------------------------------------------------------------------- Mobil */

@media (max-width: 900px) {
    .msf-lehre__inner { grid-template-columns: 1fr; }
    .msf-lehre__titel { max-width: none; }
    .msf-plan { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .msf-plan__zeile--betont .msf-plan__was::before {
        animation: none;
        transform: rotate(-0.8deg) scaleX(1);
    }
}