:root {
  --yes-heading: #1a202c;
  --yes-text: #2d3748;
  --yes-page: #fafafa;
  --yes-card: #fff;
  --yes-accent: #2b6cb0;
  --yes-accent-hover: #215387;
  --yes-teal: #3cb4ac;
}

/* Button (WordPress Button block with class "yes-btn") */
.yes-btn .wp-block-button__link {
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
  background: var(--yes-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.yes-btn .wp-block-button__link:hover,
.yes-btn .wp-block-button__link:focus-visible {
  background: var(--yes-accent-hover);
  color: #fff;
}

/* FAQ */
.faq-intro,
.faq-group,
.faq-cta {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-intro {
  margin-bottom: 2.5rem;
  text-align: center;
}

.faq-intro h2 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  color: var(--yes-heading);
}

.faq-intro p {
  margin: 0;
}

.faq-intro a {
  color: var(--yes-accent);
}

.faq-group {
  margin-bottom: 2.5rem;
}

.faq-group__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--yes-heading);
}

/* Details block with class "faq-item": first child is the question, the rest is the answer */
.faq-item {
  margin: 0 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: var(--yes-card);
}

.faq-item summary {
  position: relative;
  display: block;
  padding: 1rem 3.25rem 1rem 1.25rem;
  font-weight: 600;
  color: var(--yes-heading);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--yes-heading);
  border-bottom: 2px solid var(--yes-heading);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item summary:hover {
  background: var(--yes-page);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(60, 180, 172, 0.5);
  outline-offset: -3px;
}

.faq-item > :not(summary) {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.75;
}

.faq-cta {
  margin-top: 3rem;
  text-align: center;
}

/* Shared layout for page sections (Columns/Group blocks) */
.intro-card,
.offers__grid,
.about-feature,
.facts,
.contact-layout,
.quote-card,
.yes-cta {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.yes-cta {
  margin-top: 3rem;
  text-align: center;
}

/* Beratungsangebote: intro card */
.intro-card {
  align-items: center;
  gap: 40px;
  margin-bottom: 3rem;
  padding: 40px 48px;
  background: var(--yes-card);
}

.intro-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  color: var(--yes-heading);
}

.intro-card p {
  margin: 0;
  line-height: 1.75;
}

.intro-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Beratungsangebote: offer cards */
.offers__title {
  max-width: 1000px;
  margin: 0 auto 1rem;
  font-size: 1.25rem;
  color: var(--yes-heading);
}

.offers__grid {
  gap: 24px;
}

.offer {
  --offer-bg: #f1f1f1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 0;
  background: var(--offer-bg);
}

.offer--intro {
  --offer-bg: #ffe87c;
}

.offer--couple {
  --offer-bg: #d3d0e2;
}

.offer--single {
  --offer-bg: #c0eaf0;
}

.offer__image {
  margin: 0;
}

.offer__image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 999px;
}

.offer__name {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--yes-heading);
}

.offer__tagline {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4a5568;
}

.offer__details {
  font-size: 0.85rem;
  color: var(--yes-heading);
}

.offer__details summary {
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid #718096;
}

.offer__details ul {
  margin: 0.75rem 0 1.5rem;
  padding-left: 1.25rem;
}

.offer__price {
  margin: auto -22px 0;
  padding: 0.4rem 1rem;
  background: #000;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}

/* Über mich */
.quote-card {
  margin-bottom: 4rem;
  padding: 40px 48px 36px;
  border-top: 6px solid #c0eaf0;
  border-radius: 12px;
  background: var(--yes-card);
  box-shadow: 0 8px 24px rgba(26, 32, 44, 0.08);
  text-align: center;
}

.quote-card__text {
  margin: 0;
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--yes-heading);
}

.quote-card__caption {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #f1f1f1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4a5568;
}

.about-feature {
  align-items: center;
  gap: 48px;
}

.about-feature__image {
  margin: 0;
}

.about-feature__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
}

.about-feature h2 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  color: var(--yes-heading);
}

.motto {
  padding: 0.75rem 1rem;
  border-left: 4px solid #ffe87c;
  background: #fff;
  font-weight: 600;
  color: var(--yes-heading);
}

.facts {
  gap: 24px;
  margin-top: 4rem;
}

.fact-card {
  --fact-accent: #f1f1f1;
  padding: 32px;
  border-top: 6px solid var(--fact-accent);
  background: var(--yes-card);
}

.fact-card--qualification {
  --fact-accent: #d3d0e2;
}

.fact-card--standards {
  --fact-accent: #c0eaf0;
}

.fact-card h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--yes-heading);
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.check-list li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.5rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--fact-accent);
  box-shadow: 0 0 0 2px var(--yes-heading) inset;
}

/* Kontakt */
.contact-layout {
  align-items: flex-start;
  gap: 24px;
}

.contact-form-card {
  padding: 40px 48px;
  border-top: 6px solid #d3d0e2;
  background: var(--yes-card);
}

.contact-form-card h2,
.contact-info-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  color: var(--yes-heading);
}

.contact-form-card__intro {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.contact-info-card {
  padding: 40px 32px;
  background: #c0eaf0;
  overflow-wrap: anywhere;
}

.contact-info-card p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.contact-info-card strong {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a5568;
}

/* Contact Form 7 inside the form card (template: pages/contact-form.cf7.txt) */
.contact-form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form-card .wpcf7 label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--yes-heading);
}

.contact-form-card .wpcf7 input[type="text"],
.contact-form-card .wpcf7 input[type="email"],
.contact-form-card .wpcf7 textarea {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--yes-heading);
}

.contact-form-card .wpcf7 input:focus,
.contact-form-card .wpcf7 textarea:focus {
  border-color: var(--yes-teal);
  box-shadow: 0 0 0 3px rgba(60, 180, 172, 0.25);
  outline: none;
}

.contact-form-card .wpcf7 input[type="submit"] {
  padding: 0.65rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--yes-accent);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.contact-form-card .wpcf7 input[type="submit"]:hover {
  background: var(--yes-accent-hover);
}

/* Header navigation (Kadence): dark grey links, teal underline on hover only */
.header-navigation .header-menu-container > ul > li.menu-item > a {
  border-bottom: 2px solid transparent;
  color: var(--yes-text);
  font-weight: 600;
  transition: border-color 0.2s;
}

.header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.header-navigation
  .header-menu-container
  > ul
  > li.menu-item
  > a:focus-visible {
  border-bottom-color: var(--yes-teal);
  color: var(--yes-text);
}

@media (max-width: 781px) {
  .intro-card,
  .contact-form-card {
    padding: 24px;
  }

  .contact-form-card .form-row {
    grid-template-columns: 1fr;
  }
}