@font-face { font-family: 'Familjen Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/familjen-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Familjen Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/familjen-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }

:root {
  --green: #0F3D2E;
  --anthracite: #33383D;
  --anthracite-deep: #24282C;
  --gold: #E2B04A;
  --gold-deep: #A87A0A;
  --ground: #F2F3EC;
  --ink: #14231C;
  --muted: #3F4B44;
  --body: #2D3A33;
  --line: #D2D9CF;
  --tint: #DCE6DA;
  --panel: #EEF3EC;
  --on-green: #CBD9CF;
  --on-anthracite: #D3D7DB;
  --sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--serif); }
img { max-width: 100%; }
a { color: var(--green); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--sans); margin: 0; }
p { margin: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 64px; }

/* Kopfzeile */
.site-header { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 12px; }
.site-header img { height: 56px; width: auto; display: block; }
.site-nav { display: flex; gap: 32px; font-family: var(--sans); font-size: 17px; font-weight: 500; }
.site-nav a { color: var(--ink); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Einstieg */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; align-items: center; padding-top: 64px; padding-bottom: 104px; }
.hero-text { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: 62px; line-height: 1.04; font-weight: 600; letter-spacing: -0.025em; }
.hero .lead { font-size: 20px; line-height: 1.55; max-width: 34em; color: var(--muted); }
.actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn { background: var(--green); color: #FFFFFF; text-decoration: none; font-family: var(--sans); font-size: 17px; font-weight: 600; padding: 0 24px; min-height: 48px; border-radius: 6px; display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--green); cursor: pointer; }
.btn:hover { background: #0B2F23; }
.btn-outline { background: transparent; color: var(--green); }
.btn-outline:hover { background: var(--panel); }
.link-plain { color: var(--green); font-family: var(--sans); font-size: 17px; font-weight: 600; min-height: 48px; display: inline-flex; align-items: center; padding: 0 8px; }
.code-card { background: var(--anthracite); color: #EEF0F2; border-radius: 14px; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 20px; }
.code-card .file { font-family: var(--mono); font-size: 14px; color: #B4BAC0; }
.code-card pre { margin: 0; font-family: var(--mono); font-size: 16px; line-height: 1.7; white-space: pre-wrap; }
.code-card .key { color: var(--gold); }

/* Skills */
.section { padding-top: 24px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 32px; }
.section h2 { font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.section .intro { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 40em; }
.heading-block { display: flex; flex-direction: column; gap: 14px; }
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { font-family: var(--sans); font-size: 16px; font-weight: 600; min-height: 44px; padding: 0 18px; border-radius: 8px; border: 0; cursor: pointer; background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px #B9C4BB; }
.chip[aria-pressed="true"] { background: var(--anthracite); color: #FFFFFF; box-shadow: none; }
.library { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.skill-list { display: flex; flex-direction: column; gap: 16px; }
.skill-card { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 24px; border: 0; border-radius: 14px; color: #FFFFFF; background: var(--anthracite); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font: inherit; }
.skill-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gold); }
.skill-card:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.skill-card[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--gold); }
.skill-card:focus-visible { outline-color: var(--gold); }
.card-body { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; min-width: 0; }
.cat { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: #C3C8CD; }
.dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.card-title { display: block; font-family: var(--sans); font-size: 22px; line-height: 1.2; font-weight: 600; color: #FFFFFF; }
.card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 1.5; color: var(--on-anthracite); }
.chevron { flex: none; }
.notice { font-size: 17px; line-height: 1.6; color: var(--muted); }

.detail { position: sticky; top: 24px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.detail .cat { font-size: 16px; color: #4B5750; }
.detail h3 { font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.detail .lead { font-size: 19px; line-height: 1.6; color: var(--body); max-width: 36em; }
.detail h4 { font-size: 18px; font-weight: 600; }
.block { display: flex; flex-direction: column; gap: 12px; }
.point { display: flex; gap: 14px; align-items: baseline; font-size: 17px; line-height: 1.55; color: var(--body); }
.point::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); flex: none; position: relative; top: -2px; }
.io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.io > div { background: var(--panel); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.io h4 { font-size: 16px; }
.io p { font-size: 16px; line-height: 1.5; color: var(--body); }
.example { background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; font-size: 17px; line-height: 1.55; color: var(--body); }
.files { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 15px; color: var(--muted); }
.meta { font-family: var(--sans); font-size: 14px; color: #4B5750; }

.install { background: var(--panel); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 28px; }
.install .steps { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--body); }
.install .hint { font-size: 15px; line-height: 1.5; color: var(--muted); }
.code { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--anthracite); color: #EEF0F2; border-radius: 8px; padding: 14px 16px; font-family: var(--mono); font-size: 14px; line-height: 1.6; }
.code code { white-space: pre-wrap; word-break: break-all; }
.copy { flex: none; font-family: var(--sans); font-size: 14px; font-weight: 600; min-height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #FFFFFF; cursor: pointer; }
.copy:hover { background: rgba(255, 255, 255, 0.12); }
.copy:focus-visible { outline-color: var(--gold); }

/* Anleitung */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.how > div { display: flex; flex-direction: column; gap: 12px; }
.how .num { font-family: var(--sans); font-size: 56px; line-height: 1; font-weight: 500; color: var(--gold-deep); }
.how h3 { font-size: 24px; font-weight: 600; }
.how p { font-size: 17px; line-height: 1.55; color: var(--muted); }

/* Über mich */
.about { background: var(--green); }
.about-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 88px; }
.about-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(226, 176, 74, 0.35); }
.about h2 { font-size: 42px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.about p { font-size: 19px; line-height: 1.6; color: #D9E5DC; max-width: 34em; margin-top: 18px; }
.about-linkedin { margin-top: 24px; border-color: var(--gold); color: var(--gold); }
.about-linkedin:hover { background: rgba(226, 176, 74, 0.12); }
.about-linkedin:focus-visible { outline-color: var(--gold); }

.site-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; padding-bottom: 48px; font-family: var(--sans); font-size: 15px; color: #4B5750; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { color: #4B5750; min-height: 44px; display: flex; align-items: center; }

/* Rechtstexte */
.legal { max-width: 46em; padding-top: 48px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.legal h1 { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }
.legal h2 { font-size: 22px; font-weight: 600; margin-top: 12px; }
.legal p { font-size: 17px; line-height: 1.6; color: var(--body); }

@media (max-width: 960px) {
  .wrap { padding: 0 24px; }
  .site-header img { height: 44px; }
  .site-nav { gap: 16px; font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 32px; padding-bottom: 72px; }
  .hero h1 { font-size: 40px; }
  .code-card { padding: 20px; }
  .code-card pre { font-size: 14px; }
  .section { padding-bottom: 72px; }
  .section h2, .about h2, .legal h1 { font-size: 32px; }
  .library { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; padding: 24px; }
  .detail h3 { font-size: 30px; }
  .io { grid-template-columns: minmax(0, 1fr); }
  .how { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-top: 56px; padding-bottom: 56px; justify-items: center; text-align: center; }
  .about p { margin-left: auto; margin-right: auto; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }