/* ==========================================================================
   kyb-souv — globaler Abschnitt „Wegbereiter für digitale Souveränität"
   Ab 1000 px zwei Spalten: links Überschrift und (optional) das BSI-Siegel
   als Plakette mit Zertifikatsangaben, rechts die Belege als Liste mit
   gezeichneten Icons (helle Kontur + versetzte Neon-Fläche wie im Profil).
   Darunter einspaltig: Überschrift, Belege, Siegel.

   Der Abschnitt steht vor dem Kontaktbereich fast aller Seiten — deshalb
   ruhig: keine Kartenwand, Linien statt Flächen, Bewegung langsam.
   Bewegung nur, wenn kyb-souv.js die Klasse .kyb-souv--anim setzt. Ohne JS
   ist alles sofort sichtbar; der Strichkranz um das Siegel läuft rein per
   CSS und steht bei prefers-reduced-motion still.
   ========================================================================== */

.kyb-souv {
  --kyb-souv-line: rgba(238, 240, 244, .92);   /* Kontur der Icons */
  --kyb-souv-grund: var(--kyb-stage);
  --kyb-souv-icon: 64px;
  --kyb-souv-siegel: 120px;
  position: relative;
  padding-block: clamp(var(--s6), 5vw, var(--s8));
}
.kyb-souv.k-set--stage_2 { --kyb-souv-grund: var(--kyb-stage-2); }
.kyb-souv.k-set--surface { --kyb-souv-grund: var(--kyb-surface); }

/* --- Raster ------------------------------------------------------------- */
.kyb-souv__raster {
  display: grid;
  gap: var(--s6);
  grid-template-areas: "kopf" "liste" "siegel";
}
.kyb-souv__kopf   { grid-area: kopf; }
.kyb-souv__liste  { grid-area: liste; }
.kyb-souv__siegel { grid-area: siegel; }

@media (min-width: 1000px) {
  .kyb-souv__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "kopf   liste"
      "siegel liste";
    column-gap: clamp(var(--s7), 6vw, var(--s9));
    row-gap: var(--s6);
    align-items: start;
  }
  .kyb-souv__siegel { align-self: end; }
}
/* Schmale Desktops: Siegel etwas kleiner, damit die Angaben Platz haben */
@media (min-width: 1000px) and (max-width: 1199px) {
  .kyb-souv { --kyb-souv-siegel: 96px; }
}

/* --- Kopf --------------------------------------------------------------- */
.kyb-souv__kopf .kyb-kicker { margin-bottom: var(--s2); }

/* Kurze Neon-Regel als Auftakt — trägt den Abschnitt auch ohne Kicker. */
.kyb-souv__kopf::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: var(--s4);
  border-radius: 2px;
  background: var(--kyb-grad);
}
.kyb-souv__kopf:has(.kyb-kicker)::before { display: none; }

/* Leichter Grundton, der Akzent kräftig — wie „Das ist kyberio." */
.kyb-souv__h {
  max-width: 14ch;
  color: var(--kyb-white);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.kyb-souv__h .kyb-neon { font-weight: 600; letter-spacing: -.03em; }

/* --- Belege ------------------------------------------------------------- */
.kyb-souv__liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
}
.kyb-souv__p {
  position: relative;
  display: grid;
  grid-template-columns: var(--kyb-souv-icon) minmax(0, 1fr);
  column-gap: var(--s5);
  align-items: start;
  padding-block: var(--s5);
}
.kyb-souv__p:first-child { padding-top: 0; }
.kyb-souv__p:last-child  { padding-bottom: 0; }

/* Trennlinie: läuft von links als feiner Verlauf aus, kein harter Rahmen. */
.kyb-souv__p + .kyb-souv__p::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--kyb-line-strong), var(--kyb-line) 45%, transparent);
  transform-origin: left;
}

.kyb-souv__ikon { padding-top: 2px; }
.kyb-souv__marke {
  display: block;
  width: 14px; height: 14px;
  margin: 8px 0 0 4px;
  border-radius: 3px;
  background: var(--kyb-neon);
}

