/* BYOY — Der Weinberg von Baal-Hamon (Hohelied 8,11).
   Terraced slopes held by chalk-ivory limestone walls, vine-green rows,
   grape-purple clusters and terracotta soil. Every class is BYOY's own
   (hamon-, rebzeile, lese, beere). Motion stops under prefers-reduced-motion. */

:root {
  --rebe: #2f4a2a;
  --rebe-2: #1f331c;
  --rebe-3: #4b7336;
  --laub: #5f8a43;
  --laub-hell: #9dbb78;
  --traube: #5b2a5e;
  --traube-2: #3d1c40;
  --traube-hell: #8a4f8c;
  --terra: #a65a3a;
  --terra-2: #8c4a30;
  --terra-hell: #d08a62;
  --kreide: #f6f1e4;
  --kreide-2: #ece3cd;
  --kreide-3: #ddd0b0;
  --stroh: #d8b45a;
  --tinte: #24301f;
  --tinte-2: #59604f;
  --rand: rgba(47, 74, 42, 0.16);
  --schatten: 0 22px 44px -26px rgba(31, 51, 28, 0.55);
  --titel: "Alegreya", "Georgia", serif;
  --text: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body.hamon {
  margin: 0;
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.7;
  color: var(--tinte);
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(216, 180, 90, 0.16), transparent 60%),
    radial-gradient(700px 480px at 0% 30%, rgba(91, 42, 94, 0.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%232f4a2a' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M10 60c10 0 14-10 24-10s14 10 24 10 14-10 24-10 14 10 24 10'/%3E%3Cpath d='M58 60c4 6 10 6 12 2s-2-6-4-4'/%3E%3C/g%3E%3C/svg%3E"),
    var(--kreide);
}
a { color: var(--traube); text-decoration-color: var(--terra-hell); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--terra); }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 500; line-height: 1.18; color: var(--rebe-2); }
:focus-visible { outline: 3px solid var(--stroh); outline-offset: 2px; }

.hamon-sprung { position: absolute; left: -999px; top: 8px; background: var(--rebe-2); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 6px; }
.hamon-sprung:focus { left: 12px; }

