/* irfanmirza.de — Mirza Irfan Baig · SEO & GEO
   One stylesheet for all pages. Light + dark, system-driven. */

:root{
  --ground:#F3F4F5;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --ink:#101619;
  --muted:#566068;
  --line:#DBDFE2;
  --accent:#1B4E6B;
  --on-accent:#FFFFFF;
  --accent-soft:#E3EDF3;
  --data:#9A5320;
  --data-soft:#F6EADF;
  --shadow:0 1px 2px rgba(16,22,25,.05), 0 8px 24px rgba(16,22,25,.05);
  --radius:10px;
  --maxw:1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ground:#0B1114;
    --surface:#121A1E;
    --surface-2:#172127;
    --ink:#E5EBEE;
    --muted:#94A1A9;
    --line:#253137;
    --accent:#7FB6D8;
    --on-accent:#0B1114;
    --accent-soft:#152833;
    --data:#D69257;
    --data-soft:#2A2018;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* System fonts only — no external font host is called, so no consent banner
   is needed for fonts and nothing is loaded from a third-party server. */
:root{
  --font-body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Semibold","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-head); margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.15}
h1{font-size:clamp(31px,5vw,46px); font-weight:600}
h2{font-size:clamp(24px,3.4vw,31px); font-weight:600}
h3{font-size:20px; font-weight:600}
p{margin:0}
img{max-width:100%; height:auto; display:block}

a{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}

/* ---------- skip link ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-accent); padding:10px 16px; border:0; z-index:100}
.skip:focus{left:12px; top:12px}

/* ---------- header / nav ---------- */
.site-head{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; flex-wrap:wrap}
.brand{font-family:var(--font-head); font-weight:600; font-size:17px; color:var(--ink); border:0; letter-spacing:-.01em}
.brand span{color:var(--muted); font-weight:400}
nav.main{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; font-size:15.5px}
nav.main a{color:var(--muted); border:0; padding:4px 0}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--ink)}
nav.main a.lang{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--line); border-radius:5px}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px; display:flex; flex-direction:column; gap:20px}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.hero p.lead{font-size:19.5px; color:var(--muted); max-width:62ch}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

.btn{display:inline-block; padding:11px 20px; border-radius:7px; font-weight:600; font-size:16px; border:1px solid transparent}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- metric row ---------- */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:10px}
.metric{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:17px 19px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px}
.metric .fig{font-family:var(--font-mono); font-size:26px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.metric .cap{font-size:14px; color:var(--muted); line-height:1.4}

/* ---------- sections ---------- */
section{padding:46px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{display:flex; flex-direction:column; gap:8px; margin-bottom:24px; max-width:70ch}
.sec-head p{color:var(--muted)}

.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px}
.card h3{font-size:18px}
.card p, .card li{color:var(--muted); font-size:16px}
.card ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:6px}
.card .tagline{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent)}

/* ---------- case blocks ---------- */
.case{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; display:flex; flex-direction:column; gap:16px}
.case-top{display:flex; flex-wrap:wrap; gap:10px; align-items:baseline}
.case-top h3{flex:1 1 auto; min-width:220px; font-size:21px}
.pill{font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent); white-space:nowrap}
.pill.warm{background:var(--data-soft); color:var(--data)}
.deltas{display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.delta{background:var(--surface-2); padding:13px 15px; display:flex; flex-direction:column; gap:2px}
.delta .row{font-family:var(--font-mono); font-size:19px; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.delta .from{color:var(--muted)}
.delta .arrow{color:var(--muted); font-size:13px}
.delta .to{color:var(--accent); font-weight:500}
.delta .cap{font-size:12.5px; color:var(--muted)}
.case p{color:var(--muted)}
.case p strong, .case li strong{color:var(--ink); font-weight:600}
.case ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:16px}

/* ---------- tables ---------- */
.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15.5px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--surface-2)}
tr:last-child td{border-bottom:none}
td b{font-weight:600}
td.n{font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted)}

/* ---------- CV timeline ---------- */
.cv-item{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:18px 0; border-bottom:1px solid var(--line)}
.cv-item:last-child{border-bottom:0}
.cv-item .when{font-family:var(--font-mono); font-size:13.5px; color:var(--muted); padding-top:3px}
.cv-item h3{font-size:18px; margin-bottom:2px}
.cv-item .where{color:var(--accent); font-size:15.5px; margin-bottom:6px}
.cv-item ul{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px; color:var(--muted); font-size:16px}
@media (max-width:620px){.cv-item{grid-template-columns:1fr; gap:6px}}

/* ---------- tag cloud ---------- */
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tags .t{font-size:14.5px; padding:4px 12px; border-radius:20px; background:var(--accent-soft); color:var(--ink)}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:72ch; display:flex; flex-direction:column; gap:16px}
.prose h2{margin-top:18px; font-size:23px}
.prose h3{margin-top:10px; font-size:18px}
.prose p, .prose li{color:var(--muted)}
.prose strong{color:var(--ink)}
.prose ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.prose .box{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--data); border-radius:8px; padding:16px 18px}

/* ---------- contact ---------- */
.contact-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.contact-row .card a{font-size:17px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:32px 0 46px; margin-top:26px}
.site-foot .wrap{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:flex-start}
.site-foot p, .site-foot a{font-size:14.5px; color:var(--muted)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:16px}
.site-foot .who{max-width:44ch}

/* ---- Sprachhinweis / language suggestion bar (kein Redirect) ---- */
.langbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 18px;font-size:.92rem;line-height:1.4;
  background:#1B4E6B;color:#fff}
