:root {
  --purple: #69266f;
  --purple-dark: #4b1c52;
  --purple-soft: #efe8f1;
  --blue: #247da5;
  --blue-light: #63b7d3;
  --blue-dark: #155f88;
  --ink: #28242b;
  --muted: #66616b;
  --line: #ded9e1;
  --surface: #fff;
  --shadow: 0 8px 24px rgba(62, 35, 68, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, Arial, sans-serif; color: var(--ink); background: #f8f8fa; }
a { color: inherit; }
button, input { font: inherit; }
.site-header { position: relative; min-height: 104px; display: grid; grid-template-columns: 286px 1fr; align-items: stretch; overflow: hidden; background: linear-gradient(100deg, #4a1a53 0%, #702b78 55%, #4a246f 100%); border-bottom: 3px solid var(--purple); }
.brand-block { min-height: 104px; display: grid; place-items: center; align-self: stretch; min-height: 100%; margin: 0; background: #fff; padding: 0px; border-right: 0px solid rgba(105,38,111,.18); z-index: 2; }
.brand-block img { width: 285px; max-width: 100%; max-height: 88px; object-fit: contain; display: block; }
.header-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 14px 34px; color: #fff; }
.header-kicker { font-size: clamp(1.25rem, 2.1vw, 2rem); letter-spacing: .03em; font-weight: 500; color: var(--blue-light); }
.header-copy h1 { margin: 3px 0 0; font-size: clamp(.92rem, 1.35vw, 1.22rem); font-weight: 400; color: #fff; }
.header-building { position: absolute; right: -30px; inset-block: 0; width: 380px; opacity: .27; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.26) 39px 40px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.2) 29px 30px); transform: skewX(-18deg); }
.page-content { position: relative; min-height: calc(100vh - 215px); padding: 38px max(24px, calc((100vw - 1280px)/2)) 54px; overflow: hidden; background: linear-gradient(180deg,#fff 0%,#fbfbfd 100%); }
.background-helix { position: absolute; top: 0; bottom: 0; width: 260px; height: auto; opacity: .085; pointer-events: none; background: center top / auto 100% no-repeat url("helix-spiral-bg.png"); }
.background-helix::after { content: none; }
.helix-left { left: 8px; top: 0; bottom: 0; }
.helix-right { display: none; }
.building-lines { position: absolute; right: -18px; bottom: 0; width: min(42vw, 520px); height: 88%; min-height: 560px; opacity: .13; pointer-events: none; background: right bottom / contain no-repeat url("building-lines.svg"); }
.toolbar { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 5px; color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.toolbar h2 { margin: 0; color: var(--purple-dark); font-size: 1.45rem; }
.search-box { width: min(310px, 100%); }
.search-box input { width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.92); outline: none; }
.search-box input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,125,165,.12); }
.tile-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.tile { position: relative; min-height: 220px; background: rgba(255,255,255,.94); border: 1px solid #e3dfe5; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(62,35,68,.14); }
.tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,var(--purple),var(--blue)); }
.tile-main-link, .tile-content-static { width: 100%; min-height: 220px; display: grid; grid-template-columns: 46px 1fr 16px; align-items: start; gap: 15px; padding: 27px 22px 24px; text-decoration: none; color: inherit; border: 0; background: transparent; text-align: left; cursor: pointer; }
.tile-content-static { cursor: default; grid-template-columns: 46px 1fr; }
.button-link { appearance: none; }
.tile-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--purple-soft); color: var(--purple); }
.tile-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sharepoint-icon { color: white; font-weight: 700; font-size: 1rem; background: linear-gradient(145deg,#0c7f7e,#1aa1a4 55%,#0d6780); box-shadow: 8px 5px 0 -3px rgba(31,151,155,.4); }
.brand-logo-icon { overflow: hidden; padding: 0; background: transparent; }
.brand-logo-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.chatgpt-logo-icon { background: #f2f2f2; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.tile-copy h3 { margin: 0 0 10px; color: var(--purple-dark); font-size: 1.03rem; line-height: 1.25; font-weight: 650; }
.tile-copy p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.55; }
.arrow { align-self: end; justify-self: end; color: var(--purple); font-size: 2rem; line-height: 1; }
.birthday-list { margin-top: 13px; font-size: .76rem; }
.month-label { display: block; margin-bottom: 7px; color: var(--blue); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.birthday-row { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 3px 0; border-bottom: 1px solid #eee9ef; }
.document-list { list-style: none; margin: 12px 0 0; padding: 0; }
.document-list li + li { margin-top: 7px; }
.document-list a { display: flex; justify-content: space-between; gap: 8px; color: var(--blue-dark); font-size: .75rem; text-decoration: underline; text-underline-offset: 2px; }
.news-list { list-style: none; margin: 12px 0 0; padding: 0; }
.news-list li + li { margin-top: 7px; }
.news-list a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; color: var(--blue-dark); font-size: .73rem; line-height: 1.35; text-decoration: none; }
.news-list a:hover span { text-decoration: underline; text-underline-offset: 2px; }
.news-list time { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.role-badge { display: inline-flex; margin-top: 12px; padding: 5px 8px; border-radius: 999px; background: #f2edf4; color: var(--purple); font-size: .66rem; font-weight: 700; }
.tile-toggle { display: none; position: absolute; top: 10px; right: 10px; z-index: 4; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; color: var(--purple); box-shadow: 0 3px 12px rgba(0,0,0,.12); cursor: pointer; }
body.edit-mode .tile { cursor: grab; outline: 2px dashed rgba(105,38,111,.35); outline-offset: -5px; }
body.edit-mode .tile:active { cursor: grabbing; }
body.edit-mode .tile-toggle { display: grid; place-items: center; }
body.edit-mode .tile-main-link, body.edit-mode .tile-content-static { pointer-events: none; }
.tile.dragging { opacity: .42; transform: scale(.98); }
.tile.filtered-out, .tile.permission-hidden { display: none; }
.hidden-tiles-panel { position: relative; z-index: 2; margin-top: 24px; padding: 18px; border: 1px dashed #cfc5d2; border-radius: 13px; background: rgba(255,255,255,.8); }
.hidden-tiles-panel h3 { margin: 0 0 12px; color: var(--purple-dark); font-size: 1rem; }
#hiddenTilesList { display: flex; flex-wrap: wrap; gap: 9px; }
.restore-button { border: 1px solid #d8ccd9; border-radius: 999px; padding: 7px 11px; background: #fff; color: var(--purple); cursor: pointer; font-size: .76rem; }
.site-footer { min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 55px; padding: 14px 24px; color: #fff; background: linear-gradient(100deg,var(--purple-dark),#313c8c 58%,#0874af); }
.edit-layout-button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.8); border-radius: 8px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; }
.edit-layout-button:hover { background: rgba(255,255,255,.12); }
.editor-toast { position: fixed; right: 20px; bottom: 95px; z-index: 20; max-width: 300px; padding: 11px 14px; border-radius: 10px; background: var(--purple-dark); color: #fff; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; box-shadow: var(--shadow); font-size: .78rem; }
.editor-toast.show { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .site-header { grid-template-columns: 230px 1fr; } .brand-block { padding: 0 16px; } .brand-block img { width: 178px; } }
@media (max-width: 650px) { .site-header { grid-template-columns: 1fr; } .brand-block { justify-content: start; min-height: 88px; padding: 0 18px; border-right: 0; border-bottom: 2px solid rgba(105,38,111,.18); } .header-copy { padding: 13px 22px 17px; } .toolbar { align-items: stretch; flex-direction: column; } .search-box { width: 100%; } .tile-grid { grid-template-columns: 1fr; } .site-footer { flex-direction: column; gap: 12px; } }

/* Beheerfuncties */
.site-header { border-bottom-color: var(--blue-light); }
.toolbar-actions { display:flex; align-items:end; gap:12px; }
.role-preview { display:grid; gap:5px; color:var(--muted); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.role-preview select { min-width:145px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.admin-button { display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border:1px solid rgba(255,255,255,.8); border-radius:8px; background:#fff; color:var(--purple-dark); cursor:pointer; }
.admin-button[hidden] { display:none; }
.admin-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(26,13,29,.58); backdrop-filter:blur(4px); }
.admin-modal[hidden] { display:none; }
.admin-dialog { width:min(960px,100%); height:min(86vh,850px); max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(31,14,35,.35); }
.admin-dialog-header { flex:0 0 auto; position:relative; z-index:2; display:flex; align-items:start; justify-content:space-between; gap:20px; padding:22px 24px 18px; background:#fff; border-bottom:1px solid var(--line); }
.admin-dialog-header h2 { margin:0; color:var(--purple-dark); font-size:1.35rem; }
.modal-close { width:36px; height:36px; border:0; border-radius:50%; background:var(--purple-soft); color:var(--purple); font-size:1.5rem; cursor:pointer; }
.admin-tabs { flex:0 0 auto; display:flex; gap:8px; padding:18px 24px 0; overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(105,38,111,.35) transparent; }
.admin-tab { padding:10px 14px; border:1px solid var(--line); border-radius:10px 10px 0 0; background:#faf8fb; color:var(--muted); cursor:pointer; }
.admin-tab.active { background:var(--purple); border-color:var(--purple); color:#fff; }
.admin-pane { display:none; min-height:0; padding:22px 24px 26px; }
.admin-pane.active { display:block; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(105,38,111,.42) transparent; }
.admin-pane.active::-webkit-scrollbar { width:9px; }
.admin-pane.active::-webkit-scrollbar-track { margin:10px 0; background:transparent; }
.admin-pane.active::-webkit-scrollbar-thumb { background:linear-gradient(var(--purple),var(--blue)); border:2px solid #fff; border-radius:999px; }
.admin-help { margin:0 0 16px; color:var(--muted); font-size:.85rem; }
.rights-table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
.rights-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.rights-table th,.rights-table td { padding:11px 12px; border-bottom:1px solid #eee9ef; text-align:center; }
.rights-table th:first-child,.rights-table td:first-child { text-align:left; min-width:210px; }
.rights-table th { background:#faf8fb; color:var(--purple-dark); }
.rights-table tr:last-child td { border-bottom:0; }
.rights-table input { width:17px; height:17px; accent-color:var(--purple); }
.tile-admin-edit,.tile-admin-delete { border:0; border-radius:8px; padding:6px 9px; cursor:pointer; }
.tile-admin-edit { background:var(--purple-soft); color:var(--purple); }
.tile-admin-delete { margin-left:5px; background:#fff0f1; color:#a22335; }
.create-tile-form { display:grid; gap:16px; max-width:620px; }
.create-tile-form > label { display:grid; gap:6px; color:var(--purple-dark); font-size:.82rem; font-weight:700; }
.create-tile-form input,.create-tile-form textarea { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px; resize:vertical; }
.create-tile-form fieldset { display:flex; flex-wrap:wrap; gap:16px; border:1px solid var(--line); border-radius:10px; padding:14px; }
.create-tile-form legend { color:var(--purple-dark); font-size:.82rem; font-weight:700; }
.create-tile-form fieldset label { display:flex; align-items:center; gap:7px; font-size:.82rem; }
.primary-admin-action { justify-self:start; padding:11px 17px; border:0; border-radius:9px; background:linear-gradient(100deg,var(--purple),var(--blue)); color:#fff; font-weight:700; cursor:pointer; }
@media (max-width:800px){ .toolbar-actions{align-items:stretch;flex-direction:column;width:100%}.role-preview select,.search-box{width:100%}.site-footer{gap:12px;flex-wrap:wrap}.rights-table th,.rights-table td{padding:9px 8px}.admin-dialog{max-height:92vh} }

/* Dynamisch rollenbeheer */
.role-create-form { display:flex; align-items:end; gap:12px; margin-bottom:18px; padding:15px; border:1px solid var(--line); border-radius:12px; background:#faf8fb; }
.role-create-form label { display:grid; flex:1; gap:6px; color:var(--purple-dark); font-size:.82rem; font-weight:700; }
.role-create-form input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.role-list { display:grid; gap:10px; }
.role-list-item { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.role-list-item strong { display:block; color:var(--purple-dark); font-size:.9rem; }
.role-list-item small { display:block; margin-top:3px; color:var(--muted); font-size:.68rem; }
.role-actions { display:flex; flex-wrap:wrap; gap:6px; }
.dynamic-role-options { display:flex; flex-wrap:wrap; gap:12px 18px; }
.dynamic-role-options label { display:flex; align-items:center; gap:7px; }
@media (max-width:650px) { .role-create-form,.role-list-item { align-items:stretch; flex-direction:column; } .role-actions { width:100%; } }


/* Moderne tegelbewerk-modal */
.tile-edit-modal { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(26,13,29,.66); backdrop-filter:blur(6px); }
.tile-edit-modal[hidden] { display:none; }
.tile-edit-dialog { width:min(680px,100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.45); border-radius:20px; background:#fff; box-shadow:0 30px 90px rgba(31,14,35,.42); }
.tile-edit-header { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 24px 18px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#fff 0%,#faf6fb 100%); }
.tile-edit-header h2 { margin:0; color:var(--purple-dark); font-size:1.35rem; }
.tile-edit-form { min-height:0; display:flex; flex:1; flex-direction:column; }
.tile-edit-scroll { min-height:0; display:grid; gap:17px; padding:22px 24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(105,38,111,.48) transparent; }
.tile-edit-scroll::-webkit-scrollbar { width:10px; }
.tile-edit-scroll::-webkit-scrollbar-track { margin:10px 0; background:transparent; }
.tile-edit-scroll::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--purple),var(--blue)); border:2px solid #fff; border-radius:999px; }
.tile-edit-scroll > label { display:grid; gap:7px; color:var(--purple-dark); font-size:.82rem; font-weight:700; }
.tile-edit-scroll input,.tile-edit-scroll textarea { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); outline:none; resize:vertical; transition:border-color .18s ease,box-shadow .18s ease; }
.tile-edit-scroll input:focus,.tile-edit-scroll textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,125,165,.12); }
.tile-edit-scroll input:disabled { background:#f4f2f5; color:#8a858e; cursor:not-allowed; }
.tile-edit-scroll label small { color:var(--muted); font-size:.7rem; font-weight:400; line-height:1.4; }
.tile-edit-scroll fieldset { margin:0; border:1px solid var(--line); border-radius:12px; padding:14px; }
.tile-edit-scroll legend { padding:0 6px; color:var(--purple-dark); font-size:.82rem; font-weight:700; }
.tile-edit-footer { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-top:1px solid var(--line); background:#faf8fb; }
.tile-edit-footer-actions { display:flex; justify-content:flex-end; gap:10px; }
.secondary-admin-action { padding:10px 15px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--purple-dark); font-weight:700; cursor:pointer; }
.danger-link-button { padding:8px 0; border:0; background:transparent; color:#a22335; font-weight:700; cursor:pointer; }
.danger-link-button:hover { text-decoration:underline; text-underline-offset:3px; }
.danger-admin-action { padding:10px 15px; border:0; border-radius:9px; background:#a22335; color:#fff; font-weight:700; cursor:pointer; }
.delete-confirm { padding:15px; border:1px solid #edc5cb; border-radius:12px; background:#fff5f6; color:#6f1725; }
.delete-confirm strong { display:block; margin-bottom:5px; }
.delete-confirm p { margin:0 0 12px; color:#80404a; font-size:.78rem; line-height:1.5; }
.delete-confirm > div { display:flex; justify-content:flex-end; gap:9px; }
@media (max-width:650px) {
  .tile-edit-modal { padding:10px; }
  .tile-edit-dialog { max-height:calc(100vh - 20px); border-radius:15px; }
  .tile-edit-footer { align-items:stretch; flex-direction:column-reverse; }
  .tile-edit-footer-actions { width:100%; }
  .tile-edit-footer-actions button { flex:1; }
  .danger-link-button { align-self:flex-start; }
}

/* Aanpasbare tegeliconen */
.custom-image-icon {
  overflow: hidden;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(105,38,111,.14);
  box-shadow: 0 4px 12px rgba(62,35,68,.08);
}
.custom-image-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}
.icon-upload-field {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf8fb;
}
.icon-upload-field .field-label {
  display: block;
  margin-bottom: 4px;
  color: var(--purple-dark);
  font-size: .82rem;
  font-weight: 700;
}
.icon-upload-field small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}
.icon-upload-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.icon-preview {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(105,38,111,.15);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(62,35,68,.08);
}
.icon-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 5px;
}
.icon-preview.is-fallback {
  background: var(--purple-soft);
  color: var(--purple);
  box-shadow: none;
}
.icon-preview.is-fallback span {
  max-width: 48px;
  font-size: .58rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.file-picker-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--purple);
  border-radius: 9px;
  background: #fff;
  color: var(--purple) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.file-picker-button:hover { background: var(--purple-soft); }
.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.compact-action { min-height: 38px; padding: 9px 12px; font-size: .74rem; }
.compact-action:disabled { opacity: .48; cursor: not-allowed; }
@media (max-width: 520px) {
  .icon-upload-row { align-items: stretch; }
  .icon-preview { align-self: center; }
}

/* Nieuwe dashboardindeling: nieuws centraal, compacte snelkoppelingen rechts */
.page-content { padding-inline: clamp(22px, 3vw, 56px); }
.portal-dashboard { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(340px, .92fr); gap:34px; align-items:start; }
.news-feed { min-width:0; padding:8px 4px 24px; }
.news-feed-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; padding:0 4px; }
.news-feed-heading h2,.quick-links-heading h2 { margin:0; color:var(--purple-dark); font-size:clamp(1.55rem,2.4vw,2.25rem); letter-spacing:-.035em; text-transform:uppercase; }
.news-manage-button { padding:9px 13px; border:1px solid rgba(105,38,111,.18); border-radius:10px; background:#fff; color:var(--purple); font-weight:700; cursor:pointer; box-shadow:0 5px 16px rgba(62,35,68,.08); }
.news-manage-button[hidden] { display:none; }
.news-feed-list { display:grid; gap:32px; }
.news-article { position:relative; display:grid; grid-template-columns:minmax(210px, 35%) minmax(0,1fr); gap:28px; padding:0 4px 28px; border-bottom:1px solid rgba(105,38,111,.14); }
.news-article:last-child { border-bottom:0; }
.news-article-image { min-height:210px; overflow:hidden; border-radius:18px; background:linear-gradient(135deg,rgba(105,38,111,.10),rgba(36,125,165,.14)); box-shadow:var(--shadow); }
.news-article-image img { width:100%; height:100%; min-height:210px; object-fit:cover; display:block; }
.news-article-image.is-empty { display:grid; place-items:center; color:rgba(105,38,111,.48); }
.news-article-image.is-empty svg { width:66px; height:66px; fill:none; stroke:currentColor; stroke-width:1.4; }
.news-article-content { min-width:0; align-self:center; }
.news-article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:9px; color:var(--blue-dark); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.news-article h3 { margin:0 0 10px; color:var(--purple-dark); font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.2; }
.news-article-summary { margin:0 0 12px; color:var(--ink); font-size:.94rem; line-height:1.65; }
.news-article-body { margin:0; color:var(--muted); font-size:.84rem; line-height:1.7; white-space:pre-line; }
.news-read-more { display:inline-flex; margin-top:15px; color:var(--blue-dark); font-weight:700; font-size:.82rem; text-decoration:none; }
.news-read-more:hover { text-decoration:underline; text-underline-offset:3px; }
.news-empty { padding:48px 24px; border:1px dashed rgba(105,38,111,.22); border-radius:18px; color:var(--muted); text-align:center; background:rgba(255,255,255,.58); }
.portal-sidebar { position:sticky; top:18px; min-width:0; }
.birthday-slot:empty { display:none; }
.quick-links-heading { display:flex; align-items:end; justify-content:space-between; margin:0 0 12px; padding:0 3px; }
.quick-links-heading h2 { font-size:1.12rem; text-transform:none; letter-spacing:-.02em; }
.quick-links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quick-links-grid .tile { min-height:116px; border-radius:12px; }
.quick-links-grid .tile-main-link,.quick-links-grid .tile-content-static { min-height:116px; grid-template-columns:32px minmax(0,1fr) 9px; gap:9px; padding:17px 14px 14px; }
.quick-links-grid .tile-content-static { grid-template-columns:32px minmax(0,1fr); }
.quick-links-grid .tile-icon { width:30px; height:30px; }
.quick-links-grid .tile-icon svg { width:17px; height:17px; }
.quick-links-grid .tile-copy h3 { margin-bottom:5px; font-size:.82rem; line-height:1.22; }
.quick-links-grid .tile-copy p { font-size:.66rem; line-height:1.4; }
.quick-links-grid .arrow { font-size:1.45rem; }
.quick-links-grid .role-badge { margin-top:7px; font-size:.56rem; padding:4px 6px; }
.quick-links-grid .document-list,.quick-links-grid .birthday-list { margin-top:7px; }
.quick-links-grid .document-list a,.quick-links-grid .birthday-list { font-size:.62rem; }
.quick-links-grid .birthdays-tile { order:-10; grid-column:1 / -1; min-height:190px; }
.quick-links-grid .birthdays-tile .tile-content-static { min-height:190px; grid-template-columns:38px 1fr; padding:20px 18px; }
.quick-links-grid .birthdays-tile .tile-icon { width:36px; height:36px; }
.quick-links-grid .birthdays-tile .tile-copy h3 { font-size:1rem; }
.quick-links-grid .documents-tile { grid-column:1 / -1; }
.toolbar { margin-bottom:28px; }
.search-box { width:min(290px,100%); }

.news-admin-header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }
.news-admin-list { display:grid; gap:10px; }
.news-admin-item { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.news-admin-thumb { width:72px; height:58px; border-radius:9px; object-fit:cover; background:var(--purple-soft); }
.news-admin-item h3 { margin:0 0 4px; color:var(--purple-dark); font-size:.88rem; }
.news-admin-item p { margin:0; color:var(--muted); font-size:.72rem; }
.news-admin-actions { display:flex; gap:7px; }
.news-image-upload-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.news-image-preview { width:180px; height:110px; display:grid; place-items:center; overflow:hidden; border:1px dashed #cfc5d2; border-radius:12px; background:#faf8fb; color:var(--muted); font-size:.72rem; }
.news-image-preview img { width:100%; height:100%; object-fit:cover; }
.publish-toggle { display:flex !important; grid-template-columns:auto 1fr !important; align-items:center; gap:9px; }
.publish-toggle input { width:auto !important; }

@media (max-width:1100px) {
  .portal-dashboard { grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr); gap:24px; }
  .news-article { grid-template-columns:1fr; gap:18px; }
  .news-article-image,.news-article-image img { min-height:240px; }
}
@media (max-width:820px) {
  .portal-dashboard { grid-template-columns:1fr; }
  .portal-sidebar { position:relative; top:auto; }
  .news-article { grid-template-columns:minmax(150px,34%) 1fr; }
  .news-article-image,.news-article-image img { min-height:180px; }
}
@media (max-width:580px) {
  .news-article { grid-template-columns:1fr; }
  .quick-links-grid { grid-template-columns:1fr; }
  .quick-links-grid .birthdays-tile,.quick-links-grid .documents-tile { grid-column:auto; }
  .news-admin-item { grid-template-columns:58px minmax(0,1fr); }
  .news-admin-thumb { width:58px; height:50px; }
  .news-admin-actions { grid-column:1/-1; justify-content:flex-end; }
}

/* Google-zoekbalk */
.toolbar-search { align-items:center; margin-bottom:30px; }
.google-search { flex:1 1 520px; max-width:720px; min-height:50px; display:flex; align-items:center; gap:12px; padding:5px 6px 5px 16px; border:1px solid rgba(80,32,86,.14); border-radius:999px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(62,35,68,.09); }
.google-search:focus-within { border-color:var(--blue-light); box-shadow:0 0 0 4px rgba(99,183,211,.15),0 10px 28px rgba(62,35,68,.10); }
.google-search-mark { flex:0 0 auto; font-size:1.05rem; font-weight:700; color:var(--blue); }
.google-search input { flex:1 1 auto; min-width:0; padding:10px 2px; border:0; outline:0; background:transparent; color:var(--ink); font-size:.93rem; }
.google-search button { flex:0 0 auto; min-height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 16px; border:0; border-radius:999px; background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; font-weight:700; cursor:pointer; }
.google-search button:hover { filter:brightness(1.05); }
.google-search button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.portal-filter { width:min(250px,100%); }
@media (max-width:1000px) { .toolbar-search { align-items:stretch; flex-direction:column; } .google-search { flex-basis:auto; max-width:none; width:100%; } .toolbar-actions { width:100%; justify-content:flex-end; } }
@media (max-width:650px) { .google-search { padding-left:13px; } .google-search button span { display:none; } .google-search button { width:42px; padding:0; justify-content:center; } .toolbar-actions { align-items:stretch; } }

/* Gelijke 50/50-verdeling: nieuws links, snelkoppelingen rechts */
.portal-dashboard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.news-feed,
.portal-sidebar { min-width: 0; }
.quick-links-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.quick-links-grid .tile {
  min-height: 102px;
  border-radius: 11px;
}
.quick-links-grid .tile-main-link,
.quick-links-grid .tile-content-static {
  min-height: 102px;
  grid-template-columns: 27px minmax(0, 1fr) 7px;
  gap: 7px;
  padding: 14px 10px 11px;
}
.quick-links-grid .tile-content-static {
  grid-template-columns: 27px minmax(0, 1fr);
}
.quick-links-grid .tile-icon {
  width: 27px;
  height: 27px;
}
.quick-links-grid .tile-icon svg {
  width: 15px;
  height: 15px;
}
.quick-links-grid .sharepoint-icon {
  font-size: .72rem;
  box-shadow: 5px 3px 0 -2px rgba(31,151,155,.38);
}
.quick-links-grid .tile-copy h3 {
  margin-bottom: 4px;
  font-size: .75rem;
  line-height: 1.18;
}
.quick-links-grid .tile-copy p {
  font-size: .59rem;
  line-height: 1.34;
}
.quick-links-grid .arrow {
  font-size: 1.22rem;
}
.quick-links-grid .role-badge {
  margin-top: 5px;
  padding: 3px 5px;
  font-size: .5rem;
}
.quick-links-grid .document-list {
  margin-top: 5px;
}
.quick-links-grid .document-list li + li {
  margin-top: 4px;
}
.quick-links-grid .document-list a {
  font-size: .54rem;
  line-height: 1.25;
}
.quick-links-grid .birthdays-tile {
  grid-column: 1 / -1;
  min-height: 165px;
}
.quick-links-grid .birthdays-tile .tile-content-static {
  min-height: 165px;
  grid-template-columns: 34px 1fr;
  padding: 17px 16px;
}
.quick-links-grid .birthdays-tile .tile-icon {
  width: 33px;
  height: 33px;
}
.quick-links-grid .birthdays-tile .tile-copy h3 {
  font-size: .93rem;
}
.quick-links-grid .birthdays-tile .tile-copy p,
.quick-links-grid .birthdays-tile .birthday-list {
  font-size: .7rem;
}
.quick-links-grid .documents-tile {
  grid-column: auto;
}

@media (max-width: 1250px) {
  .portal-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 980px) {
  .portal-dashboard {
    grid-template-columns: 1fr;
  }
  .portal-sidebar {
    position: relative;
    top: auto;
  }
  .quick-links-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .quick-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quick-links-grid .birthdays-tile {
    grid-column: 1 / -1;
  }
}
@media (max-width: 460px) {
  .quick-links-grid {
    grid-template-columns: 1fr;
  }
  .quick-links-grid .birthdays-tile {
    grid-column: auto;
  }
}

/* Verjaardagen: twee kolommen breed en twee tegelrijen hoog */
.quick-links-grid {
  grid-auto-rows: 102px;
  grid-auto-flow: row dense;
}
.quick-links-grid .birthdays-tile {
  order: -10;
  grid-column: span 2;
  grid-row: span 2;
  min-height: 214px;
}
.quick-links-grid .birthdays-tile .tile-content-static {
  min-height: 214px;
  padding: 18px 17px;
}

@media (max-width: 700px) {
  .quick-links-grid {
    grid-auto-rows: 102px;
  }
  .quick-links-grid .birthdays-tile {
    grid-column: 1 / -1;
    grid-row: span 2;
    min-height: 214px;
  }
}

@media (max-width: 460px) {
  .quick-links-grid {
    grid-auto-rows: auto;
  }
  .quick-links-grid .birthdays-tile {
    grid-column: auto;
    grid-row: auto;
    min-height: 165px;
  }
  .quick-links-grid .birthdays-tile .tile-content-static {
    min-height: 165px;
  }
}


/* Handboeken: twee kolommen breed, met links in een 2 x 2 raster */
.quick-links-grid .documents-tile {
  grid-column: span 2;
  min-height: 102px;
}
.quick-links-grid .documents-tile .tile-content-static {
  min-height: 102px;
  grid-template-columns: 27px minmax(0, 1fr);
  padding: 12px 12px 10px;
}
.quick-links-grid .documents-tile .tile-copy h3 {
  margin-bottom: 2px;
}
.quick-links-grid .documents-tile .tile-copy p {
  margin-bottom: 4px;
}
.quick-links-grid .documents-tile .document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  margin-top: 4px;
}
.quick-links-grid .documents-tile .document-list li,
.quick-links-grid .documents-tile .document-list li + li {
  min-width: 0;
  margin-top: 0;
}
.quick-links-grid .documents-tile .document-list a {
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-links-grid .documents-tile .document-list a span {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .quick-links-grid .documents-tile {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .quick-links-grid .documents-tile {
    grid-column: auto;
    min-height: auto;
  }
  .quick-links-grid .documents-tile .tile-content-static {
    min-height: 150px;
  }
  .quick-links-grid .documents-tile .document-list {
    grid-template-columns: 1fr;
  }
  .quick-links-grid .documents-tile .document-list a {
    white-space: normal;
  }
}


/* Bewerkknop in de topbar */
.site-header { grid-template-columns:286px minmax(0,1fr) auto; }
.header-actions { position:relative; z-index:3; display:flex; align-items:center; padding:12px 28px 12px 12px; }
.header-edit-layout-button { white-space:nowrap; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.72); }
.site-footer { justify-content:center; }

/* Nieuws openen en fotogalerij */
.news-article-image.news-image-open { position:relative; width:100%; padding:0; border:0; cursor:zoom-in; text-align:initial; }
.news-article-image.news-image-open:hover img { transform:scale(1.025); }
.news-article-image img { transition:transform .25s ease; }
.news-image-count { position:absolute; right:12px; top:12px; padding:5px 8px; border-radius:999px; background:rgba(25,16,28,.72); color:#fff; font-size:.68rem; font-weight:700; }
.news-card-dots { position:absolute; left:50%; bottom:11px; display:flex; gap:5px; transform:translateX(-50%); }
.news-card-dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.58); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.news-card-dots i.active { width:16px; border-radius:999px; background:#fff; }
.news-title-button { padding:0; border:0; background:none; color:inherit; font:inherit; font-weight:inherit; text-align:left; cursor:pointer; }
.news-title-button:hover { color:var(--blue-dark); }
.news-body-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.news-read-more { padding:0; border:0; background:none; cursor:pointer; }
.news-images-preview { width:100%; min-height:116px; height:auto; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start; gap:9px; padding:10px; }
.news-preview-thumb { position:relative; width:112px; height:82px; overflow:hidden; border:2px solid transparent; border-radius:9px; background:#eee; cursor:grab; user-select:none; transition:transform .16s ease, opacity .16s ease, border-color .16s ease, box-shadow .16s ease; }
.news-preview-thumb:active { cursor:grabbing; }
.news-preview-thumb:focus-visible { outline:3px solid rgba(36,125,165,.28); outline-offset:2px; }
.news-preview-thumb.is-dragging { opacity:.38; transform:scale(.96); }
.news-preview-thumb.drag-over { border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,125,165,.14); transform:translateY(-2px); }
.news-preview-thumb img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.news-preview-thumb button { position:absolute; top:5px; right:5px; width:23px; height:23px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:rgba(30,17,33,.78); color:#fff; cursor:pointer; }
.news-image-order { position:absolute; left:5px; bottom:5px; z-index:2; min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px; border-radius:999px; background:rgba(30,17,33,.78); color:#fff; font-size:.65rem; font-weight:700; }
.news-image-drag-handle { position:absolute; left:6px; top:5px; z-index:2; padding:2px 5px; border-radius:6px; background:rgba(30,17,33,.68); color:#fff; font-size:.72rem; line-height:1; letter-spacing:-2px; pointer-events:none; }

.news-reader-modal { position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:22px; background:rgba(24,13,27,.78); backdrop-filter:blur(8px); }
.news-reader-modal[hidden] { display:none; }
.news-reader-dialog { position:relative; width:min(960px,100%); max-height:min(92vh,900px); overflow:auto; border-radius:22px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.34); scrollbar-width:thin; scrollbar-color:var(--blue) transparent; }
.news-reader-dialog::-webkit-scrollbar { width:9px; }
.news-reader-dialog::-webkit-scrollbar-track { margin:16px 0; background:transparent; }
.news-reader-dialog::-webkit-scrollbar-thumb { border:2px solid #fff; border-radius:999px; background:linear-gradient(var(--purple),var(--blue)); }
.news-reader-close { position:absolute; z-index:4; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(30,18,34,.72); color:#fff; font-size:1.5rem; cursor:pointer; }
.news-reader-gallery { position:relative; min-height:320px; background:#18131a; }
.news-reader-gallery[hidden] { display:none; }
.news-reader-gallery img { display:block; width:100%; max-height:620px; min-height:320px; object-fit:contain; }
.gallery-nav { position:absolute; z-index:3; top:50%; width:44px; height:54px; border:0; border-radius:12px; background:rgba(20,12,22,.58); color:#fff; font-size:2.3rem; cursor:pointer; transform:translateY(-50%); }
.gallery-prev { left:14px; } .gallery-next { right:14px; }
.gallery-dots { position:absolute; z-index:3; left:50%; bottom:16px; display:flex; gap:8px; transform:translateX(-50%); }
.gallery-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.3); }
.gallery-dots button.active { width:25px; border-radius:999px; background:#fff; }
.news-reader-content { padding:34px clamp(24px,5vw,58px) 46px; }
.news-reader-meta { display:flex; gap:10px; margin-bottom:10px; color:var(--blue-dark); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.news-reader-content h2 { margin:0 0 14px; color:var(--purple-dark); font-size:clamp(1.65rem,3.5vw,2.65rem); line-height:1.12; }
.news-reader-summary { margin:0 0 22px; color:var(--ink); font-size:1.05rem; line-height:1.7; font-weight:600; }
.news-reader-body { color:var(--muted); font-size:.96rem; line-height:1.85; white-space:pre-wrap; }
.news-reader-link { display:inline-flex; margin-top:26px; color:var(--blue-dark); font-weight:700; }

@media (max-width:900px) {
  .site-header { grid-template-columns:230px minmax(0,1fr); }
  .header-actions { grid-column:2; position:absolute; right:8px; top:50%; padding:0; transform:translateY(-50%); }
  .header-copy { padding-right:210px; }
}
@media (max-width:650px) {
  .site-header { grid-template-columns:1fr; }
  .header-actions { grid-column:1; top:auto; right:14px; bottom:13px; transform:none; }
  .header-copy { padding-right:200px; }
  .header-edit-layout-button { padding:9px 11px; font-size:.72rem; }
  .news-reader-modal { padding:8px; }
  .news-reader-dialog { max-height:96vh; border-radius:16px; }
  .news-reader-gallery,.news-reader-gallery img { min-height:220px; }
  .gallery-nav { width:38px; height:46px; }
  .news-reader-content { padding:27px 20px 34px; }
}

/* Verjaardagenlijst groeit verticaal mee met de inhoud */
.quick-links-grid {
  grid-auto-rows: minmax(102px, auto);
}
.quick-links-grid .birthdays-tile {
  height: auto;
  min-height: 214px;
  align-self: stretch;
}
.quick-links-grid .birthdays-tile .tile-content-static {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
.quick-links-grid .birthdays-tile .tile-copy {
  min-width: 0;
}
.quick-links-grid .birthdays-tile .birthday-list {
  overflow: visible;
}
.quick-links-grid .birthdays-tile .birthday-row {
  min-width: 0;
}
.quick-links-grid .birthdays-tile .birthday-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 460px) {
  .quick-links-grid {
    grid-auto-rows: auto;
  }
  .quick-links-grid .birthdays-tile,
  .quick-links-grid .birthdays-tile .tile-content-static {
    height: auto;
    min-height: 165px;
  }
}

/* Leesbaarheid snelkoppelingen: minimaal 14px ondersteunende tekst en 16px titels */
.quick-links-grid {
  grid-auto-rows: 126px;
}
.quick-links-grid .tile {
  min-height: 126px;
}
.quick-links-grid .tile-main-link,
.quick-links-grid .tile-content-static {
  min-height: 126px;
  grid-template-columns: 31px minmax(0, 1fr) 9px;
  gap: 9px;
  padding: 16px 13px 14px;
}
.quick-links-grid .tile-content-static {
  grid-template-columns: 31px minmax(0, 1fr);
}
.quick-links-grid .tile-icon {
  width: 31px;
  height: 31px;
}
.quick-links-grid .tile-icon svg {
  width: 18px;
  height: 18px;
}
.quick-links-grid .sharepoint-icon {
  font-size: .86rem;
}
.quick-links-grid .tile-copy h3 {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.25;
}
.quick-links-grid .tile-copy p {
  font-size: .875rem;
  line-height: 1.45;
}
.quick-links-grid .document-list a,
.quick-links-grid .birthday-list,
.quick-links-grid .birthdays-tile .tile-copy p,
.quick-links-grid .birthdays-tile .birthday-list {
  font-size: .875rem;
  line-height: 1.4;
}
.quick-links-grid .month-label {
  font-size: .8rem;
}
.quick-links-grid .role-badge {
  font-size: .75rem;
}
.quick-links-grid .arrow {
  font-size: 1.55rem;
}
.quick-links-grid .birthdays-tile {
  min-height: 262px;
}
.quick-links-grid .birthdays-tile .tile-content-static {
  min-height: 262px;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 20px 18px;
}
.quick-links-grid .birthdays-tile .tile-icon {
  width: 37px;
  height: 37px;
}
.quick-links-grid .birthdays-tile .tile-copy h3 {
  font-size: 1.08rem;
}
.quick-links-grid .documents-tile,
.quick-links-grid .documents-tile .tile-content-static {
  min-height: 126px;
}
.quick-links-grid .documents-tile .tile-content-static {
  grid-template-columns: 31px minmax(0, 1fr);
  padding: 14px 14px 12px;
}
.quick-links-grid .documents-tile .document-list {
  gap: 7px 14px;
}

@media (max-width: 700px) {
  .quick-links-grid {
    grid-auto-rows: 126px;
  }
  .quick-links-grid .birthdays-tile,
  .quick-links-grid .birthdays-tile .tile-content-static {
    min-height: 262px;
  }
}

@media (max-width: 460px) {
  .quick-links-grid {
    grid-auto-rows: auto;
  }
  .quick-links-grid .tile,
  .quick-links-grid .tile-main-link,
  .quick-links-grid .tile-content-static,
  .quick-links-grid .birthdays-tile,
  .quick-links-grid .birthdays-tile .tile-content-static,
  .quick-links-grid .documents-tile,
  .quick-links-grid .documents-tile .tile-content-static {
    min-height: auto;
  }
}


/* Raster met vaste tegelmaten: breder nieuws en compactere snelkoppelingen */
.portal-dashboard {
  grid-template-columns: minmax(0, 1.7fr) minmax(390px, 1fr);
  gap: 34px;
}
.quick-links-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 74px;
  grid-auto-flow: row dense;
  gap: 10px;
}
.quick-links-grid .tile {
  min-width: 0;
  height: auto;
}
.quick-links-grid .tile:not([data-size]),
.quick-links-grid .tile[data-size="standard"] {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 158px;
}
.quick-links-grid .tile[data-size="wide"] {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 158px;
}
.quick-links-grid .tile[data-size="icon"] {
  order: -20;
  grid-column: span 1;
  grid-row: span 1;
  min-height: 74px;
}
.quick-links-grid .tile[data-size="icon"] .tile-main-link {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.quick-links-grid .tile[data-size="icon"] .tile-copy,
.quick-links-grid .tile[data-size="icon"] .arrow {
  display: none;
}
.quick-links-grid .tile[data-size="icon"] .tile-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}
.quick-links-grid .tile[data-size="icon"] .tile-icon svg {
  width: 21px;
  height: 21px;
}
.quick-links-grid .tile[data-size="icon"] .sharepoint-icon {
  font-size: 1.15rem;
  box-shadow: 7px 4px 0 -3px rgba(31,151,155,.38);
}
.quick-links-grid .tile[data-size="icon"] .brand-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.quick-links-grid .tile[data-size="standard"] .tile-main-link,
.quick-links-grid .tile[data-size="standard"] .tile-content-static,
.quick-links-grid .tile[data-size="wide"] .tile-main-link,
.quick-links-grid .tile[data-size="wide"] .tile-content-static {
  min-height: 158px;
}
.quick-links-grid .birthdays-tile[data-size="wide"] {
  order: -10;
  grid-column: span 4;
  grid-row: span 3;
  min-height: 242px;
  height: auto;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static {
  min-height: 242px;
  height: auto;
}
.quick-links-grid .documents-tile[data-size="wide"] {
  grid-column: span 4;
  grid-row: span 2;
}
.tile-size-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d8d0db;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.tile-size-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}
.helix-icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(105,38,111,.1);
}

@media (max-width: 1120px) {
  .portal-dashboard {
    grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
    gap: 24px;
  }
}
@media (max-width: 980px) {
  .portal-dashboard { grid-template-columns: 1fr; }
  .quick-links-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .quick-links-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 64px; }
  .quick-links-grid .tile[data-size="icon"] { min-height: 64px; }
  .quick-links-grid .tile[data-size="icon"] .tile-main-link { min-height: 64px; }
  .quick-links-grid .tile:not([data-size]),
  .quick-links-grid .tile[data-size="standard"] { grid-column: span 2; grid-row: auto; min-height: 142px; }
  .quick-links-grid .tile[data-size="wide"] { grid-column: span 4; grid-row: auto; min-height: 142px; }
  .quick-links-grid .birthdays-tile[data-size="wide"] { grid-column: span 4; grid-row: auto; min-height: 220px; }
}

/* Rechterpaneel bovenaan uitlijnen en voorbeeldrol tijdelijk in footer */
.portal-dashboard {
  align-items: start;
}
.portal-sidebar {
  top: 10px;
}
.news-google-search {
  width: 100%;
  margin: 0 0 22px;
}
.quick-links-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 48%);
  align-items: end;
  gap: 18px;
  margin-top: 0;
}
.quick-links-heading .portal-filter {
  width: 100%;
}
.site-footer .footer-role-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.site-footer .footer-role-preview select {
  min-width: 150px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  color: #fff;
}
.site-footer .footer-role-preview select option {
  color: var(--ink);
  background: #fff;
}

/* Verjaardagstegel groeit alleen naar beneden en reserveert voldoende rasterrijen */
.quick-links-grid .birthdays-tile[data-size="wide"] {
  height: auto;
  max-height: none;
  overflow: visible;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static,
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-copy,
.quick-links-grid .birthdays-tile[data-size="wide"] .birthday-list {
  height: auto;
  max-height: none;
  overflow: visible;
}

@media (max-width: 760px) {
  .quick-links-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .site-footer .footer-role-preview {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Definitieve correctie: het paneel zelf groeit mee met de verjaardagenlijst */
.quick-links-grid .birthdays-tile[data-size="wide"] {
  box-sizing: border-box;
  align-self: stretch;
  overflow: hidden;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static {
  box-sizing: border-box;
  min-height: 100%;
  height: 100%;
  align-content: start;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-copy {
  min-height: 0;
  overflow: visible;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .birthday-list {
  padding-bottom: 8px;
}
@media (max-width: 460px) {
  .quick-links-grid .birthdays-tile[data-size="wide"],
  .quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static {
    height: auto;
    min-height: auto;
  }
}


/* Dynamische hoogte verjaardagstegel: groeit en krimpt op basis van inhoud */
.quick-links-grid .birthdays-tile[data-size="wide"] {
  height: auto !important;
  max-height: none !important;
  overflow: hidden;
  align-self: stretch;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static {
  height: auto !important;
  max-height: none !important;
  align-content: start;
  overflow: visible;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-copy,
.quick-links-grid .birthdays-tile[data-size="wide"] .birthday-list {
  height: auto !important;
  max-height: none !important;
  overflow: visible;
}

/* Definitieve dynamische verjaardagstegel
   De tegel staat op een eigen volledige rasterrij. De rijhoogte volgt de
   inhoud, zodat de tegel nooit achter de volgende tegels doorloopt. */
.quick-links-grid {
  grid-auto-rows: auto !important;
  align-items: start;
}
.quick-links-grid .tile[data-size="icon"] {
  grid-row: auto !important;
  height: 74px;
  min-height: 74px;
}
.quick-links-grid .tile:not([data-size]),
.quick-links-grid .tile[data-size="standard"] {
  grid-row: auto !important;
  height: auto;
  min-height: 158px;
}
.quick-links-grid .tile[data-size="wide"] {
  grid-row: auto !important;
  height: auto;
  min-height: 158px;
}
.quick-links-grid .birthdays-tile[data-size="wide"] {
  grid-column: 1 / -1;
  grid-row: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start;
  overflow: hidden;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-content-static {
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible;
  align-content: start;
  padding-bottom: 22px;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .tile-copy,
.quick-links-grid .birthdays-tile[data-size="wide"] .birthday-list {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible;
}
.quick-links-grid .birthdays-tile[data-size="wide"] .birthday-list {
  padding-bottom: 0;
}

@media (max-width: 520px) {
  .quick-links-grid .tile[data-size="icon"] {
    height: 64px;
    min-height: 64px;
  }
  .quick-links-grid .birthdays-tile[data-size="wide"] {
    min-height: 0 !important;
  }
}


/* Zet de maand boven de datums van de verjaardagen */
.quick-links-grid .birthdays-tile .birthday-month-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 15px;
  align-items: end;
  margin: 0 0 4px;
}
.quick-links-grid .birthdays-tile .birthday-month-row > span:first-child {
  min-width: 0;
}
.quick-links-grid .birthdays-tile .month-label {
  position: static;
  display: block;
  margin: 0;
  padding-right: 2px;
  text-align: right;
}
.quick-links-grid .birthdays-tile .tile-copy {
  padding-right: 0;
}
.quick-links-grid .birthdays-tile .birthday-list {
  margin-top: 10px;
}


/* Plaats de maand op dezelfde hoogte als de titel, rechts boven de datumkolom */
.quick-links-grid .birthdays-tile .tile-copy {
  position: relative;
  padding-right: 126px;
}
.quick-links-grid .birthdays-tile .birthday-list {
  position: relative;
  margin-top: 6px;
}
.quick-links-grid .birthdays-tile .birthday-month-row {
  position: absolute;
  top: -34px;
  right: 0;
  display: block;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.quick-links-grid .birthdays-tile .birthday-month-row > span:first-child {
  display: none;
}
.quick-links-grid .birthdays-tile .month-label {
  position: static;
  display: block;
  margin: 0;
  padding-right: 2px;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .quick-links-grid .birthdays-tile .tile-copy {
    padding-right: 96px;
  }
  .quick-links-grid .birthdays-tile .birthday-month-row {
    top: -30px;
  }
}


/* Definitieve vormgeving verjaardagstegel */
.quick-links-grid .birthdays-tile .tile-content-static {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.quick-links-grid .birthdays-tile .birthday-copy {
  display: block;
  padding-right: 0 !important;
  width: 100%;
}
.quick-links-grid .birthdays-tile .birthday-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin: 0 0 6px;
}
.quick-links-grid .birthdays-tile .birthday-header h3 {
  margin: 0;
  line-height: 1.2;
}
.quick-links-grid .birthdays-tile .month-label {
  display: block;
  margin: 3px 0 0;
  padding-right: 2px;
  color: var(--blue);
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
.quick-links-grid .birthdays-tile .birthday-list {
  margin-top: 0 !important;
  position: static !important;
}
.quick-links-grid .birthdays-tile .birthday-month-row {
  display: none !important;
}
.quick-links-grid .birthdays-tile .birthday-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #e7e1e8;
}
.quick-links-grid .birthdays-tile .birthday-row > span:first-child {
  min-width: 0;
}
.quick-links-grid .birthdays-tile .birthday-row > span:last-child {
  white-space: nowrap;
  text-align: right;
}
@media (max-width: 640px) {
  .quick-links-grid .birthdays-tile .birthday-header {
    gap: 10px;
  }
  .quick-links-grid .birthdays-tile .month-label {
    font-size: .68rem;
    margin-top: 2px;
  }
}