/* ═══════════════════════════════════════════════════════
   ui.css v13 — kSKYER · Snow / Anthracite / Orange
   CHANGES v13:
   - Hamburger menu (mobile)
   - Hero mobile: Globe dezenter (opacity 0.45), touch deaktiviert
   - Contact LED: Canvas pre-init background → kein weißer Flash
   - Responsive cleanup: all sections
   - Focus-states visible
   - Reduce-motion support
   - Touch-targets ≥ 44px
   - overflow-x: hidden auf body
═══════════════════════════════════════════════════════ */

:root {
  --snow:    #e8eaed;
  --snow2:   #e2e4e8;
  --snow3:   #e4e5e8;
  --d0:      #0d0f12;
  --d1:      #131518;
  --d2:      #191b1f;
  --d3:      #1f2126;
  --d4:      #26282d;
  --bs:      rgba(0,0,0,0.09);
  --bd:      rgba(255,255,255,0.07);
  --bd2:     rgba(255,255,255,0.04);
  --ts1:     #111214;
  --ts2:     rgba(17,18,20,0.65);
  --ts3:     rgba(17,18,20,0.42);
  --td1:     rgba(234,233,230,0.92);
  --td2:     rgba(234,233,230,0.62);
  --td3:     rgba(234,233,230,0.36);
  --orange:  #c8620e;
  --o-lo:    rgba(200,98,14,0.13);
  --o-xlo:   rgba(200,98,14,0.06);
  --o-b:     rgba(200,98,14,0.28);
  --s-green: #2a9e6a; --s-gl: rgba(42,158,106,0.12); --s-gb: rgba(42,158,106,0.30);
  --s-blue:  #3a86c8; --s-bl: rgba(58,134,200,0.10); --s-bb: rgba(58,134,200,0.28);
  --s-yel:   #9e8c10; --s-yl: rgba(158,140,16,0.10); --s-yb: rgba(158,140,16,0.28);
  --nav-h:   4.5rem;
  --max:     80rem;
  --max-wide:90rem;
  --t-meta:  0.875rem;
  --t-ui:    0.9375rem;
  --t-base:  1rem;
  --t-body:  1.0625rem;
  --t-lead:  1.25rem;
  --t-h3:    3rem;
  --t-h2:    2.25rem;
  --t-h1:    clamp(3.5rem, 7.5vw, 6rem);
  --sec-y:        6rem;
  --sec-y-tight:  4.5rem;
  --sec-y-mob:    3.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Offset anchor scroll targets by nav height — prevents title overlap on mobile */
section[id], footer[id] { scroll-margin-top: var(--nav-h); }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* must be on html — mobile browsers use html as scroll root */
  background: var(--snow);
}
body {
  font-family: 'Rubik', sans-serif;
  font-size: var(--t-body);
  background: var(--snow);
  color: var(--ts1);
  line-height: 1.65;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cx      { max-width: 90rem; margin: 0 auto; padding: 0 2.5rem; width: 100%; }
.cx-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 2.5rem; width: 100%; }
a { text-decoration: none; color: inherit; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  width: 100vw;
  height: var(--nav-h);
  background: rgba(232,234,237,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bs);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.nav.dark { background: rgba(19,21,24,0.97); border-bottom-color: var(--bd); box-shadow: 0 1px 28px rgba(0,0,0,0.5); }
.nav .cx  { height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }

.nav-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.nav-k     { width: 2rem; height: 2rem; object-fit: contain; transition: filter 0.4s; filter: brightness(0) saturate(0) invert(0.22); }
.nav.dark .nav-k { filter: brightness(0) invert(1) opacity(0.65); }
.nav-brand-name { font-size: var(--t-ui); font-weight: 500; color: var(--ts1); letter-spacing: 0.01em; line-height: 1.2; transition: color 0.4s; }
.nav-brand-sub  { font-size: var(--t-meta); color: var(--ts3); letter-spacing: 0.04em; transition: color 0.4s; }
.nav.dark .nav-brand-name { color: var(--td1); }
.nav.dark .nav-brand-sub  { color: var(--td3); }

.nav-links { display: flex; gap: 0.125rem; }
.nav-link  { font-size: var(--t-ui); color: var(--ts3); letter-spacing: 0.01em; padding: 0.5rem 0.875rem; border-radius: 0.375rem; transition: color 0.2s, background 0.2s; min-height: 44px; display: inline-flex; align-items: center; }
.nav-link:hover { color: var(--ts1); }
.nav.dark .nav-link { color: var(--td3); }
.nav.dark .nav-link:hover { color: var(--td1); background: rgba(255,255,255,0.05); }

.nav-cta { font-size: var(--t-meta); letter-spacing: 0.06em; padding: 0.5rem 1rem; border: 1px solid rgba(0,0,0,0.18); color: var(--ts3); display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; transition: all 0.2s; border-radius: 0.25rem; min-height: 44px; }
.nav-cta:hover { border-color: var(--orange); color: var(--orange); }
.nav.dark .nav-cta { border-color: var(--bd); color: var(--td3); }
.nav.dark .nav-cta:hover { border-color: var(--o-b); color: var(--orange); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px;
  background: transparent; border: none; cursor: pointer;
  padding: 0; border-radius: 0.375rem; transition: background 0.2s; flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(0,0,0,0.06); }
.nav.dark .nav-hamburger:hover { background: rgba(255,255,255,0.06); }
.nav-hamburger-line {
  display: block; width: 22px; height: 1.5px;
  background: var(--ts2); border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav.dark .nav-hamburger-line { background: var(--td2); }
.nav-hamburger.is-open .nav-hamburger-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open .nav-hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .nav-hamburger-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── NAV DRAWER (mobile menu) ──
   IMPORTANT: drawer is position:fixed in the DOM but must render
   outside the nav's height clip. We move it to body level via JS,
   but also ensure .nav has overflow:visible so it doesn't clip.
*/
.nav { overflow: visible; }  /* allow drawer to paint outside nav height */

.nav-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999;
  width: 100vw;
  background: rgba(234,236,239,0.98);
  border-bottom: 1px solid var(--bs);
  padding: 0.375rem 0 1rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}
.nav.dark .nav-drawer { background: rgba(19,21,24,0.98); border-bottom-color: var(--bd); }
/* Drawer is outside <nav> — also support body.dark-nav state set by JS */
body.nav-is-dark .nav-drawer { background: rgba(19,21,24,0.98); border-bottom-color: var(--bd); }
body.nav-is-dark .nav-drawer-link { color: var(--td2); }
body.nav-is-dark .nav-drawer-link:hover { color: var(--td1); background: rgba(255,255,255,0.04); }
body.nav-is-dark .nav-drawer-sep { background: var(--bd); }
body.nav-is-dark .nav-drawer-cta { border-color: var(--bd); color: var(--td3); }
body.nav-is-dark .nav-drawer-cta:hover { border-color: var(--o-b); color: var(--orange); }
.nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
  pointer-events: all;
}

