:root{
  --nacht:#0f1220; --tiefe:#161a2e; --rand:#272c47;
  --hell:#eef0f8; --matt:#9aa1c0;
  --mond:#f3c969; --mondmatt:#8a7440;
  --bau:#6fd3a0;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--nacht); color:var(--hell);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a{color:inherit; text-decoration:none}

/* --- Kopf --- */
.kopf{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.6rem; border-bottom:1px solid var(--rand);
  position:sticky; top:0; background:rgba(15,18,32,.94); backdrop-filter:blur(8px); z-index:5;
}
.marke{display:flex; align-items:center; gap:.85rem}
.marke strong{display:block; font-size:1.15rem; letter-spacing:.02em}
.marke small{display:block; color:var(--matt); font-size:.82rem}
.mond{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 32%, var(--mond), var(--mondmatt));
  box-shadow:0 0 18px rgba(243,201,105,.35);
}
.sprachwahl{display:flex; gap:.3rem}
.sprachwahl a{
  padding:.34rem .7rem; border-radius:7px; font-size:.85rem;
  color:var(--matt); border:1px solid transparent;
}
.sprachwahl a.an{color:var(--nacht); background:var(--mond); font-weight:600}
.sprachwahl a:not(.an):hover{border-color:var(--rand); color:var(--hell)}

main{max-width:1180px; margin:0 auto; padding:1.8rem 1.6rem 3rem}

/* --- Hinweisband --- */
.hinweis{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:baseline;
  padding:.9rem 1.1rem; margin-bottom:2rem;
  border:1px solid var(--rand); border-left:3px solid var(--mond);
  border-radius:9px; background:var(--tiefe);
}
.hinweis span{color:var(--matt); font-size:.92rem}

