:root{
  --bg:#171310;
  --panel:#211b17;
  --panel2:#2a221d;
  --text:#f8efe4;
  --muted:#c2b1a1;
  --line:#55463b;
  --accent:#cf5c66;
  --accent2:#a9424b;
  --good:#8fb59a;
  --danger:#d98282;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
body{padding:24px}
a{color:inherit}
.wrap{width:min(980px,100%);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:5px}
.sub{color:var(--muted);margin:0}
.card{background:linear-gradient(180deg,#101011 0%,#0b0b0c 100%);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.stat{background:#131314;border:1px solid var(--line);border-radius:14px;padding:14px}
.stat small{display:block;color:var(--muted);margin-bottom:5px}
.stat strong{font-size:1.25rem}
button,input{font:inherit}
button,.button{border:1px solid #4a4542;background:#101011;color:var(--text);padding:10px 14px;border-radius:11px;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s,transform .15s}
button:hover,.button:hover{border-color:var(--accent);background:#171112;transform:translateY(-1px)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700} button.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input{background:#111112;color:var(--text);border:1px solid #4a4542;border-radius:11px;padding:10px 12px;min-width:0;max-width:100%}
canvas{display:block;max-width:100%;height:auto;background:#050607;border:1px solid var(--line);border-radius:12px;margin:auto}
.gamebar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 0 16px}
.score{font-variant-numeric:tabular-nums;font-weight:700}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:2px 6px;color:var(--muted)}
.back{text-decoration:none;color:var(--muted)}
.back:hover{color:var(--text)}
.touch{display:grid;grid-template-columns:repeat(3,54px);gap:7px;justify-content:center;margin-top:15px}
.touch button{height:48px;padding:0;font-size:1.2rem}
footer{color:var(--muted);font-size:.85rem;margin-top:20px;text-align:center}
@media(max-width:600px){body{padding:14px}.card{padding:14px}}

/* 6.3 – warmer, less industrial */
.sitebar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px}
.sitebrand{font-weight:800;font-size:1.45rem;letter-spacing:-.035em;text-decoration:none;color:var(--text)}
.sitebrand::after{content:'';display:block;width:30px;height:2px;background:var(--accent);margin-top:5px}
.sitenav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sitenav a{color:var(--muted);text-decoration:none;padding:7px 9px;border-radius:6px}
.sitenav a:hover,.sitenav a.active{color:var(--text);background:#211d19}
@media(max-width:620px){.sitebar{align-items:flex-start}.sitenav{justify-content:flex-end;gap:1px}.sitenav a{padding:6px;font-size:.82rem}}

/* 6.4: warm visual language + identical navigation on every page */
html,body{min-height:100%;background:
  radial-gradient(circle at 15% 0%,rgba(113,76,49,.14),transparent 34%),
  linear-gradient(180deg,#171310 0%,#120f0d 100%) !important}
body{color:var(--text)}
.sitebar{
  position:fixed!important;top:0;left:0;right:0;z-index:1000;height:60px;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:0!important;padding:0 max(18px,calc((100vw - 1420px)/2))!important;
  background:rgba(23,19,16,.94)!important;border-bottom:1px solid rgba(85,70,59,.48);
  backdrop-filter:blur(12px)
}
.sitebrand{font-weight:800!important;font-size:1.35rem!important;letter-spacing:-.035em!important;text-decoration:none!important;color:var(--text)!important}
.sitebrand::after{content:''!important;display:block!important;width:30px!important;height:2px!important;background:var(--accent)!important;margin-top:4px!important}
.sitenav{display:flex!important;align-items:center!important;gap:4px!important}
.sitenav a{color:var(--muted)!important;text-decoration:none!important;padding:7px 10px!important;border-radius:7px!important}
.sitenav a:hover,.sitenav a.active{color:var(--text)!important;background:rgba(255,255,255,.055)!important}
.has-global-nav{padding-top:74px!important}
.card{background:linear-gradient(145deg,rgba(42,34,29,.96),rgba(30,25,21,.96));border-color:var(--line)}
button,.button,input,select,textarea{border-color:var(--line)!important}
@media(max-width:620px){
 .sitebar{height:56px;padding:0 10px!important}.sitebrand{font-size:1.16rem!important}
 .sitenav a{padding:6px!important;font-size:.78rem!important}.has-global-nav{padding-top:66px!important}
}

/* 6.5 – modern typography */
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{
  font-family:inherit;
  color:#fff;
  letter-spacing:-.045em;
  font-weight:650;
}
h1{font-size:clamp(1.85rem,4vw,2.55rem);line-height:1.02}
h2{letter-spacing:-.025em}
.page-kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.68rem;
  font-weight:800;
  margin-bottom:6px
}
.page-title{
  margin:0;
  font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:650;
  color:#fff
}
.page-subtitle{margin:6px 0 0;color:var(--muted);font-size:.88rem}

/* 6.6 – one visual rhythm on all subpages */
:root{--content-width:1080px}
.content-shell,.wrap{
  width:min(var(--content-width),calc(100% - 28px))!important;
  margin-left:auto!important;
  margin-right:auto!important
}
.pagehead{
  min-height:84px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:0 0 18px;
  padding:0
}
.pagehead .page-kicker{margin:0 0 5px}
.pagehead .page-title{margin:0}
.pagehead .page-subtitle{margin:6px 0 0}
@media(max-width:620px){
  .pagehead{min-height:72px;margin-bottom:12px}
}

/* 6.8 – dezente Signatur */
.made-by{
  margin:14px auto 4px;
  text-align:center;
  color:var(--muted);
  font-size:.68rem;
  letter-spacing:.04em;
  opacity:.72;
}
.made-by strong{
  color:var(--text);
  font-weight:650;
}
.made-by .heart{
  color:var(--accent);
  font-size:.78rem;
}

/* 7.0 – weinrote Gesamtfarbwelt */
:root{
  --bg:#160d12;
  --panel:#211017;
  --panel2:#2b151e;
  --text:#f8eef2;
  --muted:#c7aeb8;
  --line:#5a3443;
  --accent:#b64058;
  --accent2:#8d2f45;
  --good:#8fb59a;
  --danger:#d98282;
}
html,body{
  background:
    radial-gradient(circle at 18% 0%,rgba(139,43,67,.16),transparent 34%),
    linear-gradient(180deg,#160d12 0%,#0f090c 100%)!important
}
.sitebar,.topbar{
  background:rgba(22,13,18,.96)!important;
  border-bottom-color:rgba(90,52,67,.6)!important
}
.card{background:linear-gradient(145deg,#2b151e,#211017)!important}

/* 8.0 – Kraftis Skyline-Logo */
.sitebar{background:rgba(10,10,11,.97)!important}
.sitebrand{
  display:block!important;width:390px!important;height:56px!important;padding:0!important;
  background:url('/assets/kraftis-logo.svg') left center/contain no-repeat!important;
  font-size:0!important;line-height:0!important;color:transparent!important;
}
.sitebrand::after{display:none!important;content:none!important}
@media(max-width:620px){
  .sitebrand{width:255px!important;height:48px!important}
}
@media(max-width:430px){
  .sitebrand{width:215px!important;height:44px!important}
}

/* 8.2 – Typografie passend zum KRAFTIS-Logo */
:root{--kraftis-display:"Century Gothic","Avenir Next",Avenir,Futura,Arial,sans-serif}
.sitenav a{
  font-family:var(--kraftis-display)!important;
  font-weight:400!important;
  letter-spacing:.045em!important;
}
.page-kicker,.page-title,.page-subtitle{
  font-family:var(--kraftis-display)!important;
}
.page-kicker{letter-spacing:.16em!important;font-weight:600!important}
.page-title{letter-spacing:.015em!important;font-weight:500!important}
.page-subtitle{letter-spacing:.025em!important;font-weight:400!important}


/* 8.3 – deutlichere KRAFTIS-Typografie + unsichtbare Scrollbars */
:root{
  --kraftis-display:"Trebuchet MS","Century Gothic","Avenir Next",Avenir,Arial,sans-serif;
}
.sitenav a{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  letter-spacing:.095em!important;
  text-transform:uppercase!important;
  font-size:.78rem!important;
}
.page-kicker{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  letter-spacing:.20em!important;
}
.page-title{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  letter-spacing:.055em!important;
}
.page-subtitle{
  font-family:var(--kraftis-display)!important;
  font-weight:400!important;
  letter-spacing:.045em!important;
}

/* Scrollen bleibt vollständig aktiv – nur der Balken wird versteckt */
html,body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}


/* 8.4 – KRAFTIS TYPOGRAFIE: einheitlich wie die Wortmarke */
:root{
  --kraftis-display:"Century Gothic",Futura,"Avenir Next","Trebuchet MS","Segoe UI",Arial,sans-serif;
}

/* Hauptnavigation + Unterseiten-Navigation */
.nav a,
.sitenav a{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  letter-spacing:.13em!important;
  font-size:.77rem!important;
}

/* Seitenköpfe: Spiele + Zeitraffer + weitere Unterseiten */
.page-kicker{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  font-style:normal!important;
  text-transform:uppercase!important;
  letter-spacing:.23em!important;
}
.page-title{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  font-style:normal!important;
  letter-spacing:.075em!important;
}
.page-subtitle{
  font-family:var(--kraftis-display)!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:.055em!important;
}

/* kleinere UI-Überschriften ebenfalls aus derselben Familie */
.section h2,
.guestbook h2,
.gamebar h2{
  font-family:var(--kraftis-display)!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
}