.nav-drawer-link {
  display: flex; align-items: center; min-height: 50px;
  font-size: 1rem; color: var(--ts2); padding: 0 1.5rem;
  transition: color 0.15s, background 0.15s; letter-spacing: 0.01em;
}
.nav-drawer-link:hover { color: var(--ts1); background: rgba(0,0,0,0.03); }
.nav.dark .nav-drawer-link { color: var(--td2); }
.nav.dark .nav-drawer-link:hover { color: var(--td1); background: rgba(255,255,255,0.04); }
.nav-drawer-sep { height: 1px; background: var(--bs); margin: 0.375rem 1.5rem; }
.nav.dark .nav-drawer-sep { background: var(--bd); }
.nav-drawer-cta {
  display: flex; align-items: center; gap: 0.5rem; min-height: 48px;
  margin: 0.625rem 1.5rem 0; padding: 0.75rem 1.25rem;
  border: 1px solid rgba(0,0,0,0.18); color: var(--ts3);
  border-radius: 0.25rem; font-size: var(--t-base); transition: all 0.2s;
}
.nav-drawer-cta:hover { border-color: var(--orange); color: var(--orange); }
.nav.dark .nav-drawer-cta { border-color: var(--bd); color: var(--td3); }
.nav.dark .nav-drawer-cta:hover { border-color: var(--o-b); color: var(--orange); }

