/* Revuno beheer. Rustig en duidelijk: grote velden, één knop om op te slaan. */
:root {
  --petrol: #11454C; --petrol-donker: #0A2E33; --petrol-licht: #E3EEEF; --messing: #A67C2A;
  --bg: #F6F4F0; --kaart: #fff; --tekst: #1B2A2C; --tekst-2: #55676A; --rand: #E2DDD4;
  --ok: #1F6B47; --ok-bg: #E7F4EC; --fout: #8A2D1A; --fout-bg: #FBEDE8;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tekst); background: var(--bg); }
h1 { font-size: 28px; line-height: 1.2; margin-bottom: 8px; }
a { color: var(--petrol); }
:focus-visible { outline: 3px solid var(--messing); outline-offset: 2px; }

.knop { display: inline-flex; align-items: center; justify-content: center; background: var(--petrol); color: #fff; border: 0; border-radius: 10px; padding: 13px 26px; font: inherit; font-weight: 600; cursor: pointer; }
.knop:hover { background: var(--petrol-donker); }
.knop:disabled { opacity: .7; cursor: progress; }
.knop-licht { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--petrol); border: 1.5px solid var(--petrol); border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 500; cursor: pointer; }
.knop-licht:hover { background: var(--petrol-licht); }

input, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--tekst); background: #fff; border: 1.5px solid var(--rand); border-radius: 10px; padding: 11px 14px; }
input:focus, textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(17,69,76,.15); }
textarea { resize: vertical; min-height: 90px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }

.melding { border-radius: 12px; padding: 14px 18px; margin: 0 0 22px; }
.melding.ok { background: var(--ok-bg); color: var(--ok); }
.melding.fout { background: var(--fout-bg); color: var(--fout); }
.melding a { color: inherit; font-weight: 600; margin-left: 6px; }
.klein, .uitleg { color: var(--tekst-2); font-size: 14.5px; }
.uitleg { margin: -2px 0 10px; }

/* Inloggen */
.inlog { max-width: 400px; margin: 12vh auto 40px; padding: 36px 28px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 18px; box-shadow: 0 10px 40px rgba(10,46,51,.08); }
.inlog .merk, .balk .naam span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--messing); }
.inlog h1 { margin: 6px 0 22px; }
.inlog form { display: grid; gap: 4px; margin-bottom: 18px; }
.inlog .knop { margin-top: 14px; }

