html, body {
	background-color: #ffffff;
	margin: 0px;
	font-family: Lusitana, sans-serif;
	vertical-align: top;
}

#allcontent {
	max-width: 1200px;
	margin: auto;
}

#wrapper1 {
	margin: 0px;
	position: relative;
	top: 0px;
	width: 1200px;
}

#wrapper2 {
	margin: 0px;
	width: 1200px;
}

#main {
	width: 1200px;
	vertical-align: top;
	margin: 0px;
}

table {
	border-spacing: 0px;
}

td {
	color: #555555;
	margin: 0px;
	padding: 0px;
	font-family: Lusitana, sans-serif;
	font-size: 18px;
	vertical-align: top;
}

th {
	text-align: left;
}

a {
	color: #555555;
	text-decoration: none;
}

.showlinks a {
	text-decoration: underline;
}

.hoverlinks:hover {
	text-decoration: underline;
}

img {
	border: 0px;
}

p {
	padding: 0px;
	margin: 0px;
}

pre {
	color: #333333;
	background-color: #f0f0f0;
	padding: 0px;
	margin: 0px;
	margin-bottom: 6px;
	font-family: "Lucida Console", Monaco, Courier, "Courier New", monospace;
	font-size: 13px;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

select {
	font-family: Lusitana, sans-serif;
	border: 1px solid #cdcdcd;
	background: #f4f4f4;
	font-size: 18px;
	padding: 0px 6px;
}

input, textarea {
	font-family: Arial, sans-serif;
	border: 1px solid #cdcdcd;
	background: #f4f4f4;
	font-size: 16px;
	padding: 1px;
}

input[type="checkbox"], input[type="radio"] {
	background: transparent;
	border: 0;
}

input[type="submit"] {
	padding: 4px 14px;
	margin: 7px 0px;
	border: 1px solid #555555;
	font-family: Poppins, serif;
	font-size: 16px;
	color: #ffffff;
	background: #555555;
	-moz-border-radius: 7x;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	cursor:pointer;
}

H1 {
	font-size: 36px;
	line-height: 40px;
	margin: 20px 0px;
	font-family: Poppins, serif;
	color: #ff7f00;
	font-weight: normal;
}

H2 {
	font-size: 24px;
	margin: 0px;
	font-family: Poppins, serif;
	color: #555555;
	font-weight: normal;
}

H3 {
	font-size: 16px;
	line-height: 16px;
}

H4 {
	font-size: 16px;
	margin: 0px;
	font-family: Poppins, serif;
	color: #555555;
	font-weight: normal;
}

form {
	margin: 0px;
}

.nadruk {
	font-family: Poppins, serif;
	font-weight: 700px;
}

.mainlink {
	margin: 0px;
	background: url(img/menu_in.png) no-repeat 0px 4px;
	vertical-align: center;
	text-decoration: none;
	padding: 4px 10px 6px 22px;
	font-size: 12px;
	font-weight: bold;
	line-height:21px;
}

.home {
	background-color: #ffffff;
	border: 1px solid #cdcdcd;
	padding: 0px;
	width: 100%;
	vertical-align: top;
}

#formulier td {
	vertical-align: top;
	padding-bottom: 6px;
}

#formulier th {
	vertical-align: bottom;
	padding-bottom: 6px;
}

#popupbox {
	border: 1px solid #e7e7e7;
	display: inline-block;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	position:relative;
	width: 240px;
	padding-bottom: 8px;
	overflow: auto;
}

#popupbox td {
	padding: 12px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 32px;
	vertical-align: top;
}

#popupbox H2 {
	padding-bottom: 10px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-size: 24px;
}

#popupbox H3 {
	padding: 0px;
	color: #555555;
	font-family: Lusitana, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 24px;
}

#popupbox H4 {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
}

#scorebox {
	padding: 0px;
	margin: 0px;
}

#scorebox a {
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
}

#scorebox td {
	padding: 0px;
	margin: 0px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-weight: 700;
	line-height: 16px;
	vertical-align: top;
}

#cartbox {
	border: 1px solid #e7e7e7;
	display: inline-block;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	position:relative;
	width: 240px;
	overflow: auto;
}

#cartbox td {
	padding: 12px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-weight: 400;
	font-size: 16px;
	vertical-align: top;
}

#cartbox H2 {
	padding-bottom: 10px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-size: 24px;
}

#cartbox H3 {
	padding: 0px;
	color: #555555;
	font-family: Lusitana, sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 24px;
}

#cartbox H4 {
	padding: 0px;
	margin: 0px 0px 10px 0px;
	color: #ffffff;
	font-family: Lusitana, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
}

.punten {
	color: #555555;
	font-family: Lusitana, sans-serif;
	font-weight: 700;
	margin: 0px;
	padding: 0px;
	padding-top: 4px;
}

.teaser {
	padding: 0px;
	margin-bottom: 30px;
	color: #ff7f00;
	font-family: Lusitana, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 18px;
}

#shoparea {
	border: 1px solid #e7e7e7;
	display: inline-block;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	background: #f6f6f6;
}

#shoparea td {
	padding: 12px;
	line-height: 32px;
}

#artikelbox {
	border: 1px solid #e7e7e7;
	display: inline-block;
	-webkit-border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	behavior: url(js/PIE.htc);
	position:relative;
	width: 180px;
	height: 205px;
	background: #ffffff;
}

#artikelbox td {
	font-family: Lusitana, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 18px;
	color: #555555;
	padding: 0px 8px;
	vertical-align: top;
	text-decoration: none;
}

#topmenu {
	position: fixed;
	top: 0;
	z-index: 50;
}

#topmenu td {
	font-family: Poppins, serif;
	vertical-align: top;
	font-size: 22px;
	margin: 0px;
}

