/* App bar and contact card · approved October 15, 2026. */
.project-index {--contact-focus:light-dark(#888,#aaa);}
.project-index .nav.nav-understated {top:24px;width:min(1180px,calc(100% - 48px));max-width:none;gap:16px;flex-wrap:nowrap;}
.project-index .nav .index-brand {display:block;flex:0 1 auto;margin-left:-4px;font:500 13px/1.2 'DM Sans',Arial,sans-serif;}
.project-index .nav .index-brand small {margin-top:3px;font:400 12px/1.2 'DM Sans',Arial,sans-serif;}
.project-index .nav.nav-understated .monogram {width:40px;height:40px;min-width:40px;min-height:40px;flex-shrink:0;background:#0b0b0f;color:#fbfbfc;border-radius:50%;}
.project-index .nav .monogram::before {display:none;}
.project-index .nav .monogram-mark {position:absolute;inset:4%;width:92%;height:92%;}
.project-index .nav .nav-links {margin:0 0 0 auto;gap:4px;order:0;width:auto;flex-wrap:nowrap;}
.project-index .nav .nav-links a {height:36px;min-height:36px;padding:0 14px;border-radius:99px;font:400 13px/1 'DM Sans',Arial,sans-serif;color:var(--ink);}
.project-index .nav .nav-links a:hover,.project-index .nav .nav-links a[aria-current="page"] {background:var(--surface-hover);text-decoration:none;}
.project-index .nav .nav-links a::after {display:none;}
.project-index .nav .nav-actions {width:auto;order:0;margin:0;gap:0;}
.project-index .nav .theme-control {width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:var(--surface-hover);}
.project-index .nav .theme-control svg {width:16px;height:16px;}
.project-index .contact-trigger {display:flex;align-items:center;flex-shrink:0;gap:8px;height:40px;padding:0 6px 0 16px;border:0;border-radius:99px;background:var(--ink);color:var(--paper);font:500 13px/1 'DM Sans',Arial,sans-serif;white-space:nowrap;cursor:pointer;}
.contact-trigger-arrow {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--ink);}
.contact-trigger[aria-expanded="true"] {box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 14%,transparent);}
.project-index.contact-open .nav {z-index:460;}
.contact-overlay {position:fixed;inset:0;z-index:450;background:light-dark(#17231c66,#000a);backdrop-filter:blur(3px);animation:contact-fade 200ms ease;}
.contact-overlay[hidden],.contact-popover [hidden] {display:none!important;}
.contact-popover {container:contact / inline-size;position:fixed;top:76px;right:max(24px,calc(50% - 590px));width:min(392px,calc(100% - 32px));max-height:calc(100dvh - 100px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 24px 50px -22px light-dark(#29372955,#000a);font:400 14px/1.4 'DM Sans',Arial,sans-serif;transform-origin:calc(100% - var(--contact-caret-right,48px)) 0;animation:contact-in 360ms ease-out;}
.contact-popover * {box-sizing:border-box;}
.contact-popover a {color:inherit;text-decoration:none;}
.contact-popover button,.contact-popover input,.contact-popover textarea {font-family:inherit;color:inherit;}
.contact-popover button {cursor:pointer;}
.contact-popover :focus-visible,.project-index .nav :focus-visible {outline:2px solid var(--contact-focus);outline-offset:2px;}
.contact-caret {position:absolute;top:-7px;right:var(--contact-caret-right,48px);width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);}
.contact-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:20px;}
.contact-head {display:flex;align-items:center;gap:12px;padding:18px 18px 16px;}
.contact-monogram {position:relative;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#0b0b0f;color:#fbfbfc;container-type:inline-size;}
.contact-monogram .monogram-mark {position:absolute;inset:4%;width:92%;height:92%;}
.contact-identity {display:flex;flex-direction:column;gap:2px;min-width:0;}
.contact-name {font:700 15px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.02em;}
.contact-available {display:flex;align-items:center;gap:6px;font-size:12px;color:var(--accent);}
.contact-available::before {content:'';flex-shrink:0;width:7px;height:7px;border-radius:50%;background:light-dark(#4f9a6b,#7fc59a);box-shadow:0 0 0 3px light-dark(#4f9a6b2e,#7fc59a2e);}
.contact-mail {display:flex;align-items:center;gap:8px;margin:0 12px;padding:10px 10px 10px 14px;border-radius:14px;background:var(--paper);}
.contact-mail a {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;user-select:text;}
.contact-copy {flex-shrink:0;margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:12px;font-weight:500;}
.contact-copy:hover {background:var(--surface-hover);}
.contact-copy-feedback {margin:6px 18px;font-size:12px;color:var(--muted);}
.contact-list {display:flex;flex-direction:column;padding:8px 6px;}
.contact-row {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:14px;background:transparent;text-align:left;transition:background 200ms;}
.contact-row:hover {background:var(--paper);}
.contact-row-text {display:flex;flex-direction:column;gap:3px;}
.contact-kicker {font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.contact-row-title {font-size:14px;font-weight:500;line-height:1.4;}
.contact-row-sub {font-size:12px;color:var(--muted);}
.contact-row-icon {display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;}
.contact-row-icon.is-solid {border:0;background:var(--ink);color:var(--paper);}
.contact-foot {display:flex;align-items:center;gap:4px;margin:0;flex-wrap:nowrap;line-height:1.4;padding:8px 10px 10px 18px;border-top:1px solid light-dark(#eef0e9,#343833);}
.contact-languages {font-size:12px;color:var(--muted);}
.contact-foot .hero-socials {display:flex;flex-shrink:0;gap:2px;margin:0 0 0 auto;order:0;width:auto;}
.contact-foot .social-profile {display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);}
.contact-foot [data-profile="dribbble"] {display:none;}
.contact-foot .social-profile:hover {background:var(--surface-hover);}
.contact-foot .social-profile svg {width:17px;height:17px;stroke-width:1.7;}
.contact-flow {display:flex;flex-direction:column;gap:16px;padding:18px;}
.contact-flow-top {display:flex;align-items:center;gap:10px;}
.contact-back {display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;margin-left:-4px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:15px;}
.contact-back:hover {background:var(--surface-hover);}
.contact-step {margin-left:auto;flex-shrink:0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.contact-flow h3 {margin:0;font:700 17px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance;}
.contact-intro {margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted);}
.contact-field {display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;}
.contact-required {margin-left:2px;color:light-dark(#b4533f,#e08c78);}
.contact-optional {margin-left:4px;font-size:12px;font-weight:400;color:light-dark(#8a918b,#8f968f);}
.contact-field input,.contact-field textarea {width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;font-weight:400;outline:none;}
.contact-field input {height:44px;padding:0 14px;}
.contact-field textarea {padding:12px 14px;line-height:1.55;resize:none;}
.contact-field input:focus,.contact-field textarea:focus {border-color:var(--contact-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--contact-focus) 12%,transparent);}
.contact-field input::placeholder,.contact-field textarea::placeholder {color:light-dark(#8a918b,#8f968f);opacity:1;}
.contact-chips-group {display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:500;}
.contact-chips {display:flex;flex-wrap:wrap;gap:6px;}
.contact-chip {height:34px;padding:0 13px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font-size:13px;font-weight:500;transition:background 200ms,color 200ms,border-color 200ms;}
.contact-chip[aria-pressed="true"] {background:var(--ink);border-color:var(--ink);color:var(--paper);}
.contact-honeypot {position:fixed;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-flow-foot {display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;}
.contact-note {flex:1;min-width:160px;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
.contact-send {display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 18px;border:0;border-radius:99px;background:var(--ink);color:var(--paper)!important;font-size:14px;font-weight:500;white-space:nowrap;transition:background 200ms,color 200ms;}
.contact-send-icon {display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);color:var(--ink);}
.contact-send:disabled {cursor:default;}
.contact-send[data-state="incomplete"] {background:light-dark(#e4e5e3,#3a3c3b);color:light-dark(#8b8f8c,#8e928f)!important;}
.contact-send[data-state="incomplete"] .contact-send-icon {background:var(--surface);color:light-dark(#a3a6a4,#6f7370);}
.contact-success {position:relative;display:grid;justify-items:center;padding:20px 24px 24px;text-align:center;}
.contact-success-close {position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;}
.contact-success-close:hover {background:var(--surface-hover);}
.contact-success-art {position:relative;display:grid;place-items:center;width:160px;height:145px;margin:12px 0 2px;}
.contact-success-seal {display:grid;place-items:center;width:102px;height:102px;border:8px solid var(--surface);border-radius:31px;background:light-dark(#d7ebf3,#41616f);color:var(--ink);box-shadow:0 12px 23px light-dark(#20312625,#0007);transform:rotate(-9deg);font:400 29px/1 Audiowide,Arial,sans-serif;animation:contact-success-rise 420ms cubic-bezier(.16,1,.3,1) both;}
.contact-success-spark {position:absolute;font-size:23px;line-height:1;animation:contact-success-spark 420ms ease-out both;}
.contact-success-spark.one {left:4px;top:10px;color:light-dark(#77a775,#a3d39b);transform:rotate(-18deg);}
.contact-success-spark.two {right:1px;top:6px;color:light-dark(#d887b7,#e4afd0);animation-delay:60ms;}
.contact-success-spark.three {right:6px;bottom:2px;color:light-dark(#d7a629,#f2d274);animation-delay:120ms;}
.contact-success-spark.four {left:12px;bottom:4px;color:light-dark(#74adcd,#a9d1e7);animation-delay:180ms;}
.contact-success h3 {margin:0;font:600 24px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.035em;}
.contact-success p {max-width:300px;margin:9px 0 24px;color:var(--muted);font-size:13px;line-height:1.5;text-wrap:balance;}
.contact-success-done {width:100%;min-height:44px;border:0;border-radius:99px;background:var(--ink);color:var(--paper)!important;font-size:13px;font-weight:500;}
.contact-success-done:hover {background:var(--primary-hover);}
@keyframes contact-success-rise {from {opacity:0;transform:translateY(15px) rotate(-13deg) scale(.9);}to {opacity:1;transform:rotate(-9deg) scale(1);}}
@keyframes contact-success-spark {from {opacity:0;scale:.4;}to {opacity:1;scale:1;}}
@keyframes contact-fade {from {opacity:0;}to {opacity:1;}}
@keyframes contact-in {
  0% {opacity:0;transform:translateY(20px) scale(.95);}
  68% {opacity:1;transform:translateY(-4px) scale(1.012);}
  100% {opacity:1;transform:none;}
}
@media(max-width:719px) {
  html.project-index {--index-header:86px;}
  .project-index .nav.nav-understated {gap:8px;width:calc(100% - 32px);}
  .project-index .nav .index-brand {flex:1;}
  .project-index .nav .nav-menu:not([hidden]) {display:flex!important;align-items:center;justify-content:center;gap:6px;flex-shrink:0;margin-left:auto;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);font:400 13px 'DM Sans',Arial,sans-serif;}
  .project-index .nav.nav-understated.nav-enhanced .nav-links {display:none;}
  .project-index .nav.nav-understated.nav-open .nav-links {position:absolute;display:flex;top:calc(100% + 8px);right:0;width:auto;margin:0;padding:6px;gap:4px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 24px light-dark(#29372918,#0006);}
  .project-index .nav .nav-links a {padding:0 10px;}
  .project-index .nav .chat-return {margin:0;}
}
@media(max-width:559px) {
  .project-index .nav .index-brand small {display:none;}
  .project-index .nav .nav-menu:not([hidden]) {width:36px;padding:0;}
  .project-index .nav .nav-menu > span:first-child {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .project-index.index-chat-active .nav .index-brand {display:none;}
  .contact-popover {left:16px;right:16px;width:auto;}
  .contact-caret {display:none;}
}
@media(max-width:379px) {
  .project-index .nav .index-brand {display:none;}
}
@media(max-height:500px) {
  html.project-index {--index-header:76px;}
  .project-index .nav.nav-understated {top:12px;}
}
.oa-reduced-motion .contact-overlay,.oa-reduced-motion .contact-popover,.oa-reduced-motion .contact-success-seal,.oa-reduced-motion .contact-success-spark {animation:none;}
.oa-reduced-motion .contact-chip,.oa-reduced-motion .contact-row,.oa-reduced-motion .contact-send {transition:none;}
@media(prefers-reduced-motion:reduce) {
  .contact-overlay,.contact-popover,.contact-success-seal,.contact-success-spark {animation:none;}
  .contact-chip,.contact-row,.contact-send {transition:none;}
}
@media(max-width:379px) {.project-index .nav.nav-understated {gap:4px;}}

.contact-languages-short {display:none;}
@container contact (max-width:370px) {
  .contact-languages-full {display:none;}
  .contact-languages-short {display:inline;}
}
@container contact (max-width:400px) {
  .contact-languages:lang(de) .contact-languages-full {display:none;}
  .contact-languages:lang(de) .contact-languages-short {display:inline;}
}