:root {
  --forest-950: #07140f;
  --forest-900: #0c2017;
  --forest-850: #10271d;
  --forest-800: #153328;
  --forest-700: #24513f;
  --wine-950: #321015;
  --wine-900: #4c151c;
  --wine-800: #6b1d28;
  --wine-700: #8a2935;
  --graphite-950: #0d1110;
  --graphite-900: #151a18;
  --graphite-850: #1b211e;
  --graphite-800: #252c28;
  --bone: #f1eee7;
  --bone-soft: #d8d5ce;
  --muted: #a8b1ab;
  --red: #9d3040;
  --red-bright: #c44350;
  --green: #6e927d;
  --line: rgba(241, 238, 231, .12);
  --line-strong: rgba(241, 238, 231, .22);
  --glass: rgba(255, 255, 255, .055);
  --shadow: 0 32px 90px rgba(0, 0, 0, .34);
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, .22);
  --radius: 30px;
  --radius-small: 18px;
  --container: min(1240px, calc(100% - 48px));
  --mouse-x: 50vw;
  --mouse-y: 35vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--graphite-950); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--bone);
  background: var(--graphite-950);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.public-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .28;
  background: radial-gradient(520px circle at var(--mouse-x) var(--mouse-y), rgba(157, 48, 64, .15), transparent 68%);
  mix-blend-mode: screen;
}
::selection { background: rgba(157, 48, 64, .72); color: #fff; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--graphite-950); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--forest-700), var(--wine-800)); border: 3px solid var(--graphite-950); border-radius: 999px; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: var(--container); margin-inline: auto; }
.skip-link { position: fixed; left: -9999px; top: 14px; z-index: 1000; background: var(--bone); color: var(--graphite-950); padding: 11px 16px; border-radius: 10px; }
.skip-link:focus { left: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wine-700), var(--red-bright), #d39a73);
  box-shadow: 0 0 18px rgba(196, 67, 80, .52);
}
.announcement {
  position: relative;
  z-index: 60;
  overflow: hidden;
  background: linear-gradient(100deg, var(--wine-950), var(--wine-800) 48%, var(--forest-900));
  color: rgba(255, 255, 255, .84);
  text-align: center;
  font-size: .7rem;
  letter-spacing: .22em;
  padding: 10px 20px;
  font-weight: 760;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.announcement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: translateX(-100%);
  animation: announcement-shine 8s ease-in-out infinite;
}
@keyframes announcement-shine { 0%, 65% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 20, 15, .72);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.scrolled {
  background: rgba(8, 17, 13, .92);
  border-bottom-color: rgba(157, 48, 64, .24);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.header-inner { height: 88px; display: flex; align-items: center; gap: 30px; }
.brand { display: block; flex: 0 0 auto; line-height: 0; }
.brand img { width: 220px; height: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .22)); }
.main-nav { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.main-nav a {
  position: relative;
  color: rgba(241, 238, 231, .72);
  font-size: .88rem;
  font-weight: 690;
  letter-spacing: .01em;
  transition: color .25s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--red-bright), #d39a73);
  transition: right .3s ease;
}
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine-800), var(--red));
  box-shadow: 0 12px 28px rgba(76, 21, 28, .32), inset 0 1px rgba(255, 255, 255, .12);
  font-size: .88rem;
  font-weight: 780;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(76, 21, 28, .45), inset 0 1px rgba(255, 255, 255, .18); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; width: 26px; height: 2px; background: var(--bone); margin: 5px; border-radius: 99px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(850px, calc(100svh - 126px));
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 96px 0 92px;
  background:
    radial-gradient(circle at 78% 20%, rgba(107, 29, 40, .42), transparent 25%),
    radial-gradient(circle at 18% 78%, rgba(36, 81, 63, .34), transparent 30%),
    linear-gradient(135deg, #07130f 0%, #10271d 48%, #171a18 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  opacity: .25;
  background: url("../img/botanical-lines.svg") center / 1100px auto repeat;
  transform: translate3d(0, calc(var(--page-scroll, 0px) * -.035), 0) rotate(-4deg);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .25;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 90%);
}
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(44px, 6vw, 90px); align-items: center; position: relative; z-index: 3; width: 100%; }
.hero-copy { position: relative; padding: 30px 0; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: #d78d93;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; box-shadow: 14px 0 0 -0.25px currentColor; }
.hero h1,
.content-section h2,
.contact-section h2,
.cert-section h2,
.legal-page h1,
.admin-title h1,
.login-card h1 {
  margin: 0;
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .98;
}
.hero h1 {
  max-width: 840px;
  font-size: clamp(3.55rem, 6.1vw, 6.85rem);
  text-wrap: balance;
  background: linear-gradient(135deg, #fff 12%, #dcd8d0 58%, #bf8f91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .22));
}
.hero-lead { max-width: 700px; margin: 28px 0 0; color: rgba(241, 238, 231, .68); font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.72; }
.hero-actions, .section-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 14px 24px;
  color: var(--bone);
  background: transparent;
  font-weight: 790;
  line-height: 1.1;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .2), transparent 80%); transform: translateX(-130%); transition: transform .55s ease; }
.btn:hover::before { transform: translateX(130%); }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: linear-gradient(135deg, var(--wine-800), var(--red)); color: #fff; box-shadow: 0 15px 36px rgba(76, 21, 28, .4), inset 0 1px rgba(255, 255, 255, .12); }
.btn-primary:hover { background: linear-gradient(135deg, var(--wine-700), var(--red-bright)); box-shadow: 0 20px 46px rgba(76, 21, 28, .5), inset 0 1px rgba(255, 255, 255, .2); }
.btn-ghost { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .055); color: var(--bone); backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); }
.btn-light { background: var(--bone); color: var(--forest-950); box-shadow: 0 15px 36px rgba(0, 0, 0, .22); }
.btn-light:hover { background: #fff; box-shadow: 0 20px 46px rgba(0, 0, 0, .28); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.stat {
  min-height: 116px;
  padding: 20px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
}
.stat strong { display: block; color: #fff; font-size: 1.55rem; line-height: 1.1; letter-spacing: -.03em; }
.stat span { display: block; margin-top: 8px; color: rgba(241, 238, 231, .55); font-size: .76rem; line-height: 1.4; }
.hero-visual { position: relative; min-height: 620px; display: grid; place-items: center; }
.hero-visual-card {
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 1 / 1.04;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 44px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
  box-shadow: 0 42px 110px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
  transform: rotate(2.5deg);
}
.hero-visual-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 32px;
  pointer-events: none;
}
.hero-visual img {
  width: 108%;
  max-width: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .26));
  transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(-2.5deg);
  will-change: transform;
}
.visual-badge {
  position: absolute;
  z-index: 4;
  min-width: 150px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: rgba(8, 20, 15, .74);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
  backdrop-filter: blur(16px);
}
.visual-badge strong { display: block; color: #fff; font-size: .86rem; }
.visual-badge span { display: block; margin-top: 3px; color: rgba(241, 238, 231, .52); font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; }
.badge-one { left: -8px; top: 13%; transform: rotate(-4deg); }
.badge-two { right: -6px; bottom: 12%; transform: rotate(4deg); }
.hero-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(1px); pointer-events: none; transform: translate3d(0, var(--parallax-y, 0px), 0); will-change: transform; }
.orb-one { width: 380px; height: 380px; left: -170px; top: 9%; background: radial-gradient(circle at 60% 40%, rgba(157, 48, 64, .45), rgba(76, 21, 28, .03) 68%); }
.orb-two { width: 310px; height: 310px; right: -90px; bottom: -80px; background: radial-gradient(circle at 40% 35%, rgba(70, 124, 96, .4), rgba(12, 32, 23, .02) 70%); }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 23px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(241, 238, 231, .45);
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue span { position: relative; width: 30px; height: 46px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; border-radius: 99px; background: var(--red-bright); transform: translateX(-50%); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0% { opacity: 0; transform: translate(-50%, 0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 18px); } }

