/* Menanto – Website-Styles. Alle Schriften selbst gehostet (keine externen CDNs).
   Quelle: src/site.css – build.py kopiert die Datei nach public/assets/site.css. */

/* ---------- Schriften ---------- */
@font-face { font-family: "Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/fraunces-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/fraunces-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Display"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/fraunces-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Display"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/fraunces-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/playfair-display-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Display"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/playfair-display-cyrillic-400-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face { font-family: "Hebrew Sans"; font-weight: 400; font-display: swap; src: url("fonts/open-sans-hebrew-400.woff2") format("woff2"); }
@font-face { font-family: "Hebrew Sans"; font-weight: 600; font-display: swap; src: url("fonts/open-sans-hebrew-600.woff2") format("woff2"); }
@font-face { font-family: "Arabic Display"; font-weight: 500; font-display: swap; src: url("fonts/noto-kufi-arabic-arabic-500.woff2") format("woff2"); }
@font-face { font-family: "Arabic Sans"; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-arabic-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "Arabic Sans"; font-weight: 600; font-display: swap; src: url("fonts/noto-sans-arabic-arabic-600.woff2") format("woff2"); }

/* ---------- Farben & Grundwerte ---------- */
:root {
  --night: #14060f;
  --aubergine: #22081b;
  --plum-800: #3a0b2f;
  --plum: #7d0f58;
  --berry: #a8185e;
  --rose: #f0bfd6;
  --cream: #f5efe6;
  --paper: #fbf8f3;
  --text: #1d1018;
  --muted: #6e5c67;
  --hair: rgba(29, 16, 24, .09);
  --hair-light: rgba(255, 255, 255, .12);
  --tint-sand: #efe2cd; --tint-sage: #dde6d1; --tint-blush: #f3dce6;
  --tint-coral: #f6d8cc; --tint-lemon: #efe9c2; --tint-lilac: #e5ddef;
  --display: "Display", "Iowan Old Style", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --wrap: 1240px;
  --r-xl: 2rem;
  --soft-shadow: 0 2px 4px rgba(34, 8, 27, .04), 0 30px 60px -30px rgba(34, 8, 27, .28);
}
:lang(he) { --body: "Hebrew Sans", system-ui, sans-serif; --display: "Hebrew Sans", system-ui, sans-serif; }
:lang(ar) { --body: "Arabic Sans", Tahoma, sans-serif; --display: "Arabic Display", "Arabic Sans", Tahoma, sans-serif; }
:lang(zh) { --body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            --display: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--body); font-size: 1.0625rem;
  line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
:lang(ar) body, :lang(he) body { line-height: 1.85; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; border-radius: 6px; }

/* Feine Papierstruktur über der ganzen Seite */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 16px; top: -80px; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 100; }
.skip:focus { top: 16px; }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.06; letter-spacing: -.025em; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--berry); }
.dark h1 em, .dark h2 em { color: var(--rose); }
:lang(he) h1, :lang(ar) h1, :lang(zh) h1, :lang(he) h2, :lang(ar) h2, :lang(zh) h2 { letter-spacing: 0; line-height: 1.3; }
:lang(he) h1 em, :lang(ar) h1 em, :lang(zh) h1 em { font-style: normal; }

.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px 6px 12px; margin-bottom: 26px;
  font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  color: var(--plum); background: rgba(125, 15, 88, .07); box-shadow: inset 0 0 0 1px rgba(125, 15, 88, .12); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dark .pill { color: var(--rose); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-light); }
:lang(he) .pill, :lang(ar) .pill, :lang(zh) .pill { letter-spacing: .02em; font-size: .85rem; }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--muted); max-width: 56ch; }
.dark { color: rgba(255, 255, 255, .92); }
.dark .lead, .dark p { color: rgba(255, 255, 255, .7); }
.dark h1, .dark h2, .dark h3 { color: #fff; }

/* ---------- Buttons (Pill mit Icon-Insel) ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 7px 7px 7px 26px; border-radius: 999px;
  font: 600 .98rem/1.2 var(--body); text-decoration: none; border: 0; cursor: pointer;
  transition: transform .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
[dir="rtl"] .btn { padding: 7px 26px 7px 7px; }
.btn .i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; transition: transform .5s var(--ease); }
.btn .i svg { width: 18px; height: 18px; }
.btn:hover .i { transform: translateX(3px) translateY(-1px) scale(1.06); }
[dir="rtl"] .btn:hover .i { transform: translateX(-3px) translateY(-1px) scale(1.06); }
[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--plum); color: #fff; box-shadow: 0 14px 30px -14px rgba(125, 15, 88, .7); }
.btn-primary .i { background: rgba(255, 255, 255, .16); }
.btn-primary:hover { background: var(--berry); }
.btn-light { background: #fff; color: var(--aubergine); }
.btn-light .i { background: var(--plum); color: #fff; }
.btn-light:hover { background: var(--cream); }
.btn-quiet, [dir="rtl"] .btn-quiet { padding: 7px 26px; background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(29, 16, 24, .25); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1.5px var(--plum); color: var(--plum); }
.dark .btn-quiet { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.dark .btn-quiet:hover { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; background: rgba(255, 255, 255, .06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Doppelrahmen ---------- */
.bezel { padding: 7px; border-radius: var(--r-xl); background: rgba(29, 16, 24, .035); box-shadow: inset 0 0 0 1px var(--hair); }
.bezel > .core { border-radius: calc(var(--r-xl) - 7px); overflow: hidden; background: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), var(--soft-shadow); }
.bezel.on-dark { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-light); }
.bezel.on-dark > .core { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .7); }

