/* Öffentliche Seiten eines Fachs: Startseite (Stoffwähler), Serie, Video. Nach docs/design/entwurf/vorlage.html,
   nur mit Tokens aus tokens.css. Blogtext selbst: inhalt.css. */

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon .icon--voll { fill: currentColor; stroke: none; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 600; font-size: var(--s0); padding: .62em 1.15em;
    border-radius: var(--ecke-mittel); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; font-family: inherit;
    transition: background-color .15s, color .15s; }
.knopf--haupt { background: var(--haupt); color: var(--papier); }
.knopf--haupt:hover { background: var(--tinte); }
.knopf--weiss { background: var(--blatt); color: var(--haupt); }
.knopf--weiss:hover { background: var(--hellblau); }
.knopf--klein { font-size: var(--s-1); padding: .45em .9em; }

/* Zugang */
.zugang { display: inline-flex; align-items: center; gap: .35em; font-size: var(--s-1); font-weight: 600; white-space: nowrap; }
.zugang--frei { color: var(--haupt); }
.zugang--premium { color: var(--tinte); font-weight: 500; }
.zugang--premium .icon { color: var(--akzent); }

/* Plakat statt Vorschaubild */
.plakat { position: relative; display: grid; align-content: end; gap: 4px; aspect-ratio: 16 / 9; width: 100%; padding: 6% 7%; overflow: hidden;
    color: var(--blatt); background-color: var(--feld); border-radius: inherit;
    background-image: linear-gradient(var(--feld-karo) 1px, transparent 1px), linear-gradient(90deg, var(--feld-karo) 1px, transparent 1px);
    background-size: var(--karo-feld) var(--karo-feld); }
.plakat__nr { font-size: clamp(2rem, 7vw, 4.5rem); font-weight: 700; line-height: 1; color: var(--hellblau); font-variant-numeric: tabular-nums; }
.plakat__titel { font-size: clamp(1.1rem, 2.6vw, 1.8rem); font-weight: 700; line-height: 1.15; max-width: 18ch; text-wrap: balance; }
.plakat--klein { align-content: center; justify-content: center; padding: 0; background-size: 14px 14px; }
.plakat--klein .plakat__nr { font-size: 1.6rem; }

/* ---------- Startseite: Stoffwähler ---------- */
.waehler { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 56px; padding-block: 24px 72px; align-items: start; }
.waehler h1 { font-size: var(--s4); letter-spacing: -.02em; max-width: 13ch; color: var(--blatt); }
.waehler__unter { color: var(--hellblau); font-size: var(--s1); margin: 16px 0 32px; max-width: 34ch; }
.frage { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.frage legend { font-weight: 600; margin-bottom: 10px; padding: 0; color: var(--blatt); }
.schalter--klasse { display: grid; grid-template-columns: repeat(4, 64px); }
.schalter--stoff { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 384px; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter label { position: relative; cursor: pointer; border: 1.5px solid var(--feld-rand); margin: 0 -1.5px -1.5px 0; color: var(--blatt);
    font-weight: 500; transition: background-color .2s cubic-bezier(.16, 1, .3, 1), color .2s; user-select: none; border-radius: var(--ecke-kante); }
.schalter label:hover { background: var(--feld-hover); z-index: 1; }
.schalter input:checked + label { background: var(--blatt); color: var(--haupt); border-color: var(--blatt); z-index: 2; }
.schalter input:disabled + label { cursor: default; color: var(--hellblau); border-style: dashed; }
.schalter input:disabled + label:hover { background: none; }
.schalter input:focus-visible + label { outline: 3px solid var(--hellorange); outline-offset: 3px; z-index: 3; }
.schalter--klasse label { width: 64px; height: 64px; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.schalter--klasse label b { font-size: 1.5rem; font-weight: 700; display: block; }
.schalter--klasse label small { font-size: 13px; opacity: .9; }
.schalter--stoff label { min-height: 64px; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.schalter--stoff label span { font-weight: 600; }
.schalter--stoff label small { font-weight: 400; opacity: .8; }
.punkt { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--akzent); margin-left: .06em; vertical-align: .02em; opacity: 0; transform: translateY(-.25em); }
.schalter input:checked + label .punkt { opacity: 1; transform: none; transition: opacity .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .punkt, .schalter input:checked + label .punkt { transition: none; } }

.blatt { background: var(--blatt); color: var(--tinte); border-radius: var(--ecke-blatt); box-shadow: var(--schatten-blatt); overflow: hidden; }
.blatt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding: 18px 24px 14px; border-bottom: 1.5px solid var(--haupt); }
.blatt__kopf p { font-size: var(--s-1); color: var(--leise); }
.blatt__titel { padding: 20px 24px 6px; }
.blatt__titel h2 { font-size: var(--s2); }
.blatt__titel p { color: var(--leise); margin-top: 6px; }
.treffer { list-style: none; margin: 0; padding: 8px 12px 12px;
    background-image: linear-gradient(var(--karo) 1px, transparent 1px), linear-gradient(90deg, var(--karo) 1px, transparent 1px);
    background-size: var(--karo-blatt) var(--karo-blatt); }
.treffer li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 12px; border-radius: var(--ecke-blatt); }
.treffer li:hover { background: var(--merke); }
.treffer__nr { font-weight: 700; color: var(--haupt); font-variant-numeric: tabular-nums; text-align: right; }
.treffer a { color: var(--tinte); font-weight: 600; text-decoration: none; }
.treffer a:hover { text-decoration: underline; }
.treffer__dauer { display: block; font-size: var(--s-1); color: var(--leise); font-variant-numeric: tabular-nums; }
.blatt__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 24px 20px; border-top: 1px solid var(--linie); }
.blatt__fuss p { font-size: var(--s-1); color: var(--leise); max-width: 40ch; }
.blatt__leer { padding: 28px 24px 32px; display: grid; gap: 10px; }
.blatt__leer h2 { font-size: var(--s2); }
.blatt__leer p { color: var(--leise); max-width: 46ch; }

