/* Evermaite – Basis-Styles (Quelle: visual-identity/styleguide.html) */

/* Schriften lokal (kein Laden von Google-Servern) */
/* Ersatzschrift auf die Laufweite von Instrument Serif skaliert, damit beim Nachladen nichts springt */
@font-face { font-family: 'Serif Ersatz'; font-style: normal; font-weight: 400; src: local('Georgia'), local('Noto Serif'); size-adjust: 77%; }
@font-face { font-family: 'Serif Ersatz'; font-style: italic; font-weight: 400; src: local('Georgia Italic'), local('Noto Serif Italic'); size-adjust: 83%; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-regular.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/inter-tight-var.woff2') format('woff2'); }

:root {
  --black: #0B0B0C;
  --white: #FAFAF8;
  --paper: #F3F2EE;
  --rubin: #C40C35;
  --rubin-hell: #E44A66;
  --rubin-dunkel: #A00A2B;
  --grey-600: #6B6B70;
  --grey-400: #8A8A8E;
  --serif: 'Instrument Serif', 'Serif Ersatz', Georgia, serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(112px, 16vw, 220px);
  /* ruhige, schwere Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- Farbthemen ----------
   Ohne JS färben sich die Abschnitte selbst. Mit JS übernimmt der body das Thema
   des Abschnitts in der Bildschirmmitte, so entsteht ein weicher Farbübergang. */
html:not(.js) [data-theme="dark"], body[data-theme="dark"] { --bg: var(--black); --fg: var(--white); --muted: var(--grey-400); --line: rgba(250,250,248,.14); --accent: var(--rubin-hell); background: var(--bg); color: var(--fg); }
html:not(.js) [data-theme="light"], body[data-theme="light"] { --bg: var(--paper); --fg: var(--black); --muted: var(--grey-600); --line: rgba(11,11,12,.14); --accent: var(--rubin); background: var(--bg); color: var(--fg); }
html:not(.js) [data-theme="graphite"], body[data-theme="graphite"] { --bg: #161618; --fg: var(--white); --muted: var(--grey-400); --line: rgba(250,250,248,.12); --accent: var(--rubin-hell); background: var(--bg); color: var(--fg); }
html:not(.js) [data-theme="rubin"], body[data-theme="rubin"] { --bg: var(--rubin); --fg: var(--white); --muted: rgba(250,250,248,.78); --line: rgba(250,250,248,.32); --accent: var(--black); background: var(--bg); color: var(--fg); }
body { transition: background-color 1s var(--ease-soft), color 1s var(--ease-soft); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
h1, h2, h3, blockquote { text-wrap: balance; }
p { text-wrap: pretty; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--white); color: var(--black); padding: 10px 14px; font-size: 14px; }
.skip:focus { top: 16px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }

/* ---------- Typografie ---------- */
.kicker { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.6vw, 23px); color: var(--muted); }
.kicker::before { content: '— '; }
.mega { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 11.5vw, 188px); line-height: .9; letter-spacing: -.02em; }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7.4vw, 112px); line-height: .96; letter-spacing: -.015em; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.2vw, 76px); line-height: 1; letter-spacing: -.01em; }
.statement { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.01em; }
.body-l { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: var(--muted); max-width: 34em; }
.small { font-size: 14px; color: var(--muted); }
.accent { color: var(--accent); }
em, .i { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- Pfeil-Links statt Standard-Buttons ---------- */
.arrow-link { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 500; text-decoration: none; padding: 6px 0; position: relative; transition: transform .25s var(--ease); }
.arrow-link::after { content: ''; position: absolute; left: 0; right: 46px; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .7s var(--ease); }
.arrow-link .ar { width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 15px; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.arrow-link:hover::after { transform: scaleX(0); transform-origin: right; }
.arrow-link:hover .ar { transform: translateX(4px); background: var(--fg); color: var(--bg); }
.arrow-link:active { transform: scale(.98); }
.arrow-link.big { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); gap: 22px; }
.arrow-link.big .ar { width: 56px; height: 56px; font-size: 22px; font-family: var(--sans); }
.arrow-link.big::after { right: 78px; }
.arrow-link.muted { color: var(--muted); }

/* ---------- Header: transparent, blendet beim Herunterscrollen aus ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 40; transition: transform .6s var(--ease), color 1s var(--ease-soft); color: var(--fg); }
.header.hide { transform: translateY(-100%); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.header .logo img { height: 24px; width: auto; }
.logo .on-light { display: none; }
body[data-theme="light"] .header .logo .on-dark { display: none; }
body[data-theme="light"] .header .logo .on-light { display: block; }
.header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.header.solid::before { opacity: .92; }
.nav { display: flex; align-items: center; gap: 40px; font-size: 15px; position: relative; }
.nav a { text-decoration: none; position: relative; padding: 4px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav .contact { display: inline-flex; gap: 10px; align-items: center; }
.nav .contact .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rubin); }
.menu-btn { display: none; background: none; border: 0; color: inherit; font: inherit; font-size: 15px; cursor: pointer; align-items: center; gap: 12px; position: relative; z-index: 2; }
.menu-btn .bars { width: 22px; height: 10px; position: relative; }
.menu-btn .bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn .bars span:first-child { top: 0; } .menu-btn .bars span:last-child { top: 8.5px; }
.menu-open .menu-btn .bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-open .menu-btn .bars span:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Vollbild-Menü (mobil) */
.overlay { position: fixed; inset: 0; z-index: 35; background: var(--black); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--gutter) 48px; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.overlay nav { display: flex; flex-direction: column; }
.overlay nav a { font-family: var(--serif); font-size: clamp(48px, 13vw, 72px); line-height: 1.1; text-decoration: none; overflow: hidden; border-bottom: 1px solid rgba(250,250,248,.12); padding: 6px 0; }
.overlay nav a span { display: block; transform: translateY(105%); transition: transform .8s var(--ease); }
.overlay .meta { margin-top: 40px; font-size: 14px; color: var(--grey-400); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.menu-open .overlay { opacity: 1; pointer-events: auto; }
.menu-open .overlay nav a span { transform: none; }
.menu-open .overlay nav a:nth-child(2) span { transition-delay: .06s; }
.menu-open .overlay nav a:nth-child(3) span { transition-delay: .12s; }
.menu-open .overlay nav a:nth-child(4) span { transition-delay: .18s; }
.menu-open .header { color: var(--white); transform: none; }
.menu-open .header::before { opacity: 0; }
.menu-open .header .logo .on-dark { display: block !important; }
.menu-open .header .logo .on-light { display: none !important; }
@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- Filmkorn (nur auf dunklen Flächen sichtbar) ---------- */
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body[data-theme="dark"] .grain, body[data-theme="graphite"] .grain { opacity: .05; }

/* ---------- Platzhalter für Fotos (Entwurf) ---------- */
.ph { position: relative; background: linear-gradient(160deg, #1B1B1E, #0D0D0F 70%); overflow: hidden; display: flex; align-items: flex-end; padding: 20px; color: var(--grey-400); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(196,12,53,.10), transparent 55%); }
.ph span { position: relative; border-left: 2px solid var(--rubin); padding-left: 10px; }
.ph.light { background: linear-gradient(160deg, #E7E6E1, #DAD9D3); color: var(--grey-600); }
.ph.light::before { background: none; }

/* ---------- Einblenden beim Scrollen ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }
/* Headlines zeilenweise aus einer Maske */
/* Innenabstand oben/unten, damit Unterlängen (g, p) und Umlaute nicht von der Maske abgeschnitten werden */
.lines .ln { display: block; overflow: hidden; padding: .1em 0 .22em; margin: -.1em 0 -.22em; }
.lines .ln > span { display: block; transform: translateY(108%); transition: transform 1s var(--ease); }
.lines .ln:nth-child(2) > span { transition-delay: .09s; }
.lines .ln:nth-child(3) > span { transition-delay: .18s; }
.lines .ln:nth-child(4) > span { transition-delay: .27s; }
.lines.in .ln > span { transform: none; }
html:not(.js) .reveal, html:not(.js) .lines .ln > span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .lines .ln > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  body, .header, .grain { transition: none !important; }
}

/* ---------- Footer ---------- */
.footer { padding: 96px 0 40px; position: relative; z-index: 1; background: var(--black); color: var(--white); --fg: var(--white); --bg: var(--black); --muted: var(--grey-400); --line: rgba(250,250,248,.14); }
.footer .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.footer .top img { height: 26px; width: auto; }
.footer .links { display: flex; gap: 32px; flex-wrap: wrap; font-size: 15px; }
.footer a { text-decoration: none; color: var(--muted); transition: color .3s; } .footer a:hover { color: var(--fg); }
.footer .bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-size: 13px; color: var(--muted); }

/* ---------- Entwurfs-Hinweis ---------- */
.draft-badge { position: fixed; right: 16px; bottom: 16px; z-index: 45; background: var(--black); color: var(--white); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 11px; border: 1px solid rgba(250,250,248,.14); }
.draft-badge b { color: var(--rubin-hell); font-weight: 600; }
@media (max-width: 640px) { .draft-badge { display: none; } }