/* Het platform. Eén systeem: rollen voor type, een basis van 4px voor ruimte (in rem), één accent per scherm. */
:root {
  /* kleur: één inkt, één canvas, één accent; koele neutralen bij een koel accent */
  --inkt: #18202e; --inkt-zacht: #535d6e; --lijn: #d8dde6; --vlak: #ffffff; --canvas: #f3f5f8; --canvas-diep: #e9edf3;
  --accent: #1f5fbf; --accent-donker: #184b97; --accent-tekst: #ffffff; --accent-zacht: #e4edfb;
  --fout: #a32121; --fout-vlak: #fdecec; --band: #fff3d1; --band-tekst: #5a4300;
  /* type: rollen, geen losse maten */
  --t-titel: 1.5rem; --t-kop: 1.125rem; --t-body: 1rem; --t-klein: .875rem; --t-micro: .75rem;
  --lh-titel: 1.2; --lh-kop: 1.3; --lh-body: 1.55;
  /* ruimte: 4px-basis */
  --r-1: .25rem; --r-2: .5rem; --r-3: .75rem; --r-4: 1rem; --r-5: 1.25rem; --r-6: 1.5rem; --r-8: 2rem; --r-10: 2.5rem;
  --radius: .5rem; --radius-klein: .375rem;
  --schaduw-opgetild: 0 1px 2px rgb(24 32 46 / .06), 0 2px 8px rgb(24 32 46 / .05);
  --snel: 180ms;
  --breedte: 60rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 100%; color: var(--inkt); background: var(--canvas);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-size: var(--t-body); line-height: var(--lh-body); }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-donker); }
:focus-visible { outline: 3px solid #8fb4ef; outline-offset: 2px; }

.d0-band { background: var(--band); color: var(--band-tekst); text-align: center; font-size: var(--t-micro); letter-spacing: .02em; padding: var(--r-1) var(--r-4); border-bottom: 1px solid #efd99a; }
.kop { display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-6); align-items: center; justify-content: space-between; padding: var(--r-3) var(--r-5); background: var(--vlak); border-bottom: 1px solid var(--lijn); }
.merk { font-weight: 650; text-decoration: none; color: var(--inkt); letter-spacing: -.01em; }
.nav { display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-4); align-items: center; font-size: var(--t-klein); }
.nav a { text-decoration: none; padding: var(--r-1) 0; }
.nav a:hover, .nav button.link:hover { text-decoration: underline; }
.nav button.link { text-decoration: none; font-size: inherit; }
.wie { color: var(--inkt-zacht); }

main { max-width: var(--breedte); margin: var(--r-8) auto var(--r-10); padding: 0 var(--r-4); }
h1 { font-size: var(--t-titel); line-height: var(--lh-titel); font-weight: 650; letter-spacing: -.015em; margin: 0 0 var(--r-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3); }
h2 { font-size: var(--t-kop); line-height: var(--lh-kop); font-weight: 600; margin: 0 0 var(--r-3); }
p { margin: 0 0 var(--r-3); max-width: 70ch; }
.terug { margin-bottom: var(--r-4); font-size: var(--t-klein); }

.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: var(--r-5) var(--r-6); margin-bottom: var(--r-5); box-shadow: var(--schaduw-opgetild); }
.kaart > :last-child { margin-bottom: 0; }
.kaart.smal { max-width: 28rem; margin: var(--r-10) auto; }
.kaart.nadruk { border-color: var(--accent); background: var(--accent-zacht); }
.raster { display: grid; grid-template-columns: 2fr 1fr; gap: var(--r-5); align-items: start; }
.klein { font-size: var(--t-klein); color: var(--inkt-zacht); }
.leeg { color: var(--inkt-zacht); background: var(--vlak); border: 1px dashed var(--lijn); border-radius: var(--radius); padding: var(--r-8) var(--r-6); text-align: center; max-width: none; }

