/* Wasserglas-Abschnitt. Alle Regeln hängen an .fa-glas, damit das Design der restlichen Seite unberührt bleibt. */
.fa-glas {
  --sc-ink: #1C1A17;
  --sc-ink-soft: #55514A;
  --sc-accent: #2D6A4F;
  --sc-font-display: "Poppins", system-ui, sans-serif;
  --sc-font-text: "Poppins", system-ui, sans-serif;
  font-family: "Poppins", system-ui, sans-serif;
  color: #1C1A17;
  background: #FBFAF8;
}
.fa-glas *, .fa-glas *::before, .fa-glas *::after { box-sizing: border-box; }
.fa-glas .sc-display { font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.fa-glas .sc-lede { font-weight: 400; margin: 0; }
.fa-glas__buehne {
  height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: 2rem;
  padding: 4.5rem clamp(1.25rem, 5vw, 5.5rem) 1rem;
}
.fa-glas__text { position: relative; height: 24rem; align-self: center; }
.fa-glas__zeile { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
.fa-glas__zeile .sc-display--lg { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.08; }
.fa-glas__zeile .sc-lede { max-width: 34ch; color: #55514A; }
.fa-glas__vorzeile { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7F5539; margin: 0; }
.fa-glas__zahl { color: #2D6A4F; font-variant-numeric: tabular-nums; }

.fa-glas__glas { margin: 0; height: min(76svh, 40rem); display: grid; place-items: center; }
.fa-glas__glas svg { height: 100%; width: auto; overflow: visible; display: block; }
.fa-wasser {
  --fuell: clamp(0, calc(var(--sc-p, 0) * 1.25), 1);
  transform: translateY(calc((1 - var(--fuell)) * 460px));
}
.fa-welle { animation: fa-welle 3.2s linear infinite; }
@keyframes fa-welle { to { transform: translateX(150px); } }
.fa-blase { animation: fa-blase 4s ease-in infinite; }
.fa-b2 { animation-delay: 1.3s; } .fa-b3 { animation-delay: 2.4s; }
@keyframes fa-blase { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .5; } 100% { transform: translateY(-120px); opacity: 0; } }

@media (max-width: 800px) {
  .fa-glas__buehne { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding-top: 5rem; }
  .fa-glas__text { height: 17rem; }
  .fa-glas__glas { height: 100%; max-height: 44svh; }
}
@media (prefers-reduced-motion: reduce) { .fa-welle, .fa-blase { animation: none; } }

.fa-glas__app {
  align-self: flex-start; margin-top: .4rem;
  display: inline-block; padding: .95rem 2rem; border-radius: 999px;
  background: linear-gradient(111deg, #74C69D 3%, #2D6A4F 108%);
  color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform .15s ease;
}
.fa-glas__app:hover { transform: translateY(-2px); }