/* k1-bento.css — Kacheln mit „magnetischem Bento-Hover“ und die „Zwei Wege“ am Kapitelende (Paket K1, 06.11.2026).
   Ebenen (Lehre evcamper 01.11.): Gruppe isolate · Kartengrund als ::before (z −2) · gleitende Fläche (z −1) · Inhalt darüber.
   Die Karte selbst ist KEIN Stapelkontext (kein z-index, kein transform im Ruhezustand, kein isolation). */
.k1-bento { position: relative; isolation: isolate; }
.k1-karte { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.15rem 1.2rem 1.1rem;
  border-radius: var(--radius); color: var(--ink); text-decoration: none; background: transparent;
  --ton-fuell: #a97d1e; --ton: color-mix(in srgb, var(--ton-fuell) 13%, var(--box)); --ton-kraeftig: var(--accent); }
.k1-karte::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--box);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: background-color .3s, border-color .3s, opacity .3s; }
/* ruhige Töne je Kachel, abgeleitet aus Papier und Tinte (hell), gedämpft (dunkel) */
.k1-bento > .k1-karte:nth-of-type(6n + 1) { --ton-fuell: #a97d1e; }
.k1-bento > .k1-karte:nth-of-type(6n + 2) { --ton-fuell: #2f5a8a; }
.k1-bento > .k1-karte:nth-of-type(6n + 3) { --ton-fuell: #5b7a62; }
.k1-bento > .k1-karte:nth-of-type(6n + 4) { --ton-fuell: #8e5a6c; }
.k1-bento > .k1-karte:nth-of-type(6n + 5) { --ton-fuell: #3f7385; }
.k1-bento > .k1-karte:nth-of-type(6n + 6) { --ton-fuell: #8a6a3a; }
:root[data-theme="dark"] .k1-karte { --ton: color-mix(in srgb, var(--ton-fuell) 26%, var(--box)); }
:root[data-theme="light"] .k1-bento > .k1-karte { --ton-kraeftig: color-mix(in srgb, var(--ton-fuell) 82%, #000); }
:root[data-theme="dark"] .k1-bento > .k1-karte { --ton-kraeftig: color-mix(in srgb, var(--ton-fuell) 45%, #fff); }

.k1-bento__flaeche { display: none; }
@media (hover: hover) and (pointer: fine) {
  .k1-bento__flaeche { display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
    background-color: var(--ton, transparent);
    transition: translate .45s cubic-bezier(.22, .8, .24, 1), width .45s cubic-bezier(.22, .8, .24, 1), height .45s cubic-bezier(.22, .8, .24, 1), opacity .25s, background-color .45s, border-radius .45s; }
  .bento-laeuft > .k1-bento__flaeche { opacity: 1; }
  .bento-sprung > .k1-bento__flaeche { transition: opacity .25s; }
  .ist-bento.bento-laeuft > .k1-karte.bento-aktiv::before { background-color: transparent; border-color: transparent; box-shadow: none; }
  .ist-bento > .k1-karte.bento-aktiv .k1-ikon, .ist-bento > .k1-karte.bento-aktiv .k1-pfeil { color: var(--ton-kraeftig); }
  /* ohne Skript (oder vor dem Einrichten): Kachel tönt sich selbst */
  .k1-bento:not(.ist-bento) > .k1-karte:hover::before { background-color: var(--ton); }
}
@media (prefers-reduced-motion: reduce) { .k1-bento__flaeche { transition: opacity .15s, background-color .15s !important; } }
.k1-karte:active { scale: .985; }
.k1-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Symbole: Linie, die sich beim Hereinscrollen und bei jedem Überfahren zeichnet */
.k1-ikon { width: 34px; height: 34px; color: var(--accent); flex: none; transition: color .3s; }
.k1-ikon :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .k1-ikon :is(path, circle) { transition: stroke-dashoffset 1s cubic-bezier(.22, .8, .24, 1) .15s; }
  html.js .reveal:not(.is-visible) .k1-ikon :is(path, circle) { stroke-dashoffset: 1; }
  .k1-karte:hover .k1-ikon :is(path, circle), .k1-karte:focus-visible .k1-ikon :is(path, circle) { animation: k1-zeichnen-hover .7s cubic-bezier(.22, .8, .24, 1) both; }
  .k1-ikon :is(path, circle):nth-child(2) { animation-delay: .08s !important; }
  .k1-ikon :is(path, circle):nth-child(n+3) { animation-delay: .16s !important; }
}
@keyframes k1-zeichnen-hover { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.k1-pfeil { flex: none; transition: translate .25s var(--ease), color .3s; }
.k1-karte:hover .k1-pfeil { translate: 3px 0; }

/* ---------- Zwei Wege am Kapitelende ---------- */
.wege { display: grid; gap: 1rem; margin: .4rem 0; }
@media (min-width: 640px) { .wege { grid-template-columns: 1fr 1fr; } }
.weg { min-height: 132px; padding-right: 2.8rem; }
.weg__art { display: flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.weg__ikon, .weg .k1-ikon { width: 26px; height: 26px; }
.weg__titel { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.25; font-weight: 600; }
.weg__satz { color: var(--ink-2); font-size: .95rem; }
.weg > .k1-pfeil { position: absolute; right: 1.1rem; bottom: 1.15rem; color: var(--accent); }