/* ============================================================================
   N E E D ' S  —  Aussehen

   Durchgehend DUNKEL, im Ton von Samer's Studio: Tinte mit grünem
   Unterton, EIN Neongrün als Akzent — sparsam, nur für einzelne Wörter,
   Striche und den einen vollen Knopf. Die Galerie ist derselbe Raum,
   nur eine Spur tiefer und ruhiger.

   Kein Bauteil kennt je eine feste Farbe — alles läuft über Rollen
   (--grund, --schrift, --akzent). Eine Klasse am Abschnitt schaltet die
   Stimmung um, Preisschild und Knopf ziehen von selbst mit.
   ============================================================================ */

/* Grundpalette — Tinte mit grünem Unterton, wie bei Samer's Studio.
   Grün ist hier KEINE Flächenfarbe. Es ist ein Signal: ein Wort, ein
   Strich, ein Knopf. Alles andere bleibt neutral, damit das Neon wirkt. */
:root,
.welt-kiosk {
  --grund:     #070A08;
  --flaeche:   #0E1310;
  --flaeche2:  #141A16;
  --schrift:   #F3F5EF;
  --leise:     #9BA49D;
  --linie:     rgba(243, 245, 239, 0.09);
  --linie2:    rgba(233, 255, 61, 0.24);
  --akzent:    var(--neon);
  --auf-akzent:#070A08;
}

/* Die Galerie: noch eine Spur tiefer und ruhiger — gleiche Farbfamilie,
   nur mehr Luft und weniger Kontrast. Kein zweiter Farbton mehr. */
.welt-galerie {
  --grund:     #050806;
  --flaeche:   #0A0F0C;
  --flaeche2:  #101613;
  --schrift:   #F5F6F1;
  --leise:     #8F9A91;
  --linie:     rgba(243, 245, 239, 0.10);
  --linie2:    rgba(233, 255, 61, 0.18);
  --akzent:    var(--neon);
  --auf-akzent:#070A08;
}

:root {
  /* Der EINE Akzent: Neongelb. Sonst nichts Buntes.
     Sparsam einsetzen — einzelne Wörter, Preise, Knöpfe, dünne Linien. */
  --neon:       #E9FF3D;
  --neon-tief:  #B4C900;
  --neon-glas:  rgba(233, 255, 61, 0.14);
  /* Dunkles Tannengrün — NUR für den Hintergrundschimmer und die Aura
     hinter dem Maskottchen. Nie für Schrift. */
  --tanne:      #173828;

  /* Alte Rollennamen zeigen jetzt auf dasselbe Grün — damit kein
     Bauteil mit einer verwaisten Farbe zurückbleibt. */
  --crimson:      var(--neon);

  --f-kaffee:  #E9A23B;
  --f-togo:    #F0B454;
  --f-spirit:  #DCC084;
  --f-brille:  #8B5CF6;
  --f-kohle:   #FF4136;
  --f-shisha:  #FF2E7E;
  --f-paket:   #3B82F6;
  --f-sim:     #22D3EE;
  --f-neutral: #8A8F9C;

  --display: 'Bricolage Grotesque', 'Arial Black', Impact, sans-serif;
  --text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rand: clamp(1.15rem, 5vw, 5rem);
  --luft: clamp(5rem, 13vw, 10rem);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  background: #070A08;
}

body {
  margin: 0;
  /* Ein einziger, kaum sichtbarer Tannen-Schimmer oben rechts. Der Trick
     aus dem Original: das Schwarz wirkt dadurch wie ein Raum, nicht wie
     eine leere Fläche. */
  background:
    radial-gradient(circle at 82% 6%, rgba(23, 56, 40, 0.22), rgba(23, 56, 40, 0.08) 18rem, transparent 40rem),
    var(--grund);
  color: var(--schrift);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .8s ease, color .8s ease;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================================
   ATMOSPHÄRE — Korn, Schwebeteilchen, Neon-X

   Der Unterschied zwischen "sauber gebaut" und "teuer". Darf aber nichts
   kosten: nur transform und opacity, nie ein Neuzeichnen.
   ============================================================================ */
/* Deko darf leuchten, aber nicht die Seite verbreitern. Der Schein hinter
   dem Maskottchen ist 130% breit; auf dem Handy schob er das Layout auf
   423 statt 390 Pixel, dadurch hing rechts alles halb aus dem Bild.
   Wichtig: clip, NICHT hidden — hidden wuerde den Aufklapp-Moment
   (position: sticky) kaputtmachen. */
main { overflow-x: clip; }

.korn {
  position: fixed;
  /* Frueher inset:-8% plus Verschiebung per transform. Das ragte ueber den
     Bildschirm hinaus und zog auf dem Handy die ganze Seite breiter, als sie
     sein darf. Jetzt randscharf, das Zucken macht die Musterlage. */
  inset: 0;
  z-index: 60;
  pointer-events: none;
  /* So leise, dass man es nicht als Korn wahrnimmt — es "verwackelt"
     nur die Farbstufen, damit dunkle Verläufe keine Streifen bilden. */
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: kornZuck 8s steps(1) infinite;
}
@keyframes kornZuck {
  0%   { background-position:   0px   0px; }
  20%  { background-position:  -7px   4px; }
  40%  { background-position:   4px  -7px; }
  60%  { background-position:  -4px  -4px; }
  80%  { background-position:   7px   4px; }
  100% { background-position:   0px   0px; }
}

/* Bläschen: liegen ganz hinten, fangen keine Klicks ab und werden von
   jedem Abschnitt (z-index 1) sauber überdeckt. z-index 0 statt -1 —
   bei -1 verschwinden sie hinter dem Hintergrund des body. */
#teilchen {
  position: fixed;
  inset: 0;
  /* Ein Canvas ist ein Bild-Element: ohne CSS-Breite nimmt es die Groesse
     seines Pixelpuffers an und ignoriert das rechte inset. Ohne diese zwei
     Zeilen war die Flaeche breiter als der Bildschirm. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.neonx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Kein mix-blend-mode mehr: Auf Schwarz sieht "screen" genauso aus
     wie normal, kostet den Handy-Grafikchip aber jedes Bild eine
     komplette Neuberechnung des ganzen Kopfbereichs. */
  opacity: var(--x-deck, 0.46);
}
.neonx svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Auf dem Handy wird das X formatfüllend hochskaliert — die Striche
   liegen dann mitten im Text. Deshalb dort noch einmal deutlich leiser. */