/* ── Spanien 2026: eine Tomatengirlande ─────────────────────────────── */
.hamon-wm { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--traube-2), var(--traube), var(--traube-2)); color: var(--kreide); }
.hamon-wm__girlande { position: absolute; left: 0; top: 0; width: 100%; height: 40px; max-width: none; pointer-events: none; }
.hamon-wm__frucht { transform-box: fill-box; transform-origin: 50% 0; animation: wm-schaukeln 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.hamon-wm__frucht--klein { animation-duration: 2.8s; }
.hamon-wm__text { position: relative; z-index: 1; margin: 0; padding: 40px 16px 9px; text-align: center; font-size: 15px; letter-spacing: 0.03em; }
.hamon-wm__text strong { color: #ffc400; font-weight: 700; }
.hamon-wm__paar { width: 30px; height: 18px; vertical-align: -3px; }
@keyframes wm-schaukeln { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ── Kopf: der Hang mit der Mauerkrone ───────────────────────────────── */
.hamon-kopf { position: sticky; top: 0; z-index: 40; color: var(--kreide); background: linear-gradient(180deg, var(--rebe-3) 0%, var(--rebe) 55%, var(--rebe-2) 100%); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
.hamon-kopf__innen { max-width: 1240px; margin: 0 auto; padding: 10px 16px 4px; display: flex; align-items: center; gap: 16px; }
.hamon-marke { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.hamon-marke:hover { color: inherit; }
.hamon-marke__bild { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); }
.hamon-marke__traube { transform-box: fill-box; transform-origin: 50% 0; animation: traube-wiegen 6s ease-in-out infinite; }
.hamon-marke__texte { display: flex; flex-direction: column; line-height: 1.12; }
.hamon-marke__name { font-family: var(--titel); font-weight: 700; font-size: 28px; letter-spacing: 0.22em; color: var(--kreide); }
.hamon-marke__lang { font-size: 13.5px; font-style: italic; letter-spacing: 0.02em; color: var(--laub-hell); }
.hamon-knopf { display: none; margin-left: auto; align-items: center; gap: 8px; background: transparent; color: var(--kreide); border: 1px solid rgba(246, 241, 228, 0.5); border-radius: 999px; padding: 7px 16px; font: 500 16px var(--text); cursor: pointer; }
.hamon-knopf__striche { display: inline-flex; flex-direction: column; gap: 3px; }
.hamon-knopf__striche i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s, opacity 0.3s; }
.hamon-kopf.offen .hamon-knopf__striche i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamon-kopf.offen .hamon-knopf__striche i:nth-child(2) { opacity: 0; }
.hamon-kopf.offen .hamon-knopf__striche i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@keyframes traube-wiegen { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Every menu item is a vine row. On hover a tendril grows out beneath the
   word (stroke drawn from 0 to full length) and a leaf unfolds at its end. */
.hamon-menue { max-width: 1240px; margin: 0 auto; padding: 2px 10px 6px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 2px; }
.rebzeile { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 6px 11px 20px; color: var(--kreide); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; border-radius: 8px; transition: color 0.3s, background 0.3s; }
.rebzeile__wort { position: relative; z-index: 1; white-space: nowrap; }
.rebzeile__ranke { position: absolute; left: 50%; bottom: 0; width: 64px; height: 24px; margin-left: -32px; overflow: visible; pointer-events: none; }
.rebzeile__trieb { fill: none; stroke: var(--laub-hell); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.75s cubic-bezier(.4, 0, .2, 1); }
.rebzeile__blatt { fill: var(--laub); stroke: var(--rebe-2); stroke-width: 0.6; transform-box: fill-box; transform-origin: 50% 0; transform: scale(0) rotate(-70deg); transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1) 0s; }
.rebzeile:hover, .rebzeile:focus-visible, .rebzeile[aria-current="page"] { color: #fff; background: rgba(246, 241, 228, 0.07); }
.rebzeile:hover .rebzeile__trieb, .rebzeile:focus-visible .rebzeile__trieb, .rebzeile[aria-current="page"] .rebzeile__trieb { stroke-dashoffset: 0; }
.rebzeile:hover .rebzeile__blatt, .rebzeile:focus-visible .rebzeile__blatt, .rebzeile[aria-current="page"] .rebzeile__blatt { transform: scale(1) rotate(0); transition-delay: 0.38s; }
.rebzeile[aria-current="page"] .rebzeile__wort { color: var(--stroh); }
.rebzeile--seite { color: var(--laub-hell); font-style: italic; }
.rebzeile--seite:first-of-type { margin-left: 0; }

/* The coping of the terrace wall: chalk limestone blocks along the header. */
.hamon-kopf__mauer { height: 9px; background:
  linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px) 0 0 / 38px 9px,
  linear-gradient(180deg, var(--kreide), var(--kreide-3)); }

/* Reading progress: a tendril that grows along the wall while you read. */
.hamon-fortschritt { height: 5px; background: rgba(31, 51, 28, 0.85); }
.hamon-fortschritt i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: repeating-linear-gradient(90deg, var(--laub) 0 18px, var(--laub-hell) 18px 22px, var(--traube-hell) 22px 26px, var(--laub) 26px 34px); box-shadow: 0 0 10px rgba(157, 187, 120, 0.7); transition: transform 0.2s ease-out; }

/* ── Startseite ─────────────────────────────────────────────────────── */
.hamon-auftakt { padding: 56px 16px 40px; }
.hamon-auftakt__innen { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hamon-dachzeile, .hamon-ueber__zeile { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terra); }
.hamon-auftakt__titel { margin: 0 0 14px; font-size: clamp(38px, 5.2vw, 66px); font-weight: 500; }
.hamon-auftakt__titel em { font-style: italic; color: var(--traube); background: linear-gradient(transparent 70%, rgba(216, 180, 90, 0.45) 70%); }
.hamon-auftakt__claim { margin: 0 0 12px; line-height: 1.4; font-family: var(--titel); font-size: 22px; font-style: italic; color: var(--rebe-3); }
.hamon-auftakt__intro { margin: 0 0 26px; color: var(--tinte-2); }
.hamon-auftakt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hamon-taste { display: inline-block; padding: 13px 24px; border-radius: 999px; background: linear-gradient(180deg, var(--rebe-3), var(--rebe)); color: var(--kreide); font-weight: 700; text-decoration: none; box-shadow: 0 14px 24px -14px rgba(31, 51, 28, 0.9), inset 0 -3px 0 var(--traube); transition: transform 0.2s, box-shadow 0.2s; }
.hamon-taste:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 28px -14px rgba(31, 51, 28, 0.9), inset 0 -3px 0 var(--terra-hell); }
.hamon-taste--rahmen { background: transparent; color: var(--traube); border: 2px solid var(--traube); box-shadow: none; }
.hamon-taste--rahmen:hover { color: var(--traube-2); background: rgba(91, 42, 94, 0.08); box-shadow: none; }
.hamon-auftakt__bild { filter: drop-shadow(0 26px 34px rgba(31, 51, 28, 0.32)); }
.hamon-bild { display: block; width: 100%; height: auto; }
.hamon-bild__stock .hamon-bild__laub { transform-box: fill-box; transform-origin: 50% 100%; animation: laub-wiegen 5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.7s); }
.hamon-bild__strahlen { transform-origin: 236px 66px; animation: strahlen 40s linear infinite; }
.hamon-bild__wolke { animation: wolke 22s ease-in-out infinite alternate; }
.hamon-bild__wolke--b { animation-duration: 28s; animation-direction: alternate-reverse; }
.hamon-bild__wimpel { transform-box: fill-box; transform-origin: 0 50%; animation: wimpel 3s ease-in-out infinite; }
.hamon-bild__spirale { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ranke-wachsen 7s ease-in-out infinite; }
.hamon-bild__grossblatt { transform-box: fill-box; transform-origin: 80% 0; animation: blatt-wiegen 6s ease-in-out infinite; }
.hamon-bild__grossblatt--b { transform-origin: 0 0; animation-delay: -2s; }
.hamon-bild__traube { transform-box: fill-box; transform-origin: 50% 0; animation: traube-wiegen 5.5s ease-in-out infinite; }
@keyframes laub-wiegen { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes strahlen { to { transform: rotate(360deg); } }
@keyframes wolke { from { transform: translateX(-14px); } to { transform: translateX(18px); } }
@keyframes wimpel { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(0.9); } }
@keyframes ranke-wachsen { 0% { stroke-dashoffset: 1; } 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes blatt-wiegen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.hamon-ueber { max-width: 1240px; margin: 0 auto 26px; padding: 0 16px; text-align: center; }
.hamon-ueber h2 { margin: 0; font-size: clamp(30px, 3.6vw, 42px); }
.hamon-ueber::after { content: ""; display: block; width: 120px; height: 16px; margin: 12px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M2 8c14 0 18-6 30-6s16 12 28 12 16-12 28-12 16 6 30 6' fill='none' stroke='%23a65a3a' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='60' cy='8' r='3.4' fill='%235b2a5e'/%3E%3C/svg%3E") center / contain no-repeat; }
.hamon-ueber--dunkel h2 { color: var(--kreide); }
.hamon-ueber--dunkel .hamon-ueber__zeile { color: var(--stroh); }

/* Six vineyard plots: their grape clusters ripen when you come near. */
.hamon-lagen { padding: 36px 0 34px; }
.hamon-lagen__liste { list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hamon-lagen__liste li { display: flex; }
.hamon-lage { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 22px 22px 20px 22px; overflow: hidden; border-radius: 6px 6px 22px 22px; background: linear-gradient(180deg, #fffdf6, var(--kreide-2)); border: 1px solid var(--rand); border-top: 6px solid var(--laub); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten); transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s; }
.hamon-lage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--terra) 0 30px, var(--terra-2) 30px 31px); opacity: 0.85; }
.hamon-lage:hover { transform: translateY(-6px); color: var(--tinte); border-top-color: var(--traube); box-shadow: 0 30px 46px -26px rgba(61, 28, 64, 0.5); }
.hamon-lage__nr { font-family: var(--titel); font-style: italic; font-size: 15px; color: var(--terra); }
.hamon-lage__siegel { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--rebe-3), var(--rebe)); color: var(--kreide); box-shadow: 0 0 0 4px rgba(216, 180, 90, 0.35); }
.hamon-lage__siegel svg { width: 30px; height: 30px; }
.hamon-lage__name { font-family: var(--titel); font-size: 25px; font-weight: 500; color: var(--rebe-2); line-height: 1.2; margin-top: 4px; }
.hamon-lage__text { font-size: 16px; color: var(--tinte-2); padding-right: 40px; }
.hamon-lage__zahl { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rebe-3); }
.hamon-lage__traube { position: absolute; right: 16px; bottom: 18px; width: 42px; height: 46px; }
.beere { fill: var(--laub-hell); transition: fill 0.5s ease; transition-delay: calc(var(--i) * 45ms); }
.hamon-lage:hover .beere, .hamon-lage:focus-visible .beere { fill: var(--traube); }
.hamon-lagen__liste--flach { grid-template-columns: repeat(3, 1fr); margin-top: 26px; }
.hamon-lagen__liste--flach .hamon-lage { align-items: center; text-align: center; }

