:root {
  --bg: #f8f8f6;
  --surface: #ffffff;
  --text: #1f1d1a;
  --muted: #6b665e;
  --border: #e4e0d8;
  --accent: #c2410c;

  --thumb-a: #e8d5c4;
  --thumb-b: #cfdde6;
  --thumb-c: #d9e3cc;
  --thumb-d: #e3d3e3;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Animierter Hintergrund */
  --bg-line-faint: #d6d6d3;   /* sehr helles Grau: hintere Figur, Haarlinien */
  --bg-line-mid: #a9a9a5;     /* Rauchgrau: Schleifen */
  --bg-line-strong: #3b3b39;  /* Graphit: vordere Figur, Spuren, Kreuzungspunkt */
  --bg-visibility: 1;         /* Gesamtsichtbarkeit, z. B. 0.6 für noch zurückhaltender */
  --bg-veil: rgba(248, 248, 246, 0.85); /* Schleier hinter dem Kopfbereich */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #211f1c;
    --text: #ece8e1;
    --muted: #a39d93;
    --border: #34312c;
    --accent: #f08a5d;

    --thumb-a: #4a3a2e;
    --thumb-b: #2e3f4a;
    --thumb-c: #36422c;
    --thumb-d: #45344a;

    --bg-line-faint: #2d2c2a;
    --bg-line-mid: #4b4a47;
    --bg-line-strong: #c9c6c0;
    --bg-veil: rgba(23, 22, 20, 0.85);
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Animierter Hintergrund: feste Ebene hinter allem */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: bg-in 6s ease 0.8s forwards;
}

.bg-field {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--bg-visibility);
}

.bg path,
.bg line,
.bg circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bg .far { stroke: var(--bg-line-faint); stroke-width: 0.8; }
.bg .mid { stroke: var(--bg-line-mid); stroke-width: 0.7; }
.bg .near { stroke: var(--bg-line-strong); stroke-width: 0.8; }
.bg .trace { stroke: var(--bg-line-strong); stroke-width: 0.6; transition: opacity 21s linear; }
.bg .axis { stroke: var(--bg-line-faint); stroke-width: 0.6; }
.bg .mark { stroke: var(--bg-line-strong); stroke-width: 0.7; }
.bg .mark-dot { fill: var(--bg-line-strong); stroke: none; }

@keyframes bg-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; opacity: 1; }
}

/* Inhalt liegt über dem Hintergrund */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Kopfbereich */
.site-header {
  padding: 40px 0 40px;
  /* weicher Schleier, damit Titel und Einleitung klar lesbar bleiben */
  background: radial-gradient(ellipse 70% 90% at 25% 45%, var(--bg-veil), transparent 75%);
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
}

/* Kategorien der Startseite (Apps, Artefakte): Überschrift im Stil des Seitentitels */
.category {
  margin: 8px 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 1.15;
}

.lead {
  margin: 0;
  max-width: 56ch;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Raster */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  padding-bottom: 64px;
}

@media (max-width: 640px) {
  .grid { padding-bottom: 56px; }
}

/* Karte */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.thumb {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--thumb-a);
  font-family: var(--serif);
  font-size: 3.5rem;
  color: var(--text);
}

.thumb span {
  opacity: 0.9;
}

.thumb {
  position: relative;
  overflow: hidden;
}

.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bei reduzierter Bewegung nur das Standbild zeigen */
@media (prefers-reduced-motion: reduce) {
  .thumb video {
    display: none;
  }
}

.card--b .thumb { background: var(--thumb-b); }
.card--c .thumb { background: var(--thumb-c); }
.card--d .thumb { background: var(--thumb-d); }

.body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.body h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.body p {
  margin: 0 0 16px;
  color: var(--muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}

.link {
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}

/* zweiter Verweis direkt unter dem ersten (z. B. «Das Feld») */
.link + .link--next { margin-top: 6px; }

.link:hover,
.link:focus-visible {
  text-decoration: underline;
}

/* Fußbereich */
.site-footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

.site-footer p {
  margin: 0;
}

/* Header-Menü: Name links, drei animierte Symbole rechts */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 20px;
}

/* Trennlinie zwischen Header-Menü und Seiteninhalt */
.divider {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0 0 30px;
  color: var(--text);
}

.divider .wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.brand {
  display: inline-block;
  margin: 18px 0 0;
  text-decoration: none;
}

.menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* immer gleich breite Spalten */
  gap: 24px;
  width: min(100%, 680px);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.menu-icon {
  display: block;
  flex: 0 0 72px;
  width: 72px;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  transition: border-color 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}

/* Invers-Effekt: beim Überfahren helle Linien auf dunkler Fläche */
.menu-item:hover .menu-icon,
.menu-item:focus-visible .menu-icon {
  background: var(--text);
  color: var(--surface);
}

.menu-item:hover .menu-icon .werk,
.menu-item:focus-visible .menu-icon .werk {
  fill: var(--text);
}

.menu-item:hover .menu-icon,
.menu-item:focus-visible .menu-icon,
.menu-item[aria-current] .menu-icon {
  border-color: var(--text);
}

.menu-item:focus-visible {
  outline: none;
}

