#instaroid, #instafeed { box-sizing: border-box; position: relative; width: 100%; background: #f0f0f0; padding: 5px; } #instafeed { background: transparent; } #instaroid .img img, #instafeed .img img { width: 100%; opacity: .8; transition: .7s; z-index: 1; } #instaroid img:first-of-type, #instafeed img:first-of-type { width: 100%; z-index: 1; } #instaroid img:hover, #instafeed img:hover { transition: .7s; opacity: 1; } #instaroid .img { float: left; width: 12%; margin: 4px 11px; position: relative; } #instafeed .img { float: left; width: 20%; margin: 4px 11px; position: relative; } #instaroid .img:first-of-type { float: left; width: 25%; margin-top: 5px; position: relative; } #instaroid .img .socialname, #instafeed .img .socialname { display: inline-block; background: #e7857d; color: #fff; text-align: center; padding: 5px; font-size: 7px; letter-spacing: 1px; font-family: calibri; text-transform: uppercase; position: absolute; bottom: 15px; left: 5%; z-index: 2; border-radius: 3px; } #instaroid .img .socialname a:link, #instaroid .img .socialname a:hover, #instaroid .img .socialname a:visited, #instaroid .img .socialname a:active, #instafeed .img .socialname a:link, #instafeed .img .socialname a:hover, #instafeed .img .socialname a:visited, #instafeed .img .socialname a:active, .insta-socialname a:link, .insta-socialname a:hover, .insta-socialname a:visited, .insta-socialname a:active { color: #fff !important; } .instapop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: hsla(0, 0%, 0%, 0.5); z-index: 50; opacity:0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; pointer-events: none; } .instapop:target { opacity:1; pointer-events: auto; } .instapop > .pop { background: #dedede; width: 820px; position: relative; margin: 3% auto; padding: 25px; z-index: 51; border-radius: 10px; } .closepop { position: absolute; right: -5px; top:-5px; width: 100%; height: 100%; z-index: 49; } .insta-picture > img { height: 400px !important; width: 400px !important; border-radius: 5px; } .insta-userinfo { box-sizing: border-box; width: 400px; background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.05); border-radius: 5px; margin-bottom: 10px; padding: 5px; } .insta-userpicture img { height: 40px !important; width: 40px !important; margin-top: 5px; margin-left: 20px; border-radius: 2px; } .insta-socialname { display: inline-block; background: #e7857d; color: rgba(255,255,255,.9); text-align: center; padding: 5px; font-size: 9px; letter-spacing: 1px; font-family: calibri; text-transform: uppercase; margin-left: 15px; border-radius: 3px; position: relative; font-weight: bold; letter-spacing: 2px; bottom: 15px; } .insta-socialname a:link, .insta-socialname a:active, .insta-socialname a:visited, .insta-socialname a:hover { color: #f1f1f1 !important; } .insta-userinfo i { position: relative; bottom: 15px; margin-left: 15px; } .insta-description { box-sizing: border-box; margin-top: 10px; background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.05); padding: 10px; width: 400px; border-radius: 5px; font-family: Calibri, sans-serif; font-size: 13px; line-height: 1.2em; color: #6b6b6b; text-align: justify; } .insta-comments { float: right; height: 520px; width: 400px; overflow: auto; } .insta_input { width: 80%; margin: auto; margin-right: 5px; border: none; border-radius: 3px; background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.05); padding: 10px; color: #6d6d6d; } .insta_submit { padding: 12px; border: none; border-radius: 3px; font-family: calibri, sans-serif; font-size: 9px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; position: relative; bottom: 2px; margin-right: 5px; color: #f9f9f9; background: #e7857d; } .insta-comment { margin-top: 15px; } .insta_usercomment { box-sizing: border-box; background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.05); padding: 10px 30px; border-radius: 5px; font-family: Calibri, sans-serif; font-size: 14px; line-height: 1.3em; color: #6b6b6b; text-align: justify; letter-spacing: 0.5px; margin: 2px auto; } .insta_usercomment a:link, .insta_usercomment a:active, .insta_usercomment a:hover, .insta_usercomment a:visited { color: #6b6b6b; } .insta-tagged { box-sizing: border-box; background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.05); padding: 10px 30px; border-radius: 5px; margin: 2px auto; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; } .insta-taguser { display: inline-block; text-transform: uppercase; letter-spacing: 1px; font-size: 8px; padding: 5px; background: #dedede; font-weight: bold; border-radius: 2px; } #instaroid-postbit { margin: auto; width: 80%; margin-bottom: 10px; } .insta-postbit { float: left; margin: 3px; } .insta-postbit img { width: 95px; height: 95px; opacity: .4; transition: .7s; border-radius: 5px; z-index: 1; } .insta-postbit img:hover { transition: .7s; opacity: .7; }


