.se-vorgang, .se-netz {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; margin: 0 0 22px;
}
.se-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 14px; }
.se-titel { font-size: 20px; font-weight: 800; color: var(--accent); margin: 0; letter-spacing: -.2px; }
.se-hinweis { font-size: 13.5px; color: var(--muted); margin: 0; }

.se-vorgang .se-hinweis { background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

.se-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.se-reiter-knopf, .se-knopf {
  font: inherit; font-size: 15px; font-weight: 700; min-height: 46px; padding: 10px 16px; cursor: pointer;
  background: var(--card); color: var(--accent); border: 1.5px solid var(--line); border-radius: 12px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center;
  transition: transform var(--bewegung-sofort, 120ms) ease-out;
}
.se-reiter-zeichen { margin-right: 8px; }
.se-reiter-knopf:hover, .se-knopf:hover { border-color: var(--accent); }
.se-reiter-knopf:active, .se-knopf:active { transform: scale(.98); }
.se-reiter-knopf:focus-visible, .se-knopf:focus-visible, .se-knoten:focus-visible, .se-tor:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.se-reiter-knopf.se-aktiv, .se-knopf-voll, .se-knopf.se-gewaehlt { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.se-knopf[disabled] { cursor: default; }
.se-knopf[disabled]:not(.se-gewaehlt) { opacity: .45; }
[hidden].se-knopf { display: none; }


.se-spur { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-height: 120px; }
.se-schritt {
  position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 0 0 18px;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--bewegung-mittel, 360ms) linear, transform var(--bewegung-mittel, 360ms) var(--kurve-herein, ease-out);
}
.se-schritt.se-da { opacity: 1; transform: none; }
.se-schritt::before { content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: var(--line); }
.se-schritt:last-child::before { display: none; }
.se-zeichen {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 21px;
  background: var(--sunken); border: 1.5px solid var(--line); position: relative; z-index: 1;
}
.se-wartet .se-zeichen, .se-ende .se-zeichen { border-color: var(--accent-2); }
.se-inhalt { min-width: 0; padding-top: 2px; }
.se-was { display: block; font-size: 16px; color: var(--ink); margin: 0 0 3px; }
.se-text { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.se-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

.se-wahl .se-knopf { flex: 1 1 150px; }
.se-mehr { display: inline-block; margin: 8px 0 0; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: underline; min-height: 24px; }
.se-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }


.se-feld { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.se-spalte { display: grid; gap: 8px; }
.se-spalten-kopf { font-size: 12.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.se-knoten {
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; min-height: 46px; padding: 8px 12px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  background: var(--sunken); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px;
}
.se-knoten:hover { border-color: var(--accent); }
.se-knoten.se-an { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.se-knoten-zeichen { font-size: 18px; flex: none; }
.se-knoten > span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.se-mitte { display: grid; justify-items: center; gap: 8px; }
.se-kern, .se-tor {
  min-width: 0; font: inherit; display: grid; justify-items: center; gap: 2px; text-align: center; width: 168px; padding: 14px 12px;
  border-radius: 16px; background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent);
}
.se-tor { cursor: pointer; background: var(--card); color: var(--ink); border-color: var(--accent-2); }
.se-tor.se-an { background: var(--accent-2); color: var(--gold-ink); }
.se-kern-zeichen { font-size: 24px; }
.se-kern-satz { font-size: 12.5px; line-height: 1.35; opacity: .9; }
.se-pfeil { width: 2px; height: 22px; background: var(--accent-2); }

.se-lebt .se-tor:not(.se-an) { animation: se-atmen var(--bewegung-atem, 4200ms) ease-in-out infinite; }
@keyframes se-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.se-kern.se-puls { animation: se-puls var(--bewegung-szene, 600ms) var(--kurve-feder, ease-out); }
@keyframes se-puls { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }

.se-feld[data-weg="herein"] .se-hinaus, .se-feld[data-weg="hinaus"] .se-herein { opacity: .5; }
.se-feld .se-spalte { transition: opacity var(--bewegung-kurz, 220ms) linear; }

.se-blatt { margin: 16px 0 0; padding: 14px 16px; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; }
.se-blatt-titel { display: block; font-size: 16px; color: var(--ink); margin: 0 0 4px; }
.se-weg-satz { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }


.se-teaser { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 24px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 22px; text-decoration: none; color: var(--ink); }
.se-teaser:hover { border-color: var(--accent); }
.se-teaser:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.se-teaser-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.se-teaser-bilder img { display: block; width: 100%; height: auto; border-radius: 10px; }
.se-teaser-text { display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; }
.se-teaser-text strong { font-size: 20px; color: var(--accent); line-height: 1.25; }
.se-teaser-weiter { font-weight: 700; color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .se-vorgang, .se-netz { padding: 16px; border-radius: 14px; }
  .se-teaser { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .se-reiter-knopf { flex: 1 1 100%; justify-content: flex-start; }
  .se-schritt { grid-template-columns: 40px 1fr; gap: 12px; }
  .se-zeichen { width: 40px; height: 40px; font-size: 18px; }
  .se-schritt::before { left: 19px; top: 40px; }
  .se-wahl .se-knopf { flex: 1 1 100%; }
  .se-fuss .se-knopf { flex: 1 1 100%; }
  
  .se-feld { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .se-spalte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .se-spalten-kopf { grid-column: 1 / -1; }
  .se-mitte { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; justify-items: stretch; }
  .se-kern, .se-tor { width: auto; }
  .se-pfeil { width: 18px; height: 2px; }
  .se-knoten { font-size: 13.5px; padding: 8px 10px; gap: 8px; }
}
@media (max-width: 380px) { .se-spalte { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .se-schritt { transition: none; transform: none; }
  .se-lebt .se-tor:not(.se-an), .se-kern.se-puls { animation: none; }
  .se-reiter-knopf, .se-knopf, .se-feld .se-spalte { transition: none; }
}