@media (max-width: 700px) {
  .neonx { opacity: calc(var(--x-deck, 0.46) * 0.5); }
}
@media (max-width: 899px) {
  .neonx svg { animation: none !important; }
}

/* Das X als Hologramm: hängt leicht im Raum und dreht sich kaum
   merklich — dazu ein seltenes, kurzes Flackern wie bei einer echten
   Projektion. Beides nur transform/opacity, läuft auf dem Kompositor. */
.neonx { perspective: 1100px; transition: transform 0.9s cubic-bezier(.16,1,.3,1); }
.neonx svg {
  will-change: transform;
  animation: xschweben 17s ease-in-out infinite alternate,
             holoflimmer 8.5s linear infinite;
}
@keyframes xschweben {
  from { transform: rotateX(2.6deg) rotateY(-3.2deg) translateY(-6px) scale(1.015); }
  to   { transform: rotateX(-2deg)  rotateY(3.4deg)  translateY(8px)  scale(1.045); }
}
@keyframes holoflimmer {
  0%, 86%, 100% { opacity: 1; }
  87%   { opacity: 0.82; }
  87.8% { opacity: 0.98; }
  89%   { opacity: 0.87; }
  90%   { opacity: 1; }
}

/* Die Farbläufe wachsen nach dem Laden langsam nach unten,
   wie frische Farbe, die wirklich läuft. */
.tropfen {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0.42);
  animation: tropfenlauf 9s cubic-bezier(.3,0,.14,1) forwards;
}
@keyframes tropfenlauf { to { transform: scaleY(1); } }

/* Der NEED'S-Schriftzug als Bild, mitten im Text. Höhe hängt an der
   Schriftgröße der Umgebung, die Grundlinie sitzt durch den kleinen
   Versatz richtig. So sieht der Name ÜBERALL aus wie das Logo. */
.wm {
  display: inline-block;
  height: 0.74em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.02em);
}
.wm--leiste { height: 0.95em; transform: translateY(0.08em); }
.wm--titel  { height: 0.78em; transform: translateY(0.02em); }

/* ===== Aufbau ===== */
.abschnitt {
  position: relative;
  z-index: 1;
  padding: var(--luft) var(--rand);
  max-width: 1360px;
  margin-inline: auto;
}

.abschnitt__kopf { margin-bottom: clamp(2.2rem, 5vw, 3.8rem); }

.kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--leise);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--akzent);
  flex: none;
}

/* Lange deutsche Wörter („Eröffnungsangebote") passen auf einem 320-px-
   Handy sonst nicht in die Zeile und werden rechts abgeschnitten. */
.abschnitt__titel {
  font-size: clamp(1.9rem, 6.5vw, 4.4rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.abschnitt__titel em { font-style: normal; color: var(--akzent); }

.abschnitt__text {
  max-width: 44ch;
  color: var(--leise);
  margin: 1.2rem 0 0;
}

/* ===== Knöpfe ===== */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--linie2);
  border-radius: 999px;
  background: transparent;
  color: var(--schrift);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease,
              transform .12s ease, box-shadow .25s ease;
}
.knopf:hover { background: var(--flaeche); border-color: var(--schrift); }
.knopf:active { transform: scale(0.98); }


.knopf--crimson {
  background: var(--neon);
  border-color: var(--neon);
  color: var(--auf-akzent);
  box-shadow: 0 0 34px -10px var(--neon);
}
.knopf--crimson:hover { box-shadow: 0 0 46px -8px var(--neon); }

/* ============================================================================
   KOPF
   ============================================================================ */
.kopfbereich {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 2.6rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}

.kopf-marke {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Hoehe am Adressblock rechts ausgerichtet: der ist zweizeilig rund 38px
   hoch, das Logo war mit 22px sichtbar kleiner. */
.kopf-marke__logo { height: clamp(32px, 6vw, 40px); width: auto; }
.kopf-marke__ort {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leise);
  text-align: right;
  line-height: 1.7;
}

.kopf-mitte { position: relative; z-index: 3; margin: auto 0; }

.kopf-titel {
  font-size: clamp(2.6rem, 8.5vw, 6.6rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.kopf-titel em { font-style: normal; color: var(--neon); text-shadow: 0 0 42px var(--neon-glas); }
/* Früher war diese ganze Zeile grün. Jetzt bleibt sie neutral — grün ist
   im Kopf nur noch EIN Wort und der Knopf. */
.kopf-titel .krim {
  font-style: normal;
  color: var(--schrift);
}


/* Zwei kurze Sätze unter dem Titel. Neutral gesetzt — das Neongelb
   steckt oben im einen Wort, hier unten braucht es keins. */
.kopf-sagt {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--leise);
}
.kopf-sagt b { color: var(--schrift); font-weight: 600; }

/* Der Scroll-Impuls unten im Kopf. Ein Pfeil, der ruhig atmet —
   mehr braucht es nicht, um zu zeigen, dass es weitergeht. */
.kopf-weiter {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leise);
  text-decoration: none;
  min-height: 44px;
  transition: color .25s ease;
}
.kopf-weiter:hover { color: var(--neon); }
.kopf-weiter span {
  color: var(--neon);
  animation: weiterTupf 2.4s ease-in-out infinite;
}
@keyframes weiterTupf {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(4px); opacity: 1; }
}

.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 2.8rem); }