/* Abschnitte darunter */
.abschnitt { padding-block: var(--abstand-abschnitt); }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt h2 { font-size: var(--s3); letter-spacing: -.01em; }
.abschnitt__einleitung { color: var(--leise); font-size: var(--s1); margin-top: 10px; max-width: 52ch; }
.zugriff { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.tabelle { overflow-x: auto; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--ecke-mittel); }
.tabelle table { border-collapse: collapse; width: 100%; min-width: 520px; }
.tabelle th, .tabelle td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle thead th { font-weight: 600; font-size: var(--s-1); color: var(--leise); background: var(--papier); }
.tabelle tbody th { font-weight: 500; }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle .zugang { font-size: var(--s0); font-weight: 500; }

.neu { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 40px; align-items: center; }
.neu__bild { display: block; text-decoration: none; border-radius: var(--ecke-mittel); overflow: hidden; }
.neu h2 { font-size: var(--s2); margin-bottom: 10px; }
.neu p { color: var(--leise); margin-bottom: 20px; max-width: 52ch; }

.serien { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 820px; }
.serien a { display: grid; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.serien a:hover b { text-decoration: underline; }
.serien b { font-size: var(--s1); }
.serien span { color: var(--leise); font-size: var(--s-1); }

.lehrer { max-width: 860px; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 10px 28px; align-items: start; }
.lehrer > div { display: grid; gap: 10px; }
.lehrer__bild { width: 5rem; height: 5rem; border-radius: 50%; display: block; }
.lehrer h2 { font-size: var(--s2); }
.lehrer p { max-width: 60ch; }
.lehrer ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lehrer li { position: relative; padding-left: 1.3em; }
.lehrer li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: .45em; border-radius: var(--ecke-kante); background: var(--haupt); }

/* ---------- Serienseite ---------- */
.serie-kopf { padding-block: 16px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: end; color: var(--blatt); }
.serie-kopf__pfad { color: var(--hellblau); font-size: var(--s-1); margin-bottom: 12px; }
.serie-kopf__pfad a { color: var(--hellblau); }
.serie-kopf h1 { font-size: var(--s4); letter-spacing: -.02em; }
.serie-kopf__text { color: var(--hellblau); max-width: 58ch; margin-top: 12px; font-size: var(--s1); }
.serie-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px 56px; padding-block: 48px 72px; align-items: start; }
.lernweg__titel { font-size: var(--s1); margin: 40px 0 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lernweg__titel:first-child { margin-top: 0; }
.lernweg__titel span { font-size: var(--s-1); color: var(--leise); font-weight: 400; }
.lernweg__frei { color: var(--leise); font-size: var(--s-1); margin: -4px 0 10px; display: flex; gap: .4em; align-items: center; }
.lernweg__frei .icon { color: var(--haupt); }
.lernweg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.lernweg li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.lernweg__bild { display: block; text-decoration: none; border-radius: 5px; overflow: hidden; }
.lernweg__link { font-weight: 600; color: var(--tinte); text-decoration: none; }
.lernweg__link:hover { text-decoration: underline; }
.lernweg__meta { display: block; color: var(--leise); font-size: var(--s-1); margin-top: 2px; }
.angebot { position: sticky; top: 16px; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--ecke-mittel); padding: 24px; display: grid; gap: 12px; }
.angebot h2 { font-size: var(--s1); }
.angebot ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; }
.angebot li { display: flex; gap: 10px; align-items: flex-start; }
.angebot li .icon { color: var(--haupt); margin-top: .3em; }
.angebot__klein { color: var(--leise); font-size: var(--s-1); }

