/* =========================================================
   V27 – KONTRAST, PRODUKTKARTEN UND MARKENPOLITUR
   Ergänzt V26 und wird bewusst als letzte CSS-Datei geladen.
   Ziel: konsistente Shop-Farben, keine unlesbaren Texte und
   keine hellblauen Fremdflächen.
   ========================================================= */

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

/* ---------------------------------------------------------
   Grundkontrast und neutrale Flächen
   --------------------------------------------------------- */

body {
  background: #FFFFFF !important;
  color: var(--fs-text) !important;
}

.bg-result,
.result-wrapper,
.multi-step-form-container,
.object-data-box,
.form-guide,
.formula-box,
.info-box,
.choice-card,
.method-card,
.industry-card,
.topic-cluster-card,
.seo-page-card,
.takeaway-card,
.quick-answer-section,
.seo-content-section,
.faq-section,
.variant-result-card,
.radio-card,
.preset-btn-extended,
.variant-panel,
.water-calculation-block,
.shared-factor-box,
.special-area {
  border-color: var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

/* Hellblaue V23/V26-Flächen konsequent durch neutrale Flächen ersetzen. */
.quick-answer-section,
.v23-seo-copy,
.recommended-category-strip,
.empty-products,
.radio-card,
.preset-btn-extended,
.variant-panel,
.water-calculation-block,
.shared-factor-box,
.special-area {
  background: var(--fs-surface) !important;
}

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

/* ---------------------------------------------------------
   Dunkle Markenflächen: Text immer sichtbar
   --------------------------------------------------------- */

.bg-ft-gradient-blue,
.result-hero,
.advice-cta,
.form-intro,
.seo-article-hero,
.seo-example-box,
.hero-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(254, 195, 0, 0.11), transparent 30%),
    linear-gradient(135deg, var(--fs-navy) 0%, var(--fs-blue) 100%) !important;
}

.result-hero,
.advice-cta,
.form-intro,
.seo-example-box {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}

