/* Steedshire, sitestijl.
   De kleuren komen uit Ontwerp.swift in de app, zodat de site en het scherm dat je daarna
   opent hetzelfde aanvoelen. Licht en donker allebei: een stalhouder die 's avonds op zijn
   telefoon kijkt heeft donker aanstaan. */

:root {
  --doek: #F4F4F1;
  --blad: #FFFFFF;
  --blad-rustig: #FAF9F7;
  --inkt: #17211F;
  --inkt-zacht: #4F5956;   /* iets donkerder dan in de app: op wit haalt dit ruim AA */
  --lijn: #DFDED7;
  --merk: #10302B;
  --accent: #7E5620;       /* donkerder koper, want koper op wit haalde 4,5:1 niet */
  --accent-fel: #9B6B2C;
  --focus: #10302B;
  --straal: 14px;
  --kolom: 44rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --doek: #121513;
    --blad: #1B201D;
    --blad-rustig: #22271F;
    --inkt: #F2F4F1;
    --inkt-zacht: #B4BCB8;
    --lijn: #333830;
    --merk: #9BC7B8;
    --accent: #E0B87A;
    --accent-fel: #D2A469;
    --focus: #9BC7B8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--inkt);
  background: var(--doek);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.omhulsel { max-width: var(--kolom); margin: 0 auto; padding: 0 1.5rem; }

/* Zichtbaar zodra hij focus krijgt, daarvoor uit beeld. Niet display:none, want dan slaat
   het toetsenbord hem over en is hij nutteloos. */
.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--merk); color: var(--doek);
  padding: .7rem 1rem; border-radius: 0 0 var(--straal) 0; z-index: 10;
}
.overslaan:focus { left: 0; }

.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.kopbalk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.merknaam {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; letter-spacing: -.01em; color: var(--merk);
  text-decoration: none; font-size: 1.05rem;
}
.merknaam img { border-radius: 7px; display: block; }
.merknaam:hover span { text-decoration: underline; }

/* De taalschakelaar. Een link en geen knop, want hij gaat naar een ander adres; dat werkt
   ook met JavaScript uit en is te openen in een nieuw tabblad. */
.taalknop {
  display: inline-block;
  font-size: .92rem; font-weight: 500;
  color: var(--inkt); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 999px;
  padding: .45rem 1rem; min-height: 44px; line-height: 1.9;
  background: var(--blad);
}
.taalknop:hover { border-color: var(--merk); color: var(--merk); }

h1 { font-size: clamp(2rem, 6vw, 2.9rem); line-height: 1.14; letter-spacing: -.022em; margin: 1.5rem 0 1rem; }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em; margin: 0 0 .85rem; }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
p { margin: 0 0 1.1rem; }

main > section { margin: 3.25rem 0; }
main > section:first-of-type { margin-top: 1rem; }

.hero { margin-bottom: 3.5rem; }
.leiding { font-size: 1.16rem; color: var(--inkt-zacht); max-width: 34rem; }
.stil { color: var(--inkt-zacht); font-size: .93rem; }