.hero-divider {
  position: relative;
  z-index: 5;
  height: clamp(140px, 19vw, 240px);
  margin-top: -34px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(7, 19, 15, 0) 0%, rgba(9, 18, 14, .15) 24%, #121816 62%, #141816 100%);
}
.hero-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: min(78vw, 980px);
  height: 130px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(196, 67, 80, .18), rgba(67, 131, 94, .06) 50%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.divider-glow {
  position: absolute;
  inset: auto 0 52px;
  height: 90px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  opacity: .32;
  filter: blur(28px);
  transform: translate3d(0, calc(var(--page-scroll, 0px) * -.012), 0);
}
.wave-layer {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.wave-layer svg,
.hero-divider svg { display: block; width: 100%; height: 100%; }
.wave-layer path { transition: opacity .35s ease; }
.wave-back { bottom: 42px; opacity: .78; }
.wave-back path { fill: rgba(52, 99, 78, .72); }
.wave-mid { bottom: 18px; opacity: .92; }
.wave-mid path { fill: rgba(82, 24, 33, .78); }
.wave-front { bottom: -22px; }
.wave-front path { fill: #141816; }
.hero-divider-caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(8, 17, 13, .58);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.hero-divider-caption span { width: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
.hero-divider-caption p { margin: 0; color: rgba(241, 238, 231, .56); font-size: .68rem; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }

.trust-strip { position: relative; z-index: 6; padding: 0 0 28px; margin-top: -28px; background: var(--graphite-950); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  box-shadow: var(--shadow-soft);
}
.trust-grid > div { position: relative; min-height: 155px; padding: 30px 26px; border-right: 1px solid rgba(255, 255, 255, .08); transition: background .3s ease, transform .3s ease; }
.trust-grid > div::after { content: ""; position: absolute; inset: auto 24px 0; height: 2px; background: linear-gradient(90deg, var(--wine-700), transparent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.trust-grid > div:hover { background: rgba(255, 255, 255, .045); }
.trust-grid > div:hover::after { transform: scaleX(1); }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid span { color: #d6878f; font-size: .68rem; font-weight: 850; letter-spacing: .14em; }
.trust-grid strong { display: block; margin: 13px 0 5px; color: #fff; font-size: 1rem; }
.trust-grid small { display: block; color: rgba(241, 238, 231, .5); line-height: 1.45; }

.content-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 138px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}
.content-section::before {
  content: attr(data-section-index);
  position: absolute;
  right: clamp(-25px, 2vw, 26px);
  top: -58px;
  z-index: -1;
  color: rgba(255, 255, 255, .025);
  font-size: clamp(15rem, 28vw, 31rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.1em;
  pointer-events: none;
}
.content-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .22;
  background: url("../img/botanical-lines.svg") center / 1150px auto repeat;
  transform: translate3d(0, calc(var(--page-scroll, 0px) * -.012), 0);
  pointer-events: none;
}
.theme-light { background: linear-gradient(135deg, #171d1a, #202724 60%, #181d1b); }
.theme-cream { background: linear-gradient(135deg, #0d241a, #153429 54%, #10251d); }
.theme-dark { background: linear-gradient(135deg, #090d0b, #111714 55%, #161b18); }
.theme-accent { background: linear-gradient(135deg, #351117, #671c26 50%, #281517); }
.theme-accent::after { opacity: .16; }
.theme-dark .eyebrow, .theme-accent .eyebrow { color: #dc979d; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(58px, 7vw, 104px); align-items: center; position: relative; z-index: 2; }
.section-grid.media-left .section-copy { order: 2; }
.section-grid.media-left .section-media { order: 1; }
.section-grid.full { grid-template-columns: 1fr; }
.section-grid.full .section-copy { max-width: 920px; }
.section-copy { position: relative; }
.content-section h2, .contact-section h2, .cert-section h2 { max-width: 850px; color: #fff; font-size: clamp(3rem, 5vw, 5.65rem); text-wrap: balance; }
.rich-text { max-width: 720px; margin-top: 30px; color: rgba(241, 238, 231, .62); font-size: 1.04rem; }
.rich-text p { margin: 0 0 20px; }
.section-media {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .45s ease;
}
.section-media::before { content: ""; position: absolute; inset: -45%; z-index: 0; background: conic-gradient(from 90deg, transparent, rgba(157, 48, 64, .26), transparent 36%); animation: media-glow 12s linear infinite; }
@keyframes media-glow { to { transform: rotate(360deg); } }
.section-media:hover { transform: translateY(-8px) rotate(.4deg); border-color: rgba(255, 255, 255, .22); box-shadow: 0 42px 100px rgba(0, 0, 0, .42); }
.section-media img, .section-media video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
  border-radius: 24px;
  transform: scale(1.045) translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
.text-link { position: relative; padding-bottom: 5px; color: var(--bone); font-weight: 800; }
.text-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: left; transition: transform .3s ease; }
.text-link:hover::after { transform: scaleX(.45); }
.product-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.product-grid article {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.product-grid article::before { content: ""; position: absolute; width: 170px; height: 170px; right: -80px; bottom: -85px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255, 255, 255, .025), 0 0 0 56px rgba(255, 255, 255, .015); transition: transform .45s ease; }
.product-grid article:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .075); border-color: rgba(196, 67, 80, .38); }
.product-grid article:hover::before { transform: scale(1.15); }
.product-grid span { color: #dc9299; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.product-grid h3 { margin: 32px 0 12px; color: #fff; font-size: 1.3rem; }
.product-grid p { margin: 0; color: rgba(241, 238, 231, .56); font-size: .92rem; }

.cert-section {
  position: relative;
  overflow: hidden;
  padding: 125px 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(107, 29, 40, .22), transparent 25%),
    linear-gradient(135deg, #111815, #18231e 58%, #131816);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.cert-section::before { content: ""; position: absolute; inset: 0; opacity: .15; background: url("../img/botanical-lines.svg") center / 1200px auto repeat; }
.cert-section .container { position: relative; z-index: 2; }
.cert-head { display: grid; grid-template-columns: 1.1fr .65fr; gap: 60px; align-items: end; }
.cert-head p { margin: 0; color: rgba(241, 238, 231, .58); font-size: 1.03rem; }
.cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.cert-grid div {
  position: relative;
  min-height: 135px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 23px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));
  transition: transform .35s ease, border-color .35s ease;
}
.cert-grid div::before { content: "✓"; position: absolute; right: 16px; top: 10px; color: rgba(255, 255, 255, .08); font-size: 3.2rem; font-weight: 900; }
.cert-grid div:hover { transform: translateY(-7px); border-color: rgba(110, 146, 125, .5); }
.cert-grid strong { display: block; color: #fff; font-size: .95rem; }
.cert-grid span { color: rgba(241, 238, 231, .48); font-size: .74rem; }

.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0;
  color: #fff;
  background:
    radial-gradient(circle at 86% 16%, rgba(157, 48, 64, .35), transparent 25%),
    linear-gradient(128deg, #081b13, #122d22 48%, #40151b 100%);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.contact-section::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; background: url("../img/botanical-lines.svg") center / 1100px auto repeat; transform: translate3d(0, calc(var(--page-scroll, 0px) * -.018), 0); }
.contact-section::after { content: ""; position: absolute; width: 500px; height: 500px; right: -160px; top: -130px; z-index: -1; border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%; box-shadow: 0 0 0 85px rgba(255, 255, 255, .028), 0 0 0 170px rgba(255, 255, 255, .016); }
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.contact-copy p:not(.eyebrow) { max-width: 680px; color: rgba(241, 238, 231, .62); font-size: 1.05rem; }
.contact-card {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  color: var(--bone);
  background: linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}
.contact-card::before { content: ""; position: absolute; width: 170px; height: 170px; right: -80px; top: -80px; border-radius: 50%; background: rgba(157, 48, 64, .18); filter: blur(4px); }
.contact-card h3 { position: relative; margin: 0; color: #fff; font-size: 1.45rem; }
.contact-card > p { position: relative; color: rgba(241, 238, 231, .54); }
.contact-card dl { position: relative; margin: 27px 0 0; }
.contact-card dl div { display: grid; grid-template-columns: 100px 1fr; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.contact-card dt { color: rgba(241, 238, 231, .48); font-size: .78rem; }
.contact-card dd { margin: 0; color: #fff; font-weight: 700; }
.contact-card a:hover { color: #e4a1a7; }

.site-footer { position: relative; overflow: hidden; background: #080d0b; color: #fff; border-top: 1px solid rgba(255, 255, 255, .07); }
.site-footer::before { content: ""; position: absolute; inset: 0; opacity: .1; background: url("../img/botanical-lines.svg") center / 1150px auto repeat; }
.footer-main { position: relative; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 52px; padding: 72px 0; }
.footer-brand img { width: 245px; opacity: .98; }
.footer-brand p { max-width: 340px; color: rgba(241, 238, 231, .48); }
.footer-main h3 { margin: 0 0 17px; color: #d98f96; font-size: .73rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-main > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-main a, .footer-main p { margin: 0; color: rgba(241, 238, 231, .55); font-size: .88rem; }
.footer-main a { transition: color .25s ease, transform .25s ease; }
.footer-main a:hover { color: #fff; transform: translateX(4px); }
.footer-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(241, 238, 231, .42); font-size: .82rem; }
.admin-link { padding: 8px 13px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: rgba(255, 255, 255, .82); transition: background .25s ease, border-color .25s ease; }
.admin-link:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }

.reveal { opacity: 0; filter: blur(7px); transform: translateY(34px) scale(.985); transition: opacity .85s cubic-bezier(.2, .8, .2, 1), transform .85s cubic-bezier(.2, .8, .2, 1), filter .85s ease; }
.reveal.revealed { opacity: 1; filter: none; transform: none; }
.reveal-delay { transition-delay: .13s; }

/* Rechtliche Seiten */
.legal-body { min-height: 100vh; background: linear-gradient(135deg, var(--graphite-950), var(--forest-900)); }
.legal-header { position: relative; }
.legal-header .header-inner { justify-content: space-between; }
.legal-page { position: relative; padding: 80px 0 110px; }
.legal-page::before { content: ""; position: fixed; inset: 0; opacity: .14; pointer-events: none; background: url("../img/botanical-lines.svg") center / 1100px auto repeat; }
.legal-wrap { position: relative; max-width: 910px; padding: 58px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 30px; background: rgba(255, 255, 255, .06); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.legal-page h1 { margin-bottom: 44px; color: #fff; font-size: clamp(3rem, 5vw, 5.4rem); }
.legal-page h2 { margin: 34px 0 8px; color: #fff; font-size: 1.25rem; }
.legal-page p { color: rgba(241, 238, 231, .62); }
.legal-note { padding: 19px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px; background: rgba(255, 255, 255, .055); }

/* Admin-Tool */
.admin-body { min-height: 100vh; color: var(--bone); background: linear-gradient(135deg, #111714, #1a221e); }
.admin-header { background: rgba(8, 17, 13, .92); border-bottom: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(18px); }
.admin-header-inner { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-header-inner > div { display: flex; gap: 10px; }
.admin-main { position: relative; padding: 58px 0 110px; }
.admin-main::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .1; background: url("../img/botanical-lines.svg") center / 1100px auto repeat; }
.login-card { max-width: 540px; margin: 42px auto; padding: 44px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; background: rgba(255, 255, 255, .065); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.login-card h1 { color: #fff; font-size: 3.5rem; }
.login-card > p:not(.eyebrow) { color: var(--muted); }
.admin-title { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 30px; }
.admin-title h1 { color: #fff; font-size: 4.2rem; }
.admin-title p { color: var(--muted); }
.admin-title code { color: #e2a1a7; }
.status-pill { padding: 10px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.status-pill.ok { background: rgba(67, 131, 94, .23); color: #b9dec4; border: 1px solid rgba(94, 166, 119, .3); }
.status-pill.bad { background: rgba(157, 48, 64, .23); color: #efb3b9; border: 1px solid rgba(196, 67, 80, .3); }
.alert { padding: 14px 16px; border-radius: 14px; margin: 12px 0; }
.alert.success { background: rgba(67, 131, 94, .2); color: #c7e7d0; border: 1px solid rgba(94, 166, 119, .25); }
.alert.error { background: rgba(157, 48, 64, .2); color: #efbdc2; border: 1px solid rgba(196, 67, 80, .25); }
.admin-panel { overflow: hidden; margin: 16px 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(255, 255, 255, .055); box-shadow: 0 15px 45px rgba(0, 0, 0, .18); }
.admin-panel summary { display: flex; justify-content: space-between; gap: 20px; padding: 21px 24px; color: #fff; cursor: pointer; list-style: none; font-weight: 850; }
.admin-panel summary::-webkit-details-marker { display: none; }
.admin-panel summary small { color: var(--muted); font-weight: 500; }
.admin-form { display: grid; gap: 18px; padding: 24px; border-top: 1px solid rgba(255, 255, 255, .09); }
.admin-grid { grid-template-columns: 1fr 1fr; }
.admin-form label { display: flex; flex-direction: column; gap: 7px; color: #d8ddd9; font-size: .85rem; font-weight: 750; }
.admin-form input, .admin-form textarea, .admin-form select, .add-form input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  padding: 12px 13px;
  background: rgba(6, 14, 10, .62);
  color: #fff;
}
.admin-form select option { background: var(--graphite-900); color: #fff; }
.admin-form textarea { resize: vertical; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .add-form input:focus { outline: 2px solid rgba(196, 67, 80, .24); border-color: var(--red-bright); }
.span-2 { grid-column: 1 / -1; }
.stats-editor > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; margin-top: 10px; }
.check-row { display: flex; flex-wrap: wrap; gap: 20px; }
.check-row label { flex-direction: row; align-items: center; font-weight: 650; }
.check-row input { width: auto; accent-color: var(--red-bright); }
.upload-box { padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.upload-box small { color: var(--muted); font-weight: 500; word-break: break-all; }
.admin-section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin: 50px 0 12px; }
.admin-section-head h2 { margin: 0; color: #fff; font-size: 2rem; }
.admin-section-head p { margin: 0; color: var(--muted); }
.add-form { display: flex; gap: 10px; min-width: 500px; }
.section-tools { padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .16); }
.section-tools form { display: flex; gap: 8px; }
.section-tools button { border: 1px solid rgba(255, 255, 255, .13); border-radius: 9px; padding: 9px 12px; background: rgba(255, 255, 255, .055); color: #fff; cursor: pointer; }
.section-tools button:hover { background: rgba(255, 255, 255, .1); }
.section-tools button:disabled { opacity: .4; cursor: not-allowed; }
.section-tools .danger { margin-left: auto; color: #efb4ba; border-color: rgba(196, 67, 80, .35); }
.admin-help { margin-top: 40px; padding: 30px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: linear-gradient(135deg, rgba(21, 51, 40, .7), rgba(76, 21, 28, .45)); }
.admin-help h2 { margin-top: 0; color: #fff; }
.admin-help p { color: rgba(241, 238, 231, .65); }
.admin-help code { color: #fff; }

[data-parallax] { will-change: transform; }

@media (max-width: 1080px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: .8rem; }
  .header-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr .82fr; gap: 40px; }
  .hero-visual { min-height: 520px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .trust-grid > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-main > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 840px) {
  :root { --container: min(100% - 30px, 1240px); }
  body.public-site::before { display: none; }
  .announcement { font-size: .59rem; letter-spacing: .16em; }
  .header-inner { height: 76px; }
  .brand img { width: 180px; }
  .nav-toggle { display: block; margin-left: auto; }
  .main-nav {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 84px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(8, 17, 13, .96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 14px; border-radius: 12px; font-size: .9rem; }
  .main-nav a:hover, .main-nav a.active { background: rgba(255, 255, 255, .06); }
  .main-nav a::after { display: none; }
  .hero { min-height: auto; padding: 72px 0 92px; }
  .hero-divider { height: clamp(128px, 28vw, 210px); margin-top: -24px; }
  .hero-divider-caption { bottom: 12px; }
  .hero-grid, .section-grid, .contact-grid, .cert-head { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(3.4rem, 11vw, 5.6rem); }
  .hero-visual { min-height: auto; max-width: 610px; margin: 30px auto 0; }
  .hero-visual-card { aspect-ratio: 1 / .95; }
  .visual-badge { display: none; }
  .scroll-cue { display: none; }
  .content-section { padding: 98px 0; }
  .section-grid { gap: 48px; }
  .section-grid.media-left .section-copy, .section-grid.media-left .section-media { order: initial; }
  .section-media:hover { transform: none; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > div:last-child { grid-column: auto; }
  .admin-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .admin-title, .admin-section-head { flex-direction: column; align-items: stretch; }
  .add-form { min-width: 0; }
  .legal-wrap { padding: 36px; }
  .admin-header-inner > div { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 580px) {
  :root { --container: calc(100% - 24px); --radius: 24px; }
  .hero { padding-top: 58px; }
  .hero-divider { height: 118px; margin-top: -14px; }
  .hero-divider-caption { padding: 8px 14px; }
  .hero-divider-caption p { font-size: .58rem; letter-spacing: .15em; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hero-lead { font-size: 1rem; }
  .hero-actions .btn { width: 100%; }
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stat { min-height: 0; display: grid; grid-template-columns: 94px 1fr; align-items: center; padding: 16px; }
  .stat span { margin-top: 0; }
  .hero-visual-card { border-radius: 28px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div { min-height: 0; padding: 23px 21px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .trust-grid > div:last-child { border-bottom: 0; }
  .content-section { padding: 82px 0; }
  .content-section h2, .contact-section h2, .cert-section h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .product-grid, .cert-grid, .footer-main { grid-template-columns: 1fr; }
  .product-grid article { min-height: 220px; }
  .section-media { padding: 8px; border-radius: 25px; }
  .section-media img, .section-media video { border-radius: 18px; }
  .contact-card { padding: 25px; }
  .contact-card dl div { grid-template-columns: 1fr; gap: 4px; }
  .footer-main > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; gap: 14px; flex-direction: column; }
  .admin-header-inner { padding-block: 12px; }
  .admin-header-inner .brand { display: none; }
  .add-form { flex-direction: column; }
  .section-tools form { flex-wrap: wrap; }
  .section-tools .danger { margin-left: 0; }
  .stats-editor > div { grid-template-columns: 1fr; }
  .login-card, .legal-wrap { padding: 28px 22px; }
  .login-card h1, .admin-title h1 { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; filter: none; transform: none; }
  [data-parallax], .hero-visual img, .section-media img, .section-media video, .wave-layer, .divider-glow { transform: none !important; }
}


/* ===== v4 Apple-inspired light redesign overrides ===== */
:root {
  --forest-950: #f5f7f4;
  --forest-900: #eef4ef;
  --forest-850: #e7f0ea;
  --forest-800: #dce9e0;
  --forest-700: #6f8e7c;
  --wine-950: #fff4f4;
  --wine-900: #fdeaea;
  --wine-800: #f3d9d9;
  --wine-700: #d67575;
  --graphite-950: #f5f5f7;
  --graphite-900: #ebedf0;
  --graphite-850: #dde2e7;
  --graphite-800: #c9d1d9;
  --bone: #1d1d1f;
  --bone-soft: #3a3a3c;
  --muted: #6e6e73;
  --red: #b45b61;
  --red-bright: #cb6b72;
  --green: #6a8e7d;
  --line: rgba(29, 29, 31, .08);
  --line-strong: rgba(29, 29, 31, .14);
  --glass: rgba(255, 255, 255, .72);
  --shadow: 0 30px 80px rgba(15, 23, 42, .12);
  --shadow-soft: 0 16px 40px rgba(15, 23, 42, .08);
}

html { background: #f5f5f7; }
body {
  color: #1d1d1f;
  background:
    radial-gradient(1000px circle at 6% 10%, rgba(113, 168, 140, .12), transparent 36%),
    radial-gradient(860px circle at 94% 14%, rgba(213, 137, 137, .12), transparent 34%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 55%, #f2f4f7 100%);
}
body.public-site::before {
  opacity: .8;
  background:
    radial-gradient(540px circle at var(--mouse-x) var(--mouse-y), rgba(123, 164, 145, .12), transparent 60%),
    radial-gradient(520px circle at calc(var(--mouse-x) + 120px) calc(var(--mouse-y) - 90px), rgba(206, 120, 127, .08), transparent 58%);
  mix-blend-mode: normal;
}
::selection { background: rgba(203, 107, 114, .2); color: #1d1d1f; }
::-webkit-scrollbar-track { background: #f0f2f5; }
::-webkit-scrollbar-thumb { background: linear-gradient(#b8ccc0, #d59ca0); border-color: #f0f2f5; }

.scroll-progress {
  height: 4px;
  background: linear-gradient(90deg, #94b4a1, #d78f92, #f1d2b3);
  box-shadow: 0 0 18px rgba(203, 107, 114, .18);
}
.announcement {
  background: rgba(255,255,255,.72);
  color: #5b5b61;
  border-bottom: 1px solid rgba(29,29,31,.06);
  backdrop-filter: blur(20px) saturate(150%);
}
.announcement::after { opacity: .45; }

.site-header {
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(29,29,31,.07);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
}
.site-header.scrolled {
  background: rgba(255,255,255,.88);
  border-bottom-color: rgba(29,29,31,.08);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
}
.brand img { filter: none; }
.main-nav a { color: rgba(29,29,31,.72); }
.main-nav a:hover, .main-nav a.active { color: #111; }
.main-nav a::after { background: linear-gradient(90deg, #8cae99, #cb6b72); }
.header-cta {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #90ae9d, #cb6b72);
  box-shadow: 0 12px 30px rgba(147, 166, 153, .26);
}
.header-cta:hover { box-shadow: 0 18px 40px rgba(147, 166, 153, .32); }
.nav-toggle span:not(.sr-only) { background: #1d1d1f; }

.hero {
  min-height: min(900px, calc(100svh - 126px));
  padding: 118px 0 104px;
  background:
    radial-gradient(circle at 78% 16%, rgba(217, 146, 151, .26), transparent 26%),
    radial-gradient(circle at 20% 72%, rgba(124, 168, 145, .22), transparent 28%),
    linear-gradient(180deg, #fcfcfe 0%, #f7f8fb 54%, #f3f5f8 100%);
}
.hero::before {
  opacity: .16;
  background-size: 1240px auto;
  transform: translate3d(0, calc(var(--page-scroll, 0px) * -.018), 0) rotate(-2deg);
}
.hero::after {
  opacity: .4;
  background-image:
    linear-gradient(rgba(29,29,31,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,29,31,.04) 1px, transparent 1px);
  background-size: 86px 86px;
}
.eyebrow { color: #7b8f84; }
.hero h1 {
  background: linear-gradient(180deg, #121214 0%, #2d2d31 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
}
.hero-lead { color: #6a6a70; max-width: 670px; }
.btn-primary {
  background: linear-gradient(135deg, #90ae9d, #cb6b72);
  box-shadow: 0 18px 40px rgba(148, 170, 157, .22);
}
.btn-primary:hover { background: linear-gradient(135deg, #7ea08d, #c06269); box-shadow: 0 24px 50px rgba(148, 170, 157, .28); }
.btn-ghost {
  border-color: rgba(29,29,31,.08);
  background: rgba(255,255,255,.72);
  color: #1d1d1f;
  backdrop-filter: blur(18px);
}
.btn-ghost:hover { border-color: rgba(29,29,31,.14); background: rgba(255,255,255,.9); }
.btn-light {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

.stats .stat {
  border: 1px solid rgba(29,29,31,.06);
  background: rgba(255,255,255,.74);
  box-shadow: 0 20px 45px rgba(15, 23, 42, .08), inset 0 1px rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px);
}
.stat strong { color: #17171a; }
.stat span { color: #6d6d73; }
.hero-visual-card {
  border: 1px solid rgba(255,255,255,.8);
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(247,249,252,.65));
  box-shadow: 0 40px 100px rgba(125, 141, 160, .18);
  backdrop-filter: blur(24px);
}
.hero-visual-card::before { border-color: rgba(29,29,31,.05); }
.hero-visual img { filter: drop-shadow(0 28px 42px rgba(102, 121, 140, .16)); }
.visual-badge {
  border: 1px solid rgba(29,29,31,.06);
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}
.visual-badge strong { color: #17171a; }
.visual-badge span { color: #75757b; }
.orb-one { background: radial-gradient(circle at 60% 40%, rgba(205, 132, 140, .22), rgba(205, 132, 140, .01) 70%); }
.orb-two { background: radial-gradient(circle at 40% 35%, rgba(131, 168, 146, .22), rgba(131, 168, 146, .01) 70%); }
.scroll-cue { color: rgba(29,29,31,.42); }
.scroll-cue span { border-color: rgba(29,29,31,.16); }
.scroll-cue span::after { background: #cb6b72; }

.hero-divider {
  background: linear-gradient(180deg, rgba(245,245,247,0) 0%, rgba(245,245,247,.76) 35%, #f7f8fa 80%, #f7f8fa 100%);
}
.hero-divider::before {
  background: radial-gradient(ellipse at center, rgba(192, 220, 204, .38), rgba(235, 205, 208, .22) 42%, transparent 72%);
}
.divider-glow { background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); opacity: .62; }
.wave-back path { fill: rgba(196, 220, 207, .85); }
.wave-mid path { fill: rgba(239, 213, 215, .92); }
.wave-front path { fill: #f7f8fa; }
.hero-divider-caption {
  border: 1px solid rgba(29,29,31,.06);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.hero-divider-caption p { color: #78787e; }
.hero-divider-caption span { background: linear-gradient(90deg, transparent, rgba(29,29,31,.26), transparent); }

.trust-strip {
  margin-top: -20px;
  background: linear-gradient(180deg, #f7f8fa 0%, #f5f5f7 100%);
}
.trust-grid {
  border: 1px solid rgba(29,29,31,.06);
  background: rgba(255,255,255,.82);
  box-shadow: 0 26px 60px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
}
.trust-grid > div { border-right-color: rgba(29,29,31,.06); }
.trust-grid > div:nth-child(-n + 4) { background: transparent; }
.trust-grid > div:hover { background: rgba(247, 249, 252, .85); transform: translateY(-2px); }
.trust-grid > div::after { background: linear-gradient(90deg, #90ae9d, transparent); }
.trust-grid span { color: #8ea295; }
.trust-grid strong { color: #17171a; }
.trust-grid small { color: #6f7077; }

.content-section {
  border-top: 1px solid rgba(29,29,31,.05);
}
.content-section::before { color: rgba(29,29,31,.035); }
.content-section::after { opacity: .08; }
.theme-light { background: linear-gradient(180deg, #f7f8fa 0%, #f4f5f7 100%); }
.theme-cream { background: linear-gradient(180deg, #f5f8f5 0%, #eef4f0 100%); }
.theme-dark { background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%); }
.theme-accent { background: linear-gradient(180deg, #fdf6f6 0%, #faeff0 100%); }
.theme-accent::after { opacity: .08; }
.theme-dark .eyebrow, .theme-accent .eyebrow { color: #8b9f94; }
.content-section h2, .contact-section h2, .cert-section h2, .legal-page h1, .admin-title h1, .login-card h1 { color: #161618; }
.rich-text { color: #666870; }
.section-media {
  border: 1px solid rgba(29,29,31,.06);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(247,249,252,.72));
  box-shadow: 0 28px 70px rgba(15, 23, 42, .1);
  backdrop-filter: blur(18px);
}
.section-media::before { background: conic-gradient(from 90deg, transparent, rgba(203, 107, 114, .12), rgba(144, 174, 157, .1), transparent 48%); }
.section-media:hover { border-color: rgba(29,29,31,.1); box-shadow: 0 36px 90px rgba(15, 23, 42, .14); }
.text-link { color: #1d1d1f; }
.product-grid article,
.cert-grid > div,
.contact-card,
.legal-wrap,
.login-card,
.admin-panel,
.admin-help {
  border: 1px solid rgba(29,29,31,.06);
  background: rgba(255,255,255,.84);
  box-shadow: 0 22px 56px rgba(15, 23, 42, .08);
  backdrop-filter: blur(20px);
}
.product-grid article h3,
.cert-grid strong,
.contact-card h3,
.legal-wrap h2 { color: #17171a; }
.product-grid article p,
.cert-grid span,
.contact-card p,
.contact-card dt,
.contact-card dd,
.legal-page p,
.legal-note,
.admin-help p { color: #6a6d73; }
.product-grid article span { color: #90ae9d; }
.cert-section {
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  border-top: 1px solid rgba(29,29,31,.05);
}
.cert-head p { color: #6a6d73; }
.contact-section {
  background: linear-gradient(180deg, #f6f8f8 0%, #eef3f0 100%);
}
.contact-section::before { opacity: .08; }
.contact-section::after { border-color: rgba(29,29,31,.05); box-shadow: 0 0 0 85px rgba(255,255,255,.36), 0 0 0 170px rgba(255,255,255,.16); }
.contact-copy p { color: #6a6d73; }
.contact-card a { color: #1d1d1f; }

.site-footer {
  background: linear-gradient(180deg, #f3f4f6 0%, #eceef2 100%);
  color: #1d1d1f;
  border-top: 1px solid rgba(29,29,31,.06);
}
.footer-main h3,
.footer-brand p,
.footer-main a,
.footer-main p,
.footer-bottom { color: #5f6368; }
.footer-main a:hover { color: #1d1d1f; }
.footer-brand img { filter: none; }
.footer-bottom { border-top-color: rgba(29,29,31,.06); }

/* Light admin */
.admin-body {
  color: #1d1d1f;
  background: linear-gradient(180deg, #f8f9fb 0%, #f2f4f7 100%);
}
.admin-header {
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(29,29,31,.06);
  backdrop-filter: blur(18px);
}
.admin-main::before { opacity: .06; }
.login-card > p:not(.eyebrow), .admin-title p { color: #6a6d73; }
.status-pill.ok { background: rgba(137, 179, 156, .18); color: #3d5c4c; border-color: rgba(137, 179, 156, .32); }
.status-pill.bad { background: rgba(213, 137, 137, .18); color: #834850; border-color: rgba(213, 137, 137, .34); }
.alert.success { background: rgba(137, 179, 156, .18); color: #3d5c4c; border-color: rgba(137,179,156,.32); }
.alert.error { background: rgba(213,137,137,.18); color: #834850; border-color: rgba(213,137,137,.34); }
.admin-panel summary, .admin-section-head h2 { color: #17171a; }
.admin-panel summary small { color: #6a6d73; }
.admin-form label { color: #3a3a3f; }
.admin-form input, .admin-form textarea, .admin-form select, .add-form input {
  border-color: rgba(29,29,31,.1);
  background: rgba(247,249,252,.9);
  color: #1d1d1f;
}
.admin-form select option { background: #fff; color: #111; }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus, .add-form input:focus { outline-color: rgba(203,107,114,.16); border-color: #cb6b72; }
.upload-box, .section-tools { background: rgba(245,247,250,.72); border-top-color: rgba(29,29,31,.06); }
.section-tools button {
  border-color: rgba(29,29,31,.08);
  background: rgba(255,255,255,.76);
  color: #1d1d1f;
}
.section-tools button:hover { background: #fff; }
.section-tools .danger { color: #944d56; border-color: rgba(203,107,114,.24); }
.admin-help {
  background: linear-gradient(135deg, rgba(236,244,239,.92), rgba(252,243,243,.92));
}
.admin-help h2, .admin-help code { color: #1d1d1f; }

.main-nav.open {
  background: rgba(255,255,255,.96);
  border-color: rgba(29,29,31,.08);
}
.main-nav a:hover, .main-nav a.active { background: transparent; }

@media (max-width: 1080px) {
  .trust-grid > div:nth-child(-n + 2) { border-bottom-color: rgba(29,29,31,.06); }
  .footer-main > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 840px) {
  .site-header { background: rgba(255,255,255,.82); }
  .main-nav {
    background: rgba(255,255,255,.96);
    border-color: rgba(29,29,31,.08);
    box-shadow: 0 16px 40px rgba(15,23,42,.1);
  }
  .main-nav a:hover, .main-nav a.active { background: rgba(245,247,250,.96); }
  .hero { padding: 78px 0 96px; }
  .hero-divider { margin-top: -6px; }
  .trust-strip { margin-top: -10px; }
}

@media (max-width: 580px) {
  .announcement { font-size: .56rem; }
  .hero { padding-top: 60px; }
  .hero-visual-card, .section-media, .product-grid article, .cert-grid > div, .contact-card, .legal-wrap, .login-card, .admin-panel { border-radius: 24px; }
  .hero-divider-caption { max-width: calc(100% - 24px); }
}

/* ===== v5 editable color system + image-only landing page ===== */
:root {
  --brand-primary: #cb6b72;
  --brand-secondary: #90ae9d;
  --page-bg: #f5f5f7;
  --surface-color: #ffffff;
  --text-color: #1d1d1f;
  --muted-color: #6e6e73;
}

html,
body { background: var(--page-bg); }
body { color: var(--text-color); }
body.public-site {
  background:
    radial-gradient(900px circle at 4% 12%, color-mix(in srgb, var(--brand-secondary) 18%, transparent), transparent 40%),
    radial-gradient(820px circle at 96% 16%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 38%),
    var(--page-bg);
}
body.public-site::before {
  background:
    radial-gradient(580px circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 62%),
    radial-gradient(500px circle at calc(var(--mouse-x) + 150px) calc(var(--mouse-y) - 90px), color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 60%);
}
::selection { background: color-mix(in srgb, var(--brand-primary) 30%, transparent); color: var(--text-color); }
.scroll-progress { background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); box-shadow: 0 0 18px color-mix(in srgb, var(--brand-primary) 28%, transparent); }

.site-header,
.site-header.scrolled {
  background: color-mix(in srgb, var(--surface-color) 84%, transparent);
  border-bottom-color: color-mix(in srgb, var(--text-color) 8%, transparent);
}
.site-header.scrolled { box-shadow: 0 14px 40px color-mix(in srgb, var(--text-color) 10%, transparent); }
.main-nav a { color: color-mix(in srgb, var(--text-color) 72%, transparent); }
.main-nav a:hover,
.main-nav a.active { color: var(--text-color); }
.main-nav a::after { background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary)); }
.header-cta,
.btn-primary {
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}
.header-cta:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 86%, #000), color-mix(in srgb, var(--brand-primary) 88%, #000));
  box-shadow: 0 22px 48px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.nav-toggle span:not(.sr-only) { background: var(--text-color); }

.landing-image {
  position: relative;
  width: 100%;
  height: calc(100svh - 88px);
  min-height: 620px;
  max-height: 1080px;
  overflow: hidden;
  background: var(--page-bg);
  isolation: isolate;
}
.landing-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 8%, transparent), transparent 22%, transparent 74%, color-mix(in srgb, var(--page-bg) 54%, transparent)),
    radial-gradient(circle at 50% 46%, transparent 55%, color-mix(in srgb, var(--page-bg) 18%, transparent) 100%);
}
.landing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  animation: landing-image-enter 1.25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes landing-image-enter {
  from { opacity: 0; transform: scale(1.055); filter: saturate(.86) blur(4px); }
  to { opacity: 1; transform: scale(1.015); filter: none; }
}

.hero-divider { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--page-bg) 86%, transparent) 40%, var(--page-bg) 100%); }
.hero-divider::before { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-secondary) 38%, transparent), color-mix(in srgb, var(--brand-primary) 20%, transparent) 46%, transparent 72%); }
.wave-back path { fill: color-mix(in srgb, var(--brand-secondary) 45%, var(--page-bg)); }
.wave-mid path { fill: color-mix(in srgb, var(--brand-primary) 40%, var(--page-bg)); }
.wave-front path { fill: var(--page-bg); }
.hero-divider-caption { display: none; }

.trust-strip { background: var(--page-bg); }
.trust-grid,
.product-grid article,
.cert-grid > div,
.contact-card,
.legal-wrap,
.login-card,
.admin-panel,
.admin-help,
.color-live-preview .preview-surface {
  background: color-mix(in srgb, var(--surface-color) 92%, transparent);
  border-color: color-mix(in srgb, var(--text-color) 7%, transparent);
  box-shadow: 0 24px 62px color-mix(in srgb, var(--text-color) 9%, transparent);
}
.trust-grid > div { border-right-color: color-mix(in srgb, var(--text-color) 7%, transparent); }
.trust-grid > div:hover { background: color-mix(in srgb, var(--surface-color) 76%, var(--brand-secondary) 8%); }
.trust-grid > div::after { background: linear-gradient(90deg, var(--brand-secondary), var(--brand-primary), transparent); }
.trust-grid span,
.product-grid article span,
.eyebrow { color: var(--brand-secondary); }
.trust-grid strong,
.product-grid article h3,
.cert-grid strong,
.contact-card h3,
.content-section h2,
.contact-section h2,
.cert-section h2,
.legal-page h1,
.admin-title h1,
.login-card h1 { color: var(--text-color); }
.trust-grid small,
.rich-text,
.product-grid article p,
.cert-grid span,
.cert-head p,
.contact-copy p,
.contact-card p,
.contact-card dt,
.contact-card dd,
.legal-page p,
.footer-brand p,
.footer-main a,
.footer-main p,
.footer-bottom,
.admin-title p,
.admin-panel summary small,
.admin-help p { color: var(--muted-color); }

.content-section { border-top-color: color-mix(in srgb, var(--text-color) 5%, transparent); }
.content-section::before { color: color-mix(in srgb, var(--text-color) 4%, transparent); }
.theme-light { background: linear-gradient(180deg, var(--page-bg), color-mix(in srgb, var(--page-bg) 92%, var(--surface-color))); }
.theme-cream { background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 90%, var(--brand-secondary) 10%), color-mix(in srgb, var(--page-bg) 95%, var(--brand-secondary) 5%)); }
.theme-dark { background: linear-gradient(180deg, var(--surface-color), color-mix(in srgb, var(--surface-color) 90%, var(--page-bg))); }
.theme-accent { background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 88%, var(--brand-primary) 12%), color-mix(in srgb, var(--page-bg) 95%, var(--brand-primary) 5%)); }
.theme-dark .eyebrow,
.theme-accent .eyebrow { color: var(--brand-primary); }
.section-media {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-color) 96%, transparent), color-mix(in srgb, var(--page-bg) 74%, var(--surface-color)));
  border-color: color-mix(in srgb, var(--text-color) 7%, transparent);
  box-shadow: 0 28px 74px color-mix(in srgb, var(--text-color) 10%, transparent);
}
.section-media::before { background: conic-gradient(from 90deg, transparent, color-mix(in srgb, var(--brand-primary) 22%, transparent), color-mix(in srgb, var(--brand-secondary) 20%, transparent), transparent 48%); }
.text-link,
.contact-card a { color: var(--text-color); }

.cert-section { background: linear-gradient(180deg, var(--surface-color), color-mix(in srgb, var(--page-bg) 82%, var(--surface-color))); }
.contact-section { background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 92%, var(--brand-secondary) 8%), color-mix(in srgb, var(--page-bg) 96%, var(--brand-secondary) 4%)); }
.contact-section::after { border-color: color-mix(in srgb, var(--brand-secondary) 18%, transparent); box-shadow: 0 0 0 85px color-mix(in srgb, var(--brand-secondary) 5%, transparent), 0 0 0 170px color-mix(in srgb, var(--brand-primary) 4%, transparent); }
.site-footer { background: color-mix(in srgb, var(--page-bg) 90%, var(--text-color) 10%); color: var(--text-color); border-top-color: color-mix(in srgb, var(--text-color) 7%, transparent); }
.footer-main a:hover { color: var(--text-color); }
.footer-bottom { border-top-color: color-mix(in srgb, var(--text-color) 7%, transparent); }

/* Admin color wheel and landing image controls */
.admin-body {
  --brand-primary: #cb6b72;
  --brand-secondary: #90ae9d;
  --page-bg: #f5f5f7;
  --surface-color: #ffffff;
  --text-color: #1d1d1f;
  --muted-color: #6e6e73;
}
.admin-subhead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
}
.admin-subhead:first-of-type { border-top: 0; }
.admin-subhead h3 { margin: 0; color: var(--text-color); font-size: 1.35rem; letter-spacing: -.025em; }
.admin-subhead p { margin: 5px 0 0; color: var(--muted-color); font-weight: 500; }
.landing-admin-preview {
  overflow: hidden;
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 22px;
  background: var(--page-bg);
  box-shadow: 0 20px 52px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.landing-admin-preview img { width: 100%; height: 360px; object-fit: cover; }
.landing-upload input[type="file"] { margin-top: 8px; }
.color-subhead { margin-top: 12px; }
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.color-control {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-color) 90%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text-color) 6%, transparent);
}
.color-control > span { color: var(--text-color); font-size: .82rem; font-weight: 800; }
.color-control > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; margin-top: 10px; }
.color-control input[type="color"] {
  width: 64px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}
.color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-control input[type="color"]::-webkit-color-swatch { border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: 14px; }
.color-control output {
  color: var(--muted-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  letter-spacing: .03em;
}
.color-live-preview .preview-surface { padding: 28px; border-radius: 20px; }
.color-live-preview span { display: block; color: var(--brand-secondary); font-size: .68rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.color-live-preview strong { display: block; margin-top: 8px; color: var(--text-color); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.055em; }
.color-live-preview p { max-width: 680px; margin: 14px 0 22px; color: var(--muted-color); }
.color-live-preview button { border: 0; border-radius: 999px; padding: 12px 20px; color: #fff; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); font-weight: 800; }

@media (max-width: 840px) {
  .landing-image { height: calc(100svh - 76px); min-height: 520px; }
  .color-picker-grid { grid-template-columns: 1fr 1fr; }
  .landing-admin-preview img { height: 280px; }
}

@media (max-width: 580px) {
  .landing-image { height: 76svh; min-height: 440px; }
  .color-picker-grid { grid-template-columns: 1fr; }
  .landing-admin-preview img { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-image img { animation: none; transform: none; }
}


/* ===== v6 Japanese forest / shaped section redesign ===== */
body.public-site {
  background:
    radial-gradient(900px circle at 8% 10%, color-mix(in srgb, var(--brand-secondary) 18%, transparent), transparent 34%),
    radial-gradient(820px circle at 92% 20%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 94%, #ffffff 6%) 0%, var(--page-bg) 58%, color-mix(in srgb, var(--page-bg) 90%, var(--brand-secondary) 10%) 100%);
  color: var(--text-color);
}
body.public-site::before {
  opacity: .24;
  background:
    radial-gradient(580px circle at var(--mouse-x) var(--mouse-y), color-mix(in srgb, var(--brand-secondary) 18%, transparent), transparent 62%),
    radial-gradient(540px circle at calc(var(--mouse-x) + 120px) calc(var(--mouse-y) - 60px), color-mix(in srgb, var(--brand-primary) 10%, transparent), transparent 60%);
  mix-blend-mode: multiply;
}
.announcement {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-secondary) 80%, #060707), color-mix(in srgb, var(--brand-primary) 74%, #171310) 56%, color-mix(in srgb, var(--brand-secondary) 56%, #202422));
  color: color-mix(in srgb, var(--surface-color) 88%, #ffffff 12%);
  border-bottom-color: color-mix(in srgb, var(--surface-color) 10%, transparent);
}
.site-header {
  background: color-mix(in srgb, var(--brand-secondary) 62%, rgba(15,19,18,.76));
  border-bottom-color: color-mix(in srgb, var(--surface-color) 10%, transparent);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--brand-secondary) 78%, rgba(12,15,14,.92));
  border-bottom-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
  box-shadow: 0 18px 48px rgba(11, 14, 13, .28);
}
.main-nav a { color: color-mix(in srgb, var(--surface-color) 80%, transparent); }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.header-cta,
.btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 88%, #000), var(--brand-primary));
  color: #fff;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.header-cta:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 76%, #000), color-mix(in srgb, var(--brand-primary) 82%, #000));
}
.btn-ghost {
  border-color: color-mix(in srgb, var(--surface-color) 14%, transparent);
  background: rgba(12, 16, 15, .24);
  color: #fff;
}
.btn-light {
  background: color-mix(in srgb, var(--surface-color) 88%, #fff 12%);
  color: var(--brand-secondary);
}

.landing-image {
  height: calc(100svh - 88px);
  min-height: 680px;
  background: color-mix(in srgb, var(--brand-secondary) 88%, #090b0a);
}
.landing-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,10,.56), rgba(8,10,10,.18) 24%, rgba(11,15,14,.08) 48%, rgba(12,15,14,.54) 100%),
    radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--brand-primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--brand-secondary) 26%, transparent), transparent 28%);
}
.landing-image::after {
  z-index: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 4%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, #111 42%, transparent)),
    radial-gradient(circle at 50% 55%, transparent 52%, color-mix(in srgb, #111 10%, transparent) 100%);
}
.landing-image img {
  filter: saturate(.94) contrast(1.03) brightness(.82);
  transform: scale(1.02);
}
.hero-divider {
  height: clamp(132px, 15vw, 190px);
  margin-top: -18px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--page-bg) 88%, transparent) 34%, var(--page-bg) 100%);
}
.hero-divider::before {
  top: 0;
  width: min(86vw, 1120px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-primary) 22%, transparent), color-mix(in srgb, var(--brand-secondary) 24%, transparent) 42%, transparent 72%);
}
.divider-glow { opacity: .2; }
.wave-back { bottom: 54px; opacity: .88; }
.wave-back path { fill: color-mix(in srgb, var(--brand-secondary) 38%, var(--page-bg)); }
.wave-mid { bottom: 22px; opacity: .96; }
.wave-mid path { fill: color-mix(in srgb, var(--brand-primary) 26%, var(--page-bg)); }
.wave-front { bottom: -28px; }
.wave-front path { fill: var(--page-bg); }

.trust-strip {
  margin-top: -8px;
  padding-bottom: 42px;
  background: var(--page-bg);
}
.trust-grid {
  background: color-mix(in srgb, var(--surface-color) 88%, transparent);
  box-shadow: 0 30px 66px color-mix(in srgb, var(--brand-secondary) 10%, transparent);
}

.content-section,
.cert-section,
.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.content-section::before { opacity: .018; }
.content-section::after { opacity: .08; }
.section-separator {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 108px;
  z-index: 1;
  pointer-events: none;
  background: var(--section-fill);
  filter: drop-shadow(0 -8px 12px rgba(0,0,0,.04));
}
.section-grid,
.cert-section > .container,
.contact-section > .container { position: relative; z-index: 2; }
.divider-peaks .section-separator {
  clip-path: polygon(0 100%, 0 34%, 8% 46%, 16% 26%, 24% 48%, 33% 22%, 42% 44%, 51% 18%, 60% 41%, 69% 20%, 79% 42%, 89% 24%, 100% 36%, 100% 100%);
}
.divider-slope .section-separator {
  clip-path: polygon(0 100%, 0 52%, 12% 40%, 24% 54%, 38% 32%, 50% 46%, 63% 24%, 74% 36%, 86% 18%, 100% 30%, 100% 100%);
}
.divider-brush .section-separator {
  clip-path: polygon(0 100%, 0 58%, 7% 56%, 15% 64%, 27% 44%, 38% 58%, 51% 38%, 64% 61%, 76% 44%, 87% 54%, 100% 42%, 100% 100%);
}
.theme-light {
  --section-fill: color-mix(in srgb, var(--surface-color) 96%, #fff 4%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 98%, #fff 2%) 0%, color-mix(in srgb, var(--surface-color) 94%, var(--page-bg) 6%) 100%);
}
.theme-cream {
  --section-fill: color-mix(in srgb, var(--page-bg) 88%, var(--surface-color) 12%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 92%, var(--surface-color) 8%) 0%, color-mix(in srgb, var(--page-bg) 78%, var(--surface-color) 14%) 100%);
}
.theme-dark {
  --section-fill: color-mix(in srgb, var(--brand-secondary) 84%, #151917);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 88%, #111514) 0%, color-mix(in srgb, var(--brand-secondary) 74%, #1b1f1d) 100%);
}
.theme-accent {
  --section-fill: color-mix(in srgb, var(--page-bg) 76%, var(--brand-primary) 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 86%, var(--brand-primary) 14%) 0%, color-mix(in srgb, var(--page-bg) 72%, var(--brand-primary) 18%) 100%);
}
.theme-dark .eyebrow,
.theme-dark h2,
.theme-dark .rich-text,
.theme-dark .text-link,
.theme-dark .product-grid article h3,
.theme-dark .product-grid article p,
.theme-dark .product-grid article span { color: color-mix(in srgb, var(--surface-color) 92%, #fff 8%); }
.theme-dark .section-media {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand-secondary) 78%, #111), color-mix(in srgb, var(--brand-secondary) 58%, var(--surface-color) 42%));
  border-color: color-mix(in srgb, var(--surface-color) 10%, transparent);
}
.theme-dark .text-link::after { background: currentColor; }
.theme-accent .eyebrow { color: color-mix(in srgb, var(--brand-primary) 70%, var(--brand-secondary) 30%); }
.section-media {
  border-radius: 30px;
  box-shadow: 0 32px 82px color-mix(in srgb, var(--brand-secondary) 12%, transparent);
}
.section-media:hover { transform: translateY(-8px) rotate(.35deg); }
.section-media img, .section-media video { border-radius: 22px; }
.product-grid article,
.cert-grid > div,
.contact-card,
.legal-wrap,
.login-card,
.admin-panel,
.admin-help,
.color-live-preview .preview-surface {
  border-radius: 28px;
}
.product-grid article { background: color-mix(in srgb, var(--surface-color) 86%, transparent); }
.cert-section {
  --section-fill: color-mix(in srgb, var(--surface-color) 94%, #fff 6%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 96%, #fff 4%) 0%, color-mix(in srgb, var(--page-bg) 90%, var(--surface-color) 10%) 100%);
  border-top: 0;
  padding-top: 128px;
}
.contact-section {
  --section-fill: color-mix(in srgb, var(--brand-secondary) 76%, var(--page-bg) 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 78%, #1b1f1d) 0%, color-mix(in srgb, var(--brand-secondary) 64%, #242926) 100%);
  padding-top: 128px;
}
.contact-section .eyebrow,
.contact-section h2,
.contact-section p,
.contact-section .btn-light,
.contact-card,
.contact-card h3,
.contact-card p,
.contact-card dt,
.contact-card dd,
.contact-card a { color: color-mix(in srgb, var(--surface-color) 92%, #fff 8%); }
.contact-card {
  background: color-mix(in srgb, var(--brand-secondary) 64%, rgba(255,255,255,.08));
  border-color: color-mix(in srgb, var(--surface-color) 10%, transparent);
  box-shadow: 0 34px 90px rgba(7, 10, 9, .26);
}
.contact-card a { opacity: .92; }
.contact-section::before { opacity: .14; }
.contact-section::after { border-color: color-mix(in srgb, var(--surface-color) 8%, transparent); box-shadow: 0 0 0 85px color-mix(in srgb, var(--brand-primary) 5%, transparent), 0 0 0 170px color-mix(in srgb, var(--surface-color) 3%, transparent); }
.site-footer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 92%, #080909) 0%, color-mix(in srgb, var(--brand-secondary) 86%, #050606) 100%);
  color: color-mix(in srgb, var(--surface-color) 88%, #fff 12%);
  border-top-color: color-mix(in srgb, var(--surface-color) 8%, transparent);
}
.footer-main h3,
.footer-brand p,
.footer-main a,
.footer-main p,
.footer-bottom { color: color-mix(in srgb, var(--surface-color) 74%, transparent); }
.footer-main a:hover { color: #fff; }
.footer-bottom { border-top-color: color-mix(in srgb, var(--surface-color) 8%, transparent); }

/* keep admin color controls lighter and clear */
.admin-body {
  --brand-primary: #b33a2e;
  --brand-secondary: #183a34;
  --page-bg: #d8d4cc;
  --surface-color: #efeae3;
  --text-color: #202422;
  --muted-color: #5f645f;
}
.admin-header { background: rgba(250,249,246,.9); }
.landing-admin-preview { background: color-mix(in srgb, var(--page-bg) 92%, #fff 8%); }
.color-live-preview span { color: var(--brand-secondary); }
.color-live-preview button { background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); }

@media (max-width: 840px) {
  .landing-image { min-height: 560px; }
  .hero-divider { height: 118px; }
  .section-separator { height: 86px; }
  .cert-section, .contact-section { padding-top: 102px; }
}

@media (max-width: 580px) {
  .landing-image { min-height: 460px; }
  .section-separator { height: 68px; }
  .trust-strip { padding-bottom: 30px; }
  .cert-section, .contact-section { padding-top: 86px; }
}


/* ===== v7 immersive landing / hidden header ===== */
body.public-site .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
body.public-site.scrolled-header .site-header {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.public-site .landing-image {
  height: 100svh;
  min-height: 720px;
  margin-top: 0;
}
body.public-site .trust-strip {
  margin-top: 0;
  padding-top: 26px;
}
body.public-site .scroll-progress { opacity: .94; }

@media (max-width: 840px) {
  body.public-site .landing-image {
    height: 100svh;
    min-height: 560px;
  }
}

@media (max-width: 580px) {
  body.public-site .landing-image {
    height: 100svh;
    min-height: 480px;
  }
}

/* ===== v8 animated language orbit and transition ===== */
.language-orbit {
  position: relative;
  z-index: 180;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin-left: 2px;
  overflow: visible;
}
.language-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--surface-color) 24%, transparent);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--brand-primary) 35%, transparent), transparent 46%),
    color-mix(in srgb, var(--brand-secondary) 88%, #080b0a);
  box-shadow: 0 12px 28px rgba(4, 7, 6, .25), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: width .36s cubic-bezier(.2,.8,.2,1), height .36s cubic-bezier(.2,.8,.2,1), transform .36s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease;
}
.language-core span {
  max-width: 42px;
  overflow: hidden;
  color: inherit;
  font-size: .46rem;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size .3s ease, max-width .3s ease;
}
.language-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 182px;
  height: 182px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 20%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--brand-secondary) 90%, #070908) 0 34%, transparent 35%),
    conic-gradient(from 20deg, color-mix(in srgb, var(--brand-primary) 22%, transparent), color-mix(in srgb, var(--brand-secondary) 20%, transparent), color-mix(in srgb, var(--brand-primary) 18%, transparent));
  box-shadow: 0 26px 70px rgba(4, 7, 6, .34), inset 0 0 0 10px color-mix(in srgb, var(--brand-secondary) 52%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.22) rotate(-28deg);
  transition: opacity .28s ease, transform .46s cubic-bezier(.17,.84,.32,1.22);
}
.language-flags {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.language-flag {
  --x: 0px;
  --y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255,255,255,.76);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(4, 7, 6, .28);
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.25);
  transition: opacity .22s ease, transform .44s cubic-bezier(.17,.84,.32,1.22), box-shadow .2s ease, border-color .2s ease;
}
.language-flag span {
  display: block;
  font-size: 1.27rem;
  line-height: 1;
  transform: translateY(-.5px);
}
.language-flag:nth-child(1) { --x: 0px; --y: -86px; transition-delay: .02s; }
.language-flag:nth-child(2) { --x: 67px; --y: -54px; transition-delay: .05s; }
.language-flag:nth-child(3) { --x: 84px; --y: 18px; transition-delay: .08s; }
.language-flag:nth-child(4) { --x: 39px; --y: 76px; transition-delay: .11s; }
.language-flag:nth-child(5) { --x: -39px; --y: 76px; transition-delay: .14s; }
.language-flag:nth-child(6) { --x: -84px; --y: 18px; transition-delay: .17s; }
.language-flag:nth-child(7) { --x: -67px; --y: -54px; transition-delay: .20s; }
.language-orbit:hover .language-core,
.language-orbit:focus-within .language-core,
.language-orbit.is-open .language-core {
  width: 70px;
  height: 70px;
  background:
    radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--brand-primary) 45%, transparent), transparent 48%),
    color-mix(in srgb, var(--brand-secondary) 93%, #050706);
  box-shadow: 0 18px 40px rgba(4, 7, 6, .35), inset 0 1px rgba(255,255,255,.14);
}
.language-orbit:hover .language-core span,
.language-orbit:focus-within .language-core span,
.language-orbit.is-open .language-core span {
  max-width: 62px;
  font-size: .53rem;
}
.language-orbit:hover .language-ring,
.language-orbit:focus-within .language-ring,
.language-orbit.is-open .language-ring {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.language-orbit:hover .language-flags,
.language-orbit:focus-within .language-flags,
.language-orbit.is-open .language-flags {
  pointer-events: auto;
}
.language-orbit:hover .language-flag,
.language-orbit:focus-within .language-flag,
.language-orbit.is-open .language-flag {
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
}
.language-flag:hover,
.language-flag:focus-visible,
.language-flag.is-active {
  z-index: 6;
  border-color: var(--brand-primary);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-primary) 34%, transparent);
  transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.14) !important;
  outline: none;
}
.language-flag.is-active::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand-primary);
}

.language-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--brand-secondary) 94%, #050706);
  transition: opacity .26s ease, visibility 0s linear .26s, background .65s cubic-bezier(.7,.05,.9,.1);
}
.language-loader.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .26s ease, visibility 0s linear 0s, background .65s cubic-bezier(.7,.05,.9,.1);
}
.language-loader.is-zooming {
  background: color-mix(in srgb, var(--brand-primary) 92%, #5d130f);
}
.language-loader-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  color: #fff;
}
.loader-globe-wrap {
  width: 158px;
  height: 158px;
  display: grid;
  place-items: center;
  transform-origin: 72% 29%;
  will-change: transform;
}
.loader-globe {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.26));
}
.loader-globe circle,
.loader-globe path {
  fill: none;
  stroke: color-mix(in srgb, var(--brand-primary) 82%, #fff 18%);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loader-globe .loader-red-zone {
  fill: var(--brand-primary);
  stroke: #fff;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--brand-primary) 75%, transparent));
}
.language-loader.is-active:not(.is-zooming) .loader-globe-wrap {
  animation: language-globe-spin .82s cubic-bezier(.45,.05,.25,1) both;
}
.language-loader.is-zooming .loader-globe-wrap {
  animation: none;
  transform: scale(30);
  transition: transform .7s cubic-bezier(.72,.02,.94,.22);
}
.language-loader-label {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .22s ease, transform .22s ease;
}
.language-loader.is-zooming .language-loader-label {
  opacity: 0;
  transform: translateY(10px);
}
body.language-changing {
  overflow: hidden;
}
@keyframes language-globe-spin {
  0% { transform: rotate(0deg) scale(.82); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .eyebrow { flex-direction: row-reverse; justify-content: flex-end; }
html[dir="rtl"] .section-actions,
html[dir="rtl"] .hero-actions { justify-content: flex-start; }
html[dir="rtl"] .contact-card dl div { direction: rtl; }
html[dir="rtl"] .footer-main { direction: rtl; }
html[dir="rtl"] .language-core span { letter-spacing: 0; }

@media (max-width: 1180px) {
  .language-orbit { margin-inline: 2px 8px; }
  .language-ring { width: 170px; height: 170px; }
  .language-flag:nth-child(1) { --x: 0px; --y: -80px; }
  .language-flag:nth-child(2) { --x: 62px; --y: -50px; }
  .language-flag:nth-child(3) { --x: 78px; --y: 17px; }
  .language-flag:nth-child(4) { --x: 36px; --y: 70px; }
  .language-flag:nth-child(5) { --x: -36px; --y: 70px; }
  .language-flag:nth-child(6) { --x: -78px; --y: 17px; }
  .language-flag:nth-child(7) { --x: -62px; --y: -50px; }
}

@media (max-width: 840px) {
  .language-orbit {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    margin-left: 4px;
  }
  .language-core { width: 44px; height: 44px; }
  .language-core span { font-size: .42rem; }
  .language-orbit:hover .language-core,
  .language-orbit:focus-within .language-core,
  .language-orbit.is-open .language-core { width: 62px; height: 62px; }
  .language-ring { width: 154px; height: 154px; }
  .language-flag { width: 34px; height: 34px; }
  .language-flag span { font-size: 1.18rem; }
  .language-flag:nth-child(1) { --x: 0px; --y: 74px; }
  .language-flag:nth-child(2) { --x: -58px; --y: 47px; }
  .language-flag:nth-child(3) { --x: -72px; --y: -15px; }
  .language-flag:nth-child(4) { --x: -33px; --y: -66px; }
  .language-flag:nth-child(5) { --x: 33px; --y: -66px; }
  .language-flag:nth-child(6) { --x: 72px; --y: -15px; }
  .language-flag:nth-child(7) { --x: 58px; --y: 47px; }
  .loader-globe-wrap { width: 132px; height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .language-core,
  .language-ring,
  .language-flag,
  .language-loader,
  .loader-globe-wrap,
  .language-loader-label { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Keep the opened language circle fully visible below the fixed header. */
.language-ring,
.language-flag {
  top: calc(50% + 82px);
}
@media (max-width: 840px) {
  .language-ring,
  .language-flag { top: calc(50% + 72px); }
}


/* ===== v9 language selector usability and loader refinement ===== */
.language-orbit {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin-left: 6px;
}
.language-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 84px);
  z-index: 0;
  width: 232px;
  height: 246px;
  border-radius: 48%;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.language-orbit:hover::before,
.language-orbit:focus-within::before,
.language-orbit.is-open::before {
  pointer-events: auto;
}
.language-core {
  width: 56px;
  height: 56px;
}
.language-core span {
  max-width: 48px;
  font-size: .5rem;
}
.language-ring {
  width: 204px;
  height: 204px;
}
.language-flag {
  width: 40px;
  height: 40px;
}
.language-flag span {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.45rem;
  line-height: 1;
}
.language-flag:nth-child(1) { --x: 0px; --y: -96px; }
.language-flag:nth-child(2) { --x: 75px; --y: -60px; }
.language-flag:nth-child(3) { --x: 94px; --y: 20px; }
.language-flag:nth-child(4) { --x: 44px; --y: 85px; }
.language-flag:nth-child(5) { --x: -44px; --y: 85px; }
.language-flag:nth-child(6) { --x: -94px; --y: 20px; }
.language-flag:nth-child(7) { --x: -75px; --y: -60px; }
.language-orbit:hover .language-core,
.language-orbit:focus-within .language-core,
.language-orbit.is-open .language-core {
  width: 80px;
  height: 80px;
}
.language-orbit:hover .language-core span,
.language-orbit:focus-within .language-core span,
.language-orbit.is-open .language-core span {
  max-width: 70px;
  font-size: .58rem;
}
.language-ring,
.language-flag {
  top: calc(50% + 88px);
}

/* The globe rotates once, then rapidly shrinks away instead of zooming in. */
.language-loader.is-zooming {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--brand-secondary) 94%, #050706);
}
.language-loader.is-zooming .loader-globe-wrap {
  animation: none;
  opacity: 0;
  transform: scale(.035) rotate(360deg);
  transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.7,.02,1,.2), opacity .22s ease .08s;
}
.language-loader.is-zooming .language-loader-label {
  opacity: 0;
  transform: translateY(8px) scale(.94);
}

@media (max-width: 1180px) {
  .language-orbit { flex-basis: 52px; width: 52px; height: 52px; }
  .language-core { width: 52px; height: 52px; }
  .language-ring { width: 188px; height: 188px; }
  .language-flag { width: 38px; height: 38px; }
  .language-flag span { font-size: 1.36rem; }
  .language-flag:nth-child(1) { --x: 0px; --y: -88px; }
  .language-flag:nth-child(2) { --x: 69px; --y: -55px; }
  .language-flag:nth-child(3) { --x: 86px; --y: 18px; }
  .language-flag:nth-child(4) { --x: 40px; --y: 78px; }
  .language-flag:nth-child(5) { --x: -40px; --y: 78px; }
  .language-flag:nth-child(6) { --x: -86px; --y: 18px; }
  .language-flag:nth-child(7) { --x: -69px; --y: -55px; }
}

@media (max-width: 840px) {
  .language-orbit {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    margin-left: 5px;
  }
  .language-orbit::before {
    top: calc(50% + 75px);
    width: 196px;
    height: 214px;
  }
  .language-core { width: 48px; height: 48px; }
  .language-core span { font-size: .44rem; }
  .language-orbit:hover .language-core,
  .language-orbit:focus-within .language-core,
  .language-orbit.is-open .language-core { width: 68px; height: 68px; }
  .language-ring { width: 166px; height: 166px; }
  .language-flag { width: 36px; height: 36px; }
  .language-flag span { font-size: 1.28rem; }
  .language-ring,
  .language-flag { top: calc(50% + 76px); }
  .language-flag:nth-child(1) { --x: 0px; --y: 78px; }
  .language-flag:nth-child(2) { --x: -61px; --y: 49px; }
  .language-flag:nth-child(3) { --x: -76px; --y: -16px; }
  .language-flag:nth-child(4) { --x: -35px; --y: -70px; }
  .language-flag:nth-child(5) { --x: 35px; --y: -70px; }
  .language-flag:nth-child(6) { --x: 76px; --y: -16px; }
  .language-flag:nth-child(7) { --x: 61px; --y: 49px; }
}

/* ===== v10 centered language selector ===== */
.language-menu-trigger {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--surface-color) 22%, transparent);
  border-radius: 50%;
  padding: 0;
  color: color-mix(in srgb, var(--surface-color) 88%, #fff 12%);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-secondary) 74%, #0a0d0c), color-mix(in srgb, var(--brand-primary) 42%, var(--brand-secondary)));
  box-shadow: 0 14px 32px rgba(7,10,9,.24), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.language-menu-trigger span {
  max-width: 58px;
  font-size: .53rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
}
.language-menu-trigger:hover,
.language-menu-trigger:focus-visible,
.language-menu-trigger[aria-expanded="true"] {
  transform: scale(1.08);
  border-color: color-mix(in srgb, var(--brand-primary) 50%, #fff 10%);
  box-shadow: 0 18px 42px rgba(7,10,9,.3), 0 0 0 7px color-mix(in srgb, var(--brand-primary) 11%, transparent);
  outline: none;
}

.language-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .34s ease, visibility .34s ease;
}
.language-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.language-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: default;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--brand-primary) 15%, transparent), transparent 38%),
    rgba(8, 12, 10, .76);
  backdrop-filter: blur(18px) saturate(110%);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
}
.language-selector-circle {
  position: relative;
  z-index: 1;
  width: min(790px, 91vmin);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(64px, 8vmin, 94px) clamp(58px, 8vmin, 92px) clamp(52px, 7vmin, 78px);
  border: 1px solid color-mix(in srgb, var(--surface-color) 18%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.13), transparent 30%),
    radial-gradient(circle at 75% 82%, color-mix(in srgb, var(--brand-primary) 17%, transparent), transparent 32%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-secondary) 88%, #0b0e0d), color-mix(in srgb, var(--brand-secondary) 68%, #252927));
  box-shadow: 0 50px 140px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.12);
  transform: scale(.82) rotate(-4deg);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.language-selector-circle::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 8%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.language-selector-circle::after {
  content: "";
  position: absolute;
  width: 45%;
  aspect-ratio: 1;
  right: -10%;
  top: -9%;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 32px color-mix(in srgb, var(--brand-primary) 3%, transparent), 0 0 0 64px color-mix(in srgb, var(--surface-color) 2%, transparent);
  pointer-events: none;
}
.language-modal.is-open .language-selector-circle {
  transform: scale(1) rotate(0);
  opacity: 1;
}
.language-modal-close {
  position: absolute;
  top: 58px;
  right: 92px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 14%, transparent);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .22s ease, background .22s ease;
}
.language-modal-close:hover,
.language-modal-close:focus-visible {
  transform: rotate(90deg) scale(1.06);
  background: color-mix(in srgb, var(--brand-primary) 70%, transparent);
  outline: none;
}
.language-selector-heading {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(18px, 2.5vmin, 30px);
  text-align: center;
}
.language-selector-kicker {
  display: block;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--brand-primary) 82%, #fff 18%);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .22em;
}
.language-selector-heading h2 {
  margin: 0;
  color: #fff;
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4.2vmin, 3.3rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.language-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.3vmin, 14px);
}
.language-choice {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 11%, transparent);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  color: color-mix(in srgb, var(--surface-color) 88%, #fff 12%);
  background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  cursor: pointer;
  text-align: left;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.language-choice:hover,
.language-choice:focus-visible {
  transform: translateY(-2px) scale(1.025);
  border-color: color-mix(in srgb, var(--brand-primary) 52%, #fff 10%);
  background: color-mix(in srgb, var(--brand-primary) 22%, rgba(255,255,255,.08));
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  outline: none;
}
.language-choice.is-active {
  border-color: color-mix(in srgb, var(--brand-primary) 72%, #fff 8%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 58%, transparent), color-mix(in srgb, var(--brand-secondary) 58%, transparent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.language-choice-flag {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  font-size: 1.28rem;
  line-height: 1;
  box-shadow: 0 7px 16px rgba(0,0,0,.16);
}
.language-choice-name {
  overflow: hidden;
  font-size: clamp(.73rem, 1.25vmin, .92rem);
  font-weight: 780;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.language-modal-open {
  overflow: hidden;
}
html[dir="rtl"] .language-choice {
  grid-template-columns: minmax(0, 1fr) 34px;
  text-align: right;
}
html[dir="rtl"] .language-choice-flag {
  order: 2;
}

@media (max-width: 1080px) {
  .language-menu-trigger { width: 64px; height: 64px; }
  .language-menu-trigger span { font-size: .48rem; }
}

@media (max-width: 840px) {
  .language-menu-trigger {
    width: 54px;
    height: 54px;
    margin-left: 4px;
  }
  .language-menu-trigger span { font-size: .42rem; letter-spacing: .08em; }
  .language-selector-circle {
    width: min(760px, 94vmin);
    padding: 56px 54px 48px;
  }
  .language-modal-close { top: 42px; right: 72px; }
  .language-grid { gap: 8px; }
  .language-choice { min-height: 50px; grid-template-columns: 29px minmax(0,1fr); padding: 6px 10px 6px 7px; gap: 7px; }
  .language-choice-flag { width: 29px; height: 29px; font-size: 1.08rem; }
  .language-choice-name { font-size: .69rem; }
}

@media (max-width: 580px) {
  .language-modal { padding: 8px; }
  .language-selector-circle {
    width: 96vw;
    min-height: 96vw;
    aspect-ratio: auto;
    border-radius: 42px;
    padding: 52px 18px 28px;
  }
  .language-selector-circle::before { inset: 10px; border-radius: 34px; }
  .language-selector-circle::after { display: none; }
  .language-modal-close { top: 18px; right: 20px; width: 40px; height: 40px; }
  .language-selector-heading { margin-bottom: 16px; }
  .language-selector-heading h2 { font-size: 2rem; }
  .language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .language-choice {
    min-height: 66px;
    grid-template-columns: 1fr;
    grid-template-rows: 28px auto;
    justify-items: center;
    gap: 4px;
    border-radius: 18px;
    padding: 7px 5px;
    text-align: center;
  }
  .language-choice-flag { width: 28px; height: 28px; font-size: 1rem; }
  .language-choice-name { width: 100%; font-size: .62rem; white-space: normal; text-align: center; }
  html[dir="rtl"] .language-choice { grid-template-columns: 1fr; text-align: center; }
  html[dir="rtl"] .language-choice-flag { order: initial; }
}

@media (prefers-reduced-motion: reduce) {
  .language-selector-circle,
  .language-menu-trigger,
  .language-choice,
  .language-modal-close { transition-duration: .001ms !important; }
}

/* ===== v11 image positioning, clean language list and mobile refinements ===== */
.landing-image img {
  object-position: var(--landing-x, 50%) var(--landing-y, 50%);
  transform: scale(var(--landing-scale, 1));
  animation: landing-image-fade-v11 1s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: var(--landing-x, 50%) var(--landing-y, 50%);
}
@keyframes landing-image-fade-v11 {
  from { opacity: 0; filter: saturate(.9) blur(3px); }
  to { opacity: 1; filter: none; }
}
.section-media img,
.section-media video {
  object-position: var(--media-x, 50%) var(--media-y, 50%);
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--media-scale, 1));
  transform-origin: var(--media-x, 50%) var(--media-y, 50%);
}

/* The flag emojis were displayed as empty white circles on some systems. */
.language-choice-flag { display: none !important; }
.language-choice,
html[dir="rtl"] .language-choice {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}
.language-choice-name {
  width: 100%;
  text-align: center;
}

/* Admin image positioning controls */
.image-position-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-color) 90%, transparent);
}
.image-position-controls label {
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--text-color) 7%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--page-bg) 72%, var(--surface-color));
}
.image-position-controls output {
  align-self: flex-end;
  color: var(--brand-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
}
.image-position-controls input[type="range"] {
  width: 100%;
  padding: 0;
  accent-color: var(--brand-primary);
}
.landing-admin-preview,
.section-admin-preview {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%),
    linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%),
    var(--page-bg);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}
.section-admin-preview {
  min-height: 300px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 22px;
  box-shadow: 0 20px 52px color-mix(in srgb, var(--text-color) 8%, transparent);
}
.landing-admin-preview img,
.section-admin-preview img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: var(--preview-x, 50%) var(--preview-y, 50%);
  transform: scale(var(--preview-scale, 1));
  transform-origin: var(--preview-x, 50%) var(--preview-y, 50%);
  transition: transform .18s ease, object-position .18s ease;
}
.section-admin-preview.is-empty {
  display: grid;
  place-items: center;
  color: var(--muted-color);
}
.section-admin-preview.is-empty span { position: absolute; z-index: 1; }
.section-admin-preview.is-empty.has-image span { display: none; }

@media (max-width: 840px) {
  .image-position-controls { grid-template-columns: 1fr; }
  .language-modal {
    align-items: center;
    padding: 10px;
  }
  .language-selector-circle {
    width: min(94vw, 680px);
    max-height: calc(100dvh - 20px);
    aspect-ratio: auto;
    overflow-y: auto;
    border-radius: 34px;
    padding: 60px 20px 28px;
    overscroll-behavior: contain;
  }
  .language-selector-circle::before { inset: 10px; border-radius: 27px; }
  .language-selector-circle::after { display: none; }
  .language-modal-close { top: 17px; right: 18px; }
  .language-selector-heading { margin-bottom: 18px; }
  .language-selector-heading h2 { font-size: clamp(1.7rem, 8vw, 2.35rem); }
  .language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .language-choice {
    min-height: 48px;
    border-radius: 15px;
    padding: 9px 8px;
  }
  .language-choice-name {
    font-size: clamp(.67rem, 3.2vw, .82rem);
    line-height: 1.18;
    white-space: normal;
  }
  .landing-image img {
    object-fit: contain;
    object-position: center;
    transform: none !important;
    background: color-mix(in srgb, var(--page-bg) 88%, #fff 12%);
  }
  .section-media img,
  .section-media video {
    width: 100%;
    height: auto;
    max-height: 68svh;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    transform: none !important;
    background: color-mix(in srgb, var(--surface-color) 88%, var(--page-bg));
  }
}

@media (max-width: 480px) {
  .language-menu-trigger { width: 48px; height: 48px; }
  .language-menu-trigger span { font-size: .38rem; letter-spacing: .055em; }
  .language-selector-circle {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    padding: 56px 12px 18px;
    border-radius: 26px;
  }
  .language-selector-circle::before { inset: 7px; border-radius: 21px; }
  .language-grid { gap: 6px; }
  .language-choice { min-height: 46px; padding: 8px 6px; }
  .language-choice-name { font-size: .66rem; }
  .landing-image { background: color-mix(in srgb, var(--page-bg) 90%, var(--brand-secondary) 10%); }
  .section-admin-preview { min-height: 220px; }
}

.landing-admin-preview { height: 360px; min-height: 0; }
.section-admin-preview { height: 300px; min-height: 0; }
.landing-admin-preview img,
.section-admin-preview img {
  position: absolute;
  inset: 0;
}
@media (max-width: 580px) {
  .landing-admin-preview { height: 240px; }
  .section-admin-preview { height: 220px; }
}

@media (max-width: 840px) {
  .language-choice,
  html[dir="rtl"] .language-choice {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: stretch;
    gap: 0;
    text-align: center;
  }
}


/* ===== v13 tea bag cookie banner ===== */
.cookie-teabag {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 140;
  width: min(92vw, 560px);
  display: grid;
  justify-items: center;
  transform: translate(-50%, -132%);
  opacity: 0;
  pointer-events: none;
  transition: transform .68s cubic-bezier(.2,.9,.2,1), opacity .35s ease;
}
.cookie-teabag.is-visible,
.cookie-teabag.is-dismissing {
  pointer-events: auto;
}
.cookie-teabag.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.cookie-teabag.is-dismissing {
  transform: translate(-50%, -132%);
  opacity: 0;
}
.cookie-string {
  width: 2px;
  height: 74px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), color-mix(in srgb, var(--surface-color) 72%, transparent));
  box-shadow: 0 0 0 1px rgba(0,0,0,.03);
}
.cookie-card {
  position: relative;
  width: 100%;
  padding: 22px 24px 24px;
  border-radius: 26px 26px 34px 34px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 18%, transparent);
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 92%, #0b100f) 0%, color-mix(in srgb, var(--brand-secondary) 84%, #131816) 100%);
  color: color-mix(in srgb, var(--surface-color) 94%, #fff 6%);
  box-shadow: 0 28px 70px rgba(4, 6, 6, .28);
  overflow: hidden;
}
.cookie-card::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 76px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-color) 12%, transparent);
  transform: translateX(-50%);
}
.cookie-card::after {
  content: "";
  position: absolute;
  inset: auto -14% -38% -14%;
  height: 160px;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 66%);
  pointer-events: none;
}
.cookie-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 12px;
}
.cookie-kicker,
.cookie-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cookie-kicker {
  background: color-mix(in srgb, var(--surface-color) 10%, transparent);
  color: color-mix(in srgb, var(--surface-color) 86%, transparent);
}
.cookie-badge {
  background: color-mix(in srgb, var(--brand-primary) 24%, transparent);
  color: #fff;
}
.cookie-card h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.55rem, 3.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.cookie-card p {
  margin: 0;
  color: color-mix(in srgb, var(--surface-color) 82%, transparent);
  font-size: .98rem;
  line-height: 1.62;
}
.cookie-actions {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.cookie-link {
  color: color-mix(in srgb, var(--surface-color) 88%, transparent);
  font-weight: 700;
  text-decoration: none;
}
.cookie-link:hover { text-decoration: underline; }
.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cookie-buttons .btn {
  min-width: 148px;
}
.cookie-buttons .btn-ghost {
  border-color: color-mix(in srgb, var(--surface-color) 18%, transparent);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.cookie-buttons .btn-ghost:hover {
  background: rgba(255,255,255,.1);
}

@media (max-width: 840px) {
  .cookie-teabag {
    width: min(94vw, 540px);
  }
  .cookie-string { height: 62px; }
  .cookie-card {
    padding: 20px 18px 20px;
    border-radius: 22px 22px 28px 28px;
  }
}

@media (max-width: 580px) {
  .cookie-teabag {
    width: min(96vw, 420px);
  }
  .cookie-string { height: 50px; }
  .cookie-card-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-card h2 {
    font-size: 1.42rem;
  }
  .cookie-card p {
    font-size: .92rem;
    line-height: 1.54;
  }
  .cookie-actions { gap: 14px; }
  .cookie-buttons {
    flex-direction: column;
  }
  .cookie-buttons .btn {
    width: 100%;
    min-width: 0;
  }
}

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


/* ===== v14 realistic teabag cookie banner overrides ===== */
.cookie-teabag {
  width: min(92vw, 500px);
}
.cookie-string {
  width: 3px;
  height: 92px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      color-mix(in srgb, var(--surface-color) 78%, #f8f2e6 22%) 38%,
      color-mix(in srgb, var(--surface-color) 56%, transparent) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.02);
}
.cookie-card {
  position: relative;
  width: 100%;
  padding: 34px 28px 28px;
  border-radius: 28px 28px 44px 44px / 18px 18px 64px 64px;
  border: 1px solid rgba(125, 111, 91, .26);
  background:
    linear-gradient(180deg, rgba(255,252,246,.96) 0%, rgba(246,239,226,.95) 100%);
  color: #2b302b;
  box-shadow: 0 28px 70px rgba(12, 14, 12, .18), inset 0 1px 0 rgba(255,255,255,.75);
  overflow: visible;
  isolation: isolate;
  clip-path: polygon(11% 0, 89% 0, 95% 10%, 97% 24%, 100% 84%, 93% 100%, 7% 100%, 0 84%, 3% 24%, 5% 10%);
}
.cookie-card > * {
  position: relative;
  z-index: 3;
}
.cookie-card::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  width: 84px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(219,208,188,.95), rgba(193,182,160,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(80, 68, 50, .08);
  transform: translateX(-50%);
  z-index: 4;
}
.cookie-card::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 9%;
  height: 33%;
  border-radius: 24px 24px 38px 38px / 12px 12px 46px 46px;
  background:
    radial-gradient(circle at 12% 30%, rgba(91, 60, 27, .74) 0 3px, transparent 3.5px),
    radial-gradient(circle at 25% 56%, rgba(141, 89, 30, .8) 0 4px, transparent 4.5px),
    radial-gradient(circle at 38% 38%, rgba(72, 107, 62, .68) 0 4px, transparent 4.5px),
    radial-gradient(circle at 48% 64%, rgba(169, 51, 41, .42) 0 5px, transparent 5.5px),
    radial-gradient(circle at 63% 36%, rgba(84, 57, 28, .72) 0 4px, transparent 4.5px),
    radial-gradient(circle at 76% 56%, rgba(91, 129, 73, .6) 0 4px, transparent 4.5px),
    radial-gradient(circle at 88% 28%, rgba(149, 104, 54, .72) 0 3px, transparent 3.5px),
    linear-gradient(180deg, rgba(167, 70, 47, .18) 0%, rgba(120, 79, 36, .48) 18%, rgba(104, 77, 44, .68) 58%, rgba(82, 61, 35, .76) 100%);
  box-shadow: inset 0 10px 18px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18);
  opacity: .9;
  z-index: 1;
}
.cookie-card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}
.cookie-card-top::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(121, 107, 87, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateX(-50%);
  z-index: 5;
}
.cookie-kicker {
  background: rgba(235, 226, 211, .78);
  color: #6e4e38;
  border: 1px solid rgba(125, 111, 91, .18);
}
.cookie-badge {
  position: absolute;
  right: -18px;
  bottom: -22px;
  min-width: 86px;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(250,246,238,.98), rgba(237,227,208,.96));
  color: #7a503f;
  border: 1px solid rgba(125, 111, 91, .22);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  transform: rotate(6deg);
}
.cookie-badge::before {
  content: "";
  position: absolute;
  left: -52px;
  top: 10px;
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(194,183,164,.8), rgba(170,157,136,.45));
  transform: rotate(-11deg);
  transform-origin: right center;
}
.cookie-card h2 {
  margin: 0 0 10px;
  color: #253027;
  font-size: clamp(1.58rem, 3.5vw, 2.06rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.cookie-card p {
  margin: 0;
  color: #4c514a;
  font-size: .97rem;
  line-height: 1.6;
  max-width: 92%;
}
.cookie-actions {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
.cookie-link {
  color: #7a503f;
  font-weight: 800;
  text-decoration: none;
}
.cookie-link:hover { text-decoration: underline; }
.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cookie-buttons .btn {
  min-width: 148px;
}
.cookie-buttons .btn-ghost {
  border-color: rgba(125, 111, 91, .2);
  background: rgba(255,255,255,.48);
  color: #2b302b;
}
.cookie-buttons .btn-ghost:hover {
  background: rgba(255,255,255,.72);
}
.cookie-buttons .btn-primary {
  box-shadow: 0 14px 26px rgba(129, 48, 35, .18);
}

@media (max-width: 840px) {
  .cookie-teabag { width: min(94vw, 468px); }
  .cookie-string { height: 72px; }
  .cookie-card {
    padding: 30px 20px 24px;
    border-radius: 24px 24px 38px 38px / 16px 16px 54px 54px;
  }
  .cookie-badge {
    right: -10px;
    bottom: -18px;
    min-width: 78px;
    padding: 7px 12px;
  }
}

@media (max-width: 580px) {
  .cookie-teabag { width: min(96vw, 390px); }
  .cookie-string { height: 56px; }
  .cookie-card {
    padding: 28px 16px 22px;
    clip-path: polygon(10% 0, 90% 0, 95% 11%, 97% 24%, 100% 86%, 92% 100%, 8% 100%, 0 86%, 3% 24%, 5% 11%);
  }
  .cookie-card p { max-width: 100%; font-size: .91rem; }
  .cookie-card::after {
    left: 6%; right: 6%; bottom: 10%; height: 28%;
  }
  .cookie-card-top { gap: 10px; }
  .cookie-badge {
    position: static;
    transform: rotate(0deg);
    margin-top: 2px;
  }
  .cookie-badge::before { display: none; }
  .cookie-buttons { flex-direction: column; }
  .cookie-buttons .btn { width: 100%; min-width: 0; }
}


/* ===== v15 larger video uploads and adjustable media width ===== */
.section-media {
  width: min(var(--media-width, 100%), 100%);
  justify-self: center;
}
.section-grid.media-left .section-media,
.section-grid.media-right .section-media {
  align-self: center;
}
.image-position-controls {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.section-admin-preview img,
.section-admin-preview video {
  width: var(--preview-width, 100%);
  max-width: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%) scale(var(--preview-scale, 1));
}
.section-admin-preview video {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--preview-x, 50%) var(--preview-y, 50%);
  transform-origin: var(--preview-x, 50%) var(--preview-y, 50%);
}
.upload-box small {
  line-height: 1.5;
}
@media (max-width: 1080px) {
  .image-position-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 840px) {
  .image-position-controls { grid-template-columns: 1fr; }
  .section-media { width: min(var(--media-width, 100%), 100%); }
}


/* ===== v16 fullscreen video sections and hidden native controls ===== */
.section-media video {
  pointer-events: none;
}
.section-media video::-webkit-media-controls,
.section-media video::-webkit-media-controls-enclosure,
.section-media video::-webkit-media-controls-panel,
.section-media video::-webkit-media-controls-play-button,
.section-media video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.video-fullscreen-section {
  min-height: 100svh;
  height: 100svh;
  padding: 0;
  border-top: 0;
  overflow: hidden;
  background: #080b0a;
}
.video-fullscreen-section::before,
.video-fullscreen-section::after,
.video-fullscreen-section > .section-separator {
  display: none;
}
.video-fullscreen-grid {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100svh;
}
.video-fullscreen-copy,
.video-fullscreen-section .product-grid {
  display: none !important;
}
.video-fullscreen-media {
  width: 100% !important;
  height: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #080b0a;
  box-shadow: none;
  transform: none !important;
  overflow: hidden;
}
.video-fullscreen-media::before {
  display: none;
}
.video-fullscreen-media:hover {
  transform: none;
  box-shadow: none;
}
.video-fullscreen-media video {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: var(--media-x, 50%) var(--media-y, 50%);
  transform: scale(var(--media-scale, 1)) !important;
  background: #080b0a;
}

@media (max-width: 840px) {
  .video-fullscreen-section,
  .video-fullscreen-grid,
  .video-fullscreen-media,
  .video-fullscreen-media video {
    min-height: 100svh;
    height: 100svh;
  }
}

/* ===== v17 interactive story journal: map + timeline + book chapters ===== */
.story-journal-section {
  --section-fill: color-mix(in srgb, var(--brand-secondary) 82%, #111514);
  background:
    radial-gradient(900px circle at 18% 8%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 38%),
    radial-gradient(900px circle at 88% 50%, color-mix(in srgb, var(--surface-color) 8%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 86%, #111514) 0%, color-mix(in srgb, var(--brand-secondary) 76%, #1c211e) 100%);
  padding: 150px 0 140px;
}
.story-journal-section .section-separator {
  background: var(--section-fill);
}
.story-journal {
  position: relative;
  z-index: 2;
}
.story-intro {
  max-width: 960px;
}
.story-intro h2 {
  color: color-mix(in srgb, var(--surface-color) 94%, #fff 6%);
  font-size: clamp(3rem, 6.8vw, 6.7rem);
}
.story-intro .rich-text {
  color: color-mix(in srgb, var(--surface-color) 72%, transparent);
  max-width: 820px;
}
.story-shell {
  margin-top: 46px;
}
.story-shell > summary {
  width: min(100%, 560px);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 19px 22px;
  border: 1px solid color-mix(in srgb, var(--surface-color) 12%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 72%, #751f17), color-mix(in srgb, var(--brand-secondary) 76%, #000));
  color: #fff;
  box-shadow: 0 22px 54px rgba(0,0,0,.24);
  cursor: pointer;
  font-weight: 850;
  transition: transform .3s ease, box-shadow .3s ease;
}
.story-shell > summary::-webkit-details-marker { display: none; }
.story-shell > summary:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.story-shell > summary span { font-size: 1.02rem; }
.story-shell > summary small { color: rgba(255,255,255,.66); font-weight: 700; }
.story-book {
  margin-top: 26px;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--surface-color) 10%, transparent);
  border-radius: 34px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-color) 88%, #fff 12%), color-mix(in srgb, var(--page-bg) 78%, var(--surface-color) 22%));
  color: var(--text-color);
  box-shadow: 0 34px 110px rgba(0,0,0,.28);
}
.story-map-card {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  min-height: 360px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 92%, #08110e), color-mix(in srgb, var(--brand-secondary) 72%, var(--brand-primary) 28%));
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.story-map-card::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: url("../img/botanical-lines.svg") center / 880px auto repeat;
  opacity: .1;
  transform: rotate(-7deg);
  z-index: -1;
}
.story-map-copy span {
  display: block;
  color: color-mix(in srgb, var(--brand-primary) 48%, #fff 52%);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.story-map-copy p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.74);
  font-size: clamp(1.2rem, 2vw, 1.78rem);
  line-height: 1.36;
  letter-spacing: -.035em;
}
.story-map {
  position: relative;
  min-height: 260px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 40% 46%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
}
.story-map::before {
  content: "";
  position: absolute;
  inset: 14% 7%;
  background:
    radial-gradient(ellipse at 15% 52%, rgba(239,234,227,.35) 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 46% 42%, rgba(239,234,227,.34) 0 17%, transparent 17.5%),
    radial-gradient(ellipse at 68% 52%, rgba(239,234,227,.32) 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 86% 68%, rgba(239,234,227,.28) 0 9%, transparent 9.5%);
  filter: blur(.2px);
  opacity: .9;
}
.map-dot {
  position: absolute;
  z-index: 4;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-primary) 24%, transparent), 0 0 24px color-mix(in srgb, var(--brand-primary) 52%, transparent);
  animation: story-pulse 2.4s ease-in-out infinite;
}
.map-dot b {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dot-hamburg { left: 47%; top: 33%; }
.dot-africa { left: 49%; top: 61%; animation-delay: .2s; }
.dot-asia { left: 70%; top: 47%; animation-delay: .4s; }
.dot-america { left: 19%; top: 51%; animation-delay: .6s; }
.map-line {
  position: absolute;
  z-index: 3;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 70%, transparent), transparent);
  opacity: .72;
}
.line-1 { left: 48%; top: 36%; width: 25%; transform: rotate(24deg); }
.line-2 { left: 48%; top: 36%; width: 32%; transform: rotate(154deg); }
.line-3 { left: 49%; top: 37%; width: 24%; transform: rotate(90deg); }
@keyframes story-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.story-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.story-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.story-tabs > label {
  min-height: 132px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  background: color-mix(in srgb, var(--surface-color) 72%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text-color) 6%, transparent);
  cursor: pointer;
  transition: transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.story-tabs > label:hover { transform: translateY(-3px); }
.story-tabs > label span {
  display: block;
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-tabs > label strong {
  display: block;
  margin-top: 13px;
  color: var(--text-color);
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.story-tabs > input:checked + label {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 86%, #111), color-mix(in srgb, var(--brand-primary) 70%, var(--brand-secondary) 30%));
  color: #fff;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}
.story-tabs > input:checked + label span,
.story-tabs > input:checked + label strong { color: #fff; }
.story-panels {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 10px;
}
.story-panel { display: none; }
#story-tab-0:checked ~ .story-panels .story-panel-0,
#story-tab-1:checked ~ .story-panels .story-panel-1,
#story-tab-2:checked ~ .story-panels .story-panel-2 { display: block; }
.story-panel-head {
  max-width: 850px;
  padding: 28px 4px 18px;
}
.story-panel-head h3 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.06em;
}
.story-panel-head p:not(.eyebrow) {
  margin: 18px 0 0;
  color: var(--muted-color);
  font-size: 1.08rem;
}
.story-timeline {
  display: grid;
  gap: 12px;
  margin: 18px 0 28px;
  counter-reset: timeline;
}
.timeline-point,
.story-accordion details {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-color) 82%, transparent);
}
.timeline-point summary,
.story-accordion summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  cursor: pointer;
  color: var(--text-color);
  font-weight: 850;
}
.timeline-point summary::-webkit-details-marker,
.story-accordion summary::-webkit-details-marker { display: none; }
.timeline-point summary span,
.story-accordion summary span {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: color-mix(in srgb, var(--brand-primary) 80%, var(--text-color) 20%);
  text-align: center;
  font-size: .78rem;
  letter-spacing: .08em;
}
.timeline-point summary strong { font-size: 1rem; }
.timeline-point > div,
.story-accordion details > div {
  padding: 0 20px 20px;
  color: var(--muted-color);
}
.timeline-point > div p,
.story-accordion details > div p { margin: 0 0 12px; }
.story-accordion {
  display: grid;
  gap: 12px;
}
.story-admin-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-color) 72%, transparent);
}
.story-admin-chapter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  border-radius: 16px;
}
.story-admin-chapter legend {
  padding: 0 8px;
  color: var(--text-color);
  font-weight: 850;
}
.story-admin-subtitle {
  color: var(--brand-primary);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .74rem;
}
@media (max-width: 960px) {
  .story-map-card { grid-template-columns: 1fr; }
  .story-tabs { grid-template-columns: 1fr; }
  .story-tabs > label { min-height: 0; }
}
@media (max-width: 640px) {
  .story-journal-section { padding: 112px 0 94px; }
  .story-shell > summary { border-radius: 24px; flex-direction: column; align-items: flex-start; }
  .story-book { padding: 14px; border-radius: 24px; }
  .story-map-card { padding: 20px; min-height: 0; }
  .story-map { min-height: 220px; }
  .timeline-point summary, .story-accordion summary { align-items: flex-start; flex-direction: column; }
  .story-admin-editor, .story-admin-chapter { grid-template-columns: 1fr; }
}

/* ===== v18 story journal original text + horizontal timeline ===== */
.story-map-card,
.story-map,
.story-map-copy,
.map-dot,
.map-line {
  display: none !important;
}
.story-book {
  padding: clamp(18px, 3vw, 36px);
}
.story-panel-head {
  max-width: 980px;
}
.story-panel-head h3 {
  font-size: clamp(2.1rem, 4.7vw, 4.7rem);
  letter-spacing: -.055em;
}
.story-panel-head > p:not(.eyebrow) {
  max-width: 840px;
  color: color-mix(in srgb, var(--text-color) 64%, transparent);
  font-size: 1.08rem;
  line-height: 1.62;
}
.story-intro-accordion {
  margin: 24px 0 34px;
}
.story-intro-accordion details {
  background: color-mix(in srgb, var(--surface-color) 78%, transparent);
}
.story-yearline {
  position: relative;
  margin-top: 36px;
}
.story-yearline > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.story-yearline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--story-points, 4), minmax(130px, 1fr));
  gap: 0;
  padding: 0 8px 30px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.story-yearline-track::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-secondary) 78%, #000), color-mix(in srgb, var(--brand-primary) 82%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-secondary) 18%, transparent);
}
.story-yearline-track label {
  position: relative;
  z-index: 2;
  min-width: 130px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  padding: 0 14px;
  color: color-mix(in srgb, var(--muted-color) 86%, transparent);
  cursor: pointer;
  text-align: center;
}
.story-yearline-track .year {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-color) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  color: var(--brand-secondary);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.story-yearline-track .dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 5px solid color-mix(in srgb, var(--surface-color) 94%, #fff 6%);
  background: var(--brand-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 18%, transparent), 0 12px 28px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.story-yearline-track strong {
  display: block;
  max-width: 210px;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
  font-size: .92rem;
  line-height: 1.22;
  font-weight: 820;
  transition: color .25s ease;
}
.story-yearline-panels {
  position: relative;
}
.story-yearline-panels > article {
  display: none;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent);
  border-radius: 28px;
  background:
    radial-gradient(640px circle at 8% 10%, color-mix(in srgb, var(--brand-secondary) 8%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 94%, #fff 6%), color-mix(in srgb, var(--surface-color) 82%, var(--page-bg) 18%));
  box-shadow: 0 24px 68px color-mix(in srgb, var(--text-color) 9%, transparent);
}
.story-yearline-panels h4 {
  margin: 0 0 20px;
  color: var(--text-color);
  font-size: clamp(1.7rem, 3.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.story-yearline-panels .rich-text {
  max-width: 980px;
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}
.story-yearline-panels .rich-text p {
  margin-bottom: 18px;
}
.story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1) .dot,
.story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2) .dot,
.story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3) .dot,
.story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4) .dot,
.story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5) .dot,
.story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6) .dot,
.story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) .dot {
  transform: scale(1.18);
  background: var(--brand-secondary);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-secondary) 12%, transparent), 0 14px 34px color-mix(in srgb, var(--brand-secondary) 25%, transparent);
}
.story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1) strong,
.story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2) strong,
.story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3) strong,
.story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4) strong,
.story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5) strong,
.story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6) strong,
.story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) strong {
  color: var(--text-color);
}
.story-yearline > input:nth-of-type(1):checked ~ .story-yearline-panels article:nth-child(1),
.story-yearline > input:nth-of-type(2):checked ~ .story-yearline-panels article:nth-child(2),
.story-yearline > input:nth-of-type(3):checked ~ .story-yearline-panels article:nth-child(3),
.story-yearline > input:nth-of-type(4):checked ~ .story-yearline-panels article:nth-child(4),
.story-yearline > input:nth-of-type(5):checked ~ .story-yearline-panels article:nth-child(5),
.story-yearline > input:nth-of-type(6):checked ~ .story-yearline-panels article:nth-child(6),
.story-yearline > input:nth-of-type(7):checked ~ .story-yearline-panels article:nth-child(7) {
  display: block;
  animation: story-panel-in .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes story-panel-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.story-translation-note {
  margin-top: 18px;
  color: color-mix(in srgb, var(--muted-color) 82%, transparent);
  font-size: .86rem;
}

@media (max-width: 840px) {
  .story-yearline-track {
    grid-template-columns: repeat(var(--story-points, 4), minmax(150px, 1fr));
    padding-bottom: 24px;
  }
  .story-yearline-track::before { top: 45px; }
  .story-yearline-track label { padding: 0 10px; }
  .story-yearline-panels > article { padding: 24px 20px; }
}
@media (max-width: 580px) {
  .story-book { padding: 14px; border-radius: 24px; }
  .story-yearline-track {
    margin-inline: -6px;
    padding-inline: 6px;
    grid-template-columns: repeat(var(--story-points, 4), minmax(142px, 1fr));
  }
  .story-yearline-track strong { font-size: .82rem; }
  .story-yearline-panels h4 { font-size: 1.7rem; }
  .story-yearline-panels .rich-text { font-size: .95rem; }
}

/* ===== v19 supplier map section ===== */
.supplier-map-section {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 78%, white 22%) 0%, color-mix(in srgb, var(--page-bg) 82%, white 18%) 100%);
}
.supplier-map-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}
.supplier-map-card {
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 65px rgba(17, 33, 24, .14);
}
.supplier-map {
  position: relative;
  min-height: clamp(280px, 36vw, 460px);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(234, 240, 233, .92));
}
.supplier-map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.supplier-country {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--supplier-color) 82%, white 18%);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--supplier-color) 42%, transparent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  z-index: 2;
}
.supplier-country strong,
.supplier-country span {
  color: inherit;
  font-size: .8rem;
  letter-spacing: .02em;
}
.supplier-country span {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .25s ease, opacity .25s ease;
}
.supplier-country:hover,
.supplier-country:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  filter: saturate(1.08);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--supplier-color) 48%, transparent);
}
.supplier-country:hover span,
.supplier-country:focus-visible span {
  max-width: 200px;
  opacity: 1;
}
.supplier-map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  color: var(--muted-color);
  font-size: .92rem;
}
.supplier-gradient {
  width: min(280px, 54vw);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(110 58% 76%) 0%, hsl(60 58% 66%) 46%, hsl(8 58% 48%) 100%);
}

/* ===== v19 admin redesign ===== */
.admin-body {
  --admin-bg: #1a2330;
  --admin-surface: #253245;
  --admin-surface-2: #2e3e56;
  --admin-border: rgba(255,255,255,.06);
  --admin-text: #e8f0ff;
  --admin-muted: #9fb0c8;
  --admin-accent: #29b8ff;
  --admin-shadow-1: 14px 14px 32px rgba(8, 13, 20, .55);
  --admin-shadow-2: -8px -8px 22px rgba(255,255,255,.03);
  background: radial-gradient(circle at top left, #314661 0%, #1a2330 52%, #121923 100%);
  color: var(--admin-text);
}
.admin-body .admin-header {
  background: rgba(17, 23, 33, .78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.admin-body .container { width: min(1680px, calc(100% - 40px)); }
.admin-body .admin-title,
.admin-body .login-card,
.admin-body .admin-panel,
.admin-body .preview-card,
.admin-body .admin-help,
.admin-body .alert {
  background: linear-gradient(180deg, rgba(45, 60, 83, .92), rgba(31, 41, 56, .94));
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow-1), var(--admin-shadow-2);
  color: var(--admin-text);
}
.admin-body .brand img { height: 54px; width: auto; }
.admin-body .eyebrow,
.admin-body small,
.admin-body code,
.admin-body p,
.admin-body label,
.admin-body summary small,
.admin-body .status-pill,
.admin-body .preview-caption { color: var(--admin-muted); }
.admin-body a { color: #b9ddff; }
.admin-body .btn,
.admin-body button,
.admin-body .preview-btn {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.22);
}
.admin-body .btn-primary,
.admin-body button.btn-primary {
  background: linear-gradient(180deg, #38c6ff, #1fa7ef);
  color: #fff;
}
.admin-body .btn-ghost,
.admin-body .preview-btn {
  background: linear-gradient(180deg, rgba(46,62,86,.95), rgba(30,40,56,.95));
  color: var(--admin-text);
}
.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 26px;
  align-items: start;
}
.admin-edit-column { min-width: 0; }
.admin-preview-column { position: sticky; top: 96px; }
.preview-card { border-radius: 28px; padding: 16px; }
.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.preview-toolbar > div { display: flex; gap: 8px; flex-wrap: wrap; }
.preview-frame-wrap {
  background: #0d131d;
  border-radius: 22px;
  padding: 14px;
  min-height: 680px;
}
.preview-frame-wrap iframe {
  width: 100%;
  height: 680px;
  border: 0;
  border-radius: 18px;
  background: #fff;
}
.preview-frame-wrap[data-size="mobile"] { max-width: 400px; margin-inline: auto; }
.preview-frame-wrap[data-size="mobile"] iframe { height: 760px; }
.admin-quicknav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-quicknav a {
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}
.admin-body .admin-panel,
.admin-body .admin-help,
.admin-body .login-card,
.admin-body .admin-title { border-radius: 28px; }
.admin-body .admin-panel { padding: 0; overflow: hidden; margin-bottom: 18px; }
.admin-body .admin-panel > summary {
  list-style: none;
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.admin-body .admin-panel > summary::-webkit-details-marker { display: none; }
.admin-body .admin-panel > form,
.admin-body .admin-panel .section-tools { padding: 24px; }
.admin-body .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.admin-body .admin-grid .span-2 { grid-column: 1 / -1; }
.admin-body input,
.admin-body select,
.admin-body textarea {
  width: 100%;
  background: linear-gradient(180deg, rgba(8,14,23,.24), rgba(33,47,66,.78));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  color: var(--admin-text);
  padding: 14px 16px;
  box-sizing: border-box;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.22);
}
.admin-body input[type="range"] { padding: 0; box-shadow: none; }
.admin-body input[type="checkbox"] { width: auto; box-shadow: none; }
.admin-body textarea.code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-height: 160px;
}
.admin-body .upload-box,
.admin-body .landing-admin-preview,
.admin-body .section-admin-preview,
.admin-body .color-live-preview,
.admin-body .map-admin-preview {
  background: linear-gradient(180deg, rgba(12,18,27,.28), rgba(35,48,67,.72));
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 22px;
}
.admin-body .landing-admin-preview,
.admin-body .section-admin-preview,
.admin-body .map-admin-preview { overflow: hidden; }
.admin-body .map-admin-preview { position: relative; min-height: 320px; }
.admin-body .map-admin-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-body .map-admin-hotspots { position: absolute; inset: 0; }
.admin-body .map-entry-list { display: grid; gap: 12px; }
.admin-body .map-entry-row {
  display: grid;
  grid-template-columns: 1.2fr .6fr .6fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}
.admin-body .map-remove {
  align-self: stretch;
  background: linear-gradient(180deg, rgba(113, 39, 52, .9), rgba(76, 26, 37, .92));
  color: #fff;
}
.admin-body .map-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-body .check-row { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.admin-body .check-row label { display: inline-flex; gap: 10px; align-items: center; }
.admin-body .admin-section-head,
.admin-body .admin-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px;
  margin-bottom: 18px;
}
.admin-body .add-form { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-body .rich-editor {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  background: rgba(12,18,27,.32);
}
.admin-body .rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.admin-body .rich-editor-toolbar button,
.admin-body .rich-editor-toolbar .color-swatch {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: var(--admin-text);
  font-size: .92rem;
}
.admin-body .rich-editor-toolbar .color-swatch { display: inline-flex; align-items: center; gap: 8px; }
.admin-body .rich-editor-toolbar input[type="color"] { width: 34px; height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.admin-body .rich-editor-area {
  min-height: 180px;
  padding: 18px;
  line-height: 1.65;
  color: var(--admin-text);
}
.admin-body .rich-editor-area p:first-child { margin-top: 0; }
.admin-body .section-tools form { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-body .danger { background: linear-gradient(180deg, #b44b59, #832d39); color: #fff; }
.admin-body .status-pill.ok { background: rgba(46, 178, 120, .18); color: #b8ffd8; }
.admin-body .status-pill.bad { background: rgba(214, 82, 82, .18); color: #ffd2d2; }

@media (max-width: 1280px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-preview-column { position: static; }
}
@media (max-width: 980px) {
  .supplier-map-shell { grid-template-columns: 1fr; }
  .admin-body .map-entry-row { grid-template-columns: 1fr 1fr; }
  .admin-body .map-entry-row > button { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .admin-body .container { width: min(100% - 20px, 100%); }
  .admin-body .admin-grid { grid-template-columns: 1fr; }
  .admin-body .admin-grid .span-2 { grid-column: auto; }
  .admin-body .admin-section-head,
  .admin-body .admin-title,
  .preview-toolbar { flex-direction: column; align-items: stretch; }
  .preview-frame-wrap iframe { height: 540px; }
  .supplier-country span { display: none; }
}

/* ===== v20 choropleth supplier map ===== */
.supplier-map {
  position: relative;
  isolation: isolate;
}
.supplier-map-visual,
.map-admin-svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.supplier-world-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.supplier-world-svg .supplier-country-shape {
  fill: #dde4dc;
  stroke: rgba(130, 145, 133, 0.72);
  stroke-width: 1.15;
  transition: fill .2s ease, filter .2s ease, stroke .2s ease, stroke-width .2s ease;
  vector-effect: non-scaling-stroke;
}
.supplier-world-svg .supplier-country-shape.is-active {
  cursor: pointer;
}
.supplier-world-svg .supplier-country-shape.is-active:hover,
.supplier-world-svg .supplier-country-shape.is-active:focus-visible {
  filter: brightness(1.03) saturate(1.08);
  stroke: rgba(48, 56, 46, 0.9);
  stroke-width: 1.8;
  outline: none;
}
.supplier-map-tooltip {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, calc(-100% - 12px));
  min-width: 140px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(24, 36, 31, 0.94);
  color: #fff;
  box-shadow: 0 16px 34px rgba(14, 24, 19, 0.28);
  pointer-events: none;
  display: grid;
  gap: 2px;
  text-align: left;
}
.supplier-map-tooltip strong {
  font-size: .92rem;
  line-height: 1.2;
  color: #fff;
}
.supplier-map-tooltip span {
  font-size: .8rem;
  line-height: 1.3;
  color: rgba(255,255,255,.82);
}
.supplier-map-tooltip[hidden] { display: none; }
.admin-body .map-admin-preview {
  background: linear-gradient(180deg, rgba(248,250,248,.96), rgba(233,239,232,.94));
}
.admin-body .map-admin-svg {
  min-height: 320px;
}
.admin-body .map-admin-svg .supplier-country-shape {
  stroke: rgba(124, 137, 128, 0.8);
}
.admin-body .map-entry-row label:nth-child(4),
.admin-body .map-entry-row label:nth-child(5) {
  opacity: .5;
}
@media (max-width: 720px) {
  .supplier-map-tooltip {
    min-width: 120px;
    padding: 8px 10px;
  }
}

/* ===== v21 fixes: public supplier fill, color presets, clean section edges ===== */

/* Keine auffälligen Trenner/Wellen zwischen den Inhaltsbereichen */
.section-separator {
  display: none !important;
}
.divider-peaks,
.divider-slope,
.divider-brush {
  clip-path: none !important;
}
.content-section,
.cert-section,
.contact-section,
.supplier-map-section {
  overflow: visible;
}
.content-section::before,
.content-section::after {
  display: none !important;
}

/* Öffentliche Lieferantenkarte: Länder werden direkt eingefärbt */
.supplier-map-visual {
  position: absolute;
  inset: 0;
}
.supplier-map-visual .supplier-world-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.supplier-map-visual .supplier-country-shape {
  fill: #dfe7df;
  stroke: rgba(93, 112, 97, .58);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  transition: fill .2s ease, filter .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.supplier-map-visual .supplier-country-shape.is-active {
  cursor: pointer;
}
.supplier-map-visual .supplier-country-shape.is-active:hover,
.supplier-map-visual .supplier-country-shape.is-active:focus-visible {
  filter: brightness(1.05) saturate(1.12);
  stroke: rgba(40, 48, 39, .92);
  stroke-width: 1.8;
  outline: none;
}

/* Admin-Farbvorlagen */
.admin-body .color-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-body .color-template-card {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.admin-body .color-template-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .92;
  z-index: 0;
}
.admin-body .color-template-card > * {
  position: relative;
  z-index: 1;
}
.admin-body .color-template-card span {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  font-weight: 850;
}
.admin-body .color-template-card strong {
  font-size: 1.02rem;
  color: #fff;
}
.admin-body .color-template-card small {
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}
.admin-body .color-template-card:hover,
.admin-body .color-template-card.is-selected {
  transform: translateY(-2px);
  border-color: rgba(56,198,255,.65);
  box-shadow: 0 18px 36px rgba(0,0,0,.28);
}
.admin-body .color-template-card.is-red::before {
  background:
    radial-gradient(circle at 78% 20%, #ffc15c 0 16%, transparent 17%),
    linear-gradient(145deg, #a6261d 0%, #7f1d17 48%, #3b130f 100%);
}
.admin-body .color-template-card.is-forest::before {
  background:
    radial-gradient(circle at 78% 20%, #b33a2e 0 16%, transparent 17%),
    linear-gradient(145deg, #183a34 0%, #d8d4cc 100%);
}
.admin-body .color-template-card.is-light::before {
  background:
    radial-gradient(circle at 78% 20%, #cb6b72 0 16%, transparent 17%),
    linear-gradient(145deg, #ffffff 0%, #90ae9d 100%);
}
.admin-body .color-template-card.is-light {
  color: #1d1d1f;
}
.admin-body .color-template-card.is-light strong,
.admin-body .color-template-card.is-light small {
  color: #1d1d1f;
}
.admin-body .color-template-card.is-dark::before {
  background:
    radial-gradient(circle at 78% 20%, #d45a4c 0 16%, transparent 17%),
    linear-gradient(145deg, #102b26 0%, #243330 100%);
}

/* China-Rot Lesbarkeit, wenn als Farbvorlage gewählt */
body.public-site {
  color: var(--text-color);
}
body.public-site .content-section,
body.public-site .cert-section,
body.public-site .supplier-map-section {
  color: var(--text-color);
}
body.public-site .rich-text,
body.public-site .rich-text p,
body.public-site .section-copy p,
body.public-site .cert-head p,
body.public-site .supplier-map-copy p {
  color: color-mix(in srgb, var(--text-color) 84%, var(--muted-color) 16%);
}
body.public-site .theme-light,
body.public-site .theme-cream {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 94%, transparent), color-mix(in srgb, var(--surface-color) 88%, var(--page-bg) 12%));
}
body.public-site .theme-light h2,
body.public-site .theme-cream h2,
body.public-site .cert-section h2,
body.public-site .supplier-map-section h2 {
  color: var(--text-color);
}
body.public-site .cert-grid > div,
body.public-site .product-grid article,
body.public-site .supplier-map-card {
  background: color-mix(in srgb, var(--surface-color) 86%, white 14%);
  color: var(--text-color);
}
body.public-site .supplier-map {
  background: color-mix(in srgb, var(--surface-color) 12%, white 88%);
}
body.public-site .supplier-map-tooltip strong,
body.public-site .supplier-map-tooltip span {
  color: #fff;
}

@media (max-width: 980px) {
  .admin-body .color-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .admin-body .color-template-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== v22 readability fixes for China Red preset and overall contrast ===== */
body.public-site {
  color: var(--text-color);
}

/* Dunkle, gut lesbare Kopfzeile */
body.public-site .site-header,
body.public-site.scrolled-header .site-header {
  background: linear-gradient(180deg, rgba(40, 17, 16, .92) 0%, rgba(53, 23, 21, .88) 100%) !important;
  border-bottom: 1px solid rgba(255, 245, 236, .14) !important;
  box-shadow: 0 16px 42px rgba(18, 7, 7, .22);
}
body.public-site .main-nav a,
body.public-site .language-menu-trigger,
body.public-site .language-menu-trigger span {
  color: #fff5ec !important;
}
body.public-site .main-nav a { opacity: .92; }
body.public-site .main-nav a:hover,
body.public-site .main-nav a.active { color: #ffffff !important; opacity: 1; }
body.public-site .main-nav a::after {
  background: linear-gradient(90deg, var(--brand-primary), #ffe2b1) !important;
}
body.public-site .language-menu-trigger {
  border-color: rgba(255,245,236,.2) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
body.public-site .language-menu-trigger:hover,
body.public-site .language-menu-trigger:focus-visible,
body.public-site .language-menu-trigger[aria-expanded="true"] {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,245,236,.34) !important;
}
body.public-site .nav-toggle span {
  background: #fff5ec !important;
}
body.public-site .header-cta {
  background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 76%, #ffffff 24%)) !important;
  color: #2a1613 !important;
  box-shadow: 0 14px 34px rgba(240,195,109,.22);
}
body.public-site .header-cta:hover { color: #2a1613 !important; }

/* Lesbare helle Flächen in Inhaltsbereichen */
body.public-site .theme-light,
body.public-site .theme-cream,
body.public-site .theme-accent,
body.public-site .cert-section,
body.public-site .story-journal-section,
body.public-site .supplier-map-section {
  color: var(--text-color);
}
body.public-site .theme-light {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 97%, #ffffff 3%) 0%, color-mix(in srgb, var(--surface-color) 90%, var(--page-bg) 10%) 100%) !important;
}
body.public-site .theme-cream,
body.public-site .story-journal-section,
body.public-site .supplier-map-section,
body.public-site .cert-section {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--surface-color) 86%, var(--page-bg) 14%) 100%) !important;
}
body.public-site .theme-accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-color) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--surface-color) 82%, var(--brand-primary) 18%) 100%) !important;
}
body.public-site .content-section:not(.theme-dark) .eyebrow,
body.public-site .story-panel-head p:not(.eyebrow),
body.public-site .story-yearline-track strong,
body.public-site .story-yearline-panels .rich-text,
body.public-site .product-grid article p,
body.public-site .cert-grid > div p,
body.public-site .supplier-map-copy .rich-text,
body.public-site .contact-card dt,
body.public-site .contact-card dd {
  color: var(--muted-color) !important;
}
body.public-site .content-section:not(.theme-dark) h2,
body.public-site .content-section:not(.theme-dark) h3,
body.public-site .content-section:not(.theme-dark) h4,
body.public-site .content-section:not(.theme-dark) .rich-text,
body.public-site .story-tabs > label strong,
body.public-site .story-yearline-panels h4,
body.public-site .story-panel-head h3,
body.public-site .supplier-map-copy h2,
body.public-site .cert-grid > div h3,
body.public-site .product-grid article h3 {
  color: var(--text-color) !important;
}
body.public-site .product-grid article,
body.public-site .cert-grid > div,
body.public-site .story-tabs > label,
body.public-site .story-accordion details,
body.public-site .story-yearline-panels > article,
body.public-site .contact-card,
body.public-site .supplier-map-card {
  background: color-mix(in srgb, var(--surface-color) 92%, #ffffff 8%) !important;
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent) !important;
}
body.public-site .story-tabs > input:checked + label {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 90%, #000000 10%), color-mix(in srgb, var(--brand-primary) 50%, var(--brand-secondary) 50%)) !important;
}
body.public-site .story-yearline-track .year {
  color: var(--text-color) !important;
  background: color-mix(in srgb, var(--surface-color) 90%, #ffffff 10%) !important;
}
body.public-site .btn-light {
  background: color-mix(in srgb, var(--surface-color) 94%, #ffffff 6%) !important;
  color: var(--brand-secondary) !important;
}
body.public-site .supplier-map-legend,
body.public-site .footer-main a,
body.public-site .footer-main p,
body.public-site .footer-brand p,
body.public-site .footer-bottom {
  color: color-mix(in srgb, var(--surface-color) 72%, #ffffff 28%);
}


/* ===== v23 organic JFS-style section transitions ===== */
body.public-site .content-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  overflow: hidden !important;
  position: relative;
  isolation: isolate;
}

body.public-site .section-separator {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: 100%;
  height: clamp(78px, 9vw, 148px);
  z-index: 1;
  pointer-events: none;
  background: var(--section-wave-bg, color-mix(in srgb, var(--surface-color) 92%, #fff 8%));
  clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    94% 42%,
    88% 38%,
    82% 44%,
    76% 58%,
    68% 68%,
    60% 64%,
    52% 48%,
    45% 36%,
    37% 31%,
    29% 39%,
    21% 56%,
    13% 66%,
    6% 61%,
    0 50%
  );
  filter: drop-shadow(0 10px 18px rgba(22, 10, 8, .08));
}

body.public-site .section-separator::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background:
    radial-gradient(circle at 8% 40%, rgba(0,0,0,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 20%, rgba(0,0,0,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 30%, rgba(0,0,0,.1) 0 1px, transparent 2px);
  background-size: 120px 80px, 160px 90px, 140px 100px;
  mix-blend-mode: multiply;
}

body.public-site .content-section > .container,
body.public-site .cert-section > .container,
body.public-site .contact-section > .container,
body.public-site .supplier-map-section > .container {
  position: relative;
  z-index: 2;
}

body.public-site .theme-light,
body.public-site .cert-section,
body.public-site .supplier-map-section {
  --section-wave-bg: color-mix(in srgb, var(--surface-color) 94%, #ffffff 6%);
}
body.public-site .theme-cream,
body.public-site .story-journal-section {
  --section-wave-bg: color-mix(in srgb, var(--surface-color) 90%, var(--page-bg) 10%);
}
body.public-site .theme-accent {
  --section-wave-bg: color-mix(in srgb, var(--surface-color) 82%, var(--brand-primary) 18%);
}
body.public-site .theme-dark,
body.public-site .contact-section {
  --section-wave-bg: color-mix(in srgb, var(--brand-secondary) 88%, #0f0c0b 12%);
}

/* The first section directly after the landing gets a stronger paper-cut wave, like the reference. */
body.public-site .trust-strip {
  position: relative;
  padding-top: clamp(42px, 7vw, 96px) !important;
}
body.public-site .trust-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: clamp(90px, 10vw, 160px);
  background: color-mix(in srgb, var(--surface-color) 90%, #fff 10%);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 54%,
    92% 42%,
    83% 36%,
    74% 44%,
    66% 56%,
    56% 62%,
    48% 55%,
    40% 39%,
    31% 30%,
    22% 37%,
    14% 52%,
    6% 64%,
    0 58%
  );
  z-index: 0;
  filter: drop-shadow(0 12px 18px rgba(22, 10, 8, .08));
}
body.public-site .trust-grid {
  position: relative;
  z-index: 1;
}

/* Give sections more breathing room so the wave does not cover headings. */
body.public-site .content-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  padding-top: clamp(132px, 14vw, 210px) !important;
}
body.public-site .video-fullscreen-section {
  padding-top: 0 !important;
}
body.public-site .video-fullscreen-section > .section-separator {
  display: none !important;
}

@media (max-width: 760px) {
  body.public-site .section-separator {
    height: 92px;
    clip-path: polygon(0 0,100% 0,100% 50%,90% 43%,80% 52%,70% 61%,58% 55%,47% 38%,35% 34%,24% 48%,13% 63%,0 54%);
  }
  body.public-site .content-section,
  body.public-site .cert-section,
  body.public-site .contact-section,
  body.public-site .supplier-map-section {
    padding-top: 120px !important;
  }
  body.public-site .trust-strip::before { height: 104px; }
}

/* ===== v24 compact hand-drawn line transitions + easier admin color buttons ===== */
body.public-site .content-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  overflow: visible !important;
  padding-top: clamp(70px, 7vw, 112px) !important;
}
body.public-site .video-fullscreen-section {
  padding-top: 0 !important;
}
body.public-site .section-separator {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  width: 100%;
  height: 34px !important;
  z-index: 3;
  pointer-events: none;
  background: transparent !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1;
}
body.public-site .section-separator::before,
body.public-site .section-separator::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(86vw, 1180px);
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
}
body.public-site .section-separator::before {
  top: 15px;
  height: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(46,26,20,.12) 4%, rgba(46,26,20,.36) 18%, rgba(46,26,20,.46) 54%, rgba(46,26,20,.24) 86%, transparent 100%);
  box-shadow:
    0 7px 14px rgba(29,18,15,.16),
    0 12px 22px rgba(29,18,15,.08);
}
body.public-site .section-separator::after {
  top: 12px;
  height: 1px;
  width: min(82vw, 1100px);
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 12%, rgba(255,255,255,.36) 44%, rgba(255,255,255,.14) 78%, transparent 100%);
  transform: translateX(-50%) rotate(.14deg);
}
body.public-site .divider-slope .section-separator::before { transform: translateX(-50%) rotate(.28deg); }
body.public-site .divider-brush .section-separator::before { transform: translateX(-50%) rotate(-.22deg); width: min(78vw, 1040px); }
body.public-site .divider-peaks .section-separator::before { width: min(90vw, 1240px); }
body.public-site .trust-strip::before {
  height: 30px !important;
  clip-path: none !important;
  background: transparent !important;
  filter: none !important;
  border-top: 2px solid rgba(46,26,20,.24);
  box-shadow: 0 8px 16px rgba(29,18,15,.12);
  left: 7vw;
  right: 7vw;
  width: auto;
}
body.public-site .trust-strip {
  padding-top: clamp(44px, 5vw, 74px) !important;
}

.admin-body .section-color-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(118px, auto));
  gap: 10px;
  align-items: end;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.admin-body .section-color-toolbar > div:first-child {
  display: grid;
  gap: 4px;
}
.admin-body .section-color-toolbar strong {
  color: var(--admin-text);
}
.admin-body .section-color-toolbar small {
  color: var(--admin-muted);
  line-height: 1.35;
}
.admin-body .inline-color-field {
  display: grid;
  grid-template-columns: 1fr 38px 32px;
  gap: 7px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 15px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.06);
}
.admin-body .inline-color-field span {
  color: var(--admin-text);
  font-size: .78rem;
  font-weight: 750;
}
.admin-body .inline-color-field input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  cursor: pointer;
}
.admin-body .inline-color-field button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: var(--admin-text);
}
.admin-body .inline-color-field.is-cleared {
  opacity: .48;
}
.admin-body .rich-editor-toolbar .color-swatch {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}
.admin-body .rich-editor-toolbar .color-swatch::before {
  content: "Textfarbe";
  margin-right: 4px;
}
@media (max-width: 1280px) {
  .admin-body .section-color-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-body .section-color-toolbar > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .admin-body .section-color-toolbar {
    grid-template-columns: 1fr;
  }
  body.public-site .section-separator::before { width: min(88vw, 620px); }
  body.public-site .content-section,
  body.public-site .cert-section,
  body.public-site .contact-section,
  body.public-site .supplier-map-section { padding-top: 72px !important; }
}


/* ===== v25 straight black divider bars ===== */
body.public-site .content-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  overflow: visible !important;
  padding-top: clamp(54px, 5vw, 82px) !important;
}
body.public-site .video-fullscreen-section { padding-top: 0 !important; }
body.public-site .section-separator {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #111 !important;
  clip-path: none !important;
  filter: none !important;
  opacity: .86 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.12) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
body.public-site .section-separator::before,
body.public-site .section-separator::after,
body.public-site .trust-strip::before,
body.public-site .trust-strip::after {
  display: none !important;
  content: none !important;
}
body.public-site .trust-strip {
  position: relative;
  padding-top: clamp(34px, 4vw, 58px) !important;
  border-top: 1px solid #111 !important;
}
body.public-site .divider-peaks,
body.public-site .divider-slope,
body.public-site .divider-brush {
  clip-path: none !important;
}
@media (max-width: 720px) {
  body.public-site .content-section,
  body.public-site .cert-section,
  body.public-site .contact-section,
  body.public-site .supplier-map-section {
    padding-top: 52px !important;
  }
}





/* ===== v30 normal cursor + color mode / bulk color controls ===== */
body.public-site,
body.public-site * {
  cursor: auto;
}
body.public-site a,
body.public-site button,
body.public-site [role="button"],
body.public-site summary,
body.public-site label,
body.public-site input[type="button"],
body.public-site input[type="submit"] {
  cursor: pointer;
}
.admin-body .color-template-grid {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.admin-body .color-template-card {
  min-height: 132px;
}
.admin-body .bulk-color-panel {
  margin: 18px 0 28px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 52px rgba(0,0,0,.22);
}
.admin-body .bulk-color-panel h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.1rem;
}
.admin-body .bulk-color-panel p {
  margin: 0 0 16px;
  color: rgba(255,255,255,.64);
}
.admin-body .bulk-color-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-body .bulk-color-controls label {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  font-weight: 800;
}
.admin-body .bulk-color-controls input[type="color"] {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: transparent;
}
.admin-body .bulk-color-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.admin-body .bulk-color-actions .btn {
  border-radius: 999px;
}
.admin-body .bulk-color-actions small {
  color: rgba(255,255,255,.54);
  margin-left: auto;
}
@media (max-width: 760px) {
  .admin-body .bulk-color-controls { grid-template-columns: 1fr; }
  .admin-body .bulk-color-actions small { width: 100%; margin-left: 0; }
}

/* ===== v31 editable nav bar, editable trust strip, expanded color templates ===== */
body.public-site .site-header,
body.public-site.scrolled-header .site-header {
  background: var(--nav-bg, #351715) !important;
  border-bottom-color: color-mix(in srgb, var(--nav-link, #fff7ef) 14%, transparent) !important;
}
body.public-site .main-nav a,
body.public-site .language-menu-trigger,
body.public-site .language-menu-trigger span {
  color: var(--nav-link, #fff7ef) !important;
}
body.public-site .main-nav a:hover,
body.public-site .main-nav a.active,
body.public-site .language-menu-trigger:hover,
body.public-site .language-menu-trigger[aria-expanded="true"] {
  color: var(--nav-link-hover, #f0c36d) !important;
}
body.public-site .main-nav a::after {
  background: linear-gradient(90deg, transparent, var(--nav-link-hover, #f0c36d), transparent) !important;
}
body.public-site .language-menu-trigger {
  border-color: color-mix(in srgb, var(--nav-link, #fff7ef) 18%, transparent) !important;
}
body.public-site .header-cta {
  background: var(--nav-button-bg, #f0c36d) !important;
  border-color: var(--nav-button-bg, #f0c36d) !important;
  color: var(--nav-button-text, #2a1613) !important;
}
body.public-site .header-cta:hover { color: var(--nav-button-text, #2a1613) !important; }
body.public-site .nav-toggle span { background: var(--nav-link, #fff7ef) !important; }

body.public-site .trust-strip {
  background: var(--trust-bg, #d8d4cc) !important;
  padding: 0 0 32px;
}
body.public-site .trust-strip::before,
body.public-site .trust-strip::after { display: none !important; }
body.public-site .trust-grid {
  background: var(--trust-card-bg, #f4f0ea) !important;
  border-color: var(--trust-border, #d5ccc2) !important;
}
body.public-site .trust-grid > div {
  border-right-color: var(--trust-border, #d5ccc2) !important;
}
body.public-site .trust-grid span {
  color: var(--trust-number, #0f3a34) !important;
}
body.public-site .trust-grid strong {
  color: var(--trust-title, #202422) !important;
}
body.public-site .trust-grid small {
  color: var(--trust-text, #5f645f) !important;
}

.admin-body .compact-colors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-body .trust-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-body .trust-admin-card {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.admin-body .trust-admin-card legend {
  color: rgba(255,255,255,.82);
  font-weight: 850;
  padding: 0 8px;
}
.admin-body .trust-admin-card textarea {
  min-height: 78px;
}
.admin-body .color-template-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: 680px;
  overflow-y: auto;
  padding-right: 6px;
}
.admin-body .color-template-card {
  min-height: 132px;
}
.admin-body .color-template-card.is-orange::before {
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 196, 118, .82), transparent 28%),
    linear-gradient(135deg, #f28a2e, #2e3033 58%, #e7e1d8);
}
.admin-body .color-template-card.is-gray::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 26%),
    linear-gradient(135deg, #34383d, #8c9093 52%, #d8d4ce);
}
@media (max-width: 1180px) {
  .admin-body .color-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-body .compact-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .admin-body .color-template-grid,
  .admin-body .trust-admin-grid,
  .admin-body .compact-colors { grid-template-columns: 1fr; }
}
.admin-body .bulk-color-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-body .bulk-color-form label input[type="color"] {
  height: 54px;
}


/* ===== v32: clean media and simpler timeline navigation ===== */
body.public-site .section-media,
body.public-site .hero-visual-card,
body.public-site .video-fullscreen-media {
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.public-site .section-media::before,
body.public-site .section-media::after,
body.public-site .hero-visual-card::before,
body.public-site .hero-visual-card::after,
body.public-site .video-fullscreen-media::before,
body.public-site .video-fullscreen-media::after {
  display: none !important;
  content: none !important;
}
body.public-site .section-media:hover {
  transform: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.public-site .section-media img,
body.public-site .section-media video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}
body.public-site .video-fullscreen-section .section-media video,
body.public-site .video-fullscreen-media video {
  border-radius: 0 !important;
}

body.public-site .story-yearline {
  margin-top: 28px !important;
}
body.public-site .story-yearline-hint {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--muted-color) 86%, transparent);
  font-size: .9rem;
  font-weight: 760;
  letter-spacing: .02em;
}
body.public-site .story-yearline-track {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
  padding: 0 !important;
  scrollbar-width: none;
}
body.public-site .story-yearline-track::-webkit-scrollbar { display: none; }
body.public-site .story-yearline-track::before,
body.public-site .story-yearline-track::after {
  display: none !important;
  content: none !important;
}
body.public-site .story-yearline-track label {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "year title"
    "dot title";
  align-items: center;
  justify-items: stretch !important;
  column-gap: 12px;
  row-gap: 6px;
  padding: 14px 15px !important;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
  background: color-mix(in srgb, var(--surface-color) 88%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text-color) 5%, transparent);
  text-align: left !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.public-site .story-yearline-track label:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
}
body.public-site .story-yearline-track .year {
  grid-area: year;
  width: fit-content;
  min-height: 0 !important;
  padding: 5px 9px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 11%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
  color: color-mix(in srgb, var(--brand-primary) 82%, var(--text-color) 18%) !important;
  font-size: .74rem !important;
  font-weight: 900;
  line-height: 1;
}
body.public-site .story-yearline-track .dot {
  grid-area: dot;
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--muted-color) 40%, transparent) !important;
  box-shadow: none !important;
  justify-self: center;
}
body.public-site .story-yearline-track strong {
  grid-area: title;
  max-width: none !important;
  color: color-mix(in srgb, var(--text-color) 82%, transparent) !important;
  font-size: .92rem !important;
  line-height: 1.25 !important;
  font-weight: 830 !important;
  text-align: left;
}
body.public-site .story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1),
body.public-site .story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2),
body.public-site .story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3),
body.public-site .story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4),
body.public-site .story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5),
body.public-site .story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6),
body.public-site .story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-secondary) 88%, #111), color-mix(in srgb, var(--brand-primary) 70%, var(--brand-secondary) 30%)) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 26%, transparent) !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand-secondary) 14%, transparent);
}
body.public-site .story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1) .year,
body.public-site .story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2) .year,
body.public-site .story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3) .year,
body.public-site .story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4) .year,
body.public-site .story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5) .year,
body.public-site .story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6) .year,
body.public-site .story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) .year {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: #fff !important;
}
body.public-site .story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1) strong,
body.public-site .story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2) strong,
body.public-site .story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3) strong,
body.public-site .story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4) strong,
body.public-site .story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5) strong,
body.public-site .story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6) strong,
body.public-site .story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) strong {
  color: #fff !important;
}
body.public-site .story-yearline > input:nth-of-type(1):checked ~ .story-yearline-track label:nth-child(1) .dot,
body.public-site .story-yearline > input:nth-of-type(2):checked ~ .story-yearline-track label:nth-child(2) .dot,
body.public-site .story-yearline > input:nth-of-type(3):checked ~ .story-yearline-track label:nth-child(3) .dot,
body.public-site .story-yearline > input:nth-of-type(4):checked ~ .story-yearline-track label:nth-child(4) .dot,
body.public-site .story-yearline > input:nth-of-type(5):checked ~ .story-yearline-track label:nth-child(5) .dot,
body.public-site .story-yearline > input:nth-of-type(6):checked ~ .story-yearline-track label:nth-child(6) .dot,
body.public-site .story-yearline > input:nth-of-type(7):checked ~ .story-yearline-track label:nth-child(7) .dot {
  background: #fff !important;
}
body.public-site .story-yearline-panels {
  margin-top: 18px;
}
body.public-site .story-yearline-panels > article {
  border-radius: 22px !important;
}
@media (max-width: 720px) {
  body.public-site .story-yearline-track {
    grid-template-columns: 1fr !important;
  }
  body.public-site .story-yearline-track label {
    grid-template-columns: auto 1fr;
    padding: 13px 14px !important;
  }
}


/* ===== v34 media scaling, hover zoom and scroll text reveals ===== */

/* Admin: make media controls feel more explicit and easier to use */
.admin-body .image-position-controls {
  grid-template-columns: repeat(4, minmax(190px, 1fr)) !important;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
}
.admin-body .image-position-controls label {
  display: grid;
  gap: 8px;
}
.admin-body .image-position-controls output {
  display: inline-flex;
  justify-content: center;
  min-width: 58px;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--admin-text, #fff);
  font-weight: 800;
}

/* Public: media can now be enlarged beyond the old 100% limit */
body.public-site .section-media {
  width: clamp(10%, var(--media-width, 100%), 160%) !important;
  justify-self: center;
  overflow: hidden !important;
  transform: translateZ(0);
}
body.public-site .section-media img,
body.public-site .section-media video {
  --media-hover-scale: 1;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(calc(var(--media-scale, 1) * var(--media-hover-scale))) !important;
  transform-origin: var(--media-x, 50%) var(--media-y, 50%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease !important;
  will-change: transform;
}
body.public-site .section-media:hover img,
body.public-site .section-media:hover video {
  --media-hover-scale: 1.055;
  filter: saturate(1.03) contrast(1.02);
}
body.public-site .section-media:hover {
  transform: translateY(-2px) !important;
}

/* The full-screen video stays full-screen, but still gets the subtle premium feel */
body.public-site .video-fullscreen-section .section-media,
body.public-site .video-fullscreen-media {
  width: 100% !important;
}
body.public-site .video-fullscreen-section .section-media:hover {
  transform: none !important;
}

/* Subtle text entrance animations on scroll */
.text-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    transform .72s cubic-bezier(.2,.8,.2,1),
    filter .72s ease;
  will-change: opacity, transform, filter;
}
.text-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
.text-reveal.text-delay-1 { transition-delay: .06s; }
.text-reveal.text-delay-2 { transition-delay: .12s; }
.text-reveal.text-delay-3 { transition-delay: .18s; }
.text-reveal.text-delay-4 { transition-delay: .24s; }

/* Extra refinement: headings and body copy feel more alive without becoming distracting */
body.public-site .section-copy h2.text-reveal,
body.public-site .story-panel-head h3.text-reveal,
body.public-site .supplier-map-copy h2.text-reveal,
body.public-site .contact-copy h2.text-reveal {
  transform: translateY(22px);
}
body.public-site .rich-text p.text-reveal {
  transform: translateY(14px);
}

@media (max-width: 840px) {
  body.public-site .section-media {
    width: min(var(--media-width, 100%), 100%) !important;
  }
  body.public-site .section-media:hover img,
  body.public-site .section-media:hover video {
    --media-hover-scale: 1.025;
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  body.public-site .section-media img,
  body.public-site .section-media video {
    transition: none !important;
  }
}


/* ===== v35 soft wave section transitions ===== */
body.public-site .content-section,
body.public-site .story-journal-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  overflow: visible !important;
}
body.public-site .section-separator {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: -58px;
  width: 100%;
  height: 86px !important;
  z-index: 3;
  pointer-events: none;
  background: transparent !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1;
}
body.public-site .section-separator::before,
body.public-site .section-separator::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
body.public-site .section-separator::before {
  top: 0;
  height: 86px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f5efe7' d='M0,78 C128,112 254,26 411,36 C563,46 595,108 748,104 C903,100 955,39 1114,41 C1275,43 1319,93 1440,78 L1440,120 L0,120 Z'/%3E%3C/svg%3E");
}
body.public-site .section-separator::after {
  top: 18px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgba(36,25,20,0.18)'/%3E%3Cstop offset='1' stop-color='rgba(36,25,20,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0,60 C126,96 259,16 412,27 C566,38 594,90 748,88 C904,86 954,28 1115,30 C1278,32 1322,84 1440,69 L1440,82 C1320,93 1274,42 1115,41 C954,39 905,97 748,100 C590,103 566,50 412,39 C258,28 130,108 0,73 Z'/%3E%3C/svg%3E");
  opacity: .28;
  filter: blur(2px);
}
body.public-site .divider-slope .section-separator::before,
body.public-site .divider-brush .section-separator::before,
body.public-site .divider-peaks .section-separator::before,
body.public-site .divider-slope .section-separator::after,
body.public-site .divider-brush .section-separator::after,
body.public-site .divider-peaks .section-separator::after {
  transform: none !important;
  width: 100% !important;
}
body.public-site .trust-strip {
  padding-top: 46px !important;
}
body.public-site .trust-strip::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -56px !important;
  height: 84px !important;
  border: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f5efe7' d='M0,78 C128,112 254,26 411,36 C563,46 595,108 748,104 C903,100 955,39 1114,41 C1275,43 1319,93 1440,78 L1440,120 L0,120 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}
body.public-site .trust-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(36,25,20,.10), rgba(36,25,20,0) 68%);
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 960px) {
  body.public-site .section-separator {
    top: -40px;
    height: 60px !important;
  }
  body.public-site .section-separator::before {
    height: 60px;
  }
  body.public-site .section-separator::after {
    top: 12px;
    height: 34px;
  }
  body.public-site .trust-strip::before {
    top: -38px !important;
    height: 56px !important;
  }
}


/* ===== v37 large diagonal wave separators ===== */
body.public-site .trust-strip,
body.public-site .content-section,
body.public-site .story-journal-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section,
body.public-site .video-fullscreen-section {
  position: relative;
  overflow: visible !important;
}

body.public-site .section-separator {
  position: absolute !important;
  left: -1vw !important;
  right: -1vw !important;
  top: -118px !important;
  width: 102vw !important;
  height: 152px !important;
  display: block !important;
  background: transparent !important;
  z-index: 4 !important;
  pointer-events: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body.public-site .section-separator::before,
body.public-site .section-separator::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  transform-origin: center top !important;
}

body.public-site .section-separator::before {
  top: 0 !important;
  height: 152px !important;
  background: linear-gradient(180deg, rgba(245,239,231,1) 0%, rgba(245,239,231,1) 100%) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68 L1440,180 L0,180 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68 L1440,180 L0,180 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  box-shadow: 0 20px 44px rgba(30, 22, 18, 0.08) !important;
}

body.public-site .section-separator::after {
  top: 42px !important;
  height: 66px !important;
  background: linear-gradient(180deg, rgba(37,26,21,.16), rgba(37,26,21,0)) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  opacity: .22 !important;
  filter: blur(3px) !important;
}

body.public-site .divider-slope .section-separator::before { transform: rotate(-2.2deg) translateY(6px) !important; }
body.public-site .divider-slope .section-separator::after { transform: rotate(-2.2deg) translateY(6px) !important; }
body.public-site .divider-brush .section-separator::before { transform: rotate(1.5deg) translateY(2px) !important; }
body.public-site .divider-brush .section-separator::after { transform: rotate(1.5deg) translateY(2px) !important; }
body.public-site .divider-peaks .section-separator::before { transform: rotate(-.9deg) translateY(10px) scaleX(1.02) !important; }
body.public-site .divider-peaks .section-separator::after { transform: rotate(-.9deg) translateY(10px) scaleX(1.02) !important; }

body.public-site .trust-strip {
  padding-top: 88px !important;
}
body.public-site .trust-strip::before {
  content: "" !important;
  position: absolute !important;
  left: -1vw !important;
  right: -1vw !important;
  top: -108px !important;
  width: 102vw !important;
  height: 146px !important;
  background: linear-gradient(180deg, rgba(245,239,231,1), rgba(245,239,231,1)) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68 L1440,180 L0,180 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0,122 C138,170 264,70 422,54 C596,37 664,144 856,136 C1036,128 1097,58 1268,48 C1358,43 1405,58 1440,68 L1440,180 L0,180 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat !important;
  transform: rotate(1.1deg) !important;
  box-shadow: 0 20px 44px rgba(30, 22, 18, 0.08) !important;
  border: 0 !important;
}
body.public-site .trust-strip::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -44px !important;
  height: 42px !important;
  background: radial-gradient(ellipse at center, rgba(36,25,20,.10), rgba(36,25,20,0) 72%) !important;
  opacity: .36 !important;
  pointer-events: none !important;
}

body.public-site .video-fullscreen-section > .section-separator {
  top: -132px !important;
}

@media (max-width: 960px) {
  body.public-site .section-separator {
    top: -72px !important;
    height: 100px !important;
  }
  body.public-site .section-separator::before {
    height: 100px !important;
  }
  body.public-site .section-separator::after {
    top: 24px !important;
    height: 44px !important;
  }
  body.public-site .trust-strip {
    padding-top: 58px !important;
  }
  body.public-site .trust-strip::before {
    top: -68px !important;
    height: 96px !important;
  }
}


/* ===== v38 reset transitions: no gaps, thin straight separator ===== */
body.public-site .trust-strip,
body.public-site .content-section,
body.public-site .story-journal-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section,
body.public-site .video-fullscreen-section {
  overflow: visible !important;
}

/* reduce the oversized vertical gaps created by the wave variants */
body.public-site .content-section,
body.public-site .story-journal-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-map-section {
  padding-top: clamp(46px, 5vw, 74px) !important;
}
body.public-site .trust-strip {
  padding-top: 28px !important;
}
body.public-site .video-fullscreen-section {
  padding-top: 0 !important;
}

/* straight minimal black divider */
body.public-site .section-separator {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -1px !important;
  width: 100% !important;
  height: 1px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: #111 !important;
  opacity: .86 !important;
  clip-path: none !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}
body.public-site .section-separator::before,
body.public-site .section-separator::after,
body.public-site .divider-slope .section-separator::before,
body.public-site .divider-slope .section-separator::after,
body.public-site .divider-brush .section-separator::before,
body.public-site .divider-brush .section-separator::after,
body.public-site .divider-peaks .section-separator::before,
body.public-site .divider-peaks .section-separator::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* trust strip gets the same clean line, without a decorative wave */
body.public-site .trust-strip::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #111 !important;
  opacity: .86 !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
body.public-site .trust-strip::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 960px) {
  body.public-site .content-section,
  body.public-site .story-journal-section,
  body.public-site .cert-section,
  body.public-site .contact-section,
  body.public-site .supplier-map-section {
    padding-top: 42px !important;
  }
  body.public-site .trust-strip {
    padding-top: 22px !important;
  }
}

/* ===== v39 calming beige + China-red accents ===== */
:root {
  --beige-0: #fffdf8;
  --beige-1: #faf6ef;
  --beige-2: #f6f1e8;
  --beige-3: #f1e9dd;
  --beige-4: #e8ddcf;
  --beige-line: #d9ccbc;
  --ink: #151515;
  --china-red: #c74336;
  --china-red-deep: #a93229;
  --china-red-soft: #efd2cc;
}

html,
body,
body.public-site {
  background: var(--beige-2) !important;
  color: var(--ink) !important;
}

body.public-site::before {
  opacity: .09 !important;
  background:
    radial-gradient(620px circle at var(--mouse-x) var(--mouse-y), rgba(199, 67, 54, .18), transparent 70%) !important;
  mix-blend-mode: multiply !important;
}

body.public-site,
body.public-site p,
body.public-site li,
body.public-site small,
body.public-site span,
body.public-site strong,
body.public-site h1,
body.public-site h2,
body.public-site h3,
body.public-site h4,
body.public-site dt,
body.public-site dd,
body.public-site label,
body.public-site summary,
body.public-site button,
body.public-site a,
body.public-site .rich-text,
body.public-site .rich-text p,
body.public-site .section-copy p,
body.public-site .cert-head p,
body.public-site .supplier-map-copy p,
body.public-site .footer-main a,
body.public-site .footer-main p,
body.public-site .footer-brand p,
body.public-site .footer-bottom {
  color: var(--ink) !important;
}

body.public-site .rich-text p,
body.public-site .section-copy p,
body.public-site .cert-head p,
body.public-site .supplier-map-copy p,
body.public-site .contact-copy > p:not(.eyebrow),
body.public-site .footer-brand p,
body.public-site .footer-main p,
body.public-site .trust-grid small {
  opacity: .76;
}

body.public-site .eyebrow,
body.public-site .trust-grid > div > span,
body.public-site .product-grid article > span,
body.public-site .language-selector-kicker,
body.public-site .cookie-kicker,
body.public-site .cookie-badge,
body.public-site .story-tabs > label > span,
body.public-site .story-accordion summary > span:first-child,
body.public-site .story-yearline-hint {
  color: var(--china-red) !important;
}

::selection {
  background: rgba(199, 67, 54, .28) !important;
  color: var(--ink) !important;
}

::-webkit-scrollbar-track { background: var(--beige-2) !important; }
::-webkit-scrollbar-thumb {
  background: var(--china-red) !important;
  border-color: var(--beige-2) !important;
}

body.public-site .scroll-progress {
  background: linear-gradient(90deg, var(--china-red-deep), var(--china-red), #df7668) !important;
  box-shadow: 0 0 14px rgba(199, 67, 54, .24) !important;
}

body.public-site .site-header,
body.public-site.scrolled-header .site-header,
body.public-site .site-header.scrolled {
  background: rgba(248, 243, 234, .94) !important;
  border-bottom: 1px solid var(--beige-line) !important;
  box-shadow: 0 12px 34px rgba(55, 39, 27, .08) !important;
  backdrop-filter: blur(20px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(112%) !important;
}

body.public-site .brand img {
  filter: none !important;
}

body.public-site .main-nav a,
body.public-site .language-menu-trigger,
body.public-site .language-menu-trigger span {
  color: var(--ink) !important;
  opacity: 1 !important;
}

body.public-site .main-nav a::after {
  background: var(--china-red) !important;
}

body.public-site .main-nav a:hover,
body.public-site .main-nav a.active,
body.public-site .language-menu-trigger:hover,
body.public-site .language-menu-trigger:focus-visible {
  color: var(--china-red-deep) !important;
}

body.public-site .language-menu-trigger {
  background: rgba(255, 253, 248, .78) !important;
  border-color: var(--beige-line) !important;
  box-shadow: none !important;
}

body.public-site .nav-toggle span:not(.sr-only),
body.public-site .nav-toggle span {
  background: var(--ink) !important;
}

body.public-site .header-cta,
body.public-site .btn-primary,
body.public-site .btn-light {
  color: var(--ink) !important;
  background: var(--china-red) !important;
  border-color: rgba(21, 21, 21, .12) !important;
  box-shadow: 0 12px 28px rgba(151, 48, 39, .16) !important;
}

body.public-site .header-cta:hover,
body.public-site .btn-primary:hover,
body.public-site .btn-light:hover {
  color: var(--ink) !important;
  background: #d55a4d !important;
  box-shadow: 0 16px 34px rgba(151, 48, 39, .22) !important;
}

body.public-site .btn-ghost {
  color: var(--ink) !important;
  background: rgba(255, 253, 248, .70) !important;
  border-color: var(--beige-line) !important;
  backdrop-filter: blur(10px) !important;
}

body.public-site .btn-ghost:hover {
  background: var(--beige-0) !important;
  border-color: rgba(199, 67, 54, .45) !important;
}

body.public-site .landing-image {
  background: var(--beige-1) !important;
}

body.public-site .trust-strip {
  background: var(--trust-bg, var(--beige-3)) !important;
  border-top: 0 !important;
}

body.public-site .trust-strip::before,
body.public-site .section-separator {
  background: var(--beige-line) !important;
  opacity: 1 !important;
}

body.public-site .trust-grid {
  background: transparent !important;
  border: 1px solid var(--trust-border, var(--beige-line)) !important;
  box-shadow: 0 20px 58px rgba(67, 49, 34, .07) !important;
}

body.public-site .trust-grid > div {
  background: var(--trust-card-bg, var(--beige-0)) !important;
  border-right-color: var(--trust-border, var(--beige-line)) !important;
}

body.public-site .trust-grid > div:hover {
  background: #ffffff !important;
}

body.public-site .trust-grid > div::after {
  background: linear-gradient(90deg, var(--china-red), transparent) !important;
}

body.public-site .theme-light,
body.public-site .theme-dark,
body.public-site .theme-accent,
body.public-site .content-section.theme-light,
body.public-site .content-section.theme-dark,
body.public-site .content-section.theme-accent {
  background: linear-gradient(180deg, var(--beige-0), var(--beige-2)) !important;
}

body.public-site .theme-cream,
body.public-site .story-journal-section,
body.public-site .supplier-map-section,
body.public-site .cert-section {
  background: linear-gradient(180deg, var(--beige-3), var(--beige-1)) !important;
}

body.public-site .contact-section {
  background: linear-gradient(180deg, #efe4d7, var(--beige-2)) !important;
}

body.public-site .content-section,
body.public-site .story-journal-section,
body.public-site .supplier-map-section,
body.public-site .cert-section,
body.public-site .contact-section {
  border-top-color: var(--beige-line) !important;
}

body.public-site .content-section::after,
body.public-site .cert-section::before,
body.public-site .contact-section::before,
body.public-site .site-footer::before {
  opacity: .055 !important;
  filter: sepia(.25) saturate(.55) !important;
}

body.public-site .content-section::before {
  color: rgba(199, 67, 54, .045) !important;
}

body.public-site .content-section h2,
body.public-site .story-panel-head h3,
body.public-site .supplier-map-copy h2,
body.public-site .contact-copy h2,
body.public-site .cert-section h2,
body.public-site .contact-card h3 {
  color: var(--ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  filter: none !important;
}

body.public-site .text-link {
  color: var(--ink) !important;
  border-bottom-color: var(--china-red) !important;
}

body.public-site .text-link:hover {
  color: var(--china-red-deep) !important;
}

body.public-site .section-media,
body.public-site .product-grid article,
body.public-site .cert-grid > div,
body.public-site .story-tabs > label,
body.public-site .story-accordion details,
body.public-site .story-yearline-panels > article,
body.public-site .contact-card,
body.public-site .supplier-map-card {
  background: rgba(255, 253, 248, .90) !important;
  border-color: var(--beige-line) !important;
  box-shadow: 0 20px 54px rgba(70, 49, 31, .07) !important;
}

body.public-site .section-media {
  background: #f9f4ec !important;
}

body.public-site .product-grid article:hover,
body.public-site .cert-grid > div:hover,
body.public-site .story-accordion details:hover {
  background: #ffffff !important;
  border-color: rgba(199, 67, 54, .36) !important;
}

body.public-site .story-tabs > input:checked + label,
body.public-site .story-tabs > label:hover,
body.public-site .language-choice.is-active,
body.public-site .language-choice:hover,
body.public-site .language-choice:focus-visible {
  background: var(--china-red-soft) !important;
  border-color: rgba(199, 67, 54, .50) !important;
  color: var(--ink) !important;
}

body.public-site .story-yearline-track::before,
body.public-site .story-yearline-track .dot,
body.public-site .story-yearline > input:checked ~ .story-yearline-track label .dot {
  background: var(--china-red) !important;
}

body.public-site .story-yearline-track .year {
  color: var(--ink) !important;
  background: var(--beige-0) !important;
  border-color: var(--beige-line) !important;
}

body.public-site .cert-grid > div strong,
body.public-site .cert-grid > div span {
  color: var(--ink) !important;
}

body.public-site .contact-section::after {
  border-color: rgba(199, 67, 54, .10) !important;
  box-shadow:
    0 0 0 85px rgba(199, 67, 54, .025),
    0 0 0 170px rgba(199, 67, 54, .014) !important;
}

body.public-site .contact-card dt,
body.public-site .contact-card dd,
body.public-site .contact-card a {
  color: var(--ink) !important;
}

body.public-site .supplier-map {
  background: #f8f5ee !important;
  border-color: var(--beige-line) !important;
}

body.public-site .supplier-world-svg .supplier-country-shape,
body.public-site .supplier-map-visual .supplier-country-shape {
  fill: #e6e9df;
  stroke: #b8b9ad;
}

body.public-site .supplier-map-tooltip {
  background: var(--beige-0) !important;
  color: var(--ink) !important;
  border: 1px solid var(--beige-line) !important;
  box-shadow: 0 14px 34px rgba(55, 39, 27, .12) !important;
}

body.public-site .supplier-map-tooltip strong,
body.public-site .supplier-map-tooltip span {
  color: var(--ink) !important;
}

body.public-site .language-modal {
  background: rgba(44, 33, 24, .20) !important;
}

body.public-site .language-selector-circle {
  background: linear-gradient(145deg, var(--beige-0), var(--beige-3)) !important;
  border-color: var(--beige-line) !important;
  box-shadow: 0 34px 90px rgba(51, 35, 24, .20) !important;
}

body.public-site .language-selector-circle::before,
body.public-site .language-selector-circle::after {
  border-color: rgba(199, 67, 54, .14) !important;
}

body.public-site .language-choice,
body.public-site .language-modal-close {
  background: rgba(255, 253, 248, .78) !important;
  color: var(--ink) !important;
  border-color: var(--beige-line) !important;
}

body.public-site .language-loader {
  background: rgba(246, 241, 232, .96) !important;
}

body.public-site .loader-globe,
body.public-site .loader-globe path,
body.public-site .loader-globe circle {
  stroke: var(--china-red) !important;
}

body.public-site .loader-red-zone {
  fill: var(--china-red) !important;
}

body.public-site .cookie-teabag {
  background: rgba(54, 41, 31, .20) !important;
}

body.public-site .cookie-string {
  background: var(--china-red) !important;
}

body.public-site .cookie-card {
  background: linear-gradient(180deg, var(--beige-0), var(--beige-3)) !important;
  border-color: var(--beige-line) !important;
  box-shadow: 0 30px 80px rgba(55, 39, 27, .18) !important;
}

body.public-site .cookie-card::before,
body.public-site .cookie-card::after {
  border-color: rgba(199, 67, 54, .18) !important;
}

body.public-site .cookie-link {
  color: var(--ink) !important;
  text-decoration-color: var(--china-red) !important;
}

body.public-site .site-footer {
  background: var(--beige-3) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--beige-line) !important;
}

body.public-site .site-footer h3,
body.public-site .site-footer a,
body.public-site .site-footer p,
body.public-site .site-footer span {
  color: var(--ink) !important;
}

body.public-site .site-footer a:hover,
body.public-site .admin-link:hover {
  color: var(--china-red-deep) !important;
}

body.public-site .footer-bottom {
  border-top-color: var(--beige-line) !important;
}

/* Legal pages use the same calm public palette. */
body.legal-body {
  background: var(--beige-2) !important;
  color: var(--ink) !important;
}

body.legal-body .site-header,
body.legal-body .legal-header {
  background: rgba(248, 243, 234, .96) !important;
  border-bottom: 1px solid var(--beige-line) !important;
  box-shadow: 0 12px 34px rgba(55, 39, 27, .08) !important;
}

body.legal-body .legal-page {
  background: linear-gradient(180deg, var(--beige-1), var(--beige-2)) !important;
}

body.legal-body .legal-page::before {
  opacity: .045 !important;
  filter: sepia(.25) saturate(.55) !important;
}

body.legal-body .legal-page h1,
body.legal-body .legal-page h2,
body.legal-body .legal-page p,
body.legal-body .legal-page strong,
body.legal-body .legal-page a,
body.legal-body .eyebrow,
body.legal-body .btn-ghost {
  color: var(--ink) !important;
}

body.legal-body .eyebrow {
  color: var(--china-red) !important;
}

body.legal-body .btn-ghost {
  background: var(--beige-0) !important;
  border-color: var(--beige-line) !important;
}

@media (max-width: 980px) {
  body.public-site .main-nav {
    background: rgba(248, 243, 234, .98) !important;
    border-color: var(--beige-line) !important;
    box-shadow: 0 18px 42px rgba(55, 39, 27, .12) !important;
  }
  body.public-site .main-nav a {
    color: var(--ink) !important;
    border-bottom-color: rgba(217, 204, 188, .72) !important;
  }
}


/* ===== v40: Weltkarte entfernt, randlose Medien und frei einstellbare Größe ===== */
body.public-site .supplier-map-section,
body.public-site [data-supplier-map-canvas] {
  display: none !important;
}

body.public-site .section-media,
body.public-site .video-fullscreen-media {
  width: clamp(20%, var(--media-width, 100%), 200%) !important;
  max-width: none !important;
  justify-self: center !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.public-site .section-media::before,
body.public-site .section-media::after,
body.public-site .video-fullscreen-media::before,
body.public-site .video-fullscreen-media::after {
  display: none !important;
  content: none !important;
}

body.public-site .section-media img,
body.public-site .section-media video,
body.public-site .video-fullscreen-media img,
body.public-site .video-fullscreen-media video {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.public-site .section-media:hover,
body.public-site .video-fullscreen-media:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.public-site .section-media:hover img,
body.public-site .section-media:hover video {
  --media-hover-scale: 1 !important;
  filter: none !important;
}

.admin-body .media-display-size {
  align-content: start;
}
.admin-body .media-display-size small {
  display: block;
  margin-top: 8px;
  color: var(--admin-muted, #aeb8c7);
  line-height: 1.45;
}
.admin-body .media-size-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.admin-body .media-size-fields input[type="number"] {
  min-width: 0;
  text-align: center;
}
.admin-body .media-size-fields > span {
  font-weight: 800;
}
@media (max-width: 580px) {
  .admin-body .media-size-fields {
    grid-template-columns: minmax(0, 1fr) 72px auto;
  }
}

/* v40 admin preview also reflects sizes above 100 %. */
.admin-body .section-admin-preview img,
.admin-body .section-admin-preview video {
  max-width: none !important;
}
body.public-site .section-media,
body.public-site .video-fullscreen-media {
  max-width: calc(100vw - 48px) !important;
}
@media (max-width: 580px) {
  body.public-site .section-media,
  body.public-site .video-fullscreen-media {
    max-width: calc(100vw - 24px) !important;
  }
}


/* ===== v41 deployment-safe overrides ===== */
body.public-site .supplier-map-section,
body.public-site [data-supplier-map-canvas],
body.public-site .supplier-map-shell,
body.public-site .supplier-map-card {
  display: none !important;
}
body.public-site .section-media,
body.public-site .video-fullscreen-media {
  width: clamp(20%, var(--media-width, 100%), 200%) !important;
  max-width: none !important;
  justify-self: center !important;
  overflow: visible !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.public-site .section-media::before,
body.public-site .section-media::after,
body.public-site .video-fullscreen-media::before,
body.public-site .video-fullscreen-media::after {
  display: none !important;
  content: none !important;
}
body.public-site .section-media img,
body.public-site .section-media video,
body.public-site .video-fullscreen-media img,
body.public-site .video-fullscreen-media video {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 840px) {
  body.public-site .section-media,
  body.public-site .video-fullscreen-media {
    width: min(var(--media-width, 100%), 100%) !important;
  }
}


/* ===== V43 IONOS stability: visible landing fallback, borderless media ===== */
body.public-site .landing-image {
  background-color: #f6f1e8 !important;
  background-image: url("../img/landing-default.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
body.public-site .landing-image img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}
body.public-site .section-media,
body.public-site .video-fullscreen-media,
body.public-site .section-media img,
body.public-site .section-media video,
body.public-site .video-fullscreen-media img,
body.public-site .video-fullscreen-media video {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.public-site .section-media,
body.public-site .video-fullscreen-media {
  width: clamp(20%, var(--media-width, 100%), 200%) !important;
  max-width: calc(100vw - 48px) !important;
  overflow: visible !important;
}
@media (max-width: 840px) {
  body.public-site .section-media,
  body.public-site .video-fullscreen-media {
    width: min(var(--media-width, 100%), 100%) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ===== V44: modern app-style story with one chapter selector and all text visible ===== */
body.public-site .story-journal-section {
  background: #f3ecdf !important;
}
body.public-site .story-journal {
  max-width: 1180px;
}
body.public-site .story-intro {
  max-width: 860px;
  margin: 0 auto 38px;
  text-align: center;
}
body.public-site .story-intro .eyebrow {
  justify-content: center;
}
body.public-site .story-app {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(31, 24, 20, .11);
  border-radius: 36px;
  background: rgba(255, 252, 246, .92);
  box-shadow: 0 30px 90px rgba(66, 38, 24, .13);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.public-site .story-app::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -170px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 38, 29, .13), transparent 70%);
  pointer-events: none;
}
body.public-site .story-app-windowbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(31, 24, 20, .08);
  background: rgba(250, 246, 238, .88);
}
body.public-site .story-app-windowbar > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(166, 38, 29, .28);
}
body.public-site .story-app-windowbar > span:nth-child(2) { opacity: .68; }
body.public-site .story-app-windowbar > span:nth-child(3) { opacity: .42; }
body.public-site .story-app-windowbar strong {
  margin-left: auto;
  color: rgba(31, 24, 20, .46);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .18em;
}
body.public-site .story-app-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: transparent;
}
body.public-site .story-app-tabs > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.public-site .story-app-tabs > label {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  padding: 15px 16px;
  border: 1px solid rgba(31, 24, 20, .08) !important;
  border-radius: 22px !important;
  background: rgba(244, 237, 226, .72) !important;
  box-shadow: none !important;
  color: #171310 !important;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
body.public-site .story-app-tabs > label:hover {
  transform: translateY(-2px);
  border-color: rgba(166, 38, 29, .25) !important;
  background: #fffaf2 !important;
}
body.public-site .story-tab-number {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(166, 38, 29, .09);
  color: #a6261d !important;
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .08em;
}
body.public-site .story-tab-copy {
  min-width: 0;
  display: block;
}
body.public-site .story-tab-copy small {
  display: block;
  margin-bottom: 4px;
  color: rgba(23, 19, 16, .48) !important;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.public-site .story-tab-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #171310 !important;
  font-size: .88rem;
  line-height: 1.25;
}
body.public-site .story-app-tabs > input:checked + label {
  transform: translateY(-2px);
  border-color: #a6261d !important;
  background: #a6261d !important;
  box-shadow: 0 16px 34px rgba(166, 38, 29, .23) !important;
}
body.public-site .story-app-tabs > input:checked + label .story-tab-number {
  background: rgba(255, 255, 255, .16);
  color: #fff !important;
}
body.public-site .story-app-tabs > input:checked + label small,
body.public-site .story-app-tabs > input:checked + label strong {
  color: #fff !important;
}
body.public-site .story-app-panels {
  grid-column: 1 / -1;
  margin-top: 4px;
  overflow: hidden;
  border-top: 1px solid rgba(31, 24, 20, .08);
  background: #fffdf8;
}
body.public-site .story-app-panels .story-panel {
  display: none;
  animation: story-app-panel-in .42s cubic-bezier(.22,.8,.2,1) both;
}
body.public-site #story-tab-0:checked ~ .story-app-panels .story-panel-0,
body.public-site #story-tab-1:checked ~ .story-app-panels .story-panel-1,
body.public-site #story-tab-2:checked ~ .story-app-panels .story-panel-2 {
  display: block;
}
@keyframes story-app-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
body.public-site .story-app-head {
  padding: clamp(34px, 5vw, 62px) clamp(24px, 6vw, 76px) 30px;
  border-bottom: 0;
  text-align: left;
}
body.public-site .story-app-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
body.public-site .story-app-kicker span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #a6261d;
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
}
body.public-site .story-app-kicker p {
  margin: 0;
  color: #a6261d !important;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.public-site .story-app-head h3 {
  max-width: 900px;
  margin: 0;
  color: #171310 !important;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
body.public-site .story-app-subtitle {
  max-width: 760px;
  margin: 20px 0 0 !important;
  color: rgba(23, 19, 16, .65) !important;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
}
body.public-site .story-app-feed {
  padding: 0 clamp(18px, 5vw, 64px) clamp(30px, 6vw, 70px);
}
body.public-site .story-app-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(31, 24, 20, .08);
  border-radius: 26px;
  background: #f8f1e6;
  color: #171310;
}
body.public-site .story-app-card + .story-app-card {
  margin-top: 16px;
}
body.public-site .story-app-card-intro {
  margin-bottom: 26px;
  background: linear-gradient(145deg, #f5e8d8, #fbf7ef);
}
body.public-site .story-card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #171310;
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
}
body.public-site .story-card-content h4 {
  margin: 0 0 14px;
  color: #171310 !important;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
body.public-site .story-card-content .story-rich-text,
body.public-site .story-card-content .story-rich-text p,
body.public-site .story-card-content .story-rich-text li {
  color: rgba(23, 19, 16, .76) !important;
}
body.public-site .story-card-content .story-rich-text p:last-child {
  margin-bottom: 0;
}
body.public-site .story-app-timeline {
  position: relative;
  display: grid;
  gap: 16px;
}
body.public-site .story-app-timeline::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(#a6261d, rgba(166, 38, 29, .12));
}
body.public-site .story-app-moment {
  grid-template-columns: 52px minmax(0, 1fr);
  background: #fffaf2;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.public-site .story-app-moment:hover {
  transform: translateY(-3px);
  border-color: rgba(166, 38, 29, .18);
  box-shadow: 0 18px 40px rgba(65, 42, 28, .08);
}
body.public-site .story-moment-marker {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
body.public-site .story-moment-marker span {
  width: 18px;
  height: 18px;
  border: 5px solid #fffaf2;
  border-radius: 50%;
  background: #a6261d;
  box-shadow: 0 0 0 1px rgba(166, 38, 29, .25);
}
body.public-site .story-date-pill {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px !important;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(166, 38, 29, .09);
  color: #a6261d !important;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 780px) {
  body.public-site .story-intro { text-align: left; }
  body.public-site .story-intro .eyebrow { justify-content: flex-start; }
  body.public-site .story-app { border-radius: 26px; }
  body.public-site .story-app-windowbar { min-height: 46px; padding: 0 17px; }
  body.public-site .story-app-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
  }
  body.public-site .story-app-tabs > label {
    min-height: 88px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px;
    text-align: center;
    border-radius: 18px !important;
  }
  body.public-site .story-tab-number {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
  body.public-site .story-tab-copy small { display: none; }
  body.public-site .story-tab-copy strong {
    font-size: .68rem;
    line-height: 1.2;
    -webkit-line-clamp: 3;
  }
  body.public-site .story-app-head { padding: 34px 21px 24px; }
  body.public-site .story-app-head h3 { font-size: 2.15rem; }
  body.public-site .story-app-feed { padding: 0 12px 22px; }
  body.public-site .story-app-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 20px 16px;
    border-radius: 21px;
  }
  body.public-site .story-card-icon { width: 36px; height: 36px; border-radius: 12px; }
  body.public-site .story-app-timeline::before { left: 34px; }
  body.public-site .story-app-moment { grid-template-columns: 38px minmax(0, 1fr); }
  body.public-site .story-moment-marker span { width: 16px; height: 16px; border-width: 4px; }
}


/* V45 – einklappbare Story */
.story-collapsible { border: 0; }
.story-collapsible > summary { list-style: none; }
.story-collapsible > summary::-webkit-details-marker { display: none; }
.story-open-card { display:flex; align-items:center; gap:18px; width:min(760px,100%); margin:0 auto; padding:22px 24px; border:1px solid rgba(199,67,54,.2); border-radius:26px; background:rgba(255,250,242,.9); box-shadow:0 18px 48px rgba(91,54,36,.1); cursor:pointer; transition:.25s ease; }
.story-open-card:hover { transform:translateY(-3px); box-shadow:0 24px 58px rgba(91,54,36,.14); }
.story-open-icon { display:grid; place-items:center; width:52px; height:52px; flex:0 0 52px; border-radius:18px; background:#c74336; color:#fff; font-size:1.5rem; }
.story-open-copy { display:grid; gap:2px; color:#151515; }
.story-open-copy small { color:#9c342c; font-size:.68rem; font-weight:850; letter-spacing:.16em; }
.story-open-copy strong { font-size:1.15rem; }
.story-open-chevron { width:14px; height:14px; margin-left:auto; border-right:2px solid #151515; border-bottom:2px solid #151515; transform:rotate(45deg) translateY(-3px); transition:transform .25s ease; }
.story-collapsible[open] .story-open-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.story-collapsible-body { padding-top:38px; animation:story-open .32s ease both; }
@keyframes story-open { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
.story-close-button { display:block; margin:28px auto 0; padding:13px 22px; border:1px solid rgba(21,21,21,.15); border-radius:999px; background:#fffaf2; color:#151515; font-weight:800; cursor:pointer; }

/* V45 – Karriere und Bewerbung */
.career-section { padding:120px 0; background:linear-gradient(180deg,#efe4d5,#f7f0e6); color:#151515; }
.career-shell { display:grid; gap:42px; }
.career-video-wrap { position:relative; min-height:clamp(300px,46vw,620px); overflow:hidden; border-radius:36px; background:#1a1714; box-shadow:0 35px 80px rgba(78,47,31,.16); }
.career-video-wrap video { width:100%; height:100%; min-height:inherit; object-fit:cover; }
.career-video-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(20,14,10,.72)); }
.career-video-overlay { position:absolute; left:clamp(24px,5vw,68px); right:24px; bottom:clamp(24px,5vw,58px); z-index:2; color:#fff; }
.career-video-overlay span { display:block; margin-bottom:10px; font-size:.7rem; font-weight:850; letter-spacing:.18em; }
.career-video-overlay strong { display:block; max-width:760px; font-size:clamp(2rem,4.8vw,4.8rem); line-height:1; letter-spacing:-.05em; }
.career-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,7vw,90px); align-items:start; }
.career-copy h2 { margin:0; font-size:clamp(2.6rem,5vw,5.2rem); line-height:.98; letter-spacing:-.055em; }
.career-copy > p:not(.eyebrow) { max-width:560px; font-size:1.08rem; }
.career-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.career-pills span { padding:10px 14px; border:1px solid rgba(199,67,54,.22); border-radius:999px; background:#fffaf2; font-size:.8rem; font-weight:800; }
.application-form { display:grid; gap:18px; padding:clamp(24px,4vw,44px); border:1px solid rgba(112,75,51,.12); border-radius:32px; background:rgba(255,250,242,.92); box-shadow:0 24px 70px rgba(90,54,34,.11); }
.application-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.application-form label { display:grid; gap:8px; color:#151515; font-size:.8rem; font-weight:800; }
.application-form input,.application-form textarea,.application-form select { width:100%; border:1px solid #d8c9b9; border-radius:15px; background:#fff; color:#151515; padding:14px 15px; outline:none; transition:.2s ease; }
.application-form input:focus,.application-form textarea:focus,.application-form select:focus { border-color:#c74336; box-shadow:0 0 0 4px rgba(199,67,54,.1); }
.resume-dropzone { position:relative; place-items:center; min-height:190px; padding:28px; border:1.5px dashed #c9ad99; border-radius:22px; background:#f8efe5; text-align:center; cursor:pointer; transition:.2s ease; }
.resume-dropzone:hover,.resume-dropzone.is-dragging { border-color:#c74336; background:#f8e6df; transform:translateY(-2px); }
.resume-dropzone.has-file { border-style:solid; border-color:#9e3028; background:#f5e0da; }
.resume-dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.resume-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:#c74336; color:white; font-size:1.4rem; }
.resume-dropzone strong { font-size:1rem; }
.resume-dropzone small { color:#65574d; font-weight:600; }
.privacy-check { grid-template-columns:auto 1fr !important; align-items:start; font-weight:600 !important; line-height:1.45; }
.privacy-check input { width:18px; height:18px; margin-top:2px; accent-color:#c74336; }
.privacy-check a { color:#a9332b; text-decoration:underline; }
.application-submit { width:100%; justify-content:space-between; border-radius:17px; }
.application-submit b { font-size:1.35rem; }
.application-message { padding:14px 16px; border-radius:15px; }
.application-message p { margin:0; }
.application-message.error { background:#fde7e3; border:1px solid #e5aca5; }
.application-message.success { background:#e7f3e6; border:1px solid #b9d4b6; }
.application-honeypot { position:absolute !important; left:-9999px !important; }
@media (max-width: 820px) { .career-grid{grid-template-columns:1fr}.application-row{grid-template-columns:1fr}.career-section{padding:82px 0}.career-video-wrap{border-radius:24px}.story-open-card{padding:18px}.story-open-icon{width:44px;height:44px;flex-basis:44px}.story-open-copy strong{font-size:1rem} }


/* V46 – reduzierter Story-Knopf, zusätzliche China-Rot-Akzente und Zertifikatsdownloads */
body.public-site .story-open-card {
  width: fit-content;
  min-width: min(340px, 100%);
  justify-content: center;
  margin-inline: auto;
  padding: 16px 30px;
  border: 1px solid #a82d24;
  border-radius: 17px;
  background: linear-gradient(135deg, #c74336, #a92f27);
  color: #fff;
  box-shadow: 0 16px 38px rgba(167, 45, 36, .22);
  text-align: center;
}
body.public-site .story-open-card:hover {
  background: linear-gradient(135deg, #d34b3e, #b7352c);
  box-shadow: 0 22px 48px rgba(167, 45, 36, .3);
}
body.public-site .story-open-label {
  color: #fff;
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .025em;
}
body.public-site .story-open-label-open { display: none; }
body.public-site .story-collapsible[open] .story-open-label-closed { display: none; }
body.public-site .story-collapsible[open] .story-open-label-open { display: inline; }
body.public-site .story-open-icon,
body.public-site .story-open-copy,
body.public-site .story-open-chevron { display: none !important; }
body.public-site .story-close-button {
  border-color: #aa3027;
  background: #c74336;
  color: #fff;
  box-shadow: 0 12px 28px rgba(167, 45, 36, .18);
}
body.public-site .story-close-button:hover { background: #ad3128; }

body.public-site .scroll-progress {
  background: linear-gradient(90deg, #8f261f, #d84d3f, #a92f27);
  box-shadow: 0 0 16px rgba(199, 67, 54, .42);
}
body.public-site .eyebrow { color: #b5332a !important; }
body.public-site .eyebrow::before { height: 2px; }
body.public-site .content-section::before { color: rgba(185, 51, 42, .055); }
body.public-site .content-section .section-copy::before {
  content: "";
  display: block;
  width: 58px;
  height: 5px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c74336, #8f3028);
}
body.public-site .story-journal-section .story-intro::before { display: none; }
body.public-site .section-separator.separator-top::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(180px, 38vw);
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #c74336 28%, #c74336 72%, transparent);
}
body.public-site .trust-grid > div::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #c74336, rgba(199, 67, 54, .22));
}
body.public-site .product-grid article::after,
body.public-site .contact-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: inherit;
  background: #c74336;
  opacity: .9;
}
body.public-site .main-nav a::after { background: #c74336; }
body.public-site .text-link { color: #a92f27 !important; }
body.public-site .footer-main { border-top-color: rgba(199, 67, 54, .35); }
body.public-site .footer-main strong,
body.public-site .contact-card h3 { text-decoration-color: #c74336; }

body.public-site .cert-grid { align-items: stretch; }
body.public-site .cert-grid .cert-card {
  position: relative;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 22px 22px;
  border: 1px solid rgba(199, 67, 54, .2);
  border-radius: 22px;
  background: #fffaf2;
  color: #151515;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
body.public-site .cert-grid .cert-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, #c74336, #952a23);
}
body.public-site .cert-grid .cert-card::after {
  content: "PDF";
  position: absolute;
  right: 16px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 30px;
  border-radius: 10px;
  background: rgba(199, 67, 54, .1);
  color: #a92f27;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}
body.public-site .cert-grid .cert-card strong {
  display: block;
  margin-bottom: 5px;
  color: #151515 !important;
  font-size: 1rem;
}
body.public-site .cert-grid .cert-card > span {
  color: rgba(21, 21, 21, .7) !important;
  font-size: .77rem;
}
body.public-site .cert-grid .cert-card small {
  display: block;
  margin-top: 15px;
  color: #a92f27;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .04em;
}
body.public-site .cert-grid .cert-card.is-downloadable { cursor: pointer; }
body.public-site .cert-grid .cert-card.is-downloadable:hover {
  transform: translateY(-7px);
  border-color: rgba(199, 67, 54, .55);
  background: #fff5eb;
  box-shadow: 0 22px 50px rgba(111, 61, 37, .12);
}
body.public-site .cert-grid .cert-card.is-unavailable { opacity: .72; }
body.public-site .cert-grid .cert-card.is-unavailable::after { content: "–"; }
body.public-site .cert-grid .cert-card.is-unavailable small { color: rgba(21, 21, 21, .5); }

.certificate-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.certificate-admin-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(199, 67, 54, .18);
  border-radius: 20px;
  background: rgba(255, 250, 242, .72);
}
.certificate-admin-card legend {
  padding: 0 8px;
  color: #a92f27;
  font-weight: 850;
}
.certificate-admin-card .upload-box { min-height: 118px; }
.certificate-remove {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px !important;
  font-weight: 650 !important;
}
.certificate-remove input { width: 18px; height: 18px; accent-color: #c74336; }

@media (max-width: 820px) {
  body.public-site .story-open-card { min-width: min(290px, 100%); padding: 15px 22px; border-radius: 15px; }
  body.public-site .content-section .section-copy::before { width: 44px; margin-bottom: 18px; }
  .certificate-admin-grid { grid-template-columns: 1fr; }
}

/* V49 – flexible links and robust admin authentication */
body.public-site .btn-secondary {
  border: 1px solid rgba(199, 67, 54, .5) !important;
  background: rgba(255, 250, 242, .72) !important;
  color: #a92f27 !important;
  box-shadow: 0 12px 28px rgba(111, 61, 37, .08) !important;
}
body.public-site .btn-secondary:hover {
  border-color: #c74336 !important;
  background: #fff5eb !important;
  color: #87251f !important;
  box-shadow: 0 18px 36px rgba(111, 61, 37, .13) !important;
}
body.public-site .theme-dark .btn-secondary,
body.public-site .theme-accent .btn-secondary {
  border-color: rgba(199, 67, 54, .62) !important;
  background: rgba(255, 250, 242, .9) !important;
  color: #942a23 !important;
}
body.public-site .cert-grid .cert-card.is-external::after { content: "LINK"; }

.action-link-admin {
  padding: 22px;
  border: 1px solid rgba(199, 67, 54, .18);
  border-radius: 22px;
  background: rgba(255, 250, 242, .55);
}
.action-link-admin > .admin-subhead { margin: 0 0 16px; }
.action-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.action-link-grid fieldset {
  min-width: 0;
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(199, 67, 54, .16);
  border-radius: 18px;
  background: rgba(255,255,255,.56);
}
.action-link-grid legend {
  padding: 0 8px;
  color: #a92f27;
  font-weight: 850;
}
.action-link-grid .inline-check,
.action-remove-row label,
.certificate-remove label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px !important;
  font-weight: 650 !important;
}
.action-link-grid .inline-check input,
.action-remove-row input,
.certificate-remove input {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  accent-color: #c74336;
}
.action-remove-row,
.certificate-remove {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px !important;
  grid-template-columns: none !important;
}
.certificate-admin-card input[type="url"] { width: 100%; }

@media (max-width: 820px) {
  .action-link-admin { padding: 16px; }
  .action-link-grid { grid-template-columns: 1fr; }
}


/* V51 – skalierbare Zertifikatslogos mit einheitlicher Darstellung */
body.public-site .cert-logo-grid {
  --certificate-logo-size: 150px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--certificate-logo-size) + 78px)), 1fr));
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
  margin-top: 54px;
}
body.public-site .cert-logo-grid .cert-logo-item {
  position: relative;
  min-width: 0;
  min-height: calc(var(--certificate-logo-size) + 56px);
  display: grid;
  place-items: center;
  padding: 28px;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: inherit;
  isolation: isolate;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
body.public-site .cert-logo-grid .cert-logo-item::before {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: #c74336;
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .28s ease, transform .28s ease;
}
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable {
  cursor: pointer;
}
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:hover,
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:focus-visible {
  transform: translateY(-8px);
  background: rgba(255, 250, 242, .68);
  box-shadow: 0 22px 55px rgba(111, 61, 37, .11);
  outline: none;
}
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:hover::before,
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}
body.public-site .cert-logo-grid .cert-logo-item.is-unavailable {
  opacity: .55;
}
body.public-site .cert-logo-grid .cert-logo-frame {
  width: var(--certificate-logo-size);
  height: var(--certificate-logo-size);
  display: grid;
  place-items: center;
}
body.public-site .cert-logo-grid .cert-logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transition: transform .28s ease;
}
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:hover .cert-logo-frame img,
body.public-site .cert-logo-grid .cert-logo-item.is-downloadable:focus-visible .cert-logo-frame img {
  transform: scale(1.045);
}

.certificate-logo-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 1px solid rgba(199, 67, 54, .2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,250,242,.92), rgba(199,67,54,.055));
}
.certificate-logo-settings strong {
  display: block;
  color: #151515;
  font-size: 1rem;
}
.certificate-logo-settings p {
  margin: 7px 0 0;
  color: rgba(21,21,21,.67);
  font-size: .86rem;
}
.certificate-logo-settings label {
  display: grid;
  gap: 10px;
}
.certificate-logo-settings label > span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #151515;
  font-weight: 760;
}
.certificate-logo-settings output {
  color: #a92f27;
  font-weight: 900;
}
.certificate-logo-settings input[type="range"] {
  width: 100%;
  accent-color: #c74336;
}
.certificate-logo-preview {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px dashed rgba(199, 67, 54, .24);
}
.certificate-logo-preview img {
  width: 132px;
  height: 132px;
  object-fit: contain;
}
.certificate-logo-upload {
  border-color: rgba(199, 67, 54, .34) !important;
  background: rgba(199, 67, 54, .045) !important;
}

@media (max-width: 820px) {
  body.public-site .cert-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  body.public-site .cert-logo-grid .cert-logo-item {
    min-height: calc(var(--certificate-logo-size) + 34px);
    padding: 17px;
  }
  .certificate-logo-settings {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  body.public-site .cert-logo-grid {
    grid-template-columns: 1fr;
  }
}


/* V52 – Lieferantenportal als moderne App-Sektion */
.supplier-portal-section {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 11vw, 150px) 0;
  background:
    radial-gradient(circle at 86% 20%, rgba(199, 67, 54, .15), transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(143, 48, 40, .08), transparent 30%),
    #efe5d8;
  color: #151515;
  scroll-margin-top: 96px;
}
.supplier-portal-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199, 67, 54, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 67, 54, .045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
}
.supplier-portal-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
  padding: clamp(34px, 5vw, 74px);
  border: 1px solid rgba(143, 48, 40, .18);
  border-radius: clamp(32px, 4vw, 54px);
  background: linear-gradient(145deg, rgba(255, 250, 242, .96), rgba(248, 239, 227, .9));
  box-shadow: 0 34px 90px rgba(72, 41, 27, .14), inset 0 1px rgba(255, 255, 255, .95);
}
.supplier-portal-shell::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(199, 67, 54, .08);
  border-radius: calc(clamp(32px, 4vw, 54px) - 14px);
  pointer-events: none;
}
.supplier-portal-copy { position: relative; z-index: 3; }
.supplier-portal-copy .eyebrow { color: #b3342a; }
.supplier-portal-copy h2 {
  margin: 0;
  max-width: 720px;
  color: #151515;
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-size: clamp(3rem, 5.1vw, 6rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.supplier-portal-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: #2a2826;
  font-size: clamp(1.03rem, 1.25vw, 1.2rem);
  line-height: 1.75;
}
.supplier-portal-features {
  display: grid;
  gap: 10px;
  margin: 34px 0 0;
}
.supplier-portal-features > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  min-height: 60px;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(143, 48, 40, .13);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 10px 28px rgba(72, 41, 27, .055);
}
.supplier-portal-features span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #c74336;
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
}
.supplier-portal-features strong { color: #151515; font-size: .94rem; line-height: 1.35; }
.supplier-portal-button { margin-top: 30px; color: #fff !important; }

.supplier-portal-visual {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
}
.supplier-phone {
  position: relative;
  z-index: 4;
  width: min(330px, 78vw);
  padding: 10px;
  border-radius: 48px;
  background: #171716;
  box-shadow: 0 48px 90px rgba(44, 25, 18, .28), 0 10px 28px rgba(199, 67, 54, .18), inset 0 1px rgba(255,255,255,.18);
  transform: rotate(2deg);
}
.supplier-phone-top {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 18px;
  width: 94px;
  height: 25px;
  border-radius: 999px;
  background: #171716;
  transform: translateX(-50%);
}
.supplier-phone-top span {
  position: absolute;
  right: 15px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3d3d3b;
  box-shadow: inset 0 0 0 2px #222;
}
.supplier-phone-screen {
  min-height: 592px;
  overflow: hidden;
  padding: 46px 17px 16px;
  border-radius: 39px;
  background: linear-gradient(180deg, #fffaf2 0%, #f4eadf 100%);
}
.supplier-app-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.supplier-app-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #c74336;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.supplier-app-header small { display: block; color: #8f3028; font-size: .52rem; font-weight: 850; letter-spacing: .13em; }
.supplier-app-header strong { display: block; margin-top: 2px; color: #151515; font-size: .84rem; line-height: 1.2; }
.supplier-app-status { padding: 5px 8px; border-radius: 999px; background: rgba(199, 67, 54, .11); color: #9f3128; font-size: .55rem; font-weight: 850; }
.supplier-app-welcome { margin-top: 28px; }
.supplier-app-welcome > span { color: #9f3128; font-size: .66rem; font-weight: 800; }
.supplier-app-welcome h3 { margin: 5px 0 0; color: #151515; font-size: 1.38rem; line-height: 1.12; letter-spacing: -.035em; }
.supplier-app-progress { height: 8px; margin-top: 19px; overflow: hidden; border-radius: 999px; background: #e7d7c8; }
.supplier-app-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9f3128, #d75445); box-shadow: 0 0 18px rgba(199,67,54,.25); }
.supplier-app-progress-copy { display: flex; justify-content: space-between; margin-top: 8px; color: #5b514a; font-size: .62rem; }
.supplier-app-progress-copy strong { color: #9f3128; }
.supplier-app-cards { display: grid; gap: 10px; margin-top: 24px; }
.supplier-app-cards > div {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 73px;
  padding: 11px 13px;
  border: 1px solid rgba(143,48,40,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 25px rgba(72,41,27,.06);
}
.supplier-app-cards > div > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #f1dfd1;
  color: #a3352b;
  font-size: .6rem;
  font-weight: 900;
}
.supplier-app-cards strong { padding-right: 62px; color: #151515; font-size: .71rem; line-height: 1.28; }
.supplier-app-cards small { position: absolute; right: 13px; top: 50%; color: #8f3028; font-size: .52rem; font-weight: 780; transform: translateY(-50%); }
.supplier-app-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 18px;
  padding: 7px;
  border-radius: 16px;
  background: rgba(222, 204, 188, .56);
}
.supplier-app-nav span { padding: 8px 4px; border-radius: 11px; color: #62564e; text-align: center; font-size: .54rem; font-weight: 760; }
.supplier-app-nav .active { background: #c74336; color: #fff; box-shadow: 0 7px 16px rgba(143,48,40,.2); }
.supplier-app-note {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 210px;
  padding: 12px 15px;
  border: 1px solid rgba(143,48,40,.14);
  border-radius: 17px;
  background: rgba(255,250,242,.9);
  box-shadow: 0 20px 45px rgba(72,41,27,.16);
  backdrop-filter: blur(14px);
}
.supplier-app-note span { display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 9px; background: #c74336; color: #fff; font-size: .58rem; font-weight: 900; }
.supplier-app-note strong { color: #151515; font-size: .68rem; line-height: 1.25; }
.supplier-app-note-top { left: 0; top: 16%; transform: rotate(-4deg); }
.supplier-app-note-bottom { right: -4px; bottom: 16%; transform: rotate(4deg); }
.supplier-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(199,67,54,.15); }
.supplier-orbit-one { width: 490px; height: 490px; }
.supplier-orbit-two { width: 365px; height: 365px; border-style: dashed; animation: supplier-orbit 24s linear infinite; }
@keyframes supplier-orbit { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .supplier-portal-shell { grid-template-columns: 1fr; }
  .supplier-portal-copy { max-width: 760px; }
  .supplier-portal-visual { min-height: 590px; }
  .supplier-app-note-top { left: 10%; }
  .supplier-app-note-bottom { right: 8%; }
}
@media (max-width: 620px) {
  .supplier-portal-section { padding: 72px 0; }
  .supplier-portal-shell { width: min(100% - 24px, 1240px); padding: 28px 18px 34px; border-radius: 30px; }
  .supplier-portal-shell::after { display: none; }
  .supplier-portal-copy h2 { font-size: clamp(2.7rem, 15vw, 4.25rem); }
  .supplier-portal-features > div { grid-template-columns: 42px minmax(0,1fr); padding-right: 12px; }
  .supplier-portal-visual { min-height: 560px; margin-top: 4px; }
  .supplier-phone { width: min(306px, 88vw); }
  .supplier-phone-screen { min-height: 548px; }
  .supplier-app-note { display: none; }
  .supplier-orbit-one { width: 350px; height: 350px; }
  .supplier-orbit-two { width: 280px; height: 280px; }
}


/* V53 – Kontaktabstände und flexibel konfigurierbare Informationskästen */
body.public-site .trust-strip,
body.public-site .product-grid {
  display: none !important;
}

body.public-site .contact-grid {
  align-items: start;
}
body.public-site .contact-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.public-site .contact-copy h2 {
  width: 100%;
  max-width: 12ch;
  margin: 0 0 clamp(34px, 4vw, 58px) !important;
  font-size: clamp(3.35rem, 6vw, 6.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
body.public-site .contact-copy > p:not(.eyebrow) {
  position: relative;
  z-index: 2;
  max-width: 58ch;
  margin: 0 0 30px !important;
  font-size: clamp(1rem, 1.25vw, 1.16rem) !important;
  line-height: 1.72 !important;
}
body.public-site .contact-copy .btn {
  margin-top: 0;
}

body.public-site .content-card-grid {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(42px, 6vw, 72px);
}
body.public-site .content-info-card {
  position: relative;
  flex: 1 1 245px;
  width: min(100%, 305px);
  max-width: 305px;
  min-width: min(100%, 230px);
  min-height: 215px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(143, 48, 40, .16);
  border-radius: 28px;
  background: rgba(255, 250, 242, .84);
  box-shadow: 0 20px 52px rgba(79, 50, 31, .08);
  color: #151515;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.public-site .content-info-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: inherit;
  background: #c74336;
}
body.public-site .content-info-card:hover {
  transform: translateY(-6px);
  border-color: rgba(199, 67, 54, .36);
  box-shadow: 0 28px 65px rgba(79, 50, 31, .13);
}
body.public-site .content-info-card-label {
  display: block;
  margin-bottom: clamp(26px, 3vw, 42px);
  color: #b3342a !important;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.2;
}
body.public-site .content-info-card h3 {
  margin: 0 0 14px;
  color: #151515 !important;
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
body.public-site .content-info-card-text,
body.public-site .content-info-card-text p {
  margin: 0;
  color: #151515 !important;
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.58;
  overflow-wrap: anywhere;
  hyphens: auto;
}
body.public-site .content-info-card-text p + p {
  margin-top: .72em;
}

.admin-note-card,
.section-card-editor {
  padding: 22px;
  border: 1px solid rgba(199, 67, 54, .18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,250,242,.95), rgba(199,67,54,.045));
}
.admin-note-card strong { display: block; color: #151515; font-size: 1rem; }
.admin-note-card p { margin: 7px 0 0; color: rgba(21,21,21,.68); line-height: 1.55; }
.section-card-editor { display: grid; gap: 20px; }
.card-count-control {
  max-width: 320px;
  display: grid;
  gap: 8px;
}
.card-count-control input { max-width: 150px; }
.card-count-control small { color: rgba(21,21,21,.64); font-weight: 600; }
.section-card-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.section-card-admin-item {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(143,48,40,.15);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
}
.section-card-admin-item[hidden] { display: none !important; }
.section-card-admin-item legend {
  padding: 0 7px;
  color: #a92f27;
  font-size: .78rem;
  font-weight: 900;
}
.section-card-admin-item label { display: grid; gap: 7px; }
.section-card-admin-item textarea { resize: vertical; }

@media (max-width: 980px) {
  body.public-site .contact-copy h2 {
    max-width: 13ch;
    font-size: clamp(3rem, 9.5vw, 5.3rem) !important;
  }
}
@media (max-width: 720px) {
  body.public-site .contact-copy h2 {
    max-width: 100%;
    margin-bottom: 28px !important;
    font-size: clamp(2.75rem, 13vw, 4.25rem) !important;
    line-height: 1 !important;
  }
  body.public-site .content-info-card {
    flex-basis: min(100%, 290px);
    width: min(100%, 340px);
    max-width: 340px;
    min-height: 0;
  }
  .section-card-admin-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== 
   V54 – feste Markenpalette, schwarze Schrift und stabiler Video-Upload
   ========================================================================== */
:root {
  --brand-primary: #c74336 !important;
  --brand-secondary: #c74336 !important;
  --page-bg: #f4f0ea !important;
  --surface-color: #f4f0ea !important;
  --text-color: #000000 !important;
  --muted-color: #000000 !important;
  --red: #c74336 !important;
  --red-bright: #c74336 !important;
  --bone: #f4f0ea !important;
  --bone-soft: #f4f0ea !important;
}

html,
body.public-site,
body.legal-body {
  background: #f4f0ea !important;
  color: #000000 !important;
}

/* Textfarben werden bewusst festgesetzt. Auch alte Inline-Farben aus dem
   Rich-Text-Editor können die öffentliche Gestaltung nicht mehr verändern. */
body.public-site :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,em,i,u,small,label,li,dt,dd,blockquote,a,button,input,textarea,select,option,output),
body.legal-body :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,em,i,u,small,label,li,dt,dd,blockquote,a,button,input,textarea,select,option,output),
body.public-site [style*="color"],
body.legal-body [style*="color"] {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

body.public-site input::placeholder,
body.public-site textarea::placeholder,
body.legal-body input::placeholder,
body.legal-body textarea::placeholder {
  color: #000000 !important;
  opacity: .58;
}

body.public-site .site-header,
body.legal-body .site-header,
body.public-site .site-header.scrolled {
  background: rgba(244, 240, 234, .96) !important;
  border-bottom: 1px solid rgba(199, 67, 54, .4) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .06) !important;
}
body.public-site .main-nav a::after {
  background: #c74336 !important;
}
body.public-site .nav-toggle span:not(.sr-only) {
  background: #000000 !important;
}
body.public-site .language-menu-trigger,
body.public-site .language-choice,
body.public-site .language-modal-close {
  color: #000000 !important;
  border-color: rgba(199, 67, 54, .45) !important;
}

body.public-site .announcement,
body.public-site .cookie-teabag-card,
body.public-site .language-selector-circle,
body.public-site .language-loader,
body.public-site .site-footer,
body.public-site .footer-bottom,
body.public-site .contact-section,
body.public-site .career-section,
body.public-site .supplier-portal-section,
body.public-site .cert-section,
body.public-site .trust-strip,
body.public-site .content-section,
body.public-site .theme-light,
body.public-site .theme-cream,
body.public-site .theme-dark,
body.public-site .theme-accent,
body.public-site .story-journal-section,
body.public-site .legal-page,
body.legal-body .legal-page,
body.legal-body .site-footer {
  background: #f4f0ea !important;
}

body.public-site .content-section::after,
body.public-site .hero::before {
  opacity: .08 !important;
}
body.public-site .content-section::before {
  color: rgba(199, 67, 54, .07) !important;
  -webkit-text-fill-color: rgba(199, 67, 54, .07) !important;
}

body.public-site .eyebrow::before,
body.public-site .section-separator,
body.public-site .scroll-progress,
body.public-site .story-open-button,
body.public-site .story-close-button,
body.public-site .btn-primary,
body.public-site .header-cta,
body.public-site .supplier-portal-button,
body.public-site .application-submit,
body.public-site button[type="submit"] {
  background: #c74336 !important;
  border-color: #c74336 !important;
}
body.public-site .btn,
body.public-site .btn-primary,
body.public-site .btn-light,
body.public-site .btn-ghost,
body.public-site .story-open-button,
body.public-site .story-close-button,
body.public-site .supplier-portal-button,
body.public-site .application-submit {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
body.public-site .btn-ghost,
body.public-site .btn-light {
  background: transparent !important;
  border-color: #c74336 !important;
}
body.public-site .btn:hover,
body.public-site .story-open-button:hover,
body.public-site .story-close-button:hover {
  box-shadow: 0 16px 34px rgba(199, 67, 54, .2) !important;
}

body.public-site :where(.trust-grid,.product-grid,.optional-card-grid,.story-app-shell,.story-open-card,.story-content-card,.supplier-app-shell,.portal-feature,.certificate-card,.certificate-logo-card,.contact-card,.application-form,.application-field,.legal-wrap,.language-choice,.cookie-teabag-card) {
  background: #f4f0ea !important;
  border-color: rgba(199, 67, 54, .34) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .055) !important;
}
body.public-site :where(.optional-info-card,.product-card,.trust-grid > div,.portal-feature)::before,
body.public-site :where(.optional-info-card,.product-card,.trust-grid > div,.portal-feature)::after {
  background: #c74336 !important;
}

body.public-site input,
body.public-site textarea,
body.public-site select,
body.legal-body input,
body.legal-body textarea,
body.legal-body select {
  background: #f4f0ea !important;
  color: #000000 !important;
  border-color: rgba(199, 67, 54, .42) !important;
}
body.public-site input:focus,
body.public-site textarea:focus,
body.public-site select:focus {
  border-color: #c74336 !important;
  box-shadow: 0 0 0 4px rgba(199, 67, 54, .13) !important;
}

/* Schwarze Schrift bleibt auch auf Videos lesbar. */
body.public-site .career-video-overlay {
  display: inline-block;
  width: min(760px, calc(100% - 48px));
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(244, 240, 234, .9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.public-site .career-video-wrap::after {
  background: linear-gradient(180deg, transparent 30%, rgba(244, 240, 234, .38)) !important;
}

/* Medien bleiben rahmenlos. */
body.public-site .section-media,
body.public-site .video-fullscreen-media,
body.public-site .section-media img,
body.public-site .section-media video,
body.public-site .video-fullscreen-media img,
body.public-site .video-fullscreen-media video {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 0 !important;
}

/* Admin: überholte Farbfelder werden ausgeblendet, weil die Palette fest ist. */
.admin-body .color-template-subhead,
.admin-body .color-template-grid,
.admin-body #admin-bulk-colors,
.admin-body .section-color-toolbar {
  display: none !important;
}
.admin-body .color-subhead {
  border: 1px solid rgba(199, 67, 54, .32);
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(199, 67, 54, .06);
}
.admin-body .color-subhead strong {
  color: #c74336;
}

/* Fortschrittsanzeige für den chunkweisen Video-Upload. */
.admin-body .video-upload-box {
  position: relative;
}
.admin-body .video-upload-progress {
  position: relative;
  width: 100%;
  height: 34px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(199, 67, 54, .35);
  border-radius: 999px;
  background: #f4f0ea;
}
.admin-body .video-upload-progress[hidden] {
  display: none !important;
}
.admin-body .video-upload-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--video-progress, 0%);
  background: #c74336;
  transition: width .18s ease;
}
.admin-body .video-upload-progress strong {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  color: #000000;
  font-size: .78rem;
}

@media (max-width: 760px) {
  body.public-site .career-video-overlay {
    width: calc(100% - 32px);
    padding: 16px 18px;
  }
}

/* ========================================================================== 
   V55 – weiche Beige-Verläufe zwischen den Website-Passagen
   Moderne, ruhige App-Ästhetik bei fester Markenpalette
   ========================================================================== */
body.public-site {
  background:
    radial-gradient(900px circle at 8% 8%, rgba(255, 255, 255, .72), transparent 48%),
    radial-gradient(760px circle at 92% 18%, rgba(199, 67, 54, .035), transparent 46%),
    linear-gradient(180deg, #f8f5f0 0%, #f4f0ea 42%, #efe9e2 100%) !important;
}

body.public-site main {
  position: relative;
  background: #f4f0ea;
}

/* Die früheren grafischen Trennformen werden zu einem sanften Lichtverlauf.
   Dadurch gehen die Abschnitte ineinander über, ohne wie einzelne harte Blöcke
   zu wirken. */
body.public-site .section-separator,
body.public-site .divider-peaks .section-separator,
body.public-site .divider-slope .section-separator,
body.public-site .divider-brush .section-separator {
  top: -58px;
  height: 118px;
  opacity: .9;
  clip-path: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 48%, rgba(244,240,234,0) 100%) !important;
  filter: blur(16px) !important;
}

body.public-site .content-section,
body.public-site .cert-section,
body.public-site .contact-section,
body.public-site .supplier-portal-section,
body.public-site .career-section,
body.public-site .story-journal-section {
  border-top: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(199,67,54,.035);
}

body.public-site .theme-light {
  background:
    radial-gradient(780px circle at 5% 14%, rgba(255,255,255,.82), transparent 47%),
    radial-gradient(650px circle at 94% 12%, rgba(199,67,54,.028), transparent 45%),
    linear-gradient(180deg, #faf7f3 0%, #f5f1eb 48%, #f0ebe4 100%) !important;
}

body.public-site .theme-cream {
  background:
    radial-gradient(760px circle at 92% 18%, rgba(255,255,255,.68), transparent 48%),
    radial-gradient(620px circle at 8% 84%, rgba(199,67,54,.025), transparent 44%),
    linear-gradient(180deg, #f0ebe4 0%, #f6f2ec 52%, #eee8e0 100%) !important;
}

/* Der frühere dunkle Abschnitt bleibt bewusst in der Beige-Familie. */
body.public-site .theme-dark {
  background:
    radial-gradient(760px circle at 12% 18%, rgba(255,255,255,.6), transparent 46%),
    radial-gradient(680px circle at 88% 76%, rgba(199,67,54,.032), transparent 44%),
    linear-gradient(180deg, #eee8e0 0%, #f7f3ee 54%, #f1ebe3 100%) !important;
}

body.public-site .theme-accent {
  background:
    radial-gradient(720px circle at 88% 16%, rgba(199,67,54,.055), transparent 46%),
    radial-gradient(660px circle at 6% 82%, rgba(255,255,255,.66), transparent 46%),
    linear-gradient(180deg, #f7eee9 0%, #f5f0ea 50%, #eee8e1 100%) !important;
}

body.public-site .story-journal-section {
  background:
    radial-gradient(820px circle at 14% 14%, rgba(255,255,255,.72), transparent 47%),
    radial-gradient(700px circle at 88% 18%, rgba(199,67,54,.045), transparent 44%),
    linear-gradient(180deg, #f1ebe4 0%, #f8f4ef 48%, #efe9e2 100%) !important;
}

body.public-site .cert-section {
  background:
    radial-gradient(760px circle at 90% 12%, rgba(255,255,255,.72), transparent 48%),
    radial-gradient(600px circle at 8% 86%, rgba(199,67,54,.026), transparent 45%),
    linear-gradient(180deg, #f7f3ee 0%, #f2ede6 52%, #ece6de 100%) !important;
}

body.public-site .contact-section {
  background:
    radial-gradient(800px circle at 8% 12%, rgba(255,255,255,.7), transparent 48%),
    radial-gradient(700px circle at 92% 24%, rgba(199,67,54,.055), transparent 46%),
    linear-gradient(180deg, #eee7df 0%, #f5f0e9 52%, #f0e9e1 100%) !important;
}

body.public-site .supplier-portal-section {
  background:
    radial-gradient(860px circle at 84% 20%, rgba(199,67,54,.052), transparent 46%),
    radial-gradient(720px circle at 8% 78%, rgba(255,255,255,.76), transparent 48%),
    linear-gradient(180deg, #f8f5f0 0%, #f2ece5 54%, #ece6de 100%) !important;
}

body.public-site .career-section {
  background:
    radial-gradient(820px circle at 8% 14%, rgba(199,67,54,.04), transparent 45%),
    radial-gradient(720px circle at 92% 78%, rgba(255,255,255,.72), transparent 48%),
    linear-gradient(180deg, #ece6de 0%, #f4efe8 50%, #f8f4ef 100%) !important;
}

body.public-site .site-footer {
  background:
    radial-gradient(650px circle at 12% 10%, rgba(255,255,255,.42), transparent 50%),
    linear-gradient(180deg, #eee8e0 0%, #e8e1d8 100%) !important;
  border-top: 1px solid rgba(199,67,54,.14) !important;
}

/* Dezente App-Lichtkante innerhalb großer Inhaltsflächen. */
body.public-site .section-grid,
body.public-site .story-journal,
body.public-site .cert-section > .container,
body.public-site .contact-grid,
body.public-site .supplier-portal-shell,
body.public-site .career-shell {
  position: relative;
}

body.public-site .section-grid::after,
body.public-site .story-journal::after,
body.public-site .cert-section > .container::after,
body.public-site .contact-grid::after,
body.public-site .supplier-portal-shell::after,
body.public-site .career-shell::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -54px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(199,67,54,.13), rgba(255,255,255,.72), rgba(199,67,54,.13), transparent);
}

/* Die öffentliche Schrift bleibt auch in den neuen Verläufen immer schwarz. */
body.public-site :where(.theme-dark,.theme-accent,.contact-section,.supplier-portal-section,.career-section,.site-footer) :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,em,i,u,small,label,li,dt,dd,blockquote,a,button) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

@media (max-width: 760px) {
  body.public-site .section-separator,
  body.public-site .divider-peaks .section-separator,
  body.public-site .divider-slope .section-separator,
  body.public-site .divider-brush .section-separator {
    top: -42px;
    height: 86px;
    filter: blur(12px) !important;
  }
  body.public-site .section-grid::after,
  body.public-site .story-journal::after,
  body.public-site .cert-section > .container::after,
  body.public-site .contact-grid::after,
  body.public-site .supplier-portal-shell::after,
  body.public-site .career-shell::after {
    left: 14%;
    right: 14%;
    bottom: -36px;
  }
}


/* =========================================================
   V56 – optional abgerundete Ecken für Bilder und Videos
   ========================================================= */
body.public-site .section-media.media-rounded,
body.public-site .video-fullscreen-media.media-rounded,
body.public-site .section-media.media-rounded img,
body.public-site .section-media.media-rounded video,
body.public-site .video-fullscreen-media.media-rounded img,
body.public-site .video-fullscreen-media.media-rounded video {
  border-radius: 30px !important;
}
body.public-site .section-media.media-rounded,
body.public-site .video-fullscreen-media.media-rounded {
  overflow: hidden !important;
}
body.public-site .landing-image.media-rounded {
  padding: clamp(10px, 1.7vw, 26px) !important;
  overflow: visible !important;
}
body.public-site .landing-image.media-rounded img {
  border-radius: clamp(20px, 2.5vw, 42px) !important;
  overflow: hidden !important;
}
body.public-site .career-video-wrap.media-rounded,
body.public-site .career-video-wrap.media-rounded video {
  border-radius: 36px !important;
}
body.public-site .career-video-wrap:not(.media-rounded),
body.public-site .career-video-wrap:not(.media-rounded) video {
  border-radius: 0 !important;
}
.admin-body [data-image-preview].is-rounded-preview,
.admin-body [data-image-preview].is-rounded-preview img,
.admin-body [data-image-preview].is-rounded-preview video {
  border-radius: 24px !important;
  overflow: hidden !important;
}
@media (max-width: 720px) {
  body.public-site .section-media.media-rounded,
  body.public-site .video-fullscreen-media.media-rounded,
  body.public-site .section-media.media-rounded img,
  body.public-site .section-media.media-rounded video,
  body.public-site .video-fullscreen-media.media-rounded img,
  body.public-site .video-fullscreen-media.media-rounded video {
    border-radius: 20px !important;
  }
  body.public-site .career-video-wrap.media-rounded,
  body.public-site .career-video-wrap.media-rounded video {
    border-radius: 24px !important;
  }
}


/* =========================================================
   V57 – Textbereiche bleiben frei von unbeabsichtigten Kartenflächen
   ========================================================= */
body.public-site .career-copy,
body.public-site .contact-copy,
body.public-site .supplier-portal-copy,
body.public-site .content-section .section-copy {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Der Karriere-Text steht direkt auf dem Abschnittsverlauf. */
body.public-site .career-copy {
  padding: 0 !important;
  overflow: visible !important;
}

/* Nur echte Bedienelemente und Formulare bleiben als Karten gestaltet. */
body.public-site .career-copy::before,
body.public-site .career-copy::after,
body.public-site .contact-copy::before,
body.public-site .contact-copy::after,
body.public-site .supplier-portal-copy::before,
body.public-site .supplier-portal-copy::after {
  content: none !important;
  display: none !important;
}