/* Alte Molkerei - Nordic Calm Design System */
/* Based on approved design concept from 2026-10-01 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (CSS VARIABLES)
   ========================================================================== */

:root {
  /* Neue Farbpalette basierend auf Peters Foto */
  --areia: #D3C7AD;     /* AREIA - warmes Beige */
  --verde: #6B6751;     /* VERDE OPACO - gedämpftes Olivgrün */
  --terra: #754637;     /* TERRA QUEIMADA - gebrannte Erde */
  --azul: #28374A;      /* AZUL - tiefes Marineblau */
  
  /* Funktionale Aliase - bessere Kontraste */
  --milk: var(--areia);
  --sand: var(--areia);
  --line: var(--verde);
  --ink: #1a1a1a;       /* Dunkleres Schwarz für bessere Lesbarkeit */
  --muted: #5a5a5a;     /* Helleres Grau für bessere Lesbarkeit */
  --espresso: var(--terra);
  --greige: var(--verde);

  /* Backward-compatible aliases from the first implementation */
  --molkerei-white: var(--milk);
  --schwertberg-grey: var(--sand);
  --espresso-brown: var(--espresso);
  --olivenoel-green: var(--espresso);
  --prosecco-gold: var(--sand);
  --text-primary: var(--ink);
  --text-secondary: var(--ink);
  --text-muted: var(--greige);
  --bg-warm-grey: var(--sand);
  --bg-light-beige: var(--ink);

  /* Typography */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Spacing System (8px base) */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-xxl: 4rem;

  /* Container & Layout */
  --max-width: 1200px;
  --container-padding-desktop: var(--space-l);
  --container-padding-mobile: var(--space-s);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.6s ease-out;

  /* Flat, nordic separation through lines instead of heavy shadows */
  --shadow-subtle: 0 0 0 1px rgba(185, 176, 162, 0.32);
  --shadow-medium: 0 0 0 1px rgba(185, 176, 162, 0.36);
  --shadow-strong: 0 0 0 1px rgba(185, 176, 162, 0.44);
  --shadow-hover: 0 0 0 1px rgba(58, 46, 38, 0.35);
}

/* Astro/browser view-transition crossfade target: 250 ms, disabled below for reduced motion. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease;
}

::view-transition-old(root) {
  animation-name: molkerei-crossfade-out;
}

::view-transition-new(root) {
  animation-name: molkerei-crossfade-in;
}

@keyframes molkerei-crossfade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes molkerei-crossfade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--molkerei-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--olivenoel-green);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--espresso-brown);
  text-decoration: underline;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.heading-font {
  font-family: var(--font-serif);
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--espresso-brown);
  margin-bottom: var(--space-m);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
}

h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

p {
  margin-bottom: var(--space-m);
  max-width: 65ch;
}

.text-large {
  font-size: 1.125rem;
  line-height: 1.6;
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.6;
}

.text-center {
  text-align: center;
}

/* ==========================================================================
   SKIP LINK (ACCESSIBILITY)
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--olivenoel-green);
  color: white;
  padding: var(--space-xs) var(--space-s);
  text-decoration: none;
  z-index: 1000;
  border-radius: 2px;
  font-weight: 500;
}

.skip-link:focus {
  top: 6px;
  color: white;
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.header {
  background: var(--molkerei-white);
  shadow: var(--shadow-subtle);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-s) var(--container-padding-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  text-decoration: none;
  color: var(--espresso-brown);
}

.logo:hover {
  text-decoration: none;
  color: var(--espresso-brown);
}

.logo__main {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.logo__sub {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: -2px;
}

/* Desktop Navigation */
.nav-list {
  display: flex;
  gap: var(--space-l);
  list-style: none;
  align-items: center;
}

.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-xs) 0;
  position: relative;
  transition: color var(--transition-normal);
}

.nav-link:hover {
  color: var(--olivenoel-green);
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--olivenoel-green);
  transition: width var(--transition-normal);
}

.nav-link:hover::after {
  width: 100%;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  width: 40px;
  height: 32px;
  justify-content: center;
  align-items: center;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--espresso-brown);
  transition: all var(--transition-normal);
  border-radius: 2px;
}

/* Mobile Menu */
.mobile-menu {
  background: var(--molkerei-white);
  border-top: 1px solid var(--schwertberg-grey);
  padding: var(--space-m);
}

.mobile-menu__list {
  list-style: none;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-s) 0;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--schwertberg-grey);
}

.mobile-menu__link:hover {
  color: var(--olivenoel-green);
  text-decoration: none;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 2px;
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
  min-width: 160px;
  transition: all var(--transition-normal);
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
}

/* Primary Button */
.button--primary {
  background-color: var(--azul);
  color: var(--milk);
  border-color: var(--azul);
}

.button--primary:hover {
  background-color: var(--terra);
  border-color: var(--terra);
  color: var(--milk);
  transform: translateY(-2px);
  shadow: var(--shadow-sage-green);
  text-decoration: none;
}

/* Secondary Button */
.button--secondary {
  background-color: transparent;
  color: var(--espresso-brown);
  border-color: var(--espresso-brown);
}

.button--live {
  background-color: var(--terra);
  color: var(--milk);
  border-color: var(--terra);
}

.button--live:hover {
  background-color: var(--espresso-brown);
  border-color: var(--espresso-brown);
  color: var(--milk);
  transform: translateY(-2px);
  shadow: var(--shadow-espresso-brown);
  text-decoration: none;
}

.button--secondary:hover {
  background-color: var(--espresso-brown);
  color: white;
  transform: translateY(-2px);
  shadow: var(--shadow-espresso-brown);
  text-decoration: none;
}

/* Small Button Variant */
.button--small {
  padding: 8px 16px;
  font-size: 0.875rem;
  min-width: 120px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  background: linear-gradient(135deg, var(--milk) 0%, var(--sand) 100%);
  padding: var(--space-xxl) var(--container-padding-desktop);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-xxl);
  align-items: center;
}

.hero__headline {
  color: var(--ink);
  margin-bottom: var(--space-l);
  text-align: left;
}

.hero__subline {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.hero__hours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--text-muted);
  font-size: var(--space-s);
}

.hours__icon {
  font-size: 1.2em;
}

/* ==========================================================================
   SECTIONS & LAYOUT
   ========================================================================== */

.section {
  padding: var(--space-xxl) 0;
}

.section__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-desktop);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section__title {
  color: var(--espresso-brown);
  margin-bottom: var(--space-m);
}

.section__description {
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.section__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Alternating Section Backgrounds */
.section--grey {
  background-color: var(--sand);
}

.section--beige {
  background-color: var(--milk);
}

.section--dark {
  background-color: var(--azul);
  color: var(--milk);
}

.section--dark .section__title {
  color: var(--milk);
}

.section--dark .section__subtitle {
  color: var(--areia);
}

.section--community {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--azul) 92%, black 8%) 0%, var(--azul) 100%);
  color: var(--milk);
  overflow: hidden;
}

.section--community .section__title {
  color: var(--milk);
}

.community-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--milk) 22%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--azul) 78%, white 6%);
  box-shadow: 0 24px 70px color-mix(in srgb, black 18%, transparent);
}

.community-card::before {
  content: "";
  position: absolute;
  inset: auto -8% -26% auto;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 28%, transparent);
  filter: blur(8px);
  opacity: .7;
  pointer-events: none;
}

.community-card__copy,
.community-card__panel {
  position: relative;
  z-index: 1;
}

.community-card__copy p:not(.community-card__kicker) {
  color: color-mix(in srgb, var(--milk) 86%, white 14%);
  font-size: 1.08rem;
}

.community-card__kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--space-m);
  padding: .42rem .75rem;
  border: 1px solid color-mix(in srgb, var(--milk) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--milk) 9%, transparent);
  color: var(--milk);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.community-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.button--whatsapp {
  background: #1f7a4d;
  border-color: #1f7a4d;
  color: white;
}

.button--whatsapp:hover {
  background: #185f3d;
  border-color: #185f3d;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

.community-card .button--secondary {
  color: var(--milk);
  border-color: color-mix(in srgb, var(--milk) 62%, transparent);
}

.community-card .button--secondary:hover {
  background: var(--milk);
  border-color: var(--milk);
  color: var(--azul);
}

.community-card__panel {
  padding: clamp(1rem, 3vw, 1.5rem);
  border-radius: 20px;
  background: color-mix(in srgb, var(--milk) 88%, white 12%);
  color: var(--ink);
}

.community-chat {
  display: grid;
  gap: .75rem;
}

.community-chat__bubble {
  max-width: 84%;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 18px;
  font-size: .98rem;
  line-height: 1.35;
}

.community-chat__bubble--left {
  justify-self: start;
  background: white;
  color: var(--azul);
  border-bottom-left-radius: 6px;
}

.community-chat__bubble--right {
  justify-self: end;
  background: color-mix(in srgb, var(--verde) 22%, white 78%);
  color: var(--ink);
  border-bottom-right-radius: 6px;
}

.community-card__privacy {
  margin: var(--space-m) 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

/* ==========================================================================
   INTRO CONTENT
   ========================================================================== */

.intro-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.intro-text p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 auto var(--space-m);
  max-width: 65ch;
}

/* ==========================================================================
   ASSORTMENT EDITORIAL LIST (replaces product grid)
   ========================================================================== */

.assortment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.assortment-list__item {
  border-bottom: 1px solid var(--line);
  transition: border-color 300ms ease, transform 300ms ease;
}

.assortment-list__item:hover {
  border-bottom-color: var(--ink);
  transform: translateX(8px);
}

.assortment-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  color: inherit;
  text-decoration: none;
  transition: all 300ms ease;
}

.assortment-list__link:hover {
  color: inherit;
  text-decoration: none;
}

.assortment-list__number {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--espresso);
  transition: color 300ms ease;
}

.assortment-list__item:hover .assortment-list__number {
  color: var(--ink);
}

.assortment-list__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
}

.assortment-list__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.assortment-list__text {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

.assortment-list__cta {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--espresso);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  margin-top: var(--space-xs);
}

/* Mobile responsive */
@media (max-width: 767px) {
  .assortment-list__link {
    grid-template-columns: 1fr;
    gap: var(--space-m);
    text-align: center;
  }
  
  .assortment-list__item:hover {
    transform: translateX(0);
  }
}

/* ==========================================================================
   FRIDAY TEXT SECTION
   ========================================================================== */

.friday-text {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.friday-text__content {
  margin-top: var(--space-xl);
}

.friday-message {
  background: var(--bg-light-beige);
  padding: var(--space-xl);
  border-radius: 2px;
  text-align: left;
}

.friday-message__title {
  color: var(--espresso-brown);
  margin-bottom: var(--space-m);
  text-align: center;
}

.friday-message__body p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

.friday-message__signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  font-style: italic;
  color: var(--text-secondary);
}

.signature-emoji {
  font-size: 1.2em;
}

/* ==========================================================================
   PETER PROFILE SECTION
   ========================================================================== */

.peter-profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.peter-profile__image {
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  shadow: var(--shadow-medium);
  background: var(--schwertberg-grey);
}

.peter-profile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peter-profile__image--portrait {
  aspect-ratio: 2 / 3;
  background: var(--molkerei-white);
}

.peter-profile__image--portrait img {
  object-fit: contain;
}

.peter-profile__content h2 {
  margin-bottom: var(--space-s);
}

.peter-profile__content p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

/* ========================================================================== 
   MOLKEREI HERITAGE SECTION
   ========================================================================== */

.molkerei-heritage {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.molkerei-heritage__image {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow-medium);
}

.molkerei-heritage__image img {
  display: block;
  width: 100%;
  height: auto;
}

