/**
 * Einkommensteuer-Rechner - SEO Content & Conversion Styling
 * Styles fuer die Inhalte rund um den Rechner
 *
 * @package Denkmalschutz
 */

/* CLAUDE: ===================================
   1. Seiten-Layout
   =================================== */

/* CLAUDE: Hauptcontainer der EST-Seite */
.est-page {
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  line-height: 1.7;
}

/* CLAUDE: ===================================
   2. Trust-Bar (Vertrauenssignale)
   =================================== */

/* CLAUDE: Horizontale Leiste mit Trust-Signalen */
.est-trust-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  background: var(--wp--preset--color--marble-white, #F6F4EF);
  border-radius: 0.5rem;
  border: 1px solid rgba(193, 154, 107, 0.2);
}

/* CLAUDE: Einzelnes Trust-Element */
.est-trust-bar__item {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  white-space: nowrap;
}

/* CLAUDE: ===================================
   3. Hero-Sektion (H1 + Intro)
   =================================== */

/* CLAUDE: Hero-Bereich mit SEO-Headline */
/* CLAUDE: padding-inline wie .container (clamp 16-32px) fuer seitlichen Abstand auf Mobile */
.est-hero {
  text-align: center;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 2.5rem;
}

/* CLAUDE: SEO-H1 mit Primary Keyword */
/* CLAUDE: max-width verhindert unguenstigen Zeilenumbruch bei 1024px */
.est-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  margin: 0 auto 1rem;
  line-height: 1.25;
  max-width: 1200px;
}

/* CLAUDE: Intro-Absatz mit Keywords */
.est-hero__intro {
  font-size: 1.125rem;
  color: #5a4a3a;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* CLAUDE: ===================================
   4. Calculator Wrapper
   =================================== */

/* CLAUDE: Container fuer den Shortcode-Output */
.est-calculator-wrap {
  margin-bottom: 3rem;
}

/* CLAUDE: ===================================
   5. Info-Sektion (Educational Content)
   =================================== */

/* CLAUDE: Info-Container */
/* CLAUDE: padding-inline wie .container fuer seitlichen Abstand auf Mobile */
.est-info {
  padding: 3rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid rgba(193, 154, 107, 0.2);
}

/* CLAUDE: Info-Titel */
.est-info__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  text-align: center;
  margin: 0 0 2rem;
}

/* CLAUDE: 2-Spalten-Grid fuer Info-Cards */
.est-info__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

/* CLAUDE: Einzelne Info-Card */
.est-info__card {
  background: var(--wp--preset--color--marble-white, #F6F4EF);
  border-radius: 0.75rem;
  padding: 2rem;
  border: 1px solid rgba(193, 154, 107, 0.15);
}

/* CLAUDE: Card-Ueberschrift */
.est-info__card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  margin: 0 0 0.75rem;
}

/* CLAUDE: Card-Text */
.est-info__card p {
  font-size: 1rem;
  color: #5a4a3a;
  margin: 0;
  line-height: 1.7;
}

/* CLAUDE: ===================================
   6. FAQ-Akkordeon
   =================================== */

/* CLAUDE: FAQ-Container */
/* CLAUDE: padding-inline wie .container fuer seitlichen Abstand auf Mobile */
.est-faq {
  padding: 3rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid rgba(193, 154, 107, 0.2);
}

/* CLAUDE: FAQ-Titel */
.est-faq__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  text-align: center;
  margin: 0 0 2rem;
}

/* CLAUDE: FAQ-Liste */
.est-faq__list {
  max-width: 800px;
  margin: 0 auto;
}

/* CLAUDE: Einzelnes FAQ-Item (natives details-Element) */
.est-faq__item {
  border-bottom: 1px solid rgba(193, 154, 107, 0.2);
}

/* CLAUDE: FAQ-Frage (summary als Klick-Target) */
.est-faq__question {
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  cursor: pointer;
  list-style: none;
  position: relative;
  line-height: 1.5;
}

/* CLAUDE: Standard-Marker entfernen (Webkit) */
.est-faq__question::-webkit-details-marker {
  display: none;
}

/* CLAUDE: Custom Pfeil-Indikator (rechts) */
.est-faq__question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--wp--preset--color--heritage-gold, #C19A6B);
  transition: transform 0.2s ease;
}

/* CLAUDE: Pfeil rotieren wenn offen */
.est-faq__item[open] > .est-faq__question::after {
  content: '\2212';
}

