:root{
  --bg: #fff8f1;          /* warmes, freundliches Grundlayout */
  --panel: #fff;
  --ink: #2b2b2b;
  --muted: #6b7280;
  --brand: #f59e0b;       /* warmes Gelb/Orange */
  --brand-2: #22c55e;     /* Akzent Grün */
  --accent: #6366f1;      /* Akzent Lila/Indigo */
  --border: #f1e8dc;
  --chip: #fff4e0;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,.08);
}

* { box-sizing: border-box }
html, body { height: 100% }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1200px 600px at 10% -10%, #fff1e5 0, transparent 60%),
              radial-gradient(1200px 600px at 110% 10%, #f0fff4 0, transparent 60%),
              var(--bg);
}

.wrap{ max-width: 1200px; margin: 0 auto; padding: 0 16px }

.site-header{
  background: linear-gradient(90deg, #fff, #fff7ed);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 16px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--ink); font-weight: 700; letter-spacing:.2px }
.brand img{ border-radius: 8px }
.top-nav a{ color: var(--ink); text-decoration:none; margin-left: 16px }
.top-nav a:hover{ text-decoration: underline }

.page-title{ margin: 24px 0 8px }
.lead{ margin: 0 0 18px; color: var(--muted) }

.filters{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow) }
.filters-row{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px }
.filters label{ display:flex; flex-direction:column; gap:8px; font-size: 14px }
.filters select, .filters input[type="search"]{
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.filters .search input{ padding-left: 12px }
.filters-actions{ margin-top: 10px; display:flex; justify-content:flex-end }

.btn-secondary{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.btn-secondary:hover{ background:#fafafa }

.stats{ margin: 16px 4px; font-size: 14px; color: var(--muted) }

.apps-grid{
  margin: 16px 0 40px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.apps-grid[data-state="loading"]{
  opacity: .7;
}
.app-card{
  display:block;
  border:1px solid var(--border);
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .05s ease-in-out;
  outline-offset: 3px;
}
.app-card:hover{ transform: translateY(-2px) }
.app-card .thumb{
  width:100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #fff9f0; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.app-card img{ width:100%; height:100%; object-fit: cover; display:block }
.app-card h3{ margin: 10px 0 6px; font-size: 18px }
.app-card p{ margin: 0 0 10px; color: var(--muted) }
.meta{ display:flex; flex-wrap:wrap; gap:8px; font-size: 13px; color: var(--muted) }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 6px }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding: 4px 8px; border-radius: 999px; border:1px solid var(--border); background: var(--chip); font-size: 12px; color:#7a5800;
}
.chip.badge{ background: #ecfeff; color:#0b4a6e }
.chip.lang{ background: #eef2ff; color:#312e81 }
.chip.grade{ background: #f0fdf4; color:#14532d }

.empty{ text-align:center; margin: 28px 0 }
.empty p{ margin-bottom: 12px }

.site-footer{
  border-top: 1px solid var(--border);
  margin-top: 40px;
  background: #fff;
}
.footer-cols{
  display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px;
}
.footer-cols .legal a{ color: var(--muted); margin-left: 12px; text-decoration: none }
.footer-cols .legal a:hover{ text-decoration: underline }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0
}

/* Responsiv */
@media (max-width: 980px){
  .apps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filters-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .apps-grid{ grid-template-columns: 1fr; }
  .filters-row{ grid-template-columns: 1fr; }
}

/* ===== Header ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.top-nav a {
  margin-left: 16px;
  color: var(--ink);
  text-decoration: none;
}

.top-nav a:hover {
  text-decoration: underline;
}

/* Hervorhebung für App-Header */
.top-nav a.highlight {
  font-weight: 600;
  color: var(--brand);      /* warmes Orange/Gelb aus deinem Farbschema */
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}
.top-nav a.highlight:hover {
  text-decoration: none;
  opacity: 0.9;
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  background: #fff;
}

.footer-cols {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
}

.footer-cols .legal a {
  margin-left: 12px;
  color: var(--muted);
  text-decoration: none;
}

.footer-cols .legal a:hover {
  text-decoration: underline;
}

.top-nav a.highlight {
  font-weight: 600;
  color: var(--brand);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 2px;
}



.app-card .info-btn{
  position: absolute;
  top: 10px; right: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--border);
  background: #e0f2fe; box-shadow: var(--shadow);
  text-decoration: none; font-weight: 700; line-height: 1;
}
.app-card .info-btn:hover{ transform: translateY(-1px); }
.app-card .info-btn span{ font-size: 0; } /* versteckt, wir nutzen aria-label */








/* Fix 1: Card ist Bezugssystem für den Info-Button */
.app-card {
  position: relative; /* neu */
}

/* Fix 2: Der große Kartenlink soll nicht unterstreichen */
.app-card .card-main {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Sicherheitshalber: auch Nachfahren nicht unterstreichen */
.app-card .card-main * {
  text-decoration: none;
}




/* Footer immer unten anzeigen (sticky) */
#include-footer {
  position: sticky;
  top: 100vh;
}