/* „Was kommt ins Glas“ – Signature der Startseite (23.10.2026).
   Drahtbügelglas bleibt beim Scrollen stehen und füllt sich Schicht für Schicht (js/jar.js). */
.jar-section {
  background: linear-gradient(180deg, var(--fl-surface) 0%, rgba(176, 200, 153, .32) 22%, rgba(176, 200, 153, .32) 78%, var(--fl-surface) 100%);
  padding: clamp(64px, 9vw, 120px) 0;
}
.jar-intro { max-width: 640px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.jar-intro .eyebrow { color: var(--fl-green); }
.jar-intro h2 { margin: .2em 0 .35em; text-wrap: balance; }
.jar-intro h2 em { color: var(--fl-green); }
.jar-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.jar-visual { position: sticky; top: max(96px, calc(50vh - 260px)); display: grid; justify-items: center; }
.jar-visual svg { width: 100%; max-width: 400px; height: auto; overflow: visible; }

/* Glas (Drahtbügelglas, gebaut mit tools/build-jar.py) */
.jar-shadow { fill: rgba(84, 22, 80, .1); }
.jar-glass { fill: url(#jar-glass-grad); }
.jar-outline { fill: none; stroke: var(--fl-purple-dark); stroke-width: 3; stroke-linejoin: round; }
.jar-inner-line { fill: none; stroke: rgba(84, 22, 80, .22); stroke-width: 1.2; }
.jar-shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .85; }
.jar-shine--thin { stroke-width: 2.5; opacity: .7; }
.jar-rim { fill: rgba(255, 255, 255, .8); stroke: var(--fl-purple-dark); stroke-width: 2.5; }
.jar-ring { fill: #E8792C; stroke: #B5541A; stroke-width: 1.2; }
.jar-wire { fill: none; stroke: #6F7378; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.jar-wire--bail, .jar-wire--lever { stroke-width: 3; }
.jar-lid-dome { fill: rgba(255, 255, 255, .72); stroke: var(--fl-purple-dark); stroke-width: 2.5; }
.jar-lid-lip { fill: rgba(255, 255, 255, .85); stroke: var(--fl-purple-dark); stroke-width: 2.5; }
.jar-lid-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
/* Deckel dreht um das Scharnier rechts, Hebel links rastet nach dem Schließen ein */
.jar-lid { transform-origin: 236px 104px; transform-box: view-box; transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); }
.jar-lever { transform-origin: 64px 120px; transform-box: view-box; transition: transform .45s cubic-bezier(.3, 1.9, .55, 1) 1s; }
[data-jar].is-armed:not([data-level="5"]):not([data-level="6"]) .jar-lid { transform: rotate(62deg); transition-duration: .8s; }
[data-jar].is-armed:not([data-level="5"]):not([data-level="6"]) .jar-lever { transform: rotate(40deg); transition: transform .35s ease-out; }

/* Inhalt: getrennte Schichten */
.jar-rk-base { fill: #6E2363; }
.jar-rk { fill: none; stroke: #9A3A8C; stroke-width: 3.6; stroke-linecap: round; }
.jar-rk-light { fill: none; stroke: #C774B5; stroke-width: 2.4; stroke-linecap: round; }
.jar-rk-rib { fill: none; stroke: #F1D6EA; stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.jar-mo-base { fill: #F6B26B; }
.jar-mo { fill: #EC7A1C; stroke: #C25B0E; stroke-width: 1.2; }
.jar-mo-ring { fill: none; stroke: #FFD39A; stroke-width: 1.6; }
.jar-wk-base { fill: #DCE8AE; }
.jar-wk { fill: none; stroke: #B9D07A; stroke-width: 4.2; stroke-linecap: round; }
.jar-wk-light { fill: none; stroke: #F7F9E4; stroke-width: 2.2; stroke-linecap: round; }
.jar-salt { fill: #fff; stroke: rgba(92, 102, 82, .55); stroke-width: .8; }
.jar-chili { fill: #D8322A; stroke: #9E1C17; stroke-width: 1.2; }
.jar-chili-shine { fill: none; stroke: #FF8A7A; stroke-width: 1.6; stroke-linecap: round; }
.jar-chili-cap { fill: #4E8A2E; }
.jar-chili-stem { fill: none; stroke: #4E8A2E; stroke-width: 2.6; stroke-linecap: round; }
.jar-garlic { fill: #FBF6E6; stroke: #B9A88A; stroke-width: 1.3; }
.jar-garlic-line { fill: none; stroke: #D8CBB0; stroke-width: 1; stroke-linecap: round; }
.jar-dill, .jar-dill-leaf { fill: none; stroke: #3F7A3A; stroke-width: 1.6; stroke-linecap: round; }
.jar-dill { stroke-width: 2.2; }
.jar-pepper { fill: #2E2622; }
.jar-pepper-hi { fill: #8A7A70; }
.jar-brine { fill: rgba(176, 200, 153, .34); }
.jar-brine-top { fill: none; stroke: rgba(92, 102, 82, .6); stroke-width: 2; stroke-linecap: round; }
.jar-weight { fill: rgba(255, 255, 255, .55); stroke: rgba(84, 22, 80, .45); stroke-width: 2; }
.jar-weight-hi { fill: #fff; opacity: .8; }
.jar-bubble { fill: rgba(255, 255, 255, .25); stroke: #fff; stroke-width: 1.8; opacity: 0; }
.jar-label { fill: var(--fl-surface); stroke: var(--fl-purple-dark); stroke-width: 2; }
.jar-label-title { font: italic 400 19px/1 var(--font-display); fill: var(--fl-purple-dark); }
.jar-label-sub { font: 600 6.5px/1 var(--font-accent); letter-spacing: .12em; text-transform: uppercase; fill: var(--fl-green); }

/* Schichten fallen einzeln nacheinander ein (--d = Staffelung), Lake steigt, Bläschen */
.jar-item { transition: transform 1s cubic-bezier(.3, 1.15, .6, 1), opacity .45s ease; transform-box: view-box; }
.jar-brine-group { transform-origin: 150px 402px; transform-box: view-box; transition: transform 1.6s cubic-bezier(.22, .61, .36, 1), opacity .4s; }
.jar-label-group { transform-origin: 150px 354px; transform-box: view-box; transition: transform .7s cubic-bezier(.34, 1.4, .64, 1), opacity .4s; }
[data-delay="0.35"] { --d: .35s; } [data-delay="0.45"] { --d: .45s; } [data-delay="0.7"] { --d: .7s; } [data-delay="0.9"] { --d: .9s; } [data-delay="1.05"] { --d: 1.05s; }
[data-jar].is-armed .jar-item.is-in { transition-delay: var(--d, 0s); }
[data-jar].is-armed .jar-item:not(.is-in) { opacity: 0; transform: translateY(-300px) rotate(-5deg); transition-duration: .4s; }
[data-jar].is-armed .jar-item--sprinkle:not(.is-in) { transform: translateY(-260px); }
[data-jar].is-armed .jar-item--sprinkle.is-in { transition-duration: 1.4s; transition-timing-function: cubic-bezier(.5, 0, .5, 1); }
[data-jar].is-armed .jar-brine-group:not(.is-in) { opacity: 0; transform: scaleY(0); }
[data-jar].is-armed .jar-label-group:not(.is-in) { opacity: 0; transform: translateY(16px) rotate(-12deg) scale(.85); }
[data-jar][data-level="5"] .jar-bubble, [data-jar][data-level="6"] .jar-bubble, [data-jar].is-full .jar-bubble { animation: jarBubble 3.4s ease-in infinite 1.4s; }
.jar-bubble:nth-of-type(2) { animation-delay: 2.1s !important; }
.jar-bubble:nth-of-type(3) { animation-delay: 2.9s !important; }
.jar-bubble:nth-of-type(4) { animation-delay: 3.6s !important; }
.jar-bubble:nth-of-type(5) { animation-delay: 4.2s !important; }
.jar-bubble:nth-of-type(6) { animation-delay: 1.8s !important; }
@keyframes jarBubble {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: .95; }
  85% { opacity: .7; }
  100% { opacity: 0; transform: translateY(-150px); }
}

/* Schritte */
.jar-steps { list-style: none; margin: 0; padding: 10vh 0 14vh; display: grid; gap: 0; }
/* Viel Abstand je Schritt: das Glas füllt sich erst, wenn der Schritt die Bildschirmmitte erreicht */
.jar-step { min-height: 40vh; }
.jar-step:last-child { min-height: 0; }
.jar-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; transition: opacity .5s; }
[data-jar].is-armed .jar-step { opacity: .35; }
[data-jar].is-armed .jar-step.is-on { opacity: 1; }
.jar-step__dot { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 400 26px/1 var(--font-display); color: var(--fl-purple-dark); }
.jar-step:nth-child(1) .jar-step__dot { background: rgba(186, 120, 168, .35); }
.jar-step:nth-child(2) .jar-step__dot { background: #fff; box-shadow: inset 0 0 0 2px rgba(92, 102, 82, .35); }
.jar-step:nth-child(3) .jar-step__dot { background: rgba(92, 102, 82, .22); }
.jar-step:nth-child(4) .jar-step__dot { background: rgba(176, 200, 153, .7); }
.jar-step:nth-child(5) .jar-step__dot { background: var(--fl-cream); }
.jar-step:nth-child(6) .jar-step__dot { background: var(--fl-purple-dark); color: var(--fl-cream); }
.jar-step small { display: block; margin-bottom: 6px; font: 600 11px/1.2 var(--font-accent); letter-spacing: .16em; text-transform: uppercase; color: var(--fl-green); }
.jar-step h3 { margin: 0 0 8px; font: 400 clamp(24px, 2.4vw, 30px)/1.1 var(--font-display); color: var(--fl-purple-dark); }
.jar-step p { margin: 0; max-width: 46ch; color: var(--fl-ink-soft); line-height: 1.65; }
.jar-step__fact { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: .85rem; font-weight: 600; color: var(--fl-green); }
.jar-step__actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 18px; }

@media (max-width: 900px) {
  .jar-layout { grid-template-columns: minmax(0, 1fr); }
  .jar-visual { position: static; }
  .jar-visual svg { max-width: 260px; }
  .jar-steps { gap: 34px; padding: 8px 0 0; }
  .jar-step { min-height: 0; }
  [data-jar].is-armed .jar-step { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jar-item, .jar-brine-group, .jar-label-group, .jar-lid, .jar-lever, .jar-step { transition: none !important; }
  .jar-bubble { animation: none !important; }
}