/* ---------- Videoseite ---------- */
.brot { font-size: var(--s-1); color: var(--leise); padding-block: 22px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.brot a { color: var(--leise); }
.brot .icon { width: .85em; height: .85em; }
.video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px 56px; padding-block: 18px 80px; align-items: start;
    grid-template-areas: "kopf kopf" "spieler material" "lernen material" "text material"; }
.video-kopf { grid-area: kopf; }
.video-kopf h1 { font-size: var(--s4); letter-spacing: -.02em; margin-bottom: 10px; }
.video-kopf__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--leise); }
.spieler { grid-area: spieler; }
.spieler__start { display: block; text-decoration: none; position: relative; border-radius: var(--ecke-gross); overflow: hidden; box-shadow: var(--schatten-blatt); color: inherit; }
.spieler__start:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.spieler__knopf { position: absolute; right: 4%; bottom: 7%; display: inline-flex; align-items: center; gap: .55em; background: var(--blatt); color: var(--haupt);
    padding: .7em 1.2em .7em 1em; border-radius: var(--ecke-pille); font-weight: 600; box-shadow: var(--schatten-knopf); transition: transform .15s; }
.spieler__start:hover .spieler__knopf { transform: translateY(-2px); }
.spieler .plakat { align-content: start; }
.plakat--bild { padding: 0; background: var(--feld); }
.plakat--bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spieler__hinweis { font-size: var(--s-1); color: var(--leise); margin-top: 10px; }
.spieler__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ecke-gross); background: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .spieler__knopf { transition: none; } }

.artikel { grid-area: text; max-width: 66ch; }
.artikel h2 { margin-top: 2em; }
.artikel ul { list-style: none; padding-left: 0; display: grid; gap: .35em; }
.artikel ul li { position: relative; padding-left: 1.3em; }
.artikel ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: .45em; border-radius: var(--ecke-kante); background: var(--haupt); }
.artikel .kasten ul li::before { top: .55em; }
.artikel .kapitel { list-style: none; padding: 0; margin-top: .5em; border-top: 1px solid var(--linie); }
.kapitel li { border-bottom: 1px solid var(--linie); margin: 0; }
.kapitel a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 12px; padding: 9px 4px; color: var(--tinte); text-decoration: none; }
.kapitel a:hover { background: var(--merke); }
.kapitel time { color: var(--haupt); font-weight: 600; font-variant-numeric: tabular-nums; }
.nachbarn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 2.5em; }
.nachbarn a { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 14px; align-items: center; text-decoration: none; color: var(--tinte);
    padding: 10px; border-radius: var(--ecke-mittel); border: 1px solid var(--linie); background: var(--blatt); }
.nachbarn a > .plakat { border-radius: var(--ecke-klein); }
.nachbarn a:hover { border-color: var(--haupt); }
.nachbarn__weiter { grid-column: 2; }
.nachbarn small { display: block; color: var(--leise); }

.material { grid-area: material; position: sticky; top: 16px; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--ecke-gross); overflow: hidden; }
.material h2 { font-size: var(--s1); padding: 20px 22px 4px; }
.material > p { padding: 0 22px 14px; color: var(--leise); font-size: var(--s-1); }
.material ul { list-style: none; margin: 0; padding: 0; }
.material li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 12px; padding: 14px 22px; border-top: 1px solid var(--linie); align-items: start; }
.material__art { width: 2rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: var(--ecke-kante); background: var(--papier); color: var(--haupt); }
.material b { display: block; font-weight: 600; }
.material li small { display: block; color: var(--leise); font-size: var(--s-1); }
.material__status { margin-top: 8px; }
.material__upsell { background: var(--aufgabe); border-top: 1px solid var(--aufgabe-linie); padding: 18px 22px 20px; display: grid; gap: 8px; font-size: var(--s-1); }

@media (max-width: 960px) {
    .waehler, .zugriff, .neu, .serie-layout { grid-template-columns: minmax(0, 1fr); }
    .video-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "spieler" "lernen" "material" "text"; }
    .angebot, .material { position: static; }
    }
