/* Station pages */
.station-hero {
  min-height: 60vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 120px 60px 80px;
  gap: 60px;
}

.station-hero-img {
  max-width: 400px;
  width: 100%;
}

.station-blue .station-hero-img,
.station-copper .station-hero-img {
  max-width: 540px;
}

.station-overline {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.station-title {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 400;
  color: var(--text-headline);
  margin-bottom: 16px;
}

.station-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--text-muted);
}

.station-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.station-content h2 {
  font-size: 28px;
  margin-bottom: 24px;
}

.station-content p {
  margin-bottom: 20px;
  line-height: 1.7;
}

.principle-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.p-step {
  padding: 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
}

.p-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.p-step strong {
  display: block;
  margin-bottom: 6px;
}

/* Farben pro Stufe */
.p-step--blue {
  background: rgba(110, 145, 180, 0.06);
  border: 1px solid rgba(110, 145, 180, 0.1);
}
.p-step--blue:hover { border-color: rgba(110, 145, 180, 0.3); }
.p-step--blue strong { color: var(--blue-clarity); }

.p-step--purple {
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.1);
}
.p-step--purple:hover { border-color: rgba(139, 92, 246, 0.3); }
.p-step--purple strong { color: #8B5CF6; }

.p-step--green {
  background: rgba(110, 180, 140, 0.05);
  border: 1px solid rgba(110, 180, 140, 0.1);
}
.p-step--green:hover { border-color: rgba(110, 180, 140, 0.3); }
.p-step--green strong { color: var(--green-accent); }

.p-step--coral {
  background: rgba(160, 85, 95, 0.05);
  border: 1px solid rgba(160, 85, 95, 0.1);
}
.p-step--coral:hover { border-color: rgba(160, 85, 95, 0.3); }
.p-step--coral strong { color: var(--red-coral); }
}

.accent-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--text-headline);
  margin-top: 32px;
  margin-bottom: 0;
}

/* Abstand für Espresso-CTA auf Stationsseiten */
.station-espresso {
  margin-top: 128px;
}

/* ================================
   Station 2: AI-First Modul (richtung.html)
   ================================ */

.station.station-purple .station-content {
  max-width: 980px;
}

.ai-intro {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 24px 56px;
  align-items: start;
  margin-bottom: 64px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(110, 145, 180, 0.1);
}

.ai-intro-overline {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--warm-copper);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ai-intro-heading {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-headline);
}

.ai-intro-text {
  font-size: 15.5px;
  color: var(--text-body);
  line-height: 1.72;
  padding-top: 6px;
}

.ex-selector-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(160, 185, 215, 0.28);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ex-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 56px;
}

.ex-card {
  background: var(--bg-card);
  border: 1px solid rgba(110, 145, 180, 0.1);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
}

.ex-card:hover {
  background: var(--bg-elevated);
  border-color: rgba(110, 145, 180, 0.2);
}

.ex-card[data-ex="eu"].active {
  border-color: var(--blue-clarity);
  background: rgba(110, 145, 180, 0.06);
  box-shadow: 0 0 0 1px var(--blue-clarity), 0 0 20px rgba(110, 145, 180, 0.08);
}

.ex-card[data-ex="zulieferer"].active {
  border-color: var(--red-coral);
  background: rgba(224, 123, 106, 0.06);
  box-shadow: 0 0 0 1px var(--red-coral), 0 0 20px rgba(224, 123, 106, 0.08);
}

.ex-card[data-ex="gesellschafter"].active {
  border-color: var(--green-accent);
  background: rgba(63, 168, 138, 0.06);
  box-shadow: 0 0 0 1px var(--green-accent), 0 0 20px rgba(63, 168, 138, 0.08);
}

.ex-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 10px;
  transition: background 0.22s, color 0.22s;
}

.ex-card[data-ex="eu"] .ex-pill { background: rgba(110, 145, 180, 0.15); color: var(--blue-clarity); }
.ex-card[data-ex="zulieferer"] .ex-pill { background: rgba(224, 123, 106, 0.15); color: var(--red-coral); }
.ex-card[data-ex="gesellschafter"] .ex-pill { background: rgba(63, 168, 138, 0.15); color: var(--green-accent); }
.ex-card[data-ex="eu"].active .ex-pill { background: var(--blue-clarity); color: #fff; }
.ex-card[data-ex="zulieferer"].active .ex-pill { background: var(--red-coral); color: #fff; }
.ex-card[data-ex="gesellschafter"].active .ex-pill { background: var(--green-accent); color: #fff; }

.ex-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-headline);
  margin-bottom: 4px;
  line-height: 1.3;
}

.ex-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.ai-content-grid {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 32px;
  align-items: start;
}

.step-wrap {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.38s ease, transform 0.38s ease;
  pointer-events: none;
}

.step-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.step-card {
  border: 1px solid rgba(110, 145, 180, 0.1);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

.step-card[data-step="1"] { border-color: rgba(170, 125, 85, 0.28); }
.step-card[data-step="2"] { border-color: rgba(110, 145, 180, 0.22); }
.step-card[data-step="3"] { border-color: rgba(63, 168, 138, 0.22); }
.step-card[data-step="4"] { border-color: rgba(63, 168, 138, 0.22); }

.step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 24px 20px;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.step-card[data-step="1"] .step-num { background: rgba(170, 125, 85, 0.15); color: var(--warm-copper); }
.step-card[data-step="2"] .step-num { background: rgba(110, 145, 180, 0.15); color: var(--blue-clarity); }
.step-card[data-step="3"] .step-num { background: rgba(63, 168, 138, 0.15); color: var(--green-accent); }
.step-card[data-step="4"] .step-num { background: rgba(63, 168, 138, 0.15); color: var(--green-accent); }

.step-name {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-headline);
}

.step-tagline {
  margin-left: auto;
  font-size: 11px;
  color: rgba(160, 185, 215, 0.28);
  font-style: italic;
  white-space: nowrap;
}

.step-body {
  padding: 0 24px 24px;
  border-top: 1px solid rgba(110, 145, 180, 0.1);
}

.step-desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.68;
  padding-top: 18px;
}

.step-situation {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.step-situation .sit-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(160, 185, 215, 0.28);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.impulse-block {
  margin-top: 14px;
  opacity: 0;
}

.impulse-block.play {
  animation: impBlockIn 0.3s ease forwards;
}

@keyframes impBlockIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.imp-question {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(160, 185, 215, 0.28);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.imp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.55;
  opacity: 0;
}

.imp-row--old {
  background: rgba(180, 55, 55, 0.09);
  border: 1px solid rgba(180, 55, 55, 0.12);
}

.imp-row--new {
  background: rgba(55, 160, 90, 0.09);
  border: 1px solid rgba(55, 160, 90, 0.14);
}

.impulse-block.play .imp-row--old {
  animation: impFadeUp 0.35s ease 0.1s forwards;
}

.impulse-block.play .imp-row--new {
  animation: impFadeUp 0.35s ease 0.55s forwards;
}

@keyframes impFadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.imp-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 1px;
}

.imp-row--old .imp-tag { background: rgba(180, 55, 55, 0.2); color: rgba(220, 120, 120, 0.9); }
.imp-row--new .imp-tag { background: rgba(55, 160, 90, 0.2); color: rgba(100, 200, 130, 0.9); }
.imp-text { color: var(--text-body); }

.step-continue {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(110, 145, 180, 0.08);
}

.continue-hint {
  font-size: 12px;
  color: rgba(160, 185, 215, 0.4);
  font-style: italic;
}

.btn-next {
  background: none;
  border: 1px solid rgba(110, 145, 180, 0.2);
  border-radius: 8px;
  color: var(--text-body);
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: inherit;
}

