/* ====================  css/schnittstellen.css  ====================
   Schnittstellen-Bereich (04.10.2026): /schnittstellen/ und /schnittstellen/shopify-<system>/.
   Prüfung (Formular + Ergebnis aus js/schnittstellen.js), Übersicht nach Bereichen, Datenfluss im Einstieg
   jeder Unterseite. Die Bausteine aus welt.css und seiten.css (.formular, .feld, .knopf, .liste, .ablauf,
   .faq, .verwandt) bleiben, wie sie sind — hier steht nur, was der Bereich zusätzlich braucht.

   Wie überall auf der Seite: keine Karten mit Fläche, keine Glasflächen. Was über der Punktwolke steht,
   bekommt denselben weichen Abdunkler wie .liste (::before), Rahmen nur als Haarlinie.

   Die Machbarkeit trägt eine Farbe aus dem Logoverlauf: fertige Lösung Blau, Connector Tiefblau, eigene
   Anbindung Violett. „Nur mit Umwegen“ Bernstein, „unklar“ grau. Shopify-Grün nur am Shopify-Knoten. */

:root{
  --sst-fertig: var(--blau);
  --sst-connector: var(--blau-tief);
  --sst-api: var(--violett);
  --sst-schwierig: #d99a1e;
  --sst-unklar: rgba(226,232,244,.52);
  --sst-dunkel: radial-gradient(115% 92% at 35% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.84) 55%, transparent 86%);
}
.sst-karte--fertig, [data-m="fertig"]{ --sst-farbe: var(--sst-fertig) }
.sst-karte--connector, [data-m="connector"]{ --sst-farbe: var(--sst-connector) }
.sst-karte--api, [data-m="api"]{ --sst-farbe: var(--sst-api) }
.sst-karte--schwierig, [data-m="schwierig"]{ --sst-farbe: var(--sst-schwierig) }
.sst-karte--unklar, [data-m="unklar"]{ --sst-farbe: var(--sst-unklar) }

/* ---------- Einstieg der Übersicht: Text links, Prüfung rechts ----------
   Wie auf /befund/: Wer hierher kommt, hat eine konkrete Frage. Die Prüfung steht im ersten Bildschirm. */
.sst-einstieg{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.sst-einstieg .satz{ max-width: none }
/* „SCHNITTSTELLEN,“ ist ein langes Versalwort (gemessen rund 8,95 × Schriftgröße breit). Die linke Spalte ist bei
   1440 px und mehr rund 537 px breit, bei 1000 px rund 404 px — die Größe hier bleibt überall darunter. Reicht es
   doch einmal nicht (sehr schmale Telefone), trennt das &shy; im Wort, statt das Komma abzureißen. */
.sst-einstieg h1{ font-size: clamp(2.2rem, 3.6vw, 3.6rem) }
@media (max-width: 900px){
  .sst-einstieg{ grid-template-columns: minmax(0, 1fr) }
  .kapitel--hero:has(.sst-einstieg){ padding-top: calc(var(--kopf-h) + 36px); min-height: 0 }
}
@media (max-width: 480px){ .sst-einstieg h1{ font-size: clamp(1.75rem, 8.6vw, 2.6rem) } }

/* ---------- Prüfformular ---------- */
.sst-formular{ gap: 18px }
.sst-formular .feld input{ font-size: 1.08rem }
.sst-ziele{ border: 0; padding: 0; margin: 0; min-width: 0 }
.sst-ziele legend{
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern); margin-bottom: 10px; padding: 0;
}
.sst-ziele-liste{ display: flex; flex-wrap: wrap; gap: 8px }
/* Das Kästchen liegt unsichtbar über dem ganzen Feld: Klick überall, Tastatur und Vorleser wie gewohnt. */
.sst-ziel{
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--linie); border-radius: 2px;
  font-size: .84rem; color: var(--text-leise); cursor: pointer; user-select: none;
  transition: border-color .14s linear, color .14s linear, background-color .14s linear, transform .1s ease-out;
}
.sst-ziel input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer }
.sst-ziel::before{
  content: ""; width: 8px; height: 8px; flex: none;
  border: 1px solid currentColor; border-radius: 1px;
}
.sst-ziel:hover{ color: var(--text) }
.sst-ziel:active{ transform: scale(.97) }
.sst-ziel:has(input:checked){ border-color: var(--blau); color: var(--text); background: rgba(0,144,252,.08) }
.sst-ziel:has(input:checked)::before{ background: var(--blau); border-color: var(--blau) }
.sst-ziel:has(input:focus-visible){ outline: 2px solid var(--papier); outline-offset: 2px }
.sst-formular .knopf{ margin-top: 2px }