.kopf-fuss {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--leise);
  padding-top: 1.2rem;
}
/* Öffnungszeit und Telefon haengt seite.js spaeter hier an — die
   kommen im DOM also HINTER den Pfeil. Mit order sitzt der Pfeil
   trotzdem immer rechts aussen. */
.kopf-fuss__punkt { order: 1; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.kopf-fuss__punkt::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 9px var(--neon-glas);
  flex: none;
}

/* ============================================================================
   DER MOMENT
   ============================================================================ */
.moment { position: relative; height: 145vh; z-index: 1; }
@media (max-width: 899px) { .moment { height: 130vh; } }

.moment__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding-inline: var(--rand);
}

.moment__bild {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 1060px);
  height: min(58vh, 580px);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 90px -20px rgba(0, 0, 0, 0.55);
}
.moment__bild img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.moment__bild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,8,.45), rgba(5,5,8,.1) 45%, rgba(5,5,8,.82));
}

.moment__schild {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1.4rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.moment__schild h3 { font-size: clamp(1.15rem, 3.4vw, 2.1rem); }
.moment__schild span {
  color: var(--leise);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.moment__wort {
  position: relative;
  will-change: transform;
  grid-area: 1 / 1;
  z-index: 2;
  margin: 0;
  line-height: 0;
}
.moment__wort img {
  display: block;
  width: min(88vw, 1120px);
  height: auto;
}
.moment__wort--oben  { clip-path: inset(-14% -10% 50% -10%); }
.moment__wort--unten { clip-path: inset(50% -10% -14% -10%); }

.moment__linie {
  position: absolute;
  left: -6%; right: -6%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  z-index: 3;
  background: var(--crimson);
  box-shadow: 0 0 22px 3px var(--crimson);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.moment__bild.ohne-bild { background: var(--flaeche); box-shadow: none; }
.moment__bild.ohne-bild::after { display: none; }
.moment__bild.ohne-bild .moment__innen { display: none; }
.moment__bild.ohne-bild .moment__schild {
  position: static; height: 100%;
  align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
}

/* ============================================================================
   ANGEBOTE
   ============================================================================ */
.angebote__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.ware {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.035), transparent 60%),
    var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 1.3rem 1.3rem 1.5rem;
  overflow: hidden;
  min-height: 250px;
  transition: border-color .3s ease, transform .3s ease;
}
.ware:hover { border-color: var(--linie2); transform: translateY(-3px); }
.ware::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ware-farbe, var(--f-neutral));
}

.ware__bild {
  height: 140px;
  margin: 0.5rem 0 1.2rem;
  display: grid;
  place-items: center;
  position: relative;
}
/* Glüh-Aura hinter dem Produkt — der Trick aus der Slideshow, der
   Produktfotos teuer aussehen lässt */
.ware__bild::before {
  content: "";
  position: absolute;
  width: 120%; height: 120%;
  border-radius: 50%;
  /* Verlauf statt blur(): gleiche Wirkung, aber der Grafikchip muss
     nichts weichzeichnen — und weiche Stufen statt Streifen. */
  background: radial-gradient(closest-side,
    var(--ware-farbe, var(--f-neutral)) 0%,
    color-mix(in srgb, var(--ware-farbe, var(--f-neutral)) 55%, transparent) 30%,
    color-mix(in srgb, var(--ware-farbe, var(--f-neutral)) 18%, transparent) 60%,
    transparent 100%);
  opacity: 0.18;
}
.ware__bild img { max-height: 140px; width: auto; object-fit: contain; position: relative; }

.ware__gruppe {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ware-farbe, var(--leise));
}

.ware__name {
  font-family: var(--text);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0.55rem 0 0.2rem;
}
.ware__zusatz { font-size: 0.85rem; color: var(--leise); margin: 0; }

.ware__preise { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.ware__preis {
  display: inline-block;
  color: var(--schrift);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
/* Der alte Preis: durchgestrichen und leise. Er soll den neuen Preis
   groesser wirken lassen, nicht selbst um Aufmerksamkeit buhlen. */
.ware__statt {
  /* Ziffern etwas heller, Strich duenner und leiser als die Ziffern —
     sonst frisst die Linie die Neunen und man liest den Preis nicht. */
  color: #B9C0BA;
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(185, 192, 186, 0.5);
  text-underline-offset: 0;
}

.ware__ab18 {
  margin-top: 0.8rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Der Hinweis, dass im Laden mehr steht als auf der Seite. */
.mehr-angebote {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 500;
  color: var(--leise);
}
.mehr-angebote em { font-style: normal; font-weight: 600; color: var(--neon); }

.gueltig { display: inline-block; margin-top: 1.6rem; font-size: 0.85rem; color: var(--leise); }

/* ============================================================================
   PREMIUM COFFEE TO GO — eigener Auftritt, kein Kärtchen
   ============================================================================ */
.kaffee {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: clamp(2rem, 6vw, 4.5rem);
  /* Fast schwarz. Das Foto liegt nur noch als leiser Schatten darunter,
     kein Farbverlauf, kein Orange, kein Schein. */
  background:
    linear-gradient(0deg, rgba(7,10,8,.955), rgba(7,10,8,.955)),
    var(--kaffee-bild, none) center/cover no-repeat,
    var(--flaeche);
}
.kaffee__innen { position: relative; display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .kaffee__innen { grid-template-columns: 1.15fr .85fr; } }

.kaffee__titel { font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 0.96; }
.kaffee__titel em { font-style: normal; color: var(--neon); }
.kaffee__satz em { font-style: normal; color: var(--neon); }
.kaffee__satz {
  margin: 1.3rem 0 0;
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  color: var(--schrift);
  max-width: 34ch;
  line-height: 1.5;
}

.kaffee__preisblock { display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.8rem; flex-wrap: wrap; }
.kaffee__preis {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  letter-spacing: -0.045em;
  color: var(--neon);
  line-height: 1;
}
.kaffee__jeder {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leise);
}

.kaffee__marken { display: flex; flex-direction: column; gap: 0.9rem; }
.kaffee__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--schrift);
}
/* Logos in ihrer eigenen Farbe bzw. weiß — nichts eingefärbt. */
.kaffee__marke img { max-height: 30px; width: auto; opacity: 1; }
.kaffee__marke svg { max-height: 26px; width: auto; }

