/* ============================================================
   Kiosk & Späti Gladiolenweg
   Farben aus dem Flyer abgeleitet
   ============================================================ */

:root{
  --tinte:        #1A1819;
  --tinte-tief:   #100E0F;
  --tinte-hoch:   #221F20;
  --gold:         #C38F48;
  --gold-hell:    #E4BC7C;
  --gold-tief:    #8A6330;
  --creme:        #EFDCBB;
  --creme-matt:   rgba(239, 220, 187, .62);

  --schrift-display: "Oswald", "Arial Narrow", sans-serif;
  --schrift-text:    "Lora", Georgia, serif;
  --schrift-hand:    "Yellowtail", cursive;

  --breite: 1180px;
  --rund: 2px;
  --weich: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--tinte);
  color:var(--creme);
  font-family:var(--schrift-text);
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.huelle{ width:min(100% - 2.5rem, var(--breite)); margin-inline:auto; }
.huelle--schmal{ width:min(100% - 2.5rem, 760px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--tinte); padding:.7rem 1.2rem;
  font-family:var(--schrift-display); letter-spacing:.06em;
}
.skip:focus{ left:1rem; top:1rem; }

.ikon-vorrat{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Kornstruktur ---------- */
.korn{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ============================================================
   KOPFZEILE
   ============================================================ */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:1.1rem 0;
  transition:padding .35s var(--weich), background-color .35s var(--weich), box-shadow .35s var(--weich);
}
.kopf::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,14,15,.96), rgba(16,14,15,.78) 62%, transparent);
  opacity:0; transition:opacity .35s var(--weich);
}
.kopf.ist-gescrollt{ padding:.5rem 0; box-shadow:0 1px 0 rgba(195,143,72,.22); }
.kopf.ist-gescrollt::after{ opacity:1; }

.kopf__innen{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.kopf__marke img{
  width:auto; height:52px;
  transition:height .35s var(--weich), filter .35s var(--weich);
  filter:drop-shadow(0 0 14px rgba(195,143,72,.18));
}
.kopf.ist-gescrollt .kopf__marke img{ height:40px; }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-family:var(--schrift-display);
  font-size:.82rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--creme-matt);
  position:relative; padding:.35rem 0;
  transition:color .25s var(--weich);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-hell));
  transition:width .3s var(--weich);
}
.nav a:hover{ color:var(--creme); }
.nav a:hover::after{ width:100%; }

.nav__insta{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold) !important; }
.nav__insta svg{ width:17px; height:17px; }

.burger{
  display:none; width:44px; height:40px; background:none; border:0; cursor:pointer;
  padding:8px 6px; flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:2px; background:var(--gold); transition:transform .3s var(--weich), opacity .25s; }
.burger.ist-offen span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.ist-offen span:nth-child(2){ opacity:0; }
.burger.ist-offen span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:9rem 0 5rem; text-align:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, #262223 0%, var(--tinte) 46%, var(--tinte-tief) 100%);
}

.hero__schein{
  position:absolute; left:50%; top:38%; translate:-50% -50%;
  width:min(1100px, 130vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(195,143,72,.26) 0%, rgba(195,143,72,.09) 34%, transparent 66%);
  filter:blur(14px);
  animation:pulsieren 9s ease-in-out infinite;
}
@keyframes pulsieren{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.07); }
}

.hero__strahlen{
  position:absolute; left:50%; top:38%; translate:-50% -50%;
  width:min(980px, 120vw); aspect-ratio:1; opacity:.13;
  background:repeating-conic-gradient(from 0deg, rgba(228,188,124,.85) 0deg 1.1deg, transparent 1.1deg 9deg);
  mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%);
  animation:drehen 160s linear infinite;
}
@keyframes drehen{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero__innen{ position:relative; z-index:2; }

.hero__logo img{
  width:min(660px, 88vw); margin-inline:auto;
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.7));
  animation:auftauchen 1.2s var(--weich) both;
}
@keyframes auftauchen{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
  to  { opacity:1; transform:none; }
}