@media (max-width: 600px) {
    .waehler h1 { font-size: 2rem; margin-bottom: 18px; }
    .waehler__unter { display: none; }
    .waehler { gap: 24px; padding-block: 8px 48px; }
    .frage { margin-bottom: 16px; }
    .frage legend { margin-bottom: 6px; }
    .schalter--klasse { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .schalter--klasse label { width: auto; height: 56px; }
    .schalter--stoff label { min-height: 52px; }
    .abschnitt { padding-block: var(--abstand-xxl); }
    .blatt__kopf, .blatt__titel, .blatt__fuss { padding-inline: 18px; }
    .treffer li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 2px 10px; padding-inline: 8px; }
    .treffer li > .zugang { grid-column: 2; }
    .lernweg li { grid-template-columns: 6rem minmax(0, 1fr); }
    .lehrer { grid-template-columns: minmax(0, 1fr); }
    .lernweg li > .zugang { grid-column: 2; }
    .lernweg li > .zugang:empty { display: none; }
    .nachbarn { grid-template-columns: minmax(0, 1fr); }
    .nachbarn__weiter { grid-column: auto; }
    .tabelle table { min-width: 0; font-size: var(--s-1); }
    .tabelle th, .tabelle td { padding: 10px; }
    .tabelle .zugang { font-size: var(--s-1); }
}

/* Impressum und Datenschutz: ruhige Textspalte wie der Blogtext */
.recht { max-width: calc(66ch + 40px); padding-block: var(--abstand-xxl) var(--abstand-abschnitt); }
.recht h1 { font-size: var(--s3); margin-bottom: var(--abstand-md); }
.recht h2 { margin-top: 1.8em; }
.recht__kurz { font-size: var(--s1); }
.recht__liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.recht__liste dd { margin: 0; }
.recht__liste dt { color: var(--leise); }
.recht__stand { margin-top: 2em; color: var(--leise); font-size: var(--s-1); }
@media (max-width: 600px) { .recht__kurz { font-size: var(--s0); } .recht__liste { grid-template-columns: 1fr; gap: 2px; } .recht__liste dd + dt { margin-top: 8px; } }

