:root { --grund: #f6f4f1; --karte: #fff; --text: #1f2328; --akzent: #8a3b5c; --rand: #ddd6cf; --warn: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root { --grund: #1b1a19; --karte: #262422; --text: #ece8e3; --akzent: #e3a1bd; --rand: #3c3834; --warn: #f0c36a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--grund); color: var(--text); }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--rand); background: var(--karte); flex-wrap: wrap; }
.marke { font-weight: 700; color: var(--akzent); text-decoration: none; }
nav { display: flex; gap: 1rem; align-items: center; }
nav a, .link { color: var(--text); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.wer { opacity: .75; }
.haken { display: flex; gap: .5rem; align-items: center; }
.haken input { width: auto; margin: 0; }
.klein { font-size: .9rem; opacity: .8; }
main { max-width: 52rem; margin: 1.5rem auto; padding: 0 1rem; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.schmal { max-width: 28rem; margin-inline: auto; }
label { display: block; margin: .75rem 0; }
input, textarea { display: block; width: 100%; margin-top: .25rem; padding: .55rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; }
button { margin-top: .5rem; padding: .6rem 1.1rem; border: 0; border-radius: 8px; background: var(--akzent); color: #fff; font: inherit; cursor: pointer; }
.hinweis { padding: .6rem .9rem; border-left: 4px solid var(--akzent); background: var(--karte); }
.warnung { color: var(--warn); }
.antwort { white-space: pre-wrap; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--rand); }

/* Übersicht */
main:has(.apps) { max-width: 72rem; }
.kopfzeile { margin-bottom: 1rem; }
.kopfzeile h1 { margin-bottom: .25rem; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.app-karte a { display: flex; flex-direction: column; height: 100%; background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; overflow: hidden; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.app-karte a:hover, .app-karte a:focus-visible { border-color: var(--akzent); transform: translateY(-2px); }
.app-karte img, .platzhalter { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top; border-bottom: 1px solid var(--rand); background: var(--grund); }
.platzhalter { display: grid; place-items: center; font-size: 3rem; font-weight: 700; color: var(--akzent); }
.app-text { display: grid; gap: .1rem; padding: .75rem 1rem 1rem; }
.app-text strong { font-size: 1.05rem; }