.hero__zeile{
  font-family:var(--schrift-hand);
  font-size:clamp(2.5rem, 6.8vw, 4.2rem);
  line-height:1.15;
  color:var(--gold-hell); margin:.4rem 0 1.4rem;
  animation:auftauchen 1.2s .25s var(--weich) both;
}

.hero__text{
  max-width:46ch; margin:0 auto 1.4rem;
  color:var(--creme-matt); font-size:1.07rem;
  animation:auftauchen 1.2s .4s var(--weich) both;
}

.hero__adresse{
  margin:0 auto 2.6rem;
  font-family:var(--schrift-display);
  font-size:clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  animation:auftauchen 1.2s .48s var(--weich) both;
}

/* ---------- Status ---------- */
.status{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 2.2rem;
  padding:.45rem 1.15rem;
  border:1px solid rgba(195,143,72,.42);
  background:rgba(195,143,72,.07);
  font-family:var(--schrift-display);
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creme);
  animation:auftauchen 1s var(--weich) both;
}
.status__punkt{
  width:8px; height:8px; border-radius:50%;
  background:#7CC08A; box-shadow:0 0 0 0 rgba(124,192,138,.6);
  animation:blinken 2.4s infinite;
}
.status[data-zustand="zu"] .status__punkt{ background:#B4544A; animation:none; box-shadow:none; }
.status[data-zustand="gleich"] .status__punkt{ background:var(--gold-hell); }
@keyframes blinken{
  0%  { box-shadow:0 0 0 0 rgba(124,192,138,.55); }
  70% { box-shadow:0 0 0 9px rgba(124,192,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,192,138,0); }
}

.hero__pfeil{
  position:absolute; left:50%; bottom:2.2rem; translate:-50% 0; z-index:2;
  width:1px; height:56px; background:linear-gradient(180deg, transparent, rgba(195,143,72,.7));
  overflow:visible;
}
.hero__pfeil span{
  position:absolute; left:50%; top:0; translate:-50% 0;
  width:5px; height:5px; border-radius:50%; background:var(--gold-hell);
  animation:rieseln 2.6s var(--weich) infinite;
}
@keyframes rieseln{
  0%  { top:0; opacity:0; }
  30% { opacity:1; }
  100%{ top:52px; opacity:0; }
}

/* ============================================================
   KNOEPFE
   ============================================================ */
.knopfreihe{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; animation:auftauchen 1.2s .55s var(--weich) both; }

.knopf{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.9rem; border-radius:var(--rund);
  font-family:var(--schrift-display); font-size:.84rem;
  letter-spacing:.17em; text-transform:uppercase; text-decoration:none;
  transition:transform .3s var(--weich), box-shadow .3s var(--weich), color .3s var(--weich);
}
.knopf svg{ width:18px; height:18px; }

.knopf--voll{
  background:linear-gradient(135deg, var(--gold-tief), var(--gold) 48%, var(--gold-hell));
  color:#1A1819; font-weight:600;
  box-shadow:0 8px 26px rgba(195,143,72,.24);
}
.knopf--voll:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(195,143,72,.36); }
.knopf--voll::before{
  content:""; position:absolute; inset:0; translate:-120% 0;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transition:translate .75s var(--weich);
}
.knopf--voll:hover::before{ translate:120% 0; }

.knopf--rand{
  border:1px solid rgba(195,143,72,.55); color:var(--gold-hell);
}
.knopf--rand:hover{
  transform:translateY(-3px);
  border-color:var(--gold-hell); color:var(--creme);
  box-shadow:0 10px 28px rgba(0,0,0,.45), inset 0 0 24px rgba(195,143,72,.12);
}
.knopf--breit{ width:100%; }

/* ============================================================
   ABSCHNITTE
   ============================================================ */
