/* Designs aus Backend → Design & Intro. Farben kommen als Variablen aus dem Seitenkopf (body.ss-design). */
body.ss-design{--mute:color-mix(in srgb,var(--ink) 64%,var(--bg));--line:color-mix(in srgb,var(--ink) 15%,transparent);--sh:0 14px 32px rgba(40,30,10,.10);
  background-color:var(--bg);background-size:cover;background-position:center top;background-repeat:no-repeat;background-attachment:fixed;color:var(--ink)}
@media(max-width:700px){body.ss-design{background-attachment:scroll;background-size:auto 100vh}}
body.ss-design-dunkel{--sh:0 14px 32px rgba(0,0,0,.35);color-scheme:dark}
.ss-design header{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.ss-design footer{background:color-mix(in srgb,var(--bg) 88%,transparent)}
/* Startseiten-/Jahreszeiten-Banner ohne eigenes Bild: das Design scheint durch */
body.ss-design .hero:not(.mit-medium){background:transparent!important;color:var(--ink)}
body.ss-design .hero:not(.mit-medium) .blob{display:none}
body.ss-design .hero:not(.mit-medium) .btn{background:var(--acc);color:var(--on-acc)}
body.ss-design .hero:not(.mit-medium) .saison-marke{background:color-mix(in srgb,var(--surf) 75%,transparent);color:var(--ink)}
.ss-design .hero:not(.mit-medium) h1{text-shadow:0 1px 0 color-mix(in srgb,var(--bg) 60%,transparent)}
/* Text auf Akzentfarbe (wichtig beim dunklen Design mit hellem Akzent) */
.ss-design .btn,.ss-design nav a:hover,.ss-design .pager a.on,.ss-design .unterkat a.on,.ss-design .unterkat a:hover,.ss-design .konto-nav a.on,.ss-design .konto-nav a:hover{color:var(--on-acc)}
.ss-design .fortschritt li.erledigt::before{color:var(--on-acc)}
/* Inhaltsflächen leicht deckend, damit lange Texte gut lesbar bleiben */
.ss-design .text,.ss-design .beschreibung-wrap,.ss-design .blog-beitrag,.ss-design .konto-wrap,.ss-design .faq,.ss-design .saison-intro{position:relative}
.ss-design .wrap.text,.ss-design .blog-beitrag,.ss-design .konto-schmal{background:color-mix(in srgb,var(--surf) 90%,transparent);border-radius:20px;margin-top:28px;margin-bottom:28px}
.ss-design .kasse-login,.ss-design .faq-eintrag,.ss-design .bestell-box{background:var(--surf)}
/* Dunkles Design: Hinweise und Warnfarben anpassen */
.ss-design-dunkel .beschr h4.warn{color:#f0a58e}
.ss-design-dunkel #gravurZaehler.zu-viel{color:#ff9b8a}
.ss-design-dunkel .hinweis,.ss-design-dunkel .md-hinweis,.ss-design-dunkel .gut-zu-wissen{background:color-mix(in srgb,var(--acc) 16%,var(--surf))}
.ss-design-dunkel .ph{background:#3a4136}
.ss-design-dunkel input,.ss-design-dunkel select,.ss-design-dunkel textarea{background:#20271f}