/* Rankkraft - pagina "Over ons"
   ==========================================================================
   Alleen het eigene; tokens, knoppen, .rijs, .kantel en .gloed komen uit
   basis.css. Drie plekken met diepte en verder niets, want deze pagina moet
   snelheid verkopen en niet tegenspreken:
   1. de naamplaat, die de ontbrekende portretfoto vervangt door typografie en
      onder de aanwijzer kantelt (.kantel);
   2. de principeblokken, die na elkaar opkomen (.rijs, oplopende --i) en breed
      als een trap weglopen, met een oplichtende rand (.gloed);
   3. de tijdlijn, waarvan het SVG-pad zichzelf tekent bij het scrollen.
   Alle drie kosten nul verzoeken en zetten alleen transform en opacity.
   ========================================================================== */

/* == Kop ==
   isolation:isolate maakt een eigen stapelcontext, zodat de waas op z-index:-1
   achter de tekst blijft en niet achter de pagina zakt. */
.ov-kop{position:relative;isolation:isolate;padding-top:clamp(3rem,8vh,5.5rem)}
.ov-waas{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

/* Laag 1, ver weg: piek .14 accent. Hoger zakt de introtekst in --tekst-zacht
   richting de norm; op .14 meet die 6,97:1. */
.ov-waas::before{
  content:"";position:absolute;top:-18%;left:-12%;
  width:min(64rem,116%);height:min(38rem,86%);
  background:radial-gradient(48% 54% at 34% 42%,var(--accent-waas),transparent 72%);
}
/* Laag 2, dichtbij: haarlijnen als op een technische tekening. Eén gradient,
   geen bestand; het masker lost hem naar rechtsonder op. Versiering (1,1:1). */
.ov-waas::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(232,237,242,.06) 0 1px,transparent 1px 3.5rem);
  -webkit-mask:linear-gradient(158deg,#000 4%,transparent 64%);
          mask:linear-gradient(158deg,#000 4%,transparent 64%);
}
.ov-kop h1{max-width:15ch}
/* Regelbreuk alleen breed; onder 700px zou hij midden in de zin breken. De
   spatie erachter blijft staan zodra de breuk verdwijnt. */
.ov-breek{display:none}
@media(min-width:700px){.ov-breek{display:inline}}
.ov-kop .inleiding{margin-top:1.5rem}

/* == Ons verhaal ==
   Onder 940px staat de plaat boven het verhaal, daarboven ernaast en blijvend
   staan terwijl het verhaal langsloopt, want dat doet een portret ook. */
.ov-verhaal{display:grid;gap:clamp(2rem,5vw,3rem)}
@media(min-width:940px){
  .ov-verhaal{grid-template-columns:minmax(0,21rem) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .ov-plaat{position:sticky;top:5.5rem}
}

/* Geen foto van Berat, dus de naam zelf is het beeld: een staand vlak met de
   verhoudingen van een portret. Structuur zit in achtergrondlagen en niet in
   een ::before, want .kantel gebruikt ::after al; position:relative en
   border-radius staan hier omdat .kantel ze nodig heeft. Volglicht lokaal .14
   naar .07: met de standaardwaas haalt het bijschrift in --tekst-zacht 4,2:1
   op het lichtste punt, met .07 blijft het 5,3:1. */
.ov-plaat{
  --accent-waas:rgba(94,230,196,.07);
  position:relative;overflow:hidden;margin:0;
  display:flex;flex-direction:column;
  min-height:clamp(18rem,58vw,22rem);
  padding:clamp(1.5rem,4.5vw,2.125rem);
  border:1px solid var(--lijn);
  border-radius:clamp(14px,2.2vw,22px);
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  background:
    radial-gradient(118% 88% at 14% 0%,rgba(94,230,196,.11),transparent 58%),
    linear-gradient(rgba(232,237,242,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(232,237,242,.045) 1px,transparent 1px),
    linear-gradient(166deg,var(--vlak-op),#0D1117);
  background-size:auto,2.25rem 2.25rem,2.25rem 2.25rem,auto;
}
/* Merkteken als watermerk in de hoek met de kortste regels; op .11 dekking
   blijft de tekst eronder ruim boven de norm. */
.ov-plaat-teken{
  position:absolute;bottom:-2.5rem;right:-2.5rem;
  width:10.5rem;height:10.5rem;color:var(--accent);opacity:.11;pointer-events:none;
}
.ov-naam{
  position:relative;margin:0;font-family:var(--kop);font-weight:700;
  font-size:clamp(1.875rem,1.1rem + 2.6vw,2.625rem);
  line-height:.98;letter-spacing:-.035em;
}
.ov-naam span{display:block}
.ov-naam-2{color:var(--accent)}
/* De functie staat waar bij een foto het onderschrift zou staan; margin-top:
   auto duwt het bijschrift naar de onderrand van de plaat. */
.ov-rol{
  position:relative;margin:.875rem 0 0;font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-zacht);
}
.ov-plaat figcaption{position:relative;margin-top:auto;padding-top:1.25rem}
.ov-feiten{
  margin:0;padding-top:1.25rem;border-top:1px solid var(--lijn-op);
  display:grid;gap:.5rem;font-size:.875rem;
}
.ov-feiten>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.ov-feiten dt{color:var(--tekst-zacht)}
.ov-feiten dd{margin:0;color:var(--tekst);font-weight:600}

.ov-tekst h2{margin-bottom:1.5rem}
.ov-tekst p{color:var(--tekst-zacht);max-width:62ch}
/* De eerste alinea draagt het meeste gewicht: volle kleur, iets groter. */
.ov-eerste{color:var(--tekst);font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)}
/* De zin waar het verhaal om draait, staat er ook als draaipunt bij. Geen
   citaat maar een accent, dus een streep en geen aanhalingstekens. */
.ov-keer{
  margin-block:1.75rem;padding-left:1.125rem;border-left:2px solid var(--accent);
  color:var(--tekst);font-family:var(--kop);font-weight:600;
  font-size:clamp(1.125rem,1rem + .6vw,1.375rem);
  line-height:1.28;letter-spacing:-.02em;
}
.ov-keer strong{font-weight:inherit}

/* 46ch: een sectiekop wordt zo nooit één lange regel op 1440px. */
.ov-koptekst{margin-bottom:clamp(2rem,5vw,3rem);max-width:46ch}

/* == Waar we voor staan ==
   Gloed-patroon uit het fundament: buitenlaag doorzichtig en 1px dik, binnenlaag
   draagt de vulling. Anders schildert de gloed over de vulling heen en wordt
   het een vlek in plaats van een rand. */
.ov-waarden{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.ov-waarde{border-radius:clamp(14px,2vw,20px);padding:1px;background:none}
.ov-waarde-in{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1rem clamp(1rem,3vw,1.5rem);align-items:start;
  padding:clamp(1.25rem,4vw,1.75rem);
  background:var(--vlak);border:1px solid var(--lijn);
  border-radius:calc(clamp(14px,2vw,20px) - 1px);
}
/* De trap, pas vanaf 1000px: daaronder eet de verspringing de leesbreedte op.
   Breedte plus grootste verspringing blijft binnen --breed (op 1000px: 768+120
   = 888px tegen 952px), dus nooit horizontaal scrollen. */
@media(min-width:1000px){
  .ov-waarde{width:min(48rem,100%)}
  .ov-waarde:nth-child(2){margin-inline-start:clamp(0px,4vw,4rem)}
  .ov-waarde:nth-child(3){margin-inline-start:clamp(0px,8vw,8rem)}
  .ov-waarde:nth-child(4){margin-inline-start:clamp(0px,12vw,12rem)}
}
@media (hover:hover) and (pointer:fine){
  .ov-waarde-in{transition:border-color var(--snel) ease,background-color var(--snel) ease}
  .ov-waarde:hover .ov-waarde-in{border-color:var(--lijn-op);background:var(--vlak-op)}
}
.ov-teken{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:var(--rond-klein);color:var(--accent);
  background:var(--accent-waas);border:1px solid rgba(94,230,196,.28);
}
.ov-teken svg{width:1.375rem;height:1.375rem}
.ov-waarde h3{margin-bottom:.5rem}
.ov-waarde p{margin:0;color:var(--tekst-zacht)}

/* == Mobile-first. Het kolomraster in de achtergrond is het beeld van een
   ontwerp dat bij het kleinste scherm begint. Weer een laag, geen element. == */
.ov-mobiel{
  padding:clamp(1.75rem,5vw,3rem);
  border:1px solid var(--lijn);border-radius:clamp(14px,2.2vw,22px);
  background:
    radial-gradient(88% 118% at 8% 0%,rgba(94,230,196,.10),transparent 60%),
    repeating-linear-gradient(90deg,rgba(232,237,242,.05) 0 1px,transparent 1px 3.5rem),
    var(--vlak);
}
.ov-mobiel-tekst{max-width:60ch}
.ov-mobiel h2{margin-bottom:1rem}
.ov-mobiel p{margin:0;color:var(--tekst-zacht)}
.ov-mobiel em{font-style:normal;color:var(--accent)}
/* Definitielijst en geen kaartjes: eigenschap plus waarde is dt en dd. */
.ov-specs{display:grid;gap:.75rem;margin:clamp(1.75rem,4vw,2.5rem) 0 0}
@media(min-width:600px){.ov-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ov-specs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ov-spec{
  padding:.9375rem 1.0625rem;border-radius:var(--rond-klein);
  background:rgba(232,237,242,.05);border:1px solid var(--lijn);
}
.ov-spec dt{font-family:var(--kop);font-weight:600;letter-spacing:-.01em}
.ov-spec dd{margin:.25rem 0 0;font-size:.8125rem;color:var(--tekst-zacht)}

/* == Onze aanpak ==
   Rail even breed als de viewBox (44): horizontale schaal exact 1, dus de streek
   blijft 2px terwijl het pad verticaal meerekt (preserveAspectRatio="none").
   height:100% en niet top+bottom: bij height:auto wint de viewBox-hoogte van de
   svg en steekt de lijn onder de laatste stap uit. */
.ov-tijdlijn{position:relative}
.ov-rail{
  position:absolute;top:0;left:0;width:44px;height:100%;
  -webkit-mask:linear-gradient(180deg,#000 90%,transparent 100%);
          mask:linear-gradient(180deg,#000 90%,transparent 100%);
}
/* Het stille spoor is versiering (1,9:1): de volgorde staat al in de <ol> en de
   cijfers. De lijn erover haalt 12,7:1 op --grond. */
.ov-spoor{stroke:rgba(232,237,242,.24);stroke-width:2}
.ov-lijn{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
/* Zonder JavaScript wordt nergens een dasharray gezet en staat de lijn er dus
   helemaal. Draait het script wel, dan blijft hij verborgen tot de eerste
   meting binnen is, anders flitst hij één beeldje vol in beeld. */
html.js .ov-lijn:not(.gemeten){opacity:0}

/* Geen oplopende --i op de stappen: ze staan onder elkaar en komen dus al na
   elkaar in beeld. Vertraging bovenop het scrollen komt alleen te laat. */
.ov-stappen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.75rem,4.5vw,2.75rem)}
.ov-stap{display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:clamp(1rem,3vw,1.5rem);align-items:start}
/* position:relative is hier stapelvolgorde en geen opmaak: de absoluut
   geplaatste rail zou anders over de schijven heen tekenen. Nu staan ze in
   dezelfde laag en wint de schijf op DOM-volgorde. */
.ov-nr{
  position:relative;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--grond);border:1px solid var(--lijn-op);
  color:var(--accent);font-family:var(--kop);font-weight:700;font-size:1.0625rem;
}
.ov-stap-tekst{padding-top:.5rem;max-width:56ch}
.ov-stap-tekst h3{margin-bottom:.4375rem}
.ov-stap-tekst p{margin:0;color:var(--tekst-zacht)}

/* == Oproep. Warm accent, want dit is het enige dat om een handeling vraagt;
   overal elders blijft het palet koel. == */
.ov-slot{
  text-align:center;border-radius:clamp(14px,2.2vw,22px);
  padding:clamp(2rem,6vw,3.5rem) clamp(1.5rem,5vw,3rem);
  border:1px solid var(--lijn);
  background:radial-gradient(78% 128% at 50% 0%,rgba(255,138,76,.13),transparent 62%),var(--vlak);
}
.ov-slot p{margin:1rem auto 1.75rem;max-width:52ch;color:var(--tekst-zacht)}
.ov-slot-knoppen{display:flex;flex-wrap:wrap;gap:.875rem;justify-content:center}
/* De lijnknop erft uit basis.css een rand van rgba(232,237,242,.22). Die meet
   op dit oranje getinte vlak 1,9:1, en de rand van een bedieningselement moet
   3:1 halen. Opgetrokken naar .40: 3,3:1. */
.ov-slot .knop-lijn{border-color:rgba(232,237,242,.4)}
.ov-slot .knop-lijn:hover{border-color:var(--tekst)}

/* == Rustige weergave. Twee keer opgeschreven en niet samengevoegd tot één
   selectorlijst, net als in basis.css: een browser die de media-query niet kent
   zou anders ook de klasse-variant weggooien. == */
@media(prefers-reduced-motion:reduce){
  html.js .ov-lijn{opacity:1;stroke-dasharray:none;stroke-dashoffset:0}
  .ov-waarde-in{transition:none}
}
html.rustig .ov-lijn{opacity:1;stroke-dasharray:none;stroke-dashoffset:0}
html.rustig .ov-waarde-in{transition:none}