/* ── HERO ── */
.hero {
  background: var(--snow); padding-top: var(--nav-h);
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 1; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
#hero-globe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; will-change: contents; }
#hero-drag  { position: absolute; top: 0; right: 0; bottom: 0; left: 42%; z-index: 2; cursor: grab; }
.hero-body  {
  position: relative; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; flex: 1;
  justify-content: flex-start; padding-bottom: 4.5rem;
}
.hero-name-row { margin-top: auto; padding-bottom: 2rem; border-bottom: 1px solid var(--bs); max-width: 46%; }
.hero-base { padding: 1.25rem 0 0; margin-top: auto; position: relative; z-index: 5; pointer-events: all; }
.hero-body a, .hero-body button { pointer-events: all; }
.hero-rule { pointer-events: all; user-select: text; -webkit-user-select: text; }
.hero-rule-txt { pointer-events: all; user-select: text; -webkit-user-select: text; }

.hero-name { font-size: var(--t-h1); font-weight: 200; color: var(--ts1); line-height: 0.92; letter-spacing: -0.04em; margin-bottom: 1.5rem; }
.hero-sub  { font-size: var(--t-lead); font-weight: 300; color: var(--ts2); max-width: 44ch; line-height: 1.55; }
.hero-base-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2.5rem; flex-shrink: 0; }
.hero-stat-n { font-size: 2rem; font-weight: 200; color: var(--ts1); line-height: 1; }
.hero-stat-l { font-size: var(--t-meta); letter-spacing: 0.12em; color: var(--ts3); text-transform: uppercase; margin-top: 0.25rem; }
.hero-rule      { display: flex; align-items: center; gap: 0.875rem; }
.hero-rule-line { flex: 1; height: 2px; background: var(--orange); opacity: 0.68; }
.hero-rule-txt  { font-size: var(--t-meta); letter-spacing: 0.11em; color: var(--ts3); text-transform: uppercase; white-space: nowrap; }
.hero-rule-sep  { width: 1px; height: 0.75rem; background: var(--bs); flex-shrink: 0; }

/* ── SECTION SYSTEM ── */
.sec-snow  { padding: var(--sec-y) 0; background: var(--snow); }
.sec-snow2 { padding: var(--sec-y) 0; background: var(--snow2); }
.sec-dark  { padding: var(--sec-y) 0; background: var(--d2); }
.sec-dark0 { padding: var(--sec-y) 0; background: var(--d0); }
.sec-now   { padding: var(--sec-y-tight) 0; background: var(--snow2); }
.sec-focus { padding: var(--sec-y-tight) 0; background: var(--d2); }

.sec-head { margin-bottom: 3rem; }
.sec-head .cx { display: flex; align-items: baseline; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bs); }
.sec-head-dk .cx { border-bottom-color: var(--bd); }
.sec-idx   { font-size: 1.125rem; letter-spacing: 0.12em; color: var(--orange); font-weight: 600; }
.sec-title { font-size: var(--t-h3); font-weight: 200; color: var(--ts1); letter-spacing: -0.03em; line-height: 1; }
.sec-title-dk { color: var(--td1); }

/* REVEAL: Only fade the inner content, never the section background.
   Sections themselves are always visible — only .reveal children animate.
   This prevents white/blank section blocks when fast-scrolling. */
/* Mobile collapse: always visible on desktop, toggle-controlled on mobile */
.mob-collapse { display: block; }  /* desktop default: always shown */
.mob-toggle   { display: none; }   /* desktop default: button hidden */
.reveal.revealed { opacity: 1; transform: none; }

/* Sections are NEVER hidden — background always visible */
section.reveal, footer.reveal { opacity: 1 !important; transform: none !important; }

