/* neelia Silberschmuck, Seite fuer den Laden in Bayreuth (SEO-480)

   Seit Paket 4 (04.10.2026) ein Nachbau der Bausteine aus dem Shopify-Theme von neelia:
   gleiche Klassen (neelia-*), gleiche Werte, gleiche Bewegungen. Quelle fuer
   jeden Wert ist der Theme-Code unter Shopify-Shop\theme\ (Dateinamen stehen
   an jedem Abschnitt), nicht der Styleguide. Wo beide auseinandergehen, gilt
   das Theme, weil Julia dort zuletzt entschieden hat.

   Schriften: Familjen Grotesk (aus dem Theme kopiert) und Newsreader 300/400
   (@fontsource/newsreader 5.3.0), beide OFL und selbst gehostet unter
   assets/fonts/. Nichts von fremden Servern. */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/familjen-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/familjen-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/newsreader-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/newsreader-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/newsreader-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/newsreader-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/newsreader-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Rollen (theme\snippets\neelia-variables.liquid) ----------
   Gold #e6c84f, daraus wie im Theme per color_lighten/color_darken in HSL
   gerechnet. Nachgerechnet: color_darken 34 ergibt #776211 wie im Theme. */
:root {
  --neelia-text: #14181b;
  --neelia-text-leise: #5f5a51;
  --neelia-flaeche: #f4f1eb;          /* Papier */
  --neelia-flaeche-ruhig: #ebe6dc;    /* Sand */
  --neelia-linie: #e3ddd1;
  --neelia-linie-leise: #ede8de;
  --neelia-karte: #ffffff;            /* Karten sind weiss, sonst Ton in Ton */

  --neelia-gold: #e6c84f;
  --neelia-gold-soft: rgb(230 200 79 / 0.7);
  --neelia-gold-glow: #f8efcc;        /* lighten 28 */
  --neelia-gold-text: #776211;        /* darken 34, 5,3:1 auf Papier */
  --neelia-akzent: var(--neelia-gold-text);

  /* Metallstaffel, theme\snippets\neelia-variables.liquid Zeile 71 bis 75 */
  --neelia-metall-glanz: #fefdf9;     /* lighten 38, desaturate 10 */
  --neelia-metall-hell: #f7f1d7;      /* lighten 30, desaturate 8 */
  --neelia-metall: #f0e2ab;           /* lighten 20, desaturate 5 */
  --neelia-metall-tief: #ebd373;      /* lighten 8 */
  --neelia-metall-kante: #e1bd2b;     /* darken 8 */

  --neelia-schiefer: #0f1113;
  --neelia-schiefer-text: #f4f1eb;
  --neelia-schiefer-leise: #b9b2a5;

  /* Fuss: Grund in Textfarbe, inverse Rollen (theme\assets\neelia-fuss.css) */
  --neelia-invers: #eaeef0;
  --neelia-invers-leise: #a2acb2;

  --neelia-serif: 'Newsreader', Georgia, serif;
  --neelia-sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Skala und Leiter (theme\assets\neelia.css) */
  --neelia-text-groesse: 1.0625rem;
  --neelia-text-hoehe: 1.6;
  --neelia-h1-start: clamp(2.5rem, 5.5vw, 4.25rem);
  --neelia-h2: 2rem;
  --neelia-h2-bild: clamp(1.75rem, 3.5vw, 2.375rem);
  --neelia-lead: 1.3125rem;
  /* P5 Lesbarkeit: nichts unter 12 px, Angaben 16 px statt 15 */
  --neelia-angabe: 1rem;
  --neelia-meta: 0.875rem;
  --neelia-label: 0.8125rem;
  --neelia-label-klein: 0.75rem;

  --neelia-abstand-1: 0.3125rem;
  --neelia-abstand-2: 0.5rem;
  --neelia-abstand-3: 0.75rem;
  --neelia-abstand-4: 1rem;
  --neelia-abstand-5: 1.25rem;
  --neelia-abstand-6: 1.5rem;
  --neelia-abstand-7: 3rem;
  --neelia-abstand-8: 4rem;

  --neelia-rand: 4rem;
  /* Startseite des Shops: 4rem statt 6rem (neelia-start.css, „Dichtere
     Startseite“, Anmerkung Aileen 30.09.2026) */
  --neelia-rhythmus: 4rem;

  --neelia-radius: 2px;
  --neelia-radius-pille: 999px;
  --neelia-uebergang: 0.16s ease;
  --neelia-uebergang-bild: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);

  --neelia-ankuendigung-hoehe: 36px;
}

@media screen and (max-width: 48rem) {
  :root {
    --neelia-rand: 1.25rem;
    --neelia-rhythmus: 2.75rem;
    --neelia-meta: 0.875rem;
    --neelia-label: 0.8125rem;
    --neelia-label-klein: 0.8125rem;
  }
}

/* ---------- Grundlagen (theme\assets\neelia.css) ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 133px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  overflow-x: clip;
}
@media screen and (max-width: 48rem) { html { scroll-padding-top: 117px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--neelia-sans);
  font-size: var(--neelia-text-groesse);
  line-height: var(--neelia-text-hoehe);
  color: var(--neelia-text);
  background: var(--neelia-flaeche);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--neelia-serif);
  color: inherit;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1, h2 { font-weight: 300; letter-spacing: -0.015em; }
h3, h4 { font-weight: 400; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
a, button, summary { touch-action: manipulation; }

/* Links ohne Klasse erben die Farbe, Hover im lesbaren Gold. */
a { color: inherit; text-decoration: none; }
a:where(:not([class])):hover { color: var(--neelia-gold-text); }

/* Links im Fliesstext: schwarz unterstrichen, Gold erst im Hover. */
p > a:where(:not([class])) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--neelia-uebergang), text-decoration-thickness var(--neelia-uebergang);
}
p > a:where(:not([class])):hover { text-decoration-thickness: 2px; }
a[href^="tel:"] { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--neelia-text); outline-offset: 2px; }
:is(.neelia-ankuendigung, .neelia-hero, .neelia-fuss, .neelia-collage, .neelia-lupe) :focus-visible {
  outline-color: var(--neelia-schiefer-text);
}