/* --- Gruppen und Kacheln --- */
.gruppe{margin-bottom:2.4rem}
.gruppe h2{
  font-size:1rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--matt); font-weight:600; margin:0 0 .9rem;
}
.gruppe h2 em{
  font-style:normal; margin-left:.5rem; font-size:.8rem;
  color:var(--mondmatt); letter-spacing:0;
}
.raster{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.kachel{
  display:flex; flex-direction:column; justify-content:space-between; gap:.9rem;
  min-height:92px; padding:.95rem 1rem;
  border:1px solid var(--rand); border-radius:11px; background:var(--tiefe);
  transition:border-color .14s, transform .14s;
}
.kachel:hover{border-color:var(--mond); transform:translateY(-2px)}
.kachel .name{font-weight:600; line-height:1.3}
.kachel .marker{display:flex; gap:.4rem; align-items:center}
.kachel em{
  font-style:normal; font-size:.72rem; letter-spacing:.03em;
  padding:.16rem .5rem; border-radius:20px; color:var(--matt);
  border:1px solid var(--rand);
}
.kachel em.neu{color:var(--nacht); background:var(--mond); border-color:var(--mond); font-weight:600}
.kachel.status-bau{border-color:var(--mondmatt)}
.kachel.status-bau em.status{color:var(--bau); border-color:var(--bau)}

/* --- Werkzeugseite --- */
.zurueck{display:inline-block; margin-bottom:1.1rem; color:var(--matt); font-size:.9rem}
.zurueck:hover{color:var(--mond)}
.werkzeugtitel{display:flex; align-items:center; gap:.8rem; font-size:1.7rem; margin:0 0 1.3rem}
.werkzeugtitel .status{
  font-style:normal; font-size:.72rem; letter-spacing:.03em; color:var(--matt);
  padding:.2rem .6rem; border:1px solid var(--rand); border-radius:20px;
}
.werkzeugtitel .status-bau{color:var(--bau); border-color:var(--bau)}

.reiter{display:flex; flex-wrap:wrap; gap:.35rem; border-bottom:1px solid var(--rand); padding-bottom:.6rem}
.reiter a{
  padding:.45rem .85rem; border-radius:8px 8px 0 0; font-size:.9rem; color:var(--matt);
}
.reiter a:hover{color:var(--hell); background:var(--tiefe)}
.reiter a.an{color:var(--nacht); background:var(--mond); font-weight:600}

.tafel{
  border:1px solid var(--rand); border-top:none; border-radius:0 0 11px 11px;
  background:var(--tiefe); padding:1.5rem;
}
.tafel h2{margin:0 0 1rem; font-size:1.1rem}
.attrappe{
  margin:0; padding:1.1rem 1.2rem; color:var(--matt); line-height:1.65;
  border:1px dashed var(--rand); border-radius:9px; background:rgba(0,0,0,.18);
}
.attrappe strong{color:var(--mond)}

/* --- Fuss --- */
.fuss{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  max-width:1180px; margin:0 auto; padding:1.2rem 1.6rem 2rem;
  color:var(--matt); font-size:.83rem; border-top:1px solid var(--rand);
}

@media (max-width:600px){
  .kopf{padding:.9rem 1rem}
  main{padding:1.3rem 1rem 2.5rem}
  .marke small{display:none}
}

/* --- Kopf rechts --- */
.kopfrechts{display:flex; align-items:center; gap:.9rem}
.abmelden{color:var(--matt); font-size:.85rem}
.abmelden:hover{color:var(--mond)}

/* --- Anmeldung und Einrichtung --- */
main.schmal{max-width:560px}
.karte{
  border:1px solid var(--rand); border-radius:13px; background:var(--tiefe);
  padding:2rem 1.9rem; margin-top:2rem;
}
.karte.breit{max-width:none}
.karte h1{margin:0 0 1.2rem; font-size:1.45rem}
.karte form{display:flex; flex-direction:column; gap:.45rem}
.karte label{font-size:.88rem; color:var(--matt); margin-top:.8rem}
.karte input[type=email],
.karte input[type=password],
.karte input[type=text]{
  padding:.75rem .85rem; font-size:1rem; color:var(--hell);
  background:var(--nacht); border:1px solid var(--rand); border-radius:9px;
}
.karte input:focus{outline:2px solid var(--mond); outline-offset:1px; border-color:var(--mond)}
.karte input.gross{font-size:1.35rem; letter-spacing:.22em; text-align:center}
.karte button{
  margin-top:1.3rem; padding:.8rem 1rem; font-size:1rem; font-weight:600;
  color:var(--nacht); background:var(--mond); border:none; border-radius:9px; cursor:pointer;
}
.karte button:hover{filter:brightness(1.08)}

.kaestchen{
  display:flex; gap:.6rem; align-items:flex-start; margin-top:1.1rem;
  font-size:.86rem; color:var(--matt); line-height:1.45; cursor:pointer;
}
.kaestchen input{margin-top:.2rem; width:17px; height:17px; accent-color:var(--mond); flex:none}

.fehler{
  margin:.2rem 0 0; padding:.75rem .9rem; border-radius:9px; font-size:.9rem;
  color:#ffd9d9; background:rgba(190,70,70,.16); border:1px solid rgba(190,70,70,.45);
}
.ruhig{color:var(--matt); line-height:1.6; margin:.2rem 0 1rem}
.klein{font-size:.82rem}

.schritte{margin:0 0 1.4rem; padding-left:1.3rem; color:var(--matt); line-height:1.65}
.schritte li{margin-bottom:.55rem}
.schritte li::marker{color:var(--mond); font-weight:700}

.qr{
  display:flex; justify-content:center; padding:1.1rem;
  background:#fff; border-radius:11px; margin-bottom:1.1rem;
}
.qr svg{width:210px; height:210px; display:block}
.schluessel{
  width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95rem; letter-spacing:.06em;
}

/* --- Bucheinstellungen (KDP-Kern) --- */
.buchform{
  display:grid; gap:1rem; align-items:end; margin-bottom:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:1.1rem 1.2rem; border:1px solid var(--rand); border-radius:11px;
  background:rgba(0,0,0,.18);
}
.feld{display:flex; flex-direction:column; gap:.35rem}
.feld label{font-size:.84rem; color:var(--matt)}
.feld small{font-size:.75rem; color:var(--mondmatt)}
.feld select, .feld input[type=number]{
  padding:.6rem .7rem; font-size:.95rem; color:var(--hell);
  background:var(--nacht); border:1px solid var(--rand); border-radius:8px;
}
.feld select:focus, .feld input:focus{outline:2px solid var(--mond); outline-offset:1px}
.kaestchen.kompakt{margin-top:0; font-size:.84rem}

.warnung{
  margin:0 0 1rem; padding:.8rem .95rem; border-radius:9px; font-size:.88rem;
  line-height:1.55; color:#ffe8c4;
  background:rgba(200,150,60,.14); border:1px solid rgba(200,150,60,.42);
}

.werte{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wertblock{
  padding:1.1rem 1.2rem; border:1px solid var(--rand);
  border-radius:11px; background:rgba(0,0,0,.18);
}
.wertblock h3{
  margin:0 0 .8rem; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--mond); font-weight:600;
}
.wertblock dl{display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; margin:0}
.wertblock dt{color:var(--matt); font-size:.85rem}
.wertblock dd{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-size:.9rem}

.quelle{margin:1.2rem 0 0; font-size:.78rem; color:var(--matt)}
.quelle a{color:var(--mond); text-decoration:underline}