/* Fashion Kiosk — Layout: Navigation, Overlay, Suche, Footer, Service-Streifen.
   Baut ausschliesslich auf den Tokens aus base.css auf. Keine neuen Farben. */

:root {
  --fk-nav-top: clamp(0.75rem, 1.4vw, 1.25rem);
  --fk-nav-pad: 0.5rem;
  --fk-nav-space: calc(var(--fk-nav-top) + 5.5rem);
  --fk-glass: rgba(255, 255, 255, 0.72);
  --fk-scrollbar: 0px;
}

/* Ohne JavaScript bleiben Reveals sichtbar. */
html:not(.fk-js) .fk-reveal {
  opacity: 1;
  transform: none;
}

/* Seitengeruest: der Footer sitzt auch auf kurzen Seiten unten. */
body.fk-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.fk-main {
  flex: 1 0 auto;
  padding-top: var(--fk-nav-space);
}
.fk-main--flush { padding-top: 0; }

/* Einzelne Templates bringen einen eigenen fk-main-Wrapper mit.
   Dann darf der Abstand zur Navigationsinsel nicht doppelt zaehlen. */
.fk-main .fk-main { padding-top: 0; }

body.fk-locked {
  overflow: hidden;
  padding-right: var(--fk-scrollbar, 0px);
}
body.fk-locked .fk-nav { padding-right: calc(var(--fk-gutter) + var(--fk-scrollbar, 0px)); }

/* ------------------------------------------------------------- Skip-Link */
.fk-skip {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 999px 999px;
  background: var(--fk-surface);
  color: var(--fk-ink);
  font-size: var(--fk-size-small);
  font-weight: 500;
  box-shadow: var(--fk-shadow-soft);
  transition: transform 0.45s var(--fk-ease);
}
.fk-skip:focus { transform: translate(-50%, 0); }

/* ------------------------------------------------------- Navigationsinsel */
.fk-nav {
  position: fixed;
  top: var(--fk-nav-top);
  left: 0;
  right: 0;
  z-index: 80;
  padding-inline: var(--fk-gutter);
  pointer-events: none;
}
body.admin-bar .fk-nav { top: calc(var(--fk-nav-top) + 32px); }

.fk-nav__inner {
  position: relative;
  pointer-events: auto;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: var(--fk-nav-pad) calc(var(--fk-nav-pad) + 0.125rem) var(--fk-nav-pad) clamp(1rem, 2.4vw, 1.75rem);
  border-radius: 999px;
  background: var(--fk-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--fk-line), var(--fk-shadow-soft);
  transition: padding 0.55s var(--fk-ease), box-shadow 0.55s var(--fk-ease),
    background-color 0.55s var(--fk-ease);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .fk-nav__inner { background: rgba(255, 255, 255, 0.95); }
}

.fk-nav--compact .fk-nav__inner {
  --fk-nav-pad: 0.3125rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px var(--fk-line-strong), var(--fk-shadow-lift);
}

.fk-nav__brand {
  flex: none;
  font-family: var(--fk-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.045em;
  color: var(--fk-ink);
  white-space: nowrap;
  padding-block: 0.35rem;
}
.fk-nav__brand--logo { display: flex; align-items: center; }
.fk-nav__brand--logo img { max-height: 2rem; width: auto; }

/* Hauptmenue (ab 1024px) */
.fk-nav__menu { display: none; }

.fk-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.2vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fk-nav__list a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--fk-muted);
  white-space: nowrap;
  transition: color 0.4s var(--fk-ease);
}
.fk-nav__list a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--fk-ease);
}
.fk-nav__list a:hover,
.fk-nav__list a:focus-visible { color: var(--fk-ink); }
.fk-nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.fk-nav__list .current-menu-item > a,
.fk-nav__list .current-menu-parent > a,
.fk-nav__list .current-menu-ancestor > a,
.fk-nav__list .current_page_item > a { color: var(--fk-ink); }