/* ── OVERVIEW ── */
.ov-layout { display: grid; grid-template-columns: 1fr 22rem; gap: 4rem; align-items: start; }
.ov-lead   { font-size: 1.375rem; font-weight: 300; color: var(--ts1); line-height: 1.55; letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.ov-body   { font-size: var(--t-body); color: var(--ts2); line-height: 1.72; }
.ov-body + .ov-body { margin-top: 1rem; }
.ov-quote  { margin-top: 1.75rem; padding: 0.875rem 1.25rem; border-left: 2px solid var(--orange); font-size: var(--t-base); color: var(--ts2); font-style: italic; line-height: 1.6; }
.ov-stats  { display: flex; flex-direction: column; border: 1px solid var(--bs); }
.ov-stat   { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--bs); }
.ov-stat:last-child { border-bottom: none; }
.ov-stat-n { font-size: 2rem; font-weight: 200; color: var(--ts1); line-height: 1; }
.ov-stat-l { font-size: var(--t-meta); letter-spacing: 0.12em; color: var(--ts3); text-transform: uppercase; margin-top: 0.25rem; }

/* ── NOW ── */
.now-grid { display: grid; grid-template-columns: 12rem 1fr; border: 1px solid var(--bs); }
.now-label-col { padding: 1.5rem 1.25rem; border-right: 1px solid var(--bs); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.now-label { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.14em; color: var(--orange); text-transform: uppercase; }
.now-date  { font-size: var(--t-meta); color: var(--ts3); }
.now-items { display: flex; flex-direction: column; }
.now-item  { padding: 1.125rem 1.5rem; border-bottom: 1px solid var(--bs); display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: baseline; }
.now-item:last-child { border-bottom: none; }
.now-item-tag { font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts3); font-weight: 500; }
.now-item-txt { font-size: var(--t-body); color: var(--ts2); line-height: 1.55; }

