/* ==========================================================================
   Smart Solution 24 — Haupt-Stylesheet
   Portierung der Lovable-Vorlage (src/index.css + Tailwind-Utilities).
   Farbwerte als HSL-Kanäle identisch zur Vorlage.
   ========================================================================== */

/* --- Design-Tokens ------------------------------------------------------ */
:root {
  --background: 0 0% 100%;
  --foreground: 210 19% 31%;
  --primary: 0 86% 47%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 19% 31%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 97%;
  --muted-foreground: 210 10% 50%;
  --border: 0 0% 88%;
  --ring: 0 86% 47%;
  --radius: 1rem;
  --usp-bg: #F0F2F4;
  --shadow-img: 0 8px 30px rgba(0, 0, 0, 0.12);
  --nav-h: 76px;
}

/* --- Basis --------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* Reveal-Transforms (translateX ±30px) dürfen keinen Seitwärts-Scroll erzeugen.
   clip statt hidden: erhält position:sticky. */
body { overflow-x: clip; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Weicher Schatten auf allen Bildern; .no-shadow zum Abschalten (Logos, BG) */
img:not(.no-shadow) {
  box-shadow: var(--shadow-img);
  border-radius: inherit;
}

[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* --- Scroll-Reveal (identisch zur Vorlage) ------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(0.97); }
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Layout-Container (Tailwind .container + px-4 lg:px-8) --------------- */
.ss24-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 1024px) {
  .ss24-container { padding-inline: 2rem; }
}

/* Volle Breite für Sektions-Gruppen im Content */
.ss24-section { margin: 0; }

/* --- Typo-Bausteine ------------------------------------------------------ */
.ss24-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(var(--primary));
}
.ss24-eyebrow--light { color: rgba(255, 255, 255, 0.9); }

/* text-4xl (36/40) → md:text-5xl (48/1) */
.ss24-h2,
.ss24-sechead h2,
.ss24-about__body h2,
.ss24-cta h2 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 2.5rem;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) {
  .ss24-h2,
  .ss24-sechead h2,
  .ss24-about__body h2,
  .ss24-cta h2 { font-size: 3rem; line-height: 1; }
}

.ss24-lead {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: hsl(var(--muted-foreground));
}
.ss24-lead--relaxed { line-height: 1.625; }

/* --- Buttons -------------------------------------------------------------- */
.ss24-btn {
  box-sizing: border-box; /* width:100%-Varianten (Kontakt-Box) laufen sonst über */
  display: inline-block;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.ss24-btn.ss24-btn--red {
  background-color: hsl(var(--primary));
  color: #fff;
}
.ss24-btn.ss24-btn--red:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: scale(1.03);
  color: #fff;
}
.ss24-btn.ss24-btn--outline-white {
  border-color: #fff;
  color: #fff;
  background: transparent;
}
.ss24-btn.ss24-btn--outline-white:hover {
  background-color: #fff;
  color: hsl(var(--secondary));
}
.ss24-btn.ss24-btn--white {
  background-color: #fff;
  color: hsl(var(--primary));
}
.ss24-btn.ss24-btn--white:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: scale(1.03);
}

