/* JIP Desk – 2D-Oberfläche über der 3D-Szene. Palette + Schriften laut CONTRACT.md. */

@font-face {
  font-family: 'Anton';
  src: url(../assets/fonts/anton-400.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url(../assets/fonts/outfit-var.woff2) format('woff2-variations'),
       url(../assets/fonts/outfit-var.woff2) format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #EEE8DB;
  --ink: #2B2420;
  --brick: #B3271B;
  --soft: #4A423A;
  --night: #14100e;
  --cream: #F3EEE3;            /* Text auf der Nachtszene */
  --lit: #EE6A52;              /* Ziegelrot, aufgehellt für kleine Schrift auf Dunkel (AA ≥ 5.7:1) */
  --rule: rgba(43, 36, 32, .2);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Outfit', system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --pad: max(clamp(16px, 3vw, 42px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* Notch im Querformat */
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

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

html {
  background: var(--night);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }
::selection { background: var(--brick); color: var(--paper); }
:focus-visible { outline: 2px solid var(--lit); outline-offset: 3px; border-radius: 2px; }

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

/* ---------- Bühne ---------- */
#stage { position: fixed; inset: 0; background: var(--night); }
#gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none; outline: none; cursor: grab;
}
#gl.drag { cursor: grabbing; }
#gl.hot { cursor: pointer; }

/* Ohne WebGL: warmer, ruhiger Raum statt Szene */
body.nogl #stage {
  background:
    radial-gradient(70% 55% at 62% 40%, rgba(214, 128, 70, .34), transparent 70%),
    radial-gradient(45% 40% at 22% 58%, rgba(179, 39, 27, .16), transparent 72%),
    linear-gradient(180deg, #241913 0%, #1a130f 55%, var(--night) 100%);
}
body.nogl #gl, body.nogl .hint, body.nogl .reset { display: none; }

/* ---------- Kopf ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: calc(64px + var(--st));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: var(--st) var(--pad) 0;
  pointer-events: none;
}
.top > .logo, .top > .nav { pointer-events: auto; }

/* Weiche Kante: gestaffelte Unschärfe statt harter Leiste */
.hblur { position: absolute; inset: 0 0 auto; height: calc(132px + var(--st)); z-index: -1; pointer-events: none; }
.hblur i { position: absolute; inset: 0; }
.hblur i:nth-child(1) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000 0, #000 28%, transparent 50%); mask-image: linear-gradient(#000 0, #000 28%, transparent 50%); }
.hblur i:nth-child(2) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(transparent 10%, #000 30%, #000 48%, transparent 66%); mask-image: linear-gradient(transparent 10%, #000 30%, #000 48%, transparent 66%); }
.hblur i:nth-child(3) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(transparent 28%, #000 48%, #000 64%, transparent 82%); mask-image: linear-gradient(transparent 28%, #000 48%, #000 64%, transparent 82%); }
.hblur i:nth-child(4) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(transparent 46%, #000 64%, #000 80%, transparent 100%); mask-image: linear-gradient(transparent 46%, #000 64%, #000 80%, transparent 100%); }
.hblur i:nth-child(5) { background: linear-gradient(rgba(20, 13, 10, .58) 0, rgba(20, 13, 10, .4) 25%, rgba(20, 13, 10, .2) 50%, rgba(20, 13, 10, .07) 75%, transparent 100%); }

.logo {
  appearance: none; background: none; border: 0; margin: 0; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 16px; min-width: 0; max-width: 100%;
  color: var(--cream); white-space: nowrap; cursor: pointer;
}
.logo .nm { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: .015em; text-transform: uppercase; }
.logo .bar { flex: none; width: 1px; height: 26px; background: rgba(243, 238, 227, .32); }
.logo .tg { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.logo:has(.tg:empty) .bar { display: none; }

.nav { display: flex; gap: 34px; }
.nav button {
  appearance: none; background: none; border: 0; margin: 0; padding: 12px 0 10px;
  position: relative; display: inline-block; cursor: pointer; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream);
  transition: font-weight .15s ease;
}
/* Reserviert die Breite der fetten Variante: Hover verschiebt nichts */
.nav button::before { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.nav button::after {
  content: ""; position: absolute; left: 0; right: .2em; bottom: 4px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transition: transform .25s var(--ease-out);
}
.nav button:focus-visible { font-weight: 700; outline-offset: 2px; }
.nav button:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav button:hover { font-weight: 700; }
  .nav button:hover::after { transform: scaleX(1); }
}

/* ---------- Unten: Hinweise, Rechtliches, Zurück ---------- */
.scrim {
  position: fixed; inset: auto 0 0; z-index: 20; height: calc(170px + var(--sb)); pointer-events: none;
  background: linear-gradient(to top, rgba(20, 13, 10, .55), rgba(20, 13, 10, .24) 48%, transparent);
}
body.nogl .scrim { display: none; }

.hint {
  position: fixed; left: 50%; bottom: calc(var(--sb) + 22px); z-index: 30;
  transform: translateX(-50%);
  height: 36px; margin: 0;
  display: flex; align-items: center; gap: 22px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(243, 238, 227, .88); white-space: nowrap; pointer-events: none;
}
.hint b { color: var(--lit); font-weight: 700; margin-right: .1em; }
.hint i { font-style: normal; }
.hint .t { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint .m { display: none; }
  .hint .t { display: inline; }
}

.legal {
  position: fixed; left: var(--pad); bottom: calc(var(--sb) + 22px); z-index: 30;
  height: 36px; margin: 0; display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .06em; color: rgba(243, 238, 227, .72);
}
.legal[hidden] { display: none; }
.legal a {
  color: inherit; padding: 8px 0;
  text-decoration: underline; text-decoration-color: rgba(243, 238, 227, .3);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
@media (pointer: coarse) { .legal a { padding: 14px 0; } }
@media (hover: hover) and (pointer: fine) {
  .legal a:hover { color: var(--cream); text-decoration-color: var(--lit); }
}

.reset {
  appearance: none; cursor: pointer;
  position: fixed; right: var(--pad); bottom: calc(var(--sb) + 22px); z-index: 30;
  height: 36px; margin: 0; padding: 0 16px 0 calc(16px + .2em);
  display: flex; align-items: center;
  border: 1px solid var(--ink); border-radius: 999px;
  background: rgba(238, 232, 219, .82); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.reset:active { transform: scale(.97); }
.reset:focus-visible { outline-color: var(--lit); }
@media (hover: hover) and (pointer: fine) {
  .reset:hover { background: var(--ink); color: var(--cream); }
}

/* ---------- Lader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: #1c1815; color: var(--lit);
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.loader p {
  margin: 0; padding-left: .24em; /* gleicht die Sperrung am Wortende aus */
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.loader .track { display: block; width: min(180px, 46vw); height: 1px; overflow: hidden; background: rgba(243, 238, 227, .14); }
.loader .track i {
  display: block; height: 100%; background: var(--lit);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.loader.done { opacity: 0; visibility: hidden; }

/* ---------- Touch-Punkte über klickbaren Objekten (wie im Original: Ring mit Punkt) ---------- */
.mark {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 30px; height: 30px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  translate: -50% -50%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
  -webkit-tap-highlight-color: transparent;
}
.mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* Trefferfläche 46 px */
.mark.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s var(--ease-out); }
.mark i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.mark:active { background: rgba(255, 255, 255, .35); }
@media (hover: hover) and (min-width: 701px) { .mark { display: none; } }

/* ---------- Hover-Label ---------- */
.tip { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform; }
.tip span {
  display: block; white-space: nowrap;
  padding: 7px 13px 7px calc(13px + .16em);
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 1px 1px rgba(10, 6, 4, .18), 0 8px 22px -6px rgba(10, 6, 4, .5);
  transform-origin: 50% 100%;
  transform: translate(-50%, calc(-100% - 18px)) scale(.94);
  opacity: 0;
  transition: opacity .12s ease, transform .12s var(--ease-out);
}
.tip.on span {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 18px));
  transition-duration: .18s;
}

/* ---------- Panels ---------- */
.panel {
  position: fixed; inset: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--soft);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(43, 36, 32, .3) transparent;
  color-scheme: light;
  opacity: 0;
  transition: opacity .18s ease;
}
.panel.on { opacity: 1; transition: opacity .3s var(--ease-out); }
.panel::backdrop {
  background: rgba(238, 232, 219, .92);
  -webkit-backdrop-filter: blur(14px) saturate(.8);
  backdrop-filter: blur(14px) saturate(.8);
  opacity: 0;
  transition: opacity .18s ease;
}
.panel.on::backdrop { opacity: 1; transition: opacity .3s var(--ease-out); }
.panel :focus-visible { outline-color: var(--brick); }
.panel h2:focus { outline: none; }
.panel ::selection { background: var(--brick); color: var(--paper); }

.pin {
  position: relative;
  width: min(100% - 2 * var(--pad), 1180px);
  margin: 0 auto;
  padding: clamp(84px, 13vh, 112px) 0 calc(96px + var(--sb));
  transform: translateY(14px);
  transition: transform .18s var(--ease-out);
}
.panel.on .pin { transform: none; transition: transform .55s var(--ease-out); }
#p-leistungen .pin { width: min(100% - 2 * var(--pad), 980px); }
#p-ueber .pin, #p-kontakt .pin {
  width: min(100% - 2 * var(--pad), 860px);
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}

.x {
  position: fixed; top: calc(var(--st) + 20px); right: var(--pad); z-index: 2;
  width: 44px; height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink); border-radius: 50%;
  background: rgba(238, 232, 219, .92); color: var(--ink); cursor: pointer; /* deckt Text ab, der darunter durchscrollt */
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .x:hover { background: var(--ink); color: var(--paper); }
}

.kick { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--brick); }
.pin h2 {
  margin: 14px 0 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(56px, 9.5vw, 120px); line-height: .92; letter-spacing: .005em;
  color: var(--brick); text-wrap: balance;
}
#p-ueber h2 { font-size: clamp(60px, 11.5vw, 148px); }
.claim { max-width: 34ch; margin: clamp(22px, 3vw, 34px) 0 0; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.4; font-weight: 500; color: var(--ink); text-wrap: pretty; }

