/* ============================================================
   HADIR — LANDINGSPAGINA (hadir.nl / www.iony.nl)
   Hoort bij handoff/landing.html
   Plaats dit bestand als public/css/landing.css en laad het NA app.css:
     <link rel="stylesheet" href="/css/app.css">
     <link rel="stylesheet" href="/css/landing.css">
   Alle kleuren en fonts komen uit de tokens in app.css (:root).
   Alleen wat app.css niet heeft staat hier; niets wordt overschreven.
   ============================================================ */

.lp{
  --lp-paper:#FBF9F5;            /* iets warmer dan --paper: alleen de publieke pagina */
  --lp-line-soft:rgba(31,75,67,0.12);
  --lp-shadow:0 24px 50px -30px rgba(22,35,43,0.30);
  --lp-radius:18px;
  --lp-gutter:32px;
  --lp-max:1200px;
  background:var(--lp-paper); color:var(--ink);
}
.lp a{color:var(--teal); text-decoration:none;}
.lp a:hover{color:var(--teal-dark);}
.lp-wrap{max-width:var(--lp-max); margin:0 auto; padding-inline:var(--lp-gutter);}
.lp-section{padding-top:96px;}

/* ---------- Typografie ---------- */
.lp-eyebrow{margin:0; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal);}
.lp-h1{margin:24px 0 0; font-size:clamp(38px,6vw,64px); line-height:1.03; letter-spacing:-0.03em; font-weight:700;}
/* De zoekterm staat als eerste regel binnen de H1 (SEO), de claim eronder groot. */
.lp-h1 .lp-h1-seo{display:block; max-width:560px; margin-bottom:14px; font-size:17px; font-weight:600; line-height:1.45; letter-spacing:0; color:var(--teal);}
.lp-h2{margin:14px 0 0; font-size:clamp(28px,3.8vw,40px); line-height:1.1; letter-spacing:-0.025em; font-weight:700;}
.lp-h2-groot{font-size:clamp(30px,4.2vw,44px); line-height:1.08;}
.lp-serif{font-family:var(--font-display); font-weight:400; font-style:italic; letter-spacing:-0.005em; color:var(--teal);}
.lp-lead{margin:16px 0 0; max-width:540px; font-size:17.5px; line-height:1.65; color:var(--ink-soft);}
.lp-intro{margin:14px 0 0; max-width:540px; font-size:18px; line-height:1.6; color:var(--ink-soft);}

/* ---------- Header ---------- */
.lp-header{position:sticky; top:0; z-index:50; background:rgba(251,249,245,0.86); backdrop-filter:blur(12px); border-bottom:1px solid rgba(31,75,67,0.10);}
/* De tussenruimte kan niet veel groter: tussen 1120 en 1200px is de balk
   smaller dan zijn max-breedte terwijl de navigatie nog zichtbaar is, en
   dan passen de langste vertalingen ("Seguimiento del alumnado",
   "Schülerverwaltungssystem") er net niet meer naast - de balk klapt dan
   naar drie regels. Bij 40px past alle zes de talen. */
.lp-header-row{display:flex; flex-wrap:wrap; align-items:center; gap:40px; padding-block:14px;}
.lp-logo{flex-shrink:0; display:flex; align-items:center;}
.lp-logo img{height:40px; width:auto; display:block;}
.lp-nav{display:flex; align-items:center; gap:4px;}
.lp-nav a{padding:8px 12px; border-radius:8px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.lp-nav a:hover{background:rgba(31,75,67,0.06); color:var(--teal);}
.lp-nav a.actief{background:rgba(31,75,67,0.10); color:var(--teal);}
.lp-header-acties{margin-left:auto; display:flex; align-items:center; gap:12px;}

/* ---------- Uitklapmenu (onder 1120px) ----------
   De navigatie hierboven verdwijnt op smallere schermen; deze knop vouwt
   dezelfde links uit onder de balk. Zie public/js/publieke-nav.js. */
.lp-menuknop{display:none; flex-direction:column; justify-content:center; gap:4px; width:40px; height:38px; padding:0 9px; border:1px solid rgba(31,75,67,0.18); border-radius:10px; background:#fff; cursor:pointer;}
.lp-menuknop span{display:block; height:2px; border-radius:2px; background:var(--teal); transition:transform .15s, opacity .15s;}
.lp-menuknop.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.lp-menuknop.open span:nth-child(2){opacity:0;}
.lp-menuknop.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.lp-mobielmenu{display:none;}
.lp-mobielmenu a{display:block; padding:12px 14px; border-radius:10px; font-size:15.5px; font-weight:500; color:var(--ink-soft);}
.lp-mobielmenu a:hover{background:rgba(31,75,67,0.06); color:var(--teal);}
.lp-mobielmenu a.actief{background:rgba(31,75,67,0.10); color:var(--teal);}
.lp-taal{appearance:none; padding:7px 13px; border:1px solid rgba(31,75,67,0.18); border-radius:999px; background:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;}

/* Eigen taalmenu met vlaggen. public/js/taalkiezer.js zoekt de keuzelijst op
   id ("taalkiezer") en zet er dit menu voor in de plaats; de <select> zelf
   blijft de bron van waarheid en wordt alleen verborgen. Draait dat script
   niet, dan blijft de kale .lp-taal hierboven gewoon staan en werkt alles nog.
   Deze regels stonden alleen in routes/gedeelde-header.js, die de nieuwe
   landingspagina niet meelaadt - vandaar dat de vlaggen hier verdwenen waren.
   De pilvorm van .lp-taal komt terug, zodat de knop met vlag op dezelfde plek
   hetzelfde oogt. */
.lp .taalkiezer-widget{position:relative; display:inline-block;}
.lp .taalkiezer-knop{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid rgba(31,75,67,0.18); border-radius:999px; background:#fff; font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1.4; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s;}
.lp .taalkiezer-knop:hover{border-color:rgba(31,75,67,0.4); background:var(--paper-raised);}
/* Het randje houdt een lichte vlag (Nederland, Frankrijk) los van de witte pil
   - anders lijkt hij half weggevallen. */
.lp .taalkiezer-vlag{width:20px; height:14px; flex:0 0 auto; display:block; border-radius:2px; box-shadow:0 0 0 1px rgba(22,35,43,0.14);}
.lp .taalkiezer-lijst{position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:184px; padding:5px; border:1px solid var(--lp-line-soft); border-radius:12px; background:#fff; box-shadow:0 10px 26px rgba(22,35,43,0.14); display:none; z-index:60;}
.lp .taalkiezer-widget.open .taalkiezer-lijst{display:block;}
.lp .taalkiezer-optie{display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:8px; text-align:start; font-size:14px; font-weight:500; line-height:1.3; color:var(--ink); cursor:pointer;}
.lp .taalkiezer-optie:hover, .lp .taalkiezer-optie:focus{background:var(--lp-paper); outline:none;}
.lp .taalkiezer-optie[aria-selected="true"]{font-weight:700; color:var(--teal);}

/* ---------- Knoppen ---------- */
.lp-btn{display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border:1px solid transparent; border-radius:12px; font-family:var(--font-body); font-size:16px; font-weight:600; cursor:pointer; white-space:nowrap; width:auto; transition:background .15s, border-color .15s, transform .15s;}
.lp-btn-primair{background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(31,75,67,0.22);}
.lp-btn-primair:hover{background:var(--teal-dark); color:#fff; transform:translateY(-1px);}
.lp-btn-secundair{background:#fff; border-color:rgba(31,75,67,0.18); color:var(--teal);}
.lp-btn-secundair:hover{border-color:rgba(31,75,67,0.4); background:var(--paper-raised);}
.lp-btn-tekst{background:none; border:none; color:var(--teal); padding:15px 18px;}
.lp-btn-tekst:hover{background:rgba(31,75,67,0.07);}
.lp-btn-klein{padding:10px 20px; font-size:14.5px; border-radius:10px; box-shadow:0 1px 2px rgba(22,35,43,0.22);}
/* Een deel van deze knoppen is een <a>, en ".lp a" hierboven is specifieker dan
   ".lp-btn-primair" - zonder deze regels wint teal-op-teal en is de tekst van
   "School aanmelden" onzichtbaar. Vandaar de knopkleuren nog een keer, met de
   a erin zodat ze het van de linkkleur winnen. */
.lp a.lp-btn-primair, .lp a.lp-btn-primair:hover{color:#fff;}
.lp a.lp-btn-secundair, .lp a.lp-btn-secundair:hover,
.lp a.lp-btn-tekst, .lp a.lp-btn-tekst:hover{color:var(--teal);}
.lp-btn-rij{margin:34px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
/* Twee knoppen naast elkaar horen even breed te zijn: "School aanmelden" is
   langer dan "Inloggen", en zonder dit staat er een brede naast een smalle.
   De breedste bepaalt de maat. */
.lp-btn-rij-gelijk .lp-btn{flex:1 1 0; min-width:max-content; justify-content:center;}

/* ---------- Hero ---------- */
.lp-hero{position:relative; overflow:hidden; border-bottom:1px solid rgba(31,75,67,0.10);}
.lp-hero-glow, .lp-hero-raster{position:absolute; inset:0; pointer-events:none;}
.lp-hero-glow{background:
  radial-gradient(1100px 520px at 15% -10%, rgba(31,75,67,0.09), transparent 60%),
  radial-gradient(700px 400px at 100% 0%, rgba(242,174,62,0.14), transparent 65%);}
.lp-hero-raster{opacity:.5;
  background-image:linear-gradient(rgba(31,75,67,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(31,75,67,0.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);}
/* Onderpadding lager dan de 96px van boven: de sectie hieronder brengt zelf al
   96px mee, dus samen was het bijna 200px wit. Dat viel in het ontwerp weg
   achter de vinkjesregel onder de knoppen; die staat er niet meer, en dan is
   het gat te zien. De rand onder de hero scheidt de twee al. */
.lp-hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.95fr); gap:64px; align-items:center; padding-block:84px 48px;}

/* text-wrap:balance voor het geval hij toch moet afbreken (zie de mediaregel
   onderaan): dan worden het twee even lange regels in plaats van een volle
   regel met een los woord eronder. Browsers die het niet kennen breken af
   zoals altijd. */
.lp-pil{margin:0; display:inline-block; padding-block:7px; padding-inline:12px 15px; border:1px solid rgba(31,75,67,0.14); border-radius:999px; background:#fff; font-size:13px; font-weight:600; line-height:1.4; color:var(--teal); box-shadow:0 1px 2px rgba(22,35,43,0.05); text-wrap:balance;}
.lp-pil .lp-arabisch{font-family:var(--font-display); font-size:16px; color:var(--amber);}
/* De pagina blijft links-naar-rechts, ook in het Arabisch (zie past_taal_toe in
   public/js/landing.js). Maar in deze pil staan twee losse stukken Arabisch
   naast elkaar - de merknaam en de zin erover - en in een LTR-regel belandt de
   naam links, dus leest een Arabische lezer hem als laatste. Alleen deze pil
   draait daarom mee, zodat حاضر vooraan staat. De padding hierboven is
   logisch (inline-start/end) en spiegelt dus mee. */
html[lang="ar"] .lp-pil{direction:rtl;}
.lp-pil em{font-family:var(--font-display); font-style:italic;}

.lp-usps{margin:40px 0 0; padding-top:26px; border-top:1px solid var(--lp-line-soft); display:flex; flex-wrap:wrap; gap:26px; list-style:none;}
.lp-usps li{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; color:var(--ink-soft);}
.lp-usps li::before{content:"\2713"; color:var(--teal);}

/* ---------- Schermafbeelding in browserframe ---------- */
.lp-shot{position:relative;}
.lp-shot::before{content:""; position:absolute; inset:-22px -18px -30px; border-radius:28px;
  background:linear-gradient(160deg, rgba(31,75,67,0.10), rgba(242,174,62,0.14));}
.lp-shot-frame{position:relative; border:1px solid rgba(31,75,67,0.13); border-radius:16px; background:#fff; box-shadow:0 30px 60px -24px rgba(22,35,43,0.32); overflow:hidden;}
.lp-shot-bar{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(31,75,67,0.10); background:var(--paper-raised);}
.lp-shot-bar img{height:18px; width:18px;}
.lp-shot-url{flex:1; padding:5px 12px; border:1px solid rgba(31,75,67,0.10); border-radius:7px; background:#fff; font-size:11.5px; color:var(--ink-soft);}
.lp-shot-frame > img{display:block; width:100%; height:auto;}
.lp-shot-caption{margin:16px 2px 0; font-size:13px; line-height:1.5; color:var(--ink-soft);}
.lp-shot-klein{max-width:460px;}

/* ---------- Kaarten (zes taken) ---------- */
.lp-kaarten{margin-top:44px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.lp-kaart{padding:26px; border:1px solid var(--lp-line-soft); border-radius:var(--lp-radius); background:#fff; box-shadow:0 1px 2px rgba(22,35,43,0.04); transition:border-color .15s, box-shadow .15s;}
.lp-kaart:hover{border-color:rgba(31,75,67,0.28); box-shadow:0 16px 36px -22px rgba(22,35,43,0.28);}
.lp-kaart-icoon{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(31,75,67,0.09);}
.lp-kaart h3{margin:18px 0 0; font-family:var(--font-display); font-weight:600; font-size:20px;}
.lp-kaart p{margin:9px 0 0; font-size:15px; line-height:1.6; color:var(--ink-soft);}

/* ---------- Tweekoloms secties ---------- */
.lp-split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:56px; align-items:center;}
.lp-split-trust{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:64px; align-items:start;}

/* ---------- Oudersblok (licht paneel) ---------- */
.lp-paneel{position:relative; overflow:hidden; border:1px solid rgba(31,75,67,0.14); border-radius:24px; background:#F1F4EF;}
.lp-paneel-stip{position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image:radial-gradient(circle at 1px 1px, rgba(31,75,67,0.35) 1px, transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(105deg, transparent 35%, #000);}
.lp-paneel-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:56px; padding:56px;}
.lp-stappen{display:grid; gap:12px; align-content:center; margin:0; padding:0; list-style:none;}
.lp-stap{display:flex; gap:14px; padding:18px 20px; border:1px solid var(--lp-line-soft); border-radius:14px; background:#fff;}
.lp-stap-nr{width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--amber-logo); color:var(--ink); display:grid; place-items:center; font-size:13px; font-weight:700;}
.lp-stap b{display:block; font-size:15.5px; font-weight:700;}
.lp-stap span{display:block; margin-top:4px; font-size:14px; line-height:1.55; color:var(--ink-soft);}

/* ---------- Vertrouwen ---------- */
.lp-stats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.lp-stat{padding:24px; border:1px solid var(--lp-line-soft); border-radius:16px; background:#fff;}
.lp-stat-waarde{font-family:var(--font-display); font-size:34px; line-height:1; color:var(--teal);}
.lp-stat-label{margin-top:10px; font-size:15px; font-weight:700;}
.lp-stat-note{margin-top:6px; font-size:14px; line-height:1.55; color:var(--ink-soft);}

/* ---------- Aanmeldformulier ---------- */
.lp-cta{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.95fr); gap:56px; align-items:center; padding:52px; border:1px solid rgba(31,75,67,0.14); border-radius:24px; background:linear-gradient(180deg,#fff,var(--paper-raised)); box-shadow:0 24px 50px -34px rgba(22,35,43,0.30);}
.lp-form{display:grid; gap:12px;}
.lp-velden{display:grid; grid-template-columns:minmax(0,1fr); gap:12px;}
.lp-veld{display:grid; gap:6px;}
.lp-veld label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0;}
/* Iets rondere velden dan in de app: past bij de kaarten op deze pagina. */
.lp-form input, .lp-form textarea{padding:12px 14px; border:1px solid rgba(31,75,67,0.20); border-radius:11px; background:#fff; font-family:var(--font-body); font-size:16px; color:var(--ink); outline:none;}
.lp-form input:focus, .lp-form textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,75,67,0.12);}
.lp-form .lp-btn{width:100%; justify-content:center; margin-top:6px;}
.lp-form-note{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
.lp-honeypot{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.cta-status{margin:0; min-height:18px; font-size:13.5px; font-weight:600; color:var(--teal);}
.cta-status.ok{color:var(--teal);}
/* landing.js zet hier "err" neer, de handoff schreef "fout" - allebei laten
   werken is minder breekbaar dan aan één van de twee kanten hernoemen. */
.cta-status.fout, .cta-status.err{color:var(--coral);}

/* ---------- Tekstpagina's ----------
   /hulp, /privacy en de twee informatiepagina's zijn lopende tekst, geen
   componenten. Eén leeskolom met vaste typografie is daar genoeg; de breedte
   is bewust smaller dan .lp-wrap, want een regel van 1200px lees je niet. */
.lp-artikel{max-width:780px;}
.lp-artikel > * + *{margin-top:16px;}
.lp-artikel h2{margin:44px 0 0; font-size:26px; line-height:1.2; letter-spacing:-0.015em; font-weight:700;}
.lp-artikel h3{margin:28px 0 0; font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.3;}
.lp-artikel p, .lp-artikel li{font-size:16px; line-height:1.7; color:var(--ink-soft);}
.lp-artikel ul, .lp-artikel ol{margin:14px 0 0; padding-inline-start:22px;}
.lp-artikel li + li{margin-top:7px;}
.lp-artikel strong{color:var(--ink);}
.lp-artikel a{text-decoration:underline; text-underline-offset:2px;}
/* Kop van een informatiepagina: icoon naast de titel, zoals de pil op de
   homepage - genoeg om de pagina te openen zonder een halve hero op te tuigen. */
.lp-paginakop{display:flex; align-items:center; gap:14px; margin:0 0 6px;}
.lp-paginakop img{height:38px; width:auto; display:block;}
/* Rijtje losse labels (bijvoorbeeld de talen op /moskee-administratie).
   Ook op .lp-artikel .lp-tags, want ".lp-artikel ul" hierboven is specifieker
   dan een losse klasse: zonder die tweede selector houdt zo'n rij de
   inspringing van 22px voor opsommingstekens. Links valt dat niet op, maar
   rechts uitgelijnd (Arabisch) staat de rij dan zichtbaar van de marge af. */
.lp-tags, .lp-artikel .lp-tags{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none;}
/* margin:0 en de tweede selector om dezelfde reden: ".lp-artikel li + li"
   geeft elke li behalve de eerste 7px ruimte erboven. In een flexrij rekt die
   eerste pil daardoor 7px verder uit dan de rest en steekt hij uit. */
.lp-tags li, .lp-artikel .lp-tags li{margin:0; padding:6px 14px; border:1px solid var(--lp-line-soft); border-radius:999px; background:#fff; font-size:14px; font-weight:500; color:var(--ink-soft);}
.lp-tags li[lang="ar"]{font-family:'Noto Kufi Arabic', var(--font-body);}
.lp-kop-blok{padding-top:64px;}

/* Arabisch op de tekstpagina's (/leerlingvolgsysteem, /moskee-administratie
   en /afmelden):
   de pagina zelf blijft links-naar-rechts - de topbalk, het logo, de taalkiezer
   en de voettekst staan waar ze staan - maar de tekstblokken erin lezen
   prettiger van rechts naar links.
   direction en niet text-align: met alleen uitlijnen blijven de
   opsommingstekens en de inspringing links staan, en houden de kaarten hun
   Nederlandse leesvolgorde. */
html[lang="ar"] .lp-tekstpagina .lp-kop-blok,
html[lang="ar"] .lp-tekstpagina .lp-section > .lp-wrap{direction:rtl;}

/* Zelfde keuze op de homepage, maar daar per blok: de hero, de kaarten, de
   panelen, de tegels en het aanmeldblok draaien mee, plus de inlogmodal.
   De topbalk en de voettekst niet - die zijn gedeeld met de pagina's die
   Nederlands blijven. */
html[lang="ar"] .lp-home .lp-hero-grid,
html[lang="ar"] .lp-home .lp-section > .lp-wrap,
html[lang="ar"] .login-modal{direction:rtl;}

/* Twee dingen draaien nergens mee.
   De nagemaakte schermen: dat zijn afbeeldingen van een Nederlandse app, en
   gespiegeld tonen ze een product dat niet bestaat. Het bijschrift eronder
   staat buiten het kader en draait dus wel mee.
   En de velden waar Latijnse tekst of cijfers in gaan - een e-mailadres
   rechts uitgelijnd leest niet. Schoolnaam en contactpersoon blijven wel
   RTL: daar typt iemand Arabisch in. */
html[lang="ar"] .lp-shot-frame{direction:ltr;}
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="number"],
html[lang="ar"] input[type="password"]{direction:ltr;}
.lp-kop-blok .lp-h1{font-size:clamp(30px,4.4vw,44px);}

/* ---------- Footer ---------- */
.lp-footer{margin-top:96px; border-top:1px solid var(--lp-line-soft); background:#fff;}
.lp-footer-grid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap:40px; padding-block:52px 28px;}
.lp-footer-kop{margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.lp-footer-kolom{display:grid; gap:10px; align-content:start;}
.lp-footer-blurb{margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft);}
.lp-footer-kolom a{font-size:14.5px; color:var(--ink-soft);}
.lp-footer-kolom a:hover{color:var(--teal);}
.lp-footer-mini{display:grid; gap:8px;}
.lp-footer-mini input, .lp-footer-mini textarea{padding:10px 12px; border:1px solid rgba(31,75,67,0.20); border-radius:10px; background:#fff; font-family:var(--font-body); font-size:14.5px; color:var(--ink); outline:none;}
.lp-footer-mini textarea{line-height:1.5; resize:vertical;}
.lp-footer-mini input:focus, .lp-footer-mini textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,75,67,0.12);}
.lp-footer-mini button{padding:11px 16px; border:none; border-radius:10px; background:var(--teal); color:#fff; font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; width:100%;}
.lp-footer-mini button:hover{background:var(--teal-dark);}
.lp-footer-onder{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding-block:18px 40px; border-top:1px solid rgba(31,75,67,0.10); font-size:13px; color:var(--ink-soft);}
.lp-footer-onder .lp-arabisch{font-family:var(--font-display); font-size:15px;}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .lp-nav{display:none;}
  .lp-menuknop{display:flex;}
  /* [hidden] wint hier niet vanzelf van display:block, vandaar de :not(). */
  .lp-mobielmenu:not([hidden]){display:block; padding-bottom:14px; border-top:1px solid var(--lp-line-soft); margin-top:2px; padding-top:10px;}
}
@media (max-width:980px){
  .lp-hero-grid, .lp-split, .lp-split-trust, .lp-paneel-grid, .lp-cta{grid-template-columns:minmax(0,1fr); gap:44px;}
  .lp-paneel-grid, .lp-cta{padding:32px;}
  .lp-kaarten{grid-template-columns:repeat(2, minmax(0,1fr));}
  .lp-footer-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .lp-section{padding-top:72px;}
  .lp-shot-klein{max-width:none;}
}
@media (max-width:720px){
  .lp{--lp-gutter:20px;}
  /* Krappere gaten in de balk: logo, taalkiezer, inlogknop en menuknop passen
     er anders niet naast elkaar en dan valt de balk over twee regels. Het logo
     houdt zijn volle hoogte, net als op desktop.
     Opgemeten op 375px: logo 102 + taalkiezer 70 + inloggen 91 + menuknop 40
     plus de tussenruimtes is 331 van de 335 beschikbaar - vier pixels over.
     Dat is te weinig: op een 360px-telefoon of bij ingezoomde tekst klapt hij
     alsnog om. Vandaar hieronder in stappen ruimte vrijmaken. */
  .lp-header-row{gap:10px;}
  .lp-header-acties{gap:6px;}
  .lp-btn-klein{padding:8px 13px; font-size:13.5px;}
  /* Alleen de vlag, in hetzelfde vierkantje als de menuknop ernaast. Met de
     taalcode erbij was het een brede witte pil die net zo hard om aandacht
     vroeg als "Inloggen", terwijl het een hulpmiddel is en geen actie. De
     lijst die openklapt noemt elke taal voluit. */
  .lp .taalkiezer-knop{
    width:40px; height:38px; padding:0; gap:0;
    justify-content:center; border-radius:10px;
  }
  .lp .taalkiezer-knop span{display:none;}
  /* Volgorde op een telefoon: menuknop, dan de taal, dan wat er rechts hoort
     te staan (inloggen, of het accountknopje na het inloggen). In de HTML
     staat de taalkiezer eerst omdat dat op een breed scherm de leesvolgorde
     is; hier draaien we alleen de weergave om. */
  .lp-menuknop{order:-2;}
  .lp-taal, .lp .taalkiezer-widget{order:-1;}
  /* Twee knoppen naast elkaar worden op 375px allebei te smal voor hun tekst;
     onder elkaar over de volle breedte leest beter en is makkelijker te raken. */
  .lp-btn-rij-gelijk{flex-direction:column; align-items:stretch;}
  .lp-btn-rij-gelijk .lp-btn{flex:0 0 auto; width:100%;}
  .lp-kaarten, .lp-stats, .lp-footer-grid{grid-template-columns:minmax(0,1fr);}
  .lp-hero-grid{padding-block:56px 64px;}
  .lp-section{padding-top:56px;}
}
@media (prefers-reduced-motion:reduce){
  .lp *{transition:none !important; animation:none !important;}
}

/* ---------- Vier kaarten op een rij ----------
   De standaard .lp-kaarten staat op drie kolommen; met vier kaarten (op /lvs en
   /moskee-administratie) blijft er dan een wees op de tweede regel achter. Deze
   variant zet ze vanaf een laptopscherm naast elkaar, met iets minder padding
   en kleinere tekst zodat een kaart van ~270px niet volgepropt oogt.
   Staat achteraan het bestand: zo winnen deze regels van de mediaregels
   hierboven, die op dezelfde specificiteit zitten. */
.lp-kaarten-vier{grid-template-columns:repeat(2, minmax(0,1fr));}
@media (min-width:1180px){
  .lp-kaarten-vier{grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;}
  .lp-kaarten-vier .lp-kaart{padding:22px 20px;}
  .lp-kaarten-vier .lp-kaart h3{margin-top:15px; font-size:18px;}
  .lp-kaarten-vier .lp-kaart p{margin-top:7px; font-size:14.5px; line-height:1.55;}
}
@media (max-width:720px){
  .lp-kaarten-vier{grid-template-columns:minmax(0,1fr);}
}

/* ---------- De pil met de betekenis van "Hadir" op een telefoon ----------
   Op 360px breed komt hij 4 pixels tekort voor één regel, en dan valt "in het
   Arabisch." eronder - een halflege tweede regel onder een volle eerste. Een
   fractie kleiner scheelt genoeg om hem heel te houden. Dit is de eerste zin
   die iemand op zijn telefoon ziet; die hoort niet gebroken te beginnen.

   Op de smalste toestellen past het bij geen enkele leesbare maat meer, en de
   andere talen zijn ook niet allemaal even lang. Daar doet text-wrap:balance
   hierboven zijn werk: dan twee gelijke regels in plaats van een rafelrand. */
@media (max-width:480px){
  .lp-pil{font-size:12px; padding-block:6px; padding-inline:11px 13px;}
  .lp-pil .lp-arabisch{font-size:15px;}
}

/* ---------- Balk op heel smalle schermen ----------
   Laatste stap voordat de balk over twee regels valt: het logo kleiner. Dat is
   het enige onderdeel dat nog iets kan afstaan zonder onherkenbaar te worden. */
@media (max-width:340px){
  .lp-logo img{height:32px;}
}