/* DP-DYNAMIC Software: Übersicht (software.html) und Unterseiten (software/*.html).
   Alles ist auf .sw-root eingegrenzt.
   Farben aus der DPC-C2-Broschüre, Schrift wie auf dp-dynamic.de (Inter, von Wix gehostet),
   Kacheln und 3D-Elemente als Variation von doegel.de.
   Bewegung nach github.com/emilkowalski/skills: eigene Easing-Kurven, nur transform/opacity,
   Hover nur für Maus, Tastatur ohne Animation, reduced motion. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://static.wixstatic.com/ufonts/3f4fbc_61ba1be670734402b410916ffea8f995/woff2/file.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://static.wixstatic.com/ufonts/57a328_ab5695eb0d8c469baf429b079071f99d/woff2/file.woff2") format("woff2");
}

.sw-root {
  --page: #F5F5F7;
  --ground: #161A1C;
  --ground-2: #1E2326;
  --tab-idle: #2A2F32;
  --steel: #34393B;
  --line: #2C3235;
  --mute: #A3ABAF;
  --soft: #CDD2D4;
  --paper: #F7F5F6;
  --white: #FFFFFF;
  --mist: #F3F4F6;
  --ink: #161A1C;
  --ink-2: #4C5356;
  --signal: #FF9600;
  --signal-hi: #FFB454;
  --signal-lo: #CC7000;

  /* Rundungen wie auf dp-dynamic.de: Karten 25px, innere Elemente 15px, Buttons 10px */
  --r-card: 25px;
  --r-inner: 15px;
  --r-btn: 10px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --pad-x: clamp(16px, 4vw, 40px);
  --maxw: 1120px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sw-root *, .sw-root *::before, .sw-root *::after { box-sizing: border-box; }
.sw-root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.sw-root { margin: 0; padding: 0; }
.sw-root {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.sw-root img, .sw-root svg { display: block; max-width: 100%; }
.sw-root h1, .sw-root h2, .sw-root h3, .sw-root h4, .sw-root p, .sw-root ul, .sw-root ol, .sw-root dl, .sw-root dd, .sw-root figure { margin: 0; }
.sw-root a { color: inherit; }
.sw-root button { font: inherit; color: inherit; }
.sw-root :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.sw-root .wrap { max-width: var(--maxw); margin-inline: auto; }
.sw-root .h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.sw-root .h2 { font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.sw-root .lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; max-width: 38em; text-wrap: pretty; }
.sw-root .dot { color: var(--signal); }
.sw-root .nowrap { white-space: nowrap; }
.sw-root .sec-head { display: grid; gap: clamp(12px, 1.6vw, 20px); max-width: 44rem; }

/* ---------- Buttons & Links ---------- */

.sw-root .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sw-root .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--r-btn);
  font: 600 1rem/1 var(--font);
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.sw-root .btn:active { transform: scale(0.97); }
.sw-root .btn--signal { background: var(--signal); color: var(--ground); }
.sw-root .text-link {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  text-decoration-color: var(--signal);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sw-root .btn--signal:hover { background: var(--signal-hi); }
  .sw-root .text-link:hover { text-decoration-color: currentColor; }
}

/* ---------- 3D-Elemente (isometrisch, siehe src/iso.mjs) ---------- */

