/* ===== LEISTUNGEN (leistungen.html, ki-audit.html, ki-schulung.html, ki-sicherheit.html, integration.html) =====
   Nur Ergaenzungen zu assets/eigenkern.css. Tokens und Bausteine kommen von dort.
   23.10.2026: Bewegung (Ablauf-Band, gestaffelte Karten, weiche Fragen) nach BEWEGUNGS-BRIEF. */

/* Aktiver Punkt im Kopf */
.kopf nav a.aktiv{color:var(--orange-hell);opacity:1}

/* Fester Kopf: Sprungziele unter dem Kopf beginnen lassen */
[id]{scroll-margin-top:96px}

/* Eckdaten-Zeile im Seitenkopf: drei kurze Fakten als Textzeile mit orangem Trennstrich */
.eckdaten{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 30px;padding:0;list-style:none}
.eckdaten li{font-size:14px;line-height:1.35;color:rgba(255,255,255,.82);border-left:2px solid var(--orange);padding:2px 0 2px 12px}
.kopfbereich .knopfzeile{margin-top:0}

/* Kennung ueber der Kartenueberschrift (z. B. "Leistung 1") */
.karte .kennung{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:8px}
.karte .weiter{display:inline-block;margin-top:16px;font-weight:600;font-size:14.5px}
.karte .weiter::after{content:""}
.karte.link{display:flex;flex-direction:column;align-items:flex-start}
.karte.link>*{width:100%}
.karte.link .weiter{width:auto;margin-top:auto;padding-top:16px}
.karte .ikone{display:block;transition:stroke .25s ease}
.karte:hover .ikone{stroke:var(--orange-hell)}

/* Uebersicht: vier Leistungskarten als Treppe, Ikone tauscht beim Hover kurz die Farbe */
@media (min-width:981px){
  .treppe .karte:nth-child(2){margin-top:22px}
  .treppe .karte:nth-child(3){margin-top:44px}
  .treppe .karte:nth-child(4){margin-top:66px}
}
@media (hover:hover) and (pointer:fine){
  .treppe .karte:hover .ikone{animation:ikone-tausch .55s ease}
}
@keyframes ikone-tausch{0%{stroke:var(--orange)}45%{stroke:var(--text);transform:translateY(-2px)}100%{stroke:var(--orange);transform:none}}

/* Knoepfe: sanfter Druck */
.knopf:active{transform:scale(.98)}

/* Hakenliste: "Was Sie bekommen" */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.haken li{position:relative;padding-left:34px;font-size:16px;line-height:1.5}
.haken li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--orange) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12l4 4 8-8'/></svg>") center/13px no-repeat}

/* Zweispaltig: Text links, Hakenliste rechts */
.zweispaltig{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.zweispaltig .unter{margin-bottom:0}

/* Grenzen ("Und was nicht") auf dunklem Grund */
.abschnitt-dunkel .unter{opacity:.72}
.abschnitt-dunkel .karte h3{color:var(--orange-zart)}

/* Fragen: Breite begrenzen, letzte Linie unten, weich aufklappen */
.fragen{max-width:820px}
.fragen .frage:last-child{border-bottom:1px solid var(--linie)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";transition:transform .3s ease,color .2s ease;transform-origin:center}
.frage[open] summary::after{content:"+";transform:rotate(45deg)}
.frage summary:hover::after{color:var(--orange-hell)}
.frage[open] p{animation:frage-auf .35s ease both}
@keyframes frage-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ruhig .frage[open] p{animation:none}

/* ===== ABLAUF-BAND: Zeitleiste, deren oranger Strich mit dem Scrollen waechst (Signatur der Leistungsseiten) =====
   Aufbau: .schritte.band > .schritt*4 + .band-strich (wird per JS angelegt).
   Desktop: Strich waagerecht ueber den vier Spalten. Handy: Strich senkrecht links neben den Schritten. */
.schritte.band{position:relative;gap:28px;background:none;border:0;border-radius:0;overflow:visible;padding-top:34px}
.schritte.band .schritt{background:none;padding:0;position:relative}
.schritte.band::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--linie)}
.schritte.band .band-strich{position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);transform-origin:left center;transform:scaleX(1);will-change:transform}
.bewegt .schritte.band .band-strich{opacity:1;transition:none}  /* nicht von .staffel mit ausblenden */
.schritte.band .schritt::after{content:"";position:absolute;left:0;top:-39px;width:12px;height:12px;border-radius:50%;
  background:var(--platte);border:2px solid var(--linie);transition:border-color .3s ease,background .3s ease,transform .3s ease}
.schritte.band .schritt::before{transition:color .35s ease}
.schritte.band .schritt h3{transition:color .35s ease,opacity .35s ease}
.schritte.band .schritt.erreicht::after{border-color:var(--orange);background:var(--orange);transform:scale(1.15)}
/* Nur mit Bewegung: vorher grau, nach dem Einrasten orange/dunkel */
.bewegt:not(.ruhig) .schritte.band .band-strich{transform:scaleX(0)}
.bewegt:not(.ruhig) .schritte.band .schritt:not(.erreicht)::before{color:#b9b3c4}
.bewegt:not(.ruhig) .schritte.band .schritt:not(.erreicht) h3{opacity:.55}
.bewegt:not(.ruhig) .schritte.band .schritt.erreicht::before{color:var(--orange)}
.bewegt:not(.ruhig) .schritte.band .schritt.erreicht h3{color:var(--text);opacity:1}
.ruhig .schritte.band .band-strich{transform:none}
.ruhig .schritte.band .schritt::after{border-color:var(--orange);background:var(--orange)}
@media (max-width:980px){
  .schritte.band{grid-template-columns:1fr;gap:30px;padding:0 0 0 38px}
  .schritte.band::before{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .schritte.band .band-strich{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:center top;transform:scaleY(1)}
  .bewegt:not(.ruhig) .schritte.band .band-strich{transform:scaleY(0)}
  .schritte.band .schritt::after{left:-32px;top:10px}
}

/* Reihenfolge der vier Leistungen auf der Uebersicht: Pfeil zwischen den Schritten */
.schritte.reihe .schritt::after{content:"";position:absolute;top:14px;right:-14px;width:10px;height:10px;border-top:1.6px solid var(--orange);border-right:1.6px solid var(--orange);transform:rotate(45deg);opacity:.6}
.schritte.reihe .schritt:last-child::after{display:none}

/* Verweis auf die jeweils naechste Leistung */
.naechste{display:block;margin-top:28px;font-size:15px;max-width:720px}
.naechste a{color:var(--orange);font-weight:600;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s ease}
.naechste a:hover{border-color:var(--orange)}

@media (max-width:980px){
  .zweispaltig{grid-template-columns:1fr}
  .schritte.reihe .schritt::after{display:none}
}
@media (max-width:600px){
  .eckdaten{gap:8px 20px}
  .eckdaten li{font-size:13.5px}
  .haken li{font-size:15px}
}
.ruhig .karte .ikone,.ruhig .frage summary::after{animation:none;transition:none}