/* CLAUDE: Hover-Effekt */
.est-faq__question:hover {
  color: var(--wp--preset--color--heritage-gold, #C19A6B);
}

/* CLAUDE: FAQ-Antwort */
.est-faq__answer {
  padding: 0 0 1.25rem;
}

/* CLAUDE: Antwort-Text */
.est-faq__answer p {
  font-size: 1rem;
  color: #5a4a3a;
  margin: 0;
  line-height: 1.7;
}

/* CLAUDE: ===================================
   7. CTA-Sektion (Conversion)
   =================================== */

/* CLAUDE: CTA-Container mit hervorgehobenem Hintergrund */
.est-page-cta {
  padding: 3rem 2rem;
  margin: 2rem 0;
  background: var(--wp--preset--color--dark-umber, #3B2A1A);
  border-radius: 1rem;
  text-align: center;
  color: #fff;
}

/* CLAUDE: CTA-Titel */
.est-page-cta__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
}

/* CLAUDE: CTA-Text */
.est-page-cta__text {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* CLAUDE: CTA-Button-Container */
.est-page-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* CLAUDE: CTA Primaer-Button mit Gold-Akzent */
.est-page-cta .est-btn--primary {
  background: var(--wp--preset--color--heritage-gold, #C19A6B);
  border-color: var(--wp--preset--color--heritage-gold, #C19A6B);
  color: #fff;
}

/* CLAUDE: CTA Primaer-Button Hover */
.est-page-cta .est-btn--primary:hover {
  background: #a8854d;
  border-color: #a8854d;
}

/* CLAUDE: CTA Outline-Button auf dunklem Hintergrund */
.est-page-cta .est-btn--outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: transparent;
}

/* CLAUDE: CTA Outline-Button Hover */
.est-page-cta .est-btn--outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* CLAUDE: ===================================
   8. Interne Verlinkung
   =================================== */

/* CLAUDE: Links-Container */
/* CLAUDE: padding-inline wie .container fuer seitlichen Abstand auf Mobile */
.est-links {
  padding: 3rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid rgba(193, 154, 107, 0.2);
}

/* CLAUDE: Links-Titel */
.est-links__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  text-align: center;
  margin: 0 0 2rem;
}

/* CLAUDE: 3-Spalten-Grid fuer Link-Cards */
.est-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* CLAUDE: Link-Card */
.est-links__card {
  display: block;
  padding: 1.5rem;
  background: var(--wp--preset--color--marble-white, #F6F4EF);
  border-radius: 0.75rem;
  border: 1px solid rgba(193, 154, 107, 0.15);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* CLAUDE: Link-Card Hover */
.est-links__card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* CLAUDE: Link-Card Titel */
.est-links__card strong {
  display: block;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--dark-umber, #3B2A1A);
  margin-bottom: 0.5rem;
}

/* CLAUDE: Link-Card Beschreibung */
.est-links__card span {
  font-size: 0.875rem;
  color: #5a4a3a;
  line-height: 1.5;
}

/* CLAUDE: ===================================
   9. Responsive Design
   =================================== */

/* CLAUDE: Tablet-Breakpoint (640px statt 768px — bei 768px passt 2-Spalten-Layout noch) */
@media (max-width: 640px) {
  /* CLAUDE: Info-Grid stapeln */
  .est-info__grid {
    grid-template-columns: 1fr;
  }

  /* CLAUDE: Links-Grid auf 1 Spalte */
  .est-links__grid {
    grid-template-columns: 1fr;
  }

  /* CLAUDE: CTA-Buttons stapeln */
  .est-page-cta__buttons {
    flex-direction: column;
    align-items: center;
  }

  /* CLAUDE: CTA-Buttons volle Breite */
  .est-page-cta .est-btn--cta {
    width: 100%;
    max-width: 320px;
  }
}

/* CLAUDE: ===================================
   10. DAR Page-Template Overrides
   =================================== */

/* CLAUDE: Interne dar-title/dar-intro ausblenden wenn Page-Template H1 vorhanden */
.dar-page .dar-title,
.dar-page .dar-intro {
  display: none;
}

/* CLAUDE: Alten WordPress-Editor-Content ausblenden (SEO-Texte, Hinweise, Kontaktformular) */
/* CLAUDE: Nur der dar-container bleibt sichtbar, der Rest ist durch Template-Sektionen ersetzt */
.dar-page .est-calculator-wrap > *:not(.dar-container) {
  display: none;
}

/* CLAUDE: Mobile-Breakpoint fuer Trust-Bar (erst bei 480px vertikal) */
@media (max-width: 480px) {
  /* CLAUDE: Trust-Bar vertikal auf kleinen Screens */
  .est-trust-bar {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}