/* ==========================================================================
   MXM Management — themxm.group
   Conday Digital · Cedric Conday
   Logische CSS-Eigenschaften durchgehend: dieselbe Datei traegt LTR und RTL.
   ========================================================================== */

:root{
  --paper:#F2F0EB; --surface:#EAE7E0; --ground:#0B0B0C;
  --ink:#121213; --body:#4E4E52; --muted:#86847E;
  --hair:#D7D3CB; --line:#BEB9AF;
  --brass:#8C6E33;
  --on-dark:#F2F0EB; --on-dark-muted:#9C9A94;
  --display:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,"Segoe UI",sans-serif;
  --utility:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(1.25rem,5vw,5rem);
}

/* Arabische Fassung: eigene Schriftfamilien, sonst identisch */
html[lang="ar"]{
  --display:"Noto Kufi Arabic","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --utility:"Noto Sans Arabic",ui-monospace,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E0F10; --surface:#16181A; --ground:#000;
    --ink:#EDEBE6; --body:#B0AEA8; --muted:#78766F;
    --hair:#25272A; --line:#33363A;
    --brass:#C9A45C;
    --on-dark:#EDEBE6; --on-dark-muted:#8C8A84;
  }
}
:root[data-theme="dark"]{
  --paper:#0E0F10; --surface:#16181A; --ground:#000;
  --ink:#EDEBE6; --body:#B0AEA8; --muted:#78766F;
  --hair:#25272A; --line:#33363A;
  --brass:#C9A45C;
  --on-dark:#EDEBE6; --on-dark-muted:#8C8A84;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--display); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.5vh,1.6rem) var(--pad);
  font-family:var(--utility); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark); mix-blend-mode:difference; pointer-events:none;
}
.nav a{pointer-events:auto; color:inherit; text-decoration:none; opacity:.75; transition:opacity .3s}
.nav a:hover,.nav a:focus-visible{opacity:1}
.nav .brand{font-weight:700; letter-spacing:.3em; opacity:1}
.nav .set{display:flex; gap:1.6rem; align-items:center}
.nav .langs{display:flex; gap:.9rem; padding-inline-start:1.6rem; border-inline-start:1px solid currentColor}
.nav .langs a[aria-current="true"]{opacity:1; color:var(--brass)}
html[lang="ar"] .nav{letter-spacing:0}

/* ---------- Helle Sektionen ---------- */
.eyebrow{
  font-family:var(--utility); font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:1rem; margin:0 0 clamp(1.6rem,5vh,3rem)
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--hair); max-width:220px}
html[lang="ar"] .eyebrow{letter-spacing:0; text-transform:none}
h2{
  font-family:var(--display); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(1.8rem,4.6vw,3.7rem); line-height:1.06; letter-spacing:-.022em; text-wrap:balance;
}
h2 em{font-style:normal; color:var(--brass)}
html[lang="ar"] h2{letter-spacing:0; line-height:1.45}
.lede{font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.6; max-width:60ch; margin:clamp(1.2rem,3.5vh,2rem) 0 0}