/* Aktionen rechts */
.fk-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

.fk-icon-btn {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fk-ink);
  transition: background-color 0.4s var(--fk-ease), transform 0.4s var(--fk-ease);
}
.fk-icon-btn:hover { background: rgba(20, 20, 20, 0.05); }
.fk-icon-btn:active { transform: scale(0.94); }
.fk-icon-btn svg { width: 1.1875rem; height: 1.1875rem; }

.fk-nav__cart-count {
  position: absolute;
  top: 0.3125rem;
  right: 0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: 999px;
  background: var(--fk-ink);
  color: #fff;
  font-family: var(--fk-font-body);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 0 0 2px var(--fk-glass);
  transition: transform 0.45s var(--fk-ease), opacity 0.45s var(--fk-ease);
}
.fk-nav__cart-count[data-empty="1"] { opacity: 0; transform: scale(0.5); }

/* Hamburger: zwei Linien, die sich zum X drehen */
.fk-burger {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.625rem;
}
.fk-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.55s var(--fk-ease), width 0.55s var(--fk-ease);
}
.fk-burger span:first-child { top: 0; transform-origin: center; }
.fk-burger span:last-child { bottom: 0; transform-origin: center; }
body.fk-menu-open .fk-burger span:first-child { transform: translateY(0.3125rem) rotate(45deg); }
body.fk-menu-open .fk-burger span:last-child { transform: translateY(-0.3125rem) rotate(-45deg); }

@media (min-width: 1024px) {
  .fk-nav__menu { display: block; flex: 1; }
  .fk-nav__list { justify-content: center; }
  .fk-nav__burger { display: none; }
}

/* --------------------------------------------------------------- Suchpanel */
.fk-search-panel {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  right: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.45s var(--fk-ease), transform 0.45s var(--fk-ease),
    visibility 0.45s var(--fk-ease);
}
.fk-search-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.fk-search-panel__shell {
  max-width: 34rem;
  margin-inline: auto;
  background: rgba(244, 241, 236, 0.85);
  box-shadow: inset 0 0 0 1px var(--fk-line), var(--fk-shadow-lift);
}
.fk-search-panel__core { padding: 0.75rem 0.75rem 0.25rem; }
.fk-search-panel__hint {
  margin: 0.35rem 0.5rem 0.6rem;
  font-size: var(--fk-size-small);
  color: var(--fk-muted);
}

.fk-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.03);
  padding: 0.25rem 0.25rem 0.25rem 1.125rem;
  transition: box-shadow 0.4s var(--fk-ease), background-color 0.4s var(--fk-ease);
  box-shadow: inset 0 0 0 1px transparent;
}
.fk-search:focus-within {
  background: var(--fk-surface);
  box-shadow: inset 0 0 0 1px var(--fk-line-strong);
}
.fk-search__input {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--fk-ink);
  font-family: var(--fk-font-body);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.fk-search__input::placeholder { color: var(--fk-muted); }
.fk-search__input:focus { outline: none; }
.fk-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.fk-search__submit {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fk-ink);
  color: #fff;
  transition: transform 0.4s var(--fk-ease), background-color 0.4s var(--fk-ease);
}
.fk-search__submit:hover { background: #000; }
.fk-search__submit:active { transform: scale(0.94); }
.fk-search__submit svg { width: 1.0625rem; height: 1.0625rem; }

/* ------------------------------------------------------------- Menue-Overlay */
.fk-overlay {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: var(--fk-paper);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.5s var(--fk-ease), visibility 0.5s var(--fk-ease);
}
body.admin-bar .fk-overlay { top: 32px; }
.fk-overlay.is-open { opacity: 1; visibility: visible; }

.fk-overlay__nav {
  padding-top: calc(var(--fk-nav-top) + 6rem);
  padding-bottom: 3rem;
}
.fk-overlay__eyebrow { margin: 0 0 1.5rem; }

.fk-overlay__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fk-line);
}
.fk-overlay__list > li {
  border-bottom: 1px solid var(--fk-line);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s var(--fk-ease), transform 0.6s var(--fk-ease);
}
.fk-overlay__list > li > a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--fk-font-display);
  font-size: clamp(1.75rem, 8vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--fk-ink);
  transition: transform 0.5s var(--fk-ease), color 0.4s var(--fk-ease);
}
.fk-overlay__list > li > a:hover { transform: translateX(0.375rem); }

