/* Wiederverwendbare Bausteine: Raster, Karten, Hero, Kennzahlen, Balken, Knöpfe, Tabellen. */

/* ---------- Raster ---------- */

.raster { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

/* ---------- Karte ---------- */

.karte-flaeche {
    position: relative;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--schatten);
}

a.karte-flaeche {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}

/* Farbstreifen am oberen Rand – rotiert über die Karten einer Liste. */
a.karte-flaeche::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--verlauf-primaer);
    opacity: 0;
    transition: opacity .18s;
}

a.karte-flaeche:hover {
    border-color: var(--rand-stark);
    transform: translateY(-3px);
    box-shadow: var(--schatten-hoch);
}

a.karte-flaeche:hover::before { opacity: 1; }
a.karte-flaeche:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.karte-flaeche h2 { margin: 0 0 0.35rem; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; }
.meta { color: var(--gedimmt); font-size: 0.83rem; }

/* Farbiges Signet auf Lehrgangs- und Blockkarten */
.karte-signet {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border-radius: var(--radius-klein);
    background: var(--verlauf-primaer);
    box-shadow: var(--schatten-akzent);
}

/* Vier Farbvarianten, zyklisch über nth-child der Rasterkinder vergeben. */
.raster > :nth-child(4n+2) .karte-signet { background: var(--verlauf-kuehl); box-shadow: 0 4px 16px rgb(6 182 212 / 28%); }
.raster > :nth-child(4n+3) .karte-signet { background: var(--verlauf-warm); box-shadow: 0 4px 16px rgb(236 72 153 / 28%); }
.raster > :nth-child(4n+4) .karte-signet { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }

.raster > :nth-child(4n+2) a.karte-flaeche::before { background: var(--verlauf-kuehl); }
.raster > :nth-child(4n+3) a.karte-flaeche::before { background: var(--verlauf-warm); }
.raster > :nth-child(4n+4) a.karte-flaeche::before { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }

/* ---------- Hero ---------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: 2rem 2.25rem;
    margin-bottom: 1.85rem;
    color: #fff;
    background: var(--verlauf-primaer);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
}

/* Weicher Lichtpunkt oben rechts, rein dekorativ. */
.hero::after {
    content: "";
    position: absolute;
    top: -45%;
    right: -12%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgb(255 255 255 / 22%) 0%, transparent 62%);
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; margin-bottom: 0.5rem; }
.hero p { color: rgb(255 255 255 / 86%); max-width: 40rem; margin-bottom: 0; }
.hero .lead { color: rgb(255 255 255 / 86%); margin-bottom: 0; }
.hero code { background: rgb(255 255 255 / 18%); color: #fff; border: 0; }

.hero-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.9rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgb(255 255 255 / 18%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--radius-pille);
}

.hero-kennzahlen { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.hero-kennzahlen li { font-size: 0.8rem; color: rgb(255 255 255 / 78%); }
.hero-kennzahlen b { display: block; font-size: 1.55rem; font-weight: 650; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }

.hero .balken { background: rgb(255 255 255 / 22%); }
.hero .balken > span { background: #fff; }

/* ---------- Kennzahlen-Kacheln ---------- */

.kennzahl-raster { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1.5rem; }

.kennzahl {
    padding: 1.05rem 1.2rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-fein);
}

.kennzahl-titel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gedimmt);
}

.kennzahl-titel svg { width: 0.95rem; height: 0.95rem; }

.kennzahl-wert {
    display: block;
    font-size: 1.65rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kennzahl-zusatz { margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--gedimmt); }
.kennzahl.ist-akzent .kennzahl-wert { color: var(--akzent); }
.kennzahl.ist-gut .kennzahl-wert { color: var(--gut); }
.kennzahl.ist-warn .kennzahl-wert { color: var(--warn); }

/* ---------- Pfad ---------- */

.pfad { margin: 0 0 0.5rem; line-height: 1.3; }
.pfad code {
    color: var(--gedimmt);
    font-size: 0.75rem;
    background: var(--bg-tief);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
}

h1 + .pfad { margin: -0.15rem 0 1rem; }

/* ---------- Fortschrittsbalken ---------- */

.balken {
    height: 7px;
    background: var(--bg-tief);
    border-radius: var(--radius-pille);
    overflow: hidden;
    margin: 1rem 0 0.5rem;
}

.balken > span {
    display: block;
    height: 100%;
    background: var(--verlauf-primaer);
    border-radius: var(--radius-pille);
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.balken.ist-fertig > span { background: var(--gut); }

.balken-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: var(--gedimmt); }
.balken-zeile b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe ---------- */

.modi { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.35rem 0 2rem; }

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    text-decoration: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 550;
    cursor: pointer;
    box-shadow: var(--schatten-fein);
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}