/* ============================================================================
   PAKETSHOP — Logos groß und von weitem lesbar
   ============================================================================ */
.paket {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: clamp(1.8rem, 5vw, 3.5rem);
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(59,130,246,.12), transparent 60%),
    var(--flaeche);
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
@media (min-width: 860px) { .paket { grid-template-columns: 1fr auto; } }

.paket__marke {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.paket__abzeichen {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--f-paket);
  color: var(--f-paket);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.paket__logos { display: flex; gap: 1rem; flex-wrap: wrap; }
.paket__logo {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 1.5rem 2.2rem;
  display: grid;
  place-items: center;
  min-width: 160px;
  flex: 1 1 160px;
}
.paket__logo img { height: clamp(38px, 7vw, 54px); width: auto; }

/* ============================================================================
   GALERIE
   ============================================================================ */
.ausstellung { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); grid-template-columns: 1fr; margin-bottom: clamp(2.8rem, 6vw, 5rem); }
@media (min-width: 900px) { .ausstellung--mit-foto { grid-template-columns: 1.05fr 0.95fr; align-items: center; } }
.ausstellung__zeitraum { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--leise); }
.ausstellung__titel { font-size: clamp(2rem, 5.5vw, 3.6rem); margin: 0.8rem 0 0.5rem; }
.ausstellung__kuenstler { font-size: 1.15rem; color: var(--leise); margin: 0; }
.ausstellung__text { max-width: 46ch; margin-top: 1.3rem; color: var(--leise); }
.ausstellung__foto { border-radius: 3px; overflow: hidden; background: var(--flaeche); }

.werke { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); }
/* Auf dem Handy zwei Spalten statt einer. Sechs Rahmen untereinander
   waeren sonst ueber 2000 px Leerlauf — so liest es sich als Wand. */
@media (max-width: 620px) {
  .werke { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .werk__drop, .werk__stempel { font-size: 0.55rem; padding: 0.22rem 0.45rem; letter-spacing: 0.14em; }
  .werk__leer-kreuz { width: 24px; height: 24px; }
  .werk__leer-text  { font-size: 0.58rem; letter-spacing: 0.16em; }
}

.werk {
  display: flex;
  flex-direction: column;
  background: var(--flaeche2);
  border: 1px solid var(--linie);
  border-radius: 3px;
  overflow: hidden;
  transition: border-color .3s ease;
}
.werk:hover { border-color: var(--linie2); }
/* Die Drop-Nummer sitzt als kleines Schild auf dem Werk. Sie macht aus
   einem Bild an der Wand ein Stück aus einer Reihe — und Reihen will man
   weiterverfolgen. */
.werk__drop {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--linie2);
  border-radius: 999px;
  background: rgba(7, 10, 8, 0.72);
  backdrop-filter: blur(8px);
  color: var(--neon);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Verkauft bleibt sichtbar — das ist der beste Beweis, dass hier
   wirklich Werke weggehen. */
.werk__stempel {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(7, 10, 8, 0.72);
  backdrop-filter: blur(8px);
  color: var(--leise);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.werk--verkauft .werk__innen { opacity: 0.55; }

/* Wann der nächste Drop hängt. */
.drop-naechster {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--leise);
}
.drop-naechster em { font-style: normal; font-weight: 600; color: var(--neon); }

/* Der leere Rahmen: wie ein Bilderrahmen, der schon an der Wand hängt
   und auf sein Bild wartet. Gestrichelt, damit sofort klar ist: hier
   fehlt noch was — das ist Absicht, kein Fehler. */
.werk--leer {
  background: transparent;
  border-style: dashed;
  border-color: var(--linie);
}
.werk--leer:hover { border-color: var(--linie2); }

.werk__leer-innen {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.2rem, 3vw, 2rem);
}
.werk__leer-kreuz {
  width: 34px; height: 34px;
  opacity: 0.28;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  color: var(--schrift);
}
.werk__leer-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--leise);
}

.werk__rahmen { position: relative; background: var(--flaeche); overflow: hidden; will-change: transform; }
.werk__innen  { will-change: transform; }

/* Kunstwerke NIE beschneiden — Handyfotos sind mal hoch, mal quer */
.werk__bild {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--flaeche);
  padding: clamp(0.9rem, 2vw, 1.5rem);
}

.werk__etikett {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233,255,61,.045), transparent 62%),
    var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
/* Die Drop-Nummer im Museums-Etikett — dieselbe Rolle wie das Schild
   auf dem Foto, nur als Zeile statt als Aufkleber. */
.werk__etikett-drop {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.2rem;
}
.werk--verkauft .werk__etikett-drop { color: var(--leise); }

.werk__etikett-zeile { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--leise); }
.werk__etikett-titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--schrift);
  text-transform: none;
}
.werk__etikett-strich { width: 30px; height: 1px; background: var(--crimson); margin: 0.35rem 0; }

.werk__inhalt { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.werk--etikett .werk__inhalt { padding-top: 1rem; }
.werk--etikett .werk__fuss { padding-top: 0; }

.werk__titel { font-family: var(--text); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; line-height: 1.25; }
.werk__meta { font-size: 0.87rem; color: var(--leise); margin: 0; }
.werk__fuss { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.werk__preis { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.005em; color: var(--schrift); }
.werk__status { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leise); }
.werk--verkauft .werk__preis { color: var(--leise); text-decoration: line-through; }

/* Nebeneinander, sobald Platz ist — sonst untereinander. */
.wand-paar {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(3rem, 8vw, 6rem);
}
@media (min-width: 900px) { .wand-paar { grid-template-columns: 1fr 1fr; } }
.wand-paar .wand { margin-top: 0; height: 100%; }

.wand {
  position: relative;
  /* Nicht an den Rahmen darüber kleben — der Kasten ist ein eigener
     Gedanke und braucht Luft. */
  margin-top: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  border: 1px solid var(--linie2);
  border-radius: 3px;
  padding: clamp(2.4rem, 7vw, 5rem);
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(23,56,40,.22), rgba(23,56,40,.08) 40%, transparent 75%),
    var(--flaeche);
}
.wand__titel { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }
.wand__text { max-width: 46ch; margin: 1.1rem auto 2rem; color: var(--leise); }

