/* v4.22 gemeinsames Grundlayout fuer neue Seiten (aus namen-auf-arabisch.html uebernommen) */

  :root{
    --bg:#FBF7EE; --bg-deep:#F1E8D3; --ink:#1C2321; --ink-soft:#5B6360;
    --primary:#0B5E5E; --primary-light:#12807F; --primary-dark:#073F3F;
    --gold:#8A6122; --gold-soft:#E4C892;
    --card:#FFFFFF; --border:#E4D9BE; --shadow:0 16px 40px -16px rgba(20,30,28,.26);
    --ok:#3E7A52;
  }
  *{box-sizing:border-box;}
  html{overflow-x:hidden;}
  /* overflow-x gehört ans html-Element, nicht ans body – auf body bricht es in
     Chrome position:sticky-Elemente (siehe index.html). */
  body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.6;}
  a{color:inherit;} .wrap{max-width:860px;margin:0 auto;padding:0 24px;}
  header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;text-decoration:none;color:var(--ink);}
  .brand .mark{font-family:Georgia,serif;font-size:1.5rem;color:var(--primary);}
  .langs{display:flex;gap:4px;flex-wrap:wrap;}
  .lang-btn{font-size:.72rem;font-weight:700;border:1px solid var(--border);background:#fff;color:var(--ink-soft);padding:5px 9px;border-radius:7px;cursor:pointer;}
  .lang-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
  .lang-dd{position:relative;}
  .lang-dd-btn{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;border:1px solid var(--border);background:#fff;color:var(--ink);padding:7px 12px;border-radius:99px;cursor:pointer;}
  .lang-dd-btn:hover{border-color:var(--gold);}
  .lang-dd-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px -16px rgba(20,30,28,.26);padding:6px;min-width:190px;z-index:60;max-height:60vh;overflow-y:auto;}
  .lang-dd.open .lang-dd-menu{display:block;}
  [dir=rtl] .lang-dd-menu{right:auto;left:0;}  /* v4.12: Sprachmenü im RTL-Modus nicht abschneiden */
  .lang-dd-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px;border:none;background:none;text-align:left;padding:8px 10px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;}
  .lang-dd-menu button:hover{background:var(--bg-deep);}
  .lang-dd-menu button.active{background:var(--primary);color:#fff;}
  .lang-dd-menu .code{font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--ink-soft);}
  .lang-dd-menu button.active .code{color:rgba(255,255,255,.75);}
  .back-link{font-size:.82rem;color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
  .network-bar{background:var(--bg-deep);border-top:1px solid var(--border);padding:20px 0;margin-top:40px;}
  .network-bar .label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;}
  .network-links{display:flex;gap:10px;flex-wrap:wrap;}
  .network-links a{font-size:.82rem;font-weight:600;background:var(--card);border:1px solid var(--border);padding:7px 14px;border-radius:99px;text-decoration:none;color:var(--ink);}
  .network-links a:hover{border-color:var(--gold);}
  nav.sitenav{border-top:1px solid var(--border);}
  .sitenav-inner{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:9px 0;}
  .sitenav-inner::-webkit-scrollbar{display:none;}
  .sitenav-inner a{flex-shrink:0;font-size:.82rem;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:6px 13px;border-radius:99px;white-space:nowrap;}
  .sitenav-inner a:hover{background:var(--bg-deep);color:var(--ink);}
  .sitenav-inner a[aria-current="page"]{background:var(--primary);color:#fff;}

  section{padding:34px 0;}
  .hero{text-align:center;padding:40px 0 20px;}
  .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary-dark);background:var(--bg-deep);border:1px solid var(--border);padding:7px 15px;border-radius:99px;margin-bottom:20px;}
  h1{font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 14px;font-weight:800;}
  .hero p.lead{max-width:560px;margin:0 auto;color:var(--ink-soft);font-size:1.02rem;}





  details{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--card);}
  summary{cursor:pointer;font-weight:700;}
  details p{margin:10px 0 0;color:var(--ink-soft);font-size:.92rem;}

  .promo{background:var(--bg-deep);border:1px solid var(--border);border-radius:14px;padding:18px 20px;text-align:center;font-size:.92rem;}
  .promo a{color:var(--primary-dark);font-weight:700;}

  footer{border-top:1px solid var(--border);padding:26px 0 40px;color:var(--ink-soft);font-size:.82rem;text-align:center;}
  footer a{margin:0 8px;}

  .adslot{margin:28px 0;text-align:center;min-height:0;}
  .adslot .tag{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;}
  .related{margin:30px 0 6px;} .related ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px;}
  .related a{display:block;padding:11px 14px;background:#fff;border:1px solid var(--border);border-radius:10px;text-decoration:none;font-weight:600;color:var(--ink);} .related a:hover{border-color:var(--gold);}