/* ==========================================================================
   Gold Marry – Meine Paare
   1) Übersicht (Mosaik mit Hover-Text)   2) Seite eines Paares (Collage + Text)
   3) Bild-Großansicht                    4) Pfeil "nach oben"

   SCHRIFTEN UND FARBEN legt NICHT das Plugin fest – sie kommen von der Website:
     · mit Elementor:  Website-Einstellungen → Globale Schriften / Globale Farben
                       Überschriften = "Primär" · Fließtext = "Text" · kleine Zeilen = "Akzent"
     · ohne Elementor: aus dem Theme (Grundschrift und -farbe, Überschriften-Stil, Link-Farbe)
   Das Plugin bestimmt nur Anordnung, Größen, Abstände und Effekte.
   Fest sind allein die helle Schrift und der dunkle Verlauf AUF den Fotos (Lesbarkeit).
   ========================================================================== */
body{
  --gmp-font-head:var(--e-global-typography-primary-font-family);
  --gmp-weight-head:var(--e-global-typography-primary-font-weight);
  --gmp-font-text:var(--e-global-typography-text-font-family);
  --gmp-font-label:var(--e-global-typography-accent-font-family);
  --gmp-color-head:var(--e-global-color-primary);
  --gmp-color-text:var(--e-global-color-text);
  --gmp-accent:var(--e-global-color-accent,var(--wp--preset--color--primary,var(--wp--preset--color--accent)));
  --gmp-ease:cubic-bezier(.2,.7,.2,1);
  --gmp-tile:rgba(128,128,128,.16); /* neutrale Fläche, solange ein Foto lädt */
}
/* Überschriften: auf Elementor-Websites die globale Primär-Schrift; sonst greift von selbst der Überschriften-Stil des Themes */
body[class*="elementor-kit-"] .gmp-card .gmp-card__name,
body[class*="elementor-kit-"] .gmp-wrap .gmp-intro__title,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__title,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h2,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h3,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h4,
body[class*="elementor-kit-"] .gmp-single .gmp-nav__side a{font-family:var(--gmp-font-head,inherit);font-weight:var(--gmp-weight-head,inherit);}
body[class*="elementor-kit-"] .gmp-wrap .gmp-intro__title,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__title,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h2,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h3,
body[class*="elementor-kit-"] .gmp-single .gmp-paper__text h4{color:var(--gmp-color-head,inherit);}

/* Kopfbereich der Übersichtsseite, wenn er mit Elementor gebaut ist (Widgets mit den Klassen gm-title / gm-lead): nur Anordnung und Größe */
.gm-intro{text-align:center;padding-top:66px;padding-bottom:8px;}
.gm-intro .gm-title .elementor-heading-title,.elementor-widget-heading.gm-title .elementor-heading-title{font-size:clamp(42px,7vw,78px);line-height:1.03;margin:0;}
.gm-lead{max-width:640px;margin:12px auto 0 !important;}
.gm-lead .elementor-widget-container{font-size:18px;line-height:1.6;}

