/* =============================================================
   Floral Design Store · Mehmet Yilmaz — Bad Neuenahr
   Designsystem & Layout
   ============================================================= */

/* ---------- 1. Tokens --------------------------------------- */
:root{
  /* Marke: Gold aus dem Original-Logo (#938065) */
  --gold:#938065;
  --gold-d:#77664e;
  --gold-l:#c0ad92;
  --gold-xl:#e7dece;

  --ink:#221f1b;
  --ink-2:#3c372f;
  --muted:#6f6659;
  --line:#e3dbcd;

  --cream:#fbf9f5;
  --sand:#f2ece1;
  --sand-2:#e8dfd0;
  --forest:#39433a;
  --rose:#b3796c;
  --white:#fff;

  /* Runde, weiche Formen – bewusst nichts Eckiges */
  --r-xs:10px;
  --r-sm:16px;
  --r:24px;
  --r-lg:34px;
  --r-xl:48px;
  --pill:999px;
  --arch:999px 999px var(--r) var(--r) / 46% 46% 4% 4%;

  --shadow-s:0 2px 10px rgba(60,48,30,.06);
  --shadow:0 12px 34px -14px rgba(60,48,30,.22);
  --shadow-l:0 30px 70px -28px rgba(60,48,30,.38);

  /* Dichter Rhythmus – die alte Seite hatte zu viel Leerraum.
     Zwei benachbarte Abschnitte ergeben zusammen den doppelten Wert. */
  --sec:clamp(1.9rem,3.1vw,2.8rem);
  --gut:clamp(1.25rem,2.6vw,2.25rem);
  --wrap:1210px;
  --narrow:760px;

  --ff-d:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-b:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --nav-h:72px;
  --ease:cubic-bezier(.22,.72,.24,1);
}

/* ---------- 2. Reset ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--ff-b); font-size:clamp(.97rem,.35vw + .88rem,1.045rem);
  line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--ff-d); font-weight:500; line-height:1.08; letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--gold); color:#fff}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:6px}

/* ---------- 3. Typo-Skala ----------------------------------- */
.d1{font-size:clamp(2.9rem,7.4vw,5.5rem); font-weight:400; line-height:.98}
.d2{font-size:clamp(2.1rem,4.4vw,3.35rem); font-weight:400; line-height:1.05}
.d3{font-size:clamp(1.55rem,2.5vw,2.1rem); font-weight:500}
.d4{font-size:clamp(1.18rem,1.5vw,1.4rem); font-weight:500; line-height:1.25}
.it{font-style:italic; color:var(--gold-d)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.735rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-d); margin-bottom:.85rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6}
.eyebrow.c::after{content:""; width:26px; height:1px; background:currentColor; opacity:.6}

.lead{font-size:clamp(1.04rem,.5vw + .93rem,1.19rem); color:var(--ink-2); line-height:1.68}
.small{font-size:.875rem; color:var(--muted)}
.tint{color:var(--muted)}

/* ---------- 4. Layout --------------------------------------- */
.wrap{width:min(100% - 2.2rem,var(--wrap)); margin-inline:auto}
@media (min-width:640px){ .wrap{width:min(100% - 3.5rem,var(--wrap))} }
.narrow{width:min(100%,var(--narrow)); margin-inline:auto}
.section{padding-block:var(--sec); position:relative}
.section.tight{padding-block:calc(var(--sec) * .62)}
.center{text-align:center}
.head{max-width:640px; margin-bottom:clamp(1.35rem,2.3vw,2rem)}
.head.center{margin-inline:auto}
.head p{margin-top:.7rem}