.langbar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.langbar a:hover{text-decoration:none}
.langbar-x{margin-left:auto;background:none;border:0;color:#fff;opacity:.75;
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px}
.langbar-x:hover{opacity:1}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .langbar{background:#123a51}}
:root[data-theme="dark"] .langbar{background:#123a51}

/* ---- Consent-gated map (lädt Google erst nach Klick) ---- */
.mapbox{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(128,128,128,.28);
  background:linear-gradient(135deg,#e8eef2,#dbe4ea);min-height:340px;display:grid;place-items:center;text-align:center}
.mapbox .inner{padding:28px 24px;max-width:46ch}
.mapbox h3{margin:0 0 8px;font-size:1.05rem}
.mapbox p{margin:0 0 14px;font-size:.92rem;opacity:.8;line-height:1.6}
.mapbox iframe{width:100%;height:420px;border:0;display:block}
.mapbox.loaded{background:none;min-height:0;display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .mapbox{background:linear-gradient(135deg,#1e262b,#171d21)}}
:root[data-theme="dark"] .mapbox{background:linear-gradient(135deg,#1e262b,#171d21)}

/* ---- Navigation mit Untermenü ---- */
.site-head nav.main .has-sub{position:relative}
.site-head nav.main .subtoggle{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;opacity:.85;display:inline-flex;align-items:center;gap:5px}
.site-head nav.main .subtoggle:hover{opacity:1}
.site-head nav.main ul.sub{position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;
  min-width:250px;margin:0;padding:6px;list-style:none;border-radius:10px;
  background:var(--card,#fff);border:1px solid rgba(128,128,128,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
.site-head nav.main ul.sub li{margin:0}
.site-head nav.main ul.sub a{display:block;padding:9px 12px;border-radius:7px;white-space:nowrap}
.site-head nav.main ul.sub a:hover{background:rgba(128,128,128,.12)}
.site-head nav.main .has-sub:hover ul.sub,
.site-head nav.main .has-sub:focus-within ul.sub,
.site-head nav.main .subtoggle[aria-expanded="true"] + ul.sub{opacity:1;visibility:visible;transform:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-head nav.main ul.sub{background:#1b2126}}
:root[data-theme="dark"] .site-head nav.main ul.sub{background:#1b2126}
@media(max-width:860px){
  .site-head nav.main ul.sub{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:none;min-width:0;padding:0 0 0 12px;display:none}
  .site-head nav.main .subtoggle[aria-expanded="true"] + ul.sub{display:block}
  .site-head nav.main .has-sub{width:100%}
}

/* ============================================================
   Mobile: Hamburger-Navigation + Feinschliff für kleine Displays
   ============================================================ */

/* Burger-Button — auf dem Desktop unsichtbar */
.navtoggle{display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:42px; height:38px; padding:0; cursor:pointer; color:var(--ink);
  align-items:center; justify-content:center; flex:0 0 auto}
.navtoggle .bars, .navtoggle .bars::before, .navtoggle .bars::after{
  display:block; width:19px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .18s ease, opacity .18s ease}
.navtoggle .bars{position:relative}
.navtoggle .bars::before, .navtoggle .bars::after{content:""; position:absolute; left:0}
.navtoggle .bars::before{top:-6px}
.navtoggle .bars::after{top:6px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{top:0; transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{top:0; transform:rotate(-45deg)}

/* Sprachhinweis: × bleibt immer in derselben Zeile */
.langbar{flex-wrap:nowrap; align-items:flex-start; gap:12px; padding:10px 18px}
.langbar-text{flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:4px 12px}
.langbar-x{flex:0 0 auto; margin-left:0; margin-top:-2px}

@media (max-width:860px){
  /* Kopfzeile: eine Zeile, Marke links, Burger rechts */
  .site-head .wrap{flex-wrap:nowrap; gap:12px; min-height:60px}
  .brand{font-size:16px; line-height:1.25}
  .navtoggle{display:inline-flex}

  /* Menü als Panel unter der Kopfzeile statt umgebrochener Zeilen */
  .site-head nav.main{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; font-size:16.5px;
    padding:4px 22px 18px;
    background:var(--ground); border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(0,0,0,.10);
    max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain}
  .site-head nav.main.open{display:flex}

  .site-head nav.main > a,
  .site-head nav.main .subtoggle{width:100%; padding:13px 0;
    border-bottom:1px solid var(--line); color:var(--ink)}
  .site-head nav.main .subtoggle{justify-content:space-between; opacity:1}
  .site-head nav.main .subtoggle span[aria-hidden]{transition:transform .16s ease}
  .site-head nav.main .subtoggle[aria-expanded="true"] span[aria-hidden]{transform:rotate(180deg)}
  .site-head nav.main ul.sub{padding:2px 0 8px 14px}
  .site-head nav.main ul.sub a{padding:11px 0; white-space:normal; color:var(--muted)}
  .site-head nav.main > a.lang{width:auto; align-self:flex-start; margin-top:16px;
    padding:7px 13px; border:1px solid var(--line)}
}

@media (max-width:700px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .hero{padding:34px 0 26px; gap:16px}
  .hero p.lead{font-size:17.5px}
  .hero .cta{gap:10px}
  .btn{padding:12px 18px; font-size:15.5px}
  h1{letter-spacing:-.015em}
}

@media (max-width:520px){
  .brand span{display:none}          /* Untertitel weg, Name bleibt lesbar */
  .langbar{font-size:.88rem; padding:9px 14px}
  .hero .cta .btn{flex:1 1 100%; text-align:center}
}

/* Lange URLs und Wörter brechen um, statt die Seite breiter zu machen */
body{overflow-wrap:break-word}
main a, main code, main .mono{overflow-wrap:anywhere}