/* =====================================================================
   LANDKREISFOTO – Warme, ländliche Palette
   Lädt ZULETZT und verschiebt nur Farben/Akzente des Crafto-Themes.
   Layout bleibt 1:1 zum Ambergfoto-Shop.
   --------------------------------------------------------------------- */
:root {
  --lk-ink:        #2a2620;   /* warmes Anthrazit (Text) */
  --lk-green:      #3d5a36;   /* Wald-/Olivgrün – Primär-Akzent */
  --lk-green-dark: #2b3a27;   /* Footer / Topbar */
  --lk-green-700:  #324a2d;   /* Button-Hover */
  --lk-cream:      #fbf9f5;   /* sehr dezenter warmer Seitenhintergrund */
  --lk-sand:       #f4f0e9;   /* Karten-/Flächenton, abgemildert */
  --lk-sand-line:  #ebe5da;   /* warme Trennlinie, sanfter */
  --lk-terra:      #b5613c;   /* sparsamer Zweit-Akzent (Herz) */
}

/* ---------- Grundfläche ---------- */
html { background-color: var(--lk-cream); }
body { background-color: var(--lk-cream); color: var(--lk-ink); display: flow-root; overflow-x: hidden; }

/* warme Graustufen-Flächen statt kühlem #f7f7f7 */
.bg-very-light-gray { background-color: var(--lk-sand) !important; }
.bg-gradient-very-light-gray {
  background-image: linear-gradient(180deg, #f4f0e9 0%, #fbf9f5 100%) !important;
}
.border-color-extra-medium-gray { border-color: var(--lk-sand-line) !important; }

/* ---------- Dunkelgrün statt Blue-Whale (Footer + Topbar) ---------- */
.bg-blue-whale { background-color: var(--lk-green-dark) !important; }
.text-blue-whale { color: var(--lk-green-dark) !important; }

/* ---------- Primär-Buttons: dunkles Anthrazit -> Grün ---------- */
.btn-dark-gray,
a.btn-dark-gray {
  background-color: var(--lk-green) !important;
  border-color: var(--lk-green) !important;
  color: #fff !important;
}
.btn-dark-gray:hover,
a.btn-dark-gray:hover {
  background-color: var(--lk-green-700) !important;
  border-color: var(--lk-green-700) !important;
  color: #fff !important;
}
.bg-dark-gray { background-color: var(--lk-green) !important; }

/* ---------- Akzent-Elemente im Shop ---------- */
.size-btn.active            { background: var(--lk-green) !important; border-color: var(--lk-green) !important; }
.size-btn:hover             { background: var(--lk-sand) !important; border-color: var(--lk-green) !important; }
.shop-cat-list button.active{ background: var(--lk-green) !important; }
.shop-grid .lable,
.related-grid .lable        { background: var(--lk-green) !important; }
.tag-cloud a:hover          { background: var(--lk-green) !important; }
.co-item-badge              { background: var(--lk-green) !important; }
.shop-help                  { background: var(--lk-green-dark) !important; }
.thankyou-icon              { background: #e7efe1 !important; }
.thankyou-icon i,
.trust-row i,
.text-success               { color: var(--lk-green) !important; }
.variant-select-wrap select:focus,
.size-btn:focus,
.co-field input:focus,
.co-field textarea:focus    { border-color: var(--lk-green) !important; }
.co-check input             { accent-color: var(--lk-green); }
.af-consent-accept          { background: var(--lk-green); }
.af-consent-accept:hover    { background: var(--lk-green-700); }
.af-toast                   { background: var(--lk-green-dark); }

/* kleiner Zweit-Akzent */
.text-red, .bi-heart-fill.text-red { color: var(--lk-terra) !important; }

/* Links in dunklen Bereichen / Unterstreichungen */
.footer-dark .text-decoration-line-bottom,
.text-decoration-line-bottom-medium { text-decoration-color: rgba(255,255,255,.5); }

/* ================= HERO =================
   Der Hero (outstock-*) nutzt bewusst die ORIGINALE Definition aus style.css
   (height 860px, seitliche Ränder, h1 96px, linksbündig padding-left 120px,
   Bild images/bgbig.jpg, transparenter Button mit Rahmen) — exakt wie live.
   Hier KEINE Überschreibungen, damit der Look 1:1 dem Server entspricht. */

/* ================= Markenschriftzug ================= */
.amberg, .foto { font-family: var(--alt-font, sans-serif); letter-spacing: -.5px; }
.navbar-brand .brand-mark { color: var(--lk-green); }

/* „bereits gedruckt für" / Vertrauensleiste – schlichte warme Chips statt fehlender Logos */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  padding: 6px 0 0;
}
.trust-strip span {
  font-family: var(--alt-font, sans-serif);
  font-size: 14px; font-weight: 600; letter-spacing: .3px;
  color: #7c7461;
  background: var(--lk-sand);
  border: 1px solid var(--lk-sand-line);
  padding: 9px 18px; border-radius: 40px;
}

/* Über-mich-Bild rund & warm gerahmt */
.about-portrait {
  border-radius: 14px; box-shadow: 0 18px 44px rgba(42,38,32,.14);
  border: 6px solid #fff;
}