/* ============================================================
   Pinken-logboek — UI v4.3
   Volledige vervanging voor app/static/style.css
   NIEUW in v4.3:
   - FIX1 Statusweergave: kader/schaduw/kopband verwijderd (rustig,
     zoals de andere instellingenpagina's) en kolommen flexibeler
     zodat geen tekst meer afgekapt wordt (breekpunten 1100/560px).
   - FIX2 Foto's veel groter: kaartfoto 140px, detailfoto 200px
     (mobiel 150px), kaarten minimaal 280px breed.
   ============================================================ */
:root {
  --kleur-achtergrond: #faf5ec;
  --kleur-vlak: #fffdf8;
  --kleur-tekst: #3d332a;
  --kleur-tekst-zacht: #8a7a68;
  --kleur-lijn: #e8ddcb;
  --kleur-accent: #5a7a4f;
  --kleur-accent-zacht: #eef0e4;
  --terracotta: #c26a3f;
  --lettertype-kop: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --lettertype-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--kleur-achtergrond); color: var(--kleur-tekst);
  font-family: var(--lettertype-body); line-height: 1.55;
  padding-bottom: 96px;
}
@media (min-width: 700px) { body { padding-bottom: 1rem; } }
h1, h2, h3 { font-family: var(--lettertype-kop); }
a { color: var(--kleur-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kleur-accent); outline-offset: 2px;
}
.kop {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--kleur-lijn);
  background: var(--kleur-vlak); flex-wrap: wrap;
}
.kop-titel { font-family: var(--lettertype-kop); font-size: 1.4rem; color: var(--kleur-accent); font-weight: 700; }
.kop-titel:hover { text-decoration: none; }
.kop-titel-logboek { font-weight: normal; color: var(--terracotta); }
.kop-badge {
  font-size: 0.85rem; color: var(--terracotta); background: #fdf3e4;
  border: 1px solid var(--terracotta); padding: 0.25rem 0.7rem; border-radius: 999px;
}
.inhoud { max-width: 1000px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.voet { text-align: center; color: var(--kleur-tekst-zacht); font-size: 0.85rem; padding: 2rem 1rem 3rem; }
.paginatitel { font-family: var(--lettertype-kop); margin-top: 0; }
.subtitel { font-family: var(--lettertype-kop); font-size: 1.05rem; margin: 1.8rem 0 0.6rem; border-bottom: 1px solid var(--kleur-lijn); padding-bottom: 0.3rem; }
.hulp { color: var(--kleur-tekst-zacht); font-size: 0.85rem; display: block; }
p.hulp { margin: 0.3rem 0 0.9rem; }
.icoon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.inhoud.breed { max-width: 1180px; }
code { background: var(--kleur-accent-zacht); padding: 0.05rem 0.3rem; font-size: 0.85em; }
.leeg { color: var(--kleur-tekst-zacht); font-style: italic; }
.terug { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; min-height: 44px; margin-bottom: 0.75rem; }
.sectie { margin-bottom: 2.5rem; }
.sectie h2 { font-family: var(--lettertype-kop); font-size: 1.1rem; border-bottom: 1px solid var(--kleur-lijn); padding-bottom: 0.4rem; margin-bottom: 1rem; }

.events-strook {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 14px;
  padding: 0.9rem 1rem; margin: 1rem 0 1.25rem;
  box-shadow: 0 1px 3px rgba(61, 51, 42, 0.06);
}
.events-strook h2 { font-size: 1rem; color: var(--kleur-accent); margin-bottom: 0.4rem; }
.event-rij {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0;
  border-top: 1px solid var(--kleur-lijn); font-size: 0.92rem; flex-wrap: wrap;
}
.event-rij:first-of-type { border-top: none; }
.event-stip { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.event-dag { font-weight: 700; min-width: 96px; }
.event-tekst { color: var(--kleur-tekst-zacht); flex: 1; min-width: 200px; }
.event-tekst strong, .event-tekst a { color: var(--kleur-tekst); }

/* ---------- Dashboard: foto's GROOT (FIX2) ---------- */
.dieren-rooster {
  display: grid; gap: 1rem; margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.dierkaart {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn);
  border-left: 6px solid var(--status-kleur, var(--kleur-accent));
  border-radius: 14px; padding: 0.9rem;
  display: flex; gap: 1rem; align-items: center;
  box-shadow: 0 1px 3px rgba(61, 51, 42, 0.06);
  color: inherit; transition: transform 0.1s, box-shadow 0.1s;
}
.dierkaart:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 51, 42, 0.12);
  border-color: var(--status-kleur, var(--kleur-accent));
}
.dierkaart-foto { width: 140px; height: 140px; border-radius: 14px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--kleur-lijn); }
.dierkaart-foto-leeg {
  width: 140px; height: 140px; border-radius: 14px; flex-shrink: 0;
  background: var(--kleur-accent-zacht);
  display: flex; align-items: center; justify-content: center;
  color: var(--kleur-accent); font-family: var(--lettertype-kop); font-size: 2.6rem;
}
.dierkaart-info { flex: 1; min-width: 0; }
.dierkaart-naam { font-family: var(--lettertype-kop); font-size: 1.25rem; font-weight: 700; }
.statusbadge {
  display: inline-block; margin-top: 0.3rem; font-size: 0.8rem; font-weight: 600;
  background: var(--status-kleur, var(--kleur-accent)); color: #fff;
  padding: 0.25rem 0.6rem; border-radius: 6px;
}
.dierkaart-volgende { color: var(--kleur-tekst-zacht); font-size: 0.88rem; margin-top: 0.35rem; }
.dierkaart-volgende strong { color: var(--kleur-tekst); }
.aftel { white-space: nowrap; }

