/* ==========================================================================
   Patek Philippe Gondolo Ladies First – Ergänzungen zum YOOtheme-Template
   --------------------------------------------------------------------------
   Schriften, Farben, Überschriften, Buttons und Abschnitte kommen vom Template
   (uk-*). Hier steht nur, was das Template nicht kennt: Kopfbereich mit
   Filmfenster, Kampagnenfilm, Kapitel-Triptychon, Porträts mit animierten
   Farbverläufen, Detail-Fächer, Handwerk-Bänder und die Kollektionsübersicht.
   Alle Klassen beginnen mit glf-; keine Regeln für html, body, uk-*, tm-*.
   --glf-top ist die Höhe des fixierten Website-Headers (misst glf.js).
   ========================================================================== */

.glf{--glf-top:0px;--glf-vh:calc(100vh - var(--glf-top));--glf-ease:cubic-bezier(.22,.61,.36,1);--glf-ease-io:cubic-bezier(.65,0,.35,1);position:relative}
@supports (height:100svh){.glf{--glf-vh:calc(100svh - var(--glf-top))}}
.glf video{max-width:none}
.glf [id^="glf-"]{scroll-margin-top:var(--glf-top)}

/* Kleine Versalzeile im Stil der Template-Buttons */
.glf-label{font-family:Interstate,"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:400;line-height:1.6;letter-spacing:2px;text-transform:uppercase}
/* Kursive der Hausschrift (eigene Schriftfamilie auf der Website) */
.glf-italic,.glf .glf-italic{font-family:"JZRCGO+Chapman-RegularItalic","NFFAKG+Chapman",Georgia,serif;font-style:italic;font-weight:400}
.glf-icon{flex:none;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* Wandernde Farbflächen (Kopfbereich und Porträts) */
@keyframes glf-drift-a{from{transform:translate(-18%,-12%) scale(1)}to{transform:translate(14%,16%) scale(1.18)}}
@keyframes glf-drift-b{from{transform:translate(16%,10%) scale(1.12)}to{transform:translate(-14%,-16%) scale(.94)}}
@keyframes glf-drift-c{from{transform:translate(-8%,18%) scale(.96)}to{transform:translate(18%,-10%) scale(1.14)}}
@keyframes glf-float{from{transform:translateY(6px)}to{transform:translateY(-8px)}}
@keyframes glf-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.55}}
@keyframes glf-pulse{from{opacity:.32;transform:scale(.96)}to{opacity:.62;transform:scale(1.04)}}
@keyframes glf-rise{from{opacity:0;transform:translateY(.3em)}to{opacity:1;transform:none}}

/* ---------- 01 Kopfbereich ----------
   Grundzustand (Smartphone, ohne JavaScript): Film in voller Höhe, Text darunter.
   Mit .glf--pin (breite Ansicht): Der Film bleibt stehen und zieht sich beim
   Scrollen zu einem kissenförmigen Fenster zusammen (31 × 34,8 mm). Daneben
   erscheinen Logo, Einleitung und die sechs Modelle auf warmem Dunkelbraun. */