.block{ padding:clamp(4.5rem, 9vw, 7.5rem) 0; position:relative; }
.block--tief{ background:linear-gradient(180deg, var(--tinte-tief), #151314); }

.ueberzeile{
  font-family:var(--schrift-display);
  font-size:.76rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .7rem; text-align:center;
}

.titel{
  margin:0 auto .9rem; text-align:center;
  font-family:var(--schrift-display); font-weight:600;
  font-size:clamp(2.1rem, 5.2vw, 3.3rem);
  letter-spacing:.03em; text-transform:uppercase; line-height:1.08;
  background:linear-gradient(100deg, var(--gold-tief) 0%, var(--creme) 26%, var(--gold-hell) 48%, var(--creme) 70%, var(--gold-tief) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:schimmern 9s linear infinite;
}
@keyframes schimmern{ to{ background-position:220% 0; } }
.titel--klein{ font-size:clamp(1.6rem, 3.6vw, 2.2rem); }

.einleitung{
  max-width:56ch; margin:0 auto clamp(2.8rem, 5vw, 4rem);
  text-align:center; color:var(--creme-matt);
}

/* ---------- Zierleiste ---------- */
.zierleiste{
  display:flex; align-items:center; justify-content:center; gap:1.1rem;
  width:min(100% - 2.5rem, 560px); margin:0 auto;
}
.zierleiste__linie{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(195,143,72,.55), transparent);
}
.zierleiste__raute{ width:11px; height:11px; color:var(--gold); flex:none; }

/* ============================================================
   SORTIMENT
   ============================================================ */
.karten{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(248px, 1fr));
}

.karte{
  position:relative; overflow:hidden;
  padding:2.4rem 1.8rem 2rem;
  background:linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border:1px solid rgba(195,143,72,.2);
  transition:transform .4s var(--weich), border-color .4s var(--weich), box-shadow .4s var(--weich);
}
.karte::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(520px circle at 50% 0%, rgba(195,143,72,.16), transparent 62%);
  transition:opacity .4s var(--weich);
}
.karte:hover{
  transform:translateY(-7px);
  border-color:rgba(228,188,124,.55);
  box-shadow:0 22px 48px rgba(0,0,0,.5);
}
.karte:hover::before{ opacity:1; }

.karte__ikon{
  position:relative; z-index:1;
  display:grid; place-items:center; width:58px; height:58px; margin-bottom:1.3rem;
  border:1px solid rgba(195,143,72,.4); color:var(--gold-hell);
  transition:color .35s var(--weich), border-color .35s var(--weich), transform .5s var(--weich);
}
.karte__ikon svg{ width:27px; height:27px; }
.karte:hover .karte__ikon{ color:var(--creme); border-color:var(--gold-hell); transform:rotate(-4deg) scale(1.06); }

.karte h3{
  position:relative; z-index:1; margin:0 0 .6rem;
  font-family:var(--schrift-display); font-weight:500;
  font-size:1.22rem; letter-spacing:.12em; text-transform:uppercase; color:var(--creme);
}
.karte p{ position:relative; z-index:1; margin:0; color:var(--creme-matt); font-size:.98rem; }

/* ============================================================
   GALERIE
   ============================================================ */
.galerie{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(3, 1fr);
}
.galerie__feld{
  position:relative; margin:0; overflow:hidden;
  border:1px solid rgba(195,143,72,.2);
  aspect-ratio:3/4;
}

.galerie__feld img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.05) brightness(.9);
  transition:transform .8s var(--weich), filter .6s var(--weich);
}
/* Beim Außenbild liegt der Laden im oberen Drittel, Ausschnitt entsprechend nach oben */
.galerie__feld:first-child img{ object-position:center 18%; }
.galerie__feld:hover img{ transform:scale(1.06); filter:saturate(1) contrast(1.05) brightness(1); }

/* Bildunterschriften werden nicht mehr genutzt, Regeln bleiben fuer spaetere Verwendung entfernt */

