/* =========================================================================
   HOF JERA – Design-System (Flyer-Look)
   Nur freigegebene Farben (Farben.jpeg) + Cormorant Garamond / Source Sans 3
   ========================================================================= */

:root{
  --hj-black:#1F1E1A;   /* Tiefschwarz  */
  --hj-green:#36513B;   /* Waldgrün     */
  --hj-moss:#9AAA97;    /* Moosgrau     */
  --hj-earth:#B08B5B;   /* Erde / Lehm  */
  --hj-wood:#8C6F52;    /* Holzbraun    */
  --hj-cream:#DCD7C9;   /* Cremeweiß    */
  --hj-paper:#E7E3D8;   /* helle Tönung des Cremeweiß für große Flächen */
  --hj-paper2:#F1EEE6;  /* noch heller für Karten/Kontrast */

  --hj-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hj-sans:'Source Sans 3', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --hj-maxw:1180px;
  --hj-narrow:760px;
  --hj-radius:4px;
  --hj-shadow:0 12px 34px rgba(31,30,26,.16);
}

/* ---------- Grundtypografie ---------- */
body,
.ast-container,
p, li, td, th, input, textarea, select, button{
  font-family:var(--hj-sans);
}
body{
  background:var(--hj-paper);
  color:var(--hj-black);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.entry-title,.site-title{
  font-family:var(--hj-serif);
  color:var(--hj-green);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.01em;
}
h1,.entry-title{ font-size:clamp(2.4rem,5vw,4rem); font-weight:600; }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
h3{ font-size:clamp(1.45rem,2.6vw,2rem); }
h4{ font-size:1.3rem; }
a{ color:var(--hj-green); text-underline-offset:3px; font-weight:600; }
a:hover{ color:var(--hj-wood); }
strong{ color:var(--hj-black); }

/* dezente Zierlinie unter Hauptüberschriften der Seiten */
.entry-content > h2:not(.hj-plain)::after,
.hj-heading::after{
  content:""; display:block; width:64px; height:3px;
  background:var(--hj-earth); margin:.55rem 0 0; border-radius:3px;
}

/* ---------- Kopfbereich (Astra Header) ---------- */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-theme-transparent-header .main-header-bar{
  background-color:var(--hj-green) !important;
  border-bottom:3px solid var(--hj-earth);
}
.site-title a,
.site-title,
.ast-site-identity .site-title a{
  font-family:var(--hj-serif) !important;
  color:var(--hj-cream) !important;
  font-weight:600;
  letter-spacing:.04em;
}
.site-description{ color:var(--hj-moss) !important; }

.main-header-menu a,
.ast-header-navigation-wrap a,
.main-navigation a,
.menu-link{
  color:var(--hj-cream) !important;
  font-family:var(--hj-sans) !important;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.86rem;
}
.main-header-menu a:hover,
.menu-link:hover,
.current-menu-item > .menu-link{
  color:#fff !important;
}
/* Untermenüs */
.main-header-menu .sub-menu,
.ast-menu-toggle + .sub-menu,
.main-navigation ul ul{
  background-color:var(--hj-green) !important;
  border-top:3px solid var(--hj-earth);
  box-shadow:var(--hj-shadow);
}
.main-header-menu .sub-menu a{ text-transform:none; font-size:.9rem; }
/* Mobile Menü-Icon */
.ast-mobile-menu-buttons-minimal,
.menu-toggle{ color:var(--hj-cream) !important; }
.ast-mobile-header-wrap .main-header-menu{ background:var(--hj-green) !important; }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.ast-button,
.ast-custom-button,
button.menu-toggle,
input[type="submit"],
.wpforms-submit{
  background-color:var(--hj-green) !important;
  color:var(--hj-cream) !important;
  border:2px solid var(--hj-green) !important;
  border-radius:var(--hj-radius) !important;
  font-family:var(--hj-sans) !important;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.7em 1.6em !important;
  transition:all .18s ease;
}
.wp-block-button__link:hover,
input[type="submit"]:hover,
.wpforms-submit:hover{
  background-color:var(--hj-earth) !important;
  border-color:var(--hj-earth) !important;
  color:var(--hj-black) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important; color:var(--hj-green) !important;
  border-color:var(--hj-green) !important;
}

/* ---------- Layout-Bausteine ---------- */
.hj-wrap{ max-width:var(--hj-maxw); margin-inline:auto; padding-inline:24px; }
.hj-narrow-wrap{ max-width:var(--hj-narrow); margin-inline:auto; padding-inline:24px; }

/* Sektionen: als Gruppen-Block mit Zusatzklasse nutzbar */
.hj-section{ padding-block:clamp(3rem,7vw,6rem); }
.hj-section.hj-green{ background:var(--hj-green); color:var(--hj-cream); }
.hj-section.hj-green :is(h1,h2,h3,h4,h5,h6){ color:var(--hj-cream); }
.hj-section.hj-green a{ color:#fff; }
.hj-section.hj-cream{ background:var(--hj-cream); }
.hj-section.hj-paper2{ background:var(--hj-paper2); }
.hj-section.hj-moss{ background:var(--hj-moss); color:var(--hj-black); }

/* Kicker / Auszeichnungszeile im Flyer-Stil */
.hj-kicker{
  font-family:var(--hj-sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:.82rem; font-weight:700; color:#6e5426; /* dunkles Ocker: guter Kontrast auf Creme */
  display:block; margin-bottom:.7rem;
}
.hj-section.hj-green .hj-kicker{ color:#c6d2c0; } /* helles Salbei auf Dunkelgrün */

/* Intro-/Lead-Absatz */
.hj-lead{ font-size:1.25rem; line-height:1.6; color:var(--hj-black); }
.hj-section.hj-green .hj-lead{ color:var(--hj-cream); }

/* Zierschrift (Flyer-Handschrift-Zeilen) – kursive Serifen als Ersatz */
.hj-script{ font-family:var(--hj-serif); font-style:italic; font-weight:600;
  font-size:clamp(1.7rem,3vw,2.5rem); color:var(--hj-wood); }
.hj-section.hj-green .hj-script{ color:#e3c79f; } /* helles Warm auf Dunkelgrün */

/* ---------- Hero (Cover-Block .hj-hero) ---------- */
.hj-hero.wp-block-cover{ min-height:78vh; color:var(--hj-cream); }
.hj-hero .wp-block-cover__inner-container{ max-width:var(--hj-maxw); margin-inline:auto; padding-inline:24px; }
.hj-hero h1{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); font-size:clamp(2.8rem,6vw,5rem); }
.hj-hero .hj-kicker{ color:var(--hj-cream); }
.hj-hero p{ font-size:1.2rem; text-shadow:0 1px 10px rgba(0,0,0,.4); }

/* ---------- Feature-Karten (Werte aus dem Flyer) ---------- */
.hj-features{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-block:2rem;
}
.hj-feature{
  background:var(--hj-paper2); border:1px solid rgba(140,111,82,.28);
  border-radius:var(--hj-radius); padding:1.6rem 1.4rem; text-align:center;
}
.hj-section.hj-green .hj-feature{ background:rgba(255,255,255,.06); border-color:rgba(220,215,201,.25); }
.hj-feature h3{ font-size:1.25rem; margin:.2rem 0 .5rem; }
.hj-feature p{ font-size:1rem; margin:0; }
.hj-feature .hj-ico{ font-size:2rem; line-height:1; display:block; margin-bottom:.6rem; }

/* Produkt-Kacheln */
.hj-products{ display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.hj-products .hj-feature{ padding:1.2rem 1rem; }

/* ---------- Bilder & Galerie ---------- */
.entry-content img,
.wp-block-image img{ border-radius:var(--hj-radius); }
.wp-block-image figcaption{ font-family:var(--hj-sans); color:#5f4a2a; font-size:.9rem; }

/* Galerie-Optik + Zoom-Hinweis */
.wp-block-gallery.hj-gallery{ gap:12px !important; }
.entry-content a > img,
.hj-gallery img,
img.hj-zoom{
  cursor:zoom-in; transition:transform .25s ease, box-shadow .25s ease;
}
.entry-content a:hover > img,
.hj-gallery img:hover{ transform:scale(1.015); box-shadow:var(--hj-shadow); }

/* dünne Trennlinie im Flyer-Stil */
.hj-rule{ border:0; height:2px; background:linear-gradient(90deg,transparent,var(--hj-earth),transparent); margin:2.5rem auto; max-width:220px; }

/* ---------- Fußbereich ---------- */
.site-footer,
.ast-small-footer,
.footer-adv,
.ast-footer-overlay{
  background-color:var(--hj-green) !important;
  color:var(--hj-cream) !important;
  border-top:3px solid var(--hj-earth);
}
.site-footer a,.ast-small-footer a{ color:var(--hj-moss) !important; }
.site-footer a:hover{ color:#fff !important; }

/* Inhaltsbreite etwas komfortabler */
.entry-content{ font-size:1.05rem; }
.ast-container{ max-width:var(--hj-maxw); }

/* ======================================================================
   LIGHTBOX  – Klick aufs Foto => Popup ~1/3 der Bildschirmgröße
   ====================================================================== */
#hj-lightbox{
  position:fixed; inset:0; z-index:99999;
  display:none; align-items:center; justify-content:center;
  background:rgba(31,30,26,.86); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
#hj-lightbox.hj-open{ display:flex; opacity:1; }
#hj-lightbox .hj-lb-figure{
  margin:0; text-align:center;
  /* ~1/3 der Bildschirmfläche auf Desktop */
  max-width:36vw; max-height:62vh;
  animation:hjPop .22s ease;
}
#hj-lightbox img{
  display:block; max-width:36vw; max-height:56vh;
  width:auto; height:auto; border-radius:var(--hj-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.5); background:var(--hj-paper);
}
#hj-lightbox figcaption{
  color:var(--hj-cream); font-family:var(--hj-sans); font-size:.95rem;
  margin-top:.8rem;
}
#hj-lightbox .hj-lb-close{
  position:fixed; top:22px; right:26px; width:48px; height:48px;
  border:2px solid var(--hj-cream); background:transparent; color:var(--hj-cream);
  border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s ease;
}
#hj-lightbox .hj-lb-close:hover{ background:var(--hj-earth); border-color:var(--hj-earth); color:var(--hj-black); }
@keyframes hjPop{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Auf kleineren Bildschirmen wäre 1/3 zu winzig -> größer & lesbar */
@media (max-width:1024px){
  #hj-lightbox .hj-lb-figure{ max-width:82vw; max-height:80vh; }
  #hj-lightbox img{ max-width:82vw; max-height:72vh; }
}

/* ---------- Responsive Feinschliff ---------- */
@media (max-width:600px){
  body{ font-size:17px; }
  .hj-section{ padding-block:2.5rem; }
}

/* ======================================================================
   ÜBERSTEUERUNG gegen Astras Inline-CSS (gleiche Spezifität -> !important)
   Sichert Schriften & Farben des Flyer-Designs zuverlässig ab.
   ====================================================================== */
body,
.ast-container,
p, li, td, th, .entry-content{
  font-family:var(--hj-sans) !important;
  color:var(--hj-black);
}
h1,h2,h3,h4,h5,h6,
.entry-title, .entry-title a,
.entry-content :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--hj-serif) !important;
  color:var(--hj-green) !important;
}
.site-title, .site-title a{ font-family:var(--hj-serif) !important; color:var(--hj-cream) !important; }
/* Auf dunkelgrünen Sektionen Überschriften hell halten */
.hj-section.hj-green :is(h1,h2,h3,h4,h5,h6){ color:var(--hj-cream) !important; }
.hj-hero :is(h1,h2,h3){ color:#fff !important; }
/* Astra-Akzentfarbe (Links/Rahmen) auf unsere Palette ziehen */
:root{
  --ast-global-color-0:#36513B; /* Akzent -> Waldgrün  */
  --ast-global-color-1:#2b4130; /* Akzent-Hover        */
  --ast-global-color-3:#1F1E1A; /* Textfarbe -> Tiefschwarz */
  --ast-global-color-4:#E7E3D8; /* heller Hintergrund  */
}
a{ color:var(--hj-green); }
a:hover{ color:var(--hj-wood); }
/* Links auf dunkelgrünen Sektionen hell + gut lesbar */
.hj-section.hj-green a{ color:#fff; }
.hj-section.hj-green a:hover{ color:var(--hj-cream); }

/* ======================================================================
   KORREKTUREN nach Screenshot-Prüfung
   ====================================================================== */

/* 1) Hero: stärkerer Kontrast + helle Schrift + Outline-Button hell */
.hj-hero .wp-block-cover__background{ background-color:rgba(31,30,26,.5) !important; }
.hj-hero :is(p, .hj-kicker){ color:var(--hj-cream) !important; }
.hj-hero .hj-kicker{ text-shadow:0 1px 12px rgba(0,0,0,.55); margin-bottom:1rem; }
.hj-hero p{ text-shadow:0 1px 12px rgba(0,0,0,.6); }
.hj-hero h1{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
.hj-hero .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important; color:var(--hj-cream) !important; border-color:var(--hj-cream) !important;
}
.hj-hero .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--hj-cream) !important; color:var(--hj-green) !important;
}

/* 2) Text auf dunkelgrünen Sektionen hell (schlägt die p{color:black}-Regel) */
.hj-section.hj-green :is(p, li, .hj-lead){ color:var(--hj-cream); }

/* 3) Navigations-/Produktkacheln: keine Unterstreichung, sauberer Hover */
a.hj-feature{ text-decoration:none; display:block; color:inherit; }
a.hj-feature h3{ text-decoration:none; margin:0; }
a.hj-feature:hover{ border-color:var(--hj-earth); background:var(--hj-cream); transform:translateY(-2px); }
.hj-feature{ transition:transform .18s ease, background .18s ease, border-color .18s ease; }

/* 4) Mobiles Menü: Hamburger-Button zuverlässig sichtbar */
.ast-mobile-menu-buttons,
.ast-header-navigation-wrap .menu-toggle,
button.menu-toggle,
.main-header-menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  color:var(--hj-cream) !important;
  background:transparent !important;
  border:0 !important;
}
.ast-mobile-menu-buttons svg,
.menu-toggle svg,
.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-trigger-fill svg,
.menu-toggle .menu-toggle-icon{
  fill:var(--hj-cream) !important; color:var(--hj-cream) !important;
}
/* Off-Canvas-Panel im Markenlook */
.ast-mobile-popup-drawer .main-header-menu,
.ast-mobile-header-wrap .main-header-menu{ background:var(--hj-green) !important; }

/* ======================================================================
   KONTAKTFORMULAR
   ====================================================================== */
.hj-contact-form{ max-width:640px; }
.hj-contact-form .hj-field{ margin-bottom:1.1rem; display:flex; flex-direction:column; }
.hj-contact-form .hj-field label{ font-weight:600; color:var(--hj-green); margin-bottom:.35rem; }
.hj-contact-form input[type="text"],
.hj-contact-form input[type="email"],
.hj-contact-form textarea{
  width:100%; padding:.72em .9em;
  border:1px solid rgba(140,111,82,.45); border-radius:var(--hj-radius);
  background:var(--hj-paper2); color:var(--hj-black);
  font-family:var(--hj-sans); font-size:1rem;
}
.hj-contact-form input:focus,
.hj-contact-form textarea:focus{
  outline:none; border-color:var(--hj-green);
  box-shadow:0 0 0 3px rgba(54,81,59,.16);
}
.hj-contact-form textarea{ resize:vertical; }
.hj-contact-form .hj-consent{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.92rem; line-height:1.5; margin:.4rem 0 1.3rem;
}
.hj-contact-form .hj-consent input{ margin-top:.28rem; flex:0 0 auto; }
.hj-contact-form button{ cursor:pointer; }
/* Honeypot unsichtbar */
.hj-contact-form .hj-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Rückmeldungen */
.hj-form-note{ padding:1rem 1.2rem; border-radius:var(--hj-radius); margin-bottom:1.5rem; font-size:1rem; }
.hj-form-ok{ background:rgba(54,81,59,.12); border:1px solid var(--hj-green); color:var(--hj-green); }
.hj-form-err{ background:rgba(176,139,91,.16); border:1px solid var(--hj-earth); color:#7a4a2b; }
.hj-form-err a{ color:#7a4a2b; }

/* ======================================================================
   INHALTS-POPUP (Datenschutz im Kontaktformular) – ~1/3 Bildschirm
   ====================================================================== */
#hj-modal{
  position:fixed; inset:0; z-index:100000;
  display:none; align-items:center; justify-content:center;
  background:rgba(31,30,26,.86); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .2s ease;
}
#hj-modal.hj-open{ display:flex; opacity:1; }
#hj-modal .hj-modal-panel{
  position:relative; display:flex; flex-direction:column;
  background:var(--hj-paper2); color:var(--hj-black);
  /* ~1/3 der Bildschirmbreite (mit lesbarer Mindestbreite) */
  width:34vw; min-width:380px; max-width:92vw;
  max-height:64vh;
  border-radius:var(--hj-radius);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:hjPop .22s ease;
  overflow:hidden;
}
#hj-modal .hj-modal-body{ overflow-y:auto; padding:1.8rem 1.9rem; }
#hj-modal .hj-modal-body .hj-section{ padding:0 !important; }
#hj-modal .hj-modal-body .wp-block-group{ margin:0 !important; }
#hj-modal .hj-modal-body h2{ margin-top:0; font-size:1.7rem; }
#hj-modal .hj-modal-body h3{ font-size:1.15rem; margin-top:1.3rem; }
#hj-modal .hj-modal-body p,
#hj-modal .hj-modal-body li{ font-size:.95rem; }
#hj-modal .hj-modal-loading{ padding:1rem; color:var(--hj-wood); }
#hj-modal .hj-modal-close{
  position:absolute; top:8px; right:10px; z-index:3;
  width:40px; height:40px; border:0; cursor:pointer;
  background:var(--hj-cream); color:var(--hj-green);
  border-radius:50%; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18); transition:all .18s ease;
}
#hj-modal .hj-modal-close:hover{ background:var(--hj-earth); color:var(--hj-black); }

