/* ============================================================
   Portfolio Serri Khalil · „Engineering-Dossier"
   Dunkles Graphitblau, Amber-Akzent, Mono-Labels.
   Keine externen Ressourcen (CSP: default-src 'self').
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-grotesque-var.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/instrument-sans-var.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');}

:root{
  /* Standard: helles Schema („warmes Papier") */
  --bg:        #f5f2e9;
  --bg-raise:  #ede8da;
  --panel:     #fdfcf7;
  --hairline:  #e2dccb;
  --hairline-2:#cdc5ae;
  --ink:       #23252e;
  --ink-dim:   #5a5f6e;
  --ink-faint: #8a8e9d;
  --accent:    #a96a0c;
  --accent-hi: #855205;
  --accent-dim:rgba(169,106,12,.12);
  --ok:        #15803d;

  --font-display:'Bricolage Grotesque', Georgia, serif;
  --font-body:'Instrument Sans', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Cascadia Code', monospace;

  --w-content: 1160px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* feines technisches Raster als Atmosphäre (helle Fassung) */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(169,106,12,.07), transparent 62%),
    linear-gradient(rgba(30,30,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,30,40,.035) 1px, transparent 1px);
  background-size:auto, 56px 56px, 56px 56px;
}

::selection{background:var(--accent);color:#fff}
html[data-theme="dark"] ::selection{color:#181104}

a{color:var(--accent-hi);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:var(--w-content);margin:0 auto;padding:0 28px}

/* ---------- Mono-Labels („Aktenzeichen") ---------- */
.tag{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.tag::before{content:'// ';color:var(--ink-faint)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--hairline);
}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:60px}
.brand{
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--ink);
  letter-spacing:.06em;white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--accent-hi)}