.btn-next:hover {
  background: rgba(110, 145, 180, 0.08);
  border-color: rgba(110, 145, 180, 0.4);
}

.step-final-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(110, 145, 180, 0.08);
  font-size: 13px;
  color: rgba(160, 185, 215, 0.45);
  font-style: italic;
  line-height: 1.6;
}

.step-connector {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}

.step-connector.visible { display: flex; }

.connector-line {
  width: 1px;
  height: 24px;
  background: rgba(110, 145, 180, 0.15);
}

.connector-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(110, 145, 180, 0.2);
}

.depth-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  position: sticky;
  top: 80px;
}

.depth-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(160, 185, 215, 0.28);
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 80px;
}

.depth-tube-outer {
  width: 28px;
  height: 320px;
  border: 1px solid rgba(110, 145, 180, 0.18);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: rgba(110, 145, 180, 0.03);
}

.depth-tube-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(to top, rgb(170, 125, 85), rgb(170, 125, 85));
  border-radius: 0 0 8px 8px;
  transition: height 0.6s ease, background 0.6s ease, border-radius 0.4s ease;
}

.depth-marker {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: rgba(110, 145, 180, 0.15);
}

.depth-marker[data-at="25"] { bottom: 25%; }
.depth-marker[data-at="50"] { bottom: 50%; }
.depth-marker[data-at="75"] { bottom: 75%; }

.depth-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(110, 145, 180, 0.2);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.depth-dot[data-step="1"] { bottom: 15%; }
.depth-dot[data-step="2"] { bottom: 38%; }
.depth-dot[data-step="3"] { bottom: 62%; }
.depth-dot[data-step="4"] { bottom: 85%; }

.depth-dot.on {
  background: rgba(110, 145, 180, 0.6);
  border-color: rgba(160, 195, 230, 0.5);
  box-shadow: 0 0 6px rgba(110, 145, 180, 0.4);
}

.ai-accent-quote {
  margin-top: 56px;
  padding-left: 20px;
  border-left: 2px solid rgba(170, 125, 85, 0.28);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: rgba(200, 220, 240, 0.52);
  line-height: 1.6;
  max-width: 580px;
}

.dual-function {
  margin-top: 36px;
  padding: 20px 24px;
  background: rgba(170, 125, 85, 0.04);
  border: 1px solid rgba(170, 125, 85, 0.12);
  border-left: 3px solid rgba(170, 125, 85, 0.35);
  border-radius: 0 10px 10px 0;
  max-width: 620px;
}

.dual-function-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(170, 125, 85, 0.6);
  margin-bottom: 10px;
}

.dual-function-text {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.7;
}

@media (max-width: 680px) {
  .ai-intro {
    grid-template-columns: 1fr;
    gap: 12px 0;
  }

  .ex-selector {
    grid-template-columns: 1fr;
  }

  .ai-content-grid {
    grid-template-columns: 1fr;
  }

  .depth-col {
    display: none;
  }

  .step-tagline {
    display: none;
  }
}

/* ================================
   Szenario-Switcher (aufbruch.html)
   ================================ */

.scenario-section {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(110, 145, 180, 0.08);
}

.scenario-section h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-headline);
  margin-bottom: 32px;
}

.sc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(110, 145, 180, 0.15);
  background: rgba(21, 29, 40, 0.7);
  color: rgba(200, 220, 240, 0.8);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sc-tab .tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sc-tab.active {
  background: rgba(110, 145, 180, 0.18);
  border-color: rgba(110, 145, 180, 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.sc-tab.bonus {
  border-style: dashed;
  border-color: rgba(225, 185, 145, 0.4);
}

.sc-tab.bonus.active {
  background: rgba(225, 185, 145, 0.16);
  border-color: rgba(225, 185, 145, 0.75);
  color: #fff;
}

@keyframes tab-breathe {
  0%, 100% { border-color: rgba(110, 145, 180, 0.06); }
  50% { border-color: rgba(110, 145, 180, 0.12); }
}

.sc-tab:not(.active) {
  animation: tab-breathe 4s ease-in-out infinite;
}

.sc-tab:nth-child(2):not(.active) { animation-delay: 1s; }
.sc-tab:nth-child(3):not(.active) { animation-delay: 2s; }
.sc-tab:nth-child(4):not(.active) { animation-delay: 3s; }

.sc-panel {
  display: none;
  animation: panelIn 0.35s ease;
}

.sc-panel.active { display: block; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.situation-box {
  background: var(--bg-base, #121820);
  border: 1px solid rgba(110, 145, 180, 0.08);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.sit-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-top: 2px;
}

.sit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(160, 185, 215, 0.3);
  margin-bottom: 0.4rem;
}

.sit-text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(200, 220, 240, 0.9);
  line-height: 1.4;
}

.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1rem;
}

.path {
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  background: rgba(18, 24, 32, 0.9);
  border: 1px solid rgba(110, 145, 180, 0.12);
}

.path-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 185, 215, 0.55);
  margin-bottom: 0.35rem;
}

.path-action {
  font-size: 14px;
  font-weight: 500;
  color: rgba(225, 230, 240, 0.95);
  margin-bottom: 0.4rem;
}

.path-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: rgba(185, 205, 225, 0.9);
  line-height: 1.5;
}

.path-steps li + li {
  margin-top: 0.25rem;
}

.result-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0.8rem;
}

.rb-item {
  background: rgba(18, 24, 32, 0.9);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(110, 145, 180, 0.12);
}

.rb-tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 185, 215, 0.6);
  margin-bottom: 0.35rem;
}

.rb-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(50, 60, 80, 0.9);
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.rb-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(110, 145, 180, 0.2), rgba(225, 185, 145, 0.7));
  transition: width 0.7s ease;
}

.rb-time {
  font-size: 12px;
  color: rgba(200, 220, 240, 0.9);
}

.insight {
  font-size: 13px;
  color: rgba(190, 210, 230, 0.9);
  background: rgba(18, 24, 32, 0.9);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(110, 145, 180, 0.2);
}

.bonus-flow {
  margin-top: 0.8rem;
  padding: 0.85rem 1rem;
  background: rgba(21, 29, 40, 0.9);
  border-radius: 10px;
  border: 1px solid rgba(225, 185, 145, 0.25);
}

.bonus-chain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(225, 185, 145, 0.85);
  margin-bottom: 0.4rem;
}

.chain-step {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(225, 185, 145, 0.4);
}

.chain-step.done {
  background: rgba(225, 185, 145, 0.18);
}

.chain-arrow {
  font-size: 12px;
}

.bonus-punchline {
  font-size: 13px;
  color: rgba(225, 230, 240, 0.95);
}

.bonus-sub {
  font-size: 12px;
  color: rgba(200, 210, 225, 0.8);
  margin-top: 2px;
}

@media (max-width: 720px) {
  .paths {
    grid-template-columns: 1fr;
  }

  .result-bar {
    grid-template-columns: 1fr;
  }
}

.station-nav-footer {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 32px 24px;
  border-top: 1px solid rgba(110, 145, 180, 0.1);
}

.station-nav-footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.station-nav-footer a:hover {
  color: var(--text-body);
}

.sidebar-card.active {
  opacity: 1;
  border-width: 2px;
}

/* Station content blocks */
.station-block {
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(110, 145, 180, 0.1);
}

.station-block:first-of-type {
  border-top: none;
}

.station-block h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.scenario-intro .accent-quote {
  margin-top: 16px !important;
}

.challenge-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.challenge-headline {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-headline);
  margin-bottom: 12px;
}

/* Knowledge fields */
.knowledge-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.knowledge-field {
  padding: 20px;
  background: rgba(110, 145, 180, 0.06);
  border-radius: 8px;
}

