/* ==========================================================================
   Hero — split layout, text left / full-bleed image right
   ========================================================================== */
.hero{
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  align-items: stretch;
  min-height: min(44rem, 88vh);
}
.hero__text{
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-section-md) clamp(1.5rem, 4vw, 4rem) var(--space-section-md) clamp(1.5rem, 6vw, 5rem);
}
.hero__text .btn{ margin-top: 1rem; align-self: flex-start; }
.hero__badges{ display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-top: 2.25rem; }
.hero__badge{ display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.hero__badge .icon{ color: var(--accent-ink); }
.hero__media{ position: relative; overflow: hidden; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-feature) 0 0 var(--radius-feature); }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; min-height: auto; }
  .hero__text{ padding: var(--space-section-sm) clamp(1.25rem, 5vw, 2rem); order: 1; }
  .hero__media{ order: 0; aspect-ratio: 4 / 3; }
  .hero__media img{ border-radius: 0 0 var(--radius-feature) var(--radius-feature); }
}

/* ==========================================================================
   Praxis-Slider (CPT slide)
   ========================================================================== */
.pslider{ position: relative; }
.pslider__track{
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: var(--radius); gap: 0;
}
.pslider__track::-webkit-scrollbar{ display: none; }
.pslider__slide{
  flex: 0 0 100%; scroll-snap-align: start; position: relative;
  aspect-ratio: 16 / 7.5; overflow: hidden; border-radius: var(--radius);
}
.pslider__slide img{ width: 100%; height: 100%; object-fit: cover; }
.pslider__caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, oklch(15% 0.03 240 / 0.78) 0%, oklch(15% 0.03 240 / 0) 100%);
  color: #fff; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
}
.pslider__caption h3{ color: #fff; margin-bottom: 0.3em; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.9rem); }
.pslider__caption p{ color: oklch(96% 0.01 240); margin: 0; max-width: 46ch; }
.pslider__controls{ display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.pslider__arrow{
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--primary); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pslider__arrow:hover{ background: var(--bg-subtle); transform: translateY(-1px); }
.pslider__dots{ display: flex; gap: 0.5rem; }
.pslider__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.pslider__dot.is-active{ background: var(--primary); width: 22px; border-radius: 4px; }

/* ==========================================================================
   Section heading block (alternating alignment)
   ========================================================================== */
.section-head{ max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.align-right{ margin-left: auto; text-align: right; }
.section-head.align-right .lead{ margin-left: auto; }

/* ==========================================================================
   Leistungen grid — 12-col grid per design system
   ========================================================================== */
.service-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
.service-card{
  grid-column: span 3;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.service-card__media{ aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.service-card:hover .service-card__media img{ transform: scale(1.05); }
.service-card__body{ padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.service-card__body .eyebrow{ margin-bottom: 0; }
.service-card__body h3{ font-size: 1.25rem; margin-bottom: 0.2em; }
.service-card__body p{ color: var(--text-muted); font-size: 0.975rem; margin: 0; }
.service-card__link{ margin-top: auto; padding-top: 0.75rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 0.4rem; }
.service-card__link .icon{ width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .service-card__link .icon{ transform: translateX(3px); }

@media (max-width: 1000px){
  .service-card{ grid-column: span 6; }
}
@media (max-width: 620px){
  .service-grid{ gap: 1.25rem; }
  .service-card{ grid-column: span 12; }
}

/* ==========================================================================
   Quote / break band — full-bleed deliberate interruption
   ========================================================================== */
.quote-band{
  background: var(--primary);
  color: #fff;
  padding-block: var(--space-section-lg);
  text-align: center;
}
.quote-band .container-narrow{ display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.quote-band blockquote{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.25; margin: 0; color: #fff;
}
.quote-band cite{ font-style: normal; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(90% 0.03 155); }

/* ==========================================================================
   Zielgruppe / content with image (alternating sides)
   ========================================================================== */
.split-feature{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split-feature__media{ border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.split-feature__media img{ width: 100%; height: 100%; object-fit: cover; }
.split-feature.is-reversed .split-feature__media{ order: 2; }
.split-feature ul{ display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.5rem; }
.split-feature ul li{ display: flex; gap: 0.75rem; align-items: flex-start; max-width: none; }
.split-feature ul li .icon{ color: var(--accent-ink); margin-top: 0.2em; flex-shrink: 0; }

@media (max-width: 820px){
  .split-feature{ grid-template-columns: 1fr; }
  .split-feature.is-reversed .split-feature__media{ order: 0; }
}

/* ==========================================================================
   Content + facts sidebar (dominant column + narrow sidebar)
   ========================================================================== */
.page-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.page-layout aside{ position: sticky; top: 7rem; background: var(--bg-subtle); border-radius: var(--radius); padding: 2rem; }
@media (max-width: 880px){
  .page-layout{ grid-template-columns: 1fr; }
  .page-layout aside{ position: static; }
}
.page-hero{ padding-block: var(--space-section-sm) var(--space-section-sm); }
.page-hero .eyebrow{ margin-bottom: 1rem; }
.entry-content{ max-width: 68ch; }
.entry-content > *{ margin-bottom: 1.25em; }
.entry-content h2{ margin-top: 1.75em; }
.entry-content ul{ display: flex; flex-direction: column; gap: 0.6rem; padding-left: 0; }
.entry-content ul li{ display: flex; gap: 0.7rem; align-items: flex-start; }
.entry-content ul li::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-ink); margin-top: 0.6em; flex-shrink: 0;
}
.related-services{ margin-top: var(--space-section-sm); padding-top: var(--space-section-sm); border-top: 1px solid var(--border); }

/* ==========================================================================
   Kontakt section
   ========================================================================== */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-info{ display: flex; flex-direction: column; gap: 1.75rem; }
.contact-row{ display: flex; align-items: center; gap: 0.9rem; }
.contact-row .icon{ color: var(--accent-ink); flex-shrink: 0; }
.contact-row a{ font-weight: 600; font-size: 1.05rem; }
.contact-row p{ margin: 0; max-width: none; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--primary-ink); color: oklch(92% 0.02 240); padding-block: var(--space-section-sm) 2rem; }
.footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid oklch(100% 0 0 / 0.12); }
.footer-brand{ display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-brand .brand-mark{ background: var(--accent); color: var(--primary-ink); }
.footer-brand span{ font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; }
.site-footer p{ color: oklch(78% 0.02 240); max-width: 34ch; }
.footer-col h4{ color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a{ color: oklch(82% 0.02 240); }
.footer-col a:hover{ color: #fff; }
.footer-contact-row{ display: flex; gap: 0.7rem; align-items: flex-start; }
.footer-contact-row .icon{ color: var(--accent); margin-top: 0.2em; flex-shrink: 0; }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: 0.85rem; color: oklch(68% 0.02 240); }
.footer-bottom a{ color: inherit; }
.footer-bottom a:hover{ color: #fff; }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================================
   Small phones — tighter rhythm on top of the fluid clamp() scale
   ========================================================================== */
@media (max-width: 600px){
  .section{ padding-block: var(--space-section-sm); }
  .hero__media{ aspect-ratio: 5 / 4; }
  .hero__badges{ gap: 0.5rem 0.9rem; }
  .quote-band{ padding-block: var(--space-section-md); }
  .pslider__caption{ padding: 1.25rem 1.25rem 1rem; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .btn{ width: 100%; justify-content: center; }
  .hero__text .btn{ width: auto; }
}