/* Hallmark · shape: Day-strip · genre: modern-minimal · theme: custom · job: try · idea: "Der Hub als Tagesplan, ruhig und unscharf, damit keine Technik verraten wird" · vibe: "ruhig, technisch, nachts, selbst gebaut"
 * paper: oklch(11% 0.012 265) · accent: oklch(68% 0.16 255) · display: system-ui · body: system-ui · hero: Split, Text links auf Spalte 1 bis 6, Tagesplan rechts · nav: bestehende Seiten-Navigation unverändert · footer: eine Zeile, Name links, Rechtliches rechts · imagery: das Produkt, bewusst unscharf · signature: ein Tagesplan, in dem die Zeitleiste über die Blöcke läuft
 * axes: dark/grotesk-sans/chromatic-blue · posture: left-aligned canvas · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, das Motiv ist ein gezeichneter Tagesplan und kein echter Screenshot; bewusst unscharf gelassen, damit nichts Technisches sichtbar wird */
/* waive 7b: Startseite bleibt reines Schwarz wie bisher, die Hub-Seite nutzt ein getöntes Papier */
/* waive 1: keine Webfonts ladbar (Proxy, Datenschutz), deshalb die Systemschrift als Anzeigeschrift */
@import url("./tokens.css");
@import url("./base.css");

body.hub { background: var(--color-paper); display: block; min-height: 100dvh; font-family: var(--font-body); }
.hub .navbar { background: color-mix(in oklab, var(--color-paper) 75%, transparent); }
.hub .nav-links a:hover { color: var(--color-accent); }
.hub .nav-links a[aria-current="page"] { color: var(--color-accent); }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
h1.big { font-size: var(--text-display); line-height: 1.02; font-weight: 700; letter-spacing: var(--tracking-display); }
h2.sec { font-size: var(--text-section); line-height: 1.08; font-weight: 700; letter-spacing: var(--tracking-display); }
.lede { font-size: var(--text-lead); color: var(--color-ink-2); line-height: 1.45; max-width: 32ch; margin-top: var(--space-lg); }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; min-height: calc(100dvh - 4rem); padding-block: var(--space-2xl); }
.hero-text { grid-column: 1 / 7; }
.hero-day { grid-column: 8 / 13; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; text-decoration: none; border-radius: var(--radius-card); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.link { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--color-accent) 85%, var(--color-ink)); }
  .link:hover { color: var(--color-accent); }
}

/* Tagesplan: das Motiv */
.day { position: relative; display: grid; gap: var(--space-xs); padding-top: var(--space-sm); }
.slot { display: grid; grid-template-columns: 3ch minmax(0, 1fr); align-items: center; column-gap: var(--space-md); min-height: 44px; }
.slot time { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.block { color: var(--color-ink); display: grid; gap: var(--space-2xs); align-content: center; padding: var(--space-xs) var(--space-sm); min-height: 44px; border-left: 2px solid var(--color-rule); background: var(--color-paper-2); transform-origin: left center; animation: block-in var(--dur-long) var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
.block i { display: block; height: 7px; border-radius: 4px; background: color-mix(in oklab, var(--color-ink) 28%, transparent); filter: blur(3px); }
.block i + i { width: 55%; }
.block.tall { min-height: 92px; }
.block.now { border-left-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 16%, var(--color-paper-2)); }
.block.empty { background: transparent; border-left-style: dashed; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; }
.scan::before { content: ""; position: absolute; left: calc(3ch + var(--space-md)); right: 0; top: 0; height: 2px; background: var(--color-accent); animation: scan 14s linear infinite alternate; }
@keyframes block-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(calc(var(--scan-h, 360px))); } }