/* ---------- 1) Übersicht ---------- */
.gmp-wrap{padding:24px 0 60px;width:100vw;margin-left:calc(50% - 50vw);overflow-x:hidden;font-family:var(--gmp-font-text,inherit);color:var(--gmp-color-text,inherit);}
.gmp-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:296px;gap:16px;max-width:1680px;width:92%;margin:0 auto;opacity:0;transition:opacity .6s ease;}
.gmp-grid.gmp-ready,.gmp-grid.gmp-flow,body.elementor-editor-active .gmp-grid{opacity:1;}
.gmp-grid.gmp-flow{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
.gmp-grid.gmp-flow .gmp-card{aspect-ratio:2 / 3;}

/* Überschrift + Einleitung über dem Mosaik (Shortcode-Angaben titel="" und text="") */
.gmp-intro{text-align:center;width:92%;margin:0 auto;padding:42px 0 34px;}
.gmp-wrap .gmp-intro__title{margin:0;padding:0;border:0;font-size:clamp(42px,7vw,78px);line-height:1.03;}
.gmp-wrap .gmp-intro__lead{max-width:640px;margin:12px auto 0;padding:0;font-size:18px;line-height:1.6;}

.gmp-card{position:relative;display:block;min-width:0;overflow:hidden;border-radius:14px;background:var(--gmp-tile);
  box-shadow:none;text-decoration:none !important;color:#fff !important;outline-offset:3px;}
.gmp-card__img,.gmp-card__img img{position:absolute;inset:0;width:100%;height:100%;display:block;}
.gmp-card__img img{object-fit:cover;object-position:center 30%;max-width:none;border-radius:0;transition:transform 1.4s var(--gmp-ease);}
/* Lesbarkeit auf dem Foto: Grundverlauf (immer) + dunkler Schleier (nur beim Hover) */
.gmp-card::before,.gmp-card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;}
.gmp-card::before{background:linear-gradient(to top,rgba(20,20,20,.78) 0%,rgba(20,20,20,.22) 46%,rgba(20,20,20,0) 74%);}
.gmp-card::after{background:linear-gradient(to top,rgba(20,20,20,.92) 0%,rgba(20,20,20,.78) 55%,rgba(20,20,20,.45) 100%);opacity:0;transition:opacity .7s ease;}

.gmp-card__body{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;padding:0 22px 22px;}
.gmp-card .gmp-card__name{margin:0;padding:0;border:0;font-size:26px;line-height:1.12;color:#fff;}
.gmp-card .gmp-card__name::before,.gmp-card .gmp-card__name::after{content:none;}
.gmp-card__meta{margin-top:8px;font-family:var(--gmp-font-label,inherit);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);}
.gmp-card__story{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--gmp-lines,6);overflow:hidden;max-height:0;opacity:0;margin-top:0;
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.94);
  transform:translateY(10px);transition:max-height .8s var(--gmp-ease),opacity .6s ease .05s,margin-top .6s var(--gmp-ease),transform .8s var(--gmp-ease);}
.gmp-card[data-rows="2"] .gmp-card__story{font-size:16.5px;}
.gmp-card[data-rows="1"][data-cols="1"] .gmp-card__story{font-size:15px;line-height:1.45;}
.gmp-card[data-cols="2"] .gmp-card__story{font-size:17px;max-width:560px;}
.gmp-card__more{display:block;max-height:0;opacity:0;margin-top:0;overflow:hidden;font-family:var(--gmp-font-label,inherit);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  transition:max-height .6s ease,opacity .6s ease .15s,margin-top .6s ease;}
.gmp-card__more::after{content:" \2192";}

@media (hover:hover){
  .gmp-card:hover .gmp-card__img img{transform:scale(1.06);}
  .gmp-card:hover::after{opacity:1;}
  .gmp-card:hover .gmp-card__story{max-height:420px;opacity:1;margin-top:14px;transform:none;}
  .gmp-card:hover .gmp-card__more{max-height:30px;opacity:1;margin-top:14px;}
}
.gmp-card:focus-visible::after{opacity:1;}
.gmp-card:focus-visible .gmp-card__story{max-height:420px;opacity:1;margin-top:14px;transform:none;}
.gmp-card:focus-visible .gmp-card__more{max-height:30px;opacity:1;margin-top:14px;}
/* Kachel ohne eigene Seite: zeigt nur den Hover-Text, ist kein Link (auf Touch-Geräten erscheint der Text beim Antippen) */
.gmp-card--static{cursor:default;}
.gmp-card--static:focus{outline:none;}
.gmp-card--static:focus::after{opacity:1;}
.gmp-card--static:focus .gmp-card__story{max-height:420px;opacity:1;margin-top:14px;transform:none;}
.gmp-empty{text-align:center;font-size:20px;padding:60px 20px;}

@media(max-width:900px){.gmp-grid{width:95%;}}
@media(max-width:560px){.gmp-grid.gmp-flow{grid-template-columns:1fr;}}

