/* Editable module cards following the supplied civic portal reference. */
#modul.modules-reference { position:relative; isolation:isolate; padding-top:50px; padding-bottom:64px; }
.modules-band::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 2% 3%,#e8effb99,transparent 42%),radial-gradient(ellipse at 99% 90%,#e4edfcaa,transparent 50%),#f8faff; pointer-events:none; }
#modul.modules-reference .section-title { gap:25px; margin-bottom:32px; align-items:center; }
#modul.modules-reference .section-title h2 { max-width:none; font-size:clamp(24px,2.45vw,36px); font-weight:800; letter-spacing:-1.2px; line-height:1.25; margin:0; color:#08203d; }
#modul.modules-reference .section-title h2 span { color:#2850d5; }
#modul.modules-reference .section-title h2::after { content:""; display:block; width:56px; height:5px; background:#ffe24b; margin-top:10px; }
#modul.modules-reference .section-title > p { flex-shrink:0; color:#617595; font-size:12px; line-height:1.6; margin:0; }
#modul.modules-reference .module-grid { gap:18px; }
#modul.modules-reference .module { position:relative; isolation:isolate; overflow:hidden; padding:27px 31px 19px; border-radius:19px; display:flex; flex-direction:column; border:1px solid; box-shadow:0 17px 32px #0a285a14; }
#modul.modules-reference .module.active { background:linear-gradient(120deg,#ffe957,#fff075 48%,#ffe34c); border-color:#fff4a7; color:#061e36; }
#modul.modules-reference .module.upcoming { background:linear-gradient(125deg,#062d63,#073b77 60%,#062b61); border-color:#3870b0; color:#fff; }
#modul.modules-reference .module::before,#modul.modules-reference .module::after { content:""; pointer-events:none; position:absolute; border-radius:48%; width:350px; height:500px; transform:rotate(35deg); right:-240px; bottom:-210px; z-index:-1; }
#modul.modules-reference .module.active::before { background:#efbc152a; }
#modul.modules-reference .module.upcoming::before { background:#1679c727; }
#modul.modules-reference .module::after { right:-160px; bottom:-350px; width:400px; background:#ffffff0d; }
#modul.modules-reference .module-top { margin-bottom:17px; }
#modul.modules-reference .module-icon { width:54px; height:54px; border-radius:13px; background:#fff7c1; color:#071e33; box-shadow:0 5px 12px #80610012; }
#modul.modules-reference .module-icon svg { width:29px; height:29px; }
#modul.modules-reference .upcoming .module-icon { color:white; background:#4169a4a6; box-shadow:none; }
#modul.modules-reference .badge { display:flex; align-items:center; gap:7px; font-size:10px; padding:9px 13px; background:#e5f6ec; color:#137346; border:0; box-shadow:0 3px 8px #00000006; }
#modul.modules-reference .badge i { width:8px; height:8px; background:#2bb976; border-radius:50%; }
#modul.modules-reference .upcoming .badge { background:#355f9b; color:#fff; border:0; }
#modul.modules-reference .upcoming .badge i { background:#dcecff; }
#modul.modules-reference .module-no { color:inherit; font-size:10.5px; letter-spacing:2px; font-weight:600; }
#modul.modules-reference .module h3 { color:inherit; font-size:clamp(23px,2vw,29px); line-height:1.25; letter-spacing:-.7px; margin:12px 0 10px; font-weight:800; }
#modul.modules-reference .module p { color:inherit; font-size:13px; line-height:1.65; max-width:none; margin:0; }
#modul.modules-reference .tags { margin:20px 0; gap:10px; flex-wrap:wrap; }
#modul.modules-reference .tags span { display:inline-flex; align-items:center; gap:7px; background:#fff7c1; border:1px solid #fff9db; color:#081e32; font-size:10.5px; font-weight:600; line-height:1.3; padding:10px 11px; border-radius:9px; }
#modul.modules-reference .tags svg { width:15px; height:15px; flex-shrink:0; }
#modul.modules-reference .upcoming .tags span { background:#22518e; border-color:#22518e; color:#fff; }
#modul.modules-reference .module > a { margin-top:auto; color:inherit; border-top:1px solid #ffffff8c; padding-top:13px; display:flex; align-items:center; font-size:14px; font-weight:700; }
#modul.modules-reference .upcoming > a { border-top-color:#ffffff36; }
#modul.modules-reference .module-arrow { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff7c1; color:#071e33; font-size:24px; font-weight:400; transition:transform .15s; }
#modul.modules-reference .upcoming .module-arrow { background:#365f9a; color:white; }
#modul.modules-reference .module > a:hover .module-arrow { transform:translateX(3px); }
@media(max-width:900px) { #modul.modules-reference .section-title { align-items:start; } #modul.modules-reference .module { padding:24px; } #modul.modules-reference .tags { gap:7px; } #modul.modules-reference .tags span { font-size:10px; padding:9px; } }
@media(max-width:600px) { #modul.modules-reference { padding-top:34px; padding-bottom:40px; } #modul.modules-reference .section-title > p { margin-top:15px; } #modul.modules-reference .section-title h2 { font-size:27px; letter-spacing:-.7px; } #modul.modules-reference .module { padding:24px 22px 18px; } #modul.modules-reference .module h3 { font-size:25px; } #modul.modules-reference .module p { font-size:13px; } #modul.modules-reference .module-grid { gap:20px; } }
@media(prefers-reduced-motion:reduce) { #modul.modules-reference .module-arrow { transition:none; } }
#modul.modules-reference .module.active .tags span { background:#fff7c1; border-color:#fff9db; color:#081e32; }

/* Fine contour texture and full-card native links. */
.modules-band::before { background-image:url("assets/contour-light.svg"),radial-gradient(ellipse at 2% 3%,#e8effb99,transparent 42%),radial-gradient(ellipse at 99% 90%,#e4edfcaa,transparent 50%); background-color:#f8faff; background-repeat:repeat,no-repeat,no-repeat; background-size:820px 600px,auto,auto; }
#modul.modules-reference .module { transition:transform .18s ease,box-shadow .18s ease; cursor:pointer; }
#modul.modules-reference .module > a::after { content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; }
#modul.modules-reference .module:hover,
#modul.modules-reference .module:focus-within { transform:translateY(-3px); box-shadow:0 21px 36px #0a285a24; }
#modul.modules-reference .module:focus-within { outline:3px solid #2375b9; outline-offset:4px; }
#modul.modules-reference .module > a:focus-visible { outline:none; }
@media(prefers-reduced-motion:reduce) { #modul.modules-reference .module { transition:none; } #modul.modules-reference .module:hover,#modul.modules-reference .module:focus-within { transform:none; } }

/* Patch 1.7: local base transition and independently masked contour overlay. */
.modules-band {
  position:relative;
  padding-block:14px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 25%,#f7faff 70%,#f3f7fa 100%);
  isolation:isolate;
}
.modules-band #modul.modules-reference { margin-block:0; }
.modules-band::before {
  background:transparent url("assets/topographic-contours.png") center / cover no-repeat;
  opacity:.8;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  pointer-events:none;
}
/* Only the tail of the existing hero fades to the white start of the module band. */
.hero-band {
  background:linear-gradient(to bottom,transparent 78%,#fff 100%),
    radial-gradient(ellipse at 80% 45%,#edf5fc,transparent 60%),#fff;
}
@media(max-width:600px) {
  .modules-band { padding-block:10px; }
  .modules-band::before {
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  }
}