/* ---------- Dagpagina en voet: knoppen en weerrecords (alle schermen), daaronder de aanpassingen voor gsm ---------- */

/* Voetknoppen: mail en Instagram in dezelfde stijl */
.ft-bd .ft-merk .btn,.ft-bd .ft-merk .ft-social a.ft-so{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;margin:0;padding:0 26px;border-radius:14px;font:700 17px var(--font);text-decoration:none;box-sizing:border-box;transition:background .2s,box-shadow .2s,transform .2s}
.ft-bd .ft-merk .btn{background:var(--yellow);color:var(--navy)}
.ft-bd .ft-merk .btn:hover{background:#FFD36E;transform:translateY(-2px)}
.ft-bd .ft-merk .ft-social a.ft-so{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,252,245,.4)}
.ft-bd .ft-merk .ft-social a.ft-so:hover{box-shadow:inset 0 0 0 2px var(--yellow);color:var(--yellow);transform:translateY(-2px)}
.ft-bd .ft-so-i{width:26px;height:26px;background:transparent;border-radius:0}
.ft-bd .ft-so-i::before{width:26px;height:26px;background:var(--coral)}
.ft-bd .ft-so:hover .ft-so-i{background:transparent;transform:rotate(-8deg) scale(1.1)}
.ft-bd .ft-so:hover .ft-so-i::before{background:var(--yellow)}
/* mail: een papieren vliegtuigje dat bij hover vertrekt en terugkomt */
.ft-bd .ft-merk .btn[href^="mailto"]::before{content:"";flex:none;width:24px;height:24px;background:var(--navy);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.ft-bd .ft-merk .btn[href^="mailto"]:hover::before{animation:ft-vlieg .9s ease-in-out}
@keyframes ft-vlieg{0%{transform:none;opacity:1}45%{transform:translate(34px,-22px) rotate(10deg);opacity:0}46%{transform:translate(-34px,18px);opacity:0}100%{transform:none;opacity:1}}
/* Instagram: bij hover waaieren twee polaroids uit in de knop */
.ft-bd .ft-merk .ft-social a.ft-so{overflow:hidden}
.ft-bd .ft-merk .ft-social a.ft-so::before,.ft-bd .ft-merk .ft-social a.ft-so::after{content:"";position:absolute;bottom:-40px;width:24px;height:28px;padding:2.5px;border-radius:2px;box-sizing:border-box;background:#fff;box-shadow:0 4px 8px -4px rgba(0,0,0,.5);opacity:0;transform:rotate(0);transition:opacity .25s,bottom .35s cubic-bezier(.3,1.5,.5,1),transform .35s;pointer-events:none;background-clip:padding-box}
.ft-bd .ft-merk .ft-social a.ft-so::before{right:40px;background:linear-gradient(var(--coral),var(--coral)) 2.5px 2.5px/19px 19px no-repeat,#fff}
.ft-bd .ft-merk .ft-social a.ft-so::after{right:14px;background:linear-gradient(var(--lilac),var(--lilac)) 2.5px 2.5px/19px 19px no-repeat,#fff}
.ft-bd .ft-merk .ft-social a.ft-so{transition:background .2s,box-shadow .2s,transform .2s,padding .3s}
@media (hover:hover) and (min-width:641px){.ft-bd .ft-merk .ft-social a.ft-so:hover{padding-right:82px}}
.ft-bd .ft-merk .ft-social a.ft-so:hover::before{opacity:1;bottom:13px;transform:rotate(-10deg)}
.ft-bd .ft-merk .ft-social a.ft-so:hover::after{opacity:1;bottom:12px;transform:rotate(8deg)}
@media (max-width:640px){.ft-bd .ft-merk .ft-social a.ft-so::before,.ft-bd .ft-merk .ft-social a.ft-so::after{display:none}}
@media (prefers-reduced-motion:reduce){.ft-bd .ft-merk .btn::before,.ft-bd .ft-merk .ft-so::before,.ft-bd .ft-merk .ft-so::after{animation:none!important;transition:none}}
.ft-bd .ft-merk{gap:20px 22px}
.ft-bd .ft-merk .ft-social{display:flex;flex-direction:row;gap:14px;margin:0;padding:0;list-style:none}

/* Weerrecords van de dag in de voet: ook het zonrecord */
.ft-r-zon{--c:var(--yellow)}
.ft-r-zon .ft-r-i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B214A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6 19 19M5 19l1.4-1.4M17.6 6.4 19 5'/%3E%3C/svg%3E")}

/* "Op deze dag": knoppen in plaats van tekstlinks, en ademruimte eronder */
.bc .bc-links{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 0}
.bc .bc-links .dg-ander{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;margin:0;padding:0 26px;border-radius:14px;font:700 17px var(--font);text-decoration:none;transition:background .2s,transform .2s}
.bc .bc-links .dg-ander[data-ct-dag]{background:var(--coral);color:var(--navy)}
.bc .bc-links .dg-ander[data-ct-dag]:hover{background:#FF7F83;transform:translateY(-2px)}
.bc .bc-links .dg-ander:not([data-ct-dag]){background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.bc .bc-links .dg-ander:not([data-ct-dag]):hover{background:var(--yellow);transform:translateY(-2px)}
.bc .bc-volg{margin:28px 0 0}
.bc .bc-volg a{text-decoration:none;box-shadow:inset 0 -2px 0 var(--coral)}
.bc-dag .bc-volg{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.bc-dag .bc-volg .bc-alle{display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin:0;padding:0 26px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--navy);font-weight:700;font-size:17px;color:var(--navy);transition:background .2s,transform .2s}
.bc-dag .bc-volg .bc-alle:hover{background:var(--yellow);transform:translateY(-2px)}
main#inhoud .bc,.bd-rest .bc{padding-bottom:clamp(72px,9vw,128px)}
main#inhoud .bc-dag{padding-bottom:0;margin-bottom:clamp(48px,6vw,88px)}

/* ---------- Dagpagina op gsm (max 640px): hiërarchie, duidelijke knoppen, rustiger voet ---------- */
@media (max-width:640px){

/* 1. Het karakter van de dag: de sterrenbeeld-kaart is de held, de rest is compact */
#karakter .dg-kar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;row-gap:12px}
#karakter .dg-kar > div{display:block;padding:16px !important;border:0 !important;border-radius:20px;background:#fff;box-shadow:0 12px 28px -20px rgba(11,33,74,.45)}
#karakter .dg-kar > div:first-child{grid-column:1/-1;position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px !important;background:#E9E4FF}
#karakter .dg-kar > div:first-child .dg-kar-i{grid-row:1 / span 3;width:72px;height:72px}
#karakter .dg-kar > div:first-child h3{margin:0;font-size:28px}
#karakter .dg-kar > div:first-child small{font-size:13px;color:#4A4F86}
#karakter .dg-kar > div:first-child p{margin-top:8px;font-size:15px;color:#2A3560}
#karakter .dg-kar > div:nth-child(2),#karakter .dg-kar > div:nth-child(3){text-align:left}
#karakter .dg-kar > div:nth-child(2) .dg-kar-i,#karakter .dg-kar > div:nth-child(3) .dg-kar-i{width:44px;height:44px;margin-bottom:8px}
#karakter .dg-kar > div:nth-child(2) h3,#karakter .dg-kar > div:nth-child(3) h3{margin:0;font-size:19px}
#karakter .dg-kar > div:nth-child(2) small,#karakter .dg-kar > div:nth-child(3) small{display:block;margin-top:2px;font-size:12px}
#karakter .dg-kar > div:nth-child(2) p,#karakter .dg-kar > div:nth-child(3) p{margin-top:8px;font-size:13px;line-height:1.4}
#karakter .dg-kar > div:nth-child(4){grid-column:1/-1;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 16px !important;background:#FFF0C7;box-shadow:none}
#karakter .dg-kar > div:nth-child(4) .dg-kar-i{grid-row:1 / span 3;width:44px;height:44px}
#karakter .dg-kar > div:nth-child(4) h3{margin:0;font-size:19px}
#karakter .dg-kar > div:nth-child(4) small{font-size:12px}
#karakter .dg-kar > div:nth-child(4) p{margin:0;font-size:13px}
/* weerrecords horen niet bij een verjaardag: weg */
#karakter .dg-weer,.ft-rec{display:none}

/* 2. Het kalenderblad: geen spiegeltekst door het blad, hint onder de kalender in plaats van erover */
.dg-door{display:none}
.dg-om-hint{position:static;justify-content:center;margin:16px 0 0;font-size:24px;transform:rotate(-2deg)}
.dg-hero-r:has(.dg-om-hint){margin-bottom:0}
.dg-hero-r .dg-om-hint svg{margin-bottom:6px}
.bd-opnieuw{margin:18px 0 0;text-align:center}

/* 3. Op deze dag: duidelijke knoppen in plaats van drie tekstlinks */
.bc .bc-links{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 0}
.bc .bc-links .dg-ander{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;margin:0;padding:0 22px;border-radius:14px;font:700 17px var(--font);text-decoration:none;text-align:center}
.bc .bc-links .dg-ander[data-ct-dag]{background:var(--coral);color:var(--navy)}
.bc .bc-links .dg-ander[data-ct-dag]:hover{background:#FF7F83;color:var(--navy)}
.bc .bc-links .dg-ander:not([data-ct-dag]){background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.bc .bc-links .dg-ander:not([data-ct-dag]):hover{background:var(--yellow);color:var(--navy)}
.bc .bc-volg{display:block;max-width:28ch;margin:24px auto 0;text-align:center;font-size:15px;line-height:1.5;color:#3A4766}
.bc .bc-volg a{text-decoration:none;box-shadow:inset 0 -2px 0 var(--coral)}
.bc,.bd-rest .bc,main#inhoud > .bc{padding-bottom:64px}
.bc-dag .bc-volg{flex-direction:column;gap:12px}
.bc-dag .bc-volg .bc-alle{margin:0;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:14px;box-shadow:inset 0 0 0 2px var(--navy);text-decoration:none;font-weight:700;font-size:17px;color:var(--navy)}

/* 4. De cartoonkaart: meer ademruimte en een zachte, doorschijnende tape in plaats van de blauwe klem */
.bc-grid{gap:32px}
.bc-poster,.bc-post{width:min(100% - 18px,320px);margin-left:0;margin-right:auto}
.bc-poster{margin-left:auto}
.bc-ph{padding:18px 18px 22px;border-radius:10px}
.bc-ph::after{top:-12px;width:84px;height:24px;margin-left:-42px;border-radius:3px;background:rgba(255,199,70,.72);backdrop-filter:blur(1px);box-shadow:0 2px 6px -2px rgba(11,33,74,.25);rotate:-3deg}
.bc-ph img{border-radius:4px}
.bc-cap{margin:20px 8px 2px}
.dg-clip{top:-12px;width:78px;height:24px;margin-left:-39px;border-radius:3px;background:rgba(255,199,70,.72);rotate:-3deg}
.dg-pc:nth-child(even) .dg-clip{background:rgba(163,148,255,.62);rotate:2deg}

/* 5. De voet: één stijl voor de knoppen, gecentreerd */
.ft-bd .ft-merk{flex-direction:column;align-items:center;text-align:center;gap:22px;padding-top:32px}
.ft-bd .ft-merk > div:first-child{margin:0}
.ft-bd .ft-merk .ft-menu ul{justify-content:center;gap:8px 22px}
.ft-bd .ft-addr,.ft-bd .ft-tel{text-align:center}
.ft-bd .ft-tel{padding:0;list-style:none}
.ft-bd .ft-merk .btn,.ft-bd .ft-merk .ft-social a.ft-so{width:100%;max-width:340px}
.ft-bd .ft-merk .btn{order:2}
.ft-bd .ft-merk .ft-social{order:3;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin:0;padding:0;list-style:none}
.ft-bd .ft-merk .ft-social li{width:100%;display:flex;justify-content:center}
.ft-bd .ft-bar{flex-direction:column;align-items:center;text-align:center;gap:10px}
.ft-bd .ft-credits{justify-content:center}

/* "Ontdek ook" als compacte knoppen */
.ft-bd .ft-links ul{flex-direction:row;flex-wrap:wrap;gap:10px}
.ft-bd .ft-links a{min-height:44px;padding:0 18px 0 32px;border-radius:999px;background:rgba(255,252,245,.08)}
.ft-bd .ft-links a::before{left:15px}
.ft-bd .ft-links a:hover{padding-left:32px}
}

/* uitklapmenu van het laatste menu-item (Mijlpalen) schuift naar links in plaats van uit beeld */
@media (min-width:861px){.top-r > .nav .has-sub:last-child .sub{left:auto;right:0;min-width:260px}.top-r > .nav .sub a{white-space:nowrap}}

/* /kaartje/: de pittige kaart in het midden van de waaier zweeft heel traag en krijgt af en toe een zacht glansje */
.kj-waaier .kj-pit{position:relative;display:block;flex:0 0 auto;width:calc(36% + 12px);z-index:1;transform:translateY(-14px);animation:kj-zweef 6s ease-in-out infinite}
.kj-waaier .kj-pit img{display:block;box-sizing:border-box;width:100%;transform:none}
.kj-waaier .kj-pit::after{content:"";position:absolute;inset:6px;border-radius:8px;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0;animation:kj-glans 8s ease-in-out infinite}
@keyframes kj-zweef{0%,100%{transform:translateY(-14px) rotate(-.6deg)}50%{transform:translateY(-22px) rotate(.6deg)}}
@keyframes kj-glans{0%,55%{background-position:130% 0}80%,100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.kj-waaier .kj-pit,.kj-waaier .kj-pit::after{animation:none}}

/* het thema Pittiger springt eruit: koraal verloop, een heel af en toe wiebelende knop en twee twinkelende vonkjes */
.mk.mk-inline .mk-chips{padding-top:10px}
.mk-chip:has(input[value="pittig"]) span{background:linear-gradient(135deg,#FF6B70,#FF8E5E);color:#fff;font-weight:800;box-shadow:0 8px 18px -8px rgba(255,107,112,.9);animation:mk-wip 5s ease-in-out infinite}
.mk-chip:has(input[value="pittig"]) input:checked + span{background:var(--navy);color:var(--yellow);box-shadow:0 8px 18px -8px rgba(11,33,74,.6)}
.mk-chip:has(input[value="pittig"])::before,.mk-chip:has(input[value="pittig"])::after{content:"";position:absolute;z-index:1;pointer-events:none;background:#FFC746;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:mk-vonk 2.6s ease-in-out infinite}
.mk-chip:has(input[value="pittig"])::before{width:13px;height:13px;top:-7px;right:10px}
.mk-chip:has(input[value="pittig"])::after{width:9px;height:9px;bottom:-4px;left:12px;animation-delay:1.3s}
@keyframes mk-wip{0%,86%,100%{transform:none}89%{transform:rotate(-3deg) scale(1.06)}92%{transform:rotate(3deg) scale(1.06)}95%{transform:rotate(-1.5deg) scale(1.03)}}
@keyframes mk-vonk{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1) rotate(25deg)}70%{opacity:0;transform:scale(.5) rotate(60deg)}}
@media (prefers-reduced-motion:reduce){.mk-chip:has(input[value="pittig"]) span{animation:none}.mk-chip:has(input[value="pittig"])::before,.mk-chip:has(input[value="pittig"])::after{animation:none;opacity:.9}}

/* Dropdown Mijlpalen: rustig en netjes, desktop */
@media (min-width:861px){
.top-r > .nav .sub{padding:8px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.top-r > .nav .sub a,.top-r > .nav .sub a[aria-current]{align-items:center;gap:10px;padding:8px 14px;border-radius:10px;font-weight:600;box-shadow:none;transition:background .2s}
.top-r > .nav .sub a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.top-r > .nav .sub li:nth-child(3n+2) a::before{background:var(--lilac)}
.top-r > .nav .sub li:nth-child(3n+3) a::before{background:var(--yellow)}
}

/* Mijlpalen in het mobiele menu */
.menu-t .mt-nav .sub{display:flex;flex-direction:column;gap:6px}
.menu-t .mt-nav .sub li{list-style:none}
.menu-t .mt-nav .sub a{position:relative;align-items:center;gap:12px;font-weight:600}
.menu-t .mt-nav .sub a::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#FF6B70}
.menu-t .mt-nav .sub li:nth-child(3n+2) a::before{background:#A394FF}
.menu-t .mt-nav .sub li:nth-child(3n+3) a::before{background:#FFC746}

/* streepjes bij de paginatitel: achter het laatste woord, niet los in de hoek */
.hero h1::after{position:static;display:inline-block;vertical-align:top;margin:-.1em 0 0 .3em;right:auto;top:auto;width:.62em;height:.58em;max-width:56px;max-height:52px}
@media (max-width:640px){.hero h1::after{right:auto;top:auto;width:.55em;height:.52em}}