/* Weihnachtsseiten DE/RO: Bildset + 3D-Gutschein ganz oben, wie die Weihnachtskarte der Startseite (12.10.2026).
   Bilder immer ganz (Stani 12.10.2026): nur width:100%/height:auto, kein object-fit, keine feste Höhe.
   Raster aus den echten Formaten: links 4:5 + 1:1, rechts 1:1 + 4:5, dadurch beide Spalten gleich hoch. */
.gx-oben{--gx-qa:cubic-bezier(.32,.72,0,1)}
:root .gaby-article-hero.gx-oben{display:block;min-height:0;padding:1rem 0 .25rem;background:var(--gaby-light,#f7f4f0);background-image:none}
:root .gaby-article-hero.gx-oben::after{content:none}
:root .gx-oben .gx-oben__inner{display:grid;grid-template-areas:"kopf" "set" "gut";gap:12px;max-width:1120px;padding:0 1rem}
.gx-oben__kopf{grid-area:kopf;min-width:0}
:root .gx-oben h1{margin-bottom:.4rem}

.gx-oben .v3-xset{grid-area:set;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;justify-self:center;width:100%;max-width:310px;color:inherit;text-decoration:none}
.gx-oben .v3-xset__sp{display:grid;gap:8px}
.gx-oben .v3-xset img{display:block;width:100%;height:auto;border-radius:10px;transition:transform .6s var(--gx-qa)}
.gx-oben .v3-xset:hover img{transform:translateY(-3px)}
.gx-oben .v3-xset:focus-visible{outline:2px solid var(--gold-dunkel,#7d6210);outline-offset:4px;border-radius:12px}

.gx-oben .v3-gutschein{grid-area:gut;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);align-items:center;gap:16px;justify-self:center;width:100%;max-width:400px;color:inherit;text-decoration:none}
.gx-oben .v3-gutschein__stapel{position:relative;display:block;width:100%;aspect-ratio:2.5;perspective:900px}
.gx-oben .v3-gutschein__stapel>*{position:absolute;left:0;width:88%;border-radius:6px;box-shadow:0 2px 4px #3c280a1f,0 20px 30px -16px #3c280a8c;transform:rotateX(calc(16deg + var(--neig,0)*8deg)) rotateY(-12deg) rotate(-2deg);transition:transform .6s var(--gx-qa)}
.gx-oben .v3-gutschein__stapel>img{top:24%;left:12%;height:auto;rotate:3deg;filter:brightness(.97)}
.gx-oben .v3-gutschein__vorne{top:0;overflow:hidden}
.gx-oben .v3-gutschein__vorne img{display:block;width:100%;height:auto}
.gx-oben .v3-gutschein__vorne::after{content:"";position:absolute;top:-10%;left:-140%;width:140%;height:120%;background:linear-gradient(120deg,#0000 30%,#fff6d6d9 48%,#0000 66%);pointer-events:none}
.gx-oben .v3-gutschein:is([data-glanz],:hover,:focus-visible) .v3-gutschein__vorne::after{animation:gx-glanz 1.2s ease-out}
.gx-oben .v3-gutschein:is(:hover,:focus-visible) .v3-gutschein__stapel>*{transform:rotateX(6deg) rotateY(-4deg)}
.gx-oben .v3-gutschein:focus-visible{outline:2px solid var(--gold-dunkel,#7d6210);outline-offset:6px;border-radius:10px}
.gx-oben .v3-xgeschenk__t{display:grid;gap:0;text-align:left}
.gx-oben .v3-xgeschenk__t strong{font-family:var(--f-titel,Georgia,"Times New Roman",serif);font-weight:400;font-size:clamp(18px,4.8vw,22px);line-height:1.2;color:var(--tinte,#2a241d);text-wrap:balance}
.gx-oben .v3-xgeschenk__t .v3-textlink{display:inline-block;padding-block:8px 4px;color:var(--gold-dunkel,#7d6210);font:600 15px/1.3 var(--f-text,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px}
@keyframes gx-glanz{0%{transform:translateX(-120%) skewX(-20deg);opacity:0}20%{opacity:.85}100%{transform:translateX(140%) skewX(-20deg);opacity:0}}

@media (min-width:600px){
  .gx-oben .v3-xset{max-width:440px}
}
@media (min-width:900px){
  :root .gaby-article-hero.gx-oben{padding:2rem 0 1rem}
  :root .gx-oben .gx-oben__inner{grid-template-columns:minmax(0,440px) minmax(0,1fr);grid-template-areas:"set kopf" "set gut";column-gap:56px;row-gap:28px;align-items:center}
  .gx-oben__kopf{align-self:end}
  .gx-oben .v3-xset{max-width:none}
  .gx-oben .v3-gutschein{align-self:start;justify-self:start;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:22px;max-width:520px}
}
@media (prefers-reduced-motion:reduce){
  .gx-oben .v3-xset img,.gx-oben .v3-gutschein__stapel>*{transition:none}
  .gx-oben .v3-xset:hover img{transform:none}
  .gx-oben .v3-gutschein .v3-gutschein__vorne::after{animation:none!important}
}