/* ==========================================================================
   Kanreki – Design-System
   Alle Farben, Abstände und Schriftgrößen stehen als CSS-Variablen in :root.
   Wer etwas ändern will, ändert es dort – nicht weiter unten.
   ========================================================================== */
:root{
  --sumi:#14161A; --sumi-80:#3A3D42; --sumi-60:#63676D; --sumi-40:#8D9095;
  --shu:#D64525; --shu-tief:#A8341C;
  --washi:#F6F3EE; --hai:#E3DFD8; --kiri:#6E7377; --weiss:#FFFFFF;
  --ai:#23405C; --matcha:#6E8B6B; --kincha:#C08B2E; --fuji:#6D6A97;
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-text:"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,"SF Mono",monospace;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px;
  --sp-8:64px; --sp-12:96px; --sp-16:128px;
  --maxw:1180px; --pad:40px; --radius:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ---------- Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--washi);color:var(--sumi);font-family:var(--font-text);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  margin:0;line-height:1.15}
h1{font-size:clamp(38px,5.6vw,68px);letter-spacing:-.025em}
h2{font-size:clamp(28px,3.8vw,44px)}
h3{font-size:21px;letter-spacing:-.008em}
p{margin:0 0 1.1em}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--kiri);
  font-weight:500;margin:0 0 var(--sp-2);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:2px;background:var(--shu);display:block}
.lede{font-size:20px;color:var(--kiri);max-width:60ch}
.mono{font-family:var(--font-mono)}
section{padding:var(--sp-16) 0}
.skip{position:absolute;left:-9999px;z-index:100;background:var(--sumi);color:var(--washi);
  padding:12px 20px;text-decoration:none}
.skip:focus{left:var(--pad);top:12px}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-size:15px;
  font-weight:500;text-decoration:none;border-radius:var(--radius);border:1px solid transparent;
  transition:all .25s var(--ease);cursor:pointer}
.btn--p{background:var(--sumi);color:var(--washi)}
.btn--p:hover{background:var(--shu)}
.btn--s{border-color:var(--sumi);color:var(--sumi)}
.btn--s:hover{background:var(--sumi);color:var(--washi)}
.btn svg.arrow{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg.arrow{transform:translateX(4px)}
/* ---------- Kopfbereich ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.9);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease)}
.site-header.scrolled{border-bottom-color:var(--hai)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);height:84px}
.site-header .brand svg{width:186px;display:block}
.site-nav{display:flex;gap:var(--sp-4);align-items:center}
.site-nav a{text-decoration:none;font-size:15px;color:var(--sumi);position:relative;padding:4px 0}
.site-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--shu);transition:width .28s var(--ease)}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{width:100%}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--sumi);margin:5px 0}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:var(--sp-16) 0}
.hero__enso{position:absolute;right:-13%;top:-16%;width:min(780px,78vw);opacity:.07;
  pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--shu)}
.hero .lede{margin-top:var(--sp-3);font-size:21px}
.hero__cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero__meta{margin-top:var(--sp-12);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hai);
  border-block:1px solid var(--hai)}
.hero__meta div{background:var(--washi);padding:var(--sp-3)}
.hero__meta div:first-child{padding-left:0}
.hero__meta b{display:block;font-family:var(--font-display);font-size:34px;font-weight:600;
  letter-spacing:-.02em}
.hero__meta span{font-size:13px;color:var(--kiri)}
/* ---------- Leistungen ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:1px;background:var(--hai);border:1px solid var(--hai);margin-top:var(--sp-8)}
.service{background:var(--washi);padding:var(--sp-4);transition:background .3s var(--ease)}
.service:hover{background:var(--weiss)}
.service .num{font-family:var(--font-mono);font-size:11px;color:var(--shu);
  letter-spacing:.1em;display:block;margin-bottom:var(--sp-3)}
.service h3{margin-bottom:10px}
.service p{font-size:15px;color:var(--kiri);margin:0}
.service ul{margin:var(--sp-2) 0 0;padding:0;list-style:none;font-size:14px;color:var(--kiri)}
.service li{padding:5px 0 5px 16px;position:relative}
.service li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--hai)}
/* ---------- Dunkler Abschnitt ---------- */
.dark{background:var(--sumi);color:var(--washi);position:relative;overflow:hidden}
.dark h2,.dark h3{color:var(--washi)}
.dark .lede,.dark .kicker{color:var(--sumi-40)}
.dark__enso{position:absolute;left:-10%;bottom:-40%;width:min(640px,70vw);opacity:.08;z-index:0}
.dark__enso path{fill:var(--washi)}
.dark .wrap{position:relative;z-index:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-6) var(--sp-4);margin-top:var(--sp-8);counter-reset:s}
.step{padding-top:var(--sp-3);border-top:1px solid var(--sumi-80);position:relative}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-13px;left:0;
  background:var(--sumi);padding-right:12px;font-family:var(--font-mono);font-size:11px;
  color:var(--shu);letter-spacing:.1em}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:15px;color:var(--sumi-40);margin:0}
/* ---------- Plattformen ---------- */
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--hai);border:1px solid var(--hai);margin-top:var(--sp-6)}
.stack div{background:var(--washi);padding:var(--sp-3);font-size:14px;color:var(--kiri)}
.stack b{display:block;color:var(--sumi);font-weight:500;font-size:15px;margin-bottom:4px}
/* ---------- Zitat / Story ---------- */
.quote{border-left:2px solid var(--shu);padding-left:var(--sp-4);max-width:38ch;
  font-family:var(--font-display);font-size:clamp(22px,2.8vw,30px);line-height:1.35}
