/*
  Blokken die op 16 oktober 2026 van de homepage af gingen (piramide) en lager in de
  piramide terugkwamen, naast /dag.css. Zelfde stijl als de homepage toen: de donkere
  banden (kanalen, Ostrey) in de wereld van de maan, de ladder en de doorgestreepte
  regels in het dag-palet. Markup uit scripts/terug-blokken.mjs en scripts/paginas.mjs.
*/

/* ===== donkere band op een lichte pagina ===== */
.band{
  --paneel-terminal:#0a0c0e; --paneel-diep:#0b0d0f; --stil:#5a5f66;
  --k-tel:#9cc4e4; --k-wa:#7fdcaa; --k-vai:#ff9f7a;
  background:var(--ruimte);color:var(--ink);border-top:0;color-scheme:dark}
.band ::selection{background:var(--atmosfeer);color:var(--ruimte)}
.band :focus-visible{outline:1.5px solid var(--atmosfeer);outline-offset:3px}
.band h2 .zacht{color:var(--mist)}
.band .intro{color:var(--tekst-2)}
.band a{color:var(--ink);text-decoration-color:rgba(255,255,255,.35)}
.band a:hover{text-decoration-color:var(--atmosfeer)}
.band .knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;font:600 .875rem/1.4 var(--tekst);text-decoration:none;border:1px solid var(--lijn-sterk);color:var(--ink);background:transparent;cursor:pointer}
.band .knop:hover{border-color:var(--ink)}
.band .knop.hoofd{background:var(--ink);color:var(--ruimte);border-color:var(--ink)}
.band .knop.hoofd:hover{background:var(--atmosfeer);border-color:var(--atmosfeer)}
.band .fase{width:12px;height:12px;flex:none;display:inline-block}
.band .fase circle.rand{fill:none;stroke:currentColor;stroke-width:1.3}
.band .fase path,.band .fase circle.vol{fill:currentColor}
.band .status{display:inline-flex;align-items:flex-start;gap:7px;font-size:.8rem;color:var(--mist)}
.band .status .fase{margin-top:.35em}