.molkerei-heritage__content p:last-child {
  max-width: 620px;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ==========================================================================
   CONTACT SECTIONS
   ========================================================================== */

.contact-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-preview__content {
  max-width: 500px;
}

.contact-preview__text {
  font-size: 1.125rem;
  margin-bottom: var(--space-m);
  color: var(--text-secondary);
}

.contact-info {
  margin-bottom: var(--space-l);
}

.contact-info__location,
.contact-info__email {
  margin-bottom: var(--space-xs);
}

.contact-actions {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.webshop-hint {
  background: var(--bg-warm-grey);
  padding: var(--space-l);
  border-radius: 2px;
}

.webshop-hint h3 {
  margin-bottom: var(--space-s);
  color: var(--espresso-brown);
}

.webshop-hint p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

/* Taste skill polish: stronger closing section without changing content */
.contact-preview {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--terra) 16%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--milk) 72%, white 28%) 0%, color-mix(in srgb, var(--areia) 82%, white 18%) 100%);
  overflow: hidden;
}

.contact-preview::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: -1;
  border: 1px solid color-mix(in srgb, white 34%, transparent);
  border-radius: 18px;
  pointer-events: none;
}

.contact-preview::after {
  content: "Freitag 15:00-19:00";
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--terra) 18%, transparent);
  border-radius: 999px;
  padding: .42rem .72rem;
  background: color-mix(in srgb, var(--milk) 76%, white 24%);
  color: color-mix(in srgb, var(--azul) 72%, var(--terra) 28%);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contact-preview__content {
  max-width: 560px;
  padding: clamp(.35rem, 1vw, .75rem) 0;
}

.contact-preview__content .section__title {
  max-width: 9ch;
  margin-bottom: var(--space-s);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.contact-preview__text {
  width: fit-content;
  border-left: 3px solid var(--terra);
  padding-left: var(--space-s);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink);
}

.contact-info {
  display: grid;
  gap: .55rem;
  margin: 0 0 var(--space-l);
}

.contact-info__location,
.contact-info__email {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--terra) 12%, transparent);
  border-radius: 999px;
  padding: .55rem .85rem;
  background: color-mix(in srgb, var(--milk) 54%, white 46%);
  line-height: 1.25;
}

.contact-info__location::before,
.contact-info__email::before {
  content: "";
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--terra);
}

.contact-info__email a {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact-actions {
  gap: .75rem;
}

.webshop-hint {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  border: 1px solid color-mix(in srgb, var(--azul) 24%, transparent);
  border-radius: 18px;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--terra) 24%, transparent) 0 8rem, transparent 8.2rem),
    linear-gradient(145deg, color-mix(in srgb, var(--azul) 94%, black 6%) 0%, color-mix(in srgb, var(--azul) 78%, var(--terra) 22%) 100%);
  color: var(--milk);
  box-shadow: 0 22px 58px color-mix(in srgb, var(--azul) 18%, transparent);
  overflow: hidden;
}