::selection { background: var(--neelia-gold-glow); }

.neelia-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75rem 1rem; background: var(--neelia-text); color: #fff;
}
.neelia-sprung:focus { left: 1rem; top: 1rem; color: #fff; }

.neelia-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Das kleine gesperrte Versal ueber Ueberschriften */
.neelia-label {
  display: block;
  margin: 0;
  font-family: var(--neelia-sans);
  font-size: var(--neelia-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neelia-text-leise);
}

.neelia-h2 {
  margin: 0;
  font-family: var(--neelia-serif);
  font-weight: 300;
  font-size: var(--neelia-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.neelia-h2--gross {
  font-size: var(--neelia-h2-bild);
  line-height: 1.12;
  text-wrap: balance;
}

.neelia-innen {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--neelia-rand);
}

/* Flaechen: Papier ist der Grund, Sand mit Haarlinie oben und unten
   (das `ruhig` der Shop-Sections), Schiefer fuer Hero und dunklen Aufruf. */
.neelia-ruhig {
  background: var(--neelia-flaeche-ruhig);
  border-block: 1px solid var(--neelia-linie);
}

/* ---------- Knoepfe (theme\assets\neelia.css, Zeile 384 bis 480) ----------
   Hauptknopf: dunkle Flaeche, Versalien, 2 px Kante. Beim Anfassen wird er
   gold, ein Glanzkeil laeuft in .55s schraeg darueber, er hebt sich um 2 px
   und wirft zwei Schatten im Goldton. Gedrueckt faellt er auf metall-tief.
   Stand im Theme seit Commit b07ff52 (04.09.2026, Julia): flaechig Gold statt
   des Fuenf-Stopp-Verlaufs aus dem Styleguide. */
.neelia-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 44px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--neelia-radius);
  background: var(--neelia-text);
  color: var(--neelia-flaeche);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--neelia-uebergang),
    color var(--neelia-uebergang),
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.neelia-knopf::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -100%;
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.neelia-knopf:hover,
.neelia-knopf:focus-visible {
  background: var(--neelia-gold);
  color: var(--neelia-text);
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgb(160 130 50 / 26%),
    0 12px 28px rgb(160 130 50 / 18%);
}

.neelia-knopf:hover::after,
.neelia-knopf:focus-visible::after {
  inset-inline-start: 160%;
}

.neelia-knopf:active {
  background: var(--neelia-metall-tief);
  color: var(--neelia-text);
  transform: translateY(0);
  box-shadow: 0 2px 6px rgb(160 130 50 / 20%);
}

/* Heller Knopf auf dunkler Flaeche (Hero, dunkler Aufruf) */
.neelia-knopf--hell {
  background: var(--neelia-schiefer-text);
  color: var(--neelia-schiefer);
}
.neelia-knopf--hell:hover,
.neelia-knopf--hell:focus-visible { color: var(--neelia-text); }

@media (prefers-reduced-motion: reduce) {
  .neelia-knopf,
  .neelia-knopf:hover,
  .neelia-knopf:focus-visible { transform: none; }
  .neelia-knopf::after { display: none; }
}

/* ---------- Goldstaub (theme\assets\neelia.css, snippets\neelia-goldstaub.liquid) */

.neelia-goldstaub {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  animation: neelia-staub-ruhe 2.5s ease 5s forwards;
}

.neelia-goldstaub i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #f3dc9a 0%, var(--neelia-gold) 45%, rgba(230, 200, 79, 0) 70%);
  opacity: 0;
  animation: neelia-drift linear 1;
}

@keyframes neelia-drift {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .95; }
  70%  { opacity: .55; }
  100% { transform: translate3d(var(--dx), var(--dy), 0) scale(1.15); opacity: 0; }
}

@keyframes neelia-staub-ruhe { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .neelia-goldstaub { display: none; }
}

/* ---------- Ankuendigung (theme\assets\neelia-kopf.css) ---------- */

.neelia-kopfgruppe {
  position: sticky;
  top: calc(-1 * var(--neelia-ankuendigung-hoehe));
  z-index: 50;
}

.neelia-ankuendigung { background: var(--neelia-schiefer); }

.neelia-ankuendigung__innen {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  height: var(--neelia-ankuendigung-hoehe);
  margin: 0;
  padding-inline: 20px;
}

.neelia-ankuendigung__punkt {
  font-size: var(--neelia-label-klein);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neelia-gold);
  white-space: nowrap;
}

.neelia-ankuendigung__trenner {
  color: var(--neelia-gold);
  font-size: 16px;
  line-height: 1;
}

/* ---------- Kopf (theme\assets\neelia-kopf.css, sections\neelia-header.liquid) */

.neelia-header {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--neelia-linie);
}

.neelia-header__innen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px var(--neelia-rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--neelia-abstand-6);
}

.neelia-header__logo { flex: none; display: block; line-height: 0; }
.neelia-header__logo img { width: 112px; height: auto; }

.neelia-menue {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.neelia-menue__link {
  position: relative;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neelia-text);
  padding: 6px 0;
}

.neelia-menue__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--neelia-text);
  transition: right 0.3s ease;
}

.neelia-menue__link:hover::after,
.neelia-menue__link[aria-current='page']::after { right: 0; }
.neelia-menue__link:hover { color: var(--neelia-text); }

.neelia-header__dienste { display: flex; align-items: center; gap: 18px; flex: none; }

.neelia-dienst {
  font-size: var(--neelia-meta);
  font-weight: 500;
  color: var(--neelia-text);
  white-space: nowrap;
}
.neelia-dienst:hover { color: var(--neelia-gold-text); }

/* Schublade fuer schmale Geraete: <details>, ohne Skript bedienbar.
   Escape und Fokus ergaenzt script.js wie assets\neelia-kopf.js im Shop. */
.neelia-header__schublade { display: none; }

.neelia-header__schublade > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}
.neelia-header__schublade > summary::-webkit-details-marker { display: none; }

