/* =========================================================
   UTILITIES — Elektroservice Ernst
   Single-purpose utility classes
   ========================================================= */

/* Display */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text color */
.text-accent   { color: var(--color-accent); }
.text-muted    { color: var(--color-ink-muted); }
.text-light    { color: var(--color-light-on-dark); }
.text-ink      { color: var(--color-ink); }

/* Spacing */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* Width */
.w-full  { width: 100%; }
.max-w-text { max-width: var(--container-text); }

/* Aspect ratios */
.aspect-square { aspect-ratio: 1; }
.aspect-video  { aspect-ratio: 16/9; }
.aspect-portrait { aspect-ratio: 3/4; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Background */
.bg-surface { background: var(--color-surface); }
.bg-dark    { background: var(--color-dark); }
.bg-accent  { background: var(--color-accent); }

/* Border */
.border-top    { border-top: 1px solid var(--color-rule); }
.border-bottom { border-bottom: 1px solid var(--color-rule); }

/* Responsive utilities */
@media (max-width: 900px) {
  .hide-md { display: none !important; }
}

@media (max-width: 580px) {
  .hide-sm { display: none !important; }
}

@media (min-width: 581px) {
  .show-sm { display: none !important; }
}


/* =========================================================
   PAGES — Elektroservice Ernst
   Page-specific styles
   ========================================================= */

/* —— HOME: Hero ——————————————————————————————————————————— */

.hero {
  min-height: 100dvh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-32));
  overflow: hidden;
  background: var(--color-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(14,12,9,0.72) 0%, rgba(14,12,9,0.28) 50%, rgba(14,12,9,0.62) 100%),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDEyMDAgODAwIj4KICA8cmVjdCB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI4MDAiIGZpbGw9IiMwZTBjMDkiLz4KCiAgPCEtLSBNYWluIGhvcml6b250YWwgdHJhY2VzIC0tPgogIDxnIHN0cm9rZT0iI2E4Zjg0OCIgc3Ryb2tlLXdpZHRoPSIxLjIiIG9wYWNpdHk9IjAuMTgiIGZpbGw9Im5vbmUiPgogICAgPHBhdGggZD0iTTAgMTIwIEgxODAgVjgwIEg0MjAgVjEyMCBINjgwIi8+CiAgICA8cGF0aCBkPSJNNTIwIDEyMCBINzYwIFYxNjAgSDk2MCBWMTIwIEgxMjAwIi8+CiAgICA8cGF0aCBkPSJNMCAyODAgSDgwIFYyNDAgSDMwMCBWMjgwIEg1MDAgVjMyMCBINjgwIi8+CiAgICA8cGF0aCBkPSJNNjAwIDMyMCBIODIwIFYyODAgSDExMDAgVjMyMCBIMTIwMCIvPgogICAgPHBhdGggZD0iTTAgNDQwIEgyMDAgVjQwMCBINDQwIFY0NDAgSDcwMCIvPgogICAgPHBhdGggZD0iTTY0MCA0NDAgSDkwMCBWNDgwIEgxMDQwIFY0NDAgSDEyMDAiLz4KICAgIDxwYXRoIGQ9Ik0wIDYwMCBIMTIwIFY1NjAgSDM4MCBWNjAwIEg2MjAgVjY0MCBIODAwIi8+CiAgICA8cGF0aCBkPSJNNzYwIDY0MCBIOTgwIFY2MDAgSDEyMDAiLz4KICAgIDxwYXRoIGQ9Ik0xMDAgNzAwIEgzNDAgVjY2MCBINTYwIFY3MDAgSDgwMCBWNzQwIEgxMDAwIi8+CiAgPC9nPgoKICA8IS0tIFZlcnRpY2FsIGNvbm5lY3RvcnMgLS0+CiAgPGcgc3Ryb2tlPSIjYThmODQ4IiBzdHJva2Utd2lkdGg9IjEuMiIgb3BhY2l0eT0iMC4xOCIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMTgwIDgwIFYwIi8+CiAgICA8cGF0aCBkPSJNNDIwIDgwIFYwIi8+CiAgICA8cGF0aCBkPSJNNjgwIDEyMCBWMjAwIEg3NjAiLz4KICAgIDxwYXRoIGQ9Ik05NjAgMTIwIFY2MCBIMTEwMCBWMCIvPgogICAgPHBhdGggZD0iTTgwIDI0MCBWMTYwIEgxNjAgVjgwIi8+CiAgICA8cGF0aCBkPSJNMzAwIDI0MCBWMTgwIi8+CiAgICA8cGF0aCBkPSJNNTAwIDI4MCBWMjAwIEg2MDAiLz4KICAgIDxwYXRoIGQ9Ik04MjAgMjgwIFYyMDAgSDkwMCBWMTIwIEgxMDIwIi8+CiAgICA8cGF0aCBkPSJNMjAwIDQwMCBWMzIwIEgzNDAiLz4KICAgIDxwYXRoIGQ9Ik00NDAgNDAwIFYzNDAgSDU2MCBWMjgwIi8+CiAgICA8cGF0aCBkPSJNOTAwIDQ4MCBWNTYwIi8+CiAgICA8cGF0aCBkPSJNMTA0MCA0NDAgVjM2MCBIMTE2MCBWMjgwIi8+CiAgICA8cGF0aCBkPSJNMTIwIDU2MCBWNDgwIEg2MCBWNDAwIi8+CiAgICA8cGF0aCBkPSJNMzgwIDU2MCBWNTAwIEgyNjAgVjQ0MCIvPgogICAgPHBhdGggZD0iTTk4MCA2MDAgVjUyMCBIMTA4MCBWNDgwIi8+CiAgICA8cGF0aCBkPSJNMzQwIDY2MCBWNjAwIEg0ODAiLz4KICAgIDxwYXRoIGQ9Ik01NjAgNjYwIFY1ODAgSDY0MCIvPgogICAgPHBhdGggZD0iTTgwMCA3NDAgVjY4MCBIODgwIFY2MDAiLz4KICAgIDxwYXRoIGQ9Ik0xMDAwIDc0MCBWNjgwIEgxMTAwIFY2NDAgSDEyMDAiLz4KICA8L2c+CgogIDwhLS0gVmlhIGhvbGVzIC8ganVuY3Rpb24gcGFkcyAtLT4KICA8ZyBmaWxsPSIjYThmODQ4IiBvcGFjaXR5PSIwLjM1Ij4KICAgIDxjaXJjbGUgY3g9IjE4MCIgY3k9IjgwIiByPSI1Ii8+PGNpcmNsZSBjeD0iNDIwIiBjeT0iODAiIHI9IjUiLz4KICAgIDxjaXJjbGUgY3g9IjY4MCIgY3k9IjEyMCIgcj0iNSIvPjxjaXJjbGUgY3g9Ijc2MCIgY3k9IjEyMCIgcj0iNSIvPgogICAgPGNpcmNsZSBjeD0iOTYwIiBjeT0iMTIwIiByPSI1Ii8+PGNpcmNsZSBjeD0iMTEwMCIgY3k9IjEyMCIgcj0iNSIvPgogICAgPGNpcmNsZSBjeD0iODAiIGN5PSIyNDAiIHI9IjUiLz48Y2lyY2xlIGN4PSIzMDAiIGN5PSIyNDAiIHI9IjUiLz4KICAgIDxjaXJjbGUgY3g9IjUwMCIgY3k9IjI4MCIgcj0iNSIvPjxjaXJjbGUgY3g9IjgyMCIgY3k9IjI4MCIgcj0iNSIvPgogICAgPGNpcmNsZSBjeD0iMjAwIiBjeT0iNDAwIiByPSI1Ii8+PGNpcmNsZSBjeD0iNDQwIiBjeT0iNDAwIiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSI5MDAiIGN5PSI0ODAiIHI9IjUiLz48Y2lyY2xlIGN4PSIxMDQwIiBjeT0iNDQwIiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMjAiIGN5PSI1NjAiIHI9IjUiLz48Y2lyY2xlIGN4PSIzODAiIGN5PSI1NjAiIHI9IjUiLz4KICAgIDxjaXJjbGUgY3g9Ijk4MCIgY3k9IjYwMCIgcj0iNSIvPjxjaXJjbGUgY3g9IjM0MCIgY3k9IjY2MCIgcj0iNSIvPgogICAgPGNpcmNsZSBjeD0iNTYwIiBjeT0iNjYwIiByPSI1Ii8+PGNpcmNsZSBjeD0iODAwIiBjeT0iNzQwIiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMDAwIiBjeT0iNzQwIiByPSI1Ii8+PGNpcmNsZSBjeD0iNjAwIiBjeT0iMzIwIiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSIxNjAiIGN5PSI4MCIgcj0iMyIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9IjQ0MCIgcj0iMyIvPgogICAgPGNpcmNsZSBjeD0iNDgwIiBjeT0iNjAwIiByPSIzIi8+PGNpcmNsZSBjeD0iNjQwIiBjeT0iNDQwIiByPSI1Ii8+CiAgICA8Y2lyY2xlIGN4PSI2MjAiIGN5PSI2NDAiIHI9IjUiLz4KICA8L2c+CgogIDwhLS0gQ29tcG9uZW50IG91dGxpbmVzIChJQyBjaGlwcywgcmVzaXN0b3JzKSAtLT4KICA8ZyBzdHJva2U9IiNhOGY4NDgiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4xNCIgZmlsbD0ibm9uZSI+CiAgICA8IS0tIElDIHRvcC1yaWdodCAtLT4KICAgIDxyZWN0IHg9Ijg4MCIgeT0iNDAiIHdpZHRoPSIxMDAiIGhlaWdodD0iNjAiIHJ4PSIzIi8+CiAgICA8bGluZSB4MT0iODkwIiB5MT0iNTAiIHgyPSI4NzAiIHkyPSI1MCIvPjxsaW5lIHgxPSI4OTAiIHkxPSI2MCIgeDI9Ijg3MCIgeTI9IjYwIi8+CiAgICA8bGluZSB4MT0iODkwIiB5MT0iNzAiIHgyPSI4NzAiIHkyPSI3MCIvPjxsaW5lIHgxPSI4OTAiIHkxPSI4MCIgeDI9Ijg3MCIgeTI9IjgwIi8+CiAgICA8bGluZSB4MT0iOTcwIiB5MT0iNTAiIHgyPSI5OTAiIHkyPSI1MCIvPjxsaW5lIHgxPSI5NzAiIHkxPSI2MCIgeDI9Ijk5MCIgeTI9IjYwIi8+CiAgICA8bGluZSB4MT0iOTcwIiB5MT0iNzAiIHgyPSI5OTAiIHkyPSI3MCIvPjxsaW5lIHgxPSI5NzAiIHkxPSI4MCIgeDI9Ijk5MCIgeTI9IjgwIi8+CiAgICA8IS0tIElDIG1pZC1yaWdodCAtLT4KICAgIDxyZWN0IHg9IjEwNjAiIHk9IjMwMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjUwIiByeD0iMyIvPgogICAgPGxpbmUgeDE9IjEwNjgiIHkxPSIzMDgiIHgyPSIxMDUwIiB5Mj0iMzA4Ii8+PGxpbmUgeDE9IjEwNjgiIHkxPSIzMTgiIHgyPSIxMDUwIiB5Mj0iMzE4Ii8+CiAgICA8bGluZSB4MT0iMTA2OCIgeTE9IjMyOCIgeDI9IjEwNTAiIHkyPSIzMjgiLz4KICAgIDxsaW5lIHgxPSIxMTMyIiB5MT0iMzA4IiB4Mj0iMTE1MCIgeTI9IjMwOCIvPjxsaW5lIHgxPSIxMTMyIiB5MT0iMzE4IiB4Mj0iMTE1MCIgeTI9IjMxOCIvPgogICAgPCEtLSBSZXNpc3RvciBib3R0b20tbGVmdCAtLT4KICAgIDxyZWN0IHg9IjYwIiB5PSI2MzAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyMiIgcng9IjQiLz4KICAgIDxsaW5lIHgxPSI2MCIgeTE9IjY0MSIgeDI9IjQwIiB5Mj0iNjQxIi8+PGxpbmUgeDE9IjExMCIgeTE9IjY0MSIgeDI9IjEzMCIgeTI9IjY0MSIvPgogICAgPCEtLSBDYXBhY2l0b3IgLS0+CiAgICA8bGluZSB4MT0iMjgwIiB5MT0iNTAwIiB4Mj0iMjgwIiB5Mj0iNTIwIi8+PGxpbmUgeDE9IjMwMCIgeTE9IjUwMCIgeDI9IjMwMCIgeTI9IjUyMCIvPgogICAgPGxpbmUgeDE9IjI3MCIgeTE9IjUxMCIgeDI9IjI4MCIgeTI9IjUxMCIvPjxsaW5lIHgxPSIzMDAiIHkxPSI1MTAiIHgyPSIzMTAiIHkyPSI1MTAiLz4KICAgIDwhLS0gRGlvZGUgc3ltYm9sIC0tPgogICAgPHBhdGggZD0iTTcwMCAyMDAgTDcyMCAyMTAgTDcwMCAyMjAgWiIvPgogICAgPGxpbmUgeDE9IjcyMCIgeTE9IjIwMCIgeDI9IjcyMCIgeTI9IjIyMCIvPgogICAgPGxpbmUgeDE9IjY4MCIgeTE9IjIxMCIgeDI9IjcwMCIgeTI9IjIxMCIvPgogICAgPGxpbmUgeDE9IjcyMCIgeTE9IjIxMCIgeDI9Ijc0MCIgeTI9IjIxMCIvPgogIDwvZz4KCiAgPCEtLSBMaWdodG5pbmcgYm9sdCDigJQgbGFyZ2UsIGJyYW5kIG1hcmsgLS0+CiAgPHBhdGggZD0iTTEwNTAgNDYwIEwxMDEwIDU0MCBIMTA0MCBMMTAwMCA2MjAgTDEwNjAgNTIwIEgxMDMwIFoiCiAgICAgICAgZmlsbD0iI2E4Zjg0OCIgb3BhY2l0eT0iMC4wOCIvPgoKICA8IS0tIFN1YnRsZSBzY2FuLWxpbmUgb3ZlcmxheSAtLT4KICA8cGF0dGVybiBpZD0ic2NhbiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQiIGhlaWdodD0iNCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICA8bGluZSB4MT0iMCIgeTE9IjAiIHgyPSI0IiB5Mj0iMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjAuNSIgb3BhY2l0eT0iMC4xNSIvPgogIDwvcGF0dGVybj4KICA8cmVjdCB3aWR0aD0iMTIwMCIgaGVpZ2h0PSI4MDAiIGZpbGw9InVybCgjc2NhbikiLz4KPC9zdmc+Cg==') center/cover no-repeat;
  will-change: transform;
}