.webshop-hint::before {
  content: "Online nachkaufen";
  width: fit-content;
  margin-bottom: auto;
  border: 1px solid color-mix(in srgb, var(--milk) 28%, transparent);
  border-radius: 999px;
  padding: .35rem .7rem;
  color: color-mix(in srgb, var(--milk) 86%, white 14%);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.webshop-hint h3 {
  color: var(--milk);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.webshop-hint p {
  color: color-mix(in srgb, var(--milk) 82%, white 18%);
}

.webshop-hint .button--primary {
  align-self: flex-start;
  background: var(--milk);
  border-color: var(--milk);
  color: var(--azul);
  box-shadow: none;
}

.webshop-hint .button--primary:hover {
  background: white;
  border-color: white;
  color: var(--azul);
}

@media (max-width: 768px) {
  .contact-preview {
    padding: var(--space-m);
    border-radius: 18px;
  }

  .contact-preview::before {
    inset: .65rem;
    border-radius: 14px;
  }

  .contact-preview::after {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-bottom: var(--space-s);
    order: -1;
  }

  .contact-preview__content .section__title {
    max-width: none;
    font-size: clamp(2.3rem, 12vw, 3.6rem);
  }

  .contact-info__location,
  .contact-info__email {
    width: 100%;
    border-radius: 16px;
  }

  .contact-actions .button,
  .webshop-hint .button,
  .webshop-hint .button--primary {
    width: 100%;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    padding-inline: 1rem;
    align-self: stretch;
  }

  .webshop-hint {
    min-height: 0;
    border-radius: 16px;
  }

  .webshop-hint::before {
    margin-bottom: var(--space-l);
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--espresso-brown);
  color: var(--molkerei-white);
  padding: var(--space-l) var(--container-padding-desktop);
}

.footer__container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.footer__brand {
  color: var(--molkerei-white);
  margin: 0;
}

.footer__nav ul {
  display: flex;
  gap: var(--space-l);
  list-style: none;
}

.footer a {
  color: var(--molkerei-white);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.footer a:hover {
  color: var(--prosecco-gold);
  text-decoration: none;
}

/* ==========================================================================
   FOCUS STATES (ACCESSIBILITY)
   ========================================================================== */

*:focus {
  outline: 2px solid var(--olivenoel-green);
  outline-offset: 2px;
}

.button:focus {
  outline: 2px solid var(--olivenoel-green);
  outline-offset: 4px;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet (768px+) */
@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }
  
  .mobile-menu-toggle {
    display: flex;
  }
  
  .header__actions .button {
    padding: 6px 12px;
    font-size: 0.75rem;
    min-width: 80px;
  }
  
  .peter-profile,
  .molkerei-heritage,
  .contact-preview {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  
  .peter-profile__image {
    max-width: 250px;
    margin: 0 auto;
  }

  .molkerei-heritage__image {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .header__container {
    padding: var(--space-s) var(--container-padding-mobile);
  }
  
  .logo__main {
    font-size: 1.25rem;
  }
  
  .logo__sub {
    font-size: 0.625rem;
  }
  
  .hero {
    padding: var(--space-xl) var(--container-padding-mobile);
    min-height: 60vh;
  }
  
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero__hours {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }
  
  .section {
    padding: var(--space-xl) var(--container-padding-mobile);
  }
  
  .section__header {
    margin-bottom: var(--space-l);
  }
  
  .product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
  
  .product-card__content {
    padding: var(--space-m);
  }
  
  .button {
    width: 100%;
    max-width: 280px;
  }
  
  .contact-actions {
    flex-direction: column;
  }
  
  .footer__content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__nav ul {
    flex-direction: column;
    gap: var(--space-s);
    text-align: center;
  }
  
  .friday-message {
    padding: var(--space-l);
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  :root {
    --container-padding-mobile: var(--space-s);
  }
  
  .hero__actions .button {
    min-width: 200px;
  }
  
  .product-grid {
    gap: var(--space-s);
  }
}

/* ==========================================================================
   REDUCED MOTION (ACCESSIBILITY)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   PAGE-SPECIFIC COMPONENTS
   ========================================================================== */

/* Page Headers */
.page-header {
  text-align: left;
  max-width: 800px;
}

.page-header--centered {
  text-align: center;
  margin: 0 auto;
}

.page-header__title {
  margin-bottom: var(--space-m);
}

.page-header__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Peter Profile - Large Variant */
.peter-profile--large {
  grid-template-columns: 400px 1fr;
  gap: var(--space-xxl);
}

/* Molkerei Idea Section */
.molkerei-idea {
  max-width: 1000px;
  margin: 0 auto;
}

.idea-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.idea-block h3 {
  color: var(--espresso-brown);
  margin-bottom: var(--space-s);
}

.idea-block p {
  line-height: 1.6;
}

/* Personal Profile */
.personal-profile {
  max-width: 600px;
  margin: 0 auto;
}

.profile-card {
  background: var(--molkerei-white);
  padding: var(--space-xl);
  border-radius: 2px;
  shadow: var(--shadow-medium);
  text-align: center;
}

.profile-card__title {
  margin-bottom: var(--space-xs);
}

.profile-card__subtitle {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--space-l);
}

.profile-card__description {
  text-align: left;
}

/* Philosophy Section */
.philosophy-section {
  max-width: 800px;
  margin: 0 auto;
}

.philosophy-content {
  margin-top: var(--space-xl);
}

.philosophy-text {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.philosophy-text .text-large {
  font-style: italic;
  color: var(--espresso-brown);
  margin-bottom: var(--space-m);
}

.philosophy-citation {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.philosophy-details h3 {
  color: var(--espresso-brown);
  margin-bottom: var(--space-s);
}

.philosophy-details p {
  line-height: 1.6;
}

/* Contact Teaser */
.contact-teaser {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact-teaser__actions {
  display: flex;
  gap: var(--space-s);
  justify-content: center;
  margin-top: var(--space-l);
  flex-wrap: wrap;
}

/* Freitag Page Styles */
.ritual-explanation {
  max-width: 1000px;
  margin: 0 auto;
}

.ritual-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-xl);
}

.ritual-text .text-large {
  margin-bottom: var(--space-m);
}

.time-display {
  background: var(--molkerei-white);
  padding: var(--space-xl);
  border-radius: 2px;
  text-align: center;
  shadow: var(--shadow-medium);
}

.time-display__day {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--espresso-brown);
  margin-bottom: var(--space-xs);
}

.time-display__hours {
  font-size: 2rem;
  font-weight: 300;
  color: var(--olivenoel-green);
  margin-bottom: var(--space-xs);
}

.time-display__note {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Opening Info */
.opening-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}

.info-card {
  background: var(--molkerei-white);
  padding: var(--space-l);
  border-radius: 2px;
  shadow: var(--shadow-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.info-card__icon {
  font-size: 2rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.info-card--primary .info-card__icon {
  background: var(--terra);
  color: var(--milk);
}

.info-card--secondary .info-card__icon {
  background: var(--verde);
  color: var(--milk);
}

.info-card--tertiary .info-card__icon {
  background: var(--azul);
  color: var(--milk);
}

.info-card__title {
  margin-bottom: var(--space-xs);
  color: var(--espresso-brown);
}

.info-card__detail {
  margin: 0;
  color: var(--text-secondary);
}

.opening-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* Reservation */
.reservation-block {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(520px, 1.18fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--terra) 16%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--milk) 72%, white 28%);
}

.reservation-copy .section__eyebrow {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--terra) 20%, transparent);
  border-radius: 999px;
  padding: .35rem .7rem;
  background: color-mix(in srgb, var(--milk) 62%, white 38%);
  color: var(--terra);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.reservation-copy .section__title {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.reservation-form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--azul) 16%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, white 46%, var(--milk) 54%);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--azul) 8%, transparent);
}

.reservation-form .form-group {
  margin: 0;
}

.form-grid {
  display: grid;
  gap: var(--space-m);
}

.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--three {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(120px, .7fr);
}

.form-grid--four {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.form-hint {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.3;
}

.reservation-form .form-input,
.reservation-form .form-select,
.reservation-form .form-textarea {
  min-height: 48px;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--terra) 22%, var(--schwertberg-grey));
  background: color-mix(in srgb, white 82%, var(--milk) 18%);
}

.reservation-form .form-textarea {
  min-height: 112px;
  resize: vertical;
}

.form-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--schwertberg-grey);
  border-radius: 2px;
  font-family: inherit;
  font-size: 1rem;
  background: white;
  transition: border-color var(--transition-normal);
}

.form-select:focus {
  outline: none;
  border-color: var(--olivenoel-green);
}