/* ---------- Ergebnis ---------- */
.sst-ergebnis{ margin-top: clamp(28px, 4vh, 48px); max-width: 920px }
.sst-ergebnis[hidden]{ display: none }
.sst-karte, .sst-laden{
  position: relative;
  border: 1px solid var(--linie); border-top: 2px solid var(--sst-farbe, var(--linie)); border-radius: 2px;
  padding: clamp(22px, 3vw, 36px);
  display: grid; gap: 16px; text-align: left;
  scroll-margin-top: calc(var(--kopf-h) + 24px);
}
.sst-karte::before, .sst-laden::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: var(--sst-dunkel);
}
.sst-karte:focus{ outline: none }
.sst-kopf{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px }
.sst-system{
  font-family: var(--schrift); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--text); max-width: none; overflow-wrap: anywhere;
}
.sst-system span{ color: var(--text-fern); font-weight: 400; margin: 0 .15em }
.sst-urteil{ display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--text); font-size: .98rem; max-width: none }
.sst-urteil::before{
  content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--sst-farbe); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sst-farbe) 22%, transparent);
}
.sst-marke{
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-leise); border: 1px solid var(--linie); border-radius: 2px; padding: 6px 10px;
}
.sst-zusammen{ color: var(--text); font-size: 1.02rem; max-width: 68ch }
.sst-karte h3{
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern); margin-top: 8px;
}
.sst-daten{ display: grid }
.sst-daten > div{
  display: grid; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr); gap: 4px 24px;
  padding: 12px 0; border-top: 1px solid var(--linie);
}
.sst-daten > div:last-child{ border-bottom: 1px solid var(--linie) }
.sst-daten dt{ color: var(--text); font-size: .95rem }
.sst-daten dt span{ display: block; margin-top: 2px; font-size: .74rem; letter-spacing: .03em; color: var(--text-fern) }
.sst-daten dd{ color: var(--text-leise); font-size: .92rem; max-width: 60ch }
@media (max-width: 640px){ .sst-daten > div{ grid-template-columns: minmax(0, 1fr) } }
.sst-wege{ list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px }
.sst-wege li{ border-top: 1px solid var(--linie); padding-top: 12px }
.sst-wege li p{ font-size: .9rem; max-width: none }
.sst-wege li p + p{ margin-top: 6px }
.sst-weg-kopf{ color: var(--text) }
.sst-weg-kopf span{
  display: block; margin-bottom: 4px;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sst-farbe);
}
.sst-punkte{ list-style: none; display: grid; gap: 8px }
.sst-punkte li{ position: relative; padding-left: 18px; color: var(--text-leise); font-size: .92rem; max-width: 70ch }
.sst-punkte li::before{ content: "–"; position: absolute; left: 0; color: var(--text-fern) }
.sst-karte .knopf-reihe{ margin-top: 6px }
.sst-klein{ font-size: .78rem; color: var(--text-fern); max-width: none }

/* Warten: die Form des Ergebnisses statt eines Kreisels — man sieht, was gleich kommt. */
.sst-laden p{ color: var(--text); font-size: .95rem; max-width: none }
.sst-laden p small{ display: block; margin-top: 4px; font-size: .82rem; color: var(--text-fern) }
.sst-laden p small[hidden]{ display: none }
.sst-balken{
  display: block; height: 10px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(140,170,240,.07) 0%, rgba(140,170,240,.2) 50%, rgba(140,170,240,.07) 100%);
  background-size: 200% 100%;
  animation: sst-schimmer 1.5s linear infinite;
}
.sst-balken:nth-of-type(2){ width: 86% } .sst-balken:nth-of-type(3){ width: 64% } .sst-balken:nth-of-type(4){ width: 78% }
@keyframes sst-schimmer{ from{ background-position: 100% 0 } to{ background-position: -100% 0 } }

/* ---------- Übersicht nach Bereichen ----------
   Spalten mit Listen wie die vier Türen der Startseite, keine Kacheln. Der Punkt vor dem Namen zeigt die
   Machbarkeit, die Legende darüber erklärt ihn. */
