/* Hof Elmsacker. Seitenstil. Engine-Klassen bleiben unangetastet; hier stehen
   Marke, Kartenpapier, Schriftfeld, Etiketten und die Kiste. */
:root {
  --sc-canvas:     #1C1611;
  --sc-surface:    #2A211A;
  --sc-ink:        #F1EDE2;
  --sc-ink-soft:   #CFC6B4;
  --sc-accent:     #E8782F;
  --sc-accent-ink: #1C1611;
  --sc-font-display: "Epilogue", system-ui, sans-serif;
  --sc-font-text:    "Libre Franklin", system-ui, sans-serif;
  --sc-font-mono:    "Libre Franklin", system-ui, sans-serif;
  --sc-shadow-color: 25 30% 4%;
  --papier:     #ECEADF;
  --papier-2:   #E2DFD1;
  --tinte:      #241C15;
  --tinte-weich:#544739;
  --linie:      #8F8270;
  --gruen:      #67A043;
  --holz:       #B98A55;
  --rand: 0;          /* ein Radius-System: alles eckig wie auf einer Karte */
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #4a3e32 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 0; }
button { cursor: pointer; }

/* ---------- Der Acker (fest, hinter allem) ---------- */
.acker { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.acker__flaeche { width: 100%; height: 100%; }
main { position: relative; z-index: 2; }
.sc-grain { z-index: 1; opacity: .05; }

/* ---------- Schrift ---------- */
.anzeige {
  font-family: var(--sc-font-display); font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.02; margin: 0;
  text-wrap: balance; color: var(--tinte);
}
.anzeige--xl { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.5rem); line-height: .98; }
.anzeige--lg { font-size: clamp(1.9rem, 1.2rem + 1.9vw, 3rem); }
.anzeige--md { font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem); }
.lauf { font-size: var(--sc-t-base); line-height: 1.6; color: var(--tinte-weich); margin: 0; text-wrap: pretty; max-width: 60ch; }
.lauf--fest { color: var(--tinte); font-weight: 500; }
.vorzeile {
  margin: 0; font: italic 600 var(--sc-t-sm)/1.3 var(--sc-font-text);
  color: #8A4A1C; letter-spacing: .01em;
}
@media (max-width: 700px) {
  .anzeige--xl { font-size: clamp(2.1rem, 1.3rem + 4.2vw, 2.7rem); }
  .anzeige--lg { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2rem); }
  .anzeige--md { font-size: clamp(1.45rem, 1.1rem + 2vw, 1.8rem); }
  .lauf { font-size: .98rem; line-height: 1.55; }
}

/* ---------- Kartenpapier: jede Tafel ist eine Kartusche ---------- */
.tafel {
  position: relative; background: var(--papier); color: var(--tinte);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.1rem);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 6px 10px 0 -2px rgba(12,8,5,.35), 0 18px 40px -18px rgba(12,8,5,.7);
  isolation: isolate;
}
/* doppelte Randlinie und ein feines Kartengitter im Papier */
.tafel::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: -1;
  border: 1px solid color-mix(in oklab, var(--linie) 70%, transparent);
  background-image:
    linear-gradient(color-mix(in oklab, var(--linie) 13%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--linie) 13%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 75%);
}
.tafel > * + * { margin-top: .9rem; }
.tafel .sc-stack > * + * { margin-top: .9rem; }
.tafel .sc-stack > h2 { margin-top: .5rem; }

/* ---------- Bühnen (Pins sind durchsichtig, darunter liegt der Acker) ---------- */
.tafel--hero {
  position: absolute; left: var(--sc-gutter); top: 50%; transform: translateY(-50%);
  width: min(36rem, 40vw);
}
.tafel--hero .lauf { font-size: var(--sc-t-lg); line-height: 1.5; }
.tafel--hero .knopf { margin-top: 1.4rem; }
.tafel--klein {
  position: absolute; left: var(--sc-gutter); top: 50%; transform: translateY(-50%);
  width: min(26rem, 30vw);
}