/* Portfolio */
.works { list-style: none; margin: clamp(44px, 6vw, 76px) 0 0; padding: 0; display: grid; gap: clamp(64px, 9vw, 120px); }
.work {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px); align-items: center;
}
.work:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.work:nth-child(even) .shots { order: 2; }
.shots { position: relative; margin: 0; padding: 0 clamp(22px, 3vw, 40px) clamp(28px, 3.4vw, 46px) 0; }
.work:nth-child(even) .shots { padding: 0 0 clamp(28px, 3.4vw, 46px) clamp(22px, 3vw, 40px); }
.shots .desk {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top;
  border-radius: 16px; background: #ddd5c5;
  box-shadow: 0 1px 2px rgba(20, 16, 14, .12), 0 28px 56px -24px rgba(20, 16, 14, .45);
}
.phone {
  position: absolute; right: 0; bottom: 0;
  width: 21%; min-width: 74px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 clamp(3px, .45vw, 6px) clamp(3px, .45vw, 6px);
  border-radius: clamp(14px, 2.1vw, 28px);
  background: #1b1513;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 40px -14px rgba(20, 16, 14, .55);
}
.work:nth-child(even) .phone { right: auto; left: 0; }
.phone img {
  display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top;
  border-radius: clamp(11px, 1.7vw, 22px); background: #2b2420;
}
.phone::before { /* Statusleiste mit Kamerainsel */
  content: ""; flex: none; width: 30%; aspect-ratio: 5 / 1; margin: 5% 0 4.5%;
  border-radius: 99px; background: #070505;
}
.shots img { opacity: 0; transition: opacity .4s ease; }
.shots img[data-ok] { opacity: 1; }
.shots img[data-fail] { visibility: hidden; }

