/* Page chrome around the desk scene. Design "Druckerschwärze" (chosen 2026-10-14): anthracite page,
   the logo's orange as the only accent, Space Grotesk display, Inter body, JetBrains Mono meta layer.
   Bands: hero · desk (darker) · services · about (surface) · contact (orange) · footer (black). */
:root{
  --paper:#1B1B1A; --ink:#F3F1EC; --accent:#EF9722; --accent-ink:#F3A43C; --on-accent:#1B1B1A; --surface:#242423; --surface-2:#161615;
  --muted:#A6A39D; --line:rgba(243,241,236,.12); --radius:12px; --panel-radius:24px; --orange:#EF9722;
  --content:1200px; --gutter:40px;
  --f-display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ui:var(--f-body);
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
  --f-music:"Noto Music","Bravura Text",serif;
  --hand:"Kalam","Comic Sans MS",cursive;
  /* scene (draft A "Tageslicht", cooler wall for the dark page) */
  --stage:var(--surface-2); --wall:linear-gradient(180deg,#d9dfe1,#bcc6c9); --desk:linear-gradient(180deg,#c99f70 0,#b48659 60%,#a67a4e); --desk-front:#80562f;
  --ink-pad:#1f2a44; --mon:#111111; --mon-stand:linear-gradient(90deg,#6d7174,#9a9ea1 45%,#5e6265); --mon-glow:0 1.2cqw 2.4cqw rgba(0,0,0,.45);
  --kb:#dcdcd6; --key:#f7f7f3; --key-edge:rgba(0,0,0,.14); --mouse:#f2f2ee;
  --cup:#f4f2ec; --coffee:#5a3820; --saucer:#e4e0d6; --steam:rgba(255,255,255,.85);
  --pad:#f7e27c; --pad-line:rgba(60,100,170,.32); --pad-margin:rgba(205,60,55,.55); --pad-ink:#1f2a44; --pad-hi:#c2361f;
  --cpad:#fbfaf4; --shadow:rgba(70,45,20,.32);
  /* screens stay light (daylight), orange accent darkened for contrast on paper, blue as counter colour */
  --s-bg:#ECE9E2; --s-paper:#FBFAF7; --s-fg:#2A2624; --s-mute:#6E6862; --s-acc:#D9820F; --s-acc2:#3F6A8A; --s-line:rgba(42,38,36,.18); --s-grid:rgba(217,130,15,.22); --s-bar:#DCD8CF; --s-ok:#3F8A4F;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{background:var(--paper);margin:0}
body{color:var(--ink);font:400 16px/1.55 var(--f-body);overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band.accent :focus-visible{outline-color:var(--on-accent)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent);padding:8px 12px;border-radius:var(--radius);font:500 13px/1 var(--f-body)}
.skip:focus{top:12px}

/* bands */
.band{position:relative;padding:clamp(64px,9vw,120px) 0}
.band+.band{border-top:1px solid var(--line)}
.band.surface{background:var(--surface-2)}
.band.dark{background:var(--surface)}
.band.accent{background:var(--accent);color:var(--on-accent);--line:rgba(27,27,26,.25);--muted:#4A3415}
.inner{position:relative;max-width:var(--content);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}

/* meta layer and display type */
.idx{margin:0 0 18px;font:400 11px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.band.accent .idx{color:var(--on-accent)}
h2.title,.legal h1{margin:0 0 28px;font:700 clamp(40px,5vw,64px)/.95 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
h2.title::after,.legal h1::after{content:"";display:block;width:56px;height:3px;margin-top:22px;background:var(--accent)}
.band.accent h2.title::after{background:var(--on-accent)}
.sec .intro{margin:0 0 40px;max-width:60ch;font-size:18px;text-wrap:pretty}

/* header */
.top{position:sticky;top:0;z-index:50;padding:14px 0;background:rgba(27,27,26,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.brand{display:inline-flex;color:inherit;text-decoration:none}
.logo-img{display:block;width:auto;height:30px;aspect-ratio:249.84/52.2}
.top nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.top nav a{font:500 14px/1 var(--f-body);text-decoration:none;padding:9px 2px;margin:0 10px;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* hero */
.hero{padding:40px 0 64px;background:radial-gradient(55% 60% at 12% 0%,rgba(239,151,34,.16),transparent 70%)}
.hero-title{margin:0 0 22px;max-width:16ch;font:700 clamp(44px,7vw,92px)/.98 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.hero-hl{color:var(--accent)}
.lead{margin:0;max-width:56ch;font:400 clamp(20px,2.2vw,26px)/1.4 var(--f-body);text-wrap:pretty}
.lead strong{font-weight:500;box-shadow:inset 0 -.12em 0 var(--accent)}
.hero-chips{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-chips li{border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:500 13px/1 var(--f-body)}

/* stage band */
.band.stage{padding:40px 0}

/* services */
.services .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.services article{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,transform .2s}
.services article:hover{border-color:var(--accent);transform:translateY(-2px)}
.services .num{position:absolute;right:20px;top:20px;font:600 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--accent)}
.services h3{margin:0 40px 0 0;font:700 22px/1.1 var(--f-display);letter-spacing:-.02em}
.services .tool{margin:0;font:500 14px/1.3 var(--f-body);color:var(--muted)}
.services ul{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:5px;font-size:15px}
.services .show{margin-top:18px;align-self:flex-start;font:500 13px/1 var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;cursor:pointer}
.services .show:hover{border-color:var(--accent);color:var(--accent)}

/* about */
.about .two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 64px;align-items:start}
.about p{margin:0 0 16px;max-width:60ch;font-size:18px;text-wrap:pretty}
.about dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-content:start}
.about dt,.about dd{margin:0;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.about dt{font:400 11px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:14px}

/* contact */
.contact .intro{color:inherit}
.contact .act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-block;font:600 15px/1 var(--f-body);padding:15px 20px;border-radius:10px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);cursor:pointer;text-decoration:none}
.band.accent .btn{background:var(--on-accent);color:var(--ink);border-color:var(--on-accent)}
.btn.alt,.band.accent .btn.alt{background:transparent;color:inherit;border-color:var(--line)}
.btn.alt:hover{border-color:currentColor}
.cform{color-scheme:light}

/* footer */
.site-foot{background:#0F0F0E;padding:48px 0}
.site-foot .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;font:400 11px/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-foot a{text-decoration:none;border-bottom:1px solid transparent}
.site-foot a:hover{border-bottom-color:currentColor}

/* legal pages */
.legal{max-width:72ch}
.legal h2{margin:36px 0 10px;font:700 20px/1.1 var(--f-display);letter-spacing:-.02em}
.legal p,.legal li{text-wrap:pretty}
.legal address{font-style:normal}
.legal a{box-shadow:inset 0 -.12em 0 var(--accent);text-decoration:none}

@media (max-width:1199px){
  .services .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  :root{--gutter:16px}
  .band{padding:48px 0}
  h2.title,.legal h1{font-size:40px}
  .hero{padding:24px 0 40px}
  .hero-title{font-size:44px}
  .top{padding:10px 0}
  .top nav a{margin:0 6px 0 0}
  .services .grid{grid-template-columns:1fr}
  .about .two-col{grid-template-columns:1fr}
  .site-foot .inner{flex-direction:column;align-items:flex-start}
}