/* --- Wellen-Divider ------------------------------------------------------- */
.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background-color: var(--wave-from, #fff);
}
.wave-divider::after {
  content: "";
  display: block;
  height: 28px;
  width: 100%;
  background-color: var(--wave-to, #fff);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,40 720,8 1080,24 C1260,32 1380,28 1440,24 L1440,40 L0,40 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C360,40 720,8 1080,24 C1260,32 1380,28 1440,24 L1440,40 L0,40 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 768px) {
  .wave-divider::after { height: 40px; }
}
.wave-from-white { --wave-from: #ffffff; }
.wave-from-grey  { --wave-from: hsl(0 0% 97%); }
.wave-from-usp   { --wave-from: #F0F2F4; }
.wave-from-red   { --wave-from: hsl(0 86% 47%); }
.wave-from-dark  { --wave-from: hsl(210 19% 31%); }
.wave-to-white { --wave-to: #ffffff; }
.wave-to-grey  { --wave-to: hsl(0 0% 97%); }
.wave-to-usp   { --wave-to: #F0F2F4; }
.wave-to-red   { --wave-to: hsl(0 86% 47%); }
.wave-to-dark  { --wave-to: hsl(210 19% 31%); }

/* --- Navigation (Glass-Pill, sticky) -------------------------------------- */
/* Sticky muss auf dem Template-Part-Wrapper liegen — innerhalb von .ss24-nav
   hätte sticky keinen Bewegungsraum (Parent = eigene Höhe). */
header.wp-block-template-part {
  position: sticky;
  top: 0.75rem;
  z-index: 50;
}
.ss24-nav {
  padding-inline: 0.75rem;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .ss24-nav { padding-inline: 1.5rem; }
}
.ss24-nav__bar {
  max-width: 1400px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border) / 0.7);
  background-color: hsl(var(--background) / 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.375rem 1.25rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .ss24-nav__bar { padding-inline: 2rem; }
}
.ss24-nav.is-scrolled .ss24-nav__bar {
  padding-block: 0.25rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ss24-nav__logo {
  display: flex;
  align-items: center;
}
.ss24-nav__logo img {
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}
.ss24-nav__menu {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .ss24-nav__menu { display: flex; }
}
.ss24-nav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--secondary));
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ss24-nav__link:hover {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.ss24-nav__link--portal { font-size: 0.75rem; }

/* Desktop-Dropdown „Leistungen" (reines CSS-Hover wie die Vorlage) */
.ss24-nav__dropdown { position: relative; }
.ss24-nav__dropdown .ss24-nav__chevron { transition: transform 0.2s ease; }
.ss24-nav__dropdown:hover .ss24-nav__chevron { transform: rotate(180deg); }
.ss24-nav__dropdown:hover > .ss24-nav__link {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.ss24-nav__panel {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 50;
  width: 14rem;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  transition: all 0.2s ease;
}
.ss24-nav__dropdown:hover .ss24-nav__panel {
  visibility: visible;
  opacity: 1;
}
.ss24-nav__panel-inner {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border) / 0.7);
  background-color: hsl(var(--background));
  padding: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-nav__panel-inner a {
  display: block;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--secondary));
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ss24-nav__panel-inner a:hover {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}

/* Hamburger + mobiles Panel */
.ss24-nav__burger {
  display: block;
  background: none;
  border: 0;
  color: hsl(var(--secondary));
  cursor: pointer;
  line-height: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .ss24-nav__burger { display: none; }
}
.ss24-nav__burger .icon-close { display: none; }
.ss24-nav.is-open .ss24-nav__burger .icon-close { display: block; }
.ss24-nav.is-open .ss24-nav__burger .icon-menu { display: none; }

.ss24-nav__mobile {
  display: none;
  max-width: 1400px;
  margin: 0.5rem auto 0;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: 0.5rem 1rem 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.ss24-nav.is-open .ss24-nav__mobile { display: block; }
@media (min-width: 768px) {
  .ss24-nav__mobile { display: none !important; }
}
.ss24-nav__mobile-link {
  display: block;
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--secondary));
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ss24-nav__mobile-link:hover {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.ss24-nav__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ss24-nav__mobile-toggle .ss24-nav__chevron { transition: transform 0.2s ease; }
.ss24-nav__mobile.services-open .ss24-nav__mobile-toggle .ss24-nav__chevron { transform: rotate(180deg); }
.ss24-nav__mobile-services {
  display: none;
  margin-left: 0.75rem;
  border-left: 1px solid hsl(var(--border) / 0.6);
  padding-left: 0.5rem;
}
.ss24-nav__mobile.services-open .ss24-nav__mobile-services { display: block; }
.ss24-nav__mobile-services a {
  display: block;
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--secondary));
  text-decoration: none;
}
.ss24-nav__mobile-services a:hover {
  background-color: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.ss24-nav__mobile-link--portal {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* --- Footer ---------------------------------------------------------------- */
.ss24-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: hsl(var(--secondary));
  padding-block: 4rem;
}
.ss24-footer__grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .ss24-footer__grid { grid-template-columns: repeat(4, 1fr); }
}
.ss24-footer img { max-height: 48px; width: auto; height: auto; object-fit: contain; }
.ss24-footer figure { margin: 0; }
.ss24-footer p { margin: 0; }
.ss24-footer__grid > * { margin: 0; }
.ss24-footer p.ss24-footer__claim {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--secondary-foreground) / 0.7);
}
.ss24-footer h4 {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--secondary-foreground));
}
.ss24-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--secondary-foreground) / 0.7);
}
.ss24-footer li + li { margin-top: 0.5rem; }
.ss24-footer ul a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ss24-footer ul a:hover { color: hsl(var(--primary)); }
.ss24-footer__bottom {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--secondary-foreground) / 0.5);
}

/* --- Karten-Effekte --------------------------------------------------------- */
.ss24-card {
  position: relative;
  border-radius: 1rem;
  background-color: #fff;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}
.ss24-card--lift:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Roter Balken, der oben von links einfährt */
.ss24-card--bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 1;
}
.ss24-card--bar:hover::before { transform: scaleX(1); }

/* Karte komplett klickbar machen (Link mit .ss24-card__cover) */
.ss24-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Bild-Zoom auf Hover (TargetGroups: duration-700) */
.ss24-img-zoom img { transition: transform 0.7s ease; }
.ss24-img-zoom:hover img { transform: scale(1.05); }

/* ==========================================================================
   Sektions-Layout
   ========================================================================== */

/* Reveal-Verzögerungen (Vorlage: gestaffelte transition-delay) */
.reveal-d50  { transition-delay: 50ms; }
.reveal-d80  { transition-delay: 80ms; }
.reveal-d100 { transition-delay: 100ms; }
.reveal-d120 { transition-delay: 120ms; }
.reveal-d160 { transition-delay: 160ms; }
.reveal-d180 { transition-delay: 180ms; }
.reveal-d240 { transition-delay: 240ms; }

/* Standard-Sektion py-24 lg:py-32 */
.ss24-sec { padding-block: 6rem; }
@media (min-width: 1024px) { .ss24-sec { padding-block: 8rem; } }
.ss24-sec--slim { padding-block: 2.5rem; }              /* TrustBar py-10 */
.ss24-sec--cta { padding-block: 5rem; }                  /* CTA py-20 lg:py-28 */
@media (min-width: 1024px) { .ss24-sec--cta { padding-block: 7rem; } }

