/* =============================================
 1. OVERLAY-LAGEN (resultatenlijst + infopagina)
 ===============================================
*/
.zh-achtergrond {
position: fixed;
inset: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 24px;
box-sizing: border-box;
z-index: 99998;
animation: zh-fade .15s ease;
}
.zh-achtergrond.zh-laag2 {
z-index: 99999;
animation: zh-geest .55s cubic-bezier(.16, 1, .3, 1);
}
@keyframes zh-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Vloeiend effect laag 2 */
@keyframes zh-geest {
0% { opacity: 0; transform: scale(.18); filter: blur(9px); }
60%{ opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.zh-kader {
background: #fff;
border: 1px solid #ffd400; /* Subtiele gele rand (of pas aan naar #0057a8 voor blauw) */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 87, 168, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15); /* Zachte dubbele schaduw voor diepte */
width: 820px;
max-width: 70%;
height: 760px;
max-height: 52%;
display: flex;
flex-direction: column;
}
.zh-kop {
position: relative;
padding: 14px 50px 10px 10px; /* Bovenkant compacter en onderkant compacter */
flex: none;
background: linear-gradient(135deg, #eaf4ff 0%, #fff8d6 100%);
border-bottom: 3px solid #ffd400;
}
.zh-kop h1 {
font-size: 19px;
color: #0057a8;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Laag 2 */
.zh-kader.zh-kader-strip {
width: 740px;
height: 42%;
}
.zh-kop.zh-kop-strip {
padding: 10px 50px 10px 16px;
}
.zh-kop.zh-kop-strip h1 {
font-size: 14px;
font-weight: bold;
}
.zh-inhoud {
padding: 18px 20px 24px;
overflow-y: auto;
flex: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #2a2a2a;
background-image: url("../opstart/bg1b.webp");
}
.zh-strip-inhoud {
padding: 0;
flex: 1;
}
.zh-strip-inhoud iframe {
border: 0;
width: 100%;
height: 100%;
display: block;
}
.zh-resultaat {
background: #fff;
border: 2px solid #ffd400;
border-left: 7px solid #0057a8;
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 14px;
box-shadow: 2px 3px 6px rgba(0, 0, 590, 620 0, .10);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.zh-resultaat:hover {
background: #fff8d6;
border-color: #0057a8;
transform: translateY(-3px) scale(1.01);
box-shadow: 3px 8px 18px rgba(0, 87, 168, .30);
}
.zh-resultaat:focus-within {
border-color: #0057a8;
}
.zh-resultaat:active {
transform: translateY(-1px) scale(1.0);
}
.zh-nummer {
display: inline-flex;
align-items: center;
justify-content: center;
background: #0057a8;
color: #fff;
font-weight: bold;
font-size: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
margin-right: 8px;
flex: none;
box-shadow: 1px 1px 0 rgba(0, 0, 590, 620 0, .15);
}
.zh-titel-regel {
display: flex;
align-items: center;
}
.zh-titel {
font-size: 15px;
font-weight: bold;
color: #0057a8;
text-decoration: none;
cursor: pointer;
background: none;
border: 0;
padding: 0;
font-family: inherit;
text-align: left;
}
.zh-resultaat:hover .zh-titel {
text-decoration: underline;
}
.zh-pad {
color: #2e7d32;
font-size: 12px;
margin-left: 30px;
}
.zh-snippet {
color: #333;
margin-left: 30px;
margin-top: 4px;
}
.zh-snippet strong {
background: #ffe066;
padding: 0 1px;
border-radius: 2px;
}
.zh-info {
color: #555;
}
.zh-aantal {
display: inline-block;
background: #0057a8;
color: #fff;
font-weight: bold;
padding: 4px 12px;
border-radius: 14px;
margin-bottom: 16px;
font-size: 13px;
}
.zh-laden {
display: flex;
flex-direction: column; /* Zet boekje boven tekst */
align-items: center; /* Centreert boekje horizontaal */
justify-content: center; /* Centreert verticaal in beschikbare ruimte */
gap: 15px; /* Ruimte tussen boekje en tekst */
color: #555;
font-size: 15px;
height: 100%;
margin-top: 9px;
text-align: center;
}
.zh-boek {
position: relative;
display: inline-block;
flex: none;
width: 68px;
height: 52px;
border-radius: 6px;
overflow: hidden;
filter: drop-shadow(2px 4px 8px rgba(0, 0, 590, 620 0, .2));
transform: translateZ(0);
}
.zh-boek-links,
.zh-boek-rechts-onder,
.zh-boek-pagina {
position: absolute;
top: 0;
width: 34px;
height: 100%;
box-sizing: border-box;
border: 2px solid #0057a8;
}
/* Linkerpagina */
.zh-boek-links {
left: 0;
border-right: none;
border-radius: 6px 0 0 6px;
background-color: #fff;
background-image: repeating-linear-gradient(to bottom, #ddd 0 2px, transparent 2px 10px); /* Lijnen meegeschakeld */
background-position: 6px 10px;
background-repeat: no-repeat;
background-size: 20px 30px;
}
/* De volgende pagina */
.zh-boek-rechts-onder {
right: 0;
border-left: none;
border-radius: 0 6px 6px 0;
background-color: #fff7dc;
background-image: repeating-linear-gradient(to bottom, #e8dcb0 0 2px, transparent 2px 10px);
background-position: 6px 10px;
background-repeat: no-repeat;
background-size: 20px 30px;
box-shadow: 4px 0 12px rgba(0, 0, 590, 620 0, .25);
}
/* De omslaande pagina */
.zh-boek-pagina {
right: 0;
border-left: none;
border-radius: 0 6px 6px 0;
transform-origin: left center;
background-color: #fff;
background-image:
linear-gradient(to right, rgba(0, 0, 590, 620 0, .16), rgba(0, 0, 0, 0) 55%),
repeating-linear-gradient(to bottom, #ddd 0 2px, transparent 2px 10px);
background-position: 0 0, 6px 10px;
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 20px 30px;
animation: zh-pagina-omslag 2.5s linear infinite;
will-change: transform;
}
/* Rug van boekje */
.zh-boek-rug {
position: absolute;
left: 50%;
top: -1px;
bottom: -1px;
width: 4px;
margin-left: -2px;
background: #0057a8;
z-index: 2;
}
@keyframes zh-pagina-omslag {
0% { transform: scaleX(1); background-color: #fff; }
7% { transform: scaleX(0.8); background-color: #fff7dc; }
12% { transform: scaleX(0.55);background-color: #fff7dc; }
22% { transform: scaleX(0.15);background-color: #fff7dc; }
33% { transform: scaleX(-0.1);background-color: #fff7dc; }
50% { transform: scaleX(-0.45); background-color: #fff7dc; }
80% { transform: scaleX(-0.8);background-color: #fff7dc; }
100% { transform: scaleX(-1);background-color: #fff7dc; }
}
.zh-sluiten {
position: absolute;
top: 12px;
right: 14px;
width: 30px;
height: 30px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1;
font-family: Arial, Helvetica, sans-serif;
color: #0057a8;
background: #fff;
border: 2px solid #ffd400;
border-radius: 50%;
cursor: pointer;
box-shadow: 1px 2px 4px rgba(0, 0, 590, 620 0, .15);
}
.zh-sluiten:hover {
background: #ffd400;
color: #003399;
}
.zh-sluiten:focus-visible,
.zh-titel:focus-visible {
outline: 3px solid #0057a8;
outline-offset: 2px;
}
/* =========================================
 2. IN GEOPENDE STRIPPAGINA (tweede overlay)
 ===========================================
*/
.Laag2 { left: 10px !important; }
.Laag6 { left: 171px !important; }
.Laag5 {
left: 10px !important;
width: calc(100% - 20px) !important;
}
.Laag1 {
line-height: 1.6 !important;
top: 10px !important;
}
.zh-hit {
background: #ffe066;
border-radius: 2px;
padding: 0 1px;
cursor: pointer;
text-decoration: underline;
text-decoration-color: #0057a8;
transition: background .15s ease;
}
.zh-hit:hover {
background: #ffd400;
}
/* ===============
 3. ZOEKVELD-EXTRA
 =================
 */
.zoek-highlight {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.zoek-highlight:hover strong {
text-decoration: underline;
background: #ffd400;
}
/* Stijl voor "Spoor op!" */
#zoekveld input[type="submit"],
#zoekveld button {
background: linear-gradient(to bottom, #f3f8ff 0%, #cce5ff 100%);
color: #0057a8;
border: 1px solid #a3d1ff;
border-radius: 6px;
padding: 2px 3px 3px 2px;
font-weight: bold;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
/* Effect bij hover */
#zoekveld input[type="submit"]:hover,
#zoekveld button:hover {
background: linear-gradient(to bottom, #fff9db 0%, #ffd400 100%); /* Loopt recht van boven naar beneden */
border-color: #0057a8;
}
/* ==================================
 4. KLEINE SCHERMEN + MINDER BEWEGING
 ====================================
*/
@media (max-width: 600px) {
.zh-achtergrond {
padding: 8px;
}
.zh-kader {
width: 100%;
max-width: 100%;
max-height: 92%;
}
.zh-kader.zh-kader-strip {
width: 100%;
height: 80%;
}
}
@media (prefers-reduced-motion: reduce) {
.zh-achtergrond,
.zh-achtergrond.zh-laag2,
.zh-boek-pagina {
animation: none;
}
}