.sw-root .iso-scene, .sw-root .iso-icon { display: block; overflow: visible; }
.sw-root .iso-scene *, .sw-root .iso-icon * { vector-effect: non-scaling-stroke; }
/* Flache Linien-Icons (src/icons.mjs) */
.sw-root .card-icon, .sw-root .tab-icon {
  position: relative;
  align-self: flex-start;
  flex: none;
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sw-root .card-icon { width: 56px; height: 56px; }
.sw-root .tab-icon { width: clamp(38px, 3.6vw, 48px); height: clamp(38px, 3.6vw, 48px); }

/* Leiterbahnen: von app.js als durchgehendes Netz je Reihe gezeichnet.
   Signale laufen dauerhaft und im gleichen Takt, daher gehen sie nahtlos von Kachel zu Kachel über.
   Muster in Pixeln: alle 360 px ein Signal auf Bahn A (nach rechts), alle 440 px auf Bahn B (nach links). */
.sw-root .mesh-lines .dash { stroke-dasharray: 3 4; }
.sw-root .mesh-signal { fill: none; stroke: #6B767C; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 14 346; }
.sw-root .mesh-signal--b { stroke-dasharray: 10 430; }
@media (prefers-reduced-motion: no-preference) {
  .sw-root .mesh-signal { animation: c2-flow-a 6s linear infinite; }
  .sw-root .mesh-signal--b { animation-name: c2-flow-b; animation-duration: 9s; }
  .sw-root .panel:not(.is-active) .mesh-signal { animation-play-state: paused; }
}
@keyframes c2-flow-a { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -360; } }
@keyframes c2-flow-b { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 440; } }
.sw-root .iso-scene { width: 100%; height: auto; }
.sw-root .iso-scene polyline { fill: none; }
.sw-root .iso-scene .g { stroke: rgba(255, 255, 255, 0.24); stroke-width: 0.8px; stroke-linejoin: round; }
.sw-root .iso-scene .g.t { fill: rgba(190, 198, 203, 0.3); }
.sw-root .iso-scene .g.r { fill: rgba(120, 128, 134, 0.34); }
.sw-root .iso-scene .g.l { fill: rgba(74, 81, 86, 0.42); }
.sw-root .iso-scene .faint.t { fill: rgba(190, 198, 203, 0.12); }
.sw-root .iso-scene .faint.r, .sw-root .iso-scene .faint.l { fill: rgba(90, 98, 103, 0.2); }
.sw-root .iso-scene .a { stroke: rgba(255, 200, 140, 0.5); stroke-width: 0.8px; stroke-linejoin: round; }
.sw-root .iso-scene .a.t { fill: var(--signal-hi); }
.sw-root .iso-scene .a.r { fill: var(--signal); }
.sw-root .iso-scene .a.l { fill: var(--signal-lo); }
.sw-root .iso-scene .u { fill: rgba(255, 255, 255, 0.22); }
.sw-root .iso-scene .u2 { fill: rgba(255, 255, 255, 0.1); }
.sw-root .iso-scene .ua, .sw-root .iso-scene .af { fill: var(--signal); }
.sw-root .iso-scene .uf { fill: rgba(255, 255, 255, 0.6); }
.sw-root .iso-scene .af2 { fill: rgba(255, 150, 0, 0.16); stroke: var(--signal); stroke-width: 1.2px; }
.sw-root .iso-scene .al { fill: none; stroke: var(--signal); stroke-width: 1.4px; stroke-linejoin: round; stroke-linecap: round; }
.sw-root .iso-scene .ul { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.8px; }
.sw-root .iso-scene .dash { stroke-dasharray: 4 5; }
.sw-root .iso-scene .o2 { opacity: 0.55; }
.sw-root .iso-scene .o3 { opacity: 0.3; }

/* ---------- Seitenkopf ---------- */

.sw-root .sw-head { padding: clamp(48px, 7vw, 88px) var(--pad-x) 0; }
.sw-root .sw-intro { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.sw-root .sw-intro .lead { color: var(--ink-2); }
@media (min-width: 860px) {
  .sw-root .sw-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; column-gap: clamp(32px, 5vw, 72px); }
}

/* ---------- Projekt-Reiter im Stil der Kacheln, verbunden mit dem Rahmen darunter ---------- */