.sst-legende{ display: flex; flex-wrap: wrap; gap: 8px 22px; position: relative }
.sst-legende li{ list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-leise) }
.sst-ampel{
  display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--sst-farbe, var(--text-fern));
}
/* Nicht nur die Farbe unterscheidet: Connector ist ein Ring, eigene Anbindung ein Quadrat. */
[data-m="connector"] .sst-ampel{ background: transparent; box-shadow: inset 0 0 0 2px var(--sst-farbe) }
[data-m="api"] .sst-ampel{ border-radius: 1px }
.sst-katalog{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 44px); position: relative;
}
@media (max-width: 1000px){ .sst-katalog{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px){ .sst-katalog{ grid-template-columns: minmax(0, 1fr) } }
.sst-katalog::before, .sst-chips::before, .sst-achtung::before, .sst-legende::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: var(--sst-dunkel);
}
.sst-bereich{ border-top: 2px solid var(--blau); padding-top: 18px }
.sst-bereich:nth-child(3n+2){ border-top-color: var(--blau-tief) }
.sst-bereich:nth-child(3n){ border-top-color: var(--violett) }
.sst-bereich h3{ font-size: clamp(1.1rem, 1.5vw, 1.35rem); text-transform: uppercase; letter-spacing: -.01em }
.sst-bereich > p{ margin: .5em 0 .8em; font-size: .92rem; color: var(--text-leise) }
.sst-bereich ul{ list-style: none }
.sst-bereich a{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px;
  padding: 11px 0; border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.sst-bereich a .sst-ampel{ grid-row: 1; align-self: center }
.sst-bereich a .b{ grid-column: 2; font-weight: 500; font-size: .98rem; color: var(--text) }
.sst-bereich a > span:not(.sst-ampel){ grid-column: 2; font-size: .84rem; color: var(--text-leise) }
.sst-bereich a::after{
  content: "→"; grid-column: 3; grid-row: 1 / span 2; align-self: center;
  color: var(--text-leise); transition: transform .14s ease-out;
}
.sst-bereich a:hover .b{ color: #fff }
.sst-bereich a:hover::after{ transform: translateX(3px) }
.sst-bereich a:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }

/* ---------- Weitere Systeme: anklicken = prüfen ---------- */
.sst-chips{ display: grid; gap: 20px; position: relative }
.sst-chips > div{ display: grid; grid-template-columns: minmax(150px, 18%) minmax(0, 1fr); gap: 10px 24px; align-items: baseline }
.sst-chips dt{ font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-fern) }
.sst-chips dd{ display: flex; flex-wrap: wrap; gap: 8px }
@media (max-width: 640px){ .sst-chips > div{ grid-template-columns: minmax(0, 1fr) } }
.sst-chip{
  font: inherit; font-size: .88rem; color: var(--text-leise);
  background: transparent; border: 1px solid var(--linie); border-radius: 2px;
  padding: 8px 13px; cursor: pointer;
  transition: border-color .14s linear, color .14s linear, transform .1s ease-out;
}
.sst-chip:hover{ color: var(--text); border-color: var(--papier) }
.sst-chip:active{ transform: scale(.97) }
.sst-chip:focus-visible{ outline: 2px solid var(--papier); outline-offset: 2px }

/* ---------- Unterseite: Datenfluss im Einstieg ----------
   Zwei Knoten, dazwischen je Datenart eine Leitung mit Pfeil. Ein Lichtpunkt läuft in Flussrichtung —
   nur transform, und bei reduzierter Bewegung gar nicht. */
