/* ==========================================================================
   SERVICES  —  nur für services.html
   ========================================================================== */

/* ==========================================================================
   SEITENKOPF
   ========================================================================== */
.page-hero--center{ text-align:center; }
.page-hero--center .kicker{ justify-content:center; }
.page-hero--center .lead{ margin-inline:auto; }

/* Sprungmarken als Chips */
.chipnav{
  display:flex; flex-wrap:wrap; gap:.6rem;
  justify-content:center;
  margin-top:2.25rem;
}
.chipnav a{
  padding:.55rem 1.15rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--line);
  background:rgba(13,31,26,.6);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.chipnav a:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(255,232,61,.08);
}

/* ==========================================================================
   LEISTUNGSBLÖCKE  (abwechselnd Bild links / rechts)
   ========================================================================== */
.svc{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding:clamp(2.5rem, 6vw, 4.5rem) 0;
}
.svc + .svc{ border-top:1px solid var(--line); }
.svc--flip .svc__media{ order:2; }

.svc__media{ --shot-ratio:4/3; }
.svc__media--light img,
.svc__media--light.shot::before{
  background:linear-gradient(150deg, #ffffff, #e8f0ee);
  color:#4a5c57;
}

.svc__eyebrow{
  display:block;
  font-family:var(--font-display); font-weight:600;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.9rem;
}
.svc__title{
  font-size:clamp(1.6rem, 3.4vw, 2.8rem);
  margin-bottom:1.25rem;
}
.svc__body p{ color:var(--text-dim); font-size:.85rem; }

/* Technik-Chips (.taglist) und Hinweis-Zeile (.note) liegen in theme.css */

/* ==========================================================================
   VERGLEICH
   ========================================================================== */
/* Vergleichstabelle und Icon-Karten liegen in layout.css */

/* ==========================================================================
   WEITERE LEISTUNGEN
   ========================================================================== */
/* „Auf Anfrage“ — bewusst zurückhaltend */
.onrequest{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
  margin-top:clamp(2rem, 4vw, 3rem);
  padding:1.4rem 1.75rem;
  border:1px dashed var(--line);
  background:rgba(11,26,22,.45);
}
.onrequest h3{
  font-size:.85rem; letter-spacing:.08em;
  color:var(--text-dim);
  margin-bottom:.4rem;
}
.onrequest p{ font-size:.76rem; color:var(--text-mute); max-width:62ch; }

/* ==========================================================================
   ABSCHLUSS-BAND  „Planen. Organisieren. Starten.“
   ========================================================================== */
.closing{
  position:relative;
  padding:clamp(5rem, 12vw, 9rem) 0;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
.closing__bg{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(60% 60% at 25% 45%, rgba(53,242,207,.16), transparent 65%),
    radial-gradient(50% 50% at 80% 60%, rgba(255,232,61,.10), transparent 65%),
    linear-gradient(180deg, var(--bg), #061512);
}
.closing__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.22;
  mix-blend-mode:screen;
}
/* animierte Leitbahnen im Hintergrund */
.closing__lines{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  filter:drop-shadow(0 0 8px rgba(255,232,61,.55));
  opacity:.8;
}
.closing__lines path{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:drawLine 3.2s var(--ease) forwards;
}
.closing__lines path:nth-child(2){ animation-delay:.35s; }
.closing__lines path:nth-child(3){ animation-delay:.7s; }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

.closing__title{
  font-size:clamp(2rem, 6.5vw, 5rem);
  line-height:1.05;
  text-shadow:0 0 50px rgba(0,0,0,.6);
}
.closing__title span{ display:block; }
.closing p{
  margin:1.5rem auto 2.5rem;
  max-width:52ch;
  color:var(--text-dim);
  font-size:.88rem;
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 900px){
  .svc{ grid-template-columns:1fr; }
  .svc--flip .svc__media{ order:0; }
  .svc__media{ max-width:560px; }
  .onrequest{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 700px){
  .chipnav{ justify-content:flex-start; }
  .page-hero--center{ text-align:left; }
  .page-hero--center .kicker{ justify-content:flex-start; }
}