/* ==========================================================================
   JonaPhone - huisstijl
   Kleuren overgenomen van de Wix-site: zwart, wit en geel #ffd017
   ========================================================================== */

:root{
  --geel:#ffd017;
  --geel-donker:#e6ba00;
  --zwart:#0d0d0d;
  --zwart-zacht:#1a1a1a;
  --grijs-900:#212121;
  --grijs-600:#5f6360;
  --grijs-400:#8f8f8f;
  --grijs-200:#e2e2e2;
  --grijs-100:#f4f4f4;
  --wit:#ffffff;
  --rood:#df3131;

  --max:1140px;
  --radius:14px;
  --radius-s:8px;
  --schaduw:0 4px 24px rgba(0,0,0,.10);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--grijs-900);background:var(--wit);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{
  margin:0 0 .5em;line-height:1.12;font-weight:800;
  letter-spacing:-.02em;color:var(--zwart);
}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.1em}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
.sectie{padding:72px 0}
.sectie--smal{padding:52px 0}
.sectie--grijs{background:var(--grijs-100)}
.sectie--zwart{background:var(--zwart);color:#d8d8d8}
.sectie--zwart h2,.sectie--zwart h3{color:var(--wit)}

.kop{text-align:center;max-width:660px;margin:0 auto 44px}
.kop p{color:var(--grijs-600);font-size:1.05rem;margin:0}
.sectie--zwart .kop p{color:var(--grijs-400)}

.oplabel{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grijs-600);margin-bottom:.7em;
}
.sectie--zwart .oplabel{color:var(--geel)}

/* --- Skip-link (toegankelijkheid) --- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--geel);color:var(--zwart);padding:12px 20px;font-weight:700;
}
.skip:focus{left:0}

/* --- Knoppen --- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:15px 28px;border-radius:var(--radius-s);border:2px solid transparent;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background .15s ease,color .15s ease;
  line-height:1.2;text-align:center;
}
.knop:active{transform:translateY(1px)}
.knop--geel{background:var(--geel);color:var(--zwart)}
.knop--geel:hover{background:var(--geel-donker)}
.knop--zwart{background:var(--zwart);color:var(--wit)}
.knop--zwart:hover{background:var(--zwart-zacht)}
.knop--lijn{background:transparent;color:var(--zwart);border-color:var(--zwart)}
.knop--lijn:hover{background:var(--zwart);color:var(--wit)}
.knop--lijn-wit{background:transparent;color:var(--wit);border-color:rgba(255,255,255,.5)}
.knop--lijn-wit:hover{background:var(--wit);color:var(--zwart)}
.knop--groot{padding:18px 34px;font-size:1.08rem}

/* --- Kopbalk --- */
.kopbalk{
  position:sticky;top:0;z-index:100;background:var(--zwart);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kopbalk__in{display:flex;align-items:center;gap:24px;height:70px}
.kopbalk__logo img{height:34px;width:auto}
.kopbalk nav{margin-left:auto;display:flex;align-items:center;gap:28px}
/* :not(.knop) - anders overschrijft deze regel de zwarte tekst van de gele knop,
   waardoor "Start uw reparatie" wit op geel wordt en onleesbaar is. */
.kopbalk nav a:not(.knop){
  color:#e8e8e8;text-decoration:none;font-weight:600;font-size:.97rem;
  padding:6px 0;border-bottom:2px solid transparent;
}
.kopbalk nav a:not(.knop):hover,
.kopbalk nav a:not(.knop)[aria-current="page"]{color:var(--geel);border-color:var(--geel)}
.kopbalk .knop{padding:11px 20px;font-size:.93rem;color:var(--zwart)}
/* De knop staat twee keer in de kopbalk: een binnen het menu (voor als dat op
   een gsm uitklapt) en een ernaast (voor een breed scherm). Precies een van de
   twee hoort zichtbaar te zijn - anders staat er twee keer "Bel ons" naast
   elkaar, zoals op de brede schermafbeelding van 02-09-2026. */
.kopbalk nav .knop{display:none}

.menuknop{
  display:none;margin-left:auto;background:none;border:0;color:var(--wit);
  font-size:1.7rem;line-height:1;cursor:pointer;padding:6px 10px;
}

/* --- Hero --- */
.hero{background:var(--zwart);color:var(--wit);padding:76px 0 84px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;
  background:var(--geel);opacity:.07;border-radius:50%;pointer-events:none;
}
.hero__in{position:relative;z-index:1;max-width:760px}
.hero h1{color:var(--wit);margin-bottom:.35em}
.hero h1 span{color:var(--geel)}
.hero__lead{font-size:1.2rem;color:#c9c9c9;max-width:560px;margin-bottom:2em}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:14px}

/* --- Hero met foto over de volle breedte --- */
.hero--foto{padding:0}
.hero--foto::after{display:none}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
/* Donkere sluier zodat de witte tekst leesbaar blijft op de foto */
.hero__sluier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(13,13,13,.94) 0%,
    rgba(13,13,13,.86) 38%,
    rgba(13,13,13,.55) 66%,
    rgba(13,13,13,.35) 100%);
}
.hero--foto .hero__in{
  position:relative;z-index:2;
  padding-top:96px;padding-bottom:104px;
}

