/* ========================================
   COMPANY / INFO PAGES
   Shared styles for Über uns, Service,
   Händlersuche, Premium-Partner
======================================== */

/* ---------- Generic section (reuses cat-hero) ---------- */
.page-section {
  padding: var(--space-xl) 0;
}

/* Reduce gap when light sections stack consecutively
   (page-opener keeps its gap to the first section so the figure breathes) */
.cat-intro + .page-section:not(.is-dark),
.page-section:not(.is-dark) + .page-section:not(.is-dark) {
  padding-top: 0;
}

.page-section.is-dark {
  background: var(--near-black);
  color: var(--white);
}

.page-section.is-cream {
  background: var(--warm-cream);
}

.page-section.is-white {
  background: var(--white);
}

.page-section-header {
  grid-column: 1 / -1;
  max-width: 56ch;
  margin-bottom: var(--space-xl);
}

@media (min-width: 901px) {
  .page-section-header {
    grid-column: 2 / 14;
  }
}

.page-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--near-black);
  margin-top: var(--space-sm);
}

.is-dark .page-section-heading {
  color: var(--white);
}

.page-section-heading em {
  font-style: normal;
  color: var(--accent);
}

.page-section-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: color-mix(in srgb, var(--near-black) 70%, transparent);
  margin-top: var(--space-md);
}

.is-dark .page-section-text {
  color: color-mix(in srgb, var(--white) 70%, transparent);
}

/* ---------- Values / Feature grid (3-col) ---------- */
.value-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 601px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 901px) {
  .value-grid {
    grid-column: 2 / -2;
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  transition: transform var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--near-black) 4%, transparent),
    0 12px 40px color-mix(in srgb, var(--near-black) 8%, transparent);
}

.is-dark .value-card {
  background: color-mix(in srgb, var(--white) 4%, transparent);
  border-color: color-mix(in srgb, var(--white) 10%, transparent);
}

.value-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.value-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: var(--space-xs);
  line-height: 1.25;
}

.is-dark .value-card-title {
  color: var(--white);
}

.value-card-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: color-mix(in srgb, var(--near-black) 65%, transparent);
}

.is-dark .value-card-text {
  color: color-mix(in srgb, var(--white) 65%, transparent);
}

/* ---------- Stats strip (Über uns) ---------- */
.stats-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: var(--space-xl) 0;
  border-top: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent);
}

@media (min-width: 901px) {
  .stats-strip {
    grid-column: 2 / -2;
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: left;
}

.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--near-black) 55%, transparent);
  margin-top: 0.6rem;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  grid-column: 1 / -1;
  max-width: 64rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (min-width: 901px) {
  .faq-list {
    grid-column: 2 / -2;
  }
}

.faq-item {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--near-black);
  transition: color var(--duration-fast) var(--ease-out);
}

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

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1714' stroke-width='2.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item-body {
  padding: 0 var(--space-lg) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: color-mix(in srgb, var(--near-black) 70%, transparent);
}

/* ---------- Search bar (Händlersuche) ---------- */
.search-form {
  grid-column: 1 / -1;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--near-black) 4%, transparent),
    0 12px 40px color-mix(in srgb, var(--near-black) 6%, transparent);
}

@media (min-width: 901px) {
  .search-form {
    grid-column: 2 / -2;
    padding: var(--space-xl);
  }
}

.search-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 601px) {
  .search-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 901px) {
  .search-form-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    align-items: end;
  }
}

.search-form-grid .form-submit {
  white-space: nowrap;
}

/* ---------- Results placeholder ---------- */
.search-results {
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 901px) {
  .search-results {
    grid-column: 2 / -2;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

.result-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.result-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-2px);
}

.result-card-marker {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-card-marker svg {
  width: 1.1rem;
  height: 1.1rem;
}

.result-card-content {
  flex: 1;
  min-width: 0;
}

.result-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: 0.25rem;
}

.result-card-address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--near-black) 60%, transparent);
  line-height: 1.5;
}

.result-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.4rem;
}

/* ---------- Partner regions (Premium-Partner) ---------- */
.region-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-top: 1px solid color-mix(in srgb, var(--near-black) 12%, transparent);
}

.region-block:first-of-type {
  padding-top: 0;
  border-top: none;
}

@media (min-width: 901px) {
  .region-block {
    grid-column: 2 / -2;
    grid-template-columns: minmax(18rem, 22rem) 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* Aside: sticky map silhouette + state info */
.region-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 901px) {
  .region-aside {
    position: sticky;
    top: var(--space-xl);
  }
}

.region-map {
  width: 100%;
  max-width: 14rem;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--accent) 25%, transparent));
  transition: transform var(--duration-med) var(--ease-out);
}

.region-block:hover .region-map {
  transform: translateY(-4px);
}

