/* ============================================================
   SCHRIFT — IBM Plex, self-hosted
   Keine Drittserver: die Dateien liegen unter /fonts/ auf diesem Server.
   Die arabischen Schnitte laedt der Browser dank unicode-range NUR, wenn
   arabische Zeichen vorkommen — deutsche und englische Besucher laden sie nie.
   Plex Sans Arabic ist keine Fremdschrift, sondern die von Bold Monday
   gezeichnete Schwester: gleiche Strichstaerkenlogik, gleicher Duktus.
   ============================================================ */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/plex-sans-400.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: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/plex-sans-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/plex-sans-600.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: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/plex-sans-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/plex-mono-400.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+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/fonts/plex-mono-500.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+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ============================================================
   CI — Eyad Alrayes
   Design Tokens. Einzige Quelle fuer Farben, Typografie, Abstaende.
   ============================================================ */

  /* ============================================================
     FARBSYSTEM

     Zwei Farbtoene, jeder als Leiter mit festen Stufen. Die Stufen sind
     die Rohstoffe -- im Regelwerk wird nie eine Stufe direkt benutzt,
     sondern immer eine Rolle, die auf eine Stufe zeigt. Ein Moduswechsel
     verschiebt nur, auf welche Stufe eine Rolle zeigt.

     Vorher waren die Werte einzeln von Hand gesetzt: fuer eine weitere
     Flaechenebene haette man raten muessen. Jetzt liest man sie ab.

       NEUTRAL (warm)                    AKZENT (rot)
       n-0    #FFFFFF   reinstes Weiss   a-400  #F1544F  auf dunklem Grund
       n-25   #F7F4EE   Text dunkelmodus a-600  #A8262A  auf hellem Grund,
       n-50   #F8F3EA   Flaeche hell              und als gefuellte Flaeche
       n-100  #E8E0D1   Papier hell
       n-200  #CFCBC5   Nebentext dunkelmodus
       n-600  #625B53   Nebentext hell
       n-800  #322C29   Rahmen dunkelmodus
       n-850  #221E1B   Flaeche dunkel
       n-900  #1D1A18   Text hell, gefuellte Flaeche
       n-950  #0A0908   Papier dunkel

     Die Werte sind unveraendert -- die Leiter ordnet nur, was vorher
     verstreut war. ============================================================ */
  :root{
    color-scheme:light dark;

    /* --- Leiter: neutral --- */
    --n-0:#FFFFFF;   --n-25:#F7F4EE;  --n-50:#F8F3EA;  --n-100:#E8E0D1;
    --n-200:#CFCBC5; --n-600:#625B53; --n-800:#322C29; --n-850:#221E1B;
    --n-900:#1D1A18; --n-950:#0A0908;

    /* --- Leiter: Akzent --- */
    --a-400:#F1544F; --a-600:#A8262A;

    /* --- Rollen: Dunkelmodus --- */
    --primaer:var(--n-25);
    --sekundaer:var(--n-200);
    --akzent:var(--a-400);
    --bg:var(--n-950);
    --surface:var(--n-850);
    --line:rgba(247,244,238,.16);
    --line-strong:var(--n-800);
    --shadow:rgba(0,0,0,.28);

    /* --- Rollen: gefuellte Flaechen, in beiden Modi gleich ---
       Sie duerfen nicht mit dem Modus kippen, sonst waere ein Knopf im
       Hellmodus dunkel und im Dunkelmodus hell. */
    --akzent-flaeche:var(--a-600);
    --primaer-flaeche:var(--n-900);
    --auf-flaeche:var(--n-0);

    --max:1452px;
    --sans:"IBM Plex Sans","IBM Plex Sans Arabic", sans-serif;
    --mono:"IBM Plex Mono","IBM Plex Sans Arabic", monospace;
    --ease:cubic-bezier(.2,.65,.2,1);
  }

  /* Ohne gespeicherte Wahl entscheidet die Systemvorgabe; data-theme sticht. */
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --primaer:var(--n-900);
      --sekundaer:var(--n-600);
      --akzent:var(--a-600);
      --bg:var(--n-100);
      --surface:var(--n-50);
      --line:rgba(29,26,24,.18);
      --line-strong:rgba(29,26,24,.34);
      --shadow:rgba(29,26,24,.12);
    }
  }
  [data-theme="light"]{
    color-scheme:light;
    --primaer:var(--n-900);
    --sekundaer:var(--n-600);
    --akzent:var(--a-600);
    --bg:var(--n-100);
    --surface:var(--n-50);
    --line:rgba(29,26,24,.18);
    --line-strong:rgba(29,26,24,.34);
    --shadow:rgba(29,26,24,.12);
  }

  [data-theme="dark"]{color-scheme:dark}

  *{box-sizing:border-box}
  @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  body{
    margin:0;
    background:var(--bg);
    color:var(--primaer);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit}
  ::selection{background:var(--akzent);color:var(--primaer)}

  .site{min-height:100vh;overflow:hidden}
  .shell{width:min(calc(100% - 220px),var(--max));margin:0 auto}
  .eyebrow{
    color:var(--akzent);
    font:500 12px/1 var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  /* Header */
  .header{
    position:relative;
    height:86px;
    display:flex;
    align-items:center;
    border-bottom:1px solid transparent;
  }
  .nav{
    width:min(calc(100% - 64px),var(--max));
    margin:auto;
    display:grid;
    grid-template-columns:160px 1fr auto;
    align-items:center;
    gap:24px;
  }
  .brand{
    font:700 37px/1 var(--sans);
    letter-spacing:-.07em;
  }
  .brand i{font-style:normal;color:var(--akzent)}
  .navlinks{
    display:flex;
    justify-content:center;
    gap:30px;
    font:400 14px/1 var(--mono);
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--sekundaer);
  }
  .navlinks a{position:relative;padding:10px 0}
  .navlinks a:hover,.navlinks a.active{color:var(--primaer)}
  .navlinks a.active:after{
    content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--akzent);
  }
  .controls{display:flex;align-items:center;gap:18px}
  /* Mobiles Menue. Der Knopf zeichnet drei Striche selbst -- Plex Sans hat
     kein Hamburger-Zeichen, ein Zeichen daraus wuerde als Tofu erscheinen. */
  .navtoggle{
    display:none;width:38px;height:38px;padding:0;
    background:none;border:1px solid var(--line-strong);cursor:pointer;
    align-items:center;justify-content:center;
  }
  .navtoggle span{position:relative;display:block;width:17px;height:1px;background:var(--primaer)}
  .navtoggle span:before,.navtoggle span:after{
    content:"";position:absolute;left:0;width:17px;height:1px;background:var(--primaer);
  }
  .navtoggle span:before{top:-6px}
  .navtoggle span:after{top:6px}
  .navtoggle[aria-expanded="true"] span{background:transparent}
  .navtoggle[aria-expanded="true"] span:before{top:0;transform:rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:after{top:0;transform:rotate(-45deg)}
  .langs{display:flex;gap:11px;font:400 12px var(--mono);letter-spacing:.06em}
  .langs a{color:var(--sekundaer)}
  /* Die Sprachen sind jetzt eigene Adressen: die aktuelle ist kein Verweis,
     sondern eine Marke. Sie traegt den Akzent wie zuvor der aktive Knopf. */
  .langs [aria-current]{color:var(--akzent)}
  .slash{color:var(--sekundaer)}
  .theme{
    width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--primaer);
    display:grid;place-items:center;cursor:pointer;
  }
  .theme svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5}

  /* Rail-Marken: je Block eine eigene Marke in der Randspalte, wie im
     Referenzbild. Links Nummer + Linie, rechts Punkt bzw. Schrittspalte. */
  .page-grid{position:relative}
  .rail{
    position:absolute;top:0;bottom:0;width:32px;
    display:flex;justify-content:center;pointer-events:none;
  }
  .rail.left{left:-86px}
  .rail-inner{
    height:100%;display:flex;flex-direction:column;align-items:center;
    color:var(--primaer);font:400 10px/1 var(--mono);
    letter-spacing:.12em;text-transform:uppercase;
    padding:38px 0 30px;
  }
  .rail-label{writing-mode:vertical-rl;transform:rotate(180deg)}
  .rail-line{width:1px;flex:1;background:var(--akzent);margin:20px 0}
  .rail-number{color:var(--akzent);font-size:12px;letter-spacing:.04em}
  /* Fortschritts-Rail: EIN festes Element am Rand statt je Abschnitt eines.
     Beim Blaettern kommt pro Abschnitt ein Punkt dazu (rail.js).
     Waagerechte Lage: dieselbe Linie, auf der die Abschnitts-Rails sassen —
     die Shell ist min(100% - 220px, --max) breit, die Rail sass 86px weiter
     aussen. Unterhalb von 1672px Viewport ergibt das konstant 24px. */
  .rail-fixed{
    position:fixed;
    top:50%;transform:translateY(-50%);
    right:max(24px, calc((100vw - var(--max)) / 2 - 86px));
    z-index:5;
    display:flex;flex-direction:column;gap:11px;
    pointer-events:none;
  }
  .rail-fixed i{
    width:8px;height:8px;display:block;
    background:var(--sekundaer);opacity:.55;
    transition:background 160ms var(--ease),opacity 160ms var(--ease);
  }
  .rail-fixed i.on{background:var(--akzent);opacity:1}
  @media (prefers-reduced-motion: reduce){ .rail-fixed i{transition:none} }
  /* Ohne Skript bleibt die Rail unsichtbar statt als toter Punktstreifen
     stehen; mit Skript setzt rail.js die Klasse. */
  .rail-fixed:not(.bereit){opacity:0}


  /* Zurueck nach oben. Sitzt in derselben Randspalte wie die Rail, damit die
     rechte Kante eine Linie behaelt. Erscheint erst nach etwas Blaettern. */
  .nach-oben{
    position:fixed;bottom:34px;
    right:max(24px, calc((100vw - var(--max)) / 2 - 86px));
    z-index:6;
    width:38px;height:38px;
    display:grid;place-items:center;
    background:var(--surface);color:var(--akzent);
    border:1px solid var(--line-strong);border-radius:0;
    cursor:pointer;
    box-shadow:0 6px 18px var(--shadow);
    opacity:0;visibility:hidden;
    transform:translateY(6px);
    transition:opacity 160ms var(--ease),transform 160ms var(--ease),
               visibility 0s linear 160ms,border-color 160ms var(--ease);
  }
  .nach-oben.sichtbar{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nach-oben:hover{border-color:var(--akzent)}
  .nach-oben svg{width:17px;height:17px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  [dir="rtl"] .nach-oben{right:auto;left:max(24px, calc((100vw - var(--max)) / 2 - 86px))}
  @media (max-width:720px){
    .nach-oben{right:16px;bottom:16px}
    [dir="rtl"] .nach-oben{left:16px;right:auto}
  }
  @media (prefers-reduced-motion: reduce){
    .nach-oben{transition:opacity 1ms linear,visibility 0s}
  }


  /* Abschnittsweises Einblenden.
     Beim Laden ist nur der Hero zu sehen; jeder weitere Abschnitt erscheint,
     sobald er in den Blick kommt. Die Regel haengt an .js, das ein winziges
     Inline-Skript im Kopf setzt -- ohne Javascript bleibt alles sichtbar.
     Bei prefers-reduced-motion entfaellt die Bewegung, der Abschnitt ist dann
     sofort da. */
  .js .section:not(.da){opacity:0;transform:translateY(18px)}
  .js .section{transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
  .js .section.da{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .js .section:not(.da){opacity:1;transform:none}
    .js .section{transition:none}
  }

  /* Hero */
  .hero{
    min-height:660px;
    display:grid;
    grid-template-columns:5fr 7fr;
    gap:54px;
    align-items:center;
    padding-block:30px;padding-inline:40px 0;
    /* Ohne senkrechte Randlinien: der Hero soll offen beginnen, die Kaesten
       fangen erst bei den Abschnitten darunter an. */
    position:relative;
  }
  .hero-copy{padding-inline-start:40px}
  .hero h1{
    margin:0;
    max-width:600px;
    font-size:clamp(70px,7.2vw,120px);
    line-height:.86;
    letter-spacing:-.075em;
    font-weight:600;
  }
  .hero-role{
    margin:30px 0 0;
    max-width:500px;
    font:400 18px/1.35 var(--mono);
    letter-spacing:.045em;
    text-transform:uppercase;
  }
  /* Der Rollentitel brach auf beiden Seiten unterschiedlich um: die Startseite
     trug einen festen <br> im Text (und in den Uebersetzungen), die
     Profilseite nicht -- dort brach der Browser nach dem Schraegstrich, mitten
     in "Cloud/DevOps". Statt eines festen Umbruchs haelt .nb den Begriff
     zusammen; gebrochen wird dann an der Leerstelle davor, auf beiden Seiten
     gleich und je nach Breite. */
  .nb{white-space:nowrap}
  .hero-rule{width:18px;height:2px;background:var(--akzent);margin:25px 0 20px}
  .hero-intro{
    max-width:530px;
    margin:0 0 26px;
    color:var(--sekundaer);
    font:400 14px/1.7 var(--mono);
  }
  .actions{display:flex;align-items:center;gap:36px}
  /* Der Knopf war ein weinroter Verlaufsblock mit Schatten, breitem
     Innenabstand und einem Pfeil, der 24px abgesetzt am rechten Rand hing --
     die lauteste Flaeche der Seite und optisch vom eigenen Text getrennt.
     Jetzt traegt er die Textfarbe als Flaeche: ruhig, aber klar der staerkste
     Anker im Hero. Der Pfeil sitzt direkt am Wort und rueckt beim Ueberfahren
     ein Stueck weiter, statt dass der ganze Knopf springt. Rot bleibt den
     kleinen Marken vorbehalten und kommt hier nur beim Ueberfahren dazu. */
  .button{
    display:inline-flex;align-items:center;gap:10px;
    min-height:48px;padding:0 22px;
    background:var(--akzent-flaeche);
    color:var(--auf-flaeche);
    border:1px solid var(--akzent-flaeche);
    font:500 12px var(--mono);
    letter-spacing:.06em;
    text-transform:uppercase;
    transition:background .18s var(--ease),border-color .18s var(--ease),
               color .18s var(--ease);
  }
  .button span[aria-hidden]{transition:transform .18s var(--ease)}
  /* --red-bright ist im Dunkelmodus #EE4340; Weiss darauf erreicht nur 3.81.
     --akzent-flaeche (#A8262A) gilt in beiden Modi und kommt mit Weiss auf
     7.06. */
  .button:hover{background:var(--primaer-flaeche);border-color:var(--primaer-flaeche);color:var(--auf-flaeche)}
  .button:hover span[aria-hidden]{transform:translateX(4px)}
  [dir="rtl"] .button:hover span[aria-hidden]{transform:translateX(-4px)}
  @media (prefers-reduced-motion: reduce){
    .button span[aria-hidden]{transition:none}
    .button:hover span[aria-hidden]{transform:none}
  }
  .text-link{
    font:400 11px var(--mono);text-transform:uppercase;
    border-bottom:1px solid var(--akzent);padding-bottom:6px;
  }

  /* Console */
  /* Die Konsole war eine gesaettigte rote Verlaufsflaeche und damit der einzige
     grosse Farbblock auf cremefarbenem Grund — sie las sich als Fremdkoerper.
     Jetzt traegt sie die Flaechen- und Linienfarben der Seite; Rot und Messing
     bleiben als kleine Marken. Der starke Akzent liegt damit allein auf dem
     Kontaktblock am Seitenende. Geometrie unveraendert. */
  .console{
    color:var(--primaer);
    align-self:center;
    min-height:480px;
    position:relative;
    border:1px solid var(--line-strong);
    background:var(--surface);
    box-shadow:0 18px 44px var(--shadow);
    overflow:hidden;
  }
  .console-head,.console-foot{
    min-height:59px;padding:0 30px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--line);
    position:relative;z-index:1;
  }
  /* Keine Sonderfarbe: das tiefe Rot erreicht auf dunklem Grund nur 2.56.
     .eyebrow bringt den Akzent mit, der in beiden Modi passt (4.74 / 6.39). */
  .console-head .eyebrow{font-size:13px}
  .status{display:flex;gap:10px;align-items:center;color:var(--sekundaer);font:400 12px var(--mono);text-transform:uppercase}
  .status b{width:7px;height:7px;background:var(--akzent);display:block}
  .console-body{position:relative;z-index:1}
  .row{
    min-height:60px;
    display:grid;grid-template-columns:102px 180px 1fr 28px;
    align-items:center;column-gap:0;
    padding-inline:0 30px;
    border-bottom:1px solid var(--line);
  }
  .row-icon{width:24px;height:24px;justify-self:center;stroke:var(--sekundaer);fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .row-label{font:400 13px var(--mono);color:var(--sekundaer);text-transform:uppercase;
    border-inline-start:1px solid var(--line);padding-inline:22px;min-height:60px;
    display:flex;align-items:center}
  .row-value{font:400 14px var(--mono);color:var(--primaer);letter-spacing:.025em;text-transform:uppercase;
    padding-inline-end:22px}
  /* Kein Pfeil: die Zeilen sind keine Links. Statusmarke wie in der Rail. */
  .row-mark{width:6px;height:6px;background:var(--akzent);opacity:.55;justify-self:center}
  .console-foot{
    min-height:61px;border:0;
    color:var(--sekundaer);font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  }
  .console-corner{
    position:absolute;right:9px;bottom:9px;width:0;height:0;
    border-left:13px solid transparent;border-bottom:13px solid var(--akzent);
  }

  /* Sections */
  .section{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line-strong);
    margin-top:22px;
    padding:34px 44px 44px;
  }
  /* Titel und Beschreibung teilen sich haelftig. Vorher trug der Titel nur
     drei von neun Teilen -- rund 400px -- und "Projekterfahrung" passte darin
     nicht in eine Zeile: es wurde getrennt und der Titel dreizeilig. Mit der
     Haelfte (rund 585px) steht das Wort ganz, die Ueberschrift bleibt
     zweizeilig, und die Regel gilt fuer alle Abschnitte gleich. */
  .section-head{
    display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;
    padding-bottom:29px;border-bottom:1px solid var(--line);
  }
  /* Ohne Beschreibungstext braucht der Titel die Aufteilung nicht: auf
     profil.html stand "Kernkompetenzen" in einer Spalte von einem Drittel
     Breite und brach um, waehrend zwei Drittel daneben leer blieben. */
  .section-head:not(:has(.section-desc)){grid-template-columns:1fr}
  .section-title{
    margin:8px 0 0;font-size:56px;line-height:.95;letter-spacing:-.055em;font-weight:550;
    /* Keine automatische Trennung. Sie war noetig, solange der Titel nur ein
       Drittel der Breite hatte -- "Projekterfahrung" passte dort nicht in eine
       Zeile und wurde zu "Projekter-fahrung", die Ueberschrift dreizeilig.
       Seit Titel und Beschreibung sich haelftig teilen, steht das laengste
       Wort (16 Zeichen, rund 480px) bequem in der Spalte (rund 585px), und der
       Umbruch faellt auf die Leerstelle statt in die Wortmitte.
       overflow-wrap bleibt als Notnagel fuer sehr schmale Schirme. */
    hyphens:manual;overflow-wrap:break-word;
  }
  /* Der Kopf hat drei Spalten; die dritte trug den inzwischen entfernten
     Pfeil-Verweis. Der Beschreibungstext reicht jetzt bis zur rechten Kante
     durch, statt neben einer leeren Spalte zu stehen. Seine Breite begrenzt
     weiterhin max-width, damit die Zeilen lesbar kurz bleiben. */
  /* Der Kopf war unten ausgerichtet. Bei einzeiligen Titeln fiel das nicht
     auf, bei "Ausgewaehlte Projekterfahrung" laeuft der Titel aber ueber drei
     Zeilen -- die Beschreibung sass dann auf Hoehe der LETZTEN Zeile, weit
     unten und ohne Bezug zur Ueberschrift. Jetzt richtet sich der Kopf oben
     aus, und der Abstand setzt die Beschreibung auf die Hoehe der ERSTEN
     Titelzeile: Eyebrow (12px) plus dessen Abstand zum Titel (8px) plus der
     Versatz zur Oberkante der Versalien. */
  .section-desc{margin:26px 0 0;color:var(--sekundaer);font-size:14px;line-height:1.65;
    max-width:620px;grid-column:2 / -1}

  /* Services */
  .services-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:0}
  .service{
    min-height:215px;padding:25px 20px 12px;
    border-inline-end:1px solid var(--line);
  }
  .service:first-child{padding-inline-start:0}
  .service:last-child{border-inline-end:0;padding-inline-end:0}
  .service-head{display:grid;grid-template-columns:37px 1fr;gap:14px;align-items:center;margin-bottom:16px}
  .icon{width:37px;height:37px;stroke:var(--akzent);fill:none;stroke-width:1.6}
  .service h3{margin:0;font-size:17px;line-height:1.15;font-weight:450}
  .service p{margin:0;color:var(--sekundaer);font-size:12px;line-height:1.65}

  /* Tech stack */
  .stack-groups{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
  .stack-group{padding:23px 0 25px;border-bottom:1px solid var(--line)}
  .stack-group:nth-child(odd){border-inline-end:1px solid var(--line);padding-inline-end:32px}
  .stack-group:nth-child(even){padding-inline-start:32px}
  .stack-group h3{margin:0 0 12px;font:500 12px var(--mono);color:var(--akzent);text-transform:uppercase;letter-spacing:.08em}
  .stack-items{display:flex;flex-wrap:wrap;gap:8px}
  /* Technik erscheint ueberall als Kachel: eigener Kasten mit Rahmen statt
     einer Aufzaehlung mit Trennpunkten. Dadurch ist auf einen Blick zu sehen,
     wo eine Angabe aufhoert und die naechste beginnt. */
  .tag{
    display:inline-block;
    font:400 12px/1 var(--mono);
    color:var(--sekundaer);
    /* Ohne Fuellung. Sie hing frueher an einer eigenen Flaechenfarbe und
       wanderte mit, als das Papier
       abgedunkelt wurde: von 1.10 auf 1.32 gegenueber der Flaeche -- die
       Kacheln wurden schwer und matschig. Der Rahmen trennt ausreichend. */
    background:transparent;
    border:1px solid var(--line-strong);
    padding:7px 11px;
    white-space:nowrap;
  }

  /* Projects */
  .projects{padding-bottom:0}
  .project-list{margin-top:28px}
  .project{
    display:grid;grid-template-columns:90px 3fr 2fr 1.1fr;gap:28px;
    min-height:148px;padding:24px 0;border-top:1px solid var(--line);
    align-items:start;
  }
  /* Der Abschnittskopf schliesst bereits mit einer Linie ab. Ohne diese
     Ausnahme kaeme die Oberkante des ersten Projekts als zweite Linie dazu. */
  .project:first-child{border-top:0}
  .project:last-child{border-bottom:1px solid var(--line)}
  .project-no{font:400 12px var(--mono);color:var(--akzent)}
  .project h3{margin:0 0 8px;font-size:27px;line-height:1.05;font-weight:450;letter-spacing:-.025em}
  .project-context{color:var(--sekundaer);font-size:13px;line-height:1.55}
  .project-meta{font:400 11px/1.65 var(--mono);color:var(--sekundaer);text-transform:uppercase}
  /* Die Technik steht als Kachelreihe ueber der Firma; die Kacheln sind hier
     etwas kleiner als im Stack-Abschnitt, damit die Spalte schmal bleibt. */
  .project-meta .stack-items{gap:6px;margin-bottom:9px}
  .project-meta .tag{font-size:11px;padding:5px 9px}
  .project-co{display:block;color:var(--primaer);font-weight:400;margin-bottom:3px}
  .project-result{font:400 12px/1.55 var(--mono);color:var(--sekundaer)}
  .project-result b{color:var(--akzent);font-weight:400}

  /* Career */
  /* Werdegang und Projektliste sind beide Tabellen und werden jetzt gleich
     behandelt: dieselbe Breite der ersten Spalte (90px), dieselbe Zeilenhoehe,
     dieselbe Linienfuehrung -- Trennlinie oben an jeder Zeile ausser der
     ersten, Abschluss unten. Die Zeitleiste brachte zuvor eine eigene
     Oberkante mit, die direkt unter der Linie des Abschnittskopfs lag: zwei
     Striche dicht uebereinander ohne Aussage. */
  .time-row{
    display:grid;grid-template-columns:90px 1fr 200px;gap:28px;
    padding:24px 0;border-top:1px solid var(--line);align-items:start;
  }
  .time-row:first-child{border-top:0}
  .time-row:last-child{border-bottom:1px solid var(--line)}
  /* Der Werdegang zeigt die juengeren Stationen. Der Hinweis macht kenntlich,
     dass es sich um eine Auswahl handelt -- sonst liest sich die Liste als
     vollstaendig und widerspricht der Angabe von ueber zehn Jahren. */
  .timeline-hinweis{
    margin:18px 0 0;font:400 12px var(--mono);color:var(--sekundaer);
  }
  .time-year{font:400 12px var(--mono);color:var(--akzent)}
  .time-role{font-size:17px}
  .time-role small{display:block;color:var(--sekundaer);font-size:12px;line-height:1.5;margin-top:5px}
  /* Technik als Kacheln wie in der Projektliste, rechtsbuendig ausgerichtet. */
  .time-type{justify-content:flex-end}
  .time-type .tag{font-size:11px;padding:5px 9px}

  /* Education + ways */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative}
  .split .section{margin-top:22px}
  .education-item{padding:30px 0;border-bottom:1px solid var(--line)}
  .education-item:first-child{border-top:1px solid var(--line);margin-top:28px}
  .education-item h3{font-size:22px;font-weight:450;margin:0 0 7px}
  .education-item p{font:400 12px/1.6 var(--mono);color:var(--sekundaer);margin:0}
  .ways-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:28px}
  .way{min-height:110px;padding:22px 0 20px;border-top:1px solid var(--line)}
  .way:nth-child(odd){padding-inline-end:22px}
  .way:nth-child(even){padding-inline-start:22px;border-inline-start:1px solid var(--line)}
  .way h3{margin:0 0 8px;font-size:16px;font-weight:450}
  .way p{margin:0;color:var(--sekundaer);font-size:12px;line-height:1.55}

  /* Contact */
  /* Der Abschluss war eine Verlaufsflaeche mit Glanzstreifen und vier eigenen
     Hex-Werten, 360px hoch, mit einer 70px-Ueberschrift -- und die E-Mail, um
     die es dem Block eigentlich geht, war das kleinste Element darin.
     Jetzt: eine flache Akzentflaeche, etwas kompakter, und der Kontakt als
     Knopf statt als Kleingedrucktes. Die Farben kommen aus den Rollen; die
     Abstufungen sind Transparenzstufen derselben Textfarbe, keine neuen Toene. */
  /* Wie die Konsole: normale Abschnittsflaeche, feine Linien, Text in den
     ueblichen Farben. Der Akzent liegt allein auf dem Knopf und der Ecke. */
  .contact{
    min-height:0;
    overflow:hidden;
  }
  .contact-inner{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.6fr 1fr;gap:56px;
    align-items:start;padding-block:14px;
  }
  .contact h2{
    margin:7px 0 14px;font-size:46px;line-height:1.05;letter-spacing:-.045em;font-weight:550;
  }
  .contact-copy{
    font:400 13px/1.6 var(--mono);max-width:520px;
    color:var(--sekundaer);
  }
  .contact-details{font:400 12px/1.9 var(--mono);text-transform:uppercase}
  .contact-details div{
    border-bottom:1px solid var(--line);
    padding:5px 0;
  }
  .contact-details span{color:var(--sekundaer)}
  /* Der Kontaktknopf kehrt den Hero-Knopf um: helle Flaeche auf dem Akzent. */
  /* Eine Regel fuer beide Knoepfe: die Hauptaktion traegt den Akzent, egal auf
     welchem Untergrund sie sitzt. Neutrale Knoepfe liessen die Seite blass
     wirken -- Farbe lag dann nur noch in Kleinteilen. Beim Ueberfahren
     wechseln sie ins Gegenteil des Untergrunds. */
  .contact-cta{
    display:inline-flex;align-items:center;gap:10px;
    min-height:48px;padding:0 22px;margin-top:22px;
    background:var(--akzent-flaeche);color:var(--auf-flaeche);
    border:1px solid var(--akzent-flaeche);
    font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;
    transition:background .18s var(--ease),color .18s var(--ease);
  }
  .contact-cta span[aria-hidden]{transition:transform .18s var(--ease)}
  .contact-cta:hover{background:var(--primaer-flaeche);color:var(--auf-flaeche);border-color:var(--primaer-flaeche)}
  .contact-cta:hover span[aria-hidden]{transform:translateX(4px)}
  [dir="rtl"] .contact-cta:hover span[aria-hidden]{transform:translateX(-4px)}
  @media (prefers-reduced-motion: reduce){
    .contact-cta span[aria-hidden]{transition:none}
    .contact-cta:hover span[aria-hidden]{transform:none}
  }
  .contact-corner{
    position:absolute;right:13px;bottom:13px;width:0;height:0;
    border-left:18px solid transparent;
    border-bottom:18px solid var(--akzent);
  }

  /* Footer */
  footer{
    padding:55px 0 34px;
    border-top:1px solid var(--line);
    margin-top:22px;
  }
  .footer-grid{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:40px}
  .footer-brand{font:700 30px var(--sans);letter-spacing:-.07em}
  .footer-brand i{font-style:normal;color:var(--akzent)}
  .footer-note,.footer-links{font:400 10px var(--mono);color:var(--sekundaer);text-transform:uppercase}
  .footer-links{display:flex;gap:25px}
  .footer-bottom{display:flex;justify-content:space-between;margin-top:45px;padding-top:14px;border-top:1px solid var(--line);font:400 9px var(--mono);color:var(--sekundaer);text-transform:uppercase}

  /* Mobile */
  @media (max-width:1050px){
    .nav{grid-template-columns:auto 1fr auto}
    .navlinks{gap:18px}
    .hero{grid-template-columns:1fr;padding:48px 44px 58px;gap:45px}
    .hero-copy{padding-inline-start:20px}
    .console{min-height:auto}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .service{border-bottom:1px solid var(--line)}
    .service:nth-child(2n){border-inline-end:0}
    .service:nth-child(odd){padding-inline-start:0}
    .section-head{grid-template-columns:1fr 1fr}
        .project{grid-template-columns:55px 2fr 1fr}
    .project-result{display:none}
  }
  @media (max-width:720px){
    .shell{width:calc(100% - 28px)}
    .header{height:72px}
    .nav{width:calc(100% - 28px);grid-template-columns:auto auto;justify-content:space-between}
    .navtoggle{display:flex}
    .navlinks{
      display:none;
      position:absolute;left:0;right:0;top:72px;z-index:60;
      flex-direction:column;justify-content:flex-start;gap:0;
      background:var(--surface);
      border-block:1px solid var(--line-strong);
      box-shadow:0 18px 40px var(--shadow);
    }
    .navlinks.offen{display:flex}
    .navlinks a{padding:17px 22px;border-bottom:1px solid var(--line)}
    .navlinks a:last-child{border-bottom:0}
    .navlinks a.active:after{left:22px;right:auto;width:18px;bottom:11px}
    .controls{gap:9px}
    .langs{font-size:10px;gap:7px}
    .brand{font-size:31px}
    .rail,.rail-fixed{display:none}
    .hero{padding:48px 22px 45px;min-height:auto;gap:40px}
    .hero-copy{padding-inline-start:0}
    .hero h1{font-size:clamp(64px,20vw,94px)}
    .hero-role{font-size:14px;margin-top:24px}
    .hero-intro{font-size:11px;line-height:1.7}
    .actions{gap:20px;flex-wrap:wrap}
    .button{min-height:48px;font-size:10px}
    .text-link{font-size:10px}
    .console{min-height:0}
    .console-head,.console-foot{padding:0 18px}
    .row{grid-template-columns:46px 96px 1fr 10px;padding-inline:0 14px;min-height:57px}
    .row-icon{width:17px;height:17px}
    .row-label{padding-inline:12px;min-height:57px}
    .row-value{padding-inline-end:12px}
    .row-label,.row-value{font-size:10px}
    .row-value{line-height:1.35}
    .section{padding:28px 20px 30px;margin-top:14px}
    .section-head{grid-template-columns:1fr;gap:18px;padding-bottom:23px}
    .section-title{font-size:clamp(28px,9.5vw,45px)}
    /* grid-column:2 aus der Grundregel muss hier zurueck, sonst erzeugt es
       eine zweite Spalte, obwohl der Kopf einspaltig sein soll -- der Text
       stand dann gequetscht neben dem Titel statt darunter. */
    .section-desc{font-size:12px;margin-top:0;grid-column:auto}
    .services-grid{grid-template-columns:1fr}
    .service,.service:nth-child(2n){border-inline-end:0;padding:22px 0;min-height:auto}
    .stack-groups{grid-template-columns:1fr}
    .stack-group:nth-child(odd),.stack-group:nth-child(even){border-inline-end:0;padding-inline:0}
    .project{grid-template-columns:38px 1fr;gap:15px;min-height:0}
    .project-meta{grid-column:2}
    .time-row{grid-template-columns:70px 1fr;gap:14px}
    .time-row .time-type{grid-column:2;justify-content:flex-start;margin-top:10px}
    .split{grid-template-columns:1fr;gap:0}
    .ways-grid{grid-template-columns:1fr}
    .way:nth-child(odd),.way:nth-child(even){padding-inline:0;border-inline-start:0}
    .contact-inner{grid-template-columns:1fr;gap:30px;min-height:0}
    .contact h2{font-size:clamp(34px,12vw,56px)}
    .footer-grid{grid-template-columns:1fr;gap:22px}
    .footer-bottom{flex-direction:column;gap:8px}
  }
  @media (max-width:390px){
    .hero h1{font-size:62px}
    .row{grid-template-columns:38px 84px 1fr 8px}
    .row-label{padding-inline:9px}
    .row-label,.row-value{font-size:9px}
    .contact h2{font-size:49px}
  }


  /* ============================================================
     ERGAENZUNGEN AUS UNSEREM BESTAND — aendern den Look nicht
     ============================================================ */
  /* Sichtbarer Tastaturfokus */
  :focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

  /* Logo-Richtungsinsel: der Punkt wandert in RTL sonst ans andere Ende */
  .brand,.footer-brand{direction:ltr;unicode-bidi:isolate}
  /* direction:ltr richtet den Inhalt zugleich linksbuendig aus. Im Kopf faellt
     das nicht auf, weil die Marke nur so breit ist wie ihr Text. Im Fuss sitzt
     sie in einer 1fr-Spalte: die liegt im RTL-Satz rechts, die Marke klebte
     aber an deren linker Kante, mit einer grossen Luecke daneben. */
  [dir="rtl"] .footer-brand{text-align:right}

  /* RTL: das Layout spiegelt. Die Vorlage nutzt teils physische Angaben. */
  [dir="rtl"] .rail-fixed{right:auto;left:max(24px, calc((100vw - var(--max)) / 2 - 86px))}
  [dir="rtl"] .rail.left{left:auto;right:-86px}
  [dir="rtl"] .console-corner{right:auto;left:9px;
    border-left:0;border-right:13px solid transparent}
  [dir="rtl"] .contact-corner{right:auto;left:13px;
    border-left:0;border-right:18px solid transparent}

  /* Arabische Typografie: keine Sperrung, keine Versalien, Mono faellt auf
     Plex Sans Arabic zurueck (Plex Mono deckt kein Arabisch ab). */
  [dir="rtl"] .eyebrow,[dir="rtl"] .navlinks,[dir="rtl"] .hero-role,
  [dir="rtl"] .button,[dir="rtl"] .text-link,
  [dir="rtl"] .status,[dir="rtl"] .row-label,[dir="rtl"] .row-value,[dir="rtl"] .console-foot,
  [dir="rtl"] .stack-group h3,[dir="rtl"] .project-meta,
  [dir="rtl"] .time-type,[dir="rtl"] .contact-details,[dir="rtl"] .footer-note,
  [dir="rtl"] .footer-links,[dir="rtl"] .footer-bottom,[dir="rtl"] .rail-inner{
    letter-spacing:0;text-transform:none;
  }
  /* Arabische Schrift hat deutlich hoehere Ober- und Unterlaengen als die
     lateinische. Die verdichteten Zeilenhoehen der Ueberschriften (.95 bzw.
     .9) lassen sie in den darueberstehenden Eyebrow ragen -- der Titel
     verdeckte ihn. Im RTL-Satz deshalb normale Zeilenhoehen. */
  [dir="rtl"] .section-title{line-height:1.3;letter-spacing:0;margin-top:14px}
  [dir="rtl"] .contact h2{line-height:1.25;letter-spacing:0}
  [dir="rtl"] .hero h1{line-height:1.2;letter-spacing:0}

  [dir="rtl"] .eyebrow,[dir="rtl"] .hero-role,[dir="rtl"] .stack-group h3{
    font-family:var(--sans);font-weight:600;
  }
  /* Die dekorativen Rail-Labels entfallen in RTL: arabische Schrift laesst
     sich nicht vertikal stapeln, die Glyphen wuerden gedreht. */
  /* Arabisch ist verbunden geschrieben; writing-mode:vertical-* zerreisst die
     Ligaturen und stellt die Buchstaben einzeln uebereinander. Deshalb war die
     Beschriftung hier bisher ganz ausgeblendet. Stattdessen bleibt der Text
     waagerecht gesetzt und wird als Ganzes gedreht -- die Schrift bleibt
     korrekt verbunden und lesbar. Die feste Groesse haelt den gedrehten
     Kasten in der 32px breiten Spalte. */
  /* Arabisch ist verbunden geschrieben. writing-mode:vertical-rl allein wuerde
     die Buchstaben einzeln uebereinander stellen und die Ligaturen zerreissen;
     text-orientation:sideways legt die Glyphen dagegen normal waagerecht und
     kippt nur die Laufrichtung -- die Schrift bleibt verbunden.
     Gegenueber der vorherigen Loesung (drehen per transform) hat das einen
     entscheidenden Vorteil: der Kasten im Layout ist tatsaechlich so hoch wie
     der Text lang ist. Die feste Hoehe von 6em passte fuer "الرئيسية" auf der
     Startseite, war fuer das laengere "الملف الشخصي" auf profil.html aber zu
     klein -- der Text stiess dort wieder an die Linie. Jetzt gilt der Abstand
     unabhaengig von der Wortlaenge. */
  [dir="rtl"] .rail-label{
    display:block;
    writing-mode:vertical-rl;
    text-orientation:sideways;
    transform:rotate(180deg);
    white-space:nowrap;
  }
  [dir="rtl"] .section-title,[dir="rtl"] .contact h2{hyphens:manual}
  /* Arabische Satztradition kennt kein Fortsetzungszeichen an der Zeilenkante.
     Statt des Trennpunkts traegt hier der groessere Abstand. */

  /* Die Vorlage zeigt je Service einen Fliesstext; unsere Inhalte sind Listen.
     Gleiche Optik wie .service p, nur als Liste gesetzt. */
  .service-list{margin:0;padding:0;list-style:none;color:var(--sekundaer);font-size:12px;line-height:1.65}
  .service-list li{padding:1px 0}
  .skip-link{position:absolute;top:-3rem;inset-inline-start:16px;z-index:100;
    background:var(--surface);color:var(--akzent);padding:8px 16px;border:1px solid var(--line-strong)}
  .skip-link:focus{top:16px}
  .lang-btn{background:none;border:0;padding:0;cursor:pointer;color:var(--sekundaer);
    font:400 12px var(--mono);letter-spacing:.06em}
  .lang-btn[aria-pressed="true"]{color:var(--akzent)}
  .project-co:empty{display:none}

  /* Umschalter: das Symbol zeigt, was ein Klick bewirkt. */
  .theme .ico-mond{display:none}
  [data-theme="light"] .theme .ico-sonne{display:none}
  [data-theme="light"] .theme .ico-mond{display:block}
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]) .theme .ico-sonne{display:none}
    :root:not([data-theme="dark"]) .theme .ico-mond{display:block}
  }

  /* Rechtsseiten */
  .legal-body{max-width:74ch;padding-top:30px}
  .legal-body h2{margin:34px 0 12px;font-size:23px;font-weight:550;letter-spacing:-.02em}
  .legal-body h2:first-child{margin-top:0}
  .legal-body p{margin:0 0 14px;color:var(--sekundaer);font-size:15px;line-height:1.7}
  .legal-body a{border-bottom:1px solid var(--akzent)}
  .legal-body ul{margin:0 0 14px;padding-inline-start:20px;color:var(--sekundaer);font-size:15px;line-height:1.7}