/*
  www.axeptdesign.com — eine Seite, die die Apps ausstellt.

  Haltung: ein ruhiger, neutraler Rahmen. Farbe kommt nur aus den Apps selbst (Symbol und
  ein zarter Schimmer auf der Bühne jeder Karte), damit die Seite zu allen App-Seiten und
  zu axeptdesign.de passt. Keine Web-Fonts, keine fremden Server: Systemschrift.

  Hell und dunkel: Ohne Wahl ist die Seite dunkel (Entscheidung Rupert, 05.10.2026), auch
  ohne Skript. Hell nur nach ausdrücklicher Wahl über den Knopf (`data-theme="light"` auf
  <html>, gesetzt von site.js). Die dunklen Farben stehen zweimal unten: für „keine Wahl“
  und für die ausdrückliche Wahl „dunkel“.
*/

:root {
  --grund: #f6f5f2;
  --flaeche: #ffffff;
  --flaeche-2: #efeee9;
  --linie: rgba(17, 17, 17, .09);
  --linie-2: rgba(17, 17, 17, .16);
  --text: #111111;
  --leise: #6b6963;
  --sehr-leise: #8f8c85;
  --glas: rgba(246, 245, 242, .72);
  --schatten-farbe: 20, 18, 14;
  --buehne-grund: #18181b;
  --buehne-linie: rgba(255, 255, 255, .07);
  --buehne-boden: 0, 0, 0;
  --buehne-staerke: 34%;
  --buehne-staerke-2: 24%;
  --symbol-rand: rgba(20, 18, 14, .12);

  --wrap: 1200px;
  --rand: clamp(16px, 5vw, 64px);
  --rund: 28px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --weich: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

:root:not([data-theme="light"]) {
  --grund: #0e0e10;
  --flaeche: #161618;
  --flaeche-2: #1c1c1f;
  --linie: rgba(255, 255, 255, .08);
  --linie-2: rgba(255, 255, 255, .16);
  --text: #f2f2f0;
  --leise: #9d9b95;
  --sehr-leise: #77756f;
  --glas: rgba(14, 14, 16, .7);
  --schatten-farbe: 0, 0, 0;
  --buehne-grund: #edece7;
  --buehne-linie: rgba(0, 0, 0, .07);
  --buehne-boden: 40, 36, 30;
  --buehne-staerke: 26%;
  --buehne-staerke-2: 18%;
  --symbol-rand: rgba(255, 255, 255, .16);
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --grund: #0e0e10;
  --flaeche: #161618;
  --flaeche-2: #1c1c1f;
  --linie: rgba(255, 255, 255, .08);
  --linie-2: rgba(255, 255, 255, .16);
  --text: #f2f2f0;
  --leise: #9d9b95;
  --sehr-leise: #77756f;
  --glas: rgba(14, 14, 16, .7);
  --schatten-farbe: 0, 0, 0;
  --buehne-grund: #edece7;
  --buehne-linie: rgba(0, 0, 0, .07);
  --buehne-boden: 40, 36, 30;
  --buehne-staerke: 26%;
  --buehne-staerke-2: 18%;
  --symbol-rand: rgba(255, 255, 255, .16);
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
:lang(ja) body, :lang(ja) { --sans: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif; }
:lang(zh-Hans) { --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:lang(ko) { --sans: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 8px;
}
::selection { background: color-mix(in srgb, var(--text) 14%, transparent); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--rand)); margin-inline: auto; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--text); color: var(--grund); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Kopfleiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--weich), border-color .3s var(--weich);
}
.kopf.gerollt {
  background: var(--glas);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--linie);
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.kopf-marke { display: inline-flex; padding: 8px 0; color: var(--text); }
.kopf-logo { height: 22px; width: auto; }
.kopf-werkzeuge { display: flex; align-items: center; gap: 8px; }

.kopf-werkzeuge summary, .thema {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--linie-2); border-radius: 999px;
  background: transparent; color: var(--text);
  font: 600 12.5px/1 var(--sans); letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.kopf-werkzeuge summary:hover, .thema:hover { background: var(--flaeche); border-color: var(--linie-2); }
