:root {
  --bg:#0f172a;
  --panel:#1e2537;
  --panel-border:#334155;
  --text-main:#e2e8f0;
  --text-dim:#94a3b8;
  --radius:16px;

  --card-blue:#3b82f6;
  --card-cyan:#22d3ee;
  --card-orange:#f97316;
  --card-violet:#7c3aed;
}

body{
  background:var(--bg);
  color:var(--text-main);
  font-family:system-ui,Segoe UI,Roboto,sans-serif;
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:2rem 1rem 4rem;
}

header.page-head{
  max-width:1100px;
  width:100%;
  text-align:center;
  margin-bottom:2rem;
}
header.page-head h1{
  font-size:clamp(28px,2vw,36px);
  margin:.2rem 0 .5rem;
  font-weight:600;
  color:#fff;
}
header.page-head p.lead{
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.5;
  max-width:700px;
  margin:0 auto;
}

.grid {
  width: 100%;
  max-width: 1100px;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);   /* Standard: 1 Spalte (mobile) */
}

/* Ab mittleren Screens: 2 Spalten nebeneinander */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-card{
  background:rgba(30,37,55,.6);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:1.25rem 1rem 1rem;
  box-shadow: none;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:320px;
}
/*
.tool-card[data-accent="blue"]{
  box-shadow:0 0 25px rgba(59,130,246,.35),0 0 80px rgba(59,130,246,.15);
}
.tool-card[data-accent="cyan"]{
  box-shadow:0 0 25px rgba(34,211,238,.35),0 0 80px rgba(34,211,238,.15);
}
.tool-card[data-accent="orange"]{
  box-shadow:0 0 25px rgba(249,115,22,.35),0 0 80px rgba(249,115,22,.15);
}
.tool-card[data-accent="violet"]{
  box-shadow:0 0 25px rgba(124,58,237,.35),0 0 80px rgba(124,58,237,.15);
}*/

.tool-card:hover {
  box-shadow:
    0 0 16px rgba(0,153,255,0.25),
    0 0 40px rgba(0,153,255,0.15);
  transform: translateY(-3px);
}

.tool-head{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:.5rem;
}
.tool-emoji{
  font-size:1.4rem;
  line-height:1;
}
.tool-title{
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
  line-height:1.3;
}
.tool-desc{
  font-size:.9rem;
  line-height:1.4;
  color:var(--text-dim);
  margin:0 0 1rem;
}

.snippet-label{
  font-size:.7rem;
  line-height:1;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:999px;
  padding:.35rem .6rem;
  color:var(--text-main);
  display:inline-block;
  margin-bottom:.5rem;
}

pre{
  background:#0f172a;
  border:1px solid #334155;
  border-radius:10px;
  padding:.75rem .9rem;
  color:#e2e8f0;
  font-size:.8rem;
  line-height:1.4;
  font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  overflow:auto;
  flex-grow:1;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6);
}

footer.page-foot{
  max-width:1100px;
  width:100%;
  text-align:center;
  margin-top:3rem;
  color:var(--text-dim);
  font-size:.8rem;
  line-height:1.4;
}

.actions-row{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.btn-mini{
  background:#1e2537;
  border:1px solid #334155;
  border-radius:8px;
  color:#fff;
  font-size:.8rem;
  font-weight:600;
  padding:.5rem .7rem;
  text-decoration:none;
  line-height:1.2;
  cursor:pointer;
}
.btn-mini:hover{
  background:#2a344f;
}

.back-home{
  color:#fff;
  text-decoration:none;
  background:#33415533;
  border:1px solid #475569;
  border-radius:8px;
  padding:.5rem .75rem;
  font-size:.8rem;
  font-weight:500;
}
.back-home:hover{
  background:#47556944;
}