.work .meta span { white-space: nowrap; }
.work .meta { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brick); }
.work h3 { margin: 12px 0 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.work .txt { margin: 14px 0 0; max-width: 44ch; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
.work .txt b { color: var(--ink); font-weight: 700; }
.work .go { margin-top: 22px; }
.draft {
  display: inline-block; margin-top: 22px; padding: 5px 12px 5px calc(12px + .2em);
  border: 1px solid rgba(43, 36, 32, .35); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--soft);
}

/* Links mit ziegelroter Unterstreichung (Kontakt, Projekte) */
.u {
  display: inline-block; width: fit-content; max-width: 100%;
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--brick); padding-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.u .arr { display: inline-block; margin-left: .3em; color: var(--brick); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .u:hover { color: var(--brick); }
  .u:hover .arr { transform: translate(2px, -2px); }
}

/* Leistungen */
.rows { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rows > li {
  display: grid; grid-template-columns: clamp(56px, 9vw, 124px) minmax(0, 1fr); gap: 0 20px;
  padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--rule);
}
.rows .n { font-family: var(--display); font-size: clamp(30px, 3.4vw, 46px); line-height: .95; color: var(--brick); font-variant-numeric: tabular-nums; }
.rows h3 { margin: 0; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.012em; color: var(--ink); }
.rows p { margin: 10px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 15px; font-weight: 500; color: var(--ink); }
.pts li:not(:last-child)::after { content: "·"; content: "·" / ""; margin: 0 .55em; color: var(--brick); font-weight: 700; }

/* Kontakt */
.cgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px;
  margin: 30px 0 0; padding: 26px 0; border-block: 1px solid var(--rule);
}
.cgrid div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cgrid dt { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brick); }
.cgrid dd { margin: 0; font-size: 17px; }