/* ---------- Detailpagina: foto GROOT (FIX2) ---------- */
.hero {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(61, 51, 42, 0.06);
  overflow: hidden; margin-bottom: 1rem;
}
.hero-boven { display: flex; gap: 1.2rem; padding: 1.1rem; align-items: center; border-bottom: 1px solid var(--kleur-lijn); }
.hero-foto { width: 200px; height: 200px; border-radius: 18px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--kleur-lijn); }
@media (max-width: 600px) { .hero-foto { width: 150px; height: 150px; } .hero-id h1 { font-size: 1.4rem; } }
.hero-foto-leeg {
  background: var(--kleur-accent-zacht);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lettertype-kop); font-size: 3.2rem; color: var(--kleur-accent);
}
.hero-id { flex: 1; min-width: 0; }
.hero-id h1 { font-size: 1.7rem; line-height: 1.15; }
.hero-facts { display: flex; gap: 1.2rem; margin-top: 0.5rem; flex-wrap: wrap; }
.fact { font-size: 0.85rem; color: var(--kleur-tekst-zacht); }
.fact strong { display: block; color: var(--kleur-tekst); font-size: 1rem; }
.hero-voortgang { padding: 1.1rem; }
.vp-labels { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--kleur-tekst-zacht); margin-bottom: 0.4rem; }
.vp-balk { height: 16px; background: var(--kleur-accent-zacht); border-radius: 999px; overflow: hidden; }
.vp-vulling { height: 100%; width: 0%; background: #15803d; border-radius: 999px; transition: width 0.4s; }
.vp-groot { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.vp-groot .getal { font-family: var(--lettertype-kop); font-size: 2.2rem; font-weight: 700; color: #15803d; }
.vp-groot .rest { color: var(--kleur-tekst-zacht); font-size: 0.9rem; }

.toelichting {
  background: var(--kleur-accent-zacht); border: 1px solid var(--kleur-lijn); border-radius: 12px;
  padding: 0.7rem 1rem; font-size: 0.88rem; margin-bottom: 1rem;
  display: flex; gap: 0.6rem; align-items: flex-start;
}
.toelichting details { flex: 1; }
.toelichting summary { cursor: pointer; font-weight: 600; color: var(--kleur-accent); }
.toelichting details p { margin-top: 0.4rem; color: var(--kleur-tekst-zacht); }

.registratie {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(61, 51, 42, 0.06);
  margin-bottom: 1.25rem; overflow: hidden;
}
.tabs { display: flex; border-bottom: 1px solid var(--kleur-lijn); }
.tab {
  flex: 1; min-height: 52px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--kleur-tekst-zacht);
  border-bottom: 3px solid transparent;
}
.tab.actief { color: var(--kleur-accent); border-bottom-color: var(--terracotta); }
.tab-paneel { padding: 1.1rem; display: none; }
.tab-paneel.actief { display: block; }

.formulier { display: flex; flex-direction: column; gap: 0.35rem; }
.formulier label, .registratie label {
  font-size: 0.85rem; color: var(--kleur-tekst-zacht); font-weight: 600;
  display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.6rem;
}
.formulier input, .formulier select, .formulier textarea,
.registratie input, .registratie select, .registratie textarea {
  font: inherit; font-size: 1rem; padding: 0.6rem 0.7rem;
  border: 1px solid var(--kleur-lijn); border-radius: 10px;
  background: #fff; color: var(--kleur-tekst); min-height: 44px;
}
.formulier textarea, .registratie textarea { min-height: 4.5rem; resize: vertical; }
.formulier-rij { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.formulier-rij .knop { margin-top: 0; align-self: auto; }
.formulier-rij > div { flex: 1; min-width: 140px; }
.formulier.breed { max-width: none; }
.vinkje { flex-direction: row !important; align-items: center; gap: 0.5rem !important; color: var(--kleur-tekst) !important; font-size: 0.95rem !important; }
.vinkje input { width: auto; min-height: 0; }

.knop {
  font: inherit; background: var(--kleur-accent); color: #fff; border: none;
  padding: 0.7rem 1.2rem; border-radius: 10px; cursor: pointer; font-weight: 600;
  min-height: 48px; align-self: flex-start; margin-top: 1rem;
}
.knop:hover { background: #4a6640; }
a.knop { text-decoration: none; display: inline-block; color: #fff; }
a.knop:hover { text-decoration: none; background: #4a6640; }
.knop-secundair { background: transparent; border: 1px solid var(--kleur-lijn); color: var(--kleur-tekst); }
.knop-secundair:hover { background: var(--kleur-accent-zacht); }
a.knop-secundair, a.knop.knop-secundair { color: var(--kleur-tekst); background: transparent; }
a.knop-secundair:hover { background: var(--kleur-accent-zacht); }
.knop.klein { padding: 0.35rem 0.7rem; font-size: 0.82rem; min-height: 36px; }
.knop-gevaar { background: transparent; border: 1px solid #c2410c; color: #c2410c; }
.knop-gevaar:hover { background: #c2410c; color: white; }
.knop[disabled], .formulier input[disabled] { opacity: 0.5; cursor: not-allowed; }

.paneel {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 16px;
  padding: 1.1rem; box-shadow: 0 1px 3px rgba(61, 51, 42, 0.06); margin-bottom: 1.25rem;
}
.paneel h2 { color: var(--kleur-accent); font-size: 1.1rem; margin-bottom: 0.9rem; }
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn-item {
  position: relative; padding: 0 0 1.2rem 1.9rem;
  border-left: 2px solid var(--kleur-lijn); margin-left: 8px;
}
.tijdlijn-item:last-child { border-left: 2px solid transparent; padding-bottom: 0.2rem; }
.tijdlijn-item::before {
  content: ""; position: absolute; left: -8px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--kleur-accent); border: 3px solid var(--kleur-vlak);
  box-shadow: 0 0 0 1px var(--kleur-lijn);
}
.tijdlijn-item.gebeurtenis::before { background: #a16207; }
.tijdlijn-item.observatie::before { background: #15803d; }
.tijdlijn-item.prognose { opacity: 0.75; }
.tijdlijn-item.prognose::before {
  background: transparent; border: 2px dashed var(--kleur-tekst-zacht);
  width: 10px; height: 10px; left: -6px;
}
.tijdlijn-item.prognose .tijdlijn-type { font-style: italic; font-weight: 500; }
.tijdlijn-datum { font-size: 0.8rem; color: var(--kleur-tekst-zacht); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.tijdlijn-type { font-weight: 600; }
.tijdlijn-notitie {
  font-size: 0.9rem; color: var(--kleur-tekst); background: var(--kleur-achtergrond);
  border-left: 3px solid var(--kleur-lijn); border-radius: 0 8px 8px 0;
  padding: 0.4rem 0.7rem; margin-top: 0.35rem;
}
.tijdlijn-acties { margin-top: 0.25rem; }
.tijdlijn-acties a { font-size: 0.78rem; color: var(--kleur-tekst-zacht); text-decoration: underline; }
.tijdlijn-label-verwacht {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--kleur-tekst-zacht); border: 1px solid var(--kleur-lijn);
  padding: 0.05rem 0.4rem; border-radius: 5px; background: var(--kleur-achtergrond);
}

.beheer-paneel {
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); border-radius: 16px;
  padding: 0.6rem 1.1rem; margin-bottom: 1.25rem;
}
.beheer-paneel summary { cursor: pointer; font-weight: 600; color: var(--kleur-accent); min-height: 44px; display: flex; align-items: center; }
.beheer-paneel[open] summary { margin-bottom: 0.5rem; }
.beheer-sectie { border-top: 1px dashed var(--kleur-lijn); padding: 1rem 0; }
.beheer-sectie h3 { font-size: 1rem; color: var(--kleur-tekst); margin-bottom: 0.5rem; }

.deel-link-box {
  background: var(--kleur-accent-zacht); border: 1px solid var(--kleur-lijn);
  padding: 1rem; margin-top: 1.5rem; font-size: 0.9rem; border-radius: 14px;
}
.deel-link-box code {
  display: block; margin-top: 0.4rem; word-break: break-all;
  background: var(--kleur-vlak); padding: 0.5rem; border: 1px solid var(--kleur-lijn);
}

.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.9rem; border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak);
  color: var(--kleur-tekst); font-size: 0.95rem; user-select: none; border-radius: 999px; min-height: 44px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--kleur-accent-zacht); }
.menu-lijst {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; z-index: 20;
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn); padding: 0.3rem 0;
  box-shadow: 0 2px 8px rgba(61, 51, 42, 0.12); border-radius: 12px;
}
.menu-lijst a { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; color: var(--kleur-tekst); font-size: 0.95rem; }
.menu-lijst a:hover { background: var(--kleur-accent-zacht); text-decoration: none; }
.menu-lijst hr { border: none; border-top: 1px solid var(--kleur-lijn); margin: 0.3rem 0; }

.mobnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--kleur-vlak); border-top: 1px solid var(--kleur-lijn);
  display: flex; justify-content: space-around; align-items: center;
  padding: 0.4rem 0.5rem 0.6rem;
}
.mobnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--kleur-tekst-zacht); text-decoration: none; font-size: 0.7rem;
  min-height: 44px; min-width: 44px; padding-top: 4px; text-align: center;
}
.mobnav a:hover { text-decoration: none; color: var(--kleur-accent); }
.mobnav a.actief { color: var(--kleur-accent); font-weight: 600; }
.mobnav .fab {
  background: var(--terracotta); color: #fff; border-radius: 50%;
  width: 56px; height: 56px; font-size: 1.9rem; line-height: 1;
  box-shadow: 0 4px 10px rgba(194, 106, 63, 0.4); margin-top: -26px; font-weight: 400;
}
.mobnav .fab:hover { background: #a95a35; }
@media (min-width: 700px) { .mobnav { display: none; } }

.inst-layout { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; align-items: start; }
.inst-nav { border-right: 1px solid var(--kleur-lijn); padding-right: 1rem; position: sticky; top: 1rem; }
.inst-nav-titel { display: flex; align-items: center; gap: 0.5rem; font-family: var(--lettertype-kop); font-size: 1.1rem; margin: 0 0 0.8rem; }
.inst-nav nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.inst-nav nav a {
  display: inline-flex; align-items: center; padding: 0.55rem 1.1rem;
  border: 1px solid var(--kleur-lijn); border-radius: 999px;
  background: var(--kleur-vlak); color: var(--kleur-tekst);
  font-size: 1rem; min-height: 48px; text-decoration: none;
}
.inst-nav nav a:hover { background: var(--kleur-accent-zacht); border-color: var(--kleur-accent); text-decoration: none; }
.inst-nav nav a.actief { background: var(--kleur-accent); border-color: var(--kleur-accent); color: #fff; font-weight: 600; }
.inst-uitloggen { margin-top: 1rem; }
.inst-inhoud { min-width: 0; }
.melding { padding: 0.65rem 0.9rem; margin: 0 0 1rem; border-left: 4px solid; font-size: 0.92rem; border-radius: 0 10px 10px 0; }
.melding-ok { background: #e7f3ea; border-color: #15803d; }
.melding-fout { background: #fbe9e5; border-color: #c2410c; }
.melding-waarschuwing { background: #fdf3dc; border-color: #a16207; }
.uitleg { margin: 0.6rem 0; border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); padding: 0.5rem 0.9rem; border-radius: 12px; }
.uitleg summary { cursor: pointer; font-size: 0.92rem; }
.uitleg dt { font-weight: 600; margin-top: 0.5rem; }
.uitleg dd { margin: 0 0 0 1rem; color: var(--kleur-tekst-zacht); font-size: 0.9rem; }
.sleutel { display: block; margin-top: 0.5rem; word-break: break-all; padding: 0.5rem; }
.badge { font-size: 0.72rem; font-style: normal; background: var(--kleur-lijn); padding: 0.05rem 0.4rem; margin-left: 0.4rem; white-space: nowrap; border-radius: 5px; }

.type-tabel { border: 1px solid var(--kleur-lijn); background: var(--kleur-vlak); border-radius: 12px; overflow: hidden; }
.type-kop, .type-rij { display: flex; flex-wrap: wrap; gap: 0.9rem; padding: 0.9rem 1rem; align-items: center; }
.type-kop { background: var(--kleur-accent-zacht); font-size: 0.9rem; font-weight: 600; color: var(--kleur-tekst); }
.type-kop span:first-child { min-width: 220px; }
.type-rij { border-top: 1px solid var(--kleur-lijn); margin: 0; }
.type-rij.gearchiveerd { opacity: 0.6; background: #f1eee6; }
.type-rij input[type=text], .type-rij input[type=number], .type-rij select {
  font: inherit; font-size: 1rem; padding: 0.55rem 0.6rem; border: 1px solid var(--kleur-lijn);
  background: white; color: var(--kleur-tekst); width: 100%; min-width: 0; border-radius: 8px; min-height: 44px;
}
.type-naam { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 220px; min-width: 0; }
.type-velden { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: flex-end; flex: 2 1 480px; }
.type-veld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; color: var(--kleur-tekst-zacht); }
.type-veld select, .type-veld input { min-width: 140px; }
.type-veld.type-veld-klein { max-width: 110px; }
.gebruik { color: var(--kleur-tekst-zacht); font-size: 0.95rem; align-self: center; white-space: nowrap; }
.acties { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-start; }

/* ---------- Statusweergave (FIX1: geen kader, geen afgekapt) ---------- */
.status-tabel { background: transparent; }
.status-kop {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.5fr) 100px minmax(170px, 1.5fr) minmax(120px, 1.2fr);
  gap: 1rem; padding: 0.4rem 0.25rem 0.6rem;
  font-size: 0.88rem; font-weight: 600; color: var(--kleur-tekst-zacht);
  align-items: center;
}
.status-kop span { display: block; }
.status-rij {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.5fr) 100px minmax(170px, 1.5fr) minmax(120px, 1.2fr);
  gap: 1rem; padding: 1rem 0.25rem;
  border-top: 1px solid var(--kleur-lijn);
  align-items: center;
}
.status-naam { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.status-naam strong { font-family: var(--lettertype-kop); font-size: 1.05rem; color: var(--kleur-accent); }
.veld { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; color: var(--kleur-tekst-zacht); min-width: 0; }
.veld-label { display: block; }
.veld input[type=text] {
  font: inherit; font-size: 1rem; padding: 0.55rem 0.6rem; border: 1px solid var(--kleur-lijn);
  width: 100%; min-width: 0; border-radius: 8px; background: white; min-height: 44px; color: var(--kleur-tekst);
}
.veld input[type=color] { height: 44px; width: 100%; padding: 0.15rem; border: 1px solid var(--kleur-lijn); background: white; border-radius: 8px; cursor: pointer; }
.chip {
  display: inline-block; padding: 0.3rem 0.65rem; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600; color: #fff; max-width: 100%;
}
@media (max-width: 1100px) {
  .status-kop { display: none; }
  .status-rij { grid-template-columns: 1fr 1fr; }
  .status-rij .status-naam, .status-rij .veld:last-child { grid-column: 1 / -1; }
  .veld-kleur { max-width: 160px; }
}
@media (max-width: 560px) { .status-rij { grid-template-columns: 1fr; } .veld-kleur { max-width: none; } }

.sim-resultaat { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.sim-kolom { border: 1px solid var(--kleur-lijn); border-top: 4px solid var(--status-kleur, var(--kleur-accent)); background: var(--kleur-vlak); padding: 0.8rem 1rem; border-radius: 0 0 12px 12px; }
.sim-kolom h2 { font-family: var(--lettertype-kop); font-size: 1rem; margin: 0 0 0.6rem; }

@media (max-width: 700px) {
  .inst-layout { grid-template-columns: 1fr; }
  .inst-nav { border-right: none; border-bottom: 1px solid var(--kleur-lijn); padding: 0 0 1rem; position: static; }
  .type-kop { display: none; }
  .type-velden { flex-direction: column; align-items: stretch; }
  .type-veld select, .type-veld input { min-width: 0; width: 100%; }
  .gebruik { text-align: left; }
  .acties { justify-content: flex-start; }
  .sim-resultaat { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .acties { flex-direction: column; align-items: stretch; }
}