/* Kater – Redesign im datx-Look, Akzent Amber */
:root{
  color-scheme:dark;
  --fx-accent:#FFB13B;
  --bg:#07080B; --ink:#EEE9E0; --ink-2:#C2BBAF; --dim:#8F887D;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --amber:#FFB13B; --dawn:#F3C9A0;
  --sans:var(--fx-body); --display:var(--fx-display); --mono:var(--fx-mono);
}
*{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:96px; }
body{ margin:0; color:var(--ink); font:400 16.5px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:inherit; }
::selection{ background:rgba(255,177,59,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:8px; }
h1,h2,h3{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; margin:0; }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }
@media (max-width:520px){ .wrap{ padding:0 16px; } }
.skip{ position:fixed; left:12px; top:-60px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--amber); color:#1B1200; font-weight:700; text-decoration:none; }
.skip:focus{ top:12px; }

/* Navigation */
.topnav{ position:sticky; top:12px; z-index:40; width:min(1120px, calc(100% - 24px)); margin:12px auto 0; height:62px; padding:0 10px 0 16px; display:flex; align-items:center; justify-content:space-between; border-radius:18px; }
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:700 1.25rem var(--display); letter-spacing:-.03em; }
.logo .mark{ display:grid; place-items:center; width:34px; height:34px; border:2px solid var(--line-2); border-radius:9px; font:500 .78rem var(--mono); letter-spacing:-.02em; }
.dotc{ color:var(--amber); }
.links{ display:flex; gap:4px; }
.links a{ padding:9px 13px; border-radius:11px; text-decoration:none; font:500 .8rem var(--mono); color:var(--dim); transition:color .2s, background .2s; }
.links a:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
@media (max-width:560px){ .links .hide-sm{ display:none; } .topnav{ width:calc(100% - 16px); top:8px; margin-top:8px; } }

/* Buttons */
.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font:600 .9rem var(--sans); color:var(--ink); background:rgba(255,255,255,.05); border:1px solid var(--line-2); transition:border-color .2s, background .2s; }
.btn:hover{ border-color:rgba(255,177,59,.6); background:rgba(255,255,255,.08); }
.btn.primary{ background:var(--amber); color:#1B1200; border-color:transparent; box-shadow:0 12px 34px -14px rgba(255,177,59,.8); }
.btn.primary:hover{ background:#FFC266; }

/* Hero */
.hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center; padding-top:84px; padding-bottom:96px; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; gap:48px; padding-top:56px; } }
.status{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 12px; border-radius:999px; font:500 .78rem var(--mono); color:var(--ink-2); }
.status i{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); animation:k-pulse 2s ease-in-out infinite; }
@keyframes k-pulse{ 50%{ opacity:.35; } }
.hero h1{ font-size:clamp(4rem, 15vw, 8.4rem); line-height:.88; margin:26px 0 18px; letter-spacing:-.05em; }
.tagline{ font:500 clamp(1.15rem, 3.2vw, 1.55rem)/1.35 var(--mono); color:var(--ink); margin:0 0 20px; }
.tagline::after{ content:""; display:inline-block; width:.55em; height:1em; margin-left:.12em; vertical-align:-.12em; background:var(--amber); animation:datx-blink 1.1s steps(1) infinite; }
.lede{ max-width:460px; font-size:1.08rem; margin:0 0 32px; }