/* ── SKILLS ── */
.skill-primary   { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bd2); }
.skill-secondary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bd2); margin-top: 1px; }
.skill-card-lg   { background: var(--d3); padding: 2rem 2rem 2.5rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.skill-card-lg:hover { background: var(--d4); border-left-color: var(--orange); }
.skill-card-md   { background: var(--d2); padding: 1.5rem 1.5rem 1.75rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.skill-card-md:hover { background: var(--d3); border-left-color: var(--orange); }
.skill-top  { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.s-dot      { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--orange); opacity: 0.75; flex-shrink: 0; }
.skill-title-lg { font-size: 1.125rem; font-weight: 500; color: var(--td1); letter-spacing: -0.01em; }
.skill-title-md { font-size: var(--t-base); font-weight: 500; color: var(--td2); }
.skill-desc-lg  { font-size: var(--t-base); color: var(--td2); line-height: 1.65; margin-bottom: 0.875rem; }
.skill-desc-md  { font-size: var(--t-ui); color: var(--td3); line-height: 1.6; margin-bottom: 0.75rem; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.skill-tag  { font-size: var(--t-meta); letter-spacing: 0.04em; padding: 0.2rem 0.6rem; border: 1px solid var(--o-b); color: rgba(200,98,14,0.78); border-radius: 0.2rem; }
.skill-tertiary { margin-top: 1px; background: var(--d1); }
.skill-cluster-row { padding: 1rem 2rem; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--bd2); flex-wrap: wrap; }
.skill-cluster-row:last-child { border-bottom: none; }
.skill-cluster-label { font-size: var(--t-meta); font-weight: 500; color: var(--td3); letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; width: 13rem; }
.skill-cluster-tags  { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.skill-cluster-tag   { font-size: var(--t-meta); padding: 0.2rem 0.625rem; border: 1px solid var(--bd); color: var(--td3); letter-spacing: 0.03em; border-radius: 0.2rem; }
.skill-extra { overflow: hidden; transition: max-height 0.42s ease; }

/* ── EXPERIENCE ── */
.exp-timeline { display: flex; flex-direction: column; }
.exp-entry    { display: grid; grid-template-columns: 15rem 1fr; gap: 3.25rem; padding: 2.25rem 0; border-bottom: 1px solid var(--bs); position: relative; }
.exp-entry:last-child { border-bottom: none; }
.exp-entry::before { content: ''; position: absolute; left: 14rem; top: 0; bottom: 0; width: 1px; background: var(--bs); }
.exp-period    { font-size: var(--t-meta); letter-spacing: 0.09em; color: var(--orange); text-transform: uppercase; margin-bottom: 0.25rem; font-weight: 500; }
.exp-period-dim{ color: var(--ts3); }
.exp-org       { font-size: var(--t-ui); color: var(--ts3); margin-bottom: 0.15rem; line-height: 1.3; }
.exp-level     { font-size: var(--t-meta); color: var(--ts3); letter-spacing: 0.08em; opacity: 0.75; }
.exp-role      { font-size: 1.25rem; font-weight: 400; color: var(--ts1); margin-bottom: 0.625rem; letter-spacing: -0.01em; }
.exp-desc      { font-size: var(--t-body); color: var(--ts2); line-height: 1.7; margin-bottom: 0.875rem; }
.exp-tags      { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.exp-tag       { font-size: var(--t-meta); padding: 0.2rem 0.625rem; border: 1px solid var(--bs); color: var(--ts3); letter-spacing: 0.04em; border-radius: 0.2rem; }

.exp-entry-next .exp-period { font-weight: 600; }
.exp-badge {
  font-size: .62em; letter-spacing: .08em; text-transform: uppercase;
  padding: .15em .5em; margin-left: .6em; vertical-align: middle;
  border: 1px solid currentColor; border-radius: 999px; opacity: .75;
}
.exp-tag-soon {  border-style: dashed; }

/* ── PROJECTS ── */
.proj-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bd2); }
.proj-card-lg  { background: var(--d3); padding: 2rem 2rem 2.5rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.proj-card-lg:hover { background: var(--d4); border-left-color: var(--orange); }
.proj-top      { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; gap: 0.5rem; }
.proj-title    { font-size: 1.125rem; font-weight: 500; color: var(--td1); line-height: 1.3; }
.proj-date     { font-size: var(--t-meta); color: var(--td3); letter-spacing: 0.07em; margin-bottom: 0.625rem; }
.proj-desc-lg  { font-size: var(--t-base); color: var(--td2); line-height: 1.62; margin-bottom: 0.75rem; }
.proj-tags     { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.proj-tag      { font-size: var(--t-meta); padding: 0.2rem 0.625rem; border: 1px solid var(--bd); color: var(--td3); border-radius: 0.2rem; }
.proj-compact  { margin-top: 1px; display: flex; flex-direction: column; gap: 1px; background: var(--bd2); }

/* ── 3×3 PROJECT GRID ── */
.proj-grid3    { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--bd2); margin-top: 1px; }
.proj-card-md  { background: var(--d2); padding: 1.5rem 1.5rem 1.75rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.proj-card-md:hover { background: var(--d3); border-left-color: var(--orange); }
.proj-title-md { font-size: var(--t-base); font-weight: 500; color: var(--td1); line-height: 1.3; }
.proj-desc-md  { font-size: var(--t-ui); color: var(--td3); line-height: 1.6; margin-bottom: 0.625rem; }
.proj-row      { background: var(--d2); padding: 1.125rem 2rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.proj-row:hover{ background: var(--d3); border-left-color: var(--orange); }
.proj-row--note { display: flex; justify-content: flex-end; align-items: center; gap: 0.875rem; flex-wrap: wrap; border-left-color: transparent !important; }
.proj-row--note .proj-row-date { white-space: normal; text-align: right; opacity: 0.7; }
.proj-row-title{ font-size: var(--t-base); font-weight: 500; color: var(--td1); margin-bottom: 0.15rem; }
.proj-row-desc { font-size: var(--t-ui); color: var(--td3); }
.proj-row-right{ display: flex; align-items: center; gap: 0.875rem; flex-shrink: 0; }
.proj-row-date { font-size: var(--t-meta); color: var(--td3); letter-spacing: 0.05em; white-space: nowrap; }

.badge         { font-size: var(--t-meta); letter-spacing: 0.07em; padding: 0.2rem 0.625rem; white-space: nowrap; flex-shrink: 0; border-radius: 0.2rem; }
.badge-green   { background: var(--s-gl); border: 1px solid var(--s-gb); color: var(--s-green); }
.badge-blue    { background: var(--s-bl); border: 1px solid var(--s-bb); color: var(--s-blue); }
.badge-yellow  { background: var(--s-yl); border: 1px solid var(--s-yb); color: var(--s-yel); }
.badge-orange  { background: var(--o-xlo); border: 1px solid var(--o-b); color: var(--orange); }
.badge-subtle  { background: transparent; border: 1px solid var(--bd); color: var(--td3); }

/* ── STRENGTHS ── */
.strength-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--bs); }
.strength-item { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid var(--bs); align-items: start; }
.strength-item:nth-child(odd)  { padding-right: 3rem; border-right: 1px solid var(--bs); }
.strength-item:nth-child(even) { padding-left: 3rem; }
.strength-num  { font-size: var(--t-meta); letter-spacing: 0.14em; color: var(--orange); font-weight: 600; padding-top: 0.25rem; }
.strength-title{ font-size: 1.25rem; font-weight: 400; color: var(--ts1); margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.strength-desc { font-size: var(--t-body); color: var(--ts2); line-height: 1.68; }

/* ── FOCUS ── */
.focus-row   { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.focus-group { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; background: var(--d3); border: 1px solid var(--bd); min-width: 12rem; flex: 1; }
.focus-group-label { font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.12em; color: var(--orange); text-transform: uppercase; margin-bottom: 0.3rem; }
.focus-item    { font-size: var(--t-base); color: var(--td2); line-height: 1.5; }
.focus-item-sub{ font-size: var(--t-meta); color: var(--td3); }

/* ── CONTACT ──
   FIX: canvas background pre-set to var(--d0) → prevents white flash
   when scrolling fast before LED JS paints first frame.
*/
.contact { background: var(--d0); border-top: 1px solid rgba(200,98,14,0.12); padding: var(--sec-y) 0; position: relative; overflow: hidden; }
#contact-led {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: 0.65;
  background: var(--d0); /* prevents white canvas flash */
}
.contact .cx { display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.contact-li-layout { max-width: 52rem; margin-inline: auto; align-items: center; }
.contact-lead { font-size: var(--t-h2); font-weight: 200; color: var(--td1); letter-spacing: -0.03em; margin-bottom: 0.5rem; line-height: 1.1; }
.contact-sub  { font-size: var(--t-ui); color: var(--td3); letter-spacing: 0.04em; max-width: 34ch; }
.contact-li-action { display: flex; align-items: center; flex-shrink: 0; }
.contact-btn-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 1.75rem 2.25rem;
  border: 1px solid var(--o-b); border-radius: 0.375rem;
  background: transparent; color: rgba(200,98,14,0.9);
  transition: background 0.15s, border-color 0.15s;
  min-width: 9rem;
}
.contact-btn-card:hover { background: var(--o-lo); border-color: rgba(200,98,14,0.55); }
.li-logo-lg { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.contact-btn-card-label { font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase; }
.qr-img       { width: 9rem; height: 9rem; object-fit: contain; background: white; padding: 0.5rem; }
.qr-label     { font-size: var(--t-meta); letter-spacing: 0.14em; color: rgba(200,98,14,0.55); text-transform: uppercase; }
.contact-actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.contact-btn  { font-size: var(--t-meta); letter-spacing: 0.08em; padding: 0.625rem 1.25rem; border: 1px solid var(--o-b); color: rgba(200,98,14,0.9); display: flex; align-items: center; gap: 0.4rem; background: transparent; transition: all 0.15s; border-radius: 0.25rem; min-height: 44px; }
.contact-btn:hover { background: var(--o-lo); }
.contact-btn-ghost { font-size: var(--t-meta); letter-spacing: 0.06em; padding: 0.55rem 1rem; border: 1px solid var(--bd); color: var(--td3); background: transparent; transition: all 0.15s; border-radius: 0.25rem; display: flex; align-items: center; min-height: 44px; }
.contact-btn-ghost:hover { border-color: var(--o-b); color: var(--td2); }

/* ── FOOTER ── */
.site-footer  { background: var(--d1); border-top: 1px solid var(--bd); }
.footer-inner { max-width: 90rem; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 1.5rem 2.5rem 1.375rem; border-bottom: 1px solid var(--bd); }
.footer-brand { display: flex; align-items: center; gap: 0.875rem; flex-shrink: 0; }
.footer-logo  { width: 2.125rem; height: 2.125rem; flex-shrink: 0; }
.footer-logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) opacity(0.48); }
.footer-brand-name { font-size: var(--t-ui); font-weight: 500; color: var(--td2); letter-spacing: 0.02em; line-height: 1.2; }
.footer-brand-sub  { font-size: var(--t-meta); color: var(--td3); letter-spacing: 0.04em; }
.footer-nav  { display: flex; flex-wrap: wrap; gap: 0.125rem; flex: 1; }
.footer-nav-link { font-size: var(--t-meta); color: var(--td3); letter-spacing: 0.04em; padding: 0.25rem 0.5625rem; border-radius: 0.25rem; transition: color 0.15s; min-height: 36px; display: inline-flex; align-items: center; }
.footer-nav-link:hover { color: var(--td1); }
.footer-langs { display: flex; gap: 1.5rem; flex-shrink: 0; align-items: center; }
.lang-badge   { display: flex; align-items: center; gap: 0.625rem; }
.lang-flag-img { width: 2.75rem; height: 1.875rem; border-radius: 0.25rem; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(255,255,255,0.08); filter: brightness(0.82) contrast(1.05); }
.lang-info    { display: flex; flex-direction: column; }
.lang-name    { font-size: var(--t-meta); color: var(--td2); line-height: 1.2; }
.lang-level   { font-size: var(--t-meta); color: rgba(200,98,14,0.6); letter-spacing: 0.1em; text-transform: uppercase; }
.footer-bottom { max-width: 90rem; margin: 0 auto; padding: 0.875rem 2.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.footer-motto { font-size: var(--t-meta); color: var(--td3); opacity: 0.55; letter-spacing: 0.06em; text-align: center; flex: 1; }
.footer-top { font-size: var(--t-meta); color: var(--td3); letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.2rem; transition: color 0.2s; min-height: 44px; }
.footer-top:hover { color: var(--orange); }
.footer-top .material-icons { font-size: 1rem !important; }
.footer-eu    { display: flex; align-items: center; gap: 0.75rem; }
.footer-eu-txt{ text-align: right; }
.footer-eu-label { font-size: var(--t-meta); letter-spacing: 0.12em; color: var(--td3); }
.footer-eu-sub   { font-size: var(--t-meta); color: var(--td3); opacity: 0.6; }
.eu-stars-icon   { width: 2.125rem; height: 2.125rem; flex-shrink: 0; }
.eu-svg { width: 100%; height: 100%; display: block; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */

@media (max-width: 64rem) {
  .ov-layout       { grid-template-columns: 1fr; gap: 2.5rem; }
  .now-grid        { grid-template-columns: 1fr; }
  .now-label-col   { border-right: none; border-bottom: 1px solid var(--bs); flex-direction: row; }
  .skill-primary   { grid-template-columns: 1fr; }
  .skill-secondary { grid-template-columns: 1fr 1fr; }
  .exp-entry       { grid-template-columns: 1fr; gap: 0.75rem; }
  .exp-entry::before { display: none; }
  .proj-featured   { grid-template-columns: 1fr; }
  .proj-grid3      { grid-template-columns: repeat(2,1fr); }
  .footer-langs    { gap: 1rem; }
  .strength-list   { grid-template-columns: 1fr; }
  .strength-item:nth-child(odd)  { padding-right: 0; border-right: none; }
  .strength-item:nth-child(even) { padding-left: 0; }
}

@media (max-width: 48rem) {
  /* ── Kill the right-edge scrollbar line on mobile ── */
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

  /* ── Overflow-Containment auf Section-Ebene ── */
  .hero, .sec-snow, .sec-snow2, .sec-dark, .sec-dark0,
  .sec-now, .sec-focus, .contact, .site-footer {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ── nowrap-Elemente die auf Mobile umbrechen dürfen ── */
  .proj-row-date { white-space: normal; }
  .badge         { white-space: normal; }

  .cx, .cx-wide, .footer-inner, .footer-bottom { padding-inline: 1.25rem; }
  .sec-snow, .sec-snow2, .sec-dark, .sec-dark0, .contact { padding: var(--sec-y-mob) 0; }
  .sec-now, .sec-focus { padding: var(--sec-y-mob) 0; }

  /* Nav → hamburger */
  .nav-links  { display: none; }
  .nav-cta    { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero mobile */
  .hero { min-height: 100svh; }
  #hero-drag  { display: none; }       /* kein touch-drag auf mobile */

  /* Globe: rechte Hälfte, reduziert — kein Overlap mit Text */
  #hero-globe {
    opacity: 0.28;
    /* Globe JS zentriert bei CX=W*0.68 — Kugel sitzt also rechts.
       Wir clippen die linke Hälfte per Maske damit der Text freibleibt. */
    -webkit-mask-image: linear-gradient(to right, transparent 35%, black 62%);
    mask-image: linear-gradient(to right, transparent 35%, black 62%);
  }

  /* Name: klarer linker Block, kein Hintergund nötig wenn Globe geclipt */
  .hero-name-row {
    margin-top: 22vh;
    max-width: 78%;
    position: relative;
    z-index: 5;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--bs);
  }
  .hero-name { font-size: clamp(2.75rem, 12vw, 4.5rem); }
  .hero-sub  { font-size: var(--t-base); max-width: 100%; }
  .hero-stats { gap: 1.5rem; }
  .hero-stat-n { font-size: 1.625rem; }
  .hero-rule  { flex-wrap: wrap; gap: 0.5rem; }
  .hero-rule-sep { display: none; }
  .hero-rule-txt { white-space: normal; font-size: 0.75rem; }

  /* Skills */
  .skill-secondary { grid-template-columns: 1fr; }
  .skill-cluster-row { padding: 0.875rem 1.25rem; }
  .skill-cluster-label { width: auto; min-width: 7rem; }

  /* Projects */
  .proj-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .proj-row-right { flex-wrap: wrap; }
  .proj-grid3 { grid-template-columns: 1fr; }

  /* Focus */
  .focus-row { flex-direction: column; }
  .focus-group { min-width: unset; }

  /* Now */
  .now-item { grid-template-columns: 1fr; gap: 0.2rem; }

  /* Contact */
  .contact .cx { flex-direction: column; align-items: center; }
  .contact-left { width: 100%; }
  .contact-li-action { width: 100%; justify-content: center; }
  .contact-btn-card { width: 100%; max-width: 18rem; }
  .footer-bottom { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .footer-top { order: 0; }
  .footer-motto { order: 1; text-align: center; flex: unset; width: 100%; }
  .footer-eu { order: 2; align-self: flex-end; }

  /* Footer */
  .footer-langs { flex-wrap: wrap; gap: 1rem; }
  .footer-nav   { gap: 0; }

  /* ── Mobile collapse toggles ──
     On mobile: skill tiers 2+3 and compact projects are hidden by default.
     Toggle button reveals them. On desktop: always visible (mob-collapse ignored).
  */
  .mob-collapse {
    display: none;
    overflow: hidden;
  }
  .mob-collapse.is-open { display: block; }

  .mob-toggle {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-height: 48px;
    background: var(--d2); border: none; border-top: 1px solid var(--bd);
    color: rgba(200,98,14,0.75); font-size: var(--t-base); font-family: inherit;
    letter-spacing: 0.08em; cursor: pointer; text-transform: uppercase;
    transition: background 0.15s, color 0.15s;
  }
  .mob-toggle:hover, .mob-toggle:active { background: var(--d3); color: var(--orange); }
  .mob-toggle-dark { background: var(--d0); border-top: 1px solid rgba(200,98,14,0.15); }
  .mob-toggle-dark:hover { background: var(--d1); }
  .mob-toggle-icon { transition: transform 0.25s ease; flex-shrink: 0; }
  .mob-toggle[aria-expanded="true"] .mob-toggle-icon { transform: rotate(180deg); }
}