/* Design-System von valbell.de (alle öffentlichen Seiten).
   Früher als <style> in resources/marketing/partials/head.html — seit dem
   Design-Audit 2026-11-10 eine eigene Datei, damit der Browser sie über alle
   Seiten hinweg cacht statt ~45 KB mit jedem HTML neu zu laden.
   Eingebunden mit ?v=<Änderungszeit> (App\Support\PageShell), deshalb
   gefahrlos lange cachebar. Kein Build-Schritt: die Datei wird so
   ausgeliefert, wie sie hier steht (Deploy spiegelt public/). */
:root{
  --birke:#E9EAE0;      /* helles Birkengrau-grün, Papierton */
  --birke-2:#DFE1D4;
  --tanne:#0E3B1D;      /* tiefes Tannengrün, Markenfarbe */
  --rinde:#141C14;      /* Rinde, fast schwarz mit Grünstich */
  --honig:#C08A2E;      /* Eichen-/Honigton, Akzent */
  --akzent:var(--honig); /* wechselt mit der Jahreszeit, siehe „Jahreszeiten“ */
  /* Ein Akzent statt zwei konkurrierender Orangetöne (Design-Audit
     2026-11-10): Flächen, Stempel, Etiketten, Knöpfe nehmen --akzent mit
     --akzent-text darauf; Schrift/Linien auf dunklen Flächen --akzent-hell;
     Zeichen/Linien auf Birke --akzent-dunkel. Werte je Saison unten. */
  --akzent-text:var(--rinde);
  --akzent-hell:#D9A441;
  --akzent-dunkel:#8A5F1A;
  --salbei:#B9C2A6;
  --fehler:#a5432f;
  --linie:rgba(20,28,20,.16);

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --text:"Newsreader", Georgia, serif;

  --rand:clamp(1.25rem, 5vw, 5rem);
  --luft:clamp(4.5rem, 10vw, 9rem);
}

*{box-sizing:border-box}
.skip-link{position:absolute; left:.75rem; top:-4rem; z-index:100; padding:.7rem 1.1rem; background:var(--tanne); color:var(--birke); font-family:var(--display); font-weight:600; text-decoration:none; border-radius:2px}
.skip-link:focus{top:.75rem}
main:focus{outline:none}
/* overflow-x:clip statt hidden: schneidet zu breite Elemente (Laufband,
   geschlossenes Handy-Menü) ab, ohne einen Scroll-Container zu bilden —
   die sticky Navigation funktioniert damit weiter. */
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--birke); color:var(--rinde);
  font-family:var(--text); font-size:clamp(1.02rem,.55vw + .92rem,1.18rem);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

h1,h2,h3,.d{font-family:var(--display); font-weight:800; line-height:.98; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(3.1rem,10.5vw,8.5rem)}
h2{font-size:clamp(2.1rem,5.6vw,4.1rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.42rem); font-weight:600; letter-spacing:-.01em; line-height:1.15}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.15rem,1.5vw,1.42rem); line-height:1.5; font-weight:300}

.wrap{max-width:1320px; margin-inline:auto; padding-inline:var(--rand)}
.eng{max-width:62ch}

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem var(--rand);
  background:rgba(233,234,224,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.nav img{height:34px; width:auto}
.nav-logo{display:inline-flex; align-items:center; min-width:44px; min-height:44px}
/* Nur die Hauptleiste — nicht ".nav ul": das traf auch die Listen im
   Shop-Ausklappmenü und im Handy-Menü (Zeile statt Spalte, nach rechts
   geschoben durch margin-left:auto). */
.nav .nav-links{display:flex; gap:1.6rem; list-style:none; margin:0 0 0 auto; padding:0}
.nav ul a{
  font-family:var(--display); font-size:.95rem; font-weight:600;
  text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent;
}
.nav ul a:hover,.nav ul a:focus-visible{border-color:var(--akzent-dunkel)}

.knopf{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:.98rem;
  text-decoration:none; padding:.72em 1.4em; border-radius:2px;
  background:var(--tanne); color:var(--birke); border:1.5px solid var(--tanne);
  transition:background .18s ease,color .18s ease; cursor:pointer;
}
.knopf:hover,.knopf:focus-visible{background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text)}
/* Akzent-Knopf auf dunklen Flächen (Werkstatt „Sonderwunsch anfragen“). */
.knopf.akzent{background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text)}
.knopf.akzent:hover,.knopf.akzent:focus-visible{background:var(--birke); border-color:var(--birke); color:var(--rinde)}
.knopf.hell{background:transparent; color:inherit}
.knopf.hell:hover{background:var(--rinde); border-color:var(--rinde); color:var(--birke)}
.knopf.klein{font-size:.9rem; padding:.55em 1.1em}
.knopf:disabled{opacity:.55; cursor:default}
@media(max-width:860px){.nav .nav-links{display:none}}