.sw-root .sw-shell { padding-inline: var(--pad-x); }
.sw-root .tabs {
  /* Abstand zum Rahmen = Kartenradius: so haben die eingezogenen Ecken des
     Verbindungsstücks denselben Radius wie die Karten daneben. */
  --tab-gap: var(--r-card);
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 5), minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(32px, 5vw, 56px);
  padding-bottom: var(--tab-gap);
}
.sw-root .tab {
  --tab-bg: var(--tab-idle);
  --iso-fill: var(--tab-bg);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(220px, 26vw, 316px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 0;
  border-radius: var(--r-card);
  background: var(--tab-bg);
  color: var(--paper);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.sw-root .tab:focus-visible { outline-color: var(--ink); }
.sw-root .tab[aria-current="page"] {
  --tab-bg: var(--ground);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: default;
}
.sw-root .tab-clip { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.sw-root .tab-mesh { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; transition: opacity 240ms ease; }
.sw-root .tab-mesh .mesh-lines { stroke: #3A4043; stroke-width: 1; }
.sw-root .tab-scene {
  position: absolute;
  top: 24%;
  left: 20%;
  right: -12%;
  opacity: 0;
  transform: scale(1.05);
  transform-origin: 60% 40%;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.sw-root .tab-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--tab-bg) 0, var(--tab-bg) 26%, rgba(22, 26, 28, 0) 58%);
  opacity: 0;
  transition: opacity 200ms ease;
}
.sw-root .tab-body { position: relative; display: grid; gap: 4px; }
.sw-root .tab-name { font-size: clamp(0.875rem, 0.62rem + 0.62vw, 1.1875rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
/* Einzeiler nur im gewählten bzw. überfahrenen Reiter, damit alle Namen sonst auf einer Linie stehen */
.sw-root .tab-line { display: none; font-size: 0.8125rem; line-height: 1.35; color: var(--mute); text-wrap: pretty; }
.sw-root .tab[aria-current="page"] .tab-line { display: block; }

/* Ausgewählter Reiter: 3D-Motiv und Einzeiler sichtbar, Linien treten zurück */
.sw-root .tab[aria-current="page"] .tab-scene { opacity: 1; transform: none; transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
.sw-root .tab[aria-current="page"] .tab-shade { opacity: 1; }
.sw-root .tab[aria-current="page"] .tab-mesh { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .sw-root .tab:not([aria-current="page"]):hover { --tab-bg: #22272A; }
  .sw-root .tab:not([aria-current="page"]):hover .tab-scene { opacity: 0.9; transform: none; transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
  .sw-root .tab:not([aria-current="page"]):hover .tab-shade { opacity: 1; }
  .sw-root .tab:not([aria-current="page"]):hover .tab-line { display: block; }
  .sw-root .tab:not([aria-current="page"]):hover .tab-mesh { opacity: 0.25; }
}

/* Verbindungsstück: füllt den Spalt unter dem gewählten Reiter, mit eingezogenen Ecken wie bei Browser-Tabs */
.sw-root .tab-join {
  --join-r: var(--tab-gap);
  position: absolute;
  top: 100%;
  left: calc(var(--join-r) * -1);
  right: calc(var(--join-r) * -1);
  height: var(--tab-gap);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--join-r) - 0.5px), var(--ground) var(--join-r)) left bottom / var(--join-r) var(--join-r) no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--join-r) - 0.5px), var(--ground) var(--join-r)) right bottom / var(--join-r) var(--join-r) no-repeat,
    linear-gradient(var(--ground), var(--ground)) center / calc(100% - 2 * var(--join-r)) 100% no-repeat;
}
.sw-root .tab[data-edge="first"] .tab-join {
  left: 0;
  background:
    radial-gradient(circle at 100% 0, transparent calc(var(--join-r) - 0.5px), var(--ground) var(--join-r)) right bottom / var(--join-r) var(--join-r) no-repeat,
    linear-gradient(var(--ground), var(--ground)) left / calc(100% - var(--join-r)) 100% no-repeat;
}
.sw-root .tab[data-edge="last"] .tab-join {
  right: 0;
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--join-r) - 0.5px), var(--ground) var(--join-r)) left bottom / var(--join-r) var(--join-r) no-repeat,
    linear-gradient(var(--ground), var(--ground)) right / calc(100% - var(--join-r)) 100% no-repeat;
}
.sw-root .tab[aria-current="page"] .tab-join { opacity: 1; }

@media (max-width: 859px) {
  .sw-root .tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    scroll-padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .sw-root .tabs::-webkit-scrollbar { display: none; }
  .sw-root .tab { flex: 0 0 min(46%, 210px); min-height: 230px; scroll-snap-align: start; }
}

/* ---------- Rahmen mit dem Projektinhalt ---------- */

.sw-root .frame { position: relative; background: var(--ground); color: var(--paper); border-radius: var(--r-card); }
.sw-root .frame[data-edge="first"] { border-top-left-radius: 0; }
.sw-root .frame[data-edge="last"] { border-top-right-radius: 0; }
@media (max-width: 859px) {
  .sw-root .frame[data-edge] { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
}

.sw-root .panels { display: grid; }
.sw-root .panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}
.sw-root .panel.is-active { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
.sw-root.instant .panel, .sw-root.instant .tab, .sw-root.instant .tab * { transition: none !important; }

.sw-root .p-hero { padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 48px); overflow: clip; }
.sw-root .p-hero .lead { color: var(--soft); }
.sw-root .p-light {
  margin-inline: clamp(8px, 1.1vw, 12px);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 52px);
  border-radius: var(--r-inner);
  background: var(--white);
  color: var(--ink);
}
.sw-root .p-light .lead { color: var(--ink-2); }
.sw-root .p-light :focus-visible { outline-color: var(--ink); }
.sw-root .p-specs {
  flex: 1 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  align-content: start;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(32px, 5vw, 64px);
}
.sw-root .p-specs .lead { color: var(--soft); }
@media (min-width: 900px) {
  .sw-root .p-specs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 6vw, 88px); }
}

