/* Diepte en lagen (update 2.5).

   Legt een laag over style.css en planner.css: meer groentinten, kaarten die
   boven de achtergrond zweven, knoppen die je indrukt, een bladpatroon op de
   achtergrond, kleine groene illustraties en een zwevend 3D-object (zie
   _zweef.html). Alles hier is versiering: haal je dit bestand weg, dan werkt
   de site nog precies hetzelfde, alleen platter.

   De illustraties (tak.svg, spruit.svg, blad.svg, blad-patroon.svg) worden als
   masker gebruikt, zodat ze altijd de kleur van het thema hebben - ook donker. */

:root {
  /* Meer groen: van bijna zwart bos tot lichte munt. */
  --bos: #2c3a22;
  --salie: #93a87b;
  --blad: #bccf9f;
  --munt: #e3ebd3;

  --s-1: 0 1px 1px rgba(38, 48, 31, 0.07), 0 2px 5px -1px rgba(38, 48, 31, 0.07);
  --s-2: 0 1px 1px rgba(38, 48, 31, 0.05), 0 4px 8px -3px rgba(38, 48, 31, 0.09), 0 14px 26px -12px rgba(38, 48, 31, 0.16);
  --s-3: 0 2px 2px rgba(38, 48, 31, 0.05), 0 9px 16px -5px rgba(38, 48, 31, 0.11), 0 28px 46px -18px rgba(38, 48, 31, 0.26);
  --rand-licht: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --lagen-glans: rgba(255, 255, 255, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bos: #e1ead0;
    --salie: #7d9264;
    --blad: #a6ba82;
    --munt: #2a3322;
    --s-1: 0 1px 1px rgba(0, 0, 0, 0.35), 0 2px 5px -1px rgba(0, 0, 0, 0.3);
    --s-2: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 10px -3px rgba(0, 0, 0, 0.35), 0 16px 30px -12px rgba(0, 0, 0, 0.45);
    --s-3: 0 2px 2px rgba(0, 0, 0, 0.3), 0 10px 18px -5px rgba(0, 0, 0, 0.4), 0 30px 52px -18px rgba(0, 0, 0, 0.6);
    --rand-licht: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --lagen-glans: rgba(255, 255, 255, 0.08);
  }
}

/* ---------- Achtergrond: gloed + bladpatroon + korrel ---------- */

body {
  background-color: var(--papier);
  background-image:
    radial-gradient(1100px 640px at 92% -8%, color-mix(in srgb, var(--blad) 34%, transparent), transparent 62%),
    radial-gradient(900px 560px at -8% 108%, color-mix(in srgb, var(--salie) 24%, transparent), transparent 62%),
    var(--korrel);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--mos);
  opacity: 0.05;
  -webkit-mask: url(blad-patroon.svg) 0 0 / 260px 260px;
  mask: url(blad-patroon.svg) 0 0 / 260px 260px;
}

.schil, .start, .inlog, .pub { position: relative; z-index: 1; }

/* ---------- Zijbalk ---------- */

.zijbalk {
  z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vlak) 90%, white) 0%, var(--vlak) 38%,
              color-mix(in srgb, var(--vlak) 90%, var(--blad)) 100%);
  box-shadow: 8px 0 28px -18px rgba(38, 48, 31, 0.35);
}

.woordmerk-teken {
  background: radial-gradient(circle at 30% 24%, #86a066 0%, #4f6339 38%, #243019 100%);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, 0.35), inset 2px 2px 3px rgba(255, 255, 255, 0.28),
              0 3px 7px rgba(30, 40, 20, 0.32);
}

.hoofdnav a { transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }
.hoofdnav a:hover { transform: translateX(2px); }

.hoofdnav a[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mos-zacht) 80%, white), var(--mos-zacht));
  box-shadow: var(--rand-licht), 0 0 0 1px color-mix(in srgb, var(--mos) 16%, transparent), var(--s-1);
}

.merk-knop[aria-selected="true"] { box-shadow: var(--rand-licht), var(--s-1); }

/* Een takje boven de voet van de zijbalk. */
.zijbalk-voet::before {
  content: "";
  display: block;
  height: 30px;
  margin: -4px 0 4px;
  background: var(--salie);
  opacity: 0.8;
  -webkit-mask: url(tak.svg) left center / auto 100% no-repeat;
  mask: url(tak.svg) left center / auto 100% no-repeat;
}

