.service-page {background:#f8f7fd}
.service-header {background:#fff;border-bottom:1px solid var(--line)}
.service-header .wrap,.service-header nav,.service-footer {display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px}
.service-header .wrap {justify-content:space-between;padding-block:14px}
.service-header a,.service-footer a {text-decoration:none}
.service-header a:hover,.service-footer a:hover {text-decoration:underline}
.service-header nav a {display:inline-flex;align-items:center;min-height:44px}
.service-brand {font-weight:900;font-size:1.45rem;color:var(--blau-tief)}
.service-hero {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px,5vw,64px);
  margin-top:clamp(20px,4vw,48px);
  padding:clamp(24px,5vw,64px);
  border:1px solid var(--line);
  border-radius:26px;
  background:radial-gradient(ellipse at 95% 20%,#ddd6ff,transparent 66%),#fff;
}
.service-hero h1 {font-size:clamp(2.1rem,5.4vw,4.6rem);letter-spacing:-.045em;overflow-wrap:anywhere}
.service-kicker {font-size:.82rem;font-weight:800;color:var(--blau-tief);margin-bottom:12px}
.service-lead {margin-top:16px;color:var(--muted);max-width:60ch}
.service-price {padding:clamp(18px,3vw,32px);border-radius:20px;background:var(--nacht);color:#fff}
.service-price .service-kicker,.service-price p:last-of-type {color:var(--nacht-text)}
.service-amount {font-size:clamp(1.9rem,3.5vw,3rem);font-weight:850;letter-spacing:-.04em;line-height:1.15;margin-bottom:8px}
.service-price .btn {margin-top:18px;background:#fff;color:var(--nacht);text-align:center}
.service-price .btn:hover {background:var(--blau-hell)}
.service-price .btn:focus-visible {outline-color:#fff}
.service-block {margin-block:clamp(32px,5vw,64px)}
.service-block h2,.service-proof h2,.service-contact h2 {font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:12px}
.service-cards,.service-directory-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.service-cards article,.service-directory-card {padding:clamp(16px,2vw,25px);background:#fff;border:1px solid var(--line);border-radius:16px}
.service-cards article > span {display:inline-block;color:var(--blau-tief);font-weight:800;margin-bottom:12px}
.service-cards article p {margin-top:8px;color:var(--muted)}
.service-proof,.service-contact {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:clamp(18px,3vw,34px);
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--blau-hell);
}
.service-proof img {width:100%;height:auto;border-radius:12px}
.service-proof .link {display:inline-block;margin-top:8px}
.service-contact {display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:26px}
.service-contact div {flex:1 1 320px}
.service-related ul {display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0}
.service-related a {display:inline-flex;align-items:center;min-height:44px}
.service-footer {justify-content:space-between;padding-block:20px;border-top:1px solid var(--line);font-size:.9rem}
.service-directory {margin-top:32px}
.service-directory h3 {margin-bottom:12px}
.service-directory-card {display:grid;gap:5px;text-decoration:none}
.service-directory-card strong {color:var(--blau-tief)}
.service-directory-card span {color:var(--muted);font-size:.9rem}
.service-directory-card:hover {border-color:var(--blau);background:var(--blau-hell)}
@media (max-width:900px) {
  .service-directory-grid,.service-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px) {
  .service-hero,.service-cards,.service-directory-grid,.service-proof {grid-template-columns:1fr}
  .service-header .wrap {gap:0 20px}
}

.service-directory h2 {margin-bottom:14px}
.fit-section {padding-block:24px}
.fit-details {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
}
.fit-details summary {
  padding:14px 18px;
  color:var(--blau-tief);
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  font-weight:800;
  cursor:pointer;
}
.fit-details summary:focus-visible {outline-offset:-3px}
.fit-details ul {padding:0 20px 16px 40px;color:var(--muted)}
.fit-details li + li {margin-top:6px}
.case-preview {width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