.reservation-actions {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.reservation-note {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

.reservation-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reservation-form.is-submitting {
  opacity: .72;
}

.reservation-form button[disabled] {
  cursor: wait;
}

.form-message {
  margin: var(--space-m) 0 0;
  padding: .85rem 1rem;
  border-radius: 12px;
  font-weight: 600;
}

.form-message--success {
  background: color-mix(in srgb, var(--verde) 18%, white 82%);
  color: var(--azul);
}

.form-message--error {
  background: color-mix(in srgb, var(--terra) 18%, white 82%);
  color: var(--terra);
}

.form-message--info {
  background: color-mix(in srgb, var(--azul) 14%, white 86%);
  color: var(--azul);
}

@media (max-width: 900px) {
  .reservation-block,
  .form-grid--two,
  .form-grid--three,
  .form-grid--four {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  #reservierung .section__container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .reservation-block {
    padding: .85rem;
  }

  .reservation-form {
    padding: 1rem;
  }

  .reservation-block,
  .reservation-form {
    border-radius: 16px;
  }

  .reservation-actions .button {
    width: 100%;
  }
}

/* Expectations Grid */
.expectations {
  max-width: 1000px;
  margin: 0 auto;
}

.expectations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.expectation-item h3 {
  color: var(--espresso-brown);
  margin-bottom: var(--space-s);
}

.expectation-item p {
  line-height: 1.6;
}

/* Special Requests */
.special-requests {
  max-width: 600px;
  margin: 0 auto;
}

.request-content {
  margin-top: var(--space-l);
}

.request-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-l);
}

/* Friday Special */
.friday-special {
  max-width: 800px;
  margin: 0 auto;
}

.special-message {
  margin-top: var(--space-l);
}

.special-content {
  background: var(--molkerei-white);
  padding: var(--space-xl);
  border-radius: 2px;
  shadow: var(--shadow-subtle);
}

.special-content h3 {
  color: var(--espresso-brown);
  margin-bottom: var(--space-m);
  text-align: center;
}

.special-content p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

.special-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-l);
  font-style: italic;
  color: var(--text-secondary);
}

/* Webshop Alternative */
.webshop-alternative,
.alternative-content {
  max-width: 600px;
  margin: 0 auto;
}

.alternative-actions,
.webshop-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-l);
}

/* Contact Page Styles */
.contact-main {
  max-width: 600px;
  margin: 0 auto;
}

.contact-card {
  background: var(--molkerei-white);
  padding: var(--space-xl);
  border-radius: 2px;
  shadow: var(--shadow-medium);
}

.contact-card__title {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.contact-details {
  margin-bottom: var(--space-xl);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item__icon {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: var(--milk);
  border-radius: 8px;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.contact-item__icon:hover {
  background: var(--verde);
  transform: translateY(-2px);
}

.contact-item__icon span::before {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
}

.contact-item:nth-child(1) .contact-item__icon span::before { content: "⌂"; }
.contact-item:nth-child(2) .contact-item__icon span::before { content: "@"; }
.contact-item:nth-child(3) .contact-item__icon span::before { content: "↻"; }
.contact-item:nth-child(4) .contact-item__icon span::before { content: "P"; font-weight: 600; }

.contact-item__content h3 {
  margin-bottom: var(--space-xs);
  color: var(--espresso-brown);
  font-size: 1rem;
}

.contact-item__content p {
  margin: 0;
  color: var(--text-secondary);
}

.contact-actions {
  text-align: center;
}

/* Location & Directions */
.location-section {
  max-width: 1000px;
  margin: 0 auto;
}

.directions-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.directions-info h3 {
  color: var(--espresso-brown);
  margin-bottom: var(--space-s);
}

.directions-info p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

.map-placeholder {
  background: var(--bg-light-beige);
  border-radius: 2px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.map-placeholder__content p {
  margin-bottom: var(--space-xs);
}

/* Contact Form */
.contact-form-section {
  max-width: 600px;
  margin: 0 auto;
}

.contact-form {
  margin-top: var(--space-xl);
}

.form-group {
  margin-bottom: var(--space-l);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--espresso-brown);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--schwertberg-grey);
  border-radius: 2px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition-normal);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--olivenoel-green);
}

.form-input.invalid {
  border-color: var(--color-error-600);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  text-align: center;
  margin-bottom: var(--space-m);
}

.form-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* FAQ Section */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
}

.faq-list {
  margin-top: var(--space-m);
}

.faq-item {
  background: var(--molkerei-white);
  padding: 1rem 1.15rem;
  border-radius: 10px;
  margin-bottom: .75rem;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .045);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  color: var(--espresso-brown);
  margin-bottom: .35rem;
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.25;
}

.faq-item p {
  margin: 0;
  line-height: 1.42;
  font-size: .98rem;
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

.legal-page h1 {
  margin-bottom: var(--space-l);
  color: var(--espresso-brown);
}

.legal-page h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-m);
  color: var(--espresso-brown);
}

.legal-page h3 {
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
  color: var(--espresso-brown);
}

.legal-page p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

.legal-back {
  margin-top: var(--space-xl);
  text-align: center;
}

/* ==========================================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ========================================================================== */

@media (max-width: 1024px) {
  .peter-profile--large {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  
  .ritual-content {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  
  .directions-content {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  
  .idea-content {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  
  .expectations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }
}

@media (max-width: 768px) {
  .contact-teaser__actions,
  .request-actions,
  .alternative-actions,
  .webshop-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .opening-info {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
  
  .expectations-grid {
    grid-template-columns: 1fr;
  }
  
  .info-card {
    flex-direction: column;
    text-align: center;
    padding: var(--space-m);
  }
  
  .contact-item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-s);
    width: 100%;
    margin-bottom: var(--space-s);
    padding: .9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--terra) 18%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--areia) 72%, white 28%);
  }

  .contact-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .contact-item__content {
    min-width: 0;
    flex: 1;
  }

  .contact-item__content h3,
  .contact-item__content p {
    text-align: left;
  }

  .contact-item__content a {
    overflow-wrap: anywhere;
  }
  
  .time-display {
    padding: var(--space-l);
  }
  
  .profile-card {
    padding: var(--space-l);
  }
  
  .special-content {
    padding: var(--space-l);
  }
  
  .contact-card {
    padding: var(--space-s);
  }

  .contact-main {
    width: 100%;
    max-width: none;
  }

  .contact-details {
    margin-bottom: var(--space-m);
  }
}