.hero__bg-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--color-dark), transparent);
  z-index: 1;
}

/* Decorative circuit lines */
.hero__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__deco-line {
  position: absolute;
  background: var(--color-accent);
  opacity: 0.4;
}

.hero__deco-line--h {
  height: 1px;
  width: 120px;
  top: 38%;
  right: 8%;
  animation: line-pulse 4s ease-in-out infinite;
}

.hero__deco-line--v {
  width: 1px;
  height: 80px;
  top: 30%;
  right: calc(8% + 119px);
  animation: line-pulse 4s ease-in-out 0.5s infinite;
}

@keyframes line-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__deco-line { animation: none; }
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__eyebrow-line {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.hero__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  color: var(--color-light-on-dark);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-8);
  max-width: 14ch;
}

.hero__title em {
  font-style: italic;
  color: var(--color-accent-light);
}

.hero__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: rgba(245, 240, 232, 0.65);
  max-width: 44ch;
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  z-index: 2;
  cursor: pointer;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(245,240,232,0.4), transparent);
  animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}

.hero__scroll-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.4);
  writing-mode: vertical-lr;
}

/* —— HOME: Intro strip —————————————————————————————————— */

.intro-strip {
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-rule);
}

.intro-strip__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 768px) {
  .intro-strip__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* —— HOME: Services preview ——————————————————————————————— */

.services-preview {
  padding-block: var(--section-gap);
}

.services-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-rule);
}