/* ---------- Schmal ---------- */
@media (max-width: 960px) {
  /* Kopf zweizeilig: nebeneinander passen Logo + Tagline + Nav erst ab ~830 px */
  .top {
    height: auto; flex-direction: column; align-items: stretch; gap: 2px;
    padding-top: calc(var(--st) + 10px);
  }
  .logo { align-self: flex-start; }
  .nav { justify-content: space-between; }
  .hblur { height: calc(158px + var(--st)); }
  .hint {
    bottom: calc(var(--sb) + 68px); height: auto;
    width: max-content; max-width: calc(100vw - 2 * var(--pad));
    flex-wrap: wrap; justify-content: center; row-gap: 7px; column-gap: 16px;
    white-space: normal; font-size: 11px; letter-spacing: .13em;
  }
  .hint span { white-space: nowrap; }
  .legal, .reset { bottom: calc(var(--sb) + 16px); }
  .scrim { height: calc(200px + var(--sb)); }
}

@media (max-width: 760px) {
  /* :nth-child(even) muss mit rein, sonst gewinnt oben die Spiegel-Regel (höhere Spezifität) */
  .work, .work:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .work:nth-child(even) .shots { order: 0; padding: 0 clamp(22px, 3vw, 40px) clamp(28px, 3.4vw, 46px) 0; }
  .work:nth-child(even) .phone { left: auto; right: 0; }
  .work .txt { font-size: 16px; }
  .cgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .logo { gap: 10px; }
  .logo .nm { font-size: 22px; }
  .logo .bar { height: 18px; }
  /* Tagline darf umbrechen statt mit … abzubrechen */
  .logo { white-space: normal; text-align: left; }
  .logo .tg { font-size: 10px; letter-spacing: .14em; line-height: 1.45; max-width: 21em; white-space: normal; overflow: visible; }
  /* unten nur eine Zeile Hinweis; „Ansicht zurück“ erst, wenn die Ansicht verschoben wurde */
  .hint { flex-wrap: nowrap; font-size: 10px; letter-spacing: .12em; }
  .hint span:nth-child(2) { display: none; }
  body:not(.moved) .reset { opacity: 0; visibility: hidden; pointer-events: none; }
  .reset { transition: opacity .25s var(--ease-out), visibility 0s, background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
  .nav { gap: 8px; }
  .nav button { font-size: 11px; letter-spacing: .09em; padding: 12px 0 11px; }
  .nav button::after { right: .09em; bottom: 5px; }
  .reset { height: 38px; font-size: 10px; }
  .x { top: calc(var(--st) + 14px); }
  .pin { padding-top: calc(var(--st) + 76px); }
  .rows > li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rows p { font-size: 16px; }
  /* Kopf wie im Original: Name + Claim untereinander links, Menü rechts in derselben Zeile */
  .top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; padding-top: calc(var(--st) + 14px); }
  .logo { position: relative; }
  .logo .bar { display: none; }
  .logo .nm { font-size: 21px; white-space: nowrap; }
  /* Claim unter dem Namen; darf unter das Menü laufen, dann bleibt der Name einzeilig */
  .logo .tg { position: absolute; left: 0; top: calc(100% - 4px); width: max-content; max-width: calc(100vw - 2 * var(--pad)); font-size: 8px; letter-spacing: .14em; white-space: nowrap; }
  .nav { gap: 11px; justify-content: flex-end; }
  .nav button { font-size: 9px; letter-spacing: .08em; padding: 6px 0; }
  .nav button::after { bottom: 1px; }
  .hblur { height: calc(112px + var(--st)); }
}

/* Touch: Ziele ≥ 44 px; negative Ränder halten das Layout an seinem Platz */
@media (pointer: coarse) {
  .logo { padding-block: 11px; margin-block: -5px; }
  .nav button { padding-block: 14px; margin-block: -2px; }
  .nav button::after { bottom: 8px; }
  .reset { height: 44px; }
  .u { position: relative; }
  .u::after { content: ""; position: absolute; inset: -10px -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .pin, .panel.on .pin { transform: none; transition: none; }
  .tip span, .tip.on span { transform: translate(-50%, calc(-100% - 18px)); }
  .nav button::after, .u .arr, .reset, .x { transition: none; }
}