/* Bovenbalk */
.balk { background: var(--petrol-donker); color: #fff; position: sticky; top: 0; z-index: 5; }
.balk-binnen { max-width: 920px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.balk .naam { color: #fff; text-decoration: none; font-weight: 700; display: grid; line-height: 1.25; }
.balk nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; font-size: 15px; }
.balk nav a, .balk nav button { color: #C9DADC; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 4px 0; }
.balk nav a:hover, .balk nav button:hover, .balk nav a[aria-current] { color: #fff; }
.balk nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

.werk { max-width: 920px; margin: 0 auto; padding: 32px 16px 140px; }
.inleiding { color: var(--tekst-2); margin-bottom: 26px; max-width: 640px; }

/* Groepen en velden */
.groep { background: var(--kaart); border: 1px solid var(--rand); border-radius: 16px; margin-bottom: 14px; }
.groep > summary { list-style: none; cursor: pointer; padding: 18px 22px; font-size: 19px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.groep > summary::-webkit-details-marker { display: none; }
.groep > summary::after { content: "+"; font-size: 24px; color: var(--messing); font-weight: 400; }
.groep[open] > summary::after { content: "−"; }
.groep-binnen { padding: 0 22px 22px; border-top: 1px solid var(--rand); padding-top: 18px; }
.veld { margin-bottom: 22px; border: 0; padding: 0; min-width: 0; }
fieldset.veld > legend { font-weight: 700; margin-bottom: 8px; padding: 0; }

.lijst .rijen { display: grid; gap: 10px; margin-bottom: 12px; }
.rij { display: grid; grid-template-columns: 1fr; gap: 10px; background: var(--bg); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; }
.deel { font-weight: 500; margin: 0; }
.deel > span { display: block; font-size: 13.5px; color: var(--tekst-2); margin-bottom: 4px; }
.rij-knoppen { display: flex; gap: 8px; justify-content: flex-end; }
.rij-knoppen button { background: #fff; border: 1px solid var(--rand); border-radius: 8px; min-width: 40px; height: 36px; padding: 0 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--tekst-2); }
.rij-knoppen button:hover { border-color: var(--petrol); color: var(--petrol); }
.rij-knoppen [data-weg]:hover { border-color: var(--fout); color: var(--fout); }
/* Rijen schikken zich naar de breedte van het formulier, niet van het scherm */
.kolom-aanpassen, .werk { container-type: inline-size; }
.rij:has(.deel-prijs) { grid-template-columns: 1fr 120px; align-items: end; }
.rij:has(.deel-prijs) > .deel:not(.deel-prijs):nth-of-type(n+3), .rij:has(.deel-prijs) .rij-knoppen { grid-column: 1 / -1; }
@container (min-width: 640px) {
  .rij:has(.deel-prijs) { grid-template-columns: 1.4fr 120px 1.6fr; }
  .rij:has(.deel-prijs) > .deel:not(.deel-prijs):nth-of-type(n+3) { grid-column: auto; }
}
@container (min-width: 420px) {
  .rij:not(:has(.deel-prijs)):has(> .deel:nth-of-type(2)):not(:has(.deel-alinea)) { grid-template-columns: 1fr 1fr; align-items: end; }
  .rij:not(:has(.deel-prijs)):has(> .deel:nth-of-type(2)):not(:has(.deel-alinea)) .rij-knoppen { grid-column: 1 / -1; }
}

.foto-rij { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.foto-rij img { width: 140px; height: 105px; object-fit: cover; border-radius: 10px; background: var(--petrol-licht); }
.foto-rij > div { display: grid; gap: 12px; }
.bestand { position: relative; overflow: hidden; justify-self: start; }
.bestand input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 520px) { .foto-rij { grid-template-columns: 1fr; } .foto-rij img { width: 100%; height: 180px; } }

/* Opslaan-balk */
.opslaan { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--rand); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 16px; justify-content: center; align-items: center; z-index: 5; }
.opslaan [data-status] { color: var(--tekst-2); font-size: 14.5px; }
.opslaan [data-status].let-op { color: var(--messing); font-weight: 600; }
.opslaan .knop { min-width: 160px; }

.versies { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 560px; }
.versies li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 12px 16px; }
.smal-formulier { display: grid; gap: 4px; max-width: 420px; margin-top: 18px; }
.smal-formulier .knop { margin-top: 16px; justify-self: start; }
.smal-formulier label { margin-top: 10px; }
input.smal { max-width: 160px; }
@media (max-width: 600px) { .balk { position: static; } .balk nav { font-size: 14.5px; } }

/* ===== Voorbeeld naast het aanpassen ===== */
.werk.werk-breed { max-width: none; padding: 0; }
.werkblad { display: grid; grid-template-columns: minmax(420px, 520px) 1fr; }
.kolom-aanpassen { padding: 28px 24px 140px; min-width: 0; }
.voorbeeld { position: sticky; top: 64px; height: calc(100vh - 64px - 69px); border-left: 1px solid var(--rand); background: #DCD8D0; display: flex; flex-direction: column; }
.voorbeeld-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--rand); }
.voorbeeld-balk label { margin: 0; font-size: 14px; color: var(--tekst-2); font-weight: 500; }
.voorbeeld-balk select { font: inherit; font-size: 15px; padding: 7px 10px; border: 1.5px solid var(--rand); border-radius: 8px; background: #fff; color: var(--tekst); }
.voorbeeld-noot { font-size: 13px; color: var(--tekst-2); margin-left: auto; }
.voorbeeld iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.tabs { display: none; }
.flits { animation: flits 1.4s ease-out; }
@keyframes flits { 0%, 30% { box-shadow: 0 0 0 4px rgba(166,124,42,.55); } 100% { box-shadow: 0 0 0 4px rgba(166,124,42,0); } }

@media (max-width: 1099px) {
  .werkblad { grid-template-columns: 1fr; }
  .tabs { display: flex; gap: 6px; position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 10px 16px; border-bottom: 1px solid var(--rand); }
  .tabs button { flex: 1; font: inherit; font-weight: 600; padding: 10px; border-radius: 10px; border: 1.5px solid var(--petrol); background: #fff; color: var(--petrol); cursor: pointer; }
  .tabs button[aria-selected="true"] { background: var(--petrol); color: #fff; }
  .kolom-aanpassen { padding: 20px 16px 140px; }
  body[data-tab="voorbeeld"] .kolom-aanpassen { display: none; }
  body[data-tab="aanpassen"] .voorbeeld { display: none; }
  .voorbeeld { position: static; height: calc(100vh - 62px - 69px); height: calc(100dvh - 62px - 69px); border-left: 0; }
  body[data-tab="voorbeeld"] .opslaan { position: fixed; }
}
@media (min-width: 601px) and (max-width: 1099px) { .tabs { top: 64px; } }

.demo-band { background: var(--messing); color: #fff; text-align: center; padding: 9px 16px; font-size: 14.5px; margin: 0; }
.demo-band a { color: #fff; font-weight: 700; margin-left: 6px; }