/*
Theme Name:  Southforks
Theme URI:   https://maikharing.com
Description: Custom Theme für Southforks All Eyes On Me – Australian Kelpie Zucht. Erstellt mit SiteOrigin Page Builder Unterstützung.
Version:     1.1.0
Author:      Maik Haring
Author URI:  https://maikharing.com
License:     Private
Text Domain: southforks
Tags:        custom-background, custom-logo, custom-menu, full-width-template, siteorigin
*/

/* ─────────────────────────────────────────────────────────────
   SOUTHFORKS THEME — v1.1.0
   Maik Haring · maikharing.com
   Live-Pass: Responsive, Overflow, A11y, SEO, Placeholder-Fix
   ───────────────────────────────────────────────────────────── */

/* ── CSS CUSTOM PROPERTIES ───────────────────────────────────── */
:root {
  --sf-gold:        #C89A45;
  --sf-gold-lt:     #D9AB55;
  --sf-gold-dim:    #BFB089;
  --sf-cream:       #F9F7ED;
  --sf-cream-dim:   #D9D1BA;
  --sf-dark:        #1A2225;
  --sf-dark2:       #20292D;
  --sf-dark3:       #171C20;
  --sf-dark4:       #0E1416;
  --sf-text:        #E8E0D0;
  --sf-text-dim:    #9A9080;
  --sf-radius:      6px;
  --sf-max-w:       1100px;
  --sf-section-pad: 6rem 2rem;
  --sf-header-h:    144px;  /* zentrale Variable für Header-Höhe */
}

/* ── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0; /* P1: verhindert Grid/Flex-Overflow */
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* P8: scroll-margin global für alle Anker-Ziele */
}

/* P5: scroll-margin-top für alle Section-Anker */
[id] {
  scroll-margin-top: calc(var(--sf-header-h) + 1rem);
}

body {
  background-color: var(--sf-dark);
  color: var(--sf-text);
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  /* KEIN overflow-x:hidden am body – kaschiert nur, löst nicht */
}

/* P1: Echter Overflow-Fix am HTML-Element */
html {
  overflow-x: clip; /* clip statt hidden – scroll-position bleibt erhalten */
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--sf-dark2); }
::-webkit-scrollbar-thumb { background: var(--sf-gold); border-radius: 3px; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-cream);
  line-height: 1.15;
  /* P8: lange Namen nicht überlaufen lassen */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* P5: h1 visuell wie h2 – aber semantisch korrekt */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h4 { font-size: 1rem; letter-spacing: 0.12em; }

p {
  line-height: 1.8;
  margin-bottom: 1rem;
  overflow-wrap: break-word;
}
p:last-child { margin-bottom: 0; }

a {
  color: var(--sf-gold);
  text-decoration: none;
  transition: color .2s;
}
a:hover { color: var(--sf-gold-lt); }

/* P3: sichtbarer Fokus-State für Tastatur */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sf-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

em { font-style: normal; color: var(--sf-gold); }
strong { color: var(--sf-cream); font-weight: 700; }

ul, ol { padding-left: 1.5rem; }
li { margin-bottom: 0.4rem; }

/* P8: alle Bilder sicher */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: none;
  border-top: 1px solid rgba(201,154,69,0.15);
  margin: 0;
}

/* ── P8: REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── LAYOUT HELPERS ───────────────────────────────────────────── */
.sf-container {
  max-width: var(--sf-max-w);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%; /* P1 */
}

.sf-section { padding: var(--sf-section-pad); }
.sf-section--dark  { background-color: var(--sf-dark); }
.sf-section--dark2 { background-color: var(--sf-dark2); }
.sf-section--dark3 { background-color: var(--sf-dark3); }

.sf-eyebrow {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.sf-gold-rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, var(--sf-gold), transparent);
  margin-bottom: 2rem;
}