#topmenu a {
	color: #ffffff;
	text-decoration: none;
}

#toptekst td {
	padding: 3px 16px 4px 12px;
}

#txtfooter {
	bottom: 0;
	width: 1200px;
	background-color: #555555;
	height: 24px;
	padding-top: 4px;
	position: fixed;
}

#txtfooter a {
	color: #ffffff;
	text-decoration: none;
}

#txtfooter td {
	width: 600;
	font-family: Poppins, serif;
	vertical-align: top;
	font-size: 12px;
	color: #ffffff;
	padding: 0px;
}

#footer {
	background-color: #555555;
	width: 1200px;
	height: 32px;
	bottom: 0;
	vertical-align: top;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
}

.footercontent {
	font-family: Poppins, serif;
	color: #ffffff;
	border: none;
	padding: 0px 2px;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}

#inlogbox {
	position: absolute;
	top: 85px;
	left: 900px;
	width: 270px;
	height: 400px;
	z-index: 20;
}

#inlogtable {
	background-color: #ff7f00;
	width: 270px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	behavior: url(js/PIE.htc);
}

#inlogtable td {
	font-family: Lusitana, serif;
	color: #ffffff;
	padding: 0px;
}

#inlogtable input {
	font-family: Arial ,sans-serif;
	border: 1px solid #555555;
	background: #ffffff;
	font-size: 16px;
	padding: 4px;
	margin-bottom: 8px;
	width: 210px;
	-moz-border-radius: 7x;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
}

#inlogtable input[type="submit"] {
	width: 100px;
	padding: 6px 0px;
	margin: 14px 0px 10px 106px;
	border: 1px solid #555555;
	font-family: Lusitana, serif;
	font-size: 18px;
	color: #ffffff;
	background: #555555;
	-moz-border-radius: 7x;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
}

#inlogtable input[type="checkbox"] {
	border: 0px;
	width: 20px;
	background: #ff7f00;
}

yhr {
	color: #ff7f00;
	border-style: none none dotted;
	border: #555555 1px dashed;
	padding: 0px;
}

#formulier-h td {
	vertical-align: top;
	padding-bottom: 4px;
	font-size: 18px;
	line-height:29px;
}

.printkop	{
	font-size: 22px;
	line-height: 17px;
	font-weight: bold;
}

.rechts {
	text-align: right;
	padding-right: 6px;
	text-decoration: none;
}

.alarm {
	color: red;
	font-family: Courier,sans-serif;
	font-size: 10px;
}

.klein {
	font-size: 12px;
	color: #555555;
}

.klein a {
	color: #555555;
}

.grijs {
	color: #999999;
}

.shopcatitem {
	display: table-cell;
	width: 160px;
	text-align: center;
	padding: 10px 35px 10px 0px;
}

.shopcatkop {
	font-size: 13px;
	font-weight: bold;
}

.shopcatkop a {
	text-decoration: none;
}

.naambalk {
	text-align: right;
	padding-left: 46px;
	padding-right: 6px;
	color: #d2d2d2;
	font-weight: bold;
}

#deftable {
	font-family: Lusitana ,sans-serif;
	padding: 0px;
	-moz-border-radius: 7x;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	behavior: url(js/PIE.htc);
	display: inline-block;
	position: relative;
	overflow: auto;
	border-bottom: 1px solid #dddddd;
}

.tableth {
	font-family: Lusitana, sans-serif;
	background-color: #dddddd;
	height: 20px;
	vertical-align: middle;
	padding: 4px;
	white-space: nowrap;
}

.tableth a {
	color: #303030;
	text-decoration: none;
	white-space: nowrap;
}

.tabletd {
	height: 20px;
	padding: 4px;
	vertical-align: middle;
}

.tabletd a {
	text-decoration: underline;
}

.tablea {
	text-decoration: none;
	font-weight: bold;
	color:red;
	font-size:8pt;
}

.tablea:hover {
	color:red;
	font-weight: bold;
	font-size:8pt;
}

.autocomplete {
	background-color: #f0f0f0;
	border: 1px solid #cdcdcd;
	position: absolute;
	cursor: default;
	overflow: auto;
	overflow-x: hidden;
}

.autocomplete_item {
	padding: 1px;
	padding-left: 5px;
	width: 100%;
}

.autocomplete_item_highlighted {
	padding: 1px;
	padding-left: 5px;
	background-color: #f4f4f4;
}

.popupwindow {
	margin-bottom: 0px;
	border-radius: 10px;
	background: #cdcdcd;
	box-shadow: 4px 4px 3px #dedede;
	text-align: left;
}

.popupwindow .titleBar {
	position: relative;
	padding: 5px 9px;
	height: 18px;
	font-size: 15px;
	font-weight: bold;
	background: #cdcdcd;
	border-radius: 8px 8px 0 0;
}

.popupwindow .titleBar span.theTitle {
	display: block;
	margin-left: 7px;
	font-weight: bold;
}

.popupwindow .titleBar span.closeIcon {
	position: absolute;
	top: 5px;
	right: 7px;
	cursor: pointer;
}

.popupwindow div.content {
	padding: 5px 10px;
	position: absolute;
	background: #f2f2f2;
	margin: 0;
	padding: 8px;
	height: 200px;
	overflow: auto;
	border: 1px solid #cdcdcd;
	box-shadow: 4px 4px 3px #dedede;
}

.popupwindow div.content span.resizeIcon {
	position: absolute;
	right: 1px;
	bottom: 1px;
	height: 16px;
	width: 16px;
	background: transparent url(../../../img/resize.png) no-repeat;
	cursor: se-resize;
}

#crossfade {
	position: relative;
	margin: 0;
	top: 0;
	width: 1200px;
}

