/* ingang.css, ingangspagina voor een bezoeker zonder account (herontwerp keuze A, mockup h).
   Laadt consumer.css, dat --paper/--surface/--ink/--stone/--mist/--accent/--navy themt
   (licht + donker). Geen hardcoded kleuren, alle maten in rem. */
.ing { --lijn: var(--mist); --zacht: var(--stone); min-height: 100vh; display: flex; flex-direction: column; }
.ing-top .hdr-right { gap: 1.25rem; }
.ing-top .btn { padding: .55rem 1rem; font-size: .875rem; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--lijn); }
.ing-main { flex: 1; width: 100%; max-width: 76rem; margin: 0 auto; }

.ing-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 3.5rem 3rem 2.5rem; }
.ing-label { display: block; margin: 0; font-family: var(--sans); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-ink); }
.ing-hero h1 { font-family: var(--serif); font-size: 2.5rem; line-height: 1.15; margin: .5rem 0 1rem; color: var(--navy); }
.ing-hero h1 em { font-style: normal; color: var(--accent); }
.ing-lead { font-size: 1.0625rem; color: var(--zacht); margin: 0; max-width: 38rem; }
.ing-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; align-items: center; }
.ing-noot { font-size: .85rem; color: var(--zacht); margin: .75rem 0 0; }

.ing-rolkaart { background: var(--surface); border: 1px solid var(--lijn); border-radius: .75rem; padding: 1.25rem 1.375rem; }
.ing-rollen { list-style: none; margin: .75rem 0 0; padding: 0; counter-reset: rol; }
.ing-rollen li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--lijn); font-size: .9375rem; }
.ing-rollen li:first-child { border-top: 0; }
.ing-rol::before { counter-increment: rol; content: counter(rol) ". "; color: var(--zacht); }
.ing-meta { color: var(--zacht); font-size: .8125rem; white-space: nowrap; }

.ing-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0 3rem 2.5rem; }
.ing-feit { background: var(--surface); border: 1px solid var(--lijn); border-radius: .75rem; padding: 1rem 1.125rem; }
.ing-feit h3 { font-size: .9375rem; margin: 0 0 .25rem; color: var(--ink); }
.ing-feit p { margin: 0; font-size: .875rem; color: var(--zacht); }

.ing-voet { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; padding: 1rem 3rem; border-top: 1px solid var(--lijn); font-size: .8125rem; color: var(--zacht); }
.ing-voet a { color: inherit; text-decoration: none; display: inline-block; padding: .35rem 0; }
.ing-voet a:hover, .ing-teams:hover { color: var(--accent); }
.ing-sp { flex: 1; }

@media (max-width: 60rem) {
  .ing-hero { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1rem; }
  .ing-hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .ing-lead { font-size: .9375rem; }
  .ing-cta .btn { width: 100%; }
  .ing-feiten { grid-template-columns: 1fr; padding: 0 1rem 2rem; }
  .ing-voet { padding: 1rem; }
  .ing-top { padding: .75rem 1rem; }
  .ing-teams { display: none; }
  .ing-rollen li { flex-direction: column; gap: .1rem; }
}

/* Deeplink-redding (ingang.js): zelfde balk als de oude landing. */
.deeplink-balk{
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1.2rem; background:var(--bronze-soft,#f4ece0);
  border-bottom:1px solid var(--mist,#e4e1d9);
  font-size:.92rem; line-height:1.4; text-align:center;
}
.deeplink-balk .btn{ font-size:.85rem; padding:.5em .95em; white-space:nowrap; }