/*!
 * © 2026 Ivan Krznaric-Bertic
 * https://ivankrz.github.io
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Hex fallbacks for browsers without oklch() support (Safari <15.4, Firefox <113) */
  --bg:          #0e141c;
  --bg2:         #131b25;
  --bg3:         #1a232f;
  --border:      #232d3a;
  --border-hi:   #36404e;
  --muted:       #7d8691;
  --text:        #f1f3f6;
  --text-dim:    #b8bdc6;
  --text-muted:  #8b919c;
  --accent:      #ff8a3d;
  --accent-dim:  rgba(255, 138, 61, 0.14);
  --accent-glow: rgba(255, 138, 61, 0.22);
  --green:       #2fcf6f;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Space Grotesk', sans-serif;
  /* Höhe, auf der Abschnitts-Überschriften landen = Höhe des „Portfolio"-Schriftzugs
     in der Sidebar. Muss zugleich die Oberkante von .content sein, sonst kann man beim
     ersten Abschnitt aus der Flucht scrollen. Eine Quelle für beide Werte. */
  --anchor-top: 4.9rem;
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --bg:          oklch(0.12 0.015 240);
    --bg2:         oklch(0.15 0.015 240);
    --bg3:         oklch(0.19 0.018 240);
    --border:      oklch(0.24 0.015 240);
    --border-hi:   oklch(0.32 0.015 240);
    --muted:       oklch(0.58 0.012 240);
    --text:        oklch(0.96 0.008 240);
    --text-dim:    oklch(0.75 0.01 240);
    --text-muted:  oklch(0.62 0.01 240);
    --accent:      oklch(0.72 0.17 55);
    --accent-dim:  oklch(0.72 0.17 55 / 0.14);
    --accent-glow: oklch(0.72 0.17 55 / 0.22);
    --green:       oklch(0.72 0.17 145);
  }
}

/* Screenreader-only — visually hidden but discoverable by assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link — versteckt, bis er per Tastatur fokussiert wird */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 20;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }
#main:focus { outline: none; }

/* Root-Schriftgröße wächst erst oberhalb von 1920px Viewport-Breite mit:
   16px bis 1080p (unverändert), ~17.7px auf 1440p, gedeckelt bei 21px auf 4K.
   Der Rest des Stylesheets rechnet in rem und skaliert dadurch proportional mit.
   rem statt px in der clamp(), damit die Browser-Schriftgrößen-Einstellung greift. */
html { scroll-behavior: smooth; font-size: clamp(1rem, 0.6875rem + 0.26vw, 1.3125rem); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Fixed background layers — amber glow + dot grid stay put while content scrolls */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 55% at 20% -5%, rgba(255, 138, 61, 0.18) 0%, transparent 60%),
    radial-gradient(rgba(220, 225, 232, 0.14) 1px, transparent 1px);
  background-size: 100% 100%, 30px 30px;
}
@supports (color: oklch(0% 0 0)) {
  body::before {
    background-image:
      radial-gradient(ellipse 90% 55% at 20% -5%, oklch(0.72 0.17 55 / 0.18) 0%, transparent 60%),
      radial-gradient(oklch(0.88 0.01 240 / 0.14) 1px, transparent 1px);
  }
}

::selection { background: var(--accent); color: var(--bg); }
a { color: var(--accent); text-decoration: none; }

/* ── Shell: sticky sidebar + scrolling content ── */
.shell {
  position: relative;
  z-index: 1;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 3.5rem;
}