/* ==========================================================================
   HIGH CONTRAST MODE (ACCESSIBILITY)
   ========================================================================== */

@media (prefers-contrast: high) {
  :root {
    --text-primary: var(--color-neutral-950);
    --text-secondary: var(--color-neutral-950);
    --espresso-brown: var(--color-neutral-950);
    --olivenoel-green: var(--color-success-700);
  }
}

/* Root-task refinement: KARTE 2 Hero, Freitagszeile, quiet motion, and spec palette */
.hero {
  background: var(--milk);
  padding: clamp(4rem, 9vw, 7rem) var(--container-padding-desktop);
  text-align: left;
  min-height: min(78vh, 760px);
  justify-content: flex-start;
}
.hero__container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.78fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero__copy {
  min-width: 0;
}
.hero__eyebrow {
  margin: 0 0 var(--space-m);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: clamp(.78rem, 1vw, .9rem);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.45;
  text-transform: uppercase;
}
.hero__headline {
  max-width: 11ch;
  margin: 0 0 var(--space-l);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(3.35rem, 9.4vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-align: left;
}
.hero__word-mask {
  display: inline-block;
  overflow: hidden;
  min-width: min(86vw, 7.35ch);
  padding: 0 0.09em 0.16em 0.02em;
  margin: 0 -0.09em -0.16em -0.02em;
  vertical-align: bottom;
}
.hero__word {
  display: inline-block;
  color: var(--espresso);
  font-style: italic;
  font-weight: inherit;
  line-height: inherit;
  padding-inline: 0.01em;
  transform: translateY(0);
  will-change: transform;
}
.hero__word.is-leaving {
  animation: wordLeave 600ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__word.is-entering {
  animation: wordEnter 600ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__suffix {
  display: inline-block;
}
.hero__subline {
  max-width: 34rem;
  margin: 0 0 var(--space-l);
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
}
.hero__actions {
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-m);
  margin: 0 0 var(--space-l);
}
.hero__textlink {
  color: var(--espresso);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.hero__status {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  border: 1px solid var(--greige);
  border-radius: 2px;
  padding: .45rem .8rem;
  color: var(--espresso);
  background: color-mix(in srgb, var(--sand) 52%, transparent);
  font-size: .95rem;
}
.hero__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: var(--sand);
  border-radius: 12px;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(.96);
}
.hero__photo-caption {
  position: absolute;
  right: var(--space-s);
  bottom: var(--space-s);
  margin: 0;
  border-radius: 2px;
  padding: .35rem .7rem;
  background: color-mix(in srgb, var(--milk) 88%, transparent);
  color: var(--espresso);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Focused UI polish: warm editorial hero direction */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--terra) 13%, transparent) 0 18rem, transparent 18.2rem),
    linear-gradient(135deg, color-mix(in srgb, var(--areia) 92%, white 8%) 0%, color-mix(in srgb, var(--areia) 76%, white 24%) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 3vw, 2.5rem);
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--terra) 16%, transparent);
  border-radius: 28px;
  pointer-events: none;
}

.hero__copy {
  position: relative;
  padding: clamp(1rem, 2vw, 1.75rem) 0;
}

.hero__eyebrow {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--terra) 22%, transparent);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: color-mix(in srgb, var(--milk) 72%, white 28%);
  color: color-mix(in srgb, var(--azul) 68%, var(--terra) 32%);
}

.hero__headline {
  text-wrap: balance;
}

.hero__actions {
  padding: .35rem;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--terra) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--milk) 58%, white 42%);
}

.hero__actions .button {
  border-radius: 999px;
  min-height: 3.15rem;
  box-shadow: none;
}

.hero__actions .button--primary {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--azul) 18%, transparent);
}

.hero__actions .button--live {
  background-color: color-mix(in srgb, var(--terra) 92%, var(--milk) 8%);
  color: var(--milk);
  border-color: color-mix(in srgb, var(--terra) 92%, var(--milk) 8%);
}

.hero__photo {
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--terra) 18%, transparent);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--azul) 16%, transparent);
  transform: rotate(.7deg);
}

.hero__photo::before {
  content: "";
  position: absolute;
  inset: -1rem;
  z-index: -1;
  border-radius: 18px;
  background: color-mix(in srgb, var(--milk) 68%, white 32%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terra) 14%, transparent);
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 36%, transparent);
  pointer-events: none;
}

.hero__photo img {
  border-radius: inherit;
}

.hero__photo-caption {
  right: 1rem;
  bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--terra) 14%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--milk) 84%, white 16%);
}

