<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<title>Mahmoud Mahran · Web Design &amp; AI Specialist</title>
<meta name="description" content="Mahmoud Mahran – Web Design &amp; AI Specialist. Founder of Mahran Studio.">
<link rel="canonical" href="https://mahran.eu/">

<!-- Vorschau beim Teilen (WhatsApp, LinkedIn …) -->
<meta property="og:type" content="profile">
<meta property="og:url" content="https://mahran.eu/">
<meta property="og:title" content="Mahmoud Mahran · Web Design &amp; AI Specialist">
<meta property="og:description" content="Founder of Mahran Studio. Save my contact with one tap.">
<meta property="og:image" content="https://mahran.eu/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Mahmoud Mahran – Web Design &amp; AI Specialist">
<meta name="twitter:card" content="summary_large_image">

<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- Vor dem ersten Rendern: Intro nur beim ersten Besuch, reduzierte Bewegung -->
<script>
(function () {
  var d = document.documentElement;
  var rm = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  var seen = false;
  try { seen = sessionStorage.getItem('mm_intro') === '1'; } catch (e) {}
  if (rm || seen) d.classList.add('no-intro');
  else { try { sessionStorage.setItem('mm_intro', '1'); } catch (e) {} }
  if (rm) d.classList.add('rm');
})();
</script>

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">
<link rel="preload" as="font" type="font/woff2" href="fonts/archivo-latin-800-normal.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="fonts/geist-latin-500-normal.woff2" crossorigin>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Große Bildschirme: dasselbe Video unscharf hinter der Karte -->
<div class="ambient" aria-hidden="true">
  <img src="poster.jpg" alt="">
  <video id="ambient-video" muted loop playsinline preload="none"></video>
</div>

<main class="card">

  <!-- Living Portrait: Standbild sofort, Video darüber sobald es läuft -->
  <div class="portrait">
    <img class="portrait-poster" src="poster.jpg" alt="Mahmoud Mahran" width="720" height="1280" fetchpriority="high">
    <video id="portrait-video" class="portrait-video" muted loop playsinline preload="auto"
           disablepictureinpicture disableremoteplayback aria-hidden="true"></video>
  </div>
  <script>
  (function () {
    if (document.documentElement.classList.contains('rm')) return;   // reduzierte Bewegung: nur Standbild
    var v = document.getElementById('portrait-video');
    v.muted = true; v.autoplay = true; v.src = 'profile.mp4';
    var p = v.play(); if (p) p.catch(function () {});
  })();
  </script>

  <!-- Fester dunkler Verlauf unter dem Text -->
  <div class="shade" aria-hidden="true"></div>

  <a class="mark" href="https://mahranstudio.de" target="_blank" rel="noopener" aria-label="Mahran Studio">
    <img src="mark.png" alt="" width="128" height="98">
  </a>

  <div class="content">
    <h1 class="name">Mahmoud Mahran</h1>
    <p class="title">Web Design &amp; AI Specialist</p>

    <div class="founder">
      <span class="founder-label">FOUNDER OF</span>
      <img class="founder-logo" src="logo.png" alt="Mahran Studio" width="504" height="98">
    </div>

    <a class="save" href="Mahmoud-Mahran.vcf">
      <svg viewBox="0 0 640 512" aria-hidden="true" focusable="false"><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
      Save contact
    </a>

    <nav class="links" aria-label="Contact">
      <a class="i-wa" href="https://wa.me/491781359127" target="_blank" rel="noopener" aria-label="WhatsApp"><svg viewBox="0 0 448 512" aria-hidden="true" focusable="false"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
      <a class="i-tel" href="tel:+491781359127" aria-label="Call"><svg viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg></a>
      <a class="i-mail" href="mailto:Mahmoud@mahran.eu" aria-label="Send email"><svg viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></a>
      <a class="i-web" href="https://mahranstudio.de" target="_blank" rel="noopener" aria-label="Mahran Studio website"><svg viewBox="0 0 512 512" aria-hidden="true" focusable="false"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg><img class="web-mark" src="mark.png" alt="" width="128" height="98"></a>
      <a class="i-in" href="https://www.linkedin.com/in/mahmoudelrawy" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 448 512" aria-hidden="true" focusable="false"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg></a>
      <a class="i-ig" href="https://instagram.com/mahmoudelrawy" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 448 512" aria-hidden="true" focusable="false"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a>
      <button type="button" id="qr-btn" aria-label="Show QR code"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M2 2h8v8H2zM4 4v4h4V4zM14 2h8v8h-8zm2 2v4h4V4zM2 14h8v8H2zm2 2v4h4v-4z"/><path d="M5 5h2v2H5zM17 5h2v2h-2zM5 17h2v2H5zM13 13h3v3h-3zM18 13h4v2h-4zM16 16h2v2h-2zM13 18h3v4h-3zM19 17h3v3h-3zM18 20h1v2h-1zM20 21h2v1h-2z"/></svg></button>
    </nav>
  </div>

  <!-- Intro: schwarze Türen öffnen sich auf weißes Licht (nur erster Besuch, Tippen = überspringen) -->
  <div class="intro" id="intro" aria-hidden="true">
    <div class="intro-light"></div>
    <div class="intro-doors">
      <div class="intro-door left"></div>
      <div class="intro-door right"></div>
    </div>
    <div class="intro-seam"></div>
  </div>
