/* domquichotte.ai — Basis: Tokens, Typografie, Navigation, Kontakt, Footer */

:root {
  --ink: #0b0b0c;
  --ink-2: #141416;
  --ink-3: #1d1d20;
  --line: #2b2b30;
  --bone: #f2efe9;
  --mute: #8e8a84;
  --lumen: #e2ff4f;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --gutter: clamp(16px, 3.33vw, 48px);
  --nav-h: 88px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* Platz für die Scrollleiste immer reservieren — sonst springt die Kopfzeile zwischen Seiten mit und ohne Scrollen */

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 1.5px solid var(--lumen); outline-offset: 3px; }

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

/* Typo-Bausteine */
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.label--lumen { color: var(--lumen); }
.label--mute { color: var(--mute); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.02em;
  margin: 0;
}
.display em { font-style: italic; }

.lead { color: var(--mute); font-size: 17px; line-height: 1.55; margin: 0; }

.link-serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.2vw, 32px);
  border-bottom: 1px solid var(--lumen);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease);
}
.link-serif:hover { color: var(--lumen); }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--ink);
}
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__img { display: block; height: 15px; width: auto; }
.footer .logo__img { height: 14px; }
.logo__word { font-family: var(--serif); font-style: italic; font-size: 26px; letter-spacing: -0.01em; }
.logo__ai {
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  color: var(--ink); background: var(--lumen);
  border-radius: 20px; padding: 2px 8px 3px;
}
.nav__links { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.nav__links a { transition: color 0.3s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--lumen); }
/* „New“-Badge im Menü (AI Studio) */
.nav__new { display: inline-block; margin-left: 6px; padding: 2px 6px 3px; border-radius: 10px; background: var(--lumen); color: var(--ink);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; vertical-align: 3px; }
.nav__meta { display: flex; gap: 24px; font-family: var(--mono); font-size: 13px; color: var(--mute); }
.nav__menu { display: none; }
/* Sprachumschalter EN / DE */
.lang { display: inline-flex; gap: 2px; font-family: var(--mono); font-size: 12px; }
.lang a { padding: 3px 7px; border-radius: 20px; color: var(--mute); transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.lang a:hover { color: var(--fg); }
.lang a[aria-current="true"] { background: var(--bone); color: var(--ink); }
/* Wechsel: die Pille teilt sich (Goo-Filter aus i18n.js), die Schrift tauscht die Farbe mit */
.lang { position: relative; isolation: isolate; }
.lang a { position: relative; z-index: 1; }
.lang__goo { position: absolute; inset: -4px; padding: 4px; z-index: 0; filter: url(#lang-goo); pointer-events: none; }
.lang__goo i { position: absolute; margin: 4px; border-radius: 20px; background: var(--bone); transform-origin: center; }
.lang.is-switching a[aria-current="true"] { background: transparent; color: var(--mute); transition: color 0.25s 0.15s; }
.lang.is-switching a.is-target { color: var(--ink); transition: color 0.2s 0.3s; }
.lang.is-landed a[aria-current="true"] { animation: lang-land 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes lang-land { 0% { transform: scale(1.3, 0.75); } 45% { transform: scale(0.9, 1.12); } 75% { transform: scale(1.04, 0.97); } 100% { transform: none; } }

@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .logo__img { height: 12px; }
  .logo__word { font-size: 20px; }
  .logo__ai { font-size: 10px; }
  .nav__links { display: none; }
  .nav__meta { margin-left: auto; margin-right: 20px; }
  .nav__meta > a { display: none; }
  .nav__menu { display: grid; gap: 5px; width: 24px; padding: 8px 0; }
  .nav__menu span { height: 1.5px; background: var(--bone); }
  .nav[data-open] .nav__links {
    display: flex; flex-direction: column; gap: 20px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    padding: 24px var(--gutter) 32px; background: var(--ink);
    border-bottom: 1px solid var(--line);
    font-family: var(--serif); font-size: 32px;
  }
}

/* Kontakt */
.contact {
  background: var(--lumen); color: var(--ink);
  padding: clamp(56px, 11vw, 160px) var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center;
}
.contact .display { font-size: clamp(44px, 8.3vw, 120px); line-height: 0.9; }
.contact__mail {
  background: var(--ink); color: var(--bone);
  border-radius: 100px; padding: 18px 32px; font-weight: 500; font-size: 17px;
  transition: transform 0.4s var(--ease);
}
.contact__mail:hover { transform: translateY(-2px); }

/* Footer */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 40px var(--gutter);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--mute);
}
.footer nav { display: flex; gap: 32px; flex-wrap: wrap; }
.footer a:hover { color: var(--bone); }
.footer .logo__word { font-size: 22px; color: var(--bone); }

@media (max-width: 860px) {
  .contact { align-items: flex-start; text-align: left; }
  .footer { flex-direction: column; align-items: flex-start; }
  .footer nav { gap: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Logo-Hover „Scan“ (logo-scan.js): ein Lime-Strich läuft durch den Schriftzug, die Buchstaben leuchten kurz lime nach */
@property --scan { syntax: "<percentage>"; inherits: true; initial-value: -2%; }
.logo { position: relative; }
.logo::before, .logo::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.logo::before { inset: 0; background: linear-gradient(90deg, transparent calc(var(--scan) - 28%), var(--lumen) var(--scan), transparent calc(var(--scan) + 0.5%));
  -webkit-mask: url("../img/logo.svg") left center / 100% auto no-repeat; mask: url("../img/logo.svg") left center / 100% auto no-repeat; }
.logo::after { left: var(--scan); top: -7px; bottom: -7px; width: 2px; margin-left: -1px; background: var(--lumen); }
.logo.is-scan { animation: logo-scan .95s cubic-bezier(.45, 0, .25, 1); }
.logo.is-scan::before { opacity: 1; }
.logo.is-scan::after { animation: logo-scan-bar .95s linear; }
@keyframes logo-scan { from { --scan: -2%; } 72% { --scan: 101%; } to { --scan: 130%; } }
@keyframes logo-scan-bar { from { opacity: 0; } 6%, 64% { opacity: 1; } 74%, to { opacity: 0; } }