.knowledge-field h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.knowledge-field p {
  font-size: 14px;
  margin: 0;
  color: var(--text-muted);
}

/* Product list */
.product-list {
  display: grid;
  gap: 20px;
}

.product-item {
  padding: 20px;
  background: rgba(110, 145, 180, 0.04);
  border: 1px solid rgba(110, 145, 180, 0.1);
  border-radius: 8px;
}

.product-item h3 {
  margin-top: 0;
}

/* Timeline steps */
.timeline-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-step {
  padding: 16px 20px;
  background: rgba(110, 180, 140, 0.06);
  border-left: 3px solid rgba(110, 180, 140, 0.4);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
}

/* Comparison */
.comparison-simple p {
  margin: 8px 0;
  padding: 12px;
  background: rgba(110, 145, 180, 0.04);
  border-radius: 4px;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.team-card {
  padding: 24px;
  background: rgba(170, 125, 85, 0.06);
  border: 1px solid rgba(170, 125, 85, 0.15);
  border-radius: 12px;
}

.team-card--ai {
  border-color: rgba(225, 185, 145, 0.3);
}

.team-ai-badge {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm-highlight);
  margin-bottom: 8px;
}

.team-name {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 4px;
}

.team-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.team-card p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* ================================
   Testimonial-Sektion „Aus der Praxis“
   ================================ */

#praxis {
  margin: 168px 0 40px;
}

#praxis .testimonial-section {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

/* Herald – Illustration + Glaspanel */
#praxis .herald {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(20px);
  animation: praxisFadeInUp 0.9s ease 0.1s forwards;
}

#praxis .herald-illustration {
  flex-shrink: 0;
  width: 180px;
  background: #000;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

#praxis .herald-illustration::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(170, 125, 85, 0.03) 0px,
      rgba(170, 125, 85, 0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(170, 125, 85, 0.03) 0px,
      rgba(170, 125, 85, 0.03) 1px,
      transparent 1px,
      transparent 12px
    );
  pointer-events: none;
  z-index: 1;
}

#praxis .herald-illustration img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: invert(1) sepia(1) saturate(1.5) hue-rotate(5deg) brightness(0.85);
}

#praxis .herald-text {
  flex: 1;
  background: rgba(170, 125, 85, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 225, 225, 0.05);
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#praxis .herald-overline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--warm-copper, #AA7D55);
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  display: block;
  opacity: 0.7;
}

#praxis .herald-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--text-headline);
  line-height: 1.25;
  margin-bottom: 14px;
}

#praxis .herald-subline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Tag-Navigation */
#praxis .tag-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  justify-content: flex-start;
}

#praxis .tag-nav-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
  background: transparent;
  text-decoration: none;
}

#praxis .tag-nav-chip[data-color="copper"] {
  color: #AA7D55;
  border-color: rgba(170, 125, 85, 0.2);
}

#praxis .tag-nav-chip[data-color="copper"]:hover,
#praxis .tag-nav-chip[data-color="copper"].active {
  background: rgba(170, 125, 85, 0.1);
  border-color: rgba(170, 125, 85, 0.4);
}

#praxis .tag-nav-chip[data-color="steel"] {
  color: #6E91B4;
  border-color: rgba(110, 145, 180, 0.2);
}

#praxis .tag-nav-chip[data-color="steel"]:hover,
#praxis .tag-nav-chip[data-color="steel"].active {
  background: rgba(110, 145, 180, 0.1);
  border-color: rgba(110, 145, 180, 0.4);
}

#praxis .tag-nav-chip[data-color="blue"] {
  color: #3B82F6;
  border-color: rgba(59, 130, 246, 0.2);
}

#praxis .tag-nav-chip[data-color="blue"]:hover,
#praxis .tag-nav-chip[data-color="blue"].active {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
}

#praxis .tag-nav-chip[data-color="green"] {
  color: #6EB48C;
  border-color: rgba(110, 180, 140, 0.2);
}

#praxis .tag-nav-chip[data-color="green"]:hover,
#praxis .tag-nav-chip[data-color="green"].active {
  background: rgba(110, 180, 140, 0.1);
  border-color: rgba(110, 180, 140, 0.4);
}

#praxis .tag-nav-chip[data-color="coral"] {
  color: #A0555F;
  border-color: rgba(160, 85, 95, 0.2);
}

#praxis .tag-nav-chip[data-color="coral"]:hover,
#praxis .tag-nav-chip[data-color="coral"].active {
  background: rgba(160, 85, 95, 0.1);
  border-color: rgba(160, 85, 95, 0.4);
}

#praxis .tag-nav-chip.placeholder {
  opacity: 0.35;
}

#praxis .tag-nav-chip.placeholder:hover {
  opacity: 0.5;
}

/* Testimonial-Stack */
#praxis .testimonial-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#praxis .testimonial-card {
  background: rgba(170, 125, 85, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(225, 225, 225, 0.05);
  border-radius: 10px;
  overflow: hidden;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.3s ease;
  opacity: 0;
  transform: translateY(35px);
}

#praxis .testimonial-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

#praxis .testimonial-card:nth-child(1).visible { transition-delay: 0s; }
#praxis .testimonial-card:nth-child(2).visible { transition-delay: 0.1s; }
#praxis .testimonial-card:nth-child(3).visible { transition-delay: 0.2s; }
#praxis .testimonial-card:nth-child(4).visible { transition-delay: 0.3s; }
#praxis .testimonial-card:nth-child(5).visible { transition-delay: 0.4s; }

#praxis .testimonial-card:hover {
  background: rgba(170, 125, 85, 0.06);
  border-color: rgba(170, 125, 85, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

#praxis .testimonial-card.open {
  background: rgba(170, 125, 85, 0.08);
  border-color: rgba(170, 125, 85, 0.18);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(225, 225, 225, 0.02);
}

#praxis .testimonial-visible {
  display: flex;
  gap: 20px;
  padding: 24px 28px;
  align-items: flex-start;
}

/* Foto mit LinkedIn-Link */
#praxis .testimonial-photo-link {
  flex-shrink: 0;
  text-decoration: none;
  display: block;
  position: relative;
}

#praxis .testimonial-photo-link::after {
  content: "in";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: rgba(170, 125, 85, 0.6);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: #121820;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

#praxis .testimonial-photo-link:hover::after {
  opacity: 1;
}

#praxis .testimonial-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(170, 125, 85, 0.15);
  transition: border-color 0.3s ease;
}

#praxis .testimonial-card:hover .testimonial-photo,
#praxis .testimonial-card.open .testimonial-photo {
  border-color: rgba(170, 125, 85, 0.35);
}

#praxis .testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.4s ease;
}

/* Farbfilter für Fotos */
#praxis .testimonial-photo img.filter-copper {
  filter: grayscale(0.4) sepia(0.3) brightness(0.85) contrast(1.05) hue-rotate(-5deg);
}

#praxis .testimonial-photo img.filter-steel {
  filter: grayscale(0.4) sepia(0.2) brightness(0.85) contrast(1.05) hue-rotate(175deg) saturate(0.7);
}

#praxis .testimonial-photo img.filter-blue {
  filter: grayscale(0.3) sepia(0.3) brightness(0.85) contrast(1.05) hue-rotate(185deg) saturate(0.8);
}

#praxis .testimonial-photo img.filter-green {
  filter: grayscale(0.3) sepia(0.3) brightness(0.85) contrast(1.05) hue-rotate(80deg) saturate(0.7);
}

#praxis .testimonial-photo img.filter-coral {
  filter: grayscale(0.3) sepia(0.4) brightness(0.85) contrast(1.05) hue-rotate(325deg) saturate(0.8);
}

#praxis .testimonial-card:hover .testimonial-photo img,
#praxis .testimonial-card.open .testimonial-photo img {
  filter: grayscale(0.15) sepia(0.15) brightness(0.9) contrast(1.05);
}

/* Testimonials ohne Einverständnis: Fotos unkenntlich (Einwilligung ausstehend) */
#praxis #winterhoff .testimonial-photo img {
  filter: blur(14px) brightness(0.7);
}
#praxis #winterhoff:hover .testimonial-photo img,
#praxis #winterhoff.open .testimonial-photo img {
  filter: blur(14px) brightness(0.7);
}
#praxis #winterhoff .testimonial-photo-link::after {
  display: none;
}

#praxis .testimonial-summary {
  flex: 1;
  min-width: 0;
}

#praxis .testimonial-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 2px;
}

#praxis .testimonial-title {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  letter-spacing: 0.015em;
  line-height: 1.5;
}

#praxis .testimonial-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--warm-copper, #AA7D55);
  margin-bottom: 8px;
  line-height: 1.4;
}

#praxis .testimonial-brief {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

#praxis .testimonial-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--warm-copper, #AA7D55);
  opacity: 0.4;
  transition: opacity 0.3s ease;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#praxis .testimonial-card:hover .testimonial-hint {
  opacity: 0.7;
}

#praxis .testimonial-card.open .testimonial-hint {
  opacity: 0.6;
}

#praxis .testimonial-hint .arrow {
  display: inline-block;
  font-size: 9px;
  transition: transform 0.3s ease;
}

#praxis .testimonial-card.open .testimonial-hint .arrow {
  transform: rotate(90deg);
}

#praxis .testimonial-card.open .hint-open {
  display: none;
}

#praxis .hint-close {
  display: none;
}

#praxis .testimonial-card.open .hint-close {
  display: inline;
}

/* Detailbereich – Glas wird klarer */
#praxis .testimonial-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#praxis .testimonial-card.open .testimonial-details {
  max-height: 500px;
}

#praxis .testimonial-details-inner {
  padding: 0 28px 28px;
  margin-left: 88px;
  padding-top: 20px;
  border-top: 1px solid rgba(170, 125, 85, 0.08);
  position: relative;
}

#praxis .testimonial-details-inner::before {
  content: "„";
  position: absolute;
  top: 6px;
  left: -14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 52px;
  color: var(--warm-copper, #AA7D55);
  opacity: 0.12;
  line-height: 1;
}

#praxis .testimonial-quote {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.8;
}

/* Placeholder-Status */
#praxis .testimonial-card.placeholder.visible {
  opacity: 0.4;
}

#praxis .testimonial-card.placeholder:hover {
  opacity: 0.55;
}

#praxis .testimonial-card.placeholder .testimonial-headline {
  color: rgba(225, 225, 225, 0.3);
}

#praxis .testimonial-card.placeholder .testimonial-brief {
  color: rgba(225, 225, 225, 0.3);
  font-style: italic;
}

/* Highlight durch Tag-Navigation */
#praxis .testimonial-card.highlighted {
  border-color: rgba(170, 125, 85, 0.3) !important;
  box-shadow: 0 0 20px rgba(170, 125, 85, 0.08) !important;
}

@keyframes praxisFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 680px) {
  #praxis {
    margin: 40px 0 32px;
  }

  #praxis .herald {
    flex-direction: column;
  }

  #praxis .herald-illustration {
    width: 100%;
    height: 140px;
    border-radius: 8px 8px 0 0;
    padding: 20px 60px;
  }

  #praxis .herald-illustration img {
    max-height: 100%;
    width: auto;
  }

  #praxis .herald-text {
    border-radius: 0 0 8px 8px;
    border-left: 1px solid rgba(225, 225, 225, 0.05);
    border-top: none;
    padding: 24px;
  }

  #praxis .herald-headline {
    font-size: 26px;
  }

  #praxis .testimonial-visible {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
  }

  #praxis .testimonial-details-inner {
    margin-left: 0;
    padding: 16px 20px 20px;
  }

  #praxis .testimonial-details-inner::before {
    left: 4px;
  }
}

/* ================================
   Benchmark-Element (aufbruch.html)
   ================================ */

.benchmark-header {
  margin-bottom: 48px;
}

.benchmark-kicker {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.benchmark-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--text-headline);
  line-height: 1.25;
  margin-bottom: 16px;
}

.benchmark-title .em {
  color: var(--warm-highlight);
}

.benchmark-lead {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}

.benchmark-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.bench-card {
  background: rgba(15, 25, 40, 0.45);
  border: 1px solid rgba(110, 145, 180, 0.08);
  border-radius: 12px;
  padding: 28px 24px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bench-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.bench-card:hover {
  border-color: rgba(110, 145, 180, 0.18);
  background: rgba(15, 25, 40, 0.6);
}

.bench-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, var(--card-accent), transparent 90%);
  opacity: 0.5;
}

.bench-card:nth-child(1) { --card-accent: var(--blue-clarity); transition-delay: 0.1s; }
.bench-card:nth-child(2) { --card-accent: rgba(140, 180, 220, 0.6); transition-delay: 0.25s; }
.bench-card:nth-child(3) { --card-accent: var(--red-coral); transition-delay: 0.4s; }

.card-category {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.card-stats {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.stat-row {
  cursor: default;
}

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--text-body);
  flex: 1;
  line-height: 1.3;
}

.stat-value {
  font-size: 32px;
  font-weight: 200;
  color: var(--text-headline);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  min-width: 70px;
  text-align: right;
  line-height: 1;
}

.stat-value .unit {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 1px;
  letter-spacing: 0;
}

.stat-bar {
  height: 2px;
  background: rgba(110, 145, 180, 0.06);
  border-radius: 1px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 1px;
  width: 0%;
  transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bench-card:nth-child(1) .stat-bar-fill { background: rgba(110, 145, 180, 0.4); }
.bench-card:nth-child(2) .stat-bar-fill { background: rgba(140, 180, 220, 0.4); }
.bench-card:nth-child(3) .stat-bar-fill { background: rgba(160, 85, 95, 0.5); }

.stat-detail {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.stat-row:hover .stat-detail,
.stat-row.expanded .stat-detail {
  max-height: 50px;
  opacity: 1;
}

.benchmark-source {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 40px;
  opacity: 0.6;
}

.benchmark-closer {
  padding-top: 32px;
  border-top: 1px solid rgba(110, 145, 180, 0.06);
}

.benchmark-closer p {
  font-size: 18px;
  font-weight: 300;
  color: var(--text-headline);
  line-height: 1.6;
}

.benchmark-closer .em {
  color: var(--red-coral);
}

@media (max-width: 480px) {
  .benchmark-title { font-size: 26px; }
  .stat-value { font-size: 24px; }
  .stat-detail {
    max-height: 50px;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   STATION 1 — AUFBRUCH (Reality Gap + Benchmarks Toggle)
   ═══════════════════════════════════════════════════════════════════ */
.gap-intro {
  margin-top: 12px;
  padding-top: 6px;
}

.gap-lead {
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.gap-quote-cite {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.3px;
  margin-top: -10px;
  margin-bottom: 28px;
}

.gap-chart-block {
  margin-top: 18px;
  padding: 18px 14px 14px;
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 14px;
  background: rgba(110, 145, 180, 0.04);
}

.gap-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.gap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gap-legend-swatch,
.gap-legend-area {
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gap-insight-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.gap-insight-card {
  padding: 16px 14px;
  border-radius: 12px;
  border: 1px solid rgba(110, 145, 180, 0.10);
  background: rgba(18, 24, 32, 0.35);
}

.gap-insight-year {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.gap-insight-desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 0;
}

.gap-closing {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(110, 145, 180, 0.08);
}

.gap-closing-kicker {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Benchmarks Toggle (minimal, angepasst aus Scribble) */
.benchmark-wrapper {
  margin-top: 28px;
}

.bm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: none;
  border: 1px solid rgba(110, 145, 180, 0.3);
  border-radius: 8px;
  color: var(--blue-clarity);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bm-trigger:hover {
  color: var(--blue-clarity);
  background: rgba(110, 145, 180, 0.06);
  border-color: rgba(110, 145, 180, 0.5);
}

.bm-trigger .arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.benchmark-wrapper.open .bm-trigger .arrow {
  transform: rotate(90deg);
}

.benchmark-wrapper.open .bm-trigger {
  color: var(--text-body);
  border-color: rgba(110, 145, 180, 0.2);
  margin-bottom: 24px;
}

.bm-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.benchmark-wrapper.open .bm-content {
  max-height: 1200px;
}

.bm-kicker {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.bm-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--text-headline);
  line-height: 1.3;
  margin-bottom: 12px;
}

.bm-title .em { color: var(--warm-highlight); }

.bm-lead {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 28px;
}

.bm-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 26px;
  border: 1px solid rgba(110, 145, 180, 0.08);
  border-radius: 12px;
  overflow: hidden;
}

.bm-stat {
  text-align: center;
  padding: 22px 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  background: rgba(18, 24, 32, 0.20);
}

.bm-stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.bm-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(110, 145, 180, 0.1);
}

.bm-number-box {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.bm-number {
  font-size: 46px;
  font-weight: 200;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  color: var(--blue-clarity);
}

.bm-number .unit {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  margin-left: 1px;
}

.bm-stat:nth-child(2) .bm-number {
  color: var(--warm-highlight);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0;
}

.bm-stat:nth-child(3) .bm-number { color: var(--red-coral); }

.bm-stat:nth-child(3) .bm-number .mult {
  font-size: 26px;
  font-weight: 300;
  opacity: 0.7;
}

.bm-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-headline);
  margin-bottom: 6px;
}

.bm-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.bm-closer {
  padding-top: 18px;
  border-top: 1px solid rgba(110, 145, 180, 0.06);
  margin-bottom: 14px;
}

.bm-closer p {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-headline);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Detail Expand (nested) — aus Scribble übernommen */
.bm-expand {
  border: 1px solid rgba(110, 145, 180, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.bm-expand:hover {
  border-color: rgba(110, 145, 180, 0.15);
}

.bm-expand-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: none;
  border: none;
  color: var(--blue-clarity);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.bm-expand-trigger:hover {
  color: var(--blue-clarity);
  background: rgba(110, 145, 180, 0.04);
}

.bm-expand-arrow {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.bm-expand.open .bm-expand-arrow {
  transform: rotate(90deg);
}

.bm-expand-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bm-expand.open .bm-expand-body {
  max-height: 600px;
}

.bm-expand-inner {
  padding: 0 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bm-detail-group {
  padding-top: 14px;
  border-top: 1px solid rgba(110, 145, 180, 0.06);
}

.bm-detail-group:first-child {
  border-top: none;
  padding-top: 0;
}

.bm-detail-cat {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200, 220, 240, 0.7);
  margin-bottom: 10px;
}

.bm-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bm-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.bm-detail-row .label { color: var(--text-body); }
.bm-detail-row .val {
  color: var(--text-headline);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bm-source {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}

@media (max-width: 740px) {
  .gap-insight-row { grid-template-columns: 1fr; }
  .bm-numbers { grid-template-columns: 1fr; }
  .bm-stat:not(:last-child)::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   STATION 3 — POTENZIAL (Use-Case-Matrix)
   Quelle: ki-implementierung-element-v3.html (CSS adaptiert)
   ═══════════════════════════════════════════════════════════════════ */
.matrix-header { margin-bottom: 48px; max-width: 600px; }

.matrix-kicker {
  font-size: var(--fs-label);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.matrix-title {
  font-size: var(--fs-heading);
  font-weight: 300;
  color: var(--text-headline);
  line-height: var(--lh-heading);
  margin-bottom: 16px;
}

.matrix-title .em { color: var(--warm-highlight); font-weight: 400; }

.matrix-lead {
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Field wrapper */
.field-wrapper { position: relative; margin-bottom: 32px; }

.field-axis {
  font-size: var(--fs-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: absolute;
}

.field-axis--y {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  left: -8px;
  top: 50%;
  translate: 0 -50%;
  /* Richtung: „hoch” (visuell oben) soll stärker/kontrastreicher wirken.
     rotate(180deg) kehrt die Gradient-Richtung um, daher „to bottom”. */
  background: linear-gradient(to bottom, var(--text-muted), var(--green-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

.field-axis--x {
  bottom: -28px;
  left: 50%;
  translate: -50% 0;
  /* Gleicher Gradient-Stil wie Y-Achse: muted → stark Richtung „hoch" (rechts) */
  text-transform: none;
  background: linear-gradient(to right, var(--text-muted), var(--green-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

.field-marker {
  font-size: 9px;
  letter-spacing: 1px;
  position: absolute;
}

.field-marker--bl { left: 28px; bottom: -28px; color: var(--red-clarity); opacity: 0.5; }
.field-marker--br { right: 0; bottom: -28px; color: var(--green-accent); opacity: 0.5; }
.field-marker--tl { left: -8px; top: -4px; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--green-accent); opacity: 0.5; }
.field-marker--bl-y { left: -8px; bottom: 0; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--red-clarity); opacity: 0.5; }

/* The field */
.field {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-left: 28px;
  border-left: 1px solid rgba(110, 145, 180, 0.12);
  border-bottom: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 14px;
  background: rgba(16, 22, 30, 0.6);
  overflow: hidden;
  cursor: grab;
}

.zone {
  position: absolute;
  width: 50%;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.72;
}

.zone-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-headline);
  margin-bottom: 6px;
}

.zone-sublabel {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(160, 185, 215, 0.65);
}

.zone--reassess { left: 0; bottom: 0; height: 50%; background: rgba(55, 75, 100, 0.06); }
.zone--research { left: 0; top: 0; height: 50%; background: rgba(170, 125, 85, 0.06); }
.zone--champion { right: 0; top: 0; height: 40%; background: rgba(110, 180, 140, 0.06); z-index: 1; }
.zone--quickwin { right: 0; bottom: 0; height: 60%; background: rgba(59, 130, 246, 0.06); z-index: 0; }

.zone.active { opacity: 1; }
.zone--champion.active { background: rgba(110, 180, 140, 0.12); border-color: rgba(110, 180, 140, 0.22); }
.zone--quickwin.active { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.22); }
.zone--research.active { background: rgba(170, 125, 85, 0.12); border-color: rgba(170, 125, 85, 0.22); }
.zone--reassess.active { background: rgba(55, 75, 100, 0.14); border-color: rgba(55, 75, 100, 0.22); }

.crosshair-x, .crosshair-y {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.crosshair-x {
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(200, 220, 240, 0.22);
}

.crosshair-y {
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(200, 220, 240, 0.22);
}

.dot {
  position: absolute;
  z-index: 4;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  translate: -50% -50%;
  background: var(--dot-color, rgba(200,75,75,0.9));
  box-shadow: 0 0 0 6px var(--dot-glow, rgba(200,75,75,0.25));
  cursor: grab;
  transition: box-shadow 0.2s ease;
}

.dot.dragging { cursor: grabbing; }

@keyframes matrixDotPulse {
  0% { box-shadow: 0 0 0 0 var(--dot-glow, rgba(200,75,75,0.4)); }
  55% { box-shadow: 0 0 0 14px rgba(200,75,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,75,75,0); }
}

.dot.pulsing { animation: matrixDotPulse 2.5s ease-in-out infinite; }

.field-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(170, 125, 85, 0.22);
  border: 1px solid rgba(225, 185, 145, 0.3);
  color: rgba(225, 185, 145, 0.9);
  font-size: 12px;
  z-index: 2;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.field-hint.hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* Mobile Controls */
.mobile-controls {
  display: none;
  margin-left: 28px;
  gap: 18px;
  margin-bottom: 18px;
}

.slider-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 110px;
}

.slider-track {
  flex: 1;
  accent-color: var(--green-accent);
}

.slider-value {
  width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 220, 240, 0.7);
  font-size: 12px;
}

/* Result Bar (umbenannt) */
.matrix-result-bar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-left: 28px;
  margin-top: 78px; /* ca. 1cm mehr Luft */
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 14px;
  background: rgba(18, 24, 32, 0.35);
}

.matrix-result-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(110, 145, 180, 0.12);
  color: rgba(200, 220, 240, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.matrix-result-content { flex: 1; }

.matrix-result-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-headline);
}

.matrix-result-desc {
  margin: 0 0 10px 0;
  color: rgba(160, 185, 215, 0.75);
  font-size: 13px;
  line-height: 1.55;
}

.matrix-result-example {
  margin: 0;
  color: rgba(160, 185, 215, 0.6);
  font-size: 12px;
  line-height: 1.55;
}

/* Prozess (umbenannt) */
.matrix-process {
  margin-left: 28px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(110, 145, 180, 0.10);
}

.matrix-process-title {
  margin: 0 0 18px 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-headline);
}

.matrix-process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.matrix-process-grid::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(110, 145, 180, 0.12);
}

.matrix-process-step {
  position: relative;
  padding: 16px 16px 14px;
  border: 1px solid rgba(110, 145, 180, 0.10);
  border-radius: 14px;
  background: rgba(12, 18, 26, 0.35);
}

.matrix-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  color: rgba(200, 220, 240, 0.9);
  background: rgba(110, 145, 180, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-variant-numeric: tabular-nums;
}

.matrix-process-step:nth-child(1) .matrix-step-dot { background: rgba(59,130,246,0.18); }
.matrix-process-step:nth-child(2) .matrix-step-dot { background: rgba(170,125,85,0.18); }
.matrix-process-step:nth-child(3) .matrix-step-dot { background: rgba(110,180,140,0.18); }

.matrix-step-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-headline);
}

.matrix-step-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(160, 185, 215, 0.75);
}

/* ================================
   Station 6: Durchbruch Modul (durchbruch.html)
   ================================ */

.station.station-coral .station-content {
  max-width: 1160px;
}

.station.station-coral {
  --db-coral: #E07B6A;
}

.station.station-coral .kicker {
  color: var(--db-coral);
  margin-bottom: 14px;
}

.station.station-coral .station-content h2 {
  font-size: 28px;
}

.db-block {
  margin-bottom: 72px;
}

.db-block-divider {
  height: 1px;
  background: rgba(110, 145, 180, 0.12);
  margin-bottom: 72px;
}

.db-body-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 620px;
}

.db-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}

.db-hf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  margin-bottom: 0;
  margin-right: auto;
  align-items: stretch;
}

.db-hf-card {
  background: rgba(20, 30, 42, 0.5);
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 12px;
  padding: 22px 18px;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.2s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
}

.db-hf-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--db-coral);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 12px 12px 0 0;
}

.db-hf-card:hover {
  border-color: rgba(224, 123, 106, 0.22);
  background: rgba(224, 123, 106, 0.07);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(224, 123, 106, 0.1) inset;
}

.db-hf-card.active {
  border-color: rgba(224, 123, 106, 0.22);
  background: rgba(224, 123, 106, 0.11);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(224, 123, 106, 0.15) inset;
}

.db-hf-card.active::before {
  opacity: 1;
}

.db-hf-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.85;
}

.db-hf-icon svg {
  width: 48px;
  height: 48px;
}

.db-hf-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.db-hf-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}

.db-hf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.db-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.db-tag-steel { background: rgba(110, 145, 180, 0.1); border: 1px solid rgba(110, 145, 180, 0.2); color: rgba(130, 165, 200, 0.85); }
.db-tag-warm { background: rgba(170, 125, 85, 0.1); border: 1px solid rgba(170, 125, 85, 0.22); color: rgba(195, 155, 115, 0.9); }
.db-tag-teal { background: rgba(63, 168, 138, 0.1); border: 1px solid rgba(63, 168, 138, 0.22); color: rgba(80, 185, 155, 0.85); }
.db-tag-coral { background: rgba(224, 123, 106, 0.1); border: 1px solid rgba(224, 123, 106, 0.22); color: rgba(224, 143, 126, 0.9); }
.db-tag-blue { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.22); color: rgba(100, 160, 240, 0.85); }
.db-tag-amber { background: rgba(196, 161, 90, 0.1); border: 1px solid rgba(196, 161, 90, 0.22); color: rgba(210, 178, 110, 0.88); }

.db-hf-panel-wrap {
  margin-top: 24px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.35s ease;
  max-height: 0;
  opacity: 0;
}

.db-hf-panel-wrap.inline {
  margin-top: 14px;
}

.db-hf-panel-wrap.open {
  max-height: 500px;
  opacity: 1;
}

.db-hf-panel {
  background: rgba(14, 22, 33, 0.6);
  border: 1px solid rgba(110, 145, 180, 0.1);
  border-radius: 12px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.db-hf-panel-context {
  border-right: 1px solid rgba(110, 145, 180, 0.12);
  padding-right: 32px;
}

.db-panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--db-coral);
  margin-bottom: 10px;
  display: block;
}

.db-hf-panel-context h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.db-hf-panel-context p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
}

.db-hf-panel-example .db-panel-label {
  color: var(--text-muted);
}

.db-example-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(20, 30, 42, 0.4);
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 10px;
  padding: 16px 18px;
}

.db-example-item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.db-example-item-icon svg {
  width: 40px;
  height: 40px;
}

.db-example-item-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 5px;
  line-height: 1.3;
}

.db-example-item-content p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

.db-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.db-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.db-card {
  background: rgba(20, 30, 42, 0.5);
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
  cursor: pointer;
}

.db-card:hover {
  border-color: rgba(110, 145, 180, 0.25);
}

.db-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--db-accent);
  border-radius: 12px 12px 0 0;
}

.db-card::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, var(--db-accent-soft) 0%, transparent 70%);
  pointer-events: none;
}

.db-card-1 { --db-accent: #6e91b4; --db-accent-soft: rgba(110, 145, 180, 0.08); }
.db-card-2 { --db-accent: #3b82f6; --db-accent-soft: rgba(59, 130, 246, 0.08); }
.db-card-3 { --db-accent: #aa7d55; --db-accent-soft: rgba(170, 125, 85, 0.08); }

.db-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--db-accent-soft);
  border: 1px solid rgba(110, 145, 180, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.db-card-icon svg {
  width: 38px;
  height: 38px;
}

.db-card-number {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--db-accent);
  margin-bottom: 5px;
}

.db-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

.db-card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

.db-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.db-card-toggle-hint {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.55;
  letter-spacing: 0.03em;
}

.db-toggle-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(110, 145, 180, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: var(--db-accent);
  transition: transform 0.3s ease, border-color 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
  user-select: none;
}

.db-card.expanded .db-toggle-icon {
  transform: rotate(45deg);
  border-color: var(--db-accent);
  background: var(--db-accent-soft);
}

.db-card-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s ease, opacity 0.3s ease;
  opacity: 0;
}

.db-card.expanded .db-card-detail {
  max-height: 320px;
  opacity: 1;
}

.db-divider {
  height: 1px;
  background: rgba(110, 145, 180, 0.08);
  margin-top: 16px;
  margin-bottom: 16px;
}

.db-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.db-items li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.5;
}

.db-items li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--db-accent);
  margin-top: 7px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Closing-Quote im Matrix-Kontext bündig + mehr Luft */
.station-content .matrix-process ~ .accent-quote {
  margin-left: 28px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .field { margin-left: 0; cursor: grab; touch-action: none; }
  .dot { cursor: grab; touch-action: none; }
  .dot.pulsing { animation: none; }
  .field-hint { display: none; }
  .mobile-controls { display: flex; margin-left: 0; }
  .field-wrapper { margin-bottom: 16px; }
  .matrix-result-bar { margin-left: 0; }
  .matrix-process { margin-left: 0; }
  .matrix-process-grid { grid-template-columns: 1fr; gap: 28px; }
  .matrix-process-grid::before { display: none; }
  .field-axis--y, .field-marker--tl, .field-marker--bl-y { display: none; }
  .field-marker--bl { left: 0; }
  .zone-sublabel { opacity: 0.4 !important; }
}

/* Showcase */
.showcase-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.showcase-item {
  padding: 24px;
  background: rgba(160, 85, 95, 0.06);
  border: 1px solid rgba(160, 85, 95, 0.15);
  border-radius: 12px;
}

.showcase-item h3 {
  margin-top: 0;
}

/* Espresso CTA */
.espresso-cta {
  text-align: center;
  padding: 40px 24px !important;
  background: rgba(225, 185, 145, 0.06);
  border: 1px solid rgba(225, 185, 145, 0.2);
  border-radius: 12px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(225, 185, 145, 0.15);
  border: 1px solid rgba(225, 185, 145, 0.4);
  border-radius: 8px;
  color: var(--text-headline);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: rgba(225, 185, 145, 0.25);
  border-color: rgba(225, 185, 145, 0.5);
}

/* ══════════════════════════════════════
   Station 4 — Umsetzung (Neuronales Netz)
   ══════════════════════════════════════ */

/* Hero-Block innerhalb station-content */
.station-content .netz-hero {
  padding: 52px 0 0;
  transition: all 0.6s ease;
}

.station-content .netz-hero.compact-mode {
  padding: 32px 0 0;
}

.block-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--text-headline);
  margin-bottom: 10px;
}

.block-sub {
  font-size: 0.97rem;
  color: var(--text-body);
  max-width: 520px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* Canvas Wrapper — transitions 58vh → 300px */
.net-wrap {
  position: relative;
  width: 100%;
  height: 58vh;
  min-height: 440px;
  background: transparent;
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 1s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.net-wrap.compact {
  height: 300px;
  min-height: 300px;
}

canvas#neuralCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Expand/Collapse Toggle — nur in Phase 2 sichtbar */
.net-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(110,145,180,0.18);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 4px;
}

.net-toggle:hover {
  color: var(--text-body);
  border-color: rgba(110,145,180,0.35);
  background: rgba(110,145,180,0.05);
}

.net-toggle.interactive-visible { display: flex; }

.net-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.net-toggle.expanded svg { transform: scaleY(-1); }

.ki-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
}

.ki-label-text {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(59, 130, 246, 0.45);
  transition: all 1s ease;
}

.ki-label-text.active {
  color: rgba(59, 130, 246, 0.9);
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  font-size: 0.95rem;
}

/* Demo Button Section (Phase 1) */
.demo-section {
  text-align: left;
  padding: 10px 0 18px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.demo-section.visible {
  opacity: 1;
  pointer-events: auto;
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(160, 85, 95, 0.4);
  color: var(--red-coral-text);
  padding: 0.75rem 2.2rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.demo-btn:hover {
  background: rgba(160, 85, 95, 0.08);
  border-color: rgba(160, 85, 95, 0.6);
}

.demo-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.demo-btn .arrow {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.demo-btn:hover .arrow { transform: translateX(3px); }

.demo-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.demo-hint.visible { opacity: 1; }

/* Scenario Section (Phase 2) */
.scenario-section {
  padding: 0 0 60px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

.scenario-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Intro-Zeile mit Toggle rechts */
.scene-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.scene-intro {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-headline);
  margin-bottom: 0;
}

/* Scenario fade-out via class */
.scenario-section.net-zoomed {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tabs */
.scene-tabs { display: flex; gap: 4px; margin-bottom: 0; }

.scene-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(140,160,190,0.1);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation;
}

.scene-tab:hover { color: var(--text-body); background: rgba(140,160,190,0.04); }

.scene-tab .tab-icon { display: flex; align-items: center; }
.scene-tab .tab-icon svg { width: 15px; height: 15px; opacity: 0.5; transition: opacity 0.3s ease; }
.scene-tab:hover .tab-icon svg { opacity: 0.8; }
.scene-tab.active .tab-icon svg { opacity: 1; }

.scene-tab[data-scene="service"].active { color: var(--blue-electric); background: var(--bg-elevated); border-color: rgba(59,130,246,0.25); }
.scene-tab[data-scene="sales"].active   { color: var(--warm-highlight); background: var(--bg-elevated); border-color: rgba(225,185,145,0.25); }
.scene-tab[data-scene="hr"].active      { color: var(--green-accent); background: var(--bg-elevated); border-color: rgba(110,180,140,0.25); }

/* Panel */
.scene-panel {
  background: var(--bg-elevated);
  border: 1px solid rgba(110,145,180,0.1);
  border-radius: 0 6px 6px 6px;
  padding: 28px 30px;
}

.scene-question {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-headline);
  padding: 14px 18px;
  background: rgba(110,145,180,0.03);
  border-left: 2px solid rgba(110,145,180,0.15);
  margin-bottom: 18px;
  line-height: 1.55;
}

.response-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.response-text {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-body);
  min-height: 220px;
  transition: opacity 0.3s ease;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(140,160,190,0.06);
}

.ctx-mark {
  cursor: pointer;
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 -1px;
  transition: all 0.3s ease;
  position: relative;
}

.ctx-mark:hover { filter: brightness(1.2); }

.ctx-mark::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.6;
}

.ctx-preview {
  opacity: 0.3;
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 -1px;
  font-style: italic;
}

/* Slider */
.slider-section { margin-bottom: 24px; }

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.slider-title { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.3px; color: var(--text-body); }
.slider-value { font-size: 1.1rem; font-weight: 600; color: var(--blue-clarity); transition: color 0.6s ease; }

.slider-track-wrap {
  position: relative;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.slider-track {
  width: 100%;
  height: 4px;
  background: rgba(140,160,190,0.08);
  border-radius: 2px;
  position: relative;
}

.slider-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--blue-clarity);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1), background 0.6s ease;
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-clarity);
  transform: translate(-50%, -50%);
  transition: left 0.4s cubic-bezier(0.4,0,0.2,1), background 0.6s ease;
  z-index: 5;
  box-shadow: 0 0 12px rgba(110,145,180,0.3);
  animation: netzHandlePulse 2.5s ease-in-out infinite;
}

@keyframes netzHandlePulse {
  0%,100% { box-shadow: 0 0 10px rgba(110,145,180,0.25); transform: translate(-50%,-50%) scale(1); }
  50%      { box-shadow: 0 0 22px rgba(110,145,180,0.5);  transform: translate(-50%,-50%) scale(1.18); }
}

.slider-stops { display: flex; position: absolute; width: 100%; top: 50%; pointer-events: none; }

.slider-stop {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140,160,190,0.08);
  border: 1px solid rgba(140,160,190,0.12);
  position: absolute;
  transform: translate(-50%,-50%);
  transition: all 0.3s ease;
}

.slider-stop.passed { background: var(--blue-clarity); border-color: var(--blue-clarity); opacity: 0.4; }

/* Tiles */
.tiles-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.tile-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.tile {
  flex: 1 1 calc(50% - 5px);
  min-width: 200px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid rgba(140,160,190,0.08);
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  position: relative;
  will-change: box-shadow;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  touch-action: manipulation;
}

.tile:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.tile-bar { width: 3px; min-height: 36px; border-radius: 2px; flex-shrink: 0; opacity: 0.3; transition: opacity 0.3s ease; pointer-events: none; }
.tile.active .tile-bar { opacity: 1; }
.tile-body { flex: 1; pointer-events: none; }
.tile-name { font-size: 0.88rem; font-weight: 600; letter-spacing: 0.2px; margin-bottom: 3px; transition: color 0.3s ease; }
.tile-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }

.tile-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(140,160,190,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.3s ease;
  pointer-events: none;
}

.tile-check svg { width: 10px; height: 10px; opacity: 0; transition: opacity 0.3s ease; }
.tile.active .tile-check { border-color: var(--tile-color); background: var(--tile-color); }
.tile.active .tile-check svg { opacity: 1; }
.tile.active { border-color: var(--tile-border); background: var(--tile-bg); }
.tile:not(.active):hover { border-color: rgba(140,160,190,0.2); background: rgba(140,160,190,0.03); }

/* Panel footer */
.panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.panel-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(160,85,95,0.4);
  color: var(--red-coral-text);
  padding: 0.65rem 1.8rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.panel-demo-btn:hover { background: rgba(160,85,95,0.08); border-color: rgba(160,85,95,0.6); }
.panel-demo-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.panel-demo-btn .arrow { font-size: 0.95rem; transition: transform 0.3s ease; }
.panel-demo-btn:hover .arrow { transform: translateX(3px); }

.reset-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(140,160,190,0.12);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin-left: auto;
}

.reset-icon:hover { color: var(--text-body); border-color: rgba(140,160,190,0.3); background: rgba(140,160,190,0.05); }
.reset-icon.visible { display: flex; }
.reset-icon svg { width: 15px; height: 15px; }

.reset-icon .tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid rgba(140,160,190,0.15);
  color: var(--text-body);
  font-size: 0.68rem;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.reset-icon:hover .tooltip { opacity: 1; }

/* Insight */
.insight-box {
  margin-top: 24px;
  padding: 18px 22px;
  border-left: 2px solid rgba(110,180,140,0.3);
  background: rgba(110,180,140,0.03);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.8s ease;
}

.insight-box.visible { opacity: 1; transform: translateY(0); }
.insight-box p { font-size: 0.9rem; line-height: 1.6; }
.insight-box strong { color: var(--text-headline); font-weight: 500; }

/* Station 4: Neuronales Netz braucht volle Breite */
.station-content .net-wrap {
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.station-content .netz-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ═══════════════════════════════════════════
   TWO TRACKS – Zwei Wege Sektion
   Durchbruch-Seite
   ═══════════════════════════════════════════ */

/* Complaint Test Block */
.tt-complaint {
  background: rgba(20, 30, 42, 0.5);
  border: 1px solid rgba(110, 145, 180, 0.12);
  border-radius: 12px;
  padding: 32px 28px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.tt-complaint::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-clarity), var(--warm-copper));
  border-radius: 12px 12px 0 0;
}

.tt-complaint-question {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-headline);
  line-height: 1.35;
  margin-bottom: 24px;
}

.tt-complaint-buttons {
  display: flex;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.5s;
}

.tt-complaint-buttons.tt-visible {
  opacity: 1;
  transform: translateY(0);
}

.tt-btn {
  padding: 9px 28px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid;
  letter-spacing: 0.02em;
}

.tt-btn--ja {
  background: rgba(110, 145, 180, 0.06);
  border-color: rgba(110, 145, 180, 0.18);
  color: rgba(110, 145, 180, 0.75);
}
.tt-btn--ja:hover {
  background: rgba(110, 145, 180, 0.15);
  border-color: rgba(110, 145, 180, 0.4);
  color: var(--blue-clarity);
  transform: scale(1.04);
  box-shadow: 0 2px 12px rgba(110, 145, 180, 0.15);
}

.tt-btn--nein {
  background: rgba(225, 185, 145, 0.04);
  border-color: rgba(225, 185, 145, 0.14);
  color: rgba(225, 185, 145, 0.65);
}
.tt-btn--nein:hover {
  background: rgba(225, 185, 145, 0.12);
  border-color: rgba(225, 185, 145, 0.35);
  color: var(--warm-highlight);
  transform: scale(1.04);
  box-shadow: 0 2px 12px rgba(170, 125, 85, 0.15);
}

.tt-btn.selected {
  transform: scale(1.02);
}
.tt-btn--ja.selected {
  background: rgba(110, 145, 180, 0.15);
  border-color: rgba(110, 145, 180, 0.4);
  color: var(--blue-clarity);
}
.tt-btn--nein.selected {
  background: rgba(225, 185, 145, 0.12);
  border-color: rgba(225, 185, 145, 0.35);
  color: var(--warm-highlight);
}

/* Antwort-Animation */
.tt-response {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, margin-top 0.3s ease, opacity 0.4s ease;
  opacity: 0;
  margin-top: 0;
}

.tt-response.visible {
  max-height: 200px;
  margin-top: 24px;
  opacity: 1;
}

.tt-response p {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-body);
}

.tt-hl-blue {
  color: var(--blue-clarity);
  font-weight: 500;
}
.tt-hl-warm {
  color: var(--warm-highlight);
  font-weight: 500;
}

/* Zwei Wege Karten-Grid */
.tt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.tt-card {
  background: rgba(20, 30, 42, 0.5);
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}

.tt-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 12px 12px 0 0;
}

.tt-card--1 {
  border: 1px solid rgba(110, 145, 180, 0.12);
}
.tt-card--1::before {
  background: var(--blue-clarity);
}

.tt-card--2 {
  border: 1px solid rgba(170, 125, 85, 0.12);
}
.tt-card--2::before {
  background: var(--warm-copper);
}

.tt-card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tt-card-label--1 { color: var(--blue-clarity); }
.tt-card-label--2 { color: var(--warm-copper); }

.tt-card-scene {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-headline);
  line-height: 1.55;
  margin-bottom: 18px;
}

.tt-card-divider {
  width: 28px;
  height: 1px;
  margin-bottom: 16px;
}
.tt-card-divider--1 { background: rgba(110, 145, 180, 0.2); }
.tt-card-divider--2 { background: rgba(170, 125, 85, 0.2); }

.tt-card-explain {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 18px;
}

.tt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tt-tag {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tt-tag--blue {
  background: rgba(110, 145, 180, 0.08);
  color: rgba(110, 145, 180, 0.6);
  border: 1px solid rgba(110, 145, 180, 0.1);
}

.tt-tag--warm {
  background: rgba(170, 125, 85, 0.06);
  color: rgba(225, 185, 145, 0.55);
  border: 1px solid rgba(170, 125, 85, 0.1);
}

.tt-tag--green {
  background: rgba(110, 180, 140, 0.06);
  color: rgba(110, 180, 140, 0.55);
  border: 1px solid rgba(110, 180, 140, 0.1);
}

/* Verbindender Satz */
.tt-conclusion {
  text-align: center;
  padding: 12px 0 0;
}

.tt-conclusion p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-headline);
  line-height: 1.55;
  max-width: 500px;
  margin: 0 auto;
}

.tt-conclusion .em {
  font-style: italic;
}