/* Konto: Anmelden, Newsletter, Löschen (schmale Formularspalte) */
.konto-form { max-width: calc(36rem + 40px); padding-block: var(--abstand-xxl) var(--abstand-abschnitt); }
.konto-form h1 { font-size: var(--s3); margin-bottom: var(--abstand-md); }
.konto-form > p + p { margin-top: .85em; }
.konto-form__unter { font-size: var(--s0); max-width: 60ch; }
.konto-form__form { margin-top: 24px; display: grid; gap: 10px; justify-items: start; }
.konto-form__form label:not(.konto-form__haken) { font-weight: 600; }
.konto-form__zeile { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.konto-form__zeile input { flex: 1 1 16rem; min-width: 0; font: inherit; color: var(--tinte); padding: .62em .9em; border: 1.5px solid var(--linie-stark); border-radius: var(--ecke-mittel); background: var(--blatt); }
.konto-form__zeile input[aria-invalid="true"] { border-color: var(--rot); }
.konto-form__haken { display: flex; gap: .6em; align-items: flex-start; }
.konto-form__haken input { width: 1.15em; height: 1.15em; margin-top: .2em; accent-color: var(--haupt); flex: none; }
.konto-form__fehler { color: var(--rot); font-weight: 600; }
.konto-form__klein { margin-top: 20px; color: var(--leise); font-size: var(--s-1); max-width: 60ch; }
.knopf--rand { background: var(--blatt); color: var(--haupt); border: 1.5px solid var(--linie-stark); }
.knopf--rand:hover { border-color: var(--haupt); }
.knopf--gefahr { background: var(--tinte); color: var(--papier); }
.knopf--gefahr:hover { background: var(--haupt); }
.knopf-text { font: inherit; font-size: var(--s-1); color: var(--haupt); background: none; border: 0; padding: 10px 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Mein Bereich */
.konto-kopf { padding-block: 36px 32px; }
.konto-kopf h1 { color: var(--blatt); font-size: var(--s3); }
.konto-kopf p { color: var(--hellblau); margin-top: 6px; }
.konto-kopf strong { color: var(--blatt); }
.konto { display: grid; gap: 40px; padding-block: 40px var(--abstand-abschnitt); }
.konto > section { max-width: 48rem; }
.konto section > p + form { margin-top: 12px; }
.konto__aktionen a { font-size: var(--s-1); }
.konto__klein { margin-top: 10px; color: var(--leise); font-size: var(--s-1); max-width: 60ch; }
.konto h2 { font-size: var(--s1); margin-bottom: 12px; }
.konto__serien, .konto__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.konto__serien li, .konto__liste li { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.konto__serien li { display: grid; gap: 8px; }
.konto__serie { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: baseline; }
.konto__stand { display: flex; gap: 10px; align-items: center; color: var(--leise); font-size: var(--s-1); }
.konto__serie a { color: var(--tinte); }
.konto__serie span { color: var(--leise); font-size: var(--s-1); }
.konto__weiter { font-weight: 600; display: inline-flex; gap: .3em; align-items: center; justify-self: start; }
.konto__fertig { color: var(--haupt); font-weight: 600; display: inline-flex; gap: .35em; align-items: center; }
.konto__liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.konto__liste small { display: block; color: var(--leise); margin-top: 2px; }
.konto__aktionen { display: flex; gap: 12px 24px; align-items: center; flex-wrap: wrap; }

/* Fortschrittspunkte (Orange laut Marke) */
.fortschritt { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; }
.fortschritt__punkt { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--linie-stark); }
.fortschritt__punkt--an { background: var(--akzent); border-color: var(--akzent); }
.fortschritt--balken { width: 12rem; max-width: 100%; height: 8px; border-radius: 4px; background: var(--merke-linie); overflow: hidden; }
.fortschritt--balken span { display: block; height: 100%; background: var(--akzent); }
.feld .fortschritt__punkt { border-color: var(--hellblau); }
.feld .fortschritt__punkt--an { background: var(--hellorange); border-color: var(--hellorange); }
.serie-kopf__stand { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--hellblau); }

/* Videoseite: Verstanden und Merken */
.lernen { grid-area: lernen; margin-top: -14px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.lernen__knopf { font: inherit; font-weight: 600; font-size: var(--s-1); display: inline-flex; gap: .45em; align-items: center; padding: .5em 1em;
    border: 1.5px solid var(--linie-stark); border-radius: var(--ecke-mittel); background: var(--blatt); color: var(--haupt); cursor: pointer; }
.lernen__knopf:hover { border-color: var(--haupt); }
.lernen__knopf--an { background: var(--merke); border-color: var(--haupt); color: var(--haupt); }
.lernen__knopf--an:hover { border-color: var(--tinte); }
.lernen__quiz, .lernen__hinweis { color: var(--leise); font-size: var(--s-1); }
.lernweg__verstanden { display: inline-flex; gap: .3em; align-items: center; margin-left: 10px; color: var(--haupt); font-size: var(--s-1); font-weight: 600; }
.zugang--konto { text-decoration: none; color: var(--haupt); font-weight: 600; }
.zugang--konto:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .konto .knopf--klein, .lernen__knopf { min-height: 44px; }
}

/* Widerrufsformular: als Zitat abgesetzt, damit man es kopieren kann */
.recht__formular { margin: 1em 0 0; padding: 14px 18px; border-left: 0; border: 1px solid var(--linie); border-radius: var(--ecke-mittel); background: var(--blatt); }

/* Preise und Kauf */
.preise-kopf { padding-block: 40px 36px; }
.preise-kopf h1 { color: var(--blatt); font-size: var(--s3); }
.preise-kopf p { color: var(--hellblau); margin-top: 8px; max-width: 60ch; }
.preise { padding-block: 40px var(--abstand-abschnitt); display: grid; gap: 18px; }
.preise__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.preis { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--ecke-mittel); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.preis h2 { font-size: var(--s1); }
.preis__betrag { font-size: var(--s2); font-weight: 700; color: var(--haupt); }
.preis__umfang { color: var(--leise); font-size: var(--s-1); }
.preis .knopf { align-self: flex-start; margin-top: auto; }
.preise__klein, .preise__bald { color: var(--leise); font-size: var(--s-1); max-width: 70ch; }
.preise__bald { font-size: var(--s0); }
.kauf__preis { font-size: var(--s2); font-weight: 700; color: var(--haupt); }
.angebot__preise { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; }
.angebot__preise dt { font-weight: 600; }
.angebot__preise dd { margin: 0; text-align: right; white-space: nowrap; }
.recht__formular > * + * { margin-top: .6em; }
.kauf__zusammenfassung { margin-top: 20px; padding: 16px 20px; border: 1px solid var(--linie); border-radius: var(--ecke-mittel); background: var(--blatt); }
.kauf__zusammenfassung h2 { font-size: var(--s0); margin-bottom: 6px; }
.kauf__zusammenfassung p + p { margin-top: .5em; }