.knopf svg { width: 1.05rem; height: 1.05rem; flex: none; }
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.knopf.primaer {
    background: var(--akzent-tief);
    border-color: var(--akzent-tief);
    color: #fff;
    box-shadow: var(--schatten-akzent);
}
.knopf.primaer:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.knopf.gut { background: var(--gut-weich); border-color: color-mix(in srgb, var(--gut) 35%, transparent); color: var(--gut); }
.knopf.gut:hover { border-color: var(--gut); color: var(--gut); }
.knopf.schlecht { background: var(--schlecht-weich); border-color: color-mix(in srgb, var(--schlecht) 35%, transparent); color: var(--schlecht); }
.knopf.schlecht:hover { border-color: var(--schlecht); color: var(--schlecht); }
.knopf.stumm { background: none; border-color: var(--rand); color: var(--gedimmt); box-shadow: none; }
.knopf.stumm:hover { border-color: var(--schlecht); color: var(--schlecht); }
.knopf[disabled] { opacity: .45; cursor: default; transform: none; }

/* ---------- Abzeichen ---------- */

.abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pille);
    font-size: 0.74rem;
    font-weight: 550;
    background: var(--akzent-weich);
    color: var(--akzent);
    white-space: nowrap;
}

.abzeichen.fertig { background: var(--gut-weich); color: var(--gut); }
.abzeichen.faellig { background: var(--warn-weich); color: var(--warn); }

/* ---------- Kapitelliste / Akkordeon ---------- */

.kapitelliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }

.kapitelliste a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.15rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--schatten-fein);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.kapitelliste a:hover { border-color: var(--akzent); transform: translateX(3px); box-shadow: var(--schatten); }
.kapitelliste a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.kapitelliste .nr {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--gedimmt);
    background: var(--bg-tief);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
}

.kapitelliste a:hover .nr { background: var(--akzent-weich); color: var(--akzent); }
.kapitelliste .wachs { flex: 1; font-weight: 500; font-size: 0.92rem; min-width: 0; }

/* Aufklappbarer Abschnitt */
.klappe {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-fein);
    overflow: hidden;
}

.klappe + .klappe { margin-top: 0.5rem; }

.klappe > summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.25rem;
    font-size: 0.93rem;
    font-weight: 550;
    cursor: pointer;
    list-style: none;
}

.klappe > summary::-webkit-details-marker { display: none; }

.klappe > summary::after {
    content: "";
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--gedimmt);
    border-bottom: 2px solid var(--gedimmt);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s;
}

.klappe[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.klappe > summary:hover { color: var(--akzent); }
.klappe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.klappe-inhalt { padding: 0 1.25rem 1.15rem; border-top: 1px solid var(--rand); padding-top: 1rem; }

/* ---------- Lesetext ---------- */

.lesetext {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    padding: 2.25rem 2.5rem;
    box-shadow: var(--schatten);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-weich);
    max-width: 52rem;
}

.lesetext > :first-child { margin-top: 0; }
.lesetext > :last-child { margin-bottom: 0; }
.lesetext h2, .lesetext h3, .lesetext h4 { color: var(--text); }
.lesetext img { max-width: 100%; height: auto; border-radius: var(--radius-klein); }
.lesetext figure { margin: 1.5rem 0; }
.lesetext figcaption { color: var(--gedimmt); font-size: 0.83rem; margin-top: 0.5rem; }

.lesetext blockquote {
    margin: 1.35rem 0;
    padding: 0.85rem 1.25rem;
    background: var(--akzent-weich);
    border-left: 3px solid var(--akzent);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    color: var(--text-weich);
}

.lesetext blockquote > :last-child { margin-bottom: 0; }

.lesetext pre {
    background: var(--bg-tief);
    padding: 1rem 1.15rem;
    border-radius: var(--radius-klein);
    overflow-x: auto;
    border: 1px solid var(--rand);
    font-size: 0.85rem;
    line-height: 1.6;
}

.lesetext code {
    font-size: 0.875em;
    background: var(--bg-tief);
    border: 1px solid var(--rand);
    padding: 0.08rem 0.35rem;
    border-radius: 5px;
}

.lesetext pre code { background: none; border: 0; padding: 0; }
.lesetext hr { border: 0; border-top: 1px solid var(--rand); margin: 2rem 0; }

/* ---------- Tabellen ---------- */

.tabelle-wrap {
    overflow-x: auto;
    margin: 1.35rem 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
}

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.tabelle-wrap table { margin: 0; }

th, td { padding: 0.65rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
tbody tr:last-child td { border-bottom: 0; }

th {
    background: var(--bg-tief);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--text);
}

/* Tabellen ausserhalb eines Wrappers brauchen selbst einen Rahmen. */
.lesetext > table { border: 1px solid var(--rand); border-radius: var(--radius-klein); overflow: hidden; }

/* ---------- Blättern ---------- */

.blaettern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
    max-width: 52rem;
}

@media (max-width: 52rem) {
    .hero { padding: 1.5rem 1.35rem; border-radius: var(--radius); }
    .hero-kennzahlen { gap: 1.25rem; }
    .lesetext { padding: 1.35rem 1.25rem; border-radius: var(--radius); }
    .karte-flaeche { padding: 1.15rem 1.15rem; }
}