/* lernkit-ui.css – gemeinsame Startseiten-Dynamik (Kopie je Subdomain, siehe 005 Layout und Styles/lernkit-animationen-briefing.md)
   Regeln: nur transform/opacity animieren, Hover nur bei Maus/Trackpad, alles aus bei "Bewegung reduzieren". */
:root { --lk-muster: #ffffff; --lk-kopf-bg: rgba(248, 250, 252, 0.85); --lk-ink: #0F172A; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- Topbar: schrumpft beim Scrollen, Blur, Logo dreht sich einmal ---- */
.lk-kopf { transition: min-height .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.lk-kopf.is-scrolled { min-height: 52px !important; border-bottom-color: transparent !important; background-color: var(--lk-kopf-bg) !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.08), 0 4px 18px rgba(15,23,42,.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lk-kopf.is-scrolled { background-color: #F8FAFC !important; } }
.lk-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.lk-logo { width: 26px; height: auto; display: block; color: var(--lk-ink); flex-shrink: 0; }
.lk-kopf.is-scrolled .lk-logo { animation: lk-spin .5s ease; }
@keyframes lk-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lk-kopf.is-scrolled .beta-hinweis { font-size: 0 !important; line-height: 0 !important; }
.lk-kopf.is-scrolled .beta-hinweis strong { display: none !important; }
.lk-kopf.is-scrolled .beta-hinweis::before { content: "Beta-Version · Darstellung ohne Gewähr"; font: 400 11px/1.3 'Inter', sans-serif; color: #64748B; }

/* ---- Navigation: gleitender Unterstrich ---- */
.lk-nav { display: flex; align-items: center; gap: 22px; }
.lk-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0; text-decoration: none;
  font: 400 13px 'Inter', sans-serif; color: rgba(15, 23, 42, 0.55); border-bottom: 0 !important; transition: color .2s ease; }
.lk-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--lk-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.lk-nav a.aktiv { font-weight: 700; color: var(--lk-ink); }
.lk-nav a.aktiv::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .lk-nav a:hover { color: var(--lk-ink); } .lk-nav a:hover::after { transform: scaleX(1); } }

/* ---- Hero: Einblend-Choreografie + driftendes Logo-Muster ---- */
.lk-hero { position: relative; overflow: hidden; }
.lk-hero > * { position: relative; z-index: 1; }
.lk-hero::before { content: ""; position: absolute; z-index: 0; right: -50px; bottom: -120px; width: 320px; height: 474px; pointer-events: none;
  background-color: var(--lk-muster); opacity: .06; will-change: transform;
  -webkit-mask: url(logo.svg) no-repeat center / contain; mask: url(logo.svg) no-repeat center / contain;
  animation: lk-drift 18s ease-in-out infinite alternate; }
.lk-hero::after { content: ""; position: absolute; z-index: 0; left: 22px; top: 10px; width: 115px; height: 170px; pointer-events: none; /* ganze Schildkröte sichtbar (Kopf oben) */
  background-color: var(--lk-muster); opacity: .045; transform: rotate(-12deg); transform-origin: center;
  -webkit-mask: url(logo.svg) no-repeat center / contain; mask: url(logo.svg) no-repeat center / contain; }
@keyframes lk-drift { to { transform: translate(-10px, -14px) rotate(2deg); } }
.lk-in { animation: lk-up .6s cubic-bezier(.2, .7, .2, 1) both; }
.lk-in:nth-child(2) { animation-delay: .1s; } .lk-in:nth-child(3) { animation-delay: .2s; }
@keyframes lk-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .lk-hero::before { width: 200px; height: 296px; right: -40px; bottom: -80px; opacity: .04; } .lk-hero::after { display: none; } }
@media (orientation: landscape) and (max-height: 500px) { .lk-hero::before, .lk-hero::after { display: none; } .lk-in { animation: none; } }

/* ---- Kacheln: Reveal, Hover-Lift (nur Maus), Druck-Feedback (Touch) ---- */
.lk-tile { -webkit-tap-highlight-color: transparent; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .55s ease; }
.lk-icon { transition: transform .3s ease; }
.lk-arrow { display: inline-flex; transition: transform .2s ease; }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .lk-tile.is-in:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15,23,42,.12) !important; border-color: #0D9488 !important; }
  .lk-tile:hover .lk-arrow { transform: translateX(4px); }
  .lk-tile:hover .lk-icon { transform: scale(1.06); }
}
.lk-tile.is-in:active { transform: scale(.985); transition-duration: .1s; }
.lk-zaehler { font-variant-numeric: tabular-nums; }