.ss24-bg-white { background-color: #fff; }
.ss24-bg-grey  { background-color: hsl(0 0% 97%); }
.ss24-bg-usp   { background-color: #F0F2F4; }
.ss24-bg-red   { background-color: hsl(0 86% 47%); }
.ss24-bg-dark  { background-color: hsl(210 19% 31%); }

/* Zentrierter Sektions-Kopf (Eyebrow + H2 + Lead), max-w-2xl */
.ss24-sechead {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.ss24-sechead .ss24-eyebrow { margin: 0 0 1rem; }
.ss24-sechead h2 { margin: 0; }
.ss24-sechead .ss24-lead { margin: 1.25rem 0 0; }

/* Grids */
.ss24-grid { display: grid; gap: 1.5rem; }
.ss24-grid--gap8 { gap: 2rem; }
.ss24-grid > * { margin: 0; }
@media (min-width: 768px) {
  .ss24-grid--md2 { grid-template-columns: repeat(2, 1fr); }
  .ss24-grid--md3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .ss24-grid--lg2 { grid-template-columns: repeat(2, 1fr); }
  .ss24-grid--lg3 { grid-template-columns: repeat(3, 1fr); }
}
.ss24-cards { margin-top: 4rem; }

/* --- Hero ------------------------------------------------------------------ */
.ss24-hero.wp-block-cover {
  min-height: 60vh;
  align-items: flex-start;
  overflow: hidden;
  padding: 0;
}
@media (min-width: 768px) { .ss24-hero.wp-block-cover { min-height: 80vh; } }
@media (min-width: 1024px) { .ss24-hero.wp-block-cover { min-height: 100vh; } }
/* Core setzt bei Custom-Content-Position width:auto (doppelte Klasse = hohe
   Spezifität) — für volle Breite hier gleichziehen */
.ss24-hero.has-custom-content-position.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
.ss24-tile.has-custom-content-position.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
  width: 100%;
  min-width: 0; /* Flex-Item: langes Wort darf den Container nicht aufdrücken */
  margin: 0;
}
.ss24-hero__content {
  padding-top: 7rem;
  padding-bottom: 3rem;
}
@media (min-width: 640px) { .ss24-hero__content { padding-top: 8rem; } }
@media (min-width: 1024px) { .ss24-hero__content { padding-top: 10rem; padding-bottom: 4rem; } }
.ss24-hero__text {
  max-width: 42rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.ss24-hero__text .ss24-eyebrow { margin: 0 0 1.25rem; }
/* Tailwind-Kaskade der Vorlage: base 36px/1.05 → md 48px/1 → lg 64px/1 */
.ss24-hero h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 768px) { .ss24-hero h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .ss24-hero h1 { font-size: 64px; } }
.ss24-hero h1 mark {
  background: none;
  color: hsl(var(--primary));
}
.ss24-hero__sub {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.9);
}

/* Button-Zeile (Hero/CTA): mt-10, mobil gestapelt */
.ss24-btnrow {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.ss24-btnrow > .wp-block-button { margin: 0; }
.ss24-btnrow .wp-block-button__link { display: block; width: 100%; text-align: center; }
@media (min-width: 640px) {
  .ss24-btnrow { align-items: flex-start; }
  .ss24-btnrow .wp-block-button__link { display: inline-block; width: auto; }
}
/* CTA: mobil zentriert, nicht gestreckt */
.ss24-btnrow--center { align-items: center; }
.ss24-btnrow--center .wp-block-button__link { display: inline-block; width: auto; }
/* Einzelner Button im Fließtext (About): nie strecken */
.ss24-btnrow--inline { align-items: flex-start; }
.ss24-btnrow--inline .wp-block-button__link { display: inline-block; width: auto; }
@media (min-width: 640px) { .ss24-btnrow { flex-direction: row; } }

.ss24-btnrow .wp-block-button__link {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.2s ease;
}
.ss24-btnrow .ss24-btn--red .wp-block-button__link {
  background-color: hsl(var(--primary));
  color: #fff;
}
.ss24-btnrow .ss24-btn--red .wp-block-button__link:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: scale(1.03);
}
.ss24-btnrow .ss24-btn--outline-white .wp-block-button__link {
  border-color: #fff;
  color: #fff;
}
.ss24-btnrow .ss24-btn--outline-white .wp-block-button__link:hover {
  background-color: #fff;
  color: hsl(var(--secondary));
}
.ss24-btnrow .ss24-btn--outline-white--to-red .wp-block-button__link:hover { color: hsl(var(--primary)); }
.ss24-btnrow .ss24-btn--white .wp-block-button__link {
  background-color: #fff;
  color: hsl(var(--primary));
}
.ss24-btnrow .ss24-btn--white .wp-block-button__link:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- TrustBar ---------------------------------------------------------------- */
.ss24-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: hsl(var(--secondary));
  font-weight: 600;
}
.ss24-trust img { box-shadow: none; }
.ss24-trust p { margin: 0; }

/* --- Service-Karten ------------------------------------------------------------ */
.ss24-scard {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  transition: all 0.3s ease;
}
.ss24-scard:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-scard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background-color: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.ss24-scard:hover::before { transform: scaleX(1); }
.ss24-scard figure { margin: 0; line-height: 0; }
.ss24-scard img { box-shadow: none; }
.ss24-scard h3 {
  margin: 1.5rem 0 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-scard__desc {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-scard__more {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--primary));
  transition: color 0.2s ease;
}
.ss24-scard__more::after { content: ""; position: absolute; inset: 0; }
.ss24-scard:hover .ss24-scard__more { color: hsl(var(--primary) / 0.8); }