/* ---------- Hero ---------- */

.sw-root .p-hero .logo { width: clamp(170px, 20vw, 232px); height: auto; margin-bottom: clamp(20px, 3vw, 32px); }
.sw-root .hero-head { display: grid; gap: clamp(20px, 3vw, 32px); }
.sw-root .hero-side { display: grid; gap: 28px; align-content: end; }
@media (min-width: 860px) {
  .sw-root .hero-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(32px, 5vw, 64px); }
}
.sw-root .hero-visual { position: relative; margin-top: clamp(36px, 5vw, 56px); }
.sw-root .hero-visual--screen { padding-right: clamp(26px, 7%, 84px); padding-bottom: clamp(18px, 4%, 44px); }
.sw-root .screen { border-radius: var(--r-inner); overflow: hidden; box-shadow: 0 0 0 1px var(--steel), 0 48px 96px -48px rgba(0, 0, 0, 0.9); }
.sw-root .screen img { width: 100%; height: auto; }
.sw-root .watch { position: absolute; right: 0; bottom: 0; width: clamp(78px, 21%, 236px); height: auto; filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.6)); }
.sw-root .phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 32px); }
.sw-root .phone { width: clamp(88px, 24%, 250px); padding: 6px; border-radius: 34px; background: #0B0D0E; box-shadow: 0 0 0 1px var(--steel), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.sw-root .phone img { width: 100%; height: auto; border-radius: 28px; }
.sw-root .phone:nth-child(2) { transform: translateY(-24px); }
.sw-root .poster {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  border-radius: var(--r-inner);
  background: var(--ground-2);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.sw-root .poster-mesh { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--line); stroke-width: 1; }
.sw-root .poster-scene { position: relative; width: min(56%, 520px); }
.sw-root .poster-image { position: relative; width: clamp(96px, 18vw, 180px); height: auto; border-radius: 22%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.sw-root .poster--product { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 40px); padding: clamp(20px, 5vw, 56px) clamp(16px, 5vw, 56px) clamp(16px, 4vw, 40px); }
.sw-root .product { position: relative; width: auto; max-height: 100%; min-width: 0; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.sw-root .product:first-of-type { height: 100%; }
.sw-root .product:last-of-type:not(:first-of-type) { height: 72%; }

@media (prefers-reduced-motion: no-preference) {
  .sw-root.intro .panel.is-active :is(.screen, .phones, .poster) { animation: c2-reveal 1000ms var(--ease-in-out) 150ms backwards; }
  .sw-root.intro .panel.is-active .watch { animation: c2-rise 520ms var(--ease-out) 900ms backwards; }
}
@keyframes c2-reveal {
  from { clip-path: inset(0 0 100% 0 round var(--r-inner)); }
  to { clip-path: inset(0 0 0 0 round var(--r-inner)); }
}
@keyframes c2-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Inhalts-Kacheln ---------- */

.sw-root .cards {
  list-style: none;
  padding: 0;
  margin-top: clamp(32px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.sw-root .card {
  --card-pad: clamp(20px, 2.4vw, 28px);
  --iso-fill: var(--ground);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 42vw, 520px);
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--ground);
  color: var(--paper);
  clip-path: inset(0 round var(--r-card));
}
.sw-root .card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }
.sw-root .card-mesh, .sw-root .card-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sw-root .card-mesh { z-index: -3; fill: none; opacity: 0.35; }
.sw-root .card-mesh .mesh-lines { stroke: var(--line); stroke-width: 1; }
.sw-root .card-scene { position: absolute; z-index: -2; top: 5%; left: 22%; right: -8%; pointer-events: none; transform-origin: 60% 30%; }
.sw-root .card-shade {
  z-index: -1;
  background: linear-gradient(to top,
    var(--ground) 0,
    var(--ground) calc(var(--body-h, 55%) + var(--card-pad) - 12px),
    rgba(22, 26, 28, 0) calc(var(--body-h, 55%) + var(--card-pad) + 36px));
}
.sw-root .card-body { margin-top: auto; padding-top: 24px; }
.sw-root .card-title { font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.sw-root .card-more { padding-top: 8px; }
.sw-root .card-sub { font-size: 1rem; line-height: 1.45; color: var(--soft); }
.sw-root .card-list { list-style: none; padding: 0; margin-top: 16px; font-size: 0.875rem; line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.sw-root .card-list li { padding-block: 10px; border-top: 1px solid var(--steel); }
.sw-root .card-list li:last-child { padding-bottom: 0; }

/* Maus: geschlossen nur Titel + Linien, beim Öffnen erscheint das 3D-Motiv */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sw-root.js .card-mesh { opacity: 1; }
  .sw-root.js .card-scene { opacity: 0; transform: scale(1.05); }
  .sw-root.js .card-body { transform: translateY(var(--shift, 0px)); }
  .sw-root.js .card-more { opacity: 0; }
  .sw-root.js .card-shade { opacity: 0; }

  .sw-root.ready .card-mesh { transition: opacity 200ms ease; }
  .sw-root.ready .card-scene { transition: opacity 180ms ease, transform 200ms var(--ease-out); }
  .sw-root.ready .card-body { transition: transform 200ms var(--ease-out); }
  .sw-root.ready .card-more { transition: opacity 120ms ease; }
  .sw-root.ready .card-shade { transition: opacity 200ms ease; }

  .sw-root.js .card:is(:hover, :focus-visible) .card-mesh { opacity: 0; }
  .sw-root.js .card:is(:hover, :focus-visible) .card-scene { opacity: 1; transform: none; }
  .sw-root.js .card:is(:hover, :focus-visible) .card-body { transform: translateY(0); }
  .sw-root.js .card:is(:hover, :focus-visible) .card-more { opacity: 1; }
  .sw-root.js .card:is(:hover, :focus-visible) .card-shade { opacity: 1; }

  .sw-root.ready .card:hover .card-scene { transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out); }
  .sw-root.ready .card:hover .card-body { transition: transform 300ms var(--ease-out); }
  .sw-root.ready .card:hover .card-more { transition: opacity 200ms var(--ease-out) 60ms; }
  .sw-root.ready .card:hover .card-shade { transition: opacity 240ms ease; }

  .sw-root.ready .card:focus-visible :is(.card-body, .card-more, .card-shade, .card-scene, .card-mesh) { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-root .tab-scene, .sw-root .tab-shade, .sw-root .tab-mesh { transition: none; transform: none; }
}

@media (max-width: 699px) {
  .sw-root .cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 12px;
    margin-inline: clamp(-52px, -4vw, -16px);
    padding-inline: clamp(16px, 4vw, 52px);
    scroll-padding-inline: clamp(16px, 4vw, 52px);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .sw-root .cards::-webkit-scrollbar { display: none; }
  .sw-root .card { flex: 0 0 min(84%, 320px); min-height: 480px; scroll-snap-align: start; }
}

/* ---------- Ablauf ---------- */

.sw-root .steps { margin-top: clamp(56px, 8vw, 96px); }
.sw-root .step-list { list-style: none; padding: 0; margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 12px; }
.sw-root .step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 6px;
  padding: 20px;
  border-radius: var(--r-inner);
  background: var(--mist);
}
.sw-root .step-node {
  grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ground); color: var(--paper);
  font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sw-root .step-title { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; padding-top: 6px; }
.sw-root .step p { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 900px) {
  .sw-root .step-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sw-root .step { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 20px 18px 22px; }
  .sw-root .step-node { grid-row: auto; margin-bottom: 16px; }
  .sw-root .step-title { padding-top: 0; }
}

/* ---------- Technische Daten ---------- */

.sw-root .spec { padding: 4px clamp(18px, 2.4vw, 28px); border-radius: var(--r-inner); background: var(--ground-2); }
.sw-root .spec-row { display: grid; gap: 4px 24px; padding: 16px 20px; border-radius: 10px; }
.sw-root .spec-row + .spec-row { border-top: 1px solid var(--line); }
@media (min-width: 600px) { .sw-root .spec-row { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } }
.sw-root .spec dt { font-size: 0.9375rem; font-weight: 600; color: var(--paper); }
.sw-root .spec dd { font-size: 0.9375rem; line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.sw-root .spec dd .text-link { color: var(--soft); }
.sw-root .spec-note { display: block; margin-top: 6px; font-size: 0.8125rem; }

/* ---------- Kontakt ---------- */

.sw-root .contact { padding: clamp(40px, 6vw, 72px) var(--pad-x) clamp(28px, 4vw, 44px); }
.sw-root .contact-inner {
  display: grid;
  gap: 32px;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-card);
  background: var(--ground);
  color: var(--paper);
}
.sw-root .contact-inner .lead { color: var(--soft); }
@media (min-width: 860px) {
  .sw-root .contact-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(32px, 5vw, 72px); }
}
.sw-root .contact-list { display: grid; gap: 10px; margin-top: 28px; font-size: 0.9375rem; }
.sw-root .contact-list div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sw-root .contact-list dt { min-width: 4.5rem; color: var(--mute); }
.sw-root .contact-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 20px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Einbindung in die Website ---------- */