/* Fließ-Akte: Tafel in der linken Spalte, der Acker steht rechts */
.akt-fluss { min-height: 165svh; padding: 30svh 0 20svh; }
.tafel--fluss { margin-left: var(--sc-gutter); width: min(28rem, 29vw); }
.lupe {
  margin: -5.5rem 0 1.2rem auto; width: 11rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 5px var(--papier), 0 0 0 6px var(--linie), 8px 14px 24px -8px rgba(12,8,5,.6);
}
.lupe img { width: 100%; height: 100%; object-fit: cover; }
.lupe--ernte { width: 13rem; margin-top: -7rem; }
.bild-quer { margin: 0; }
.bild-quer img { width: 100%; height: 9.5rem; object-fit: cover; object-position: 50% 40%; }
.bild-quer figcaption { margin-top: .5rem; font: italic 500 var(--sc-t-sm)/1.4 var(--sc-font-text); color: var(--tinte-weich); }

/* ---------- Wachsen: Schiene mit Beet-Etiketten ---------- */
.buehne--schiene { display: flex; align-items: flex-end; }
.schiene {
  display: flex; align-items: flex-end; gap: 1.1rem;
  padding: 0 var(--sc-gutter) clamp(1.5rem, 5vh, 3.5rem);
  width: max-content;
}
.schiene__kopf, .schiene__schluss { flex: 0 0 auto; width: min(24rem, 78vw); }
.schiene__kopf { background: var(--papier); padding: 1.5rem 1.6rem; box-shadow: 6px 10px 0 -2px rgba(12,8,5,.35); }
.schiene__kopf > * + * { margin-top: .7rem; }
.schiene__schluss { background: var(--papier-2); padding: 1.3rem 1.5rem; width: min(20rem, 70vw); }
.schiene__schluss .lauf { color: var(--tinte); }
.etikett {
  flex: 0 0 auto; width: 15.5rem; position: relative;
  background: var(--papier); color: var(--tinte); padding: 1.2rem 1.15rem 1rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--linie) 35%, transparent);
}
.etikett:nth-of-type(odd) { transform: rotate(-1.2deg); }
.etikett:nth-of-type(even) { transform: rotate(.8deg) translateY(-10px); }
.etikett::after { /* Loch für den Draht */
  content: ""; position: absolute; top: 12px; right: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px var(--linie);
}
.etikett h3 { margin: 0; font: 700 1.12rem/1.2 var(--sc-font-display); letter-spacing: -.01em; padding-right: 1.4rem; }
.etikett h3 b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .35rem;
  background: var(--tinte); color: var(--papier); font: 700 .85rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; }
.etikett p { margin: .6rem 0 .8rem; font-size: .94rem; line-height: 1.5; color: var(--tinte-weich); }
.jahr { width: 100%; height: auto; }
.jahr text { font: 600 7.5px var(--sc-font-text); fill: var(--tinte-weich); }