/* weiche Flächen statt harter Kanten */
.bg-sand{background:var(--sand)}
.bg-white{background:var(--white)}
.bg-ink{background:var(--ink); color:#f2ede3}
.bg-ink .tint,.bg-ink .lead{color:#b9b0a1}
.bg-ink .eyebrow{color:var(--gold-l)}

/* Runde Sektionsübergänge – nimmt der Seite das Kantige */
.round-t{border-radius:var(--r-xl) var(--r-xl) 0 0; margin-top:-1px}
.round-b{border-radius:0 0 var(--r-xl) var(--r-xl)}
.round-all{border-radius:var(--r-xl)}
@media (min-width:900px){
  .round-t{border-radius:72px 72px 0 0}
  .round-b{border-radius:0 0 72px 72px}
}

/* ---------- 5. Buttons -------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.86em 1.7em; border-radius:var(--pill); border:1.5px solid transparent;
  font-size:.9rem; font-weight:600; letter-spacing:.015em; cursor:pointer;
  transition:transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.05em; height:1.05em; flex:none}

.btn-p{background:var(--gold); color:#fff; box-shadow:0 8px 22px -10px rgba(147,128,101,.85)}
.btn-p:hover{background:var(--gold-d); box-shadow:0 14px 30px -12px rgba(147,128,101,.95)}

.btn-o{border-color:var(--gold); color:var(--gold-d)}
.btn-o:hover{background:var(--gold); color:#fff}

.btn-g{border-color:rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.08)}
.btn-g:hover{background:#fff; color:var(--ink); border-color:#fff}

.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-2)}

.btn-sm{padding:.62em 1.25em; font-size:.83rem}

.txtlink{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600; font-size:.9rem;
  color:var(--gold-d); padding-bottom:2px; border-bottom:1.5px solid var(--gold-xl);
  transition:border-color .25s, gap .25s, color .25s;
}
.txtlink:hover{border-color:var(--gold); gap:.8em}
.txtlink svg{width:.95em;height:.95em;transition:transform .25s var(--ease)}
.txtlink:hover svg{transform:translateX(3px)}

/* ---------- 6. Kopf / Navigation ---------------------------- */
.topbar{
  background:var(--ink); color:#c8bfb0; font-size:.775rem; letter-spacing:.015em;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; padding-block:.35rem}
.topbar a{display:inline-flex; align-items:center; gap:.45em; color:#e5ddd0; transition:color .2s}
.topbar a:hover{color:var(--gold-l)}
.topbar svg{width:14px; height:14px; opacity:.75; flex:none}
.tb-l{display:flex; align-items:center; gap:1.35rem; flex-wrap:wrap}
.tb-r{display:none; align-items:center; gap:.5em; color:#9c9384}
@media (min-width:880px){ .tb-r{display:inline-flex} }

/* Fleurop-Bestelllink in der Fusszeile — auf jeder Seite erreichbar */
.foot-fleurop{display:inline-flex; align-items:center; gap:.65rem; margin-top:1.35rem;
  padding:.5rem .95rem .5rem .55rem; border-radius:var(--pill);
  background:rgba(255,255,255,.07); font-size:.83rem; font-weight:600;
  transition:background .25s, transform .25s var(--ease)}
.foot-fleurop:hover{background:var(--gold); color:#fff; transform:translateY(-2px)}
.foot-fleurop img{width:45px; height:auto; flex:none; border-radius:6px}
.tb-hide{display:none}
@media (min-width:520px){ .tb-hide{display:inline-flex} }

.site-head{position:sticky; top:0; z-index:90; background:rgba(251,249,245,.86); backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid transparent; transition:box-shadow .35s, border-color .35s, background .35s}
.site-head.stuck{box-shadow:0 6px 26px -18px rgba(60,48,30,.5); border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:var(--nav-h)}

.brand{display:inline-flex; align-items:center; gap:.7rem; flex:none}
/* Bildmarke im Favicon-Stil. Jede Ebene hat ihre eigene Klasse — eine
   pauschale rect-Regel wuerde sonst auch den Rahmen fuellen. */
.brand-mark{width:42px; height:42px; flex:none}
.brand-mark .tile{fill:var(--ink)}
.brand-mark .mono rect{fill:var(--gold-l)}
.brand-mark .fr{fill:none; stroke:var(--gold); stroke-width:1.6px}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--ff-d); font-size:1.16rem; font-weight:600; letter-spacing:.01em}
.brand-txt span{font-size:.6rem; letter-spacing:.245em; text-transform:uppercase; color:var(--gold-d); margin-top:.28em; font-weight:600}

.menu{display:none}
@media (min-width:1010px){
  .menu{display:flex; align-items:center; gap:.15rem}
  .menu > li > a{
    display:inline-flex; align-items:center; gap:.35em; padding:.55em .82em; border-radius:var(--pill);
    font-size:.885rem; font-weight:500; transition:background .22s, color .22s;
  }
  .menu > li > a:hover{background:var(--sand); color:var(--gold-d)}
  .menu > li > a[aria-current]{color:var(--gold-d); font-weight:600}
  .menu .caret{width:9px;height:9px;opacity:.5;transition:transform .25s}
  .has-sub{position:relative}
  .has-sub:hover .caret{transform:rotate(180deg)}
  .sub{
    position:absolute; top:calc(100% + 8px); left:50%; translate:-50% 0;
    background:#fff; border-radius:var(--r); box-shadow:var(--shadow-l); border:1px solid var(--line);
    padding:.5rem; min-width:262px;
    opacity:0; visibility:hidden; translate:-50% 8px; transition:.28s var(--ease);
  }
  .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1; visibility:visible; translate:-50% 0}
  .sub a{display:flex; flex-direction:column; gap:.1rem; padding:.55rem .8rem; border-radius:var(--r-sm); transition:background .2s}
  .sub a:hover{background:var(--sand)}
  .sub b{font-weight:600; font-size:.885rem}
  .sub em{font-style:normal; font-size:.755rem; color:var(--muted)}
}
.nav-cta{display:none}
@media (min-width:1010px){ .nav-cta{display:inline-flex} }

.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 12px; border:0; background:var(--sand); border-radius:var(--pill); cursor:pointer;
}
.burger span{display:block; height:1.8px; background:var(--ink); border-radius:2px; transition:.32s var(--ease)}
.burger span:nth-child(2){width:70%}
@media (min-width:1010px){ .burger{display:none} }
body.nav-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){width:100%; transform:translateY(-6.8px) rotate(-45deg)}

/* Mobilmenü */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--cream);
  padding:calc(var(--nav-h) + 46px) 1.6rem 2.4rem; overflow-y:auto;
  opacity:0; visibility:hidden; translate:0 -12px; transition:.36s var(--ease);
}
body.nav-open .drawer{opacity:1; visibility:visible; translate:0 0}
body.nav-open{overflow:hidden}
.drawer h4{font-family:var(--ff-b); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); margin:1.7rem 0 .5rem; font-weight:700}
.drawer h4:first-child{margin-top:0}
.drawer a{display:block; padding:.62rem 0; font-size:1.16rem; font-family:var(--ff-d); border-bottom:1px solid var(--line)}
.drawer a[aria-current]{color:var(--gold-d)}
.drawer .btn{margin-top:1.5rem; width:100%}
@media (min-width:1010px){ .drawer{display:none} }

