/* Gemeinsame Inhaltsgestaltung fuer Informatik und Webloesungen. */
.service-page > .section.service-process-section,
.service-page > .section.service-detail-section,
.service-page > .section.service-contact-section {
  grid-column: 1 / -1;
  min-width: 0;
}
.service-page > .section.service-detail-section,
.service-page > .section.service-contact-section {
  padding: 0;
  /* Grid gap (18px) plus 14px gives a consistent 32px between visible panels. */
  margin-block: 14px 0;
}
.service-page > .service-process-section { padding: clamp(24px, 3vw, 36px); }
.service-process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 12px 0 0; padding: 0; }
.service-process-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.service-process-steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.service-process-steps li > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--background); color: var(--brand); font-size: 17px; }
.service-process-steps h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
.service-process-steps p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
html body .service-page > .section.service-detail-section > .service-detail-card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px,4vw,56px); padding: 0; height: auto; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.service-detail-heading { min-width: 0; padding: 24px 0; background: transparent; border: 0; }
.service-detail-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--brand); font-size: 22px; }
.service-detail-heading > .kicker { display: block; margin: 0 0 14px; color: var(--accent-text); }
.service-page > .service-detail-section h2 { max-width: 23ch; margin: 0 0 18px; font-size: clamp(25px, 2.5vw, 32px); line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
.service-page > .service-detail-section .service-detail-summary { max-width: 32ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.service-detail-copy { min-width: 0; padding: clamp(28px, 3.6vw, 40px); align-self: start; background: var(--surface); border:1px solid var(--line);border-radius:var(--shape-card,28px);corner-shape:superellipse(1.67); }
.service-detail-copy p { max-width: 65ch; margin: 0 0 20px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.service-detail-copy p:last-child { margin-bottom: 0; }
.service-detail-copy a { color: var(--brand); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.service-detail-copy a:hover { color: var(--ink); }
.service-detail-copy a:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 2px; }
/* The following detail is a horizontal editorial panel, not another split card. */
html body .service-page > .service-detail-section + .service-detail-section > .service-detail-card { display:block; padding:clamp(28px,3.6vw,40px); border:1px solid var(--line); border-radius:var(--shape-card,28px);corner-shape:superellipse(1.67);background:var(--surface); }
.service-detail-section + .service-detail-section .service-detail-heading {display:grid;grid-template-columns:46px minmax(0,1.1fr) minmax(0,.9fr);column-gap:24px;align-items:start;padding:0 0 28px;border-bottom:1px solid var(--line)}
.service-detail-section + .service-detail-section .service-detail-icon {grid-column:1;grid-row:1 / 3;margin:0;background:var(--surface-soft)}
.service-detail-section + .service-detail-section .service-detail-heading>.kicker {grid-column:2;grid-row:1;margin-bottom:12px}
.service-detail-section + .service-detail-section h2 {grid-column:2;grid-row:2;margin:0;max-width:25ch}
.service-detail-section + .service-detail-section .service-detail-summary {grid-column:3;grid-row:1 / 3;align-self:center;max-width:29ch;padding-left:20px;border-left:2px solid var(--brand-soft)}
.service-detail-section + .service-detail-section .service-detail-copy {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:28px 0 0;border:0;border-radius:0;background:transparent}
.service-detail-section + .service-detail-section .service-detail-copy p {margin:0}
.service-page > .service-contact-section > .outlined {
  height: auto;
  flex-wrap: nowrap;
  gap: 40px;
}
.service-contact-copy { min-width: 0; }
.service-contact-copy > .kicker { display: block; margin: 0 0 14px; color: #fff; }
.service-page > .service-contact-section h2 { max-width: 26ch; margin: 0 0 16px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.service-page > .service-contact-section p { max-width: 62ch; margin: 0; line-height: 1.7; color: #fff; }
@media (max-width: 1000px) {
  .service-process-steps { gap: 18px; }
  .service-process-steps li { grid-template-columns: 1fr; gap: 14px; }
  .service-process-steps li + li { padding-left: 18px; }
  .service-page > .service-contact-section > .outlined { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 760px) {
  .service-page > .section.service-detail-section,
  .service-page > .section.service-contact-section { margin-block:6px 0; }
  .service-process-steps { grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
  .service-process-steps li { grid-template-columns: 36px minmax(0, 1fr); }
  .service-process-steps li + li { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  html body .service-page > .section.service-detail-section > .service-detail-card { grid-template-columns: 1fr;gap:20px;padding:0; }
  .service-detail-heading { border:0; padding: 8px 0; }
  .service-detail-icon { width: 42px; height: 42px; margin-bottom: 22px; }
  .service-detail-copy { padding: 26px; }
  html body .service-page > .service-detail-section + .service-detail-section > .service-detail-card {padding:26px}
  .service-detail-section + .service-detail-section .service-detail-heading {grid-template-columns:42px minmax(0,1fr);gap:0 16px;padding-bottom:24px}
  .service-detail-section + .service-detail-section .service-detail-summary {grid-column:1 / -1;grid-row:3;margin-top:20px;padding-left:14px;max-width:none}
  .service-detail-section + .service-detail-section .service-detail-copy {grid-template-columns:1fr;gap:20px;padding-top:24px}
  .service-page > .service-detail-section h2 { max-width: 26ch; }
  .service-page > .service-contact-section > .outlined { padding: 28px; }
  .service-page > .service-contact-section .btn { max-width: 100%; white-space: normal; }
}