/* Trogkieken testfase v4.3: typografie afgestemd op de CSS van OnlineHoogeveen. */
:root{
    --tg-bg:#f3eee4;
    --tg-card:#fffdf8;
    --tg-blue:#064784;
    --tg-line:#e5d8c6;
    --tg-muted:#667085;
}
html{background:var(--tg-bg)}
body{min-height:100vh;overflow-x:hidden}
.tg-wrap{max-width:900px;margin:0 auto;padding:20px 16px 48px}
.tg-kop{text-align:center;margin:0 0 18px}
.tg-kop h1{margin:0;color:#173b65;font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,5vw,44px)}
.tg-kop p{margin:6px 0 0;color:var(--tg-muted)}
.tg-jaar{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 16px}
.tg-jaar label{font-weight:700;color:#2d2924}
.tg-jaar select{min-width:96px;background:#fffdf8;border-color:#d9cbb8}

/* Dezelfde rustige foto-omgeving als de bestaande artikelpagina. */
.tg-maandblok{
    position:relative;
    padding:14px;
    background:var(--tg-card);
    border:1px solid #d9cbb8;
    border-radius:18px;
    box-shadow:0 14px 38px rgba(78,58,33,.10);
}
.tg-maandpagina{
    display:block;
    position:relative;
    text-decoration:none;
    border-radius:13px;
    overflow:hidden;
    background:#fffdfa;
    border:1px solid #e5dacb;
}
.tg-foto{aspect-ratio:16/9;background:#f7f1e8;overflow:hidden}
.tg-foto img{width:100%;height:100%;display:block;object-fit:cover}
.tg-bijschrift{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:54px 22px 18px;
    background:linear-gradient(transparent,rgba(0,0,0,.68));
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.tg-bijschrift h2{margin:0;font-size:clamp(25px,4vw,38px);line-height:1.12;font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:0}
.tg-bijschrift p{margin:5px 0 0;font-weight:700;font-size:14px;letter-spacing:.01em;opacity:.94}

/* Alleen deze twee pijlen bedienen de twaalf maanden. */
.tg-pijl{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    width:46px;
    height:46px;
    padding:0;
    border-radius:50%;
    border:2px solid #fff;
    background:var(--tg-blue);
    color:#fff;
    font-size:30px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.tg-pijl.prev{left:-10px}
.tg-pijl.next{right:-10px}
.tg-pijl:hover{background:#123b6d}
.tg-pijl:focus-visible,.tg-maandpagina:focus-visible{outline:3px solid rgba(6,71,132,.35);outline-offset:3px}

.tg-terug{display:inline-block;margin:0 0 16px;color:#173b65;text-decoration:none;font-weight:800}
.tg-maandkop{text-align:center;margin:0 0 22px}
.tg-maandkop h1{margin:0;color:#173b65;font-family:Georgia,"Times New Roman",serif}
.tg-maandkop p{margin:4px 0 0;color:var(--tg-muted);font-weight:700}
.tg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tg-kaart{background:var(--tg-card);border:1px solid #d9cbb8;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(78,58,33,.08)}
.tg-kaart a{display:block;height:100%;text-decoration:none}
.tg-kaart img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tg-kaart-tekst{padding:15px}
.tg-kaart time{color:var(--tg-muted);font-size:14px}
.tg-kaart h2{margin:7px 0 0;color:#173b65;font-size:21px;line-height:1.25}
.tg-leeg{background:var(--tg-card);border:1px solid #d9cbb8;border-radius:16px;padding:24px;text-align:center;color:var(--tg-muted)}
.tg-artikel{background:var(--tg-card);border:1px solid #d9cbb8;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(78,58,33,.09)}
.tg-artikel>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.tg-artikel-inhoud{padding:26px 28px 38px}
.tg-artikel time{color:var(--tg-muted)}
.tg-artikel h1{margin:8px 0 18px;color:#173b65;font-family:Georgia,"Times New Roman",serif;line-height:1.12}
.tg-tekst{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.78}

@media(max-width:700px){
    .tg-wrap{padding:12px 9px 36px}
    .tg-kop p{font-size:14px}
    .tg-maandblok{padding:8px;border-radius:13px}
    .tg-maandpagina{border-radius:9px}
    .tg-pijl{width:40px;height:40px;font-size:25px}
    .tg-pijl.prev{left:-5px}
    .tg-pijl.next{right:-5px}
    .tg-bijschrift{padding:42px 16px 13px}
    .tg-grid{grid-template-columns:1fr}
    .tg-artikel-inhoud{padding:22px 18px 30px}
}

/* =========================================================
   Trogkieken testfase v4 - compacte koppen onder de maand
========================================================= */
.tg-maandpagina{cursor:default}
.tg-koppenblok{
    margin-top:20px;
    padding:20px;
    background:var(--tg-card);
    border:1px solid #d9cbb8;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(78,58,33,.08);
}
.tg-koppenblok>h2{
    margin:0 0 14px;
    color:#173b65;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(22px,3vw,28px);
    line-height:1.2;
    font-weight:700;
    line-height:1.35;
}
.tg-koppenlijst{display:grid;gap:0}
.tg-koppenregel{
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    gap:16px;
    align-items:center;
    min-height:92px;
    padding:12px 0;
    border-top:1px solid #e7ddcf;
    text-decoration:none;
}
.tg-koppenregel:first-child{border-top:0;padding-top:0}
.tg-koppenregel:last-child{padding-bottom:0}
.tg-koppenregel img{
    width:132px;
    height:82px;
    object-fit:cover;
    display:block;
    border-radius:10px;
    border:1px solid #e5dacb;
    background:#f7f1e8;
}
.tg-koppentekst{display:block;min-width:0}
.tg-koppentekst strong{
    display:block;
    color:#173b65;
    font-family:Arial,Helvetica,sans-serif;
    font-size:20px;
    line-height:1.3;
    font-weight:900;
}
.tg-koppentekst small{
    display:block;
    margin-top:6px;
    color:var(--tg-muted);
    font-size:14px;
    font-weight:700;
}
.tg-koppenregel:hover strong{text-decoration:none}
.tg-koppenregel:focus-visible{outline:3px solid rgba(6,71,132,.30);outline-offset:4px;border-radius:10px}

@media(max-width:620px){
    .tg-koppenblok{padding:16px 14px}
    .tg-koppenregel{grid-template-columns:96px minmax(0,1fr);gap:12px;min-height:76px}
    .tg-koppenregel img{width:96px;height:66px;border-radius:8px}
    .tg-koppentekst strong{font-size:17px}
    .tg-koppentekst small{font-size:12px;margin-top:4px}
}


/* Typografische hiërarchie zoals op de website: krant voor hoofdkoppen, modern voor berichten. */
.tg-kop h1,
.tg-koppenblok>h2{font-family:Georgia,"Times New Roman",serif;color:#173b65}
.tg-kop p{font-family:Arial,Helvetica,sans-serif;color:#667085;font-size:15px;font-weight:400}
.tg-jaar label{font-family:Arial,Helvetica,sans-serif;color:#334155;font-weight:800}
.tg-koppentekst strong{color:#123b6d}
.tg-koppentekst small{color:#667085;font-family:Arial,Helvetica,sans-serif;font-weight:700}
.tg-leeg{font-family:Arial,Helvetica,sans-serif;color:#667085;font-size:15px}


/* v4.2 - alles in één rustige vorm: foto zonder tekst en geen technische leegmeldingen. */
.tg-kop{margin-bottom:14px}
.tg-kop p,.tg-bijschrift,.tg-koppenblok>h2,.tg-leeg{display:none!important}
.tg-maandblok{padding:10px}
.tg-maandpagina{border:0}
.tg-foto{background:#eee7dc}
.tg-koppenblok{margin-top:18px;padding:18px}
.tg-koppenblok.is-leeg{display:none}
@media(max-width:700px){
    .tg-kop{margin-bottom:10px}
    .tg-koppenblok{padding:14px 12px}
}


/* v4.3 - klein fotobijschrift volgens de OnlineHoogeveen-CSS. */
.tg-foto{position:relative}
.tg-foto-info{
    position:absolute;
    left:18px;
    bottom:14px;
    z-index:2;
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1.35;
    font-weight:400;
    color:#fff;
    text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.45);
    pointer-events:none;
}
@media(max-width:700px){
    .tg-foto-info{left:13px;bottom:11px;font-size:13px}
}

/* Geopend artikel blijft onder de gekozen maand, binnen dezelfde gecentreerde pagina. */
.tg-geopend-artikel{margin-top:24px}

/* v5.0 - artikelweergave vervangt het volledige maandoverzicht. */
[hidden]{display:none!important}
.tg-artikelweergave{max-width:900px;margin:0 auto}
.tg-terug{
    display:block;
    width:100%;
    margin:0 0 18px;
    padding:14px 18px;
    border:1px solid #c9d9eb;
    border-radius:28px;
    background:#eef5fc;
    color:#123b6d;
    font:800 18px/1.2 Arial,Helvetica,sans-serif;
    text-align:left;
    cursor:pointer;
}
.tg-terug:hover{text-decoration:none}
.tg-artikelweergave .tg-artikel{margin:0}
.tg-artikelmeta{color:var(--tg-muted);font:700 14px/1.4 Arial,Helvetica,sans-serif}
.tg-video{margin-top:24px}
.tg-video video{display:block;width:100%;height:auto}
.tg-galerij{display:grid;gap:18px;margin-top:24px}
.tg-galerij figure{margin:0}
.tg-galerij img{display:block;width:100%;height:auto;border-radius:10px}
.tg-galerij figcaption{margin-top:7px;color:var(--tg-muted);font-size:14px}
.tg-lees-ook{margin-top:30px}
.tg-lees-ook h2{margin:0 0 14px;color:#123b6d;font:900 24px/1.2 Arial,Helvetica,sans-serif}
.tg-lees-ook-lijst{display:grid;gap:10px}
.tg-lees-ook-regel{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    align-items:center;
    min-height:76px;
    overflow:hidden;
    border:1px solid #cfdceb;
    border-radius:16px;
    background:#f7faff;
    text-decoration:none;
}
.tg-lees-ook-regel img{display:block;width:112px;height:76px;object-fit:cover}
.tg-lees-ook-regel .tg-koppentekst{padding:8px 12px}
.tg-lees-ook-regel strong{font-size:18px;line-height:1.2}
.tg-lees-ook-regel small{margin-top:3px;font-size:13px}
.tg-lees-ook-regel:hover strong{text-decoration:none}
@media(max-width:620px){
    .tg-terug{font-size:16px;padding:13px 15px}
    .tg-lees-ook-regel{grid-template-columns:92px minmax(0,1fr);min-height:68px}
    .tg-lees-ook-regel img{width:92px;height:68px}
    .tg-lees-ook-regel strong{font-size:16px}
    .tg-lees-ook-regel small{font-size:12px}
}

.tg-laden,
.tg-fout {
    padding: 1rem;
    background: #fff;
    border-radius: 12px;
}

/* Testfase 5.4 — PHP-artikelparser */
.tg-tekst p{margin:0 0 1.35em}
.tg-tekst h2{margin:1.5em 0 .65em;font-family:Georgia,"Times New Roman",serif;line-height:1.2;color:#2f2a24}
.tg-tekst ul{margin:0 0 1.35em;padding-left:1.4em}
.tg-inlinefoto{margin:26px 0}
.tg-inlinefoto img{display:block;width:100%;height:auto;border-radius:16px}
.tg-video{margin:28px 0;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:16/9}
.tg-video video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.tg-carrousel{position:relative;margin:30px 0}
.tg-cartrack{position:relative;overflow:hidden;border:1px solid #e5d8c6;border-radius:16px;background:#fffdfa;aspect-ratio:16/9}
.tg-carslide{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;transition:opacity .35s ease;display:flex;align-items:center;justify-content:center}
.tg-carslide.is-active{opacity:1;pointer-events:auto}
.tg-carslide img{display:block;width:100%;height:100%;object-fit:contain}
.tg-carbtn{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:42px;height:42px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#2f2a24;font-size:30px;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.16)}
.tg-carbtn.tg-prev{left:12px}.tg-carbtn.tg-next{right:12px}
.tg-cardots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.tg-cardot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#c8b9a4}
.tg-cardot.is-active{background:#5f5141}
@media(max-width:700px){.tg-cartrack{aspect-ratio:4/3}.tg-carbtn{width:38px;height:38px}}