/* VORSCHAU Kernbotschaft (pruefung-kern/kern.py), Werte und Farben der Karte (a9-a26.css).
   Effekte aus Davids Baukaesten, beide schon auf der Karte: Magic UI border-beam (einmal), Magic UI text-animate blurInUp. */
@property --kb-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.kb-block { position: relative; padding: 20px 18px 18px; border-radius: 20px;
    background: linear-gradient(160deg, #1a1d1e, var(--flaeche) 60%);
    box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.kb h3 { margin-bottom: 10px; }
.kb-text { font-size: 17px; line-height: 24px; color: rgba(235, 235, 245, 0.80); }
/* Vergleich: zwei Spalten, feste Breiten, Zellen brechen um, nie Querscrollen */
.kb-tabelle { width: 100%; margin-top: var(--s2); table-layout: fixed; border-collapse: separate; border-spacing: 0;
    font-size: 15px; line-height: 20px; }
.kb-tabelle th, .kb-tabelle td { text-align: left; vertical-align: top; padding: 10px 10px; overflow-wrap: break-word; }
.kb-tabelle th { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-3); vertical-align: bottom; }
.kb-tabelle td { border-top: 1px solid var(--linie); color: var(--text-2); }
.kb-tabelle .kb-ja { position: relative; padding-left: 32px; color: var(--text); font-weight: 600; background: rgba(62, 224, 143, 0.07); }
.kb-tabelle th.kb-ja { padding-left: 10px; color: var(--accent); border-radius: 12px 12px 0 0; }
.kb-tabelle tr:last-child td.kb-ja { border-radius: 0 0 12px 12px; }
.kb-haken { position: absolute; left: 10px; top: 12px; width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2.6; fill: none; }
.kb-quelle { margin-top: 14px; font-size: 12px; line-height: 17px; color: var(--text-3); }

/* Rahmenlicht (Magic UI border-beam, MIT; Technik wie .foto::after in a12.css): einmal um den Block, dann Ruhe */
.kb-block::after { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1.5px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--kb-winkel), rgba(62, 224, 143, 0) 0deg 250deg, rgba(62, 224, 143, 0.9) 335deg, rgba(62, 224, 143, 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.js .kb.ist-da .kb-block::after { animation: kb-strahl 3200ms cubic-bezier(0.45, 0, 0.25, 1) 500ms 1 both; }
@keyframes kb-strahl { 0% { --kb-winkel: 0deg; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { --kb-winkel: 360deg; opacity: 0; } }

/* Auftritt: Ueberschrift, Text, Tabelle nacheinander aus der Unschaerfe (Magic UI text-animate blurInUp, Staffel wie .liste in a11.css) */
.js .kb .kb-teil { opacity: 0; transform: translateY(14px); filter: blur(6px); }
.js .kb.ist-da .kb-teil { opacity: 1; transform: none; filter: none;
    transition: opacity 420ms ease-out, transform 640ms var(--feder-seite, ease-out), filter 420ms ease-out;
    transition-delay: calc(120ms + var(--i) * 110ms); }
@media (max-width: 539px) { .js .kb .kb-teil { transform: translateY(10px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) {
    .js .kb .kb-teil, .js .kb.ist-da .kb-teil { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    .kb-block::after { animation: none !important; opacity: 0 !important; }
}