/* Unbox Blackbox — circuit-schematic theme
   Palette taken from bleeptrack's 35c3 circuit generator (35c3.bleeptrack.de):
   black background, wires in a blue (#0084b0) to green (#00a356) gradient. */

:root {
  --bg: #05070a;
  --bg-raised: #0b1013;
  --bg-raised-hover: #0e1518;
  --ink: #edf3f1;
  --ink-soft: #9baaa6;
  --ink-faint: #5e6e6a;
  --line: #131b1d;
  --line-strong: #223030;

  --blue: #0084b0;
  --green: #00a356;
  --accent: #12c17a;
  --accent-soft: rgba(0, 163, 86, 0.28);
  --accent-gradient: linear-gradient(90deg, var(--blue), var(--green));

  --cat-gastartikel: #0084b0;
  --cat-blog: #00a0b8;
  --cat-publikationen: #00ae86;
  --cat-talks: #00b25c;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --max-width: 1180px;
}

* { box-sizing: border-box; }
/* Disable scroll anchoring site-wide: the sticky hero releasing right where
   #archiv's sticky headline pins in gives Chrome's anchoring heuristic two
   sticky state changes at almost the same scroll position, which it
   sometimes "corrects" for by yanking the scroll position back up into the
   hero on mobile. Nothing on this page relies on anchoring (no content is
   ever prepended above the viewport), so it's safe to turn off entirely. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-anchor: none; }
svg { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  background-attachment: fixed;
}

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

img { max-width: 100%; display: block; }

.hero-kicker,
.teaser-meta,
.teaser-cat,
.filter-btn,
.post-single-meta,
.footer-note,
.site-mark-text,
.post-single-source,
.teaser-source {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 7, 10, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-strong);
}

.site-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.site-mark-glyph { display: inline-flex; color: var(--accent); }
.site-mark-text { font-size: 0.92rem; font-weight: 600; }

.nav-toggle {
  display: none;
  width: 30px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ink);
}
.nav-toggle span { top: 11px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

.site-nav { display: flex; gap: 22px; }
.site-nav a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- drill hero ---------- */

.drill-hero-wrapper {
  position: relative;
  height: 320vh;
  height: 320svh;
}

.drill-hero-sticky {
  position: sticky;
  top: 0;
  /* svh (locked to the smallest viewport, i.e. toolbar always shown) instead
     of vh: some WebKit-based iOS browsers (Vivaldi confirmed, Safari itself
     is fine) still recompute plain vh live as their toolbar collapses while
     scrolling, which lands exactly on this sticky/unstick boundary and
     yanks the scroll position back into the hero. svh never changes mid-
     scroll, so there's nothing for that recalculation to trip over. */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
}

.drill-hero-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.drill-svg {
  width: min(1500px, 120vw);
  height: auto;
  max-height: 100vh;
  max-height: 100svh;
  overflow: visible;
}

.drill-hero-copy {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 56px 24px 0;
}

.drill-hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20px -24px -60px;
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.92) 50%, rgba(5, 7, 10, 0) 100%);
}

.drill-part { will-change: transform; }
#drill-flip { transform-origin: 470px 470px; will-change: transform; }

.drill-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  animation: drill-hint-bounce 2s ease-in-out infinite;
}

@keyframes drill-hint-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

@media (max-width: 780px) {
  .drill-hero-wrapper { height: 260vh; height: 260svh; }
  .drill-hero-copy { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .drill-hero-wrapper { height: auto; }
  .drill-hero-sticky { position: relative; height: auto; padding-bottom: 40px; }
  .drill-hero-stage { position: relative; inset: auto; padding: 40px 0; }
  .drill-scroll-hint { display: none; }
}

.hero-kicker {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-title {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-lead {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---------- sections ---------- */

.section { border-top: 1px solid var(--line-strong); }
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 24px;
}

.section-headline {
  font-size: 1.5rem;
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.section-headline::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1.4px solid var(--green);
  display: inline-block;
  flex: none;
}

/* pin the archive headline below the header while its teasers scroll past;
   it rides along with .section-inner, so it releases again right as that
   section (and with it, the footer) comes into view */
#archiv .section-headline {
  position: sticky;
  top: 55px;
  z-index: 5;
  background: var(--bg);
  margin: 0 0 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-strong);
  opacity: 1;
  transition: opacity 0.15s ease;
}
#archiv .section-headline.is-hidden-by-footer {
  opacity: 0;
  pointer-events: none;
}

.about-inner p { max-width: 68ch; color: var(--ink-soft); }
.about-inner .about-edu { font-size: 0.92rem; color: var(--ink-faint); }

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

/* rides directly below the pinned archive headline, same reasoning as
   #archiv .section-headline above */
#archiv .filters {
  position: sticky;
  top: 125px;
  z-index: 4;
  background: var(--bg);
  margin-bottom: 0;
  padding: 14px 0 28px;
  opacity: 1;
  transition: opacity 0.15s ease;
}
#archiv .filters.is-hidden-by-footer {
  opacity: 0;
  pointer-events: none;
}

.filter-btn {
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-btn:hover { border-color: var(--green); color: var(--accent); }
.filter-btn.is-active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #04150e;
  font-weight: 600;
}

/* ---------- teaser grid ---------- */

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 22px;
  padding-top: 1rem;
}

.teaser {
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.teaser.is-hidden { display: none; }
.teaser:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--green), 0 10px 28px -12px var(--accent-soft);
  border-color: var(--green);
}

.teaser-link { display: block; text-decoration: none; color: inherit; }

.teaser-figure {
  position: relative;
  aspect-ratio: 4 / 2.6;
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
  overflow: hidden;
}
.teaser-figure img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.teaser-ext {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.teaser-body { padding: 16px 18px 18px; }

.teaser-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.teaser-cat {
  padding: 2px 7px;
  border: 1px solid currentColor;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.cat-talks { color: var(--cat-talks); }
.cat-gastartikel { color: var(--cat-gastartikel); }
.cat-publikationen { color: var(--cat-publikationen); }
.cat-blog { color: var(--cat-blog); }

.teaser-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 8px;
}

.teaser-copy {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 10px;
}

.teaser-source {
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ---------- single post ---------- */

.post-single-inner,
.page-single-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.post-single-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.post-single-title { font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
.post-single-source { color: var(--ink-faint); font-size: 0.85rem; margin: 0 0 28px; }

.post-single-figure {
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  padding: 20px;
  margin-bottom: 28px;
}

.post-single-teaser {
  font-size: 1.12rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--green);
  padding-left: 16px;
  margin: 0 0 28px;
}

.post-single-content { color: var(--ink-soft); }
.post-single-content iframe { max-width: 100%; }

.post-single-external {
  margin-top: 32px;
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px dashed var(--line-strong);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.post-single-back { margin-top: 32px; font-size: 0.9rem; }

.page-single-title { font-size: 1.9rem; margin: 0 0 20px; }
.page-single-content { color: var(--ink-soft); }
.page-single-content a { color: var(--ink); }

.not-found-inner { text-align: center; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-strong);
  background: var(--bg-raised);
}
.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.footer-headline { font-size: 1rem; margin: 0 0 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.footer-meta { max-width: 40ch; font-size: 0.85rem; color: var(--ink-faint); }
.footer-meta a { color: var(--ink-soft); }
.footer-note { margin-top: 6px; }

/* ---------- responsive ---------- */

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
    padding: 12px 24px 18px;
    gap: 12px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
}