/* ---------- Heute (Höhepunkt) ---------- */
.heute__text { position: absolute; left: var(--sc-gutter); top: clamp(4rem, 14vh, 9rem); width: min(27rem, 29vw); }
.heute__text > .tafel { position: absolute; inset: 0 0 auto 0; }
.kiste-klein {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2rem, 9vh, 5rem);
  width: min(20rem, 26vw); aspect-ratio: 5 / 3.4;
  display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: 6px; padding: 12px;
  background: #3a2a1b;
  box-shadow: 0 0 0 9px var(--holz), 0 0 0 10px #7d5a35, 10px 16px 0 2px rgba(12,8,5,.4);
  opacity: 0; transition: opacity 400ms var(--sc-ease-out);
}
.kiste-klein.ist-da { opacity: 1; }
.kiste-klein > i { background: #2d2116; display: block; }
.schilder, .flieger { position: absolute; inset: 0; pointer-events: none; }
.schild {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  background: var(--papier); color: var(--tinte); padding: .38rem .6rem;
  font: 600 .86rem/1.2 var(--sc-font-text);
  box-shadow: 0 0 0 1.5px var(--sc-accent), 4px 6px 0 -1px rgba(12,8,5,.4);
  opacity: 0; will-change: transform, opacity;
}
.schild em { font-style: italic; font-weight: 500; color: var(--tinte-weich); }
.flug { position: absolute; left: 0; top: 0; width: 46px; height: 46px; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(3px 5px 2px rgba(12,8,5,.45)); }

/* ---------- Schluss: die Kiste ---------- */
.schluss {
  position: relative; background: var(--sc-canvas); color: var(--sc-ink);
  padding: clamp(5rem, 12vh, 9rem) 0 2.5rem; min-height: 100svh;
  padding-bottom: 7.5rem;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 -30px 60px -10px rgba(12,8,5,.85);
}
.schluss::before { /* ein Hauch Ackerkrume im dunklen Grund */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(120,95,70,.18) 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 50%, #000, transparent);
          mask-image: radial-gradient(70% 60% at 30% 50%, #000, transparent);
}
.schluss__raster { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.kiste { margin: 0; }
.kiste__bild { width: 100%; height: auto; filter: drop-shadow(14px 22px 0 rgba(8,5,3,.45)); }
.packzettel {
  position: relative; background: var(--papier); color: var(--tinte);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); transform: rotate(1.1deg);
  box-shadow: 8px 12px 0 -2px rgba(8,5,3,.45);
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in oklab, var(--linie) 22%, transparent) 31px 32px);
}
.packzettel .anzeige { color: var(--tinte); }
.packzettel__datum { margin: .5rem 0 0; font: italic 500 var(--sc-t-sm)/1.4 var(--sc-font-text); color: var(--tinte-weich); }
.packzettel__liste { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: p; }
.packzettel__liste li {
  counter-increment: p; display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .4rem;
  padding: .42rem 0; border-bottom: 1px dashed color-mix(in oklab, var(--linie) 60%, transparent);
}
.packzettel__liste li::before { content: counter(p); grid-row: span 2; font: 700 .9rem/1.5 var(--sc-font-text); color: #8A4A1C; font-variant-numeric: tabular-nums; }
.packzettel__liste b { font: 700 1rem/1.4 var(--sc-font-text); }
.packzettel__liste span { font-size: .9rem; color: var(--tinte-weich); font-variant-numeric: tabular-nums; }
.packzettel__bald { margin: 1rem 0 0; font-size: .95rem; color: var(--tinte); }
.packzettel .knopf { margin-top: 1.4rem; }
.packzettel__hinweis { margin: .7rem 0 0; font-size: .86rem; color: var(--tinte-weich); }
.fuss {
  position: relative; display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap;
  margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.2rem; border-top: 1px solid rgba(241,237,226,.16);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5;
}
.fuss span:last-child { max-width: 70ch; }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: 0 1.5rem; white-space: nowrap; text-decoration: none;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: .01em;
  color: var(--tinte); background: transparent; border: 2px solid var(--tinte);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.knopf::after { content: "→"; font-weight: 600; }
.knopf:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--tinte); color: var(--papier); }
}
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate; border: 0;
  color: var(--sc-accent-ink); background: var(--sc-accent);
}
.knopf--voll::before { /* Saatraster im Knopf, ein Lichtstreif zieht drüber */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(28,22,17,.22) 1px, transparent 1.3px); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 45%, #000 55%, transparent 70%);
          mask-image: linear-gradient(100deg, transparent 30%, #000 45%, #000 55%, transparent 70%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: streif 4.6s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 60%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (hover: hover) and (pointer: fine) {
  .knopf--voll:hover { background: #F08A45; color: var(--sc-accent-ink); }
}
.ist-bestellt .knopf--voll { background: var(--gruen); }

/* ---------- Schriftfeld (Navigation) ---------- */
.schriftfeld {
  position: fixed; right: max(16px, calc(var(--sc-gutter) * .45)); bottom: max(16px, calc(var(--sc-gutter) * .35));
  z-index: var(--sc-z-chrome); width: 17.5rem;
  background: var(--papier); color: var(--tinte);
  border: 1.5px solid var(--tinte); box-shadow: 6px 8px 0 -1px rgba(12,8,5,.45);
  font-size: .86rem;
}
.schriftfeld > * { border-top: 1px solid var(--linie); }
.schriftfeld > :first-child { border-top: 0; }
.schriftfeld__kopf { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem .7rem .45rem; }
.wortmarke { font: 800 1.12rem/1 var(--sc-font-display); letter-spacing: -.02em; color: var(--tinte); text-decoration: none; }
.wortmarke--fuss { color: var(--sc-ink); }
.schriftfeld__art { font: italic 500 .8rem/1 var(--sc-font-text); color: var(--tinte-weich); }
.schriftfeld__zeile { display: grid; grid-template-columns: 4.6rem 1fr; }
.schriftfeld__feld { padding: .45rem .7rem; border-right: 1px solid var(--linie); color: var(--tinte-weich); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.schriftfeld__stand { padding: .45rem .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.schriftfeld__auf { display: none; }
.schriftfeld__blaetter { list-style: none; margin: 0; padding: .45rem .5rem .5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 .4rem; }
.schriftfeld__blaetter a {
  display: block; padding: .26rem .2rem; color: var(--tinte); text-decoration: none; font-weight: 500;
  text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px;
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .schriftfeld__blaetter a:hover { text-decoration-color: var(--linie); } }
.schriftfeld__blaetter a.ist-hier { font-weight: 700; text-decoration-color: var(--sc-accent); }
.schriftfeld.ist-klein .schriftfeld__blaetter, .schriftfeld.ist-klein .schriftfeld__hinweis { display: none; }
.schriftfeld__hinweis { margin: 0; padding: .4rem .7rem; font: italic 500 .76rem/1.3 var(--sc-font-text); color: var(--tinte-weich); }

/* ---------- Handy ---------- */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .schriftfeld {
    left: 10px; right: 10px; top: 10px; bottom: auto; width: auto;
    display: grid; grid-template-columns: 1fr auto auto; align-items: stretch;
  }
  .schriftfeld > * { border-top: 0; }
  .schriftfeld__kopf { padding: .5rem .6rem; }
  .schriftfeld__art, .schriftfeld__hinweis, .schriftfeld__feld { display: none; }
  .schriftfeld__zeile { display: block; border-left: 1px solid var(--linie); }
  .schriftfeld__stand { display: block; padding: .62rem .55rem; font-size: .8rem; }
  .schriftfeld__auf {
    display: block; border: 0; border-left: 1px solid var(--linie); background: transparent;
    padding: 0 .7rem; font: 700 .8rem/1 var(--sc-font-text); color: var(--tinte); min-height: 40px;
  }
  .schriftfeld__auf::after { content: " ▾"; }
  .schriftfeld__blaetter {
    display: none; position: absolute; top: calc(100% + 1.5px); left: -1.5px; right: -1.5px;
    background: var(--papier); border: 1.5px solid var(--tinte); grid-template-columns: 1fr 1fr; padding: .5rem;
  }
  .schriftfeld.ist-offen .schriftfeld__blaetter { display: grid; }
  .schriftfeld__blaetter a { padding: .55rem .3rem; }

  .tafel--hero, .tafel--klein, .heute__text {
    left: 12px; right: 12px; width: auto; top: auto; bottom: 14px; transform: none;
  }
  .tafel--hero .lauf { font-size: 1rem; }
  .tafel--hero .knopf { margin-top: .9rem; }
  .heute__text { top: auto; bottom: 14px; height: 13.5rem; }
  .heute__text > .tafel { inset: auto 0 0 0; }
  .akt-fluss { min-height: 150svh; padding: 62svh 0 18svh; }
  .tafel--fluss { margin: 0 12px; width: auto; }
  .lupe { width: 7.5rem; margin-top: -4rem; }
  .lupe--ernte { width: 8.5rem; margin-top: -4.5rem; }
  .bild-quer img { height: 7rem; }
  .etikett { width: 13.2rem; }
  .schiene { gap: .8rem; padding-bottom: 14px; padding-inline: 12px; }
  .schiene__kopf { width: 15rem; padding: 1.1rem 1.15rem; }
  .kiste-klein { left: auto; right: 12px; bottom: auto; top: var(--kiste-top, 50%); width: 8.5rem; padding: 7px; gap: 4px;
    box-shadow: 0 0 0 6px var(--holz), 0 0 0 7px #7d5a35, 6px 10px 0 1px rgba(12,8,5,.4); }
  .schild { font-size: .74rem; padding: .28rem .45rem; }
  .flug { width: 30px; height: 30px; }
  .schluss { padding-top: 5.5rem; }
  .schluss__raster { grid-template-columns: 1fr; }
  .packzettel { transform: none; }
}
@media (max-width: 380px) {
  .tafel { padding: 1.05rem 1.1rem; }
  .tafel--hero .lauf { font-size: .94rem; line-height: 1.45; }
  .heute__text { height: 12.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .knopf--voll::before { animation: none; }
  .etikett:nth-of-type(n) { transform: none; }
}