/* ---------- 7. Hero ----------------------------------------- */
.hero{position:relative; overflow:hidden; background:var(--cream); padding-block:clamp(1.75rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid; gap:clamp(1.75rem,4vw,3.4rem); align-items:center}
@media (min-width:940px){ .hero-grid{grid-template-columns:1.04fr .96fr} }

.hero-copy{position:relative; z-index:2}

/* Fleurop-Badge ueber der Ueberschrift — fuellt den freien Raum darueber */
.fleurop-badge{
  /* volle Spaltenbreite, linksbuendig zur Ueberschrift darunter */
  display:flex; width:100%; align-items:center; gap:1.15rem;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:1.3rem 1.75rem 1.3rem 1rem; margin:0 0 1.75rem;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s;
}
.fleurop-badge:hover{transform:translateY(-3px); box-shadow:var(--shadow-l); border-color:var(--gold-l)}
/* Logo gross und mittig — gleiche Polsterung oben und unten, Ecken leicht gerundet. */
.fleurop-badge img{height:76px; width:auto; flex:none; border-radius:12px}
.fleurop-badge .t{display:flex; flex-direction:column; line-height:1.25; text-align:left}
.fleurop-badge b{font-size:1.14rem; font-weight:600; letter-spacing:-.005em}
.fleurop-badge em{font-style:normal; font-size:.855rem; color:var(--muted); margin-top:.18em}
/* Pfeil ganz nach rechts an den Feldrand */
.fleurop-badge svg{width:20px; height:20px; flex:none; margin-left:auto; color:var(--gold-d);
  transition:transform .25s var(--ease)}
.fleurop-badge:hover svg{transform:translateX(4px)}

@media (max-width:520px){
  .fleurop-badge{gap:.85rem; padding:.9rem 1.1rem .9rem .82rem}
  .fleurop-badge img{height:58px; border-radius:10px}
  .fleurop-badge b{font-size:1rem}
  .fleurop-badge em{font-size:.78rem}
}
.hero h1{margin-bottom:.55rem}
.hero h1 .l2{display:block; font-style:italic; color:var(--gold-d)}
.hero .lead{max-width:44ch; margin-top:.9rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.65rem}

.hero-facts{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.fact{display:inline-flex; align-items:center; gap:.5em; background:var(--sand); border-radius:var(--pill); padding:.46em 1em; font-size:.795rem; font-weight:500}
.fact svg{width:15px;height:15px;color:var(--gold-d);flex:none}
.fact.live{background:#e8f0e6; color:#2f4a2c}
.fact.live .dot{width:7px;height:7px;border-radius:50%;background:#4a8a3f;box-shadow:0 0 0 3px rgba(74,138,63,.2)}
.fact.closed{background:var(--sand-2); color:var(--ink-2)}
.fact.closed .dot{width:7px;height:7px;border-radius:50%;background:#a8836a}

/* Video im Hochformat – als Bogen inszeniert statt beschnittener Vollbild-Hintergrund */
.hero-media{position:relative}
.hero-video{
  position:relative; border-radius:var(--arch); overflow:hidden;
  aspect-ratio:9/13; background:var(--sand-2); box-shadow:var(--shadow-l);
  max-width:440px; margin-inline:auto;
  isolation:isolate;
}
@media (min-width:940px){ .hero-video{max-width:none; aspect-ratio:9/12.2} }

/* Die Bogenform sitzt bewusst auch auf dem Video selbst, nicht nur als
   overflow-Maske am Rahmen. Ein Video liegt im Browser auf einer eigenen
   Zeichenebene, und die uebernimmt die Maske des Elternteils erst beim
   naechsten Neuzeichnen — bis dahin waere die Ecke oben eckig. Genau das
   war zu sehen: eckig beim Laden, rund nach dem ersten Scrollen. */
.hero-video video,.hero-video img{
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit;
}
.hero-video::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(34,31,27,.16) 0%,transparent 26%,transparent 62%,rgba(34,31,27,.42) 100%);
}
.v-btn{
  position:absolute; z-index:3; left:50%; top:50%; translate:-50% -50%;
  width:74px; height:74px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 10px 34px -8px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), background .25s;
}
.v-btn:hover{transform:translate(-50%,-50%) scale(1.07); background:#fff}
.v-btn svg{width:26px;height:26px;margin-left:3px}
.v-btn.hide{opacity:0; visibility:hidden; transform:translate(-50%,-50%) scale(.7)}
.v-cap{
  position:absolute; z-index:3; left:1rem; right:1rem; bottom:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  color:#fff; font-size:.78rem; letter-spacing:.03em;
}
.v-cap span{display:inline-flex;align-items:center;gap:.45em;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.v-cap span svg{width:14px; height:14px; flex:none}   /* sonst 85px gross */
.v-mute{
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;flex:none;
  background:rgba(255,255,255,.22); color:#fff; backdrop-filter:blur(6px);
  display:grid;place-items:center; transition:background .25s;
}
.v-mute:hover{background:rgba(255,255,255,.4)}
.v-mute svg{width:16px;height:16px}

/* Dekorative weiche Blüte im Hintergrund */
.blob{position:absolute; border-radius:60% 40% 52% 48% / 55% 48% 52% 45%; filter:blur(0.5px); opacity:.5; pointer-events:none; z-index:0}
.blob-1{width:min(46vw,430px); aspect-ratio:1; background:var(--sand); top:-9%; right:-9%}
.blob-2{width:min(34vw,300px); aspect-ratio:1; background:var(--gold-xl); bottom:-14%; left:-12%; opacity:.42}

/* Fleurop-Streifen */
.trust{background:var(--white); border-block:1px solid var(--line)}
.trust .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(.8rem,2.1vw,1.85rem); padding-block:.9rem}
/* Ab Tablet die drei Angaben auseinanderziehen. Bewusst in einem etwas
   schmaleren Band als der Rest der Seite — ueber die volle Breite verteilt
   verlieren sie den Zusammenhang. */
@media (min-width:760px){
  .trust .wrap{
    width:min(100% - 2.2rem, 1080px);
    justify-content:space-between;
    gap:clamp(1rem,2.5vw,2.4rem);
    padding-block:1.05rem;
  }
}
.trust-i{display:inline-flex; align-items:center; gap:.65rem; font-size:.85rem; color:var(--ink-2)}
.trust-i img{width:auto; flex:none}
.trust-i .t-logo{height:46px; border-radius:9px}      /* Fleurop-Partnerlogo bewusst groesser, Ecken gerundet */
.trust-i .t-stars{height:22px}
/* Ohne diese Regel haben die Icons keine Groesse und rendern riesig,
   weil das SVG nur einen viewBox-Wert mitbringt. */
.trust-i svg{width:19px; height:19px; flex:none; color:var(--gold-d)}
.trust-i b{font-weight:600}

/* Fleurop-Partnerlink: fuehrt zur Bestellseite, oeffnet in neuem Tab */
.trust-link{border-radius:var(--pill); padding:.4rem .85rem; margin-inline:-.35rem;
  transition:background .22s, color .22s}
.trust-link:hover{background:var(--sand); color:var(--gold-d)}
.trust-link .t-txt{display:flex; flex-direction:column; line-height:1.25; text-align:left}
.trust-link .t-txt em{font-style:normal; font-size:.745rem; color:var(--muted); margin-top:.1em}
.trust-link:hover .t-txt em{color:var(--gold-d)}
.trust-link .pfeil{width:15px; height:15px; transition:transform .25s var(--ease)}
.trust-link:hover .pfeil{transform:translateX(3px)}
.trust-sep{width:1px; height:24px; background:var(--line); display:none}
@media (min-width:760px){ .trust-sep{display:block} }

/* ---------- 8. Leistungen ----------------------------------- */
.svc-grid{display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
/* 6 Kacheln -> saubere 3x2-Aufteilung statt 4+2 */
@media (min-width:960px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
.svc{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-s);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.svc-img{position:relative; aspect-ratio:4/3.15; overflow:hidden; background:var(--sand-2)}
.svc-img img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-n{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  background:rgba(251,249,245,.93); color:var(--gold-d);
  font-size:.685rem; font-weight:700; letter-spacing:.13em;
  padding:.4em .85em; border-radius:var(--pill); backdrop-filter:blur(4px);
}
.svc-b{padding:1.15rem 1.3rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.5rem}
.svc-b h3{font-size:1.28rem}
.svc-b p{font-size:.895rem; color:var(--muted); line-height:1.58; margin:0}
.svc-b .txtlink{margin-top:auto; padding-top:.7rem; align-self:flex-start}

/* Hervorgehobene, breite Kachel */
.svc.wide{grid-column:1/-1}
@media (min-width:860px){
  .svc.wide{flex-direction:row; align-items:stretch}
  .svc.wide .svc-img{flex:0 0 46%; aspect-ratio:auto}
  .svc.wide .svc-b{justify-content:center; padding:clamp(1.5rem,3.2vw,2.75rem)}
  .svc.wide .svc-b h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
  .svc.wide .svc-b p{font-size:.97rem; max-width:46ch}
}

/* ---------- 9. Split (Bild + Text) -------------------------- */
.split{display:grid; gap:clamp(1.75rem,4.5vw,3.6rem); align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.flip .split-media{order:2}
  .split.narrowtext{grid-template-columns:1.1fr .9fr}
}
.split-media{position:relative}
.split-media img{width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow)}
.split-media.arch img{border-radius:var(--arch)}
.split-body h2{margin-bottom:.85rem}

/* Kleines überlappendes Zweitbild – füllt Leerraum, wirkt komponiert */
.stack{position:relative; padding-bottom:clamp(2.5rem,7vw,4.5rem); padding-right:clamp(2rem,6vw,3.5rem)}
.stack .a{width:82%; border-radius:var(--arch); box-shadow:var(--shadow)}
.stack .b{
  position:absolute; right:0; bottom:0; width:52%;
  border-radius:var(--r-lg); box-shadow:var(--shadow-l);
  border:7px solid var(--cream);
}
.badge-float{
  position:absolute; z-index:3; background:var(--white); border-radius:var(--r);
  box-shadow:var(--shadow); padding:.85rem 1.05rem; display:flex; align-items:center; gap:.7rem;
  left:-4%; bottom:22%; max-width:210px;
}
@media (max-width:620px){ .badge-float{left:0; bottom:auto; top:-14px; padding:.6rem .8rem} }
.badge-float img{width:44px; height:auto; flex:none}
.badge-float .t{font-size:.72rem; line-height:1.3}
.badge-float .t b{display:block; font-size:.86rem; font-weight:700}

.ul-check{display:grid; gap:.6rem; margin:1.2rem 0 0}
.ul-check li{position:relative; padding-left:1.85rem; font-size:.94rem; color:var(--ink-2)}
.ul-check li::before{
  content:""; position:absolute; left:0; top:.42em; width:1.15rem; height:1.15rem;
  border-radius:50%; background:var(--gold-xl);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2377664e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
  background-size:70%; background-position:center; background-repeat:no-repeat;
}

.sig{margin-top:1.5rem; display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap}
.sig img{width:200px; opacity:.85}
.sig .who b{display:block; font-family:var(--ff-d); font-size:1.1rem}
.sig .who span{font-size:.775rem; color:var(--muted); letter-spacing:.06em}

/* ---------- 10. Zahlen -------------------------------------- */
.stats{display:grid; gap:1px; background:var(--line); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--cream); padding:clamp(1.35rem,3vw,2rem) 1rem; text-align:center}
.stat b{display:block; font-family:var(--ff-d); font-size:clamp(2.1rem,4vw,3rem); font-weight:500; color:var(--gold-d); line-height:1}
.stat span{display:block; margin-top:.35rem; font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500}

/* ---------- 11. Galerie ------------------------------------- */
.gal-filter{display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.gal-filter button{
  border:1.5px solid var(--line); background:transparent; border-radius:var(--pill);
  padding:.5em 1.15em; font-size:.83rem; font-weight:500; cursor:pointer; color:var(--ink-2);
  transition:.25s;
}
.gal-filter button:hover{border-color:var(--gold-l); color:var(--gold-d)}
.gal-filter button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* Raster statt Mauerwerk: bei columns enden die Spalten unterschiedlich
   hoch, unten franst der Block aus. Im Raster schliessen alle Bilder auf
   einer Linie ab. Der Bildausschnitt wird dafuer mittig beschnitten. */
.gal{display:grid; gap:var(--gut); grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){ .gal{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1080px){ .gal{grid-template-columns:repeat(4,1fr)} }
.gal figure{margin:0; aspect-ratio:4/5; position:relative; border-radius:var(--r); overflow:hidden; cursor:zoom-in; background:var(--sand-2)}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .9rem .8rem; color:#fff; font-size:.79rem;
  background:linear-gradient(transparent,rgba(34,31,27,.8)); opacity:0; transition:opacity .3s;
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1}
.gal figure.hide{display:none}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:120; background:rgba(23,21,18,.94); display:grid; place-items:center; padding:1.2rem; opacity:0; visibility:hidden; transition:.3s}
.lb.on{opacity:1; visibility:visible}
.lb img{max-width:min(100%,1100px); max-height:86vh; border-radius:var(--r); object-fit:contain}
.lb-cap{position:absolute; bottom:1.1rem; left:0; right:0; text-align:center; color:#cfc7b8; font-size:.83rem}
.lb button{position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .22s; backdrop-filter:blur(6px)}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb .x{top:1.1rem; right:1.1rem}
.lb .p{left:1.1rem; top:50%; translate:0 -50%}
.lb .n{right:1.1rem; top:50%; translate:0 -50%}
.lb svg{width:20px;height:20px}

/* ---------- 12. Bewertungen --------------------------------- */
.review-grid{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); align-items:stretch}
@media (min-width:700px){ .review-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .review-grid{grid-template-columns:repeat(3,1fr); gap:1rem} }
/* Kompakter als zuvor: die Karten hatten fuer kurze Bewertungen viel zu
   viel Luft. Gleiche Hoehe pro Reihe, damit die Reihen sauber abschliessen. */
.review{background:var(--white); border-radius:var(--r); padding:1.05rem 1.15rem; box-shadow:var(--shadow-s); display:flex; flex-direction:column; gap:.5rem;
  position:relative;
  transition:opacity .62s var(--ease), translate .62s var(--ease), box-shadow .3s var(--ease);
}
/* Zeiger und Hover-Schatten nur, wenn die Karte wirklich anklickbar ist —
   die Klasse setzt main.js, sobald die Rotation laeuft. */
.rotiert .review{cursor:pointer}
.rotiert .review:hover{box-shadow:var(--shadow)}

/* Karte verlaesst den Platz bzw. kommt neu herein. */
.review.geht{opacity:0; translate:0 -14px}
.review.kommt{opacity:0; translate:0 16px}

/* Angetippt: bleibt stehen und verblasst langsam, bis der Besucher
   noch einmal tippt. Dann wird die naechste geladen. */
.review.haelt{box-shadow:var(--shadow); animation:rev-auf 4.2s var(--ease) forwards}
.review.haelt .rev-tipp{opacity:1}
@keyframes rev-auf{
  0%{opacity:1}
  55%{opacity:.92}
  100%{opacity:.14}
}

.rev-tipp{
  position:absolute; inset:auto 0 .55rem 0; text-align:center;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-d); opacity:0; transition:opacity .4s; pointer-events:none;
}

.rev-hinweis{
  text-align:center; margin-top:1.5rem; font-size:.78rem; color:var(--muted);
}
/* Der Hinweis ergibt nur Sinn, wenn die Rotation auch laeuft. */
.rev-hinweis{display:none}
.js .rev-hinweis{display:block}
@media (prefers-reduced-motion:reduce){ .js .rev-hinweis{display:none} }
.stars{display:flex; gap:2px; color:#e8b04b}
.stars svg{width:13px;height:13px}
.review p{font-size:.855rem; color:var(--ink-2); line-height:1.52; margin:0; flex:1}
.review footer{display:flex; align-items:center; gap:.55rem; font-size:.78rem; margin-top:.15rem}
.av{width:29px;height:29px;border-radius:50%;background:var(--gold-xl);color:var(--gold-d);display:grid;place-items:center;font-weight:700;font-size:.72rem;flex:none}
.review footer b{font-weight:600}
/* Nur der Meta-Text im div — sonst wuerde die Regel auch .av treffen und
   dort display:grid ueberschreiben (die Initialen saessen dann schief). */
.review footer > div span{color:var(--muted); font-size:.71rem; display:block}

/* ---------- 13. Öffnungszeiten ------------------------------ */
.hours{background:var(--white); border-radius:var(--r-lg); padding:clamp(1.35rem,3vw,2rem); box-shadow:var(--shadow-s)}
.hours h3{font-size:1.3rem; margin-bottom:.2rem}
.hours ul{margin-top:1rem}
.hours li{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px dashed var(--line); font-size:.925rem}
.hours li:last-child{border-bottom:0}
.hours li.today{color:var(--gold-d); font-weight:600}
.hours li.today::after{content:"heute"; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; background:var(--gold-xl); padding:.2em .6em; border-radius:var(--pill); margin-left:.4rem}
.hours li b{font-variant-numeric:tabular-nums; font-weight:500}
.hours .note{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted)}

/* ---------- 14. Kontakt / Formular -------------------------- */
.contact-grid{display:grid; gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:920px){ .contact-grid{grid-template-columns:1.05fr .95fr; align-items:stretch} }

.contact-col{display:grid; gap:var(--gut); align-content:start}
/* Auf dem Handy loesen sich die Spalten auf, damit die Reihenfolge stimmt:
   Formular, Kontaktdaten, Öffnungszeiten, Karte. */
@media (max-width:919px){
  .contact-col{display:contents}
  .contact-grid .form{order:1}
  .contact-grid .info-card{order:2}
  .contact-grid .hours{order:3}
  .contact-grid .map{order:4}
}
/* Die Karte sitzt links unter dem Formular und dehnt sich auf die Resthöhe.
   So enden beide Spalten bündig und darunter bleibt keine Lücke stehen. */
@media (min-width:920px){
  .contact-col.left{grid-template-rows:auto 1fr; align-content:stretch}
  .contact-col.left .map{aspect-ratio:auto; min-height:260px}
}

.form{background:var(--white); border-radius:var(--r-lg); padding:clamp(1.35rem,3.2vw,2.15rem); box-shadow:var(--shadow-s)}
.f-row{display:grid; gap:1rem}
@media (min-width:560px){ .f-row.two{grid-template-columns:1fr 1fr} }
.field{position:relative; margin-bottom:1rem}
.field label{display:block; font-size:.79rem; font-weight:600; letter-spacing:.045em; margin-bottom:.4rem; color:var(--ink-2)}
.field label .req{color:var(--rose)}
.field input,.field textarea,.field select{
  width:100%; padding:.82em 1em; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--cream); font-size:.93rem; transition:border-color .22s, background .22s, box-shadow .22s;
}
.field textarea{min-height:132px; resize:vertical; line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3.5px rgba(147,128,101,.15);
}
.field input::placeholder,.field textarea::placeholder{color:#a99f90}
.field.err input,.field.err textarea{border-color:var(--rose); background:#fdf6f4}
.f-err{display:none; font-size:.775rem; color:var(--rose); margin-top:.35rem}
.field.err .f-err{display:block}

.check{display:flex; align-items:flex-start; gap:.7rem; font-size:.82rem; color:var(--muted); line-height:1.5; margin-bottom:1.15rem}
.check input{width:19px; height:19px; margin-top:.15em; flex:none; accent-color:var(--gold)}
.check a{color:var(--gold-d); text-decoration:underline; text-underline-offset:2px}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}

.f-note{font-size:.755rem; color:var(--muted); margin-top:.9rem; line-height:1.5}
.f-msg{display:none; border-radius:var(--r-sm); padding:.9rem 1.1rem; font-size:.885rem; margin-bottom:1.1rem; line-height:1.5}
.f-msg.on{display:block}
.f-msg.ok{background:#eaf3e7; color:#2c4a27; border:1px solid #c6ddc0}
.f-msg.no{background:#fbeeea; color:#8a3a2a; border:1px solid #eccfc7}
.btn.loading{pointer-events:none; opacity:.65}
.btn.loading .spin{display:inline-block; width:1em; height:1em; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.info-card{background:var(--sand); border-radius:var(--r-lg); padding:clamp(1.35rem,3vw,2rem)}
.info-list{display:grid; gap:1.15rem; margin-top:1.15rem}
.info-list li{display:flex; gap:.9rem; align-items:flex-start}
.i-ic{width:40px;height:40px;border-radius:50%;background:var(--white);color:var(--gold-d);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-s)}
.i-ic svg{width:17px;height:17px}
.info-list b{display:block; font-size:.73rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:.15rem}
/* wie oben: nur der Text im div, damit .i-ic seine Goldfarbe behaelt */
.info-list > li > div a,.info-list > li > div span{font-size:.985rem; color:var(--ink); line-height:1.45}
.info-list a:hover{color:var(--gold-d)}

.map{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-s); background:var(--sand-2); position:relative; aspect-ratio:16/9; isolation:isolate}
/* Radius wie beim Hero-Video direkt auf dem Rahmen — ein iframe zeichnet
   ebenfalls auf einer eigenen Ebene und wuerde sonst eckig aufblitzen,
   wenn die Karte nach dem Klick geladen wird. */
.map iframe{width:100%;height:100%;border:0;display:block; border-radius:inherit}
.map-consent{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1.5rem; background:var(--sand-2)}
.map-consent .in{max-width:340px}
.map-consent p{font-size:.85rem; color:var(--ink-2); margin-bottom:1rem}

/* ---------- 15. CTA-Band ------------------------------------ */
/* Das dunkle Band steht direkt vor der Fusszeile. Oben addieren sich sonst
   zwei Polsterungen, unten wirkt nur eine — der Abstand waere ungleich.
   Deshalb gibt der Abschnitt davor seine untere Polsterung ab.
   Browser ohne :has() zeigen oben etwas mehr Luft, das ist unkritisch. */
.cta-sec{padding-block:var(--sec)}
/* Die zweite Variante deckt Seiten ab, auf denen die (fest positionierte und
   damit unsichtbare) Lightbox im Markup dazwischensteht — z. B. galerie.html. */
.section:has(+ .cta-sec),
.section:has(+ .lb + .cta-sec){padding-bottom:0}

.cta{position:relative; overflow:hidden; background:var(--ink); color:#f4efe6; border-radius:var(--r-xl); padding:clamp(2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem); text-align:center}
.cta::before{content:""; position:absolute; width:min(60vw,520px); aspect-ratio:1; border-radius:50% 42% 55% 45%/48% 52% 45% 55%; background:radial-gradient(circle at 30% 30%,rgba(147,128,101,.4),transparent 68%); top:-32%; right:-14%}
.cta > *{position:relative; z-index:1}
.cta h2{margin-bottom:.6rem}
.cta p{color:#bdb4a5; max-width:52ch; margin-inline:auto}
.cta .btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.6rem}

/* ---------- 16. Seitenkopf (Unterseiten) -------------------- */
.phead{position:relative; padding-block:clamp(2.25rem,5vw,3.75rem) clamp(1.75rem,4vw,2.75rem); background:var(--sand); overflow:hidden}
.phead::after{content:""; position:absolute; width:min(52vw,460px); aspect-ratio:1; border-radius:58% 42% 48% 52%/50% 55% 45% 50%; background:var(--gold-xl); opacity:.55; right:-12%; top:-42%}
.phead .wrap{position:relative; z-index:1}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:.42rem; font-size:.78rem; color:var(--muted); margin-bottom:.8rem}
.crumb a:hover{color:var(--gold-d)}
.crumb svg{width:11px;height:11px;opacity:.5}
.phead h1{max-width:18ch}
.phead p{margin-top:.75rem; max-width:60ch}

/* ---------- 17. Prosa (Textseiten) -------------------------- */
.prose{max-width:none}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.05rem); margin:2.1rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.14rem,1.7vw,1.32rem); margin:1.5rem 0 .45rem; font-family:var(--ff-b); font-weight:700; letter-spacing:0}
.prose p{margin-bottom:.95rem; color:var(--ink-2)}
.prose ul:not(.ul-check):not(.info-list){margin:.6rem 0 1.1rem; padding-left:0}
.prose ul:not(.ul-check):not(.info-list) li{position:relative; padding-left:1.35rem; margin-bottom:.42rem; color:var(--ink-2)}
.prose ul:not(.ul-check):not(.info-list) li::before{content:""; position:absolute; left:.2rem; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--gold-l)}
.prose a:not(.btn):not(.txtlink){color:var(--gold-d); text-decoration:underline; text-underline-offset:2.5px; text-decoration-thickness:1px}
.prose strong{font-weight:600; color:var(--ink)}