/* Abschnitte */
.sec-wrap { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.sec-head { margin-bottom: var(--space-2xl); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.rows li:last-child { border-bottom: 1px solid var(--color-rule); }
.rows h3 { grid-column: 1 / 5; font-size: var(--text-xl); font-weight: 700; transition: color var(--dur-short) var(--ease-out); }
.rows p { grid-column: 5 / 13; font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
@media (hover: hover) and (pointer: fine) { .rows li:hover h3 { color: var(--color-accent); } }

.devices { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); list-style: none; margin: 0; padding: 0; }
.devices li { font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.15; padding-bottom: var(--space-xs); border-bottom: 3px solid var(--color-rule); }
.devices li:first-child { border-bottom-color: var(--color-accent); }

.home-more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; padding-block: var(--section-gap-s); }
.home-more .hero-text { grid-column: 1 / 7; }
.home-more .hero-day { grid-column: 8 / 13; }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.foot a { color: var(--color-ink-2); }

/* Einblenden beim Scrollen: nur mit JS, sonst ist alles sichtbar */
.js .rv:not(.in) { opacity: 0; transform: translateY(16px); }
.rv { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: var(--d, 0ms); }

@media (max-width: 60rem) {
  .hero, .home-more { display: block; min-height: 0; }
  .hero-day { margin-top: var(--space-2xl); }
  .rows h3, .rows p { grid-column: 1 / -1; }
  .rows p { margin-top: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .scan::before { animation: none; }
  .js .rv:not(.in) { opacity: 1; transform: none; }
}
body.home { background: var(--color-void); line-height: normal; font-family: var(--font-legacy); }
.first-screen { min-height: calc(100dvh - 3.9rem); }
.navbar svg { display: inline-block; vertical-align: middle; }

/* Hub-Oberfläche, anonymisiert: Aufbau wie in der App, Inhalt unscharf */
.panel { display: grid; grid-template-columns: 76px minmax(0, 1fr); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.side { position: relative; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md) var(--space-xs); border-right: 1px solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 55%, var(--color-paper-2)); }
.nv { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--space-2xs); min-height: 56px; align-content: center; animation: block-in var(--dur-long) var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms + 100ms); }
.nv b { width: 22px; height: 22px; border: 2px solid var(--color-muted); border-radius: 6px; opacity: 0.7; }
.nv i { width: 36px; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--color-ink) 28%, transparent); filter: blur(2px); }
.sel { position: absolute; left: var(--space-xs); right: var(--space-xs); top: var(--space-md); height: 56px; border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-accent) 20%, transparent); border: 1px solid color-mix(in oklab, var(--color-accent) 55%, transparent); animation: sel 12s var(--ease-out) infinite; }
@keyframes sel { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(64px); } 50%, 70% { transform: translateY(128px); } 75%, 95% { transform: translateY(64px); } 100% { transform: translateY(0); } }
.main { padding: var(--space-md); min-width: 0; }
.ph i { display: block; width: 45%; height: 22px; border-radius: 6px; background: color-mix(in oklab, var(--color-ink) 70%, transparent); filter: blur(6px); }
.tabs { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.tabs span { width: 64px; height: 28px; border-radius: var(--radius-card); background: var(--color-paper-3); filter: blur(1px); }
.tabs .on { background: color-mix(in oklab, var(--color-accent) 30%, var(--color-paper-3)); }
.panel .block { background: var(--color-paper-3); }
.panel .block.now { background: color-mix(in oklab, var(--color-accent) 18%, var(--color-paper-3)); }
.panel .slot { grid-template-columns: 2.4ch minmax(0, 1fr); column-gap: var(--space-sm); }
@media (prefers-reduced-motion: reduce) { .sel { animation: none; } }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.facts > div { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.facts dt { font-size: var(--text-display-s); font-weight: 700; line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.facts dd { margin: var(--space-md) 0 0; color: var(--color-ink-2); max-width: 24ch; }
@media (max-width: 40rem) { .facts { grid-template-columns: 1fr; } }
.maint { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; }

/* Hero: ein Einstieg, drei Stufen, Titel zuerst */
.hero-text > * { animation: rise 600ms var(--ease-out) backwards; }
.hero-text > .lede { animation-delay: 80ms; }
.hero-text > .actions { animation-delay: 140ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.home-more .hero-text > *, .sec-wrap .hero-text > * { animation: none; }

/* Die Auswahl in der Seitenleiste wechselt, der Inhalt blendet mit Unschärfe um */
.main .day, .main .tabs { animation: view 12s linear infinite; }
@keyframes view {
  0%, 21% { opacity: 1; filter: blur(0); }
  23% { opacity: 0.3; filter: blur(3px); }
  25%, 46% { opacity: 1; filter: blur(0); }
  48% { opacity: 0.3; filter: blur(3px); }
  50%, 71% { opacity: 1; filter: blur(0); }
  73% { opacity: 0.3; filter: blur(3px); }
  75%, 96% { opacity: 1; filter: blur(0); }
  98% { opacity: 0.3; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .main .day, .main .tabs { animation: none; } }

/* Navigation: weiche Farbwechsel */
.hub .nav-links a { transition: color var(--dur-micro) var(--ease-out); }

/* Projektliste */
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.plist li:last-child { border-bottom: 1px solid var(--color-rule); }
.plist img, .plist .noicon { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-card); background: var(--color-paper-2); }
.plist h2 { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; }
.plist p { color: var(--color-ink-2); margin-top: var(--space-2xs); max-width: 48ch; }
.plist .owner { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.plist .go { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; font-weight: 700; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.plist .go:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .plist .go:hover { border-color: var(--color-accent); color: var(--color-accent); } }
.chart { margin-top: var(--space-2xl); }
.chart img { width: 100%; max-width: 720px; padding: var(--space-sm); background: var(--color-paper-2); border-radius: var(--radius-card); filter: invert(1) hue-rotate(180deg) brightness(1.4); }
@media (max-width: 40rem) { .plist li { grid-template-columns: 48px minmax(0, 1fr); } .plist .go { grid-column: 2; justify-self: start; margin-top: var(--space-sm); } }

/* Rechtstexte */
.prose { max-width: 68ch; padding-block: var(--space-2xl) var(--section-gap-s); }
.prose h1 { font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-display); margin-bottom: var(--space-lg); }
.prose h3 { font-size: var(--text-xl); font-weight: 700; margin: var(--space-2xl) 0 var(--space-md); }
.prose h3:first-of-type { margin-top: 0; }
.prose p { color: var(--color-ink-2); line-height: 1.65; margin-bottom: var(--space-md); max-width: none; }
.prose { white-space: pre-line; color: var(--color-ink-2); line-height: 1.65; }
.prose h3 { white-space: normal; color: var(--color-ink); }
.prose br { display: none; }
.plist .noicon { display: grid; place-items: center; font-weight: 700; font-size: var(--text-xl); color: var(--color-muted); border: 1px solid var(--color-rule); }
.prose h3 { margin-bottom: 0; }
.prose h4 { white-space: normal; color: var(--color-ink); font-size: var(--text-lg); font-weight: 700; margin: var(--space-xl) 0 var(--space-xs); }
.prose h3 + h4 { margin-top: var(--space-lg); }
h2.plist-head { font-size: var(--text-xl); margin: var(--space-2xl) 0 var(--space-md); }

/* Seitenwechsel: weich überblenden, Navigation und Himmel bleiben stehen */
@view-transition { navigation: auto; }
.navbar { view-transition-name: nav; }
#stars-container { view-transition-name: sky; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(nav), ::view-transition-group(sky) { animation: none; }

/* Einblendung nur beim ersten Besuch pro Sitzung */
.seen .hero-text > *, .seen .block, .seen .nv { animation: none; }

/* Projektliste: Platz freihalten, damit nichts springt */
.js #projects-list:not(.loaded) { min-height: 67rem; }

/* Startseite: unterer Teil in derselben Schrift wie der Rest */
.home .home-more, .home .foot { font-family: var(--font-body); line-height: 1.55; }
/* Fußzeile: Linie nur so breit wie der Inhalt */
.foot { border-top: 0; position: relative; }
.foot::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--color-rule); }