/* Article cards: harvest tags on a straw cord. */
.hamon-ernte { padding: 36px 0 56px; }
.hamon-ernte__karten { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.lese { position: relative; padding-top: 14px; }
.lese::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: var(--stroh); transform: translateX(-50%); z-index: 1; }
.lese::after { content: ""; position: absolute; top: 18px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--kreide); border: 2px solid var(--stroh); z-index: 2; }
.lese__link { display: flex; flex-direction: column; height: 100%; padding: 34px 26px 18px; border-radius: 18px; background: linear-gradient(180deg, #fffdf8, var(--kreide)); border: 1px solid var(--rand); box-shadow: var(--schatten); color: inherit; text-decoration: none; transform-origin: 50% 0; transition: transform 0.45s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.35s; }
.lese__link:hover { color: inherit; transform: rotate(-1.2deg) translateY(-3px); box-shadow: 0 32px 48px -28px rgba(31, 51, 28, 0.55); }
.lese__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lese__siegel { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--traube); color: var(--kreide); }
.lese__siegel svg { width: 24px; height: 24px; }
.lese__thema { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); }
.lese__titel { margin: 2px 0 8px; font-size: 23px; }
.lese__text { margin: 0 0 14px; font-size: 16px; color: var(--tinte-2); flex: 1; }
.lese__fuss { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--tinte-2); border-top: 1px dashed var(--kreide-3); padding-top: 10px; }
.lese__blatt svg { width: 22px; height: 22px; color: var(--kreide-3); transition: color 0.35s, transform 0.5s; }
.lese__link:hover .lese__blatt svg { color: var(--laub); transform: rotate(-20deg) scale(1.1); }

