@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/baloo2-700.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/baloo2-800.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-600.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-700.woff2') format('woff2')}

:root{
  color-scheme:light only;
  --creme:#FCF3DD;
  --karton:#FFFBEF;
  --creme-tief:#F6E7C4;
  --braun:#4A3016;
  --braun-hell:#7A5330;
  --orange:#C9761B;
  --gras:#6E9C4F;
  --koralle:#F2A08E;
  --mint:#A9D6BE;
  --sonne:#F5CE63;
  --rosa:#EFA3BA;
  --himmel:#9FCBE2;
  --rand:2px solid var(--braun);
  --radius:22px;
  --schatten:0 4px 0 rgba(74,48,22,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px;background:#FCF3DD;color-scheme:light only;-webkit-text-size-adjust:100%}
@media (prefers-color-scheme:dark){
  html,body{background:#FCF3DD!important;color:#4A3016!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
body{
  margin:0;background:var(--creme);color:var(--braun);
  font-family:'Nunito',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;padding-bottom:78px;
}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;line-height:1.12;margin:0 0 .4em}
h1{font-size:clamp(2rem,7vw,3.4rem);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(1.55rem,5vw,2.3rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em;max-width:62ch}
a{color:var(--orange)}
img{max-width:100%;display:block}
.wrap{width:min(1020px,92vw);margin-inline:auto}
section{padding:54px 0;background:var(--creme)}
section:nth-of-type(even){background:var(--karton)}
.klein{font-size:.9rem;color:var(--braun-hell)}

header{position:relative;z-index:50;background:#FCF3DD;border-bottom:2px solid var(--creme-tief)}
.kopf{display:flex;align-items:center;gap:12px;padding:9px 0;justify-content:space-between}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--braun)}
.marke img{width:46px;height:46px;border-radius:50%;border:2px solid var(--braun)}
.marke b{font-family:'Baloo 2';font-size:1.2rem;line-height:1}
.marke small{display:block;font-size:.72rem;color:var(--braun-hell);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Baloo 2';font-weight:700;font-size:1.05rem;text-decoration:none;
  padding:13px 22px;border-radius:999px;border:var(--rand);cursor:pointer;
  background:var(--sonne);color:var(--braun);box-shadow:var(--schatten);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(74,48,22,.18)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,48,22,.18)}
.btn--wa{background:#4FBF6C;color:#fff;border-color:#26702F}
.btn--ig{background:linear-gradient(120deg,#F9CE34,#EE2A7B 55%,#6228D7);color:#fff;border-color:#5A2160}
.btn--still{background:transparent;box-shadow:none}
.btn--klein{padding:8px 16px;font-size:.95rem}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.hero{position:relative;padding:30px 0 clamp(100px,12vw,136px);overflow:hidden;background:linear-gradient(#B9DDEF 0%,#DCEEF3 50%,#FCF3DD 100%)}
.hero{--b:min(680px,92vw);--logo:min(calc(var(--b)*.36),230px)}
/* Bühne: Regenbogen vollständig sichtbar, das Logo geht darunter wie eine aufgehende Sonne auf */
.buehne{position:relative;width:var(--b);margin:6px auto calc(var(--logo)/2 + 16px)}
.regenbogen{display:block;width:100%;height:auto;overflow:visible}

/* Der Bogen malt sich beim Laden selbst, danach schaukelt er leicht. */
.bogen{stroke-dasharray:1;stroke-dashoffset:1;animation:bogen-malen 1.1s cubic-bezier(.45,.05,.3,1) forwards}
.bogen:nth-child(1){animation-delay:.05s}
.bogen:nth-child(2){animation-delay:.22s}
.bogen:nth-child(3){animation-delay:.39s}
.bogen:nth-child(4){animation-delay:.56s}
@keyframes bogen-malen{to{stroke-dashoffset:0}}

.funke{opacity:0;transform-box:fill-box;transform-origin:center;animation:funkeln 3.4s ease-in-out infinite}
.funke.f1{animation-delay:1.7s}
.funke.f2{animation-delay:2.4s}
.funke.f3{animation-delay:2.9s}
@keyframes funkeln{
  0%,100%{opacity:0;transform:scale(.4)}
  12%{opacity:1;transform:scale(1)}
  30%{opacity:0;transform:scale(.4)}
}

@media (prefers-reduced-motion:reduce){
  .bogen{stroke-dashoffset:0;animation:none}
  .funke{opacity:0;animation:none}
}
.hero-inhalt{text-align:center}
.hero-logo{position:absolute;left:50%;bottom:3.7%;width:var(--logo);height:var(--logo);transform:translate(-50%,50%);border-radius:50%;border:3px solid var(--braun);background:var(--creme);box-shadow:var(--schatten)}
.lead{font-size:1.12rem;margin-inline:auto}
.cta-reihe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
.tierzeile{display:flex;gap:16px;justify-content:center;font-size:1.9rem;margin-top:22px}

.karten{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:20px}
.karte{background:var(--karton);border:var(--rand);border-radius:var(--radius);padding:20px}
section:nth-of-type(even) .karte{background:var(--creme)}
.karte h3{margin-bottom:.25em}
.karte p{margin-bottom:0;font-size:.97rem}
.karte{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;align-content:start}
.karte .symbol{font-size:1.9rem;line-height:1;display:block;margin:0}
.karte h3{margin:0}
.karte p{grid-column:1/-1;margin-top:10px}

.fakten{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.fakten li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
.fakten b{font-family:'Baloo 2'}

.ig-block{text-align:left}
.ig-block .cta-reihe{justify-content:flex-start}
/* Profilkopf wie bei Instagram: rundes Bild mit Farbring, daneben Name und Follower */
.ig-profil{display:flex;align-items:center;gap:clamp(16px,4vw,32px);margin-bottom:22px}
.ig-ring{flex:none;display:block;width:clamp(96px,22vw,150px);aspect-ratio:1;border-radius:50%;padding:4px;
  background:conic-gradient(from 210deg,#F9CE34,#EE2A7B,#6228D7,#EE2A7B,#F9CE34);transition:transform .2s ease}
.ig-ring:hover{transform:scale(1.03)}
.ig-ring img{display:block;width:100%;height:100%;border-radius:50%;border:4px solid #fff;background:#fff;object-fit:cover}
.ig-info p{margin:0}
.ig-handle{font-family:'Baloo 2';font-size:clamp(1.3rem,4.4vw,1.7rem);font-weight:800;line-height:1.1}
.ig-name{color:var(--braun-hell);font-weight:600;margin-top:2px!important}
.ig-zahl{margin-top:8px!important;font-size:1.05rem}
.ig-zahl b{font-family:'Baloo 2';font-size:1.35rem;font-weight:800}
.ig-ziel{max-width:560px;margin:0 0 26px;background:var(--karton);border:var(--rand);border-radius:var(--radius);padding:14px 18px}
section:nth-of-type(even) .ig-ziel{background:var(--creme)}
.ig-ziel-text{margin:0 0 10px;font-weight:700}
.ig-balken{height:14px;border-radius:999px;background:var(--creme-tief);border:2px solid var(--braun);overflow:hidden}
.ig-balken span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#F9CE34,#EE2A7B,#6228D7);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.ig-balken span,.ig-ring{transition:none}}

.faq{margin-top:18px;display:grid;gap:12px}
.faq details{background:var(--karton);border:var(--rand);border-radius:var(--radius);padding:4px 18px}
section:nth-of-type(even) .faq details{background:var(--creme)}
.faq summary{font-family:'Baloo 2';font-weight:700;font-size:1.08rem;cursor:pointer;padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--orange)}
.faq details[open] summary::after{content:'–'}
.faq p{margin:0 0 14px}

footer{background:var(--braun);color:var(--creme);padding:36px 0 30px;font-size:.94rem}
footer a{color:var(--sonne)}
footer h3{color:var(--creme)}
.fuss{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:720px){.fuss{grid-template-columns:1.3fr 1fr 1fr}}

.partner{
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(252,243,221,.22);
  font-size:.88rem;color:#D9C7A6;text-align:center;
}

.status{
  border:var(--rand);border-radius:var(--radius);padding:20px;margin:22px 0;
  box-shadow:var(--schatten);background:var(--mint);
}
.status.aus{background:var(--koralle)}
.status p{margin:0 0 14px;font-weight:600;max-width:none}
.status .zustand{font-family:'Baloo 2';font-size:1.25rem;font-weight:700;display:block;margin-bottom:6px}
.liste{padding-left:20px}
.liste li{margin-bottom:6px}

.leiste{
  position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;gap:9px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:#FCF3DD;border-top:2px solid var(--creme-tief);
}
.leiste .btn{flex:1;font-size:.98rem;padding:11px 10px}
/* Mit JavaScript: Leiste erst nach dem Runterscrollen sanft einblenden */
.js .leiste{transform:translateY(110%);opacity:0;visibility:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,visibility 0s linear .55s}
.js .leiste.zeigen{transform:none;opacity:1;visibility:visible;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.js .leiste,.js .leiste.zeigen{transition:none}}
@media(min-width:900px){body .partner{
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(252,243,221,.22);
  font-size:.88rem;color:#D9C7A6;text-align:center;
}

.status{
  border:var(--rand);border-radius:var(--radius);padding:20px;margin:22px 0;
  box-shadow:var(--schatten);background:var(--mint);
}
.status.aus{background:var(--koralle)}
.status p{margin:0 0 14px;font-weight:600;max-width:none}
.status .zustand{font-family:'Baloo 2';font-size:1.25rem;font-weight:700;display:block;margin-bottom:6px}
.liste{padding-left:20px}
.liste li{margin-bottom:6px}

.leiste{display:none}body{padding-bottom:0}}


/* =============================================================
   Hofleben: Wetter, Traktor und Tiere
   ============================================================= */
.buehne,.hero-inhalt{position:relative;z-index:1}

/* --- Himmel und Wetter --- */
.himmel{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.himmel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(#A9B6C1 0%,#CDD6DC 45%,rgba(252,243,221,0) 80%);opacity:0;transition:opacity 3s ease}
.hero[data-wetter="wolkig"] .himmel::before{opacity:.28}
.hero[data-wetter="regen"]  .himmel::before{opacity:.72}

.sonne{position:absolute;left:5%;top:4%;width:clamp(62px,9vw,112px);transition:opacity 3s ease,transform 3s ease}
.sonne-strahlen{transform-box:fill-box;transform-origin:center;animation:drehen 40s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.hero[data-wetter="wolkig"] .sonne{opacity:.6;transform:translateY(10px) scale(.9)}
.hero[data-wetter="regen"]  .sonne{opacity:0;transform:translateY(36px) scale(.75)}

.wolke-zug{position:absolute;left:0;top:var(--y);width:var(--w);opacity:.96;
  animation:ziehen var(--t) linear infinite;animation-delay:var(--d)}
@keyframes ziehen{from{transform:translateX(-32vw)}to{transform:translateX(112vw)}}
.wolke-extra{opacity:0;transition:opacity 3s ease}
.hero[data-wetter="wolkig"] .wolke-extra,.hero[data-wetter="regen"] .wolke-extra{opacity:.96}

.regenwolke{position:absolute;right:5%;top:3%;width:clamp(100px,14vw,170px);opacity:0;transform:translateY(-16px);
  transition:opacity 2.5s ease,transform 2.5s ease}
.hero[data-wetter="regen"] .regenwolke{opacity:1;transform:none}
.tropfen{animation:fallen 1.1s linear infinite}
@keyframes fallen{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(42px);opacity:0}}

/* --- Wiese und Traktor --- */
.wiese{position:absolute;left:0;right:0;bottom:0;height:clamp(80px,9vw,112px);z-index:2;pointer-events:none}
.huegel{position:absolute;inset:0;width:100%;height:100%}
.traktor{position:absolute;left:0;bottom:32%;width:clamp(84px,10vw,140px);pointer-events:auto;cursor:pointer;
  animation:fahren 30s linear infinite;animation-delay:-3s}
.traktor svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes fahren{0%{transform:translateX(-170px)}62%,100%{transform:translateX(calc(100vw + 30px))}}
.karosserie{animation:ruckeln .32s ease-in-out infinite alternate}
@keyframes ruckeln{to{transform:translateY(-1.6px)}}
.rad{transform-box:fill-box;transform-origin:center;animation:rollen 1.1s linear infinite}
.rad-vorn{animation-duration:.7s}
@keyframes rollen{to{transform:rotate(360deg)}}
.puff{transform-box:fill-box;transform-origin:center;animation:qualm 1.8s ease-out infinite}
.p2{animation-delay:.6s}.p3{animation-delay:1.2s}
@keyframes qualm{0%{transform:translate(0,0) scale(.35);opacity:.9}100%{transform:translate(-20px,-16px) scale(1.5);opacity:0}}

/* --- Tiere in den Abschnitten --- */
.mit-tier{position:relative;padding-bottom:clamp(124px,14vw,158px)}
.tier{position:absolute;bottom:0;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tier svg{display:block;width:100%;height:auto;overflow:visible}

.tier-huhn{right:7%;bottom:8px;width:clamp(80px,9vw,106px)}
.huhn-koerper{transform-box:view-box;transform-origin:60px 82px;animation:picken 4.2s ease-in-out infinite}
@keyframes picken{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-24deg)}71%{transform:rotate(-6deg)}77%{transform:rotate(-24deg)}85%{transform:rotate(0)}}

.tier-esel{left:6%;width:clamp(104px,11vw,132px)}
.esel-kopf,.kuh-kopf{transform-box:view-box;transform-origin:65px 130px;animation:nicken 8s ease-in-out infinite}
@keyframes nicken{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
.auge{transform-box:fill-box;transform-origin:center}
.tier-esel .auge-r{animation:zwinkern 5.5s infinite}
.tier-esel .auge-l{animation:blinzeln 8s infinite}
@keyframes zwinkern{0%,84%,96%,100%{transform:scaleY(1)}88%,92%{transform:scaleY(.1)}}
@keyframes blinzeln{0%,46%,52%,100%{transform:scaleY(1)}49%{transform:scaleY(.1)}}
.ohr-l{transform-box:view-box;transform-origin:46px 58px;animation:ohrzucken 6s ease-in-out infinite}
@keyframes ohrzucken{0%,70%,82%,100%{transform:rotate(0)}74%{transform:rotate(-12deg)}78%{transform:rotate(5deg)}}

.tier-kuh{right:5%;width:clamp(140px,14vw,176px)}
.kuh-kopf{transform-origin:70px 130px;animation-duration:7s}
.tier-kuh .auge{animation:blinzeln 6s infinite}
.maul{animation:kauen .9s ease-in-out infinite alternate}
@keyframes kauen{to{transform:translate(1.5px,1.6px)}}
.muh{opacity:0;transform-box:fill-box;transform-origin:left bottom;animation:muhen 9s ease-in-out infinite;animation-delay:2s}
@keyframes muhen{0%,60%,100%{opacity:0;transform:scale(.6)}65%,84%{opacity:1;transform:scale(1)}89%{opacity:0;transform:scale(.9)}}

.tier-hase{left:6%;bottom:6px;width:clamp(58px,6vw,74px);animation:hoppeln 15s ease-in-out infinite}
@keyframes hoppeln{
  0%{transform:translateX(0) scaleX(1)}
  44%{transform:translateX(min(44vw,440px)) scaleX(1)}
  50%{transform:translateX(min(44vw,440px)) scaleX(-1)}
  94%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}}
.hase-koerper{animation:hopsen .62s ease-in-out infinite}
@keyframes hopsen{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.schatten{transform-box:fill-box;transform-origin:center;animation:schatten .62s ease-in-out infinite}
@keyframes schatten{50%{transform:scale(.7);opacity:.08}}

/* Antippen: kurzer Freudensprung */
.freut svg{animation:freuen .6s ease}
@keyframes freuen{30%{transform:translateY(-12px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}

/* Außerhalb des Bildschirms: Pause, spart Akku */
.ruht *,.ruht::before{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .wolke-zug,.traktor,.traktor *,.tier,.tier *,.sonne-strahlen,.tropfen,.puff{animation:none!important}
  .wolke-zug{transform:translateX(var(--x))}
  .traktor{transform:translateX(8vw)}
  .muh,.wolke-extra,.regenwolke{opacity:0}
}


/* =============================================================
   Hoftor: Kontaktbereich erst nach dem Folgen
   ============================================================= */
.nur-follower{display:none}
html.folgt .nur-follower{display:block}
html.folgt .btn.nur-follower{display:inline-flex}
html.folgt .nur-gast{display:none!important}

.kontakt{padding-bottom:70px}
.tor-huelle{position:relative;margin-top:104px;max-width:680px}
@media(min-width:720px){.tor-huelle{margin-top:78px}}

/* Die Kuh steht hinter dem Tor und schaut über die Oberkante */
.tor-huelle .tier-kuh{right:16px;bottom:calc(100% - 26px);width:clamp(124px,36vw,152px);z-index:0}

.tor{position:relative;z-index:1;background:var(--karton);border:var(--rand);border-radius:var(--radius);
  padding:22px 22px 24px;box-shadow:var(--schatten)}
section:nth-of-type(even) .tor{background:var(--creme)}
.tor-kopf{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.tor-kopf h3{margin:0;font-size:1.3rem}
.tor-bild{width:84px;height:auto;flex:none;overflow:visible}
.tor-links,.tor-rechts{transform-box:view-box;transition:transform .8s cubic-bezier(.3,1.35,.5,1)}
.tor-links{transform-origin:6px 0}
.tor-rechts{transform-origin:114px 0}
html.folgt .tor-links,html.folgt .tor-rechts{transform:scaleX(.3)}
.tor-riegel{transition:opacity .3s ease}
html.folgt .tor-riegel{opacity:0}

.anfrage-intro{margin:0 0 16px;font-weight:600}
.feld{margin-bottom:14px}
.feld label{display:block;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;margin-bottom:3px}
.feld .optional{font-family:'Nunito',system-ui,sans-serif;font-weight:400;color:var(--braun-hell)}
.feld input,.feld textarea{
  width:100%;font:inherit;font-size:16px;color:var(--braun);background:#fff;
  border:var(--rand);border-radius:14px;padding:11px 14px;
  box-shadow:inset 0 2px 0 rgba(74,48,22,.06);-webkit-appearance:none;appearance:none}
.feld textarea{resize:vertical;min-height:84px}
.feld input::placeholder,.feld textarea::placeholder{color:#9A8467}
.feld input:focus-visible,.feld textarea:focus-visible,.haken input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.feld input[aria-invalid="true"]{border-color:#B3261E;background:#FFF4F2}
.feld small{display:block;margin-top:4px;color:var(--braun-hell);font-size:.86rem;line-height:1.4}
.feld-fehler,.form-fehler{color:#9B1C14;font-weight:700;font-size:.92rem;margin:6px 0 0;max-width:none}
.form-fehler{background:#FFF4F2;border:2px solid #B3261E;border-radius:14px;padding:10px 14px;margin:12px 0}
.haken{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:.93rem;line-height:1.45;margin:6px 0 4px;cursor:pointer}
.haken input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--orange)}
.fang{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.anfrage .btn{width:100%}
@media(min-width:560px){.anfrage .btn{width:auto;min-width:240px}}
.btn[disabled]{opacity:.7;cursor:wait;transform:none}

.danke-karte{background:var(--mint);border:var(--rand);border-radius:var(--radius);padding:16px 18px;margin-bottom:4px}
.danke-karte h4{font-family:'Baloo 2',system-ui,sans-serif;font-size:1.2rem;margin:0 0 4px}
.danke-karte p{margin:0}
.danke-karte:focus{outline:none}

.direkt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:18px;padding-top:16px;border-top:2px dashed var(--creme-tief)}
.direkt p{margin:0;font-weight:600}
.telefon{margin:12px 0 0}

/* Danke-Hinweis nach der Rückkehr von Instagram */
.dank{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 24px);background:var(--braun);color:var(--creme);
  padding:9px 10px 9px 18px;border-radius:26px;box-shadow:0 6px 0 rgba(0,0,0,.18);font-weight:700;line-height:1.3;
  animation:dank-rein .35s ease-out}
.dank .btn{flex:none;background:var(--sonne);color:var(--braun)}
@keyframes dank-rein{from{opacity:0;transform:translate(-50%,16px)}}
@media(min-width:900px){.dank{bottom:28px}}

/* =============================================================
   Aktuell: Flyer, den Tanja im Admin wechselt
   ============================================================= */
.flyer-block{display:grid;gap:28px;align-items:center;grid-template-columns:1fr}
@media(min-width:720px){.flyer-block{grid-template-columns:minmax(230px,340px) 1fr;gap:48px}}
.flyer{display:block;justify-self:center;width:min(100%,340px);background:#fff;border:var(--rand);border-radius:16px;
  padding:10px;box-shadow:var(--schatten),7px 9px 0 rgba(74,48,22,.10);transform:rotate(-1.6deg);transition:transform .2s ease}
.flyer img{width:100%;height:auto;border-radius:8px}
.etikett{display:inline-block;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;font-size:.88rem;
  background:var(--sonne);border:var(--rand);border-radius:999px;padding:1px 14px;margin:0 0 10px}
.flyer-text h2{margin-bottom:.3em}

/* =============================================================
   Instagram-Feed (erst nach Klick)
   ============================================================= */
.ig-feed{margin:30px 0 0;max-width:1020px;text-align:center}
.feed-hinweis{max-width:560px;margin:0 auto;background:var(--creme);border:2px dashed var(--braun-hell);border-radius:var(--radius);padding:16px 18px}
.feed-hinweis p{font-size:.9rem;margin:0 0 12px;max-width:none}
.feed-buehne{position:relative}
.feed-liste{list-style:none;margin:0;padding:6px 4px 12px;display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.feed-liste li{flex:0 0 clamp(150px,42vw,220px);scroll-snap-align:start}
.feed-liste a{position:relative;display:block;aspect-ratio:1;border:var(--rand);border-radius:18px;overflow:hidden;
  background:var(--creme-tief);box-shadow:var(--schatten)}
.feed-liste img{width:100%;height:100%;object-fit:cover}
.feed-marke{position:absolute;left:8px;top:8px;background:rgba(74,48,22,.88);color:#fff;
  font:700 .75rem 'Baloo 2',sans-serif;border-radius:999px;padding:1px 10px}
.feed-pfeil{display:none}
@media(min-width:900px){
  .feed-pfeil{display:flex;position:absolute;top:calc(50% - 40px);width:44px;height:44px;align-items:center;justify-content:center;
    border-radius:50%;border:var(--rand);background:var(--karton);color:var(--braun);font-size:1.7rem;line-height:1;
    cursor:pointer;z-index:2;box-shadow:var(--schatten)}
  .feed-zurueck{left:-20px}.feed-weiter{right:-20px}
}
.textknopf{background:none;border:0;padding:0;font:inherit;color:var(--braun-hell);text-decoration:underline;cursor:pointer}

@media (prefers-color-scheme:dark){
  input,textarea{background:#fff!important;color:#4A3016!important}
}
@media (prefers-reduced-motion:reduce){
  .tor-links,.tor-rechts,.tor-riegel{transition:none}
  .dank{animation:none}
  .flyer{transition:none}
}

/* ===== Pony und Katze ===== */
.tier-pony{left:calc(50% - min(44vw,600px));bottom:6px;width:clamp(124px,13vw,172px)}
.pony-kopf{transform-box:view-box;transform-origin:106px 54px;animation:grasen 11s ease-in-out infinite}
@keyframes grasen{0%,48%,92%,100%{transform:rotate(0)}58%,80%{transform:rotate(24deg)}}
.pony-schweif{transform-box:view-box;transform-origin:32px 50px;animation:wedeln 3.2s ease-in-out infinite}
@keyframes wedeln{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
.pony-ohr{transform-box:view-box;transform-origin:122px 14px;animation:ohrzucken 7s ease-in-out infinite}
.tier-pony .auge{animation:blinzeln 5s infinite}
.tier-katze{right:calc(50% - min(44vw,600px));bottom:8px;width:clamp(78px,8vw,104px)}
.tier-katze .auge{animation:blinzeln 6.5s infinite;animation-delay:1s}
.katze-schwanz{transform-box:view-box;transform-origin:72px 90px;animation:wedeln 2.6s ease-in-out infinite}
.katze-kopf{transform-box:view-box;transform-origin:44px 58px;animation:neigen 9s ease-in-out infinite}
@keyframes neigen{0%,55%,100%{transform:rotate(0)}62%,74%{transform:rotate(-7deg)}82%{transform:rotate(4deg)}}
.miau{animation-delay:5s;transform-origin:right bottom}
.tier-huhn{right:calc(50% - min(44vw,600px))}
.tier-esel,.tier-hase{left:calc(50% - min(44vw,600px))}

/* ===== Weiche Übergänge zwischen den Abschnitten ===== */
.hero{isolation:isolate}
section,footer{position:relative}
section::before,footer::before{
  content:"";position:absolute;left:0;right:0;top:-27px;height:28px;background:inherit;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C150 2 300 2 450 20S750 38 900 20 1050 2 1200 22V40Z'/%3E%3C/svg%3E") 0 0/1200px 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C150 2 300 2 450 20S750 38 900 20 1050 2 1200 22V40Z'/%3E%3C/svg%3E") 0 0/1200px 100% repeat-x}
@media(max-width:700px){section::before,footer::before{-webkit-mask-size:700px 100%;mask-size:700px 100%}}
@media(min-width:1500px){section::before,footer::before{height:36px;top:-35px;-webkit-mask-size:1600px 100%;mask-size:1600px 100%}}

/* ===== Breite Bildschirme ===== */
.wrap{width:min(1240px,92vw)}
@media(min-width:1500px){
  body{font-size:19px}
  h1{font-size:4rem}h2{font-size:2.7rem}
  section{padding:72px 0}
  .hero{--b:820px;--logo:min(calc(var(--b)*.36),290px)}
  .tor-huelle{max-width:760px}
}
@media(min-width:2000px){
  body{font-size:21px}
  .wrap{width:min(1480px,92vw)}
  .hero{--b:980px;--logo:330px}
  .tier-pony{left:calc(50% - 700px)}.tier-esel,.tier-hase{left:calc(50% - 700px)}
  .tier-huhn,.tier-katze{right:calc(50% - 700px)}
}
@media(min-width:1000px){
  .kontakt .wrap{display:grid;grid-template-columns:minmax(300px,1fr) 1.15fr;column-gap:56px;align-items:start}
  .kontakt .wrap>h2,.kontakt .wrap>.fakten{grid-column:1}
  .kontakt .wrap>.tor-huelle{grid-column:2;grid-row:1/span 3;max-width:none;margin-top:84px}
  .kontakt .wrap>.fakten{align-self:start}
  .faq{grid-template-columns:1fr 1fr;align-items:start;gap:16px 22px}
}

/* ===== Handy: Hero kompakter, damit Traktor und Wiese gleich im ersten Bild sind ===== */
@media(max-width:560px){
  .hero{padding-top:8px;padding-bottom:92px}
  .buehne{margin-top:0;margin-bottom:calc(var(--logo)/2 + 10px)}
  .hero h1{font-size:1.9rem;margin-bottom:.3em}
  .hero .lead{font-size:1.02rem;line-height:1.45;margin-bottom:6px}
  .hero .cta-reihe{gap:10px}
  .hero .cta-reihe .btn{padding:11px 20px}
}

/* ===== Instagram-Bereich: auf breiten Bildschirmen zweispaltig ===== */
@media(min-width:1000px){
  .ig-block{display:grid;grid-template-columns:minmax(360px,.9fr) 1.1fr;column-gap:clamp(48px,6vw,96px);align-items:center}
  .ig-links .ig-ziel{max-width:none;margin-bottom:0}
  .ig-rechts h2{margin-top:0}
  .ig-rechts>p{max-width:none}
  .ig-feed{grid-column:1/-1;max-width:none;margin-top:40px}
  .ig-ring{width:150px}
}

/* Einleitung "Das erwartet euch" ohne frühen Umbruch */
#angebot .wrap>p{max-width:none}

/* Kontakt am Desktop: Überschrift und Hoftor-Karte beginnen auf einer Höhe */
@media(min-width:1000px){
  .kontakt{padding-top:28px}
  .kontakt .wrap>.tor-huelle{margin-top:96px}
  .kontakt .wrap>h2{margin-top:96px}
}