/* --- USP-Karten (nummeriert) ---------------------------------------------------- */
.ss24-uspcard {
  position: relative;
  height: 100%;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s ease;
}
.ss24-uspcard:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-uspcard__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
}
.ss24-uspcard__head img { box-shadow: none; }
.ss24-uspcard__num {
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: hsl(var(--primary));
}
.ss24-uspcard h3 {
  margin: 1.5rem 0 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-uspcard__desc {
  margin: 1rem 0 0;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-uspcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--primary));
}
.ss24-uspcard__link::after { content: ""; position: absolute; inset: 0; }
.ss24-uspcard__link img { box-shadow: none; transition: transform 0.3s ease; }
.ss24-uspcard:hover .ss24-uspcard__link img { transform: translateX(0.25rem); }

/* --- About ------------------------------------------------------------------------ */
.ss24-about {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 768px) {
  .ss24-about { grid-template-columns: 5fr 6fr; }
}
.ss24-about > * { margin: 0; }
.ss24-about__imgwrap {
  position: relative;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--shadow-img);
}
@media (min-width: 768px) { .ss24-about__imgwrap { margin-inline: 0; } }
.ss24-about__imgwrap figure { margin: 0; height: 100%; }
.ss24-about__imgwrap img { height: 100%; width: 100%; object-fit: cover; box-shadow: none; }
.ss24-about__body .ss24-eyebrow { margin: 0 0 1rem; }
.ss24-about__body h2 { margin: 0; }
.ss24-about__body .ss24-lead { margin: 1.5rem 0 0; }
.ss24-about__body .ss24-lead + .ss24-lead { margin-top: 1.25rem; }
.ss24-about__body .ss24-btnrow { margin-top: 2rem; }

/* --- Zielgruppen-Kacheln -------------------------------------------------------------- */
.ss24-tile.wp-block-cover {
  height: 380px;
  min-height: 380px;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-tile .wp-block-cover__image-background { transition: transform 0.7s ease; }
.ss24-tile:hover .wp-block-cover__image-background { transform: scale(1.05); }
.ss24-tile .wp-block-cover__inner-container { padding: 2rem; }
.ss24-tile h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 768px) { .ss24-tile h3 { font-size: 1.875rem; line-height: 2.25rem; } }
.ss24-tile p {
  margin: 0.75rem 0 0;
  max-width: 28rem;
  color: hsl(var(--secondary-foreground) / 0.85);
}

/* --- Reviews ---------------------------------------------------------------------------- */
.ss24-review {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s ease;
}
.ss24-review:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-stars { display: flex; gap: 0.25rem; margin: 0; }
.ss24-stars figure { margin: 0; line-height: 0; }
.ss24-stars img { box-shadow: none; }
.ss24-review__text {
  margin: 1.25rem 0 0;
  line-height: 1.625;
  color: hsl(var(--secondary));
}
.ss24-review__name {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}

/* --- CTA-Banner --------------------------------------------------------------------------- */
.ss24-cta.wp-block-cover {
  background-color: hsl(var(--primary));
  overflow: hidden;
  padding: 5rem 0; /* py-20, lg:py-28 — explizit, da Cover-Default-Padding sonst gewinnt */
  min-height: 0;   /* Core-Default 430px unterschreiten können */
}
@media (min-width: 1024px) {
  .ss24-cta.wp-block-cover { padding-block: 7rem; }
}
.ss24-cta .wp-block-cover__image-background {
  opacity: 0.1 !important;
  mix-blend-mode: overlay;
}
.ss24-cta__inner { text-align: center; }
.ss24-cta h2 {
  margin: 0;
  margin-inline: auto;
  max-width: 48rem;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 768px) { .ss24-cta h2 { font-size: 3rem; } }
.ss24-cta h2 strong { font-weight: 800; }
.ss24-cta__sub {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Kontakt-Sektion -------------------------------------------------------------------------- */
.ss24-contact-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .ss24-contact-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; }
}
.ss24-contact-grid > * { margin: 0; }
.ss24-contact__ask { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: hsl(var(--secondary)); }
.ss24-contact__box {
  margin-top: 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 1.5rem;
}
.ss24-contact__box-title { margin: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: hsl(var(--secondary)); }
.ss24-contact__box-sub { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.ss24-contact__box .ss24-btn { margin-top: 1rem; width: 100%; text-align: center; }
.ss24-btn.ss24-btn--outline-dark {
  border-color: hsl(var(--secondary));
  color: hsl(var(--secondary));
  background: transparent;
  padding: 0.75rem 1.25rem;
}
.ss24-btn.ss24-btn--outline-dark:hover {
  background-color: hsl(var(--secondary));
  color: #fff;
}
.ss24-sechead--contact { margin-bottom: 3rem; }
@media (min-width: 1024px) { .ss24-sechead--contact { margin-bottom: 4rem; } }

/* Schadensmeldung-Karte */
.ss24-damage {
  margin-top: 6rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
}
@media (min-width: 1024px) { .ss24-damage { padding: 3rem; } }
.ss24-damage__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .ss24-damage__grid { grid-template-columns: 1fr 1.4fr; } }
.ss24-damage__grid > * { margin: 0; }
.ss24-damage h3 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) { .ss24-damage h3 { font-size: 2.25rem; line-height: 2.5rem; } }
.ss24-damage__intro { margin: 1rem 0 0; color: hsl(var(--muted-foreground)); }
.ss24-damage .ss24-eyebrow { margin: 0 0 1rem; }

/* ==========================================================================
   Formulare (Wizard + Schadensmeldung)
   ========================================================================== */