/* Kassenzettel als Terminal-Ausdruck */
.printer{ padding:0; overflow:hidden; max-width:420px; justify-self:center; width:100%; }
.printer-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--line); font:500 .74rem var(--mono); color:var(--dim); }
.printer-bar span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.12); }
.printer-bar span:first-child{ background:#FF6B5E; } .printer-bar span:nth-child(2){ background:var(--amber); } .printer-bar span:nth-child(3){ background:#4ADE80; }
.printer-bar b{ margin-left:8px; font-weight:500; }
.feed{ padding:22px 24px 26px; }
.receipt{ font:500 .84rem/1.75 var(--mono); color:var(--ink-2); }
.fx .printer.fx-in .receipt{ clip-path:inset(0 0 100% 0); }
.fx .printer.fx-in.is-in .receipt{ animation:k-print 1.6s steps(24) .35s forwards; }
.fx-reduce .printer .receipt{ clip-path:none !important; animation:none !important; }
@keyframes k-print{ to{ clip-path:inset(0 0 0 0); } }
.r-head{ text-align:center; color:var(--ink); margin-bottom:6px; }
.r-head b{ display:block; font:700 1.4rem var(--display); letter-spacing:.22em; color:var(--amber); text-shadow:0 0 18px rgba(255,177,59,.45); }
.r-head div{ font-size:.74rem; color:var(--dim); }
.cut{ border:0; border-top:1px dashed var(--line-2); margin:12px 0; }
.cut.double{ border-top:3px double var(--line-2); }
.row{ display:flex; justify-content:space-between; gap:16px; }
.row .d, .row.d{ color:var(--dim); }
.row.big{ font-size:1.05rem; color:var(--ink); }
.row.big span:last-child{ color:var(--amber); font-weight:700; }
.pegel{ color:var(--amber); letter-spacing:.06em; text-shadow:0 0 10px rgba(255,177,59,.5); }
.r-section{ text-align:center; color:var(--dawn); letter-spacing:.2em; font-size:.76rem; margin:4px 0 8px; }
.r-foot{ text-align:center; color:var(--dim); margin-top:12px; font-size:.78rem; }

/* Zeitstrahl */
.night{ padding:40px 0 100px; }
.section-label{ font:500 .76rem var(--mono); text-transform:uppercase; letter-spacing:.16em; color:var(--dim); margin-bottom:14px; }
.section-label::before{ content:"// "; color:var(--amber); }
.night h2, .close h2{ font-size:clamp(2rem, 5.4vw, 3.4rem); line-height:1.02; max-width:760px; margin-bottom:44px; }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:14px; position:relative; }
.steps::before{ content:""; position:absolute; left:180px; top:8px; bottom:8px; width:1px; background:linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); }
.step{ display:grid; grid-template-columns:130px 18px minmax(0,1fr); gap:20px; align-items:start; padding:22px 24px; }
.time{ font:600 1.5rem/1 var(--display); letter-spacing:-.02em; }
.time small{ display:block; font:500 .72rem var(--mono); color:var(--dim); letter-spacing:.04em; margin-top:8px; }
.pin{ width:13px; height:13px; border-radius:50%; margin-top:8px; background:var(--bg); border:2px solid var(--amber); box-shadow:0 0 0 4px rgba(255,177,59,.12), 0 0 16px rgba(255,177,59,.55); position:relative; z-index:1; }
.step.peak .pin{ background:var(--amber); }
.step.dawn .pin{ border-color:var(--dawn); box-shadow:0 0 0 4px rgba(243,201,160,.12), 0 0 16px rgba(243,201,160,.55); }
.step h3{ font-size:1.3rem; margin-bottom:6px; }
.step p{ margin:0; color:var(--ink-2); }
@media (max-width:720px){
  .steps::before{ left:29px; }
  .step{ grid-template-columns:18px minmax(0,1fr); gap:6px 16px; padding:20px; }
  .step .time{ grid-column:2; font-size:1.2rem; }
  .step .pin{ grid-row:1; grid-column:1; margin-top:4px; }
  .step > div:last-child{ grid-column:2; }
}

/* Abschluss */
.close{ padding:20px 24px 40px; text-align:left; }
.facts{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.facts li{ padding:12px 16px; border-radius:14px; font:500 .82rem var(--mono); color:var(--dim); }
.facts b{ display:block; color:var(--ink); font:700 1.3rem var(--display); letter-spacing:-.02em; margin-top:4px; }

.foot{ margin-top:80px; padding-top:26px; padding-bottom:max(32px, env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; font:500 .76rem var(--mono); color:var(--dim); }
.foot .datx-powered b i{ color:var(--amber); }