/* ── HEADER / NAV ─────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--sf-header-h);
  background: rgba(26,34,37,0.97);
  border-bottom: 1px solid rgba(201,154,69,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  transition: background .3s;
}

#site-header.scrolled {
  background: rgba(14,20,22,0.99);
  border-bottom-color: rgba(201,154,69,0.3);
}

.site-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  height: 110px;
  width: auto;
  mix-blend-mode: lighten;
  filter: brightness(1.05);
  transition: opacity .2s;
}
.site-logo img:hover { opacity: 0.85; }

.site-logo-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-cream);
  text-decoration: none;
  line-height: 1.2;
}
.site-logo-text span {
  display: block;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--sf-gold-dim);
  margin-top: 0.2rem;
}

/* ── NAVIGATION ───────────────────────────────────────────────── */
#site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

#site-nav ul li a {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sf-text-dim);
  text-decoration: none;
  transition: color .2s;
  /* P3: mindest Touch-Fläche für Nav-Links */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.1rem;
  border-bottom: 1px solid transparent;
}

#site-nav ul li a:hover,
#site-nav ul li.current-menu-item > a,
#site-nav ul li.current_page_item > a {
  color: var(--sf-gold);
  border-bottom-color: var(--sf-gold);
}

/* Nav CTA */
#site-nav ul li.menu-item-cta > a {
  background: var(--sf-gold);
  color: var(--sf-dark);
  padding: 0.45rem 1.25rem;
  border-radius: var(--sf-radius);
  font-weight: 800;
  border-bottom: none;
  min-height: 44px;
}
#site-nav ul li.menu-item-cta > a:hover {
  background: var(--sf-gold-lt);
  color: var(--sf-dark);
}

/* Dropdown */
#site-nav ul li { position: relative; }
#site-nav ul li ul {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 220px;
  background: var(--sf-dark2);
  border: 1px solid rgba(201,154,69,0.2);
  border-radius: var(--sf-radius);
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#site-nav ul li:hover > ul { display: flex; }
#site-nav ul li ul li a {
  display: block;
  padding: 0.6rem 1.25rem;
  min-height: 44px;
  font-size: 0.75rem;
  border-bottom: none;
  white-space: nowrap;
}
#site-nav ul li ul li a:hover {
  background: rgba(201,154,69,0.08);
  border-bottom: none;
}

/* ── P2: BURGER BUTTON ────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  /* P2+P3: mindestens 44×44 px Touch-Fläche */
  width: 48px;
  height: 48px;
  border-radius: var(--sf-radius);
  transition: background .2s;
  flex-shrink: 0;
}
.nav-burger:hover { background: rgba(200,154,69,0.1); }
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sf-gold);
  transition: all .3s;
  pointer-events: none;
}

/* Burger → X beim Öffnen */
.nav-burger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-burger.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-burger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── PAGE WRAPPER ─────────────────────────────────────────────── */
#page {
  padding-top: var(--sf-header-h);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.sf-btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* P3: mindestens 44px hoch */
  min-height: 44px;
  padding: 0.75rem 2rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--sf-radius);
  transition: all .25s;
  cursor: pointer;
  border: none;
  line-height: 1;
}

.sf-btn-gold,
button[type="submit"],
input[type="submit"] {
  background: var(--sf-gold);
  color: var(--sf-dark);
}
.sf-btn-gold:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--sf-gold-lt);
  color: var(--sf-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(200,154,69,0.35);
}

.sf-btn-outline {
  background: transparent;
  color: var(--sf-gold);
  border: 1px solid var(--sf-gold);
}
.sf-btn-outline:hover {
  background: rgba(200,154,69,0.1);
  color: var(--sf-gold-lt);
  transform: translateY(-2px);
}

/* ── HEALTH BADGES ────────────────────────────────────────────── */
/* P8: umbrechen, nicht überlaufen */
.sf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0;
}

.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(200,154,69,0.1);
  border: 1px solid rgba(200,154,69,0.3);
  color: var(--sf-gold-lt);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
  white-space: nowrap;
}
.sf-badge::before { content: '✓'; }