.neelia-header__balken {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--neelia-text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.neelia-header__schublade[open] .neelia-header__balken:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.neelia-header__schublade[open] .neelia-header__balken:nth-child(2) { opacity: 0; }
.neelia-header__schublade[open] .neelia-header__balken:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.neelia-header__schublade-inhalt {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--neelia-flaeche);
  border-bottom: 1px solid var(--neelia-linie);
  padding: var(--neelia-abstand-3) var(--neelia-rand) var(--neelia-abstand-6);
}

.neelia-header__schublade-inhalt ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Jeder Eintrag mindestens 44 px hoch und ueber die volle Breite tippbar */
.neelia-header__schublade-inhalt a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--neelia-text);
  border-bottom: 1px solid var(--neelia-linie-leise);
}

.neelia-header__schublade-dienste {
  margin-top: var(--neelia-abstand-5) !important;
}

.neelia-header__schublade-dienste a {
  font-size: var(--neelia-angabe);
  font-weight: 400;
  color: var(--neelia-text-leise);
  border-bottom: 0;
}

@media screen and (max-width: 60rem) {
  .neelia-header__nav,
  .neelia-header__dienste { display: none; }
  .neelia-header__schublade { display: block; }
  .neelia-header__innen { gap: var(--neelia-abstand-3); }
}

@media screen and (max-width: 48rem) {
  .neelia-kopfgruppe { top: 0; }
  .neelia-header__innen { padding-block: 10px; }
  .neelia-header__logo img { width: 80px; }

  .neelia-ankuendigung__innen { gap: 14px; overflow: hidden; }
  .neelia-ankuendigung__punkt ~ .neelia-ankuendigung__punkt,
  .neelia-ankuendigung__trenner { display: none; }
  .neelia-ankuendigung__punkt { letter-spacing: 0.08em; }
}

/* ---------- Hero (theme\assets\neelia-hero.css) ---------- */

.neelia-hero {
  position: relative;
  height: clamp(560px, 82vh, 760px);
  background: var(--neelia-schiefer);
  overflow: hidden;
}

.neelia-hero__bild {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 38%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 38%);
}

.neelia-hero__schatten {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--neelia-schiefer) 0%, var(--neelia-schiefer) 34%, rgba(15, 17, 19, 0) 62%);
  pointer-events: none;
}

.neelia-hero__text {
  position: absolute;
  left: clamp(20px, 4.5vw, 64px);
  top: 0;
  height: 100%;
  width: min(560px, 75%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.neelia-hero__label {
  font-size: var(--neelia-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neelia-gold);
}

.neelia-hero__titel {
  margin: 0;
  font-family: var(--neelia-serif);
  font-weight: 300;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--neelia-schiefer-text);
  text-wrap: balance;
}

.neelia-hero__lead {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--neelia-schiefer-leise);
  max-width: 36ch;
}

.neelia-hero__knoepfe {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.neelia-hero__link {
  display: inline-flex;
  align-items: center;
  height: 52px;
  color: var(--neelia-schiefer-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--neelia-gold);
}
.neelia-hero__link:hover { color: var(--neelia-gold); }

@media screen and (max-width: 48rem) {
  .neelia-hero { height: clamp(480px, 72vh, 620px); }
  /* Abweichung vom Shop (dort liegt das Foto mit 30 Prozent hinter dem Text):
     die Ladenfront soll am Handy erkennbar sein. Das Foto steht deshalb voll
     oben und blendet nur am unteren Rand in den Schiefer, der Text steht
     darunter auf Schiefer und behaelt seinen Kontrast. */
  .neelia-hero { height: auto; }
  .neelia-hero__bild {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-position: 50% 60%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,0) 100%);
  }
  .neelia-hero__schatten { display: none; }
  .neelia-hero__text { position: relative; left: auto; height: auto; margin: 0 auto; padding: 8px 0 2.75rem; gap: 20px; }
  .neelia-hero__text { width: calc(100% - 2 * var(--neelia-rand)); }
  .neelia-hero__titel { font-size: clamp(40px, 11vw, 48px); }
}

/* ---------- Seitenkopf mit Polaroids (theme\assets\neelia-seiten.css) ---------- */

.neelia-seitenkopf__innen {
  padding-block: 5rem var(--neelia-abstand-8);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--neelia-abstand-8);
  align-items: center;
}

.neelia-seite__spalte {
  display: flex;
  flex-direction: column;
  gap: var(--neelia-abstand-6);
  max-width: 760px;
}

.neelia-seitenkopf__lead {
  margin: 0;
  max-width: 56ch;
  font-family: var(--neelia-serif);
  font-weight: 400;
  font-size: var(--neelia-lead);
  line-height: 1.5;
  color: var(--neelia-text);
}

.neelia-seitenkopf__text { max-width: 62ch; }
.neelia-seitenkopf__text p:last-child { margin-bottom: 0; }

/* Laden-Einstieg: Ueberschrift und Vorspann links, Text rechts, oben buendig
   (seit der rechte Text drei Absaetze hat, liess "unten" links ein Loch) */
.neelia-laden-einstieg { align-items: start; padding-block: 5rem var(--neelia-rhythmus); }
.neelia-laden-einstieg .neelia-seitenkopf__text { font-size: 1.125rem; line-height: 1.65; }
@media screen and (max-width: 48rem) {
  .neelia-seitenkopf__innen.neelia-laden-einstieg { padding-block: 3rem var(--neelia-rhythmus); }
}

/* ---------- Geschichte (sections\neelia-geschichte.liquid) ---------- */

.neelia-geschichte__innen {
  padding-block: var(--neelia-rhythmus);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--neelia-abstand-8);
  align-items: start;
}

.neelia-geschichte__kopf {
  display: flex;
  flex-direction: column;
  gap: var(--neelia-abstand-5);
}

.neelia-geschichte__text {
  display: flex;
  flex-direction: column;
  gap: var(--neelia-abstand-5);
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.65;
}

