/* =========================================================================
   Spreewaldbauer zum Thomas Klaus
   Layout und Typografie nach Vorlage, Farben aus der Logo-CI.
   ========================================================================= */

/* ------------------------------------------------------------- Grundwerte */
/* Schriften liegen auf dem eigenen Server (keine Verbindung zu Google Fonts, siehe
   Datenschutz). Nur die Zeichensaetze latin und latin-ext. */
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/alegreya-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/alegreya-sans-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Alegreya Sans'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/alegreya-sans-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Cagliostro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/cagliostro-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  /* CI, abgeleitet aus dem Logo */
  --tief:      #14524A;   /* Tiefgrün – Kontur, Überschriften, dunkle Flächen */
  --tief-900:  #0C3A34;   /* Fußzeile */
  --tief-700:  #17635A;
  --blatt:     #4F8C4A;   /* Blattgrün – Hervorhebung auf hellem Grund */
  --frisch:    #9DCB6B;   /* Frischgrün – Akzentfläche, Hervorhebung auf dunkel */
  --frisch-50: #CFE4AE;
  --karotte:   #E07B33;   /* Karottenorange – Haupt-CTA */
  --karotte-d: #C4611F;
  --radies:    #C33F5C;   /* Radieschenrot – kleine Marker */
  --creme:     #F1E9D6;
  --creme-50:  #FAF6EC;
  --sand:      #E1D6C0;   /* Hero-Hintergrund auf dem Handy (Kundenwunsch) */
  --papier:    #FFFFFF;
  --tinte:     #17241F;
  --grau:      #6B7A73;
  --linie:     #E3DDCD;

  --huelle: 1280px;
  --rand: clamp(20px, 5vw, 56px);
  --luft: clamp(72px, 9vw, 132px);
  --radius: 22px;
  --radius-gross: 30px;

  --schrift-titel: "Cagliostro", "Alegreya Sans", Candara, "Segoe UI", sans-serif;
  --schrift-text:  "Alegreya Sans", Candara, "Segoe UI", system-ui, sans-serif;

  --kopf-hoehe: 116px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
/* Cagliostro hat nur einen Schnitt. Ohne diese Zeile rechnet der Browser fuer
   font-weight:700/800 einen Kunstfettschnitt, der verschmiert aussieht. Alegreya
   Sans hat echte Fettstufen und ist davon nicht betroffen. */
html{ font-synthesis-weight:none; }


*,*::before,*::after{ box-sizing:border-box; }

html{
  overflow-x:clip;                 /* fixierte Elemente dürfen die Seite nicht verbreitern */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-hoehe) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-size:clamp(16.5px,1.1vw,18px);   /* Alegreya Sans laeuft kleiner als Outfit */
  font-weight:400;
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; }

h1,h2,h3,h4{
  font-family:var(--schrift-titel);
  font-weight:400;              /* Cagliostro hat nur diesen Schnitt */
  line-height:1.06;             /* Luft fuer Umlaute */
  letter-spacing:0;
  margin:0;
  color:var(--tief);
  overflow-wrap:break-word;
  hyphens:auto;
}

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tief); color:var(--creme);
  padding:12px 20px; border-radius:0 0 12px 0; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--karotte);
  outline-offset:3px;
  border-radius:4px;
}

.huelle{
  width:100%;
  max-width:var(--huelle);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.abschnitt{ padding-block:var(--luft); }
.abschnitt--hell{ background:var(--papier); }
.abschnitt--creme{ background:var(--creme-50); }

/* --------------------------------------------------------------- Bausteine */
.eyebrow{
  font-family:var(--schrift-text);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grau);
  margin:0 0 18px;
}
.eyebrow--hell{ color:rgba(255,255,255,.78); }

.titel-gross{
  font-size:clamp(2.15rem,5.1vw,4.05rem);
  line-height:1.0;
}
.titel-gross em{ font-style:normal; color:var(--blatt); }
.titel-gross--hell{ color:var(--papier); }
.titel-gross--hell em{ color:var(--frisch); }

/* Kopfzeile einer Sektion: Titel links, Fließtext rechts, Unterkanten bündig */
.kopfzeile{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(38px,5vw,64px);
}
.kopfzeile--eng{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
.kopfzeile__text{ color:var(--grau); margin:0; max-width:52ch; }
.kopfzeile__notiz{
  margin:0; color:var(--grau); font-size:.94rem;
  max-width:34ch;
}

/* --------------------------------------------------------------- Buttons */
.btn{
  --btn-bg:var(--tief);
  --btn-fg:var(--creme);
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:14px 20px 14px 26px;
  border:0;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--schrift-text);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .2s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(20,82,74,.7); }
.btn:active{ transform:translateY(0); }

.btn--gross{ padding:17px 22px 17px 30px; font-size:1rem; }
.btn--voll{ width:100%; justify-content:space-between; }

.btn--karotte{ --btn-bg:var(--karotte); --btn-fg:#FFF7F0; }
.btn--karotte:hover{ background:var(--karotte-d); }
.btn--tief{ --btn-bg:var(--tief); --btn-fg:var(--creme); }
.btn--geist{
  --btn-bg:transparent; --btn-fg:var(--papier);
  border:1.5px solid rgba(255,255,255,.55);
  padding-inline:26px;
}
.btn--geist:hover{ background:rgba(255,255,255,.12); }

.btn__kreis{
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--tief);
  color:var(--creme);
  font-size:.95rem;
  flex:0 0 auto;
  transition:transform .3s var(--ease);
}
.btn__kreis--hell{ background:var(--creme); color:var(--tief); }
.btn:hover .btn__kreis{ transform:translateX(3px); }

.txt-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--schrift-text); font-weight:600;
  color:var(--tief); text-decoration:none;
  border-bottom:2px solid var(--frisch);
  padding-bottom:3px;
  transition:border-color .25s;
}
.txt-link span{ transition:transform .25s var(--ease); }
.txt-link:hover{ border-color:var(--karotte); }
.txt-link:hover span{ transform:translateX(5px); }
.txt-link--gross{ font-size:1.05rem; align-self:end; justify-self:end; }