.tiles{display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); margin-top:1.6rem}
.tile{background:var(--white); border-radius:var(--r); padding:1.25rem 1.35rem; box-shadow:var(--shadow-s)}
.tile h3{font-family:var(--ff-d); font-size:1.16rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .4rem}
.tile p{font-size:.885rem; color:var(--muted); margin:0; line-height:1.56}
.tile .n{display:inline-grid; place-items:center; width:31px;height:31px;border-radius:50%;background:var(--gold-xl);color:var(--gold-d);font-size:.8rem;font-weight:700;margin-bottom:.7rem}

/* Akkordeon */
.acc{border-radius:var(--r); overflow:hidden; background:var(--white); box-shadow:var(--shadow-s)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{
  list-style:none; cursor:pointer; padding:1.05rem 3rem 1.05rem 1.35rem; position:relative;
  font-weight:600; font-size:.965rem; transition:background .2s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--cream)}
.acc summary::after{
  content:""; position:absolute; right:1.35rem; top:50%; translate:0 -50%;
  width:18px;height:18px; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2377664e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease);
}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc .acc-b{padding:0 1.35rem 1.2rem; font-size:.915rem; color:var(--ink-2); line-height:1.65}

/* ---------- 18. Fuß ----------------------------------------- */
/* Kein margin-top: der Abschnitt darueber liefert den Abstand bereits.
   Sonst stapeln sich beide und es klafft eine Luecke. */
