/* Startseite artfluvia.com – ohne Frameworks, eine Schrift (Cormorant Garamond, OFL), mobil zuerst */
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/cg-500.ttf') format('truetype');
}
:root {
  --bg: #14110d;
  --bg-2: #1c1813;
  --line: #3a3127;
  --text: #f2ece1;
  --muted: #c8bca9;
  --accent: #e3b350;
  --accent-ink: #1b1407;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wrap: 1120px;
  --gut: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: #f0c870; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 8px; background: var(--bg-2); padding: 8px 12px; z-index: 2; }

/* Kopf */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 500 26px/1 var(--serif); letter-spacing: 0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.top nav a { color: var(--muted); font-size: 15px; text-decoration: none; padding: 8px 4px; }
.top nav a:hover { color: var(--text); }

/* Hero */
.kicker { margin: 0 0 14px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: clamp(40px, 10vw, 76px); max-width: 15ch; }
h2 { font-size: clamp(32px, 7vw, 48px); max-width: 22ch; }
h3 { font-size: 25px; line-height: 1.15; }
.lead { margin: 18px 0 0; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.55; color: var(--muted); max-width: 36em; }
.lead strong { color: var(--text); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 17px/1 var(--sans); text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #f0c870; color: var(--accent-ink); }
.btn-ghost { border: 1px solid #6b5d4b; color: var(--text); }
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.fine { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.shot { margin: 32px auto 0; max-width: 1280px; padding: 0 var(--gut); }
.shot picture, .shot img { border-radius: 14px; }
.shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 50%;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.shot figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; text-align: center; }
.facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 26px auto 0; padding: 0 var(--gut); color: var(--muted); font-size: 15px; }
.facts b { color: var(--text); font-weight: 600; }

/* Abschnitte */
section.wrap { margin-top: 88px; }
.intro { margin: 18px 0 0; color: var(--muted); font-size: 19px; max-width: 34em; }
.split { display: grid; gap: 40px; margin-top: 40px; }
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.features li { padding: 18px 0; border-top: 1px solid var(--line); }
.features li:last-child { border-bottom: 1px solid var(--line); }
.features h3 { font-size: 23px; }
.features p { margin: 6px 0 0; color: var(--muted); }
.phones { display: flex; gap: 14px; justify-content: center; align-items: flex-start; order: -1; }
.phones img { width: 100%; max-width: 250px; border-radius: 26px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.phones picture:nth-child(2) img { margin-top: 36px; }
.free { margin: 32px 0 0; padding: 20px 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.free strong { color: var(--text); }

.letter { max-width: 40em; }
.letter p { margin: 18px 0 0; font-size: 19px; }
.letter .sig { color: var(--muted); font-family: var(--serif); font-size: 23px; }

.cards { display: grid; gap: 16px; margin-top: 36px; }
.card { padding: 24px 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; }
.card p { margin: 10px 0 0; color: var(--muted); }
.poster { margin: 24px 0 0; color: var(--muted); }

.end { text-align: center; padding-bottom: 20px; }
.end h2 { margin: 0 auto; }
.end .cta { justify-content: center; }

/* Fuß */
footer { margin-top: 96px; padding: 36px 0 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer p { margin: 0 0 12px; max-width: 46em; }
.links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; padding: 0; }
.links a { color: var(--text); }

@media (min-width: 720px) {
  :root { --gut: 32px; }
  .shot img { aspect-ratio: auto; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .features { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .features li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .split { grid-template-columns: 1fr 340px; align-items: start; gap: 56px; }
  .phones { position: sticky; top: 32px; order: 0; }
  .phones img { max-width: 160px; }
}
/* Hero (6.11.2026, Florian: „Titel dreizeilig, verschenkt Platz“): Marke klein, Titel höchstens zwei Zeilen, ein Satz,
   zwei Knöpfe (zuerst die Karte im Browser); das Kartenbild rückt mit dunklem Verlauf unter den Text, nicht umgekehrt.
   iPhone 375 × 812: alles ohne Scrollen, dazu der obere Teil der Karte als Einladung. Desktop: Text links, Karte rechts. */
.hero { position: relative; max-width: 1280px; margin: 0 auto; padding: 2px var(--gut) 0; }
.hero-text { position: relative; z-index: 2; }
.hero .kicker { margin: 0 0 8px; }
.hero h1 { font-size: clamp(32px, 9.6vw, 46px); line-height: 1.04; max-width: none; text-wrap: balance; }
.hero .lead { margin: 10px 0 0; font-size: 17px; line-height: 1.45; max-width: 32em; text-wrap: pretty; }
.hero .cta { margin-top: 18px; flex-direction: column; align-items: stretch; gap: 10px; }
.hero .shot { position: relative; z-index: 1; margin: -26px calc(-1 * var(--gut)) 0; padding: 0; max-width: none; }
.hero .shot::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 26%; pointer-events: none;
  background: linear-gradient(var(--bg) 0%, rgba(20, 17, 13, 0.7) 40%, rgba(20, 17, 13, 0)); }
.hero .shot picture, .hero .shot img { border-radius: 0; }
.hero .shot img { box-shadow: none; aspect-ratio: 1 / 1; object-position: 42% 55%; }
.hero .shot figcaption { padding: 0 var(--gut); }
.fine.center { text-align: center; margin-top: 18px; }
/* Handy hochkant (6.11.2026, Florian: „wirkt gestaucht und zu kurz“): statt des quer liegenden Apple-TV-Bilds, auf ein
   Quadrat beschnitten, ein Hochformat der Karte (1700–1950 senkrecht wie in der App, eigene Bilder karte-hoch-*). Es behält
   sein Seitenverhältnis und ist höchstens so hoch wie der kleine sichtbare Bereich (svh, Safari mit Leisten), läuft also
   unten aus dem ersten Bildschirm hinaus und füllt nach dem ersten Wischen die ganze Höhe. */
/* Handy hochkant, 6.11.2026 (Florian: „warum repliziert die Homepage nicht das Verhalten der App?“): der Hero ist der
   Startblick der iPhone-App – die Karte liegt quer, die Ströme nutzen die ganze Höhe, die Zeit läuft nach rechts und man
   wischt durch 40.000 Jahre (Bild karte-strip-*, 4 Bildschirmbreiten, aus der Web-Karte gerendert). Hinweis „← wischen →“
   nickt dreimal und verschwindet beim ersten Wischen; Reduce Motion: ohne Nicken. */
.strip-wrap, .strip-cap { display: none; }
@media (max-width: 719px) and (orientation: portrait) {
  .hero .shot::before { height: 96px; }
  .hero .shot > picture, .hero .shot .wide-cap { display: none; }
  .hero .shot .strip-wrap { display: block; position: relative; }
  .hero .shot .strip { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; height: min(500px, calc(100svh - 96px)); outline: none; }
  .hero .shot .strip::-webkit-scrollbar { display: none; }
  .hero .shot .strip picture { display: block; height: 100%; width: max-content; }
  .hero .shot .strip img { display: block; height: 100%; width: auto; max-width: none; max-height: none; aspect-ratio: 3000 / 992; object-fit: fill; border-radius: 0; box-shadow: none; }
  .hero .shot .strip-hint { position: absolute; right: 14px; top: 42%; z-index: 2; padding: 7px 13px; border-radius: 999px; background: rgba(20, 17, 13, 0.82); color: #f3e9d6; font-size: 13px; letter-spacing: 0.04em; pointer-events: none; animation: strip-nudge 1.6s ease-in-out 3; transition: opacity 0.4s; }
  .hero .shot .strip-wrap.scrolled .strip-hint { opacity: 0; }
  .hero .shot .strip-cap { display: block; }
  @keyframes strip-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
  @media (prefers-reduced-motion: reduce) { .hero .shot .strip-hint { animation: none; } }
}
@media (min-width: 720px) {
  .hero h1 { font-size: clamp(40px, 6vw, 54px); }
  .hero .cta { flex-direction: row; align-items: center; }
  .hero .shot { margin-top: -20px; }
  .hero .shot img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1000px) {
  .hero { max-width: var(--wrap); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 0 36px; align-items: center; padding-top: 18px; }
  .hero h1 { font-size: clamp(40px, 3.5vw, 50px); }
  .hero .lead { font-size: 19px; }
  .hero .cta { flex-wrap: nowrap; }
  .hero .cta .btn { padding: 0 20px; white-space: nowrap; }
  .hero .shot { margin: 0 0 0 -90px; }
  .hero .shot::before { right: auto; bottom: 0; width: 34%; height: auto; background: linear-gradient(90deg, var(--bg) 0%, rgba(20, 17, 13, 0.6) 45%, rgba(20, 17, 13, 0)); }
  .hero .shot img { aspect-ratio: 4 / 3; border-radius: 0 14px 14px 0; object-position: 30% 50%; max-height: calc(100vh - 140px); }
  .hero .shot figcaption { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Adventkalender-Hinweis und „Mehr von uns“ */
.advent { margin: 32px 0 0; padding: 20px 22px; border: 1px solid #6b5520; border-radius: 12px; background: linear-gradient(135deg, #2a2112, var(--bg-2)); color: var(--muted); }
.advent strong { color: var(--text); }
.apps { display: grid; gap: 16px; margin-top: 36px; }
.apps .card { display: flex; flex-direction: column; }
.apps .card p { flex: 1; }
.more { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; }
.all { margin: 24px 0 0; }
section.wrap.sub { margin-top: 32px; }
@media (min-width: 720px) { .apps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .apps { grid-template-columns: repeat(4, 1fr); } }

/* Werk des Tages (/heute/, /en/today/) */
.top nav { display: flex; gap: 14px; }
.today-teaser { margin: 8px 0 0; font-size: 15px; }
.work { padding-top: 16px; max-width: 880px; }
.work .kicker { margin-bottom: 10px; }
.work h1 { font-size: clamp(36px, 8vw, 60px); max-width: 22ch; }
.work .meta { margin: 12px 0 0; color: var(--muted); font-size: 17px; }
.work .meta .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.art { margin: 28px 0 0; }
.art .frame { background: #0d0b08; border-radius: 12px; overflow: hidden; display: flex; justify-content: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.art img { width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
.art figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.art figcaption a { color: var(--muted); }
.jubilee { margin: 24px 0 0; color: var(--accent); font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.context { margin: 20px 0 0; padding: 0; list-style: none; font-size: 19px; }
.context li { padding: 8px 0; border-top: 1px solid var(--line); }
.context li:last-child { border-bottom: 1px solid var(--line); }
.next { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.nojs { margin: 24px 0 0; padding: 20px 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }

/* Sprachmenü (sechs Sprachen) und Japanisch */
.top nav { align-items: center; }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; font-size: 11px; }
.langs[open] summary, .langs summary:hover { color: var(--text); border-color: #6b5d4b; }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 150px; margin: 0; padding: 6px; list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); }
.langs li a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 16px; }
.langs li a:hover, .langs li a[aria-current] { background: #2a2219; }
.langlist { margin-top: 10px; }
.langlist a[aria-current] { color: var(--muted); text-decoration: none; }
:lang(ja) { --serif: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif; --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, 'Noto Sans JP', system-ui, sans-serif; }
:lang(ja) body, body:lang(ja) { line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0.02em; line-height: 1.3; font-weight: 600; }
:lang(ja) h1 { font-size: clamp(32px, 8vw, 60px); max-width: 16em; }
:lang(ja) h2 { max-width: 18em; }
:lang(ja) .kicker { letter-spacing: 0.08em; }
/* Japanisch: breitere Zeichen – Titel bleibt zweizeilig (Phrasen: 美術史のすべてを / 一枚の地図に) */
:lang(ja) .hero h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.25; }