/* ============================================================
   aidX AG — Startseite und Produktseiten (index, expertise, system, privatsphaere)
   Ergänzt style.css; Farben, Schrift und Navigation kommen von dort.
   ============================================================ */

.home {
  --case:      #22d3ee;  /* Fallwissen */
  --expert:    #a78bfa;  /* Fachwissen */
  --ok:        #34d399;
  --warn:      #fbbf24;
  --ink-soft:  #aab8d4;
  --line:      rgba(255,255,255,.08);
  --panel:     #0d1426;
  overflow-x: hidden; /* Leuchtringe und gedrehte Karten duerfen nicht seitlich scrollen */
  overflow-x: clip;
}

/* ---- Grundbausteine ---- */
.h-section { padding: clamp(80px, 10vw, 136px) 0; position: relative; }
.h-section--alt { background: var(--color-bg2); }

.h-kicker {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}
/* Satz-Kennzeile: ganze Sätze nicht in Versalien */
.h-lede {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: #c9d6ee;
  margin-bottom: 24px;
}
.h-lede--sm { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--color-accent); margin-bottom: 18px; }

.h-title {
  font-size: clamp(2.05rem, 4.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.035em;
}
.h-grad {
  background: linear-gradient(92deg, #60a5fa 0%, #22d3ee 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h-dim { color: #6f82a8; }
.nw { white-space: nowrap; }
.h-title, .h-hero__title, .trust__card h2 { text-wrap: balance; }
.h-title--stack > span { display: block; }
.h-title--col { font-size: clamp(2rem, 3.6vw, 2.9rem); }

.h-text {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.h-text strong { color: var(--color-white); font-weight: 600; }

.h-head { max-width: 780px; margin-bottom: clamp(44px, 6vw, 72px); }
.h-head .h-text { margin-top: 22px; }
.h-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.h-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .98rem;
  color: var(--color-primary2);
}
.h-link:hover { color: var(--color-accent); }

.btn--lg { padding: 17px 30px; font-size: 1.02rem; border-radius: 12px; }
.btn--glow {
  background: linear-gradient(180deg, #4f8ff7 0%, #2f6fe0 100%);
  box-shadow: 0 12px 40px -8px rgba(59,130,246,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--glow:hover { background: linear-gradient(180deg, #5b98f8 0%, #2563eb 100%); }
.btn--line {
  background: rgba(255,255,255,.04);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,.14);
}
.btn--line:hover { background: rgba(255,255,255,.09); color: var(--color-white); }

.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---- 1 · Hero ---- */
.h-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: calc(var(--nav-height) + clamp(64px, 10vw, 132px)) 0 clamp(56px, 7vw, 96px);
}
.h-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(59,130,246,.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 30%, rgba(167,139,250,.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 40%, rgba(34,211,238,.09) 0%, transparent 70%);
  pointer-events: none;
}
.h-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
  pointer-events: none;
}
.h-hero__inner { position: relative; z-index: 1; max-width: 960px; }

.h-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 500;
  color: #c9d6ee;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.h-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--case);
  box-shadow: 0 0 12px var(--case);
  flex-shrink: 0;
}

.h-hero__title {
  font-size: clamp(2.6rem, 6.6vw, 5.1rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.045em;
  margin: 30px 0 30px;
}
.h-hero__title .h-grad { display: block; padding-bottom: .06em; }

.h-hero__lead {
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 740px;
  margin: 0 auto;
}
.h-hero__lead + .h-hero__lead { margin-top: 14px; }

.h-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 42px; }
.h-hero .h-ctas { justify-content: center; }
.h-trialnote { margin-top: 20px; font-size: .9rem; color: var(--color-muted); }
.h-trialnote span { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .h-rise { animation: h-rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .h-rise--2 { animation-delay: .08s; }
  .h-rise--3 { animation-delay: .16s; }
  .h-rise--4 { animation-delay: .24s; }
  @keyframes h-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---- App-Ansicht (Nachbau) ---- */
.app {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 50px 120px -30px rgba(0,0,0,.75),
    0 0 0 1px rgba(96,165,250,.05),
    0 0 90px -20px rgba(59,130,246,.28);
  text-align: left;
}
.app__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: .8rem;
  color: var(--color-muted);
}
.app__dots { display: flex; gap: 6px; }
.app__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.12); }
.app__crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app__crumb b { color: var(--color-text); font-weight: 600; }
.app__crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nachbau der echten App-Ansicht (Werte gemessen am Staging-Frontend 2026-10-24) */
.app--real { background: #161d2e; font-family: 'Karla', var(--font-sans); }
.appx__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 18px clamp(18px, 3vw, 32px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.appx__title { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; color: #fefefe; letter-spacing: -.01em; }
.appx__sub { font-style: italic; font-size: 1rem; color: #0084ff; }
.appx__link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .875rem;
  font-weight: 500;
  color: #0084ff;
  padding: 4px 8px;
  border-radius: 8px;
}
.appx__link .ico { width: 18px; height: 18px; stroke-width: 1.8; }
.appx__link--on { background: rgba(0,132,255,.12); box-shadow: inset 0 0 0 1px rgba(0,132,255,.35); }

.appx__body {
  position: relative;
  padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 32px) 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-height: 640px;
  overflow: hidden;
}
.appx__body--short { max-height: 520px; }
.appx__body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(22,29,46,0), #161d2e 85%);
  pointer-events: none;
}
.appv__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.appv__toggle:checked + .app .appx__body { max-height: none; padding-bottom: 36px; }
.appv__toggle:checked + .app .appx__body::after { display: none; }
.appx__more {
  display: block;
  position: relative;
  padding: 4px 0 22px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  color: #4da3ff;
  cursor: pointer;
}
.appx__more:hover { color: #7fbcff; }
.appx__more-close { display: none; }
.appv__toggle:checked + .app .appx__more-open { display: none; }
.appv__toggle:checked + .app .appx__more-close { display: inline; }
.appv__toggle:focus-visible + .app .appx__more { outline: 2px solid #4da3ff; outline-offset: -6px; border-radius: 8px; }

.appx__msg {
  border-radius: 20px;
  padding: 24px;
  font-size: 1rem;
  line-height: 1.5;
  color: #fefefe;
}
.appx__msg--q { background: #1a2132; }
.appx__msg--a { position: relative; background: #111620; padding-bottom: 44px; }
.appx__msg p { margin: 0 0 12px; line-height: 1.625; }
.appx__msg p:last-of-type { margin-bottom: 0; }
.appx__msg h3 { font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.43; letter-spacing: 0; color: #fefefe; margin: 12px 0 4px; }
.appx__msg h3:first-child { margin-top: 0; }
.appx__msg blockquote { margin: 12px 0; padding-left: 12px; border-left: 2px solid #6c7275; color: #e8ecef; font-style: italic; }
.appx__msg blockquote p { margin: 0; }
.appx__msg ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
.appx__msg li { line-height: 1.625; margin-bottom: 4px; }
.appx__msg strong { font-weight: 600; color: #fefefe; }
.appx__msg hr { border: none; border-top: 1px solid #232c3f; margin: 16px 0; }
.ph-name { border-bottom: 1px dotted currentColor; }
.appx__logo {
  position: absolute;
  left: 22px;
  bottom: -14px;
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 0 0 4px #161d2e;
}

/* Stichworte unter der Ansicht */
.appv__notes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; }
.appv__notes li { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: #dbe4f5; }
.appv__notes li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--case); box-shadow: 0 0 10px var(--case); }

.h-caption {
  margin-top: 18px;
  font-size: .86rem;
  color: var(--color-muted);
  text-align: center;
}
.h-caption b { color: var(--color-text); font-weight: 600; }

/* ---- 2 · Die echte Fallfrage ---- */
.h-case { padding: clamp(80px, 10vw, 132px) 0; position: relative; }
.h-case__stage { position: relative; max-width: 1140px; margin: 0 auto; }
.h-case__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }

/* Von der Antwort zur Sitzung */
mark.zq { background: rgba(251,191,36,.16); color: inherit; border-radius: 4px; padding: 0 2px; box-shadow: inset 0 -2px 0 rgba(251,191,36,.55); }
mark.zq::after, .tl--hit::before {
  content: attr(data-n);
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font: 700 .66rem/1 var(--font-sans);
  font-style: normal;
  color: #1a1305;
  background: var(--warn);
  vertical-align: 2px;
}
mark.zq::after { margin-left: 4px; }
.tr { position: sticky; top: calc(var(--nav-height) + 20px); }
.tr__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--warn); margin-bottom: 8px; }
.tr__lead { font-size: 1rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 8px; }
.tr__legend { font-size: .82rem; color: var(--color-muted); margin-bottom: 16px; }
mark.zq--legend::after, mark.zq--plain::after { display: none; }
.tr__doc { border-radius: 16px; background: #0f1524; border: 1px solid var(--line); overflow: hidden; }
.tr__head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--color-muted); }
.tr__lines { list-style: none; padding: 10px 0; margin: 0; }
.tl { position: relative; padding: 5px 16px 5px 40px; font-size: .86rem; line-height: 1.5; color: #8d9bb8; }
.tl b { color: #b7c3da; font-weight: 600; }
.tl--hit { color: #f3f6fb; background: rgba(251,191,36,.08); box-shadow: inset 3px 0 0 var(--warn); }
.tl--hit b { color: #fff; }
.tl--hit::before { position: absolute; left: 13px; top: 7px; }
.tr__note { margin-top: 12px; font-size: .8rem; color: var(--color-muted); }

/* Die Grundlage jeder Antwort */
.basis { margin-top: 40px; padding: 26px 28px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.basis__title { font-size: 1.15rem; font-weight: 700; color: var(--color-white); letter-spacing: -.01em; }
.basis__lead { margin-top: 4px; color: var(--ink-soft); font-size: .98rem; }
.basis__groups { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.basis__g { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 18px; border-radius: 12px; background: rgba(255,255,255,.025); border-left: 3px solid var(--case); }
.basis__g b { color: var(--color-white); font-weight: 600; font-size: 1rem; }
.basis__g span { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.basis__g--ev { border-left-color: var(--warn); }
.basis__g--expert { border-left-color: var(--expert); }
.h-case__stage::before {
  content: '';
  position: absolute;
  inset: -12% -8% auto;
  height: 70%;
  background: radial-gradient(ellipse at 50% 40%, rgba(59,130,246,.18), transparent 70%);
  pointer-events: none;
}
.h-case .h-lede { text-align: center; }
.h-case .app { position: relative; }
.h-case__lage { max-width: 640px; margin: -6px auto clamp(28px, 4vw, 40px); text-align: center; color: var(--color-muted); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.65; }

/* ---- 3 · Aus der Sitzung ---- */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  margin-bottom: 48px;
}
.steps::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: linear-gradient(90deg, rgba(96,165,250,0), rgba(96,165,250,.55) 20%, rgba(34,211,238,.55) 80%, rgba(34,211,238,0));
}
.step { text-align: center; position: relative; }
.step__icon {
  width: 72px; height: 72px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--color-primary2);
  background: #111b34;
  border: 1px solid rgba(96,165,250,.28);
  box-shadow: 0 0 0 10px var(--color-bg2), 0 14px 34px -10px rgba(0,0,0,.6);
  position: relative;
  z-index: 1;
}
.step__icon .ico { width: 30px; height: 30px; }
.step__num { font-size: .74rem; font-weight: 700; letter-spacing: .14em; color: var(--color-accent); }
.step h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); margin: 8px 0 10px; }
.step p { color: var(--color-muted); font-size: 1rem; line-height: 1.65; max-width: 290px; margin: 0 auto; }
.h-root__more { text-align: center; }

/* ---- 4 · Die Wissensdrehscheibe ---- */
.hub { max-width: 1000px; margin: 0 auto; position: relative; }
.hub__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 6vw, 96px);
}
.hub-in {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.hub-in .ico { color: var(--color-primary2); }
.hub-in strong { color: var(--color-white); font-weight: 600; font-size: 1.02rem; line-height: 1.4; }

.hub__flow { display: block; width: 100%; height: 96px; overflow: visible; }
.hub__flow path {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  vector-effect: non-scaling-stroke;
}
.hub__vline { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hub__flow path { animation: h-flow 1.8s linear infinite; }
  @keyframes h-flow { to { stroke-dashoffset: -24; } }
}

.hub__core { position: relative; width: min(440px, 82vw); aspect-ratio: 1; margin: 0 auto; }
.hub__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.hub__ring--a { inset: -22px; border: 1px dashed rgba(148,163,184,.28); }
.hub__ring--b { inset: -48px; border: 1px solid rgba(96,165,250,.08); }
@media (prefers-reduced-motion: no-preference) {
  .hub__ring--a { animation: h-spin 90s linear infinite; }
  @keyframes h-spin { to { transform: rotate(360deg); } }
}
.hub__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  box-shadow: -40px 0 120px -40px rgba(34,211,238,.45), 40px 0 120px -40px rgba(167,139,250,.45);
}
.hub__half {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 12% 0 16%;
  text-align: center;
}
.hub__half--case {
  background: radial-gradient(circle at 100% 50%, rgba(34,211,238,.30) 0%, rgba(34,211,238,.07) 70%), #0e1a30;
  border-right: 1px solid rgba(34,211,238,.35);
}
.hub__half--expert {
  padding: 0 16% 0 12%;
  background: radial-gradient(circle at 0% 50%, rgba(167,139,250,.30) 0%, rgba(167,139,250,.07) 70%), #15162f;
  border-left: 1px solid rgba(167,139,250,.35);
}
.hub__k { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--color-white); }
.hub__d { font-size: clamp(.82rem, 1.3vw, .98rem); line-height: 1.5; color: #c3cee6; }
.hub__half--case .hub__k { color: #a5f3fc; }
.hub__half--expert .hub__k { color: #ddd6fe; }

/* Stiche über die Fuge: getrennt gehalten, nachvollziehbar verbunden */
.hub__stitch { position: absolute; left: 50%; width: 30px; height: 2px; margin-left: -15px; border-radius: 2px; background: linear-gradient(90deg, var(--case), var(--expert)); box-shadow: 0 0 10px rgba(167,139,250,.6); }
.hub__stitch--1 { top: 36%; }
.hub__stitch--2 { top: 50%; }
.hub__stitch--3 { top: 64%; }

.hub__seam { text-align: center; margin-top: 46px; }
.hub__seam span {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  color: #dbe4f5;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}

.hub-out {
  display: block;
  position: relative;
  padding: 26px 26px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  color: inherit;
  transition: transform .2s, border-color .2s;
}
.hub-out::before {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--case), var(--expert));
}
.hub-out:hover { transform: translateY(-2px); border-color: rgba(96,165,250,.3); color: inherit; }
.hub-out__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.hub-out__top .ico { color: var(--color-primary2); width: 26px; height: 26px; }
.hub-out strong { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 700; color: var(--color-white); letter-spacing: -.01em; }
.hub-out p { color: var(--color-muted); font-size: 1rem; }

/* ---- 5 · Andere Perspektive ---- */
.h-split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.h-split--rev { grid-template-columns: 6fr 5fr; }
.h-split .h-text + .h-text { margin-top: 18px; }
.h-next { margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  color: #dbe4f5;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--case); }
.chip:nth-child(2n)::before { background: var(--expert); }

/* ---- 6 · Aus Verstehen wird Erledigen ---- */
.channels { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.channel {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.channel > .ico { color: var(--color-primary2); margin-top: 2px; }
.channel__body { flex: 1; min-width: 0; }
.channel__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.channel__head strong { color: var(--color-white); font-weight: 600; font-size: 1.04rem; }
.channel p { color: var(--color-muted); font-size: .95rem; margin-top: 4px; line-height: 1.6; }

/* Formular im Original (Papieranmutung) */
.paper {
  position: relative;
  background: #f7f9fc;
  color: #0f172a;
  border-radius: 14px;
  padding: clamp(22px, 3.4vw, 36px);
  box-shadow: 0 50px 110px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
  transform: rotate(-1deg);
}
.paper__ribbon {
  position: absolute;
  top: 16px; right: 16px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  padding: 4px 10px;
  border-radius: 999px;
}
.paper__title { font-size: 1.08rem; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.paper__sub { font-size: .78rem; color: #64748b; margin-top: 2px; }
.paper__rule { height: 1px; background: #e2e8f0; margin: 18px 0; }
.field { padding: 12px 0; border-bottom: 1px solid #edf1f6; }
.field:last-child { border-bottom: none; }
.field__label { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #475569; }
.field__value { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.field__value i { display: block; height: 8px; border-radius: 5px; background: #dbe3ee; }
.field__value i:nth-child(2) { width: 82%; }
.field__value i:nth-child(3) { width: 64%; }
.field__value--empty { height: 22px; border: 1px dashed #cbd5e1; border-radius: 6px; background: repeating-linear-gradient(45deg, #f1f5f9 0 6px, #f8fafc 6px 12px); }
.paper + .h-caption { margin-top: 26px; }

/* ---- 6 · Einmal verstanden. Überall nutzbar. Dauerhaft nachvollziehbar. ---- */
.flow4 { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 40px; padding: 0; counter-reset: f; }
.flow4 li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.flow4 li:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--case); font-weight: 700; z-index: 1; }
.flow4__n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--color-white);
  background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(167,139,250,.35)); border: 1px solid rgba(255,255,255,.12); margin-bottom: 6px; }
.flow4 b { color: var(--color-white); font-size: 1.02rem; line-height: 1.35; }
.flow4 span:last-child { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

.ws-fig { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ws-fig > .h-caption { grid-column: 1 / -1; }
.ws { border-radius: 16px; overflow: hidden; background: #0d1426; border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(167,139,250,.25); }
.ws__bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ws__url { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: .76rem; color: #c3cee6; }
.ws__url .ico { width: 13px; height: 13px; color: var(--ok); }
.ws__split { display: grid; grid-template-columns: minmax(0, 1fr) 230px; }
.ws__page { background: #f4f6f9; color: #1e293b; padding: 22px 24px 24px; font-family: Arial, Helvetica, sans-serif; }
.pt__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: #0f3d5c; padding-bottom: 12px; border-bottom: 3px solid #0f3d5c; margin-bottom: 14px; }
.pt__logo { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #0f3d5c, #2a7ab0); }
.pt__title { font-size: .95rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; }
.pt__field { margin-bottom: 10px; }
.pt__field label { display: block; font-size: .7rem; font-weight: 700; color: #475569; margin-bottom: 3px; }
.pt__val { border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; padding: 7px 9px; font-size: .78rem; line-height: 1.45; color: #0f172a; }
.pt__val--ki { border-color: #22d3ee; box-shadow: 0 0 0 2px rgba(34,211,238,.18); background: #f0fdff; }
.pt__val--leer { color: #64748b; font-style: italic; background: repeating-linear-gradient(45deg, #f8fafc 0 6px, #f1f5f9 6px 12px); }
.ws__panel { background: #111827; border-left: 1px solid rgba(255,255,255,.08); padding: 16px; display: flex; flex-direction: column; gap: 10px; font-family: 'Karla', var(--font-sans); }
.wp__head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: #fefefe; }
.wp__head .ico { width: 16px; height: 16px; color: var(--case); }
.wp__dossier { font-size: .78rem; color: #0084ff; font-style: italic; }
.wp__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wp__list li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #e8ecef; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); }
.wp__list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wp__list li.ok::before { background: var(--case); }
.wp__list li.leer::before { background: #6C7275; }
.wp__list li.leer { color: #9aa6bd; }
.wp__note { font-size: .74rem; line-height: 1.5; color: #9aa6bd; margin: 2px 0 0; }
.wp__btn { margin-top: auto; text-align: center; padding: 9px 10px; border-radius: 10px; background: #0084ff; color: #fff; font-size: .8rem; font-weight: 600; }
.ws-side { display: flex; flex-direction: column; gap: 18px; }
.paper--mini { transform: rotate(-1.2deg); padding: 20px 22px; }
.field__text { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: #1e293b; }
.dlist { border-radius: 14px; background: #161d2e; border: 1px solid rgba(255,255,255,.08); padding: 14px 16px; font-family: 'Karla', var(--font-sans);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7); }
.dlist__head { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: #fefefe; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; }
.dlist__head .ico { width: 15px; height: 15px; color: #0084ff; }
.dlist__row { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dlist__row b { font-size: .84rem; font-weight: 600; color: #fefefe; }
.dlist__row span { font-size: .72rem; color: #8d9bb8; }
.dlist__note { margin: 8px 0 0; font-size: .74rem; color: var(--case); }

/* ---- 7 · Jede Angabe hat eine Herkunft ---- */
.ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ev__levels { list-style: none; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.lvl { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 22px 24px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.lvl__num { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: var(--color-white); background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(167,139,250,.35)); border: 1px solid rgba(255,255,255,.12); }
.lvl h3 { font-size: 1.15rem; margin-bottom: 6px; }
.lvl p { color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }

/* Nachbau Berichtsansicht (gemessen am Staging-Frontend 2026-10-24) */
.rep__head { display: flex; align-items: center; gap: 12px; padding: 14px clamp(18px, 3vw, 24px); border-bottom: 1px solid rgba(255,255,255,.06); }
.rep__badge { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fbbf24; border: 1px solid rgba(251,191,36,.5); border-radius: 999px; padding: 2px 9px; }
.rep__title { font-size: .95rem; font-weight: 600; color: #fefefe; }
.rep__date { font-size: .82rem; color: #8d9bb8; margin-left: auto; }
.rep__body { padding: 14px clamp(14px, 2.4vw, 18px) 18px; display: flex; flex-direction: column; gap: 12px; }
.rep__field { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 14px 12px; background: #141a29; }
.rep__label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fefefe; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.rep__text { font-family: var(--font-sans); font-size: .92rem; line-height: 1.6; color: #fefefe; margin: 0 0 10px; }
.rep__chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; font-family: var(--font-sans); font-size: .75rem; line-height: 1; color: #e8ecef; background: rgba(35,43,60,.4); border: 1px solid rgba(46,56,76,.9); }
.rep__chip--live { box-shadow: 0 0 0 3px rgba(34,211,238,.25), 0 0 18px rgba(34,211,238,.35); border-color: rgba(34,211,238,.6); }
.rep__mark { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-family: var(--font-sans); font-size: .7rem; color: #e8ecef; }
.rep__mark .ico { width: 12px; height: 12px; stroke-width: 2; }
.rep__more { font-size: .78rem; color: #6f82a8; text-align: center; margin: 2px 0 0; }
.jump { margin: 14px 0 0 clamp(16px, 6%, 48px); }
.jump__label { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--case); margin-bottom: 10px; }
.jump__arrow { font-size: 1.2rem; line-height: 1; }
.jump__win { box-shadow: 0 30px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(34,211,238,.25); }
.jump__win .appx__head { border-bottom: none; padding-bottom: 8px; }
.jump__doc { display: flex; align-items: center; gap: 10px; margin: 0 clamp(18px, 3vw, 24px) 18px; padding: 14px 16px; border-radius: 14px; background: #1a2132; font-size: .9rem; color: #fefefe; }
.jump__doc .ico { width: 18px; height: 18px; color: #0084ff; }
.jump__doc span { color: #0084ff; font-size: .78rem; }

/* ---- 8 · Vertrauen ---- */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trust__card {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid var(--line);
}
.trust__card > .ico { width: 34px; height: 34px; color: var(--case); margin-bottom: 22px; }
.trust__card:nth-child(2) > .ico { color: var(--ok); }
.trust__card h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; }
.trust__card .h-text { margin-top: 18px; font-size: 1.04rem; }
.trust__list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.trust__list li { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; padding-left: 18px; position: relative; }
.trust__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--case); }
.trust__list li:nth-child(2)::before { background: var(--expert); }
.trust__list li:nth-child(1)::before { background: var(--warn); }
.trust__list li:nth-child(3)::before { background: var(--ok); }
.trust__list li:nth-child(4)::before { background: var(--color-primary2); }
.trust__list b { color: var(--color-white); font-weight: 600; }
.trust__card .h-link { margin-top: 24px; }

/* ---- 9 · Abschluss ---- */
.h-final { text-align: center; overflow: hidden; }
.h-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(59,130,246,.22), transparent 70%);
  pointer-events: none;
}
.h-final .container { position: relative; max-width: 860px; }
.h-final .h-title { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
.h-final .h-text { margin: 24px auto 0; max-width: 620px; }
.h-final .h-ctas { justify-content: center; }
.h-brand {
  margin-top: clamp(64px, 9vw, 104px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--color-white);
}
.h-brand em { font-style: normal; color: var(--color-primary2); }

/* ==== Expertise-Seite ==== */
.tiles6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 46px; text-align: left; }
.tiles6 a { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px; border-radius: 14px; color: inherit;
  background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.tiles6 a:hover { border-color: rgba(34,211,238,.4); transform: translateY(-2px); color: inherit; }
.tiles6 span { font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--case); }
.tiles6 b { font-size: 1.02rem; color: var(--color-white); line-height: 1.3; }
.tiles6 em { font-style: normal; font-size: .86rem; color: var(--color-muted); line-height: 1.45; }
.xp-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.xp-list li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.xp-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--case), var(--expert)); }
.xp-list b { color: var(--color-white); font-weight: 600; }
.xp-sub { color: var(--color-muted); font-size: .95rem; margin-bottom: 12px; }
.xp-steps { margin: 22px 0 0; padding-left: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.xp-steps li { counter-increment: s; position: relative; padding: 12px 16px 12px 52px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink-soft); line-height: 1.55; }
.xp-steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; color: var(--color-white); background: linear-gradient(135deg, rgba(34,211,238,.35), rgba(167,139,250,.35)); }
.ev--xp { align-items: start; }
.xp-ws { max-width: 1000px; margin: 0 auto; }
.xp-ws .ws { margin-bottom: 4px; }
/* Wissensebenen */
.layers { display: flex; flex-direction: column; gap: 10px; }
.layer { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.layer b { color: var(--color-white); font-size: 1.05rem; }
.layer span { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.layer--dossier { border-left: 4px solid var(--case); background: rgba(34,211,238,.06); margin-right: 0; }
.layer--person { border-left: 4px solid #60a5fa; margin-left: 18px; }
.layer--inst { border-left: 4px solid #818cf8; margin-left: 36px; }
.layer--global { border-left: 4px solid var(--expert); background: rgba(167,139,250,.06); margin-left: 54px; }
.layers__note { margin-top: 6px; text-align: right; font-size: .82rem; font-weight: 600; color: #dbe4f5; }
/* Prüfdialog (Nachbau, gemessen am Staging-Frontend 2026-10-24) */
.rv { background: #111620; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 24px 24px 20px; font-family: 'Karla', var(--font-sans);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.75), 0 0 80px -20px rgba(34,211,238,.18); }
.rv__title { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; color: #fefefe; letter-spacing: -.01em; }
.rv__meta { font-size: .84rem; color: #e8ecef; margin: 4px 0 14px; }
.rv__text { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; max-height: 260px; overflow: hidden; position: relative; }
.rv__text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, rgba(17,22,32,0), #111620); }
.rv__text p { margin: 0 0 6px; font-size: .88rem; line-height: 1.55; color: #fefefe; }
.rv__text b { font-weight: 400; }
.rv__ph { display: inline-block; padding: 0 4px; border: 1px solid #3b82f6; border-radius: 4px; background: rgba(59,130,246,.18); font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: #bfdbfe; }
.rv__hint { margin: 10px 0 8px; font-size: .74rem; color: #f87171; }
.rv__legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .74rem; color: #e8ecef; margin-bottom: 14px; }
.rv__legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid; }
.rv__legend .sicher::before { border-color: #3b82f6; }
.rv__legend .unsicher::before { border-color: #f59e0b; }
.rv__legend .fach::before { border-color: #22c55e; }
.rv__btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.rv__btns span { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); font-size: .8rem; color: #fefefe; }
.rv__btns span:first-child { background: #232c3f; border-color: transparent; }
.rv__go { margin: 10px 0 0 auto; width: fit-content; padding: 9px 18px; border-radius: 10px; background: #0084ff; color: #fff; font-size: .84rem; font-weight: 600; }

/* ==== Startseite 2 · SOAP-Notiz (Nachbau, gemessen am Staging-Frontend 2026-10-24) ==== */
.rep__who { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 14px; background: #111620; font-family: 'Karla', var(--font-sans); }
.rep__who p { margin: 0; font-size: .78rem; line-height: 1.6; color: #e8ecef; }
.rep__who .rep__who-h { color: #fefefe; font-weight: 500; }
.rep .rep__more { margin: -2px 0; }
.soapv__voll { display: none; }
.soapv__toggle:checked + .app .soapv__voll { display: flex; }
.soapv__toggle:checked + .app .soapv__kurz { display: none; }
.soapv__toggle:focus-visible + .app .appx__more { outline: 2px solid #4da3ff; outline-offset: -6px; border-radius: 8px; }
.ans4__box { padding: 14px 16px; border-radius: 14px; background: #0f1524; border: 1px solid var(--line); margin-bottom: 12px; }
.ans4__box .tr__kicker { margin-bottom: 6px; }
.ans4__t { margin: 8px 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.appx__body.appx__body--ex { max-height: none; }
.appx__body--ex::after { display: none; }
.appx__msg .appx__gap { margin: 6px 0; color: #6c7275; letter-spacing: .2em; }
.ans4__quote { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--warn); background: rgba(251,191,36,.06); border-radius: 0 8px 8px 0;
  font-size: .86rem; line-height: 1.55; color: #e8ecef; font-style: italic; }
.ans4__quote span { display: block; font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--color-muted); margin-bottom: 4px; }
.ans4__quote b { font-style: normal; color: #fff; }
.ans4__note { margin-top: 16px; font-size: .86rem; line-height: 1.55; color: #cfd8ea; padding-left: 12px; border-left: 2px solid var(--expert); }

/* Expertise 02 · Von der Fachquelle zur Aussage */
.chain3 { margin-top: clamp(40px, 6vw, 64px); }
.chain3__title { font-size: 1.15rem; font-weight: 700; color: var(--color-white); margin-bottom: 16px; }
.chain3__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.chain3__c { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-top: 3px solid var(--case); }
.chain3__c:not(:last-child)::after { content: '→'; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #4c6a9a; font-size: 1rem; }
.chain3__c--who { border-top-color: var(--expert); background: rgba(167,139,250,.05); }
.chain3__c--rep { border-top-color: #60a5fa; }
.chain3__k { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.chain3__q { margin: 0; color: #f3f6fb; font-size: .98rem; line-height: 1.55; }
.chain3__s { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.chain3__c .rep__chip { align-self: flex-start; }
.chain3 .h-caption { margin-top: 18px; text-align: left; }
@media (max-width: 900px) {
  .chain3__list { grid-template-columns: 1fr; }
  .chain3__c:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -19px; transform: none; }
}

/* ==== Vertraulichkeit ==== */
.who3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.who3__c { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border-radius: 16px; background: #0f1524; border: 1px solid var(--line); border-top: 3px solid var(--case); }
.who3__c:not(:last-child)::after { content: '→'; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #4c6a9a; }
.who3__c--ai { border-top-color: #60a5fa; }
.who3__c--store { border-top-color: #6c7275; }
.who3__k { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.who3__q { margin: 0; font-size: 1rem; line-height: 1.6; color: #f3f6fb; }
.who3__q--ct { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; color: #6c7275; word-break: break-all; }
.who3__name { color: var(--case); font-weight: 700; }
.who3__ph { display: inline-block; padding: 0 5px; border: 1px solid #3b82f6; border-radius: 5px; background: rgba(59,130,246,.15); color: #cfe0ff; font-weight: 600; }
.who3__keep { text-decoration: underline dotted #22c55e; text-underline-offset: 4px; }
.who3__s { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; margin-top: auto; }
#sieht .h-caption { margin-top: 20px; }
.chips--fach .chip::before { background: #22c55e; }
.rv__text--open { max-height: none; }
.rv__text--open::after { display: none; }
.rv__gap { color: #6c7275; letter-spacing: .2em; }
.rv__fach { text-decoration: underline dotted #22c55e; text-underline-offset: 3px; }
.keys { display: flex; flex-direction: column; gap: 12px; }
.keys > div, .keys__k { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: #0f1524; display: flex; flex-direction: column; gap: 4px; }
.keys b { color: var(--color-white); font-size: 1rem; }
.keys span { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.keys__obj { border-left: 4px solid #60a5fa !important; }
.keys__split { display: grid !important; grid-template-columns: 1fr 1fr; padding: 0 !important; border: 0 !important; background: none !important; height: 18px; }
.keys__split i { justify-self: center; width: 2px; height: 18px; background: linear-gradient(180deg, rgba(96,165,250,.7), rgba(96,165,250,.2)); }
.keys > .keys__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; border: 0; background: none; }
.keys__k--you { border-top: 3px solid var(--case) !important; }
.keys__k--ai { border-top: 3px solid var(--expert) !important; }
.keys__map { border-left: 4px solid var(--case) !important; background: rgba(34,211,238,.05) !important; }
.setup3 { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
.setup3 li { counter-increment: s; position: relative; padding: 16px 18px 16px 58px; border-radius: 14px; background: #0f1524; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.setup3 li::before { content: counter(s); position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; color: #06111f; background: var(--case); }
.setup3 b { color: var(--color-white); font-size: 1rem; }
.setup3 span { color: var(--ink-soft); font-size: .9rem; }
.bound2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; }
.bound2__c { padding: 22px 24px; border-radius: 16px; background: #0f1524; border: 1px solid var(--line); border-top: 3px solid var(--case); }
.bound2__c--dossier { border-top-color: #60a5fa; }
.bound2__k { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 12px; }
.bound2__c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bound2__c li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.bound2__c li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--case); }
.bound2__c--dossier li::before { background: #60a5fa; }
.facts3 { display: flex; flex-direction: column; gap: 12px; }
.facts3 > div { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.facts3 b { font-size: 1.3rem; color: var(--color-white); letter-spacing: -.01em; }
.facts3 span { color: var(--ink-soft); font-size: .92rem; }
.faq-wrap { max-width: 860px; }
.faq2 { display: flex; flex-direction: column; gap: 10px; }
.faq2 details { border-radius: 14px; background: #0f1524; border: 1px solid var(--line); padding: 0 20px; }
.faq2 summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; position: relative; font-weight: 600; color: var(--color-white); font-size: 1.02rem; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 1.2rem; color: var(--color-muted); }
.faq2 details[open] summary::after { content: '–'; }
.faq2 details p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.65; font-size: .98rem; }
.faq2 details p a { color: var(--color-accent); }
@media (max-width: 900px) {
  .who3 { grid-template-columns: 1fr; }
  .who3__c:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -19px; transform: none; }
  .bound2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .keys > .keys__row { grid-template-columns: 1fr; }
  .keys__split { display: none !important; }
}

/* Startseite 2 · Grundlage einer Chat-Antwort auf Nachfrage */
.grd { margin: 0 0 6px; padding: 16px 18px; border-radius: 14px; background: #111620; border: 1px solid rgba(34,211,238,.25); display: flex; flex-direction: column; gap: 14px; font-family: 'Karla', var(--font-sans); }
.grd__h { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fefefe; }
.grd__g { display: flex; flex-direction: column; gap: 8px; }
.grd__k { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.grd__k--doc { color: var(--case); border-color: rgba(34,211,238,.5); }
.grd__k--open { color: #cfd8ea; border-color: rgba(207,216,234,.35); }
.grd__k--hyp { color: var(--warn); border-color: rgba(251,191,36,.5); }
.grd__q { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 8px; }
.grd__q p { margin: 0; font-size: .88rem; line-height: 1.55; color: #f3f6fb; }
.grd__q p b { color: #fff; }
.grd__t { margin: 0; font-size: .88rem; line-height: 1.55; color: #e8ecef; }
.zqn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 .66rem/1 var(--font-sans); color: #1a1305; background: var(--warn); }
.basis--col { margin-top: 0; }
.basis--col .basis__groups { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .grd__q { grid-template-columns: auto 1fr; }
  .grd__q p { grid-column: 1 / -1; }
}

/* ==== System-Seite ==== */
.cycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 46px; text-align: left; }
.cycle a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line); color: inherit; transition: border-color .2s, transform .2s; }
.cycle a:hover { border-color: rgba(34,211,238,.4); transform: translateY(-2px); color: inherit; }
.cycle a:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  color: #4c6a9a; font-size: .95rem; z-index: 1; }
.cycle span { font-size: .78rem; font-weight: 800; letter-spacing: .1em; color: var(--case); }
.cycle b { font-size: 1.05rem; color: var(--color-white); }
.cycle em { font-style: normal; font-size: .84rem; color: var(--color-muted); line-height: 1.45; }
.cycle__loop { margin-top: 16px; font-size: .92rem; font-weight: 600; color: #cfe3ff; }
.cycle__loop span { color: var(--case); font-size: 1.1rem; margin-right: 4px; }
.sys-tip { margin-top: 20px; font-size: .9rem; color: var(--color-muted); }
.sys-tip a { color: var(--color-accent); }
.sys-center { text-align: center; margin-top: 26px; }
/* Dossieransicht (Nachbau, gemessen am Staging-Frontend 2026-10-24) */
.dsv { font-family: 'Karla', var(--font-sans); background: #161d2e; }
.dsv__head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #161d2e; border-bottom: 1px solid #111620; }
.dsv__back { color: #6c7275; font-size: 1rem; }
.dsv__head b { display: block; font-size: 1rem; font-weight: 700; color: #fefefe; }
.dsv__psd { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: #6c7275; margin-top: 2px; }
.dsv__tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.dsv__tabs span { padding: 12px 10px 11px; font-size: .84rem; font-weight: 500; color: #6c7275; white-space: nowrap; border-bottom: 2px solid transparent; }
.dsv__tabs .on { color: #fefefe; border-bottom-color: #3e90f0; }
.dsv__bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.dsv__bar b { font-size: .9rem; font-weight: 700; color: #fefefe; }
.dsv__bar i { font-style: normal; font-size: .78rem; color: #6c7275; }
.dsv__btn { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: #1d3454; border: 1px solid #234673; color: #3e90f0; font-size: .76rem; font-weight: 500; white-space: nowrap; }
.dsv__menu { position: absolute; right: 16px; top: 48px; z-index: 2; list-style: none; margin: 0; padding: 6px 0; min-width: 196px; border-radius: 8px;
  background: #111620; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.dsv__menu li { padding: 7px 14px; font-size: .78rem; color: #fefefe; }
.dsv__menu li:first-child { background: rgba(62,144,240,.12); }
.dsv__sub { display: flex; gap: 6px; padding: 4px 16px 0; }
.dsv__sub span { padding: 8px 10px; font-size: .78rem; font-weight: 500; color: #6c7275; border-bottom: 2px solid transparent; }
.dsv__sub .on { color: #fefefe; border-bottom-color: #3e90f0; }
.dsv__rows { list-style: none; margin: 10px 0 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.dsv__rows li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #111620; }
.dsv__rows .ico { width: 17px; height: 17px; flex-shrink: 0; color: #6c7275; stroke-width: 1.7; }
.dsv__rows b { display: block; font-size: .86rem; font-weight: 500; color: #f3f5f7; }
.dsv__rows div span { display: block; font-size: .74rem; color: #6c7275; margin-top: 2px; }
.dsv__rows .rep__badge { margin-left: auto; }
.dsv__rows--docs li { background: transparent; border-bottom: 1px solid rgba(255,255,255,.04); gap: 12px; padding: 10px 18px; }
.dsv__field { margin: 4px 16px 18px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(34,211,238,.25); background: #111620; }
.dsv__field .rep__text { font-size: .86rem; }
/* Verlauf des Beispielfalls */
.tl4 { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 900px; margin: 0 auto 44px; padding: 0; position: relative; }
.tl4::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: linear-gradient(90deg, var(--case), #60a5fa 66%, rgba(96,165,250,.15)); }
.tl4 li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tl4__dot { width: 20px; height: 20px; border-radius: 50%; background: #0b1222; border: 3px solid var(--case); margin-bottom: 10px; position: relative; z-index: 1; }
.tl4 b { color: var(--color-white); font-size: 1rem; }
.tl4 li > span:last-child { color: var(--color-muted); font-size: .86rem; }
.tl4--doc .tl4__dot { border-color: #60a5fa; border-radius: 6px; }
.tl4--next .tl4__dot { border-style: dashed; border-color: rgba(96,165,250,.6); }
.tl4--next b { color: #cfd8ea; }
/* Vier Wege */
.work4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work4__c { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 16px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line); border-top: 3px solid var(--case); color: inherit; transition: transform .2s, border-color .2s; }
.work4__c:hover { transform: translateY(-3px); color: inherit; border-color: rgba(34,211,238,.35); }
.work4__c .ico { width: 26px; height: 26px; color: var(--case); margin-bottom: 6px; }
.work4__c b { font-size: 1.1rem; color: var(--color-white); }
.work4__c span { color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.work4__c em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: .88rem; font-weight: 600; color: var(--color-accent); }
.work4__c--rep { border-top-color: #60a5fa; } .work4__c--rep .ico { color: #60a5fa; }
.work4__c--form { border-top-color: #818cf8; } .work4__c--form .ico { color: #818cf8; }
.work4__c--web { border-top-color: var(--expert); } .work4__c--web .ico { color: var(--expert); }
/* Übergang zur zweiten Ebene */
.sys-detail { padding: 56px 0 8px; border-top: 1px solid var(--line); }
.sys-detail .container { max-width: 780px; text-align: center; }
.sys-detail__k { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.sys-detail__t { margin-top: 10px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }

/* ---- Tablet ---- */
@media (max-width: 1040px) {
  .h-case__grid { grid-template-columns: 1fr; }
  .tiles6 { grid-template-columns: 1fr 1fr; }
    .cycle a::after { display: none; }
  .work4 { grid-template-columns: 1fr 1fr; }
  .flow4 { grid-template-columns: 1fr 1fr; }
  .flow4 li:nth-child(2)::after { display: none; }
  .ws-fig { grid-template-columns: 1fr; }
  .ws-side { flex-direction: row; }
  .ws-side > * { flex: 1; min-width: 0; }
  .basis__groups { grid-template-columns: 1fr; }
  .tr { position: static; }
}

@media (max-width: 900px) {
  .h-split, .h-split--rev { grid-template-columns: 1fr; }
  .h-split--rev > :first-child { order: 2; }
  .trust { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 1fr; }
  .paper { transform: none; }
}

/* ---- Smartphone ---- */
@media (max-width: 700px) {
  .h-hero { text-align: left; }
  .h-hero .h-ctas { justify-content: flex-start; }
  .h-hero__lead { margin: 0; }
  .h-ctas .btn { width: 100%; justify-content: center; }
  .h-trialnote span { white-space: normal; }

  .appx__body { max-height: 680px; }
  .appx__body--short { max-height: 480px; }
  .appx__msg { padding: 18px; font-size: .95rem; }
  .appx__link { margin-left: 0; }
  .appv__notes { justify-content: flex-start; flex-direction: column; gap: 8px; }
  .app__crumb .app__crumb-extra { display: none; }

  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before { display: none; }
  .step:not(:last-child)::after { content: ''; position: absolute; left: 35px; top: 72px; bottom: -36px; width: 1px;
    background: linear-gradient(180deg, rgba(96,165,250,.55), rgba(34,211,238,.55)); }
  .step { text-align: left; display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; }
  .step__icon { margin: 0; grid-row: span 3; }
  .step p { margin: 0; max-width: none; }
  .h-case__lage { text-align: left; margin-left: 0; }
  .h-root__more { text-align: left; }

  .hub__row { grid-template-columns: 1fr; gap: 12px; }
  .hub__flow { display: none; }
  .hub__vline { display: block; width: 1px; height: 56px; margin: 0 auto; background: linear-gradient(180deg, rgba(96,165,250,0), rgba(96,165,250,.7)); }
  .hub__vline--out { background: linear-gradient(180deg, rgba(167,139,250,.7), rgba(167,139,250,0)); }
  .hub__core { width: min(320px, 80vw); margin: 34px auto; }
  .hub__half, .hub__half--expert { padding: 0 8%; }
  .hub__k { font-size: 1.15rem; }
  .hub__ring--b { display: none; }
  .hub__seam { margin-top: 20px; }

  .h-head--center { text-align: left; }
  .h-case .h-lede { text-align: left; }
  .flow4 { grid-template-columns: 1fr; }
  .flow4 li::after { display: none; }
  .ws__split { grid-template-columns: 1fr; }
  .ws__panel { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .ws-side { flex-direction: column; }
  .tiles6 { grid-template-columns: 1fr; }
  .cycle { grid-template-columns: 1fr; }
  .work4 { grid-template-columns: 1fr; }
  .tl4 { grid-template-columns: 1fr; gap: 18px; max-width: none; }
  .tl4::before { left: 9px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--case), #60a5fa 66%, rgba(96,165,250,.15)); }
  .tl4 li { flex-direction: row; align-items: baseline; text-align: left; gap: 10px; }
  .tl4__dot { margin: 0; flex-shrink: 0; align-self: center; }
  .dsv__tabs span:nth-child(n+4) { display: none; }
  .dsv__menu { position: static; margin: 8px 0 0; width: 100%; }
  .dsv__bar { flex-wrap: wrap; }
  .sys-center { text-align: left; }
  .sys-detail .container { text-align: left; }
  .layer--person, .layer--inst, .layer--global { margin-left: 0; }
  .h-final { text-align: left; }
  .h-final .h-text { margin-left: 0; }
}

/* ---- Kapitel 1 · Aus Ihrem Gespräch wird eine Arbeitsgrundlage ---- */
.flow3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.flow3__item { display: flex; flex-direction: column; min-width: 0; }
.flow3__step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; color: var(--color-white); font-size: 1.02rem; }
.flow3__step span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #1d3454; border: 1px solid #234673; color: #60a5fa; font-size: .8rem; }
.flow3__view { min-height: 300px; }
.flow3 .dsv { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); padding-bottom: 4px; }
.flow3 .dsv__rows { margin-top: 14px; }
.flow3 .rv { padding: 20px 18px 16px; }
.flow3 .rv__title { font-size: 1.05rem; }
.flow3 .rv__text { max-height: 170px; }
.flow3__note { margin: 14px 0 0; color: var(--color-text); font-size: .95rem; line-height: 1.6; }
.flow3__more { margin: 8px 0 0; color: var(--color-muted); font-size: .9rem; line-height: 1.55; }
.flow3__alt { max-width: 760px; margin: 36px auto 0; text-align: center; color: var(--color-text); font-size: 1.02rem; line-height: 1.6; }
.flow3__alt b { color: var(--color-white); }
.flow3__cap { text-align: center; margin-top: 14px; }
.trx { background: #111620; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px 18px 8px; font-family: 'Karla', var(--font-sans); }
.trx__head { font-size: .78rem; font-weight: 600; letter-spacing: .03em; color: #8fb3e8; margin-bottom: 12px; }
.trx p { margin: 0 0 10px; font-size: .92rem; line-height: 1.6; color: #e8ecef; }
.trx b { color: #fff; font-weight: 600; }

/* ---- Kapitel 2 · drei Sitzungen + Fachbibliothek ---- */
.cases3 { list-style: none; margin: 0 auto 30px; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cases3 li { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--case); }
.cases3__d { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #8fb3e8; margin-bottom: 6px; }
.cases3 q { display: block; font-style: italic; color: var(--color-text); font-size: .95rem; line-height: 1.5; quotes: '«' '»'; }
.cases3 li.cases3__lib { border: 1px dashed rgba(167,139,250,.5); border-left: 3px solid #a78bfa; background: rgba(167,139,250,.07); }
.cases3__lib .cases3__d { color: #c4b5fd; }
.cases3__lib > span:last-child { color: var(--color-text); font-size: .95rem; line-height: 1.5; }
.ans4__title { margin: 0 0 12px; font-weight: 700; color: var(--color-white); font-size: 1.05rem; line-height: 1.4; }
.ask4 { max-width: 1140px; margin: 30px auto 0; padding: 18px 22px; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); }
.ask4__h { margin: 0 0 10px; font-weight: 600; color: var(--color-white); }
.ask4 ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.ask4 li { position: relative; padding-left: 18px; color: var(--color-text); font-size: .95rem; line-height: 1.55; }
.ask4 li::before { content: '›'; position: absolute; left: 2px; color: #60a5fa; font-weight: 700; }
@media (max-width: 900px) {
  .flow3 { grid-template-columns: 1fr; gap: 40px; }
  .flow3__view { min-height: 0; }
  .cases3 { grid-template-columns: 1fr 1fr; }
  .ask4 ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cases3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Kapitel 3 (pw 25.10.): PDF, Word und Online-Formular im Aufbau der App —
   Navigation links, Chat in der Mitte, Arbeitsbereich rechts mit Reitern oben
   ============================================================ */
.fmt { margin: 0; }
.fmt__r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fmt__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.fmt__tab { cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.fmt__tab:hover { color: var(--color-white); }
#fmt-pdf:checked ~ .fmt__tabs .fmt__tab--pdf, #fmt-word:checked ~ .fmt__tabs .fmt__tab--word, #fmt-web:checked ~ .fmt__tabs .fmt__tab--web, #fmt-vorlage:checked ~ .fmt__tabs .fmt__tab--vorlage { background: #2563eb; border-color: #2563eb; color: #fff; }
#fmt-pdf:focus-visible ~ .fmt__tabs .fmt__tab--pdf, #fmt-word:focus-visible ~ .fmt__tabs .fmt__tab--word, #fmt-web:focus-visible ~ .fmt__tabs .fmt__tab--web, #fmt-vorlage:focus-visible ~ .fmt__tabs .fmt__tab--vorlage { outline: 2px solid #4da3ff; outline-offset: 3px; }
.fmt__soon { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: rgba(251,191,36,.18); color: var(--warn); }
.fmt__panel { display: none; }
#fmt-pdf:checked ~ .fmt__panels .fmt__panel--pdf, #fmt-word:checked ~ .fmt__panels .fmt__panel--word, #fmt-web:checked ~ .fmt__panels .fmt__panel--web, #fmt-vorlage:checked ~ .fmt__panels .fmt__panel--vorlage { display: block; }
.fmt__ctas { margin-top: 18px; }
.fmt > .h-caption { margin-top: 18px; }
/* Expertise §04: Darstellung im App-Layout mit dem echten, fertig ausgefüllten PDF (E2) */
.xp-shot { margin: 36px auto 0; max-width: 1120px; }
.xp-shot > .ax-shot { display: block; }
.ax__page--pdf { position: relative; max-height: 640px; }
.ax__page--pdf img { display: block; width: 100%; height: auto; }
.ax__page--pdf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(255,255,255,0), #fff); }
.ax-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
/* System 01: »Vier Wege ins Dossier« (4 Spalten) — nie breiter als die Spalte; am Handy kleiner, notfalls wischbar statt abgeschnitten */
.ways { min-width: 0; max-width: 100%; margin: 0; padding: 18px 20px 14px; border-radius: 16px; background: #0f1524; border: 1px solid var(--line); }
.ways__h { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fefefe; }
.ways__t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .92rem; line-height: 1.4; }
.ways__t th, .ways__t td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ways__t thead th { padding-top: 0; font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--color-muted); border-bottom-color: rgba(255,255,255,.16); }
.ways__t thead th:first-child { width: 27%; }
.ways__t tbody th { font-weight: 600; color: #f3f6fb; }
.ways__t tbody td { color: #cfd8ea; }
.ways__t tbody tr:last-child > * { border-bottom: 0; }
.ways .h-caption { margin: 8px 0 0; text-align: left; }
/* Am Handy je Weg ein Block: Bezeichnung links, Wert rechts — vier Spalten passen in 345 px nicht lesbar */
@media (max-width: 560px) {
  .ways { padding: 16px 16px 12px; }
  .ways__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ways__t, .ways__t tbody, .ways__t tr, .ways__t th, .ways__t td { display: block; width: auto; }
  .ways__t tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .ways__t tbody tr:last-child { border-bottom: 0; }
  .ways__t th, .ways__t td { padding: 2px 0; border: 0; }
  .ways__t tbody th { margin-bottom: 4px; }
  .ways__t td { display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .ways__t td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; color: var(--color-muted); }
}

.ax { display: grid; grid-template-columns: 150px minmax(0, .9fr) minmax(0, 1.3fr); min-height: 560px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.45); background: #0b0f17; font-family: 'Karla', var(--font-sans); font-size: 13px; color: #e8ecef; }
.ax__nav { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px; background: #0b0f17; color: #c3cad6; font-size: 12.5px; }
.ax__logo { font-size: 26px; font-weight: 400; color: #fff; letter-spacing: -.5px; margin-bottom: 10px; }
.ax__logo i { font-style: italic; }
.ax__chat { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: #111620; border-left: 1px solid rgba(255,255,255,.04); }
.ax__chead { display: flex; align-items: baseline; gap: 8px; }
.ax__chead b { font-size: 17px; color: #fff; }
.ax__chead span { color: #0084ff; font-style: italic; }
.ax__chead em { margin-left: auto; font-style: normal; color: #0084ff; font-size: 12px; }
.ax__msg { background: #161d2e; border-radius: 14px; padding: 14px 16px; line-height: 1.6; }
.ax__msg p { margin: 6px 0 0; }
.ax__comp { margin-top: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px 14px; font-size: 12px; color: #e8ecef; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ax__comp i { flex-basis: 100%; font-style: normal; color: #6c7275; font-size: 13px; margin-top: 10px; }
.ax__chk { width: 13px; height: 13px; border: 1px solid #6c7275; border-radius: 3px; }
.ax__ws { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; background: #111620; border-left: 1px solid rgba(255,255,255,.08); min-width: 0; }
.ax__tabs { display: flex; gap: 18px; padding: 14px 0 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #8d9bb8; font-size: 12.5px; }
.ax__tabs span { padding-bottom: 9px; }
.ax__tabs .on { color: #fff; border-bottom: 2px solid #0084ff; }
.ax__tabs i { font-style: normal; color: #6c7275; margin-left: 4px; }
.ax__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ax__mode { display: inline-flex; gap: 4px; align-items: center; }
.ax__mode span { padding: 5px 10px; color: #fff; font-weight: 600; font-size: 12px; }
.ax__mode b { padding: 5px 10px; border: 1px solid #0084ff; border-radius: 8px; color: #4da3ff; font-size: 12px; }
.ax__save { margin-left: auto; display: inline-flex; gap: 12px; font-size: 12px; font-weight: 600; color: #fff; }
.ax__meta { color: #8d9bb8; font-size: 12px; }
.ax__fill { align-self: flex-start; padding: 6px 12px; border: 1px solid rgba(0,132,255,.6); border-radius: 8px; color: #4da3ff; font-size: 12px; font-weight: 600; }
.ax__demo { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(251,191,36,.16); color: var(--warn); }
.ax__page { margin-top: 6px; background: #fff; color: #1e293b; border-radius: 2px; flex: 1; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.ax__doc { padding: 18px 22px; font-size: 11.5px; line-height: 1.45; }
.ax__dh { color: #1f4e79; font-weight: 700; font-size: 13px; }
.ax__dt { font-weight: 700; font-size: 16px; color: #0f172a; margin: 6px 0 12px; }
.ax__f { margin-bottom: 10px; }
.ax__f > span { display: block; font-weight: 700; font-size: 11px; color: #334155; margin-bottom: 3px; }
.ax__f > div { position: relative; border: 1px solid #94a3b8; padding: 6px 8px; min-height: 24px; color: #0f172a; }
.ax__f--ki > div { border: 2px solid #3b82f6; background: #eef4ff; }
.ax__f--leer > div { border: 2px solid #3b82f6; background: #fff; min-height: 32px; }
.ax__hint { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: #b45309; }
.ax__hint::before { content: '⚠ '; }
.ax__br { display: flex; flex-direction: column; height: 100%; background: #dfe5ee; }
.ax__url { margin: 8px; padding: 5px 10px; border-radius: 999px; background: #fff; color: #475569; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax__portal { margin: 0 8px 8px; background: #fff; border-radius: 6px; overflow: hidden; }
.ax__ph { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #0f766e; color: #fff; font-size: 12px; }
.ax__ph span { width: 14px; height: 14px; border-radius: 3px; background: #5eead4; }
.ax__ph nav { margin-left: auto; font-size: 11px; opacity: .9; }
.ax__pb { padding: 12px 14px; font-size: 11.5px; line-height: 1.45; }
.ax__pt { font-weight: 700; font-size: 14px; color: #0f172a; }
.ax__ps { margin: 2px 0 10px; color: #0f766e; font-weight: 600; font-size: 11px; }
.ax__pb .ax__f--ki > div { border: 2px dashed #3b82f6; border-radius: 5px; }
.ax__pb .ax__f--leer > div { border: 2px dashed #3b82f6; border-radius: 5px; }
.ax__pbtn { display: flex; justify-content: flex-end; gap: 8px; }
.ax__pbtn span, .ax__pbtn b { padding: 6px 12px; border-radius: 5px; font-size: 11px; }
.ax__pbtn span { border: 1px solid #0f766e; color: #0f766e; }
.ax__pbtn b { background: #0f766e; color: #fff; }
@media (max-width: 900px) {
  .ax { grid-template-columns: 1fr; }
  .ax__nav { display: none; }
  .ax__ws { order: 1; border-left: none; }
  .ax__chat { order: 2; }
}
/* Online-Formular: Browser-Rahmen (Reiterleiste, Navigation, Adressleiste) */
.ax__br { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(15,23,42,.25); }
.bw__tabs { display: flex; align-items: flex-end; gap: 4px; padding: 7px 8px 0; background: #dee1e6; }
.bw__tab { display: inline-flex; align-items: center; gap: 7px; max-width: 78%; padding: 7px 10px; border-radius: 9px 9px 0 0; background: #fff; color: #1f2937; font-size: 11px; white-space: nowrap; overflow: hidden; }
.bw__tab b { margin-left: 6px; font-weight: 400; color: #6b7280; }
.bw__fav { width: 12px; height: 12px; border-radius: 3px; background: #0f766e; flex-shrink: 0; }
.bw__new { padding: 0 8px 6px; color: #4b5563; font-size: 14px; }
.bw__bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.bw__nav { width: 22px; text-align: center; color: #6b7280; font-size: 13px; }
.bw__omni { flex: 1; display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #f1f3f4; color: #111827; font-size: 11px; white-space: nowrap; overflow: hidden; min-width: 0; }
.bw__omni em { font-style: normal; color: #6b7280; overflow: hidden; text-overflow: ellipsis; }
.bw__lock { width: 9px; height: 10px; border: 1.5px solid #4b5563; border-radius: 2px; position: relative; flex-shrink: 0; }
.ax__br .ax__portal { margin: 0; border-radius: 0; }
.ax__msg--q { align-self: flex-end; max-width: 85%; background: #1f2a40; }
.ax__chk--on { background: #0084ff; border-color: #0084ff; color: #fff; font-size: 9px; line-height: 13px; text-align: center; }
.ax__msg--a { font-size: 12.5px; }
.ax__msg--a p { margin: 6px 0 0; }
.ax__gap { display: block; color: #6c7275; margin-bottom: 4px; }

/* ==== Patienteninformation (Seite und Vertraulichkeit 06) ==== */
.pi-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.pi-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.pi-weg { padding: 28px 26px; border-radius: 20px; background: var(--color-bg2); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.pi-weg__kopf { display: flex; align-items: center; gap: 12px; color: #a5f3fc; }
.pi-weg__kopf b { color: var(--color-white); font-size: 1.12rem; }
.pi-weg p { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: .96rem; }
.pi-weg ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.pi-weg li { display: flex; gap: 10px; font-size: .9rem; color: var(--color-muted); line-height: 1.5; }
.pi-weg li b { color: var(--color-white); font-weight: 600; }
.pi-weg li::before { content: '✓'; color: #34d399; font-weight: 800; }
.pi-blaetter { position: relative; aspect-ratio: 1 / 1; }
.pi-blaetter a { position: absolute; display: block; width: 62%; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); transition: transform .25s; }
.pi-blaetter a:hover { transform: translateY(-4px) rotate(0deg) !important; }
.pi-blaetter a img { display: block; width: 100%; height: auto; }
.pi-blaetter a:first-child { left: 0; top: 0; transform: rotate(-2.5deg); z-index: 2; }
.pi-blaetter a:last-child { right: 0; top: 9%; transform: rotate(2.5deg); z-index: 1; }
.tiles6 a.tiles6__ganz { grid-column: 1 / -1; background: rgba(34,211,238,.06); border-color: rgba(34,211,238,.3); }
@media (max-width: 1000px) {
  .pi-wege { grid-template-columns: minmax(0, 1fr); }
}

.ax__page--who { position: relative; }
.ax__page--who .ax__who { position: absolute; z-index: 1; right: 4%; bottom: 7%; width: 62% !important; height: auto; border-radius: 6px; box-shadow: 0 18px 40px -12px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.12); background: #fff; }

.appx__tipp { display: flex; gap: 5px; align-items: center; width: max-content; padding: 12px 16px; }
.appx__tipp span { width: 7px; height: 7px; border-radius: 50%; background: var(--case); opacity: .3; animation: appxTipp 1.2s infinite ease-in-out; }
.appx__tipp span:nth-child(2) { animation-delay: .2s; } .appx__tipp span:nth-child(3) { animation-delay: .4s; }
@keyframes appxTipp { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .appx__tipp span { animation: none; opacity: .6; } }