/* Startseite xsarts.eu – Farben und Schriften wie die Driftwood-Seite */
:root {
  --bg: #0d0a07;
  --panel: #1d150d;
  --line: #5a4424;
  --gold: #ffd100;
  --gold-dim: #b8913f;
  --text: #e8dcc2;
  --muted: #a8977a;
  --ok: #3fbf5a;
  --amber: #f0a030;
  --display: "Trajan Pro", "Cinzel", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 8px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% -10%, #2a1d10 0%, var(--bg) 60%) no-repeat, var(--bg);
  color: var(--text); font: 17px/1.65 var(--body); -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
img { display: block; max-width: 100%; height: auto; }

.top { position: relative; padding: 22px 16px; text-align: center; }
.lang { position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.lang a { display: block; padding: 3px; border-radius: 3px; line-height: 0; opacity: .55; transition: opacity .15s; }
.lang a:hover, .lang a:focus-visible { opacity: 1; }
.lang a[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--gold-dim); }
.lang img { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.brand { color: var(--gold); font: 700 22px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; }

.wrap { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 56px; }
.intro { text-align: center; margin: 24px auto 44px; max-width: 46em; }
.kicker { margin: 0 0 12px; color: var(--gold-dim); font: 600 13px/1.2 var(--ui); letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0 0 16px; color: var(--gold); font: 700 clamp(36px, 6vw, 60px)/1.1 var(--display); letter-spacing: .03em; }
.lead { margin: 0; font-size: 19px; }

.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.product {
  display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.product:hover, a.product:focus-visible {
  transform: translateY(-4px); border-color: var(--gold-dim);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px var(--gold-dim);
}
a.product:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.art { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
a.product:hover .art img { transform: scale(1.04); }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--panel)); }
.body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 26px 26px; margin-top: -34px; position: relative; }
.badge { align-self: flex-start; font: 700 11px/1 var(--ui); padding: 6px 9px; border-radius: 3px; letter-spacing: .1em; text-transform: uppercase; }
.badge.live { background: rgba(63, 191, 90, .16); color: var(--ok); border: 1px solid rgba(63, 191, 90, .5); }
.badge.dev { background: rgba(240, 160, 48, .14); color: var(--amber); border: 1px solid rgba(240, 160, 48, .5); }
.name { margin-top: 8px; color: var(--gold); font: 700 34px/1.1 var(--display); letter-spacing: .05em; }
.tag { color: var(--gold-dim); font: 600 13px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.text { color: var(--muted); font-size: 16px; margin: 6px 0 14px; flex: 1; }
.cta {
  align-self: flex-start; padding: 12px 20px; border-radius: 4px;
  font: 700 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(#ffdf4d, #c99a00); color: #1a1205; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.soon .cta { background: transparent; color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.soon .art img { filter: saturate(.85); }

.foot { padding: 28px 16px 36px; border-top: 1px solid #2a1f12; text-align: center; color: var(--muted); font: 14px/1.6 var(--ui); }
.foot p { margin: 0 auto 8px; max-width: 60em; }
.foot a { color: var(--text); }
.legal { font-size: 12px; opacity: .8; }

@media (max-width: 760px) {
  .top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .lang { position: static; transform: none; }
  .products { grid-template-columns: 1fr; gap: 22px; }
  .intro { margin: 8px auto 30px; }
  .body { padding: 0 20px 22px; }
  .name { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .product, .art img { transition: none; }
  a.product:hover { transform: none; }
  a.product:hover .art img { transform: none; }
}