.region-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.region-name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  color: var(--near-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.region-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Partner grid */
.partner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 601px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.partner-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--near-black) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--near-black) 10%, transparent);
}

.partner-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  padding: var(--space-md);
  background: var(--warm-cream);
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 6%, transparent);
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter var(--duration-med) var(--ease-out);
}

.partner-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-md) var(--space-md) var(--space-md);
  flex: 1;
}

.partner-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--near-black);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.partner-address {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--near-black) 60%, transparent);
}

.partner-link {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed color-mix(in srgb, var(--near-black) 12%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.partner-link span {
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.partner-card:hover .partner-link span {
  transform: translateX(4px);
}

/* ---------- Big image section (Über uns) ---------- */
.page-image {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--near-black) 10%, transparent);
}

@media (min-width: 901px) {
  .page-image {
    grid-column: 2 / -2;
    aspect-ratio: 21 / 9;
  }
}

.page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* (Parallax backdrop moved to style.css for cross-page availability) */

/* ---------- Map placeholder (reuse contact-map styling if needed) ---------- */
.page-map {
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: color-mix(in srgb, var(--near-black) 6%, transparent);
}

@media (min-width: 901px) {
  .page-map {
    grid-column: 2 / -2;
  }
}

.page-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   BLOG LIST (news index)
======================================== */
.blog-list {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--cream);
}

.blog-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 601px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1001px) {
  .blog-grid {
    grid-column: 2 / -2;
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.blog-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--near-black) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--near-black) 10%, transparent);
}

.blog-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.blog-card-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--near-black) 6%, transparent);
}

.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-med) var(--ease-out);
}

.blog-card:hover .blog-card-img img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: var(--space-md) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.blog-card-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.blog-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.3vw + 0.4rem, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--near-black);
  margin: 0;
}

.blog-card-excerpt {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: color-mix(in srgb, var(--near-black) 65%, transparent);
  margin: 0;
}

.blog-card-link {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed color-mix(in srgb, var(--near-black) 12%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.blog-card-link span {
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.blog-card:hover .blog-card-link span {
  transform: translateX(4px);
}

/* Text-only card variant (no image) */
.blog-card--text .blog-card-body {
  padding: var(--space-lg) var(--space-md);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, var(--white)) 0%,
    var(--white) 100%);
}

.blog-card--text .blog-card-title {
  font-size: clamp(1.2rem, 1.6vw + 0.3rem, 1.5rem);
}

/* ========================================
   BLOG POST (single article)
======================================== */
.post-hero {
  margin: var(--space-xl) 0 0;
  padding: 0 var(--grid-pad);
  overflow: hidden;
}

@media (min-width: 901px) {
  .post-hero {
    padding: 0 var(--space-lg);
  }
}

.post-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
}

@media (max-width: 600px) {
  .post-hero img {
    aspect-ratio: 4 / 3;
  }
}

.post-body {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: var(--cream);
}

.post-prose {
  grid-column: 1 / -1;
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 1.2vw + 0.4rem, 1.2rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--near-black) 82%, transparent);
}

.post-prose p {
  margin-bottom: 1.5em;
}

.post-prose p:last-child {
  margin-bottom: 0;
}

.post-prose p:first-child::first-line {
  font-weight: 500;
}

.post-prose strong {
  font-weight: 600;
  color: var(--near-black);
}

.post-prose a {
  color: var(--accent);
  font-weight: 500;
}

.post-prose a:hover {
  color: var(--near-black);
}

/* Post navigation (prev/next/back) */
.post-nav {
  padding: var(--space-xl) 0 var(--space-2xl);
  background: var(--cream);
  border-top: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent);
}

.post-nav-inner {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

@media (min-width: 801px) {
  .post-nav-inner {
    grid-column: 2 / -2;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
  }
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.post-nav-item:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--near-black) 8%, transparent);
}

.post-nav-item.is-empty {
  background: transparent;
  border: none;
  pointer-events: none;
}

.post-nav-next {
  text-align: right;
}

.post-nav-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.post-nav-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--near-black);
}

.post-nav-back {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--near-black) 65%, transparent);
  padding: 0.75rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--near-black) 18%, transparent);
  border-radius: 999px;
  transition: all var(--duration-fast) var(--ease-out);
  text-align: center;
  white-space: nowrap;
  justify-self: center;
}

.post-nav-back:hover {
  color: var(--white);
  background: var(--near-black);
  border-color: var(--near-black);
}

/* ========================================
   SCROLL-ANIMATION INITIAL STATES
   (animated to opacity:1 via products.js;
   transform set by JS, cleared after animation
   so :hover translate still works)
======================================== */
.page-section-header,
.stat-item,
.value-card,
.faq-item,
.search-form,
.search-results .result-card,
.page-image,
.page-map,
.region-block,
.partner-card,
.blog-card {
  opacity: 0;
  will-change: opacity, transform;
}