.catalogSection{
  position:relative;
  margin:72px 0 86px;
}
.catalogIntro{
  max-width:780px;
  margin:0 auto 28px;
  text-align:center;
}
.catalogEyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  color:#8b6537;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.catalogEyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:#d8b16f;
}
.catalogIntro h2{
  margin:0;
  color:#171b23;
  font-size:clamp(30px,4.5vw,50px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.catalogIntro p{
  max-width:690px;
  margin:17px auto 0;
  color:#626a76;
  font-size:17px;
  line-height:1.7;
}
.catalogExperience{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:22px 22px 26px;
  border:1px solid rgba(216,177,111,.23);
  border-radius:36px;
  color:#fff;
  background:
    radial-gradient(680px 380px at 4% 0%,rgba(216,177,111,.18),transparent 65%),
    radial-gradient(700px 460px at 100% 40%,rgba(12,73,57,.36),transparent 70%),
    linear-gradient(145deg,#171b23 0%,#10141a 54%,#0c201b 100%);
  box-shadow:0 32px 90px rgba(13,17,24,.28),inset 0 1px 0 rgba(255,255,255,.08);
  outline:none;
}
.catalogExperience::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.catalogExperience:focus-visible{
  box-shadow:0 0 0 3px rgba(216,177,111,.58),0 32px 90px rgba(13,17,24,.28);
}
.catalogStatus{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.catalogTopbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 2px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.catalogIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.catalogMark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:13px;
  color:#171b23;
  background:linear-gradient(135deg,#e3c487,#bd8f4d);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  font-size:20px;
}
.catalogIdentity strong{
  display:block;
  color:#fff;
  font-size:15px;
  letter-spacing:-.015em;
}
.catalogIdentity span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.56);
  font-size:12px;
}
.catalogActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.catalogAction{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font:inherit;
  font-size:13px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.catalogAction:hover{
  color:#fff;
  background:rgba(216,177,111,.17);
  border-color:rgba(216,177,111,.38);
  transform:translateY(-1px);
}
.catalogViewport{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:32px 10px 26px;
  perspective:2100px;
}
.catalogBook{
  position:relative;
  width:min(72vw,465px,calc(72vh * .7071));
  aspect-ratio:595.276/841.89;
  flex:0 0 auto;
  transform-style:preserve-3d;
  filter:drop-shadow(0 32px 24px rgba(0,0,0,.32));
}
.catalogBook::before{
  content:"";
  position:absolute;
  inset:1.4% -2.2% -1.6% 2%;
  border-radius:3px 10px 10px 3px;
  background:linear-gradient(90deg,#b99b6b 0,#e9dfce 4%,#f7f2e8 100%);
  transform:translateZ(-8px);
  box-shadow:8px 12px 22px rgba(0,0,0,.22);
}
.catalogSpine{
  position:absolute;
  top:0;
  bottom:0;
  left:-5px;
  z-index:130;
  width:8px;
  border-radius:8px 0 0 8px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(216,177,111,.5),rgba(255,255,255,.26),rgba(0,0,0,.18));
  box-shadow:4px 0 10px rgba(0,0,0,.26);
  transform:translateZ(12px);
}
.catalogSheet{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  border-radius:2px 9px 9px 2px;
  transition:transform .82s cubic-bezier(.68,.03,.28,1),filter .82s ease;
  will-change:transform;
}
.catalogSheet.is-before{
  transform:rotateY(-180deg);
  filter:brightness(.82);
}
.catalogPageFront,
.catalogPageBack{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:2px 9px 9px 2px;
  backface-visibility:hidden;
  background:#f7f4ed;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.catalogPageFront{
  transform:translateZ(1px);
}
.catalogPageFront::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.13),transparent 6%,transparent 87%,rgba(0,0,0,.05));
  mix-blend-mode:multiply;
  opacity:.44;
}
.catalogPageBack{
  transform:rotateY(180deg);
  background:
    linear-gradient(90deg,rgba(0,0,0,.07),transparent 8%),
    linear-gradient(135deg,#eee7db,#fffdf8 56%,#e7ddcd);
}
.catalogPageFront img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}
.catalogNav{
  position:relative;
  z-index:150;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(216,177,111,.35);
  border-radius:50%;
  color:#171b23;
  background:linear-gradient(135deg,#ead19d,#be8d49);
  box-shadow:0 17px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.45);
  font:inherit;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,opacity .2s ease,filter .2s ease;
}
.catalogNav:hover:not(:disabled){
  transform:translateY(-2px) scale(1.035);
  filter:brightness(1.08);
}
.catalogNav:disabled{
  opacity:.24;
  cursor:not-allowed;
  box-shadow:none;
}
.catalogBottom{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:18px 2px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.catalogCounter{
  color:rgba(255,255,255,.65);
  font-size:13px;
}
.catalogCounter strong{
  color:#e0be7d;
  font-size:16px;
}
.catalogDots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.catalogDot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  cursor:pointer;
  transition:width .25s ease,background .25s ease,transform .25s ease;
}
.catalogDot:hover{background:rgba(255,255,255,.55)}
.catalogDot[aria-current="true"]{
  width:26px;
  background:#d8b16f;
}
.catalogHint{
  justify-self:end;
  color:rgba(255,255,255,.45);
  font-size:12px;
}
.catalogExperience:fullscreen{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:20px 26px 22px;
  border:0;
  border-radius:0;
}
.catalogExperience:fullscreen .catalogViewport{
  min-height:0;
  flex:1 1 auto;
  padding:20px 10px;
}
.catalogExperience:fullscreen .catalogBook{
  width:min(62vw,550px,calc(76vh * .7071));
}
@media (max-width:760px){
  .catalogSection{margin:52px 0 64px}
  .catalogIntro{text-align:left;margin-bottom:22px}
  .catalogIntro h2{font-size:clamp(31px,9.5vw,43px)}
  .catalogIntro p{font-size:15px;line-height:1.65}
  .catalogExperience{padding:15px 14px 20px;border-radius:28px}
  .catalogTopbar{align-items:flex-start;padding-bottom:14px}
  .catalogIdentity span{display:none}
  .catalogMark{width:38px;height:38px}
  .catalogAction{width:42px;min-height:42px;padding:9px}
  .catalogActionText{display:none}
  .catalogViewport{min-height:0;gap:8px;padding:24px 0 20px}
  .catalogBook{width:min(72vw,390px,calc(67vh * .7071))}
  .catalogNav{width:42px;height:42px;font-size:23px}
  .catalogBottom{grid-template-columns:auto 1fr;padding-top:15px}
  .catalogDots{justify-content:flex-end}
  .catalogHint{display:none}
  .catalogExperience:fullscreen{padding:14px 14px 18px}
  .catalogExperience:fullscreen .catalogBook{width:min(74vw,430px,calc(72vh * .7071))}
}
@media (max-width:430px){
  .catalogExperience{margin-inline:-4px;padding-inline:10px}
  .catalogIdentity strong{font-size:13px}
  .catalogViewport{gap:4px}
  .catalogBook{width:min(70vw,325px,calc(64vh * .7071))}
  .catalogNav{width:38px;height:38px}
  .catalogDots{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .catalogSheet,.catalogAction,.catalogNav,.catalogDot{transition:none !important}
}

/* Neonblau-graue Website-Palette */
.catalogSection{
  overflow:hidden;
  padding:46px 30px 30px;
  border:1px solid rgba(98,233,255,.46);
  border-radius:40px;
  background:
    radial-gradient(560px 300px at 8% 0%,rgba(98,233,255,.25),transparent 68%),
    radial-gradient(620px 380px at 100% 55%,rgba(0,140,255,.3),transparent 72%),
    linear-gradient(138deg,#72869b 0%,#465d74 46%,#284b68 100%);
  box-shadow:0 28px 80px rgba(18,55,87,.28),inset 0 1px 0 rgba(255,255,255,.22);
}
.catalogEyebrow{color:#a9dcff}
.catalogEyebrow::before{background:#62e9ff;box-shadow:0 0 14px rgba(98,233,255,.8)}
.catalogIntro h2{color:#fff;text-shadow:0 8px 24px rgba(13,47,76,.24)}
.catalogIntro p{color:rgba(255,255,255,.84)}
.catalogExperience{
  border-color:rgba(98,233,255,.4);
  background:
    radial-gradient(620px 360px at 4% 0%,rgba(98,233,255,.2),transparent 68%),
    radial-gradient(700px 420px at 100% 50%,rgba(0,140,255,.34),transparent 72%),
    linear-gradient(145deg,#5d7288 0%,#3b536c 52%,#22577c 100%);
  box-shadow:0 28px 70px rgba(11,45,74,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.catalogExperience:focus-visible{
  box-shadow:0 0 0 3px rgba(98,233,255,.66),0 28px 70px rgba(11,45,74,.28);
}
.catalogTopbar,.catalogBottom{border-color:rgba(255,255,255,.18)}
.catalogMark{
  color:#fff;
  background:linear-gradient(135deg,#62e9ff,#168dff);
  box-shadow:0 0 24px rgba(33,183,255,.48),0 10px 24px rgba(16,75,124,.28);
}
.catalogIdentity strong{color:#fff}
.catalogIdentity span{color:rgba(255,255,255,.72)}
.catalogDotsMany{
  max-width:260px;
  flex-wrap:wrap;
  row-gap:8px;
}
@media (max-width:700px){
  .catalogDotsMany{
    grid-column:1/-1;
    max-width:none;
    justify-content:center;
  }
}
.catalogAction{
  color:#fff;
  border-color:rgba(169,220,255,.38);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.catalogAction:hover{
  color:#fff;
  border-color:rgba(98,233,255,.72);
  background:rgba(22,141,255,.3);
  box-shadow:0 0 22px rgba(33,183,255,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.catalogBook::before{
  background:linear-gradient(90deg,#5a7189 0,#a9bdd3 5%,#dbeaff 100%);
}
.catalogSpine{
  background:linear-gradient(90deg,rgba(15,40,64,.82),rgba(33,183,255,.72),rgba(255,255,255,.4),rgba(16,66,106,.3));
  box-shadow:0 0 16px rgba(33,183,255,.34),4px 0 10px rgba(13,48,78,.24);
}
.catalogPageBack{
  background:linear-gradient(135deg,#aebfd4,#edf7ff 56%,#8da0b5);
}
.catalogNav{
  color:#fff;
  border-color:rgba(169,220,255,.65);
  background:linear-gradient(135deg,#62e9ff,#168dff 64%,#005bff);
  box-shadow:0 0 26px rgba(33,183,255,.42),0 17px 34px rgba(17,66,106,.28),inset 0 1px 0 rgba(255,255,255,.42);
}
.catalogCounter{color:rgba(255,255,255,.78)}
.catalogCounter strong{color:#62e9ff;text-shadow:0 0 12px rgba(98,233,255,.55)}
.catalogDot{background:rgba(255,255,255,.34)}
.catalogDot:hover{background:#a9dcff}
.catalogDot[aria-current="true"]{background:#21b7ff;box-shadow:0 0 14px rgba(33,183,255,.72)}
.catalogHint{color:rgba(255,255,255,.66)}
@media (max-width:760px){
  .catalogSection{padding:30px 14px 18px;border-radius:30px}
  .catalogIntro{padding-inline:4px}
  .catalogExperience{border-radius:24px}
}