/* ============================================================
   BLOCK-SUPPORT-STYLES
   Regeln, die bisher inline in den PHP-Templates standen und
   beim Umzug in den Block-Editor eine feste CSS-Heimat brauchen.
   Ergänzt style.css – überschreibt nichts.
   ============================================================ */

/* ---- Tabs (bisher <style> in page-servicecenter.php) ------- */
.agri-service-tabs__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: var(--agri-radius);
  background: var(--agri-secondary);
  padding: 0.25rem;
  margin-bottom: 2rem;
}

.agri-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: var(--agri-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: var(--agri-radius-sm);
  cursor: pointer;
  color: var(--agri-muted-fg);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.agri-tab-btn.active {
  background: var(--agri-card);
  color: var(--agri-fg);
  box-shadow: var(--agri-shadow-sm);
}

.agri-tab-btn:hover:not(.active) {
  color: var(--agri-fg);
}

.agri-service-card {
  border-radius: var(--agri-radius-lg);
  border: 1px solid var(--agri-border);
  background: var(--agri-card);
  padding: 2rem;
}

/* Karten-Ueberschriften: Werte exakt aus den bisherigen Inline-Styles */
.agri-service-card > h2 {
  font-family: var(--agri-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--agri-fg);
}

/* PSM-Datenbank-Tab */
.agri-service-card--psm {
  text-align: center;
}

.agri-service-card--psm > h2 {
  margin-bottom: 0.75rem;
}

.agri-service-card--psm > p {
  color: var(--agri-muted-fg);
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 560px;
}

/* Support-Tab */
.agri-service-card--support {
  text-align: center;
}

.agri-service-card--support > h2 {
  margin-bottom: 0.5rem;
}

.agri-service-card--support > p {
  color: var(--agri-muted-fg);
  margin-bottom: 1.5rem;
}

.agri-service-card--support .agri-contact__grid {
  margin: 0 auto;
}

/* Tab-Sichtbarkeit (bisher style="display:none" im Template) */
.agri-service-tabs .agri-tab-content {
  display: none;
}
.agri-service-tabs .agri-tab-content.active {
  display: block;
}

/* ---- Gradient-Hero (bisher inline in page-servicecenter.php) */
.agri-gradient-hero {
  background: linear-gradient(135deg, hsl(82, 65%, 40%, 0.1) 0%, hsl(38, 25%, 92%) 100%);
  padding: 4rem 0;
  text-align: center;
}

.agri-gradient-hero .agri-badge {
  margin-bottom: 1rem;
  display: inline-block;
}

.agri-gradient-hero h1 {
  font-family: var(--agri-font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--agri-fg);
}

.agri-gradient-hero p {
  font-size: 1.125rem;
  color: var(--agri-muted-fg);
  max-width: 600px;
  margin: 0 auto;
}

/* ---- AGB / Rechtstexte (bisher inline in page-agb.php) ------ */
.agri-legal-content {
  max-width: 860px;
}

.agri-legal-section {
  margin-bottom: 2.5rem;
}

.agri-legal-section h2 {
  font-family: var(--agri-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--agri-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--agri-border);
}

.agri-legal-section p {
  margin-bottom: 0.875rem;
  line-height: 1.75;
  color: var(--agri-fg);
}

/* ---- Kontakt-Layout (bisher inline in page-kontakt.php) ----- */
.agri-contact-layout {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .agri-contact-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

.agri-contact-layout h2 {
  font-family: var(--agri-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Google-Maps-Kachel */
.agri-maps-card {
  border-radius: var(--agri-radius-lg);
  overflow: hidden;
  border: 1px solid var(--agri-border);
  height: 250px;
  background: var(--agri-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agri-maps-card a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--agri-muted-fg);
  text-decoration: none;
}

.agri-maps-card span {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---- Team: Abstand vor Rechtsberater-Bereich ---------------- */
.agri-team__legal-header {
  margin-top: 4rem;
}

/* ---- Produkte: Section-Header-Beschreibung ------------------ */
.agri-section-header > p {
  color: var(--agri-muted-fg);
  max-width: 800px;
  margin: 0 auto 2rem;
}

/* ---- Servicecenter: PSM-Tab-Bausteine ----------------------- */
.agri-psm-icon {
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: hsl(82, 65%, 40%, 0.1);
  color: var(--agri-primary);
}

.agri-psm-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.agri-info-box {
  border-radius: var(--agri-radius);
  border: 1px solid var(--agri-border);
  background: var(--agri-muted);
  padding: 1rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--agri-muted-fg);
}

.agri-info-box a {
  color: var(--agri-primary);
  font-weight: 500;
}

.agri-info-box p {
  margin-bottom: 0.5rem;
}

.agri-info-box__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}



/* ---- Servicecenter: Inhalts-Wrapper (bisher inline) --------- */
.agri-service-wrap {
  max-width: 800px;
  margin: 0 auto;
}

/* ---- Kontaktformular: Link im Einwilligungstext ------------- */
#agriContactForm label a {
  color: var(--agri-primary);
}

/* ---- Seiten-Hero: Meta-Zeile (z. B. "Stand: Mai 2023") ------ */
.agri-page-hero p.agri-page-hero__meta {
  opacity: 0.75;
  font-size: 0.9375rem;
}

/* ============================================================
   DUNKELMODUS-KORREKTUREN
   style.css schaltet im Dark Mode die Text-Tokens auf helle Werte
   (--agri-fg wird fast weiss), einige Flaechenfarben sind dort aber
   fest hell kodiert und haben keine Dark-Variante. Ergebnis waren
   Kontraste um 1.1 – also praktisch unsichtbarer Text.
   Die Dunkelwerte sind aus den vorhandenen Tokens abgeleitet, im
   hellen Modus aendert sich nichts.
   ============================================================ */
@media (prefers-color-scheme: dark) {

  /* Produktseite: Sektionsflaeche lag zwischen --agri-bg und
     --agri-secondary; im Dunkelmodus analog knapp ueber --agri-bg. */
  .agri-products-bg {
    background-color: hsl(30, 11%, 11%);
  }

  /* Servicecenter-Hero: Verlauf endete auf --agri-secondary (hell).
     Dunkelmodus nutzt die Dark-Werte derselben Tokens. */
  .agri-gradient-hero {
    background: linear-gradient(135deg, hsl(82, 55%, 58%, 0.12) 0%, hsl(30, 10%, 17%) 100%);
  }

  /* Flaechen mit halbtransparentem Sand-Ton (--agri-secondary/0.5) */
  .agri-trust,
  .agri-contact {
    background-color: hsl(30, 10%, 17%, 0.5);
  }
}