/* Leistungsseiten (Template page-leistung, Pattern z. B. leistung-webseiten). Wird nur auf Seiten mit diesem Template geladen.
   Kopf und Fuß: css/kopf-fuss.css. Kulisse und Tasten sind hier gleichwertig zu startseite.css neu definiert (dort nicht geladen).
   Farben, Größen und Radien als Presets aus theme.json; Core-Presets für Farbe und Schriftgröße sind !important. */

/* ---------- Wrapper ---------- */
.wp-block-group.leistung {
  position: relative; overflow-x: clip; margin-block: 0; padding: 0;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.leistung *, .leistung *::before, .leistung *::after { box-sizing: border-box; }
.leistung .wp-block-group > *, .leistung .wp-block-column > * { margin-block: 0; }
.leistung a { color: var(--wp--preset--color--weiss); }
.leistung a:hover { color: var(--wp--preset--color--gelb); }
.leistung :focus-visible { outline: 3px solid var(--wp--preset--color--gelb); outline-offset: 3px; }
.leistung h1, .leistung h2, .leistung h3 { overflow-wrap: break-word; }
/* Inhalte liegen über dem Protokoll */
.leistung > .wp-block-group { position: relative; z-index: 1; margin-block: 0; padding: 0; }
.leistung .s-inner { width: 100%; max-width: 1300px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.leistung .nur-leser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Prüfprotokoll im Hintergrund ---------- */
.leistung > .protokoll { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.protokoll .log { position: absolute; white-space: nowrap; font-size: 13px; line-height: 1; color: #1B454C; }
.protokoll .log b { font-weight: 700; color: var(--wp--preset--color--rand-akzent); }
.protokoll .log i { font-style: normal; color: var(--wp--preset--color--gelb-text); }

/* ---------- Tasten ---------- */
.leistung .taste {
  display: flex; align-items: center; justify-content: center; flex: none;
  border-radius: 20px; font-weight: 700; color: var(--wp--preset--color--weiss);
  background: linear-gradient(180deg, var(--wp--preset--color--rand) 0%, var(--wp--preset--color--flaeche) 100%);
  border: 1px solid rgba(159, 195, 200, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 44px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .35);
}
.leistung .taste-gross {
  width: 200px; height: 200px; border-radius: 44px; transform: rotate(-7deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .45); /* wie die Kappe im Entwurf */
}
.leistung .schwebende-tasten { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.leistung .taste.schwebt {
  position: absolute; filter: blur(2px); opacity: .5; color: var(--wp--preset--color--gedaempft);
  animation: schweben 9s ease-in-out infinite;
}
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.leistung .taste.schwebt--1 { left: 47%; top: 10%; width: 80px; height: 80px; font-size: 26px; animation-delay: -2s; }
.leistung .taste.schwebt--2 { left: 90%; top: 18%; width: 86px; height: 86px; font-size: 28px; animation-delay: -5s; }
.leistung .taste.schwebt--3 { left: 85%; top: 80%; width: 80px; height: 80px; font-size: 22px; animation-delay: -3s; }

/* Tasten-Symbol (Kappe): Verlauf in background-image, weil der Preset die Farbe setzt */
.leistung .kappe {
  display: flex; align-items: center; justify-content: center; flex: none; padding: 0; margin: 0;
  border-radius: var(--wp--custom--radius--karte);
  background-image: linear-gradient(180deg, var(--wp--preset--color--rand) 0%, var(--wp--preset--color--flaeche) 100%);
  border: 1px solid rgba(159, 195, 200, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .45);
  color: var(--wp--preset--color--weiss); font-weight: 700; line-height: 1;
}
.leistung .kappe.kappe--gelb {
  background-image: linear-gradient(180deg, var(--wp--preset--color--gelb-hell) 0%, var(--wp--preset--color--gelb-dunkel) 100%);
  border-color: rgba(255, 230, 140, .6); color: var(--wp--preset--color--dunkelpetrol);
}

/* ---------- Einstieg ---------- */
.leistung > .einstieg { background: radial-gradient(ellipse 50% 70% at 80% 30%, rgba(14, 58, 65, .8) 0%, rgba(4, 21, 25, 0) 100%); }
.leistung .einstieg > .s-inner { display: flex; flex-direction: column; gap: 56px; padding-top: 64px; padding-bottom: 120px; }

/* Reiterleiste: zwei Gruppen */
.leistung .reiter-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.leistung .reiter-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.leistung .reiter-label { margin-right: 6px; font-size: 13px; color: var(--wp--preset--color--textgrau); }
.leistung .reiter {
  padding: 10px 18px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--wp--preset--color--text-hell); border: 1px solid rgba(159, 195, 200, .2); border-radius: var(--wp--custom--radius--pille);
}
.leistung .reiter:hover { color: var(--wp--preset--color--gelb); border-color: var(--wp--preset--color--gelb); }
.leistung .reiter.aktiv, .leistung .reiter.aktiv:hover {
  font-weight: 700; color: var(--wp--preset--color--dunkelpetrol);
  background: var(--wp--preset--color--gelb); border-color: var(--wp--preset--color--gelb);
}

.leistung .wp-block-columns.einstieg-spalten {
  margin-bottom: 0; flex-wrap: wrap !important; /* Core setzt ab 782 px nowrap !important */
  align-items: center; gap: 48px 64px;
}
.leistung .einstieg-spalten > .wp-block-column { min-width: 0; }
.leistung .einstieg-text { flex: 999 1 560px; display: flex; flex-direction: column; gap: 24px; }
.leistung .einstieg-tasten { flex: 1 1 240px; display: flex; justify-content: center; padding: 16px 0; }
.leistung .einstieg-netzplan { flex: 1 1 400px; max-width: 460px; }

/* Welt-Etikett über der H1: kleines gelbes Quadrat + „Online“ bzw. „Infrastruktur“ (Farbe und Größe über Presets am Absatz) */
.leistung .welt-etikett { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.leistung .welt-etikett::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--wp--preset--color--gelb); }
.leistung .start-titel { margin: 0; line-height: 1.04; font-weight: 700; letter-spacing: -0.06em; font-size: clamp(40px, 5vw, 72px) !important; }
.leistung .start-untertitel { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(22px, 2.4vw, 30px) !important; }
.leistung .start-lead { margin: 0; max-width: 32em; line-height: 1.6; font-size: 17px !important; }

/* ---------- Buttons ---------- */
.leistung .btn-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding-top: 6px; }
.leistung .btn-reihe .wp-block-button { margin: 0; }
.leistung .btn-reihe .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 34px; font-weight: 700; line-height: 1.6; text-decoration: none; border: 0;
}
/* Preset-Hintergrund ist !important, daher auch hier */
.leistung .btn-reihe .btn-gelb .wp-block-button__link:hover { background-color: var(--wp--preset--color--gelb-hell) !important; color: var(--wp--preset--color--dunkelpetrol) !important; }
.leistung .btn-reihe .btn-gelb .wp-block-button__link:active { background-color: var(--wp--preset--color--gelb-dunkel) !important; }

/* ---------- Abschnitte ---------- */
.leistung .s-abschnitt .s-inner { padding-top: 120px; padding-bottom: 120px; }
.leistung .bringt .s-inner { padding-top: 0; }
/* Keine Trennlinien zwischen Abschnitten: die Klasse .trennlinie (ältere Patterns) bleibt ohne Wirkung. */
/* Sprungmarken (z. B. #vmware-proxmox) landen unter dem Kopf */
.leistung [id] { scroll-margin-top: 120px; }
.leistung .s-titel { margin: 0; line-height: 1.08; font-weight: 700; letter-spacing: -0.055em; }
/* „IT-Betreuung …“-Titel (Spalte, Preset abschnitt-klein) und Aufruf-Titel haben eigene Größen laut Entwurf */
.leistung .spalte-titel.has-abschnitt-klein-font-size { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.15; letter-spacing: -0.045em; }
.leistung .aufruf-text .s-titel { font-size: clamp(28px, 3.2vw, 44px) !important; line-height: 1.1; letter-spacing: -0.05em; }
/* Titel links, Inhalt rechts; auf schmalen Breiten untereinander */
.leistung .s-inner.zweispaltig { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.leistung .zweispaltig > .spalte-titel { flex: 1 1 320px; }
.leistung .zweispaltig > .spalte-inhalt { flex: 999 1 560px; min-width: 0; }
.leistung .ablauf .s-inner, .leistung .fragen .s-inner { display: flex; flex-direction: column; gap: 56px; }
.leistung .fragen .s-inner { gap: 0; }
.leistung .fragen .s-titel { margin: 0 0 32px; }

/* Kacheln „Das bringt dir“ */
.leistung .karten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.leistung .karte { display: flex; flex-direction: column; gap: 10px; padding: 36px; border: 1px solid rgba(159, 195, 200, .12); }
.leistung .karte-titel { margin: 0; line-height: 1.6; font-weight: 700; letter-spacing: -0.03em; }
.leistung .karte-text { margin: 0; }

/* Zeilenliste „Was ich mache“ */
.leistung .zeilen-liste { list-style: none; margin: 0; padding: 0; }
.leistung .zeilen-liste li {
  display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 22px 0;
  font-size: 15px; border-bottom: 1px solid rgba(159, 195, 200, .15);
}
.leistung .zeilen-liste li:last-child { border-bottom: 0; }
.leistung .zeilen-liste strong { flex: 0 0 220px; font-size: 17px; font-weight: 700; color: var(--wp--preset--color--weiss); }

/* Ausführlicher Text */
.leistung .langtext { max-width: 46em; display: flex; flex-direction: column; gap: 16px; }
.leistung .langtext a { color: var(--wp--preset--color--gelb); }
.leistung .lang-h3 { margin: 24px 0 0; font-size: 20px; line-height: 1.6; font-weight: 700; }

/* Ablauf */
.leistung .schritte-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px; }
.leistung .schritt { display: flex; flex-direction: column; gap: 10px; }
.leistung .schritt .kappe { width: 68px; height: 68px; font-size: 26px !important; }
.leistung .schritt-titel { margin: 16px 0 0; line-height: 1.6; font-weight: 700; font-size: 20px !important; }

/* Häufige Fragen (core/details, Klasse faq) */
/* Weicher Petrol-Schimmer: eigene Dekor-Ebene mit .weich (css/hintergrund.css), damit nur sie ausläuft, nicht der Text */
.leistung .fragen { position: relative; }
.leistung .fragen-schimmer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(11, 79, 90, .35); }
.leistung .fragen .s-inner { position: relative; z-index: 1; max-width: 1000px; padding-top: 200px; padding-bottom: 200px; }
.leistung .faq-liste { display: block; }
.leistung .wp-block-details.faq { margin: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(159, 195, 200, .15); }
.leistung .faq summary {
  display: flex; justify-content: space-between; gap: 24px; padding: 24px 0;
  list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1.6;
}
.leistung .faq summary::-webkit-details-marker { display: none; }
.leistung .faq summary::after { content: "+"; color: var(--wp--preset--color--gelb); font-size: 22px; line-height: 1; }
.leistung .faq[open] summary::after { content: "–"; }
.leistung .faq > p { margin: 0 0 24px; max-width: 44em; font-size: 16px; color: var(--wp--preset--color--textgrau); }