@media(max-width:820px){
  .hero__media img{object-position:60% 28%}
  .hero__sluier{
    background:linear-gradient(180deg,
      rgba(13,13,13,.80) 0%,
      rgba(13,13,13,.88) 45%,
      rgba(13,13,13,.95) 100%);
  }
  .hero--foto .hero__in{padding-top:60px;padding-bottom:64px}
}

/* --- Vertrouwensbalk --- */
.vertrouwen{background:var(--geel);color:var(--zwart)}
.vertrouwen__in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:22px 0;text-align:center;
}
.vertrouwen b{display:block;font-size:1.32rem;font-weight:900;letter-spacing:-.02em}
.vertrouwen span{font-size:.87rem;font-weight:600;opacity:.78}

/* --- Kaarten --- */
.raster{display:grid;gap:22px}
.raster--3{grid-template-columns:repeat(3,1fr)}
.raster--4{grid-template-columns:repeat(4,1fr)}
.raster--2{grid-template-columns:repeat(2,1fr)}

.kaart{
  background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:28px;transition:box-shadow .18s ease,transform .18s ease;
}
.kaart:hover{box-shadow:var(--schaduw);transform:translateY(-3px)}
.kaart h3{margin-bottom:.4em}
.kaart p{color:var(--grijs-600);font-size:.97rem;margin:0}
.kaart__icoon{
  width:52px;height:52px;border-radius:12px;background:var(--geel);
  display:grid;place-items:center;margin-bottom:18px;font-size:1.5rem;
}

/* --- Stappen --- */
.stap{position:relative;padding-left:70px}
.stap__nr{
  position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;
  background:var(--geel);color:var(--zwart);display:grid;place-items:center;
  font-weight:900;font-size:1.25rem;
}
.stap h3{margin-bottom:.3em}
.stap p{color:var(--grijs-600);font-size:.97rem;margin:0}
.sectie--zwart .stap p{color:var(--grijs-400)}

/* --- Merken ---
   Elk logo krijgt een even groot vak met object-fit:contain. Zonder dat vak
   oogt Apple (hoog en smal) veel kleiner dan Sony (breed en laag), ook al
   hebben ze dezelfde hoogte. */
.merken{display:flex;flex-wrap:wrap;gap:26px 44px;justify-content:center;align-items:center}
.merken img{
  height:60px;width:130px;object-fit:contain;
  opacity:.55;filter:grayscale(1);
  transition:opacity .2s ease,filter .2s ease,transform .2s ease;
}
.merken img:hover{opacity:1;filter:none;transform:scale(1.06)}

@media(max-width:720px){
  .merken{gap:18px 24px}
  .merken img{height:44px;width:88px}
}