/* ============================================================================
   MASKOTTCHEN
   ============================================================================ */
.maskottchen {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 860px) { .maskottchen { grid-template-columns: 0.85fr 1.15fr; } }

.maskottchen__bild { position: relative; display: grid; place-items: center; }
.maskottchen__bild::before {
  content: "";
  position: absolute;
  width: 130%; height: 130%;
  border-radius: 50%;
  /* Ein fein abgestufter Verlauf — die frühere Unschärfe war auf dem
     Handy teuer und hat sichtbare Ringe in den Hintergrund gemalt. */
  background: radial-gradient(closest-side,
    rgba(23, 56, 40, 0.62) 0%,
    rgba(23, 56, 40, 0.44) 22%,
    rgba(23, 56, 40, 0.26) 42%,
    rgba(23, 56, 40, 0.12) 62%,
    rgba(23, 56, 40, 0.04) 80%,
    rgba(23, 56, 40, 0)   100%);
}
.maskottchen__bild img {
  position: relative;
  max-height: clamp(240px, 44vw, 440px);
  width: auto;
  /* Weicher Bodenschatten statt hartem Kastenrand */
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.6));
}
@media (max-width: 899px) {
  .maskottchen__bild img { filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
}
.maskottchen__spruch {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.maskottchen__spruch em { font-style: normal; color: var(--crimson); }
.maskottchen__text { color: var(--leise); max-width: 42ch; margin-top: 1.2rem; }

/* ============================================================================
   SORTIMENT — eine Liste, keine Wolke aus Pillen
   ============================================================================ */
.sortiment { display: grid; gap: 0; max-width: 720px; }
.sortiment__punkt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 500;
}
.sortiment__punkt:first-child { border-top: 1px solid var(--linie); }
.sortiment__bald {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}

/* ============================================================================
   BESUCH
   ============================================================================ */
.besuch { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .besuch { grid-template-columns: 1fr 1fr; } }

.zeiten { width: 100%; border-collapse: collapse; }
.zeiten td { padding: 0.7rem 0; border-bottom: 1px solid var(--linie); font-size: 1rem; }
.zeiten td:last-child { text-align: right; font-weight: 600; }
.zeiten tr.heute td { color: var(--schrift); }
.zeiten tr.heute td:first-child::after { content: " heute"; color: var(--neon); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }

.kontaktliste { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

/* ============================================================================
   NACHBARSCHAFT
   ============================================================================ */
.nachbarn { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.nachbar {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.3rem 1.7rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: var(--flaeche);
  text-decoration: none;
  min-height: 48px;
  max-width: 340px;
  transition: border-color .25s ease;
}
.nachbar__grund { font-size: 0.9rem; color: var(--leise); line-height: 1.5; margin-top: 0.25rem; }
.nachbar:hover { border-color: var(--linie2); }
.nachbar--logo { align-items: center; }
.nachbar__logo { max-height: 34px; width: auto; object-fit: contain; }
.nachbar__name { font-family: var(--text); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; }
.nachbar__ort { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--leise); }

.werbung {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: clamp(1.8rem, 5vw, 3.2rem);
  background:
    radial-gradient(70% 130% at 90% 10%, rgba(23,56,40,.22), rgba(23,56,40,.08) 38%, transparent 72%),
    var(--flaeche);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
}
.werbung__titel { font-size: clamp(1.5rem, 4vw, 2.4rem); }
.werbung__titel em { font-style: normal; color: var(--neon); }
.werbung__text { color: var(--leise); max-width: 46ch; margin: 0.8rem 0 0; }
.werbung__preis { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -0.035em; color: var(--neon); }
.werbung__zusatz { font-size: 0.8rem; color: var(--leise); margin-top: 0.3rem; }

/* ============================================================================
   LEISTUNGEN
   ============================================================================ */
.leistungen__gitter { display: grid; gap: clamp(1rem, 3vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.leistung {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
}
.leistung__titel { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.leistung__preis { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--leise); }
.leistung__punkte { list-style: none; padding: 0; margin: 0.7rem 0 1.3rem; }
.leistung__punkte li { position: relative; padding-left: 1.4rem; margin-bottom: 0.45rem; color: var(--leise); font-size: 0.95rem; }
.leistung__punkte li::before { content: ""; position: absolute; left: 0; top: 0.63em; width: 8px; height: 1px; background: var(--neon); opacity: .55; }
.leistung .knopf { margin-top: auto; align-self: flex-start; }

.nachsatz {
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  font-family: var(--text);
  font-weight: 400;
  font-size: clamp(1.02rem, 2.4vw, 1.25rem);
  letter-spacing: 0;
  color: var(--leise);
}

/* ============================================================================
   LEISTE + WHATSAPP
   ============================================================================ */
.leiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--rand);
  background: rgba(7, 10, 8, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
  transform: translateY(-101%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.leiste.sichtbar { transform: translateY(0); }
/* Auf dem Handy: fast deckend statt Unschärfe — backdrop-filter muss
   dort bei JEDEM Scrollschritt den Hintergrund neu weichzeichnen. */
@media (max-width: 899px) {
  .leiste { backdrop-filter: none; background: rgba(7, 10, 8, 0.96); }
}
.leiste__marke { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em; text-decoration: none; }
.leiste__wege { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.leiste__weg { padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 500; color: var(--leise); text-decoration: none; border-radius: 999px; }
.leiste__weg:hover { color: var(--schrift); background: rgba(255,255,255,.05); }
@media (max-width: 560px) { .leiste__weg { padding: 0.45rem 0.55rem; font-size: 0.78rem; } }

.wa {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.wa.sichtbar { opacity: 1; transform: scale(1); pointer-events: auto; }
/* Ohne WhatsApp-Nummer traegt der Knopf das hidden-Attribut — das muss
   staerker sein als das display:grid oben, sonst bleibt er fuer
   Tastatur und Vorleser erreichbar. */
.wa[hidden] { display: none; }
.wa svg { width: 30px; height: 30px; fill: currentColor; }

/* ============================================================================
   FUSS
   ============================================================================ */
.fuss {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--linie);
  padding: clamp(2.5rem, 6vw, 4rem) var(--rand) calc(5.5rem + env(safe-area-inset-bottom, 0px));
  max-width: 1360px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.9rem;
  color: var(--leise);
}
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--schrift); text-decoration: underline; }
.fuss__wege { display: flex; gap: 1.3rem; flex-wrap: wrap; }

/* ============================================================================
   RECHTSSEITEN
   ============================================================================ */
.rechtsseite { max-width: 720px; margin-inline: auto; padding: clamp(3rem, 8vw, 6rem) var(--rand) 5rem; }
.rechtsseite h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 2rem; }
.rechtsseite h2 { font-size: 1.2rem; margin: 2.4rem 0 0.8rem; letter-spacing: -0.02em; }
.rechtsseite p  { color: var(--leise); margin: 0 0 0.9rem; }
.rechtsseite a  { color: var(--schrift); }

/* ============================================================================
   EINBLENDEN
   ============================================================================ */
.auf { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.auf.da { opacity: 1; transform: none; }

/* ============================================================================
   WENIGER BEWEGUNG
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .auf { opacity: 1; transform: none; }
  .korn, #teilchen { display: none; }
  .moment { height: auto; }
  .moment__buehne { position: static; height: auto; padding-block: var(--luft); }
  .moment__wort { display: none; }
  .moment__bild { position: relative; left: auto; top: auto; transform: none; opacity: 1; width: 100%; height: auto; aspect-ratio: 16/9; }
}

/* Der frühere Farb-Umschalter (Crimson/Grün) ist entfallen: die Seite hat
   nur noch EIN Akzentgrün. Der Haken in inhalte.js darf stehen bleiben,
   er ändert schlicht nichts mehr. */

/* ============================================================================
   LOTSE — das Maskottchen als Sprungmarken-Wähler

   Sitzt fest am rechten Rand, mittig, über dem WhatsApp-Knopf. Zusammen-
   geklappt ist er nur der Kleine im Kreis; angetippt fährt die Liste der
   Bereiche aus. Der Punkt am aktuellen Bereich leuchtet neongelb, damit
   man beim Scrollen sieht, wo man ist.
   ============================================================================ */
.lotse {
  --lotse-knopf: 62px;
  /* Muss den Ueberstand des mittigen Schilds auffangen:
     (Schildbreite 77px - Knopf 62px) / 2 = 8px Ueberhang je Seite. */
  --lotse-rand: 1.5rem;
  position: fixed;
  right: var(--lotse-rand);
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-direction: row-reverse;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
/* Erst zeigen, wenn der Kopfbereich durch ist — oben stört er nur. */
.lotse.sichtbar { opacity: 1; pointer-events: auto; }
.lotse[hidden]  { display: none; }

/* Der Knopf mit dem Kleinen drin */
.lotse__kopf {
  position: relative;
  flex: none;
  width: var(--lotse-knopf);
  height: var(--lotse-knopf);
  padding: 0;
  border: 1px solid var(--linie2);
  border-radius: 50%;
  background: rgba(7, 10, 8, 0.88);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: visible;
  box-shadow: 0 8px 30px -8px rgba(0,0,0,.7);
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.lotse__kopf:hover,
.lotse__kopf:focus-visible { border-color: var(--neon); transform: scale(1.06); }

/* Solange er noch nie benutzt wurde, läuft ein ruhiger Ring vom Kreis
   weg und er nickt leicht. Beim ersten Antippen hört das für immer auf
   (im Browser gemerkt) — ein Knopf, der ewig zappelt, nervt. */
.lotse.winkt .lotse__kopf {
  border-color: var(--neon);
  animation: lotseNicken 2.8s ease-in-out infinite;
}
.lotse.winkt .lotse__info { animation: lotseInfo 2.8s ease-in-out infinite; }
@keyframes lotseInfo {
  0%, 85%, 100% { transform: scale(1); }
  92%           { transform: scale(1.25); }
}
.lotse.winkt .lotse__kopf::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--neon);
  animation: lotseRing 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes lotseRing {
  0%        { opacity: .75; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(1.55); }
}
@keyframes lotseNicken {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.09) rotate(-4deg); }
  96%           { transform: scale(1.09) rotate(4deg); }
}

/* Der einmalige Zuruf. Schwebt absolut direkt links am Kreis — sonst
   würde ihn die (unsichtbar mitlaufende) Liste nach links wegschieben,
   und er stünde verloren mitten im Bild. */
.lotse__zuruf {
  position: absolute;
  right: calc(var(--lotse-knopf) + 0.6rem);
  top: 50%;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--linie2);
  border-radius: 999px;
  background: rgba(7, 10, 8, 0.94);
  color: var(--schrift);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 26px -10px rgba(0,0,0,.8);
  animation: lotseZuruf .5s .4s both cubic-bezier(.2,.8,.3,1);
  transition: opacity .5s ease, transform .5s ease;
}
.lotse__zuruf.weg {
  opacity: 0;
  transform: translateY(-50%) translateX(8px);
  pointer-events: none;
}
/* Sobald die Liste offen ist, hat sich der Zuruf erledigt. */
.lotse.offen .lotse__zuruf { display: none; }
@keyframes lotseZuruf {
  from { opacity: 0; transform: translateY(-50%) translateX(14px); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* Das Info-Zeichen sitzt oben auf dem Kreis, halb darüber — so liest
   man auf einen Blick: hier gibt es Auskunft. Neongelb, weil es der
   einzige Knopf auf der Seite ist, der etwas erklärt. */
.lotse__info {
  position: absolute;
  top: -9px;
  right: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--neon);
  color: var(--auf-akzent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.8);
}

/* Die Beschriftung unter dem Kreis. Ohne sie ist der Kleine nur Deko —
   damit ist sofort klar, dass man ihn antippen kann. */
/* Mittig unter dem Kreis. Es ist breiter als der Kreis und ragt
   deshalb beidseitig über — der Abstand des Lotsen zum Bildschirmrand
   (--lotse-rand) ist darauf abgestimmt. */
.lotse__schild {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(7, 10, 8, 0.9);
  color: var(--leise);
  font-family: var(--text);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.lotse__kopf:hover .lotse__schild,
.lotse__kopf:focus-visible .lotse__schild { color: var(--schrift); }

/* Der Kopf-Ausschnitt ist quadratisch und randlos zugeschnitten —
   deshalb reicht hier schlicht „ausfüllen". */
.lotse__bild {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Die ausfahrende Liste */
.lotse__liste {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: rgba(7, 10, 8, 0.94);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.8);
  /* Zugeklappt: unsichtbar und nicht erreichbar, aber ohne Layout-Sprung */
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px) scale(0.96);
  transform-origin: right center;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1), visibility .25s;
}
.lotse.offen .lotse__liste { opacity: 1; visibility: visible; transform: none; }

.lotse__liste a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--leise);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.lotse__liste a:hover,
.lotse__liste a:focus-visible { color: var(--schrift); background: rgba(255,255,255,.05); }

.lotse__punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linie2);
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* Der Bereich, in dem man gerade steht */
.lotse__liste a.hier { color: var(--schrift); }
.lotse__liste a.hier .lotse__punkt {
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
}