.brand .cursor-block{display:inline-block;width:.55em;height:1.05em;background:var(--accent);
  vertical-align:-.18em;margin-left:2px;animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.topnav{margin-left:auto;display:flex;gap:4px}
.topnav a{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;color:var(--ink-dim);
  padding:7px 12px;border-radius:var(--r-sm);
}
.topnav a:hover{color:var(--ink);background:var(--panel);text-decoration:none}
.topnav a[aria-current="page"]{color:var(--accent)}

/* ---------- Hero (Landingpage) ---------- */
.hero{padding:96px 0 64px;position:relative;overflow:hidden}
.hero-grid{display:flex;gap:56px;align-items:center;justify-content:space-between}
.hero-copy{min-width:0}
.hero-portrait{flex:none;margin:0;text-align:center}
.hero-portrait img{
  width:clamp(150px, 19vw, 230px);height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;border:3px solid var(--accent);
  box-shadow:0 0 0 10px var(--accent-dim), 0 26px 60px -28px rgba(0,0,0,.45);
}
.hero-portrait figcaption{
  margin-top:18px;font-family:var(--font-mono);font-size:.78rem;line-height:1.7;
  color:var(--ink-dim);letter-spacing:.06em;
}
.hero-portrait figcaption strong{color:var(--ink);font-weight:500}
@media (max-width: 860px){
  .hero-grid{flex-direction:column-reverse;align-items:flex-start;gap:34px}
  .hero-portrait{align-self:center}
  .hero-portrait img{width:170px}
}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.6rem, 6.2vw, 4.6rem);line-height:1.02;
  letter-spacing:-.015em;max-width:15ch;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{
  margin-top:26px;max-width:56ch;font-size:1.13rem;color:var(--ink-dim);
}
.hero .sub strong{color:var(--ink);font-weight:600}
.hero-meta{
  margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-family:var(--font-mono);font-size:.75rem;color:var(--ink-faint);letter-spacing:.05em;
}
.hero-meta span::before{content:'▸ ';color:var(--accent)}
.cta-row{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.82rem;font-weight:500;letter-spacing:.05em;
  padding:13px 22px;border-radius:var(--r-sm);border:1px solid var(--hairline-2);
  color:var(--ink);background:var(--panel);cursor:pointer;transition:.18s;
}
.btn:hover{border-color:var(--accent);color:var(--accent-hi);text-decoration:none;transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#181104}
.btn.primary:hover{background:var(--accent-hi);color:#181104}

/* ---------- Abschnitts-Gerüst ---------- */
.section{padding:64px 0}
.section-head{display:flex;align-items:baseline;gap:18px;margin-bottom:34px}
.section-head h2{
  font-family:var(--font-display);font-weight:600;font-size:1.75rem;letter-spacing:-.01em;
}
.section-head .rule{flex:1;height:1px;background:var(--hairline);align-self:center}

/* ---------- Projektkacheln ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.tile{
  position:relative;display:block;color:inherit;
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:26px 26px 54px;overflow:hidden;
  transition:transform .2s, border-color .2s;
}
.tile:hover{transform:translateY(-3px);border-color:var(--hairline-2);text-decoration:none}
.tile::before{ /* Projekt-Farbkante */
  content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--tile-hue,var(--accent));
  opacity:.85;
}
.tile::after{ /* Farb-Glow oben rechts */
  content:'';position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle, var(--tile-hue,var(--accent)) 0%, transparent 68%);
  opacity:.10;transition:opacity .25s;pointer-events:none;
}
.tile:hover::after{opacity:.22}
.tile .tile-shot{
  display:block;width:calc(100% + 52px);height:auto;aspect-ratio:16/10;object-fit:cover;
  margin:-26px -26px 18px;border-bottom:1px solid var(--hairline);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.tile .tag{display:block;margin-bottom:12px}
.tile h3{font-family:var(--font-display);font-weight:600;font-size:1.32rem;margin-bottom:8px}
.tile p{color:var(--ink-dim);font-size:.95rem;min-height:3.1em}
.tile .badges{margin-top:16px}
.tile .go{
  position:absolute;right:22px;bottom:18px;font-family:var(--font-mono);font-size:.78rem;
  color:var(--ink-faint);transition:.18s;
}
.tile:hover .go{color:var(--accent);transform:translateX(3px)}

/* ---------- Tech-Badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:7px}
.badge{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-dim);
  border:1px solid var(--hairline);border-radius:999px;padding:3px 11px;background:var(--bg-raise);
}

/* ---------- „Wie ich arbeite" ---------- */
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:step}
.method .step{
  background:var(--bg-raise);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:22px;counter-increment:step;
}
.method .step::before{
  content:'0' counter(step);display:block;font-family:var(--font-mono);
  font-size:.75rem;color:var(--accent);letter-spacing:.12em;margin-bottom:10px;
}
.method .step h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:6px}
.method .step p{font-size:.9rem;color:var(--ink-dim)}

/* ---------- Hinweis-Banner (fiktive Daten) ---------- */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--accent-dim);border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:var(--r-md);padding:16px 20px;font-size:.92rem;color:var(--ink-dim);
}
.notice::before{content:'ℹ';flex:none;font-family:var(--font-mono);color:var(--accent);
  font-size:1rem;line-height:1.55}
.notice strong{color:var(--ink)}

/* ---------- Kontakt ---------- */
.contact-card{
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:38px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
}
.contact-card h2{font-family:var(--font-display);font-weight:600;font-size:1.6rem;margin-bottom:6px}
.contact-card p{color:var(--ink-dim);max-width:46ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hairline);margin-top:40px}
footer .wrap{
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;
  padding-top:26px;padding-bottom:34px;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);letter-spacing:.04em;
}
footer a{color:var(--ink-dim)}
footer .spacer{flex:1}

/* ============================================================
   Projektseiten
   ============================================================ */
.proj-hero{padding:64px 0 34px}
.proj-hero h1{
  font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);
  letter-spacing:-.015em;line-height:1.06;
}
.proj-hero .lede{margin-top:16px;max-width:62ch;font-size:1.08rem;color:var(--ink-dim)}
.proj-hero .badges{margin-top:22px}

