:root{
  --paper:#FCFBF8;
  --grid-line:#DCE7F3;
  --grid-line-soft:#EAF1F8;
  --ink:#1F3A5F;
  --ink-soft:#5A7292;
  --ink-faint:#8FA3BC;
  --correct:#2E7D53;
  --accent:#E8A33D;
  --accent-bg:#FCF1DC;
  --card-shadow: 0 1px 0 rgba(31,58,95,0.05), 0 8px 24px -12px rgba(31,58,95,0.18);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line-soft) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--grid-line-soft) 0 1px, transparent 1px 32px);
  font-family:'Inter', system-ui, sans-serif;
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:28px 16px 60px;
}

#app{ width:100%; max-width:560px; }

h1,h2,h3{ font-family:'Patrick Hand', cursive; font-weight:400; margin:0; }
h1{ font-size:38px; line-height:1.1; }
h2{ font-size:26px; }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:4px;
}

header{ margin-bottom:26px; }
header p{ color:var(--ink-soft); margin:8px 0 0; font-size:16px; }

/* Zurück-Link */
.back{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:14px;
}
.back:hover{ color:var(--ink); }

/* Kachel-Liste */
.tiles{ display:grid; gap:12px; }

.tile{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--grid-line);
  border-radius:14px;
  box-shadow:var(--card-shadow);
  padding:18px 20px;
  text-decoration:none;
  color:inherit;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover{
  transform:translateY(-2px);
  border-color:var(--ink-faint);
  box-shadow:0 1px 0 rgba(31,58,95,0.05), 0 14px 30px -14px rgba(31,58,95,0.28);
}

.tile-icon{
  flex:0 0 48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--accent-bg);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:19px;
  color:var(--ink);
}

.tile-body{ flex:1; min-width:0; }
.tile-body h2{ font-size:24px; line-height:1.15; }
.tile-body p{ margin:3px 0 0; font-size:14px; color:var(--ink-soft); }

.tile-arrow{ color:var(--ink-faint); font-size:20px; flex:0 0 auto; }
.tile:hover .tile-arrow{ color:var(--ink); }

/* Noch nicht verfügbar */
.tile.soon{
  opacity:.62;
  box-shadow:none;
  border-style:dashed;
  cursor:default;
}
.tile.soon:hover{ transform:none; border-color:var(--grid-line); box-shadow:none; }
.tile.soon .tile-icon{ background:var(--grid-line-soft); color:var(--ink-faint); }

.badge{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--grid-line);
  border-radius:999px;
  padding:4px 9px;
  white-space:nowrap;
}

/* Fliesstext-Seiten */
.prose{
  background:#fff;
  border:1px solid var(--grid-line);
  border-radius:14px;
  box-shadow:var(--card-shadow);
  padding:28px 24px;
}
.prose h2{ margin-top:26px; margin-bottom:6px; }
.prose h2:first-child{ margin-top:0; }
.prose p{ margin:0 0 10px; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.prose a{ color:var(--ink); }

footer{
  margin-top:32px;
  text-align:center;
  font-size:13px;
  color:var(--ink-faint);
}
footer a{ color:var(--ink-faint); }
footer a:hover{ color:var(--ink-soft); }