/* The press house: the dark directory of every guide. */
.hamon-kelter { position: relative; padding: 60px 0 64px; color: var(--kreide-2); background:
  radial-gradient(600px 300px at 15% 0%, rgba(138, 79, 140, 0.35), transparent 70%),
  radial-gradient(500px 300px at 90% 100%, rgba(95, 138, 67, 0.25), transparent 70%),
  linear-gradient(180deg, var(--traube-2), #24102a); }
.hamon-kelter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px) 0 0 / 46px 10px, linear-gradient(180deg, var(--kreide), var(--kreide-3)); }
.hamon-kelter__spalten { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.hamon-kelter h3 { margin: 0 0 10px; font-size: 22px; }
.hamon-kelter h3 a { display: flex; align-items: center; gap: 10px; color: var(--stroh); text-decoration: none; }
.hamon-kelter__icon { width: 30px; height: 30px; flex: none; color: var(--laub-hell); }
.hamon-kelter ol { margin: 0; padding: 0 0 0 22px; font-size: 16px; }
.hamon-kelter li { margin: 4px 0; }
.hamon-kelter li::marker { color: var(--traube-hell); font-family: var(--titel); }
.hamon-kelter li a { color: var(--kreide-2); text-decoration: none; }
.hamon-kelter li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--laub-hell); }

/* ── Themen-, Artikel- und Rechtsseiten ─────────────────────────────── */
.hamon-pfad { font-size: 15px; color: var(--tinte-2); margin-bottom: 14px; }
.hamon-pfad a { color: var(--rebe-3); }
.hamon-thema { padding: 48px 16px 10px; text-align: center; }
.hamon-thema__innen { max-width: 820px; margin: 0 auto; }
.hamon-thema__siegel { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--traube); }
.hamon-thema__siegel svg { width: 60px; height: 60px; }
.hamon-thema__nr { font-family: var(--titel); font-style: italic; color: var(--terra); }
.hamon-thema h1 { margin: 8px 0 12px; font-size: clamp(36px, 5vw, 56px); }
.hamon-thema p { margin: 0 0 8px; color: var(--tinte-2); }
.hamon-thema__zahl { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; color: var(--rebe-3) !important; }