/* ---------- Navigation (schwebende Insel) ---------- */
.nav-wrap { position: fixed; top: 14px; inset-inline: 0; z-index: 60; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; }
.nav-island { pointer-events: auto; display: flex; align-items: center; gap: 18px; width: min(var(--wrap), 100%); padding: 7px 7px 7px 22px;
  border-radius: 999px; background: rgba(251, 248, 243, .8); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 40px -18px rgba(34, 8, 27, .4); }
[dir="rtl"] .nav-island { padding: 7px 22px 7px 7px; }
.brand { flex: none; }
.brand img { height: 36px; width: auto; }
.nav-links { display: flex; gap: 2px; margin-inline-start: auto; }
.nav-links a { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--text);
  transition: background-color .4s var(--ease), color .4s var(--ease); white-space: nowrap; }
.nav-links a:hover { background: rgba(125, 15, 88, .07); color: var(--plum); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-actions .btn { min-height: 46px; padding: 5px 5px 5px 18px; font-size: .9rem; gap: 10px; white-space: nowrap; }
[dir="rtl"] .nav-actions .btn { padding: 5px 18px 5px 5px; }
.nav-actions .btn .i { width: 36px; height: 36px; }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px;
  font-weight: 600; font-size: .85rem; letter-spacing: .06em; transition: background-color .4s var(--ease); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: rgba(125, 15, 88, .07); }
.lang summary svg { width: 18px; height: 18px; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); list-style: none; margin: 0; padding: 8px; min-width: 190px;
  background: rgba(251, 248, 243, .97); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -20px rgba(34, 8, 27, .4);
  animation: pop .45s var(--ease); }