/* Aufruf-Fläche */
.leistung .aufruf .s-inner { padding-bottom: 120px; }
.leistung .aufruf-karte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px;
  padding: clamp(36px, 5vw, 64px);
  background: radial-gradient(ellipse 80% 90% at 15% 0%, #0E3B42 0%, #0A2A30 55%, #08232A 100%);
  border: 1px solid rgba(242, 183, 5, .28);
}
.leistung .aufruf-text { display: flex; flex-direction: column; gap: 12px; max-width: 34em; }
.leistung .aufruf-karte .btn-reihe { padding-top: 0; }

/* ---------- Netzplan (patterns/netzplan.php, IT-Infrastruktur) ---------- */
.leistung .np-figur { margin: 0; }
.leistung .np-unterschrift { margin: 14px 0 0; font-size: 13px; color: #5E8F96 !important; }
.netzplan {
  display: flex; flex-direction: column; align-items: center; padding: 32px 28px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(10, 38, 43, .92) 0%, rgba(6, 28, 32, .92) 100%);
  border: 1px solid rgba(159, 195, 200, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.np-knoten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 12px 20px; border-radius: 14px;
  background: linear-gradient(180deg, #123A41 0%, #0A262B 100%); border: 1px solid rgba(159, 195, 200, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px rgba(0, 0, 0, .35);
}
.np-name { font-weight: 700; font-size: 15px; color: #FFFFFF; }
.np-leise { background: transparent; border-style: dashed; box-shadow: none; }
.np-leise .np-name { color: #9FC3C8; font-weight: 500; }
.np-chip { font-size: 12px; color: #C9DDE0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(159, 195, 200, .25); background: rgba(255, 255, 255, .04); }
.np-netze { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.np-haupt { flex-direction: column; gap: 10px; padding: 16px 22px; background: linear-gradient(180deg, #F7C51F 0%, #E5AD04 100%); border-color: rgba(255, 230, 140, .6); }
.np-haupt .np-name { color: #0A2E34; font-size: 17px; }
.np-vms { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.np-vms span { font-size: 12px; font-weight: 500; color: #0A2E34; padding: 4px 10px; border-radius: 8px; background: rgba(10, 46, 52, .12); border: 1px solid rgba(10, 46, 52, .25); }
/* Fluss ohne Neuzeichnen: ein doppelt hoher Streifen wird nur per transform verschoben */
.np-linie { position: relative; overflow: hidden; width: 2px; height: 22px; }
.np-linie::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200%; will-change: transform;
  background: linear-gradient(180deg, rgba(159, 195, 200, .15), rgba(242, 183, 5, .7), rgba(159, 195, 200, .15)) 0 0 / 100% 50% repeat-y;
  animation: np-fluss 2.4s linear infinite;
}
@keyframes np-fluss { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.np-paar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.np-paar .np-knoten { flex-direction: column; gap: 2px; padding: 10px 18px; }
.np-klein { font-size: 12px; color: #9FC3C8; }
.np-pfeil { color: #F2B705; font-weight: 700; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .leistung .taste.schwebt { animation: none; }
  .np-linie::after { animation: none; }
}

/* ---------- Tablet und Handy ---------- */
@media (max-width: 700px) {
  .leistung .einstieg > .s-inner { padding-top: 40px; padding-bottom: 72px; gap: 40px; }
  .leistung .s-abschnitt .s-inner { padding-top: 72px; padding-bottom: 72px; }
  .leistung .bringt .s-inner { padding-top: 0; }
  .leistung .fragen .s-inner { padding-top: 200px; padding-bottom: 200px; }
  .leistung .aufruf .s-inner { padding-bottom: 80px; }
  .netzplan { padding: 24px 16px; }
  .leistung .ablauf .s-inner, .leistung .fragen .s-inner { gap: 40px; }
  .leistung .fragen .s-titel { margin-bottom: 0; } /* Mobil unverändert: Abstand über gap */
  .leistung .karte { padding: 28px; }
  .leistung .taste-gross { width: 140px; height: 140px; border-radius: 32px; }
  .leistung .taste-gross svg { width: 68px; height: 68px; }
  .leistung .zeilen-liste li { flex-direction: column; gap: 4px; padding: 18px 0; }
  .leistung .zeilen-liste strong { flex: none; }
  .leistung .taste.schwebt--1, .leistung .taste.schwebt--3 { display: none; }
  .leistung .taste.schwebt--2 { top: 8%; width: 64px; height: 64px; font-size: 22px; }
  .protokoll .log { font-size: 11px; }
  .protokoll .log:nth-child(even) { display: none; }
}
@media (max-width: 480px) {
  .leistung .btn-reihe, .leistung .btn-reihe .wp-block-button, .leistung .btn-reihe .wp-block-button__link { width: 100%; }
  .leistung .btn-reihe .wp-block-button__link { padding-left: 20px; padding-right: 20px; }
}