/* Dagkalenderklok voor iPad (Safari 15). Geen moderne CSS die op iPadOS 15 ontbreekt. */
:root{
  --boven:#c8473a; --boven-tekst:#ffffff;
  --midden:#f7f6f2; --tekst:#1c1c1c; --zacht:#55524c;
  --onder:#2347a8; --onder-tekst:#ffffff;
  --bericht:#ffd54a; --bericht-tekst:#1c1c1c;
  --bellen:#1f8a4c; --bellen-tekst:#ffffff;
  --kaart:#ffffff; --rand:#d9d5cc;
  --agenda:#dce7ff; --agenda-tekst:#14234d;
  --font:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; --font-kop:var(--font);
}
/* ---------- stijlen (overdag) ---------- */
body.thema-rustig{
  --boven:#5f7d6b; --boven-tekst:#f6f3ea; --midden:#f3efe6; --tekst:#2b2d28; --zacht:#6f6b60;
  --onder:#3e5964; --onder-tekst:#f3efe6; --bericht:#e8d6a0; --bericht-tekst:#2b2d28;
  --bellen:#4f8a5f; --kaart:#fbf9f4; --rand:#d8d1c2; --agenda:#d7e3dc; --agenda-tekst:#24372c;
  --font:"Avenir Next","Avenir",-apple-system,sans-serif; --font-kop:var(--font);
}
body.thema-contrast{
  --boven:#000000; --boven-tekst:#ffd500; --midden:#000000; --tekst:#ffffff; --zacht:#ffd500;
  --onder:#000000; --onder-tekst:#ffffff; --bericht:#ffd500; --bericht-tekst:#000000;
  --bellen:#00a651; --kaart:#111111; --rand:#ffd500; --agenda:#ffffff; --agenda-tekst:#000000;
}
body.thema-contrast .boven{border-bottom:.6vh solid #ffd500}
body.thema-contrast .onder{border-top:.6vh solid #ffd500}
body.thema-warm{
  --boven:#7f4325; --boven-tekst:#fff3e2; --midden:#fbf2e4; --tekst:#3a2416; --zacht:#8a6a50;
  --onder:#57361f; --onder-tekst:#fff3e2; --bericht:#f2c46d; --bericht-tekst:#3a2416;
  --bellen:#3f7f4a; --kaart:#fffaf2; --rand:#e2cfb4; --agenda:#f6dfc4; --agenda-tekst:#4a2a14;
  --font-kop:Georgia,"Times New Roman",serif;
}
body.thema-nachtblauw{
  --boven:#1b2a4d; --boven-tekst:#e9edf8; --midden:#0f1730; --tekst:#f2f4fa; --zacht:#9ba8cb;
  --onder:#1b2a4d; --onder-tekst:#e9edf8; --bericht:#d9b75a; --bericht-tekst:#14182a;
  --bellen:#2f8f5b; --kaart:#18213f; --rand:#2c3a63; --agenda:#2c3f73; --agenda-tekst:#e9edf8;
  --font:"Avenir Next","Avenir",-apple-system,sans-serif; --font-kop:var(--font);
}
/* ---------- extra stijlen (1.10) ---------- */
body.thema-antraciet{
  --boven:#d9822b; --boven-tekst:#ffffff; --midden:#2b2e33; --tekst:#f2efe9; --zacht:#b9b3a8;
  --onder:#1d1f23; --onder-tekst:#e9e6e0; --bericht:#f2c14e; --bericht-tekst:#1d1f23;
  --bellen:#2f9e5b; --kaart:#34383e; --rand:#454a53; --agenda:#3d4554; --agenda-tekst:#e8ecf3;
}
body.thema-bos{
  --boven:#2f5d3a; --boven-tekst:#f1f5ee; --midden:#cfdcc9; --tekst:#1c2a1e; --zacht:#3f5a44;
  --onder:#24402b; --onder-tekst:#eef3ea; --bericht:#e6c65c; --bericht-tekst:#1c2a1e;
  --bellen:#3c8a4e; --kaart:#dfe8da; --rand:#a9bea3; --agenda:#b9cdb2; --agenda-tekst:#1c2a1e;
}
body.thema-oceaan{
  --boven:#0f6b78; --boven-tekst:#eaf8f7; --midden:#12333a; --tekst:#e8f6f5; --zacht:#8fc2c3;
  --onder:#0b4a54; --onder-tekst:#e0f2f1; --bericht:#f0c75e; --bericht-tekst:#0e262b;
  --bellen:#2a9d6a; --kaart:#1a4048; --rand:#2a5560; --agenda:#1f5560; --agenda-tekst:#e0f2f1;
}
body.thema-bordeaux{
  --boven:#7a1f2b; --boven-tekst:#fbeee9; --midden:#2a1a1d; --tekst:#f5e9e2; --zacht:#c9a9a3;
  --onder:#4a1520; --onder-tekst:#f5e3dd; --bericht:#e9b949; --bericht-tekst:#2a1a1d;
  --bellen:#2f8f5b; --kaart:#3a2428; --rand:#553038; --agenda:#4a2a31; --agenda-tekst:#f5e3dd;
}
body.thema-aubergine{
  --boven:#5b2a6e; --boven-tekst:#f7eefa; --midden:#24182b; --tekst:#f3eaf7; --zacht:#bba6c6;
  --onder:#3d1c4b; --onder-tekst:#f0e4f5; --bericht:#e8c25a; --bericht-tekst:#24182b;
  --bellen:#2f8f5b; --kaart:#33233c; --rand:#4b3456; --agenda:#41294d; --agenda-tekst:#f0e4f5;
}
body.thema-zand{
  --boven:#8a6d3b; --boven-tekst:#fff8ec; --midden:#e3d5b8; --tekst:#2c2418; --zacht:#6e5a3c;
  --onder:#5b4524; --onder-tekst:#fbf3e3; --bericht:#c9e0a8; --bericht-tekst:#2c2418;
  --bellen:#3f7f4a; --kaart:#ece2cb; --rand:#c8b48c; --agenda:#d6c6a3; --agenda-tekst:#2c2418;
}
body.thema-leisteen{
  --boven:#4a5568; --boven-tekst:#f4f6f9; --midden:#c3cad5; --tekst:#1a202c; --zacht:#3d4656;
  --onder:#2d3748; --onder-tekst:#edf1f6; --bericht:#f6d365; --bericht-tekst:#1a202c;
  --bellen:#2f855a; --kaart:#d3d9e2; --rand:#97a2b3; --agenda:#aab6c8; --agenda-tekst:#1a202c;
}
/* ---------- stijl Weekdag (zoals vroeger de Veronica-gids): elke dag een eigen kleur ---------- */
body.thema-weekdag{
  --midden:#efebe3; --tekst:#1c1c1c; --zacht:#55524c; --bericht:#ffe27a; --bericht-tekst:#1c1c1c;
  --bellen:#1f8a4c; --kaart:#ffffff; --rand:#d6d0c4; --agenda:#e4e0f0; --agenda-tekst:#1c1c2a;
}
body.thema-weekdag.wd-0{--boven:#1b2f6b; --boven-tekst:#ffffff; --onder:#12214d; --onder-tekst:#ffffff}
body.thema-weekdag.wd-1{--boven:#6b3fa0; --boven-tekst:#ffffff; --onder:#4a2a72; --onder-tekst:#ffffff}
body.thema-weekdag.wd-2{--boven:#7a4a26; --boven-tekst:#fff6ec; --onder:#55331a; --onder-tekst:#ffffff}
body.thema-weekdag.wd-3{--boven:#2e8b3e; --boven-tekst:#ffffff; --onder:#1f612b; --onder-tekst:#ffffff}
body.thema-weekdag.wd-4{--boven:#d9a400; --boven-tekst:#2a2000; --onder:#8a6a00; --onder-tekst:#ffffff}
body.thema-weekdag.wd-5{--boven:#e06d14; --boven-tekst:#ffffff; --onder:#9c4a0b; --onder-tekst:#ffffff}
body.thema-weekdag.wd-6{--boven:#c62828; --boven-tekst:#ffffff; --onder:#8c1b1b; --onder-tekst:#ffffff}
/* ---------- nacht: gedimd (warme kleuren op zwart) ---------- */
body.nacht{
  --boven:#2a1712; --boven-tekst:#c98a6a;
  --midden:#000000; --tekst:#d9a066; --zacht:#8a6a48;
  --onder:#0d1426; --onder-tekst:#8e9cc4;
  --bericht:#3a2f10; --bericht-tekst:#e0c070;
  --bellen:#1d4a30; --bellen-tekst:#bfe3cc;
  --kaart:#141414; --rand:#2a2a2a; --agenda:#1c2238; --agenda-tekst:#a9b5d8;
}
/* ---------- nacht: donker (alleen dag, dagdeel en tijd in dof rood) / zwart (tik = 30 s zichtbaar) ---------- */
body.nacht.nacht-donker, body.nacht.nacht-zwart{
  --boven:#000; --boven-tekst:#6e2a1d; --midden:#000; --tekst:#8a3524; --zacht:#5a2418;
  --onder:#000; --onder-tekst:#5a2418; --bericht:#000; --bericht-tekst:#7a3a22; --agenda:#000; --agenda-tekst:#7a3a22;
  --bellen:#1a1a1a; --bellen-tekst:#4a4a4a; --rand:#1a1a1a;
}
body.nacht.nacht-donker .weer, body.nacht.nacht-zwart .weer{display:none!important}
body.nacht-donker .boven, body.nacht-zwart .boven, body.nacht-donker .onder, body.nacht-zwart .onder{border:0}
.dimmer{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;opacity:0;pointer-events:none;z-index:3;
  -webkit-transition:opacity 1.5s;transition:opacity 1.5s}
.bericht.agenda{background:var(--agenda);color:var(--agenda-tekst)}
.boven,.onder,.dagdeel,.bellen-kop{font-family:var(--font-kop)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--midden);color:var(--tekst);
  font-family:var(--font);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  -webkit-text-size-adjust:100%}
body{transition:background-color 2s}
[hidden]{display:none!important}

.scherm{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

.band{display:flex;align-items:center;justify-content:center;font-weight:800;text-align:center;
  padding:0 3vw;line-height:1}
.boven{background:var(--boven);color:var(--boven-tekst);height:20vh;font-size:13vh;letter-spacing:.02em;text-transform:uppercase}
.onder{background:var(--onder);color:var(--onder-tekst);height:16vh;font-size:7.4vh;position:relative;padding-right:27vw}
.bericht{background:var(--bericht);color:var(--bericht-tekst);min-height:11vh;font-size:5.4vh;font-weight:700;padding:1.5vh 3vw;line-height:1.15}

.midden{flex:1;display:flex;align-items:center;justify-content:center;padding:0 3vw;min-height:0}
.tijdblok{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.dagdeel{font-size:9vh;font-weight:700;color:var(--zacht);line-height:1}
.tijd{font-size:31vh;font-weight:800;line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

.weer{flex:0 0 30vw;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:.4vh solid var(--rand);padding-left:2.5vw;text-align:center}
.weer-plaats{font-size:3.6vh;color:var(--zacht);font-weight:700}
.weer-rij{display:flex;align-items:center}
.weer-icoon{font-size:10vh;line-height:1.1;margin-right:1.2vw}
.weer-temp{font-size:12vh;font-weight:800}
.weer-tekst{font-size:4.6vh;font-weight:700}
.weer-minmax{font-size:3.2vh;color:var(--zacht);margin-top:.8vh}
body.nacht .weer-icoon{opacity:.55}

.knop-bellen{position:absolute;right:2vw;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);
  background:var(--bellen);color:var(--bellen-tekst);border:0;border-radius:2vh;font:inherit;font-size:4.6vh;font-weight:800;
  padding:2vh 2.4vw;display:flex;align-items:center}
.knop-bellen .tel{margin-right:.8vw}
.knop-bellen:active{opacity:.7}

/* staand scherm */
@media (orientation:portrait){
  .boven{height:14vh;font-size:9vh}
  .onder{height:13vh;font-size:5.4vh;justify-content:flex-start}
  .midden{flex-direction:column}
  .tijdblok{flex:0 0 auto}
  .onder{padding-right:3vw}
  .tijd{font-size:22vw}
  .dagdeel{font-size:7vw}
  .weer{flex:0 0 auto;border-left:0;border-top:.3vh solid var(--rand);padding:2vh 0 0;margin-top:3vh;width:70vw}
  .weer-icoon{font-size:7vh}.weer-temp{font-size:8vh}
  .bericht{font-size:3.8vh}
}

/* belscherm */
.bellen{background:var(--midden);align-items:center;justify-content:space-between;padding:4vh 4vw}
.bellen-kop{margin:0;font-size:7vh;font-weight:800}
.contacten{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;flex:1;width:100%;padding:3vh 0}
.contact{background:var(--kaart);border:.4vh solid var(--rand);border-radius:3vh;margin:1.5vh 1.5vw;padding:2.5vh 2vw 2vh;
  width:28vw;display:flex;flex-direction:column;align-items:center;font:inherit;color:var(--tekst)}
.contact:active{border-color:var(--bellen)}
.contact img,.contact .initialen{width:20vw;height:20vw;max-width:34vh;max-height:34vh;border-radius:50%;object-fit:cover;background:#ccc}
.contact .initialen{display:flex;align-items:center;justify-content:center;font-size:12vh;font-weight:800;color:#fff;background:var(--onder)}
.contact .naam{font-size:6vh;font-weight:800;margin-top:1.5vh}
.contact .soort{font-size:3vh;color:var(--zacht);margin-top:.4vh}
.knop-terug{font:inherit;font-size:4.6vh;font-weight:700;background:var(--onder);color:var(--onder-tekst);border:0;border-radius:2vh;padding:2vh 4vw}
@media (orientation:portrait){ .contact{width:40vw} .contact img,.contact .initialen{width:30vw;height:30vw} }

.hoek{position:fixed;left:0;top:0;width:12vw;height:12vh;z-index:5}
.info{position:fixed;left:2vw;top:2vh;right:2vw;z-index:6;background:rgba(0,0,0,.85);color:#fff;border-radius:2vh;padding:2vh 2vw;
  font-size:2.6vh;line-height:1.5;font-family:Menlo,monospace;white-space:pre-wrap}

/* meekijken: klein knipperend stipje rechtsboven */
.kijkt{position:fixed;top:calc(1.6vh + env(safe-area-inset-top));right:1.4vw;z-index:4;width:2.2vh;height:2.2vh;border-radius:50%;
  background:#ff2d2d;border:.35vh solid #fff;box-shadow:0 0 1vh rgba(0,0,0,.35);
  -webkit-animation:knipper 1.6s ease-in-out infinite;animation:knipper 1.6s ease-in-out infinite}
body.nacht .kijkt{border-color:#5a2018;background:#b02020}
@-webkit-keyframes knipper{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes knipper{0%,100%{opacity:1}50%{opacity:.2}}

/* ---------- zonder weer: klok zo groot mogelijk ---------- */
body.zonder-weer .tijd{font-size:42vh}
body.zonder-weer .dagdeel{font-size:12vh}
@media (orientation:portrait){
  body.zonder-weer .tijd{font-size:33vw}
  body.zonder-weer .dagdeel{font-size:11vw}
}

/* ---------- bewegend weericoon ---------- */
.wi{position:relative;display:inline-block;width:13vh;height:11vh;font-size:9vh;line-height:1;margin-right:1.4vw;overflow:visible}
.wi span,.wi b,.wi i{position:absolute;font-style:normal;font-weight:400}
.wi .zon{left:1.5vh;top:.5vh;-webkit-animation:wi-draai 40s linear infinite, wi-gloei 5s ease-in-out infinite;animation:wi-draai 40s linear infinite, wi-gloei 5s ease-in-out infinite}
.wi .zon.klein{font-size:7vh;left:0;top:0}
.wi .wolk{left:2vh;top:2.4vh;-webkit-animation:wi-drijf 7s ease-in-out infinite;animation:wi-drijf 7s ease-in-out infinite}
.wi .wolk.achter{font-size:6.5vh;left:-.5vh;top:.3vh;opacity:.75;-webkit-animation-duration:9s;animation-duration:9s;-webkit-animation-direction:reverse;animation-direction:reverse}
.wi-regen .wolk,.wi-sneeuw .wolk,.wi-onweer .wolk{top:0;left:1.5vh}
.wi .maan{left:2vh;top:1vh;-webkit-animation:wi-gloei 6s ease-in-out infinite;animation:wi-gloei 6s ease-in-out infinite}
.wi .ster{font-size:2.2vh;color:#ffd96b;-webkit-animation:wi-twinkel 3s ease-in-out infinite;animation:wi-twinkel 3s ease-in-out infinite}
.wi .s1{left:0;top:0}.wi .s2{left:11vh;top:2vh;-webkit-animation-delay:1s;animation-delay:1s}.wi .s3{left:9vh;top:8vh;font-size:1.6vh;-webkit-animation-delay:2s;animation-delay:2s}
.wi .mist{left:2vh;top:1vh;-webkit-animation:wi-mist 6s ease-in-out infinite;animation:wi-mist 6s ease-in-out infinite}
.wi i{width:.45vh;height:2vh;border-radius:.3vh;background:#4f8fe0;top:7.5vh;opacity:0;-webkit-animation:wi-val 1.1s linear infinite;animation:wi-val 1.1s linear infinite}
.wi .d1{left:4vh}.wi .d2{left:6.5vh;-webkit-animation-delay:.35s;animation-delay:.35s}.wi .d3{left:9vh;-webkit-animation-delay:.7s;animation-delay:.7s}.wi .d4{left:7.7vh;-webkit-animation-delay:.9s;animation-delay:.9s}
.wi .vlok{font-size:2.4vh;color:#9cc7ff;top:7vh;opacity:0;-webkit-animation:wi-sneeuw 3s linear infinite;animation:wi-sneeuw 3s linear infinite}
.wi .v1{left:4vh}.wi .v2{left:7vh;-webkit-animation-delay:1s;animation-delay:1s}.wi .v3{left:9.5vh;-webkit-animation-delay:2s;animation-delay:2s}
.wi .flits{font-size:5vh;left:5.5vh;top:5.5vh;opacity:0;-webkit-animation:wi-flits 4s linear infinite;animation:wi-flits 4s linear infinite}
@-webkit-keyframes wi-draai{to{-webkit-transform:rotate(360deg)}}
@keyframes wi-draai{to{transform:rotate(360deg)}}
@-webkit-keyframes wi-gloei{0%,100%{-webkit-filter:drop-shadow(0 0 .3vh rgba(255,200,60,.4))}50%{-webkit-filter:drop-shadow(0 0 1.6vh rgba(255,200,60,.9))}}
@keyframes wi-gloei{0%,100%{filter:drop-shadow(0 0 .3vh rgba(255,200,60,.4))}50%{filter:drop-shadow(0 0 1.6vh rgba(255,200,60,.9))}}
@-webkit-keyframes wi-drijf{0%,100%{-webkit-transform:translateX(-.8vh)}50%{-webkit-transform:translateX(.8vh)}}
@keyframes wi-drijf{0%,100%{transform:translateX(-.8vh)}50%{transform:translateX(.8vh)}}
@-webkit-keyframes wi-twinkel{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes wi-twinkel{0%,100%{opacity:.15}50%{opacity:1}}
@-webkit-keyframes wi-mist{0%,100%{-webkit-transform:translateX(-1vh);opacity:.6}50%{-webkit-transform:translateX(1vh);opacity:1}}
@keyframes wi-mist{0%,100%{transform:translateX(-1vh);opacity:.6}50%{transform:translateX(1vh);opacity:1}}
@-webkit-keyframes wi-val{0%{-webkit-transform:translateY(0);opacity:0}15%{opacity:1}100%{-webkit-transform:translateY(4vh);opacity:0}}
@keyframes wi-val{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(4vh);opacity:0}}
@-webkit-keyframes wi-sneeuw{0%{-webkit-transform:translate(0,0);opacity:0}15%{opacity:1}50%{-webkit-transform:translate(.8vh,2vh)}100%{-webkit-transform:translate(-.6vh,4.5vh);opacity:0}}
@keyframes wi-sneeuw{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(.8vh,2vh)}100%{transform:translate(-.6vh,4.5vh);opacity:0}}
@-webkit-keyframes wi-flits{0%,86%,90%,100%{opacity:0}87%,89%,92%{opacity:1}}
@keyframes wi-flits{0%,86%,90%,100%{opacity:0}87%,89%,92%{opacity:1}}
/* 's nachts en bij "minder beweging": stil */
body.nacht .wi *, body.nacht .wi{-webkit-animation:none!important;animation:none!important}
body.nacht .wi i,body.nacht .wi .vlok,body.nacht .wi .flits{display:none}
@media (prefers-reduced-motion:reduce){.wi *{-webkit-animation:none!important;animation:none!important}.wi i,.wi .vlok{display:none}}
@media (orientation:portrait){.wi{width:10vh;height:8.5vh;font-size:7vh}}

@media (orientation:portrait){
  .onder{font-size:4.4vh;padding-right:37vw!important}
  .knop-bellen{font-size:3.4vh;padding:1.6vh 2.4vw}
}

/* voorbeeld op de kijkpagina: niet aanklikbaar */
html.voorbeeld body{pointer-events:none}
html.voorbeeld .hoek{display:none}

/* versienummer: klein en onopvallend linksonder */
.versie{position:fixed;left:1vw;bottom:calc(.5vh + env(safe-area-inset-bottom));z-index:2;font-size:1.5vh;font-weight:600;
  color:var(--onder-tekst);opacity:.35;pointer-events:none;font-variant-numeric:tabular-nums}

/* ---------- beeldbellen in de app ---------- */
.gesprek{position:fixed;top:0;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#16181d;color:#fff;font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center;
  padding:env(safe-area-inset-top) 3vw env(safe-area-inset-bottom)}
.gesprek.inkomend{background:#123323;background:-webkit-radial-gradient(center,#1f5a3c 0%,#0f2a1d 75%);background:radial-gradient(circle at center,#1f5a3c 0%,#0f2a1d 75%)}
.g-ander{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:#000;display:none}
.gesprek.actief .g-ander{display:block}
.g-zelf{position:absolute;right:2vw;top:calc(2.5vh + env(safe-area-inset-top));width:24vw;height:18vw;max-height:30vh;object-fit:cover;
  border-radius:2vh;border:.4vh solid rgba(255,255,255,.9);background:#000;z-index:2;display:none;
  -webkit-transform:scaleX(-1);transform:scaleX(-1);box-shadow:0 .6vh 2vh rgba(0,0,0,.45)}
.gesprek.uitgaand .g-zelf,.gesprek.verbinden .g-zelf,.gesprek.actief .g-zelf{display:block}
.g-wie{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.gesprek.actief .g-wie{display:none}
.g-foto-rand{position:relative;width:40vh;height:40vh;border-radius:50%;padding:1vh;background:rgba(255,255,255,.9)}
.gesprek.inkomend .g-foto-rand{-webkit-animation:g-puls 1.6s ease-in-out infinite;animation:g-puls 1.6s ease-in-out infinite}
.g-foto{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#2a2d35}
.g-initialen{display:flex;align-items:center;justify-content:center;font-size:16vh;font-weight:800;color:#fff;background:#3a64d8}
.g-naam{font-size:10vh;font-weight:800;margin-top:3vh;line-height:1.05}
.g-tekst{font-size:5vh;margin-top:1.2vh;opacity:.9;line-height:1.2;max-width:90vw}
.g-knop{position:relative;z-index:3;border:0;border-radius:7vh;font:inherit;font-weight:800;color:#fff;margin-top:4.5vh;
  font-size:7vh;padding:2.6vh 7vw;box-shadow:0 1vh 3vh rgba(0,0,0,.35);display:none}
.g-knop:active{opacity:.75}
.g-groen{background:#1faa52}
.g-rood{background:#d83b2d}
.gesprek.inkomend .g-groen{display:block;-webkit-animation:g-wip 1.6s ease-in-out infinite;animation:g-wip 1.6s ease-in-out infinite}
.gesprek.uitgaand .g-rood,.gesprek.verbinden .g-rood,.gesprek.actief .g-rood{display:block}
.gesprek.actief .g-rood{position:absolute;bottom:calc(4vh + env(safe-area-inset-bottom));font-size:5vh;padding:2vh 6vw}
@-webkit-keyframes g-puls{0%,100%{-webkit-box-shadow:0 0 0 0 rgba(80,230,140,.55)}50%{-webkit-box-shadow:0 0 0 4vh rgba(80,230,140,0)}}
@keyframes g-puls{0%,100%{box-shadow:0 0 0 0 rgba(80,230,140,.55)}50%{box-shadow:0 0 0 4vh rgba(80,230,140,0)}}
@-webkit-keyframes g-wip{0%,100%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.07)}}
@keyframes g-wip{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (orientation:portrait){
  .g-foto-rand{width:30vh;height:30vh}
  .g-naam{font-size:7vh} .g-tekst{font-size:3.6vh} .g-knop{font-size:5vh}
  .g-zelf{width:30vw;height:40vw;max-height:26vh}
}

/* ================= indeling 1.7: dag + dagdeel boven, datum boven de tijd, berichten + grote belknop onder ================= */
.boven{height:18vh;font-size:12vh;white-space:nowrap}
.boven .dagdeel{font-size:.62em;font-weight:700;color:inherit;opacity:.75;margin-left:.45em;text-transform:lowercase;line-height:1}
.datum{font-size:7.5vh;font-weight:700;color:var(--zacht);line-height:1;margin-bottom:.8vh;white-space:nowrap}
body.zonder-weer .datum{font-size:9vh}
.tijd{font-size:30vh}
body.zonder-weer .tijd{font-size:40vh}

.onder{height:22vh;padding:1.6vh 2vw!important;justify-content:space-between;align-items:stretch;font-size:inherit}
.berichten{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;margin-right:2vw}
.bericht{background:var(--bericht);color:var(--bericht-tekst);border-radius:1.6vh;padding:.9vh 1.6vw;font-size:4.8vh;font-weight:700;
  line-height:1.15;text-align:left;min-height:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bericht + .bericht{margin-top:1vh}
.bericht.twee{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:5.2vh;padding:1.2vh 1.6vw}
.bericht.agenda{background:var(--agenda);color:var(--agenda-tekst)}
.knop-bellen{position:static;-webkit-transform:none;transform:none;align-self:center;flex:0 0 auto;
  font-size:6.4vh;padding:0 3.4vw;height:17vh;border-radius:2.6vh;box-shadow:0 .6vh 1.6vh rgba(0,0,0,.25)}
.knop-bellen .tel{margin-right:1vw;font-size:1.1em}
body.nacht .knop-bellen{box-shadow:none}

@media (orientation:portrait){
  .boven{height:12vh;font-size:7.5vh}
  .datum{font-size:4.6vw;margin-bottom:.6vh}
  body.zonder-weer .datum{font-size:6vw}
  .tijd{font-size:22vw} body.zonder-weer .tijd{font-size:31vw}
  .onder{height:auto;min-height:15vh;flex-direction:column;padding:1.4vh 3vw!important;align-items:stretch}
  .berichten{margin:0 0 1.2vh}
  .berichten:empty,.berichten.leeg{display:none}
  .bericht{font-size:2.9vh} .bericht.twee{font-size:3.1vh}
  .knop-bellen{height:9vh;font-size:4.4vh;justify-content:center;align-self:stretch}
}
/* afkappen op de tekst zelf (niet op het vak met padding), anders schemert een derde regel door */
.bericht{display:flex;align-items:center}
.bericht span{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bericht.twee span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bericht.twee{display:flex}

/* ================= indelingen (1.8): strakker uitgelijnd, gele meldingen zonder rondingen, belknop = rechterhelft ================= */
.datum{display:block;text-align:justify;-moz-text-align-last:justify;text-align-last:justify;white-space:nowrap;line-height:1.05;margin-bottom:.4vh}
.bericht{border-radius:0}
.bericht + .bericht{margin-top:0}
.knop-bellen{border-radius:0;box-shadow:none;justify-content:center}
.onder{gap:0}

/* A — rustig en centraal; onderbalk van rand tot rand: links meldingen, rechts de belknop */
body.indeling-a .onder{padding:0!important;align-items:stretch}
body.indeling-a .berichten{flex:0 0 50%;margin:0;justify-content:stretch}
body.indeling-a .bericht{flex:1 1 0;padding:0 2.4vw}
body.indeling-a .bericht + .bericht{border-top:.35vh solid rgba(0,0,0,.18)}
body.indeling-a .knop-bellen{flex:0 0 50%;height:auto;align-self:stretch;padding:0 2vw;margin-left:auto}

/* B — alles links op één lijn (3 vw), weer rechts op dezelfde lijn; onderbalk met dezelfde marges */
body.indeling-b .boven{justify-content:flex-start;padding:0 3vw}
body.indeling-b .midden{padding:0 3vw}
body.indeling-b .tijdblok{align-items:flex-start}
body.indeling-b .weer{padding-left:3vw;align-items:flex-end;text-align:right}
body.indeling-b .onder{padding:2.4vh 3vw!important;align-items:stretch}
body.indeling-b .berichten{flex:0 0 calc(50% - 1.5vw);margin:0 3vw 0 0;justify-content:stretch}
body.indeling-b .bericht{flex:1 1 0;padding:0 1.6vw}
body.indeling-b .bericht + .bericht{margin-top:1vh}
body.indeling-b .knop-bellen{flex:1 1 0;height:auto;align-self:stretch;margin-left:auto}

/* C — centraal, onderbalk met marges en gelijke hoogte van meldingen en knop */
body.indeling-c .midden{padding:0 3vw}
body.indeling-c .onder{padding:2.4vh 3vw!important;align-items:stretch}
body.indeling-c .berichten{flex:0 0 calc(50% - 1.5vw);margin:0 3vw 0 0;justify-content:stretch}
body.indeling-c .bericht{flex:1 1 0;padding:0 1.6vw;border-left:1.2vh solid rgba(0,0,0,.22)}
body.indeling-c .bericht + .bericht{margin-top:1vh}
body.indeling-c .knop-bellen{flex:1 1 0;height:auto;align-self:stretch;margin-left:auto}
body.indeling-c .weer{border-left-width:.25vh}

/* zonder meldingen: belknop blijft op de rechterhelft */
.berichten.leeg{visibility:hidden}

@media (orientation:portrait){
  body.indeling-a .berichten,body.indeling-b .berichten,body.indeling-c .berichten{flex:0 0 auto;margin:0 0 1.2vh}
  body.indeling-a .berichten{margin:0}
  body.indeling-a .knop-bellen,body.indeling-b .knop-bellen,body.indeling-c .knop-bellen{flex:0 0 auto;height:10vh;margin:0}
  body.indeling-a .bericht{padding:1.4vh 3vw}
  .berichten.leeg{display:none}
}

/* weer: alleen de plaatsnaam, kolom netjes uitgelijnd (bovenkant plaats = bovenkant datum) */
.weer{justify-content:center}
.weer-plaats{font-size:4.2vh;line-height:1.05;margin-bottom:.6vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.weer-rij{justify-content:center}
body.indeling-b .weer-rij{justify-content:flex-end}
body.indeling-b .weer-rij .weer-icoon{margin-right:1.2vw}
/* datum: geen uitgerekte spaties; de breedte komt uit de lettergrootte */
.datum{text-align:center;-moz-text-align-last:auto;text-align-last:auto}
body.indeling-b .datum{text-align:left}

/* ================= 1.8.4: dag in het midden zonder dagdeel; weerkolom gebruikt de hele hoogte ================= */
body.zonder-dagdeel .boven{justify-content:center!important;padding:0 3vw}

.midden{align-items:stretch}
.tijdblok{justify-content:center}
.weer{display:flex;flex-direction:column;align-items:center!important;justify-content:space-evenly;text-align:center!important;padding:3vh 0 3vh 2.5vw}
.weer-plaats{font-size:6vh;font-weight:800;color:var(--tekst);margin:0;max-width:100%}
.weer-rij{flex-direction:column;align-items:center;justify-content:center!important}
.weer .wi{-webkit-transform:scale(1.6);transform:scale(1.6);margin:3.5vh 0 4.5vh!important}
.weer-temp{font-size:12vh;line-height:1}
.weer-tekst{font-size:4.8vh}
.weer-minmax{font-size:3.4vh;margin-top:.4vh}
body.indeling-b .weer-rij{justify-content:center!important}
body.indeling-b .weer-rij .weer-icoon{margin-right:0}
@media (orientation:portrait){
  .midden{align-items:center}
  .weer{padding:2vh 0 0;flex:0 0 auto}
  .weer-rij{flex-direction:row}
  .weer .wi{-webkit-transform:scale(1.3);transform:scale(1.3);margin:0 3vw 0 0!important}
  .weer-plaats{font-size:4vh}
}

/* ================= 1.9: agenda-afspraak onder de tijd ================= */
.agenda-regel{background:var(--agenda);color:var(--agenda-tekst);font-size:5vh;font-weight:700;line-height:1.15;
  padding:1vh 1.4vw;margin-top:1.4vh;max-width:100%;display:flex;align-items:center;border-left:1.2vh solid rgba(0,0,0,.22)}
.agenda-regel span{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.indeling-b .agenda-regel{align-self:flex-start}
/* met afspraak: tijd iets kleiner zodat alles past */
body.met-agenda .tijd{font-size:25vh}
body.met-agenda.zonder-weer .tijd{font-size:31vh}
body.met-agenda .datum{margin-bottom:.2vh}
body.nacht-donker .agenda-regel, body.nacht-zwart .agenda-regel{border-left-color:#2a120c}
@media (orientation:portrait){
  .agenda-regel{font-size:3.2vh}
  body.met-agenda .tijd{font-size:20vw} body.met-agenda.zonder-weer .tijd{font-size:26vw}
}

/* ================= 1.9: zonder weer alles gecentreerd; agenda zo groot mogelijk ================= */
body.zonder-weer .tijdblok{align-items:center!important}
body.zonder-weer .datum{text-align:center!important}
body.zonder-weer .agenda-regel{align-self:center!important}
.agenda-regel{font-size:6vh;padding:1.2vh 1.6vw;margin-top:2vh;justify-content:center;box-sizing:border-box}
.agenda-regel span{white-space:nowrap}
body.met-agenda .tijd{font-size:26vh}
body.met-agenda.zonder-weer .tijd{font-size:30vh}
body.zonder-weer .boven .dagdeel{font-size:.62em}

/* afgeschermd: zonder geldige klok-token niets tonen */
html.gesloten body > *:not(#slot-scherm){visibility:hidden!important}
.slot-scherm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background:#111214;color:#5a5a60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:10vh;text-align:center}
.slot-kop{font-size:4vh;font-weight:700;margin-top:1vh;letter-spacing:.1em;text-transform:uppercase}

/* ================= 1.10.1: belknop ziet eruit als een echte knop ================= */
.knop-bellen{border-radius:2.6vh!important;
  background:var(--bellen);
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.22),rgba(255,255,255,0) 55%,rgba(0,0,0,.12));
  background-image:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,0) 55%,rgba(0,0,0,.12));
  border:.35vh solid rgba(255,255,255,.55)!important;border-bottom:1.1vh solid rgba(0,0,0,.35)!important;
  box-shadow:0 1vh 2.2vh rgba(0,0,0,.35),inset 0 .3vh 0 rgba(255,255,255,.35)!important;
  text-shadow:0 .25vh .4vh rgba(0,0,0,.35);
  -webkit-transition:-webkit-transform .08s,box-shadow .08s;transition:transform .08s,box-shadow .08s}
.knop-bellen .tel{display:inline-flex;align-items:center;justify-content:center;width:1.55em;height:1.55em;border-radius:50%;
  background:#fff;font-size:.85em;margin-right:.55em!important;text-shadow:none;box-shadow:0 .3vh .8vh rgba(0,0,0,.3)}
.knop-bellen:active{opacity:1;-webkit-transform:translateY(.7vh);transform:translateY(.7vh);
  border-bottom-width:.4vh!important;box-shadow:0 .3vh .8vh rgba(0,0,0,.35)!important}
body.indeling-a .knop-bellen{margin:1.4vh 1.4vw!important;height:auto!important;flex:0 0 calc(50% - 2.8vw)!important;align-self:stretch}
/* nacht: geen glans, gedempt */
body.nacht .knop-bellen{background-image:none;border-color:rgba(255,255,255,.08)!important;border-bottom-color:rgba(0,0,0,.5)!important;box-shadow:none!important;text-shadow:none}
body.nacht .knop-bellen .tel{background:rgba(255,255,255,.18);box-shadow:none}

/* ================= 1.10.2: geen lichte stroken boven/onder; lichtkrant voor lange berichten ================= */
/* de status-balkruimte boven en de ruimte onder krijgen de kleur van de bovenste en onderste balk */
body{background:var(--midden);background:-webkit-linear-gradient(top,var(--boven) 0,var(--boven) 50%,var(--onder) 50%,var(--onder) 100%);
  background:linear-gradient(to bottom,var(--boven) 0,var(--boven) 50%,var(--onder) 50%,var(--onder) 100%)}
#klok .midden{background:var(--midden)}
body.nacht #klok .midden{background:var(--midden)}
/* lichtkrant */
.bericht.loopt span.loopt, .agenda-regel.loopt span.loopt{display:block!important;white-space:nowrap!important;overflow:hidden!important;
  text-overflow:clip!important;-webkit-line-clamp:none!important;-webkit-box-orient:horizontal!important}
.bericht.loopt{white-space:nowrap}
i.loop{display:inline-block;font-style:normal;white-space:nowrap;will-change:transform}
/* 1.10.3: html-achtergrond wordt via JS de kleur van de onderste balk; lichtkrant doorlopend */
i.loop span{display:inline-block}
i.loop .loop-tussen{padding:0 1.6em;opacity:.55}
html,body{min-height:100%}

/* ================= 1.10.3 ================= */
html{min-height:100%}
#klok .onder{padding-bottom:calc(2.4vh + env(safe-area-inset-bottom))!important}
/* belknop smaller: meer ruimte voor de meldingen */
body.indeling-b .berichten, body.indeling-c .berichten{flex:0 0 calc(64% - 1.5vw)!important}
body.indeling-a .berichten{flex:0 0 64%!important}
body.indeling-a .knop-bellen{flex:0 0 calc(36% - 2.8vw)!important}
.knop-bellen{font-size:5.4vh!important;padding:0 1.6vw!important}
@media (orientation:portrait){
  body.indeling-a .berichten, body.indeling-b .berichten, body.indeling-c .berichten{flex:0 0 auto!important}
  body.indeling-a .knop-bellen{flex:0 0 auto!important}
}

/* ================= 1.11.1: belknop-icoon: groene hoorn in witte cirkel, of foto ================= */
.knop-bellen .tel{background:#fff;overflow:hidden;width:1.7em!important;height:1.7em!important;font-size:.9em}
.knop-bellen .tel svg{width:62%;height:62%;display:block}
.knop-bellen .tel.foto{border:.35vh solid #fff;background:#ddd}
.knop-bellen .tel.foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
body.nacht .knop-bellen .tel svg path{fill:#3d6e4c}
body.nacht .knop-bellen .tel.foto img{opacity:.6}
/* 1.11.2: hoorn/foto groter */
.knop-bellen .tel{width:2.3em!important;height:2.3em!important;font-size:1em!important;margin-right:.5em!important;flex:0 0 auto}
.knop-bellen .tel svg{width:58%;height:58%}

/* ================= 1.12: levende achtergrond (three.js) ================= */
#levend-doek{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;display:none;pointer-events:none}
html.levend #klok .midden{background:transparent!important}
html.levend body.dag{--tekst:#ffffff;--zacht:rgba(255,255,255,.88)}
html.levend body.dag .tijd, html.levend body.dag .datum, html.levend body.dag .weer{text-shadow:0 .4vh 1.6vh rgba(0,20,50,.45),0 0 .3vh rgba(0,20,50,.35)}
html.levend .weer{border-left-color:rgba(255,255,255,.25)!important}
html.levend .agenda-regel{background:rgba(255,255,255,.82);color:#14234d}
/* leesbaarheid op een lichte lucht: heel licht gedempt middenvlak */
html.levend body.dag #klok .midden{background:rgba(0,18,40,.16)!important}

/* ================= 1.13.1: weerkolom past altijd (plaatsnaam niet meer buiten beeld) ================= */
.weer{justify-content:center!important;padding:2vh 0 2vh 2.5vw;overflow:hidden;min-height:0}
.weer > *{flex:0 0 auto}
.weer-plaats{font-size:5.2vh;margin:0 0 .4vh!important}
.weer .wi{-webkit-transform:scale(1.35);transform:scale(1.35);margin:2.2vh 0 2.6vh!important}
.weer-temp{font-size:10.5vh}
.weer-tekst{font-size:4.2vh;line-height:1.1}
.weer-minmax{font-size:3vh}