.acties { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 1rem; }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.4rem;
  background: var(--merk); color: var(--doek);
  border-radius: 999px; text-decoration: none; font-weight: 550;
  border: 1px solid var(--merk);
  transition: transform .12s ease, opacity .12s ease;
}
.knop:hover { opacity: .9; transform: translateY(-1px); }
.knop:active { transform: translateY(0); }
.knop.tweede { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop.tweede:hover { border-color: var(--merk); color: var(--merk); opacity: 1; }

.kaarten {
  list-style: none; margin: 1.6rem 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kaart {
  background: var(--blad); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 1.3rem 1.35rem;
}
.kaart p { margin: 0; color: var(--inkt-zacht); font-size: .96rem; }
.kaart h3 + p { margin-top: .1rem; }

.prijs { margin: .2rem 0 .5rem !important; color: var(--inkt) !important; }
.bedrag { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.per { font-size: .92rem; color: var(--inkt-zacht); }

/* De vragen als details, zodat ze zonder JavaScript open en dicht gaan en het toetsenbord
   ze vanzelf kan bedienen. */
.vraag {
  border: 1px solid var(--lijn); border-radius: var(--straal);
  background: var(--blad); margin-bottom: .6rem;
}
.vraag summary {
  cursor: pointer; list-style: none;
  padding: .95rem 1.2rem; min-height: 48px;
  font-weight: 550; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem;
  border-right: 2px solid var(--inkt-zacht); border-bottom: 2px solid var(--inkt-zacht);
  transform: rotate(45deg); transition: transform .18s ease; margin-top: -.2rem;
}
.vraag[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.vraag[open] summary { border-bottom: 1px solid var(--lijn); }
.antwoord { padding: .95rem 1.2rem .3rem; }
.antwoord p { color: var(--inkt-zacht); }

.punten { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.punten li { margin-bottom: .5rem; }

/* De zakelijke gegevens op de privacypagina: opschrift links, waarde rechts. Op een smal
   scherm valt de kolomindeling weg, want een KvK-nummer dat over twee regels breekt naast
   een afgekapt opschrift leest slechter dan twee gewone regels onder elkaar. */
.zakelijk { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.1rem; margin: 1rem 0 1.5rem; font-size: .95rem; }
.zakelijk dt { color: var(--inkt-zacht); }
.zakelijk dd { margin: 0; }
@media (max-width: 30rem) {
  .zakelijk { display: block; }
  .zakelijk dt { margin-top: .6rem; }
}

.slot {
  background: var(--blad-rustig); border: 1px solid var(--lijn);
  border-radius: var(--straal); padding: 1.75rem 1.5rem .9rem;
}
.slot h2 { margin-top: 0; }

a { color: var(--accent); }
a:hover { color: var(--accent-fel); }
.verder { font-weight: 550; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Een ring die overal zichtbaar is, ook op donkere knoppen. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

footer {
  border-top: 1px solid var(--lijn); margin-top: 4.5rem;
  padding-top: 2rem; padding-bottom: 3.5rem;
  color: var(--inkt-zacht); font-size: .92rem;
}
footer a { color: var(--inkt-zacht); }
footer a:hover { color: var(--accent); }
footer p { margin-bottom: .5rem; }

.rol { overflow-x: auto; margin: 1rem 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 22rem; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media (max-width: 30rem) {
  .omhulsel { padding: 0 1.15rem; }
  .acties .knop { width: 100%; }
}

/* Aantikbaar met een handschoen aan.
   Losse links waren twintig pixels hoog. Dat haalt de norm wel, die vraagt vierentwintig,
   maar een stalhouder bedient dit met koude vingers naast een paard, dus staan ze hier
   ruimer. Inline-block met padding in plaats van marge, zodat de regel niet gaat springen. */
.verder, footer a {
  display: inline-block;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.verder { padding-right: .2rem; }
footer p { margin-bottom: .1rem; }
/* De merknaam houdt zijn inline-flex, anders valt het pictogram boven de tekst in plaats
   van ernaast. Alleen ruimte eromheen, geen ander display. */
.merknaam { padding-top: .4rem; padding-bottom: .4rem; }

/* Het aanmeldformulier. */
.aanmeldformulier { margin: 1.5rem 0 1.25rem; }
.veld { margin-bottom: .9rem; }
.veld label {
  display: block; font-weight: 550; font-size: .95rem;
  margin-bottom: .4rem; color: var(--inkt);
}
.veld input {
  width: 100%; min-height: 48px;
  padding: .7rem .9rem;
  font: inherit; color: var(--inkt);
  background: var(--blad);
  border: 1px solid var(--lijn); border-radius: 10px;
}
.veld input::placeholder { color: var(--inkt-zacht); opacity: .75; }
.veld input:hover { border-color: var(--inkt-zacht); }
.veld input:focus { border-color: var(--merk); }

/* De browser markeert een ongeldig adres pas nadat er iets is ingevuld en het veld is
   verlaten. Zonder :not(:placeholder-shown) zou een leeg veld meteen rood zijn, en dan
   staat er een fout voordat iemand iets fout heeft gedaan. */
.veld input:invalid:not(:placeholder-shown) { border-color: var(--alarm, #8D4630); }

.aanmeldformulier .knop { width: 100%; }
@media (min-width: 30rem) { .aanmeldformulier .knop { width: auto; min-width: 14rem; } }

.foutmelding {
  border-left: 3px solid #8D4630;
  background: rgba(141, 70, 48, .07);
  padding: .75rem .9rem; border-radius: 0 8px 8px 0;
  margin: 1rem 0 0; font-size: .95rem;
}
@media (prefers-color-scheme: dark) {
  .foutmelding { border-left-color: #E2937A; background: rgba(226, 147, 122, .1); }
}

/* Het lokkertje. Buiten beeld in plaats van display:none, want sommige bots slaan
   verborgen velden over en vullen dit dan juist wel in. */
.lokkertje {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* De stappen van TestFlight. Genummerd, want de volgorde is het hele punt: wie de link
   opent zonder TestFlight geïnstalleerd te hebben krijgt een pagina die hem terugstuurt. */
.stappen { margin: 1rem 0 1.25rem; padding-left: 1.3rem; }
.stappen li { margin-bottom: .55rem; }
.test { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------
   De startpagina met beeld. Vastgelegd 17 september 2026.
   Newsreader voor de koppen en Inter voor de tekst, dezelfde letters als op rosrijk.app,
   zodat de twee sites familie zijn. De kleuren blijven die van Steedshire: het diepe
   groen en de inkt uit de app, koper als accent. Geen crème.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/fonts/newsreader-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter.woff2") format("woff2");
}
:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --breed: 68rem;
  --koper-licht: #E0B87A;
  --nacht: #0B100D;
}
body { font-family: var(--sans); }
h1, h2, .toneel h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 60;
}
.omhulsel-breed { max-width: var(--breed); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }

/* De kopbalk over het beeld: wit, zonder achtergrond, met een schaduw zodat hij ook op
   een lichte plek in de foto leesbaar blijft. */
.kopbalk.boven-beeld {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.kopbalk.boven-beeld .merknaam { color: #fff; text-shadow: 0 .1rem .8rem rgba(0,0,0,.7); }
.kopbalk.boven-beeld .taalknop {
  color: #fff; background: rgba(11,16,13,.45); border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem);
}
.kopbalk.boven-beeld .taalknop:hover { border-color: #fff; color: #fff; }

/* De opening. De foto vult het scherm, de tekst staat onderin links, precies waar het
   oog na de stalgang landt. */
.opening {
  position: relative; min-height: 100svh; min-height: 100vh;
  display: flex; align-items: flex-end;
  background: var(--nacht); color: #fff; overflow: hidden; isolation: isolate;
}
.opening-beeld, .opening-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
.opening-beeld img { object-fit: cover; object-position: center 40%; display: block; }
.opening-sluier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(11,16,13,.86) 0%, rgba(11,16,13,.35) 45%, rgba(11,16,13,.15) 100%),
    linear-gradient(90deg, rgba(11,16,13,.55) 0%, rgba(11,16,13,0) 60%);
}
.opening-tekst {
  position: relative; z-index: 2; width: 100%;
  padding-top: 7rem; padding-bottom: clamp(3rem, 9vh, 6rem);
}
.opening h1 {
  color: #fff; max-width: 12em;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .98; margin: .6rem 0 1.1rem;
  text-shadow: 0 .12rem 1.2rem rgba(0,0,0,.6); text-wrap: balance;
}
.opening .leiding { color: rgba(255,255,255,.9); max-width: 34rem; text-shadow: 0 .1rem .8rem rgba(0,0,0,.7); }
.oogje {
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--koper-licht); margin: 0 0 .6rem;
}
.opening .oogje { text-shadow: 0 .1rem .6rem rgba(0,0,0,.7); }
.stil-licht { color: rgba(255,255,255,.72); font-size: .93rem; margin: 0; }
.stil-licht a { color: #fff; }
.knop.licht { background: #fff; color: var(--nacht); border-color: #fff; }
.knop.licht:hover { opacity: .92; }
.knop.omlijnd {
  background: rgba(11,16,13,.35); color: #fff; border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(.6rem); -webkit-backdrop-filter: blur(.6rem);
}
.knop.omlijnd:hover { border-color: #fff; color: #fff; opacity: 1; }
.verder.licht { color: #fff; }
.verder.licht:hover { color: var(--koper-licht); }

/* Vier tonelen, om en om tekst en telefoon. */
.sectiekop { max-width: 40rem; margin: 0 0 1.5rem; }
.sectiekop h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; margin: 0 0 .8rem; }
.werk-toneel { padding-top: clamp(4rem, 9vh, 6.5rem); }
.toneel {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(2rem, 6vh, 4rem) 0;
  border-top: 1px solid var(--lijn);
}
.toneel:first-of-type { border-top: 0; }
.toneel.links .toneel-tekst { order: 2; }
.toneel.links .telefoon { order: 1; justify-self: end; }
.toneel.rechts .telefoon { justify-self: start; }
.toneel h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; margin: 0 0 .7rem; }
.toneel p { color: var(--inkt-zacht); max-width: 30rem; }
.toneel .oogje { color: var(--accent); }

/* Het toestel: een donkere rand met een ronde hoek, meer niet. De schermafbeelding is
   1320 bij 2868 en houdt zijn verhouding. */
.telefoon {
  margin: 0; width: min(19rem, 72vw);
  padding: .55rem; border-radius: 2.6rem; background: #111;
  box-shadow: 0 1.6rem 3rem rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);
}
.telefoon img { display: block; width: 100%; height: auto; border-radius: 2.1rem; }

/* Een band: foto over de volle breedte, tekst erop. Altijd donker, ook overdag. */
.band {
  position: relative; color: #fff; background: var(--nacht);
  padding: clamp(4rem, 12vh, 8rem) 0; overflow: hidden; isolation: isolate;
  margin: clamp(3rem, 8vh, 5rem) 0;
}
.band-beeld, .band-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-beeld img { object-fit: cover; display: block; }
.band-sluier { position: absolute; inset: 0; z-index: 1; background: rgba(11,16,13,.72); }
.band-tekst { position: relative; z-index: 2; max-width: var(--breed); }
.band-tekst h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; max-width: 14em; }
.band-tekst p { max-width: 38rem; color: rgba(255,255,255,.86); }
.band-tekst .acties { margin-top: 1.2rem; }
.slotband { margin-bottom: 0; }
.slotband .band-sluier { background: rgba(11,16,13,.78); }

.prijskaarten { margin-top: 1.25rem; }
.vragenblok { margin: clamp(3rem, 8vh, 5rem) auto; }
.vragenblok h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }

main > section { margin: 0; }
footer { margin-top: 0; }

@media (max-width: 700px) {
  .toneel { grid-template-columns: 1fr; gap: 1.5rem; }
  .toneel.links .toneel-tekst { order: 1; }
  .toneel.links .telefoon, .toneel.rechts .telefoon { order: 2; justify-self: center; }
  .opening-sluier { background: linear-gradient(0deg, rgba(11,16,13,.92) 0%, rgba(11,16,13,.3) 60%, rgba(11,16,13,.2) 100%); }
  .opening .acties .knop { width: 100%; }
}
@media (prefers-color-scheme: dark) {
  .telefoon { box-shadow: 0 1.6rem 3rem rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
}

/* QR-code voor wie de pagina op een computer leest. Een manege-eigenaar leest de mail vaak
   achter de laptop, en daar leidt de App Store-knop naar een pagina zonder installatieweg.
   Alleen zichtbaar op een breed scherm met een muis; op een telefoon is de knop genoeg. */
.qr-blok { display: none; }
@media (min-width: 56rem) and (hover: hover) and (pointer: fine) {
  .qr-blok { display: flex; align-items: center; gap: 1.2rem; margin: .4rem 0 1.4rem; max-width: 34rem; }
  .qr-blok img { background: #fff; border-radius: 10px; padding: 8px; flex: none; }
  .qr-blok p { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0; }
}