.ss24-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: inherit;
  color: hsl(var(--secondary));
}
.ss24-input::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
.ss24-input:focus {
  border-color: hsl(var(--primary));
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}
.ss24-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: hsl(var(--secondary));
}

.ss24-form {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
@media (min-width: 640px) { .ss24-form { padding: 2rem; } }
@media (min-width: 1024px) { .ss24-form { padding: 2.5rem; } }

/* Schritt-Indikator */
.ss24-msf__steps {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ss24-msf__stepwrap { display: flex; flex: 1; align-items: center; gap: 0.5rem; }
.ss24-msf__dot {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  transition: background-color 0.2s, color 0.2s;
}
.ss24-msf__dot.is-active { background-color: hsl(var(--primary)); color: #fff; }
.ss24-msf__dot.is-done { background-color: hsl(var(--secondary)); color: #fff; }
.ss24-msf__line { display: none; height: 1px; flex: 1; background-color: hsl(var(--border)); }
@media (min-width: 640px) { .ss24-msf__line { display: block; } }

.ss24-msf__progress {
  margin-bottom: 0.5rem;
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background-color: hsl(var(--muted));
}
.ss24-msf__progress-fill {
  height: 100%;
  width: 25%;
  background-color: hsl(var(--primary));
  transition: width 0.5s ease;
}
.ss24-msf__stepline {
  margin: 0 0 2rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.ss24-msf__panel h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) { .ss24-msf__panel h3 { font-size: 1.875rem; line-height: 2.25rem; } }
.ss24-msf__panel-sub { margin: 0.5rem 0 0; line-height: 1.5rem; color: hsl(var(--muted-foreground)); }
.ss24-msf__panel[hidden] { display: none; }
.ss24-msf__fields { margin-top: 1.5rem; display: grid; gap: 1rem; }

/* Auswahl-Karten (Immobilientyp, Verwaltungsstatus) */
.ss24-msf__options { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .ss24-msf__options { grid-template-columns: repeat(2, 1fr); } }
.ss24-msf__options--inline { margin-top: 0; }
.ss24-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 1rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  font-family: inherit;
  color: hsl(var(--secondary));
  cursor: pointer;
  transition: all 0.2s ease;
}
.ss24-choice:hover {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-choice.is-selected {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.05);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-choice svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.ss24-choice.is-selected svg { color: hsl(var(--primary)); }

/* Wizard-Navigation */
.ss24-msf__nav {
  margin-top: 2rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .ss24-msf__nav { flex-direction: row; align-items: center; justify-content: space-between; }
}
.ss24-msf__btn[hidden] { display: none; }
.ss24-msf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.ss24-msf__btn--next, .ss24-msf__btn--submit {
  background-color: hsl(var(--primary));
  color: #fff;
}
.ss24-msf__btn--next:hover, .ss24-msf__btn--submit:hover {
  opacity: 0.9;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: scale(1.03);
}
.ss24-msf__btn--next:disabled {
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  cursor: default;
}
.ss24-msf__btn--back {
  border-color: hsl(var(--secondary));
  color: hsl(var(--secondary));
  background: transparent;
}
.ss24-msf__btn--back:hover {
  background-color: hsl(var(--secondary));
  color: #fff;
}
.ss24-msf__consent {
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--secondary));
}
.ss24-msf__consent input {
  margin-top: 0.25rem;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  accent-color: hsl(var(--primary));
}
.ss24-msf__consent a {
  font-weight: 600;
  color: hsl(var(--primary));
  text-underline-offset: 2px;
}
.ss24-msf__consent a:hover { text-decoration: underline; }

/* Schadensmeldung */
.ss24-dmg__form { display: grid; gap: 1rem; }
@media (min-width: 640px) { .ss24-dmg__form { grid-template-columns: repeat(2, 1fr); } }
.ss24-dmg__form .span2 { grid-column: 1 / -1; }
.ss24-dmg__form .ss24-msf__btn { width: 100%; margin-top: 0.5rem; }
@media (min-width: 640px) { .ss24-dmg__form .ss24-msf__btn { width: auto; } }
.ss24-input--file::file-selector-button {
  margin-right: 0.75rem;
  border-radius: 0.25rem;
  border: 0;
  background-color: hsl(var(--muted));
  padding: 0.25rem 0.75rem;
  color: hsl(var(--secondary));
  font-family: inherit;
}

/* Erfolgs-Zustände */
.ss24-form__success { padding-block: 3rem; text-align: center; }
.ss24-form__success h3 { margin: 0; font-size: 1.5rem; font-weight: 700; color: hsl(var(--secondary)); }
.ss24-form__success p { margin: 0.75rem 0 0; color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Unterseiten (Task 5) — neue Klassen, bestehende bleiben unangetastet
   ========================================================================== */

/* Zusätzliche Reveal-Verzögerungen (Vorlage: i*80 / i*100 / feste Werte) */
.reveal-d150 { transition-delay: 150ms; }
.reveal-d200 { transition-delay: 200ms; }
.reveal-d220 { transition-delay: 220ms; }
.reveal-d300 { transition-delay: 300ms; }
.reveal-d320 { transition-delay: 320ms; }
.reveal-d350 { transition-delay: 350ms; }
.reveal-d400 { transition-delay: 400ms; }

/* Utilities */
.ss24-mt4  { margin-top: 1rem; }
.ss24-mt6  { margin-top: 1.5rem; }
.ss24-mt10 { margin-top: 2.5rem; }
.ss24-mt12 { margin-top: 3rem; }
.ss24-mt16 { margin-top: 4rem; }
.ss24-center { text-align: center; }
.ss24-maxw-xl  { max-width: 36rem; margin-inline: auto; }
.ss24-maxw-2xl { max-width: 42rem; margin-inline: auto; }
.ss24-container--3xl { max-width: 48rem; }
.ss24-container--4xl { max-width: 56rem; }
.ss24-sechead--full { max-width: none; }
.ss24-sechead--3xl { max-width: 48rem; }
.ss24-sechead .ss24-lead.ss24-mt6 { margin-top: 1.5rem; }
.ss24-sechead .ss24-lead.ss24-mt4 { margin-top: 1rem; }
.ss24-cards.ss24-cards--14 { margin-top: 3.5rem; }
/* Sektions-Paddings der Vorlage: py-16 lg:py-20 bzw. py-16 lg:py-24 */
.ss24-sec--md { padding-block: 4rem; }
@media (min-width: 1024px) { .ss24-sec--md { padding-block: 5rem; } }
.ss24-sec--md24 { padding-block: 4rem; }
@media (min-width: 1024px) { .ss24-sec--md24 { padding-block: 6rem; } }
/* Ganze Karte klickbar (Vorlage: <Link> um die Karte) */
.ss24-cover-link::after { content: ""; position: absolute; inset: 0; }

/* --- Breadcrumbs (Breadcrumbs.tsx) --------------------------------------- */
.ss24-breadcrumbs {
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  background-color: #fff;
}
.ss24-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding-block: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.ss24-breadcrumbs__list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ss24-breadcrumbs__list a:hover { color: hsl(var(--primary)); }
.ss24-breadcrumbs__list .ss24-crumb--strong {
  font-weight: 500;
  color: hsl(var(--secondary));
}
.ss24-crumb-sep {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  background-color: hsl(var(--muted-foreground) / 0.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- SubHero (SubHero.tsx) ------------------------------------------------ */
.ss24-subhero.wp-block-cover {
  min-height: 55vh;
  padding: 0;
  overflow: hidden;
}
@media (min-width: 768px) { .ss24-subhero.wp-block-cover { min-height: 65vh; } }
.ss24-subhero__content { padding-block: 5rem; }
@media (min-width: 1024px) { .ss24-subhero__content { padding-block: 7rem; } }
.ss24-subhero__text { max-width: 42rem; }
.ss24-subhero__text .ss24-eyebrow { margin: 0 0 1.25rem; }
.ss24-eyebrow--light80 { color: rgba(255, 255, 255, 0.8); }
/* Kaskade der Vorlage: 36/1.05 → md 48/1 → lg 60/1 */
.ss24-subhero h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
@media (min-width: 768px) { .ss24-subhero h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .ss24-subhero h1 { font-size: 3.75rem; } }
.ss24-subhero__sub {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.85);
}

/* --- IconBoxes ------------------------------------------------------------- */
.ss24-ibox {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-ibox figure { margin: 0; line-height: 0; }
.ss24-ibox img { box-shadow: none; }
.ss24-ibox h3 {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-ibox__desc {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* --- USPGeneric: Intro unterm Kopf ------------------------------------------ */
.ss24-usp-intro {
  max-width: 48rem;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* --- Service-Karten: externer Link (Eigentümerportal) ------------------------ */
.ss24-scard__ext {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.ss24-scard__ext img { box-shadow: none; }

/* --- FAQ (core details, Radix-Optik) ------------------------------------------ */
.ss24-faq__box {
  margin-top: 3rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-faq__box > .wp-block-details {
  margin: 0;
  border-bottom: 1px solid hsl(var(--border));
}
.ss24-faq__box > .wp-block-details:last-child { border-bottom: 0; }
.ss24-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-align: left;
  color: hsl(var(--secondary));
  cursor: pointer;
  list-style: none;
}
.ss24-faq__item summary::-webkit-details-marker { display: none; }
.ss24-faq__item summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: hsl(var(--secondary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.ss24-faq__item[open] summary::after { transform: rotate(180deg); }
.ss24-faq__item p {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* --- RechtsTeaser --------------------------------------------------------------- */
.ss24-rteaser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  padding: 2rem;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .ss24-rteaser {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem;
  }
}
.ss24-rteaser:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-rteaser > * { margin: 0; }
.ss24-rteaser__left {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.ss24-rteaser__left > * { margin: 0; }
.ss24-iconsq {
  display: flex;
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: hsl(var(--primary) / 0.1);
  margin: 0;
}
.ss24-iconsq img { box-shadow: none; }
.ss24-rteaser h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) { .ss24-rteaser h3 { font-size: 1.5rem; line-height: 2rem; } }
.ss24-rteaser__desc {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .ss24-rteaser__desc { font-size: 1rem; } }
.ss24-morelink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.ss24-morelink img { box-shadow: none; transition: transform 0.3s ease; }
.ss24-rteaser:hover .ss24-morelink img,
.ss24-rcard:hover .ss24-morelink img,
.ss24-pcard:hover .ss24-morelink img { transform: translateX(0.25rem); }

/* --- RelatedServices ---------------------------------------------------------------- */
.ss24-related { max-width: 56rem; margin-inline: auto; }
.ss24-rcard {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  transition: all 0.3s ease;
}
.ss24-rcard:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-rcard > * { margin: 0; }
.ss24-rcard h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-rcard__desc {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-rcard__linkwrap { margin: 1.5rem 0 0; }

/* --- CityCrossLinks -------------------------------------------------------------------- */
.ss24-citycard {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  transition: all 0.3s ease;
}
.ss24-citycard:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-citycard > * { margin: 0; }
.ss24-citycard__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ss24-citycard__left > * { margin: 0; }
.ss24-citycard h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-citycard h3 a { color: inherit; text-decoration: none; }
.ss24-citycard__arrow { margin: 0; line-height: 0; }
.ss24-citycard__arrow img { box-shadow: none; transition: transform 0.3s ease; }
.ss24-citycard:hover .ss24-citycard__arrow img { transform: translateX(0.25rem); }

/* --- Freie Text-Blöcke ------------------------------------------------------------------- */
.ss24-tpara {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-tpara--center { text-align: center; }
.ss24-tpara--fgxl { color: hsl(var(--foreground)); }
@media (min-width: 1024px) { .ss24-tpara--fgxl { font-size: 1.25rem; } }

/* --- Info-Karten (statisch / hover) --------------------------------------------------------- */
.ss24-icard {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-icard--hover { transition: box-shadow 0.15s ease; }
.ss24-icard--hover:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-icard figure { margin: 0; line-height: 0; }
.ss24-icard img { box-shadow: none; }
.ss24-icard h3 {
  margin: 1.5rem 0 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-icard--h3mt5 h3 { margin-top: 1.25rem; }
.ss24-icard__desc {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-note {
  margin: 2.5rem auto 0;
  max-width: 42rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
}

/* --- Pills (Einzugsgebiet / Service-Links) ---------------------------------------------------- */
.ss24-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 48rem;
  margin: 0 auto;
}
.ss24-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--secondary));
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ss24-pill img { box-shadow: none; }
a.ss24-pill:hover {
  background-color: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}
.ss24-pill--arrow { box-shadow: none; }
a.ss24-pill--arrow:hover {
  background-color: #fff;
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.ss24-pill--arrow img { transition: transform 0.2s ease; }
.ss24-pill--arrow:hover img { transform: translateX(0.25rem); }

/* --- Karten-Platzhalter Städteseiten ------------------------------------------------------------ */
.ss24-mapbox {
  margin: 0 auto;
  display: flex;
  height: 14rem;
  max-width: 42rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-mapbox__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: hsl(var(--secondary));
}
.ss24-mapbox img { box-shadow: none; }

/* --- Gesamtpaket-Banner (Hausmeisterservice) ----------------------------------------------------- */
.ss24-mt10-wrap { margin: 2.5rem 0 0; }
.ss24-btn--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ss24-btn--icon img { box-shadow: none; }

/* --- Fachanwalt-Partner (Rechtssicherheit) -------------------------------------------------------- */
.ss24-partner-grid {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 768px) { .ss24-partner-grid { grid-template-columns: repeat(2, 1fr); } }
.ss24-partner-grid > * { margin: 0; }
.ss24-partner__scale {
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 3rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-partner__scale figure { margin: 0; line-height: 0; }
.ss24-partner__scale img { box-shadow: none; }
@media (min-width: 768px) {
  .ss24-partner__scale img { width: 10rem !important; height: 10rem !important; }
}
.ss24-partner__body .ss24-eyebrow { margin: 0; }
.ss24-partner__body h2 { margin: 1rem 0 0; }
.ss24-partner__body .ss24-tpara { margin-top: 1.5rem; }
.ss24-hintbox {
  margin: 2rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--primary) / 0.3);
  background-color: hsl(var(--primary) / 0.05);
  padding: 1.5rem;
}
.ss24-hintbox img { box-shadow: none; margin-top: 0.25rem; flex-shrink: 0; }
.ss24-hintbox span {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: hsl(var(--secondary));
}

/* --- Heller Hero (Kosten/FAQ/Über uns) ------------------------------------------------------------- */
.ss24-lhero { padding: 6rem 0 3rem; }
@media (min-width: 1024px) { .ss24-lhero { padding-top: 8rem; } }
.ss24-lhero--tall { padding: 8rem 0 5rem; }
@media (min-width: 1024px) { .ss24-lhero--tall { padding: 10rem 0 7rem; } }
.ss24-lhero__eyebrow { margin: 0 0 1rem; }
.ss24-lhero__eyebrow--mb5 { margin-bottom: 1.25rem; }
/* Kaskade: 36/1.1 → md 48/1 → lg 60/1 */
.ss24-lhero h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) { .ss24-lhero h1 { font-size: 3rem; line-height: 1; } }
@media (min-width: 1024px) { .ss24-lhero h1 { font-size: 3.75rem; } }
/* Über uns: 48/1.05 → md 60/1 → lg 72/1, max-w-3xl */
.ss24-lhero--tall h1 {
  font-size: 3rem;
  line-height: 1.05;
  max-width: 48rem;
  margin-inline: auto;
}
@media (min-width: 768px) { .ss24-lhero--tall h1 { font-size: 3.75rem; line-height: 1; } }
@media (min-width: 1024px) { .ss24-lhero--tall h1 { font-size: 4.5rem; } }
.ss24-lhero__lead {
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: hsl(var(--muted-foreground));
}
.ss24-lhero__lead--relaxed { line-height: 1.625; }

/* --- Preis-Karten (Kosten) --------------------------------------------------------------------------- */
.ss24-pcard {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  transition: all 0.3s ease;
}
.ss24-pcard:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-pcard > * { margin: 0; }
.ss24-pcard h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-pcard__price { margin: 1.5rem 0 0; }
.ss24-pcard__price > * { margin: 0; }
.ss24-pcard__amount {
  margin: 0;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
}
.ss24-pcard__unit {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.ss24-pcard__linkwrap { margin: auto 0 0; padding-top: 2rem; }

/* --- Listen-Karten (Kosten: Regelverwaltung / Zusatzleistungen) ---------------------------------------- */
.ss24-lcard {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  padding: 2rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ss24-lcard h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-lcard__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.ss24-lcard__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.ss24-lcard__list li + li { margin-top: 0.75rem; }
.ss24-lcard__list img { box-shadow: none; margin-top: 0.125rem; flex-shrink: 0; }

/* --- Unsere Geschichte (Über uns) ----------------------------------------------------------------------- */
.ss24-story {
  display: grid;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 1024px) { .ss24-story { grid-template-columns: repeat(2, 1fr); gap: 5rem; } }
.ss24-story > * { margin: 0; }
.ss24-story__imgwrap {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.ss24-story__imgwrap figure { margin: 0; line-height: 0; }
.ss24-story__imgwrap img {
  height: 460px;
  width: 100%;
  object-fit: cover;
  box-shadow: none;
}
.ss24-story__body .ss24-eyebrow { margin: 0 0 1rem; }
.ss24-story__body h2 { margin: 0; }
.ss24-story__paras { margin-top: 1.5rem; }
.ss24-story__paras p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.ss24-story__paras p + p { margin-top: 1.25rem; }

/* --- Team (Über uns) -------------------------------------------------------------------------------------- */
.ss24-tcard {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 0.15s ease;
}
.ss24-tcard:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.ss24-tcard__img { height: 16rem; overflow: hidden; margin: 0; }
.ss24-tcard__img figure { margin: 0; height: 100%; }
.ss24-tcard__img img { height: 100%; width: 100%; object-fit: cover; box-shadow: none; }
.ss24-tcard__body { padding: 1.5rem; margin: 0; }
.ss24-tcard h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--secondary));
}
.ss24-tcard__role {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--primary));
}

/* --- Rechtstexte (Impressum/Datenschutz) --------------------------------------------------------------------- */
.ss24-legal {
  min-height: 60vh;
  padding-block: 5rem;
}
.ss24-legal h1 {
  margin: 0 0 1.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.ss24-legal__text { margin: 0; color: hsl(var(--muted-foreground)); }

/* --- 404 ---------------------------------------------------------------------------------------------------- */
.ss24-404 {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--muted));
}
.ss24-404__inner { text-align: center; }
.ss24-404 h1 {
  margin: 0 0 1rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.ss24-404 p {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: hsl(var(--muted-foreground));
}
.ss24-404 a {
  color: hsl(var(--primary));
  text-decoration: underline;
}
.ss24-404 a:hover { color: hsl(var(--primary) / 0.9); }

/* Spezifitäts-Fixes (Utilities müssen Klassen-Defaults schlagen) */
.ss24-tpara.ss24-mt4 { margin-top: 1rem; }
.ss24-tpara.ss24-mt6 { margin-top: 1.5rem; }
.ss24-tpara.ss24-maxw-2xl { margin-inline: auto; }
/* Vorlage: md:text-base überschreibt leading-relaxed (Log-Regel 5) */
@media (min-width: 768px) { .ss24-rteaser__desc { line-height: 1.5rem; } }
/* Vorlage: lg:text-xl überschreibt leading-relaxed */
@media (min-width: 1024px) { .ss24-tpara--fgxl { line-height: 1.75rem; } }
/* Link-Wrapper-Absätze: Zeilenbox exakt wie der inline-flex-Link (20px) */
.ss24-rteaser__linkwrap,
.ss24-rcard__linkwrap,
.ss24-pcard__linkwrap {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* Core-Layout-Styles (:where(.is-layout-flow) > :first-child) nullen Margins
   von Einzelkind-Absätzen — Spezifität anheben */
.ss24-lhero__lead.ss24-lhero__lead { margin: 1.5rem auto 0; }
.ss24-mt10-wrap.ss24-mt10-wrap { margin: 2.5rem 0 0; }
.ss24-maxw-3xl { max-width: 48rem; margin-inline: auto; }
/* Vorlage: implizite Grid-Spalte wächst auf min-content der Karten (Overflow bei
   „Sondereigentumsverwaltung" @360 wird von body overflow-x:clip gekappt) */
@media (max-width: 767px) {
  .ss24-grid--mc { grid-template-columns: minmax(min-content, 1fr); }
}
/* Story-H2 (Über uns): text-4xl → md:text-5xl wie Sektions-H2 */
.ss24-story__body h2 {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 2.5rem;
  color: hsl(var(--secondary));
}
@media (min-width: 768px) {
  .ss24-story__body h2 { font-size: 3rem; line-height: 1; }
}

/* --- Telefon-Link in der Navigation (Local SEO) ---------------------------- */
.ss24-nav__link--phone {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- Google-Bewertungs-Badge (echte Rezensionen) ---------------------------- */
.ss24-gbadge { margin-top: 2.5rem; text-align: center; }
.ss24-gbadge__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
}
.ss24-gbadge__row img { box-shadow: none; }
.ss24-gbadge__row strong { color: hsl(var(--secondary)); }
.ss24-gbadge__row a {
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: none;
}
.ss24-gbadge__row a:hover { text-decoration: underline; }
.ss24-gbadge__row--sm {
  justify-content: flex-start;
  margin-top: 1rem;
  font-size: 0.875rem;
}