/* SKN-ORIENTIERUNG: Zuletzt geladene Regeln: Landingpage und Menü für alle Größen; Selektoren mit html.skn-phone gelten nur im erkannten Handymodus.
 * Wegweiser und Zusammenspiel der Dateien: CODE-UEBERSICHT.md im Theme-Hauptordner.
 */
/* Every rule is gated by the phone media query class set before first paint. */
/* SKN-ORIENTIERUNG: 01 — Landingpage: weiße Vollbildfläche, Text, Einblenden und Farbverlauf. */
.skn-phone-intro,
.skn-phone-menu,
.skn-phone-animation {
  display: none;
}
html .skn-phone-intro:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: grid;
  place-items: center;
  background: #ffffff;
  height: 100dvh;
  overscroll-behavior: auto;
}
html.phone-intro-active body > .site {
  visibility: hidden !important;
}
html.phone-intro-active:not(.skn-phone),
html.phone-intro-active:not(.skn-phone) body {
  overflow: hidden !important;
}
.skn-phone-intro .intro-composition {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: 'Clash Display Variable', 'Clash Display', sans-serif;
  font-weight: 600;
  line-height: 0.92;
  text-align: center;
  cursor: pointer;
  position: relative;
  top: -2dvh;
  max-width: 88vw;
  opacity: 1;
  text-decoration: none;
}
.skn-phone-intro .intro-composition > .intro-title {
  display: block;
  width: max-content;
  white-space: nowrap;
  position: relative;
  background-image: var(--intro-gradient);
  margin: 0;
  font: inherit;
  line-height: inherit;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  word-spacing: 0.14em;
  letter-spacing: 0.015em;
  opacity: 0;
  animation: skn-intro-enter 1.5s ease-in forwards;
}
/* Landing title: retain the bold weight on mobile and tablet. */
@media (max-width: 1024px) {
  .skn-phone-intro .intro-composition > .intro-title {
    font-weight: 700;
  }
}
@keyframes skn-intro-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
html.skn-phone body.home .site .hero h1 {
  font-size: var(--phone-title-fit, clamp(4.8rem, 22vw, 7.2rem)) !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: none !important;
  background: none !important;
  overflow: visible !important;
}
html.skn-phone body.home .site .hero h1 .phone-title-line {
  display: block;
  width: max-content;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  white-space: nowrap;
  font: inherit !important;
  letter-spacing: inherit;
  transform: none !important;
  background-image: var(--headline-day-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.skn-phone[data-theme='dark'] body.home .site .hero h1 .phone-title-line {
  background-image: var(--headline-night-gradient);
}
html.skn-phone body.home .works {
  column-gap: 4ch !important;
}
html.skn-phone body.home .works .work-card:nth-child(n) {
  height: 66vw !important;
  max-height: none !important;
}
html.skn-phone body.home .works .work-card:nth-child(n) .label {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}
@media (min-width: 701px) {
  html.skn-phone body.home .works {
    column-gap: 8ch !important;
  }
  html.skn-phone body.home .works .work-card:nth-child(n) {
    height: 30svh !important;
    max-height: 30svh !important;
  }
}
/* The controls are moved outside the filtered site while phone mode is active. */
/* SKN-ORIENTIERUNG: 03 — Feste Bedienelemente und Abstände zu Bildschirmrändern. */
html body > .menu-toggle,
html body > .theme-toggle {
  position: fixed !important;
  top: max(24px, env(safe-area-inset-top)) !important;
  width: 44px !important;
  height: 64px !important;
  min-height: 64px !important;
  min-width: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  z-index: 100005;
  opacity: var(--phone-control-opacity, 1) !important;
  transition: opacity 100ms linear !important;
}
html body > .menu-toggle {
  left: max(6px, env(safe-area-inset-left)) !important;
  right: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  color: var(--ink) !important;
}
html body > .theme-toggle {
  right: max(6px, env(safe-area-inset-right)) !important;
  left: auto !important;
}
html body.admin-bar > .menu-toggle,
html body.admin-bar > .theme-toggle {
  top: 56px !important;
}
@media (max-width: 782px) {
  html body.admin-bar > .menu-toggle,
  html body.admin-bar > .theme-toggle {
    top: 70px !important;
  }
}
html .phone-burger-lines {
  width: 24px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html .phone-burger-lines i {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
}
html body.phone-menu-open > .menu-toggle .phone-burger-lines {
  opacity: 0;
}
html body .site-header #site-nav {
  display: none !important;
}
/* SKN-ORIENTIERUNG: 04 — Menüzeilen, Zurück-Pfeil und Animationsebene. */
html .skn-phone-menu:not([hidden]) {
  display: block;
  position: fixed;
  left: 16px;
  top: 16dvh;
  transform: none;
  width: 66.6667vw;
  z-index: 100004;
  color: var(--ink);
  font:
    15px/1.4 'Montserrat',
    Arial,
    sans-serif;
  text-transform: lowercase;
}
html .skn-phone-menu .phone-menu-row {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--row-height);
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  margin: 0 0 var(--row-gap);
  background: var(--menu-bar-color);
  color: var(--ink) !important;
  font: inherit;
  letter-spacing: 0.025em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  box-shadow: none;
}
html .skn-phone-menu .phone-menu-row:last-child {
  margin-bottom: 0;
}
html .skn-phone-menu .phone-menu-row[aria-disabled='true'] {
  cursor: default;
}
html .phone-menu-row:focus-visible,
html .phone-menu-back:focus-visible,
html .skn-phone-intro .intro-composition:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
html .skn-phone-menu .phone-menu-back {
  position: absolute;
  top: -34px;
  left: 0;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 24px/1 Arial;
  cursor: pointer;
}
html .skn-phone-menu.is-transforming .phone-menu-row,
html .skn-phone-menu.is-transforming .phone-menu-back {
  visibility: hidden;
}
html .skn-phone-animation {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100006;
}
html .skn-phone-animation i {
  position: fixed;
  display: block;
  margin: 0;
  background: var(--ink);
  height: 2px;
  width: 24px;
  transform-origin: center;
  box-sizing: border-box;
}
html body.phone-menu-open > .site,
html body.phone-menu-open > #wpadminbar,
html body.phone-menu-open > .theme-toggle {
  filter: blur(12px) !important;
  pointer-events: none;
}
html body.skn-lightbox-open > .menu-toggle,
html body.skn-lightbox-open > .theme-toggle {
  filter: blur(12px) !important;
  pointer-events: none;
}
/* Two real grid tracks; explicit rows keep odd portraits and landscapes stable. */
/* SKN-ORIENTIERUNG: 05 — Handy-Galerie als zweispaltiges Raster mit mittiger Trennlinie. */
html.skn-phone
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery.skn-asymmetric {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  columns: auto !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  isolation: isolate;
  align-items: start !important;
  min-height: 0 !important;
}
html.skn-phone body .portfolio-page .portfolio-packet .packet-gallery::before {
  content: '';
  position: absolute;
  left: calc(50% - 0.5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--muted);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
html.skn-phone
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery
  .packet-artwork:nth-child(n) {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  justify-self: stretch !important;
  align-self: start !important;
  z-index: 1;
}
html.skn-phone
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery
  .packet-artwork
  img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
html.skn-phone .packet-artwork.phone-landscape {
  background: var(--paper) !important;
}
html.skn-phone .portfolio-packet .packet-heading {
  text-align: right !important;
}
html.skn-phone .portfolio-packet .packet-heading h2 {
  margin-left: auto !important;
  text-align: right !important;
}
/* SKN-ORIENTIERUNG: 06 — Lightbox im Handy-Querformat: Bildfläche und seitliche Pfeile. */
@media (orientation: landscape) {
  html.skn-phone body dialog#skn-artwork-lightbox {
    --skn-lightbox-gap: 8px;
  }
  html.skn-phone body dialog#skn-artwork-lightbox figure img {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  html.skn-phone body dialog#skn-artwork-lightbox .artwork-lightbox-prev,
  html.skn-phone body dialog#skn-artwork-lightbox .artwork-lightbox-next {
    width: 40px !important;
    height: 40px !important;
    font-size: 44px !important;
  }
  html.skn-phone body dialog#skn-artwork-lightbox .artwork-lightbox-prev {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  html.skn-phone body dialog#skn-artwork-lightbox .artwork-lightbox-next {
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* SKN-ORIENTIERUNG: 07 — Menübalkenfarben und zusätzliche Schalter-/Burgergrößen. */
:root {
  --menu-bar-color: rgb(220 220 220 / 0.78);
}
:root[data-theme='dark'] {
  --menu-bar-color: color-mix(in srgb, var(--paper) 78%, transparent);
}
html body > .menu-toggle {
  --burger-width: 24px;
}
@media (min-width: 701px) and (max-width: 1024px) {
  html:not(.skn-phone) body > .menu-toggle {
    --burger-width: 42px;
  }
  html:not(.skn-phone) .phone-burger-lines,
  html:not(.skn-phone) .phone-burger-lines i {
    width: 42px;
  }
}
html .phone-burger-lines,
html .phone-burger-lines i {
  width: var(--burger-width, 24px);
}
html body > .theme-toggle,
html body > .theme-toggle .theme-toggle-track,
html body > .theme-toggle .theme-toggle-thumb {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html body > .theme-toggle .theme-icon {
  color: var(--ink);
}
html body > .theme-toggle::after,
html body > .menu-toggle::before,
html body > .menu-toggle::after {
  display: none !important;
}
.phone-animation-text {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: 0.025em;
}
html.skn-phone body.home .site .hero h1 {
  width: 75vw !important;
  max-width: 75vw !important;
  margin-left: 0 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .skn-phone-intro .intro-composition,
  .skn-phone-intro .intro-composition > .intro-title {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }
}

/* Only the frame fades; the thumb, icon and hit area never move on scroll. */
/* SKN-ORIENTIERUNG: 08 — Separater Schalterrahmen: nur seine Deckkraft wird beim Scrollen verändert. */
html body > .theme-toggle::before {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 2px 12px #0002;
  opacity: 1;
  transition: opacity 200ms ease-in-out;
  z-index: -1;
}
html body > .theme-toggle {
  isolation: isolate;
  opacity: 1 !important;
}
@media (max-width: 1024px) {
  html body > .theme-toggle::before {
    opacity: var(--theme-frame-opacity, 1);
  }
}
/* Desktop: 130% dimensions, including the existing vertical thumb travel. */
@media (min-width: 1025px) {
  html body > .theme-toggle {
    width: 57.2px !important;
    height: 83.2px !important;
    min-width: 57.2px !important;
    min-height: 83.2px !important;
  }
  html body > .theme-toggle::before {
    border-radius: 31.2px;
  }
  html body > .theme-toggle .theme-toggle-track {
    width: 33.8px;
    height: 62.4px;
  }
  html body > .theme-toggle .theme-toggle-thumb {
    top: 2.6px;
    left: 2.6px;
    width: 26px;
    height: 26px;
  }
  html body > .theme-toggle[aria-pressed='true'] .theme-toggle-thumb {
    transform: translateY(28.6px);
  }
  html body > .theme-toggle .theme-icon {
    width: 18.2px;
    height: 18.2px;
  }
}

@media (min-width: 1025px) {
  .skn-phone-intro .intro-composition {
    font-weight: 700;
    text-align: left;
    line-height: 0.92;
    justify-self: start;
    margin-left: var(--intro-left, 3vw);
  }
  .skn-phone-intro .intro-composition > .intro-title {
    text-align: left;
  }
}

/* SKN-ORIENTIERUNG: 09 — Namenszeile unter der Landingpage-H1: Schrift, Abstand und Einrückung. */
.skn-phone-intro .intro-byline {
  display: block;
  text-align: left;
  padding-left: 12px;
  margin-top: clamp(24px, 5dvh, 56px);
  font:
    300 clamp(16px, 1.6vw, 24px)/1.4 'Montserrat',
    Arial,
    sans-serif;
  letter-spacing: 0.025em;
  word-spacing: normal;
  color: #555;
  -webkit-text-fill-color: #555;
  white-space: nowrap;
}

/* The complete home headline links to a fresh landing-page view. */
body.home .hero .hero-landing-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
body.home .hero .hero-landing-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}


/* Landingpage sequence: H1, credit, dots, then destination. Opacity only. */
.skn-phone-intro .intro-byline {
  opacity: 0;
  animation: skn-intro-enter .65s ease-in 1.5s forwards;
}
.skn-phone-intro .intro-way {
  position: absolute;
  right: max(var(--intro-edge, 6vw), env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  gap: .35em;
  padding: 8px 0;
  color: #353535;
  font: 500 clamp(18px, 1.5vw, 24px)/1.5 'Montserrat', Arial, sans-serif;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.intro-way .intro-dot, .intro-way .intro-way-label {
  opacity: 0;
  animation: skn-intro-enter .3s ease-in 2.2s forwards;
}
.intro-way .intro-dot:nth-child(2) { animation-delay: 2.5s; }
.intro-way .intro-dot:nth-child(3) { animation-delay: 2.8s; }
.intro-way .intro-way-label { animation-delay: 3.1s; animation-duration: .6s; }
.skn-phone-intro .intro-way:focus-visible,
html .skn-phone-intro .intro-composition:focus-visible {
  outline: 2px solid #353535;
  outline-offset: 6px;
}
/* A focused link becomes visible immediately, even during the sequence. */
.intro-way:focus-visible > span { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .skn-phone-intro .intro-title,
  .skn-phone-intro .intro-byline,
  .intro-way .intro-dot,
  .intro-way .intro-way-label {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Gemeinsame H1-Maske startet nach dem Laden der Schriften; this way bleibt buchstabenweise. */
.skn-phone-intro .intro-title {
  opacity: 1 !important;
  animation: skn-intro-mask 1.5s linear both paused !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, transparent 66.667%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 33.333%, transparent 66.667%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: none;
}
.skn-phone-intro.intro-ready .intro-title {
  animation-play-state: running !important;
}
@keyframes skn-intro-mask {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
.skn-phone-intro .intro-character {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: skn-intro-enter .45s ease-in var(--letter-delay, 0s) both;
  animation-play-state: paused;
}
.skn-phone-intro .intro-title .intro-character {
  background-image: var(--intro-gradient);
  background-size: var(--intro-title-width) 100%;
  background-position: var(--letter-offset, 0px) 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.skn-phone-intro .intro-way { gap: .35em; font-weight: 700; }
.skn-phone-intro .intro-dots { display: inline-flex; gap: 0; }
.skn-phone-intro .intro-dot {
  opacity: 0;
  animation: skn-intro-enter .5s ease-in 2.3s both;
  animation-play-state: paused;
}
.skn-phone-intro .intro-dot:nth-child(2) { animation-delay: 3s; }
.skn-phone-intro .intro-dot:nth-child(3) { animation-delay: 3.7s; }
.skn-phone-intro .intro-way-label { opacity: 1; animation: none; }
.skn-phone-intro .intro-byline { animation-play-state: paused; }
.skn-phone-intro.intro-ready .intro-character,
.skn-phone-intro.intro-ready .intro-dot,
.skn-phone-intro.intro-ready .intro-byline { animation-play-state: running; }
.skn-phone-intro .intro-way:focus-visible .intro-character,
.skn-phone-intro .intro-way:focus-visible .intro-dot { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .skn-phone-intro .intro-character,
  .skn-phone-intro .intro-dot,
  .skn-phone-intro .intro-byline { animation: none !important; opacity: 1 !important; }
}

/* Tablet: dieselben Bildpaare und dieselbe mittige Linie wie mobil. */
@media (min-width: 701px) and (max-width: 1024px) {
/* Two real grid tracks; explicit rows keep odd portraits and landscapes stable. */
/* SKN-ORIENTIERUNG: 05 — Handy-Galerie als zweispaltiges Raster mit mittiger Trennlinie. */
html
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery.skn-asymmetric {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  columns: auto !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  isolation: isolate;
  align-items: start !important;
  min-height: 0 !important;
}
html body .portfolio-page .portfolio-packet .packet-gallery::before {
  content: '';
  position: absolute;
  left: calc(50% - 0.5px);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--muted);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
html
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery
  .packet-artwork:nth-child(n) {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  transform: none !important;
  justify-self: stretch !important;
  align-self: start !important;
  z-index: 1;
}
html
  body
  .portfolio-page
  .portfolio-packet:is(#phone-gallery-override, .portfolio-packet)
  .packet-gallery
  .packet-artwork
  img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}
html .packet-artwork.phone-landscape {
  background: var(--paper) !important;
}

}

/* Ruhige, gleichmäßige Opacity-Übergänge; alle Buchstaben behalten ihren Platz. */
.skn-phone-intro .intro-character,
.skn-phone-intro .intro-dot {
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.skn-phone-intro .intro-way .intro-character { animation-duration: .6s; }
.skn-phone-intro .intro-dot { animation-duration: .65s; }
.skn-phone-intro .intro-way {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-synthesis: none;
}

/* Wiederhergestellt: weicher Verlauf aus 2–3 Farben, einmalig 2,8 s nach 1,5 s.
   Jede Glyphe zeigt denselben Ausschnitt des gemeinsamen Verlaufs. */
.skn-phone-intro .intro-title .intro-character {
  background-size: var(--intro-gradient-width) 100%;
  background-position: calc(var(--letter-offset, 0px) - var(--intro-title-width)) 50%;
  opacity: 1;
  animation-name: skn-intro-gradient-restored;
  animation-duration: 2.4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.skn-phone-intro.intro-ready .intro-title .intro-character {
  animation-play-state: running;
}
@keyframes skn-intro-gradient-restored {
  from { background-position: calc(var(--letter-offset, 0px) - var(--intro-title-width)) 50%; }
  to { background-position: var(--letter-offset, 0px) 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skn-phone-intro .intro-title .intro-character {
    animation: none !important;
    background-position: var(--letter-offset, 0px) 50%;
  }
}

/* Mobil und Tablet: statische Achse mit gleichmäßigem Überstand. */
@media (max-width: 1024px) {
  html body .portfolio-page .portfolio-packet .packet-gallery::before {
    top: -24px;
    bottom: -24px;
  }
}

/* 2026-10-21: kompakte Navigation; Animation nutzt dieselben Zeilenmaße. */
html .skn-phone-menu:not([hidden]) { width: 33.333333vw; }
html .skn-phone-menu .phone-menu-row { padding-inline: .5em; white-space: normal; overflow-wrap: anywhere; }

/* Sichtbarer Rahmen um das Symbol; die große Touchfläche bleibt erhalten. */
html body > .theme-toggle::before {
  inset: auto;
  width: 28px;
  height: 28px;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: var(--theme-frame-opacity, 1);
}
html body > .theme-toggle .theme-toggle-track {
  position: relative;
  width: 28px;
  height: 28px;
}
html body > .theme-toggle .theme-toggle-thumb,
html body > .theme-toggle[aria-pressed='true'] .theme-toggle-thumb {
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  transform: translate(-50%, -50%);
}
@media (min-width: 1025px) {
  html body > .theme-toggle::before {
    width: 38px; height: 58px;
    left: calc(50% - 19px); top: calc(50% - 29px);
    border-radius: 29px;
  }
}

/* Startseite: waagerechte 1px-Achse hinter dem gesamten unveränderten Raster. */
html body.home .works { position: relative; isolation: isolate; }
html body.home .works::before {
  content: ''; position: absolute;
  top: calc(50% - .5px); left: calc(-1 * var(--home-grid-left, 0px)); right: auto;
  height: 1px; width: var(--home-viewport-width, 100vw);
  background: var(--muted); opacity: .4;
  pointer-events: none; z-index: -1;
}
html body.home .works .work-card { z-index: 1; }

/* Mobil/Tablet: größere Navigation; bei wenig Querformat-Höhe intern scrollbar. */
@media (max-width: 1024px) {
  html .skn-phone-menu.is-touch-sized:not([hidden]) {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html .skn-phone-menu.is-touch-sized .phone-menu-row {
    min-height: 44px;
    flex-shrink: 0;
    white-space: normal;
    overflow-wrap: normal;
  }
  html .skn-phone-menu.is-touch-sized .phone-menu-back {
    position: sticky;
    display: block;
    top: 0;
    width: 44px;
    height: 44px;
    margin: 0 0 8px;
    z-index: 2;
    background: var(--paper);
  }
  /* Gleiche 1px-Achse, Farbe, Deckkraft und 24px-Überstände wie in Galerien. */
  html body.home .works::before {
    top: -24px;
    bottom: -24px;
    left: calc(50% - .5px);
    right: auto;
    width: 1px;
    height: auto;
  }
}

/* H1: gemeinsame weiche Verlaufsmaske; Farbverlauf und Schriften bleiben erhalten. */
.skn-phone-intro .intro-way .intro-character { animation-duration: .4s; }
.skn-phone-intro .intro-dot { animation-delay: 1.8s; animation-duration: .5s; }
.skn-phone-intro .intro-dot:nth-child(2) { animation-delay: 2.35s; }
.skn-phone-intro .intro-dot:nth-child(3) { animation-delay: 2.9s; }
.skn-phone-intro .intro-arrow {
  display: inline-block;
}
.skn-phone-intro .intro-arrow > span {
  display: inline-block;
  animation: skn-arrow-wiggle 2.4s ease-in-out infinite paused;
}
.skn-phone-intro.intro-ready .intro-arrow > span {
  animation-play-state: running;
}
@keyframes skn-arrow-wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  70% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  90% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .skn-phone-intro .intro-title {
    animation: none !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .skn-phone-intro .intro-arrow,
  .skn-phone-intro .intro-arrow > span { animation: none !important; }
}


/* „this way“ wie die Namenszeile einblenden, danach dreimal sanft wackeln. */
.skn-phone-intro .intro-way-reveal {
  display:inline-flex; align-items:center; gap:.35em;
  -webkit-mask-image:none;
  mask-image:none;
  opacity:0;
  transform-origin:50% 85%;
  animation:skn-intro-enter .45s ease-in 2.3s both paused,
    skn-way-wiggle .85s cubic-bezier(.4,0,.2,1) 2.75s 2 normal none paused;
}
@keyframes skn-way-wiggle {
  0%, 100% {transform:translate(0,0) rotate(0)}
  10% {transform:translate(0,2px) rotate(0)}
  25% {transform:translate(0,-12px) rotate(-6deg)}
  40% {transform:translate(0,-10px) rotate(7deg)}
  55% {transform:translate(0,-8px) rotate(-6deg)}
  70% {transform:translate(0,-6px) rotate(4deg)}
  85% {transform:translate(0,1px) rotate(-1deg)}
}
.skn-phone-intro .intro-way .intro-character {opacity:1;animation:none;will-change:auto}
.skn-phone-intro .intro-way .intro-dot {
  display:inline-block;
  animation:skn-intro-dot-rise .5s cubic-bezier(.22,1,.36,1) 1.8s both paused;
}
.skn-phone-intro .intro-way .intro-dot:nth-child(2) {animation-delay:2.4s}
.skn-phone-intro .intro-way .intro-dot:nth-child(3) {animation-delay:3s}
.skn-phone-intro.intro-ready .intro-way-reveal,
.skn-phone-intro.intro-ready .intro-way .intro-dot {animation-play-state:running}
@keyframes skn-intro-dot-rise {
  from {opacity:0;transform:translateY(.4em)}
  to {opacity:1;transform:translateY(0)}
}
.skn-phone-intro .intro-way:focus-visible .intro-way-reveal {
  animation:none; opacity:1; -webkit-mask-image:none; mask-image:none;
}
@media (prefers-reduced-motion:reduce) {
  .skn-phone-intro .intro-way-reveal {animation:none !important;opacity:1 !important;transform:none;-webkit-mask-image:none;mask-image:none}
  .skn-phone-intro .intro-way .intro-dot {animation:none !important;opacity:1;transform:none}
}

/* Bildtextur: unabhängige Ebene, Original-H1 bleibt unverändert.
   Skalierung, Mischmodus, Dauer und Start lassen sich hier getrennt anpassen. */
@property --skn-texture-hole {
  syntax:'<percentage>';
  inherits:false;
  initial-value:160%;
}
.skn-phone-intro .intro-title {
  --intro-texture-scale:1.18;
  --intro-texture-duration:5s;
  --intro-texture-delay:.8s;
  --intro-texture-blend:multiply;
  isolation:isolate;
}
.skn-phone-intro .intro-title > .intro-texture-layer {
  position:absolute; inset:0; display:block;
  margin:0; padding:0; border:0;
  pointer-events:none;
  font:inherit; line-height:inherit;
  letter-spacing:inherit; word-spacing:inherit; white-space:inherit;
  mix-blend-mode:var(--intro-texture-blend);
  opacity:0;
  --skn-texture-hole:160%;
  -webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,
    transparent calc(var(--skn-texture-hole) - 22%), #000 calc(var(--skn-texture-hole) + 6%));
  mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,
    transparent calc(var(--skn-texture-hole) - 22%), #000 calc(var(--skn-texture-hole) + 6%));
  animation:skn-intro-texture-grow var(--intro-texture-duration) ease-in-out var(--intro-texture-delay) both paused;
}
.skn-phone-intro .intro-title .intro-texture-glyph {
  display:inline-block; white-space:pre;
  background-image:var(--intro-texture-image);
  background-repeat:no-repeat;
  background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.skn-phone-intro.intro-ready.intro-texture-ready .intro-texture-layer {
  opacity:1; animation-play-state:running;
}
@keyframes skn-intro-texture-grow {
  from {--skn-texture-hole:160%}
  to {--skn-texture-hole:-30%}
}
@media (prefers-reduced-motion:reduce) {
  .skn-phone-intro .intro-title > .intro-texture-layer {
    animation:none; -webkit-mask-image:none; mask-image:none;
  }
}

/* Textur von Beginn an; nur die gemeinsame H1-Maske blendet sie ein. */
.skn-phone-intro .intro-title > .intro-texture-layer { opacity:1; animation:none; mask-image:none; -webkit-mask-image:none; }

/* Desktop and tablet navigation share one row between both controls. */
@media (min-width: 701px) {
  html .skn-phone-menu.is-desktop-horizontal:not([hidden]) {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    background: var(--paper);
    white-space: nowrap;
  }
  html .skn-phone-menu.is-desktop-horizontal .phone-menu-row {
    flex: 1 0 auto;
    width: auto;
    height: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--horizontal-padding, 12px);
    background: transparent;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  html .skn-phone-menu.is-desktop-horizontal > * + * {
    border-left: 0;
    position: relative;
  }
  html .skn-phone-menu.is-desktop-horizontal .phone-menu-back {
    position: static;
    flex: 0 0 48px;
    align-self: stretch;
    width: 48px;
    height: auto;
    min-height: 44px;
    padding: 0;
  }
  html .skn-phone-menu.is-desktop-horizontal > :focus-visible {
    outline-offset: -4px;
  }
  html body.phone-menu-open > .menu-toggle .phone-burger-lines { opacity: 1; }
  html body.phone-menu-open > .site,
  html body.phone-menu-open > #wpadminbar,
  html body.phone-menu-open > .theme-toggle {
    filter: none !important;
    pointer-events: auto;
  }
}

/* Compact navigation: separators follow the type size and stay halfway between labels. */
html body > .menu-toggle,
html body > .menu-toggle:focus,
html body > .menu-toggle:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html body > .menu-toggle:focus-visible .phone-burger-lines { opacity: .6; }
@media (min-width: 701px) {
  html .skn-phone-menu.is-desktop-horizontal .phone-menu-row { flex: 1 0 auto; }
  html .skn-phone-menu.is-desktop-horizontal > * + *::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.45em;
    background: var(--ink);
    transform: translateY(-50%);
    pointer-events: none;
  }
  html .skn-phone-menu.is-desktop-horizontal .phone-menu-back { flex-basis: 36px; width: 36px; }
}

/* Mobile navigation: one opaque canvas above gallery-weight viewport lines. */
@media (max-width: 700px) {
  html .skn-phone-menu.is-touch-sized:not([hidden]) {
    display: block;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    padding: 20px 0;
    background: transparent;
    color: #000;
    font-weight: 600;
    line-height: calc(1em + 3pt);
  }
  html .skn-phone-menu.is-touch-sized::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(222 222 222 / .5);
    z-index: -1;
    pointer-events: none;
  }
  html[data-theme='dark'] .skn-phone-menu.is-touch-sized { color: #dedede; }
  html[data-theme='dark'] .skn-phone-menu.is-touch-sized::before { background: rgb(48 48 46 / .5); }
  html .skn-phone-menu.is-touch-sized .phone-menu-row {
    position: relative;
    background: transparent;
    color: inherit !important;
    font-weight: 600;
    line-height: calc(1em + 3pt);
    min-height: 0;
    white-space: nowrap;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }
  html .skn-phone-menu.is-touch-sized .phone-menu-row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right,
      var(--muted) 0 calc(50% - var(--label-width, 160px) / 2 - 8px),
      transparent calc(50% - var(--label-width, 160px) / 2 - 8px) calc(50% + var(--label-width, 160px) / 2 + 8px),
      var(--muted) calc(50% + var(--label-width, 160px) / 2 + 8px) 100%);
    opacity: .4;
    z-index: -2;
    pointer-events: none;
  }
  html .skn-phone-menu.is-touch-sized .phone-menu-row::after { content: none; }
  html .skn-phone-menu.is-touch-sized .phone-menu-back {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 40px;
    margin: 0;
    color: inherit;
    background: transparent;
  }
  html .skn-phone-menu.is-transforming .phone-menu-row,
  html .skn-phone-menu.is-transforming .phone-menu-back { visibility: visible; }
  html body.phone-menu-open > .menu-toggle .phone-burger-lines { opacity: 1; }
}

/* Mobile canvas corners and alternating line depth. */
@media (max-width: 700px) {
  html .skn-phone-menu.is-touch-sized::before { border-radius: 5px; }
  html .skn-phone-menu.is-touch-sized .phone-menu-row.line-in-front::before { z-index: 0; }
  html .skn-phone-menu.is-touch-sized .phone-menu-row:not(.line-in-front)::before { z-index: -2; }
}