.neelia-geschichte__absaetze { color: var(--neelia-text); max-width: 62ch; }
.neelia-geschichte__absaetze p { margin: 0 0 var(--neelia-abstand-5); }
.neelia-geschichte__absaetze p:last-child { margin-bottom: 0; }

.neelia-geschichte__signatur {
  margin: 0;
  font-family: var(--neelia-serif);
  font-style: italic;
  font-size: 1.1875rem;
  color: var(--neelia-akzent);
}

@media screen and (max-width: 60rem) {
  .neelia-seitenkopf__innen,
  .neelia-geschichte__innen {
    grid-template-columns: 1fr;
    gap: var(--neelia-abstand-6);
  }
}

@media screen and (max-width: 48rem) {
  .neelia-seitenkopf__innen { padding-block: 3rem var(--neelia-abstand-7); }
}

/* ---------- Bild und Text mit Ladenangaben (neelia-bild-text.liquid) ---------- */

.neelia-bildtext__innen {
  padding-block: var(--neelia-rhythmus);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--neelia-abstand-8);
  align-items: center;
}

/* Bildformat „quer“: 4:3, hoechstens 560 px (Laden im Shop) */
.neelia-bildtext__bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 560px;
  margin: 0;
  background: var(--neelia-flaeche);
  border: 1px solid var(--neelia-linie);
  border-radius: var(--neelia-radius);
}
.neelia-bildtext__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--neelia-uebergang-bild);
}
.neelia-bildtext__bild:hover img { transform: scale(1.035); }

.neelia-bildtext__text {
  display: flex;
  flex-direction: column;
  gap: var(--neelia-abstand-5);
  max-width: 520px;
}

.neelia-bildtext__teil + .neelia-bildtext__teil {
  margin-top: var(--neelia-abstand-4);
  padding-top: var(--neelia-abstand-6);
  border-top: 1px solid var(--neelia-linie);
}
.neelia-bildtext__teil { display: flex; flex-direction: column; gap: var(--neelia-abstand-4); }

.neelia-laden-angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--neelia-abstand-2) var(--neelia-abstand-6);
  margin: var(--neelia-abstand-2) 0 0;
  font-size: var(--neelia-angabe);
}
.neelia-laden-angaben dt { color: var(--neelia-text-leise); }
.neelia-laden-angaben dd { margin: 0; font-variant-numeric: tabular-nums; }

.neelia-anschrift {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media screen and (max-width: 48rem) {
  .neelia-bildtext__innen { grid-template-columns: 1fr; gap: var(--neelia-abstand-7); }
  .neelia-bildtext__bild { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .neelia-bildtext__bild:hover img { transform: none; }
}

/* ---------- Qualitaet (theme\assets\neelia-qualitaet.css) ---------- */

.neelia-quali {
  padding-block: var(--neelia-rhythmus);
  background: var(--neelia-flaeche-ruhig);
  border-block: 1px solid var(--neelia-linie);
}

.neelia-quali__innen {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.neelia-quali__bild {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  background: #fff;
  border-radius: var(--neelia-radius);
  overflow: hidden;
}
.neelia-quali__bild > img { width: 100%; height: 100%; object-fit: cover; }

.neelia-quali__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-7px, -50%);
  pointer-events: none;
}

.neelia-quali__punkt {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neelia-gold);
  box-shadow: 0 0 0 0 rgb(230 200 79 / 0.7);
  animation: neelia-quali-puls 2.4s 3;
}

@keyframes neelia-quali-puls {
  0% { box-shadow: 0 0 0 0 rgb(230 200 79 / 0.7); }
  80%, 100% { box-shadow: 0 0 0 14px rgb(230 200 79 / 0); }
}

.neelia-quali__strich { width: 60px; height: 1px; background: var(--neelia-text); }

.neelia-quali__schild {
  padding: 6px 10px;
  border-radius: var(--neelia-radius);
  background: var(--neelia-text);
  color: #fff;
  font-size: var(--neelia-label-klein);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.neelia-quali__titel {
  margin: 14px 0 20px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.neelia-quali__titel em { font-style: italic; color: var(--neelia-gold-text); }

.neelia-quali__absatz { margin: 0; max-width: 52ch; }

.neelia-quali__schein {
  position: relative;
  margin-top: 36px;
  padding: 36px 36px 28px;
  background: #fff;
  border-radius: var(--neelia-radius);
}

.neelia-quali__schein::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--neelia-linie);
  pointer-events: none;
}

.neelia-quali__schein-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 84px 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--neelia-text);
}

.neelia-quali__schein-titel { font-family: var(--neelia-serif); font-size: 1.375rem; }

.neelia-quali__schein-hinweis {
  font-size: var(--neelia-label-klein);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neelia-text-leise);
}

.neelia-quali__zeilen { margin: 0; }

.neelia-quali__zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.9375rem;
}
.neelia-quali__zeile dt { margin: 0; }

.neelia-quali__punkte {
  flex: 1;
  border-bottom: 1px dotted var(--neelia-text-leise);
  opacity: 0.5;
  transform: translateY(-4px);
}

.neelia-quali__zeile dd {
  margin: 0;
  font-family: var(--neelia-serif);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.neelia-quali__stempel {
  position: absolute;
  right: -26px;
  top: -34px;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1.5px solid var(--neelia-gold-text);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.7);
  color: var(--neelia-gold-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-12deg);
}

.neelia-quali__stempel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--neelia-gold-text);
  border-radius: 50%;
}

