/* ==========================================================================
   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; } }

/* Android-app: glaseffect uit (base.html: html.android-app). Bij het scrollen moet de telefoon dat elk beeld opnieuw vervagen,
   wat in de WebView tot haperingen leidt. Kop en dock krijgen een vrijwel dichte achtergrond, zodat ze er hetzelfde uitzien. */
html.android-app *, html.android-app *::before, html.android-app *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.android-app .a-kop { background: linear-gradient(120deg, #e8879f, #f4914a); }
html.android-app .a-dock { background: #fff; }

/* Elk onderdeel een eigen balk (besluit Naty, 3-11-2026) */
.a-bento { grid-template-columns: 1fr; gap: 10px; }
.a-tegel, .a-tegel.breed, .a-tegel.hoog { grid-column: auto; grid-row: auto; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 13px 14px; border-radius: 20px; }
.a-tegel > div:not(.a-tegel-ik):not(.a-pijl) { flex: 1; min-width: 0; }
.a-tegel:not(.breed)::after { content: "›"; font-size: 24px; line-height: 1; color: var(--blush-deep); }