@font-face { font-family: "Alegreya"; src: url(/assets/fonts/alegreya-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url(/assets/fonts/alegreya-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(/assets/fonts/caveat-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --grund: #F3EBDD; --flaeche: #FBF7EF; --text: #3E3326; --leise: #5C4D36;
  --feldgruen: #6E7F3A; --kuerbis: #C2662D; --weizen: #D9B44A;
  --tafel: #2F3A2E; --kreide: #F1EEE4; --holz: #A57E52; --holz-dunkel: #7E5D3A; --packpapier: #D9C3A0;
  --akzent: #55652A; --akzent-text: #FBF7EF; --linie: #D8C9AE; --fehler: #A23B2E; --fokus: var(--akzent);
  --schrift-titel: "Alegreya", Georgia, serif; --schrift-text: "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --titel-gewicht: 500; --rundung: 4px; --rundung-fenster: 6px; --groesse: 19px;
}
.vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.ho-huelle { width: min(1180px, calc(100% - 2 * var(--rand))); margin-inline: auto; }

.logo-hang, .logo-furche { fill: none; stroke: #A9BD6A; stroke-width: 3; stroke-linecap: round; }
.logo-furche { stroke-width: 2; }
.logo-sonne, .logo-strahl { fill: none; stroke: #E8955A; stroke-width: 3; stroke-linecap: round; }
.logo-wort { fill: var(--kreide); font: 500 26px var(--schrift-titel); letter-spacing: .04em; }

/* Kopfleiste: Kreidetafel links, Etiketten an der Schnur rechts */
.ho-leiste { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; padding-block: 24px 8px; }
.ho-tafel {
  display: flex; align-items: center; gap: 26px; padding: 16px 26px 16px 20px;
  background: var(--tafel); color: var(--kreide);
  border: 10px solid var(--holz); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--holz-dunkel), 0 10px 24px #3E33262E;
}
.ho-logo { flex: none; display: block; line-height: 0; }
.ho-logo svg { width: auto; height: 74px; overflow: visible; }
.ho-status { display: grid; gap: 0; font: 500 22px/1.5 var(--hand); }
.ho-status p { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ho-lampe { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--kreide); }
[data-zustand="offen"] .ho-lampe { background: #B9D27A; border-color: #B9D27A; }

.ho-schnur { position: relative; display: flex; gap: 14px; margin-left: auto; padding: 18px 8px 10px; }
.ho-schnur-linie { position: absolute; left: -12px; right: -12px; top: 0; width: calc(100% + 24px); height: 40px; pointer-events: none; }
.ho-schnur-linie path { fill: none; stroke: #8E7756; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ho-schnur a {
  position: relative; display: block; padding: 6px 16px 8px 24px; transform-origin: 50% -14px;
  background: #FFFDF6; border: 1px solid #CDB894; border-radius: 3px 12px 12px 3px; box-shadow: 0 3px 0 #3E33260F;
  font: 500 22px/1.5 var(--hand); text-decoration: none; white-space: nowrap;
}
.ho-schnur a::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%; border: 1.5px solid #8E7756; }
.ho-schnur a::after { content: ""; position: absolute; left: 50%; top: -18px; width: 1px; height: 18px; background: #8E7756; }
.ho-schnur a:nth-child(2) { rotate: -2deg; margin-top: 8px; }
.ho-schnur a:nth-child(3) { rotate: 1.5deg; margin-top: 14px; }
.ho-schnur a:nth-child(4) { rotate: -1deg; margin-top: 14px; }
.ho-schnur a:nth-child(5) { rotate: 2deg; margin-top: 8px; }
.ho-schnur a:hover { animation: ho-pendeln .7s ease-out; text-decoration: underline; text-underline-offset: 4px; }
@keyframes ho-pendeln { 0% { transform: rotate(0); } 30% { transform: rotate(3deg); } 65% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }

/* Kopf: das gezeichnete Regal */
.ho-kopf { padding-block: 28px 72px; }
.ho-kopf h1 { font-size: clamp(46px, 5.6vw, 84px); line-height: 1.02; }
.ho-kopf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; align-items: end; }
.ho-gestell {
  position: relative; margin-top: 30px;
  border: 16px solid var(--holz); border-top-width: 22px; border-bottom-width: 26px;
  border-radius: 4px 4px 2px 2px;
  background: repeating-linear-gradient(90deg, #EFE3CC 0 118px, #E6D7BC 118px 120px);
  box-shadow: inset 0 0 0 2px var(--holz-dunkel), 0 24px 50px #3E33261F;
}
/* Das Schild hängt an zwei Schnüren über dem Regal und verdeckt nichts davon */
.ho-schild {
  position: relative; margin-bottom: 26px;
  display: grid; gap: 14px; justify-items: start; padding: 22px 22px 22px;
  background: #FBF4E3; border: 2px solid var(--holz-dunkel); border-radius: 3px;
}
.ho-schild::before, .ho-schild::after {
  content: ""; position: absolute; bottom: -58px; width: 3px; height: 56px; background: var(--holz-dunkel);
}
.ho-schild::before { left: 32px; } .ho-schild::after { right: 32px; }
.ho-satz { font-size: 18px; line-height: 1.5; color: var(--text); }
.ho-gestell-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 32px; padding: 26px 28px 0; }
.ho-gestell-kopf h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; }
.ho-monate { display: flex; align-items: center; gap: 6px; }
.ho-monat-leiste { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; flex: 1; min-width: 0; }
.ho-monat-leiste button, .ho-pfeil {
  min-height: 44px; padding: 4px 0; border: 1px solid #CDB894; border-radius: 3px; background: #FBF7EFCC;
  font: 500 17px/1.5 var(--schrift-titel); color: var(--text);
}
.ho-pfeil { flex: none; width: 44px; font-size: 24px; }
.ho-monat-leiste button[aria-pressed="true"] { background: var(--tafel); border-color: var(--tafel); color: var(--kreide); }

.ho-regal { padding: 30px 28px 6px; }
.ho-brett {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: 0;
}
.ho-immer { grid-column: span var(--rest); align-content: center; }
.ho-immer span {
  justify-self: center; padding: 10px 26px 12px; rotate: -2deg;
  background: var(--tafel); color: var(--kreide); border: 5px solid var(--holz); border-radius: 3px;
  font: 500 30px/1.5 var(--hand); white-space: nowrap;
}
.ho-brett + .ho-brett { margin-top: 26px; }
.ho-brett li {
  display: grid; justify-items: center; align-content: end; gap: 14px; min-width: 0; padding: 0 6px 12px;
  border-bottom: 14px solid var(--holz); box-shadow: 0 6px 0 var(--holz-dunkel);
  position: relative;
}
.ho-frucht { width: 92px; height: 92px; }
.ho-etikett {
  position: relative;
  display: grid; justify-items: center; max-width: 96%; padding: 2px 12px 4px; transform-origin: 50% -12px;
  background: #FFFDF6; border: 1px solid #D6C6A6; border-radius: 3px; box-shadow: 0 2px 0 #0000000F;
  font: 500 22px/1.5 var(--hand); text-align: center;
}
.ho-etikett::before { content: ""; position: absolute; top: -12px; left: 50%; width: 1px; height: 12px; background: #8E7756; }
.ho-etikett .ho-name { line-height: 1.3; padding-block: 2px; hyphens: manual; }
.ho-etikett small { font: 600 13px/1.5 var(--schrift-text); color: #8A3F14; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ho-brett + .ho-brett { margin-top: 34px; }
.wechsel .ho-etikett { animation: ho-eindrehen .4s ease-out; }
.wechsel .ho-frucht { animation: ho-ueberblenden .35s ease-out; }
@keyframes ho-eindrehen { 0% { transform: rotate(4deg); } 60% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
@keyframes ho-ueberblenden { from { opacity: 0; } }
.ho-kennzeichnung { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--leise); }

.ho-frucht { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke: #4A3A28; }
.erde { fill: #C49A6C; } .hell { fill: #EAD9B5; } .gold { fill: #E2B85A; }
.bete { fill: #8C2F4C; } .apfel { fill: #C8443A; } .kuerbis { fill: #D9792F; }
.gruen { fill: #8BA34A; } .hellgruen { fill: #B9CB7B; } .dunkelgruen { fill: #55702F; }
.kirsche { fill: #A1222E; } .pflaume { fill: #4E3A6B; } .ei { fill: #F6EEDC; }
.linie, .blatt, .bohne, .nudel { fill: none; }
.blatt { stroke: #5C7A2E; } .bohne { stroke: #6E8F34; stroke-width: 7; } .nudel { stroke: #D6A94A; stroke-width: 4; }
.punkt { stroke-width: 3; } .hellpunkt { stroke: #F3E3B0; }

section h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.05; }

/* So kaufen Sie: gezeichneter Lageplan */
.ho-kaufen { padding-block: 96px; background: var(--flaeche); border-top: 1px solid var(--linie); }
.ho-kaufen-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ho-plan { width: 100%; height: auto; overflow: visible; }
.ho-strich, .ho-strich * { fill: none; stroke: #3E3326; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ho-dach { fill: #C8643A33 !important; }
.ho-wand { fill: #F3EBDD !important; }
.ho-tuer, .ho-innen { fill: #E2D2B2 !important; }
.ho-kasse { fill: #6E7F3A !important; }
.ho-parken { fill: #E7DCC6 !important; stroke-dasharray: 6 5; }
.ho-zaun { fill: none; stroke: #A57E52; stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.ho-weg { fill: none; stroke: var(--kuerbis); stroke-width: 2.4; stroke-dasharray: 7 7; stroke-linecap: round; }
.ho-pfeil-plan { fill: none; stroke: #3E3326; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ho-plan-text text { fill: #3E3326; font: 500 24px var(--hand); }
.ho-kaufen-text { display: grid; gap: 8px; }
.ho-wege { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; counter-reset: weg; }
.ho-wege li { position: relative; padding: 18px 0 18px 56px; border-top: 1px dashed #B9A584; counter-increment: weg; }
.ho-wege li::before {
  content: counter(weg); position: absolute; left: 0; top: 18px; display: grid; place-items: center;
  width: 38px; height: 38px; border: 2px solid var(--kuerbis); border-radius: 50%;
  font: 500 24px/1 var(--hand); color: #8A3F14;
}
.ho-wege h3 { font-size: 26px; line-height: 1.25; margin-bottom: 4px; }
.ho-wege p { color: var(--leise); }
.ho-wege .ho-kennzeichnung { margin-top: 8px; }

/* Unser Hof: Hofalbum auf Packpapier */
.ho-hof { padding-block: 104px; background: var(--packpapier); }
.ho-hof-raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; }
.ho-album { position: relative; min-height: 540px; }
.ho-klebe { position: absolute; transition: opacity .5s ease-out, rotate .5s cubic-bezier(.2, .7, .3, 1), translate .5s cubic-bezier(.2, .7, .3, 1); }
.ho-k1 { left: 0; top: 30px; width: 74%; rotate: -3deg; }
.ho-k2 { right: 0; top: 140px; width: 40%; rotate: 2deg; z-index: 1; }
.sehen-bereit .ho-k1:not([data-gesehen]) { opacity: 0; rotate: 3deg; translate: 0 -12px; }
.sehen-bereit .ho-k2:not([data-gesehen]) { opacity: 0; rotate: 8deg; translate: 0 -12px; }
.ho-polaroid { position: relative; overflow: visible; padding: 10px 10px 40px; background: #FFFFFF; box-shadow: 0 14px 30px #3E33262E; }
.ho-polaroid img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ho-k2 .ho-polaroid img { aspect-ratio: 3 / 4; }
.ho-polaroid::before, .ho-polaroid::after {
  content: ""; position: absolute; width: 84px; height: 26px; background: #F4ECD6CC; box-shadow: 0 1px 2px #3E332622;
}
.ho-polaroid::before { left: -18px; top: 6px; rotate: -38deg; }
.ho-polaroid::after { right: -18px; top: 6px; rotate: 38deg; }
.ho-hof-text { display: grid; gap: 22px; }
.ho-hof-text p { max-width: 36ch; font-size: 21px; color: #3E3326; }

/* Abschluss: die Hütte und daneben ein Kreide-Aufsteller, beide auf demselben Boden */
.ho-anfahrt { padding-block: 104px 32px; }
.ho-anfahrt-raster {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: end;
  padding-inline: 24px; border-bottom: 2.2px solid #3E3326;
}
.ho-huette { width: 100%; max-width: 420px; height: auto; justify-self: center; overflow: visible; }
.ho-tuerblatt { fill: #C79B66 !important; }
.ho-boden { stroke-width: 5 !important; stroke: var(--holz-dunkel) !important; }
.ho-ei { fill: #F6EEDC !important; }
.ho-knolle { fill: #C49A6C !important; }
.ho-aufsteller {
  position: relative; display: grid; gap: 14px; justify-items: start; margin-bottom: 64px; padding: 36px 40px 40px;
  background: var(--tafel); color: var(--kreide);
  border: 12px solid var(--holz); border-radius: 3px; box-shadow: inset 0 0 0 2px var(--holz-dunkel);
}
.ho-aufsteller::before, .ho-aufsteller::after {
  content: ""; position: absolute; bottom: -78px; width: 12px; height: 66px; background: var(--holz-dunkel);
}
.ho-aufsteller::before { left: 12%; rotate: 8deg; }
.ho-aufsteller::after { right: 12%; rotate: -8deg; }
.ho-aufsteller h2 { color: var(--kreide); }
.ho-aufsteller p { font-size: 19px; color: #DCD8CB; }
.beispielangaben { font-size: 14px !important; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }
.ho-adresse { font: 500 30px/1.3 var(--hand) !important; color: var(--kreide) !important; }
.ho-aufsteller .knopf { margin-top: 8px; background: var(--kreide); border-color: var(--kreide); color: var(--tafel); }
.ende { width: 100%; max-width: 480px; height: auto; }
.ende .logo-hang, .ende .logo-furche { stroke: var(--feldgruen); }
.ende .logo-sonne, .ende .logo-strahl { stroke: var(--kuerbis); }

@media (max-width: 1099px) {
  .ho-leiste { flex-direction: column; align-items: stretch; gap: 10px; }
  .ho-schnur { align-self: start; margin-left: 0; }
  .ho-gestell-kopf { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .ho-kopf-zeile { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ho-schild { max-width: 520px; }
  .ho-kaufen-raster, .ho-hof-raster, .ho-anfahrt-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ho-album { margin-inline: 24px; }
  .ho-anfahrt-raster { gap: 24px; }
  .ho-huette { order: 2; max-width: 340px; }
  .ho-aufsteller { margin-bottom: 0; }
  .ho-aufsteller::before, .ho-aufsteller::after { display: none; }
}

/* Tablet: vier Fächer je Reihe, angefangene Reihen bekommen ein durchgehendes Brett */
@media (min-width: 760px) and (max-width: 1279px) {
  .ho-brett { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 34px; }
  .ho-brett .ho-immer { grid-column: auto; }
  .ho-brett li:last-child:nth-child(4n + 3) { grid-column: span 2; }
  .ho-brett li:last-child:nth-child(4n + 2) { grid-column: span 3; }
  .ho-brett li:last-child:nth-child(4n + 1) { grid-column: span 4; }
}

@media (max-width: 759px) {
  :root { --groesse: 18px; }
  .ho-leiste { padding-block: 12px 0; }
  .ho-tafel { gap: 14px; padding: 10px 12px; border-width: 7px; }
  .ho-logo svg { height: 54px; }
  .ho-status { font-size: 19px; line-height: 1.5; }
  .ho-status p { white-space: normal; }
  .ho-schnur { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 10px; padding: 18px 0 10px; align-self: stretch; }
  .ho-schnur-linie { display: none; }
  .ho-schnur::before, .ho-schnur::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: #8E7756; }
  .ho-schnur::before { top: 0; }
  .ho-schnur::after { top: calc(50% - 4px); }
  .ho-schnur a { justify-self: center; margin-top: 0 !important; font-size: 20px; padding: 4px 12px 6px 22px; }
  .ho-kopf { padding-block: 18px 56px; }
  .ho-kopf h1 { font-size: clamp(42px, 12.4vw, 54px); }
  .ho-gestell { margin-top: 22px; border-width: 18px 10px 20px; }
  .ho-schild { margin-bottom: 22px; padding: 16px; }
  .ho-schild::before { left: 24px; } .ho-schild::after { right: 24px; }
  .ho-brett:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ho-brett .ho-immer { grid-column: 1 / -1; order: -1; padding-bottom: 0; border-bottom: 0; box-shadow: none; }
  .ho-brett li:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .ho-brett li:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .ho-immer span { font-size: 24px; padding: 4px 18px 6px; }
  .ho-satz { font-size: 17px; }
  .ho-gestell-kopf { padding: 18px 10px 0; }
  .ho-gestell-kopf h2 { font-size: 26px; }
  .ho-monate { flex-wrap: wrap; }
  .ho-pfeil { flex: 1; }
  .ho-monat-leiste { order: 3; flex-basis: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ho-regal { padding: 22px 4px 6px; }
  .ho-brett { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .ho-frucht { width: 62px; height: 62px; }
  .ho-brett li { padding-bottom: 10px; border-bottom-width: 10px; }
  .ho-etikett { font-size: 19px; padding: 2px 6px 3px; }
  .ho-etikett small { font-size: 12px; letter-spacing: .02em; }
  .ho-etikett .ho-name { white-space: normal; hyphens: manual; line-height: 1.15; padding-block: 3px; }
  .ho-kaufen, .ho-hof { padding-block: 64px; }
  .ho-plan-text text { font-size: 26px; }
  .ho-album { min-height: 0; display: grid; gap: 0; margin-inline: 12px; }
  .ho-klebe { position: relative; left: auto; right: auto; top: auto; }
  .ho-k1 { width: 90%; }
  .ho-k2 { width: 60%; margin: -24px 30px 0 auto; }
  .ho-hof-text p { font-size: 19px; }
  .ho-anfahrt { padding-block: 64px 24px; }
  .ho-huette { max-width: 280px; }
  .ho-anfahrt-raster { padding-inline: 0; }
  .ho-aufsteller { padding: 28px 20px 30px; border-width: 9px; }
  .ho-adresse { font-size: 25px !important; }
}