/* ==========================================================================
   App-modus – alleen actief in de geïnstalleerde app (html.app, gezet in base.html).
   In de gewone browser is niets hiervan zichtbaar: de website blijft zoals hij is.
   ========================================================================== */
.a-achtergrond, .a-kop, .a-dock { display: none; }

html.app {
  --a-glas: rgba(255, 255, 255, .62);
  --a-glas-rand: rgba(255, 255, 255, .75);
  --a-boven: env(safe-area-inset-top, 0px);
  --a-onder: env(safe-area-inset-bottom, 0px);
  --a-kop-h: 52px;
  --a-dock-h: 66px;
  --a-dock-ruimte: calc(var(--a-dock-h) + max(var(--a-onder), 12px) + 14px);
  --a-veer: cubic-bezier(.34, 1.4, .64, 1);
  --a-zacht: cubic-bezier(.22, 1, .36, 1);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
html.app body {
  min-height: 100dvh;
  background-color: var(--paper);  /* geen witte rand bij het doorveren aan de onderkant */
  padding-top: calc(var(--a-boven) + var(--a-kop-h));
  padding-bottom: var(--a-dock-ruimte);
  background: transparent;
  overscroll-behavior-y: none;
}
html.app h1, html.app h2, html.app h3 { letter-spacing: -.02em; }

/* Website-onderdelen die in de app niet thuishoren */
html.app .navbar, html.app .nav-menu, html.app .s-voet, html.app .s-venster:not(.open),
html.app .s-sticky, html.app .a-alleen-web { display: none !important; }
.a-alleen-app { display: none !important; }
html.app .a-alleen-app { display: revert !important; }

/* --- Levende achtergrond: zachte, langzaam bewegende kleurvlekken in de huisstijl --- */
html.app .a-achtergrond {
  display: block; position: fixed; inset: 0 0 auto 0; height: 520px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}
html.app .a-achtergrond i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: a-zweef 18s ease-in-out infinite alternate;
}
html.app .a-achtergrond i:nth-child(1) { width: 320px; height: 320px; background: #F6C9D6; top: -80px; left: -60px; }
html.app .a-achtergrond i:nth-child(2) { width: 280px; height: 280px; background: #FBD3B4; top: 40px; right: -90px; animation-duration: 22s; animation-delay: -6s; }
html.app .a-achtergrond i:nth-child(3) { width: 240px; height: 240px; background: #E9D5F5; top: 220px; left: 30%; opacity: .4; animation-duration: 26s; animation-delay: -12s; }
@keyframes a-zweef {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 24px) scale(1.12); }
  100% { transform: translate(-20px, 40px) scale(.95); }
}

/* --- Kopbalk: glas in de huisstijl, loopt door achter de statusbalk / Dynamic Island --- */
html.app .a-kop {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: calc(var(--a-boven) + var(--a-kop-h)); padding: var(--a-boven) 6px 0;
  color: #fff; user-select: none; -webkit-user-select: none;
  background: linear-gradient(120deg, rgba(232, 135, 159, .9), rgba(244, 145, 74, .86));
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22);
  transition: box-shadow .3s;
  view-transition-name: a-kop;
}
html.app .a-kop.gescrold { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .22), 0 8px 30px rgba(200, 93, 120, .25); }
html.app .a-kop-titel {
  text-align: center; font-weight: 800; font-size: 16.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s var(--a-zacht);
}
html.app .a-kop.klein .a-kop-titel { opacity: 1; transform: none; }
html.app .a-kop-terug, html.app .a-kop-logo {
  width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center;
  border: 0; background: rgba(255, 255, 255, .18); color: #fff; padding: 0;
  transition: transform .2s var(--a-veer), background .2s, opacity .25s;
}
html.app .a-kop-terug { visibility: hidden; opacity: 0; }
html.app .a-kop.kan-terug .a-kop-terug { visibility: visible; opacity: 1; }
html.app .a-kop-terug .a-ik { width: 22px; height: 22px; stroke-width: 2.4; }
html.app .a-kop-logo { justify-self: end; overflow: hidden; background: rgba(255, 255, 255, .25); }
html.app .a-kop-logo img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
html.app .a-kop-terug:active, html.app .a-kop-logo:active { transform: scale(.9); background: rgba(255, 255, 255, .3); }