/* ---- Seitenübergang (Cross-Document View Transitions, Chrome 126+/Safari 18.2+; sonst harter Wechsel) ----
   Topbar bleibt stehen, der Rest blendet über. Unterseiten tragen denselben Namen (siehe <style> im Head). */
@view-transition { navigation: auto; }
.lk-kopf { view-transition-name: lk-kopf; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---- Filter-Pills über dem Kachelraster ---- */
.lk-filter { position: relative; display: flex; gap: 4px; padding: 4px; margin: -6px 0 18px; background: #EDF2F7; border-radius: 999px; width: max-content; max-width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lk-filter::-webkit-scrollbar { display: none; }
.lk-filter button { position: relative; z-index: 1; flex: 0 0 auto; scroll-snap-align: start; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  font: 600 13px 'Inter', sans-serif; color: #475569; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease; white-space: nowrap; }
.lk-filter button[aria-selected="true"] { color: #CCFBF1; }
.lk-filter__gleiter { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: #0F172A;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), width .25s cubic-bezier(.2, .7, .2, 1); }
.lk-filter button:focus-visible { outline: 2px solid #0D9488; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lk-filter button:hover { color: #0F172A; } .lk-filter button[aria-selected="true"]:hover { color: #fff; } }
.lk-tiles { transition: height .42s cubic-bezier(.2, .7, .2, 1); }
.lk-tiles > .is-aus { opacity: 0 !important; transform: scale(.96) !important; pointer-events: none; }
.lk-tiles > .is-vor { opacity: 0 !important; transform: translateY(12px) !important; }
.lk-tiles > .is-weg { display: none !important; }
@media (max-width: 760px) { .lk-filter { width: 100%; padding: 0; gap: 6px; border-radius: 0; background: transparent; }
  .lk-filter button { min-height: 44px; background: #EDF2F7; } .lk-filter button[aria-selected="true"] { background: #0F172A; } .lk-filter__gleiter { display: none; } }

/* ---- Icon-Mikroanimationen in den Kacheln: Maus = beim Hover, Touch = einmal beim Einblenden ----
   Klassen auf den Inline-SVG-Elementen: .lk-draw (nachzeichnen, braucht pathLength="1"), .lk-druck, .lk-wipp, .lk-pop,
   .lk-herz, .lk-hoch, .lk-schieb, .lk-kette, .lk-dreh, .lk-rechts/.lk-links, .lk-wandern, .lk-spitze */
.lk-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lk-druck, .lk-wipp, .lk-pop, .lk-herz, .lk-hoch, .lk-schieb, .lk-kette, .lk-dreh, .lk-rechts, .lk-links, .lk-wandern, .lk-spitze { transform-box: fill-box; transform-origin: center; }
@keyframes lk-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lk-drucken { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(2px); } }
@keyframes lk-wippen { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } }
@keyframes lk-poppen { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes lk-herz { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.08); } 55% { transform: scale(1); } 75% { transform: scale(1.06); } }
@keyframes lk-hoch { from { transform: translateY(4px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes lk-schieb-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes lk-schieb-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes lk-kette { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@keyframes lk-drehen { from { transform: rotate(0); } to { transform: rotate(60deg); } }
@keyframes lk-rechts { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes lk-links { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes lk-wandern { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(1.2px, -1px); } 66% { transform: translate(-1px, 1.2px); } }
@keyframes lk-spitze { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
.lk-tile .lk-draw { animation: lk-zeichnen .8s ease both; } .lk-tile .lk-druck { animation: lk-drucken .45s ease; }
.lk-tile .lk-wipp { animation: lk-wippen .7s ease; } .lk-tile .lk-pop { animation: lk-poppen .5s ease; } .lk-tile .lk-herz { animation: lk-herz .9s ease; }
.lk-tile .lk-hoch { animation: lk-hoch .5s ease both; } .lk-tile .lk-hoch:nth-of-type(2) { animation-delay: .08s; } .lk-tile .lk-hoch:nth-of-type(3) { animation-delay: .16s; }
.lk-tile .lk-schieb:first-of-type { animation: lk-schieb-r .6s ease; } .lk-tile .lk-schieb:last-of-type { animation: lk-schieb-l .6s ease; }
.lk-tile .lk-kette { animation: lk-kette .5s ease; } .lk-tile .lk-dreh { animation: lk-drehen .7s cubic-bezier(.2,.7,.2,1); }
.lk-tile .lk-rechts { animation: lk-rechts .6s ease; } .lk-tile .lk-links { animation: lk-links .6s ease; }
.lk-tile .lk-wandern { animation: lk-wandern .9s ease; } .lk-tile .lk-wandern:nth-of-type(even) { animation-direction: reverse; }
.lk-tile .lk-spitze { animation: lk-spitze .8s ease both; }
/* Maus: Animation läuft nur im Hover (Verlassen = sofort Ruhezustand, kein Nachspielen) */
/* gestaffeltes Nachzeichnen mehrerer Teile (z. B. zwei Sprechblasen, dann Textzeilen) */
.lk-tile .lk-d2 { animation-delay: .3s; } .lk-tile .lk-d3 { animation-delay: .55s; }
@media (hover: hover) and (pointer: fine) { .lk-tile:not(:hover):not(.lk-spiel) [class*="lk-"] { animation: none; } }
/* Touch: einmal beim Einblenden der Kachel, leicht verzögert */
@media not ((hover: hover) and (pointer: fine)) { .lk-tile:not(.is-in):not(.lk-spiel) [class*="lk-"] { animation: none; } .lk-tile.lk-spiel [class*="lk-"] { animation-delay: 0s !important; } .lk-tile.is-in [class*="lk-"] { animation-delay: .35s; } .lk-tile.is-in .lk-hoch:nth-of-type(2) { animation-delay: .43s; } .lk-tile.is-in .lk-hoch:nth-of-type(3) { animation-delay: .51s; } .lk-tile.is-in .lk-d2 { animation-delay: .65s; } .lk-tile.is-in .lk-d3 { animation-delay: .9s; } }

/* Banderole „übers Eck“ auf Kacheln (temporär, z. B. Neu/Beta): <span class="lk-band lk-band--neu">Neu</span>
   direkt hinter dem öffnenden <a class="lk-tile"> einfügen. Kachel hat overflow:hidden, daher sitzt das Band innen. */
.lk-tile { position: relative; }
.lk-band { position: absolute; top: 18px; right: -38px; z-index: 3; width: 150px; padding: 5px 0; transform: rotate(45deg);
  text-align: center; font: 700 10.5px/1 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: 1.8px; text-transform: uppercase;
  color: #fff; background: #64748B; box-shadow: 0 2px 8px rgba(15, 23, 42, .16); pointer-events: none; }
.lk-band::before, .lk-band::after { content: ""; position: absolute; top: 100%; width: 0; height: 0; border-top: 4px solid rgba(0, 0, 0, .28); }
.lk-band--neu { background: #FDBA74; color: #7C2D12; }
.lk-band--beta { background: #C4B5FD; color: #3B0764; }