/* Platzhalter, solange Fotos fehlen */
.fehlt{
  background:
    repeating-linear-gradient(135deg, rgba(195,143,72,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #201D1E, #161415);
}
.fehlt img{ display:none; }
.fehlt::before{
  content:attr(data-fehlt);
  position:absolute; inset:0; display:grid; place-items:center; z-index:1;
  font-family:var(--schrift-display); font-size:.78rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(195,143,72,.55);
}
.galerie__feld.fehlt figcaption{ display:none; }

/* ============================================================
   OEFFNUNGSZEITEN
   ============================================================ */
.zeitenblock{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1.15fr .85fr;
  align-items:center;
}
.zeitenblock__text{ min-width:0; }

.zeiten{ list-style:none; margin:0 0 2rem; padding:0; }
.zeiten li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1rem;
  padding:1.15rem .4rem;
  border-bottom:1px solid rgba(195,143,72,.16);
  transition:background-color .3s var(--weich), padding-inline .3s var(--weich);
}
.zeiten li:first-child{ border-top:1px solid rgba(195,143,72,.16); }
.zeiten__tag{
  font-family:var(--schrift-display); font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.zeiten__uhr{ color:var(--creme-matt); font-variant-numeric:tabular-nums; }
.zeiten--zu .zeiten__tag,.zeiten--zu .zeiten__uhr{ color:rgba(239,220,187,.35); }

.zeiten li.ist-heute{
  background:linear-gradient(90deg, rgba(195,143,72,.14), transparent);
  padding-inline:1rem .4rem;
  border-left:2px solid var(--gold);
}
.zeiten li.ist-heute .zeiten__tag{ color:var(--gold-hell); }
.zeiten li.ist-heute .zeiten__tag::after{
  content:"Heute"; margin-left:.9rem;
  font-size:.62rem; letter-spacing:.2em;
  padding:.2rem .55rem; border:1px solid rgba(195,143,72,.5); color:var(--gold);
}

.hinweis{ text-align:center; color:var(--creme-matt); font-size:.94rem; font-style:italic; margin:0; }
.zeitenblock__text .hinweis{ text-align:left; }

/* ---------- Warenbild mit Goldrahmen ---------- */
.warenbild{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid rgba(195,143,72,.5);
  box-shadow:0 24px 56px rgba(0,0,0,.55);
  transition:box-shadow .5s var(--weich), border-color .5s var(--weich);
}
.warenbild:hover{
  border-color:var(--gold-hell);
  box-shadow:0 28px 64px rgba(0,0,0,.6), 0 0 40px rgba(195,143,72,.18);
}
.warenbild img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.78) contrast(1.05) brightness(.86);
  transition:transform .9s var(--weich), filter .6s var(--weich);
}
.warenbild:hover img{ transform:scale(1.05); filter:saturate(.95) contrast(1.05) brightness(.98); }

/* innere Goldlinie */
.warenbild__rahmen{
  position:absolute; inset:11px; z-index:2; pointer-events:none;
  border:1px solid rgba(195,143,72,.55);
}
.warenbild__rahmen::before,
.warenbild__rahmen::after{
  content:""; position:absolute; width:18px; height:18px;
  border:0 solid var(--gold-hell);
}
.warenbild__rahmen::before{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.warenbild__rahmen::after{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* Vignette, damit das Bild in den dunklen Hintergrund laeuft */
.warenbild::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(16,14,15,.7);
}

/* ============================================================
   ANFAHRT
   ============================================================ */
.anfahrt{ display:grid; gap:2.6rem; grid-template-columns:1fr 1fr; align-items:center; }

.anfahrt__karte{ display:flex; flex-direction:column; gap:1.2rem; }

.stadtplan{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1px solid rgba(195,143,72,.25);
  background:linear-gradient(160deg, #201D1E, #141213);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.stadtplan iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  /* Google Maps ist hell, hier auf den dunklen Goldlook getrimmt */
  filter:invert(.92) hue-rotate(178deg) saturate(.55) brightness(.92) contrast(1.05);
  transition:filter .5s var(--weich);
}
.stadtplan:hover iframe{
  filter:invert(.9) hue-rotate(178deg) saturate(.7) brightness(1) contrast(1.05);
}
.stadtplan::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(16,14,15,.75);
}

/* Zwei-Klick-Loesung: Karte laedt erst nach Zustimmung */
.stadtplan__laden{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem;
  width:100%; border:0; cursor:pointer; padding:1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(195,143,72,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #201D1E, #141213);
  color:var(--gold-hell);
  transition:color .3s var(--weich);
}
.stadtplan__laden svg{ width:38px; height:38px; transition:filter .3s var(--weich); }
.stadtplan__laden:hover{ color:var(--creme); }
.stadtplan__laden:hover svg{ filter:drop-shadow(0 0 16px rgba(195,143,72,.6)); }
.stadtplan__titel{
  font-family:var(--schrift-display); font-size:.86rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.stadtplan__hinweis{
  font-family:var(--schrift-text); font-size:.82rem;
  color:var(--creme-matt); max-width:28ch; text-align:center; line-height:1.5;
}

.anfahrt__text h3{
  margin:0 0 1rem; font-family:var(--schrift-display); font-weight:500;
  font-size:1.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--creme);
}
.anfahrt__text p{ color:var(--creme-matt); }
.adresse{ color:var(--creme) !important; font-size:1.12rem; line-height:1.85; }
.anfahrt__text .knopf{ margin-top:1rem; }

/* ============================================================
   WERBEBANNER MIT PARALLAX
   ============================================================ */
.banner{
  position:relative; overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw);
  min-height:clamp(280px, 34vh, 400px);
  display:grid; place-items:center start;
  text-align:left;
  background:var(--tinte-tief);
  border-block:1px solid rgba(195,143,72,.22);
}

.banner__bild{
  position:absolute; inset:0; margin:0; overflow:hidden;
}
.banner__bild img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  /* Reserve nach oben und unten, damit beim Verschieben kein Rand auftaucht */
  transform:scale(1.24);
  filter:saturate(.58) contrast(1.06) brightness(.6);
  will-change:transform;
}