@media (max-width: 768px) {
  .hero::before {
    inset: .75rem;
    border-radius: 20px;
  }

  .hero__eyebrow {
    margin-inline: auto;
    text-align: center;
  }

  .hero__actions {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    border-radius: 24px;
  }

  .hero__actions .button {
    width: 100%;
    max-width: none;
  }

  .hero__photo {
    transform: none;
    width: min(100%, 22rem);
    margin-inline: auto;
  }
}
@keyframes wordLeave {
  to { transform: translateY(-110%); }
}
@keyframes wordEnter {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
@keyframes heroPhotoReveal {
  to { clip-path: inset(0 0 0 0); }
}
.product-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.product-card {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  border: 0;
  background: transparent;
  shadow: none;
}
.product-card:nth-child(even) .product-card__image { order: 2; }
.product-card__image {
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  border-radius: 12px;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  background: var(--molkerei-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms ease-out, filter 600ms ease-out;
  filter: saturate(.95) contrast(.98);
}
.product-card:hover .product-card__image img { transform: scale(1.03); }

.product-card__image--collage {
  position: relative;
  display: block;
  width: min(100%, 520px);
  max-width: 520px;
  min-height: clamp(420px, 46vw, 560px);
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.product-card__image--collage .feinkost-collage__item {
  position: absolute;
  display: block;
  height: auto;
  object-fit: cover;
  border: 8px solid var(--molkerei-white);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(35, 29, 24, 0.18);
  filter: saturate(.98) contrast(.98);
  transition: transform 500ms ease, box-shadow 500ms ease;
}

.product-card:hover .product-card__image--collage .feinkost-collage__item {
  transform: translateY(-4px) rotate(var(--tilt, 0deg));
  box-shadow: 0 22px 52px rgba(35, 29, 24, 0.22);
}

.product-card__image--collage .feinkost-collage__item--large {
  width: 52%;
  height: 58%;
  left: 4%;
  top: 10%;
  z-index: 2;
  --tilt: -2deg;
  transform: rotate(var(--tilt));
}

.product-card__image--collage .feinkost-collage__item--tilt-left {
  width: 38%;
  height: 45%;
  right: 3%;
  top: 4%;
  z-index: 3;
  --tilt: 4deg;
  transform: rotate(var(--tilt));
}

.product-card__image--collage .feinkost-collage__item--small-top {
  width: 31%;
  height: 32%;
  left: 0;
  bottom: 12%;
  z-index: 4;
  --tilt: 5deg;
  transform: rotate(var(--tilt));
}

.product-card__image--collage .feinkost-collage__item--small-bottom {
  width: 34%;
  height: 36%;
  left: 31%;
  bottom: 2%;
  z-index: 5;
  --tilt: -4deg;
  transform: rotate(var(--tilt));
}

.product-card__image--collage .feinkost-collage__item--drink {
  width: 28%;
  height: 36%;
  right: 7%;
  bottom: 22%;
  z-index: 1;
  --tilt: -7deg;
  transform: rotate(var(--tilt));
}

.product-card__image--collage .feinkost-collage__item--sweet {
  width: 34%;
  height: 29%;
  right: 4%;
  bottom: 0;
  z-index: 6;
  --tilt: 6deg;
  transform: rotate(var(--tilt));
}

.product-card__title { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 400; letter-spacing: -.035em; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease-out, transform 700ms ease-out; transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.footer__cow { display: inline-block; transition: transform 220ms ease-out; }
.footer__cow:hover { animation: cowWink 650ms ease-in-out 1; }
@keyframes cowWink { 0%, 100% { transform: rotate(0) scale(1); } 45% { transform: rotate(-8deg) scale(1.12); } 70% { transform: rotate(5deg) scale(.96); } }

/* ==========================================================================
   JOURNAL SECTION STYLES
   ========================================================================== */

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-l);
}

.journal-card {
  background: var(--milk);
  border-radius: 8px;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--verde);
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.journal-card--api {
  background: var(--sand);
  border: 1px dashed var(--verde);
}

.journal-card__content {
  padding: var(--space-m);
}

.journal-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-s);
  font-size: 0.85rem;
  color: var(--muted);
}

.journal-card__source {
  background: var(--verde);
  color: var(--milk);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-card__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--space-s);
}

.journal-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.journal-card__title a:hover {
  color: var(--terra);
}

.journal-card__excerpt {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--space-m);
}

.journal-card__link {
  color: var(--terra);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.journal-card__link:hover {
  color: var(--ink);
}

.journal-card__link--disabled {
  color: var(--muted);
  cursor: default;
}

/* Leer-/Lade-Zustand im Journal-Grid (z. B. noch kein faelliger Content-
   Portal-Beitrag freigegeben, oder initialer Zustand vor dem ersten Fetch) */
.journal-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: var(--space-l) 0;
}

/* ==========================================================================
   GOOGLE MAPS STYLES  
   ========================================================================== */

.google-map {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.google-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map-overlay {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  background: var(--milk);
  border: 1px solid var(--verde);
  border-radius: 8px;
  padding: var(--space-s);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-width: 200px;
}

.map-info h4 {
  margin: 0 0 var(--space-xs) 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.map-info p {
  margin: 0 0 var(--space-xs) 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.map-link {
  color: var(--terra);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: color var(--transition-fast);
}

.map-link:hover {
  color: var(--azul);
  text-decoration: underline;
}

}

/* ==========================================================================
   NOTICES BANNER
   ========================================================================== */

.notices-banner {
  position: relative;
  background: linear-gradient(135deg, var(--azul), var(--verde));
  color: var(--milk);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.notice {
  margin-bottom: var(--space-s);
}

.notice:last-child {
  margin-bottom: 0;
}

.notice h4 {
  margin: 0 0 var(--space-xs) 0;
  font-weight: 600;
  font-size: 1.1em;
}

.notice p {
  margin: 0 0 var(--space-xs) 0;
  opacity: 0.9;
}

.notice time {
  font-size: 0.9em;
  opacity: 0.8;
  font-weight: 500;
}

.notice--closed {
  border-left: 4px solid var(--terra);
  padding-left: var(--space-s);
}

/* ==========================================================================
   DYNAMIC CONTENT COMPONENTS
   ========================================================================== */

.journal-card {
  background: var(--milk);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid var(--areia);
}

.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.journal-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.journal-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.journal-card:hover .journal-card__image img {
  transform: scale(1.05);
}

.journal-card__content {
  padding: var(--space-m);
}

.journal-card__title {
  margin: 0 0 var(--space-s) 0;
  font-size: 1.2em;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.journal-card__teaser {
  margin: 0 0 var(--space-s) 0;
  color: var(--muted);
  line-height: 1.5;
}

.journal-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-s);
  font-size: 0.9em;
}

.journal-card__type {
  background: var(--verde);
  color: var(--milk);
  padding: var(--space-xs) var(--space-s);
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.85em;
}

.journal-card__date {
  color: var(--muted);
  font-weight: 500;
}

.journal-card__link {
  display: inline-flex;
  align-items: center;
  color: var(--terra);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.journal-card__link:hover {
  color: var(--azul);
}

/* Friday Post Specific Styles */
.friday-content {
  max-width: 800px;
  margin: 0 auto;
}

.friday-post {
  text-align: center;
}

.friday-header {
  margin-bottom: var(--space-xl);
}

.friday-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-m);
}

.friday-hero-word {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--terra), var(--azul));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-l);
}

.friday-image {
  margin: var(--space-xl) 0;
  border-radius: 12px;
  overflow: hidden;
}

