/* Landingpage im Loomira-Look: Neo-Brutalismus, Tuerkis und Kobalt, Systemschrift */
:root{--grund:#0a0a0a;--flaeche:#161616;--linie:#2a2a2a;--text:#f2f2f2;--leise:#9a9a9a;--tuerkis:#2ee6d6;--kobalt:#2d4bff;--auf-tuerkis:#0a0a0a;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.55;-webkit-text-size-adjust:100%}
main{max-width:960px;margin:0 auto;padding:0 16px}
a{color:var(--tuerkis)}
h1{font-size:clamp(44px,11vw,88px);line-height:.95;font-weight:900;letter-spacing:-2px;margin:18px 0 20px}
h2{font-size:clamp(26px,6vw,38px);font-weight:900;letter-spacing:-.8px;margin:0 0 16px}
h3{font-size:20px;font-weight:900;margin:6px 0 8px}
.akzent{color:var(--tuerkis)}
.leise{color:var(--leise)}
.test-band{background:var(--tuerkis);color:var(--auf-tuerkis);font-weight:900;text-align:center;padding:calc(env(safe-area-inset-top) + 8px) 16px 8px;font-size:14px;letter-spacing:.3px;text-transform:uppercase}
section{padding:48px 0;border-bottom:2px solid var(--linie)}
.held{padding-top:40px}
.unter{font-size:19px;max-width:620px;margin:0 0 28px}
.pixel{display:grid;grid-template-columns:repeat(2,22px);grid-auto-rows:22px}
.pixel.klein{grid-template-columns:repeat(2,10px);grid-auto-rows:10px}
.pixel i.t{background:var(--tuerkis)}.pixel i.k{background:var(--kobalt)}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:2px solid var(--tuerkis);border-radius:4px;color:var(--tuerkis);font-weight:900;font-size:17px;text-decoration:none;box-shadow:4px 4px 0 var(--kobalt)}
.knopf.voll{background:var(--tuerkis);color:var(--auf-tuerkis)}
.knopf:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--kobalt)}
.karten{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{background:var(--flaeche);border:2px solid var(--linie);border-radius:4px;padding:18px}
.karte p{margin:0}
.karte ol{margin:0 0 10px;padding-left:20px}.karte li{margin:4px 0}
.karte.zuerst{border-color:var(--tuerkis)}
.nr{font-weight:900;color:var(--tuerkis);font-size:14px}
.block{border:0;margin:48px 0;padding:28px 20px;border-radius:4px}
.block p{font-size:17px;max-width:680px}
.kobalt{background:var(--kobalt);color:#fff;box-shadow:6px 6px 0 var(--tuerkis)}
.hinweis{border:2px solid var(--linie)}
/* Hinweis und QR-Code: der QR erscheint nur auf grossen Bildschirmen ohne Touch (Computer) */
.mobil-hinweis{border-left:6px solid var(--tuerkis);padding:10px 14px;background:var(--flaeche);font-size:17px;margin:0 0 14px}
.desktop-qr{display:none;align-items:center;gap:20px;background:var(--flaeche);border:2px solid var(--tuerkis);border-radius:4px;padding:18px;margin:0 0 16px;box-shadow:4px 4px 0 var(--kobalt)}
.desktop-qr img{background:#fff;padding:6px;border-radius:4px;flex:none}
.desktop-qr p{margin:0;font-size:17px;max-width:420px}
@media (min-width:900px) and (hover:hover) and (pointer:fine){.desktop-qr{display:flex}}
/* Desktop: breiter Held mit grosser Schrift, Karten in drei Spalten */
@media (min-width:900px){
  main{padding:0 32px}
  .held{padding:72px 0 64px}
  .unter{font-size:22px}
  .karten{grid-template-columns:repeat(3,1fr)}
  .karten.zwei{grid-template-columns:repeat(2,1fr)}
  .block{padding:40px 44px}
  footer{padding-left:32px;padding-right:32px}
}
footer{max-width:960px;margin:0 auto;padding:28px 16px calc(env(safe-area-inset-bottom) + 28px);display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--leise)}
footer .axortic{display:inline-flex;align-items:center;gap:6px;color:var(--leise);text-decoration:none;font-size:13px}
footer nav{margin-left:auto;display:flex;gap:16px}