#cover {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #000000;
	filter: alpha(Opacity=85);
	opacity: 0.85;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	z-index: 10008;
}

#dialog {
	display: none;
	width: 439px;
	height: 638px;
	left: 50%;
	right: 50%;
	top: 50%;
	bottom: 50%;
	margin-left: -220px;
	xxmargin-right: -220px;
	margin-top: -319px;
	xxmargin-bottom: 319px;
	position: absolute;
	z-index: 10010;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0;
	vertical-align: top;
}



/* ============================================================
   HUISSTIJL-RESKIN  —  Alfabet + FNJW-groen (#83bc37)
   CSS-only over de bestaande structuur. Geen HTML/PHP gewijzigd.
   Bestaande layout (breedtes/posities) blijft; alleen tokens:
   font, kleuren, knoppen, radii, focus. 2026-07
   ============================================================ */

@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_Regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_Medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_Bold.woff2')     format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_ExtraBold.woff2')format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Alfabet'; src:url('fonts/Alfabet_Black.woff2')    format('woff2'); font-weight:900; font-display:swap; }

:root {
  --primary:#83bc37; --primary-dark:#6fa02e; --primary-light:#a5d662;
  --dark:#2D3E1F; --text:#333333; --text-light:#6b7280;
  --light:#f9fafb; --border:#e5e7eb; --grey-100:#F5F5F5; --grey-200:#E8E8E8;
}