.lang li a { display: block; padding: 9px 14px; border-radius: 14px; text-decoration: none; font-size: .95rem; }
.lang li a:hover { background: rgba(125, 15, 88, .07); }
.lang li a[aria-current] { color: var(--plum); font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--aubergine); cursor: pointer; position: relative; flex: none; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .55s var(--ease); }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.menu-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(20, 6, 15, .92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 110px 28px 40px;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.menu-open .menu-overlay { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
.menu-overlay .big { font-family: var(--display); font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: 1.2; color: #fff; text-decoration: none;
  transform: translateY(40px); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.menu-open .menu-overlay .big { transform: none; opacity: 1; }
.menu-overlay .big:nth-child(2) { transition-delay: .06s; } .menu-overlay .big:nth-child(3) { transition-delay: .12s; }
.menu-overlay .big:nth-child(4) { transition-delay: .18s; } .menu-overlay .big:nth-child(5) { transition-delay: .24s; }
.menu-overlay .btn { margin-top: 30px; transform: translateY(40px); opacity: 0; transition: transform .8s var(--ease) .3s, opacity .8s var(--ease) .3s; }
.menu-open .menu-overlay .btn { transform: none; opacity: 1; }

@media (max-width: 1060px) {
  .nav-links, .nav-actions .btn-dealer { display: none; }
  .nav-actions { margin-inline-start: auto; }
  .burger { display: block; }
}
@media (min-width: 1061px) { .menu-overlay { display: none; } }

/* ---------- Bereiche ---------- */
section { padding-block: clamp(96px, 12vw, 168px); position: relative; }
.head { max-width: 820px; margin-bottom: clamp(48px, 6vw, 80px); }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lead { margin-inline: auto; }
.bg-cream { background: var(--cream); }

/* Hero mit Regal-Laufband */
.hero { background: var(--aubergine); padding-top: clamp(130px, 13vw, 160px); padding-bottom: 0; text-align: center; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: 1600px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(168, 24, 94, .5), transparent 62%); }
.hero .pill { margin-inline: auto; }
.hero h1 { font-size: clamp(2.9rem, 7.2vw, 7.2rem); line-height: .98; max-width: 12ch; margin: 0 auto .35em; }
:lang(he) .hero h1, :lang(ar) .hero h1, :lang(zh) .hero h1 { line-height: 1.2; }
.hero .lead { margin-inline: auto; }
.hero .btn-row { justify-content: center; }

.shelf { --s: 1; position: relative; margin-top: clamp(28px, 4vw, 44px); height: calc(330px * var(--s)); }
.shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 64px; height: 260px;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(240, 191, 214, .16), transparent 70%); }
.board { position: absolute; left: 0; right: 0; bottom: 52px; height: 16px;
  background: linear-gradient(180deg, #6d1a54 0%, #4d0f3b 100%); box-shadow: 0 -1px 0 rgba(255, 255, 255, .18); }
.rail { position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  background: linear-gradient(180deg, #2b0a23 0%, #1b0616 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 -12px 30px -10px rgba(0, 0, 0, .6); }
.rail::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 30px; background: rgba(255, 255, 255, .035); }
.band { position: absolute; inset: 0; overflow: hidden; direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.band-track { display: flex; align-items: flex-end; gap: calc(46px * var(--s)); height: 100%; width: max-content; animation: marquee 60s linear infinite; }
.shelf:hover .band-track { animation-play-state: paused; }
.facing { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; padding: 0 20px 60px; }
.facing img { height: calc(var(--h) * var(--s)); width: auto; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .45)); position: relative; z-index: 1; }
.facing::before { content: ""; position: absolute; bottom: 56px; left: 18%; right: 18%; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); }
.tag { position: absolute; bottom: 9px; display: flex; align-items: stretch; height: 34px; border-radius: 4px; overflow: hidden; background: #fbf8f3;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.tag::before { content: ""; width: 6px; background: var(--berry); }
.tag b { font: 600 .74rem/34px var(--body); color: var(--aubergine); padding: 0 12px 0 9px; white-space: nowrap; }
.tag i { width: 26px; margin: 8px 8px 8px 0; opacity: .5;
  background: repeating-linear-gradient(90deg, #241520 0 1px, transparent 1px 3px, #241520 3px 5px, transparent 5px 6px); }
@media (max-width: 700px) {
  .shelf { --s: .68; }
  .shelf::before { bottom: 50px; }
  .board { bottom: 42px; height: 12px; } .rail { height: 42px; }
  .facing { padding: 0 14px 48px; } .facing::before { bottom: 44px; }
  .tag { bottom: 6px; height: 30px; } .tag b { line-height: 30px; font-size: .68rem; padding: 0 8px 0 7px; } .tag i { width: 18px; margin: 7px 6px 7px 0; }
}

/* Laufband */
.marquee { overflow: hidden; direction: ltr; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 40s linear infinite; list-style: none; margin: 0; padding: 0; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 50s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }
.logo-tile { display: grid; place-items: center; width: 176px; height: 84px; padding: 16px 24px; border-radius: 20px; background: #fff; flex: none; }
.logo-tile img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand-tile { display: grid; place-items: center; width: 196px; height: 108px; padding: 18px 26px; border-radius: 24px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair); flex: none; }
.brand-tile img { max-height: 58px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .7;
  transition: filter .6s var(--ease), opacity .6s var(--ease); }
.brand-tile:hover img { filter: none; opacity: 1; }

/* Für wen */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.duo > :nth-child(2) { margin-top: clamp(0px, 9vw, 140px); }
.story-media { position: relative; overflow: hidden; }
.story-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.4s var(--ease); }
.story:hover .story-media img { transform: scale(1.04); }
.story-media img.pos-top { object-position: 50% 12%; }
.story-num { position: absolute; top: 18px; inset-inline-start: 18px; font-family: var(--display); font-size: 1rem; color: #fff;
  background: rgba(20, 6, 15, .6); border-radius: 999px; padding: 5px 14px; }
.story-body { padding: clamp(26px, 3.4vw, 44px); }
.story-body .pill { margin-bottom: 18px; }
.story-body p { color: var(--muted); }
.story-body .btn { margin-top: 10px; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } .duo > :nth-child(2) { margin-top: 0; } }

/* Händler */
.dealer { background: var(--aubergine); overflow: hidden; isolation: isolate; }
.dealer::before { content: ""; position: absolute; z-index: -1; inset-inline-end: -300px; bottom: -500px; width: 1000px; height: 1000px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 24, 94, .45), transparent 65%); }
.dealer .core { background: linear-gradient(135deg, var(--plum) 0%, #5a0b40 55%, var(--plum-800) 100%); }
.dealer-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px; padding: clamp(32px, 6vw, 80px); }
.dealer .core p { color: rgba(255, 255, 255, .8); max-width: 50ch; font-size: 1.12rem; }
.dealer .btn-row { margin-top: 30px; }
.consumer-link { margin: 26px 0 0; font-size: .92rem !important; }
.consumer-link a { color: rgba(255, 255, 255, .85); text-underline-offset: 4px; }
.products { position: relative; min-height: 380px; }
.products img { position: absolute; width: 38%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); transition: transform 1.2s var(--ease); }
.products img:nth-child(1) { left: 2%; bottom: 6%; transform: rotate(-9deg); }
.products img:nth-child(2) { left: 31%; top: 0; width: 40%; transform: rotate(3deg); z-index: 1; }
.products img:nth-child(3) { right: 0; bottom: 3%; transform: rotate(10deg); }
.dealer .core:hover .products img:nth-child(1) { transform: rotate(-12deg) translateY(-10px); }
.dealer .core:hover .products img:nth-child(2) { transform: rotate(1deg) translateY(-6px); }
.dealer .core:hover .products img:nth-child(3) { transform: rotate(13deg) translateY(-10px); }
@media (max-width: 860px) { .dealer-grid { grid-template-columns: 1fr; } .products { min-height: 300px; max-width: 420px; width: 100%; margin-inline: auto; } }