/* Der Grund kommt vom Rahmen der Website, damit das Punktnetz durchscheint und
   die Seite in beiden Farbschemata sitzt. Die Kacheln, der dunkle Rahmen und
   der helle Innenblock bleiben unverändert. */
.sw-root { --page: transparent; padding-top: 4rem; }

/* Dunkles Schema: nur der Text auf dem Seitengrund wird aufgehellt. Innerhalb
   von .p-light bleibt --ink dunkel, sonst wäre die Schrift dort unsichtbar. */
:root[data-theme="dark"] .sw-root { color: rgba(255, 255, 255, 0.92); }
:root[data-theme="dark"] .sw-root .sw-intro .lead,
:root[data-theme="dark"] .sw-root .contact-foot { color: rgba(255, 255, 255, 0.58); }
:root[data-theme="dark"] .sw-root .tab:focus-visible { outline-color: var(--signal); }

/* ---------- Brotkrumen auf den Unterseiten ---------- */

.sw-root .sw-crumbs ol {
  list-style: none; padding: 0; margin: 0 0 clamp(16px, 2vw, 24px);
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 0.875rem; line-height: 1.4; color: var(--ink-2);
}
.sw-root .sw-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--mute); }
.sw-root .sw-crumbs a {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  text-decoration-color: var(--signal); transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .sw-root .sw-crumbs a:hover { text-decoration-color: currentColor; }
}