/* Handy: etwas kleiner und höher, damit der WhatsApp-Knopf frei bleibt */
@media (max-width: 620px) {
    /* Höher als der WhatsApp-Knopf plus Platz für das Schild darunter,
     sonst überlappen sich die beiden am unteren Rand. */
  .lotse { --lotse-knopf: 54px; --lotse-rand: 1.5rem; top: auto; bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); transform: none; }
  .lotse__liste { padding: 0.4rem; }
  .lotse__liste a { font-size: 0.8rem; padding: 0.45rem 0.8rem 0.45rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lotse, .lotse__liste, .lotse__kopf, .lotse__punkt, .lotse__zuruf { transition: none; }
  .lotse.winkt .lotse__kopf,
  .lotse.winkt .lotse__info { animation: none; }
  .lotse.winkt .lotse__kopf::after { display: none; }
  .lotse__zuruf { animation: none; }
}

/* ============================================================================
   LUPE — die Großansicht eines Werks

   Kunst will groß gesehen werden. Ein Klick auf ein Werk legt es
   bildschirmfüllend über die Seite, mit Pfeilen zum Weiterblättern.
   Bewusst schlicht: schwarzer Grund, nichts lenkt vom Bild ab.
   ============================================================================ */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 2vw, 1.5rem);
  padding: clamp(0.8rem, 3vw, 2.5rem);
  background: rgba(3, 5, 4, 0.96);
  opacity: 0;
  transition: opacity .28s ease;
}
.lupe[hidden] { display: none; }
.lupe.offen { opacity: 1; }
/* Solange ein Werk groß zu sehen ist, hat der Infopoint Pause —
   er würde sonst durch den dunklen Grund schimmern. */