/* Leistungen – Bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bento > * { min-width: 0; }
.b-text { grid-column: span 7; grid-row: span 2; }
.b-text .core { padding: clamp(28px, 4vw, 56px); height: 100%; }
.b-text .core p { color: var(--muted); }
.b-img { grid-column: span 5; grid-row: span 2; }
.b-img .core { height: 100%; }
.b-img img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 50% 30%; }
.b-facts { grid-column: span 5; }
.b-facts .core { background: var(--aubergine); height: 100%; padding: 26px 32px; display: grid; align-content: center; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair-light); }
.fact:last-child { border-bottom: 0; }
.fact strong { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; color: #fff; }
.fact span { color: rgba(255, 255, 255, .6); font-size: .9rem; text-align: end; }
@media (max-width: 900px) { .b-text, .b-img, .b-facts { grid-column: 1 / -1; grid-row: auto; } }

/* Sortiment – Bento mit Farbtönen */
.range-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.range-item { grid-column: span 4; }
.range-item .core { height: 100%; display: grid; grid-template-rows: 1fr auto; background: var(--tint, #fff); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); }
.range-item:nth-child(1) { grid-column: span 5; grid-row: span 2; --tint: var(--tint-sand); }
.range-item:nth-child(2) { grid-column: span 7; --tint: var(--tint-sage); }
.range-item:nth-child(3) { grid-column: span 7; --tint: var(--tint-blush); }
.range-item:nth-child(4) { --tint: var(--tint-coral); }
.range-item:nth-child(5) { --tint: var(--tint-lemon); }
.range-item:nth-child(6) { --tint: var(--tint-lilac); }
.range-media { display: grid; place-items: center; padding: 30px 28px 0; min-height: 220px; }
.range-media img { max-height: 220px; width: auto; max-width: 80%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(34, 8, 27, .22));
  transition: transform 1.1s var(--ease); }
.range-item:nth-child(1) .range-media img { max-height: 420px; }
.range-item:hover .range-media img { transform: translateY(-8px) rotate(-2deg) scale(1.03); }
.range-item:nth-child(2) .core, .range-item:nth-child(3) .core { grid-template-rows: 1fr; grid-template-columns: .9fr 1.1fr; align-items: center; }
.range-item:nth-child(2) .range-media, .range-item:nth-child(3) .range-media { padding: 24px; min-height: 240px; }
.range-body { padding: 22px 28px 28px; }
.range-body h3 { margin-bottom: .3em; }
.range-body p { color: rgba(29, 16, 24, .68); font-size: .97rem; margin: 0; }
.range-num { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .16em; color: rgba(29, 16, 24, .42); margin-bottom: 10px; }
.range-cta { margin-top: 48px; display: flex; justify-content: center; }
@media (max-width: 1000px) {
  .range-item, .range-item:nth-child(n) { grid-column: span 6; grid-row: auto; }
  .range-item:nth-child(2) .core, .range-item:nth-child(3) .core { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .range-item:nth-child(1) .range-media img { max-height: 240px; }
}
@media (max-width: 640px) { .range-item, .range-item:nth-child(n) { grid-column: 1 / -1; } }

/* Partner */
.partners { background: #fff; padding-block: clamp(80px, 10vw, 128px); }
.partners .head { margin-bottom: 44px; }

/* Prinzipien */
.principles-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.sticky { position: sticky; top: 130px; }
.sticky p { color: var(--muted); }
.numbered { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; padding: 24px 0;
  border-bottom: 1px solid var(--hair); font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.3; }
.numbered li:first-child { border-top: 1px solid var(--hair); }
.numbered li::before { content: "0" counter(n); font-family: var(--body); font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--berry); }
.claim .core { background: var(--aubergine); padding: clamp(28px, 4vw, 48px); }
.claim h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.claim .core p { color: rgba(255, 255, 255, .72); }
.claim .pill { color: var(--rose); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-light); }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--hair-light); font-size: .95rem; font-weight: 600; color: #fff; line-height: 1.45; }
.checks svg { width: 20px; height: 20px; color: var(--rose); flex: none; margin-top: 1px; }
@media (max-width: 900px) { .principles-grid { grid-template-columns: 1fr; } .sticky { position: static; } }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }

/* Kontakt */
.contact { background: var(--night); overflow: hidden; isolation: isolate; }
.contact::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; inset-inline-start: -320px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 15, 88, .45), transparent 65%); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-or { margin: 36px 0 14px; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5) !important; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-list li { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 20px; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--hair-light); transition: background-color .5s var(--ease); }
.contact-list li:hover { background: rgba(255, 255, 255, .07); }
.contact-list .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(240, 191, 214, .1); color: var(--rose); flex: none; }
.contact-list svg { width: 20px; height: 20px; }
.contact-list small { display: block; color: rgba(255, 255, 255, .5); font-size: .78rem; }
.contact-list a, .contact-list .v { color: #fff; text-decoration: none; font-weight: 600; }
[dir="rtl"] .ltr-value { direction: ltr; unicode-bidi: isolate; }
.contact-form { display: grid; gap: 16px; padding: clamp(24px, 3.6vw, 44px); color: var(--text); }
.contact-form h3 { margin: 0 0 6px; }
.contact-form label { display: grid; gap: 7px; font-weight: 600; font-size: .88rem; }
.contact-form abbr { color: var(--berry); text-decoration: none; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; color: var(--text); width: 100%; min-height: 52px;
  border: 0; border-radius: 16px; padding: 13px 16px; background: var(--cream); transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--plum), 0 0 0 5px rgba(125, 15, 88, .1); }
[dir="rtl"] .contact-form input[dir="ltr"] { text-align: right; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .84rem; color: var(--muted) !important; margin: 0; }
.form-note a { color: var(--plum); }
.contact-form .btn { justify-self: start; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } .contact-form .btn { justify-self: stretch; justify-content: space-between; } }