/* ── Sidebar ── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* height (nicht min-height) ist Pflicht: ein sticky-Element, das höher als der
     Viewport wird, hat nichts zum Kleben. overflow fängt den Extremfall ab. */
  overflow-y: auto;
  padding: 3.5rem 0;
}
.brand { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.75rem; margin-bottom: 2.1rem; }
.brand img { width: 2.125rem; height: 2.125rem; border-radius: 7px; }
.brand-mono { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.side-name { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0.5rem; color: var(--text); }
.side-role { font-family: var(--mono); font-size: 0.82rem; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.side-meta { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 1.3rem; }
.side-hook { color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; min-height: 3.4em; margin-bottom: 1.7rem; }
.side-hook .word { color: var(--accent); font-weight: 600; }
.cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 1px; vertical-align: text-bottom; animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Scroll-spy nav */
.side-nav { display: flex; flex-direction: column; gap: 0.15rem; margin-top: clamp(0.75rem, 3vh, 2rem); }
/* auto schiebt die Box ans untere Ende, margin-bottom hebt sie wieder etwas an */
.announcement { margin-top: auto; margin-bottom: 2rem; }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0;
  transition: color 0.25s;
}
.side-nav .bar {
  width: 1.625rem;
  height: 1px;
  border-radius: 1px;
  background: var(--border-hi);
  transition: width 0.3s, height 0.3s, background 0.3s, box-shadow 0.3s;
}
.side-nav a:hover { color: var(--text-dim); }
.side-nav a:hover .bar { background: var(--muted); }
/* Aktiver Abschnitt: Amber + 500er Schnitt + kräftigerer, leuchtender Balken.
   IBM Plex Mono ist monospace — der Gewichtswechsel verschiebt nichts im Layout. */
.side-nav a.active { color: var(--accent); font-weight: 500; }
.side-nav a.active .bar {
  width: 3.25rem;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.side-links { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 2rem; }
.side-links a, .side-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.15s;
}
.side-links a:hover, .side-links button:hover {
  color: var(--accent);
  border-color: oklch(0.72 0.17 55 / 0.4);
  background: var(--accent-dim);
  transform: translateY(-1px);
}

/* Tooltip für E-Mail-Button */
#mail {
  position: relative;
}
#mail::after {
  content: 'Ivan_KB@web.de';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.6rem;
  background: var(--bg3);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
#mail::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 0.3rem);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bg3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}
#mail:hover::after,
#mail:hover::before {
  opacity: 1;
}

/* ── Content ── */
.content { padding: var(--anchor-top) 0 clamp(6rem, 28vh, 18rem); max-width: 41.25rem; }
.block { padding-bottom: 5.5rem; scroll-margin-top: var(--anchor-top); }
#about { padding-bottom: 9rem; }
#work { padding-bottom: 9rem; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before { content: '//'; color: var(--accent); }

.prose p { color: var(--text-dim); line-height: 1.85; font-size: 1.02rem; }
.prose p + p { margin-top: 1.25em; }
.prose strong { color: var(--text); font-weight: 600; }

/* Stat bento row */
/* Kennzahlen-Streifen statt Karten: die Werte sind nicht anklickbar und sollen
   auch nicht so aussehen. Zusammengehalten werden sie von Trennlinien statt von
   Rahmen — Wert und Label mittig in ihrer Zelle. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 2.4rem; }
.stat { padding: 0.15rem 1.15rem; border-left: 1px solid var(--border); text-align: center; }
.stat:first-child { border-left: 0; }
.stat-num { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat-num .u { color: var(--accent); font-size: 1.15rem; }
.stat-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.6rem; line-height: 1.3; }

/* Work: featured case study */
.featured {
  display: block;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.9rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
  margin-bottom: 0.75rem;
}
.featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 55%); transition: opacity 0.3s; pointer-events: none; }
.featured:hover { border-color: oklch(0.72 0.17 55 / 0.35); background: var(--bg3); transform: translateY(-3px); box-shadow: 0 12px 40px oklch(0.72 0.17 55 / 0.07); }
.featured:hover::before { opacity: 0.6; }
.featured > * { position: relative; }
.feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.28rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 1.1rem;
}
.feat-title { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.7rem; letter-spacing: -0.01em; color: var(--text); }
.featured:hover .feat-title { color: var(--accent); }
.feat-desc { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.1rem; }
.feat-metrics { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fm { display: flex; flex-direction: column; gap: 0.2rem; }
.fm b { font-size: 1.15rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fm span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-family: var(--mono); font-size: 0.64rem; padding: 0.22rem 0.55rem; border-radius: 3px; background: var(--accent-dim); color: var(--accent); letter-spacing: 0.03em; }

/* Secondary project bento grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.card {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 1.3rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 55%); transition: opacity 0.3s; pointer-events: none; }
.card:hover { border-color: oklch(0.72 0.17 55 / 0.35); background: var(--bg3); transform: translateY(-3px); box-shadow: 0 12px 40px oklch(0.72 0.17 55 / 0.07); }
.card:hover::before { opacity: 0.6; }
.card > * { position: relative; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.6rem; }
.card-name { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; color: var(--text); transition: color 0.2s; }
.card:hover .card-name { color: var(--accent); }
.star { font-family: var(--mono); font-size: 0.66rem; color: var(--accent); display: inline-flex; gap: 0.2rem; align-items: center; white-space: nowrap; }
.card-desc { font-size: 0.83rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 0.9rem; flex: 1; }
.card .chips .chip { font-size: 0.58rem; padding: 0.18rem 0.45rem; }

/* Skills — service status panels */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 1.2rem 1.3rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}
.panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 55%); transition: opacity 0.3s; pointer-events: none; }
.panel:hover { border-color: oklch(0.72 0.17 55 / 0.35); background: var(--bg3); transform: translateY(-3px); box-shadow: 0 12px 40px oklch(0.72 0.17 55 / 0.07); }
.panel:hover::before { opacity: 0.6; }
.panel > * { position: relative; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border); }
.panel-title { font-family: var(--mono); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); opacity: 0.8; }
.svc { display: flex; flex-direction: column; gap: 0.15rem; }
.svc-row { display: flex; align-items: center; gap: 0.65rem; font-family: var(--mono); font-size: 0.8rem; color: var(--text-dim); padding: 0.28rem 0; transition: color 0.18s; }
.svc-row:hover { color: var(--accent); }
.svc-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; opacity: 0.85; }
.svc-row:hover .svc-dot { background: var(--accent); box-shadow: 0 0 7px var(--accent); }

