/* Configurable examples arranged around one assistant; no ambient motion. */
#werkzeuge { background: var(--tint); }
#werkzeuge .tools-inner { grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 4vw, 64px); padding-block: clamp(64px, 6vw, 96px); min-height: 0; }
#werkzeuge .tools-copy h2 { margin-top: 30px; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.05em; hyphens: none; }
#werkzeuge .tools-copy > p { max-width: 46ch; margin-top: 24px; font-size: 16px; line-height: 1.7; }
#werkzeuge .tools-copy > .tools-secondary { margin-top: 20px; font-size: 14px; color: var(--muted); }
#werkzeuge .tool-switch { max-width: 100%; margin-top: 30px; border-color: var(--line); border-radius: 5px; }
#werkzeuge .tool-switch button { white-space: normal; }
#werkzeuge .tools-copy > .tools-caption { max-width: 42ch; margin-top: 15px; font-size: 12px; line-height: 1.6; color: var(--muted); }
#werkzeuge .tool-sculpture { width: 100%; max-width: 620px; height: 600px; margin: 0 auto; perspective: none; }
#werkzeuge .tool-core { left: 8%; top: 230px; width: 41%; height: 210px; padding: 25px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; transform: none; box-shadow: 0 16px 32px -18px #191b1b4d; align-items: flex-start; justify-content: center; gap: 12px; }
#werkzeuge .tool-core > img { width: 64px; height: auto; }
#werkzeuge .tool-core-title { margin: 0; font: 650 28px/1.1 var(--type-family); letter-spacing: -.04em; }
#werkzeuge .tool-core > span { margin: 0; font: 10px/1.4 var(--mono); color: var(--muted); }
#werkzeuge .tool-block { width: 36%; min-height: 166px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 24px -15px #191b1b33; transform: none; gap: 8px; }
#werkzeuge .tool-block-one { left: 4%; top: 10px; }
#werkzeuge .tool-block-two { right: 0; top: 82px; }
#werkzeuge .tool-block-three { right: 0; bottom: 0; }
#werkzeuge .tool-icon { margin: 0 0 3px; color: var(--accent); }
#werkzeuge .tool-icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
#werkzeuge .tool-block strong { font-size: clamp(19px, 1.8vw, 25px); line-height: 1.2; hyphens: auto; }
#werkzeuge .tool-block > span:last-child { font-size: 12px; line-height: 1.5; color: var(--muted); }
#werkzeuge .tool-block.changed { transform: none; }
#werkzeuge .hub-connections { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); pointer-events: none; overflow: visible; }
#werkzeuge .hub-connections path[data-connection] { fill: none; stroke: currentColor; stroke-width: 1.65; opacity: .4; }
#werkzeuge .hub-connections marker path { fill: currentColor; }
#werkzeuge[data-tool-focus="one"] [data-connection="one"],
#werkzeuge[data-tool-focus="two"] [data-connection="two"],
#werkzeuge[data-tool-focus="three"] [data-connection="three"],
#werkzeuge[data-tool-focus="all"] path[data-connection] { opacity: 1; }
#werkzeuge .tool-icon .icon-personal { display: none; }
#werkzeuge[data-tool-mode="personal"] .tool-icon .icon-personal { display: block; }
#werkzeuge[data-tool-mode="personal"] .tool-icon .icon-business { display: none; }
.no-js #werkzeuge .tool-switch { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #werkzeuge .tool-block { transition: transform 200ms var(--ease); }
  #werkzeuge .tool-block:hover { transform: translateY(-3px); }
  #werkzeuge .hub-connections path[data-connection] { transition: opacity 180ms var(--ease); }
}
@media (max-width: 1100px) {
  #werkzeuge .tools-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  #werkzeuge .tools-copy { max-width: 680px; }
  #werkzeuge .tools-copy h2 { font-size: clamp(38px, 5.6vw, 60px); }
  #werkzeuge .tool-sculpture { max-width: 580px; height: 570px; }
}
@media (max-width: 540px) {
  #werkzeuge .tools-inner { gap: 38px; }
  #werkzeuge .tools-copy > p { font-size: 15px; }
  #werkzeuge .tool-switch { display: flex; width: 100%; }
  #werkzeuge .tool-switch button { flex: 1; padding: 10px 9px; font-size: 12px; }
  #werkzeuge .tool-sculpture { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 20px 18px; max-width: 420px; height: auto; margin: 0; }
  #werkzeuge .tool-core { position: relative; grid-column: 2; grid-row: 1; left: auto; top: auto; width: 100%; height: auto; min-height: 174px; padding: 22px; }
  #werkzeuge .tool-core > img { width: 52px; }
  #werkzeuge .tool-core-title br { display: none; }
  #werkzeuge .tool-core-title { font-size: 25px; }
  #werkzeuge .tool-block { position: relative; grid-column: 2; width: 100%; min-height: 0; padding: 20px; inset: auto; }
  #werkzeuge .tool-block-one { grid-row: 2; }
  #werkzeuge .tool-block-two { grid-row: 3; }
  #werkzeuge .tool-block-three { grid-row: 4; }
  #werkzeuge .tool-block strong { font-size: 22px; }
  #werkzeuge .tool-block > span:last-child { font-size: 13px; }
  #werkzeuge .tool-sculpture::before { content: ""; position: absolute; left: 10px; top: 86px; bottom: 72px; border-left: 1px solid var(--accent); opacity: .4; }
  #werkzeuge .tool-core::before, #werkzeuge .tool-block::before { content: ""; position: absolute; left: -29px; width: 28px; top: 50%; border-top: 1px solid var(--accent); opacity: .4; }
  #werkzeuge .tool-block:hover::before { opacity: 1; }
  #werkzeuge .hub-connections { display: none; }
}
@media (forced-colors: active) {
  #werkzeuge .tool-core, #werkzeuge .tool-block, #werkzeuge .tool-switch { border-color: CanvasText; }
}