:root{--gruen:#0B3A2C;--gruen2:#14523F;--gold:#B8862B;--gold2:#E9D7A8;--papier:#FBF8F1;--karte:#fff;
--tinte:#1F2620;--leise:#5C665E;--linie:#E6DFCC;--rund:16px}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font:17px/1.7 system-ui,"Segoe UI",Roboto,Arial,sans-serif}
html[dir=rtl] body{font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic","Geeza Pro",Arial,sans-serif;font-size:18px}
a{color:var(--gruen2);text-underline-offset:.2em}
.muster{height:14px;background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 1l3 3h4v4l3 3-3 3v0h-4l-3 3-3-3H7v-4L4 7l3-3V0h4z' fill='none' stroke='%23B8862B' stroke-width='1' opacity='.7'/%3E%3C/svg%3E") repeat-x center}
.huelle{max-width:860px;margin:0 auto;padding:0 18px}
header.kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0}
.marke{font-weight:700;color:var(--gruen);text-decoration:none;font-size:1.05rem;letter-spacing:.02em}
nav.menue{display:flex;gap:14px;flex-wrap:wrap;font-size:.95rem}
nav.menue a{text-decoration:none;color:var(--leise)}nav.menue a[aria-current]{color:var(--gruen);font-weight:700}
.sprachen{display:flex;gap:6px}
.sprachen a{text-decoration:none;font-size:.85rem;padding:2px 10px;border:1px solid var(--linie);border-radius:999px;color:var(--leise)}
.sprachen a[aria-current]{background:var(--gruen);border-color:var(--gruen);color:#fff}
.basmala{font-family:"Amiri","Traditional Arabic","Noto Naskh Arabic","Segoe UI",serif;color:var(--gold);font-size:2rem;text-align:center;margin:28px 0 6px;line-height:1.6}
.hamdala{font-family:"Amiri","Traditional Arabic","Noto Naskh Arabic","Segoe UI",serif;color:var(--gold);font-size:1.6rem;text-align:center;margin:36px 0 10px}
h1{color:var(--gruen);text-align:center;font-size:clamp(1.7rem,4.5vw,2.4rem);line-height:1.3;margin:6px 0 18px}
h2{color:var(--gruen);font-size:1.35rem;margin:34px 0 12px}
h3{color:var(--gruen2);font-size:1.05rem;margin:20px 0 6px}
.unter{text-align:center;color:var(--leise);margin-top:-8px}
.einleitung p{font-size:1.06rem}
.zitat{background:var(--karte);border:1px solid var(--linie);border-inline-start:4px solid var(--gold);border-radius:12px;padding:16px 20px;margin:22px 0}
.zitat .ar{font-family:"Amiri","Traditional Arabic","Noto Naskh Arabic","Segoe UI",serif;font-size:1.45rem;color:var(--gruen);direction:rtl;text-align:center;line-height:1.9}
.zitat .ue{color:var(--leise);text-align:center;font-size:.95rem;margin:4px 0 0}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rund);padding:22px;display:flex;flex-direction:column}
.karte h3{margin-top:0;font-size:1.2rem}.karte p{flex:1}
.karte img,.symbol{width:64px;height:64px;border-radius:16px}
.symbol-form{width:64px;height:64px;border-radius:16px;background:var(--gruen);display:grid;place-items:center}
.punkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:0;list-style:none}
.punkte li{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:14px 16px}
.punkte b{display:block;color:var(--gruen)}
.bilder{display:grid;grid-template-columns:2fr 1fr;gap:14px;align-items:end;margin:20px 0}
.bilder figure{margin:0}.bilder img{width:100%;height:auto;border-radius:12px;border:1px solid var(--linie)}
.bilder figcaption{font-size:.85rem;color:var(--leise);text-align:center}
.knopf{display:inline-block;background:var(--gruen);color:#fff;text-decoration:none;border-radius:999px;padding:.7rem 1.6rem;font-weight:600}
.knopf:hover{background:var(--gruen2);color:#fff}
.hinweis{background:#F5EEDC;border-radius:12px;padding:12px 16px;color:#5a4a20;font-size:.95rem}
.zaehler{text-align:center;margin:30px 0 0;color:var(--leise)}
.zaehler b{display:block;font-size:2rem;color:var(--gruen);font-variant-numeric:tabular-nums}
footer.fuss{border-top:1px solid var(--linie);margin-top:14px;padding:16px 0 30px;font-size:.88rem;color:var(--leise);text-align:center}
.mitte{text-align:center}
@media(max-width:560px){.bilder{grid-template-columns:1fr}}