.marke{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:7px 14px;
  border-radius:999px;
  font-family:var(--schrift-text);
  font-size:.74rem; font-weight:700;
  letter-spacing:.03em;
  background:var(--frisch); color:var(--tief);
}
.marke--karotte{ background:var(--karotte); color:#FFF7F0; }
.marke--radies{ background:var(--radies); color:#FFF3F5; }
.marke--frisch{ background:var(--frisch); color:var(--tief); }

.platzhalter{
  background:repeating-linear-gradient(-45deg,#F6EEDD,#F6EEDD 6px,#EFE4CC 6px,#EFE4CC 12px);
  border-radius:5px; padding:1px 8px; color:#8A7A55; font-style:italic;
}


/* =============================================================== KOPFZEILE */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--kopf-hoehe);
  display:flex; align-items:center;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.kopf__innen{
  width:100%; max-width:var(--huelle);
  margin-inline:auto; padding-inline:var(--rand);
  display:flex; align-items:center; gap:22px;
}

.kopf__logo{ display:block; flex:0 0 auto; line-height:0; }
.kopf__logo img{
  /* Das Original ist ein gestapeltes Zeichen (Gans ueber Schriftzug). Die Hoehe
     bestimmt die Groesse, nicht die Breite - sonst sprengt es die Leiste. */
  height:clamp(72px,8.2vw,104px); width:auto; display:block;
}
.kopf__logo .kopf__logo-hell{ display:none; }
/* Über dem Hero steht das Logo auf Bild -> helle Variante */
.kopf:not(.ist-fest) .kopf__logo img{ display:none; }
.kopf:not(.ist-fest) .kopf__logo .kopf__logo-hell{ display:block; }

.kopf.ist-fest{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--linie), 0 10px 30px -22px rgba(20,82,74,.5);
}

.nav{ margin-inline:auto; }
.nav__liste{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
}
.kopf.ist-fest .nav__liste{
  background:var(--creme-50);
  border-color:var(--linie);
}
.nav__link{
  display:block;
  padding:9px 17px;
  border-radius:999px;
  font-family:var(--schrift-text);
  font-size:.9rem; font-weight:600;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .25s, color .25s;
}
.kopf.ist-fest .nav__link{ color:var(--tief); }
.nav__link:hover{ background:rgba(255,255,255,.2); }
.kopf.ist-fest .nav__link:hover{ background:#FFF; }
.nav__link.is-aktiv{ background:var(--frisch); color:var(--tief); }
.kopf.ist-fest .nav__link.is-aktiv{ background:var(--frisch); color:var(--tief); }

.kopf__cta{ flex:0 0 auto; padding:12px 24px; }

.burger{
  display:none;
  width:48px; height:48px;
  flex:0 0 auto;
  border:0; border-radius:14px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  cursor:pointer;
  padding:14px 12px;
}
.kopf.ist-fest .burger{ background:var(--creme); }
.burger span{
  display:block; height:2px; border-radius:2px;
  background:var(--papier);
  transition:transform .3s var(--ease), opacity .2s;
}
.kopf.ist-fest .burger span{ background:var(--tief); }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------- Schubladenmenü */
.schublade{
  position:fixed; top:0; right:0; z-index:95;
  width:min(340px,86vw); height:100dvh;
  background:var(--tief);
  color:var(--creme);
  padding:calc(var(--kopf-hoehe) + 18px) 30px 30px;
  display:flex; flex-direction:column; justify-content:space-between;
  transform:translateX(101%);
  visibility:hidden;                    /* nicht fokussierbar im Ruhezustand */
  transition:transform .42s var(--ease), visibility .42s;
}
.schublade.ist-offen{ transform:translateX(0); visibility:visible; }
.schublade nav{ display:flex; flex-direction:column; gap:2px; }
.schublade nav a{
  font-family:var(--schrift-text);
  font-size:1.32rem; font-weight:700;
  color:var(--creme); text-decoration:none;
  padding:13px 0;
  border-bottom:1px solid rgba(241,233,214,.16);
}
.schublade nav a:hover{ color:var(--frisch); }
.schublade__fuss{ display:grid; gap:16px; }
.schublade__zeiten{ margin:0; font-size:.95rem; color:rgba(241,233,214,.85); }
.schublade__zeiten strong{ color:var(--frisch); font-weight:600; }
.schublade__schleier{
  position:fixed; inset:0; z-index:94;
  background:rgba(12,58,52,.5);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s;
}
.schublade__schleier.ist-sichtbar{ opacity:1; }

/* ==================================================================== HERO */
.hero{
  position:relative;
  /* Der Inhalt muss in den ersten Bildschirm passen - auch auf 1366x768. */
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:calc(var(--kopf-hoehe) + 20px);
  padding-bottom:clamp(36px,6vh,84px);
  isolation:isolate;
}
.hero__bild{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bild img{
  width:100%; height:100%;
  object-fit:cover; object-position:60% 50%;
  display:block;
}
.hero__bild picture{ display:contents; }   /* img misst sich weiter an .hero__bild */
/* Reisskante gibt es nur im Handy-Layout (HERO MOBIL) */
.hero__riss{ display:none; }
.hero__riss path{ fill:var(--sand); }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(12,45,40,.9) 0%, rgba(12,45,40,.72) 34%, rgba(12,45,40,.18) 62%, rgba(12,45,40,.05) 100%),
    linear-gradient(to top, rgba(12,45,40,.62), transparent 42%);
}
.hero__innen{
  position:relative; z-index:2;
  width:100%; max-width:var(--huelle);
  margin-inline:auto; padding-inline:var(--rand);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);
  align-items:end;
}
.hero__titel{
  color:var(--papier);
  /* Breite UND Hoehe begrenzen: auf flachen Laptops zaehlt die Hoehe. */
  font-size:clamp(2.1rem, min(4.7vw, 7.4vh), 4.1rem);
  line-height:1.04;
  margin:0 0 clamp(12px,2vh,20px);
  text-wrap:balance;
}
.hero__titel em{ font-style:normal; color:var(--frisch); }
.hero__lead{
  color:rgba(255,255,255,.9);
  max-width:48ch;
  margin:0 0 clamp(18px,3vh,28px);
  font-size:clamp(1rem,1.2vw,1.12rem);
}
.hero__aktion{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__karten{
  display:flex; flex-direction:column;
  align-items:flex-end; gap:14px;
  padding-bottom:6px;
}
/* Versatz wie in der Vorlage: obere Karte bündig rechts, untere eingerückt. */
.hero__karten .glas:last-child{ margin-right:clamp(18px,3.4vw,52px); }
.glas{
  width:min(310px,100%);
  padding:16px 22px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px);
  color:var(--papier);
}
.glas--klein{ width:min(238px,100%); }
.glas__zahl{
  font-family:var(--schrift-titel);
  font-size:clamp(1.7rem,2.6vw,2.4rem);
  font-weight:400; line-height:1;
  margin:0 0 6px;
  letter-spacing:0;
}
.glas__text{
  margin:0; font-size:.9rem; line-height:1.45;
  color:rgba(255,255,255,.82);
}