.kopf-werkzeuge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.thema { width: 36px; padding: 0; justify-content: center; }
.thema[hidden] { display: none; }
.thema-mond { fill: currentColor !important; stroke: none !important; }
.thema[data-zeigt="dark"] .thema-mond, .thema[data-zeigt="light"] .thema-sonne { display: none; }

.sprachwahl { position: relative; }
.sprachwahl summary { list-style: none; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl ul {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 190px; margin: 0; padding: 6px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(var(--schatten-farbe), .06), 0 18px 48px -12px rgba(var(--schatten-farbe), .28);
}
.sprachwahl a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px;
  text-decoration: none; font-size: 15px; color: var(--text);
}
.sprachwahl a:hover { background: var(--flaeche-2); }
.sprachwahl a[aria-current]::after { content: "✓"; color: var(--leise); font-size: 13px; }

/* ---------- Kopf der Seite ---------- */

.held { padding: clamp(56px, 10vw, 148px) 0 clamp(48px, 7vw, 96px); }
.vorzeile {
  margin: 0 0 22px;
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leise);
}
.held h1 {
  margin: 0 0 0 -.055em; /* optischer Randausgleich der grossen Versalien */
  font-size: clamp(50px, 9.2vw, 140px);
  line-height: .94;
  font-weight: 750;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.held h1 span { display: block; }
.held h1 .leise { color: var(--sehr-leise); }
:lang(ja) .held h1, :lang(zh-Hans) .held h1, :lang(ko) .held h1 { letter-spacing: -.02em; line-height: 1.08; margin-left: 0; }
.lede {
  max-width: 36ch;
  margin: clamp(26px, 3vw, 40px) 0 0;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--leise);
  text-wrap: pretty;
}

/* ---------- Galerie ---------- */

.galerie { padding-bottom: clamp(64px, 9vw, 128px); }
.apps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin: 0; padding: 0; list-style: none;
}

.app {
  --a: #888; --a2: var(--a);
  --mx: 50%; --my: 30%;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--weich), box-shadow .45s var(--weich), border-color .3s;
}
/* Lichtschein, folgt dem Zeiger (site.js setzt --mx/--my). */
.app::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .16), transparent 60%);
  opacity: 0; transition: opacity .4s;
}

.buehne {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    radial-gradient(70% 90% at 30% 110%, color-mix(in oklab, var(--a) var(--buehne-staerke), transparent), transparent 70%),
    radial-gradient(70% 90% at 75% 100%, color-mix(in oklab, var(--a2) var(--buehne-staerke-2), transparent), transparent 72%),
    linear-gradient(180deg, var(--buehne-grund), color-mix(in oklab, var(--a) 8%, var(--buehne-grund)));
  border-bottom: 1px solid var(--linie);
  transition: background-size .5s var(--weich);
}
/* Feines Raster auf der Bühne, wie ein Tisch, auf dem das Symbol steht. */
.buehne::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--buehne-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--buehne-linie) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 55%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 50% 55%, #000 0%, transparent 75%);
  opacity: .55;
}
/* Schatten am Boden unter dem Symbol. */
.buehne::after {
  content: ""; position: absolute; left: 50%; top: calc(50% + 62px);
  width: 120px; height: 18px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--buehne-boden), .45), transparent);
  filter: blur(4px);
  transition: transform .5s var(--weich), opacity .5s;
}
.symbol {
  position: relative; z-index: 1;
  width: clamp(96px, 10vw, 128px); height: auto; aspect-ratio: 1;
  border-radius: 22.5%;
  box-shadow:
    0 0 0 1px var(--symbol-rand),
    0 2px 4px rgba(var(--schatten-farbe), .10),
    0 14px 30px -8px color-mix(in oklab, var(--a) 45%, rgba(var(--schatten-farbe), .35));
  transition: transform .55s var(--weich), box-shadow .55s var(--weich), opacity .35s var(--weich);
}