</main>

<!-- QR-Code im Vollbild -->
<div class="qr" id="qr" role="dialog" aria-modal="true" aria-label="QR code" hidden>
  <button type="button" class="qr-close" id="qr-close" aria-label="Close"><svg viewBox="0 0 384 512" aria-hidden="true" focusable="false"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></button>
  <div class="qr-code"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" class="qr-svg" role="img" aria-label="QR: mahran.eu" shape-rendering="crispEdges"><path class="qrline" stroke="#000" d="M0 0.5h7m2 0h1m1 0h2m2 0h1m2 0h7m-25 1h1m5 0h1m1 0h2m2 0h1m1 0h1m1 0h1m1 0h1m5 0h1m-25 1h1m1 0h3m1 0h1m1 0h1m4 0h1m4 0h1m1 0h3m1 0h1m-25 1h1m1 0h3m1 0h1m2 0h1m1 0h2m2 0h2m1 0h1m1 0h3m1 0h1m-25 1h1m1 0h3m1 0h1m3 0h2m1 0h4m1 0h1m1 0h3m1 0h1m-25 1h1m5 0h1m3 0h3m1 0h1m3 0h1m5 0h1m-25 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-14 1h4m1 0h1m-16 1h3m1 0h2m2 0h2m1 0h3m1 0h1m5 0h2m-24 1h1m1 0h1m2 0h1m1 0h5m4 0h1m2 0h1m3 0h1m-23 1h4m1 0h3m3 0h1m1 0h1m2 0h1m1 0h2m-20 1h4m3 0h1m1 0h2m1 0h3m1 0h1m2 0h3m-23 1h1m2 0h2m1 0h2m2 0h2m5 0h2m1 0h1m1 0h3m-23 1h4m1 0h1m1 0h1m3 0h1m1 0h1m1 0h4m3 0h1m-24 1h1m1 0h1m2 0h3m1 0h2m4 0h1m1 0h1m1 0h1m1 0h2m-24 1h1m2 0h1m3 0h1m3 0h1m1 0h2m1 0h1m1 0h3m3 0h1m-23 1h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h11m-17 1h1m3 0h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m-25 1h7m2 0h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h3m-25 1h1m5 0h1m1 0h1m4 0h4m3 0h1m-21 1h1m1 0h3m1 0h1m3 0h1m1 0h1m1 0h1m1 0h6m-22 1h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m2 0h2m1 0h5m-25 1h1m1 0h3m1 0h1m1 0h1m1 0h2m6 0h1m1 0h1m1 0h2m-24 1h1m5 0h1m1 0h1m1 0h1m3 0h1m5 0h1m1 0h1m-23 1h7m3 0h3m6 0h6"/></svg></div>
  <p class="qr-hint">Increase screen brightness</p>
  <p class="qr-url">mahran.eu</p>
</div>

<!-- Icons: Font Awesome Free, CC BY 4.0 (fontawesome.com/license/free) -->
<script>
(function () {
  var d = document.documentElement;

  /* ---------- Intro: überspringen + aufräumen ---------- */
  var intro = document.getElementById('intro');
  function endIntro() {
    if (!intro) return;
    d.classList.add('no-intro');
    intro.remove(); intro = null;
    window.removeEventListener('pointerdown', endIntro);
    window.removeEventListener('keydown', endIntro);
  }
  if (d.classList.contains('no-intro')) endIntro();
  else {
    window.addEventListener('pointerdown', endIntro);
    window.addEventListener('keydown', endIntro);
    setTimeout(endIntro, 1250);
  }

  /* ---------- Video: erst einblenden, wenn es wirklich läuft ---------- */
  var v = document.getElementById('portrait-video');
  v.addEventListener('playing', function () { v.classList.add('is-playing'); });
  function retry() { if (v.src && v.paused) v.play().catch(function () {}); }
  document.addEventListener('touchstart', retry, { once: true, passive: true });
  document.addEventListener('click', retry, { once: true });

  /* ---------- Große Bildschirme: unscharfer Hintergrund ---------- */
  if (!d.classList.contains('rm') && window.matchMedia('(min-width: 481px)').matches) {
    var a = document.getElementById('ambient-video');
    a.src = 'profile.mp4';
    a.play().catch(function () {});
    v.addEventListener('playing', function () { a.currentTime = v.currentTime; a.play().catch(function () {}); });
  }

  /* ---------- QR im Vollbild ---------- */
  var qr = document.getElementById('qr'), qrBtn = document.getElementById('qr-btn');
  function openQr() { qr.hidden = false; document.getElementById('qr-close').focus(); }
  function closeQr() { if (qr.hidden) return; qr.hidden = true; qrBtn.focus(); }
  qrBtn.addEventListener('click', openQr);
  qr.addEventListener('click', closeQr);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeQr(); });
})();
</script>
</body>
</html>
