/*! Online-Werkbank · © 2026 Patrick Walters · Nutzung nur mit gültiger Lizenz (siehe LIZENZ.txt) */
/* Website – Grundgestaltung. Farben, Schriften, Rundungen und Breite kommen als Variablen aus dem Design-Editor. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.ws { margin: 0; font-family: var(--schrift); color: var(--text); background: var(--hg); line-height: 1.65; font-size: 17px; }
.ws a { color: var(--akzent); }
.ws img { max-width: 100%; height: auto; }
.ws-innen { width: min(100% - 2rem, var(--breite)); margin: 0 auto; }
h1, h2, h3 { font-family: var(--titelschrift); line-height: 1.2; color: var(--titel, var(--primaer)); margin: 1.4em 0 .5em; }
h1 { font-size: calc(clamp(1.8rem, 4.5vw, 3rem) * var(--hs, 1)); } h2 { font-size: calc(clamp(1.4rem, 3vw, 2rem) * var(--hs, 1)); } h3 { font-size: calc(1.2rem * var(--hs, 1)); }
.ws-testbalken { background: #ffd34d; color: #3a2a00; text-align: center; font-size: .9rem; padding: .35rem 1rem; font-weight: 600; }
.ws-testbalken a { color: inherit; }

/* Kopf & Menü */
.ws-kopf { background: var(--kopf); color: var(--kopftext); position: sticky; top: 0; z-index: 50; box-shadow: var(--schatten); }
.ws-kopf .ws-innen { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.kopf-mitte .ws-kopf .ws-innen { flex-direction: column; justify-content: center; padding: .8rem 0 .4rem; gap: .3rem; }
.ws-marke { display: flex; align-items: center; gap: .7rem; color: var(--kopftext) !important; text-decoration: none; font-family: var(--titelschrift); font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; margin-right: auto; }
.kopf-mitte .ws-marke { margin: 0; }
.ws-marke img { height: 48px; width: auto; }
.ws-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; flex-wrap: wrap; }
.ws-nav li { position: relative; }
.ws-nav a { display: block; padding: .55rem .85rem; color: var(--kopftext); text-decoration: none; font-weight: 600; font-size: .98rem; border-radius: var(--radius); opacity: .9; }
.ws-nav a:hover, .ws-nav li.aktiv > a { opacity: 1; }
.menue-leiste .ws-nav li.aktiv > a { box-shadow: inset 0 -3px 0 var(--akzent); border-radius: 0; }
.menue-pillen .ws-nav li.aktiv > a, .menue-pillen .ws-nav a:hover { background: var(--akzent); color: #fff; }
.ws-nav li ul { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--kopf); flex-direction: column; padding: .4rem; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ws-nav li.hat-unter:hover > ul, .ws-nav li.hat-unter:focus-within > ul { display: flex; }
.ws-menue-knopf { display: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.ws-menue-knopf span { display: block; height: 3px; background: var(--kopftext); border-radius: 2px; margin: 5px 0; transition: transform .2s, opacity .2s; }
@media (max-width: 880px) {
  .ws-kopf .ws-innen { flex-direction: row !important; flex-wrap: wrap; padding: .4rem 0 !important; }
  .kopf-mitte .ws-marke { margin-right: auto; }
  .ws-menue-knopf { display: block; }
  .ws-nav { display: none; width: 100%; padding-bottom: .6rem; }
  .ws-nav.offen { display: block; }
  .ws-nav ul { flex-direction: column; }
  .ws-nav li ul { display: flex; position: static; box-shadow: none; padding: 0 0 0 1rem; background: transparent; }
  .menue-leiste .ws-nav li.aktiv > a { box-shadow: inset 3px 0 0 var(--akzent); }
  .ws-menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .ws-menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ws-menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Inhalt & Bausteine */
.ws-inhalt { padding: 0 0 3rem; min-height: 50vh; }
.ws-block { margin: 2rem 0; }
.ws-text { background: var(--flaeche); padding: clamp(1.1rem, 3vw, 2.2rem); border-radius: var(--radius); box-shadow: var(--schatten); }
.ws-text > :first-child { margin-top: 0; } .ws-text > :last-child { margin-bottom: 0; }
.ws-text blockquote { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid var(--akzent); background: rgba(0,0,0,.03); border-radius: 0 var(--radius) var(--radius) 0; }
.ws-abschnitt { margin-top: 0; }
.ws-hero { position: relative; min-height: var(--hero-h); margin: 0 calc(50% - 50vw) 2rem; display: flex; align-items: center; overflow: hidden; background: var(--primaer); color: var(--primaer-text, #fff); }
.ws-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.ws-slide.an { opacity: 1; }
.ws-hero.mit-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.2) 70%, rgba(0,0,0,.05)); }
.ws-hero-inhalt { position: relative; z-index: 2; width: min(100% - 2rem, var(--breite)); margin: 0 auto; padding: 3rem 0; }
.ws-hero.mit-bild { color: #fff; }
.ws-hero:not(.mit-bild) h1, .ws-hero:not(.mit-bild) p { color: var(--primaer-text, #fff); text-shadow: none; }
.ws-hero h1 { color: #fff; margin: 0 0 .6rem; max-width: 18ch; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.ws-hero p { font-size: clamp(1.02rem, 2vw, 1.25rem); max-width: 46ch; margin: 0 0 1.4rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.ws-punkte { position: absolute; bottom: 1rem; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: .45rem; }
.ws-punkte span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.ws-punkte span.an { background: #fff; }
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .78rem 1.35rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1rem; font-family: inherit; transition: transform .15s, filter .15s; }
.ws-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ws-btn-akzent { background: var(--akzent); color: #fff !important; }
.ws-btn-zweit { background: transparent; color: var(--titel, var(--primaer)) !important; border-color: var(--titel, var(--primaer)); }
.ws-wa { background: #25d366; color: #fff !important; }
.ws-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.ws-buttons.ws-mitte { justify-content: center; } .ws-buttons.ws-rechts { justify-content: flex-end; }
.ws-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; }
.ws-karte { display: flex; flex-direction: column; background: var(--flaeche); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); text-decoration: none; color: var(--text) !important; border: 1px solid rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; }
a.ws-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.ws-karte-bild { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: rgba(0,0,0,.05); }
.ws-karte-text { padding: 1rem 1.1rem 1.2rem; }
.ws-karte h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.ws-karte p { margin: 0 0 .4rem; font-size: .95rem; opacity: .85; }
.ws-mehr { color: var(--akzent); font-weight: 700; font-size: .92rem; }
.ws-bild { margin-left: auto; margin-right: auto; text-align: center; }
.ws-bild img { border-radius: var(--radius); box-shadow: var(--schatten); max-height: 75vh; width: auto; }
.ws-bild.ws-klein { max-width: 360px; } .ws-bild.ws-mittel { max-width: 720px; } .ws-bild.ws-gross { max-width: 100%; }
.ws-bild figcaption { font-size: .9rem; opacity: .75; margin-top: .4rem; }
.ws-hinweis { padding: 1rem 1.2rem; border-radius: var(--radius); background: #eef5ff; border-left: 5px solid #1f64c8; }
.ws-hinweis.ws-warnung { background: #fff6e6; border-left-color: #e0902c; } .ws-hinweis.ws-ok { background: #ecf8ef; border-left-color: #2e9a4b; }
.ws-hinweis > :first-child { margin-top: 0; } .ws-hinweis > :last-child { margin-bottom: 0; }
.ws-trenner { border: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--akzent), transparent); margin: 2.5rem 0; opacity: .5; }
.ws-werkzeug { margin: 1rem 0; }
.ws-kontakt p { font-weight: 600; }

/* Formular */
.ws-formular { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; background: var(--flaeche); padding: clamp(1.1rem, 3vw, 2rem); border-radius: var(--radius); box-shadow: var(--schatten); }
.ws-formular label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; }
.ws-formular .ws-breit { grid-column: 1 / -1; }
.ws-formular input, .ws-formular textarea { font: inherit; padding: .7rem .8rem; border: 1px solid rgba(0,0,0,.18); border-radius: calc(var(--radius) * .6); background: #fff; color: #1d2733; }
.ws-formular input:focus, .ws-formular textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.ws-formular .ws-check { flex-direction: row; align-items: flex-start; font-weight: 400; font-size: .9rem; }
.ws-formular .ws-check > input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; }
.ws-formular .ws-check > span { flex: 1; text-align: left; line-height: 1.45; }
.ws-formular .ws-check input { margin-top: .25rem; }
.ws-formular button { grid-column: 1 / -1; justify-self: start; }
.ws-feld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ws-fehler { grid-column: 1 / -1; background: #fdecec; color: #8a1f1f; padding: .6rem .8rem; border-radius: 8px; margin: 0; }
@media (max-width: 640px) { .ws-formular { grid-template-columns: 1fr; } body.ws { font-size: 16px; } }

/* Fuß */
.ws-fuss { background: var(--fuss); color: var(--fusstext); padding: 2.4rem 0 1.2rem; font-size: .95rem; }
.ws-fuss a { color: var(--fusstext); }
.ws-fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.ws-fuss ul { list-style: none; margin: 0; padding: 0; }
.ws-fuss li { margin: .2rem 0; }
.ws-copy { margin: 2rem 0 0; opacity: .7; font-size: .85rem; text-align: center; }

/* Bild-Lupe */
.ws-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(10,14,20,.88); display: flex; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.ws-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
@media print { .ws-kopf, .ws-fuss, .ws-testbalken { display: none; } }

/* Bild + Text nebeneinander */
.ws-bildtext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.2rem); align-items: center; }
.ws-bildtext.ws-bild-rechts .ws-bt-bild { order: 2; }
.ws-bildtext.ws-bild-links .ws-bt-bild { order: -1; }
.ws-bt-bild { display: block; }
.ws-bt-bild img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
@media (max-width: 760px) { .ws-bildtext { grid-template-columns: 1fr; } .ws-bildtext.ws-bild-rechts .ws-bt-bild, .ws-bildtext.ws-bild-links .ws-bt-bild { order: -1; } .ws-bt-bild img { max-height: 380px; } }

/* Platz unter der Fußzeile, damit Chatbot und Widerruf-Button keine Links verdecken */
.ws-fuss { padding-bottom: 7rem; }
@media (max-width: 767.98px) { .ws-fuss { padding-bottom: 8.5rem; } }

/* ================= Button-Designer ================= */

/* Raster: feste Spaltenzahl am PC und auf dem Handy */
section.ws-buttons.ws-raster { display: grid; grid-template-columns: repeat(var(--b-sph, 1), minmax(0, 1fr)); gap: clamp(.7rem, 2vw, 1.4rem); align-items: stretch; }
@media (min-width: 768px) { section.ws-buttons.ws-raster { grid-template-columns: repeat(var(--b-sp, 2), minmax(0, 1fr)); } }
section.ws-buttons.ws-raster .ws-btn { width: 100%; margin: 0; }
section.ws-buttons.ws-breit:not(.ws-raster) { flex-direction: column; align-items: stretch; }
.ws-buttons .ws-btn-t { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ws-btn-u { display: block; font-size: .78em; font-weight: 500; opacity: .85; text-transform: none; letter-spacing: 0; margin-top: .2em; }
section.ws-buttons.ws-gross .ws-btn-t { text-transform: uppercase; letter-spacing: .06em; }
section.ws-buttons:not(.ws-bstil-auto):not(.ws-bstil-metall) .ws-btn { font-size: var(--b-gr, 1rem); }
section.ws-buttons.ws-bschatten .ws-btn { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
section.ws-buttons.ws-eff-keiner .ws-btn:hover { transform: none; filter: none; }
section.ws-buttons.ws-eff-zoom .ws-btn:hover { transform: scale(1.03); }
section.ws-buttons.ws-eff-leuchten .ws-btn:hover { transform: none; box-shadow: 0 0 0 3px var(--b-farbe, var(--akzent)), 0 0 22px var(--b-farbe, var(--akzent)); }

/* Gefüllt / Pille / 3D – zweiter Button-Typ („Umrandet“) jeweils als Variante */
section.ws-buttons:is(.ws-bstil-gefuellt, .ws-bstil-pille, .ws-bstil-dreid) .ws-btn {
  background: var(--b-farbe, var(--akzent)); color: var(--b-text, #fff) !important; border: var(--b-rahmen, 0px) solid rgba(0,0,0,.18);
  border-radius: var(--b-radius, var(--radius)); min-height: var(--b-hoehe, auto); padding: .8rem 1.5rem; }
section.ws-buttons:is(.ws-bstil-gefuellt, .ws-bstil-pille, .ws-bstil-dreid) .ws-btn-zweit { background: transparent; color: var(--b-farbe, var(--akzent)) !important; border: max(2px, var(--b-rahmen, 2px)) solid var(--b-farbe, var(--akzent)); }
section.ws-buttons.ws-bstil-pille .ws-btn { border-radius: 999px; padding-left: 1.9rem; padding-right: 1.9rem; }
section.ws-buttons.ws-bstil-dreid .ws-btn { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 10px 18px rgba(0,0,0,.18); background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); margin-bottom: 6px; }
section.ws-buttons.ws-bstil-dreid .ws-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 14px 22px rgba(0,0,0,.2); }
section.ws-buttons.ws-bstil-dreid .ws-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* Umrandet */
section.ws-buttons.ws-bstil-umrandet .ws-btn { background: transparent; color: var(--b-text, var(--b-farbe, var(--akzent))) !important; border: var(--b-rahmen, 2px) solid var(--b-farbe, var(--akzent));
  border-radius: var(--b-radius, var(--radius)); min-height: var(--b-hoehe, auto); padding: .8rem 1.5rem; }
section.ws-buttons.ws-bstil-umrandet .ws-btn:hover { background: var(--b-farbe, var(--akzent)); color: #fff !important; }

/* Glas */
section.ws-buttons.ws-bstil-glas .ws-btn { background: rgba(255,255,255,.14); color: var(--b-text, var(--text)) !important; border: var(--b-rahmen, 1px) solid rgba(255,255,255,.45);
  border-radius: var(--b-radius, 16px); min-height: var(--b-hoehe, auto); padding: .85rem 1.6rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.12); }
section.ws-buttons.ws-bstil-glas .ws-btn-zweit { background: rgba(0,0,0,.12); }

/* Neon */
section.ws-buttons.ws-bstil-neon .ws-btn { background: rgba(0,0,0,.35); color: var(--b-text, var(--b-farbe, #39e6ff)) !important; border: var(--b-rahmen, 2px) solid var(--b-farbe, #39e6ff);
  border-radius: var(--b-radius, 10px); min-height: var(--b-hoehe, auto); padding: .8rem 1.6rem;
  box-shadow: 0 0 8px var(--b-farbe, #39e6ff), inset 0 0 8px var(--b-farbe, #39e6ff); text-shadow: 0 0 8px var(--b-farbe, #39e6ff); }
section.ws-buttons.ws-bstil-neon .ws-btn:hover { box-shadow: 0 0 16px var(--b-farbe, #39e6ff), 0 0 32px var(--b-farbe, #39e6ff), inset 0 0 12px var(--b-farbe, #39e6ff); filter: none; }

/* Nur Text mit Pfeil */
section.ws-buttons.ws-bstil-textlink .ws-btn { background: none; border: 0; padding: .3rem 0; color: var(--b-text, var(--b-farbe, var(--akzent))) !important; border-radius: 0; font-weight: 700; }
section.ws-buttons.ws-bstil-textlink .ws-btn-t::after { content: "→"; display: inline; margin-left: .35em; transition: margin .15s; }
section.ws-buttons.ws-bstil-textlink .ws-btn:hover .ws-btn-t::after { margin-left: .6em; }
section.ws-buttons.ws-bstil-textlink .ws-btn-t { flex-direction: row; display: inline-flex; }
section.ws-buttons.ws-bstil-textlink .ws-btn-u { display: none; }
section.ws-buttons.ws-bstil-textlink .ws-btn:hover { transform: none; text-decoration: underline; }

/* Bildkachel: Foto als Hintergrund, dicker farbiger Rahmen, abgedunkelt, großer weißer Text in der Mitte */
section.ws-buttons.ws-bstil-bildkachel .ws-btn {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  min-height: var(--b-hoehe, 220px); padding: 1rem; border: var(--b-rahmen, 6px) solid var(--b-farbe, var(--akzent)); border-radius: var(--b-radius, 24px);
  background: var(--b-farbe, var(--akzent)); color: var(--b-text, #fff) !important; font-weight: 800; font-size: var(--b-gr, clamp(1.15rem, 2.4vw, 1.9rem)); line-height: 1.15;
  text-decoration: none !important; transform: none; }
section.ws-buttons.ws-bstil-bildkachel .ws-btn.mit-bild::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--b-bild) center / cover no-repeat; transition: transform .45s ease; }
section.ws-buttons.ws-bstil-bildkachel .ws-btn.mit-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.34); transition: background .25s; }
section.ws-buttons.ws-bstil-bildkachel .ws-btn { container-type: inline-size; }
section.ws-buttons.ws-bstil-bildkachel .ws-btn-t { text-shadow: 0 2px 10px rgba(0,0,0,.45); max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@supports (font-size: 1cqi) { section.ws-buttons.ws-bstil-bildkachel .ws-btn-t { font-size: min(var(--b-gr, 1.9rem), 14cqi); } section.ws-buttons.ws-bstil-bildkachel.ws-gross .ws-btn-t { font-size: min(var(--b-gr, 1.9rem), 12cqi); } }
section.ws-buttons.ws-bstil-bildkachel .ws-btn-zweit { background: transparent; }
section.ws-buttons.ws-bstil-bildkachel .ws-btn:hover { filter: none; }
section.ws-buttons.ws-bstil-bildkachel:not(.ws-eff-keiner) .ws-btn.mit-bild:hover::before { transform: scale(1.06); }
section.ws-buttons.ws-bstil-bildkachel:not(.ws-eff-keiner) .ws-btn.mit-bild:hover::after { background: rgba(0,0,0,.2); }
section.ws-buttons.ws-bstil-bildkachel:not(.ws-raster) .ws-btn { flex: 1 1 220px; }
@media (max-width: 767.98px) { section.ws-buttons.ws-bstil-bildkachel .ws-btn { min-height: calc(var(--b-hoehe, 220px) * .72); border-width: max(3px, calc(var(--b-rahmen, 6px) * .75)); } }
.kl section.ws-buttons.ws-bstil-bildkachel .ws-btn { margin: 0; }

/* Metall (gebürsteter Rahmen mit Schrauben, dunkle Platte, Innenrahmen) – im klassischen Aufbau automatisch */
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto):not(.ws-raster) { display: flex; flex-direction: column; gap: 17px; align-items: stretch; }
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn {
  --metall: linear-gradient(var(--r), #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%);
  position: relative; display: block; margin: 0; padding: 20px; border: 0; border-radius: 0; background: #0b101e; text-decoration: none !important; transform: none; filter: none;
}
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn::before {   /* Metallrahmen (4 Seiten) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) top / 100% 7.3px no-repeat,
    linear-gradient(0deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) bottom / 100% 7.3px no-repeat,
    linear-gradient(90deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) left / 7.3px 100% no-repeat,
    linear-gradient(270deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) right / 7.3px 100% no-repeat;
}
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn::after {    /* abgeschrägte Metall-Ecken + vier Schrauben */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 6.8px 7.6px, #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at calc(100% - 6.8px) 7.6px, #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at 6.8px calc(100% - 7.6px), #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at calc(100% - 6.8px) calc(100% - 7.6px), #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    linear-gradient(135deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(225deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(315deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(45deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px);
}
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn-t {         /* blauer Innenrahmen mit abgeschrägten Ecken */
  --e: 15px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: var(--b-hoehe, 67px); padding: 10px 1.2rem;
  background: var(--b-farbe, #59b3f0); color: var(--b-text, var(--text)); font-size: var(--b-gr, 14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.35;
  clip-path: polygon(var(--e) 0, calc(100% - var(--e)) 0, 100% var(--e), 100% calc(100% - var(--e)), calc(100% - var(--e)) 100%, var(--e) 100%, 0 calc(100% - var(--e)), 0 var(--e));
  isolation: isolate;
}
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn-t::before {
  --e: 13.8px; content: ""; position: absolute; inset: 3px; z-index: -1; background: #0b101e;
  clip-path: polygon(var(--e) 0, calc(100% - var(--e)) 0, 100% var(--e), 100% calc(100% - var(--e)), calc(100% - var(--e)) 100%, var(--e) 100%, 0 calc(100% - var(--e)), 0 var(--e));
}
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn:hover .ws-btn-t { filter: brightness(1.3); color: #fff; }
section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }
@media (min-width: 992px) { section.ws-buttons:is(.ws-bstil-metall, .kl .ws-bstil-auto) .ws-btn-t { font-size: var(--b-gr, 15px); } }
/* Buttons wie bisher fast bis zum Kastenrand (Handy, klassischer Aufbau) */
@media (max-width: 767.98px) { .kl section.ws-buttons.ws-bstil-auto, .kl section.ws-buttons.ws-bstil-metall { margin-left: calc(16px - 1.6rem); margin-right: calc(16px - 1.6rem); } }
section.ws-buttons.ws-bstil-metall:not(.ws-raster):not(.ws-breit) { align-items: stretch; }


/* Menü-Box links am PC: Kategorien als Metall-Schalter wie auf der bisherigen Seite */
.kl-links .kl-menue .kl-mbtn {
  --metall: linear-gradient(var(--r), #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%);
  position: relative; display: block; margin: 0; padding: 20px; border: 0; border-radius: 0; background: #0b101e; text-decoration: none !important; transform: none; filter: none;
}
.kl-links .kl-menue .kl-mbtn::before {   /* Metallrahmen (4 Seiten) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) top / 100% 7.3px no-repeat,
    linear-gradient(0deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) bottom / 100% 7.3px no-repeat,
    linear-gradient(90deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) left / 7.3px 100% no-repeat,
    linear-gradient(270deg, #e7e9ed 0, #c8cace 6%, #a3a4a7 22%, #bebfc3 45%, #98999c 68%, #abacaf 86%, #8d8e90 93%, #44484f 100%) right / 7.3px 100% no-repeat;
}
.kl-links .kl-menue .kl-mbtn::after {    /* abgeschrägte Metall-Ecken + vier Schrauben */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 6.8px 7.6px, #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at calc(100% - 6.8px) 7.6px, #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at 6.8px calc(100% - 7.6px), #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    radial-gradient(circle at calc(100% - 6.8px) calc(100% - 7.6px), #b8b8b8 0 1.2px, #7a7a7a 2.2px, #5a5a5a 3.6px, #3e3e3e 4.6px, rgba(30,30,30,.35) 5.2px, transparent 5.6px),
    linear-gradient(135deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(225deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(315deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px),
    linear-gradient(45deg, #a7a8ab 0 11.5px, #44484f 11.5px 12.6px, transparent 12.6px);
}
.kl-links .kl-menue .kl-mbtn .ws-btn-t {         /* blauer Innenrahmen mit abgeschrägten Ecken */
  --e: 15px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: var(--b-hoehe, 67px); padding: 10px 1.2rem;
  background: var(--b-farbe, #59b3f0); color: var(--b-text, var(--text)); font-size: var(--b-gr, 14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.35;
  clip-path: polygon(var(--e) 0, calc(100% - var(--e)) 0, 100% var(--e), 100% calc(100% - var(--e)), calc(100% - var(--e)) 100%, var(--e) 100%, 0 calc(100% - var(--e)), 0 var(--e));
  isolation: isolate;
}
.kl-links .kl-menue .kl-mbtn .ws-btn-t::before {
  --e: 13.8px; content: ""; position: absolute; inset: 3px; z-index: -1; background: #0b101e;
  clip-path: polygon(var(--e) 0, calc(100% - var(--e)) 0, 100% var(--e), 100% calc(100% - var(--e)), calc(100% - var(--e)) 100%, var(--e) 100%, 0 calc(100% - var(--e)), 0 var(--e));
}
.kl-links .kl-menue .kl-mbtn:hover .ws-btn-t { filter: brightness(1.3); color: #fff; }
.kl-links .kl-menue .kl-mbtn:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }
.kl-links .kl-box-kopf { text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.kl-links .kl-box-inhalt { padding: 1.1rem 1.2rem; }
.kl-links .kl-menue > li { padding: 0; }
.kl-links .kl-menue > li + li { margin-top: 12px; }
.kl-links .kl-menue .kl-mbtn { padding: 13px; }
.kl-links .kl-menue .kl-mbtn .ws-btn-t { --e: 19px; min-height: 60px; padding: 8px 10px; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: #fff; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.kl-links .kl-menue .kl-mbtn .ws-btn-t::before { --e: 17.2px; }
.kl-links .kl-menue li.aktiv > .kl-mbtn .ws-btn-t { background: #8fd0ff; }
.kl-links .kl-menue ul { padding: 8px 0 0 12px; }
.kl-links .kl-menue ul a { display: block; padding: .2rem .4rem; }
/* im Handy-Menü bleiben es schlichte Links */
.kl-handymenue .kl-mbtn .ws-btn-t { all: unset; }

/* Bausteine nebeneinander (halbe Breite, Drittel …) – auf dem Handy untereinander */
.ws-reihe { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: 2rem 0; align-items: flex-start; }
.ws-z { flex: 1 1 100%; min-width: 0; }
.ws-z > :first-child { margin-top: 0; } .ws-z > :last-child { margin-bottom: 0; }
.ws-z-mitte { align-self: center; }
@media (max-width: 767.98px) { .ws-z + .ws-z { margin-top: 1.4rem; } }
@media (min-width: 768px) {
  .ws-z-halb { flex-basis: calc(50% - .8rem); }
  .ws-z-drittel { flex-basis: calc(33.333% - 1.07rem); }
  .ws-z-zweidrittel { flex-basis: calc(66.666% - .54rem); }
  .ws-z-viertel { flex-basis: calc(25% - 1.2rem); }
  .ws-z-halb, .ws-z-drittel, .ws-z-zweidrittel, .ws-z-viertel { flex-grow: 0; }   /* 1.4.2: ein einzelner ½-Baustein bleibt halb breit */
  .ws-reihe { row-gap: 1.6rem; }
}

/* Ankündigungsleiste */
.ws-ansage { background: var(--a-hg); color: var(--a-text); text-align: center; font-size: .92rem; font-weight: 600; line-height: 1.35; position: relative; z-index: 60; }
.ws-ansage-innen { display: grid; place-items: center; padding: .55rem 1rem; color: inherit !important; text-decoration: none !important; min-height: 2.4rem; }
.ws-ansage-z { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; }
.ws-ansage-z.an { opacity: 1; visibility: visible; transition: opacity .45s .2s, visibility 0s; }
/* scharfe Schrift in der Ankündigungsleiste: keine Verschiebung beim Wechsel, keine Überblendung zweier Zeilen */
.ws-ansage { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: .01em; }
a.ws-ansage-innen:hover .ws-ansage-z.an { text-decoration: underline; }

/* Menü auf dem Handy als Wischleiste */
.ws-wischmenue { display: none; }
@media (max-width: 880px) {
  .handymenue-leiste .ws-wischmenue { display: block; background: var(--kopf); border-top: 1px solid color-mix(in srgb, var(--kopftext) 14%, transparent); }
  .ws-wischmenue ul { list-style: none; margin: 0; padding: .35rem .6rem; display: flex; gap: .4rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ws-wischmenue ul::-webkit-scrollbar { display: none; }
  .ws-wischmenue li { flex: 0 0 auto; scroll-snap-align: start; }
  .ws-wischmenue a { display: block; padding: .45rem .9rem; border-radius: 999px; color: var(--kopftext); text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid color-mix(in srgb, var(--kopftext) 28%, transparent); white-space: nowrap; }
  .ws-wischmenue li.aktiv a { background: var(--akzent); border-color: var(--akzent); color: #fff; }
}

/* ================= Gästebuch ================= */
.ws-gaestebuch .ws-gb-intro { margin-bottom: 1rem; }
.ws-gb-neu { margin: 0 0 1.4rem; }
.ws-gb-neu > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ws-gb-neu > summary::-webkit-details-marker { display: none; }
.ws-gb-neu[open] > summary { margin-bottom: 1rem; opacity: .75; }
.ws-gb-liste { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.ws-gb-eintrag { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--schatten); }
.ws-gb-eintrag header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; margin-bottom: .4rem; }
.ws-gb-eintrag header strong { color: var(--titel, var(--primaer)); font-size: 1.05rem; }
.ws-gb-eintrag header span { opacity: .75; }
.ws-gb-eintrag time { margin-left: auto; font-size: .85rem; opacity: .65; }
.ws-gb-eintrag p { margin: 0; overflow-wrap: anywhere; }
.ws-gb-antwort { margin-top: .8rem; padding: .7rem .9rem; border-left: 3px solid var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); border-radius: 0 var(--radius) var(--radius) 0; font-size: .95rem; }
.ws-gb-antwort p { margin: .2rem 0 0; }
.ws-gb-leer, .ws-news-leer { opacity: .75; font-style: italic; }
.ws-seitenwahl { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1.2rem; }
.ws-seitenwahl a, .ws-seitenwahl span { min-width: 2.3rem; padding: .35rem .6rem; text-align: center; border: 1px solid var(--rahmen); border-radius: var(--radius); text-decoration: none; }
.ws-seitenwahl span { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 700; }

/* ================= News ================= */
.ws-news-liste { display: grid; gap: 1.1rem; text-align: left; }
.ws-news-art-karten .ws-news-liste { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ws-news-karte { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; color: var(--text) !important; text-decoration: none !important; box-shadow: var(--schatten); transition: transform .2s, box-shadow .2s; }
.ws-news-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.ws-news-bild { display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat var(--rahmen); }
.ws-news-text { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1.1rem 1.1rem; flex: 1; }
.ws-news-text time { font-size: .82rem; opacity: .7; }
.ws-news-text strong { color: var(--titel, var(--primaer)); font-size: 1.12rem; line-height: 1.3; }
.ws-news-anriss { font-size: .95rem; opacity: .9; }
.ws-news-text .ws-mehr { margin-top: auto; padding-top: .3rem; color: var(--akzent); font-weight: 700; font-size: .92rem; }
.ws-news-liste > .ws-news-karte, .ws-news-text { min-width: 0; }
/* Darstellung „Liste“: Bild links, Text rechts (Handy: untereinander) */
@media (min-width: 640px) {
  section.ws-news.ws-news-art-liste .ws-news-karte { flex-direction: row; }
  section.ws-news.ws-news-art-liste .ws-news-bild { flex: 0 0 34%; aspect-ratio: auto; min-height: 170px; }
}
/* Darstellung „kompakt“: nur Datum und Titel */
section.ws-news.ws-news-art-kompakt .ws-news-liste { gap: .5rem; }
section.ws-news.ws-news-art-kompakt .ws-news-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .7rem 1rem; }
section.ws-news.ws-news-art-kompakt .ws-news-text time { flex: 0 0 auto; min-width: 9.5em; }
section.ws-news.ws-news-art-kompakt .ws-news-text strong { font-size: 1rem; }
.ws-news-alle { text-align: center; margin-top: 1.2rem; }
/* einzelner Beitrag */
.ws-news-beitrag { text-align: left; }
.ws-news-beitrag > time { display: block; font-size: .9rem; opacity: .7; }
.ws-news-beitrag h1 { margin: .2rem 0 1rem; }
.ws-news-titelbild { display: block; margin: 0 0 1.2rem; }
.ws-news-titelbild img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius); display: block; }
.ws-news-zurueck { margin: 0 0 .8rem; font-size: .92rem; }

/* Bildergalerie */
.ws-galerie { display: grid; grid-template-columns: repeat(var(--g-sp, 4), 1fr); gap: var(--g-ab, 8px); }
.ws-galerie > a, .ws-galerie > span { display: block; overflow: hidden; border-radius: var(--radius); background: rgba(0,0,0,.04); }
.ws-gal-raster > a, .ws-gal-raster > span { aspect-ratio: 1; }
.ws-gal-raster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.ws-gal-mauer { display: block; columns: var(--g-sp, 4); column-gap: var(--g-ab, 8px); }
.ws-gal-mauer > a, .ws-gal-mauer > span { break-inside: avoid; margin-bottom: var(--g-ab, 8px); }
.ws-gal-mauer img { width: 100%; height: auto; display: block; transition: transform .35s; }
.ws-galerie > a:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .ws-galerie { grid-template-columns: repeat(var(--g-sph, 2), 1fr); } .ws-gal-mauer { columns: var(--g-sph, 2); } }
.ws-lb-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.ws-lb-pfeil:hover { background: rgba(255,255,255,.28); }
.ws-lb-pfeil.zurueck { left: 12px; } .ws-lb-pfeil.vor { right: 12px; }
.ws-lb-zahl { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; opacity: .8; }
/* Shop */
.sh-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.sh-karte { display: flex; flex-direction: column; background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen, rgba(0,0,0,.06)); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; text-align: left; }
.sh-karte-bild { position: relative; display: block; aspect-ratio: 1; background: rgba(0,0,0,.04); overflow: hidden; }
.sh-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sh-karte-bild:hover img { transform: scale(1.04); }
.sh-ohnebild { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3rem; opacity: .35; }
.sh-ohnebild.gross { aspect-ratio: 1; font-size: 5rem; }
.sh-marke { position: absolute; left: .6rem; top: .6rem; background: var(--akzent, #2b6cb0); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; }
.sh-marke.sh-aus { background: #555; left: auto; right: .6rem; }
.sh-karte-text { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.sh-karte-text h3 { margin: 0; font-size: 1.05rem; } .sh-karte-text h3 a { color: inherit; text-decoration: none; }
.sh-karte-text p { margin: 0; font-size: .9rem; opacity: .8; }
.sh-karte-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; }
.sh-karte-fuss form { margin: 0; }
.sh-preis { font-weight: 800; font-size: 1.15rem; }
.sh-btn-klein { padding: .45rem .8rem !important; font-size: .9rem !important; min-height: 0 !important; }
.sh-steuerzeile, .sh-klein { font-size: .82rem; opacity: .75; }
.sh-produkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: start; }
.sh-bilder { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.sh-bilder .sh-haupt { grid-column: 1 / -1; } .sh-bilder a { aspect-ratio: auto !important; } .sh-bilder img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.sh-bilder .sh-mini img { aspect-ratio: 1; object-fit: cover; }
.sh-info h1 { margin: .2rem 0 .4rem; } .sh-kurz { font-size: 1.05rem; opacity: .85; }
.sh-preisbox { display: flex; flex-direction: column; gap: .15rem; margin: .8rem 0 1rem; } .sh-preisbox .sh-preis { font-size: 1.7rem; }
.sh-steuer, .sh-liefer { font-size: .85rem; opacity: .75; }
.sh-info form { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.sh-menge { display: flex; flex-direction: column; font-size: .85rem; } .sh-menge input { width: 5rem; padding: .5rem; font: inherit; border: 1px solid var(--rahmen, #ccc); border-radius: 8px; }
.sh-artnr { font-size: .8rem; opacity: .6; } .sh-zurueck a { font-size: .9rem; }
.sh-ausverkauft { font-weight: 700; color: #a33; }
.sh-tabelle { width: 100%; border-collapse: collapse; }
.sh-tabelle th, .sh-tabelle td { padding: .6rem .4rem; border-bottom: 1px solid var(--rahmen, #e3e7ec); text-align: left; vertical-align: middle; }
.sh-tabelle .sh-r { text-align: right; white-space: nowrap; }
.sh-tabelle input { width: 4.5rem; padding: .4rem; font: inherit; border: 1px solid var(--rahmen, #ccc); border-radius: 8px; }
.sh-k-bild img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; }
.sh-weg { border: 0; background: none; font-size: 1.4rem; cursor: pointer; opacity: .55; } .sh-weg:hover { opacity: 1; }
.sh-korb-fuss { display: flex; justify-content: flex-end; margin: .6rem 0; }
.sh-summen { display: flex; flex-direction: column; gap: .35rem; max-width: 420px; margin: 1rem 0 1rem auto; padding: 1rem; border-radius: var(--radius); background: rgba(0,0,0,.035); }
.sh-summen > div { display: flex; justify-content: space-between; gap: 1rem; }
.sh-summen .sh-gesamt { font-weight: 800; font-size: 1.15rem; border-top: 1px solid rgba(0,0,0,.12); padding-top: .4rem; }
.sh-weiter { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.sh-kasse-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; align-items: start; }
.sh-kasse-rechts { position: sticky; top: 1rem; } .sh-kasse-rechts .sh-summen { margin: 0 0 1rem; max-width: none; }
.sh-zahlarten { display: flex; flex-direction: column; gap: .5rem; }
.sh-bestellen { width: 100%; font-size: 1.1rem !important; margin-top: .6rem; }
.sh-status { font-size: 1.05rem; } .sh-st-bezahlt strong, .sh-st-versendet strong { color: #2e7d32; } .sh-st-offen strong { color: #b26a00; }
.sh-bank, .sh-download, .sh-lizenz { padding: 1rem; border-radius: var(--radius); background: rgba(0,0,0,.035); margin: 1rem 0; display: flex; flex-direction: column; gap: .5rem; }
.sh-download { flex-direction: row; align-items: center; flex-wrap: wrap; }
.sh-lizenz textarea { width: 100%; font-family: monospace; font-size: .8rem; }
.sh-korb-knopf { position: fixed; right: 18px; bottom: 96px; z-index: 900; background: var(--akzent, #2b6cb0); color: #fff; text-decoration: none; border-radius: 999px; padding: .65rem 1rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.sh-korb-knopf span { background: #fff; color: var(--akzent, #2b6cb0); border-radius: 999px; padding: 0 .45rem; margin-left: .2rem; }
@media (max-width: 800px) { .sh-produkt, .sh-kasse-raster { grid-template-columns: 1fr; } .sh-kasse-rechts { position: static; } .sh-k-bild { display: none; } }

.sh-korb, .sh-kasse, .sh-bestellung, .sh-produkt { text-align: left; color: var(--text); }
.sh-korb, .sh-kasse, .sh-bestellung { background: var(--flaeche); padding: clamp(1.1rem, 3vw, 2rem); border-radius: var(--radius); box-shadow: var(--schatten); }
.sh-kasse .ws-formular { box-shadow: none; padding: 0; background: none; }
.sh-kasse .ws-formular select { font: inherit; padding: .65rem .7rem; border: 1px solid rgba(0,0,0,.18); border-radius: calc(var(--radius) * .6); background: #fff; color: #1d2733; }
.sh-kasse h1, .sh-kasse h2 { text-align: left; }
.sh-kasse .ws-check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; margin: .5rem 0; }
.sh-kasse .ws-check input { margin-top: .3rem; flex: none; }
.sh-summen { background: rgba(127,127,127,.12); }
.sh-bank, .sh-download, .sh-lizenz { background: rgba(127,127,127,.12); }
.sh-kasse-raster > div { min-width: 0; }
.sh-kasse .ws-formular { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.sh-kasse .ws-formular input, .sh-kasse .ws-formular select, .sh-kasse .ws-formular textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.sh-recht { margin: 1rem 0; border: 1px solid var(--rahmen, rgba(0,0,0,.12)); border-radius: var(--radius); background: rgba(127,127,127,.06); }
.sh-recht h3 { margin: 0; padding: .8rem 1rem .3rem; font-size: 1rem; }
.sh-recht .ws-text { box-shadow: none; background: none; padding: 0 1rem 1rem; font-size: .92rem; }
.sh-kasse-rechts .sh-recht { margin: .6rem 0; }
.sh-recht > h3 { font-size: 1.05rem !important; font-weight: 700; line-height: 1.3; }
.sh-eu-hinweis { margin: .3rem 1rem 1rem; } .sh-eu-hinweis img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.sh-eu-hinweis figcaption { font-size: .8rem; opacity: .75; margin-top: .35rem; }
.sh-bilder .sh-video { grid-column: 1 / -1; width: 100%; max-height: 70vh; border-radius: var(--radius); background: #000; display: block; }
.sh-zahlarten [hidden] { display: none !important; }
.sh-karte-text h3 { overflow-wrap: anywhere; hyphens: auto; }
.sh-pers { display: flex; flex-direction: column; gap: .25rem; width: 100%; font-size: .9rem; font-weight: 600; }
.sh-pers textarea { font: inherit; font-weight: 400; padding: .55rem .65rem; border: 1px solid var(--rahmen, #ccc); border-radius: 8px; resize: vertical; background: #fff; color: #1d2733; }
.sh-pers-zeile { opacity: .85; font-style: italic; }
.sh-werkzeug { margin-top: 2rem; } .sh-werkzeug h2 { margin-bottom: .3rem; }
.sh-pers input[type=file] { font: inherit; font-weight: 400; }
.sh-gestaltung { width: 100%; border: 2px solid #3aa45a; background: rgba(58,164,90,.08); border-radius: var(--radius); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem; }
.sh-gest-kopf { font-weight: 700; color: #2c8a48; } .sh-gest-bilder { display: flex; gap: .4rem; flex-wrap: wrap; } .sh-gest-bilder img { width: 90px; height: 70px; object-fit: cover; border-radius: 6px; background: #fff; }
.sh-gest-weg { align-self: flex-start; border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font-size: .85rem; opacity: .75; padding: 0; }
.sh-datei-hinweis { width: 100%; }

/* ---------- Barrierefreiheit (nur aktiv, wenn im Admin eingeschaltet) ---------- */
.ws-sprung { position: absolute; left: .5rem; top: -4rem; z-index: 10000; background: #0b0c0c; color: #fff; padding: .7rem 1.1rem; border-radius: 8px; font-weight: 700; text-decoration: none; }
.ws-sprung:focus { top: .5rem; outline: 3px solid #ffbf47; outline-offset: 2px; }
#inhalt:focus { outline: none; }
body[data-bf-fokus] a:focus-visible, body[data-bf-fokus] button:focus-visible, body[data-bf-fokus] input:focus-visible, body[data-bf-fokus] select:focus-visible,
body[data-bf-fokus] textarea:focus-visible, body[data-bf-fokus] summary:focus-visible, body[data-bf-fokus] [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #0b0c0c !important; border-radius: 4px; }
body[data-bf] input:not([type=checkbox]):not([type=radio]):invalid:not(:placeholder-shown):not(:focus) { border-color: #c62828; }
/* Ansicht anpassen (Besucher) */
.bf-knopf { position: fixed; left: 14px; bottom: 104px; z-index: 9000; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: #1f4fbf; color: #fff;
  font-size: 1.45rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; padding: 0; }
.bf-panel { position: fixed; left: 14px; bottom: 162px; z-index: 9001; width: min(300px, calc(100vw - 28px)); background: #fff; color: #1d262e; border: 1px solid #c9d1d8; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: .9rem 1rem 1rem; font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.bf-panel h2 { font-size: 17px; line-height: 1.3; margin: 0 0 .6rem; color: #1d262e; }
.bf-panel .bf-zeile { display: flex; gap: .4rem; margin: .35rem 0; flex-wrap: wrap; }
.bf-panel button { flex: 1; min-height: 42px; border: 2px solid #1f4fbf; background: #fff; color: #1f4fbf; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; padding: .3rem .5rem; }
.bf-panel button[aria-pressed="true"] { background: #1f4fbf; color: #fff; }
.bf-panel .bf-zu { position: absolute; right: .4rem; top: .3rem; flex: none; min-height: 0; width: 34px; height: 34px; border: 0; font-size: 1.3rem; }
html.bf-gross { font-size: 118%; } html.bf-sehrgross { font-size: 136%; }
html.bf-gross body, html.bf-sehrgross body { font-size: 1rem; }
html.bf-kontrast body { --hg: #000; --flaeche: #111; --text: #fff; --kopf: #000; --kopftext: #fff; --fuss: #000; --fusstext: #fff; --akzent: #ffd400; --primaer: #ffd400; --rahmen: #fff; background: #000 !important; color: #fff !important; }
html.bf-kontrast body :where(p, li, h1, h2, h3, h4, span, label, td, th, figcaption, small, strong) { color: #fff !important; }
html.bf-kontrast body a { color: #ffd400 !important; }
html.bf-kontrast body .ws-btn { background: #ffd400 !important; color: #000 !important; border-color: #ffd400 !important; }
html.bf-kontrast body :where(.ws-karte, .ws-text, .sh-karte, .ws-hinweis, .ws-formular input, .ws-formular textarea) { background: #111 !important; border-color: #fff !important; }
html.bf-kontrast .bf-panel, html.bf-kontrast .bf-panel * { background-color: #fff; color: #1d262e !important; }
html.bf-links body a { text-decoration: underline !important; text-underline-offset: 2px; }
html.bf-ruhig *, html.bf-ruhig *::before, html.bf-ruhig *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media print { .bf-knopf, .bf-panel, .ws-sprung { display: none !important; } }
.ws-unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Seitenaufbau „Shop“ (wie moderne Shopsysteme) ---------- */
body.sa .ws-inhalt { padding-top: 1rem; }
.sa-kopf { background: var(--kopf); color: var(--kopftext); position: sticky; top: 0; z-index: 60; box-shadow: var(--schatten); }
.sa-kopf > .ws-innen { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.sa-kopf a, .sa-kopf button { color: inherit; }
.sa-menueknopf { display: none; background: none; border: 0; padding: .35rem; cursor: pointer; }
.sa-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; align-items: center; }
.sa-liste a { text-decoration: none; padding: .35rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.sa-liste li.aktiv > a, .sa-liste a:hover { border-bottom-color: currentColor; }
.sa-kopflinks { flex: 1; min-width: 0; }
.sa-symbole { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.sa-symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: none; border: 0; cursor: pointer; text-decoration: none; }
.sa-symbol:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.sa-zahl { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: var(--akzent); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sa-suchleiste { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); padding: .7rem 0; }
.sa-suchleiste .ws-innen, .sa-suchform { display: flex; gap: .5rem; }
.sa-suchleiste input, .sa-suchform input { flex: 1; min-width: 0; font: inherit; padding: .6rem .8rem; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); color: var(--text); }
.sa-suchform { margin: .5rem 0 1rem; max-width: 640px; }
.sa-logo { text-align: center; padding: 1.6rem 1rem 1rem; }
.sa-logo a { display: inline-block; text-decoration: none; color: var(--titel, var(--primaer)); }
.sa-logo img { max-height: var(--sa-logo-h, 150px); max-width: min(100%, 520px); width: auto; height: auto; display: block; margin: 0 auto; }
.sa-logo-text { font-family: var(--titelschrift); font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 700; }
.sa-logo-name { display: block; font-weight: 700; margin-top: .3rem; }
.sa-leiste { border-top: 1px solid var(--rahmen); border-bottom: 1px solid var(--rahmen); background: var(--hg); position: relative; z-index: 40; }
.sa-leiste .sa-liste { justify-content: center; gap: .2rem 2rem; font-size: 1.05rem; padding: .35rem 0; }
.sa-liste li { position: relative; }
.sa-liste li.hat-unter { display: inline-flex; align-items: center; }
.sa-auf { background: none; border: 0; cursor: pointer; padding: .2rem .3rem; font-size: .9rem; color: inherit; }
.sa-liste li > ul { display: none; position: absolute; left: 0; top: 100%; list-style: none; margin: 0; padding: .4rem 0; min-width: 210px; background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 70; }
.sa-liste li > ul a { display: block; padding: .45rem 1rem; border: 0; }
.sa-liste li > ul a:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.sa-liste li:hover > ul, .sa-liste li.auf > ul, .sa-liste li:focus-within > ul { display: block; }
.sa-titel { text-align: center; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 2.2rem 0 1.2rem; }
.sa-seitentitel { margin: 1rem 0; }
.sa-mehr { text-align: center; margin-top: 1.2rem; }
/* Banner-Slider */
.sa-banner { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; background: color-mix(in srgb, var(--primaer) 8%, var(--hg)); }
.sa-banner-bild { display: none; } .sa-banner-bild.an { display: block; animation: sa-ein .6s ease; }
.sa-banner-bild img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; }
@keyframes sa-ein { from { opacity: .3; } to { opacity: 1; } }
.sa-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; }
.sa-pfeil.zurueck { left: .7rem; } .sa-pfeil.vor { right: .7rem; }
.sa-punkte { position: absolute; left: 0; right: 0; bottom: .7rem; display: flex; justify-content: center; gap: .45rem; z-index: 3; }
.sa-punkte button { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.35); padding: 0; cursor: pointer; }
.sa-punkte button.an { background: #fff; }
/* Wisch-Slider (Produkte, Kategorien) */
.sa-slider { position: relative; }
.sa-spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, calc((100% - 3 * 1.1rem) / 4)); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .3rem .1rem .8rem; }
.sa-spur::-webkit-scrollbar { display: none; }
.sa-spur > * { scroll-snap-align: start; }
.sa-slider .sa-pfeil { top: 40%; }
.sa-slider .sa-pfeil.zurueck { left: -.6rem; } .sa-slider .sa-pfeil.vor { right: -.6rem; }
.sa-slider .sa-pfeil[disabled] { opacity: 0; pointer-events: none; }
.sa-kat { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); text-align: center; }
.sa-kat-bild { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: rgba(0,0,0,.05); border: 1px solid var(--rahmen); display: flex; align-items: center; justify-content: center; }
.sa-kat-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sa-kat:hover img { transform: scale(1.05); }
.sa-kat-name { font-weight: 700; font-size: 1.05rem; }
.sa-kat small { opacity: .7; }
.sa-kat-slider .sa-spur { grid-auto-columns: minmax(150px, calc((100% - 5 * 1.1rem) / 6)); }
.sa-unterkat { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.sa-unterkat a { padding: .35rem .8rem; border: 1px solid var(--rahmen); border-radius: 999px; text-decoration: none; color: var(--text); }
.sa-unterkat a.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
/* Handy-Schublade */
.sa-schublade { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.4); }
.sa-schublade-innen { position: absolute; left: 0; top: 0; bottom: 0; width: min(88vw, 360px); background: var(--kopf); color: var(--kopftext); padding: 3.6rem 1.4rem 2rem; overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,.25); }
.sa-schublade-innen a, .sa-schublade-innen button { color: inherit; }
.sa-zu { position: absolute; top: .6rem; left: .8rem; }
.sa-schub-liste { flex-direction: column; align-items: stretch; gap: 0; font-size: 1.12rem; }
.sa-schub-liste > li { display: flex; flex-wrap: wrap; align-items: center; }
.sa-schub-liste > li > a { flex: 1; padding: .7rem 0; }
.sa-schub-liste li > ul { position: static; display: none; width: 100%; box-shadow: none; border: 0; background: transparent; color: inherit; padding: 0 0 .4rem 1rem; }
.sa-schub-liste li.auf > ul { display: block; } .sa-schub-liste li:hover > ul { display: none; } .sa-schub-liste li.auf:hover > ul { display: block; }
.sa-schublade hr { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); margin: 1rem 0; }
body.sa-schub-offen { overflow: hidden; }
/* Fuß */
.sa-fuss { background: var(--fuss); color: var(--fusstext); padding: 2.6rem 0 7rem; text-align: center; margin-top: 2rem; }
.sa-fuss a { color: inherit; }
.sa-fusslinks, .sa-zahlarten, .sa-sozial { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem; }
.sa-fusslinks a { text-decoration: none; font-size: 1.05rem; } .sa-fusslinks a:hover { text-decoration: underline; }
.sa-zahlarten { gap: .5rem; }
.sa-zahlarten li { background: #fff; color: #1d262e; border-radius: 6px; padding: .3rem .65rem; font-size: .82rem; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sa-sozial a { font-weight: 700; text-decoration: none; }
.sa-fusstext { opacity: .9; }
@media (max-width: 860px) {
  .sa-menueknopf { display: inline-flex; }
  .sa-kopflinks { display: none; }
  .sa-symbole { gap: .2rem; }
  .sa-leiste .sa-liste { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: .3rem 1rem; }
  .sa-leiste .sa-liste::-webkit-scrollbar { display: none; }
  .sa-leiste .sa-liste li > ul { display: none !important; }
  .sa-leiste .sa-liste li.hat-unter { display: flex; align-items: center; }
  .sa-leiste .ws-innen { width: 100%; }
  .sa-leiste .sa-liste li { flex: none; }
  .sa-spur { grid-auto-columns: 68%; }
  .sa-kat-slider .sa-spur { grid-auto-columns: 40%; }
  .sa-slider .sa-pfeil { display: none; }
  .sa-banner .sa-pfeil { width: 38px; height: 38px; font-size: 1.5rem; }
}
@media (max-width: 860px) and (min-width: 520px) { .sa-spur { grid-auto-columns: 42%; } .sa-kat-slider .sa-spur { grid-auto-columns: 28%; } }
.sa-produkte .sh-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sa-schub-liste a { border-bottom: 0 !important; } .sa-schub-liste li.aktiv > a { font-weight: 700; }
@media (max-width: 860px) {
  .sa-produkte .sh-raster, body.sa .sh-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  body.sa .sh-karte-text { padding: .6rem .65rem .7rem; }
  body.sa .sh-karte-text h3 { font-size: .98rem; }
  body.sa .sh-karte-text p { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.sa .sh-karte-fuss { flex-wrap: wrap; gap: .4rem; }
  body.sa .sh-karte-fuss .sh-btn-klein { width: 100%; }
}

/* ---------- Shop-Aufbau: Feinschliff nach Vorbild moderner Handmade-Shops ---------- */
body.sa { font-size: 16px; }
body.sa .ws-innen { width: min(100% - 2.4rem, var(--breite)); }
.sa-kopf { position: static; box-shadow: none; }
.sa-kopf > .ws-innen { min-height: 46px; padding-top: .35rem; }
.sa-kopflinks .sa-liste { gap: .2rem 1.1rem; font-size: .92rem; }
.sa-kopflinks .sa-liste a { padding: .15rem 0; border-bottom-width: 1px; }
.sa-symbole { gap: .25rem; } .sa-symbol { width: 40px; height: 40px; }
.sa-symbol svg { width: 22px; height: 22px; }
.sa-logo { padding: 1.4rem 1rem 2.4rem; }
.sa-leiste { position: sticky; top: 0; border: 0; background: var(--hg); transition: box-shadow .2s; }
.sa-leiste .ws-innen { display: flex; align-items: center; gap: .6rem; }
.sa-leiste .sa-liste { flex: 1; gap: .2rem 1.6rem; font-size: .98rem; padding: .5rem 0 .6rem; }
.sa-leiste .sa-liste a { border-bottom-width: 1px; }
.sa-leiste .sa-auf { padding: 0 0 0 .15rem; font-size: .75rem; }
.sa-leiste-menue, .sa-leiste-korb { visibility: hidden; flex: none; }
.sa-leiste.klebt { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.sa-leiste.klebt .sa-leiste-menue, .sa-leiste.klebt .sa-leiste-korb { visibility: visible; }
.sa-liste li > ul { background: #fff; color: #2b2b2b; border: 0; border-radius: 4px; box-shadow: 0 6px 22px rgba(0,0,0,.14); padding: .5rem 0; min-width: 200px; font-size: .88rem; }
.sa-liste li > ul a { padding: .3rem 1rem; color: #2b2b2b; }
/* Banner in Inhaltsbreite */
.sa-banner { margin: 0 0 2.6rem; border-radius: 0; }
.sa-banner-bild img { max-height: none; object-fit: contain; }
.sa-banner .sa-pfeil { background: rgba(30,20,35,.55); width: 40px; height: 40px; font-size: 1.5rem; opacity: 0; transition: opacity .2s; }
.sa-banner:hover .sa-pfeil, .sa-banner:focus-within .sa-pfeil { opacity: 1; }
@media (hover: none) { .sa-banner .sa-pfeil { opacity: .85; } }
.sa-punkte { display: none; }
/* Text */
body.sa .ws-text { text-align: var(--textausrichtung, left); }
body.sa .ws-text h1 { font-size: calc(clamp(1.35rem, 2.6vw, 1.75rem) * var(--hs, 1)); font-weight: 500; margin: .2rem 0 1.4rem; }
body.sa .ws-text p:has(+ h1) { font-size: .82rem; margin: 0; }
body.sa .ws-text p { margin: 0 0 .9rem; }
.sa-titel { font-weight: 500; font-size: calc(clamp(1.4rem, 2.6vw, 1.75rem) * var(--hs, 1)); margin: 3rem 0 1.6rem; }
.sa-einleitung { text-align: center; max-width: 920px; margin: 0 auto 2rem; }
body.sa .sa-seitentitel { text-align: center; font-weight: 500; font-size: calc(clamp(1.4rem, 2.6vw, 1.75rem) * var(--hs, 1)); margin: .6rem 0 1rem; }
/* Produktkarten im Handmade-Stil: Foto mit farbigem Rahmen, Text mittig, kein Kasten */
body.sa-karten-rahmen .sh-raster { gap: 2.2rem 1.6rem; align-items: start; }
body.sa-karten-rahmen .sh-karte { background: none; border: 0; box-shadow: none; text-align: center; overflow: visible; }
body.sa-karten-rahmen .sh-karte-bild { aspect-ratio: auto; background: none; overflow: visible; display: flex; justify-content: center; align-items: flex-end; min-height: 120px; }
body.sa-karten-rahmen .sh-karte-bild img { width: auto; max-width: 100%; height: auto; max-height: 290px; object-fit: contain; border: 5px solid var(--akzent); border-radius: calc(var(--radius) + 4px); background: #fff; transition: transform .25s; }
body.sa-karten-rahmen .sh-karte-bild:hover img { transform: translateY(-3px); }
body.sa-karten-rahmen .sh-ohnebild { width: 70%; aspect-ratio: 1; border: 5px solid var(--akzent); border-radius: calc(var(--radius) + 4px); }
body.sa-karten-rahmen .sh-karte-text { padding: .7rem .2rem 0; }
body.sa-karten-rahmen .sh-karte-text h3 { font-size: .9rem; font-weight: 500; line-height: 1.35; margin: 0 0 .35rem; }
body.sa-karten-rahmen .sh-karte-text h3 a { color: var(--text); text-decoration: none; }
body.sa-karten-rahmen .sh-karte-text p { font-size: .8rem; line-height: 1.35; opacity: .62; margin: 0 0 .5rem; }
body.sa-karten-rahmen .sh-karte-fuss { justify-content: center; padding-top: .1rem; }
body.sa-karten-rahmen .sh-preis { font-size: .88rem; font-weight: 400; }
body.sa-ohne-knopf .sh-karte-fuss form { display: none; }
body.sa-karten-rahmen .sh-marke { top: .5rem; right: .6rem; }
/* „Mehr aus unserem Shop“: schmale Reihe zum Wischen */
.sa-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: .4rem calc(50vw - 50%) 2.4rem; background: color-mix(in srgb, var(--flaeche) 70%, var(--hg)); }
.sa-band .sa-titel { margin-top: 1.6rem; }
.sa-reihe { display: flex; gap: 1.6rem; overflow-x: auto; padding: .3rem .1rem 1rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--akzent) #fff; }
.sa-reihe::-webkit-scrollbar { height: 10px; } .sa-reihe::-webkit-scrollbar-track { background: #fff; border-radius: 6px; } .sa-reihe::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--akzent) 60%, #fff); border-radius: 6px; }
.sa-kompakt { flex: none; width: auto; max-width: 300px; scroll-snap-align: start; }
.sa-kompakt-bild { position: relative; display: block; }
.sa-kompakt-bild img { display: block; height: 180px; width: auto; max-width: 300px; object-fit: cover; border: 5px solid var(--akzent); border-radius: calc(var(--radius) + 4px); background: #fff; }
.sa-kompakt-bild .sh-ohnebild { width: 180px; height: 180px; display: flex; border: 5px solid var(--akzent); border-radius: calc(var(--radius) + 4px); }
.sa-kompakt-zeile { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; margin-top: .45rem; }
.sa-kompakt-zeile a { color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sa-kompakt-zeile .sh-preis { font-size: .82rem; font-weight: 400; white-space: nowrap; }
.sa-kompakt-kurz { font-size: .78rem; opacity: .6; margin: .1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sa-kompakt .sh-marke { position: absolute; top: .55rem; right: .6rem; background: #111; color: #fff; font-size: .62rem; padding: .15rem .5rem; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase; }
/* Kategorie-Bildkacheln */
.sa-kacheln { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2.6rem; margin: 2.6rem 0 1rem; }
.sa-kachel { position: relative; width: 190px; height: 140px; border: 4px solid var(--akzent); border-radius: calc(var(--radius) / 2 + 4px); overflow: hidden; display: flex; align-items: center; justify-content: center; text-decoration: none; background: color-mix(in srgb, var(--akzent) 30%, #333); }
.sa-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sa-kachel::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.sa-kachel span { position: relative; z-index: 1; color: #fff; font-weight: 600; font-size: 1.1rem; text-align: center; padding: 0 .6rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.sa-kachel:hover img { transform: scale(1.06); }
/* Fuß */
.sa-fuss { padding: 2.4rem 0 1.4rem; margin-top: 0; font-size: .82rem; }
.sa-fusslinks { gap: .5rem 1.6rem; align-items: center; margin-bottom: 1.8rem; }
.sa-fusslinks a { font-size: .82rem; }
.sa-widerruf { font: inherit; font-size: .82rem; color: inherit; background: none; border: 1.5px solid currentColor; border-radius: 999px; padding: .2rem .8rem; cursor: pointer; }
.sa-widerruf:hover { background: rgba(255,255,255,.12); }
.sa-zahlarten { margin-bottom: 1.8rem; gap: .45rem; }
.sa-zahlarten li { font-size: .68rem; padding: .25rem .5rem; border-radius: 3px; }
.sa-sozial { margin-bottom: 1.4rem; gap: 1.2rem; }
.sa-sozial a { font-size: .9rem; }
.sa-fuss .ws-copy { font-weight: 700; font-size: .72rem; margin: 0; }
/* WhatsApp-Knopf */
.sa-whatsapp { position: fixed; left: 18px; bottom: 18px; z-index: 8990; width: 54px; height: 54px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(0,0,0,.3); }
.sa-whatsapp svg { width: 30px; height: 30px; }
.sa-whatsapp.hoch { bottom: 170px; }
body.sa .bf-knopf { bottom: 92px; } body.sa .bf-panel { bottom: 150px; }
@media (max-width: 860px) {
  .sa-kopf > .ws-innen { min-height: 56px; }
  .sa-logo { padding: 1rem 1rem 1.4rem; }
  .sa-logo img { max-height: calc(var(--sa-logo-h, 150px) * .8); }
  .sa-leiste .sa-liste { font-size: 1.02rem; gap: 0 1.6rem; }
  .sa-leiste.klebt .sa-leiste-menue, .sa-leiste.klebt .sa-leiste-korb { display: none; }
  .sa-banner { margin-bottom: 1.8rem; }
  body.sa-karten-rahmen .sh-raster { gap: 1.6rem .9rem; }
  body.sa-karten-rahmen .sh-karte-bild img { max-height: 220px; border-width: 4px; }
  body.sa-karten-rahmen .sh-karte-text h3 { font-size: .95rem; }
  body.sa-karten-rahmen .sh-karte-text p { font-size: .85rem; -webkit-line-clamp: 3; }
  .sa-kompakt-bild img { height: 140px; }
  .sa-kacheln { gap: 1rem; } .sa-kachel { width: calc(50% - .5rem); height: 120px; }
  .sa-whatsapp { width: 50px; height: 50px; }
}
/* Feinschliff 2 */
body.sa .sa-kopflinks a, body.sa .sa-leiste .sa-liste > li > a, body.sa .sa-leiste .sa-auf { color: var(--kopftext); }
body.sa .ws-block.ws-text { background: none; box-shadow: none; border: 0; padding-left: 0; padding-right: 0; }
body.sa .ws-inhalt { padding-bottom: 0; }
body.sa .sa-inhalt .ws-innen > :last-child:not(.sa-band) { margin-bottom: 3rem; }
.sa-band { margin-bottom: 0; }
.sa-kompakt { display: flex; flex-direction: column; width: max-content; max-width: none; }
.sa-kompakt-zeile, .sa-kompakt-kurz { width: 0; min-width: 100%; }

/* Auswahl-Menüs (Varianten) auf der Produktseite */
.sh-optionen { display: grid; gap: .75rem; margin: .4rem 0 .9rem; }
.sh-opt { display: grid; gap: .3rem; }
.sh-opt > label { font-weight: 600; font-size: .95rem; }
.sh-opt select { width: 100%; max-width: 26rem; padding: .6rem .7rem; border: 1px solid var(--rahmen); border-radius: calc(var(--radius) * .6); background: var(--flaeche, #fff); color: inherit; font: inherit; }
.sh-farben { display: flex; flex-wrap: wrap; gap: .4rem; }
.sh-farbe { width: 2rem; height: 2rem; border-radius: 50%; background: var(--f); border: 2px solid color-mix(in srgb, currentColor 18%, transparent); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px #fff6; }
.sh-farbe[aria-pressed=true] { outline: 3px solid var(--akzent); outline-offset: 2px; }
.sh-farbe:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.sh-ab { font-size: .75em; font-weight: 500; opacity: .8; }
.sh-opt-zeile { opacity: .85; }

/* Partner-Bereich (Affiliate) */
.aff-bereich { text-align: left; } .aff-bereich h1, .aff-bereich h2, .aff-bereich h3 { text-align: left; } .aff-bereich h2 { margin-top: 1.8rem; }
.aff-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.aff-zahlen div { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); padding: .7rem .9rem; display: grid; gap: .15rem; }
.aff-zahlen span { font-size: .82rem; opacity: .8; } .aff-zahlen strong { font-size: 1.3rem; }
.aff-kopie { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.aff-kopie input { flex: 1 1 16rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--rahmen); border-radius: calc(var(--radius) * .6); font-family: ui-monospace, monospace; font-size: .88rem; background: var(--flaeche); color: inherit; }
.aff-ziel label { display: grid; gap: .3rem; font-weight: 600; } .aff-ziel input { padding: .55rem .7rem; border: 1px solid var(--rahmen); border-radius: calc(var(--radius) * .6); font: inherit; background: var(--flaeche); color: inherit; }
.aff-ziel output { display: block; word-break: break-all; font-family: ui-monospace, monospace; font-size: .85rem; margin-top: .3rem; }
.aff-code { font-family: ui-monospace, monospace; letter-spacing: .08em; font-size: 1.1em; }
.aff-tabelle-rahmen { overflow-x: auto; } .aff-tabelle td, .aff-tabelle th { white-space: nowrap; } .aff-storno td { opacity: .55; text-decoration: line-through; }
.aff-unter { display: grid; gap: .5rem; } .aff-u { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .6rem .9rem; background: var(--flaeche); }
.aff-u summary { cursor: pointer; } .aff-u.aff-aus { opacity: .65; }
.aff-u-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; } .aff-u-aktionen form { display: flex; gap: .4rem; align-items: end; } .aff-u-aktionen label { display: grid; gap: .2rem; font-size: .85rem; } .aff-u-aktionen input { width: 6rem; padding: .45rem; }
.aff-neu { margin-bottom: .7rem; }
.aff-zahlen small { font-size: .75rem; opacity: .7; }
.aff-offen td { opacity: .75; font-style: italic; }
.aff-aktiv { color: #2e9d55; font-weight: 600; } .aff-abgelaufen { color: #c0392b; }
.aff-tabelle-rahmen { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .aff-tabelle { min-width: 34rem; } .aff-tabelle td { white-space: normal; vertical-align: top; } .aff-tabelle td:nth-child(3) { min-width: 11rem; } .aff-tabelle small { opacity: .75; }
.aff-plinks { margin: .4rem 0 1rem; border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .5rem .9rem; } .aff-plinks summary { cursor: pointer; font-weight: 600; } .aff-pl-name { margin: .6rem 0 0; font-weight: 600; font-size: .92rem; }
.sh-gratis { padding: .6rem .8rem; border-radius: 8px; background: #e8f6ee; color: #14532d; font-weight: 600; margin: 0 0 1rem; }
.sh-testlizenz { border: 2px solid #22a05a; }
.sh-gratis-hinweis { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 99px; background: #e8f6ee; color: #14532d; font-size: .78rem; font-weight: 600; }
.ws-rechtstext-pdf { width: 100%; height: 80vh; border: 1px solid #d6dce1; border-radius: 8px; }
.ws-rechtstext-dl { margin-top: 1.5rem; }
/* Rechtstexte: gut lesbare Überschriften (Farbe automatisch mit Kontrast oder eigene Wahl) */
.ws-rechtstext h1, .ws-rechtstext h2, .ws-rechtstext h3 { color: var(--rt-h, var(--primaer)) !important; font-weight: 700; }
.ws-rechtstext h2 { padding-bottom: .25rem; border-bottom: 1px solid var(--rahmen, rgba(0,0,0,.12)); }
.ws-rechtstext.rt-links, .ws-rechtstext.rt-links :where(p, li, h1, h2, h3, ul, ol) { text-align: left !important; }
.ws-rechtstext.rt-links ul, .ws-rechtstext.rt-links ol { padding-left: 1.4rem; }
body.sa .ws-rechtstext h1 { font-weight: 700; }
/* Rechtstexte-Links in der Fußzeile: Ausrichtung (System → Rechtstexte) */
.ws-fuss-recht ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 1.4rem 0 0; padding: 0; }
.ws-fuss-recht.ausr-links ul { justify-content: flex-start; } .ws-fuss-recht.ausr-mitte ul { justify-content: center; } .ws-fuss-recht.ausr-rechts ul { justify-content: flex-end; }
.ws-copy.ausr-mitte { text-align: center; } .ws-copy.ausr-rechts { text-align: right; }
.sa-fusslinks.ausr-links { justify-content: flex-start; } .sa-fusslinks.ausr-rechts { justify-content: flex-end; } .sa-fusslinks.ausr-mitte { justify-content: center; }
.sh-lznr[hidden] { display: none !important; }
/* Siegel & Logos (IT-Recht Kanzlei, ShopVote) */
.ow-siegel-leiste { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin: 1.2rem 0 .4rem; }
.kl-fuss .ow-siegel-leiste, .sa-fuss .ow-siegel-leiste { justify-content: center; }
.ow-siegel img { max-height: 64px; width: auto; }
.ow-siegel-schwebend { position: fixed; bottom: 5.6rem; z-index: 60; max-width: 160px; }
.ow-siegel-schwebend.ow-siegel-links { left: 12px; } .ow-siegel-schwebend.ow-siegel-rechts { right: 12px; }
@media (max-width: 600px) { .ow-siegel-schwebend { bottom: 6.4rem; max-width: 110px; } }
.ow-bewertung { margin: 1.5rem 0; }
.ow-siegel-schwebend.ow-siegel-rechts { bottom: 9.5rem; } .ow-siegel-schwebend.ow-siegel-links { bottom: 5rem; } @media (max-width: 600px) { .ow-siegel-schwebend.ow-siegel-rechts { bottom: 8.5rem; } }
/* Produktdetails & Grundpreis */
.sh-details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 1.2rem 0 0; font-size: .92rem; }
.sh-details dt { opacity: .7; } .sh-details dd { margin: 0; }
.sh-grundpreis { display: block; font-size: .8rem; opacity: .75; }
/* Handy-Wischleiste: Unterpunkte als aufklappbare Zeile */
.ws-wm-auf { display: block; padding: .45rem .9rem; border-radius: 999px; color: var(--kopftext); background: transparent; font: inherit; font-weight: 600; font-size: .92rem; border: 1px solid color-mix(in srgb, var(--kopftext) 28%, transparent); white-space: nowrap; cursor: pointer; }
.ws-wm-auf[aria-expanded="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.ws-wm-unter { border-top: 1px solid color-mix(in srgb, var(--kopftext) 14%, transparent); }
.ws-wm-unter ul { list-style: none; margin: 0; padding: .35rem .6rem; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.ws-wm-unter a { display: block; padding: .38rem .8rem; border-radius: 999px; color: var(--kopftext); text-decoration: none; font-size: .88rem; background: color-mix(in srgb, var(--kopftext) 10%, transparent); white-space: nowrap; }
.ws-wm-unter li.aktiv a { background: var(--akzent); color: #fff; }
/* Dropdown im Hauptmenü: auch per Antippen (Touch) und mit kleinem Pfeil */
.ws-nav li.hat-unter > a::after { content: " ▾"; font-size: .8em; opacity: .7; }
.ws-nav li.hat-unter.offen > ul { display: flex; }

/* Shop-Aufbau, Handy: Unterkategorien der Wisch-Leiste als zweite Zeile */
.sa-unterzeile { display: none; }
@media (max-width: 860px) {
  .sa-unterzeile:not([hidden]) { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .35rem 1rem .5rem; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
  .sa-unterzeile a { flex: none; padding: .35rem .85rem; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); text-decoration: none; font-size: .9rem; white-space: nowrap; color: inherit; }
  .sa-unterzeile a.aktiv { background: var(--akzent); color: #fff; }
}
/* Fußzeile: Zahlungsarten & Social Media */
.ow-fuss-extras { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: 1.4rem 0 .6rem; }
.ow-zahlarten, .ow-sozial { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; }
.ow-zb { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 .45rem; background: #fff; color: #1d262e; border-radius: 4px; font: 700 .66rem/1 system-ui, sans-serif; letter-spacing: .01em; box-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: nowrap; }
.ow-zb.mit-bild { width: 50px; min-width: 0; padding: 3px 5px; }
.ow-zb img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; object-fit: contain; }
.ow-sozial { gap: .9rem; }
.ow-so { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit !important; text-decoration: none !important; font-weight: 600; font-size: .85rem; transition: transform .15s, opacity .15s; }
.ow-so:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.ow-so.mit-bild { padding: 0; border: 0; min-height: 0; border-radius: 0; background: none !important; } .ow-so.mit-bild:hover { transform: translateY(-2px); opacity: .85; }
.ow-so img { width: 32px; height: 32px; object-fit: contain; display: block; }
.ow-ico { display: block; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ow-zb:not(.mit-bild) { gap: .3rem; } .ow-zb svg { flex: none; }
/* Fußzeile: Zeilen in eigener Reihenfolge, Ausrichtung je Zeile (Design → Fußzeile oder direkt in der Vorschau) */
.ow-fuss-unten { display: flex; flex-direction: column; gap: 1.2rem; }
.ow-ft { --j: center; --t: center; width: 100%; text-align: var(--t); }
.ow-ft.ausr-links { --j: flex-start; --t: left; } .ow-ft.ausr-rechts { --j: flex-end; --t: right; }
.ow-ft ul { display: flex !important; flex-wrap: wrap; justify-content: var(--j) !important; list-style: none; margin: 0 !important; padding: 0; gap: .35rem 1.4rem; }
.ow-ft li { margin: 0; }
.ow-ft .ow-fuss-extras { align-items: var(--j); margin: 0; } .ow-ft .ow-zahlarten, .ow-ft .ow-sozial, .ow-ft .ow-siegel-leiste { justify-content: var(--j) !important; }
.ow-ft .ws-copy { text-align: var(--t); margin: 0; }
.ow-ft .sa-fusstext { margin: 0; }
.ow-ft-kontakt .ws-fuss-spalten { text-align: var(--t); }
.ow-ft-kontakt.ausr-mitte .ws-fuss-spalten { grid-template-columns: 1fr; gap: .6rem; } .ow-ft-kontakt.ausr-rechts .ws-fuss-spalten > * { justify-self: end; }
.she-fuss .ow-fuss-unten { padding: .4rem 0; }
/* Kasse: Abholung */
.sh-lieferart { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--radius); padding: .6rem .9rem; display: grid; gap: .35rem; margin: 0; }
.sh-lieferart legend { font-weight: 700; padding: 0 .3rem; } .sh-abhol-info { margin: .3rem 0 0; font-size: .92rem; opacity: .9; }
.sh-abholung { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; } .sh-abholung h2 { margin-top: 0; }
[data-sh-adr][hidden], [data-nur-abholung][hidden], [data-sh-abholinfo][hidden] { display: none !important; }
.sh-kasse .ws-formular .sh-lieferart label.ws-check { flex-direction: row; align-items: center; gap: .6rem; font-weight: 600; } .sh-kasse .ws-formular .sh-lieferart input[type=radio] { width: auto; padding: 0; flex: none; margin: 0; }
/* Banner-Slider: Hereinschieben (links → rechts bzw. rechts → links) */
.sa-banner[data-effekt=links] .sa-banner-bild.an, .sa-banner[data-effekt=rechts] .sa-banner-bild.an { animation: sa-von-links var(--sa-tempo, .75s) cubic-bezier(.22,.7,.2,1) both; }
.sa-banner[data-effekt=links] .sa-banner-bild.raus, .sa-banner[data-effekt=rechts] .sa-banner-bild.raus { display: block; position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none; animation: sa-nach-rechts var(--sa-tempo, .75s) cubic-bezier(.22,.7,.2,1) both; }
.sa-banner.sa-rueck .sa-banner-bild.an { animation-name: sa-von-rechts; } .sa-banner.sa-rueck .sa-banner-bild.raus { animation-name: sa-nach-links; }
@keyframes sa-von-links { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sa-von-rechts { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sa-nach-rechts { from { transform: none; } to { transform: translateX(100%); } }
@keyframes sa-nach-links { from { transform: none; } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .sa-banner .sa-banner-bild.an, .sa-banner .sa-banner-bild.raus { animation: none !important; } .sa-banner .sa-banner-bild.raus { display: none; } }
.sh-ki { font-size: .85rem; opacity: .8; margin: .8rem 0 0; display: flex; gap: .4rem; align-items: flex-start; }
/* Google-Bewertungen: Sterne (Teilsterne per --gb), Badge, Menüpunkt, Baustein */
.ow-sterne { --gb: 100%; display: inline-block; letter-spacing: .06em; font-size: 1.05em; line-height: 1; background: linear-gradient(90deg, #f5b301 var(--gb), color-mix(in srgb, currentColor 25%, transparent) var(--gb)); -webkit-background-clip: text; background-clip: text; color: transparent !important; vertical-align: -.05em; }
.ow-gb { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none !important; color: inherit !important; font-weight: 600; flex-wrap: wrap; }
.ow-gb b { font-weight: 800; } .ow-gb small { opacity: .75; font-weight: 500; }
.ow-gb-zeile { display: flex; justify-content: var(--j, center); }
a[data-gb]::after { content: "★★★★★"; margin-left: .35em; letter-spacing: .05em; background: linear-gradient(90deg, #f5b301 var(--gb, 100%), rgba(160,160,160,.45) var(--gb, 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-google { text-align: center; } .ws-google-kopf { display: inline-flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: center; padding: .9rem 1.2rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: var(--radius); background: var(--flaeche); }
.ws-google-kopf strong { font-size: 1.6rem; } .ws-google-kopf .ow-sterne { font-size: 1.3rem; }
.ws-google-g { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 1.5rem/1 system-ui, sans-serif; color: #fff; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.ws-google-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.2rem; text-align: left; }
.ws-google-r { margin: 0; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--flaeche); border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.ws-google-r blockquote { margin: .5rem 0; font-size: .95rem; } .ws-google-r figcaption { font-size: .82rem; opacity: .75; } .ws-google-quelle { font-size: .75rem; opacity: .6; margin-top: .6rem; }
/* News-Ticker (Laufband) */
.ws-ticker { --tk-hg: var(--kopf); --tk-text: var(--kopftext); display: flex; align-items: stretch; overflow: hidden; background: var(--tk-hg); color: var(--tk-text); border-radius: var(--radius); font-size: .95rem; }
.ws-ticker.ws-ticker-oben { border-radius: 0; font-size: .88rem; }
.ws-ticker-label { flex: none; display: flex; align-items: center; padding: .45rem .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .78em; background: var(--akzent); color: var(--akzent-text, #fff); }
.ws-ticker-fenster { flex: 1; min-width: 0; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ws-ticker-band { flex: none; display: flex; gap: 3rem; list-style: none; margin: 0; padding: .45rem 1.5rem; white-space: nowrap; animation: ws-ticker var(--tk-dauer, 30s) linear infinite; }
.ws-ticker-band li::before { content: "•"; margin-right: .8rem; opacity: .6; }
.ws-ticker a { color: inherit !important; text-decoration: none; } .ws-ticker a:hover, .ws-ticker a:focus { text-decoration: underline; }
.ws-ticker:hover .ws-ticker-band, .ws-ticker:focus-within .ws-ticker-band { animation-play-state: paused; }
@keyframes ws-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ws-ticker-band { animation: none; flex-wrap: wrap; white-space: normal; gap: .3rem 2rem; } .ws-ticker-band[aria-hidden] { display: none; } }
html.bf-ruhig .ws-ticker-band { animation: none; flex-wrap: wrap; white-space: normal; } html.bf-ruhig .ws-ticker-band[aria-hidden] { display: none; }
/* Anfahrt */
.ws-anfahrt { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; } .ws-anfahrt-block { text-align: var(--textausrichtung); } .ws-anfahrt-adr { margin: .4rem 0 .8rem; }
.ws-ticker-band { min-width: 100%; box-sizing: border-box; }   /* kurze Meldungen: Band mindestens so breit wie der Ticker, damit es ruhig durchläuft */
/* 1.4.2: Darstellung je Baustein (Editor → „Abstand & Platz“) */
.ws-bx { position: relative; }
.ws-bx-hg { background: var(--bx-hg); color: var(--bx-text); border-radius: var(--radius, 10px); padding: 1.6rem clamp(1rem, 3vw, 2rem); margin: 1.6rem 0; }
.ws-bx-hg :is(h1, h2, h3, h4, p, li, strong) { color: var(--bx-text) !important; }
.ws-bx-hg > :first-child { margin-top: 0; } .ws-bx-hg > :last-child { margin-bottom: 0; }
.ws-bx-a-links { text-align: left; } .ws-bx-a-mitte { text-align: center; } .ws-bx-a-rechts { text-align: right; }
.ws-bx-a-mitte .ws-buttons, .ws-bx-a-mitte .ws-kontaktbuttons { justify-content: center; }
.ws-bx-a-rechts .ws-buttons { justify-content: flex-end; }
.ws-bx-l-kein > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ws-bx-l-eng > * { margin-top: .4rem !important; margin-bottom: .4rem !important; }
.ws-bx-l-weit { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (max-width: 767.98px) { .ws-bx-nur-pc { display: none; } }
@media (min-width: 768px) { .ws-bx-nur-handy { display: none; } }
/* im Editor bleiben ausgeblendete Bausteine sichtbar (halb durchsichtig mit Hinweis) */
.ws-bx[data-nur] { display: block !important; opacity: .55; }
.ws-bx[data-nur]::before { content: "👁 " attr(data-nur); position: absolute; right: 6px; top: 6px; z-index: 3; font: 600 11px system-ui, sans-serif; background: #1d262e; color: #fff; padding: 2px 7px; border-radius: 5px; }
/* 1.4.7: formatierte Beschreibungen aus dem Text-Editor */
.wsg-klein { font-size: .85em; } .wsg-gross { font-size: 1.25em; } .wsg-sehrgross { font-size: 1.6em; line-height: 1.25; }
.wsf-klar { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.wsf-rund { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", Roboto, Arial, sans-serif; }
.wsf-klassisch { font-family: Georgia, "Times New Roman", "Iowan Old Style", serif; }
.wsf-technisch { font-family: "Segoe UI", "Roboto Condensed", "Arial Narrow", Arial, sans-serif; }
.wsa-links { text-align: left; } .wsa-mitte { text-align: center; } .wsa-rechts { text-align: right; }
.sh-beschreibung u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.sh-vorschau-hinweis { max-width: var(--breite, 1180px); margin: 1rem auto; padding: .7rem 1rem; border-radius: 10px; background: #fff6d6; color: #5a4300; border: 1px solid #ecd27a; font: 500 .95rem/1.4 system-ui, sans-serif; }
.sh-vorschau-inhalt form button, .sh-vorschau-inhalt form input[type=submit] { pointer-events: none; opacity: .55; }
/* 1.4.9: Menüleiste auf dem Handy – ganzer Punkt antippbar, größere Tippfläche */
@media (max-width: 860px) {
  .sa-leiste .sa-liste > li.hat-unter { display: inline-flex; align-items: center; }
  .sa-leiste .sa-liste > li > a { padding-top: .7rem; padding-bottom: .7rem; }
  .sa-leiste .sa-liste > li.hat-unter > a { padding-right: .1rem; }
  .sa-leiste .sa-auf { padding: .7rem .4rem .7rem .1rem; font-size: .8rem; }
  .sa-leiste li.auf > a { text-decoration: underline; text-underline-offset: 4px; }
  .sa-unterzeile a { padding: .5rem .85rem; }
}
/* 1.13: Produktseite – Untertitel und Kopfbereich „modern“ */
.sh-untertitel { margin: -.1rem 0 .6rem; font-size: 1.05rem; opacity: .65; line-height: 1.35; }
.pk-modern h1 { font-family: var(--schrift); line-height: 1.3; margin: .1rem 0 .25rem; letter-spacing: 0; }
.pk-modern .sh-untertitel { font-weight: 400; opacity: .6; margin: 0 0 .7rem; }
.pk-modern .sh-sterne-zeile { margin: 0 0 1.6rem; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.pk-modern .sh-sterne { color: currentColor; letter-spacing: 1px; font-size: 1.05rem; } .pk-modern .sh-sterne-leer { opacity: .25; }
.pk-modern .sh-sterne-zeile a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pk-modern .sh-preisbox { margin: 1.2rem 0 .5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; }
.pk-modern .sh-preis { font-size: 1.55rem; font-weight: 400; color: inherit; } .pk-modern .sh-stern-fn { font-size: 1.1rem; margin-left: -.25rem; }
.pk-modern .sh-infoblock { margin: 0 0 1.4rem; font-size: .82rem; line-height: 1.55; display: grid; gap: 0; }
.pk-modern .sh-infoblock div { display: flex; gap: .4rem; } .pk-modern .sh-infoblock dt { font-weight: 600; margin: 0; } .pk-modern .sh-infoblock dd { margin: 0; }
.pk-modern .sh-fussnote { font-size: .75rem; opacity: .7; margin: -.6rem 0 1.2rem; }
.pk-modern .sh-kaufknopf { background: var(--text); color: var(--hg); border: 0; border-radius: 999px; padding: .85rem 1.6rem; font-weight: 600; }
.pk-modern .sh-kaufknopf-breit { display: block; width: 100%; max-width: 420px; }
.pk-modern .sh-zurueck { font-size: .85rem; margin-bottom: .6rem; }
.sh-info.pk-modern .sh-preisbox { display: flex !important; flex-direction: row !important; align-items: baseline; } .sh-info.pk-modern .sh-preis { display: inline !important; }
/* 1.14: Produktseite – Slider, Navigationszeile, Infoblock in beiden Aufbauten */
.mit-slider .sh-bilder { display: block !important; }
.sh-slider { display: grid; gap: .6rem; }
.sh-slides { position: relative; overflow: hidden; border-radius: var(--radius); background: color-mix(in srgb, var(--flaeche) 70%, transparent); }
.sh-slide { display: none; } .sh-slide.an { display: block; animation: shEin .25s ease; }
@keyframes shEin { from { opacity: .4; } to { opacity: 1; } }
.sh-slide img, .sh-slide video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; margin: 0 auto; }
.sh-slide a { display: block; cursor: zoom-in; }
.sh-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(0,0,0,.82); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; opacity: .9; }
.sh-pfeil:hover, .sh-pfeil:focus-visible { opacity: 1; } .sh-pfeil-l { left: .7rem; } .sh-pfeil-r { right: .7rem; }
.sh-zaehler { position: absolute; bottom: .6rem; right: .7rem; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; }
.sh-thumbs { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: .2rem; }
.sh-thumb { flex: 0 0 86px; height: 86px; padding: 0; border: 2px solid transparent; border-radius: calc(var(--radius) * .6); overflow: hidden; background: none; cursor: pointer; opacity: .7; }
.sh-thumb.an { border-color: var(--akzent); opacity: 1; } .sh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-thumb-video { display: grid; place-items: center; width: 100%; height: 100%; background: #111; color: #fff; font-size: 1.4rem; }
.sh-navblock { padding-top: .6rem; padding-bottom: 0; }
.sh-navzeile { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; font-size: .85rem; }
.sh-navzeile a { color: inherit; text-decoration: none; opacity: .85; } .sh-navzeile a:hover { opacity: 1; text-decoration: underline; }
.sh-pfad { text-align: center; } .sh-nav-blaettern { display: flex; gap: 1rem; justify-content: flex-end; }
@media (max-width: 700px) { .sh-navzeile { grid-template-columns: 1fr 1fr; } .sh-pfad { display: none; } .sh-thumb { flex-basis: 64px; height: 64px; } .sh-pfeil { width: 38px; height: 38px; font-size: 1.3rem; } }
.sh-info:not(.pk-modern) .sh-infoblock { margin: .2rem 0 1rem; font-size: .88rem; line-height: 1.6; display: grid; }
.sh-info:not(.pk-modern) .sh-infoblock div { display: flex; gap: .4rem; } .sh-info:not(.pk-modern) .sh-infoblock dt { font-weight: 600; } .sh-info:not(.pk-modern) .sh-infoblock dd { margin: 0; }
.sh-slider.ws-galerie { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .6rem !important; }
.sh-slider.ws-galerie .sh-slides, .sh-slider.ws-galerie .sh-thumbs { width: 100%; }
/* Produktbeschreibung: so wie im Editor – ohne eigene Ausrichtung linksbündig (unabhängig von „Text mittig“) */
body.sa .ws-text.sh-beschreibung, .ws-text.sh-beschreibung { text-align: left; }
.ws-text.sh-beschreibung .wsa-links { text-align: left; } .ws-text.sh-beschreibung .wsa-mitte { text-align: center; } .ws-text.sh-beschreibung .wsa-rechts { text-align: right; }
.ws-text.sh-beschreibung li.wsa-mitte, .ws-text.sh-beschreibung li.wsa-rechts { list-style-position: inside; }
.sa-banner[data-effekt=links] .sa-banner-bild.an, .sa-banner[data-effekt=rechts] .sa-banner-bild.an { position: relative; z-index: 1; } .sa-banner-bild { will-change: transform; }
/* ---------- Aufbau „Werkstatt mit Seitenmenü“ (Werkstatt-Vorlage): großes Logo oben links, Menü links ---------- */
.layout-seitenleiste { --sl-breite: 300px; }
.layout-seitenleiste .ws-sl-kopf { display: flex; align-items: center; gap: 1.2rem; padding: 0 1.6rem 0 0; background: var(--kopf); border-bottom: 4px solid var(--akzent); position: relative; box-shadow: none; }
.ws-sl-logo { width: var(--sl-breite); flex: none; display: flex; align-items: center; justify-content: center; padding: .9rem 1.2rem; text-decoration: none; color: var(--kopftext); }
.layout-seitenleiste .ws-sl-logo img { display: block; width: 100%; height: auto; max-height: 170px; max-width: none; object-fit: contain; }
.ws-sl-logo span { font-family: var(--titelschrift); font-size: 1.5rem; font-weight: 800; }
.ws-sl-logo img + span { display: none; }
.ws-sl-info { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; justify-content: flex-end; color: color-mix(in srgb, var(--kopftext) 70%, transparent); font-size: .92rem; }
.ws-sl-tel { white-space: nowrap; }
.ws-sl-rahmen { display: grid; grid-template-columns: var(--sl-breite) minmax(0, 1fr); min-height: 70vh; }
.ws-sl-menue { background: var(--primaer); padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: 1rem; }
.ws-sl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.ws-sl-nav li ul { margin: .2rem 0 .3rem .8rem; }
.ws-sl-nav a { display: block; padding: .75rem 1rem; border-radius: calc(var(--radius) * .7); color: color-mix(in srgb, #fff 82%, var(--primaer)); text-decoration: none; font-weight: 700; font-size: 1.04rem; }
.ws-sl-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.ws-sl-nav li.aktiv > a { background: var(--akzent); color: #fff; }
.ws-sl-nav li li a { font-size: .95rem; font-weight: 600; padding: .5rem .9rem; }
.ws-sl-zeiten { border-top: 1px solid rgba(255,255,255,.15); padding: 1rem 1rem 0; color: color-mix(in srgb, #fff 80%, var(--primaer)); font-size: .88rem; line-height: 1.6; display: flex; flex-direction: column; }
.ws-sl-zeiten strong { color: #fff; margin-bottom: .2rem; }
.layout-seitenleiste .ws-inhalt > .ws-innen { width: auto; max-width: calc(var(--breite) - var(--sl-breite)); margin: 0; padding: 1.8rem 2.2rem 2.5rem; }
.layout-seitenleiste .ws-hero { border-radius: var(--radius); background: linear-gradient(120deg, color-mix(in srgb, var(--primaer) 55%, var(--akzent)), var(--akzent)); color: #fff; min-height: 0; }
.layout-seitenleiste .ws-hero.ohne-bild .ws-hero-inhalt { text-align: left; align-items: flex-start; padding: 2rem 2.2rem; max-width: 760px; margin: 0; }
.layout-seitenleiste .ws-hero h1 { color: #fff; }
.layout-seitenleiste .ws-hero .ws-btn-akzent { background: #fff; color: var(--primaer); }
.layout-seitenleiste h1, .layout-seitenleiste h2, .layout-seitenleiste .ws-abschnitt { color: var(--primaer); }
@media (max-width: 860px) {
  .layout-seitenleiste .ws-sl-kopf { padding: .4rem .9rem .4rem 0; }
  .ws-sl-logo { width: auto; max-width: 62vw; padding: .3rem .9rem; } .layout-seitenleiste .ws-sl-logo img { max-height: 74px; width: auto; }
  .ws-sl-info span { display: none; } .ws-sl-tel { padding: .45rem .8rem; font-size: .88rem; }
  .ws-sl-rahmen { grid-template-columns: minmax(0, 1fr); }
  .ws-sl-menue { padding: .5rem; position: sticky; top: 0; z-index: 40; }
  .ws-sl-nav ul { flex-direction: row; overflow-x: auto; gap: .3rem; scrollbar-width: none; } .ws-sl-nav li ul { display: none; }
  .ws-sl-nav a { white-space: nowrap; padding: .5rem .85rem; font-size: .92rem; }
  .ws-sl-zeiten { display: none; }
  .layout-seitenleiste .ws-inhalt > .ws-innen { padding: 1rem .9rem 2rem; max-width: none; }
  .layout-seitenleiste .ws-hero.ohne-bild .ws-hero-inhalt { padding: 1.3rem 1.2rem; }
  .layout-seitenleiste .ws-wischmenue { display: none; }
}