.psl{ /* Problem/Lösung/Betrieb */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:34px 0 8px;
}
.psl article{
  background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-md);padding:24px;
}
.psl h2{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin:10px 0 8px}
.psl p, .psl li{font-size:.93rem;color:var(--ink-dim)}
.psl ul{margin:8px 0 0 18px}
.psl li{margin-top:4px}
.psl li strong, .psl p strong{color:var(--ink)}

/* ---------- Zusatzabschnitte auf Projektseiten ---------- */
.proj-extra{margin-top:56px}
.proj-extra h2{font-family:var(--font-display);font-weight:600;font-size:1.45rem;margin-bottom:18px}
.proj-extra p{max-width:72ch;color:var(--ink-dim);margin-bottom:12px}
.pager{
  display:flex;justify-content:space-between;gap:14px;margin-top:64px;
  font-family:var(--font-mono);font-size:.8rem;
}

/* ============================================================
   Demo-Bühne (gemeinsamer Rahmen aller 5 Demos)
   ============================================================ */
.demo-shell{margin-top:48px}
.demo-titlebar{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;
}
.demo-titlebar .tag::before{content:''}
.demo-badge{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--accent);border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:999px;padding:4px 12px;background:var(--accent-dim);
}
.demo-frame{
  position:relative;border:1px solid var(--hairline-2);border-radius:var(--r-lg);
  overflow:hidden;background:#000;
  box-shadow:0 24px 70px -28px rgba(0,0,0,.85);
}
/* Fenster-Chrome oben · bewusst themenunabhängig dunkel:
   die Demos sind „Produktfenster" und behalten ihren Original-Look */