.symbol-dunkel { display: none; }
:root:not([data-theme="light"]) .symbol-hell { display: none; }
:root:not([data-theme="light"]) .symbol-dunkel { display: block; }
:root[data-theme="dark"] .symbol-hell { display: none; }
:root[data-theme="dark"] .symbol-dunkel { display: block; }

/* Die Geräte mit der App: erscheinen, wenn der Zeiger über der Karte steht. */
.geraete {
  position: absolute; inset: 4% 3% 0; z-index: 1;
  width: 94%; height: 96%; object-fit: contain; object-position: center bottom;
  opacity: 0; transform: scale(.96);
  transform-origin: 50% 58%;
  transition: opacity .45s var(--weich), transform .7s var(--weich);
  pointer-events: none;
}

.app-text { padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px) clamp(24px, 2.6vw, 34px); }
.app h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -.025em;
}
.app-link { text-decoration: none; }
/* Die ganze Karte ist der Link — über einen gestreckten Bereich, der Text bleibt markierbar. */
.app-link::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--rund); }
.app-link:focus-visible { outline: none; }
.app:has(.app-link:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
.app p { margin: 0; max-width: 42ch; color: var(--leise); font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }

.plattformen { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.plattformen li {
  padding: 4px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 550; letter-spacing: .01em; line-height: 1.4;
  color: var(--leise);
  background: color-mix(in oklab, var(--flaeche-2) 50%, transparent);
}
.app-extra { margin-top: 14px !important; font-size: 15px !important; }
.app-extra a { position: relative; z-index: 4; color: var(--text); text-underline-offset: 3px; }

.app-pfeil {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--text);
  transition: background-color .3s, color .3s, transform .45s var(--weich), border-color .3s;
}
.pfeil { width: 16px; height: 16px; }

@media (hover: hover) {
  .app:hover {
    transform: translateY(-3px);
    border-color: var(--linie-2);
    box-shadow: 0 1px 2px rgba(var(--schatten-farbe), .04), 0 30px 60px -28px rgba(var(--schatten-farbe), .35);
  }
  .app:hover::after { opacity: 1; }
  .app:hover .symbol { transform: translateY(-10px) scale(.86); opacity: 0; }
  .app:hover .buehne::after { transform: translateX(-50%) scale(.7); opacity: 0; }
  /* Erst einblenden, dann ganz langsam näher heran, damit man die Apps erkennt. */
  .app:hover .geraete {
    opacity: 1; transform: scale(1.22);
    transition: opacity .45s var(--weich), transform 12s cubic-bezier(.3, .1, .3, 1);
  }
  .app:hover .app-pfeil { background: var(--text); color: var(--grund); border-color: var(--text); transform: rotate(0deg) translate(2px, -2px); }
}

/* Kleines Symbol neben dem Namen: nur auf Touch-Geräten (siehe unten). Es steht auf der
   Karte selbst — dunkle Karte: helle Fassung, helle Karte: dunkle Fassung. */
.mini-symbol { display: none; }
.mini-dunkel { display: none; }
:root[data-theme="light"] .mini-hell { display: none; }
:root[data-theme="light"] .mini-dunkel { display: block; }

/* Touch-Geräte kennen kein Überfahren: Dort stehen die Geräte gleich auf der Bühne, das
   Symbol rückt klein links neben den Namen. Der langsame Zoom bleibt dem Zeiger
   vorbehalten. */
@media (hover: none) {
  .geraete { opacity: 1; transform: none; transition: none; }
  .buehne .symbol, .buehne::after { display: none !important; }
  .app-text { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .app-text > * { grid-column: 1 / -1; }
  .mini-symbol { display: block; grid-column: 1; width: 48px; height: 48px; margin-bottom: 8px; }
  .app-text h3 { grid-column: 2; }
  .mini {
    width: 48px; height: 48px; border-radius: 22.5%;
    box-shadow: 0 0 0 1px var(--symbol-rand), 0 4px 12px rgba(0, 0, 0, .25);
  }
  .app p { margin-top: 6px; }
}

/* ---------- Das Büro ---------- */

.buero { padding-bottom: clamp(64px, 9vw, 120px); }
.buero-flaeche {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: clamp(32px, 5vw, 72px);
  border-radius: var(--rund);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
}
.buero-marke { color: var(--text); }
.buero-logo { width: 100%; max-width: 420px; height: auto; }
.buero-text h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06; font-weight: 700; letter-spacing: -.035em;
  text-wrap: balance;
}
.buero-text p:not(.vorzeile) { margin: 0 0 28px; max-width: 46ch; color: var(--leise); font-size: 17.5px; text-wrap: pretty; }
.buero-text .vorzeile { margin-bottom: 14px; }
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px 0 22px;
  border-radius: 999px;
  background: var(--text); color: var(--grund);
  font-weight: 600; font-size: 15.5px; text-decoration: none;
  transition: transform .3s var(--weich), opacity .2s;
}
.knopf:hover { transform: translateY(-1px); opacity: .9; }
.knopf .pfeil { transition: transform .3s var(--weich); }
.knopf:hover .pfeil { transform: translate(2px, -2px); }