.fk-overlay__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s var(--fk-ease), transform 0.6s var(--fk-ease);
}
.fk-overlay__foot a { min-height: 2.75rem; display: inline-flex; align-items: center; }

.fk-overlay.is-open .fk-overlay__list > li,
.fk-overlay.is-open .fk-overlay__foot { opacity: 1; transform: none; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(1) { transition-delay: 90ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(2) { transition-delay: 150ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(3) { transition-delay: 210ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(4) { transition-delay: 270ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(5) { transition-delay: 330ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(6) { transition-delay: 390ms; }
.fk-overlay.is-open .fk-overlay__list > li:nth-child(n + 7) { transition-delay: 450ms; }
.fk-overlay.is-open .fk-overlay__foot { transition-delay: 480ms; }

@media (min-width: 1024px) {
  .fk-overlay { display: none; }
}

/* ------------------------------------------------------- Service-Streifen */
.fk-service {
  background: var(--fk-ink);
  color: rgba(255, 255, 255, 0.86);
}
.fk-service__grid {
  list-style: none;
  margin: 0;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.125rem;
  grid-template-columns: 1fr;
}
.fk-service__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: var(--fk-size-small);
  letter-spacing: 0.005em;
}
.fk-service__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
}
.fk-service__icon svg { width: 1.0625rem; height: 1.0625rem; }
.fk-service :focus-visible { outline-color: #fff; }

@media (min-width: 768px) {
  .fk-service__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

/* ------------------------------------------------------------------ Footer */
.fk-footer { flex: none; }
.fk-footer__body {
  background: var(--fk-sand);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.fk-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
.fk-footer__brand {
  display: inline-block;
  font-family: var(--fk-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--fk-ink);
}
.fk-footer__claim {
  margin: 0.75rem 0 1.5rem;
  max-width: 34ch;
  color: var(--fk-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.fk-footer__cta { margin-top: 0.25rem; }

.fk-footer__title {
  margin: 0 0 0.75rem;
  font-family: var(--fk-font-body);
  font-size: var(--fk-size-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fk-muted);
}

.fk-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fk-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  color: var(--fk-body);
  transition: color 0.4s var(--fk-ease), transform 0.4s var(--fk-ease);
}
.fk-footer__links a:hover { color: var(--fk-ink); transform: translateX(0.1875rem); }

.fk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--fk-line);
  font-size: var(--fk-size-small);
  color: var(--fk-muted);
}
.fk-footer__bottom p { margin: 0; }
.fk-footer__credit a {
  color: var(--fk-body);
  border-bottom: 1px solid var(--fk-line-strong);
  padding-bottom: 1px;
  transition: color 0.4s var(--fk-ease), border-color 0.4s var(--fk-ease);
}
.fk-footer__credit a:hover { color: var(--fk-ink); border-color: var(--fk-ink); }

@media (min-width: 640px) {
  .fk-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .fk-footer__col--brand { grid-column: 1 / -1; }
  .fk-footer__links a { min-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .fk-footer__grid { grid-template-columns: 1.5fr repeat(3, 1fr); align-items: start; }
  .fk-footer__col--brand { grid-column: auto; padding-right: 2rem; }
}

/* ------------------------------------------------------- Adminleiste mobil */
@media screen and (max-width: 782px) {
  body.admin-bar .fk-nav { top: calc(var(--fk-nav-top) + 46px); }
  body.admin-bar .fk-overlay { top: 46px; }
}