.neelia-quali__stempel strong {
  display: block;
  font-family: var(--neelia-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 989px) {
  .neelia-quali__innen { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .neelia-quali__strich { width: 28px; }
  /* Der Stempel ragt hier 46 bzw. 52 px ueber den Schein. Der Abstand nach oben
     muss das aufnehmen, sonst liegt er auf dem Absatz darueber. */
  .neelia-quali__schein { margin-top: 76px; padding: 28px 22px 20px; }
  .neelia-quali__stempel { right: -6px; top: -46px; width: 88px; height: 88px; }
  .neelia-quali__stempel strong { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .neelia-quali__stempel { right: 0; }
  /* Schmal ragte das Schild rechts aus dem Bild und wurde abgeschnitten.
     Hier zeigt es vom Punkt nach links, der Punkt bleibt auf der Punze. */
  .neelia-quali__pin { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
}

/* Schmal brach der Titel des Datenblatts neben dem Stempel um. Der
   Stempel wird kleiner und rueckt hoeher, der Kopf gibt nur noch so viel
   Platz frei, wie der Stempel braucht. Galt zuerst nur unter 360 px, bei
   375 px brach der Titel aber genauso um. */
@media (max-width: 480px) {
  .neelia-quali__stempel { top: -60px; width: 86px; height: 86px; font-size: 0.75rem; letter-spacing: 0.04em; }
  .neelia-quali__stempel strong { font-size: 1.375rem; }
  .neelia-quali__schein-kopf { padding-right: 0; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .neelia-quali__punkt { animation: none; }
}

/* ---------- Galerie als Collage (P5, 04./05.10.2026) ----------
   Der Hoehepunkt der Seite. Formensprache aus dem Shop: Polaroids mit
   Goldklebestreifen und kursiver Unterschrift, Goldstaub, runder Stempel,
   Schiefer als Grund wie der Hero. Dazu aus Julias gewaehlter Mock-Richtung
   „Collage“: ueberlappende, gedrehte Fotos, handschriftliche Notiz mit Pfeil,
   Bewegung beim Scrollen und Hover.

   Aufbau (Runde 3): Jedes Foto steht in seinem echten Seitenverhaeltnis
   (--format am Listenpunkt, aus den Bilddateien gemessen), damit nichts
   abgeschnitten wird. Lage und Breite stehen in Einheiten der Flaechenbreite
   (cqw), dadurch bleibt die Anordnung bei jeder Breite einer Stufe gleich.
   Drei Stufen: Handy bis 599 px, Tablet 600 bis 1099 px, breit ab 1100 px. */

.neelia-collage {
  position: relative;
  overflow: hidden;
  background: var(--neelia-schiefer);
  color: var(--neelia-schiefer-text);
  padding-block: 2rem 3rem;
  isolation: isolate;
}

/* Der Staub steigt wie im Hero einmal auf, sobald die Galerie zum ersten Mal
   im Bild ist (script.js). Nach fuenf Sekunden blendet er aus (WCAG 2.2.2).
   Bei reduzierter Bewegung gar nicht. */
.neelia-goldstaub--collage { z-index: 0; animation: none; }
.neelia-goldstaub--collage i { animation-play-state: paused; }
.neelia-collage.ist-sichtbar .neelia-goldstaub--collage { animation: neelia-staub-ruhe 2.5s ease 5s forwards; }
.neelia-collage.ist-sichtbar .neelia-goldstaub--collage i { animation-play-state: running; }

/* Container fuer die cqw-Einheiten: die Hoehe der Flaeche (ohne Skript) und
   die Lage der Fotos beziehen sich auf diese Breite. */
.neelia-collage__innen { position: relative; z-index: 1; container-type: inline-size; }

/* Kopfzeile: Dachzeile und Titel links, der Stempel daneben auf Schiefer */
.neelia-collage__oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  margin-bottom: 2.5rem;
}

.neelia-collage__kopf { display: flex; flex-direction: column; gap: 14px; }

.neelia-collage .neelia-label { color: var(--neelia-gold); }

.neelia-collage__titel {
  margin: 0;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--neelia-schiefer-text);
  text-wrap: balance;
}

/* Stempel: dreht sich beim Scrollen (script.js setzt --stempel-dreh).
   Mindestens 120 px, dann kommt der Ringtext (12 Einheiten im 120er-Raster)
   auf mindestens 12 px. Er steht immer auf Schiefer. */
.neelia-collage__stempel {
  flex: none;
  width: 150px;
  height: 150px;
  margin-right: 4%;
  color: var(--neelia-gold);
  font-family: var(--neelia-sans);
  rotate: var(--stempel-dreh, -12deg);
  pointer-events: none;
}
.neelia-collage__stempel-mitte { font-family: var(--neelia-serif); }

/* Die Flaeche, in der die Fotos liegen */
.neelia-collage__flaeche {
  container-type: inline-size;
  position: relative;
  height: calc(var(--hoehe, 80) * 1cqw);
}
.neelia-collage__liste { margin: 0; padding: 0; list-style: none; }

.neelia-collage__stueck {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: calc(var(--b) * 1cqw);
  z-index: var(--ebene, 1);
  rotate: var(--dreh, 0deg);
  transition:
    rotate 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    scale 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.neelia-collage__polaroid {
  position: relative;
  display: block;
  padding: 10px 10px 0;
  background: #fff;
  color: var(--neelia-text);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.38), 0 2px 6px rgb(0 0 0 / 0.25);
  cursor: zoom-in;
  transition: box-shadow 0.45s ease;
}

/* Klebestreifen in Gold, wie beim ersten Polaroid im Shop, an jedem dritten */
.neelia-collage__stueck:nth-child(3n + 1)::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  background: var(--neelia-gold-soft);
  rotate: -4deg;
  pointer-events: none;
}

/* Das Bildfeld hat das Format der Datei, object-fit schneidet nichts ab */
.neelia-collage__bild {
  position: relative;
  display: block;
  aspect-ratio: var(--format);
  overflow: hidden;
  background: #22262a;
}

.neelia-collage__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Glanzstreif beim Ueberfahren, wie Knopf und Materialkarte im Shop */
.neelia-collage__bild::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 45%), transparent);
  transform: skewX(-18deg);
  transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.neelia-collage__unterschrift {
  display: block;
  padding: 9px 4px 11px;
  font-family: var(--neelia-serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--neelia-text-leise);
  /* Darf umbrechen statt abzuschneiden: "Echte Süßwasserperlen" passt am
     Handy nicht in eine Zeile des schmalen Polaroids. */
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Ohne Unterschrift bleibt der breite weisse Rand: es ist ein Polaroid. */
.neelia-collage__polaroid:not(:has(.neelia-collage__unterschrift))::after {
  content: '';
  display: block;
  height: 30px;
}

.neelia-collage__stueck:hover,
.neelia-collage__stueck:focus-within { z-index: 20; }

@media (hover: hover) {
  .neelia-collage__stueck:hover { rotate: 0deg; scale: 1.06; }
  .neelia-collage__stueck:hover .neelia-collage__polaroid {
    box-shadow: 0 0 0 1px var(--neelia-gold), 0 24px 54px rgb(0 0 0 / 0.5), 0 10px 26px rgb(160 130 50 / 0.35);
  }
  .neelia-collage__stueck:hover .neelia-collage__bild img { transform: scale(1.06); }
  .neelia-collage__stueck:hover .neelia-collage__bild::after { left: 140%; }
}

.neelia-collage__stueck:focus-within { rotate: 0deg; scale: 1.04; }
.neelia-collage__polaroid:focus-visible { outline: 3px solid var(--neelia-gold); outline-offset: 4px; }

/* Handschriftliche Notiz mit Pfeil, zeigt auf das Schild an der Tuer */
.neelia-collage__notiz {
  position: absolute;
  z-index: 6;
  left: calc(var(--nx) * 1cqw);
  top: calc(var(--ny) * 1cqw);
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-family: var(--neelia-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--neelia-gold);
  rotate: -6deg;
  pointer-events: none;
}
.neelia-collage__notiz span { max-width: 9ch; }
.neelia-collage__notiz svg { margin-top: 0.4rem; rotate: var(--pfeil, 0deg); scale: 1 var(--pfeil-kippen, 1); }

/* Formate der Dateien (Breite durch Hoehe), gemessen am 05.10.2026 */
.neelia-collage__stueck:nth-child(1)  { --format: 1600 / 1067; }
.neelia-collage__stueck:nth-child(2)  { --format: 1 / 1; }
.neelia-collage__stueck:nth-child(3)  { --format: 1200 / 800; }
.neelia-collage__stueck:nth-child(4)  { --format: 1 / 1; }
.neelia-collage__stueck:nth-child(5)  { --format: 800 / 1200; }
.neelia-collage__stueck:nth-child(6)  { --format: 1 / 1; }
.neelia-collage__stueck:nth-child(7)  { --format: 800 / 900; }
.neelia-collage__stueck:nth-child(8)  { --format: 1200 / 526; }
.neelia-collage__stueck:nth-child(9)  { --format: 1200 / 800; }
.neelia-collage__stueck:nth-child(10) { --format: 800 / 900; }

/* Breit (ab 1100 px): drei Reihen, Lage in Hundertsteln der Flaechenbreite */
.neelia-collage__flaeche { --hoehe: 81.3; --nx: 2; --ny: 61; --pfeil: -8deg; --pfeil-kippen: -1; }
.neelia-collage__stueck:nth-child(1)  { --x: 0;  --y: 2;  --b: 36; --dreh: -3deg; --ebene: 2; }
.neelia-collage__stueck:nth-child(2)  { --x: 33; --y: 0;  --b: 25; --dreh: 4deg;  --ebene: 3; }
.neelia-collage__stueck:nth-child(3)  { --x: 56; --y: 4;  --b: 36; --dreh: 2deg;  --ebene: 2; }
.neelia-collage__stueck:nth-child(4)  { --x: 14; --y: 32; --b: 22; --dreh: -5deg; --ebene: 4; }
.neelia-collage__stueck:nth-child(5)  { --x: 1;  --y: 30; --b: 15; --dreh: 3deg;  --ebene: 3; }
.neelia-collage__stueck:nth-child(6)  { --x: 52; --y: 31; --b: 20; --dreh: -2deg; --ebene: 5; }
.neelia-collage__stueck:nth-child(7)  { --x: 35; --y: 29; --b: 18; --dreh: -4deg; --ebene: 3; }
.neelia-collage__stueck:nth-child(8)  { --x: 60; --y: 57; --b: 34; --dreh: 2deg;  --ebene: 5; }
.neelia-collage__stueck:nth-child(9)  { --x: 27; --y: 56; --b: 28; --dreh: -2deg; --ebene: 6; }
.neelia-collage__stueck:nth-child(10) { --x: 73; --y: 29; --b: 17; --dreh: 5deg;  --ebene: 4; }

/* Tablet (600 bis 1099 px): vier Reihen, groessere Fotos */
@media (max-width: 1099px) {
  .neelia-collage__flaeche { --hoehe: 131.5; --nx: 79; --ny: 67; --pfeil: 0deg; --pfeil-kippen: 1; }
  .neelia-collage__stueck:nth-child(1)  { --x: 0;  --y: 2;  --b: 46; --dreh: -3deg; --ebene: 2; }
  .neelia-collage__stueck:nth-child(2)  { --x: 43; --y: 0;  --b: 29; --dreh: 4deg;  --ebene: 3; }
  .neelia-collage__stueck:nth-child(3)  { --x: 69; --y: 5;  --b: 31; --dreh: 2deg;  --ebene: 2; }
  .neelia-collage__stueck:nth-child(4)  { --x: 21; --y: 37; --b: 30; --dreh: -4deg; --ebene: 4; }
  .neelia-collage__stueck:nth-child(5)  { --x: 1;  --y: 38; --b: 22; --dreh: 3deg;  --ebene: 3; }
  .neelia-collage__stueck:nth-child(6)  { --x: 49; --y: 34; --b: 27; --dreh: -2deg; --ebene: 4; }
  .neelia-collage__stueck:nth-child(7)  { --x: 66; --y: 95; --b: 27; --dreh: -3deg; --ebene: 3; }
  .neelia-collage__stueck:nth-child(8)  { --x: 30; --y: 70; --b: 46; --dreh: 2deg;  --ebene: 5; }
  .neelia-collage__stueck:nth-child(9)  { --x: 20; --y: 94; --b: 40; --dreh: -2deg; --ebene: 6; }
  .neelia-collage__stueck:nth-child(10) { --x: 74; --y: 30; --b: 25; --dreh: 5deg;  --ebene: 4; }
  /* Notiz rechts zwischen den Reihen, Text ueber dem Pfeil, Pfeil nach links unten */
  .neelia-collage__notiz { font-size: 1.25rem; flex-direction: column; align-items: flex-start; }
  .neelia-collage__notiz svg { width: 64px; height: 44px; scale: -1 1; }
  .neelia-collage__stempel { width: 130px; height: 130px; }
  .neelia-collage__unterschrift { font-size: 1rem; padding: 8px 2px 10px; }
  .neelia-collage__polaroid { padding: 8px 8px 0; }
  .neelia-collage__polaroid:not(:has(.neelia-collage__unterschrift))::after { height: 26px; }
}

/* Handy (bis 599 px): versetzte Spur nach unten, zwei Bilder je Hoehe */
@media (max-width: 599px) {
  .neelia-collage { padding-block: 1.5rem 3rem; }
  .neelia-collage__oben { margin-bottom: 1.75rem; gap: 12px; }
  .neelia-collage__titel { font-size: clamp(2.25rem, 10vw, 3rem); }
  .neelia-collage__stempel { width: 120px; height: 120px; margin-right: 0; }
  .neelia-collage__flaeche { --hoehe: 411; --nx: 0; --ny: 132; --pfeil: 10deg; --pfeil-kippen: 1; }
  .neelia-collage__stueck:nth-child(1)  { --x: 0;  --y: 2;   --b: 78; --dreh: -3deg; --ebene: 2; }
  .neelia-collage__stueck:nth-child(2)  { --x: 54; --y: 50;  --b: 44; --dreh: 4deg;  --ebene: 3; }
  .neelia-collage__stueck:nth-child(3)  { --x: 2;  --y: 72;  --b: 58; --dreh: 2deg;  --ebene: 2; }
  .neelia-collage__stueck:nth-child(4)  { --x: 40; --y: 112; --b: 56; --dreh: -4deg; --ebene: 4; }
  .neelia-collage__stueck:nth-child(5)  { --x: 2;  --y: 176; --b: 40; --dreh: 3deg;  --ebene: 3; }
  .neelia-collage__stueck:nth-child(6)  { --x: 46; --y: 180; --b: 52; --dreh: -3deg; --ebene: 4; }
  .neelia-collage__stueck:nth-child(7)  { --x: 6;  --y: 244; --b: 46; --dreh: 2deg;  --ebene: 5; }
  .neelia-collage__stueck:nth-child(8)  { --x: 26; --y: 306; --b: 72; --dreh: -2deg; --ebene: 6; }
  .neelia-collage__stueck:nth-child(9)  { --x: 0;  --y: 346; --b: 60; --dreh: 3deg;  --ebene: 5; }
  .neelia-collage__stueck:nth-child(10) { --x: 58; --y: 360; --b: 40; --dreh: -4deg; --ebene: 7; }
  .neelia-collage__notiz { font-size: 1.125rem; flex-direction: column; align-items: flex-start; }
  .neelia-collage__notiz span { max-width: 8ch; }
  .neelia-collage__notiz svg { width: 56px; height: 40px; margin-left: 1rem; }
  .neelia-collage__unterschrift { font-size: 1rem; padding: 7px 2px 9px; }
  .neelia-collage__polaroid { padding: 7px 7px 0; }
  .neelia-collage__polaroid:not(:has(.neelia-collage__unterschrift))::after { height: 22px; }
  .neelia-collage__stueck:nth-child(3n + 1)::before { width: 64px; height: 18px; margin-left: -32px; top: -9px; }
}

/* Ankommen beim Scrollen: script.js setzt .neelia-collage--bewegt nur, wenn
   Bewegung erlaubt ist. Ohne Skript stehen alle Bilder sofort da. Die Bilder
   bleiben sichtbar (opacity nie 0), sonst laedt der Browser lazy-Bilder
   nicht (Fallstrick aus dem Shop). */
.neelia-collage--bewegt .neelia-collage__stueck:not(.ist-da) {
  translate: 0 70px;
  opacity: 0.25;
  rotate: calc(var(--dreh, 0deg) * 2.5);
}

@media (prefers-reduced-motion: reduce) {
  .neelia-collage__stueck,
  .neelia-collage__bild img,
  .neelia-collage__bild::after,
  .neelia-collage__polaroid { transition: none; }
  .neelia-collage__stueck:hover { scale: 1; }
  .neelia-collage__stueck:hover .neelia-collage__bild img { transform: none; }
  .neelia-goldstaub--collage { display: none; }
}

/* ---------- Grossansicht (eigenes dialog-Element) ----------
   showModal haelt den Fokus im Fenster, Escape schliesst, script.js setzt
   den Fokus danach auf das angeklickte Bild zurueck. Pfeiltasten blaettern. */
.neelia-lupe {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--neelia-schiefer-text);
  overflow: hidden;
}
.neelia-lupe::backdrop { background: rgb(15 17 19 / 0.94); }

