/* Online Strippenkaart - algemene vormgeving */

:root {
    --primary: #39796b;
    --primary-dark: #285e53;
    --primary-light: #e6f1ee;
    --secondary: #d9a85f;
    --secondary-light: #f8f0e4;
    --background: #f6f8f7;
    --surface: #ffffff;
    --text: #26332f;
    --text-light: #65736e;
    --border: #dce5e2;
    --success: #2f7d5b;
    --error: #a94442;
    --info: #39796b;
    --shadow: 0 8px 30px rgba(31, 55, 48, 0.08);
    --radius: 14px;
    --radius-small: 9px;
    --max-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--primary-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: min(calc(100% - 40px), var(--max-width));
    margin: 0 auto;
}

h1, h2, h3 {
    color: var(--text);
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1rem;
}

/* Header */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}

.site-header .container {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.logo a {
    color: var(--primary-dark);
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
}

.main-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.main-nav a {
    font-weight: 600;
    text-decoration: none;
}

/* Knoppen */

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--radius-small);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover,
button:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.button-primary {
    background: var(--primary);
    color: #fff;
}

.button-primary:hover {
    background: var(--primary-dark);
}

.button-secondary {
    background: var(--secondary-light);
    color: var(--text);
}

.button-danger {
    background: #f7e8e8;
    color: #8a3232;
}

/* Homepage */

.hero {
    padding: 80px 0;
}

.hero .container {
    max-width: 850px;
}

.hero p {
    color: var(--text-light);
    font-size: 1.15rem;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.features {
    padding: 20px 0 70px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

/* Formulieren */

.auth-page {
    padding: 55px 0;
}

.auth-container {
    width: min(calc(100% - 30px), 560px);
    margin: 0 auto;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-logo {
    text-align: center;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: #fff;
    color: var(--text);
    font: inherit;
}

.form-group textarea {
    min-height: 130px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 3px solid rgba(57, 121, 107, .15);
    border-color: var(--primary);
}

.form-group small {
    display: block;
    color: var(--text-light);
    margin-top: 5px;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: auto;
}

.auth-links {
    margin-top: 22px;
    text-align: center;
}

/* Meldingen */

.melding {
    margin: 18px 0;
    padding: 14px 16px;
    border-radius: var(--radius-small);
    border: 1px solid transparent;
}

.melding-succes {
    background: #eaf6ef;
    border-color: #c9e7d5;
    color: #285f44;
}

.melding-fout {
    background: #fbecec;
    border-color: #efcccc;
    color: #8a3232;
}

.melding-info {
    background: var(--primary-light);
    border-color: #cfe2dd;
    color: var(--primary-dark);
}

/* Tabellen */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    background: #f1f5f4;
    font-weight: 700;
}

/* Footer */

.site-footer {
    margin-top: 50px;
    padding: 28px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-light);
}

.site-footer p {
    margin: 0;
}

/* Toegankelijkheid */

:focus-visible {
    outline: 3px solid rgba(57, 121, 107, .35);
    outline-offset: 2px;
}

::selection {
    background: var(--primary-light);
    color: var(--text);
}

/* 2026 geïntegreerde Strippenkaart-vormgeving */
body{font-family:Inter,Segoe UI,Arial,sans-serif;color:#0f2347;background:#f4f8fb}.brand{display:flex;align-items:center;gap:10px;color:#102448;text-decoration:none}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:58px;height:40px;font-size:44px;font-weight:800;line-height:1;color:#198bd7;background:linear-gradient(135deg,#168ee1,#47c5ad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.brand strong{display:block;font-size:20px}.brand small{display:block;font-size:9px;color:#52627a;font-weight:500}.site-header{box-shadow:0 1px 0 rgba(15,35,71,.07)}.feature{border-color:#e6edf2;box-shadow:0 8px 26px rgba(35,62,84,.06)}.button-primary{background:linear-gradient(135deg,#2f806f,#278e79)}.button-primary:hover{background:#246b5e}.hero{background:linear-gradient(90deg,rgba(244,249,252,.97),rgba(244,249,252,.72)),url('/img/backgrounds/login-background.webp') center/cover no-repeat}.auth-page{min-height:calc(100vh - 75px);background:linear-gradient(90deg,rgba(244,249,252,.92),rgba(255,255,255,.78)),url('/img/backgrounds/login-background.webp') center/cover no-repeat}.auth-container{border:0;box-shadow:0 18px 60px rgba(24,50,76,.13)}


/* ===== V11 Tarieven ===== */
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#39796b;margin-bottom:8px}
.pricing-hero{padding:72px 0 46px;background:linear-gradient(145deg,#f7fbf9,#f4eee5)}
.pricing-hero h1{max-width:760px;margin:0 0 14px;font-size:clamp(34px,5vw,56px);line-height:1.06;color:#244e46}
.pricing-hero p{max-width:700px;font-size:19px;line-height:1.6;color:#536761}
.pricing-section{padding:54px 0}
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:980px;margin:0 auto}
.pricing-card{position:relative;padding:34px;border:1px solid #dfe9e5;border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(36,78,70,.07)}
.pricing-card-featured{border:2px solid #39796b}
.pricing-card h2{margin:8px 0 12px;color:#244e46}
.pricing-badge{display:inline-flex;padding:6px 11px;border-radius:999px;background:#e6f3ef;color:#2d6b5e;font-size:12px;font-weight:800}
.pricing-badge-free{background:#f6ead9;color:#886023}
.pricing-price{display:flex;align-items:flex-end;gap:10px;margin:18px 0}
.pricing-price strong{font-size:40px;line-height:1;color:#285e53}
.pricing-price span{color:#71817c}
.pricing-list{list-style:none;padding:0;margin:22px 0 28px}
.pricing-list li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid #edf2f0}
.pricing-list li:before{content:'✓';position:absolute;left:2px;color:#39796b;font-weight:900}
.pricing-terms{padding:0 0 70px}
.pricing-terms-card{max-width:980px;margin:0 auto;padding:34px;border-radius:20px;background:#f7faf9;border:1px solid #e2ebe8}
.pricing-terms-card h2{margin-top:0;color:#244e46}
.pricing-terms-card p{line-height:1.65}
.pricing-small{font-size:13px;color:#687a74}
.home-pricing{padding:18px 0 62px}
.home-pricing-card{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px 34px;border-radius:20px;background:#f3f8f6;border:1px solid #dbe9e4}
.home-pricing-card h2{margin:4px 0 7px;color:#244e46}
.home-pricing-card p{margin:0}
@media(max-width:760px){
 .pricing-grid{grid-template-columns:1fr}
 .pricing-card{padding:24px}
 .home-pricing-card{flex-direction:column;align-items:flex-start}
}

/* Fase 6A: intake per onderdeel, ook op mobiel. */
.intake-progress progress{display:block;width:100%;height:12px;margin:12px 0}.intake-section-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.intake-section-nav a{padding:10px 14px;border:1px solid #c8d4df;border-radius:9px;text-decoration:none}.intake-section-nav a.is-active{background:#e8f4f4;border-color:#367c7b;font-weight:700}.intake-save-actions{display:flex;gap:10px;flex-wrap:wrap}.intake-field small{font-weight:400;opacity:.7}