/* ── P1: CARDS GRID ───────────────────────────────────────────── */
/*
  sf-reveal wird NUR für Animationen verwendet.
  Für Grid-Layout nutzen wir sf-cards-grid.
  In den SO-JSONs ist das Grid inline via style="" – 
  wir überschreiben es hier sauber per Media Query.
*/
.sf-card {
  background: var(--sf-dark2);
  border: 1px solid rgba(200,154,69,0.12);
  border-radius: var(--sf-radius);
  padding: 2rem 1.75rem;
  transition: border-color .25s, transform .25s;
  /* P1: kein Overflow aus der Card heraus */
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.sf-card:hover {
  border-color: rgba(200,154,69,0.4);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .sf-card:hover { transform: none; }
}

/* P1: Inline-Grid in SO-Widgets auf Mobile überschreiben.
   Die Zuchtziel-Section nutzt style="display:grid;grid-template-columns:repeat(3,1fr)"
   Das können wir per !important-freiem Selector überschreiben: */
@media (max-width: 767px) {
  /* Direkte Grid-Container aus SO-Inline-Styles überschreiben */
  .so-widget-sow-editor [style*="grid-template-columns"],
  .so-widget-sow-text-editor [style*="grid-template-columns"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  /* Alle Grid/Flex Children absichern */
  [style*="display:grid"] > *,
  [style*="display: grid"] > * {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── DOG PROFILE CARD ─────────────────────────────────────────── */
.sf-dog-card {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 0;
  background: var(--sf-dark2);
  border: 1px solid rgba(200,154,69,0.12);
  border-radius: var(--sf-radius);
  overflow: hidden;
  margin-bottom: 3rem;
  width: 100%; /* P1 */
}

.sf-dog-card__img {
  position: relative;
  overflow: hidden;
}
.sf-dog-card__img img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sf-dog-card:hover .sf-dog-card__img img { transform: none; }
}
.sf-dog-card:hover .sf-dog-card__img img { transform: scale(1.03); }

.sf-dog-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--sf-gold);
  color: var(--sf-dark);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
}

.sf-dog-card__body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* P1 */
}

.sf-dog-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.sf-stat-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin-bottom: 0.15rem;
}
.sf-stat-value {
  font-size: 0.88rem;
  color: var(--sf-cream);
  font-weight: 500;
  overflow-wrap: break-word; /* P8: lange Chip-Nummern */
}

/* ── P4: IMAGE PLACEHOLDER ────────────────────────────────────── */
/* Wenn kein Bild hinterlegt – neutraler Platzhalter */
.sf-img-placeholder {
  background: var(--sf-dark3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--sf-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  min-height: 300px;
  width: 100%;
}
.sf-img-placeholder::before {
  content: '🐾';
  font-size: 2.5rem;
  display: block;
}

/* ── LITTER CARDS ─────────────────────────────────────────────── */
.sf-litter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); /* P1 */
  gap: 1.5rem;
  width: 100%;
}

.sf-litter-card {
  background: var(--sf-dark2);
  border: 1px solid rgba(200,154,69,0.12);
  border-radius: var(--sf-radius);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
  min-width: 0; /* P1 */
}
.sf-litter-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200,154,69,0.4);
}
@media (prefers-reduced-motion: reduce) {
  .sf-litter-card:hover { transform: none; }
}