.avatar {
  background: radial-gradient(circle at 30% 24%, #6b8350 0%, var(--inkt) 80%);
  box-shadow: inset -1px -2px 3px rgba(0, 0, 0, 0.3), inset 1px 1px 2px rgba(255, 255, 255, 0.2), 0 2px 5px rgba(30, 40, 20, 0.25);
}

/* ---------- Kaarten ---------- */

.paneel {
  background: color-mix(in srgb, var(--vlak) 94%, transparent);
  border-color: color-mix(in srgb, var(--lijn) 80%, white);
  box-shadow: var(--rand-licht), var(--s-2);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

.cat-rij, .account-rij, .pl-kaart {
  box-shadow: var(--s-1);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.15s, background 0.15s;
}

.cat-rij:not(.open):hover, .account-rij:not(.uit):hover {
  transform: translateY(-2px);
  box-shadow: var(--s-2);
}

.cat-rij.open { box-shadow: var(--s-3); }

.verzendbalk { box-shadow: 0 2px 2px rgba(20, 28, 14, 0.2), 0 12px 22px -6px rgba(20, 28, 14, 0.35), 0 30px 50px -20px rgba(20, 28, 14, 0.45), var(--rand-licht); }

/* ---------- Knoppen die je indrukt ---------- */

.knop {
  background: linear-gradient(180deg, color-mix(in srgb, var(--knop) 82%, white) 0%, var(--knop) 52%,
              color-mix(in srgb, var(--knop) 88%, black) 100%);
  border-color: color-mix(in srgb, var(--knop) 70%, black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.16),
              0 1px 1px rgba(30, 40, 20, 0.28), 0 7px 12px -5px color-mix(in srgb, var(--knop) 60%, transparent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.15s, border-color 0.15s;
}

.knop:hover:not(:disabled) {
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.16),
              0 2px 2px rgba(30, 40, 20, 0.25), 0 12px 18px -6px color-mix(in srgb, var(--knop) 65%, transparent);
}

.knop:active:not(:disabled) {
  filter: none;
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.25);
}

.knop.stil {
  background: linear-gradient(180deg, color-mix(in srgb, var(--vlak) 70%, white), var(--vlak-2));
  border-color: var(--lijn-sterk);
  box-shadow: var(--rand-licht), var(--s-1);
  text-shadow: none;
}

.knop.stil:hover:not(:disabled) { filter: none; transform: translateY(-1px); box-shadow: var(--rand-licht), var(--s-2); }
.knop.stil:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(38, 48, 31, 0.14); }

@media (prefers-color-scheme: dark) {
  .knop { text-shadow: none; border-color: color-mix(in srgb, var(--knop) 60%, black); }
}

/* ---------- Velden: iets uitgehold ---------- */

textarea:not(:focus),
input[type="text"]:not(:focus),
input[type="password"]:not(:focus),
input[type="email"]:not(:focus),
input[type="url"]:not(:focus),
input[type="number"]:not(:focus),
input[type="search"]:not(:focus),
input[type="date"]:not(:focus),
input[type="time"]:not(:focus),
input[type="datetime-local"]:not(:focus),
select:not(:focus) {
  box-shadow: inset 0 1px 2px rgba(38, 48, 31, 0.09);
}

/* ---------- Kleine details ---------- */

.badge { box-shadow: var(--rand-licht); }
.teller { box-shadow: var(--rand-licht); }

/* Onder elke paginatitel een takje. */
.pagina-kop { margin-bottom: 20px; }
.pagina-kop::after {
  content: "";
  flex: 0 0 100%;
  height: 26px;
  margin-top: 2px;
  background: var(--salie);
  opacity: 0.85;
  -webkit-mask: url(tak.svg) left center / auto 100% no-repeat;
  mask: url(tak.svg) left center / auto 100% no-repeat;
}

/* Lege schermen: een spruitje erboven. */
.pl-leeg-lijst::before, .db-leeg::before, .ed-leeg::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  background: var(--salie);
  -webkit-mask: url(spruit.svg) center / contain no-repeat;
  mask: url(spruit.svg) center / contain no-repeat;
}
.db-leeg::before { width: 38px; height: 38px; margin-bottom: 6px; }
td.db-leeg::before { display: none; }

hr, .scheiding { border-color: color-mix(in srgb, var(--lijn) 85%, transparent); }

/* ---------- Startpagina: tools als kaarten ---------- */

.tools { border-top: 0; display: grid; gap: 14px; }

.tool {
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--lijn-sterk) 70%, white);
  border-radius: 24px;
  background: color-mix(in srgb, var(--vlak) 92%, transparent);
  box-shadow: var(--rand-licht), var(--s-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.2s cubic-bezier(.2, .7, .2, 1), box-shadow 0.2s, background 0.2s;
}

.tool:hover, .tool:focus-within {
  background: color-mix(in srgb, var(--vlak) 97%, transparent);
  transform: translateY(-4px);
  box-shadow: var(--rand-licht), var(--s-3);
}

.tool-icoon {
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--mos-zacht) 60%, white) 0%, var(--mos-zacht) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -3px 6px rgba(79, 99, 57, 0.16), 0 6px 12px -4px rgba(79, 99, 57, 0.35);
}

