/* Leistungsseiten: ausschließlich innerhalb von .service-detail wirksam.
   Gemeinsame Farben, Schriften, Header und Footer stammen aus base.css/site.css. */
.service-detail .service-shell {
  width: min(100% - 2.5rem, 1320px);
  margin-inline: auto;
}
.service-detail main { overflow-wrap: break-word; scroll-margin-top: 7rem; }
.service-detail .service-breadcrumb { padding-block: 1rem; }
.service-detail .service-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--muted);
}
.service-detail .service-breadcrumb li + li::before {
  content: "/";
  margin-inline: .75rem;
  color: var(--muted);
}
.service-detail .service-breadcrumb a { display: inline-block; padding-block: .5rem; }
.service-detail .service-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .2em; }
.service-detail .service-breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }
.service-detail .service-hero { background: var(--ink); color: #fff; }
.service-detail .service-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 4vw, 4rem);
}
.service-detail .service-hero h1 {
  margin: 1.25rem 0 1.75rem;
  font: 600 clamp(2.75rem, 4.4vw, 4.6rem)/1.05 Manrope, sans-serif;
  letter-spacing: -.055em;
}
.service-detail .service-hero h1 em { font-style: normal; color: #fff; }
.service-detail .service-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2px;
  margin-right: .8rem;
  vertical-align: middle;
  background: var(--red);
}
.service-detail .service-lead { max-width: 36rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: #dededb; }
.service-detail .service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.service-detail .button {
  min-height: 3.25rem;
  padding: 1rem 1.35rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .25s ease;
}
.service-detail .text-link { min-height: 2.75rem; padding-block: .6rem; }
.service-detail .service-hero-note {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid #505050;
  max-width: 34rem;
  color: #c8c8c5;
  font-size: .82rem;
}
.service-detail .service-hero-image { margin: 0; min-width: 0; }
.service-detail .service-hero-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.service-detail .service-hero-image--landscape img { aspect-ratio: 4/3; }
.service-detail img.service-image-muted {
  filter: saturate(.82) contrast(.96) brightness(.98) blur(.3px);
}
.service-detail .service-hero-image figcaption { margin-top: .8rem; font-size: .78rem; color: #c8c8c5; }
.service-detail .service-section { padding-block: clamp(3.5rem, 6vw, 6rem); }
.service-detail .service-section-heading { max-width: 51rem; margin-bottom: 2.5rem; }
.service-detail h2 {
  margin: 1rem 0 1.25rem;
  font: 600 clamp(2rem, 3.5vw, 3.5rem)/1.1 Manrope, sans-serif;
  letter-spacing: -.04em;
}
.service-detail h3 { margin: 0 0 .8rem; font: 600 1.35rem/1.3 Manrope, sans-serif; letter-spacing: -.025em; }
.service-detail .service-section-heading > p:last-child:not(.section-number) { font-size: 1.1rem; color: var(--muted); }
.service-detail .service-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.service-detail .service-capabilities article { padding-top: 1.5rem; border-top: 3px solid var(--ink); }
.service-detail .service-capabilities p { margin: 0; color: var(--muted); }
.service-detail .service-capabilities a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.service-detail .service-glass {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  border-block: 1px solid #d9dee8;
  background: #eef1f5;
  color: var(--ink);
}
.service-detail .service-glass-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.service-detail .service-glass .eyebrow { color: var(--navy); }
.service-detail .service-glass h2 { margin-bottom: 1.5rem; color: var(--ink); }
.service-detail .service-glass p:not(.eyebrow) { max-width: 44rem; color: var(--muted); font-size: 1.08rem; }
.service-detail .service-glass .button {
  margin-top: 1.25rem;
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.service-detail .service-glass .button:hover,
.service-detail .service-glass .button:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.service-detail .service-glass-points { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.service-detail .service-glass-points li { padding-block: 1.3rem; border-top: 1px solid rgba(2,37,193,.2); }
.service-detail .service-glass-points li:last-child { border-bottom: 1px solid rgba(2,37,193,.2); }
.service-detail .service-glass-points strong,
.service-detail .service-glass-points span { display: block; }
.service-detail .service-glass-points strong { margin-bottom: .35rem; color: var(--ink); font: 600 1.08rem/1.35 Manrope, sans-serif; }
.service-detail .service-glass-points span { color: var(--muted); font-size: .92rem; }
.service-detail .service-work { background: #fff; }
.service-detail .service-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.service-detail .service-example { display: flex; flex-direction: column; min-width: 0; }
.service-detail .service-example > img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; }
/* Türblätter vollständig zeigen; nur die ausdrücklich markierte Beispielgruppe. */
.service-detail .service-examples--portrait { max-width: 64rem; margin-inline: auto; }
.service-detail .service-examples--portrait .service-example > img { aspect-ratio: 3/4; }
.service-detail .service-example-copy { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding-top: 1.5rem; }
.service-detail .service-example-copy p { margin: 0 0 1.25rem; max-width: 35rem; color: var(--muted); }
.service-detail .service-example-copy .text-link { margin-top: auto; }
/* Gleichmäßige Textanfänge auch bei mehrzeiligen Überschriften. */
@media (min-width: 641px) {
  .service-detail .service-example-copy h3 { min-height: 2.6em; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .service-detail .service-examples { row-gap: 0; }
    .service-detail .service-example { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .service-detail .service-example-copy { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: start; row-gap: 0; }
    .service-detail .service-example-copy h3 { min-height: 0; }
    .service-detail .service-example-copy .text-link { justify-self: start; align-self: end; }
  }
}
.service-detail .service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: service-step;
}
.service-detail .service-steps li { display: grid; grid-template-rows: auto auto 1fr; align-content: start; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.service-detail .service-steps li::before { counter-increment: service-step; content: counter(service-step, decimal-leading-zero); color: var(--navy); font-size: .75rem; font-weight: 600; margin-bottom: 1.5rem; }
.service-detail .service-steps h3 { font-size: 1.12rem; min-height: 2.6em; }
.service-detail .service-steps p { margin: 0; color: var(--muted); }
.service-detail .service-contact { background: var(--ink); color: #fff; padding-block: clamp(3.5rem, 6vw, 6rem); }
.service-detail .service-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
.service-detail .service-contact h2 { color: #fff; }
.service-detail .service-contact p:not(.eyebrow) { color: #d0d0d0; max-width: 43rem; }
.service-detail .service-contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.service-detail .service-hero :focus-visible,
.service-detail .service-contact :focus-visible,
.service-detail .site-footer :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.service-detail .service-glass :focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

@media (max-width: 980px) {
  .service-detail .menu-toggle { min-width: 44px; min-height: 44px; align-content: center; }
  /* Platz für Kopfzeile und obere Kontaktleiste; im Querformat intern scrollbar. */
  .service-detail .site-header nav { max-height: calc(100svh - 122px); overflow-y: auto; overscroll-behavior: contain; gap: .5rem; padding: 1rem 1.5rem; }
  .service-detail .site-header nav a { min-height: 44px; flex-shrink: 0; }
  .service-detail .service-hero-inner { grid-template-columns: 1fr; }
  .service-detail .service-hero h1 { font-size: clamp(2.75rem, 6vw, 4.6rem); }
  .service-detail .service-hero-copy { max-width: 45rem; }
  .service-detail .service-capabilities { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-detail .service-capabilities p { max-width: 46rem; }
  .service-detail .service-glass-inner { grid-template-columns: 1fr; gap: 2rem; }
  .service-detail .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-detail .service-contact-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-detail .service-contact-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
  /* Bei deaktiviertem JavaScript bleibt auch die mobile Navigation erreichbar. */
  .no-js .service-detail .site-header { position: relative; height: auto; flex-wrap: wrap; }
  .no-js .service-detail .menu-toggle { display: none; }
  .no-js .service-detail .site-header nav { position: static; display: flex; width: 100%; max-height: none; overflow: visible; padding: 1rem 0; border: 0; }
}
@media (max-width: 640px) {
  .service-detail .service-breadcrumb ol { font-size: .72rem; }
  .service-detail .service-breadcrumb li + li::before { margin-inline: .5rem; }
  .service-detail .service-hero h1 { font-size: clamp(2.25rem, 9.3vw, 3.5rem); }
  .service-detail .service-actions { align-items: stretch; flex-direction: column; }
  .service-detail .service-actions .text-link { align-self: flex-start; }
  .service-detail .service-glass .button { width: 100%; }
  .service-detail .service-examples { grid-template-columns: 1fr; gap: 2.75rem; }
  .service-detail .service-steps { grid-template-columns: 1fr; }
  .service-detail .service-steps h3 { min-height: 0; }
  .service-detail .service-steps li::before { margin-bottom: .8rem; }
  .service-detail .service-contact-actions { flex-direction: column; align-items: stretch; }
  .service-detail .service-contact-actions .text-link { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .service-detail .button { transition: none; }
}