/* Blaetterkatalog Tennis Year Book (viewer.js) */
@font-face {font-family: 'ProximaNova-Regular'; src: url('/global/wGlobal/layout/webfonts/39877D_11_0.woff2') format('woff2'), url('/global/wGlobal/layout/webfonts/39877D_11_0.woff') format('woff'); font-display: swap;}
@font-face {font-family: 'ProximaNova-Bold'; src: url('/global/wGlobal/layout/webfonts/39877D_6_0.woff2') format('woff2'), url('/global/wGlobal/layout/webfonts/39877D_6_0.woff') format('woff'); font-display: swap;}

:root {
  --navy: #001E34;
  --blue: #0074AF;
  --muted: #5A6E7D;
  --bg: #ECEEF0;
  --bar: 52px;
}

* {box-sizing: border-box;}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: 'ProximaNova-Regular', Arial, sans-serif;
  overflow: hidden;
}

.yb {position: relative; height: 100vh; display: flex; flex-direction: column;}

/* Werkzeugleiste */
.ybBar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--bar);
  padding: 0 8px;
  background: var(--navy);
  color: #FFFFFF;
  flex: 0 0 auto;
}
.ybBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.ybBtn svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.ybBtn:hover {background: rgba(255,255,255,0.14);}
.ybBtn:focus {outline: none;}
.ybBtn:focus-visible, .ybJump input:focus-visible, .ybThumbs button:focus-visible, .ybResults button:focus-visible, .ybPanel input:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--blue);
}
.ybBtn[disabled] {opacity: 0.35; cursor: default; background: transparent;}
.ybBtn[aria-pressed="true"], .ybBtn[aria-expanded="true"] {background: rgba(255,255,255,0.22);}
.ybPdf {background: #D9000D; margin-left: 4px; font-family: 'ProximaNova-Bold', Arial, sans-serif;}
.ybPdf:hover {background: #BE000B;}
.ybSpacer {flex: 1;}
.ybJump {display: flex; align-items: center; gap: 6px; margin: 0 4px; font-size: 14px; white-space: nowrap;}
.ybJump input {
  width: 64px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  text-align: center;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
}

/* Buehne */
.ybStage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  touch-action: pan-y;
  user-select: none;
}
.yb.zoomed .ybStage {overflow: auto; align-items: flex-start; justify-content: flex-start; touch-action: auto; cursor: grab;}
.ybBook {position: relative; display: flex; perspective: 2400px; flex: 0 0 auto;}
.ybSlot {position: relative; background: #FFFFFF; box-shadow: 0 2px 12px rgba(0,30,52,0.18); cursor: pointer;}
.ybSlot img, .ybLeaf img {display: block; width: 100%; height: 100%;}
.ybSlot.empty {background: transparent; box-shadow: none; cursor: default;}
.ybSlot.empty img {visibility: hidden;}
.ybLeft::after {
  /* Bundschatten der Doppelseite */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(to left, rgba(0,0,0,0.18), rgba(0,0,0,0));
  pointer-events: none;
}
.ybRight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(to right, rgba(0,0,0,0.18), rgba(0,0,0,0));
  pointer-events: none;
}
.ybSlot.empty::after, .single .ybSlot::after {display: none;}
.single .ybLeft {display: none;}

/* Umblaettern (Doppelseite) */
.ybLeaf {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.3, 1);
  z-index: 3;
}
.ybLeaf.next {transform-origin: left center;}
.ybLeaf.prev {transform-origin: right center;}
.ybFace {position: absolute; inset: 0; backface-visibility: hidden; background: #FFFFFF; box-shadow: 0 2px 12px rgba(0,30,52,0.25);}
.ybFace.back {transform: rotateY(180deg);}

/* Einzelseite: kurzes Schieben */
.single .ybRight img {transition: opacity 0.18s ease;}
.single .ybRight.fading img {opacity: 0;}

@media (prefers-reduced-motion: reduce) {
  .ybLeaf {transition: none;}
  .single .ybRight img {transition: none;}
}

/* Panels: Uebersicht und Suche */
.ybPanel {
  position: absolute;
  top: var(--bar);
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  z-index: 10;
  padding: 16px;
  overflow: auto;
  background: #FFFFFF;
  box-shadow: -4px 0 16px rgba(0,30,52,0.2);
}
.ybGridPanel {left: 0; width: auto;}
.ybPanel label {display: block; margin-bottom: 6px; font-family: 'ProximaNova-Bold', Arial, sans-serif;}
.ybPanel input {width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--muted); border-radius: 6px; font: inherit; font-size: 16px; color: var(--navy);}
.ybHint {color: var(--muted); font-size: 14px;}
.ybResults, .ybThumbs {list-style: none; margin: 0; padding: 0;}
.ybResults button {
  display: block;
  width: 100%;
  margin: 0 0 8px 0;
  padding: 10px 12px;
  border: 1px solid #DCE1E5;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  line-height: 19px;
  text-align: left;
  cursor: pointer;
}
.ybResults button:hover {border-color: var(--blue);}
.ybResults b {display: block; font-family: 'ProximaNova-Bold', Arial, sans-serif;}
.ybResults mark {background: #FFE27A; color: inherit;}
.ybThumbs {display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px;}
.ybThumbs button {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ybThumbs button[aria-current="true"] {border-color: var(--blue);}
.ybThumbs img {display: block; width: 100%; aspect-ratio: 1 / 1.4143; background: #F2F4F5; box-shadow: 0 1px 4px rgba(0,30,52,0.2);}
.ybThumbs span {display: block; padding: 4px 0 2px 0;}

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

/* Schmale Leiste: Beschriftung des PDF-Buttons ausblenden, weniger wichtige Buttons weg */
@media (max-width: 560px) {
  .ybPdf span {display: none;}
  .ybBtn[data-act="first"], .ybBtn[data-act="last"] {display: none;}
  .ybJump input {width: 52px;}
}
@media (max-width: 400px) {
  /* Vollbild fuer Elemente gibt es auf dem iPhone ohnehin nicht */
  .ybBtn[data-act="zoom"], .ybBtn[data-act="full"] {display: none;}
  .ybBar {padding: 0 4px; gap: 0;}
  .ybBtn {min-width: 36px; padding: 0 5px;}
  .ybJump {margin: 0 2px; gap: 4px; font-size: 13px;}
  .ybJump input {width: 46px;}
}