/* Auf kleineren Bildschirmen größer & lesbar */
@media (max-width:1024px){
  #hj-modal .hj-modal-panel{ width:90vw; min-width:0; max-height:82vh; }
}

/* ======================================================================
   „Neuigkeiten" (Latest Posts Block) – Markenlook & Kontrast
   ====================================================================== */
.wp-block-latest-posts__post-title{ font-family:var(--hj-serif) !important; color:var(--hj-green) !important; font-size:1.35rem; font-weight:600; }
.wp-block-latest-posts a{ color:var(--hj-green); }
.wp-block-latest-posts__post-date,
.wp-block-latest-posts time{ color:#5f4a2a !important; font-size:.85rem; }
.wp-block-latest-posts__post-excerpt{ color:var(--hj-black); }

/* ======================================================================
   RESPONSIVE / MOBIL-OPTIMIERUNG (Kontrast + Lesbarkeit + Layout)
   ====================================================================== */

/* Komfortable Seitenränder für Voll-Breite-Sektionen */
.hj-section{ padding-inline:clamp(18px,4vw,24px); }

/* Tablet */
@media (max-width:1024px){
  .hj-hero.wp-block-cover{ min-height:64vh; }
}

/* Handy */
@media (max-width:600px){
  body{ font-size:17px; line-height:1.65; }
  h1,.entry-content :where(h1){ font-size:2.3rem; }
  h2{ font-size:1.75rem; }
  h3{ font-size:1.35rem; }

  .hj-hero.wp-block-cover{ min-height:58vh; }
  .hj-hero h1{ font-size:2.4rem; }
  .hj-hero p{ font-size:1.05rem; }

  .hj-section{ padding-block:2.6rem; }
  .hj-lead{ font-size:1.12rem; }

  /* Buttons voll nutzbar & fingerfreundlich */
  .wp-block-buttons{ width:100%; }
  .wp-block-button{ width:100%; }
  .wp-block-button__link{ display:block; text-align:center; }

  /* Galerien: max. 2 Spalten statt gequetschter Miniaturen */
  .wp-block-gallery.hj-gallery.has-nested-images figure.wp-block-image{
    width:calc(50% - 6px) !important;
  }
  .hj-features{ grid-template-columns:1fr; }
  .hj-products{ grid-template-columns:1fr 1fr; }

  /* Formular & Popup fingerfreundlich */
  .hj-contact-form input,
  .hj-contact-form textarea{ font-size:16px; } /* verhindert iOS-Zoom */
}

/* Sehr schmale Geräte */
@media (max-width:380px){
  .hj-products{ grid-template-columns:1fr; }
  .hj-hero h1{ font-size:2.1rem; }
}

/* ======================================================================
   NACHBESSERUNGEN (Audit-Runde 2)
   ====================================================================== */

/* Kacheln: garantiert ohne Unterstreichung (schlägt Astra .entry-content a) */
a.hj-feature,
a.hj-feature:hover,
a.hj-feature h3{ text-decoration:none !important; }

/* Footer (Astra Footer-Builder): Waldgrün + helle, gut lesbare Schrift */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .site-below-footer-inner-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .ast-builder-grid-row{
  background-color:var(--hj-green) !important;
}
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .footer-navigation .menu-link,
.site-footer a{ color:var(--hj-cream) !important; }
.site-footer .footer-navigation .menu-link{ text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.site-footer .footer-navigation .menu-link:hover,
.site-footer a:hover{ color:#ffffff !important; }

/* Termine-Liste (eigener Shortcode) */
.hj-termine-liste{ list-style:none; margin:0 0 1.6rem; padding:0; }
.hj-termin{
  padding:.95rem 0; border-bottom:1px solid rgba(140,111,82,.28);
  display:flex; gap:.4rem 1.2rem; flex-wrap:wrap; align-items:baseline;
}
.hj-termin-datum{ color:#6e5426; font-weight:700; font-size:.9rem; min-width:180px; }
.hj-termin-titel{ font-family:var(--hj-serif); font-size:1.25rem; color:var(--hj-green); text-decoration:none; }
.hj-termin-titel:hover{ color:var(--hj-wood); }
.hj-termine-leer{ font-size:1.1rem; color:var(--hj-black); margin-bottom:1.6rem; }
.hj-termine-cta{ margin-top:.5rem; }

/* ======================================================================
   FLYER-STIL: Logo, Papier-Textur, Icons, Badges, Handschrift, Ornamente
   ====================================================================== */

/* --- Papier-/Kraftpapier-Textur (feines Rauschen) --- */
body{
  background-color:var(--hj-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hj-section.hj-cream, .hj-section.hj-paper2{ position:relative; }
/* Dunkelgrüne Sektionen: leichte, hellere Körnung */
.hj-section.hj-green{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23m)'/%3E%3C/svg%3E"), linear-gradient(var(--hj-green),var(--hj-green));
}

/* --- Logo im Header (Astra Custom-Logo) – groß & sichtbar --- */
.site-header .custom-logo,
.ast-site-identity .custom-logo,
.custom-logo-link img.custom-logo{
  max-height:118px !important; height:auto !important; width:auto !important;
}
.site-header .site-branding,
.ast-site-identity{ padding-block:6px; }
@media (max-width:921px){ .site-header .custom-logo{ max-height:92px !important; } }
@media (max-width:600px){ .site-header .custom-logo{ max-height:74px !important; } }
/* Text-Titel ausblenden, sobald das Logo den Namen trägt */
.ast-logo-title-inline .site-title,
.site-header .site-title{ display:none; }

/* --- Logo im Footer (dekorativ über dem Fußmenü) --- */
.site-footer .site-below-footer-wrap::before{
  content:""; display:block; width:150px; height:148px; margin:0 auto 18px;
  background:url("img/logo-cream.png") no-repeat center/contain; opacity:.97;
}

/* --- Icon-Kacheln (Produkte & Werte) --- */
.hj-feature--icon{ display:flex; flex-direction:column; align-items:center; }
.hj-feature-ico{ display:block; width:58px; height:58px; margin:0 auto .75rem; color:var(--hj-green); }
.hj-feature-ico img,
.hj-feature-ico svg{ width:100%; height:100%; object-fit:contain; display:block; }
.hj-products .hj-feature--icon .hj-feature-ico{ width:50px; height:50px; }
/* Werte-SVGs (inline) auf Grün hell einfärben */
.hj-section.hj-green .hj-feature-ico{ color:var(--hj-cream); }
.hj-section.hj-green .hj-feature--icon h3{ color:var(--hj-cream); }
.hj-section.hj-green .hj-feature--icon p{ color:var(--hj-cream); }

/* --- Runde Siegel / Badges (wie im Flyer) --- */
.hj-badges{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:center; }
.hj-badge{
  width:190px; height:190px; flex:0 0 auto; border-radius:50%;
  background:var(--hj-cream); color:var(--hj-green);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--hj-serif); text-transform:uppercase; letter-spacing:.12em;
  font-size:1.05rem; line-height:1.55; font-weight:600;
  padding:1.4rem; box-shadow:0 10px 30px rgba(0,0,0,.22);
  border:1px solid rgba(140,111,82,.35);
}
.hj-badge::after{
  content:""; position:absolute; width:170px; height:170px; border-radius:50%;
  border:1px solid rgba(54,81,59,.35); pointer-events:none;
}
.hj-badge span{ display:block; }
.hj-badge .hj-badge-sprig{ width:34px; height:16px; margin-top:.5rem; color:var(--hj-earth);
  -webkit-mask:url("icons/sprig.svg") no-repeat center/contain; mask:url("icons/sprig.svg") no-repeat center/contain;
  background:currentColor; }

/* --- Handschrift (Sacramento) für Zier-Zeilen --- */
.hj-script{ font-family:'Sacramento', 'Cormorant Garamond', cursive !important;
  font-style:normal; font-weight:400;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.25; color:var(--hj-wood); }
.hj-section.hj-green .hj-script{ color:#e3c79f; }

/* --- Botanisches Ornament (Blatt-Zweig) als Trenner --- */
.hj-ornament{
  display:block; width:64px; height:28px; margin:0 auto 1.1rem;
  background:currentColor; color:var(--hj-earth);
  -webkit-mask:url("icons/sprig.svg") no-repeat center/contain; mask:url("icons/sprig.svg") no-repeat center/contain;
}
.hj-ornament.is-center{ margin-inline:auto; }
.hj-section.hj-green .hj-ornament{ color:var(--hj-moss); }

/* Badges auf schmalen Screens etwas kleiner */
@media (max-width:600px){
  .hj-badge{ width:160px; height:160px; font-size:.95rem; }
  .hj-badge::after{ width:142px; height:142px; }
}