.sst-fluss{
  position: relative; margin: 0;
  display: grid; grid-template-columns: minmax(88px, auto) minmax(0, 1fr) minmax(88px, auto);
  grid-template-rows: auto auto; align-items: stretch; column-gap: 0;
  border: 1px solid var(--linie); border-radius: 2px;
  padding: clamp(18px, 2.6vw, 30px);
}
.sst-fluss::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 92% at 50% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.84) 55%, transparent 86%);
}
.sst-knoten{
  display: grid; place-items: center; padding: 14px 12px;
  border: 1px solid var(--blau); border-radius: 2px;
  font-family: var(--schrift); font-weight: 600; font-size: .9rem; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .02em; text-align: center;
  color: var(--text); overflow-wrap: anywhere; max-width: 150px;
}
.sst-knoten--shopify{ border-color: var(--shopify); color: var(--shopify) }
.sst-stroeme{ list-style: none; display: grid; align-content: center; gap: 18px; padding: 10px 0 }
.sst-stroeme li{
  position: relative; padding: 0 18px 9px; text-align: center;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
  color: var(--text-leise); max-width: none;
}
.sst-stroeme li::before{
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 1px;
  background: rgba(140,170,240,.42);
}
/* Pfeilspitze am Ende der Flussrichtung; „beide“ hat dazu ein <i class="sst-spitze"> am anderen Ende */
.sst-stroeme li::after, .sst-spitze{
  content: ""; position: absolute; bottom: -4px; right: 2px;
  border-style: solid; border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent var(--blau);
}
.sst-stroeme .nach-links::after, .sst-spitze{
  right: auto; left: 2px; border-width: 4.5px 7px 4.5px 0;
  border-color: transparent var(--shopify) transparent transparent;
}
/* Außen die Leitung (schneidet ab), innen ein Streifen so breit wie sie: translateX(100%) ist damit genau eine
   Leitungslänge. Ohne overflow:hidden ragte der verschobene Streifen über den Rand und verbreiterte am Telefon
   die ganze Seite. */
.sst-paket{
  position: absolute; left: 6px; right: 6px; bottom: -4px; height: 9px; overflow: hidden; pointer-events: none;
}
.sst-paket i{
  position: absolute; inset: 0; display: block;
  animation: sst-rechts 3.4s cubic-bezier(.45,0,.25,1) infinite; animation-delay: calc(var(--i, 0) * -.7s);
}
.sst-paket i::before{
  content: ""; position: absolute; left: 0; top: 2px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px var(--blau);
}
.nach-links .sst-paket i{ animation-name: sst-links }
.beide .sst-paket i{ animation-name: sst-hin-her; animation-duration: 6.8s }
@keyframes sst-rechts{
  0%{ transform: translateX(0); opacity: 0 } 12%{ opacity: 1 } 88%{ opacity: 1 }
  100%{ transform: translateX(calc(100% - 5px)); opacity: 0 }
}
@keyframes sst-links{
  0%{ transform: translateX(calc(100% - 5px)); opacity: 0 } 12%{ opacity: 1 } 88%{ opacity: 1 }
  100%{ transform: translateX(0); opacity: 0 }
}
@keyframes sst-hin-her{
  0%{ transform: translateX(0); opacity: 0 } 6%{ opacity: 1 } 44%{ opacity: 1 }
  50%{ transform: translateX(calc(100% - 5px)); opacity: 0 } 56%{ opacity: 1 } 94%{ opacity: 1 }
  100%{ transform: translateX(0); opacity: 0 }
}
.sst-fluss figcaption{
  grid-column: 1 / -1; margin-top: 16px;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-fern); text-align: center;
}
/* Telefon: Die Knoten werden zu schmalen Säulen mit stehender Schrift, damit die Leitungen breit genug für
   ihre Beschriftung bleiben („Sendungsnummern“ braucht rund 110 px). */
@media (max-width: 560px){
  .sst-fluss{ grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 16px 12px }
  .sst-knoten{ writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 8px; font-size: .78rem; max-width: none }
  .sst-stroeme li{ padding: 0 12px 8px; font-size: .64rem; letter-spacing: .06em }
}

/* ---------- Unterseite: Einstieg und Datenliste ---------- */
.sst-zurueck{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px }
.sst-zurueck:hover{ color: var(--text); border-bottom-color: var(--papier) }
.sst-liste dt .sst-richtung{
  display: block; margin-top: 4px;
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-fern);
}

/* ---------- Unterseite: Stolpersteine ---------- */
.sst-achtung{
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px);
}
.sst-achtung li{ padding: 22px 0; border-top: 1px solid var(--linie) }
.sst-achtung h3{ font-size: 1.04rem; font-weight: 500; color: var(--text); margin-bottom: .45em }
.sst-achtung p{ font-size: .95rem; max-width: 58ch }
@media (max-width: 760px){ .sst-achtung{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Unterseite: Prüfung für ein weiteres Programm ---------- */
.sst-zweit{
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
@media (max-width: 900px){ .sst-zweit{ grid-template-columns: minmax(0, 1fr) } }

@media (prefers-reduced-motion: reduce){
  .sst-paket{ display: none }
  .sst-balken{ animation: none }
  .sst-ziel, .sst-chip{ transition: none }
}