.result-hero h1,
.result-hero h2,
.result-hero h3,
.result-hero p,
.result-hero li,
.result-hero strong,
.result-hero span:not(.eyebrow),
.advice-cta h1,
.advice-cta h2,
.advice-cta h3,
.advice-cta p,
.advice-cta li,
.advice-cta strong,
.form-intro h1,
.form-intro h2,
.form-intro h3,
.form-intro p,
.form-intro li,
.form-intro strong,
.seo-example-box h1,
.seo-example-box h2,
.seo-example-box h3,
.seo-example-box p,
.seo-example-box li,
.seo-example-box strong {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.result-hero .eyebrow,
.advice-cta .eyebrow,
.form-intro .eyebrow,
.seo-example-box .eyebrow {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   Startseiten-Hero: dunkle Außenfläche, helle Vorschaukarte
   --------------------------------------------------------- */

.hero-section > .hero-copy,
.hero-section > .hero-copy h1,
.hero-section > .hero-copy h2,
.hero-section > .hero-copy h3,
.hero-section > .hero-copy p,
.hero-section > .hero-copy li {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.hero-section > .hero-copy > .eyebrow,
.hero-section .hero-methods-label {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
  opacity: 1 !important;
}

.hero-section .hero-methods a {
  border-color: var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.hero-section .hero-methods a strong {
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.hero-section .hero-methods a small {
  color: var(--fs-muted) !important;
  -webkit-text-fill-color: var(--fs-muted) !important;
}

.hero-section .hero-methods a:hover,
.hero-section .hero-methods a:focus-visible {
  border-color: var(--fs-yellow) !important;
  box-shadow: 0 12px 28px rgba(0, 35, 55, 0.18) !important;
}

.hero-section .trust-strip span {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}

.hero-preview-card {
  border: 1px solid var(--fs-border) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
  box-shadow: 0 22px 48px rgba(0, 35, 55, 0.24) !important;
}

.hero-preview-card .preview-topline {
  color: var(--fs-blue) !important;
  -webkit-text-fill-color: var(--fs-blue) !important;
}

.hero-preview-card .preview-ns {
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.hero-preview-card .preview-ns strong {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
}

.hero-preview-card > p,
.hero-preview-card .preview-list strong,
.hero-preview-card .preview-list small {
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
  opacity: 1 !important;
}

.hero-preview-card .preview-list {
  gap: 0.65rem !important;
}

.hero-preview-card .preview-list > div {
  border-color: var(--fs-border) !important;
  background: var(--fs-surface) !important;
}

.hero-preview-card .preview-list span {
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

/* ---------------------------------------------------------
   Ratgeber-Hero: Außenfläche dunkel, Kurzantwort hell
   --------------------------------------------------------- */

.seo-article-hero {
  width: min(1180px, calc(100% - 2rem)) !important;
  margin-top: clamp(1rem, 3vw, 3rem) !important;
  padding: clamp(1.6rem, 4vw, 3.2rem) !important;
  border-radius: clamp(22px, 3vw, 34px) !important;
  box-shadow: var(--fs-shadow) !important;
}

.seo-article-hero > .eyebrow {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
  opacity: 1 !important;
}

.seo-article-hero > h1,
.seo-article-hero > .lead {
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.seo-article-hero > .lead {
  max-width: 980px !important;
}

.seo-article-hero .seo-hero-panel {
  border: 1px solid var(--fs-border) !important;
  border-left: 6px solid var(--fs-yellow) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.seo-article-hero .seo-hero-panel strong {
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.seo-article-hero .seo-hero-panel p {
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.seo-article-hero .seo-answer-tags span {
  border-color: var(--fs-border) !important;
  background: var(--fs-surface) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.seo-article-hero .hero-actions .btn-secondary {
  border-color: var(--fs-white) !important;
  background: var(--fs-white) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.seo-article-hero .hero-actions .btn-secondary:hover,
.seo-article-hero .hero-actions .btn-secondary:focus-visible {
  border-color: var(--fs-yellow) !important;
  background: var(--fs-yellow-light) !important;
}

/* Beispielboxen */
.seo-example-box {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.seo-example-box .eyebrow {
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
}

/* ---------------------------------------------------------
   Schrittanzeige ohne helles Fremdblau
   --------------------------------------------------------- */

.steps-widget .step-item.bg-active-blue {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: var(--fs-blue) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}

.steps-widget .step-item.bg-ft-yellow {
  border: 1px solid var(--fs-yellow) !important;
  background: var(--fs-yellow) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.steps-widget .step-item.bg-ft-dark-blue {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
}

.steps-widget .step-item .step-title {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.steps-widget .step-connector {
  background: var(--fs-border) !important;
}

.mobile-step-summary {
  border-color: var(--fs-border) !important;
  background: var(--fs-yellow-light) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

/* ---------------------------------------------------------
   Produktkarten und Preisangaben
   --------------------------------------------------------- */

.result-products {
  align-items: stretch !important;
  border-color: var(--fs-border) !important;
  background: var(--fs-white) !important;
}

.product-link-container {
  overflow: hidden;
  border: 1px solid var(--fs-border) !important;
  border-top: 5px solid var(--fs-yellow) !important;
  background: var(--fs-white) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.product-link-container:hover,
.product-link-container:focus-visible {
  border-color: var(--fs-yellow) !important;
  box-shadow: var(--fs-shadow) !important;
}

.product-card-flags {
  min-height: 40px !important;
  margin-bottom: 0.55rem !important;
}

.product-label {
  border: 1px solid var(--fs-yellow) !important;
  background: var(--fs-yellow-light) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
  box-shadow: none !important;
  white-space: normal !important;
  text-align: center !important;
}

.product-ns-badge {
  background: var(--fs-navy) !important;
  color: var(--fs-white) !important;
  -webkit-text-fill-color: var(--fs-white) !important;
  box-shadow: none !important;
}

.product-link-container .result-image {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  padding: 0.25rem !important;
  background: var(--fs-white) !important;
}

.product-link-container .product-title {
  min-height: 3.25em;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

.product-card-price {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin: 0.1rem 0 0.35rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(254, 195, 0, 0.55);
  border-radius: 12px;
  background: var(--fs-yellow-light) !important;
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.product-card-price .product-price-amount {
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1.15;
}

.product-card-price small {
  color: var(--fs-muted) !important;
  -webkit-text-fill-color: var(--fs-muted) !important;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.product-card-price--check {
  border-color: var(--fs-border) !important;
  background: var(--fs-surface) !important;
}

.product-card-price--check .product-price-amount {
  font-size: 1.02rem;
}

.product-detail-list {
  gap: 0.42rem !important;
  margin: 0.55rem 0 1rem !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.product-detail-list span {
  display: flex !important;
  align-items: flex-start;
  min-height: 42px;
  padding: 0.65rem 0.72rem;
  border: 1px solid var(--fs-border) !important;
  border-radius: 9px;
  background: var(--fs-surface) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
  line-height: 1.4;
}

.product-detail-list span::before {
  flex: 0 0 auto;
  margin-right: 0.45rem !important;
  color: var(--fs-yellow) !important;
  -webkit-text-fill-color: var(--fs-yellow) !important;
  content: "✓";
  font-weight: 900;
}

.product-link-container .btn {
  margin-top: auto;
}

.recommended-category-strip {
  border: 1px solid var(--fs-border) !important;
  border-left: 6px solid var(--fs-yellow) !important;
  background: var(--fs-surface) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

.recommended-category-strip .eyebrow {
  color: var(--fs-blue) !important;
  -webkit-text-fill-color: var(--fs-blue) !important;
}

.recommended-category-strip strong {
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
}

.empty-products {
  border: 1px solid var(--fs-border) !important;
  border-left: 6px solid var(--fs-yellow) !important;
  background: var(--fs-surface) !important;
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
}

/* ---------------------------------------------------------
   Helle Flächen: Schutz vor weiß geerbter Schrift
   --------------------------------------------------------- */

.hero-preview-card,
.hero-preview-card *,
.seo-hero-panel,
.seo-hero-panel *,
.product-link-container,
.product-link-container *,
.quick-answer-section,
.quick-answer-section *,
.seo-page-card,
.seo-page-card *,
.takeaway-card,
.takeaway-card *,
.multi-step-form-container,
.multi-step-form-container *,
.object-data-box,
.object-data-box * {
  text-shadow: none !important;
}

.hero-preview-card p,
.hero-preview-card small,
.hero-preview-card strong,
.seo-hero-panel p,
.seo-page-card p,
.seo-page-card li,
.takeaway-card,
.quick-answer-section p,
.multi-step-form-container p,
.multi-step-form-container label,
.multi-step-form-container li,
.object-data-box p,
.object-data-box label {
  color: var(--fs-text) !important;
  -webkit-text-fill-color: var(--fs-text) !important;
  opacity: 1 !important;
}

.hero-preview-card h2,
.hero-preview-card h3,
.seo-hero-panel h2,
.seo-hero-panel h3,
.seo-page-card h2,
.seo-page-card h3,
.quick-answer-section h2,
.quick-answer-section h3,
.multi-step-form-container h2,
.multi-step-form-container h3,
.object-data-box h2,
.object-data-box h3 {
  color: var(--fs-navy) !important;
  -webkit-text-fill-color: var(--fs-navy) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   Responsive Feinschliff
   --------------------------------------------------------- */

@media (max-width: 1100px) {
  .product-link-container .result-image {
    height: 220px !important;
  }
}

@media (max-width: 900px) {
  .seo-article-hero {
    width: calc(100% - 1.25rem) !important;
    padding: 1.35rem 1.1rem !important;
    border-radius: 20px !important;
  }

  .hero-section .hero-methods-label {
    color: var(--fs-yellow) !important;
    -webkit-text-fill-color: var(--fs-yellow) !important;
  }

  .product-link-container .result-image {
    height: min(300px, 64vw) !important;
  }

  .product-link-container .product-title {
    min-height: 0;
  }

  .product-card-price {
    min-height: 68px;
  }
}

@media (max-width: 640px) {
  .hero-preview-card .preview-list > div {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  .product-label {
    font-size: 0.78rem !important;
  }

  .product-detail-list span {
    min-height: 0;
  }
}

/* Startseiten-Direktwahl: Beschriftung über den drei Karten,
   damit lange Fachbegriffe nicht in zu schmale Spalten gedrückt werden. */
.hero-section .hero-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hero-section .hero-methods-label {
  grid-column: 1 / -1 !important;
}

/* Weißes SVG auf gelbem Aktiv-Schritt in dunkler Farbe darstellen. */
.steps-widget .step-item.bg-ft-yellow .step-icon img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(31%) saturate(1917%) hue-rotate(159deg) brightness(87%) contrast(104%);
}

@media (max-width: 760px) {
  .hero-section .hero-methods {
    grid-template-columns: 1fr !important;
  }
}

/* Lange deutsche Fachbegriffe auf kleinen Displays sauber umbrechen. */
.form-intro h1,
.seo-article-hero > h1,
.hero-section > .hero-copy h1 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
}

@media (max-width: 650px) {
  .form-intro h1 {
    font-size: clamp(1.7rem, 7.4vw, 2rem) !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 650px) {
  .form-intro h1 {
    overflow-wrap: break-word !important;
  }
}