/* Footer */
.site-footer { background: var(--night); color: rgba(255, 255, 255, .65); padding-top: 72px; overflow: hidden; font-size: .95rem; border-top: 1px solid var(--hair-light); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.footer-logo { display: inline-block; background: #fff; border-radius: 18px; padding: 10px 14px; margin-bottom: 18px; }
.footer-logo img { height: 40px; width: auto; }
.site-footer p { color: rgba(255, 255, 255, .6); max-width: 40ch; }
.site-footer h3 { font-family: var(--body); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .4s var(--ease); }
.site-footer a:hover { color: #fff; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-light);
  transition: background-color .4s var(--ease); }
.social a:hover { background: rgba(255, 255, 255, .08); }
.social svg { width: 18px; height: 18px; }
.legal-note { font-size: .85rem; color: rgba(255, 255, 255, .45) !important; margin-top: 10px; }
.footer-bottom { margin-top: 56px; padding-block: 22px; border-top: 1px solid var(--hair-light); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; }
.wordmark { font-family: "Display", Georgia, serif; font-weight: 500; font-size: clamp(5rem, 21vw, 19rem); line-height: .78; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .12); text-align: center; margin: 28px 0 -.1em; user-select: none; direction: ltr; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

/* Rechtstexte & Hinweisseiten */
.page-top { padding-top: clamp(130px, 14vw, 170px); }
.legal { padding-bottom: clamp(80px, 10vw, 128px); background: var(--cream); }
.legal .core { padding: clamp(26px, 5vw, 64px); }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.legal h2 { font-size: 1.4rem; margin-top: 1.8em; }
.legal h3 { font-size: 1.15rem; margin-top: 1.4em; }
.legal ul { padding-inline-start: 1.3em; margin: 0 0 1em; }
.legal a { color: var(--plum); }
.legal-sub { font-weight: 600; color: var(--muted); }
.legal-wrap { max-width: 900px; }
.notice { min-height: 78vh; display: grid; place-items: center; text-align: center; background: var(--aubergine); overflow: hidden; isolation: isolate; }
.notice::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 24, 94, .45), transparent 65%); }
.notice .lead { margin-inline: auto; }
.notice .btn { margin-top: 12px; }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(48px); filter: blur(8px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee-track [aria-hidden="true"] { display: none; }
}

/* ---------- Katalog-Teaser (Startseite) ---------- */
.catalog-teaser { background: var(--cream); overflow: hidden; }
.catalog-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.catalog-covers { position: relative; height: clamp(380px, 46vw, 560px); }
.catalog-covers a { position: absolute; top: 50%; left: 50%; width: 56%; display: block; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(34, 8, 27, .08), 0 40px 70px -30px rgba(34, 8, 27, .55); transition: transform 1.1s var(--ease); }
.catalog-covers a:nth-child(1) { transform: translate(-82%, -46%) rotate(-8deg); }
.catalog-covers a:nth-child(2) { transform: translate(-18%, -54%) rotate(6deg); }
.catalog-covers a:nth-child(3) { transform: translate(-50%, -50%) rotate(-1deg); z-index: 1; }
.catalog-covers:hover a:nth-child(1) { transform: translate(-92%, -48%) rotate(-11deg); }
.catalog-covers:hover a:nth-child(2) { transform: translate(-8%, -56%) rotate(9deg); }
.catalog-covers:hover a:nth-child(3) { transform: translate(-50%, -53%) rotate(0deg); }
.catalog-covers img { width: 100%; height: auto; }
.catalog-teaser .lead { margin-bottom: 2em; }
@media (max-width: 860px) { .catalog-grid { grid-template-columns: 1fr; } .catalog-covers { order: -1; max-width: 460px; width: 100%; margin-inline: auto; } }

/* ---------- Blätter-Katalog ---------- */
.catalog-page { background: var(--aubergine); padding-top: 104px; padding-bottom: 48px; min-height: 100dvh; overflow: hidden; isolation: isolate; }
.catalog-page::before { content: ""; position: absolute; z-index: -1; width: 1100px; height: 1100px; left: 50%; top: 45%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(168, 24, 94, .38), transparent 62%); }
.catalog-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 22px; }
.catalog-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 0; }
.catalog-head .pill { margin-bottom: 12px; }
.catalog-head .note { color: rgba(255, 255, 255, .55); font-size: .9rem; margin: 6px 0 0; }

.flipbook { direction: ltr; }
.flipbook:fullscreen { background: var(--aubergine); display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.stage { display: grid; place-items: center; height: calc(100dvh - 300px); min-height: 380px; }
.flipbook:fullscreen .stage { height: calc(100dvh - 110px); }
.book { position: relative; height: 100%; aspect-ratio: 1191 / 842; max-width: 100%; perspective: 2600px; cursor: pointer;
  transition: transform .9s var(--ease); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.book.only-right { transform: translateX(-25%); }
.book.only-left { transform: translateX(25%); }
.slot, .flipper { position: absolute; top: 0; height: 100%; width: 50%; }
.slot-left { left: 0; } .slot-right { left: 50%; }
.slot img, .face img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.slot { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.slot.empty { visibility: hidden; }
.slot-left { border-radius: 6px 0 0 6px; overflow: hidden; }
.slot-right { border-radius: 0 6px 6px 0; overflow: hidden; }
/* Bundsteg-Schatten */
.slot-left::after, .slot-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.slot-left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .16)); }
.slot-right::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .2)); }
.flipper { transform-style: preserve-3d; z-index: 3; will-change: transform; }
.flipper[hidden] { display: none; }
.flipper.on-right { left: 50%; transform-origin: left center; }
.flipper.on-left { left: 0; transform-origin: right center; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face.back { transform: rotateY(180deg); }
.face.empty { background: #f4efe8; }
.face.empty img { visibility: hidden; }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: shade .95s cubic-bezier(.45, .05, .2, 1); }
.flipper.on-right .front::after, .flipper.single .front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 60%); }
.flipper.on-right .back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .28), transparent 60%); }
.flipper.on-left .front::after { background: linear-gradient(270deg, rgba(0, 0, 0, .28), transparent 60%); }
.flipper.on-left .back::after { background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 60%); }
@keyframes shade { 50% { opacity: 1; } }