@media (max-width: 700px) {
  .services-preview__grid {
    grid-template-columns: 1fr;
  }
}

.services-preview__item {
  padding: var(--space-10) var(--space-8);
  border-right: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  transition:
    background var(--duration-base),
    transform var(--duration-base) var(--ease-out-quart);
  cursor: default;
  position: relative;
  overflow: hidden;
}

.services-preview__item:nth-child(even) {
  border-right: none;
}

.services-preview__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translateX(-101%);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  z-index: 0;
}

.services-preview__item:hover::after {
  transform: translateX(0);
}

.services-preview__item > * {
  position: relative;
  z-index: 1;
}

.services-preview__item:hover .services-preview__icon,
.services-preview__item:hover .services-preview__title,
.services-preview__item:hover .services-preview__text {
  color: #fff;
}

.services-preview__icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
  transition: color var(--duration-base);
}

.services-preview__title {
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
  transition: color var(--duration-base);
}

.services-preview__text {
  font-size: var(--fs-sm);
  color: var(--color-ink-secondary);
  line-height: var(--lh-relaxed);
  transition: color var(--duration-base);
}

/* —— HOME: Target groups ——————————————————————————————————— */

.target-groups {
  padding-block: var(--section-gap);
  background: var(--color-surface);
}

.target-groups__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .target-groups__grid {
    grid-template-columns: 1fr;
  }
}