.neelia-lupe[open] { display: grid; place-items: center; }

.neelia-lupe__rahmen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 72px 76px 28px;
  max-width: 100%;
  max-height: 100%;
}

.neelia-lupe__bild {
  max-width: min(1200px, calc(100vw - 152px));
  max-height: calc(100dvh - 180px);
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 10px;
  background: #fff;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.55);
}

.neelia-lupe[open] .neelia-lupe__bild { animation: neelia-lupe-auf 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes neelia-lupe-auf { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }

.neelia-lupe__text {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  color: var(--neelia-schiefer-text);
}
.neelia-lupe__zahl {
  margin-right: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--neelia-gold);
  font-variant-numeric: tabular-nums;
}

.neelia-lupe__knopf {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(244 241 235 / 0.35);
  border-radius: 50%;
  background: rgb(15 17 19 / 0.6);
  color: var(--neelia-schiefer-text);
  cursor: pointer;
  transition: border-color var(--neelia-uebergang), color var(--neelia-uebergang), background-color var(--neelia-uebergang);
}
.neelia-lupe__knopf:hover { border-color: var(--neelia-gold); color: var(--neelia-gold); }
.neelia-lupe__knopf:focus-visible { outline: 2px solid var(--neelia-schiefer-text); outline-offset: 3px; }
.neelia-lupe__knopf--zu { top: 16px; right: 16px; }
.neelia-lupe__knopf--zurueck { left: 16px; top: 50%; translate: 0 -50%; }
.neelia-lupe__knopf--weiter { right: 16px; top: 50%; translate: 0 -50%; }