.demo-chrome{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  background:#10131b;border-bottom:1px solid #232837;
  font-family:var(--font-mono);font-size:.7rem;color:#626a7d;
}
.demo-chrome .dot{width:10px;height:10px;border-radius:50%;background:#2e3448}
.demo-chrome .dot:nth-child(1){background:#e0655a}
.demo-chrome .dot:nth-child(2){background:#e0b25a}
.demo-chrome .dot:nth-child(3){background:#6fbf73}
.demo-chrome .url{
  margin-left:10px;background:#0b0d12;border:1px solid #232837;
  border-radius:5px;padding:2px 12px;letter-spacing:.03em;
}

/* Bühne: 16:10, Inhalt wird von der Stage-CSS gestaltet.
   Interaktion für Besucher komplett tot. */
.demo-stage-holder{position:relative;aspect-ratio:16/10;overflow:hidden}
.demo-stage{
  position:absolute;inset:0;
  pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none;
}
.demo-stage *{pointer-events:none !important}
/* Feste Design-Fläche (1100x688), von der Engine per scale() eingepasst */
.demo-fit{position:absolute;top:0;left:0;transform-origin:top left}

/* Overlay-Ebene der Engine (Cursor, Ripple, Captions, Play) */
.demo-overlay{position:absolute;inset:0;z-index:40;pointer-events:none}

/* Fake-Cursor */
.demo-cursor{
  position:absolute;z-index:50;width:22px;height:30px;left:0;top:0;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transition:transform .2s cubic-bezier(.22,1,.36,1);
  will-change:left,top;opacity:0;
}
.demo-cursor.visible{opacity:1}
.demo-cursor.pressing{transform:scale(.82)}
.demo-ripple{
  position:absolute;z-index:45;width:14px;height:14px;border-radius:50%;
  border:2px solid #fff;opacity:.9;transform:translate(-50%,-50%);
  animation:demo-ripple .5s ease-out forwards;pointer-events:none;
}
@keyframes demo-ripple{to{width:52px;height:52px;opacity:0}}

/* Tipp-Caret der Engine (in Fake-Eingabefeldern) */
.demo-typing-caret{opacity:.9;animation:blink 1s steps(1) infinite}

/* Caption-Leiste */
.demo-caption{
  position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);
  z-index:46;max-width:86%;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.03em;color:#e9e6dd;
  background:rgba(10,12,18,.86);border:1px solid #2e3448;
  backdrop-filter:blur(6px);
  border-radius:8px;padding:8px 16px;opacity:0;transition:.35s;white-space:nowrap;
  text-overflow:ellipsis;overflow:hidden;
}
.demo-caption.visible{opacity:1;transform:translate(-50%,0)}

/* Play-/Replay-Overlay (die EINZIGE interaktive Fläche) */
.demo-play{
  position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;cursor:pointer;border:0;
  background:rgba(7,9,14,.62);backdrop-filter:blur(3px) saturate(.8);
  color:#e9e6dd;font-family:var(--font-mono);
  transition:opacity .3s;
}
.demo-play:hover .demo-play-btn{transform:scale(1.07);background:var(--accent-hi)}
.demo-play[hidden]{display:none}
.demo-play-btn{
  width:84px;height:84px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:.2s;
  box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent),
             0 14px 40px -10px rgba(240,166,60,.55);
}
.demo-play-btn svg{width:30px;height:30px;fill:#181104;margin-left:4px}
.demo-play-btn.replay svg{margin-left:0}
.demo-play-label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.demo-play-sub{font-size:.68rem;color:#9aa0b0;letter-spacing:.05em}

/* Responsiv: Bühne skaliert als Ganzes herunter */
@media (max-width: 720px){
  .hero{padding:64px 0 44px}
  .section{padding:44px 0}
  body{font-size:15.5px}
}

/* Reduced Motion: dekorative Dauer-Animationen aus */
@media (prefers-reduced-motion: reduce){
  .brand .cursor-block{animation:none}
}

/* ============================================================
   Dunkles Farbschema (Umschalter in der Topbar, localStorage).
   Standard ist hell; die Demo-Bühnen und ihr Fenster-Chrome
   bleiben in beiden Schemata im Original-Look.
   ============================================================ */
html[data-theme="dark"]{
  --bg:        #0b0d12;
  --bg-raise:  #10131b;
  --panel:     #141824;
  --hairline:  #232837;
  --hairline-2:#2e3448;
  --ink:       #e9e6dd;
  --ink-dim:   #9aa0b0;
  --ink-faint: #626a7d;
  --accent:    #f0a63c;
  --accent-hi: #ffc46a;
  --accent-dim:rgba(240,166,60,.14);
  --ok:        #4ade80;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(240,166,60,.055), transparent 62%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
}
.btn.primary, .btn.primary:hover{color:#fff}
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.primary:hover{color:#181104}
.demo-frame{box-shadow:0 20px 55px -26px rgba(40,34,18,.45)}
html[data-theme="dark"] .demo-frame{
  box-shadow:0 24px 70px -28px rgba(0,0,0,.85);
}
.demo-play-btn{
  box-shadow:0 0 0 10px rgba(169,106,12,.15), 0 14px 40px -10px rgba(169,106,12,.45);
}
.demo-play-btn svg{fill:#fff}
html[data-theme="dark"] .demo-play-btn{
  box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent),
             0 14px 40px -10px rgba(240,166,60,.55);
}
html[data-theme="dark"] .demo-play-btn svg{fill:#181104}

/* ---------- Theme-Umschalter ---------- */
.theme-toggle{
  margin-left:6px;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--hairline);background:transparent;color:var(--ink-dim);
  font-size:.95rem;line-height:1;transition:.18s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle .tt-sun{display:none}
html[data-theme="dark"] .theme-toggle .tt-sun{display:inline}
html[data-theme="dark"] .theme-toggle .tt-moon{display:none}

/* ---------- Rechtstexte ---------- */
.legal{padding:64px 0;max-width:760px}
.legal h1{font-family:var(--font-display);font-weight:800;font-size:2.2rem;margin-bottom:26px}
.legal h2{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:30px 0 8px}
.legal p, .legal li{color:var(--ink-dim);font-size:.95rem}
.legal ul{margin:8px 0 0 20px}
.legal address{font-style:normal;color:var(--ink);line-height:1.7}