.banner__schleier{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,14,15,.96) 0%, rgba(16,14,15,.9) 38%, rgba(16,14,15,.6) 62%, rgba(16,14,15,.42) 82%, rgba(16,14,15,.6) 100%),
    linear-gradient(0deg, rgba(195,143,72,.14), rgba(195,143,72,.14)),
    linear-gradient(180deg, var(--tinte-tief), transparent 20%, transparent 80%, var(--tinte-tief));
}

.banner__innen{ position:relative; z-index:2; padding:3rem 0; }

.banner__block{
  max-width:30rem;
  padding-left:1.6rem;
  border-left:2px solid var(--gold);
  text-align:left;
}
.banner__block .ueberzeile{ text-align:left; }
.banner__block .titel{ margin-left:0; margin-right:0; margin-bottom:1rem; text-align:left; }

.banner__text{
  margin:0; max-width:34ch;
  color:var(--creme); font-size:1.1rem;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}

/* Platzhalter im Banner mittig, nicht ueber die volle Breite gedehnt */
.banner__bild.fehlt::before{ font-size:.82rem; }

/* ============================================================
   INSTAGRAM BAND
   ============================================================ */
.band{
  position:relative; overflow:hidden;
  padding:clamp(4rem, 8vw, 6rem) 0; text-align:center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(195,143,72,.2), transparent 62%),
    linear-gradient(180deg, #151314, var(--tinte-tief));
  border-block:1px solid rgba(195,143,72,.2);
}
.band__ikon{ width:44px; height:44px; color:var(--gold); margin-bottom:1rem; }
.band p{ max-width:48ch; margin:0 auto 2rem; color:var(--creme-matt); }

/* ============================================================
   FUSSZEILE
   ============================================================ */
.fuss{ background:var(--tinte-tief); padding:4rem 0 1.8rem; }
.fuss__innen{
  display:grid; gap:2.6rem;
  grid-template-columns:1.4fr 1fr 1fr;
  padding-bottom:2.6rem;
  border-bottom:1px solid rgba(195,143,72,.16);
}
.fuss__marke img{ width:230px; margin-bottom:1rem; opacity:.95; }
.fuss__marke p{ margin:0; color:var(--creme-matt); font-size:.95rem; }

