/* fonts/fonts.css */
/* Lokal gehostete Schriften (Archivo, Instrument Serif) – keine Verbindung zu Google-Servern */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/archivo-italic-latin-ext.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/archivo-italic-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/archivo-normal-latin-ext.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/archivo-normal-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/instrument-serif-italic-latin.woff2) format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/instrument-serif-normal-latin.woff2) format('woff2');
  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;
}


/* Inter (Test als Hauptschrift) – lokal */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/inter-italic-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/inter-italic-latin.woff2) format('woff2');
  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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/inter-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/_ds/nenalisi-design-system-b0a526f2-25c8-4424-b197-cab6ef80f993/fonts/inter-latin.woff2) format('woff2');
  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;
}

/* tokens/colors.css */
/* nenalisi — Farben. Light ist Standard, Dark über [data-theme="dark"] */
:root {
  /* Akzent: Rost */
  --nl-rost-50: #FBEAE5;
  --nl-rost-100: #F7E7E2;
  --nl-rost-200: #F2C9BE;
  --nl-rost-300: #F5A48C;
  --nl-rost-400: #E26A4A;
  --nl-rost-500: #A23018;
  --nl-rost-600: #872613;
  --nl-rost-700: #8A2814;
  /* Neutrale */
  --nl-cream: #FAF6F3;
  --nl-white: #FFFFFF;
  --nl-sand-100: #EFE6E1;
  --nl-sand-200: #EFE3DC;
  --nl-sand-300: #E6D3C8;
  --nl-anthrazit: #343434;
  --nl-anthrazit-900: #1B1918;
  --nl-grey-700: #4A4543;
  --nl-grey-500: #6E6865;

  /* Semantik */
  --bg: var(--nl-cream);
  --surface: var(--nl-white);
  --ink: var(--nl-anthrazit);
  --muted: var(--nl-grey-700);
  --muted2: var(--nl-grey-500);
  --blush: var(--nl-rost-100);
  --tint: var(--nl-rost-50);
  --ph: var(--nl-sand-100);
  --stack1: var(--nl-sand-200);
  --stack2: var(--nl-sand-300);
  --block: var(--nl-anthrazit);
  --line: rgba(52,52,52,0.26);
  --line-strong: rgba(52,52,52,0.40);
  --glass: rgba(255,255,255,0.80);

  --accent: var(--nl-rost-500);
  --accent-h: var(--nl-rost-600);
  --accent-soft: var(--nl-rost-400);
  --accent-deep: var(--nl-rost-700);
  --accent-rgb: 162,48,24; /* @kind other */
  --on-accent: #FFFFFF;
  --sel: var(--nl-rost-200);

  --btn: var(--nl-anthrazit);
  --btn-h: #1E1E1E;
  --btn-ink: #FFFFFF;
}

[data-theme="dark"] {
  --bg: #1B1918;
  --surface: #242120;
  --ink: #F4EDE9;
  --muted: #CFC5C0;
  --muted2: #A99E99;
  --blush: #2A201E;
  --tint: rgba(226,106,74,0.14);
  --ph: #2F2B29;
  --stack1: #2C2826;
  --stack2: #3A2B27;
  --block: #121010;
  --line: rgba(255,255,255,0.24);
  --line-strong: rgba(255,255,255,0.38);
  --glass: rgba(36,33,32,0.78);

  --accent: #E26A4A;
  --accent-h: #EC7C5E;
  --accent-soft: #F5A48C;
  --accent-deep: #F08A6E;
  --accent-rgb: 226,106,74; /* @kind other */
  --on-accent: #1B1918;
  --sel: #6B2A1C;

  --btn: #F4EDE9;
  --btn-h: #FFFFFF;
  --btn-ink: #1B1918;
}

/* tokens/typography.css */
:root {
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  --fs-hero: clamp(58px, max(8.6vw, 15vw - 60px), 156px); /* @kind font */
  --fs-h1: clamp(50px, 6.4vw, 112px); /* @kind font */
  --fs-h2: clamp(40px, 5.6vw, 96px); /* @kind font */
  --fs-h3: clamp(32px, 3.8vw, 60px); /* @kind font */
  --fs-h4: clamp(26px, 2.4vw, 40px); /* @kind font */
  --fs-lead: clamp(19px, 1.6vw, 23px); /* @kind font */
  --fs-body: 17px; /* @kind font */
  --fs-small: 14px; /* @kind font */
  --fs-meta: 13px; /* @kind font */
  --fs-eyebrow: 12px; /* @kind font */

  --lh-display: 0.95; /* @kind font */
  --lh-heading: 1.05; /* @kind font */
  --lh-body: 1.65; /* @kind font */
  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.02em; /* @kind font */
  --ls-eyebrow: 0.18em; /* @kind font */
}

/* tokens/spacing.css */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-section: clamp(96px, 12vw, 176px);
  --space-gutter: clamp(20px, 5vw, 72px);
  --container: 1400px;

  --radius-pill: 999px;
  --radius-sm: 16px;
  --radius-md: 28px;
  --radius-lg: 36px;
  --radius-xl: 48px;
  --radius-arch: 999px 999px 36px 36px;

  --shadow-sm: 0 14px 30px -18px rgba(52,52,52,0.35);
  --shadow-md: 0 24px 50px -20px rgba(0,0,0,0.40);
  --shadow-lg: 0 60px 120px -50px rgba(0,0,0,0.60);
  --shadow-accent: 0 18px 40px -14px rgba(var(--accent-rgb),0.75);

  --ease-out: cubic-bezier(.16,.84,.24,1); /* @kind other */
  --ease-hover: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --dur-fast: .3s; /* @kind other */
  --dur-base: .6s; /* @kind other */
  --dur-slow: 1.1s; /* @kind other */
  --blur-glass: 14px;
}

