/* Hallmark · route: custom (bespoke) · macrostructure: Narrative Workflow · nav: N9 · footer: Ft5
 * idea: "Die Website entsteht beim Scrollen als belastbare Planungsunterlage."
 * theme: custom · vibe: "technische Präzision, puristische Ruhe, leiser Luxus" · paper: oklch(15% .012 78) · accent: oklch(72% .13 75)
 * display: Bodoni Moda · body: IBM Plex Sans · axes: dark / roman-serif / chromatic-amber · studied: no · context: explicit
 * contrast: pass (40–41) · nav/footer: pass (42–45) · honest/chrome/tokens: pass (46–48) · mobile: pass (34,49–57)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
@import url("../tokens.css?v=20260802-hallmark");

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;background:var(--color-paper)}
body{margin:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);font-weight:350;line-height:1.6}
body.form-busy{cursor:progress}
h1,h2,h3{min-width:0;overflow-wrap:anywhere}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit}
button{color:inherit}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}

.shell,.container{width:min(100%,var(--content-max));margin-inline:auto;padding-inline:var(--page-gutter)}
.skip-link{position:fixed;inset-block-start:var(--space-md);inset-inline-start:var(--space-md);z-index:var(--z-tooltip);padding:var(--space-sm) var(--space-md);background:var(--color-accent);color:var(--color-accent-ink);transform:translateY(-200%);text-decoration:none}
.skip-link:focus{transform:none}

.site-header{position:fixed;inset:0 0 auto;z-index:var(--z-sticky-nav);height:var(--banner-height);background:var(--color-paper);color:var(--color-ink);border-block-end:var(--rule-hair) solid var(--color-rule)}
.nav-edge{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.brand{display:block;flex:0 1 10.5rem}
.brand img{width:100%;height:auto}
.nav-cta,.contact-link,.back{display:inline-flex;min-height:2.75rem;align-items:center;gap:var(--space-sm);white-space:nowrap;text-decoration:none;font-weight:600}
.nav-cta{flex:0 0 auto;border-block-end:var(--rule-hair) solid var(--color-accent)}
.nav-cta::after,.contact-link::after{content:"↗";color:var(--color-accent)}
.nav-cta:active,.contact-link:active,.back:active{transform:translateY(var(--space-3xs))}

.opening{padding-block-start:calc(var(--banner-height) + var(--space-2xl));padding-block-end:calc(var(--space-4xl) + var(--space-2xl))}
.opening-rule{width:100%;height:var(--rule-hair);margin-block-end:var(--space-xl);background:var(--color-rule);transform:scaleX(0);transform-origin:left;animation:rule-enter var(--dur-long) var(--ease-out) forwards}
.opening-grid{display:grid;gap:var(--space-xl)}
.opening-kicker{margin:0;font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;color:var(--color-ink-2)}
.opening h1{min-width:0;max-width:11ch;margin:0;font-family:var(--font-display);font-size:var(--text-display);font-style:normal;font-weight:500;line-height:.96;letter-spacing:-.035em;overflow-wrap:anywhere}
.opening-copy{display:grid;align-content:end;gap:var(--space-lg);max-width:60ch}
.opening-copy p{margin:0;color:var(--color-ink-2);font-size:var(--text-md);line-height:1.45}
.opening-enter{opacity:0;transform:translateY(var(--space-sm));animation:opening-enter var(--dur-long) var(--ease-out) forwards;animation-delay:120ms}
.opening-index{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin:var(--space-2xl) 0 0;padding:var(--space-md) 0 0;border-block-start:var(--rule-hair) solid var(--color-rule);list-style:none;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--color-muted)}

.workflow{position:relative;border-block-start:var(--rule-strong) solid var(--color-ink)}
.workflow-step{position:relative;display:grid;gap:var(--space-xl);padding-block:var(--space-3xl);padding-inline:max(var(--page-gutter),calc((100% - var(--content-max))/2 + var(--page-gutter)));border-block-end:var(--rule-hair) solid var(--color-rule)}
.workflow-step:nth-child(even){background:var(--color-paper-2);color:var(--color-ink)}
.stage-id{display:flex;align-items:center;gap:var(--space-md);font-family:var(--font-outlier);font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--color-muted)}
.stage-id::after{content:"";width:3rem;height:var(--rule-hair);background:var(--color-rule)}
.workflow-step.is-active .stage-id{color:var(--color-accent)}
.stage-copy{min-width:0;display:grid;align-content:start;gap:var(--space-lg)}
.stage-copy h2{min-width:0;max-width:12ch;margin:0;font-family:var(--font-display);font-size:var(--text-display-s);font-style:normal;font-weight:500;line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.stage-copy>p{max-width:57ch;margin:0;color:var(--color-ink-2);font-size:var(--text-md)}
.stage-aside{align-self:start;display:grid;gap:var(--space-md);padding-block-start:var(--space-sm);border-block-start:var(--rule-hair) solid var(--color-rule)}
.stage-aside p{margin:0;color:var(--color-muted)}
.stage-aside strong{font-weight:600;color:var(--color-ink)}
.stage-aside ul{display:grid;gap:var(--space-sm);margin:0;padding:0;list-style:none}
.stage-aside li{display:flex;justify-content:space-between;gap:var(--space-md);padding-block-end:var(--space-sm);border-block-end:var(--rule-hair) solid var(--color-rule-2)}
.stage-aside li span{font-size:var(--text-xs);font-weight:600;color:var(--color-muted)}
.stage-measure{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-sm);font-family:var(--font-outlier);font-size:var(--text-xs);color:var(--color-muted)}
.stage-measure::before,.stage-measure::after{content:"";height:var(--rule-hair);background:var(--color-rule)}

.capability-list{margin:var(--space-lg) 0 0;padding:0;border-block-start:var(--rule-hair) solid var(--color-rule);list-style:none}
.capability-list li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-md);border-block-end:var(--rule-hair) solid var(--color-rule)}
.capability-list span{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:var(--color-accent)}
.capability-list strong{font-weight:500}
.profile-facts{display:grid;gap:var(--space-lg);margin-block-start:var(--space-lg)}
.profile-facts p{margin:0}
.profile-facts p+p{color:var(--color-muted)}

.questions{padding-block:var(--space-4xl);background:var(--color-paper-2);color:var(--color-ink)}
.questions-grid{display:grid;gap:var(--space-2xl)}
.questions-intro{align-self:start}
.questions h2{max-width:9ch;margin:0;font-family:var(--font-display);font-size:var(--text-display-s);font-style:normal;font-weight:500;line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere}
.faq-list{border-block-start:var(--rule-strong) solid var(--color-ink)}
.faq-item{border-block-end:var(--rule-hair) solid var(--color-rule)}
.faq-item h3{margin:0;padding:var(--space-md) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-md);font-size:var(--text-md);font-weight:500}
.faq-button{width:3rem;height:3rem;padding:0;border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-control);background:transparent;display:grid;place-items:center;cursor:pointer}
.faq-button span{color:var(--color-accent);transition:transform var(--dur-short) var(--ease-in-out)}
.faq-button[aria-expanded="true"] span{transform:rotate(45deg)}
.faq-button:active{transform:translateY(var(--space-3xs))}
.faq-button:disabled{opacity:.55;cursor:not-allowed}
.faq-panel{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--dur-long) var(--ease-in-out),opacity var(--dur-short) var(--ease-out)}
.faq-panel[aria-hidden="false"]{grid-template-rows:1fr;opacity:1;visibility:visible}
.faq-panel>div{overflow:hidden}
.faq-panel p{max-width:64ch;margin:0;padding:0 var(--space-xl) var(--space-lg) 0;color:var(--color-ink-2)}

.contact{padding-block:var(--space-4xl);background:var(--color-ink);color:var(--color-paper)}
.contact-grid{display:grid;gap:var(--space-3xl)}
.contact-intro{display:grid;align-content:start;gap:var(--space-lg)}
.contact h2{min-width:0;max-width:10ch;margin:0;font-family:var(--font-display);font-size:var(--text-display);font-style:normal;font-weight:500;line-height:.96;letter-spacing:-.035em;overflow-wrap:anywhere}
.contact-intro>p{max-width:45ch;margin:0;color:var(--color-paper-3);font-size:var(--text-md)}
.contact-address{font-style:normal;color:var(--color-paper-2)}
.contact-address a{color:inherit}
.contact-form{display:grid;gap:var(--space-lg)}
.form-row{display:grid;gap:var(--space-lg)}
.field{display:grid;gap:var(--space-xs);margin:0}
.field label{font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:var(--color-paper-3)}
.field input,.field textarea{width:100%;border:var(--rule-hair) solid var(--color-paper-3);border-radius:var(--radius-control);outline:var(--rule-strong) solid transparent;outline-offset:var(--rule-hair);background:var(--color-ink);color:var(--color-paper);padding:var(--space-sm) var(--space-md);transition:background-color var(--dur-short) var(--ease-out)}
.field input{min-height:3rem}
.field textarea{min-height:9rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--color-neutral)}
.field input:disabled,.field textarea:disabled{opacity:.55;cursor:not-allowed}
.field input:user-invalid,.field textarea:user-invalid,.field.is-error input,.field.is-error textarea{border-color:var(--color-error)}
.field.is-success input,.field.is-success textarea{border-color:var(--color-success)}
.field-helper{min-height:1lh;margin:0;color:var(--color-paper-3);font-size:var(--text-sm)}
.submit-button{min-height:3rem;padding:var(--space-sm) var(--space-md);border:var(--rule-hair) solid var(--color-paper);border-radius:var(--radius-control);background:var(--color-paper);color:var(--color-ink);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);font-weight:600;white-space:nowrap;cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out)}
.submit-button:active{transform:translateY(var(--space-3xs))}
.submit-button:disabled,.submit-button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.submit-button[data-state="loading"]::after{content:"○"}
.submit-button[data-state="error"]{border-color:var(--color-error)}
.submit-button[data-state="success"]{border-color:var(--color-success)}
.status-message{margin:0;padding:var(--space-md);border:var(--rule-hair) solid currentColor}
.form-honeypot{position:absolute!important;inset-inline-start:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.site-footer{padding-block:var(--space-3xl) var(--space-xl);background:var(--color-paper);color:var(--color-ink)}
.footer-statement{max-width:22ch;margin:0 0 var(--space-3xl);font-family:var(--font-display);font-size:var(--text-display-s);font-style:normal;font-weight:500;line-height:1;letter-spacing:-.03em}
.footer-meta{display:flex;flex-direction:column;gap:var(--space-lg);padding-block-start:var(--space-md);border-block-start:var(--rule-hair) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg)}
.footer-links a{white-space:nowrap}

.legal-main{padding-block-start:calc(var(--banner-height) + var(--space-3xl));padding-block-end:var(--space-4xl)}
.legal-page{max-width:70rem}
.legal-page .back{margin-block-end:var(--space-2xl);color:var(--color-ink-2)}
.legal-page h1{max-width:10ch;margin:0 0 var(--space-3xl);font-family:var(--font-display);font-size:var(--text-display);font-style:normal;font-weight:500;line-height:1}
.legal-page h2{margin:var(--space-2xl) 0 var(--space-md);font-family:var(--font-display);font-size:var(--text-xl);font-style:normal;font-weight:600;line-height:1.15}
.legal-page p{max-width:72ch;margin:0 0 var(--space-lg);color:var(--color-ink-2)}
.legal-footer{padding-block:var(--space-xl);border-block-start:var(--rule-hair) solid var(--color-rule)}

:focus-visible{outline:var(--rule-strong) solid var(--color-focus);outline-offset:var(--space-2xs)}
.contact :focus-visible{outline-color:var(--color-paper);box-shadow:0 0 0 var(--space-2xs) var(--color-focus)}

@media(hover:hover) and (pointer:fine){
  .nav-cta:hover,.contact-link:hover,.back:hover{color:var(--color-accent)}
  .faq-button:hover{color:var(--color-accent)}
  .field input:hover,.field textarea:hover{background:var(--color-ink-2);color:var(--color-paper)}
  .submit-button:hover{background:var(--color-paper-2);transform:translateY(calc(var(--space-3xs) * -1))}
}

@media(min-width:40rem){
  .brand{flex-basis:12rem}
  .opening-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);align-items:end}
  .workflow-step{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);column-gap:var(--space-2xl)}
  .stage-aside{grid-column:2}
  .form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-meta{flex-direction:row;justify-content:space-between;align-items:baseline}
}

@media(min-width:60rem){
  .workflow-step{min-height:38rem;grid-template-columns:minmax(0,1.65fr) minmax(0,.75fr);column-gap:var(--space-4xl);align-items:start;padding-block:var(--space-4xl)}
  .stage-aside{grid-column:auto;position:sticky;inset-block-start:calc(var(--banner-height) + var(--space-xl))}
  .questions-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--space-4xl)}
  .questions-intro{position:sticky;inset-block-start:calc(var(--banner-height) + var(--space-xl))}
  .contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-4xl)}
}

@media(min-width:90rem){
  .workflow-step{grid-template-columns:minmax(0,1.7fr) minmax(0,.7fr)}
}

@media(pointer:coarse){.nav-cta,.contact-link,.back,.faq-button,.submit-button{min-height:3rem}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:150ms!important;animation-iteration-count:1!important;transition-duration:150ms!important}
  .opening-enter{opacity:1;transform:none}
  .opening-rule{transform:none}
}

@keyframes opening-enter{to{opacity:1;transform:none}}
@keyframes rule-enter{to{transform:none}}