/* ---------- 2) Seite eines Paares ---------- */
.gmp-single{display:block;padding:34px 0 76px;font-family:var(--gmp-font-text,inherit);font-size:16px;line-height:1.6;color:var(--gmp-color-text,inherit);}
/* Zurück-Link über der Collage */
.gmp-back{max-width:1280px;width:92%;margin:0 auto 14px;padding:0;}
.gmp-back a{font-family:var(--gmp-font-label,inherit);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:opacity .3s ease;}
.gmp-back a:hover{opacity:.65;}
/* Foto-Collage: Mosaik wie die Übersicht – Anordnung per gm-paare.js, bei jedem Seitenaufruf zufällig neu */
.gmp-collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px;max-width:1280px;width:92%;margin:0 auto;opacity:0;transition:opacity .6s ease;}
.gmp-collage.gmp-ready,.gmp-collage.gmp-flow{opacity:1;}
.gmp-collage__item{position:relative;display:block;min-width:0;overflow:hidden;border-radius:14px;background:var(--gmp-tile);cursor:zoom-in;}
.gmp-collage__item img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 30%;display:block;transition:transform 1.4s var(--gmp-ease);}
.gmp-collage__item:hover img{transform:scale(1.045);}
/* Einfache Raster-Ansicht: schmale Bildschirme – oder Fotos, die sich nicht lückenlos als Mosaik legen lassen */
.gmp-collage.gmp-flow{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px;}
.gmp-collage.gmp-flow .gmp-collage__item{aspect-ratio:3 / 4;}
.gmp-collage.gmp-flow .gmp-collage__item:last-child:nth-child(odd){grid-column:1 / -1;aspect-ratio:3 / 2;}
/* Ein einzelnes Foto: unbeschnitten in seinem eigenen Format */
.gmp-collage--n1.gmp-flow{grid-template-columns:1fr;max-width:min(92%,1080px,calc(78vh * var(--gmp-ar,1.5)));}
.gmp-collage--n1.gmp-flow .gmp-collage__item:last-child:nth-child(odd){grid-column:auto;aspect-ratio:var(--gmp-ar,1.5);}
@media(min-width:761px){
  .gmp-collage--n3.gmp-flow{grid-template-columns:repeat(3,1fr);gap:16px;}
  .gmp-collage--n3.gmp-flow .gmp-collage__item,.gmp-collage--n3.gmp-flow .gmp-collage__item:last-child:nth-child(odd){grid-column:auto;aspect-ratio:1 / 1;}
}

.gmp-paper{max-width:760px;width:88%;margin:58px auto 0;}
.gmp-paper--cols2{max-width:1080px;}
.gmp-paper__head{text-align:center;margin-bottom:38px;}
.gmp-single .gmp-eyebrow{margin:0 0 12px;padding:0;font-family:var(--gmp-font-label,inherit);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gmp-accent,currentColor);}
.gmp-single .gmp-paper__title{margin:0;padding:0;border:0;font-size:clamp(40px,6vw,68px);line-height:1.05;}
.gmp-single .gmp-paper__meta{margin:16px 0 0;padding:0;font-family:var(--gmp-font-label,inherit);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75;}
.gmp-divider{display:block;width:46px;height:1px;margin:26px auto 0;background:var(--gmp-accent,currentColor);opacity:.8;}
.gmp-single .gmp-paper__text{font-size:18px;line-height:1.7;}
.gmp-paper--cols2 .gmp-paper__text{column-count:2;column-gap:60px;column-rule:1px solid rgba(128,128,128,.3);}
.gmp-single .gmp-paper__text p{margin:0 0 16px;padding:0;}
.gmp-paper__text > p:first-of-type::first-letter{float:left;padding:6px 10px 0 0;font-family:var(--gmp-font-head,inherit);font-size:3.3em;line-height:.8;color:var(--gmp-accent,currentColor);}
.gmp-single .gmp-paper__text h2,.gmp-single .gmp-paper__text h3,.gmp-single .gmp-paper__text h4{margin:26px 0 8px;padding:0;font-size:27px;line-height:1.2;break-after:avoid;}
.gmp-paper__text blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:2px solid var(--gmp-accent,currentColor);font-style:italic;break-inside:avoid;}
.gmp-paper__text img{max-width:100%;height:auto;border-radius:12px;}

.gmp-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;max-width:1280px;width:92%;margin:56px auto 0;}
.gmp-more__item{position:relative;display:block;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px;background:var(--gmp-tile);cursor:zoom-in;}
.gmp-more__item img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 1.4s var(--gmp-ease);}
.gmp-more__item:hover img{transform:scale(1.05);}