.friday-image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
}

.friday-teaser {
  font-size: 1.2em;
  color: var(--muted);
  margin-bottom: var(--space-l);
  line-height: 1.6;
}

.friday-body {
  text-align: left;
  margin: var(--space-xl) 0;
}

.friday-body h2,
.friday-body h3 {
  color: var(--ink);
  margin: var(--space-l) 0 var(--space-m) 0;
}

.friday-body p {
  margin-bottom: var(--space-m);
  line-height: 1.6;
}

.friday-date {
  display: block;
  color: var(--muted);
  font-style: italic;
  margin-top: var(--space-l);
}

/* Journal-Einzelansicht (journal.html) - nutzt dieselben .friday-*-Klassen
   wie der Freitagspost (gleiches Markup aus content-portal.js), nur diese
   zwei zusaetzlichen Zustaende sind spezifisch fuer die Einzelansicht. */
.journal-detail__loading,
.journal-detail__missing {
  text-align: center;
  color: var(--muted);
  padding: var(--space-xl) 0;
}

.journal-detail__missing .button {
  margin-top: var(--space-m);
}

.journal-detail__back {
  margin-top: var(--space-xl);
  text-align: center;
}

/* Friday Preview Card */
.friday-preview-card {
  background: var(--areia);
  padding: var(--space-l);
  border-radius: 12px;
  text-align: center;
}

.friday-preview-card h3 {
  margin: 0 0 var(--space-s) 0;
  color: var(--verde);
  font-weight: 600;
}

.friday-preview-card h4 {
  margin: 0 0 var(--space-m) 0;
  color: var(--ink);
  font-size: 1.3em;
}

.friday-preview-card p {
  margin: 0 0 var(--space-l) 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .notices-banner {
    padding: var(--space-s);
    margin-bottom: var(--space-m);
  }
  
  .friday-title {
    font-size: 2rem;
  }
  
  .friday-hero-word {
    font-size: 2rem;
  }
  
  .journal-card__content {
    padding: var(--space-s);
  }
  
  .journal-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

.instagram-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
}

.instagram-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--verde) 32%, transparent);
  border-radius: 14px;
  background: var(--milk);
  box-shadow: 0 1px 10px rgba(0, 0, 0, .045);
}

.instagram-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--areia) 70%, white 30%);
  color: var(--terra);
  text-decoration: none;
  overflow: hidden;
}

.instagram-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease-out;
}

.instagram-card:hover .instagram-card__media img {
  transform: scale(1.035);
}

.instagram-card__content {
  padding: 1rem;
}

.instagram-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: .65rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.instagram-card__content p {
  margin: 0 0 .8rem 0;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.42;
}

.instagram-card__link,
.instagram-feed__empty a {
  color: var(--terra);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.instagram-feed__empty {
  grid-column: 1 / -1;
  padding: var(--space-l);
  border: 1px dashed color-mix(in srgb, var(--verde) 45%, transparent);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--areia) 70%, white 30%);
}

.instagram-feed__empty p {
  margin: 0 auto .5rem;
}

@media (max-width: 900px) {
  .instagram-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .instagram-feed {
    grid-template-columns: 1fr;
  }
}

.form-message {
  padding: var(--space-s);
  border-radius: 8px;
  margin-bottom: var(--space-m);
  font-size: 0.9rem;
  font-weight: 500;
}

.form-message--success {
    background-color: rgba(107, 103, 81, 0.1);
    color: var(--verde);
    border-color: var(--verde);
}

.form-message--info {
    background-color: rgba(40, 55, 77, 0.1);
    color: var(--azul);
    border-color: var(--azul);
}

.form-message--error {
  background-color: color-mix(in srgb, var(--terra) 15%, var(--milk));
  color: var(--terra);
  border: 1px solid var(--terra);
}

@media (max-width: 768px) {
  .journal-grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
  
  .journal-card__content {
    padding: var(--space-s);
  }
}

@media (max-width: 767px) {
  .hero {
    padding: clamp(3rem, 10vw, 4.5rem) var(--container-padding-mobile);
    min-height: 0;
  }
  .hero__container {
    grid-template-columns: 1fr;
  }
  .hero__headline {
    max-width: 8ch;
  }
  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero__photo {
    width: min(100%, 28rem);
  }
  .product-card { grid-template-columns: 1fr; }
  .product-card:nth-child(even) .product-card__image { order: 0; }
  .product-card__image--collage {
    width: min(100%, 500px);
    min-height: 500px;
    margin: 0 auto var(--space-m);
  }
  .community-card {
    grid-template-columns: 1fr;
    padding: 1rem;
    border-radius: 18px;
  }
  .community-card__actions {
    flex-direction: column;
  }
  .community-card__actions .button {
    width: 100%;
  }
  .community-card__panel {
    border-radius: 16px;
  }
}
@media (max-width: 560px) {
  .product-card__image--collage {
    width: 100%;
    min-height: 420px;
  }

  .product-card__image--collage .feinkost-collage__item {
    border-width: 5px;
    border-radius: 10px;
  }

  .product-card__image--collage .feinkost-collage__item--large { width: 58%; height: 55%; left: 0; top: 9%; }
  .product-card__image--collage .feinkost-collage__item--tilt-left { width: 42%; height: 42%; right: 0; top: 4%; }
  .product-card__image--collage .feinkost-collage__item--small-top { width: 35%; height: 30%; left: 0; bottom: 13%; }
  .product-card__image--collage .feinkost-collage__item--small-bottom { width: 37%; height: 33%; left: 32%; bottom: 3%; }
  .product-card__image--collage .feinkost-collage__item--drink { width: 32%; height: 35%; right: 3%; bottom: 23%; }
  .product-card__image--collage .feinkost-collage__item--sweet { width: 35%; height: 27%; right: 4%; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__word.is-leaving,
  .hero__word.is-entering { animation: none !important; }
  .hero__photo { clip-path: inset(0 0 0 0); animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}