:root{--tp-green:#2f6b45;--tp-green-dark:#214e34;--tp-mint:#e8f3ec;--tp-earth:#705334;--tp-ink:#20332a;--tp-muted:#52655a;--tp-line:#cddbd0;--tp-focus:#f5b942}
body{background:#f8faf7;color:var(--tp-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:#245538;text-decoration-thickness:.08em;text-underline-offset:.15em}a:hover{color:var(--tp-green-dark)}
.container-header{background:var(--tp-green);background-image:none;box-shadow:inset 0 -3px 0 rgba(245,185,66,.8)}
.container-header .navbar-brand,.container-header .navbar-brand a,.container-header .mod-menu>li>a,.container-header .mod-menu>li>button{color:#fff}.container-header .navbar-brand{font-weight:750;letter-spacing:.015em}
.container-header .mod-menu>li>a:hover,.container-header .mod-menu>li>a:focus-visible,.container-header .mod-menu>li.active>a{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.container-header .mod-menu>li>a:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid var(--tp-focus);outline-offset:3px}.container-nav{padding-block:.35rem}
.container-component{max-width:72rem;margin-inline:auto}.com-content .page-header{border-bottom:1px solid var(--tp-line);margin-bottom:1.75rem;padding-bottom:.85rem}
.com-content .page-header h1,.com-content h2,.com-content h3{color:var(--tp-green-dark);font-weight:720;letter-spacing:-.015em}.com-content h1{font-size:clamp(2rem,4vw,3.3rem)}.com-content h2{margin-top:2.25rem}
.com-content .item-page,.com-content .blog-item{background:#fff;border:1px solid var(--tp-line);border-radius:.75rem;box-shadow:0 1px 2px rgba(32,51,42,.06);padding:clamp(1.25rem,3vw,2.5rem)}
.btn-primary,.btn-success{background:var(--tp-green);border-color:var(--tp-green-dark);border-radius:.45rem;font-weight:650}.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus{background:var(--tp-green-dark);border-color:#173b28}
.btn-secondary{background:var(--tp-mint);border-color:#91b69b;color:var(--tp-green-dark)}.card,.moduletable,.sidebar-right .moduletable,.sidebar-left .moduletable{border:1px solid var(--tp-line);border-radius:.65rem;box-shadow:none}
footer,.container-footer{background:#183e2b;color:#e8f3ec;margin-top:3.5rem}.container-footer a{color:#fff}
@media(max-width:767px){.container-header .navbar-brand{font-size:1.15rem}.container-component{padding-inline:.9rem}.com-content .item-page,.com-content .blog-item{border-radius:.55rem}}
.container-header .navbar-brand{font-size:0}.container-header .navbar-brand::after{content:"Tuinpaspoort";font-size:clamp(1.35rem,2.8vw,2rem);font-weight:760;letter-spacing:.015em;color:#fff}








body.view-featured .site-grid::before{content:"";display:block;grid-column:1 / -1;min-height:clamp(15rem,30vw,28rem);margin:1.1rem auto .5rem;width:min(100% - 1.8rem,86rem);border-radius:.8rem;background:linear-gradient(90deg,rgba(17,49,34,.66) 0%,rgba(17,49,34,.28) 44%,rgba(17,49,34,.04) 70%),url("../images/tuinpaspoort-hero.png") center/cover no-repeat;box-shadow:0 2px 8px rgba(32,51,42,.16)}




/* De startpaginabanner vervangt de standaardkop. */
body.view-featured .container-header{display:none}
body.view-featured .site-grid{padding-top:0}
body.view-featured .site-grid::before{content:"Tuinpaspoort\AJe tuin overzichtelijk vastgelegd.";white-space:pre-line;display:flex;align-items:flex-end;grid-column:1 / -1;height:clamp(13rem,18vw,19rem);margin:0 0 1.75rem;width:100vw;margin-left:calc(50% - 50vw);padding:clamp(1.5rem,4vw,4rem);box-sizing:border-box;border-radius:0;background:linear-gradient(90deg,rgba(17,49,34,.74) 0%,rgba(17,49,34,.38) 46%,rgba(17,49,34,.08) 72%),url("../images/tuinpaspoort-hero.png") center 55%/cover no-repeat;color:#fff;font-size:clamp(1.65rem,3.3vw,3rem);font-weight:760;line-height:1.18;letter-spacing:-.02em;box-shadow:inset 0 -3px 0 rgba(245,185,66,.78)}


/* Geen Joomla-merknaam of standaard startpaginakop in de publieke site. */
.container-header .brand-logo img{display:none}.container-header .brand-logo{display:inline-flex;align-items:center;text-decoration:none}.container-header .brand-logo::after{content:"Tuinpaspoort";color:#fff;font-size:clamp(1.25rem,2.4vw,1.85rem);font-weight:760;letter-spacing:.015em}
body.view-featured .page-header{display:none}

/* Publieke inhoudspagina's: de banner draagt de eerste indruk. */
body.view-article .container-header{display:none}
body.view-article .site-grid{position:relative;padding-top:0}
body.view-article .site-grid::before{content:"Tuinpaspoort\A De identiteit en geschiedenis van een tuin, zorgvuldig bewaard.";white-space:pre-line;display:flex;align-items:flex-end;grid-column:1 / -1;height:clamp(14rem,20vw,19rem);width:100vw;margin:0 0 2.25rem;margin-left:calc(50% - 50vw);padding:clamp(1.75rem,4vw,4.75rem);box-sizing:border-box;background:linear-gradient(90deg,rgba(17,49,34,.80) 0%,rgba(17,49,34,.44) 49%,rgba(17,49,34,.10) 76%),url("../images/tuinpaspoort-hero.png") center 55%/cover no-repeat;color:#fff;font-size:clamp(1.65rem,3.2vw,3rem);font-weight:760;line-height:1.2;letter-spacing:-.025em;box-shadow:inset 0 -3px 0 rgba(245,185,66,.82)}
body.view-article .container-banner{position:absolute;z-index:2;top:1rem;right:clamp(1rem,4vw,4rem);width:auto;margin:0;padding:0}
.mod-languages{margin:0}.mod-languages ul{display:flex;gap:.45rem;align-items:center;list-style:none;margin:0;padding:0}.mod-languages li{margin:0}.mod-languages a,.mod-languages .current{display:inline-flex;align-items:center;min-height:2.2rem;padding:.25rem .7rem;border:1px solid rgba(255,255,255,.56);border-radius:999px;background:rgba(22,52,36,.45);color:#fff!important;font-size:.88rem;font-weight:650;text-decoration:none;backdrop-filter:blur(6px)}.mod-languages a:hover,.mod-languages a:focus-visible{background:#fff;color:var(--tp-green-dark)!important;outline:3px solid var(--tp-focus);outline-offset:2px}
body.view-article main{grid-column:1 / -1;width:min(100% - 2rem,58rem);margin:0 auto 4.5rem}.com-content-article{max-width:50rem;margin:auto}.com-content-article .page-header{margin:0 0 1.3rem}.com-content-article .page-header h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;letter-spacing:-.03em;color:var(--tp-green-dark);margin:0}.com-content-article .article-info{display:none}.com-content-article .lead{max-width:44rem;margin:0 0 2.4rem;font-size:clamp(1.18rem,2.2vw,1.43rem);line-height:1.6;color:#385044}.com-content-article h2{margin:2.55rem 0 .7rem;padding-top:1.45rem;border-top:1px solid var(--tp-line);font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.2;color:var(--tp-green-dark)}.com-content-article p{max-width:46rem}.com-content-article ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem;list-style:none;margin:1.25rem 0 2rem;padding:0}.com-content-article li{position:relative;padding:1rem 1rem 1rem 2.35rem;border:1px solid var(--tp-line);border-radius:.7rem;background:#fff;box-shadow:0 5px 16px rgba(31,72,49,.06)}.com-content-article li::before{content:"";position:absolute;left:1rem;top:1.25rem;width:.65rem;height:.65rem;border-radius:50%;background:var(--tp-focus);box-shadow:0 0 0 .22rem var(--tp-mint)}.com-content-article .btn{margin-top:.4rem}
@media (max-width:42rem){body.view-article .site-grid::before{height:15rem;padding:1.5rem;font-size:1.8rem;background-position:57% center}body.view-article .container-banner{top:.75rem;right:.85rem}.mod-languages a,.mod-languages .current{min-height:2rem;padding:.18rem .55rem;font-size:.79rem}.com-content-article ul{grid-template-columns:1fr}body.view-article main{width:min(100% - 1.5rem,58rem)}}
/* Vaste taalkeuze, onafhankelijk van de Joomla-menucontext. */
.tp-language-switcher{display:flex;gap:.45rem;align-items:center}.tp-language-switcher a{display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;min-height:2.2rem;padding:.25rem .6rem;border:1px solid rgba(255,255,255,.56);border-radius:999px;background:rgba(22,52,36,.45);color:#fff!important;font-size:.88rem;font-weight:750;letter-spacing:.04em;text-decoration:none;backdrop-filter:blur(6px)}.tp-language-switcher a:hover,.tp-language-switcher a:focus-visible{background:#fff;color:var(--tp-green-dark)!important;outline:3px solid var(--tp-focus);outline-offset:2px}

/* Glossy navigatie: compact, helder en onderdeel van de hero. */
body.view-article .container-banner{top:0;left:0;right:0;height:clamp(14rem,20vw,19rem);width:auto;margin:0;padding:clamp(.85rem,2.2vw,1.5rem) clamp(1rem,4vw,4rem);display:flex;align-items:flex-start;justify-content:flex-start;pointer-events:none}
.tp-site-nav{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;padding:.38rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(16,45,31,.54);box-shadow:0 .5rem 1.8rem rgba(5,22,13,.22);backdrop-filter:blur(10px);pointer-events:auto}.tp-site-nav a{display:inline-flex;align-items:center;min-height:2.2rem;padding:.25rem .72rem;border-radius:999px;color:#fff!important;font-size:.9rem;font-weight:680;text-decoration:none}.tp-site-nav a:hover,.tp-site-nav a:focus-visible{background:#fff;color:var(--tp-green-dark)!important;outline:3px solid var(--tp-focus);outline-offset:2px}.tp-site-nav .tp-nav-borderwijs{background:rgba(245,185,66,.94);color:#183e2b!important}.tp-site-nav .tp-nav-borderwijs:hover,.tp-site-nav .tp-nav-borderwijs:focus-visible{background:#fff;color:var(--tp-green-dark)!important}
.tp-language-switcher{position:absolute;right:clamp(1rem,4vw,4rem);bottom:clamp(1rem,2vw,1.5rem);pointer-events:auto}.tp-language-switcher a{box-shadow:0 .45rem 1.2rem rgba(5,22,13,.2)}
.tp-highlight{margin:1.8rem 0 2.2rem;padding:1.25rem 1.35rem;border-left:.32rem solid var(--tp-focus);border-radius:.2rem .75rem .75rem .2rem;background:linear-gradient(135deg,#eff7f1,#fff)}.tp-highlight p{margin:0;color:#274737}
@media(max-width:42rem){body.view-article .container-banner{height:15rem;padding:.75rem}.tp-site-nav{gap:.15rem;border-radius:.7rem}.tp-site-nav a{min-height:1.95rem;padding:.2rem .45rem;font-size:.76rem}.tp-language-switcher{right:.85rem;bottom:.75rem}}

html[lang^="en"] body.view-article .site-grid::before{content:"Garden passport\A The identity and history of a garden, carefully preserved."}

/* Joomla module-omhulling mag de taalkeuze niet uit de hero trekken. */
body.view-article .container-banner .mod-custom{position:static}