/* --- Typografie: alles naar Alfabet --- */
html, body, td, th, p, a, div, span, li, select, input, textarea, button,
h1, h2, h3, h4, H1, H2, H3, H4, .nadruk, .teaser, .punten, .klein, .grijs,
#topmenu td, #toptekst td, #txtfooter td, .footercontent,
#popupbox td, #cartbox td, #scorebox td, #inlogtable td, .tableth, .tabletd, #deftable {
  font-family:'Alfabet', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body { background:#ffffff; }
body, td { color:var(--text); }

/* --- Koppen --- */
H1 { color:var(--dark) !important; font-weight:800 !important; letter-spacing:-.01em; }
H2, H4 { color:var(--dark) !important; font-weight:700 !important; }

/* --- Links -> groen --- */
a { color:var(--primary-dark); }
a:hover { color:var(--primary); }
#topmenu a, #txtfooter a, #popupbox a, #cartbox a, #scorebox a, #inlogtable a { color:#ffffff; }

/* --- Inline oranje/petrol uit de PHP herkleuren (geen HTML wijzigen) --- */
[style*="ff7f00"] { color:var(--primary-dark) !important; }
[style*="ff9f40"] { background:var(--primary) !important; background-image:none !important; }
[style*="1e2c30"] { background-color:var(--dark) !important; }

/* --- Topmenu (donkergroene balk) --- */
#topmenu a { font-weight:600; }
#topmenu a:hover { color:var(--primary-light); }

/* --- Knoppen --- */
input[type="submit"], button {
  background:var(--primary) !important; border:1px solid var(--primary) !important;
  color:#ffffff !important; font-weight:700 !important; border-radius:8px !important;
  padding:8px 18px !important; cursor:pointer;
  transition:background .15s ease, transform .05s ease, box-shadow .15s ease;
}
input[type="submit"]:hover, button:hover { background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; }
input[type="submit"]:active, button:active { transform:translateY(1px); }

/* --- Formuliervelden (checkbox/radio/submit uitgezonderd) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]),
textarea, select {
  border:1px solid var(--border) !important; background:#ffffff !important;
  border-radius:8px !important; padding:8px 10px !important; color:var(--text) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
textarea:focus, select:focus {
  outline:none !important; border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(131,188,55,.25) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color:var(--primary); box-shadow:none !important; }

/* --- Saldo/stats-box + winkelwagen -> groen, afgerond --- */
#popupbox { background:var(--primary) !important; border:0 !important; border-radius:16px !important; overflow:hidden; }
#cartbox  { background:var(--primary-dark) !important; background-image:none !important; border:0 !important; border-radius:16px !important; }
#popupbox td, #cartbox td, #scorebox td, #scorebox a { color:#ffffff !important; }
.punten { color:#ffffff !important; font-weight:800 !important; }

/* --- Inlogbox (uitgelogd) -> groen --- */
#inlogtable { background-color:var(--primary) !important; border-radius:16px !important; }
#inlogtable input[type="submit"] { background:var(--dark) !important; border-color:var(--dark) !important; }
#inlogtable input:not([type="submit"]) { border:1px solid rgba(0,0,0,.12) !important; }

/* --- Tabellen (rapport/lijsten) --- */
.tableth { background-color:var(--grey-200) !important; }
.tableth, .tableth a { color:var(--dark) !important; font-weight:700; }
.tabletd a { color:var(--primary-dark); }
#deftable { border-color:var(--border) !important; border-radius:10px !important; }

/* --- Footer -> donkergroen --- */
#txtfooter, #footer { background-color:var(--dark) !important; }
#txtfooter td, .footercontent { color:#ffffff; }

/* --- Content-kaders iets zachter --- */
.home, #shoparea, #artikelbox { border-color:var(--border) !important; border-radius:12px !important; }

/* --- Accentteksten --- */
.teaser { color:var(--primary-dark) !important; }
.nadruk { font-weight:700 !important; }


/* ============================================================
   HUISSTIJL-RESKIN FASE-BLOKKEN + HTML-FASE + KLEUR + SPACING + MOBIEL
   Geassembleerd uit executor-blokken. 2026-07-21
   ============================================================ */

/* === FASE 1: typografie-schaal === */

/* Basis body/td: 18px -> 16px, ruime regelhoogte (basis-CSS zet td op 18px; hier overschreven) */
body { font-size: 16px; line-height: 1.6; }
td   { font-size: 16px; line-height: 1.6; }

/* Koppenschaal strak volgens doelstijl.
   Kleur (--dark) en gewicht komen al uit het bestaande reskin-blok;
   hier alleen de maten + letter-spacing. */
H1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 20px 0 24px;
}
H2 { font-size: 22px; }
H4 { font-size: 16px; font-weight: 600 !important; } /* reskin forceert H4 700 !important -> hier terug naar 600 */

/* Tekstselectie in huisstijlgroen */
::selection      { background: var(--primary); color: #ffffff; }
::-moz-selection { background: var(--primary); color: #ffffff; }

/* Font-smoothing/antialiasing: doelstijl (live-frontend-style.css / website/style.css) zet dit NIET,
   dus bewust niet toegevoegd om render-gelijkheid met de doelsite te behouden. */

/* === FASE 4: content + koppen === */

/* .home -> card-look: wit, radius 15px, zachte schaduw, subtiele rand.
   !important nodig om reskin (border-color + border-radius:12px !important) te overtreffen.
   Breedte/padding onaangeroerd i.v.m. vaste 1200px-layout. */
.home {
  background-color: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* .teaser -> groen accent, doeltypografie (verfijning op reskin) */
.teaser {
  color: var(--primary-dark) !important;
  font-weight: 700;
  line-height: 1.5;
}

/* .mainlink + generieke content-links in huisstijl.
   Content-links via directe kind-selector op de 900px content-kolom,
   zodat tabellen (#deftable/.tabletd), formulieren en spaarshop van andere
   executors niet worden geraakt. */
.mainlink {
  color: var(--primary-dark);
  font-weight: 600;
  transition: color 0.2s ease;
}
.mainlink:hover {
  color: var(--primary);
  text-decoration: underline;
}
td[style*="900px"] > a {
  transition: color 0.2s ease;
}
td[style*="900px"] > a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Welkomstscherm / paginakoppen: ruime marges rond de content-H1 zoals login.html/doelsite */
td[style*="900px"] > H1 {
  margin: 28px 0 24px;
}

/* === FASE 5: linkermenu + saldo-box (v3, incl. FASE 5-FIX) === */

/* --- Linkermenu: directe menu-links als knop-achtige elementen.
   Scope: alleen DIRECTE <a>-kinderen van de linkerkolom-td (340px), dus
   nooit links binnen #popupbox/#scorebox/#cartbox (die zitten dieper
   genest, de child-combinator sluit ze vanzelf uit). Dit geldt voor
   ALLE menu-anchors in die kolom, dus ook de spaarshop-categorielinks
   die klanten (adminlevel < 3) er zien -- die worden door dezelfde
   leftmenu.php in dezelfde td gegenereerd, dus automatisch meegepakt.
   Gebruikersfeedback (v4): het volle --primary-groen was minder goed
   leesbaar; nu --dark (#2D3E1F), hetzelfde donkergroen als de footer op
   de doelsite, met witte tekst -- zelfde taal/contrast als #txtfooter.
   Hover: --primary, dezelfde overgang als .social-link:hover op de
   doelsite-footer (donkergroen -> vol groen), plus lichte lift + glow.
   De klantlogo-anchor (bevat een <img>) blijft knop-loos via :has();
   browsers zonder :has()-support tonen 'm met dezelfde knop-stijl als
   de overige links -- geen functionele breuk, alleen een overbodige
   donkergroene achtergrond rond het logo. */
td[style*="340px"] > a {
  display: block;
  margin-bottom: 6px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--dark);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

td[style*="340px"] > a:hover {
  background: var(--primary);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(131, 188, 55, 0.35);
}

td[style*="340px"] > a:has(> img) {
  display: inline-block;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

td[style*="340px"] > a:has(> img):hover {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Alleen de DIRECTE <br>'s tussen de menu-links verbergen; de block-links
   bepalen nu zelf hun spacing. Br's binnen geneste tabellen (popupbox/
   scorebox/cartbox) blijven onaangeroerd, dat zijn geen directe kinderen
   van deze td. */
td[style*="340px"] > br {
  display: none;
}

/* --- Sectiekoppen (H2, inline color:#ff7f00) binnen de linkerkolom.
   Niet langer grijs-uppercase: huisstijl-groen, groter en vetter, zoals
   de accentkoppen/-woorden op de echte site (groen, weight 800). De
   inline kleur wordt overtroefd; dit blok staat na het bestaande
   HUISSTIJL-RESKIN-blok en is specifieker, dus het wint. */
td[style*="340px"] > h2 {
  display: block;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--primary-dark) !important;
  padding: 0 12px !important;
  margin: 28px 0 10px !important;
}

td[style*="340px"] > h2:first-child {
  margin-top: 4px !important;
}

/* --- Saldo/stats-box (#popupbox): groen vlak, radius 20, geen border.
   Blijft zichtbaar voor de rollen die 'm nog krijgen (werknemer/dealer);
   voor werkgever/beheer (adminlevel 3/5/6) wordt de box in de PHP-laag
   niet meer uitgevoerd (htmlfase/leftmenu.php) -- deze CSS-regels raken
   dus alleen nog de resterende, wel-relevante saldo-info.
   margin-bottom compenseert de <br><br> die hierboven verborgen wordt. */
#popupbox {
  border: 0 !important;
  border-radius: 20px !important;
  overflow: hidden;
  margin-bottom: 24px;
}

/* Scorebox-iconen: originele PNG-weergave (wit/oranje, direct op het
   groene vlak) -- geen witte cirkels, geen filters (dat experiment is
   teruggedraaid, zie FASE 5-FIX). Enige restant: verticaal centreren
   van het icoon naast de tweeregelige labeltekst, dat oogde goed en is
   verder onschadelijk. */
#scorebox td:first-child {
  vertical-align: middle;
}

.punten {
  font-size: 18px !important;
}

/* --- Winkelwagen (#cartbox): zelfde kaartfamilie in --primary-dark,
   radius 20, geen border, geen popback_bw.png-achtergrond. */
#cartbox {
  border: 0 !important;
  border-radius: 20px !important;
  background-image: none !important;
  overflow: hidden;
  margin-bottom: 24px;
}

/* === FASE 6: tabellen + formulieren (v2 — meer huisstijl-groen) === */

/* --- #deftable: kaart-look met groene ondertoon in de rand --- */
#deftable {
  background: #ffffff;
  border: 1px solid rgba(131, 188, 55, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* --- Headercellen: stevig groen vlak, wit — zoals .btn-primary/.info-benefits-box op de site --- */
.tableth {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 10px !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tableth a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
}
.tableth a:hover {
  text-decoration: underline;
}

/* --- Print: nooit witte tekst op wit papier, ongeacht achtergrond-printinstelling --- */
@media print {
  .tableth,
  .tableth a {
    background-color: #ffffff !important;
    color: var(--dark) !important;
  }
}

/* --- Datacellen: padding, groene zebra, sterkere rij-hover --- */
.tabletd {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border);
}
#deftable tr:nth-child(odd) .tabletd  { background-color: #ffffff !important; }
#deftable tr:nth-child(even) .tabletd { background-color: #eef4e2 !important; }
#deftable tr:hover .tabletd { background-color: rgba(131, 188, 55, 0.12) !important; }

.tabletd a {
  color: var(--primary-dark) !important;
  text-decoration: none;
}
.tabletd a:hover {
  color: var(--primary) !important;
  text-decoration: underline;
}

/* --- Alarm-links: blijven rood/functioneel, alleen typografie netjes --- */
.tablea,
.tablea:hover {
  font-size: 11px;
  font-weight: bold;
  color: red;
  text-decoration: none;
}

/* --- Formulierlabels: groen accent --- */
#formulier th,
#formulier-h th,
#formulier-h td {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
}