.kyb-souv__koerper { min-width: 0; }
.kyb-souv__t {
  color: var(--kyb-white);
  font-weight: 600;
  font-size: clamp(1.22rem, 1.7vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -.014em;
}
.kyb-souv__x {
  margin-top: var(--s1);
  max-width: 34em;
  color: var(--kyb-text-2);
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- Siegel-Plakette ---------------------------------------------------- */
.kyb-souv__siegel {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s4) var(--s4) var(--s3);
  border-radius: var(--r-4);
  background-color: var(--kyb-souv-grund);
  background-image: var(--g-karte);
  box-shadow: 0 0 0 1px var(--kyb-line), var(--kante-oben);
}

/* Kranz ragt über das Siegel hinaus: Siegel r=70, Striche bis r=92 im 200er-Raster. */
.kyb-souv__plakette {
  position: relative;
  width: var(--kyb-souv-siegel);
  height: var(--kyb-souv-siegel);
  margin: calc(var(--kyb-souv-siegel) * .18);
}
.kyb-souv__bild {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.kyb-souv__kranz {
  position: absolute;
  left: calc(var(--kyb-souv-siegel) * -.2143);   /* (200/140 − 1) / 2 */
  top: calc(var(--kyb-souv-siegel) * -.2143);
  width: calc(var(--kyb-souv-siegel) * 1.4286);
  height: calc(var(--kyb-souv-siegel) * 1.4286);
  pointer-events: none;
  stroke: #fff;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.kyb-souv__kranz line { opacity: .16; }

/* Ein Lichtpunkt wandert sehr langsam um das Siegel (eine Runde ≈ 18 s). */
@media (prefers-reduced-motion: no-preference) {
  .kyb-souv__kranz line {
    animation: kybSouvStrich 18s linear infinite;
    animation-delay: calc(var(--i) * .3s - 18s);
  }
}
@keyframes kybSouvStrich {
  0%       { opacity: .16; stroke: #fff; }
  1.5%     { opacity: .85; stroke: var(--kyb-neon); }
  9%, 100% { opacity: .16; stroke: #fff; }
}

.kyb-souv__angaben {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}
.kyb-souv__nr {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--kyb-neon);
  line-height: 1.3;
}
.kyb-souv__st {
  color: var(--kyb-white);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.kyb-souv__sx {
  color: var(--kyb-text-2);
  font-size: .92rem;
  line-height: 1.45;
  text-wrap: balance;
}
.k-set a.kyb-souv__link,
.kyb-souv__link {
  display: inline-block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--kyb-neon);
  text-decoration: none;
}
.kyb-souv__link span { display: inline-block; margin-left: .5em; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.kyb-souv__link:hover span { transform: translateX(4px); }
.kyb-souv__link:hover { text-decoration: underline; text-decoration-color: rgba(15, 255, 155, .4); }

/* --- Icons -------------------------------------------------------------- */
.kyb-souv__icon {
  display: block;
  width: var(--kyb-souv-icon);
  height: var(--kyb-souv-icon);
  overflow: visible;
  color: var(--kyb-souv-line);
}
.kyb-souv__fill {
  fill: var(--kyb-neon);
  transform-box: view-box;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.kyb-souv__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kyb-souv__ink { color: var(--kyb-souv-grund); }
.kyb-souv__p:hover .kyb-souv__fill { transform: translate(-3px, -3px); }

/* --- Breiten ------------------------------------------------------------ */
/* Tablet: einspaltig, Text nicht über die volle Breite */
@media (min-width: 760px) and (max-width: 999px) {
  .kyb-souv__liste, .kyb-souv__siegel { max-width: 720px; }
  .kyb-souv__siegel { justify-self: start; }
}
@media (max-width: 759px) {
  .kyb-souv { --kyb-souv-icon: 44px; --kyb-souv-siegel: 104px; }
  .kyb-souv__raster { gap: var(--s5); }
  .kyb-souv__p { column-gap: var(--s3); padding-block: var(--s4); }
  .kyb-souv__h { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  .kyb-souv__t { font-size: 1.18rem; }
  .kyb-souv__x { font-size: 1rem; line-height: 1.58; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .kyb-souv__siegel { column-gap: var(--s3); padding: var(--s3) var(--s4) var(--s3) var(--s2); }
}
/* Sehr schmal: Siegel über den Angaben */
@media (max-width: 479px) {
  .kyb-souv__siegel {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    row-gap: var(--s2);
    padding: var(--s3) var(--s4) var(--s4);
  }
}

/* --- Einblenden (nur mit JS) ------------------------------------------- */
.kyb-souv--anim [data-souv-reveal] { opacity: 0; }
.kyb-souv--anim [data-souv-reveal].is-in {
  opacity: 1;
  animation: kybSouvRein 1.2s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 200ms);
}
/* Icons zeichnen sich langsam nach, dann setzt die Fläche auf */
.kyb-souv--anim .is-in .kyb-souv__line > * {
  stroke-dasharray: 1;
  animation: kybSouvZug 1.9s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 300ms);
}
.kyb-souv--anim .is-in .kyb-souv__fill {
  animation: kybSouvFlaeche 1.1s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 1300ms);
}
.kyb-souv--anim .is-in .kyb-souv__ink {
  animation: kybSouvTinte 1s ease backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 1600ms);
}
.kyb-souv--anim .kyb-souv__p.is-in::before {
  animation: kybSouvLinie 1.6s cubic-bezier(.45, 0, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 200ms);
}
/* Siegel: blendet weich ein, der Kranz baut sich danach auf */
.kyb-souv--anim .kyb-souv__siegel.is-in .kyb-souv__bild {
  animation: kybSouvSiegel 1.4s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 200ms);
}
.kyb-souv--anim .kyb-souv__siegel:not(.is-in) .kyb-souv__kranz { opacity: 0; }
.kyb-souv--anim .kyb-souv__siegel.is-in .kyb-souv__kranz {
  animation: kybSouvTinte 2s ease backwards;
  animation-delay: calc(var(--d, 0) * 200ms + 900ms);
}

@keyframes kybSouvRein    { from { opacity: 0; transform: translateY(16px); } }
@keyframes kybSouvZug     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kybSouvFlaeche { from { opacity: 0; transform: translate(-6px, -6px); } }
@keyframes kybSouvTinte   { from { opacity: 0; } }
@keyframes kybSouvLinie   { from { transform: scaleX(0); } }
@keyframes kybSouvSiegel  { from { opacity: 0; transform: scale(.94); } }

/* Einspaltig kommen die Teile einzeln ins Bild — kein Staffelversatz nötig. */
@media (max-width: 999px) {
  .kyb-souv--anim [data-souv-reveal] { --d: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .kyb-souv--anim [data-souv-reveal] { opacity: 1; }
  .kyb-souv *, .kyb-souv *::before, .kyb-souv *::after { animation: none !important; transition: none !important; }
}
@media print {
  .kyb-souv [data-souv-reveal] { opacity: 1 !important; }
}