/* ---------- Übersicht: Reiter als Einstieg in die Unterseiten ---------- */

/* Ohne Rahmen darunter zeigen alle Reiter Motiv und Einzeiler wie ein gewählter Reiter. */
.sw-root .tabs--index { padding-bottom: 0; }
.sw-root .tabs--index .tab { --tab-bg: var(--ground); }
.sw-root .tabs--index .tab-scene { opacity: 1; transform: none; }
.sw-root .tabs--index .tab-shade { opacity: 1; }
.sw-root .tabs--index .tab-mesh { opacity: 0; }
.sw-root .tabs--index .tab-line { display: block; }
@media (hover: hover) and (pointer: fine) {
  .sw-root .tabs--index .tab { transition: background-color 200ms ease, transform 200ms var(--ease-out); }
  .sw-root .tabs--index .tab:hover { --tab-bg: #22272A; transform: translateY(-4px); }
  .sw-root .tabs--index .tab:hover .tab-name { color: var(--signal); }
}

.sw-root .teasers { display: grid; gap: clamp(16px, 2.4vw, 24px); margin-top: clamp(32px, 5vw, 56px); }
.sw-root .teaser {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--r-card);
  background: var(--ground);
  color: var(--paper);
  overflow: clip;
}
.sw-root .teaser-text { display: grid; gap: clamp(14px, 1.8vw, 20px); align-content: center; }
.sw-root .teaser-text .actions { margin-top: 8px; }
.sw-root .teaser-name { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.sw-root .teaser .h2 a { text-decoration: none; }
.sw-root .teaser .lead { color: var(--soft); }
.sw-root .teaser .hero-visual { margin-top: 0; }
@media (min-width: 900px) {
  .sw-root .teaser { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .sw-root .teaser:nth-child(even) .teaser-text { order: 2; }
}
@media (hover: hover) and (pointer: fine) {
  .sw-root .teaser .h2 a { transition: color 200ms ease; }
  .sw-root .teaser .h2 a:hover { color: var(--signal-hi); }
}

:root[data-theme="dark"] .sw-root .sw-crumbs ol { color: rgba(255, 255, 255, 0.58); }