/* --- Formuliervelden: verfijning t.o.v. basis-reskin (focus-ring is al groen) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]),
textarea,
select {
  border-width: 2px !important;
  padding: 8px 12px !important;
}

/* === FASE 7: spaarshop === */

/* --- Shop-container: neutrale, lichte omlijsting in doelstijl (geen harde border) --- */
#shoparea {
  background: var(--grey-100) !important;
  border: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* --- Product-cards: witte kaart, zachte rust-schaduw, hover-lift zonder grid-verspringing.
       2px transparante border in rust compenseert de groene hover-border (geen layout-shift);
       enkel transform beweegt bij hover (geen margin-wijzigingen).
       De vaste 205px uit de basisregel moet hier los: het huisstijl-lettertype
       wrapt lange titels naar vier regels, en overflow:hidden (nodig voor de
       ronde hoeken) knipte dan de Bikies-prijsregel af. min-height houdt korte
       kaarten op de oude maat. --- */
#artikelbox {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  height: auto !important;
  min-height: 205px;
}

/* Kaarten van ongelijke hoogte in een rij aan de bovenkant uitlijnen */
#shoparea > tbody > tr > td {
  vertical-align: top;
}
#artikelbox:hover {
  transform: translateY(-5px);
  border-color: var(--primary) !important;
  box-shadow: 0 15px 40px rgba(131,188,55,.2);
}

/* Productafbeelding netjes binnen de afgeronde kaart houden */
#artikelbox img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* --- Naam-banner-PNG uit: effen licht vlak, donkere leesbare artikelnaam --- */
#artikelbox td[background] {
  background-image: none !important;
  background-color: var(--grey-100) !important;
}
#artikelbox td[background] a {
  color: var(--dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* --- Prijs "... Bikies": groen en bold (overrulet inline color:#ff7f00) --- */
#artikelbox a[style*="ff7f00"],
#artikelbox tr:last-child a {
  color: var(--primary-dark) !important;
  font-weight: 700 !important;
}

/* --- Categorielinks: huisstijl-links met groene hover (categorie-afbeeldingen blijven) --- */
.shopcatkop a,
.shopcatitem a {
  color: var(--dark) !important;
  text-decoration: none;
  font-weight: 700;
  transition: color .2s ease;
}
.shopcatkop a:hover,
.shopcatitem a:hover {
  color: var(--primary) !important;
}

/* === FASE 8: footer + polish === */

/* --- Footer (#txtfooter, ingelogd) --- */
#txtfooter {
	height: 32px !important;
	padding-top: 6px !important;
	padding-bottom: 2px !important;
	box-sizing: border-box !important;
	background-color: var(--dark) !important;
}

#txtfooter td {
	font-size: 13px !important;
	color: rgba(255,255,255,0.7) !important;
	vertical-align: middle !important;
}

#txtfooter a {
	color: rgba(255,255,255,0.7) !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

#txtfooter a:hover {
	color: var(--primary-light) !important;
	text-decoration: underline !important;
}