/* Einzelseiten (Handy) */
.flipbook:not(.is-double) .book { aspect-ratio: 595 / 842; transform: none; }
.flipbook:not(.is-double) .slot-left { display: none; }
.flipbook:not(.is-double) .slot-right, .flipper.single { left: 0; width: 100%; border-radius: 6px; }
.flipper.single { transform-origin: left center; }

.fb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; color: #fff; }
.fb-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--hair-light); transition: background-color .4s var(--ease), transform .4s var(--ease); }
.fb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.fb-btn:active:not(:disabled) { transform: scale(.94); }
.fb-btn:disabled { opacity: .3; cursor: default; }
.fb-btn svg { width: 20px; height: 20px; }
.fb-prev svg { transform: scaleX(-1); }
.fb-btn.big { width: 56px; height: 56px; background: #fff; color: var(--aubergine); }
.fb-btn.big:hover:not(:disabled) { background: var(--cream); }
.fb-counter { min-width: 150px; text-align: center; font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; }
.fb-range { width: min(320px, 60vw); accent-color: var(--rose); }
.fb-tools { display: flex; gap: 8px; }
.fb-hint { text-align: center; color: rgba(255, 255, 255, .45); font-size: .82rem; margin: 14px 0 0; }
.flipbook:not(.ready) .fb-bar, .flipbook:not(.ready) .stage { visibility: hidden; }

/* Dialoge: Übersicht & Zoom */
.fb-dialog { border: 0; padding: 0; width: min(1200px, 100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 24px; background: var(--paper);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .7); }
.fb-dialog::backdrop { background: rgba(20, 6, 15, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fb-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; background: rgba(251, 248, 243, .94); border-bottom: 1px solid var(--hair); }
.fb-dialog-head h2 { font-size: 1.3rem; margin: 0; }
.fb-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--aubergine); color: #fff; cursor: pointer; font-size: 1.4rem; line-height: 1; }
.fb-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; padding: 20px; }
.fb-thumbs button { border: 0; padding: 0; background: none; cursor: pointer; text-align: center; font: 600 .8rem var(--body); color: var(--muted); }
.fb-thumbs img { width: 100%; aspect-ratio: 595 / 842; object-fit: cover; border-radius: 6px; margin-bottom: 6px; background: var(--cream);
  box-shadow: 0 10px 24px -14px rgba(34, 8, 27, .5); transition: transform .5s var(--ease); }
.fb-thumbs button:hover img { transform: translateY(-4px); }
.fb-zoom-body { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 20px; }
.fb-zoom-body img { width: min(100%, 900px); height: auto; border-radius: 6px; }
@media (max-width: 899px) {
  .catalog-page { padding-top: 92px; }
  .stage { height: auto; min-height: 0; }
  .book { height: auto; width: min(100%, calc((100dvh - 360px) * .707)); }
  .catalog-head h1 { font-size: 1.7rem; }
  .catalog-head .btn { min-height: 46px; padding-block: 4px; }
  .fb-hint { display: none; }
  .fb-range { order: 5; width: 100%; }
}
.range-item:nth-child(n+4) .core { grid-template-rows: 250px 1fr; }
.range-item:nth-child(n+4) .range-media { min-height: 0; }
@media (max-width: 1000px) { .range-item .core, .range-item:nth-child(n+4) .core { grid-template-rows: 250px 1fr; } .range-item .range-media { min-height: 0; } }