.fuss__spalte h3{
  margin:0 0 .9rem; font-family:var(--schrift-display); font-weight:400;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.fuss__spalte p{ margin:0; color:var(--creme-matt); font-size:.95rem; }
.fuss__spalte nav{ display:flex; flex-direction:column; gap:.5rem; }
.fuss__spalte nav a{
  color:var(--creme-matt); text-decoration:none; font-size:.95rem; width:fit-content;
  transition:color .25s var(--weich), transform .25s var(--weich);
}
.fuss__spalte nav a:hover{ color:var(--gold-hell); transform:translateX(4px); }

.fuss__zeile{
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  padding-top:1.6rem;
}
.fuss__zeile p{ margin:0; font-size:.82rem; color:rgba(239,220,187,.4); }

/* ============================================================
   EINWILLIGUNG
   ============================================================ */
.konsens{
  position:fixed; inset:auto 0 0 0; z-index:70;
  background:rgba(16,14,15,.97);
  border-top:1px solid rgba(195,143,72,.4);
  box-shadow:0 -18px 44px rgba(0,0,0,.55);
  padding:1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom, 0px));
  animation:konsensRein .5s var(--weich) both;
}
.konsens[hidden]{ display:none; }
@keyframes konsensRein{
  from{ opacity:0; transform:translateY(100%); }
  to  { opacity:1; transform:none; }
}

.konsens__innen{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.6rem 2.5rem; flex-wrap:wrap;
}
.konsens__text{ flex:1 1 26rem; min-width:0; }
.konsens__text h2{
  margin:0 0 .35rem;
  font-family:var(--schrift-display); font-weight:500; font-size:.88rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.konsens__text p{
  margin:0; font-size:.94rem; line-height:1.6; color:var(--creme-matt);
  max-width:62ch;
}
.konsens__text a{ color:var(--gold-hell); }

.konsens__knoepfe{ display:flex; gap:.8rem; flex:0 0 auto; }
.konsens__knoepfe .knopf{ padding:.8rem 1.4rem; font-size:.78rem; }

/* Schalter in der Fusszeile sieht aus wie die Links daneben */
.fuss__spalte nav button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--schrift-text); font-size:.95rem;
  color:var(--creme-matt); text-align:left; width:fit-content;
  transition:color .25s var(--weich), transform .25s var(--weich);
}
.fuss__spalte nav button:hover{ color:var(--gold-hell); transform:translateX(4px); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--weich), transform .8s var(--weich);
}
[data-reveal].ist-sichtbar{ opacity:1; transform:none; }
.karten [data-reveal]:nth-child(2){ transition-delay:.1s; }
.karten [data-reveal]:nth-child(3){ transition-delay:.2s; }
.karten [data-reveal]:nth-child(4){ transition-delay:.3s; }
.galerie [data-reveal]:nth-child(2){ transition-delay:.1s; }
.galerie [data-reveal]:nth-child(3){ transition-delay:.2s; }
.galerie [data-reveal]:nth-child(4){ transition-delay:.3s; }

/* ============================================================
   GROSSE BILDSCHIRME
   ============================================================ */
@media (min-width:1600px){
  :root{ --breite:1320px; }
  .hero__logo img{ width:min(760px, 60vw); }
}

/* ============================================================
   MOBIL UND TABLET
   ============================================================ */
@media (max-width:900px){
  .anfahrt{ grid-template-columns:1fr; }
  .zeitenblock{ grid-template-columns:1fr; }
  .zeitenblock__text .hinweis{ text-align:center; }
  .warenbild{ aspect-ratio:16/10; }
  .fuss__innen{ grid-template-columns:1fr 1fr; }
  .fuss__marke{ grid-column:1 / -1; }
  .galerie{ gap:.8rem; }
}