.target-card {
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow var(--duration-base),
    transform var(--duration-base) var(--ease-out-quart);
}

.target-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.target-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  color: var(--color-rule);
  line-height: 0.9;
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  pointer-events: none;
  transition: color var(--duration-slow);
}

.target-card:hover .target-card__index {
  color: var(--color-accent-pale);
}

.target-card__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
  position: relative;
}

.target-card__text {
  font-size: var(--fs-sm);
  color: var(--color-ink-secondary);
  line-height: var(--lh-relaxed);
  position: relative;
}

/* —— HOME: Values strip ——————————————————————————————————— */

.values-strip {
  padding-block: var(--space-12);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  overflow: hidden;
}

.values-strip__list {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  white-space: nowrap;
}

.values-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-secondary);
  flex-shrink: 0;
}

.values-strip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* —— LEISTUNGEN: Detailed service sections ————————————————— */

.service-section {
  padding-block: var(--section-gap);
  border-bottom: 1px solid var(--color-rule);
}

.service-section:last-child {
  border-bottom: none;
}

.service-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.service-section--reverse .service-section__grid {
  direction: rtl;
}

.service-section--reverse .service-section__grid > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .service-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    direction: ltr !important;
  }
}

.service-section__visual {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  position: relative;
}

.service-section__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform var(--duration-xslow) var(--ease-out-quart);
}

.service-section:hover .service-section__visual img {
  transform: scale(1.03);
}

/* Visual placeholder pattern for service images */
.service-visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--color-surface) 0,
      var(--color-surface) 8px,
      var(--color-surface-dark) 8px,
      var(--color-surface-dark) 9px
    );
}

.service-visual--placeholder svg {
  width: 80px;
  height: 80px;
  color: var(--color-rule-dark);
  opacity: 0.5;
}