/* ---------- Fuss ---------- */

.fuss { border-top: 1px solid var(--linie); padding: 28px 0 40px; font-size: 14px; color: var(--leise); }
.fuss-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 22px; }
.fuss nav a { text-decoration: none; color: var(--text); }
.fuss nav a:hover, .fuss nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.marken { margin-top: 10px !important; font-size: 12.5px; color: var(--sehr-leise); }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */

.text { max-width: 760px; padding: clamp(48px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); }
.text-kopf { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--linie); }
.text h1 { margin: 0 0 10px; font-size: clamp(40px, 6vw, 72px); line-height: 1; font-weight: 750; letter-spacing: -.045em; }
.stand { margin: 0; color: var(--leise); font-size: 15px; }
.prosa h2 { margin: 44px 0 12px; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.prosa h3 { margin: 28px 0 8px; font-size: 18px; letter-spacing: -.01em; }
.prosa p, .prosa li { color: color-mix(in oklab, var(--text) 82%, var(--grund)); }
.prosa p { margin: 0 0 14px; }
.prosa ul { padding-left: 1.2em; }
.prosa a { text-underline-offset: 3px; }
.prosa code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--flaeche-2); }
.hinweis { padding: 18px 22px; margin: 0 0 8px; border-radius: 18px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.hinweis p { margin: 0; }

.fehlt { padding: 72px 0 120px; }
.fehlt h1 { font-size: clamp(64px, 12vw, 160px); letter-spacing: -.05em; margin: 64px 0 16px; line-height: 1; }

/* ---------- Einblenden (nur mit Skript und ohne „Bewegung reduzieren") ---------- */

.einblenden [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--weich), transform .8s var(--weich);
}
.einblenden [data-reveal].da { opacity: 1; transform: none; }
/* Der Kopf wartet auf nichts: Er läuft beim Laden einmal ein, ohne Beobachter. */
.einblenden .held [data-reveal] { opacity: 1; transform: none; animation: auftauchen .9s var(--weich) both; }
.einblenden .held [data-reveal]:nth-child(2) { animation-delay: .06s; }
.einblenden .held [data-reveal]:nth-child(3) { animation-delay: .16s; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } }
.einblenden .app:nth-child(2n) { transition-delay: .08s; }
.einblenden .app.da { transition: opacity .7s var(--weich), transform .45s var(--weich), box-shadow .45s var(--weich), border-color .3s; transition-delay: 0s; }

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

/* ---------- Schmal ---------- */

@media (max-width: 820px) {
  .apps { grid-template-columns: minmax(0, 1fr); }
  .buero-flaeche { grid-template-columns: minmax(0, 1fr); }
  .buero-logo { max-width: 260px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .kopf-zeile { height: 60px; }
  .kopf-logo { height: 17px; }
  .buehne { aspect-ratio: 16 / 10; }
  .app-pfeil { top: 14px; right: 14px; width: 34px; height: 34px; }
  .fuss-zeile { flex-direction: column-reverse; align-items: flex-start; }
}