/*!
 * Sofastil Berlin – Universelle Bildansicht („Großansicht wie Kleinanzeigen“)
 * Datei:   public/sofastil-viewer.css            Version 1.0.0 · 25.10.2026
 * Gehört zu: public/sofastil-viewer.js  – auf ALLEN Seiten laden (auch Shop).
 * Bitte NICHT verändern.
 */

/* ---------- Grundfläche: ursprüngliches Kalkweiß, randlos, bildschirmfüllend ---------- */
dialog.ssv {
  --ssv-top: calc(56px + env(safe-area-inset-top, 0px));
  --ssv-bottom-h: 0px;
  --ssv-bg: 1;
  --ssv-ui: 1;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgb(246 246 242 / var(--ssv-bg));
  color: var(--tinte, #1D1F1C);
  font-family: var(--schrift-text, "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: contain;
}
dialog.ssv[open] { display: block; }
dialog.ssv::backdrop { background: var(--grund, #F6F6F2); }
dialog.ssv *, dialog.ssv *::before, dialog.ssv *::after { box-sizing: border-box; }
dialog.ssv.ssv--motion.is-opening { animation: ssv-fade-in 180ms ease-out both; }
@keyframes ssv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Bildfläche (immer zwischen oberer und unterer Leiste → Foto vollständig sichtbar) ---------- */
.ssv__stage {
  position: absolute;
  inset: var(--ssv-top) 0 var(--ssv-bottom-h) 0;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ssv--noinfo .ssv__stage { bottom: var(--ssv-top); }
.ssv__slide {
  position: absolute;
  inset: 0;
  will-change: transform;
  backface-visibility: hidden;
}
.ssv__zoom {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.ssv__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;          /* egal welches Format: immer ganz und so groß wie möglich */
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.ssv__img:not([src]) { visibility: hidden; }
.ssv__slide.is-loading:not(.has-preview)::after,
.ssv__slide.is-error::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
}
.ssv__slide.is-loading:not(.has-preview)::after {
  border: 2px solid rgb(29 31 28 / .22);
  border-top-color: var(--tinte, #1D1F1C);
  animation: ssv-spin .8s linear infinite;
}
.ssv__slide.is-error::after { border: 2px solid rgb(29 31 28 / .35); }
@keyframes ssv-spin { to { transform: rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
  .ssv__stage { cursor: zoom-in; }
  .ssv.is-zoomed .ssv__stage { cursor: grab; }
  .ssv.is-dragging .ssv__stage { cursor: grabbing; }
}

/* ---------- Obere Leiste: Schließen und Zähler · Teilen, Merken, Gefällt mir ---------- */
.ssv__top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: var(--ssv-top);
  padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  opacity: var(--ssv-ui);
}
.ssv__count {
  margin: 0;
  color: var(--tinte, #1D1F1C);
  font-size: 16px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.ssv__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ssv__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie, #D3D2C8);
  border-radius: 50%;
  background: var(--grund, #F6F6F2);
  color: var(--tinte, #1D1F1C);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ssv__btn svg { width: 22px; height: 22px; display: block; }
.ssv__btn:hover { background: rgb(29 31 28 / .08); }
.ssv__btn:disabled { opacity: .55; cursor: default; }
.ssv__fav[aria-pressed="true"] svg { fill: var(--messing, #B38A4F); stroke: var(--tinte, #1D1F1C); }
.ssv__like[aria-pressed="true"] svg { fill: #C93838; stroke: #A52B2B; }
.ssv__fav[aria-busy="true"], .ssv__like[aria-busy="true"] { opacity: .6; }
.ssv__close { flex-shrink: 0; }
.ssv__close svg { width: 22px; height: 22px; }

/* ---------- Pfeile links/rechts (nur am Computer mit Maus sichtbar) ---------- */
.ssv__nav {
  position: absolute;
  top: calc(var(--ssv-top) + (100% - var(--ssv-top) - var(--ssv-bottom-h)) / 2);
  z-index: 2;
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0;
  padding: 0;
  border: 1px solid var(--linie, #D3D2C8);
  border-radius: 50%;
  background: rgb(246 246 242 / .9);
  color: var(--tinte, #1D1F1C);
  cursor: pointer;
  opacity: var(--ssv-ui);
  transition: background-color .15s ease, opacity .15s ease;
}
.ssv__nav svg { width: 26px; height: 26px; display: block; }
.ssv__nav:hover { background: var(--kalk, #E9E8E1); }
.ssv__nav:disabled { opacity: .25; cursor: default; }
.ssv__nav--prev { inset-inline-start: 18px; }
.ssv__nav--next { inset-inline-end: 18px; }
dialog.ssv[dir="rtl"] .ssv__nav svg,
dialog.ssv[dir="rtl"] .ssv__more svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .ssv__nav { display: grid; } }
.ssv--single .ssv__nav { display: none !important; }

/* ---------- Untere Leiste: Name · Preis · Ansehen ---------- */
.ssv__bottom {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--linie, #D3D2C8);
  background: var(--grund, #F6F6F2);
  opacity: var(--ssv-ui);
}
.ssv--noinfo .ssv__bottom { display: none; }
.ssv__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}
.ssv__title {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--tinte, #1D1F1C);
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ssv__price {
  margin: 0;
  color: var(--grau, #5B5F58);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}
.ssv__more,
.ssv__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--linie, #D3D2C8);
  border-radius: 999px;
  background: transparent;
  color: var(--tinte, #1D1F1C);
  font: inherit;
  font-size: 15px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ssv__more svg { width: 18px; height: 18px; margin-inline-end: -4px; }
.ssv__more:hover, .ssv__action:hover { background: rgb(29 31 28 / .08); text-decoration: none; }
.ssv__action { background: var(--gruen, #1F3B30); color: var(--weiss, #FFFFFF); border-color: var(--gruen, #1F3B30); }
.ssv__action:hover { background: var(--gruen-hell, #2C5243); }
.ssv__btn:focus-visible,
.ssv__nav:focus-visible,
.ssv__more:focus-visible,
.ssv__action:focus-visible { outline: 2px solid var(--gruen, #1F3B30); outline-offset: 2px; }
dialog.ssv [hidden] { display: none !important; }

/* ---------- Hinweis „Wischen oder doppelt tippen zum Vergrößern“ ---------- */
.ssv__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--ssv-bottom-h) + 22px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: rgb(233 232 225 / .96);
  color: var(--tinte, #1D1F1C);
  font-size: 15px;
  line-height: 1.25;
  text-align: start;
  box-shadow: 0 8px 30px rgb(29 31 28 / .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.ssv__hint.is-visible { opacity: 1; transform: translateY(0); }
.ssv__hint-icon { flex: 0 0 auto; display: grid; place-items: center; color: var(--grau, #5B5F58); }
.ssv__hint-icon svg { width: 28px; height: 28px; display: block; }
.ssv__hint.is-visible.is-touch.is-many .ssv__hint-icon { animation: ssv-swipe 1.5s ease-in-out infinite; }
.ssv__hint.is-visible:not(.is-many) .ssv__hint-icon,
.ssv__hint.is-visible:not(.is-touch) .ssv__hint-icon { animation: ssv-tap 1.2s ease-in-out infinite; }
@keyframes ssv-swipe { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@keyframes ssv-tap { 0%, 100% { transform: scale(1); } 45% { transform: scale(.86); } }

/* ---------- Meldung (z. B. „Link kopiert“) ---------- */
.ssv__toast {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ssv-top) + 10px);
  z-index: 4;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--kalk, #E9E8E1);
  color: var(--tinte, #1D1F1C);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ssv__toast.is-visible { opacity: 1; }

/* ---------- Hinweis auf den Kacheln „Antippen zum Vergrößern“ ---------- */
.ss-tap-hint {
  position: fixed;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: rgb(233 232 225 / .96);
  color: var(--tinte, #1D1F1C);
  font: 500 14px/1.2 var(--schrift-text, "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif);
  white-space: nowrap;
  box-shadow: 0 6px 24px rgb(29 31 28 / .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ss-tap-hint-in .25s ease-out both;
  transition: opacity .25s ease;
}
.ss-tap-hint.is-out { opacity: 0; }
.ss-tap-hint__icon { display: grid; place-items: center; color: var(--grau, #5B5F58); }
.ss-tap-hint__icon svg { width: 24px; height: 24px; display: block; animation: ssv-tap 1.2s ease-in-out infinite; }
@keyframes ss-tap-hint-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Weniger Bewegung gewünscht: alles statisch ---------- */
@media (prefers-reduced-motion: reduce) {
  dialog.ssv, dialog.ssv *, .ss-tap-hint, .ss-tap-hint * { animation: none !important; }
  .ssv__hint, .ssv__toast, .ss-tap-hint { transition: none !important; }
}

[data-seo-heading]{display:block}
.kitchen-planner-heading{padding-bottom:0}