/* Announcement box — headline + status line + contact links, lives in the sticky sidebar */
.announcement {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid oklch(0.72 0.17 55 / 0.28);
  border-radius: 12px;
  padding: 1.4rem 1.25rem;
}
.announcement::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(ellipse 95% 120% at 100% 0%, var(--accent-glow) 0%, transparent 62%);
}
.announcement > * { position: relative; }
.announcement-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
}
.announcement-eyebrow::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px oklch(0.72 0.17 145 / 0.7); animation: pulse 2.4s ease-in-out infinite; }
.announcement-title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; color: var(--text); }
.announcement-title .hl { color: var(--accent); }
.announcement .side-links { margin-top: 0.3rem; gap: 0.4rem; flex-wrap: nowrap; }
/* flex: 1 1 auto — die drei Buttons sind zusammen schmaler als die Box und
   ließen sonst den Rest als Lücke rechts stehen. Basis auto (nicht 0), damit
   sie von ihrer natürlichen Breite aus wachsen und die Labels nicht umbrechen. */
.announcement .side-links a, .announcement .side-links button {
  background: var(--bg3);
  border-color: var(--border-hi);
  padding: 0.5rem 0.6rem;
  font-size: 0.64rem;
  flex: 1 1 auto;
  justify-content: center;
}
/* überschreibt die width/height-Attribute im HTML — sonst blieben die Icons
   bei 12px kleben, während die Schrift auf großen Displays mitwächst */
.side-links svg { flex-shrink: 0; width: 1.15em; height: 1.15em; }

footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(70rem, 100vw);
  z-index: 5;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  text-align: left;
  padding: 0.85rem 2.5rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  text-shadow: 0 1px 6px var(--bg), 0 0 3px var(--bg);
  pointer-events: none;
}

/* ── Scroll-gekoppeltes Ein-/Ausblenden der Bereiche ──
   Jede Sektion wird über ihre eigene Sichtbarkeits-Progression sanft
   ein- und ausgeblendet: gedimmt beim Ein-/Austreten, voll in der Mitte.
   Läuft nur in Browsern mit Scroll-Timeline-Support (Chromium/Edge, aktuelle
   Safari/Firefox); sonst bleiben die Bereiche einfach voll sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .content > section {
      animation: section-fade linear both;
      animation-timeline: view();
    }
  }
}
@keyframes section-fade {
  0%   { opacity: 0.4; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0.4; }
}

.toast {
  position: fixed;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 30;
}
.toast.show { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; padding: 0 1.5rem; }
  .sidebar { position: static; height: auto; overflow: visible; padding: 3rem 0 1rem; }
  .side-nav { display: none; }
  .side-hook { min-height: auto; }
  .content { padding: 2rem 0 18vh; max-width: none; }
  /* Zweispaltig — jetzt beginnt jede zweite Zelle eine neue Reihe und muss
     ihre Trennlinie verlieren, sonst hängt sie am linken Rand in der Luft. */
  .stats { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .stat:nth-child(odd) { border-left: 0; }
  .grid { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .announcement { margin-top: 1.6rem; }
  /* Volle Breite hier — die Buttons sollen nicht über die ganze Zeile gezogen
     werden, sondern bei ihrer natürlichen Breite bleiben. */
  .announcement .side-links a, .announcement .side-links button { flex: 0 1 auto; }
  footer { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .announcement-eyebrow::before { animation: none; }
  html { scroll-behavior: auto; }
}