/* ---------- Vertriebskanäle ---------- */
.channels-head { display: flex; align-items: center; gap: 28px; margin: clamp(72px, 9vw, 120px) 0 28px; }
.channels-title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); white-space: nowrap; }
.channels-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair), transparent); }
[dir="rtl"] .channels-line { background: linear-gradient(270deg, var(--hair), transparent); }
.channel-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.channel .core { --tint: var(--tint-sand); --ink: var(--plum); position: relative; overflow: hidden; height: 100%; min-height: 360px;
  display: flex; flex-direction: column; padding: 26px 26px 30px; background: var(--tint); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.channel:nth-child(2) .core { --tint: var(--tint-coral); --ink: #a8361f; }
.channel:nth-child(3) .core { --tint: var(--tint-sage); --ink: #3f6b2f; }
.channel:nth-child(4) .core { --tint: var(--tint-lilac); --ink: #5b3f8f; }
.channel:hover .core { transform: translateY(-6px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 30px 60px -30px rgba(34, 8, 27, .35); }
.ch-mark { position: absolute; inset-inline-end: -36px; bottom: 70px; width: 210px; height: 210px; color: var(--ink); opacity: .09;
  transform: rotate(-8deg); transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); pointer-events: none; }
.ch-mark svg { width: 100%; height: 100%; stroke-width: 1; }
.channel:hover .ch-mark { transform: rotate(0deg) scale(1.06); opacity: .14; }
.ch-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.ch-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 12px 24px -14px rgba(34, 8, 27, .45); transition: background-color .6s var(--ease), color .6s var(--ease), transform .8s var(--ease); }
.ch-icon svg { width: 30px; height: 30px; }
.channel:hover .ch-icon { background: var(--ink); color: #fff; transform: rotate(-6deg); }
.ch-num { font-size: .78rem; font-weight: 600; letter-spacing: .16em; color: var(--ink); opacity: .7; }
.ch-body { margin-top: auto; position: relative; }
.channel h4 { font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.15; margin: 0 0 .55em;
  min-height: 2.3em; display: flex; align-items: flex-end; color: var(--text); }
.channel p { color: rgba(29, 16, 24, .7); font-size: .95rem; line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .channel-grid { grid-template-columns: repeat(2, 1fr); } .channel .core { min-height: 300px; } }
@media (max-width: 560px) { .channel-grid { grid-template-columns: 1fr; } .channel .core { min-height: 0; } .ch-body { margin-top: 40px; } .channel h4 { min-height: 0; } }

/* ---------- Presse ---------- */
.press-section { padding-block: clamp(72px, 9vw, 120px); }
.press-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(32px, 5vw, 72px); background: var(--aubergine) !important; color: #fff; position: relative; isolation: isolate; }
.press-card::before { content: ""; position: absolute; z-index: -1; width: 700px; height: 700px; left: -200px; top: -300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 24, 94, .5), transparent 65%); }
.press-card .pill { color: var(--rose); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-light); }
.press-card blockquote { margin: 0; font-family: "Display", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.press-meta h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: #fff; margin-bottom: .4em; }
.press-meta p { color: rgba(255, 255, 255, .72); }
.press-kind { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--rose) !important; }
.press-note { display: block; margin-top: 12px; font-size: .82rem; color: rgba(255, 255, 255, .5); }
@media (max-width: 860px) { .press-card { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .hero { padding-top: 112px; }
  .hero .pill { font-size: .62rem; letter-spacing: .1em; }
  :lang(he) .hero .pill, :lang(ar) .hero .pill, :lang(zh) .hero .pill { font-size: .78rem; letter-spacing: 0; }
}

/* ---------- Listungen (ruhiger Bereich direkt unter dem Hero) ---------- */
.listings-sec { padding-block: clamp(64px, 7vw, 96px) clamp(36px, 4vw, 52px); background: var(--paper); text-align: center; }
.ls-label { font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(26px, 3vw, 36px); }
:lang(he) .ls-label, :lang(ar) .ls-label, :lang(zh) .ls-label { letter-spacing: .02em; font-size: .92rem; }
.ls-logos { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ls-logos img { height: 34px; width: auto; filter: grayscale(1) contrast(1.15); opacity: .55; mix-blend-mode: multiply;
  transition: filter .6s var(--ease), opacity .6s var(--ease), transform .6s var(--ease); }
.ls-logos img[src*="globus"] { height: 46px; }
.ls-logos img[src*="spar"], .ls-logos img[src*="kaufland"] { height: 29px; }
.ls-logos li:hover img { filter: none; opacity: 1; transform: translateY(-2px); }
.ls-facts { margin: clamp(36px, 4vw, 48px) auto 0; padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--hair); max-width: 1080px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; color: var(--muted); font-size: 1rem; }
.ls-facts span { white-space: nowrap; }
.ls-facts span + span::before { content: "·"; margin: 0 14px; color: rgba(29, 16, 24, .25); }
.ls-facts b { font-family: var(--display); font-weight: 500; font-size: 1.4rem; color: var(--plum); margin-inline-end: 4px; }
/* nachfolgender Bereich rückt näher – keine Lücke unter den Listungen */
.listings-sec + section { padding-top: clamp(36px, 4vw, 52px); }
@media (max-width: 860px) {
  .ls-logos { flex-wrap: wrap; justify-content: center; gap: 22px 0; }
  .ls-logos li { flex: 0 0 25%; display: grid; place-items: center; }
  .ls-logos img { height: 24px; max-width: 100%; } .ls-logos img[src*="globus"] { height: 32px; }
  .ls-logos img[src*="spar"], .ls-logos img[src*="kaufland"] { height: 20px; }
  .ls-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; text-align: center; }
  .ls-facts span { white-space: normal; } .ls-facts span + span::before { display: none; }
  .ls-facts b { display: block; margin: 0; }
}

/* ---------- Handelsagentur ---------- */
.agency-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.agency-intro { position: sticky; top: 120px; }
.agency-intro .lead { margin-bottom: 1.6em; }
.agency-photo { margin-top: 44px; max-width: 520px; rotate: -2deg; }
[dir="rtl"] .agency-photo { rotate: 2deg; }
.agency-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.agency-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.agency-steps::before { content: ""; position: absolute; top: 40px; bottom: 40px; inset-inline-start: 39px; width: 1px;
  background: linear-gradient(180deg, var(--plum), rgba(125, 15, 88, .1)); }
.step { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 22px; align-items: start; padding: 26px 28px 26px 0;
  background: #fff; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--hair), var(--soft-shadow); }
[dir="rtl"] .step { padding: 26px 0 26px 28px; }
.step-num { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -2px;
  border-radius: 50%; background: var(--aubergine); color: #fff; font-family: var(--display); font-size: 1.05rem; box-shadow: 0 0 0 8px #fff; }
.step h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-bottom: .35em; }
.step p { color: var(--muted); margin: 0; }
.step:hover .step-num { background: var(--berry); }
@media (max-width: 900px) {
  .agency-grid { grid-template-columns: 1fr; } .agency-intro { position: static; }
  .agency-photo { display: none; }
}
@media (max-width: 520px) {
  .step { grid-template-columns: 60px 1fr; gap: 12px; padding-inline-end: 20px; }
  .agency-steps::before { inset-inline-start: 29px; }
  .step-num { width: 44px; height: 44px; }
}

/* ---------- Händler auf einen Blick ---------- */
.dealer-facts { grid-column: 1 / -1; margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--hair-light); }
.dealer-facts h3 { font-size: 1.15rem; margin-bottom: 16px; color: #fff; }
.dealer-facts dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.dealer-facts dl > div { padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-light); }
.dealer-facts dt { font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; color: #fff; }
.dealer-facts dd { margin: 6px 0 0; font-size: .86rem; color: rgba(255, 255, 255, .7); }
.dealer-note { margin: 14px 0 0 !important; font-size: .78rem !important; color: rgba(255, 255, 255, .5) !important; max-width: none !important; }
@media (max-width: 860px) { .dealer-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Herkunft & Liefergebiet ---------- */
.reach { background: var(--paper); overflow: hidden; }
.reach-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.reach-sub { font-family: var(--body); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 30px 0 12px; }
:lang(he) .reach-sub, :lang(ar) .reach-sub, :lang(zh) .reach-sub { letter-spacing: .02em; font-size: .9rem; }
.origin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.origin-list li { padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: .9rem; font-weight: 600; }
.legend { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .85rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.lg-hub { background: var(--aubergine); box-shadow: 0 0 0 3px rgba(168, 24, 94, .25); }
.lg-region { background: #d98bb0; }
.lg-origin { background: #fff; box-shadow: inset 0 0 0 2.5px var(--plum); }
.map { margin: 0; }
.map-inner { position: relative; direction: ltr; }
.map-inner img { width: 100%; height: auto; }
.mlabel { position: absolute; transform: translate(-50%, -150%); white-space: nowrap; font-size: .78rem; font-weight: 600; color: var(--plum);
  background: rgba(251, 248, 243, .92); padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 10px -6px rgba(34, 8, 27, .4); pointer-events: none; }
.mlabel.edge { transform: translate(-100%, -150%); }
.mlabel.hub { background: var(--aubergine); color: #fff; transform: translate(-50%, 70%); font-size: .8rem; }
.map figcaption { margin-top: 8px; font-size: .72rem; color: var(--muted); text-align: end; opacity: .7; }
@media (max-width: 900px) { .reach-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mlabel { font-size: .62rem; padding: 2px 6px; } .mlabel.hub { font-size: .6rem; padding: 2px 7px; transform: translate(-50%, 55%); } }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid > div:first-child { position: sticky; top: 130px; }
.text-link { color: var(--plum); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq-list { display: grid; gap: 10px; }
.faq-item { background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .5s var(--ease); }
.faq-item[open] { box-shadow: inset 0 0 0 1px rgba(125, 15, 88, .25), var(--soft-shadow); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.3; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cream); transition: background-color .4s var(--ease), transform .6s var(--ease); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--plum); transform: translate(-50%, -50%); }
.faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--ease); }
.faq-item[open] .faq-plus { background: var(--plum); transform: rotate(180deg); }
.faq-item[open] .faq-plus::before, .faq-item[open] .faq-plus::after { background: #fff; }
.faq-item[open] .faq-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item p { margin: 0; padding: 0 24px 24px; color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > div:first-child { position: static; } }

/* ---------- Seriositäts-Zeile ---------- */
.trust-row { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.trust-row li { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255, 255, 255, .7); }
.trust-row svg { width: 18px; height: 18px; color: var(--rose); flex: none; }
.dark .contact-form h3 { color: var(--text); }

/* ---------- Geschäftsführer-Statement ---------- */
.ceo { background: var(--paper); }
.ceo-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.ceo-photo { rotate: -2deg; max-width: 440px; }
[dir="rtl"] .ceo-photo { rotate: 2deg; }
.ceo-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.ceo-quote { margin: 0; }
.ceo-quote blockquote { margin: 0 0 28px; font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.25; letter-spacing: -.01em; color: var(--aubergine); }
:lang(he) .ceo-quote blockquote, :lang(ar) .ceo-quote blockquote, :lang(zh) .ceo-quote blockquote { font-style: normal; line-height: 1.5; }
.ceo-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ceo-quote figcaption strong { font-family: var(--display); font-weight: 500; font-size: 1.25rem; }
.ceo-quote figcaption span { color: var(--muted); }
.ceo-quote figcaption .btn { margin-inline-start: auto; min-height: 46px; gap: 10px; padding: 6px 20px; font-size: .9rem; }
.ceo-quote figcaption .btn svg { width: 18px; height: 18px; color: #0a66c2; }
@media (max-width: 860px) {
  .ceo-grid { grid-template-columns: 1fr; } .ceo-photo { max-width: 320px; margin-inline: auto; }
  .ceo-quote figcaption .btn { margin-inline-start: 0; }
}

/* ---------- Logistikpartner ---------- */
.logistics-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); }
.logistics-block .reach-sub { margin-top: 0; }
.logistics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.logistics li { justify-content: center; }
.logistics li { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.logistics img { height: 22px; width: auto; }
.logistics .lg-post img { height: 18px; }
.logistics .lg-post span { font-weight: 600; font-size: .82rem; color: var(--text); white-space: nowrap; }

/* ---------- Profil-Download ---------- */
.profile-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: #fff; font-weight: 600; font-size: .92rem; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-light); transition: background-color .4s var(--ease); }
.profile-link:hover { background: rgba(255, 255, 255, .08); }
.profile-link svg { width: 18px; height: 18px; color: var(--rose); }
@media (hover: none) { .ls-logos img { filter: none; opacity: .9; } }
@media (max-width: 560px) { .logistics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }