* { box-sizing: border-box; }
html { background: var(--x-bg); scroll-padding-top: 76px; }
body { margin: 0; padding-bottom: 35px; color: var(--x-ink); background: transparent; font: var(--x-fs-body)/1.55 var(--x-font-ui); -webkit-font-smoothing: antialiased; }
a { color: var(--x-cyan-doc); }
a:hover { color: var(--x-cyan-doc-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--x-cyan-doc); outline-offset: 4px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: absolute; z-index: 10; top: 10px; left: 10px; padding: 12px; background: var(--x-bg-terminal); }
.card-header { position: relative; padding: 30px 20px 20px; text-align: center; }
.header-content { max-width: 440px; margin: 0 auto; text-shadow: 0 0 15px rgba(0,0,0,.9); }
.portrait { display: block; width: 200px; height: 200px; margin: 0 auto; image-rendering: pixelated; }
h1 { margin: 16px 0 4px; font-size: 24px; line-height: 1.3; color: var(--x-ink-bright); letter-spacing: .3px; }
.role { margin: 0; color: var(--x-blue-light); font-size: var(--x-fs-body-sm); font-weight: 600; }
.claim { margin: 6px 0 0; color: var(--x-ink-soft); font-size: var(--x-fs-body); }
.region { margin: 10px 0 0; color: var(--x-ink-soft); font-size: var(--x-fs-micro); }
.card-content, .card-footer { width: 100%; max-width: 480px; margin: 0 auto; padding: 0 20px; }
.terminal-panel { margin-top: 20px; padding: 7px; border: .5px solid var(--x-line-strong); border-radius: 10px; background: var(--x-bg-terminal); box-shadow: var(--x-shadow-crt); }
.status-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 15px; padding: 9px 10px; border: .5px solid var(--x-statusbar-line); border-radius: 3px; background: var(--x-statusbar-bg); color: var(--x-blue-light); font-size: var(--x-fs-micro); font-weight: 600; }
.online { margin-left: 4px; color: var(--x-green); }
.quick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-top: 12px; font-size: var(--x-fs-ui); }
.quick-actions a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-underline-offset: 3px; }
.eyebrow { margin: 0 0 12px; color: var(--x-ink-soft); font-size: var(--x-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.principles { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.principle { display: flex; gap: 12px; align-items: flex-start; padding: 14px 15px; background: var(--x-bg-raised); border: .5px solid var(--x-line-hair); border-left: 3px solid var(--phase); border-radius: 10px; }
.enable { --phase: var(--x-enable); }
.establish { --phase: var(--x-establish); }
.execute { --phase: var(--x-execute); }
.evolve { --phase: var(--x-evolve); }
.phase-marker { flex: 0 0 18px; height: 18px; margin-top: 3px; background: var(--phase); border-radius: 3px; }
.principle h3 { margin: 0; color: var(--x-ink-bright); font-size: var(--x-fs-body); line-height: 1.4; }
.principle p { margin: 3px 0 0; color: var(--x-ink-soft); font-size: var(--x-fs-micro); }
.phases { font-weight: 600; }
.phases span { white-space: nowrap; }
.phase-enable { color: var(--x-enable); }
.phase-establish { color: var(--x-establish); }
.phase-execute { color: var(--x-execute); }
.phase-evolve { color: var(--x-blue-light); }
.terminal-prompt { margin: 0; color: var(--x-blue-light); font: var(--x-fs-micro)/1.55 var(--x-font-mono); }
.contact-list { display: grid; gap: 8px; font-style: normal; }
.contact-item { display: flex; gap: 14px; align-items: center; min-height: 72px; padding: 10px 40px 10px 16px; border: .5px solid var(--x-line-hair); border-radius: 10px; background: var(--x-bg-raised); text-decoration: none; }
.contact-icon { flex: 0 0 18px; color: var(--x-blue-light); font-size: 18px; text-align: center; }
.contact-label { display: block; color: var(--x-ink-soft); font-size: var(--x-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.contact-value { display: block; overflow-wrap: anywhere; color: var(--x-ink-bright); font-size: var(--x-fs-body); font-weight: 500; }
.office { align-items: flex-start; padding: 13px 16px; background: var(--x-bg-sunken); }
.office .contact-value { color: var(--x-ink); }
.contact-actions { display: grid; gap: 10px; }
.button { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 56px; padding: 12px; border: 1px solid; border-radius: 6px; font-size: var(--x-fs-body); font-weight: 700; text-align: center; text-decoration: none; }
.save-contact { border-color: var(--x-amber); background: var(--x-tint-enable); color: var(--x-amber); }
.save-contact:hover { color: var(--x-amber); background: rgba(232,160,48,.22); }
.download-hint { margin: 0 0 4px; color: var(--x-ink-soft); font-size: var(--x-fs-micro); text-align: center; }
.book-meeting { border-color: var(--x-blue); background: var(--x-tint-evolve); color: var(--x-blue-light); }
.book-meeting:hover { color: var(--x-blue-light); background: rgba(107,141,184,.22); }
.qr-panel { padding: 26px 20px 22px; border: .5px solid var(--x-line-hair); border-radius: 10px; background: var(--x-bg-terminal); text-align: center; box-shadow: inset 0 0 10px rgba(0,0,0,.8); }
.qr-panel .eyebrow { margin-bottom: 16px; color: var(--x-blue-light); }
.qr-panel img { display: block; width: 222px; max-width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; background: white; }
.card-url { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font: var(--x-fs-micro)/1.55 var(--x-font-mono); overflow-wrap: anywhere; }
.qr-panel p { margin: 0; color: var(--x-ink-soft); font-size: var(--x-fs-micro); }
.card-footer { margin-top: 30px; color: var(--x-ink-soft); font-size: var(--x-fs-micro); line-height: 1.8; text-align: center; }
.card-footer p { margin: 6px 0; }
.card-footer p:first-child { border-top: .5px solid var(--x-line-hair); padding-top: 18px; }
.card-footer nav { display: flex; flex-wrap: wrap; gap: 0 16px; justify-content: center; margin-top: 8px; }
.card-footer nav a, .card-footer button { display: inline-flex; align-items: center; min-height: 44px; }
.card-footer button { padding: 0; border: 0; background: transparent; color: var(--x-cyan-doc); font: inherit; text-decoration: underline; cursor: pointer; }
@media (hover: hover) { a.contact-item:hover { background: var(--x-tint-evolve); border-color: var(--x-blue); box-shadow: 0 0 12px rgba(107,141,184,.2); } }
@media (prefers-reduced-motion: no-preference) {
  a.contact-item, .button { transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
  a.contact-item:hover, .button:hover { transform: translateY(-2px); }
  .button:active { transform: translateY(0); }
}

/* Leiterbahn-Design (wie Startseite v1.2): Kopfleiste, Reiter, Rahmen */
.card-topbar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: color-mix(in srgb, var(--x-bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: .5px solid var(--x-line-hair); }
.card-topbar .logo-link { font-size: 28px; letter-spacing: 2px; }
.qr-panel > .tab-label { left: 50%; transform: translateX(-50%); }
.approach-intro { margin-bottom: 18px; }
.approach-intro h3 { margin: 0; color: var(--x-ink-bright); font-size: var(--x-fs-h3); line-height: var(--x-lh-head); }
.approach-intro p { margin: 12px 0 0; color: var(--x-ink-soft); }
.principle.cb-box { border-left-color: var(--phase) !important; }
.contact-icon-in { font-weight: 700; font-size: 15px; }
[data-mode="light"] .status-bar { background: var(--x-bg-sunken); color: var(--x-ink); border-color: var(--x-line); }
[data-mode="light"] .qr-panel { box-shadow: none; }