.hamon-wissen { max-width: 1240px; margin: 0 auto; padding: 44px 16px 30px; }
.hamon-wissen__kopf { max-width: 860px; margin-bottom: 30px; }
.hamon-wissen__titel { margin: 0 0 14px; font-size: clamp(34px, 4.6vw, 54px); }
.hamon-wissen__intro { margin: 0; line-height: 1.45; font-size: 21px; font-family: var(--titel); font-style: italic; color: var(--rebe-3); }
.hamon-wissen__koerper { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 48px; align-items: start; }
.hamon-wissen__koerper--eins { grid-template-columns: minmax(0, 820px); }
.hamon-tafel { position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow: auto; padding: 22px 20px; border-radius: 6px 6px 20px 20px; background: linear-gradient(180deg, #fffdf6, var(--kreide-2)); border: 1px solid var(--rand); border-top: 6px solid var(--traube); box-shadow: var(--schatten); font-size: 15.5px; }
.hamon-tafel__titel { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--titel); font-size: 19px; color: var(--rebe-2); }
.hamon-tafel__titel--b { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--kreide-3); }
.hamon-tafel__icon { width: 24px; height: 24px; color: var(--laub); }
.hamon-tafel dl { margin: 0; }
.hamon-tafel dl div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rand); }
.hamon-tafel dt { color: var(--tinte-2); }
.hamon-tafel dd { margin: 0; text-align: right; font-weight: 500; }
.hamon-tafel__inhalt { margin: 0; padding-left: 20px; }
.hamon-tafel__inhalt li { margin: 5px 0; line-height: 1.35; }
.hamon-tafel__inhalt li::marker { color: var(--terra); }
.hamon-tafel__inhalt a { color: var(--tinte); text-decoration: none; }
.hamon-tafel__inhalt a:hover, .hamon-tafel__inhalt a.an { color: var(--traube); text-decoration: underline; }
.hamon-tafel__inhalt a.an { font-weight: 700; }
.hamon-tafel__kalender { display: block; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--rebe); color: var(--kreide); text-decoration: none; font-size: 15px; }
.hamon-tafel__kalender span { display: block; color: var(--stroh); font-weight: 700; }
.hamon-tafel__kalender:hover { color: #fff; background: var(--rebe-3); }

.hamon-wissen__text { min-width: 0; }
.hamon-wissen__text > :first-child { margin-top: 0; }
.hamon-wissen__text h2 { margin: 46px 0 14px; font-size: clamp(27px, 3vw, 34px); padding-bottom: 8px; border-bottom: 2px solid var(--kreide-3); scroll-margin-top: 160px; }
.hamon-wissen__text h3 { margin: 30px 0 8px; font-size: 23px; color: var(--traube); scroll-margin-top: 160px; }
.hamon-wissen__text h4 { margin: 22px 0 6px; font-size: 19px; }
.hamon-wissen__text p { margin: 0 0 16px; }
.hamon-wissen__text ul, .hamon-wissen__text ol { margin: 0 0 18px; padding-left: 26px; }
.hamon-wissen__text li { margin: 5px 0; }
.hamon-wissen__text ul li::marker { color: var(--laub); }
.hamon-wissen__text ol li::marker { color: var(--terra); font-weight: 700; }
.hamon-wissen__text strong { color: var(--rebe-2); }
.hamon-wissen__text blockquote { margin: 0 0 26px; padding: 18px 22px 6px 24px; border-radius: 4px 18px 18px 4px; border-left: 6px solid var(--laub); background: linear-gradient(90deg, rgba(95, 138, 67, 0.12), rgba(95, 138, 67, 0.04)); }
.hamon-wissen__text blockquote p { margin-bottom: 12px; }
.hamon-wissen__text hr { border: 0; height: 16px; margin: 30px 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M2 8c14 0 18-6 30-6s16 12 28 12 16-12 28-12 16 6 30 6' fill='none' stroke='%235f8a43' stroke-width='1.6'/%3E%3C/svg%3E") center / 120px 16px no-repeat; }
.hamon-wissen__text code { font-size: 0.9em; padding: 1px 6px; border-radius: 4px; background: var(--kreide-2); }
.table-wrap { overflow-x: auto; margin: 0 0 24px; border-radius: 14px; border: 1px solid var(--rand); box-shadow: 0 14px 30px -24px rgba(31, 51, 28, 0.6); background: #fffdf8; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.table-wrap th { text-align: left; padding: 11px 14px; background: var(--rebe); color: var(--kreide); font-weight: 700; white-space: nowrap; }
.table-wrap td { padding: 10px 14px; border-top: 1px solid var(--rand); vertical-align: top; }
.table-wrap tbody tr:nth-child(even) td { background: rgba(236, 227, 205, 0.45); }
.hamon-hinweis { margin-top: 36px; padding: 16px 20px; border-radius: 14px; background: var(--kreide-2); border: 1px dashed var(--terra-hell); font-size: 16px; color: var(--tinte-2); }
.hamon-hinweis p { margin: 0; }
.hamon-ernte--weiter { border-top: 1px solid var(--rand); padding-top: 44px; }
.hamon-ernte--thema { padding-top: 20px; }

.hamon-leer { max-width: 1000px; margin: 0 auto; padding: 60px 16px 70px; text-align: center; }
.hamon-leer__code { margin: 0; font-family: var(--titel); font-size: 110px; line-height: 1; color: var(--traube); }
.hamon-leer h1 { margin: 6px 0 12px; font-size: clamp(30px, 4vw, 44px); }

/* ── Fuß: die unterste Terrasse ─────────────────────────────────────── */
.hamon-fuss { position: relative; margin-top: 0; color: var(--kreide-2); background: linear-gradient(180deg, var(--rebe), var(--rebe-2)); }
.hamon-fuss__terrassen { display: flex; flex-direction: column; }
.hamon-fuss__terrassen i { display: block; height: 8px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0 0 / 40px 8px, linear-gradient(180deg, var(--kreide), var(--kreide-3)); }
.hamon-fuss__terrassen i:nth-child(2) { height: 14px; background: var(--terra-2); }
.hamon-fuss__terrassen i:nth-child(3) { height: 6px; background: var(--laub); }
.hamon-fuss__innen { max-width: 1240px; margin: 0 auto; padding: 44px 16px 18px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.hamon-fuss__innen p { margin: 0 0 10px; font-size: 16px; }
.hamon-fuss__name { font-family: var(--titel); font-weight: 700; font-size: 30px; letter-spacing: 0.2em; color: var(--kreide) !important; margin: 0 !important; }
.hamon-fuss__lang { font-style: italic; color: var(--laub-hell); }
.hamon-fuss__titel { font-family: var(--titel); font-size: 19px !important; color: var(--stroh); }
.hamon-fuss ul { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.hamon-fuss li { margin: 5px 0; }
.hamon-fuss a { color: var(--kreide-2); text-decoration: none; }
.hamon-fuss a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--laub-hell); }
.hamon-fuss__hinweis { max-width: 1240px; margin: 0 auto; padding: 16px 16px 30px; border-top: 1px solid rgba(246, 241, 228, 0.15); font-size: 14px; color: rgba(236, 227, 205, 0.75); }
.hamon-fuss__hinweis a { text-decoration: underline; }

/* Reveal on scroll (palace.js adds the classes). */
.hamon-erscheint { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hamon-erscheint.da { opacity: 1; transform: none; }

/* ── Kleine Bildschirme ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rebzeile { padding: 6px 8px 20px; font-size: 15px; }
  .hamon-lagen__liste, .hamon-ernte__karten, .hamon-kelter__spalten { grid-template-columns: repeat(2, 1fr); }
  .hamon-wissen__koerper { grid-template-columns: 250px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  body.hamon { font-size: 18px; }
  .hamon-knopf { display: inline-flex; }
  .hamon-menue { display: none; flex-direction: column; padding: 4px 16px 14px; }
  .hamon-kopf.offen .hamon-menue { display: flex; max-height: calc(100vh - 140px); overflow-y: auto; }
  .rebzeile { align-items: flex-start; padding: 8px 4px 16px; border-bottom: 1px solid rgba(246, 241, 228, 0.1); }
  .rebzeile__ranke { left: 4px; margin-left: 0; }
  .hamon-auftakt { padding-top: 34px; }
  .hamon-auftakt__innen { grid-template-columns: 1fr; gap: 30px; }
  .hamon-wissen__koerper { grid-template-columns: 1fr; }
  .hamon-tafel { position: static; max-height: none; }
  .hamon-fuss__innen { grid-template-columns: 1fr 1fr; }
  .hamon-fuss__innen > section { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hamon-marke__bild { width: 44px; height: 44px; }
  .hamon-marke__name { font-size: 23px; }
  .hamon-marke__lang { font-size: 12px; }
  .hamon-wm__text { font-size: 13.5px; }
  .hamon-lagen__liste, .hamon-lagen__liste--flach, .hamon-ernte__karten, .hamon-kelter__spalten { grid-template-columns: 1fr; }
  .hamon-fuss__innen { grid-template-columns: 1fr; gap: 24px; }
  .hamon-wissen { padding-top: 30px; }
  .table-wrap table { font-size: 15px; }
  .table-wrap th { white-space: normal; }
}
@media (max-width: 380px) {
  .hamon-marke__lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hamon-bild__spirale { stroke-dashoffset: 0; }
  .hamon-erscheint { opacity: 1; transform: none; }
}