.sf-litter-card__header {
  background: linear-gradient(135deg, #2a1f08, var(--sf-dark2));
  padding: 1.5rem;
  border-bottom: 1px solid rgba(200,154,69,0.12);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sf-litter-letter {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--sf-gold);
  color: var(--sf-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  flex-shrink: 0;
}

.sf-litter-card__body {
  padding: 1.5rem;
  color: var(--sf-text-dim);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* ── STATUS PILLS ─────────────────────────────────────────────── */
.sf-pill {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.sf-pill--planned { background: rgba(200,154,69,0.15); color: var(--sf-gold);   border: 1px solid rgba(200,154,69,0.4); }
.sf-pill--born    { background: rgba(80,160,80,0.15);  color: #7dca7d;          border: 1px solid rgba(80,160,80,0.4); }
.sf-pill--placed  { background: rgba(80,80,160,0.15);  color: #8d9fea;          border: 1px solid rgba(80,80,160,0.4); }

/* ── P8: DNA TABLE ────────────────────────────────────────────── */
.sf-table-wrap {
  overflow-x: auto;
  /* P8: lokaler Scroll, kein globaler Overflow */
  -webkit-overflow-scrolling: touch;
  border-radius: var(--sf-radius);
  /* Scroll-Hinweis auf Mobile */
  position: relative;
}

/* Scroll-Hinweis Gradient rechts auf kleinen Screens */
@media (max-width: 767px) {
  .sf-table-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--sf-dark2));
    pointer-events: none;
    border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
  }
}

.sf-table {
  width: 100%;
  min-width: 520px; /* Tabelle darf intern größer sein, Wrapper scrollt */
  border-collapse: collapse;
  font-size: 0.85rem;
}
.sf-table thead tr {
  background: linear-gradient(90deg, #2a1f08, var(--sf-dark2));
  color: var(--sf-gold);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sf-table th, .sf-table td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sf-table tbody tr { color: var(--sf-text-dim); }
.sf-table tbody tr:hover { background: rgba(200,154,69,0.04); }
.sf-table .sf-result-ok { color: #7dca7d; font-weight: 700; font-size: 0.8rem; }

/* ── FORMS (WPForms) ──────────────────────────────────────────── */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select,
.sf-input {
  width: 100%;
  background: var(--sf-dark2);
  border: 1px solid rgba(200,154,69,0.25) !important;
  border-radius: var(--sf-radius) !important;
  color: var(--sf-text) !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.9rem !important;
  transition: border-color .25s !important;
  outline: none !important;
  box-shadow: none !important;
  /* P3: Touch-Freundlich */
  min-height: 44px;
}
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.sf-input:focus {
  border-color: var(--sf-gold) !important;
}
.wpforms-container label,
.wpforms-container .wpforms-field-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--sf-text-dim) !important;
  font-weight: 600 !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}
.wpforms-container .wpforms-submit-container { margin-top: 1rem; }
.wpforms-container button[type="submit"],
.wpforms-container input[type="submit"] {
  background: var(--sf-gold) !important;
  color: var(--sf-dark) !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.8rem 2.5rem !important;
  min-height: 44px !important; /* P3 */
}

/* P4: Formular-Platzhalter verstecken wenn WPForms nicht aktiv */
.sf-form-placeholder {
  display: none; /* wird nur per PHP ausgegeben wenn form_id leer */
}

/* ── PAGE HERO (Unterseiten) ──────────────────────────────────── */
.sf-page-hero {
  padding: 5rem 2rem 4rem;
  background: linear-gradient(135deg, #24302a 0%, var(--sf-dark) 60%);
  text-align: center;
  border-bottom: 1px solid rgba(200,154,69,0.15);
  position: relative;
  overflow: hidden;
}
.sf-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 60px,
    rgba(200,154,69,0.025) 60px, rgba(200,154,69,0.025) 61px
  );
  pointer-events: none;
}
.sf-page-hero__inner { position: relative; z-index: 1; }
.sf-page-hero__title { margin-bottom: 0.75rem; }
.sf-page-hero__sub {
  font-size: 0.85rem;
  color: var(--sf-text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sf-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--sf-text-dim);
  margin-bottom: 1.5rem;
}
.sf-breadcrumb a { color: var(--sf-text-dim); }
.sf-breadcrumb a:hover { color: var(--sf-gold); }
.sf-breadcrumb span { color: var(--sf-gold); }

/* ── FOOTER ───────────────────────────────────────────────────── */
#site-footer {
  background: var(--sf-dark4);
  border-top: 1px solid rgba(200,154,69,0.15);
  padding: 3rem 2.5rem 2rem;
}
.sf-footer-inner {
  max-width: var(--sf-max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}
.sf-footer-logo {
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-cream);
  margin-bottom: 0.5rem;
}
.sf-footer-logo img {
  height: 48px;
  width: auto;
  mix-blend-mode: lighten;
  margin-bottom: 1rem;
}
.sf-footer-col h4 {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin-bottom: 1rem;
  font-weight: 700;
}
.sf-footer-col ul { list-style: none; padding: 0; }
.sf-footer-col ul li { margin-bottom: 0.5rem; }
/* P3: Footer-Links – ausreichend Abstand, keine künstlichen Buttons */
.sf-footer-col ul li a {
  color: var(--sf-text-dim);
  font-size: 0.85rem;
  transition: color .2s;
  display: inline-block;
  padding: 0.2rem 0; /* etwas mehr Tippfläche */
  line-height: 1.6;
}
.sf-footer-col ul li a:hover { color: var(--sf-gold); }
.sf-footer-col p { font-size: 0.85rem; color: var(--sf-text-dim); line-height: 1.7; }

.sf-footer-bottom {
  max-width: var(--sf-max-w);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.sf-footer-bottom p { font-size: 0.75rem; color: var(--sf-text-dim); margin: 0; }
.sf-footer-bottom a { color: var(--sf-text-dim); transition: color .2s; }
.sf-footer-bottom a:hover { color: var(--sf-gold); }
.sf-footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sf-footer-links a {
  font-size: 0.72rem;
  color: var(--sf-text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* P3 */
  display: inline-block;
  padding: 0.25rem 0;
}

/* ── P1+P8: SCROLL REVEAL – rein Animation, kein Layout ──────── */
.sf-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
  /* KEIN display, width, grid etc. hier – nur Animation */
}
.sf-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* P8: bei reduced-motion sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .sf-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── SITEORIGIN OVERRIDES ─────────────────────────────────────── */
.panel-grid { background: transparent !important; }
.panel-row-style { margin: 0 !important; }
.so-widget-sow-text-editor,
.so-widget-sow-text-editor p,
.so-widget-sow-editor {
  font-family: 'Raleway', sans-serif;
  color: var(--sf-text-dim);
}

/* P1: SiteOrigin Panel-Rows dürfen nicht breiter als Viewport sein */
.panel-layout,
.panel-grid-cell,
.siteorigin-widget {
  max-width: 100%;
  min-width: 0;
}

/* ── UTILITY ──────────────────────────────────────────────────── */
.text-gold   { color: var(--sf-gold); }
.text-cream  { color: var(--sf-cream); }
.text-dim    { color: var(--sf-text-dim); }
.text-center { text-align: center; }
.text-upper  { text-transform: uppercase; letter-spacing: 0.12em; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */

/* 1024px – Tablet Landscape */
@media (max-width: 1024px) {
  .sf-footer-inner { grid-template-columns: 1fr 1fr; }
  .sf-dog-card { grid-template-columns: 320px 1fr; }
}

/* 860px – Tablet Portrait / Mobile Nav */
@media (max-width: 860px) {
  #site-nav { display: none; }

  /* P2: Mobile Nav öffnet unterhalb Header */
  #site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--sf-header-h);
    left: 0;
    right: 0;
    /* P2: Abgrenzung zum Hero */
    background: rgba(14,20,22,0.99);
    border-bottom: 2px solid rgba(200,154,69,0.3);
    padding: 1.5rem 2rem 2rem;
    backdrop-filter: blur(12px);
    z-index: 999;
    /* P2: max-height mit Scroll für sehr lange Menüs */
    max-height: calc(100vh - var(--sf-header-h));
    overflow-y: auto;
  }
  #site-nav.is-open ul {
    flex-direction: column;
    gap: 0;
  }
  /* P3: Mobile Nav-Links – volle Touch-Fläche */
  #site-nav.is-open ul li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.5rem;
    border-bottom: 1px solid rgba(200,154,69,0.08);
    width: 100%;
    font-size: 0.85rem;
  }
  #site-nav.is-open ul li:last-child a {
    border-bottom: none;
  }
  #site-nav.is-open ul li ul {
    display: flex;
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 1rem;
    flex-direction: column;
    gap: 0;
  }
  #site-nav.is-open ul li ul li a {
    font-size: 0.78rem;
    min-height: 42px;
    color: var(--sf-text-dim);
  }

  .nav-burger { display: flex; }
  .sf-dog-card { grid-template-columns: 1fr; }
  .sf-dog-card__img img { min-height: 280px; }
  .sf-dog-card__body { padding: 1.75rem; }
  .sf-dog-stats { grid-template-columns: 1fr 1fr; } /* bleibt 2-spaltig bis 640 */
}