@media (max-width:720px){
  /* ---- Kopfzeile und Menue ---- */
  .burger{ display:flex; position:relative; z-index:2; }
  .kopf__marke{ position:relative; z-index:2; }
  .kopf__marke img{ height:44px; }
  .kopf.ist-gescrollt .kopf__marke img{ height:36px; }

  .nav{
    position:fixed; inset:0 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:.4rem;
    padding:6rem 1.5rem 2.5rem;
    max-height:100svh; overflow-y:auto;
    background:rgba(16,14,15,.985);
    border-bottom:1px solid rgba(195,143,72,.25);
    transform:translateY(-100%);
    transition:transform .45s var(--weich);
    z-index:1;
  }
  .nav.ist-offen{ transform:none; }
  .nav a{
    font-size:1.05rem; letter-spacing:.14em;
    padding:.75rem 0; width:100%;
  }
  .nav a::after{ display:none; }

  /* ---- Hero ---- */
  .hero{
    min-height:auto;
    padding:7rem 0 4rem;
  }
  .hero__logo img{ width:88vw; }
  .hero__pfeil{ display:none; }

  .status{
    max-width:100%; margin-bottom:1.6rem;
    padding:.45rem .9rem;
    font-size:.66rem; letter-spacing:.1em;
    text-align:left;
  }

  .hero__zeile{
    font-size:clamp(1.7rem, 7.4vw, 2.6rem);
    margin:.2rem 0 1rem;
  }
  .hero__text{ font-size:1rem; margin-bottom:1rem; }
  .hero__adresse{
    font-size:clamp(.82rem, 3.4vw, 1.1rem);
    letter-spacing:.12em;
    margin-bottom:2rem;
  }

  /* ---- Allgemein ---- */
  .titel{ overflow-wrap:break-word; }
  .knopf{ width:100%; }
  .knopfreihe{ flex-direction:column; }
  .zeiten li{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .zeiten li.ist-heute{ padding-inline:.8rem .4rem; }

  /* ---- Banner ---- */
  .banner{ min-height:clamp(260px, 42vh, 340px); }
  .banner__innen{ padding:2.5rem 0; }
  .banner__block{ padding-left:1.1rem; max-width:100%; }
  .banner__text{ font-size:1rem; }
  .banner__schleier{
    background:
      linear-gradient(90deg, rgba(16,14,15,.94) 0%, rgba(16,14,15,.84) 62%, rgba(16,14,15,.76) 100%),
      linear-gradient(0deg, rgba(195,143,72,.14), rgba(195,143,72,.14)),
      linear-gradient(180deg, var(--tinte-tief), transparent 20%, transparent 80%, var(--tinte-tief));
  }

  /* ---- Fusszeile ---- */
  .fuss__innen{ text-align:center; }
  .fuss__marke img{ width:190px; margin-inline:auto; }
  .fuss__spalte nav{ align-items:center; }
  .fuss__spalte nav a{ width:auto; }
  .fuss__spalte nav a:hover{ transform:none; }
  .fuss__zeile{ flex-direction:column; align-items:center; text-align:center; gap:.4rem; }

  .fuss__spalte nav button{ margin-inline:auto; text-align:center; }
  .fuss__spalte nav button:hover{ transform:none; }
  .konsens__innen{ flex-direction:column; align-items:stretch; gap:1.1rem; }
  .konsens__knoepfe{ flex-direction:column; }
  .konsens__text p{ font-size:.88rem; }

  /* ---- Sortiment und Galerie als Slider ---- */
  .karten,
  .galerie{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* aus der Inhaltsbreite heraus bis an beide Bildschirmkanten */
    width:100vw;
    margin-inline:calc(50% - 50vw);
    padding:.4rem 1.25rem 1.2rem;
    scroll-padding-inline:1.25rem;
  }
  .karten::-webkit-scrollbar,
  .galerie::-webkit-scrollbar{ display:none; }

  .karte{
    flex:0 0 78%;
    scroll-snap-align:center;
  }
  .galerie__feld{
    flex:0 0 78%;
    scroll-snap-align:center;
    aspect-ratio:3/4;
  }

  /* Verzoegerungen stoeren im Slider, alles soll sofort da sein */
  .karten [data-reveal],
  .galerie [data-reveal]{ transition-delay:0s; }
}

@media (max-width:640px){
  .fuss__innen{ grid-template-columns:1fr; }
  .karte{ padding:2rem 1.4rem 1.7rem; }
  .stadtplan{ aspect-ratio:1/1; }
}

@media (max-width:400px){
  .huelle{ width:min(100% - 2rem, var(--breite)); }
  .status{ font-size:.6rem; letter-spacing:.08em; }
  .hero__logo img{ width:92vw; }
}

/* ============================================================
   BEWEGUNG REDUZIEREN
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}