.tools-sier {
  display: block;
  height: 46px;
  margin: 0 0 14px;
  background: var(--salie);
  opacity: 0.8;
  -webkit-mask: url(tak.svg) left center / auto 100% no-repeat;
  mask: url(tak.svg) left center / auto 100% no-repeat;
}

@media (max-width: 560px) {
  .tool { padding: 18px 16px; border-radius: 20px; }
}

/* ---------- Het zwevende 3D-object ---------- */

.zweef {
  --s: 300px;
  --kb: calc(var(--s) * 0.2);               /* breedte van een kaart */
  --straal: calc(var(--s) * 0.33);
  position: fixed;
  z-index: 0;
  width: var(--s);
  height: var(--s);
  pointer-events: none;
  perspective: calc(var(--s) * 3.6);
  perspective-origin: 50% 36%;
}

/* Op de app-pagina's hangt het object rechtsonder, half buiten beeld en wat
   doorschijnend: de panelen schuiven er bij het scrollen overheen, en door het
   matglas heen is hij nog net te zien. Zo botst hij nooit met een kop of tabs. */
.zweef.klein {
  --s: min(36vw, 430px);
  right: -4vw;
  bottom: -9vh;
  opacity: 0.52;
}

/* Op de start-, login- en voorpagina staat hij naast de tekst. De breedte
   volgt de ruimte rechts van de kolom (50vw min een vaste marge), zodat hij
   nooit onder de tekst of het inlogvak terechtkomt. */
.zweef.groot {
  --s: clamp(220px, calc(50vw - 210px), 410px);
  top: clamp(56px, 8vh, 96px);
  right: max(1vw, calc((100vw - 1200px) / 2));
}

/* De voorpagina: de lijnen en tekst blijven links van het object. */
.pub-lijst { max-width: 560px; }
.pub-held p { max-width: 50ch; }

.zweef-scene, .zweef-bob, .zweef-draai, .omloop, .omloop-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* De muis (en op een telefoon het scrollen) draaien het hele object een stukje. */
.zweef-scene {
  transform: translateY(calc(var(--sy, 0) * -26px))
             rotateX(calc(-15deg + var(--py, 0) * -9deg))
             rotateY(calc(var(--px, 0) * 16deg + var(--sy, 0) * 46deg));
}

.zweef-bob { animation: zweef-bob 7s ease-in-out infinite alternate; }
.zweef-draai { animation: zweef-draai 46s linear infinite; }

@keyframes zweef-bob { from { transform: translateY(-2.5%); } to { transform: translateY(3%); } }
@keyframes zweef-draai { to { transform: rotateY(360deg); } }
@keyframes zweef-spin { to { transform: rotate(360deg); } }
@keyframes zweef-schaduw { from { transform: scale(1.04); opacity: 0.9; } to { transform: scale(0.88); opacity: 0.62; } }

/* Kaarten in een kring: net posts in je wachtrij. */
.kaart {
  --c1: #a9bd8a;
  --c2: #5f7a45;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--kb);
  height: calc(var(--kb) * 1.78);
  margin: calc(var(--kb) * -0.89) 0 0 calc(var(--kb) * -0.5);
  overflow: hidden;
  border-radius: calc(var(--kb) * 0.14);
  background: linear-gradient(165deg, var(--c1), var(--c2));
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--straal));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -14px 26px rgba(0, 0, 0, 0.16),
              0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 22px rgba(30, 40, 20, 0.22);
}

.kaart:nth-child(1) { --c1: #b7c99b; --c2: #5f7a45; }
.kaart:nth-child(2) { --c1: #e3ebd3; --c2: #93a87b; }
.kaart:nth-child(3) { --c1: #6f8a52; --c2: #2c3a22; }
.kaart:nth-child(4) { --c1: #cfdcb6; --c2: #7a9560; }
.kaart:nth-child(5) { --c1: #4f6339; --c2: #1f2a18; }
.kaart:nth-child(6) { --c1: #a6ba82; --c2: #46592f; }

/* de "zon" op elke kaart */
.kaart::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  width: 46%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0.05) 74%);
  box-shadow: 0 0 calc(var(--kb) * 0.25) rgba(255, 255, 255, 0.35);
}

/* de bijschrift-regels */
.kaart::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 9%;
  height: 20%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)) 0 0 / 100% 14% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) 0 48% / 72% 14% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)) 0 96% / 46% 14% no-repeat;
  border-radius: 99px;
}

.k-blad {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 56%;
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(-8deg);
  background: rgba(255, 255, 255, 0.28);
  -webkit-mask: url(blad.svg) center / contain no-repeat;
  mask: url(blad.svg) center / contain no-repeat;
}

