/* =========================================================
   V26 – FETTABSCHEIDER.SHOP MARKENFAMILIE
   Gemeinsame Farben für Shop und Berechnungsportal
   ========================================================= */

:root {
  --fs-yellow: #FEC300;
  --fs-yellow-hover: #FFD247;
  --fs-navy: #002337;
  --fs-blue: #084067;
  --fs-text: #263746;
  --fs-muted: #526674;
  --fs-dark: #071A24;
  --fs-white: #FFFFFF;
  --fs-light: #F3F5F6;
  --fs-blue-light: #EDF4F7;
  --fs-yellow-light: #FFF8DF;
  --fs-border: #D7E0E5;
  --fs-shadow: 0 16px 40px rgba(0, 35, 55, 0.10);
}

html { background: var(--fs-white); }
body {
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
}

body, p, li, label, input, select, textarea, button {
  color: var(--fs-text);
}

a { color: var(--fs-blue); }
a:hover { color: var(--fs-navy); }

/* Markenflächen */
.bg-ft-gradient-blue,
.site-header,
.site-footer,
.result-hero,
.advice-cta,
.seo-page-hero,
.seo-article-hero,
.hero-section,
.home-header {
  background: linear-gradient(135deg, var(--fs-navy) 0%, var(--fs-blue) 100%) !important;
}

.bg-ft-dark-blue { background: var(--fs-navy) !important; }
.bg-active-blue { background: var(--fs-blue) !important; }
.bg-ft-yellow { background: var(--fs-yellow) !important; }
.ft-yellow { color: var(--fs-yellow) !important; }
.ft-dark-blue { color: var(--fs-navy) !important; }
.white { color: var(--fs-white) !important; }

.site-header,
.site-footer {
  border-color: rgba(255,255,255,.12) !important;
}
.site-header a,
.site-footer a,
.site-footer strong,
.site-footer span,
.main-nav a {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}
.site-footer a:hover,
.main-nav a:hover {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
}

/* Buttons */
.btn,
.button-yellow,
.header-cta,
.mobile-header-cta,
.preset-btn,
.preview-btn,
.pdf-button,
.product-link-container .btn {
  border: 2px solid var(--fs-yellow) !important;
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
  box-shadow: none;
}
.btn:hover,
.button-yellow:hover,
.header-cta:hover,
.mobile-header-cta:hover,
.preset-btn:hover,
.preview-btn:hover,
.pdf-button:hover,
.product-link-container:hover .btn {
  background: var(--fs-yellow-hover) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.link-button,
.btn-secondary,
.backlink,
.choice-link {
  border-color: var(--fs-blue) !important;
  background: var(--fs-white) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}
.link-button:hover,
.btn-secondary:hover,
.backlink:hover,
.choice-link:hover {
  border-color: var(--fs-navy) !important;
  background: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}
.result-hero .link-button,
.advice-cta .btn,
.seo-page-hero .btn,
.hero-section .btn {
  border-color: var(--fs-yellow) !important;
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

/* Cards, Ergebnis- und Hilfebereiche */
.bg-result,
.result-wrapper,
.choice-card,
.method-card,
.industry-card,
.topic-cluster-card,
.seo-page-card,
.takeaway-card,
.variant-result-card,
.hero-preview-card,
.form-guide,
.formula-box,
.info-box,
.object-data-box,
.quick-answer-section,
.seo-content-section,
.faq-section {
  border-color: var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
}
.choice-card,
.method-card,
.industry-card,
.topic-cluster-card,
.seo-page-card,
.product-link-container {
  box-shadow: 0 8px 24px rgba(0, 35, 55, .07) !important;
}
.choice-card:hover,
.method-card:hover,
.industry-card:hover,
.topic-cluster-card:hover,
.seo-page-card:hover,
.product-link-container:hover {
  border-color: var(--fs-yellow) !important;
  box-shadow: var(--fs-shadow) !important;
}

.notice-box,
.notice,
.result-note,
.min-size-note,
.product-ns-note,
.trust-note {
  border-color: var(--fs-border) !important;
  border-left-color: var(--fs-yellow) !important;
  background: var(--fs-yellow-light) !important;
  color: var(--fs-text) !important;
}

.eyebrow,
.choice-kicker,
.hero-methods-label,
.step-label {
  color: var(--fs-blue) !important;
  -webkit-text-fill-color: var(--fs-blue) !important;
}
.result-hero .eyebrow,
.advice-cta .eyebrow,
.seo-page-hero .eyebrow,
.hero-section .eyebrow {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
}

h1, h2, h3, h4,
.section-heading,
.product-title,
.choice-card strong,
.method-card strong {
  color: var(--fs-navy);
}
.result-hero h1,
.result-hero h2,
.result-hero p,
.advice-cta h2,
.advice-cta p,
.seo-page-hero h1,
.seo-page-hero p,
.hero-section h1,
.hero-section p {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}

/* Formulare */
input,
select,
textarea {
  border-color: var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fs-blue) !important;
  outline: 3px solid rgba(254, 195, 0, .28) !important;
  box-shadow: none !important;
}
.radio-card,
.preset-btn-extended,
.variant-panel,
.water-calculation-block,
.shared-factor-box,
.special-area {
  border-color: var(--fs-border) !important;
  background: var(--fs-light) !important;
}
.radio-card:has(input:checked),
.choice-card.is-active,
.variant-panel.is-active {
  border-color: var(--fs-yellow) !important;
  background: var(--fs-yellow-light) !important;
}

/* Schritte */
.steps-widget,
.mobile-step-summary {
  border-color: var(--fs-border) !important;
}
.step-connector { background: var(--fs-border) !important; }
.step-item.bg-ft-yellow {
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
}
.step-item.bg-active-blue { background: var(--fs-blue) !important; }
.step-item.bg-ft-dark-blue { background: var(--fs-navy) !important; }

/* Produktempfehlungen */
.product-results { color: var(--fs-text); }
.product-link-container {
  border: 1px solid var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
}
.product-label {
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}
.product-ns-badge {
  background: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}
.product-detail-list span {
  border-color: var(--fs-border) !important;
  background: var(--fs-light) !important;
  color: var(--fs-text) !important;
}
.product-card-price {
  color: var(--fs-navy) !important;
  font-size: 1.08rem;
  font-weight: 800;
}
.recommended-category-strip {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #c9dce6;
  border-left: 6px solid var(--fs-yellow);
  border-radius: 14px;
  background: var(--fs-blue-light);
  color: var(--fs-text);
}
.recommended-category-strip > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recommended-category-strip strong {
  color: var(--fs-navy) !important;
  font-size: 1.15rem;
}
.recommended-category-strip .btn { flex: 0 0 auto; }
.empty-products {
  border-color: var(--fs-border) !important;
  background: var(--fs-blue-light) !important;
  color: var(--fs-text) !important;
}

/* Tabellen, FAQ und Inhalte */
table th {
  background: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}
table td { border-color: var(--fs-border) !important; }
details {
  border-color: var(--fs-border) !important;
  background: var(--fs-light) !important;
}
summary { color: var(--fs-navy) !important; }

/* Sichtbare Tastaturfokusse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--fs-yellow) !important;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .recommended-category-strip {
    align-items: stretch;
    flex-direction: column;
  }
  .recommended-category-strip .btn { width: 100%; }
}