/*
 * Ausschließlich für designtest.html:
 * zurückhaltende Radien als Variante zur bestehenden kantigen Gestaltung.
 */
:root { --design-radius: 9px; --design-radius-large: 13px; }

.brand-divider,
.brand-site { display: none; }

.brand-image {
  width: 155px;
  max-height: 50px;
}

.site-header .brand { transform: translateY(20px); }

.hero { background: #f3f8fa; }

.intro.section { background: #edf5f7; }
.intro .service-card { background: rgba(255,255,255,.58); }
.method { background: #f8f7f3; }

.button,
.site-search,
.nav-dropdown ul,
.logo-item { border-radius: var(--design-radius); }

.site-search { overflow: hidden; }

.case-card { border-radius: var(--design-radius-large); overflow: hidden; }

.service-grid {
  gap: .7rem;
  border-top: 0;
}

.service-card,
.service-card:first-child {
  border: 1px solid var(--line);
  border-radius: var(--design-radius);
}

.service-illustration {
  width: 84px;
  height: 58px;
  margin-top: 1.3rem;
  color: var(--blue);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.intro .service-card:hover {
  background: #fff;
  border-color: var(--blue);
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(8,121,183,.12);
  transform: translateY(-3px);
}

.intro .service-card:hover .number,
.intro .service-card:hover p { color: var(--muted); }
.intro .service-card:hover .number { color: var(--blue); }
.intro .service-card:hover .service-illustration { color: var(--blue); }

.method.section { padding: clamp(2.5rem,3.5vw,3.5rem) 0; }
.method-image img { height: 360px; }

@media (max-width: 1050px) and (min-width: 651px) {
  .service-card:nth-child(n+4),
  .service-card:nth-child(4) { border: 1px solid var(--line); }
}

@media (max-width: 650px) {
  .site-header .brand { transform: none; }
  .brand-image { width: 128px; }
  .service-card,
  .service-card:first-child,
  .service-card:nth-child(4) { border: 1px solid var(--line); }
  .method-image img { height: 270px; }
}