body.lupe-offen .lotse { opacity: 0; pointer-events: none; }

.lupe__rahmen {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  max-height: 100%;
}
.lupe__bild {
  max-width: 100%;
  /* Platz für die Bildunterschrift lassen */
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  transition: opacity .18s ease;
}
.lupe.laedt .lupe__bild { opacity: 0.25; }

.lupe__text {
  max-width: 60ch;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--leise);
}
.lupe__text b { color: var(--schrift); font-weight: 600; }
.lupe__text .lupe__preis { color: var(--neon); font-weight: 600; }

/* Schließen und Blättern */
.lupe__zu,
.lupe__pfeil {
  flex: none;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: rgba(7, 10, 8, 0.85);
  color: var(--schrift);
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: border-color .2s ease, background-color .2s ease;
}
.lupe__zu:hover, .lupe__pfeil:hover,
.lupe__zu:focus-visible, .lupe__pfeil:focus-visible {
  border-color: var(--neon);
  background: rgba(7, 10, 8, 1);
}
.lupe__zu {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 44px; height: 44px;
  font-size: 1.6rem;
  padding-bottom: 3px;
}
.lupe__pfeil { width: 46px; height: 46px; font-size: 1.7rem; padding-bottom: 4px; }
.lupe__pfeil[disabled] { opacity: 0.25; cursor: default; }

/* Auf dem Handy sitzen die Pfeile unten, sonst bleibt fürs Bild nichts */
@media (max-width: 620px) {
  .lupe { flex-wrap: wrap; align-content: center; }
  .lupe__rahmen { order: 1; width: 100%; }
  .lupe__pfeil--zurueck { order: 2; }
  .lupe__pfeil--weiter  { order: 3; }
  .lupe__bild { max-height: calc(100vh - 13rem); }
}

