/* ============================================================
   HOF FAMILIE SEILER – Haupt-Stylesheet
   ============================================================ */

/* 1. CUSTOM PROPERTIES */
:root {
  --creme: #f4f1ea;
  --white: #ffffff;
  --dk:    #003122;
  --md:    #1a5c3a;
  --gr:    #8dc74f;
  --am:    #ffba57;
  --tx:    #1c2b1c;
  --txl:   #5a7060;
  --r:     6px;

  /* Aliases für hofladen.css / kontakt.css */
  --color-creme:      #f4f1ea;
  --color-white:      #ffffff;
  --color-dark:       #003122;
  --color-dark-80:    rgba(0,49,34,.85);
  --color-green:      #8dc74f;
  --color-gold:       #ffba57;
  --color-text:       #1c2b1c;
  --color-text-light: #5a7060;
  --font-heading:     "Satisfy", cursive;
  --font-body:        "Shanti", sans-serif;
  --radius:           6px;
  --radius-lg:        10px;
  --shadow:           0 4px 24px rgba(0,49,34,.10);
  --shadow-lg:        0 8px 40px rgba(0,49,34,.16);
  --transition:       0.28s ease;
  --max-width:        1100px;
  --spacing-section:  5rem;
}

/* 2. RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Shanti", sans-serif; background: var(--creme); color: var(--tx); line-height: 1.7; }
img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }

/* 3. UTILITIES */
.tag       { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gr); margin-bottom: .75rem; }
.tag-am    { color: var(--am); }
.satisfy   { font-family: "Satisfy", cursive; }
.inner     { max-width: 1100px; margin: 0 auto; }
section    { padding: 5rem 2rem; }