.site-foot{background:var(--ink); color:#a9a093; padding-block:clamp(2.25rem,4vw,3.25rem) 0}
.foot-grid{display:grid; gap:clamp(1.6rem,3.5vw,2.75rem)}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr} }
@media (min-width:1050px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1.1fr} }
.site-foot h4{font-family:var(--ff-b); font-size:.735rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-l); font-weight:700; margin-bottom:1rem}
.site-foot a{transition:color .2s}
.site-foot a:hover{color:var(--gold-l)}
.foot-nav li{margin-bottom:.55rem; font-size:.895rem}
.foot-brand .brand-txt b{color:#f4efe6}
/* Im dunklen Fuss verschmilzt die Kachel mit dem Hintergrund — sichtbar
   bleiben Rahmen und Monogramm. Nur .mono ansprechen, nie alle rect. */
.foot-brand .brand-mark .mono rect{fill:var(--gold-l)}
.foot-brand .brand-mark .fr{stroke:var(--gold-l)}
.foot-brand p{margin-top:1rem; font-size:.885rem; max-width:34ch; line-height:1.62}
.soc{display:flex; gap:.75rem; margin-top:1.6rem}
.soc a{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:.25s}
.soc a:hover{background:var(--gold); color:#fff; transform:translateY(-3px)}
.soc svg{width:23px;height:23px}
.foot-hours li{display:flex; justify-content:space-between; gap:.8rem; font-size:.855rem; margin-bottom:.45rem}
.foot-hours b{font-weight:500; color:#d3cabb; font-variant-numeric:tabular-nums}
.foot-qr{display:flex; gap:1rem; align-items:center; margin-top:1.25rem}
.foot-qr img{width:112px; flex:none; border-radius:var(--r-sm); background:#fff; padding:7px}
.foot-qr p{font-size:.8rem; margin:0; line-height:1.5}
.foot-bar{
  margin-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(255,255,255,.09);
  padding-block:1.15rem; display:flex; flex-wrap:wrap; gap:.7rem 1.35rem;
  align-items:center; justify-content:space-between; font-size:.79rem;
}
.foot-bar nav{display:flex; flex-wrap:wrap; gap:1.15rem}

/* ---------- 19. Cookie-Hinweis ------------------------------ */
.cookie{
  position:fixed; z-index:130; left:1rem; right:1rem; bottom:1rem;
  background:var(--white); border-radius:var(--r); box-shadow:var(--shadow-l);
  padding:1.15rem 1.3rem; max-width:430px; font-size:.855rem; line-height:1.55;
  translate:0 130%; transition:translate .5s var(--ease);
}
.cookie.on{translate:0 0}
.cookie h4{font-family:var(--ff-d); font-size:1.1rem; margin-bottom:.35rem}
.cookie p{color:var(--muted); font-size:.83rem; margin-bottom:.9rem}
.cookie a{color:var(--gold-d); text-decoration:underline}
.cookie .row{display:flex; gap:.55rem; flex-wrap:wrap}

/* ---------- 20. Nach-oben ----------------------------------- */
.up{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; translate:0 12px;
  transition:.32s var(--ease);
}
.up.on{opacity:1; visibility:visible; translate:0 0}
.up:hover{background:var(--gold-d)}
.up svg{width:17px;height:17px}

/* ---------- 21. Einblenden beim Scrollen -------------------- */
/* Der Startzustand gilt nur, wenn JavaScript laeuft: die Klasse .js setzt ein
   winziges Skript im <head>. Faellt das Skript aus, bleibt alles sichtbar —
   niemand bekommt eine halb leere Seite zu sehen. */
.js .rv{opacity:0; translate:0 18px; transition:opacity .7s var(--ease), translate .7s var(--ease)}
.js .rv.in{opacity:1; translate:0 0}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; translate:0 0} }

/* ---------- 21b. Aktionen ----------------------------------- */
/* Diese Seite wird fast immer am Handy im Laden geoeffnet (QR-Code an
   der Theke). Deshalb zuerst schmal gedacht, Bilder gross, Text kurz. */
.akt-sec{padding-top:calc(var(--sec) * .55)}

.akt-hinweis{
  background:var(--sand); border-radius:var(--r); padding:1rem 1.25rem;
  margin-bottom:clamp(1.4rem,3vw,2.1rem); font-size:.93rem;
  border-left:3px solid var(--gold);
}

.akt-grid{display:grid; gap:var(--gut); grid-template-columns:repeat(auto-fill,minmax(275px,1fr))}

.akt-card{
  background:var(--white); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-s); display:flex; flex-direction:column;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.akt-card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}

.akt-bild{position:relative; background:var(--sand-2); aspect-ratio:4/3; overflow:hidden}
.akt-bild img{width:100%; height:100%; object-fit:cover}

.akt-flag{
  position:absolute; left:.85rem; top:.85rem; z-index:2;
  background:var(--ink); color:#fff; border-radius:var(--pill);
  padding:.34em .9em; font-size:.735rem; font-weight:600; letter-spacing:.01em;
}
.akt-flag-inline{position:static; display:inline-block; margin-bottom:.7rem}

.akt-body{padding:1.15rem 1.3rem 1.35rem; display:flex; flex-direction:column; flex:1}
.akt-body h2{font-family:var(--ff-d); font-size:1.32rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.45rem}
.akt-body p{font-size:.9rem; color:var(--muted); line-height:1.58; margin-bottom:.8rem}

.akt-preis{margin-top:auto; margin-bottom:0!important; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.akt-preis b{font-family:var(--ff-d); font-size:1.5rem; font-weight:600; color:var(--gold-d); line-height:1}
.akt-preis s{font-size:.9rem; color:var(--muted); opacity:.75}

.akt-aktion{display:flex; flex-wrap:wrap; gap:.65rem; margin-top:clamp(1.6rem,3vw,2.2rem)}

.akt-leer{
  background:var(--white); border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--shadow-s); max-width:var(--narrow);
}
.akt-leer p{color:var(--muted); margin-top:.8rem}

/* ---------- Aktion als PDF ---------------------------------- */
.akt-pdf{
  margin-top:clamp(2rem,4vw,3.2rem); background:var(--sand);
  border-radius:var(--r-lg); padding:clamp(1.35rem,3vw,2.1rem);
}
.akt-pdf-kopf{display:flex; flex-wrap:wrap; gap:1.1rem; align-items:flex-end; justify-content:space-between}
.akt-pdf-kopf h2{margin-top:.55rem}
.akt-pdf-btns{display:flex; gap:.6rem; flex-wrap:wrap}
.akt-stand{font-size:.83rem; color:var(--muted); margin:.5rem 0 0}

/* Der eingebettete Betrachter bleibt am Handy aus: dort zeigt jeder
   Browser PDFs anders an, der Knopf oben ist verlaesslicher. */
.akt-pdf-view{display:none}
@media (min-width:860px){
  .akt-pdf-view{
    display:block; margin-top:1.5rem; border-radius:var(--r); overflow:hidden;
    background:var(--white); box-shadow:var(--shadow-s); height:min(78vh,880px);
  }
  .akt-pdf-view iframe{width:100%; height:100%; border:0; display:block}
}

.akt-fuss{
  margin-top:clamp(1.8rem,3.5vw,2.6rem); font-size:.8rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:1rem;
}

@media (max-width:520px){
  .akt-grid{grid-template-columns:1fr}
  .akt-bild{aspect-ratio:3/2}
  .akt-aktion .btn{flex:1 1 100%; justify-content:center}
  .akt-pdf-btns{width:100%}
  .akt-pdf-btns .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- 22. Sonstiges ----------------------------------- */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.8rem 1.3rem; border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media print{
  .site-head,.topbar,.drawer,.cookie,.up,.hero-video,.site-foot .soc{display:none!important}
  body{background:#fff}
}