/* Anklickbare Werke sollen auch anklickbar AUSSEHEN */
.werk--klickbar .werk__rahmen { cursor: zoom-in; }
.werk__lupe {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(7, 10, 8, 0.78);
  border: 1px solid var(--linie2);
  color: var(--neon);
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.werk--klickbar:hover .werk__lupe,
.werk--klickbar:focus-within .werk__lupe { opacity: 1; transform: none; }
/* Auf dem Handy gibt es kein Drüberfahren — dort immer zeigen */
@media (hover: none) {
  .werk--klickbar .werk__lupe { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lupe, .lupe__bild, .werk__lupe, .lupe__zu, .lupe__pfeil { transition: none; }
}

/* ============================================================================
   WANDKARTE — steht da, wo sonst die Werke haengen

   Die Bilder haengen im Laden, nicht im Netz. Statt leerer Rahmen soll
   die Seite das freundlich sagen und die Leute herholen.
   ============================================================================ */
.wandkarte {
  grid-column: 1 / -1;
  max-width: 54ch;
  margin: 0 0 2.2rem;
  padding: 1.8rem 1.9rem 1.9rem;
  border: 1px solid var(--linie);
  border-left: 2px solid var(--neon);
  border-radius: 4px;
  background: var(--flaeche);
}
.wandkarte__titel {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}
.wandkarte__text {
  color: var(--leise);
  margin: 0;
  line-height: 1.65;
}
.wandkarte__knopf {
  display: inline-block;
  margin-top: 1.3rem;
  padding: 0.62rem 1.25rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--schrift);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.wandkarte__knopf:hover,
.wandkarte__knopf:focus-visible { border-color: var(--neon); color: var(--neon); }

/* Nur noch ein Aufruf statt zweier nebeneinander — dann soll er nicht
   als halbe Spalte am Rand kleben, sondern mittig stehen. */
.wand-paar--einzeln { grid-template-columns: minmax(0, 46rem); justify-content: center; }


/* Ohne Ladenfoto hat der Aufklapp-Moment nichts zu zeigen. Ohne diese
   Regel blieben 130vh leerer Raum stehen, durch den man scrollen muesste.
   Sobald wieder ein Foto in LADEN.ladenfoto steht, faellt die Klasse weg
   und der Moment ist automatisch zurueck. */
.moment:has(.moment__bild.ohne-bild) { display: none; }


/* Auf dem Handy war der Rahmen hochkant (351 breit, 490 hoch), das Ladenfoto
   aber quer. object-fit: cover hat dann links und rechts abgeschnitten und nur
   einen schmalen Streifen aus der Mitte gezeigt. Jetzt richtet sich der Rahmen
   nach dem Bild: gleiches Seitenverhaeltnis, also ist das ganze Foto zu sehen.
   Auf grossen Bildschirmen bleibt alles wie vorher. */
@media (max-width: 899px) {
  .moment__bild {
    height: auto;
    aspect-ratio: 1086 / 594;
    max-height: 58vh;
  }
}


/* FINGERTIPPS DURCHLASSEN (25.09.2026)

   Der Infopoint ist ein nav, das so gross ist wie seine zugeklappte Liste.
   Die Liste ist zwar unsichtbar, nimmt aber Platz ein — und dieser Platz hat
   Tipps abgefangen, die eigentlich den Karten darunter galten. Auf dem Handy
   liess sich dadurch die mittlere Empfehlungs-Karte kaum anklicken.

   Loesung: Die Flaeche selbst ist fuer Finger durchlaessig, nur die wirklich
   bedienbaren Teile fangen Tipps ab. */
.lotse,
.lotse.sichtbar { pointer-events: none; }
.lotse__kopf,
.lotse__liste,
.lotse__zuruf { pointer-events: auto; }
/* Zugeklappt darf auch die Liste nichts abfangen. */
.lotse:not(.offen) .lotse__liste { pointer-events: none; }


/* Die Wortmarke oben links war auf dem Handy zu klein — dort hat die Leiste
   ohnehin weniger Text, also darf das Logo kraeftiger stehen. */
@media (max-width: 620px) {
  .leiste__marke { font-size: 1.25rem; }
  .wm--leiste { height: 1.05em; }
}

/* ============================================================================
   FOLGE UNS — Instagram-Aufruf im Besuch-Bereich

   Steht in der linken Spalte bei den Kontaktwegen, damit man dafuer nicht
   bis zum Fuss scrollen muss. Der Knopf traegt die echten Instagram-Farben:
   der Verlauf laeuft von Gelb unten links ueber Pink nach Violett oben rechts.
   ============================================================================ */
.folgeuns {
  margin: 1.6rem 0 0;
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche);
  max-width: 40ch;
}
.folgeuns[hidden] { display: none; }
.folgeuns__titel {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem;
}
.folgeuns__text { color: var(--leise); margin: 0; line-height: 1.55; font-size: 0.9rem; }
.folgeuns__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  /* Originalfarben von Instagram */
  background: radial-gradient(circle at 28% 108%,
              #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  transition: filter .2s ease, transform .2s ease;
}
.folgeuns__knopf svg { flex: none; }
.folgeuns__knopf:hover,
.folgeuns__knopf:focus-visible { filter: brightness(1.12); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .folgeuns__knopf { transition: none; } }

/* Zwischenstand-Hinweis im Kontaktbereich, solange NEED'S keine eigene
   Telefon- und WhatsApp-Nummer hat. */
.kontakt-bald {
  margin: 1.1rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--linie);
  color: var(--leise);
  font-size: 0.88rem;
  line-height: 1.55;
  max-width: 40ch;
}
.kontakt-bald[hidden] { display: none; }

/* Der Infopoint laesst sich mit dem Finger an eine andere Stelle ziehen.
   Waehrend des Ziehens: kein Textmarkieren, keine Browser-Geste, kein
   weiches Nachlaufen — er soll direkt am Finger kleben. */
.lotse__kopf { touch-action: none; }
.lotse { transition: left .22s ease, top .22s ease, opacity .3s ease; }
.lotse.zieht { transition: none; cursor: grabbing; user-select: none; }
.lotse.zieht .lotse__schild,
.lotse.zieht .lotse__zuruf { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lotse { transition: opacity .3s ease; } }