/* Wenos Nazhat – Portfolio
   Grundgerüst für alle Entwürfe. Farben, Schrift und Formen setzt jeder Entwurf selbst. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg, canvas { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.springen {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 500;
  padding: 10px 16px;
  background: var(--vg);
  color: var(--hg);
  text-decoration: none;
  transition: top .2s;
}
.springen:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--fokus, currentColor); outline-offset: 3px; }

/* Während der Eröffnung steht die Seite still */
html.mit-intro, html.mit-intro body { overflow: hidden; }
html:not(.mit-intro) .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 400; cursor: pointer; }

/* Wörter und Zeichen, die einzeln hereinkommen */
.wort, .zeichen { display: inline-block; vertical-align: top; }
.wort { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.wort > span, .zeichen > span { display: inline-block; }
.zeichen-wort { display: inline-block; white-space: nowrap; }

/* Zeiger erst zeigen, wenn sich die Maus bewegt hat */
.zeiger:not(.ist-unterwegs) { visibility: hidden; }

/* Medien */
.medium { position: relative; overflow: hidden; }
.medium > img, .medium > video { width: 100%; height: 100%; object-fit: cover; }
.medium > video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.medium.laeuft > video { opacity: 1; }
.mit-ton [data-abspielen] { opacity: 0; pointer-events: none; }
[data-wenn-video] { display: none; }
.hat-video [data-wenn-video] { display: revert; }
.hat-video [data-wenn-standbild] { display: none; }

/* Unterschrift, die sich selbst schreibt */
.unterschrift { display: block; height: auto; aspect-ratio: 148 / 64; overflow: visible; fill: currentColor; }
.unterschrift mask path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .unterschrift.wartet mask path { stroke-dashoffset: 1; opacity: 0; }
.unterschrift.los mask path {
  animation: schreiben calc(var(--d) * var(--tempo, 1)) linear calc(var(--v) * var(--tempo, 1) + var(--start, 0s)) both;
}
@keyframes schreiben {
  0% { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Projektansicht */
.fenster {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  overflow: hidden;
}
.fenster[open] { display: flex; flex-direction: column; animation: fenster-auf .5s cubic-bezier(.2, .8, .2, 1); }
.fenster::backdrop { animation: schleier .4s ease both; }
@keyframes fenster-auf { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes schleier { from { opacity: 0; } to { opacity: 1; } }
.fenster__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px clamp(18px, 3vw, 34px); }
.fenster__titel { margin: 0; }
.fenster__unterzeile { margin: 6px 0 0; }
.fenster__zu { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid currentColor; background: none; cursor: pointer; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.fenster__zu svg { width: 20px; height: 20px; }
.fenster__zu:hover { transform: rotate(90deg); }
.fenster__inhalt { overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(18px, 3vw, 34px) clamp(18px, 3vw, 34px); }
.fenster__text { margin: 0 0 24px; max-width: 40em; }
html.fenster-offen { overflow: hidden; }

.galerie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.galerie figure { grid-column: span 2; margin: 0; min-width: 0; }
.galerie .galerie--breit { grid-column: span 3; }
.galerie .galerie--voll { grid-column: 1 / -1; }
.galerie img, .galerie video { width: 100%; height: auto; }
.galerie figcaption { padding-top: 8px; font-size: .85rem; opacity: .7; }

/* Drucker */
.drucker { position: relative; aspect-ratio: 1 / 1; overflow: hidden; touch-action: pan-y; cursor: grab; }
.drucker:active { cursor: grabbing; }
.drucker__flaeche { position: absolute; inset: 0; width: 100%; height: 100%; }
.drucker__leiste { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.drucker__hinweis { position: absolute; left: 18px; top: 14px; margin: 0; pointer-events: none; transition: opacity .6s; }
.drucker.wurde-gedreht .drucker__hinweis { opacity: 0; }

/* Vorschau-Umschalter zwischen den Entwürfen */
.entwurf-wahl {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.entwurf-wahl a { padding: 9px 13px; border-radius: 999px; color: #fff; text-decoration: none; opacity: .75; }
.entwurf-wahl a:hover { opacity: 1; }
.entwurf-wahl a[aria-current="page"] { background: #fff; color: #111; opacity: 1; }
.entwurf-wahl b { font-weight: 600; }
@media (max-width: 700px) { .entwurf-wahl span { display: none; } .entwurf-wahl a { padding: 9px 14px; } }

@media (max-width: 700px) {
  .galerie figure, .galerie .galerie--breit { grid-column: 1 / -1; }
  .galerie--drei figure { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
}