/* --- Openingsuren --- */
.uren{list-style:none;margin:0;padding:0}
.uren li{
  display:flex;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.uren li:last-child{border-bottom:0}
.uren b{color:var(--wit);font-weight:700}
.uren span{color:var(--geel);font-variant-numeric:tabular-nums;font-weight:600}

.melding{
  background:var(--geel);color:var(--zwart);border-radius:var(--radius-s);
  padding:16px 20px;font-weight:700;display:flex;gap:12px;align-items:flex-start;
}
.melding--rood{background:#fdecec;color:#8f1f1f;border-left:4px solid var(--rood)}

/* --- Contactblok --- */
.contactlijst{list-style:none;margin:0;padding:0}
.contactlijst li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contactlijst a{color:var(--geel);text-decoration:none;font-weight:700}
.contactlijst a:hover{text-decoration:underline}
.contactlijst .lbl{display:block;font-size:.8rem;color:var(--grijs-400);text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* --- Formulier --- */
.formulier{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.veld{display:flex;flex-direction:column;gap:7px}
.veld--breed{grid-column:1/-1}
.veld label{font-weight:700;font-size:.92rem}
.veld .hint{font-weight:400;color:var(--grijs-600);font-size:.85rem}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:1rem;padding:13px 15px;border:2px solid var(--grijs-200);
  border-radius:var(--radius-s);background:var(--wit);color:var(--grijs-900);
  transition:border-color .15s ease;width:100%;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--geel);box-shadow:0 0 0 3px rgba(255,208,23,.28);
}
.veld textarea{min-height:130px;resize:vertical}
.akkoord{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;grid-column:1/-1}
.akkoord input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--geel)}

/* --- FAQ --- */
.faq details{
  border:1px solid var(--grijs-200);border-radius:var(--radius-s);
  margin-bottom:12px;background:var(--wit);
}
.faq summary{
  cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--geel);font-weight:800;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--grijs-200)}
.faq .antwoord{padding:18px 22px;color:var(--grijs-600)}
.faq .antwoord p:last-child{margin-bottom:0}

/* --- Voetnoot --- */
.voet{background:var(--zwart);color:#9a9a9a;padding:56px 0 24px;font-size:.94rem}
.voet__raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px}
.voet h4{color:var(--wit);font-size:.85rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:1.1em}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin-bottom:10px}
.voet a{color:#9a9a9a;text-decoration:none}
.voet a:hover{color:var(--geel)}
/* width:auto - zonder dit rekt het logo uit, want het width-attribuut
   (214) blijft staan terwijl de hoogte naar 32px gaat. */
.voet__logo img{height:32px;width:auto;margin-bottom:16px}
.voet__slot{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;
}
.sociaal{display:flex;gap:14px;margin-top:16px}
.sociaal a{
  width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:var(--wit);text-decoration:none;font-size:1rem;
}
.sociaal a:hover{background:var(--geel);color:var(--zwart)}

/* --- Mobiele actiebalk --- */
.mobiebalk{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--zwart);border-top:1px solid rgba(255,255,255,.12);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;
}
.mobiebalk .knop{flex:1;padding:14px 10px;font-size:.95rem}

/* --- Inhoudspagina (voorwaarden) --- */
.tekst{max-width:760px}
.tekst h2{margin-top:2em;padding-top:.6em;border-top:3px solid var(--geel);display:inline-block}
.tekst h3{margin-top:1.6em}
.tekst ul{padding-left:1.2em}
.tekst li{margin-bottom:.5em}

/* --- Repender-widget --- */
.widget-kader{
  background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:22px;min-height:420px;
}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media(max-width:900px){
  .raster--4{grid-template-columns:repeat(2,1fr)}
  .raster--3{grid-template-columns:1fr}
  .voet__raster{grid-template-columns:1fr 1fr;gap:30px}
  .vertrouwen__in{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:720px){
  body{font-size:16px;padding-bottom:76px}
  .sectie{padding:52px 0}
  .kopbalk nav{
    display:none;position:absolute;top:70px;left:0;right:0;background:var(--zwart);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .kopbalk nav.open{display:flex}
  .kopbalk nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .kopbalk nav .knop{display:inline-flex;margin-top:14px;border-bottom:0}
  .menuknop{display:block}
  .kopbalk__in>.knop{display:none}
  .raster--2{grid-template-columns:1fr}
  .formulier{grid-template-columns:1fr}
  .hero{padding:52px 0 60px}
  .hero__knoppen .knop{width:100%}
  .mobiebalk{display:flex}
  .voet__raster{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}