@media screen and (max-width: 48rem) {
  .neelia-lupe__rahmen { padding: 72px 12px 96px; }
  .neelia-lupe__bild { max-width: calc(100vw - 24px); max-height: calc(100dvh - 230px); padding: 6px; }
  .neelia-lupe__knopf--zurueck,
  .neelia-lupe__knopf--weiter { top: auto; bottom: 24px; translate: none; }
  .neelia-lupe__knopf--zurueck { left: calc(50% - 60px); }
  .neelia-lupe__knopf--weiter { right: calc(50% - 60px); }
}

@media (prefers-reduced-motion: reduce) {
  .neelia-lupe[open] .neelia-lupe__bild { animation: none; }
}

/* ---------- Kontakt (neelia-kontakt.liquid, neelia-seiten.css) ---------- */

.neelia-kontakt__innen {
  padding-block: var(--neelia-rhythmus);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--neelia-abstand-8);
  align-items: start;
}

.neelia-kontakt__links,
.neelia-kontakt__laden {
  display: flex;
  flex-direction: column;
  gap: var(--neelia-abstand-5);
}

.neelia-kontakt__laden {
  padding: var(--neelia-abstand-6);
  background: #fff;
  border: 1px solid var(--neelia-linie);
  border-radius: var(--neelia-radius);
}