/* Kennzahlen */
.stats{display:grid; gap:clamp(1.6rem,4vw,3.2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.stat{border-block-start:1px solid var(--line); padding-block-start:1.1rem}
.stat .v{
  font-size:clamp(2.4rem,6.5vw,4.4rem); line-height:.95; color:var(--ink); font-weight:400;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums
}
.stat .k{font-family:var(--utility); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-block-start:.8rem}
html[lang="ar"] .stat .k{letter-spacing:0; text-transform:none}

/* Prinzipien */
.principle{
  display:grid; gap:clamp(1rem,3vw,3.5rem); padding-block:clamp(2rem,6vh,4rem);
  border-block-start:1px solid var(--hair); align-items:start;
}
@media(min-width:900px){.principle{grid-template-columns:minmax(0,20ch) minmax(0,1fr)}}
.principle .k{font-family:var(--utility); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); padding-block-start:.6rem}
html[lang="ar"] .principle .k{letter-spacing:0; text-transform:none}
.principle h3{
  font-family:var(--display); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(1.5rem,3.6vw,2.9rem); line-height:1.1; letter-spacing:-.02em; text-wrap:balance
}
html[lang="ar"] .principle h3{letter-spacing:0; line-height:1.45}
.principle p{margin:1rem 0 0; max-width:52ch; color:var(--body)}

/* Leistungen */
.svc{border-block-start:1px solid var(--line)}
.svc .row{
  display:grid; gap:.5rem clamp(1.5rem,4vw,4rem); padding-block:clamp(1.4rem,4vh,2.4rem);
  border-block-end:1px solid var(--hair);
  transition:padding-inline-start .4s cubic-bezier(.2,.7,.3,1), border-color .4s
}
@media(min-width:900px){.svc .row{grid-template-columns:3rem minmax(0,26ch) minmax(0,1fr); align-items:baseline}}
.svc .num{font-family:var(--utility); font-size:10px; letter-spacing:.14em; color:var(--brass)}
.svc h3{font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,2.2vw,1.7rem); color:var(--ink); margin:0; letter-spacing:-.01em; transition:color .3s}
html[lang="ar"] .svc h3{letter-spacing:0}
.svc p{margin:0; font-size:.95rem; color:var(--muted); line-height:1.55}
.svc .row:hover,.svc .row:focus-within{padding-inline-start:1rem; border-block-end-color:var(--brass)}
.svc .row:hover h3,.svc .row:focus-within h3{color:var(--brass)}

/* Kontakt */
.contact{display:grid; gap:clamp(1.6rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); margin-block-start:clamp(2rem,6vh,3.4rem)}
.contact .k{font-family:var(--utility); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-block-end:.7rem}
html[lang="ar"] .contact .k{letter-spacing:0; text-transform:none}
.contact a{color:var(--ink); text-decoration:none; border-block-end:1px solid var(--brass); padding-block-end:2px; transition:color .3s}
.contact a:hover{color:var(--brass)}
.contact a[href^="tel:"],.contact a[href^="mailto:"]{unicode-bidi:plaintext}
address{font-style:normal; line-height:1.7}

/* Gemischte Schriftrichtung: lateinische Zeilen behalten ihre eigene Laufrichtung,
   auch wenn die Seite von rechts nach links gesetzt ist. */
address,
footer .legal,
footer .sig span,
.stat .v,
.contact span{unicode-bidi:plaintext}

footer{padding:clamp(3rem,8vh,5rem) var(--pad); background:var(--ink); color:var(--on-dark-muted)}
footer .wrap{display:grid; gap:1.6rem}
footer .legal{font-size:12px; line-height:1.7; max-width:88ch; color:var(--on-dark-muted)}
footer .legal a{color:var(--on-dark-muted); text-decoration:none; border-block-end:1px solid rgba(255,255,255,.24)}
footer .legal a:hover{color:var(--brass)}
footer .sig{
  display:flex; gap:1.4rem; justify-content:space-between; flex-wrap:wrap;
  font-family:var(--utility); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border-block-start:1px solid rgba(255,255,255,.14); padding-block-start:1.4rem; color:var(--on-dark-muted);
}
html[lang="ar"] footer .sig{letter-spacing:0; text-transform:none}
footer b{color:var(--brass); font-weight:500}

a:focus-visible,.svc .row:focus-visible{outline:2px solid var(--brass); outline-offset:4px}

.skip{
  position:absolute; inset-inline-start:-9999px; z-index:200;
  background:var(--ink); color:var(--paper); padding:.8rem 1.2rem; text-decoration:none;
}
.skip:focus{inset-inline-start:var(--pad); inset-block-start:.6rem}

@media(max-width:719px){
  .nav .langs{padding-inline-start:.9rem; gap:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .statement,.line span{opacity:1; transform:none; transition:none}
}