/* bricolage-grotesque-vietnamese-wght-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/bricolage-grotesque-vietnamese-wght-normal.BUzh504Q.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* bricolage-grotesque-latin-ext-wght-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/bricolage-grotesque-latin-ext-wght-normal.CcLUaPy7.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-wght-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/bricolage-grotesque-latin-wght-normal.DLoelf7F.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* instrument-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/_astro/instrument-sans-latin-ext-wght-normal.B5bTHO_g.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-sans-latin-wght-normal */
@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/_astro/instrument-sans-latin-wght-normal.BbzFLZTg.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Hartplatz: Blau als Fläche, Weiß als Linie, ein gelber Ball als einziger Marker. */
:root {
	color-scheme: light dark;
	--paper: light-dark(#edf1f4, #0b1622);
	--surface: light-dark(#ffffff, #11202f);
	--ink: light-dark(#101c2a, #e6edf3);
	--muted: light-dark(#4a5b6c, #93a4b5);
	--court: light-dark(#1f5fa8, #6fa8e8);
	--line: light-dark(#c9d3dc, #22344a);
	--ball: #dde83a;
	--run: light-dark(#2e7d63, #5bbf9f);
	--ai1: light-dark(#7c3aed, #b69cff);
	--ai2: light-dark(#c026d3, #e79bf2);
	--ai3: light-dark(#f59e0b, #fcd34d);
	--warn: light-dark(#b3261e, #f2877f);

	--font-display: 'Bricolage Grotesque Variable', system-ui, sans-serif;
	--font-text: 'Instrument Sans Variable', system-ui, sans-serif;

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--wide: 76rem;
	--prose: 62ch;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 1.0625rem/1.65 var(--font-text);
	text-wrap: pretty;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 650;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;
}

a { color: var(--court); text-underline-offset: 0.2em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--court); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }

/* Kopf und Fuß */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; height: 3.5rem; }
.site-header a { color: var(--ink); text-decoration: none; font-weight: 600; }
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a { font-weight: 500; color: var(--muted); }
.site-header nav a:hover { color: var(--ink); }
.site-footer { margin-top: 6rem; padding-block: 2.5rem; border-top: 1px solid var(--line); color: var(--muted); }

/* Startseite */
.hero { padding-block: clamp(4rem, 12vw, 9rem) clamp(3rem, 8vw, 6rem); }
.hero h1 { font-size: clamp(2.75rem, 9vw, 7rem); max-width: 14ch; font-variation-settings: 'opsz' 96; }
.hero p { max-width: 46ch; margin-top: 2rem; font-size: 1.25rem; color: var(--muted); }

.project-row { display: grid; gap: 1.5rem; padding-block: 2.5rem; border-top: 2px solid var(--ink); }
.project-row h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
.project-row h2 a { color: inherit; text-decoration: none; }
.project-row h2 a:hover { color: var(--court); }
.project-row .cover { border-radius: 10px; border: 1px solid var(--line); overflow: hidden; align-self: start; }
.project-row .cover img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }

/* Tech-Pills: Icon in Markenfarbe, Ring als langsam kreisender Verlauf */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.stack { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0; list-style: none; }
.pill {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem 0.3rem 0.65rem;
	border: 2px solid transparent; border-radius: 999px; font-size: 0.9rem; font-weight: 500; line-height: 1.3;
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		conic-gradient(from var(--ring), var(--court), var(--run), var(--ball), var(--court)) border-box;
}
.pill .brand { fill: light-dark(var(--brand), color-mix(in srgb, var(--brand) 55%, white)); flex: none; }
.pill .plain { color: var(--court); flex: none; }
@media (prefers-reduced-motion: no-preference) {
	.pill { animation: ring 9s linear infinite; }
}
@keyframes ring { to { --ring: 360deg; } }
/* KI-Skill-Pills: gleiche Form, Verlauf in Violett/Magenta statt Blau/Grün */
.skills { margin-top: 0.6rem; }
.skills .pill {
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		conic-gradient(from var(--ring), var(--ai1), var(--ai2), var(--ai3), var(--ai1)) border-box;
}
.skills .pill .plain { color: var(--ai1); }
@media (min-width: 52rem) {
	.project-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

/* Projektseite */
.case-head { padding-block: clamp(3rem, 8vw, 6rem) 2rem; }
.case-head h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); max-width: 16ch; }
.case-head .tagline { font-size: 1.3rem; color: var(--muted); max-width: 52ch; margin-top: 1.5rem; }
.case-head .facts { margin-top: 2rem; display: grid; gap: 0.5rem; }
.case-head .facts p { margin: 0; }

.prose { max-width: var(--prose); }
.prose h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
.prose p { margin: 0 0 1rem; }

.chapter-title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 5rem 0 1rem; }

/* Timeline: die Schiene ist eine Platzlinie, der gelbe Punkt der Meilenstein */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before, .timeline::after {
	content: ''; position: absolute; left: calc(1rem - 1.5px); top: 0; bottom: 0; width: 3px; border-radius: 2px;
}
.timeline::before { background: var(--line); }
.timeline::after { background: var(--court); bottom: auto; height: var(--fill, 100%); }

.milestone { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: 2rem 3rem; container-type: inline-size; }
.milestone::before {
	content: ''; position: absolute; z-index: 1; left: 0.45rem; top: 2.4rem; width: 1.1rem; height: 1.1rem;
	border-radius: 50%; background: var(--ball); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink);
}
/* Mit JavaScript ist der Ball erst leer und springt beim Erreichen. Ohne JavaScript bleibt er gefüllt. */
.js .milestone:not(.reached)::before { background: var(--paper); }
.js .milestone.reached::before { animation: ball-in 0.95s cubic-bezier(0.3, 0, 0.4, 1) both; }
.js .milestone.reached.instant::before { animation: none; }
@keyframes ball-in {
	0%   { background: var(--paper); transform: translateY(0) scale(1, 1); }
	30%  { background: var(--paper); transform: translateY(-1.1rem) scale(0.95, 1.05); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
	52%  { background: var(--paper); transform: translateY(0) scale(1.25, 0.7); }
	68%  { background: var(--ball); transform: translateY(-0.35rem) scale(0.97, 1.03); }
	84%  { background: var(--ball); transform: translateY(0) scale(1.06, 0.94); }
	100% { background: var(--ball); transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.js .milestone:not(.reached)::before, .js .milestone.reached::before { background: var(--ball); animation: none; }
}
.milestone .when { margin: 0; font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.milestone h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-top: 0.25rem; }
.milestone .decision { margin: 0.75rem 0 0; max-width: 56ch; }
.milestone .entry { display: grid; gap: 1.5rem; align-content: start; }

.shot { margin: 0; }
.shot .frame { border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 24px 48px -24px color-mix(in srgb, var(--ink) 35%, transparent); }
.shot button.frame { display: block; width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; cursor: zoom-in; text-align: left; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.shot figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); max-width: 60ch; }
.shot.portrait .frame { width: min(17rem, 100%); padding: 0.5rem; border-radius: 2.2rem; background: var(--ink); border: 0; }
.shot .frame:focus-visible { outline: 3px solid var(--court); outline-offset: 4px; }
.shot.portrait img { aspect-ratio: auto; max-height: calc(100svh - 11rem); width: 100%; object-fit: contain; border-radius: 1.7rem; }

@container (min-width: 52rem) {
	.entry { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; }
	.has-shot { min-height: 88svh; }
	.has-shot .shot, .has-shot .dgfig { position: sticky; top: 5.5rem; align-self: start; }
}

/* Lightbox: natives popover, schließt per Escape, Klick daneben oder Knopf */
.lightbox { margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; max-width: 96vw; max-height: 94svh; color: #fff; }
.lightbox img { display: block; max-width: 96vw; max-height: 92svh; width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px -20px #000; }
.lightbox::backdrop { background: color-mix(in srgb, #050b12 82%, transparent); backdrop-filter: blur(6px); }
.lightbox .close { position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: #101c2a; color: #fff; cursor: pointer; }
.lightbox .close:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.lightbox, .lightbox::backdrop { transition: opacity 0.25s ease, transform 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete; opacity: 0; }
	.lightbox { transform: scale(0.96); }
	.lightbox:popover-open, .lightbox:popover-open::backdrop { opacity: 1; }
	.lightbox:popover-open { transform: none; }
	@starting-style {
		.lightbox:popover-open, .lightbox:popover-open::backdrop { opacity: 0; }
		.lightbox:popover-open { transform: scale(0.96); }
	}
}

/* Diagramme */
.dgwrap { margin: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 1rem; }
.dg { display: block; width: 100%; min-width: 42rem; height: auto; font-family: var(--font-text); }
.dg .box { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.dg .hot { stroke: var(--court); stroke-width: 2.5; }
.dg .warn { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 7 5; }
.dg .zone { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 7; }
.dg .t { fill: var(--ink); font-size: 17px; font-weight: 600; }
.dg .s { fill: var(--muted); font-size: 14px; }
.dg .al { fill: var(--muted); font-size: 13px; }
.dg .a { fill: none; stroke: var(--muted); stroke-width: 2; }
.dg .a.warnline { stroke: var(--warn); }
.dg marker path { fill: var(--muted); }
.dgcap { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--muted); }
.overview { display: grid; gap: 2.5rem; }

/* Heute */
.today { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 52rem) { .today { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; } }

/* Scrollgetriebene Animation, nur wo der Browser sie kann und die Person Bewegung zulässt */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.has-shot .frame, .has-shot .dgwrap { animation: reveal linear both; animation-timeline: view(); animation-range: entry 100% cover 32%; }
	}
}
@keyframes reveal { from { clip-path: inset(10% 8% 10% 8% round 14px); opacity: 0.2; transform: translateY(1.5rem) scale(0.97); } to { clip-path: inset(0 round 14px); opacity: 1; transform: none; } }

/* Seitenwechsel zwischen Startseite und Projekt */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* Diagramme in der schmalen Timeline-Spalte bekommen größere Schrift */
.dg.big .t { font-size: 21px; }
.dg.big .s { font-size: 17px; }