/* --- Popupwindow (MooTools) --- */
.popupwindow {
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

.popupwindow .titleBar {
	background: var(--grey-100) !important;
	border-radius: 12px 12px 0 0 !important;
	color: var(--dark) !important;
	font-weight: 600 !important;
}

.popupwindow .titleBar span.theTitle {
	color: var(--dark) !important;
	font-weight: 600 !important;
}

.popupwindow .titleBar span.closeIcon {
	color: var(--text-light) !important;
	cursor: pointer !important;
}

.popupwindow .titleBar span.closeIcon:hover {
	color: var(--dark) !important;
}

.popupwindow div.content {
	background: #ffffff !important;
	border: 1px solid var(--border) !important;
	box-shadow: none !important;
}

/* --- Foutmelding (.alarm) --- */
.alarm {
	color: #b91c1c !important;
	font-family: 'Alfabet', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* --- Autocomplete-dropdown --- */
.autocomplete {
	background: #ffffff !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.autocomplete_item {
	padding: 8px 12px !important;
	color: var(--text) !important;
}

.autocomplete_item_highlighted {
	padding: 8px 12px !important;
	background-color: rgba(131,188,55,0.12) !important;
	color: var(--primary-dark) !important;
}

/* --- Hulpkassen: .klein / .grijs --- */
.klein {
	font-size: 13px !important;
	color: var(--text-light) !important;
}

.klein a {
	color: var(--text-light) !important;
}

.klein a:hover {
	color: var(--primary) !important;
}

.grijs {
	color: var(--text-light) !important;
}

/* --- Typografie-gelijktrekken (geen structuur) --- */
.printkop, .rechts {
	font-family: 'Alfabet', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   Topnav portal - exact gedrag van fietsendnaarjewerk.nl.
   Transparant over de hero; bij scrollen (JS zet .scrolled) wordt hij de witte
   balk met een kleiner, groen logo. Overgenomen uit live-frontend-style.css /
   website/style.css. Uitsluitend .nav*-scoped selectors, geen resets/html/body.
   CSS content:url-paden zijn relatief aan style.css in de docroot-root (dus geen
   basepath); de HTML img-src is absoluut als fallback. Merkkleuren via var()
   met fallback, omdat de portal-CSS zelf (nog) geen CSS-vars definieert.
   ========================================================================== */

.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav.scrolled {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 15px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
}

.nav-logo img {
	height: 200px;
	width: auto;
	content: url('website/logo_wit.svg');
	transition: height 0.3s ease;
}

.nav.scrolled .nav-logo img {
	content: url('website/logo_groen.svg');
	height: 100px;
}

.nav-menu {
	display: flex;
	gap: 35px;
	align-items: center;
}

.nav-link {
	text-decoration: none;
	color: #ffffff;
	font-weight: 300;
	font-size: 17px;
	transition: all 0.3s ease;
	position: relative;
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary, #83bc37);
	transition: width 0.3s ease;
}

.nav-link:hover {
	color: var(--primary-light, #a5d662);
}

.nav-link:hover::after {
	width: 100%;
}

.nav.scrolled .nav-link {
	color: var(--text, #333333);
}

.nav.scrolled .nav-link:hover {
	color: var(--primary, #83bc37);
}

.nav-cta {
	padding: 14px 60px;
	background: var(--primary, #83bc37);
	color: #ffffff;
	text-decoration: none;
	border-radius: 0;
	font-weight: 600;
	font-size: 17px;
	min-width: 180px;
	text-align: center;
	transition: all 0.3s ease;
}

.nav-cta:hover {
	background: var(--primary-dark, #6fa02e);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(166, 206, 57, 0.3);
}

/* Footer huisstijl fietsendnaarjewerk.nl - spaarpaal-portal (v2 full-bleed) */
/* Alles gescoped onder .footer. De footer breekt full-bleed uit het 1200px */
/* #allcontent-kader; de content blijft in een gecentreerde 1200px-baan. */
/* NIET fixed: loopt mee in de pagina-flow. */
/* html/body overflow-x:hidden wordt door executor I geregeld. */
/* var()-fallbacks: kleuren werken ook zonder huisstijl-variabelen in style.css. */

.footer {
    background: var(--dark, #2D3E1F);
    color: #ffffff;
    padding: 40px 0 20px;
    margin-top: 40px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 0 30px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-section h4 {
    font-size: 18px;
    margin: 0 0 15px;
    color: var(--primary-light, #a5d662);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin: 0 0 10px;
    font-size: 14px;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--primary, #83bc37);
}

.footer-logo {
    height: 80px;
    width: auto;
    margin-bottom: 15px;
}

.footer-tagline {
    opacity: 0.8;
    font-size: 13px;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 30px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.footer-bottom p {
    margin: 0;
}

.footer-user {
    text-align: right;
}

@media (max-width: 640px) {
    .footer-content {
        padding: 0 25px;
        gap: 25px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 20px 25px 0;
    }

    .footer-user {
        text-align: center;
    }
}

/* === HTML-FASE FIX: footer-koppen === */
/* Het eerder gedeployde reskin-blok zet H2, H4 { color: var(--dark) !important }, */
/* wat de h4-kolomkoppen donkergroen-op-donkergroen maakt. Hogere specificiteit  */
/* (.footer .footer-section) + !important wint hiervan terug. */
.footer .footer-section h4 {
    color: var(--primary-light, #a5d662) !important;
}

/*
 * Statische hero voor de ingelogde pheader (vervangt de MooTools-crossfade
 * met header1.jpg/header2.jpg). Rendert full-bleed, breekt bewust uit het
 * gecentreerde #allcontent (max-width:1200px) via de 100vw/calc-truc.
 *
 * Aanname geverifieerd in include/settingclass.php::WriteHTMLHeader() en
 * style.css: <body> bevat direct <div id="allcontent"> (geen position:
 * relative/absolute/fixed of overflow/transform op html, body of
 * #allcontent) en .pheader-hero komt als eerste content na de nav binnen
 * #allcontent. Er is dus geen positioned ancestor tussen .pheader-hero en
 * de viewport, dus de calc(50% - 50vw) full-bleed-truc breekt correct uit
 * naar 100% viewportbreedte.
 */

/* Enige toegestane niet-.pheader-hero-regel: voorkomt de horizontale
   scrollbar die 100vw (incl. scrollbar-breedte) anders veroorzaakt. */
html, body {
	overflow-x: hidden;
}

/* Donkergroene band i.p.v. de fotoplaat, op de halve hoogte: zelfde gradient
   als de mijn-fnjw-hero op fietsendnaarjewerk.nl. Geldt overal (in- en
   uitgelogd); login.html heeft zijn eigen opmaak en blijft zoals hij is.
   De ::after-overlay verviel mee - die gaf alleen contrast op de foto. */
.pheader-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 8px;
	height: 28vh;
	min-height: 210px;
	background: linear-gradient(135deg, #1a3d17 0%, #2d5a27 50%, #3d7a35 100%);
	border-radius: 0;
	overflow: hidden;
}

/* === FASE 9: witruimte === */
/*
 * Losstaand spacing-blok (executor A) n.a.v. gebruikersfeedback: content en
 * menu zaten te dicht op elkaar, zowel horizontaal (geen gutter tussen de
 * groene knop-kolom en de content-kolom) als verticaal (hero -> kolommen,
 * H1 -> tabel/knoppen). ALLEEN witruimte; geen kleuren/typografie/structuur.
 *
 * Cascade: dit blok wordt na fase4-A en na htmlfase/hero.css geappend, dus
 * bij gelijke specificiteit wint dit blok (geen !important nodig voor die
 * overrides). Widths van de 1200/340/900-lay-out blijven onaangetast:
 * box-sizing:border-box laat de nieuwe padding BINNEN de gedeclareerde
 * kolombreedtes vallen, zodat er geen cel groeit en er geen horizontale
 * overflow ontstaat.
 */

/* --- Horizontale gutter tussen linkermenu (340px) en content (900px) --- */

/* Content-kolom: gutter aan de linkerkant. De td heeft alleen 'width:900px'
   inline (geen padding), dus deze regel wint van de basis td{padding:0}.
   border-box houdt de buitenmaat op 900px (padding eet naar binnen). */
td[style*="900px"] {
  box-sizing: border-box;
  padding-left: 36px !important;
}

/* Linkerkolom: kleine rechter-padding zodat de groene knoppen niet tegen de
   gutter-rand plakken. Alleen padding-right als longhand -> de inline
   padding-left:10px blijft staan. border-box houdt de buitenmaat op 340px. */
td[style*="340px"] {
  box-sizing: border-box;
  padding-right: 12px;
}

/* --- Verticale lucht --- */

/* Ruimte tussen de full-bleed hero en de menu/content-kolommen.
   hero.css zet margin-bottom:8px; dit blok komt later -> 32px wint. */
.pheader-hero {
  margin-bottom: 32px;
}

/* Content-H1 ('Welkom ...', 'Onderhoud personeel', ...) ruimere marges,
   zodat de kop lucht heeft t.o.v. de hero erboven en de tabel/knoppen
   eronder. Wint van fase4-A (zelfde selector, later in de cascade). */
td[style*="900px"] > H1 {
  margin: 36px 0 28px;
}

/* Ademruimte boven de content-blokken: rapport/lijst-tabellen (#deftable),
   de spaarshop-grid (#shoparea) en de content-card (.home). Alleen een
   top-marge -- geen herstyling van die surfaces van andere executors. */
#deftable,
#shoparea,
.home {
  margin-top: 14px;
}

/* Losse submit-knoppen onder tabellen ('Nieuw personeelslid', 'Nieuwe tabel',
   'Toon overzicht', 'Invoeren') iets meer lucht boven zich. Scope: alleen in
   de content-kolom; raakt de veldstyling van D niet (die sluit [type=submit]
   uit). */
td[style*="900px"] input[type="submit"] {
  margin-top: 14px;
}

/* --- Binnen de linkerkolom: iets meer lucht tussen sectiekop en 1e knop --- */
/* De eerste knop volgt direct op de h2 (geen br ertussen); adjacent-sibling
   voegt alleen een top-marge toe bovenop de bestaande h2-margin van E. */
td[style*="340px"] > h2 + a {
  margin-top: 8px;
}

/* === MOBIEL: nav === */

/* Tablet en kleiner: de vijf www-links vervallen (niet essentieel in het portal --
   alle portaalfuncties zitten in het linkermenu). Logo en uitloggen-CTA blijven;
   logo kleiner, CTA compacter. Geen hamburger. */
@media (max-width: 968px) {
	.nav-menu {
		display: none;
	}

	.nav-logo img {
		height: 90px;
	}

	.nav.scrolled .nav-logo img {
		height: 56px;
	}

	.nav-cta {
		padding: 10px 20px;
		min-width: 0;
	}
}

/* Telefoon: logo nog compacter en strakkere container-padding. */
@media (max-width: 640px) {
	.nav-container {
		padding: 10px 16px;
	}

	.nav-logo img {
		height: 64px;
	}

	.nav.scrolled .nav-logo img {
		height: 46px;
	}
}

/* === MOBIEL: layout === */
/*
 * Mobiele layout-stack (executor A). Werkt pas nu er een <meta viewport> in de
 * header komt. UITSLUITEND regels binnen media queries: desktop (>=969px)
 * verandert met geen pixel.
 *
 * Structuur (zie html/home.html):
 *   #allcontent (max-width 1200) > nav.nav + .pheader-hero
 *     + #wrapper2 (basis width:1200px!) > table[width:100%]
 *        > tbody > tr > td[width:340px] (menu) + td[width:900px] (content)
 *   + footer.footer (full-bleed)
 * Logged-out variant: #wrapper1 (width:1200px) > td[width:370px] + #crossfade + #inlogbox.
 *
 * Scoping-regels:
 *  - De stack-regels raken ALLEEN de directe wrapper-table van #wrapper2/#wrapper1
 *    en de twee wrapper-td's (via hun style-attribuut-hooks). Nooit display:block
 *    op willekeurige tables -> #deftable/#formulier (executor D) en de nesting
 *    binnen de content-td blijven ongemoeid; die zitten dieper dan de hier
 *    gebruikte directe-kind-selectors.
 *  - De nav (.nav*) is niet van mij (executor B); die wordt hier niet aangeraakt.
 *  - html/body overflow-x:hidden bestaat al (hero.css).
 */

@media (max-width: 968px) {

  /* --- Vaste 1200px-containers loslaten (anders overflowt alles) --- */
  #wrapper2,
  #wrapper1,
  #main {
    width: auto !important;
    max-width: 100%;
  }

  /* --- Hoofdtabel van #wrapper2 stapelen. Alleen de wrapper-table zelf,
     niet de tabellen daarbinnen. --- */
  #wrapper2 > table,
  #wrapper2 > table > tbody,
  #wrapper2 > table > tbody > tr {
    display: block;
    width: auto !important;
  }

  /* De twee wrapper-td's via hun inline-width-hooks: full-width blokken,
     inline widths (340/900) overtroefd. Menu-kolom staat in de bron eerst,
     dus komt vanzelf bovenaan. --- */
  td[style*="340px"],
  td[style*="900px"] {
    display: block;
    width: auto !important;
  }

  /* Linkermenu-kolom: volle breedte, compacte zij-padding, ruimte onder de
     knoppenlijst. De knop-links (executor E) zijn al display:block en worden
     zo full-width gestapelde knoppen -- geen wijziging aan de knoppen zelf.
     !important overtroeft de inline padding-left:10px en de fase9 padding-right. */
  td[style*="340px"] {
    padding: 8px 16px 16px !important;
  }

  /* Content-kolom: volle breedte; de 36px-gutter uit fase9 terugschroeven naar
     een gewone mobiele zij-padding. */
  td[style*="900px"] {
    padding: 0 16px !important;
  }

  /* Content-H1 wat compacter op mobiel; body blijft 16px (fase1). */
  td[style*="900px"] > H1 {
    font-size: 26px;
    margin: 20px 0 16px;
  }

  /* --- Hero lager op mobiel --- */
  .pheader-hero {
    height: 28vh;
    min-height: 180px;
    margin-bottom: 20px;
  }

  /* --- Content-blokken op volle breedte --- */
  .home {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Spaarshop: box op volle breedte en de product-cards laten wrappen.
     Strak gescoped op #shoparea (raakt #deftable/#formulier niet). De rijen
     worden blokken, de directe cellen inline-block zodat #artikelbox-cards
     over meerdere regels breken op smalle schermen. Alleen deze wrapper-tabel
     verandert; de #artikelbox-binnentabellen blijven gewone tables. */
  #shoparea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #shoparea > tbody,
  #shoparea > tbody > tr {
    display: block;
  }
  #shoparea > tbody > tr > td {
    display: inline-block;
    vertical-align: top;
    height: auto !important;
  }
  #artikelbox {
    max-width: 100%;
  }

  /* --- Footer: kolommen stapelen (grid is auto-fit, minmax 220px -> stapelt
     vanzelf op smalle schermen); hier alleen compactere maatvoering. --- */
  .footer {
    padding: 32px 0 20px;
    margin-top: 24px;
  }
  .footer-content {
    gap: 24px;
    margin-bottom: 24px;
  }

  /* --- Logged-out variant (uitgelogd): niet fraai, wel heel: geen 1200px-
     overflow meer. #inlogbox-positie wordt bewust niet 'gerepareerd' (de echte
     login loopt via login.html; deze index is uit scope). --- */
  #wrapper1 > table,
  #wrapper1 > table > tbody,
  #wrapper1 > table > tbody > tr {
    display: block;
    width: auto !important;
  }
  td[style*="370px"] {
    display: block;
    width: auto !important;
    padding: 0 16px !important;
  }
  #crossfade {
    width: auto !important;
    max-width: 100%;
  }
}

/* === MOBIEL: tabellen + formulieren === */

@media (max-width: 968px) {

  /* --- #deftable: horizontaal scrollbaar i.p.v. pagina verbreden.
     border/border-radius/box-shadow uit fase6-D.css worden hier niet
     aangeraakt en blijven dus behouden; alleen display/overflow wijzigen. --- */
  #deftable {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  .tableth,
  .tabletd {
    padding: 6px 8px !important;
  }

  /* --- #formulier / #formulier-h: label- en veldcellen stapelen.
     Ook eventuele geneste tabellen (bv. de datum-tabel in /transacties)
     krijgen display:block, anders ontstaan er anonieme table-boxes. --- */
  #formulier,
  #formulier-h,
  #formulier table,
  #formulier-h table,
  #formulier tr,
  #formulier-h tr,
  #formulier th,
  #formulier-h th,
  #formulier td,
  #formulier-h td {
    display: block;
    width: 100%;
  }
  #formulier tr,
  #formulier-h tr {
    margin-bottom: 10px;
  }

  /* --- Velden binnen formulieren: volle breedte, checkbox/radio uitgezonderd --- */
  #formulier input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="hidden"]),
  #formulier-h input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="hidden"]),
  #formulier select,
  #formulier-h select,
  #formulier textarea,
  #formulier-h textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Alle velden (ook buiten #formulier, bv. datepicker/autocomplete):
     minimaal 16px, anders zoomt iOS Safari in bij focus. --- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* --- Losse submit-knoppen: volle breedte met maximum --- */
  input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 320px;
  }

}