.neelia-kontakt__vorspann { margin: 0; max-width: 56ch; color: var(--neelia-text-leise); }
.neelia-kontakt__laden p { margin: 0; }

.neelia-kontakt__direkt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--neelia-abstand-2);
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 500;
}

.neelia-kontakt__direkt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--neelia-gold);
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.neelia-kontakt__direkt a:hover { color: var(--neelia-gold-text); }

.neelia-mehr {
  font-weight: 600;
  font-size: var(--neelia-angabe);
}
.neelia-mehr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.neelia-mehr a::after { content: " \2192"; content: " \2192" / ""; white-space: pre; }

@media screen and (max-width: 60rem) {
  .neelia-kontakt__innen { grid-template-columns: 1fr; gap: var(--neelia-abstand-7); }
}

/* ---------- Fuss (theme\assets\neelia-fuss.css, sections\neelia-footer.liquid) */

.neelia-fuss {
  background: var(--neelia-text);
  color: var(--neelia-invers);
}

.neelia-fuss__berge { display: block; width: 100%; line-height: 0; }
.neelia-fuss__berge svg { display: block; width: 100%; height: 56px; }

.neelia-fuss__innen {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--neelia-rand);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--neelia-abstand-7);
}

.neelia-fuss__marke { display: flex; flex-direction: column; gap: var(--neelia-abstand-4); }
.neelia-fuss__logo { width: 120px; height: auto; filter: invert(1); }

.neelia-fuss__satz { margin: 0; font-size: 1rem; color: var(--neelia-invers-leise); max-width: 32ch; }

.neelia-fuss__spalte { display: flex; flex-direction: column; gap: 10px; }
.neelia-label--invers { color: var(--neelia-invers-leise); }

.neelia-fuss__spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.neelia-fuss a { color: var(--neelia-invers); font-size: 1rem; }
.neelia-fuss__spalte ul a,
.neelia-fuss__adresse a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.neelia-fuss a:hover { color: #fff; text-decoration: underline; }

.neelia-fuss__adresse {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.neelia-fuss__zeiten {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.neelia-fuss__zeile { border-top: 1px solid #2a3034; }

.neelia-fuss__zeile-innen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--neelia-rand);
  font-size: var(--neelia-meta);
  color: var(--neelia-invers-leise);
}

@media screen and (max-width: 48rem) {
  .neelia-fuss__innen { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .neelia-fuss__marke,
  .neelia-fuss__spalte { align-items: center; }
  .neelia-fuss__satz { margin-inline: auto; }
  .neelia-fuss__spalte ul a,
  .neelia-fuss__adresse a { min-height: 44px; }
  .neelia-fuss__zeile-innen { text-align: center; }
}

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ----------
   Der Rechtstext bleibt im Markup unberuehrt (seotopia:baustein), er
   bekommt nur Schrift und Abstaende aus dem Seitenkopf des Shops. */
.textseite { padding: 5rem 0 var(--neelia-abstand-8); }
.textseite .huelle { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--neelia-rand); box-sizing: content-box; }
.textseite h1 {
  margin: 0 0 var(--neelia-abstand-6);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.textseite h2 { margin: 2.25rem 0 0.75rem; font-size: 1.4rem; line-height: 1.2; }
.textseite h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
.textseite h1 + p { color: var(--neelia-text-leise); }
.textseite a:where(:not([class])) { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.textseite .neelia-label { margin-bottom: var(--neelia-abstand-4); }

@media screen and (max-width: 48rem) {
  .textseite { padding-top: 3rem; }
  .textseite .huelle { max-width: none; box-sizing: border-box; }
}

@media print {
  .neelia-kopfgruppe, .neelia-sprung, .neelia-hero__bild, .neelia-hero__schatten, .neelia-goldstaub, .neelia-fuss__berge { display: none; }
  .neelia-hero { height: auto; background: none; }
  .neelia-hero__text { position: static; width: auto; height: auto; }
  .neelia-hero__titel, .neelia-hero__lead { color: #000; }
  .neelia-fuss { background: none; color: #000; }
  .neelia-collage__stempel, .neelia-collage__notiz, .neelia-lupe { display: none; }
}