@keyframes glf-glow{from{opacity:.55;transform:translate(-4%,3%) scale(.92)}to{opacity:1;transform:translate(4%,-3%) scale(1.08)}}
@keyframes glf-cycle{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:none}16.67%{opacity:1;transform:none}20.67%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
.glf-hero{--glf-lead:0px;position:relative;background:#1d1510}
.glf-hero__pin{position:relative;display:grid}
.glf-hero__glow{position:absolute;inset:0;overflow:hidden;background:linear-gradient(115deg,#2e2117 0%,#1d1510 55%,#15100c 100%)}
.glf-hero__glow i{position:absolute;border-radius:50%;will-change:transform}
/* warmes Licht in Patek-Gold hinter dem Filmfenster, atmet langsam */
.glf-hero__glow i:nth-child(1){width:74vmax;height:74vmax;right:-20vmax;top:50%;margin-top:-37vmax;background:radial-gradient(circle,rgba(198,186,130,.42) 0%,rgba(198,186,130,.15) 34%,rgba(198,186,130,0) 64%);animation:glf-glow 11s ease-in-out infinite alternate}
.glf-hero__glow i:nth-child(2){width:62vmax;height:62vmax;left:-26vmax;bottom:-36vmax;background:radial-gradient(circle,rgba(122,86,54,.55) 0%,rgba(122,86,54,0) 64%);animation:glf-drift-c 24s ease-in-out infinite alternate}
.glf-hero__glow i:nth-child(3){width:48vmax;height:48vmax;left:8%;top:-30vmax;background:radial-gradient(circle,rgba(198,186,130,.16) 0%,rgba(198,186,130,0) 62%);animation:glf-drift-a 28s ease-in-out infinite alternate}
.glf-hero__rings{display:none}
.glf-hero__frame{grid-area:1/1;position:relative;height:var(--glf-vh);min-height:520px;overflow:hidden;background:#1d1510}
.glf-hero__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glf-hero__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(51,37,27,.85) 0%,rgba(51,37,27,.25) 55%,rgba(51,37,27,0) 80%)}
.glf-hero__title{grid-area:1/1;align-self:end;position:relative;padding-bottom:calc(clamp(40px,8vh,90px) + var(--glf-lead));pointer-events:none}
.glf-hero__title h1{margin:0}
.glf-hero__title h1 em{display:block;padding-left:.5em}
.glf-hero__title h1 > *{animation:glf-rise 1.4s var(--glf-ease) both}
.glf-hero__title h1 em{animation-delay:.12s}
.glf-hero__manifest{grid-area:2/1;position:relative;padding:80px 0}
.glf-hero__manifest .uk-heading-small em{display:block}
.glf-hero__text{text-align:center}
.glf-hero__logo{display:block;width:150px;height:auto;margin:0 auto 36px}
.glf-hero__slot{display:none}
/* Die sechs Modelle im Wechsel: immer nur eine Uhr sichtbar, alle drei Sekunden die nächste.
   Die Dateien haben rundum viel durchsichtigen Rand, deshalb größer als ihr Rahmen gesetzt. */
.glf-cycle{margin-top:34px}
.glf-cycle::before{content:"";display:block;width:56px;height:1px;margin:0 auto 22px;background:rgba(198,186,130,.75)}
.glf-cycle__stage{position:relative;height:clamp(170px,25vh,270px);margin-top:14px}
.glf-cycle__item{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;opacity:0;animation:glf-cycle 18s linear infinite;animation-delay:calc(var(--n) * 3s)}
.glf-cycle__img{position:relative;display:block;height:calc(100% - 30px);aspect-ratio:10/19;overflow:hidden}
.glf-cycle__img img{position:absolute;left:50%;top:50%;height:130%;width:auto;max-width:none;translate:-50% -50%}
.glf-cycle__item figcaption{margin-top:10px;white-space:nowrap}

@media (min-width:640px){
  .glf-hero__frame::after{background:linear-gradient(270deg,rgba(51,37,27,.12) 0%,rgba(51,37,27,.8) 74%)}
}
@media (min-width:1001px){
  .glf--pin .glf-hero{--e:0;--t:1;--m:0;height:calc(var(--glf-vh) * 2.6);
    --fw:min(31vw,500px,calc(var(--glf-vh) * .62 * .8908));--fh:calc(var(--fw) * 1.1226);--right:max(40px,calc((100% - 1200px) / 2))}
  .glf--pin .glf-hero__pin{display:block;position:sticky;top:var(--glf-top);height:var(--glf-vh);overflow:hidden}
  .glf--pin .glf-hero__glow{opacity:var(--e)}
  .glf--pin .glf-hero__glow i:nth-child(1){right:auto;left:calc(100% - var(--right) - var(--fw) / 2 - 37vmax)}
  .glf--pin .glf-hero__rings{display:block;position:absolute;right:var(--right);top:calc((100% - var(--fh)) / 2);width:var(--fw);height:var(--fh);opacity:var(--m);pointer-events:none}
  .glf--pin .glf-hero__rings i{position:absolute;inset:calc(var(--i) * -20px);border:1px solid rgba(198,186,130,calc(.5 - var(--i) * .13));border-radius:30%/27%;animation:glf-breathe 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)}
  .glf--pin .glf-hero__frame{
    position:absolute;min-height:0;
    width:calc(100% - var(--e) * (100% - var(--fw)));
    height:calc(100% - var(--e) * (100% - var(--fh)));
    left:calc(var(--e) * (100% - var(--fw) - var(--right)));
    top:calc(var(--e) * (100% - var(--fh)) / 2);
    border-radius:calc(var(--e) * 30%)/calc(var(--e) * 27%);
    box-shadow:0 calc(var(--e) * 40px) calc(var(--e) * 90px) rgba(0,0,0,calc(var(--e) * .45));
  }
  .glf--pin .glf-hero__frame::after{opacity:calc(1 - var(--e) * 1.6)}
  .glf--pin .glf-hero__title{position:absolute;left:0;right:0;bottom:0;opacity:var(--t);transform:translateY(calc((1 - var(--t)) * -40px))}
  .glf--pin .glf-hero__title h1 em{padding-left:.9em}
  .glf--pin .glf-hero__manifest{position:absolute;inset:0;display:flex;align-items:center;padding:0;opacity:var(--m);transform:translateY(calc((1 - var(--m)) * 40px));pointer-events:none}
  .glf--pin .glf-hero__manifest .uk-container{width:100%}
  /* Text links, rechts ein leerer Platz in der Breite des Filmfensters: so bleibt der Abstand immer gewahrt */
  .glf--pin .glf-hero__cols{display:grid;grid-template-columns:minmax(0,1fr) var(--fw);column-gap:clamp(90px,10vw,170px);align-items:center}
  .glf--pin .glf-hero__slot{display:block}
  .glf--pin .glf-hero__text{max-width:600px;pointer-events:auto}
}
@media (min-width:1001px) and (max-height:960px){
  .glf--pin .glf-hero__more{display:none}
}
@media (min-width:1001px) and (max-height:820px){
  .glf--pin .glf-hero__logo{width:120px;margin-bottom:22px}
  .glf--pin .glf-hero__manifest .uk-text-lead{margin-top:22px !important}
  .glf--pin .glf-cycle{margin-top:22px}
  .glf--pin .glf-cycle::before{margin-bottom:14px}
}

/* ---------- 02 Kampagnenfilm ---------- */
.glf-film{position:relative;height:var(--glf-vh);min-height:520px;overflow:hidden;background:#000}
.glf-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glf-film::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.66),rgba(0,0,0,0) 55%);transition:opacity .8s}
.glf-film__bar{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,8vh,90px)}
.glf-film__bar .uk-container{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.glf-film__caption{width:min(30rem,100%);margin-left:auto;transition:opacity .7s,transform .7s}
.glf-film__caption h2{margin:10px 0 0}
.glf-film__controls{display:flex;gap:26px;opacity:0;pointer-events:none;transition:opacity .7s}
.glf-film.glf-is-sound::after{opacity:0}
.glf-film.glf-is-sound .glf-film__caption{opacity:0;transform:translateY(20px);pointer-events:none}
.glf-film.glf-is-sound .glf-film__controls{opacity:1;pointer-events:auto}

/* ---------- 03 Kapitel: Titel und Triptychon der drei Modelle ---------- */
.glf-chapter h2 em,.glf-em-break em{display:block}
.glf .glf-chapter{padding-bottom:clamp(50px,6vw,90px)}
.glf-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);padding-bottom:clamp(24px,4vw,56px)}
.glf-panel{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;color:#fff;text-decoration:none;background:#2e2117}
.glf-panel:hover{color:#fff;text-decoration:none}
.glf-panel:nth-child(2){top:clamp(24px,4vw,56px)}
.glf-panel img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--glf-ease)}
.glf-panel:hover img{transform:scale(1.09)}
.glf-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,10,.66) 0%,rgba(20,14,10,0) 46%)}
.glf-panel__cap{position:absolute;z-index:1;left:clamp(14px,2vw,30px);right:clamp(14px,2vw,30px);bottom:clamp(14px,2vw,28px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.glf-panel__cap .uk-h2{display:block;margin:4px 0 0}
.glf-panel__arrow{flex:none;width:38px;height:38px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;transition:background-color .4s,color .4s,transform .4s var(--glf-ease)}
.glf-panel__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.glf-panel:hover .glf-panel__arrow{background:#fff;color:#2e2117;transform:translateY(4px)}
@media (max-width:639px){
  .glf-triptych{grid-template-columns:1fr;padding-bottom:0}
  .glf-panel{aspect-ratio:4/3}
  .glf-panel:nth-child(2){top:0}
}

/* ---------- 04 Porträts ----------
   Der Rahmen .glf-rooms trägt die Grundfarbe und blendet beim Scrollen in die
   Farbe des jeweiligen Modells. Darüber wandern weiche Farbflächen (animierter
   Verlauf), die mit dem Modell wechseln. Dunkle Farbwelten bekommen per JS uk-light. */
.glf-rooms{position:relative;transition:background-color 1.1s var(--glf-ease-io)}
.glf-rooms[data-room="g"]{background-color:#c7d1dc}
.glf-rooms[data-room="r"]{background-color:#e4d1c7}
.glf-rooms[data-room="gr"]{background-color:#e9dcc3}
.glf-rooms[data-room="250gr"]{background-color:#33102c}
.glf-rooms[data-room="250r"]{background-color:#083224}
.glf-rooms[data-room="250g"]{background-color:#0a2347}
/* Der Hintergrund füllt den ganzen Rahmen; darin bleibt eine bildschirmhohe Fläche stehen */
.glf-rooms__bg{position:absolute;inset:0;pointer-events:none}
.glf-rooms__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.glf-room-bg{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--glf-ease-io)}
.glf-room-bg.glf-is-active{opacity:1}
.glf-room-bg i{position:absolute;width:78vmax;height:78vmax;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 60%);will-change:transform;animation-play-state:paused}
.glf-room-bg i:nth-child(1){left:-22%;top:-38%;animation:glf-drift-a 20s ease-in-out infinite alternate}
.glf-room-bg i:nth-child(2){left:36%;top:6%;animation:glf-drift-b 26s ease-in-out infinite alternate}
.glf-room-bg i:nth-child(3){left:2%;top:36%;animation:glf-drift-c 23s ease-in-out infinite alternate}
.glf-room-bg.glf-is-active i{animation-play-state:running}

.glf-portrait{position:relative;padding:clamp(80px,14vh,160px) 0}
.glf-portrait__stage{position:relative;isolation:isolate;padding:0 15% 12% 0}
.glf-portrait--b .glf-portrait__stage{padding:0 0 12% 15%}
.glf-cushion{position:relative;width:100%;max-width:min(470px,calc(var(--glf-vh) * .7 * .8908));aspect-ratio:31/34.8;border-radius:30%/27%;overflow:hidden;background:rgba(0,0,0,.08);outline:1px solid rgba(46,33,23,.25);outline-offset:14px;transform:translateZ(0)}
.glf-portrait--b .glf-cushion{margin-left:auto}
.uk-light .glf-cushion{outline-color:rgba(255,255,255,.3)}
.glf-cushion video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Freisteller der Uhr vor dem Filmfenster; die Datei hat rundum viel durchsichtigen Rand */
.glf-portrait__watch{position:absolute;right:-13%;bottom:-6%;width:66%;max-width:none;filter:drop-shadow(0 26px 28px rgba(30,20,12,.28));animation:glf-float 7s ease-in-out infinite alternate;pointer-events:none}
.glf-portrait--b .glf-portrait__watch{right:auto;left:-13%}
.glf-portrait--jewel .glf-portrait__stage::before{content:"";position:absolute;z-index:-1;inset:-14% -8% -6%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent 72%);animation:glf-pulse 5s ease-in-out infinite alternate}
.glf-portrait--jewel .glf-portrait__watch{filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
.glf-portrait__head{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid rgba(46,33,23,.22)}
.uk-light .glf-portrait__head{border-bottom-color:rgba(255,255,255,.24)}
.glf-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 34px;margin:0;padding:34px 0 0;list-style:none;border-top:1px solid rgba(46,33,23,.22)}
.uk-light .glf-specs{border-top-color:rgba(255,255,255,.24)}
.glf-specs li{display:flex;gap:16px;align-items:flex-start}
.glf-specs .uk-h4{margin:3px 0 4px}
.glf-gems{display:flex;flex-wrap:wrap;gap:22px 48px;margin:0}
.glf-gems dt{font-family:"NFFAKG+Chapman",Georgia,serif;font-weight:400;font-size:clamp(3rem,5vw,4.5rem);line-height:1;font-variant-numeric:lining-nums}
.glf-gems dd{margin:8px 0 0}
.glf-portrait__still{margin:64px 0 0;overflow:hidden}
.glf-portrait__still img{width:100%;aspect-ratio:3/2;object-fit:cover}
.glf-portrait__still--tall img{width:78%;aspect-ratio:4/5}
.glf-portrait--a .glf-portrait__still--tall img{margin-left:auto}
@media (min-width:960px){
  .glf-portrait__stage{position:sticky;top:calc(var(--glf-top) + max(36px,(var(--glf-vh) - min(470px,var(--glf-vh) * .7 * .8908) * 1.26) / 2))}
}
@media (max-width:639px){
  .glf-specs{grid-template-columns:1fr}
  .glf-portrait__still--tall img{width:100%}
}

/* Farbleiste am rechten Rand, nur während der Porträts sichtbar */
.glf-rail{position:fixed;z-index:5;right:clamp(14px,2vw,30px);top:calc(var(--glf-top) + var(--glf-vh) / 2);display:grid;gap:14px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .6s}
.glf-rail.glf-is-on{opacity:1;pointer-events:auto}
.glf-rail a{position:relative;display:block;width:12px;aspect-ratio:31/34.8;border-radius:34%/31%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 0 2px rgba(46,33,23,.18);transition:transform .4s}
.glf-rail a::after{content:"";position:absolute;inset:-9px}
.glf-rail a.glf-is-active{transform:scale(1.7)}
@media (max-width:959px){.glf-rail{display:none}}

/* ---------- 05 Im Detail: Fächer aus vier Makroaufnahmen ---------- */
.glf-fan{display:flex;gap:clamp(6px,.8vw,12px);height:min(72vh,660px);min-height:420px}
.glf-fan__item{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#2e2117;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:flex-grow .9s var(--glf-ease-io);-webkit-appearance:none;appearance:none}
.glf-fan__item.glf-is-open{flex-grow:6.5;cursor:default}
.glf-fan__item img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.6s var(--glf-ease),filter .9s}
.glf-fan__item:not(.glf-is-open) img{filter:saturate(.7) brightness(.78)}
.glf-fan__item:not(.glf-is-open):hover img{filter:none}
.glf-fan__item.glf-is-open img{transform:scale(1.04)}
.glf-fan__item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,14,10,.82) 0%,rgba(20,14,10,.3) 34%,rgba(20,14,10,0) 60%);pointer-events:none}
.glf-fan__tab{position:absolute;z-index:1;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .4s}
.glf-fan__tab b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"NFFAKG+Chapman",Georgia,serif;font-weight:400;font-size:22px;line-height:1.1;white-space:nowrap}
.glf-fan__item.glf-is-open .glf-fan__tab{opacity:0}
.glf-fan__body{position:absolute;z-index:1;left:clamp(18px,2.6vw,40px);right:clamp(18px,2.6vw,40px);bottom:clamp(18px,2.6vw,36px);display:block;max-width:30em;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s var(--glf-ease);pointer-events:none}
.glf-fan__item.glf-is-open .glf-fan__body{opacity:1;transform:none;transition-delay:.45s}
.glf-fan__body .uk-h2{display:block;margin:6px 0 10px;color:#fff}
.glf-fan__body > span{display:block}
@media (max-width:959px){
  .glf-fan{flex-direction:column;height:auto;min-height:0}
  .glf-fan__item{flex:none;height:76px;transition:height .8s var(--glf-ease-io)}
  .glf-fan__item.glf-is-open{height:min(64vh,520px)}
  .glf-fan__tab{flex-direction:row;justify-content:flex-start;bottom:24px;left:18px}
  .glf-fan__tab b{writing-mode:horizontal-tb;transform:none}
}

/* ---------- 08 Handwerk: zwei Bänder über die volle Breite, Bild und Zähler nebeneinander ---------- */
.glf-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#17110d}
.glf-band + .glf-band{margin-top:clamp(6px,.8vw,12px)}
.glf-band__media{position:relative;aspect-ratio:8/9;max-height:92vh;overflow:hidden}
.glf-band__media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.glf-band--flip .glf-band__media{order:-1}
.glf-band__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,110px)}
.glf-band__text > *{max-width:520px}
.glf-counts{display:flex;gap:0 clamp(18px,2.4vw,38px);margin:36px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.26)}
.glf-counts > div{flex:1 1 0;min-width:0}
.glf-counts dt{font-family:"NFFAKG+Chapman",Georgia,serif;font-weight:400;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;color:#fff;font-variant-numeric:lining-nums tabular-nums}
.glf-counts dd{margin:10px 0 0;font-size:14px;line-height:1.5}
@media (max-width:959px){
  .glf-band{grid-template-columns:1fr}
  .glf-band__media{aspect-ratio:4/3;order:-1}
}

/* ---------- 09 Kollektion: zwei Gruppen mit je drei gleich aufgebauten Karten ---------- */
.glf-lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px clamp(30px,5vw,80px)}
.glf-lineup__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,16px);margin-top:30px}
.glf-card{display:flex;flex-direction:column;padding:0 10px 22px;background:#fff;color:inherit;text-align:center;text-decoration:none;transition:transform .6s var(--glf-ease),box-shadow .6s var(--glf-ease)}
.glf-card:hover{color:inherit;text-decoration:none;transform:translateY(-6px);box-shadow:0 18px 40px rgba(46,33,23,.12)}
.glf-card__img{position:relative;aspect-ratio:3/4;margin:0 -10px;overflow:hidden}
/* Freisteller mit viel Rand: größer als die Kachel setzen, damit die Uhr sie füllt */
.glf-card__img img{position:absolute;left:50%;top:50%;height:124%;width:auto;max-width:none;translate:-50% -50%;transition:scale .9s var(--glf-ease)}
.glf-card:hover .glf-card__img img{scale:1.05}
.glf-card .uk-h3{margin:6px 0 4px}
.glf-card .glf-label{opacity:.75}
.glf-card__meta{margin-top:8px;font-size:14px;line-height:1.4}
@media (max-width:1199px){.glf-lineup{grid-template-columns:1fr}}
@media (max-width:479px){
  .glf-card{padding:0 4px 14px}
  .glf-card__img{margin:0 -4px}
  .glf-card .uk-h3{font-size:19px}
  .glf-card .glf-label{font-size:9px;letter-spacing:.5px}
  .glf-card__meta{font-size:12px}
}

/* ---------- Einblenden (nur mit JavaScript) ---------- */
.glf--js .glf-reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--glf-ease) var(--d,0s),transform 1.1s var(--glf-ease) var(--d,0s)}
.glf--js .glf-reveal.glf-is-in{opacity:1;transform:none}
.glf--js .glf-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--glf-ease-io) var(--d,0s)}
.glf--js .glf-wipe.glf-is-in{clip-path:inset(0)}

@media (prefers-reduced-motion:reduce){
  .glf *,.glf *::before,.glf *::after{animation:none !important;transition-duration:.01ms !important}
  .glf--js .glf-reveal{opacity:1;transform:none}
  .glf--js .glf-wipe{clip-path:none}
  .glf-cycle__item:first-child{opacity:1}
}