.quote cite{display:block;font-family:var(--font-text);font-size:14px;font-style:normal;
  color:var(--kiri);margin-top:var(--sp-3);letter-spacing:.04em}
.story{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--sp-12);align-items:center}
.story__kanji{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif;
  font-size:clamp(96px,13vw,150px);line-height:1;text-align:center;color:var(--sumi);
  border:1px solid var(--hai);background:var(--weiss);padding:var(--sp-6) 0}
.story__kanji small{display:block;font-family:var(--font-text);font-size:11px;
  letter-spacing:.24em;color:var(--kiri);margin-top:var(--sp-2)}
/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:start}
.form{display:grid;gap:var(--sp-2)}
.field{display:grid;gap:6px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--kiri)}
.field input,.field textarea{font-family:inherit;font-size:16px;padding:13px 14px;
  border:1px solid var(--hai);background:var(--weiss);color:var(--sumi);border-radius:var(--radius)}
.field input:focus,.field textarea:focus{outline:2px solid var(--shu);outline-offset:1px;
  border-color:transparent}
.form .note{font-size:13px;color:var(--kiri);margin:0}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--kiri)}
.form .consent input{margin-top:3px;accent-color:var(--shu)}
.contact__facts{font-size:15px}
.contact__facts dl{display:grid;grid-template-columns:120px 1fr;gap:10px 20px;margin:var(--sp-4) 0 0}
.contact__facts dt{color:var(--kiri);font-size:13px;letter-spacing:.06em}
.contact__facts dd{margin:0}
/* ---------- Rechtsseiten ---------- */
.page-head{padding:var(--sp-12) 0 var(--sp-6);border-bottom:1px solid var(--hai)}
.page-head h1{font-size:clamp(34px,4.6vw,52px);max-width:20ch}
.prose{max-width:74ch;padding:var(--sp-8) 0 var(--sp-16)}
.prose h2{font-size:26px;margin:var(--sp-8) 0 var(--sp-2)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:var(--sp-4) 0 var(--sp-1)}
.prose p,.prose li{font-size:16px;line-height:1.7}
.prose ul{padding-left:20px;margin:0 0 1.1em}
.prose li{margin-bottom:6px}
.prose a{color:var(--shu-tief)}
.prose dl{display:grid;grid-template-columns:190px 1fr;gap:8px 24px;margin:0 0 var(--sp-4);
  font-size:16px}
.prose dt{color:var(--kiri);font-size:14px;padding-top:2px}
.prose dd{margin:0}
.prose .addr{font-style:normal;line-height:1.8;margin-bottom:var(--sp-4)}
.prose small{display:block;font-size:13px;color:var(--kiri);line-height:1.6;margin-top:var(--sp-2)}
.ph{font-family:var(--font-mono);font-size:.88em;background:rgba(214,69,37,.10);
  color:var(--shu-tief);padding:2px 7px;border-radius:2px;white-space:nowrap}
.hinweis{border:1px solid var(--shu);background:rgba(214,69,37,.06);padding:var(--sp-3);
  margin:0 0 var(--sp-6);font-size:15px;line-height:1.6}
.hinweis b{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--shu-tief)}
.toc-legal{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0 0 var(--sp-4);margin:0;
  list-style:none;font-size:14px}
.toc-legal a{color:var(--kiri);text-decoration:none;border-bottom:1px solid var(--hai)}
.toc-legal a:hover{color:var(--sumi);border-color:var(--shu)}
/* ---------- Fußbereich ---------- */
footer{background:var(--sumi);color:var(--sumi-40);padding:var(--sp-12) 0 var(--sp-6);font-size:14px}
footer .top{display:flex;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap;
  padding-bottom:var(--sp-6);border-bottom:1px solid var(--sumi-80)}
footer .brand svg{width:200px;margin-bottom:var(--sp-3)}
footer nav{display:flex;gap:var(--sp-6);flex-wrap:wrap}
footer nav a{text-decoration:none;color:var(--sumi-40)}
footer nav a:hover{color:var(--washi)}
footer .bottom{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding-top:var(--sp-4);font-size:13px}
/* ---------- Bewegung ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* ---------- Mobil ---------- */
@media(max-width:900px){
  :root{--pad:22px;--sp-16:80px;--sp-12:56px}
  .story,.contact{grid-template-columns:1fr;gap:var(--sp-6)}
  .prose dl{grid-template-columns:1fr;gap:2px}
  .prose dt{margin-top:10px}
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:84px 0 auto;background:var(--washi);flex-direction:column;
    align-items:flex-start;gap:0;padding:var(--sp-3) var(--pad) var(--sp-6);
    border-bottom:1px solid var(--hai);transform:translateY(-120%);
    transition:transform .35s var(--ease);z-index:40}
  .site-nav.open{transform:none}
  .site-nav a{padding:14px 0;width:100%;border-bottom:1px solid var(--hai);font-size:17px}
  .site-nav .btn{margin-top:var(--sp-3)}
  .site-header .brand svg{width:150px}
}
/* ---------- Druck ---------- */
@media print{
  .site-header,footer,.hero__enso,.dark__enso,.hinweis{display:none}
  body{background:#fff;font-size:11pt}
}