/* --- Zwevend dock met glaseffect en meebewegende kleurvlek --- */
html.app .a-dock {
  /* Gecentreerd zonder transform: met translateX + backdrop-filter liep het dock op iPhones tijdens het scrollen achter.
     Géén translateZ/will-change: samen met backdrop-filter tekent iOS-Safari het dock dan maar half (melding Naty 25-10-2026). */
  display: flex; position: fixed; z-index: 900; left: 0; right: 0; margin: 0 auto;
  bottom: max(var(--a-onder), 12px); width: min(430px, calc(100% - 24px)); height: var(--a-dock-h);
  padding: 7px; border-radius: 28px;
  background: var(--a-glas); border: 1px solid var(--a-glas-rand);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 18px 50px rgba(58, 42, 46, .18), 0 2px 6px rgba(58, 42, 46, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
  user-select: none; -webkit-user-select: none;
  view-transition-name: a-dock;
}
html.app .a-dock a {
  flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 21px; color: var(--ink-soft); text-decoration: none; font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  transition: color .3s, transform .25s var(--a-veer);
}
html.app .a-dock a .a-ik { width: 25px; height: 25px; transition: transform .35s var(--a-veer); }
html.app .a-dock a.actief { color: #fff; transition: color .3s .2s, transform .25s var(--a-veer); }
html.app .a-dock a.actief .a-ik { transform: translateY(-1px) scale(1.06); }
html.app .a-dock a.actief .a-ik .v { opacity: .35; }
html.app .a-dock a:active { transform: scale(.9); }
html.app .a-dock-blob {
  position: absolute; z-index: 0; top: 7px; bottom: 7px; left: 7px; width: 0; border-radius: 21px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  box-shadow: 0 8px 22px rgba(232, 135, 159, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  opacity: 0; transition: transform .55s var(--a-veer), width .55s var(--a-veer), opacity .3s;
}
html.app .a-dock.klaar .a-dock-blob { opacity: 1; }

/* --- Iconen: lijn met zachte vulling --- */
.a-ik { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.a-ik .v { fill: currentColor; stroke: none; opacity: .16; }
.a-ik .p { fill: currentColor; stroke: none; }

/* --- Paginawissels (View Transitions): nieuwe pagina schuift zacht in, kop en dock blijven staan --- */
::view-transition-old(root) { animation: a-uit .15s var(--a-zacht, ease) both; }
::view-transition-new(root) { animation: a-in .28s var(--a-zacht, ease) both; }
@keyframes a-uit { to { opacity: 0; transform: scale(.985); } }
@keyframes a-in { from { opacity: 0; transform: translateY(14px); } }
html.app.terug-nav::view-transition-new(root) { animation-name: a-in-terug; }
@keyframes a-in-terug { from { opacity: 0; transform: translateY(-10px); } }

/* --- Bestaande pagina's een app-gevoel geven --- */
html.app .s-hero { padding-top: 22px; background: transparent; }
html.app .s-hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.08; }
html.app .s-kaart, html.app .card, html.app .s-prijskaart {
  border-radius: 24px; border-color: rgba(240, 217, 223, .7);
  box-shadow: 0 10px 30px rgba(58, 42, 46, .06);
  transition: transform .25s var(--a-veer), box-shadow .25s;
}
html.app .s-kaart:active, html.app .s-knop:active, html.app .a-tegel:active, html.app .a-deel:active,
html.app .a-rij-item:active, html.app .a-verder:active { transform: scale(.97); }
html.app .s-knop { border-radius: 16px; transition: transform .2s var(--a-veer); }
html.app .meldingen { padding-top: 8px; }
html.app .ab-speler {
  bottom: calc(var(--a-dock-ruimte) - 4px); border-radius: 24px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--a-glas-rand);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 16px 44px rgba(58, 42, 46, .2), inset 0 1px 0 rgba(255, 255, 255, .95);
}
html.app input, html.app select, html.app textarea { font-size: 16px; } /* iOS zoomt anders in bij typen */

/* ==========================================================================
   App-schermen (templates/app/…)
   ========================================================================== */
.a-scherm { max-width: 640px; margin: 0 auto; padding: 8px 18px 12px; }
.a-datum { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-dark); margin: 6px 0 4px; }
.a-groet { font-size: clamp(30px, 9vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 6px; }
.a-groet span {
  background: linear-gradient(120deg, var(--rose-dark), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 22px; }
.a-kopje { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 2px 12px; }
.a-kopje h2 { font-size: 19px; font-weight: 800; margin: 0; }
.a-kopje a { font-size: 13.5px; font-weight: 700; color: var(--rose-dark); text-decoration: none; }

/* "Ga verder"-kaart met voortgangsring */
.a-verder {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px;
  padding: 20px; border-radius: 28px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #E8879F 0%, #EE8C7C 55%, #F4914A 100%);
  box-shadow: 0 20px 44px rgba(232, 135, 159, .42), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .25s var(--a-veer);
}
.a-verder::before {
  content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%);
}
.a-verder::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-100%); animation: a-glans 5s ease-in-out 1.2s infinite;
}
@keyframes a-glans { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.a-ring { position: relative; width: 64px; height: 64px; flex: none; }
.a-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.a-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.a-ring .baan { stroke: rgba(255, 255, 255, .28); }
.a-ring .vol { stroke: #fff; stroke-dasharray: 163.4; transition: stroke-dashoffset 1.2s var(--a-zacht); }
.a-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.a-verder-tekst { position: relative; flex: 1; min-width: 0; }
.a-verder-tekst small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.a-verder-tekst strong { display: block; font-size: 19px; line-height: 1.2; margin: 3px 0 2px; }
.a-verder-tekst span { font-size: 13.5px; opacity: .9; }
.a-verder-knop {
  position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.a-verder-knop .a-ik { width: 22px; height: 22px; margin-left: 2px; }

/* Bento-raster met glazen tegels */
.a-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a-tegel {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 132px; padding: 16px; border-radius: 24px; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 30px rgba(58, 42, 46, .07), inset 0 1px 0 #fff;
  transition: transform .25s var(--a-veer);
}
.a-tegel.breed { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; }
.a-tegel.hoog { grid-row: span 2; }
.a-tegel-ik {
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--orange)); box-shadow: 0 8px 18px rgba(232, 135, 159, .4);
}
.a-tegel-ik.paars { background: linear-gradient(135deg, #B78BE0, #E8879F); box-shadow: 0 8px 18px rgba(183, 139, 224, .4); }
.a-tegel-ik.oranje { background: linear-gradient(135deg, #F4914A, #F7B267); box-shadow: 0 8px 18px rgba(244, 145, 74, .4); }
.a-tegel-ik.groen { background: linear-gradient(135deg, #5CC2A0, #8DD7B0); box-shadow: 0 8px 18px rgba(92, 194, 160, .4); }
.a-tegel-ik .a-ik { width: 23px; height: 23px; }
.a-tegel-ik .a-ik .v { opacity: .3; }
.a-cijfer {
  font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.05em; margin-top: auto;
  background: linear-gradient(160deg, var(--rose), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-cijfer small { display: block; font-size: 13px; letter-spacing: .02em; font-weight: 800; margin-top: 4px; }
.a-tegel b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.a-tegel small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.a-tegel.breed > div:nth-child(2) { flex: 1; }
.a-tegel .a-pijl { color: var(--blush-deep); }
.a-tegel .a-pijl .a-ik { width: 20px; height: 20px; }
.a-label {
  position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 99px; background: var(--blush); color: var(--rose-dark);
}

/* Horizontale rij (audiobook-delen, komende lessen) */
.a-rij { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; }
.a-rij::-webkit-scrollbar { display: none; }
.a-deel {
  scroll-snap-align: start; flex: none; width: 138px; text-decoration: none; color: var(--ink);
  transition: transform .25s var(--a-veer);
}
.a-deel-hoes {
  position: relative; height: 138px; border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; padding: 12px;
  color: #fff; box-shadow: 0 12px 26px rgba(58, 42, 46, .14);
}
.a-deel-hoes::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; right: -50px; top: -50px;
  background: radial-gradient(circle, rgba(255, 255, 255, .4), transparent 70%);
}
.a-deel-hoes b { position: relative; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.a-deel-hoes .a-speel {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.a-deel-hoes .a-speel .a-ik { width: 16px; height: 16px; margin-left: 2px; }
.a-deel span { display: block; font-size: 13px; font-weight: 700; margin-top: 8px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-hoes-0 { background: linear-gradient(145deg, #E8879F, #F4914A); }
.a-hoes-1 { background: linear-gradient(145deg, #B78BE0, #E8879F); }
.a-hoes-2 { background: linear-gradient(145deg, #F4914A, #F7C167); }
.a-hoes-3 { background: linear-gradient(145deg, #5CC2A0, #6FA8DC); }
.a-hoes-4 { background: linear-gradient(145deg, #C85D78, #B78BE0); }

.a-rij-item {
  scroll-snap-align: start; flex: none; width: 230px; padding: 14px 16px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: rgba(255, 255, 255, .75); border: 1px solid #fff; box-shadow: 0 10px 26px rgba(58, 42, 46, .07);
  transition: transform .25s var(--a-veer);
}
.a-rij-item small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-dark); }
.a-rij-item b { display: block; font-size: 17px; margin: 4px 0 2px; }
.a-rij-item span { font-size: 13px; color: var(--ink-soft); }

/* Gegroepeerde lijst (Konto) */
.a-profiel { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px; }
.a-avatar {
  width: 62px; height: 62px; border-radius: 22px; display: grid; place-items: center; flex: none;
  font-size: 26px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--rose), var(--orange));
  box-shadow: 0 10px 24px rgba(232, 135, 159, .45);
}
.a-profiel b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.a-profiel span { font-size: 13.5px; color: var(--ink-soft); word-break: break-all; }
.a-groep-titel { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 6px 8px; }
.a-lijst {
  border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .78); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 28px rgba(58, 42, 46, .06);
}
.a-lijst > a, .a-lijst > button, .a-lijst > form > button {
  width: 100%; display: flex; align-items: center; gap: 13px; padding: 13px 14px; border: 0; background: none;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
  transition: background .15s;
}
.a-lijst > * + * { border-top: 1px solid rgba(240, 217, 223, .6); }
.a-lijst > a:active, .a-lijst button:active { background: var(--blush); }
.a-lijst .a-lijst-ik {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--orange));
}
.a-lijst .a-lijst-ik.paars { background: linear-gradient(135deg, #B78BE0, #E8879F); }
.a-lijst .a-lijst-ik.oranje { background: linear-gradient(135deg, #F4914A, #F7B267); }
.a-lijst .a-lijst-ik.groen { background: linear-gradient(135deg, #5CC2A0, #8DD7B0); }
.a-lijst .a-lijst-ik.grijs { background: linear-gradient(135deg, #B8A5AA, #D4C4C8); }
.a-lijst .a-lijst-ik .a-ik { width: 19px; height: 19px; }
.a-lijst .a-lijst-ik .a-ik .v { opacity: .3; }
.a-lijst span { flex: 1; }
.a-lijst .a-pijl { color: #D9C2C8; }
.a-lijst .a-pijl .a-ik { width: 18px; height: 18px; }
.a-lijst .rood { color: var(--rose-dark); }
.a-klein { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 26px 0 6px; }

.a-knop-groot {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; border: 0; border-radius: 20px;
  font: inherit; font-weight: 800; font-size: 16px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--rose), var(--orange)); box-shadow: 0 14px 30px rgba(232, 135, 159, .45);
  transition: transform .2s var(--a-veer);
}
.a-knop-groot:active { transform: scale(.97); }

/* Meldingen: schakelaar (Konto) en uitnodiging (startscherm) */
.a-schakel-rij small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; }
.a-schakel {
  position: relative; flex: none; width: 51px; height: 31px; border-radius: 99px; background: #E9DDE0;
  transition: background .3s var(--a-zacht, ease);
}
.a-schakel::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .08); transition: transform .35s var(--a-veer, ease);
}
[data-staat="aan"] .a-schakel { background: linear-gradient(135deg, var(--rose), var(--orange)); }
[data-staat="aan"] .a-schakel::after { transform: translateX(20px); }
.a-schakel-rij:disabled { cursor: default; }
.a-schakel-rij:disabled .a-schakel { opacity: .45; }
.bezig .a-schakel::after { animation: a-puls .8s ease-in-out infinite alternate; }
@keyframes a-puls { to { transform: scale(.85); } }
.a-uitnodiging {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 14px 14px 14px 14px;
  border-radius: 24px; background: rgba(255, 255, 255, .75); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 12px 30px rgba(183, 139, 224, .18);
}
.a-uitnodiging[hidden] { display: none; }
.a-uitnodiging > div:nth-child(2) { flex: 1; min-width: 0; padding-right: 14px; }
.a-uitnodiging b { display: block; font-size: 15px; font-weight: 800; }
.a-uitnodiging small { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.a-uitnodiging-knop {
  flex: none; border: 0; border-radius: 14px; padding: 10px 14px; font: inherit; font-weight: 800; font-size: 13.5px; color: #fff;
  background: linear-gradient(135deg, #B78BE0, #E8879F); box-shadow: 0 8px 18px rgba(183, 139, 224, .4);
}
.a-uitnodiging-sluit {
  position: absolute; top: 6px; right: 8px; border: 0; background: none; color: #C9B6BB; font-size: 13px; padding: 4px; cursor: pointer;
}

/* Binnenkomst: elementen komen kort na elkaar zacht in beeld */
html.app .a-in { animation: a-omhoog .7s var(--a-zacht) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes a-omhoog { from { opacity: 0; transform: translateY(18px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  html.app *, html.app *::before, html.app *::after { animation: none !important; transition: none !important; }
}

/* Zes tabbladen (Start · Kurs · 30 dni · Gra · Słuchaj · Konto): iets kleiner op smalle schermen */
@media (max-width: 390px) { html.app .a-dock a { font-size: 9.5px; letter-spacing: 0; } html.app .a-dock a .a-ik { width: 23px; height: 23px; } }

/* Dock staat stil bij paginawissels: geen momentopname-animatie (iOS tekende het glas-dock daarbij soms half) */
::view-transition-old(a-dock) { display: none; }
::view-transition-new(a-dock) { animation: none; }
::view-transition-group(a-dock) { animation: none; }

/* Vloeiende paginawissel (app.js: html.a-wissel zodra je op een link tikt) */
html.app body > :not(.a-kop):not(.a-dock):not(.a-achtergrond):not(script) { transition: opacity .2s var(--a-zacht), transform .25s var(--a-zacht); }
html.app.a-wissel body > :not(.a-kop):not(.a-dock):not(.a-achtergrond):not(script) { opacity: .35; transform: translateY(4px); }
html.app .a-kop::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0; border-radius: 0 2px 2px 0;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 8px rgba(255, 255, 255, .8); opacity: 0;
}
html.app.a-wissel .a-kop::after { opacity: 1; animation: a-laden 2.4s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes a-laden { from { width: 0; } 30% { width: 45%; } to { width: 88%; } }
@media (prefers-reduced-motion: reduce) { html.app.a-wissel body > * { transform: none !important; } }