/* ============================================================
   Schloss-Apotheke Marktoberdorf — siteupgra.de Entwurf
   Vanilla, gekapselt im Namespace .sa-page
   Akzent: Tannengrün #0A7233 (Limette #A8C808 nur Highlight)
   Schriften self-hosted (DSGVO): Fraunces · Mulish · Caveat
   ============================================================ */

/* ---------- Self-hosted Fonts (variabel) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-400.woff2') format('woff2');
  font-weight:380 640; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Mulish';
  src:url('../fonts/mulish-400.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Caveat';
  src:url('../fonts/caveat-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Architects Daughter';
  src:url('../fonts/architects-daughter.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
/* SN Pro — Titel-Alternative (self-hosted, DSGVO; 1:1 wie bei Dr. Hofer) */
@font-face{
  font-family:'SN Pro';
  src:url('../fonts/SNPro.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SN Pro';
  src:url('../fonts/SNPro-Italic.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}

/* Kein weißer Außenrand: Body-Standardrand entfernen (Hero geht randlos bis an die Kanten) */
html,body{margin:0;padding:0}
body{background:#F6F7F1}
/* Anker-Sprünge nicht unter den klebenden Header schieben + sanftes Scrollen */
html{scroll-padding-top:clamp(80px, 5.2vw + 12px, 98px);scroll-behavior:smooth}

/* ---------- Tokens + Host-Reset (am Namespace) ---------- */
.sa-page{
  --sa-paper:#F6F7F1;
  --sa-paper-2:#EFF2E5;
  --sa-surface:#FFFFFF;
  --sa-ink:#16241B;
  --sa-ink-soft:#47564C;
  --sa-ink-faint:#5A6960;
  --sa-line:#DEE5D1;
  --sa-green:#0A7233;
  --sa-green-deep:#075A28;
  --sa-green-ink:#0C3A1F;
  --sa-lime:#A8C808;
  --sa-lime-soft:#EAF1C6;

  --sa-font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --sa-font-body:'Mulish',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Handschrift — STANDARD = Architects Daughter; per Umschalter auf Caveat (Labels + Unterschrift) */
  --sa-font-hand:'Architects Daughter',cursive;
  --sa-hand:'Architects Daughter',cursive;
  --sa-hand-wt:400;
  --sa-hand-sz:clamp(1.12rem, 1rem + 0.6vw, 1.45rem);

  --sa-r-sm:.75rem;
  --sa-r:1.25rem;
  --sa-r-lg:1.85rem;
  --sa-shadow:0 22px 60px -34px rgba(12,32,20,.45);
  --sa-shadow-sm:0 12px 30px -22px rgba(12,32,20,.40);
  --sa-container:1180px;

  background:var(--sa-paper);
  color:var(--sa-ink);
  font-family:var(--sa-font-body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.005em;
  overflow-x:clip;
}
/* 0-Spezifität-Resets: lassen klassenbasierte Regeln immer gewinnen */
.sa-page *,.sa-page *::before,.sa-page *::after{box-sizing:border-box}
.sa-page :where(h1,h2,h3,h4,h5,p,figure,ul,ol,blockquote,dl,dd){margin:0}
.sa-page :where(ul,ol){padding:0;list-style:none}
.sa-page :where(img,svg){display:block;max-width:100%}
.sa-page picture{display:contents}
.sa-page :where(a){color:inherit;text-decoration:none}
.sa-page :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sa-page :where(h1,h2,h3,h4){font-family:var(--sa-font-display);font-weight:600;line-height:1.06;letter-spacing:-0.015em;color:var(--sa-ink);text-wrap:balance}
.sa-page :where(p){text-wrap:pretty}

/* ---------- Layout-Helfer ---------- */
.sa-container{width:100%;max-width:var(--sa-container);margin-inline:auto;padding-inline:clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem)}
.sa-section{padding-block:clamp(3.75rem, 2.2rem + 6.6vw, 7rem);position:relative}
.sa-section--tight{padding-block:clamp(2.75rem, 1.8rem + 4vw, 4.5rem)}
.sa-bg-sage{background:var(--sa-paper-2)}
.sa-eyebrow{
  font-family:var(--sa-hand);
  font-weight:var(--sa-hand-wt);
  font-size:var(--sa-hand-sz);
  color:var(--sa-green);
  line-height:1;
  display:inline-block;
  position:relative;
  z-index:0;
  --sa-cloud:rgba(10,114,51,.24);
  margin-bottom:.55rem;
}
/* Weicher Licht-Schleier hinter den Handschrift-Labels (Wölkchen wie Dr. Hofer) */
.sa-eyebrow::before{content:"";position:absolute;z-index:-1;left:50%;top:56%;transform:translate(-50%,-50%);width:calc(100% + 1.4em);height:1.95em;background:radial-gradient(40% 65% at 24% 60%,var(--sa-cloud),transparent 70%),radial-gradient(50% 85% at 52% 42%,var(--sa-cloud),transparent 72%),radial-gradient(34% 58% at 74% 58%,var(--sa-cloud),transparent 70%),radial-gradient(26% 50% at 90% 50%,var(--sa-cloud),transparent 74%);filter:blur(8px);pointer-events:none}
/* Umschalter: Handschrift auf Caveat (Standard ist Architects Daughter) — Labels + Unterschrift */
html[data-accent="caveat"] .sa-page{
  --sa-font-hand:'Caveat','Segoe Script',cursive;
  --sa-hand:'Caveat','Segoe Script',cursive;
  --sa-hand-wt:600;
  --sa-hand-sz:clamp(1.45rem, 1.25rem + 0.85vw, 1.95rem);
}
/* Umschalter: Titelschrift auf SN Pro (Standard ist die Serife Fraunces) */
html[data-title="snpro"] .sa-page{ --sa-font-display:'SN Pro',-apple-system,'Segoe UI',sans-serif }
/* Schrift-Umschalter (Kundenwahl wie bei Hofer/Wanner): Titel + Handschrift. NUR Tablet/Desktop. */
.sa-fontswitch{position:fixed;bottom:22px;left:50%;z-index:60;display:flex;flex-direction:column;gap:7px;background:var(--sa-surface);border:1px solid var(--sa-line);box-shadow:var(--sa-shadow);border-radius:18px;padding:10px 13px;
  transform:translate(-50%,calc(100% + 34px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .42s cubic-bezier(.22,.85,.25,1),opacity .3s ease,visibility 0s linear .42s}
.sa-fontswitch.is-open{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.22,.85,.25,1),opacity .3s ease}
/* „Aa"-Schalter oben rechts: blendet die Leiste ein/aus (nur Tablet/Desktop) */
.sa-fonttoggle{position:fixed;top:calc(clamp(64px,5.2vw,82px) + 14px);right:clamp(1rem,.4rem + 1.4vw,1.75rem);z-index:55;
  width:2.7rem;height:2.7rem;border-radius:50%;background:var(--sa-surface);border:1px solid var(--sa-line);box-shadow:var(--sa-shadow-sm);
  color:var(--sa-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--sa-font-display);font-weight:600;font-size:1.02rem;line-height:1;letter-spacing:.01em;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.sa-fonttoggle:hover{border-color:var(--sa-green);transform:translateY(-1px)}
.sa-fonttoggle:focus-visible{outline:2px solid var(--sa-green-deep);outline-offset:2px}
.sa-fonttoggle[aria-expanded="true"]{background:var(--sa-green);color:#fff;border-color:var(--sa-green)}
@media(prefers-reduced-motion:reduce){.sa-fontswitch{transition:opacity .2s ease,visibility 0s}.sa-fontswitch.is-open{transition:opacity .2s ease}}
.sa-fontswitch__row{display:flex;align-items:center;gap:9px}
.sa-fontswitch__lbl{flex:none;width:7.6em;font-family:var(--sa-font-body);font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--sa-ink-soft)}
.sa-fontswitch button{flex:1;border:1px solid var(--sa-line);background:#fff;color:var(--sa-ink);cursor:pointer;border-radius:999px;padding:.2em .7em;min-height:36px;line-height:1;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease}
.sa-fontswitch button:hover{border-color:var(--sa-green)}
.sa-fontswitch button[aria-pressed="true"]{background:var(--sa-green);color:#fff;border-color:var(--sa-green)}
.sa-titleswitch button[data-title="serif"]{font-family:'Fraunces',serif;font-weight:600;font-size:1.08rem}
.sa-titleswitch button[data-title="snpro"]{font-family:'SN Pro',sans-serif;font-weight:600;font-size:1rem}
.sa-accentswitch button[data-accent="caveat"]{font-family:'Caveat',cursive;font-weight:600;font-size:1.4rem}
.sa-accentswitch button[data-accent="architects"]{font-family:'Architects Daughter',cursive;font-size:1rem}
@media(max-width:680px){.sa-fontswitch,.sa-fonttoggle{display:none}}
.sa-h2{font-size:clamp(2rem, 1.4rem + 2.9vw, 3.35rem);text-wrap:balance}
.sa-lead{font-size:clamp(1.08rem, 1rem + 0.45vw, 1.3rem);color:var(--sa-ink-soft);line-height:1.6;max-width:46ch}
.sa-sec-head{margin-bottom:clamp(2rem, 1.4rem + 1.8vw, 3rem)}
.sa-sec-head .sa-lead{margin-top:.9rem;max-width:56ch}
/* Dieser eine Lead soll auf breiten Schirmen in EINER Zeile stehen (Chris): Breitenkappung weg */
.sa-sec-head .sa-lead--oneline{max-width:none}
/* Botendienst-Lead: 3 statt 4 Zeilen (Chris) — etwas breiter */
#lieferservice .sa-sec-head .sa-lead{max-width:62ch}
.sa-lead-br{display:none} /* bewusster Umbruch nach „frisch" nur im 2-spaltigen Desktop-Kopf */
.sa-sec-head .sa-eyebrow,.sa-about__body .sa-eyebrow{display:inline-block;margin-top:.6rem}
.sa-about__body h2 + p{margin-top:1rem}

/* ---------- Buttons ---------- */
.sa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sa-font-body);font-weight:700;font-size:.98rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:999px;cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:1.5px solid transparent;white-space:nowrap;
}
.sa-btn svg{width:1.1em;height:1.1em;flex:none}
.sa-btn--primary{background:var(--sa-green);color:#fff;box-shadow:0 14px 28px -16px rgba(10,114,51,.7)}
.sa-btn--primary:hover{background:var(--sa-green-deep);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(10,114,51,.75)}
/* Sanftes Schweben — lädt zum Klicken ein; Hover-Anhebung läuft über translate (überlagert das Wippen, statt es zu blockieren) */
.sa-btn--float{animation:sa-btn-float 3.4s ease-in-out infinite;transition:translate .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease}
.sa-btn--float:hover{translate:0 -3px}
@keyframes sa-btn-float{
  0%,100%{transform:translateY(0);box-shadow:0 14px 28px -16px rgba(10,114,51,.7)}
  50%{transform:translateY(-5px);box-shadow:0 24px 34px -18px rgba(10,114,51,.55)}
}
@media(prefers-reduced-motion:reduce){.sa-btn--float{animation:none}}
.sa-btn--lg{padding:1rem 1.85rem;font-size:1.05rem}
.sa-btn--on-green{background:var(--sa-lime);color:var(--sa-green-ink)}
.sa-btn--on-green:hover{background:#fff;transform:translateY(-2px)}
.sa-textlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--sa-green-deep);border-bottom:1.5px solid var(--sa-lime);padding-bottom:1px;transition:gap .2s ease,color .2s ease}
.sa-textlink:hover{gap:.7rem;color:var(--sa-green)}
.sa-textlink svg{width:1em;height:1em}

/* ---------- Header ---------- */
.sa-header{position:sticky;top:0;z-index:60;background:rgba(246,247,241,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease, background .3s ease}
.sa-header.is-stuck{border-bottom-color:var(--sa-line)}
.sa-header__bar{display:flex;align-items:center;gap:1.25rem;height:clamp(64px,5.2vw,82px)}
.sa-brand{display:flex;align-items:center;gap:.65rem;font-family:var(--sa-font-display);font-weight:600;font-size:1.18rem;letter-spacing:-0.01em;color:var(--sa-ink)}
.sa-brand__logo{height:clamp(40px, 2.2rem + 1.4vw, 54px);width:auto;display:block}
.sa-nav{display:none;margin-left:auto;align-items:center;gap:.72rem}
.sa-nav a{font-size:.85rem;font-weight:600;color:var(--sa-ink-soft);letter-spacing:.005em;white-space:nowrap;transition:color .2s ease;position:relative}
.sa-nav a:hover,.sa-nav a.is-active{color:var(--sa-green-deep)}
.sa-nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--sa-lime);border-radius:2px;transition:width .25s ease}
.sa-nav a:hover::after,.sa-nav a.is-active::after{width:100%}
.sa-mobnav a.is-active{color:var(--sa-green-deep)}
.sa-header__cta{display:none;align-items:center;gap:.55rem}
.sa-header__wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--sa-line);color:var(--sa-green-deep);flex:none;transition:background .2s ease,border-color .2s ease}
.sa-header__wa svg{width:1.3em;height:1.3em;fill:var(--sa-green)}
.sa-header__wa:hover{background:var(--sa-lime-soft);border-color:var(--sa-green)}
.sa-burger{margin-left:auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:44px;padding:.6rem;border-radius:.6rem}
.sa-burger span{width:24px;height:2px;background:var(--sa-ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.sa-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sa-burger.is-open span:nth-child(2){opacity:0}
.sa-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sa-mobnav{display:none;flex-direction:column;gap:.25rem;padding:.5rem 0 1.25rem}
.sa-mobnav.is-open{display:flex}
.sa-mobnav a{padding:.7rem .25rem;font-weight:600;font-size:1.05rem;border-bottom:1px solid var(--sa-line);color:var(--sa-ink)}
.sa-mobnav .sa-btn{margin-top:.9rem;justify-content:center}

/* ---------- Live-Status-Chip ---------- */
.sa-status{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--sa-line);border-radius:999px;padding:.42rem .9rem;font-size:.82rem;font-weight:700;box-shadow:var(--sa-shadow-sm);white-space:nowrap}
.sa-status__dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--sa-ink-faint);flex:none;position:relative}
.sa-status[data-open="1"] .sa-status__dot{background:#1f9d4d}
.sa-status[data-open="1"] .sa-status__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #1f9d4d;opacity:.6;animation:sa-pulse 2s ease-out infinite}
.sa-status[data-open="0"] .sa-status__dot{background:#c98a2e}
.sa-status small{color:var(--sa-ink-soft);font-weight:600}
.sa-card .sa-status{display:flex;flex-wrap:wrap;white-space:normal;width:100%;gap:.35rem .7rem;padding:.65rem 1.15rem;font-size:.98rem}
.sa-card .sa-status small{margin-left:auto;text-align:right;font-size:.92rem}
@keyframes sa-pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* ---------- Hero ---------- */
.sa-hero{position:relative;overflow:hidden;min-height:calc(100vh - clamp(64px,5.2vw,82px));min-height:calc(100svh - clamp(64px,5.2vw,82px));display:flex;align-items:center;background-color:#0a2615}
/* A3: Foto auf eigener Ebene (zarter Ken-Burns), Verläufe statisch darüber */
.sa-hero::before{content:"";position:absolute;inset:0;z-index:0;background:url('../img/apo1-hero.webp?v=2') 60% center/cover no-repeat;transform:scale(1.05);will-change:transform;animation:sa-hero-kenburns 32s ease-in-out infinite alternate}
.sa-hero::after{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(90deg, rgba(6,30,16,.62) 0%, rgba(6,30,16,.34) 46%, rgba(6,30,16,.1) 78%, rgba(6,30,16,.02) 100%),linear-gradient(0deg, rgba(6,30,16,.36) 0%, rgba(6,30,16,0) 40%)}
@keyframes sa-hero-kenburns{from{transform:scale(1.05)}to{transform:scale(1.12) translate(-1.4%,-1.2%)}}
.sa-hero__copy{position:relative;max-width:38rem;padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem)}
.sa-hero h1,.sa-hero__metaline,.sa-hero__sub{text-shadow:0 2px 16px rgba(0,0,0,.55)}
.sa-hero__metaline{color:rgba(255,255,255,.84)}
.sa-hero h1{font-size:clamp(2.2rem, 1rem + 3.6vw, 4rem);letter-spacing:-0.028em;line-height:1.04;margin:.7rem 0 0;color:#fff}
.sa-hero__l{display:block;white-space:nowrap}
.sa-hero h1 em{font-style:normal;color:var(--sa-lime)}
.sa-hero__sub{margin-top:1.3rem;font-size:clamp(1.08rem,1rem + 0.5vw,1.32rem);color:rgba(255,255,255,.9);max-width:32rem}
/* Editorial-Meta-Zeile */
.sa-hero .sa-container{position:relative;z-index:2}
.sa-hero__meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.sa-hero__metaline{font-family:var(--sa-font-body);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem}
.sa-hero__dot{width:5px;height:5px;border-radius:50%;background:var(--sa-lime);display:inline-block;flex:none}
/* A3: ruhiger, gestaffelter Auftritt beim Laden */
@keyframes sa-hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sa-hero__meta,.sa-hero__l,.sa-hero__sub{animation:sa-hero-in 1s cubic-bezier(.22,.61,.36,1) both}
.sa-hero__meta{animation-delay:.2s}
.sa-hero__l:nth-child(1){animation-delay:.45s}
.sa-hero__l:nth-child(2){animation-delay:.7s}
.sa-hero__sub{animation-delay:1s}
/* ---------- Eigenprodukte ---------- */
.sa-prod-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.sa-prod{position:relative;background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:1.35rem;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;display:flex;flex-direction:column}
.sa-prod:hover{transform:translateY(-4px);box-shadow:var(--sa-shadow);border-color:transparent}
.sa-prod__img{aspect-ratio:4/3;border-radius:1rem;margin-bottom:.8rem;display:flex;align-items:center;justify-content:center;padding:.9rem;overflow:hidden;background:
   radial-gradient(72% 72% at 50% 38%, #fff 0%, var(--sa-paper-2) 100%);position:relative}
/* B4: weiche Bodenschatten-Ellipse — Flacons stehen statt zu schweben */
.sa-prod__img::after{content:"";position:absolute;left:50%;bottom:11%;transform:translateX(-50%);width:56%;height:8%;border-radius:50%;background:radial-gradient(ellipse at center, rgba(12,32,20,.22), transparent 72%);filter:blur(3px);z-index:0;transition:width .4s ease,opacity .4s ease}
.sa-prod__img img{position:relative;z-index:1;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(12,32,20,.12));transition:transform .4s ease}
.sa-prod__img--sm img{max-height:72%}
.sa-prod:hover .sa-prod__img img{transform:translateY(-4px) scale(1.03)}
.sa-prod:hover .sa-prod__img::after{width:48%;opacity:.7}
.sa-prod__tag{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sa-green);margin-bottom:.6rem}
.sa-prod h3{font-size:1.12rem;line-height:1.14;min-height:2.4em}
.sa-prod p{margin-top:.5rem;color:var(--sa-ink-soft);font-size:.96rem;flex:1}
.sa-prod__foot{margin-top:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sa-prod__foot .sa-textlink{font-size:.92rem}
.sa-shopnote{margin:clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) auto 0;width:max-content;max-width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:.7rem 1.2rem;padding:.7rem .8rem .7rem 1.6rem;background:var(--sa-lime-soft);border:1px solid var(--sa-line);border-radius:999px;box-shadow:var(--sa-shadow-sm)}
.sa-shopnote__ic{width:1.45rem;height:1.45rem;color:var(--sa-green);flex:none}
.sa-shopnote p{font-family:var(--sa-font-display);font-weight:600;font-size:clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);line-height:1.18;letter-spacing:-0.01em;color:var(--sa-green-deep);max-width:none;margin:0}
@media(max-width:520px){.sa-shopnote{width:auto;border-radius:var(--sa-r);padding:1.1rem 1.2rem}}
/* Eigenprodukte-Karussell — läuft automatisch durch, pausiert bei Hover/Touch */
.sa-epcar{margin-top:clamp(1.5rem, 1rem + 2vw, 2.5rem);position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.sa-epcar__track{display:flex;align-items:stretch;width:max-content;list-style:none;margin:0;padding:.85rem 0 1.6rem;
  animation:sa-epcar-marquee var(--epdur,72s) linear infinite;will-change:transform}
.sa-epcar:hover .sa-epcar__track,.sa-epcar.is-paused .sa-epcar__track{animation-play-state:paused}
.sa-epcard{flex:0 0 auto;width:clamp(216px,76vw,244px);margin-right:1.25rem}
.sa-epcard .sa-prod__img{aspect-ratio:3/4;margin-bottom:1rem}
.sa-epcard h3{min-height:2.3em}
@keyframes sa-epcar-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .sa-epcar{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
  .sa-epcar__track{animation:none}
  .sa-epcard{scroll-snap-align:center}
}

/* ---------- Leistungen ---------- */
.sa-serv-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.sa-serv{background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:1.6rem;transition:transform .3s ease,box-shadow .3s ease}
.sa-serv:hover{transform:translateY(-4px);box-shadow:var(--sa-shadow-sm)}
.sa-serv__ic{width:46px;height:46px;border-radius:.85rem;background:var(--sa-lime-soft);color:var(--sa-green-deep);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.sa-serv:hover .sa-serv__ic{background:var(--sa-green);color:#fff;transform:translateY(-3px) scale(1.08) rotate(-4deg)}
.sa-serv__ic svg{width:24px;height:24px}
.sa-serv h3{font-size:1.2rem}
.sa-serv-more{margin-top:clamp(1.25rem,1rem + 1vw,1.85rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem .75rem}
.sa-serv-more__lbl{font-family:var(--sa-font-body);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-ink-faint)}
.sa-serv-more__chip{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;color:var(--sa-green-deep);background:#fff;border:1px solid var(--sa-line);border-radius:999px;padding:.4rem .95rem;box-shadow:0 6px 16px -11px rgba(12,32,20,.25);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.sa-serv-more__chip::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--sa-lime);flex:none;transition:transform .25s ease}
.sa-serv-more__chip:hover{background:var(--sa-green);color:#fff;border-color:var(--sa-green);transform:translateY(-2px)}
.sa-serv-more__chip:hover::before{transform:scale(1.25)}
/* „Offene Frage"-Chip (Demo): bernsteinfarben/gestrichelt markiert, bis Fumian es bestätigt */
.sa-serv-more__chip--q{border-style:dashed;border-color:#d9a52a;color:#8a6212;background:#fff4d6}
.sa-serv-more__chip--q::before{background:#d9a52a}
.sa-serv-more__qmark{font-weight:800;margin-left:.15rem}
.sa-serv-more__chip--q:hover{background:#fdeec2;color:#7a5610;border-color:#d9a52a;transform:translateY(-2px)}
.sa-serv-more__chip--q:hover::before{background:#d9a52a;transform:scale(1.25)}
/* Schwerpunkte-Stichwortleiste (Sortiment) */
.sa-focus{margin-bottom:clamp(1.6rem,1.1rem + 2vw,2.6rem)}
#sortiment .sa-sec-head{margin-bottom:clamp(1rem, .7rem + 1vw, 1.5rem)}
.sa-focus__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
@media(min-width:1140px){.sa-focus__list{display:grid;grid-template-columns:repeat(6,max-content);justify-content:start}}
.sa-focus__list li{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sa-font-body);font-weight:700;font-size:.92rem;color:var(--sa-green-deep);background:#fff;border:1px solid var(--sa-line);border-radius:999px;padding:.5rem 1.05rem;box-shadow:0 6px 16px -11px rgba(12,32,20,.25);transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.sa-focus__list li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--sa-lime);flex:none;transition:transform .25s ease}
.sa-focus__list li:hover{background:var(--sa-green);color:#fff;border-color:var(--sa-green);box-shadow:0 14px 26px -12px rgba(10,114,51,.5);transform:translateY(-2px)}
.sa-focus__list li:hover::before{transform:scale(1.25)}
.sa-serv p{margin-top:.45rem;color:var(--sa-ink-soft);font-size:.95rem}

/* ---------- Botendienst: Lieferservice (Breitband-Bühne) ---------- */
/* Liefer-Smart fährt von links durchs Bild, verschwindet rechts, kommt wieder — mit drehenden Rädern */
.sa-smart{margin:0;width:100%;max-width:480px;margin-inline:auto;aspect-ratio:1;border-radius:var(--sa-r-lg);overflow:hidden;border:1px solid var(--sa-line);box-shadow:var(--sa-shadow);position:relative;background:radial-gradient(58% 54% at 50% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), radial-gradient(125% 105% at 50% 50%, rgba(12,32,20,0) 50%, rgba(12,32,20,.15) 100%), linear-gradient(180deg,#eef2ee 0%,#e3eae1 100%)}
.sa-smart__car{position:absolute;left:0;bottom:18%;width:72%;z-index:2;will-change:transform;animation:sa-smart-drive 7s linear infinite}
.sa-smart__car picture img{display:block;width:100%;height:auto;filter:drop-shadow(0 7px 7px rgba(12,32,20,.18))}
.sa-smart__car::after{content:"";position:absolute;left:5%;right:5%;bottom:-5%;height:10%;background:radial-gradient(50% 50% at 50% 50%, rgba(12,32,20,.38), transparent 70%);filter:blur(2px)} /* satter Bodenschatten */
.sa-smart__wheel{position:absolute;display:block;height:auto;transform-origin:50% 50%;animation:sa-wheel-spin 1.1s linear infinite;will-change:transform}
.sa-smart__wheel--rear{width:16%;left:7.4%;top:69%}
.sa-smart__wheel--front{width:15.3%;left:77.4%;top:66.8%}
@keyframes sa-smart-drive{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes sa-wheel-spin{to{transform:rotate(360deg)}}
/* ---- Lieferservice: flacher Breitband-Auftritt ---- */
.sa-sec-head--flush{margin-bottom:0}
.sa-smart--wide{max-width:none;width:100%;aspect-ratio:22/5;margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);container-type:size;
  background:
    radial-gradient(38% 122% at 53% 72%, rgba(255,255,255,.62), rgba(255,255,255,0) 68%),
    radial-gradient(72% 95% at 50% 126%, rgba(10,114,51,.13), rgba(10,114,51,0) 72%),
    linear-gradient(180deg,#e6ece6 0%,#eef3ef 46%,#dae3d9 100%);
  box-shadow:var(--sa-shadow), inset 0 16px 34px -22px rgba(12,32,20,.30), inset 0 -22px 46px -26px rgba(12,32,20,.34)}
.sa-smart--wide .sa-smart__car{left:0;bottom:9%;width:auto;height:82%;animation:sa-smart-drive-wide 12s linear infinite}
.sa-smart--wide .sa-smart__car picture img{width:auto;height:100%}
@keyframes sa-smart-drive-wide{from{transform:translateX(-135%)}to{transform:translateX(345%)}}

/* ---- Magic: Tiefe, Fahrt-Schweif & geschlepptes „Frei Haus"-Transparent ---- */
/* weicher Lichtdunst-Schweif hinterm Heck (KEINE gezeichneten Linien) */
.sa-smart--wide .sa-smart__car::before{content:"";position:absolute;right:72%;bottom:1%;width:120%;height:36%;z-index:-1;background:radial-gradient(62% 100% at 100% 60%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);filter:blur(7px);opacity:.6;pointer-events:none}
/* satterer Kontaktschatten = Auto steht im Licht, schwebt nicht */
.sa-smart--wide .sa-smart__car::after{left:2%;right:6%;bottom:-3%;height:13%;background:radial-gradient(50% 50% at 48% 50%, rgba(12,32,20,.42), transparent 72%)}
/* das Transparent hängt am Heck und flattert wie ein Flugzeug-Banner */
.sa-smart__banner{position:absolute;top:32%;right:107%;width:104%;height:42%;z-index:-1;transform-origin:100% 50%;filter:drop-shadow(0 1.3cqh 1.4cqh rgba(12,32,20,.4));animation:sa-banner-sway 2.6s ease-in-out infinite}
.sa-smart__banner-flag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 25% 0 9%;background:linear-gradient(180deg,#0c8f40,#0A7233 58%,#086a2e);color:#fff;font-family:var(--sa-font-display);font-weight:600;font-size:11cqh;line-height:1.04;letter-spacing:.04em;border-top:1cqh solid var(--sa-lime);clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);transform-origin:100% 50%;animation:sa-banner-wave 1.7s ease-in-out infinite}
/* Halterung = dreieckige Leitspitze (clip-path). Drehachse auf der Spitze → ruhiger Leinen-Ansatz. */
/* Halteleine: spannt vom Banner-Tip (links) zum Heck-Punkt UNTER DEM RÜCKLICHT (x≈7,6% y≈53% der Auto-Box)
   und flattert (animierte Wellen-Kurve, keine starre Leine). */
.sa-smart__leash{position:absolute;left:-7%;top:49%;width:14.6%;height:9%;z-index:-1;overflow:visible}
.sa-smart__leash svg{display:block;width:100%;height:100%;overflow:visible}
.sa-smart__leash path{fill:none;stroke:rgba(12,32,20,.55);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:sa-leash-wave 2.3s ease-in-out infinite}
/* Enden fest verknotet (Spitze links / Heck rechts), nur der Bauch schwingt */
@keyframes sa-leash-wave{0%,100%{d:path("M0 9 Q50 13 100 10")}50%{d:path("M0 9 Q50 5 100 10")}}
@keyframes sa-banner-sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(1.6deg)}}
@keyframes sa-banner-wave{0%,100%{transform:skewY(-1.5deg)}50%{transform:skewY(1.5deg)}}
.sa-zonecards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:clamp(1.5rem,1rem + 2vw,2.25rem)}
.sa-zonecard{background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;transition:transform .3s ease,box-shadow .3s ease}
.sa-zonecard:hover{transform:translateY(-3px);box-shadow:var(--sa-shadow-sm)}
/* Assoziations-Symbole: zweimal fahren wir selbst (Smart), einmal verschicken wir (DHL-Paket, DHL-Gelb) */
.sa-zonecard__ic{position:relative;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:999px;margin-bottom:.85rem;background:rgba(10,114,51,.10);color:var(--sa-green-deep)}
.sa-zonecard__ic svg{width:1.65rem;height:1.65rem;transition:transform .3s ease}
.sa-zonecard__ic--radius::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px dashed rgba(10,114,51,.35)}
.sa-zonecard__ic--dhl{background:#FFCC00;color:#3a2c00}
.sa-zonecard:hover .sa-zonecard__ic--car svg{transform:translateX(3px)}
.sa-zonecard:hover .sa-zonecard__ic--dhl svg{transform:translateY(-3px)}
.sa-zonecard__name{font-family:var(--sa-font-display);font-weight:700;font-size:1.12rem;line-height:1.1;color:var(--sa-ink)}
.sa-zonecard__sub{font-size:.85rem;color:var(--sa-ink-soft)}
.sa-zonecard__price{font-family:var(--sa-font-display);font-weight:700;font-size:1.5rem;color:var(--sa-green-deep);margin-top:.4rem}
.sa-zonecard .sa-areas{margin-top:.7rem;text-align:center;width:100%}
/* Liefer-Versprechen: zwei gleichwertige Häkchen-Zeilen zwischen Bühne und Preisen (kein Kasten) */
.sa-deliver-promises{display:flex;flex-direction:column;gap:.6rem;width:fit-content;max-width:100%;margin:clamp(1.6rem,1.1rem + 2vw,2.6rem) auto clamp(.2rem,0rem + .8vw,.7rem)}
.sa-promise{display:flex;align-items:flex-start;gap:.65rem;margin:0;font-size:1.06rem;line-height:1.5;color:var(--sa-ink);text-align:left}
.sa-promise svg{flex:none;width:1.25rem;height:1.25rem;color:var(--sa-green);margin-top:.2rem}
.sa-promise strong{color:var(--sa-green-deep);font-weight:700;white-space:nowrap}
.sa-promise__fine{color:var(--sa-ink-soft)}
@media(min-width:760px){
  .sa-zonecards{grid-template-columns:repeat(3,1fr)}
  .sa-lead-br{display:inline}
}
@media(max-width:680px){
  /* Handy: Szene skaliert, Smart fährt durch (wie Desktop) — Angebot steht zusätzlich im Satz darunter.
     Banner-Text kleiner, damit er nicht an den Rändern klebt. */
  .sa-smart--wide{aspect-ratio:9/5}
  .sa-smart--wide .sa-smart__car{height:56%;bottom:13%}
  .sa-smart__banner{right:104%;width:94%;height:52%;top:28%}
  .sa-smart__banner-flag{font-size:8cqh;padding:0 26% 0 13%}
  .sa-smart__leash{left:-4%;width:11.6%;top:52%}
  /* Ortsliste: Block zentriert (Einträge bleiben linksbündig) statt am linken Rand.
     Höhere Spezifität, damit die spätere Basis-Regel (.sa-areas__list, 20px links) nicht gewinnt. */
  .sa-zonecard .sa-areas__list{margin:.85rem auto 0;width:fit-content;max-width:100%}
}
/* Grüner „Fehlt was?"-Kasten im Kopf */
/* „Nachlieferungen kostenlos" — kein Kasten mehr: schlichte 2-tier-Typo mit Limetten-Akzent */
/* „Zugehörige Orte"-Aufklapper in der Umkreis-Karte */
.sa-areas{margin-top:0}
.sa-areas summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5em;font-family:var(--sa-font-body);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--sa-green-deep)}
.sa-areas summary::-webkit-details-marker{display:none}
.sa-areas summary::after{content:"+";font-size:1.25em;font-weight:700;line-height:0;color:var(--sa-green)}
.sa-areas[open] summary::after{content:"–"}
.sa-areas__list{list-style:none;margin:.85rem 0 0 20px;padding:0;display:grid;grid-template-columns:1fr;gap:.5rem;text-align:left}
.sa-areas__list li{font-size:.82rem;color:var(--sa-ink-soft);line-height:1.3}
.sa-areas__list li b{display:inline-block;min-width:3.4em;color:var(--sa-green-deep);font-weight:700;font-variant-numeric:tabular-nums}
/* Stadtgebiet: 14 Orte (alle PLZ 87616 → ohne PLZ) in 2 Spalten à 7 Zeilen, spaltenweise A–H | I–W.
   Führender Mittelpunkt „· " vor jedem Ort (derselbe wie rechts zwischen den Orten). */
.sa-areas__list--towns{grid-template-columns:minmax(0,max-content) minmax(0,max-content);grid-template-rows:repeat(7,auto);grid-auto-flow:column;justify-content:center;column-gap:clamp(1rem, -1.6rem + 5vw, 3rem);row-gap:.5rem;margin:.85rem 0 0}
.sa-areas__list--towns li::before{content:"·";margin-right:.45em}
/* DHL-Karte: Deutschland-Karte, ein Paket reist zufällig quer durchs Land (JS: deliveryMap).
   Erscheint nur, wenn eine Nachbarkarte aufgeklappt ist (.sa-zonecards.has-open). */
.sa-dhlmap{display:none;flex:1 1 auto;align-items:center;justify-content:center;width:100%;margin-top:.7rem}
.sa-zonecards.has-open .sa-dhlmap{display:flex}
.sa-dhlmap svg{height:100%;max-height:220px;width:auto;max-width:100%;overflow:visible}
.dm-de{fill:rgba(10,114,51,.06);stroke:var(--sa-green);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.dm-home{fill:var(--sa-green)}
.dm-home-ring{fill:none;stroke:var(--sa-green);stroke-width:1;animation:dm-pulse 2.4s ease-out infinite}
@keyframes dm-pulse{0%{r:3;opacity:.55}100%{r:12;opacity:0}}
.dm-ping{fill:none;stroke:var(--sa-green);stroke-width:1.1;opacity:0}
.dm-parcel{opacity:0;filter:drop-shadow(0 .7px 1px rgba(12,32,20,.4))}


/* ---------- Über uns / Heritage ---------- */
.sa-about{display:grid;grid-template-columns:1fr;gap:clamp(2rem,1rem + 4vw,3.5rem);align-items:center}
.sa-about__figure{position:relative}
.sa-about__media{position:relative;display:flex;justify-content:center}
/* Porträt Martin Fumian (mfml.png) statt reinem Logo */
.sa-about__person{position:relative;z-index:1;width:auto;height:clamp(360px, 24rem + 6vw, 520px);max-width:100%;margin-inline:auto;display:block}
.sa-about__media:has(.sa-about__person){padding-block:0 1.25rem}
.sa-about__media:has(.sa-about__person)::before{content:none}
.sa-about__body p+p{margin-top:1rem}
.sa-about__sign{position:absolute;left:2%;bottom:8%;z-index:2;font-family:'Caveat','Segoe Script',cursive;font-size:1.8rem;color:var(--sa-green-deep)}
.sa-about__sign small{display:block;text-align:center;font-family:var(--sa-font-body);font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--sa-ink-faint);text-transform:uppercase}
/* A1: Unterschrift „schreibt sich" beim Reinscrollen (Caveat, fest); „Inhaber" blendet danach nach */
.sa-about__sign-name{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.65,0,.35,1)}
.sa-about__sign small{opacity:0;transform:translateY(5px);transition:opacity .55s ease 1.15s, transform .55s ease 1.15s}
.sa-about__media.is-in .sa-about__sign-name{clip-path:inset(0 0 0 0)}
.sa-about__media.is-in .sa-about__sign small{opacity:1;transform:none}

/* ---------- Unser Team ---------- */
.sa-team{margin-top:clamp(3rem,2rem + 3vw,5.5rem)}
.sa-team__head{text-align:center;max-width:64ch;margin:0 auto clamp(1.6rem,1rem + 2vw,2.6rem)}
.sa-team__head .sa-lead{margin:.9rem auto 0;max-width:60ch}
.sa-team__group{position:relative;margin:0 0 clamp(.9rem,.5rem + 1.3vw,1.4rem);border-radius:var(--sa-r-lg);overflow:hidden;border:1px solid var(--sa-line);box-shadow:var(--sa-shadow-sm)}
.sa-team__group img{display:block;width:100%;height:auto;transform:scale(1.06);transition:transform 1.5s cubic-bezier(.22,.61,.36,1)}
.sa-team__group.is-in img{transform:none}
.sa-team__group figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.7rem 1.2rem .85rem;font-family:var(--sa-font-body);font-size:.92rem;font-weight:700;letter-spacing:.01em;color:#fff;background:linear-gradient(to top,rgba(9,26,16,.8) 6%,rgba(9,26,16,.45) 45%,rgba(9,26,16,0))}
.sa-team__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.6rem,.35rem + .9vw,1rem)}
.sa-teamcard{position:relative;flex:0 1 calc(50% - .5rem);border-radius:var(--sa-r);overflow:hidden;background:var(--sa-line);box-shadow:var(--sa-shadow-sm);
  opacity:0;transform:translateY(46px) scale(.9);
  transition:opacity 1s ease var(--d,0s),transform 1.3s cubic-bezier(.34,1.3,.42,1) var(--d,0s),box-shadow .3s ease}
.sa-teamcard.is-in{opacity:1;transform:none}
.sa-teamcard__ph{aspect-ratio:3/4;overflow:hidden}
.sa-teamcard__ph img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.86) saturate(.65);transition:filter 1.9s ease var(--d,0s),transform .5s cubic-bezier(.22,.61,.36,1)}
.sa-teamcard.is-in .sa-teamcard__ph img{filter:none}
.sa-teamcard__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.06rem;padding:1.5rem .95rem .8rem;color:#fff;background:linear-gradient(to top,rgba(9,26,16,.85) 8%,rgba(9,26,16,.5) 48%,transparent 100%)}
.sa-teamcard__cap b{font-family:var(--sa-font-body);font-weight:800;font-size:1.05rem;line-height:1.16;letter-spacing:.005em}
.sa-teamcard__cap span{font-family:var(--sa-font-body);font-size:.78rem;font-weight:600;letter-spacing:.03em;opacity:.82}
.sa-teamcard__cap span:empty{display:none} /* Rolle noch offen → nur Name zeigen */
.sa-teamcard:nth-child(2){--d:.33s}
.sa-teamcard:nth-child(3){--d:.66s}
.sa-teamcard:nth-child(4){--d:.99s}
.sa-teamcard:nth-child(5){--d:1.32s}
@media(hover:hover){
  .sa-teamcard:hover{box-shadow:var(--sa-shadow)}
  .sa-teamcard:hover .sa-teamcard__ph img{transform:scale(1.05)}
}
@media(min-width:560px){.sa-teamcard{flex-basis:calc(33.333% - .7rem)}}
@media(min-width:900px){.sa-teamcard{flex-basis:calc(20% - .8rem)}}
/* Handy/klein: statt mehrreihigem Raster ein seitliches Wisch-Karussell (eine Reihe, Einrasten, nächste Karte lugt hervor) */
@media(max-width:680px){
  .sa-team__grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.4rem;scrollbar-width:none}
  .sa-team__grid::-webkit-scrollbar{display:none}
  .sa-teamcard{flex:0 0 70%;max-width:none;scroll-snap-align:center;opacity:1;transform:none}
  .sa-teamcard__ph img{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .sa-team__group img,.sa-teamcard__ph img{filter:none;transform:none;transition:none}
  .sa-teamcard{opacity:1;transform:none;transition:box-shadow .3s ease}
}

/* ---------- Sortiment ---------- */
.sa-cat-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
.sa-cat{position:relative;display:flex;flex-direction:column;border-radius:var(--sa-r);padding:1.6rem;border:1px solid var(--sa-line);background:#fff;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.sa-cat:hover{transform:translateY(-4px);box-shadow:var(--sa-shadow-sm)}
.sa-cat__icon{width:46px;height:46px;object-fit:contain;margin-bottom:.85rem}
.sa-cat h3{font-size:1.2rem}
.sa-cat p{margin-top:.5rem;color:var(--sa-ink-soft);font-size:.95rem}
.sa-cat__foot{margin-top:auto;padding-top:1.2rem}
.sa-cat__rx{position:absolute;top:1.6rem;right:1.6rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sa-green-deep);background:var(--sa-lime-soft);border:1px solid rgba(10,114,51,.28);border-radius:999px;padding:.25rem .65rem}

/* ---------- Bewertungen (Kundenstimmen · Google) ---------- */
.sa-reviews__head{text-align:center;margin-bottom:clamp(1.75rem,1.2rem + 1.8vw,2.75rem)}
.sa-reviews__head .sa-eyebrow{display:inline-block}
.sa-reviews__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
/* Ein Google-Badge (kompakter als Hofers zwei Quellen) */
.sa-rvbadge{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.5rem .9rem;max-width:100%;background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:.7rem 1.4rem;box-shadow:var(--sa-shadow-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.sa-rvbadge:hover{transform:translateY(-3px);box-shadow:var(--sa-shadow);border-color:transparent}
.sa-rvbadge__plat{font-family:var(--sa-font-body);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;color:#4285F4}
.sa-rvbadge__stars{display:inline-flex;gap:2px}
.sa-rvbadge__stars svg{width:1.15rem;height:1.15rem;fill:#E8A21C}
.sa-rvbadge__score{font-family:var(--sa-font-display);font-weight:700;font-size:1.55rem;line-height:1;color:var(--sa-green-deep)}
.sa-rvbadge__meta{font-size:.86rem;font-weight:700;letter-spacing:.02em;color:var(--sa-ink-soft)}
/* Sanft umblätternde Zitat-Bühne (eigene Bewegung: rotateX-Flip) */
.sa-rvquote{max-width:660px;width:100%;margin:0;text-align:center;min-height:11rem;display:flex;flex-direction:column;justify-content:center;perspective:1400px}
.sa-rvquote__inner{transform-origin:center top;backface-visibility:hidden;will-change:transform}
.sa-rvquote__inner.is-flip{animation:sa-rvturn .82s cubic-bezier(.42,0,.25,1)}
@keyframes sa-rvturn{0%{transform:rotateX(0);filter:brightness(1)}48%{transform:rotateX(-90deg);filter:brightness(.82)}52%{transform:rotateX(90deg);filter:brightness(.82)}100%{transform:rotateX(0);filter:brightness(1)}}
.sa-rvquote__text{font-family:var(--sa-font-display);font-style:italic;font-size:clamp(1.22rem,1.05rem + .8vw,1.6rem);line-height:1.5;letter-spacing:-.005em;color:var(--sa-ink);margin:0;text-wrap:balance}
.sa-rvquote__who{margin-top:1rem;font-family:var(--sa-font-body);font-style:normal;font-size:.9rem;font-weight:700;letter-spacing:.03em;color:var(--sa-ink-soft)}
@media(max-width:560px){.sa-rvquote{min-height:15rem}}

/* ---------- Notdienst-Band ---------- */
.sa-notdienst{background:var(--sa-green);color:#eaf3ec;border-radius:var(--sa-r-lg);padding:clamp(2.4rem, 1.6rem + 3vw, 3.6rem);position:relative;overflow:hidden}
.sa-notdienst__grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative;z-index:1}
.sa-notdienst h2{color:#fff;font-size:clamp(1.5rem, 2.6vw, 2.2rem)}
.sa-notdienst p{margin-top:.6rem;color:#d4e6d8;max-width:58ch}
/* A2: echtes Logo-Ginkgo als sacht atmendes Nacht-Wasserzeichen */
.sa-notdienst__leaf{position:absolute;right:14%;bottom:-6%;width:min(42%,360px);height:auto;z-index:0;opacity:.12;transform-origin:50% 50%;pointer-events:none;animation:sa-leaf-breathe 7s ease-in-out infinite}
@keyframes sa-leaf-breathe{0%,100%{opacity:.08;transform:scale(1) rotate(0deg)}50%{opacity:.17;transform:scale(1.05) rotate(.8deg)}}
.sa-notdienst__actions{display:flex;flex-wrap:wrap;gap:.8rem}
.sa-notdienst small{display:block;margin-top:.9rem;color:#d7e8db;font-size:.82rem}

/* ---------- Kontakt ---------- */
.sa-contact-person{display:flex;align-items:center;gap:.95rem;margin-top:1.15rem}
.sa-contact-person img{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--sa-line);box-shadow:var(--sa-shadow-sm);flex:none}
.sa-contact-person p{font-size:.96rem;color:var(--sa-ink-soft);line-height:1.45;max-width:42ch}
.sa-contact-person b{display:block;font-family:var(--sa-font-display);font-weight:600;font-size:1.08rem;color:var(--sa-ink);line-height:1.1}
.sa-contact-person--lg{gap:1.05rem}
.sa-contact-person--lg img{width:73px;height:73px}
.sa-contact-person--lg b{font-size:1.2rem}
.sa-contact-person--lg p{font-size:1.07rem}
.sa-nowrap{white-space:nowrap}
.sa-contact{display:grid;grid-template-columns:1fr;gap:1.25rem;grid-template-areas:"head" "person" "info" "map"}
.sa-contact__head{grid-area:head;margin-bottom:0}
.sa-contact > .sa-contact-person{grid-area:person;margin-top:0}
.sa-infopanel{grid-area:info;background:#fff;border:1px solid var(--sa-line);border-radius:var(--sa-r);overflow:hidden}
.sa-infopanel .sa-card{border:0;border-radius:0;background:transparent}
.sa-infopanel .sa-card--hours{border-top:1px solid var(--sa-line)}
.sa-card{background:#fff;border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:1.6rem}
.sa-card h3{font-size:1.2rem;margin-bottom:.9rem}
.sa-contact__row{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--sa-line)}
.sa-contact__row:last-child{border-bottom:0}
.sa-contact__row svg{width:20px;height:20px;color:var(--sa-green);flex:none;margin-top:3px}
.sa-contact__row b{display:block;font-weight:800}
.sa-contact__row span{color:var(--sa-ink-soft);font-size:.95rem}
.sa-contact__row a{color:var(--sa-green-deep);font-weight:700}
.sa-hours{display:grid;gap:.35rem}
.sa-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.95rem;border-bottom:1px dashed var(--sa-line)}
.sa-hours li:last-child{border-bottom:0}
.sa-hours li.is-today{background:var(--sa-lime-soft);margin-inline:-.6rem;padding-inline:.6rem;border-radius:.5rem;border-bottom-color:transparent;font-weight:700}
.sa-hours span:first-child{color:var(--sa-ink-soft)}
.sa-hours .sa-closed{color:var(--sa-ink-faint)}
.sa-map{grid-area:map;position:relative;display:flex;flex-direction:column;border-radius:var(--sa-r);overflow:hidden;border:1px solid var(--sa-line)}
.sa-map__frame{flex:1 1 auto;width:100%;min-height:clamp(300px, 40vw, 440px);border:0;display:block;filter:grayscale(.22) contrast(1.03) saturate(1.03)}
.sa-map__route{position:absolute;right:clamp(.85rem, .5rem + .7vw, 1.15rem);bottom:clamp(.85rem, .5rem + .7vw, 1.15rem);z-index:2;box-shadow:0 10px 28px -8px rgba(8,28,16,.55)}

/* ---------- Footer ---------- */
.sa-footer{background:var(--sa-green-ink);color:#cfe0d3;position:relative;overflow:hidden}
.sa-footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sa-footer > *{position:relative;z-index:1}
.sa-footer__grid{display:grid;grid-template-columns:1fr;gap:2.25rem;padding-block:clamp(3rem, 2.2rem + 3.4vw, 4.75rem)}
.sa-footer__brand{position:relative}
.sa-footer__logowrap{display:block}
.sa-footer__mark{display:block;width:min(46%,175px);height:auto;opacity:.9;margin-bottom:1rem;pointer-events:none;user-select:none}
@media(max-width:859px){.sa-footer__grid{grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:1.75rem;align-items:start}.sa-footer__brand,.sa-footer__logowrap{display:contents}.sa-footer__mark{grid-column:1;grid-row:1;align-self:center;width:100%;max-width:190px;margin:0}.sa-footer__contact{grid-column:2;grid-row:1;align-self:center}.sa-footer__tagline{position:static;grid-column:1 / -1;grid-row:2;margin:0}.sa-footer .sa-footer__contact li{white-space:normal}}
.sa-footer p{margin-top:0;font-size:.92rem;line-height:1.6;color:#b6cdbb;max-width:34ch}
.sa-footer h4{font-family:var(--sa-font-body);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9dbaa3;margin-bottom:.9rem}
.sa-footer a{color:#dcebe0;font-size:.95rem;transition:color .2s ease}
.sa-footer a:hover{color:var(--sa-lime)}
.sa-footer ul{display:grid;gap:.5rem;font-size:.95rem;line-height:1.55}
.sa-footer ul li,.sa-footer ul a{white-space:nowrap}
.sa-footer__tagline{margin-top:0}
.sa-footer__tagline p{max-width:none;margin:0;color:var(--sa-lime);letter-spacing:.02em;font-weight:600;font-size:1.2rem;white-space:normal}
.sa-footer__bar{border-top:1px solid rgba(255,255,255,.12);padding-block:1.25rem;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;font-size:.84rem;color:#9dbaa3}
.sa-footer__bar a{color:#9dbaa3}
.sa-footer__bar em{font-style:normal}

/* ---------- Reveal ---------- */
.sa-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.sa-reveal.is-in{opacity:1;transform:none}
.sa-reveal[data-d="1"]{transition-delay:.08s}
.sa-reveal[data-d="2"]{transition-delay:.16s}
.sa-reveal[data-d="3"]{transition-delay:.24s}

/* ---------- Skip-Link / a11y ---------- */
.sa-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sa-green);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 .6rem 0;font-weight:700}
.sa-skip:focus{left:0}
.sa-page :where(a,button):focus-visible{outline:3px solid var(--sa-green-deep);outline-offset:2px;box-shadow:0 0 0 3px var(--sa-lime);border-radius:6px}

/* ---------- Legal pages ---------- */
.sa-legal{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.sa-legal__wrap{max-width:780px}
.sa-legal h1{font-size:clamp(2rem,1.5rem + 2vw,2.8rem);margin-bottom:1.5rem}
.sa-legal h2{font-size:1.3rem;margin:2.2rem 0 .6rem;color:var(--sa-green-deep)}
.sa-legal p{color:var(--sa-ink-soft);margin-bottom:.7rem}
.sa-legal a{color:var(--sa-green-deep);font-weight:700;text-decoration:underline;text-decoration-color:var(--sa-lime)}
.sa-legal strong{color:var(--sa-ink)}
.sa-legal .sa-ph{background:#fff4d6;border:1px dashed #d9a52a;color:#8a6212;padding:.1rem .4rem;border-radius:.35rem;font-weight:700;font-size:.92em}

/* ============================================================
   Responsive
   ============================================================ */
@media(min-width:560px){
  .sa-prod-grid{grid-template-columns:repeat(2,1fr)}
  .sa-cat-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .sa-hero::after{background-image:linear-gradient(180deg, rgba(6,30,16,.48) 0%, rgba(6,30,16,.54) 45%, rgba(6,30,16,.72) 100%)}
}
@media(min-width:860px){
  .sa-about{grid-template-columns:1.1fr .9fr}
  .sa-about__body{order:1}
  .sa-about__media{order:2}
  .sa-notdienst__grid{grid-template-columns:1.7fr 1fr;align-items:center}
  .sa-notdienst__actions{justify-self:end}
  .sa-serv-grid{grid-template-columns:repeat(2,1fr)}
  .sa-contact{grid-template-columns:5fr 7fr;grid-template-areas:"person head" "info map";column-gap:clamp(1.5rem, 1rem + 1.6vw, 2.5rem);align-items:start}
  .sa-contact > .sa-contact-person{align-self:end;align-items:flex-end}
  .sa-contact__head{align-self:end;margin-left:0;text-align:left}
  .sa-map{align-self:stretch;height:100%}
  .sa-footer__grid{grid-template-columns:1.5fr 1.2fr 1fr 1fr}
  .sa-footer__logowrap{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-50% + 3px));width:min(120%,360px)}
  .sa-footer__mark{width:100%;opacity:.52;filter:saturate(.9) brightness(1.12);margin-bottom:0}
  .sa-footer__tagline{position:absolute;bottom:calc(8% - 15px);left:21%;width:max-content;max-width:85vw;margin-top:0}
  .sa-footer__grid > div:not(.sa-footer__brand){padding-left:40px}
  .sa-footer__tagline p{white-space:normal}
}
@media(min-width:1100px){
  .sa-nav{display:flex}
  .sa-header__cta{display:flex}
  .sa-burger{display:none}
}
@media(max-width:1099px){
  .sa-nav,.sa-header__cta{display:none}
}

.sa-btn--sm{padding:.5rem 1.1rem;font-size:.85rem}

/* ---------- Sticky Mobil-Leiste (Telefon + WhatsApp) — nur Mobil ---------- */
.sa-mobilebar{display:none}
.sa-totop{position:fixed;right:clamp(1rem, .4rem + 1.4vw, 1.75rem);bottom:clamp(1rem, .4rem + 1.4vw, 1.75rem);z-index:54;width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--sa-green);color:#fff;box-shadow:0 14px 30px -12px rgba(10,114,51,.6);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .3s ease, transform .3s ease, background .2s ease;-webkit-tap-highlight-color:transparent}
.sa-totop__leaf{height:1.6rem;width:auto;filter:brightness(0) invert(1)}
.sa-totop.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sa-totop:hover{background:var(--sa-green-deep)}
.sa-totop.is-visible:hover{transform:translateY(-2px) scale(1.04)}
.sa-totop:focus-visible{outline:2px solid var(--sa-green-deep);outline-offset:3px}
/* Verstecktes Herz-Easter-Egg (Doppel-Tipp aufs Logo) — Banksy-Herzballons */
.sa-heart{position:fixed;inset:0;z-index:40;pointer-events:none;display:none}

/* ---------- Kontaktformular ---------- */
/* Kontakt-Karte: grünes Intro-Panel + Formular */
.sa-formcard{display:grid;grid-template-columns:5fr 7fr;margin-top:clamp(3.25rem, 2.2rem + 3.6vw, 5.75rem);border:1px solid var(--sa-line);border-radius:var(--sa-r-lg);overflow:hidden;box-shadow:var(--sa-shadow)}
.sa-formcard__aside{background:var(--sa-green);color:#fff;padding:clamp(1.75rem,1.2rem + 2.4vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.sa-formcard__kick{font-family:var(--sa-hand);font-weight:var(--sa-hand-wt);font-size:var(--sa-hand-sz);letter-spacing:0;text-transform:none;line-height:1;color:var(--sa-lime);display:inline-block}
.sa-formcard__aside h3{font-family:var(--sa-font-display);font-weight:600;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.3rem);letter-spacing:-0.015em;line-height:1.04;margin:.5rem 0 0;color:#fff}
.sa-formcard__aside p{color:rgba(255,255,255,.9);line-height:1.6;margin-top:.9rem}
.sa-formcard__points{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-direction:column;gap:.7rem}
.sa-formcard__points li{display:flex;align-items:flex-start;gap:.6rem;color:rgba(255,255,255,.92);font-weight:600;line-height:1.4;text-wrap:pretty}
.sa-formcard__points svg{width:1.2em;height:1.2em;flex:none;margin-top:.05rem;color:var(--sa-lime)}
.sa-formcard__alt{margin-top:1.7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);font-weight:700;color:#fff;transition:color .2s ease}
.sa-formcard__alt svg{width:1.15em;height:1.15em;color:var(--sa-lime);flex:none}
.sa-formcard__alt:hover{color:var(--sa-lime)}
.sa-formcard__alt-q{font-weight:600;text-wrap:pretty;line-height:1.35}
.sa-formcard__alt-num{display:inline-flex;align-items:center;gap:.55rem}
.sa-formcard__alt-num b{font-weight:800;font-size:1.2em;letter-spacing:.02em}
.sa-form{background:var(--sa-surface);padding:clamp(1.6rem,1.1rem + 2.4vw,2.6rem)}
@media(max-width:720px){.sa-formcard{grid-template-columns:1fr}}
.sa-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sa-field{display:flex;flex-direction:column;gap:.4rem}
.sa-field--full{grid-column:1 / -1}
.sa-field>span{font-weight:700;font-size:.85rem;color:var(--sa-ink)}
.sa-field i{color:var(--sa-green);font-style:normal}
.sa-field input,.sa-field textarea{font:inherit;color:var(--sa-ink);background:#fff;border:1.5px solid var(--sa-line);border-radius:var(--sa-r-sm);padding:.72rem .9rem;width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.sa-field input:focus,.sa-field textarea:focus{outline:none;border-color:var(--sa-green);box-shadow:0 0 0 3px var(--sa-lime-soft)}
.sa-field textarea{resize:vertical;min-height:130px}
.sa-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sa-form__check{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem;margin-top:1.2rem;font-size:.9rem;color:var(--sa-ink-soft);line-height:1.5}
.sa-form__check input{margin-top:.15rem;width:1.15rem;height:1.15rem;accent-color:var(--sa-green);flex:none}
.sa-form__check a{color:var(--sa-green-deep);text-decoration:underline}
.sa-form__check i{color:var(--sa-green);font-style:normal}
.sa-form__foot{display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;margin-top:1.5rem}
.sa-form__status{font-size:.9rem;font-weight:600;color:var(--sa-ink-soft);margin:0}
.sa-form__status[data-ok="1"]{color:var(--sa-green-deep)}
.sa-form__status[data-ok="0"]{color:#b3361f}
.sa-field__hint{display:block;margin-top:.4rem;font-size:.82rem;font-weight:700;line-height:1.45;color:#b3361f}
.sa-field.is-err input,.sa-field.is-err textarea{border-color:#b3361f}
.sa-field.is-err input:focus,.sa-field.is-err textarea:focus{box-shadow:0 0 0 3px rgba(179,54,31,.15)}
.sa-form__check.is-err{color:#b3361f}
.sa-form__check.is-err input{outline:2px solid #b3361f;outline-offset:2px}
.sa-form__check .sa-field__hint{flex-basis:100%;margin-top:.5rem}
@media(max-width:560px){.sa-form__grid{grid-template-columns:1fr}}

/* Mobil (≤760): Sticky-Leiste zeigen, Telefon/WhatsApp aus der Service-Leiste, Footer-Platz (steht NACH den Basis-Regeln, damit es greift) */
@media(max-width:760px){
  .sa-mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.6rem .85rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(246,247,241,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--sa-line)}
  .sa-mobilebar__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:50px;border-radius:999px;font-family:var(--sa-font-body);font-weight:700;font-size:1rem;letter-spacing:.01em}
  .sa-mobilebar__btn svg{width:1.2em;height:1.2em;flex:none}
  .sa-mobilebar__btn--call{background:var(--sa-green);color:#fff;box-shadow:0 12px 26px -16px rgba(10,114,51,.7)}
  .sa-mobilebar__btn--wa{background:#fff;color:var(--sa-green-deep);border:1.5px solid var(--sa-line)}
  .sa-mobilebar__btn--wa svg{fill:var(--sa-green)}
  .sa-page{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .sa-totop{bottom:calc(72px + env(safe-area-inset-bottom) + .75rem)}
}

/* Produkt-Karten: 4-spaltig erst, wenn die Karten breit genug für den 2-zeiligen Titel sind (darunter 2×2) */
@media(min-width:1160px){
  .sa-prod-grid{grid-template-columns:repeat(4,1fr)}
  .sa-prod h3{font-size:1rem}
  .sa-prod p{font-size:.92rem}
}

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  .sa-page *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .sa-reveal{opacity:1;transform:none}
  .sa-status[data-open="1"] .sa-status__dot::after{display:none}
  .sa-smart__car{animation:none;transform:translateX(19%)}
  .sa-smart--wide .sa-smart__car{transform:translateX(109%)}
  .sa-smart__wheel{animation:none}
  .sa-hero__meta,.sa-hero__l,.sa-hero__sub{animation:none !important;opacity:1 !important;transform:none !important}
  .sa-hero::before{animation:none !important}
}

/* ============================================================
   FARB-WELT „Warm" — per Umschalter (data-mood="warm")
   Reine Token-Umfärbung der grünen Standardwelt auf Pergament/Bernstein.
   Der Akzent „Bernstein/Gold" ist botanisch abgeleitet: das Ginkgo-Blatt
   wird im Herbst golden. Struktur/Layout/Animationen bleiben unverändert.
   ============================================================ */
html[data-mood="warm"] body{background:#F4ECDA}
html[data-mood="warm"] .sa-page{
  --sa-paper:#F4ECDA; --sa-paper-2:#EBE0C8; --sa-surface:#FBF6EA;
  --sa-ink:#2A2418; --sa-ink-soft:#574E3B; --sa-ink-faint:#6E6450;
  --sa-line:#DDCFAA;
  --sa-green:#0A7233; --sa-green-deep:#0B5226; --sa-green-ink:#0C3A1F;
  --sa-lime:#C8881F; --sa-lime-soft:#F2E4C2;      /* alle „Limetten"-Akzente werden Gold */
  --sa-shadow:0 22px 60px -34px rgba(60,40,12,.5);
  --sa-shadow-sm:0 12px 30px -22px rgba(60,40,12,.45);
}
html[data-mood="warm"] .sa-hero{background-color:#241808}
html[data-mood="warm"] .sa-hero::after{background-image:
  linear-gradient(90deg, rgba(32,21,7,.72) 0%, rgba(32,21,7,.42) 46%, rgba(32,21,7,.12) 78%, rgba(32,21,7,.02) 100%),
  linear-gradient(0deg, rgba(32,21,7,.42) 0%, rgba(32,21,7,0) 40%)}
html[data-mood="warm"] .sa-smart--wide{background:
  radial-gradient(38% 122% at 53% 72%, rgba(255,250,235,.72), rgba(255,250,235,0) 68%),
  radial-gradient(72% 95% at 50% 126%, rgba(200,136,31,.16), rgba(200,136,31,0) 72%),
  linear-gradient(180deg,#EADEC2 0%,#F4ECDA 46%,#E2D4B2 100%)}
html[data-mood="warm"] .sa-smart{background:
  radial-gradient(58% 54% at 50% 45%, rgba(255,250,235,.6), rgba(255,250,235,0) 70%),
  linear-gradient(180deg,#EADEC2 0%,#E2D4B2 100%)}
/* Farbe-Zeile im Umschalter: kleiner Farbtupfer + warmer Aktiv-Zustand */
.sa-moodswitch button{position:relative;padding-left:1.55rem}
.sa-moodswitch button::before{content:"";position:absolute;left:.6rem;top:50%;transform:translateY(-50%);width:.7rem;height:.7rem;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.sa-moodswitch button[data-mood="green"]::before{background:#0A7233}
.sa-moodswitch button[data-mood="warm"]::before{background:#C8881F}
.sa-moodswitch button[data-mood="warm"][aria-pressed="true"]{background:#C8881F;border-color:#C8881F}

/* ============ EINGANGS-EINBLENDUNG (Promo-Modal, Stil wie Hofer) ============ */
.sa-promo{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(9,26,16,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .45s ease}
.sa-promo.is-open{opacity:1}
.sa-promo[hidden]{display:none}
.sa-promo__card{position:relative;width:100%;max-width:26.5rem;max-height:calc(100dvh - 3rem);overflow-y:auto;background:var(--sa-surface);
  border:1px solid var(--sa-line);border-radius:var(--sa-r-lg);padding:2.6rem 1.9rem 1.8rem;text-align:center;
  box-shadow:var(--sa-shadow);transform:translateX(120vw);transition:transform .6s cubic-bezier(.22,.85,.25,1)}
.sa-promo.is-open .sa-promo__card{transform:none}
.sa-promo.is-closing{opacity:0}
.sa-promo.is-closing .sa-promo__card{transform:translateX(-120vw)}
.sa-promo__close{position:absolute;top:.85rem;right:.85rem;width:2.4rem;height:2.4rem;border:none;
  background:var(--sa-paper-2);color:var(--sa-ink);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.25s}
.sa-promo__close:hover{background:var(--sa-line);transform:rotate(90deg)}
.sa-promo__close svg{width:1.15rem;height:1.15rem}
.sa-promo__ic{width:4rem;height:4rem;border-radius:50%;background:var(--sa-lime-soft);color:var(--sa-green);
  display:grid;place-items:center;margin:0 auto 1.1rem}
.sa-promo__ic svg{width:2rem;height:2rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sa-promo__card h2{font-family:var(--sa-font-display);font-size:1.5rem;line-height:1.15;color:var(--sa-ink);margin:0 0 .5rem}
.sa-promo__card p{font-family:var(--sa-font-body);color:var(--sa-ink-soft);font-size:1rem;line-height:1.55;margin:0 0 1.4rem}
.sa-promo__kicker{display:inline-block;font-family:var(--sa-font-body);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sa-green-deep);background:var(--sa-lime-soft);border-radius:999px;padding:.34rem .85rem;margin:0 0 .75rem}
.sa-promo__card p{margin-bottom:1.15rem}
.sa-promo__list{list-style:none;margin:0 auto 1.5rem;padding:0;max-width:20rem;display:flex;flex-direction:column;gap:.6rem;text-align:left}
.sa-promo__list li{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--sa-font-body);font-size:.96rem;line-height:1.38;color:var(--sa-ink-soft)}
.sa-promo__list b{color:var(--sa-ink);font-weight:800}
.sa-promo__mk{width:1.15rem;height:1.15rem;flex:none;margin-top:.06rem;stroke:var(--sa-green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sa-promo__actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.sa-promo__ghost{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.4rem;border-radius:999px;
  font-family:var(--sa-font-body);font-weight:700;font-size:.98rem;cursor:pointer;
  background:transparent;border:1.5px solid var(--sa-line);color:var(--sa-ink-soft);transition:.2s}
.sa-promo__ghost:hover{border-color:var(--sa-ink-soft);color:var(--sa-ink)}
@media (prefers-reduced-motion:reduce){.sa-promo__card{transform:none!important;transition:opacity .3s}}
@media (max-width:420px){
  .sa-promo__card{padding:2.2rem 1.3rem 1.5rem}
  .sa-promo__actions{flex-direction:column}
  .sa-promo__actions .sa-btn,.sa-promo__ghost{width:100%}
}

/* ============ SERVICE-KARTEN-FLIP (Test Abholbox, generisch) ============ */
/* 3D-Regel: KEIN opacity/overflow auf .sa-serv-flip__inner / __face (preserve-3d-Kette) */
.sa-serv-flip{perspective:1400px;display:grid;transition:transform .3s ease}
.sa-serv-flip:hover{transform:translateY(-4px)}
.sa-serv-flip:hover .sa-serv-flip__face{box-shadow:var(--sa-shadow)}
.sa-serv-flip:hover .sa-serv__ic{background:var(--sa-green);color:#fff;transform:translateY(-3px) scale(1.08) rotate(-4deg)}
.sa-serv-flip__inner{position:relative;display:grid;min-height:100%;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.22,.85,.25,1)}
.sa-serv-flip.is-flipped .sa-serv-flip__inner{transform:rotateY(180deg)}
.sa-serv-flip__face{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:var(--sa-r);padding:1.6rem;
  box-shadow:var(--sa-shadow-sm);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sa-serv-flip__face--back{transform:rotateY(180deg);justify-content:flex-start}
.sa-serv-flip__face h3{font-size:1.2rem}
.sa-serv-flip__face p{margin-top:.45rem;color:var(--sa-ink-soft);font-size:.95rem}
.sa-serv-flip__btn{margin-top:0;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:none;cursor:pointer;font-family:var(--sa-font-body);font-weight:700;font-size:.92rem;
  color:var(--sa-green-deep);transition:color .2s ease,gap .25s ease}
.sa-serv-flip__btn:hover{color:var(--sa-green);gap:.72rem}
.sa-serv-flip__btn svg{width:1.2em;height:1.2em;flex:none}
.sa-serv-flip__btn--back{margin-top:auto}
@media (prefers-reduced-motion:reduce){.sa-serv-flip__inner{transition:none}}