/* ============================================================
   elkady.de – zentrales Stylesheet (ab 31.08.2026)
   ------------------------------------------------------------
   Vereinheitlicht das Design-System ueber alle Seiten hinweg.
   Vorher gab es zwei parallele Token-Sets (ink/gold/creme und
   petrol/champagner/bronze). Sie sind farblich identisch; hier
   ist ein einziger Quelle-der-Wahrheit-Block mit Alias-Shims,
   sodass beide Namensraeume parallel funktionieren.
   ============================================================ */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/lato-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/lato-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url('schriften/lato-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('schriften/naskh-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  /* Kanonische Markenfarben (eine Quelle der Wahrheit) */
  --petrol:#1F2224;          /* dunkles Anthrazit – Flaechen, Kopfleiste */
  --petrol-hell:#2B2F31;     /* abgesetzter dunkler Ton */
  --champagner:#F4F2EE;      /* heller Warmton – Schrift auf dunkel */
  --gold:#D9A441;            /* Akzentfarbe – Buttons, Linien */
  --gold-tief:#C69234;       /* Hover-Zustand Gold */
  --gold-dunkel:#8A5F14;     /* Bronze – Akzente im Hellen */
  --sand:#E4DDD1;            /* sanfter Trennton */
  --grau:#5A5A55;            /* Fliesstext auf hell */
  --linie:#DAD5CC;           /* zarte Trennlinien */
  /* Alias-Shims – koexistieren mit aelteren Namen */
  --ink:var(--petrol); --ink-soft:var(--petrol-hell);
  --ink-weich:var(--petrol-hell);
  --creme:var(--champagner); --beige:var(--champagner);
  --bronze:var(--gold-dunkel); --gold-dark:var(--gold-dunkel);
  --schwarz:#1A1A1A;
  --body:var(--grau);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Lato',-apple-system,Helvetica,Arial,sans-serif;
  background:var(--champagner);color:var(--petrol);font-size:17px;
  line-height:1.65;-webkit-font-smoothing:antialiased}
.ar{font-family:'Noto Naskh Arabic',serif;line-height:1.9}
[dir="rtl"] body,[dir="rtl"] .wrap{text-align:right}

.wrap{max-width:1080px;margin:0 auto;padding:0 26px}

/* ---------- Skip-Link (Tastatur-Bedienung) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);
  color:var(--petrol);padding:10px 18px;font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;z-index:100}
.skip-link:focus,.skip-link:focus-visible{left:8px;top:8px;
  outline:3px solid var(--creme);outline-offset:2px}

/* ---------- Kopfzeile ---------- */
header{background:var(--petrol);position:sticky;top:0;z-index:40}
.bar{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:15px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.mark{width:38px;height:38px;background:var(--gold);color:var(--petrol);
  display:flex;align-items:center;justify-content:center;font-weight:900;
  font-size:13px;letter-spacing:.1em;text-indent:.1em;flex:0 0 auto}
.brandtext{font-weight:300;font-size:15px;color:var(--champagner);
  letter-spacing:.26em;text-indent:.26em;white-space:nowrap}
.brandtext b{font-weight:900}
.mainnav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mainnav a{color:#9A9C9B;text-decoration:none;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--gold)}
.mainnav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mainnav .arlink{font-family:'Noto Naskh Arabic',serif;
  text-transform:none;letter-spacing:0;font-size:15px}

/* ---------- Burger-Menü (mobile) ---------- */
.burger{display:none;background:transparent;border:1px solid var(--gold);
  color:var(--champagner);font:inherit;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 14px;cursor:pointer}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:820px){
  .burger{display:inline-block}
  .mainnav{display:none;width:100%;flex-direction:column;
    align-items:flex-start;gap:14px;padding:6px 0 14px}
  .mainnav.offen{display:flex}
}

/* ---------- Allgemeine Buttons / CTA ---------- */
.cta{display:inline-block;margin-top:34px;background:var(--gold);
  color:var(--petrol);text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.13em;text-transform:uppercase;padding:16px 30px;
  transition:background .18s ease}
.cta:hover{background:var(--gold-tief)}
.cta:focus-visible{outline:2px solid var(--champagner);outline-offset:3px}
.cta-ghost{display:inline-block;margin:34px 0 0 16px;color:var(--champagner);
  text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.13em;
  text-transform:uppercase;padding:14px 22px;border:1px solid var(--champagner)}

/* ---------- Fusszeile ---------- */
footer{background:var(--petrol);color:#8B8D8C;padding:34px 0;font-size:14px}
footer .row{display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;max-width:1080px;margin:0 auto;padding-inline:26px}
footer a{color:#8B8D8C;text-decoration:none}
footer a:hover{color:var(--champagner)}

/* ---------- Hero / Augenbraue ---------- */
.hero{background:var(--petrol);color:var(--champagner);padding:78px 0 92px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--gold)}

/* ---------- Schalter/Button-Toggle (aria-pressed) ---------- */
.schalter button{padding:10px 18px;background:transparent;color:var(--petrol);
  border:1px solid var(--petrol);font:inherit;font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.schalter button[aria-pressed="true"]{background:var(--gold);
  border-color:var(--gold);color:var(--petrol)}
.schalter button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}