.bol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.2);
  margin: calc(var(--s) * -0.1) 0 0 calc(var(--s) * -0.1);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f6faea 0%, #bccf9f 24%, #6f8a52 58%, #2c3a22 100%);
  box-shadow: inset calc(var(--s) * -0.02) calc(var(--s) * -0.03) calc(var(--s) * 0.05) rgba(0, 0, 0, 0.32),
              0 calc(var(--s) * 0.05) calc(var(--s) * 0.08) rgba(30, 40, 20, 0.3);
  transform: translateZ(0);
}

/* De ring staat schuin; de cirkel erin draait rond (met een kraal erop). */
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 0.66);
  height: calc(var(--s) * 0.66);
  margin: calc(var(--s) * -0.33) 0 0 calc(var(--s) * -0.33);
  transform-style: preserve-3d;
  transform: rotateX(76deg) rotateY(-8deg);
}

.ring-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(var(--s) * 0.007) solid color-mix(in srgb, var(--salie) 80%, white);
  box-shadow: 0 0 calc(var(--s) * 0.03) color-mix(in srgb, var(--blad) 70%, transparent),
              inset 0 0 calc(var(--s) * 0.03) color-mix(in srgb, var(--blad) 60%, transparent);
  animation: zweef-spin 18s linear infinite;
}

.ring-spin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--s) * -0.024);
  width: calc(var(--s) * 0.04);
  height: calc(var(--s) * 0.04);
  margin-left: calc(var(--s) * -0.02);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, var(--blad) 55%, var(--salie));
}

/* Twee kubusjes in een baan om de bol. */
.omloop { animation: zweef-draai 22s linear infinite; }
.omloop.b { animation-duration: 31s; animation-direction: reverse; }

.kubus {
  --k: calc(var(--s) * 0.075);
  --h: calc(var(--k) / 2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--k);
  height: var(--k);
  margin: calc(var(--k) * -0.5);
  transform-style: preserve-3d;
  transform: translateX(calc(var(--s) * 0.42)) translateY(calc(var(--s) * -0.1));
}

.omloop.b .kubus { --k: calc(var(--s) * 0.05); transform: translateX(calc(var(--s) * -0.46)) translateY(calc(var(--s) * 0.16)); }

.kubus-draai { position: absolute; inset: 0; transform-style: preserve-3d; animation: kubus-draai 12s linear infinite; }

@keyframes kubus-draai { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(540deg); } }

.kubus i {
  position: absolute;
  inset: 0;
  border-radius: 14%;
  background: linear-gradient(135deg, #dfe9c9, #7a9560);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.kubus i:nth-child(1) { transform: translateZ(var(--h)); }
.kubus i:nth-child(2) { transform: rotateY(180deg) translateZ(var(--h)); filter: brightness(0.8); }
.kubus i:nth-child(3) { transform: rotateY(90deg) translateZ(var(--h)); filter: brightness(0.92); }
.kubus i:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--h)); filter: brightness(0.86); }
.kubus i:nth-child(5) { transform: rotateX(90deg) translateZ(var(--h)); filter: brightness(1.08); }
.kubus i:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--h)); filter: brightness(0.74); }

.zweef-schaduw {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -4%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 40, 20, 0.34), rgba(30, 40, 20, 0) 70%);
  filter: blur(4px);
  animation: zweef-schaduw 7s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
  .zweef .kaart, .zweef .bol, .zweef .kubus { filter: brightness(0.82) saturate(0.92); }
  .zweef-schaduw { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%); }
}

/* Kleine schermen: kleiner, vager en op de app-pagina's helemaal weg. */
@media (max-width: 900px) {
  .zweef.klein { display: none; }
  /* Op een telefoon is er geen vrije plek naast de tekst: het object wordt een
     vage achtergrond rechtsboven, vaag genoeg om de tekst leesbaar te houden. */
  .zweef.groot { --s: min(70vw, 320px); top: 56px; right: -18vw; opacity: 0.4; }
}

@media (max-width: 860px) {
  /* In de bovenbalk op een telefoon is geen plek voor het takje bij de voet. */
  .zijbalk-voet::before { display: none; }
  .hoofdnav a:hover { transform: none; }
}

@media (max-width: 560px) {
  .tool-icoon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 8px -3px rgba(79, 99, 57, 0.35); }
  .paneel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vlak); }
}

@media print {
  .zweef, body::before { display: none; }
}

/* Telefoon: het menu als vaste balk onderaan, binnen bereik van je duim.
   De bovenbalk houdt alleen het woordmerk en uitloggen. */
@media (max-width: 600px) {
  .hoofdnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: auto;
    margin: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: color-mix(in srgb, var(--vlak) 94%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
  }
  .hoofdnav a { flex: 1 0 auto; min-width: 56px; }
  .hoofdnav .nt-meer { display: none; }
  .hoofd { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}