/* tokens/components.css */
/* nenalisi — Komponenten-Klassen (für statisches HTML; die React-Komponenten nutzen dieselben Klassen) */
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.nl-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; }
.nl-display em, .nl-em { font-style: italic; color: var(--accent); }
.nl-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--fs-eyebrow)/1 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-deep); }
.nl-eyebrow--pill { padding: 8px 16px; border-radius: var(--radius-pill); background: var(--tint); }
.nl-eyebrow--glass { padding: 8px 16px 8px 10px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--line); color: var(--ink); font-weight: 600; letter-spacing: .16em; }
.nl-eyebrow--glass::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--accent) 3.5px); }
.nl-wordmark { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--ink); }
.nl-wordmark::after { content: "."; color: var(--accent); }

.nl-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 8px 8px 26px; border: 0; border-radius: var(--radius-pill); font: 600 15px/1.2 var(--font-body); cursor: pointer; text-decoration: none; transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-hover); }
.nl-btn__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; }
.nl-btn--dark { background: var(--btn); color: var(--btn-ink); }
.nl-btn--dark .nl-btn__icon { background: var(--accent); color: var(--on-accent); }
.nl-btn--dark:hover { background: var(--btn-h); box-shadow: 0 18px 40px -14px rgba(0,0,0,.5); }
.nl-btn--accent { background: #BF4B2C; color: #fff; }
.nl-btn--accent .nl-btn__icon { background: var(--btn); color: var(--btn-ink); }
.nl-btn--accent:hover { background: #A63F23; box-shadow: var(--shadow-accent); }
.nl-btn--light { background: #fff; color: #1B1918; }
.nl-btn--light .nl-btn__icon { background: var(--accent); color: var(--on-accent); }
.nl-btn--light:hover { box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); }
.nl-btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); padding: 14px 20px; }
.nl-btn--ghost:hover { border-color: var(--ink); }
.nl-btn:active { transform: scale(.97); }
.nl-btn[disabled] { opacity: .45; pointer-events: none; }

.nl-iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.nl-iconbtn:hover { background: var(--ink); color: var(--bg); transform: scale(1.06); }
.nl-iconbtn--glass { border-color: rgba(255,255,255,.35); background: rgba(0,0,0,.32); color: #fff; backdrop-filter: blur(10px); }

.nl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 14px/1.2 var(--font-body); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-hover); }
.nl-chip:hover { border-color: var(--accent); transform: translateY(-2px); }
.nl-chip[aria-pressed="true"], .nl-chip--on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nl-chip__check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.nl-tag { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font: 500 14px/1 var(--font-body); color: var(--ink); }

.nl-field { display: flex; flex-direction: column; gap: 8px; }
.nl-field__label { display: flex; justify-content: space-between; gap: 10px; font: 700 13px/1.2 var(--font-body); letter-spacing: .04em; color: var(--ink); }
.nl-field__hint { font-weight: 500; color: var(--muted2); }
.nl-input { width: 100%; box-sizing: border-box; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 400 16px/1.4 var(--font-body); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.nl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.16); background: var(--surface); }
textarea.nl-input { min-height: 130px; resize: vertical; line-height: 1.5; }

.nl-switch { flex: none; position: relative; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background .35s; }
.nl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .35s var(--ease-out); }
.nl-switch[aria-checked="true"] { background: var(--accent); }
.nl-switch[aria-checked="true"]::after { transform: translateX(18px); }

.nl-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); }
.nl-seg__opt { position: relative; z-index: 1; border: 0; background: transparent; padding: 14px 10px; border-radius: var(--radius-pill); font: 600 14px/1 var(--font-body); color: var(--ink); cursor: pointer; transition: color .4s, background .4s; }
.nl-seg__opt[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }

.nl-card { padding: clamp(28px,3vw,36px); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: transform .45s var(--ease-out), box-shadow .45s; }
.nl-card--dark { background: var(--block); color: #fff; border-color: transparent; }
.nl-card--accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.nl-card--sand { background: var(--stack1); }
.nl-card--hover:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(52,52,52,.45); }
.nl-card__kicker { font: 700 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted2); }
.nl-card--dark .nl-card__kicker { color: var(--accent-soft); }
.nl-card__title { margin: 0; font: 400 clamp(28px,2.6vw,40px)/1.08 var(--font-serif); letter-spacing: -0.02em; }
.nl-card__body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.nl-card--dark .nl-card__body { color: rgba(255,255,255,.85); }
.nl-stat { font: 400 clamp(84px,9vw,136px)/.85 var(--font-serif); letter-spacing: -0.03em; }
.nl-stat sup, .nl-stat .nl-em { vertical-align: baseline; font-size: 1em; }

.nl-arch { border-radius: var(--radius-arch); overflow: hidden; background: var(--ph); }
.nl-pill-media { display: inline-block; position: relative; width: 1.75em; height: .74em; border-radius: var(--radius-pill); overflow: hidden; vertical-align: middle; background: var(--ph); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); }
.nl-pill-media > video, .nl-pill-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nl-highlight { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 500 12px/1 var(--font-body); color: var(--ink); background: none; border: 0; cursor: pointer; }
.nl-highlight__ring { display: block; padding: 3px; border-radius: 50%; background: var(--line); }
.nl-highlight--on .nl-highlight__ring { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); }
.nl-highlight--on { font-weight: 700; }
.nl-highlight__img { display: block; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--bg); object-fit: cover; background: var(--ph); }