/* ---------- Baumkante (das wiederkehrende Motiv) ---------- */
.kante{display:block; width:100%; height:clamp(28px,4vw,58px)}
.kante path{fill:var(--birke)}
.kante.gruen path{fill:var(--tanne)}
.kante.dreh{transform:scaleX(-1)} /* nur spiegeln: Grün oben, Papier unten */

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--rinde); color:var(--birke); overflow:hidden}
.hero-bild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.52; filter:saturate(.85) contrast(1.05);
}
.hero-inner{
  position:relative; padding:clamp(5rem,15vh,10rem) var(--rand) clamp(6rem,12vh,8rem);
  max-width:1320px; margin-inline:auto;
}
.hero h1{max-width:11ch}
.hero h1 span{display:block; overflow:hidden}
.hero h1 span i{display:block; font-style:normal; animation:auf .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2) i{animation-delay:.1s}
@keyframes auf{from{transform:translateY(105%)}to{transform:translateY(0)}}
.hero .lead{max-width:34ch; margin-top:1.6rem; color:#DCE0D2}
.hero .aktion{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem}
.hero .knopf{background:var(--akzent); border-color:var(--akzent); color:var(--rinde)}
.hero .knopf:hover{background:var(--birke); border-color:var(--birke)}
.hero .knopf.hell{background:transparent; color:var(--birke); border-color:rgba(233,234,224,.45)}
.hero .knopf.hell:hover{background:var(--birke); color:var(--rinde); border-color:var(--birke)}
.hero .kante{position:absolute; bottom:-1px; left:0}

/* ---------- Kleiner Seiten-Kopf (Unterseiten ohne Hero) ---------- */
.seitenkopf{padding-block:clamp(3.5rem,8vw,6rem) 1rem}
.seitenkopf .lead{margin-top:1.2rem; max-width:56ch}

/* ---------- Versprechen-Band ---------- */
.band{
  border-bottom:1px solid var(--linie);
  font-family:var(--display); font-size:.95rem; font-weight:600;
  padding:.95rem 0;
}
.band .wrap{display:flex; flex-wrap:wrap; gap:.55rem 1.4rem; align-items:center}
.band b{font-weight:600}
.raute{color:var(--akzent-dunkel)}
@media(max-width:640px){.band .raute{display:none} .band .wrap{flex-direction:column; align-items:flex-start; gap:.25rem}}

/* ---------- Abschnitte ---------- */
section{padding-block:var(--luft)}
.kopf{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2.8rem}
.kopf p{max-width:44ch; margin:0}

/* ---------- Sortiment ---------- */
.raster{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
.kachel{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  background:var(--rinde); border-radius:3px; min-height:230px;
}
.kachel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kachel:hover img,.kachel:focus-visible img{transform:scale(1.045)}
.kachel figcaption,.kachel .sch{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; min-height:inherit; padding:1.1rem 1.2rem; color:var(--birke);
  background:linear-gradient(to top,rgba(20,28,20,.78) 0%,rgba(20,28,20,.28) 45%,rgba(20,28,20,0) 75%);
}
.kachel .sch strong{font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em}
.kachel .sch em{font-style:normal; font-family:var(--display); font-weight:400; font-size:.85rem; opacity:.8}
.k-a{grid-column:1/3; grid-row:1/3; min-height:480px}
.k-b{grid-column:3/4}
.k-c{grid-column:4/5}
.k-d{grid-column:3/5; min-height:230px}
@media(max-width:820px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .k-a{grid-column:1/3; grid-row:auto; min-height:320px}
  .k-b,.k-c{grid-column:auto}
  .k-d{grid-column:1/3}
}
@media(max-width:520px){.raster{grid-template-columns:1fr} .k-a,.k-d{grid-column:1/2}}

.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem}
.chip{
  font-family:var(--display); font-weight:600; font-size:.93rem; text-decoration:none;
  padding:.5em 1em; border:1.5px solid var(--linie); border-radius:100px;
  transition:border-color .16s ease, background .16s ease;
}
.chip:hover,.chip:focus-visible{border-color:var(--tanne); background:var(--birke-2)}
.chip{display:inline-flex; align-items:center; min-height:44px}

/* ---------- Unikat: Split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split img{border-radius:3px; width:100%}

/* Echte Unikat-Fotos als Stapel Abzüge (statt Grafik) — zeigt, was der
   Text verspricht: jedes Stück einzeln, mit Nummer und Maßstab. */
.abzuege{position:relative; display:block; aspect-ratio:1/1; text-decoration:none; color:var(--rinde)}
.abzug{
  position:absolute; width:68%; margin:0; padding:.7rem .7rem 0; background:#fff;
  border-radius:2px; box-shadow:0 1px 2px rgba(20,28,20,.12), 0 18px 38px -14px rgba(20,28,20,.38);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.abzug img{border-radius:1px; aspect-ratio:4/3; object-fit:cover}
.abzug figcaption{font-family:var(--display); font-weight:800; font-size:clamp(.92rem,1.3vw,1.08rem); letter-spacing:-.01em; padding:.65rem .15rem .8rem}
.abzug figcaption span{font-weight:400; color:#4b544b}
.a1{left:2%; top:4%; transform:rotate(-7deg)}
.a2{right:0; top:16%; transform:rotate(5deg)}
.a3{left:13%; bottom:2%; transform:rotate(-1.5deg)}
.abzuege:hover .a1,.abzuege:focus-visible .a1{transform:rotate(-10deg) translate(-4%,-3%)}
.abzuege:hover .a2,.abzuege:focus-visible .a2{transform:rotate(8deg) translate(4%,-2%)}
.abzuege:hover .a3,.abzuege:focus-visible .a3{transform:rotate(0deg) translateY(3%)}
.stempel{
  position:absolute; right:3%; bottom:6%; z-index:2;
  width:clamp(96px,11vw,128px); aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--akzent); color:var(--akzent-text); transform:rotate(-12deg);
  font-family:var(--display); font-weight:800; font-size:clamp(.72rem,.9vw,.86rem); line-height:1.1; text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 0 0 4px var(--birke), 0 0 0 5.5px var(--akzent), 0 12px 24px -10px rgba(20,28,20,.5);
}
@media(max-width:860px){.abzuege{max-width:520px; width:100%; margin-inline:auto}}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.unikate{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:2.6rem}
.unikat-link{display:block; text-decoration:none; color:inherit}
.unikat-link:hover figure,.unikat-link:focus-visible figure{border-color:var(--tanne)}
.unikat-link:hover figcaption{text-decoration:underline; text-underline-offset:3px}
.unikate figure{margin:0; background:#fff; border-radius:3px; padding:.6rem; border:1px solid var(--linie)}
.unikate img{aspect-ratio:1/1; object-fit:contain; width:100%}
.unikate figcaption{font-family:var(--display); font-size:.82rem; font-weight:600; padding:.5rem .2rem 0}
@media(max-width:640px){.unikate{grid-template-columns:repeat(2,1fr)}}

/* ---------- Werkstatt: dunkles Panel ---------- */
.werkstatt{background:var(--tanne); color:var(--birke); padding-block:0}
.werkstatt .inner{padding-block:var(--luft)}
.werkstatt h2{max-width:16ch}
.werkstatt .lead{color:#CDD6C2; max-width:48ch; margin-top:1.2rem}
.gitter{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:3.4rem; border-top:1px solid rgba(233,234,224,.22);
}
.gitter div{
  padding:1.9rem 1.9rem 1.9rem 0;
  border-bottom:1px solid rgba(233,234,224,.22);
  border-right:1px solid rgba(233,234,224,.22);
}
.gitter div:nth-child(3n){border-right:0; padding-right:0}
.gitter div:not(:nth-child(3n)){padding-right:1.9rem}
.gitter h3{color:var(--akzent-hell); margin-bottom:.5rem}
.gitter p{margin:0; color:#CDD6C2; font-size:.98rem; line-height:1.55}
.werkstatt a.text-link{color:var(--birke); text-decoration:underline; text-underline-offset:3px}
@media(max-width:820px){
  .gitter{grid-template-columns:1fr}
  .gitter div,.gitter div:not(:nth-child(3n)){border-right:0; padding-right:0}
}

/* ---------- Nachhaltigkeit ---------- */
.gruenbox{
  background:var(--birke-2); border-radius:3px; padding:clamp(1.6rem,3vw,2.6rem);
  border-left:4px solid var(--akzent-dunkel);
}
.gruenbox h3{margin-bottom:.6rem}

/* ---------- Partner ---------- */
.partner{display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); padding-block:2.6rem}
.partner img{width:clamp(110px,14vw,170px)}
.partner p{max-width:46ch; margin:0}

/* ---------- Laufband ---------- */
.laufband{background:var(--akzent); color:var(--rinde); overflow:hidden; padding:.85rem 0; white-space:nowrap}
.laufband div{display:inline-block; animation:lauf 34s linear infinite; font-family:var(--display); font-weight:600; font-size:1.02rem}
.laufband span{padding-inline:1.6rem}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Kontaktkarte ---------- */
.kontaktkarte{
  margin-top:2.6rem; background:var(--rinde); color:var(--birke); border-radius:3px;
  padding:clamp(1.8rem,4vw,3rem); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.kk-info{display:flex; flex-direction:column; gap:1.6rem}
.kk-block{display:flex; flex-direction:column; gap:.3rem}
.kk-label{font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--akzent-hell)}
.kk-value{font-size:1.05rem; font-weight:600; text-decoration:none; color:var(--birke)}
a.kk-value:hover{color:var(--akzent-hell)}
.kf{display:flex; flex-direction:column; gap:1rem}
.kf-reihe{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.kf-feld{display:flex; flex-direction:column; gap:.35rem}
.kf-feld label{font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#B8C2AE}
.kf-feld input,.kf-feld textarea{
  background:rgba(233,234,224,.08); border:1px solid rgba(233,234,224,.28); border-radius:4px;
  padding:.7em .8em; color:var(--birke); font:inherit; font-size:.95rem;
}
.kf-feld textarea{resize:vertical; min-height:88px}
.kf-feld input::placeholder,.kf-feld textarea::placeholder{color:#8a9484}
.kf-feld input:focus-visible,.kf-feld textarea:focus-visible{outline:2px solid var(--akzent-hell); outline-offset:1px}
.kf-hinweis{font-size:.85rem; color:#B8C2AE; margin:0}
.kf-hinweis.fehler{color:#e08a76}
.kf-erfolg{font-size:1.05rem; font-weight:600; color:var(--birke); margin:0}
@media(max-width:860px){.kontaktkarte{grid-template-columns:1fr} .kf-reihe{grid-template-columns:1fr}}

/* ---------- Markttermine ---------- */
.termine{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.termine li{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:baseline;
  padding:1.3rem 0; border-top:1px solid var(--linie);
}
.termine li:last-child{border-bottom:1px solid var(--linie)}
.termine .datum{font-family:var(--display); font-weight:800; font-size:1.05rem; min-width:11ch}
.termine .ort{font-weight:600}
.termine .info{color:#4b544b; flex-basis:100%}
.termine .leer{color:#4b544b; padding:1.3rem 0; border-top:1px solid var(--linie); border-bottom:1px solid var(--linie)}

/* ---------- Rechtstexte ---------- */
.rechtstext h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-top:2.6rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{margin-top:1.6rem}
.rechtstext p{max-width:70ch}
.rechtstext ul{max-width:70ch; padding-left:1.2rem}
.hinweisbox{
  background:var(--birke-2); border-left:4px solid var(--fehler); border-radius:3px;
  padding:1.2rem 1.4rem; margin-bottom:2.6rem; max-width:70ch; font-size:.95rem;
}

/* ---------- Shop-Menü (Navigation) ---------- */
.nav-links .hat-menu{position:relative}
.ausklapp{
  position:absolute; top:100%; left:-1.2rem; padding-top:.9rem;
  visibility:hidden; opacity:0; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.hat-menu:hover .ausklapp,.hat-menu:focus-within .ausklapp{visibility:visible; opacity:1; transform:none}
.ausklapp .shopmenu{
  background:var(--birke); border:1px solid var(--linie); border-radius:3px;
  box-shadow:0 18px 40px -18px rgba(20,28,20,.35); padding:.8rem 1.2rem; min-width:250px;
}
.shopmenu{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.shopmenu ul{list-style:none; margin:.1rem 0 .3rem .9rem; padding:0; display:grid; gap:.1rem}
.nav .shopmenu a{display:inline-block; padding:.28rem 0; font-size:.95rem; border-bottom:1.5px solid transparent}
.nav .shopmenu ul a{font-weight:400; font-size:.9rem}

/* Kein position:relative hier — das Panel soll sich an der (sticky) .nav
   ausrichten, nicht am kleinen Menü-Knopf. */
.nav-mobil{display:none}
.nav-mobil summary{list-style:none; cursor:pointer; width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 9px}
.nav-mobil summary::-webkit-details-marker{display:none}
.nav-mobil summary span{display:block; height:2px; background:var(--rinde); border-radius:2px; transition:transform .18s ease, opacity .18s ease}
.nav-mobil[open] summary span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-mobil[open] summary span:nth-child(2){opacity:0}
.nav-mobil[open] summary span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Absolut unter der Navigationsleiste statt position:fixed: die .nav hat
   backdrop-filter, und das macht sie zum Bezugsrahmen für fixierte
   Kinder — ein fixed-Panel wurde dadurch nur so hoch wie die Leiste. */
.nav-mobil-panel{
  position:absolute; left:0; right:0; top:100%;
  height:calc(100vh - 58px); height:calc(100dvh - 58px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--birke); border-top:1px solid var(--linie); padding:1.4rem var(--rand) 3rem;
}
.nav-mobil-panel a{text-decoration:none; font-family:var(--display); font-weight:600}
.nav-mobil-panel .shopmenu a{display:block; padding:.45rem 0; font-size:1.1rem}
.nav-mobil-panel .shopmenu ul a{font-size:1rem; font-weight:400}
.nav-mobil-shop{display:block; font-size:1.35rem; margin-bottom:.6rem}
.nav-mobil-rest{list-style:none; margin:1.2rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--linie); display:grid; gap:.5rem}
.nav-mobil-rest a{font-size:1.1rem}
@media(max-width:860px){
  .nav-mobil{display:block}
  .nav .nav-kontakt{display:none}
  .nav .nav-mobil{margin-left:auto}
}

/* ---------- Shop: Brotkrumen, Kategorien, Produktkarten ---------- */
.brotkrumen{font-family:var(--display); font-size:.88rem; font-weight:600; margin-bottom:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; color:#4b544b}
.brotkrumen{align-items:center; margin-bottom:.5rem}
.brotkrumen a{text-decoration:none; display:inline-block; padding:.7rem 0}
/* Lange Kategorienamen ("Wandflaschenöffner") passen sonst nicht aufs Handy. */
.seitenkopf h1,.produkt-titel{overflow-wrap:break-word; hyphens:auto}
@media(max-width:640px){.seitenkopf h1{font-size:clamp(2.2rem,11vw,3.1rem)}}
/* Lange Kategorienamen (Silbentrennung::istLang): kleinere Stufe, damit ein
   Wort wie „Wandflaschenöffner“ auf eine Zeile passt; sonst greifen die
   weichen Trennstriche (&shy;) aus Silbentrennung::html(). */
.seitenkopf h1.titel-lang{font-size:clamp(2.6rem,6.6vw,6rem)}
@media(max-width:640px){.seitenkopf h1.titel-lang{font-size:clamp(1.9rem,8.6vw,2.6rem)}}
.seitenkopf h1.titel-klein{font-size:clamp(2.4rem,6vw,4.2rem)}
.brotkrumen a:hover{color:var(--tanne); text-decoration:underline}
.seitenkopf .lead p{margin:0 0 .6rem}

.shop-kategorien{padding-block:1.5rem 0}
.kat-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.9rem}
.kat-kachel{
  position:relative; display:flex; align-items:flex-end; aspect-ratio:4/3; overflow:hidden;
  border-radius:3px; background:var(--tanne); color:var(--birke); text-decoration:none;
}
.kat-kachel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kat-kachel::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,28,20,.75),rgba(20,28,20,0) 60%)}
.kat-kachel span{position:relative; z-index:1; padding:.9rem 1rem; font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:-.01em}
.kat-kachel:hover img,.kat-kachel:focus-visible img{transform:scale(1.05)}
.kat-kachel span{overflow-wrap:break-word; hyphens:manual}
/* Handy: zwei Spalten statt einer ~2700 px hohen Kachelsäule — die
   Produkte beginnen so innerhalb der ersten 1,5 Bildschirme. */
@media(max-width:640px){
  .shop-kategorien{padding-top:.5rem}
  .kat-raster{grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem}
  .kat-kachel{aspect-ratio:1/1}
  .kat-kachel span{padding:.6rem .7rem; font-size:.95rem; line-height:1.15}
}

.shop-liste{padding-top:clamp(2.5rem,5vw,4rem)}
.anzahl{font-family:var(--display); font-size:.9rem; font-weight:600; color:#4b544b; margin-bottom:1.2rem}
/* Leere Kategorie, Anfrage-Kategorie, geschlossener Warenkorb: ein Block
   mit klarer nächster Aktion statt eines Satzes ins Leere. */
.leer-block{max-width:44rem; background:#fff; border:1px solid var(--linie); border-left:4px solid var(--tanne); border-radius:3px; padding:clamp(1.3rem,3vw,2rem)}
.leer-block h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.7rem}
.leer-block p{max-width:56ch}
.anfrage-block{margin-bottom:clamp(2rem,4vw,3rem)}
.leer-aktion{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 0}
.seitenkopf.fehlerseite{padding-bottom:var(--luft)}
.anzahl a{color:inherit; text-underline-offset:3px; display:inline-block; padding-block:.5rem}
.karten{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,2vw,1.6rem) clamp(.7rem,1.6vw,1.2rem)}
@media(max-width:1040px){.karten{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.karten{grid-template-columns:repeat(2,1fr)}}
.karte{display:flex; flex-direction:column; gap:.7rem; text-decoration:none}
.karte-bild{position:relative; display:block; aspect-ratio:1/1; background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.karte-bild img{width:100%; height:100%; object-fit:contain; padding:2%; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.karte:hover .karte-bild img,.karte:focus-visible .karte-bild img{transform:scale(1.05)}
.karte.ausverkauft .karte-bild img{opacity:.55}
.etikett{position:absolute; left:.6rem; top:.6rem; font-family:var(--display); font-size:.75rem; font-weight:600; padding:.25em .7em; border-radius:100px; background:var(--rinde); color:var(--birke)}
.etikett.hell{background:var(--akzent); color:var(--akzent-text)}
.karte-text{display:flex; flex-direction:column; gap:.15rem}
.karte-text strong{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.25}
.karte-text .preis{font-size:.98rem}
.karte:hover .karte-text strong{text-decoration:underline; text-decoration-color:var(--akzent-dunkel); text-underline-offset:3px}

/* ---------- Produktseite ---------- */
.produkt{padding-block:clamp(2rem,5vw,3.5rem) var(--luft)}
.produkt-raster{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
@media(max-width:860px){.produkt-raster{grid-template-columns:minmax(0,1fr)}}
.galerie{position:sticky; top:84px}
@media(max-width:860px){.galerie{position:static}}
/* Kein Zwangs-Quadrat: das Foto bestimmt das Seitenverhältnis (width/height-
   Attribute), Unikat-Fotos in 4:3 bekommen keine weißen Balken mehr. Sehr
   hohe Bilder werden begrenzt und dann eingepasst. */
.galerie-haupt{background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.galerie-haupt img{width:100%; height:auto; max-height:min(78vh,760px); object-fit:contain}
.galerie-daumen{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.7rem}
.galerie-daumen button{width:74px; height:74px; padding:0; background:#fff; border:1px solid var(--linie); border-radius:3px; cursor:pointer; overflow:hidden}
.galerie-daumen button:hover{border-color:var(--tanne)}
.galerie-daumen img{width:100%; height:100%; object-fit:contain}
.wahl-unikat .wahl-knopf img,.wahl-verkauft img,.wk-bild img,.ue-bild img{height:auto}
.produkt-titel{font-size:clamp(2rem,4.4vw,3.2rem)}
.produkt-preis{font-family:var(--display); font-size:1.5rem; font-weight:600; margin:1rem 0 0}
.produkt-steuer{font-size:.88rem; color:#4b544b; margin-bottom:1.6rem}
.produkt-steuer a{color:inherit; text-underline-offset:3px; display:inline-block; padding-block:.8rem; margin-block:-.8rem}
.wahl{border:0; margin:0 0 .6rem; padding:0}
.wahl legend{font-family:var(--display); font-weight:600; font-size:.95rem; margin-bottom:.7rem; padding:0}
.wahl legend span{font-weight:400; color:#4b544b; margin-left:.4rem}
.wahl-liste{display:flex; flex-wrap:wrap; gap:.5rem}
.wahl-knopf{
  font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--rinde);
  background:transparent; border:1.5px solid var(--linie); border-radius:100px; padding:.5em 1.05em; cursor:pointer;
}
.wahl-knopf:hover{border-color:var(--tanne)}
.wahl-knopf.aktiv{background:var(--tanne); border-color:var(--tanne); color:var(--birke)}
.wahl-unikat .wahl-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.55rem; max-height:430px; overflow-y:auto; padding:2px}
.wahl-unikat .wahl-knopf{display:flex; flex-direction:column; align-items:center; gap:.3rem; border-radius:3px; padding:.35rem .35rem .4rem; background:#fff; color:var(--rinde)}
.wahl-unikat .wahl-knopf img{width:100%; aspect-ratio:1/1; object-fit:contain}
.wahl-unikat .wahl-knopf span{font-size:.8rem}
.wahl-unikat .wahl-knopf.aktiv{background:#fff; color:var(--rinde); border-color:var(--tanne); box-shadow:0 0 0 2px var(--tanne)}
/* Kürzlich verkaufte Unikate: sichtbar, ausgegraut, nicht wählbar. */
.wahl-verkauft{position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem; border:1.5px dashed var(--linie); border-radius:3px; padding:.35rem .35rem .4rem; background:#fff; font-family:var(--display); font-weight:600}
.wahl-verkauft img{width:100%; aspect-ratio:1/1; object-fit:contain; opacity:.45; filter:grayscale(.6)}
.wahl-verkauft span{font-size:.8rem; color:#4b544b; text-decoration:line-through}
.wahl-verkauft em{position:absolute; top:28%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); font-style:normal; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; background:var(--rinde); color:var(--birke); padding:.2em .6em; border-radius:2px}
.gewaehlt{font-size:.95rem; margin-bottom:1.4rem}
.knopf.gross{display:block; text-align:center; font-size:1.05rem; padding:.95em 1.4em}
.produkt-klein{font-size:.88rem; color:#4b544b; margin-top:.7rem}
.ausverkauft-hinweis{font-weight:600; margin-bottom:1.2rem}
.beschreibung{margin-top:2.2rem; padding-top:1.8rem; border-top:1px solid var(--linie)}
.beschreibung p{margin:0 0 .9rem}
.vorteile{list-style:none; margin:1.8rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--linie); display:grid; gap:.45rem; font-size:.95rem}
.vorteile li::before{content:"◆"; color:var(--akzent-dunkel); margin-right:.6rem; font-size:.7rem; vertical-align:2px}

/* ---------- Jahreszeiten ---------- */
/* data-saison am <html> setzt App\Support\Season. Bewusst nur Akzente:
   --akzent (hell, für Flächen mit --rinde-Text: Laufband, Hero-Knopf —
   alle Werte mit Rinde-Text >= 4.5:1, WCAG AA) und --akzent-dunkel (für
   Zeichen auf Birke, z. B. die Rauten). Ornament + Laufband-Satz nur
   auf der Startseite (partials/saison-ornament.blade.php). */
[data-saison="fruehjahr"]{--akzent:#AFC978; --akzent-hell:#AFC978; --akzent-dunkel:#5E7F2A}
[data-saison="sommer"]{--akzent:#E5B647; --akzent-hell:#E5B647; --akzent-dunkel:#A0701A}
[data-saison="oktoberfest"]{--akzent:#A3C8EA; --akzent-hell:#A3C8EA; --akzent-dunkel:#2F6AA3}
[data-saison="herbst"]{--akzent:#D98A52; --akzent-hell:#D98A52; --akzent-dunkel:#A4502A}
[data-saison="winter"]{--akzent:#C3D5DE; --akzent-hell:#C3D5DE; --akzent-dunkel:#4E7487}
/* --akzent-hell = Schrift/Linien auf Tanne/Rinde: Frühjahr–Winter ≥ 4,6:1
   auf Tanne. Weihnachten s. u. (Beerenrot wäre dort nur 1,9:1). */
/* Weihnachten als einzige Saison mit dunklem Akzent (Beerenrot): ein
   helles Rot wirkte lachsfarben. Darauf deshalb Birke-Text (5.3:1). */
[data-saison="weihnachten"]{--akzent:#A8352B; --akzent-dunkel:#A8352B; --akzent-text:var(--birke); --akzent-hell:#E8A598}
[data-saison="weihnachten"] .laufband,
[data-saison="weihnachten"] .hero .knopf:not(.hell){color:var(--birke)}
[data-saison="weihnachten"] .hero .knopf:not(.hell):hover{color:var(--rinde)}

/* Ornament: absolut im Hero, verschiebt nichts am Layout. Es „steht“
   rechts auf der Baumkante (Abstand ≈ halbe Kantenhöhe), statt frei im
   Foto zu schweben — so gehört es sichtbar zum Motiv der Seite. */
.saison-ornament{
  position:absolute; right:var(--rand); bottom:calc(clamp(28px,4vw,58px) * .5);
  width:clamp(62px,12vw,172px); aspect-ratio:1; pointer-events:none;
  color:var(--birke);
}
.saison-ornament svg{display:block; width:100%; height:100%; overflow:visible}
.saison-ornament .strich{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.saison-ornament .duenn{stroke-width:1.6}
.saison-ornament .akzent{fill:var(--akzent)}
.saison-ornament .schwing{transform-box:fill-box; transform-origin:50% 0; animation:schwing 7s ease-in-out infinite alternate}
.saison-ornament .schweb{transform-box:fill-box; transform-origin:center; animation:schweb 5s ease-in-out infinite alternate}
.saison-ornament .flacker{transform-box:fill-box; transform-origin:50% 100%; animation:flacker 1.8s ease-in-out infinite alternate}
@keyframes schwing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes schweb{from{transform:translate(0,0)}to{transform:translate(-4px,-5px)}}
@keyframes flacker{from{transform:scale(1,1)}to{transform:scale(.88,1.1)}}

/* Weihnachten: ein paar Flocken über dem Hero, reines CSS. Fünf Ebenen
   mit je einer Flocke und „krummen“ Kachelgrößen, damit kein Raster
   erkennbar ist; jede Ebene wandert pro Durchlauf genau eine Kachel
   (nahtlos) und ist dadurch unterschiedlich schnell. */
[data-saison="weihnachten"] .hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 42%, rgba(255,255,255,.5) 0 1.1px, transparent 2px),
    radial-gradient(circle at 34% 76%, rgba(255,255,255,.45) 0 2.1px, transparent 3.3px),
    radial-gradient(circle at 86% 88%, rgba(255,255,255,.6) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 52% 8%, rgba(255,255,255,.4) 0 1.8px, transparent 2.9px);
  background-size:310px 420px, 430px 380px, 530px 610px, 370px 530px, 590px 470px;
  animation:schnee 28s linear infinite;
}
@keyframes schnee{
  from{background-position:0 0, 40px 0, 120px 0, 200px 0, 260px 0}
  to{background-position:0 420px, 40px 380px, 120px 610px, 200px 530px, 260px 470px}
}

/* Papier: leicht getönte Birke + sehr zartes, großes Muster (5–11 %
   Deckkraft) auf dem Seitenhintergrund. Weiße Produktflächen (.karte-bild,
   .galerie-haupt, .abzug …) und dunkle Flächen haben eigene Hintergründe
   und bleiben deshalb unberührt. Kontrast geprüft auch an der dunkelsten
   Musterstelle: Rinde ≥ 12.3:1, Grau #4b544b ≥ 5.6:1. */
:root{--saison-papier:var(--birke)}
[data-saison="fruehjahr"]{--saison-papier:#EAEDDF}
[data-saison="sommer"]{--saison-papier:#EEEBDC}
[data-saison="oktoberfest"]{--saison-papier:#E6EBE7; --muster-groesse:144px 90px}
[data-saison="herbst"]{--saison-papier:#EDE6DA}
[data-saison="winter"]{--saison-papier:#E5EAEA}
[data-saison="weihnachten"]{--saison-papier:#ECE6DD}
body{
  background-color:var(--saison-papier);
  background-image:var(--saison-muster, none);
  background-size:var(--muster-groesse, 340px 340px);
}
/* Hinter Produktlisten und Produktseite nur der getönte Papierton, kein
   Muster — die Stücke sollen allein wirken (Design-Audit 2026-11-10). */
.shop-liste,.produkt,.shop-kategorien{background-color:var(--saison-papier)}
/* Baumkanten-Flächen in Papierfarbe, sonst gäbe es eine helle Naht */
.kante:not(.gruen) path{fill:var(--saison-papier)}

/* Baumkante im Hero (Startseite, Firmenkunden): Deko liegt AUF der
   Wellenlinie — gleiche Kurve, gleiche Streckung (viewBox 1200×80 mit
   20 Einheiten Luft nach oben, Höhe = Kantenhöhe × 80/60). Pseudo-
   Element statt Markup, damit keine SVG-Instanz angefasst werden muss. */
.hero::before,.fk-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  height:calc(clamp(28px,4vw,58px) * 80 / 60); pointer-events:none;
  background:var(--kante-deko, none) 0 0/100% 100% no-repeat;
}

/* Allgäu-Silhouette über dem Footer (partials/saison-landschaft.blade.php).
   Feste Höhe → kein Layout-Sprung; „slice“ schneidet auf dem Handy die
   Ränder ab, statt Tannen zu stauchen. */
.saison-landschaft{display:block; width:100%; height:clamp(54px,8vw,112px); margin-bottom:-1px}
.saison-landschaft .vorn{fill:var(--rinde)}
.saison-landschaft .fern{fill:var(--land-fern, #B9C2B4)}
.saison-landschaft .mitte{fill:var(--land-mitte, #5E7F4A)}
.saison-landschaft .gipfel{fill:var(--land-schnee, #F4F5F0)}
[data-saison="fruehjahr"] .saison-landschaft{--land-fern:#BCC9B6; --land-mitte:#83A557}
[data-saison="sommer"] .saison-landschaft{--land-fern:#A9B9A6; --land-mitte:#3F6B35}
[data-saison="oktoberfest"] .saison-landschaft{--land-fern:#AFC0C8; --land-mitte:#55803D}
[data-saison="herbst"] .saison-landschaft{--land-fern:#C6B39B; --land-mitte:#B5652F}
[data-saison="winter"] .saison-landschaft{--land-fern:#B4C6D1; --land-mitte:#D2DDE2}
[data-saison="weihnachten"] .saison-landschaft{--land-fern:#BCC3CF; --land-mitte:#D8DFE2}

/* Hero-Stimmung: das Foto liegt mit 52 % Deckkraft auf der Hero-Fläche —
   deren Farbe (plus ein sanfter Filter) färbt die Stimmung. Alle Töne
   bleiben sehr dunkel, die weiße Headline behält ihren Kontrast. */
[data-saison="fruehjahr"] .hero{background:#10241A}
[data-saison="fruehjahr"] .hero-bild{filter:saturate(.8) brightness(1.04) contrast(1.05)}
[data-saison="sommer"] .hero{background:#2A210C}
[data-saison="sommer"] .hero-bild{opacity:.56; filter:saturate(.95) brightness(1.06) contrast(1.05)}
[data-saison="oktoberfest"] .hero{background:#14202A}
[data-saison="herbst"] .hero{background:#2E1608}
[data-saison="herbst"] .hero-bild{filter:saturate(1) sepia(.18) contrast(1.05)}
[data-saison="winter"] .hero{background:#0D1A24}
[data-saison="winter"] .hero-bild{filter:saturate(.45) brightness(.95) contrast(1.08)}
[data-saison="weihnachten"] .hero{background:radial-gradient(ellipse at 78% 72%, #5C2812 0, #1C0F0A 62%)}
[data-saison="weihnachten"] .hero-bild{filter:saturate(.75) contrast(1.05)}

/* @saison-daten@ */
/* Muster + Kanten-Deko (erzeugt, Inline-SVG als Data-URI) */
[data-saison="fruehjahr"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' %3E%3Cg fill='%239C5A70' fill-opacity='.075'%3E%3Cpath transform='translate(40 60) rotate(20)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(190 30) rotate(-40)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(260 170) rotate(70)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(110 230) rotate(10)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(300 290) rotate(-20)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(30 300) rotate(50)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cpath transform='translate(180 120) rotate(120)' d='M0 0 C6 -10 16 -8 18 0 C16 8 6 10 0 0Z'/%3E%3Cg transform='translate(230 80)'%3E%3Cellipse cy='-7' rx='4' ry='7' transform='rotate(0)'/%3E%3Cellipse cy='-7' rx='4' ry='7' transform='rotate(72)'/%3E%3Cellipse cy='-7' rx='4' ry='7' transform='rotate(144)'/%3E%3Cellipse cy='-7' rx='4' ry='7' transform='rotate(216)'/%3E%3Cellipse cy='-7' rx='4' ry='7' transform='rotate(288)'/%3E%3C/g%3E%3Cg transform='translate(70 160)'%3E%3Cellipse cy='-6' rx='3.4' ry='6' transform='rotate(0)'/%3E%3Cellipse cy='-6' rx='3.4' ry='6' transform='rotate(72)'/%3E%3Cellipse cy='-6' rx='3.4' ry='6' transform='rotate(144)'/%3E%3Cellipse cy='-6' rx='3.4' ry='6' transform='rotate(216)'/%3E%3Cellipse cy='-6' rx='3.4' ry='6' transform='rotate(288)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M46 28.4 Q45 23 42 19.4 M50 28.4 Q51 22.1 50 17.6 M54 28.4 Q56 23 59 20.3' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M206 16.4 Q205 11 202 7.4 M210 16.4 Q211 10.1 210 5.6 M214 16.4 Q216 11 219 8.3' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M376 33.6 Q375 28.2 372 24.6 M380 33.6 Q381 27.3 380 22.8 M384 33.6 Q386 28.2 389 25.5' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M516 26.5 Q515 21.1 512 17.5 M520 26.5 Q521 20.2 520 15.7 M524 26.5 Q526 21.1 529 18.4' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M686 22.3 Q685 16.9 682 13.3 M690 22.3 Q691 16 690 11.5 M694 22.3 Q696 16.9 699 14.2' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M846 36.3 Q845 30.9 842 27.3 M850 36.3 Q851 30 850 25.5 M854 36.3 Q856 30.9 859 28.2' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M996 19.8 Q995 14.4 992 10.8 M1000 19.8 Q1001 13.5 1000 9 M1004 19.8 Q1006 14.4 1009 11.7' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1166 31.9 Q1165 26.5 1162 22.9 M1170 31.9 Q1171 25.6 1170 21.1 M1174 31.9 Q1176 26.5 1179 23.8' fill='none' stroke='%236E9A3A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M120 30.8 L120 19.8' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='120' cy='19.8' r='4.2' fill='%23F4D3D9'/%3E%3Ccircle cx='120' cy='19.8' r='1.6' fill='%23E5B647'/%3E%3Cpath d='M450 19.4 L450 8.4' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='450' cy='8.4' r='4.2' fill='%23FFFFFF'/%3E%3Ccircle cx='450' cy='8.4' r='1.6' fill='%23E5B647'/%3E%3Cpath d='M760 19.4 L760 8.4' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='760' cy='8.4' r='4.2' fill='%23F4D3D9'/%3E%3Ccircle cx='760' cy='8.4' r='1.6' fill='%23E5B647'/%3E%3Cpath d='M1080 26.9 L1080 15.9' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='1080' cy='15.9' r='4.2' fill='%23FFFFFF'/%3E%3Ccircle cx='1080' cy='15.9' r='1.6' fill='%23E5B647'/%3E%3C/svg%3E");
}
[data-saison="sommer"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' %3E%3Cg fill='none' stroke='%236B5A1E' stroke-opacity='.08' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M40 330 Q34 290 22 260'/%3E%3Cpath d='M48 330 Q50 280 44 250'/%3E%3Cpath d='M60 330 Q54 290 42 260'/%3E%3Cpath d='M68 330 Q70 280 64 250'/%3E%3Cpath d='M210 160 Q204 120 192 90'/%3E%3Cpath d='M218 160 Q220 110 214 80'/%3E%3Cpath d='M228 160 Q222 120 210 90'/%3E%3Cpath d='M236 160 Q238 110 232 80'/%3E%3Ccircle cx='270' cy='270' r='16'/%3E%3Cpath d='M294 270 L304 270'/%3E%3Cpath d='M290.8 282 L299.4 287'/%3E%3Cpath d='M282 290.8 L287 299.4'/%3E%3Cpath d='M270 294 L270 304'/%3E%3Cpath d='M258 290.8 L253 299.4'/%3E%3Cpath d='M249.2 282 L240.6 287'/%3E%3Cpath d='M246 270 L236 270'/%3E%3Cpath d='M249.2 258 L240.6 253'/%3E%3Cpath d='M258 249.2 L253 240.6'/%3E%3Cpath d='M270 246 L270 236'/%3E%3Cpath d='M282 249.2 L287 240.6'/%3E%3Cpath d='M290.8 258 L299.4 253'/%3E%3Ccircle cx='110' cy='70' r='10'/%3E%3C/g%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M36 27.6 Q35 20.4 32 15.6 M40 27.6 Q41 19.2 40 13.2 M44 27.6 Q46 20.4 49 16.8' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M156 22.2 Q155 15 152 10.2 M160 22.2 Q161 13.8 160 7.8 M164 22.2 Q166 15 169 11.4' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M266 27.9 Q265 20.7 262 15.9 M270 27.9 Q271 19.5 270 13.5 M274 27.9 Q276 20.7 279 17.1' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M396 29 Q395 21.8 392 17 M400 29 Q401 20.6 400 14.6 M404 29 Q406 21.8 409 18.2' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M526 28.5 Q525 21.3 522 16.5 M530 28.5 Q531 20.1 530 14.1 M534 28.5 Q536 21.3 539 17.7' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M656 29.1 Q655 21.9 652 17.1 M660 29.1 Q661 20.7 660 14.7 M664 29.1 Q666 21.9 669 18.3' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M776 22.7 Q775 15.5 772 10.7 M780 22.7 Q781 14.3 780 8.3 M784 22.7 Q786 15.5 789 11.9' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M906 35.6 Q905 28.4 902 23.6 M910 35.6 Q911 27.2 910 21.2 M914 35.6 Q916 28.4 919 24.8' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1036 21.4 Q1035 14.2 1032 9.4 M1040 21.4 Q1041 13 1040 7 M1044 21.4 Q1046 14.2 1049 10.6' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M1156 32.4 Q1155 25.2 1152 20.4 M1160 32.4 Q1161 24 1160 18 M1164 32.4 Q1166 25.2 1169 21.6' fill='none' stroke='%234F7A2A' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M215 16.6 L215 1.6' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='215' cy='1.6' r='4.2' fill='%23FFFFFF'/%3E%3Ccircle cx='215' cy='1.6' r='1.6' fill='%23E5B647'/%3E%3Cpath d='M590 36.9 L590 21.9' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='590' cy='21.9' r='4.2' fill='%23E5B647'/%3E%3Ccircle cx='590' cy='21.9' r='1.6' fill='%238A5A1A'/%3E%3Cpath d='M980 22.2 L980 7.2' stroke='%235E7F2A' stroke-width='1.4'/%3E%3Ccircle cx='980' cy='7.2' r='4.2' fill='%23FFFFFF'/%3E%3Ccircle cx='980' cy='7.2' r='1.6' fill='%23E5B647'/%3E%3C/svg%3E");
}
[data-saison="oktoberfest"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60' %3E%3Cpath d='M48 0 L96 30 L48 60 L0 30Z' fill='%232F6AA3' fill-opacity='.028'/%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M6 21.1 L12 25.1 L6 29.1 L0 25.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M18 19.3 L24 23.3 L18 27.3 L12 23.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M30 18.7 L36 22.7 L30 26.7 L24 22.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M42 19.2 L48 23.2 L42 27.2 L36 23.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M54 20.4 L60 24.4 L54 28.4 L48 24.4 Z' fill='%234F8FCB'/%3E%3Cpath d='M66 21.9 L72 25.9 L66 29.9 L60 25.9 Z' fill='%23FFFFFF'/%3E%3Cpath d='M78 23.4 L84 27.4 L78 31.4 L72 27.4 Z' fill='%234F8FCB'/%3E%3Cpath d='M90 24.3 L96 28.3 L90 32.3 L84 28.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M102 24.3 L108 28.3 L102 32.3 L96 28.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M114 23.3 L120 27.3 L114 31.3 L108 27.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M126 21.3 L132 25.3 L126 29.3 L120 25.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M138 18.8 L144 22.8 L138 26.8 L132 22.8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M150 16 L156 20 L150 24 L144 20 Z' fill='%234F8FCB'/%3E%3Cpath d='M162 13.2 L168 17.2 L162 21.2 L156 17.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M174 10.7 L180 14.7 L174 18.7 L168 14.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M186 8.9 L192 12.9 L186 16.9 L180 12.9 Z' fill='%23FFFFFF'/%3E%3Cpath d='M198 7.9 L204 11.9 L198 15.9 L192 11.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M210 7.9 L216 11.9 L210 15.9 L204 11.9 Z' fill='%23FFFFFF'/%3E%3Cpath d='M222 8.8 L228 12.8 L222 16.8 L216 12.8 Z' fill='%234F8FCB'/%3E%3Cpath d='M234 10.7 L240 14.7 L234 18.7 L228 14.7 Z' fill='%23FFFFFF'/%3E%3Cpath d='M246 13.1 L252 17.1 L246 21.1 L240 17.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M258 16.1 L264 20.1 L258 24.1 L252 20.1 Z' fill='%23FFFFFF'/%3E%3Cpath d='M270 19.4 L276 23.4 L270 27.4 L264 23.4 Z' fill='%234F8FCB'/%3E%3Cpath d='M282 22.5 L288 26.5 L282 30.5 L276 26.5 Z' fill='%23FFFFFF'/%3E%3Cpath d='M294 25.5 L300 29.5 L294 33.5 L288 29.5 Z' fill='%234F8FCB'/%3E%3Cpath d='M306 27.9 L312 31.9 L306 35.9 L300 31.9 Z' fill='%23FFFFFF'/%3E%3Cpath d='M318 29.5 L324 33.5 L318 37.5 L312 33.5 Z' fill='%234F8FCB'/%3E%3Cpath d='M330 30.3 L336 34.3 L330 38.3 L324 34.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M342 30.2 L348 34.2 L342 38.2 L336 34.2 Z' fill='%234F8FCB'/%3E%3Cpath d='M354 29.3 L360 33.3 L354 37.3 L348 33.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M366 27.7 L372 31.7 L366 35.7 L360 31.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M378 25.5 L384 29.5 L378 33.5 L372 29.5 Z' fill='%23FFFFFF'/%3E%3Cpath d='M390 22.9 L396 26.9 L390 30.9 L384 26.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M402 20 L408 24 L402 28 L396 24 Z' fill='%23FFFFFF'/%3E%3Cpath d='M414 17.1 L420 21.1 L414 25.1 L408 21.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M426 14.4 L432 18.4 L426 22.4 L420 18.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M438 12.2 L444 16.2 L438 20.2 L432 16.2 Z' fill='%234F8FCB'/%3E%3Cpath d='M450 10.9 L456 14.9 L450 18.9 L444 14.9 Z' fill='%23FFFFFF'/%3E%3Cpath d='M462 10.3 L468 14.3 L462 18.3 L456 14.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M474 10.7 L480 14.7 L474 18.7 L468 14.7 Z' fill='%23FFFFFF'/%3E%3Cpath d='M486 12 L492 16 L486 20 L480 16 Z' fill='%234F8FCB'/%3E%3Cpath d='M498 13.8 L504 17.8 L498 21.8 L492 17.8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M510 15.9 L516 19.9 L510 23.9 L504 19.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M522 18.4 L528 22.4 L522 26.4 L516 22.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M534 20.9 L540 24.9 L534 28.9 L528 24.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M546 23.3 L552 27.3 L546 31.3 L540 27.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M558 25.5 L564 29.5 L558 33.5 L552 29.5 Z' fill='%234F8FCB'/%3E%3Cpath d='M570 27 L576 31 L570 35 L564 31 Z' fill='%23FFFFFF'/%3E%3Cpath d='M582 28.1 L588 32.1 L582 36.1 L576 32.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M594 28.5 L600 32.5 L594 36.5 L588 32.5 Z' fill='%23FFFFFF'/%3E%3Cpath d='M606 28.3 L612 32.3 L606 36.3 L600 32.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M618 27.4 L624 31.4 L618 35.4 L612 31.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M630 26.1 L636 30.1 L630 34.1 L624 30.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M642 24.2 L648 28.2 L642 32.2 L636 28.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M654 21.9 L660 25.9 L654 29.9 L648 25.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M666 19.3 L672 23.3 L666 27.3 L660 23.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M678 16.5 L684 20.5 L678 24.5 L672 20.5 Z' fill='%234F8FCB'/%3E%3Cpath d='M690 13.8 L696 17.8 L690 21.8 L684 17.8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M702 11.7 L708 15.7 L702 19.7 L696 15.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M714 10 L720 14 L714 18 L708 14 Z' fill='%23FFFFFF'/%3E%3Cpath d='M726 9.1 L732 13.1 L726 17.1 L720 13.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M738 9 L744 13 L738 17 L732 13 Z' fill='%23FFFFFF'/%3E%3Cpath d='M750 9.7 L756 13.7 L750 17.7 L744 13.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M762 11.2 L768 15.2 L762 19.2 L756 15.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M774 13.1 L780 17.1 L774 21.1 L768 17.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M786 15.3 L792 19.3 L786 23.3 L780 19.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M798 17.7 L804 21.7 L798 25.7 L792 21.7 Z' fill='%234F8FCB'/%3E%3Cpath d='M810 20.4 L816 24.4 L810 28.4 L804 24.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M822 23 L828 27 L822 31 L816 27 Z' fill='%234F8FCB'/%3E%3Cpath d='M834 25.3 L840 29.3 L834 33.3 L828 29.3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M846 27.3 L852 31.3 L846 35.3 L840 31.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M858 28.7 L864 32.7 L858 36.7 L852 32.7 Z' fill='%23FFFFFF'/%3E%3Cpath d='M870 29.4 L876 33.4 L870 37.4 L864 33.4 Z' fill='%234F8FCB'/%3E%3Cpath d='M882 29.4 L888 33.4 L882 37.4 L876 33.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M894 28.8 L900 32.8 L894 36.8 L888 32.8 Z' fill='%234F8FCB'/%3E%3Cpath d='M906 27.6 L912 31.6 L906 35.6 L900 31.6 Z' fill='%23FFFFFF'/%3E%3Cpath d='M918 25.9 L924 29.9 L918 33.9 L912 29.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M930 23.7 L936 27.7 L930 31.7 L924 27.7 Z' fill='%23FFFFFF'/%3E%3Cpath d='M942 21.4 L948 25.4 L942 29.4 L936 25.4 Z' fill='%234F8FCB'/%3E%3Cpath d='M954 18.7 L960 22.7 L954 26.7 L948 22.7 Z' fill='%23FFFFFF'/%3E%3Cpath d='M966 16.3 L972 20.3 L966 24.3 L960 20.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M978 14 L984 18 L978 22 L972 18 Z' fill='%23FFFFFF'/%3E%3Cpath d='M990 12.2 L996 16.2 L990 20.2 L984 16.2 Z' fill='%234F8FCB'/%3E%3Cpath d='M1002 11.2 L1008 15.2 L1002 19.2 L996 15.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1014 10.9 L1020 14.9 L1014 18.9 L1008 14.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M1026 11.4 L1032 15.4 L1026 19.4 L1020 15.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1038 12.6 L1044 16.6 L1038 20.6 L1032 16.6 Z' fill='%234F8FCB'/%3E%3Cpath d='M1050 14.2 L1056 18.2 L1050 22.2 L1044 18.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1062 15.9 L1068 19.9 L1062 23.9 L1056 19.9 Z' fill='%234F8FCB'/%3E%3Cpath d='M1074 17.6 L1080 21.6 L1074 25.6 L1068 21.6 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1086 19.3 L1092 23.3 L1086 27.3 L1080 23.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M1098 20.8 L1104 24.8 L1098 28.8 L1092 24.8 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1110 22.1 L1116 26.1 L1110 30.1 L1104 26.1 Z' fill='%234F8FCB'/%3E%3Cpath d='M1122 23.1 L1128 27.1 L1122 31.1 L1116 27.1 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1134 23.8 L1140 27.8 L1134 31.8 L1128 27.8 Z' fill='%234F8FCB'/%3E%3Cpath d='M1146 24.2 L1152 28.2 L1146 32.2 L1140 28.2 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1158 24 L1164 28 L1158 32 L1152 28 Z' fill='%234F8FCB'/%3E%3Cpath d='M1170 23.4 L1176 27.4 L1170 31.4 L1164 27.4 Z' fill='%23FFFFFF'/%3E%3Cpath d='M1182 22.3 L1188 26.3 L1182 30.3 L1176 26.3 Z' fill='%234F8FCB'/%3E%3Cpath d='M1194 20.6 L1200 24.6 L1194 28.6 L1188 24.6 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
[data-saison="herbst"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' %3E%3Cg fill='%23A4502A' fill-opacity='.08'%3E%3Cg transform='translate(60 70) rotate(30) scale(1)'%3E%3Cpath d='M0 -22 C14 -12 14 10 0 22 C-14 10 -14 -12 0 -22Z'/%3E%3Cpath d='M0 -20 L0 28' stroke='%23A4502A' stroke-opacity='.09' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3Cg transform='translate(240 50) rotate(-50) scale(0.8)'%3E%3Cpath d='M0 -22 C14 -12 14 10 0 22 C-14 10 -14 -12 0 -22Z'/%3E%3Cpath d='M0 -20 L0 28' stroke='%23A4502A' stroke-opacity='.09' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3Cg transform='translate(180 200) rotate(100) scale(1.1)'%3E%3Cpath d='M0 -22 C14 -12 14 10 0 22 C-14 10 -14 -12 0 -22Z'/%3E%3Cpath d='M0 -20 L0 28' stroke='%23A4502A' stroke-opacity='.09' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3Cg transform='translate(40 260) rotate(-20) scale(0.9)'%3E%3Cpath d='M0 -22 C14 -12 14 10 0 22 C-14 10 -14 -12 0 -22Z'/%3E%3Cpath d='M0 -20 L0 28' stroke='%23A4502A' stroke-opacity='.09' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3Cg transform='translate(300 280) rotate(60) scale(0.7)'%3E%3Cpath d='M0 -22 C14 -12 14 10 0 22 C-14 10 -14 -12 0 -22Z'/%3E%3Cpath d='M0 -20 L0 28' stroke='%23A4502A' stroke-opacity='.09' stroke-width='1.2' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cg transform='translate(140 22.8) rotate(-25)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23C8692E'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(300 31.3) rotate(20)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23D9A13A'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(470 15) rotate(-40)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23A4502A'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(640 28.9) rotate(15)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23C8692E'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(790 20.6) rotate(-10)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23B8862E'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(960 22) rotate(35)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23A4502A'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3Cg transform='translate(1120 27.4) rotate(-20)'%3E%3Cpath d='M-11 0 C-6 -6 6 -6 11 0 C6 5 -6 5 -11 0Z' fill='%23D9A13A'/%3E%3Cpath d='M-11 0 L13 0' stroke='%236B3A1A' stroke-width='.9'/%3E%3C/g%3E%3C/svg%3E");
}
[data-saison="winter"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' %3E%3Cg fill='none' stroke='%233E6476' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M46 70 L74 70'/%3E%3Cpath d='M53 57.9 L67 82.1'/%3E%3Cpath d='M67 57.9 L53 82.1'/%3E%3Cpath d='M231 140 L249 140'/%3E%3Cpath d='M235.5 132.2 L244.5 147.8'/%3E%3Cpath d='M244.5 132.2 L235.5 147.8'/%3E%3Cpath d='M138 270 L162 270'/%3E%3Cpath d='M144 259.6 L156 280.4'/%3E%3Cpath d='M156 259.6 L144 280.4'/%3E%3Cpath d='M293 300 L307 300'/%3E%3Cpath d='M296.5 293.9 L303.5 306.1'/%3E%3Cpath d='M303.5 293.9 L296.5 306.1'/%3E%3Cpath d='M34 210 L46 210'/%3E%3Cpath d='M37 204.8 L43 215.2'/%3E%3Cpath d='M43 204.8 L37 215.2'/%3E%3C/g%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C42,19 72,36 112,31 C152,26 182,10 227,17 C272,24 302,42 352,37 C402,32 432,13 482,19 C532,25 562,40 617,35 C672,30 702,11 757,18 C812,25 842,41 897,36 C952,31 982,13 1037,20 C1092,27 1142,38 1200,27' transform='translate(0 -2.6)' fill='none' stroke='%23F7F8F4' stroke-width='6' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='25.2' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='190' cy='12.5' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='330' cy='34.3' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='455' cy='14.6' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='600' cy='32.5' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='740' cy='13.1' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='880' cy='33.4' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='1010' cy='14.9' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='1150' cy='28.2' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3C/svg%3E");
}
[data-saison="weihnachten"]{
  --saison-muster:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' %3E%3Cg fill='%23A8352B' fill-opacity='.07'%3E%3Cpath d='M70 49 L72.7 56.3 L80.5 56.6 L74.4 61.4 L76.5 68.9 L70 64.6 L63.5 68.9 L65.6 61.4 L59.5 56.6 L67.3 56.3Z'/%3E%3Cpath d='M260 222 L262 227.3 L267.6 227.5 L263.2 231 L264.7 236.5 L260 233.4 L255.3 236.5 L256.8 231 L252.4 227.5 L258 227.3Z'/%3E%3Cpath d='M120 294 L121.5 298 L125.7 298.1 L122.4 300.8 L123.5 304.9 L120 302.5 L116.5 304.9 L117.6 300.8 L114.3 298.1 L118.5 298Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%230E3B1D' stroke-opacity='.08' stroke-width='1.6' stroke-linecap='round'%3E%3Cg transform='translate(230 60) rotate(30)'%3E%3Cpath d='M0 -30 L0 30'/%3E%3Cpath d='M0 -24 L-10 -17'/%3E%3Cpath d='M0 -24 L10 -17'/%3E%3Cpath d='M0 -16 L-10 -9'/%3E%3Cpath d='M0 -16 L10 -9'/%3E%3Cpath d='M0 -8 L-10 -1'/%3E%3Cpath d='M0 -8 L10 -1'/%3E%3Cpath d='M0 0 L-10 7'/%3E%3Cpath d='M0 0 L10 7'/%3E%3Cpath d='M0 8 L-10 15'/%3E%3Cpath d='M0 8 L10 15'/%3E%3Cpath d='M0 16 L-10 23'/%3E%3Cpath d='M0 16 L10 23'/%3E%3C/g%3E%3Cg transform='translate(60 220) rotate(-25)'%3E%3Cpath d='M0 -30 L0 30'/%3E%3Cpath d='M0 -24 L-10 -17'/%3E%3Cpath d='M0 -24 L10 -17'/%3E%3Cpath d='M0 -16 L-10 -9'/%3E%3Cpath d='M0 -16 L10 -9'/%3E%3Cpath d='M0 -8 L-10 -1'/%3E%3Cpath d='M0 -8 L10 -1'/%3E%3Cpath d='M0 0 L-10 7'/%3E%3Cpath d='M0 0 L10 7'/%3E%3Cpath d='M0 8 L-10 15'/%3E%3Cpath d='M0 8 L10 15'/%3E%3Cpath d='M0 16 L-10 23'/%3E%3Cpath d='M0 16 L10 23'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --kante-deko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -20 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C42,19 72,36 112,31 C152,26 182,10 227,17 C272,24 302,42 352,37 C402,32 432,13 482,19 C532,25 562,40 617,35 C672,30 702,11 757,18 C812,25 842,41 897,36 C952,31 982,13 1037,20 C1092,27 1142,38 1200,27' transform='translate(0 -2.6)' fill='none' stroke='%23F7F8F4' stroke-width='6' stroke-linecap='round'/%3E%3Cellipse cx='60' cy='25.2' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='190' cy='12.5' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='330' cy='34.3' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='455' cy='14.6' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='600' cy='32.5' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='740' cy='13.1' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='880' cy='33.4' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='1010' cy='14.9' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3Cellipse cx='1150' cy='28.2' rx='22' ry='3.6' fill='%23F7F8F4'/%3E%3C/svg%3E");
}
/* @saison-daten-ende@ */

@media(prefers-reduced-motion:reduce){
  [data-saison="weihnachten"] .hero::after{display:none}
}

/* ---------- Aktuelles-Banner ---------- */
/* Schmale Leiste über der (sticky) Navigation, gefüllt aus Admin → Aktuelles
   (resources/views/partials/aktuelles-banner.blade.php). Mehrere Einträge
   liegen im selben Grid-Feld übereinander, damit die Leiste beim Wechsel
   nicht springt; sichtbar ist nur .ist-aktiv. */
.aktuelles{
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem calc(var(--rand) - .5rem) .4rem var(--rand);
  background:var(--tanne); color:var(--birke);
  font-family:var(--display); font-size:.88rem; line-height:1.35;
}
.aktuelles-liste{list-style:none; margin:0; padding:0; flex:1; min-width:0; display:grid}
.aktuelles-eintrag{
  grid-area:1/1; display:flex; align-items:center; justify-content:center; gap:.75rem; min-width:0;
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
}
.aktuelles-eintrag.ist-aktiv{opacity:1; visibility:visible}
.aktuelles-art{
  flex:none; background:var(--akzent); color:var(--akzent-text); border-radius:100px;
  padding:.12em .7em; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.aktuelles-text{min-width:0; color:inherit; text-decoration:none; font-weight:400}
.aktuelles-text strong{font-weight:700}
.aktuelles-trenner{color:var(--akzent-hell)}
.aktuelles-teil.kurz{white-space:nowrap}
.aktuelles-mehr{margin-left:.9rem; color:var(--akzent-hell); font-weight:600; white-space:nowrap}
a.aktuelles-text:hover .aktuelles-mehr{text-decoration:underline; text-underline-offset:3px}
a.aktuelles-text:focus-visible,.aktuelles button:focus-visible{outline:2px solid var(--akzent-hell); outline-offset:2px; border-radius:2px}
.aktuelles button{
  flex:none; width:2rem; height:2rem; display:inline-grid; place-items:center;
  background:none; border:0; border-radius:50%; color:var(--birke); opacity:.75;
  font:inherit; font-size:1rem; line-height:1; cursor:pointer;
}
.aktuelles button[hidden]{display:none}
.aktuelles button:hover{opacity:1; background:rgba(233,234,224,.12)}
.aktuelles .aktuelles-weiter{font-size:1.35rem}
@media(max-width:640px){
  .aktuelles{font-size:.82rem; padding-top:0; padding-bottom:0; padding-left:1rem; padding-right:0}
  .aktuelles button{width:2.75rem; height:2.75rem}
  .aktuelles-eintrag{justify-content:flex-start; gap:.55rem}
  .aktuelles-mehr{display:none}
}
@media(prefers-reduced-motion:reduce){.aktuelles-eintrag{transition:none}}
/* Terminliste /markttermine (resources/views/partials/markttermine.blade.php):
   Ort/Zeiten, Text und Link je eine Zeile unter dem Datum. */
.termine .info-zeile{display:block}

/* ---------- SEO-Landingseiten ---------- */
/* resources/views/seo/page.blade.php: Fließtext aus dem Admin, FAQ, Abschluss-Knopf. */
.seo-inhalt{padding-block:clamp(2.5rem,5vw,4rem) 0}
.seo-text{max-width:70ch}
.seo-text h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-top:2.4rem}
.seo-text h2:first-child{margin-top:0}
.seo-text h3{margin-top:1.6rem}
.seo-text p,.seo-text ul{margin:.9rem 0 0}
.seo-text ul{padding-left:1.2rem}
.seo-text li{margin-top:.35rem}
.seo-text li::marker{color:var(--akzent-dunkel)}
.seo-text a{color:var(--tanne); text-decoration-color:var(--akzent-dunkel); text-underline-offset:3px}
.seo-faq{padding-block:clamp(2.5rem,5vw,4rem) 0}
.seo-faq h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1.4rem}
.seo-faq details{max-width:70ch; border-top:1px solid var(--linie); padding:1rem 0}
.seo-faq details:last-child{border-bottom:1px solid var(--linie)}
.seo-faq summary{font-family:var(--display); font-weight:600; font-size:1.08rem; cursor:pointer}
.seo-faq details p{margin:.7rem 0 0}
.seo-cta{padding-block:clamp(2.5rem,5vw,4rem) var(--luft)}

/* ---------- Firmenkunden ---------- */
/* /firmenkunden (resources/views/corporate/page.blade.php) und der Teaser
   auf der Startseite. Formular nutzt .kontaktkarte/.kf-*, hier nur die
   Ergänzungen (Auswahl, Datei, Einwilligung, Fehler). */
.fk-dach{font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--tanne); margin-bottom:1rem}
.fk-hero .fk-dach{color:var(--akzent-hell)}
.fk-hero{position:relative; background:var(--tanne); color:var(--birke); overflow:hidden; padding:0}
.fk-hero-raster{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(3.5rem,9vh,6.5rem) clamp(5rem,11vh,7.5rem)}
.fk-hero h1{font-size:clamp(2.5rem,6vw,5.2rem); max-width:12ch}
.fk-hero .lead{color:#CDD6C2; max-width:44ch; margin-top:1.4rem}
.fk-hero .aktion{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.fk-hero .knopf{background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text)}
.fk-hero .knopf:hover,.fk-hero .knopf:focus-visible{background:var(--birke); border-color:var(--birke)}
.fk-hero .knopf.hell{background:transparent; color:var(--birke); border-color:rgba(233,234,224,.45)}
.fk-hero .knopf.hell:hover,.fk-hero .knopf.hell:focus-visible{background:var(--birke); color:var(--rinde); border-color:var(--birke)}
.fk-hero .kante{position:absolute; bottom:-1px; left:0}
.fk-frist-hero{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem; max-width:44ch; margin:2rem 0 0; padding:.8rem 1.1rem; border-left:4px solid var(--akzent-hell); border-radius:2px; background:rgba(20,28,20,.32); font-size:.98rem; line-height:1.45; color:#DCE0D2}
.fk-frist-hero strong{font-family:var(--display); font-weight:800; font-size:1.2rem; color:var(--akzent-hell)}

.fk-hero-bilder,.fk-teaser-bilder{position:relative; display:block; width:100%; max-width:520px; justify-self:center; aspect-ratio:1/1; text-decoration:none}
.fk-abzug{
  position:absolute; width:54%; margin:0; padding:.6rem; background:#fff; border-radius:2px;
  box-shadow:0 1px 2px rgba(20,28,20,.15), 0 22px 44px -16px rgba(20,28,20,.55);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.fk-abzug img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; border-radius:1px}
.fk-abzug-1{left:0; top:8%; transform:rotate(-6deg)}
.fk-abzug-2{right:0; top:0; transform:rotate(5deg)}
.fk-abzug-3{left:23%; bottom:0; width:50%; transform:rotate(-1deg)}
.fk-teaser-bilder{aspect-ratio:5/4}
.fk-teaser-bilder .fk-abzug{width:46%}
.fk-teaser-bilder .fk-abzug-1{left:6%; top:6%}
.fk-teaser-bilder .fk-abzug-2{right:6%; top:14%}
.fk-teaser-bilder:hover .fk-abzug-1,.fk-teaser-bilder:focus-visible .fk-abzug-1{transform:rotate(-9deg) translate(-4%,-2%)}
.fk-teaser-bilder:hover .fk-abzug-2,.fk-teaser-bilder:focus-visible .fk-abzug-2{transform:rotate(8deg) translate(4%,-2%)}
.fk-stempel{
  position:absolute; right:2%; bottom:4%; z-index:2;
  width:clamp(92px,10vw,124px); aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--akzent); color:var(--akzent-text); transform:rotate(-12deg);
  font-family:var(--display); font-weight:800; font-size:clamp(.74rem,.9vw,.88rem); line-height:1.1; text-transform:uppercase; letter-spacing:.02em;
  box-shadow:0 0 0 4px var(--tanne), 0 0 0 5.5px var(--akzent), 0 12px 24px -10px rgba(20,28,20,.5);
}
.fk-teaser .fk-stempel{box-shadow:0 0 0 4px var(--birke), 0 0 0 5.5px var(--akzent), 0 12px 24px -10px rgba(20,28,20,.5)}
@media(max-width:860px){
  .fk-hero-raster{grid-template-columns:minmax(0,1fr)}
  .fk-hero-bilder{max-width:400px}
}

.fk-teaser{padding-bottom:0}
.fk-teaser-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.fk-teaser h2{max-width:14ch}
.fk-teaser .lead{max-width:44ch}
.fk-teaser .knopf{margin:0 .5rem .6rem 0}
@media(max-width:860px){.fk-teaser-raster{grid-template-columns:minmax(0,1fr)} .fk-teaser-bilder{max-width:440px}}

.fk-schritte{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2rem)}
.fk-schritte li{border-top:2px solid var(--rinde); padding-top:1.2rem}
.fk-nr{display:block; font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,4vw,3.4rem); line-height:1; color:var(--akzent-dunkel); letter-spacing:-.04em}
.fk-schritte h3{margin:.8rem 0 .5rem}
.fk-schritte p{margin:0; font-size:.98rem; line-height:1.55; color:#3c453c}
@media(max-width:960px){.fk-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.fk-schritte{grid-template-columns:minmax(0,1fr)}}

.fk-produkte{padding-top:0}
.fk-karten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,2vw,1.4rem)}
.fk-karte{display:flex; flex-direction:column; background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.fk-karte-haupt{box-shadow:0 0 0 2px var(--akzent)}
.fk-karte-bild{position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--linie); background:#fff}
.fk-karte-bild img{width:100%; height:100%; object-fit:cover; transform:scale(1.25); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fk-karte:hover .fk-karte-bild img{transform:scale(1.32)}
.fk-karte-text{display:flex; flex-direction:column; gap:.55rem; flex:1; padding:1.3rem 1.3rem 1.5rem}
.fk-karte-text p{margin:0; font-size:.98rem; line-height:1.55}
.fk-karte-preis{font-family:var(--display); font-weight:800; font-size:1.2rem; margin-top:auto !important; padding-top:.5rem}
.fk-karte-preis span{display:block; font-weight:400; font-size:.85rem; color:#4b544b}
.fk-karte-text .knopf{align-self:flex-start; margin-top:.5rem}
@media(max-width:900px){.fk-karten{grid-template-columns:minmax(0,1fr)} .fk-karte{flex-direction:row} .fk-karte-bild{flex:0 0 38%; aspect-ratio:auto; min-height:220px; border-bottom:0; border-right:1px solid var(--linie)}}
@media(max-width:560px){.fk-karte{flex-direction:column} .fk-karte-bild{flex:none; aspect-ratio:4/3; min-height:0; border-right:0; border-bottom:1px solid var(--linie)}}

.fk-preise-abschnitt{background:var(--birke-2)}
.fk-preise-split{align-items:start}
.fk-preise-lead{margin-top:1.2rem}
.fk-preise{width:100%; border-collapse:collapse; margin:1.4rem 0 1rem; font-family:var(--display)}
.fk-preise th{text-align:left; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#4b544b; padding:.5rem 0; border-bottom:2px solid var(--rinde)}
.fk-preise td{padding:1rem 0; border-bottom:1px solid var(--linie); font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:600}
.fk-preise th:last-child,.fk-preise td:last-child{text-align:right}
.fk-preise td:last-child{font-weight:800}
.fk-klein{font-size:.9rem; line-height:1.55; color:#4b544b}
.fk-frist-box{display:flex; align-items:center; gap:1.2rem; margin-top:1.8rem; padding:1.2rem 1.4rem; background:var(--rinde); color:var(--birke); border-radius:3px}
.fk-frist-zahl{flex:none; min-width:2ch; text-align:center; font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--akzent-hell)}
.fk-frist-box p{margin:0; font-size:.98rem; line-height:1.5; color:#CDD6C2}
.fk-frist-box strong{display:block; font-family:var(--display); font-weight:600; color:var(--birke); font-size:1.08rem}
.fk-galerie{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem}
.fk-galerie figure{margin:0; background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.fk-galerie img{width:100%; aspect-ratio:1/1; object-fit:cover; transform:scale(1.2)}
.fk-galerie-text{grid-column:1/-1; font-size:.9rem; color:#4b544b; margin:.2rem 0 0}

.fk-faq-abschnitt{padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.fk-faq{max-width:860px; border-top:1px solid var(--linie)}
.fk-faq details{border-bottom:1px solid var(--linie)}
.fk-faq summary{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; cursor:pointer; list-style:none; font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.5vw,1.18rem)}
.fk-faq summary::-webkit-details-marker{display:none}
.fk-faq summary::after{content:"+"; flex:none; font-size:1.5rem; line-height:1; color:var(--akzent-dunkel); transition:transform .2s ease}
.fk-faq details[open] summary::after{transform:rotate(45deg)}
.fk-faq details p{max-width:68ch; margin:0 0 1.3rem}

.fk-anfrage{padding-top:0}
.fk-formkarte{position:relative; margin-top:0}
/* Auf dem Handy zuerst das Formular, die Kontaktinfos danach. */
@media(max-width:860px){.fk-formkarte .kk-info{order:2; padding-top:1.6rem; border-top:1px solid rgba(233,234,224,.18)}}
.fk-formkarte input,.fk-formkarte select{color-scheme:dark}
.kf-feld select,.kf-feld input[type=file]{
  background:rgba(233,234,224,.08); border:1px solid rgba(233,234,224,.28); border-radius:4px;
  padding:.7em .8em; color:var(--birke); font:inherit; font-size:.95rem; width:100%;
}
.kf-feld select option{color:var(--rinde); background:var(--birke)}
.kf-feld input[type=file]{padding:.55em .6em; font-size:.85rem}
.kf-feld input[type=file]::file-selector-button{font-family:var(--display); font-weight:600; font-size:.85rem; margin-right:.7rem; padding:.4em .9em; border:0; border-radius:2px; background:var(--birke); color:var(--rinde); cursor:pointer}
.kf-feld select:focus-visible,.kf-feld input[type=file]:focus-visible{outline:2px solid var(--akzent-hell); outline-offset:1px}
.kf-feld [aria-invalid=true]{border-color:#e08a76}
.fk-label-zusatz{text-transform:none; letter-spacing:0; font-weight:400}
.fk-feld-hilfe{font-size:.8rem; line-height:1.4; color:#98a391}
.fk-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fk-check{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; line-height:1.5; color:#CDD6C2; cursor:pointer; padding-block:.4rem}
.fk-check input{flex:none; width:1.4rem; height:1.4rem; margin:.05rem 0 0; accent-color:var(--akzent-hell)}
.fk-check a,.fk-erfolg a{color:var(--akzent-hell)}
.fk-senden{align-self:flex-start; background:var(--akzent); border-color:var(--akzent); color:var(--akzent-text)}
.fk-senden:hover,.fk-senden:focus-visible{background:var(--birke); border-color:var(--birke)}
.fk-fehlerliste{background:rgba(224,138,118,.12); border:1px solid #e08a76; border-radius:4px; padding:.9rem 1.1rem; font-size:.92rem; color:#f1c9bf}
.fk-fehlerliste ul{margin:.4rem 0 0; padding-left:1.1rem}
.fk-erfolg{align-self:center; padding:clamp(1.4rem,3vw,2.2rem); border-left:4px solid var(--akzent-hell); background:rgba(233,234,224,.05); border-radius:2px}
.fk-erfolg h3{color:var(--akzent-hell); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; margin-bottom:.8rem}
.fk-erfolg p{color:#CDD6C2}
.fk-erfolg .fk-klein{color:#98a391; margin:0}
.fk-noch{color:var(--akzent-hell); font-size:.95rem}

/* ---------- Warenkorb & Kasse ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.nav-warenkorb{position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; color:var(--rinde); text-decoration:none; flex:none}
.nav-warenkorb:hover{color:var(--tanne)}
.nav-warenkorb-zahl{position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px; border-radius:100px; background:var(--akzent); color:var(--akzent-text); font-family:var(--display); font-size:.72rem; font-weight:700; line-height:19px; text-align:center}
@media(max-width:860px){.nav .nav-warenkorb{margin-left:auto} .nav .nav-warenkorb + .nav-mobil{margin-left:0}}
.in-warenkorb{margin:0}
.anfrage-zweit{display:inline-block; margin-top:.8rem; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--tanne); text-underline-offset:3px}
.anfrage-zweit:hover{color:var(--akzent-dunkel)}
.kasse-kopf{padding-bottom:0}
.kasse-kopf h1{font-size:clamp(2.4rem,6vw,4.2rem)}
.kasse{padding-block:1.6rem var(--luft)}
.kasse-meldung{max-width:70ch; padding:.8rem 1.1rem; border-radius:3px; font-size:.95rem; margin:0 0 1rem; border-left:4px solid var(--tanne); background:var(--birke-2)}
.kasse-meldung.fehler{border-left-color:var(--fehler); background:#f1e3dd}
.kasse-meldung ul{margin:.3rem 0 0; padding-left:1.2rem}
.kasse-leer{padding:2rem 0}
.kasse-raster{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.5rem); align-items:start}
@media(max-width:900px){.kasse-raster{grid-template-columns:minmax(0,1fr)}}
.kasse-box{background:#fff; border:1px solid var(--linie); border-radius:3px; padding:clamp(1.2rem,3vw,1.8rem); position:sticky; top:84px; display:flex; flex-direction:column; gap:.9rem}
@media(max-width:900px){.kasse-box{position:static}}
.kasse-box-titel{font-size:1.25rem; font-weight:700; letter-spacing:-.01em}
.kasse-klein{font-size:.86rem; color:#4b544b; margin:0}
.kasse-zurueck{font-family:var(--display); font-weight:600; font-size:.9rem; color:#4b544b}
.summen{display:grid; grid-template-columns:1fr auto; gap:.35rem 1rem; margin:0; font-size:.98rem}
.summen dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.summen .gesamt{font-family:var(--display); font-weight:800; font-size:1.25rem; padding-top:.5rem; border-top:1px solid var(--linie); margin-top:.3rem}
.summen dt.gesamt{margin-right:-1rem; padding-right:1rem}
.wk-liste{list-style:none; margin:0 0 1rem; padding:0; border-top:1px solid var(--linie)}
.wk-zeile{display:grid; grid-template-columns:96px minmax(0,1fr) auto auto; gap:.6rem 1.2rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--linie)}
.wk-bild{display:block; width:96px; aspect-ratio:1/1; background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.wk-bild img{width:100%; height:100%; object-fit:contain; padding:6%}
.wk-text{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.wk-name{font-family:var(--display); font-weight:600; font-size:1.05rem; text-decoration:none; line-height:1.25}
.wk-name:hover{text-decoration:underline; text-decoration-color:var(--akzent-dunkel)}
.wk-variante{font-size:.92rem; color:#4b544b}
.wk-einzel{font-size:.9rem; color:#4b544b}
.wk-menge{display:flex; flex-direction:column; align-items:flex-start; gap:.3rem}
.wk-menge form{margin:0; display:flex; gap:.4rem}
.wk-menge select{font:inherit; font-size:.95rem; padding:.3em .5em; border:1px solid var(--linie); border-radius:3px; background:#fff}
.wk-eins{font-size:.9rem; color:#4b544b}
.wk-entfernen{background:none; border:0; padding:0; font:inherit; font-size:.85rem; color:#4b544b; text-decoration:underline; cursor:pointer}
.wk-entfernen:hover{color:var(--fehler)}
.wk-summe{font-family:var(--display); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
@media(max-width:600px){
  .wk-zeile{grid-template-columns:72px minmax(0,1fr) auto}
  .wk-bild{width:72px}
  .wk-menge{grid-column:2; grid-row:2; flex-direction:row; align-items:center; gap:1rem}
  .wk-summe{grid-column:3; grid-row:1}
}
.kasse-felder{display:flex; flex-direction:column; gap:1.4rem}
.kf-gruppe{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem}
.kf-gruppe legend{font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:.6rem; padding:0}
.kasse-feld{display:flex; flex-direction:column; gap:.3rem}
.kasse-feld label{font-family:var(--display); font-size:.85rem; font-weight:600}
.kasse-feld input,.kasse-feld textarea{font:inherit; font-size:1rem; padding:.7em .8em; border:1px solid rgba(20,28,20,.3); border-radius:3px; background:#fff; color:var(--rinde); width:100%}
.kasse-feld textarea{resize:vertical; min-height:80px}
.kasse-feld input:focus-visible,.kasse-feld textarea:focus-visible{outline:2px solid var(--tanne); outline-offset:1px}
.kasse-feld.hat-fehler input{border-color:var(--fehler); background:#fdf6f4}
.kasse-feldfehler{font-size:.85rem; color:var(--fehler)}
.kf-plz{grid-template-columns:minmax(0,.45fr) minmax(0,1fr)}
@media(max-width:860px){.kasse .kf-plz{grid-template-columns:minmax(0,.45fr) minmax(0,1fr)}}
#lieferFelder{display:flex; flex-direction:column; gap:.8rem; margin-top:.4rem}
#lieferFelder[hidden]{display:none}
.kasse-check{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; line-height:1.45; cursor:pointer}
.kasse-check input{width:22px; height:22px; margin:.1rem 0 0; flex:none; accent-color:var(--tanne)}
.kasse-agb{padding:.9rem 1rem; background:var(--birke); border-radius:3px}
.kasse-agb.hat-fehler{outline:2px solid var(--fehler)}
.kasse-agb a{color:var(--tanne)}
.kasse-bestellen{width:100%}
.kasse-fakten{display:grid; gap:.2rem; margin:0; font-size:.92rem}
.kasse-fakten dt{font-family:var(--display); font-weight:700; font-size:.85rem; margin-top:.4rem}
.kasse-fakten dd{margin:0; color:#4b544b}
.ue-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.ue-liste li{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:.8rem; align-items:center}
.ue-bild{width:56px; aspect-ratio:1/1; background:#fff; border:1px solid var(--linie); border-radius:3px; overflow:hidden}
.ue-bild img{width:100%; height:100%; object-fit:contain; padding:5%}
.ue-text{display:flex; flex-direction:column; font-size:.92rem; line-height:1.35; min-width:0}
.ue-text strong{font-family:var(--display); font-weight:600}
.ue-text span{color:#4b544b}
.ue-preis{font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.95rem}
.bankbox{background:var(--rinde); color:var(--birke); border-radius:3px; padding:clamp(1.3rem,3vw,2rem); margin-bottom:2rem}
.bankbox h2{font-size:clamp(1.5rem,3vw,2rem); color:var(--akzent-hell); margin-bottom:.8rem}
.bankbox dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem 1.2rem; margin:1rem 0; font-size:1.02rem}
.bankbox dt{color:#B8C2AE; font-family:var(--display); font-size:.85rem; font-weight:600; align-self:center}
.bankbox dd{margin:0; word-break:break-word}
.bankbox .mono{font-family:ui-monospace,Consolas,monospace; letter-spacing:.02em}
.bankbox .kasse-klein{color:#C7CDBE}
.kasse-h2{font-size:1.3rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.6rem}
.adresse{line-height:1.6}

/* ---------- Geschenkgutschein + Lieferart ---------- */
/* /gutschein (shop/gift-card), Gutscheincode in Warenkorb/Kasse,
   Lieferart Versand/Abholung in der Kasse. */
.gs-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.6rem,4vw,3.5rem); align-items:start}
@media(max-width:900px){.gs-raster{grid-template-columns:minmax(0,1fr)}}
.gs-karte{margin:0; display:grid; grid-template-columns:34% 1fr; aspect-ratio:210/148; border-radius:6px; overflow:hidden; box-shadow:0 18px 40px -22px rgba(20,28,20,.55); background:var(--birke); border:1px solid var(--linie); position:sticky; top:96px}
@media(max-width:900px){.gs-karte{position:static; max-width:30rem}}
.gs-karte-seite{background:var(--tanne); display:flex; align-items:center; justify-content:center; padding:8%}
.gs-karte-seite img{width:100%; height:auto; max-width:120px}
.gs-karte-text{display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:7% 8%; min-width:0}
.gs-karte-marke{font-family:var(--display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--akzent-dunkel)}
.gs-karte-titel{font-family:var(--display); font-size:clamp(1.2rem,2.6vw,1.6rem); color:var(--tanne); line-height:1.1}
.gs-karte-wert{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,5vw,2.8rem); line-height:1.05; font-variant-numeric:tabular-nums}
.gs-karte-code{font-family:ui-monospace,Consolas,monospace; font-size:.8rem; letter-spacing:.08em; border:1px dashed var(--tanne); background:#fff; padding:.3em .6em; align-self:flex-start; margin-top:.5rem; color:var(--tanne)}
.gs-form{display:flex; flex-direction:column; gap:1.4rem}
.gs-betraege{display:flex; flex-wrap:wrap; gap:.5rem}
.gs-betrag{position:relative; cursor:pointer}
.gs-betrag input{position:absolute; opacity:0; width:1px; height:1px}
.gs-betrag span{display:inline-flex; align-items:center; min-height:44px; padding:.5em 1.1em; border:1.5px solid rgba(20,28,20,.3); border-radius:100px; background:#fff; font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums}
.gs-betrag input:checked + span{background:var(--tanne); border-color:var(--tanne); color:var(--birke)}
.gs-betrag input:focus-visible + span{outline:2px solid var(--tanne); outline-offset:2px}
.gs-optional{font-weight:400; font-size:.9rem; color:#4b544b}
.gs-fakten{margin-top:1.8rem}
.gs-mini{display:flex !important; align-items:center; justify-content:center; background:var(--tanne) !important; color:var(--akzent-hell); font-family:var(--display); font-weight:800; font-size:1.4rem; text-decoration:none}
.gs-code{display:flex; flex-direction:column; gap:.4rem; padding-bottom:.9rem; border-bottom:1px solid var(--linie)}
.gs-code-label{font-family:var(--display); font-size:.85rem; font-weight:600}
.gs-code-reihe{display:flex; gap:.5rem}
.gs-code-reihe input{flex:1; min-width:0; font:inherit; font-family:ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; padding:.55em .7em; border:1px solid rgba(20,28,20,.3); border-radius:3px; background:#fff}
.gs-code-aktiv{display:flex; justify-content:space-between; gap:.8rem; align-items:baseline; margin:0; font-size:.9rem; padding:.5rem .7rem; background:var(--birke); border-radius:3px}
.gs-downloads{list-style:none; margin:0 0 2rem; padding:0; border-top:1px solid var(--linie)}
.gs-downloads li{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--linie)}
.gs-teaser{padding-block:0 1rem}
.gs-teaser-link{display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; background:#fff; border:1px solid var(--linie); border-left:4px solid var(--akzent); border-radius:3px; text-decoration:none; color:inherit}
.gs-teaser-link:hover{border-color:var(--tanne)}
.gs-teaser-link .gs-mini{width:44px; height:44px; flex:none; border-radius:3px}
.gs-teaser-pfeil{margin-left:auto; font-family:var(--display); font-weight:700}
.lieferart{display:flex; flex-direction:column; gap:.6rem}
#lieferAdresse[hidden],.kasse-summen[hidden]{display:none}
.lieferart-wahl{display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 1rem; background:#fff; border:1.5px solid rgba(20,28,20,.2); border-radius:3px; cursor:pointer}
.lieferart-wahl:has(input:checked){border-color:var(--tanne); background:var(--birke-2)}
.lieferart-wahl input{width:20px; height:20px; margin:.15rem 0 0; flex:none; accent-color:var(--tanne)}
.lieferart-wahl > span{display:flex; flex-direction:column; gap:.15rem; font-size:.92rem; color:#4b544b}
.lieferart-wahl strong{font-family:var(--display); color:var(--rinde); font-size:1rem}

/* ---------- Popup ---------- */
/* Admin → Popup (resources/views/partials/popup.blade.php). Modaler
   <dialog> in der obersten Ebene, deshalb keine Verschiebung im Layout.
   Auf dem Handy eine Karte mit Rand ringsum statt Vollbild (Google:
   "intrusive interstitials"), zu lange Inhalte scrollen in der Karte. */
.popup{
  width:min(31rem, calc(100vw - 2rem)); max-width:none;
  max-height:calc(100dvh - 2.5rem); padding:0; border:0; border-radius:3px;
  background:var(--birke); color:var(--rinde);
  box-shadow:0 30px 70px -24px rgba(20,28,20,.6);
  overflow:auto; overscroll-behavior:contain;
}
.popup::backdrop{background:rgba(20,28,20,.58)}
.popup-karte{position:relative}
.popup-bild{height:clamp(9rem, 34dvh, 19rem); background:var(--tanne)}
.popup-bild img{width:100%; height:100%; object-fit:cover}
.popup-inhalt{padding:1.5rem 1.6rem 1.7rem; border-top:4px solid var(--akzent)}
.popup-ohne-bild .popup-inhalt{border-top:0; padding-top:1.8rem; padding-right:3.6rem}
.popup-titel{font-family:var(--display); font-size:clamp(1.45rem,3.6vw,1.95rem); font-weight:800; line-height:1.04; letter-spacing:-.02em; margin:0 0 .7rem}
.popup-text{font-family:var(--text); font-size:1.03rem; line-height:1.55; margin:0 0 1.3rem}
.popup-inhalt > :last-child{margin-bottom:0}
.popup-titel:focus{outline:none}
.popup-zu{
  position:absolute; top:.6rem; right:.6rem; z-index:1;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(233,234,224,.94); color:var(--rinde);
  font:600 1.05rem/1 var(--display); cursor:pointer;
  box-shadow:0 2px 8px rgba(20,28,20,.18);
}
.popup-zu:hover{background:var(--birke)}
.popup-zu:focus-visible,.popup .knopf:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}
@media(max-width:480px){
  .popup-bild{height:clamp(8rem, 26dvh, 14rem)}
  .popup-inhalt{padding:1.2rem 1.25rem 1.35rem}
  .popup .knopf{display:block; text-align:center}
}
@media(prefers-reduced-motion:no-preference){
  .popup[open]{animation:popup-ein .3s cubic-bezier(.2,.8,.25,1)}
  .popup[open]::backdrop{animation:popup-dunkel .3s ease-out}
}
@keyframes popup-ein{from{opacity:0; transform:translateY(14px)}}
@keyframes popup-dunkel{from{opacity:0}}

/* ---------- Kategorietexte ---------- */
/* Übernommene Shopify-Texte: kurzer Einstieg oben, voller Text unter den
   Produkten (App\Support\CategoryText). */
.weiterlesen{font-family:var(--display); font-weight:600; font-size:.92em; color:var(--tanne); text-underline-offset:3px; white-space:nowrap; display:inline-block; padding-block:.45rem}
.kategorie-mehr{padding-top:0}
.kategorie-mehr .wrap{max-width:860px}
.kategorie-mehr .wrap > h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.4rem; padding-top:2.4rem; border-top:1px solid var(--linie)}
.kategorie-text{max-width:70ch}
.kategorie-text h2{font-size:clamp(1.35rem,2.4vw,1.7rem); margin:2rem 0 .7rem}
.kategorie-text h3{margin:1.6rem 0 .5rem}
.kategorie-text p{margin:0 0 1rem}
.kategorie-text ul,.kategorie-text ol{padding-left:1.2rem; margin:0 0 1rem}
.kategorie-text a{color:var(--tanne); text-underline-offset:3px}
.seitenkopf .kategorie-text h2,.seitenkopf .kategorie-text h3{font-size:1.15rem; margin:1rem 0 .4rem}

/* ---------- Personalisierung ---------- */
/* /personalisierung (resources/views/personalization/page.blade.php) nutzt
   die fk-*-Bausteine aus "Firmenkunden" (Hero, Schritte, Karten, FAQ,
   Formular); hier nur, was dort fehlt: vier Produktkarten, Ideen je
   Anlass, Preis-/Lieferzeit-Kacheln und der Hinweis im Startseiten-Teaser. */
@media(min-width:1101px){.pz-karten-vier{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:901px) and (max-width:1100px){.pz-karten-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pz-ideen-abschnitt{padding-top:0}
.pz-ideen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,2vw,1.4rem)}
.pz-idee{display:flex; flex-direction:column; background:#fff; border:1px solid var(--linie); border-top:3px solid var(--tanne); border-radius:3px; padding:1.3rem 1.3rem 1.1rem}
.pz-idee h3{margin:0}
.pz-idee-unter{margin:.2rem 0 .9rem; font-size:.92rem; color:#4b544b}
.pz-idee ul{list-style:none; margin:0 0 .6rem; padding:0; display:grid; gap:.45rem}
.pz-idee ul li{position:relative; padding-left:1.1rem; font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.35}
.pz-idee ul li::before{content:"◆"; position:absolute; left:0; top:.1em; font-size:.62rem; color:var(--akzent-dunkel)}
.pz-idee-link{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--tanne); text-underline-offset:3px}
.pz-idee-link::after{content:" →"; white-space:pre}
.pz-idee-link:hover{color:var(--akzent-dunkel)}
@media(max-width:900px){.pz-ideen{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Handy: Ideen als wischbare Reihe statt sechs Karten untereinander. */
@media(max-width:560px){
  .pz-ideen{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin-inline:calc(-1 * var(--rand, 20px)); padding:0 var(--rand, 20px) .8rem; scroll-padding-inline:var(--rand, 20px)}
  .pz-idee{scroll-snap-align:start}
}

/* Auswahlfelder so hoch wie die Textfelder daneben (Zeilenhöhe 1.65 +
   Innenabstand), gilt auch für /firmenkunden. */
.kf-feld select{min-height:calc(3.05em + 2px)}

.pz-fakten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:1.4rem 0 1rem}
.pz-fakt{display:flex; flex-direction:column; gap:.25rem; background:#fff; border:1px solid var(--linie); border-radius:3px; padding:1.1rem 1.2rem}
.pz-fakt-label{font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#4b544b}
.pz-fakt-wert{font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; letter-spacing:-.02em}
.pz-fakt-wert-text{font-size:clamp(1.15rem,2vw,1.35rem); letter-spacing:0}
.pz-fakt-text{font-size:.88rem; line-height:1.45; color:#4b544b}
@media(max-width:480px){.pz-fakten{grid-template-columns:minmax(0,1fr)}}

.pz-teaser-hinweis{margin:1.2rem 0 0; font-size:.98rem}
.pz-teaser-hinweis a{font-family:var(--display); font-weight:600; color:var(--tanne); text-underline-offset:3px}
.pz-teaser-hinweis a:hover{color:var(--akzent-dunkel)}

/* ---------- "Sag mir Bescheid" (ausverkauft → neue Stücke) ---------- */
.bescheid{margin:1.2rem 0 .4rem; padding:1.1rem 1.2rem 1rem; background:#fff; border:1px solid var(--linie); border-left:4px solid var(--akzent); border-radius:3px; scroll-margin-top:6rem}
.leer-block .bescheid{background:var(--birke); margin-top:1.4rem}
.bescheid-titel{font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.25; letter-spacing:-.01em; margin:0 0 .3rem}
.bescheid-text{font-size:.95rem; color:#4b544b; margin:0 0 .8rem}
.bescheid-zeile{display:flex; gap:.5rem; flex-wrap:wrap}
.bescheid-zeile input{flex:1 1 13rem; min-width:0; min-height:46px; font:inherit; font-size:1rem; padding:.6em .8em; border:1px solid rgba(20,28,20,.3); border-radius:3px; background:#fff; color:var(--rinde)}
.bescheid-zeile input:focus-visible{outline:2px solid var(--tanne); outline-offset:1px}
.bescheid-zeile input[aria-invalid=true]{border-color:var(--fehler); background:#fdf6f4}
.bescheid-zeile .knopf{flex:none; min-height:46px}
.bescheid-check{display:flex; gap:.6rem; align-items:flex-start; margin-top:.8rem; font-size:.85rem; line-height:1.45; color:#4b544b; cursor:pointer}
.bescheid-check input{flex:none; width:1.25rem; height:1.25rem; margin:.1rem 0 0; accent-color:var(--tanne)}
.bescheid-check a{color:var(--tanne)}
.bescheid-fehler{color:var(--fehler); font-size:.88rem; margin:.4rem 0 0}
.bescheid-ok .bescheid-titel{color:var(--tanne)}
.bescheid-ok p:last-child{margin:0; font-size:.95rem}
.bescheid-block{margin-bottom:2rem}
.bescheid-seite{padding-block:clamp(3rem,7vw,6rem)}
.h-klein{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.8rem}
@media(max-width:480px){.bescheid-zeile .knopf{width:100%}}

/* ---------- Kundenstimmen (Startseite) ---------- */
.stimmen-kopf{display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(1.8rem,4vw,3rem)}
.stimmen-kopf h2{max-width:16ch}
.stimmen-dach{font-family:var(--display); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--akzent-dunkel); margin:0 0 .8rem}
.stimmen-google{display:flex; align-items:center; gap:.9rem; text-decoration:none; padding:.8rem 1.1rem; background:#fff; border:1px solid var(--linie); border-radius:3px}
.stimmen-google:hover,.stimmen-google:focus-visible{border-color:var(--tanne)}
.stimmen-note{font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1; letter-spacing:-.03em}
.stimmen-google > span:last-child{display:flex; flex-direction:column; gap:.2rem}
.stimmen-anzahl{font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--tanne)}
.sterne{position:relative; display:inline-block; font-size:1.05rem; letter-spacing:.08em; line-height:1; color:#c9cbbd}
.sterne span{position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:var(--akzent-dunkel)}
.stimmen-liste{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem)}
.stimme{margin:0; display:flex; flex-direction:column; gap:.9rem; background:#fff; border:1px solid var(--linie); border-radius:3px; padding:clamp(1.3rem,2.5vw,1.8rem)}
.stimme-sterne{margin:0; color:var(--akzent-dunkel); letter-spacing:.1em; font-size:1rem; line-height:1}
.stimme-sterne span{color:#c9cbbd}
.stimme blockquote{margin:0; flex:1}
.stimme blockquote p{margin:0; font-size:1.05rem; line-height:1.55}
.stimme blockquote p::before{content:"„"}
.stimme blockquote p::after{content:"“"}
.stimme figcaption{display:flex; flex-direction:column; gap:.1rem; padding-top:.9rem; border-top:1px solid var(--linie); font-size:.9rem}
.stimme figcaption strong{font-family:var(--display); font-weight:700}
.stimme figcaption span{color:#4b544b; font-size:.85rem}
.stimmen-aktion{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
@media(max-width:960px){.stimmen-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Handy: waagerecht wischen statt sechs Karten untereinander. */
@media(max-width:640px){
  .stimmen-liste{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--rand); gap:.8rem; margin-inline:calc(var(--rand) * -1); padding:0 var(--rand) .6rem; scrollbar-width:thin}
  .stimme{flex:0 0 84%; scroll-snap-align:start}
}

/* ---------- Footer ---------- */
.fuss{background:var(--rinde); color:#C7CDBE; padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; font-size:.95rem}
.fuss-raster{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem}
.fuss-adresse{font-style:normal; margin-bottom:.4rem; line-height:1.55}
.fuss img{width:130px; margin-bottom:1.2rem}
.fuss h3{font-size:.95rem; color:var(--birke); margin-bottom:.9rem; font-weight:600}
.fuss ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
/* Tippfläche ≥ 44 px auf dem Handy (Design-Audit), Abstand kommt aus dem Padding. */
.fuss ul a{display:inline-block; padding:.25rem 0}
@media(max-width:760px){.fuss ul a{padding:.6rem 0}}
.fuss a{text-decoration:none; border-bottom:1px solid transparent}
.fuss a:hover,.fuss a:focus-visible{border-color:var(--akzent-hell); color:var(--birke)}
.fuss-ende{margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(233,234,224,.18); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.87rem}
@media(max-width:960px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fuss-raster{grid-template-columns:1fr}}

/* Fokusrahmen: Tanne auf hellem Grund (10:1 statt Honig 2,5:1), auf dunklen
   Flächen der helle Akzent (≥ 4,6:1). */
:focus-visible{outline:2.5px solid var(--tanne); outline-offset:3px}
:is(.hero,.werkstatt,.fk-hero,.fuss,.kontaktkarte,.aktuelles,.bankbox,.fk-frist-box) :focus-visible{outline-color:var(--akzent-hell)}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}