/* =========================================================
   SUNSET AVENUE – INSTAROID PASTELL-SCHLEIER
   ========================================================= */

/* Bildbereiche vorbereiten */
#instaroid .img,
#instafeed .img,
.insta-postbit,
.insta-picture {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #fffaf6 !important;
}

/* Weicher Schleier über den Vorschaubildern */
#instaroid .img::after,
#instafeed .img::after,
.insta-postbit::after,
.insta-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 249, 244, .34),
      rgba(221, 239, 235, .20),
      rgba(247, 206, 199, .18)
    );

  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, .26);
  transition: opacity .45s ease;
}

/* Beim Hover wird das Bild etwas klarer */
#instaroid .img:hover::after,
#instafeed .img:hover::after,
.insta-postbit:hover::after,
.insta-picture:hover::after {
  opacity: .28;
}

/* Bilder selbst etwas weicher */
#instaroid .img img,
#instafeed .img img,
.insta-postbit img,
.insta-picture > img {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  filter:
    saturate(.80)
    contrast(.94)
    brightness(1.04);
  transition:
    filter .45s ease,
    transform .45s ease;
}

/* Leichtes Zoomen beim Hover */
#instaroid .img:hover img,
#instafeed .img:hover img,
.insta-postbit:hover img,
.insta-picture:hover > img {
  filter:
    saturate(.94)
    contrast(.98)
    brightness(1.01);
  transform: scale(1.018);
}

/* Der Benutzername muss über dem Schleier bleiben */
#instaroid .img .socialname,
#instafeed .img .socialname {
  z-index: 4 !important;
  background: rgba(223, 136, 126, .88) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 6px 13px rgba(113, 79, 67, .12) !important;
  backdrop-filter: blur(3px);
}

/* Gesamter Instaroid-Bereich passend zum Forum */
#instaroid,
#instafeed {
  padding: 12px !important;
  border: 1px solid rgba(204, 169, 154, .20) !important;
  border-radius: 18px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(187, 219, 214, .24),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(246, 194, 185, .20),
      transparent 32%
    ),
    rgba(255, 252, 248, .88) !important;

  box-shadow:
    0 14px 30px rgba(117, 86, 73, .08) !important;
}

/* Popup ebenfalls weicher und heller */
.instapop > .pop {
  background:
    linear-gradient(
      135deg,
      rgba(255, 252, 248, .98),
      rgba(247, 238, 232, .96)
    ) !important;

  border: 1px solid rgba(204, 169, 154, .24) !important;
  border-radius: 18px !important;

  box-shadow:
    0 24px 60px rgba(82, 60, 51, .20) !important;
}

/* Texte und Kommentarboxen anpassen */
.insta-userinfo,
.insta-description,
.insta_input,
.insta_usercomment,
.insta-tagged {
  background: rgba(255, 253, 249, .74) !important;
  border: 1px solid rgba(204, 169, 154, .18) !important;
  color: #746762 !important;
}

/* Knöpfe und Namen in Sunset-Coral */
.insta-socialname,
.insta_submit {
  background:
    linear-gradient(
      135deg,
      #e79a91,
      #d98279
    ) !important;

  box-shadow:
    0 7px 15px rgba(217, 130, 121, .17) !important;
}

