/* Soluna overrides — feedback pass (preview comments, phase-3-brand).
   Scoped additions on top of the 1:1 Webflow mirror; no token re-palette. */

/* Smooth café<->soluna navigation: cross-document view transitions so the
   switch cross-fades instead of a hard reload (Principal: "ruckartig/abrupt").
   Shared nav/logo/toggle morph; unsupported browsers just navigate normally. */
@view-transition { navigation: auto; }

/* ---- Glacial Indifference — café body typeface (comment: font change) --- */
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Apply as café body/text face; headings keep their own decorative faces. */
.page-cafe,
.page-cafe p,
.page-cafe li,
.page-cafe a,
.page-cafe .text-size-regular,
.page-cafe .text-size-medium,
.page-cafe .text-size-large,
.page-cafe .button,
.page-cafe .navbar1_link {
  font-family: "Glacial Indifference", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- About-us auto crossfade slider (comment: add elegant image slider) - */
.sol-about-slider {
  position: relative;
  overflow: hidden;
}
.sol-about-slider .sol-slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.sol-about-slider .sol-slide.is-active {
  opacity: 1;
}
.sol-about-slider .sol-slide:not(:first-of-type) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Sticky navbar — scrolls with page (comment: header immer mitscrollen) */
.navbar1_component {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Navbar "Plan Your Event" button: no dark hover — stay beige w/ brown text. */
.navbar1_component .button.is-secondary.is-alternate:hover {
  background: var(--_primitives---coconut-cream, #f8f1de);
  color: #3c1f0d;
  border-color: var(--_primitives---coconut-cream, #f8f1de);
}

/* Navbar logo: pin BOTH café + Soluna to one desktop height so the two
   navbars are equal-height (Principal: "navbar von beiden Seiten gleich hoch").
   100px == café's current square-logo height, so café is unchanged; the Soluna
   portrait logomark is sized to match. Mobile keeps the 2rem rule below. */
@media screen and (min-width: 768px) {
  .navbar1_logo { height: 100px; width: auto; }
  /* Pin the toggle to the same x on BOTH pages during the café<->soluna
     switch (Principal: "toggle soll rechts neben dem logo ... an der selben
     stelle bleiben"). The container is flex+space-between, so the toggle x
     otherwise drifts with each page's logo width. Give the logo-link a fixed
     100px slot (café's square-logo width; Soluna's portrait mark sits left in
     it) and let the toggle keep left with margin-right:auto — so the toggle
     always begins right after that 100px slot, identical on both pages. */
  .navbar1_logo-link { flex: 0 0 auto; width: 100px; display: flex; align-items: center; }
  .navbar1_container .loc-toggle { margin-right: auto; margin-left: 1rem; }
}

/* ---- Location toggle (Café <-> Bar) in the top bar --------------------- */
.loc-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--_primitives---coconut-cream, #f3ead7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.loc-toggle_opt {
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  color: var(--_primitives---colors--neutral-darkest, #201a13);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.loc-toggle_opt.is-active {
  background: #fff;
  color: var(--_primitives---colors--neutral-darkest, #201a13);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  font-weight: 600;
}

.loc-toggle_opt:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .loc-toggle_opt { transition: none; }
}

/* ---- Mobile: slimmer navbar, smaller logo (comment: navbar too thick) --- */
@media screen and (max-width: 767px) {
  .navbar1_component {
    min-height: 3.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  /* 2rem read as "sehr klein" on phones (Principal 30.09) -> 3.25rem. */
  .navbar1_logo {
    height: 3.25rem;
    width: auto;
  }
  .loc-toggle { padding: 0.2rem; }
  .loc-toggle_opt {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ---- Mobile: event cards smaller + clearer swipe (comment: too big) ----- */
@media screen and (max-width: 767px) {
  .event16_mask { width: 82%; }
  .event16_slide { padding-right: 1rem; }
  .event16_image { aspect-ratio: 4 / 3; }
  .event16_slider { padding-bottom: 4.5rem; }
}

@media screen and (max-width: 479px) {
  .event16_mask { width: 80%; }
}

/* ---- Mobile: enlarge the About-us slider (comment: way too small) ------- */
@media screen and (max-width: 767px) {
  .section_layout3 .slider.w-slider {
    height: 66vw;
    min-height: 260px;
    max-height: 420px;
  }
}

/* ======================================================================== */
/*  Feedback batch 2 — Vercel review comments (phase-3-brand)               */
/* ======================================================================== */

/* ---- Café typography: headers Agnostic, everything else Glacial --------- */
/* Café heading classes point at the BODY font var, so re-map that var to    */
/* Glacial (covers body text, sublines, card titles) and force the two main  */
/* header levels back to the decorative Agnostic face.                       */
.page-cafe {
  --_typography---font-styles--body: "Glacial Indifference", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page-cafe h1.heading-style-h1,
.page-cafe h2[class*="heading-style"] {
  font-family: "Agnosticfontdecorative", Arial, sans-serif;
}

/* ---- Decorative section blobs (comment: gatherings + atmosphere bg) ------ */
.section_event16,
.section_layout423 {
  position: relative;
  overflow: hidden;
}
/* Let the yellow blob bleed UP across the section seam (Principal: it must not
   be "verschluckt"). event16 has no edge-clipped blobs of its own, so opening
   its overflow only frees the centered yellow blob to cross the boundary. */
.section_event16 { overflow: visible; }
.section_event16 .container-large,
.section_layout423 .container-large {
  position: relative;
  z-index: 1;
}
.sol-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Yellow blob: centered on the event16 top edge and lifted up so it straddles
   the seam — its top reaches behind the "A Taste of Indian" card (in the
   section above), its lower part sits in event16's top padding, above the
   "Beyond the counter" tagline. Tune translateY/width for exact reach. */
.sol-blob-yellow { top: 0; left: 50%; transform: translate(-50%, -38%); width: min(42vw, 560px); }
.sol-blob-purple { top: 6%;   left: -9%;   width: min(34vw, 470px); }
.sol-blob-green  { bottom: 2%; right: -8%; width: min(42vw, 560px); }
@media screen and (max-width: 767px) {
  .sol-blob-yellow { width: 64vw; top: 0; left: 50%; transform: translate(-50%, -34%); }
  .sol-blob-purple { width: 50vw; left: -16%; }
  .sol-blob-green  { width: 56vw; right: -16%; }
}

/* ---- Location toggle: vertical stack + sun/moon, tucked by the logo ------ */
.loc-toggle {
  flex-direction: column;
  gap: 0.15rem;
  border-radius: 14px;
  margin-left: 0.6rem;
}
.loc-toggle_opt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-start;
}
.loc-toggle_ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ---- Auto crossfade slideshow (café about + soluna about) --------------- */
.sol-slider {
  position: relative;
  overflow: hidden;
}
.sol-slider .sol-slide {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.sol-slider .sol-slide.is-active { opacity: 1; }
.sol-slider .sol-slide:not(:first-child) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Manual prev/next arrows on the About sliders (comment: swipe arrows) - */
.sol-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(60, 31, 13, 0.55);
  color: #f8f1de;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.sol-arrow:hover { background: rgba(60, 31, 13, 0.85); }
.sol-arrow-prev { left: 0.75rem; }
.sol-arrow-next { right: 0.75rem; }
@media screen and (max-width: 767px) {
  .sol-arrow { width: 2.25rem; height: 2.25rem; font-size: 1.3rem; }
}

/* ---- Café hero video background ----------------------------------------- */
.cafe-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Event template card: single clickable image (comment) -------------- */
.sol-event-template {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: zoom-in;
}

/* ---- Lightbox (menus native + event template enlarge) ------------------- */
.sol-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
  background: rgba(20, 16, 12, 0.86);
}
.sol-lightbox.is-open { display: flex; }
.sol-lightbox_inner {
  position: relative;
  width: min(1000px, 94vw);
  height: min(88vh, 1400px);
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.sol-lightbox_inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.sol-lightbox_body {
  width: 100%;
  height: 100%;
}
.sol-lightbox_inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Menus render as a scrollable stack of page images (reliable across browsers). */
.sol-lightbox.is-pdf .sol-lightbox_inner {
  width: min(820px, 96vw);
  height: min(92vh, 1600px);
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sol-lightbox.is-pdf .sol-lightbox_body { height: auto; }
.sol-menu-doc img {
  display: block;
  width: 100%;
  height: auto;
}
.sol-lightbox_close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: #3c1f0d;
  color: #f8f1de;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Gift-card modal (café, orange tone) -------------------------------- */
.gift-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(20, 16, 12, 0.7);
  font-family: "Glacial Indifference", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.gift-modal.is-open { display: flex; }
.gift-modal_card {
  position: relative;
  width: min(400px, 92vw);
  background: #ff8258;
  color: #3c1f0d;
  border-radius: 1rem;
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
.gift-modal_card h3 {
  font-family: "Agnosticfontdecorative", Arial, sans-serif;
  margin: 0 0 0.75rem;
  font-size: 2rem;
  color: #3c1f0d;
}
.gift-modal_card p {
  font-family: "Glacial Indifference", system-ui, sans-serif;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.gift-modal_actions {
  display: flex;
  justify-content: center;
}
.gift-modal_actions .button {
  display: inline-block;
  width: auto;
  background: #f8f1de;
  color: #3c1f0d;
  border-color: #f8f1de;
}
.gift-modal_actions .button:hover { background: #fff; color: #3c1f0d; }
.gift-modal_close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(60, 31, 13, 0.15);
  color: #3c1f0d;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- Resmio inline booking: elegant collapsible under Book A Table ------- */
.sol-resmio {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sol-resmio.is-open { max-height: 900px; }

/* ---- Café FAQ: single-open + smooth (comment: schließt vorherige, smoother) */
.faq2_answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq2_question { cursor: pointer; }
.faq2_icon-wrapper {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq2_accordion.is-open .faq2_icon-wrapper { transform: rotate(45deg); }

/* ---- Soluna event template: single clickable card centered --------------- */
.sol-event-single {
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Soluna past-events swipe strip (comment: shrink + 5 swipeable) ------- */
.sol-event-strip {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
/* Event images: enlarged again by 150% (Principal: "vergrößer es erneut um 150%")
   — from the 18% state ×2.5 to 45%, landing back near the original ~46% desktop /
   62% tablet / 80% mobile. Tunable. */
.sol-event-strip .sol-event-template {
  flex: 0 0 auto;
  width: 45%;
  scroll-snap-align: center;
}
@media screen and (max-width: 991px) {
  .sol-event-strip .sol-event-template { width: 60%; }
}
@media screen and (max-width: 767px) {
  .sol-event-strip .sol-event-template { width: 80%; }
}

/* Contact (layout237) grid paragraphs — address / opening times / contact info —
   ship as bare <p> at the 1.05rem default, noticeably smaller than the page's
   .text-size-medium body copy (Principal: café address font much smaller than
   the rest). Match them to 1.25rem so the address reads at the page's body size. */
.layout237_item p,
.layout237_item p a {
  font-size: 1.25rem;
  line-height: 1.6;
}

/* ---- Café contact: Instagram glyph + handle inline (comment C5) ---------- */
.sol-ig-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.sol-ig-glyph {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

/* ---- Hero: logo-with-claim centered, buttons aligned below (Principal) --- */
.sol-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sol-hero-claim {
  margin: 0;
  padding: 0;
}
.sol-hero-logo-claim {
  display: block;
  width: min(560px, 84vw);
  height: auto;
  margin: 0 auto;
}
.sol-hero-stack .button-group.is-center.v1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  .sol-hero-logo-claim { width: min(440px, 88vw); }
  .sol-hero-stack .button-group.is-center.v1 { margin-top: 1.5rem; }
}

/* ---- Café hero: logo lockup instead of written-out name (Principal) ------ */
.cafe-hero-claim {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.cafe-hero-logo {
  display: block;
  width: min(620px, 88vw);
  height: auto;
  margin: 0 auto;
}
.cafe-hero-tagline {
  margin: 0;
  margin-top: -0.35rem;
}
@media screen and (max-width: 767px) {
  .cafe-hero-logo { width: min(480px, 90vw); }
}

/* ---- Hero h1: tagline promoted <p>→<h1> for document semantics (SEO/a11y). */
/* Principal removed the separate decorative headline; the tagline IS the h1.  */
/* Neutralise h1 UA/Webflow defaults so it renders identically to before.      */
h1.sol-hero-tagline {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ---- Café Projects: side-by-side slidable cards w/ arrows (Principal) ---- */
.cafe-proj-scroller { position: relative; }
.cafe-proj-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 1rem;
  scrollbar-width: none;
}
.cafe-proj-track::-webkit-scrollbar { display: none; }
.cafe-proj-card {
  flex: 0 0 auto;
  width: clamp(260px, 31%, 350px);
  scroll-snap-align: start;
}
.cafe-proj-card .event16_item { height: 100%; }
.cafe-proj-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(60, 31, 13, 0.55);
  color: #f8f1de;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.cafe-proj-arrow:hover { background: rgba(60, 31, 13, 0.85); }
.cafe-proj-arrow svg { width: 1.1rem; height: 1.1rem; }
.cafe-proj-arrow.prev { left: -0.6rem; }
.cafe-proj-arrow.next { right: -0.6rem; }
@media screen and (max-width: 991px) {
  .cafe-proj-card { width: clamp(240px, 47%, 320px); }
}
@media screen and (max-width: 767px) {
  .cafe-proj-card { width: 82%; }
  .cafe-proj-arrow { top: 34%; width: 2.4rem; height: 2.4rem; }
  .cafe-proj-arrow.prev { left: 0.1rem; }
  .cafe-proj-arrow.next { right: 0.1rem; }
}

/* ---- Soluna hero: emblem logo + normal-font taglines below (Principal) --- */
.sol-hero-logo-emblem {
  display: block;
  width: min(580px, 86vw);
  /* The source SVG (368x283 viewBox) carries a tall band of empty space below
     the wordmark, which pushed the taglines way down. Crop it by forcing a
     shorter aspect box and cover-fitting from the top — keeps sun + wordmark,
     drops the dead space so the taglines sit right beneath. Tune the 205 up if
     the wordmark ever clips. */
  aspect-ratio: 368 / 205;
  height: auto;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto;
}
.sol-hero-tagline-1 {
  margin: 0.1rem 0 0.15rem;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.sol-hero-tagline-2 {
  margin: 0 0 0.25rem;
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  letter-spacing: 0.06em;
  line-height: 1.3;
  opacity: 0.92;
}
@media screen and (max-width: 767px) {
  .sol-hero-logo-emblem { width: min(360px, 84vw); }
}

/* ======================================================================== */
/*  Language switch (EN <-> DE) — navbar dropdown, far-right corner         */
/* ======================================================================== */
/* Sits in .navbar1_container after the nav menu, before the hamburger.     */
/* The container is flex with .loc-toggle pinned left (margin-right:auto),   */
/* so this lands at the right edge on desktop; on mobile the nav menu is     */
/* collapsed and it sits just left of the hamburger.                        */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  z-index: 20;
}
.lang-switch_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--_primitives---colors--neutral-darkest, #201a13);
  background: var(--_primitives---coconut-cream, #f3ead7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.lang-switch_btn:hover { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.lang-switch_cur { font-weight: 600; }
.lang-switch_chev { width: 13px; height: 13px; flex: 0 0 auto; transition: transform 0.2s ease; }
.lang-switch.is-open .lang-switch_chev { transform: rotate(180deg); }
.lang-switch_menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 4.5rem;
  display: none;
  flex-direction: column;
  padding: 0.3rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.lang-switch.is-open .lang-switch_menu { display: flex; }
.lang-switch_opt {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--_primitives---colors--neutral-darkest, #201a13);
  background: transparent;
  transition: background-color 0.15s ease;
}
.lang-switch_opt:hover { background: var(--_primitives---coconut-cream, #f3ead7); }
.lang-switch_opt.is-active { font-weight: 600; background: var(--_primitives---coconut-cream, #f3ead7); }
@media (prefers-reduced-motion: reduce) {
  .lang-switch_btn, .lang-switch_chev, .lang-switch_opt { transition: none; }
}
/* Nav collapsed (hamburger visible, <=991px, data-collapse="medium"): pull the
   pill right, next to the hamburger (Principal 30.09: "mehr rechts, zum Menü").
   The toggle drops its auto margin here so the free space sits left of the pill. */
@media screen and (max-width: 991px) {
  .navbar1_container .loc-toggle { margin-right: 0; }
  .lang-switch { margin-left: auto; margin-right: 0.5rem; }
}
@media screen and (max-width: 767px) {
  .lang-switch_btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; gap: 0.25rem; }
  .lang-switch_menu { right: 0; }
}

/* ======================================================================== */
/*  Café — RestaurantGuru "Empfohlen" award band (after FAQ, before footer) */
/* ======================================================================== */
.cafe-award { background: #f8f1de; }
.cafe-award_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.75rem 0;
}

/* ======================================================================== */
/*  Mobile round — Principal 2026-09-30 (iPhone screenshots)                */
/* ======================================================================== */

/* Café navbar logo a little larger on desktop (100 -> 115px). The logo IS the
   navbar height (no vertical padding), so a scale() would poke out top and
   bottom. Instead both navbars grow to 115px (equal height kept; Soluna's
   100px mark stays, centred) and the logo slot widens to 115px on BOTH pages,
   so the toggle still starts at the same x on café and Soluna. */
@media screen and (min-width: 768px) {
  .navbar1_component { min-height: 115px; }
  .page-cafe .navbar1_logo { height: 115px; }
  .navbar1_logo-link { width: 115px; }
}

/* Mobile menu panel: same colour as the desktop navbar instead of the dark
   colour-scheme default. */
@media screen and (max-width: 991px) {
  .navbar1_component.cafe .navbar1_menu {
    background-color: var(--_primitives---colour, #ff8258);
  }
  .navbar1_component.soluna .navbar1_menu {
    background-color: var(--_primitives---colors--cumin, #984e22);
    background-image: url("../img/6a1fad3c60c25a95e43ce6c2_8.jpg");
    background-position: 0 0;
  }
}

/* Soluna: brand brown under every plaster texture. Where iOS Safari drops or
   fails to tile the large texture photo, brown shows instead of the dark
   colour-scheme default ("schwarzer Hintergrund" on the FAQ). */
.navbar1_component.color-scheme-1.soluna,
.section_layout3.color-scheme-4.soluna,
.section_layout423.color-scheme-4.soluna,
.section_event16.color-scheme-4.soluna,
.section_faq2.color-scheme-4.soluna,
.footer1_component.color-scheme-4.soluna {
  background-color: var(--_primitives---colors--cumin, #984e22);
}

/* Horizontal overflow ("rechts die Hälfte schwarz" on zoom-out). Root cause:
   .padding-section-large is a 1fr grid; 1fr = minmax(auto, 1fr), so the café
   Projects scroll-track's min-content blew the column up to ~554px on a 390px
   phone (event16 has overflow:visible for the yellow blob, so it leaked out).
   min-width:0 lets grid children shrink; the clip is a safety net that keeps
   the sticky navbar working (clip, unlike hidden, makes no scroll container). */
.padding-section-large > * { min-width: 0; }
.cafe-proj-scroller, .cafe-proj-track { min-width: 0; max-width: 100%; }
html, body { overflow-x: clip; }

/* Atmosphere: 3 cards swipe sideways on phones + tablets (<=991px, where
   Webflow stacks them as 3 full-width 70vh cards). */
@media screen and (max-width: 991px) {
  .layout423_row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .layout423_row::-webkit-scrollbar { display: none; }
  .layout423_card {
    flex: 0 0 60%;
    width: 60%;
    min-height: 30rem;
    height: auto;
    scroll-snap-align: start;
  }
}
@media screen and (max-width: 767px) {
  .layout423_card { flex-basis: 82%; width: 82%; min-height: 26rem; }
}

/* Soluna events: a single flyer, centered. */
.sol-event-strip.is-single { justify-content: center; overflow-x: visible; }

/* ---- Hero video: no native play button, taps pass through (iOS) -------- */
/* If iOS refuses autoplay (Low Power Mode) it draws a play button; hide it  */
/* and let taps reach the page — hero-video.js starts the video on the first */
/* touch. The poster image covers the gap until playback begins.            */
.sol-hero-video,
.cafe-hero-video { pointer-events: none; }
.sol-hero-video::-webkit-media-controls,
.cafe-hero-video::-webkit-media-controls,
.sol-hero-video::-webkit-media-controls-start-playback-button,
.cafe-hero-video::-webkit-media-controls-start-playback-button,
.sol-hero-video::-webkit-media-controls-overlay-play-button,
.cafe-hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
/* ======================================================================== */
/*  CMS events (Sanity) — flyer card + short caption                        */
/* ======================================================================== */
/* The build wraps each flyer in .sol-event-card; widths move from the img  */
/* to the card, the flyer fills it. Static fallback (plain img) unchanged.   */
.sol-event-strip .sol-event-card {
  flex: 0 0 auto;
  width: 45%;
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sol-event-card .sol-event-template { width: 100%; }
@media screen and (max-width: 991px) {
  .sol-event-strip .sol-event-card { width: 60%; }
}
@media screen and (max-width: 767px) {
  .sol-event-strip .sol-event-card { width: 80%; }
}
.sol-event-caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}
.sol-event-title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.sol-event-when { font-size: 0.95rem; opacity: 0.85; letter-spacing: 0.02em; }
.sol-event-desc { font-size: 0.95rem; line-height: 1.5; opacity: 0.92; }
.sol-event-link {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sol-event-strip.is-empty { display: none; }

/* ---- Events: text when no event is online (Sanity "Events text") -------- */
.sol-events-empty {
  margin: 0;
  padding: 2.5rem 0 0.5rem;
  text-align: center;
  font-size: 1.25rem;
  opacity: 0.9;
}
.sol-events-empty[hidden] { display: none; }