/* ===== kanalen: de tabs met het toestel (Customer contact) ===== */
.kanalen-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.kanaal-lijst{list-style:none;margin:0;padding:0}
.kanaal-rij{border-top:1px solid var(--lijn)}
.kanaal-rij:last-child{border-bottom:1px solid var(--lijn)}
.kanaal-knop{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.kanaal-knop:focus-visible{outline:1.5px solid var(--atmosfeer);outline-offset:2px}
.kanaal-naam{font-family:var(--display);font-size:clamp(2rem,1rem + 3.4vw,4.2rem);font-weight:500;letter-spacing:-.04em;line-height:1;font-stretch:78%;color:var(--stil);transition:color .5s var(--gemak),font-stretch .7s var(--gemak),letter-spacing .7s var(--gemak)}
.kanaal-knop:hover .kanaal-naam{color:#6a6f76}
.kanaal-rij.aan .kanaal-naam,.kanalen:not(.kanalen-actief) .kanaal-naam{color:var(--ink);font-stretch:112%;letter-spacing:-.035em}
.kanaal-rij .status{opacity:.75;transition:opacity .4s}
.kanaal-rij.aan .status{opacity:1}
.kanaal-uitleg{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--gemak),visibility .6s}
.kanalen-actief .kanaal-rij:not(.aan) .kanaal-uitleg{grid-template-rows:0fr;visibility:hidden}
.kanaal-uitleg>div{overflow:hidden}
.kanaal-uitleg p{color:var(--tekst-2);max-width:30em}
.kanaal-link{display:inline-block;margin:8px 0 18px;font-size:.88rem;font-weight:600;text-underline-offset:3px}
.kanaal-link .pijl{display:inline-block;transition:transform .3s var(--gemak)}
.kanaal-link:hover .pijl{transform:translateX(4px)}
.kanaal-uitleg div>p:last-child{padding-bottom:18px}
.kanaal-voortgang{margin-top:22px;height:1px;background:var(--lijn);position:relative;overflow:hidden}
.kanaal-voortgang i{position:absolute;inset:0;background:var(--atmosfeer);transform-origin:left;transform:scaleX(0)}
.toestel{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--paneel);border:1px solid var(--lijn);min-height:470px;overflow:hidden}
.toestel-kop{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--lijn);font:600 .7rem/1 var(--display);font-stretch:120%;letter-spacing:.22em;text-transform:uppercase;color:var(--tekst-2)}
.toestel-kop span:last-child{font-family:var(--mono);font-stretch:100%;letter-spacing:.04em;text-transform:none;color:var(--mist);font-weight:400}
.scherm{grid-row:2;grid-column:1;min-width:0;padding:22px;display:flex;flex-direction:column;gap:12px;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--gemak)}
.scherm.aan{clip-path:inset(0 0 0 0)}
.beller{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--lijn);background:var(--paneel-2)}
.beller .ico{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--lijn-sterk);flex:none}
.beller b{display:block;font-weight:500}
.beller small{color:var(--mist);font-family:var(--mono);font-size:.74rem}
.route{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.route li{position:relative;display:flex;gap:14px;padding:10px 0 14px 2px}
.route li:not(:last-child)::before{content:"";position:absolute;left:7px;top:26px;bottom:-4px;width:1px;background:var(--lijn-sterk)}
.route .punt{width:12px;height:12px;margin-top:5px;border-radius:50%;border:1.5px solid var(--lijn-sterk);flex:none;background:var(--paneel)}
.route .klaar .punt{background:var(--mist);border-color:var(--mist)}
.route .nu .punt{background:var(--k-tel);border-color:var(--k-tel);box-shadow:0 0 0 0 rgba(156,196,228,.6);animation:k-puls 1.6s infinite}
@keyframes k-puls{0%{box-shadow:0 0 0 0 rgba(156,196,228,.6)}70%{box-shadow:0 0 0 10px rgba(156,196,228,0)}100%{box-shadow:0 0 0 0 rgba(156,196,228,0)}}
.route b{display:block;font-weight:500}
.route small{color:var(--mist);font-size:.82rem}
.route .klaar b{color:var(--mist)}
.bel{max-width:85%;padding:11px 14px;font-size:.92rem;line-height:1.45;background:var(--paneel-2);border:1px solid var(--lijn)}
.bel.uit{align-self:flex-end;background:#1d2329;border-color:rgba(156,196,228,.28)}
.bel.wa.uit{background:#16291f;border-color:rgba(127,220,170,.3)}
.bel .tijd{display:block;margin-top:4px;font:400 .68rem/1 var(--mono);color:var(--mist)}
.bel.mailkaart{max-width:100%;align-self:stretch}
.bel.mailkaart b{display:block;font-weight:500;margin-bottom:6px}
.bel.mailkaart .van{display:block;color:var(--mist);font-size:.84rem}
.bel.mailkaart .citaat{display:block;margin-top:10px}
.foto{align-self:flex-end;width:min(150px,50%);border:1px solid rgba(127,220,170,.3);background:#16291f;padding:6px}
.foto svg{display:block;width:100%;height:auto}
.uitkomst{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:14px;border-top:1px solid var(--lijn);font-size:.86rem;color:var(--tekst-2)}
.uitkomst svg{flex:none;color:var(--k-wa)}
.typen{display:inline-flex;gap:4px;padding:12px 14px;background:var(--paneel-2);border:1px solid var(--lijn);align-self:flex-start}
.typen i{width:5px;height:5px;border-radius:50%;background:var(--mist);animation:k-typ 1.2s infinite}
.typen i:nth-child(2){animation-delay:.15s}.typen i:nth-child(3){animation-delay:.3s}
@keyframes k-typ{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.locatie{align-self:flex-end;width:min(260px,80%);border:1px solid rgba(127,220,170,.3);background:#16291f}
.locatie svg{display:block;width:100%;height:auto}
.locatie div{padding:9px 12px;font-size:.84rem}
@media (max-width:900px){
  .kanaal-naam{font-size:clamp(1.7rem,8vw,2.4rem)}
  .kanalen-grid{grid-template-columns:1fr;gap:18px}
  .toestel{min-height:0}
  .scherm{padding:16px}
  .kanaal-knop{padding:10px 0}
  .kanaal-uitleg p{font-size:.92rem}
}

/* ===== Ostrey als opname (Examples): public/ostrey-opname.css in een donkere band ===== */
.bewijs .opname{margin-top:0}
/* dag.css geeft .zeg een eigen blok; hier is .zeg een beurt in het gesprek */
.bewijs .beurt .zeg{display:block;padding:0;background:none;gap:0}
.bewijs .beurt .zeg p{font:inherit;letter-spacing:0}
.bewijs .opname-onder{margin-top:clamp(24px,3vw,36px)}

/* ===== de ladder: van je club tot je bedrijf (For) ===== */
.treden{list-style:none;margin:0;padding:0;border-top:1px solid var(--dag-lijn)}
.treden li{border-bottom:1px solid var(--dag-lijn)}
.treden a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:8px 24px;align-items:baseline;padding:20px 12px 20px calc(var(--trede) * clamp(0px,3.2vw,48px));text-decoration:none;color:inherit;transition:background .3s var(--gemak)}
.treden a:hover{background:var(--wit)}
.treden b{font:540 clamp(1.4rem,1rem + 1.2vw,2.1rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--dag-mist)}
.treden a:hover b,.treden a[aria-current] b{color:var(--dag-ink)}
.treden a[aria-current]{background:var(--wit);box-shadow:inset 3px 0 0 var(--dag-ink)}
.treden span{color:var(--dag-ink)}
.treden small{color:var(--dag-mist);font-size:.9rem;text-align:right}
@media (max-width:700px){.treden a{grid-template-columns:1fr;gap:4px;padding-left:calc(12px + var(--trede) * 10px)}.treden small{text-align:left}}

/* ===== wat je niet meer betaalt: doorgestreepte regels met de oplossing erbij ===== */
.streeplijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--dag-lijn)}
.streeplijst li{border-bottom:1px solid var(--dag-lijn)}
.streeplijst a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(16px,2vw,24px) 0;text-decoration:none;color:inherit}
.streep-blok{font:500 clamp(1.4rem,1rem + 1.8vw,2.6rem)/1.15 var(--display);letter-spacing:-.035em;color:var(--dag-mist);transition:color .3s}
.streep{background:linear-gradient(#c4532c,#c4532c) 0 58%/100% 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.streeplijst a:hover .streep-blok{color:var(--dag-ink)}
.streeplijst small{flex:none;font-size:.88rem;color:var(--dag-mist);white-space:nowrap}
.streeplijst a:hover small{color:var(--dag-ink);text-decoration:underline}
@media (max-width:560px){.streeplijst a{flex-direction:column;gap:4px}}

/* een adres in een intro mag breken (Connect) */
#by-hand .intro{overflow-wrap:anywhere}

/* ===== labels onder een tekst (Builders: voor wie) ===== */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{padding:6px 12px;border:1px solid var(--dag-lijn-sterk);font-size:.86rem}

@media (prefers-reduced-motion:reduce){.scherm,.kanaal-uitleg,.kanaal-naam{transition:none}.route .nu .punt,.typen i{animation:none}}