/* =================================================================
SEITEN-THEMES (per Admin-Dashboard schaltbar)
Klassen am : theme-weihnachten | theme-weihnachten-schnee
theme-schnee | theme-herbst
Dekoration ist rein optisch (pointer-events:none) und klein gehalten.
Die Zierleisten (.theme-decor) setzt js/theme.js oben in Karten ein.
================================================================= */
.theme-decor{
position:absolute; left:0; right:0; top:0;
pointer-events:none; z-index:3;
background-repeat:repeat-x; background-position:left top;
}
/* ---------- Girlande (Weihnachten) ---------- */
body.theme-weihnachten .theme-decor,
body.theme-weihnachten-schnee .theme-decor,
.theme-preview-stage.theme-weihnachten .theme-decor,
.theme-preview-stage.theme-weihnachten-schnee .theme-decor{
height:30px;
background-image:url("data:image/svg+xml;utf8,");
}
/* Girlande unter dem fixen Header */
body.theme-weihnachten .site-header::after,
body.theme-weihnachten-schnee .site-header::after,
.theme-preview-stage.theme-weihnachten .preview-header::after,
.theme-preview-stage.theme-weihnachten-schnee .preview-header::after{
content:""; position:absolute; left:0; right:0; top:100%;
height:30px; pointer-events:none; background-repeat:repeat-x;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---------- Schneehauben (Schnee) ---------- */
body.theme-schnee .theme-decor,
.theme-preview-stage.theme-schnee .theme-decor{
height:14px; top:-6px;
background-image:url("data:image/svg+xml;utf8,");
}
/* ---------- Ostern (Frühlingsranke & Ostereier) ---------- */
body.theme-ostern .theme-decor,
body.theme-ostern .site-header::after,
.theme-preview-stage.theme-ostern .theme-decor,
.theme-preview-stage.theme-ostern .preview-header::after{
height:30px;
background-image:url("data:image/svg+xml;utf8,");
}
body.theme-ostern .site-header::after{
content:""; position:absolute; left:0; right:0; top:100%;
pointer-events:none; background-repeat:repeat-x;
}
/* ---------- Herbst (Blätter-Girlande) ---------- */
body.theme-herbst .theme-decor,
body.theme-herbst .site-header::after,
.theme-preview-stage.theme-herbst .theme-decor,
.theme-preview-stage.theme-herbst .preview-header::after{
height:30px;
background-image:url("data:image/svg+xml;utf8,");
}
body.theme-herbst .site-header::after,
.theme-preview-stage.theme-herbst .preview-header::after{
content:""; position:absolute; left:0; right:0; top:100%;
pointer-events:none; background-repeat:repeat-x;
}
/* ---------- Halloween (Kürbisse & Fledermäuse) ---------- */
body.theme-halloween .theme-decor,
body.theme-halloween .site-header::after,
.theme-preview-stage.theme-halloween .theme-decor,
.theme-preview-stage.theme-halloween .preview-header::after{
height:30px;
background-image:url("data:image/svg+xml;utf8,");
}
body.theme-halloween .site-header::after{
content:""; position:absolute; left:0; right:0; top:100%;
pointer-events:none; background-repeat:repeat-x;
}
/* Header-Girlande Übergänge */
.site-header::after{
transition: opacity .35s ease, transform .35s ease;
}
/* Auf der Startseite: Bei durchsichtigem Header (oben über dem Hintergrund-Video)
Girlande am Header ausblenden; erst beim Runterscrollen (.is-solid) sanft einblenden */
body.page-home .site-header:not(.is-solid)::after,
body:has(#hero) .site-header:not(.is-solid)::after{
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
}
/* Auf kleinen Bildschirmen Header-Dekoration ausblenden */
@media (max-width:640px){
body[class*="theme-"] .site-header::after{ display:none; }
}
/* Fallender Schnee / Laub (Canvas aus theme.js) */
#themeCanvas{
position:fixed; inset:0; width:100%; height:100%;
pointer-events:none; z-index:400;
}
@media print{
#themeCanvas, .theme-decor{ display:none !important; }
body[class*="theme-"] .site-header::after{ display:none !important; }
}