/* 4. IMAGE BOX */
.imgbox    { border-radius: var(--r); overflow: hidden; background: rgba(0,49,34,.06); border: 2px dashed rgba(141,199,79,.3); display: flex; align-items: center; justify-content: center; color: var(--txl); font-size: .8rem; text-align: center; padding: 1rem; }
.imgbox-dk { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.4); }
.imgbox img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 5. BUTTONS */
.btn-primary       { display: inline-block; background: var(--am); color: var(--dk); padding: .85rem 1.9rem; border-radius: var(--r); font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transition: background .2s, transform .15s; }
.btn-primary:hover { background: #f0a93d; transform: translateY(-1px); }
.btn-outline       { display: inline-block; border: 2px solid rgba(255,255,255,.45); color: #fff; padding: .85rem 1.9rem; border-radius: var(--r); font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transition: border-color .2s, background .2s; }
.btn-outline:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.btn-dk            { display: inline-block; background: var(--dk); color: #fff; padding: .85rem 1.9rem; border-radius: var(--r); font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transition: background .2s; }
.btn-dk:hover      { background: var(--md); }

/* 6. NAVIGATION */
nav                { position: sticky; top: 0; z-index: 200; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 2px solid var(--gr); padding: 0 2rem; height: 68px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo          { height: 40px; width: auto; object-fit: contain; }
.nav-brand         { display: flex; align-items: center; gap: .85rem; }
.nav-brand-text    { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand-text .name { font-family: "Satisfy", cursive; font-size: 1.45rem; color: var(--dk); }
.nav-brand-text .sub  { font-size: .62rem; color: var(--txl); letter-spacing: .1em; text-transform: uppercase; }
.nav-links         { display: flex; gap: 2.25rem; list-style: none; }
.nav-links a       { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tx); transition: color .2s; }
.nav-links a:hover { color: var(--gr); }
.nav-cta           { background: var(--dk); color: #fff; padding: .5rem 1.3rem; border-radius: var(--r); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; transition: background .2s; }
.nav-cta:hover     { background: var(--md); }
.nav-toggle        { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span   { display: block; width: 22px; height: 2px; background: var(--dk); margin: 4px 0; border-radius: 2px; transition: all .3s; }

/* Mobile-Nav-Overlay (via JS classList) */
.nav-links--open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 68px; left: 0; right: 0;
  background: #fff;
  padding: 1.5rem 2rem;
  gap: 1.25rem;
  border-bottom: 2px solid var(--gr);
  z-index: 199;
}
.nav-cta--open {
  display: block !important;
  position: absolute;
  top: 148px; left: 0; right: 0;
  margin: 0 2rem;
  z-index: 199;
  text-align: center;
}

/* 7. HERO */
.hero         { background: url('../images/familie-seiler.jpg') center right / cover no-repeat; background-attachment: fixed; min-height: 88vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 5rem 3rem; gap: 4rem; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,49,34,.55); z-index: 1; pointer-events: none; }
.hero::after  { content: ""; position: absolute; bottom: -100px; left: 25%; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,186,87,.06); pointer-events: none; z-index: 1; }
.hero-text    { position: relative; z-index: 2; animation: fadeUp .8s ease both; }
.hero-img     { position: absolute; top: 2.5rem; right: 2.5rem; z-index: 2; animation: fadeUp .8s .15s ease both; border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45); width: 36%; max-width: 400px; }
.hero-badge   { display: inline-block; background: var(--am); color: var(--dk); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 3px; margin-bottom: 1.5rem; }
.hero h1      { font-family: "Satisfy", cursive; font-size: 3.6rem; color: #fff; line-height: 1.2; margin-bottom: 1.25rem; }
.hero-sub     { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.8; margin-bottom: 2.25rem; max-width: 440px; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-img .imgbox     { aspect-ratio: 4/3; width: 100%; height: auto; border: none; background: transparent; border-color: transparent; }
.hero-img .imgbox img { animation: fadeUp .8s .15s ease both; }
.hero-img-caption     { margin-top: .75rem; display: flex; gap: 1.5rem; }
.hic   { text-align: center; flex: 1; background: rgba(255,255,255,.07); border-radius: var(--r); padding: .75rem .5rem; }
.hic-n { font-family: "Satisfy", cursive; font-size: 1.4rem; color: var(--am); }
.hic-l { font-size: .65rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; }

/* 8. INFOBAR */
.infobar        { background: var(--dk); border-top: 1px solid rgba(255,255,255,.1); padding: .9rem 2rem; display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.info-item      { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.8); }
.info-item strong { color: var(--am); }
.info-item a    { color: var(--am); font-weight: 700; }

/* 9. WILLKOMMEN */
.willkommen           { background: var(--white); }
.willkommen-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.willkommen-img .imgbox { height: 380px; }
.wk-text h2           { font-size: 2.6rem; color: var(--dk); line-height: 1.25; margin-bottom: .5rem; }
.wk-claim             { font-style: italic; color: var(--gr); font-size: .95rem; margin-bottom: 1.25rem; }
.wk-text p            { color: var(--txl); font-size: 1rem; line-height: 1.85; margin-bottom: 1rem; }
.wk-text .mehr        { color: var(--gr); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; transition: gap .2s; }
.wk-text .mehr:hover  { gap: .6rem; }

/* 10. PRODUKTE */
.produkte              { background: var(--creme); }
.produkte-header       { margin-bottom: 3rem; }
.produkte-header h2    { font-size: 2.6rem; color: var(--dk); margin-bottom: .75rem; }
.produkte-header p     { color: var(--txl); max-width: 520px; }
.produkte-grid         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.prod-card             { background: var(--white); border-radius: var(--r); overflow: hidden; border: 1px solid rgba(141,199,79,.2); transition: transform .25s, box-shadow .25s; }
.prod-card:hover       { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,49,34,.1); }
.produkte-grid .prod-card:nth-child(2) { transition-delay: .1s; }
.produkte-grid .prod-card:nth-child(3) { transition-delay: .2s; }
.prod-card-img         { height: 170px; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: var(--creme); border-bottom: 1px solid rgba(141,199,79,.15); }
.prod-card-img img     { width: 100%; height: 100%; object-fit: cover; }
.prod-card-body        { padding: 1.4rem; }
.prod-card-body h3     { font-family: "Satisfy", cursive; font-size: 1.3rem; color: var(--dk); margin-bottom: .5rem; }
.prod-card-body p      { font-size: .875rem; color: var(--txl); line-height: 1.7; }
.prod-card-link        { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; color: var(--gr); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: gap .2s; }
.prod-card-link:hover  { gap: .55rem; }
.prod-cta              { margin-top: 2.75rem; text-align: center; }

/* 11. TIERWOHL */
.tierwohl              { background: var(--dk); }
.tierwohl-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.tierwohl-img .imgbox  { height: 380px; }
.tierwohl h2           { font-family: "Satisfy", cursive; font-size: 2.8rem; color: #fff; line-height: 1.25; margin-bottom: 1rem; }
.tierwohl .lead        { color: rgba(255,255,255,.7); margin-bottom: 2rem; font-size: 1rem; line-height: 1.8; }
.tw-punkte             { display: flex; flex-direction: column; gap: 1rem; }
.tw-punkt              { display: flex; gap: 1rem; align-items: flex-start; }
.tw-icon               { background: var(--am); color: var(--dk); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.tw-punkt p            { color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.65; }
.tierwohl-grid .fade-up:last-child { transition-delay: .15s; }

/* 12. ÖFFNUNGSZEITEN */
.oeffnungszeiten         { background: var(--white); }
.oeffnungszeiten .fade-up h2 { font-size: 2.6rem; color: var(--dk); margin-bottom: .75rem; }
.oeffnungszeiten .fade-up p  { color: var(--txl); max-width: 520px; }
.oz-grid                 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.oz-card                 { border-radius: var(--r); padding: 2rem; }
.oz-card-hell            { background: var(--creme); border-left: 4px solid var(--gr); }
.oz-card-dk              { background: var(--dk); }
.oz-card h3              { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.25rem; }
.oz-card-hell h3         { color: var(--txl); }
.oz-card-dk h3           { color: var(--am); }
.oz-row                  { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(0,49,34,.08); font-size: .875rem; }
.oz-row:last-child       { border-bottom: none; }
.oz-card-dk .oz-row      { border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.oz-val                  { font-weight: 700; }
.oz-card-hell .oz-val    { color: var(--dk); }
.oz-card-dk .oz-val      { color: var(--am); }
.oz-val-sm               { font-size: .8rem; }
.oz-card-hell .oz-val a  { color: var(--dk); }
.oz-val-sm a             { color: var(--md); }
.oz-note                 { font-size: .78rem; color: var(--txl); margin-top: 1.25rem; font-style: italic; }
.oz-card-dk .oz-note     { color: rgba(255,255,255,.5); }

/* 13. HOFLADEN */
.hofladen              { background: var(--creme); }
.hofladen-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.hofladen .fade-up > h2 { font-size: 2.6rem; color: var(--dk); line-height: 1.25; margin-bottom: .75rem; }
.hofladen .fade-up > p  { color: var(--txl); font-size: 1rem; line-height: 1.8; }
.hofladen-img          { transition-delay: .15s; }
.hofladen-img .imgbox  { height: 380px; }
.hl-features           { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.75rem; }
.hl-feat               { display: flex; gap: .85rem; align-items: flex-start; }
.hl-dot                { width: 9px; height: 9px; border-radius: 50%; background: var(--gr); flex-shrink: 0; margin-top: 6px; }
.hl-feat p             { font-size: .9rem; color: var(--txl); line-height: 1.65; }
.hl-cta                { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* 14. INSTAGRAM */
.instagram             { background: var(--white); }
.instagram .fade-up h2 { font-size: 2.6rem; color: var(--dk); margin-bottom: .75rem; }
.instagram .fade-up p  { color: var(--txl); max-width: 500px; }
.einblicke-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.einblicke-grid img    { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center; border-radius: var(--r); }

/* 14.5 MAPS STARTSEITE */
.maps-section-start              { background: var(--white); padding: 4rem 2rem; }
.maps-section-start .fade-up h2  { font-size: 2.6rem; color: var(--dk); margin-bottom: 1.5rem; margin-top: .5rem; }
.maps-container-start            { border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,49,34,.16); min-height: 500px; }
.maps-iframe-start               { border: none; width: 100%; height: 100%; min-height: 500px; display: block; }

/* Kontakt-Formular (index.html) */
.k-form                { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.k-form-input          { width: 100%; padding: .75rem 1rem; border-radius: var(--r); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-family: "Shanti", sans-serif; font-size: .9rem; }
.k-form-input::placeholder { color: rgba(255,255,255,.45); }
.k-form-input:focus    { outline: none; border-color: var(--am); background: rgba(255,255,255,.12); }
select.k-form-input    { appearance: none; cursor: pointer; }
select.k-form-input option { background: var(--dk); color: #fff; }
.ig-widget-wrap        { margin-top: 2.5rem; min-height: 300px; }
.ig-placeholder        { background: var(--creme); border: 2px dashed rgba(141,199,79,.4); border-radius: var(--r); padding: 3rem 2rem; text-align: center; color: var(--txl); }
.ig-placeholder p      { font-size: 1rem; margin-bottom: .4rem; }
.ig-placeholder small  { font-size: .78rem; opacity: .7; }
.ig-teaser             { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r); margin-bottom: 1rem; }
.ig-follow             { margin-top: 2rem; }

/* 15. KONTAKT */
.kontakt               { background: var(--dk); }
.kontakt-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.kontakt h2            { font-family: "Satisfy", cursive; font-size: 2.8rem; color: #fff; line-height: 1.25; margin-bottom: 1.5rem; }
.k-info p              { color: rgba(255,255,255,.75); font-size: .9rem; line-height: 2.1; }
.k-info a              { color: var(--am); transition: opacity .2s; }
.k-info a:hover        { opacity: .8; }
.k-info strong         { color: #fff; }
.k-socials             { display: flex; gap: .75rem; margin-top: 1.5rem; }
.k-social              { border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); padding: .5rem 1.1rem; border-radius: var(--r); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: border-color .2s, color .2s; }
.k-social:hover        { border-color: var(--am); color: var(--am); }
.k-map                 { background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.2); border-radius: var(--r); height: 280px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: .82rem; text-align: center; flex-direction: column; gap: .5rem; }
.k-map small           { font-size: .72rem; margin-top: .5rem; opacity: .7; }
.kontakt-grid .fade-up:last-child { transition-delay: .15s; }

/* 16. FOOTER */
footer              { background: #001510; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.footer-copy        { font-size: .78rem; color: rgba(255,255,255,.4); }
.footer-links       { display: flex; }
.footer-links a     { font-size: .78rem; color: rgba(255,255,255,.4); margin-left: 1.75rem; transition: color .2s; }
.footer-links a:hover { color: var(--am); }

/* 17. FAQ ACCORDION */
.faq              { background: var(--creme); }
.faq-intro        { color: var(--txl); max-width: 520px; margin-bottom: 2.5rem; }
.faq-list         { max-width: 760px; display: flex; flex-direction: column; }
.faq-item         { border-bottom: 1px solid rgba(0,49,34,.1); }
.faq-item:first-child { border-top: 1px solid rgba(0,49,34,.1); }

.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.1rem 0;
  font-family: "Shanti", sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--dk); text-align: left;
  transition: color .2s;
}
.faq-question:hover     { color: var(--md); }
.faq-question .faq-icon { font-size: 1.4rem; color: var(--gr); line-height: 1; flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { color: var(--txl); font-size: .9rem; line-height: 1.75; padding-bottom: 1.1rem; }

/* Google Maps Embed */
.map-embed         { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; }
.map-embed iframe  { width: 100%; height: 100%; border: 0; display: block; }

/* 17. ANIMATIONEN */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up         { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════
   UNTERSEITEN-BASIS  (hofladen, kontakt, etc.)
   ══════════════════════════════════════════════ */

/* Container */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* Utilities */
.bg-light { background-color: var(--creme); }
.section  { padding: var(--spacing-section) 0; }

.section__title {
  font-family: "Satisfy", cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--dk);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.section__sub {
  color: var(--txl);
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* Label-Chip */
.label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gr);
  background-color: rgba(141,199,79,.12);
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 0.75rem;
}

/* Buttons */
.btn { display: inline-block; padding: 0.75rem 1.75rem; border-radius: 50px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all var(--transition); border: 2px solid transparent; text-align: center; }
.btn--primary       { background-color: var(--am); color: var(--dk); border-color: var(--am); }
.btn--primary:hover { background-color: #e8a43e; border-color: #e8a43e; transform: translateY(-2px); }
.btn--secondary       { background-color: var(--gr); color: #fff; border-color: var(--gr); }
.btn--secondary:hover { background-color: #74b035; border-color: #74b035; transform: translateY(-2px); }
.btn--outline-dark       { background-color: transparent; color: var(--dk); border-color: var(--dk); }
.btn--outline-dark:hover { background-color: var(--dk); color: #fff; }

/* Header / Navigation Unterseiten */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--white);
  box-shadow: 0 2px 16px rgba(0,49,34,.08);
  transition: background-color var(--transition), box-shadow var(--transition);
}
.header.scrolled  { box-shadow: 0 2px 24px rgba(0,49,34,.14); }
.header__inner    { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo__img        { height: 44px; width: auto; object-fit: contain; }

.nav__list        { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav__link        { font-size: 0.95rem; font-weight: 600; color: var(--dk); position: relative; padding-bottom: 2px; }
.nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--am); transition: width var(--transition); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__link--cta        { background-color: var(--am); color: var(--dk); padding: 0.5rem 1.25rem; border-radius: 50px; font-weight: 700; }
.nav__link--cta::after { display: none; }
.nav__link--cta:hover  { background-color: #e8a43e; }

.burger       { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.burger span  { display: block; width: 26px; height: 2px; background-color: var(--dk); border-radius: 2px; transition: all var(--transition); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Page Hero (Unterseiten) */
.page-hero         { background-color: var(--dk); padding: 7rem 0 3.5rem; text-align: center; color: #fff; }
.page-hero--small  { padding: 5rem 0 2.5rem; }
.page-hero__title  { font-family: "Satisfy", cursive; font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; margin-bottom: 0.75rem; }
.page-hero__sub    { font-size: 1.05rem; opacity: 0.75; }
.nav__list--hidden { display: none !important; }

/* Footer Unterseiten */
.footer              { background-color: var(--dk); color: #fff; padding-top: 3.5rem; }
.footer__inner       { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.10); }
.footer__logo        { height: 80px; width: auto; margin-bottom: 0.75rem; filter: brightness(0) invert(1); }
.footer__tagline     { font-family: "Satisfy", cursive; font-size: 1.1rem; color: var(--am); }
.footer h4           { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--am); margin-bottom: 1rem; }
.footer ul           { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; }
.footer ul a, .footer__contact a { opacity: 0.75; font-size: 0.9rem; transition: opacity var(--transition); }
.footer ul a:hover, .footer__contact a:hover { opacity: 1; color: var(--am); }
.footer__contact p   { margin-bottom: 0.4rem; font-size: 0.9rem; }
.footer__social-links { display: flex; gap: .75rem; }
.social-link         { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background-color: rgba(255,255,255,.08); color: #fff; transition: background-color var(--transition); }
.social-link:hover   { background-color: var(--am); color: var(--dk); }
.footer__bottom      { padding: 1.25rem 0; text-align: center; }
.footer__bottom p    { font-size: 0.8rem; opacity: 0.55; }
.footer__bottom a    { opacity: 0.75; transition: opacity var(--transition); }
.footer__bottom a:hover { opacity: 1; color: var(--am); }

/* Responsive Unterseiten */
@media (max-width: 767px) {
  .burger { display: flex; }
  .nav {
    position: fixed; top: 72px; left: 0; right: 0;
    background-color: var(--white);
    box-shadow: 0 8px 32px rgba(0,49,34,.12);
    transform: translateY(-110%); opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
    z-index: 999;
  }
  .nav.open { transform: translateY(0); opacity: 1; }
  .nav__list { flex-direction: column; gap: 0; padding: 1rem 0; }
  .nav__list li { width: 100%; border-bottom: 1px solid rgba(0,49,34,.06); }
  .nav__link { display: block; padding: 1rem 1.5rem; font-size: 1.05rem; }
  .nav__link--cta { margin: 1rem 1.5rem; text-align: center; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (min-width: 768px) {
  .burger { display: none !important; }
}

/* 18. RESPONSIVE */
@media (max-width: 900px) {
  nav { padding: 0 1.25rem; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .hero { grid-template-columns: 1fr; min-height: 60vh; padding: 3rem 1.5rem; gap: 2.5rem; text-align: center; }
  .hero h1 { font-size: 2.6rem; }
  .hero-sub { margin: 0 auto 2rem; }
  .hero-actions { justify-content: center; }
  .willkommen-grid, .tierwohl-grid, .hofladen-grid, .kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .produkte-grid { grid-template-columns: 1fr 1fr; }
  .oz-grid { grid-template-columns: 1fr; }
  .einblicke-grid { grid-template-columns: 1fr; }
  .maps-container-start { min-height: 380px; }
  .maps-iframe-start { min-height: 380px; }
  section { padding: 3.5rem 1.25rem; }
  .hero-img-caption { display: none; }
  .infobar { gap: 1.25rem; }
}

@media (max-width: 600px) {
  .maps-container-start { min-height: 300px; }
  .maps-iframe-start { min-height: 300px; }
}

@media (max-width: 560px) {
  .produkte-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.2rem; }
}