/* ================================================================ ÜBER UNS */
.paare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);
}
.paar{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(14px,1.8vw,24px);
  align-items:stretch;
}
.paar__bild{ border-radius:var(--radius); overflow:hidden; }
.paar__bild img{
  width:100%; height:100%; min-height:290px;
  object-fit:cover; display:block;
}
.paar__karte{
  position:relative;
  padding:clamp(22px,2.4vw,30px);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
}
.paar__karte--creme{ background:var(--creme-50); }
.paar__karte--frisch{ background:var(--frisch); }
.paar__karte--frisch .paar__zahl,
.paar__karte--frisch .paar__titel{ color:var(--tief); }
.paar__zahl{
  font-family:var(--schrift-titel);
  font-weight:800; font-size:clamp(1.3rem,2vw,1.72rem);
  letter-spacing:0; color:var(--tief);
  margin:0 0 4px; padding-right:56px;
}
.paar__titel{ font-size:1.06rem; font-weight:700; margin:0 0 12px; }
.paar__karte p{ font-size:.94rem; color:#3D4C45; margin:0; }
.paar__karte--frisch p{ color:#274A32; }
.pfeil{
  position:absolute; top:clamp(18px,2vw,24px); right:clamp(18px,2vw,24px);
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--tief); color:var(--creme);
  text-decoration:none; font-size:1.05rem;
  transition:transform .3s var(--ease), background-color .25s;
}
.pfeil:hover{ transform:translate(3px,-3px); background:var(--karotte); }

/* =============================================================== SORTIMENT */
.sortiment{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.sortiment__filter{
  display:flex; flex-direction:column;
  gap:2px;
  border-right:1px solid var(--linie);
  padding-right:20px;
  position:sticky; top:calc(var(--kopf-hoehe) + 24px);
}
.filter{
  appearance:none; border:0; background:none;
  text-align:left;
  padding:11px 4px;
  font-family:var(--schrift-text);
  font-size:.98rem; color:var(--grau);
  cursor:pointer;
  border-radius:8px;
  transition:color .2s, transform .25s var(--ease);
}
.filter:hover{ color:var(--tief); transform:translateX(9px); }
.filter.is-aktiv{
  color:var(--blatt); font-weight:600;
  font-family:var(--schrift-text);
}

.sortiment__gitter{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(226px,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.ware{ display:flex; flex-direction:column; }
.ware.ist-versteckt{ display:none; }
.ware__bild{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:16px;
}
.ware__bild img{
  width:100%; height:auto;
  aspect-ratio:4/3;
  object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.ware:hover .ware__bild img{ transform:scale(1.045); }
.ware__titel{ font-size:1.08rem; font-weight:700; color:var(--blatt); margin:0 0 5px; }
.ware__text{ font-size:.92rem; color:var(--grau); margin:0 0 10px; }
.ware__preis{
  margin:auto 0 0;
  font-family:var(--schrift-text);
  font-size:.88rem; font-weight:600; color:var(--tief);
  padding-top:10px; border-top:1px solid var(--linie);
}
.sortiment__leer{ grid-column:1/-1; color:var(--grau); }

/* Fuellt die letzte, sonst leere Rasterzelle und ist zugleich ein Einstieg. */
.ware--cta{
  border:1.5px dashed var(--frisch);
  border-radius:var(--radius);
  background:var(--creme-50);
  padding:24px;
  justify-content:center;
}
.ware__cta-innen{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ware__cta-eyebrow{
  font-family:var(--schrift-text);
  font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--karotte); margin:0;
}
.ware--cta .ware__titel{ color:var(--tief); margin:0; }
.ware--cta .ware__text{ margin:0 0 6px; }

/* =============================================================== STANDORTE */
.laeden{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,36px);
}
.laden{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  overflow:hidden;
}
.laden__bild{ position:relative; }
.laden__bild img{
  width:100%; height:100%; min-height:300px;
  object-fit:cover; display:block;
}
.laden__inhalt{ padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; }
.laden__titel{ font-size:1.34rem; font-weight:700; margin:0 0 10px; }
.laden__adresse{
  font-style:normal; color:var(--grau);
  font-size:.98rem; margin-bottom:18px;
}
.zeiten{ margin:0 0 22px; display:grid; gap:7px; }
.zeiten > div{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:7px;
  border-bottom:1px dashed var(--linie);
  font-size:.94rem;
}
.zeiten dt{ color:var(--grau); }
.zeiten dd{ margin:0; font-weight:600; color:var(--tief); font-family:var(--schrift-text); }
.laden .btn{ margin-top:auto; }

/* ================================================================= STIMMEN */
.stimme{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  max-width:920px;
  gap:clamp(28px,4.5vw,68px);
  align-items:start;
}
.stimme__inhalt{ display:flex; flex-direction:column; padding-top:6px; }
.stimme__zeichen{
  font-family:var(--schrift-titel);
  font-size:5rem; font-weight:800; line-height:.6;
  color:var(--blatt);
  margin-bottom:22px;
}
.stimme__spur{ position:relative; }
.stimme__zitat{
  margin:0;
  display:none;
}
.stimme__zitat.is-aktiv{ display:block; animation:einblenden .5s var(--ease); }
.stimme__zitat p{
  font-family:var(--schrift-titel);
  font-size:clamp(1.32rem,2.5vw,2.05rem);
  font-weight:700; line-height:1.28;
  letter-spacing:0;
  color:var(--tief);
  margin:0 0 26px;
}
.stimme__zitat em{ font-style:normal; color:var(--blatt); }
.stimme__zitat footer{ display:flex; flex-direction:column; gap:2px; }
.stimme__zitat footer strong{
  font-family:var(--schrift-text); font-weight:700;
  color:var(--tief); font-size:1rem;
}
.stimme__zitat footer span{ color:var(--grau); font-size:.9rem; }
@keyframes einblenden{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.stimme__steuer{
  display:flex; align-items:center; gap:14px;
  margin-top:34px;
}
.rundtaste{
  display:grid; place-items:center;
  width:48px; height:48px; flex:0 0 auto;
  border:1.5px solid var(--linie);
  border-radius:50%;
  background:var(--papier); color:var(--tief);
  font-size:1.05rem; cursor:pointer;
  transition:background-color .25s, color .25s, transform .25s var(--ease);
}
.rundtaste:hover{ background:var(--creme-50); transform:translateY(-2px); }
.rundtaste--voll{ background:var(--tief); color:var(--creme); border-color:var(--tief); }
.rundtaste--voll:hover{ background:var(--tief-700); }
.punkte{ display:flex; gap:8px; margin-right:auto; }
.stimme__steuer .rundtaste{ order:2; }
.stimme__steuer .punkte{ order:1; }
.punkt{
  width:9px; height:9px; padding:0;
  border:0; border-radius:50%;
  background:var(--linie); cursor:pointer;
  transition:background-color .25s, transform .25s var(--ease);
}
.punkt.is-aktiv{ background:var(--blatt); transform:scale(1.3); }

/* ================================================================ FUSSZEILE */
.fuss{
  background:var(--tief-900);
  color:rgba(241,233,214,.78);
  padding-block:clamp(56px,7vw,84px) 26px;
}
.fuss__innen{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr));
  gap:clamp(26px,3.4vw,48px);
  padding-bottom:clamp(38px,5vw,60px);
  border-bottom:1px solid rgba(241,233,214,.14);
}
.fuss__marke img{ width:clamp(168px,15vw,210px); height:auto; display:block; }
.fuss__claim{
  font-family:var(--schrift-titel); font-weight:700;
  color:var(--creme); font-size:1.08rem;
  margin:26px 0 12px;
}
.fuss__adresse{ font-style:normal; font-size:.95rem; }
.fuss__spalte{ display:flex; flex-direction:column; gap:11px; }
.fuss__spalte h2{
  font-size:1.02rem; font-weight:700;
  color:var(--creme); margin:0 0 6px;
}
.fuss__spalte a{
  color:rgba(241,233,214,.74);
  text-decoration:none; font-size:.95rem;
  transition:color .2s, transform .25s var(--ease);
  width:fit-content;
}
.fuss__spalte a:hover{ color:var(--frisch); transform:translateX(3px); }
.fuss__zeile{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  justify-content:space-between;
  padding-top:22px;
  font-size:.84rem;
  color:rgba(241,233,214,.55);
}
.fuss__zeile p{ margin:0; }

/* ================================================================== WISCHEN */
.wischreihe{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px);
}
/* Reihe mit nur zwei Karten (Events): sonst bliebe rechts eine leere Spalte.
   Nur ab 721 px - darunter ist die Reihe eine Wischreihe. */
@media (min-width:721px){
  .wischreihe--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.wisch-hinweis{ display:none; }

/* ================================================================= ANIMATION */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.ist-da{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
/* In waagerechten Wischreihen darf das Einblenden die Karten NICHT versetzen:
   der Versatz erzeugt senkrechten Inhalt in der Reihe, und die Reihe faengt
   damit vertikale Wischer ab (overflow-y:clip wird neben overflow-x:auto
   ohnehin zu hidden gerechnet). Hier also nur Deckkraft animieren. */
.wischreihe .reveal,
.wischreihe .reveal.ist-da{ transform:none; }

/* ============================================================== BILDSCHIRME */
@media (max-width:1080px){
  .kopf__cta{ display:none; }
  .nav__liste{ gap:0; }
  .nav__link{ padding-inline:13px; font-size:.86rem; }
  .paar{ grid-template-columns:1fr; }
  .paar__bild img{ min-height:230px; aspect-ratio:16/10; height:auto; }
  .laden{ grid-template-columns:1fr; }
  .laden__bild img{ min-height:0; aspect-ratio:16/10; height:auto; }
}

@media (max-width:900px){
  :root{ --kopf-hoehe:96px; }
  .nav{ display:none; }
  .burger{ display:block; margin-left:auto; }

  .kopfzeile,
  .kopfzeile--eng{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .txt-link--gross{ justify-self:start; }

  .hero{ padding-top:calc(var(--kopf-hoehe) + 14px); padding-bottom:26px; }
  .hero__karten .glas:last-child{ margin-right:0; }
  .hero__innen{ grid-template-columns:1fr; }
  .hero__karten{
    flex-direction:row; align-items:stretch;
    flex-wrap:nowrap; padding-top:16px; gap:10px;
  }
  .glas, .glas--klein{ flex:1 1 0; width:auto; min-width:0; }

  .paare{ grid-template-columns:1fr; }
  .laeden{ grid-template-columns:1fr; }


  /* Sortiment: Filter wird zur waagerechten Wischleiste über dem Gitter */
  .sortiment{ grid-template-columns:1fr; gap:26px; }
  .sortiment__filter{
    position:static;
    flex-direction:row;
    gap:8px;
    border-right:0;
    border-bottom:1px solid var(--linie);
    padding:0 0 14px;
    overflow-x:auto;
    overflow-y:hidden;                 /* zweite Achse abschalten */
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .sortiment__filter::-webkit-scrollbar{ display:none; }
  .filter{
    flex:0 0 auto;
    padding:9px 16px;
    border:1px solid var(--linie);
    border-radius:999px;
    white-space:nowrap;
  }
  .filter:hover{ transform:none; }
  .filter.is-aktiv{ background:var(--frisch); color:var(--tief); border-color:var(--frisch); }
}

@media (max-width:720px){
  /* Kartenreihen werden zu Wischreihen mit angeschnittener Folgekarte */
  .wischreihe{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    overflow-y:clip;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-inline:calc(var(--rand) * -1);
    padding-inline:var(--rand);
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
  }
  .wischreihe::-webkit-scrollbar{ display:none; }
  .wischreihe > *{
    flex:0 0 78%;
    scroll-snap-align:start;
    min-width:0;
  }
  .wisch-hinweis{
    display:block;
    margin:16px 0 0;
    font-size:.84rem;
    color:var(--grau);
  }
  .wisch-hinweis::before{ content:"↔  "; color:var(--frisch); }

  .sortiment__gitter{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .ware__titel{ font-size:1rem; }
  .ware__text{ font-size:.88rem; }

  .hero__aktion{ flex-direction:column; align-items:stretch; }
  .hero__aktion .btn{ justify-content:space-between; }
  .glas{ padding:12px 14px; }
  .glas__zahl{ font-size:1.5rem; margin-bottom:4px; }
  .glas__text{ font-size:.8rem; line-height:1.35; }
  .hero__aktion{ gap:10px; }
  .hero .btn--gross{ padding:12px 16px 12px 20px; }

  .fuss__innen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fuss__marke{ grid-column:1/-1; }
}

@media (max-width:420px){
  .sortiment__gitter{ grid-template-columns:1fr; }
  /* Einspaltig wuerde die Sektion sonst endlos lang – flachere Bilder. */
  .ware__bild img{ aspect-ratio:16/9; }
  /* In der Spalte darf flex-grow die Karten nicht auf Containerhoehe ziehen. */
  .stimme__zeichen{ font-size:3.6rem; }
}

/* ---------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================ RECHTSSEITEN */
.rechts{
  padding-top:calc(var(--kopf-hoehe) + clamp(48px,7vw,92px));
  padding-bottom:var(--luft);
  background:var(--papier);
}
.rechts__innen{ max-width:820px; }
.rechts h1{
  font-size:clamp(2.1rem,4.4vw,3.2rem);
  margin-bottom:14px;
}
.rechts__lead{ color:var(--grau); margin-bottom:clamp(34px,5vw,54px); }
.rechts h2{
  font-size:1.28rem;
  margin:clamp(32px,4vw,48px) 0 12px;
  padding-top:22px;
  border-top:1px solid var(--linie);
}
.rechts h3{ font-size:1.02rem; margin:22px 0 6px; }
.rechts p, .rechts li{ color:#3D4C45; }
.rechts ul{ margin:0 0 1em; padding-left:1.2em; }
.rechts li{ margin-bottom:.4em; }
.rechts a{ color:var(--blatt); }
.rechts__zurueck{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:30px; text-decoration:none;
  font-family:var(--schrift-text); font-weight:600; color:var(--tief);
}
.rechts__zurueck:hover{ gap:14px; }
.hinweis{
  margin:26px 0;
  padding:18px 22px;
  background:var(--creme-50);
  border:1px solid var(--linie);
  border-radius:14px;
  font-size:.95rem;
}
.hinweis strong{ color:var(--karotte-d); }
/* Rechtsseiten haben kein Hero – Kopfzeile sofort in der festen Variante. */
.kopf--fest-immer{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--linie); }
.kopf.kopf--fest-immer:not(.ist-fest) .kopf__logo img{ display:block; }
.kopf.kopf--fest-immer:not(.ist-fest) .kopf__logo .kopf__logo-hell{ display:none; }
.kopf--fest-immer .nav__liste{ background:var(--creme-50); border-color:var(--linie); }
.kopf--fest-immer .nav__link{ color:var(--tief); }
.kopf--fest-immer .burger{ background:var(--creme); }
.kopf--fest-immer .burger span{ background:var(--tief); }

/* ======================================================= PRODUKT DES MONATS */
.aktion{
  background:var(--papier);
  padding-block:clamp(56px,7vw,96px);
}
.aktion__innen{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:center;
}
.aktion__bild{
  position:relative;
  border-radius:var(--radius-gross);
  overflow:visible;
}
.aktion__bild img{
  width:100%; height:auto;
  aspect-ratio:4/3;
  object-fit:cover; display:block;
  border-radius:var(--radius-gross);
}
.aktion__lead{ color:var(--grau); margin:20px 0 22px; max-width:52ch; }
.aktion__fakten{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; gap:9px;
}
.aktion__fakten li{
  position:relative;
  padding-left:28px;
  font-size:.96rem; color:#3D4C45;
}
.aktion__fakten li::before{
  content:"";
  position:absolute; left:0; top:.52em;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--frisch);
  box-shadow:inset 0 0 0 3px var(--papier), 0 0 0 1.5px var(--blatt);
}

/* Gezacktes Aktionssiegel — rot auf gelb, bewusst ausserhalb der grünen CI,
   damit es als Preisauszeichnung sofort auffällt. */
.siegel-zacke{
  position:absolute;
  right:clamp(-14px,-1vw,-6px); bottom:clamp(-18px,-2vw,-10px);
  z-index:3;
  width:clamp(124px,15vw,186px);
  aspect-ratio:220/168;
  display:grid; place-items:center;
  filter:drop-shadow(0 12px 26px rgba(12,45,40,.34));
  rotate:-7deg;
}
.siegel-zacke svg{ position:absolute; inset:0; width:100%; height:100%; }
.siegel-zacke__text{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:1px;
  text-align:center;
  color:#FFF6E8;
  font-family:var(--schrift-text);
  line-height:1;
}
.siegel-zacke__klein{
  font-size:clamp(.56rem,1.05vw,.72rem);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.92;
}
.siegel-zacke__preis{
  font-size:clamp(1.1rem,2.1vw,1.6rem);
  font-weight:800;
  letter-spacing:-.02em;
  margin:3px 0;
}
.platzhalter--dunkel{
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22),rgba(255,255,255,.22) 5px,rgba(255,255,255,.08) 5px,rgba(255,255,255,.08) 10px);
  color:#FFF6E8;
}

/* ============================================================= NEUIGKEITEN */
.beitrag{
  display:flex; flex-direction:column;
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--radius-gross);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.beitrag:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -28px rgba(20,82,74,.55); }
.beitrag__bild{ position:relative; }
.beitrag__bild img{
  width:100%; height:auto;
  aspect-ratio:3/2;
  object-fit:cover; display:block;
}
.beitrag__inhalt{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.beitrag__datum{
  font-family:var(--schrift-text);
  font-size:.82rem; font-weight:600;
  color:var(--grau); margin:0 0 8px;
}
.beitrag__titel{ font-size:1.2rem; font-weight:700; margin:0 0 10px; }
.beitrag__inhalt p{ color:var(--grau); font-size:.95rem; }
.beitrag__inhalt .txt-link{ margin-top:auto; padding-top:16px; align-self:flex-start; }
/* Beitrag ohne Foto: typografische Karte statt eines unpassenden Bildes */
.beitrag--text{ background:var(--tief); border-color:var(--tief); }
.beitrag--text .beitrag__inhalt{ padding-top:28px; }
.beitrag--text .beitrag__titel{ color:var(--creme); }
.beitrag--text .beitrag__datum{ color:rgba(241,233,214,.6); }
.beitrag--text .beitrag__inhalt p{ color:rgba(241,233,214,.8); }
.beitrag--text .txt-link{ color:var(--creme); border-color:var(--frisch); }
/* Zwei Klassen, sonst gewinnt .beitrag__inhalt p mit seiner .95rem */
.beitrag__inhalt .beitrag__marke-text{
  font-family:var(--schrift-titel);
  font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:400; letter-spacing:0;
  color:var(--frisch);
  margin:0 0 6px; line-height:1;
}

/* ================================================== SAISONALE VERKAUFSSTÄNDE */
.staende-block{ margin-top:clamp(44px,6vw,76px); }
.staende-kopf{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,52px);
  align-items:end;
  margin-bottom:clamp(24px,3vw,36px);
  padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--linie);
}
.staende-titel{ font-size:clamp(1.3rem,2.2vw,1.76rem); font-weight:700; margin:0; }
.staende-text{ margin:0; color:var(--grau); font-size:.96rem; max-width:56ch; }
.staende{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.stand{
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:22px 24px 24px;
  display:flex; flex-direction:column;
}
.stand__zeitraum{
  align-self:flex-start;
  padding:6px 13px;
  border-radius:999px;
  background:var(--tief); color:var(--creme);
  font-family:var(--schrift-text);
  font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.stand__titel{ font-size:1.12rem; font-weight:700; margin:0 0 4px; }
.stand__zeit{
  font-family:var(--schrift-text); font-weight:600;
  color:var(--karotte); font-size:.9rem; margin:0 0 10px;
}
.stand__text{ color:var(--grau); font-size:.93rem; margin:0 0 14px; }
.stand__ort{
  margin:auto 0 0; padding-top:13px;
  border-top:1px dashed var(--linie);
  font-size:.88rem; color:var(--grau);
}

/* ============================================ Warenkachel ohne Foto (TODO) */
.ware__bild--leer{
  display:grid; place-items:center;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  border:1.5px dashed var(--linie);
  background:repeating-linear-gradient(-45deg,#F7F2E6,#F7F2E6 9px,#F1EADA 9px,#F1EADA 18px);
  color:#9A8C6C;
  font-family:var(--schrift-text); font-size:.9rem; font-weight:600;
  margin-bottom:16px;
}

/* ------------------------------------ Bildschirme für die neuen Bausteine */
@media (max-width:900px){
  .aktion__innen{ grid-template-columns:1fr; }
  /* Mobil zuerst die Überschrift, dann das Bild — Sektion beginnt mit ihrem Kopf */
  .aktion__bild{ order:2; margin-top:6px; }
  .aktion__text{ order:1; }
  .siegel-zacke{ right:6px; bottom:-14px; width:clamp(112px,26vw,150px); }
  .staende-kopf{ grid-template-columns:1fr; align-items:start; gap:14px; }
}

@media (max-width:720px){
  .staende{ grid-template-columns:none; }
  .beitrag__bild img{ aspect-ratio:16/10; }
  .aktion{ padding-block:clamp(44px,7vw,64px); }
}

/* ============================================ FLACHE HANDYS
   Nur schmal UND flach: iPhone SE mit Safari-Leisten (375x553), 320x568 - niedrigere
   Kopfzeile. Das Hero-Layout fuer Handys steht in "HERO MOBIL" am Dateiende. */
@media (max-width:720px) and (max-height:700px){
  :root{ --kopf-hoehe:84px; }
  .kopf__logo img{ height:62px; }
}

/* ====================================================== NEUIGKEITEN (Startseite) */
/* Drei Beitraege plus schmale Karte "Alle anzeigen". Am Handy bleibt es die Wischreihe. */
@media (min-width:1081px){
  .wischreihe--vier{ grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.72fr); }
}
@media (min-width:721px) and (max-width:1080px){
  .wischreihe--vier{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.beitrag--alle{ position:relative; }
.beitrag--alle .beitrag__inhalt{ justify-content:flex-end; }
.beitrag--alle .beitrag__titel{ font-size:clamp(1.4rem,2vw,1.75rem); line-height:1.1; }
.beitrag__alle-link{ color:inherit; text-decoration:none; }
/* ganze Karte klickbar */
.beitrag__alle-link::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.beitrag__alle-link:focus-visible{ outline:none; }
.beitrag--alle:focus-within{ outline:3px solid var(--karotte); outline-offset:3px; }
.beitrag__alle-pfeil{
  display:grid; place-items:center;
  width:52px; height:52px; margin-top:22px;
  border-radius:50%;
  background:var(--frisch); color:var(--tief);
  font-size:1.3rem;
  transition:transform .3s var(--ease);
}
.beitrag--alle:hover .beitrag__alle-pfeil{ transform:translateX(5px); }

/* Uebersichtsseite neuigkeiten.html */
.beitragsliste{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(36px,5vw,60px);
}

/* Kontakt in der Fusszeile - uebernimmt die fruehere CTA-Sektion und das Sprungziel #kontakt */
.fuss__kontakt{ margin:14px 0 0; font-size:.95rem; }
.fuss__kontakt a{ color:var(--creme); text-decoration:none; border-bottom:1px solid rgba(241,233,214,.35); }
.fuss__kontakt a:hover{ border-bottom-color:var(--frisch); }
.rechts__stand{ margin-top:clamp(32px,4vw,48px); color:var(--grau); }

/* ========================================================== BEITRAGSSEITEN */
/* Wie ein Zeitungsartikel: eine Lesespalte (760 px), Bilder klein im Textfluss.
   Gross werden sie erst per Klick in der Galerie (main.js, a[data-galerie]). */
.artikel{
  padding-top:calc(var(--kopf-hoehe) + clamp(36px,5vw,72px));
  padding-bottom:var(--luft);
  background:var(--papier);
}
.artikel__kopf,
.artikel .artikel__titelbild,
.artikel__text{
  max-width:calc(760px + 2 * var(--rand));
  margin-inline:auto;
  padding-inline:var(--rand);
}
/* Uebersicht neuigkeiten.html: Kopf sitzt in der Huelle, linksbuendig */
.huelle .artikel__kopf{ max-width:900px; margin-inline:0; padding-inline:0; }
.artikel__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:0 0 18px;
  font-family:var(--schrift-text); font-size:.92rem; color:var(--grau);
}
.artikel__marke{
  padding:6px 13px; border-radius:999px;
  background:var(--frisch); color:var(--tief);
  font-size:.74rem; font-weight:700; letter-spacing:.03em;
}
.artikel__marke--karotte{ background:var(--karotte); color:#FFF7F0; }
.artikel__marke--radies{ background:var(--radies); color:#FFF3F5; }
.artikel__titel{ font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.02; margin-bottom:20px; }
.artikel__titel em{ font-style:normal; color:var(--blatt); }
.artikel__lead{ font-size:clamp(1.1rem,1.45vw,1.24rem); line-height:1.58; color:#3D4C45; margin:0; }
.artikel figure{ margin:0; }
.artikel figcaption{ margin-top:7px; font-size:.83rem; line-height:1.4; color:var(--grau); }
.artikel .artikel__titelbild{ margin-top:clamp(26px,4vw,40px); }
.artikel__titelbild img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }

.artikel__text{ margin-top:clamp(26px,4vw,40px); }
.artikel__text::after{ content:""; display:table; clear:both; }
.artikel__text > h2{ clear:both; font-size:clamp(1.45rem,2.3vw,1.9rem); margin:clamp(34px,4.5vw,50px) 0 12px; }
.artikel__text > p,
.artikel__text li{ font-size:1.07rem; line-height:1.72; color:#3D4C45; }
.artikel__text > p{ margin:0 0 1em; }
.artikel__text p a,
.artikel__text dd a{ color:var(--blatt); }
.artikel__hinweis{ clear:both; font-size:.84rem !important; color:var(--grau) !important; }

/* ------------------------------------------------ Bilder im Textfluss */
.artikel__bild img{ width:100%; height:auto; display:block; }
.artikel__text .artikel__bild{ margin:6px 0 18px; }
.artikel__text .artikel__bild--rechts{ float:right; width:42%; margin:6px 0 14px 28px; }
.artikel__text .artikel__bild--links{ float:left; width:42%; margin:6px 28px 14px 0; }
.artikel__text .artikel__bild--hoch{ width:31%; }
.artikel__text .artikel__bild--ganz{ width:36%; }
.artikel__bild--quer img{ aspect-ratio:3/2; object-fit:cover; }
.artikel__bild--hoch img{ aspect-ratio:3/4; object-fit:cover; }

/* Drei kleine Bilder nebeneinander */
.bildleiste{ clear:both; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0 8px; }
.artikel__text .bildleiste .artikel__bild{ margin:0; }
.bildleiste img{ aspect-ratio:1; object-fit:cover; }
/* Unterschriften der Leiste nur fuer Screenreader und die Galerie */
.bildleiste figcaption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Bild-Link: Klick oeffnet die Galerie */
.bild-link{ display:block; position:relative; overflow:hidden; border-radius:12px; cursor:zoom-in; }
.artikel__titelbild .bild-link{ border-radius:var(--radius); }
.bild-link img{ transition:transform .5s var(--ease); }
.bild-link:hover img{ transform:scale(1.035); }
.bild-link::after{
  content:"+";
  position:absolute; right:9px; bottom:9px;
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(12,58,52,.78); color:var(--creme);
  font-size:1.25rem; line-height:1;
  opacity:0; transition:opacity .25s;
}
.bild-link:hover::after,
.bild-link:focus-visible::after{ opacity:1; }
@media (hover:none){ .bild-link::after{ opacity:.9; } }

/* ------------------------------------------------ Video kompakt */
.artikel__video{
  clear:both;
  display:grid; grid-template-columns:minmax(0,1fr) 190px;
  gap:clamp(18px,3vw,32px); align-items:center;
  margin:clamp(30px,4vw,44px) 0;
  padding:clamp(18px,2.6vw,26px);
  background:var(--tief); border-radius:var(--radius);
}
.artikel__video .eyebrow{ margin-bottom:10px; }
.artikel__video h2{ color:var(--papier); font-size:clamp(1.35rem,2.2vw,1.7rem); margin:0 0 10px; }
.artikel__video p{ color:rgba(241,233,214,.84); font-size:1rem; margin:0; }
.artikel__film{
  width:100%; height:auto; aspect-ratio:9/16; display:block;
  border-radius:12px; background:var(--tief-900); object-fit:cover;
}

/* ------------------------------------------------ Kaesten, Schritte, Fakten */
.artikel__kasten{
  clear:both;
  margin-top:clamp(34px,5vw,52px);
  padding:clamp(20px,3vw,32px);
  background:var(--creme-50);
  border:1px solid var(--linie);
  border-radius:var(--radius);
}
.artikel__kasten h2{ font-size:clamp(1.4rem,2.3vw,1.8rem); margin:0 0 12px; }
.artikel__kasten p, .artikel__kasten li{ color:#3D4C45; }

.schritte{ list-style:none; counter-reset:schritt; margin:8px 0 0; padding:0; display:grid; gap:12px; }
.schritte li{
  counter-increment:schritt; position:relative;
  padding:18px 20px 18px 76px;
  background:var(--creme-50); border:1px solid var(--linie); border-radius:var(--radius);
}
.schritte li::before{
  content:counter(schritt);
  position:absolute; left:18px; top:16px;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; background:var(--frisch); color:var(--tief);
  font-family:var(--schrift-titel); font-size:1.25rem;
}
.schritte strong{
  display:block; margin-bottom:3px;
  font-family:var(--schrift-titel); font-weight:400; font-size:1.2rem; color:var(--tief);
}
.tipps{ margin:0; padding-left:1.2em; }
.tipps li{ margin-bottom:.45em; }

.fakten{
  margin:0 0 8px; padding:4px 22px;
  background:var(--creme-50); border:1px solid var(--linie); border-radius:var(--radius);
}
.fakten > div{
  display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:14px;
  padding:13px 0; border-bottom:1px dashed var(--linie);
}
.fakten > div:last-child{ border-bottom:0; }
.fakten dt{ font-family:var(--schrift-text); font-weight:700; color:var(--tief); }
.fakten dd{ margin:0; color:#3D4C45; }

/* ------------------------------------------------ Abschluss und Weiterlesen */
.artikel__ende{
  clear:both;
  display:grid; grid-template-columns:minmax(0,1fr); gap:20px;
  margin-top:clamp(44px,6vw,68px);
  padding:clamp(24px,4vw,40px);
  background:var(--blatt); border-radius:var(--radius);
}
.artikel__ende h2{ color:var(--papier); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 12px; }
.artikel__ende h2 em{ font-style:normal; color:var(--frisch); }
.artikel__ende p{ color:rgba(255,255,255,.9); margin:0; max-width:52ch; }
.artikel__ende-aktion{ display:flex; flex-wrap:wrap; gap:12px; }

.artikel__weiter{ clear:both; margin-top:clamp(36px,5vw,56px); }
.weiter-karte{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(16px,3vw,26px); align-items:center;
  padding:12px; background:var(--papier);
  border:1px solid var(--linie); border-radius:var(--radius);
  text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.weiter-karte:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -26px rgba(20,82,74,.55); }
.weiter-karte img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; display:block; }
.weiter-karte > span{ display:flex; flex-direction:column; gap:4px; }
.weiter-karte__datum{ font-size:.86rem; color:var(--grau); }
.weiter-karte__titel{ font-family:var(--schrift-titel); font-size:clamp(1.2rem,2vw,1.5rem); color:var(--tief); line-height:1.1; }
.weiter-karte__link{ font-weight:700; color:var(--blatt); margin-top:6px; }

@media (max-width:600px){
  /* Schmale Spalte: Bilder nicht mehr umfliessen, sondern flach dazwischen */
  .artikel__text .artikel__bild--rechts,
  .artikel__text .artikel__bild--links{ float:none; width:100%; margin:4px 0 18px; }
  .artikel__bild--quer img,
  .artikel__bild--hoch img{ aspect-ratio:16/10; }
  .artikel__text .artikel__bild--ganz{ max-width:260px; }
  .artikel__video{ grid-template-columns:1fr; }
  .artikel__film{ max-width:220px; margin-inline:auto; }
  .artikel__ende-aktion .btn{ flex:1 1 auto; justify-content:space-between; }
  .weiter-karte{ grid-template-columns:minmax(0,112px) minmax(0,1fr); }
  .schritte li{ padding:16px 16px 16px 66px; }
  .schritte li::before{ left:14px; width:38px; height:38px; }
  .fakten{ padding:4px 18px; }
  .fakten > div{ grid-template-columns:1fr; gap:2px; }
}

/* ================================================================ GALERIE */
.galerie{
  position:fixed; inset:0;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:rgba(9,32,28,.96); color:var(--creme);
  overflow:hidden;
}
.galerie[open]{ display:flex; flex-direction:column; }
.galerie::backdrop{ background:rgba(9,32,28,.7); }
.galerie__buehne{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:70px 96px 10px;
  touch-action:pan-y;
}
.galerie__bild{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:6px;
  user-select:none; -webkit-user-drag:none;
}
.galerie__text{
  margin:0; padding:8px 96px 24px; min-height:3.4em;
  text-align:center; font-size:.95rem; line-height:1.45;
  color:rgba(241,233,214,.88);
}
.galerie__zaehler{ font-weight:700; color:var(--frisch); margin-right:10px; font-variant-numeric:tabular-nums; }
.galerie__knopf{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  width:52px; height:52px; padding:0;
  border:1.5px solid rgba(241,233,214,.35); border-radius:50%;
  background:rgba(12,58,52,.65); color:var(--creme);
  font-size:1.3rem; line-height:1; cursor:pointer;
  transition:background-color .2s, border-color .2s;
}
.galerie__knopf[hidden]{ display:none; }
.galerie__knopf:hover{ background:var(--karotte); border-color:var(--karotte); }
.galerie__zu{ top:16px; right:16px; font-size:1.7rem; }
.galerie__zurueck{ left:20px; top:50%; margin-top:-26px; }
.galerie__vor{ right:20px; top:50%; margin-top:-26px; }
@media (max-width:720px){
  .galerie__buehne{ padding:66px 10px 6px; }
  .galerie__text{ padding:6px 18px 88px; }
  .galerie__zurueck,
  .galerie__vor{ top:auto; bottom:20px; margin-top:0; }
  .galerie__zurueck{ left:calc(50% - 64px); }
  .galerie__vor{ right:calc(50% - 64px); }
}

/* Pfeil oben rechts in den Ueber-uns-Karten darf laengere Titel nicht ueberdecken */
.paar__karte .paar__zahl,
.paar__karte .paar__titel{ padding-right:54px; }
.beitrag--alle .beitrag__inhalt{ padding-top:32px; }

/* ============================================ SORTIMENT OHNE FILTER (2026-09-14) */
/* Filterleiste liegt in _werkzeuge/archiv/sortiment-vorlagen.html. Feste Spaltenzahl,
   damit die Vorschau auf der Startseite per nth-child sicher genau eine Reihe ist.
   Das komplette Sortiment steht in sortiment.html. */
.sortiment--ohne-filter{ grid-template-columns:minmax(0,1fr); }
.sortiment--ohne-filter .sortiment__gitter{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.sortiment__gitter--vorschau > :nth-child(n+5){ display:none; }
.sortiment__mehr{ display:flex; justify-content:center; margin-top:clamp(28px,4vw,44px); }
@media (max-width:1080px){
  .sortiment--ohne-filter .sortiment__gitter{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sortiment__gitter--vorschau > :nth-child(n+4){ display:none; }
}
@media (max-width:720px){
  .sortiment--ohne-filter .sortiment__gitter{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sortiment__gitter--vorschau > :nth-child(n+3){ display:none; }
  .sortiment__mehr .btn{ width:100%; justify-content:space-between; }
}
/* Einspaltig: zwei Waren untereinander, eine allein waere als Vorschau zu duenn */
@media (max-width:420px){
  .sortiment--ohne-filter .sortiment__gitter{ grid-template-columns:minmax(0,1fr); }
}

/* ======================================================= HERO MOBIL (2026-09-14) */
/* Handy: oben nur das Foto im Querformat, darunter Titel, Text, Knoepfe und die zwei
   Kurzinfos auf Sand (#E1D6C0). Die Kopfzeile traegt oben dieselbe Farbe (statt
   transparent ueber dem Foto) und wird wie bisher weiss, sobald der Hero weggescrollt ist.
   Ab 721 px bleibt das Vollbild mit Text auf dem Foto. */
@media (max-width:720px){
  .kopf:not(.ist-fest){ background:var(--sand); }
  /* auf hellem Grund das dunkle Logo und der dunkle Menueknopf */
  .kopf:not(.ist-fest):not(.kopf--fest-immer) .kopf__logo img{ display:block; }
  .kopf:not(.ist-fest):not(.kopf--fest-immer) .kopf__logo .kopf__logo-hell{ display:none; }
  .kopf:not(.ist-fest) .burger{ background:rgba(255,255,255,.55); }
  .kopf:not(.ist-fest) .burger span{ background:var(--tief); }

  .hero{
    min-height:0;
    display:block;
    padding:var(--kopf-hoehe) 0 30px;
    background:var(--sand);
  }
  .hero__titel{ color:var(--tief); }
  .hero__titel em{ color:var(--blatt); }
  .hero__lead{ color:#3D4C45; }
  .hero .btn--geist{ --btn-fg:var(--tief); border-color:rgba(20,82,74,.45); }
  .hero .btn--geist:hover{ background:rgba(20,82,74,.08); }
  .hero .glas{ color:var(--tief); }
  .hero .glas__text{ color:#3D4C45; }
  /* Eigener Ausschnitt (hero-hofladen-mobil.webp, 3:2): beginnt links an der Theke */
  .hero__bild{ position:relative; inset:auto; aspect-ratio:3/2; }
  .hero__bild img{ object-position:50% 50%; }
  .hero__veil{ display:none; }
  /* oben weicher Uebergang aus der Kopfzeile ins Foto */
  .hero__bild::before{
    content:""; position:absolute; inset:0 0 auto 0; z-index:1;
    height:40%;
    background:linear-gradient(to bottom, var(--sand) 0%, rgba(225,214,192,.55) 42%, rgba(225,214,192,0) 100%);
    pointer-events:none;
  }
  /* unten Reisskante in den Textbereich */
  .hero__riss{
    display:block;
    position:absolute; left:0; bottom:0; z-index:2;
    width:100%; height:clamp(26px,8vw,40px);
    overflow:visible;
  }
  .hero__riss rect{ fill:var(--sand); }
  /* Sicherung gegen Haarlinien des Fotos an der Unterkante (Rundung bei 2x/3x-Displays) */
  .hero__bild::after{
    content:""; position:absolute; left:0; right:0; bottom:0; z-index:3;
    height:2px; background:var(--sand); pointer-events:none;
  }

  .hero__innen{ padding-top:26px; }
  .hero__titel{ font-size:clamp(2rem,9vw,2.6rem); margin-bottom:12px; }
  .hero__lead{ font-size:1rem; line-height:1.55; margin-bottom:22px; }
  .hero__aktion{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .hero__aktion .btn{ flex:1 1 auto; justify-content:space-between; }
  .hero .btn--gross{ padding:12px 14px 12px 18px; font-size:.92rem; gap:10px; }

  .hero__karten{
    margin-top:24px; padding-top:22px;
    border-top:1px solid rgba(20,82,74,.16);
  }
  .glas{ background:rgba(255,255,255,.45); border-color:rgba(20,82,74,.14); backdrop-filter:none; }
}

/* ================================== UNTERSEITEN SORTIMENT + NEUIGKEITEN (2026-09-14) */
.seite-sortiment .sortiment{ margin-top:clamp(32px,4.5vw,56px); }

/* neuigkeiten.html: Neuigkeiten und Veranstaltungen als getrennte Bereiche */
.liste-sprung{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.liste-sprung a{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 10px 9px 18px;
  border:1px solid var(--linie); border-radius:999px;
  background:var(--creme-50); color:var(--tief);
  font-family:var(--schrift-text); font-weight:600; font-size:.95rem;
  text-decoration:none;
  transition:border-color .25s, background-color .25s;
}
.liste-sprung a:hover{ border-color:var(--frisch); background:#fff; }
.liste-sprung span{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--frisch); color:var(--tief); font-size:.85rem;
}
.liste-teil{
  margin-top:clamp(48px,6vw,84px);
  padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--linie);
}
.liste-teil__kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 28px;
}
.liste-teil__titel{ font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05; margin:0; color:var(--tief); }
.liste-teil__text{ margin:0; color:var(--grau); max-width:48ch; }
.liste-teil .beitragsliste{ margin-top:clamp(22px,3vw,36px); }
/* Startseite: "Neuigkeiten & Veranstaltungen" ist laenger als die anderen Sektionstitel */
.titel-gross--lang{ font-size:clamp(2rem,4.2vw,3.4rem); }

/* ======================================================= SOCIAL MEDIA (2026-09-14) */
/* Original-Logos in Markenfarben auf weissem Kreis - lesbar auf Foto, Weiss und Tiefgruen. */
.social{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; }
.social__link{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:#FFF;
  box-shadow:0 0 0 1px rgba(20,82,74,.12);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social__link img{ width:20px; height:20px; display:block; }
.social__link:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(20,82,74,.2), 0 10px 20px -12px rgba(0,0,0,.55); }
.social__link:focus-visible,
.social__knopf:focus-visible{ outline:3px solid var(--karotte); outline-offset:3px; }

.social--kopf{ flex:0 0 auto; gap:6px; }
.social--kopf .social__link{ width:38px; height:38px; }
.social--fuss{ margin-top:22px; gap:10px; }

.schublade__social{ display:grid; gap:10px; padding-top:4px; }
.schublade__social-titel{
  margin:0; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(241,233,214,.7);
}
.schublade__social .social{ gap:10px; }
.schublade__social .social__link{ width:44px; height:44px; }
.schublade__social .social__link img{ width:22px; height:22px; }

/* neuigkeiten.html: Kasten unter dem Seitenkopf */
.social-kasten{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 24px;
  margin-top:28px; padding:16px 18px 16px 22px;
  border:1px solid var(--linie); border-radius:18px;
  background:var(--creme-50);
}
.social-kasten__text{ margin:0; color:#3D4C45; max-width:52ch; }
.social-kasten__text strong{ color:var(--tief); }
.social-kasten__liste{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.social__knopf{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 9px;
  border:1px solid var(--linie); border-radius:999px;
  background:#FFF; color:var(--tief);
  font-family:var(--schrift-text); font-weight:600; font-size:.95rem;
  text-decoration:none;
  transition:border-color .25s, transform .25s var(--ease);
}
.social__knopf img{ width:22px; height:22px; display:block; }
.social__knopf:hover{ border-color:var(--frisch); transform:translateY(-2px); }
.sr-nur{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------ Schriftzug im Handy-Kopf (bis 900 px) */
.kopf__name{ display:none; }
@media (max-width:900px){
  .social--kopf{ display:none; }
  .kopf__innen{ gap:12px; }
  .kopf__logo{ display:flex; align-items:center; gap:10px; line-height:1; text-decoration:none; }
  .kopf__name{ display:flex; flex-direction:column; color:var(--papier); }
  .kopf.ist-fest .kopf__name,
  .kopf--fest-immer .kopf__name{ color:var(--tief); }
  .kopf__name-gross{
    font-family:var(--schrift-titel); font-weight:400; font-synthesis-weight:none;
    font-size:clamp(1.1rem,5.2vw,1.55rem); line-height:1;
  }
  .kopf__name-klein{
    margin-top:4px;
    font-family:var(--schrift-text); font-weight:600;
    font-size:clamp(.74rem,3.1vw,.9rem); letter-spacing:.05em; line-height:1;
    opacity:.8;
  }
}
/* Handy: Kopf steht auf Sand bzw. Weiss -> immer dunkle Schrift */
@media (max-width:720px){
  .kopf .kopf__name{ color:var(--tief); }
}