/* 767px – P1: Inline-Grids aus SO-Layouts auf 1 Spalte */
@media (max-width: 767px) {
  /* Zuchtziel und andere 3-spaltige Grids */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-spaltige Grids (Ranch, Aufzucht etc.) */
  [style*="1fr 1fr"],
  [style*="1fr, 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Grid-Children */
  [style*="display:grid"] > *,
  [style*="display: grid"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Foto-Platzhalter auf Mobile */
  [style*="direction:rtl"],
  [style*="direction: rtl"] {
    direction: ltr !important;
  }
  /* Hund-Karte Reverse-Layout */
  .sf-dog-card.reverse,
  [style*="direction:rtl"] .sf-dog-card__body {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* 640px – Smartphone */
@media (max-width: 640px) {
  :root {
    --sf-header-h: 90px;
    --sf-section-pad: 3rem 1.25rem;
  }

  #site-header { padding: 0 1.25rem; }

  .site-logo img { height: 68px; }

  .sf-container { padding: 0 1.25rem; }

  /* P1: sf-container darf nicht über Viewport gehen */
  .sf-container,
  .panel-layout { width: 100%; max-width: 100%; }

  .sf-dog-card__body { padding: 1.25rem; }
  .sf-dog-stats { grid-template-columns: 1fr; }
  .sf-dog-card__img img { min-height: 240px; }

  /* Footer */
  .sf-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .sf-footer-bottom { flex-direction: column; text-align: center; }
  .sf-footer-links { justify-content: center; }

  #site-footer { padding: 2.5rem 1.25rem 1.5rem; }

  /* Buttons volle Breite auf kleinen Screens */
  .sf-btn { width: 100%; text-align: center; }

  /* P8: Section-Abstände reduzieren */
  .sf-gold-rule { margin-bottom: 1.5rem; }

  /* P8: Hero-Foto-Grid auf Mobile – 2×2 → 2×2 bleibt ok, aber sicher absichern */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important; /* Foto-Thumbnails dürfen 2-spaltig bleiben */
  }
}

/* 390px – iPhone Standard */
@media (max-width: 390px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.05rem; }

  .sf-litter-grid {
    grid-template-columns: 1fr;
  }

  /* Welpenfoto-Grid: auf sehr kleinen Screens auch 1-spaltig */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* 320px – kleinstes Smartphone */
@media (max-width: 320px) {
  :root { --sf-section-pad: 2.5rem 1rem; }
  .sf-container { padding: 0 1rem; }
  #site-header { padding: 0 1rem; }
  #site-footer { padding: 2rem 1rem 1rem; }
  .sf-badge { font-size: 0.62rem; padding: 0.25rem 0.5rem; }
}

/* ── P5: SCREEN READER ONLY (für versteckte h1) ──────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── P4: Admin-Hinweis (nur für eingeloggte Admins) ──────────── */
.logged-in .sf-admin-hint { display: block !important; }

/* ── P6: Aktiver Nav-Link State ──────────────────────────────── */
#site-nav a.sf-nav-active {
  color: var(--sf-gold);
  border-bottom-color: var(--sf-gold);
}

/* ── P2: Body-Lock beim mobilen Menü ─────────────────────────── */
body.nav-open { overflow: hidden; }