.menu-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.menu-sub {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Linien der Symbole: Breite in Bildschirmpixeln, unabhängig von der Grösse */
.menu-icon path,
.menu-icon circle,
.menu-icon rect,
.post-anim path,
.post-anim circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.menu-icon .bold { stroke-width: 1.6; }
.menu-icon .mid { stroke-width: 1; }
.menu-icon .thin { stroke-width: 0.7; }
.menu-icon .dash { stroke-dasharray: 2 3; }
.menu-icon .fill { fill: currentColor; stroke: none; }
.menu-icon .hatch { fill: currentColor; fill-opacity: 0.12; stroke: none; }
.menu-icon .werk { fill: var(--surface); stroke-width: 1.6; }

/* Schmale Bildschirme: Name oben, darunter drei gleich breite Spalten */
@media (max-width: 760px) {
  .topbar { flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .divider { margin-bottom: 28px; }
  .brand { margin-top: 0; }
  .menu { width: 100%; gap: 12px; }
  .menu-item { flex-direction: column; align-items: stretch; gap: 8px; }
  .menu-icon { flex: none; width: 100%; }
  .menu-title { font-size: 0.95rem; }
  .menu-sub { font-size: 0.7rem; white-space: normal; }
}

/* News-Einträge */
.post {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: start;
  padding: 28px;
  margin-bottom: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.post-figure {
  margin: 0;
}

.post-anim {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 190;
  color: var(--text);
}

.post-anim .bold { stroke-width: 1.6; }
.post-anim .mid { stroke-width: 1.1; }
.post-anim .thin { stroke-width: 0.8; }
.post-anim .dash { stroke-dasharray: 2 3; }
.post-anim .fill { fill: currentColor; stroke: none; }

.post-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}

.post-body time {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.post-body h2 {
  margin: 6px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
}

.post-body p {
  margin: 0;
  color: var(--text);
}

.post-body p + p {
  margin-top: 12px;
}

.post-body .post-meta {
  margin: -4px 0 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

.post-body .post-source {
  font-size: 0.8rem;
  color: var(--muted);
}

.post-body .post-link {
  margin-top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.back {
  margin: 32px 0 64px;
}

/* Termine: aufklappbare Einträge */
.entry {
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease;
}

.entry:hover,
.entry[open] {
  border-color: var(--muted);
}

.entry-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
}

.entry-head::-webkit-details-marker {
  display: none;
}

.entry-head:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.entry-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.entry-text time {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.entry-text h2 {
  margin: 4px 0 4px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.2;
}

.entry-text .post-meta {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Plus-Zeichen, das beim Öffnen zum Minus wird */
.entry-toggle {
  position: relative;
  flex: 0 0 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.entry-toggle::before,
.entry-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: var(--text);
  transition: transform 0.3s ease, background-color 0.25s ease;
}

.entry-toggle::after {
  transform: rotate(90deg);
}

.entry[open] .entry-toggle::after {
  transform: rotate(0deg);
}

.entry-head:hover .entry-toggle {
  background: var(--text);
  border-color: var(--text);
}

.entry-head:hover .entry-toggle::before,
.entry-head:hover .entry-toggle::after {
  background: var(--surface);
}

.entry-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: start;
  padding: 4px 28px 28px;
}

.entry[open] .entry-body {
  animation: entry-open 0.45s ease;
}

@keyframes entry-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entry[open] .entry-body { animation: none; }
}

@media (max-width: 760px) {
  .entry-head { padding: 18px 20px; gap: 16px; }
  .entry-text h2 { font-size: 1.3rem; }
  .entry-body { grid-template-columns: 1fr; gap: 20px; padding: 0 20px 20px; }
}

@media (max-width: 760px) {
  .post { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .post-body h2 { font-size: 1.4rem; }
}

/* Smartphone: Artefakte als Wisch-Galerie, immer eines auf einmal */
.slider-dots {
  display: none;
}

@media (max-width: 640px) {
  .grid {
    display: flex;
    gap: 40px;          /* grösser als der Seitenrand: die nächste Karte bleibt ganz verborgen */
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .grid::-webkit-scrollbar {
    display: none;
  }

  .grid .card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .grid .card:hover {
    transform: none;
  }

  .grid .mobile-first {
    order: -1;          /* auf dem Handy zuerst: Stellenfeld */
  }

  /* Diamanten oberhalb der Karte: zeigen die Position und laden zum Wischen ein */
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 0 0 18px;
  }

  .slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid var(--text);
    border-radius: 1px;
    background: transparent;
    transform: rotate(45deg);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.25s ease;
  }

  .slider-dot[aria-current="true"] {
    background: var(--text);
    transform: rotate(45deg) scale(1.25);
  }
}

/* Karten mit gezeichneter Vorschau (SVG statt Video) */
.card--svg .thumb {
  display: grid;
  place-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.card--svg .thumb .post-anim {
  width: 78%;
  height: auto;
  aspect-ratio: 1 / 1;
  color: var(--text);
}

/* ORMA: dasselbe drehende Rad wie ORNA, vertikal in der Mitte geteilt, die rechte Hälfte invers
   (REGELN §14). Eine Ebene über der rechten Hälfte kehrt alles dahinter um. */
.split-invert {
  position: relative;
}

.split-invert::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  -webkit-backdrop-filter: invert(1);
  backdrop-filter: invert(1);
  pointer-events: none;
}

.card-date {
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Werkseite */
.work-kicker a {
  color: inherit;
  text-decoration: none;
}

.work-kicker a:hover {
  text-decoration: underline;
}

.work {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.work-figure {
  margin: 0;
}

.work-anim {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  color: var(--text);
}

.work-figure figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.work-text p {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.work-text .post-source {
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 760px) {
  .work { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
}