button { font: inherit; font-size: var(--t-klein); font-weight: 550; cursor: pointer; border-radius: var(--radius-klein); padding: var(--r-2) var(--r-4); min-height: 2.5rem; border: 1px solid #b9c1ce; background: var(--vlak); color: var(--inkt); transition: background-color var(--snel), border-color var(--snel); }
button:hover { background: var(--canvas); border-color: #9aa4b4; }
button:active { background: var(--canvas-diep); }
button.primair { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
button.primair:hover { background: var(--accent-donker); border-color: var(--accent-donker); }
button.link { border: 0; padding: 0; min-height: 0; background: none; color: var(--accent); text-decoration: underline; font-weight: 400; }
button:disabled { opacity: .6; cursor: progress; }
form.inline { display: inline; }
form.regel { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: end; margin-top: var(--r-4); }
form.regel .veld { margin: 0; flex: 1 1 14rem; }
.acties { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.veld { margin-bottom: var(--r-4); display: flex; flex-direction: column; gap: var(--r-1); }
label { font-size: var(--t-klein); font-weight: 550; }
input, select, textarea { font: inherit; padding: var(--r-2) var(--r-3); border: 1px solid #848e9e; border-radius: var(--radius-klein); background: var(--vlak); min-height: 2.5rem; }
input:hover, select:hover, textarea:hover { border-color: #8a95a6; }
.melding { padding: var(--r-3) var(--r-4); border-radius: var(--radius-klein); }
.melding.fout { background: var(--fout-vlak); color: var(--fout); }
/* B-102: de band van de nagebootste WhatsApp in de demomodus. */
.melding.nagebootst { background: #fff4d6; color: #5c4300; }
#nabootsing select { width: 100%; max-width: 100%; min-width: 0; }

table.lijst { width: 100%; border-collapse: collapse; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw-opgetild); }
table.lijst th, table.lijst td { text-align: left; padding: var(--r-3) var(--r-4); border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.lijst tbody tr:last-child td { border-bottom: 0; }
table.lijst tbody tr:hover { background: #f8f9fb; }
table.lijst th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); font-weight: 600; background: #fafbfc; }
/* MS-2, BL-12: het overzicht. Getallen rechts en met vaste cijferbreedte; de totaalrij met gewicht; smal scherm: schuiven. */
.schuif { overflow-x: auto; }
/* Een tabel met elf kolommen mag breder zijn dan de tekstkolom: symmetrisch eruit, tot 72rem; smal scherm: gewoon de kolom. */
.breed { margin-inline: calc((max(100%, min(100vw - 3rem, 72rem)) - 100%) / -2); }
table.overzicht th, table.overzicht td { padding: var(--r-2) var(--r-3); }
table.overzicht td.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.overzicht thead th { text-transform: none; letter-spacing: 0; font-size: var(--t-klein); vertical-align: bottom; }
table.overzicht thead th.getal { text-align: right; }
table.overzicht tbody th { font-weight: 550; text-transform: none; letter-spacing: 0; font-size: var(--t-body); color: var(--inkt); background: none; }
table.overzicht tr.totaal th, table.overzicht tr.totaal td { font-weight: 650; border-top: 1px solid var(--lijn); }
.periode { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: end; margin-bottom: var(--r-3); }
.periode label { display: flex; flex-direction: column; gap: var(--r-1); }
/* Smal scherm: per rij een kaart, elke waarde met haar kolomnaam ervoor. */
@media (max-width: 48rem) {
  table.overzicht tbody th { display: block; padding: var(--r-2) var(--r-4) var(--r-1); }
  table.overzicht td.getal { display: flex; justify-content: space-between; gap: var(--r-4); text-align: right; }
  table.overzicht td.getal::before { content: attr(data-label); color: var(--inkt-zacht); font-weight: 400; text-align: left; }
}
table.lijst td a { font-weight: 550; }
.toestand { display: inline-block; font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; padding: .125rem var(--r-2); border-radius: 999px; background: var(--canvas-diep); color: var(--inkt-zacht); }
.t-nieuw { background: #e2ebfb; color: #1b4789; }
.t-passend { background: #dff1e6; color: #1a5f35; }
.t-niet_passend { background: #eceef1; color: #4b5260; }
.t-gewonnen { background: #cfeedb; color: #12512a; }
.t-verloren { background: #f8e6e6; color: #842626; }

dl.antwoorden { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: var(--r-2) var(--r-5); margin: 0; }
dl.antwoorden dt { color: var(--inkt-zacht); font-size: var(--t-klein); padding-top: .1rem; }
dl.antwoorden dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
ul.tijdlijn { list-style: none; padding: 0; margin: 0; font-size: var(--t-klein); }
ul.tijdlijn li { padding: var(--r-2) 0 var(--r-2) var(--r-4); border-left: 2px solid var(--lijn); position: relative; }
ul.tijdlijn li::before { content: ""; position: absolute; left: -5px; top: .85rem; width: 8px; height: 8px; border-radius: 50%; background: #9aa4b4; }
ul.tijdlijn time { color: var(--inkt-zacht); display: block; font-size: var(--t-micro); }
/* BL-37: het handmatige antwoord in de tijdlijn (inkt in plaats van grijs, de regeleinden zoals getypt), en het formulier eronder. */
ul.tijdlijn li.antwoord::before { background: var(--inkt); }
ul.tijdlijn li.antwoord blockquote { color: var(--inkt); white-space: pre-wrap; overflow-wrap: anywhere; }
form.antwoord { margin-top: var(--r-5); padding-top: var(--r-4); border-top: 1px solid var(--lijn); }
.veld.vinkje { flex-direction: row; align-items: flex-start; gap: var(--r-2); }
.veld.vinkje label { font-weight: 400; }
.veld.vinkje input[type="checkbox"] { width: 1.125rem; min-height: 1.125rem; margin: .15rem 0 0; flex: none; accent-color: var(--accent); }
blockquote { margin: var(--r-2) 0 0; padding: var(--r-2) var(--r-4); border-left: 3px solid var(--lijn); color: var(--inkt-zacht); font-size: var(--t-klein); }
pre { white-space: pre-wrap; background: var(--canvas); padding: var(--r-3) var(--r-4); border-radius: var(--radius-klein); font-size: var(--t-klein); margin: 0; }
code { background: var(--canvas); padding: .1rem .3rem; border-radius: 4px; word-break: break-all; font-size: var(--t-klein); }
article.bericht p { margin-bottom: var(--r-2); }

@media (max-width: 48rem) {
  main { margin-top: var(--r-5); }
  .raster { grid-template-columns: 1fr; }
  .kaart { padding: var(--r-4); }
  table.lijst thead { display: none; }
  table.lijst, table.lijst tbody, table.lijst tr, table.lijst td { display: block; }
  table.lijst tr { border-bottom: 1px solid var(--lijn); padding: var(--r-2) 0; }
  table.lijst td { border: 0; padding: .125rem var(--r-4); }
  dl.antwoorden { grid-template-columns: 1fr; gap: 0; }
  dl.antwoorden dd { margin-bottom: var(--r-3); }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; } }

/* D0-2: afspraken bij de tenant. */
.t-bevestigd { background: #dff1e6; color: #1a5f35; }
.t-geannuleerd { background: #f8e6e6; color: #842626; }
.t-voorbij { background: #eceef1; color: #4b5260; }
/* MS-2, BL-11: de opkomst. */
.t-verschenen { background: #dff1e6; color: #1a5f35; }
.t-niet-verschenen { background: #fbefd9; color: #7a4a00; }
.sectie { margin-bottom: var(--r-8); }
.raster.gelijk { grid-template-columns: 1fr 1fr; }
ul.diensten { padding-left: var(--r-5); margin: 0 0 var(--r-3); }
ul.diensten li { margin-bottom: var(--r-3); }
.afspraak-regel + .afspraak-regel { border-top: 1px solid var(--lijn); margin-top: var(--r-3); padding-top: var(--r-3); }
.afspraak-regel p { margin-bottom: var(--r-2); }
details.annuleren summary { cursor: pointer; color: var(--fout); font-size: var(--t-klein); margin: var(--r-1) 0; }
details.annuleren[open] { background: var(--fout-vlak); border-radius: var(--radius-klein); padding: var(--r-2) var(--r-3) var(--r-3); }
button.gevaar { background: var(--fout); border-color: var(--fout); color: #fff; }
button.gevaar:hover { background: #861b1b; border-color: #861b1b; }
@media (max-width: 48rem) { .raster.gelijk { grid-template-columns: 1fr; } }

/* D0-3: de agenda, de verzoeken van betrokkenen en de bewaartaak. Dezelfde labels als de standen hierboven. */
.s-geschreven, .k-actief { background: #dff1e6; color: #1a5f35; }
.s-te_schrijven { background: #e2ebfb; color: #1b4789; }
.s-onzeker, .s-ingrijpen_nodig, .k-gestoord { background: #fff1cc; color: #6b4d00; }
.s-afwijkend, .s-mislukt, .k-herautorisatie_nodig { background: #f8e6e6; color: #842626; }
.s-handmatig, .k-ingetrokken, .t-gewist { background: #eceef1; color: #4b5260; }
.nabootsing { background: var(--band); color: var(--band-tekst); border: 1px solid #efd99a; border-radius: var(--radius-klein); padding: var(--r-3) var(--r-4); font-size: var(--t-klein); max-width: none; margin-bottom: var(--r-5); }
h3.klein { margin: var(--r-5) 0 var(--r-2); font-weight: 600; }
td .acties, .afspraak-regel .acties { margin-top: var(--r-2); }
.kaart > .acties { margin: var(--r-3) 0; }
#resultaat table.lijst + p { margin-top: var(--r-3); }

/* B-063: verzetten door de tenant (dezelfde tijdkeuze als bij de bezoeker), beoordelen bij afwijkend, de bijlage in de uitbak. */
a.knop { display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--r-2) var(--r-4); border: 1px solid #b9c1ce; border-radius: var(--radius-klein); background: var(--vlak); color: var(--inkt); font-size: var(--t-klein); font-weight: 550; text-decoration: none; transition: background-color var(--snel), border-color var(--snel); }
a.knop.primair { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }
a.knop:hover { background: var(--canvas); border-color: #9aa4b4; color: var(--inkt); }
.weeknav { display: flex; justify-content: space-between; gap: var(--r-4); font-size: var(--t-klein); margin: var(--r-2) 0 var(--r-3); }
.dagen { display: grid; gap: var(--r-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
fieldset.dag { border: 1px solid var(--lijn); border-radius: var(--radius-klein); padding: var(--r-2) var(--r-3) var(--r-3); margin: 0; }
fieldset.dag legend { font-size: var(--t-klein); font-weight: 600; padding: 0 var(--r-1); }
.geen { margin: 0; font-size: var(--t-klein); color: var(--inkt-zacht); }
.tijden { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.tijd { position: relative; font-weight: 500; }
.tijd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tijd span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: var(--r-1) var(--r-3); border: 1px solid #848e9e; border-radius: var(--radius-klein); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--snel), border-color var(--snel); }
.tijd:hover span { border-color: var(--accent); }
.tijd input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.tijd input:focus-visible + span { outline: 3px solid #8fb4ef; outline-offset: 2px; }
.zacht { color: var(--inkt-zacht); }
table.naast { width: 100%; border-collapse: collapse; font-size: var(--t-klein); margin: var(--r-3) 0; }
table.naast th, table.naast td { text-align: left; padding: var(--r-2) var(--r-3); border-bottom: 1px solid var(--lijn); vertical-align: top; }
table.naast th { color: var(--inkt-zacht); font-weight: 600; width: 10rem; }
details.bijlage summary { cursor: pointer; font-size: var(--t-klein); margin-top: var(--r-2); }
details.bijlage pre { margin-top: var(--r-2); font-size: var(--t-micro); }

/* Na MS-2: de inrichting van een tenant door de platformbeheerder. Het voorbeeld draagt het accent van de tenant (uit
   /beheer/tenant/<kenmerk>/voorbeeld.css, alleen binnen .voorbeeld); de knoppen van het scherm blijven die van het platform. */
.melding.ok { background: #dff1e6; color: #1a5f35; }
.alleen-voorlezen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inricht-raster { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: var(--r-6); align-items: start; margin: var(--r-4) 0 var(--r-6); }
.voorbeeld { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-2); padding: var(--r-4); background: var(--canvas); border: 1px solid var(--lijn); border-radius: var(--radius); }
.voorbeeld-label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); font-weight: 600; }
.voorbeeld-knop { display: inline-flex; align-items: center; min-height: 2.5rem; padding: var(--r-2) var(--r-4); border-radius: var(--radius-klein); background: var(--accent); color: #fff; font-size: var(--t-klein); font-weight: 550; }
.voorbeeld-knop.donker { background: var(--accent-donker); }
.voorbeeld-tijd { display: inline-flex; align-items: center; min-height: 2.25rem; padding: var(--r-1) var(--r-3); border: 2px solid var(--accent); border-radius: var(--radius-klein); background: var(--vlak); font-variant-numeric: tabular-nums; font-weight: 500; }
.kleuren .veld { margin-bottom: var(--r-4); }
.kleurveld { display: flex; align-items: center; gap: var(--r-3); }
.kleurveld input[type="color"] { width: 3rem; padding: var(--r-1); cursor: pointer; }
.kleurveld output { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--t-klein); }
.voldoet { color: #1a5f35; }
.voldoet-niet { color: var(--fout); }
.logo-regel { margin-top: var(--r-2); margin-bottom: 0; }
.logo-regel form.regel { margin-top: 0; }
.logo-vak { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-2); }
h1 .ondertitel { font-size: var(--t-body); font-weight: 400; letter-spacing: 0; color: var(--inkt-zacht); }
.adres { overflow-wrap: anywhere; }
table.paginas th { width: auto; }
table.paginas td.handeling { text-align: right; }
.logo-voorbeeld { height: 2.5rem; width: auto; padding: var(--r-2); background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein); box-sizing: content-box; }
input[type="file"] { padding: var(--r-1) var(--r-2); }
.herkomst-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-5); margin: var(--r-2) 0 var(--r-6); }
.herkomst-lijst h3.klein { margin-top: 0; }
.herkomst-lijst form.regel { margin-top: var(--r-3); }
ul.waarden { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lijn); }
ul.waarden li { display: flex; justify-content: space-between; align-items: center; gap: var(--r-3); padding: var(--r-2) 0; border-bottom: 1px solid var(--lijn); font-size: var(--t-klein); }
/* BL-35: de sjablonen van een tenant in het strengere profiel, op het scherm WhatsApp. */
ul.zorg-sjablonen { list-style: none; padding: 0; margin: 0 0 var(--r-4); border-top: 1px solid var(--lijn); }
ul.zorg-sjablonen li { padding: var(--r-3) 0; border-bottom: 1px solid var(--lijn); }
ul.zorg-sjablonen li p { margin: 0 0 var(--r-2); overflow-wrap: anywhere; }
.kaart-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--r-2) var(--r-4); }
.kaart-kop h2 { margin-bottom: var(--r-2); }
@media (max-width: 48rem) {
  .inricht-raster, .herkomst-raster { grid-template-columns: 1fr; }
}
/* MS-3, BL-22: de smalle opvolging. Een volgende actie die voorbij is, valt op met de kleur van een fout en een woord,
   niet met kleur alleen. De datum staat naast de actie, smal. */
.actie-datum { font-size: var(--t-klein); font-variant-numeric: tabular-nums; }
.actie-datum.te-laat { color: var(--fout); font-weight: 600; }
.eigenaar { font-size: var(--t-klein); }
form.regel .veld.veld-datum, form.regel .veld.veld-smal { flex: 0 1 11rem; }
#opvolging form.regel:first-of-type { margin-top: var(--r-2); }
/* MS-3, BL-23: de berichtteksten op het inrichtingscherm, per bericht inklapbaar; open bij een melding. */
details.sjabloon { border-top: 1px solid var(--lijn); padding: var(--r-3) 0; }
details.sjabloon:last-of-type { border-bottom: 1px solid var(--lijn); }
details.sjabloon summary { cursor: pointer; display: flex; align-items: baseline; gap: var(--r-2); }
details.sjabloon summary .sjabloon-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-1) var(--r-2); }
details.sjabloon code { white-space: nowrap; }
/* Een flex-samenvatting verliest het pijltje van de browser: een eigen, dat met open meedraait. */
details.sjabloon summary { list-style: none; }
details.sjabloon summary::-webkit-details-marker { display: none; }
details.sjabloon summary::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid var(--inkt-zacht); border-bottom: 2px solid var(--inkt-zacht); transform: rotate(-45deg); transition: transform var(--snel); margin-right: var(--r-1); flex: none; align-self: center; }
details.sjabloon[open] summary::before { transform: rotate(45deg); }
details.sjabloon summary .naam { font-weight: 600; }
details.sjabloon[open] summary { margin-bottom: var(--r-3); }
.sjabloon-form textarea { min-height: 6rem; }
/* B-110: de kop- en knoptekst van een formulier. Invoer en voorbeeld naast elkaar; op een smal scherm onder elkaar. Het
   voorbeeld is een iframe zonder scripts, met de hoogte van een venster op een telefoon. */
.formulier-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--r-5); align-items: start; }
.formulier-raster textarea { min-height: 8rem; }
.voorbeeld-venster { display: block; width: 100%; height: 40rem; border: 1px solid var(--lijn); border-radius: var(--radius-klein); background: var(--vlak); }
ul.formulierlijst { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lijn); }
ul.formulierlijst li { display: grid; gap: var(--r-1); padding: var(--r-3) 0; border-bottom: 1px solid var(--lijn); }
ul.formulierlijst .naam { font-weight: 600; }
ol.versielijst { padding-left: var(--r-6); margin: 0 0 var(--r-3); }
ol.versielijst li { padding: var(--r-1) 0; }
@media (max-width: 60rem) { .formulier-raster { grid-template-columns: 1fr; } .voorbeeld-venster { height: 34rem; } }