.gmp-nav{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1080px;width:88%;margin:64px auto 0;padding-top:28px;border-top:1px solid rgba(128,128,128,.3);}
.gmp-nav__side{flex:1 1 0;min-width:0;}
.gmp-nav__side--next{text-align:right;}
.gmp-nav a{font-size:19px;text-decoration:none;transition:opacity .3s ease;}
.gmp-nav a:hover{opacity:.65;}
.gmp-nav a.gmp-nav__all{flex:0 0 auto;padding:11px 26px;border:1px solid currentColor;border-radius:999px;font-family:var(--gmp-font-label,inherit);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}

@media(max-width:820px){
  .gmp-paper--cols2 .gmp-paper__text{column-count:1;}
  .gmp-single .gmp-paper__text{font-size:17px;}
}
@media(max-width:760px){
  .gmp-nav{flex-wrap:wrap;justify-content:center;text-align:center;}
  .gmp-nav__side{flex:1 1 100%;text-align:center;}
  .gmp-nav__side--next{text-align:center;}
}

/* ---------- 3) Bild-Großansicht ---------- */
.gmp-lb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(15,15,15,.92);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;}
.gmp-lb.is-open{opacity:1;visibility:visible;}
.gmp-lb img{width:auto;height:auto;max-width:92vw;max-height:88vh;object-fit:contain;margin:0;padding:0;border:0;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.6);}
.gmp-lb button{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(20,20,20,.4);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background .3s ease;}
.gmp-lb button:hover{background:var(--gmp-accent,rgba(255,255,255,.22));}
.gmp-lb__close{top:18px;right:18px;}
.gmp-lb__prev{left:max(14px,3vw);top:50%;transform:translateY(-50%);}
.gmp-lb__next{right:max(14px,3vw);top:50%;transform:translateY(-50%);}

/* ---------- 4) Pfeil "nach oben" (ab 200 px Scrolltiefe) ---------- */
.gmp-top{position:fixed;right:26px;bottom:26px;z-index:9990;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;background:var(--gmp-accent,rgba(30,30,30,.82));color:#fff;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,visibility .5s ease,transform .5s var(--gmp-ease),filter .3s ease;}
.gmp-top.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.gmp-top:hover,.gmp-top:focus-visible{background:var(--gmp-accent,rgba(30,30,30,.82));color:#fff;filter:brightness(1.25);transform:translateY(-3px);}
.gmp-top svg{display:block;}
@media(max-width:600px){.gmp-top{right:16px;bottom:16px;width:44px;height:44px;}}

@media (prefers-reduced-motion: reduce){
  .gmp-card__img img,.gmp-card::after,.gmp-card__story,.gmp-card__more,.gmp-collage__item img,.gmp-more__item img,.gmp-grid,.gmp-collage,.gmp-lb,.gmp-top{transition:none !important;}
}

/* ---------- Robust in fremden Themes und Page-Buildern ----------
   Schirmt Anordnung und Bildgrößen gegen allgemeine Vorgaben der Website ab
   (z. B. "img{height:auto}", Button-Polster). Schriften und Farben bleiben bewusst unangetastet. */
.gmp-wrap,.gmp-wrap *,.gmp-single,.gmp-single *,.gmp-lb,.gmp-lb *,.gmp-top{box-sizing:border-box;}
.gmp-grid .gmp-card .gmp-card__img img,.gmp-collage .gmp-collage__item img,.gmp-more .gmp-more__item img{width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;}
.gmp-single .gmp-paper__text a,.gmp-single .gmp-nav a,.gmp-single .gmp-back a{box-shadow:none;}
.gmp-wrap a.gmp-card,.gmp-wrap a.gmp-card:hover,.gmp-single a.gmp-collage__item,.gmp-single a.gmp-more__item{text-decoration:none;border:0;}
.gmp-lb button,.gmp-lb button:hover,.gmp-lb button:focus{min-width:0;min-height:0;margin:0;padding:0;text-transform:none;letter-spacing:normal;box-shadow:none;}
button.gmp-top,button.gmp-top:hover,button.gmp-top:focus{min-width:0;min-height:0;margin:0;padding:0;text-transform:none;letter-spacing:normal;}
.gmp-lb button,button.gmp-top{-webkit-appearance:none;appearance:none;font-family:Arial,Helvetica,sans-serif;font-weight:400;}