/* stijl-2026.css: gedeelde basis van de nieuwe stijl (stijl C, november 2026).
   Wordt als LAATSTE stijlbestand geladen op elke pagina die is omgezet (niet op de homepage: die heeft home-2026.css).
   Bevat alleen de afspraken die voor elke pagina gelden. Opmaak per pagina staat in een eigen bestand. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,600&display=swap");
@import url("/css/voet-2026.css?v=20261114a");

:root{
  --s26-oranje:#E25322;        /* alleen de hoofdknop, het accent in een titel, pijltjes en dunne lijntjes */
  --s26-oranje-donker:#C9461A; /* hoofdknop bij aanwijzen */
  --s26-grijs:#3A393A;         /* alle tekst, donkere vlakken; nooit zwart */
  --s26-beige:#E9DFD6;         /* het bovenste vak, zachte vakken */
  --s26-beige-licht:#F1EAE3;   /* achtergrond achter witte vakken */
  --s26-warmwit:#F5F4F3;       /* rustige banden, invulvelden */
  --s26-wit:#FFFFFF;
  --s26-lijn:rgba(58,57,58,.14);
  --s26-zacht:rgba(58,57,58,.72); /* bijschriften, uitleg */
  --s26-r:12px;                /* knoppen, velden, kleine vakken */
  --s26-r-groot:22px;          /* kaarten, grote vakken, het bovenste vak */
  --s26-schaduw:0 2px 14px rgba(58,57,58,.06);
  --s26-schaduw-zweef:0 8px 28px rgba(58,57,58,.10);
}

/* Titels: dun en groot; het accentwoord vet, schuin en oranje.
   Gebruik in de opmaak: <h1 class="s26-h1">Vind jouw <em>volgende baan</em></h1> */
.s26-h1{font-weight:300;font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--s26-grijs);text-transform:none}
.s26-titel{font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em;margin:0;color:var(--s26-grijs);text-transform:none}
.s26-h1 em,.s26-titel em{font-style:italic;font-weight:600;color:var(--s26-oranje)}
.s26-streep{width:48px;height:2px;background:var(--s26-oranje);margin:20px 0}
.s26-inleiding{font-weight:300;font-size:20px;line-height:1.55;color:var(--s26-grijs)}
.s26-kopje{font-weight:600;font-size:19px;line-height:1.3;color:var(--s26-grijs)}
.s26-tekst{font-weight:400;font-size:15px;line-height:1.65;color:var(--s26-zacht)}

/* Knoppen en links */
.s26-knop{display:inline-block;background:var(--s26-oranje);color:var(--s26-wit);font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;border:0;border-radius:var(--s26-r);padding:16px 26px;cursor:pointer;text-align:center;text-decoration:none}
.s26-knop:hover{background:var(--s26-oranje-donker);color:var(--s26-wit)}
.s26-link{font-weight:600;font-size:15px;color:var(--s26-grijs);border-bottom:1.5px solid var(--s26-oranje);padding-bottom:3px;text-decoration:none}
.s26-link:hover{color:var(--s26-oranje)}

/* Vakken */
.s26-vak{background:var(--s26-wit);border-radius:var(--s26-r-groot);box-shadow:var(--s26-schaduw)}
.s26-vak-beige{background:var(--s26-beige);border-radius:var(--s26-r-groot)}
.s26-band{background:var(--s26-beige-licht)}

/* De hoek uit het logo: hoogstens een keer per pagina */
.s26-hoek{position:relative}
.s26-hoek::before{content:"";position:absolute;right:-12px;bottom:-12px;width:3px;height:46%;background:var(--s26-grijs)}
.s26-hoek::after{content:"";position:absolute;right:-12px;bottom:-12px;height:3px;width:42%;background:var(--s26-oranje)}
@media (max-width:980px){.s26-hoek::before,.s26-hoek::after{display:none}}