/* =========================================================
   HOT ON PULSEGRAM – FINALES DARK-LAYOUT
   ========================================================= */

#instaroid {
  --pulse-large: 170px;
  --pulse-small: 81px;
  --pulse-gap: 8px;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: var(--pulse-large) var(--pulse-small) !important;
  grid-template-rows: var(--pulse-small) var(--pulse-small) !important;
  gap: var(--pulse-gap) !important;
  align-items: start !important;
  justify-content: start !important;
  width: 100% !important;
  padding: 12px !important;
  background: radial-gradient(circle at 100% 0%, rgba(86, 137, 139, .14), transparent 35%), radial-gradient(circle at 0% 100%, rgba(175, 91, 91, .10), transparent 34%), #fdfaf7 !important;
  border: 1px solid rgba(120, 165, 165, .12) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24) !important;
}

/* Alle drei Kacheln */
#instaroid > .img {
  box-sizing: border-box !important;
  float: none !important;
  position: relative !important;
  width: var(--pulse-small) !important;
  height: var(--pulse-small) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fdfaf7 !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 8px !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .20) !important;
}

/* Großes Bild links */
#instaroid > .img:first-of-type {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;

  width: var(--pulse-large) !important;
  height: var(--pulse-large) !important;
}

/* Kleine Bilder rechts */
#instaroid > .img:nth-of-type(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#instaroid > .img:nth-of-type(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Mehr als drei Posts ausblenden */
#instaroid > .img:nth-of-type(n + 4) {
  display: none !important;
}

/* Link füllt das ganze Quadrat */
#instaroid > .img > a:first-child {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

/* Bilder wirklich quadratisch */
#instaroid > .img > a:first-child img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  border-radius: inherit !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  filter:
    saturate(.82)
    contrast(.96)
    brightness(.88) !important;
}

/* Pastell-/Dark-Schleier innerhalb des Bildes */
#instaroid > .img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      135deg,
      rgba(104, 157, 158, .10),
      rgba(226, 135, 127, .08),
      rgba(2, 8, 14, .18)
    ) !important;

  box-shadow: inset 0 0 18px rgba(255, 255, 255, .04) !important;
}

/* Name vollständig innerhalb des Bildes */
#instaroid > .img .socialname {
  box-sizing: border-box !important;
  display: block !important;
  position: absolute !important;

  left: 4px !important;
  right: 4px !important;
  bottom: 4px !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 8px) !important;

  margin: 0 !important;
  padding: 4px 3px !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  background:
    linear-gradient(
      135deg,
      rgba(211, 117, 111, .96),
      rgba(167, 84, 84, .96)
    ) !important;

  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 3px !important;
  color: #fff !important;

  font-family: Arial, sans-serif !important;
  font-size: 6px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  box-shadow: 0 4px 9px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(3px);
  z-index: 10 !important;
}

/* Link und Strong übernehmen die kleine Schrift */
#instaroid > .img .socialname strong,
#instaroid > .img .socialname a {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  white-space: nowrap !important;

  color: #fff !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
font-size: 5pt !important;
}

/* Name im großen Bild etwas größer */
#instaroid > .img:first-of-type .socialname {
  padding: 5px 6px !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

/* Alte Umbrüche werden im Grid nicht benötigt */
#instaroid > br {
  display: none !important;
}

/* Hover */
#instaroid > .img:hover {
  z-index: 20 !important;
}

#instaroid > .img:hover > a:first-child img {
  filter:
    saturate(.96)
    contrast(1)
    brightness(.94) !important;
  transform: scale(1.018);
}

/* Mobil */
@media (max-width: 520px) {
  #instaroid {
    --pulse-large: min(58vw, 170px);
    --pulse-small: calc(
      (var(--pulse-large) - var(--pulse-gap)) / 2
    );
  }

  #instaroid > .img .socialname {
    font-size: 3.8px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}